{"title":"Getting Started with SiteOrigin Page Builder","id":36079,"link":"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/","parent":[37224],"content":"

One of the recommended plugins in Phlox is?Page Builder?<\/strong>by SiteOrigin<\/strong>. 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 colours 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.<\/p>\n

\"page-builder\"preview<\/p>\n

<\/div>\n

To install?Page Builder Plugin<\/strong>:<\/p>\n

    \n
  1. Go to your?WordPress Admin Panel<\/strong><\/li>\n
  2. Click?Phlox<\/strong>?on the Dashboard<\/strong><\/li>\n
  3. Navigate?Recommended Plugins?<\/strong>tab<\/li>\n
  4. Install Page Builder<\/strong><\/li>\n<\/ol>\n

    To install?Page Builder Widgets Bundle<\/strong>:<\/p>\n

      \n
    1. Go to your?WordPress Admin Panel<\/strong><\/li>\n
    2. Click?Phlox<\/strong>?on the Dashboard<\/strong><\/li>\n
    3. Navigate?Recommended Plugins?<\/strong>tab<\/li>\n
    4. Install Page Builder Widgets Bundle<\/strong><\/li>\n<\/ol>\n

      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:<\/p>\n

        \n
      1. Go to your WordPress Admin Panel<\/strong><\/span><\/li>\n
      2. Click the <\/span>Pages?<\/b>on the <\/span>Dashboard<\/b><\/li>\n
      3. Click the <\/span>Add New<\/b><\/li>\n
      4. Navigate to the top right hand of the WordPress text-box and find?Page Builder<\/strong>, beside text tab<\/li>\n<\/ol>\n
        \n

        Page Builder Options<\/h3>\n

        You can use the toolbar to add a widget, add new columns or to load prebuilt layouts.<\/p>\n

        Add Widget<\/h4>\n

        This option lets you add your content by using any available widgets you want.<\/p>\n

        <\/p>\n

        Add Row<\/h4>\n

        This option allows you to create a layout by adding rows.<\/p>\n

        \"page-builder-row\"<\/p>\n

        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.<\/p>\n

        Prebuilt<\/h4>\n

        Here you are able to insert your page’s ready layout.<\/p>\n

        \"page-builder-layouts\"<\/p>\n

        History<\/h4>\n

        With history you can undo your changes.<\/p>\n

        <\/p>\n

        Live Editor<\/h4>\n

        Live editor helps you to edit your post\/page in real-time.<\/p>\n

        Edit, Duplicate, and Delete Elements<\/h4>\n

        \"pagebuilder-options\"You can easily reorder rows and move widgets with drag and drop. Also, each item can be duplicated or deleted.<\/p>\n

        \n

        Widget?Styles<\/h3>\n

        All widgets in page builder, can be customized with different options. There are three widget styles in page builder:<\/p>\n

        Attributes<\/h4>\n

        \"attributes\"Widget Class<\/h5>\n

        This option allows you to add custom classes.<\/p>\n

         <\/p>\n

        CSS Styles<\/h5>\n

        Here you can add your own styles.<\/p>\n

        <\/div>\n

        Layout<\/h4>\n

        \"layout\"<\/p>\n

        Padding<\/h5>\n

        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.<\/p>\n

        <\/div>\n

        Design<\/h4>\n

        Background Color<\/h5>\n

        changes the widget’s background color to any color you want.<\/p>\n

        Background Image<\/h5>\n

        allows you to add an image for the background of the widget.<\/p>\n

        Background Image Display<\/h5>\n

        specifies the image position. There are different positions for background image: Tiled Image, Cover, Centered (Original Size), Fixed, Parallax, Parallax (Original Size)<\/p>\n

        Border Color<\/h5>\n

        selects the color of the widget’s border.<\/p>\n

        Font Color<\/h5>\n

        of the widget is changeable, too.<\/p>\n

        Links Color<\/h5>\n

        Allows you to specifies the color of any link that exists in the widget.<\/p>\n

         <\/p>\n","type":"solution"}