Thank you for these great videos. I've struggled for 8 years with a different theme. But with these vids I'm blazing my 3rd website and it happy and excited rather than hating working on my websites. Setting the sites up right from the start is making a huge difference. 🥰🥰
May i commend you Ziv on one of the best and informative video i have watched. Having worked on avada themes for nearly 10 years now I am starting to see the benefit of elementor 🙂
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.
This is very helpful. Thanks for making sure we can follow your pointer. I usually have to do multiple rewinds to figure out what just happened. Thank you.
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
@Gary agree with your thoughts, if you good with media Queries and you good with CSS couple of good hacks can save your time, like using %, not keeping width fixed. if have specific problem or issues will love to hear
@@jameseddithor2000 Thanks for the reply, I find that media queries in in the custom css gets a bit buggy with elementor and page builders. I am a mern stack programmer and from time to time when I get a wordpress dev, time is of the essence as clients are not prepared to pay for the development of a WP site, so speed and ease of use is imperative, its nice to have a straight forward control of media queries over all screen sizes and not having to get stuck into hacks.Biggest issue is the control as previously mentioned with the control of absolute positioning
@@gct2023 100%, I agree about position absolute, but there are ways to counter it, if you know your element is position absolute you should be able keep at centre of screen this requires skill set and experience, recently I created 100%=responsive site with custom shapes, like for which you can use clippath, or skew transform properties. More important is that is double if you look, if you need any assistance will love to help you ought 🙏
Outstanding! I like the pre-recorded format of your presentation. I also found it helpful when you showed a pop-out of the customizations you were selecting.
Hi Ziv, Thank you for slowing down your instruction. I love how exciting and energetic your website and some other tutorials are. However, for those of us who are still learning, the music and fast pace can be just too much. Everyone learns at their own pace to be sure...I personally like this style best! Thank you!
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?
Thank you, this video solved a problem I have been, racking my brain the last couple of days. On tablet view I couldn't remember how I made the column full width which I learned from another video and couldn't find it. Elementor is great but you have to go to too many settings to make changes. Again, Thank you.
You were a huge help with a school assignment! I have designed websites but making it for mobile was a little tricky for me. THANK YOU!!! Shout out to Academy of Art University! :)
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
Glad I found this. Really adds to my understanding of responsive editing. Wondor if you can comment on one thing: I am using free Elementor and Astra with its starter templates. First section on the homepage is a 2-column section. Columns are 50% each. Left col. has 3 headings. Right has an image. Image is fine on Laptop but both tablet and mobile squeeze it in left and right and up and down top and bottom so the 3 people have tall skinny faces. So far I can't fix it? There is also a background image for the section with an overlay. Thanks Brewster
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...
Can I use different menus for the mobile and desktop? Have a main menu on the mobile with all pages? While having two different menus using the same pages as the mobile?
The video is simple to understand and thank you for that. When I do what the video says on mobile or tablet mode it also changes the desktop version. I wonder if it is a bug in the new update or is it user error? Or is it because I do not have the pro version?
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 ; )
Thank you for the great information! I learned about some features that will help me with my desktop design in addition to the mobile/tablet responsiveness options.
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?
Hi @user-sn4vz4mr4l, thanks for your comments and question. Only settings with viewport icons can be changed for specific sizes. If a setting doesn't have a viewport icon next to it, changes will affect all sizes.
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.
@Dave, i have implemented solution to my client website and make sure that, these what ever image that they uploads fits in correct, I give client the min dimension to avoid, there is not higher resolution restriction
hey, i need to make a video autoplayed for mobile device, it works until the iphone is on low power mode, is there's a way to keep the video running while the phone is on low power mode?
Saying that there are "no tweaks needed" to every section, "because it looks good" doesn't help that much as for many of us it just doesn't look good and we'd love to see how to fix stuff. That's why we're here ...
GOOD AND BAD GOOD: You have exact control over padding and margins with Elementor to build your design on desktop, tablet, mobile BAD: 1. It takes three times as long to build a page using Elementor compared to other page builders who's columns and grids resize automatically and 2. Elementor needs more breakpoints 3. Elementor menu styling is lacking, needs to have the text Menu with the hamburger icon, needs to have slide in from side option for mobile devices like OceanWP theme does
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.
@Andrew Haberman hello Andrew if you good at css this should be very easy for you, lets say you are making multiple footer, just use diffrent classes parent one, based on that you can write css so it does not conflicts with other footer css.
at 7:32 when you show on mobile, lets say I want the hamburger no under the 1st one, but 1 want them together in the 2st one. Logo on the left and hamburger on the right. How do I do that? Thx
Hoping to find an answer here.... I am currently building a custom header with elementor pro but when i try to make edits to my mobile view (in Elementor), any changes I make there for some reason affects the desktop view and makes changes on there too. Is there a way to not let the mobile view edits create edits in the desktop/laptop/other view? Thank you
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 :(
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.
Here at 4:24 I don't see the alignment option in my version of Elementor. Is there a way I can center the drop down menu in the 3.6.7 version of Elementor? Thank you!
Thanks for this helpful vid. At 3:37 you're editing the Header. But what if that option is not available with my theme? I am using Nerko. I can't figure out how to access the header to tweak it properly for mobile. Also, when you have a row of images... how do you get them to not be like, left-justified? Having a bit of trouble. Thanks!
Hi MusicLessonsWithChris, if you're using your theme to control your header, you'll need to make adjustments to it from the Customizer (WP Dashboard > Appearance > Customize)
is this with elementor pro? because elementor free doesnt show the responsive button the same! and also when i make changes for mobile it changes things for desktop and vise versa. im getting a bit tired of it.
when i hide in desktop to update banner for mobile, it alway be change. I can not update banner of web and mobile separate. Could you make a video how to update in mobile and web detail?? Thanks do much
Hi there, none of the above was used. This effect was created by 2 separate images. The text that forms a circle is an image and has been positioned as "absolute" behind the logo. I set it to rotate on vertical scroll, and therefore you see the animation. I hope this helps
This tutorial was great. I do have an issue that I want to address. When I change the size for things on the mobile side for responsiveness. It sometimes edits the desktops version or can occasionally make it so the size won't change at all in one of the versions whether it be desktop, tablet, mobile. Is there a reason this is occurring. It's happening more often than not actually. Could this be related to the theme im using.
Hi Celestial, thanks for your question. This can happen with options that do not have a viewport icon next to them. Only options with viewport icons next to them can be adjusted separately for different screen sizes. See elementor.com/help/mobile-editing/ and ua-cam.com/video/EqFxeluk4U4/v-deo.html for more information.
Hello Ziv, thank you for the video. I have a question: can Elementor be used on pages not created with Elementor? Out website has Real Factory theme and was not build using Elementor. When I try to edit the pages, I cannot display the different sections (I mean the different text, images etc surrounded by the light blue border). Is that normal?
Hello, I've installed this plug-in and the style and design menu is lost, it say tou can find it in the "hamburger" menu, but is not, so I can't edit my wp site to be mobile friendly with this plugin, I decided to uninstalled
How do you fix vertical scrolling? My website doesn't scroll up or down in tablet or phone view. can someone tell me how to fix it? Tried elementor support but they are useless and this video doesn't really help me.
What I find difficult is issues with Smart Phones and Tablets, where the screen moves left to right and does not remain centered on the device when you thumb up or down the design moves showing white space. I have set media query correctly yet the screen on phones and tablets still move about.
I can't tell the difference between using pixel or EM on fonts. I know the pixel is an absolute unit and EM is relative to default font (16px) but in you video still looks the same between devices. When you set 60pixel (obviously) remain 60 pixel in tablet and mobile and when you set 3.6 EM remain the same dimensions in tablet and mobile. So how using EM reduces the need to tweak? It doesn't scale between devices, maybe you meant %.
Does anyone know why Mobile shows grated out header compared to Desktop and Mobile view header. Also, why is it preview on Elementor and Google Chrome different?
What about devices used in landscape mode? It looks like these options only apply to ipads and phones in portrait view. I get a different display with images when I rotate the device and I can't see how to make that work. Thanks
That is exactly my question. I had an theme that's no longer supported which handled it perfectly between portrait und landscape, even resizing. It breaks when I made the mistake to update WP recently.
In all my Elementor sites, it will not view in Elementor correctly in the Tablet format. Everything justfies to the left no matter what I do and the columns shift to left also.Any suggestions.
In the Elementor Editor in Tablet mode, Go through each layer one by one. Look for any setting with the Mobile Responsive Icon next to it. 9 times out of 10 this particular item is blank (i.e. no setting) which means it's inheriting whatever the setting is for the Desktop Mode. I find somethings just moving the slider or changing the value specifically for Tablet mostly resolves any issues like what you're describing. This is a weird behaviour in Elementor in that it 'secretly' inherits the desktop settings without showing an actual amount. Another example is font settings. You might use 'EM' as the sizing format for your fonts and have it set to 1.0. However, when switching to Tablet or Mobile mode & navigating to this same text, you'll find the sizing is set to PX with a blank setting!! Basically go over the steps mentioned above and see if it helps. Additionally check the advanced tab for your sections, columns & widgets in tablet mode & check if there is a large number for right side padding or margins...
So I'm following this tutorial now and having issues. I go and make an element invisible in mobile or tablet mode... and that makes it invisible in desktop mode. I fix this and make it visible in desktop mode... and it's back in tablet & mobile mode again. This is all through using the navigator.
Hi Strongarm, if you are using the eye icon to hide the content from the Navigator, this only hides this content in the Editor view. To hide the content on the live or preview website, select the element, and from the Advanced tab, expand the Responsive settings, where you'll see options to hide on different devices. Note that THESE settings apply to the live and preview website, but they will not be hidden in the Editor.
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.
Actually, I found the answer at 1258. I was creating three separate global fonts - one for desktop, one for tablet and one for mobile. But there is no need to do this. All you need to do is create the ONE global font and then set the size on that for desktop, then select the iconwithin that global font setting for tablet and set the size for that, and then the icon for mobile and set the size for that. Silly me!
I have my fingers crossed that you'll help us with the mobile performance and speed scores. Swiper is killing me with not being able to preload too. 🤯 Desktop has outstanding scores, but mobile is loading in 7-10 seconds.
@@jameseddithor2000 this is an issue on ALL of the Elementor Pro websites (I mostly use Hello theme). It's not on any specific domain, it's all of them.
@@LivingSeaSculpture I see why don't you use some standard practice that can help you, these will help you a lot. most of time for us its, like when fire catches in woods, we try to find water, if we take care of few thing while development this is going to help. I have learned form my mistakes, and added as these standards for development. I believe in quality work if we solve problems during development we get better product
In chrome browser, you can enter developer tools and then choose a custom screen size to preview your designs on different screen sizes. This is how I've been operating as there isn't an option in elementor itself to toggle between portrait and landscape for tablets as of now. Hope that helps!
what is the difference between creating home page in pages section v/s creating menu in appearance section? Are these two different things. Could you explain how. I installed astra theme. i guess it has header already. i creeated menu in appearance section. Now header from astra and my created menu section are coinciding i guess. Huge confusion. help
Hi Akshay, I believe you will find this course helpful in answering those questions. Good luck and let me know how it goes. ua-cam.com/play/PLZyp9H25CboH8b_wsNyOmstckiOE8aUBg.html
I do not understand why you remove the Tablet option now it is the only desktop and mobile versions, I can not optimize how my web page looks on a tablet
Hi Yervand, the Tablet option has not been removed from Elementor. However, the Elementor interface has changed slightly. Try typing Command or Control, Shift, M to go directly into Tablet mode.
I've noticed when using the "fit to screen" feature, it doesn't always translate on mobile devices, any suggestions for how to use this feature across all screen sizes?
most of the time it does, can you elaborate more in details that is rare, if you do custom way use image is background and use css properties like background-size : cover this should do it.
@@jameseddithor2000 Yes, I do use the "cover" setting. Everything looks fine in the editor, but in real world testing across different mobile devices (especially phones) the background image is either too short or too long. Another scenerio I've encountered once recently is the background completely disappears in mobile view (I have no special margins or paddings set, and as mentioned above, the size is set to cover).
@@co2la oh I see what you mean, I love to make solutions for such things, I was working on a website to create cutom shapes and manage in responsive these break points are of no use, and to manage position absolute in responsive is daunting task, But I have figured it out a way to do, I can create a custom solution to that, uploading image to if size changes its and client going to upload some random image with diffrent dimension it was a problem. if you can give me example on your one of the site I could help you.
![[01] Layout Optimization Best Practice](http://i.ytimg.com/vi/vBAKGupM0co/mqdefault.jpg)
Ziv, you do a great job with these tutorials...nice teaching style, and you don't skip over important steps. Thank you.
Thank you for these great videos. I've struggled for 8 years with a different theme. But with these vids I'm blazing my 3rd website and it happy and excited rather than hating working on my websites. Setting the sites up right from the start is making a huge difference. 🥰🥰
8 years ,,,,,??
May i commend you Ziv on one of the best and informative video i have watched. Having worked on avada themes for nearly 10 years now I am starting to see the benefit of elementor 🙂
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.
Excellent webinar! I have been pulling my hair out with this responsive issue. Now I can finish this project! Thank you!
This is very helpful. Thanks for making sure we can follow your pointer. I usually have to do multiple rewinds to figure out what just happened. Thank you.
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
@Gary agree with your thoughts, if you good with media Queries and you good with CSS couple of good hacks can save your time, like using %, not keeping width fixed. if have specific problem or issues will love to hear
Yes I agree the screen size of a desktop and laptop is very different!
@@jameseddithor2000 Thanks for the reply, I find that media queries in in the custom css gets a bit buggy with elementor and page builders. I am a mern stack programmer and from time to time when I get a wordpress dev, time is of the essence as clients are not prepared to pay for the development of a WP site, so speed and ease of use is imperative, its nice to have a straight forward control of media queries over all screen sizes and not having to get stuck into hacks.Biggest issue is the control as previously mentioned with the control of absolute positioning
@@gct2023 100%, I agree about position absolute, but there are ways to counter it, if you know your element is position absolute you should be able keep at centre of screen this requires skill set and experience, recently I created 100%=responsive site with custom shapes, like for which you can use clippath, or skew transform properties.
More important is that is double if you look, if you need any assistance will love to help you ought 🙏
@@jameseddithor6260 thank you I will definitely take you up on that
I have enjoyed the webinar. Few gold nuggets, which I will probably use, on my website.
Thank you for walking us through the process. It's so helpful!
Outstanding! I like the pre-recorded format of your presentation. I also found it helpful when you showed a pop-out of the customizations you were selecting.
Thank you so much for doing this tutorial.
Very clear and concise - thanks
Hi Ziv, Thank you for slowing down your instruction. I love how exciting and energetic your website and some other tutorials are. However, for those of us who are still learning, the music and fast pace can be just too much. Everyone learns at their own pace to be sure...I personally like this style best! Thank you!
Very helpful video. Have finally gotten to the point where I can ride comfortably with this video. Thank you.
Thanks Ziv. Very helpful.
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?
Thank you, this video solved a problem I have been, racking my brain the last couple of days. On tablet view I couldn't remember how I made the column full width which I learned from another video and couldn't find it. Elementor is great but you have to go to too many settings to make changes. Again, Thank you.
You were a huge help with a school assignment! I have designed websites but making it for mobile was a little tricky for me. THANK YOU!!! Shout out to Academy of Art University! :)
Wow! I'm happy we were able to help you with your school assignment 💯🤩🙌!!!!
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
You the best teacher ever
Glad I found this. Really adds to my understanding of responsive editing. Wondor if you can comment on one thing: I am using free Elementor and Astra with its starter templates. First section on the homepage is a 2-column section. Columns are 50% each. Left col. has 3 headings. Right has an image. Image is fine on Laptop but both tablet and mobile squeeze it in left and right and up and down top and bottom so the 3 people have tall skinny faces. So far I can't fix it? There is also a background image for the section with an overlay.
Thanks
Brewster
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...
Can I use different menus for the mobile and desktop? Have a main menu on the mobile with all pages? While having two different menus using the same pages as the mobile?
Thank you for this video! I just got a job as a web designer and they use this. This is a great video for beginners.
The video is simple to understand and thank you for that.
When I do what the video says on mobile or tablet mode it also changes the desktop version. I wonder if it is a bug in the new update or is it user error?
Or is it because I do not have the pro version?
did you find your answer ?
Ziv is such a great instructor :)
Wonderfully presented. Very concise and relevant. Thank you, sir.
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 ; )
Phenomenal tutorial Ziv!
Thank you for the great information! I learned about some features that will help me with my desktop design in addition to the mobile/tablet responsiveness options.
Please solve the header issue also, I made header menu and search it is ok with desktop mode, but it's not Mobile friendly
i second this! the header is huge on the mobile site and takes up half the page
Great tutorial! You went slow enough that I could easily follow. Will need to rerun a few times…LOTS of good info to absorb. 🙃
Always something new and helpful. Thank you
very nice brother from Pakistan
Thank you so much ! Very clear and informative.
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?
Hi @user-sn4vz4mr4l, thanks for your comments and question. Only settings with viewport icons can be changed for specific sizes. If a setting doesn't have a viewport icon next to it, changes will affect all sizes.
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.
@Dave, i have implemented solution to my client website and make sure that, these what ever image that they uploads fits in correct, I give client the min dimension to avoid, there is not higher resolution restriction
@@jameseddithor2000 but with an image format that only works on 1 device like pc. On the phone it shows a different size image
hey, i need to make a video autoplayed for mobile device, it works until the iphone is on low power mode, is there's a way to keep the video running while the phone is on low power mode?
Saying that there are "no tweaks needed" to every section, "because it looks good" doesn't help that much as for many of us it just doesn't look good and we'd love to see how to fix stuff. That's why we're here ...
This was super helpful! Thanks a lot! ;)
GOOD AND BAD
GOOD:
You have exact control over padding and margins with Elementor to build your design on desktop, tablet, mobile
BAD:
1. It takes three times as long to build a page using Elementor compared to other page builders who's columns and grids resize automatically and
2. Elementor needs more breakpoints
3. Elementor menu styling is lacking, needs to have the text Menu with the hamburger icon, needs to have slide in from side option for mobile devices like OceanWP theme does
Do you have a recommendation for other page builders?
@@momothevine Anyone leaving Elementor seems to go to either Oxygen or Webflow as less buggy and load much faster but learning curve involved
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.
@Andrew Haberman hello Andrew if you good at css this should be very easy for you, lets say you are making multiple footer, just use diffrent classes parent one, based on that you can write css so it does not conflicts with other footer css.
Hi , is there a media query we can use in custom css to target only mobile or tablet landscape?
at 7:32 when you show on mobile, lets say I want the hamburger no under the 1st one, but 1 want them together in the 2st one. Logo on the left and hamburger on the right. How do I do that? Thx
Such friendly and informative stuff.
Thanks
Thank you so much. Great video tutorials!
Hoping to find an answer here.... I am currently building a custom header with elementor pro but when i try to make edits to my mobile view (in Elementor), any changes I make there for some reason affects the desktop view and makes changes on there too. Is there a way to not let the mobile view edits create edits in the desktop/laptop/other view? Thank you
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 :(
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.
Can u tell me how to solve this problem bcz the same issue with me😢
Here at 4:24 I don't see the alignment option in my version of Elementor. Is there a way I can center the drop down menu in the 3.6.7 version of Elementor? Thank you!
AWESOME. THANK YOU!
Do you design for mobile first and then add content as you work on larger viewpoints?
excellent. Can someone help how to make the CTA like his. With the picture and arrow on thop?
Thanks for this helpful vid. At 3:37 you're editing the Header. But what if that option is not available with my theme? I am using Nerko. I can't figure out how to access the header to tweak it properly for mobile. Also, when you have a row of images... how do you get them to not be like, left-justified? Having a bit of trouble. Thanks!
Hi MusicLessonsWithChris, if you're using your theme to control your header, you'll need to make adjustments to it from the Customizer (WP Dashboard > Appearance > Customize)
Still a useful tutorial, thank you.
Thank you. Excellent help.
is this with elementor pro? because elementor free doesnt show the responsive button the same! and also when i make changes for mobile it changes things for desktop and vise versa. im getting a bit tired of it.
I loved this seminar
Any way to force the desktop view on mobile?
when i hide in desktop to update banner for mobile, it alway be change. I can not update banner of web and mobile separate. Could you make a video how to update in mobile and web detail?? Thanks do much
This is incredibly helpful and thorough. Thank you guys for your fantastic work!
there is a logo with animation - is it a gif or lottie file ?
Hi there, none of the above was used. This effect was created by 2 separate images. The text that forms a circle is an image and has been positioned as "absolute" behind the logo. I set it to rotate on vertical scroll, and therefore you see the animation. I hope this helps
This tutorial was great. I do have an issue that I want to address. When I change the size for things on the mobile side for responsiveness. It sometimes edits the desktops version or can occasionally make it so the size won't change at all in one of the versions whether it be desktop, tablet, mobile. Is there a reason this is occurring. It's happening more often than not actually. Could this be related to the theme im using.
Hi Celestial, thanks for your question. This can happen with options that do not have a viewport icon next to them. Only options with viewport icons next to them can be adjusted separately for different screen sizes. See elementor.com/help/mobile-editing/ and ua-cam.com/video/EqFxeluk4U4/v-deo.html for more information.
Elementor section in elementor 3.2.3 not responsive what an i do to fix it
Thank you so so much for sharing this masterclass with us. I really appreciate your effort, job and I so needed this... thank you so so much ... 🌙
Why use the same computer, different browsers to view, the position of the element is not the same? How should this be solved?
Hey please can i Force a Desktop View on Mobile Devices?
Hello Ziv, thank you for the video.
I have a question: can Elementor be used on pages not created with Elementor? Out website has Real Factory theme and was not build using Elementor. When I try to edit the pages, I cannot display the different sections (I mean the different text, images etc surrounded by the light blue border). Is that normal?
When I change view and edit its not saving. Any idea why? It was working. But now it's not.
Thank you very much 🎉
The screen resolution is completely different on desktop, laptop, and different mobiles even after optimization. I am stuck at this. 😓
this webinar was informative and enjoyable
how come your nav menu turned into 1 hamburger icon? my case is it turned into 5 hamburger icons for the 5 menus
Hello, I've installed this plug-in and the style and design menu is lost, it say tou can find it in the "hamburger" menu, but is not, so I can't edit my wp site to be mobile friendly with this plugin, I decided to uninstalled
How do you fix vertical scrolling? My website doesn't scroll up or down in tablet or phone view. can someone tell me how to fix it? Tried elementor support but they are useless and this video doesn't really help me.
ugh! wonder why the regular one doesnt work,. atleast on different laptop sizes, keeping the mobiles & tablets aside.
What I find difficult is issues with Smart Phones and Tablets, where the screen moves left to right and does not remain centered on the device when you thumb up or down the design moves showing white space. I have set media query correctly yet the screen on phones and tablets still move about.
I can't tell the difference between using pixel or EM on fonts.
I know the pixel is an absolute unit and EM is relative to default font (16px) but in you video still looks the same between devices.
When you set 60pixel (obviously) remain 60 pixel in tablet and mobile and when you set 3.6 EM remain the same dimensions in tablet and mobile. So how using EM reduces the need to tweak? It doesn't scale between devices, maybe you meant %.
Very informative tut. Helped me fix a mobile responsive issue. What's the name of the theme you are working with ?
Hello theme
Does anyone know why Mobile shows grated out header compared to Desktop and Mobile view header. Also, why is it preview on Elementor and Google Chrome different?
Why isn't there an option to add a link to a column??? I shouldn't have to add a plugin to do that
ty, i was struggling to find the way to fix my mobile adaptation
What about devices used in landscape mode? It looks like these options only apply to ipads and phones in portrait view. I get a different display with images when I rotate the device and I can't see how to make that work. Thanks
That is exactly my question. I had an theme that's no longer supported which handled it perfectly between portrait und landscape, even resizing. It breaks when I made the mistake to update WP recently.
In all my Elementor sites, it will not view in Elementor correctly in the Tablet format. Everything justfies to the left no matter what I do and the columns shift to left also.Any suggestions.
just please make sure you don't have cache issue or or plugins that you might have used for optimization.
In the Elementor Editor in Tablet mode, Go through each layer one by one. Look for any setting with the Mobile Responsive Icon next to it. 9 times out of 10 this particular item is blank (i.e. no setting) which means it's inheriting whatever the setting is for the Desktop Mode.
I find somethings just moving the slider or changing the value specifically for Tablet mostly resolves any issues like what you're describing. This is a weird behaviour in Elementor in that it 'secretly' inherits the desktop settings without showing an actual amount.
Another example is font settings. You might use 'EM' as the sizing format for your fonts and have it set to 1.0. However, when switching to Tablet or Mobile mode & navigating to this same text, you'll find the sizing is set to PX with a blank setting!!
Basically go over the steps mentioned above and see if it helps.
Additionally check the advanced tab for your sections, columns & widgets in tablet mode & check if there is a large number for right side padding or margins...
So I'm following this tutorial now and having issues.
I go and make an element invisible in mobile or tablet mode... and that makes it invisible in desktop mode.
I fix this and make it visible in desktop mode... and it's back in tablet & mobile mode again.
This is all through using the navigator.
Hi Strongarm, if you are using the eye icon to hide the content from the Navigator, this only hides this content in the Editor view. To hide the content on the live or preview website, select the element, and from the Advanced tab, expand the Responsive settings, where you'll see options to hide on different devices. Note that THESE settings apply to the live and preview website, but they will not be hidden in the Editor.
Just excellent! Thank you.
I'm glad it was helpful Jim!
@@Elementor can I do all this in the free version? please reply.
but my advance responsive visibility is not working
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.
Actually, I found the answer at 1258. I was creating three separate global fonts - one for desktop, one for tablet and one for mobile. But there is no need to do this. All you need to do is create the ONE global font and then set the size on that for desktop, then select the iconwithin that global font setting for tablet and set the size for that, and then the icon for mobile and set the size for that. Silly me!
Glad you were able to figure it out, R Leeds 🤩
Thank you !
I have my fingers crossed that you'll help us with the mobile performance and speed scores. Swiper is killing me with not being able to preload too. 🤯 Desktop has outstanding scores, but mobile is loading in 7-10 seconds.
can you share url may be i could see and help you
@@jameseddithor2000 this is an issue on ALL of the Elementor Pro websites (I mostly use Hello theme). It's not on any specific domain, it's all of them.
@@LivingSeaSculpture I see why don't you use some standard practice that can help you, these will help you a lot. most of time for us its, like when fire catches in woods, we try to find water, if we take care of few thing while development this is going to help. I have learned form my mistakes, and added as these standards for development.
I believe in quality work if we solve problems during development we get better product
Thank for for sharing this, my quick question, how can i make the 3 images to show on one line in the mobile version
Hi Precious Sunny, check out this video for more information on responsive design: ua-cam.com/video/EqFxeluk4U4/v-deo.html
Vídeo de tirar o chapéu
How about tablet & mobile landscape? That's where I struggle
In chrome browser, you can enter developer tools and then choose a custom screen size to preview your designs on different screen sizes. This is how I've been operating as there isn't an option in elementor itself to toggle between portrait and landscape for tablets as of now. Hope that helps!
you're a legend!!!
what is the difference between creating home page in pages section v/s creating menu in appearance section? Are these two different things. Could you explain how. I installed astra theme. i guess it has header already. i creeated menu in appearance section. Now header from astra and my created menu section are coinciding i guess. Huge confusion. help
Hi Akshay, I believe you will find this course helpful in answering those questions. Good luck and let me know how it goes. ua-cam.com/play/PLZyp9H25CboH8b_wsNyOmstckiOE8aUBg.html
I do not understand why you remove the Tablet option now it is the only desktop and mobile versions, I can not optimize how my web page looks on a tablet
Hi Yervand, the Tablet option has not been removed from Elementor. However, the Elementor interface has changed slightly. Try typing Command or Control, Shift, M to go directly into Tablet mode.
How to drag and drop elements in chrome android tablet
Thank you! I learned a lot.
I've noticed when using the "fit to screen" feature, it doesn't always translate on mobile devices, any suggestions for how to use this feature across all screen sizes?
most of the time it does, can you elaborate more in details that is rare, if you do custom way use image is background and use css properties like background-size : cover this should do it.
@@jameseddithor2000 Yes, I do use the "cover" setting. Everything looks fine in the editor, but in real world testing across different mobile devices (especially phones) the background image is either too short or too long. Another scenerio I've encountered once recently is the background completely disappears in mobile view (I have no special margins or paddings set, and as mentioned above, the size is set to cover).
@@co2la oh I see what you mean, I love to make solutions for such things, I was working on a website to create cutom shapes and manage in responsive these break points are of no use, and to manage position absolute in responsive is daunting task, But I have figured it out a way to do, I can create a custom solution to that, uploading image to if size changes its and client going to upload some random image with diffrent dimension it was a problem. if you can give me example on your one of the site I could help you.
Hi
Please make video about mini cart widget with popup in right or left when item added to cart in woocommerce .
It's so week