Visual page designer

Visual page designer

It is extremely important that you read all the sections on this page. Do not skip the “Content Templates” section. Lets get started…

To access the visual designer, you must click the “Pages” menu to list your web site pages. Once the page list is loaded, click the “Builder” link on the page you wish to edit – This will load the visual page designer.

edit-home-page

 

When the visual designer loads, you will see the following screen. The visual designer components are located in the toolbar on the right hand side of the screen:

visual-designer

The following section will explain the visual designer and the most important visual designer components. The image below is the full list of the available visual designer components found on the toolbar  – We have highlighted the most used components in red. To use a component, simply drag a component onto a page.

visual-designer-components

 

Content Container

Before dragging any other component onto a page, you should always start with a content container. This component as its name suggests, can hold multiple components. Components such as page sections, images and text can be placed on top of a Content Container. When saving a content container as a template, all other components placed on top of the content container will be saved automatically, thus it is good practice to always start with a content container.

content-container-drag

Page Section

This is a very useful background component (Found near the bottom of the components list). It allows you to set a background colour, pattern or image. You can drag multiple Page Sections onto a Content Container. Other components such as images and text can be placed on top of a Page Section. Drag a Page Section onto the Content Container you placed on your page earlier. Click the colour changer icon (see example below) to change the background colour of the page section.visual-designer-drag-page-section

 

Column Layout

visual-designer-column-layout

Column layouts should be placed on top of Content Containers or Page Sections. They allow you to set multiple column layouts on your page.  Drag a two column layout onto the Page Section you created earlier. Important: When your web site is displayed on mobile devices such as phones, the columns will shift under each other so that they can fit on the screen without the user having to scroll sideways. If the devices screen is large enough for two or three columns, the columns may remain in their original position. This is an important consideration when creating columns on your pages.

visual-designer-drag-column-layout

Positioning components on the page using margins and padding

When placing a component on a page, you can fine tune the position (top, bottom, left, right) by adjusting the margin or padding.

visual-designer-position-components

Paragraph/Text element

This component is used to add text to your page. Drag a text element onto your column layout that you created earlier. You will notice that as you drag the text element over the column layout, a green horizontal highlight will display indicating where the text element will be placed once you let the mouse button go. In the example below, we are placing a text element on the left column of the two column layout.

visual-designer-drop-text-elementClick the text element to edit the text.

visual-designer-edit-text

Image

This component is used to add images onto your page. Drag an image component onto your column layout that you created earlier.

visual-designer-drag-image-componentvisual-designer-add-image

Button

Buttons are useful when you want to catch attention and draw your visitor to another page or web site.

visual-designer-button

Content Templates – DO NOT SKIP

This section is a must read if you want to rapidly build pages! – When you expand the “Content Templates” section on the toolbar, you will find numerous page designs that can be used together. For example, scroll down until you see a template named “T-Header4”, then drag this onto your page. Next, drag “T-FeatureList1” onto the page… and so on.. By dragging multiple templates from this section, you will be able to create unique and amazing page designs! – We highly recommend that you try out all the templates and make note of the ones you like – You can then change colors and background images to create unique and interesting web site pages.

Note: Our designs were created using the same components that are available to you.

content-templates

IMPORTANT: You can also create your own designs and save them for use on other pages.  Always put components onto a “Content Container” or “Page Section” component as explained earlier. The reason for this, is that when you save the page section or content container, all components that are on top of these components will also be saved – This is very important to remember as it allows you to save many components at once. All the designs we created in the “Content Templates” section, were saved using Content Containers or Page Sections. In the illustration below, we created a design using a page section. We therefore click the Page Section we want to save. Follow the steps illustrated in the image below to save a template:

content-templates-save