{"id":1535,"date":"2021-06-17T12:46:14","date_gmt":"2021-06-17T12:46:14","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1535"},"modified":"2023-02-22T09:38:37","modified_gmt":"2023-02-22T09:38:37","slug":"how-to-use-the-image-carousel-widget-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/","title":{"rendered":"How to Use the Image Carousel Widget in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1535\" class=\"elementor elementor-1535\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-368f7abc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"368f7abc\" 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-6a4ac641\" data-id=\"6a4ac641\" 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-6ff400c elementor-widget elementor-widget-video\" data-id=\"6ff400c\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=FmD-vfugKW0&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-36df0e1d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"36df0e1d\" 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-321654dd\" data-id=\"321654dd\" 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-79aca2b7 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"79aca2b7\" 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-2041\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2041\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2042\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2042\" 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-2041\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2041\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2041\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we learn how to use and configure the Image Carousel Widget. This highly customizable widget which allows you to display a selection of images in an interesting and dynamic way. This tutorial will cover:<\/p><p>\u2714 How to add an image carousel to your website<\/p><p>\u2714 The available styling options for the image carousel widget<\/p><p>\u2714 Adjusting your carousel for tablet &amp; mobile devices<\/p><p>\u2714 Creating a carousel with photographs<\/p><p>\u2714 Creating a logo carousel<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2042\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2042\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2042\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it&#8217;s Ash from Elementor.<\/p><p>In this tutorial we will explore the Image Carousel Widget. This widget allows you to display a selection of images in a fun and interactive way.<\/p><p>So, if you\u2019re ready, let\u2019s get started.<\/p><p>Today we\u2019ll create three variations of the carousel widget.<\/p><p>The first will display a single image which fades gracefully into another image every couple of seconds.<\/p><p>The second will display a simple collection of photographs in a two column format, which when clicked will open the Lightbox pop-up of the image.<\/p><p>The third and final example will be an automatic scrolling logo carousel.<\/p><p>\u00a0<\/p><p>To get started we\u2019ll delete our existing carousel and add a new blank one. Simply search for the \u2018image carousel\u2019 widget and drop it into position.<\/p><p>The Image Carousel Widget has several configuration and styling options, and we\u2019ll go over them all in our three examples.<br \/>The first thing we must do is add some images to our carousel. To do this, simply select the plus icon to launch your media library. Here you can either upload new images for your carousel or select ones you\u2019ve previously uploaded.<\/p><p>We already have our images uploaded, so we\u2019ll simply select the images and create a new gallery.<\/p><p>The next screen allows us to change the order of our images and also amend the image title. Once you\u2019re happy with these elements, simply select \u2018Insert gallery\u2019 to add the image carousel to your page.<\/p><p>Now that we have our images inserted into our carousel widget it\u2019s time to amend the configuration and styling.<\/p><p>The first option we see is the Image Size. This allows us to specify which version of the image is used in the carousel. By default it uses the thumbnail which is far too small so we\u2019ll switch this to Large.<\/p><p>Next, we can declare how many slides we would like to show at one time. By default the carousel shows 3 images, but we would like it to only show 1.<\/p><p>You\u2019ll see that if any value is entered which is greater than 1, we are presented with an additional option. Here we can specify how many slides we would like to scroll at any one time. Let\u2019s switch this back to 1 and we\u2019ll revisit this option on our next carousel.<\/p><p>Image stretch we\u2019ll leave as No because our image already fills all of the available space.<\/p><p>By default the navigation is set to display both arrows and dots. We can also set this to display just arrows, or just dots. In our example, we do not need the navigation to show, so we\u2019ll set this as none.<\/p><p>Next, we have the link options. We can link our carousel to a URL or the Lightbox pop-up. We\u2019ll cover this aspect in our next carousel, so for now set this to none.<\/p><p>The final option here is the caption. If you\u2019ve added this data within the media library you can display it underneath your images. The options available are \u2018title, caption &amp; description\u2019.<\/p><p>If you have this option selected and switch over to the style tab you will notice we can amend the styling for the caption section. These styles are applied to the title, caption &amp; description, regardless of which one you have selected.<\/p><p>We can first of all amend the alignment of the text, next we can choose the text color either by selecting a global color option or a manual selection, and finally we can configure the typography, again, either by selecting the global options or manually.<\/p><p>We do not require this for our design, so let\u2019s switch back and we\u2019ll leave it as none.<\/p><p>Next up, let\u2019s switch to the \u2018Additional Options\u2019 area.<\/p><p>We would like our carousel to rotate and change slides automatically so we\u2019ll set this option as \u2018yes\u2019.<\/p><p>Pause on hover is a great feature which pauses the autoplay when a user hovers over the carousel. We\u2019ll leave this as \u2018Yes\u2019.<\/p><p>And we can set whether we would like the carousel to pause if a user interacts with it, again we\u2019ll leave this as \u2018Yes\u2019.<\/p><p>The autoplay speed option allows us to control the time it takes for the next slide to start. By default it is set to 5000 which converts into 5 second. We\u2019d like our carousel to change slightly faster, so let\u2019s change this to 2000 which converts to 2 seconds.<\/p><p>Infinite loop we\u2019ll set to yes as we would like the carousel to continuously play, rather than stop when it gets to the last image.<\/p><p>Effect allows us to specify whether we would like the images to fade or slide into one another. This design would suit a fade, so let\u2019s set that here.<\/p><p>And the animation speed works in the same way as the autoplay speed. Here we can amend the number to equal the amount of seconds we would like the animation to last for. In our example 1 and half seconds works well so we\u2019ll set this to 1500.<\/p><p>The final option we see is the direction. If we amend our carousel to the slide effect, you can see we can now control the way the slides move. Let\u2019s switch back to fade and leave this as default.<\/p><p>OK, great stuff. The image carousel is really starting to take shape.<\/p><p>Because of our current configuration in the Style tab we only see one option which is to set a border for the carousel.<\/p><p>Here we can set a border type, width and color to show around the image. There is also an option to add a border radius if required.<\/p><p>We\u2019ll leave the border switched off and the radius as default as our design doesn\u2019t require either of these styles.<\/p><p>The last step to finish our image carousel is to add a drop shadow effect so it fits with the design of our page.<\/p><p>Switch over the advanced tab and navigate your way to the border tab.<\/p><p>Under box shadow we\u2019ll set the color to #004C4C but be sure to set whichever color matches your design. Horizontal we\u2019ll set it to 100 which will move the box shadow effect across 100 pixels, and vertical we\u2019ll set it to -100, which will move the shadow effect up 100px. Let\u2019s set blur to 0 so we have nice clean edges. Spread can be left as 0 and the position can be left as Outline.<\/p><p>OK great, as you can see our simple image carousel really brings a nice level of design to our website.<\/p><p>Now let\u2019s move onto our next carousel&#8230;<br \/>As you can see in our next carousel we have two columns, navigation arrows and a slide effect.<\/p><p>Let\u2019s delete this widget and create a new one from scratch.<\/p><p>Just like before, let\u2019s search for the image carousel widget and drop it into position.<\/p><p>First, we\u2019ll add the images to our carousel from the media library.<\/p><p>Once this is done we can start configuring our carousel to create the correct layout.<\/p><p>We\u2019ll set image size to large, slide to show to 2, slides to scroll to 1, image stretch can be left as no, and in the navigation section we\u2019ll set this to arrows and dots. Even though our design doesn\u2019t use the dot navigation, we\u2019ll enable this for now so that when it comes to styling this element you will have a better understanding of how it works.<\/p><p>Under link we have three options. By default this is set to none, which means nothing will happen if a user clicks on an image. We also have media file and custom URL. Selecting custom URL opens a new field where you can specify a URL for your carousel to link to. For our demo we\u2019re going to link to a media file using Lightbox. When we select media file a new field appears called Lightbox, we\u2019ll set this to yes.<\/p><p>As you can see now when we click an image it opens the Lightbox pop-up which adds a great level of interactivity to the design.<\/p><p>Finally we\u2019ll leave the caption set to none.<\/p><p>Now, select additional options. The default settings here work really well for our carousel so we\u2019ll leave them as they are, but feel free to amend these to suit your requirements.<\/p><p>Next we\u2019ll style the navigation elements to finish the carousel.<\/p><p>Switch over to the Style tab and you\u2019ll see styling options for both the arrows and the dots.<\/p><p>Under the arrow section we can configure several elements to fine tune the arrows.<\/p><p>Position allows us to set the arrows to show on the inside or outside of the carousel. We\u2019ll set this to outside.<\/p><p>Size controls the size of the arrows. For our design, 30 works well.<\/p><p>And finally we\u2019ll set the color to our nice green color.<\/p><p>The dots section is similar to the arrows in that we are able to control the position, size and color of this navigation element.<\/p><p>For our design, the dots are not required so we\u2019ll switch back to content, and set the navigation to arrows only.<\/p><p>Finally, select the \u2018Image\u2019 tab.<\/p><p>Vertical align can be left as default, spacing we\u2019ll change to custom and set the value to 20. And under border type, we\u2019ll leave this as \u2018None\u2019.<\/p><p>The final thing we must check here is that our carousel appears correctly on tablet and mobile devices.<\/p><p>Let\u2019s switch to the tablet view. By default the carousel is configured to show 2 columns on tablet which is perfect for our design. If however you need to change to say 3 columns we can now amend the slides to show like so.<\/p><p>We can also do the same for mobile devices. On mobile the default slide is set to show is 1 which again works great for our design, but if you need to amend this, you can do so here.<\/p><p>And there we have it, we\u2019ve created a great looking two column carousel with Lightbox pop-ups enabled.<br \/>Now let\u2019s create our third and final carousel.<\/p><p>Scroll down to the logo carousel and delete this widget.<\/p><p>Search for the image carousel widget and drop it into position.<\/p><p>Add in your images.<\/p><p>And we\u2019ll set the image size to medium large, slides to show here will be 5 and slides to scroll will be 1.<\/p><p>Image stretch can be left as no, and navigation, link &amp; caption can all be left as none.<\/p><p>Under additional options we\u2019ll set autoplay to yes, pause on hover to yes, pause on interaction to yes, autoplay speed to 2500, infinite loop to yes, animation speed to 500 and direction to left.<\/p><p>As you can see our logo carousel is really starting to look great.<\/p><p>Let\u2019s finish the logo carousel by switching to the style tab. Here we can amend the alignment and spacing of our logos.<\/p><p>Vertical align should be set to centre and under spacing change this to custom and set the value as 70.<\/p><p>The logo carousel is now complete and adds a great level of interaction to the design.<\/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 tutorial, we learn how to use and configure the Image Carousel Widget. This highly customizable widget which allows you to display a selection of images in an interesting and dynamic way. This tutorial will cover: \u2714 How to add an image carousel to your website \u2714 The available styling options [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3375,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1535","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>How to Use the Image Carousel Widget 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\/how-to-use-the-image-carousel-widget-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Image Carousel Widget in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we learn how to use and configure the Image Carousel Widget. This highly customizable widget which allows you to display a selection of images in an interesting and dynamic way. This tutorial will cover: \u2714 How to add an image carousel to your website \u2714 The available styling options [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:46:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:38:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Image Carousel Widget 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\/how-to-use-the-image-carousel-widget-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Image Carousel Widget in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial, we learn how to use and configure the Image Carousel Widget. This highly customizable widget which allows you to display a selection of images in an interesting and dynamic way. This tutorial will cover: \u2714 How to add an image carousel to your website \u2714 The available styling options [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:46:14+00:00","article_modified_time":"2023-02-22T09:38:37+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Image Carousel Widget in Elementor","datePublished":"2021-06-17T12:46:14+00:00","dateModified":"2023-02-22T09:38:37+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/"},"wordCount":1973,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/","name":"How to Use the Image Carousel Widget in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg","datePublished":"2021-06-17T12:46:14+00:00","dateModified":"2023-02-22T09:38:37+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Carousel-Widget-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-image-carousel-widget-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":"How to Use the Image Carousel Widget 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\/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\/1535","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=1535"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"predecessor-version":[{"id":9591,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1535\/revisions\/9591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3375"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}