{"id":1581,"date":"2021-06-20T07:51:55","date_gmt":"2021-06-20T07:51:55","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1581"},"modified":"2023-02-22T09:38:09","modified_gmt":"2023-02-22T09:38:09","slug":"create-responsive-image-hotspots-with-elementor-advanced-tutorial","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/","title":{"rendered":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1581\" class=\"elementor elementor-1581\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4231d744 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4231d744\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7eb3d824\" data-id=\"7eb3d824\" 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-4facd92d elementor-widget elementor-widget-video\" data-id=\"4facd92d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/GlwuG8DAaDA&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-535bcb45 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"535bcb45\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-33dd422a\" data-id=\"33dd422a\" 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-5c95fc1d elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5c95fc1d\" 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-1551\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1552\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1552\" 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-1551\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1551\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1551\" tabindex=\"0\" hidden=\"false\"><p>In this Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!<br \/>We use Elementor\u2019s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.<\/p><p>This tutorial will cover:<br \/>\u2714\ufe0e How to create and use Image Hotspots<br \/>\u2714\ufe0e Understand the Image and Flip Box widgets<br \/>\u2714\ufe0e Absolute positioning<br \/>\u2714\ufe0e Responsiveness with Absolute positioning<br \/>\u2714\ufe0e Column Alignment<br \/>\u2714\ufe0e And more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1552\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1552\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1552\" tabindex=\"0\" hidden=\"hidden\"><p>Hi, and welcome to another Tips &amp; Tricks tutorial!<br \/>Today we will learn how to create this awesome effect! <br \/>.<\/p><p>As you get more experienced with Elementor, you will start thinking of different and more creative ways to use Elementor\u2019s widgets and their functionality.. Outside the box, outside the flip-box!<\/p><p>We are going to use Elementor\u2019s flip-box widget to create amazing image hotspots!<br \/>First, let\u2019s get a good understanding of what the image hotspots are and how to use them. <br \/>Image hotspots are pins, displayed on certain areas of an image, that upon click or hover over with a cursor, an action performs, usually to display more information.<br \/>It\u2019s a friendly and interactive way to draw the user\u2019s attention and allow them to quickly view information without having to navigate to a different page.<br \/>There are many ways to create this effect. <br \/>I will show an example in this tutorial and you can customise it according to your design needs.<\/p><p>Let\u2019s start with the first one. We will create the image hotspots using Elementor\u2019s image and flip-box widgets.<br \/>Let\u2019s delete this and start from scratch.<\/p><p>Drag an Image widget to this empty column and then select the image of your choice.<\/p><p>Next we\u2019ll add the flip Box widget. Drag and drop it anywhere inside the column. <br \/>As you can see, the Flip Box widget has two sides. The front is the one that is actively displayed and when you hover your cursor over it, you trigger the back side to appear. <br \/>We will customise each side to give the desirable look of our hotspots.<\/p><p>For our design, we only need an icon in the front side.<br \/>I will choose the circle for this one, but you can choose any icon you like.<\/p><p>Delete the heading and it\u2019s description, and lastly in the background tab, remove the default colour by dragging it to zero. <br \/>Great.<br \/>Now let\u2019s change it\u2019s width and then position it, so we can see the changes better. <br \/>In the advanced tab, under positioning, set the width to custom. You can skip this step if you want the width to take 100% of the section. <br \/>In this design we will set it to 222px. 1<br \/>Much better.<\/p><p>Let\u2019s position it on top of the image next to the left frame, so when a user hovers their cursor over that area, information about the frames will be displayed.<\/p><p>To do that, go to the advanced tab and under positioning, set the position to absolute. <br \/>As you can see more options became available, but also this warning message appeared.<\/p><p>Setting custom position on elements, helps in placing them exactly where we want, but when switching to different viewports and screen sizes, it will make them move as well from their original place.<\/p><p>I will show you how to use absolute positioning to make a responsive design.<br \/>First we need to understand how absolute positioning works.<\/p><p>All the widgets are relatively placed inside a column, so we could say that the column is their container. Once we set a widget\u2019s positioning to absolute, it stops interacting relatively with other elements, therefore you see that it has stopped taking space inside the column.<\/p><p>The units we are going to use to set the widget\u2019s position will be in percentages. This way even if the column resizes, the percentages will always stay the same according to the column\u2019s current width and height.<br \/>(Video reference)<\/p><p>Keep in mind, we want to make the hotspots responsive, so we will use absolute positioning and percentages. This way, when the column resizes according to different screen sizes, the icon will keep its position since it\u2019s percentage will change as well.<\/p><p>Let\u2019s see how that works. <br \/>Set the offset units to percentages, then you can either manually drag the widget to the place you like or drag the handles till you find the perfect position. <br \/>Here is perfect for my design.<\/p><p>If you have a lot of content I would advise you to change the position of your icon here, and set it to the top left. This way it will stay in the right position no matter the amount of content you have in. <br \/>In our case we don\u2019t have a lot of content in our hotspots, so we will keep it centered.<\/p><p>Now it\u2019s time to style the back side of the flip box. <br \/>Go to Content, expand the back tab.. Here we will add the information that will be displayed once the user hovers over the icon.<br \/>Let\u2019s give some information about the frames here.<br \/>We won\u2019t need a button on this example, so go ahead and delete it by removing it\u2019s text.<br \/>In the background, set the colour to white.<\/p><p>In style, make the icon size a bit smaller. <br \/>In the back tab, set the spacing to 10 and change the text colour of the title and description to black.<\/p><p>We are almost done.<br \/>Go back to the content one more time and open the settings tab.<\/p><p>Here we will edit the animation and change the height of the widget.<\/p><p>I will set the height to 300px. <br \/>Next, expand the Flip Effect and play around with the options it gives you. Choose the one that fits best your design, which in our case will be the Zoom In effect.<\/p><p>We can also add motion effects that are triggered on scroll, or on mouse movement. This will draw the user\u2019s attention while navigating to your website.<\/p><p>Go to the Advanced tab and under Motion Effects, toggle the mouse effects to on. Select the mouse track and drag the speed to 0.3.<br \/>This effect will only work when a user displays it from laptop and desktop and not on mobile or tablet devices, which don\u2019t have a cursor.<\/p><p>Now our image hotspot is ready! <br \/>How does it look when we switch to the tablet though?<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>-New script-<br \/>The first thing we need to do is fix the position of the columns. We will set the second column to 100% so it will wrap underneath. <br \/>For the first column, we will slightly increase the width by setting it to 68%.<\/p><p>We don\u2019t want to set the column to 100% because the image\u2019s orientation is not landscape but portrait and if we did that, it would leave empty space.<\/p><p>The pins are positioned according to column\u2019s size, not the image\u2019s. For this reason we need to make sure that the image always takes the full width and height of the column.<\/p><p>-Previous script-<br \/>Because this image has a portrait orientation, we cannot make the column take 100% of the section\u2019s space because the pins are relative to the column, not the image.<\/p><p>-Continues here-<br \/>But then how can we position a column that hasn\u2019t got the full width? <br \/>I have another simple trick for you. Go to the column\u2019s settings, advanced and click on custom css. <br \/>Here we can set the margin to auto, which means it will automatically align itself to the centre.<br \/>Type selector, open and close brackets, and inside, type margin: auto;<br \/>This simple trick helps position a column within a section when it doesn\u2019t take the full 100% space. Now that we took this out of the way, let\u2019s continue.<br \/>We can see that the pins are still pretty close to their original position but not quite in the same place.. <br \/>This happens because both the column and the image resize according to different screen sizes, but the hotspots are not.<\/p><p>We can set a custom width and height to help them maintain their original position. <br \/>In our case, just the height will do the trick.<\/p><p>Under content, settings, set the height to 150px. 1<br \/>Great, this also works on mobile.2<\/p><p>Let\u2019s add a couple more hotspots now.<br \/>Right click on the widget and select duplicate. 3<br \/>Fix it\u2019s position and change the motion effect to direct to make it more distinctive.\u00a0<\/p><p>Now back to the content and change the text. 5<\/p><p>\u00a0<\/p><p>\u00a0<\/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 Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out! We use Elementor\u2019s Image and Flip Box widgets to build this effect while going [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4106,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,15],"tags":[41],"class_list":["post-1581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-responsive","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 Responsive Image Hotspots with Elementor [Advanced Tutorial] - 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-responsive-image-hotspots-with-elementor-advanced-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out! We use Elementor\u2019s Image and Flip Box widgets to build this effect while going [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T07:51:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:38:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - 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-responsive-image-hotspots-with-elementor-advanced-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - Academy","og_description":"Overview Transcript Overview In this Tips &amp; Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out! We use Elementor\u2019s Image and Flip Box widgets to build this effect while going [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/","og_site_name":"Academy","article_published_time":"2021-06-20T07:51:55+00:00","article_modified_time":"2023-02-22T09:38:09+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial]","datePublished":"2021-06-20T07:51:55+00:00","dateModified":"2023-02-22T09:38:09+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/"},"wordCount":1456,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/","url":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/","name":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg","datePublished":"2021-06-20T07:51:55+00:00","dateModified":"2023-02-22T09:38:09+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-Image-Hotspots-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-responsive-image-hotspots-with-elementor-advanced-tutorial\/#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":"Create Responsive Image Hotspots with Elementor [Advanced Tutorial]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1581\/revisions"}],"predecessor-version":[{"id":9584,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1581\/revisions\/9584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4106"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}