HTML tricks and tips

Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Account Management Help
add photos, video and audio
Add-on features and social media
Advanced
Advanced campaign settings
All about analytics
All about images
Basic steps
Calendar
Configure the Web Application Firewall (WAF)
Connect my Calendar and Online Storage to Workspace
contact support
copy files to my site
Create my email address
Customize campaign
Discover domains
discover linux hosting with cPanel
Discover Microsoft 365
Discover Online Storage
Discover Workspace Email
edit content
Email Marketing demo
expand your site with sections and pages
Explore email add-ons
Explore my account
Find server and port settings (IMAP/POP)
fine tune my website
get social
Get started with SSL certificates
Get the most out of Microsoft 365
help my site get found and monitor my metrics
Hosting & Servers
keep my account secure
Keep my email secure
know your privacy rights
Legacy
Manage your SSL certificate
Managed WordPress
Manual email configuration
Migrate and export my emails
My email account isn’t working (troubleshooting)
nameservers and DNS
online store
organize
parking, forwarding and monetizing
privacy and protection
publish my site
Quick Shopping Cart
Renew my products and services
renewals
Security
Set up a campaign
Set up email on my devices
set up my payment methods
Set up my Workspace Email account
start with the basics
Stay productive anywhere with Office apps
Streamline email tasks to help my business
transfer between accounts
transfer between registrars
Troubleshoot email and email setup
Troubleshooting
troubleshooting
Uncategorized
Upgrade and renewal options for email
Web & Classic Hosting
Website backups
Website Builder 7
Website Builder version 6
Website Security and Backups
Websites
work with databases
work with delegates
working with blogs

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.

How to center text:

The code:

<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 (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:

<span style="color:red">This text must stand out!</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 program.

<span style="color:#FF0000">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>

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:

<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 (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:

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

After (in preview mode):
Display of changed font

Now, lets put it all together!

The code:

<span style="font-family:verdana; color:blue; font-size:30px">Some blue text that really stands out!</span>

Before (in edit mode):
Code for combined changed

After (in preview mode):
Display of combined changes

How to justify text:

The code:

<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 (in edit mode):
Code for justifying text

After (in preview mode):
Display of justified text

Next step

More info

Changing the currency for the products.

Prices shown in US Dollars. You can convert to your own currency after selecting a product.