Divi Theme Hero Section With Title Flip And Image Hover Effect 👈👈👈

hi guys and welcome to another divi theme video this is jamie from system 22 and web designer techtips.com we've got a little hero section here with a title and an image in the background when we hover over it that title is going to change and also the image is going to have a horror effect color so if i hover over it there we go titles change and it's changed to that sort of blueish nightlife type color if i take it off it'll fade back out again and the image is going to return to how it was that's a nice little effect to have on your site no coding involved in this today so let's get started i'm going to enable the visual builder so we can build on the front end okay well i'm going to go down and add a new section below this one i'm going to make it a regular section i'm going to put in a single column i'm also going to drop in a call to action module because we can use its button this will work with pretty much any module you want to use i'm going to save this and just delete our top one up here let's get rid of this so we've got a section the blue tab inside it we've got a row the green tab and a module the dark tab right here as this is a hero section i'm going to want to make my row full width and take away any padding in the row and the actual section itself so the module occupies the whole of the space there so let's do that i'm going to go into the section i'm gonna go to design spacing i'm gonna put a zero in the padding just put the zero it'll put the picks in for you now i'm gonna hit the chain to do the opposite side so we've taken away any padding that was in our section there i'm going to do the same for the row the green tab design spacing padding and we've taken it away from the row if i hover over here you can see that our little module is now butted up against the top and bottom of our section and the row there which is just what we want next thing we want to do we want to make this row full width so it covers the whole of the visible area there so let's go back into our row i'm going to go into sizing this time i'm going to go to the design tab down to sizing i'm going to pull the width up to 100 i'm going to copy it ctrl c and paste it down below and as you can see we've got a full width section there okay we're good there now let's go back into our little module here and we can make it the height that we actually want it for a hero section we want a fairly big section that's going to grab people's attention so i'm going to go design i'm going to go down to sizing again on this one i'm going to roll down to height i'm going to take it down to the size that we want it as you can see that blue is expanded just put it to where you want it i'm going to have mine about 600 pixels you can slide or you can type in a value you can fine tune with the little arrows to the right hand side there great now i don't want that title way up the top there i want it a little further down so let's use a bit of padding to push that down i'm going to roll up close sizing just underneath we've got spacing here's padding i'm going to give it say 10 on the top so i'm going to write just 10 and percent there yeah that works for me you may have noticed there's no button there this is a call to action module and the button won't show up until you put a link in there so let's go over the content tab here's the link this is where you put the link in for a button there's the button link url i'm just going to put a hashtag as soon as i put that in there the button shows up best practice if you're linking to your own site leave it in the same window if you're linking to somebody else's site open it in a new tab so your site stays open if you want to link the whole of the module to something you put a link in there saying best practices okay i want to split that text up a bit so that it doesn't take up too much width there so again in content let's go back up to our text at the top here and obviously you'd have some content i don't have any real content i'm just going to split mine up i'm going to use shift enter so it just does one line yeah that's going to work for me okay so we want that title to change on hover let's put a real title in there anyway let's say visit our city or obviously anything you want to put in yours then when we hover over this module i'm going to have that flip to something else and to do that this is common to most divi modules if you hover over the dark riding there you'll see some little icons appear to the right hover over to the thing that you want to affect here there's an arrow there we can set a hover state and a desktop state desktops when your mouse is not on it hover is when your mouse is on it so when we're not on it i'll leave it as that when we hover over it i'm going to say amazing nightlife or something like that so on desktop when we're not hovering it's going to say visit our city and when we are it's going to say amazing nightlife if you wanted to change the text down below you could do this similar thing but i'm going to leave mine just as it is okay well that's going to work but let's make it a little more interesting i wanted to have a nice hero image behind there of a city so let's do that still on content we're going to roll down to background here i'm going to leave that blue color in there and you'll see why in a minute you can choose any color you want but i'm going to go ahead and go over to image and add an image as well now i've got a sort of image of a city there let's pop that one in and there it is the colors actually disappeared but what we can do if we roll down a little bit you got background image blend and we can blend the image with the color that we had there so just click where it says normal there and they've got all kind of different filters here and you can get some amazing effects by applying it that's pretty cool right there but i'm actually going to use multiply that was luminosity i was on there and what it does it mixes that color as you can see with the image now just to make it a little more interesting let's bring up our hover state here again the little arrow on desktop i kind of want that color to be less visible so what i'm going to do is go into the color a little paint pot right there click on the actual blue color itself this right variegated slider on the side there is opacity transparency or see-throughness so i'm going to drag this all the way down to the bottom so we've still got our original photo that blue's there but it's just invisible or transparent then when we hover over it again i'm going to go to that color now i want to click on that color now i'm going to bring that all the way up so we've got that blue effect on it so when we're not hovering over it there's the original when we hover over it there's our sort of nighttime image now to make it a little more dramatic i'm going to use a transition effect so that that color fades in over about two or three seconds to do that i'm going to go over the advanced tab i'm going to go down to transitions and you can drag this thing and set 2 2 000 milliseconds would be 2 seconds you can type in a value i'm going to make mine 3 000 milliseconds or 3 seconds there we go transition delay i don't want any delay i wanted to start as soon as they put their mouse on it the speed curve i'm going to use today is ease in ease out they're all slightly different some are better than others in certain situations so try them out but ease in ease out is usually what i use for fade effects okay if we've done everything correctly now we should be good to go save our changes save the page changes and exit the visual builder okay there's our initial image with visit our city when i hover over it that title is going to instantly change and our image is going to take three seconds to morph into that little color there so let's try it out there we go there's our nightlife title and there's our image changing when i let go title's going to flip back and the image should ease back there we go and that's a nice little effect to have on your website now as with a lot of these hover type effects they're not going to work too well on tablets and mobile so i'd create a different section by just simply well let's do it i'll demonstrate let's enable the visual builder again and what we can do is actually copy this whole section here so let's go into the section hit the two little buttons to clone it or duplicate it there we go we got two of the same this top one let's go in there i'm going to go over to advanced and visibility and we just want to show this one on the desktop so disable on phone and tablet and the one below we're going to do the opposite i'm going to go in there blue for the section again over to advanced visibility i'm going to disable this one on desktop as you can see it's graded out because we're in desktop mode and what you could do if you wanted if you wanted to keep that little hover effect and get him to tap on it we could go into the module and just add a line of text here and there we go we've got one for mobile and tablet and we've got one for desktop so let's just save our changes exit the visual builder and there's our desktop view now let's check it on tablet and mobile i'm using google chrome here with the inspector tool so if i hit f12 it'll bring up my inspector let's move this out the way i've got a little responsive toggle down here so there it is on the tablet we've got our tap here so we can tap on it it changes to amazing nightlife and turns color tap off of it flips back and turns back color let's have a look on an iphone there we go again we can tap on it amazing nightlife changes color tap off of it and it turns back to how we were so there you go guys there's how to create a hero section with a title flip and color change on hover 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: 166

Keywords: Divi Theme, Divi 4 Hero Section With Title Flip And Image Hover Effect, Divi Theme Hero Section With Title Flip And Image Hover Effect, Divi How To Create Hero Section With Title Flip And Image Hover Effect, How To Create Hero Section With Title Flip, Create A Hero Section With Title Flip And Image Hover Effect, Create A Hero Section, Add A Hero Section With Image Hover Effect, Display Hero Section With Image Hover Effect, Hero Section With Title Flip And Image Hover Effect

Id: N9QWawxM3sU

Length: 12min 48sec (768 seconds)

Published: Fri Dec 17 2021

Reddit Comments

[u/System-22]

Divi Theme Hero Section With Title Flip And Image Hover Effect. 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 are going to demonstrate how to create a hero section, when you hover over the section, the title will swap to another title, and the image will slowly fade to a new color. This is very easy to do and is a great eye catching feature to have on your website.

There is no coding or extra plugins in this build today. We are going to use the inbuilt features of the Divi theme itself. Using the great Divi Full Width Slider Module.

So, follow along with the video and check out how to create a hero section with title flip and image effect on hover, 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