How to Easily Add the Parallax Effect to Your WordPress Site

You can call it gimmicky, you can call it eye candy, but the parallax effect in web design is here to stay. It’s one element that will give your site the “WOW” factor. While the effect has been around for some time, and there are plenty of sites that have implemented it on their design, it’s still cool.

If you are ready to join the movement and add the effect to your WordPress site, stay tuned.

For those who are not familiar with the term, the dictionary defines the word “parallax” as “the effect whereby the position or direction of an object appears to differ when viewed from different positions.

In the website design world parallax is a technique where background images move at a different speed, usually slower than the foreground images. The purpose is to create an illusion of depth (faux 3D effect) in a 2D environment.

The application of parallax has been around from the 1980s in the gaming world, but web designers just began to incorporate the effect widely in 2011 using HTML5 and CSS3.

If you are a WordPress user, the easiest way to have the parallax effect on your site is to use a WordPress theme with the effect built in. Switch the theme and you are done.

There are tons of parallax-ready WP themes out there, both free and paid. A quick search on Google and in the WordPress theme repository will give you more options that you can ever handle.

If you want to test some of the themes, here are a few examples of them fresh from the repository. Since it’s impossible to test and compare all the available parallax-ready themes and show you only the best, these were chosen solely based on the subjectivity of my personal visual taste.

1. Parallax Frame

parallax-mte-parallax-frame

2. Marvy

parallax-mte-marvy

3. SimpleShift

parallax-mte-simple-shift

4. Eleganto

parallax-mte-eleganto

5. Integral

parallax-mte-integral

6. Zeal

parallax-mte-zeal

7. Juniper

parallax-mte-juniper

8. And don’t forget the latest official theme from WordPress, Twenty Seventeen, also supports a parallax header.

parallax-mte-twenty-seventeen

These themes usually have one or a few specific placeholders for the parallax effect, and all you need to do is upload the background image to those locations. But this simplicity is also a disadvantage because you have little room to improvise.

Every theme is different, but you can usually customize the background parallax image via the “Appearance -> Customize” menu and choose the specific menu according to the theme settings.

parallax-mte-customize-cronus

If you want to apply the effect to the areas of your choice, you need to use plugins. Although the number is not as big as with the themes, there are still many WordPress parallax plugins that you can try. Here are a few of them from the plugin repository: Parallax Scroll, Easy WordPress Parallax SlidercbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, and Aesop Story Engine.

Most of these plugins will allow you to create parallax elements and insert them into posts, pages, or any other supported areas using shortcodes. There are also some which create the elements directly in the place where you want the parallax to appear.

Since we have discussed Aesop Story Engine, its parallax insertion ability, and all of its features are in the Building Interactive Longform Storytelling Contents on WordPress ebook, so for the purpose of this article, let’s look at a different plugin as an example.

In Parallax Scroll, for example, you can create a new parallax similar to creating a new post. The editing interface also looks similar. To add the parallax background image, use the “Set featured image” option. Title and post content are optional.

parallax-mte-add-parallax

There are many options that you can tinker with below the content box, but they are also optional.

parallax-mte-scroll-options

After hitting the “Publish” button, you will get a shortcode. Insert this shortcode into any supported place (posts, pages, widgets, etc.), and you will have the parallax effect.

parallax-mte-shortcode

Note that even if you can adjust many things in the options, the final result of the parallax will depend heavily on the themes that you use. If the theme supports full width, then the parallax element can appear in its full-width glory. If not, you can accept what life has given you with open arms, or you could try to hack your way into your preferred appearance using CSS and JavaScript.

A little trick to add to your arsenal: no one said you couldn’t combine the theme and the plugin. Using more than one plugin is also legal. You could, for example, use Twenty Seventeen for your theme and install Aesop Story Engine plus Parallax Scroll as the extra spicing to your web recipe.

Now you can go on a parallax journey and wow your visitors along the way.

Leave a Reply

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.