{"id":2618,"date":"2023-06-02T19:28:12","date_gmt":"2023-06-02T19:28:12","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/basics-add-text-to-your-creative\/"},"modified":"2025-01-22T17:34:45","modified_gmt":"2025-01-22T17:34:45","slug":"basics-add-text-to-your-creative","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/basics-add-text-to-your-creative\/","title":{"rendered":"Basics: Add Text to your Creative"},"content":{"rendered":"\n<p>Ion&#8217;s Rich Text Editor gives you the ability to create enticing text styles without using HTML. Simply click and drag the &#8220;T&#8221; icon from the &#8220;Basics&#8221; Palette category into your page, or double-click on the Text already added to your page to open the Rich Text Editor.<\/p>\n\n\n\n<p>Here you will see many options similar to those from your favorite word processing software programs. Placed at the top of the Rich Text Editor, the following options can be applied to your text:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bold, Italicize,&nbsp;Underline,&nbsp;Alignment,&nbsp;Font Size,&nbsp;Font Color,&nbsp;Highlight <\/strong>and <strong>Indent.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"353\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_14-3-1024x353.png\" alt=\"\" class=\"wp-image-7282\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_14-3-1024x353.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_14-3-300x103.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_14-3-768x265.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_14-3-1536x529.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_14-3.png 1678w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Also, available within the Rich Text Editor is the ability to <strong>Subscript<\/strong> and <strong>Superscript<\/strong> your text (by using the X2 and X2 buttons, respectively). Next to them, you will notice a <strong>\u03a9 <\/strong>symbol to insert commonly used <strong>Special Characters<\/strong> like copyright, trademark and registered trademark symbols, to name a few.<\/p>\n\n\n\n<p>There is even a <strong>Source Button<\/strong> which can be used to place <strong>HTML<\/strong> directly into your Rich Text Editor, utilized for specific changes to the HTML and\/or to add your YouTube Embed Code to the page. Did you make a mistake? No worries! You can utilize the <strong>Undo<\/strong> and <strong>Redo<\/strong> buttons to go back a step or to re-apply an addition to your text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Editing Text with Micro-themes and other settings<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Micro-themes for Text<\/h4>\n\n\n\n<p>Besides using the Rich Text Editor, you can edit your text by applying <strong>Micro-themes<\/strong>. The options from the first dropdown menu include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alignment, Bullet List, Buttons and Directional Buttons, Color, Font Size and Responsive Font Size, Fonts, Responsive Settings and more.&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"318\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_15-1-1024x318.png\" alt=\"\" class=\"wp-image-7283\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_15-1-1024x318.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_15-1-300x93.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_15-1-768x238.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_15-1-1536x476.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_15-1.png 1693w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Keep in mind that, if the Rich Text Editor&#8217;s Alignment refers to the position of the text inside the text component, on Micro-themes &gt; Alignment it will refer to the position of the text component itself in relation to the Containers that might contain it in Ion&#8217;s hierarchy (like a Column). Furthermore, on Micro-themes &gt; Color or Fonts, for example, the options will match the colors and fonts respectively from your Theme and brand, which is great to keep the visual identity throughout the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"265\" height=\"431\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_16-2.png\" alt=\"\" class=\"wp-image-7284\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_16-2.png 265w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_16-2-184x300.png 184w\" sizes=\"auto, (max-width: 265px) 100vw, 265px\" \/><\/figure>\n\n\n\n<p>Another great feature is Micro-themes &gt; Buttons, in which you can turn a text into a button (it will look like a button), still with styling that matches the Theme for your brand &#8211; on the second dropdown menu, you will choose from many predefined options combining color, size and style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"265\" height=\"685\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_17-2.png\" alt=\"\" class=\"wp-image-7286\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_17-2.png 265w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_17-2-116x300.png 116w\" sizes=\"auto, (max-width: 265px) 100vw, 265px\" \/><\/figure>\n\n\n\n<p><br>For more on Micro-themes, please check <a href=\"https:\/\/obo.zoj.mybluehost.me\/?s=Micro-theme\" rel=\"noopener\">these<\/a>. And for more on adapting your Creative to different screen sizes like mobile, check <a href=\"https:\/\/obo.zoj.mybluehost.me\/?s=Responsive\" rel=\"noopener\">these<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Other settings (Styles) for Text<\/h4>\n\n\n\n<p>Working on your text&#8217;s <strong>Styles<\/strong> can help you edit it on other aspects than those covered by the Rich Text Editor or Micro-themes, like adding a background, margins and a lot more, so we highly encourage you to explore the options available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong> Show &amp; Hide, Background, Borders &amp; Corners, Effects, Layout and Custom for CSS.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"494\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_18-2-1024x494.png\" alt=\"\" class=\"wp-image-7287\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_18-2-1024x494.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_18-2-300x145.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_18-2-768x371.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_18-2-1536x742.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_18-2.png 1686w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Notice that the purple droplet next to an item on Styles, like <strong>Layout<\/strong> on the image above, means there&#8217;s a setting there already applied to the text. In this case, it&#8217;s a Bottom Margin (using &#8220;em&#8221; as the unit) &#8211; the thick white line on the bottom of the text:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"441\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_19-2-1024x441.png\" alt=\"\" class=\"wp-image-7288\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_19-2-1024x441.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_19-2-300x129.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_19-2-768x331.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_19-2-1536x662.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_19-2.png 1678w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Note that some items offer three options of units: <em>px<\/em>, <em>%<\/em> and <em>em<\/em>. Also, be mindful of applying a fixed Width and Height to any element &#8211; it usually works better for side-by-side Columns on a Container, for example. Fixed measurements can impact the responsiveness of those elements.<\/p>\n\n\n\n<p>Very often, text is part of an Interactive Component with its own settings, and it&#8217;s worthy to understand that component better by reviewing our articles on it to ensure the settings are supporting your goal of how the experience should look like.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p>If you have any questions, please contact us on help@ioninteractive.com.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ion&#8217;s Rich Text Editor gives you the ability to create enticing text styles without using HTML. Simply click and drag the &#8220;T&#8221; icon from the &#8220;Basics&#8221; Palette category into your page, or double-click on [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":5592,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2068,41],"tags":[2299],"class_list":["post-2618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-personalization","category-the-content-personalization","tag-text"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2618"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2618\/revisions"}],"predecessor-version":[{"id":7289,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2618\/revisions\/7289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5592"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}