Divi Theme Image To Slide In Blurb Module On Hover 👍👍👍

hi guys and welcome to another divi theme video this is jamie from system 22 and web design and techtips.com well we had a question it was good question we've done similar things before somebody's asking about sliding a blurb module in over an image it's really easy to do and it's a nice little effect so we've got three images at the top here when i hover over we're gonna have a little blurb module sliding from the side there really easy to do and if people are mousing around your site that's going to get their attention pretty quickly we've done similar things in the past using a bit of coding we're going to do this today with no coding at all we're going to just use the inbuilt features of the divi theme and it's really easy so let's get started i'm going to enable my visual builder okay i'm going to go down and i'll simply add a row below a little green button there i'm going to add three obviously you put in whatever you want divi comes as standard with all these modules if you've got woocommerce installed they've got another dozen or so plugins to help you sell your products they wanted a blurb module today here's a blurb module one of my favorites because you get to use an icon and they've just upped the icon set to include font awesome so there's a lot of them okay put out whatever content you want to put in here here's the title put in whatever you want for your content i'll delete a little bit of this because you're probably going to have different amount of text in your little bird modules or whatever it is you're trying to do here and we're going to give it a fixed height so you can have different amounts of text and the image will still say that stay the same size okay so we've got our content and our header let's go down the image and icon i'm going to use an icon rather than an image and like i say they've hugely expanded this now if you want to look at them all hit the little button right here and it'll give you a pop-out view i'm just going to do a simple search and there's plenty to choose from here let's use that one okay and as you can see that's pop that in there all right well let's style this a bit now while we're on the content tab still i'm going to go down to the background if you want your module to link somewhere and you want to take them your visitors somewhere when they click on it you can go into the link here and you can link the title and the whole module separately if you want to if you just want to link the title put your link in there if you want the whole module anywhere they click click on the module to link just put it in here and as always best practice if you're linking to your own site leave it in the same window if you're going off-site to another site open it in a new tab so yours stays open okay i'm going to go down to background just underneath here i'm going to give it a white background the same as our page here but i'm actually going to click right in the white field here i'm going to bring the opacity down just a little bit so that when i put an image behind we've got a hint of that image and we can see what's going on there so i'm going to take it down a little bit and we can readjust it later on if it's too much or too little let's move on to design now i'm not going to spend too much time on design image and icon let's make that icon blue i'm not going to give it a background color you can do if you want to there tops fine i want mine about 50px not quite as big as it is there if you want to you can put a border around it if we roll down a little bit here's image border styles let's give it say two picks as you can see it's come in there i'm gonna make it blue i'm gonna kind of round it by giving it a 50 pixels or something up here just put the 50 in it'll put the pixels for you if you've got the chain linked it'll do all four at once now we just need to add a bit of padding to make that look how we want it and down here we've got padding let's try get 15 top and bottom and let's give it 10 left and right see what that looks like yeah it's close enough might not be a perfect circle but it's close enough for me all right let's roll on there here's our text i'm going to click on that i'm going to pop it all in the middle i'm going to go down a little bit more my title text i'm going to make semi-bold and let's make it blue also now i just need to put a bit of padding around because our text is going to be touching the sides when we put our image in there so let's go in and for the time being i'm going to go to spacing and i'm going to give it 30 pixels all around we'll be adjusting this in a minute to get our hover effect going again just put 30 in it'll put the picks in for you hit the chain it'll do the opposite side for you great okay well let's shut up spacing i'm going to go into sizing just above and i'm going to give this a fixed height of 400 pix so in the height i'm just going to put in 400 there we go it's pushed the bottom stuff down a little bit but it what that means by doing this is no matter how much text you've got in here this will always be 400 pixels high if 400 pixels is enough to contain the text that you want in there obviously you put in the height that you need okay well let's say this now let's put an image in the background and common to most hover effects with images and text we're going to put the image in the actual column that it that our blurb module's sitting in so let's go into our green tab for the row here's our three columns one two three we're working on the first column i'm going to go in there and add whatever images or image it is you want you've got color gradient image or video i'm going to go for an image now let's pop that one in as you can see you've got a hint of it in the background there i might like to see just slightly more of that image in the background just the priority really is being able to read the text itself so just make sure you you're able to read the text clearly okay while we're in this column what we're actually going to do with our blurb modules we're going to slide it to the side over here when we're not hovering on it and when we are hovering on it we're going to pull it back over here and to make sure that we can't see it once it slides over there in our column we want to go to the advanced tab down to visibility and we're going to change the overflow to hidden so anything that overflows or flows out of our little column there which this is going to do when we push it over will not be seen okay we should be good for our column there let's go back into our little blurb module now you may find if you give them fixed height and various positionings that your actual to get into your little blur module the dark tab is hidden it might be over here which it will be when we add some crazy margins in a minute if that's the case hit your little purple button you can go down to this little icon on the left here and you can get to everything in wireframe mode so if you have that problem just go to wireframe all right well let's go back into our little module here and i'm going to pull that background white color down just slightly so we can see a little bit more of it so go in the background click on the color here's our opacity there we go i think that's going to work quite like that and let's now position our actual blur module where we want it so to do that i'm going to go to design i'm going to go down to spacing again and we're going to use some crazy margins i'm going to give it a margin on the left of minus 500 so that what's that that's going to do is pull our blurb module 500 picks over the left so it's negative 500 pics as you can see it sort of dragged it over there but our content spread out because it's over here now to counter that what i've got to do is uncheck the chain here because i want to give it 500 pics padding on the right now the reason we're giving it padding on the right what that's going to do is it's going to push that writing over here but what it also means is because we've got so much padding here we can activate our hover effect by putting our mouse on the padding and bring it all back when we want to now that may sound crazy but i'm sure you'll see what i'm doing in just a moment so i'm going to give this 500 on the right and as you can see or as you can't see the text has disappeared so let's go over and this is common to most divi modules if you hover over the dark writing here in any module some icons will appear if there's an arrow click on it and you can set a desktop state which is the regular state when the mouse is not on it and a hover state which obviously is when the mouse is on it i'm going to do the same for the margin up here i'm going to bring that up and we're going to flip it around a little bit so let's go to desktop state and that's exactly how we want it at the moment we'll change that background color but we can't see any writing because everything is way over here minus 500. so on the hover state we want to bring it back so i'm going to click hover on here i'm going to change that back to 30 which will bring it back where it was when i do the margin at the top and this the minus 500 now wants to be zero so it's back where it should be back where we are so on desktop state we've now got this and when we hover our mouse over it we're going to have this fantastic well that works great the only other thing is you can slow down or speed up the timing that it slides in by going to your advanced tab with the blurb here go down to transition i'm going to slow mine down to maybe half a second or even three quarters of a second whatever works for you 700 ml that'll do don't want any delay want it to happen as soon as the mouse hits it speed curve i tend to use for these things is ease in ease out these are all slightly different some will work better than others in certain situations so check them out but for most of these hover effect i like the easy knees out great well if we've done everything correctly now save our changes save the page changes we'll exit the visual builder okay i see something that i've forgotten to do right here our image is there but it's kind of whited out because it's still got that white background if i hover over it our blurbs gonna come in but i just want to see the clear image there so let's get that corrected or let's debug this as they say okay well let's go down there's our little module and as you can see i can't the actual little tabs not there so let's go to our front wireframe mode right here there's our little blurb module and what i wanted to do is go down to that background there and when we're not hovering over it so we need to bring up the hover state again a little arrow for the desktop state i don't want any background at all so i'm going to go in there i'm going to pull the opacity all the way down or you could just hit the little transparency button right down there then for the hover state we want that white color with just a little bit of opacity so we can read the writing so let's just have a quick look we'll flip back to the regular state so we've got a nice clear picture now and when we hover over our modules going to come back and wide it out a little bit fantastic and just to show you how easy it is to create another one once you've created one we'll do exactly the same thing what we can do we'll save this let's go back to wireframe mode again i'll simply clone this one drag one of them over it doesn't matter which one because they're both identical go in obviously change your icon and your title and your content i'll just copy another line just to demonstrate that we've got different lines of text these will still be exactly the same height switch out whatever icon you want i'll just put that in there for argument's sake so we're all good with the actual blurb setting then we have to do the overflow hidden part on our actual column here so we're in the second column here i want to give it a background image that we want to use i'll pop that one in and then of course you just want to hide any overflow visibility overflow hidden and we should have another one now with computers let's just switch back to our regular mode we'll save our draft there's our new one there exit the visual builder roll on down and there it is we got two of them and there's our little blurb module sliding in just like that i know some of these icons aren't obviously they're not square so you'd have to adjust your padding if you could use a circle around there unless you like these erratic shapes there so there you go guys there's how to make a slide in blur what module or image to blur module on hover nice little effect really easy to do no coding so i hope you've enjoyed this today and found it useful if you have please give it a thumbs up ring the bell comment share and subscribe to our youtube channel once again this has been jamie with system 22 and web designer tech tips dot com thanks for watching have a great day you

Channel: System 22 I.T. Solutions

Views: 175

Keywords: Divi Theme, Divi 4 Image To Slide In Blurb Module On Hover, Divi Theme Image To Slide In Blurb Module On Hover, Divi Image To Slide In Blurb Module On Hover, How To Fix Image To Slide In Blurb Module On Hover, Using Image To Slide In Blurb Module On Hover, Create Image To Slide In Blurb Module On Hover, Image To Slide In Blurb Module On Hover, Divi Image To Slide In Blurb Module, Divi Image To Blurb Module On Hover

Id: TDmWU44ezR0

Length: 15min 1sec (901 seconds)

Published: Tue Nov 23 2021

Reddit Comments

[u/System-22]

Divi Theme Image To Slide In Blurb Module On Hover. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.

Today we will be demonstrating how to create a Divi Blurb Module that will slide in over an image when you hover over it. This is a great and eyecatching effect to have on your website, and really easy to do. We are going to give our Blurb Module a fixed height so that different amounts of text can be added, and the image will remain the same height.

There are no extra plugins or coding involved in this today. We are building this just using the inbuilt features of the Divi theme itself.

So, follow along with the video and check out how to create a Divi Blurb Module that will slide in over an image when you hover over it, using the great Divi theme.

For more information on the Divi theme, check out our Divi playlists below.

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch?

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: https://www.youtube.com/watch?v=DQ35gqzm674

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Plugin 10% Off: https://bit.ly/DiviSupremeCoupon

Divi Brain Addons Free Plugin: https://brainaddons.com/

My Blog : https://web-design-and-tech-tips.com