Create a Parallax Background with BoldGrid
WordPress Page Builder
Create a Parallax Background with BoldGrid
The Parallax effect is a website design created when scrolling, where you see the web page’s background moving at a slower rate than the foreground, creating an illusion of depth. In BoldGrid, we provide a couple different ways to create this effect quickly and easily.
Parallax Background through Customizer
If you just got started with a new theme or inspiration, you should try customizing the background effect through “Customizer.” Log in to your WordPress admin menu and click on “Customize” from the left-hand sidebar.
From the Customizer page, you have the choice to work on your active site or use the option to edit on a “Staged Theme.” A Staged Theme allows you to test changes before making them on your live site. It provides a great way to experiment with changes to design and language without disrupting what existing site visitors see until you have it perfected. However, we will use an active site for this example.
In the Customizer menu on the left-hand side of the screen, click on “Background.” If you want to customize your background image, follow the instructions in this tutorial. Once satisfied with your background image, note your options for “Background Effects” located under the “Background Image” thumbnail on the left-hand side menu. These options include “Parallax,” “Scroll,” or “Fixed.”
Generally, your theme will preselect “Fixed.” The Fixed background option keeps the background image in a fixed position as you scroll down the page. The “Scroll” effect causes the image to move up or down, matching your scrolling speed. The “Parallax” effect, on the other hand, creates an effect where the background images scroll slower than foreground images. This creates the illusion of depth, and can make viewers feel more immersed in your content. We demonstrate each of these effects in this portion of our video: How to Customize Background in BoldGrid.
Parallax Background through New Page
Whether editing an existing page, or creating a new one from scratch, adding a parallax background is simple with BoldGrid! To add the Parallax effect on a new page, start by clicking on “Pages” from that left-hand side menu and choosing “Add New.” Once you select and open up a blank page, provide a title at the top. Doing this first will make it much easier to retrieve your page should you need to save it, you navigate to a different page, or you get disconnected.To begin creating the Parallax effect, we first need to add an image to the top of this page. Select an image from the “Section Background” pop-up menu. You will see a blank section or portion of a page into which you can begin adding images, patterns, and other content. From the black “Post and Page Builder” toolbar at the top of that section, select “Section Background” to see your options.
After choosing an image you want to use, it will appear on the newly created page and as a thumbnail on the “Section Background” menu. Click on “Settings” on that thumbnail image.
You will see new background effect options, where you can select “Parallax” under “Scroll Effects.” Click on it, then exit out of that menu.
Now, expand the image you have chosen by hovering over the inside edges and dragging up or down when you see the arrows highlighted in orange. When it reaches the desired size, click on the three lined menu option (also known as a “hamburger menu”) from the toolbar at the bottom of the image. Click “Add New Section,” then begin adding another background image, color, or pattern. For this demonstration, we chose a pattern for the background of this section.
Click on “Settings” again on the current thumbnail image of “Section Background” menu, and select “Parallax.” You will continue to build out this page to your desired length or amount of sections just as before: clicking on the hamburger, adding the background content (image, pattern, color, etc.), then selecting “Parallax” from the “Section Background” menu.
You can add as many sections as you desire, but keep in mind that better designs remain simple and uncluttered. For example, in this demonstration we used just two images and one section of text to give the page context and purpose. You also can select “Add Block” from the top to create new sections with sample text already supplied for you to edit.
From the “Blocks” menu, choose appropriate content options based on your theme. You can utilize the filters at the top, and choose from a specific category for that page.
Feel free to use this option to visualize the page as a whole. You can move the sections around by simply dragging and dropping, or trashing a section you may not need.
You can now view your page with the Parallax Effect implemented. Click on “Save Draft” from the top right menu, then either “Preview” or — when ready for public consumption — choose “Publish” to make it active.
If you would like to see this tutorial step-by-step, check out our videofor a closer look.
The Parallax Effect creates the illusion of depth to your page, and make you look like a professional website designer. Download BoldGridtoday to start feeling like one!