Last updated on

The parallax effect is an effect used within websites to create the illusion of depth. It is created when a foreground image moves a little faster than a background image. It can involve a few images or several. The following tutorial will show you how to create the parallax effect using the section editor of the BoldGrid WordPress Page Builder.

How to Create the Parallax Effect

Here you will be creating a page with a blank background in order to start the process.

  1. Log into BoldGridLog into BoldGrid.
  2. Add BlankUnder Pages click Add Blank
  3. Click Blank Page
  4. Provide the page with a title
  5. Hover over the body of the page until you find the section menu.
  6. Click the three horizontal bars
  7. Click Change Background
  8. ImageSelect Image
  9. Select an imageSelect an image from the list
  10. Click SettingsClick the Settings button
  11. Selec ParallaxUnder Scroll Effects choose Parallax
  12. Click the XClick the X to close the window
  13. Drag SizeHover over the newly added image and use the arrows to adjust the size as needed

You can add as many images as you want. When ready, you can add content beneath or above these images. Scrolling through the page now in Preview or after publishing will perfectly demonstrate the parallax effect in action.

Be sure to update or Publish your page when ready in order to save the changes you made.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

4 thoughts on “Create the Parallax Effect using the Page and Post Builder

  1. I added background through the customize option, my problem is how to get the parallax effect between sections. When I add a new section, it attaches itself to the previous section with no background in-between.

    • Hi TC!

      If you want the background your configured in the Customizer to show through the Sections in your page content then you can do by setting a transparent background on each of your page Sections. Click on the Edit Section tools for the Section that you want to change to use a transparent background and select the Change Background option from that menu.

      edit section tools in visual editor

      Next, click the Color option to open up the background color controls for your Section and select the Custom Color option. Move the Transparency slider on the right all the way to the bottom to make the background of your Section transparent and show the background you configured in the Customizer.

      background color transparency slider

      One thing to keep in mind is that you probably won’t see the background show up in the Visual editor, but when you save your changes and view the page you should see your image come through as expected. Please let us know if you have any other questions for us!

    • Hi Fadil-

      The images described in this article are backgrounds, which is what gives them the ability to have the Parallax effect. In steps 5 and 6 above, you’ll see how to add a background image to a section element, but you can also add a background to a row or column element and use this process to add the Parallax effect.

Leave a Reply

Your email address will not be published. Required fields are marked *