{"id":151922,"date":"2024-05-15T15:38:55","date_gmt":"2024-05-15T10:08:55","guid":{"rendered":"https:\/\/theplusaddons.com\/?post_type=documents&#038;p=151922"},"modified":"2026-04-09T16:45:22","modified_gmt":"2026-04-09T11:15:22","slug":"advanced-typography","status":"publish","type":"documents","link":"https:\/\/theplusaddons.com\/docs\/advanced-typography\/","title":{"rendered":"Advanced Typography Widget: Settings Overview"},"content":{"rendered":"\n<p>Typography plays a crucial role in the success of any website design. It not only affects the overall appearance of the website but also contributes to the readability and user experience. Adding different effects to texts can add a touch of creativity to your design.<\/p>\n\n\n\n<p>With the Advanced Typography widget from The Plus Addons for Elementor, you can add different types of effects to text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Check the Live Widget Demo<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/theplusaddons.com\/elementor-widget\/advanced-typography-for-elementor\/\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor plugin<\/a> installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/theplusaddons.com\/pricing\/\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor.<\/a><\/li>\n\n\n\n<li>Make sure the Advanced Typography widget is activated, to verify this visit The Plus Addons \u2192 Widgets \u2192 and Search for Advanced Typography and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Advanced Typography Widgets of The Plus Addons for Elementor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/_zdX4iGcbtA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Advanced Typography Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Addons <\/strong>\u2192<strong> Widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle.<\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1898\" height=\"662\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography.png\" alt=\"from\" class=\"wp-image-178849\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography.png 1898w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-300x105.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-1024x357.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-768x268.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-1536x536.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-600x209.png 600w\" sizes=\"auto, (max-width: 1898px) 100vw, 1898px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Single\/Multiple Text <\/strong>&#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/mulitple-styles-on-a-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add unique text effects to single or multiple texts<\/a>.<\/li>\n\n\n\n<li><strong>Vertical Text <\/strong>&#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/add-vertical-text-in-elementor\/\">add a <\/a><a href=\"https:\/\/theplusaddons.com\/docs\/add-vertical-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">vertical <\/a><a href=\"https:\/\/theplusaddons.com\/docs\/add-vertical-text-in-elementor\/\">text<\/a>.<\/li>\n\n\n\n<li><strong>Text Stroke<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/create-text-stroke-outline-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a text stroke outline effect<\/a>.<\/li>\n\n\n\n<li><strong>Circle Text<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/create-circular-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a circle text effect<\/a>.<\/li>\n\n\n\n<li><strong>Text Blend<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-elementor-background-text-blend-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a text blend effect on a background<\/a>.<\/li>\n\n\n\n<li><strong>Marquee Text<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/marquee-text-effect-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a marquee text effect<\/a>.<\/li>\n\n\n\n<li><strong>Text Mask<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/text-mask-effect-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a text mask over a background color or image<\/a>.<\/li>\n\n\n\n<li><strong>Image Reveal on Hover<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/image-reveal-effect-on-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an image reveal effect on hover in text<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Advanced Typography in Elementor?<\/h2>\n\n\n\n<p>Add the Advanced Typography widget to the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Typography<\/h3>\n\n\n\n<p>From the <strong>Select Option<\/strong> dropdown, you have to select the text type. Here you\u2019ll find two options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal<\/strong> &#8211; For adding effect on a single text.<\/li>\n\n\n\n<li><strong>Multiple<\/strong> &#8211; For adding different effects on multiple texts. Using this option, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/mulitple-styles-on-a-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create an impression of having multiple effects on a single text or paragraph<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Select the option as per your requirements, let\u2019s select Normal here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"869\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-normal.gif\" alt=\"from\" class=\"wp-image-151937\" title=\"\"><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For the Multiple text option, you\u2019ll only see one tab and all the options are included inside the repeater item.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>In the <strong>Text<\/strong> field, you have to add your text.&nbsp;<\/p>\n\n\n\n<p>From the <strong>Tag<\/strong> dropdown, you can change the HTML tag of the text.<\/p>\n\n\n\n<p>Then from the <strong>Alignment<\/strong> section, you can align the text for different devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Direction<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/add-vertical-text-in-elementor\/\">create vertical text<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"826\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-text-direction.png\" alt=\"from\" class=\"wp-image-151939\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-text-direction.png 333w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-text-direction-121x300.png 121w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Stroke\/Fill Options<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/create-text-stroke-outline-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create an outline text effect<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"621\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-stroke-fill-option.png\" alt=\"from\" class=\"wp-image-151940\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-stroke-fill-option.png 333w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-stroke-fill-option-161x300.png 161w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Circular Text<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/create-circular-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a circle text effect<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"627\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-circular-text.png\" alt=\"from\" class=\"wp-image-151941\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-circular-text.png 332w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-circular-text-159x300.png 159w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Background based Blend Mode<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-elementor-background-text-blend-mode\/\">add a text blend effect on a <\/a><a href=\"https:\/\/theplusaddons.com\/docs\/\/add-elementor-background-text-blend-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">background<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"627\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-background-based-blend-mode.png\" alt=\"from\" class=\"wp-image-151942\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-background-based-blend-mode.png 332w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-background-based-blend-mode-159x300.png 159w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Knockout Text<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/text-mask-effect-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a text mask on a background color or image.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"331\" height=\"626\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-knockout-text.png\" alt=\"from\" class=\"wp-image-151943\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-knockout-text.png 331w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-knockout-text-159x300.png 159w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">On Hover Image Reveal<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/image-reveal-effect-on-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an image reveal effect on hover.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"626\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-on-hover-image-reveal.png\" alt=\"from\" class=\"wp-image-151944\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-on-hover-image-reveal.png 333w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-on-hover-image-reveal-160x300.png 160w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Marquee<\/h3>\n\n\n\n<p>From this tab, you can <a href=\"https:\/\/theplusaddons.com\/docs\/marquee-text-effect-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a marquee text effect<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"624\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-marquee.png\" alt=\"from\" class=\"wp-image-151945\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-marquee.png 334w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-marquee-161x300.png 161w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Options<\/h3>\n\n\n\n<p>In the <strong>Link<\/strong> field, you can add a link to the text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"640\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-advanced-options-1.png\" alt=\"from\" class=\"wp-image-151947\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-advanced-options-1.png 332w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-advanced-options-1-156x300.png 156w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Advanced Typography Widget?<\/h2>\n\n\n\n<p>You\u2019ll find all the styling options in the Style tab to style the Advanced Typography widget.<\/p>\n\n\n\n<p><strong>Advanced Typography<\/strong> &#8211; From here, you can manage the text typography and padding. You can also add different text colors, text shadows and CSS filters to the text for normal and hover states.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"611\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-style.png\" alt=\"from\" class=\"wp-image-151948\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-style.png 332w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/advanced-typography-style-163x300.png 163w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p><strong>Continuous Animation<\/strong> &#8211; You\u2019ll see this tab only for the Normal text. From here, you can add different continuous animations to the text. You can also set the animation to hover only as well.<\/p>\n\n\n\n<p class=\"interlink\"><strong><em>Also Read<\/em><\/strong>: <em><a href=\"https:\/\/theplusaddons.com\/docs\/\/animated-rotating-circle-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create an Animated Rotating Circle Text in Elementor?<\/a><\/em><\/p>\n\n\n\n<p><strong>Advance Underline Options<\/strong> &#8211; You\u2019ll see this tab only for the Normal text. From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/underline-overlay-effect-on-text-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add unique underline effects to the text<\/a>.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusaddons.com\/docs\/\/on-scroll-view-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/advanced-tab\/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">View Advanced Tab Tutorial<\/a><\/p>\n","protected":false},"author":2115,"featured_media":151951,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[663,527],"class_list":["post-151922","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-advanced-typography","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/151922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/users\/2115"}],"replies":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/comments?post=151922"}],"version-history":[{"count":0,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/151922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media\/151951"}],"wp:attachment":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media?parent=151922"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/docs?post=151922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}