Fields
Fields are your types of content. See here for settings for each that is available to you.
New Page
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: Content area
A nested layout for content areas to be used within banners, heroes andField: 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