{"id":75814,"date":"2016-09-19T11:00:41","date_gmt":"2016-09-19T15:00:41","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75814"},"modified":"2016-10-17T04:06:33","modified_gmt":"2016-10-17T08:06:33","slug":"can-use-html-template-downloaded-gmail-andor-mail","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/can-use-html-template-downloaded-gmail-andor-mail.html","title":{"rendered":"How can I use an html template (that I downloaded) in Gmail and\/or in Mail?"},"content":{"rendered":"<p>In this tutorial you will learn the way to use Newsletter and <a href=\"https:\/\/www.templatemonster.com\/newsletter-email-templates.php\" target=\"_blank\" title=\"Newsletter Templates\">Email templates<\/a> in Gmail.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/n36Cw5bgs8I\"><\/iframe>\r\n<\/div>\r\n<p>Newsletter and Email templates are HTML templates primarily created for MailChimp and Campaingmonitor email services. However, you can use them in Gmail as well.<\/p>\r\n<p>To integrate a HTML template into Gmail, you should perform the following steps:<\/p>\r\n<ol>\r\n\t<li><p>Open the downloaded template package on your computer and navigate to <strong>&quot;newsletter\/responsive&quot;<\/strong> directory. Here you can see a <strong>index.html<\/strong> file and the <strong>&quot;images&quot;<\/strong> folder with sample images.<\/p><\/li>\r\n\t<li><p>Open the <strong>index.html<\/strong> file with any code editor and select all the content of this file by using <strong>CTRL+A<\/strong> hotkeys on Windows (<strong>Control+A<\/strong> or <strong>Command+A<\/strong> on Mac).<\/p>\r\n\t\t<p>Then copy the selected content to the clipboard (by using <strong>CTRL+C<\/strong> hotkeys on Windows or <strong>Control+C<\/strong>\/<strong>Command+C<\/strong> on a Mac).<\/p>\t<\/li>\r\n\t<li><p>Sign in your Gmail account and click the <strong>Compose<\/strong> button to create a new message. <\/p><\/li>\r\n\t<li><p>In the text area of the appeared window type some sample text, like <i>&quot;**************&quot;<\/i>. Click your sample text with the right mouse button and select <strong>Inspect Element<\/strong> or <strong>Inspect Element with <a href=\"\/help\/firebug-mozilla-firefox-plugin.html\" target=\"_blank\">Firebug<\/a><\/strong> option from the contextual menu. Then in the appeared inspector window find your typed text and replace it with your copied HTML code (delete the sample text and paste copied HTML code). See the screenshots below:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1-300x169.jpg\" alt=\"how_to_use_HTML_template_in_Gmail_1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75816\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2-300x169.jpg\" alt=\"how_to_use_HTML_template_in_Gmail_2\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75815\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/how_to_use_HTML_template_in_Gmail_2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n\t<li><p>Close the inspector window and in the new message section your will see your HTML template with all the styles. Now you can specify your message subject and recipient and send your message.<\/p>\r\n\t<p class=\"attention\">NOTE: To see images of your HTML template in Gmail, you should firstly upload all the images to some live server and then in the <strong>index.html<\/strong> file replace all the relative images links (f.e., <i>images\/pattern01.jpg<\/i>) with absolute links (f.e., <i>http:\/\/templatetesting.com\/images\/pattern01.jpg<\/i>), that include the direct path to the needed image on your server.<\/p><\/li>\r\n<\/ol>\r\n<p>You can also save your HTML message as an email template in Gmail and then use it anytime.<\/p>\r\n<p>This is the end of the tutorial. Now you know how to use Newsletter and Email templates in Gmail.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=n36Cw5bgs8I?width=1280&amp;height=720\" rel=\"prettyPhoto\">How can I use an html template (that I downloaded) in Gmail and\/or in Mail?<\/a>","protected":false},"excerpt":{"rendered":"<p>In this tutorial you will learn the way to use Newsletter and Email templates in Gmail.<\/p>\n","protected":false},"author":53,"featured_media":75818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[2465,2466,1100],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75814"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75814"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75814\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75818"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}