miMAILS free email designer manual

Welcome to miWare’s miMails tutorial

MiMails is an Email Designer system that allows you to quick and easily create emails that are compatible across multiple devices. Creating regular emails and trying to make them look great is hard enough. Making them responsive and functional over multiple devices can seem almost impossible. The templates miMailes give you access to provide solid patterns that optimize emails for small screens and still look great on larger screens. These patterns are made into sections by miMails to allow you to easily add, move, remove and edit sections that are already optimized for multiple devices.

Designed for simplicity, miMails is quick and easy to use and you can have a professional email that you can download or copy and paste for insertion into your prefered email program. We recommend using miRespond Professional Autoresponder.

PLEASE NOTE AS THIS SYSTEM IS CURRENTLY IN BETA PHASE, IT IS CURRENTLY NOT SUITABLE TO BE USED FROM YOUR MOBILE PHONE. THIS IS DUE TO THE FACT THAT IT CURRENTLY REQUIRES THE USE OF LEFT CLICK AND DOUBLE CLICK FUNCTIONALITY WITH NO MOBILE FALL BACK. IT HAS BEEN OPTIMIZED FOR GOOGLE CHROME AND WE DO NOT CONFIRM OR VERIFY COMPATIBILTY WITH OTHER BROWSERS.

We will work on all these limitations during the course of development.

THE MAIN PAGE

Go to https://www.miware.co.za/mimails/

A popup will appear offering a free course, if you have not already signed up for this course, I highly recommend that you do. Otherwise click the close (x) button.

Top Menu

Free AutoResponder!

This is the link to the free autoresponder miRespond (https://www.miware.co.za/mirespond-autoresponder-features/)

Free Course

A link to the free Importance of AutoResponders for Business (https://www.miware.co.za/go/importance-of-autoresponders-for-business/).

Templates

This will take you back to the main miMails home page (https://www.miware.co.za/mimails/);

If you are not logged in:

Save and Edit Emails

An option to save, copy and edit emails you create with miMails, for form information go to https://www.miware.co.za/mimails-free-email-designer/

Login

Povides the login form. If you have signed up to save, copy and edit emails you create with miMails in order for you to gain access to save your current email and view, edit or copy your previously saved emails.

If you are logged in:

Manage

This will take you to your saved emails to enable you to view, edit, copy and delete them.

Profile

This will give you the option to change your password and other profile options as they become available.

Logout

Allows you to logout of your account if you are logged in.

SELECT YOUR STARTING TEMPLATE

The system works by utilizing tried and tested templates that are provided free of charge for personal and commercial use. Mention is made of the designer of each template on the Email Builder Page.

Scrolling through the Template Categories

The templates are grouped into categories. You can change the current category by using the orange > and < arrows on the very right and left of the screen respectively.

Templates

Under each category name, the templates for that category are displayed. The display shows the how the template will look on a Computer, Tablet and mobile device. Once you find a template you like, simply click on it to start creating your email.

NB. Please note that while every effort is made by the template creator to have the template look as shown. Due to the diversity of the devices and email applications in use today and the respective limitations thereon, the look cannot be guaranteed for all applications. All the templates are tested in multiple devices by the template creator.

THE EMAIL BUILDER

Once you have clicked on the template you want. The Email Builder Page will open. This is where the magic happens.

Top Menu

Free AutoResponder!

Thisis the link to the free autoresponder miRespond (https://www.miware.co.za/mirespond-autoresponder-features/)

Free Course

A link to the free Importance of AutoResponders for Business (https://www.miware.co.za/go/importance-of-autoresponders-for-business/).

Templates

This will take you back to the main miMails home page (https://www.miware.co.za/mimails/);

If you are not logged in:

Save and Edit Emails

An option to save, copy and edit emails you create with miMails, for form information go to https://www.miware.co.za/mimails-free-email-designer/

Login

Povides the login form. If you have signed up to save, copy and edit emails you create with miMails in order for you to gain access to save your current email and view, edit or copy your previously saved emails.

If you are logged in:

Copy

This allows you to make a copy of the current email and save it to your account.

Save

This option allows you to save the current email. If the email has never been saved before, it save a new email to your account, otherwise clicking here will edit the current email on your account.

Manage

This will take you to your saved emails to enable you to view, edit, copy and delete them.

Profile

This will give you the option to change your password and other profile options as they become available.

Logout

Allows you to logout of your account if you are logged in.

Second Menu

The second menu has three options:

Copy

Clicking this menu item will open a the following box where you can copy the html of your email for pasting into your email program:

copy to clipboard

You can either copy the details directly from the text box, or simply click the Copy to clipboard button.

NB: Once copied, you need to insert as HTML into your email program. Google “Insert HTML into your-email-program” (substitute your-email-program with the program you use.) Alternatively, see instructions below on using miRESPOND to send your emails for free.

Download

This allows you to download a copy of your email, where you can either import it into your email program or save it for future reference.

NB download emails cannot later be imported into the miMails system for editing. If you want to save emails that you want to edit later, you need to login and use the Copy option on the top menu bar.

Preview

This allows you to preview how your email will look on Desktop or mobile.

NB every email program is different and while the templates are designed to work on multiple devices, not every email program will display the email exactly as you see it on the preview.

The Editor Menu

The Editor has the following options:

Bground

This allows you to change the background of various elements of your email. Clicking this menu item will give you the following options:

  • Page – This will change the whole background of the page (please note, some templates do not support this option and if not, they will provide their own menu item to change the background.)
  • Active – This changes the active edit area. You need to click into the edit area you want to change before selecting this option.
  • Section – This will change the background of the whole section. You need to click into any edit area of the section you want to change.

Clicking any of the above options will request you provide a colour. You can choose any HTML colour name or Hex code. You can use the following site to pick your html colour:

https://htmlcolorcodes.com/color-picker/ Remember to choose the HEX option and include the #.

B

This allows you to make the text that is currently selected bold.

NB You need to select the text you want to make bold first, by clicking the left mouse button at the beginging of the section you want to make bold, holding the mouse button down drag the mouse to cover all the text you want to make bold. Once the text is selected, release the mouse button. You will see the text you selected is highlighted. Now you can click the B button.

I

This allows you to make the text that is currently selected italics.

NB You need to select the text you want to make italics first, by clicking the left mouse button at the begining of the section you want to make italics, holding the mouse button down drag the mouse to cover all the text you want to make italics. Once the text is selected, release the mouse button. You will see the text you selected is highlighted. Now you can click the I button.

U

This allows you to underline the text that is currently selected.

NB You need to select the text you want to underline first, by clicking the left mouse button at the begining of the section you want to underline, holding the mouse button down drag the mouse to cover all the text you want to underline. Once the text is selected, release the mouse button. You will see the text you selected is highlighted. Now you can click the U button.

XX

This allows you to subscript the text that is currently selected.

NB You need to select the text you want to subscript first, by clicking the left mouse button at the begining of the section you want to subscript, holding the mouse button down drag the mouse to cover all the text you want to subscript. Once the text is selected, release the mouse button. You will see the text you selected is highlighted. Now you can click the XX button.

Link

This allows you to add or remove a link to the text that is currently selected or to be added at the cursor point.

NB You need to either select the text you want to add a link to, or ensure you have the clicked to place the cursor where you want the link to go.

The following options are available for Link

  • black – this will either insert new wording (default http://) where the cursor has been placed. Or if you have selected text, it will add the link to the text. It will also make the text black.
  • blue – this will either insert new wording (default http://) where the cursor has been placed. Or if you have selected text, it will add the link to the text. It will also make the text blue.
  • white – this will either insert new wording (default http://) where the cursor has been placed. Or if you have selected text, it will add the link to the text. It will also make the text white.
  • gold – this will either insert new wording (default http://) where the cursor has been placed. Or if you have selected text, it will add the link to the text. It will also make the text gold.
  • grey – this will either insert new wording (default http://) where the cursor has been placed. Or if you have selected text, it will add the link to the text. It will also make the text grey.
  • URL – this will popup with a request for the url you want to hyperlink to. Once received it will either insert url you inserted with the hyperlink where the cursor has been placed. Or if you have selected text, it will add the link to the text.
  • unlink – this will remove any link from the selected text.

TIP: in order to change a link or the text it is hyperlinked to. Simply double click any of the text that is hyperlinked. The following options will be displayed:

Information for HyperLink

Insert the Text you want to be seen under Text, and the url of the hyperlink under Link, then press done.

Color

This allows you to change the color of the selected text.

The options provided are:

  • black – this will change the colour of the selected text to black.
  • blue – this will change the colour of the selected text to blue.
  • white – this will change the colour of the selected text to white.
  • gold – this will change the colour of the selected text to gold.
  • grey – this will change the colour of the selected text to grey.
  • choose – this will popup asking you for the HTML hex color code, or name. You can use the following site to pick your html colour:

https://htmlcolorcodes.com/color-picker/ Remember to choose the HEX option and include the #.

Align

This allows you to align the selected text or the text around where the cursor was placed.

NB All text in the same paragraph will be affected.

The following options are provided:

  • left
  • center
  • right
  • justify

Symbol

This allows you to add certain symbols where the cursor is.

NB it is important to click the are you want to place the symbol before clicking this button.

The following options are provided:

  • ®
  • ©
  • ͙͎͙·

Font Size

This option allows you to change the size of the selected font.

NB You need to select the text you want to change the size for first. You can do this by clicking the left mouse button at the beginging of the section you want to select, holding the mouse button down drag the mouse to cover all the text you require. Once the text is selected, release the mouse button. You will see the text you selected is highlighted.

  • 14px – this will change the selected text size to 14px.
  • 18px – this will change the selected text size to 18px.
  • 22px – this will change the selected text size to 22px.
  • 26px – this will change the selected text size to 26px.
  • 30px – this will change the selected text size to 30px.
  • 34px – this will change the selected text size to 34px.
  • 40px – this will change the selected text size to 40px.
  • Choose – this will popup asking you for the size you would like to change the selected text size to. Insert the number without the px and click OK.

Ord-List

This option allows you to add an ordered list (with numbers) to the selected text or the text around where the cursor was placed.

NB All text in the same paragraph will be affected.

UnOrd-List

This option allows you to add an unordered list (with bullets) to the selected text or the text around where the cursor was placed.

NB All text in the same paragraph will be affected.

Indent

This option allows you to indent (move a tab space to the left) the selected text or the text around where the cursor was placed.

NB All text in the same paragraph will be affected.

Outdent

This option will outdent (move a tab space to the right) the selected text or the text around where the cursor was placed.

NB All text in the same paragraph will be affected and will only work with text that has already been indented.

Line

This option will insert a full width line where the cursor was placed.

NB If it is placed in the center of text, it will break the text where the cursor was placed, create a new line and insert the divider along the whole width, then create a new line where the balance of the text will be place.

Hi-Lite

this will popup asking you for the HTML hex color code, or name. It will then put the chosen colour as the background behind the highlighted text. You can use the following site to pick your html colour: https://htmlcolorcodes.com/color-picker/ Remember to choose the HEX option and include the #.

NB You need to select the text you want to change the size for first. You can do this by clicking the left mouse button at the beginning of the section you want to select, holding the mouse button down drag the mouse to cover all the text you require. Once the text is selected, release the mouse button. You will see the text you selected is highlighted.

New Line

This has the same effect as pressing the enter button.

Block

This allows you to add tags around the paragraph containing your selected text or the paragraph where the cursor was placed. It will provide a popup asking for the tag you would like to use. Default <blockquote>.

Image

There are two options to insert images, the recommended way is to have your image on your website or an image hosting site where you can obtain the URL.  The second option is to insert the image directly from your computer. 

  • by URL – A popup will ask you for the url of the image you would like to add.
  • File – This option inserts the picture directly into the email.  It is important that these files are small to prevent the user having to download large emails or your email being blocked due to size.  For this reason miMails limits the dimensions to a maximum of 600 (width or height) and the overall size of the image to 60kbs.  The following popup will be displayed, insert the maximum size (width and height) and click to Choose File from your computer.  Once selected click Insert to place the image at the cursor.

email designer image insert

NB the image will be placed where the cursor is. If text is selected, it will be removed and the picture inserted at the cursor point.

Tip: Once a picture has been inserted, double click the picture to get the following popup where you can change the URL and/or add an ALT tag:Image Tag Options

Clear

This clears most inline formatting on the selected text.

Select All

This will select everything in the current edit area.

Undo

This will undo your last action.

Redo

This will redo the last action. It will only work if you have used the Undo button first.

Empty

This will remove all the sections of the email and provide you with an empty template to work from.

If the template has extra options available, these will be displayed after Empty and start with “Template:” with the templates specific options thereafter.

The common ones templates provide are as follows:

Preview

This option allows for the insertion or edit of the preview text. The preview text is a brief description of the email contents that shows up on most email clients. It is a great tool to use in order to entice receipients to open the email. If this is left blank, the first characters of the email are used.

CSS

This allows for the editing of the default CSS for the template. You will also be given the option to restore the original CSS should it be required.

TEMPLATE SECTIONS

Under the Editor Menu, the screen is seperated into two, a large portion on your left hand side of the screen and a smaller portion on your right hand side of the screen.

The larger portion contains the email that you can edit and add sections to. This is called the Email Editor Pane.

The smaller portion contains the sections you can add to the template you selected. This is called the Template Section Pane.

Adding A Section

Each template provides a few optimized email patterns. Each pattern is created into a section by miMails allowing you to add, move and/or remove any sections of the template and still have a lovely looking optimized email.

Scroll through all the sections in the Template Section Pane. Click the section you would like to add to your email and it will be inserted at the bottom of the Email Editor Pane for you to work with.

Working with Sections

You can move a section up or down and remove sections completely. To do any of these actions, right click on the section you want to move or remove. The following dialog will come up:

mimails email designer Section options

To move the section up, click Section Up, to move the section down click Section Down. If you want to remove a section completely, click Delete Section, the following confirmation will come up:

Section Full options

If you do not want to remove the section, click Cancel. If you want to permanently remove the section click Confirm.

TIP: when right clicking on the section, the section you are working on will be surrounded with a dashed orange border. Similar to the image below:

email designer section outline

IMAGES

Images can be included in a section for display purposes, or can be added using the image button in the Editor Menu

There are two options to insert images, the recommend way it to provide the image from a URL, the other is to insert it directly.  The second option increases the overall size of the email and as such has limitations (see the image option above).

Once an image is in the Email Editor Pane, you can edit the URL or the Alt Text by double clicking on the image. The following box will come up:

Image information

You can add/amend the Alt Tag by inserting the text in the Alt Field. You can change the images URL by amending the URL in the Src field.

HYPERLINKS

You can add HyperLinks using the Link option on the Editor Menu (see Link under Editor Menu for further options).

To edit HyperLinks, double click on the text linked to the HyperLink you would like to edit. The following box will come up:

Link options

Insert the Text you want to be seen under Text, and the url of the hyperlink under Link, then press done.

BUTTONS

You can edit buttons provided in the various templates by double clicking them. The following box will show up:

email designer buttons

Button Text allows you to change the text seen inside the button;

Button Link allows you to insert a URL to go to when the button is clicked;

Button Colour allows you to change the button colour. You can use the following site to pick your html colour: https://htmlcolorcodes.com/color-picker/ Remember to choose the HEX option and include the #;

Button Text Colour allows you to change the colour of the text inside the button. You can use the following site to pick your html colour: https://htmlcolorcodes.com/color-picker/ Remember to choose the HEX option and include the #;

Button Classes allows you to add classes to the button for display purposes;

Alignment allows you to align the button either left, right or center.

COPY EMAIL TO CLIPBOARD

Once your email is complete. You can copy it to the clipboard to paste into any email program for sending. Simply click the Copy button on the Second Menu. The following box will appear:

email designer copy clipboard

You can either copy the text directly from the text area. Or simply click the Copy to Clipboard button. Then go to your favourite email program and paste in the details as HTML.

DOWNLOAD EMAIL

Once your email is complete. You can download it as an .html file. Simply click the Download button on the Second Menu. Your download will occur immediately.

PREVIEW EMAIL

You can see how your email will look on Desktop or mobile. Simply click the Preview button on the Second Menu.

NB every email program is different and while the templates are designed to work on multiple devices, not every email program will display the email exactly as you see it on the preview.

SEND CREATED EMAIL USING miRESPOND

Once you email is ready, click the Copy button in the Second Menu. Then go to https://www.miware.co.za/mirespond/ and login. Ensure you are on the right campaign, your current campaign is displayed in the aqua-blue bar under the main links towards the top of the page. If you need to change your campaign, click Campaigns on the menu. Find the campaign you want to send the email from and click the Go link for that campaign under Login. You will receive a confirmation message in green under the menu bar. The aqua-blue bar will also reflect the new campaign. Once you have confirmed you are in the right campaign, you can either set the email you created as an Auto Message (a message that only goes out at a set interval after a subscriber signs up to the list), or you can send a message to all subscribers of the campaign (such as a newsletter), or you can select a specific individual or group of individuals in the campaign to email (such as ones that have opened a specific email, clicked a link or downloaded from a link you have sent in a previous email etc).

For this purpose, we are assuming you have created a fantastic newsletter (using the other options will work exactly the same way when it comes to posting)

SEND A NEWSLETTER

Go to AutoResonders->Send Message on the menu bar. Look for the link both text and html (or if you would prefer not to offer a plain text version of your content for non HTML users you can use the html enhanced link).

email designer autoresponder options

The page will reload with an editor for the HTML and a box underneath for the plain text version. Click the < > button on the HTML editor:

email designer miMails insert html autoresponder

Once the < > button is clicked all the button for the HTML editor will be disabled (greyed out) except the full screen option in the bottom left. Click in the white box under the HTML editor buttons and paste (either press Ctrl+V or right click and select paste).

The email you created is now ready to send to all the users on your campaign’s list.

Remember to fill in the text only details and select the relevant options for sending (immediately-ASAP or at a set date or time, also send to other campaigns etc) before clicking the Broadcast! Button to send the email.

REGISTERED USERS

Registered users have the option to save their emails created with miMails. This means all your email templates are in once place and easily accesable. Saved emails can later be edited and/or copied or deleted as required.

To save your emails to miMails go to https://www.miware.co.za/mimails-free-email-designer/ and click the link to purchase this addon.

LOGIN

Click the Login link on the Top Menu. The following popup will open:

email designer mimails login

Fill in your username and password and click Login.

FORGOT PASSWORD

If you have forgotten your password, click the Login link in the Top Menu bar. Under the Log In button click the link Forgot Password? The following form will open:

email designer miMails reset password

Fill in your Username and Email address and click RESET PASSWORD. If you have forgotten your Username, contact miWare (solutions@miware.co.za) from the email address you signed up with and we will contact you with your username.

CHANGE PASSWORD

To change your password you need to be Logged In (see LOGIN above), click the Profile link in the Top Menu bar. The following form will open:

email designer miMails change password

Click the Change Password button, the following form will open:

email designer miMails new password

Fill in your old password, choose a new password and confirm your new password. Once done, click the Change Password button.

SAVE EMAIL TO miMAILS

To save an email to miMails. Login to the miMails system by clicking the Login link in the Top Menu Bar and filling in your username and password.

Once logged in the Top Menu bar will provide the extra options in registered users.

MANAGE EMAILS

To get a list of all emails you have created and saved with miMails. Login to the miMails system by clicking the Login link in the Top Menu Bar and filling in your username and password.

Once logged in the Top Menu bar will provide the extra options for registered. Click the Manage link. You will go to a page with a list of the Month and Year of emails you have saved. As below:

browse emails in miMails email designer

Click on the Month and Year you want to view the emails for. The list of emails created in the selected month year will show up as per below:

saved emails miMails email designer

You will see the name of the email, the date and time it was created and the option to delete the email. To View, Edit or Copy the email click email Name. You will then be taken back to the email Builder page where you can edit and save changes, or make a copy of the email.

EDIT EMAIL

If you are not logged in, login first. Click on Manage, find the email you want to edit (see Manage emails above), click the email you want to edit. The Email Builder page will open. Make changes as needed, then click save. You will receive confirmation that your email is saved. The email has now been edited.

COPY EMAIL

If you are not logged in, login first. Click on Manage, find the email you want to edit (see Manage emails above), click the email you want to edit. The Email Builder page will open. Make changes as needed, then click save. You will receive confirmation that your email is saved. You will now be able to find it under your Mange email page.