Popup Builder - Editor – buildsupport

Breadcrumb path: Popups / Popup Builder

To access the Popup Builder Editor, you have two options.

● 1 Click on Popups > Popup Builders from the main menu. Then select one of the available Popup Builders, enter a Name, and click Add Popup

● 2 You can click Manage All Popups and Edit a Popup already stored in your system.

Popup Builder - Editor Fundamental

In this section, you will learn how to use the Popup Builder - Editor module. This is our versatile, content-building software that allows you to easily and efficiently create your own Popups.

Here is an example of a finished Popup built using the Popup Builde - Editor:

As part of creating a new Popup using the Popup 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) Elements

1. Columns

2. Forms

3. Blocks

4. Row Templates

5. Carousel Templates

6. Desktop Templates

7. Tablet Templates

8. Mobile Templates

(B) Layers

This guide will now walk you through how to use the various parts of the Editor.

(1) Screen Size

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

Desktop. Clicking this icon will enable you to design your popup for Desktop use.

Tablet. Clicking this icon will enable you to design your popup for Tablet use.

Mobile. Clicking this icon will enable you to design your popup for Mobile use.

After you have understood 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:

Change Version. This button enables you to Switch the Version of the Editor. There are two versions: the Default which is covered in this guide, and the Alternate, which features the same functionalities but a different layout and appearance. You will receive a confirmation message to ensure you are ready to make the change.

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

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

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

View Code. This button enables you to View the HTML Code for your page.

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

Edit Code. 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 saves your current canvas as a single file that can be accessed again for future use.

System Accessibility Test. Click this button to perform a System Accessibility Test (shown below). This will check your page to ensure that links are working and that the necessary Elements are provided to satisfy ADA Compliance.

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. Default (shown) is Elements (right icon). For this section, we will move from right to left, through the different menu icons.

Elements. This displays all the Elements you can drag and drop onto your canvas.

Layers. This displays the Layer Manager. Here you can view and manage all the different Layers on your canvas.

Style Brush. This enables you to change the Style for Elements on your Canvas.

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

(3A) Elements

● With the Elements icon selected along the top, you will see the right bar contains a long list of dropdown menus. Elements in the Popup Builder Editor are grouped into the following categories:

A1 - Columns. Displays Column organizers that can be used on your canvas. These create dividing spaces on your canvas to help with arranging your various Elements.

A2 - Forms. Displays the basic Forms that can be used on your canvas.

A3 - Blocks. Displays the Blocks that can be used on your canvas.This category includes many of the various Elements you will be using.

A4 - Row Templates. Displays the Row Templates that can be used on your canvas.

A5 - Carousel Templates. Displays the Carousel Templates that can be used on your canvas.

A6 - Desktop Templates. Displays the Desktop Templates that can be used on your canvas.

A7 - Tablet Templates. Displays the Tablet Templates that can be used on your canvas.

A8 - Mobile Templates. Displays the Mobile Templates that can be used on your canvas.

● Each category of component will be covered separately below.

Now that you have learned about the different sections of Popup Builder - The Editor, you can move to the next section (3A-1 - Columns).

(3A) Columns

Each of the Columns configurations to the right can be dragged and dropped onto the canvas. Columns can be placed within a Form, or a Form can be placed within a Column.

● 1 1 Column. An example of how the 1 Column configuration looks on the canvas.

● 2 2 Columns. An example of how the 2 Columns configuration looks on the canvas.

● 3 3 Columns. An example of how the 3 Columns configuration looks on the canvas.

● 4 2 Columns 3/7. An example of how the 2 Columns 3/7 configuration looks on the canvas. This includes 2 columns, one filling 30% of the column width, the other filling 70% of the width.

Now that you have learned about how to apply Columns to your Popup Builder Editor canvas, you can move on to the next section (3A-2 - Forms).

3A-2 - Forms

● 1 Forms. Clicking this dropdown will reveal a list of additional individual Forms elements that can be dragged and dropped onto the canvas (listed from left to right).

Form. This Form includes a layout for a default Form for site visitors to fill out.

Input. This Form includes a general Input field where site visitors can enter text.

Textarea. This Form includes a general Textarea where site visitors can enter text.

Select. This Form includes a Select dropdown menu where site visitors can select an option.

Button. This Form includes a Button that site visitors can click on.

Label. This Form includes a Label for site visitors to identify a portion of your site.

Checkbox. This Form includes a Checkbox where site visitors can select an option.

Radio. This Form includes a Radio where site visitors can select an option.

● 2 A Form has been dragged and dropped onto the canvas in the example (but has not yet been connected to the database).

● Note: for any of these Forms to function properly on your website, additional programming within the Style menu is required (connecting them to the database).

Now that you have learned about Forms, you can move on to the next section of the Form Builder - The Editor user manual (3A-3 - Blocks).

3A-3 - Blocks

● 1 Blocks. This section provides access to Blocks that can be dragged and dropped onto the canvas.

Countdown. This displays a Countdown timer on your site.

Typed. This displays an animation of text being typed, and a cursor.

Tabs Block. This displays a Tabs Block you have entered. It includes Tabs and a place for Tabs Content.

Slider. This displays a Slider on your page.

Icon. This displays an Icon on your page.

Text. This displays a space where you can enter Text to appear on your page.

Link. This displays a Link on your page.

Image. This displays an Image on your page.

Video. This displays a Video on your page.

Map. This displays a Map on your page.

Link Block. This displays a Link Block on your page.

Quote. This displays a Quote on your page.

Text section. This displays a Text section on your page.

Button Styles 1, 2, and 3. This displays a Button of Style 1, 2, or 3.

Line. This displays a Line on your page.

● 2 Blocks on Canvas. Here are examples of various Blocks that have been dragged and dropped onto the Canvas.

Now that you have learned about Blocks, you can move on to the next section of the Form Builder - The Editor user manual (3A-4 - Row Templates).

3A-4 - Row Templates

This section provides access to Row Templates elements. These are premade Templates that were created so that you could easily build a website, one Row at a time.

● 1 Row Templates. Click on the dropdown to display all of the available Row Templates. The purpose of these is to allow for 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. The Text and Image can be modified by the user. Various Row Templates are shown on the canvas in the example.

Now that you have learned about Row Templates, you can move on to the next section of the Popup Builder - The Editor user manual (3A-5 - Carousel Templates).

3A-15 - Carousel Templates

This section provides access to Carousel Templates elements. These are premade Templates that were created so that you could easily build a Carousel for your website.

● 1 Carousel Templates. Here, you can drag and drop Carousel Templates elements onto your canvas.

● 2 An example is shown of how the first Carousel Templates element can appear on your canvas.

Now that you have learned about Carousel Templates, you can move on to the next section of the Popup Builder - The Editor user manual (3A-6 - Desktop Templates).

3A-6 - Desktop Templates

This section provides access to Desktop Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Desktop.

● 1 Desktop Templates. Here, you can drag and drop Desktop Templates elements onto your canvas.

● 2 An example is shown of how the first Desktop Templates element can appear on your canvas.

Now that you have learned about Desktop Templates, you can move on to the next section of the Popup Builder - The Editor user manual (3A-7 - Tablet Templates).

3A-7 - Tablet Templates

This section provides access to Tablet Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Tablet.

● 1 Tablet Templates. Here, you can drag and drop Tablet Templates onto your canvas.

● 2 An example is shown of how the first Tablet Template element can appear on your canvas.

● 3 Click the Tablet icon to set the Format to Tablet. This will ensure that the Tablet Template you choose will be compatible with the Tablet Format.

Now that you have learned about Tablet Templates, you can move on to the next section of the Popup Builder - The Editor user manual (3A-8 - Mobile Templates).

3A-8 - Mobile Templates

This section provides access to Mobile Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Mobile.

● 1 Mobile Templates. Here, you can drag and drop Mobile Templates elements onto your canvas.

● 2 An example is shown of how the first Mobile Templates element can appear on your canvas.

● 3 Click the Mobile icon to set the Format to Tablet. This will ensure that the Mobile Template you choose will be compatible with the Mobile Format.

Now that you have learned about Mobile Templates, you can move on to the next section of the Popup Builder - The Editor user manual (3B - Layer Manager).

3B - Layer Manager

● 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 (C - Style Manager).

3C - Style Manager

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

● 1 Above is an example of the Style Manager options available when a Form element is selected.

● The following Style options will be available when you click on a Form element as long as the Style Manager is activated.

Settings. These basic Settings can be modified for any given form (an example is shown for the Email form element selected).

Name. This field enables you to change the name of the Form field.

Placeholder. This field enables you to enter a Placeholder, which is text that will display until the user fills in the form with replacement text.

Type. This dropdown enables you to select the Type of Form field.

Required. This checkbox enables you to choose whether or not the user must fill out this Form in order to submit their information.

Tabindex. This field displays the Tabindex for the selected Form.

Id. This field displays the Id for the Form field.

Max Length. In this field, you can enter the Max Length of the selected Form field.

General. This enables you to make changes to the component’s General specs, including Display and Position.

Dimension. This enables you to make changes to the component’s Dimension specs, including Width, Height, Margins, and Padding.

Typography. This enables 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. This enables you to make changes to the component’s Decorations specs, including Opacity, Border, Box Shadow, and Background.

Extra. This enables you to make changes to the component’s Extra specs, including Transition, Perspective, and Transform.

Flex. This enables 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 Manager, this concludes the user manual covering Popup Builder - The Editor.