{"id":7579,"date":"2022-03-24T09:25:23","date_gmt":"2022-03-24T09:25:23","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7579"},"modified":"2023-02-21T09:39:37","modified_gmt":"2023-02-21T09:39:37","slug":"bring-a-character-to-life-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/","title":{"rendered":"Bring a Character to Life in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7579\" class=\"elementor elementor-7579\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6c9c6dd2 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c9c6dd2\" 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-14b87d73\" data-id=\"14b87d73\" 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-9798dee elementor-widget elementor-widget-video\" data-id=\"9798dee\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/buMv5cx1Aso&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-1648eb7b thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1648eb7b\" 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-565fad1e\" data-id=\"565fad1e\" 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-69d17ece elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"69d17ece\" 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-1771\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1771\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1772\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1772\" 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-1771\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1771\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1771\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we\u2019re going to learn how to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Using SVG shapes<br \/>\u2714\ufe0e Mouse Effects<br \/>\u2714\ufe0e 3D Tilt Effects<br \/>\u2714\ufe0e Z-Index<br \/>\u2714\ufe0e And much more!<\/p><p><a href=\"https:\/\/elemn.to\/character-assets\" target=\"_blank\" rel=\"noopener\">Download our character assets designed by our very own Steven Kiridis.<\/a><\/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-1772\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1772\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1772\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In this tutorial we\u2019re going to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code.<\/p><p>Every moving part in a digital cutout, like every moving part in a paper cutout, must be its own shape.<\/p><p>Be sure to take note of what&#8217;s above what? The eyelid above the iris, the hair above the skin, and so on.<\/p><p>Pay close attention to the axis point for each part as well. Combine these principles to create a simple face movement.<br \/>Let\u2019s begin by creating a new single column section.<\/p><p>We\u2019ll set the column gap to no gap\u2026height to fit to screen\u2026and column position to stretch.<\/p><p>Selecting the column next we\u2019ll set the vertical align to middle\u2026and the horizontal align to center.<\/p><p>We\u2019ll now open up the navigator to assist with staying organized throughout the tutorial.<\/p><p>With our initial configuration now complete, let\u2019s build our character.<\/p><p>Starting with the face, let\u2019s drop in an image widget.<\/p><p>We\u2019ve already uploaded our images to the media library so will simply select them as and when we need them.<\/p><p>We\u2019ll choose the face first of all and insert it into our page.<\/p><p>In the style tab, we\u2019ll set the width of this image\u2026then in the advanced tab we\u2019ll amend it\u2019s positioning to be inline\u2026and absolute.<\/p><p>We\u2019ll set the unit to viewport width, which will center our assets\u2026and the vertical orientation to bottom which will position our character in the desired location. One slight adjustment with the vertical orientation and the base for character is complete.<\/p><p>Let\u2019s now apply some motion effects. Adding these motion effects will really take our character to the next level. We\u2019ll make good use of the \u2018Mouse Track\u2019 options available in Elementor, so that the animations are responsive to what the user is doing with their cursor.<\/p><p>Open up motion effects\u2026and then enable mouse effects.<\/p><p>From here we can switch on \u2018mouse track\u2019\u2026we\u2019ll leave the direction as it is\u2026but amend the speed like so.<\/p><p>Now don\u2019t worry that our character currently looks like a candidate for a horror movie\u2026we\u2019ll fix this soon enough.<\/p><p>Let\u2019s now rename the layer in the navigator to help us stay organized.<\/p><p>OK great, next, we\u2019ll add in the t-shirt.<\/p><p>Instead of adding a new blank widget, we\u2019ll simply right click the face and then select duplicate. By doing this, not only is the widget itself copied over, but the internal settings as well like position, alignment and animations, to name but a few. Making good use of the duplicate feature makes for a much faster workflow.<\/p><p>Let\u2019s rename this in the navigator to help with our organization.<\/p><p>And then we\u2019ll update the image to display the t-shirt\u2026and amend the width within the style tab.<\/p><p>Switch over the advanced tab now and expand positioning, then amend the vertical orientation like so.<\/p><p>Even if we set our image to the center of the screen horizontally it still may not look centered. This happens because our assets are hand-drawn and therefore the size of the left side might be slightly different to the right side.<\/p><p>Instead of adjusting its horizontal position from here\u2026we\u2019ll adjust its margin instead. This way the image will always stay in the center.<\/p><p>OK, great! Let\u2019s move onto the next part.<\/p><p>Next up is the jacket.<\/p><p>Let\u2019s duplicate the t-shirt\u2026rename it\u2026replace the image\u2026and update the size.<\/p><p>A great way to manage the assets which will be displayed at the front is by using navigator.<\/p><p>You can easily reposition them like this\u2026or simply apply a z-index using lower&#8230;or higher values.<\/p><p>We are going to set it to 5 since we want it to be in front of all the other assets. Let&#8217;s continue positioning this.<\/p><p>We\u2019ll apply some margin\u2026and then adjust the vertical orientation.<br \/>As you can see, things are really starting to take shape. Let\u2019s now move onto some smaller parts, the ears.<\/p><p>We\u2019ll duplicate the jacket\u2026rename\u2026update the image to show the left ear\u2026and amend the size.<\/p><p>Adjust the vertical orientation\u2026and then the margin. Remove the z-index\u2026and reposition the ear in the navigator.<\/p><p>With the first ear in position, let\u2019s now adjust the mouse tracking. Expand the motion effects tab\u2026and then navigate to \u2018mouse track\u2019. We\u2019ll tweak the speed here slightly to better suit this part of our character.<\/p><p>OK great, that\u2019s looking perfect.<\/p><p>Duplicate the left ear now\u2026rename\u2026update the image\u2026and then amend the margin to position it on the other side.<\/p><p>Next, we have the nose. Duplicate the last ear\u2026rename in the navigator\u2026reposition\u2026and update the image.<\/p><p>Amend the width\u2026the margin\u2026and then the vertical orientation.<\/p><p>In the motion effects tab, we\u2019ll adjust the \u2018mouse track\u2019 direction to \u2018direct\u2019 which will move in the same direction of the user&#8217;s cursor.<\/p><p>Duplicate the nose now\u2026rename\u2026update the image to display the mouth\u2026adjust the width of the mouth\u2026then configure the vertical orientation\u2026and finally change the margin a little bit to get closer to the center.<\/p><p>Under motion effects, we\u2019ll change the mouse track direction to opposite.<\/p><p>OK, as you can see our character is really starting to take shape.<\/p><p>Next, we\u2019ll build the hair.<\/p><p>Right click and duplicate the mouth, then rename this layer in the navigator.<\/p><p>We\u2019ll update the image to show the hair base\u2026then adjust the width. Now amend the vertical orientation\u2026and the margin.<\/p><p>The \u2018Mouse Track\u2019 we\u2019ll switch off for this layer.<br \/>Duplicate the hair base\u2026rename\u2026and reposition. Update the image and insert into the page. Update the width under the style tab\u2026then in the advanced tab\u2026the vertical orientation\u2026and margin.<\/p><p>We\u2019ll switch on the \u2018Mouse Track\u2019 and as you can see, because we duplicated this widget the values are saved from before.<\/p><p>Duplicate the last layer\u2026and then rename.<\/p><p>We\u2019ll update the image to display the left section of the hair and insert it into our page.<\/p><p>Update the image width next under the style tab\u2026and then adjust the margin to suit.<\/p><p>In the positioning tab configure the vertical orientation.<\/p><p>Then finally, expand the motion effects\u2026set the direction\u2026and the speed.<\/p><p>OK, looking good.<\/p><p>Let\u2019s now finish the hair.<\/p><p>Duplicate the last layer of hair\u2026rename\u2026and then update the image to display the right hand side of the hair.<\/p><p>Adjust the image width next\u2026and open up the advanced tab. Here we\u2019ll update the margin\u2026and then the vertical orientation.<\/p><p>Under the motion effects tab, we\u2019ll switch the \u2018mouse track\u2019 to opposite.<\/p><p>Let\u2019s now add in the eyebrows.<\/p><p>We\u2019ll start by duplicating the last hair image\u2026then rename in the navigator just like before.<\/p><p>Update the image to show the right eyebrow\u2026and then reposition this in the navigator to amend the order.<\/p><p>Adjust the image width\u2026update the margin values\u2026the vertical orientation\u2026the mouse track direction\u2026and the mouse track speed.<\/p><p>Duplicate the right eyebrow and let\u2019s configure the left one now.<\/p><p>Rename\u2026update the image\u2026and adjust the margin.<\/p><p>As you can see the eyebrows already follow the cursor so no more adjustments needed here.<\/p><p>Now let\u2019s finally bring our character to life by adding in the eyes.<\/p><p>Duplicate the last eyebrow image\u2026rename it in the navigator\u2026and then update the image to display the right eye.<\/p><p>We\u2019ll amend the width next\u2026and then the vertical orientation.<\/p><p>Now let\u2019s move it to the back of all our other parts.<\/p><p>We can add zero as our z-index or drag our layer above the face. The result will be the same.<\/p><p>Now we\u2019ll adjust the margin to perfectly place the eye.<\/p><p>Open up the motion effects tab now and set the mouse track to direct, and mouse track speed.<\/p><p>We\u2019re also going to apply a 3d tilt to our eyes, so enable that now. By enabling 3d tilt, it provides a more realistic view of the roundness of the eyes.<\/p><p>OK, great, one last eye to go!<\/p><p>Let\u2019s duplicate\u2026rename\u2026and update the margin.<\/p><p>Let\u2019s tidy up our workspace now and take a look at what we\u2019ve created.<\/p><p>Amazing!<br \/>As you can see we have a small amount of overflow. This is easily fixable by selecting the section and setting the overflow to hidden.<\/p><p>Please note the overflow will always be visible in the Elementor editor, but not on the live website.<\/p><p>And there we have it, you now know how to create a stunning animated character which interacts with the user&#8217;s cursor, providing a unique and special experience for anybody visiting your website.<\/p><p>Thank you watching.<\/p><p>Be sure to comment below with any questions, and don\u2019t forget to like and subscribe for more amazing tips and tricks 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 tutorial we\u2019re going to learn how to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code. The tutorial will cover: \u2714\ufe0e Using SVG shapes \u2714\ufe0e Mouse Effects \u2714\ufe0e 3D Tilt Effects \u2714\ufe0e Z-Index \u2714\ufe0e [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":7580,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-7579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bring a Character to Life in Elementor - 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\/bring-a-character-to-life-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bring a Character to Life in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we\u2019re going to learn how to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code. The tutorial will cover: \u2714\ufe0e Using SVG shapes \u2714\ufe0e Mouse Effects \u2714\ufe0e 3D Tilt Effects \u2714\ufe0e Z-Index \u2714\ufe0e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T09:25:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:39:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bring a Character to Life in Elementor - 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\/bring-a-character-to-life-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Bring a Character to Life in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial we\u2019re going to learn how to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code. The tutorial will cover: \u2714\ufe0e Using SVG shapes \u2714\ufe0e Mouse Effects \u2714\ufe0e 3D Tilt Effects \u2714\ufe0e Z-Index \u2714\ufe0e [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/","og_site_name":"Academy","article_published_time":"2022-03-24T09:25:23+00:00","article_modified_time":"2023-02-21T09:39:37+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg","type":"image\/jpeg"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Bring a Character to Life in Elementor","datePublished":"2022-03-24T09:25:23+00:00","dateModified":"2023-02-21T09:39:37+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/"},"wordCount":1609,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/","url":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/","name":"Bring a Character to Life in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg","datePublished":"2022-03-24T09:25:23+00:00","dateModified":"2023-02-21T09:39:37+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/03\/Bring-characters-to-life.jpg","width":2560,"height":1440,"caption":"Bring a Character to Life in Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/bring-a-character-to-life-in-elementor\/#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":"Bring a Character to Life in Elementor"}]},{"@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\/7579","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=7579"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7579\/revisions"}],"predecessor-version":[{"id":9330,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7579\/revisions\/9330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7580"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}