If you have three or more columns and set a custom width in the Column Settings editing screen, the other widths will readjust automatically. If you try to set a custom width on one of the other columns, the custom width you just set readjusts, and you can go around like that […]
Duplicate a column
When you duplicate a column, an identical column with all the column settings and any modules it contains is duplicated to the right of the current column, as in the following example. You can then move it to the position you want and edit the column settings and its contents. […]
Edit a column
Column settings you can edit You can modify column style and layouts in the following ways. Change the column widths when you have two or more columns across. Widths must add up to 100%. Tip: When you have more than two columns across, it’s easier to use the drag handle on […]
Insert columns
There are several ways to insert columns. Note: There is a limit of 12 main columns in a layer and 4 child columns within a column layer. Drag and drop empty columns into the layout You can use this technique to add columns or child columns anywhere. It works particularly well […]
Column layouts overview
In Page Builder you cannot have rows within rows, but you can construct complex layouts with columns. Column layers, module layers, and child columns In any row, you can have multiple vertical layers of parent columns, child columns, and modules. Here are some diagram examples of a single row with […]
Create a Ken Burns effect in a row background
If you’re not familiar with a Ken Burns effect, you can see what it looks like by adding the Agency landing page template to a layout and scrolling down to the “Joybilly Branding” section. Here’s a preview: The Ken Burns effect starts with implementing a slideshow as a row background […]
Parallax row backgrounds
Parallax refers to when both the background image and the foreground content scroll, but at different speeds. The parallax effect is very striking, but don’t overuse it! You don’t want your visitors to be so mesmerized by the movement on the page that they don’t pay attention to the content. […]
Where to put custom CSS code
Many of these Knowledge Base articles have CSS code that you can copy and paste, or perhaps you want to create your own CSS. Where should you put it? Restrict custom CSS to a single Page Builder page This procedure applies if you only want your CSS to apply to […]
Change row background image on mobile view
Most of the time, full-width images don’t look that great on mobile view, because they are cropped (which is better than being stretched). One way to get around this is to change the background image when it reaches the mobile responsive breakpoint. Here’s how. To change the background image for […]
Change individual margin and padding settings
You can set individual margins and padding independently for top, bottom, left and right. You can set all of these values independently for large (desktop), medium (tablet), and small (phone) devices. When you add a custom margin or padding setting to an individual row, column, or module, this setting is […]