Using HTML in
the SalesNexus
Email Editor
www.salesnexus.com
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 2
If you are using external software to design your email template, you may be incorporating
CSS (Cascading Style Sheet) such that the formatting is defined in the header of the email.
The SalesNexus Email Editor is a basic editor and will strip out anything that appears outside the body tag in the HTML file. To remedy this, you will need to put the formatting Inline
so that it is read by the HTML.
How to create HTNML with Inline Style Attributes:
Inline Style Attributes puts the custom styling directly into the HTML. They look something
like this:
<p style=”color: red”>Thank you so much for your time, you have a great day! </p>
This will make the specific paragraph red.
Thank you so much for your time, you have a great day!
This is how the code looks in the Email Editor without the Inline Style Attributes applied;
That is where you put your Inline formatting- inside the paragraph<p as you see in that arrow. This lets the system know the next part is the style formatting.
Example of Inline formatting:
You don’t need to use <font> tags when using Inline formatting; you simply start with the
style.
Copyright © 2015 Sales Nexus
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 3
That “<p> </p>” represents “whatever is between these marks treat as a paragraph”. The
/ part ends any command. So if you use “<h> </h>” you are telling the code whatever is
between the lines is the Header.
You can change the color, font, and font style or font size of your text to whatever you need
it to be, and you can even add shadow and background color to your text. The item you are
changing appears to the left of the colon (:) the semi-colon (;) marks the end of that command and the beginning of the next one.
For example; Inline code looks like this:
<p style=”color: white; background: black; font-family: Harrington; text-shadow: 1px 1px
red; text-align: center; font-style: italic; font-size: 300%”>Good Day! </p>
Here is that example in the Editor:
Final product looks like this:
The Editor does not offer the “Harrington” font family, but with Inline formatting we are able
to apply the font not originally included in the drop down list. You also can put shadowing
on the text such as this red shadow with a black background.
Without Inline formatting, the plain html will look like this:
Copyright © 2015 Sales Nexus
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 4
Notes:
• When adding Inline formatting, the “<font </font>” html tag needs to be removed as
it is replaced with the tag you place inside the “<p </p>” tag or html tag.
• You only have to put quotations “ ” once (at the beginning of the first property, and
close it at the end). You do not have to repeat it after every property.
• Each Inline property statement must be separated with a semicolon (;) and colons
(:) appear between the property and its value.
• <p style=”property: value; property: value; property: value”></p>
<p style=”color: white; background: black; font-family: Harrington;”>Good Day! </p>
After the style is closed ( >) and before the </p> close is where you put the text that
you want the style applied to.
When using Inline formatting, there are variables that you can apply.
Some examples are:
• Text-shadow—this is a property used to add shadow to a text, it comes with the
unit of pixel (px), centimeter (cm), and point (pt.). In the example above, we used
the px unit because pixels are fixed-size units that are used in screen media (i.e.
to be read on the computer screen); and it is considered acceptable font size units
(users can use the browser’s “zoom” feature to read smaller text).
This is how it will look like when you use cm:
<p style=”color: white; background: black; font-family: Harrington; text-shadow: 0.5cm
0.5cm red; text-align: center; font-style: italic; font-size: 300%”> Good Day! </p>
• Font-size—is a property used to define the size or your text. When it comes to
the size of your text, you can define it as medium, xx-small, x-small, small, large,
Copyright © 2015 Sales Nexus
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 5
x-large, xx-large, smaller, larger; as a point (pt.) or with percent (%). Using percent
(%) allows your text to remains fully scalable for mobile devices and for accessibility, and it provides a more consistent and accessible display for users.
• Font-color—is a property used to define the color of your text. All of the color
names have a code, and you can either use the name or the code to define it in Inline formatting. There is a tool on tool on web browsers called Rainbow that allows
you to instantly get the color code on any web site you are visiting.
Here are some examples of font color:
This is a great resource for color codes and names http://www.w3schools.com/cssref/
css_colornames.asp
• Font-family—this specifies the font used for an element, or the name of font to be
applied on text. Here is a link to more Font-families http://www.w3schools.com/
cssref/css_websafe_fonts.asp
• Font-style— this specifies the style of a text, it could be italic, bold, normal or oblique.
• Text-align— this is used to define the alignment of your text (center, left, right, justify).
Copyright © 2015 Sales Nexus
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 6
Inline formatting will need to be applied to every element of HTML where the email editor
does not give you the options you need.
Example of this code:
Looks like this:
Copying HTML Inline Formatting into a Template:
• Go to the campaign tab.
• Click E-mail templates located on the orange ribbon.
• If you have already saved your template, you can view it by double-clicking the “Emails letters and templates”, or by clicking the small arrow at the left and then just
selecting your template.
• Or if you want to add a new template, just click “add template”.
Copyright © 2015 Sales Nexus
Chat with Us Here!
Using HTML in the SalesNexus Email Editor z 7
• Click the “HTML” button in the tool bar.
This will display the html source editor where you can paste your html codes. Insert your
HTML at the point of the arrow in your template. Just after the <p>
• When you have copied in your code or finished creating the code, click “update”
button at the lower-left.
• It will now be copied into a template and it will show you the style features. If you
need to make changes to it, just click the “HTML” button in the tool bar again and
make your changes.
• Don’t forget to click save along the way!
Copyright © 2015 Sales Nexus
Chat with Us Here!