InMotion Hosting Support Center

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.

Continued Education in Course BoldGrid
You are viewing Section 5: How to Create the Parallax Effect with BoldGrid
Section 4: Create Custom Forms with the WPForms Plugin

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!