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:

PB21a

Example row and cell layout

Default row and cell styling

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.

PB21

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.

PB22

Layout

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

PB23

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:

PB23d

Example Settings

PB21c

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

PB23c

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

Row Layout

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

PB23g

PB21c

Row Layout – Standard

PB23e

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

PB23f

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

Design

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

PB24

Background Color

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

PB24a

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.

PB24b

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

PB24c

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

PB24d

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.”

PB24f

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.

PB24e

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

PB24g

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.

PB27

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

Styling a Widget

Click on any widget to open its edit dialogue. The widget styling features may vary from widget to widget, depending on the author of that particular widget. There are, however, some basic default styling options.

Attributes

Under the attributes tab, you can specify the Widget Class and use the CSS Styles editor to add custom styling to that widget using your chosen class.

PB31

Layout

Under the layout tab you will find a padding text field. This value specifies the padding around the entire widget within its cell. You can specify this value using just about any unit. Click on the drop-down menu to change the unit you’re using.

PB32

PB32a

Comparison of default widget layout padding vs 30px padding.

Design

Under the Design tab, you will find similar settings to those found in the Row Styling Design tab, namely Background Color, Background Image, Background Image Display, and Border Color. All these setting are covered under section Row Styling > Design.

In addition to these, you will find Font Color.

Font Color

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

PB33a

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