Design emails in the Drag & Drop Editor

Download free templates

Quentn provides you with 50 free email templates, all of which you can edit as you wish. For this reason, you should choose the template not because of its content, but because of its design and the arrangement of the text and images. Everything can be changed and customised at any time!

  • Click on the menu item Email and templates.
  • First of all, you will see your saved templates. To choose ready-made templates, click on the Quentn Templates tab.
  • Choose a template. You can enter search items to get a pre-selection. For example, if you search for "black", you will be shown templates with a dark design.
  • To use the desired template, hover over the template with the mouse. A green button "Create new template" will appear. Please click on it.

Create new template

It goes without saying that you can also create your own template from scratch.

  • Click on the menu item Email and templates.
  • You will land directly on "My templates". Click on "Create new template".

General orientation

As soon as you open a template, please enter a title.

At the top of the template you will see three blue buttons:

  • Press "Full screen" to switch to full screen mode (recommended).
  • By clicking "Show structure", you will see the borders of the individual blocks, rows and columns.
  • Under "Preview", you can see what your newsletter looks like on the PC and on mobiles.
  • You will return to the normal view as soon as you click the respective button again.
  • To undo one of your design steps, you will find three icons in the bottom left-hand corner: a round arrow with a clock, an arrow to the left and an arrow to the right.
    • By clicking on the clock symbol, the last working steps are displayed. This allows you to return to a specific point in the editing process. The layout will then be restored exactly as it looked at the selected point in time.
    • The arrow to the left undoes the previous action.
    • The arrow to the right brings you one step forward again.

Design: Content

To the right of the template you'll find "Workbench". Under the menu item you will see the individual building blocks that you can add to your email. Select the desired type (text, image, button, separator, social media button, icon or GIFs via the provider Giphy) and drag it to the desired position in your email while holding down the left mouse button. You can then change the position as desired.

In your email, click on the block you want to edit. On the right-hand side, you'll see advanced properties and options. This allows you to adjust text and link colours, set line spacing, define margins, and make other edits to all the other blocks as well.

Images

Upload images

To include your own images in your email, select the "Image" type on the right-hand side and drag the element to the desired location in the email. Then click on "Search".

You are now in the File manager. Here you can upload the desired image and then insert it into your email.

Please make sure that your image files are not too large. A width of 600 pixels (+/-) should be sufficient.

Choose from 500,000 royalty-free images

You also have access to a database of over 500,000 royalty-free images that you can use in your emails. Click "Search for royalty-free photos" in the File manager. Then enter a search term to select a suitable image. Click "Import" to load the desired image into your file manager, and then click "Insert" to paste the image into your email.

Edit images

You can even edit your images in the editor. To do this, click on the image and then on "Edit image" on the right-hand side.

You now have the following options:

  • Use filter
  • Change size
  • Cut
  • Transform
  • Draw
  • Add text
  • Add shapes
  • Add sticker
  • Use frame
  • Round off corners

Add social networks

Drag the "Social" element to the desired location in your email.

After that, click on the contents of the row. On the right-hand side, you will have the option to add more social media services and remove the default one. You can also store the corresponding URL to your page for each service.

Design: Row

Under this menu item you will find a variety of different row layouts that you can drag into your layout.

When you click on an area outside the email content on the left-hand side of your layout, you're selecting a row. You can move this anywhere in the content by clicking the cross on the left side with the mouse, holding down the mouse button and then moving the element.

Likewise, you can save, delete or copy a row by clicking either the disk, recycle bin or copy icon in the right margin.

If a row is selected, an area appears on the right side under the menu item → Row, in which you can set the row and column properties. You can define the background colour of the row and the content separately, set background images for the row, set individual columns and much more.

Design: General

Under this menu item you set general settings: width of the layout, the default font, various background colours, link colours and so on.

Insert links and placeholders

With placeholders, you can dynamically apply certain information from the contact data. You want to personalise your email? Contact fields such as name, salutation, address or even your own contact fields are inserted into the email individually for each contact using the placeholders.

You can insert placeholders in every text module of the editor. To do this, click on the place where you want to insert the placeholder. A small toolbar appears with all the options for the text (font and size, numbering and bullet characters etc.). Click on "More" and "Insert placeholder".

Now insert the placeholder by clicking on the blue "Insert" button.

To insert links, please select the text you want to link. Then click on the chain symbol in the toolbar. A window with the option to "Insert link" will now open. Determine the link type and enter the URL. Click on "OK".

By the way, all links are tracked. So if you link images, words etc., you can subsequently respond to all link clicks in the campaign. The only exception to this is if the link is displayed in plain text, then a click cannot be tracked.

Different designs for desktop and mobile

You have the option to display your emails differently on desktop and mobile devices. For example, you can hide images for the mobile version so that the reader on the phone can grasp the content faster (just as an example).

To do this, click on the row you want to hide for desktop or mobile. On the right-hand side, in our "Workbench", click on the "Content" menu item and go down until you find the item "not visible on...". Now click where you don't want the row to be visible and save your changes.