Main Components - Magnolia CMS

Additional Product Teaser Text Image

Features

add preconfigured benefits
Eyecatcher shape

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Product	-	-	yes
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Benefit	-	-	yes
Eyecatcher Text	max. 40 characters	-	no
Link text	-	-	yes
Internal Link	-	-	yes

Advantage Teaser Text Image

Features

pre configured Benefits from the Master Content (Common Labels)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Benefit	-	has to be created before in Benefit Asset Folder	yes

Anchor To Top Navigation

Features

Anchor to Top of Page
Can be placed at any position of the page

Example

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position	-	Just add the module at the desired position of the page	yes

B2B LP Dispenser Contact Horizontal Form Text Form

Features

full width contact form

"First name" and "Surname" are per default mandatory fields and thus are not shown in the settings anymore.

Example

Settings

Contact Form Horizontal

Request Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Contact Form Horizontal
Headline	Max. 60 characters	-	yes
Phone footnote	max. 130 characters	-	no
Confirmation page	-	A confirmation page has to be created or an existing confirmation page can be linked here	yes
Mail template	-	A confirmation mail template can be chosen here	no
Company	Show field Hide field ☐ Required field		yes
Zipcode	Show field Hide field ☐ Required field		yes
Button text	max. 25 characters	-	yes
Country	-		yes
Button color	blue green red	-	yes
Show data protection text below message text field	-	-	no
Show asterisk in blue contact bubble	-	-	no
In-Built Anchor	Deactivate integrated HTML-Anchor	This option removes the default contact form anchor so you can create your own custom anchor	no
Is B2B Page	Manually Category	-	no
Dispenser Consent	Activate Checkbox	-	no
Eyecatcher	No Contact	When a Contact is selected Contact information is displayed on the left side	no
Request Settings
Subject	Manually Category	-	no
Recipient	Manually Contact Reference	-	no

B2B LP Dispenser Contact Simple Form Form Text Image

Features

contact form
can be used as white paper/case study module

"First name" and "Surname" are per default mandatory fields and thus are not shown in the settings anymore.

Example

With Contact Teaser

Example

With White Paper Teaser

Settings

White Paper Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Contact Form Horizontal
Headline	Max. 60 characters	-	yes
Phone footnote	max. 130 characters	-	no
Confirmation page	-	A confirmation page has to be created or an existing confirmation page can be linked here	yes
Mail template	-	A confirmation mail template can be chosen here	no
Title	Show field Hide field ☐ Required field		yes
Company	Show field Hide field ☐ Required field		yes
Address	Show field Hide field ☐ Required field		yes
Zipcode	Show field Hide field ☐ Required field		yes
City	Show field Hide field ☐ Required field		yes
Contact phone	Show field Hide field ☐ Required field		yes
Message	Show field Hide field ☐ Required field		yes
Country	-		yes
Button text	max. 25 characters	-	yes
Button color	blue green red	-	yes
Show data protection text below message text field	-	-	no
Show asterisk in blue contact bubble	-	-	no
In-Built Anchor	Deactivate integrated HTML-Anchor	This option removes the default contact form anchor so you can create your own custom anchor	no
Is B2B Page	Yes No	-	no
Dispenser Consent	Activate Checkbox	-	no
Eyecatcher	No Contact Image	When a Contact is selected Contact information is displayed on the left side When Image is selected you can implement an image displayed on the left side and use the form as white paper/case study form	no
Image Desktop	464 x Flexible / Fileformat JPG, PNG	-	yes
Image Mobile	710 x Flexible / Fileformat JPG, PNG	-	yes
Request Settings
Subject	Manually Category	-	no
Recipient	Manually Contact Reference	-	no

B2B Service Component Text Image

Features

B2B Teaser & Links

Example

Settings

Headline - Subheadline

B2B Service Sliding-Teaser

B2B Service Teaser

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline - Subheadline
Headline	max. 60 characters	-	yes
Subheadline	max. 130 characters	-	no
B2B Service Sliding Teaser
Image	Fileformat JPG / PNG	-	yes
Headline	max. 60 characters	-	yes
Text	max. 130 characters	-	no
Link Text	max. 60 characters	-	no
Link	No link Internal link External link Anchor	-	no
B2B Service Teaser
Headline	max. 60 characters	-	yes
Text	max. 130 characters	-	no
Link Text	max. 60 characters	-	no
Link	No link Internal link External link Anchor	-	no

Benefit Banner Text Image

Features

Pre-configured Benefits from the MasterContent (Benefits App)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.
Subheadline	-	-	no
Benefit	-	has to be created before in the Benefits App (not accessible to all CMS editors)	yes
Text (Footnote)	-	-	no
Identifier	-	A symbol or number can be used (for example: ^* or ²)	no

Benefit Slider Text Image

Features

pre configured Benefits from the Master Content (Common Labels)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Benefit	-	has to be created before in Benefit Asset Folder	yes

Big Teaser Text Image Video

Features

full width background image or video mandatory
internal or no link (no cta) mandatory
Eyecatcher

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Big Teaser
Headline	max. 60 characters	-	yes
Text	max. 130 characters	-	yes
Text Color	-	Standard Color is the BRITA dark blue	yes
Background image	2560px x 1160px Fileformat JPG / PNG	-	yes
Mobile image	1200px x 750px Fileformat JPG / PNG	1200px x 750px is the recommended image size but the height specification is flexible.	no
Background video	MP4 16:9 format (e.g. 1280x720px) video height: minimum of 720px video width: minimum of 1000px	The video file should be as small as possible to avoid long load times.	no
Position of text	-	-	no
Circle size	-	Two sizes are available (small & big)	no
Background color	-	Has to be an RGB value	no
Eye Catcher
Eye catcher image	Fileformat Transparent PNG	Two sizes are available (small & big)	no
Background color	-	Has to be an RGB value	no

Button Link Text

Features

create a button link

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Button text	max. 130 characters	-	yes
Linktype	External link Internal link	-	yes

Comparison Text Image

Features

Compare two Products

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	-	yes
Product 1 & 2
Headline	max. 130 characters	-	yes
Image	724px × 406px	-	no
Internal link	-	-	no
Link Text	max. 30 characters	-	no
Text	-	-	no
Call To Action	Show / Hide	-	no
Benefit (bullet list)	max. 130 characters	-	yes

Contact Text

Features

contact teaser
link to contact form possible

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	-	yes
Link text	max. 60 characters	-	no
Link	-	You can specify a link to a contact form here	no
Hide contact image	-	-	no
Hide telephonenumber	-	-	no
Hide additional info	-	-	no
Text over the button	-	-	no
Contact	-	When a Contact is selected a Contact number is displayed on the left side	no
Hide	-	-	no
Phone number type	-	Display the phone number as regular text	no
Benefit (bullet list)	-	Add a custom bullet list which will be displayed on the right side	yes
Hide	-	-	no

Contact Form Text Form

Features

contact form

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Confirmation page	-	A confirmation page has to be created or an existing confirmation page can be linked here	yes
Mail template	-	A confirmation mail template can be chosen here	no
Dispenser Consent	Activate Checkbox	-	no
Subject	Category	-	no
Recipient	Contact Reference Manually	-	no
BCC	Contact Reference Manually	-	no
Target Group	Category	-	no
Company	Show field Hide field ☐ Required field	-	yes
Title	Show field Hide field ☐ Required field	-	yes
Address detail	Show field Hide field ☐ Required field	-	yes
Address	Show field Hide field ☐ Required field	-	yes
City	Show field Hide field ☐ Required field	-	yes
Contact phone	Show field Hide field ☐ Required field	-	yes
Is Image Page	Yes No	-	no

Content Anchor Navigation

Features

Anchor Module to link to a specific part of the page

Example

Settings

How To

To create an anchor element just insert a content anchor module and give it a name and label.
the anchor name you choose will be combined with a generic prefix "to-" (example: to-your-anchor). only lowercase letters and hyphens are allowed.
the anchor label will only be visible when using content anchors together with the content navigation module. In that case the label will be displayed as the link text in the content navigation.
Move the anchor module to the position of the page where the anchor is supposed to point to.
To jump directly to that anchor, paste the anchor name (example: to-your-anchor) in the anchor link field of the desired module (for example from the stage module). The pasted anchor name should be without a # as it will be added automatically.

Module Specifications

Field	Specification	Info	Required
Anchor name	the anchor name will be the actual anchor used for the anchor link. the resulting anchor consists of the automatically generated prefix "to-" and the anchor name you have specified (example: to-your-anchor). for the anchor name are only lowercase letters and hyphens allowed.		yes
Anchor label	-	The anchor label is only relevant in combination with the content navigation module. The anchor label will be used as the displayed link text for the anchor links in the content navigation module	yes

Content Navigation Navigation

Features

creates a Navigation based on the Content Anchors found on the page
Content Anchor must be created beforehand
NewContent Navigation is also visible on Mobile Devices

Note on content form anchors

All Contact Forms have a default ID with a default anchor label that will be used by the Content Navigation component as the link name. If you want to change the link name that is used for the Content Navigation you can deactivate the built-in anchor in your Contact Form components. After deactivating you can create your own Content Anchor component and name it as desired.

You can find further information in the Contact Form specifications:

B2B LP Dispenser Contact Horizontal Form
B2B LP Dispenser Contact Simple Form

Example

Before creating the Content Navigation Content Anchor Modules need to be created on the page

Module Specifications

Field	Specification	Info	Required
Content Anchors	Anchors must be created via the Content Anchor Module beforehand	Anchor Label from the Content Anchor will be displayed as Name of the Navigation	yes

Content Slider Text Image

Features

Add multiple Teaser slides (No Maximum Slide Limitation)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	-	yes
Image	Size: 400px x 300px Format: JPG / PNG	-	yes
Slides
Headline	Max. 130 characters	-	yes
Text	Max. 130 characters	-	yes
Linktype	No link Internal link External link	-	no

Contest Text Form

If you would like to use this module on your magazine or landing pages please contact Linienland

The Screenshots below are just examples of a possible Contest module setup. The shown settings and contents are in no way ment as briefing template and should not be copied.

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
?	-	-	yes
?	-	-	yes

Disclaimer Text Text

Features

collapsible footnote

Example

Disclaimer Text closed

Disclaimer Text open

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Text	-	-	no
Center text	checkbox	Centers the text paragraph	no

Download Center Text Image Download

Features

Download list with filter function

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Download categories	-	-	yes
Download	-	has to be created before in the "Download" app	yes

Download Slider Text Image Download

Features

integratable Download mandatory

Example

Settings

To Integrate Downloads into the slider they need to be created beforehand

To create a Download you will need the downloadfile (PDF) and a thumbnail image
Upload the relevant Assets to the assets folder (preferably to your country folder)
Go to the CMS Main Menu and navigate to the Downloads Menu
Within the Downloads Menu you can create a new Download with a country folder by clicking on New Download

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	-	yes
Download	-	has to be created before in the "Download" app	yes
Image	148px x 176px Fileformat JPG / PNG	-	yes

Downloads Text Image Download

Features

Download link and internal page link

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	-	yes
Download	-	has to be created before in the "Download" app	yes
Link text	-	-	no
Link	Internal Link	-	no

Environment Protection (CO₂ Calculator) Text

Features

This Module can only be edited by Superusers

If you would like to use this module on your magazine or landing pages please contact BRITA Website Team or Linienland

Example

Explosion Text Image

Features

Animated product explosion avtivated by user scroll
Preconfigured Product explosion graphics for jugs, bottles and carafes

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Product type	Water filter jug Fun Water filter jug Marella Water filter jug Style Water filter bottle Active Water filter bottle Water filter carafe	The product explosion graphics are preconfigured in the Master Content and can't be changed by editors.	yes
Headline	-	-	yes
Text	-	-	yes

Footnotes Text

Features

internal link

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Identifier	-		yes
Text	max. 130 characters	-	yes
Link	Internal Link	-	no

Four Teaser Grid Text Image

Features

Teaser grid with 4 teaser elements
For the Breakpoint 768 - 1023px the headlines will resize from H2 to H4 (20px)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Left Teaser / Right Teaser
Headline	max. 130 characters	-	yes
Linktype	Internal link	-	yes
Landscape teaser	Size: 315px x 375px Format: JPG, PNG	-	yes
Portrait teaser	Size: 315px x 177px Format: JPG, PNG	-	yes
Center Top Teaser / Center Bottom Teaser
Headline	max. 130 characters	-	yes
Linktype	Internal link	-	yes
Landscape teaser	Size: 315px x 375px Format: JPG, PNG	-	yes

Hint Box Text

Features

Text paragraph with blue background

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Text	-	-	yes
No top margin	checkbox	Removes the top margin of the module	no

Highlight Text Text

Features

Heading Styles (H1 - H4)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Text (Headline)	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Style of text	-	h1 h2 h3 h4	no

History Text Image

Features

display timeline
fullwidth image
lightbox

Example

Lightbox Example

Settings

History

History Area

Highlight Text

Image Rich Text (Text^, Image^, Caption)

Rich Text

Open Live Example

Module Specifications

Field	Specification	Info	Required
Background Image	3840px x 1440px Fileformat JPG / PNG	-	yes
Background Video	1920px x 720px Fileformat MP4	-	no
Headline	max. 130 characters	-	yes
Text	-	-	yes
Link text	-	-	no
Subheadline	-	-	yes
Year	-	-	yes
Image for history	214px x 214px Fileformat JPG / PNG	-	yes
Headline for history	-	-	yes
Text for history	-	-	yes
The Following Modules can be inserted in the lightbox
Highlight Text	More Information
Image Rich Text	More Information
Rich Text	More Information

Image Expandable Text Text Image

Features

full width background image
automatic text animation on scroll
lightbox with text & image

Example

Background

Lightbox

Settings

Background

Article Area (Lightbox can be created here)

Lightbox Headline

Lightbox Content

Open Live Example

Module Specifications

Field	Specification	Info	Required
Background
Background image	1500px x 720px / Fileformat JPG/PNG	-	yes
Background video	1500px x 720px / Fileformat MP4	-	no
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 300 characters	-	yes
Link text	max. 60 characters	-	no
Lightbox Headline
Text	max. 130 characters	-	yes
Style of text	H1 H2 H3 H4	-	no
Lightbox Content
Text	max. 300 characters	-	yes
Image	724px x 406px / Fileformat JPG/PNG	-	no
Image caption	max. 60 characters	-	no

Image Floating RichText Text Image Download

Features

can be used as Rich Text module as images are not mandatory
flexible image size
text can be positioned left or right from image
text paragraph can be wrapped around image

Example

Settings

Text Settings

Image Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Text Settings
Indentation from left	no indentation single indentation double indentation	You can indent the whole module in order to have a better fit with other module below or above.	yes
Headline	max. 120 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading. Will produce a h2 Headline	no
Subheadline	-	-	no
Headline position	Center Left	-	yes
Text	-	You can also maintain blank spaces, if you do not need the “text” field You can also use h3 and h4 headlines within your text. This is a good option for structuring your text – especially in terms of longer text blocks.	yes
Wrap text around image	-	if checked the text paragraph will be wrapped around the image	no
Link	No link Internal link External link Anchor Download	-	no
Open in new window	-	open link in new window	no
Link text	max. 80 characters	-	no
Button color	blue default green red	-	yes
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no
Image Settings
Image (Width)	40%-60%: 1000px Desktop 20%-30%: 500px Desktop JPG, PNG	For best quality, the given minimum width are recommended for the images. The image height is flexible.	no
Mobile Image (Width)	40%-60%: 900px Mobile 20%-30%: 500px Mobile JPG, PNG	For best quality, the given minimum width are recommended for the images. The image height is flexible.	no
Image width (Desktop)	20% 30% 40% 50% 60%	This setting corresponds with the image width in the desktop view. the mobile and tablet image width will adapt accordingly to the selected desktop width.	no
Position of image	left right	-	no

Image Fullwidth Text Text Image

Features

full width background image mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position of text	left / right	-	yes
Headline	max. 130 characters	-	yes
Text	Max. 600 characters	-	yes
Button color	red / green / blue	-	yes
Link	No link Internal link External link Anchor	-	no
Button text	max. 40 characters	-	no
Image	2560px x 1160px Fileformat JPG / PNG	-	yes
Mobile image	1200px x 750px Fileformat JPG / PNG	1200px x 750px is the recommended image size but the height specification is flexible.	no
White bg	checkbox	-	no
Remove spacer below the component (only mobile)	checkbox	-	no

Image Gallery Grid Text Image

Features

image gallery with more than 5 images possible

Example

Big Teaser Left

Texts

Small Teasers

Big Teaser Right

Additional Images

Open Live Example

Module Specifications

Field	Specification	Info	Required
Big Teaser Left
Image	1480px x 1752px / Fileformat JPG, PNG	-	yes
Texts
Headline	Max. 120 characters	-	yes
Text	-	-	yes
Small Teasers
Image	1496px x 840px / Fileformat JPG, PNG	-	yes
Youtube Video	-	Look at the URL of the Youtube Video, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). This is the code you need to enter into your YouTube ID Field. Example https://www.youtube.com/watch?v=v26U16_gliE	no
Big Teaser Right
Image	1480px x 1752px / Fileformat JPG, PNG	-	yes
Mobile Image	1496px x 840px / Fileformat JPG, PNG	-	yes
Additional Images
Teaser Image	1480px x 1752px / Fileformat JPG, PNG	-	yes

Image RichText (Slider) Text Image

Features

image with transparent background (e.g. product image) mandatory
seal (small image) can be used to show quality certificate, logo, etc.mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position of text	left / right	-	yes
Headline	max. 60 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	Max. 250 characters	-	yes
Image	880px x 880px / JPG, PNG	-	yes
Small image instead of big one	-	-	no
Seal	JPG, PNG	-	no
Remove spacer above the component	checkbox	Removes the top margin of the module If the Image RichText Module is used within the Image Text Slider Area remove spacer will not work	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module If the Image RichText Module is used within the Image Text Slider Area remove spacer will not work	no

Image RichText (Text, Image, Caption) Text Image

Features

image & text without headline

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Text	Max. 600 characters	-	yes
Image	480px x 270px / JPG, PNG	-	no
Image caption	Max. 60 characters	-	no
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no

Image Standalone Text Image

Features

flexible image width
image can be positioned (left/center/right)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 120 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Subheadline	-	-	no
Image (Width)	65%-100%: 2048px Desktop 35%-50%: 1024px Desktop JPG, PNG	For best quality, the given minimum width are recommended for the images. The image height is flexible.	yes
Mobile Image (Width)	65%-100%: 1566px Mobile 35%-50%: 800px Mobile JPG, PNG	For best quality, the given minimum width are recommended for the images. The image height is flexible.	yes
Image width (Desktop)	100% 85% 65% 50% 35%	This setting corresponds with the image width in the desktop view. the mobile and tablet image width will adapt accordingly to the selected desktop width.	yes
Position of image	center left right	-	yes
Image subtitle	-	-	no
Position image subtitle	center left right	-	yes
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no

Image Text Text Image

Features

image with transparent background (e.g. product image) mandatory
seal (small image) can be used to show quality certificate, logo, etc.

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position of text	left right	-	yes
Headline	max. 130 characters	-	yes
Text	Max. 300 characters	-	yes
Image	Size: 880px x 880px Format: JPG, PNG	-	yes
small image instead of big one	checkbox	-	no
Seal	Size: 40px x 40px Format: JPG, PNG	-	yes
Remove spacer above the component	checkbox	Removes the top margin of the module If the Image Text Module is used within the Image Text Slider Area remove spacer will not work	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module If the Image Text Module is used within the Image Text Slider Area remove spacer will not work	no

Image Text Full Width Slider Area Text Image

Features

full width background image mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position of text	-	left / right	yes
Headline	max. 130 characters	-	yes
Text	Max. 600 characters	-	yes
Button color	red / green / blue	-	yes
Link	No link Internal link External link Anchor	-	no
Button text	max. 40 characters	-	no
Image	2560px x 1160px / Fileformat JPG, PNG	-	yes
White bg	checkbox	-	no

Image Text Slider Area Text Image

Features

image with transparent background (e.g. product image) mandatory
internal link
seal (small image) can be used to show quality certificate, logo, etc.

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Position of text	left / right	-	yes
Headline	Max. 30 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 130 characters	-	yes
Image	880px x 880px / Fileformat Transparent PNG	-	yes
Linktype	Internal Link	-	no
Seal	PNG / JPG	-	no
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no

Info Box Text Image

Features

image
text box

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 300 characters	-	no
Image	880px x 880px / Fileformat Transparent PNG	-	no

Intro Text

Features

Headline mandatory
Subheadline mandatory
optional CTA

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Subheadline	max. 300 characters	-	yes
Button text	max. 40 characters	-	no
Link	No link Internal link External link Anchor	-	no

Intro H1 Top of Page Text

Features

Headline mandatory
Two Subheadlines

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Subheadline	-	-	no
Subheadline 2	-	-	no
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no

Job Teaser Area Text Image

Features

Teaser grid with 5 teaser elements

Example

Settings

Job Teaser Area

Job Teaser Big

Job Teaser Small

Job Teaser Medium

Open Live Example

Module Specifications

Field	Specification	Info	Required
Job Teaser Area
Headline	-	-	yes
Link text	-	-	yes
Link	Internal link	-	yes
Job Teaser Big
Image	Size: 1298px x 750px Format: JPG, PNG	-	yes
Text	-	-	yes
Link	Internal link	-	yes
Position	-	left right	no
Location	-	-	yes
Job Teaser Small
Image	Size: 630x x 354px Format: JPG, PNG	-	yes
Headline	-	-	yes
Link	Internal link	-	yes
Location	-	-	yes
Job Teaser Medium
Image	Size: 630px x 750px Format: JPG, PNG	-	yes
Headline	-	-	yes
Link	Internal link	-	yes
Location	-	-	yes

Lightbox Slider (Benefit Module) Text Image

Features

Headline mandatory
Lightbox mandatory
Images for Mobile/Desktop View mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Area Headline
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Element 1/2/3
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Tag	max. 90 characters	-	yes
Image Desktop	480 x 760 / Fileformat JPG	-	yes
Image Mobile	1086 x 390 / Fileformat JPG	-	yes
Lightbox Element 1/2/3
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 300 characters	-	yes
Image Desktop	1560 x 792 / Fileformat JPG	-	yes
Image Mobile	1086 x 390 / Fileformat JPG	-	yes

Money Back Text Image

Features

Headline mandatory
Paragraph (Rich Text) mandatory
Image with transparent Background mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 500 characters	-	no
Image	? x ? / Fileformat Transparent PNG	-	yes

Newsletter Benefits and Registration Text Image

Features

Pre-configured Benefits from the MasterContent (Benefits App)
Can only be used for Text

Example

Settings

Registration

Benefits

Open Live Example

Module Specifications

Field	Specification	Info	Required
Registration
Headline	max. 130 characters	-	no
Benefits
Headline	max. 130 characters	-	no
Subheadline	-	-	no
Benefit	-	has to be created before in the Benefits App (not accessible to all CMS editors)	yes
Text (Footnote)	-	-	no
Identifier	-	A symbol or number can be used (for example: ^* or ²)	no

Newsletter Registration Form Text Form

Features

prebuilt Newsletter registration form
Can only be used for Text

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Country	Show field Hide field	-	yes
Consent	Display checkbox for data processing consent	This checkbox doesnt need to be checked, the consent checkbox will be automatically added	no

Newsletter Teaser Text Image Form

Features

Pre-configured Benefits from the MasterContent (Benefits App)
Can only be used for Text

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	-	yes
Image	minimum 198px x 150px	It is recommended to use the existing benefit icons from the MasterContent	yes
Text	-	-	yes
Benefit	-	-	yes

Overview Area Text Image Download

Features

Magazine/Blog Layout

Example

Settings

Area

Overview Big Background Teaser Headline

Overview Big Teaser Headline

Overview Small Background Teaser Headline

Overview Small Teaser Headline

Open Live Example

Module Specifications

Field	Specification	Info	Required
Area
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Subheadline	Max. 130 characters	-	no
Big Background Teaser
Headline	Max. 130 characters	-	yes
Image	898px x 682px fullwidth 985px x 493px	When the checkbox "full width" is selected the image size for full width needs to be used	yes
Mobile image	710px x 400px	-	no
Text	Max. 460 without blank spaces Max. 540 with blank spaces	-	no
Link	No link External Link Internal Link Anchor Download	-	no
Link text	-	-	no
Show as button	checkbox	-	no
Button color	red / green / blue	-	yes
full width	-	Teaser will span over full width of page	no
disable opacity	-	-	no
Big Teaser
Headline	Max. 130 characters	-	yes
Image	488px x 768px / fullwidth 660px x 510px	When the checkbox "full width" is selected the image size for full width needs to be used	yes
Light blue background	-	changes the backgroundcolor to light blue, if the image has a background transparency the background will be light blue	no
Mobile image	710px x 400px	-	no
Text	Max. 460 without blank spaces / Max. 540 with blank spaces	-	no
Link	No link / External Link / Internal Link / Anchor / Download	-	no
Link text	-	-	no
Add to Cart Button	enabled / disabled	Only relevant for product category pages	no
Show as button	-	-	no
Button color	red / green / blue	-	yes
full width	-	Teaser will span over full width of page	no
disable opacity	-	-	no
Small Background Teaser
Headline	Max. 130 characters	-	yes
Image	714px x 1122px	-	yes
Mobile image	714px x 1122px	-	no
Text	Max. 100 without blank spaces / Max. 80 with blank spaces	-	no
Link	No link / External Link / Internal Link / Anchor / Download	-	no
Link text	-	-	no
Show as button	-	-	no
Button color	red green blue	-	yes
disable opacity	-	-	no
Small Teaser
Headline	Max. 130 characters	-	yes
Image	464px x 348px	-	yes
Light blue background	-	changes the backgroundcolor to light blue, if the image has a background transparency the background will be light blue	no
Mobile image	710px x 400px	-	no
Text	Max. 185 without blank spaces / Max. 220 with blank spaces	-	no
Link	No link / External Link / Internal Link / Anchor / Download	-	no
Link text	-	-	no
Add to Cart Button	enabled / disabled	Only relevant for product category pages	no
Show as button	-	-	no
Button color	red green blue	-	yes
disable opacity	-	-	no

Product List Text Image

Features

Headline
Display list of products with product link
Image specific module
Link to contact form possible

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Category	Product Downloads Applications FAQ Filter FAQ Categories Contact Form Subjects Contact Form Target Groups	-	yes
Contact Anchor	-	Anchor link to contact form	no
Product	-	Multiple products can be added a Product from the master content has to be linked here	yes
Image Headline type	Dispenser Filter	-	yes
Rendering	default container	-	no
Extra text above button	-	The text is shown above the contact button. You can only reference a so-called “Common Label”	no
Contact button	checkbox	hides the contact button	no
Buy button	checkbox	hides the buy button	no

Product Registration Advantages Text Image

Features

Benefits of product registration

Example

Settings

Registration Benefits

Newsletter Benefits

Open Live Example

Module Specifications

Field	Specification	Info	Required
Product Registration Benefits
Headline	max. 130 characters	-	yes
Subheadline	-	-	no
Benefit	-	has to be created before in the Benefits App (not accessible to all CMS editors)	yes
Newsletter Benefits
Headline	max. 130 characters	-	no
Subheadline	-	-	no
Benefit	-	has to be created before in the Benefits App (not accessible to all CMS editors)	no

Product Teaser Grid Text Image

Features

Headline mandatory
Eyecatcher text (will be displayed in BRITA shape)
Product Grid
internal or external links

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Area Headline
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Main Product Teaser / Small Product Teaser / Landingpage Teaser
Product	-	-	yes
Image	Image of product Custom image: Main Product Teaser: minimum 330x330px Small Product Teaser: 140x140px (Product Image) Image Teaser / Small Product Teaser: 874x392px	-	no
(Product) Headline	Max. 30 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 130 characters	-	no
Eyecatcher text	max. 30 characters	-	no
Teaser Position	-	left right	no
Linktype	-	External Internal	no

Recommendation Text Image

Features

Product info from product master
product image and description

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	-	-	no
Product	-	a Product from the master content has to be linked here	yes
Description	-	-	yes
Eyecatcher text	max. 130 characters	-	no
Direct pay	checkbox	Deactivate direct pay button	no
Link	External link Internal link Anchor link No link	-	no

Registration Form (MyBRITA) Text Form

Features

Can only be used for Text and market websites with MyBRITA
Registration Form for creating a MyBRITA Account

Example

Settings

Registration Settings

Benefit Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
User Registration Form
Headline	-	-	no
Image Link Box	Yes No	-	yes
Link to Registration Confirmation Page	Internal link	-	yes
Country	Show field Hide field	-	yes
Newsletter Benefits
Hide Newsletter Opt	checkbox	If checked the Benefits will not be displayed	no
Headline	-	-	no
Subheadline	-	-	no
Benefit	-	has to be created before in the Benefits App (not accessible to all CMS editors)	no
Star	checkbox	-	no
Description	-	-	no

Features

internal link
~~external link, mail link, anchor~~ disabled
~~Image Link~~ disabled
Landingpage Image Page Links only visible if user is logged in

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Link text	-	-	no
Linktype	~~Mail link~~ Internal link ~~External link~~	-	yes
Anchor	-	-	no
Link behaviour	Open in new tab Open in same tab	-	no
~~Image for above Link~~	-	-	no
~~Landingpage Image Page Links~~	-	-	no

Features

Products mandatory
Product links mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Product	-	-	yes
Product name	ca. 60 characters	-	yes
Description	ca. 130 characters	-	yes
Detail page	-	The Product Page you want to link to	yes

Features

Images mandatory
Internal links mandatory
Max. 5 Teasers per Related Story Area
For the Breakpoint 768 - 1023px the headlines will resize from H2 to H4 (20px)

Example

Settings

Area Headline

Big Story Teaser

Medium Story Teaser

Small Story Teaser

Open Live Example

Module Specifications

Field	Specification	Info	Required
Area Headline
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Big Story Teaser
Image	1298px x 750px	-	yes
Headline	Max. 130 characters	-	yes
Text	Max. 460 without blank spaces Max. 540 with blank spaces	-	no
Link text	-	-	no
Link	Internal Link	-	yes
Position	Left Right	-	yes
Medium Story Teaser
Image	630px x 750px	-	yes
Headline	Max. 130 characters	-	yes
Link	Internal Link	-	yes
Mobile image	540px x 304px	-	yes
Text	Max. 460 without blank spaces Max. 540 with blank spaces	-	no
Link text	-	-	no
Small Story Teaser
Image	540px x 304px	-	yes
Headline	Max. 130 characters	-	yes
Link	Internal Link	-	yes

Retailer Slider (Onsite eRetailer Module) Text Image

Features

links and logos of etailers can be integrated mandatory
Different blue background selectable on mobile

Example

Desktop

Mobile

(with "Blue background" active)

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Blue background (only mobile view)	checkbox	-
Headline	max. 130 characters	-	yes
Image	394px x 296px	-	yes
Button text	max. 25 characters	-	yes
Button color	-	-	yes
Linktype	-	-	yes

Rich Text Text Image Magazine

Features

Headline
Paragraph mandatory

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Text	max. 500 characters	-	yes
Remove spacer above the component	checkbox	Removes the top margin of the module	no
Remove spacer below the component	checkbox	Removes the bottom margin of the module	no

Simple Contact Text

Features

contact teaser

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	-	yes
Link text	-	At the moment "Link text" can not be used	no
Link	-	At the moment "Link" can not be used	no
Hide contact image	-	-	no
Hide telephonenumber	-	-	no
Hide additional info	-	-	no
Text	-	-	no
Contact	-	When a Contact is selected a Contact number is displayed on the left side	no
Hide	-	-	no
Phone number type	-	Display the phone number as regular text	no

Store Locator Text Form

Features

Product Filter
Recycling only Filter
Add recycling filter
Store Locator Map

Example

Recycling Filter

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 60 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	no
Subheadline	max. 130 characters	-	no
Product Category	Here you can select the filters (product category) to be displayed to the user. The filters are not going to be showed until two selections.	-	no
Recycling only	checkbox	Filters out stores that have no recycling capabilities in the displayed results	no
Add recycling filter	checkbox	Add recycling to category filters	no
Button text	max. 25 characters	-	no
Headline when inactive	search for the Common Label storeLocator.headlineInactive or fill in your own Headline	-	no

Storytelling stage Text Image Video

Features

full width background image or video mandatory
eyecatcher image with transparent background (e.g. product image) mandatory
round text area with adjustable background color

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 60 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
BG Color	-	Standard Color (Blue) / White	yes
Background Image	2560px x 1160px	-	yes
Background video	MP4 16:9 format (e.g. 1280x720px) video height: minimum of 560px video width: minimum of 1000px	The video file should be as small as possible to avoid long load times.	no
Position of text	left / right	-	yes
Eyecatcher image	-	-	no
Eyecatcher background	-	-	no

Subpage Navigation Text Navigation

Features

creates a horicontal navigation

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Link text	-	-	yes
Link	No link External link Internal link Anchor	-	no

Tab Module Area Text Image

Features

Product Details
Category Tabs
Downloads integratable
Images
Paragraphs (Rich Text)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Title of Tab	-	-	yes
Icon	-	-	yes
Headline	Max. 60 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 130 characters	-	no
Image	880px x 880px	-	yes

Tab Navi Area Text Navigation

Features

Tab Navigation for content modules

Example

Settings

Tab Navi Area

First the Tab Navi Area needs to be created. Afterwards you can add the Tab Navi Title and specify the according Tab Navi Area Module.

Tab Area Title

Tab Area New Component

Open Live Example

Module Specifications

Field	Specification	Info	Required
Title of Tab	-	-	yes
The Following Modules can be inserted as Area Modules
Downloads	More Information
Image RichText	More Information
Image Text	More Information
Product Grid	More Information

Testimonial Text Image

Features

text quote
image (e.g. testimonial) mandatory
eyecatcher image with transparent background (e.g. product image) mandatory
external link, internal link, anchor, no link

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Kicker	Max. 130 characters	-	no
Headline	Max. 130 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Text	max. 300 characters	-	yes
Image	Size: 880px x 880px Format: JPG, PNG	-	yes
Eyecatcher image	-	-	no
Link text	-	-	no
Linktype	External link Internal link Anchor link No link	-	no

Test Strip Order Form Text Form

Features

test strip order form

Example

Settings

MyBRITA Login

Newsletter Benefits

Test Strip Order Form

Open Live Example

Module Specifications

Field	Specification	Info	Required
MYBRITA Login
Headline	Max. 130 characters	-	yes
Subheadline	Max. 130 characters	-	yes
Newsletter Benefits
Headline	Max. 130 characters	-	yes
Subheadline	Max. 130 characters	-	no
Benefit	-	-	yes
Test Strip Order Form
Headline	Max. 130 characters	-	yes
Confirmation page	-	-	yes
Privacy Protection Text	-	-	yes

Text Slider Text Image

Features

Add multiple Text slides (No Maximum Slide Limaitation)

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Headline	Max. 130 characters	-	yes
Subheadline	Max. 130 characters	-	yes
Image	Size: 880px x 880px Format: JPG / PNG	-	yes
Slides
Headline	Max. 130 characters	-	yes
Text	Max. 130 characters	-	yes

Video Text Image Video

Features

Youtube Video embeddable mandatory
video start time adjustable

Example

Settings

Open Live Example

Module Specifications

Field	Specification	Info	Required
Kicker	max. 130 characters	-	no
Headline	Max. 60 characters	For SEO Purposes it is recommended to use a long tail keyword within the heading.	yes
Subheadline	max. 130 characters	-	no
Youtube ID	-	Look at the URL of the Youtube Video, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). This is the code you need to enter into your YouTube ID Field. Example https://www.youtube.com/watch?v=v26U16_gliE	yes
Video start time	-	Set the video start time in the format "Xh Ym Zs", where h stands for hours, m for minutes and s for seconds. For example, 1h 22m 34s, 55m 12s, 34s etc.	no
Text	-	-	no
Preview Image	1280px x 720px	In bilingual countries you can select different preview images for each language field	no

Module Overview

CMS Resources

Home

Main Modules Overview

General Notes

Filter Main Modules by Content

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Module Specifications

Features

Example

Settings

Contact Form Horizontal

Request Settings

Module Specifications

Features

Example

With Contact Teaser

Example

With White Paper Teaser

Settings

White Paper Settings

Module Specifications

Features

Example

Settings

Headline - Subheadline

B2B Service Sliding-Teaser

B2B Service Teaser

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

Module Specifications

Features

Example

Settings

How To

Module Specifications

Features

Note on content form anchors

Example

Module Specifications

Features

Example

Settings

Module Specifications

Example

Image Rich Text (Text^, Image^, Caption)