Customizing Emails with the Email Editor

Dark
Light

Customizing Emails with the Email Editor

Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

Goals and Outcomes

The email editor allows you to create and customize your emails using a simple drag-and-drop interface.

In this article, you’ll learn how to use the email editor to add, customize, and edit your message’s content.

Email Editor Overview

Accessing the Email Editor

To customize your emails, open the email editor.

Email campaigns

On the Yotpo Email home page, click Create campaign in the header.
Select Email and click Create campaign.
In the Email preview header, click Edit.

Multi-message campaigns

On the Yotpo SMS & Email home page, click Create campaign in the header.
Select Multi-message and click Create campaign.
After you add an email to the campaign’s steps, in the Email preview header, click Edit.

Email templates

In your Yotpo SMS & Email main menu, go to Campaigns > Email Templates > Featured templates tab.
Select the template you want to customize, hover over it, and click Template actions > Add to My templates.
In the My templates tab, hover over the template, and click Template actions > Edit.

Flows

In your Yotpo Email main menu, go to Flows > My Flows and click Create flow.
After you add an email to the flow’s structure, in the Email design section, click Edit design.

Customizing an Email

The email editor allows you to customize the elements of your message in two ways: by applying styling options to all elements or by modifying them individually.

In the Styles tab, you can manage the overall styling of all elements in your message. Choose whether to apply changes to the desktop or mobile version, then make your adjustments. These updates will apply to any new elements you add.

From the Content tab, you can drag and drop elements into the working space and customize them. Any settings applied in the Content tab will override the general settings configured in the Styles tab.

Before you start customizing your email, it's important to know how it’s structured:

Sections: The top-level element in an email’s structure. There are 4 types of sections: header, content, footer, and info area. Each section can include multiple layouts.
Layouts: A layout can include up to 8 containers and occupies a single row within a section
Containers: A container can hold various blocks of content, such as text, images, and buttons
Blocks: A block includes content like text, social media links, and products from your store
Modules: A module is a reusable, predefined component that is built of one or more elements and can help you save time when designing an email. You can find all modules in the Content Library under the Content tab.

A well-structured email typically consists of 3 sections:

Header: The top section containing the logo, navigation, and branding elements
Content (body): The main part where the text, images, and calls to action are presented
Footer: The bottom section, often including contact information, social links, and unsubscribe options

By default, every template in Yotpo Email includes these sections. To start designing your message, you can choose the default template or select one from the template library. Once you customize your email, the editor allows you to save your updated design for that specific message or save your edits as a new template. To learn more about email templates, see Creating and Managing Yotpo Email Templates.

Styling an Email

The email editor offers a wide range of customization options to tailor your message so that it reflects your brand identity.

To start styling your email, in the Styles tab, select Desktop to access:

General settings: Define the email message width, default padding for layouts, background color or image, and fonts. You can also customize line spacing, paragraph spacing, underline links, and RTL text direction, as well as ensure responsive design for different devices.
Sections: Configure settings such as text size, background, font and link colors, and background images for each section type
Headings: Customize heading levels 1 to 3 by selecting the font, line spacing, boldness, italics, and color. Headings apply only to Text blocks.
Button: Set default parameters such as font size and button and text color. You can also activate the Highlight hovered buttons toggle, allowing buttons to change color when hovered over.

Although the email templates in Yotpo Email are designed to be responsive, you can adjust the settings for the mobile version of your message to ensure it is fully readable on any device. In the Styles tab, select Mobile to customize the header, content, button text size, and more. We strongly recommend testing your emails on mobile devices to confirm everything appears as intended.

Adding elements

In the email editor, you can easily manage the elements of your message through a drag-and-drop interface. Additionally, each element features a 3-dot menu that appears when you hover over it in the working space, offering options for further customization and management.

Sections

Sections are the largest elements in your email. Each message must contain at least one section.

To add a section to your email:

Hover over an existing section and click the add (plus) button.
Select a layout for the section and it will be added to the template.
In the left sidebar, from the Message area drop-down, select the section type.

After adding the section, in the sidebar, you can customize it by choosing its background color, background image, etc.

To remove or copy a section, for example, use the 3-dot menu:

Hover over a section and click the menu icon.
Select an option by clicking one of the icons below:
- Remove (bin): Delete the section from the template
- Flowchart: Add conditional content to this section. To learn more, see Adding Conditional Content to Emails in Yotpo Email.
- Copy: Duplicate the section and all its contents below the current section
- Move: Move the section up or down within the template
- Save: Save the section as a module

Note:
The 3-dot menu is also available for layouts and blocks but the options for most of the blocks include only 3 actions: move, copy, and remove.

Layouts

Layouts are second in the hierarchy of elements with each section containing at least 1 layout. You can drag and drop layouts into a section and then adjust the number and the size of the containers, the background color, etc.

To add a layout and adjust its settings:

Open the Content tab and select Layout.
Choose a layout and drop it into a section in the working space.
Hover over the layout and click it.
In the left sidebar, click the add (plus) button to add more containers. You can resize the containers and customize the layout by adding background colors, padding, and more.

Containers

Containers offer the most variety in structuring your email because you can adjust their size to fit your design needs. They can hold various blocks such as Text, Image, Video, Button, and more.

Note:
Products, Product Recommendations, and Customer Reviews do not fit in containers. Instead, these are added directly as layouts and occupy one whole row.

You can add content to containers in 2 ways:

Click a button inside the container to add an image, text, or a button
Drag and drop a block inside the container

To customize the container and its contents, click the container in the working space, and the settings will appear in the sidebar. Keep in mind that the settings will vary depending on the block added to the container.

To remove a container from a layout:

Click the layout in the working space.
In the sidebar, select the container you want to delete and click the remove (bin) button.

Blocks

Blocks allow you to add content to your email.

Block	Description
	After you add a Text block, click it to open the text editor which appears as a toolbar above the template. You can customize the text and add personalization tags. To learn more about personalization tags, see Adding Dynamic Content with Personalization Tags.
	After you add an Image block, click it to insert the image. To make sure it appears correctly, follow these recommendations: Supported formats: JPEG, GIF, PNG Maximum size image: 3 MB Maximum recommended size: 4,000 × 4,000 px Once the image is added, click the edit button to open the image editor.
	After adding a Button block, click it to open the settings in the sidebar where you can add a link to the button and customize its appearance.
	The Social block adds social media logos to your message. After adding the block, click it to open the settings in the sidebar to customize the logos' appearance, such as color and shape.
	The Logo block adds an image to your message. Its customization options are identical to those of the Image block.
	The Menu block adds a horizontal list of links. These links can be displayed as text, icons, or a combination of both. In the settings, you can easily add and remove menu items and customize their appearance.
	The Products block is added as a layout and shows specific products in your message. To learn more, see Adding Products to Your Email and Using Click-to-Redeem and Click-to-Buy.
	The Product Recommendations block displays highly personalized product suggestions. Powered by AI, these recommendations are tailored to each customer’s preferences and browsing behavior. To learn how to configure this block, see Adding Product Recommendations to Your Email.
	The Customer Reviews block is added as a layout and shows customer reviews in your message. To use this block, you must have Yotpo Reviews. For more details, see Adding Customer Reviews to Your Email.
	The Loyalty Personalization block adds a banner tailored to each customer’s Loyalty status. To use this block, you must have Yotpo Loyalty & Referrals. To learn more, see Adding a Loyalty Banner to Your Campaign.
	The Banner block allows you to add an image to the container and overlay text on it. When you click the Banner block, the image settings will appear in the sidebar, and a text editor toolbar will be displayed above the template.
	The Video block adds a video link to your message. In the settings, you can customize the video thumbnail, choose the style of the play button, and set the text that appears when hovering over the video link.
	The Canva block allows you to add a Canva design to your email. To use this block, you need an active Canva account.
	With the HTML block, you can add custom code to your email. After dragging and dropping the HTML block into a container, a code editor will open to enter your code. Once you finish, the editor will render the code as content.
	The Spacer block adds a decorative line to help organize and improve the visual structure of your message. After adding a Spacer block, click it to open the settings in the sidebar, where you can change its color, thickness, width, and more.