How to Create a Personal / Portfolio Website | 2021 Step-By-Step Guide!

in this video i'm going to show you how to create a personal portfolio website step by step i'm going to show you how to design the entire site and i'll leave a template file in the description so you can download it afterwards i'm also going to give you a huge discount on your web hosting what's going on guys welcome back to another video on create a pro website my name is levi hagan and i'll be walking through this tutorial step by step here at create a pro website we're dedicated to showing you how to build your own website and how to start making money online with our free in-depth tutorials if you're new to the channel check out the rest of the videos to see what i'm talking about we show you how to build complete online stores from start to finish we show you how to build affiliate marketing websites as well as portfolio sites like the one we're gonna build today let's take a look at the website we're gonna be building today we're gonna start with a beautiful hero section and some great looking motion effects scroll through with a quick value proposition just saying what we specialize in we'll include an about me section a featured video section a filterable gallery with multiple photo shoots an instagram feed and a contact form at the bottom so your clients can get in contact with you right away via email now this video is aimed towards the absolute beginner of web design if you've never created a website before rest easy we're going to be making the entire website using a super easy to use drag and drop page builder so you don't need any previous experience or knowledge of coding during this tutorial you can use the right and left arrow keys to go forward or backwards by five seconds i also put timestamps of the video down in the description so you can skip ahead or go back to any of the steps at any time so without any further ado let's go ahead and get started with step number one which is to go ahead and get a domain name and web hosting now a domain name is just the address to your website it's what people will enter into the search bar to find your site so something like yourwebsite.com and web hosting is just renting space on a server somewhere that's connected to the internet so that you can store all of your media and files on a website there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything happens to your website if you want to own your own website and have a custom domain name for it then you have to purchase your own web hosting which i'll show you how to do in this tutorial and i'll give you a massive discount for it as well yes you can get a free website but it comes with a lot of limitations as well like you don't actually own your domain name it'll be something like yourwebsite.wix.com or squarespace.com or whoever's hosting the website you also can't upload new themes in order to customize your website exactly the way you want you can't upload plugins to increase the functionality of your website you can't monetize your website with ads in order to make money from it and your website could be deleted at any time because you don't technically own it so for these reasons i recommend hosting because it places you in control so in order to get your domain and hosting just click on the very first link in the description or go to creatorprowebsite.com and it'll take you to a page that looks like this now by clicking on the affiliate link which i receive a commission from you'll receive that massive discount that i'm talking about for your web hosting so i strongly recommend it so right off the bat you guys see that we've got three plans in front of us we've got the hatchling plan the baby plan and the business plan so the hatchling plan is the cheapest one of course it's the smallest one you get a single domain name one click installs unmetered bandwidth free ssl certificate now you get most of this with pretty much everything else but the hatchling plan is of course the most basic and right now you're getting up to 61 off so it starts at like 271 a month so it's pretty nice and then you've got the baby plan and the business plan i really only recommend the baby plan and the business plan only after your website starts to kind of make money and take off i mean of course if that's what you're trying to do with it but these two are of course a little bit more expensive and you get unlimited domain names so if you plan on getting multiple websites or anything like that you can always upgrade later so for now if this is your first website i would recommend just starting with the hatchling plan so that's what i'm going to do for this tutorial i'm going to go ahead and click on buy now right here all right and then right off the top we've got your enter your domain name right here so you get to actually search your very own custom one if you already have a domain name you'll just go to this tab right here but for this tutorial i'm just going to create a new one and so we can try something like just like that click outside of the search bar perfect and when the search bar highlights green like this you know that your domain is available and ready to go so we're good if it does highlight red it'll tell you that it's been taken and then you'll have to search some other variations so instead of create a pro portfolio i might do create a pro portfolio lh for levi hagen just because that's my name you can always just try random stuff and then right over here you've actually got two different places where you can choose it you can come over here and choose com.line.space.all that stuff or you can come down here and see all of their different options and you'll see that they have a bunch i mean tech dot space dot me dot info all that now i recommend going with com just because it's the most common for people to search whenever they're looking for a website and then also it's just one of the more professional looking ones anyways so i'm gonna stick with a.com and i recommend you do the same all right so let's go ahead and scroll on down here and then before we get to number two this is pretty important right here the domain privacy protection i strongly recommend you getting the domain privacy protection for the additional 14.95 build annually so this is billed as well as your domain name price which is billed annually and so what the privacy protection does is it protects your personal information like your phone number and email from solicitors and telemarketers who are going to try and market different services that they can provide for you for your website and so it gets kind of frustrating when you have a bunch of people calling you all the time i mean it happened like five times a day for me and so it got kind of annoying to be honest and so i would recommend just making sure that this box is checked for your domain name now of course this is completely optional so if you don't want to pay the additional 14 you can but i definitely recommend that one so that's why it's important for me all right so number two we've got choose a hosting plan and so this is the exact same as what we just did before we came to this page we chose between the hatchling baby or business plan and so it just gives you another option to switch over just in case you know you're indecisive but i'm going to leave it on the hatchling plan now this is also kind of important the billing cycle and so you actually get to pick if you want to pay one month or if you want to pay for all 36 months now whatever you choose in here you're paying for upfront and so it's going to tell you 36 months up front and so it'll come out to 271 per month is kind of the average but for instance if i select this and go down to the bottom it's 170 right now because i'm paying for all 36 months up front and so i'm going to go ahead and choose the first month because i just want to pay for one month total up front now of course the longer you go the more of a discount you receive so this averages to 61 off so 271 and then this is 30 off because i'm only going with one month so the longer you commit the more of a discount you get um one thing that i also want to point out is to pay for your domain name you're billed annually so the web hosting which is this part you could also go for annual if you wanted to to make them kind of like level out but i'm just going to go with the one month just kind of wanted to explain that for you guys okay so number three we've got create your hostgator account you're basically just creating an account with hostgator this is very simple so i'll see you guys in just a second i'm going to type out my email address password and create an account real quick all right guys so i went ahead and just typed in my email created a password and also a security pin which is super duper secret so that's why it's blurred out go ahead and move on to number four so we've got enter in your billing information and so this right here is just going to be very standard just entering your very personal information for your banking you've got two different payment types you've got the credit card and paypal and so i'm just going to enter in my credit card information right now so i'll see you guys in a second all right guys welcome back went ahead and entered in my billing information and i hope you did the same let's go ahead and scroll on down to number five so the additional services section so what i'm gonna do is something a little strange i'm actually gonna uncheck the sitelock essentials and the site backup or backup your hard work part so i'm going to uncheck both of these i've got videos on the channel that show you how to do both of these for free so i would recommend you do the same uncheck these and then go check out those videos and that way you can save yourself the two dollars a month and the 299 a month or the 23 and 23 dollars annually so i'll show you guys how to do those in different videos i'm gonna go ahead and scroll on down all right so number six enter a coupon code just make sure that your coupon code looks just like this which if you went to the link that i have in the description or typed in creativeprowebsite.com hosting it would already enter this in for you but this is really important so that you get your discount so all right number seven is to review your order details so we've got the domain registration for one year which is billed annually and so that went from 17.99 down to 4.99 so there's that huge discount i was talking about with my coupon code right here the affiliate link and then we've got the hatchling plan for one month which goes from 1095 down to 7.95 and then we've got our hosting add-ons which is that domain privacy protection for the 1495 build annually and so our total comes out to 29.10 which is not bad for your first website i mean if this is your first time all right so we're just going to agree to the terms of service and click checkout now all right so now hostgator is just going to set up your account it's going to take a few minutes so i'll see in just a second perfect once hostgator finishes setting up your account you're going to be seeing something that looks like this tell us a bit about your goals i'm just going to go ahead and skip out of that and also close that guy there okay so now we're going to go ahead and skip all of this and go straight down the bottom and say skip building for now i just want to go to my hosting dashboard perfect so now we are in our hostgator dashboard so you can always log in if you need to so now that we're in hostgator's dashboard we can go ahead and move on to step number two which is to install wordpress so in order to install wordpress hostgator makes it really easy all you got to do is just go right over here to the control panel and click on install wordpress and then from here go ahead and click on install now all right so for the wordpress installation it's pretty easy kind of similar to what we just did for the hostgator it's not too much so we'll get through this together so first you gotta choose the correct version of wordpress that you wanna install which it's 5.7 is the newest as you can see and it's already selected so we're good to go and then choose the installation url if this is your first time building a website it's automatically right here if you do have multiple websites with hostgator you can click on the drop down and just make sure that you're selecting the domain that you're creating today all right scroll down just a little bit more and we've got the site settings now we've got site name and site description and so we're going to go ahead and change these right here let me go and just show you guys if i were to search hostgator so just so you guys know this right here is the site title and then this right here is the site description and so what we're about to type in right here is what's going to actually show up when people search our website right here so you've got the site title site description so let's go ahead and do that now so for the site name i'm going to say create a pro portfolio which is the name of the website that i'm doing right now and then for this we can just say something like something like that but you might want to do something a little bit more than that just a example for now and then go ahead and scroll on down to the next one which is the admin account this is very very important the admin account if you don't remember anything for the rest of this video make sure you remember this part the admin username and the admin password this is what we're going to use to log into our website to edit it and change it every single time so let's make sure we get this right for the username i'm just going to go ahead and make it simple i'm just going to say levi which is my name but of course you can make the username whatever you want and then for the admin password i'm going to go ahead and hide it and type in my own password and you get to choose whatever password you want just make sure you remember it perfect and then for the admin email this is also just as important this is the email that most of the notifications for your website are going to go and you're also going to be using this all the time so let's go ahead and make sure we remember this one as well i'm going to go ahead and change this to the email that i created for this tutorial but what you guys would do is put in the business email for the you know business that you're creating so if this is a personal portfolio maybe you have a business email so it would be like levihagenportfolio.com or something like that or gmail.com and so you want to use whatever you want all the notifications to go to perfect so my email is in there and good to go move on down and we've got choose a language and so you get to select a different language i'm going to stick with english because i speak english so we're going to leave that there okay and so now we've got select plugins advanced options and select a theme i'm going to show you guys later on in the video how to select your own theme and how to select the correct plugins and everything and i'm going to explain it as we go so don't worry but i'm going to go ahead and skip this part so scroll on down and say install right here and so wordpress is installing it's going to take a few minutes so just give it a second perfect so now you can see congratulations the software has successfully been installed now we also have this important part right here the administrative url every single time that you want to edit your website you're going to be having to go to this url now it's really easy to remember you just got create a pro portfolio.com which is the domain name that you just created slash wp-admin so that's all you gotta remember is wp for wordpress dash admin kazoo or the admin now if you can't remember it which is totally fine you can always just open it up on a new tab and then just create a bookmark for it let me close out of that and so you just create a bookmark right here all right so now we're going to go ahead and actually go up to it on a new tab perfect so mine says your connection isn't private now if it says anything like this your connection isn't private or this page doesn't exist or 404 error or anything like that all that means that your site needs to be propagated first and so what propagation is is hostgator right here is going to be taking the new domain name that you just purchased and they're going to send it out to every single server in the world that's connected to the internet to let everybody know that you just purchased this domain name and that it's live that process can take anywhere from 30 minutes to an hour sometimes it can only take a few minutes but it never should go more than a day so all you have to do is just keep coming back to this page and clicking refresh over and over until you see that login screen that looks like this and this is the wordpress login for the back end of your website so i'm gonna go ahead and type in my username that i typed in back in hostgator and my password and just like that ta-da we're in the back end of our website and we are on wordpress's dashboard so we're ready to go alright so now that we're on the dashboard for wordpress we can go ahead and move on to step number three which is to download themes so in order to download a theme i'm gonna go over to the appearance tab right over here and go over to themes i'm gonna go ahead and open it up on a new tab just because i always like having a dashboard that i can go back to all right and so from here you can see that the active theme is 2021 and i'm going to show you guys what that looks like the way you do that is just go up to your site name in the top left corner and you can click on visit site or just click on the actual site name itself i don't know why there's two different ones but they do that i'm going to go ahead and open it up on a new tab and so this is what our website looks like so far it's very boring just like a mint green with black text and that's it but that's what the theme does so i'm gonna go ahead and take it from the 2021 normal wordpress theme to one that's called astra so i'm gonna go over to the add new themes button right here and then in the search bar right up here i'm going to search astra now obviously it's right there so i'm just going to click on it and then here we are astra now one thing that i wanted to let you guys know and if i were to clear this out but don't ever pick a theme based on the template or image or anything like that or like the background images or demos you really want to pick a theme based on its back-end capabilities and also just kind of based on what you're using it for and if you're interested in learning more about themes i've got a video about that it's the top five themes on how to choose one and so you guys can check that out on the channel but we're going to use astra and so it's right here so we're just going to go ahead and click on install and activate perfect and so now that we have our theme installed let me go ahead and show you guys what that looks like now i'm just going to open the site up on a new tab again boom so it completely changed the website different fonts different colors and now we've got like this boxed kind of theme instead of it just being full page of course it's far from being done there's nothing in here that's why it's just a bunch of default stuff but i just wanted to show you how a theme can completely change the look of your website entirely and that's what a theme is for it's for customizing text fonts colors a whole bunch of stuff for your website so they're pretty useful so now that we've got astra installed we are good to go we can go ahead and move on to step number four which is to install our plugins so in order to install the plugins i'm gonna go ahead and close out of this tab go back to my dashboard and i'm gonna go down to the plugins tab hover over it and then i'm gonna click on add new open that one on a new tab all right and so now that we are in the add new plugins tab we can go ahead and begin to just search the plugins so the first one i'm going to search is called elementor which is right here and so elementor is that super easy to use drag and drop page builder that i mentioned in the introduction it's incredibly easy to use and it's also my personal favorite page builder out of all of them so i use this one the most so i'm going to go ahead and click on install now and activate cool and so you'll notice that every time we install a new plugin it's going to take us away from the add plugins tab so we're just going to go right back and we're going to repeat that process like three more times so now i'm going to search elementor again and this time i'm going to take this third party elementor plugin so it's called essential add-ons by elementor and so or for elementor excuse me and so what this does is just adds 40 additional free elements that you can use like widgets in elementor and so it's very useful so i'm going to click install now and activate and so you'll see me mention ea or essential add-ons quite frequently and that just means that extra plugin so let's go back to the plugins tab click on add new we're going to go over to the search bar and this time we're going to search something called smash balloon all right and so you'll see right here smash balloon social photo feed and then you've got a post feed and a whole bunch of other stuff we're going to take this photo feed right here it's a instagram feed as you can see because i'm going to show you guys how to actually put in your instagram account live into your website that constantly updates so if you post a new picture on instagram your website will show the new page so i'm going to go ahead and click on install now uh before i click activate though i wanted to show you one thing before it takes me away from this page because you know it always does you can always see right here in the bottom left corner how many active installations how many people have installed it on their websites so we've got over 1 million active installations 5 star rating 3 3331 actual ratings of this so people rated this five stars or whatever not five stars but different ratings and so this is a really trusted plugin and so if you're ever curious about it you guys can always you know scroll through here and see that this is four stars most of these are five stars here and so uh very trusted plugin so let's just click activate all right go back to plugins and click on add new and we're gonna search wpforms and there it is right there all right and so wp forms you would just click on install and then click on activate but it looks like i already have it on here so we are good to go and we're going to search one last plugin called starter templates perfect and so it's right here starter templates for elementor beaver builder gutenberg just a bunch of page builders right there and it's for astro right there ocean wp and a lot more themes and so we've got astro so we can use this one i'm gonna click install now activate all right and then this is the only one that i'm actually going to continue with for starter templates it's going to ask you which page builder you're using so we'll just say elementor and it takes you straight into the starter templates right here and so actually while we're here we can go ahead and move on to step number five which is to select a template and so if it didn't automatically take you here you can always hover over the appearance tab and go down to starter templates but when i downloaded the plugin it went ahead and automatically took me inside and so uh you'll have to select elementor as your page builder because that's what we're using and then you'll be able to see all these different templates in front of you now i really like using the astra theme because it comes with the starter templates plugin and so this one comes with over 70 templates and out of those 70 i believe there was like 20 or 30 of them are free and so it gives you a lot of different options so that it'll save you some time and so we're going to be using one of these templates as well now as you can see we've got the free versions which are right here and then you can click on it and you can scroll through the template and see what it looks like and so this template is actually a complete site it's not just one page so you have four pages we've got an about page and so this is what it looks like a services page contact page as you can see and all of this would automatically be downloaded now we're not going to use this one i just wanted to show you now whatever you're highlighted over like the homepage right now i can say import the home page or the entire site so we're going to do that in just a second i'm going to click the back button as well as the agency version right here so if you click on this one you'll see that you actually have to get the agency bundle this is just the pro version of the astra theme or the starter templates and so you have to pay to get these but again we're just going to be sticking to the free version so we can go to the all tab right here and you can also select different types of websites so if you want only e-commerce websites these are online stores that you can install templates for and so you can sell products and stuff like that if you want a blog or something like that we're just going to stick to all and then you can also select if you want all free or only the pro versions which are agency but i'm going to go ahead and click on free and then we can go ahead and scroll on through here and check out a whole bunch of different themes the one that i really like is this one right here it's the vlogger theme and so i'm gonna pick this one and so we can do a quick scroll through i think it looks pretty cool lots of big text and everything so it's pretty fancy so i'm gonna use this one and so it only has one page which makes this even easier because i'm only going to show you guys how to create one page if you guys want multi-page websites i do have other videos on the channel that'll show you guys how to do those but for now we'll just stick to one page so let's go ahead and import the complete site you could just click on import home template but it's pretty much the same thing because there's only one page and so now the website's being imported i'll see you guys in just a second all right hooray the website has successfully been imported so we can go ahead and click on view site but i'm not going to take the easy route i'm just going to go up here and open it on a new tab not that that's any harder just being fun okay so now we can take a look at the template that we just downloaded and so it's fully imported we've got this cool header hero section we've got like value propositions like what we can expect an about me part a vlog section a gear section and then also a contact section which it looks like the contact form is missing but i'm going to show you guys how to do that as well so go all the way back to the top and then we've also got it looks like some menu options up here and because this is one page i'm gonna assume that these will take me to the specific spots yes okay so the about me takes me to the about me section uh let's see the get in touch is probably the contact section it'll take me automatically to the uh i'd love to collaborate let's send me a message part so that's pretty cool and then let's talk is the exact same thing a little redundant but we'll go ahead and fix that later and so so we'll be editing the page in just a little bit but first now that we have our actual template downloaded i'm gonna close out of this tab and we're gonna go ahead and move on to step number six which is to edit your header footer and logos all right so we're gonna be editing the header footer and logos and before i even do that i also wanna show you guys how to create a specific color theme for your website so what i do is i go to a new tab and i type in coolers.co c-o-o-l-o-r-s-c-o and so this is an actual color generator and so it basically just makes a palette for you which is really helpful so i'm going to click on start the generator and so what you do it's really easy just click spacebar and it's going to randomize a bunch of colors that look good together so as i click space bar it's going to give a bunch of just random colors right and so another thing you can do is you can go over here and you can change the shade so if you like this green but you want it just a little bit darker you can do that and then you can lock it and so now that i've locked this one all of these are going to change except for this one so i hit space spacebar and now these change and i can keep this one and then i can keep locking as i go so i'll lock this one let's just say i really like these colors which i don't but whatever and then now if i hit spacebar with all locked they're not going to do anything so this is a really good way to choose the different colors that you're going to use okay and so now after you choose these colors what you can do is go up to the export button right here and then you can export it as a pdf so you can save the document so you click on this guy create a title and just call it something and then click on export now i already have this exported on my computer for the colors that i want to use so i'm going to show that to you guys right now and so the document that you download after you click on export is going to look like this and so i chose to use black green white a light gray and a little bit more like a bluish darker gray so this is the color palette that i'm going to be using while we build the website so now that we have that color palette we can go ahead and close on this tab and go over to the appearance tab and click on customize so now we're going to start working on the header perfect so now that we're in the customize tab this is the theme of astros customize tab so this is different from elementor we remember if we uh if we go back in the video you'll remember that we downloaded astra as a theme and elementor as a plugin elementor is the page builder and so that's how we'll be editing the meat of the website all of this stuff in here and then for astro we're going to use this to build the header and also the footer and so that means this part up here which that's why it's highlighting blue when i hover over it and then also the footer down here which it's a very simple footer and i actually like it that way but we'll scroll up to the top so let's mess with the header first first of all if you ever hover over you can always hover over whatever you want to edit and then click on the little blue pencil icon and it'll take you straight to the settings now you'll see if i back out we came from primary primary menu to header and then all the way back out to the main menu right here so that's kind of a useful thing if i want to go to the logo edit click on that little pencil takes me straight to the logo and so that's pretty useful or if i want to edit this button right here which is a widget it'll also take me to the header section and then i can also click on the header itself and edit the bar which is pretty cool now i'm going to be showing you guys where to go just so that you guys get familiar with this back end right here rather than just clicking on those blue pencil icons but i just wanted to show you that you could if you wanted to so first thing we're going to do is edit the header so to do that we'll go over to the header builder all right and then for the astra header builder you've got this top row up here the middle row right here and the bottom row right here and so as you can see we only have widgets these boxes here in the middle row and so that's the only one that's visible if i were to move the logo to the top row just by dragging and dropping it now you can see that we've got multiple rows but if nothing's in it it just stays invisible and disappears so now i've got the top row middle row and bottom row is non-existent because nothing is down here so i'm going to go ahead and drag the logo just by dragging and dropping and putting it right back into the middle and so you can see that now it's all in line which i think is good this is useful uh for instance if you wanted to put like the logo right here in the center and then maybe you have the menu on this side so if we put the button over here for instance and then i were to click up here and then add another widget like social icons or something like that and then maybe i want my primary menu to actually be down here below i can go ahead and click on publish just to save my work now you can see that my logo is in the center i've got this down here a button over here and then these social icons up on top which are kind of hard to see but uh i you don't have to follow along for that part i just wanted to quickly show you that you can have like a multi-level header if you wanted to so the capability is endless but for now i'm gonna go ahead and take it right back to the way it was so the button goes over here primary menu was in front of it and then my logo was on this side perfect so now it's back to where it is and we can go ahead and continue to follow along with me so the first thing we're going to do is go ahead and edit this primary menu right here so let's go ahead and click on publish to save my work just in case you guys did follow along with me i want to make sure that you click publish so that now that it's back to normal right here it's good to go but if you didn't follow along while i messed the header up up there that's good so let's go back we'll go down to menus and so this is a menu right here so we're going to go down to menus and you can see that primary menu came with the template that we downloaded if there wasn't a menu here you can always just click create new menu type in a random name and then say where you want it and then just click next and now we've got a menu that we can add items to blah blah blah and then if you go back to menus you'll see it right here so you can have multiple menus but i'm just going to go in and click on delete menu and again you didn't have to follow that part i'm just showing you guys that you can create multiple menus if you want to so we're going to go ahead and edit the primary menu right here and so that's the one that's being used up here so we click on it and we can see all of the options that are in here right now if we ever want to change the order like for instance i want about me to be after the vlog i can click on vlog and drag it up and now vlog is in front of about me and so this is just the order if i ever want to have one of those sub menus where you hover over it and then you've got multiple drop downs you can take vlog and put it under home just by dragging over just like this so if you see that dotted line behind it that's in line that's kind of indented leave it there and so now the home button i can hover over it and you'd see vlog right here but it looks like the text color is white and the background is white so that's why you can't see it but that's a good example for you guys so i'm going to drag it back out and put it right here so let's go ahead and change these right now i like the home button and i like the about me button so that takes you to the about section now i'm going to change the vlog section to be a video section so let's go ahead and click on vlog and i can change the label to video i'm going to say videos and then the url so right here you could put you know something like www blah right a url and so this is where that button is going to take them so you click on this button and it takes them to the url right here but if you put in a hashtag or a number sign a pound sign that is a placeholder so now this is going to do nothing so if i click on the excuse me the videos button so if i click on the videos button it's not going to take you anywhere now if i take the placeholder and then i also type in a word like videos i basically just told this button that wherever i put the word lowercase v videos wherever i put it in the css uh coding which i'll show you guys how to do later don't worry and it's not hard at all uh wherever i do that now when i click on this button it'll take them straight to that video hashtag right and so for instance this about me section has a hashtag about and so if i were to click on the about button over here you'll see about me okay so they did about dash me and so that's how the template was built so again i'll show you guys later on when we customize the website how to make sure that the section is labeled by that hashtag so it'll take them to it but for now we're just going to set up the menu so the about me is fine videos says videos and the name is videos it's always easy to just make this what it is so if it's a photo section say photo you know what i mean so that's good to go there close that one for gears i'm going to go ahead and change this one to be photos or you could change this to gallery or photo gallery whatever you want it to be but i just want photos and i'll change that to hashtag photos the last one i'm going to change from get in touch i'm going to change it to instagram feed all right and then i'll change this to instagram perfect so now we've got a home about me videos photos instagram and then the let's talk button we have to edit that one as well but that's separate from the menu okay so now we've got all of our buttons here i also wanted to show you another thing if you ever wanted to edit your menu you can make these buttons do whatever you want all you got to do is go to add items and then you can let me close the pages tab right there so you can choose from anything you can make them custom links and then just type in the url or do it in the same place that i did it which was right here right but you can click on the custom link you can choose from pages so right now i've got a home page if you created a multi-page website you could just pick a page like sample page and then have that button take them to a different page of your website you can do posts like blog posts landing pages categories if you had products like an e-commerce store tags formats anything so that's how you would do it but for now again just follow along with me we're just going to have hashtag buttons that take them to different parts of the same page this is just a basic portfolio page okay so now that we've edited the menu we can click publish to save our work and now we can go back up to the header so we'll go to header builder so i've got my header menu my button and a logo okay now you can also edit the actual uh design of the header as well and so let's go and do that for the menu first so now we've got the general we can change the width fade and stuff like that but i'm going to leave all that you can go to the design tab and you can change the hover style which i want it to zoom in and so now when i hover it makes it bigger see how it zooms in like that i like that i think that's pretty cool okay and so now i want to go ahead and add some color to these now that we've done like the whole zoom in animation so to do that instead of going to the primary menu and then going to the design tab what i want to do is go to the transparent header because this is a transparent header it's enabled right now if you disabled that you could just change it here but for the transparent header i can go to the design tab and then right here menu color i'm going to go ahead and change the text and everything so the the normal color is a light gray and that's why these are kind of light gray and then the active color is why it's bright white like this anytime i hover over it so let's go ahead and change that now the normal color i don't mind i think that's just fine like that and then the active hover color i'm actually going to change to be the green that we have from our color palette that we opened up earlier so i'm going to copy this right here so controller command c and then i'm going to go ahead and paste it right here controller command v and then just like that now you can see that the green is going to be whatever i hover over and it's also whatever page is active so i'm on the home page that's why it's there uh now this is a single page website that so that's why you're never going to see anything other than the home page active um if you had multiple pages and then you clicked on the about page you would see that this one would be green without having to hover over it just like the homepage is now so that's why that's that and you can also change the background color if you want to and so for instance if i wanted red but i think that looks terrible so i'm going to reset that and just leave it as a transparent background so let's go and edit the button next so publish to save our work and then we'll go to the back button here and we'll go click on the button so on the button we can go to the design tab and we can change the actual colors here so right now the test color goes from white to black and so when i hover over it the text color is black and then the background goes from transparent to white so transparent to white so let's go ahead and change that now what i'm going to do is i'm going to say i want the background color to be transparent at the beginning and then afterwards i want it to be black like that and then for the text color i want it to start out as green so i'm going to paste the same hex code that's still on my clipboard and then after that i want it to be able to be green when i hover over it so i'm going to do it again just like that and so now for the border radius right here the border color i'm going to change it from white to green so paste that again and then i can leave it as transparent right there so let's go ahead and click on publish to save our work so now anytime i hover over the button it gets black and it looks like actually the transparent on the border color for the hover is not working so let's go ahead and just change that to black just like that so now when i hover it makes it an all black button and then the let's talk is green so i think that looks pretty cool i like that a lot so i'm gonna go ahead and click on publish to save my work the last thing i can do is just make sure that this button does take them to the contact section but in the link section here it is hashtag contact so when you click on it it'll take them down to the contact section down here so that's pretty cool okay so the last thing that i want to change is the logos for the website so now i'm going to show you guys how to create those right now so in order to do that let's go ahead and click on the back button twice we'll come back to the header builder let's go ahead and open a new tab so in this new tab we're going to go ahead and search something called logomaker but without the e dot com okay so this video right here is just going to show you how to use it but i mean i'm going to show you right now so i'm just going to click out of it very easy to use logo making software free as well so in the top left corner the biggest thing is you can search from over a million graphics so for instance if i click here and search something like camera you'll get a whole bunch of different camera icons that you can use and you can just keep on going and find a whole bunch of them so that's pretty cool i'm going to click on back to canvas over here in the corner so then over here you've got some basic things that you can do like filling the paint with the paint bucket you've got basic shapes like a square or a triangle or something like that and so i can move these around and so i've got my square and triangle and you can also click on text and it'll add some text you can type in here and then you can just drag it wherever you want you can also highlight everything and go ahead and delete it because now we're going to go ahead and create an actual logo you can also change the color of something so for instance if i chose to use a square i can go ahead and change the color to something like this i can also change it from red to orange pink blue whatever you want let's just say i want an orange square and then i can also change the opacity i can type in my own hex code right here and so let's just go back to something else now you can also rotate the square if you want to something like this i can make it a lot bigger and i can use this one to make it bigger as well and then i can go ahead and delete that so let's go ahead and search a hexagon now i'm just going to make a really really basic logo just to use because this is an example so i'm just going to use this one right here and move it over i don't know let's use these cool and then i'm just going to rotate these 90 degrees place them there let's make this a little bit smaller a little bit bigger actually okay and then from here i'm gonna go ahead and change this to be like almost an off-white so let's just say something like that i'll change these to be my neon green which should still be in my clipboard haha yes it is so just paste that color and if you already copy pasted something else then you can just go back to your color palette and so that looks fine and then i'm going to go ahead and add some text and then just do like an l make this kind of bigger like that put it right here and then kind of like that i think and then what i'm going to do is just highlight it control or command c controller command v so i can make something the same size and then just make an h so my name is levi hagen so i'm just putting an l and an h in here and i'm going to put this right here and so you see how this isn't perfect right here you can actually use the arrow key so let me click out of it because right now it's editing the text i can click on it and i can use my arrow keys to just move this around barely so i'm just going to do that move it over and that looks perfect if you ever want to move multiple things together just highlight them all and now i can move both of these so that's pretty helpful and make that white actually i want the whole thing to be white actually i want the hexagon to be white too perfect so you can't see it but it's all here so now what i'm going to do is if i were to highlight it all i can change it to black if i want to but i like the way that that one looks so i'm going to go ahead and click on the save logo icon right here and so whenever you're finished you can go ahead and if you want to you can choose the high resolution file and you have to license it so you have to pay 19 and download the file but i told you this is going to be free and so we're going to say no thanks download the low resolution file right here perfect and so it downloads it to my computer and now let me go ahead and just highlight everything uh just so you can see it i'm going to make it black okay so now i've got my logo here i also want a site icon which a site icon is just what this is right here or for instance hostgator has their little gator as their site icon and so i want this part right here to be my site icon that stands for levi hagan so that can be my whole logo so i'm actually just going to delete these just like that let's make this white again and now this is going to be my site icon so now i'll just click on save and download the low resolution file right there and you can highlight and delete everything if you want to just close out of the tab so now i've got my logo and my site icon so let me show you guys how to put those in we'll go back to the header builder and now we're going to click on the logo or you can click on logo right here and so right now it's this js for jacob smith so i'm going to go ahead and click on this guy and upload my file so select files i'm going to go to my logos folder and i have both of them saved right here so let's just take this one first perfect select it's going to ask if you want to crop it which i don't want to boom that is a big logo okay so let's go ahead and make it a little smaller so the logo width is basically the logo size so i'm just going to shrink it to something like that and there is my fantastic looking super intricate logo not really so i like that there and now while we're in the logo section we can go ahead and scroll on down and we've got the site icon right here so basically just branding our site completely in this little tab so let's go to the site icon upload files select files and then choose my icon right here so i labeled them so my logo is right here and my icons right here so click on open and then select and then it's going to ask to crop again i'm going to say skip boom and so now you can see right here that the actual site icon popped up so let's go ahead and click publish to save our work and to make it live and so it's a little hard to see because i made it white but if you want to you can go ahead and open the site on an incognito tab and you'll be able to see that the site icon is right there so that looks pretty cool so let's go ahead and close out of that guy and go back to the website so we've got our logo in place we've got our header menu all colored and themed out and then we also have our contact button which takes them down to the bottom let's go ahead and take that all the way to the bottom and so now let's go ahead and edit the footer so in order to do that i'm just going to scroll up a little bit so my back button pops up and then i'm going to click it twice and go to my footer builder perfect so now the footer builder acts the same way as the header builder you can see that we've got three different rows if you wanted to get kind of crazy with it but all we have right now is social icons and a copyright which the copyright looks like it's probably white text over here so that's why you can't see it and then we've got our social icons over here so what you can do is go ahead and click on edit right here or click on the social icons button or click on social right here all three take you to the same place and so it's social icons and so now you can click on the youtube one insert your youtube channel url and then you can go to instagram and then you can type in your url that takes them to your instagram page and so all you have to do to do that is you would just open a new tab log into your instagram and then on your account page just click on the hyperlink and copy paste it and then facebook as well and then you can always say if you want to hide one and so now facebook disappears from the list make it reappear or you can delete it and you can also add a social icon and then you can change this to be whatever you want and then you can change the icon as well that's how you do that let's delete that one perfect and so now we can go over to the design tab and we can change the colors of these so i'm just going to change the icon color and so the color i want it to start off as black i think that's fine and then when i hover over it so let's go ahead and pull my green color real fast and paste it and so now when i hover it should highlight green just like that i think that looks good you can also add a background color if you want and do that which i don't think looks very good so i'm just going to leave it off and so yeah so now we've got our black icons right there all right so i'm gonna go ahead and click on publish to save our work perfect so i'm gonna go ahead and close out of that tab open the website on a new tab again just by you know hovering over the name and clicking on it and now we can see what we have so we've got our header menu which looks fantastic we've got our let's talk button which is the contact button and then my logo you can go ahead and let's just go to the let's talk just so it'll take me to the bottom and we've got our social icons right here where people could click on it and take them to your social media so that looks awesome scroll back up to the top and close out of the tab alright guys so now that we've finished editing the header the footer the logos which is also the site icon in there and then also kind of put the colors into the website we can go ahead and move on to step number seven which is customizing our home page so in order to customize the home page we're going to go ahead and go up to the top corner right here and open our site on a new tab and then from here we're going to go over to edit with elementor which is right here on the top ribbon all right guys so we've done all of our prep work we've set up the header menu the footer we've put all our colors into the website and everything so now we get to get to the fun part which is actually customizing the website so this is always fun because your creative side gets to come out so first i want to start with doing a quick overview of elementor so welcome by the way this is the elementor dashboard and so this is how we're going to be editing the meat of the website as you can see now everything highlights when i hover over it because we're going to be able to change everything we want to so let's go ahead and start with the layout of a website so first you've got this blue box up here as you can see it highlights all the way around this giant section that takes up the entire screen so this is called a section so the section is the background then you've got columns within a section and it's these gray dotted boxes right here so you've got columns inside of a section and then inside of those columns you've got widgets so like this right here is a header widget so if i hover over this guy it'll say edit the header widget right there edit the heading so you've got widgets inside of columns inside of the section up here now over here on the left hand side these are the widgets so you've got the basic ones right here and then the pro version which i'm actually just going to close up this tab because this is the elementor pro version is where you get these widgets here so you have to pay to get these the free version of elementor though does come with a lot more under the general tab and then also remember how i told you we're going to download the essential add-ons plugin right here well that is all of these plugins so it gives you 40 additional that you can use so that is a lot of capability not to mention i mean the basics of the website you're just going to be mostly using headings text images videos and buttons so these right here are pretty much the main ones you're using i mean if we're looking at this header right here we've got a heading text we've got another heading right here a text editor this is just an icon but it could easily be a button and you say you know click to contact me just like that button that we had up here in the corner for our header menu right and that's not visible because we're within elementor so it's not showing you that header menu right now but again i mean most of these are just headers so if i click on this it's going to be or hover over it it's going to say edit heading because it's just a place to insert text body text more heading text so most of the website is going to be the basics here but you can always use some of these special ones like the icon box right here you can answer in some google maps which we might do in the contact section so scroll back up so this is the widgets panel and so anytime you want to get to the widgets panel you'll just click on this little rubik's cube icon up here in the corner so if i were to click on something else and so now i go into the settings for this heading text right here i can always click on these squares right here the rubik's cube icon and it'll take me back to the widgets and again elementor is a drag and drop so all we got to do is come over here to let's say the heading text click and drag it and we can put it right underneath this heading text and now we're ready to start typing right here and as you can see i can type directly on the page or i can over here this is the heading text you always have three tabs so you've got the content tab and that's where you actually decide what's going to be displayed like you enter text or you choose an icon or whatever it is then you've got the style tab which is where you decide how it's going to be displayed what color is it how big is it is there going to be a text shadow do you want it to be 3d all of those things and then you've got the advanced tab which isn't that advanced you're just going to be playing with margins and padding and then also you've got some motion effects as well and then sometimes border color and stuff like that and uh we won't really be touching on most of these down here but we will touch on motion effects and also the margins and padding because this is very important one thing that i want to show you guys while i'm in the advanced tab i'm going to go ahead and edit the section back here which is basically the background if you click on those six dots right here that's how you edit the section and see i'm now editing a section up here or you can right click and edit the section and so i'm here under the advanced tab the css id is what i was talking to you guys about how we can set up the header menu buttons you know the home button the about button and all those to go to specific places so for instance if i go down to the about section and i click on the edit section button right here so now i'm editing the section and it's the about me section i can go ahead and go to the style or the advanced tab and you'll see right here is the hashtag aboutme but you don't put the hashtag in the css id and so the hashtag is basically calling on this so anytime you hit the about button that's why it takes you right here so we'll be doing that for the rest of the sections as well so that being said that's kind of a basic overview of elementor you just drag and drop things and then anytime you want to make something more spacious you play with the margins and padding and we're going to be dealing a lot with these later on in the video in the mobile responsiveness part so don't worry we'll get to it but essentially margins are just the space outside of the box so as you can see when i hover over this widget the blue line goes right here right so this is the square so i can add more space on the inside and so they have on the top and on the bottom an extra padding so that's why there's space on top and space on the bottom and then the margin is going to be the outside of the box so padding is on the inside of the box all right guys so now that we've kind of gone over like the basics of elementor i'm going to be showing you guys how to use it real time so we're actually going to be going over editing the entire website so let's get started with this top section i'm going to call it the hero or header section so in the hero section we've got a background image the way that you change the background image is easy we're just going to edit the section again or you can go up here to the six dots but i just right click and click edit section go to the style tab and you can see that the image background is this uh this forest with a hill in it so first we're gonna go ahead and change that by going to our upload files select files and i'm gonna go ahead and upload my own image right here perfect and click on insert media and just like that now you can see that the background image has changed and so you're probably wondering whoa that's really cool how did he get this picture of him to be overlaid over the image well if we go ahead and click on this it's actually its own giant image and you can see the widget color right here and so this is a special case this is actually an image that's position has been set to absolute let me go and explain that to you real quick most of the time so for instance if i come down here see how there's a column and then there's widgets inside of the column most of the time if i were to add an image in here so i'll take the image icon and just place it in here it goes inside of the actual column so you see this this is a sub column within this column so this is a giant column sub column inside of here right so there's uh looks like four of them so here's this image what i can do is i can actually change this by going to the advanced tab and i can go over to positioning and then i can change the position to be fixed or absolute so let's change it to absolute and now it basically treats this image like something that i can just drag anywhere on my home page just like that and then now as i scroll through it's stuck there its position is absolute it's not stuck inside of an actual column or a widget or something like that now it's very rare that i actually do this because i usually like it to be inside of whatever it needs to be but i just wanted to show you guys that you can do that if you want to so i'm going to delete that so that's how we did this right here if i click and drag i can move it wherever i want but it's just a png now a png as you can see when i clicked on it i can now edit the image a png is just something that you can usually do in photoshop but it's basically a blank background with an image right there and so you retain this background this transparent background and so that's why you can overlay it like this and so he put on a cool scroll effect let me show you guys how we did that too if you go to the edit section and when i say he it's just whoever created this template that we're using so i'm going to go ahead and right click and say edit the section and so when i put my image in i can change the position attachment and size so for the position if i wanted to instead of saying cover which basically stretches the image to be the entire width of the screen i could do something like auto or default and see how it zooms in a little bit or default and something like that and then what i can do is say instead of focusing on the center of the image i can say let's try top right and so now it's going to focus on the top right of the image so in case you've got an image that you specifically want a specific part to be shown you can do that but i'm going to say center center so it focuses on the center and then cover as the size because that makes it stretch to the full width of the screen the last thing you can do is the attachment which right now it's fixed so as i scroll right here you'll see that the image stays in the background it looks like my text flies over it which is kind of cool well you can change that to actually scroll with it by just changing the attachment back to default or scroll and so now that it's scroll as i scroll see how my text and the mountain don't move well they don't move with respect to each other but i can change it back to fixed and now the image is stuck in the background and the text floats over it just like this so that's a cool effect and then they did the same thing with this image so that it floats over it which gives it this cool 3d effect like the text and everything is far away from the mountain kind of thing so that's kind of cool well let's go ahead and insert our own image in here so i've actually got my own png that i found online and so i'm just going to go ahead and throw that one in there you don't have to use a png but i thought it was really cool having that 3d effect so i wanted to keep it just so you guys can see how to do it so now i've got this image of a guy standing on a mountain cliff right here and i in photoshop just kind of cut him out of the image and placed him onto a transparent background and so now just like that he's kind of just floating there and so see how there's kind of like this edge over here well i'm just going to drag him over so now it looks like he's part of the background image but now as i scroll he moves with my text and the mountain stays still so that's kind of cool and then as you can see there's one more image over here but i'm going to right click it and just delete it and it's this like after shadow picture and see how i clicked on it and it's right here so this one is kind of overlaid interestingly so i'm just going to remove that guy and so just like that i have my section right here with the cool little transparent guy as i scroll now i'm going to move all of these widgets over to this side because i want everything on the same side so the first thing i'm going to do is i actually have to move this image out of the way because it's on top of my my text so i can edit these but if i try to click on jacob smith i can't edit it i'm editing the picture so i'm just going to move him out of the way for now so you see my image box right here i'm just going to move him out of the way and i'll come back to him in a little bit so for jacob smith i'm gonna go ahead and change this to my name but of course you would change this to your name so levi hagan i'm gonna delete this little play video button so it's gone and then i'm gonna move these guys over here so all you gotta do is drag and drop so i'm going to drag him right underneath this heading and so now i've got my little divider line i'm going to drag this guy and drag this one in as well and then i want my divider to be on top just like that so now let's go ahead and edit the divider first actually i want to remove this space on the bottom of my title so i'm going to go ahead and click on my title to edit it and so now i'm editing the heading right i can change it the alignment if i want to to be centered or something like that but i actually like the left alignment so i'm going to go over to the style tab and i can change the text color if i want to and so this is actually something important before i even change the text color i want to show you guys how to set default colors just like we did using our color palette right here so that i don't have to keep coloring or copying the hex code because right now what i would have to do is hit controller command c right here and then i actually have to go in here and paste it ctrl v or command v and then every time i do that it would take forever trying to you know copy paste that same color throughout the website so i want to make it easy on myself so first let's update to save our work this little green button in the bottom left corner and then what i'm going to do is i'm going to go over to this hamburger icon in the top left corner and these are kind of the elementor settings locally and then i'm going to go to my site settings and so what i'm going to do is go to global colors right here and i can actually put in all of these colors right here now don't pay attention to these titles because you can click on it and literally type whatever you want so i'm going to go ahead and click right here and i'm going to copy and paste all of the colors that i have on my color palette into here and so i'll copy paste them one by one right in here and you'll notice that on my color palette i've got five colors one two three four five and on here i've only got four so you just click add color and so now i've got a fifth one and i can change the title to whatever i want so i'm going to do that right now so i'm going to go ahead and skip this part just to save you guys time of me copy pasting a whole bunch of hex codes so i'll see you guys in just a second all right guys welcome back so i went ahead and just typed out what the color actually was and then i went ahead and just pasted in all of the hex codes so now you can see that all these colors are right here perfect so i'm going to go ahead and click on update to save that setting and then click on this x button right here in the corner all right so let's go back to that heading text right here and you'll see that the text color right i had to actually select it by pasting my copy code in there right so now i can just click on this little globe icon and i can choose from the color palette that i inserted so i can go ahead and select my green color right there i think it looks awesome now typography is something you're going to be using all the time you can go ahead and set up default typographies which i just sometimes don't do and i'm not going to do for this tutorial but again you can set those up but i'm going to go ahead and click on the pencil icon right here in the family and you can just pick a different font if you want you've got times new roman and a whole bunch of other ones as you can see so that's kind of cool i'm going to leave it the way it is i think it looks fine i think it's roboto right now which is the default setting and so then i can change the size just by dragging this or i can actually type it in right here which i'm going to make it something like that and then one thing you can do to preview how big it is because obviously as you can see my screen is cut off by this dashboard as you can hit this arrow right here and see how it's going to look full screen i want to see if i can get my letters to be in line and so i'm going to go ahead and make that a little bit smaller try that put my arrow back yes it doesn't move so i think that looks great i'm going to leave it there and then i can also change different things like the weight so i can make it a lot thinner if i want to but i'm going to leave it at like 800 which is what it was oh a little bit too much so maybe 600 yes so like 600 i can transform it to uh uppercase or capitalize if i want to so now it's all uppercase but i'm going to leave it as default i can change the style to italic or anything like that and then decoration like underlines and stuff i can change the line height and then also the letter spacing maybe increase the spacing actually i'm not going to because then it makes it two lines and i want it to be one line all right so now that we've finished that let's go to the last tab which is the advanced tab and i'm going to go ahead and just remove that bottom padding just like that all right and then after zeroing out let's go ahead and edit the divider next i want to just double check that this one doesn't have any padding it doesn't so we're good i'm gonna go to my divider and so this is very easy to edit so the content i can change the width of my divider so how long it is as you can see it now it's way out there i actually like it kind of short and then you can change it to be dashed curly wavy whatever if you want it centered or to the right as you can see i'm going to go to the style tab and i can change the weight up to like three and as you can see it made it thicker so i'm going to go even thicker maybe like four perfect and then i can choose the gap which is how much spacing it has so i think that looks pretty good all right and i actually just realized that there's some padding underneath here and so i can go to the advanced tab yep there it is i'm going to zero it out and go back to my style tab and so now the gap is centered as you can see so i'm going to make it kind of spaced out just a little bit like that all right and then i can change this professional video blogger and i can go to the content tab and i can change this to a professional model because i'm going to make myself look like i'm a professional model in this video that's what i decided to do lastly i'm going to go ahead and edit the section again so right click and go edit section go to the advanced tab and it looks like i've got padding on my section here so i'm going to go ahead and just remove the padding then i'm going to go over to the layout tab i'm going to change the minimum height to be fit to screen and so now that makes the entire header hero section fit to my screen you can also change it to minimum height and then you can drag and make it bigger or smaller if you want to but i'm just going to say fit to screen because then it'll automatically always fit the screen no matter how big the monitor screen size is okay so now i'm going to go ahead and click on update to save my work okay and so now i realize that the image that's absolute is still pertaining to this section and so it's automatically going to go and cut to the bottom of this section which looks like it's an intersection rather than to the bottom of my screen here so no matter how hard i try to put him down here it's going to automatically cut it to this line so let's see what we can do about making this line touch the very bottom of the screen as well so again i'm going to move the image out of the way and now i'm going to go over to this section underneath and click edit section right here got it all right and then after i'm in the intersection which an intersection is just a section within a section you can do that it's a widget so i'll show you right here it's an intersection and so it places it inside and so we're going to edit the intersection and i'm going to remove its padding on the bottom that's why it's so spacious down here as well just like that so now it's a little bit less confusing i've got my intersection right here two widgets my columns and everything so finally what i'm going to do is edit the section up here so this is the main section and then i can go over to my column position which is set to middle and i can change it to bottom and so now my column is way here at the bottom right so from here what i can do is add some padding to the bottom of this guy so i'm going to go back to the inner section go to the advanced tab and add some padding to the bottom so i'm going to unlink the values together and to the bottom let's add like 100 i think 250 looks pretty good so i'm going to leave it with 250 go ahead and click on update and so now that this section is technically touching the bottom i shouldn't have a problem with my image so if i drag it back in it's going to auto correct to the bottom so that looks good all right maybe drag him over just a little bit more something like that click update to save my work all right so now that my hero section is finished let's go ahead and preview what it looks like so i'm going to go over to the bottom left corner next to my update button and click on the preview changes button all right so this is what our website looks like so far well the hero section at least and so as you can see we have a lot to go here now one thing i notice is it's still not touching the very edge so i want to make sure that it's completely towards the side so i'm going to close the website and just drag my image over even more so something like this click on update to save my work and you can also move this arrow over just to get a sneak peek and it looks like it's going to be good as you can see over here so one last double check by previewing the changes in the bottom left corner perfect that looks fantastic and then as i scroll everything stays in front of the mountains that looks so cool i love that now again everything that i just did with this little png image you don't have to do if you wanted to just delete it just remove it and just have something that looks like this and then preview those changes you could just have something that looks like this which i think looks pretty cool you've got an image in the background your name and what you do and then you keep scrolling down and then you have the rest of your website but because the template had it i thought i would include it just in case anybody else wanted to do the same thing so we'll put the image back just make sure that it doesn't come off looks like it's good update to save a work perfect now there's one last thing that i want to do on the hero section and that's motion effects and every section i do i want to go ahead and apply the motion effects so that i don't forget to later on in the website so what motion effects do is as you scroll through the website you can have it look more interactable so that as they scroll certain motions affect the website so for instance let me go and just show you what i mean so while we're editing this image what i want this to do is when the page loads i want this picture to come in from the left and this title area section to come in from the excuse me i said that backwards i want this image to come in from the right and i want my title section to come in from the left so let's do that now go to the advanced tab and go down to motion effects right here so the image over here on the right i want to click on it and say fade in from the right and so now just like that it fades in from the right and so of course you can choose from a lot of different ones but i think some of these are weird like wobble so i stick to the basics of just fades so fade from the right all right and so now we're going to go ahead and edit this intersection right here so let's go ahead and click on the six dots right here and go to the advanced tab motion effects and we'll make this guy come in from the left so there comes my text just like that so i'm going to go ahead and click on update and i want to show you guys what that looks like boom just like that so everything comes in from different angles and then i can keep scrolling so i think that looks pretty cool all right so we've finished the hero section let's go ahead and move on to this little value proposition section now this is going to be really easy what i'm going to do is just add some basic things that i do pretending i'm a model which i'm not but we can pretend for today's tutorial so i'm going to go ahead and edit this title right here and again you can edit straight on the page or i can come over here and edit over here so where i specialize is what i'm going to put here and then i'm going to put different types of modeling here so i'll leave adventure on there but i can change wild to i can do fashion swimwear commercial and i'll show you guys how to fix that in just a second parts all right and then so forthcoming oh by the way parts uh is actually when you do like hand modeling like if you're wearing jewelry or something like that i actually had to look that up because i was curious but just different types of modeling is what i'm doing here and so i'm gonna go ahead and edit this one right here and i'm gonna go to the style tab and see if i can play around with it so that it fits without doing that weird thing it's just because it's too long so it's moving to the next row and so you can go to the typography here let's change the letter spacing to be a little bit less maybe yep that works perfect a little sneaky way of just trying to get it all in one line so i can click update to save my work there perfect i think that looks great so now the last thing i'm going to do here is i'm actually going to add some motion effects so we'll just go ahead and edit this title advanced tab motion effects and i'm going to say fade in from the right i'm going to take this entire section with these four and get them to come in from the left and then i'm going to go ahead and edit this whole section to come back in from the right update to save my work i'm going to go ahead and preview my changes so those two swoop in i scroll down and all of those come in from different sides i think that looks pretty cool so i'm gonna go ahead and close that out perfect so now we've got a value proposition here it's basically a different type of value proposition but it's you know pretty similar as i'm just saying that i'm a professional model and so they might go okay well if you're a professional model like what kind of modeling do you do and so i'm telling them right up front that i do these types so it's just kind of answering your clients questions before they have to ask you so that's kind of a little bit of web design preparation 101 okay so now we're in the about section so this is going to be kind of cool they've got this cool little image here on the side and then we've got just basic title text uh more text and then these are just counters so if i were to click on this you'll see it's just a counter and so you can type in the number you want it to go to and where you want it to start from and then just animates counting up which is kind of cool and so honestly i'm not really going to change these you can put different stats here if you want the way you would do that is you can change the number here you can change the prefix or suffix so if you want to put like a percent sign right here you could so for instance right here the 14 there's a little percent sign right there and so that's what that's for but then you can also change the title which is subscribers but basically is saying i've got 8 million subscribers which wow this guy's way more popular than i could ever be and then you've got videos and engagement rate now this is where for instance you could put like model if i was a model i could say you know 480 videos i could say 200 photo shoots and a 99 or 100 satisfaction rating or something like that so you guys can just kind of change those numbers around you could also put in logos right here from different companies that you're associated with and these are literally just little mini images as you can see and those are totally fake logos so he must have just made those probably using logo maker you never know the same website we used but anyways so for the about me page i'm going to go ahead and change this title and i wanted to show you guys something kind of cool with this one i'm going to go to the rubik's cube icon and pull up a widget and pull up dual heading tool color heading and so i'm going to drag this right underneath the about me section i'm going to make this title a little bit more interesting by changing the color of both of these texts you can't do it on a regular heading and so that's why it's really cool to use this widget which by the way comes from essential add-ons so from here i'm going to go ahead and turn off the icon by just saying show icon and turn it off and then i'm also going to go ahead and remove the tagline i'm going to go ahead and change the heading and the second one and then i'm going to go over to the style tab and then ignore the background color padding and all of that stuff but i'm going to go down to colors and typography and change the colors of these texts right here i'm going to make this one green and this one white so i've got about me right there looks cool let's go ahead and make my text look like this one so i can just replace it so i'm going to go down to my title typography increase that size to make it huge just like that one perfect and then it looks like this one is left aligned mine is centered so if you really wanted to be picky you could go back to the content tab and change the alignment right here to left and now it's right there i'm going to right click this top heading and delete it so i'm done with my title right here another thing that i wanted to show you guys you can do is to insert some actual links that you can use for your social media so in the about me page you know if if this is your business page and you want to have links to your social media so they can go check out your work you can go ahead and go to the rubik's cube icon type in social and you'll have these social icons right here so i'm just going to drag them in as a widget boom and i get these automatic widgets generated so let's go ahead and customize them real quick so editing these widgets i can say facebook twitter youtube if you want more you can click on add item and so right now it's wordpress with a logo right here but i can change this to google oh you got to go to all icons not recommended and so i'm going to choose google plus and then i could also go down and add another item and choose like instagram for example perfect and so now i've got you know google plus instagram youtube twitter facebook and again if you ever want to replace the order i could take twitter and move it to the front just like that and so now it's in front and then i'm going to change the shape from rounded to circle and so now it's got these cool circles like this and then what i'm going to do is you can change columns if you want to like how many columns you want so 1 2 3 right now it's auto to three but you can change it to one if you want now they're gonna be in a giant line for instance but i'm gonna leave it on auto because i think it looks fine like that you can actually put your link in by clicking on like for instance twitter and then right here in the links tab you can put in your hyperlink to your twitter account and then you put in your facebook link to your facebook account and so on so i'm gonna go to the style tab i'm gonna change the color from official color to custom so i can change the color so instead of using the official colors right i'm actually gonna change them to what i want and so my primary color is going to be green and then my secondary color is going to be black so it matches my theme of my website and then what i'm going to do is i'm going to go to the icon hover so this is regular icon but when i hover over it i'm going to swap these colors so now i want this to be black and this to be green for the secondary so now when i hover see how it inverts and it looks really cool i think that's awesome so i'm going to leave that there so click on update to save my work all right so now let's go ahead and change the background here so we can go ahead and click on edit the six dots right here for edit section style tab and we can change the image so i'm gonna upload my own image and we're going to use this guy right here and click on insert and now this is something unique as you can see he's got that png image overlaying the background image again which is kind of cool but what i wanted to show you guys was i can do the same thing so the last one up here this is a separate image with an absolute position setting this one down here is something different it's a background overlay so i can go over here and do a background overlay if i didn't want to use this image which see here's the image that is him delete that i could put a background overlay color like this then i can change the opacity right and i can do like a black overlay something like that so it looks kind of cool but what i'm going to do is i'm actually going to use my own png so i'm going to reset this guy take the color off and again i have my own png that i saved because i thought it would look cool and then click on insert media and so now i've got this really cool overlay right here which i'm going to set to 100 opacity and there i am that's my about me right there so let's go ahead and change this text color to be all white so i'm going to click on this one first style tab change the color to white and then i'm going to do the same thing for this one and the same thing for these go to the text tab right here because this is an icon list for some reason and go to text color and change it to white go to this title change it to white and then down here i can change these counters to be white so what i'm going to do is change one of them so go to the style tab text color to white go to the title text color white so now you can see it and then what i'm going to do is i'm going to take this right click and say copy right click on this one and paste the style and so it's going to change the color of it same with this one perfect and then i can also edit the section right here and then i can go over to the style tab and i can change the border from gray to white because it's got these two lines up here and on the bottom because he set the border top and bottom right there and so change those to white i can change this guy to white and then also for these logos back here what i'm going to do is go to the edit section which again this is an intersection so he could put four into the same column and so then i'm going to go over to the style tab i'm going to choose a background color of like a light gray like that actually i have a light gray so i'll just use it so my light gray setting right there and then i'm going to change the opacity of it so i'm going to go into the color and right here make it a little bit more transparent something like this and then i can go as well to the border and i can round it a little bit by clicking on the border radius and increasing and so now i don't know if you can see it very well but there's like that curve right here so let me go and show you what it looks like i'm going to click update to save my work preview all right and then we scroll on down to the about me section and i think it looks pretty cool i like that a lot alright so that's my about section now i also am going to fix one last thing by clicking edit section so i'll right click and click edit section like this and then i'm going to go back to my background overlay which it looks like it's already open because that's the last thing we did in there and so from here what i'm going to do is i'm going to go over to the color and i can as well as having an image overlay i can also do a color so i'm also going to put a black overlay here and then if i were to change this opacity it would also make me pretty clear so i'm going to excuse me transparent not clear and so what i'm going to do is change the transparency of the black here right so right now it's too bright so i want to darken the background up so that it's easier to see my text so something like that and actually maybe not black maybe more of like a light gray yeah something like that that looks so much better like that perfect so i think that looks awesome and then the last thing very last thing for the about page or about section is motion effects so i'm going to click on this title up here first go to the advanced tab motion effects and have this one come in from the top so fade down just like that i'm going to have all of these so i'm just going to take this entire column which has two widgets advanced tab motion effects and i want to come in from the left all of these i want to come in from the right so take the entire column advanced motion effects fade in from the right and then these three i want to fade in from the bottom so this one advanced motion effects and i want it to fade up like this and then i'm going to increase the delay to 200 milliseconds and so now it's going to wait 200 milliseconds it's a delay and then it will fade up so i'm going to do the same thing for so this is 200 i'm going to do the same thing for this one so copy paste the style go to the advanced tab motion effects oh it didn't change it okay so then we'll have to change the style to fade up and this time it'll be 400 and then this one will go to the advanced tab motion effects fade up and i'm going to change it to 600 and you can also change the animation duration so you can make it a super slow fade like that and you can see it slowly go up or you can make it fast and it goes really fast i usually just leave it on normal but i mean you can do what you want and then click on update to save my work now i want to show you guys what that looks like we'll scroll on down to the about me section and look at all those things just kind of flow all over the place it just makes the website look a lot more responsive so i like adding motion effects so if i were to refresh the page right now you'll see what everything does right here in the about section where everything just fades in like this and see how that goes one two three it kind of goes like up up up that's where that delay comes into effect so that's pretty fancy and then they can of course click on whatever social icons they want right here you're giving them multiple places for them to contact you so you've got social media right here at the very bottom of the website you've also got your social media we're gonna have a contact form right here the goal is to make it as easy as possible to talk to you okay perfect so now that we're done with the about section let's go ahead and move on to the featured vlog section which i'm going to change to a video section so what we're going to do is first change this title text so i'm going to change this to featured videos okay so it looks like the text is going to be like that so i'm going to shrink it a little bit so let's go to the style tab typography and i can change the size to be something like this because i like how it overlays over the image of the video so there's two ways that you can do a video on your website well there's there's a few ways but one way is you go to the rubik's cube icon and you can insert an actual video and it's literally going to insert a video into your website where they can click on the play button and the video plays now as you can see this is a youtube video it's just a placeholder but it's a video so if i delete this one another way you can do it is you can insert an image so as you can see if i edit the intersection and go to the style tab the background image is taking up the entire intersection right here so they wanted a giant image and then what they do is they have a little icon right here and so if i edit the icon you can take a link and put the youtube you know youtube.com blah blah blah and you can place that right there and so what that does is anytime they click on this button it'll take them to the youtube video so there's two different ways you can do that if you want i'm just going to leave this the way it is though just you know for the sake of time but of course if you want to you can always right click and delete this part and then just enter in a video instead so what i'm going to do is just actually change the background image here and then click on insert media and so i've got my image in the background here and let's go ahead and change this button up so i'm going to click on it to edit it the icon i think is fine but instead of this view i'm going to change it to i can change it from stacked and so it does like this cool more like filled out overlay or default which is literally just the icon kind of boring so i'm going to do stacked because i like it a little bit better style tab and i can change the normal color so the primary color is white secondary color is like this this gray part right here in the center so i'm going to change that to red so i'm going to change the opacity all the way up and make it red just like that so now it looks like an actual play button and then i'm going to go to the hover tab and change the hover animation so i'm going to change the primary color keep it white and i'll make this my green so when they hover turns green awesome all right and then you can always edit the text there i'm just going to leave the dummy text so let me go ahead and change these three so edit the column style change the background image go to select files and i'll choose this one and while i'm at it i'm just going to upload the other two so select files okay and so i'm still going to select the same image you can upload multiple at a time and then just pick from your media gallery so insert media i can go to this column next which this background image is back there style tab and i'll change it to in my media library just to this one and then i can change this column style tab edit the image and change it to this guy cool so now i've got these videos right here that people can go ahead and click on if they want to we've got a cool little animated button that takes them to a different youtube video if they want and i think that looks good lastly i'm going to edit this button right here so if you go ahead and hover over it and click on edit the button so this is the button right here okay and so what i'm actually going to do is duplicate this and change it to be an icon instead of a box or excuse me a button because you can't change the color of the icon and i want the youtube icon to be red so i'm going to go over here to the rubik's cube and i'm just going to take or type in icon and i'm going to take an icon box which is basically the same thing as an icon but it's got text underneath place it there so first change the icon i'm going to go ahead and just click on the icon and i'm going to search youtube and then i'm going to delete all of this text and then just use the header and say visit my channel perfect and then this is where you would actually put in the youtube channel link so that's important and then we'll go to the style tab by the way you can also change the icon position to be on the right hand side so now it's on the side or the left but it moves the entire text as well so i just leave it on top style tab we can change the icon color from red or to red so now it's a red youtube logo and then when you hover on it i could change it to green so now it'll change to green and so visit my channel is the content not the icon because see how there's content and icon so the content we'll go to the title and we'll change the text color to white so visit my channel and they can click on the icon right here and i'll take them to your youtube channel so let's go ahead and delete this button perfect now that is one themed out featured video section so lastly let's put some motion effects on here we can go ahead and first put it on the title advanced tab motion effects and let's go ahead and do a fade then for this first section right here edit the intersection you guys know how to do the motion effects by now because you've seen me do it so much so i'm going to move a little bit faster all right so this next section i'm actually just going to delete the entire thing so i'm going to go ahead and just click on the x button right there and it deletes the entire thing by the way if you want those drones out of the way it looks like it's just an image in the background right here so i'm going to go ahead and again you can tell that it's set to the absolute position because i can drag it wherever i want i'm just going to delete it image is gone so now i want to add two more sections in between the video and the contact section so in order to do that all you got to do is come up to the section that is below and click on the plus button right there right here and from here click on the plus and just choose a single one you can choose how many columns you want as you can see and if you want one bigger one smaller kind of thing so i'm going to say one column like this go over to the rubik's cube icon and search a gallery actually search filter because i want a filterable gallery insert that bad boy in there this is really cool because i can filter the gallery based on different criteria and then i can hover over it and have a gallery name with this cool overlay a link so it'll take them to actually a web page if you want and then also they click on this button and it'll zoom in on the image and then they can scroll through the different images as well and exit so let's go ahead and fill this gallery right now so i'm going to go ahead and edit the gallery by clicking on it close the settings tab for now and we'll go down to gallery items actually before we do gallery items you have to do the filter controls first so i'm gonna take this gallery item and change it to shoot one and then add item and say shoot two and so this is just like the first photo shoot and the second photo shoot and so you can choose different photo shoots and that looks good so basically we're saying that if i click if i label anything with shoot one it'll show up when i click on shoot one and then shoot two see how it already changed and then i go to all and it shows all of them so we're about to program that very easy by the way so now we'll close that go to gallery items and you'll see all of the items and it's gallery item name so let's edit the first one the control name needs to be shoot one because that's how you link that together perfect i'm going to control c or command c to copy that because we're going to paste that over the next few and then for this one i'm just going to call it photo one scroll down and then to my image right here upload files select files and then i've actually got in my portfolio thing i've got a gallery section with all of my gallery images so i'm just going to take all of them minus these two because i already have them uploaded okay perfect so i've got my images here so i'll go ahead and click on insert first one and then you can also edit the text right here which is what shows up right here as a short description and then you can also enter in the link at the very bottom right here and so that's where the hyperlink would go when they click on this guy right here so i'll let you guys put in your own links i just wanted to show you guys how to use this so let's go ahead and do the rest of them just like this i'm going to go ahead and enter in a few more images and then also just label them under sheet 1 or shoot 2. so i'll see you guys in just a second all right guys welcome back so i went ahead and entered in all of the images the last thing that i want to show you guys was the second shoot and so uh obviously first shoot and then second shoot right here so i can choose from shoot one so it just shows these and then i can show shoot two and it'll show those and then i can go back to all and it shows everything so that's kind of cool if you've got multiple jobs that you want to display or something like that you can say like the round rock job the you know like something like that so really cool filterable gallery that i like and then of course as well if they press the plus button they can look at each image individually so that's pretty fancy last thing i'm going to do is motion effect so i'm just going to go to the section right up here advanced tab first thing i want to do is add some padding on the top and bottom just a hundred just to add a little bit of breathing room on the top and bottom and then go motion effects and fade up perfect and then click on update all right so i already previewed this one for you guys so let's go ahead and move on to the next one which is going to be an instagram section so i'm going to go ahead and click the plus button right here add and then i'm going to choose the single column again now this one's pretty easy i'm just going to click on the plus button right here to pull up my widgets panel or i could go to the rubik's cube and i'm going to go ahead and search something called shortcode perfect take my shortcode and enter it in here so this was just really interesting what i can do is i can actually if you know html or any kind of coding you can type it in here and have something custom display if you know how to do the coding of course i'm not teaching you guys how to do coding and i don't expect you to know how to do the coding i'm going to show you guys a very cool plugin that tells you how to do it and how to display your instagram feed it's very easy so trust me i'm gonna go ahead and click update to save all right and so we're gonna go back to the dashboard and go down to instagram feed which is the smash balloon plugin that we downloaded earlier and so now we're just gonna go ahead and click on it on a new tab all right and so this is the part where you actually have to connect it so we'll just click on the connect your instagram account it's a personal account for me and then you just log into your instagram which by the way if you guys want to follow me feel free of course you don't have to follow me if you don't really like me that's cool too i'm just going to say not now and then it's going to ask do you want to allow smash balloon social to use it and i'm going to say yes perfect it's going to ask do you want to connect this account i say yes all right and so now i've got fly tricks which is a personal private account and it's set up and good to go and so it expires in 59 days and i can refresh now but you know that's fine we'll go ahead and scroll on down you can also check so check for new posts so for instance what if someone's on your website right as you post a picture do you want it to check for a new post every hour or in the background like over and over or you can change it to every two hours or days minutes however you want to do it this is basically just the refresh rate so i'll let you guys play around with that guy now this is really important right here this is how you display your feed and all you have to do is take this bit of short code right here copy it so command c or ctrl c go into elementor and paste it we'll click on update to save our work and as you can see fly tricks has been pasted into my website now before i do anything else here i'm going to go back to the settings because it's on this tab over here okay and so to change the way that your feed is displayed you actually don't go to display your feed you go to customize so i'm going to go to customize and then in here we can change the width of the feed which i'm not going to touch you can change layouts if you go for the pro version of this plugin so you can do different like i can do a highlight grid and then all these different big size little size pictures and stuff i'm just going to stick to the basic grid because it's free and then you can change the number of photos which i just want to show eight and then i can also choose the number of columns so right now just for example this picture has three columns one two three i'm going to stick to four but you can choose however many you want and then padding around the images is 5 which is basically the spacing in between the images and so i'm just going to leave it because it's default and then you can change it from newest to oldest or oldest newest i don't really care to so i'm just going to click on save my changes okay so i'm going to close that tab refresh the elementor tab so that it pulls all of that new information that i just saved go ahead and scroll on down to my instagram section so here it is right here one more thing i'm gonna do is also add a background so i'm gonna go ahead and go up to my six dots here and just add a background image so style tab click on the classic one and it opens up the image option and then i'll just upload my own image all right and then insert media and so now i've got my background image i'm going to change the position to center center and you can see that it focused on the center and then the size is cover it'll zoom out just a little bit and i'm also going to change the attachment to fixed so now as i scroll through it shows different parts of the image which looks cool and then the last thing is advanced tab i'm going to add some padding on top and bottom of 150 unlink the values together that would be helpful so i'm going to take it off of the left and right just like that so now it's just top and bottom of 150. look at that cool picture i love that i took that picture of myself all right now let's click update to save our work and there was one more thing i totally forgot the motion effects and we'll just have the entire section fade actually not the section let's edit the columns so i'm going to go to column advanced motion effects and make it fade up like that click update and now we're going to preview boom cool hero section boom value proposition the about me page looks cool too featured video scrolls in nicely we've got our photo gallery and then as i scroll through i've also got my instagram feed right here i think that looks really really cool then i can scroll down a little bit more and i've got the contact section so let's get into that and i also just realized one last thing for this section here i wanted to do a little bit of a background overlay because it's a little bit too bright so go to the style tab after of course editing the section by right clicking go to background overlay and i can choose just a basic color so i'll use my black and it's not black enough let's do that a little bit more sharp and of course i can make it super dark or super light i'm going to leave it at like 0.43 kind of looks nice and update and then i also realized that when i previewed it it looked like there was too much padding because the instagram feed itself expands because it's going to show the images when you're not in the back end so i'm actually going to change this just back down to 50. that's also something that's really important to do is constantly check your work by previewing the changes and seeing how you like it and then after previewing those changes you can always go back and make those little small changes uh just to make sure that it's absolutely perfect and so that is my instagram section right there and so i've got my instagram images and then they can load more and then they can follow me on instagram one last thing that if you guys are curious on how to edit these two buttons you actually have to go back to your smash feed so settings open it up on a new tab on the customize tab you can scroll down here and you can actually change the color of the load more button and then also the follow button right here and so you can change these colors here i'm not going to because i'm just a little too lazy but i just wanted to show you guys where you could do it just in case you were curious and then that would change the load more and the follow button right there so i'm going to go ahead and close my preview out and finally we are on the contact section now i'm not going to do much to change the contact section because i think it's already pretty professional on its own what we are going to do is insert our own contact form right here and so this is where we're going to use that last plugin that we downloaded called wpforms very easy to use first of all the template comes with a wp forms right here widget but let me show you there's actually two so we're going to delete this one go up to the search bar and search wp and so now you've got two wp forms right here actually you've got three wow so wp forms wp forms and wp forms i'm going to use the one that's from essential add-ons because it's the most customizable so click and drag this one in there and so now i've got my form right here let's go ahead and update and then i'm going to show you guys how to put in your form all right guys so now in order to go create a form we go back to the dashboard and again this is why i like having another tab open for the dashboard i always leave it there so that i can always quickly go back rather than having to exit out of elementor and take too long so now once we're on the dashboard we'll go down to wp forms right here and we'll go over to add new and open it on a new tab okay so now you've got some different options you can select from a template or use a blank form so here's a blank form simple contact a newsletter suggestion form whatever you want to use i would suggest using a template uh why waste the time of doing a blank form and dragging everything out when i could just click right here actually first title a name so my title's right there and then i can just choose the simple contact form and change it up so as you can see it automatically takes the name that i typed in right there and if you didn't like that name you can click on it and it'll automatically take you to the settings tab under general and you can change the contact name but i'm going to go back to the fields and so this is pretty easy to use it's similar to elementor where it's drag and drop so if i want the name to be under the email i just drag it underneath but i like the name on top got name email comment or message and so what i can do is i can go ahead and enter in like numbers and put that right there and then for numbers i could click on the field and then change it from numbers take off the s and make it phone number and so that's where they would put in a phone number right there you can make it a required field or not a required field so that puts the little asterisk right there and then you can also click on any field you want go to the advanced options and you can enter in the placeholder text so now you've got first and last just like that and then you can change the submit button as well so you click on the submit button it takes you straight to the settings for it and i can change the text from submit to send or let's talk or something like that but i think it looks fine just the way it is and then you can go ahead and click on save now i wanted to show you guys how to do this so that you can create a form if you want to and make it different but i'm going to go ahead and close out of this save and exit and so i've got my primary contact form in simple contact form i'm going to delete my primary contact form and i'm just going to use the simple contact form that came with the template that we downloaded so the website template that we had the starter template it came with a contact form i just wanted to show you guys how to you know make some changes if you wanted to so let's go ahead and close out of this tab and now back on elementor we can go ahead and click on the widget and all we have to do is select a form and so if i had the primary contact form that i created still created and not deleted it would also be here because you can pick from multiple forms so we'll select the simple contact form boom throws it right in nice and professional i'm going to take the title off first so here's the title don't show and then i'm also going to make sure that the labels are taken off so now only placeholder text is there so they can put email full name subject and message now let's go ahead and change the send message button as well so i'm going to go over to the style tab close the form container you can make changes if you want to like sizing margins and stuff but i'm going to go down to the submit button scroll down a little bit and let's go ahead and change it so right now under the normal tab i'm going to change the background color to be green and then i want the text color to be black which it already is but i just want to make sure it stays that way then i'll go to the hover tab and i can change the background color to be black and the text color to be green so similar to those social icons that are up here in the about me section right here so similar to these i can go down here and do the same thing just like that i think that looks pretty good all right and so that is the contact form right there we can click update to save our work and by the way you can also change the settings for this contact form so if we go back to wp forms and we go to all forms instead of clicking on add new so you can of course always click add new right here but under the simple contact form you can go ahead and click on edit and so now we're in the simple contact form you could change the name if you want to remember you just click on it and it'll take you straight to the settings well under the settings tab we can go down to notifications and so this right here is shortcode of course so it's telling the computer to do something now remember when we were setting up our wordpress and hostgator account we were able to put in an admin email that's why i was telling you it was really important to put in like the business email that you're going to be checking specifically for this business that just make sure it's not like a personal email because then you're going to get spammed with tons and tons of requests so you want to kind of keep those separate but if you put in the admin email right there where i told you at the beginning of the course now it's automatically going to go ahead and select it right here okay and then after your admin email you can always change the email subject so instead of it saying new entry simple contact form you could say something like contact form from create a portfolio or you could say new entry from create a pro portfolio or something like that that tells you in the email subject what this is going to be and who it's from and so that's just more of a preference for you how you want those emails to come into your email but uh that way you know it's fully customizable there so then we can also change the from name so vlogger we would obviously change to create a pro portfolio just like that the from email is going to say it's coming from the same admin email so it's basically sending from me to me essentially but that's totally fine because the email is coming from your website and then let's go ahead and actually enter in a subject so something like that so let's go ahead and click on save just to save our work close out of this guy and so back on elementor let's go ahead and preview our work and i'm also going to actually send myself an email just to show you guys so preview all right and so we've got the motion effects on point looks great scroll through and then here's my contact section and so i can put in interesting so as i'm editing uh as i'm typing in my stuff for the contact form i just realized that this form is not correct so it says to enter in a subject but this field is actually an email field so let's go ahead and change that really fast we'll go back to the dashboard wp forms all forms under the simple contact form we're going to go ahead and click on edit and then for the subject form it's actually an email form so as you can see it's like an email confirmation so what i'm going to do is actually delete this one and then if you wanted to have a subject part you could so you would just put in like paragraph text or something or single line text and this would be something included in here but for now i'm just going to leave that out so then i'm going to go ahead and close the tab and refresh this page scroll all the way to the bottom and perfect so let's try this again and hello there send a message perfect and just like that it says thanks for contacting us we'll be in touch with you shortly so it automatically puts that there and now if we go up and check our email all right and then now that we're in our email usually it goes to the space yeah here it is it usually goes to the spam folder at first until you have to mark it not as spam but here we are so it comes from me right now because this is my admin email but then you'll see that it's a new entry portfolio site contact and then when you click on it you can say this is not phishing so you would want to allow it but now we've got the name is levi email was example email and there is my hello there comment or message and so this is where people would tell you like hey i want to get started working with you or something like that so that definitely works go ahead and close out of this guy as well all right so scroll up to the top and now that we're done editing the home page we can go ahead and move on to the eighth and final step which is to make sure that your website has mobile responsiveness okay so what mobile responsiveness is is if you were to pull up this website on a smaller screen like a smartphone or a tablet how is the website going to compress and shrink down to fit onto that small screen and so elementor is usually going to do a pretty good job about automatically compressing your data into that smaller screen but we always want to double check that it does look correct before we were to publish the site so the way that we do that is we just go over here to the responsive mode right next to the preview changes and we go to mobile and so as you can see it's going to compress my entire website so let's scroll to the top it looks like it compressed my name a little bit we'll just go ahead and scroll through the whole website these compressed nicely i think that looks good and then the about me section definitely needs some help the contact section or this part of the about section looks fantastic my image is just randomly over here on the street but you know what i don't mind it because it actually looks like i'm standing in that city which is kind of cool and then the awards and achievements looks fine now this intersection with all the logos we could actually just center up and so we'll do that in a second featured videos needs to be shrunk down the gallery looks good the instagram would probably look good but i'd have to hit the preview changes we'll do that in a second and then the contact section which the contact form looks great perfect so let's go ahead and make those changes now so for the levi hagen part i'm going to go ahead and click on it now most of the changes you make in the mobile version aren't going to affect the desktop version which is really cool feature about elementor 2. so when we change the size of this text it shouldn't change on the desktop version and so the way that we know that it's not going to affect the desktop version is you would see for instance this right here this little mobile symbol so if i were to change the alignment right now i know that it's only affecting the mobile version but for instance the html tag or the size or something like that if i were to change this it would change on the desktop version so it does make some things kind of easy for instance this title section i can go to the style tab and typography doesn't have the smartphone icon right here but i do know for a fact that it doesn't change the desktop version when i change the size so i'm going to do that right now and just make it like about that big back to the content tab i'm going to make it centered and that'll only affect the mobile version so if i were to go back right now to the desktop version everything's still the same it's really big and it's over here on the left but on the mobile version it's centered and small so that looks great i could also if i wanted to affect the position of this image but to be honest i don't mind the fact that it's off screen doesn't really bother me and i don't have to work with it so we can also change those if you want to i think that's fine the about me part i can go ahead and change the size as well so we'll go down to the title size change about me to be that big back to the content tab and let's change the alignment to center all right and so in order to actually fix this uh well let's first check and see if there's any yep there is padding so let's go ahead and just remove the padding and it should center it out which it didn't look like it did that's why so it actually made the box full width so now we can center the image which is good so we'll just choose the center option for each of these perfect and so that's how you fix that section scroll down and we've got the featured videos section and so all we got to do is shrink that text and center it so i'm going to center it first just while i'm here and then go to typography and shrink it so there's my featured video section and i will let it double up this time because i think it looks a little bit better and then i've got my videos here and i've got the big main button and then the rest of them are small that's fine visit my channel the gallery looks perfect and then my instagram is compressed and my contact form wow i think it looks great update and save all right everybody let's take one last preview of the website just for fun so the motion effects look great everything slides in really cool very responsive i like that scrolled a little too fast there video section photo section instagram section and contact section now i just realized there's one last thing that we forgot to do and that was to hook up these buttons and that's a really easy fix so let's go ahead and do that right now which also shows that it's really important to make sure you always review your work because you're going to forget something all right so for the about section that's already done the featured video section i'm just going to go ahead and click on the six dots right here go to the advanced tab and under css id right now it's vlog because that's what the section used to be so i'm just going to change it to videos because if you remember that's what i typed up in the button up top so now if i scroll down more this is my photo section so i'll go ahead and edit these six dots advanced and change this to photos scroll down and then for my instagram section edit the six dots cssid is instagram and then my contact section should be fine so let's click update and we're gonna preview the changes one final time and let's make sure that all the buttons work so we've got the hero section click about me takes me to the about section videos shows me the video section photos takes me to the photo section [Music] instagram goes all the way down and then if they want to go straight to contact looks fantastic what a beautiful site all right guys that was my tutorial to create a personal portfolio website i hope you are all able to follow along and build the perfect site for your business be sure to check out the rest of the channel for more tutorials and supplemental information regarding anything from securing your website to migrating hosts or to finding the perfect theme for your project our goal for each tutorial is to be your one stop shop for web design so check us out i look forward to seeing you in the next [Music] video you

Channel: Create a Pro Website

Views: 16,445

Keywords: create a personal website, how to create a personal website, create a portfolio website, personal website, portfolio website, resume website, create a resume website, make a personal website, how to make a personal website, how to make a portfolio website, how to make a resume website, personal website tutorial, resume website tutorial, portfolio website tutorial, how to make a website, make a website, wordpress tutorial, make a website with wordpress, create a pro website

Id: Pck9DqhMIjA

Length: 114min 52sec (6892 seconds)

Published: Tue May 04 2021