How To Create Gary's Wine & Marketplace’s Homepage On City Hive

Here's how to copy one of CityHive's most recognized homepages. Gary's Liquor. I'm poch from Intention Creative, the industry's leading liquor store niche marketing agency. I'm going to build this page for you from scratch and show you how to make your own. You can also download the assets for this build in the link below. So without further ado, let's get into it. So, on your CityHive platform, when you log in, you'll be on the home page. You just need to go to the beaker icon here, which is a studio. Click on pages. Then you'd want to go here to the top right to the plus icon. Click on plus and click on Create page. So for the page like this can actually be anything you'd like. But let's put in Test build. Always separate words with a dashboard for the page title, it can be anything you'd like. Also, just put in Test build for now. And the description can be anything you'd like as well. Now, once you're done with putting those three in, let's click on Open Pages Editor and click let's go. When the editor opens, you'll have this blank canvas. Now, if you look at Gary's page, they have this scrolling advertisement. If you want to put this into your page, on the right side, under City Hive Elements, you're going to see something called a banners slider. All you have to do is click on that and drag it in there and you'd have the same thing. Now, just for purposes of this build, so you have a placeholder and you can see how everything fits together, we're going to put in a placeholder image. So we're going to add a new item, our files. All right, so once you put in that banner slider here, it's going to look something like this. And next we're going to want to put in these pictures here. Now, the way this looks is you can either use. You can divide the pictures based on what you'd like. So we have here under City Hive elements, under Layout, on the right side, we have their 50, 50, 70, 30 and 60, 40. Now, just by looking at these images, it looks like this split would be a 70, 30 split with a smaller part here, here on the left side. So what we're going to do is we're just going to click on that element and drag it here into the page. Now, when you drag that into the page, you'll notice that the column boxes are in the third part. So we're Going to want to drag that out. So the way to do that is just click the center box and you can see here you can drag that green line out. So drag the green line out, and we'll do that for the second box as well. Drag that green line out. Now, you'll notice when you do that you'll have three boxes. You only need two. So we're going to be deleting the third box. So just click on the third box and click the trash icon to delete it. So now you have something that looks like this. Two boxes. Now, one thing you want to do first is fix the borders on this image. So you'll see that this part is not all the way in the end, and it won't be aligned with this. So what we do is click the entire box and then we're going to want to head up here to the Brush icon and then layout. So on the layout, we just need to click under right. Let's make it zero. So you'll see that it moved right. So now there's no space here, and left will make it zero as well. So now there's no spaces on the side and it'll be in line with your top banner. Now, to put in your images here again under City Hive Elements, we scroll down to basic so that we just get image and we drag that into the first box. So we'll add our new item and we'll locate our image again. So all the images here are labeled like 1 to 5, just for ease. So that would be image 2a. Let's open image 2a, bring that in. And now we have image 2a in there. We'll do the same thing for the second image. Now drag that image icon in. I will add a new item just for ease. Image 2 and submit. So now you'll notice that you have the two images here, and that looks exactly like what you would see here on Gary's page. Now, you notice that this part might be a little bit bigger. So you have here a space which is about, I would say, maybe 20. So the way you can copy that is you can see here this image is a little smaller. We'd like to double this. So what you can do is click on the entire box again that you clicked on earlier. Go to the Brush icon and remember where you put the zeros in, you would leave that as is, but you would add 10 to the top. So we'd make this 20 there. So now you can see the image increased a little bit. Perfect. Now we're gonna do the second part. You can see here now that we have a large image and two smaller ones on the left side. So for this one we just go to our City Hive elements. Again, we would use the same thing, we'd use a 3070 as well. So we just get the 730, drag it again in there. Do the same things, Drag it out to the second part, drag it out to the second box again, remember, and then delete the third box. Now if you've noticed here, oh, by the way, before we do anything again, let's make sure that the margins are zero on both sides. So let's go here to the brush icon again and we'll make the right zero and the left zero. Now it's all lined up. Now if you notice there's two images here and one huge image here. We'll do this for the elements. We are going to move again an image into this first box, add a new item, we'll add our image. So we have your image 3A submit. So we have image 3A in there. Now remember, there's another image under 3A. We're just going to want to drag the image icon again just right under that. Click on 3A image again. And now you have two images here on the right side. We'll just drag the image icon again and put in our larger image. So let's add it Profile, choose file and then image three Perfect submit. Alright, so one thing we're gonna want to do is we're going to fix the spacing on these images. Now you notice Here, this is a 20, a 20 gap space. What we want to want to do for this is we just want it to be maybe at least a 10 because this is around a 10 and this is a 20. So the way we do that is let's click on the huge box again. Let's go here to Brush image. And for the top, let's make it zero. So now you have equal spacing here in the sides and here on the top. Now if you see here, you'll notice that the two boxes are sticking together. And here there's a space in between those two boxes. So what you can do is just click. If you're gonna click the top box, click the icon here. And if it's a top box, you'd space it 10 at the bottom and you'd have that space. Conversely, if you'd like to click on the bottom box, you'd put the 10 on top. But you just need to do one. So we have equal spacing all around. Perfect. Now, one thing you'd like to do is if you notice on CityHive, you may not be able to see the bottom part to make it easier on yourself. And I should have shown you this earlier, is on the edge element side, you have here something called the newsletter form. Now what you can do is drag the newsletter form down to the very bottom. And now you have space to do everything. So you'll see the newsletter here. It'll be attached to your page and you'll have space to put in new assets below or images below. So we've done the first part. So we've done this. We've done this part and we've done this part as well. Next would be this one. So basically this one is just the same as your number one, also our number two image. So we just do the very same thing. We'll do another 30, 70 split. 30 70. Put it in there under here. Sorry. And then again, we're going to put to the second box, put this to the second box, delete the third box. And then of course we're going to make sure that the margins are zero. Click the brush. We put here zero on both sides. Perfect. Okay, now we're going to use the images again. Just drag the image tile in here, add a new item from file, choose file. So this is an image number 4A. Just click that there in same thing. Drag the image tile in there, add new item from file. And we have their image number four. Submit. And now you have your fourth image. So you can see here we have our carousel. We have here our second layer images, our third layer images, our fourth. And now we're going to go to the fifth one. Now, the fifth one is essentially the same as this one, but if you notice, it's not a 3070 split anymore. This is more on a 50 split. If you notice, these boxes are more or less equal to this larger image. So what we're going to do is instead of using the 3070, we'll just use the 50 50. So we're going to bring that in here again. We're going to want to move this out second box, move it out the second box and delete the third box. And we're going to want to click the entire box and again make the right and left margins padding zero. Perfect. Now don't forget to do this. If you see here, we forgot here to put the top, the top margin to zero. So again, click on this box, make sure that you only have 10 as you that you 0 this out because there's already 10. So you can see here that the space here is zero. Sometimes this will happen because this image is too small. You need to have a perfect ratio of images so that the spacing would look perfect. But if your images are the correct size, then you'll just be able to see here that 10 space. The reason that there's a little bit of a bigger space here is because this image is a little smaller. Right. Now back to the fifth image area. Again, we're going to want to put two images here on top of each other. So again we put the image in. Add new item from file. Choose File image number 5A submit. Again, we're going to do the image again below it. So 5A again there we have those two images on top of each other. Now on here we have the bigger image. So drag the image icon here, Add new item and image five. Perfect. Okay, now we're gonna want to make this top again just the 10 space. So again we're gonna click the entire box, go to the brush icon, and on top we're gonna make that zero. We don't want this to be sticking together. We want a 10 space spacing also here. So we're gonna click. So now let's. We did the top earlier here for this one. Let's do the bottom one here. We'll just put a 10 space on the top. There you go. So now you have equal spacing, more or less for all of these images. Now your image, your build, your page is now okay because everything is now in the right place. What if you'd like to link these images to something? Now the.