{"id":2099,"date":"2021-06-21T07:57:41","date_gmt":"2021-06-21T07:57:41","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2099"},"modified":"2023-02-22T09:26:52","modified_gmt":"2023-02-22T09:26:52","slug":"solving-responsive-web-design-challenges-with-elementor-monday-masterclass","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/","title":{"rendered":"Solving Responsive Web Design Challenges With Elementor &#8211; Monday Masterclass"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2099\" class=\"elementor elementor-2099\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5246594d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5246594d\" 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-6abd80a7\" data-id=\"6abd80a7\" 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-6726b197 elementor-widget elementor-widget-video\" data-id=\"6726b197\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=QfjI0ILFUVA&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-18122493 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"18122493\" 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-4cbb918a\" data-id=\"4cbb918a\" 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-284469d5 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"284469d5\" 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-6751\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6751\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6752\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6752\" 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-6751\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6751\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6751\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor. Tip #1. Responsive Design Begins and Ends With Correct Planning. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly. Tip #2. Positioning Elements for Mobile Responsive View When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view. Tip #3. Responsive Design: A Horizontal Approach Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along. Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page. Tip #4. Change \/ Position Background Image Certain background images, like that of the example below, may look great in the desktop view. However, it doesn\u2019t take much experience to see how it wouldn\u2019t work well when viewing the site on a mobile screen. Tip #5. Create Alternative Section As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.<\/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-6752\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6752\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6752\" tabindex=\"0\" hidden=\"hidden\"><p>advertising for mobile responsive<br \/>websites would have us believe that<br \/>adapting your desktop design to a mobile<br \/>screen is the easiest thing in the world<br \/>being 100% mobile responsive is one of<br \/>the most popular sales pitches for<br \/>WordPress themes templates and plugins<br \/>but as any professional website builder<br \/>will tell you in practice there is<br \/>rarely anything simple about it there is<br \/>no clean-cut<br \/>one-click transition from desktop to<br \/>mobile screen in fact the actual process<br \/>has little to do with click or pressing<br \/>buttons and far more with making the<br \/>right decisions some elements have to be<br \/>realigned or changed others completely<br \/>removed sometimes you&#8217;re forced to build<br \/>an alternate section specifically for<br \/>mobile or tablet devices making sure<br \/>your site is mobile-friendly is becoming<br \/>more and more critical to generating and<br \/>expanding traffic as Google continues to<br \/>progressively shift more focus on mobile<br \/>first indexing a term referring to how<br \/>Google predominantly prefers the mobile<br \/>version of your content for indexing and<br \/>ranking so let&#8217;s see what the major<br \/>challenges are when making your site<br \/>mobile responsive and learn the best<br \/>ways to avoid or solve those challenges<br \/>here we have a standard section with a<br \/>paragraph of text looking exactly the<br \/>way we intended to on our desktop the<br \/>paragraph text has been set with 200<br \/>pixels of padding on both left and right<br \/>sides which is fine until we test the<br \/>design on a mobile screen using the<br \/>mobile option in responsive mode and see<br \/>this yes not exactly what the client<br \/>ordered so now I need to fix something<br \/>that could have been avoided if we had<br \/>spent a little more time earlier on on<br \/>planning the more forethought and<br \/>planning you can invest in the design<br \/>process the better you will be able to<br \/>anticipate the technical problems and<br \/>adjust your ideas accordingly correct<br \/>planning involves examining possible<br \/>problems as well as considering possible<br \/>solutions and preparing for them here<br \/>for example we should have considered<br \/>the fact that the scale of a mobile<br \/>Green is far smaller than a desktop and<br \/>even then every phone has a different<br \/>size screen so instead of setting the<br \/>padding in pixels we could set the value<br \/>of padding in percent so that the<br \/>padding will always remain the same<br \/>relative to the overall screen size<br \/>thanks to the responsive mode we figured<br \/>out that we should be setting the<br \/>padding to 17% and lo and behold now it<br \/>looks good on mobile to correct planning<br \/>also means having other solutions at the<br \/>ready<br \/>instead of tinkering with the paragraph<br \/>for example if we reset the values here<br \/>we could go into the editor of the<br \/>entire section and set its maximum width<br \/>to 750 pixels this eliminates the need<br \/>to add any custom settings that could<br \/>get fumbled in the mobile view while in<br \/>the desktop view it keeps the paragraph<br \/>contained in the box section which we<br \/>limited to 750 pixels notice that no<br \/>additional CSS code or responsive<br \/>customization was needed for either one<br \/>of these solutions so this is the first<br \/>guideline to follow planning is<br \/>essential try to make the design choices<br \/>that will help you avoid future problems<br \/>for your sites in mobile view this here<br \/>is a landing page for a therapist&#8217;s web<br \/>site many designers finished designing<br \/>the entire page first then get<br \/>frustrated trying to make the same<br \/>design work as well in mobile view<br \/>making all those small adjustments to<br \/>every element an easier way to go about<br \/>this is to use elementals functionality<br \/>to our advantage we should be designing<br \/>our views one section at a time as we go<br \/>along once we have the section looking<br \/>the way we want in desktop and mobile<br \/>views we can duplicate the section<br \/>column or widget and update the relevant<br \/>content let&#8217;s do the same for this<br \/>section by the way this also takes us<br \/>back to planning instead of completing<br \/>your work one view at a time we should<br \/>be making sure that each element works<br \/>duplicate it and reuse it as a<br \/>foundation to build the other similar<br \/>elements on the page in this next<br \/>example this back<br \/>which looks great in the desktop view is<br \/>obviously no longer suitable when<br \/>viewing the site on a mobile screen here<br \/>the designers solved the problem by<br \/>choosing a different background image to<br \/>appear only in the mobile view of the<br \/>site back in our therapists page I&#8217;m<br \/>going to select the section and in the<br \/>editor under the style tab click on the<br \/>device icon for the background image<br \/>I&#8217;ll select the mobile view click on the<br \/>image box to access our media library<br \/>select my new image problem solved<br \/>another solution would be to click on<br \/>the device icon for the position<br \/>settings and try the different<br \/>positioning centering options till we<br \/>get a focal point that suits our design<br \/>in the mobile view bottom line if your<br \/>images look weird in mobile view use the<br \/>options in the elements or editor to<br \/>adjust their position etc or replace the<br \/>image with one that works better with<br \/>your mobile design in this next example<br \/>one you&#8217;re probably very familiar with<br \/>we see a three column section with text<br \/>on mobile view this would look like<br \/>three boring rows of text so to solve<br \/>this challenge we decided to create an<br \/>alternative section solely for mobile<br \/>instead of showing text in three<br \/>paragraphs we created a slider for the<br \/>text which will only appear in the<br \/>mobile view what we did was hide the<br \/>slider section on the desktop view and<br \/>we can do the same here too in the<br \/>Advanced tab in the responsive section<br \/>under visibility and we do the same to<br \/>hide the regular text section from<br \/>mobile view this lesson is simple but<br \/>important don&#8217;t get stuck on the notion<br \/>that everything must be exactly the same<br \/>on all views get creative and explore<br \/>alternative ways to display your content<br \/>on mobile now pop-ups are an obvious<br \/>challenge in mobile view what we&#8217;ll be<br \/>doing this time is making sure that my<br \/>nice pop-up only appears in the desktop<br \/>view where it looks good then I can<br \/>create an alt<br \/>pop-up better suited to a mobile screen<br \/>that will appear as a strip running<br \/>across my site and define it as a sticky<br \/>area I&#8217;ll set this pop-up to open only<br \/>on mobile<br \/>and this pop-up to open only on desktop<br \/>when designing for mobile view think<br \/>mobile some elements need to look<br \/>completely different to achieve the same<br \/>goal<br \/>finally content another troublesome<br \/>challenge of responsive design for<br \/>example this button here reads download<br \/>now microcopy that would make no sense<br \/>were it to appear in mobile view we<br \/>could duplicate the text widget add<br \/>something more mobile appropriate like<br \/>get it now and only show this text<br \/>widget in mobile view similarly we could<br \/>use a big call me button and have it<br \/>appear only on mobile again this is<br \/>something that could be avoided back in<br \/>the planning what works on desktop view<br \/>doesn&#8217;t necessarily work on mobile view<br \/>and vice versa adjust your content<br \/>accordingly<br \/>so we&#8217;ve covered planning for<br \/>mobile-responsive views reusing areas<br \/>already customized for mobile adjusting<br \/>or replacing background images choosing<br \/>alternate elements redesigning elements<br \/>like pop-ups and adjusting content and<br \/>like we do every week there will be more<br \/>detailed explanations and insight about<br \/>all this and more in the article that we<br \/>publish together with this video let&#8217;s<br \/>recap we&#8217;ve seen the sorts of challenges<br \/>that arise when making the transition<br \/>from desktop to mobile devices we&#8217;ve<br \/>also seen solutions that we can employ<br \/>to deal with these challenges we hope<br \/>you enjoyed this week&#8217;s masterclass and<br \/>we&#8217;ll be back next week to discuss<br \/>another topic relevant to designers<br \/>marketers and developers working in a<br \/>wordpress environment so be sure to<br \/>click the subscribe button below and tap<br \/>that bell otherwise how else will you<br \/>remember to watch it on YouTube or our<br \/>mobile responsive site till then as<br \/>always we&#8217;d appreciate any comments<br \/>inside and any criticism that you may<br \/>have and obviously any helpful tips that<br \/>could help other users thanks for<br \/>watching<br \/>[Music]<\/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 examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor. Tip #1. Responsive Design Begins and Ends With Correct Planning. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[41],"class_list":["post-2099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>Solving Responsive Web Design Challenges With Elementor - Monday Masterclass - 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\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Solving Responsive Web Design Challenges With Elementor - Monday Masterclass - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor. Tip #1. Responsive Design Begins and Ends With Correct Planning. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T07:57:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:26:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.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=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Solving Responsive Web Design Challenges With Elementor - Monday Masterclass - 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\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/","og_locale":"en_US","og_type":"article","og_title":"Solving Responsive Web Design Challenges With Elementor - Monday Masterclass - Academy","og_description":"Overview Transcript Overview In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor. Tip #1. Responsive Design Begins and Ends With Correct Planning. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/","og_site_name":"Academy","article_published_time":"2021-06-21T07:57:41+00:00","article_modified_time":"2023-02-22T09:26:52+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Solving Responsive Web Design Challenges With Elementor &#8211; Monday Masterclass","datePublished":"2021-06-21T07:57:41+00:00","dateModified":"2023-02-22T09:26:52+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/"},"wordCount":1822,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.jpg","keywords":["Guides and Tutorials"],"articleSection":["Responsive"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/","url":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/","name":"Solving Responsive Web Design Challenges With Elementor - Monday Masterclass - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.jpg","datePublished":"2021-06-21T07:57:41+00:00","dateModified":"2023-02-22T09:26:52+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Solving-Responsive-Web-Design-Challenges.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/solving-responsive-web-design-challenges-with-elementor-monday-masterclass\/#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":"Responsive","item":"https:\/\/elementor.com\/academy\/responsive\/"},{"@type":"ListItem","position":4,"name":"Solving Responsive Web Design Challenges With Elementor &#8211; Monday Masterclass"}]},{"@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\/2099","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=2099"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2099\/revisions"}],"predecessor-version":[{"id":9520,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2099\/revisions\/9520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4111"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}