Template elements

In this article, you will find a list explaining the elements you can choose from when creating templates

Xander Wijering avatar
Written by Xander Wijering
Updated over a week ago

At the moment of writing, you can choose between 13 different elements with their own functionality to build a template in Datatrics.

In this article, we want to show you how you can use these elements optimally.

Title

The title is a text element that is intended to introduce the subject of the template. You can choose between H1, H2, and H3 to select the preferred size. Next, you can configure text options that most text editors like font family, colours, alignment, and spacing.

Paragraph

Paragraphs are text elements that are intended to be smaller than the titles. These are used a lot for supportive text in templates. In item recommendations, paragraphs can be used as persuasions. Besides that, it usually prompts merge tags like descriptions or the brand.

Just like the title, paragraphs support the possibility of configuring text options like font family, colours, alignment, and spacing.

List

Lists are basically paragraphs, the only difference between those two is that lists are intended to sum up a number of things like USPs, rules or steps. You can choose between ordered and unordered lists, style types, and other text options that paragraphs offer.

Image

Images are used to give your audience a visual impression. You can use it for a lot of reasons. some examples of using images are to show the look of your item, the design of a showroom, or just a predesigned banner.

To show dynamic images for product recommendations, you need to place a dynamic value, like {{item.image}}.

You can also use an existing image URL or upload an image from your computer. Besides that, you can give images an action URL to navigate to when clicking on it.

Button

Buttons are intended to give customers the option to navigate further to the desired location. In Datatrics templates, you can use the button element to open a web page, send an email, make a call, send an SMS, or use it for an internal link like a scroll element.

To place dynamic button URLs for product recommendations, you need to place a dynamic value, like {{item.url}}. Inside the button, you can add the desired call to action.

Buttons have lots of configuration options like setting the width, colours, text, padding, borders and alignment.

Divider

Dividers are horizontal lines intended to separate and emphasize different elements in your template. You can configure its colour, thickness, shape, width and alignment.

Spacer

Spacers are fillers in a row. They are intended to fill an empty block in a row inside the template. You cannot configure anything besides its height.

Social

Socials are icons used in templates to show customers your social media accounts. You can link these icons to your account. These are used for social media touchpoints and footers in mailings.

Tip: once configured, you can save the row to reuse it later

You can select the icon collections for colouring, add existing or upload custom icons and add spacing.

HTML

For more experienced front-end developers, we added the HTML element. Here, you can add your own custom HTML. By using this, you can create forms, create custom blocks, and inject new HTML into your website.

Video

You can add videos to your templates. You can embed it, use a thumbnail, or host it yourself by pasting a video URL. Besides that, you can decide to add controls and loops to the videos. Supported sources are YouTube and Vimeo.

Icons

With icons, you can add a small list of horizontal images. You can use this to show payment methods, brands you own, or appealing customers.

At the moment of writing, Datatrics does not have default payment methods to use. Therefore you can use image links of the icons or upload the icons from your computer.

Menu

Menus are meant for creating small menus in your touchpoints like introducing categories. These menus can expand and collapse, which can be useful for mobile devices.

Did this answer your question?