If you’ve ever used the Iterable drag and drop email builder, you may have noticed that it has some frustrating limitations. For example, you cannot set defaults for the size and properties of h1, h2, h3, and paragraph tags. What’s more, the text field encases everything in a span, making it difficult to override using the !important stylesheet.
In this article, we’ll show you how to hack the Iterable drag and drop email builder to overcome these limitations and create customized emails.
Step 1: Overriding the Right-hand Pane
The first thing to know is that you can override everything on the right-hand pane of the builder using !important. This means you can configure the font size, color, and other properties of H1, H2, H3, and paragraph tags.
Step 2: Using the On-dark Popup Style Editor
However, you cannot override anything that pops up in the dark Iterable style editor, which sits directly above a text input area over the preview of the email. Anything you change there gets wrapped in a span and is protected, making it difficult to override using a custom stylesheet.
Instead, use the on-dark popup style editor to override text using a span tag. This will allow you to customize the font size, color, and other properties of specific text blocks.
Step 3: Using the “Text” Block
For those text fields that the popup style editor does not help with, use the “text” block from the drag and drop editor instead of the paragraph block. This is especially important for overriding the !important font size.
By following these steps, you can hack the Iterable drag and drop email builder to create customized emails that meet your needs. Remember to use the on-dark popup style editor to override specific text blocks, and the “text” block to override font size.
In conclusion, while the Iterable drag and drop email builder has some limitations, with a little bit of hacking, you can create customized emails that look exactly the way you want. We hope these tips will help you get the most out of the Iterable drag and drop email builder.
Your custom style snippet.
Here is an example of the custom style snippet which you will configure and save in Iterable as a snippet.
<style type="text/css">
/* Override h1, h2, h3, and p tags */
h1 {
font-size: 28px !important;
font-weight: bold !important;
color: #000000 !important;
}
h2 {
font-size: 24px !important;
font-weight: bold !important;
color: #000000 !important;
}
h3 {
font-size: 20px !important;
font-weight: bold !important;
color: #000000 !important;
}
p {
font-size: 16px !important;
color: #333333 !important;
}
/* Override a tag and its states */
a {
color: #0000FF !important;
text-decoration: none !important;
font-weight: bold !important;
}
a:hover {
color: #00FF00 !important;
text-decoration: underline !important;
}
a:active {
color: #FF0000 !important;
}
a:visited {
color: #800080 !important;
}
</style>
CONTACT
We are here for help you!
