13 – 1 or 2 Products

Description

This block can display one or two products with text and a button under each image tile. All of the elements can be hidden or shown and are fully editable. The text areas consist of an item title or description, price, and button. Of course, the price element is not fixed and can be used for any text-based purpose. Images can be side by side in desktop and mobile view and stacked in mobile.

Notice

To keep the quality of image responsiveness in smaller devices a minimum width of between 480px / 520px will cover all responsive devices when stacking is on.
Images may then look oversized in Edit mode but look okay in Preview mode. Edit the text area before loading the image(s).

Default block view

Desktop

Mobile

Formatting options

Padding

This refers to the space between the content of the block and its border. This can be edited in the Details Tab.

Number of Products

Use the drop-down to select the number of product tiles.

Stack Mobile Images

Changing the toggle will set the product tiles to stack in mobile or not.

Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

Space between Two Images

It allows you to change product spacing.

Left & Right Section - Hide/Show

Use the toggles to hide or show all the different elements. All the elements are independent of one another.

Left & Right Section - Line Height

Used to change the text line height.

As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.

Left & Right Section - Font Weight

Used to change the font weight for the text elements. All are independent of one another.

Links

It allows you to add the link to the image and CTA button.

CTA

All CTAs have multiple styling options. As with all colors, please use HEX values. These CTAs are not independent. Changing the setting will change the styles for both CTAs.

Space between two Products

This option edits the space between images on mobile when stacked. It will need to be updated using the options in the Advanced tab.

Compatibility

Currently, the CTA button curved border does not render in the devices listed below. Instead, the corners will be square.

GMX Chrome Windows 10
GMX Edge Windows 10
GMX Firefox Windows 10
Web.de Chrome Windows 10
Web.de Edge Windows 10
Web.de Firefox Windows 10