Parallax effect is an extremely popular design feature that is commonly used on WordPress websites. This special effect has featured in the gaming world for years but has more recently crossed over into web design. And so far this major trend doesn’t seem to be going anywhere, if anything it is being more widely used than ever. So what is parallax effect and why should you consider using it on your WordPress website?
In this article, we will consider what a parallax effect is and the benefits it can bring to your site and business. We will then discuss how to quickly and easily add a parallax effect to any WordPress website, page, or post, with the free plugin Parallax Scroll.
What Is Parallax Effect?
Parallax effect involves a web page’s background moving at a slower rate than the foreground. This creates an illusion of depth to the page, giving the content a 3D effect as viewers scroll down.
The majority of premium WordPress themes now come with built-in parallax effect on their homepage. Even the most recent free WordPress default theme, Twenty Seventeen, comes with a parallax feature. Most page builders also incorporate a parallax effect tool, enabling you to add the effect to any page or post on your website. And of course, there are numerous WordPress plugins that you can install to add parallax effect elements to your website.
What Are the Benefits of Using a Parallax Effect?
There are a number of benefits to using a parallax effect on your WordPress website. The first, and most obvious, is the visual aspect of a parallax effect. A parallax effect is aesthetically pleasing, giving your website a fresh, stylish and modern look and feel. This wow effect can make your content really pop, and creates an exciting and interesting browser experience.
Another key reason for using parallax effect on your site is to help break up a page, particularly a homepage, into readable chunks. Use this effect to emphasize the different sections and types of content you want to showcase. This can help promote different aspects of your website, illuminate important info, and encourage users to navigate your site and access content in a way of your choosing.
Parallax effect can be used on any page or post of a website, but can be particularly seen on homepages, landing pages, or one-page sites. The stunning visuals parallax creates, and the positive effect it has on user experience, can result in visitors staying for longer on your site, and help improve your site’s conversion rates against its goals.
Parallax on Mobile
While parallax is great for adding visual interest, it does not always work well on mobile devices. Because phones and tablets typically use swipe navigation (instead of a scroll like desktops) parallax effects may not render correctly. Of course, this will depend on the method and animations you use for your own parallax section, however for good usability you may want to consider disabling parallax on devices.
Select a Theme with Parallax Effect
For those of you starting a new project, you should select a premium theme that includes a parallax effect feature. And if you want to use a parallax effect on a variety of pages of your website, not just the homepage, then you may want to consider a multipurpose theme that comes with an advanced page builder. Themes like Divi from Elegant Themes, Parallax by Themify, and our very own theme Total, all include page builders providing parallax effect tools.
Add Parallax Sliders with the Slider Revolution WordPress Plugin
If you want a featured slider with a parallax effect our top pick is the Slider Revolution plugin. This premium plugin includes hundreds of built-in options and features for fonts, layers, slider effects, layouts and of course parallax.
Enable Slider Revolution Parallax
First install the plugin, then either import a slider template or begin building your own slider from scratch (you can read our full Slider Revolution guide for more details).
Next, edit the slide Main Background to add a Source background image and select the Parallax/3D tab to assign a parallax level. Then as you add layers, select the Parallax/3D layer option for parallax depth to add movement to your text, image, button and other layers. It’s that easy!
When you’re done, save your slider and use the shortcode to insert it into any post or page. Or if you’re using a page builder like the Visual Composer you can use the page builder Slider Revolution element to quickly select and insert your slider.
Add Parallax Sections with the Parallax Scroll WordPress Plugin
If you already have a theme, and it doesn’t include a built-in parallax effect option, then you should consider using a WordPress plugin to do the job. Parallax Scroll is a popular free option that will enable you to add a parallax scrolling background image to different elements on a page or post of your website. Add a scrolling background to a single element, a header text, or a full section containing any content, all by using a simple shortcode.
So let’s now have a look at how to install and start using Parallax Scroll…
Installing Parallax Scroll
To install Parallax Scroll, log into your WordPress dashboard as admin, and select Plugins > Add New from the menu.
Search Parallax Scroll, then select Install Now > Activate.
You will now find a Parallax Scroll tab has been added to your WordPress menu.
Adding a Parallax Scroll Section
To get started with Parallax Scroll you have to first create a new parallax section. To do so, select Parallax Scroll > Add New from your WordPress menu.
Here you can now create your new parallax section…
Setting the Scrolling Parallax Background Image
Firstly you need to set an image for your scrolling parallax background. To do so, click on Set Featured Image and add the image to the Featured Image section.
Think carefully about the image you use for each background section. Make sure they are relevant to your site and sync with your branding. If you are going to display a header or further content over the top of this background image, consider using a block color or subtle patterns instead of a photo or an attention-grabbing graphic. This can help ensure that your image works with and promotes your content, instead of distracting from it.
If you opt to use photographs, the images need to be high quality. Beautiful eye-catching images can help give your site a professional and unique appearance. These visuals will create a strong impression on your audience, which in turn will prompt people to remember and return to your site. There are a wide assortment of stock websites that you can download top quality images from. Check out our collection of free and premium stock photo websites where you will quickly find stunning photographs for your parallax backgrounds.
Creating a Header Text Over the Parallax Background
If you want to create a header text with a parallax background, you must next enter a post title. This title will then appear as your header title over the top of your chosen parallax background image.
You may not want a header in your parallax section. If this is the case you should still give each parallax a post title, so each section you create is easily identifiable. You will then need to select to hide the title in the Parallax Scroll Options (covered further on in this article), so a header isn’t displayed on the front side of your site.
Display Any Content with a Parallax Scrolling Background
You may want the parallax section to display other content over the background image. This could include anything necessary for your site, from text and images to shortcodes. Decide on what you want to display and then enter this content into the post box.
Customizing the Parallax Scroll Settings
Once you are happy with the content, you need to customize the settings of the parallax section to suit your page.
Scroll down to the Parallax Scroll Options. Under Style you can change the parallax height and image size as well as selecting Full Width to force your theme to display the background image across the full width of the screen if it’s not already.
You can also alter the horizontal and vertical position of the header on the parallax background. And if you want to hide the post title, you can do so here by typing display: none; in Header Style.
Parallax Settings will let you customize how your parallax scroll behaves. This includes altering the speed of the parallax background. Try out different speeds to see what works for your website and audience.
There is also a Mobile Settings option, that allows you to disable the parallax background image and/or content on mobiles, if you feel the parallax sections are not working well on mobile devices.
Once you have adjusted the settings and finished creating your parallax section, click Publish.
Inserting the Parallax Section into a Post or Page
Next, you need to insert your parallax section into a post or page on your website. Select Parallax Scroll from your WordPress menu.
In the table presented you will now see a shortcode for the parallax section you have just created. Copy the code and then open the appropriate page or post. Paste the code into the page’s content in the appropriate position.
Preview the changes and if you are happy with your new parallax section, click Publish. You can now create further sections give the page or post a full parallax effect. And if you need to make alterations, simply re-open the parallax section’s page and make any necessary changes.
If your theme doesn’t have a built-in parallax effect feature, or if you want to add an effect to more than just your homepage, then Parallax Scroll will enable you to quickly create parallax sections to add to your pages or posts.
As you have seen, adding a parallax effect to your website can be very worthwhile. Not only can it greatly improve the visuals of your website, it will help appeal to your audience, enable them easily navigate your site and access content, and increase the time they spend on your site. This improved user experience should ultimately help your site convert against its goals, whether they are to increase returning visitors, collect leads, or sell products or services.
Will you add a parallax effect to your homepage, a landing page, a post, or somewhere else? Please share your thoughts in the comments below…