All Divi Modules Overview incl. CSS Tricks - Part 5

hey guys what's up it's the wordpress doctor here and i gotta be honest with you this is going to be a pretty boring video but i promise to create five videos about all the dv modules so i'm obliged to fulfill my promise so here it is as i was making this video i noticed that all these modules are almost exactly the same as the normal modules that's why this is a pretty boring video you're still free to watch it if you want to waste some time but don't tell me i didn't want you up front have fun let's start with the first module [Music] so for the next module we are going to the about us page and we are going to add something right there if you press this button we need to add a full white section because these modules are left white so the first module we're going to talk about is the full white code module this is basically just a normal code module but this time it is full wide you understand so how do i use most of the time this module is pretty easy we just go to google maps and on google maps we are going to this candy place i've once visited while i was there in las vegas so here we go it is the eminence world in las vegas and i promise you if you're in the neighborhood it's pretty awesome they have a whole wall of eminem scholars it is a mind-blowing but we want to have this shop in our code module so how are we going to do that so for this you actually go to google maps and then you go to share and then we do embed a map you just copy this html it's pretty easy and then we go back to divi and you just paste in the code from google maps of course you need to go to white and change the white to 100 and you can of course change the height to whatever you want for example 550 pixels or maybe even 750 pixels it's all possible you just save this one and here you go this module works absolutely wonderful now you have the google maps embedded on your website so this code module can be used for anything at all but i normally use it for this option alright that's it let's go to the next module and the next module will be a full wide header as you can see it's just a normal header module but this time it is full white alright so the main thing is you can just click this brush icon and you will go exactly to the title header right there and you can change it to of course any title font the the size the shadows you can all change it right there and of course with the subtitle text you can also do something really cool if you just make it white for example and change some millennial change the font a little bit i'm gonna add some line height to this one and of course change the text of the [Music] body all right and then we go to background and we're going to create a awesome background color right there then you go to the settings of your section and you go to design you go to divider and we're gonna do uh one on top like this we're gonna change the divider color to this one like that and we're gonna make the height 45 view wide alright this is pretty cool all right now we go back to our wordpress full white header settings and here you can just create something really cool let's change those buttons for example or we're going to make the button background color this one and the other button we're also gonna style it the same here you go all right it's pretty awesome so with this module you can also do something awesome if you go down right there and we go to images and we add a header image for example let me show you how it looks right there on the right side because the header image will come on the right side of your text and your buttons which is pretty cool however if you add a logo this will happen and you can actually have your logo on top of that one this way you can change the header to fall off or maybe appear later on the screen when you scroll down it's all possible with divi i think it's better one without the logo because we have the logo already there if you press any brush icon of your image you go to design and image here you can actually change the alignment of your image which is very important if you have more text the image will be will be aligned at the bottom but you could also if you press this brush icon or you go to design an image you can also align this button vertically so it will stay in the center and i really like that feature right there right if you go to design and you go to layout you can also change the entire layout of the entire module you can see what it does when i center it or you can put it on the right side so this way you can really pick a design you like also this button makeful screen is pretty cool because now it will make sure that the module use the entire height of your screen size which is pretty cool so you don't have to do it yourself with all kind of spacing and battery and margin no just add just toggle disk switch switch make it full screen i like that if you do that you should use this scroll down button if you put in a button right there and we're going to style it just a little bit to have the same color i would love to have a shadow on this one i like a white shadow you can actually do that with custom css you can of course do that with custom css just go to advanced custom css and you scroll down to the place where it says scroll down button what i do like about this module is when you hit on d button you actually scroll down to the next section so it is they build it pretty awesome the most common question i get how do we get more hide in there well i showed you with the other header in the other modules just go to custom css go to your title or your body and just add a little bit spacing the marching bottom will be for example 30 pixels and if you just use this on your body text and your subtitle you will create more spacing inside of your full wide header all right guys as you see it the full white header is actually pretty awesome with this icon button you can press right there to go to the next section if you press it here you go so that works pretty awesome the full wire thing i also like the full height of this module so that's pretty cool keep that in mind when designing that this module actually fills in a nice gap within divi all right let's go on to the next module on this coffee website we're going to create a full white image it's the next image i have never liked coffee i don't know why but i just i didn't ever get used to the taste or something i don't know man i don't like it but let's add a full white section and we're going to add the full white image right there so the full white image is actually it's exactly what it says it's an image but then it's full white and i really like it because if you click there you can just add any image you want if you want to use a full white image you have to use a image which is pretty large in its dimensions so we're gonna take this one we're gonna use this image because it's beautiful and it's wide enough for our screen now you can't do pretty much with the full white image you can only go to link to make it a url or you can open your image in a light box and if you now look on the front end of this website and you click on this image this is what will happen when you open it in a light box you will see this well all right if you go to design you go to overlay you can actually create a overlay with this image so for example now it is all white but i don't really like that so i'm going to change it to white and then we're going to add a little bit transparency to that one right there yeah this is better and of course the icon you cannot change it to black because of the background is white and you can change the icon to anything you want so you can use this one to go to the next page for example if you go to sizing i definitely don't know why you want to do this on a full wide module you go to spacing you can create some spacing around it borders transfer options well the full wide image module might be the most boring module in dv alright let's go to the next one [Music] the next module is a free wide map this is the most useless module in the entire world of diffie why i have said it before and i'm gonna say it again this is so outdated if you want to use this then you have to need and add a google api key a google api key for maps is not easily required for someone who doesn't know how it works you have to do a lot of tricks to get it in there and when it's finally there you find out that you have to pay if you have more than a lot of visitors in your website so this full wide maps map module i'm not even gonna cover it just go a few minutes back and there i show you how to add a full wide map onto your website using the flight code module please dv remove the map module because it's so worthless we're going to the next module [Music] so for the next module we are going to the theme builder because now we're going to create a custom header which we'll be using for this specific page so we're going to add a new template and we're going to add it to a specific page all dv modules part 5 create a template as you will see it will now use my global header i don't want that i want a custom header so i will not mess up my design of my entire website all right so what we're going to do right there we're not going to use this section we want a full white section and we're going to add the next module which is a full white menu all right the menu module let's get gets rid of this section first all right the menu module is actually the menu but then it is for white how large can it be just add your logo right there click add image and scroll all the way down to your logo we're gonna upload it right there of course it is way too big now i always say if you know what exact size you need for your logo just go back go to photoshop or whatever and resize it to the right size so it will stay really crisp and clear and it will not be blurred out and it also will save you some loading time for your visitors and it's very good for your visitors and your seo but for now let's go to design we go to sizing so you can change your logo white one tip don't use percentage signs in this one why not it will totally mess up your menu what you need right here is pixels so let's make it like about 200 pixels maybe 300 pixels and as you can see now the menu items slide left so they actually get up to your logo this is very important because when i change this to percentage as you can see now and if you have a large menu the it will not work the way it should so always keep in mind use the pixel size on this one to re-change them but remember just resize it in your photoshop and re-upload it it is the best way to do this the content of your menu here you can change which menu to use i only have the main menu if you want to change it of course you need to go to appearance to menus and here you can change your menus on your website and those menus you will be seeing right here all right we're gonna choose this main menu so if we now go to the elements here you can add a shopping cart icon and a search icon which is of course very useful if you want people to search your content and a shopping cart is actually very pretty useful if you have a e-commerce website if you don't have a e-commerce website you can of course leave this icon off if you now go to link this is a very important one you have to fill out this one or else people will click on your link and nothing will happen no that is true so just add a forward slash and now when people press your logo they will go to the home page of your website under background tab you can of course change the background of your entire menu you can of course add a gradient you can of course add a background image and you can of course add a background video and before file that's all pretty logical but what you might didn't know is that when you press on this button you can actually change the background on different devices so for example if you want your phone to have a blue menu background and on a desktop a white background it's all possible within divi if you don't want this just press this button and you can activate it by changing the background colors on your different devices as you can see that if you want to deactivate it just press this icon once more and now it is all the same even if i go to the menu if the mobile tablet or desktop version really awesome isn't it let's go to design if you go to layout here you can change the menu style of your full white menu you can make it centered and you can make it in inline centered logo now this is i remember this one to be one of the very first things you could change within the very old themes of elegant themes it was really awesome this was the only option you had so but you can now of course use it any way you want however if you do want to have it centered for example or you want to have it in line centered well you can also just change your row settings and place all the different items in there but that is not with the full wide menu if you go to if you go to layout here you can change your style you can make it centered you can make an inline center logo or you can just keep it left aligned the drop down menu direction you can make it upwards or you can make it downwards now it looks a bit strange if it is upwards so i always keep it downwards why do they have the option well maybe if you have a menu in your photo in your footer when it's just scrolling with your visitor then when it go upwards it is pretty logical when you're at the bottom of your screen so that's why it is in there pretty cool make menu links full wide when you press this button it will make it full wide and it will go to the entire left side or the entire right side so you will you will make use of the full width of your visitors screen this might look a little bit weird once you have a designer you picked a row size for example 1280 then this would appear a little bit weird but if you have a really big menu then this is pretty useful in the menu text you can change the active link color so what page is active will have a different color than all the other links when they are not clicked on i always use this because it is a best practice to show visitors where they are at your website in your navigation you definitely should have another color in your active link than in your menu text link as you can see right now all right if we go down then also we have the shadows of course so the text alignment is one of the most used features and i think it's very useful because here you can just change the text alignment of your menu i don't like it this way because i think it is too crops into your logo but you can take it in the middle or you can take it on the right side which gives you a lot of space and i like space if you go to drop down menu here you can change all the colors of your drop down menu this is the background color let's keep it white this is the line color you should change your line color to one of your colors of your website the drop down menu text color i would keep it like black the drop down menu active link is of course the same as your active link that we talked about previously the mobile menu background of course to make it readable so to pick a light color and the mobile menu text color let's keep it black all right let's go to the icons shopping cart icon color search icon color hamburger menu item color are all there just like the normal menu module they're all there here you can change the font size of your shopping cart icon as you can see and of course the search icon let's keep them in 34 pixels right there hamburger menu i can font size when you go to mobile you can see right now that something's a little bit off let's go with the iphone you can see that the entire menu has just fallen off right there why is it this is because of the size of the logo if you go to sizing you go to logo wide logo with white the logo wise and here you can see that there is another icon so let's change this to 200 pixels there are my icons again let's change this to 100 pixels on mobile and here you can see now that the menu again is visible however i don't want the font size to be 34 pixels on mobile i press this button and i just change this so now it is don't forget to push this button again with the other icon or else you will change it on the desktop size and let's change it again to 19 and i want your hamburger size oh that's pretty cool right now in the on the mobile view now we can change the logo back so we go to sizing and you go to this on mobile view and well let's see if 250 pixels that's a bit much so let's make it like this so let's go to the next one let's go to logo here you can change round color store your logo at a border at a shadow of course that's all pretty awesome the sizing of course we just been there spacing border and let's go to box shadow i do like to have a shadow on the bottom of my mobile menu because on my menu in general because i really like the style of it alright let's go to border and here you can add a border to your module i you you definitely could have some fun with this one if you for example want a left border in the size of your website or also maybe a little bit of bottom border which is also pretty cool to add some effects to your website let's make this a small one and if you now go down to the box shadow here you can actually add also a shadow which gives us a pretty cool design for a website if you change it to the colors of your website itself so you can actually do a lot of things with this full white menu uh you of course know how to filter transform an animation let's go to advanced let's go to scroll effects and let's make this stick to the top of our page so now the entire menu will stay on top of our page when we scroll down and change anything this is pretty cool and of course you can also use the transform effects when someone does some vertical motion it scrolls down another menu will appear but we'll be doing that when i cover how to create a website the divi tutorial 2021 if you want to see it subscribe because it's not yet done and you will get a notification when it's uploaded alright that's basically it for the full wide manual module let's go to the next one so our next full white module is the full white portfolio here we go the full wide portfolio is exactly the same as the normal normal portfolio module except it is full white of course it is with all the modules in this video i don't even know why i'm creating this video but i told everyone i had to make five videos so this is the fifth one if you add a title to your portfolio it will be added right on top let me show you a awesome title and that is just the way it goes i never use this title i always create a new title but with the full white module you have to add a full white header of course because of the full head section that's why i don't use a lot of these full wide modules all right in the full wide portfolio settings you can choose any category you want for to use within your fields or portfolio where are they getting these categories these can be found when you go to projects or projects here you can find all the things that's been added to my portfolio module so if you want to use it you have to create some projects inside of your wordpress website so let's turn on the infant and the newborn and the teenager so we have some things to change all right let's close this one and you can also change with pulse count the max amount of posts will be shown for example if i add two you will see only two projects right there most of the time you just leave it empty so you can have all your posts inside of your full white portfolio module if you go to elements you can change the title from the pictures of course when you hit the overlay now if you go to elements you will see that you have show title and show they these are the things you can see when you hover your mouse over all the different kinds of projects and you can of course change this one now you have no titles as you can see and you can not show the date so you only have the icon let's keep them in right now link you can link the entire module to something i would not do this because this is already a link in itself and you can change of course all the background colors gradient images videos whatever you want in the background of your title it has been labeled just for you so you know what it is when you're looking at the wireframe and design let's go to design let's go to layout you can of course change the layout to a carousel or a grid i really like the grid style because it gives you a nice look and feel of all your portfolio items if you go to overlay here you can change the color of the icon let's make it for example red as you can see right now and you can change the overlay background color for example let's go for a little bit more of a dark way now you can see that it's like this we have to change this one and now it looks pretty cool we can also change of course the icon i often use a magnifying glass so people know when i click that button it will go out in a light box or you go to the specific project if you want to go to a specific project maybe another icon would be better like a arrow for example okay let's go to image right there you can make the image more around it if that's the style of your website and you like that you can do that i hate it so let's now do this you can actually create something pretty awesome with the border wide if we create for example a black border or this one you can create some other cool effects on your filterable portfolio and you can of course change the style of your borders right here so for the box shadow you can use the shadows and you can not see them very good right now because of the border but as you look very closely you will see that there is a really tiny shadow above all the pictures especially the light ones you can see it very clear right there so if you like that that's a pretty nice thing to add to your portfolio all right if we go down again here we can change all the icons so if you want for example to make all the videos to make all the projects look like cps style you can actually change it right there and it will create a one style for all your different portfolio items this can be pretty useful if you want to change something or just create a little bit of saturation to all to all the pictures at one time to really make them pop out for example if you go to text here you can change the text color [Music] and if you go to text you can change the text on the overlay so let's make them light that looks a little bit more better on our dark background and you can of course add some shadow to it you can also add a white shadow to it but let's not add it because it doesn't look really great with this font and this size if we now go to the next one the title text here we can change the title text which is actually all the way up here it's the same when you press this button this brush icon you will go to this screen and here you can change the font the font of your title the font weight and of course it font size and of course the titles or the the alignment of your title so you can place it anywhere you want of course a nice little shadow to it and let's go to the portfolio item title text those are these titles right there we can change them a little bit make them bigger as you can see this really pops out way more so i like that let's also change the font to uh oswald this is this is really great and you can of course align them to one side of your portfolio in overlay if you want that you can also change of course the color of everything the text size and here you can change the title letter spacing so it gets really big and spacey the line height is useful if you want for example to have a list less space between your title and the date which i like in this example as you can see it looks way better right now the meta text is of course the same and it's just the text below that if you make it bigger this is what happens but we're gonna keep it like this because i like it we're only gonna change the font to nunito which is a pretty smooth font and make it capital like this all right i like it i like it a lot let's go to sizing here you can change the white of the entire module well what's the point of a full wide module if you change it to half of your size i really don't know you go to spacing you can add some spacing on the top of your module and on the bottom of course some padding very logical borders you can add a border to your entire module let's say if your style is rounded corners you can change it of the entire module the border style let's add some borders right there as you can see i really don't like that one well the shadow of course if you want to have a shadow on the entire module you can also change it here but i prefer to use these section settings and add a box shadow to the entire section just because it looks great here you go and of course you can change the filters again and transform options and we go to advanced you can change it actually disable it on phones of tablet or anything if you now switch to your mobile view you can see that the portfolio module is actually just one really big portfolio with all these pictures below each other you can change this to two columns and you have to watch my other video about the portfolio module where i explain how you can do that alright let's go to the next module so the next module we're going to talk about is the full white post slider right there and as you can imagine yes it is a full wide post slider with this all these categories you can choose this one will actually slide your posts is it that simple yes it is that easy and what i do like the most about this module is that it is full white of course so what are the post codes well let's go with tripos maximum as you now can see there will only be three posts in this module right there you can of course change the category you want to choose you could change your dates and you could change the button watch this video and you can of course show export or show content and but if you do show content then it will be as you can see a little bit of a mess because i have a lot of content in this pose so i would suggest you just use show expert you can also just disable this entire thing to do that you go to elements but first we're going to use the post exercise of course the length you can actually choose how long it will be and the post offset number which is very useful if you don't want to have the first post in there you just type in number two to start with number two and you can also start with number three for example so this way you can have a for example a post above it with all the information and then this one starts with number two so the post offset number is pretty useful let's go to elements you can choose to show your arrows your controls read more buttons in the post data the post meta well if you don't want to post meta it looks a little bit cleaner right now and we don't want to well i do want to show the arrows but i don't want to show the controls the controls are the dots right there the featured image you can choose to show it or not to show it that's the question and you can and you can of course turn it on the left side on your right side on the top side on the bottom or use it as a background let's use it for our background right now if you go to design you can choose your overlay the background overlay color let's make it a little bit more darker like this it's pretty smooth or you could actually use a color for example whatever suits your website and you can also combine this with a text overlay or just choose only for the text overlay which is pretty cool if you ask me just make this a little bit like this but you can also combine the two like a white text overlay you can create a lot of fun things with this one let's just keep the background overlay if you go to navigation you can actually choose the color of your arrows right there and the navigation dot color rds down there if you go to image here you can change the image border for example but this only works if you have your content your featured image set on the left side for example as you can see right now go to design image and here you can actually now you can see what will happen if i change all these settings to create something awesome but we're not going to do that right now so we're going back to featured image and let's use it on the background all right you can change the alignment of your decks on the left side right side or just fill it up but just use it on the left side that's pretty awesome text shadows of course title text here you can change your fonts nito for example or pop-ins which is most of the time pretty cool headings let's use some semi bold or just make them thin i think thin is pretty pretty cool for this website all right you can change of course your text alignment change the size of your titles so the rest of this module is pretty basic and you know how it works except i want to show you one more thing if you go to sizing and you go to content with here you can actually change the white the width of your content if i make it pretty small you'll see what happens it will stay right there and it will be a bit smaller which is of course very useful alright well that's it because the rest is pretty simple and it's actually the same as the other module alright let's go to the next module so the next module will be the full white post title well as you can see of course this is what you get when you add the module it will show your title in full white is it useful yes it is but not very many times it is most useful when using a theme builder that is where it actually gets really interesting but i'll show you how to customize it just show your title your meta of course author date your date format show your comments your featured image and where you want it we want it above the title your featured image below the title of the title well i don't have a featured image on this page because this is a page the funny thing is with this element you can also use it on pages so for example this is a page it has no featured image that's why it is right there um let's go to design you can also change of course every element of this thing like your titles your your texts and let's just create it a little bit bigger and you can just add some spacing right there and now you can get a post title so you can also add a gradient for example which is pretty awesome if you make this white you can create all kind of things for these modules very straightforward very basic and i do not use this very often because i do like to use my normal modules and my normal rows to create a full white module but just not a forward module you know what i mean all right let's go to the last and final module of this series so the last module we're going to cover in this video series is the full wide slider well as you know it is just a normal slider but now it is a full wide by default so uh how does this change how is this different from the normal slider well actually the only thing that has changed is because that is it is full wide so it is actually again a pretty pretty boring module because it's just the way it goes purchase your car button ask a quote and let's give it a background image look at those beautiful curse what are they doing there like this and then we're just gonna style it like this we're gonna make it white and we're gonna align it on the left side also this one on the left side make it a bit bigger add some more body line height and then we're just going to add a little bit of background gradient a background overlay here you go and i'm gonna make it this way yeah i really think you get the point again the slider module is also pretty the same as the normal slider so if you want to have more information about that one just visit my other video all right guys that's it and i know it was a pretty boring video but i told you on front end so if you're still watching hit that like button because it seems like you liked it and if you have any questions or comments just leave them below and if you see anything that's out of order or you think i missed leave them in the comments because i always like to learn new stuff alright i see you in the next video and have a awesome day

Channel: WPress Doctor

Views: 625

Keywords: wordpress doctor, wordpress, wordpress toturial, toturial, how to, websites, wordpress expert, Divi, Divi modules, Persons Module, Number Module, Portfolio Module, Post Navigation Module, Post Slider Module, Post Title Module, Pricing Table Module, Search Module, Products Module, Sidebar Module, Divi theme modules, Divi Elegant Themes modules, divi toturial, divi tutorial, divi modules explanation, divi modules demonstration, divi 2021, part 4

Id: lsBpifTPghY

Length: 38min 26sec (2306 seconds)

Published: Fri May 07 2021