Post and Page Builder Tips and Tricks

BoldGrid makes it easy to create a website in a few hours with our drag and drop WordPress Page Builder plugin. This article will provide some tips for working with Blocks in the Post and Page Builder. Keep in mind your WordPress theme controls the Customizer and the editor creates the page content.

Don’t Delete Columns

It’s ok to have empty columns – they should not be deleted!

Each row in a BoldGrid Block needs to have 12 columns total on each of the 3 device sizes shown in the editor. When working with the starting design it’s important to keep the basic structure intact. If you delete a column, you will be removing an essential piece of code which can lead to problems down the road.

Instead of deleting the column, use the Clear Contents option. Then drag and drop the empty column out of your way. Otherwise, hover between that column and the one to the left of it until horizontal arrows appear. Click and drag the line to the right to merge the two columns into one.

Check for Narrow Columns

When content appears in a narrow column on smaller screens, you may need to increase the column width. Click each device icon in the editor toolbar and when you see content wrapping early, hover in the column. The horizontal drag handles will appear – click and drag the line to the right but keep the column in one row.

If this doesn’t solve the problem, you should check for padding or margin on the element and its containers. Hover over the element and you will see 3 popovers – orange for the element, blue for the column, and yellow for the row. Starting with the element itself, check each one for margin or padding and set to 0. If other parts of the block design change unexpectedly, use the undo button or press ctrl+z.

If there are problems with multiple columns it may be easier to make a new row and start over.

Practice First

If you’re new to the Post and Page Builder, we recommend using the Clone function to create a practice Block. This way you can test any controls you’d like without worry, as you’ll delete it before publishing the page. Once you find a design you like, start making the changes on the cloned Block. Recreating the design also increases your mastery of the Post and Page Builder.

For more complex changes, we recommend using a WordPress testing environment. You can use a WordPress backup plugin like Total Upkeep to clone your live website to staging in a few clicks. Then you can make any changes you want without risk of breaking your live website. Try new designs, plugins, or even a new theme safely.

Different Designs for Different Devices

Depending on the content used, it can be tricky to make a block look good on all screen sizes. It might be easier to create two blocks – one for mobile and one for desktop – using the Responsive Utilities. You can select a single element or an entire block and choose what devices it shows on.

As you are designing your website, keep the phrase “mobile-first” in mind. Google uses mobile-first indexing, meaning they only look at your mobile website. And depending on your target audience, mobile users likely outnumber desktop users. So it’s important to include the same information on all versions of the block as you change the layout.

The device visibility controls can also be used with the Custom Page Headers feature in Crio Pro to create separate header layouts for different devices.

Working with Background Images

Background images should enhance the design but not contain any vital information. Any words in images should also appear on the page so search engines can use it to determine what the page is about. Showing a background image in the initial viewport for a user can increase page load times. You may want to consider hiding background images on mobile devices to improve page speed.

Any images below the initial viewport of the user should be lazy loaded. While WordPress Core lazy loads images by default, there are better solutions. WordPress announced they are refining core’s approach with changes coming in WordPress 5.9. Instead, we recommend using a WordPress caching plugin like W3 Total Cache. It provides lazy loading plus other website performance tools like page and browser caching. Use the simple setup wizard for clear, immediate results.

 

Thanks for reading, we hope you’ve found this article helpful. If you’d like to learn more, you can read about creating custom Blocks. Please let us know in the comments below if you have questions about working with Blocks in the Post and Page Builder. Or create a post in our forums if you’d like to share your URL.