- 26
- 151 441
DiviCoaching
United Kingdom
Приєднався 23 бер 2021
Welcome to DiviCoaching. I know there are a lot of tutorials out there but I still find when it comes to understanding the more fiddly quirks of building sites with Divi that sometimes a bit more information would be useful. I want to encourage those of you who know they really should be using and understanding CSS with Divi but find the prospect daunting and are not sure where to start. These are the main things that I will be covering in this channel. Please subscribe and please let me know any topics that you would like to see covered.
Get Your Website Up In Minutes With Divi Quick Sites!
Get Your Website Up In Minutes With Divi Quick Sites!
I have a first look at the new Divi Quick Sites feature which allows you to build a complete website with Divi with one click and in less than two minutes. Once built you can use the powerful Divi tools to customise the sire for your needs!
Get DiviFive Alpha: divicoaching.com/getfive
Get Divi: divicoaching.com/getdivi
My Presets Tutorial
ua-cam.com/video/aGYJ8eRF1fk/v-deo.html
My Global Colours Tutorial
ua-cam.com/video/Ze5PXqTX2MY/v-deo.html
00:00 Introduction
00:55 Install the Latest Divi
01:45 The New Divi Dashboard
03:41 Divi Quick Sites
04:56 Choose and Install a Template
06:16 Generate Your Website
07:11 View Your New Website
07:54 Exploring the Theme Builder
09:00 Changing Global Colours
10:19 Custom Post Body Template
11:47 Presets
13:04 Customiser Settings
14:00 Conclusion
I have a first look at the new Divi Quick Sites feature which allows you to build a complete website with Divi with one click and in less than two minutes. Once built you can use the powerful Divi tools to customise the sire for your needs!
Get DiviFive Alpha: divicoaching.com/getfive
Get Divi: divicoaching.com/getdivi
My Presets Tutorial
ua-cam.com/video/aGYJ8eRF1fk/v-deo.html
My Global Colours Tutorial
ua-cam.com/video/Ze5PXqTX2MY/v-deo.html
00:00 Introduction
00:55 Install the Latest Divi
01:45 The New Divi Dashboard
03:41 Divi Quick Sites
04:56 Choose and Install a Template
06:16 Generate Your Website
07:11 View Your New Website
07:54 Exploring the Theme Builder
09:00 Changing Global Colours
10:19 Custom Post Body Template
11:47 Presets
13:04 Customiser Settings
14:00 Conclusion
Переглядів: 532
Відео
FIRST LOOK: DIVI 5 PUBLIC ALPHA | Hands-On Installation and First Thoughts.
Переглядів 1 тис.Місяць тому
FIRST LOOK: DIVI 5 PUBLIC ALPHA | Hands-On Review & Setup Guide! Get DiviFive Alpha: divicoaching.com/getfive Get Divi: divicoaching.com/getdivi I am really excited to be having my first look at Divi 5, the latest version of Elegant Themes' flagship theme and builder! In this video, we'll dive into the public Alpha release and show you how to get up and running and have a preview of things to c...
How to Create a Sticky Divi Theme Builder Header with CTA Button
Переглядів 1,5 тис.9 місяців тому
Get DiviFive Alpha: divicoaching.com/getfive Get Divi: divicoaching.com/getdivi In this Divi builder tutorial I will show you how to make a fully responsive Divi header menu, complete with a "Call to Action" button. The header is also sticky and will shrink on scroll. I hope you find this a useful addition to my Divi Theme Builder tutorial collection. Happy header building! CSS Snippet Due to r...
From Zero To Hero With Divi Theme: The Settings Menu (One)
Переглядів 6819 місяців тому
Get DiviFive Alpha: divicoaching.com/getfive Get Divi: divicoaching.com/getdivi Do you want to go from Zero to Hero with the Divi WordPress theme and builder? In "Part Four" of this new Divi Theme tutorial for beginners series, I will introduce you to settings (gear) menu in the Divi Builder. I have had so many people ask me for more "getting started" content for the Divi theme and Divi Builder...
From Zero To Hero With Divi Theme: Structure - Sections, Rows, Columns and Modules.
Переглядів 84110 місяців тому
Do you want to go from Zero to Hero with the Divi WordPress theme and builder? In "Part Three" of this new Divi Theme tutorial for beginners series, I will introduce you to the basic structure of Sections, Rows, Columns and Modules. I have had so many people ask me for more "getting started" content for the Divi theme and Divi Builder and I am really pleased to be working on this "DIVI - Zero t...
From Zero To Hero With Divi Theme: The Divi Builder
Переглядів 62510 місяців тому
Do you want to go from Zero to Hero with the Divi WordPress theme and builder? In "Part Two" of this new Divi Theme tutorial for beginners series, I will introduce you to the "Divi Builder". I have had so many people ask me for more "getting started" content for the Divi theme and Divi Builder and I am really pleased to be working on this "DIVI - Zero to Hero" series. In this second tutorial I ...
From Zero To Hero With Divi Theme: Quick And Easy Install And Setup!
Переглядів 99610 місяців тому
From Zero To Hero With Divi Theme: Quick And Easy Install And Setup of the Divi Theme! Do you want to go from Zero to Hero with the Divi WordPress theme and builder? In "Part One" of this new Divi Theme tutorial for beginners series, I show you how to get Divi installed and set up on your WordPress webserver. I have had so many people ask me for more "getting started" content for the Divi theme...
Most Child Theme Templates Get This Wrong!!
Переглядів 91111 місяців тому
I first made a video about a Divi Child theme back in 2021. At the time I used the code that was recommended the most and is still found in the vast majority of theme templates and plugins that build a Child Theme for you. The problem with this approach is that it can cause lots of issues with caching, as it doesn't respect version control and hence tell a browser or server/cloud cache that the...
Host Google Fonts Locally in Divi
Переглядів 1,9 тис.Рік тому
Local hosting of Google Fonts on your website can be a great way to improve your website’s performance and user experience. When you use Google Fonts, the actual font file is hosted on Google’s server, which can slow down your website and negatively impact user experience. By hosting the font files locally, you can avoid this issue and ensure that your website loads quickly and smoothly. If you...
Using CSS "Outline" to see element structure in Divi
Переглядів 658Рік тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi *(at time of publication - check ET website for details) It is often hard to visualize how you have structured the elements on a page you have built with Divi, especially if you come back to a site some time after you have built it. Using a bit of CSS I show you in this video how to put an outline around rows, columns or any o...
Watch this before using background images!
Переглядів 4 тис.2 роки тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi Build a fully responsive row with image and text block in Divi the right way. Two column rows crop up on many websites built with the Divi Theme and Builder. Often there is text in one column and image in the other but it is trickier than it seems to make this work responsively and in a way that makes the image both SEO and ac...
How to Create a Responsive Transparent Menu Header with Divi Builder - Step by Step Tutorial
Переглядів 30 тис.2 роки тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi In this video I will show you how to make a fully responsive transparent menu header with Divi. I made a Divi theme builder tutorial over a year ago showing how to build a transparent Divi header menu and full screen header in Divi and it quickly became my most popular video to date. I have now fully updated this for 2022 to a...
Use Fluid Typography to Make a Responsive Blurb Row
Переглядів 5 тис.2 роки тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi Build a row with fully responsive blurb modules in Divi using "fluid type" Following on from a question on the Divi Users Facebook page, in this tutorial I show you every step of creating a a Fully Responsive Divi Blurb Row using Fluid Type! Everything is explained and all of the CSS is included below. There is a slight bloope...
Custom CSS - How and Where to Add to Divi
Переглядів 9 тис.3 роки тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi In this tutorial I'll show you the right ways to use custom CSS with Divi Unsure of the right place to put custom CSS in DIVI? Should you add it to the modules, rows or sections - or maybe to the page? What about the "additional CSS" section in the Customizer - and in the DIVI options? And do you need a Child Theme for Divi Cu...
Format Divi Text Module. Use CSS To Get Consistent Styles
Переглядів 6 тис.3 роки тому
Get the Divi Theme and Builder - 10% off* - divicoaching.com/getdivi Using CSS to get consistent styles when using the Divi builder Text Module How to use CSS to format text modules in the Divi WordPress Theme. Get consistent global text spacing in Divi Text Modules without having to create a new module for every heading level and paragraph which becomes a real chore. Use the included CSS snipp...
Using Divi Global Colors to Create a Dynamic Palette for Your Website
Переглядів 3,2 тис.3 роки тому
Using Divi Global Colors to Create a Dynamic Palette for Your Website
How to set Column Stacking Order on Mobile and Tablet - DIVI
Переглядів 7 тис.3 роки тому
How to set Column Stacking Order on Mobile and Tablet - DIVI
Create a Child Theme for Divi - FREE TEMPLATE & full installation guide. No plugin.
Переглядів 6 тис.3 роки тому
Create a Child Theme for Divi - FREE TEMPLATE & full installation guide. No plugin.
Side by Side Buttons in Divi (Part 2 - Responsive Options)
Переглядів 2,9 тис.3 роки тому
Side by Side Buttons in Divi (Part 2 - Responsive Options)
Side by Side Buttons in Divi (in one Row, all Evenly Spaced)
Переглядів 7 тис.3 роки тому
Side by Side Buttons in Divi (in one Row, all Evenly Spaced)
Vertically Center Content in Divi - in Columns and Sections and for Any Divi Module
Переглядів 12 тис.3 роки тому
Vertically Center Content in Divi - in Columns and Sections and for Any Divi Module
Another amazing tutorial! Thank you.
Thank you for watching and supporting my channel! 🩷
Thanks for posting this. So much better than creating individual text modules for everything. I've just created a brand new site to test this and am playing with the settings. I have noticed that for this code below I need to add !important for the margin-top in order for it to work. Haven't checked all the others yet but would you know why this is? The only thing I did differently was that I didn't make this into a Global Preset as you did - wasn't sure what that was for. I just added my-spacing in the individual text module CSS class box on the Advanced tab. Not sure if this is relevant. Thanks /* Sets default top margin for all text module items */ .my-spacing * + * { padding: 0; margin-top: 0.8em; }
The best way if looking at the !important tag is like a “trump card”. It forces the statement with the tag to overrule the normal rules of specificity. If the tag CSS is not working without it then have a look with the inspector in your browser and see which CSS is overruling yours. You can then make your selector more specific to make it work. If all that makes no sense have a read here. www.w3schools.com/css/css_specificity.asp
Thank you for this video. You have the best video tutorials on Divi ...your explanations are clear and succinct. I have been using Divi for a few years but learned quite a bit from this series! Really appreciate it!
That is very kind and great to hear. Really looking forward to getting going again as soon as possible as Divi 5 gets into a solid beta release!
I just want to take a minute to THANK YOU; it's been years that I should've gotten onboard with developing websites and YOU have made me see it in such a different way. I owe you not only my appreciation but my future winnings in Life! Thank You again, Gracias, Xie Xie y LChaim!!! 💫🍾🤘
Well that’s very kind. May your venture be fun and rewarding.
commended thank you for sharing your knowledge!
Welcome! Thank you for your support. More on the way with the roll out of D5.
i dont have sticky option
Hi. I'm sorry if you are not seeing this. The tutorial steps definitely work, but it is very easy to miss a step out. I suggest back tracking and working slowly through it again.
Lovely solution thank you!
You're welcome!
Always brilliant!
Well thank you Emma! 💖
hello and thanks for the wonderful tutorial! I have a problem, when I set the row profession to absolute, the height of the section is reduced to 0 although it remains reported as auto in the sizing options. I don't understand how to fix it, hope that someone can help me. Thank you from Italy
Thank you! That is correct. If you look at 18:00, I remove all padding and spacing from the section. Once the row position is set to “absolute” it no longer sits inside the section and as the section has no content, padding or margin the size will be zero. This does not stop the header working.
@@divicoaching thanks, I found the problem. In the last stages of the design, I had put a transparent color on the raw instead of simply eliminating the color. This compromised the transparency effect of the entire header
Really useful video, very easy to follow especially being able to copy and paste the CSS. Thanks
Thanks Oliver. It’s a bit of a complicated one and probably won’t work perfectly for you but hopefully gives a steer and gives an idea of how it all works.
Hope to see more updates from you. =)
Yes more coming as soon as Divi 5 is ready for production sites. Very soon I hope!
Excellent, thank you!
Welcome. I think it is still.a bit flakey adding multiple fonts and weights. Might need to go one at a time...
Great channel! I just subscribed! Good to see that you continue after 8 months of pause.
Thanks for the sub! I've been waiting for V5 so hopefully full speed ahead again soon.
Very helpful! Subcribed! The only negative issue about the Divi Theme is that you need too many CSS workarounds for even simple things (like column widths). I sent them so many feature requests to add features in settings to replace these workarounds, but they ignore it. E.g. Elementor (which I hate becaise of so many flaws after updates) does that better.
I have actually been ignoring the emails from ET about "Quick sites for" whatever theme they pump out that week, thinking Quick Sites was a paid for add-on like their AI add-on. So thank you for doing this video! Looks like it should save a good bit of time :) Has their AI stuff got any better? I tried it some months ago and didn't find it particularly helpful (or value for money). I'm actually finding asking ChatGPT directly better help, haha.
Wow this is excellent and so clear to follow. Thank you very much for the video.
You are fast becoming number one fan! Thank you.
Really well produced video, very informative and expertly delivered! I shall be eagerly following the Divi 5 Tutorials sat like a praying mantis awaiting every update. Many thanks for posting KP
Oh - thank you for your kind words! I was a bit worried as I threw this one together pretty quickly, and then once I'd watched it a half dozen times it's hard to know if its doing a decent job.
I learnt a lot from this. I’m surprised you don’t make a tutorial on Udemy.
It's on the list but at the moment I still have a full-time day job and its going to take some time to put together. The plan is to retire next year and then I'll be able to focus on producing more.
Wow there’s one depth here. An excellent solution. I’d not heard of the clamp statement.
Definitely worth having a play with this.
Thanks for posting this looking forward to what you produce next.
More to come!
Hey. Thanks for this awesome video. Can you help me, on mobile the sticky menu disappears when i open the hamburger and closed ist. I don´t have any idea how to fix it.
Hard without being able to have a look. Is the URL visible?
@@divicoaching yes. but i cant send you. kgs goldstrasse de
Looking forward to your Divi 5 tutorials.
Very useful I love your clear instructions and that you don’t go too fast.
Thank you!
Excellent tutorial. Thank you.
Thank you. I will soon be starting again with the Divi 5 version. Keep an eye out…
@@divicoaching I most certainly will thank you.
Thank you very much an greetings from germany.😀
You are welcome! Prost 🍺
Good, quick overview. I have been waiting a bit before getting stuck into it but going by the amount of Divi 5 How To emails coming from ET recently, I presume they're gearing towards a launch sooner rather than later. On another channel, they showed a comment on a post somewhere from ET suggestong it could only be 2 to 3 months before the launch it 🤔. Does that seem likely to you?
Thank you! I hope so but the Alpha still has quite a bit of functionality to tidy up. I am having to stop myself making more at the moment as I really don't think people should be trying to make sites with it at all yet. All very exciting though.
Great to see you back! It's been a while but I guess you have been waiting for V5 to be fully released.
Welcome! Yes, there are others that are coming on with more detailed V5 demos, but it is still really early days with the Public Alpha and I will start producing full tutorials once we at least get into Beta.
Thanks... This work 👍
It does!
I've been using Divi for years and some of the simple features and their reasoning here have never been explained to me before. It makes it all come together. I hope you can continue the series. Probably waiting for version 5 to come out now lol.
Thank you. And yes, it seems silly to keep going only to have to re-make everything for 5 so I'm going to hang fire. Will probably re-make 1-4 now and hope the alpha is stable enough to keep going...
@@divicoaching Right, that will be interesting. It seems that unless you're accredited html-css expert a lot of Divi is a black box to you if you're just some guy out there learning things through books and videos. A good understanding of the structure of a page is important, which you don't get a lot of out there, but I can see you're trying to provide.
I've been using Divi since 2018 and honestly Paul, this is the first complete tutorial on Divi I have seen. I got this so my wife can start learning Divi from the ground up. Thank you.
Oh thank you. I've had to stop until v5 is out properly as I can't invest the time to finish the course for v4. Hang in there!
As usual, your tutorials all feature a tad of CSS. Have you considered doing a tutorial series on CSS?
Hi Michael. Yes I have! The problem I have currently is that I still have a day job and lots of videos I want to make. I have fleshed out a plan for a CSS deep dive series and would love to get this made. I have stopped making for a bit as there is not much point me making Divi4 tutorials but need 5 to be fully released to make the switch. Hopefully CSS will be a 2025 project when I am hoping to semi-retire and focus on teaching.
thank you very much kind sir you just resolved my problem
It's a bit of an old chestnut this one but glad it is still useful!
Instead of changing CSS in two different places, you can do it all in the first step by adding a third line: display: flex; flex-wrap: wrap: flex-direction: column-reverse; Just make sure you do these settings in the Tablet option, not Desktop or Mobile.
Thanks for the tip. As ever with CSS there are many ways to achieve the same results.
Hi there! How can I hire you… this is so fantastic! But so hard to do… thank you
Hi. Hiring me is easy - just mail me - paul@divicoaching.com and let me know what you need.
Hi, I know, it's long time but did you notice that using the css code makes the icon on the button invisible? The icon appear only once. I have tried everything but with two buttons in one raw either one or the other has an icon visible....Cheers Patrick
Hi Patrick. I’ve not come across that. I’ll have a look. Probably the colour of the icon being affected.
@@divicoaching Hi, looks like it was a DIVI-problem itself. I have deleted the page and made it again but not changes. But next day everything is fine... 🙊 Thanks for the effort
Excellent even after 3 years, it looks very cool
Glad you like it!
Excellent video tutorial! Your explanations and demonstrations are super clear and so practical!
Thank you!
Thank you very much for this detailed video! Do we need to remove the code from functions.php after inserting the font files?
I would just comment out that section with a /* comment */ but you could remove it
what is the plug in called?
Plugin for what?
Wish I had discovered you and this video before needing to do workarounds for the issues you identified! Love your teaching style and I discovered many things I didn't know. Thank you
Glad this was useful.
Outstanding video - clear and still works 3 years later! Have subscribed. You are definitely clearer and more to the point than others I have been following. Thank you!
Thank you. Trying to get back and make more but really want v.5 out to save having to do it all again!
@@divicoaching Thank makes complete sense! It feels like a long time coming with how long ago we knew it was on its way
You are a legend sir! Thank you!
You are too kind! More coming once Divi 5 emerges from the wrappers…
Hello DiviCoach (?) haha. Just wanted to thank you for your awesome videos, they've really really helped me, like a lot haha. I'm not really new in Divi but you can ALWAYS learn new stuff and tbh you're one of the best tutors I've come around, very well explained and easy to follow tutorials. I hope you return soon and keep showing us all of your knowledge! Greetings from Mexico!
Many thanks for the feedback. It is much appreciated. I will be making more, but I wanted to wait until V5 is out. I have the beta and it is so much snappier. The UI changes mean I really do need to make videos based on the new version and will do so as soon as the public alpha arrives.
Thank you
Welcome!
Wonderful Tutorial! i need to give credit for this tutorial. Great result!
Thank you. Glad it was helpful!
Can you please remind me where to find the video on how to keep column rows even with buttons anchored to the bottom? I have looked, but cannot seem to find. Thank you!
This one.. Align Buttons in Divi Columns ua-cam.com/video/fmdt--2NzNU/v-deo.html
Hoy can I solve the Logo size in mobile and pinned? It looks so small and I dont see the option
In need a bit more info. Do you have a link?
Thank you for all your effort. I have seen many tutorials about DIVI but no one has actually been able to explain or solve the response problems. I really hope we can learn more from you here. Best regards from Tenerife
Thank you. I have more videos planned but ideally would like to make these for Divi 5 so I don't have to re-make them all. Making a site truly responsive is always hard with any page builder as there are so many different screen sizes to cater for. I would very much like to be in Tenerife at the moment!!
@@divicoaching always welcome here! 🍷
Thanks
Wow thank you! There is a bit of health warning with the global colours and some people have had issues with them in the odd place where Divi bakes the color into static styles. I find it is 95% good but if you change a global colour you need a good check through the site and might need to fix the odd item. You get the honour of being the first person to hit me with the "super thanks" 🙏. Much appreciated. I really don't know now whether to crack on with more D4 tutorials now or move to 5 and start getting everything ready for the release...
@@divicoaching Yeah, I'd say wait for D5 at this point. I noticed in a recent update they've just let us know about WP Manage style site updating also which looks very useful!
Ok. I'll have a look. I'm in the beta programme so have been playing with 5 for a while. Think I better do a "first impressions" video next. Anyway thanks and sláinte!
@@divicoaching Slán agat :) (have safety)