Elements

On the left side of the editor, you will find different components, such as Elements. Under the Elements tab are the components needed to compose your message, such as text and images. The Elements tab contains the following: 

Elements

The following elements are available for use: 

• Heading
• Text
• Image
• Button
• Social
• Navigation
• Divider
• Spacer
• Video
• Timer
• RSS
• Product (available to eCommerce only)
• Recommendation (available to eCommerce only)
• Custom

Concepts

A few of the concepts below are adjustable in different elements. The effect differs per application: 

• Padding
• Background color
• Corner radius
• Alignment
• Border style
• Auto width

Padding

Elements are placed in rows and columns. Padding can be applied independently from an element, but here we'll be referring to padding as space around the elements. 

You can apply padding on all sides: the top, bottom, left and right. Let's say you've added a heading with padding: 0, it will look like this: 


The text is situated all the way to the left. Above and below is some spacing to support the height of the text. If you adjust the padding to 20 for example, this is what it will look like: 

Now you can see more space around the element Header. 

Background color

A background color can be applied to a row, column and a section, but also to an element. If you insert a video and add padding to it for example, a background color will show. This color will also be visible when the element doesn't load at the receiver's end.

Looking at the example below, we can see the following: 

1. The background color of the section (dark blue) 
2. The background color of the row (light blue)
3. The background color of the element (yellow)

Corner radius

A radius gives you the option for rounded corners. A corner radius of 0 is square. But the higher the number, the more rounded the corner. You can add a corner radius to these elements: Image, Button, Video and Timer. Here's two examples:

An image without corner radiuses

An image with a corner radius of 30

Alignment

You can align an element left, right or centre. Here's an example: 

The header and text are aligned left and the button and image are centre aligned in the column. It aligns an element in a row or column. If you were to align the button left, it would look like this: 

Border style

It's possible to place a border around an element. This is what it looks like when you place a border around the Image element:

There are different border style options to choose from: none, solid, dotted and dashed. 

Auto width

Elements are set to an auto width by default. 

When you move the slide switch to the left, you can adjust the width to your choosing based on a percentage or pixels. The default setting is 100 percent. This percentage applies to the element based on the width of the row or column in which the element is placed. 

Here's an example: The button is placed in a two column structure and auto width is applied. The width of the button adapts to a size increase of the text. 

If you switch off auto width, the button width is set to 100 percent by default. As you can see below, the button will be filled over the width of the column (padding included). 

The width is adjustable in percentage and pixels, so it is also possible to reduce the width. Here's an example of a width set to 80 percent: 

Click here to go back to the Elements index. 

Heading

When you add a heading to the canvas, you will see the following options appear on the left hand side: 

Heading style

• Heading type: select which size heading you would like to use.
• Font: the font you have chosen under the General tab is the font used here by default. You can change the font for the heading and you can choose from standard web safe fonts.  
• Font size: the size shown here depends on the heading type you have chosen. You can adjust its size as desired. 
• Line height: how much space would you like in between the text lines? You need spacing for good readability.
• Text color: the color of the text is also derived from the General tab, but you can choose a different color for your heading if you wish. 
• Alignment: you can choose how the text should be aligned here. 
• Text transform: there are different options for your heading text. You can opt to start the heading with a capital letter, use all caps, small letters only or none of the above. 
• Padding: add spacing at the top, bottom, left or right of your text. You can adjust this individually by clicking on the icon next to padding. Padding is set to 10 on all sides by default. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself. 

When selecting the Header element, you will see more options for formatting text at the top of your canvas. Click here to read more on text format. 

Text

You can add text to your message with this element. There are different ways to style your text. These are visible on the left hand side and at the top of your canvas. You will see the following options on the left hand side: 

Text style

• Font: the font you have chosen under the General tab is the font used here by default. You can change the font for the heading and you can choose from standard web safe fonts. 
• Font size: the size shown here depends on the font size you have chosen under the General tab. You can adjust its size as desired. 
• Line height: how much space would you like in between the text lines? You need spacing for good readability.
• Text color: the color of the text is also derived from the General tab, but you can choose a different color for your heading if you wish. 
• Alignment: you can choose how the text should be aligned here. 
• Text transform: there are different options for your heading text. You can opt to start the heading with a capital letter, use all caps, small letters only or none of the above. 
• Padding: add spacing at the top, bottom, left or right of your text. You can adjust this individually by clicking on the icon next to padding. Padding is set to 10 on all sides by default. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Besides the options shown on the left hand side, you have more options available to you at the top of your canvas. Think of bold, italics, underline, and so on. You can read more on text formatting below. 

Text formatting

When you click on a Header or Text element, you will be given more options at the top of your canvas to format the text with, amongst other things.

Option	Function
	Undo & Redo Undo or redo your change(s).
	Link & Unlink Place a link in your text or unlink when you want to remove the link from your text. When you click on the link button, you can add a variety of links to your text. Read more on this here.
	Personalisation field Add personalisation to your message. Think of a salutation or addressing contacts by their first name. You can personalise on all database fields that are available in your account.
	Bold, Italic, Underline, Strikethrough Format your text to bold, cursive, underlined or strike-through .
	Text color Color a specific word or part of the sentence.
	Background color Mark a part of the text by giving it background a color.
	Numbered list & Bullet list Create a list with numbers or bullet points.
	Table Add a table.
	Special character Looking for special characters such as a pound, dollar or euro? You can find special characters here.
	Accessibility checker Check your message based on the contrast of your text to see if your message is easily readable for visually impaired receivers.  You can find a technical description here.
	Left to right & Right to left Select this option when writing in a language that is written from right to left instead of left to right.
	Align left, centre, right, justify You probably recognise these options from other text editors. Align a text left, right or centre.
	Decrease indent & Increase indent Decrease or increase indent in text.

Link type

Select the text you want to link and click on this icon at the top: 

This pop-up will appear:

There are three tabs available in the pop-up: General, Web analytics and Update profile.

The General tab will give you the following options: 

• Select the link type you wish to add
• Depending on the link type: the url of the link and a name for it
• Depending on the link type: making changes to the profile based on a database field

The Web analytics tab lets you:

• Fill in the link values for your Google Analytics.

Through the Update profile tab, you can:

• Make changes to a profile, or add/delete a tag and score to a contact. Think of writing an (extra) interest to a contact in the database based on a click. 

Would you like to learn more about tagging and scoring in your message? Make sure to read this article: Tagging and scoring in your message and web page

 

Various link types 

There are different links to choose from. An external link with tracking is the most frequently used option. You will find an explanation of each link type under the image below. 

Link to a Spotler landing page
You can use this link when you want to link to a landing page within Spotler. 

An anchor link

This link refers to a specific place in your message or web page. The reader will see the screen jump to the place where the anchor was placed. Use this link when you want to refer to a specific paragraph or title (if you have an index in your message or web page). 

Link to an email address
Use this link to open an email client. It depends on the email client if it opens automatically or not. 

Link to a document
Use this link when you want to refer to a document in the Documents module in Spotler. 

Link to an external web page (without tracking) 
This links to a web page that does not keep track of measuring results. It is used to refer to a URL in your text, such as:  https://www.spotler.com.

External link with tracking

When you use this link type, your link becomes measurable and you will be able to find the results in your mailing report. 

Special link
It is important to include an unsubscribe link as well as a 'read online' link at all times. Both are special link types. Other special links are 'link to the print version' and 'unsubscribe through email'. If the reader clicks on a link to a print version, the browser will open with a PDF version of the message. 

Do not make written out URLs trackable If you were to track a URL such as www.spotler.com, certain code is added to the URL to make it trackable. Seeing as you're not specifically referring to https://www.spotler.com, it is seen as phishing. If you write out URLs in your message, always make sure to use a link without tracking.

Conversion link
If you opt for an external link with tracking, a link to a web page in Spotler or a link to a document, a Conversion link checkbox will appear at the bottom. 

The Conversion link checkbox is checked by default which ensures that the link will be counted as conversion in the mailing report. A conversion link drives traffic to your website. But what if the link isn't a conversion link? An unsubscribe link is an example of a non-conversion link. It is a link with tracking (which makes it measurable), because you want to know when someone clicks on 'unsubscribe', but it doesn't drive traffic to your website.  

The URL of the link and a name for the link It is advisable to give your link a unique name so you can easily recognize it in your report. Here's a tip. Include what type of link it is (text, image, title, etc) in the name.

Web Analytics
Under the Web analytics tab you can see which Google Analytics values you have specified. If Google Analytics is set up correctly in your account, you only have to fill in a unique campaign word to specify the link. 

The standard Google Analytics values such as source, name and content can be filled in at once. To do so, go to the menu at the top of the screen and click on this icon: 

Image

When you add an image to the canvas, the following options will appear on the left: 

Image content

• Image: select an image from the Images module, upload an image, use an external image or select an image from the sample library. 
• Alt text: add alt text to your image. This way, the reader can still see which message the image is portraying if the image doesn't load. Screen readers will also be able to read the alt text. 
• Title (tooltip): this is the text shown when moving the cursor over the image. 
• URL: add a link to your website, to a landing page or to a document. There are many different links to choose from. Read more under the heading: link type. 
• Opens in...: set up whether the URL should open in a new window, in the same window, top window or top frame. 

Image style

• Background color: if the image doesn't load, a background color will be shown. It is white by default, but you can select any color you want. 
• Padding: spacing around your image. You can add spacing at the top, bottom, left or right side of your image. Padding is set to 10 by default on all sides. 
• Corner radius: would you like the corners of your image to be rounded? Then adjust the corner radius. The higher the number, the more rounded the corner(s). You can round each corner individually if desired. 
  
  Example of image without corner radiuses
  
  Example of image with corner radiuses of 30
  
• Border style: give your image a border. You can choose between none, solid, dotted and dashed. 
• Alignment: the image is aligned in the center by default, but you can align it to the left or right as well. 
• Auto width: auto width is switched on by default. When you move the slide switch to the left, you can adjust the width to your choosing based on a percentage or pixels. The default setting is 100 percent. This percentage applies to the element based on the width of the row or column in which the element is placed.

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself. 

Button

Using buttons in your message attracts the reader's attention and encourages them to take action. Think of "sign up now" or "find out more" or "get a quote". When you add a button to your canvas, the following options will appear on the left: 

Button content

• URL: add a link to your website, to a landing page or to a document. There are many different links to choose from. Read more under the heading: link type. 
• Opens in...: set up whether the URL should open in a new window, in the same window, top window or top frame. 

Button style

• Font: the font you have chosen under the General tab is the font used here by default. You can change the font for the heading and you can choose from standard web safe fonts. 
• Font size: A font size of 14 pixels is set by default. You can adjust its size as desired. 
• Text color: if you've set up the brand guidelines in your account settings, the secondary text color will be used. You can choose a different color if you wish. 
• Button color: select a color by using a color code or by using the color picker. 
• Button alignment: you can choose how the text should be aligned here. 
• Auto width: auto width is switched on by default. When you move the slide switch to the left, you can adjust the width to your choosing based on a percentage or pixels. The default setting is 100 percent. This percentage applies to the element based on the width of the row or column in which the element is placed.
• Corner radius: would you like the corners of your button to be rounded? Then adjust the corner radius. The higher the number, the more rounded the corner(s). You can round each corner individually if desired. 

Example of a button without corner radiuses

Example of a button with corner radiuses of 20

• Border style: give your button a border. You can choose between none, solid, dotted and dashed. 
• Button padding: spacing around the text in your button. You can apply this individually for all sides. A padding of 10 is set by default. 
• Padding: spacing around the button itself. You can apply this individually for all sides. A padding of 10 is set by default.

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself. 

Social

Are you active on social media? Include your social media channels to your message by using the Social element. When selected, you will see the following options appear on the left: 

Social content

• Icon style: There are different styles to choose from. Select the style that fits your corporate identity best. You can choose between black and white, color, circle, square or rounded square.
• Click the social channel to add: click on the channel you want to add to your message. 
• Link: add the URLs to your channels. 

Social style

• Icon size: adjust the size of the social media icons as desired. 
• Icon spacing: white spacing between the icons.
• Alignment: the social media icons are aligned in the center by default, but you can align them to the left or right as well. 
• Padding: spacing around your social media icons. You can add spacing at the top, bottom, left or right side of your image. Padding is set to 10 by default on all sides. 
• Background color: the background color of the row of your social media channels.  

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Navigation

By using the Navigation element, your website's navigation can be reflected in your message. When you select the element, the following options will appear on the left: 

Navigation content

• Navigation items: give the navigation item a name and a URL. You can delete an item by clicking on the bin icon. You can also rearrange the items with your cursor. 
• Button '+ Add item': there are three navigation items available by default, but you can add more.
• Use same styling: when you move the slide switch to the left, you can style each navigation item individually.

Navigation item style

• Font: the font you have chosen under the General tab is the font used here by default. You can change the font if desired and you can choose from standard web safe fonts. 
• Font size: a font size of 14 pixels is set by default, but you can adjust this as desired. 
• Font style: you can give the font cursive styles here. 
• Font weight: you have the option to 'add weight' to the font, by making it bold for instance. 
  
• Line height: how much space would you like in between the text lines? You need spacing for good readability.
• Text transform: there are different options for your navigation text. You can opt to start the item(s) with a capital letter, use all caps, small letters only or none of the above. 
• Text decoration: this option is set to underlined by default, but you can also move the dash above the text or opt for no dash at all. 
• Letter spacing: adjust the space between the letters. 
• Inner padding: add spacing around each navigation item. You can do so at the top, bottom, left or right of your item. You can adjust this individually by clicking on the icon next to padding. Padding is set to 5 on all sides by default. 

Navigation style

• Background color: set up the background color for the row in which the navigation items are situated. 
• Alignment: the navigation items are aligned left by default, but you can adjust this to center or right alignment. 
• Separator: separators are not set up by default, but you can add a separator, such as a pipe character, in the text box. 
  
• Separator color: when you add a separator, it will be in the color you have given your text. You can change this color here. 
• Inner padding: spacing around your navigation. You can add spacing at the top, bottom, left or right side of your image. Padding is set to 10 by default on all sides. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Divider

By using a divider, you can create clear distinctions in the content of your message. Here are the options you have when adding a divider:

Divider style

• Width (%): the divider will be shown over the full width of the row in which it is placed, but you can choose to decrease the width. 
• Alignment: you can align the divider when the width is less than 100 percent. 
• Line style: besides opting for a solid line, you can choose a dotted or dashed line as well. 
• Line weight: the width of the line.
• Line color: the color of the line. 
• Background color: the background color of the row in which the line is situated. 
• Padding: the spacing around the line. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Spacer

A spacer functions in the same way as a divider in your template, so it provides the reader with a clear and structured message. 

Spacer style

• Width (%): the spacer the spacer will sit over the full width of the row in which it is placed, but you can choose to decrease its width. 
• Height: the spacer is set to a height of 30 by default, but you can adjust it if desired. 
• Background color: the color of the spacer. 
• Alignment: you can align the spacer when its width is less than 100 percent. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Video

Playing a video is not supported in every email client. This is why it's not possible to place a video directly into your message in Spotler Mail+. What you can do is automatically place a thumbnail in your message with a play button placed on top of it. This way, it looks like you have a video in your message but when the reader clicks on the play button, they are redirected to a platform such as YouTube or Vimeo which will then play the video. 

You can use the Video element to add a thumbnail of your video to your message. When you select this element, the following options will appear on the left: 

Video content

• Video URL: place the URL behind your video by clicking on the link icon. 
• Alt text: add an alt text to your video image. If the image will not load, the reader will still see the message of your image and screen readers will also be able to read it. 

Video style

• Background color: give your  video a background color. It will be visible when the video image doesn't load or when you add padding around the video. 
• Padding: create space around your video. 
• Corner radius: would you like the corners of your video image to be rounded? Then adjust the corner radius. The higher the number, the more rounded the corner(s). You can round each corner individually if desired. 
• Border style: give your button a border. You choose between none, solid, dotted and dashed. 
• Auto width: auto width is switched on by default. When you move the slide switch to the left, you can adjust the width to your choosing based on a percentage or pixels. The default setting is 100 percent. This percentage applies to the image based on the width of the row or column in which the image is placed.

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

Timer

You can add a countdown timer in your message. A lot of marketeers use it to create fear of missing out on the receiver's end. It can also provide you with extra conversion.  

The options of the timer are shown on the left once you have selected the element: 

Timer content

• Click on the button Add timer to set the timer. A popup will open where you can enter the date by which the timer should expire.

Timer style

• Background color: this concerns the background color of the row in which the timer is situated. You can set the background color of the timer itself in the popup of the timer settings. 
• Padding: create space around your timer. 
• Corner radius: would you like the corners of your timer to be rounded? Then adjust the corner radius. The higher the number, the more rounded the corner(s). You can round each corner individually if desired. 
• Border style: give your timer a border. You can choose between none, solid, dotted and dashed. 

Advanced

• Are you experienced with code? It is possible to add CSS classes yourself.

RSS

Do you have an RSS feed which you want to load in your newsletter? The following options are available once you click on the RSS element:

Content

• RSS URL: insert the URL of your RSS feed in the text box and click on the icon next to the text box to load the RSS feed. More options will appear: 
  
• Number of articles: select the number of articles you want to show from your RSS feed. 
• Layout: you can choose to place the articles horizontally, so next to each other, or vertically.
• Items per row: if you opt to show the articles horizontally, you can set up how many items should be shown next to each other. 
• Add: decide which information from your feed should be shown. Your feed is divided into a header, left column and footer. Select which data you want to show where. 
  
  It is then possible to rearrange items by dragging them with your cursor. You can delete items by clicking on the bin icon.
  

RSS style

• Padding: spacing around your RSS feed as a whole. 

Product (available to eCommerce only)

Is your Spotler account synced to your webshop? In that case, you can load products from your webshop into your message. You can do so by using the Product element. Once selected, the following options will appear on the left: 

Content product

• Product: Decide between Static or Dynamic.
  
  Static
  Static means that you select a specific product from your webshop to add to your message. When you click on Static, a popup will appear that contains the products from your webshop which you can select. 
  
  Dynamic
  The Dynamic option is meant for abandoned cart or product review messages. The products shown vary per contact. You can read more on creating an abandoned cart or product review message in the following articles: How do I compose an abandoned cart message? and how do I compose a product review message? 
  
  
• Layout: you can choose to show the articles horizontally or vertically. 
• Items per row: when you have decided to show the articles horizontally, you can also decide how many items should be shown next to each other.
• Add: decide what product information should be shown. Your product block is divided into a header, left column and footer. Select which data you want to show where.
  
  It is possible to rearrange items by dragging them with your cursor. You can delete items by clicking on the bin icon.
  

Product style

• Padding: create spacing around all products.

Recommendation (available to eCommerce only)

Is your Spotler account synced to Squeezely or Datatrics? If so, you can add personal recommendations to your message. If you select the Recommendation element, the following options will appear on the left:

Content

• System: select Squeezely or Datatrics. A popup will open where you can insert a URL and select the number of items. Read more on this in the article: 

Recommendation style

• Padding: the spacing around the recommendations that you've placed in your message. 

Custom

No stranger to HTML code? By using the Custom element, you can create your own customized block. 

• Padding: create space around your custom block.
• Custom HTML: insert your custom HTML code here.

FAQ's