Getting Started with SiteOrigin Page Builder

One of the recommended plugins in Phlox is Page Builder by SiteOrigin. It lets you create responsive grid-based page content, that is adaptable to any device. With Page Builder you can create home, contact, about us page, or any other page you need. It allows you to make rows and columns, widgets, and add many other things between your content. Then you can change attributes such as paddings, background colors and column spacing in page builder. Besides, it allows you to enter custom CSS and CSS classes. Page Builder supports a live editor, so you are able to see the changes in real-time. Just simply insert columns with drag and drop or add a widget by using the toolbar.

page-builderpreview

To install Page Builder Plugin:

  1. Go to your WordPress Admin Panel
  2. Click Phlox on the Dashboard
  3. Navigate Recommended Plugins tab
  4. Install Page Builder

To install Page Builder Widgets Bundle:

  1. Go to your WordPress Admin Panel
  2. Click Phlox on the Dashboard
  3. Navigate Recommended Plugins tab
  4. Install Page Builder Widgets Bundle

After installing, Page Builder adds an extra tab to the standard WordPress editor. To find this tab and create a page or post with Page Builder:

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top right hand of the WordPress text-box and find Page Builder, beside text tab

Page Builder Options

You can use the toolbar to add a widget, add new columns or to load prebuilt layouts.

Add Widget

This option lets you add your content by using any available widgets you want.

Add Row

This option allows you to create a layout by adding rows.

page-builder-row

The row layout can be added up to 10. You can change the ratio of the columns with ready ratios or easily drag the columns and change their width. The columns can be either left to right or right to left.

Prebuilt

Here you are able to insert your page's ready layout.

page-builder-layouts

History

With history you can undo your changes.

Live Editor

Live editor helps you to edit your post/page in real-time.

Edit, Duplicate, and Delete Elements

pagebuilder-optionsYou can easily reorder rows and move widgets with drag and drop. Also, each item can be duplicated or deleted.


Widget Styles

All widgets in page builder, can be customized with different options. There are three widget styles in page builder:

Attributes

attributesWidget Class

This option allows you to add custom classes.

CSS Styles
Here you can add your own styles.

Layout

layout

Padding
The widget padding has four values: Top, Right, Bottom, and Left and it can be in pixels, %, in, cm, mm, em, ex, pt, pc, rem.

Design

Background Color

changes the widget's background color to any color you want.

Background Image

allows you to add an image for the background of the widget.

Background Image Display

specifies the image position. There are different positions for background image: Tiled Image, Cover, Centered (Original Size), Fixed, Parallax, Parallax (Original Size)

Border Color

selects the color of the widget's border.

Font Color

of the widget is changeable, too.

Links Color

Allows you to specifies the color of any link that exists in the widget.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us