In this tutorial, I go through a couple methods of utilizing the :before pseudo element to level up your Divi sites.
CodePen: https://codepen.io/johnwooten/pen/WNWMwbY
CSS for Divi Course: https://cssfordivi.com/
Transcript
00:00:01 hey y’all what’s up hope you’re doing well John with BeSuperfly just wanted to show you a couple cool things I did on this test site we’re building for a client using the before uh pseudo element if not familiar you can go through our videos here and I have some on it this fun with gradients we’ll touch on it a little bit but I use it I use it quite a lot and this one will go over it quite a bit the locations hover feature that video will go over quite it as well but let me show you uh let me go
00:00:36 ahead and get out of that let me show you first what the two things I want to show you how to do first one is this we’ll cover this real quick just how to make this nice little fade in on Hover and then also change in this on Hover I’ll go over that and then I’ll also go over on the on the mobile menu you see here we have a background image here for this menu and so I’ll show you how to do that really quick as well so first I’ll go to that row here and if we go in here we’ll see that
00:01:17 it’s just a a fullwidth row here and I have a class of ID a featured row on there and other than that it’s just a it’s a text module here and then in the row I’m just setting in the different columns I’m setting spacing of 195 that’s what’s giving it there’s 195 padding up here and I’m giving that to all of these three this one has different padding settings because the content’s different right that one uh that one the spacing is just it’s just something like that and then there’s some some borders
00:01:59 going on uh in fact there’s a couple things I I see a couple things I need to fix on that which I’ll get to after this video and then coming into tablet they’re going to stack like this and then you know mobile they’re just going to stack all on top of each other great so I’ll kind of all I have set up here is just this featured row there’s no other code in here so I’ll let’s flip over to the code here which I will provide this code in the in the code pen in description of this video there’ll be a
00:02:38 link to this and so this code pen has both the mobile nav we’re going to do and then this featured row right here so let me just go back here and we’ll take a look at it we’ll scroll down to this featured row section and so here’s kind of where this is where the main magic happens right here so I’m saying hey go into my featured row which is the entire row here and the columns that are in there oh yeah columns that are have a class of featured that’s the other thing I have to show you I misspoke so
00:03:15 couple two things you got to do number one you got to give your row a class of featured row and then since I’m not I’m not doing this to all of the columns like if this one here was like another one of these then you know vid images or something like that then you wouldn’t have to do this step but since this one has a different layout than these three I went in and gave these three columns a class of featured when you’re doing when when you’re only going to have one of an item on a page you can use the ID but when
00:03:51 you’re going to have more than one you use featured so here I have three of these so I gave them all the class of featured okay so that was kind of the that was a step and so that way I can I can Target just these three columns by saying hey go into the featured row and then grab all the columns that have the the featured class and I probably could have got rid of this and just done featured but I like being specific and saying grab the columns featured and if we just look at this code here you’ll see that this column right
00:04:36 here it’s got the etpb column right there and there’s the featured this one has the etpb column no featured so it’s not going to be affected by what we’re doing here and so then I’m saying hey find those featured columns and then let’s make a before pseudo element and what’s going to be in this thing well there’s not going to be any any text in here or any content but I want it to display block I want it to cover 100% the width and the height of the column the whole area I want to position it to
00:05:16 the to where it starts in the top left and I’m going to give it a background color of black but it’s turned all the way down it’s turned all the way down to zero and then I’m going to give it a transition to make sure it’s smooth when it animates it it’s it’s smooth it it doesn’t do it right away and then the other thing I got to do is say hey now featured row those featured when they when they hover over them go into that before pseudo element and turn that background color up to 67% and that’s what’s going on there in
00:05:53 fact if I go in here and I find that before area you can type stuff in here you can say you can you can well I have to do it the other code but you can type stuff in here I wouldn’t recommend it though anyway if I take this transition off you’ll see now that it just it just does it fast which is which is is fine if that’s what you want but that’s not that’s not what I want I want it to be smooth and so that’s why I have that transition on there so it’s nice and smooth and then if you go into the hover State
00:06:33 here you’re on the before if I go into the hover State this is where oh sorry it’s not the hover state of that it’s the hover state of this here sorry this is where I can go in and see here’s that new that 67% background color and maybe you want to change just to something else you you sure can do that or maybe make it maybe make it heavier of a a color or something like that okay so that’s that’s that one the other thing that I’m doing on that one is uh I’m saying hey go into the featured row uh any of the featured
00:07:15 columns on Hover change my H3 to Orange and and then in order to make it smooth you got to go to the regular H the non- hovered version the non- hovered one and give it the the transition otherwise it’ll just do it fast and so that’s why it it kind of goes as well you can even you can even say hey I want this one and you know when I hover over it I want that transition instead of 3 seconds uh you know let’s make it two seconds long and so now it’s going to take two seconds which is a little you know but
00:07:55 you have some control over that is what I’m saying okay so you can play with that the other thing I was going to show you is let me go ahead and refresh this page and then let me turn on uh the responsive mode here turn up to 100% all right other thing I was going to show you was this here background here it’s the same idea if I go up to my mobile nav here this is the this is the this is the one right here I’m saying hey when the screen’s 980 or less which is when Divi kicks in their their mobile menu same deal find that mobile
00:08:41 menu the UL so if I look here if I inspect this you’ll see that that UL mobile men ID Mobile menu That’s this whole thing right here so I’m saying hey go in go in there let’s make a pseudo element using the before again empty content same thing as before display block width and height 100% position absolute top left background image and you’ll want to change this to to yours but this is where you get the background image and then you can choose the opacity of that image so if I go in here and look
00:09:22 at look at the before class before pseudo element here I see that background image I put in and then I also see the opacity if I put one it’s going to just show that the whole time and then the and then the other thing that you want to do you may have to and you can kind of see there what happened if you have any problem with the background image going over the text you may have to add a zindex on it so for example here if I put zindex uh if I went high enough it’s going to do it but if I do negative one it’s always
00:10:03 going to keep it behind the text so I’ll add that to the code that way that way you have it but this is cool and that you can you know sometimes I’ll use like a gradient and just to give it some different colors in the back I did that on the superfly site uh so anyway that’s that’s all I have for you today I hope you enjoyed this hope you dive in and just see how powerful uh the the the pseudo class the pseudo element class can be again I’ll link this in the YouTube video description and then also go on our
00:10:44 website besuperfly.com and under training Divi courses we have CSS for Divi here and I’m logged in so I get it I’m a member so I get it for free you can either become a member and get all our things for free for a low year cost or you can pay 49 bucks and get this course but it’s going to teach you everything you need to know to up your game you can check out the demo here which is basically a sales page for it watch this video and it’s really going to uh see the course outline it’s really
00:11:15 going to help level up your game who is a course 4 and then I believe there’s even a sample project on here so you can see like in this example I’m replacing Divi’s play video icon which I don’t like at all with this play video graphic which I think looks a lot smoother so you can follow along in that one and even view the code pen for this one and no surprise I’m using a before pseudo element here to help make this that happen so all right y’all thanks for checking this out hope you check out the
00:11:50 course and hope you enjoyed it cheers y’all
Learn more with our CSS for Divi course
