Overview
The Drag and Drop Editor can be used to build eye-catching campaign messages that stand-out and bring attention to a specific campaign.
- If you already have a flyer being used for the campaign topic that was created outside of SS&E Campaigns, the options in SS&E are either to "rebuild" the flyer sections/components using the Drag and Drop Editor or to add an image of the flyer into the Drag and Drop Editor using a column block.
Blocks (Layout) Panel
The most fundamental part of the Drag and Drop Editor is the "Blocks" panel.
This panel is open by default, but if you've navigated away from it, you can always access it by clicking the "Blocks" icon at the top right of the editor.
You'll see a series of tiles in this panel, all of which are draggable onto the main canvas. Let's look at each of the types of blocks and how you use them.
Column Blocks
Before we add any content, we need to talk about Column blocks.
These blocks help us layout our content into one, two, or three columns.
- All of the "content" needs to go into one of these blocks, so they're always a good place to start!
Let's start by adding a 1 Column block.
Great! Now we're able to add content, like text, images, and buttons into this column.
When designing your email, think about the structure of the message as a stack these of column blocks. For example, let's add a 3 column below it.
After adding some content, and another two column layout, we get something like this the following (note that an empty 1 column block was also added to the top to give some space before the title).
The above layout consists of a stack of a 1 Column block, then a 3 Column block under that, and then a 2 Column block under that. Don't worry, we'll learn how to fill these columns with content in just a bit.
Keeping Mobile in Mind
One challenge of designing great-looking emails is that they have to look great on mobile devices as well as on a computer. The nice thing about designing with these column blocks, is that they will automatically convert to a mobile view when the screen size is smaller. To preview what your email will layout will look like on a small device, click on one of the icons in the top left corner.
Our cat email still looks great on mobile! Our content expanded to take up more space, none of our pictures were smooshed together, and the content is easily scrollable.
Adding Content
Content blocks allow you to insert actual content into your layout.
In the prior example, the Image block was used to insert images of cats. The following blocks are used to add content to your messages. To use them, simply drag and drop them into the message.
- Currently, our Drag and Drop Editor doesn't support content copied in from an external source and all styling must be created within the text block options using the editor.
Basic Blocks
These are the most commonly used blocks.
| Button | Insert an HTML button. Buttons work similarly to links but are styled as buttons. Edit the button text by double clicking it after you've dropped it onto the canvas. Change the link by first selecting the button, clicking on the gear in the top righthand corner of the screen and pasting your link into the "Href" box. |
| Divider | Insert a horizontal rule. A horizontal rule is a visual line that will stretch across the column that you place it in. Use them to divide vertical content. |
| Text | Insert a text block. Once the text block is inserted, double click it to start typing. Text blocks offer variable insertion - once you've clicked the text, a drop down will be available with the variables that you can insert. Don't paste in styled text from an external source. The text will not be styled in emails. You need to style the text using the editor. |
| Spacer | Use this when you want to add vertical space between two elements. For example, if you wanted space between two text elements, you should use this instead of adding a lot of empty lines. Email clients (outlook, gmail, etc.) will show these empty lines differently, but this spacer will always be consistent. |
| Image | Insert an image. After dropping an image block into a layout block, double click on the image block to open the image manager, allowing you to upload new images or choose from images already part of the campaign. Once you've selected the image and added it to your canvas, use the corners of the image to resize it to your liking. |
Using links
To add a new link, highlight the text to receive the link and choose the connected paperclips as shown below.
-
When used the first time, a new modal will appear. The modal will open the first time a link is created; it can also be opened later by double-clicking on the link.
Here are a few helpful tips for using links within SS&E advanced campaigns editor.
-
To edit an existing link, be sure to select the actual “link” part of the text, highlighted in blue.
-
If the modal does not open once your link is selected, edit the details on the right sidebar by clicking the cog wheel.
-
When working with links within this feature, be sure to select the “link”, highlighted in blue, and not just the surrounding text field.
Advanced Blocks
These blocks are a little more complicated, but don't be afraid to use them!
Group Social / Social Element
Use this to provide links to your schools social media accounts. To add a link and change the social media site, first select one of the circles and press the gear in the top right:
Then use the Icon dropdown to select your social site, and paste the link to your account in the "Href" box. You can add or remove accounts. To remove, like any other element, click the trash icon in the blue menu above the element (shown in the picture above). To add another account, drag the Social Element block into your Social Group.
Quick Tip: Social Elements can only be added via Social Groups. If you only wish to use a single social element, first drag in a Social Group and then remove all elements except for the one you want to keep!
Navbar / Navbar Link
This component is useful if you want to show a list of links at the top or bottom of your email. It also has a great feature of turning into a single button on mobile which can be clicked to expand and collapse the navbar. You can turn on this feature by clicking on the navbar, and then clicking on the gear in the top righthand corner
Then where it says Hamburger, select on. Now when your email is viewed on a small screen, the navbar will look like
and then will expand when clicked:
To add the correct links to each Navbar Link, select the individual link, click on the gear in the top righthand corner, and paste the link in the "Href" box. You can remove links by pressing the trashcan, like other elements. To add more Navbar Links, drag a Navbar Link block into a Navbar block.
Hero Components
Hero components are designed to bring focus to a call to action.
They do not need to be placed within a column. And unless you want to send your students to space, you can change the background image by first selecting the hero component, selecting the paintbrush in the upper right, opening the decorations menu, clicking "Images" under Background Url, and selecting a new image.
The title text and button text can be changed by double clicking.
Many of these blocks can be styled so they match your schools branding. We'll walkthrough exactly how to do this in a later section.