Creating Menu & Footer

Lesson Details:

Video Transcription: This course is brought to you by Appy Pie as part of our Academy series now I'm going to show you how to create a menu and a footer for your website so that's our template and once we've created that template we want to clone that template for each page on our site for the sake of this tutorial I'm going to be creating a home page and a tools page and therefore I want to clone it twice to do that you hover over this and click clone I'm going to name this page homepage and one other thing you're going to want to do here is change the permalink so right now it to get to this home page you would type and give back your gift comm backslash clone of template but I would rather just change that to the name of the page itself which is home and actually I would prefer home it's much easier so click OK and then publish that page now if we go to give back your gift comback slash home just home it'll take us to that new page which is already following the template we just created now I'm gonna clone that template one more time and this one is going to be my tools page and I'll edit the permalink for that then click publish and you're done next up is to create WordPress menu we want to create the menu inside of WordPress before we start building it and thrive architect and to do this you hover over appearance and click on menus from here we want to select the pages that we want on our menu we want homepage and tools then click Add to menu from here you can order your menu I definitely want the home to be before tools and another thing is on my menu I don't want it to say homepage I just want it to say home and to change this you click on the little down arrow and change the navigation label and that's it click on save menu and you're done next up is to create that menu inside of thrive architect and then save it as a symbol and what a symbol is is it's something that when you put it on one page and edit it on that page all those changes apply to wherever that symbol places is placed anywhere on your website so that means if we create a menu on our homepage as a symbol and then add that symbol to our tools page if we make a change to our menu while looking at the home page it'll also automatically make the same change on our tools page this is super convenient so let me show you what this looks like we're gonna go to all pages and on the home page when you hover just click on edit with thrive architects [Music] now we're gonna create our first menu and the way that thrive architects works is you want to put everything inside of a background section and this gives you more freedom so for example with this background section here if I were to place my header inside of it maybe I don't want my header to be this wide so let's say I just want the width to be that small but I want a background color that covers the whole length of this well to do that I would add it the background section itself and add a background color so don't worry if this isn't making sense as we start building more and more things inside of Drive architect you're gonna see why we want to put everything inside of a background section but for now I'm just going to delete this heading because we don't need it and I'm gonna add a menu you can either scroll down until you find menu or just search for it and then you drag and drop this inside of the background section and that's it that's the same menu that we created in WordPress which is awesome but now we want to style it so it's gonna look a lot better the first thing I want to do here is I want the menu to be on the right-hand side and not the left-hand side so I'm gonna select a custom menu element here and when I scroll down we want to look for a line man click on the right hand side next up I want to change the background color here and I want to go to our colors that we found earlier that you can find in your design code and I like the idea of having an off black menu bar so to do that I'm gonna copy this color and then make sure backgrounds section is selected when I scroll down I'll look for the background style area click on this color and add our off black then I'm gonna add it to my favorites so we can quickly use this color in the future but the problem here is now our text is not looking good you can't read it so let's change that to our off-white color so now that I've copied that color we want to make sure that menu item is selected and because this lock icon is green it means that these items are connected in this moment so if I change the color of this item tools will also change automatically let me show you what that looks like when I click on this color I paste it in and then also add that to my favorites and click on apply and it should have changed here so not sure why it's not changing I'm gonna click save and reload the page I'm gonna exit and come back sometimes you get weird things like this where things don't work as they should so I'm gonna try this one more time there we go so I'm not sure why that happened but that is a good example of if something's not working just save it exit it and reload it and it usually it should be good to go so awesome that's really good now next up is I want a little less spacing between these items so I want them to be closer together and to do that we're gonna click on custom menu and for the spacing I'm just gonna lower that down and then click Save now there's so many options here about how you can edit this you can add hover effects which is kind of cool or you can just do no style for now I'm just gonna keep it simple with no style so next up is we've created this menu inside thrive architects but we want to save it as a symbol and to do that I want to select the background section because this is part of the menu and from here we want to hover over this little icon right here and that's gonna save it as a symbol and make sure you select symbol and then say menu bar or whatever you want it to be and then click Save and that's it now it's a sim bar and if we want to edit it we can edit as a symbol and we still have all the same options that we had before to edit and then whenever we do make an edit so in this case I want the color to stretch across the whole screen then make sure you click Save & close symbol and now it's done so let's take a look at what this actually does I'm going to add this symbol below and over symbols I'm gonna select the menu bar that we just created now watch what happens when I edit the top symbol I'm just gonna select the background section and change the color and now I'm gonna save and close' symbol Oh changes so this is really cool now sometimes it's getting a little funky because these two items should not be next to each other but normally this will work just fine now one thing I want to change here is you can tell there's a little white line at the top and I don't like that luck so what we can do is in layout in position we'll see that there's a one pixel margin which is creating that white line I'm just gonna click on this link button so when we change one of these it changes all four and now I'm gonna save and close that symbol and we shouldn't get that white line anymore and now there's also a one pixel margin around the symbol itself there we go perfect so that's looking like a pretty clean menu so far and it's saved as a symbol so we can check that off now one thing you can do if you want is you can add a call to action button so let's say you had a menu item like free training and you wanted to put extra emphasis on that well you could do that by editing as a symbol selecting the item you wanted to put attention on and adding custom styling to that one item by unchecking this item so you could make it bold you could change the background color you can move the text around you could change the margin so it looks more like a button and shadows to it around the corners there are so many options here and this is why I love thrive architects you have so much control over the look of your website now I know that doesn't look good but if you really wanted to add this it would be very easy to make it look good so that's my attempt at quickly making a button turn tools but I don't want that so I'm just gonna not do that reverse that and one way you can reverse is just click on these buttons and click undo which is control Z now unfortunately can only go so far so in this case I'm going to manually change this tool so I'm going to check that off and next up is add in an optimized logo so for most footers you're going to want to have a logo on the left hand side and that's what I'm going to add here now one thing I want to mention is whenever you add images to your site they increase the load time because it's an extra thing that your website has to load and an easy way to decrease this time is to use a free website called cracking IO so any image that you plan on adding to your website you're gonna want to run through cracking dot IO to shrink the file size and a lot of times it can be shrunk in half without changing the look of the image itself and to do that you would just click try free web interface upload your files and then download them it's super easy and I'm gonna walk you through how to use this in a later video but for now my logos already been optimized and I'm just gonna add it to the menu itself so first we want to make sure that we reading this symbol and now we're gonna add the image to the left of this custom menu so I'm going to search for image and make sure it's on the left hand side now it's time to upload my logo and what that's done is it's created two columns so on the left column is my logo and on the right-hand column is my menu and you can change the size of this column one thing I want to do right off the bat is change the size of this image because it does not need to be that big next up is to get rid of all this extra spacing that's been added so by default it's added a lot of margin which is the space above and below the image so we can get rid of that next up is the column itself and inside the column there actually isn't any spacing so we're going to look at the columns and here they put extra padding in automatically let's get rid of that and on the menu there's some extra margin that we don't need then make that zero and now for the image I want it to be in the middle and not on the top so do this we're gonna select on column are actually columns and click on vertical position in the center so a lot of this is just trial and error yeah I mean you can tell I've used this software a lot but sometimes I forget I'm like where the button is but if you use this more and more it'll just become really natural to you and that's it so now let's save and close a symbol and see what it looks like and we can even preview in a new page and I think it looks pretty good one thing is I would like a little bit more space on the top and the bottom so let's figure out how to do that so we edit a symbol and now I'm gonna select background section and when I scroll down to layout in position I'm gonna uncheck this so this way we can edit one thing at a time and let's try 10 pixels at the top and 10 pixels at the bottom and that seems to be a little much so I'm gonna go 6 and 6 and then I'm also gonna lower the size of the logo a little bit so I'm gonna make that image smaller that's starting to look pretty good so I'm gonna save and close that symbol and that's it let's reload that and now we have a home page and a tools page and you've got your menu now one last thing you might want to deal with the menu depending on what look you like is add a shadow' and that's really easy to do you would select the background section scroll down and then under shadow you can add a new shadow and you can play around with this until you get the effect that you want you can make it really settle which would be more of my style or you can make it super obvious so I don't even know if you can tell I'm gonna made that to settle but it's up to you with that shadow and that's it for our menu next up is to create our website footer and this is going to live at the bottom of our website and I actually want the footer to be very similar to the thrive symbol so I'm just going to duplicate this but one thing I don't want is I don't want to have first of all we want to unlink this because we don't want to change the menu on accident this is now the footer and like I was about to say earlier we don't want the custom menu on the footer so I'm gonna get rid of that and instead I just want some paragraph tags and I'm gonna find that copyright symbol that you always see on websites and just copy that copy the copyright symbol put the year and you can put your company name whatever I'm just gonna say Eric John Campbell and now I'm going to change the text and I like it with a little bit less opacity for the footer and also lower the font size and now that that's done I'm going to change the text so it's aligned to the right-hand side [Music] and I don't think we need a logo on the bottom either I'm gonna delete that column and what's happened here now is because I deleted that column it changes to how this layout is structured [Music] for the columns you just have that go to the right I see what's going on here so I'm actually going to duplicate this artery even just move the paragraph outside of the column and delete the columns and lastly we just want that text to be in the middle and that's it that's our footer then click this button to save it as a symbol and I'm going to put in footer and now just because I don't like that white they put around it I'm gonna take off this one pixel padding and click Save so that's it I know it's it seems kind of complicated to create a footer when you compare this with other tools like Squarespace or Wix but the beauty is if you know how to create a footer you know how to create pretty much anything on your website because you're creating everything by scratch and now let's just add our menu and footer to our tools page and you can see how easy this is first I'm going to exit thrive Architects and then head back over here and under tools we're going to edit with thrive architect and I'm gonna search for a symbol this time and we want templates or symbols and the first one I'm going to add is the menu that's the menu bar and I'm gonna change that padding so it's zero pixels next up I'm gonna add the footer and to do that I'm just gonna drag templates and symbols select footer and choose symbol and that's it so it's really that easy and I'm just gonna get rid of this header get rid of that one pixel heading and click Save and if we were to preview our website now if we click on home it's taking us to the home page and if we click on Tools it's taking us to the tools page so that's it that's our menu and footer.