par·al·lax

noun
1. the apparent displacement of an observed object due to a change in the position of the observer.

The parallax effect is in use all over the web, and for good reason. Parallax creates an engaging visual effect and can add depth and drama to your posts and pages. Adding a parallax section to a page or post will level up the design of your WordPress site and give it a professional boost in appearance.

The Aesop parallax component comes with 11 different options for setting up and styling your parallax section. Some experimentation may be needed to make sure parallax effects will look great in your theme. You can also check out some Aesop themes which are built to make every Aesop component look great.

Getting Started

To get started you will need two things:

1. A functional self hosted version of WordPress – Download
2. The Aesop Story Engine plugin – Download

Creating a parallax section

Make sure you’ve installed and activated the Aesop Story Engine plugin from the WordPress admin.

To create a parallax section you will need to insert the parallax component short code into any post or page’s content editor.

• Open a new or existing post and click the "Add Component" button to open the Aesop component panel.

  

• Click the "Parallax component" option to open the parallax options.

  

• Enter in the information to create your parallax section. None of the fields are required although if you don't at least upload a background image or enter some floater text then nothing will show up in the parallax section.

  

• Once you have all your component settings click the "Insert Component" button at the bottom of the component options panel. To make changes to your component you will need to delete the existing short code and create a new one with your updated settings. The option to edit an existing component is slated for release with Aesop 1.1.

  

Parallax component options

Background Image

• Upload an image that you would like to use as the background for your parallax section.
• You can set a height for the parallax section.
• Your uploaded image will be cropped from the top to fit the height that you chose.

Floater

• You can choose to have a second item within the parallax section which “floats” with the background image.
• The floater can be an image or text.
• If you would like to use an image floater you will need to put the HTML code for an image into the “floater media” field. Be sure to add the image element tag and URL without quotes around the image path. Like this:
  1. <img src=http://pathtoimage.com alt=this />

  <img src=http://pathtoimage.com alt=this />

• It’s also worth noting that the floater does not resize so you’ll need to resize the image before placing it.
• If you would like to use text for the floater, type the text to the “floater media” field.
• The position and direction that the floater moves can be set in the options panel.

Caption

• You can set a caption for your parallax section which will show as black text on a white background.
• The caption location can be set in the options panel.

Lightbox

• The background image that you chose for your parallax section can be set to open in an image light box in the options panel.

Floater Example

Here’s a great example with using the floater, the floater offset to determine the position, along with the floater position set to right. The sky is literally the limit!

Go Make Something

The very last step is to just go make something! It’s really easiest to put several parallax component on one page and play with the different combinations of settings to suit the exact look you’re going for. Any questions or comments? Feel free to sound off below!