Content Blocks
Overview
Colours
Dark Blue
Light Blue
Green
Orange
Red
Yellow
Light Grey
Med Grey
Dark Grey
Extra Dark Grey
Headings
Spacing
Bootstrap spacing classes for margin and padding can be applied to any element.https://getbootstrap.com/docs/4.0/utilities/spacing/
We use the spacing methods on inner columns to achieve spacing vertically. This is specifically helpful when trying to achieve vertical spacing between elements when contents stack on responsive devices.Grid Layout
Bootstrap grid layout information that can be applied to layout areas where column settings are available.
https://getbootstrap.com/docs/4.0/layout/grid/
By default, layouts and templates are pre-configured to achieve what is required for the design. These can be overwritten by bootstrap classes as required.
When to use Bootstrap columns
Each layout has a setting which allows you to customise the Bootstrap columns, for example on the 100% layout, you can update the Bootstrap column to col-12 (12 columns on mobile) col-md-10 (10 columns on tablet) col-lg-8 (8 columns on desktop). You can then centre/ offset the columns at each breakpoint to customise the design. For example offset-md-1 offset-lg-2, would move the layout 1 column left on tablet and 2 columns left on desktop.
Breakpoints
Waterlogic design has more breakpoints that Bootstrap which means you have finer grain control over screen widths:
breakpoint-xs: 0;
eg: col-xs-12
breakpoint-sm: 576px;
eg: col-sm-12
breakpoint-md: 768px;
eg: col-md-12
breakpoint-lg: 992px;
eg: col-lg-12
breakpoint-xl: 1200px;
eg: col-xl-12
breakpoint-xxl: 1350px;
eg: col-xxl-12
breakpoint-wl: 1600px;
eg: col-wl-12
All breakpoints:
eg: col-12
This means you can use additional classes such as col-wl-2 for 2 columns at 1600px and up screen widths.
Layouts
Outer layouts used.
Layout: Tabs
Tabs Layout container for Tab Title and Tab Content
A layout designed for the use of creating tabbed content.
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
NOTE: Tabs Layout is the base start for creating tabbed content within content blocks using the tab title and tab content fields. A tabbed content template has been set up called "Tabbed Content" with all settings defined and sample content to start with.
Settings
Tab Position: Should the tabs show on top of the content or to the left: Default Top.
Additional Settings
Show full width?: Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?: Should the gutters show for this layout. Default to Yes.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Background Colour: The background colour of the layout. Default to White.
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Mobile Style: How would you like the tabs to display on mobile, tabbed or stacked. Default tabs.
Layout: 50% 50%
Two columns 50% 50% layout at desktop
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Bootstrap Column 1: Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute: Unique data attribute used for referencing the layout.
Show full width?: Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?: Should the gutters show for this layout? Default to Yes.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Section background colour: The background colour of the full-width section (Edge to edge). Defaults to white
Background Colour: The background colour of the layout. Default to White.
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Reverse Mobile Order: Should this layout be reversed on mobile? Useful for alternating 50/50 content layouts.
Layout: 33% 33% 33%
Three columns set at 33% 33% 33% on desktop.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Bootstrap Column 1: Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 3: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute: Unique data attribute used for referencing the layout.
Show full width?: Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?: Should the gutters show for this layout. Default to Yes.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Background Colour: The background colour of the layout. Default to White.
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Layout: 25% 25% 25% 25%
Four columns set at 25% 25% 25% 25% on desktop.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Bootstrap Column 1: Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 3: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 4: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute: Unique data attribute used for referencing the layout.
Show full width?: Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?: Should the gutters show for this layout. Default to Yes.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Background Colour: The background colour of the layout. Default to White.
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Layout: Banner SVG Cutout Overlap
A single column that by default is 100%
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Background Image Desktop: The main image to fit the whole background of the layout (man in the background below).
Background Image Mobile: The image that should display on mobile. (image goes to the top of the layout, see image below ).
Cutout Image: If a cutout image is supplied then this will appear on tablet devices upwards. Should be in a .png format.
SVG Colour: The colour that you would like the SVG to be Default. to Light Blue.
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Layout: Banner Lifestyle Badge
A single column hero layout with badge, image and SVG Option
Category: Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Content within the left layout represents the content that you would like to appear within the main part of the hero.
Content to the right of this layout represents information to appear within the badge.
Layout Options
Background Image Desktop: The main image to fit the whole background of the layout (man in the background below). Minimum width should be 1200px.
Background Image Mobile: The image that should display on mobile. (image goes to the top of the layout, see image below ).
SVG Colour: The colour that you would like the SVG to be Default. to Light Blue.
Settings are available by clicking on the layout settings in the top right of the layout.
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px.
Margin Top: Margin top for the layout. Default to 60px.
Margin Bottom: Margin bottom for the layout. Default to 0px.
Show Badge: Do you want the badge to appear within this hero. Default to Yes.
Mobile Alignment: Alignment of text content on mobile. Default to Center.
Layout: Banner Image Overlap
Full width layout with a background image on the right, and space for content on the left.
Category: Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The content section allows you to select any field to put within the header. Recommended to use headers, rich text and buttons.
Layout Options
Background Image Desktop: The image to use to the right of content on desktop, default to overlap container, this should be a png image or similar for transparency.
Background Colour: The colour of the background for this layout. Default Light Grey.
Settings are available by clicking on the layout settings in the top right of the layout.
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px.
Margin Top: Margin top for the layout. Default to 60px.
Margin Bottom: Margin bottom for the layout. Default to 0px.
Layout: Banner Curved Image
Full width layout with a background image on the right, and space for content on the left.
Category: Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The content section allows you to select any field to put within the header. Recommended to use headers, rich text and buttons.
Layout Options
Background Image Desktop: The image to use to the right of content on desktop.
Background Image Mobile: The image to use at the top of the content on mobile.
Background Colour: The colour of the background for this layout. Default Light Grey.
Settings are available by clicking on the layout settings in the top right of the layout.
Settings
Margin Top: Margin top for the layout. Default to 60px.
Margin Bottom: Margin bottom for the layout. Default to 0px.
Layout: Full Page Modal
Full Page Modal layout
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Modal ID: The id that is applied to this modal. Use this id to trigger this modal to open on fields such as buttons, hyperlinks etc.
Notes
Create a nested layout and use layouts such as 50%/50% or 25%/25%/25%/25%
Layout: Image Banners
Full width layout with curved image and content.
Category: Sections - Waterlogic Layout.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Image Position: Should the image appear to the left or right? Default to Right.
Image Size: Is the image small or large? Default to Large.
Settings are available by clicking on the layout settings in the top right of the layout.
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px.
Margin Top: Margin top for the layout. Default to 60px.
SVG Colour: The colour of the banner. Default to Dark Blue
Data-UID: A unique ID of the container for skip to links
Layout: Multi Hero Slider
A single column hero with multiple hero sections which slide.
Category: Sections - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The Multi Home Slider Areas is designed to use the the Hero Layouts only:
Banner SVG Cutout Overlap
Banner Lifestyle Badge
Banner Image Overlap
Banner Curved Image
Adding these layouts will inherit the default settings for these as defined if they were to be used by themselves and will need to be adjusted accordingly (padding and margin mainly). Any layout added within the multi hero slider will need to be added within a nested layout.
A pre-configured template for this has already been set up for this under Templates -> Sections - Waterlogic Heros -> Multi Hero Slider. Documentation Can be found here.
Settings:
Data-UID Attribute: Unique data attribute used for referencing the layout.
Padding Top: Padding top for the layout. Default to 0px.
Padding Bottom: Padding bottom for the layout. Default to 0px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Negative Margin: Ability to offset layout margin. Default to 0px
Layout: In Page Slider Content
In Page Media Slider Layout
Category: Sections - Sections - Waterlogic Gallery and Sliders.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
This layout should act only as a "Container" for the In Page Media Slider Items:
In Page Slider Content
In Page Slider Thumbnail
Adding these layouts will inherit the default settings for these as defined if they were to be used by themselves and will need to be adjusted accordingly (padding and margin mainly).
A pre-configured template for this has already been set up for this under Templates -> Sections - Waterlogic Gallery and Sliders -> In Page Slider. Documentation Can be found here.Layout: Midpage Multi CTA Layout
Default layout for Midpage Multi CTA Banner
Category: Sections - Waterlogic Call to action banners.Usage: Used specifically with Midpage Multi CTA Links field in Midpage multi CTA Banner template.
Layout options
Background colour:
Change the background colour of the banner, by default it is light grey. When selecting Dark blue text colour automatically changes to white.
Margin top
Space between the top of the layout and the bottom of the layout above
Margin bottom
Space between the bottom of the layout and the top of the layout below
Data-UID:
A unique ID of the container for skip to links
Related
Field: Midpage Multi CTA Links Template: Midpage multi CTA Banner Layout: Circle image card
Card with content and a circular image on the right
Category: Sections - Waterlogic Call to action banners.Usage: Used specifically with Circle image card right templateNotes: Must be used as a nested template as the layout does not contain container/ rows or columns
Layout Options
Image
Select an image for the card. Ideally, you should use a square image as the layout will zoom crop the chosen image to 640x640.
Image alt text
Alternative text for image
Image location
Option to display the image on top when viewing layout on a tablet device. Defaults to right
Data-UID
A unique ID of the container for skip to links
Related
Template: Circle image card rightLayout: Contact banner
Styling layout for Contact banner
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.htmlNote: Must be used with a nested layout. This layout does not container containers/ rows or columns.
IMPORTANT
This layout must be included as a nested layout within a 100, 50/50, 33/33/33 or 25/25/25/25 layout for it to work correctly.
Layout options
Font Awesome icon
Insert a font awesome icon from https://fontawesome.com/cheatsheet. Be sure to include the icon type. For example far fa-phone. FAR is the icon type. See the cheat sheet for different types.
Data-UID
A unique ID of the container for skip to links
Related pages
Template: Contact bannerLayout: Call out banner layout
A call to action banner that grabs user attention with uniquely cropped SVG and image design
Category: Waterlogic Call to action banners.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout options
Margin top
Space between the top of the layout and the bottom of the layout above
Margin bottom
Space between the bottom of the layout and the top of the layout below
Padding top
Space between the top of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-top
Padding bottom
Space between the bottom of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-bottom
SVG colour
Colour of the SVG mask
Image
Background image of the component
Aside text colour
Colour of aside text that resides in the SVG
Section background colour:
Change the background colour of the banner, by default it is transparent
Data-UID
A unique ID of the container for skip to links
Related pages
Template: Call out bannerLayout: Pre-footer CTA
A call to action banner that sits just above the site footer and used to direct users to take additional actions
Category: Waterlogic LayoutsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
This layout has two columns, typically the left-hand column is used for a rich text field while the right-hand column is used for the call to action buttons.
Layout options
Setting
Description
Default
Section background colour
Change the background colour of the banner, by default it is transparent
Blue dark
Text colour
Font color
White
Padding top
Space between the top of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-top
45px
Padding bottom
Space between the bottom of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-bottom
45px
Data-UID
A unique ID of the container for skip to links
Related pages
Template: Pre-footer CTA TemplateLayout: 100% empty
An empty layout with a wrapper for additional Bootstrap classes
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The 100% empty layout is designed to be used within Nester layouts. It removes all columns, containers and rows and provides an empty layout. This should not be used on its own as it will not align elements correctly.
Settings
Setting
Description
Default
Section classes
Add Bootstrap classes to the section wrapper i.e. mb-5 bg-light etc
Data-UID
A unique ID of the container for skip to links
Layout: Centre Product Feature
Layout with featured image in middle with content to left and right.
Category: Sections - Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The content section allows you to select any field to put within each area. Recommended to use headers, rich text and buttons.
Layout Options
Settings are available by clicking on the layout settings in the top right of the layout.
Data-UID Attribute: Unique data attribute used for referencing the layout.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Margin Top: Margin top for the layout. Default to 60px.
Margin Bottom: Margin bottom for the layout. Default to 0px.
SVG Colour: The Colour of the SVG area (content in area one/top left on the layout).
Layout: Hyperlink block
A layout with 3 columns which produces 3 shadow boxes on the front end
Category: Waterlogic LayoutsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout options
Setting
Description
Default
Bootstrap Column 1
Adjust the size of the column using bootstrap classes
col-lg-4
Bootstrap Column 2
Adjust the size of the column using bootstrap classes
col-lg-4
Bootstrap Column 3
Adjust the size of the column using bootstrap classes
col-lg-4
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Show Gutters?
Show Bootstrap gutters
Yes
Vertical Align?
Vertically align the columns
No
Text colour
Font colour
White
Background Colour
Section background colour
Transparent
Block background
Background colour if each individual block
None
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Section classes
Add additional classes to the section
Additional container classes
Add additional classes to the container
Justify content
Justify the columns horizontally on the page
Usage
We recommend that this layout is used with the following fields:
Richtext
Hyperlink repeater
Spacer
With 30px margin-bottom
Hyperlink
With link colour dark grey
Related pages
Template: Hyperlink Blocks
Layout: Banner SVG Product Overlap
A single column set to 100 of column width with product images above.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Image 1: The main image to fit above within the banner.
Image 2: Secondary image that sits beside Image on If supplied.
Content area allows you to add any field to this section. Designed initially to use headings and buttons. See example below:
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Data-UID: A unique ID of the container for skip to links
Layout: Banner Image Deep
A single column banner with image to right or left.
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Background Image Desktop: The image to display on desktop.
Background Image Mobile: The image to display on mobile.
Image Position: Should the image on desktop display to the left of the content or right? Default right.
Content area allows you to add any field to this section. Designed initially to use headings and buttons and WL Dashed Icon List. See example below:
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Section Background Colour: The colour of the outer section for this full width layout. Default Light Grey.
Data-UID: A unique ID of the container for skip to links
Layout: Banner Stacked Icon
A single column banner with image to right or left.
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Background Image Desktop: The image to display on desktop.
Background Image Mobile: The image to display on mobile.
Image Position: Should the image on desktop display to the left of the content or right? Default right.
Content area allows you to add any field to this section. Designed initially to use headings and buttons and WL Dashed Icon List. See example below:
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Section Background Colour: The colour of the outer section for this full width layout. Default Light Grey.
Layout: Hero 5 - Variable Columns
Hero 5 - Variable column layout for heros.
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
You can create a hero area with variable column widths. By default the column widths are 50/50 in width but can be changed using the Bootstrap Column 1 and Bootstrap Column 2 settings. For documentation on changing column widths using Bootstrap classes see http://websitedocs.waterlogic.com/books/content-blocks/page/grid-layout
Settings
Bootstrap Column 1: Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute: Unique data attribute used for referencing the layout.
Show full width?: Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?: Should the gutters show for this layout. Default to Yes.
Vertical Align?: Should the content within this layout show vertically aligned. Default to Yes.
Background Colour: The background colour of the layout. Default to White.
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
Reverse Mobile Order: Should this layout be reversed on mobile? Useful for alternating 50/50 content layouts.Layout: Nested Empty Layout
An empty layout with a wrapper for additional Bootstrap classes
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The Nested Empty Layout is designed to be used within only Nester layouts. It removes all markup and allows you to add nested fields. This should not be used on its own as it will not align elements correctly.Layout: 100%
Single column layout
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Bootstrap Column
Adjust the size of the column using bootstrap classes
col-12
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Show Gutters?
Show Bootstrap gutters
Yes
Vertical Align?
Vertically align the columns
Yes
Section background colour
Background colour of the full-width section
Transparent
Container background Colour
Section background colour
Transparent
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Negative margin
Add a negative margin to the bottom of the section, useful for adjusting the base padding when using background colours
Remove container and row
Add additional classes to the section
Additional Section classes
Add additional classes to the section
Justify content
Justify the columns horizontally on the page
Usage
Use this layout for full-width section
Layout: Category sidebar
A layout with a dynamically generated category link list and content/ sidebar sections
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Figure 1
The smaller section on the left is the sidebar section, here you can add in Product filters, sidebar call to actions and sidebar help text. On the right is the main content area where you'd typically add product collection fields and image banners.
The Category links are automatically created based on parent, sibling and neighbouring resources so you don't have to add any additional fields in the sidebar section, it can be left blank.
Layout Settings
Data-UID: A unique ID of the container for skip to links
Parent ID to build category menu: For the category menu to work correctly on nested pages, it is important to enter the parent ID to generate the links. For example, using Figure 3, if this layout was being used on the Cups resource then the parent ID of the cups resource is required to build a menu that contains related categories.
Working example
Figure 2
Figure 3
In the working example above you can see that we are using sidebar filters and a hero to produce a simple category page with sidebar links.Layout: Variable Columns
Variable column layout
Category: Templates - Sections - Waterlogic Layout.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
By default, the column widths are 50/50 in width but can be changed using the Bootstrap Column 1 and Bootstrap Column 2 settings. For documentation on changing column widths using Bootstrap classes see http://websitedocs.waterlogic.com/books/content-blocks/page/grid-layout
Settings
Use as hero?
Use this variable column layout as a Hero section, this adds in-hero classes which adjust the look of the layout across mobile and desktop.
Bootstrap Column 1
Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2
Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute
Unique data attribute used for referencing the layout.
Show full width?
Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters?
Should the gutters show for this layout? Default to Yes.
Vertical Align?
Should the content within this layout show vertically aligned. Default to Yes.
Background Colour
The background colour of the layout. Default to White.
Add background to row?
Add the background colour to the section or to the row, if added to the row then rounded corners are added to the section for a stylised effect
Padding Top
Padding top for the layout. Default to 45px.
Padding Bottom
Padding bottom for the layout. Default to 45px
Margin Top
Margin top for the layout. Default to 60px
Margin Bottom
Margin bottom for the layout. Default to 0px
Reverse Mobile Order
Should this layout be reversed on mobile? Useful for alternating 50/50 content layouts.
Layout: Page scroll banner
A blue background floating 4 column layout to be used with WL Icon CTA scroll links
Category: Waterlogic layoutsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
The page scroll banner is specifically designed to float above the previous section on the page, for example, in the image below the Page scroll banner floats over the hero making the links standout and helps draw users attention to different sections within the resource.
Layout: Button group layout
Group buttons together inline on desktop and block on mobile
Category: Waterlogic fieldsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
To use this layout, first, insert a nested layout field in your layout, then selected Button group layout. YOu can then enter buttons into this layout On the frontend Javascript will determine if the buttons should be inline or stacked depending on screen width.
Layout: Side panel layout
Side panel layout
Category: Waterlogic Articles.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
This layout is typically only used for an Article Resource Section, the layout provides two columns for adding fields and nested layouts. The smaller column on the right is specifically designed to hold the Side Panel field.
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Bootstrap Column 1
Adjust the size of the column using bootstrap classes
col-12 col-lg-9
Bootstrap Column 2
Adjust the size of the column using bootstrap classes
col-12 col-lg-3
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Show Gutters?
Show Bootstrap gutters
Yes
Vertical Align?
Vertically align the columns
Yes
Section background colour
Background colour of the full-width section
Transparent
Container background Colour
Section background colour
Transparent
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Negative margin
Add a negative margin to the bottom of the section, useful for adjusting the base padding when using background colours
Reverse mobile order
Reverse the order of the columns on mobile
No
Layout: Call out heading
A layout that adds a coloured SVG and eye-catching heading on the left with rich text content on the right
Category: Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings are available by hovering over the field and clicking the cog in the top right
Options
Setting
Description
Default
Heading level
Heading level of heading text | h1-h5
h2
Heading
Text that will reside in the SVG as a heading
Settings
Setting
Description
Default
Looks like
Adjust the size of the heading level
Default
Heading text colour
Text colour of the heading text In the SVG
White text
Background Colour
Background colour of the layout
Transparent
SVG Colour
Colour of the SVG
Dark Blue
Data-UID
A unique ID of the container for skip to links
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
Field: CTA Banner layout
A pre-built call to action banner
Category: Waterlogic - Call to action banners
This layout is a pre-built CTA Banner with heading, richtext and a button added to the nested layout field.
Related pages
Field: CTA Banner
Layout: Image Tabs
Single column layout used with "Image Tab Logos" and "Image Tab Content" field.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Settings
Show Slider Controls? Should the slider controls show within the layout when sliding content? Default to Show.
Additional settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Bootstrap Column
Adjust the size of the column using bootstrap classes
col-12
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Show Gutters?
Show Bootstrap gutters
Yes
Vertical Align?
Vertically align the columns
Yes
Section background colour
Background colour of the full-width section
Transparent
Container background Colour
Section background colour
Transparent
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Negative margin
Add a negative margin to the bottom of the section, useful for adjusting the base padding when using background colours
Remove container and row
Add additional classes to the section
Additional Section classes
Add additional classes to the section
Justify content
Justify the columns horizontally on the page
Usage
This layout is only designed to work with:
Field: Image Tab Logos
Field: Image Tab Content
Layout: Colour split
Two-column layout with a dark blue background colour on the right column and light grey background on left column
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Additional settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Layout: Hero form cut-out
Three column layout for use as a hero with a form and trusted logos
Category: Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Additional settings are available by hovering over the field and clicking the cog in the top right
How to use
To use this template it is important that the different layout content areas contain the right content. The first (top left) should contain Headings, text, and content related fields. Second (top right) should only have a trusted logos field. And the third (bottom left) should only contain a form. This form will also be added to a mobile modal and a button will automatically show below the content area allowing users to open that form modal.
Options
Option
Description
Default
Hero image
Image to use for Hero
Hero image alt
Alt text for hero image
Settings
Setting
Description
Default
Form columns
Bootstrap columns for the desktop form
col-12 col-xxl-10 col-xl-9
Image size
Size of the image and the trusted logos bar below. Changes the width/ height of image slightly to adjust for image type
Larger
Data-UID
A unique ID of the container for skip to links
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Form modal button colour
On mobile/ tablet a button will show that will trigger the modal containing the form. The button is lexiconed - Request a quote. You can select the colour of the button
Orange
Layout: Hero form product right
Three column layout for use as a hero with a form and trusted logos
Category: Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Additional settings are available by hovering over the field and clicking the cog in the top right
How to use
To use this template it is important that the different layout content areas contain the right content. The first (top left) should contain Headings, text, and content related fields. Second (top right) should only have a trusted logos field. And the third (bottom left) should only contain a form. This form will also be added to a mobile modal and a button will automatically show below the content area allowing users to open that form modal.
Options
Option
Description
Default
Hero product image
Product Image to use for Hero
Hero product image alt
Alt text for hero product image
Second product image
A second image to use in the hero
Second product image alt
Alt text for second image
Settings
Setting
Description
Default
Form columns
Bootstrap columns for the desktop form
col-12 col-xxl-10 col-xl-9
Data-UID
A unique ID of the container for skip to links
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Form modal button colour
On mobile/ tablet a button will show that will trigger the modal containing the form. The button is lexiconed - Request a quote. You can select the colour of the button
Orange
Layout: Banner Image Badge
Four column layout for use as a hero with a form and trusted logos and feature badge
Category: Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Additional settings are available by hovering over the field and clicking the cog in the top right
How to use
To use this template it is important that the different layout content areas contain the right content. The first (top left) should contain Headings, text, and content related fields. Second (top moiddle) should only contain a form. The third (top right) should be content for the badge and should contain only rich text. Fourth (bottom), should contain only trusted logos.
Options
Option
Description
Default
Background Image
Background Image to use for Hero
Settings
Setting
Description
Default
Show Badge?
Should the badge show on this hero banner?
Yes
Badge Colour
Background colour of the badge if "show badge" is set to Yes.
Green
Image Position
The position of the image within the banner (right or left)
Left
Layout: Gradient image
Single column layout with a background image and a dark gradient overlay
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Additional settings are available by hovering over the field and clicking the cog in the top right
Options
Option
Description
Default
Desktop image
Background Image to use for desktop
Mobile image
Background Image to use for mobile
Settings
Setting
Description
Default
Text colour
Colour of text
White
Align text
Align content (Can be overridden on RTE)
Centre
Data-UID
A unique ID of the container for skip to links
Size of section
Adjust the height of the background image: Small | Medium | large
Small
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
Bootstrap Column
Adjust the size of the column using bootstrap classes
col-lg-8 offset-lg-2
Layout: Branded Slider Image
Branded slider layout. Building layout using branded slider image and branded slider content field.
Category: Waterlogic Layouts
This layout is the outer container for creating the branded slider image content, By default the slider layout contains the Branded Slider Image field to the left and Branded Slider Content to the right; see screenshot:
You can add as many slider items that you need. Each Image on the left required content on the right and needs to be in the same order. If there is only one item then the slider navigation does not show.
Layout Settings
Setting
Description
Default
Data-UID
A unique ID of the container for skip to links
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
60px
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Additional classes for section
Add additional classes to the section
Layout: Submit CV Form
Layout: Submit CV Form
Full width search banner layout, can be used within careers area of WL sites
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Example output:
Defining the direct of global search
You can configure the search type for careers within context settings for each context. Direct search uses only department and global search uses every context and shows the country selector.
Setting Name -> career_show_global (Show Global Search, Default No)
Namespace -> Waterlogic
Topic -> Career
This needs be set to this resource within this context.
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Additional classes
Add additional classes to the section
Layout: Career Search Banner
Layout: Career Search Banner
Full width search banner layout, can be used within careers area of WL sites
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Example output:
Defining the direct of global search
You can configure the search type for careers within context settings for each context. Direct search uses only department and global search uses every context and shows the country selector.
Setting Name -> career_show_global (Show Global Search, Default No)
Namespace -> Waterlogic
Topic -> Career
This needs be set to this resource within this context.
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Additional classes
Add additional classes to the section
Layout: Job application footer form
Single column layout with a background image
Category: Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Figure 1
Options
Option
Description
Default
Desktop image
Background Image to use for desktop
Mobile image
Background Image to use for mobile
Layout: Content Card Landscape
Content Card Landscape
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Content card landscape is available to use within a nested layout. You can add content such as rich text, tooltip, lists and images within the content card.
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Setting
Description
Default
Heading
Title heading for the content card
Right Heading
Supporting right heading
SVG Icon
SVG icon selector. Icon appears next to heading when selected.
none
SVG Icon Colour
Colour of the SVG Icon
Blue Light
Example Output:
Layout: Cost Calculator Results
Cost Calculator Results
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Cost calculator results layout is intended to be used on a resource that the Cost Calculator Field points to. The results from the form submission appear within this layout.
figure 1
Settings are available by hovering over the field and clicking the cog in the top right
figure 2
Settings
Setting
Description
Default
Form Resource ID
The returning URL the user goes to this page without submitting the form. This should be the ID of the resource where the form sits on the context.
Admin Tooltip
Tooltip content for "showing" admin calculations
Admin Icon
Icon that displays beside the admin title block in the results.
Storage Tooltip
Tooltip content for "showing" storage calculations
Storage Icon
Icon that displays beside the storage title block in the results.
Security Tooltip
Tooltip content for "showing" security calculations
Security Icon
Icon that displays beside the security title block in the results.
Productivity Tooltip
Tooltip content for "showing" productivity calculations
Productivity Icon
Icon that displays beside the productivity title block in the results.
Example Output:
Global Settings for the calculator (context based and lexicons)
This is a preconfigured form and uses settings and variables in:
Website Settings (found on the Modx dashboard, see figure 3)
figure 3
Under website settings go to Cost Calculator:
figure 4
To manage settings for other contexts, select context under the Choose Context dropdown. (seen in image above).
Lexicons
Tooltips, placeholders and general content for this form and the results fully use lexicons. To access lexicons go to the "cog" icon at the top right of the Modx dashboard and select Lexicons.
figure 5
To find lexicon values for cost calculator, select Waterlogic -> cost_calculator -> en (namespace -> topic -> language) where "en" is the language to are going to edit.
figure 6
Fields
Fields are your types of content. See here for settings for each that is available to you.
Field: WL Icon
Select an icon and its colour.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Dropdown.html
Settings
Select the icon from the dropdown list (if extra icons are required these will need to be added in.)
Icon Colour: Select the colour from the pre-defined list of colours.
Field: Heading
HTML heading, with options to choose the colour, alternate style, and alignment.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_Heading
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Heading Colour: Select the colour from the pre-defined list of colours.
Looks Like: Apply a specific style class to this heading, making it look like another.
Align: Should the text be left (default) centre or right-aligned.
Note: Not all colour combinations may work due to only those used throughout the design process being catered for.
Field: WL Button
WL Button.
Ability to select a button with content blocks, for use with resource ID, External URL, Modal or Scroll to ID
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings:
Settings
Button Text: The text to display within the button.
Button Type: Where should this button link go? Options:
Resource ID - The resource ID that the button should link to
External URL - An external url (e.g. https://www.google.co.uk)
Modal - The ID of the modal popup as defined in the Modal Popup content block
Scroll to ID - The section that you would like this button to scroll to. Defined by Layouts
Add to quote - This setting adds additional data to the button which allows the product to be added to the quote builder. By default, the button will reference the current resource ID to add to the quote, however, if the button is being used on a non-product page this will not work, therefore it is HIGHLY recommended that you always reference the product resource ID in the button destination field when using this setting.
Chat Popup - This setting adds logic to the button to allow the chat popup to appear. Each context must have chat JS applied to trigger chat to open.
Relative URL - This will point to a file locally within the server relative to the context base_url e.g. for waterlogic.com/en-gb/ the base url is /en-gb/ and if you wanted to include a link to a pdf in the uploads folder the button destination would be uploads/mypdf.pdf. the final output to the site will be /en-gb/uploads/mypdf.pdf
Button Destination: The location where this button should go to. Relevant to the Button Type setting.
Button Colour: The colour of the button. Default Light Blue.
Font Size: Select the text size from the pre-defined list of sizes. Default Regular
Font Awesome Icon: Font Awesome Icon to use to the left of the button text, see (https://fontawesome.com/icons?d=gallery) for icons that can be used. Note: do not add a Font Awesome Icon if you have pointer icon position set to left.
For Example: Star icon (https://fontawesome.com/icons/star?style=solid) the value to be used would be fa-star.
Open in new window?: Should this link open in a new window?
Show Pointer Icon: Should the pointer icon show for this button. Default no.
Pointer Position: If the pointer is set to show as per Show Pointer Icon setting within this field then, where should it be positioned? Note: if pointer position is left, you should not use a Font Awesome Icon.
Alignment: What position should this sit within the layout. Left, right or centre. Default Left.
Field: WL Hyperlink
WL Hyperlink.
Ability to create a hyperlink (outside of rich text) with content blocks, for use with resource ID, External URL, Modal or Scroll to ID
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Hyperlink Text: The text to display within the link
Hyperlink Type: Where should this hyperlink go? Options:
Resource ID - The resource ID that the button should link to
External URL - An external url (e.g. https://www.google.co.uk)
Modal - The ID of the modal popup as defined in the Modal Popup content block
Scroll to ID - The section that you would like this button to scroll to. Defined by Layouts
Relative URL - This will point to a file locally within the server relative to the context base_url e.g. for waterlogic.com/en-gb/ the base url is /en-gb/ and if you wanted to include a link to a pdf in the uploads folder the button destination would be uploads/mypdf.pdf. the final output to the site will be /en-gb/uploads/mypdf.pdf
Hyperlink Destination: The location where this hyperlink should go to. Relevant to the Hyperlink Type setting.
Hyperlink Colour: The colour of the hyperlink. Default Light Blue.
Font Size: Select the text size from the pre-defined list of sizes. Default Regular.
Font Awesome Icon: Font Awesome Icon to use to the left of the hyperlink, see (https://fontawesome.com/icons?d=gallery) for icons that can be used.
For Example: Star icon (https://fontawesome.com/icons/star?style=solid) the value to be used would be fa-star.
Open in new window?: Should this link open in a new window?
Alignment: What position should this sit within the layout. Left, right or centre. Default Left.
Arrow Position: Should the arrow display to the left or right of the link. Default Right.
Additional Classes: Additional classes that apply to the anchor tag. Default to empty.
Field: WL Table
WL Table
HTML table with multiple options used for specifications, comparisons etc.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Settings are available by hovering over the field and clicking the cog in the top right
Settings
Table Width: The default width of the table. Options include 100% Width, Float Left, Center Align, Float Right. Default to 100% Width.
Is First Row Header?: Should the first row act as an HTML table header? Default to Yes.
Table Header Colour: If the first row is set to show as a header, what colour should it be? Default to Dark Grey.
Is Last Row Footer?: Should the last row act as an HTML table footer? Default to Yes.
Table Footer Colour: If the last row is set to show as a footer, what colour should it be? Default to Light Grey.
Cell Vertical Alignment: Ability to set the vertical alignment of all cells (top, middle, bottom) within the table, Default to Middle.
Cell Horizontal Alignment: Ability to set the horizontal alignment of all cells (Center, Right, Left) within the table. Default to Center.
Show row title?: Set the first cell within each row as a bold title. Default to No.
Should The Row Title Be Fixed On Mobile?: On mobile the option to fix left row title (Also need to set Show Row Title to yes). Useful when table has many columns.
Stack Columns On Mobile?: Should the columns stack beneath each other on mobile? Should not be used when Show Row Title is set to Yes. Default No.
Show Alternating Row Colour?: Turn row colour styling on or off. Default to Yes.
Field: Image
Image.
Ability to add an image to content block layouts, with desktop, tablet and mobile crops.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_Image+%28%2B+Image+with+Title%29
Settings
Show Image As A Circle: If set to yes then this will show as a circle. Default to no. (For this to work, image should have a square crop - see Image cropping below for best practices).
Image Alignment: Where should the image align within the layout? Default to Align Centre.
Responsive Size: At tablet and mobile viewports should the size of the image be reduced? Default to reduced.
Image Cropping
There is the option to set up crops on images for mobile, tablet and desktop. When an image is selected the "popup" will appear to give you the option to set these.
Recommended crops
Free: This crop allows you the full flexibility of cropping around the image.
Original: This crop takes the current aspect ratio of the image.
1:1: This crop will provide a square image and should be used with circle images (see below).
Making images work with the "Show Image As A Circle" setting
For images with the setting Show Image As A Circle, the image crop needs to be 1:1 as this creates a square image and needs to be set for all viewports.
Field: Rich Text
Rich Text.
Ability rich text (content, images, links, lists etc.) within a layout.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_Rich+Text
WL Style RTE: Should the rich text editor be styled with all Waterlogic styles, e.g list items. Default to Yes
Section ID: OPTIONAL. Give this text field a section ID for using with Skip links
Additional Settings are available by hovering over the field and clicking the cog in the top right:
Use As a Show More: If 'Use As a Show More?' is set to yes, an open/close dropdown is added at the top of the RTE content, that when opened, shows the RTE content.
Field: Font Awesome Icon
Font Awesome icon.
Ability to create a Font Awesome icon with alignment, colour and size options.
Category: Default.Font Awesome Documentation: https://fontawesome.com/icons?d=gallery
Settings:
Font Awesome Icon: The icon which you would like to appear within this field. See https://fontawesome.com/icons?d=gallery for available icons.
To use a font awesome, search within the Font Awesome website as provided above. Once you have found the icon required, find the fa-(icon name) to use:
Icon Size: Choose between small, medium and large.
Icon Colour: The colour of the Icon. Default Blue Light.
Icon Alignment: How the icon should align within the layout. Default Centre.
Field: WL Hyperlink Repeater
WL Hyperlink Repeater.
Ability to create multiple hyperlinks in a list (outside of the rich text editor) with content blocks, for use with resource ID, External URL, Modal or Scroll to ID
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings: (as found within field cog, highlighted in blue)
Repeater Inputs: You can add multiple hyperlinks, by default when adding this field there is one ready to go. To add others then click the Add Item, which will create another hyperlink to the list.
Hyperlink Type: Where should this hyperlink go? Options:
Resource ID - The resource ID that the button should link to
External URL - An external url (e.g. https://www.google.co.uk)
Modal - The ID of the modal popup as defined in the Modal Popup content block
Scroll to ID - The section that you would like this button to scroll to. Defined by Layouts
Hyperlink Text: The text to display within the link
Hyperlink Destination: The location where this hyperlink should go to. Relevant to the Hyperlink Type setting.
By default, if no repeater fields are present then 5 of the resources neighbouring pages are displayed as links. For example, if a hyperlink repeater is used on a product category page then 5 for its sibling category pages will be displayed.
Additional Settings
Hyperlink Colour: The colour of the hyperlink. Default Light Blue.
Font Size: Select the text size from the pre-defined list of sizes. Default Regular.
Font Awesome Icon: Font Awesome Icon to use to the left of the hyperlink, see (https://fontawesome.com/icons?d=gallery) for icons that can be used.
For Example: Star icon (https://fontawesome.com/icons/star?style=solid) the value to be used would be fa-star.
Open in new window?: Should this link open in a new window?
Alignment: What position should this sit within the layout. Left, right or centre. Default Left.
Field: WL List
WL List.
Ability to create a simple list with size and bullet stlying within a layout.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_List+%28%2B+Ordered+List%29
Additional Settings: (as found within field cog, highlighted in blue)
Look Like?: Option to style the list item size, (e.g small, Regular, h3, h4 and h5). This gives the effect of of one of these options but still maintains the list HTML. Default is Regular.
Style Bullet Icon?: Should this bullet list be styled as with the WL chevron? Default No.
Mobile alignment: Where should the the list be aligned for this button? Left, centre or right?. Default Centre.
Field: WL List Ordered
WL List.
Ability to create a simple ordered list with size and bullet stlying within a layout.
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_List+%28%2B+Ordered+List%29
Additional Settings: (as found within field cog, highlighted in blue)
Look Like?: Option to style the list item size, (e.g small, Regular, h3, h4 and h5). This gives the effect of of one of these options but still maintains the list HTML. Default is Regular.
WL Bullet Style: Should this bullet list be styled as with the WL chevron? Default No.
Mobile alignment: Where should the the list be aligned for this button? Left, centre or right?. Default Centre.
Field: Phone Dropdown
WL Phone Dropdown.
Phone dropdown area with new and existing customer numbers.
Category: WL Fields.
Phone dropdown which shows new and existing customer information, controlled by lexicon for language and context settings for numbers.
Additional Settings: (as found within field cog, highlighted in blue)
Show Shadow?: Should the shadow show on the dropdown. Recommended when background is applied over layout.
Field: Video
Video
Simple video field, with the option to put Vimeo or Youtube video onto the resource.
Category: Default.
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Video Type: The video source (where the url is hosted from, Youtube or Vimeo). Default Youtube
For Youtube Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for https://www.youtube.com/embed/68uftTvRKCY the value to put into the video field would be 68uftTvRKCY). The only value required is the ID.
For Vimeo Videos:
To show a video on the WL site from Vimeo, you need to obtain the video id (i.e for ) the value to put into the video field would be 441349745). The only value required is the ID.
Field: Video Modal
Video Modal
A video modal. Activated by "Id". This can be on a hyperlink or button
Category: Waterlogic Fields.
Settings
Video Type: The video source (where the url is hosted from, Youtube or Vimeo). Default Youtube
For Youtube Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for https://www.youtube.com/embed/68uftTvRKCY the value to put into the video field would be 68uftTvRKCY). The only value required is the ID.
For Vimeo Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for ) the value to put into the video field would be 441349745). The only value required is the ID.
Video URL: the ID's of the video as advised above, different for both Youtube and Vimeo.
Modal ID: A unique ID to us as a reference for opening this video modal. The modal can be triggered to open from hyperlinks and buttons (see http://websitedocs.waterlogic.com/books/content-blocks/page/field-wl-button for buttons and http://websitedocs.waterlogic.com/books/content-blocks/page/field-wl-hyperlink for hyperlinks). This needs to be be unique to any other ID on the page.
Field: Fixed Icon Label
WL Fixed Icon Label.
An icon and text area with the ability to choose from FA icons and WL Icons.
Category: Waterlogic Fields.
Settings
Style as: The style of the Icon label default to h4
Icon: An icon from the Waterlogic Icon Set.
Font Awesome Icon: The icon which you would like to appear, If selected then this overrides the Icon value. See https://fontawesome.com/icons?d=gallery for available icons.
To use a font awesome, search within the Font Awesome website as provided above. Once you have found the icon required, find the fa-(icon name) to use:
Icon Colour: The colour of the Icon. Default Dark Blue.
Heading: The content to sit next to the icon selected.
Heading Colour: The colour of the heading. Default inherited text colour.
Items Per Row : How many items per row? Default to 3
50/50 on mobile: should each repeater item be 50/50 on mobile? By default each item will be 100% and this usually works and allows content to flow the whole width.
Field: WL Icon Text
WL Icon Text.
Select icon, heading and text for this field. Various customisation options available.
Category: Waterlogic Fields.
Additional settings are available by hovering over the field and clicking the cog in the top right
Settings
Icon: Select the icon from the dropdown list (if extra icons are required these will need to be added in.)
Heading: The main heading for this field. appears beside/below icon depending on "Icon Position" field setting.
Text: The text to appear below the heading content.
Icon Position: Where should the icon appear within the field. Top or left of the content. Default Top.
Icon Colour: Select the colour from the pre-defined list of colours. Default Blue Light.
Background Colour: Change the background colour to any of the WL colours. Default to White. If deviation to white would recommend to use, Dark Blue, Light Blue or Light Grey.
Field: Product Hero Details
Product Hero Details
Product Hero information, specifications and call to actions. Information pulled from Template variables on page.
Category: Waterlogic Product Items.
This field is designed to fit into the hero area.
Settings
TBC: Settings TBC, will be automatic from product template variables.
Field: WL Icon Banner
WL Icon Banner.
This field repeater is designed to ideally fit within a 100% container. Each repeater item having option having the Icon text options for editing.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Repeater Settings
Each repeater item has the ability to customise the icon text and positioning.
Heading: The main heading for this field. appears beside/below icon depending on "Icon Position" field setting.
Text: The text to appear below the heading content.
Icon: Select the icon from the dropdown list (if extra icons are required these will need to be added in.)
Icon Position: Where should the icon appear within the field. Top or left of the content. Default Top.
Icon Colour: Select the colour from the pre-defined list of colours. Default Blue Light.
Text Colour: A text colour override to be used if darker colours are set as a background on the outer layout.
Settings
Columns Per Row: How many items should display within each row. Default to three.
Notes
Background colour can be set for this from the layout (Change the background colour to any of the WL colours. Default to White). As defined the best layout for this field is 100% as column widths can be setting within this field.
Field: Off Page Slider
Off Page Slider.
Large slider appearing off screen with option for caption text on each image.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Repeater Settings
Each repeater item has the ability to customise image, video and caption text.
Image: The main image that you would like to appear within the repeaters.
Video: If you would like a video to appear, video ID (see Video field docs for obtaining ID's http://websitedocs.waterlogic.com/books/content-blocks/page/field-video)
Video Type: If you have entered a video id into the Video setting, select the source of the video. Default to Youtube.
Caption Text: The text that will appear below the image/video. Default to Empty.
Notes
This field is created at its most basic and requires additional settings to be applied to the outer layout to work effectively. You can use the Off Page Slider Layout Template for preconfigured settings.
To use this field, you need to use the 100% layout. Within the 100% layout settings Bootsrap Column 1 setting values needs to be "col-12 col-lg-10 offset-lg-1 col-wl-8 offset-wl-2" with padding top and bottom set to 0px.
Field: Accessory Product Card
Accessory Product Card.
Product card displaying information about the product from the product resource.
Category: Waterlogic Fields.
Resource ID: The resource ID of the product that you wish to use within this product card. Can be found easily within the Resource menu (the numeric value next to the resource) or within the url e.g (www.waterlogic.com/manager/?a=resource/update&id=13 with the ID being 13).Field: Logo Repeater
Logo Repeater.
This field repeater allows you to show multiple logos side by side within a layout.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Repeater Settings
Each repeater item has the ability to add an image from the WL library, upload an image or choose and image form URL.
URL images are NOT reliable therefore not recommended.
Settings
Items Per Row: How many images should display within each row. Default to three.
Alignment: Alignment of logos. Default:left
White Background: Should each logo have a white background. Useful when logos are not transparent and on a coloured background. Default to No.
Notes
Background colour can be set for this from the layout (Change the background colour to any of the WL colours. Default to White). As defined the best layout for this field is 100% as column widths can be setting within this field.
Field: Media Slider
Media Slider.
Media slider allowing the viewing of image, video and 3D images.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
The easiest way to create a media slider is to add a template which is pre configured with everything ready to add content. Under the layouts you will see Media Slider.
You can change the layout from 100% should it be required by clicking on the layout menu item and selecting Switch Layout.
To add a media slider from scratch you need to choose your layout (e.g 25/25/25/25, 33/33/33, 50/50, 100 etc.). Then create a nested layout:
This will then create a popup which will give you the option to select the Media Slider Field.
The left side of the layout should contain the Media Slider Content and the right hand side of the layout should contain the Media Slider Thumbnail.
Options
Media Slider Content
Each media slider content item has options for image, video and 3D. You can add as many items as required to this repeater by clicking on the Add item button.
Media Slide Type: Select the type of media that you would like to display for this option. (Image, Video, 3D). Default to Image.
Image Alt text: If image is selected what should the alt text be?
Slide Image: If image selected, what image should be used. Image size should have a min height of 600px, with ratio of 1.06.
Video Type: If video is selected as "Media Slide Type", then is the image from YouTube or Vimeo? Default to Youtube.
Video ID: The video ID from Vimeo or Youtube. See Video Field for obtaining ID.
3D Item: The 3D item that you want to display. Select from the dropdown list of options. "Media Slide Type" needs to be set to 3D.
Media Slider Thumbnail
This field allows you to add thumbnails relative to each Media Slider Content. The order of these needs to be the same as those in the Media Slider Content.
Thumbnail Image: The Image that you would like to use as the Thumbnail supporting the slider media content as defined above.
Thumbnail Image Alt Text: The alt text for this image. Default to Page title.
Media Slide Type: What type of media is this thumbnail related to. Adds the media icon type to the thumbnail. Default Image.
Field: Product Specification
Product Specification.
Product specifications displaying information about the product from the product resource.
Category: Waterlogic Fields.
Example specification table:
Specifications for the product, appears within the product page. No settings are required as all information is pulled though from product template variables.
Field: Testimonial Card Text
Testimonial Card Text
Simple testimonial card with quote, logo, author and company name
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Quote Text: The text to display for the quote.
Testimonial Logo: If a logo is relevant (i.e a company logo), then this can be placed here.
Author: The name of the person that has provided the testimonial.
Company: The name of the company. If empty then does not display on front end.
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Quote Position: Should the position of the the quote icon be top or left. Default to Top. (see screenshot below with top and left quote icons as example).
Field: Product Card
Product Card
Product card pulls in information from the resource ID.
Category: Waterlogic Product card.
Product information pulled in automatically from the resource ID selected, must be a product resource to show the correct information.
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Resource ID: The resource ID (product) that you would like to display within this product card.
Image Position: Should the image position be to the left of the product card or top of the product card? Default to Top.
Field: Product Collection
Product Collection
Consists of multiple product / accessory product cards. Product card width across different breakpoints will be automatically determined.
Category: Waterlogic Product Items.
Settings
Limit: How many products would you like to appear within this collection? Default to 12.
Parent ID: The Resource ID of the collection that contains the products or accessories
Field: Testimonial Card Image
Testimonial Card Image
Simple testimonial card with image positioned to the right of content or above content with quote, logo, author and company name.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Background Image: Image to be applied to the testimonial card. Will appear to the top or right of the content depending on the "Background Image Position" setting.
Quote Text: The text to display for the quote
Testimonial Logo: If a logo is relevant (i.e a company logo), then this can be placed here.
Author: The name of the person that has provided the testimonial.
Company: The name of the company. If empty then does not display on front end.
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Background Image Position: Should the position of the the "Background Image" be top or right. Default to Top.
Field: Technology Slider
Technology Slider
Preconfigured technology slider, with all internal content controlled by lexicons.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
To manage the text content within this content block field go to Lexicon Management within the modx manager and update the technology_slider topic for waterlogic lexicons.
Settings
Setting
Description
Default
Item 1 image
Select the image to show for the first silde
Item 1 image alt
Alt text for item 1 image
Item 1 icon
Select a Waterlogic icon
Water cold
Item 1 link resource ID
ID of resource that the slide link will point to
1
Item 2 image
Select the image to show for the second silde
Item 2 image alt
Alt text for item 2 image
Item 2 icon
Select a Waterlogic icon
Water ambient
Item 2 link resource ID
ID of resource that the slide link will point to
1
Item 3 image
Select the image to show for the thrid silde
Item 3 image alt
Alt text for item 3 image
Item 3 icon
Select a Waterlogic icon
Water extra hot
Item 3 link resource ID
ID of resource that the slide link will point to
1
Field: Testimonial
Testimonial
Testimonial as a repeater field. If more than one testimonial is created this field will turn into a testimonial slider.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Quote Text: The text to for the quote
Background Image: Image to be applied to the testimonial card. Will appear to the top or left of the content, depending on viewport.
SVG Colour:
Testimonial Logo: If a logo is relevant (i.e a company logo), then this can be placed here.
Testimonial Logo Alt Text: Alternating text for the testimonial logo.
Author: The name of the person that has provided the testimonial.
Company: The name of the company. If empty then does not display on front end.
To turn this into a slider, click the "add item" button under the testimonial field. This will give you the option to add another slider field.
Field: Section Search
Section Search
A search input field, that returns results, relevant to that section (parent)
Category: Waterlogic Fields.
Heading: The heading that appears above the search area. Default: empty.
Landing Page ID: The resource id where the results are to appear from the search term provided.
Field: Tab Content
Tab Content Repeater
Tab content repeater to be used with "tabs" container only.
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
NOTE: Tabs content repeater is the base start for creating tabbed content within content blocks using the tab title and tab content fields. A tabbed content template has been set up called "Tabbed Content" with all settings defined and sample content to start with.
Repeater Inputs: You can add multiple layouts to the tab content and there should be the same amount of tab content elements as there is tab titles within the tab title field.
Field: In Page Slider Content
In Page Slider Content
In page slider content to be used within the "In Page Media Slider" Layout
Category: Waterlogic Gallery and Sliders.
Note: This Field is designed to be used as part of the "In Page Media Slider" layout only.
Media Slide Type: What type of slide is this? Image or Video. Default to Image.
Slide Image: The main image to use for the slide. Only applicable if Media Slide Type is selected as "Image". For full images, the min height should be 733px and the ratio 1.777. This is also the placeholder image for video if a video is used.
Image Alt Text: Alt text to assist the image if an image is chosen as the "Media Slide Type".
Video Type: If "Media Slide Type" is Video, is the video a Vimeo or Youtube Video? Default to Youtube, and only applicable if video is selected as the Media Slide Type.
Video ID: The Video ID to use for the slide. See (Field: Video)for information on obtaining Youtube and Vimeo IDs.
Field: In Page Slider Thumbnail
In Page Slider Thumbnail
In page slider thumbnails to be used within the "In Page Media Slider" Layout
Category: Waterlogic Gallery and Sliders.
Note: This Field is designed to be used as part of the "In Page Media Slider" layout only.
Repeater Inputs: You can add multiple thumbnail images, by default when adding this field there is one ready to go. To add others then click the Add Item, which will create another hyperlink to the list.
The order of the repeater thumbnails need to be the same as those of the In Page Slider Content field.
Thumbnail Image: The thumbnail image to support the Slide Media.
Thumbnail Image Alternating Text: Alternating text to assist the image if an image.
Field: Contact banner
Pre designed contact banner with dynamic telephone numbers & lexicons
This field inserts a pre designed contact banner with information on how to contact Waterlogic in different countries. Content, phone numbers and email addresses are dynamically added depending on the website language section.
Category: Waterlogic Layouts.
Editor appearance:
Rendered appearance:
Editing content
To update the content for these boxes find the following Lexicon settings in Settings > Lexicons.
TBC contact_banner_phone_box
TBC new_customer_tel_number
TBC existing_customer_tel_number
TBC contact_banner_chat_box
TBC country_opening_hours
TBS country_chat_link
TBC contact_banner_email_box
TBC country_info_email_address
Field: Font Awesome Icon Label
Font Awesome icon.
Font awesome icon aligned left with label.
Category: Waterlogic Fields.Font Awesome Documentation: https://fontawesome.com/icons?d=gallery
Visual:
Settings:
Font Awesome Icon: The icon which you would like to appear within this field. See https://fontawesome.com/icons?d=gallery for available icons.
Label Type: The label size. Default to Heading 5.
Font Awesome Icon Colour: The colour that you would like the icon to be. Default to Blue Dark.
Field: Testimonial Video
Testimonial Video
Simple testimonial video with quote, author and company name
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Video Type: The video source (where the url is hosted from, Youtube or Vimeo). Default Youtube
For Youtube Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for https://www.youtube.com/embed/68uftTvRKCY the value to put into the video field would be 68uftTvRKCY). The only value required is the ID.
For Vimeo Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for ) the value to put into the video field would be 441349745). The only value required is the ID.
Video URL: the ID's of the video as advised above, different for both Youtube and Vimeo.
Quote Text: The text to for the quote
Author: The name of the person that has provided the testimonial.
Company: The name of the company. If empty then does not display on front end.
Field: Midpage Multi CTA Links
Repeater field which inserts links into Midpage Multi CTA Banner
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Field Options
Icon
Select a Waterlogic Icon to use
Hyperlink text
Call to action text for Hyperlink
Hyperlink type
Select what kind of hyperlink to render, Resource ID | External URL | Modal | Section ID
Hyperlink destination
The actual hyperlink. For example: if the type is Resource ID then Destination would be the ID of the resource you want to link to i.e. 1
Global options
Icon colour
Select the colour of the Icon to match the background colour of the layout. Defaults to dark grey. Options: White | Dark grey
Mobile links column count
Select the number of columns for links on mobile. Default 2 columns
Tablet links column count
Select the number of columns for links on tablet. Default Auto
Related
Layout: Midpage Multi CTA LayoutTemplate: Midpage multi CTA Banner
Field: Spacer
Inserts an empty element with settings to add space between other elements
Category: Default
Layout options
Setting
Description
Default
Margin top
Space between the top of the layout and the bottom of the layout above
Margin bottom
Space between the bottom of the layout and the top of the layout below
45px
Padding top
Space between the top of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-top
Padding bottom
Space between the bottom of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-bottom
Additional classes
Insert additional Bootstrap classes
Field: Simple text field
A simple text field with a mini RTE editor
Category: Waterlogic fields
Layout options
Setting
Description
Default
Wrapper class
You can add Bootstrap classes to the wrapper element i.e. mb-5
Field: Testimonial Card Slider
Simple testimonial card with image positioned to the right of content or above content with quote, logo, author and company name.
Similar to Testimonial card image but built as a repeater to give added flexibility for adding testimonials.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings can be found by clicking on the cog at the top right of the repeater field:
Image Position: The position of the image for each testimonial card within the slider. Default: Image Top.
Field Settings:
Background Image: Image to be applied to the testimonial card. Will appear to the top or right of the content depending on the "Background Image Position" setting.
Quote Text: The text for the quote
Testimonial Logo: If a logo is relevant (i.e a company logo), then this can be placed here.
Author: The name of the person that has provided the testimonial.
Company: The name of the company. If empty then does not display on the front end.
Field: Tab Title
Tab Title Repeater
Tab title repeater list to be used with "tabs" container only.
Category: Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
NOTE: Tabs Title repeater is the base start for creating tabbed content within content blocks using the tab title and tab content fields. A tabbed content template has been set up called "Tabbed Content" with all settings defined and sample content to start with.
Repeater Inputs: You can add multiple Headings, by default when adding this field there is one ready to go. To add others then click the Add Item, which will create another hyperlink to the list.
Settings
Heading: The heading for the tabbed content. These should be in the same order as the the tab content information.
Field: WL Dashed Icon List
WL Dashed Icon List.
Simple repeater
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_List+%28%2B+Ordered+List%29
SVG Image: SVG image selector. Choose an icon that you would like to display
SVG Colour: The colour of the SVG icon. Default to Blue Dark
Heading: Heading for the top of the list repeater. Choose the heading type and content to display. Default Heading 2.
Content: Text to appear below the heading.
Additional Settings: (as found within field cog, highlighted in blue)
Dashed underline?: Should the header have a dashed line underneath. Default Yes.
Mobile Accordion?: Display the icon list repeater as an accordion on mobile. Default Yes
Field: Accessory Category Card
Accessory Category Card.
Image and text with link to category resource ID.
Category: Sections - Waterlogic Product Items.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Settings
Resource ID: The Resource ID you would like the Icon and text to link too.
Image: Image representing products/items within the accessory category.
Image Alternative Text: Alternative text to display for the image should the image not load.
Field: WL Icon CTA
WL Icon CTA.
Icon and link text call to action with icon option of top or left.
Category: Waterlogic Fields.
Additional settings found within the cog on the top right of the field:
Font size: The font size of the icon. Default to Regular.
Settings
Icon: Select the icon from the dropdown list (if extra icons are required these will need to be added in.)
Hyperlink Text: The text for the link.
Text colour: What colour should the text be?
Icon Position: Where should the icon appear within the field. Top or left of the content. Default Top.
Hyperlink Type: The type of link. Options include Resource ID, External URL, Modal or Scroll to ID. Default to Resource ID.
Hyperlink Destination: Relavent to hyperlink type if:
Resource id - Choose a resource ID
External URL - a full url to link to including https eg. https://www.waterlogic.com
Modal - The modal ID as created within the modal field. (http://websitedocs.waterlogic.com/books/content-blocks/page/layout-full-page-modal)
Scroll to ID: If you would like to scroll to a section within the page. Add a unique ID the the layout setting and reference this here.
Chat Popup - This setting adds logic to the button to allow the chat popup to appear. Each context must have chat JS applied to trigger chat to open.
Relative URL - This will point to a file locally within the server relative to the context base_url e.g. for waterlogic.com/en-gb/ the base url is /en-gb/ and if you wanted to include a link to a pdf in the uploads folder the button destination would be uploads/mypdf.pdf. the final output to the site will be /en-gb/uploads/mypdf.pdf
Field: Article Side Whitespace CTA
Article Side Whitespace CTA.
Article CTA areas, available to be set inline by default to content and offset on desktop to right or left.
Category: Waterlogic Fields - ArticlesContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Example of Article Side Whitespace CTA (left, right and inline):
Note: when field is used, the main article content width should be:
Col-8 between 1200px and 1600px.
Col-6 between 992px and 1199px.
Additional Settings: (as found within field cog, highlighted in blue)
Settings
Box Colour: The background colour of the the call to action area. Default to Grey Light.
Position: The location of the CTA banner (Either inline, Left of content or right of content. Default to Inline.
Heading: Heading content at top of call to action banner.
Content: Content to appear within call to action banner.
Hyperlink Type: Where should this hyperlink go? Options:
Resource ID - The resource ID that the button should link to
External URL - An external url (e.g. https://www.google.co.uk)
Modal - The ID of the modal popup as defined in the Modal Popup content block
Scroll to ID - The section that you would like this button to scroll to. Defined by Layouts
Hyperlink Text: The text to display within the link
Hyperlink Destination: The location where this hyperlink should go to. Relevant to the Hyperlink Type setting.
Field: Column repeater
Inserts a field that allows for any number of columns to be added to a section
Category: Waterlogic layouts
Section options
Setting
Description
Default
Margin top
Space between the top of the layout and the bottom of the layout above
Margin bottom
Space between the bottom of the layout and the top of the layout below
45px
Padding top
Space between the top of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-top
Padding bottom
Space between the bottom of the section and the inside component. Unset by default, if you apply a Section background colour it will add 60px padding-bottom
Container type
Choose the type of container
- No container
- Fluid container
- Fixed container
Container classes
Additional classes for the container
Row classes
Additional classes for the row
Background colour
Section background colour
Repeater options
Setting
Description
Default
Contents
A nested layout field that takes any layout. Recommended to use 100% empty as this inserts an empty section which won't affect your contents on the inside
Columns
Bootstrap column classes i.e. col-12 col-md-8 col-lg-4
col-12
Field: Sidebar hyperlinks
Creates a dynamic list of links based on the resource parent to be used of sidebars
Category: Sidebar
Section options
Setting
Description
Default
Heading
Sidebar section heading
Parent ID
ID of resource with children from which links will be generated from
parent
Resource IDs
Specify individual resource IDs instead of a parent ID for finer control overlinks
Link text to use
Choose between resource pagetitle or resource menu title
pagetitle
Hyperlink limit
Limit the number of hyperlinks output.
Field: Sidebar Contents
Repeater block designed to exist within the sticky sidebar. Create multiple scrollable links to sections within the resource (like a table of contents).
Category: Sidebar
Section options
Setting
Description
Default
Heading
Sidebar section heading
Subtitle
Subtitle of section
Field: Sidebar Filters
A nested layout field for adding product filter options to a sidebar
Category: SidebarNotice: Should only be used with Accessory Category and Accessory Sub-Category layout/template.
Section options
Setting
Description
Default
Section title
Sidebar section title
Mobile helper text
Text shown on smaller screens to help inform users what to do
Filter help text
Helper text to give user additional information
Usage
This field should only be used with Accessory Category and Accessory Sub-Category layout/template, when you insert the field a modal window will open asking you to insert a layout. Choose Nested Empty Layout, this layout is specifically designed to be used for nested layouts and doesn't contain any additional mark up. Next select Sidebar filter options field, this inserts a repeater field that allows you to define different product filters (see related below).
Related
Layout: Nested Empty Layout Field: Sidebar Filter Options Field: Sidebar Filter Options
Repeater block which enables you to add product filter options to the web page.
Category: Sidebar
Section options
Setting
Description
Default
Title of filter option
Section title I..e Volume
Field: Trusted Logos
Trusted Logos
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings: (as found within field cog, highlighted in blue)
Example Output:
Repeater Inputs: You can add logos, by default when adding this field there is one ready to go. To add others then click the
Add Item, which will create another trusted logo to the list.
Icon: Choose or upload the icon that you would like to use.
Icon Alternative Text: Alternate text to support the image.
Additional Settings
Logos Per Row: How many icons should show on each row. Default to 4
Show Text: Should the text appear above the logos? Default to Yes
Show Background?
Text: The text content to appear above the logos. Show Text needs to be Yes to show this on the front end.
Field: Add to quote
Inserts an Add to Quote button with quantity buttons
Category: Waterlogic fields
Usage
By default, this field will use the ID of the current resource if the field is left blank. You could use this field on a separate section, a blog article for example where you'd enter the ID of the product resource that should be added to a quote. Field: Scroll to
A repeater field that creates an unordered list of links to scroll to sections within a section
Category: Waterlogic fields
Section settings
Heading
Section heading
Content areas
Help text which tells the user what this section does
Usage
IDs can be added to Richtext areas and layouts, when added you can reference these IDs in the scroll links so when clicked the user is scrolled to that section. Field: WL Banner Icon Text Repeater
A repeater field that creates an unordered list of links to scroll to sections within a section
Category: Waterlogic fields
Repeater settings
Icon
Select a Waterlogic icon
Heading
Heading of content block
Content
Content of block
Icon position
Position of Icon
Left
Background colour
Background colour of block
None
Icon colour
Colour of Icon
Blue light
Text colour
Colour of Heading and Content
Inherit
Usage
Quickly add banner Icons in any section by adding a repeater, this enables you to create eye-catching blocks that direct users attention. Field: Product Collection filter
Product Collection filter
Consists of multiple product / accessory product cards, headed by a total count, pagination, and sort dropdown. Product card width across different breakpoints will be automatically determined.
Category: Waterlogic Product Items.
Settings
Limit: How many products would you like to appear within this collection? Default to 12.
Parent ID: The Resource ID of the collection that contains the products or accessories
Field: FAQ Accordion
Inserts FAQs pulled through from FAQ Manager page.
Category: Waterlogic Fields
Usage
Use this field to pull through FAQs defined in the FAQ manager page. The provided settings allow you to filter and specify what FAQs should be shown.
Settings
Setting
Description
Default
Select question category
Select the category to pull FAQs from
All categories
Select questions by ID
Enter questions separated by a comma to select specific questions. If you're mixing questions from different categories make sure All categories is selected
Sort by
Sort questions on the webpage by ID, Question or Category
Question
Sort direction
Sort direction ASC | DESC
Ascending
Limit questions shown
Limit the number of questions to be shown to the user
10
Related pages
Creating FAQ categories
Creating FAQs
Field: Toggle Button
A button that allows users to toggle open sidebars on mobile and tablet
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Settings
Button Text
The text to display within the button.
Button Destination
The ID of the category bar: default category
Button Colour
The colour of the button. Default Light Blue.
Font Size
Select the text size from the pre-defined list of sizes. Default Regular
Font Awesome Icon
Font Awesome Icon to use to the left of the button text, see (https://fontawesome.com/icons?d=gallery) for icons that can be used. Note: do not add a Font Awesome Icon if you have pointer icon position set to left.
For Example: Star icon (https://fontawesome.com/icons/star?style=solid) the value to be used would be fas fa-star.
This button should only be used when you are using the Category sidebar template. It enables users to toggle open the category sidebar when viewing the website on mobile/ tablet. Field: Sidebar block
Sidebar block is the base layout that Sidebar CTA and Sidebar Help are built on.
Category: Sidebar
The sidebar block is used as a building block for sidebar call to actions and helper sections. It should be added via a nested field within the sidebar area of a Sidebar layout. You shouldn't need to use this block as both the Sidebar CTA and Sidebar Help templates are provided.
Section options
Setting
Description
Default
Background Colour
Section background colour
transparent
Text colour
Font colour
inherit
Sidebar block type
Select if this is a Helper block or a Call to action block
Helper block
Data-UID
A unique ID of the container for skip to links
Field: Article Intro
Article intro header
Category: Waterlogic fields - Articles
When creating a blog article, use this field for the header.
Field options
Setting
Description
Default
Article intro
Heading text of the article
Pagetitle
Article media select
Select the type of media to use for the article media - Select Image or Video
Image
Article Image
Image for article header
Sharer Image
Video ID
If article media select is Video, then enter the Youtube or Vimeo video ID
Video service
If article media select is Video, select the video source - Youtube or Vimeo
Field: Colour text block
Colour text block for highlighting important text
Category: Waterlogic fields
Make text stand out with Colour text boxes, this field can be added to any layout
Field options
Options
Description
Default
Title
Title of block
Content
Block rich text content
Hyperlink text
Text for hyperlink. If empty no hyperlink will be shown
Hyperlink colour
Hyperlink colour
Dark grey
Hyperlink font size
Font size of the hyperlink
small
Font awesome icon
Name of the font awesome icon
Hyperlink type
Type of hyperlink OPTIONS: Resource ID, Section ID, Weblink or Modal
Resource ID
Hyperlink destination
Destination of hyperlink based on hyperlink type. E.g. if Resource ID enter the ID of the resource you want to link to
Alignment
Align the link left, centre or right of the block
Field settings
Setting
Description
Default
Block background colour
The background colour of the block
Transparent
Text colour
Text body colour, to be used when you change the background colour of the block
Body text colour
Field: Featured article card
Used to feature an article
Category: Waterlogic fields - Articles
Add featured articles to webpages by entering the ID of the article. Select between the image showing on the left or top of the card.
Featured article Content Blocks field
Image left
Image top
Field options
Options
Description
Default
ID of article
ID of the featured article
Image position
Position of the image. Use left for full-featured article as it adds the article Intro text. Use image top when adding more than one featured image in a layout column
top
Field: Article Side Panel
A side panel with resource IDs to feature
Category: Waterlogic fields - Articles
The side panel field should only be used with the Side panel layout as it relies on additional settings and configurations not present on other layouts. By default, it will pull in the latest 5 children articles published, however, you can enter up to 5 resource IDs to feature instead. There is also an option to add in Social Follow Us links which are controlled by system settings based on website context.
Field options
Options
Description
Default
Resource IDs
Comma-separated IDs of resource to feature. By default will show latest 5 child articles
Sidebar title
Title of the side panel
Font Awesome Icon
Icon to use beside the Side panel title
book
Field settings
Settings
Description
Default
Show social follow links
Show the social links footer at the bottom of the side panel
Yes
Field: Social follow links
Add Follow us links to webpages
Category: Waterlogic fields
Adds Follow us Social icons and links to webpages. Links to social channels are controlled using the Social custom manager page to ensure that each language/context uses the correct channels.
Field settings
Settings
Description
Default
Align follow links
Align the follow links on the webpage/ section/ layout:
Options : left | centre | right
left
Field: Global Offices
Global Offices
Tabbed Content showing all offices globally separated by region.
Category: Waterlogic Fields
There are no settings for the Global Offices field. All content for each specific office is managed via the Custom Manager Page for Offices. See Managing Offices within the Modx manger (TBC)
Output:
Field: Regional Offices
Regional Offices
Field to show all regional offices set through the Office Custom Manager Page (CMP).
Category: Waterlogic Fields
Location cards showing offices directly from the current context used. E.g if UK context then all UK offices will show.
There are no settings for the Regional Offices field. All content for each specific office is managed via the Custom Manager Page (CMP) for Offices. See Managing Offices within the Modx manger (TBC)
Output:
Field: Section articles
Displays all articles within this section and sorts them by Tags
Category: Waterlogic fields - Articles
This field is to be sued only with Article Sections as it grabs all children resources and displays them organised by their tags. There are no settings available for this field although it should be used in a 100% layout.
Field: Feature field
This field allows you to create feature rows with images, lines/ arrows and numbers
Category: Waterlogic Fields.
Frontend examples
Notes
This field should be used on standard layouts (50/ 33/ 25) and be used at least more than once to produce a stepped feature. If the feature field is used on a layout with a background colour, the field will automatically change design style, adding a white background, border and shadow. It also adjusts the location of the image title and number and removes any spacer (arrow/ line).
Options
Setting
Description
Default
Feature field
Feature field content
Feature title
Title of feature field
Feature image
Image to use for featured field: Note the image will be resized to 200x200px. Please use a transparent background PNG to ensure image ratio stays intact.
Feature SVG icon
SVG icon to use for feature field. Will overwrite Feature Image if selected.
Feature SVG icon colour
Colour of the SVG Icon.
Step count (optional)
Used to display the featured field count, enter the number that represents the position this field resides in
Text Alignment
Alignment of the text in the feature field.
Text Centre
Settings
Setting
Description
Default
Add spacer between features
Choose between none, line or arrow spacer to create visual directional cues for users. NOTE: If you want a spacer between fields then this must be set to the same spacer type for each field in the layout.
No
Circular image background colour
Places the image within a circle and adds a background colour. If a colour is selected the position of the step count field changes to prevent overlapping.NOTE: We highly recommended that if this setting is used, each field in the layout should use a background colour to preserve consistency
None
Feature Title Position (Step Only)
Position of the heading content when steps are added only.
Above Image
Content Area
An additional content area exists to the bottom of the feature field, this allows you to add extra content to the bottom of the feature field. Ideal example usage would be a 100% empty layout with a button.
Field: Featured article slider
Display featured articles in a slider
Category: Waterlogic fields - Articles
Displays article cards in a carousel with directional controls. This field uses a number of variables to work correctly. It will only pull in articles that are end children (have no children of their own), if this field is used on an end child page it will, by default, pull the most recently published articles from its parent. If this field is added to a parent resource it will pull in the most recently published end child resources. You can override which resources you want to feature by entering the IDs separated by a comma i.e. 1,4,22,334,85 etc.
Field options
Options
Description
Default
Resource IDs
ID's of resources to feature
If empty will show the most recent child articles published.
Limit
Limit the number of articles to show
9
Field: Video Text
Video Text
Vimeo or Youtube video with content to left or right on desktop.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Video Type: The video source (where the url is hosted from, Youtube or Vimeo). Default Youtube
For Youtube Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for https://www.youtube.com/embed/68uftTvRKCY the value to put into the video field would be 68uftTvRKCY). The only value required is the ID.
For Vimeo Videos:
To show a video on the WL site from Youtube, you need to obtain the video id (i.e for ) the value to put into the video field would be 441349745). The only value required is the ID.
Video URL: the ID's of the video as advised above, different for both Youtube and Vimeo.
Video Position: The position of the image on desktop (larger screens), options for left or right. Default to left.
Video Content Background White?: When setting a background image on the outer container, this should be set to Yes to allow the content area to show out from the background. Default: No.
Video Content: Layout area allows you put any content next to the video. This area is designed to work with headings, rich text and buttons. See Example Below:
Field: CTA Banner
A call to action banner for driving user action
Category: Waterlogic - Call to action banners
A call to action banner with a circular image and a nested layout content area. When adding the field to a resource a nested layout pop will appear, there is only one option to choose from 'Nested Empty layout'.
Field options
Options
Description
Default
Image
Select an image to use for the circle image on the banner
Related pages
Layout: CTA Banner layout
Field: Product feature text
This field allows you to display a product in the centre of the page with product features appearing alongside
Category: Waterlogic Fields.
Figure 1
Figure 2
Figure 3
Notes
This field should be used on 100% width layouts as they require a lot of space to display the features in a user-friendly way. This also works best if the featured image is portrait as it provides more room for the features to display.
Settings
Setting
Description
Default
Feature image
The image that will sit in the centre of the page
Image alt text
Alt text for featured image
Left first item icon
Icon for the top left box (figure 1) or left centre block (figure 2)
Foot icon
eft first item icon colour
Colour of the first left item icon.
Left first item heading
Heading text for the first item
Left first item text
Text for first item
Left second item icon
Icon for the bottom left box (figure 1) If heading is left empty the box will not show (see figure 2)
Foot icon
Left second item icon colour
Colour of the second left item icon.
Left second item heading
Heading text for the second item
NOTE: If empty item will not show
Left second item text
Text for second item
Right first item icon
Icon for the top Right box (figure 1) or Right centre block (figure 2)
Foot icon
Right first item icon colour
Colour of the right first item icon.
Right first item heading
Heading text for the first item
Right first item text
Text for first item
Right second item icon
Icon for the bottom Right box (figure 1) If heading is left empty the box will not show (see figure 2)
Foot icon
Right second item icon colour
Colour of the right second item icon.
Right second item heading
Heading text for the second item
NOTE: If empty item will not show
Right second item text
Text for second item
Field: Product category card
This field allows you to reference product category resources on a web page. The field pulls in data from the Product Category reference Template Variables.
Category: Waterlogic Fields.
Figure 1
Figure 2
Figure 3
Settings
Setting
Description
Default
Resource ID
ID of the product category page
Align image on mobile
Aligns the image either top or left on mobile
top
Align image on tablet
Aligns the image either top or left on tablet
left
Align image on desktop
Aligns the image either top or left on desktop
left
Field: Content card
This field is designed to feature brands/ Waterlogic by adding logos, content, images and calls to action
Category: Waterlogic Fields.
Figure 1
Figure 2
*If fields are left blank they do not render on the front end. It's important that when designing pages using these cards that each card in a layout field has the same fields filled to keep visual user experience.
Fields
Fields
Description
Default
Circle image
Top circle image of card
Image
Second image
Image alt
Alt for image
Upper title
Smaller title that sits above main title
Main title
Main card title
Sub title
Sub title of card
Content
Card content
Button/ Link color
Colour of CTA button
Button Link text
Button text. If left empty button will no show on card
Button/ Link type
Select the type of button to add i.e. Resource ID, Modal, external link etc
id
Button/ Link destination
Destination of the button
Open in new window
When clicked, will this btton/ link open in a new window
Field: Image Tab Logos
Image Tab logos
Image tab logo repeater, designed to work only within the Image Tabs Layout
Category: Waterlogic FieldsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Example of image tab logos on front end of website:
Settings
Image: Each image is a link to the tabbed content as defined within the tab content field. Select an image that represents the content to be applied within this field (e.g. a Waterlogic logo would be a link to the tabbed content explaining about Waterlogic).
Image Alternative Text: Alternative text to support the image should it not be able to show.
NOTE: This content block field should only be uses as part of the Layout Image Tabs.
Field: Image Tab Content
Image Tab Content
Image tab content repeater, designed to work only within the Image Tabs Layout
Category: Waterlogic FieldsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Image tab content allows you to create content for each Image Tab Logo field within the Image Tabs Layout.
Example of image tab logos on front end of website:
Settings
Tab Content Desktop Image: The desktop image to show to the right of the content.
Tab Content Mobile Image: The mobile image to show to the bottom of the content.
NOTE: This content block field should only be uses as part of the Layout Image Tabs.
Field: Split phone
This field displays new and existing customer phone numbers with lexicon labels
Category: Waterlogic Fields.
Figure 1
Figure 2
Figure 3
Settings
Settings
Description
Default
Text colour
Colour of text
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
Field: Branded Slider Image
Branded slider image to be used within the "Branded Slider Layout"
Category: Waterlogic Fields
This field is used as a building block for the "Branded Slider Image" Layout, and will only work correctly with this layout.
Section options
Setting
Description
Default
Image
The circle image to display alongside the "Branded Slider Content" field.
Field: Branded Slider Content
Branded slider content to be used within the "Branded Slider Layout"
Category: Waterlogic Fields
This field is used as a building block for the "Branded Slider Image" Layout, and will only work correctly with this layout.
Repeater options
Setting
Description
Default
Slide Content
Content that should appear beside the "Branded Slider Image"
The order of these repeater items need to be the same as the order of the "Branded Slider Image" items.Field: Landing page navigation
Navigation block for landing pages
Category: Sections
This field is to be used with the Landing page Modx Template and should only be used for landing pages. The field adds a navigation bar to the Landing page template with repeated fields for adding skip links. Enter the IDs of the content block section DATA-UIDs to skip to.
Figure 1
Figure 2
Repeater options
Setting
Description
Default
Landing page nav
A repeater field with additional fields for adding navigation items
Descriptive text
A short description of this navigation title for us with mobile navigation
Nav title
Title of the item link
ID of section
ID of the DATA-UID to skip to when the link is clicked
Additional options
Setting
Description
Default
CTA Button text
Text for the call to action button (if left empty button will be hidden)
CTA Button ID
ID of the resource to link to (optional)
CTA BUtton Href
An external URL for this button to link to (optional)
Section settings
Setting
Description
Default
Show phone dropdown
Show a phone dropdown with context-specific phone numbers
Field: Career Apply Form
Custom field used only on the job listing resources.
Category: Waterlogic Careers.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_Heading
This field is a placeholder field for the application form to be used on each job listing resource. All content within the form is editable via lexicon settings.
Example output:
Settings
Email to (admin email)?: The email address where this application should go to.
Redirect to? The resource id where the user should be redirected to on successful form submission.
Example email sent to Admin Email:
Settings from the page such as job title, department and location are automatically pulled into the email. Both the CV and Cover letter are attached to the email as attachments.
Email autoresponder
To edit the email autoresponder content update the AR Application submit field in the website configuration page
Field: Form selector
Formalicious form selector
Category: Fields
This field allows you to select a form created in Formalicious by entering the form ID.
Figure 1
Figure 2
Field options
Setting
Description
Default
Form ID
ID of Formalicious form
Email to
The email address of the person who will receive this form. By default, the email will go to the email will be sent to the address specified in the formalicious form
Email subject
The subject of this email. By default, the subject specified in the formalicious form will be used.
Form type
Select the type of form default: Standard. A styled form adds a blue border around the form
Styled
Section ID
Enter the UUID of the section so when the form submits and the page reloads due to validation errors or if Redirect Form setting is set to Show confirmation message the page automatically scrolls to the form
Show a badge
Toggle the form badge
no
Badge text
Short content for the badge
Align badge
Aligns the badge top left or top right of the form
Badge background
Background colour of form badge
Blue light
Content settings
Setting
Description
Default
Show can we stay in touch?
Show the checkbox for users to check to be added to a mailing list
no
Privacy policy display type
Type of privacy policy display type: - Link- Slide up - None (hidden)
Show environment toggle
Shows the environment toggle buttons with an overlay that alerts users who select Home use
no
Show call us links
Show call us links at the bottom of the form
Show live chat button
Show a live chat button at the bottom of the form
Redirect form?
Redirect form to ID set on Formalcious form or show confirmation message on form when submission is successful
Redirect
Button colour
Colour of the submit button
Light blue
Button size
Size of the submit button
Full
Button text
Submit form button text, by default will use the lexicon string for Submit form
Submit form lexicon string
Field settings (cog)
Setting
Description
Default
Form small title
Give this form a small title (Recommended)
Form title tag
Tag to use for the small title
p
Form title colour
Text colour of the small title
Form content
Add content to the top of the form. Typically forms have a small amount of text with a blue sub title, heading and description. To add the blue subtitle, highlight the text, click the format button (¶) and select, Light Blue Sub Title in the dropdown.
Align content
Align the content left, centre or right
centre
Remove form padding
Remove padding around the form, This is used to remove extra space around the form. If the form is styled it will remove the blue border around the form. This should be set to No when using a styled form.For forms in heroes this should be set to Yes
no
Align form inputs to text start
Removes internal form padding to align inputs with text. Use this field if using the form in page flow, for example when using the form on customer support article pages.
No
Form field layouts
Single or double layout. If double, fields are in two columns
Single column
Add shadow to form?
Adds a shadow to the form. This should be used for heroes
No
Example of a form
Figure 3
Field: Job CV Form
This field contains a form which allows users to submit their CV and other personal details to Waterlogic
Figure 1
Figure 2
Setting
Description
Default
Redirect to ID
ID of the resource to redirect to when form is submitted
1
Email to
Email address of where the details of this form will be sent to.
email_to context setting
Email autoresponder
To edit the email autoresponder content update the AR Job CV submit field in the website configuration pageField: Job Listing Top
Content block field automatically setup to be used within the Job listing resource only
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Dropdown.html
This field is a placeholder field, used to pull in job listing information at the top of each job listing within the editable content block area. There are no settings for this field but the content can be managed within each job listing under template variables
Example output:
Figure 1
Field: Locations List
Ability to show all context locations automatically set from the locations custom manager Page
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Dropdown.html
Adding this field display all locations set up from the WL locations CMP (Custom Manager Page). Settings within the WL Locations CMP are set and are used in various places within each WL Site (Header location selector, search etc.).
Each location contains:
Location Flag
Location Name
Location Language
Location Link - The link to the context (language site).
Example output:
Figure 1
Field: Refer a friend form
This field contains a form which allows users to refer a friend to Waterlogic
Figure 1
Figure 2
Figure 3
Setting
Description
Default
ID of resource for CTA Btn
ID of the resource for the call to action button to direct to
1
Email to
Email address of where the details of this form will be sent to.
email_to context setting
Editing form content
All form content can be found and edited in the refer_friend lexicon settings, including the btn text.
Email autoresponder
To edit the email autoresponder content update the AR Refer a friend email field in the website configuration page
Field: Global offices
This field creates a tabbed container with all global office locations. The data is pulled through from WL Offices CMP. This field should be used within a 100% empty layout.
Figure 1
Field: Regional (Direct) offices
This field lists all offices for a given location. Locations are pulled through from the WL Office CMP, offices that are shown related to that location.
Figure 1
Table 1
Setting
Description
Default
Select a location
Select a location to show offices for that location.
EMEA
Field: Leaders direct
This field lists all leaders from a given leadership group. Leaders and groups are managed from the WL Leaders CMP.
Figure 1
Table 1
Setting
Description
Default
Enter IDs to show
Enter the IDs of the leaders you want to show on this page. Leader IDs can be found in the WL Leaders CMP
Field: Leaders
This field lists all leaders added to the WL Leaders CMP in a tabbed format. Leaders and groups are managed from the WL Leaders CMP.
Figure 1
Below is an example of what this field produces
Figure 2Field: Section Search bar
This field adds a search bar into the content
Category: Waterlogic Fields.
Figure 1
Figure 2
*If fields are left blank they do not render on the front end. It's important that when designing pages using these cards that each card in a layout field has the same fields filled to keep visual user experience.
Fields
Fields
Description
Default
Section search
Enter the ID of the search landing page. By default, it will use the setting set in Search in configuration. To use the current resource as the landing page use modx tag: [[*id]]
Heading
Add a heading above the search bar
Field: Site Wide Search Results
This field adds a search bar and shows all search results for a specific term
Category: Waterlogic Fields.
Figure 1
Table 1
Setting
Description
Default
Search parent ID
Enter the ID of the parent resource to search through, by default this is 0 but can be any id of that website context. Can even use [[*id]] to use current resource ID
0
Additional search ID
An additional ID to search. The pagetitle of this resource ID will be used as the tab link
Additional search ID
An additional ID to search. The pagetitle of this resource ID will be used as the tab link
Additional search IDs allow you to refine results to certain sections. The pagetitle of the ID is used as the tab title.
Figure 1
Figure 2
Field: Cost Calculator Form
Cost Calculator Form.
Cost calculator form for users to fill out and find out current and potential savings. To be used with cost calculator results on another resource.
Category: Waterlogic Forms.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
figure 1
Additional Settings: (as found within field cog)
figure 2
Settings
Redirect to?: What resource ID is the form results layout on? Required
SVG Icon: Icon to display above the form.
SVG Icon Colour: What should the colour be of the icon? Default Blue Light.
Form Heading: Heading content above the form. Default empty. (If left empty will use lexicon variable).
Form Content: Content above the form. Default empty. (If left empty will use lexicon variable).
Global Settings for the calculator (context based and lexicons)
This is a preconfigured form and uses settings and variables in:
Website Settings (found on the Modx dashboard, see figure 3)
figure 3
Under website settings go to Cost Calculator:
figure 4
To manage settings for other contexts, select context under the Choose Context dropdown. (seen in image above).
Lexicons
Tooltips, placeholders and general content for this form and the results fully use lexicons. To access lexicons go to the "cog" icon at the top right of the Modx dashboard and select Lexicons.
figure 5
To find lexicon values for cost calculator, select Waterlogic -> cost_calculator -> en (namespace -> topic -> language) where "en" is the language to are going to edit.
figure 6
Sample Output:
Field: Tooltip
Tooltip.
Tooltip hover icon and optional text, with supporting tooltip content.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Additional Settings: (as found within field cog)
Settings
Tooltip Title: The text to display beside the tooltip icon. If empty only the icon will display.
Unique Tooltip ID: A unique id to activate the tooltip. The Id must not exits on the page.
Tooltip Position: The location of the tooltip popup when clicked (Options: Top, right, bottom and left). Default top.
Tooltip Content: Rich text content to display when clicking on the tooltip.
Tooltip Text Colour: The colour of the text and icon for the tooltip. Default Dark Grey.
Tooltip Popup Colour: The background colour of the hyperlink. Default Dark Grey.
Field: Corner Card
Corner Card.
Corner card field acting as a layout for content to contain other field items such as heading, rich text and hyperlinks.
Category: Waterlogic Fields.
The corner card field allows you to populate a "corner card" with any field content. Ideally this would be items such as as heading, rich text, hyperlinks and buttons.
It can be placed into any of the layouts such as 100%, 50%/50% and 33%/33%/33%.
As this is a container field, there are no settings applied to the field itself. Margins and padding can be controlled by the outer layout settings and field settings where applicable.
Example front end output:
Field: Search Results Section
This field adds a search bar and shows all search results for a specific term
Category: Waterlogic Fields.
Figure 1
Table 1
Setting
Description
Default
Search parent ID
Enter the ID of the parent resource to search through, by default this is 0 but can be any id of that website context. Can even use [[*id]] to use current resource ID
0
Show search bar?
Show a search form with the results
Yes
Figure 2
Field: Product Finder
A content block field to add in the product finder. To use this field the resource Modx template must be 15_Product_Finder as this template contains extra Template Variables to control the Product Finder.
Figure 1
Figure 2
Tabel 1
Setting
Description
Default
Product Finder
Enter the title for the Product Finder section
Description (To open description click the cog in the top right-hand side of the CB field)
Enter a description for the Product Finder section
Figure 3Field: Resource Selector Banner
Resource Selector Banner.
Simple banner to show resources in a dropdown and when clicked goes to the resource.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Each value in the resource selector defaults to page title. Where relevant on resources there is a Template Variable called Resource Selector Reference Name which will overwrite the page title default.
Settings
Parent ID: The Id of resources to pull into the dropdown list
Left Text: Text that appears to the left of the dropdown
Right Text: Text that appears to the right of the dropdown
Section Templates
Pre-designed, and configured sections for you to add into pages with a single click.
Template: Multi Hero Slider
A preconfigured template using the layout Multi Hero Slider and multiple individual heros.
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template consists of the following layouts:
Banner SVG Cutout Overlap
Banner Lifestyle Badge
Banner Image Overlap
Banner Curved Image
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.Template: In Page Media Slider
A preconfigured template using the layout In Page Media Slider
preconfigured template using the layout "In Page Media Slider". This then used the fields "In Page Slider Content" and In Page Slider Thumbnail" fields
Category: Templates - Sections - Waterlogic Gallery and Sliders.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template consists of the following layouts:
In Page Media Slider
This Template consists of the following fields:
In Page Slider Content
In Page Slider Thumbnail
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.Template: Midpage multi CTA Banner
Displays a call to action banner prepopulated with content and icon fields
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template contains the following fields
Field type
Usage
Options
Required
Heading
Enter banner heading
Default H3
Required
Textarea
Enter call to action content that grabs users attention and clearly tells them what action you want them to make
Required
WL Button
By default, there is a button added to the banner to give users additional options. This field is optional and can be removed or changed.
Optional
Midpage Multi CTA Links
Repeated icon fields. At least 1 is required. Recommend no more than 4 items are used
Required
Related
Field: Midpage Multi CTA Links Layout: Midpage Multi CTA LayoutTemplate: Circle image card right
50/50 Template for Circle Image Card with default content fields added
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template contains the following fields
Field type
Usage
Options
Required
WL Heading
Subheading for card
Default H4
Optional
WL Heading
Main heading for card
Default H2
Required
Textarea
Body content for card
Recommended
WL Button
Button for card call to action. Recommended to have a call to action on this item, however, you are free to use different button types and link fields.
Recommended
Design
To change the background colour of the section, update the section background setting on the main layout setting. For example on the default template using 50/50 layout, update those settings.
Related
Layout: Circle image cardTemplate: Contact banner
3 Column contact banner design using contact banner nested layout
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
The basic template uses lexicons and website config settings to preset the content.
This template contains the following fields
Field type
Usage
Options
Required
WL Heading
Heading title
Default H3
Required
Textarea
Banner section content
Recommended
Simple text field
Additional information that should be taken note of
A wrapper class of dynamic_phone is applied to this field
Recommended
WL button
A call to action button
Optional
Related pages
Layout: Contact banner layout
Template: Call out banner
Prebuilt call out banner component
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template allows you to quickly create a section like the image below. Simply update the image, add in your content and make changes to the colours as you see fit.
Adding your own content
You can update the banner to meet your needs by adding different fields into each area, thereby creating a whole new design to capture user attention.
Related pages
Layout: Call out banner layoutTemplate: Pre-footer CTA Template
Call to action banner above footer with links and content area
Category: Sections - Waterlogic Call to action bannersContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template contains the following fields
Field type
Usage
Options
Required
Rich text
Banner section content
Required
WL Icon CTA
Call to action buttons with Waterlogic icons
Required
Related pages
Layout: Pre-footer CTATemplate: Tabbed Content
A preconfigured template using the Tabs and fields Tab Title and Tab Content
Category: Templates - Sections - Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template consists of the following layouts:
Tabs
This template consists of the following fields
Tab Title
Tab Content
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.Template: Icon List Banner
A preconfigured template using the Banner Image Deep and WL Dashed Icon List
Category: Templates - SectionsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template consists of the following layouts:
Banner Image Deep
This template consists of the following fields
Heading
WL Dashed Icon List
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.Template: Centre Product Feature
A preconfigured template using the Centre Product Feature Layout
Category: Templates - Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template consists of the following layouts:
Banner Centre Product Feaure
This template consists of the following fields
Rich Text
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.Template: Product Hero
Product Hero - Consisting of Brand Product Layout
Category: Templates - Sections - Waterlogic Layouts.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Image: The main image to display on top of the SVG. Should be a PNG image with transparent background.
Image Alt text: Alt text to display on the main image.
Image 2: Optional second image that sits beside Image 1. Should be a PNG image with transparent background.
Secondary Image Alt: Alt text to display on image 2.
Content area allows you to add any field to this section. Designed initially to use headings and buttons. See example below:
Settings are available by hovering over the field and clicking the cog in the top right
Bootstrap Column 1: Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2: Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px
Margin Top: Margin top for the layout. Default to 60px
Margin Bottom: Margin bottom for the layout. Default to 0px
SVG Colour: The SVG Colour Default to Light Blue.
Add breadcrumbs to section: Should breadcrumbs appear within this product hero? Default to YesTemplate: Hyperlink Blocks
A layout with 3 columns which produces 3 shadow boxes on the front end with fields predefined
Category: Sections
Usage
This template prefills a Hyperlink blocks layout with default fields. The hyperlink repeater field is empty to allow you to add your own links. If the repeater is left empty then it will show the top 5 links of the resource's parent.
Related pages
Layout: Hyperlink blocksTemplate: Sidebar Help
A sidebar block predesigned to direct users to additional help resources
Category: Sections - SidebarContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
This template is prefilled with a header, content area and a button section with options to open the website chat or redirect to FAQs. By default this content will have lexicons for each use and predefined links to FAQs.Template: Sidebar CTA
A sidebar block predesigned as a standout call to action
Category: Sections - SidebarContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
This template is prefilled with a header, content area and a call to action button. The blue background and white text set it apart from other elements on the page to direct user attention. By default, this block has lexicons and redirects users to predefined form page.Template: Sidebar section
A predesigned layout with a sidebar on the righthand side of the page
Category: Sections - SidebarContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
This template is a fully predesigned layout section with a content area and prefilled sidebar area with links, helper blocks and call to action blocks. Template: Product CTA
A preconfigured layout using Banner SVG Product Overlap
Category: Default.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Usage
This template is prefilled with a rich text and button, with both left and main image. To See available settings view Banner SVG Product Overlap Documentation.Template: Stacked Icon Banner
Prebuilt call out banner component using Banner Image Deep Layout
Category: Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
This template allows you to quickly create a section like the image below. Simply update the images for background (on desktop and mobile), add in your content and make changes to the colours as you see fit.
Consists of Banner Image Deep Layout. Content to the right predefined using a nested layout, 50/50 layouts and WL Icon Text Fields
Adding your own content
You can update the banner to meet your needs by adding different fields into each area, thereby creating a whole new design to capture user attention.
Related pages
Layout: Banner Image Deep
Template: Hero 1 - Banner SVG Cutout Overlap
Hero 1 - Consisting of Banner SVG Cutout Overlap
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template is a preconfigured version of the Banner SVG Cutout Overlap layout.
Adding your own content
You can update the hero to meet your needs by adding different fields the content area. Headings, rich text and Buttons are recommended for this area.
Related pages
Banner SVG Cutout Overlap
Heading
Rich TextTemplate: Hero 2 - Banner Lifestyle Badge
Hero 2 - Consisting of Banner Lifestyle Badge
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template is a preconfigured version of the Banner Lifestyle Badge layout.
Adding your own content
You can update the hero to meet your needs by adding different fields the content area. Headings, rich text and Buttons are recommended for this area.
Related pages
Banner Lifestyle Badge
Heading
Rich Text
ButtonTemplate: Hero 3 - Banner Image Overlap
Hero 3 - Consisting of Banner Image Overlap Layout
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template is a preconfigured version of the Banner Image Overlap layout.
Adding your own content
You can update the hero to meet your needs by adding different fields the content area. Headings, rich text and Buttons are recommended for this area.
Related pages
Banner Image Overlap
Heading
Rich Text
Template: Hero 4 - Banner Curved Image
Hero 4 - Consisting of Banner Curved Image Layout
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template is a preconfigured version of the Banner Curved Image layout.
Adding your own content
You can update the hero to meet your needs by adding different fields the content area. Headings, rich text and Buttons are recommended for this area.
Related pages
Banner Image Overlap
Heading
Rich Text
Template: Hero 5 - Variable Columns
Hero 5 - Consisting of Hero 5 Layout
Category: Templates - Sections - Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This Template is a preconfigured version of the Hero 5 (TBC) layout.
Adding your own content
You can update the hero to meet your needs by adding different fields the content area. Headings, rich text and Buttons are recommended for this area.
Related pages
Banner Image Overlap
Heading
Rich Text
Section Search
Template: Form Modal
A preconfigured template using Full Page Modal Layout.
Category: Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
Full page modal can be used anywhere within the site. To active the modal to open use a button or hyperlink setting the "Type" to Modal and the "Destination" to the ID of the Modal ID set within the Full page modal settings e.g:
Example visual on modal as per template:
Form Modal is set up using:
Layouts
Full Page Modal
100% Layout
Fields
Headings
Rich Text
Testimonial Card Text
Trusted Logos
WL Dashed Icon List
Modal Form
Template: WL Icon Banner
WL Icon Banner.
Template containing WL Icon Text within a 25/25/25/25/ layout.
Category: Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/Repeater.html
Example of front end view:
This Template consists of the following layouts:
25%/25%/25%/25%
Fields
WL Icon Text
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.
Template: Banner Image
Full width layout with curved image and content.
Category: Sections - Waterlogic Layout.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Layout Options
Image Position: Should the image appear to the left or right? Default to Right.
Image Size: Is the image small or large? Default to Large.
Settings are available by clicking on the layout settings in the top right of the layout.
Settings
Padding Top: Padding top for the layout. Default to 45px.
Padding Bottom: Padding bottom for the layout. Default to 45px.
Margin Top: Margin top for the layout. Default to 60px.
SVG Colour: The colour of the banner. Default to Dark Blue
Fields
Fields can then be added to the content area. Recommended headings with a small amount of text and a button.
Output:
The below has image position: right and image size: large.
Template: Alternating Content
Alternating Content.
A section template containing side by side rich text and image fields, within a variable column layout.
Category: Templates - Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Example of front end view:
This Template consists of the following layouts:
Variable Columns
Fields
WL Heading
Rich text
Image
Settings are preconfigured to designs set out. Once added you can amend each of the layouts and settings. For information on each of the fields and layout settings see the layout and field specific documentation.
Template: Repeated image banner
A template containing content and a repeated logo section
Category: SectionsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
This template is best used to display logos or awards alongside related content. By default, it has a grey background and 45px padding on the Y-axis.
Related
Field: HeadingField: Rich textField: Logo Repeater Layout: Variable columnsTemplate: FAQ Banner
A template containing content and lexicon FAQs
Category: SectionsContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Usage
This template is used often across many different templates to help answer users questions. The template inserts a heading, rich text and an open chat button which can be customised. The FAQs are added using system configurations and have lexicons to work across languages.
Related
Field: HeadingField: Rich textField: FAQ AccordionTemplate: Page Scroll Banner
Page Scroll Banner.
A section template containing a Page Scroll Banner layout with 4 columns, and 4 WL Icon CTA fields.
Category: Templates - Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
Example of front end view:
This Template consists of the following layouts:
Page Scroll Banner
Fields
WL Icon CTA
Template: Global Offices
Global Offices
Tabbed Content template showing all offices globally separated by region, set up in 100% layout.
Category: Sections
This template uses:
Layout - 100% empty
Field - Global Offices
There are additional settings for this layout. All are configured by the 100% layout and Global offices field.
Output:
Template: Regioinal Offices
Regional Offices
Regional office template showing all offices within the context region (e.g. for UK context will show all UK offices), set up in 100% layout.
Category: Sections
This template uses:
Layout - 100% Layout
Field - Regional Offices
There are additional settings for this layout. All are configured by the 100% layout and regional offices field.
Output:
Template: Featured resources side panel
Section template that contains a side panel layout with featured articles and a side panel field.
A two column layout using the side panel layout, side panel field and nested layouts with featured article fields for displaying featured articles.
Category: Waterlogic layouts - Articles
This template uses:
Layout: Side panel
Layout: Nested layout
Layout: 100% layout
Layout: 33% layout
Field: Featured article
Field: Side panel
Output:
Template: Feature panel template
Section template that a call out heading and feature fields
A section template with a call out heading and feature fields on a grey background.
Category: Waterlogic layouts - Articles
This template uses:
Layout: Call out heading
Layout: 33%
Layout: 25%
Field: Feature field
Output:
Template: Related articles slider
Section template that builds a related articles slider with headings and buttons
This Section Template is normally used at the end of a blog article or on the article parent section. When setting a limit on the featured article slider, if the number is greater than 3, a slider will be used to organise the articles.
Category: Waterlogic layouts - Articles
This template uses:
Layout: 100%
Field: Heading
Field: Featured article slider
Field: Spacer
Field: Button
Output:
Template: Video Text
Section template consisting of Video Text field, with content area using heading, rich text and button.
100% layout with Video text field.
Category: Waterlogic layouts - Articles
This template uses:
Layout: 100% layout
Layout: 100% empty
Field: Video Text
Field: Rich Text
Field: Button
Output:
Template: Content cards
Section template consisting of 3 content cards
Category: Waterlogic layouts - Fields
This template uses:
Layout: 33/ 33/ 33 layout
Field: Content card
Output:
Template: Image Tabs
Section template consisting of image tab logos and image tab content
Category: Waterlogic layouts - Sections
This template uses:
Layout: 100% Empty
Layout: Image Tabs
Field: Image Tab Logos
Field: Image Tab Content
Output:
Template: Form with USPs
Section template consisting of image tab logos and image tab content
Category: Waterlogic - Forms
This template uses:
Layout: Colour Split
Layout: Nested layout
Field: Heading
Field: WL Dashed Icon List
Field: Textarea
Field: Split phone
Field: Form (TBC)
Output:
Template: Hero Form Cut-out Right
Section Hero template containing a form, image and trusted by logos
Category: Waterlogic - Forms
This template uses:
Layout: Hero Form Cut-out
Field: Heading
Field: Rich text
Field: Form (TDB)
Field: Trusted logos
Output:
Template: Hero Form Product Right
Section Hero template containing a form, image and trusted by logos
Category: Waterlogic - Forms
This template uses:
Layout: Hero Form Product Right
Field: Heading
Field: Rich text
Field: Form (TDB)
Field: Trusted logos
Output:
Template: Hero Form Lifestyle
Four column layout for use as a hero with a form and trusted logos and feature badge
Category: Waterlogic Heros.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
Note: This Template has been created using a button with additional classes to show on mobile/tablet. This will hide the form and show the button. When selected this will open the Full page modal Layout with the same form within.
Sample Hero Banner:
Layout view within Modx:
Additional settings are available by hovering over the field and clicking the cog in the top right.
Note: Switching Image Position from Left to right changes the design output on the front end:
Left Example:
Right Example:
Layouts and Fields used:
Layout: Banner Image Badge
Field: Heading
Field: Rich text
Field: Button
Field: Simple Form
Filed: Trusted Logos
Layout: Full Page Modal
Field: Nested Layout
Layout: 100%
Template: Branded Slider
Two column layout for Branded Slider
Category: Waterlogic Sections.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html
A Preconfigured layout ("Branded Slider Image") for Branded Slider containing "Branded Slider Image" field and "Branded Slider Content" field.
Sample Hero Banner:
Layout view within Modx:
Layouts and Fields used:
Layout: Branded Slider Layout
Field: Branded Slider Image
Field: Branded Slider Content
Field: Rich Text
Template: Testimonial Card Slider
Preconfigured 100% layout with testimonial card slider field.
Category: Waterlogic Fields.Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/index.html
Sample card slider:
Sample card slider within Modx:
Layouts and Fields used:
Layout: 100% Layout
Field: Testimonial Card Slider
Template: Job application footer form
Section Hero template containing a form and background image
Category: Waterlogic - Forms
This template uses:
Layout: Job application footer form
Field: Heading
Field: Career apply form
Output:
Template: Sidebar CTA - Lexicon
A sidebar block predesigned as a standout call to action
Category: Sections - SidebarContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template uses Lexicons and website config settings for reusability across different languages and articles.
Usage
This template is prefilled with a header, content area and a call to action button. The blue background and white text set it apart from other elements on the page to direct user attention. By default, this block has lexicons and redirects users to predefined form page.Template: Sidebar Helper - FAQ
A sidebar block predesigned to direct users to additional help resources
Category: Sections - SidebarContent Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Templates.html
This template uses Lexicons and website config settings for reusability across different languages and articles.
Usage
This template is prefilled with a header, content area and a button section with options to open the website chat or redirect to FAQs. By default this content will have lexicons for each use and predefined links to FAQs.Page Templates
Complete pages that you can assign to a page with a single click.
Page template: Product Page
Product page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Product
Sections on this page where content is not controlled by content blocks:
Hero area: Product Hero Details
Hero area: Button group (if 'Add to quote') and phone number (dropdown)
Variable columns: Product Specification
Tabbed content: FAQs
Tabbed content: Specs > Product Specification (on the left)
Product CTA: button (if 'Add to quote')
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view (top half of page):
Page template: Category Page
Category page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Product
Sections on this page where content is not controlled by content blocks:
Technology slider
FAQs
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view (top half of page):
Page template: Accessories Product Page
Accessories Product page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Product
Sections on this page where content is not controlled by content blocks:
Qty selector and 'Add to quote' button
Phone number (Dropdown)
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:Page template: Industry Page
Industry page.
A full page template, consisting of multiple content block section templates, layouts and fields.
Category: Pages
Example of front end view:Page template: Customer Support Parent Page
Customer Support Parent page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Customer Support
Sections on this page where content is not controlled by content blocks:
FAQs
Contact banner
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:Page template: Customer Support Category Page
Customer Support Category page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Customer Support
Sections on this page where content is not controlled by content blocks:
Sidebar: Grey Help box (option to inherit from template, or override on a per page basis)
Sidebar: Blue CTA box (option to inherit from template, or override on a per page basis)
FAQs
Contact banner
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:Page template: Customer Support Article Page
Customer Support Article page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Customer Support
Sections on this page where content is not controlled by content blocks:
Sidebar: Grey Help box (option to inherit from template, or override on a per page basis)
Sidebar: Blue CTA box (option to inherit from template, or override on a per page basis)
FAQs
Contact banner
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:Page template: 404 Page
404 page.
A full page template, consisting of multiple content block section templates, layouts and fields.
Category: Pages
Example of front end view:
Page template: Accessories Parent Page
Accessories Parent page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Accessories
Sections on this page where content is not controlled by content blocks:
Categories sidebar links
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Accessories Category Page
Accessories Category page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Accessories
Sections on this page where content is not controlled by content blocks:
Categories sidebar links
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Accessories Sub-Category Page
Accessories Sub-Category Page.
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Accessories
Sections on this page where content is not controlled by content blocks:
Categories sidebar links
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Page resource parent
A full-page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Articles MODX Template: 02_Resource_article_parent
Any article parent must use the 02_Resource_article_parent template to set the article content type fields
All content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Page resource section
A full-page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Articles MODX Template: 03_Resource_article_section
Any resource designated to be an article section must use the Modx Template 03_Resource_article_section as this changes the view of the resource to present child articles in a more user-friendly way.
Sections on this page where content is not controlled by content blocks:
Section articles
All content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Page resource article
A full-page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Pages - Articles MODX Template: 01_Resource_article
All articles should use the Modx template 01_Resource_article. By default, any article created directly from the Article section resource will have the 01_Resource_article automatically applied. The 01_Resource_article template provides more template variables for featured images and tags.
All content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Offices Global
A full-page template, consisting of office locations controlled by custom manager page.
Category: Pages
Simple layout using a 100% layout for content above the office locations. Content can be added below and above as required using content block layouts and fields. Each "Global" area (e.g. America) the regional offices will display within tabs.
Example of front end view:
Layouts and fields Used:
100% Layout
Global Offices - Tabbed
Page template: Offices Regional
A full-page template, consisting of office locations controlled by custom manager page.
Category: Pages
Simple layout using a 100% layout for content above the office locations. Content can be added below and above as required using content block layouts and fields.
Example of front end view:
Layouts and fields Used:
100% Layout
Regional Offices
Image Banners
Page template: Careers Job Listing
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
This page has been set up to be fully customisable within content blocks for full flexibility. Each Job listing should use the Career_Job_Template as Template variables are used to define settings for each job listing
Template Variables
Job Details: Reference information used elsewhere is the site
Job Location: The location of the Job
Job Department: The department within WL (This should match the Career Department Tag(s). See below).
Job Address: The address of the job listing
Each of the above template variables are used in searches and other relevant areas within the careers area and should all contain content for full consistency and search functionality. The resource must be published to show in search results.
Figure 1
Career Department Tag(s)
Select a department where this job listing apply’s too. You can only select one and they are setup using lexicons so each career area within each country will show the correct language.
Example of front end view (top half of page):
Figure 2
Fields and Layouts used:
Layout: Sidebar
Layout: 100%
Layout: Nested Layout
Layout: Colour Image Split
Field: Job Listing Top
Field: Career Apply Form
Field: Sidebar Contents
Field: Image
Field: Rich Text
Field: Button
Field: Testimonial VideoPage template: Careers Why Waterlogic
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
Full content block template using the career content template. This is required rather than the default template as search functionality for the careers is used within the template.
Figure 1
Fields and Layouts used:
Layout: Banner Image Overlap
Layout: Career Search Banner
Layout: 100%
Layout: Branded Slider Layout
Field: Image
Field: WL Icon Text
Field: Font Awesome Icon
Field: Rich Text
Field: Button
Field: Testimonial VideoPage template: Careers Home Page
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
Sections on this page where content is not controlled by content blocks:
Hero area: Template variables with title, content and background images
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view (top half of page):
Figure 1
Fields and Layouts used:
Layout: Career Search Banner
Layout: 100%
Layout: Variable Columns
Field: Heading
Field: Icon List
Field: Image
Field: Rich Text
Field: Button
Field: Testimonial VideoPage template: Careers Browse
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
This template has a fixed area (search Banner and results) automatically displayed at the top of the page. All other content areas can be controlled via the resource. This template changes the resource into a collection for easy management of job listings.
Adding a new Job Listing:
Figure 1
Defining the Results Page
To allow the search banner throughout the site to know where the results should be displayed a Context setting has been created allowing you to define the results page.
Setting Name -> career_search_parent
Namespace -> Waterlogic
Topic -> Career
Figure 2
This needs be set to this resource within this context.
Defining the Search Type
You can toggle between search types globally trough the context settings. See Career Search Banner field for more information
Example of front end view (top half of page):
Figure 3
Fields and Layouts used:
Layout: Image Banners
Layout: 100%
Field: Image
Field: Rich Text
Field: Button
Field: Testimonial VideoPage template: Careers Locations
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
Full content block template using the career content template. This is required rather than the default template as search functionality for the careers is used within the template.
Example of front end view (top half of page):
Figure 1
Fields and Layouts used:
Layout: Banner Image Overlap
Layout Career Search Banner
Layout: Branded Slider Layout
Layout 33% 33% 33%
Layout: 100%
Field: Locations List
Field: WL Icon Text
Field: Image
Field: Rich Text
Field: Button
Field: Testimonial VideoPage template: Careers Submit CV
A full page template, consisting of multiple content block section templates, layouts and fields, combined with template variable settings and lexicon.
Category: Careers
Full content block template using the career content template. This is required rather than the default template as search functionality for the careers is used within the template.
Figure 1
Fields and Layouts used:
Layout: Career Submit CV Form
Layout: 100%
Layout: Branded Slider Layout
Field: Heading
Field: Rich TextPage template: Leaders
Global leaders page
A full page template, consisting of a hero and a Leaders field
Category: Pages
Sections on this page where content is not controlled by content blocks:
Leaders
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Leaders direct
Direct leaders page
A full page template, consisting of a hero and a Leaders field and image banner
Category: Pages
Sections on this page where content is not controlled by content blocks:
Leaders direct
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Section site search results
Section site search results page
A full page template, consisting of a hero search results an FAQ section and a contact banner
Category: Pages
Sections on this page where content is not controlled by content blocks:
Search results
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Site wide search results
Site wide search results page
A full page template, consisting of a hero search results and a contact banner
Category: Pages
Sections on this page where content is not controlled by content blocks:
Search results
All other content can be controlled on the individual resource, by editing the content blocks fields, layouts and templates.
Example of front end view:
Page template: Cost Calculator Form
A full page template, consisting on simple header, and cost calculator form field.
Category: Pages
Example of front end view (top half of page):
Figure 1
Fields and Layouts used:
Layout: 100%
Field: Heading
Field: Rich Text
Field: Cost Calculator Form
Page template: Cost Calculator Results
A full page template, consisting of cost calculator results from form submitted, rich text and call to action banners.
Category: Pages
Cost calculator results are automatically generated by the form submitted on the resource containing the cost calculator form field. To manage content within the results (calculation variables and text content) see Cost Calculator Results layout.
Example of front end view (top half of page):
Figure 1
Fields and Layouts used:
Layout: 100%
Layout: 33% 33% 33%
Layout: Cost Calculator Results
Field: WL Icon CTA
Field: Rich TextDevelopment
Topics surrounding development
Snippet cb_colours
This snippet will return to content blocks the options for all valid colours used upon the site.
This was made as colours are used a lot - meaning that we update the snippet with any changes, and it will filter down to any/all content block fields/layouts/settings without the need to revisit everyone.Use this field in options are of the select type. Ensure you select the process tags options.
[[cb_colours]]
Layout base settings
Copy the below code and paste into the relevant row of modx_contentblocks_layout settings field.Be sure to still add in the columns, and their references to Bootstrap Columns.
[{"reference":"bs_one","title":"Bootstrap Column 1","fieldtype":"textfield","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"","field_is_exposed":"modal"},{"reference":"data_id","title":"Data-UID Attribute","fieldtype":"textfield","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"","field_is_exposed":"modal"},{"reference":"full_width","title":"Show full width?","fieldtype":"select","default_value":"0","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"show_gutter","title":"Show Gutters?","fieldtype":"select","default_value":"1","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"vertical_align","title":"Vertical Align?","fieldtype":"select","default_value":"1","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"bg_color","title":"Background Colour","fieldtype":"select","default_value":"white_bg","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"white_bg==White\nblue_dk_bg==Dark Blue\nblue_lt_bg==Light Blue\ngreen_bg==Green\norange_bg==Orange\nred_bg==Red\nyellow_bg==Yellow\ngrey_lt_bg==Light Grey\ngrey_md_bg==Med Grey\ngrey_dk_bg==Dark Grey\ngrey_xdk_bg==Extra Dark Grey","field_is_exposed":"modal"},{"reference":"p_top","title":"Padding Top","fieldtype":"select","default_value":"pt45","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"pt0==0px \npt15==15px \npt30==30px \npt45==45px\npt60==60px\npt75==75px \npt90==90px \npt105==105px\npt120==120px","field_is_exposed":"modal"},{"reference":"p_bottom","title":"Padding Bottom","fieldtype":"select","default_value":"pb45","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"pb0==0px \npb15==15px \npb30==30px \npb45==45px\npb60==60px\npb75==75px \npb90==90px \npb105==105px\npb120==120px","field_is_exposed":"modal"},{"reference":"m_top","title":"Margin Top","fieldtype":"select","default_value":"mt0","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"mt0==0px \nmt15==15px \nmt30==30px \nmt45==45px\nmt60==60px\nmt75==75px \nmt90==90px \nmt105==105px\nmt120==120px","field_is_exposed":"modal"},{"reference":"m_bottom","title":"Margin Bottom","fieldtype":"select","default_value":"mb60","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"mb0==0px \nmb15==15px \nmb30==30px \nmb45==45px\nmb60==60px\nmb75==75px \nmb90==90px \nmb105==105px\nmb120==120px","field_is_exposed":"modal"},{"reference":"neg_margin","title":"Negative Margin","fieldtype":"select","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"==0px \nnm15==15px \nnm30==30px \nnm45==45px\nnm60==60px\nnm75==75px \nnm90==90px ","field_is_exposed":"modal"}]CB Settings
SVG
blue_dk_svg==Dark Blueblue_lt_svg==Light Bluegreen_svg==Greenorange_svg==Orangegrey_lt_svg==Light Greygrey_md_svg ==Med Greygrey_dk_svg==Dark Greygrey_xdk_svg==Extra Dark Grey
Margins
Margin top
mt0==0px mt15==15px mt30==30px mt45==45pxmt60==60pxmt75==75px mt90==90px mt105==105pxmt120==120px
Margin bottom
mb0==0px mb15==15px mb30==30px mb45==45pxmb60==60pxmb75==75px mb90==90px mb105==105pxmb120==120px
Padding top
pt0==0pxpt15==15pxpt30==30pxpt45==45pxpt60==60pxpt75==75pxpt90==90pxpt105==105pxpt120==120px
Padding bottom
pb0==0pxpb15==15pxpb30==30pxpb45==45pxpb60==60pxpb75==75pxpb90==90pxpb105==105pxpb120==120px
Background colour
trans_bg==Inheritwhite_bg==Whiteblue_dk_bg==Dark Blueblue_lt_bg==Light Bluegreen_bg==Greenorange_bg==Orangered_bg==Redyellow_bg==Yellowgrey_lt_bg==Light Greygrey_md_bg==Med Greygrey_dk_bg==Dark Greygrey_xdk_bg==Extra Dark Grey
Negative margin
==0px nm15==15px nm30==30px nm45==45pxnm60==60pxnm75==75px nm90==90px
Text colours
blue_dk==Blue Darkblue_lt==Blue Lightgreen==Greentext-grey_lt grey_lt==Grey Lighttext-grey_md ==Grey Mediumtext-grey_dk grey_dk==Grey Darktext-grey_xdk grey_xdk==Grey Extra Darkorange text-orange==Orangered text-red==Redyellow text-yellow==Yellowtext-white==WhiteCopy paste snippets
Setting
Description
Default
Bootstrap Column 1
Adjust the size of the column using bootstrap classes
col-lg-4
Bootstrap Column 2
Adjust the size of the column using bootstrap classes
col-lg-4
Bootstrap Column 3
Adjust the size of the column using bootstrap classes
col-lg-4
Data-UID
A unique ID of the container for skip to links
Show full width?
Element stretches full width of the page
No
Show Gutters?
Show Bootstrap gutters
Yes
Vertical Align?
Vertically align the columns
No
Text colour
Font colour
White
Background Colour
Section background colour
Transparent
Block background
Background colour if each individual block
None
Padding top
Section padding-top - Use if you have background colour set
Padding bottom
Section padding-bottom - Use if you have background colour set
Margin top
Add margin to the top of the container for vertical alignment adjust
Margin bottom
Add margin to the bottom of the container for vertical alignment adjust
60px
Section classes
Add additional classes to the section
Additional container classes
Add additional classes to the container
Justify content
Justify the columns horizontally on the page
Data-UID: A unique ID of the container for skip to links