{"id":5890,"date":"2021-12-13T10:25:40","date_gmt":"2021-12-13T10:25:40","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-line-widget\/"},"modified":"2022-06-10T05:34:49","modified_gmt":"2022-06-10T05:34:49","slug":"email-line-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/email\/creator\/line\/","title":{"rendered":"Email Line Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Line<\/strong> widget helps you add a horizontal line between two content areas in an Email. It helps you visually separate the content areas and create clearly defined sections to improve the Email&#8217;s readability.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Line 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 a Line 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 design elements are displayed as <a href=\"\/hc\/en_GB\/email\/creator\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Widgets<\/a>.<\/p>\n<p>To add a horizontal line to your Email, drag and drop the <strong>Line<\/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-2049\" title=\"Email line widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-line-widget.png\" alt=\"Email creator, the line widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Design the horizontal Line as required<\/h3>\n<p>As you drop the widget into the Work area, the widget styling options are displayed on the right under the <strong>Style&nbsp;<\/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-2051\" title=\"Email line style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-line-widget-styling.png\" alt=\"Email creator, line widget. The line widget style tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>The different design options available are:<\/strong><\/p>\n<h4><strong>3.1 Widget Background Color<\/strong><strong>&nbsp;<\/strong><\/h4>\n<ul style=\"margin-left: 40px; list-style-type: circle;\">\n<li>Specify the color of the Line&#8217;s background. Either use the color picker to select the desired color or select the checkbox &#8211; <strong>Widget Background Transparent<\/strong> if you wish to make the background transparent.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>3.2 Border Size and Color<\/strong><\/h4>\n<ul style=\"margin-left: 40px; list-style-type: circle;\">\n<li>Specify the width and color of the horizontal Line. Use the color picker to pick the desired color and change the Line width using the sizing bar.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>3.3 Border Style<\/strong><\/h4>\n<ul style=\"margin-left: 40px; list-style-type: circle;\">\n<li>Change the style of the horizontal Line. You can choose any style from the following presets &#8211; <strong>Solid, Dashed, Dotted, Double, Groove, Ridge, Inset, Outset<\/strong>.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>3.4 Rounded Corners<\/strong><\/h4>\n<ul style=\"margin-left: 40px; list-style-type: circle;\">\n<li>Make the ends of the Line rounded.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2052\" title=\"Email line style example\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-line-styling-example.png\" alt=\"Email creator, line widget. The line widget style example\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<p>Click <strong>Save<\/strong>, and that\u2019s it!<\/p>\n<p>You have successfully added a divider Line between two content blocks in your Email!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a <strong>Weblink <\/strong>to an Email using the <a href=\"\/hc\/en_GB\/email\/creator\/link\/\" target=\"_blank\" rel=\"noopener noreferrer\">Link 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 line widget helps you add a horizontal line between two content areas in an Email. It helps you visually separate the content areas and create clearly defined sections to improve the Email&#8217;s readability.<\/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-5890","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\/5890","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=5890"}],"version-history":[{"count":4,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5890\/revisions"}],"predecessor-version":[{"id":9865,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5890\/revisions\/9865"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/media?parent=5890"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-category?post=5890"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-tag?post=5890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}