{"id":1547,"date":"2021-06-17T12:53:05","date_gmt":"2021-06-17T12:53:05","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1547"},"modified":"2023-02-22T09:08:05","modified_gmt":"2023-02-22T09:08:05","slug":"making-your-sites-tablet-and-mobile-friendly-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/","title":{"rendered":"Making Your Sites Tablet and Mobile Friendly With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1547\" class=\"elementor elementor-1547\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4cd61543 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4cd61543\" 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-2578df32\" data-id=\"2578df32\" 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-54ed9286 elementor-widget elementor-widget-video\" data-id=\"54ed9286\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=DilH5rvTiS0&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-7ae80211 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ae80211\" 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-105401f4\" data-id=\"105401f4\" 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-27db331e elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"27db331e\" 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-6681\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-6681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-6682\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-6682\" 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-6681\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6681\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6681\" tabindex=\"0\" hidden=\"false\"><p>Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users.<\/p><p>6 Takeaways:<br \/>\u2713 Optimize and style navbar hamburger menus for tablet and mobile [PRO]<br \/>\u2713 Use Elementor\u2019s responsive settings to create device specific designs<br \/>\u2713 Control column width and alignment per device<br \/>\u2713 Use relative units that scale better on devices, such as EM and %<br \/>\u2713 Optimize your Global Fonts for different viewports<br \/>\u2713 Manage Motion Effects for tablet and mobile devices [PRO]<\/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-6682\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-6682\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-6682\" tabindex=\"0\" hidden=\"hidden\"><p>hi<br \/>and welcome to this elementor responsive<br \/>basics webinar<br \/>my name is ev and i&#8217;m a web designer and<br \/>elementals lead educator<br \/>and i&#8217;m really excited to help you use<br \/>the internet&#8217;s leading wordpress drag<br \/>and drop<br \/>site builder elementor this webinar will<br \/>give you a basic breakdown of<br \/>elementor&#8217;s responsive editing abilities<br \/>and show you how to use them creatively<br \/>to make sure that your sites look great<br \/>on tablet<br \/>and on mobile as well making sure that<br \/>your sites are mobile responsive is an<br \/>important part<br \/>of the build process and very important<br \/>if you want your sites to be successful<br \/>according to google responsive websites<br \/>perform better in search rankings<br \/>because they provide a better user<br \/>experience than sites that aren&#8217;t mobile<br \/>friendly<br \/>and they also like that mobile<br \/>responsive elemental sites<br \/>use single urls as opposed to different<br \/>urls for separate mobile versions of<br \/>websites<br \/>during the webinar we will work on this<br \/>pre-built spa service page<br \/>on a high-end hotel website it has only<br \/>been built for desktop<br \/>and it&#8217;s up to us to make sure it looks<br \/>great on tablets and mobile as well<br \/>we&#8217;ll do it step by step and along the<br \/>way i&#8217;ll introduce you to all of<br \/>elementor&#8217;s responsive settings<br \/>so you&#8217;ll get a practical understanding<br \/>of how to use them<br \/>and know what to look out for the next<br \/>time you work on your site it&#8217;s<br \/>important to know that the features and<br \/>settings we will go over in this webinar<br \/>can be applied to all types of websites<br \/>in different industries such as the<br \/>hospitality industry<br \/>restaurants software as a service<br \/>companies gyms<br \/>e-commerce and a lot more having a fully<br \/>responsive website<br \/>will help convert more potential<br \/>customers by reducing bounce rates and<br \/>improving brand perception<br \/>so what are we waiting for let&#8217;s dive in<br \/>and make a start<br \/>okay so this is the page that we&#8217;re<br \/>going to be working on<br \/>and what i&#8217;ve done is i&#8217;ve pre-built it<br \/>only for desktop<br \/>so you&#8217;ll see exactly what the tablets<br \/>and the mobile modes uh what they look<br \/>like<br \/>and you&#8217;ll see the same things that you<br \/>might come across when building your own<br \/>sites<br \/>what i&#8217;ll do is i&#8217;ll make mobile edits<br \/>section by section<br \/>and we&#8217;ll do it step by step and this<br \/>way you can<br \/>really see how you can control what your<br \/>visitors see<br \/>when viewing your sites on all of the<br \/>mobile devices<br \/>so let&#8217;s first check out the tablet<br \/>okay so elementor is very smart and it<br \/>makes sure that<br \/>it&#8217;s widgets they&#8217;re mobile friendly in<br \/>the header you can<br \/>see that the navigation turned into a<br \/>hamburger icon<br \/>and the button and the logo they already<br \/>resized a little bit<br \/>of course we can tweak it a lot more and<br \/>we can make it a lot better as well<br \/>which is what we&#8217;ll do<br \/>the headings and the call to action<br \/>widgets they also resize nicely<br \/>and also when we scroll down you can see<br \/>that the motion effects that are set<br \/>on the desktop they also work for the<br \/>mobile devices<br \/>and what we&#8217;ll do is we&#8217;ll also go<br \/>through all of these sections and i&#8217;ll<br \/>show you how to<br \/>uh to personalize and to make custom<br \/>layouts for each device<br \/>the same goes for mobile the tablet<br \/>screen is bigger than mobile<br \/>so you know by default they look a<br \/>little bit better<br \/>and you know as you can see the mobile<br \/>needs more tension so we&#8217;re going to be<br \/>looking at that<br \/>also in depth<br \/>all right so let&#8217;s make a start<br \/>go ahead and click here to edit the<br \/>header first<br \/>and for for the desktop the nav menu<br \/>displays all of the pages on the site<br \/>but when we want to go to the tablet<br \/>you can see that it changes to the<br \/>hamburger menu<br \/>and when you click on it you can see the<br \/>pages but<br \/>out of the box it doesn&#8217;t it doesn&#8217;t<br \/>look good you can see that the font&#8217;s<br \/>too big and<br \/>things just don&#8217;t seem right<br \/>so the first thing that i&#8217;ll do is in<br \/>the editor i&#8217;ll open up<br \/>the hamburger menu so you can actually<br \/>see the changes that will make<br \/>so in the panel on the left what i&#8217;ll do<br \/>is i&#8217;ll go to the mobile drop down<br \/>section<br \/>and i&#8217;ll just set it to take up the full<br \/>width so<br \/>this way it basically stretches all the<br \/>way and<br \/>what we can do then is we can we can<br \/>align all of the menu items to the<br \/>center<br \/>so now all of the items they appear in<br \/>the middle<br \/>next what i&#8217;ll do is i&#8217;ll go to the<br \/>style tab and in drop down<br \/>because we&#8217;re busy working with the drop<br \/>down we can style it a bit<br \/>so you can see that by default the<br \/>topography is set to primary<br \/>and that is a global font a global font<br \/>is a predefined global typography style<br \/>that you can assign to text elements<br \/>anywhere throughout your site<br \/>and it&#8217;s very good to use them for fonts<br \/>that<br \/>you know you use on multiple parts of<br \/>your site because it saves time and it<br \/>allows you to work in a more structured<br \/>way i&#8217;m going to be delving into it very<br \/>soon<br \/>and when we actually go over the page<br \/>and you&#8217;ll also see how to make the<br \/>mobile responsive<br \/>so for now what i&#8217;m going to do is i&#8217;ll<br \/>change it to accent<br \/>and let&#8217;s move on to styling it some<br \/>more<br \/>i&#8217;ll scroll down and i&#8217;ll adjust the<br \/>vertical padding<br \/>which allows you to control the space<br \/>between the nav items<br \/>25 looks good and let&#8217;s also add<br \/>a subtle divider between them i&#8217;ll set<br \/>the border type to solid<br \/>and then give a subtle color<br \/>as a very subtle color just to<br \/>distinguish between the background color<br \/>and the divider<br \/>and i&#8217;ll just play around with the width<br \/>just a little bit<br \/>okay great now let&#8217;s preview this<br \/>okay i&#8217;m happy with this now let&#8217;s move<br \/>on to the toggle button<br \/>i&#8217;ll style it a bit so i&#8217;ll just give<br \/>the lines a color<br \/>and for the background color i&#8217;ll drag<br \/>the opacity all the way down<br \/>so it&#8217;s transparent next i&#8217;ll just<br \/>adjust the size a little bit<br \/>and that&#8217;s it<br \/>okay great so now we can move on to the<br \/>mobile<br \/>let&#8217;s check it out<br \/>the nav menu looks great too but the<br \/>mobile devices they are smaller in width<br \/>and in height<br \/>and you can see that the elements they<br \/>they aren&#8217;t aligned<br \/>so let&#8217;s go over some elemental settings<br \/>that you can use to create custom<br \/>layouts<br \/>that fix this so first of all for the<br \/>logo<br \/>what we can do is we can adjust the<br \/>width<br \/>and as you can see next to the width<br \/>there is a mobile device icon<br \/>and this means that the value that we<br \/>set for the width that will only be<br \/>applied to<br \/>mobile devices and we can do that for<br \/>the desktop and we can do that for the<br \/>tablet as well<br \/>there are many settings that have these<br \/>device icons<br \/>which we&#8217;re going to be tweaking<br \/>together during this webinar<br \/>but it&#8217;s very important to remember that<br \/>when you change<br \/>settings that don&#8217;t have these device<br \/>icons it will basically affect<br \/>the layout and the design of all of the<br \/>devices<br \/>so also the desktop and also the tablet<br \/>just keep that in mind<br \/>and also keep a lookout for these device<br \/>icons<br \/>okay now let&#8217;s align the logo<br \/>i&#8217;ll align it to the center again this<br \/>change is only going to be affected on<br \/>mobile devices because it has a device<br \/>icon next to it<br \/>let&#8217;s move on to the second column<br \/>by default it appears under the first<br \/>one because<br \/>and not next to it because on mobile<br \/>devices there&#8217;s not enough space<br \/>another cool responsive feature that you<br \/>can use to adjust<br \/>your layouts is the horizontal and the<br \/>vertical align<br \/>they allow you to align all of the<br \/>content in a column so there&#8217;s no need<br \/>to add<br \/>you know redundant padding if you use<br \/>these settings<br \/>for this design i&#8217;ll just set it to<br \/>center<br \/>also i&#8217;ll link a video in the<br \/>description below about all of these<br \/>options<br \/>okay let&#8217;s check it out<br \/>great now the header looks great on<br \/>mobiles as well<br \/>let&#8217;s go back to desktop<br \/>and we&#8217;ll make a start editing the page<br \/>also don&#8217;t forget to save the changes<br \/>when you&#8217;re moving on to<br \/>editing another side part<br \/>okay so let&#8217;s start off with the first<br \/>section<br \/>i&#8217;ll check it out on tablet<br \/>which looks good so i&#8217;ll just leave it<br \/>as is<br \/>next i&#8217;ll go ahead and preview the<br \/>mobile view<br \/>which looks good too and soon i&#8217;ll show<br \/>you<br \/>exactly how to adjust texts for your<br \/>designs we&#8217;ll delve into that<br \/>so you&#8217;ll see exactly how to fine-tune<br \/>your designs for these devices<br \/>first i want to have a look at these<br \/>call to action widgets<br \/>and explain the column width concept<br \/>which is a powerful setting that<br \/>allows you to create custom layouts for<br \/>all of the devices<br \/>and as you can see over here on the<br \/>tablet it looks good<br \/>but having three of them next to each<br \/>other it does seem a little bit<br \/>cramped so we&#8217;re going to be fixing that<br \/>and<br \/>also on mobile it automatically<br \/>positions the column<br \/>under each other and we&#8217;ll fix that as<br \/>well because having three of them<br \/>might just be a little bit too much for<br \/>your mobile design<br \/>let&#8217;s go back to tablet<br \/>and instead of having three call to<br \/>action widgets next to each other<br \/>i&#8217;ll i&#8217;ll set to only show two<br \/>you can do that in the column settings<br \/>right now all three they take up one<br \/>third of the section&#8217;s width<br \/>and i&#8217;ll set the first column to take up<br \/>50 percent of the width<br \/>you can see that the second column still<br \/>takes up a third<br \/>i&#8217;ll set the second column to 50 as well<br \/>also<br \/>notice that there are device icons for<br \/>this setting as well<br \/>so these values they are only applied on<br \/>tablet devices<br \/>okay so now the question is what are we<br \/>going to do with the third one<br \/>another great feature that you can use<br \/>to control your designs<br \/>is responsive visibility and it allows<br \/>you to hide certain elements on specific<br \/>devices<br \/>i&#8217;m going to be doing this for the third<br \/>call to action widget<br \/>and of course you know this depends on<br \/>your site and its needs<br \/>for me all three call to action widgets<br \/>they have the same link<br \/>so it doesn&#8217;t affect it i&#8217;ll go to the<br \/>column settings because i want to hide<br \/>the entire column on tablet devices<br \/>and in the advanced tab i&#8217;ll go to the<br \/>responsive dropdown<br \/>i&#8217;ll hide this column on tablet and<br \/>mobile<br \/>as you can see it&#8217;s grayed out now<br \/>indicating that it&#8217;s set to hide<br \/>i&#8217;ll go ahead and hide the panel so you<br \/>can see<br \/>cool that looks a lot better for tablet<br \/>devices<br \/>okay now let&#8217;s check out the mobile mode<br \/>the third column is greyed out as well<br \/>for mobile i think having one call to<br \/>action widget is better<br \/>so what i&#8217;ll do is i&#8217;ll hide this column<br \/>on mobile devices only<br \/>great now let&#8217;s move on to the rotating<br \/>logo<br \/>which looks good on tablet<br \/>it also looks good on mobile and you can<br \/>always tweak your images just like we<br \/>did with the logo<br \/>in in the header just to fit your design<br \/>all right time to talk about texts<br \/>like i mentioned before we can control<br \/>what they look like on tablets and<br \/>mobile devices as well<br \/>you can see that the typography over<br \/>here is set to primary<br \/>which is a global font and we can click<br \/>here<br \/>to either give it a custom style and<br \/>also make sure it&#8217;s mobile responsive<br \/>by adjusting the settings that have the<br \/>device icons<br \/>but what i&#8217;m going to be doing is just<br \/>leave the global primary fund<br \/>because i use it for the majority of the<br \/>headings<br \/>on the site and this way<br \/>by making sure that the global primary<br \/>font is mobile responsive<br \/>i will only have to set it up once and<br \/>my texts they will be responsive<br \/>without having to go over them one by<br \/>one and set them up for tablet<br \/>and mobile which will save me a lot of<br \/>time<br \/>so i&#8217;ll go ahead and click to manage my<br \/>global funds<br \/>by the way if this concept is new to you<br \/>i recommend watching the global color<br \/>and fonts webinar<br \/>where i delve into all of the details<br \/>and show you how to create a design<br \/>system with them<br \/>i&#8217;ll also link it in the description<br \/>i&#8217;ll go ahead<br \/>and click on primary and let&#8217;s check out<br \/>the typography settings<br \/>as you can see the font over here is<br \/>empty and this<br \/>indicates that the current tablet size<br \/>is inherited from the desktop and this<br \/>is an important concept<br \/>if i click on desktop you can see that<br \/>it&#8217;s set to 60 pixels<br \/>so in tablet it&#8217;s still set to 60 pixels<br \/>and the same goes for mobile<br \/>this is the default behavior and<br \/>if we want we can change it i&#8217;ll just<br \/>make it a little bit smaller for tablet<br \/>and let&#8217;s check out the mobile now<br \/>you can see that on mobile it&#8217;s also<br \/>gotten smaller<br \/>this is because the mobile inherits the<br \/>tablet&#8217;s changes<br \/>that we just made and what i&#8217;ll do is<br \/>i&#8217;ll just<br \/>increase it again so it fits nicely on<br \/>mobile devices<br \/>it&#8217;s important to keep this hierarchy in<br \/>mind when you&#8217;re busy adjusting your<br \/>settings<br \/>and also to keep an eye out for these<br \/>empty values with settings that have<br \/>device icons<br \/>so you know where the default values<br \/>come from<br \/>now another cool thing to do instead of<br \/>manually adjusting these sizes for<br \/>tablets and for mobile<br \/>you can use a more responsive unit i&#8217;ll<br \/>go ahead and delete these values so you<br \/>can see<br \/>now let&#8217;s go back to desktop<br \/>and instead of pixels which is an<br \/>absolute unit i&#8217;ll change the font size<br \/>unit to em<br \/>which isn&#8217;t an absolute unit it&#8217;s a<br \/>relative unit<br \/>and they scale better between device<br \/>sizes<br \/>i&#8217;ll go ahead and set it to 3.6 to fit<br \/>my design<br \/>now let&#8217;s just see what happens in<br \/>tablet mode<br \/>and mobile<br \/>great it reduces the need to tweak them<br \/>all right i&#8217;ll go ahead and update to<br \/>save my changes<br \/>and go back to the editor<br \/>let&#8217;s continue with the section with the<br \/>video playing in the background<br \/>on tablets it looks good<br \/>but on mobile although it does play in<br \/>the editor<br \/>when i when i hide the panel you can see<br \/>that by default<br \/>it doesn&#8217;t play on mobile devices but we<br \/>can change that<br \/>the video itself is set to play in the<br \/>sections background<br \/>so i&#8217;ll just go to style and<br \/>over here we have the option to play it<br \/>on mobile<br \/>now playing videos on mobile devices<br \/>might not be ideal<br \/>because it does take up data to load it<br \/>and some visitors there might be limited<br \/>so in this case what we can do is we can<br \/>set the fullback image<br \/>to show instead of the video i&#8217;ll just<br \/>go ahead and choose this image<br \/>okay great now let&#8217;s go back to the<br \/>desktop<br \/>and continue with the following section<br \/>it has cool motion effects on both<br \/>columns<br \/>in tablet you can see that it works very<br \/>nicely as well<br \/>on mobile though it needs just a little<br \/>bit of adjusting which is what we&#8217;ll do<br \/>soon first let&#8217;s build another section<br \/>exactly like this<br \/>so you can see how i did it and<br \/>afterwards we&#8217;ll go<br \/>over some responsive options to make<br \/>sure that it stands out on mobile<br \/>devices as well<br \/>i&#8217;ll go ahead and drag an inner section<br \/>under it<br \/>and in the left column i&#8217;ll drag an<br \/>image widget<br \/>then i&#8217;ll go ahead and choose the image<br \/>and in the column settings and what i&#8217;ll<br \/>do is i&#8217;ll set the padding to zero<br \/>so the image fills up all of the space<br \/>and i&#8217;ll click on the image widget and<br \/>in the advanced settings<br \/>i&#8217;ll go to motion effect<br \/>now the scrolling effect works well here<br \/>and<br \/>what i&#8217;ll do is i&#8217;ll add a vertical<br \/>scroll<br \/>and set the direction to down<br \/>and reduce the speed a bit just so it&#8217;s<br \/>a<br \/>subtle animation what also do is set the<br \/>viewport between 20 and 60 percent of<br \/>the viewport&#8217;s height<br \/>so the animation starts and ends in that<br \/>range<br \/>if you are new to motion effects i&#8217;ll<br \/>link a tutorial covering all of the<br \/>basics<br \/>i&#8217;ll link that in the description there<br \/>really are<br \/>are many cool things that you can do<br \/>with motion effects to make your site<br \/>stand out<br \/>so be sure to check that out next<br \/>what i&#8217;ll do is drag a heading widget in<br \/>the right column<br \/>and i&#8217;ll change the text<br \/>and align it<br \/>i&#8217;ll also drag an icon list widget under<br \/>it<br \/>and just change the content<br \/>then i&#8217;ll just duplicate them and change<br \/>the texts as well<br \/>just to save some time<br \/>okay now let&#8217;s style it a bit<br \/>these options they also have device<br \/>icons so you can really get creative<br \/>when building custom layouts<br \/>now just like you saw with the image<br \/>widget we can also apply<br \/>these motion effects on entire columns<br \/>so<br \/>it applies to all of the content inside<br \/>it<br \/>and that&#8217;s what i&#8217;m going to be doing<br \/>over here<br \/>i&#8217;ll apply the same effect but in the<br \/>opposite direction<br \/>and for the viewport i&#8217;ll set it to<br \/>between<br \/>zero and fifty percent<br \/>okay now let&#8217;s just see the result<br \/>cool and let&#8217;s check it out on tablet<br \/>looks good<br \/>and on mobile<br \/>okay so there&#8217;s a lot going on as you<br \/>can see the image<br \/>and text they overlap because mobile<br \/>devices they have less space<br \/>in this case it would be best to just<br \/>disable the motion effects on mobile<br \/>and there is an option for that so i&#8217;ll<br \/>click on the image widget<br \/>and here i&#8217;ll just remove the mobile<br \/>so the effect is only applied on desktop<br \/>and tablet devices<br \/>i&#8217;ll do the same for the other image<br \/>pay attention that the motion effects on<br \/>the columns they&#8217;re still active on<br \/>mobile<br \/>and they don&#8217;t interfere with the user<br \/>experience so<br \/>you know if you want you can remove them<br \/>but i&#8217;m just going to leave them<br \/>also as you can see by default the<br \/>images they appear one after each other<br \/>on mobile<br \/>and sometimes you know this is not what<br \/>we want<br \/>and we can change this as well in the<br \/>section settings<br \/>what we can do is we can just go to<br \/>advanced<br \/>and then under responsive what i&#8217;ll do<br \/>is i&#8217;ll reverse the columns over here<br \/>it&#8217;s a simple fix that really comes in<br \/>handy when controlling the layout<br \/>which you can also apply to tablets<br \/>now let&#8217;s move on to the next section<br \/>with the texts<br \/>as you can see they look great on a<br \/>tablet and also on mobile<br \/>because earlier we already made sure<br \/>that the global primary font<br \/>is responsive okay next i want to just<br \/>show you how to style<br \/>your buttons and make sure that they<br \/>look exactly how we want on tablets<br \/>and on mobile devices<br \/>in the style tab you can see that the<br \/>padding<br \/>has device icons as well<br \/>now i&#8217;ll go ahead and i&#8217;ll just give the<br \/>button some custom padding for the<br \/>tablet mode<br \/>pay attention that only the settings<br \/>that have responsive handles can be<br \/>tweaked per device size<br \/>so for example if you change the border<br \/>radius<br \/>over here while you&#8217;re in tablet mode it<br \/>will also apply this change to desktop<br \/>and mobile devices because it doesn&#8217;t<br \/>have a responsive handle<br \/>in mobile mode you can see that the<br \/>padding has changed as well<br \/>it inherited the changes that are made<br \/>for tablet just like we saw earlier<br \/>and as you can see the padding values<br \/>they&#8217;re empty<br \/>it&#8217;s always good to pay attention to<br \/>this<br \/>okay let&#8217;s move on to the last section<br \/>of this page before we have a look at<br \/>at the footer over here what i want to<br \/>do is just talk about pixels and<br \/>percents<br \/>as you can see i added 20 padding to the<br \/>column<br \/>so the heading and the form widgets they<br \/>are positioned<br \/>nicely<br \/>but what i can also do is i can use<br \/>pixels<br \/>but i prefer to use the percent for the<br \/>same reason we saw<br \/>with the font size percentages are<br \/>relative units as well<br \/>and in this case it&#8217;s relative to the<br \/>column it&#8217;s in<br \/>so if i go to the tablet mode you can<br \/>see that it scales very nicely<br \/>and you know of course i can change this<br \/>to let&#8217;s say 25<br \/>and now if i go uh check out the mobile<br \/>you can see that the 25 is inherited<br \/>from the tablet mode<br \/>which in this case is a two match it<br \/>makes the form feels too small<br \/>which is uh which actually is bad for<br \/>user experience<br \/>so what i&#8217;ll do is i&#8217;ll just go ahead<br \/>and reduce it a bit<br \/>and this way there&#8217;s more clickable<br \/>space in the fields for<br \/>mobile users<br \/>of course you can play around with it<br \/>until you get exactly what you want<br \/>all right we are nearing the end of this<br \/>webinar all that&#8217;s left to do now is<br \/>just check out the footer<br \/>so let&#8217;s go ahead and do that<br \/>don&#8217;t forget to save the changes<br \/>first i&#8217;ll just go ahead and see what<br \/>the background video<br \/>what it looks like on tablets<br \/>and i think it looks good so there&#8217;s no<br \/>tweaking needed<br \/>okay so now let&#8217;s move on to the second<br \/>section which also looks good<br \/>but you might want a different layout<br \/>for tablet<br \/>so let&#8217;s just see how to make custom<br \/>designs for specific viewports<br \/>first what i&#8217;ll do is i&#8217;ll add another<br \/>section<br \/>above over here with one column<br \/>then i&#8217;ll duplicate this logo<br \/>and i&#8217;ll drag it here and what i&#8217;m<br \/>basically doing is creating an<br \/>additional section<br \/>uh with the logo that will be set to<br \/>only show on tablets and on mobile<br \/>devices<br \/>so this way they will have their own<br \/>layout and it won&#8217;t seem<br \/>too busy with all of the content on<br \/>smaller devices<br \/>the logo is a little bit too big because<br \/>it takes up all of the section space<br \/>so i&#8217;ll just reduce the width a bit<br \/>okay that&#8217;s good<br \/>and the next thing that i&#8217;ll do is i&#8217;ll<br \/>go to the section settings and in<br \/>advanced i&#8217;ll just go to responsive<br \/>and i&#8217;ll hide this new section on<br \/>desktop<br \/>so that the desktop still stays the same<br \/>now let&#8217;s go to the column with the logo<br \/>in the middle<br \/>and because we don&#8217;t want to see it on<br \/>tablets and mobiles<br \/>i&#8217;ll just set it to be hidden on them<br \/>okay so let&#8217;s preview and see what we<br \/>have so far<br \/>the new logo looks good but because the<br \/>middle column with the logo<br \/>is set to hide the other two columns in<br \/>the section they fill up that space<br \/>and they still get the one-third width<br \/>just like we saw earlier<br \/>so what we need to do to fix it is just<br \/>control the width<br \/>i&#8217;ll click on the first one and i&#8217;ll set<br \/>it to 50<br \/>and i&#8217;ll do the same for the other one<br \/>as well<br \/>okay let&#8217;s check it out again okay so<br \/>this looks<br \/>better but what we also should do is<br \/>just add some padding<br \/>on the sides just to make it fit a<br \/>little bit better<br \/>i&#8217;ll go to the section settings because<br \/>i want the padding to affect all of the<br \/>content in it<br \/>so in advance i&#8217;ll just unlink the<br \/>padding to set them individually<br \/>so this way i can add just padding to<br \/>the right and the left sides<br \/>okay that looks good now for the credit<br \/>sections<br \/>uh what i&#8217;ll simply do is just copy the<br \/>section that we just added the padding<br \/>to<br \/>and i&#8217;ll paste the style onto the credit<br \/>section<br \/>as you can see it automatically pastes<br \/>the same padding<br \/>which will save some time this works<br \/>well<br \/>but do keep in mind that it will also<br \/>paste all of the style<br \/>in the section so if you&#8217;ve added a<br \/>background color for example<br \/>it will copy that over as well which<br \/>might be something that you don&#8217;t want<br \/>i also just want to remind you that all<br \/>of the changes that i&#8217;m making over here<br \/>the changes that have the device icons<br \/>they will now be the default for the<br \/>mobile<br \/>because it inherits the changes that we<br \/>make in the device above it<br \/>the padding for example will now also be<br \/>the same for the mobile view<br \/>which i&#8217;ll show you soon now i&#8217;ll also<br \/>just add some margin to this section<br \/>just so there&#8217;s some space between them<br \/>great okay<br \/>now lastly let&#8217;s just move on to the<br \/>mobile<br \/>there are a couple of things that we<br \/>need to fix over here as you can see the<br \/>padding that we added to the sides<br \/>early in the tablet it&#8217;s applied here as<br \/>well<br \/>and it affects the content a bit and<br \/>makes it look a little bit<br \/>squished which we&#8217;ll fix soon<br \/>first what i&#8217;ll do is i&#8217;ll just increase<br \/>the logo so it takes up all of the space<br \/>moving on to the content i&#8217;ll align all<br \/>of it to the center<br \/>this will only be applied to the content<br \/>when it&#8217;s being viewed on mobile devices<br \/>i&#8217;ll go ahead and do that to all of the<br \/>widgets<br \/>okay let&#8217;s preview<br \/>so like i mentioned before the padding<br \/>on the sides it&#8217;s a little bit too much<br \/>and because this text over here is<br \/>longer than the rest<br \/>it breaks onto the next line so all we<br \/>need to do actually to fix this<br \/>is just adjust the section&#8217;s padding to<br \/>give it some more space<br \/>also i should add some space above the<br \/>contact details heading<br \/>okay so first let&#8217;s just go to the<br \/>section settings<br \/>and for the padding i&#8217;ll just set it to<br \/>zero so it&#8217;s all removed<br \/>then finally for the contact details<br \/>column<br \/>what i&#8217;ll do is i&#8217;ll unlink the margin<br \/>and only give it a little bit at the top<br \/>okay let&#8217;s check it out one last time<br \/>awesome everything looks great on mobile<br \/>as well<br \/>all right well that&#8217;s about it i hope<br \/>you learned a lot during this webinar<br \/>and have a better idea on how to<br \/>approach your website projects with<br \/>responsive settings in mind<br \/>this is just the tip of the iceberg<br \/>though and there&#8217;s so much more that you<br \/>can learn<br \/>elementor pro provides you with so many<br \/>tools to create highly converting<br \/>landing pages<br \/>and fully fledged websites such as the<br \/>form widget<br \/>motion effects that help bring your<br \/>pages to life just like we saw today<br \/>pop apps to keep your visitors engaged<br \/>and a theme builder<br \/>to visually customize your website&#8217;s<br \/>headers footers archive pages<br \/>single post pages and other areas of<br \/>your site and there&#8217;s a lot<br \/>more and the cool thing is that all of<br \/>these tools and features<br \/>can be tweaked to look great on mobile<br \/>and tablet devices really making your<br \/>site stand out<br \/>well that&#8217;s it be sure to join our<br \/>facebook groups for loads of helpful<br \/>tips and tricks and become part of a<br \/>huge elemental community full of<br \/>like-minded web creators<br \/>all helping each other become better at<br \/>what they do also<br \/>don&#8217;t forget to subscribe to our youtube<br \/>channel full of helpful tutorials and<br \/>inspirational videos<br \/>to help you master elemental and on our<br \/>website<br \/>check out the help center for easy<br \/>access to the knowledge base<br \/>faqs docs and a lot more lastly we will<br \/>send you a link to a survey<br \/>to give some feedback on this webinar so<br \/>we can improve them<br \/>and keep making relevant and to the<br \/>point webinars<br \/>feel free to share your creations<br \/>inspired from this webinar in the<br \/>comments below<br \/>so i&#8217;d like to wish you good luck and<br \/>most of all enjoy being creative<br \/>thanks for tuning in ciao for now<br \/><br \/><\/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 Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users. 6 Takeaways: [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4107,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,15,38],"tags":[47],"class_list":["post-1547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-responsive","category-top-picks-selection-webinars","tag-webinars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Making Your Sites Tablet and Mobile Friendly With 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\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making Your Sites Tablet and Mobile Friendly With Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users. 6 Takeaways: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:53:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:08:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-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=\"22 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Making Your Sites Tablet and Mobile Friendly With 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\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Making Your Sites Tablet and Mobile Friendly With Elementor - Academy","og_description":"Overview Transcript Overview Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to use Elementor\u2019s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users. 6 Takeaways: [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:53:05+00:00","article_modified_time":"2023-02-22T09:08:05+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Making Your Sites Tablet and Mobile Friendly With Elementor","datePublished":"2021-06-17T12:53:05+00:00","dateModified":"2023-02-22T09:08:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/"},"wordCount":5184,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-1.jpg","keywords":["Webinars"],"articleSection":["Design \/ Layout","Responsive","top picks selection \u2013 webinars"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/","url":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/","name":"Making Your Sites Tablet and Mobile Friendly With Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-1.jpg","datePublished":"2021-06-17T12:53:05+00:00","dateModified":"2023-02-22T09:08:05+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Making-Your-Sites-Tablet-Mobile-Friendly-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/making-your-sites-tablet-and-mobile-friendly-with-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":"Making Your Sites Tablet and Mobile Friendly With 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\/1547","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=1547"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1547\/revisions"}],"predecessor-version":[{"id":9589,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1547\/revisions\/9589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4107"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}