{"id":1606,"date":"2021-06-20T08:16:44","date_gmt":"2021-06-20T08:16:44","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1606"},"modified":"2023-02-22T10:19:45","modified_gmt":"2023-02-22T10:19:45","slug":"elementor-responsive-101-all-you-need-to-know","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/","title":{"rendered":"Elementor Responsive 101: All You Need to Know!"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1606\" class=\"elementor elementor-1606\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5bb2fe8d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5bb2fe8d\" 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-6cf0136d\" data-id=\"6cf0136d\" 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-7eb3df60 elementor-widget elementor-widget-video\" data-id=\"7eb3df60\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=EqFxeluk4U4&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-44eb5597 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"44eb5597\" 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-24f6043d\" data-id=\"24f6043d\" 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-66e5630f elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"66e5630f\" 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-1721\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1722\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1722\" 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-1721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1721\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1721\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will go over the responsive features and options in Elementor. We\u2019ll review the basics of responsive design, and optimize a website\u2019s header, content, and footer, using Elementor&#8217;s responsive section, column, and widget settings.<\/p><p>This tutorial will cover:<\/p><p>\u2714\ufe0e Responsive features<br \/>\u2714\ufe0e Responsive menu<br \/>\u2714\ufe0e Responsive font styles<br \/>\u2714\ufe0e Device-specific settings<br \/>\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-1722\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1722\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1722\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Aviva from Elementor. Today I\u2019ll show you how to make your website fully responsive.<\/p><p>With people accessing websites from an array of devices these days, it\u2019s more important than ever to make sure your website looks and functions as intended, and is user friendly, at any size. By making sure your designs adjust automatically to different sizes, your website will be optimized for just about any viewport, or screen size<\/p><p>While developers often achieve this by using HTML and CSS, never fear, with Elementor, you can optimize your whole website without writing a single line of code.<br \/>We\u2019ll begin with an Overview of Responsive features, and then I\u2019ll show you how to use Elementor to:<\/p><p>1. Design a Responsive Menu<br \/>2. Change Column width and wrapping<br \/>3. Set up Responsive Font Styles<br \/>4. Hide &amp; Show Elements on different devices<br \/>5. Reverse the column order in a section<br \/>6. Use the responsive widget options<br \/>Let\u2019s start with a tour of the responsive features in Elementor. <br \/>First is the responsive mode, which you can access here, on the panel toolbar. Switch between Desktop, Tablet and Mobile previews by clicking the corresponding icon. Upon selecting a viewport, the page is previewed in that specific viewport\u2019s width.<\/p><p>Also, you will notice upon entering the settings of any widget, column or section, that the editor automatically switches the viewport icon to match the selected view, just like we see here.<\/p><p>Clicking the icon and switching between viewports will also switch the preview of your web page. <br \/>Let\u2019s get to know the viewport a little better. It\u2019s important to understand that responsive edits in Elementor are generally inherited from the larger viewport down to the smaller viewport. So this means, that changes to Desktop responsive settings, are automatically applied downward to Tablet as well as Mobile views, and changes to Tablet are applied to Mobile.<\/p><p><br \/>Here, on this heading widget, you can see that if we set the font size on the Desktop, the values on tablet and mobile appear empty. This is because they\u2019ve been inherited from the larger viewport and will only change if we edit them manually, like this.<\/p><p>Responsive edits are not inherited upwards, so Mobile edits don\u2019t affect Tablet or Desktop, and Tablet edits don\u2019t affect Desktop.<\/p><p>That said, there are times when Elementor intuitively anticipates a layout for smaller sizes, and the columns or widget&#8217;s width will change to fit the mobile viewport by default.<br \/>There are even more responsive options for sections, columns and widgets that you can access from the advanced tab, which we\u2019ll cover soon.<br \/>Now that we understand what a responsive website is and know how to navigate between Elementor\u2019s viewports, let\u2019s make our website responsive!<\/p><p>I have my homepage here, designed in desktop mode, and it\u2019s time to see how it looks on tablet and mobile. Select the tablet icon to preview the website in the tablet viewport.<\/p><p>As you can see, a lot of things appear different at this size.<\/p><p>If you\u2019re using Elementor Pro, you can use Elementor to optimize your headers and footers.<\/p><p>Don\u2019t have Pro? Don\u2019t worry, you can still follow along. The same principles of responsive design apply to all content, and all the same responsive options are available in the free version for any content designed with Elementor.<\/p><p>We\u2019ll begin with the Header, move on down to the Footer, and then come back to the Page content.<\/p><p>With Elementor\u2019s full site editing, we can quickly switch from the page content to the header, like this. The blue outline around the header tells us that it\u2019s now active. <br \/>The first noticeable difference in tablet mode is this hamburger icon. By default, when you build your navigation menu, it\u2019s set to toggle, on smaller viewports. Depending on your design, you can set the nav menu links to display on tablet, mobile, or to not display at all.<\/p><p>In this design we don\u2019t have so many links, so let\u2019s set the breakpoint to mobile. This way, the menu icon shows only when someone is viewing the website from mobile, and the menu links will be visible on tablet. <br \/>Now switch the preview to mobile. The menu icon is displayed just as we set it before, but the layout needs a little work.<br \/>As mentioned in the overview, on smaller viewports, Elementor anticipates the column width, and sets it to 100% on mobile. We\u2019ll discuss column width in more detail soon.<\/p><p>Let\u2019s set these icons back to appear in the same row, by entering the column\u2019s settings and set the width to 50% here. Do the same to the second column, so together they span one row. Perfect.<\/p><p>Let\u2019s take a closer look at the nav menu, and some of its settings. Click to expand it. Under Mobile dropdown, Align the menu links to the Center. In style, under Toggle Button, remove the background color by dragging the opacity all the way left.<br \/>Great! <br \/>Click update to save changes to the Header.<br \/>Let\u2019s switch back to tablet, scroll down, and click Edit footer to quickly enter its editing settings.<\/p><p>Before we begin editing, let\u2019s get a better understanding of how columns work.<\/p><p>When you have multiple columns in a section, their widths are by default equal. So for example, if you have 2 columns, each one will have a width of 50%, if you have 4 columns, each one will have a width of 25%, and so on.<\/p><p>In this section, we have 5 columns of equal width, so each column by default takes up 20% of the section. They still fit in the viewport, but ideally, we want to allow a little more space between them, so that the columns won\u2019t be so close to each other. We can group the first 3 columns into one row, and the last two in the row below.<\/p><p>To do this, set the column width of each of the first three rows to 33.33.<br \/><br \/>Whenever the total width of the columns exceeds 100% of the section width, columns that no longer fit, are displaced and pushed below into a new row.<\/p><p>In this case, the last two columns have wrapped to the next row, and have retained their default widths of 20% each. Now let\u2019s set each of them to 50% so together they take up the full width of the section.<\/p><p>That\u2019s better.<\/p><p>Now, let\u2019s switch to the mobile. <br \/>The columns have wrapped here by default, and each one takes up 100% of the section\u2019s width, which works nicely here. <br \/>Let\u2019s switch back to tablet and edit the page content. Make sure to click Save, when prompted to save the edits we did on the footer.<br \/>The layout looks good, we only need to edit this heading. We can control the font size in each viewport.<\/p><p>I already saved this as a global font when designing for desktop, so we\u2019ll edit it directly from the Global settings.<\/p><p>I\u2019ve set the font size to the VW, which represents the Viewport width, and is relative to the percentage of the viewport\u2019s width. Let\u2019s hide the preview panel to see how it changes size based on the screen size. Cool.<\/p><p>Now let\u2019s preview it on tablet by clicking here. Let\u2019s make the heading a little larger. Great. And now let&#8217;s check it on mobile\u2026. and change it to better fit the small screen. You can also use other units, such as pixels, depending on your preference.<br \/>The column with the social media icons was perfect for the desktop and tablet, but it takes up a lot of space on mobile. Since we have this information repeating in the footer, we don\u2019t absolutely have to have it here.<br \/><br \/>Elementor gives you the ability to hide widgets, columns or even a whole section, when the website is displayed on different devices. You can find this option in the advanced tab under responsive.<\/p><p>So go ahead and set this column to hide.<br \/>Once you choose to hide an element, it will appear greyed out in its corresponding preview. But don\u2019t worry; it will be completely hidden on the published page.<br \/>Let\u2019s take a look at the next section. Switching between viewports can cause columns to wrap, and sometimes display in an undesirable order.<\/p><p>In Elementor, you can rearrange the column order. Select the section, and in advanced options, under responsive, enable Reverse columns for Tablet. Much better!<\/p><p>We can also hide this image since it\u2019s not needed anymore. We\u2019ll hide it for both tablet and mobile. <br \/>Switching back to mobile, we can see that everything looks great. <br \/>The following section is interactive, and uses the flip box widget to create this effect.<\/p><p>As you can see on tablet1, it looks great. Now switch mobile. Let\u2019s keep things simple for the user, on mobile, by hiding it.<\/p><p>But if we hide the section, the text will also be hidden. So let\u2019s first make a copy of the text, and set the text to show only on mobile.<br \/>Right click the text, select duplicate, and drag the text widget here.<\/p><p>Go to its responsive options, and select to hide on desktop and tablet, allowing it to show only on mobile.<\/p><p>Now hide the entire section below it, and voila!<\/p><p>With this method, you can create unique content to match your design needs, and be displayed only on specific devices. <br \/>Switch the viewport back to tablet, and move to the next section.<br \/>It looks good,1 now how about mobile?<\/p><p>The only thing we need to change here, is the alignment of the contact information.<\/p><p>As mentioned, each widget has viewport icons for available responsive options. Select each heading and text editor widget, and align to the centre like so.. <br \/>To save time, we can copy and paste the styles between widgets of the same type.<\/p><p>Use care when making changes; If an element doesn\u2019t have a Viewport Icon next to it, changes will affect the element at all viewport sizes.<br \/>Ok! everything is optimized. Let\u2019s preview the site in Tablet mode&#8230;and Mobile. Nice! <br \/>Let\u2019s recap what we learned today. First, we went over the responsive features in the Elementor editor, which include the viewport preview modes, the viewport icons, and the advanced responsive widget options.<\/p><p>Then we optimized our header and responsive navigation menu. In the Footer, we reviewed column width and wrapping.<\/p><p>In the page content, we reviewed how to make a font responsive, hide and show elements on specific devices, and reverse column order. We then used the viewport icons to edit responsive widget options.<\/p><p>And that\u2019s it. Now you know how to optimize your website for responsive view.<\/p><p>As you familiarize yourself with the responsive options in the Editor, and gain more experience, using responsive units like viewport width and percentages, will become second nature to you. You\u2019ll be able to design more intuitively in desktop mode, while keeping responsive layouts in mind, for more consistent results.<\/p><p>So what are you waiting for? Get into tablet&#8230;or mobile mode, and optimize your site today. \ud83e\udd13<br \/>Thanks for watching. For more tutorials, subscribe to our YouTube channel. And don\u2019t forget to hit the notifications bell.<\/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 will go over the responsive features and options in Elementor. We\u2019ll review the basics of responsive design, and optimize a website\u2019s header, content, and footer, using Elementor\u2019s responsive section, column, and widget settings. This tutorial will cover: \u2714\ufe0e Responsive features \u2714\ufe0e Responsive menu \u2714\ufe0e Responsive font styles \u2714\ufe0e [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,15],"tags":[41],"class_list":["post-1606","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>Elementor Responsive 101: All You Need to Know! - 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\/elementor-responsive-101-all-you-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Responsive 101: All You Need to Know! - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will go over the responsive features and options in Elementor. We\u2019ll review the basics of responsive design, and optimize a website\u2019s header, content, and footer, using Elementor\u2019s responsive section, column, and widget settings. This tutorial will cover: \u2714\ufe0e Responsive features \u2714\ufe0e Responsive menu \u2714\ufe0e Responsive font styles \u2714\ufe0e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T08:16:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T10:19:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-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=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Responsive 101: All You Need to Know! - 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\/elementor-responsive-101-all-you-need-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Responsive 101: All You Need to Know! - Academy","og_description":"Overview Transcript Overview In this tutorial, we will go over the responsive features and options in Elementor. We\u2019ll review the basics of responsive design, and optimize a website\u2019s header, content, and footer, using Elementor\u2019s responsive section, column, and widget settings. This tutorial will cover: \u2714\ufe0e Responsive features \u2714\ufe0e Responsive menu \u2714\ufe0e Responsive font styles \u2714\ufe0e [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/","og_site_name":"Academy","article_published_time":"2021-06-20T08:16:44+00:00","article_modified_time":"2023-02-22T10:19:45+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-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\/elementor-responsive-101-all-you-need-to-know\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Elementor Responsive 101: All You Need to Know!","datePublished":"2021-06-20T08:16:44+00:00","dateModified":"2023-02-22T10:19:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/"},"wordCount":1971,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/","url":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/","name":"Elementor Responsive 101: All You Need to Know! - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-1.jpg","datePublished":"2021-06-20T08:16:44+00:00","dateModified":"2023-02-22T10:19:45+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Responsive-101_-All-You-Need-to-Know-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/#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":"Elementor Responsive 101: All You Need to Know!"}]},{"@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\/1606","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=1606"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1606\/revisions"}],"predecessor-version":[{"id":9582,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1606\/revisions\/9582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4108"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}