Learn how to make a stunning website even if you’re not tech-savvy! In this video, we’ll guide you through the process step-by-step, ensuring that anyone can follow along and create their dream website.
By the end of this tutorial, you’ll have the knowledge and skills to design any type of website you desire. Say goodbye to limitations and hello to endless possibilities!
Not only will your website look fantastic, but it will also be optimized to display flawlessly on all devices. No more worrying about responsiveness or compatibility issues. We’ll demonstrate how to achieve this using a simple point-and-click tool.
Guess what? If you can create a Word document (or even use Google Docs), then you can definitely make your own website. It’s that easy!
And here’s the best part: we’re going to accomplish all of this using incredible free tools. The only expenses involved are the domain name and hosting, which are actually more affordable than dining out at a restaurant. So you don’t have to break the bank to embark on your online journey.
Table Of Contents
00:00 – Make A Website
01:35 – Domain And Hosting https://ordernewhosting.com
06:52 – WordPress Tour
11:06 – Install WordPress Theme
15:10 – Learn Elementor
22:54 – Customize Homepage
29:20 – Sitewide Settings
30:13 – Customize Header
31:28 – Menus
35:00 – Make New Pages
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart — https://www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers — https://www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player — https://www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows — https://www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss — https://www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra — https://www.wpcrafter.com/spectra
🟡 Elementor — https://www.wpcrafter.com/elementor
🟡 Beaver Builder — https://www.wpcrafter.com/beaverbuilder
🟡 Divi — https://www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List — https://www.wpcrafter.com/hosting
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero — https://www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround — https://www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
Have you ever wanted to make a website For yourself or for a friend or for a Business or a charity but it felt kind Of like an overwhelming task well this Is the video where we show you how to Make a website but we do it a little Different around here we do it for Non-techies which means anyone can do This you're going to learn how to make This multi-page website it comes Complete with a contact form and it's Going to look great on every device Someone uses to visit this website and With the knowledge that you're going to Learn in this video you'll be able to Make any type of website such as this Website or this website or this website And everything's going to be built using This point then click drag and drop type Of tool right here where you literally Just click on something right there and Say the uh very easy right because Everything we're going to do in this Video is easy and if you want to move Something you can literally just click And move it wherever the heck you want It's all drag I can drop easy if you can Make a Word document or a Google Document you can make a website and the Best part is we're going to be using Some amazing free tools to pull this off And all you're really going to need is To register a domain name and get web Hosting don't worry we'll cover that in
A moment but that costs so little less Than it costs to go and eat out now if You thought this video was free because It's on YouTube it's not it's going to Cost you a thumbs up on this video down Below so if you could pay that Hefty Cost right now then we'll go ahead and Get started so the first thing you got To do is get set up with a domain name And your web Hosting account your domain Name is just going to be the name of Your website you use one every time you Use the Internet it's what you type in In the search bar so like Google's Domain name is google.com Facebook is Facebook.com or apples is apple.com Hosting is going to be a little bit Different your host is where you will Store all of the information that is on Your website so your text your images And all your files basically your Hosting is a computer that runs 24 7 That is there solely to hold all of the Information on your website your domain Is going to cost you about 15 a year and Your hosting can vary anywhere from Three dollars a month up to nine dollars A month but it really just depends on The plan that you choose so in total for Both you can expect to pay around forty Five dollars a year but I'll show you How you can get a huge discount to make It even cheaper in just a minute all Right so now that we know what they
Actually are let's get you set up with a Web Hosting account and a domain name And fortunately we can do both of these At the same place so all you have to do Is open up your browser and go to order New hosting.com and this will bring you To hostinger we always recommend hosting Her because in our opinion they're the Most affordable hosting and what you get For the price is really Second To None On top of that you can get a free domain Name and their customer service is top Tier as well but you don't have to take Our word for it there are a ton of Reviews of a bunch of satisfied Customers that love it for the same Reasons that we do so when you visit Their site via order newhosting.com or The link in the description an exclusive Extra discount is going to be Automatically added so you can pay the Lowest price possible that is a referral Link so you get an exclusive discount And they know you came from the channel And it helps to support the channel as Well so if we scroll down here we can See all of the different plans that they Offer I always recommend the Premium Plan because of everything that it Provides at such an affordable price you Can read through the descriptions of all Of them if you want but what I'm looking For here is the free domain and the free Email and the reason I like that is
Because these are things that other Companies would charge you extra for but They come with this plan on hostinger Now if you're looking to make more than Maybe one to three websites I would go With the business plan once you get into The five or six website range the extra Features that you get are just a little Bit more beneficial but don't worry if You aren't sure just go with the premium You can always upgrade at a later time For our purposes today we're going to be Going with the Premium plan so we're Going to click add to cart and you will Be redirected to your checkout page so The first thing we're going to do is Choose a period of time that we want to Pay for you could do one one month 12 Months 24 months or 48 months now the More you pay for in advance the more Money you're going to save I choose 12 Months because the domain registration Is 12 months and I want my domain name And my hosting to renew at the same time It just helps me keep track of it then We're going to scroll down it'll prompt You to create an account or log in if You already have one and then it'll ask You to choose a payment method so as we Can see here we could see the original Price was 143.88 the domain was 9.99 the Setup was 4.99 but today for the whole Year we are paying 32.29 with the Discount and with the coupon code
Applied now this should automatically be Active if you come from our link but if Not just make sure you enter the coupon Code wpcrafter to get the additional Discount so I'm going to fill this out You fill it out and then I will see you On the next screen so here we are this Is going to ask us a couple questions to Create a more personalized experience We're going to hit start now and then I'm actually going to skip this so we Can get straight to create a new website So we're going to hit select We're going to select WordPress so this Is where you're going to create the Actual login for your website the Account that you just made was for your Hosting and that's where you'll manage Things like your billing but this is the Account that you'll actually use to log Into your website and make any changes So we're going to select a language Which for me is English the admin email And then I will make a password This is going to ask us about if we want To install any plugins don't worry I Will explain what those are later as Well so I'm going to skip that I don't Need a template we're going to skip that We will write our own content later so Remember earlier we talked about your Domain name this is the step where we Can do that this is the address that's Going to be pointed at your website so
If you have a domain name in mind you're Going to click select and you're going To type it in here and then once you do That you're going to click search and It'll tell you if it's available or not I also want to point this out if you Click this drop down arrow you can Choose From.net.online.com but of those I Always recommend.com so I'll type in a Domain that I know is taken so you can See it'll tell you the domain is already Taken try searching for some other Domain keep in mind that there are over A billion websites so your first choice May be taken but keep trying until you Find one that you like and that is Available so then what we'll do is Click Continue and then we'll be brought to a Page where you can add all of the Registration information for the domain Name so this is where you'll attach all Your personal or business information to The domain so that way they know if There's an issue with the domain or the Account they know who the owner is and They know how to contact them then once You enter all this information you're Going to hit finish registration so then You'll be brought here this is where you Can do a quick overview of your Information you can hit finish setup so This is just getting everything set up For us and once it's all said and done
You're going to go over here and click Edit website Foreign Admin area also known as the dashboard This is where you're going to manage Everything for your website everything On the front end which is what your Users are going to see and then also Everything on the back end which is what Makes it work if you're getting this Message basically what that means is Sometimes it takes 12 to 24 hours for Your domain name to point to your Website and get active and recognized on The internet so this is hosting Your Solution just for the interim so while That's getting connected you can still Edit and look through a preview of your Website so what you can do is close out Of that and then if you hover your mouse Over the name of your website and click Visit site it'll take you to a preview Of what your site looks like right now Now this doesn't look great and honestly Some developers and agencies will charge You upwards of five hundred dollars just To get here and you've gotten here by Yourself for like forty dollars and in 10 minutes so you're already on a roll So then let's just click the back arrow To get back to where we were and we are Back back at the dashboard now depending On what company you choose for your Hosting you might get a lot of ads and
Things down here that are commanding Your attention that say you need to set Up or sign up and that happens because a Lot of Hosting companies will Pre-install a ton of plugins on your Website similar to how your phone comes With a bunch of apps pre-installed a Plug-in is just a little app or a Program that you can install on your Website for free and it'll help you do Certain things or optimize your website In some way so for example WordPress Doesn't have a contact form by default So you can download a plugin that makes It possible to add a contact form but Most if not all of the plugins that Usually come installed on a website you Don't really need so if you look over Here on the left hand side we're going To click plugins And you can see all of the plugins that Came with this website so what we're Going to do is check this box so it Selects all of them click this drop down And click deactivate and then hit apply And then we're going to do the same Thing but instead of clicking deactivate We're going to click delete you can't Delete any plugins that are currently Active so we had to make sure they were All deactivated before we could delete Them all Foreign So now let's go back to our dashboard
And if you had all of those pop-ups you Should see it looking much cleaner now So let's take a look at everything else Down the left hand side of our website Now you have your posts which make up The blog content of your website you Have your media which is where you're Going to manage all of the photos and Videos that are on your website you have Your pages which is going to be your Home page your contact page your about Page and you have your comments which is Where you can manage what visitors are Commenting on your posts and other Things on your website so let's clean This up the same way we cleaned up our Plugins so we start with a fresh slate So let's click posts on the left hand Side here this is a post that comes Standard on every WordPress website We're just going to click that and we're Going to move that to the bin and apply And then we're going to go to our Pages As well and we're going to do the same Thing move to bin and apply so now going Back to our website if we click this Hello world post we can see it is no Longer there so let's get back to our Dashboard and now we're going to Navigate on the left hand side we're Going to hover over settings and then Click General so there's a couple General settings we're going to change Before we get started editing first of
All this is your site title you can Change that it is going to say preview Domain until it is ready this is going To be your tagline which is we're going To briefly explain what your website is About what your company does what Services you offer you want to keep These two the same because if you change Them it will break your website this is Your admin email address if that is Incorrect you're going to want to change That and then you can change your date And time format so I'm going to change That to English United States and I will Change this to New York I'm going to Change my date to be month day year and I'll change my time format and then I'm Going to save my changes and then on the Left hand side again we're going to Navigate to permalinks under settings Now permalink is how your link will look In the search bar so you can choose Which one of these you want it to be I Always like to do Post name I feel like That's the most readable it's the Easiest to understand so we click post Name and we're going to scroll down and Save our changes again now we're going To go over to the left hover over Appearance and click themes so the theme Is the overall design look and like feel Of your website you can see here this is Our current theme but there are a ton of Different themes for different types of
Websites and different businesses at Least that's how it used to be but Nowadays you can download one theme and Then you can customize that to fit any Type of website you need and that's Exactly what we're gonna do so we're Gonna do is go up here to add new and Then the theme we're going to be Installing is actually right here but We're going to search for it in the Search bar up here on the top right so We're going to type in Astra a s t r a And click enter then we're going to Click this theme we can see all of the Details about it we can click around see What it looks like it has a five star Rating 5304 ratings at the time of Recording this so we're gonna do is go Up here and click install and then click Activate Anyway so I don't know why it gave me That trouble but I had to come back here And activate it from here but now we Have this theme activated so now let's Take a look at what our website looks Like now all right very very impressive Uh clearly leaves a little bit to be Desired but this is the building blocks Of what will allow us to create whatever Website we want so to get back to our Dashboard we're just going to click up Here the next thing we're going to do is Install a plug-in so we're going to head Over to plugins hover over it and then
Click add new and we're going to search For starter templates So this is the one we're looking for Again five stars over four thousand Ratings a million active installations This is what's going to save us hours of Work and take this from a blank slate to A professional looking website in Seconds it'll allow you to import and Choose from hundreds of different Templates that'll fit whatever you need Out of your website so we're going to Click install And then activate once you're here You're going to find C library under the Plugin name and click that scroll down And click build your website now in this Tutorial we'll be using Elementor so We're going to click that And now you can see all of the amazing Templates that you have access to some Of these you have to pay for those are Marked as premium but even the free ones Are absolutely stunning so if you see The one that you like let's say you want To start an online store you can click That minimize this section with this Arrow and click around the website and See if this is you know what's right for You your store your business your brand And if after a while you're like you Know what this isn't for me bring this Back out click the X and you can go Right back to finding the perfect design
For you and as you see up here at the Very top you can either search for a Template or you can find one by industry Using these drop down menus here now I Think love nature is the best starting Point so I'm going to click that and Here you can see you can upload your Logo which is going to end up right here I will show you how to do that in WordPress later so we're going to skip And continue here you can change the Site colors so if you want to try Different color schemes you could see it Changing there and it'll change Throughout the website and and same with The fonts but again I'll show you how to Change that later so we're going to Scroll down to the bottom here and click Continue submit and build my website so What this is doing right now is just Installing the template installing any Plugins and any pages that are included That you need for this website it's also Making it mobile friendly which means It's making sure it looks good on Tablets and phones and this on average Takes anywhere from 20 seconds to about A minute and also if you ever wanted to Change and try a different template You'll follow the same process we just Went through just know that if you do That it will rewrite your entire website Now that it's done it took about 20 Seconds so just as a reminder not too
Long ago this is what our website looked Like and now it looks like this fully Loaded with navigation all these Different pages every plugin you need And that's the beauty of starter Templates it gives you so much for Absolutely free it does all the heavy Lifting it's built the pages for you It's given you the design it gives you Such a strong starting point and now at This point really all we have left to do Is learn how to customize it So now realistically all we have left to Do is insert our own pictures videos and Text into the website to really make it Ours if you're viewing a page up here in The admin ribbon you can click edit with Elementor so once you're in the Elementor editor you might get a prompt That says to turn on containers this is A feature that enhances the layout Options within Elementor so you're going To find activate container you're going To click that link and you're going to Go right here where it says flexbox Container and where it says default You're going to drop down that menu Click active Scroll down and save your changes this Is going to be in your Elementor Settings under features and this is Something you're going to want to keep Your eye on these are things that often Add new features or enhancements to your
Website that can really take it to the Next level so while they may be in their Experimental phase it's still something That's worth keeping your eye on so now That we're done we're going to go back To our site and click edit with Elementor so here we are this is the Elementor editor something I want to Point out if these say section if you Click on it you will get a button right Over here that says convert and that'll Just take that section and convert it to A container but for now we're going to Close out of this Navigator so before we Start editing let's talk about Containers what is a container well Basically a container is just like a Section of your page that holds content So you can see this dotted line right Here that's a container everything in This is held in in this container that You can identify up here with these six Black dots and you can see all of these Rectangles within the container that Represent different widgets now what is A widget they can be anything from text To images or buttons or even complex Things like forms or galleries you see In Elementor on the left hand side here These are all of your widgets there are A ton of them to experiment and play Around with but these up here are Generally going to be the most important Specifically The Heading the image the
Text the button and the container up Here now the heading widget is typically Used to create titles or the headings For pages and posts so if we click this We can see that this is a heading over Here you'll see what kind of heading it Is there is H1 through H6 and those are Just organized by order of importance so Your H1 is going to be the most Important heading on the website and so On and so forth and like we mentioned Earlier there is the container widget Like I said this almost acts like the House that stores all of the other Widgets you can also customize its Layout in this menu so if I wanted Everything horizontal instead of Vertical I could do that If I went to style I could change the Background to a different image or just A solid color in here and then some more Advanced things like padding and margin If you don't know what padding and Margin are don't worry I will explain Those in just a minute then there is Also the button widget now this allows You to create interactive buttons on Your web page you can customize its text What it's linked off to and just like Everything else you can change its style In the style tab over here but these are Generally used for calls to action like Sign up learn more buy now usually Buttons are used to guide users towards
A specific action and you'll see this is Different from the H1 not just because Of its size but this is what you're Going to use to format all the other Text that's on your web page this will Be used for things like product Descriptions or about sections and just Like the heading over here you can Change what it says you could change the Style of it how you want it aligned you Can change the text color if you click This you can see all of the theme colors So that you're always choosing something That looks good on your website and you Have your advanced section again like I Said this is ideal for paragraph lists And other text content that isn't a Heading and if we scroll down here we Can see the image widget now this is What you're going to use to insert and Customize images on your web page you'll Choose your image right here by clicking Choose image and you can upload things To your media library or something cool That starter templates comes with is It's integrated with pixabay which is a Massive library of stock photos that you Can choose from to just download Directly to your website this is just Another one of those really cool ways That starter templates makes building Your website incredibly easy so if I Wanted to change that picture to this One I would click the download
And there it is I'm going to hit command Z to undo that but that's how you use The image widget same thing over here You could change the style of it you can Change the opacity which is how See-through the image is and then Advanced again you have your layout Options like your padding and your Margin and I guess now is as good a time As any to explain what padding and Margin is so exactly is padding and Margin so imagine your content is like a Picture frame padding is the matting That goes inside the frame creating Space between the picture which is your Content and the frame's edges which is Your container it adds breathing room to Make sure that the picture doesn't touch The frame directly on the other hand Margin is like the empty space on the Wall that surrounds the frame itself it Defines how much space there is between The frame or your container and other Objects nearby it helps give the design Balance and prevent it from feeling too Crowded so now that we have that Understanding if you wanted to create a New section on your website using Containers you would click this plus and Then choose whichever one of these fits Your needs so I'm going to choose this And then we're going to click this grid Up here to get back to our widget menu So let's say we wanted to put everything
In its own container in here let's do a Heading and then an image and then some Text so we can see all of this is Sitting nicely within this one container So if we wanted to make everything go Horizontal we could or vertical or Reversed but let's stick with vertical The text if I wanted to Center that I Would Center that here under alignment Let's choose the picture we recently Downloaded from pixabay and we can Center that as well and then we can make This text say whatever we want by Editing it here or over here and that's How easy it is editing with Elementor You just drag and drop whatever you need Drag it in drop it and you're good to go And like I said editing everything is Pretty much the same you have your Content your style and your advanced Settings or if you're in a container Your layout your style and your advanced Settings so we're going to delete this Because we don't need it and then always Make sure you click update to save your Chain changes now let's talk about this Menu down here so you have your Navigator this is just going to give you An overview of what your website looks Like what I like to do is bring it up Bring it over to the right and I keep it On the right hand side here so that I Always know where I am in the website And it also makes it easier to just
Navigate through so you'll see once you Drop it down you can click something It'll bring you right there so down here As well we also have history if you Click this this shows you all of your Editing history so this is going to keep Track of all of the edits that you have Made in this session so that way if you Make a bunch of edits say you're trying A bunch of different colors a bunch of Different fonts and you just need to get Back to where you were when you started You can scroll all the way down click Where you started and it'll bring you Back to where you were and undo all of The things you've changed you can also Preview your changes with this this just Shows you a live view of what it Currently looks like And then there is responsive mode so Responsive mode opens this little ribbon Up here and it'll show you what your web Page looks like across different devices So we can see all right this does not Look great on a tablet that's something We should fix or on mobile alright there Are things missing why is that grayed Out and I'll teach you how to fix this At the end once we have everything Designed but that's how you're going to Check to make sure that your design Looks great across all of the different Devices so now that we have that Understanding like I said really all we
Have left to do is insert our own Pictures videos and text and then this Website is our own so let's get into it So for this website I was thinking let's Just turn this into like a pet sitting Service so the first thing I'm going to Do is change the background by clicking These six dots and then I want to do a Slideshow so we're going to add images So we'll add this one and then in the Free images library from pixabay that I Mentioned earlier let's just search for Pets and I'm just going to grab a couple That I like and then for my gallery I'm Just going to select these three and Then down here click create new gallery Now here we can change the order that The pictures are going to show so let's Do the Corgi and then the cats and then Back to another dog insert gallery and I Want this on an infinite Loop so that Way it just plays over no matter what This is going to be the duration that Each one plays for so let's make that a Little shorter let's do three and a half Seconds I like the fade transition but There's different ones here you can play Around with We're going to go back up to fade you'll See here next to background size this Little desktop icon that means that what You're changing here is only going to Affect the desktop so if I go into Responsive mode and go to tablet or
Mobile they'll have a similar icon which Means you're only editing for that Viewpoint and then I want to turn on the Ken Burns effect now the Ken Burns is Just like a slight zoom in it just adds A little bit of movement to it I think It looks nice I'm going to go to the Background overlay and I'm just going to Make the opacity I'm just going to make it a little bit Darker so the text and the button pop Off a little more and then over here I'm Just going to change this copy now so I'm going to take this from we all love Nature and we'll just say I'll change this text let's say Um And then for all of this I want to Justify the content to the center and This is our new hero section and again All I did there was go into these six Dots into style and change this to a Slideshow I changed the copy here change The copy here and then I'm going to Change the button just to say book a Stay and then if I wanted to add a link I could add that link right here so now I'll scroll down and we'll say and I'll Change this to pet sitting setting Sitting grooming training something to Be aware of when you're editing sections Like this these images are all the same Size so just be aware of whatever images You put in here if they are different
Sizes it's going to look weird and it's Not going to look as clean as this so if You have any control over the aspect Ratio or the size of your images I would Definitely take that control to make This look as clean as possible so let's Change this image So see now again these are all the same Size images so this looks just fine and Scroll down here you'll start to notice Again it's all the same basic building Blocks this is a heading this is an H4 So it's a little smaller but it's bigger Than just a regular text this is an Image all of that is nested in a Container so if you wanted to take a Testimonial change the image you could Click it and then click choose image and You could replace it with this you could Change this testimonial so we'll just Change that to Thank you Jane I'm scrolling down this is an About Us Section so this is probably where it Would make sense to put a picture of you So you could choose your image And upload this picture of you you could Change the alignment of it if you wanted To with these buttons right over here if You go to style you can change the width Of the image which is more or less the Same as like changing the size of it you Have a find out more button which you Can link I would imagine to like again
An about or a Services page which you Could do right here you could change Your copy here and here and then this is The last container we have to edit and Then our home page is pretty much done So let's take this go to style and let's Just choose another image for the Background here let's do another type of Pet let's do a guinea pig hey look at This little guy that's a good little guy So his head's a little cut off here so What I'm going to do is change the Position to top Center and we'll see all Right now the whole pig is in frame but Now the bottom is cut off so let's try Center Center perfect now let's go back To the background overlay make that Darker so we're going to click this make It black and then change the OPAC Capacity now I want this text to be White so it pops off so we're going to Go to the text the style Tab and the Text color we're going to make white now You could do that either by using the Color Picker like I just did or you can Go to this little Globe icon which is Going to have all of the global colors Used across the website so I could Choose one of these as well I'm going to Do the same here so click go to style Click the theme colors find the white And there we go and I want to justify All the content again to the center and That is how you would edit this page to
Make it your own I mean that's really it I mean the bulk of learning how to do This is just learning the different Tools that you're going to be using in Elementors so if you were to take Everything you learned and just do those Changes across the whole website then Boom you have your own custom website Ready to go so the only things left we Really have to do now are change the Logo change the theme colors we'll go Over editing the header and the footer And then we have to make sure everything Looks good on tablet and mobile so for The next part we're actually going to be Getting out of Elementor and back into The theme customizer so we can change up The header of the footer the logo and The site icon so make sure you hit Update to save the changes to your Website and then we're going to go up to This menu and we're going to click exit So if we look at our website this is Going to be our header The very bottom is our footer This is our logo and this little icon Right here that's going to come up on Different tabs is going to be your site Icon so Elementor can edit pretty much Every part of your website except for These things so we're going to click This to get back to our dashboard we're Going to go over to the left hand side And look for appearance you're going to
Hover your mouse over it and then you're Going to click customize So this right here is where you're going To go to edit your header footer your Site logo your icon and your Global Colors as well so if we go up to Global And colors this is where we can change The color palette so see this yellow Right here and how it changes to like a Darker yellow when you hover if I click Color one And let's say I make that a nice light Blue And I click color two And I make that a slightly darker blue You'll see That it now changes and it'll be like That across the entire website so Anything that was using those colors is Now using these new colors so if I Wanted to make all the text just black I Could do that and you'll see again Everything that was that kind of Darker Green color is now black so we'll Publish that to save our work We'll go back We'll go back again and then to edit our Header we're going to click on the Header Builder now you'll see right down Here is like a drag and drop version of The menu that we have up here so this is Your primary menu this is the button and We'll see if I drag this like if I want To put that in the center it'll reflect
To change that or if I want to put it Over here next to the logo I could do That as well to change the logo we're Going to click site title and Logo so we Can remove that and then if you have one You would upload it here and you could Select it from here you can change the Logo width which is effectively kind of Just changing like the size of it and Then at the very bottom if you scroll All the way down you can see site icon You'll click that so you would then Click select site icon say you wanted to Use the same logo that you used crop it Into a square or you can skip cropping And you'll see now up here your logo or Your icon I should say sorry is set We're going to go down to the footer Builder and you'll see you can customize This the same way that you did with your Better so if I wanted to make these on Separate lines even I could But that doesn't look great so we're Going to keep them all on the same line That is how you would customize your Header and your footer so again we'll Hit publish to save our work we're going To go back and if we look all the way Down here to menus we can see main menu Which is currently set to primary menu So we'll click that and so this is where You will change The contents of the primary menus so if You wanted about and services to be
Changed around this is where you would Do that so you could drag it either Under or if you drag it over and a Little bit to the right you'll see that The indent is there leave it there and It creates a drop down menu I don't want To do that I want to keep it just the Four you can also add items so you could Add posts different pages or other Custom links you would do that all Through here and that's how you're going To edit your primary menu so we're going To go back and that is how you're going To edit your header your footer your Global colors change your site logo and Your site icon always remember to hit Publish when you're done to save your Changes and now let's talk about Responsiveness so we're going to close Out of that head over to our Pages find Our home page and click edit with Elementor And let's open up the responsive mode That I talked about earlier so right Here at the bottom click responsive mode That's going to bring this ribbon up and Like I said you click tablet or Click Mobile and it'll show you a preview of What your website's going to look like On that device so if we go to tablet and Scroll down we can see this is still Looking bad so let's make this a little Wider that looks much better everything Seems to be looking pretty good we can
See this is grayed out so let's click These six dots we'll go to style and it Looks like we still have to it looks Like we have to choose the image for This so this little icon right here that Says tablet portrait that basically is Just saying whatever you change here is Only going to be changing on tablets so We'll choose our image we'll click this Little pig again hit select And we're good if it was doing that on Tablet it's going to be doing that on Mobile as well so now looking at mobile Everything seems to be looking pretty Good everything looks good through here We can see we'll talk about this in a Second but we can see that this Background once again because it was set For desktop and tablet we have to set it For mobile as well So we're going to choose our image Choose a little pig And boom now this is grayed out because It's not going to show on mobile so if We were to open this in preview and Scale it down we will not see it all Right and so we are all done just Remember this is where you started and This is where we are now It is a completely different website and You can use the same tools and Techniques to customize every other page On your website to make it truly your Own now I do want to dive back into the
Dashboard real quick just because there Are a couple things I want to show you Before we call it a day on this tutorial So here we are back in the WordPress Dashboard if you remember earlier when We went to our settings the site title Was showing you a preview domain so now That it has propagated and it is all Good we can update this so we'll just do Perfect Pet Retreat we'll call it that And we'll notice that it changed up here And then our tagline and so that's how You would change that I just realized I Spelled Retreat wrong so if you remember Earlier like I said the first 12 to 24 Hours is going to have that preview Domain for me for whatever reason it Took like three days I think but now That it's done what it needed to do I Can go in and change the site title And The tagline we're going to just scroll Down here and hit save changes and then The only other thing I want to show you Is how to create a new page so let's Click pages and then right up at the top Here we're going to click add new we get Welcomed back to the block editor we'll Close out of that so just add a title so Let's call this services and then we're Going to publish it and we're going to Click edit with Elementor so on this Brand new page click this starter Templates logo and what you'll see here Is every template that is in starter
Templates and the really cool thing About this is that if you click like Love nature for example it has all of These Pages ready to go so if you say Really liked a page from Brand store but You wanted to use the love nature Template you could click Brand store and Choose any of these pages and you can Just import that template right to your Website and something really cool is That no matter what you pick all of the Settings from your parent theme trickle Down so colors fonts all that stuff Automatically changes to fit your Current theme or the template that You're using additionally if you click Blocks it has a ton of pre-made little Sections here so if you wanted to create A custom page say you wanted to do a Hero section so we can add that by Clicking it and then clicking import Block and then we will install Another block so then let's do Testimonials let's say you want to use This one and then import block again and Then we'll just do one more let's say a Contact form and we'll use this one so Now you have kind of like the outline of A really cool custom page and all you Had to do was click this starter Templates button and import one of these Blocks and like I said if you wanted to Just import a whole page you would just Go to Pages click whatever template you
Wanted to choose and then click what Page you want to import so I will show You how that works really quick so let's Delete these and then click starter Templates click love nature and say we Wanted to import this contact so we will Import the template and there it is and Like I said the really cool thing about That is whether you choose a page from a Different template or the same template You were using it inherits all the Styles that you're already using so if Fonts colors all of that is Automatically going to change and fit Perfectly with your website Congratulations you just made your first Website and with the knowledge that you Gained you can use it to make any type Of website that you need now that you Have your website there might be some Additional things that you might want to Do to it maybe adding e-commerce to it Or maybe SEO optimizing it there's lots Of things that you can do to your Website and we have tutorial videos on All of it so if you visit the video Description of this video we have a Selection of Next Step videos for you to Continue your learning on how to get the Most out of your brand new website and Of course subscribe to the channel we Would love to have you as a subscriber Here and when we release new videos You'll get a notification of those
Videos and you can continue learning and Growing in your web creation skills Through the videos that we have thank Thank you for watching this video I hope You got a lot out of it and I hope to See you in the next video
