All Divi Modules Overview incl. CSS Tricks - Part 2
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 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 2 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:41 Contact Form
11:18 Countdown Timer
14:50 Divider Module
20:10 Email Opt-in Module
27:18 Filterable Portfolio
34:23 Galery Module
41:05 Image Module
48:55 Login Module
55:19 Maps Module
58:21 Menu Module
Thank you for watching, part 3 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, it's the WordPress Doctor here. Welcome to part two of the Divi - All Modules video series. In this video I'm gonna take you by the hand and demonstrate and show you and explain to you all kind of different Divi modules, I'm going to also show you the most use CSS tricks that I use for my clients on their websites. For example, how can we remove this zero on the countdown timer? How can we remove this 'All' tab in your filterable portfolio? How can we add google ReCaptcha v3, but also remove that irritating logo on the front end? And of course, how can we create this gallery module and make it responsive two or three columns on your mobile device. So let's go, because we're going to start right now.For the next module we're going to create a contact form. Press 'Contact form' and as you can see, immediately a couple of fields will appear. The contact form is a pretty basic module that you will use in every kind of website. You have the name, the email address messages, all the fields are right there. So the first thing you will do is, of course, change the fields like you seem fit. So if I want to add another field, just press this button. And here I can enter another field so here's the idea you have to give it someone so let's make it a telephone number. This field ID is only for the back end, and the title is what people will see. And now we can just press 'ok' and we can drag and drop this field, just to where you want to have it. Let's have it right there. The problem is now, it is full-width. So what I want, I want to make it... go to 'Design' - 'Layout' and press 'no'. Now you can see it just flips through the half of this module. Let's make another field next to the telephone number. We're gonna just clone this one. You have different types of input fields. You can make an input field, a email field, a text area, checkboxes, radio buttons, or select drop down. Let's make this one a select drop down. And the options will be... as you can see now the placeholder is still "telephone". So first of all we're going to change that one. Let's call this one... the fields ID will be just "Purpose", and the title will be: "What is the purpose of your visit?" And ff course, now we'll go to 'field options' and then we're going to create options in the drop down menu. So the first option is: "I want to install rocket launchers behind my headlights like James Bond!" The second option is: "I want to have a ejection seat just like Jason Bourne" And the last option is: "I want to let the puke of my boyfriend being removed from my seat after I drove like a idiot". Alright let's save this. And what you can see right now is this field has been added right here. If I'm gonna save this module, and let's save this page and let's look at the front end how it looks....
📖 Read the rest of the transcript at wpressdoctor.com/
#Divi #AllModules #WordPress
![ช่วยพาฉันผ่านเวลา - วสันต์17 [Official MV]](http://i.ytimg.com/vi/HFnntWoqc54/mqdefault.jpg)
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 62 [ซับไทย]](http://i.ytimg.com/vi/fsIY2fKn38Y/mqdefault.jpg)
This is a really good and valuable tutorial (as was the previous part one video) for us newbies; thank you WPress Doctor, it is really appreciated the time and effort you are putting in on your tutorials as well as imparting some great wee CSS snippets.
Hi there 👋🏻! Thank you very much for your comment, it really made my day 😀👍🏻 I am glad it helped you out! Keep up the good work, add value and create that beautiful website 😀👍🏻
As always, this is such a brilliantly done tutorial, so glad to be a subscriber.
Hi Swid Enjil 👋🏻! Thank you very much! I’m glad you like this one also 😀👍🏻
Thanks for the explanation of all modules man.
Hi Mosaddekur Rahman 👋🏻! You are very welcome! More modules are coming up in Part 3 in 2021 😀 Have great holidays! Hope you are safe 😎
@@WPressDoctor safe thanks man. Hope you are well. Stay safe☺
Thanks I learnt a lot. I appreciate your hard work. I know it's not easy to make these videos.
Hi Fraidoon Husain 👋🏻! Thank you for your kind words! 😊 You are very welcome! I am very glad it was useful 😃
Thanks a lot for the tutorial.
Hi there 👋🏻! Thank you very much! You are very welcome 🤗 Have a awesome day!
Works great 👍
Thanks Shannon! Really appreciate it. Have a great day and stay safe!
Glad we have a wp doctor now :p
Great job, as always!
Hi Me Rafi 👋🏻! Thank you very much 😀 I am very happy you liked it 🤗 It sure is a good thing hahaha 😄 Hope to give you more in the near future!
@@WPressDoctor thanks for your generosity!
Well there is a drawback in Divi I believe, you cant make a button in the main menu, e.g for 'contact us'
You can take this as a challenge though :D
I'll highly appreciate if you could fulfil, or if you have a helpful video regarding this
Oh it’s pretty easy! You can make a menu item and give it a CSS class and then style it using some custom css 😀👍🏻 here is a tutorial about it; divi.space/divi-tutorials/how-to-create-a-call-to-action-button-in-the-divi-menu/
@@WPressDoctor wow really, you're such a champ, never fail to surprise us with your quality content and value. Thanks again, Doc!! :))
You are very welcome 🙏🏻 Thanks for the support! 😀
Thank you! You saved my day! Your work make using Divi a much simpler task. I keep wondering, why do we have to use code for such simple tasks in Divi, like taking off that zero in count down? Why Divi developers don't provide this kind of function natively via module setting?
Hi Julio 👋🏻! 😀 you are very welcome! 😄 I’m glad you liked the video! That is indeed a question I also have. I think they are working on new features instead of improving these “Quality of life” things 🤔 We will see in the future 😊
@@WPressDoctor it would be great to have your thoughts on the new Bricks Page Builder! Maybe a video? Just an idea 😉 Thanks again!
That’s a great idea 😀👍🏻 I’ll add it to the list 👍🏻
😂😂 That maps module!! Hahah I have the same relationship with that module!! ⚠️😱😂😂
Hi Matthias 👋! Glad you feel me on that one 😂
Thanks for maps :)
Hi Bato 👋🏻! You are very welcome! Glad i could help you out with that! 😀👍🏻
Thank you for excellent tutorial! Just a question regarding contact form. If there are obligatory fields and they are not fulfilled - there is an error message with indication what is to be corrected. How to change a color of this?
Ok. I have it :) ChatGPT helped.
selector .et-pb-contact-message {
color: #ffffff;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
Hi there! Thanks foutje question and your own solution 👍🏻😀 Yeah with some CSS you can fix everything about styling. Well done and great work ChatGPT. Have a great day and take care!
🙏
Hi Andreas Karlatiras 👋🏻! You are very welcome! I’m glad you liked it. 😀👍🏻 keep up the good work and have a awesome day! 😃
Good tutorial, you have explained it well, but ruined by your unwanted voice modulation.
Hey thanks Dave 👍🏻😀 haha yes that is a good point 😊 noted!!
@@WPressDoctor Thank you for taking it sportively and valuing the feedback. Your tutorials are sure to reach more new DIVI users. Take just one point to explain thoroughly even it is just 3-5 minutes in length. Call it how to use ----------- in DIVI.
That’s a great tip! Thanks I will do that with new features! 😀👍🏻
Please it's "weeeedth" not "widedthh" :D
Hi there! Hahaha thanks for the advice 😂 as English it nog my native language it’s sometimes hard for me to say these things right 😂😂
@@WPressDoctor yes i know but it's sooo funny 🤣🤣🤣. Keep the good work dude
Thanks mate 😊