New UI : Email Builder

With Limelight’s new UI email builder, customize your emails with the drag and drop interface. Access the builder in the header of the "Communication" section by clicking on New Email Designer


UI Overview

First, we'll cover the basic features, starting with the initial interface upon entering the new UI.

  1. Event Name
  2. Type of Emails (to view, select and edit) 
    1. All: displays all emails within the event
    2. Triggered: displays emails that trigger from a form submission or a data record update
    3. Scheduled: displays all emails that will need to be scheduled too be sent at a specific date/time
  3. Sort emails by name or type 
  4. *This section is currently in development*
  5. Search for any emails created by name 
  6. Change how you view the emails list - toggle between block format or list format 
  7. Add a new email by clicking on the + button 

Building Your Email

To start on an email build, click on the + button (#7 above), input the name for the email and verify if the email will be scheduled or triggered. 

If the email is triggered: 

  1. Select which type of trigger the email will be
    1. Form Submission
    2. Data Record Update 
    3. Database Update
  2. Choose the form the triggered email will deploy off of 
    1. Webpage 
    2. App page 

There are several sections to help you create your email. In this article we’ll cover the features within the left-hand side, the right-hand side and the top of the page. 

Right-Hand Side Elements:

1. Layout:

Build out the layout and structure of the email by inputting sections from Layout on the left-hand side. Split up the email into different columns to input your creative and copy. Each section in the creator can be adjusted to fit your needs by dragging the edges. 

  • Table: A section within your email (could have multiple columns/rows/images/text) 
  • Table Body: Same as "Table", a section within your email 
  • Table Row - Each "Table/Table Body" has rows and columns, "Table Row" represents the rows within that specific section
  • Table Cell - Each "Table/Table Body" has rows and columns, "Table Cell" represents the columns within that specific section

2. Elements: 

Use the elements section on the left-hand side to drag and drop buttons, text, dividers, spacers, paragraphs, images and even custom HTML code. Drag and drop within the layout you’ve created or into the open body. 

  • Buttons: Direct consumers to a specific domain 
  • Text: Input header copy to be include within the email 
  • Dividers: Organize the email with a divider
  • Spacers: Add white space within the email
  • Paragraphs: Input text using body paragraphs
  • Images: Upload any images (10mb or less) and resize within the editor
  • HTML Custom Code: Input custom HTML code to further customize

3. Blocks:

Insert blocks from the left-hand side into the custom email to help structure and layout images with text or headlines and body copy. Any block can be dragged and dropped into the layout created and will size out accordingly. 

4. Widgets:

Easily input a footer for privacy policy and legal or leverage a social bar to quickly add links to your social channels. 

5. Move, Duplicate & Delete: 

Every feature/section on an email has 4 icons attached to it, which enables you to select the entire section, move, duplicate and delete. 

  • Arrow: Select the entire section/container that an object is placed within (i.e. the footer of the email with social links) 
  • Move: Move around each section
  • Duplicate: Duplicate the object within the same section
  • Delete: Delete the object from the section or delete the section itself


Left-Hand Side Elements:

1. Layers: 

The layers section on the right-hand side allows you to view the structure of your email from top to bottom. 

  • Name each layer so elements are not lost and is easy to find if you need to move things around. 
  • The arrow icon to the left of the name of the layer allows you to look into each section and see what’s currently living within that layer of the email. 
  • Move aspects of the email using the move tool on the right. 
  • Click on the eye icon on the left side of the layer name to hide or display any layer.

2. Styles: 

The styles feature allows you to edit the dimensions, decoration and typography of each email aspect. 

  • Dimensions 
    • Width/Height: Adjust the width and height of each section on the email, size images accordingly or place a max height/width to control exactly where the assets stop/start. 
    • Margins: define the pixel space between the border and the next element of your design.
    • Padding: define the space between content and its border.
  • Decoration
    • Background Colour: input specific brand HEX colours or choose from the colour scale. Manage the transparency regarding the background colour. 
    • Border Radius: customize the section corners into a curve. The higher the radius, the larger the curve.
    • Border: customize stroke lines. Edit the width, style and colour of any borderline. 
  • Typography 
    • Font Styling: adjust font, size, weight (bold), letter-spacing (kerning), colour and line-height (space between each line).
    • Text Align: align text left, right or centred.
    • Text Decoration: underline or cross out any of the text. Use the X to remove all text decorations from a section. 
    • Font Styles: Capitalize all text within a section (A), vertically align your text either at the baseline, top, middle or bottom.
    • Text Shadow: add a drop shadow effect to any text by inputting your X and Y positioning, adding a blur effect and changing the colour of the drop shadow. Add multiple drop shadows to any group of text by clicking on the + button. Delete any drop shadow layer by clicking the x on that specific layer. 

3. Settings: 

The settings on the right-hand side will showcase the details regarding some elements like buttons, social links etc. Simply input the label, the target and the URL/location to drive to. 


Top Page Elements:

1. Language: 

English is the default language on the Platform. When creating an email you’ll start building on the English version of the email. To switch to another language, click on the  EN dropdown at the top left and select Add Language. Choose from 10 other languages: 

  • FR (French) 
  • PT (Portuguese) 
  • ES (Spanish)
  • IT (Italian) 
  • DE (German) 
  • NL (Dutch) 
  • NO
  • SV (Swedish) 
  • FI (Finnish)
  • RU (Russian) 

2. Devices: 

At the top of the page, flip the view from desktop to mobile to see how the email will look on cross-devices.

3. Grid Lines:

Toggle the grid lines on and off at the top of the page by clicking the dotted line box. When enabled, see where all individual pieces of your email are. When disabled, view how the email will look when a consumer receives it. 

4. Undo/Redo:

Mistakes can happen, don’t worry, there is an easy undo and redo button at the top of the page. 

5. Send Test: 

Click the send test button at the top right of the page to send a test email to yourself. When sending, the Platform will prompt you to input the Sender Name, Sender Email and Subject line. 

6. Settings: 

Edit all the information regarding your email and who it will be sent to:

  • Sender Info 
    • Input and edit your Sender Name, Sender Email and Subject line
  • Audience
    • Select the recipients list or who the email should be sent to        
      • Project Database
      • Selected Forms (forms that have been built within the project)
      • Uploaded List (CSV file) 
  • Seed List
    • Input a list of emails in the Seed List section that will enable you to monitor each email and its delivery.
  • Schedule 
    • Pick a date and time to schedule the email to be deployed. All times are by default in EST (eastern standard time). 
  • Publish 
    • Publish the email and it will be sent on the scheduled date and time.

7. Save: 

Save your email as frequently as possible to ensure no edits are lost. The save button is found at the top right. 

8. 3 Dots: 

Play with the background colour of the portal. Choose between dark or light mode. 

Still need help? How can we help? How can we help?