Sometimes you reach a point where you need to do a little bit of customization and adding a small snippet of HTML is a neat way to spice up a promotion. We do stress the importance of not over-using these HTML tricks and tips. If you have many style changes to make, a custom theme is the way to go.
Also, accuracy counts! Always make sure you’re using the HTML snippets correctly. Proofread, look for typos, and test before sending out your email to your subscribers :)
Now, onto the tricks and tips…
How to center a Section Title, Heading or Sub-heading
How to change the font color within a paragraph
How to change the font size within a paragraph
How to change the font type within a paragraph
How to combine multiple style changes
How to change the text format within a paragraph
How to center a Section Title, Heading or Sub-heading:
<center>This Will Center My Section Title</center>What to look out for: Make sure you “close” the tag at the end with a / like this: </center>
Before:
After:
How to change the font color within a paragraph:
The code:
<span style="color:red">This text must stand out!</span>What to look out for: Make sure you “close” the tag at the end with a / like this: </span>
Using a hex code: You can select an even more specific color by using the color’s “Hex code.” That’s a 6 character code that looks like this: #FF0000
You can find a list of codes here, or grab the exact code for a color on your website by using a color picker – For a PC or for a Mac.
<span style="color:#FF0000">This text must stand out!</span>Before:
After:
How to change the font size within a paragraph:
<span style="font-size:30px">Big Text!</span>Adjust the pixel number to change the size of the text. A smaller number makes the font size smaller and a larger number makes the font size bigger.
What to look out for: Make sure you “close” the tag at the end with a / like this: </span>
Before:
After:
How to change the font type within a paragraph:
<span style="font-family:verdana">Verdana text</span>What to look out for: Make sure you “close” the tag at the end with a / like this: </span>
Before:
After:
Now, lets put it all together!
<span style="font-family:verdana; color:blue; font-size:30px">Some blue text that really stands out!</span>Before:
After (and done!):
How to change the text format within a paragraph:
Although the Bold and Italic options are found within our composer, you can utilize the following simple HTML for more advanced options to make a specific piece of text Bold or Italic as well as Underline or Strikethrough.
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strike>Strikethrough</strike>These can be used at any time but for a specific example, if MadMimi was one word and you only wanted “Mad” formatted to one of these four options, you will need to apply the specific code to create the effect. Like so:
Here is how each will render:
How to justify a paragraph:
<p style="text-align:justify">Enter the paragraph here</p>What to look out for: Make sure you “close” the tag at the end with a / like this: </p>
Before:
After:
