{"id":5892,"date":"2021-12-13T10:25:40","date_gmt":"2021-12-13T10:25:40","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-image-text-widget\/"},"modified":"2022-06-10T05:34:25","modified_gmt":"2022-06-10T05:34:25","slug":"email-image-text-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/email\/creator\/text-image\/","title":{"rendered":"Email Image + Text Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Image + Text<\/strong> widget helps you add a combination of an Image and Text to your Email. You can also hyperlink the Image to an external web URL.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use an Image + Text widget in an Email Campaign?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 1<\/h3>\n<h3>Navigate to the Email Creator<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create an <strong>Email&nbsp;<\/strong>and subsequently <a href=\"\/hc\/en_GB\/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<h3>Step 2<\/h3>\n<h3>Add an Image + Text widget to your Email<\/h3>\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\/en_GB\/email\/creator\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<p>In order to add an Image + Text combination to your Email, drag and drop the <strong>Image+Text<\/strong> widget to the work area <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-2043\" title=\"Email text and image widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-image-text.png\" alt=\"Email creator, the text and image widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Use the Settings tab to upload the Image and add the Text<\/h3>\n<p>Once you drop the widget into the work area, the widget <strong>Settings&nbsp;<\/strong>are displayed on the right <em style=\"box-sizing: border-box; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; font-style: italic; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2045\" title=\"Email text and image upload\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-image-settings.png\" alt=\"Text and image settings tab is highlighted. Upload image and enter text\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>As highlighted in the screenshot above, use the <strong>Image Gallery<\/strong> section to <a href=\"\/hc\/en_GB\/email\/creator\/image\/\" target=\"_blank\" rel=\"noopener noreferrer\">upload the desired image<\/a> and hyperlink it to a web address.<\/p>\n<p>Use the <strong>Type your text here<\/strong> section to type in the text and format it as per your design preferences.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2046\" title=\"Email text and image text editor\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-image-add-text.png\" alt=\"Email creator text and image widget. The text editor is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style your Image + Text combination as per your design preferences<\/h3>\n<p>You can edit the appearance of your <strong>Image + Text<\/strong> combination by clicking the <strong>Style&nbsp;<\/strong>tab<em>&nbsp;(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2047\" title=\"Email text and image style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-image-text-styling.png\" alt=\"Email creator. The image and text widget style tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>The different design options available are:<\/p>\n<h4>4.1 <strong>Image + Text Settings and Background<\/strong> C<strong>olor<\/strong><\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Background<\/strong> <strong>C<\/strong><strong>olor<\/strong> is used to change the background color of the Text section. Select the checkbox <strong>Widget Background Transparent<\/strong> if you wish to make this space transparent.<\/li>\n<li><strong>Rounded Corners<\/strong> sizing bar to add rounded corners to the Image.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Image + Text Position<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li>Choose the position of the <strong>Image<\/strong> in relation to the <strong>Text<\/strong><em>.<\/em><\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Image Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Width<\/strong> is used to adjust the width of the <strong>Image<em>&nbsp;<\/em><\/strong>in the <strong>Image +Text<\/strong> widget.<\/li>\n<li><strong>Widget Position<\/strong> to change the alignment of the <strong>I<\/strong><strong>mage<\/strong> within the Image space in the design.<\/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 a combination of Image and Text to your Email campaign!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a <strong>Video <\/strong>to an Email using the <a href=\"\/hc\/en_GB\/email\/creator\/video\/\" target=\"_blank\" rel=\"noopener noreferrer\">Video Widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The image + text widget helps you add a combination of an image and text to your Email. You also have the option of hyperlinking the image to an external web link.<\/p>\n","protected":false},"author":1,"comment_status":"closed","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":[354],"ht-kb-tag":[],"class_list":["post-5892","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-email-creator-en_gb"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/comments?post=5892"}],"version-history":[{"count":4,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5892\/revisions"}],"predecessor-version":[{"id":9863,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5892\/revisions\/9863"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/media?parent=5892"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-category?post=5892"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-tag?post=5892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}