{"id":4388,"date":"2024-04-15T02:17:12","date_gmt":"2024-04-14T18:17:12","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4388"},"modified":"2024-04-15T02:17:12","modified_gmt":"2024-04-14T18:17:12","slug":"text-outline","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/text-outline\/","title":{"rendered":"Text outline"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">By using text outline, you can apply an outline to the text on your website. You can also tweak the color and thickness of the text outline.<\/p>\n<p id=\"\">Below, you will find:<\/p>\n<ol id=\"\">\n<li>Instructions on how to include a text outline<\/li>\n<li>Guidance on creating a color transition for the text outline<\/li>\n<\/ol>\n<h6 id=\"\"><strong id=\"\">Important: <\/strong>If you had previously integrated a text outline using custom code, it is advisable to remove that code before adding a text outline via the Style panel.<\/h6>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949f1dfa61522c534f1a9_64468f18b9e9216bcbcabf3e_1.png\" loading=\"lazy\" alt=\"A site in the Designer has a text outline applied to the hero title.\" title=\"64b949f1dfa61522c534f1a9_64468f18b9e9216bcbcabf3e_1\"><\/div><figcaption>The transparent &#8220;Ready Set Spring&#8221; text in the hero title has a yellow outline with a thickness of 2 pixels applied.<\/figcaption><\/figure>\n<h2 id=\"\">How to incorporate a text outline<\/h2>\n<p id=\"\">You can introduce a text outline either to a text component (such as a text box, paragraph, or header) or to a containing element that includes one or multiple text elements (like a section containing two text blocks). When you add a text outline to a parent element, all child text elements will adopt the text outline style.<\/p>\n<p id=\"\">To include a text outline to an element:<\/p>\n<ol id=\"\">\n<li>Select a text element or a parent element containing one or more text elements on the canvas<\/li>\n<li>Navigate to <strong id=\"\">Style panel<\/strong> &gt; <strong id=\"\">Typography <\/strong>&gt; <strong id=\"\">More type options<\/strong><\/li>\n<li>Adjust the outline <strong id=\"\">thickness <\/strong>and <strong id=\"\">color<\/strong> under <strong id=\"\">Outline<\/strong><\/li>\n<\/ol>\n<p id=\"\">The text outline will be visible on the text of the selected element.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949f1dfa61522c534f1a1_64468f3d7ccfb118c7bd06e1_2.png\" loading=\"lazy\" alt=\"A yellow, 2 pixel width text outline is added in the Typography section of the Style panel.\" title=\"64b949f1dfa61522c534f1a1_64468f3d7ccfb118c7bd06e1_2\"><\/div>\n<\/figure>\n<h6 id=\"\"><strong id=\"\">Important:<\/strong> The outline color will default to the font color if not set at a higher breakpoint. If the text outline is not immediately visible, it may be due to the outline color matching the font color, or the outline thickness being very fine.<\/h6>\n<p id=\"\">If desired, you can modify the text outline style across different breakpoints to have varying appearances based on specific screen sizes.<\/p>\n<h2 id=\"\">How to incorporate a color transition for the text outline<\/h2>\n<p id=\"\">You can enable a color transition for your text outline. Simply select the text element or parent element on the canvas, pick a state from the States dropdown menu (like hover), and adjust the text outline style for the chosen state.<\/p>\n<h6><strong id=\"\">Important:<\/strong> Text outline thickness transitions are not currently supported.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add a text stroke to elements on your site.","protected":false},"author":2,"featured_media":4389,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4388","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4388"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4389"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}