Semplates Documentation

Find your answers below or shoot us an email.

Documentation / Template Design

/ Use & test responsive content blocks

Mar '22 · 2 min read

Use & test responsive content blocks

Learn when and how to add responsive content blocks via Semplates' editor and the preview functionality.

More and more traffic continues to move to mobile devices. Therefore designing experiences for different sized screens becomes more important and emails are no exclusion to that trend. In this guide you will learn how to design responsive mail templates with Semplates.

Hiding content blocks on specific screens

For this example we will take a look at our Welcome Mail template. You might recognize it from your inbox.

As you can see in the editor the template includes two different footer block definitions. If we click onto the first block and scroll to the bottom of the content block options, we can see that the first footer is hidden on desktop screens:

Screenshot showcasing responsive content blocks in the Template editor.

Next, we click on the second block and then click on the Mobile Tab in the content block options. If we scroll down, we can see that the second footer is hidden on mobile screens:

Screenshot showcasing responsive content blocks in the Template editor.

It's simple as that! Simply define each content block twice and hide them on the respective screens.

Viewing responsive definitions

Go to the Template Preview. Here you can switch between Desktop (full-width) and Mobile (width: 400px) to investigate your template design on different screen sizes:

responsive-content-03

responsive-content-04

🍪

Our cookie policy

We use cookie technology to analyse the website traffic and page usage, improve the navigation experience and support our marketing efforts. If you accept, you grant us permission to store cookies on your device for those purposes only.
Please read our Data Privacy Policy for more information.

Accept all

Only necessary