{"id":1468,"date":"2021-06-17T11:30:44","date_gmt":"2021-06-17T11:30:44","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1468"},"modified":"2023-02-22T09:40:56","modified_gmt":"2023-02-22T09:40:56","slug":"how-to-use-the-text-path-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/","title":{"rendered":"How to Use the Text Path Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1468\" class=\"elementor elementor-1468\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-734f7776 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"734f7776\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ca79577\" data-id=\"4ca79577\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1e6bb9c3 elementor-widget elementor-widget-video\" data-id=\"1e6bb9c3\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=aeqpeYkE_yE&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c5ca33 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9c5ca33\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6333e241\" data-id=\"6333e241\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3a0ad576 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"3a0ad576\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9731\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9731\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9732\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9732\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9731\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9731\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9731\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we will learn how to create, customize, and style text paths in Elementor. This tutorial will cover:<\/p><p>\u2714\ufe0e The various types of text paths<\/p><p>\u2714\ufe0e How to add your own custom SVG path<\/p><p>\u2714\ufe0e How to style the text and path<\/p><p>\u2714\ufe0e How to add a motion effect to the text path widget<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9732\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9732\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9732\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. It\u2019s Aviva from Elementor. Today I\u2019ll show you how to use the text path widget, to create unique typographic designs, on your website.<\/p><p>Text on a path can be used in a variety of ways to draw attention to your website and engage your visitors.<br \/>For this tutorial, we\u2019ll create this round seal, as a way to enhance the company\u2019s authenticity&#8230;and we\u2019ll give it a motion effect too, to really grab visitors\u2019 attention.<\/p><p>In the Elementor editor, Search for the text path widget, and drag it in. A line of placeholder text will appear. Replace it with your own text. You can use standard glyphs in your text, if you\u2019d like, such as the bullet symbols I\u2019ve used here.<\/p><p>The dynamic tags icon here, indicates that dynamic content, such as your site tagline, can be selected by clicking the icon. The same is true for any other field displaying this icon.<\/p><p>As you see here, the text I\u2019ve added doesn&#8217;t all fit on the path currently. We\u2019ll take care of that shortly, in the Style tab. But first, we\u2019ll go through all the content options.<\/p><p>I\u2019ll toggle Show Path ON to better visualize the various text paths. We\u2019ll switch it back off towards the end of the tutorial.<\/p><p>For the Path Type, there are a number of preset options to choose from&#8230;Wave, which is the default, Arc, Circle, Line, Oval, and Spiral. There\u2019s also an option to upload your own custom text path by way of an SVG file. I\u2019ll upload a file I\u2019ve already created, and insert it.<\/p><p>You can add a link to the text here (to function like a button). Paste in a URL&#8230;or type in a page name from your website, and select the link when it displays. Click the gear to adjust the link options.<\/p><p>You can align the text path widget to the left, center, or right. I\u2019ll align it to the center. There\u2019s no visible change right now, because the default widget size of 500 pixels, takes up the whole column. The moment we change the size, however, you\u2019ll be able to see the selected alignment.<\/p><p>To change the direction of the text, choose RTL for right to left text or LTR for left to right text.<\/p><p>Now go back to Path Type, and select Circle, in order to create the seal\u2026 Great, the text path content is all set. Now let\u2019s style it.<br \/><br \/>Click the style tab.<\/p><p>You can use percentage or pixels for the size settings of the text path. Drag the slider, or type in a value to adjust the size. Notice that the center alignment, I set before is now visible.<\/p><p>Now use the slider to rotate the path. Or type in a value to set the exact angle.<\/p><p>Next, use the typography settings to fit the type to the path. I\u2019ll select a global font, and then use the custom font settings to tweak it.<\/p><p>You can further tweak the type, by adjusting the word spacing \u2026 as well as the text starting point. As you can see, in this example the text gets cut off, but it can be useful for adjusting the position of shorter amounts of text on a path.<\/p><p>To change the text\u2019s color, choose a custom&#8230;or global color. Nice. The text path is really taking shape.<\/p><p>Let\u2019s add a hover effect to the text, to indicate that this element is interactive.<\/p><p>Choose the hover color&#8230;and a hover animation. Adjust the transition duration, if desired. Cool.<\/p><p>Last in the Style tab is the Path settings section. This only displays when Show Path, in the content tab, is toggled on.<\/p><p>Select the first color to add path fill color. Note that this option may be most fitting for closed paths, such as circles and ovals. Now select the path stroke color, and adjust its width. You can play around with these settings to get some interesting and fun effects, like this one. You can also add hover effects to the path settings, if you\u2019d like.<\/p><p>I\u2019ll go ahead back to Content, and toggle Show Path off<br \/>It looks great, and we could leave as is, but to really make it stand out, we\u2019ll add a motion effect, so that the seal will rotate, when the page is scrolled. This will be sure to catch your visitors\u2019 attention.<\/p><p>Click Advanced, and expand the Motion Effects section. Toggle scrolling effects on, and click Rotate. Change the direction, and adjust the speed.<\/p><p>Great. The last step is to optimize the design for mobile. Click responsive mode. Go back to Style, and adjust the size.<\/p><p>Perfect.<\/p><p>Switch to mobile view, and make the size slightly smaller. Keep in mind you can adjust the responsive settings for any element with a viewport icon.<\/p><p>Ok great. Exit responsive mode, and hide the panel to preview.<\/p><p>The seal really adds credibility to the brand. I\u2019ll hover over it&#8230;and scroll down. Awesome!<\/p><p>And there you have it, you now know how to use the text path widget to design your own typographic compositions. Whether you use it playfully, or in a more authoritative manner, we trust in your creativity and can\u2019t wait to see what you come up with.<\/p><p>How will you use the text path widget? Let us know in the comments below.<\/p><p>Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don\u2019t forget to hit the notifications bell.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we will learn how to create, customize, and style text paths in Elementor. This tutorial will cover: \u2714\ufe0e The various types of text paths \u2714\ufe0e How to add your own custom SVG path \u2714\ufe0e How to style the text and path \u2714\ufe0e How to add a motion effect to [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Text Path Widget - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Text Path Widget - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we will learn how to create, customize, and style text paths in Elementor. This tutorial will cover: \u2714\ufe0e The various types of text paths \u2714\ufe0e How to add your own custom SVG path \u2714\ufe0e How to style the text and path \u2714\ufe0e How to add a motion effect to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T11:30:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:40:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Text Path Widget - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Text Path Widget - Academy","og_description":"Overview Transcript Overview In this tutorial we will learn how to create, customize, and style text paths in Elementor. This tutorial will cover: \u2714\ufe0e The various types of text paths \u2714\ufe0e How to add your own custom SVG path \u2714\ufe0e How to style the text and path \u2714\ufe0e How to add a motion effect to [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/","og_site_name":"Academy","article_published_time":"2021-06-17T11:30:44+00:00","article_modified_time":"2023-02-22T09:40:56+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png","type":"image\/png"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Text Path Widget","datePublished":"2021-06-17T11:30:44+00:00","dateModified":"2023-02-22T09:40:56+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/"},"wordCount":1009,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/","name":"How to Use the Text Path Widget - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png","datePublished":"2021-06-17T11:30:44+00:00","dateModified":"2023-02-22T09:40:56+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Path-Widget-1.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-path-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Text Path Widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1468"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1468\/revisions"}],"predecessor-version":[{"id":9599,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1468\/revisions\/9599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4429"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}