Exploring all of the Modules of the Divi Builder (Divi Theme for WordPress)

hi there it's Wade McMaster here got another video for you today could be going through and exploring the various modules of the Divi Builder which is part of the Divi theme for WordPress now if you're not familiar with this theme is basically a customizable WordPress theme that has this excellent page builder that was used for want to build completely customized pages allows you to basically customize the template of your site and even build a complete templates using the Divi theme builder which is basically their page builder extended into a theme building interface so that way you can actually set up a custom template for your site for certain types of pages it could be pages posts archives and allows you to completely customize how your website looks and that way you can still just use your basic editor for the main information very powerful theme awesome tool I've actually got a video on the theme builder itself but with all these awesome options that we have in the Divi theme to customize that site you may not actually understand what is available to you so I'm just gonna go create a new page here and we're gonna open up the Divi visual builder and we're gonna start just adding in some modules and showing you what they do because that way you can actually see how it works and see what you what your options are if you're gonna be building complex pages so I'm just gonna type in or just gonna get a test page and now and use the Divi builder and we're just gonna start from scratch but I'm gonna touch on a few things as we're going through so that way you can see what options are available to you this is my main site you can see I use the Divi theme for my main site now you do get greeted with a screen which is pretty cool you can clone an existing page this can't be good if you decide you want to change your homepage you can actually create a new page and clone that homepage make all the updates you want on it save it and then when you're ready go back to your home page and simply go in and replace it with the page you've built so it's cool for being able to make updates to your site that you can keep aside till you're ready to to you know basically publisher you've got this pre-made layout here if I click on this bill from scratch will simply pop us into a blank page which I will actually do in a minute but you can see we've got all these options that come with same different layouts that we can start with all using the same modules we're gonna be going through so you can go in and make the changes you need and edit customize things for example for gloma going here actually got a series of different layouts or we can you choose to work with so you actually you've got lot to start off with even before you start building your page actually gonna X this and just start from scratch now this is not something I've actually rehearsed I'm just basically gonna be exploring this and just we're gonna go through one why I want to check it all out I'll touch on some of these very quickly I won't go into the depths of it just give you a basic idea of what you can do but if you're not familiar with this basically the page starts off you can start laying down rows I can do create another row here and llave rows down the page so as these rows are laid down vertically within each row we can add in columns so there's green section here I can see two columns here I'll just click off that I can then add another one maybe three columns you can see we can just add in different levels and a mess of columns within our rows and also within this row here I could change the background if I want to I can add image so I can upload using the WordPress uploader or I can even grab an image from somewhere so you know if we might have City this image here and pop that the background you got all these other options you can make a parallax effect out of it so that way when you scroll moves up and down you might explore that later just because isn't enough on the page to scroll with you and you can even change the way it blends with the images beneath it at the moment because it's a white background doesn't really blend much but you sort of get the idea we can even add a great pop it over the background image so that way maybe we choose a black and over here which is black again but we make it transparent yeah you get the idea I've actually didn't choose the but we can actually set up cool little backgrounds in these areas here and we can add modules into our columns so I'm literally just gonna start from the top and work our way down so if I click here to the little grey button I get my list of modules like I said some of these I'll touch on very briefly now to give you an idea we're gonna go through this one a little bit cuz it will show I'll show you exactly how the interface works while exploring the accordion so I'm gonna click on accordion here and you see we've got two modules to the left so the way the accordion works is let's say I'm gonna copy a large body of text I've actually got two areas here I can go here delete I'm just going to change the visual editor now this is all the same options as your classic WordPress editor I can paste this in here I can hit enter stone your line make this heading if I want to title might be here's your first option option not open maybe I want to add an image in here so I have say some random picture on here so at this primal Fujiko and that's at first I'm gonna click tick and I'm gonna get here with another option so I'll go option two I'm gonna pop in the same text again and the idea is with this accordion that I can create clickable areas which open and close and basically you can choose which section you want to read so maybe I would you look at this and just say option 3 free and we basically get this cool little areas here that we can switch between now one thing you probably notice this isn't really suitable for long bodies of text so just while we're demonstrating this I am going to shorten this a bit each one just gonna have a shorter amount of text just so we can check out what it is we're doing today you can see we get this one two three so that is basically the accordionist of a little tabbed area where you can open and close various bits of information actually got to open at the moment we can close that top one close open as you can see the background is stretching and moving as we're doing this too as it's moving lodging it's pretty it's a pretty nifty effects with this now I can't close all these but you get the idea the accordion is like a little tabbed area we can put bits of information now we do also I'm gonna explore this just a little bit for you right now there is a full design section here I will touch on it very quickly but I'm gonna go through it more in depth in another video show you how to more completely customize some of the modules that you have because basically it's an almost there's so many options in here and a lot of them are the same across the board so go into a particular video on that and also on your display you've got areas here like assigned CSS IDs and classes if you into CSS you can then also add some custom CSS rules visibility you can turn it off on tablet phone if you turn it off on desktop becomes transparent to show you that it's not there so you actually disable it on certain devices which is basically judging by the width of the tablet your all these little options here and I'm going to explore some of these also on another video such as the scroll effects and animation all coming in future videos for now I just want to touch on what the modules aren't what they do but basically on every module you get these three tabs which is design is where your customize the look advanced is where you do apply more advanced bits and pieces to what are you doing and yeah basically get these cool little animations and things like that but the content is the main area we're looking at to show you the functionality of these modules so under link you can't add a module link so if anyone clicks anywhere in this module it goes to the page we can decide to change the background color of the full module if we want to keep it transparent if you want to change the actual toggles themselves you can make the background color yellow on an open toggle red on a closed toggle you got some different little options that like that okay so we're done with that accordion module for now so I'm just gonna go on here we're going to open up the shorter ones just do this doesn't look too good at the moment not exactly the most attractive looking module so I might just delete it for now so I'm gonna click on this and you can see here as I mentioned before you get your row columns and the module itself the blue is basically the road which is the horizontal element the green is a column so that was where you lay down your columns and then of course the gray is your module so you can click here and move it across and around to another area such as down here in the center I should say you can duplicate it so I've actually created two of these now or you can remove you can even add it to our libraries if you create something you're gonna use again you can save it to the library then of course you can leave that options like in copy certain styles lock it in place so many different options I'm gonna delete that all together now let's look at another module okay this time we have the audio module it's the way this works is if you have an audio file so let's go test audio track artist name is John album is Big John's now what I'm gonna do is I'm all do here we actually add in a file now one thing I've noticed here is that the listen white on white text is because of the way I have something set up this websites actually set up for that particular so it's not really working for the video but if I go into the back right here I can make the background black blue I'll keep it black as it matches the same and now we can you can see how this is starting to look now if I go into image I can add an image it's acts like a cover image for the actual audio so let's say we're gonna choose this little hand and clock so you get this cool image here and like I said we've got your background you can't have a background image if you wish to as well such as this nike tick but obviously he's not gonna be the best look so it's gonna stick with black for now let your normal background options which we'll go through in another module and basically we'll add an audio file here now I don't have any audio files here to upload so basically I'm going to I'll just quickly grab something okay so I've grabbed a mp3 online so I'm just gonna go basically drag this across and upload it so we uploaded our audio file and now we have this little audio class I'm here to play crack a little bit because I'm in the bill that I can actually track at the moment doesn't really like it you super get the idea so this nice little audio player here on our page to know exactly the most fitting image but yeah it's there so you can set up little audio players like that on your web so this is great a podcast so you got some music you're trying to get out there so that's perfect for doing that kind of thing now gonna move across over here to this side and add another module I'm gonna go to bar counters so the way this works is you can actually set up this cool cut left bar counter so if you've got a go maybe you're trying to reach a thousand followers on all your various social media platforms so let's say we've got say they've got Facebook and say you got 774 so we'll go 77% like actually duplicate this again go in knocks herself a link on here which is pretty cool but let me go in Instagram there we have more on Instagram so going 90 percent duplicate again Twitter at 40% and we'll add a new one okay tick top 20% so we've got these cool little bars it's hard to see the writing at the moment but we hope we can still play with that we can choose to give the whole element a background if we want to say black or red we might actually just stick with black and we'll make it if I click on this make it semi-transparent so you can see how the bars of working there the cool thing about Divi is if when you have this interface here with a few different options if I click on this cog for Facebook I can actually give the background color its own value on this one I'm gonna leave that on for now but maybe what I might do is under design on the bar I might change that color to blue you a little 77% there I'll click on Instagram get a design or maybe a back that color is purple Twitter change the bar color to blue again but then I'm gonna just adjust it a bit we'll leave tick-tock as white however is if you get a percentage text down here make that black to shop on the white so you create these cool little bar graphs here and a lot of the time they actually animate so if we go to design here go to animation I can have them have it slide in have a flip zoom so you get like all these cool little animation that'll show up when the page is loaded and yeah just just got some cool options there if you explore this you can see here you can further customize different areas of it at shadows to the text that sort of thing okay so now I'm actually back in tool for a minute I'm gonna get back into the design and the text here which is showing up as grey showing up stuff and I'll change it to light so it shows up and you said get the idea we've got this nice little bar it shows shows off certain stats that we want to show off as you can see on Facebook I remove the background completely but I kept a light black op transparent black here and just a cool way to sort of get some numbers across and get from there so very handy very cool like I said plenty of other options here to play with that's the bar graph so that's a cool little thing that you can add on to your pages there so I'm actually going to add another module underneath this this one's pretty short and this one is blog as you can see I can actually create a blog page here I've got a list of blogs what I'm going to do for the sake of this video is to show you how it works so I can do this and create a series of blog posts now what I'm gonna do very quickly I'm gonna just that I'm going to add underneath here I scroll down enough I'm gonna add in another full width column I'll leave that you know click on this I'm going to try and drag it into this full width column because I can move things around quite easily today you see about this full width blog segment here with which has some of my actual blog posts on well what I'm gonna do is I'm actually going to change this around show you some of the different options for one I'm gonna the design and layout and you don't have just the four words option but you also have a grid option it allows you to have sort of three like a grid of blog posts on the page either sort of full width so I'm going to go back to that and we're going to do I'm gonna go back to content here and I'm gonna make the post count one so if you have a home page and you only want to show you a last bug post you can simply display the one blog post and then what I'm going to do now I've only got the one and I move it back up here just for the sake of demonstrating and continue from that now if I go into here I can choose to only show certain categories so maybe I only want to show design tips and it shows this one instead I can add in other categories I can take out the excerpt altogether so all we have is the image oh wait sorry that is also on the elements here we go turn that off down here so shallow eggs if we turn that off you can see here we got older entries there because I only want to show one I'm going to turn that off because I don't want to show that either I don't want to show the day categories author I do want to show a read more button it's got a little read more button there now this you can customize I've also got some coding already set on this which is why this is sort of doing this weird hover effect but because I'm using my actual website some of the CSS globe CSS I've set in the whoops in the theme customizer is just playing with that a little bit but also turn off the featured image all together if I want to just have the title and the read more so you get a few options there for showcasing your blog post said you can change the background to white and you can basically help flow with it it's all pretty pretty straightforward but you can add in a full blog functionality on the page and you can even play if I come down here I see the read more text I've got some options there to style that under spacing I can add in some padding at the top I'll link that up maybe I want to give 20 left 20 right so maybe want to pad that up a little bit so you've got a few options there to make that work for us so that's a blog post section there we've got our graphs and we're gonna move down at this full width section again see what it gives us all right I'm actually going to move this one up above I'm gonna add a blurb so a blurb is actually it's pretty much just a simple full area of text with an image so I can give this so you might have decide that you want to have three on on a page maybe you are running a business and you going to offer three basic services so I might say service one offer this cool service and then we're gonna go to the image and icon I can use an icon instead of the image which is pretty cool and they have a whole host of icons here so maybe it's gonna be this one the left-aligned isn't looking too good with that icon so I'm gonna go to design your circle icon so I can actually create a circle behind the icon now this could be an image as you saw before that gray image before I can accessor line I can go left right center with the text I can also sense of that and then what we're going to do is we're going to duplicate this and create our three services so obviously I could make this service to one service three you get that idea for now I'm just going to go through and see what we can do and we'll choose something else maybe a dollar sign I'll accept you want to choose an image instead we'll go image for this one we'll just say this one here you can see you got an image there now well here's another really cool feature I will go back for a minute I will change that into an icon just for a bit of consistency I can actually do certain changes to these and apply them across so let's say I'll go down to the background here and I'll make the background white what I can do I can actually even turn off that background go to a gradient I like to go white and this color will also go white but I'll make it transparent and I can flip the gradient around start position comes up and position comes down let me see that color isn't quite transparent so maybe we create it like something like this now if I want to I can hover over this and I can copy the background going here and I can taste that background so you can actually copy and paste your style I can even take this whole item here and extend blurb styles throughout this page to all blurbs and you can see we've got the same style across the board because I didn't have the background here I've just moved it across to there another cool thing we can do is if we want to just have this one section be colored I could select this column area here and choose maybe a white background again maybe I decide I want that to be slightly transparent on the page or I've actually do the individual columns themselves so maybe I'll choose a white again now you can see we've got some top and bottom issues there but that's just simple case of me going into I'm gonna do the spacing here first the first of all I'm going to add in 20 pixels padding top and bottom there but I can actually grab this here and remove the padding on top and bottom so we have this cool little effect here you're knockin then of course yeah move those things across but you're getting the idea for now so I'm gonna keep moving downwards here so I'm gonna do a little plus module here and we're gonna see what else we got but this is pretty simple click here it's a button I can give it a link so maybe want to go HTTP ww1 open it in a new tab and maybe I want to say visit Google here you see we got the button off to the left here you know once again I've gone to one Center it the text I can make the text what's actually this is once again the style of my website so even though it says dark showing up as white I can change all these different options spacing I'm gonna side to add a bit more spacing left or right so I've got a hundred pixels left link it up we have this big wide button add a shadow on the outside so you've got so many options here that you can play with it's really really handy it's a silly get the idea we've got a button there so now we're gonna add and and keep moving from there so I'm going to go down to this blue plus here and I'm gonna go regular will create another regular row so I'm gonna go to columns again this time I'm gonna start straight away that'll call to action so what I might do and I'm gonna make this background here black so you see our page is starting to take shape a little bit here doesn't look overly fantastic but it's taking shape now once again because this website is style to have white text in all of these areas it's actually showing up as white here but what I'm gonna do for the sake of this I'm gonna take the title text I'm gonna make it blue and then and also as you can see we're gonna adjust the various levels of heading that we have but the body text I'm going to make black so we've got this cool and call to action the other thing that is cool bear is if I have this background I can turn the background off altogether and make that body text white or if I don't like what I've done with that style I can actually get into the color here hover over it which you can see we've got mobile options for different devices options for when we hover I'm just going to remove the settings all together it's seen with a title text so we can style that pretty easily now if I want to add a link we've got text here I'll get our button so maybe we're gonna say here is our offer you ever turn the caps off maybe you say sign up and then you can add your link in here which for now it's gonna add a hash you'll be a link to any page on your website it's got your sign up maybe where I want the button to stand out so I'm gonna go to my button settings customize it make the background color red so you create this cool little call to actions now I think about a lot of these is even though it has basic things up title button and then you're moving down from there you still have your classic elder so I can still go in here and add media and add in any images that I want to see so I'm not just stuck with the one format and I can still even go into design I can go into border and maybe I want to create a border around the whole thing of a couple of pixels and I can sort of border off this off once again if I play with the spacing and padding I get this a bit better around the outside I'm not gonna worry about that was sort of keep moving but you get the idea you create a call to actions this is just once one module where you can just have title a bit of text and then get people to sign up for something so it's pretty cool so on the next column over here as you can see we've got the call the action I've stopped moving a bit quicker now because it got all these to go through but some of these from touch on pretty quickly now the circle counter is a little bit different something you probably haven't seen before the circle counter allows me to go so maybe like I said before maybe were trying to reach a thousand followers on Instagram or who's I can say 50% now I can make it a percent sign or I can make it just no percent sign so that's a pretty handy thing it's going to design I can make that text number text I can make that Louvre I can also change some of the arms here so on the circle so color can be blue again green maybe it's white circle background color can be black or maybe I want to make it just a little bit lighter so you can see just see that outside their circle background we can change that opacity a little bit so we've got a option here to change a few bits and pieces it's when followers here is in the title it is in black so I'm gonna go to my title text make that what so we have this cool little sort of circle counter here and of course another cool thing to do is have some animation there so as it appears we get this which is pretty great so that's another cool feature obviously it's only very small on the page I do believe there are some sizing options so I can make it bigger if I want to now when you load the page this animation does show up so if you have people you're trying to sort of capture their attention they load this page but that can load up as well with that little animation so that is pretty cool so I'm gonna keep on going down the page here I'm going to add another module code now this one here I'll just add quickly and remove the basic idea is I can add HTML code in here that's basically it you pop your code in there render it and so if you like an iframe or some ad code it's quite easy to add in there I'm gonna close that and I'm gonna Bend that code module but it's still there not anything - if you have not sure something is there there's a little button down here open I'll close this I'll go to layers button I can go through to each of my sections find what I need I've got my code module here I can bend that here close that off so I'm gonna keep exploring from there comments so if you have any comments on your page you can add those on there so this is just basically like the comments of a blog section you can put those anywhere in the page you like so that way if people want to leave a comment you can control where they go on the page which is pretty cool this is good if you're using the theme builder you can actually create your customized blog post template put the comments where you want them to go which is pretty also pretty cool so yeah very very standard sort of styling I have got any comments on this page so I can't go through it but that's basically what it is contact for now the contact form of this is actually quite powerful it starts off with this basic form you can little capture math formula there I can decide turn that off for to spam protection we can actually use a spam service such as a free capture so you can see go through and add in a Google reCAPTCHA which is a relatively new function of this which is pretty cool so yeah a really cool way to protect your contact forms but you've got so many options here you can completely customize this form I can add a new field so we got that field ID gonna call this one so I say you know let's gonna call it Raina please don't have a name for it title might be random now with our field options I can't make a middle of like so it has to be certain of characters or a maximum length we can only allow certain symbols if we want to we can make it required or not required one thing that is cool is conditional logic I can have things like rules like name needs to maybe the email address needs to be less than oh yeah that does not contain the letter A for this - yeah enable so you got I'll go through too much of that but you have the idea you can go through and set up conditional logic so certain fields will appear or disappear depending on what you've entered in the rest of the form so if you've got a fairly in-depth form you can add a lot of rules in there for certain fields to show up you can change the background of this one area you can even go on to design here and with the field you can make the whole field red or you can make it black again and even give it like it just a little underline outline so maybe I go down to border go to underline I'll make that white into this cool stylized little area here we can use to type into for our form it's a very cool contact form you can craze many fields as you want to get duplicate fields you can see here we've got these little 50 50 s here so maybe on the second email address let go in other design and layout and make that full width so you got some pretty cool options there you've got also different types field email text checkbox so you can't add checkboxes in there just quickly make that text I'll make the text color all right work on that little load up but for an add in some checkboxes I can add a new field here option two it's that way they can check those boxes or I can make it something completely different let's all get tick it's going to get back here for a second so I do want to change the text so I'm actually going to stylus in here just for just to get this quickly on the guy so it is now white and you feel you've got radio buttons you can add in radio buttons drop-down so there's actually a pretty why not even necessarily need to install any contact form software on your website for using Divi because you can basically build a contact form just using its standard features so that's a very powerful thing added to Debbie as well so the next module I'm gonna go down start to get to it now got a countdown timer so let's say we've got something happening on the 22nd of May say Big D's birthday now the background at the moment gonna make that blue so actually countdown so if you've got a product watch you can actually go say maybe a product wash you can a sec I want to launch the product at 4:30 in the afternoon and this will count down to that time which is a really cool feature like I said product launches that sort of thing and it allows you to realistically set an actual time and I'll just put a fake timer on there you can add a background if you want to as well so I'm ever going to go into the image here it's gonna add in its here an image blend so we'll go baby overlay so we've got this cool effect here with our little countdown timer so that's just using the basic features of just you know your basic features of the theme it's pretty cool pretty easy to make some really effective stuff so that our product launch countdown happening here now I think I'm gonna do while we're doing this I'm going to save this draft and we're gonna move on to the next one now divider this is just a simple line to show divider I can go to the line I can make it white well maybe I can make a green and I can go to sizing and change the thickness I can even change the width of it I want to Center it so we've got this cool little divider section I actually use this a bit for breaking up text so that's pretty handy pretty straightforward email opt-in now this is really cool there's a lot of us out that read email marketing once again we've got spam protection so I can go into the background here I'm going to turn off use background colors it starts transparent so if you actually have a full row set up and you have like an image on the right because there is an image more image module you can use so let's say we're going to do actually we're gonna add in a new row here gonna go a regular we're gonna go 50/50 again I'm gonna scroll down I'm going to cut ahead a little bit to image module and we're gonna pop an image on here so let's say this is our product for food co-op background is going to be the image let's got off this for now and we want to have this set up as our little email opt-in so I'll go into here and go free diet guide signup to download button download now or maybe we want to say sign up and download now whoops now that was actually dynamic content which means that if you set this up when you're seeing builder I can actually add in something like the page link or the website title or even the page in archive title so that's something for the theme builder which I've covered in another video just let it show that to you while we're at it the footer we can add in something like we never sell your audience formation now the email account not too hard to set up if you've got MailChimp convertkit your all all these options here so we get a MailChimp selector list this is something you set up in the Divi theme options something for another video but you can link it all up so that way it's all integrated very handy very cool and one thing I just thought of then the footer I want that to be centered so success action you can display a message or redirect your page a spam protection again you can use a spam service such as recapture and link up your account you can this is a common thing we can set it up so if you click on this it links somewhere else don't necessarily want to do that if you want people to sign up to email so you've got some pretty handy stuff here like I said I can pop an image in here for on to something down low I can go pop an image in there or use any of the basic WordPress editor functionality and it'll pop up in here so that's how we're able to create a nice little opt-in area using that email opt-in and the image module so let's go back up we'll fill this space so we've got two emails in filterable portfolio if you have basically a series of projects this is something you can use to sort of show them off now this is something that I will have to show you one another area so what I'll do I'll just bring up another website of mine now this is actually a website of my website I've actually got a portfolio set up on here because I don't have any projects on that other website this website has a portfolio section here for website designs and logos and graphic design but the filterable portfolio does is that our allows you to filter between these so I can actually add in different set categories and you can click and turn off and on these different categories so all these would be in the same spot but you can go through and turn them on and off sort of can't really display it right now because they'd have to set that up although maybe if I just look in here and quickly set that up for you so I'm gonna actually just pause this video for a second set that up so I can show you what the filterable portfolio looks like then we can get back to our page okay so now I'm actually editing the page if we may add in a filterable portfolio just down the bottom here so we'll go down filterable portfolio and I can choose to include certain categories or exclude certain categories let's say have 50 posts on there and this is for there's a custom post type that comes with the Divi team core projects so you can see here everything is just one by one so if I open up the options I've got a few different things here for one I can actually turn the title up and turn off the categories if I want to or the pagination and maybe on the layout I'm going to change it from full width to a grid similar to the blog section seen see here now that we've got this full file can go straight to logo design only graphic design you get this cool filterable portfolio section hearing so we go through and click on the various areas that you want to look at so that is the filterable portfolio using the Divi team okay so that's what I'm gonna look at the gallery so just like a wordpress gallery a little more functionality we can go and create a gallery here add a bunch of images so maybe I want to add these five very boring images in here six I can change the order it could be at random succeed quite this little gallery though shows for there I can actually change that to show only two at a time and you scroll through or maybe I make it six and we can change the column has actually changed if I decide to add in another full width section in here and move this gallery in there it'll actually give us four columns so you go and there have as many images as you want you can move the images around and they do sharpen a nice little pop-up so when you click on the image it shows up usually so the screen darkens if you get a full view so it sort of animates onto the screen if you look at so that's a pretty cool feature to the gallery you know you got your options for the grid you can have a gallery slider so it simply goes across so you don't have to have just the grid it could be a slider of images very very cool and yeah pretty handy so that is the gallery we'll click keep it on the slider for now and go from there so the next one we're gonna look at now if I go back up into this little blank space since we've had the gallery there's an image we've done the image or login so this is just like a WordPress login form you can add to your site title goes here so if you want them to be able to log in to the website quite simple easier to do so log into the website gain access and then of course once it's done you can redirect to the current page or yeah you get a few different options there so that's just a simple login that you can add up if you want to set up a wordpress login on your on your site very easy to do continue down here we're gonna add a module at the bottom get our login map and you do need your Google Maps API set up for this which does cost a bit of money if you want to add a pin so I can go to say you know let's say King Street Harvey at bay that's the title I'll call it say nineteen King Street hobby Bay on the map I'm gonna go here and find it'll usually bring it up but we do need to actually get the Google Maps API for this so I actually generally just use the iframe these days for it as you can see here we do need a Google API map but we don't have it here for this website unfortunately so I'm going to trash that one next what I'm going to do is a menu so we can add in if you get a custom menu set created for your website you can add a menu in there obviously there's a few different options you can create as many menus as you want and add them onto your site now these are also I believe they're responsive or they bring up your little hamburger icons if you get too close yep the to narrow a screen it activates like hey it's a were looking for like your actual normal navigation you can't add a logo in so let's say we've got this logo somewhere walk you got this primal one again so you get that logo we've got a menu there maybe want to again go for with close that off drag that into a little full width area there look at our logo you can adjust the size and obviously you wouldn't want to leg up so much space top and bottom but of course I get left aligned centered with the menu underneath whoops go be getting a bit too fast here we'll get back to left aligned logo so we can't should round the corners of the logo if we want to so now we'll go 50 around those corners sizing that's what we're looking for the logo with knock that down you see we got a menu over here so yeah quite a nice little menu section here pretty straightforward yeah nothing too exciting back around once again choose a black background the new text can be what that's the active link color just the normal menu text will be down here somewhere so text color light you get out menu that there's a lot more options to customize that something to be explored definitely if you're using the same builder this is a really good function to use just yet have a bit of a flow with that one if you get the chairs so add another monument module in here number counter so this is another counter similar to the circle only without a circle so you can say you know I think we can do is turn off sense on because it doesn't have a circle we can say 987 kittens saved today go to the design title text can be yellow so there's our little number counter who saved a bunch of kittens today we're good to go okay I'm gonna add another three columns in here just have a play with and underneath and number counter gonna go with a person so we can go mr. awesome create a position for them maybe they're the manager and we can add in social media links here for this for this person so I'm just gonna add in some just some hashtags and here my hashtags but it has to give it something we look at so this is my profile this is a perfect personnel to a site you know once again I want the text to be a all light color and you see the little icons here to check out their profile add the background move if I want to maybe I like that white and I'll get back into the text dark again and then of course on the image we can add a picture of the person in question so maybe here we go this one here let's picture of me a picture of the person you got some information and of course we can play with the design a little bit we can actually make the 50 maybe 50% create a circle here now this is playing up a little bit because I'm recording it she's got a lot of memory but you can't create just a little profile here Center this information under the person very cool very handy again portfolio same as what I showed in the other website where we're just instead of it being filtered it's just an all portfolio post navigation so we can simply navigate within a category you can have previous or next so that way website traffic tips so that is sort of like the page before so that way if you're creating a post using the Divi builder you can actually put this at the bottom and that way people can go left and right through your posts and go sort of like to the previous to the next as they read so that's a cool little feature if you're designing for your blog posts using the same builder post slider and this is a pretty cool feature I'll go all categories and you see it comes up with this slide I put a lot of text in my featured images so this isn't really suitable for we're doing but if I go into I can turn off the exit button has read more will go date you know let's switch that up will get old to new now under elements keep the arrows will show it turn off the arrows turn off the post meta featured image we want that the background but we can turn that off so start to play up a little bit now recording for a while you see here we get this cool little slide through these cool little slider I can pop the image at the top whoops and there's the background I'll just make that black so you got a few options with the featured image it can go to the left of course this isn't a very big area so default treats it like a stack of mobile sort of section so I'll pop er here you can see we get this left aligned featured image info on the right to create these cool post sliders for your blog as well you really want to show off those blog posts this is how many modules are on the Divi saying that this is just a huge so much of functionality available post title now this is another thing it can be it's just simply putting the page title on the page pricing tables this is a very cool thing if you're trying to sell once again I'm going to go up to the full width section here and you see you can add in the this little pricing table now what's really cool is if i duplicate this that's what we're gonna do we're gonna get a text well make this text darker so featured header so let's go on to this center section here now all I got to do is go in there and add features in here more features you can add a price so the price might be 500 you can't see our moment cuz it's got a bit of white on white but we'll get to that in a minute this is the featured table so you can see we create a featured tier that so lifts off from the rest of the table and of course we can't go through them customize these areas you can't customize them individually in here if you wish to so you can go in title text appear red in the background there and you can change the text color to yellow if you want to if I want to just the pricing table overall oops just to note that because I'm recording this it is playing up a little bit so I do apologize for any confusion that might cause what's just a little bit so currency and frequency text we go read with the currency price text make that blue on the featured and on the normal I said we get blue the background and the text and the pricing area background will just go purple so you can't that's very ugly but you can't fully customize this pricing table and then you can even add a button on there if you want to as well so let's say we go into this Center one here button we can say sign up and then a link will go yeah alright so I'm gonna do is I'm just gonna save this for the moment and I'm going to open a reality so hopefully we can get rid of some of these performance issues so I'm just going to pause this video for a second okay so we're back running here again and now we just looked at the pricing table and the next one's pretty easy we've got our search turn out a little search area in here and I can make the fuel placeholder color blue background color white the good news is now is I can add a placeholder in there I can turn the button off or leave it there and I can actually exclude categories or exclude pages and altogether or exclude posts so I can choose to search our only posts or pages one thing to note is I don't have what commerce installed now I do believe you can to credit product search as way as well but because the way I had to set up it's not actually get that options are available at the moment but you can fully customize the search area so it can be good if you want to create a dedicated search area on your page now I'm going to add a millisecond in here some of these we're gonna we're not gonna have to touch on shop this just adds a we call my shop on there like I said I don't have ecommerce installed so I can actually really show you that right now but a sidebar so if you're creating a layout and you want to use a widget eyes sidebar one of the things is very cool is I can add my normal sidebar in here which will show up on a second so I'm creating a once again in the theme builder and crate this actually used my put my sidebar in there and use it like a WordPress sidebar or which I can actually show you here necessarily but you can create in your widget area if I just go in the new tab I can create a new widget area here so I'm gonna call it new widget area create that and when that pops up I can use it just like a normal widget area which I'll refresh you see we get our new widget area right here I can use that means if I go back I can choose that here which is not there because I would have to refresh the Builder but I would choose that area there and I'm create a widget eyes area within the page that I can go into and change there which is pretty handy so the next one we're gonna look at is let's go back in social media follow now this is pretty handy as well so you got your Facebook Twitter now that's cool that this is I can change the alignment obviously I can change the icon custom icon size I can make them quite large I can go into the border and I can change this as well maybe I want to make it 50% I can make them circles and I can add in a number of different social media platforms so but Google Plus oops so Google Plus which is obviously defunct now but you can see all the different platforms we have Instagram Skype MySpace you dribble YouTube so you can go in and create all these nice little share buttons that are pretty cool and yeah just pretty handy you can even though customize you can add in follow text next to each one very cool very handy is a yeah there's a few things to go through here but another cool thing you can create so that we can get people onto your social media within your page so keep scrolling down social media tabs you can create a tab area set up similar to the accordion I can create multiple tab areas I can go you know this is three tap to everyone want to copy that and then as before I can show click on the tab it'll change information on beneath so similar to the accordion not quite as fancy and animated but pretty much the same functionality where you're creating information that goes under various tabbed areas all right so let's keep going there tap testimonial once again in that photo in here so let's get image add a photo like this person here Joe Joe's a customer from OpCo I was very upset with this that's his testimonial likes everybody's image with elements with the quote icon turn that on or off a link we can create a company link URL so let's go a little hash so they click on that I can change the background maybe I want to add a background image of some sort so we'll go Scout this it's got a background image obviously that doesn't look too good so it'll Bend that but there's so many options here for this a little testimonial area crowd of course the quiet icon we can change that custom to change the colors around for that if we wish and that way you get something that really stands out customized quote icon size you can make it as big or as little as you want the image again we can actually make that bigger taller completely turn off the rounding of the corners make it square so we got our little testimonial where so you can add those in quite easily and get rid of this sidebar because I've got it set to sticky and they're gonna add something else in this text now this is just a basic text module this is probably one of the things you'll use a hell of a lot because you can simply go in I can make that background what if I want to I can add in some padding so let's just go say 30 I can just use a basic text section here in the middle of the page and do what I need to with it change the background to red white and of course I can set up all my head styles for the headings and this is the same for all I all of the modules that have text areas on a button change the color of the links to red so that way if I create a link just as you wouldn't wordpress the link is red so the text very very useful because a lot of us use text on websites but keep going from there like I said all these can be completely customized you spend the time getting here you want and now the toggle similar to the accordion again where we have a simple toggle but this time we're only adding one at a time so I'm gonna say read this and I have this option here state I can have it set to closed I'll have it set to open and then of course they have to click to close it you can actually have it set to a predetermined state which is pretty cool and of course with the toggle we can have the background color when it's open white and the closed background color black so black opens it becomes white that sort of thing we can style that how we want to so you can have as many of those as you want so that way you can even pop them across the screen or in different areas of the site very handy I'll use one on my web design site for finer details that way doesn't bloat up the page vertically but they can click on it read if they want to and they I've actually got a few more to go through after this not a lot just a few more but I can add it a video so let's say I've got a YouTube video in here we've actually got one there they've linked up but if I want to let's say I'm gonna keep that YouTube video there once again I can bin this add a video I can insert from a URL for the youtube link in here I'll just close that for a second now what's really cool is with the overlay you can actually generate pop an image in there so let's say we want to add a different image than the one that's on YouTube so let's so we'll go with this weird square icon and we get this cool much more minimalistic look when they click on that it switches to the video and plays on all YouTube video so that's a very cool little feature and that can be once again put into a full width column put a bit just about anywhere on your page and you do have a few options here to stall the play icon so let's we go okay just reapply that overlay so it shows up obviously once you've clicked the overlay and it disappears but the play icon you can change the color I see a boy player icon there we go so you can't play with that a little bit there's a few other options here you know how to shadow pretty pretty cool way of embedding videos and off-site that way before they click anything it looks nice clean professional finally a video slider so we can add a number of videos on here so let's so you got the first video here I'm gonna create a overlay for that go this one tick duplicate that video duplicate that video I'm gonna change this background to something else so now we have a video slide out where they can pick the video they want to watch go back and forth between the two and obviously you have different videos this is gonna change as you do it so it's gonna look different but you still get the basic idea nice or video slider could be handy and sieve pop and a whole bunch videos on a page just have them slide through and pick the video they want you know the controls you've got a few options there not a lot of options being video because all you're doing is displaying a video but it's still very cool okay so that's the majority of the modules that you have but there are a few more because what happens with Divi is we've been using standard Broz they also have a feature with a call the full width row if you look at these rows even though the background is full with everything's confined within a certain space so if I go here I can add in a fourth row we get just a handful full with code is basically your except code that stretches the full width of the column so for right from edge to edge or for with image this is a really good way to demonstrate how for with row works that image becomes the full width of the page regardless of how big it is so that's a very handy tool if you want to pop an image there have it be the full width regardless and yeah very cool now there's a few other things here for worth portfolio I don't have anything in my portfolio to show as you can see no results that's just another version of the portfolio I showed you earlier but I think a starlings a little bit different with the images touching they're all connected like a chest like a chest grid but with all your various images and then another full width forward to post title so you pop in your post title in there you can pop a slider in there so you can create various slides with backgrounds so let's just quickly pop some background images in there once again we'll try this so you create a slide so let's say well go that there I'll go in here choose another background there's so much to choose the color blue so in create a little slideshow series it goes through so maybe on our blue slide we want to change a few things around obviously you can change the various areas there's normal link to a page if you want to you got overlays so you get a few different options the other thing is you can add an image so we've got an image here so now we'll add in this later in this one again so we add a left image here for the slider similar to the post or I can move this add the video so you can create these cool sliders and you can't change I believe somewhere there's something you change the layout but they're going to do too much sort of gaming idea adding a slideshow to your page is very easy for with slideshow very handy and of course if you want to do something that you feel this is a bit too strong we can go back in here to the background and of course we can change the blend mode if we want to darken or that won't make a difference hard light that brightened it up a little bit but you sort of getting the idea luminosity and then maybe you want to add a gradient at the top like we did earlier so we'll get out a gradient I'll make this see it's behind it's create this cool effect so instead we're gonna go over above the image and yeah so we've got a few different things you can play with here but you sort of get the idea there's a lot of options here the final one is for with again forwards map like earlier for with menu just like earlier now the full width header is something that I use a fair bit so I'm gonna do it I'm gonna exit this I'll show you an example the for with header and then that'll be pretty much a wrap on the video now save this draft exit you can see we got our page here you see these animated on screen if you're there fast enough these popped up we've got our nice sliders here animated circle product launch everything is exactly as we laid it out got a nice little animations it's very handy very cool but what I'm gonna do I'm gonna go to home I'll show you this basically show you this four words head up so you get these options you can lift the line right aligned I go right into a right now I'm gonna do a dedicated video to the header but it's a cool thing to add to some of your home pages now this is I've set this up to be a certain width a certain height top them above and below and then create two buttons the first one takes until start more page the second one just simply Scrolls you down but in create background images and some parallax I'll show you quickly what I mean with the parallax I'll go to an able visual builder if I click on this forward tada now with my background it's actually in the background of the row but I'm create a parallax effect so that way as we scroll we get that cool thing that cool effect how it moves on the screen it kind of ruins some of this here so you can see how I've set that up but we do get a very cool effect if that's something you're looking to play with something else you can do with this header is we can go to design and we can make it a full screen header that makes it by default the full height of the screen so whatever height the screen is it will take up that full height create this cool sort of effect so you do have some pretty cool nifty options there in this the other thing too is there are things like a scroll down icon which we can show and that automatically Scrolls you down to the next tab I've actually done that myself here with to learn more and of course there's just there's so many options with this header it's a great option to really customize and create an impact when people land on your site so maybe I want to add in another logo alright and the old logo from the old so we had an awful logo in here under there for the header image so you've got a few options there now I can set another text here we've got our different two buttons you can add in another title here a subtitle there as well some text you can see we could create more grow your brand sitting in there there's a lot you can do it and with the layout we can align left' i've scented this on the text so it's seeing in the center the line right center turn off full-screen there's so many options you can play with now I've actually done this on my main web design site where it has a full screen header and I've got the same two button layout again and this is where I used to run my full-time freelance business same thing again as you can see I like this formula but it's a full screen header so it doesn't matter what height it is it takes up that full screen so that's pretty handy very cool I'm gonna exit this and discard because I want to keep my homepage the way it was but I hope you found that video useful it's a very long video something I don't usually do is very very long videos but it shows you exactly the modules of Divi so if you were thinking about checking out the Divi theme but you didn't want to commit any money to it this is designed for you to check out now if you do want to go check out the Divi theme you can either buy it or you can actually go in and check it out then I believe there's a free try out area there check out the link I'll pop it up on the screen this is an affiliate link by the way I do make a commission if you happen to buy but this is the theme I use this is what I use for everything like I said I've built hundreds of 100 websites with it my websites built I couldn't recommend it more and if you decide to go through with it you won't regret it and I will be coming up with a lot more videos in the future showing you how to use this thing so if you like the video please give it a like if you want more like this especially videos around divvy please subscribe and I can then see that you want more of these videos and do more than for you and you'll know when they come out otherwise have a good day and I have to talk to you again soon see ya later you

Channel: Wade McMaster

Views: 5,487

Keywords: divi theme tutorial, divi them modules, Divi theme customization, divi accordian, divi builder blog modules, divi builder tutorial, divi builder tutorial 2020, divi builder tutorial 2019, divi builder plugin, blurb module, blog module, button module, divi builder review, divi builder backend, divi blurb module, divi visual builder tutorial, divi landing page, divi 4.0, divi theme, wordpress tutorial

Id: vtGGNm8p4KY

Length: 73min 2sec (4382 seconds)

Published: Mon May 18 2020