{"id":1560,"date":"2021-06-17T13:00:32","date_gmt":"2021-06-17T13:00:32","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1560"},"modified":"2023-02-22T09:38:33","modified_gmt":"2023-02-22T09:38:33","slug":"how-to-use-the-animated-headline-widget-in-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/","title":{"rendered":"How to Use the Animated Headline Widget in Elementor [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1560\" class=\"elementor elementor-1560\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5258173f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5258173f\" 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-2d75c619\" data-id=\"2d75c619\" 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-47ac1c32 elementor-widget elementor-widget-video\" data-id=\"47ac1c32\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=B51f2ht35xM&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-3c874c31 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3c874c31\" 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-5b28c5eb\" data-id=\"5b28c5eb\" 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-1be6f79c elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"1be6f79c\" 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-4681\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-4681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-4682\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-4682\" 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-4681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4681\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4681\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will go over the animated headline widget in Elementor. We will create and style an animated headline for a landing page.<\/p><p>This tutorial will cover:<\/p><p>\u2714\ufe0e How to add an animated headline widget to your web page<br \/>\u2714\ufe0e Content options in animated headlines<br \/>\u2714\ufe0e How to customize the styling options in animated headlines<br \/>\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-4682\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-4682\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-4682\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. It\u2019s Aviva from Elementor. Today I\u2019ll show you how to use the Animated Headline widget in Elementor.<\/p><p>Animated headlines help guide your visitors\u2019 attention and can be used on website and landing pages alike, creating emphasis on content you wish to highlight.<\/p><p>The Animated Headline is one of the most popular Pro widgets in Elementor, and with good reason: It offers a wide variety of customizable options, for unique and eye-catching headlines.<\/p><p>So let\u2019s get started and see how you can create and customize Animated Headlines for your website.<\/p><p>Content<br \/>Here we have a Landing Page design for a DIY website. We\u2019ll create an animated headline, to encourage visitors to subscribe to the newsletter.<\/p><p>Start by dragging in the animated headline widget.<\/p><p>Let\u2019s first change the text. Type in your Before Text&#8230;Highlighted text&#8230;and after text, if you\u2019d like. Each text field also has a dynamic tags option.<br \/>Now that we have the text, let\u2019s check out the style options. There are two main Styles &#8211; Highlighted and Rotating. We\u2019ll take a look at each of them, in depth.<\/p><p>For the Highlighted style, we have a number of attention-calling shape options\u2026 <br \/>Circle, curly, underline, double, double underline, underline zigzag, diagonal, strikethrough, and X. Just click any one to preview it. Cool!<\/p><p>I\u2019ll go with Underline for this headline.<br \/>Next, are the animation options. Animation Duration controls the speed of the animation, and Delay controls the amount of time between animations. Toggle Infinite Loop to No, if you\u2019d only like to run the animation once.<\/p><p>You can add a link to the headline, here. Below that is the alignment. Let\u2019s change it.<\/p><p>And last is the HTML Tag.<br \/>Let\u2019s style the Highlighted Headline.<\/p><p>First choose the shape color. You can change its width by dragging the slider, or typing in a value.<\/p><p>Toggle Bring to front, to bring the highlight shape in front of the text. And Rounded Edges to round the ends. Nice!<br \/>Next are the Text options.<\/p><p>You can change the text color &#8230; and typography. And you can change Animated Text color &#8230;and typography options as well. <br \/>Let\u2019s go Back to Content&#8230;and check out the Rotating text options. Update the display Text first. Create a list of Rotating Text values, and be sure to hit enter between each one.<br \/>As you can see, we now have a variety of fun animation options available: Typing, Clip, Flip, Swirl, Blinds, Drop-In, Wave, Slide, and Slide down. I\u2019ll select Typing.<\/p><p>As with Highlighted text, there are Infinite Loop and Duration options, as well Link, alignment, and HTML. <br \/>Now go to Style. Once again, we can change the Text Color&#8230;and Typography.<\/p><p>As well as the Animated Text color&#8230;and typography, if desired.<\/p><p>Under Selected Text, selection color controls the color of the selection, and Text color controls the color of the type while it\u2019s selected. And we\u2019re good to go.<\/p><p>Let\u2019s Publish and Preview. Looks great!<\/p><p>Let\u2019s check out some other examples of Animated Headlines.<\/p><p>PURPLE<br \/>In this example, I used Rotating Style, together with Flip Animation.<\/p><p>PRICING<br \/>Here I\u2019ve again selected Rotating. To get this sliding arrow effect, I chose Slide Animation, and typed multiple glyph arrows for the Rotating text.<\/p><p>HIGHLIGHTER<br \/>To get this highlighter effect, I selected Highlighted Style, with the Strikethrough shape, and set the width to 120.<\/p><p>TEACH TOMORROW<br \/>And for this page, I\u2019ve used not one, but TWO Animated Headlines with Rotating and Wave for an extra special effect.<\/p><p>And there you have it. Now you know how to use the Animated Headline widget to draw your visitors\u2019 attention to important content on your website and landing pages.<\/p><p>So go ahead, play with all the options, and create striking Animated Headlines, with Elementor. We can\u2019t wait to see what you come up with.<\/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 go over the animated headline widget in Elementor. We will create and style an animated headline for a landing page. This tutorial will cover: \u2714\ufe0e How to add an animated headline widget to your web page \u2714\ufe0e Content options in animated headlines \u2714\ufe0e How to customize the [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4194,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,12],"tags":[41],"class_list":["post-1560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-motion-effects","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 Animated Headline Widget in Elementor [PRO] - 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-animated-headline-widget-in-elementor-pro\/\" \/>\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 Animated Headline Widget in Elementor [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will go over the animated headline widget in Elementor. We will create and style an animated headline for a landing page. This tutorial will cover: \u2714\ufe0e How to add an animated headline widget to your web page \u2714\ufe0e Content options in animated headlines \u2714\ufe0e How to customize the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T13:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:38:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg\" \/>\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\/jpeg\" \/>\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=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Animated Headline Widget in Elementor [PRO] - 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-animated-headline-widget-in-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Animated Headline Widget in Elementor [PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial, we will go over the animated headline widget in Elementor. We will create and style an animated headline for a landing page. This tutorial will cover: \u2714\ufe0e How to add an animated headline widget to your web page \u2714\ufe0e Content options in animated headlines \u2714\ufe0e How to customize the [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T13:00:32+00:00","article_modified_time":"2023-02-22T09:38:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Animated Headline Widget in Elementor [PRO]","datePublished":"2021-06-17T13:00:32+00:00","dateModified":"2023-02-22T09:38:33+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/"},"wordCount":751,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Motion Effects"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/","name":"How to Use the Animated Headline Widget in Elementor [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg","datePublished":"2021-06-17T13:00:32+00:00","dateModified":"2023-02-22T09:38:33+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Animated-Headline-Widget-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/#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 Animated Headline Widget in Elementor [PRO]"}]},{"@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\/1560","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=1560"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1560\/revisions"}],"predecessor-version":[{"id":9587,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1560\/revisions\/9587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4194"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}