Static Page Builder Editor – buildsupport

Breadcrumb path: Pages / Page Builders

You can access this page by clicking on Pages from the main menu, and Page Builders from the dropdown menu. Then select the Static Page Builder module from the available builders.

Static Page Builder - Editor Fundamental

In this section, you will learn how to use the Static Page Builder - Editor. This is a versatile, content-building software that allows you to easily and efficiently create your own pages.

Here is an example of a finished Static Page created using our Static Page Builder - Editor:

As part of creating a new page using the Static Page Builder, you will have access to the Editor window shown below. The following screenshots and descriptions will guide you through each component of the Editor.

This section will be separated into three main parts (plus subsections), covering the different functions included in the Editor:

● 1 Screen size

● 2 Control Panel

● 3 Design Panel

(A) Components

(i) Columns

(ii) Blocks

(iii) Row Templates

(B) Layers

Now that you have learned the fundamental idea and seen an example of the finished product, this guide will now walk you through how to use all parts of the Static Page Builder - Editor.

(1) Screen Size

● 1 In this area, you will find icons that toggle between Desktop, Tablet, and Mobile design modes for your page. This allows you to easily and quickly design different canvases to fit each of these device viewing modes.

Desktop. Clicking this icon enables you to design your page for Desktop use.

Tablet. Clicking this icon enables you to design your page for Tablet use.

Mobile. Clicking this icon enables you to design your page for Mobile use.

● Now that you have learned how to change the Screen Size, you can move on to the next section (Control Panel).

(2) Control Panel

● 2 In this area, moving from left to right, you will find the following functions:

View Components. This allows you to see the individual Components of your page.

Preview. This provides an instant Preview of your page in its current state.

Fullscreen. This button toggles the Full Screen viewing option for the editor on and off.

Undo / Redo. These buttons allow you to move backward (Undo) or forward (Redo) in recent memory.

Code Editor. This opens your Code Editor (shown below), giving you access to all the page’s source code for HTML editing.

Clear Canvas. This delete button resets your canvas and clears everything from your current draft.

Save to Database. This button saves your current canvas as a single file that can be accessed again for future use.

Now that you have learned about the functions of the Control Panel, you can move on to the next section (Design Panel).

(3) Design Panel

● 3 In this area, you can toggle between the three options to be displayed in the bar along the right side. The default (shown) is Components (right icon). For this section, we will move from right to left, through the different menu icons.

(A - Right) Components. Clicking this icon displays all the Components you can drag and drop onto your canvas.

(B - Center) Layers. Clicking this icon displays the Layer Manager. Here you can view and manage the different layers on your canvas.

(C - Left) Style Brush. Clicking this icon displays all the Components you can drag and drop onto your canvas.

Each of these sections will be explained individually. When you are ready, you can move to the next section (Components).

(3A) Components

● 1 With the Components icon selected along the top, you will see the right bar contains three dropdown menus. Components are grouped into the following categories:

(i) Columns. This menu displays Columns organizers that can be used on your canvas. These create dividing spaces on your canvas to help with arranging your various components.

(ii) Blocks. This menu displays the basic Blocks that can be used on your canvas. This category includes the majority of the different components you will be using.

(iii) Row Templates. This menu displays the Row Templates that can be used on your canvas. These are premade templates serving a variety of purposes.

● Each category of component will be covered separately below.

(3A-i) Columns

Each of the column configurations to the right can be dragged and dropped onto the canvas.

● 1 1 Column. Here is an example of how the 1 Column configuration appears on the canvas.

● 2 2 Columns. Here is an example of how the 2 Columns configuration appears on the canvas.

● 3 3 Columns. Here is an example of how the 3 Columns configuration appears on the canvas.

● 4 2 Columns 3/7. Here is an example of how the 2 Columns 3/7 configuration appears on the canvas.

Now that you have learned about how to apply Columns to your canvas, you can move on to the next section (Blocks).

(3A-ii) Blocks

● 1 Blocks. Here you will find a wide range of Blocks that can be dragged and dropped onto your canvas.

Text. This block displays Text that you have entered.

Link. This block displays a Link that you have entered.

Image. This block displays an Image that you have selected using the browser.

Video. This block displays a Video that you have selected using the browser. You can also specify a video source and provide a link in the corresponding Style menu.

Map. This block displays a Map that you can use to identify your store location for customers.

Link Block. This block displays a Link Block that you have selected.

Button Link. This block displays a Button Link that you have selected.

Quote. This block displays text you have entered in Quote format.

Text section. This block displays a Text section you have entered. It includes both the Title and Text.

Slider. This block displays a Slider on your page.

Tabs. This block displays Tabs so that you can arrange content into multiple Tabs. These are also designed to work with the Row Templates.

Typed. This block displays an animation of text being Typed along with a cursor.

Countdown. This block displays a Countdown on your page.

The following screenshots show examples of how Blocks may appear on your page’s canvas by dragging and dropping them into Columns arrangements.

● 1 Text. Here is an example of how the Text block may appear on your canvas.

● 2 Link. Here is an example of how the Link block may appear on your canvas.

● 3 Image. Here is an example of how the Image block may appear on your canvas.

● 4 Video. Here is an example of how the Video block may appear on your canvas.

● 5 Map. Here is an example of how the Map block may appear on your canvas.

● 6 Link Block. Here is an example of how a Link Block may appear on your canvas.

● 7 Button Link. Here is an example of how the Button Link block may appear on your canvas.

● 8 Quote. Here is an example of how the Quote block may appear on your canvas.

● 9 Text section. Here is an example of how the Text section block may appear on your canvas.

● 10 Slider. Here is an example of how the Slider block may appear on your canvas.

More examples continue in the image below.

● 1 Tabs. Here is an example of how the Tabs block may appear on your canvas.

● 2 Typed. Here is an example of how the Typed block may appear on your canvas.

● 3 Countdown. Here is an example of how the Countdown block may appear on your canvas.

Now that you have completed the section on Blocks, be sure to Save your canvas and continue to the next section (Row Templates).

(3A-iii) Row Templates

● 1 Row Templates. Clicking on the dropdown will display all of the available Row Templates. The purpose of these is to allow a user to easily and quickly create a page, one row at a time, by using a variety of prebuilt Row Templates.

● 2 Individual Row Templates can be drag-and-dropped onto the canvas as shown here. The Text and Image can be modified by the user.

When you are ready to continue, select the middle icon (Layers) and continue with the guide.

(3B) Layers

The Layers menu is especially useful when dealing with text-and-image overlays. For example, when using the Row Templates, there are a number of Layers that can be separated individually by using the Layers menu.

● 1 In this section you can see an outline of all the Layers in the current canvas.

The View (eye) icon on the right can be turned on or off to display the Layers.

The Move icon on the right can be dragged to reposition the Layers.

Now that you have learned how to use Layers, you can move on to the next section by selecting the left icon (Style Brush).

(3C) Style Brush

This icon displays the Style Brush for editing the elements on your canvas. Clicking on the Style Brush will bring up a menu for the selected element and allow you to enter detailed specifications.

● 1 Above is an example of the Style Brush options available when an Image component is selected.

The following Style options will be available when you click on any Component as long as the Style Brush is activated.

General. These settings enable you to make changes to the component’s General specs, including Display and Position.

Dimension. These settings enable you to make changes to the component’s Dimension specs, including Width, Height, Margins, and Padding.

Typography. These settings enable you to make changes to the component’s Typography specs, including Font Size, Color, Weight, Letter Spacing, Line Height, Text Align, and Text Decoration.

Decorations. These settings enable you to make changes to the component’s Decorations specs, including Opacity, Border, Box Shadow, and Background.

Extra. These settings enable you to make changes to the component’s Extra specs, including Transition, Perspective, and Transform.

Flex. These settings enable you to make changes to the component’s Flex specs, including Flex Parent, Children, Container, Justify, and Align.

Now that you have learned how to use the Style Brush and all other sections of the Editor, this concludes the user manual section for the Static Page Builder - Editor.