How To Create Enjoy Wine Online’s Homepage On City Hive

Here's how to copy one of CityHive's most recognized homepages. Enjoy Wine Online. I'm poch from Intention Creative, the industry's leading liquor store niche marketing agency. Going to build this page with 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 let's get into it. From the CityHive dashboard, we're going to go on the left side and locate Studio. From the Studio menu, we're gonna go to the Pages submenu. Now, on the Pages submenu, since we're building a completely new page, we're going to go to the top right and click the plus icon. And then we're gonna click on Create Page. Now, for the page slug, you can put in anything you'd like, but for the purpose of this tutorial, we're gonna put in Test Page. Remember, words should be separated by dashes in the slug. For the page title, put in anything you'd like. For the purpose of the tutorial, we're going to put in Test Page. For the page description, we'll just put in Page Description. Once you're done filling out those three items, click on Open Pages Editor. And then let's go from there. You'll be directed to this blank canvas where you will be building your page. And if you notice on the right side, you have all the elements you'd need to build your page as well. So let's start on the top of the Enjoy Wine Online homepage, you can see three images. So let's see what we would use here. On the right side you can see here under Layout, we have here three in a row. All we have to do is click on that and drag it in and you can see three boxes in a row. To put images into those boxes, let's get the image tile and drag it into the first box. Now from there, we would pick the first image. So these are the images that we have available for you for download, by the way, and we've labeled them from one to five. So from the top we're going to start from one and go down to image five at the bottom. So let's try image number one. Perfect. So we're in there. Now you just do the same thing because these boxes are all the same size. So we'll just drag the image Tile into the second box as well. Click on Image 1, drag the image into the third box, and then click on Image 1 again. So now your images are all in there. Looks Beautiful. Exactly like this page. But if you notice, it's at the edge of the page. So here in our build, you can see there's a space that you need to remove. So what you can do is you click on this entire box. Make sure you're clicking on the entire box around the images. And you would click this paintbrush icon. Now, once after clicking the paintbrush icon, you go to Layout. And then on Layout, you can see here the. The padding. So top 10, bottom 10, right 10, left 10. So we won't really touch the top and bottom. What we'll do is change right to zero and change left to zero as well. Now you can see that your images are all the way to the corner or to the edges of your page. Now for the next part, you can see here that they have a sort of carousel image carousel. What you can do is on the element side here, you can put in a banner slider. So what you would is just drag that in here and then the banner slider would be put in. But for purpose of this tutorial and just to have a sort of placeholder, you can use image number two. So let's try to put in an image. We'll use the image tile, drag it in here, and then we will choose image number two for that. So put in image number two. So just remember image two is just a placeholder, but you should be using the banners slider for this. Now for the next part, we can see here that we have another image. So we're going to use the image icon again and drag that in and then use image number three. Beautiful. Okay, so now we have image number three. You can see there's a split. There should be a space between the banner and that image. So let's try to put in that space. All you have to do is click on your image and on the top right, go to the paintbrush icon. And then you're going to want to click on top because we want to put a space on top. So let's try 20 there. That looks about right. So you can see here about 20. Perfect. Now what do we do next? So you can see here that after the image we put in, we see another set of pictures. And now it's four in a row. So what we're going to do is we're going to go and insert a four in a row image. You can see here four in the row. Under layout, we have four in a row. So we're going to click on that tile and drag it in here and put at the bottom. So now you can see that we have four in a row. Now, what you can notice with the four in a row is that the box is in the third layer. What you want to do is click on that box and drag it out to the second layer like so. It gets a little bit bigger, but you'll do it for each and every box hereafter. Click on the inner box, drag it out and. And click on the inner box and drag it out. So now you can see we're on the second level. Now what you want to do is, after that, once you drag everything out, you'll have five boxes. Click on the last box, and then click on the trash icon to delete it. And now you have four boxes. Again, what we want to do here is we're going to put in images. So drag the image tile again to the first box. Now we're on image four. So click on image four. Perfect. Now you're gonna do that for each and every box, because these are basically the same size. Okay? So image four, Image four, image, and then four. Now, as you may notice, you had that little pesky space again here, which you should not have because everything is aligned on the left and right on this homepage. So again, click on the entire box and then go to the paintbrush icon. And once you're at the paintbrush icon, you want to make the right and left zero again. Perfect. So now you're in line on the edges on the left and right. Another thing, you notice that here on top, this space looks a little smaller than it should be, because here on the page we're trying to build, there's a little bit bigger of a space. So how do we fix that? We would just increase the padding. So you can see here, the padding is 10. 10. Let's increase that to 20 there. So we made that space a little bit bigger, and now it looks about right. Now, for the next part, we have here another two images. So for two images, we're just going to use another type of layout. We'd use the 5050 layout. So get the 5050 layout. Drag that here at the bottom. Make sure it's at the very bottom. And release. So you can see here two boxes. Again, you want to drag the inner box out to the second layer and drag the second box as well out to the second layer again. Once that happens, you'll have a third box that pops out. Just click on the third box and click the trash icon to delete. Now you have two boxes. All right, so what you want to do is again put in the image and we're gonna go with image five. Perfect. Next image again, image five. Now if you notice again, there's another space here. Click on the entire box again. Make sure you click on the entire box. Click on the brush icon and you're going to want to make right and left zero. Alright, that looks about good. So you have a good spacing as well here, which is a good spacing as well. And edges are at the end. All right. And the next set here is another two boxes. So 5050 again. So you would basically just copy what you did here. Now there's actually two ways that you can do this. So the first way you can do it manually, just go to elements, put in your 50, 50 at the very bottom. Again do the same thing. Drag the inner box out, drag the inner box out, delete the third box and then put in your images again manually. Put in image 5 and then another image. Put in image 5. Then click on the box. Make sure that your right and left padding are zero as well. Perfect. So now you have exactly the same as what you created earlier, which is the same as on the page that we're trying to build. So you have four images here. Now the easier way to do that would be this. So let's delete. Let me just delete this for you. So I'll click on the entire box. Delete it. What you can do is you just created something that you want to duplicate. You can actually click on that entire box and click here beside the trash icon. You have like a clone type of button. So click on that and it will actually just exactly copy what you made. So you don't even have to go through all those steps again. So that's a good tip for you. If you want to just quickly make something that you've already made before, just click on the clone icon. Nice. So now look at our page. You have here all the elements that you need. You have the three boxes, three box, three boxes with the images. You have here your banner, which is just a placeholder. You have here the large image. Then you have the four images in a row, four images in a row. And then you have these two images in a row in a row here at the bottom. Now they also have a subscribe to our newsletter portion here at the bottom. So if you want to add that to your site, you can actually go to your elements and then newsletter form. So get the newsletter form tile, drag it to the bottom and voila, you have the newsletter form as well. Now, once you're done building your page, you just need to click on Save. Make sure you save your page. Now another good thing that we can do is we are going to link those images on our page. So you get the URL of the image you would like to of the of the page you'd like to link. And all you have to do to link images is click on the image. So you can click on any of these images. By the way, click on an image you'd like to link. Go to the gear icon here. And then you can see here there's something called Edit App Action. Click on Edit App Action and then under the Add an app action, click on Open URL. On the Open URL, paste the URL you'd like to link and click on Submit. Perfect. So now that means whenever someone clicks on that image, it'll direct them to the URL of your choice. Click on Save again to make sure you've saved all those changes. Alright, Perfect. Now another tip. If you'd like to see how your page looks in a preview mode, you can see up here on the pages editor, right beside the save button. You have here like a little box with an arrow sticking out. This will show you a preview page of how the page you just built will look. So just click on that. So now you can see how the page you look was built. Beautiful. Okay, Very nice. Alright, so that is building the Enjoy Wine online page. If you want to see more cityhive tips and tricks, join our newsletter in the link below. If you're a liquor store looking to grow your in store or online sales quickly, visit our website at intentionallycreative. Com.