fbpx
Create custom emails with custom HTML - HTML tips
emailmarketing2

Use custom HTML to create a campaign

Email Marketing does offer a custom HTML composer. This can be used to create completely customized emails, from scratch, using raw HTML code. The custom HTML composer is completely separate from the standard design composer, and they cannot be used interchangeably.

To Launch the Custom HTML Composer:

From the Campaigns page, use the little drop down arrow on the Compose button to select Custom HTML.

 Note: If you haven’t created any campaigns in your account, yet, you will not see the Compose button. On the Campaigns page, click the “Create a campaign” button, and then click Save. Now click back to the Campaigns page to find the drop down arrow next to the Compose button.

After selecting Custom HTML, Email Marketing will load up a special Custom HTML composer tool, and you can:

    1. Name your campaign whatever you like.
    2. Paste your HTML code right into the editing area, or click on “Import HTML From” to choose to import your code directly from a zip file or a URL.
    3. Include any specific code you need by placing your cursor where you want that code to appear, and clicking on the arrow next to the code on the right. In order to insure we’re following all the rules and can easily give you the tracking results you need, Email Marketing requires you to add at least one Opt-out link, and a Tracking Beacon. But feel free to add as many Forward, Subscribe, and “View on the Web” links as you want, too!

 Note: You must include the “View on the web” code, if you want a thumbnail on the Campaigns page, or a preview image when sharing the campaign.

  1. Click on “I’m all done” to save your changes to the HTML and work on the text version of your email. (This is the version people will see if they can’t receive HTML emails).

Using custom HTML code instead of Email Marketing’s design tools is good for some, not so good for everyone. The thing about designing for email is that there are lots of email reading environments out there and many of them render HTML differently. That being said, here are a few basic things to keep in mind when coding that’ll help you with looking okay across the board.

Some things to keep in mind when using Custom HTML:

  • Always remember to add opening and closing html tags.
  • Always put your style tags in the head and use body tags.
  • Being that Email Marketing inlines your CSS, you can code normally, so no worries about inlining the CSS while you’re working.
  • For multi-column tables with images, use a style tag with “vertical-align:top” (Safari likes it)
  • Use a style tags with “font-family:helvetica” — rather than font tags.
  • Be gentle, test a bunch, and you’ll be ok. :-)

Create your own custom style

You have several pre-set style options to choose from, in your Styles menu. You can also edit any of the existing color or text settings in each one of those. You also have the option of creating your very own, custom style.

  1. If you haven’t already, log in to your Email Marketing account. (Need help logging in?)
  2. In your Email Marketing account, click Campaigns.
  3. Click Compose for a new campaign, or Edit on any existing campaign.
  4. Click the Styles tab, on the right.
  5. Click the Create your own.
  6. Enter a unique name for your custom style.
  7. Click the button for how you want to start your own custom style:
    • Create new will start you from scratch. This is best for totally fresh looks.
    • Clone current will copy the currently selected style. This is the best option for small changes.
  8. Next to Name, you can change the name of the style.
  9. Next to any of the elements listed, you can enter a hex code, or click the colored box to choose from a color picker.

     Note: As you select different options your campaign will change, so you can preview the new looks, in context.

    ElementDetails
    BackgroundThis is the color surrounding your campaign, on the outer margins.
    ForegroundThis is the color inside your campaign, behind the text and image content.
    Button

    In addition to choosing the color of your buttons, you can also choose the button style:

    • Flat button style Flat
    • Pill style button Pill
    • Chunky style button Chunky
    BorderThis can be turned on and off with the check box. This is a colored line around your campaign content, between the Foreground and the Background colors.
    FooterThis can be turned on and off with the check box. If it is turned off, the footer details will display on the Background color.
  10. Click the Text tab.
  11. Click on any text type to customize the style.
  12. Click on any option to set your style.
    OptionDetails
    FontSelect your desired font from the menu.
    ColorEnter a hex code, or click the colored box to select from a color picker.
    SizeClick the larger A to increase the font size, and the smaller A to decrease it. The actual size in pixels displays to the right.
    AlignmentChoose which alignment you want this text type to use. Your options are left, center, right, and justified.

     Note: For Link text, you only choose color. All other settings are inherited from regular body Text.

     Note: For Button text, you can’t change alignment, here. Alignment is changed in the button module, in the composer.

     Note: For Footer Text, you can’t change alignment, here. Footer alignment is controlled through the Campaign Tweaks Add-on.

  13. When you’re finished with a specific text type, click <, to go back to the main list of text types.
  14. When your style is finished, click Update.

Your new custom style will always appear in your style list, so you can use it for any campaign.

HTML tricks and tips

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 campaign. We do stress the importance of not over-using these html tricks and tips. If you have many style changes to make, a custom style is the way to go.

Also, accuracy counts! Always make sure you’re using the html snippets correctly. Proof read, look for typos and test before sending out your email to your subscribers.

Now, onto the tricks and tips:

  • How to center text
  • How to change the font color
  • How to change the font size
  • How to change the font type
  • How to combine multiple style changes
  • How to justify text

How to center text:

The code:

This Will Center My Section Title

What to look out for: Make sure you “close” the tag at the end with a / like this: < / center>

Before (in edit mode):
Code for centering text

After (in preview mode):
Display of centered text in preview mode

How to change the font color:

The code using a color name:

This text must stand out!

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 program.

This text must stand out!

What to look out for: Make sure you “close” the tag at the end with a / like this: < / span>

Before (in edit mode):
Code for changing font color

After (in preview mode):
Display of color changed font

How to change the font size:

The code:

Big Text!

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 (in edit mode):
Code for changing font size

After (in preview mode):
Display of different sized font

How to change the font type:

The code:

Verdana text

What to look out for: Make sure you “close” the tag at the end with a / like this: < / span>

Before (in edit mode):
Code for changing font

After (in preview mode):
Display of changed font

Now, lets put it all together!

The code:

Some blue text that really stands out!

Before (in edit mode):
Code for combined changed

After (in preview mode):
Display of combined changes

How to justify text:

The code:

Enter the paragraph here

 

What to look out for: Make sure you “close” the tag at the end with a / like this: < / p>

Before (in edit mode):
Code for justifying text

After (in preview mode):
Display of justified text

Other posts you might be interested in

Create custom emails with custom HTML – HTML tips
Create an email marketing campaign easily
Create blog posts & categories using website builder
Add and manage blog posts using website builder
Add logo, social icons & HTML using website builder
Add analytics & adsense using to your website

Eid offer

Website + Hosting + Domain

Get all the essential features required to get your website online, in one package.  In Rs20,000/ only

00
Hours
00
Minutes
00
Seconds

Ready to use real estate listing website

See the demo of our Ready to use real estate listing website. Where customers can list their properties to rent or sell!

Free gift? You can have it 

Get a free Ecommerce template

Get a premium Ecommerce template when you purchase hosting (Any yearly package)

Purchase any yearly hosting, get a premium template free

  • Free import into your hosting
  • Easy to customize
  • Premium design
  • E-commerce ready 
  • Custom cart & checkout