Getting Started
See it in Action
See it in Action
Using the Builder
Access your Builder

When you login to your dashboard you'll see a number of different icons. The first one is your page builder where you design and create your website pages.

Page listing

The home page of your page builder will display a listing of all your pages,

 

When you purchased a website you may have chosen a particular template which will be the first page created for you, or, if you didn’t , then a default one is created automatically as an example.

 

However you can freely discard this one  if you wish. 

 

You can start a new page by either choosing a blank page or by selecting a template from our catalogue of 148 professionally designed templates.

Templates are designs for a page, not your entire website, so each page can use a completely different template if you wish.

To select a different template for your page simply click on “install” and in a few seconds your page is created for you. 

 You will see your new page in the page listing.

Page fonts

When you first start building your page, you will want to set the global fonts for the page. Note, that these settings are done on a page by page basis.

 

Navigate to over to the cog on the top right hand corner of your page. Click it and the tool panel slides out.

You can change a number of settings for the page here, one of which is the page font.

 

You have access to the full list of Google fonts to choose from.

When you select a font, all the elements on your page that have been set to that font style will automatically be updated.  

Other settings that can be modified from the font section include the font weight and size. Simply drag the slider to select the size, or just type in a number.

 

 

other settings include line height, style and color.

Advanced users can add custom styles class to be used in CSS. 

 

Fonts should be set for each of the font types.

Page Blocks

You can have numerous sections in a page, and within each section, there are other sub areas:

Rows, and within a row, columns, and within columns, you have elements.

 

Elements are your visual components of the web page and you have over 800 to choose from.

Sections

In order to make modifications to this webpage there are a number of different areas you'll need to know about 

 

The first one is a “Section”. As you hover your mouse over the top left hand corner you'll see some dark blue icons pop out.

 

The first icon is “Section Settings”. The second one allows you to duplicate the section, the 3rd is to delete the section, 4th is to move it, and the last gives you a few additional options - such as copy, paste, save to the library or import from library.

Section Settings
Layouts tab

 

When you click the “settings icon” you'll see a menu panel slide out on the left hand side.

 

In the “basic settings”  you can adjust various layout options, such as the section width, gutter , padding on the top and bottom and margins on the left and right .

 

An important setting to take note of is the option to hide the section in various media sizes: 

 

Each section, row and column can be hidden or displayed on desktop, tablet or mobile views. The benefit of this, is that in some cases you may find that a view doesn’t look as good as you would like on a particular device so you can create an optimised section specifically for that device size.

 

To do this, you would first duplicate the section and then on the first section, select “hide on tablet” and “hide on mobile”. On the second section, select “hide on desktop.” 

 

Now you can  make explicit  modifications to each section  in the particular view to provide the optimal look and feel on the particular device. 

 

 

Background tab

The “design tab” gives you the option  to add dividers on the top or the bottom of the section. Simply click on “Select divider” and choose the one that you want to add. There are a number of different styles and for each style, different options. You can get really creative with the options to create some funky designs.

 

Background tab

The background tab allows you to  add various backgrounds to a section - you can add an image, gradient, colour or even a video. 

 

There are various tweaks you can do to this image - You can center it, make it repeat and so on. if you want this image to be slightly darker because your text is light for instance, you could use the background blend mode and set it to overlay. The colour you select in the Colour tab will be used as the overlay coloir.

 

 

Avanced tab

The “Advanced Tab” is for designers who understand and know how to use css. You can make additional fine tuned modifications to this particular section from here.

 

Animations tab

Lastly, you can add animation to the section by selecting from the long list  of built in animation types.

Rows

Rows are accessed by hovering a mouse over over the content until you see the light blue icon displayed.

Row Settings

Clicking on the row icon gives much the same information as we had for the sections with one addition - You can select default column layouts to quickly define what the layout of this row will look like.

 

By selecting a particular layout, the columns adjust automatically.

Apart from that difference, the rest of the settings are the same as for the section.

 

 

Columns

Hovering over the Column Icons set - highlighted in  green - on the right hand side gives us additional control over the columns.

Clicking on the plus sign will add another columns or if you want to duplicate a column, click on the duplicate icon.

And just like the section and rows, the same settings are available in the control panel on the left.

Column Settings
Elements

Hovering over any element and the Element Icon set will display - highlighted in Yellow.

Clicking on the plus sign will open the element selector. You can duplicate an existing element with the Duplicate icon.

And just like the section and rows, the same settings are available in the control panel on the left.

Element Settings

Adding a new element is simple. Either click on the plus icon in the yellow set of icons, or if you are in a new element placeholder, click on the big plus icon in the middle of it.

 

You will then be presented with a list of our elements and and as you can see there are over 800 different elements  to choose from, with more being added all the time

 

Clicking on the pencil icon slides open the control panel for this element.

 

As each element is different, the options presented will not always be the same, For instance an element such as the Tab element is composed of a number of sub elements. to  Elements with sub elements will have a button at the top adjust the add-on items.

Clicking this allows you to now modify the tabs within this element.