Divi Advanced Design Settings & Custom CSS

DIVI Advanced Training

In this tutorial I will be showing show divi advanced design settings and custom CSS settings, that are available for our modules rows and sections that are built under divi builder. So, to make things a little clear let’s dive into the divi builder so that I can show you what I’m talking about, here is the page which built with divi, I’m going to edit the page and bring up the divi builder so that we can dive into some of the settings.

So, whenever you edit a module or add a module for example here is the blurb module in the quickly setting icon bring the settings, there are three tabs general settings, advanced design settings and custom CSS settings. Now general settings is that whenever you need to use the divi module and to use it well is in the general settings, but if you like more control, you really want to put some work into customizing and module, you can use the advanced design settings which had everything you ever need and to customize the appearance of that module.

Anything you can do in CSS, can pre-much do in advanced settings. Tab being set if you rather not use or custom controls then we have here advanced design settings tab or you can use the custom CSS tab instead in just typing around CSS, it happen to be a web developer. Now in custom CSS tab, we break down all the different elements of module, for example broad module here you can play CSS in main div, you can create pseudo in after div, you can play CSS in the blurb image, the blurb title, the blurb content or individually you can do all for individual module on the individual page and it saves your lot of time you know, if you had to customize your appearance on module on one page or you want to create whole typing just to do that, this is all you use here and easier to manage as well.

So Let’s start off by taking look at advanced design settings and to do that first thing you need to look at the page so that we seek our starting point, whenever we dive into advanced design settings we can do what we want to do and also can use them together to create some unique effects.

So here are the two rows of blurbs, just standard blurbs not customized, standard design it is. Inside let’s open the advanced design settings for our first probe and take a look what we have. Now the advanced design settings will be different for every single module because different element mark module different but in general same types of options are available for our modules so you can see web options, sizing options, you can see several options for text including Header Font size, Font style, letter spacing, background colors and custom fonts, all kind of stuff you want to change is going to be available but different collections of text settings are going to be available for different module.

So in this blurb module, particularly have collections setting, I’ll go through one by one can explain it you. First we Image Max Width, so this module has image width in it, if you want to upload one and if you want to give image max width you can apply here. Let’s say you create a blurb and put live image in that you like it looks in one half column but as the size break down in mobo, everything gets forced into one column, you don’t like a bit image gets, then you apply image max width to it, type the max width here and name you want to put it here.

Next step is using Icon Font size, you can use to apply custom icon size in the blurb. You can adjust the Header font, you will find dozen of Google fonts here to apply to header in the blurb, you can adjust the font size as well with bold and Italian, if any time you want to reset to default you can click this reset icon. You can also wipe the whole design setting by clicking the reset button up here, it just quit them out, so it will wipe all massive things in a crucial stage by just clicking the reset button. We have Header font size to adjust the font size, you can adjust the color of the header font, you can adjust the letter spacing between the words in header, we have the line height, you can do all this for body fonts as well, font size, color, spacing and line height, background color to apply background color to blurb, background image can be set, you can use Border on it, then we have custom margin and heading.
Let’s play with these settings, I’m going to increase the Header font size and I’m going to make it bold and to change the actual font with different font, here I increase the icon size as well, make it larger, maybe I increase letter spacing. Then in the general settings we can change this to icon on top and make text orientation in center. So we play with advanced design settings by increasing the sizes, by the color of the fonts as well as the font itself, so you see the body change quite a bit, by making this text bold, make it large and changing the font.

So let’s step further, it’s about the advanced design settings, this time I’m going to try background color, so we put background color on this blurb which usually has no background color, So this is the good example where we can change the background color, blurbs don’t have any background color settings in General settings it’s only in advanced design settings, the reason we separate some of these things because when you enter advanced design settings, great power comes with great responsibility, you have a lot of power here but you can mess up with this all power so you need to adjust the things with care. This the example of color where you need to think about of your choice, so here is the blurb where you don’t have any background color and now going to apply background color to it. So these choices can have few consequences then we have adjusted other settings so go along with that choice.

So first of all I apply the background color it makes the text invisible which means we need to go to advanced design settings to make this text to different color, the blurb icon as well. You can also see that there is no space between the edge of this module, the box and the content and anything in it, you can control all these things in advanced design settings. That’s the beauty of it, let’s decorate it, I’m going to change the color of the title, I change it twice so it looks great in purple. Then I’m going to change the body color as well, then we have some headings, I want different space between the edge of the box and content in it and to do that I’ll write in custom padding and pixels, then I’m going to change the icon color to white, it was just few simple clicks with that icon completely transformed into new blurb entirely. So it becomes a block element which has padding on the margin and there is room for text to breathe in the cell, we change the color to white which show quite better, so we do all this with advanced design settings. So this is the example how to use advanced design settings to give your website a completely different look. So this is the purpose to introduce these settings.

So I can delete my other blurbs and duplicate this one, if I want to reduce it little bit just change it to 70 pixels instead of 100, then I duplicate this, put upside, then I can change the background color for each of this, from purple to blue, I’m going to change this one to darker so that it look nice, then we need to update this, refresh, so here we get three blurbs, you can completely transformed the idea of blurb into this box element with varying background colors so it looks very cool, so there are the few examples of using the advanced design settings.

Next we will dive into Custom CSS settings which is the next box like I said, This is if you are having a web developer it has familiarity with CSS so you can code yourself, you may found it faster if you code it by yourself instead of using the advanced design settings, first thing you do there for example you want to adjust the font size of blurb title myself with CSS, I knew these settings and come here and then go to Custom CSS and find the blurb title and type font size 40 pixels and write letter space as well. Then refresh and take a look at the changes, as you can see my CSS change the font size bigger and increase the letter spacing, what so great about this is that you target Custom CSS in individual element in page or even in individual modules, but before with any other theme prior to divi 2.4 you have create whole trail thing. I have the CSS and can add CSS to every single page to the site because even though using it on my page. So the custom CSS give you so much control and when combine with divi library these settings become even more powerful, so now we create this custom, custom unit of these blurbs spend a lot of time, this is perfect opportunity to me to save whole words of library later on down of words…achieve this look there is no reason to apply these settings and start from scratch I can just look into the library, I’m going to open this row and save it to library and called it blurbs made of blocks and save that.

Now if you ever want to use that again I can click Add from library and found that Blurbs made of Blocks and add it and I’m ready to go, so now you see these blurbs are duplicated now. These are basically of advanced design settings and custom CSS settings and differ from general settings. Like I said generally everything you need to achieve awesome are already in general settings, I f you need to add clouds for yourself and for the clients then you can dive into Advanced design settings and even in custom CSS settings. I think we must do now even combine with libraries I just show you, you can save much time and you can be developing these sites so much faster. So this is about advanced design settings.