How to Create the Parallax Effect with BoldGrid

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 BoldGrid plug-in within the latest version of WordPress.

How to Create the Parallax Effect

Setting Up the Page

  1. Login to the BoldGrid Administrator.
  2. Go to the Pages menu

    Click on the Pages section.

  3. Click Add Blank

    Click on Add Blank.

  4. Type in the name of the page

    Type in a name for the page. You can choose to display page title or not under the page title field.

Setting Up the Background Images used in the Parallax Effect

Now that you have created the page where the parallax effect will be set, you can choose the images that will be used in the background.

  1. Choose the background image

    Move the mouse pointer toward the center of the blank page and click on the three bar menu (called Edit Section) that appears.

  2. Change to a background image

    Click on Change Background.

  3. Click on image

    Click on Image to select or an add an image for the background.

  4. Select an image for your background or add one

    Click on Image to select or an add an image for the background. When you have selected an image, you will see it appear on the blank section you have added.

  5. Click on settings

    Once you have selected your image, click on Settings.

  6. Scroll effects-click on parallax

    Click on Parallax under the Scroll Effects section. Notice that you can also adjust the vertical position of the image in this location.

  7. close the section background editor

    Click on the x in the top right corner of the image in order to set the image.

  8. adjust image height

    If necessary, take your mouse to the right side of the image and go to the top or bottom of the image. You will see arrows that allow you adjust the size of the image.

  9. open section edit menu again

    As a minimum, you can have a single image set to use the parallax effect, but for this tutorial, we will set two. You can repeat these steps to add more images. Hover over the bottom middle of the image you added and click on the Edit Section menu that appears.

  10. Add empty section

    Click on Add Empty section. This will add a section where the next background image can be placed. You can widen the section in the same way you can widen image as we described in an earlier step.

  11. Change background a second time

    As per the steps earlier, hover over the bottom section and open the Edit Section menu again. Click on Change Background.

  12. click on

    Click on Image to add a second background image.

  13. Scroll effects-click on parallax

    Click on Settings in order to set the parallax effect. If needed, adjust the position and then width of the image as indicated earlier.

  14. Click on the “x” to close the section editor once you’re satisfied with your changes.

Setting up the GridBlock

The two images set in the steps above make up the background of the parallax effect. The last part to be added is where web content that you wish to show to your users will be located. It will be in the foreground as you scroll up or down on the page.

  1. Add GridBlock

    At the top of the editor you will see a button for Add GridBlock. Click on it and you will see the GridBlocks that you can add within the empty section you just added. You can click and drag them into position. Select a GridBlock and then drag it into place on the left side of the screen. When you have finished selecting and placing the GridBlock of your choice, click on the ‘x’ in the top right corner to close the GridBlock selection window.

  2. Edit GridBlock

    The different GridBlocks will vary based on the inspiration that is loaded for BoldGrid. At this point you can edit the content of the GridBlock, if you wish. You can also change the image being used.

  3. Publish or update page

    When you have completed making the edits to your GridBlock, click on Publish or Save Draft in order to save your changes. Remember that if you use Publish, it will make the page immediately available on your WordPress site. If you have already selected the Publish button, then you will see a labeled Update that you need to click on in order to save your changes.

That completes the tutorial for creating a page with the parallax effect. In order to see your page, click on the published link, or select preview.

Arnel Custodio Technical Writer; WordPress Contributor & Volunteer

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Was this article helpful? Let us know!