Search the Help Center
  1. Spotler Help Center
  2. Messages
  3. Messages editor: Elements

Articles in this section

See more

Button element

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_menu.png

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
Button_zonderradius.png
Example of a button with corner radiuses of 20
Button_metrradiuspng.png

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

Useful links