[1] HOW TO USE THE PAGE BUILDER

Page Builder is a powerful feature that allows you to create an unlimited number of template variations for use in your website. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.

Please Watch This Video : Detail about each elements given below this video, (in next point )

[2]  ALL ABOUT : PAGE BUILDER BLOCKS

Page builder uses blocks to build up pages. It has a drag and drop ability so you can simply drag the blocks and move them to the correct position. You can alse resize (expand or minimize) the blocks simply with the help of your mouse (drag the window to resize it).

BLOCKS USED IN THE PAGE BUILDER

Vertical Margin – defines a padding between blocks. In our demo it is set to 40px. You can also define background color.

Breadcrumb – this is the upper section part of each inner page (it defines the path of where in the website you currently are – for example: Home >> Portfolio >> Single Portfolio Title). It will be slightly different on different pages (like portfolio and single portfolio). There is no setting on your part.

Revolution Slider – all you have to input here is the alias of the Revolution Slider that you created (how to set up the slider is explained in the chapter Revolution Slider).

Start Content – this is the block that defines from where the non full width content starts (please note that Revolution Slider can be full width or boxed and this is set from the Plugin settings of the Slider).

Featured block – This is the block that defines the featured squares found below the Revolution Slider. Screen below shows what content needs to be added to be the same as the ones on the live demo:

End Content –  this is the block that defines where the non full width content stops

Column – this block is only needed if you want to add content within columns. In this case first drag the number of columns you wish to have and size them properly (by dragging them with your mouse). Now add the blocks you wish to use within these columns (so block is inserted inside the column). Use drag and drop to do so.

Portfolio Feed – This is the block that set up the recent portfolio part of the Page. Screenshot belows shows which fields need to be set up in order for the feed to looks exactly like the one on our live demo:

Number of portfolio post to show – this defines how many portfolio items are being pulled in. In our case we use 12 items, which means 4 slides of 3 portfolio items.

Blog posts full width – this block works in the same manner as the portfolio feed, only it displays recent posts.

Mini Blog – mini blog (with sidebar on right, left or full width).

Testimonials – this is the block with which you can add the testimonials (quotes from customers). Screenshot below is showing how you can set it up:

Portfolio – block that adds the portfolio section to the Page. Block is simple as the screenshot below is showing:

  • Number of Columns – you can decide here which template to use (2, 3 or 4 column version).
  • Portfolio Categories – Choose the categories you wish to display
  • Number – Set how many portfolio items you wish to display on certain page

Contact form and Widgets – Contact part is divided into two parts. On the left is the contact form and on the right is the part reserved for widgets. Widgets are set up directly from the widgets section so all you have to do here is to choose which widgets part to use. Screenshot below is showing how this part is set up:

Team block – with this block you add the team member. The parameters that have to be filled are:

  • Name
  • Position
  • Image
  • Image for icon
  • Social networks (you can add all or none, it’s up to you)

When going to Appearance / Menus you will see the structure of the templates navigation. You can easily edit menu labels, and move them using drag and drop. On the left column you have the possibility to add menu items using “custom links”, “pages” or “categories”. The newly added item will appear at the bottom of the menu structure and can be moved to its desired location. Make sure to always save the menu after making changes.

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Scroll back to the Menu Editor.
  6. Click the Save Menu button.

 

ADDING ITEMS TO THE MENU

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default.

  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Scroll back to the Menu Editor.
  6. Click the Save Menu button.

 DELETING A MENU ITEM

  1. Locate the menu item that you want to remove in the menu editor window
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately removed.
  4. Click the Save Menu button to save your changes.

CUSTOMISING MENU ITEMS

The Navigation Label

This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.

The Title Attribute
This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.

  1. Click on the arrow in the top right-hand corner of the menu item to expand it.
  2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.
  3. Click the Save Menu button to save your changes.

 

CREATING MULTI LEVEL MENUS

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

  1. Position the mouse over the ‘child’ menu item.
  2. Whilst holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.

There are 3 menus that you have to set. Main menu, Top Navigation Menu and Footer menu. Responsive menu will only be visible on small resolutions (like on mobile devices).