{"id":2438,"date":"2021-12-13T10:25:40","date_gmt":"2021-12-13T10:25:40","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-image-widget\/"},"modified":"2022-08-22T04:55:59","modified_gmt":"2022-08-22T04:55:59","slug":"email-image-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/email\/creator\/image\/","title":{"rendered":"Email Image Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Image<\/strong> widget helps you add images to your Email. You can also hyperlink the image to an external webpage.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use an Image widget in an Email campaign?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Step 1<\/h2>\n<h2>Navigate to the Email Creator<\/h2>\n<p>Use the <strong>Main Menu<\/strong> on the left to create an <strong>Email&nbsp;<\/strong>and subsequently <a href=\"\/hc\/email\/creator\/how-to-create-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the Email Creator<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Step 2<\/h2>\n<h2>Add an Image widget to your Email<\/h2>\n<p>The blank area on the left is the <strong>Work area<\/strong> where you design your Email, and the area on the right is the Tools area where all the available design elements are displayed as <a href=\"\/hc\/email\/creator\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<p>In order to add an image to your Email, drag and drop the <strong>Image<\/strong> widget to the Work area <em>(as highlighted in the screenshot below).&nbsp;<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2033\" title=\"Email image widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-image-widget.png\" alt=\"Email creator, the image widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h2>Step 3<\/h2>\n<h2>Upload the image using the widget Settings<\/h2>\n<p>Once you drop the widget into the Work area, the widget <strong>Settings&nbsp;<\/strong>are displayed on the right <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2035\" title=\"Email image settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-image-settings.png\" alt=\"Email creator, image widget. The image widget settings tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>How to add an Image:<\/strong><\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Click the <strong>Select Image<\/strong> button to open the <strong>Image Studio<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2036 size-full\" title=\"Email select image button\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-select-image-button.png\" alt=\"Email creator, image widget. The select image button is highlighted\" width=\"532\" height=\"411\"><\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<ul style=\"list-style-type: circle;\">\n<li>Click <strong>+ Upload&nbsp;<\/strong>to upload the Image to the Gallery.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2037 size-full\" title=\"Email image studio upload button\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-image-upload-button.png\" alt=\"Email creator, image studio. The upload button is highlighted\" width=\"423\" height=\"374\"><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<\/li>\n<li>Once the Image is uploaded, it will be displayed in the Gallery. Hover the cursor over the picture that you want to add to your Email and click <strong><strong>Insert.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2038 size-full\" title=\"Email image studio all files\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/image-studio-all-files.png\" alt=\"Email creator, image studio.The image actions are insert, edit or delete\" width=\"502\" height=\"376\"><\/strong><\/strong><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<\/li>\n<li>You can also edit the Image before inserting, or delete the Image from the Gallery if you wish to.<\/li>\n<\/ul>\n<blockquote class=\"elevio-box-info\"><p><strong>Note:&nbsp;<\/strong>Images uploaded in the Gallery will be available for use throughout the platform.<\/p><\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2039\" title=\"Email image studio \" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/image-studio.png\" alt=\"Email creator, image studio. All files selected, first image is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Use the <strong>Set Image Redirect Link<\/strong> field to specify the external URL to which you want to redirect the clicks on this Image (optional).<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2040 size-full\" title=\"Email image redirect link\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/image-redirect-link.png\" alt=\"Email creator, image widget. Option to set image redirect link\" width=\"555\" height=\"402\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h2>Step 4<\/h2>\n<h2>Style your image as per your design preferences<\/h2>\n<p>You can edit the appearance of your Image by using the options available under the <strong>Style<\/strong> tab <em>(as highlighted in the screenshot below)<\/em>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2041\" title=\"Email image style\" src=\"\/hc\/wp-content\/uploads\/2022\/08\/email-image-styling.png\" alt=\"Email creator, image widget. The image widget style tab is highlighted\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>The different design options available are:<\/strong><\/p>\n<h4>4.1 <strong>Image Font settings and Background color<\/strong><\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Border Size and color<\/strong>:\n<ul style=\"list-style-type: disc;\">\n<li style=\"margin-left: 20px;\">Select the color of the Image border<\/li>\n<li style=\"margin-left: 20px;\">change the size of the Image border by using the sizing bar to adjust the thickness of the border<\/li>\n<\/ul>\n<\/li>\n<li><strong>Border Style<\/strong> to select the type of Image border \u2013 solid, dotted, etc.,<\/li>\n<li><strong>Rounded Corners<\/strong> &#8211; sizing bar to add rounded corners to the border.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Image Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Image Width<\/strong> to adjust the width of the widget<\/li>\n<li><strong>Widget Position<\/strong> to change the alignment of the Image in the design<\/li>\n<li><strong>Image Opacity<\/strong> to adjust the degree of opacity of the image in the design.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Edge to edge checkbox<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li>Select to automatically fit the Image to the width of the work area.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added an <strong>Image <\/strong>to your Email campaign!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a combination of an <strong>Image and a Text<\/strong> to an Email using the <a href=\"\/hc\/email\/creator\/text-image\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image + Text Widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}<br \/>\n  .aricle_container span{color:#0070ba!important}<br \/>\n  .aricle_container li,.aricle_container blockquote{font-size:18px!important;font-weight: 400;}<br \/>\n  .aricle_container a{font-size:18px!important;color: #0070BA!important; text-decoration:none!important;background-image:none!important}<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The image widget helps you add images to your Email. You can also hyperlink the image to an external web link.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[228],"ht-kb-tag":[],"class_list":["post-2438","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-email-creator"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/comments?post=2438"}],"version-history":[{"count":12,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2438\/revisions"}],"predecessor-version":[{"id":11342,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2438\/revisions\/11342"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/media?parent=2438"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-category?post=2438"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-tag?post=2438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}