Page Builder

Page Builder

Section 1.1 Introduction

Page builder is used for creating new template pages. It consists of three parts; the first part contains the page elements and the layout elements. the page elements part contains tabs such as layout, elements, tabs, sliders, article, posts, social and advertisements. those tabs are used in layout elements' part. for each item in each tab of the page elements, there is a question mark icon, by clicking it, documentation of this item is displayed. The layout elements part contains elements' columns that are used for dividing the page into one or more columns. The other third part of page builder is a block that contains template options such as: add new template, delete template or update template.

Section 1.2 Add New Template

In the previous section, Page Builder parts have been defined, so in this section new template page will be created using Page Builder. This template page will include three columns; the first column will include posts, the second one will include title and the third one will include normal text. So in order to create this template page, the following steps are needed:
  1. From "Admin Menu", click on "Appearance",
  2. From "Appearance", click on "Page Builder" item,
  3. From "Page Builder", select "Add New Template" tab,
  4. From "Add New Template", type the name of your template you need to create, for example "My Template", then click "Create Template" button,
  5. Drag and drop the icon "1/3 Column" from "Layout Elements",
  6. Repeat step 5 to add second and third columns "1/3 Column", then it will be displayed as shown,
  7. After dividing template page into three parts, in order to display posts of your website in the first column, from "Page Elements" select "Posts" tab,
    , then drag and drop "Posts" item into the first column,
    , there is a small arrow in "Posts" item, you can click it to appear / disappear the content of "Posts" item,
  8. In order to add "Title" item in the second column, from "Page Elements" select "Elements" tab,
    , drag and drop "Title" item into the second column and write under "Title Label" your title, for example "Blog Title",
    , there is a small arrow in posts item, you can click it to appear / disappear the content of "Title" item,
  9. In order to add "Text" item in the third column, from "Page Elements" select "Text" tab,
    , drag and drop "Text" item into the second column and write under "Content Label" your text, for example "Hello World", 
    , there is a small arrow in "Text" item, You can click it to appear / disappear the content of posts-slider item,

Section 1.3 Add Template to Page

In the previous section, a new template page has been created, in this section, you can add this template to a certain page of your website, the following steps are needed:
  1. From "Admin" navigation menu, click "Pages",
  2. From "Pages", click "Add New" menu,
  3. Insert the title of the page, for example "Template page",
  4. From "Page Options", select "Yes" from "Layout Builder" and "My Template" from templates menu,
  5. Click "Publish" button,
  6. Click "View Page" button,
Now, you can display the content and template page on your website.

Section 1.4 Update Template

In the previous section, a template has been added to a certain page of your website. In this section, you can update one part of the template page, for example: the content of the third column, the following steps are needed:
  1. From "Admin" navigation menu, click "Appearance",
  2. From "Appearance", click "Page Builder" item,
  3. Select "My Template" from the tabs of templates,
  4. Go to third column, click the arrow of "Text" item,
  5. Below "Content", type "Hello there again", 
  6. Update the template by clicking "Update Template",
By refreshing the page, the content is updated.

Section 1.5 Duplicated Template Page

In section 1.2, a new template page has been created, so in this section you can duplicate this template and add "Today" element to the second column of the duplicated template page, the following steps are needed:
  1. From "Admin" navigation menu, click "Appearance",
  2. From "Appearance", click "Page Builder" item,
  3. Select "My Template" from the tabs of templates,
  4. In order to duplicate the template, click "Duplicate" button,
  5. Select "My Template" from the tabs of templates and update "Template Name", for example "Duplicate Template",
  6. From "Page Elements" select "Elements" tab,
  7. In order to update the template, click "Update Template",
You have duplicated the template page "My Template".

Section 1.6 Delete Template

In the previous section, the template page "My Template" has been duplicated, so in this section you can delete this template "Duplicated Template", the following steps are needed:
  1. From "Admin" navigation menu, click "Appearance",
  2. From "Appearance", click "Page Builder" item,
  3. Select "Duplicated Template" from the tabs of templates to delete it,
  4. Click "Delete" button
  5. Now, you have deleted it,