Styling a Page

I’m assuming you’ve already read the getting started guide and begun building pages with Page Builder. This guide will help you with the more advanced concepts of styling a Page Builder page.

Styling a Row

The example below displays the default row and cell styling for the example page:

Example row and cell layout

Default row and cell styling

In the “Edit Row” dialog, you’ll find the row styling tabs in the Row Styles Sidebar. By default, there are three groups: Attributes, Layout and Design. Click on each tab to display the settings in that group.

Attributes

Under the attributes tab, you can specify the Row Class and Cell Class. Use the CSS Styles editor to add custom styling to the row and the cells using your chosen classes.

Layout

Under the layout tab, you’ll find settings for Bottom Margin, Gutter, Padding, and Row Layout.

Bottom Margin, Gutter and Padding

You can specify your layouts using just about any unit. Click on the drop-down menu to change the unit you’re using.

This is what each of the settings means in the Page Builder context:

The bottom margin adjusts the space below the row
The gutter adjusts the space below each cell
The padding adjusts the space around the entire row

A comparison of the default row and cell styling and the following example settings are shown below for the first row:

Example Settings

Default row and cell styling. The background color of the first row has been adjusted to a light blue for visual purposes and explanation.

Bottom Margin = 15px, Gutter = 10px and Padding = 30px

Row Layout

The Row Layout setting has three options; Standard, Full Width, Full Width Stretched and Full Width Stretched Padded. There are examples for each layout:

Row Layout – Standard

Row Layout – Full Width – Row background is displayed full width

Row Layout = Full Width Stretched – Row background and content are displayed full width

Row Layout = Full Width Stretched Padded – Row background and content are displayed full width. The left and right Row Padding values are included.

Mobile Layout

Mobile Bottom Margin
Space below the row on mobile devices. Default is 30px.

Mobile Padding
Padding when on mobile devices. Enter values for the top, right, bottom and left mobile padding as required.

Row Mobile Layout settings

Design

Under the design tab, you will find settings for Background Color, Background Image, Background Image Display and Border Color.

Background Color

To select a row’s background color, click on the “Select Color” button under the Background Color heading.

Select the desired color using the color pallet, or type in the color Hex (#) Value. Adjust the color intensity using the slider.

Background Image

To select a row background image, click on the “Select Image” button.

The media library dialog will appear. Select the desired image and click “Done.”

Select how you wish the image to display from the “Background Image Display” drop-down menu.

Choose between the following options:

Tiled Image
Cover
Centered, with original size
Contain
Fixed
Parallax
Parallax (Original Size)

Parallax Image Requirements

To work correctly, parallax scrolling requires that image height be greater than the image width. When this condition is no longer true, parallax scrolling will switch to a regular background image using background-size: cover; and a centered position. It’s possible for an image to meet the requirements on desktop but not for mobile as the content in the widget stacks and the height increases. If your widget parallax scrolling is functioning correctly on desktop but not on mobile, check to see if the image height is less than the width when parallax scrolling stops.

Below is an example of a tile-able background image, generated using SiteOrigin’s very own background image generator, used as a row background. The Background Image Display is set to “Tiled Image.”

Tiled Background image with Background Image Display set to “Tiled Image.”

Border Color

To select a border color, click on the “Select Color” button under the Border Color heading.

Select the desired color using the color pallet or type in the color Hex (#) Value. Adjust the color intensity using the slider.

Row border color set to #f40000

Changing Row Orders

To change the order of a row, click and hold the arrow icon in the upper corner above that row.

Once you have positioned the row, release the icon to implement the change.

Styling a Cell

To style a row cell, edit the row and click the cell you’d like to style. Once selected, the background color of the cell will be a slightly darker blue and a Cell Styles panel will appear in the right column under the Row Styles panel.

page-builder-cell-styles

The Cell Styles panel offers the following sections: