Part 2: Advanced Structures & Elements

Structures

In Part 1, we discussed the basic structural elements of a DML block and some of their default settings and behaviours. In this part, we will cover ways to modify that default behaviour, so that you can take more direct control over the layout of your template.

dys-divider & dys-spacer

Use these to create a divider line or add extra vertical space to your layout. Check the DML Documentation, linked above, for details on which attributes are available to be modified.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
      	Top Text
      </dys-text>
      <dys-divider/>
      <dys-text>
      	Bottom Text
      </dys-text>
    </dys-column>
        <dys-column>
      <dys-text>
      	Top Text
      </dys-text>
      <dys-spacer container-background-color="lightgrey"/>
      <dys-text>
      	Bottom Text
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
Example block using dys-divider and dys-spacer

View in DML Playground

Grouping Columns with dys-group

By default, columns will stack vertically in mobile view. If you would like to change this behaviour, wrap your columns in <dys-group> to keep them next to each other.

<dys-block>
  <dys-row>
    <dys-column background-color="lightblue">
      <dys-text>
        Column 1
      </dys-text>
    </dys-column>
    <dys-column background-color="lightgreen">
      <dys-text>
        Column 2
      </dys-text>
    </dys-column>
  </dys-row>
  <dys-row>
    <dys-group>
      <dys-column background-color="lightpink">
        <dys-text>
          Column 3 - Group
        </dys-text>
      </dys-column>
      <dys-column background-color="lightyellow">
        <dys-text>
          Column 4 - Group
        </dys-text>
      </dys-column>
    </dys-group>
  </dys-row>
</dys-block>

Desktop: In desktop view, all columns will display in a horizontal row

Mobile: In mobile view, columns wrapped in dys-group will remain in a horizontal row

View in DML Playground

dys-mobile & dys-desktop

These tags allow you to take direct control over your desktop and mobile views – content wrapped in <dys-desktop> will only display on large screens, and <dys-mobile> will only display on small screens. This comes in handy for situations like wanting to use different images for desktop and mobile, or have a shorter title for smaller screens to avoid a line break.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-desktop>
        <dys-title color="red">
          Desktop Content
        </dys-title>
        <dys-img src="https://placekitten.com/900/500"/>
      </dys-desktop>
      <dys-mobile>
        <dys-title color="blue">
          Mobile Content
        </dys-title>
        <dys-img src="https://placekitten.com/500/500"/>
      </dys-mobile>
    </dys-column>
  </dys-row>
</dys-block>

Desktop: In desktop view, dys-desktop content will be displayed

Mobile: In mobile view, dys-mobile content will be displayed

View in DML Playground

Elements

In this section, we will give a quick overview of the remaining DML elements, as well as examples in the DML Playground, so that you can see them in action.

dys-hero

  •  • Used in place of dys-row
  •  • Allows you to set a background image which can have editable text on top of it
  •  • Great way to draw attention to the most important part of your email
  •  • Fluid height vs fixed height - determines how image changes on smaller screens
  •  • Setting a fallback background-color will help your content stand out if the user's email client has images turned off by default.
<dys-block>
  <dys-hero background-url="https://picsum.photos/id/536/600/400"
            background-width="600px"
            background-color="#000033"
            background-height="250px"
            height="250px"
            mode="fixed-height"
            vertical-align="middle"
            editable="hero">
    <dys-title color="#FFFFFF" editable="title" font-weight="bold">
      Your Title
    </dys-title>
    <dys-text color="#FFFFFF" editable="subtitle" font-size="20px">
      Your title and text will sit on top of the background image
    </dys-text>
  </dys-hero>
</dys-block>
DML block using dys-hero

View in DML Playground

dys-table

  •  • Creates an HTML table in your template
  •  • Specific cells can be marked as editable
  •  • Can be used dynamically — more on that in Part 3!
<dys-block>
<dys-row>
    <dys-column>
      <dys-table padding-left='50px' padding-right='50px'>
        <tr>
          <th style='border-bottom:1px solid #ecedee;text-align:left;' 
            editable='th1'>
            Item
          </th>
          <th style='border-bottom:1px solid #ecedee;text-align:right;' 
            editable='th2'>
            Price
          </th>
        </tr>
        <tr>
          <td style='text-align:left;'>
            Apples
          </td>
          <td style='text-align:right;'>
            $1.00/lb
          </td>
        </tr>
        <tr>
          <td style='text-align:left'>
            Oranges
          </td>
          <td style='text-align:right;'>
            $1.22/lb
          </td>
        </tr>
      </dys-table>
    </dys-column>
  </dys-row>
</dys-block>
DML block using dys-table

View in DML Playground

dys-social

  •  • Built-in icons for a large number of platforms — full list is available in our DML Documentation
  •  • Default icons available in color, black, white — or upload custom icons
  •  • Circle, square, or default icon shapes
<dys-block>
  <dys-row>
    <dys-column>
      <dys-text align="center" font-weight="bold">Follow us!</dys-text>
      <dys-social icon-size="30px" theme="color" shape="circle">
        <dys-social-element name="facebook" href="https://example.com/">
          Facebook
        </dys-social-element>
        <dys-social-element name="twitter" href="https://example.com/">
          Twitter
        </dys-social-element>
        <dys-social-element name="linkedin" href="https://example.com/">
          Linkedin
        </dys-social-element>
      </dys-social>
    </dys-column>
  </dys-row>
</dys-block>
DML block using dys-social

View in DML Playground

dys-carousel

  •  • Carousel display of multiple images
  •  • Click arrows or thumbnail images to change view
  •  • In email clients where it’s not supported (like Outlook), dys-carousel will automatically fallback to hide arrows and display the first image only
<dys-block>
  <dys-row>
    <dys-column>
      <dys-carousel editable='carousel'>
        <dys-carousel-image src='https://picsum.photos/id/536/600/400' />
        <dys-carousel-image src='https://picsum.photos/id/110/600/400' />
        <dys-carousel-image src='https://picsum.photos/id/410/600/400' />
      </dys-carousel>
    </dys-column>
  </dys-row>
</dys-block>
DML block using dys-carousel

View in DML Playground

Practice

Now that we’ve covered the building blocks of DML, it’s time to create your own DML block from scratch. Here’s a block created in the DML Playground using <dys-desktop>/<dys-mobile>, <dys-divider>, <dys-social>, and some of the basic elements from Part 1. Try to re-create this as accurately as possible — when you’re ready, check out the solution. When you’ve finished, feel free to try styling the block using attributes!

Desktop:

Practice block in desktop view

Mobile:

Practice block in mobile view

Desktop:

Practice block in desktop view

Mobile:

Practice block in mobile view

Next:

Part 3: Templating Logic

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support