Home Design Shops: Content Element Parser documentation

You can find all created elements for Home Design Shops.

Targeting links

You can give an linkable element target="_blank" (or 'target': '_blank' in a table element) to open the link in a new tab or window. See the target attribute informatie page for more info.

You can use targeting on the following elements:

  • Button
  • CTA
  • Featured
  • Image
  • Index
  • Promo

NOTE Homepage slider changed

If you see the homepage slider not right aligned to the content, please add ,0 as last argument to the slider module (nr: 195)

NEW! Google Optimize for all elements

All of our elements can be used with Google Optimize. Give it an expirement_id on the parent of the element. This will hide the element by default. If you want to show the an element as default, you need to put name on the element, so you can reference it in Google Optimize. You can see an example at the Featured element.


Experiment example

If the experiment_id is experiment_1, it will generate an id with value experiment_1 on the element and it adds a class with the name go-experiment for hiding the element.


Default show example

If you wish to have a default element displayed, you will need to name your element. Simply put a name attribute on your element and it will generate an id property with name value on the element.

Accordion

Basic

The basic usage of an accordion

[element accordion
row_1="['title':'Deurmat kopen', 'text': 'Tekst deurmat [element button text="Koop deurmat"]']"
row_2="['title':'Kokosmat kopen', 'text': 'Tekst kokosmat\n[element button text="Koop kokosmat"]']"]

Collapse a row

You can collapse a row with the open="row_1" parameter.

[element accordion
row_1="['title':'Deurmat kopen', 'text': 'Lorem ipsum dolor sit..']"
row_2="['title':'Kokosmat kopen', 'text': 'Tekst kokosmat\n[element button text="Koop kokosnoot"]']"
open="row_1"]

Example with a table

[element accordion
row_1="['title':'Accordion met daarin een tabel', 'text': '[element table head_column_1|center="Header text center" row_1_column_1|center="Column text center" row_2_column_1|center="[element button text="Klik hier" link="#"]"]']"]

Accordion with list element

Example of the accordion with list element

[element accordion
row_1="['title':'Deurmat kopen', 'text': '[element lists type="circle" item_1_title="Item 1" item_1_text="Lorem ipsum blae" item_2_title="Item 2" item_2_text="Lorem ipsum blae 2" item_3_title="Item 2" item_3_text="Lorem ipsum blae 3"]']"
row_2="['title':'Kokosmat kopen', 'text': 'Tekst kokosmat\n[element button text="Koop kokosmat"]']"]

Google FAQ Page

Use as FAQ for Structured Data

[element accordion
as_faq="true"
row_1="['title':'Deurmat kopen', 'text': 'Tekst deurmat [element button text="Koop deurmat"]']"
row_2="['title':'Kokosmat kopen', 'text': 'Tekst kokosmat\n[element button text="Koop kokosmat"]']"]

Scroll to and open accordion element with anchor link

If you want to automatically scroll to and open an accordion row you can do so by using a button-link or index element.
To make a button-link or index element scroll to an accordion element you will have to give the accordion an id. To do so you can add id="*" (* has to be an unique string consisting of text or numbers) to the accordion element.

button-link element
After you have given the accordion an unique id you can add the link following link #accordions-id (where accordions-id will have to be equal to the unqiue id of the accordion).
And you can add open_accordion_row="*" (* has to be the corresponding number of the row you want to scroll to). Now when you click at the button it will scroll the desired row and will automatically open it.

Example of the button-link element with these parameters

[element button-link text="A link button" class="block text-center" link="#accordions-id" open_accordion_row="2"]

index element
After you have given the accordion an unique id you can add the link following link #accordions-id (where accordions-id will have to be equal to the unqiue id of the accordion) to an index items link.
And you can add 'open_accordion_row': '*' (* has to be the corresponding number of the row you want to scroll to). Now when you click at the index item it will scroll the desired row and will automatically open it.

Example of the index element with these parameters

[element index
item_1="['text':'Scroll naar row 1', 'link': '#accordions-id', 'open_accordion_row': '1']"
item_2="['text':'Scroll naar row 2'', 'link': '#accordions-id', 'open_accordion_row': '2']"
item_3="['text':'Andere link', 'link': '#']"]

Tags within accordion text

You can use <h1>,<h2>,<h3>,<h4>,<h5> tags in the accordion text.

[element accordion
as_faq="true"
row_1="['title':'Deurmat kopen', 'text': '<h5>Ik ben een h5</h5>[element button text="Koop deurmat"]']"
row_2="['title':'Kokosmat kopen', 'text': '<h3>Ik ben een h3</h3>\n[element button text="Koop kokosmat"]']"]

Button

Basic example

A basic example of a button.

[element button class="hover:bg-orange-dark" text="A simple button" link="#"]
[element button class="bg-blue hover:bg-blue-dark" text="A simple button" link="#"]
[element button class="bg-gold hover:bg-gold-dark" text="A simple button" link="#"]

Full width

A example of a full width button.

[element button class="font-bold hover:bg-orange-dark block mb-4" text="A simple button" link="#"]
[element button class="font-bold bg-blue hover:bg-blue-dark block" text="A simple button" link="#"]
[element button class="font-bold bg-gold hover:bg-gold-dark block" text="A simple button" link="#"]

Button with text bold

A example of a button with bold text.

[element button class="font-bold hover:bg-orange-dark" text="A simple button" link="#"]
[element button class="font-bold bg-blue hover:bg-blue-dark" text="A simple button" link="#"]
[element button class="font-bold bg-gold hover:bg-gold-dark" text="A simple button" link="#"]

Small button

A small example of a small button.

[element button class="button--small hover:bg-orange-dark" text="A simple button" link="#"]
[element button class="button--small bg-blue hover:bg-blue-dark" text="A simple button" link="#"]
[element button class="button--small bg-gold hover:bg-gold-dark" text="A simple button" link="#"]

Button with text on multiple lines

A example of a button with text on multiple lines

[element button class="button--small hover:bg-orange-dark" text="This is to much\n text for a button" link="#"]
[element button class="button--small bg-blue hover:bg-blue-dark" text="This is to much\n text for a button" link="#"]
[element button class="button--small bg-gold hover:bg-gold-dark" text="This is to much\n text for a button" link="#"]

Button with ga event

A example of a button with ga event

[element button is_ga_event="true" class="hover:bg-orange-dark" text="This is to much\n text for a button" link="#"]
[element button is_ga_event="true" class="bg-blue hover:bg-blue-dark" text="This is to much\n text for a button" link="#"]
[element button is_ga_event="true" class="bg-gold hover:bg-gold-dark" text="This is to much\n text for a button" link="#"]

TypeForm popup button

A example of a button with TypeForm popup

[element button class="hover:bg-orange-dark" text="A simple button" typeform="ptPnQgkp" typeform_title="Formulier logomatten"]
[element button class="hover:bg-blue-dark" text="A simple button" typeform="ptPnQgkp" typeform_title="Formulier logomatten"]
[element button class="hover:bg-gold" text="A simple button" typeform="ptPnQgkp" typeform_title="Formulier logomatten"]

Inverted

Inverted button

[element button-inverted text="An inverted button"]
[element button-inverted class="border-blue" text="An inverted button"]
[element button-inverted class="border-gold" text="An inverted button"]

Inverted button with bold text and color

[element button-inverted class="font-bold text-orange" text="An inverted button"]
[element button-inverted class="font-bold text-blue border-blue" text="An inverted button"]
[element button-inverted class="font-bold text-gold border-gold" text="An inverted button"]

Inverted button with hover

[element button-inverted class="font-bold text-orange hover:text-white hover:bg-orange" text="An inverted button"]
[element button-inverted class="border-blue font-bold text-blue hover:text-white hover:bg-blue" text="An inverted button"]
[element button-inverted class="border-gold font-bold text-gold hover:text-white hover:bg-gold" text="An inverted button"]

Default

[element button-link text="A link button" class="block text-center" link="#"]

With new line

[element button-link text="A link button\nnew line" link="#"]

Icons

You can change the icon and icon color.

[element button-link icon="arrow-right" text="A link button with an orange arrow icon" link="#"]
[element button-link icon="checkmark" icon_color="blue" text="A link button with a blue checkmark icon" link="#"]
[element button-link icon="cross" text="A link button with an orange cross icon" link="#"]
[element button-link icon="arrow-right" text="A link button\nnew line" link="#"]

Carrousel

Product carrousel

A static wide carrousel with products.

[element carrousel-wide title="Onze nieuwste producten" productIds="102910,102909,102908,102907,102906,102905"]

It's also possible to overwrite the name of the product.

[element carrousel-wide product_1="['id': '102910', 'name': 'Nieuwe product naam']" product_2="['id': '102909']" product_3="['id': '102908']"]

Video carrousel

A static wide carrousel with video cards. The dimension of the video is: 180x320px

[element carrousel-wide title="" hide_border="true" titles_only="true"
item_1="['title': 'Premium Houder', 'video': 'https://test.homedesignshops.nl/akoestische-panelen-kantine.mp4']"
item_2="['title': 'Geen audio', 'video': 'https://test.homedesignshops.nl/video-kantoor-it-januari-2024.mp4']"
item_3="['title': 'Verfbak', 'video': 'https://test.homedesignshops.nl/kerstboom-in-kantine.mp4']"
item_4="['title': 'Vachtkroller', 'video': 'https://test.homedesignshops.nl/akoestische-panelen-kantine-horizontaal.mp4']"]

Video carrousel brede videos

A static wide carrousel with video cards. The dimension of the video is: 422x238px

[element carrousel-wide title="" hide_border="true" titles_only="true" wide_video="true"
item_1="['title': 'Premium Houder', 'video': 'https://test.homedesignshops.nl/1-2024-video-arte-spring-2023-wallcovering-collections-1.mp4', 'autoplay': 'true']"
item_2="['title': 'Geen audio', 'video': 'https://test.homedesignshops.nl/1-2024-video-arte-wallcoverings-intro-vid-1.mp4']"
item_3="['title': 'Verfbak', 'video': 'https://test.homedesignshops.nl/1-2024-video-the-story-behind-the-design-manila-1.mp4']"]

Static carrousel

A basic example of the static carrousel element.

[element carrousel title="Aanbevelings carrousel"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'price': '16,95', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'price': '5,-', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'price': '2,50', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

Static carrousel without border

A basic example of the static carrousel element without a border.

[element carrousel title="Aanbevelings carrousel" hide_border="true"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'price': '16,95', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'price': '5,-', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'price': '2,50', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

Static carrousel without price

A basic example of the static carrousel element without a price.

[element carrousel title="Aanbevelings carrousel"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

Static carrousel without title

A basic example of the static carrousel element without a title.

[element carrousel
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

Static carrousel with different units

A basic example of the static carrousel element without a title.

[element carrousel
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'price': '16,95', 'unit': 'per paar', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'price': '5,-', 'unit': 'per gram', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'price': '2,50', 'unit': 'per 5 stuks', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

A basic example of the static carrousel with prefix and product.

[element carrousel title="Aanbevelings carrousel"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'price': '16,95', 'product_id': '12345', 'prefix': 'v.a', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://www.paint-green.nl/premium-krijtverfroller-incl.-vachtpatroon-18-cm--compleet.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'price': '5,-', 'product_id': '123456', 'prefix': 'v.a', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/verfbak-18cm-met-5x-inzetbak-voor-krijtverfroller.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'price': '2,50', 'product_id': '1234567', 'prefix': 'v.a', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://www.paint-green.nl/lakroller-small.jpg']"]

Carrousel wide

A static wide carrousel.

[element carrousel-wide title="Aanbevelings carrousel"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'description': 'Hier komt de omschrijving te staan er nog veel meer tekst komt er te staan bla lablablablablab lab alb', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'description': 'Hier komt de omschrijving te staan', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'description': 'Hier komt de omschrijving te staan', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"]

Carrousel wide without description

A static wide carrousel without description.

[element carrousel-wide title="Aanbevelings carrousel"
item_1="['title': 'Premium Houder incl. vachtpatroon 18 cm | Compleet', 'link': 'https://www.paint-green.nl/premium-houder-incl.-vachtpatroon-18-cm-compleet', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"
item_2="['title': 'Verfbak geschikt voor vachtroller 18 cm incl. 5x inzetbak', 'link': 'https://www.paint-green.nl/roller-verfbakje-voor-little-greene-krijtverf', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"
item_3="['title': 'Vachtkroller patroon 10 cm voor Little Greene Krijtverf', 'link': 'https://www.paint-green.nl/lakroller-patroon-10-cm-voor-little-greene-krijtverf', 'image': 'https://test.laminaatdesignshop.nl/lds--naturel-laminaat--quickstep-eligna-venetiaanse-eik-naturel-hydroseal-el3908-laminaat-250x155.jpg']"]

Images only carrousel

A static wide carrousel with only images.

[element carrousel-wide title="" hide_border="true" images_only="true"
item_1="['title': 'Premium Houder', 'description': 'Hier komt de omschrijving te staan er nog veel meer tekst komt er te staan bla lablablablablab lab alb', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo.jpg']"
item_2="['link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo-2.jpg']"
item_3="['link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo-3.jpg']"]

Titles only carrousel

A static wide carrousel with only titles.

[element carrousel-wide title="" hide_border="true" titles_only="true"
item_1="['title': 'Premium Houder', 'description': 'Hier komt de omschrijving te staan er nog veel meer tekst komt er te staan bla lablablablablab lab alb', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo.jpg']"
item_2="['title': 'Verfbak', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo-2.jpg']"
item_3="['title': 'Vachtkroller', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.behangsite.com/arte-monsoon-facet-75301-bouvrie-promo-3.jpg']"]

Titles only carrousel with long images

A static wide carrousel with only titles and long images. The dimension of the image is: 250x376 px

[element carrousel-wide title="" hide_border="true" titles_only="true"
item_1="['title': 'Premium Houder', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"
item_2="['title': 'Verfbak', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"
item_3="['title': 'Vachtkroller', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"]

Card content and images

A static wide carrousel with card content and long images. The dimension of the image is: 250x376 px

[element carrousel-wide title="" hide_border="true" titles_only="true"
item_1="['type': 'card', 'title': 'Premium Houder', 'description': 'Hier komt de tekst', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://placehold.co/250x188', 'image-position': 'bottom']"
item_2="['title': 'Verfbak', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"
item_3="['type': 'card', 'title': 'Premium Houder', 'description': 'Hier komt de tekst', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301']"
item_4="['title': 'Verfbak', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"
item_5="['title': 'Verfbak', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"
item_6="['title': 'Vachtroller', 'link': 'https://www.behangsite.com/behang-arte-monsoon-facet-75301', 'image': 'https://www.homedesignshops.nl/arte-alaya-katan-silk-nieuw-brandpage.jpg']"]

Cherryproductfilters

cherryproductfilters example

A basic example of the cherryproductfilters element.

[element cherryproductfilters total_placeholders="3"]

Cherryproductlist

cherryproductlist example

A basic example of the cherryproductlist element.

[element cherryproductlist name="cherryproductlist"]

Collapsablecontent

Collapsable content example

A basic example of the collapsablecontent element.
[element collapsablecontent content="Hier komt een [element button-link text="link" link="#" class="text-blue"] die ergens heen gaat of denk je van niet. Verder staat er nog wat extra tekst in."]
Change button text

Provide show_more_text="Toon meer" and show_less_text="Toon minder" to change the action button texts.

Provide show_less_button="true" to let the user toggle the content.

[element collapsablecontent
show_more_text="Toon meer"
show_less_text="Toon minder"
show_less_button="true"
content="Hier komt een [element button-link text="link" link="#" class="text-blue"] die ergens heen gaat of denk je van niet. Verder staat er nog wat extra tekst in."]

A basic example of the index element with GA non interaction events.

[element collapsablecontent
is_ga_event="true"
ga_non_interaction="true"
show_more_text="Toon meer"
show_less_text="Toon minder"
show_less_button="true"
content="Hier komt een [element button-link text="link" link="#" class="text-blue"] die ergens heen gaat of denk je van niet. Verder staat er nog wat extra tekst in."]

Colors

Colors

You can use the colors for text and backgrounds. You can apply it as an class.

Example:
bg-{color_name} for background colors.
text-{color_name} for text colors.

Example elements

[element button class="button bg-blue" text="A simple button" link="#"]
[element button class="button bg-black" text="A simple button" link="#"]
[element button class="button bg-orange-light text-black" text="A simple button" link="#"]

NOTE: Not all elements support the class attribute.

Color palette

Cookieconsent

Cookie Consent example

A basic example of the Cookie Consent element.

[element cookieconsent standard_title="Standaard" standard_explanation="Kies voor standaard als je wilt dat de simpele functies van de website goed werken:" standard_item_1="De website werkt zoals je verwacht." standard_item_2="We onthouden jouw login-gegevens en logt veilig in." standard_item_3="We bewaren je winkelmand van je laatste bezoek." standard_item_4="Om de website te verbeteren krijgen we analytische cookies." personal_title="Persoonlijk" personal_explanation="Kies voor persoonlijk als je een persoonlijke online winkelervaring wilt:" personal_item_1="De website werkt zoals je verwacht." personal_item_2="We onthouden jouw login-gegevens en je logt veilig in." personal_item_3="We bewaren je winkelmand van je laatste bezoek." personal_item_4="We gebruiken analytische cookies om de website te verbeteren en om je relevanten artikelen tonen op basis van je instellingen."]

Cta

Decision

CTA Decision example

A basic example of the CTA Decision element.

[element cta-decision link="#" text="Ontdek onze keuzehulp"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" sub_text="Kies eenvoudig uit 3 situaties"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" sub_text="Kies eenvoudig uit 3 situaties" button_text="Help mij kiezen"]

[element cta-decision link="#" icon_color="blue" class="text-orange" text="Ontdek onze keuzehulp" sub_text="Kies eenvoudig uit 3 situaties" button_text="Help mij kiezen" button_class="bg-orange text-white"]

CTA Decision styling

Styling examples of the CTA Decision element.

[element cta-decision link="#" text="Ontdek onze keuzehulp"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" class="text-orange" icon="checkmark" icon_color="blue"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" class="bg-grey"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" class="bg-blue text-white"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" sub_text="Kies eenvoudig uit 3 situaties"]

[element cta-decision link="#" text="Ontdek onze keuzehulp" class="bg-blue text-white" sub_text="Kies eenvoudig uit 3 situaties" button_text="Help mij kiezen" button_class="text-blue bg-white"]

CTA Decision with image

Styling examples of the CTA Decision element.

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp"]

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp" class="text-orange" icon="checkmark" icon_color="blue"]

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp" class="bg-grey"]

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp" class="bg-blue text-white"]

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp" sub_text="Kies eenvoudig uit 3 situaties"]

[element cta-decision image="https://test.homedesignshops.nl/guy-decision-help.png" link="#" text="Ontdek onze keuzehulp" class="bg-blue text-white" sub_text="Kies eenvoudig uit 3 situaties" button_text="Help mij kiezen" button_class="text-blue bg-white"]

Divider

Dividers

Dividers are only visible on phones and tablets. On desktop their hidden.

A basic example of the divider element.

[element divider] [element divider class="bg-blue"] [element divider class="bg-orange"]

Different heights

A example how you can change the height of the divider.

[element divider height="4px"] [element divider class="bg-blue" height="16px"] [element divider class="bg-orange" height="32px"]

Multiple dividers on the same page

A example how you can apply multiple dividers on the same page

[element divider id="divider-1"] [element divider id="divider-2"] [element divider id="divider-3"]

Heroimage

Hero Image with multiple images per screen

Een voorbeeld van het hero image element met verschillende afbeeldingen per device.
Het image attribuut is altijd verplicht. De afmetingen van de heroimage per device zijn:

  • mobiel: 425 x 189 px
  • desktop: 1170 x 250 px.

Het is niet verplicht om voor ieder device een afbeelding op te geven. Je kunt er dus bijvoorbeeld voor kiezen om alleen voor desktop een andere afbeelding op te geven.

Als je alleen de standaard heroimage wilt gebruiken en niet per device wilt afwijken is de afmeting 1170 x 250 px.

[element heroimage
image_mobile="https://www.homedesignshops.nl/hds-homepage-hero-image-mobile-07-2023-5.jpg"
image_desktop="https://www.homedesignshops.nl/hds-homepage-hero-image-07-2023-7.jpg"
link="#link"
title="Premium Woon Design"
heading="h2"
c2a="[element button class="hover:bg-orange-dark" text="Call 2 action"]"]

Highlight

Basic example

A basic example of a highlight box.

[element highlight
title="Hightlight box"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"]

Inline example

A basic example of a highlight box inlined.

[element highlight-inline
title="Hightlight box"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"]

Without title example

A basic example of a highlight box without a title.

[element highlight
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"]

With icon

A basic example of a highlight box with icon.

[element highlight
icon="https://www.homedesignshops.nl/hds-icon-tip-highlight.png"
title="Titel komt hier" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"]

Colors

You can choose between: default, light-blue and orange

[element highlight
title="Highlight box default color"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"] [element highlight
color="light-blue"
title="Highlight box light-blue color"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"] [element highlight
color="orange"
title="Highlight box orange color"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"] [element highlight
color="black"
title="Highlight box black color"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate deleniti perspiciatis quia voluptatum!"]

Icon

Icon checkmark

A basic example of a checkmark icon.

[element icon type="checkmark" color="#42AF28" class="bordered small"]

Icon cross

A basic example of a cross icon.

[element icon type="cross" color="#AB113A" class="bordered small"]

Index

Index example

A basic example of the index element. You can change the background- and text color.

[element index
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="blue"
textcolor_items="white" item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="orange"
textcolor_items="white" item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="white"
textcolor_items="blue"
bordercolor_items="#cccccc"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element to show all index items.

[element index
show_all="true"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="blue"
show_all="true"
textcolor_items="white" item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="orange"
show_all="true"
textcolor_items="white" item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

[element index bgcolor_items="white"
show_all="true"
textcolor_items="blue"
bordercolor_items="#cccccc"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element with GA event for all items.

[element index
is_ga_event="true" show_all="true"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element with GA event for single item.

[element index
show_all="true"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#', 'is_ga_event': 'true']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element with GA non interaction events.

[element index
is_ga_event="true"
ga_non_interaction="true"
show_all="true"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element with GA non interaction events for a single item.

[element index
show_all="true"
item_1="['text':'Top 5 vloerkleden', 'link': '#']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': '#', 'is_ga_event': 'true', 'ga_non_interaction': 'true']"
item_3="['text':'Uitgelichte vloerkleden', 'link': '#']"]

A basic example of the index element with marked active items. The URL given to the item should contain the same filter as in the users URL bar.

[element index
bgcolor_items="white" textcolor_items="blue" bordercolor_items="#213B61"
active_bgcolor_items="orange" active_textcolor_items="white" active_bordercolor_items="transparent"
item_1="['text':'Top 5 vloerkleden', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_3="['text':'Uitgelichte vloerkleden', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

Color and image example

Use a color or image as the button icon. Use the parameter "circle". You can paste in any color or image url.
You can make items active by using 'active': 'true'

[element index
item_1="['text':'Top 5 vloerkleden', 'link': 'https://www.google.com']"
item_2="['text':'Nieuwe vloerkleden collectie', 'link': 'https://www.google.com', 'active': 'true']"
item_3="['text':'Vette behangs', 'link': 'https://www.google.com']"
item_4="['text':'Uitgelichte vloerkleden', 'link': 'https://www.google.com']"]

[element index bgcolor_items="white"
textcolor_items="black"
bordercolor_items="#707070"
item_1="['text':'Top 5 vloerkleden', 'link': '#', 'circle': '#FF0000']"
item_2="['text':'Nieuwe vloerkleden collectie', 'circle': 'https://www.laminaatdesignshop.nl/kleurfilter-icon-rood-laminaat.jpg', 'link': 'https://content-elements-docs.app2/cep/live-edit']"
item_3="['text':'Vette behangs', 'link': '#', 'circle': 'green']"
item_4="['text':'Uitgelichte vloerkleden', 'link': '#', 'circle': 'yellow']"]

Grey variant example

Use the variant_color for other variants

[element index
is_ga_event="true"
variant_color="grey"
item_1="['text':'Classic', 'link': 'https://test.veegjevoeten.nl/forbo-coral-classic-deurmat']"
item_2="['text':'Brush', 'link': 'https://test.veegjevoeten.nl/forbo-coral-brush-deurmat']"
item_3="['text':'Duo', 'link': 'https://test.veegjevoeten.nl/forbo-coral-duo-deurmat']"
item_4="['text':'Welcome', 'link': 'https://test.veegjevoeten.nl/forbo-coral-welcome-deurmat']"
item_5="['text':'Luxe', 'link': 'https://test.veegjevoeten.nl/forbo-coral-luxe-deurmat']"
item_6="['text':'Grip', 'link': 'https://test.veegjevoeten.nl/forbo-coral-grip-deurmat']"]

Large chips

Set type="large" and checkmark="false" for the large chips.

[element index bgcolor_items="white"
type="large"
checkmark="false"
textcolor_items="black"
bordercolor_items="#707070"
item_1="['text':'Top 5 vloerkleden', 'link': '#', 'background': 'https://www.laminaatdesignshop.nl/kleurfilter-icon-rood-laminaat.jpg', 'active': 'true']"
item_2="['text':'Nieuwe vloerkleden collectie', 'background': 'https://www.laminaatdesignshop.nl/kleurfilter-icon-beige-laminaat.jpg', 'link': 'https://content-elements-docs.app2/cep/live-edit']"
item_3="['text':'Vette behangs', 'link': '#', 'background': 'https://www.laminaatdesignshop.nl/kleurfilter-icon-wit-laminaat.jpg']"
item_4="['text':'Uitgelichte vloerkleden', 'link': '#', 'background': 'https://www.laminaatdesignshop.nl/kleurfilter-icon-lichtgrijs-laminaat.jpg']"]

Image only chips

Set images_only="true" and for image only chips. Please give all images the same dimension (150x35) for the best result.

[element index bgcolor_items="white"
type="large"
images_only="true"
checkmark="false"
textcolor_items="black"
bordercolor_items="#707070"
item_1="['text':'Arte', 'link': '#', 'background': 'https://test.behangsite.com/arte-behang-index-1.jpg']"
item_2="['text':'Eijffinger', 'background': 'https://test.behangsite.com/eijffinger-behang-index-1.jpg', 'link': 'https://content-elements-docs.app2/cep/live-edit']"
item_3="['text':'Élitis', 'link': '#', 'background': 'https://test.behangsite.com/elitis-behang-index-1.jpg']"
item_4="['text':'BN Wallcoverings', 'link': '#', 'background': 'https://test.behangsite.com/bn-wallcoverings-behang-index-1.jpg']"]

Filters

Index filters example

A basic example of the index filter element. You can change the background color.

[element index-filters
id="one" item_1="['bg_color':'#C61B1B', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['bg_color':'#F2BB30', 'link': 'https://content-elements-docs.app/parser']"
item_3="['bg_color':'#609D75', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_4="['bg_color':'#008FD5', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

Change the border color

Use the ID parameter to use different styling for the elements.

[element index-filters
id="one"
item_1="['bg_color':'#C61B1B', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['bg_color':'#F2BB30', 'link': 'https://content-elements-docs.app/parser']"
item_3="['bg_color':'#609D75', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_4="['bg_color':'#008FD5', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

[element index-filters
id="two"
active_bordercolor="red"
item_1="['bg_color':'#C61B1B', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['bg_color':'#F2BB30', 'link': 'https://content-elements-docs.app/parser']"
item_3="['bg_color':'#609D75', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_4="['bg_color':'#008FD5', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

Use an image as the background. You can combine them with colors as well

Image must be 42x42 px

[element index-filters
item_1="['bg_image':'/images/hout.png', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['bg_image':'/images/marmer.png', 'link': 'https://content-elements-docs.app/parser']"
item_3="['bg_image':'/images/beton.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_4="['bg_image':'/images/marmerzwart.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

Change the title of a color filter

[element index-filters
is_ga_event="true" item_1="['bg_image':'/images/hout.png', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/', 'title': 'Hout']"
item_2="['bg_image':'/images/marmer.png', 'link': 'https://content-elements-docs.app/parser', 'title': 'Marmer']"
item_3="['bg_image':'/images/beton.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Beton']"
item_4="['bg_image':'/images/marmerzwart.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Marmer zwart']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Paars']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Wit']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Grijs']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/', 'title': 'Zwart']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/', 'title': 'Rood']"]

Change the size of the color filters

Note: Change the image size to the size you give in.

[element index-filters
size="60px" item_1="['bg_image':'/images/hout.png', 'link': 'https://www.homedesignshops.nl/top-5-vloerkleden/']"
item_2="['bg_image':'/images/marmer.png', 'link': 'https://content-elements-docs.app/parser']"
item_3="['bg_image':'/images/beton.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_4="['bg_image':'/images/marmerzwart.png', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_5="['bg_color':'#673AB7', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_6="['bg_color':'#F5EEDE', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_7="['bg_color':'#C4C4C4', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_8="['bg_color':'#2E3336', 'link': 'https://www.homedesignshops.nl/nieuwe-vloerkleden/']"
item_9="['bg_color':'#9D3140', 'link': 'https://www.homedesignshops.nl/uitgelichte-vloerkleden/']"]

Lists

List example

A basic example of the list element.

[element lists type="circle"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists type="circle"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Orange style

Example with orange styled bullets.

[element lists type="square" color="orange"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists type="square" color="orange"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Grey style

Example with grey styled bullets.

[element lists type="square-inverted" color="grey"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists type="square-inverted" color="grey"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Inverted style

Example with inverted styled bullets.

[element lists type="square-inverted"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists type="square-inverted"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Font sizes

Example with font sizes.

[element lists type="square-inverted"
font_size="13px"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists type="square-inverted"
font_size="15px"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Icon

Icon lists

A basic example of the icon lists element.

[element lists-icon image="https://www.homedesignshops.nl/icon-bezorgen-oranje.png"
item_1="Lorem ipsum blae"
item_2="Lorem ipsum blae"
item_3="Lorem ipsum blae"]

[element lists-icon image="https://www.homedesignshops.nl/icon-bezorgen-oranje.png"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Custom icons

A basic example of a custom icon lists element.

[element lists-icon
item_1_title="Item 1" item_1_text="Lorem ipsum blae 33333" item_1_icon="https://www.homedesignshops.nl/icon-retourneren.png"
item_2_title="Item 2" item_2_text="Lorem ipsum blae 2" item_2_icon="https://www.homedesignshops.nl/icon-klantenservice.png"
item_3_title="Item 3" item_3_text="Lorem ipsum blae 3" item_3_icon="https://www.homedesignshops.nl/icon-bezorgen-oranje.png"]

Font sizes

Example of font sizes.

[element lists-icon image="https://www.homedesignshops.nl/icon-bezorgen-oranje.png"
font_size="13px"
item_1="Lorem ipsum blae"
item_2="Lorem ipsum blae"
item_3="Lorem ipsum blae"]

[element lists-icon image="https://www.homedesignshops.nl/icon-bezorgen-oranje.png"
font_size="15px"
item_1="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_2="['title': 'Item 1', 'text': 'Lorem ipsum blae']"
item_3="['title': 'Item 1', 'text': 'Lorem ipsum blae']"]

Numeric

Numeric lists

A basic example of the numeric list element. The default color is blue.

[element lists-numeric
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists-numeric color="blue" font_weight="bold"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

Orange style

Example with orange styled bullets.

[element lists-numeric color="orange"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists-numeric color="orange" font_weight="bold"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

Grey style

Example with grey styled bullets.

[element lists-numeric color="grey"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists-numeric color="grey" font_weight="bold"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

Font sizes

Example with font sizes.

[element lists-numeric color="grey"
font_size="13px"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

[element lists-numeric color="grey" font_weight="bold"
font_size="15px"
item_1="Item 1"
item_2="Item 2"
item_3="Item 3"]

Newsletter

Newsletter example

A basic example of a newsletter opt-in form.
You could add a variable named campaign_code which should contain a MailPlus campaign code. This would trigger the campaign but would not add the user to the newsletter list.

[element newsletter
title="Word nieuwsbrief member!"
text="Exclusieve acties. Vakkundige tips. Inspirerende foto's!"
subtext="Max. 2 per maand. Uitschrijven kan altijd."
message="Yes, je bent nu ingeschreven voor onze nieuwsbrief!" cta_text="Schrijf mij in" icon="https://test.homedesignshops.nl/opt-in-newsletter-icon.png" iconsuccess="https://test.homedesignshops.nl/opt-in-newsletter-icon-verstuurd.png"]

Promo

Promo standard

A basic example of the promo element.

[element promo
title="Uitgelichte vloerkleden"
columns="3"
item_1="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Promo with title below

A example of the promo element with the title below.

[element promo
title="Uitgelichte vloerkleden"
columns="3"
item_1="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Promo standard centered

A basic example of the promo element with the items centered.

[element promo
title="Uitgelichte vloerkleden"
class="text-center"
columns="3"
item_1="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_above':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Promo with title below centered

A example of the promo element with the title below and the items centered.

[element promo
title="Uitgelichte vloerkleden"
class="text-center"
columns="3"
item_1="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Promo with GA event for all items

A example of the promo element with GA event for all items.

[element promo
is_ga_event="true"
title="Uitgelichte vloerkleden"
class="text-center"
columns="3"
item_1="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Promo with GA event for a single event

A example of the promo element with GA event for a single event.

[element promo
title="Uitgelichte vloerkleden"
class="text-center"
columns="3"
item_1="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Hoogpolige vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_2="['is_ga_event': 'true', 'title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Kinder vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"
item_3="['title_below':'Lorem Ipsum', 'link': '#', 'image': 'https://placeholder.pics/svg/600x400', 'text': '[element button-link text="Wollen vloerkleden"]', 'c2a': '[element button-link icon="arrow-right" text="Klik hier"]']"]

Full

Promo full with image left

A example of the promo full element with the image on the left. The C2A does not need a link attribute, because there's a full link on the element.

[element promo-full
link="#"
title="Uitgelichte vloerkleden"
image="https://placeholder.pics/svg/600x300"
align="left"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
c2a="[element button-link icon="arrow-right" text="Klik hier"]"]

Promo with image right

A example of the promo full element with the image on the right. The C2A does not need a link attribute, because there's a full link on the element.

[element promo-full
link="#"
title="Uitgelichte vloerkleden"
image="https://placeholder.pics/svg/600x300"
align="right"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
c2a="[element button-link icon="arrow-right" text="Klik hier"]"]

Promo with image link and link in text

A example of the promo full element with an image link and link in text

[element promo-full
title="Uitgelichte vloerkleden"
image="https://placeholder.pics/svg/600x300"
image_link="#"
align="right"
text="Lorem ipsum dolor sit amet, consectetur adipiscing [element button-link link="#" text="link"] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
c2a="[element button-link icon="arrow-right" text="Klik hier"]"]

Questionnairefilter

questionnairefilter example

A basic example of the questionnairefilter element.

[element questionnairefilter
question_1="['text': 'Welke kleur zoek je?', 'property_category_id': '567']"
question_2="['text': 'Welke planklengte zoek je?', 'property_category_id': '560']"]

questionnairefilter with ga events

A basic example of the questionnairefilter element with ga events

[element questionnairefilter
is_ga_event="true"
ga_non_interaction="true"
question_1="['text': 'Welke kleur zoek je?', 'property_category_id': '567']"
question_2="['text': 'Welke planklengte zoek je?', 'property_category_id': '560']"]

Quicksearch

Quicksearch

Examples of the quicksearch element.

[element quicksearch title="Voorbeeld van een titel"
text="Tekst tekst tekst tekst tekst"
placeholder="Zoek uw favoriete kleur"
icon="https://www.homedesignshops.nl/icon-zoek.png"]
Example without the title and text
[element quicksearch placeholder="Zoek uw favoriete kleur"
icon="https://www.homedesignshops.nl/icon-zoek.png"]
Example without the text
[element quicksearch placeholder="Zoek uw favoriete kleur"
title="Voorbeeld van een titel"
icon="https://www.homedesignshops.nl/icon-zoek.png"]
Example without the title
[element quicksearch placeholder="Zoek uw favoriete kleur"
text="Tekst tekst tekst tekst tekst"
icon="https://www.homedesignshops.nl/icon-zoek.png"]
It even works with google
[element quicksearch placeholder="Zoek uw favoriete kleur"
title="Zoek uw favoriete kleur"
text="Via Google Search"
search_url="https://www.google.nl/search?q="
icon="https://www.homedesignshops.nl/icon-zoek.png"]

Returns

Returns form

A basic example of the Returns element.

[element returns
]

Table

Table example

A basic example of a table.

[element table
head_column_1="[element button-link class="text-white hover:text-grey" text="Header text 1" link="#"]" head_column_2="[element button-link class="text-white hover:text-grey" text="Header text 2" link="#"]" head_column_3="[element button-link class="text-white hover:text-grey" text="Header text 3" link="#"]"
row_1_column_1="Row 1 and column 1 text" row_1_column_2="Row 1 and column 2 text" row_1_column_3="Row 1 and column 3 text"
row_2_column_1="Row 2 and column 1 text" row_2_column_2="Row 2 and column 2 text" row_2_column_3="Row 2 and column 3 text"
row_3_column_1="Row 3 and column 1 text" row_3_column_2="[element icon type="checkmark" color="#42AF28" class="bordered small"]" row_3_column_3="[element icon type="cross" color="#AB113A" class="bordered small"]"]

Table column alignment

A example of aligning columns in a table. You can center the content of a column by doing |center after the column name, like so:

[element table head_column_1|center="Header text center"
row_1_column_1|center="Column text center"
row_2_column_1|center="[element button text="Klik hier" link="#"]"]

You can use one or more of the following alignments: top|middle|bottom|left|center|right

Full example:

[element table
head_column_1="Header text 1" head_column_2="Header text 2" head_column_3="Header text 3"
row_1_column_1="Row 1 and column 1 text" row_1_column_2="Row 1 and column 2 text" row_1_column_3="Row 1 and column 3 text"
row_2_column_1="Row 2 and column 1 text" row_2_column_2|center="Row 2 and column 2 text" row_2_column_3|right="Row 2 and column 3 text"
row_3_column_1="Row 3 and column\n 1 text" row_3_column_2|center|middle="[element icon type="checkmark" color="#42AF28" class="bordered small"]" row_3_column_3|right|middle="[element icon type="cross" color="#AB113A" class="bordered small"]"]

Light

Light table example

A basic example of a light table.

[element table-light
head_column_1="Header text 1" head_column_2="Header text 2" head_column_3="Header text 3"
row_1_column_1="Row 1 and column 1 text" row_1_column_2="Row 1 and column 2 text" row_1_column_3="Row 1 and column 3 text"
row_2_column_1="Row 2 and column 1 text" row_2_column_2="Row 2 and column 2 text" row_2_column_3="Row 2 and column 3 text"
row_3_column_1="[element button text="Column 1"]" row_3_column_2|center="[element button text="Column 2"]" row_3_column_3|right="[element button text="Column 3"]"]

Typeformembed

Typeform Embed example

A basic example of the TypeformEmbed element.

[element typeformembed form_id="01JAYSX3J1RVNWR564D3TAFW1Y"]

Usps

Basic USPS

A basic example of the USPS element. Icons are max 40px by 40px.

[element usps
item_1="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_2="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_3="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"]

[element usps
item_1="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'title_class': 'centered']"
item_2="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'title_class': 'centered']"
item_3="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'title_class': 'centered']"]

[element usps
item_1="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_2="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_3="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"]

Coloring USPS

A example of coloring the background of the icons

[element usps
icon_bgcolor="blue"
item_1="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_2="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"
item_3="['image': 'https://www.homedesignshops.nl/icon-bezorgen-oranje.png', 'link': '#', 'title': 'Lorem ipsum', 'text': 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero']"]

Yotpo

Yotpo

Shows a Yotpo instance on the page

[element yotpo id="213027"]

Youtube

Youtube video

Format: 1400x1400 px

A basic example of the youtube element with a title.

[element youtube name="youtube"
url="https://youtu.be/bEJdADaaan0"
title="Inklemhor en inklemunit maatnemen met extra regel"]

An example with a custom image.

[element youtube name="youtube"
image="https://www.homedesignshops.nl/24-5-2019-nieuwe-slidebanners-hds-deurmat-4-2.jpg"
url="https://youtu.be/bEJdADaaan0"
title="Inklemhor en inklemunit maatnemen met extra regel"]

An example without a title.

[element youtube name="youtube" url="https://youtu.be/mkB_WCGXr2I"]