Page/Popup/Dynamic Content Block/Email Template Builder in Enquire MAP
Enquire MAP provides the User a powerful and customizable Page Builder that can build templates for web pages, Popups, dynamic content blocks, and emails. All that be customized include the name, title, description, and other attributes of the page, along with the page and brand styling with the first two tabs of the sidebar. For example, a Page can be either a web page, dynamic content block, email, or popup.
The Page Builder revolves around the use of Layout Blocks which can be dragged and dropped on to the main page editing area. Please note: There are many different layout block styles to choose from and are located in the Layout Blocks side tab.
Each layout-block can contain any number of content templates or dynamic content blocks for web pages. Simply drag the selected content item and drop it into the desired content block on the page. There are many predefined content items to choose from in the 3 tabs of the sidebar.
Popups are unique due to their customizable animations, a popup has three extra tabs:
Popup Animations enable the User to choose a Preset type of animation, as well as starting positions, and delays. This tab also provides the ability to choose the closing animation type, starting position, and delays.
Popup conditions lets the User set what triggers these Popups to open.
Popup Close Conditions lets the User set what triggers these Popups to close.
Enquire MAP's Page Template Builder
Enquire MAP's Page Template Builder uses a powerful layout engine based off of columns and rows. The user needs to access the "Row Styles" settings in order to customize a layout block on the page.
Here, one can edit the properties of the entire row to include any columns which are in the row.
The layout blocks which can be placed on a page contain different numbers of columns. For example, each column can be set to one of twelve widths, 0%, 8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%, 83%, and 93%. Also, each row can have one of two widths:"Full Width" or "Boxed". Please Note: "Full Width" spans the row across the entire page's window. By selecting "Boxed", this will center the row container and add padding on either side of it.
If there are columns, all set to 17% and each column will be 17% of the page, those three columns beside each other will take up 51% of the rows width.
If there are three columns with 42% width, the third column will move to a new line underneath the first two columns as 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 more, any combination of widths for those columns. If there are five 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.
Please Note: If the "Expand Columns to same Height?" checkbox is checked, their percentage values will represent a width "ratio". If there are three columns and their widths for a certain screen size are: 50%, 17%, and 42% respectively, this 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. Checking "Extend Column Background All The Way Left" would fill this padding with that column's background color. This same concept applies to the rightmost column.
- With "Extend Column Background All The Way Left":
- Without "Extend Column Background All The Way Left":
Please Note: There are many ways to customize rows and columns as well.
The "Backgrounds and Colors" tab provides the ability to change the background color, text color, or even set a background image, gradient, or video.
The "Shadow" tab enables editing the placement, color, intensity, and size of a shadow around rows and columns.
The "Border" tab allows the User to edit the border size, style, and color, as well as around the corners of the border.
The "Spacing" tab provides the ability 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 offers the opportunity to add preset animations for the content block. There is a wide range of animations to 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 helps set the page to look and act the way it should.
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 to edit.
The "Display", "Backgrounds, Colors and Fonts", "Shadow", "Border", and "Spacing" tabs follow the same styling properties as a Row.
The "Headings" tab enables customizing the individual headings of the content block.
The "Links" tab lets the User customize the color of any links within the block.
The "Animations" tab follows the same animation rules and settings as mentioned above for a row/column. The Preview section of these tabs to helps test out the new customizations. As well, at any point, click the "PREVIEW PAGE" button at the top of the window to see the page template as it would appear on a real page.
When previewing a page, simply click the size buttons to see how the page will look on different screen sizes. Here, refreshing the page to see any new changes made since the last page load.
Please reach out to the dedicated Enquire Account Manager or Enquire MAP Support team for further assistance.