{"Status":true,"Message":"","Response":{"post":{"postuid":"mv0pw8zyrt","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"239698c5-f7eb-4574-8cc8-c6568f08b3a0","title":"Text / HTML widget","slug":"article/mv0pw8zyrt-text-html-widget","html":"\u003Cp\u003EThe Text / HTML widget is the most commonly used widget in the email designer. Use it for simple text or custom HTML.\u003C/p\u003E\u003Ch2 id=\u0022using_the_rich_editor\u0022\u003EUsing the Rich Editor\u003C/h2\u003E\u003Cp\u003EWhen selected the Text / HTML widget opens a rich text editor in place of the widget menu:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221081\u0022 data-height=\u0022379\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/7e6e03f05834b226ccfbf0eb0b5c2dfd.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EThe rich editor provides tools for controlling exactly how you want your content formatted.\u003C/p\u003E\u003Cp\u003EContent is written or copy/pasted into the rich editor and is updated automatically in the design canvas.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EContent that is copy/pasted is stripped of any special information, such as bolding or links. While inconvenient when copying rich text, this prevents unnecessary HTML from accidentally getting added.\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003EThe Text / HTML contains common buttons that should be familiar: font family, font size, font color, bold, italics, bulleted list, numbered list, link, and image. To use these items, first select the text, then click the appropriate button.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022725\u0022 data-height=\u0022147\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/648e655883575f94483d5412681cb024.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EYou may notice that the Style tab is still accessible when using the rich editor. The style tabs setting apply to everything in the editor. Whereas within the text you can select individual portions of content to change color, font size and more.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EWhile it is possible to use an image inside the Text / Content widget this should only be used when trying to accomplish a design that requires special formatting of the image and surrounding text. Otherwise, a standard Image widget should be used.\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003EThere are two icons in the Text / HTML editor that are unique: the lightbulb and the code icon: lightbulb and code.\u003C/p\u003E\u003Ch2 id=\u0022using_the_inline_editor\u0022\u003EUsing the Inline Editor\u003C/h2\u003E\u003Cp\u003EWhile the Rich Editor is great for adjusting fonts, sizes and other unique content items. Writing and editing the content can be done inline while preserving the updates made in the rich editor.\u003C/p\u003E\u003Cp\u003ETo edit email text inline, just double click the text. You\u0027ll notice that the rich editor is replaced:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221422\u0022 data-height=\u0022681\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/4d61d64e39d8203f1ad908bf18fc866c.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022dark_mode\u0022\u003EDark mode\u003C/h2\u003E\u003Cp\u003EThe lightbulb will switch the editor to dark mode. This is useful when working with light text:\u003C/p\u003E\u003Cp\u003EWhen using dark mode the background color displayed in the editor does not affect the text in the email designer.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022738\u0022 data-height=\u0022359\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/3a4acb5155ed5e88c99f4d1cff1c4bbd.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022edit_html\u0022\u003EEdit HTML\u003C/h2\u003E\u003Cp\u003EUsing the Text / HTML widget enables you to edit or insert custom HTML directly into the designer.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EEditing the direct HTML should only be done if you understand and are comfortable with HTML.\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003ETo edit the HTML simply click on the code button. This will open a popup where HTML may be directly edited:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221210\u0022 data-height=\u0022314\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/f3205329c4228f65a2911c7f327c6310.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022working_with_foreground_and_background_colors\u0022\u003EWorking with foreground and background colors\u003C/h2\u003E\u003Cp\u003EA common use case is to set a different background color (other than white) and set a corresponding darker color.\u003C/p\u003E\u003Cp\u003EFor example, setting a background color to dark blue and a foreground font color of white.\u003C/p\u003E\u003Cp\u003EWhen working with foreground and background colors there are 3 options:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ESetting a foreground color in the editor\u003C/li\u003E\u003Cli\u003ESetting the widget\u0027s foreground color\u003C/li\u003E\u003Cli\u003ESetting the widget\u0027s background color\u003C/li\u003E\u003C/ul\u003E\u003Ch3 id=\u0022setting_the_widgets_foreground_and_background_color\u0022\u003ESetting the widgets foreground and background color\u003C/h3\u003E\u003Cp\u003ETo correctly set the foreground and background color use the Style tab and select the appropriate colors:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022399\u0022 data-height=\u0022333\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/87e0e6d7-ce26-4c56-87d8-796d375d6817.png?v=938092009\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch3 id=\u0022set_a_text_item_to_a_specific_color\u0022\u003ESet a text item to a specific color\u003C/h3\u003E\u003Cp\u003ETo set the color of text in the editor use the color toolbar:\u003C/p\u003E\u003Cp\u003ESelect the text then choose the color to set it to.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022399\u0022 data-height=\u0022292\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/34927503-2e2e-4250-93d1-62410880e809.png?v=1852651461\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022frequently_asked_questions\u0022\u003EFrequently Asked Questions\u003C/h2\u003E\u003Cp\u003EBelow are some frequently asked questions about the Text / HTML widget.\u003C/p\u003E\u003Csection class=\u0022faq\u0022\u003E\u003Ch3\u003EI selected my text and used the color picker, but my bullets are not the same color\u003C/h3\u003E\u003Carticle\u003E\u003Cp\u003EIf all of the text in the widget is meant to be a specific color, set the foreground color in the widget\u0027s style. Selecting all the text and setting a color only sets the color for that text and won\u0027t apply to bullets used in a list.\u003C/p\u003E\u003C/article\u003E\u003C/section\u003E\u003Csection class=\u0022faq\u0022\u003E\u003Ch3\u003EWhy can\u0027t I control paragraph spacing but instead have to use separate blocks?\u003C/h3\u003E\u003Carticle\u003E\u003Cp\u003EWhile normal paragraph breaks in a Text / HTML widget is supported, if you want more granular control over the spacing between paragraph blocks you will need to use multiple stacked Text / HTML widgets. The reason is due to how Microsoft Outlook handles spacing between elements. Microsoft Outlook does not allow padding on the \u0026lt;p\u0026gt; HTML tag and instead any padding between paragraphs needs to be set on the padding top / bottom of the widget itself. This is because when the widget is rendered the carriage returns are converted to line breaks and the padding is controlled via the table the content is wrapped in.\u003C/p\u003E\u003C/article\u003E\u003C/section\u003E\r\n\u003Cscript type=\u0022application/ld\u002Bjson\u0022\u003E\r\n{\r\n  \u0022@context\u0022: \u0022https://schema.org\u0022,\r\n  \u0022@type\u0022: \u0022FAQPage\u0022,\r\n  \u0022mainEntity\u0022: [\r\n{\r\n    \u0022@type\u0022: \u0022Question\u0022,\r\n    \u0022name\u0022: \u0022I selected my text and used the color picker, but my bullets are not the same color\u0022,\r\n    \u0022acceptedAnswer\u0022: {\r\n    \u0022@type\u0022: \u0022Answer\u0022,\r\n    \u0022text\u0022: \u0022If all of the text in the widget is meant to be a specific color, set the foreground color in the widget\u0027s style. Selecting all the text and setting a color only sets the color for that text and won\u0027t apply to bullets used in a list.\u0022\r\n    }\r\n},\r\n{\r\n    \u0022@type\u0022: \u0022Question\u0022,\r\n    \u0022name\u0022: \u0022Why can\u0027t I control paragraph spacing but instead have to use separate blocks?\u0022,\r\n    \u0022acceptedAnswer\u0022: {\r\n    \u0022@type\u0022: \u0022Answer\u0022,\r\n    \u0022text\u0022: \u0022While normal paragraph breaks in a Text / HTML widget is supported, if you want more granular control over the spacing between paragraph blocks you will need to use multiple stacked Text / HTML widgets. The reason is due to how Microsoft Outlook handles spacing between elements. Microsoft Outlook does not allow padding on the \u0026lt;p\u0026gt; HTML tag and instead any padding between paragraphs needs to be set on the padding top / bottom of the widget itself. This is because when the widget is rendered the carriage returns are converted to line breaks and the padding is controlled via the table the content is wrapped in.\u0022\r\n    }\r\n}\r\n    ]\r\n}\r\n\u003C/script\u003E","publish_status":0,"post_type":"Article","authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d","author":{"authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d"},"featured_image_updating":false,"meta_description":"The Text / HTML widget is the most commonly used widget in the email designer. Use it for simple text or custom HTML. Using the Rich Editor When selected the Text / HTML widget opens a rich text editor in place of the widget menu: The rich editor provides tools for controlling exactly how you want your content formatted. Content is written or copy/pasted into the rich editor and is updated automatically in the design canvas. Content that is copy/pasted is stripped of any special information, ...","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":1,"total_views":811,"date_published":"2024-07-18T15:26:00","date_updated":"2026-04-15T20:59:04.563","date_created":"2025-04-24T15:02:37.507"}}}