What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Parallax Scrolling Effect to WordPress Sites

How to Add Parallax Scrolling Effect to WordPress Sites

The parallax scrolling effect is a special effect that you may have seen on many websites with a modern design. With an optical 3-D illusion brought by animating different elements (the background and foreground images) at different speeds, parallax shows a sense of depth, which helps attract the visitors’ attention. Besides, it usually works with the aesthetics of your website. A good example of the parallax scrolling effect is Space Needle, a website allowing you to scroll up to 605 feet to get the experiences of exploring Seattle.

There are two simple ways to apply the parallax scrolling effect to your WordPress site. One is by purchasing a theme with parallax built in. And another is by installing a plugin that enables you to add parallax as a standalone feature.

If you prefer the former solution, it is easy to look for a premium theme with the feature you want. So this tutorial focuses on the plugin method because most people would not consider changing the theme and losing all the customizations. Note that you may need different plugins according to your needs.

Add Parallax Scrolling Effect to WordPress Posts or Pages

There are many plugins that come with the feature you may need, and Parallax Scroll is the one that is designed to add a parallax scrolling background to an area of your posts or pages. This plugin doesn’t provide advanced functionality, but it is a good choice if you want to find a tool to start with parallax.

Parallax Scroll

Create your own parallax

After installing this WordPress plugin, you can start using it immediately by clicking Parallax Scroll > Add New. On the new page, you are able to create your first parallax.

The title and content of the parallax are optional, but you have to set a featured image which will work as the background image of the parallax. This image can be uploaded as any other image on your WordPress site.

Set Featured Image

Scrolling the page down, you will find a couple of parallax scroll options which allow you to customize the new parallax to meet your demands. In the “Style” section, you are able to define the parallax height, image size and horizontal/vertical position, add additional header style, and enable full width display. The size of the parallax should work well with your site’s design. If you are not so sure, that’s OK because you can adjust the values later after trying the parallax on your site.

Parallax Style

In the “Parallax Settings” section, you need to define the parallax speed. You may need tests before finding the perfect speed. But we suggest you not to make the speed too fast.

Parallax Settings

In addition, there is a “Mobile Settings” section where you can customize the image size displayed on mobile devices, or disable the background image or the entire parallax content on mobile devices. The choice is yours.

Mobile Settings

After dealing with all the options, publish the parallax.

Use the parallax in your posts or pages

As soon as the parallax is published, click the “Parallax Scroll” submenu, and you will find the new parallax is well listed with a shortcode. To use the parallax, you only need to copy the shortcode and insert it anywhere you want – in a post, page, or widget. The parallax scrolling effect will be enabled by default.

Add Parallax Scrolling Effect to WordPress Posts with Shortcode

After making your first parallax right, you can create more as you want.

Create Landing Pages in WordPress with Parallax Elements

With Parallax Scroll, you can only add the parallax scrolling effect to elements in posts and pages. This plugin may not be able to satisfy your needs if you want to build brand new landing pages with parallax enabled. In the case that you’d like to create pages, you suggest you use another plugin. Below are two of the suggestions, and you can make a choice according to what you need.

Parallax Gravity – Landing Page Builder

Parallax Gravity is a free plugin that hasn’t been updated for a while. It allows you to build unlimited landing pages with multiple sections containing parallax elements. Each section can include its own background image and any content you want, including shortcodes. The problem with this plugin is the lack of maintenance which may lead to improper functions.

Parallax Gravity

Parallax One Page Builder

Parallax One Page Builder is a premium plugin that comes with much more features than Parallax Gravity. It not only supports unlimited landing pages, but also gives you the flexibility to do the following things.

  • Create unlimited blocks and add parallax effects to them.
  • Add parallax scrolling effects to galleries and portfolios.
  • Enable or disable sticky menu.
  • Add custom background, logo, favicon, and font style.
  • Set one of the landing pages as the homepage of your WordPress site.
  • Use the built-in footer widget.
  • Use the various shortcodes, including Button, Portfolio, Gallery, Map, On Scroll, Charts and Animated Effects to achieve the perfect parallax scrolling effect that you want.

Parallax One Page Builder

If you want to make a fancy website and have planned a budget for that, we would suggest you try Parallax One Page Builder since it is much more feature rich and fully compatible with the new WordPress versions.

Author

Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Now she is very struggle with purchasing a bubbling apartment in downtown. You can help her by clicking our ADs or making a purchase via our links ;-)

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *