Creating A Personal Branding Website - Part 1

Lesson Details:

Video Transcription: This course is brought to you by Appy Pie as part of our academy series in this video we're going to create our website pages and to do this we're going to start with the home page and I'm using that wireframe that I created earlier by this point we've already created the menu and the next step is to create the hero header where there's going to be an image of me and a call-to-action so let's make this happen on the backend of your WordPress website select the home page and edit with thrive architects so before we get started we want to think about how do we want to set this up and the first thing is to add a background section so that's going to give us a lot of control over the colors which we're gonna want for this area of our website and next up I'm thinking we add columns and that way we can have the hero image here and then the call-to-action here but another thing I actually would like to try first is adding the hero image as a background image so to do that under background style you would add an image and let's just upload it and see what happens this is so much about experimentation so one thing off the bat is just know that this image is very big at two megabytes so you would normally want to close that down make it smaller so now with this background section I'm going to see if I can adjust the height of it and I would want that image to be bigger so it doesn't like that so this doesn't seem like the best option here so what I'm gonna do is I'm gonna try something else I'm sticking with the columns route so go half and half and putting the image in one and then the next one I'm gonna put in my heading which we created earlier inside of this PDF it was under number four how to use my favorite tools and systems to 10x your online business so I'm gonna change that to heading one and I don't like it where everything's capitalized so I'm just changing that and then also make it bold and after that I want to add a call to action button so I'm gonna select button and this is interesting here because they've added a new call to action thingy they keep adding new stuff it's crazy but in this case I don't want that that looks too overly complicated so let's just take the button drag it under here and later I'll set it up so when you click this button a pop-up comes in asking for your email address and I want to change the color to that blue make it a large button and also make it full web tools and systems to 10x your online business so I'm gonna change this later but for now I'm just saying get my food roadmap and now I want to change the color of this background section so let's try with that off-white I had earlier so that looks pretty good and now we want to get rid of this extra space below the image let's get rid of that margin and then they still see there's some space under there so let's click on column and then columns so there's that's where the space difference is because did you see that Green Line go down let's get rid of that padding and there we go so that's pretty legit now here's that little white line I don't want so I'm going to get rid of that and next up is I'm gonna add a bar for social proof if we look over here you can see there's a bar there that we need to add I'm going to add a background section and just change it to a random color for now so one thing we don't need is all this extra space up here as well let's get rid of and I'm gonna add a margin here you could type it in or you could just select the slider hold down your mouse and change it to what you want so I would like to put that a little bit more in the middle now one thing I'm not really digging right here is there's a lot of white space above here and one thing we can do is on the column so you can get rid of this padding which will bring it up a little bit but I think we can actually it does look pretty good but one thing is with the margin you can always make it bigger but you can also go negative and bring it up a little bit and now that I've taken a look at this this button is too big so I'm going to change that to me and then click Save unless just preview this to see what looks like so far so that's not bad I mean we've made that really quickly so I'm not sure about that white background though it seems kind of boring but at the same time the green would be too much but we could try it because why not so for the background section I'm gonna change the color and we haven't added our green yet to do that I'm gonna go to our design code and grab that key color paste that in and add that now obviously that's too much but we could try lowering the opacity of that green that's starting to get interesting  and I'm gonna apply that and I'll stretch it to fit the screen with now I actually I think that's not looking so good right now yeah I'm gonna stick with that white that looks better and next up is the social proof bar to do that I've already created images of the places I want to highlight for social proof and there are four of them so to add four images here I'm just gonna add a columns block I'll put that inside the background section and do the four columns then I'm gonna drag an image inside the column and I'll just upload them all at once and then select them one at a time and I'll duplicate that image and drag it over and then change the image itself so we'll edit all the spacing in a little bit but I just want to get them all down here first and we can change this background color so it doesn't have to be purple anymore I'm going to go black and try with the lower opacity or maybe the off-white would be better even do all white so right now making sure all the images are centered and also lowering the size of the bigger ones so it's consistent the one thing is I'm going to select columns and make sure they're all in the middle for vertical position there we go and I just thought one thing I'd like to add here too is the number of students that I'm teaching so we can add that to the left here and it just creates a new column there we go and that can be a heading for I'm actually gonna try changing the color here to that gray so it matches the other items here so I'm going to use the app mini picker for that grab that gray color and change that there we go so that's starting look pretty good but there needs to be a sharper distinction here so either this background color needs to change or the background color here needs to change I think this should be the white and then this background up here should be the green so as you can obviously tell I'm not a designer at all but it through trial and error I think most of us can non designing people can figure out what works and what really doesn't and another thing that I like to use on the web sites is gradients so maybe a gradient will look better here to do that you just click on this gradient button here and you select the first color and then you select the second color and then you can just adjust it so that's pretty intense and you can change the angle of the gradient so it's almost like the spotlights on me so that's not beautiful but I think it's starting to look a lot better then click preview now one thing is this looks really crowded so I might take one of these out I don't think anyone knows what this company is so I'll just get rid of that and make the text bigger and it seems like this is lower than everything else so what I'm gonna do is change the margin a bit raise that up and for this background color we could probably do a little bit of a more intense green oh this is interesting okay nevermind I didn't change anything because there was a color underneath the gradient all right now we're getting somewhere and I light a little shadow this button okay it doesn't need to be that much the only thing I'm not sure about just the text on the green starting to get a little bit harder to read so we can try it with a different color yeah no thank you so we're gonna undo that save that and let's just preview this here I think it's kind of weird going from this color here to the green if you're a designer you're probably watching this like oh I just do this one thing like you'd be so much better but I don't know what that one thing is but for now I would say this is good enough and I might just play with it over time I'm gonna add some space here too okay so that's that next up is tool systems and free training for that I'm gonna add a new background section and by the way before we do that remember on our page widths we wanted to alternate between eleven hundred pixels and 960 pixels in this case I'm gonna change this one here to be 960 and let's see what that looks like so that just requires a little bit of changing around but I think that works pretty well all right next up is the three columns and this background section is going to be 1100 and to do this I'm going to select columns and add that right in the background section and do it in two thirds now one thing is I want there to be space around these columns so I'm going to start out by adjusting the padding here and what I'd actually rather do is change the padding on the background section so let's try 20 pixels on that side 20 pixels on that side and then when we select the columns we can change the gutter width which is the width in between each column and I'm gonna try putting that at 30 so now that's that's done I'm going to change the background color for each column and next up we're gonna add tools systems and free training the first thing is to find an icon so I'm gonna drag that I in and find an icon that represents tools so for now I'm just going to use this wrench and what do we want to do with this wrench to make it look good first of all we can change the color next up I'll add a header underneath   change that color as well I think that actually looked better to the right then icon so what we're doing now is we're putting a half and a half column inside a third column which you can totally do which is great now let's try putting that to the left and that to the right let's get rid of that space on the top and let's get rid of some of that space at the top so there we go that's the tool section and that have been out of paragraph these are my favorite tools on how to build an online business in 2018 so I'll change that for later but that's just what I want to add now I'll add this text here change the color and then add in some padding so it feels like there's a lot of space in between these two so we don't need that we don't mean that so I'm just gonna make this a little bit longer because that's what it's going to be on the finish website tools are your secret weapon so that obviously it's like an exchange but for now I'm just getting an idea of what it all looks like so I'll put that at 20 pixels that's too big 17 and then add a button below that to make that small not full wet or what we could do is we could make it full wet and try adding a margin to it okay so it doesn't like that try making it a hundred percent then add that margin no same thing but this could actually look kind of good where there's no space under the button they're in the shadow get rid of all that space we don't need change the background color of this column let's just try white what if we tried this and maybe take the color down a little bit so it actually seems like two Tech's heavy so I probably keep the description shorter hmm tricky it's not look very good the one thing I'm just going to do is add in extra background sections so I got an idea of what the rest of the website is gonna look like I think this column actually did better when it was the full darker color and then the background section could be lighter try playing the button better making it smaller and add some space underneath there you go that's starting to look better one thing we can do too is just increase the padding for the column padding 10 pixels 10 pixels just do it all around 10 pixels 10 pixels so really that's no that's kind of confusing so I added the padding on the text so I'm just gonna get rid of that and then on the column itself I'm gonna change that to 30 pixels there you go and we can add some space that's attacks there and we really want that button to do is we want it to look about the same width as the text so I'll just go so that's it that's the tools what we can do is we can just take this column and actually there's got to be an easier way to do this because you can't duplicate columns you can put everything inside of a content box and then duplicate the content box so that's what I'm going to do here I'll take these columns put them in the content box take this text take this button and for the content box just turn off all the padding and margins click save so now we can grab this the tools make sure we select a content box duplicate that and then drag it into the next column and we just need to apply the same column settings to this column which is 10 10 30 30 30 pixels on the right and if we go to our wireframe here that was systems and let's change the icon to something appropriate for systems persistence I'm not seeing anything that seems like an automatic maybe I'll search like a gear so you search system you get an ear I'll just do a checkbox because when I think of systems I think of checklist and then center that and change the background color of that column and now let's do the same thing over here so you take that content box duplicate it put it inside here change the content or the column itself so we had 10 10 30 and 30 and this is going to be free training so where is free training I'm looking for like a cap and gown or a class board or something like that oh that's a good one for systems I'll just do the light bulb for training there we go okay training and change the background color of that column to be the same color free training best systems all right now we're getting somewhere and we could add a shout out to each of these columns to actually pronounce passing.