Working with the SiteOrigin Page Builder

The Flash theme is highly compatible with the SiteOrigin PageBuilder to provide users the maximum flexibility to design the pages uniquely.
So, in this article we will be discussing the several major features of the SiteOrigin PageBuilder that helps you to achieve the desired page design.

• Padding

  Padding in the SiteOrigin page builder can be set to row as well as to a widget in that row. In this I assume that you have already added a row and added a widget in that row through the page builder. When this attribute is set then padding(space) around the row or widget can be seen.

  • Padding in a Row: Click on the setting icon on the row and then click on layout tab, now you can see the padding section. There are boxes for padding up, right, down and left, enter the desired value in their respective boxes and in the dropdown below select a unit for the value(Default is px).
  • Padding in a Widget: Click the edit in the widget and rest is similar to setting padding in a row.

• Bottom Margin

  Unlike Padding this attribute can only be set to a row, so click on the setting icon and then click on the layout tab. Now you can enter the desired value in the respective field and adjacent to it, is a dropdown to choose a desired unit.

  The default value of the Bottom Margin can be set through Settings -> PageBuilder -> Layout and then enter the desired value in the Row Bottom Margin field.

• Background Image/Color

  Similar to the Padding, this attribute also can be set to both row and widget. Setting a background image or color is quiet similar, so below we will be discussing about setting a Background Image.

  • Background Image in a Row: Click on the setting icon on the row and then click on Design tab, now you can see the background image field. Click on Select Image upload a new image or select one from the library. Below is the dropdown for choosing Background Image Display style, select one as you please.
  • Background Image in a Widget: Click the edit in the widget and rest is similar as setting up Background Image in a row.

• Row Layout

  As the name suggests, this attribute can only be set to a row, to do that click on the settings icon and then on the Layout tab. Now you can see a dropdown labelled Row Layout which has following choices:

  • Standard: A row with standard width leaving some margin on both left and right sides.
  • Full Width: The row expands the full width of its container and its content is centered.
  • Full Width Stretched: The row expands the full width and its content are stretched.