All Collections
Email
Email Creation
Email Editor: Email Editor Tour
Email Editor: Email Editor Tour

Using the Email Editor to build email campaigns.

Updated over a week ago

Getting Started: Containers & Content Modules

To start building your Email Campaign, select the Element icon in the top left corner of the email editor page. You will see Containers and Content drop down menus. Containers are the place holders for your Email Campaign design.

Content modules are the design elements of the campaign that will live within Containers. Always start with a Container to add new Content into. (Ex: Drag 1 Column into your design and then drag the Image module into the 1 Column.)

Container Style Manager

Each time you drag and drop a new Container Module, you will see the Style Manager appear in the left sidebar. Here you can make changes to the padding, background colors, add a border and more.

Image Module

To place an image in your email campaign, drag an Image Module into the email design. Double click on the placeholder image and then select the image you want to place from your computer. The Style Manager for your image will appear in the left sidebar.

Under Image Settings, you can:

  • Upload a different image

  • Delete the current image

  • Add an image link

  • Write any Alternative Text (alternative information for an image if a user for some reason cannot view it (because of slow connection, or if the user uses a screen reader). For example, if your logo fails to load a user would see “Logo” in its place.)

Under Size & positioning, you can:

  • Adjust the Image's size. The Springbot Default Email width is 600px. If you would like the image to fit the entire width of the email, type 600 px in the width box or type "auto."

  • Add padding to the image

  • Align the image left, center, right, or inline

Under Borders & backgrounds, you can:

  • Change the style of the image's corners (for a rounded corner, type 90 in the radius input boxes)

  • Add a styled border

  • Add a color to the image's background

Button Module

The Button Module allows you to create a call-to-action button such as "Shop Now" or "Learn More" which you can link back to your website, blog, or a specific product page. Once you drag a Button Module into your template, you can adjust the button copy, URL, and any styling settings in the Style Manager on the left sidebar.

Social Module

If you've filled out your social styling and links in Store Branding, the social module will automatically apply the colors and links when you drag over the Social Module. If you haven't completed store branding, you can add your social links and style your icons on the left sidebar in the Style Manager. If you need to delete an icon, just deleted the pre-populated URL.

Text Module

To add text to your campaign, drag and drop the Text module. Double click on the text box to make any changes to the copy and positioning using the tool bar. You can also adjust padding and background color in the Style Manager.

Product Module

The Product Module allows you to dynamically pull in product images and information from your store's catalog. You can search for products by name or SKU, or select products based on Top Revenue, Top Views, or Top Abandons. This module will automatically pull in the default product image, and allows for additional text (i.e., product name, price, description) to be added as well.

The product image and Button will link back to the product page on your site. To edit what product information shows, head to the Style Manager and your options will be to include Name, Price, Short Description, Full Description, and whether or not to include a button.

Text Module

Adding text is easy! Simply drag in a text module into the editor and click into the module to start typing. The text editor bar will appear where you can edit font, colors, add dynamic tags and more.

Dynamic Tags

Dynamic tags make it easy to add personalization into your content. For example, if you are looking to greet subscribers by their first name, type your greeting into the text module and then leave your cursor in the spot you want to drop in the [[customer_first_name]] dynamic tag. Dynamic tags can be used in the email or subject line and pre-header text.

How to Insert a Background Image Behind Text

Drag over a Container of your choice and then drag a Text module into that container:

Select the Container and click on the Paint Brush to open the Style Manager. Within the Style Manager, select Borders & Backgrounds and then Background URL. Click on Images and then upload your desired background Image:

We recommend adjusting a few settings for the image: set Background repeat to "No Repeat" and Background size to "Cover" so the image does not repeat and fits the entire width of your campaign:

Click save and you're done!

Can I upload a video to an email?

Due to the large file size of videos we do not support video upload. We recommend uploading a screenshot of your video as an image and linking that image to your video link in the URL tab.

Button Module

The Button Module allows you to create a call-to-action button such as "Shop Now" or "Learn More" which you can link back to your website, blog, or a specific product page. Once you drag a Button Module into your template, you will update the button copy and set the button URL on the right panel under Component Settings. You can use the Dynamic Tag [[store_url]] in this field to send subscribers straight to your homepage!

Social Module

If you've filled out your social styling and links in Store Branding, the social module will include that information. If you have completed store branding, you can add your social links and style your icons on the right hand side in Component Settings. If you need to delete an icon, just deleted the pre-populated URL.

Image Module

Once you drag the Image Module, double click the placeholder image to upload your image. The image URL will default to your [[store_url]], but you can update this link on the right hand side.

Additional Settings:

  • Rel: The rel attribute specifies the relationship between the current document and the linked document/resource. Only used if the image is linked to a URL.

  • Alt: The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). For example, if your logo fails to load a user would see “Logo” in its place.

  • Title: The text you enter inside the title tag will not be shown to user when an image cannot be displayed. Instead, it is displayed in a popup when a user takes their mouse over to an image.


Product Module

The Product Module allows you to dynamically pull in product images and information from your store's catalog. This is ideal for including 1 product. If you'd like to list multiple products, use the Product List Module instructions below.

You can search for products by name or SKU, or select products based on Top Revenue, Top Views, or Top Abandons. This module will automatically pull in the default product image, and allows for additional text (i.e., product name, price, description) to be added as well. The product image and Button will link back to the product page on your site. Once you are ready to update your text, double click in the text section to use the Product Tags within the Inline Editing Tool - your options will be Name, Price, Short Description and Full Description.

Product List Module

The product list is ideal for listing multiple products. You can add and edit descriptions using the same steps listed in the Product Module instructions above.

Don't forget to preview and save your work!

We recommend sending your self an email preview so you can see how your campaign renders in your inbox. You can also preview via desktop and mobile. As you're working don't forget to hit Save (floppy disk icon) and Save & Exit if you need to step away!


Did this answer your question?