How To Place A Button And/Or Text Over An Image In Divi

hey everyone it's nelson miller here with pa creative today i have one of the most exciting tutorials that i've done honestly i'm going to show you how to add a divi button module or text module or call to action module over top of an image module and that may sound like an odd thing to do at first this is one of the most requested possible things that i've ever done and i have another tutorial where i kind of solved this using a pseudo class where i put the content of the text and then styled it as a button or whatever centered over the the image and it it works but but then you lose your control like your button and text and all that so this way it's literally just moving the button or the text module or the call to action module up over the image and i'll even show you that you can review it on hover if you want to let's get started this is a really really popular request so many people have asked here so let's get started you want to make sure that you are on the blog post here if you're watching this on youtube definitely want to come over here um so yeah here i talk about the past solution it really wasn't wasn't good but this one here let me explain that you might think that you could just add a call to action because a call to action has text or a button in both but remember when you're putting the image there there's no image spot except for the background well putting it on the background is not a good idea it's not good for seo it's just a decorative image plus it crops and everything so that solutions out using a call to action module by itself is just not going to work the other option would be i guess use a column put the image in the column but then again the exact same issue it's not contributing anything to seo which an image should and it's going to get cropped depending on all kind of different screen sizes and stuff so this way is great uses an actual image module so the process is going to be the same i'm going to show you the button the text and the call to action it's the exact same thing um either way you're going to put your css at the same spot do the exact same edits so it's going to be broken up into like three sections here so um for you you'll just wanna choose the one that you're using i'll start here with the button you'll add your image and button exactly like this screenshot shows i mean really just add your image and button to a column the next step would be just to design your button and you know image however you want it to be designed it doesn't matter you might want to you know use some custom styles for your button and stuff and put in your link and all that but anyway design it but then the next important thing would be to add a css class to the column we're not adding it to the image or button module we're adding it to the column so here in my example pa button over image is going to be my class added in here and i'll walk through this here so right here i've added an image and i've added a button so i would want to go to the row and go in here to the first column then the advanced tab css id and classes right and then put it right there so pa button over image and that's going to affect this it's going to move this button to the center right here all right so that one's that and you know you could follow along i don't know if we want to skip around or just do one at a time here but anyway the next step is adding the css so right here you can see it um it's four different snippets here and you don't even need to use them all i'll explain that so if i copy that now they're on my clipboard and i could go here you would want to put it in your child theme or theme options i'm going to show you right here on the page live now inside the builder in fact let me do this a different way since i'm showing you i get to do things a little differently i'm going to exit the builder i'm going to use my trusty css user css chrome extension and paste it there there you go done um the first snippet is just taking that button and saying hey be positioned here and then the second snippet so there's there's really two okay in in a sense there's really only two we'll talk about the last two later but this first one is doing the work it's putting the button over the middle of the image the second one is just adding this overlay see how it added like an overlay in fact if i get rid of it you'll notice see that that's because well you don't have to have it you could delete it but like i don't know a lot of times you want that to like make the image a little darker so that it highlights the button especially with the text the the second one here sorry the third and fourth snippets here are just about doing the hover effect um and i'll i'll just show you that there's little comments right here it says remove comment if you want the hover effect right same thing here make this one zero all you do is make that one zero see now it's not showing because we've made it opacity of zero and again just remove the comments here right see that now we're saying when we hover over the column could do the image but the column then the button is becoming opacity of one see the button will show right and then the last one here i'll remove is the it's adding that overlay when we hover see that so they're working together but again these last two are totally optional you might want it to show all the time but this is how you would show it like that in fact i'm going to go through and add some images to make this look better here we go see that it looks great doesn't it now we'll get to these other two so this one is for the button module over the image the next one is for a text module over an image so really exactly the same except in our class it's pa text over images to the pa button over image so i'll go in here and add the class all right so i want to put this text over there so i'm going to go in here go to that second column go to the advanced tab same thing here pa text over image now that's great we've added that in fact i'm going to go ahead and do this next step for a while i'm going to jump ahead and kind of cheat here on us just so i can kind of move this along a little i'll go ahead and do that a while okay so now we're covered now you're gonna need to make some changes for this one for these last two see how this text is black well we're probably like not going to want the text to be black unless we have the overlay be white you would probably want this text to be white so you probably want to go in here and change like you know right here text to to light well there you can't see it well that's okay you will later you'll probably want to change some spacing i would recommend like i don't know 30 40 pixels of padding on each side and i'd probably want to center the text okay so with that in mind let's exit the builder here and go back here and i'll grab the css for the text over the image okay here i have two examples one width and one without an image so i'm going to go in here paste that you can see i have way too much text oh i got to fix that one but here you can see way too much text so that's another point your image if i'm unless i wanted to use a lot taller image or make my text smaller or make my put the image in a two column or single column you know what i'm saying here there's physics there's still physics um so let's go ahead and fix that so i'm opening that back up and i'm just gonna get rid of like that much all right and i'm going to do that for this as well while i'm in here get rid of that it's going to look great when that's over oh and another thing with this um the cold action adds that background color i don't know why so you can just turn that off right you don't really want that and in here there's a couple of things you might want that light uh centered and again optional same thing here i'm going to and add 40 pixels so that's to the left and right there we'll see how that looks you know i could adjust oh and if you want to add a button i forgot this you always have to make sure there's a link if there's not a link there's not going to be mine so i'm going to fake it add a hashtag and you can it's actually here you just can't see it all right lots of things to remember there with that but hopefully that makes sense you make a couple edits to the module so that it's applicable here there you can see that i've done it for there and here so we've done the text one uh what did i do wrong here i probably didn't yeah i didn't add the code yet but you can see how nice that looks and i could do the same hover effect trick here right so exact same thing it's saying okay opacity remove that to make the hover effect it's it's saying you know make hey make this a zero right um same thing here make this one the text will reveal see and then the last one is the overlay all this is optional now i messed that up okay but it looks great doesn't it another thing to keep in mind is this person value is 45 sometimes if you if you have a lot of text how would that be like like let's say i change just like 20. see how it positions it top for some reason sometimes when you say 50 it doesn't look quite centered um so i was saying 45 but you can adjust that if you need to all right so there we go i'll do the last one here quick i've added it you can see i'm i'm really running out of space here it's not a whole lot of extra but look how nice that looks there um wow looks great dude i can do the hover reveal here too all right i just did that check it out that's our final result so i hope this was helpful um this probably will be one of my most popular tutorials believe it or not because my other one was and the other one wasn't it wasn't the best boy i could just sit here and do this for a while i just love it how how easy that is yeah and you'd probably say well why doesn't debbie just put it in well that's not for me to say i'm here to provide a solution um there you go and you don't like it you know optional if you want to mold hover or not so you can style the button go into the settings do whatever you want there style the text put a border on the image use vertical images yeah whatever you want so there you go all right so i hope you guys think that these tutorials are valuable i do them every single week so if this kind of thing sounds like something you like just subscribe i'm not going to spam you you're going to get stuff related to divvy i guarantee you and that's for some crazy reason way in the future i don't know but this is what i do here at pa creative i do divvy uh become a divi specialist you might say tutorials every single week so that's what you get on the blog and here most of the time i'm giving away snippets like this solving problems and i don't know sometimes i announce like my new products and things like that i have plugins child themes courses whatever that's something you can check out if you're interested if you want to support my work you know obviously this is free so if you want to support any of my work check out my products of course and yeah we'll see you all in our next [Music] video you

Channel: Pee-Aye Creative

Views: 3,223

Keywords: Divi text over image, Divi text over image on hover, Divi button over image, Divi button over image on hover, Divi button image reveal, Divi text image reveal, Divi button module over image, Divi text module over image, Divi button on image, Divi text on image, Divi button centered on image, Divi button reveal on image, Divi text on image module, Divi button on image module, Divi how to button on image, Divi how to text on image, Divi button image tutorial

Id: ff6z3swIA_0

Length: 12min 58sec (778 seconds)

Published: Tue Jun 08 2021