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.
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.
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.
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.
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.
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-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!