Format Divi Text Module. Use CSS To Get Consistent Styles

hello and welcome to divi coaching today we're going to be looking at typography in divi and particularly at the text module and how we can style text in the text module and get that styling consistent across the website this is something i've been asked a lot of times about because as standard the styling is pretty basic and you have not a lot of control over it the result of which is you end up creating a text module for every heading and every paragraph and that's a little bit clumsy and there is a better way to do it with css it's not super easy and straightforward but i have included all of the css in the description and i am going to talk through each section and explain exactly what it does and how you can customize it to get the look and feel that you want so without any further delay let's get started first thing i've done is created a new section and in that section i've created a two column row first of those rows i've placed a text module and in that text module i've pasted in some text so the first thing i'm going to do is go through and set some headings so i've put in headings 1 to 4 here the same principle would apply to 5 and 6 but in order to keep everything on one screen i've just gone with four sizes of heading so i'm going through and assigning headings to the text heading four i've then created some bullet points so an unordered list so i'm going to create a bullet list i've then underneath that created an ordered list so we'll turn that into an ordered list and finally at the bottom there is a block quote which i've set to the block quote style i've done nothing else in the way of spacing this is exactly what you get when you input the text into a new divi text module so that we can see uh more clearly what's going on i am going to make a couple of design changes so i'm going to go in i'm going to box shadow and i'm going to put a box shadow around the text module so we can see what's going on and then to give things a little bit of breathing space i'm going to add a five percent top and bottom padding and a five percent left and right padding as well next thing i'm going to do is save this and come out of the visual builder and i'm then going to go in using the inspector in chrome to see exactly what spacing is set by default in divi i have the inspector window open it's actually off screen at the moment but if we now hover over each of these items we can see what setting is set by default so for this h1 we can see that there is a 10 pixel bottom padding set then if we come down to the first paragraph we can see it says 14 pixels bottom padding but if i actually look at my inspection window i can see it's actually set to 1m come down to the next paragraph and the same thing we have 1m set as the bottom padding next heading 10 pixels next paragraph 1m and so on so by default each heading is given a 10 pixel bottom padding and each paragraph is given 1 m of bottom padding now you can see that something a bit odd is going on with this last paragraph and if i look at that on the inspector i can see that the last paragraph of any text module is set to have a bottom padding of zero so that's regardless of what comes after it so in this case where this unordered list follows the paragraph the spacing is not very helpful if we had put another paragraph anywhere even right at the bottom that would not have happened so the very last paragraph in a text module will get no padding at the bottom we can then have a look at the unordered list in fact again it's showing us 14 pixels of padding bottom and left but it is in fact again 1m so it will vary according to the font size and again the ordered list has a padding of 1m on the bottom and no other spacing finally looking at the block quote this is a little bit more involved so in the block quote itself we have a margin of 20 pixels on the top and a margin of 20 pixels on the bottom and in addition to that there is some padding on the left which is what's spacing the words away from the bar so that is what is all set by default that's not what we want we're going to go in and we're going to customize this using some custom css before we start adding the css there's two more things that we need to do first i'm going to come back into the text module i'm going to go to presets at the top and i'm going to say create a new preset from current styles this is going to create a new preset and i'm going to name that preset my spacing and i'm going to click to save that will then flip me over into the preset builder i'm going to go to the advanced tab i'm going to go to css id and classes and i'm going to give my text module preset a class of my hyphen spacing and this allows us to target the css that we're going to write to any text module that is set to a preset of my spacing because this css class value is carried through with the preset settings i'm going to click on save it will ask me to say whether i'm sure once we've done that we can save and come out of the visual builder i'm then going to go to the main menu and i'm going to click on theme customizer and once we're in the customizer i'm going to click on additional css and we don't need this message so i'm going to close the message so let's start with the first bit of css now if you remember when we looked at this with the inspector we saw that there was 10 pixels of padding underneath every single heading and we want to remove that so that we can control the spacing based on the element below so i'm going to paste in some css here and what that's going to do it's going to look for an element with a class of my spacing so if you remember when we set up the text preset we entered my spacing into the custom css class and we can target that by putting a period followed by my spacing when we enter css what this statement is going to do is it's going to look inside any element with a class of my spacing and it's going to look for an h1 or an h2 or all the way down to an h6 if it finds any of those elements it's going to set the padding to zero so you can see that's exactly what it's done there if i for example increase that to 10 you can see the spacing is 10 but in this case i want to remove the padding so i've set it to zero and we can move on to the next item next thing i'm going to do is i'm going to look at every item that has an item following it so i'll make that clearer by pasting in the css and i've actually changed it to be red so the selector for that css is an asterisk which selects everything a plus combinator as it's called and another asterisk so that might look a bit complicated but it's not really all it's saying is look for anything that has anything before it we're actually using this as a catch-all which is going to set the padding and the margin for every element unless we tell it something else with subsequent css one thing you probably are aware of is that with css it's actually a parsed language in other words the browser follows the css instructions in order so css that occurs later in this list will override anything that comes before that will be apparent a little bit later so what we'll do here is now we can remove the red coloring and we can move on to adding the next statement next thing we're going to do is we are going to look at anywhere where there is a heading that is followed by a paragraph again i'm going to set those to red so we can see what's going on and what has to happen here is that there has to be a paragraph which is immediately preceded by a heading so here for example where there are two paragraphs it isn't going to affect it the spacing it's going to set is essentially the spacing between the heading and the first paragraph so this value up here we can exaggerate that just to see what's happening so if we make that 10 you can see really clearly now that we're setting the space between a heading and the first paragraph but any subsequent paragraphs or in fact any other content is not affected so we'll set that back to one again and again we'll remove the red coloring and we'll move on to the next item next thing we're going to do is pretty much the reverse of that we're now going to look for any paragraphs that are followed by a heading so here we go we've got a paragraph here this is the heading that follows it and we're setting the spacing between the heading and the preceding paragraph so again to exaggerate let's make this 1.75 instead of 0.75 and we can see that we're adjusting so remember last time we were adjusting the spacing between the heading and the paragraph this time we're adjusting the spacing between the paragraph and the next heading it may sound complicated but if you look through this it's actually pretty straightforward i have included all of this css in the description below with some detailed commentary in it to explain exactly how to change the values to get the spacings that you want for your project okay now that we've done that we can delete this red color again and we can look at spacing the next item so we've looked at how to space between headings and paragraphs between paragraphs and between the bottom of a paragraph and the next heading so the next thing we're going to have a look at is the bullet list here two things i want to be able to do one is to be able to space the whole list including the bullet away from the margin and the other is to be able to increase and decrease the space between the bullet and the text first thing we're going to paste in is going to change the margin so it's going to add a top margin of 1m and it's going to add a margin left of 1m as well so you can see it space the bullet point in slightly and it's defined the margin from the paragraph above and again you can change these values to whatever you want to get the look that you want for your website next thing we're going to do is look at the spacing of the list items themselves so when we paste in that css we'll see that immediately the space between the bullet and the text increases now that's controlled here where we have padding left of 1m and if we were say to increase that to 1.5 we could see the spacing was even greater or we can reduce it to 0.5 and that moves the text closer to our bullet point we've also set a margin top of 1m and this is the spacing between the individual items in the bullet list so say we increase that to 1.5 we can see that the list spaces itself out a bit more so that's nicely styled the bullet list and you know gives you lots of flexibility to be able to customize it the way that you want next thing we need to do is have a look at the ordered list and again i'd like to be able to both tab or space if you like the numbers away from the margin and i'd also like to be able to increase the space between the number and the text itself and that's a little bit more tricky so the first thing we'll do is we will add the spacing to the ordered list so we'll paste in that css scroll up a bit so we can see what's going on and in this particular case what we've done is we've set the margin top of 1m so that's set this spacing here and we've set the padding left of 1m so this is actually brought in the whole list a little bit from the left-hand margin so the next thing we want to do is look at space between the items themselves just as we did with the unordered list so to do that we paste in the next bit of css this allows us to set the top margin on the list items which allows us to space the items in the list finally we want to be able to put some distance between the number and the list itself and to do that we have to use a before pseudo element what we're doing is putting an item with no content in it in front of the text and then we're giving that item some padding and again by changing this figure you can change the distance between the number and the items in the list which is another way of styling it and getting the look that you want and last but not least we're going to turn our attention to the block quote and i'm going to paste in a bit more css here to show you that even though i focus this tutorial on spacing it's actually possible to style things more and in fact in this case so i've set the padding bottom to be 1.2 ms i've set the padding top to be 0.5 m i've also set a left padding so that's the distance between the bar at the side and the start of the text now i could increase that if i wanted to so say we change that to 40 pixels you can see that moves across to the right but we'll leave it at 20 for now i've set a margin top to space it away from what element is above i've set a font weight i've set the color to white the background color to orange and the border left color to black so all of these bits are optional you can just stick with the spacing but i did want to make the point that if you do want to control more than just the spacing with your typography you can actually use this css and again this will be applied wherever you want it to be applied on your website what i'm now going to do is publish all of these changes i'm going to go back into the visual builder i'm going to duplicate this text module and i'm going to drag it and put it in the second column so i've now duplicated it now if i then go into this second text module and i go to the presets at the top and i just set the preset to the normal preset you can see that all of my customizations disappear so once you've created any text box in the site you simply have to come into here choose the myspacing preset and all the spacing that we've just designed will be applied right i'm going to delete this text module again now and show you that you can also apply the settings that we've spent the time writing with css to other modules so if we come in here and we add for example a blurb module you can see that the normal default styles are applied to the text but if we come into the advanced module here we go into custom id and classes and we add our my spacing class you can see that the spacing that we defined over here is automatically applied to the blurb so now that we've created our css we don't just have to apply it to individual modules we have the option to use it in the theme builder and i'll show you what i mean by that so i'm going to exit the visual builder i'm going to go to the dashboard down to divi and down to theme builder and i'm going to create a new template which i'm going to apply to all posts now you may have used the theme builder for posts before but i'm going to show you now how we can use the css that we've written to also style the posts so i'm going to come to add custom body build custom body and i'm going to choose to build that custom body from scratch i'm going to add a new row and in that new row i'm going to add a post content module now you will may well be familiar with this now what's really powerful is about the way we've used the css and the way we've used a class is that we can now come into this settings for this post content module we can go to the advanced tab we can go to custom id and we can add a class of my spacing and then automatically by magic our spacing is applied to the default post module so that now means that any post that's created will use this custom body layout as its template and the selling that we've set in the css will be applied now to text modules to any module that you give the class myspacing to and to every blog post that you create so now that we've applied that styling to the body layout for all of our posts in the theme builder we can save come out of the theme builder and if we go back to our make sure we've clicked on all changes saved then if we come to visit the site and we go to the blog i'm doing this manually at the moment because i haven't set up all of the menu structure go to the blog and if we choose this sample post we'll see that the formatting that we set has been applied to this post and will be applied to every post that we add so i hope you found this tutorial useful if so then please do like it and if you're not already a subscriber please do subscribe thank you very much and i'll see you next time you

Channel: Divi Coaching - Build Great Websites with Divi

Views: 651

Keywords: divi theme tutorial, divi tutorial, divi builder tutorial, divi builder, divi text module, divi text spacing, divi text format, divi text, divi typography, format divi text, divi wordpress, divi theme, divi blog, divi blog module, divi css, css divi tricks, divi theme builder tutorial, divi, divi modules css, wordpress tutorial 2021, elegant themes divi, divi css snippets, divi tips and tricks, divi tips, text in divi, divi formatting

Id: StPsAw-i8EA

Length: 17min 32sec (1052 seconds)

Published: Sun Jun 13 2021