Email designer basics

Email designer basics

 

Delivra offers a modernized email editor that frees you from fussing with email design and makes it ultra-easy to personalize messages for maximum engagement.

designer1.png

 

General Layout

On the left of your page you will find layout elements that can be added into your design. These are categorized into Layout, Content, and Actions:

left-options.png

Layout—Add rows to your design as 1, 2, 3 column formats and pull in Space or Divider elements to create visual space between rows.

Content—Create text and image blocks in your design.

Actions—Create call-to-action buttons in your design.

 

Add Rows & Assign Type

Drag a new layout row (left) into your canvas (center). This will create a new row in your design.

Assign each cell in the new row as a content or action type like Text, Image, or Button. To do this, drag the content or action type icon (left) and drop it in a cell (center).

Shortcut

If the element you’re adding should be in a full-width format, you do not need to first add a full-width layout row. Dragging an element directly into the design will create a 1-column row by default.

AddRow.gif

 

Duplicate/Remove Rows

Hover over a row to see options to duplicate or remove it from the design layout:

dup-remove.png

 

Move Rows Up/Down

Hover over a row to see options to move it up or down in the design layout:

move.png


Editing Elements

To edit an element in the layout, click on it from the center canvas. This will open the editor for that element type on the right side of your page. Please note that edit options will vary depending on the element type.

Space

Edit options: Adjust height in pixels.

space.png

 

Divider

Edit options: Color, height, width, alignment.

Divider.png

 

Text

Edit options: Type (header, body), font family, size, color, text highlight, style (B, I, U), paragraph alignment, bulleted & numbered lists, paragraph indent & outdent, super & sub script, insert image, insert link, insert symbol, insert merge tag, pasted text styling.

text.png

 

Image

Edit options: Select/Replace image (insert from image library), alt text, width & height, link image.

image.png

 

Button

Edit options: Button color, radius (make button rounded or squared), font family, border, width, height, snap width to text, padding (margin inside button from edge), apply link and link reporting name.

button.png

 

Grouping cells

You can easily create a group of cells to control design structure. Hover over a cell to expose quick action icons. Click "move cell" to grab the cell then drag & drop it at the desired location.

CellGrouping.gif

 

Additional Formatting

Cell Style

For each cell in your design layout you have additional formatting options available in the Cell Style section:

cell-style.png

Here you can:

  • Change cell background color
  • Insert background image for cell
  • Assign a border to cell edges
  • Add padding to cell from edge inward
  • Assign font family, size & color to all text in cell
  • Adjust line spacing
  • Adjust horizontal & vertical alignment of content in cell


Template Style

Assign global formatting to the email design in the Style tab.

style.png

Here you can:

  • Change background color for email
  • Insert background image behind design
  • Change width of email
  • Add a border around design
  • Set color for all hyperlinks in the design
  • Add padding to email from outside edges inward
  • Assign font family, size & color to types of font in design (header, sub-header, etc.)
  • Control styling for all buttons in the design
  • Add a stylesheet to the design (applicable to mobile)

 

Mobile Preview

From inside the editor you can see a preview for mobile devices. This is provided as a general rendering tool. It's still important to test your campaigns to desktop and mobile devices!

mobile-preview.png

 

Assets/Media Library

An important part of email design is sourcing great images. In the Assets dashboard of your account you can host images in a Media Library. Bulk upload you own images and/or source images from our integration with Unsplash!

 

Resources

Check out these other resources to continue learning.

Email Designer Basics (e-learning)


    • Related Articles

    • Send a campaign

      You can create a campaign using a guided workflow that requires only a few steps to complete. If you are not there already, navigate to your Campaigns dashboard to begin. Click the “Create Campaign” call to action button to launch the guided ...
    • How do I change the email template chosen for my campaign?

      You started a campaign but then realize that you chose the wrong email template for its design. You can correct this issue easily in the the Setup step of the workflow. Follow these steps: Navigate to the Setup step of the campaign workflow. Scroll ...
    • Can I upload HTML for my campaign design?

      Yes. In the campaign creation process you have an option to upload your own HTML file that was designed outside of Delivra's system. Follow these easy steps: Start a new campaign, or edit an existing campaign. In the Setup step scroll to the Design ...
    • Send a multivariate campaign

      Multivariate is a type of campaign that you can send from Delivra. This type of campaign allows you to test email components, like the subject line or email design, to determine if changes impact recipient engagement with the campaign. You can create ...
    • How do I set up a confirmed opt-in email campaign?

      What is a confirmed opt-in email? This type of automated campaign is sent to confirm email subscription. There are two types: Single opt-in - A message to confirm that email subscription was successful & that they will begin receiving emails from you ...