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.
<dys-block>
<dys-row>
<dys-column>
Content!
Responsive 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. <dys-column width=“25%”>)
• 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
Editable Content
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:
editable
• 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.
editable-fields
• Lets you specify which fields should be editable and which should be locked
editable-styles
• 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.
DML:
<dys-block>
<dys-row>
<dys-column>
<dys-comment>
This image's source url, alt text, and href will be editable in
the visual editor
</dys-comment>
<dys-img src='http://placekitten.com/500/350' editable='image'/>
</dys-column>
<dys-column>
<dys-comment>
The content and color of this title will be editable.
</dys-comment>
<dys-title editable-styles='color' editable='title'>
Change Me!
</dys-title>
<dys-text>
Because this doesn't have an editable attribute, it cannot be changed
in the visual editor.
</dys-text>
<dys-comment>
By defining editable-fields as href, only the link will be editable,
not the content.
Setting the editable-styles will allow the text and background colors to
be changed in the editor
</dys-comment>
<dys-button align='left' editable-fields='href'
editable-styles='color,background-color' editable='button'>
Click Me
</dys-button>
</dys-column>
</dys-row>
</dys-block>
Rendered Block:
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:
Practice
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