Contents
Instillation
To install WP Email Template:
- Download the WP Email Template plugin PRO Version Lite Version
- Upload the wp-email-template folder to your /wp-content/plugins/ directory
- Activate ‘WP Email Template’ from the Plugins menu within WordPress
Overview
When you install and activate the WP Email Template plugin it instantly converts all of the plain text emails that your WordPress site and plugins send to customers and users into professionally style HTML emails with these features:
- No setup – just add your style and branding using the simple visual style editor.
- Responsive code means your emails displays properly in mobile phones and tablets.
- Works with any plugin that outputs either customer or admin emails
- 100% compatible with e-commerce plugins WP e-Commerce and WooCommerce
- 100% compatible with Gravity Forms and Contact Form 7
- Template optimized for major email clients – Outlook, Gmail, Yahoo Mail, Hotmail/Live, AOL, Appple mail
How to use the admin panel
Once you have installed and activated the plugin it creates an Email Template link on the WordPress Settings tab. See the image below.
Image Legend.
1. On your WordPress admin dashboard hover over the Settings link to activate the drop down list
2. Click on Email Template in the settings drop down
3. You’ll see the Email Template Settings page open.
Live Preview
You can preview the email template as you style it. After saving any changes you have made you can view them right from the admin panel.
Image Legend.
1. Click the link to see the Live preview
2. Preview opens in a new window (note you must save any changes before you preview to see them).
Styling the Template
The WordPress Email Template plugin admin has a very easy to use visual editor to enable you to style your template. The admin panel is set out in the same order as the template layout.
- Template Header image
- Template Patterned background
- Email Header
- Email Body
- Follow us on Social Media links
- Email Footer
Template Header Image
Instructions for adding your logo / image to the template header. Remember that almost all email browser initially block images by default. The receiver must manually choose to allow images to show.
Image Legend.
1. Template Header image
2. Use the WordPress Media uploader in the WP admin sidebar to upload the image. Hover your mouse over the Media link and click on Add New. For the best presentation to upload a transparent .png image format.
3. When you have uploaded the image copy the File URL.
4. Go back to Settings > Email Template and paste the URL into the textra field. Scroll to the bottom of the page and click Save. Click on the preview email template link and you’ll see the image has been added.
To change the image just repeat the process.
Template Patterned Background
This is where you set the colour to apply to the template background pattern. It looks like this on you Email Template admin panel.
Image Legend.
1.To change the colour of the template background colour click in the colour swatch. The colour picker is activated and drops down. You can select an hex colour using the colour picker or just type the hex colour number directly into the swatch.
2. Scroll to the bottom of the page and click Save. You’ll see that the Background colour swatch has changed to show the colour selected. Click on the preview email template link and you’ll see the the new template background pattern colour.
Email Header
Set the email header background colour and the Email Title font specs.
Image Legend.
1. Email Header visual editor settings.
2. Scroll to the bottom of the page and click Save. You’ll see that the Header background colour swatch has changed to show the colour selected. Click on the preview email template link and you’ll see the the new Email Header design you have created.
Email Body
Set the email body background colour and the font settings
Image Legend.
1. Email Body visual editor settings
2. Scroll to the bottom of the page and click Save. You’ll see that the Email body background colour and Email body text swatches have changed to show the colours selected. Click on the preview email template link and you’ll see the the new Email style you have created.
Follow us on Social Media links
Easily add links to you social media channels.
Image Legend
1. Follow us on – settings. Copy and paste the full URL to your favourite social media channel that you want people to follow you on. Supports Facebook, Twitter, Linkedin, Pinterest and Google+1. If you leave a field blank then that icon does not show on the email template.
2. Scroll to the bottom of the page and click Save. Click on the preview email template link and you’ll see that the ones you entered a URL for now show that social media icons icon after the Follow us on text.
Email Footer Content
Use the WordPress text editor to style the footer of your email.
Image Legend
1. Email Footer Content visual editor. Use the WordPress visual / HTML editor yo add text, links, images and style to the email footer.
2. Scroll to the bottom of the page and click Save. Click on the preview email template link and you’ll see the footer design you have created.
</pre> <table> <tbody> <tr> <td>Upload image here</td> <td>add text cont here</td> </tr> </tbody> </table> <pre>
On the email template that would look like the image below – 1 row with 2 columns, with an image in the first column that has been uploaded via the WordPress Image uploader icon and the second column has text. If you know how to write HTML you can create anything you like – Just remember to keep the total table wide < 600px for mobile devices.
Marketing and Promotion tool.
The WordPress visual editor in the Footer editor allows you to get very creative in designing your email footer. Its can be an excellent marketing / promotion tool. Every email that goes out from your site can carry some additional promotion. At the time of writing this doc that promotion on our template is this plugin.
Working with WooCommerce
The very popular e-commerce plugin WooCommerce outputs its own email. If you have it installed you can configure your site to apply the WordPress Email Template to all WooCommerce store emails or continue to use the WooCommerce template for all WooCommerce store emails.
Image Legend.
1. Check YES to apply WP Email Template to WooCommerce emails
1.1 With this setting activated when you preview the WooCommerce email template you’ll see a dialog box appear reminding you that you have the WP Email Template activated for WooCommerce emails and if you want to change that then you need to change the settings.
2. Check NO to allow WooCommerce to use its own template
2.2 With the NO setting selected the WooCommerce Email Template preview shows without the dialog box
Working with WP e-Commerce
The great news if you are a WP e-Commerce plugin use is that you don’t have to do anything special. WP Email Template automatically applies the template to all WP e-Commerce generated emails to customers and admins.
- Purchase Reports
- Purchase Receipts
- Order Pending
- Order Pending: Payment Required
- Shipping Tracking Notifications
- Unlocked Files (for download purchases)
WP Email Template hooks seamlessly into your WP e-Commerce store and does nothing more than provide an easily customizable, cross browser email compliant HTML style to you WP e-Commerce emails. Which is exactly what you want it to do. You still set the WP e-Commerce store email content the way you always have through the Settings > Store > Admin Tab.
Plugin Promotional Link
We ask all plugin users to help us spread the word by showing a small WP Email Template link at the very bottom of their emails, aligned to the right.
Image Legend
1. Please help spread the word by leaving the WP Email Template promotional link checked. It is checked by default to show. To turn it off just un-check and and click the Save button.
2. The link as it appears on the email template. One the wordpress.org lite version the link is to the plugins wordpress.org page. On the Pro version the link is to the Plugins marketplace page.
3. The Save Changes and Reset Settings buttons.
3,920 total views, 2 views today
Comments are closed.