Configuring HTML on Templates
The HTML Content element allows you to add custom HTML markup directly within a DonorDock template. This provides extra flexibility when you need a design or formatting option you can't create with the standard drag-and-drop Content elements.
Because HTML gives you more direct control over the communication's underlying structure, this option is best suited for users who are comfortable writing and troubleshooting HTML. When you can create the same design using standard DonorDock Content elements, those elements are generally easier to edit later and provide more predictable behavior across different screen sizes and email applications.
Add HTML to a Template
Open the Content tab in the Template Editor.
Click and drag the HTML Content element onto the desired location on your template.
Select the HTML element on the template canvas.
The code editor will appear in the settings panel on the right.
Remove or modify the default HTML and enter the HTML markup you want to display.
Review the resulting design on the template canvas as you make changes.
Save and test the template before using it.
When the HTML element is first added, it will contain the following sample markup:
<strong>Hello, world!</strong>
You can replace this sample with your own HTML.
HTML Is Not the Same as an Embed Code
The HTML element is intended for HTML markup that directly creates the content you want displayed within the template. It does not provide a way to embed an external webpage, application, form, video player, or other web experience inside an email.
In particular, iframe and third-party embed codes are not supported for Email templates.
For example, copying an iframe embed code from a website, video service, form provider, calendar, or another platform and pasting it into the HTML element will not create a functioning embedded experience for the recipient.
Email applications have much more limited HTML and CSS support than a standard web browser, and some applications may remove or alter unsupported markup when displaying a message.
For example, instead of embedding a registration form in an email, you could create a Register Now Button that directs recipients to the hosted registration page.
Entering HTML
The code editor on the right is where you enter and modify the HTML used by the element. Changes made in the code editor will be reflected in the HTML area on the template canvas, allowing you to review the result as you work.
The HTML should contain the markup necessary to create the design or information you want displayed in that area of the template. Because this is custom HTML, the standard drag-and-drop formatting controls available for elements such as Paragraphs, Headings, and Buttons are not used to edit the contents of the HTML element.
Any later changes to the custom design must be made by updating the HTML itself.
Keep Email Compatibility in Mind
HTML used in email has different limitations than HTML used on a website. Email applications such as Gmail, Outlook, and Apple Mail do not all interpret HTML and CSS in exactly the same way. In particular, some versions of Outlook provide more limited support for modern HTML and CSS techniques.
A custom HTML design that appears correctly inside the Template Editor may therefore display differently in the recipient's inbox.
When creating custom HTML for an Email template:
Keep the design relatively simple.
Avoid relying on web-only interactive behavior.
Do not use iframe or third-party embed code.
Review both Desktop and Mobile layouts.
Generate a test email and review the result in an actual inbox.
When possible, we recommend using the standard DonorDock Content elements for common template components such as Paragraphs, Headings, Buttons, Images, Tables, and Columns, and reserving the HTML element for situations where those tools don't provide the design you need.
General Settings
In addition to the code editor, the HTML Content element includes General settings that control how the element is positioned and behaves within the surrounding template.
Container Padding
Container Padding controls the amount of space surrounding the HTML element within its Block.
Setting | What It Does |
|---|---|
Container Padding | Adds space between the HTML element and nearby Content elements. |
More Options | Allows the Top, Right, Bottom, and Left padding values to be adjusted independently. |
Use Container Padding when you need additional separation between the custom HTML and surrounding Headings, Paragraphs, Images, or other Content.
Section Name
The Section Name field allows the HTML element to serve as a destination for internal navigation within a longer Email template.
Enter a short, recognizable Section Name if a Menu item, Button, linked Heading, or another supported element should direct recipients to this location using the Go to Page Section action.
Responsive Design
Responsive Design allows you to control whether the HTML element appears in Desktop or Mobile layouts. When editing in Desktop view, enable Hide on Desktop if the element should not appear for desktop recipients.
When editing in Mobile view, enable Hide on Mobile if the element should not appear in the mobile version. Hiding the element in one view does not delete it from the template.
HTML Tips
Custom HTML can be useful when you need greater design flexibility, but it also requires more testing and maintenance than the standard drag-and-drop elements. Keep the markup as straightforward as possible and avoid using the HTML element simply to recreate something that can already be built with the available Content tools.
Before using a template containing custom HTML, save the current version and generate a test communication. Review the custom section carefully in both Desktop and Mobile layouts and confirm that the final email displays as expected in the email applications commonly used by your audience.