Help

CATEGORY: Help Articles

Design Studio - Drag and Drop

Design Studio - Drag and Drop

Design Studio Overview

The Design Studio contains all of the messages that have been previously created using any of the six message creation methods available on e-shot™. If a message is ready to send, the default button action on the right-hand side will be to Create campaign. If it is not ready to sent, this button will contextually display Edit instead. The drop-down arrow connected to this button allows you to perform other actions, such as Previewing and Testing a message.

In this section, we will be focusing on creating messages using the Drag & Drop creation method. 

To start a new message in Drag & Drop, either double-click the Drag & Drop panel, or click it once and use the green Continue button nearer the bottom right of the screen to proceed.

Fill in the message name for your reference. This is not visible to your audience. Next,

  1. Give the message a subject line. This is best kept to within 70 characters, with more guidance available if you wish to find out more.
  2. Provide preview text. Although e-shot tells you it's optional which, technically, it is, if you miss it out, you'll potentially be sending source code in this space to your audience who use clients such as Outlook and Gmail. The guidance here again is to keep within 70 characters, although you can use anything up to 130 characters, as long as the text/emojis used is/are effective. The idea is to entice your audience.
  3. Select an identity. You can apply these setting manually, or use a pre-saved Identity.
  4. Use the green Continue button once you're ready.


You're now in the main editor, where you can build a mobile responsive email in a matter of minutes.

Although you can begin by creating your desired layout by inserting Blocks (dragging them from the options on the right and dropping them into the editor on the left), let's start with what can be customised in the General tab (visible on the right of the screen according to the screen shot). Here, you can give the document an optional title, change the whole email's background colour and change link colour and appearance, as well as setting how the links look when your audience hover their mouse pointers over them (cetain email clients only).

Returning to the subject of Blocks, these are essentially single, dual or triple column structures into a mobile responsive framework. When you have the Blocks tab selected and highlighted in blue, moving your mouse over the block in the editor will give you three contextual tools to help you manage the block and its properties. 

Let's explore what you can do with the orange editing pencil, in the block level,

  1. Change the background colour of the block (please be mindful, this is different to the overall message background colour).
  2. Adjust top and bottom padding. It is possible (although, for preservation of consistency of appearance of your message, not recommended) to adjust left and right padding, but that's performed on Element level.
  3. If you're using more than one column, you can set the columns to not stack on mobile, but you need to be careful to check the effect this has.

Within these Blocks, you can then drag in and drop from a vast array of content Elements. Once you add an element, ensuring the Element tab is selected and highlighted in blue, you can move your mouse over the element in the block, in the editor space and again be presented with (a minimum of) three contextual tools to help you manage this time, the element and its properties. Each Element type has a different set of properties than can be edited using the orange edit pencil and these will be explained separately. The different Element types include:

Text

A simple text editor. After you've typed in/pasted your desired text, it's strongly advisable to select the text and a) set font size plus b) set the actual font, as a minimum.

  • To add a link, select the portion of text you wish to be hyperlinked and click on the icon with the small green circle with a white plus sign in it. Follow the instructions there, to add your link. You can add website URLs and email addresses; website URLs must be complete, i.e., they must start with http or https

The editable properies/options for the Text Element include changing the left and right element padding.


Boxed text

A simple text editor surrounded by a coloured, padded box. The editable properies/options for the Boxed text Element include changing the left and right element padding, as with the Text Element, but adds options for changing the box background colour and the box's inner padding.

Divider

A horizontal divider that can be added to a Single Column block with pre-set display options. The editable properies/options for the Horizontal Divider Element include the usual changing the left and right element padding and has options for changing divider thickness, type (style, such as solid, dashed, etc) and colour.

Image

Adds an image and can optionally contain an email or URL link. To add the image, navigate to where the image has been saved in the Image Manager or add one on-the-fly (more information below). Once located, double-click the image to place it in the element, or achieve the same thing by right clicking and choosing Select. The editable properties/options for the Image Element include the usual changing the left and right element padding. It is also possible to set the alignment of the image, add Alternative Tag Text (very important) and set it to full width (touching the edges of the body of the message area) or scale to container (if the image is smaller than the element container into which it has been placed, this option will scale it proportionally to fill the element container width, within the boundaries of the padding).

Image & Caption

Similar to an Image Element, but also includes a text editor with positional display options. See Text and Image Elements above, for more information.

Social media

Adds an icon for each chosen social media site, with customised links and icon display. The editable properties/options for the Social media Element include the usual changing the left and right element padding. It is also possible to set the icons' alignment (left/right/centre), size (48/32/24 pixels), theme from a pre-defined range of 10 themes and shape (circular, rounded corners or square).

Buttons

Adds a call-to-action button with a customisable colour and an email or URL link (the colour of the text is manageable under the Link settings). The editable properies/options for the Buttons Element include the usual changing the left and right element padding, as well as aligning the button (left/right/centre) and setting its background colour.

Common editable properties/options across all core Element types

All Element types (apart from HTML Editor, which is locked down for the protection of the design), in their Options, can have the default left/right padding decreased incrementally, in increments of 1, down to zero. It is possible to apply padding asymmetrically. It is not possible to set side padding beyond 30 pixels due to lack of support in older email clients.

Apply padding rules on mobile will force mobile view to render padding with exactly the same pixel values as found in desktop view, including the top/bottom padding inherited by that element from it's associated, containing Block's settings. This needs to be used with a great deal of caution, and needs to be tested on a real mobile device, preferably more than one.

HTML Editor (not featured in image above) 

For expert HTML users, add your own HTML to an element and tailor to your needs 

Useful cloning and moving tools to help you get the job done quicker

Take a look at the green arrows icon: with the Blocks tab highlighted in blue, this will allow you to move the entire block to another location. Simply click, hold down and drang and drop the whole block into the position you desire.

This is also possible with elements, when the Elements tab is highlighted. Simply use the same icon, and drag and drop the element to a new, vacant position in your design. This is a great way to reshuffle information to the perfect position with minimum effort, and it behaves contextually, too: it's not possible, for instance, to drag a Divider element from a single column block to a vacant position in a Dual or Triple column block, but it can be dropped into a vacant position in another single column block.

Cloning of content within a Drag & Drop is possible on the Block level.

Just just click on a block where it has an element that has content and choose the first option, Clone block. This will clone the entire block, which you can then move to another position within the design as described above. After, you can make any changes to the content of the element(s) that you need to.

Beyond the Drag & Drop Editor: the finishing touches

Once you are happy with the design, click on the Actions fly-out on the far right-hand side and click Save. After the green Saved! lozenge appears, click on Preview to ensure you are happy with the design, by using the preview screen, which opens in a new tab/window (usual behaviour is new tab). Don't forget to check in mobile view as well!

When you're happy, close the tab, make any edits you might want to and repeat the steps above. Always remember to close the tab, once you're done checking.

Next, use the Save & Continue option on the fly out to proceed to the HTML Links section (Save & Continue/Save & Exit is your key to proceeding to the next stage). Here, you can make small changes to the ways in which each link is handled, including setting a Friendly Name for each and every single link in the design. Links to email addresses won't show here (and they can't be monitored or tracked) as they're handled in an entirely different way.

The next screen will show you the Plain Text version of the message. A very small percentage of your audience is likely to see this, but it's still important to get it right to keep all your readers happy. The easiest way to get a compliant message and make sure you're sending the right content out, is to click on the Reload Text from HTML button, that will automatically draw the textual content only, in from the Drag & Drop design. Here, you can edit the text if you want to, if you, say, find that a particular link has automatically been repeated too many times from the Drag & Drop version of the message.

Finally, you're presented with the Text Links separately. These can be different (remember, you can edit your Plain Text version of the message), hence there's a separate page for them. After you're happy with the set up of these links, you should be ready to click on Save & Exit.

Image Manager

This tool can be found either from within the Design Studio utilities drop down or through the expanded Designs menu tree. Images can be added or edited from here, ready to be placed into any messages that support images. Right clicking an image and selecting 'Edit in Image Editor' will open Image Editor, as long as the tab/new window is not blocked, where you can resize, crop or otherwise edit your image. Please be advised: Image Editor will only save an image as long as it has no spaces in its filename, and will place the saved image as a duplicate file (will leave the original file untainted) in the same folder as the original, with the name image_dateStamptimeStamp.fileExtension.

Warning: do not delete, move, rename or change any images just after you have sent a live campaign. This will cause the images to disappear or distort from your customers' inboxes, as they're drawn in from where they're stored on the Image Manager, as opposed to being embedded in the message.

Message Testing & Inbox Review 

Find out more about our testing service, Send Forensics.

Solutions

Free email marketing healthcheck - icon

Email marketing healthcheck

We are confident that we can help you, which is why we offer a free healthcheck to identify potential issues with your current programme and free advice on things that could be done to improve it.

Get started