Page/Popup/Dynamic Content Block/Email Template Builder

ActiveDEMAND provides you with a powerful and customised "page" builder, that can build templates for webpages, popups, dynamic content blocks, and emails.

You can customise the name, title, description, and other attributes of the page, as well as the page and brand styling with the first two tabs of the sidebar (A page, in this case, can be either a webpage, dynamic content block, email, or popup).





The page builder revolves around the use of Layout Blocks which you can drag and drop onto the main page editing area.

There are many different layout-block styles you can choose from which are located in the Layout Blocks side tab.




Each layout-block can contain any number of content templates or dynamic content blocks for webpages. Simply drag the selected content item and drop it into the desired content block on the page. There are many pre-defined content items you may choose from in the 3 tabs of the sidebar.

Popups

Popups are unique due to their customisable animations, a popup has three extra tabs:

Popup Animations allow you to choose a preset type of animation, as well as starting positions, and delays. This tab also allows you to choose the closing animation type, starting position, and delays.



The popup open conditions lets you set what triggers these popups to open.



The close conditions lets you set what triggers these popups to close.

Landing Pages

ActiveDEMAND's page template builder uses a powerful layout engine based off of columns and rows.

Access the "Row Styles" settings in order to customise a layout block on your page




Here you will be able to edit the properties of the entire row, as well as any columns which are in the row.



The layout blocks which can be placed on a page contain different numbers of columns. Each column can be set to one of twelve widths, 0%, 8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%, 83%, and 93%.

Each row can have one of two widths, "Full Width" or "Boxed".

"Full Width" spans the row across the entire page's window. Selecting "Boxed" will centre the row container and add padding on either side of it.



If you have 3 columns, all set to 17%, each column will be 17% of the page, and those 3 columns beside each other will take up 51% of the rows width.

If you have 3 columns with 42% width, the third column will move to a new line underneath the first two columns, because there will only be 16% of the width of the rows remaining on the first line, therefore the third column will take up the first 42% of the new line it has been moved to. This same concept applies for any number of columns, and any combination of widths for those columns. So, if you have 5 columns all set at 93%, those columns will each be on a new line because they are unable to share the row's width with any of the other columns.



However, if the "Expand Columns to same Height?" checkbox is checked, their percentage values will represent a width "ratio". If you have three columns, and their widths for a certain screen size are: 50%, 17%, and 42% respectively, that adds up to 109. This means that the first column would take up 50/109 of the page's width (~46%), the second column would take up 17/109 (~16%), and the third column would take up 42/109 (~39%). These three widths will automatically add up to 100% of the page's width and occupy the entire space.





The "Extend Column Background All The Way Left" and "Extend Column Background All The Way Right" checkboxes will set the width of the column's background. So, if the row is set to "Boxed", the leftmost column will have a little bit of padding on the left side. So, checking "Extend Column Background All The Way Left" would fill this padding with that column's background colour. This same concept applies to the rightmost column.

With "Extend Column Background All The Way Left":




Without:



There are many ways to customise rows and columns as well.

The "Backgrounds and Colours" tab allows you to change the background colour, text colour, or even set a background image, gradient, or video.




The "Shadow" tab allows you to edit the placement, colour, intensity, and size of a shadow around rows and columns.



The "Border" tab allows you to edit the border size, style, and color, as well as around the corners of the border.




The "Spacing" tab allows you to set spacing around rows and columns. There are two types of spacing: padding, and margins. Padding is extra space added to an element inside of the background, so the background will appear to grow. Margins add extra blank space outside of the background.






The "Animations" tab lets you add preset animations for the content block. There is a wide range of animations that you can add, as well as naming the animation, when and how it triggers, setting delays, and repeating.



The "Custom CSS" and "Custom Script Tag" tabs contain auto-generated CSS and Javascript code which allows your page to look and act the way you told it to.


Each individual content item can also be edited by clicking the individual item and then pressing the "Advanced Edit" button to set the text or images inside, or the "Edit Content Styles" button to adjust styling for the whole content block.





The "Edit Content Styles" button leads to several different properties you can edit.



The "Display", "Backgrounds, Colours and Fonts", "Shadow", "Border", and "Spacing" tabs follow the same styling properties as a Row.

The "Headings" tab lets you customise the individual headings of the content block.



The "Links" tab lets you customise the colour of any links within the block.



The "Animations" tab follows the same animation rules and settings as mentioned above for a row/column.

You can use the Preview section of these tabs to help you test out your new customizations.

As well, at any point, click the "PREVIEW PAGE" button at the top of the window to see your page template as it would appear on a real page.



When you're previewing a page, you can click the size buttons to see how the page will look on different screen sizes. You are also able to refresh the page to see any new changes you have made since the last page load.

Updated on: 29/09/2022