{"id":6573,"date":"2021-10-06T15:13:28","date_gmt":"2021-10-06T15:13:28","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=6573"},"modified":"2023-02-21T09:50:34","modified_gmt":"2023-02-21T09:50:34","slug":"create-a-popup-text-path-menu-with-a-hover-image-effect-advanced","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/","title":{"rendered":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6573\" class=\"elementor elementor-6573\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64743668 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64743668\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6643a946\" data-id=\"6643a946\" 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-3f0f1b60 elementor-widget elementor-widget-video\" data-id=\"3f0f1b60\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=ro8S69VE7Bk&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-2a6f4c7 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2a6f4c7\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-32400b1a\" data-id=\"32400b1a\" 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-751824d8 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"751824d8\" 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-1961\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1962\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1962\" 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-1961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1961\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1961\" tabindex=\"0\" hidden=\"false\"><p>In this Advanced Tips &amp; tricks tutorial we\u2019ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Creating a popup menu<br \/>\u2714\ufe0e Using the Text Path Widget with a custom SVG<br \/>\u2714\ufe0e Hiding and rotating image using custom CSS<br \/>\u2714\ufe0e Connecting the popup menu to the icon in header section<br \/>\u2714\ufe0e And much more!<\/p><p>Links:<br \/>Text Path Widget Tutorial https:\/\/youtu.be\/aeqpeYkE_yE<br \/>How to create a custom SVG https:\/\/elementor.com\/help\/how-to-cre&#8230;<\/p><p>CSS Snippets:<br \/>.menuImg{<br \/>opacity:0;<br \/>transition: all 0.8s ease-in-out;<br \/>transform: rotate(25deg);<br \/>}<\/p><p>.menuTitle:hover + .menuImg{<br \/>opacity:1;<br \/>transform: rotate(15deg);<br \/>}<\/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-1962\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1962\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1962\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In this advanced tips and tricks tutorial I\u2019m going to show you how to create this amazing popup menu which uses the image and text path widgets.<\/p><p>When a user hovers over a menu item, we can see that it beautifully animates and provides a great user experience for our website visitors.<\/p><p>To achieve this functionality we\u2019re going to undertake the following:<\/p><p>We\u2019ll first create and configure a popup<br \/>Then we\u2019ll build the basic structure of our menu using the text path widget<br \/>Next, we\u2019ll our images to each menu item<br \/>And finally we\u2019ll add some custom CSS to both hide and show our new images depending on the users interaction<\/p><p>This advanced tutorial does require some knowledge on how to use the Text Path widget. If you need to familiarise yourself with this feature, you\u2019ll find a link in the description below to our dedicated tutorial.<\/p><p>We are going to create this from scratch, so go ahead and open up your editor to be able to follow along with your own design preferences and images.<\/p><p>To get started, let\u2019s first create and configure our popup.<\/p><p>Head to the WordPress dashboard and then navigate your way to \u2018Templates &gt; Popups\u2019.<\/p><p>Add a new popup&#8230;give it a name&#8230;and then select \u2018Create Template\u2019.<br \/>Once the Elementor Editor has loaded, dismiss the library first of all, and then select the gear icon, located in the bottom left corner.<\/p><p>Here we are going to set our popup settings and look.<br \/>Set the width to 100 VW&#8230;change the height to \u2018fit to screen\u2019&#8230;and ensure the content is positioned in the center.<\/p><p>Now add in a new one column section.<\/p><p>Change it to \u2018Full Width\u2019&#8230;then switch over to the advanced tab&#8230;unlink the margin&#8230;and add 15% to the top.<\/p><p>Now, select the column and set the padding to 0 on all sides.<\/p><p>Next, we\u2019ll build the basic structure of our menu by using the text path widget.<\/p><p>Open up the widget menu and search for the \u2018Text Path Widget\u2019. Drop this into the empty column, and then update the text.<\/p><p>Choose custom from the \u2018Path Type Dropdown\u2019 and then add your own custom SVG.<\/p><p>If you would like to learn how to create a custom text path, you can follow this link.<\/p><p>Now in the link field, we\u2019ll search for and select the page which we\u2019d like to connect to.<\/p><p>And the final option in the \u2018Content Tab\u2019 we\u2019ll configure, is to enable \u2018Show Path\u2019. As you can see, we\u2019re now able to see the entire SVG path.<\/p><p>Switch over to the style tab now&#8230;change the size to percentage first of all, and then add your value.<\/p><p>In the typography area&#8230;set your font styles.<\/p><p>Amend the starting point\u2026and then set your \u2018Normal Color&#8230;and Hover Color\u2019&#8230;as well as the transition duration.<\/p><p>Next, open up the \u2018Path Tab\u2019.<\/p><p>Here we\u2019ll set the \u2018Stroke Color\u2019 using our global styles&#8230;then in the hover tab we\u2019ll set the stroke color\u2026.width&#8230;and transition.<\/p><p>Finally, switch the advanced tab&#8230;and add a class. This will allow us to target this particular element with CSS shortly.<\/p><p>Now that we\u2019ve configured our first menu item, let\u2019s now duplicate it.<\/p><p>Change the text\u2026<\/p><p>The link\u2026<\/p><p>And in the style tab, the starting point.<br \/>Repeat these steps for as many menu items as you wish.<\/p><p>Right click and select duplicate\u2026<\/p><p>Update the text&#8230;and link and starting point.<\/p><p>Then one last time\u2026<\/p><p>Duplicate&#8230;update the text&#8230;link and starting point.<\/p><p>OK, great!<\/p><p>We\u2019ve now finished creating our text path navigation.<\/p><p>Now let\u2019s make it even more interesting.<\/p><p>Let\u2019s add our images for each menu title.<\/p><p>Open the widgets menu&#8230;and drop in an \u2018Image Widget\u2019. Now in the navigator, drag and drop this underneath our first \u2018Text Path Widget\u2019.<\/p><p>Change the default image&#8230;and amend the image size.<\/p><p>3) Now, switch to the style tab and in this design, we would like a specific image size, so we are going to set these values in pixels.<\/p><p>Object fit, we\u2019ll set to cover.<\/p><p>Border to solid, with a 1px width and a border radius of 50 percent.<\/p><p>Let\u2019s now position our image.<\/p><p>Switch to the advanced tab&#8230;then under positioning&#8230;set the width to inline&#8230;the position to absolute&#8230;and then amend the horizontal and vertical orientations using the viewport width and height.<\/p><p>The last thing left to do here is add a class name to our image. Just like we did with our text-path widget, this will help us add additional customisations with CSS.<\/p><p>Let\u2019s now duplicate the image and move it underneath our second text path widget. We can\u2019t see our two images because they are positioned in exactly the same location, so let\u2019s fix this.<\/p><p>Update the image first, and then in the advanced tab, amend it\u2019s position.<\/p><p>We\u2019ll now repeat these steps for our third image.<\/p><p>Duplicate the image&#8230;move it&#8230;then update it.<\/p><p>In the advanced tab&#8230;amend the position.<\/p><p>And one last time for our fourth image.<\/p><p>Duplicate&#8230;move&#8230;update&#8230;and reposition.<\/p><p>Now everything is set up, the only thing left to do is to add some CSS magic which will show or hide the images depending on the users action.<br \/>Select the gear icon to enter the popup settings. Then in the advanced tab, choose \u2018Custom CSS\u2019.<\/p><p>Here we\u2019re going to target the class names that we\u2019ve applied to our widgets, to trigger an animation when the cursor hovers over the links.<\/p><p>Type a dot, which is used to identify a class name in CSS, followed by the name given to the text path widget.<\/p><p>Open the curly brackets.<\/p><p>We\u2019re going to target every element with this class name and make them disappear. We\u2019ll do this by typing \u201copacity, colon, zero, semi-colon\u201d, then close the curly brackets.<\/p><p>As you can see all of the images have now disappeared.<\/p><p>Now we are going to add the code that triggers the images to reappear.<\/p><p>Start a new line, and type dot followed by the class name which we assigned to our text path widgets.<\/p><p>We\u2019ll now add a hover state to our class which will allow something to happen when a user moves over the element with their cursor. Type \u201ccolon, hover\u201d.<\/p><p>Now type a space followed by the + icon which is used to select the next widget, which in our case is the class name of our image.<\/p><p>Now open and close the curly brackets.<\/p><p>And inside here we are going to set the opacity to one.<\/p><p>OK, that works pretty well, but let\u2019s add a transition to ease the effect.<\/p><p>Start a new line underneath our existing property in the image class, and type the following&#8230;<\/p><p>Now if we hover over our items, you can see this is more visually pleasing.<\/p><p>Let\u2019s continue and add some more great effects.<\/p><p>Again, start a new line in the image class and this time we\u2019ll add the transform value.<\/p><p>We\u2019ll then add the transform value to our hover state as well.<\/p><p>If we now hover the items, you\u2019ll see a subtle rotation effect.<\/p><p>Awesome!<\/p><p>And with this step we have finished creating our menu.<\/p><p>Click publish and don\u2019t forget to add the condition to display on the entire site!<\/p><p>Lastly we are going to connect our popup menu to the hamburger icon in the header, so that it opens whenever the icon is selected.<\/p><p>Use the keyboard shortcut CMD\/CTRL + E to open the finder and type header&#8230; and select the header template to open it.<br \/>Choose the hamburger icon and in the editor and under the content tab go to Link and click the dynamic tags icon. Under actions select popup.<br \/>Next click on the wrench icon on the left.<\/p><p>Select the default action which is open Popup. Under popup click the dropdown and type in the popup templates name. Select your template and then update.<\/p><p>As you can see Elementor gives you the capabilities to bring your designs to life, and with a little CSS, you can really take your creations to another level.<\/p><p>Try these techniques with your own designs, and be sure to share them with us in the comments below.<\/p><p>Thank you for watching. Subscribe to our channel for more amazing tutorials.<\/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 Advanced Tips &amp; tricks tutorial we\u2019ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs. The tutorial will cover: \u2714\ufe0e Creating a popup menu \u2714\ufe0e Using the Text Path Widget with a custom SVG [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":6574,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[41],"class_list":["post-6573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pop-up","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>Create a Popup Text Path Menu with a Hover Image Effect [Advanced] - 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\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Popup Text Path Menu with a Hover Image Effect [Advanced] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this Advanced Tips &amp; tricks tutorial we\u2019ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs. The tutorial will cover: \u2714\ufe0e Creating a popup menu \u2714\ufe0e Using the Text Path Widget with a custom SVG [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-06T15:13:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:50:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced] - 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\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/","og_locale":"en_US","og_type":"article","og_title":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced] - Academy","og_description":"Overview Transcript Overview In this Advanced Tips &amp; tricks tutorial we\u2019ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs. The tutorial will cover: \u2714\ufe0e Creating a popup menu \u2714\ufe0e Using the Text Path Widget with a custom SVG [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/","og_site_name":"Academy","article_published_time":"2021-10-06T15:13:28+00:00","article_modified_time":"2023-02-21T09:50:34+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced]","datePublished":"2021-10-06T15:13:28+00:00","dateModified":"2023-02-21T09:50:34+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/"},"wordCount":1552,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png","keywords":["Guides and Tutorials"],"articleSection":["Pop Up"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/","url":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/","name":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png","datePublished":"2021-10-06T15:13:28+00:00","dateModified":"2023-02-21T09:50:34+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/text-path-menu-cover.png","width":1280,"height":720,"caption":"Text Path Menu"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-popup-text-path-menu-with-a-hover-image-effect-advanced\/#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":"Pop Up","item":"https:\/\/elementor.com\/academy\/pop-up\/"},{"@type":"ListItem","position":4,"name":"Create a Popup Text Path Menu with a Hover Image Effect [Advanced]"}]},{"@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\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6573","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\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=6573"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6573\/revisions"}],"predecessor-version":[{"id":9611,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6573\/revisions\/9611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/6574"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=6573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=6573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=6573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}