Pagebuilder editor

Pagebuilder is another editor in the Create > New campaign > Message contents section. This tool is used to modify the contents of templates (especially prepared for Pagebuilder) without the risk of damaging the html code and, therefore, without the risk of users receiving view errors.
The basic concept of Pagebuilder is to Outline the template into a series of elements, each of which can be edited separately. After modifying the editable elements, the result is saved in a new html file which can be immediately used in ContactLab. This concept will be clearer after you have read the first three paragraphs of this chapter.

 

 

Access

 

Pagebuilder can only be accessed by customers who have signed activation contracts. To find out whether it is available, simply check that the “Pagebuilder” link is present under the html code box (see fig.2)

 

create_campaign05

Figure 2: Opening Pagebuilder

 

 

Click on the link to open a pop-up window displaying the application (fig. 2).

 

 

pageb_editor03

Figure 3:  Pagebuilder main page

 

The main page is divided into two sections: templates and images; templates are created and managed in the first, while images are created and managed in the second.

 

 

 

Using a template: create a new page

 

You will find templates inside Pagebuilder. Each template can be considered as the matrix of die from which countless pages can be created.

Whenever you wish to update the contents of a certain template, simply create a new page from that template and then modify it.
Here is how you create a new page.

 

 

1. Click on the required template, in the example in the figure to the side, “Template for all”. Click on “New page”.
create_pageb02

 

2. The new page is created and displayed automatically (fig. 4)

 

pageb_editor04

Figure 4: Page editing screen

 

 

Edit the page

 

1. Figure 4 shows the Outline of Pagebuilder: the window is divided into two sections. The page is previewed in the box to the right. The page is divided into blocks which are shown in the left-hand column. These blocks represent the “Outline” of the page. In the example in figure 3, the Outline comprises the following blocks: “Header”, “Article 1”, “footer”.. These in turn may contain other elements (e.g.: “Logo” and “Article small 1”). Click on an element to display it in a lightbox.
2. Now edit the content of the element and click on “Save” (fig. 5)

 

pageb_editor05

Figure 5: Modifying and previewing the content of an element

 

 

3. There are four types of editable element: images, one-line text, standard editor, advanced editor. These will be analysed one by one in the next paragraph. Now let us see how to save a page after modifying it.
4. After editing the required elements and previewing them by clicking on “Save”, it is best to save the modifications: to do so, simply click on the “Save modifications” link at the top of the page. If, instead, you wish to cancel all the modifications made up to now, click on Cancel modifications.
5. After saving the modifications, the updated page is saved. The system automatically takes you to the list of pages associated with that template.

 

 

Editable elements

 

 

The elements in the left-hand Outline column are divided into four categories. Let us take a close look at them.

 

One-line text

These elements are used to enter a line of text, generally brief, without modifying the existing formatting. They are typically used for the titles of articles, link URLs or list bullets.

 

Standard editor

These elements may be edited with a standard editor that can be used to change just a few graphic aspects: bold type, underlining, italics, inserting or removing links, etc… The icons in the standard editor and their functions are described below.

 

pageb-biu buttons for formatting the text in bold type, italics and underlining
pageb-tagliacopiaincolla buttons for cutting, copying and pasting the text
pageb-txteword used to copy text from txt or word files
pageb-seltutto selects all the text
pageb-undoredo undoes or redoes the last action
pageb-giustifica justifies the text
pageb-links inserts or removes a link on a portion of selected text
pageb-gomma cancels all formatting and returns the original text to its default values.

To start on a new line without leaving a blank space, hold down Shift and then press Enter.

 

 

Advanced editor
These elements can be modified with an editor which, apart from the functions of the standard editor

(see previous paragraph), also has others:

pageb_insimmagine enters an image on a server (e.g.: http://www.server.it/img/picture.gif )
pageb_instabella enters a table; if the table is already present, it can be used to modify settings
pageb_propcella modifies the settings of a single cell
pageb_pastrugnacelle these three buttons remove or insert rows in the table
pageb_cleanmessup this button cleans “dirty” code
pageb_fontsize text size can be selected from the drop-down menu
pageb-centrare centres the highlighted portion of text.
pageb_colori changes the colour of the selected text
pageb_omega inserts a special character (accented letters, euro symbol, etc…)

 

To start on a new line without leaving a blank space, hold down Shift and then press Enter.

 

 

 

Images

 

If the element you are modifying is not a text but an image, you will see a screen similar to the one shown in figure 6:

 

pageb_editor07

Figure 6: Selecting images in Pagebuilder

 

Click on the “Select” link under the image. This opens a small window containing a list of all the available images: simply click on the name of the image to select it. Now, click on the usual “Save” button to see the new image in the preview window. The image will be inserted in the page. This means an HTTPS image source tag will be placed in the relevant point of the HTML code of the page. The next paragraph concerns the management of images in Pagebuilder.

 

6. After making all the necessary modifications, remember to save them using the “Save modifications” link at the top of the page.

 

 

Upload images

 

As seen in the previous paragraph, if the element is an image, it can be changed by selecting another one from those available. To add an image to the list of available images, use the “Images” section of Pagebuilder.
When you enter “Images”, you will find the “Upload a file” and “Create a folder” links to the top right (see fig. 7).

 

create_pageb07

Figure 7: List of available images. Folders can be created and jpg and gif files uploaded

 

Use these links to load an image (jpg or gif format, the filenames may not contain blanks or special characters) or create a new folder. You may create as many folders as you wish but it is not possible to create subfolders.

 

 

The Outline column

 

As we have seen, the column to the left shows the Outline of the template.
Each element of the Outline may have special properties: if it does, you will find one of the following icons next to the element:

 

pageb-tastopiu this duplicates the element, creating an identical copy which can then be modified: if, for example, you have 2 articles you can create a third and a fourth, etc… using the same Outline and then edit the contents.
pageb-tastomeno this cancels the corresponding element; attention: if you cancel all the elements you will not be able to create new ones (if you have 3 articles in a section and you cancel all three, you will not be able to create a new article in that section).
pageb-lucchetto_off this is a kind of safety device: click on to it to release it and show the pageb-tastomeno button.
pageb-lucchetto_on this icon indicates that the safety device has been released; click on it to reapply.
pageb-occhio some elements may be hidden or displayed on request: when the eye icon is present, it means that this element is visible. Click on it to hide the element.
pageb-occhiociecato this icon indicates that that element is hidden: click on it to display the element and the pageb-occhio icon

 

 

Save the page and use it in ContactLab

 

After modifying the page as required, a preview will appear in the bottom box. The modifications you see in the preview, however, have not yet been definitively saved!

To do this, click on the “Save modifications” link at the top of the page.

 

After saving the page (with the same or another name), then the system will take you directly to the Page list.

 

Now the page is updated with the required contents that were saved in the Page list: how do we insert it in ContactLab?
There is a special link “Paste to ContactLab” underneath the name of each page: click on it to automatically insert the page into the “Text in HTML format” box in ContactLab (fig. 8)

 

create_pageb08

Figure 8: Entering the contents of a Pagebuilder page in ContactLab

 

The page has now been copied and you may continue the delivery process by clicking on “Next”.
ATTENTION: to allow the html code to be transferred from Pagebuilder to ContactLab, the ContactLab “Message content” screen (see fig. 8) must lie under the pop-up window of Pagebuilder. When clicking on “Use in ContactLab”, the background of the link should start flashing.

 

 

Other page operations

 

As can be seen in figure 9, as well as “Paste to ContactLab”, there are also other links under each page:

– Preview opens a pop-up window containing a preview of the page.

– Edit is used to enter the page Outline and modify it as described in the previous paragraphs.
– Duplicate creates an identical copy of the page, including all updates. The copy may be renamed and modified in turn.