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
- Login to the BoldGrid Administrator.
- Click on the Pages section.
- Click on Add Blank.
- 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.
- Move the mouse pointer toward the center of the blank page and click on the three bar menu (called Edit Section) that appears.
- Click on Change Background.
- Click on Image to select or an add an image for the background.
- 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.
- Once you have selected your image, click on Settings.
- Click on Parallax under the Scroll Effects section. Notice that you can also adjust the vertical position of the image in this location.
- Click on the x in the top right corner of the image in order to set the image.
- 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.
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.
- 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.
- As per the steps earlier, hover over the bottom section and open the Edit Section menu again. Click on Change Background.
- Click on Image to add a second background image.
- Click on Settings in order to set the parallax effect. If needed, adjust the position and then width of the image as indicated earlier.
- 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.
- 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.
- 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.
- 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.