Rejoiner

Rejoiner Documentation

Explore our guides and examples to power your email channel with Rejoiner.

Get Started    Guides

Drag and Drop Editor

Overview

This tutorial provides instruction on the fundamental components of the Drag and Drop Editor. We’ll walk through the process of building a prototypical newsletter that consists of common elements like columns, text, images, links, and buttons.

Tradeoffs

Our Drag and Drop Editor is an effective tool when your goal is to build an email quickly, without having in-depth knowledge of HTML/CSS, specifically related to email design. The Drag and Drop is a tool for non-technical users who are tasked with building functional, good looking emails. However, with any tool designed for ease of use, there are some tradeoffs to be aware of.

While you are able to modify the underlying HTML/CSS within a Drag and Drop template, these custom modifications can cause rendering issues.

Because of this, the Drag and Drop may not be the ideal tool if pixel perfect design is required of your email (e.g. working off of a complex static mockup and translating it to 100% accuracy). If this is your goal, the Advanced Editor should be the tool of choice.

Getting Started

To get started, you’ll want to:

  1. Login in to your Rejoiner account at http://rj2.rejoiner.com/

  2. Click on Creative in the main menu

  3. Click on the Add New Design button

  4. Click on Drag & Drop Builder

  5. Name your email, confirm that the “Blank Start” template is selected, and click the green arrow

For the purposes of this tutorial, we’ll be working off of a blank template. In the future, you might start off with a pre-built template or a clone of a previous email. Both of these methods will save you time.

Source Material

When creating an email from scratch, it can be helpful to work off of a static mockup. This mockup can be a full-fledged design or a low-fidelity prototype. For this tutorial, we’ll be working off of the following lo-fi mockup. It contains many of the elements of a common broadcast email.

Editor Basics

When working with the editor, it’s important to understand the basic hierarchy of nested elements. The outermost layer is called the Stripe, then the Structure, and finally the Container.

It might be helpful to think of these elements in the following way:

Stripe: This should contain a block of “like” elements. For example, a Stripe focused on featured products might contain some text, images and links of the products, and a call-to-action button. Grouping all of these things together makes it easy to delete or clone the entire collection.

Structure: This element will define your columns. Adding a new Structure will give you the option of starting with a number of pre-defined columns (i.e. 1/1, ½ + ½, ⅓ + ⅔) and their spacing.

Container: This is your innermost element which is represented by an actual piece of email content (i.e. a piece of text, an image, a button, etc.).

In addition to these nested elements, there is also the Appearance tab.

Modifying settings within the Appearance tab will define email-wide settings and styles. For example, if you know that you want all of your buttons to be dark blue, with white text, and 10x rounded corners, you can define that here. Any new button that you add to your email will adhere to these settings.

Finally, it’s important to note the Undo, Redo, Preview, and Test Send buttons.

  • Undo: Undo last action
  • Redo: Redo last action
  • Preview: Pop up a rendered preview version of your email in desktop or mobile view
  • Test Send: Send a test email to an email address

Building Your Email with Stripes, Structures, and Containers

Using our a lo-fi mockup as a guide, we can now begin building out our email. Let's start by dragging our our columns to the appropriate stripes. Once we've done that, we can also go ahead and delete the unnecessary columns.

[gif of adding column layout, removing column layout]

In the end, you should have the following column placeholders per stripe:

  • Header Stripe: 1 column
  • Content Stripe: 1 column, 1 column, 2 column
  • Footer Stripe: 1 column

Now that the column layout has been determined, we can start dragging out the appropriate blocks to populate the containers with our content. For containers that will be images, drag out the "Image" block. For containers that will be text-based, drag out the "Text" block.

[gif of adding blocks to containers]

Click on an image block to bring up the content inspector on the righthand side. To add an image, you can either upload a new image or link to an external image.

Click on a text block to modify its contents and appearance. New text can be typed directly into the WYSIWYG editor. Styling, such as color, alignment, and spacing, can be handled in the content inspector on the righthand side.

Preview, Testing, and Saving

As you make progress on your email, be sure to regularly click the "Save Creative" button in the upper right.

At any time, you can also click on the "Eye Icon" in the upper right to preview your email without editing capabilities. You can preview your email in Desktop or Mobile orientations.

Once you're content with the look of your email, be sure to send yourself an inbox test. Click on the "Paper Airplane Icon" in the upper right to send the email to the address of your choice.

Footer Requirements

To comply with CAN-SPAM legal requirements, your footer must contain the following information:

  • Company Name
  • Company Street Address
  • City
  • State
  • A link to Unsubscribe or Manage Email Preferences

The following template tags can be used in the footer:

  • Unsubscribe: {{unsubscribe_url}}
  • Manage Email Preferences: {{subscription_preferences_url}}
  • Current Year: {% now "Y" %} (Usually used in the footer next to the © symbol).

Updated about a month ago


Drag and Drop Editor


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.