{"id":56080,"date":"2021-02-18T04:18:00","date_gmt":"2021-02-18T04:18:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=56080"},"modified":"2025-12-02T23:32:51","modified_gmt":"2025-12-02T21:32:51","slug":"how-to-create-animated-emblem-logo","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/","title":{"rendered":"How to Create an Animated Emblem Logo With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"56080\" class=\"elementor elementor-56080\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e953c13 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e953c13\" data-element_type=\"section\">\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-4a254f74\" data-id=\"4a254f74\" 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-5177a65 elementor-widget elementor-widget-text-editor\" data-id=\"5177a65\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>About the author: Roy Eyal, Elementorist @ Elementor<\/b><\/p><p>Roy Eyal is an expert Elementorist at Elementor and a WordPress <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-does-a-web-developer-do\/\"   title=\"What Does a Web Developer Do? 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25406\">web developer<\/a> that loves design and working with designers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdda282 elementor-widget elementor-widget-text-editor\" data-id=\"fdda282\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Over the past year, we&#8217;ve seen a new design trend of animated text surrounding an image, including here in <a href=\"https:\/\/elementor.com\/blog\/category\/showcase\/\" target=\"_blank\" rel=\"noopener\">the Elementor showcases<\/a>. For example, <a href=\"https:\/\/www.diangelosantos.com\/\">Diangelo Santos&#8217;s portfolio website<\/a>, which was featured on the <a href=\"https:\/\/elementor.com\/blog\/showcase-august-2020\/\" target=\"_blank\" rel=\"noopener\">August 2020 showcase<\/a> and <a href=\"https:\/\/viniterrasol.it\/\">Terrasol<\/a>, which was featured in the <a href=\"https:\/\/elementor.com\/blog\/showcase-november-2020\/\" target=\"_blank\" rel=\"noopener\">November 2020 showcase<\/a>.<\/p><p>I&#8217;ve seen this animated effect used by creating an animated GIF. However, creating such a GIF requires special knowledge to be able to create the graphic, animate it into a video, and then convert it into a GIF. Beyond requiring graphic design skills, it also takes too much time and effort for most people.<\/p><p>My aim for this tutorial is to show you how anyone can create the same effect without needing a special graphic and using real &#8220;live&#8221; text (specifically, an SVG).<\/p><p>Better yet, I&#8217;ll show you how to create this effect in two different variations &#8211; one that animates the emblem text on-scroll and another that automatically animates the emblem right away.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c68c722 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"6c68c722\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn How To Create an Animated<br> Download Button on WordPress<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08f1f3e elementor-widget elementor-widget-heading\" data-id=\"08f1f3e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is an Animated Emblem Effect?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-010011e elementor-widget elementor-widget-text-editor\" data-id=\"010011e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The animated emblem effect lets you add a bit of spinning text around part of a graphic for decorative purposes (I&#8217;ll show some examples below).<\/p><p>You can choose from two different methods to control this animation:<\/p><ol><li>You can animate the text as a user scrolls down using <a href=\"https:\/\/elementor.com\/blog\/introducing-motion-effects\/\" target=\"_blank\" rel=\"noopener\">Elementor Motion Effects<\/a>, which creates an eye-catching effect as users navigate your page.<\/li><li>You can automatically animate the text (even without action by the user) using some <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25404\">CSS<\/a> code.<\/li><\/ol><p>Here are examples of each type of animated emblem effect:<\/p><p><strong>Option 1: <\/strong>Animated emblem effect on scroll using Motion Effects<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee258b5 elementor-widget elementor-widget-video\" data-id=\"ee258b5\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/02\/option-1-Animated-emblem-effect-on-scroll-using-Motion-Effects.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dcb0a9 elementor-widget elementor-widget-text-editor\" data-id=\"6dcb0a9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Option 2<\/strong>: Automatic animated text effect using CSS<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c37e0d9 elementor-widget elementor-widget-video\" data-id=\"c37e0d9\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/02\/Automatic-animated-text-effect-using-CSS.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33e1bf8 elementor-widget elementor-widget-heading\" data-id=\"33e1bf8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What You Need To Create an Animated Emblem Effect\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4263385 elementor-widget elementor-widget-text-editor\" data-id=\"4263385\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To follow this tutorial and create your own animated emblem effect in Elementor, you&#8217;ll need the following:<\/p><ul><li><strong>An SVG file<\/strong> &#8211; you&#8217;ll use this to create the text that will spin around your graphic. I&#8217;ll show you how to create this in the first step.<\/li><\/ul><ul><li><strong>CSS code<\/strong> &#8211; you&#8217;ll use this to style the text inside the SVG file.<\/li><\/ul><ul><li><strong>Separate CSS code for automatic animation<\/strong> &#8211; you&#8217;ll need to add some additional CSS if you want to use the automatic spinning effect (rather than relying on Elementor&#8217;s built-in Motion Effects for the on-scroll effect).<\/li><\/ul><p>I&#8217;ll provide you with all the code that you need &#8211; all you need to do is follow along with the tutorial below.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebc232d elementor-widget elementor-widget-heading\" data-id=\"ebc232d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Create an Animated Emblem Effect With Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76ecb45 elementor-widget elementor-widget-text-editor\" data-id=\"76ecb45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s a high-level look at the process:<\/p><ol><li>Set up your SVG text file (using my example code as a starter).<\/li><li>Add the SVG file using an Icon widget.<\/li><li>Add custom CSS to style your emblem text.<\/li><li>Set absolute positioning to position your emblem over the background graphic.<\/li><li>Add your animation effect (either on-scroll or automatic).<\/li><\/ol><p>Let&#8217;s dig in\u2026<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1992a1a elementor-widget elementor-widget-heading\" data-id=\"1992a1a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Customize the SVG File To Use Your Own Text<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94df162 elementor-widget elementor-widget-text-editor\" data-id=\"94df162\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To get started, you need to customize your SVG file to display the text that you want to animate.<\/p><p>To do this, download the example SVG file below and open it in a code editor:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6eeabd7 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"6eeabd7\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Button\" data-gal=\"Position_Download_Template\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/02\/circle-text.svg\" rel=\"nofollow\" download=\"\" data-elementor-open-lightbox=\"no\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-download\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click Here To Download the SVG File<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e6f1f6 elementor-widget elementor-widget-text-editor\" data-id=\"3e6f1f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I recommend using a code editor with code highlighting, as that will make it a lot easier to edit the code. <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> and <a href=\"https:\/\/atom.io\/\">Atom<\/a> are both free and cross-platform (PC, Mac, and Linux). Personally, I use <a href=\"https:\/\/nova.app\/\">Nova<\/a>, though it&#8217;s only available for macOS.<\/p><p><strong>Tip <\/strong>&#8211; if your code editor isn&#8217;t highlighting the text properly, you might want to view the SVG as an XML file. This should fix things and give you the highlighting like my example screenshot below.<\/p><p>To customize the text, replace &#8220;Elementor is Awesome! &#8230;&#8221; with the text that you want to use. Make sure to limit the number of characters as space is limited &#8211; try to keep it around the same length as my example text.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9771641 elementor-widget elementor-widget-image\" data-id=\"9771641\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1535\" height=\"532\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1535,h=532\/blog\/wp-content\/uploads\/2021\/02\/svg-code.png\" class=\"attachment-full size-full wp-image-56168\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1535\/blog\/wp-content\/uploads\/2021\/02\/svg-code.png 1535w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/02\/svg-code-300x104.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/02\/svg-code-1024x355.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/02\/svg-code-768x266.png 768w\" sizes=\"(max-width: 1535px) 100vw, 1535px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce92411 elementor-widget elementor-widget-text-editor\" data-id=\"ce92411\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Save the file in an easily accessible folder because you&#8217;re going to need it in the next step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5eec002 elementor-widget elementor-widget-heading\" data-id=\"5eec002\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Add Your SVG File Using an Icon Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88d5770 elementor-widget elementor-widget-text-editor\" data-id=\"88d5770\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you need to add the SVG file to your Elementor design using <a href=\"https:\/\/elementor.com\/help\/icon-widget\/\" target=\"_blank\" rel=\"noopener\">an Icon widget<\/a>.\u00a0<\/p><p>I&#8217;ll assume that you&#8217;ve already added the background graphic to which you want to add your animated emblem. If you haven&#8217;t done so, you can do that using a regular Image widget.<\/p><p>To add and customize the SVG file:<\/p><p>1. Drag a new Icon widget <strong>above<\/strong> the graphic that you want to target. That is, add your Icon widget above the existing Image widget.<\/p><p>2. Go to the <strong>\u00a0Advanced<\/strong> tab in the Icon&#8217;s settings. Set the <strong>CSS Classes<\/strong> field equal to <strong>emblem<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29164b3 elementor-widget elementor-widget-image\" data-id=\"29164b3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"584\" height=\"974\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=584,h=974\/blog\/wp-content\/uploads\/2021\/02\/emblem-class.png\" class=\"attachment-full size-full wp-image-56119\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=584\/blog\/wp-content\/uploads\/2021\/02\/emblem-class.png 584w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=180\/blog\/wp-content\/uploads\/2021\/02\/emblem-class-180x300.png 180w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5edb01 elementor-widget elementor-widget-text-editor\" data-id=\"c5edb01\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. Go back to the <strong>Content<\/strong> tab. Click the <strong>Upload SVG<\/strong> option and upload the SVG file that you created in the previous step.<\/p><p>4. Go to the <strong>Style<\/strong> tab and choose the <strong>Primary Color<\/strong> for your text &#8211; ideally, <a href=\"https:\/\/elementor.com\/help\/global-colors\/\" target=\"_blank\" rel=\"noopener\">a global color<\/a> that matches your theme.<\/p><p>5. In the <strong>Style<\/strong> tab, increase the <strong>Size<\/strong>. You can start with <strong>160<\/strong>, but you might need to play around with its size to get the right effect. Don&#8217;t worry if the emblem text looks too large right now &#8211; you&#8217;ll fix that with CSS in the next step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93789ec elementor-widget elementor-widget-video\" data-id=\"93789ec\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/02\/Upload-SVG-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b8f76f elementor-widget elementor-widget-text-editor\" data-id=\"9b8f76f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Note<\/strong> &#8211; if you&#8217;re having problems uploading the SVG file, you need to make sure that SVG file uploads are enabled. WordPress disables SVG uploads by default, though Elementor should automatically enable SVG uploads when you use the <strong>Upload SVG<\/strong> feature in the Icon widget.<\/p><p>To make sure that SVG uploads are enabled, go to <strong>Elementor \u2192 Settings \u2192 Advanced<\/strong> and make sure that the <strong>Enable Unfiltered File Uploads<\/strong> drop-down is set to <strong>Enable<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6101604 elementor-widget elementor-widget-image\" data-id=\"6101604\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1728\" height=\"260\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1728,h=260\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads.png\" class=\"attachment-full size-full wp-image-56122\" alt=\"Enable-Unfiltered-File-Uploads\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1728\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads.png 1728w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads-300x45.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads-1024x154.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads-768x116.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/02\/Enable-Unfiltered-File-Uploads-1536x231.png 1536w\" sizes=\"(max-width: 1728px) 100vw, 1728px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c17006f elementor-widget elementor-widget-heading\" data-id=\"c17006f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Style Your Emblem Text Using CSS\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8090d44 elementor-widget elementor-widget-text-editor\" data-id=\"8090d44\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, you need to style your emblem text using some CSS. This should fix any issues you saw after increasing the size of the Icon widget.<\/p><p>To do this, add the following CSS to your section or to the global CSS for your design:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94b6a0f elementor-widget elementor-widget-code-highlight\" data-id=\"94b6a0f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.emblem text {\n  font-family: initial;\n  font-size: 16px;\n  font-weight: normal;\n  letter-spacing: 0px;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9928491 elementor-widget elementor-widget-text-editor\" data-id=\"9928491\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you don&#8217;t see any change to the emblem text right away, there are two troubleshooting steps:<\/p><ul><li>Make sure you set the Icon widget&#8217;s CSS class equal to <strong>emblem<\/strong>.<\/li><li>Refresh the page to reload the Elementor interface. Just make sure you save your changes before you refresh.<\/li><\/ul><p>If you don&#8217;t have a lot of text, you might want to go further and pad the letters a bit to improve your emblem effect.<\/p><p>You have two main options here:<\/p><ol><li>You can set the font weight to <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25405\">bold<\/a>.<\/li><li>You can increase the letter spacing from 0 px to a higher number &#8211; 3 px is a good starting point, but you can play around with it according to your preferences<\/li><\/ol><p>You can also consider choosing a different font. For example, in the customized code below, I&#8217;ve done three things:<\/p><ol><li>Changed the font to Montserrat.<\/li><li>Bolded the font.<\/li><li>Increased the letter spacing to 3 px.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c668cb7 elementor-widget elementor-widget-code-highlight\" data-id=\"c668cb7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.emblem text {\n  font-family: \"Montserrat\", Sans-serif;\n  font-size: 16px;\n  font-weight: bold;\n  letter-spacing: 3px;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c32b918 elementor-widget elementor-widget-image\" data-id=\"c32b918\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"1290\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=748,h=1290\/blog\/wp-content\/uploads\/2021\/02\/code.png\" class=\"attachment-full size-full wp-image-56147\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=748\/blog\/wp-content\/uploads\/2021\/02\/code.png 748w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=174\/blog\/wp-content\/uploads\/2021\/02\/code-174x300.png 174w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=594\/blog\/wp-content\/uploads\/2021\/02\/code-594x1024.png 594w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10c58e3 elementor-widget elementor-widget-heading\" data-id=\"10c58e3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Use Absolute Positioning To Move the Icon Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38ecf14 elementor-widget elementor-widget-text-editor\" data-id=\"38ecf14\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, it&#8217;s time to make it so that the icon widget appears on top of your target image. Right now, it&#8217;s positioned above and separate from the background image:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-592f0c3 elementor-widget elementor-widget-image\" data-id=\"592f0c3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1060\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1999,h=1060\/blog\/wp-content\/uploads\/2021\/02\/image5.png\" class=\"attachment-full size-full wp-image-56124\" alt=\"absolute-positioning\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1999\/blog\/wp-content\/uploads\/2021\/02\/image5.png 1999w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/02\/image5-300x159.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/02\/image5-1024x543.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/02\/image5-768x407.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/02\/image5-1536x814.png 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d32742a elementor-widget elementor-widget-text-editor\" data-id=\"d32742a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To do this, you can <a href=\"https:\/\/elementor.com\/blog\/custom-positioning\/\" target=\"_blank\" rel=\"noopener\">use absolute positioning<\/a>, which will give you pixel-perfect control over the emblem text&#8217;s positioning.<\/p><p>Open the settings for the Icon widget. Then, go to the <strong>Advanced<\/strong> tab and find the <strong>Positioning <\/strong>settings. Configure them as follows:<\/p><ul><li><strong>Width<\/strong>: Inline (Auto)<\/li><li><strong>Position<\/strong>: Absolute<\/li><li><strong>Horizontal Orientation<\/strong>: Right<\/li><li><strong>Offset (Horizontal)<\/strong>: -16px<\/li><li><strong>Vertical Orientation<\/strong>: Top<\/li><li><strong>Offset (Vertical)<\/strong>: -16px<\/li><\/ul><p>I chose -16 for both the horizontal and vertical offsets, but you might want to play around with different numbers to find what works best for your design and background image. You can also change the horizontal and vertical orientations according to your preferences.<\/p><p>You should also use the responsive settings to adjust the offset for mobile and tablet devices. Make sure to set the horizontal offset for mobile devices to zero to avoid issues with vertical scrolling.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0040ec1 elementor-widget elementor-widget-image\" data-id=\"0040ec1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1076\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=584,h=1076\/blog\/wp-content\/uploads\/2021\/02\/image4.png\" class=\"attachment-full size-full wp-image-56125\" alt=\"absolute-positioning\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=584\/blog\/wp-content\/uploads\/2021\/02\/image4.png 584w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=163\/blog\/wp-content\/uploads\/2021\/02\/image4-163x300.png 163w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=556\/blog\/wp-content\/uploads\/2021\/02\/image4-556x1024.png 556w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ba9068 elementor-widget elementor-widget-heading\" data-id=\"9ba9068\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Set up Your Emblem Animation Effect\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2587af elementor-widget elementor-widget-text-editor\" data-id=\"e2587af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To finish things out, you need to set up the animation for your emblem. Again, you have two options:<\/p><ol><li>You can animate the emblem so that it spins as a user scrolls down.<\/li><li>You can automatically animate the emblem so that it spins without any user input.<\/li><\/ol><p>I&#8217;ll show you how to configure both &#8211; you should only choose one of these methods, though.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a133c6 elementor-widget elementor-widget-heading\" data-id=\"4a133c6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Option 1: Animate Emblem on Scroll\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f921fca elementor-widget elementor-widget-text-editor\" data-id=\"f921fca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To animate the emblem as a user scrolls down, you can use Elementor&#8217;s built-in Motion Effects.<\/p><p>Open the Icon widget and go to the <strong>Advanced<\/strong> tab. Select <strong>Motion Effects <\/strong>\u2192 <strong>Scrolling Effects <\/strong>(turn it on) \u2192 <strong>Rotate<\/strong> (click the edit icon). This will open some additional settings &#8211; configure them as follows:<\/p><ul><li><strong>Direction: <\/strong>To Right<\/li><li><strong>Speed<\/strong>: 4<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-432d23b elementor-widget elementor-widget-image\" data-id=\"432d23b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"1122\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582,h=1122\/blog\/wp-content\/uploads\/2021\/02\/image2.png\" class=\"attachment-full size-full wp-image-56126\" alt=\"motion-effects-elementor\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582\/blog\/wp-content\/uploads\/2021\/02\/image2.png 582w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=156\/blog\/wp-content\/uploads\/2021\/02\/image2-156x300.png 156w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=531\/blog\/wp-content\/uploads\/2021\/02\/image2-531x1024.png 531w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d5d965 elementor-widget elementor-widget-heading\" data-id=\"8d5d965\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Option 2: Automatically Animate Emblem Text\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0da93ec elementor-widget elementor-widget-text-editor\" data-id=\"0da93ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To automatically animate the emblem text, you can use the following CSS code. You&#8217;ll want to add this code in addition to the CSS that you&#8217;ve already added.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9d1256 elementor-widget elementor-widget-code-highlight\" data-id=\"f9d1256\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.emblem svg {\n  animation-name: spinning_animation;\n  animation-duration: 10s;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n\n@keyframes spinning_animation {\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0);\n  }\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37eca44 elementor-widget elementor-widget-text-editor\" data-id=\"37eca44\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Optional: Reduce Motion for Accessibility Purposes<\/strong><\/p><p>The last part of the code snippet above is technically optional, but I&#8217;ve added it there to <a href=\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\" target=\"_blank\" rel=\"noopener\">improve your website&#8217;s accessibility<\/a> by making the animated emblem effect more friendly to users who are sensitive to constant motion:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19e6538 elementor-widget elementor-widget-code-highlight\" data-id=\"19e6538\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@media (prefers-reduced-motion) {\n    .emblem svg {\n\t\t  animation-duration: 30s;\n\t}\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9157257 elementor-widget elementor-widget-text-editor\" data-id=\"9157257\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This part of the code slows down the animation for users who have set their device to &#8220;reduce motion&#8221; mode (e.g. <a href=\"https:\/\/support.apple.com\/en-mk\/guide\/mac-help\/unac089\/11.0\/mac\/11.0\">reduce motion on MacOS<\/a> or <a href=\"https:\/\/support.apple.com\/en-il\/HT202655\">reduce screen motion on iOS<\/a>).<\/p><p>While you can technically remove this part of the code snippet without changing its effect, I recommend leaving it in because it&#8217;s always a good idea to respect your users&#8217; preferences, especially when it comes to <a href=\"https:\/\/elementor.com\/blog\/web-accessibility-design-guide\/\" target=\"_blank\" rel=\"noopener\">website accessibility<\/a>. Another example of respecting user preferences is dark mode, just like how <a href=\"https:\/\/elementor.com\/help\/dark-mode\/\" target=\"_blank\" rel=\"noopener\">the Elementor editor will adopt dark mode<\/a> if a user has chosen that in their system preferences.<\/p><p>Specifically, the code will slow down the animation from 10 seconds (<strong>10s<\/strong>) to 30 seconds (<strong>30s<\/strong>) if a user has set reduced motion as their preference.<\/p><p>Another option would be to completely stop the animation if a user has set their device to &#8220;reduce motion&#8221;. You can accomplish this by replacing the accessibility-focused code snippet with this snippet:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-110627e elementor-widget elementor-widget-code-highlight\" data-id=\"110627e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@media (prefers-reduced-motion) {\n    .emblem svg {\n\t\t  animation-duration: none;\n\t}\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5bb280b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"5bb280b\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/how-to-design-logo\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn How To Create a Logo for Your Brand<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73f5585 elementor-widget elementor-widget-heading\" data-id=\"73f5585\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Grab Your Visitors\u2019 Attention with an Animated Emblem Effect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34a7e17 elementor-widget elementor-widget-text-editor\" data-id=\"34a7e17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The animated emblem effect gives you a neat way to create a more eye-catching design with Elementor. All you need is an SVG file to control the text, the Icon widget, and a little bit of CSS.<\/p><p>How will you use the animated emblem in your own Elementor designs? Or do you still have any questions about how it works? Let us know in the comments!<\/p>\t\t\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>Learn from our Elementor expert how to create an animated emblem effect with text rotating around a graphic on your site which can be scroll activated or automatically activated.  <\/p>\n","protected":false},"author":507054,"featured_media":56468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-56080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Create an Animated Emblem Logo With Elementor<\/title>\n<meta name=\"description\" content=\"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.\" \/>\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\/blog\/how-to-create-animated-emblem-logo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create an Animated Emblem Logo With Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/roy.eyal\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-18T04:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T21:32:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-03.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Roy Eyal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@royeyal\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roy Eyal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\"},\"author\":{\"name\":\"Roy Eyal\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052\"},\"headline\":\"How to Create an Animated Emblem Logo With Elementor\",\"datePublished\":\"2021-02-18T04:18:00+00:00\",\"dateModified\":\"2025-12-02T21:32:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\"},\"wordCount\":1847,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\",\"url\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\",\"name\":\"How To Create an Animated Emblem Logo With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg\",\"datePublished\":\"2021-02-18T04:18:00+00:00\",\"dateModified\":\"2025-12-02T21:32:51+00:00\",\"description\":\"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create an Animated Emblem Logo With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052\",\"name\":\"Roy Eyal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g\",\"caption\":\"Roy Eyal\"},\"description\":\"An expert Elementorist at Elementor and a WordPress web developer that loves design and working with designers. Dev by day, bass player at night.\",\"sameAs\":[\"https:\/\/elementor.com\/author\/roy-eyal\/\",\"https:\/\/www.facebook.com\/roy.eyal\/\",\"https:\/\/www.instagram.com\/royeyal\/\",\"https:\/\/www.linkedin.com\/in\/royeyalcom\/\",\"https:\/\/x.com\/royeyal\",\"https:\/\/www.youtube.com\/royeyal\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/roy-eyal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create an Animated Emblem Logo With Elementor","description":"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.","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\/blog\/how-to-create-animated-emblem-logo\/","og_locale":"en_US","og_type":"article","og_title":"How To Create an Animated Emblem Logo With Elementor","og_description":"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.","og_url":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_author":"https:\/\/www.facebook.com\/roy.eyal\/","article_published_time":"2021-02-18T04:18:00+00:00","article_modified_time":"2025-12-02T21:32:51+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-03.jpg","type":"image\/jpeg"}],"author":"Roy Eyal","twitter_card":"summary_large_image","twitter_creator":"@royeyal","twitter_site":"@elemntor","twitter_misc":{"Written by":"Roy Eyal","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/"},"author":{"name":"Roy Eyal","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052"},"headline":"How to Create an Animated Emblem Logo With Elementor","datePublished":"2021-02-18T04:18:00+00:00","dateModified":"2025-12-02T21:32:51+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/"},"wordCount":1847,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/","url":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/","name":"How To Create an Animated Emblem Logo With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg","datePublished":"2021-02-18T04:18:00+00:00","dateModified":"2025-12-02T21:32:51+00:00","description":"Learn from an Elementor expert how to create an animated emblem effect with text rotating around a graphic on your WordPress website.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/02\/07.02.2021_HOW-TO-CREATE-AN-ANIMATED-EMBLEM-LOGO_BLOG-01.jpg","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Create an Animated Emblem Logo With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052","name":"Roy Eyal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g","caption":"Roy Eyal"},"description":"An expert Elementorist at Elementor and a WordPress web developer that loves design and working with designers. Dev by day, bass player at night.","sameAs":["https:\/\/elementor.com\/author\/roy-eyal\/","https:\/\/www.facebook.com\/roy.eyal\/","https:\/\/www.instagram.com\/royeyal\/","https:\/\/www.linkedin.com\/in\/royeyalcom\/","https:\/\/x.com\/royeyal","https:\/\/www.youtube.com\/royeyal"],"url":"https:\/\/elementor.com\/blog\/author\/roy-eyal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/56080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/507054"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=56080"}],"version-history":[{"count":8,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/56080\/revisions"}],"predecessor-version":[{"id":146408,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/56080\/revisions\/146408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/56468"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=56080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=56080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=56080"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=56080"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=56080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}