Articles in this section

Basic Functionality

  • Updated

Rows

Each email template consists of one or several Rows. User is allowed to add, move, copy, delete and manage rows.

To add a row to a blank email template user must click on the “Add Row” button at the main working area.

e2a20378-0cd3-4a94-b91c-9d2e7caedf53.png

Or Drag and Drop COLUMNS tool from the main right-side tool bar.

2de04407-c962-495f-a39d-304de60809a4.png

Also, row can be added between two existing rows by Drag and Drop functionality or by selecting existing row and adding a new row before or after it.

774afde2-1b68-4294-bc79-16b9f15237e7.png

Each row can be moved. To move a row the user should select the row, click and hold a “move” button and move the row to another place and drop it.

3f506c14-ad4b-499e-9c7d-d75e79712ec6.png

Each row can be copied. To copy a row the user should select the row, click on the “Copy” button (at the quick bar or at the main right-side bar) and the row will be past below the original row with existing content.

8c2d36ee-ae46-4056-8f3a-faae427f0a4f.png

Each row can be deleted. To delete a row the user should select the row, click on the “Delete” button (at the quick bar or at the main right-side bar) and the row will be deleted with existing content.

2874aa2b-cb46-4c53-b348-da37c34c61e7.png

In a floating bar user can adjust the row. There are Desktop and Mobile settings for rows. Desktop tab has all settings for rows, but Mobile tab has settings that are actual for mobile view.

Columns section divides selected row into selected number of columns.

af961cc7-9bef-4f54-8387-8fd61ab871fb.png

Column Properties section consists of several tabs, each tab represent settings for each column.

Available settings for columns:

  1. Background Color
    1. HEX
    2. RGB
    3. Paleta
  2. Padding
    1. Top
    2. Right
    3. Left
    4. Bottom
  3. Border
    1. Side
      • Top
      • Right
      • Left
      • Bottom
    2. Color
      • HEX
      • RGB
      • Paleta
    3. Type
      • Solid
      • Dotted
      • Dashed

03847517-1e30-471b-aa1e-62673e265391.png

Row properties section has the following settings for each row:

  1. Background color
    1. HEX
    2. RGB
    3. Paleta
  2. Content Background color
    1. HEX
    2. RGB
    3. Paleta
  3. Background image
    1. select an image from the local PC
    2. drag and drop image
  4. Image URL
  5. Padding
    1. Top
    2. Right
    3. Left
    4. Bottom

c1890f3a-e018-450c-b802-8027678f5fbf.png

Responsive design setting can be turned on or turned off.

28f0e20e-ab3a-4f84-9ffe-6424d5641f18.png

Columns

Columns: It allows users to add columns to design in order to have a better design arrangement. Basically, Columns mean Row. When user adds a Column element to design a new Row will be added.

1a045cce-9a0e-412d-a94a-3abc3a5bb314.png

2874aa2b-cb46-4c53-b348-da37c34c61e7.png

Column element has the same settings as a Row.

 

Heading

Heading: Add headings (from level 1-4) to the design. Heading element can be added to design to the existing Row only. If a Row is divided into several Columns the Heading can be added to each Column.

899aebe8-72f1-4ff7-b630-a4b2b9c37280.png

The Heading element has the following settings:

  1. Text:
    1. Heading Type
      1. H1
      2. H2
      3. H3
      4. H4
    2. Font Family
      1. List of available Fonts
    3. Font Weight
      1. Regular
      2. Bold
    4. Font Size in pixels
    5. Color
    6. Text Align
    7. Line Height in %
  2. Links
    1. Inherit Body Style
      1. Yes
      2. No
        1. Color
        2. Underline
  3. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  4. Responsive design
    1. Hide on Desktop/Mobile

65fb81fe-ee26-467c-a6bc-46bf5ee118e4.png

Text in Heading element can be adjusted with a quick tool panel. There are the following settings at the Heading quick panel: Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Insert/Edit link, Emotions.

d7407bd0-23d2-46a4-9fee-1365184c3f82.png

Text

Text: Text is a built-in tool so you can add text to your designs. Text element can be added to design to the existing Row only. If a Row is divided into several Columns the Text can be added to each Column.

223b7b22-826d-4233-bcd3-19b162ba7929.png

The Text element has the following settings:

  1. Text
    1. Font Family
      1. List of available Fonts
    2. Font Weight
      1. Regular
      2. Bold
    3. Font Size in pixels
    4. Color
    5. Text Align
    6. Line Height in %
  2. Links
    1. Inherit Body Style
      1. Yes
      2. No
        • Color
        • Underline
  3. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  4. Responsive design
    1. Hide on Desktop/Mobile

81ad0757-da82-4668-9cc5-7da7da46c2da.png

Text in Text element can be adjusted with a quick tool panel.  There are the following settings at the Text quick panel:

  1. Bold
  2. Italic
  3. Underline
  4. Strikethrough
  5. Text Color
  6. Background Color
  7. Superscript
  8. Subscript
  9. Insert/Edit link
    1. Custom
      • Open Website
      • Send Email
      • Call Phone Number
    2. Special
      • Unsubscribe
      • View Online
      • Share on Facebook
      • Share on Twitter
  10. Emotions
  11. Bullet List
    1. Default
    2. Circle
    3. Square
  12. Numbered List
    1. Default
    2. Lower Alfa
    3. Lower Greek
    4. Lower Roman
    5. Upper Alfa
    6. Upper Roman

4457dd4b-70e5-47a7-81d8-e97586ac5e29.png

Image

Image: To make your emails attractive, you can add images using this tool. Image element can be added to design to the existing Row only. If a Row is divided into several Columns the Image can be added to each Column.

2f59da58-27b2-4f83-9a4b-98d1e5549ae6.png

Image element has the following settings:

  1. Image
    1. Upload image
    2. Drag and Drop image
    3. Image URL
    4. Auto Width
      1. Auto
      2. Manually
    5. Align
      1. Left
      2. Centre
      3. Right
      4. Justify
    6. Alternative text
  2. Action
    1. Open Web Site
      1. URL
      2. Target
        • New Tab
        • Same Tab
    2. Send Email
      1. Mail To
      2. Subject
      3. Body
    3. Call Phone Number
      1. Phone
  3. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  4. Responsive design
    1. Hide on Desktop/Mobile

98d529cd-9051-42a0-a8d8-8f8999c0afc8.png

Button

Button: Add any type of button in your email. You can change colors and styles. Button element can be added to design to the existing Row only. If a Row is divided into several Columns the Button can be added to each Column.

3ab2fbc1-dae1-415d-8546-f8edfe400ef4.png

Button element has the following settings:

  1. Action
    1. Open Web Site
      1. URL
      2. Target
        • New Tab
        • Same Tab
    2. Send Email
      1. Mail To
      2. Subject
      3. Body
    3. Call Phone Number
      1. Phone
    4. Special Links
      1. Unsubscribe
      2. View Online
  2. Button Options
    1. Text Color
    2. Background Color
    3. Auto Width
      1. Auto
      2. Manually
    4. Font Family
    5. Font Weight
      1. Regular
      2. Bold
    6. Font Size
    7. Alignment
      1. Left
      2. Centre
      3. Right
      4. Justify
  3. Spacing
    1. Line Height
    2. Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
    3. Border
      1. Side
        • Top
        • Right
        • Left
        • Bottom
        • or single value for each side
      2. Type
        • Solid
        • Dotted
        • Dashed
      3. Width
    4. Rounder Border
      1. Corner
        • Top Left
        • Top Right
        • Bottom Left
        • Bottom Right
        • or single value for each side
      2. Round up value
  4. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  5. Responsive Design
    1. Hide on Desktop/Mobile

542cc4f5-f8a4-4c48-a875-3665c8311806.png

Text in Button element can be adjusted with a quick tool panel. There are the following settings at the Button quick panel:

  1. Bold
  2. Italic
  3. Underline
  4. Strikethrough

98ef2222-4b45-4d33-8498-26d15f8e7098.png

Divider

Divider: It gives you appropriate spacing at any point they want in their design. Divider element can be added to design to the existing Row only. If a Row is divided into several Columns the Divider can be added to each Column.

835ae30e-65ee-4bc4-923f-7cade51b3557.png

Divider element has the following settings:

  1. Line
    1. Width
    2. Line
      1. Type
        • Solid
        • Dotted
        • Dashed
      2. Weight
      3. Color
    3. Align
      1. Left
      2. Centre
      3. Right
      4. Justify
  2. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  3. Responsive Design
    1. Hide on Desktop/Mobile

a7951536-88f7-4f09-9ae6-19de9954a5b0.png

HTML element

HTML : HTML is a built-in tool so users can add custom HTML to their designs. HTML element can be added to design to the existing Row only. If a Row is divided into several Columns the HTML element can be added to each Column.

06082894-c6b7-492e-b407-605c98660cb7.png

HTML element has the following settings:

  1. HTML
    1. Area to add/edit HTML code
  2. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  3. Responsive Design
    1. Hide on Desktop/Mobile

a84b3708-9c84-4927-9f9b-0815058ece21.png

Menu

Menu: Menu is a built-in tool used to create navigation menus. Menu element can be added to design to the existing Row only. If a Row is divided into several Columns the Menu element can be added to each Column.

72cf9806-08fb-41e4-aba6-01d758067860.png

Menu element has the following settings:

  1. Menu Items
    1. Text
    2. Action
      1. Open Web Site
        1. URL
        2. Target
          • New Tab
          • Same Tab
      2. Send Email
        1. Mail To
        2. Subject
        3. Body
      3. Call Phone Number
        1. Phone
      4. Special links
        1. Unsubscribe
        2. View Online
    3. Delete item
    4. Add a new item
  2. Styles
    1. Font family
    2. Font Weight
      1. Regular
      2. Bold
    3. Font Size
    4. Text Color
    5. Link Color
    6. Align
      1. Left
      2. Right
      3. Centre
      4. Justify
    7. Layout
      1. Horizontal
      2. Vertical
    8. Separator
    9. Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  3. General
    1. Container Padding
      1. Top
      2. Right
      3. Left
      4. Bottom
      5. or single value for each side
  4. Responsive Design
    1. Hide on Desktop/Mobile

d7b9c232-9d03-4ce1-8150-cbb603baa913.png

Was this article helpful?
0 out of 0 found this helpful
Return to top

Related articles