You can format how the text appears in your campaigns to match your company brand and convey your message clearly. Formatting your message requires a very very basic knowledge of HTML but don’t worry if you’re completely new to HTML code - we’ve created a quick beginners guide to HTML tags below: 


What are HTML tags?
 

HTML tags are the standardised system for tagging text files to apply colours, fonts, graphics and hyperlinks when your document appears online. HTML tags usually come in pairs, surrounding the piece of text that they are tagging.

The first tag in a pair is the start tag, the second tag is the end tag. The end tag looks the same as the start tag, but with a forward slash inserted before the tag name e.g. <p>This is the text you want to tag</p> 

On the whole you don’t need to worry too much about writing the HTML out in full when you need to use it - you just need to know which bits to cut and paste to format your message how you want it to look.

Centring text

To make your paragraph text appear in the center of your campaign message, add a style property to the paragraph tag like: 

<p style="text-align: center;">This text would be centred</p>

Don't forget to include the closing </p> tag when using paragraph tags.

Changing text size

If you want to change the size of the text, you can encase it with a <p> tag and then specify the font-size property, as shown below. A <p> tag represents a paragraph of text, but you still need one even if your ‘paragraph’ is just a few words. 

    <p style="font-size: xx-small">This text is xx-small</p>

    <p style="font-size: medium">This text is medium</p>

    <p style="font-size: large; color: red">This text is large AND red</p>

The sizes supported are:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large

Changing text color

To change the text colour, you can encase it with a <p> tag and specify the color property as shown below. And if you’re not in America please note the American spelling of ‘colour’. If you use the British spelling, the browser won’t recognise it and your message won’t display as you intended it to. 

    <p style="color: red">This text would be red</p>

    <p style="color: blue">This text would be blue</p>

    <p style="color: green">This text would be green</p>

If you want to use a more specific colour, you will need to know the hexadecimal value for the colour - which sounds a lot more complicated than it is! Firstly, if you work with a design team they will be able to tell you the relevant hex colour values for any of your brand colours. Otherwise, you can find any colour value within the campaign creator by opening the Highlight colour picker: 

As you move the colour picker, you will notice the hex value updating (the hex value is the little code that says something like: #7a74e6). If you want your text appear in a particular colour, just copy the hex value for the colour you want to use and paste it into the HTML colour property as follows:

    <p style="color: #7a74e6">This text would be purple</p>

Adding emphasis to your text

To make some text bold, surround it with an <b> tag:

<b>Book direct</b> and save 10%

Make sure to include the closing tag </b> when bolding text.

Inserting a list

If you want to list out the multiple benefits of booking direct (and why wouldn’t you?!) you can create a list. Lists are created using the <ul> tag. It looks like this:

<ul>

    <li>Free wifi</li>

    <li>Spa pass</li>

    <li>Complimentary bottle of wine on arrival</li>

</ul>

As you can see, the overall list section has the start tag <ul> and the end tag </ul> to mark where the list begins and ends, but each row of your list should also have a separate start and end tag <li> and </li> to mark out each element within your list:

<li>List element</li>

Did this answer your question?