Just found this in 2021 and I'm here to say it's still an incredible video even now. Thank you! This really helped so much!
@debbiemurdock55443 жыл бұрын
Thank you! I just revisited using Divi again after not using it for a few years and I remember now why I was so frustrated with this builder I couldn't figure out how to get my changes to stick when I shifted among views. I didn't want to go in and put in media queries because I just needed to throw together a quick portfolio. Finally was able to make successful edits.
@niftyg33k2 жыл бұрын
A bit has changed in the interface since this was made in 2018. Now to get the tablet and mobile settings, you have to hover over the words of the design title (like the Margin title for example) for the phone icon to be visible so you can click it for the other options.
@sarahernandezcr Жыл бұрын
This video is so useful, thank you so much. I was so frustrated with the simultaneous changes for all devices, 4 years later and divi hasnt changed that setting
@marissaeze5 жыл бұрын
This helped me understand and better use the visual builder! I have watched a ton of tutorials about divi in the past few weeks and this one is the bees knees.
@ninaoglesby21334 жыл бұрын
Agreed! This video is one of my favorites as well.
@constantinbudt40553 жыл бұрын
Finally a video that doesn't have you buy some builder plugin. Awesome stuff helped a lot!
@louis71304 жыл бұрын
Thank you, Josh! Tried working through DIVI support and you explained what they couldn't in little time. .
@JoshHallco4 жыл бұрын
Glad to help, Louis!
@ThinkAboutItNow6 ай бұрын
Without your tutorial here Josh... this Divi theme is a NIGHTMARE! Thanks for the info about it NOT updating in real time when switching from desktop to mobile to phone. Why would they even have those icons at the bottom if they don't work in real time when you update? THANKS JOSH!
@JoshHallco6 ай бұрын
I agree...let's see what Divi 5.0 has in store for us soon!
@brianthomas80982 жыл бұрын
Hi Josh! Just found you in January 2022! This is very helpful, concise, and professional. Well done, young man! Well done!🥇
@HillyPlays2 жыл бұрын
So glad I clicked this video first! Great SEO, I was searching for this exact demonstration. I have worked with loads of page builders and divi is AMAZING, but I was stumped on this! It seemed so odd that such an intuitive visual tool would make my designs look like trash on mobile. Turned my bummer into excitement again!
@jennysjourney02 Жыл бұрын
Thank you so much, this is one of the best Divi videos I've been able to find. I'm working with a client so I'm new to it and had to learn it quickly.
@glenwoodfin5 жыл бұрын
Josh, I almost never use the Divi Visual Builder. Now, you've given me a powerful reason to put it into play. Thanks!
@mnburch3 жыл бұрын
Hi Josh. I don't take time like I should to tell you how much I appreciate all the Divi tutorials you produce. I've learned so much from your tutorials and am hoping you will keep them coming! Again, thanks so much!
@thedojocummingdojo729 Жыл бұрын
Thank you so much for this tutorial. I just took over our organization's website, and I've never used the Divi builder before. This is so helpful as I'm learning to navigate all the features.
@lesleythomas56572 жыл бұрын
This was seriously the most helpful video, blog post, etc. I've seen yet on this subject! Thank you!
@RichArtLove2 жыл бұрын
Hi Josh! - Need to use your/these skills now, but this Very Helpful tut is now nearly 4 years old - and it would be SO COOL if you would revisit this for 2022! Thanks!
@Clair_FireBird4 жыл бұрын
My favourite trick learning this was to realise I could create a completely different footer background for mobile devices :D
@stuartknox16215 жыл бұрын
Excellent video. I've recently tried watching other videos to try to understand this better, but I got bored quickly. Your explanations are simpler and straight to the point. I got what I was looking for within a few minutes. Thank you.
@davidflannery8876 жыл бұрын
Great Video. I was add different section that only showed desk top or phone. This will help speed things up. Thanks Dave
@bibekshaw2 жыл бұрын
Thanks a lot Josh! It's been 3 years but your video is still helpful.
@witchescrossing5 жыл бұрын
Hi Josh! I've gotta say...this tutorial is brilliant! Thank you so much for taking the time to create it for everyone who is trying to figure out how to navigate the ins and outs of Divi! I can't tell you how helpful this is! A+ explanation! 👍💯🌟🏆
@JoshHallco5 жыл бұрын
Thanks Robyn!
@witchescrossing5 жыл бұрын
@@JoshHallco ~ You're so welcome, Josh! 😊
@hochiminimal23453 жыл бұрын
I have watched hours of tuts and have a decent grasp of the builder but this vid really solidified all those hours together. Appreciate it man! :)
@MacAutomationTips4 жыл бұрын
Wow, thanks for this video. I was wondering how to do separate settings for the mobile views. Your instructions immediately solved the problem for me. I’m also going to learn some CSS in order to refine the customization more. Definitely subscribing to your site.
@JoshHallco4 жыл бұрын
Great to hear! Yeah a good understanding of CSS will be a game changer for you! If you're interested in my course on Divi and CSS, I'd love to help guide you to taking things to the next level. Use promo code CSS30 for $30 off when you're ready to join! joshhall.co/product/divi-css-course/
@adventurerealty75676 жыл бұрын
Josh, your video demonstration was spot on. Very easy to follow and with great detail, thank you.
@JoshHallco6 жыл бұрын
Thank you! Glad to hear it helped.
@PjSmith3 жыл бұрын
Josh - that is awesome! - Keep up these great tutorials - I'm just learning divi and it seems I can never find videos that are as clear as this is! Thank you!
@mnburch4 жыл бұрын
Short but sweet and full of good tips. Thanks!
@Gozycode-Academy3 жыл бұрын
Thanks for the cool tricks Josh! I agree the more I used Divi builder the more I love it.
@chloebanks42143 жыл бұрын
This was really helpful, better than others I found at clearly explaining - thank you!
@PTMarketingUK5 ай бұрын
Life Saver! Very informative and super intuitive tutorial. Thank you!
@slicesofamerica2 жыл бұрын
Jan 2022 - just found this. Perfect!!
@OK7studios3 жыл бұрын
Did they ever update this to your suggestion? To where when viewing and adjusting on mobile view automatically creates the custom css for that view?
@jeffmcmahan8055 Жыл бұрын
Elegant Themes needs to change the device option so you don't have to open each and every element or row to make changes for devices.
@NothingButAComment4 жыл бұрын
Make sure you SEE the mobile mode while editing!!!! When i click on the mobile icon in the settings it doesnt go into mobile mode automatically so i was making edits on desktop w/o realizing it. A quick fix is click on tablet, mobile, desk top until it starts changing between them automatically.
@toobafatima38043 жыл бұрын
Hey Josh, Great tutorial, really helpful, More powers to u dude!!
@lorimcnulty47714 жыл бұрын
You're a life saver, Josh! Thank you.
@hamidmghazi3 жыл бұрын
The preview on Divi looks fine after all the changes but it is messed up in the actual mobile devices. What is wrong?
@namazbekbekarysuly91126 жыл бұрын
Liked the video right in the beginning cuz man is really talking about my pain points
@LyubomirLalovMulti5 жыл бұрын
Just wonderful, I've been looking for "optimize emails for mobile devices" for a while now, and I think this has helped. Ever heard of - Jenevi Digital Duppy - (just google it ) ? Ive heard some amazing things about it and my m8 got great success with it.
@vinoddadlani4 жыл бұрын
Please make a full video for how to make a website look good in phone, tablet and computer
@scottoakley32063 жыл бұрын
Good job. To the point. I can't tell you how much I appreciate you and this tutorial!
@soul.rebel19864 жыл бұрын
I'm new to Wordpress and Divi this was very helpful thank you!
@TrishMeyer994 жыл бұрын
Great info. Thanks for the fast-paced tutorials too.
@ratfinder78124 жыл бұрын
Thank you for this video, it answered every question on that topic....
@leahs.6780 Жыл бұрын
3:00 is the reason I am here... thank you!
@makaylagrace60235 жыл бұрын
Thanks for the tutorial! I was talking with Divi support about this issue and they actually sent me to your video haha! Thanks for the help :)
@JoshHallco5 жыл бұрын
ha that's awesome. Good to know! Glad it helped :)
@denisebianco45834 жыл бұрын
It didn't work for me I still have the same issue. Not good Divi after all.
@reeld993 жыл бұрын
The problem is with Divi, even if it looks correct on the visual builder it doesn't translate to the mobile device. I also have the problem where it looks correct on the phone but then when I reload the page on the phone it changes back to the settings in the divi theme customiser mobile style.
@thebibleproof4 жыл бұрын
Great tutorial. Can you do more on vh and vw units, please?
@DavidCruz-wo9jn4 жыл бұрын
Hi: On my current version of Divi there is no phone icon to the right of the settings. There is a mobile icon above each of the settings which allows me to switch back and forth between desktop, tablet and phone. However when I change the settings after clicking on one of those view options, everything is affected including desktop.
@speedrunfantasychess4 жыл бұрын
Exactly! I'm using DIVI 4 and those icons and the desktop, tablet, smartphone tabs aren't there - basically all I can do right now I compromise text and heading settings so each device is "reasonable" - we all know how much developers love "reasonable" or "good enough" or "have to accept limitations" - argh!
@spiritspun48364 жыл бұрын
@@speedrunfantasychess I figured out that it was one of my plugins causing this error. I think it was the header/footer tag plugin. It might also be the minifying plugin. Once I got rid of it and switched to the Google tag manager it started working. I also had to go into the Divi panel under Divi > Theme Options > Builder > Advanced Use clear button for "Static CSS File Generation." I think in the current version of Divi the phone icon is to the right and appears when you mouse-over the right side of the design option.
@AlisonStreetDesigns2 жыл бұрын
Great detailed video. Thank You for posting.
@programmingchicago5 жыл бұрын
I don't see the mobile icon when I am in the visual builder and module setting. I don't know if they took it out, but the only way I can see it is in the back end, which makes it a lot more difficult. Any suggestions?
@JoshHallco5 жыл бұрын
It's on some elements but not all. That's probably it. Otherwise just make sure on the VB it's enabled in the settings. You can hide or enable certain elements.
@jeremiahdbecker5 жыл бұрын
@@JoshHallco Hover over the "padding" or "Margin" headers and the phone option will appear.
@_RezaTaheri2 жыл бұрын
You saved me a lot of pain!!! Thank you!
@leam48785 жыл бұрын
when i change stuff on mobile it changes on desktop too !!! i dont understand why :(
@peterramstedt62604 жыл бұрын
Sad to say but DIVI have some work to do before its ok.
@speedrunfantasychess4 жыл бұрын
Yep - same here! DIVI has some serious issues with this still and you can see the challenge. Some fine day we should be able to set the view in DIVI to phone, make a bunch of changes and those changes ONLY apply to a phone user. Right now, it's still compromise mode between devices. - Yech
@dylanvisser35524 жыл бұрын
same problem, i think its quite an issue.. after every change i make i first have to switch back to desktop mode and do every single change step by step like this
@rickcorley25924 жыл бұрын
It's kind of a pain but you have to select each layout individually, then (this is the critical step!) make your edits to each module on each layout, then save your work. You can access the layout you want to modify by hovering just to the right of the module name to bring up the menu selections.
@AslanaWellnessShaman4 жыл бұрын
Yes and other sites build it an go never have to redo phone and tablet. Divi needs to fix this it’s so awful I’m so mad I even went with divi
@MalindaBraggins Жыл бұрын
I really appreciate this tutorial! However, I am following the steps you did to adjust the text size and it's not working for me. It has been a while since this video was first made, is there some update to the builder that doesn't allow this? Or, some hidden "feature" that has to be adjusted? Or, new steps to get it to work? When I try to make changes in mobile view that also affect desktop view. So, frustrating!
@mjscorner22604 жыл бұрын
Hi. May I ask if this feature do covers all the breakpoints for smartphones, tablets and desktops? Thanks. :)
@thulierlaurent5 жыл бұрын
Thank you ! You saved me for a professional project. Have a nice day !
@eileenfleming11429 ай бұрын
Hey Josh, Is there an updated version of this topic? When I. make adjustments for mobile, I do not get the little device icon within the right side editor to make the adjustments only for the device. Divi is making the changes across all device layouts.
@ResedaMickey2 жыл бұрын
Isn't max-width in the builder now? I wish these Divi tutorials were dated or verision-numbered in some way. I keep watching tutorials then Divi helps says, "Oh, that's obsolete". INCLUDING THE TUTORIALS LISTED ON THE FRESH INSTALL APRIL 2022!!!!
@gunjangunjan75092 жыл бұрын
WOnder full ................best idea sir
@beforbes11754 жыл бұрын
This is the perfect builder ... if only it ever worked.
@davidwinter46274 жыл бұрын
Your totally right, I'm gonna ask them for a refund right now. I've been trying to build a mobile-friendly website it's sooo frustrating In the mobile view its good but when I open the site on my mobile browser it looks like Sh**.
@beforbes11754 жыл бұрын
@@davidwinter4627 I love when I get everything looking good, go to sleep and change nothing ...... and the next morning everything is off kilt again. Wait till THAT happens to you. You'll love it!
@davidwinter46274 жыл бұрын
@@beforbes1175 OMG!!! that's bad... really bad. I'm going to Elementor, have you tried it?
@beforbes11754 жыл бұрын
@@davidwinter4627 I have not. That said, I will soon. Can I swap everything Divi to Elementor?
@davidwinter46274 жыл бұрын
@@beforbes1175 I've made a quick search unfortunately you have to build everything from start to finish if you're switching :(
@kashish85414 жыл бұрын
this session was great.
@RebeccaDMusic5 жыл бұрын
This doesn't work for me. When I change the setting mobile it also changes desktop.
@JoshHallco5 жыл бұрын
Just be sure you select desktop,tablet or mobile then change whatever settings needed.
@dimasirvan85164 жыл бұрын
@@JoshHallco the setting will change in all mode, even when i editing the logo in mobile, set up for smaller size, and when back t desktop mode, the logo also change smaller...what we need is, the logo has to be responsive in size setting for each mode according to where we set up the logo. This cannot work in divi, can you help @Josh Hall
@billie-grant4 жыл бұрын
Thank you for the video it was helpful! Do you by chance have a tutorial that shows how to set an image to a different location within the mobile view? I would like the image on the right side to be above the image on the left side in the mobile view. Thanks again!
@vcr12323 жыл бұрын
hi, is there a way to disable the mobile view on phones/tablet? and force my site to load in desktop view every time?
@muhamadhamdanil17104 жыл бұрын
Thanks for the tutorial, this video is very nice and could helping me to solve my problem on my site in mobile view
@DylanSwain6 жыл бұрын
Awesome tutorial Josh!
@newmischell3 жыл бұрын
Thank you so much for your tutorials! You have helped me a lot!
@Pixiesister16 жыл бұрын
Fantastic. Thank you very much.
@astaarsitek64233 жыл бұрын
Now, Divi has a little change. But basicly same. But Thanks for the tutorial my friend
@joshallen-craig82264 жыл бұрын
The Sections > Design > Spacing > Mobile button is not there in September 2020. Any suggestions?
@StevedeGuzman4 жыл бұрын
Hi Josh. I dont see the 3 icons on my builder bar showing your left bottom. The one you click to see the layout wireframed in wysiwyg
@JoshLacey19864 жыл бұрын
For some reason I can't set padding or margin by device. Whenever I change it for one device, it automatically sets that for all devices. Any idea how to fix this?
@denisebianco45834 жыл бұрын
Same thing I can't make it work. If you find something please let me know. Thanks
@lauraelbertsen5 жыл бұрын
You sir, are the best!
@mueller.mediagroup2 жыл бұрын
great tutorial but with DIVI, it actually doesn't work very well with mobile styling unless you input custom CSS for everything. Using the DIVI panels when you set something for tablet, it makes the same changes for Desktop and vise versa which adds a lot of time in between tweaking. This has been a thing with DIVI for the last two years =/
@RafaelCasagrande5 жыл бұрын
Very thanks for providing this good content mate. Keep it up!
@cityotter4 жыл бұрын
Every time I go to optimize it for mobile, it changes the way it looks on a desktop, and vice versa. Why? It's really driving me crazy and costing me DAYS of work and frustration!!
@reece25674 жыл бұрын
Best thing is to get hold off customer support . I also have the same issue
@ojanneh4 жыл бұрын
@2:50 He actually mentioned that issue
@brittneylphillips4 жыл бұрын
@@ojanneh You're a lifesaver! Thanks!
@wutangclan115 жыл бұрын
Hi Josh! How do we automate all of the changes to be made across every heading etc.? It seems crazy to make these changes to every single heading etc. The changes will be virtually the same for every H1 / H2 etc. So how do we make the changes universal?
@JohnComley5 жыл бұрын
Brilliant tutorial, thanks. DIVI rocks.
@AslanaWellnessShaman4 жыл бұрын
I had to hire from Upwork a really cool guy from Washington. He has to change css coding and make all my pages look good on mobile. Cost me 80.00 but worth it than pulling my hair out. I have done much research since then and divi is full of bloated codes. But it’s either that or some wix thing or another and I didn’t want to do that. So if your stuck try posting an Upwork job to help you unless you want to learn css. They can go in and snap that together better. Also elegant themes does have good tech support but won’t do it all for you.good luck
@tarachugh3 жыл бұрын
This is exactly what I needed! Thank you sir!
@CharlesHutchinson6 жыл бұрын
Good stuff. Thanks for putting this together.
@alainpatry6 жыл бұрын
You put out really great tutorials Josh! I have a specific question that was not answered in the video so hopefully you know the answer! Had you had a more elaborate header (say fullwidth with title, subheading, header image, logo image. buttons, etc.)and it really looked like a mess on mobile. Perhaps its covering your face or something... when do you decide ok its too complex to tweak with CSS lets just create a duplicate fullwidth header and make it look the way i want on mobile using the Divi Builder and then toggle its visibility on for mobile only? I cant find people talking much about this. For example, if you DO use duplicates with toggled visibility, do both still load (and therefore have their assets counted as part of site "weight" and affecting load times)?? I was under the impression that I was seeing the "clone" flashing before dissappearing....
@JoshHallco6 жыл бұрын
Thanks, Alain. Great question - yeah I usually always prefer to customize with CSS for tablet and mobile opposed to duplicating modules and styling different for mobile. That's still a good option and I'll do that periodically, particularly if the design needs to be much different for mobile but I'm sure it affects load times. Regarding the header customizations, I know one new reputable plugin is the menu maker plugin from Superfly. besuperfly.com/product/mhmm-mighty-header-and-menu-maker/aff/274/ Might be worth checking out.
@Newtorin5 жыл бұрын
Great video! Can I use different icon sizes for desktop and mobile, that would be different versions of the same image?
@JoshHallco5 жыл бұрын
Thanks Karlis, yeah you could resize them for different screen sizes if it's in the Divi builder. If it's an actual image or graphic icon, I'd make sure to only use 1 and adjust it with CSS. Hopefully that answers the question!
@charlybtube2 жыл бұрын
Great content, thanks! Question: how do you set padding for different mobile's screen sizes since there is only 1 type of template per device (tablet or mobile) while multiple sizes of the screen are out there? 🤔
@sharksfan20114 жыл бұрын
Hi Josh, love your tuts and have followed for some time now. I used to be able to do this, but have Divi 4 now and none of this works. It is exasperting, especially when you have multiple sections and rows using negative margins and whatnot. If I change the mobile (like you say with the exact steps) it changes the desktop version as well. Have you been in touch with ET since 4.0 came out? This is so frustrating I want to pull my hair out. Thanks in advance for anything you can do as I'm guessing I'm not the only one.
@speedrunfantasychess4 жыл бұрын
I. COULD. NOT. AGREE. MORE. - none of the video tutorial works with DIVI 4 - why on earth would they scrap such important features - responsiveness is priority #1!!
@prestonstrada17404 жыл бұрын
Not sure if ya'll figured out the solution, but I believe I am using Divi 4 and if you hover your mouse next to the name of what you're trying to change, icons should pop up with a phone. For example, next to the words "Text Size" or "Line Height", if you hover next to that title the mobile icon will display for you to click. It's basically hidden and not to the right anymore like in the tutorial. Hope this helps.
@holdthatthought8775 жыл бұрын
This video is very beneficial. Do you have any videos on speeding up wordpress and DIVI. My site is wicked slow.
@JoshHallco5 жыл бұрын
Not yet but will add to my list. Here's a good resource in the meantime divi.space/tips-of-the-week/how-to-speed-up-your-divi-website/
@holdthatthought8775 жыл бұрын
Thank you @@JoshHallco
@mirandaallyn57313 жыл бұрын
This was amazingly helpful! Thank you!
@FactRod3 жыл бұрын
Sir i have a issue when i exit from visual builder websites looks completely different and it become totally misaligned
@JanineMKartist3 жыл бұрын
I find that the mobile preview in video builder never seems accurate . Can you please explain ? Also sometimes I fine even when I click , say smartphone to adjust settings it still messes with the desktop settings .what browser are you using ?
@vini_64364 жыл бұрын
Very nice video, i'm new with Divi and that really helped me, Thank you !
@chuckpalmer26164 жыл бұрын
Hi Josh. Thanks for the video -- well done! I've found that this technique works great for Desktop and Phone (in both portrait and landscape mode). But I'm having a real problem getting things to look good on a Tablet in landscape mode. It looks fine in portrait but as soon as an iPad is turned to landscape, everything is WAY off. The content padding and margins are off so much that the page content slides up under the fixed header and in some cases is squished together horizontally; the header menu turns from hamburger style and wraps around; and the footer content wraps off the bottom area. Have you run into this before and if so, how have you handled it? I see a 3rd party plugin called Responsive Helper just came out so I'm thinking of going that route if Divi tech support does not come up with a solution. I've got an open ticket with them now. Thanks again for all you do!
@andrewpressrecord1706 Жыл бұрын
Hi @Chuck Palmer, did you happen to find a best solution to your iPad problem? I'm having the same problem, 2 years later..
@charcoaldesign5 жыл бұрын
Great vid. Has the issue (as mentioned), whereby changes made in whichever mode you are in (mobile/tablet/d'top), been addressed in new versions of Divi?
@programmingchicago5 жыл бұрын
same problem here.
@baladocustomguitars736 жыл бұрын
Very good tutorial, awesome, thank you so much Josh, however I have a doubt, I tried to edit with the divi visual builder and did it with the footer of one of the pages to adapt the social media icons, and the problem is that the changes affected the desktop version, and have to redo again, Now I'm afraid of modify something and miss the desktop version that cost me much effort to do.
@callan53235 жыл бұрын
I'm a neophyte to the Wordpress/Divi designs and I have a question. After creating the website that can display on either a computer, tablet, phone etc. How does the browser know which device you're using so that it will select the web correct display?
@katrinkpunkt5 жыл бұрын
If you didn't find out by now - the code will be put into different sections with a hint for the browser which to use depending on size (there are different options for this), it's called a "mediaquery"
@AbdulShahid7 ай бұрын
Thank you, very useful video
@farhanmohsin41194 жыл бұрын
Your tutorial is amazing ......
@nemanjamarkovic98183 жыл бұрын
You saved my whole project mate, ty
@Ypunk273 жыл бұрын
Somehow my visual builder does not have the mobile icon next to the spacing dials. Can anyone help?
@jmillerdesign5 жыл бұрын
Your tutorials are better than what Elegant Themes puts out!
@stuartknox16215 жыл бұрын
Totally agree. I thought the Elegant Themes video confused me more. I understood this video easily.
@mrmanon20035 жыл бұрын
Hi ! Josh why i don't see the full image (album ) on smartphone these photos are not appear all ???thank you !
@carlyzel4 жыл бұрын
I regret paying for Divi. On mobile, my site is a mess too. I change the settings and it looks better. BUT.... The settings then apply to the desktop version too. It's like its a universal setting. The change you make to one version applies to all 3. So frustrating.
@st.armandskeylutheranchurc51103 жыл бұрын
Great video! For some reason the version of DIVI I'm using isn't showing the phone icon on the right in the custom padding section (or any section). Thoughts?