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.

[ase_step_list]

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:

• 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!

[aesop_parallax height=”350″ img=”http://aesopstoryengine.com/wp-content/uploads/2016/08/pexels-photo-134695-e1471384998154.jpeg” parallaxbg=”fixed” caption=”Parallax component with image floater and caption. Caption position: bottom-left. Floater position: right. Floater direction: up.” captionposition=”bottom-left” lightbox=”off” floater=”on” floatermedia=”” floaterposition=”right” floaterdirection=”none”]

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!