All Divi Modules Overview incl. CSS Tricks - Part 1
HTML-код
- Опубликовано: 7 июн 2024
- In this video I will demonstrate all Divi modules. I will also show you some tricks with the modules that I get the most questions about! This is part 1 of the 5 part Divi Modules series.
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi 10% discount ⇒ wp.discount/divi-discount/
✅ SiteGround 70% discount ⇒ wp.discount/siteground-discount/
✅ WP Rocket 10% discount ⇒ wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
All scripts and CSS snippets: 📜 wpressdoctor.com/divi-modules...
⏱️Timestamps⏱️
0:00 Intro
0:37 Accordion Module
5:42 Audio Module
8:34 Bar Counters module
12:18 Blog Module
16:10 Blurb Module
19:42 Button Module
22:50 Call To Action Module
26:41 Cicle Counter Module
30:29 Code Module
31:40 Comments Module
Thank you for watching, part 2 is here: • All Divi Modules Overv... 😀
✅For tips and tricks on getting the most out of Divi and WordPress, don't forget to subscribe: wpressdoctor.com/sub
📖Transscript📖
Hey friends, its the WPress Doctor here. And in this video, I'm going to take you by the hand. We are going to walk through all the Divi modules. I know there are a lot of modules, but I'm going to show you how I use them, and I'm going to answer the most asked questions about the modules. For example: "How can we get this blog module to line out perfectly?" And also: "How do I add this toggle button back into the accordion?" I'm gonna help you with that, its pretty easy. But because of Divi has so much modules, I will be making a five part series of this video. So buckle up, because part one is about to begin.
So the first module we're going to insert here is the accordion. Let's press this button, and here you can see that the accordion just already starts out. So what you will see is that you have two tabs right here, you can duplicate it to make more of them. And if you press on this gear icon, you can change your title and your description. So for example, let's ask this question: "what are your opening hours?" "We are open between 20:00 and 20:10 so you better be quick!". Don't forget, when you change the text press this 'Save Change' button right there. There are a lot of things you can change in this module. As you can see, you can change the borders, the titles, the text, the background, the icons, there's a lot we can do. So let's change the background color of the close toggles, and we're gonna make it this. Now we can't see our titles anymore. So we press on this brush, and we're gonna make it white. And then the background of the open toggles, let's make it also a bit lighter. Alright. Now we can't see this one, so we press on this brush, and we're going to make it with also. And then I want this title, I want it to be Poppins, its very popular font. And we're gonna make it a little bit bigger, but not that big. Alright so this is very clean. This is a little bit small, 14. So let's make it 18. You can see now you can change this all and you can of course change the icon. Change the icons used in the toggle. Uou can also change the icon font size to make it bigger or smaller. But I think this is all right. The most common question I get asked is: "Is it possible when people load the page that this one is closed on default? And how do we do that?" Well, it's pretty easy. There is no setting to do that. I think Divi will add it soon, but you just copy this one, just clone it. Go to the settings, change the title to Placeholder -that's only for you, so you know that there is nothing in there. You go to 'Advanced' - 'Custom CSS', and then we go to the main element and we type some CSS: display: none; And that's it! We press save this one. So now we have a placeholder who actually is open. But because we hidden it using CSS that works really awesome. Now another question I usually get is: "How do we get people to close it again, because when you open it, you can't close it anymore as you can see. There is no way to close this thing." Well, it's pretty easy if you know how, what you actually need for this is a little bit of script. So we close this one and we're going to add another module, the code module. And it's pretty useful to add some code. So in this example, we're adding some script. You can find this script in the description of this video....
📖 Read the rest of the transcript at wpressdoctor.com/divi/all-div...
#Divi #AllModules #WordPress
This is really helpful! Thanks! I and just starting out with Divi and I will surely go through the entire series and I think even come back for review a few times. :)
Hi Janette 👋🏻! Thank you so much for your kind words 😀👍🏻 I’m thrilled it’s useful for you! Feel free to comment and ask questions 🙂 Have a awesome day!
Extremely helpful. Thanks.
Hi there! Thanks for the kind words, I really appreciate it. You are very welcome! I’m glad you liked the video and the style. More great videos are coming so stay tuned 😀👍🏻 Have a great day and take care!
Nice tutorial. Very helpful. Thanks a lot!
Hi Ihor! You are very welcome, I'm glad I could help you out with this video. Stay tuned for more awesome video's! Have a great day and take care 😀
Super helpful!
Thank you very much! I’m glad you liked it 😀👍🏻
Great video, thanks! I'm looking forward to seeing the CCS you used on the accordion module. That fixes my issue. :-)
Hi Paul Hildmann 👋! Glad you liked it! Sorry didn't upload it yet, I'll create a .txt file so you can download it from my website. I'll make another reply when its done so you'll get a notification 😀
😀 I have just added it to the video. You can find it here: 📜 wpressdoctor.com/divi-modules-pt1-snippets/
Thank you for your patience!
@@WPressDoctor , Thank you very much. That solves my issue. I appreciate your time and effort.
You are very welcome Paul! 😃 keep u the good work and make that website awesome 😎
I love this
Thanks Akinde for your kind words! I’m happy I could help you out with these videos 👍🏻😀 Have a great day and stay safe!
Alhamdulillah, you are great.
Thank you for your comment! I’m happy you liked it. Have a great day and stay safe!
I'm so glad you don't need to know CSS in DIVI, unless you always do
Hahaha. Yeah it’s going to be better in the future 😄
Thanks for the Explanation, Hope we are going see more in the future.
******* Quick question : What plugin should we use for divi (extend more option, for security and others)?
Hi Mosaddekur Rahman 👋🏻! You are very welcome 😃 I’m glad you liked it. There are more coming definitely, just give me some time 😎 For security I strongly advice my iThemes Security tutorial! And for more modules, I will be making a tutorial about some really cool extensions 😀👍🏻 Stay tuned!
@@WPressDoctor Thank you very much! Looking forward to see upcoming videos😃
You are most welcome 😀👍🏻 More will follow with some awesome tricks 😎👌🏻
This is amazing! There are so many useful tricks here!! :) question, how can I change the language of the 'read more' text in the blog module, so instead of 'read more' it reads as 'ver más' or something like that? Thanks!!
Hi David! Thanks for you kind words, I really appreciate it. You can only change that text with a code placed into your functions.php. It can be find here "Modify The Read More Link Text" on this page: codex.wordpress.org/Customizing_the_Read_More copy and paste it my friend 😁
Hi, very interesting video. Sorry, I can't find the code to edit the blog module. Where is the description? Thanks
Hi Matilde 👋! Glad you liked it! 😀 You can find it here: wpressdoctor.com/wp-content/uploads/Divi-Modules-Snippets-part-1.txt 😎
wow
Hi Tuhindari 👋🏻! I’m glad you liked the video 😀👍🏻
Hi Wp Doctor, nice video, you are awsome and Where is the CSS code that you have used in the video, if you provide the CSS code am very thankful to you.
Hi Arum Kumar Gudise 👋! Glad you liked it! Sorry I didn't upload it yet, I'll create a .txt file so you can download it from my website. I'll make another reply when its done so you'll get a notification 😀
😎 I have just added it to the video. You can find it here: 📜 wpressdoctor.com/divi-modules-pt1-snippets/
Thank you for your patience!
Hi WPress Doctor
Thanks for the video! I tried to make all columns of the blog module the same height. But after I insert your code in the code module, I'm unable to save the page. Any ideas what could be causing this? Thanks for the help!
I was in contact with the amazing support of Divi and they found out, that the problem is with the hosting. Since I'm already in the progress of migrating to Name Hero I won't investigate any further 😁
Great! I’m glad you got it fixed. You might want to check out Siteground, I don’t have that good experience with NameHero… but I hope it works for you 👍🏻😀
Is your audio album for sale on Itunes yet? :-)
Hi there 👋🏻 Haha almost ready, including a worldwide tour 😂 you can have VIP tickets 😘
Great video, i have an issue with the blog module that wasn't addressed, the grids appear too big and I don't know why, my content width area should at least be able to fit 3 grid cards like in your video, but it can only fit 2 because of how big they appear, please how can I fix this?
Hi Sewid Enjil 👋🏻! Thank you 🙏🏻 I’m glad you liked the video 😀👍🏻 First of all, do you have more than 3 posts? Second: how width is your row? Third; is your entire site layout set to ‘boxed’? Love to hear from you 😊
Thank you for your quick reply. Yes, I have more than 3 posts, I’m afraid I don’t know the row you’re referring to but I’m making a blog post template with a right sidebar, and the blog module I’m using to pull in related posts, and for the last question, my layout isn’t set to boxed.
Hm can i see the website? Do you have a URL for me? Maybe I can pinpoint the problem 😀
WPress Doctor It is a new website I just started to work on, I haven’t launched it yet, I don’t know how to share a link to unlaunched website. :( is the size of a featured image supposed to determine the size of the grids? If not, I don’t know why they’re so big.
Well the size of the thumbnails doesn’t matter because they are resized. However, the image ratio is important for how it looks. Square is better 👍🏻😀. You can email me a screenshot? The@wpressdoctor.com 😎👨⚕️
How did you access "Page Settings" I am trying to insert the CSS code to show a close icon in the Accordion Module?
Hi Dave, thank you for your question! Well if you look at the bottom of your page (in the visual builder) you have 3 dots. When you click on those, you see a gear icon (among other icons). That’s the one you need 👍🏻😀 let me know if that works!
@@WPressDoctor Thank you, found the Page settings, There is already some code in that area, can I add additional code under the existing code?
Glad you found it 👍🏻😀 Yes you can! Usually it won’t interfere, but please check it, I could be wrong 😊
Plz make a tutorial about Theme Builder option
Hi Imran 👋! Thanks for your suggestion! I have covered this one very briefly in my other video: ruclips.net/video/FQYbf47-sg8/видео.html Maybe that can help you out? 😁
awesome video. your the best. but where is the codes? best regards from sweden
Hi Daniel! Thank you very much! Really nice to hear those nice words! The codes can be found here: wpressdoctor.com/wp-content/uploads/Divi-Modules-Snippets-part-1.txt I hope it is usefull 👍🏻😀 Your like and subscribe would be very helpful if you haven’t already done so. Social share of the video would also be highly appreciated!
your given link website not open how it is work ?
Hi Shahzaib Raza 👋🏻! What link are you referring to, the file with the CSS snippets? It’s right here: wpressdoctor.com/wp-content/uploads/Divi-Modules-Snippets-part-1.txt 😀👍🏻
WPress Doctor Can you please tell how to create Dentist appointment website with Divi theme?
Hi Usman 👋🏻! Yes there is a template available inside Divi that is exactly that 😀 It should help you getting started 😎
@@WPressDoctor thanks can you please guid me?
Sure, just add a new page and chose “from layout” that’s it 😂 You need a Divi license of course 👍🏻
@@WPressDoctor thanku wish could meet you
You are very welcome 😀👍🏻 you never know, it’s a small world 😊
After I entered the code module + script in the accordion to close a toggle, the script appears in the published site, how can I hide this?
nevermind, duh display: none;
Hi Dana Seaton 👋🏻! 😀 yeah that is one way to do it 👍🏻 However, it should not show on your front-end by default. But glad you fixed it anyway 😀 Don’t forget to to put the script between the and 😊
Just an additional info regarding the css for the accordion module:
the css for showing the close icon only works if you haven't changed the custom toggle icon.
But please don't ask me how to make it work with another icon... 😬
Thanks for the addition 😀👍🏻 I’ll dive into this when I have to create one for a client. But it never occurred to me so I’ll let you know
@@WPressDoctor I just noticed it because I prefer arrows instead of +/-. But I don't have any css knowledge so I'll just stick to plus and minus... 😅
I hope Divi custom CSS can be as easy as Elementor custom CSS..
Hi TV Mamak 👋🏻! 😀 It’s actually really easy to place custom css in Divi 🤗 Watch this video where I explain you have 3 places where you can add it 🤩 ruclips.net/video/FQYbf47-sg8/видео.html if you have questions, just let me know 😀👍🏻
Means first I have to learn css to use divi ?
Hi Tanveer 👋🏻! Thank you for your question! No, you don’t need to learn CSS to create a website with Divi 🤩👍🏻 The things I talk about in these video’s are useable without any CSS knowledge! So just enjoy and if you want to use some or no CSS, that is excellent 😎
for css link not working ?
Hi Shahzaib Raza 👋! The link is here and working on my end: wpressdoctor.com/wp-content/uploads/Divi-Modules-Snippets-part-1.txt 😀
Custom CSS not work in last step of blog module
Hi Imran Sadik 👋! Can you describe what exactly does not work? 😀
Hi there,@@WPressDoctor i also tried and the script for blog , "Script to get the height equal", even if i use the same steps like you do, just doesn't make any changes, don't know why, i just follow the same steps :(. thank you for your time and kindness! you are a great person! big hug !
Thanks for your kind words, really appreciate it! I’m on the road now so I can’t give you the code but you can follow the guide of my colleague: www.peeayecreative.com/how-to-make-the-divi-blog-grid-equal-height/
Can you also speak about how Divi is crazy slow 24/7?
Hi there! Haha 😂 that totally depends on the speed of your server. But indeed, the version 5 release will take care of this problem. Stay tuned for more videos about this topic 😀
I just tried this designer and was extremely disappointed. The cost of DIVI at the moment is 100 euros + their “AI” is another 25 euros. But in fact, everything works crookedly and askew.
Hi Елена, thanks for the comment. Yeah that's why I build a lot of websites via Elementor these days: ruclips.net/video/HLk3Wl1sosc/видео.html