Using drag and drop editor
Learn how to use the drag and drop email editor in Retainful
Customizing your email templates has never been so easy. With Retainful, you can easily drag and drop the desired elements onto the template body of your emails.
This article illustrates how you can customize email templates using Retainful.
Editing Email Template
2. You’ll be redirected to the 'Drag and drop' editor, where you can customize the email template
Drag and drop email editor
You can just click on the logo block in the email template and upload your logo from the Retainful image library or from your computer.
If the email template doesn't have a logo block, you can add the logo block manually from 'Blocks' section.
In the email template editor, the tools for customization are available in the far right corner as follows:
Blocks to Choose
In this part, you can find tools that allow you to add segments to your email template, for example, if you wish to divide the template layout into 2 or 3 columns, you could drag and drop blocks from this section.
This is how the template layout can be segmented with the use of tools in the section tab
Adding Content Blocks in Email Template
This section helps you add new text blocks, buttons, images, dividers, and so on.
Using these you can add text blocks, CTA buttons, images, and social media icons to the email templates.
3. Store Element
In the store elements section, you can find blocks that are related to the store.
Cart items / Order summary: This can be used to display the items that are in the customer's cart.
Address: With this block, the billing and shipping address, billing method, and shipping method of the order would be fetched and displayed.
Coupon: When you use this block in your email, you can able to send a coupon to your customers.
Unsubscribe: All emails should have an unsubscribe link to allow customers to unsubscribe from receiving emails from Retainful.
You could also customize and add styles to the individual sections of the email template. Let us learn more about this in the next section.
If you wish to apply styles like changing the color, font size, and dimensions of a particular section, that can be done by ‘clicking’ on that particular segment.
When you click on a particular segment, a blue rectangle appears around the element or block.
And the options to customize the layout appear in the right corner under the 'Styles' section.
Customizing Email Elements
Settings block - This part offers options corresponding to the block that has been chosen.
For example, if you click on a button block, then in the settings tab, you can specify the URL to which the user should be redirected to while clicking on the button.
- Dimension block -In this section, you can modify the padding and height of the selected block.
Customizing Dimension of Blocks
- Typography block - Here you can customize the font style, size, weight, letter spacing, color, line height, text decorations, and alignment of the text blocks.
- Decorations block - Keep your product in mind while designing your emails. Highlight when necessary using the ideal background color.
This section would allow you to add other CSS styles to the selected element.
This is how you can customize individual blocks in your email template.
Around 61% percent of your store users are checking your emails on mobile devices. This becomes all the more reason to optimize your emails for mobile devices.
You could check if the email templates are responsive by making use of the icons at the left corner of the email template editor.
Device based preview
Once you have completed editing the email template, you can test the email.
With an email customized, return to the top of the email editor and click the ‘Send Test Email’ button to make sure all of the content displays as expected in your inbox.