How to Create Parallax Background (based on Elementor)
From this tutorial you’ll learn how to create parallax background using Elementor live page builder.
You must’ve noticed that there is no such option as Elementor parallax background, so it will take some effort to create a background with such an effect, but everything is rather simple.
Creating Elementor Parallax Background
- First, let’s navigate to Pages > Add new tab on the left of the Dashboard. Here you need to make sure that you use a full width page layout. Apply Sidebar not selected option to the page sidebar.
- Select No sidebar in Sidebar Layout and Fullwidth in Content Layout. You can find both options in Layout Options block.
- Click Edit with Elementor button to proceed to editing with Elementor.
- Next, click Add a new section button to create a new section and select one column section layout from the section layouts block.
- Click Edit Section icon to open Edit Section block. Here switch to Style settings tab.
- Select Classic background type and upload an image to use it as a section background.
- Choose Fixed in the Attachment dropdown list.
- Specify Cover in the Size list.
- Let’s add some content to the section area. Drop any content modules you want to add to it (in our case, we added Heading module).
- To make the section height larger we added 250 px value to Top and Bottom Heading module padding in Advanced > Padding block. You can also use Spacer modules to increase the section height.
- Click Save button in order to save the changes.
- Now let’s return to WordPress Dashboard. We need to add a code snippet, so you should install code snippet plugin first. Please, navigate to Plugins > Add new tab and search for Code Snippets plugin. Install and activate it.
- After you’ve activated Code Snippets plugin, you can see Snippets tab on the left of the Dashboard. Navigate to Snippets > Add new and paste the following code into the code area.
- Click Save the changes and activate button to make the code snippet work.
- Now let’s return to Elementor page builder. Open the page where you created the section with Elementor.
- Here click Edit Section icon and switch to Advanced settings tab.
- In the CSS Classes field input parallax class.
- Save the changes. Now you can go to the page you’ve created to see the parallax effect in work!
How can you imagine your simple website building without Elementor paralax now? Agree, that Elementor parallax background options push the limits and give you additional possibilities in running the website. If you are sick and tired of tedious backgrounds then why not use the settings of the Elementor parallax background image and let it move to create the illusion of deep screen. Hope, this tutorial helped you in generating brand-new ideas through the bizarre and attractive Elementor parallax effect.