Anatomy of a DML Block:
A DML Block starts and ends with <dys-block>. After that comes one or more <dys-row>, containing one or more <dys-column>. Your content will sit inside the columns.
Multiple columns in a row will automatically be:
- •Stacked in mobile view - responsive design by default
- •Evenly divided, eg. 2 columns will each take up 50% of your body width
- •This can be modified with attributes (eg.
Check the DML Documentation to see full details!
Basic DML Elements
Your template’s contents will be contained inside of elements nested inside of a dys-column. The most basic elements are:
- • Can add attributes to set font family, size, color, line height, etc.
- • Works very similarly to dys-text, but with larger default styling
- • Href and text content can be made editable
- • Alt-text, title, image source, and link url can be editable
Check out the DML Documentation to see a full list of attributes that can be used to customize each of these elements
One of the benefits of DML is the ability to edit your block content without touching the underlying code when building a template. Use these attributes to define what content can be changed in the template editor:
- • Makes elements available to be changed in the visual editor
- • Required to use the next two attributes
- • Each editable attribute requires a name that is unique to the block.
- • Lets you specify which fields should be editable and which should be locked
- • Allows certain styles of an element to be changed in the visual editor
Putting it all Together
Check out this sample block in the DML Playground to see the DML we’ve covered so far in action.
How does it look in the editor?
With the editable fields set in this example, this is what you would see if you were editing this block in a template:
This example block is also a good opportunity to practice modifying these elements. Some things to try include:
- • Change the background-color of the row
- • Change the color and background-color of your button
- • Set the left column’s width to 25% and both columns’ vertical-align to middle
- • Try setting different values for padding in some of your elements
Part 2: Advanced Structures & Elements