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:
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:
- <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!
Congrats on the great work !
Does this work on iPad ?
Hey Romain!
The parallax effect is completely disabled on mobile as it does not perform well at all.
Hi, I have tried using the parallax effect, the effect is working but the background is not a full width… Any advice? Thank you!
The full-width component depends entirely on the theme you are using. Some themes do not have built in Support for full-width Aesop components.
The image movement is working, but it’s not full-width. Any ideas?
If it’s a problem with the theme, what should I specifically ask the theme’s developer for in order to make this functional?
You would want to point them towards our Developer documentation: https://aesopstoryengine.com/developers/#scrollNav-1
Hi,
I am using the parallax component, the effects work. However, I am unable to get the background image to full width. Any advice?
I’m having trouble getting a parallax component to move. I’ve added the Aesop snippet to my theme using the Code Snippets plugin.
Thanks.
@Xavier Try setting the width value to 100%, or leave it blank.
@Terri The parallax effect is somewhat minimal and depending on your image, you might not see it right away. If the image is displaying, you’ve entered the code in code snippets correctly.
I am having trouble with the whole thing. My image (background) shows up as about 1/4″ tall, but it is much larger. Also, is there a particular page ‘type’ that works better than another? I am using Karma theme, and I noticed that after I activated Karma, “Blank Canvas” became an option, but neither that nor Splash seems to make a difference in getting this to perform.
Kirbie,
I am not familiar with Karma. But, I am thinking that you don’t have extended styles enabled, and you may need to check on the developer docs if things aren’t working correctly.
Start here: https://aesopstoryengine.com/quick-start-guide and then you can go here: https://aesopstoryengine.com/developers
Hi,
Is Parallax the view that enables to scroll down several images while the page remains in the same horizontal position? If so, how do I add multiple images to the component, like 5 or 6?
Many thanks!
Rutger
Rutger,
That is our parallax stacked gallery.