9MAIL – WordPress Email Templates Designer


Created: 04/2022

Last updated: 4/2022 – Updated version: 1.0.1

By: VillaTheme Thank you for using our plugin.

If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

WordPress Email Templates Designer is a useful tool for creating and customizing WordPress emails if the default WordPress email template appears plain to you and you want to customize them, this is what you need. With no coding knowledge required, you can easily drag and drop, edit, and customize the layouts/contents within the email templates. Try our plugin to make the template look friendly and match your store design, and easily customize WordPress emails sent to customers.

 

Features of WordPress Email Templates Designer

  • Easily drag and drop elements to build and customize emails with 9MAIL – WP Email Templates Designer: – The easy-to-use email template builder allows you to create professional and eye-catching WordPress email templates.
  • Layout: Layouts can be added quickly by dragging and dropping appropriate layouts, available from 1 -4 columns.
  • Elements – Add different elements to your email template with sufficient information of WordPress emails. The editing tab will show allow you to work directly on fast and effectively each element.
  • Unlimited Number of Rows – unlimited rows can be added to the email template and include everything you need in the emails.
  • Direction: Support email texts right to left text and reverse.
  • Live Preview of Changes – visually observe emails by the preview, update any changes in the preview mode, integrate to see on the desktop, mobile.
  • Send Test Emails – Check the email design before the real sending.
  • Display Dynamic Data with Placeholders – Displaying placeholders makes it easy to design templates. Placeholders such as customer name, site name, User name, Password, My account URL which will be replaced by real user/order data while sending the WooCommerce emails.
  • Responsive and work perfectly on any devices.

 

Elements in WordPress Email Templates Designer

  • Text: Add text content to the template and customize the font color, font size, alignment, border width, insert/edit link, insert/edit image, shortcode, info icon, social icon, border style, border color, background color, text padding, and text margin.
  • Divider: Add a single line divider to the template and choose a style for the divider. Customize the style, width, height, color, alignment, margin and padding of the divider.
  • Socials: Add social icons to the email template, enter your ULRs in the placeholder including Facebook, Twitter, Instagram.
  • Image: Add an image to the email template and adjust its size and alignment, border style, border color, background color, text padding, and text margin.
  • Button: Add and customize the button: Name, the link of a button, style the border, alignment, background and padding.
  • Menu bar: Add and customize the menu bar or named the navigation bar that includes links to the most important sections of the site: Home, Shop, Contact…
  • Contact: Display contact information with icons on the email template.
  • Spacer: Add a space between other elements and customize its height, borders with style and color, and the background color.
  • Default template:If you are using a 3rd plugin, and the email contents of this 3rd plugin is not attached in WordPress default emails, but they create their own email templates.  In this case, you can use the default template type.

 

Additional features in WordPress Email Templates Designer

  • Unlimited templates: You can Add new to create as many templates as you want. The created email templates will be stored in the email template list page where you can easily edit, quick edit, trash, bulk action, filter templates.
  • Export and import data to among templates. In some case, the export and import data will save your time to move a template setting  to another template to keep using the style without rebuilding.
  • Custom CSS:  Add custom CSS to design the templates as you want.

System Requires:

  • WordPress Version: 5.0 or higher
  • PHP 7.0 or higher

Download Plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file /click “Install Now“/click “Active plugin“.

Done! Let’s start using the plugin.

 

Let’s visit our video guide on how to install and use 9MAIL – WordPress Email Templates Designer

After you install and activate 9MAIL – WordPress Email Templates Designer on your website, you can completely activate to send email templates altering default WordPress Emails.

Go to Email Template > Add New a template. Go to “Build new email templates” section to create email templates.

EMAIL PANELS OVERVIEW

 

1. Widget panel area

 

1. Components: The panel of components helps you work with options in order to drag and drop layout and contents to the editing space.

2. Editor: The editor panel will appear when you are working with an element and allow you to customize such us the borders, background color, padding, margin…

3. Custom CSS You can add your own CSS code to design on the front-end as you want.

4. Email Subject: Add email subject, customize easily with variety of shortcodes.

5. Edit space: The area displays the email content you are editing.

6. Background color: insert background for email. You can add images and customize the color.

7. Select layout button: Click to add a new layout quickly.

 

2. Actions with current email template.

At the left bottom of the email editing page, you can choose to interact with the email:

1. Exit to Dashboard 4. Copy to draft
2. Toggle admin menu 5. Move to trash
3. Add new email template 6. Publish the email

 

3. Settings

a. Directions

The plugin support Right to left text and reverse, you can choose in this directions section.

b. Testing: Observe emails by the preview in PC and mobile mode; Check the email design before the real sending.

  • Preview:
    • PC preview: Observe emails by the preview in PC.
    • Mobile preview: Observe emails by the preview in mobile.
  • Send to: Testing email will be sent to this email address.
  • Admin’s note for the template: Add a note for the template by the admin.
  • Data: Export and import data to among templates.

BUILD NEW EMAIL TEMPLATES

Steps 1: Go to 9MAIL > Add new.

 

Step 2: Create an email template you want to send customers.

9MAIL – WordPress Email Templates Designer uses 3 main building blocks: Row, Column and elements.  Row are the largest building blocks, and inside them are groups of Columns. Columns are used to cover outside elements. Elements are placed inside of columns.

You control, edit duplicate, remove row, Columns with their handles.

To edit row, column padding.

 To duplicate row, column.

To remove row, column and element.

A. Layout

The layout can be 1-4 columns for you to choose from.

 

1. Set the Columns padding. You can do it under Layout, or drag the dashed line between the Columns.

2. Insert elements to your Columns.

B. Content

Content includes with different elements to your email template with full shopping information of WooCommerce and users’ information. The editing tab will show allow you to work directly on fast and effectively each element.

1. Insert Elements inside your Columns

2. Click on each element to edit and style.

3. Follow the Basic and WooCommerce Elements tab below to learn how to use Elements.

BASIC ELEMENTS

Text

The Text element gives you more styling options that let you change settings like font weight, line height, letter spacing, alignment and more.

A. Text Editor

  1. Typography: Set the typography options for the text
  2. Alignment: Align the text to the left, right, center, or justified
  3. Link: Insert/Edit link.
  4. Image: Insert/Edit link.
  5. Font size: Set font size for the text.
  6. Text Color: Choose the color of the text.
  7. Background Color: Choose the color of the background.
  8. Shortcode: Insert shortcode in the text.
  9. Information icons: Insert Information icons in the text.
  10. Social icons: Insert social icons in the text.
  11. Font-family: Choose the font you want the text to be displayed

 

You can edit the “Text” element with HTML tags by selecting the “Text” tab that’s next to the “Visual” tab

 

B. Style

You can style the text includes: Line height (px); Background; Padding; Border (Width, Radius)

  • Alignment: Tick it if you want to show the text at the center on the mobile screen
  • Line height (px): Type value for the height of text line.
  • Background: Set Image and color for text background.
  • Padding: Type space between the border of  and the content inside it.
  • Border color and style: Set the color and style for the border
  • Border Width (px) and Radius (px): Control the thickness of the border around the text and set the border-radius to control corner roundness.

Button

The Button element helps you easily design and customize buttons without the need for any other plugins or shortcodes.

A. Content

  1. Enter the button’s text and you can add ()shortcode if you need
  2. Set the URL for the button’s link.

B. Style 

 

You can style the button includes:

  • Button: Border width; Border radius; Border color; Button color.
  • Padding:  Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color;
  • Alignment: Align the text to the left, right, center.
  • Margin (px): Left; Top; Right; Bottom.

Image

The Image element helps you display images in the email template.

 

A. Content

Image – Upload an image like featured image, Site Logo, and Author Profile Picture.

  • URL: Add and URL links to the picture in this field.
  • Alt: An alternative name for the picture or a description, it will also link to the picture when click it.

B Style

  • Image Size: Choose the size of the image (Width px)
  • Alignment: Set the image Alignment: left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for image background if you need.

Menu Bar

The Menu bar element allows you to create a page with an internal navigation in the email template.

A. Content

  • Text: Give the anchor a name.
  • Link: Add an URL link to the item in this field.

B. Style

  • Direction: Horizontal or vertical.
  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for menu background if it is necessary.

Socials

The Social element lets you add icon links to all your social media profiles.

A. Content

* Add a Social network icon, use the Icon Library to choose the Social Network icon of your choice, and enter a link URL to the social network.

B Style

  • Direction: Horizontal or vertical.
  • Width: Control the width of icons by changing the value in this field.
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for social background if it is necessary.

Contact

The Contact element allows your site’s visitors a simple way to get in touch with you.

A. Content

 

Home

  • Icon: Add the home icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Text: Enter text you want to your homepage to be displayed, it can be an URL link or your homepage name.
  • URL: Enter a link URL of your homepage.

Email

  • Icon: Add the Email icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Email: An email type. Includes validation for email.

Phone

  • Icon: Add the Phone icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Number: A telephone number type.

 

B. Style

  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for contact background if it is necessary.

Divider

The Divider element allows you to add styled horizontal lines that divide your content.

 

  • Border: Color – Choose the color of the divider; Width – Control the width of the divider.
  • Padding: Left; Top; Right; Bottom.
  • Background: Set Image and color for divider background if it is necessary.

Spacer

The Spacer element creates a block of space anywhere on your page. You can fill this block of space with a color or an image. You can use it to create cool shapes and elements as well.

 

Height: Set the amount of vertical space.

Default Content

All contents of WordPress emails will be displayed in the default content of the email template. You can modify the attributes of the email content in the paragraph section.

Go to the link section to modify some attributes of the link in email if needed.

 

Note: If you don’t want to use this default template for an email, let’s add this shortcode {{ignore_9mail}} to that email content.

For example, if you don’t want to use the template of the WordPress Email Templates Designer plugin for the email winning of WordPress Lucky Wheel plugin, in the Email setting of the lucky wheel plugin, insert this shortcocde into the email content:

 

 

 

 

Extra Information


Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.