Create Fixed or Scroll Backgrounds with BoldGrid
WordPress Page Builder
Types of Background Effects in BoldGrid
BoldGrid offers three different background image effects: Fixed, Scroll, or Parallax. The “Fixed” effect keeps the image in a fixed position as you scroll, while “Scroll” will cause the image to scroll along with the rest of the page’s content. “Parallax” causes the background image to move at a slightly different speed than the foreground content, giving a sense of depth. If you want to learn how to create a parallax background, follow this tutorial. Today, we will discuss how to create fixed or scroll backgrounds with BoldGrid.You can customize a background effect in two different ways with BoldGrid: from the “Customizer” or from a blank page through the “Page Editor.” To begin either journey, login to your WordPress admin menu.
Customizing Background Effects in Customizer
To make changes from the “Customizer,” choose “Customize” from the left-hand sidebar.
This will bring you to the “Customizer” menu. Click on “Background” from the left-hand side to view your options.
You will see the background image of your theme displayed (or, if you are changing it, the new one you have chosen) in a thumbnail-sized image on the “Customizing Background” menu. Below that, you will see the three background effects options (i.e., fixed, scroll, and parallax).
Most Inspirations will default to “Fixed.” However, you do not have to feel bound by the default option. With BoldGrid, you can easily choose the background effect you like most, while seeing how they will behave in context with your content before saving and publishing.
Unlike the “Parallax” background effect, “Scroll” and “Fixed” come with a couple other options: vertical and horizontal background positioning, as well as repeating the background image. You will only see those options displayed when you select either “Scroll” or “Fixed.”
Customizing Background Effects on a New Page
If you add a new page to your website you can also customize the background effect here, too. From your WordPress admin menu, click “Pages” from the left-hand side, then choose “Add New.”
You can either choose a blank slate or one of our pre-built templates, called “Blocks,” that align with your website’s theme. For this demonstration, we selected a blank page and customized it from scratch.
First, give your new page a title at the top.
Next, begin adding Blocks, images, patterns or other content to your page by clicking on the plus sign on the editor toolbar.
If you would like to create a page quickly, adding Blocks speeds up the process immensely. You can “Add Block” from the top, next to “Add Media.” This will bring you to the Blocks menu, where you will find a variety of content options, as well as a full view of the page you are creating.
Hover over a Block and click “+ Add to Page” or simply drag-and-drop to the left-hand side. You can rearrange the order of the Blocks by dragging-and-dropping as well. When satisfied with your design, simply click on the “X” in the top right corner.
Now you will see the Blocks added to your page in your Post and Page Builder view. Please note that in order to add a background effect to a section, it must have a background image or pattern. When you add an image or pattern, BoldGrid will present you with the option to add the “Fixed,” “Scroll,” or “Parallax” background effects. To add a pattern or image, click on the “Section Background” button in the middle of the editor toolbar.
The “Section Background” menu will pop-up. Choose a background image or pattern, then click “Settings.”
You will see options here for the three background effects: “None,” “Parallax,” and “Fixed.” The option for “None” is actually the “Scroll” option (the default effect from Post and Page Builder).
If you would like each section to have the same background effect, continue this selection process for each one down the page. When you finish setting a background, click “Save Draft” and then “Preview” to see how it looks!
To see these background effects in motion, check out this video.
If you have not done so yet, get BoldGrid today so you can begin customizing your website like a professional!