I found a cool trick to make better GoHighLevel websites

hey guys check out this cool trick I just implemented on my goad level website and you guys can implement it as [Music] well and so goad level has a template for graphic designers and so I thought why don't we make this more unique bit cooler and so let me show you how I created it okay guys so what I was thinking when I created this website was having an unconventional layout something that when you land on it it's kind of like intriguing it's not something you're used to and so it already makes you want to check out the rest of the website I think this would work for certain type of Industries such as graphic design you know creative Industries but if you're a graphic designer this would be something like a conventional website would look like this is one of the templates from gohigh level and I think it's okay but if you're graphic design Center you can showcase your work through your website and so this could help you get more clients so this is what a traditional layout looks like so you have something like a hero section you scroll down it says about us a quick photo but I wanted to create something a bit more creative for this specific industry so let me show you how you recreate these effect if you hover over it you can click on it it will take you to the project page where you have your portfolio and you can show people what you've done in the past as a graphic designer and these are just random photos that I found but I just wanted to show you how it would look like so what this looks like on go ahead level is we're going to create a full section and then we're going to have three main sections next to each other and so as you can see we have the text down here we have the main photo which is going to zoom in as we hover and then the big headline first thing is we're going to need an object that's going to zoom in so for this scenario I took an AER not and all you're going to need is go to photoshop and remove the background very simple stuff and this is pretty much what it looks like but once you have it exported as a PNG you can upload the photo to goad level and so what I wanted to do is when we hover over it kind of goes past the text so you can see if I hover over it goes past the text so it looks like it's zooming in and so how I created this effect is if we go here you'll notice that this photo has negative margins so - 40 andus 40 on the right hand side as well which means that it's going to make it very close to the next element next to it almost like on top of it which is what we want and so that would be step number one grab your object whatever it is and in this scenario we could even change it so I just show you what it looks like and so to show you that we could use literally any object what it would look like is you would click here change the image upload your photo whatever photo you want let's just say we changed it to something else so it could literally be anything else so I just uploaded a airplane but what this would look like now is the airplane and as you hover over it kind of Zooms in and it's going to do the same thing if you click on it it'll take you to the next page how we do it is when you click here it lets you redirect to another website and so here you just input the URL for your work page which is this one so if we go over to work page it's going to take us here which is going to be this one so that's what we want want to have the effect I click on it and then it does the animation okay so once you've uploaded your photo we need to create the animation how we're going to do do this is with code so if you guys have our notion dock we have all of our tutorials with all the code that you're going to need to create your websites so for this specific one we're going to use hover over image it's going to zoom in and so all we're going to do is go to our custom CSS and we're going to inject that code and we're going to choose our image style and with that image style then we're going to tag this specific photo so if you click on it we're going to scroll down and then under Advanced we have our custom class we have image style one which is this specific Style so that's what's going to animate the photo so as you guys can see here it kind of Zooms in a little bit same goes here it does the same effect and so that's how you create that motion and so the next thing is going to be the alignment so here we have the alignment to the top left hand and then here's the opposite and so if we go here something cool that you guys can do is scroll down and where it says so you're going to go to your purple section so see where it says First Column that's the purple-ish section we're going to scroll down and it's going to be align it's going to be left so left means up if you go center it's going to be in the center if you go right it's going to be at the bottom and so on so we want it to be on the left so it pulls it up and this one's going to be the opposite this one's going to be right cuz if we do left it's going to be up there so that's how we create that cool kind of diagonal alignment and this one's going to be in the middle and so that's pretty much that cool trick how we create it very simple guys if you guys want to create this on your websites it makes sense with the type of website that you're building I think it would be very smart and so for me I always want to create amazing websites that stand out from the competition and if you're looking at your website and you're using one of those templates right now and you're thinking how can I make it better this might be a trick you might want to implement so there it is that's how I created that website and if you guys want to check out our notion do click the link in the bio and you can get it yourself with that being said I'll see you on my next video

Channel: Juan GHL

Views: 1,333

Keywords:

Id: OtPi1sOIUqU

Length: 5min 25sec (325 seconds)

Published: Wed May 08 2024