Making Your Sites Tablet and Mobile Friendly With Elementor

Join Ziv Geurts, Designer & Elementor’s Lead Educator, for a step-by-step walkthrough on how to use Elementor’s 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:
✓ Optimize and style navbar hamburger menus for tablet and mobile [PRO]
✓ Use Elementor’s responsive settings to create device specific designs
✓ Control column width and alignment per device
✓ Use relative units that scale better on devices, such as EM and %
✓ Optimize your Global Fonts for different viewports
✓ Manage Motion Effects for tablet and mobile devices [PRO]

Links mentioned in the Webinar:

Don’t forget to subscribe to our channel!

TIMESTAMPS:
00:00 Introduction
01:52 Site overview on tablet & mobile devices
03:30 Optimize & style the navbar hamburger menu for tablet and mobile
06:51 Tweak the header for mobile, device icons & alignment
09:30 Create device specific layouts using column width & responsive visibility
12:50 Optimize your global fonts for different viewports, understand default behavior & use EM to save time
18:28 Build a simple 2 column, text and image design & apply motion effects with mobile in mind
24:28 Tweak your buttons per device & understand the impact of changing values with settings that don’t have device icons
26:04 PX vs. % use relative units that scale better on devices
27:37 Applying Elementor’s responsive settings to create a custom footer layout for tablet and mobile

[patchworkbreeze]

This was helpful to me as I only now begin exploring what Elementor can do for my website. I will have to watch this more times as I work through trials of creating my website.

[lindajordan]

Always something new and helpful. Thank you

[samuelhaines]

Wonderfully presented. Very concise and relevant. Thank you, sir.

[margaritakazaryan]

i'm having issues with making it work for different types of tablets. Ipad looks great, samsung galaxy tab a7 lite looks horrible and I don't know how to adjust to it without ruining it for other resolutions...

[zunairah]

Elementor has this issue. What I set for desktop doesn't work on tablet or mobile. Especially if it is posts widget and I align the image of the post to the left and the excerpt to the right then the design will break on a tablet or mobile view. Please specifically include in your live session how to make posts widget responsive with different image and excerpt alignments.

[sachindeore]

Please solve the header issue also, I made header menu and search it is ok with desktop mode, but it's not Mobile friendly

[mtnpfi]

Thanks for this, Ziv! I do have a question though: when I turn the iPhone on the side ("widescreen"), the layout goes random. There is no option to control this, is there? Thx again for the tutorial (I know that they have upgraded the options meanwhile ; )

[KatherineArthurs-ks]

Thank you for this great video. It was very helpful. However, whenever I make changes to my desktop it changes my mobile - which doesn't look right on a mobile verse the desktop. Is there a setting I need to change?

[NoemiCooksTells]

Im having an issue when I try to change the formatting on mobile and tablet mode. Whenver I make a change on the mobile setting it also changes the desktop setting. Why is that? I tried it following your steps by switching responsive mode but it's not working.

[HEK-E]

thanks for this video....I'm no web designer and new to this but
why when i change it to tablet or mobile mode mine doesnt automatically convert my buttons into that hamburger drop down button?
thats exactly what I want...plssss help :(

[melissaw]

Nice tutorial! Does Elementor account for mobile devices being viewed in landscape mode? Particularly fixed header images become displaced in landscape view and there is no apparent option in the preview and editing to detect this. How can one check the landscape view when previewing and editing in Elementor? Are you able to advise on this?

[thepurpleufo]

Ziv, you do a great job with these tutorials...nice teaching style, and you don't skip over important steps. Thank you.

[gct]

Putting it out there to elementor, it would be an amazing feature if you could set multiple breakpoints not just a predefined three: desktop, tablet and mobile ( ie. 4 or 5 even 6 different media queries for increased control of media breakpoints.) . It would give us a lot better control over absolute positioning of elements in a design

[joykomolafe]

How about tablet & mobile landscape? That's where I struggle

[ctashlambert]

Hi, thanks for the video. Some questions I have:
1. Which is better/ easier for newbie? To make header and footer with the theme template (eg: Astra- Customize) or build them using Elementor?
2. I am playing around with Elementor, just curious how to make the menu like what you are showing in 03:50? When you click the Humburger Menu, the top section expends, Menu drops down and pushes the content bottom down too. Because I tried, it doesnt push the content down, instead the menu will cover the content below. What settings need to be done? Or how to do it? Appreciate the help, thanks =D

[EmilyLoveIL]

there is a logo with animation - is it a gif or lottie file ?

[rinleeds]

Rather than individually changing the fonts and colours for each of desktop, tablet and phone versions of a page, I want to use GLOBAL FONTS and COLOURS. When I apply a global font (like Roboto 24, weight 600) to desktop and then another global font (like Roboto 16, 400) to tablet and another (Roboto 12, 400) to mobile phone view - it does not stick! The last one I set overrides all the others and applies it to all of them. Has anyone found a way of using three different global fonts for each of the three views - desktop, tablet, mobile? I'm struggling. Hope you can see why I would want to do this - so that in the future, if I want to change the style of all pages at once (say on the mobile view), I can do that. Oh one other thing - If i do set the desktop view to a global font, and set the TABLET or MOBILE view to something else (a non global font) - even the desktop global font becomes unlinked!!! There must be something I am doing wrong. Surely it is crazy to allow only ONE global font that can only be applied across all DESKTOP, TABLET andMOBILE views rather than each one being able to have its own? Please help someone. I'm tearing my hair out.

[seanfernandes]

Hi, is there a media query we can use in custom css to target only mobile or tablet landscape?

[davemurphyNo]

The main difficulty I find with responsive design using Elementor is image sizes. What image sizes to set in Wordpress settings so that I am not serving oversized images on mobile and images display correctly on post archive as well as post archive on laptop and mobile . Using Smush/Tools/ detect and show incorrectly sized images shows up multiple incorrectly sized images. Text is relatively easy but image sizes seems a lot more difficult.

[dorabiam.online]

I have enjoyed the webinar. Few gold nuggets, which I will probably use, on my website.