How to Make a Website in 2 Hours or Less | Step-By-Step Guide 2019 | Create a Pro Website | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to Make a Website in 2 Hours or Less | Step-By-Step Guide 2019

teacher avatar Create a Pro Website

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (2h 21m)
    • 1. How to Build a Website | In 2 Hours or Less

      2:44
    • 2. Step 1: Get a Domain Name and Web Hosting

      12:07
    • 3. Step 2: Install WordPress

      6:15
    • 4. Step 3: Activate a New Theme & Install Plugins

      3:20
    • 5. Step 4: Customize Your Website | Part 1

      25:31
    • 6. Step 4: Customize Your Website | Part 2

      23:57
    • 7. Step 4: Customize Your Website | Part 3

      33:15
    • 8. Step 5: Create a Logo For Your Website

      10:48
    • 9. Step 6: Customize Your Header and Footer

      15:19
    • 10. Step 7: Edit Your Website for Mobile and Tablet

      5:45
    • 11. Step 8: Publish Your Website

      1:58
    • 12. Thank You For Watching!

      0:09
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

533

Students

--

Projects

About This Class

Welcome to Create a Pro Website! In this class, you'll learn How to Build a Beautiful and Professional Website in 2 Hours or Less! This website can be customized for business owners, freelancers, or even just for personal use. Website instructor, Courtney Devereaux, will show you:

  1. How to get a Domain Name and Web hosting
  2. How to Activate New Themes and Plugins
  3. How to Customize Your Website (Using a simple and EASY drag and drop page builder called Elementor)
  4. How to Create a FREE Custom Logo Online
  5. How to Make a Working Contact Form
  6. And MUCH more!

Website Template and Follow Along Images are in the CLASS PROJECT section under "Resources".

Meet Your Teacher

Hey! I'm Dale and I'm here to teach you how to create professional websites for your business, portfolio, blog, and more with step-by-step easy to follow tutorials!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. How to Build a Website | In 2 Hours or Less: Hey, guys, what's up? My name's Courtney. I'm with Creative Pro Website and today I'm gonna teach you step by step. How about a website in two hours or less? In this tutorial, I'll teach you everything you need to know in order to really customize and personalize your website to make it your own. So I'm gonna teach you how to get this awesome parallax effect that you see. I'll teach you guys how to change your fonts, how to change the color of your phones. I'll teach you guys how toe edit your buttons, How to change the style of them, the look of them the way they're displayed. But I also teach you guys how to connect your buttons to different pages or to connect them to different sections on this page. So when I click on your history, you'll see that it jumps down to the videos and you can see a video of our history and how the wines are made on this example website that I made. I'm gonna show you guys how to edit icons like thes how you can change the style of them changed amount to really fit your business better and I'll teach you how to edit all the font put in your own stuff to get a change. Colors of backgrounds. I'm gonna teach you how toe change all the photos that I have an insert your own. And I'm also gonna teach you guys how to make a really cool image gallery. I just love image galleries. I think they're so important for a person's business or website. If I'm checking out a new type of business a store, Ah, spot restaurant, whatever it is, I like to go in, look at the photos and kind of see, you know what I can expect. And if it's something that I really enjoy, I'm also going to show you guys how to make a full contact page, and I'll show you how toe link your phone number, your email address and your address to your contact page. Most gonna show you guys how to upload a map, and I'll teach you how you can put your address in and pinpoint it so that on your website you can show your exact location. Now, the best part of all of this is I've turned my website into a template for you guys to download and use for free. So when you're ready, you can download that template. I'm gonna teach you how to insert it into WordPress, and that's what you'll start building on. The website is awesome. I love to use it. It's one of my favorite free ones to work with. It's ah, super versatile. It's very customizable. It's just an awesome one to get start with. If you're looking for something that's easy quick and out of the box, this is definitely the theme for you. And the good thing about it is you can still make it your own and make it unique, Not to mention it is mobile friendly, So if you're looking at it on your phone or your tablet, it's always gonna look awesome. So if you guys are ready, let's get started on building this awesome website 2. Step 1: Get a Domain Name and Web Hosting: step one, get a domain name and a Web hosting plan. So for all of my domain names and hosting plans, I use host Gator there fast, the reliable, and they have great customer service. So before we get started, we're going to need a few things in order to build out our website. So the first thing we need is a domain name, and a domain name is just something that you type in at the top of your Web browser right here. That takes you to your website and an example of this would be your domain dot com. Now the next thing we need is Web hosting. So, in orderto have your own website, you have toe have Web hosting. Web hosting is just when you rent space on the Internet to store all of the information and the photos and the text that actually go into building out your online business So it takes out and it allows all of it. Teoh, go live for the entire world to see. And the final thing that will need in order to build out your website is something called WordPress. Now WordPress is 100% free and It's actually what allows you to design your site visually without having to deal with any coding whatsoever. So don't worry about you knowing how to code or anything like that in order to have a nice website. WordPress allows you that opportunity without having to be a professional developer or something like that. So it's very simple, very easy to follow along with, and I'm gonna teach you how to do it right here in this tutorial. So with all of that being said, let's go ahead and just dive right into our tutorial. So, like I said, Step number one is to get a hosting plan and a domain name. So in order to do that, we need to go appear to the browser and go ahead and type and create a pro website dot com forward slash hosting. So it should look like this and what you have it in there. Just go ahead and hit Enter. Remember, it's create a pro website dot com forward slash hosting, and that should bring you to a page that says Host Gator and create a pro website. So this is our co branded landing page with host Gator. I brought you here instead of just host gator dot com because if you go through this page, you get the awesome promotional discount that we had create a pro website have provided for you through host Gator. So let's move on down and you'll see right here that there are three different types of hosting plans. There is a hatchling plan Ah, baby plan and a business plan. So for the purpose of today's tutorial and the type of website that I'm gonna show you how to build, I recommend a hatchling plan. We just have one website, one domain, and it's a simple one page website, So I'm gonna go with hatchling, but you could always go with baby plans. Say you have more than one domain name. More than one, um, website go with the baby playing, you see, right here it allows unlimited domains under this one hosting plan. Now, say you had a business that was larger, was bringing in mawr finances, and you needed the extra tools and features and support to really help manage it, then go with business plan. But like I said, I'm gonna choose hatchling. You can choose whichever one you want, but I'm gonna continue on and I'm gonna choose by now on the hatchlings plan. So that should bring you to a page that says, Choose a domain. She's a hosting plan, billing information, all that good stuff that we need in order to create and purchase a hosting account. Let me go ahead and exit out of my little coupon coin right here. We don't need that and go on down to inter your domain ing so you'll see we're on register and new domain. And right here is where you'll put in the domain name that you wish to purchase for your website. So for the purpose of this tutorial, I decided I would make a winery website. So it's a great winery vineyard that people can visit. And so, for the purpose of the website, I decided to go with the name that I felt was meaningful for me. You know how held some memories and special meanings? I thought it would just be really cool vibe and theme for a winery. So I decided if I did have a winery, I would want it in the mountains somewhere. And as a kid, I would go on vacation in the Smoky Mountains and stayed a camp ground called Smoke Mont. So I decided, Why not? Pretend like we have, Ah, fancy little winery up in smoke Mott in the Smoky Mountains. So I'm gonna try the name Smoke Mont Winery and see if it's available. Okay, Smoke Mont Winery. And over here we typed in dot com and we'll pop up in this little window right here and just hit. Enter So you already see signs of it not being available right away. There's red in this bar, so it's highlighted in red. It's great out and it says unavailable. So smoke Mont Wineries Not available. So in the case that your website name that you were really wanting is not available. What can you do? You have two options. You can get a little creative and changed this name around a little bit. Maybe instead of smoking winery, we do smoke wine, smoke, Mom, vineyards, something like that. Let's see if smoke not wines available. So far, so good. Okay, awesome. So yeah, smoke, not wine is available. So if I want it, I could change the smoke. Mont wine Smoke, Mont Vineyard. Something like that whatever else is available, but still expresses my business in the name and, you know still holds some meaning and has the name in it that I want the core essence of it . The corn name. All of that's there. So, uh, that's one. That's one thing you can do. You can change it around, get a little creative, or you can go over here to this little drop down menu, and you can choose a dot online a dot side. Adopt tech dot net. Anything like that now, I don't recommend this. I recommend you stay with dot com. It's the most widely used, the most widely recognized and searched, and I just think it's definitely better for your website. I recommend getting a little creative, changing this name around, but again, if you're dead set on the name you have picked over here, and she was like a dot co dot space, something like that. Now let's go back to the domain ing that I wanted smoke mont winery dot com because I want to show you guys something again. We see it's not available. I can't have this domain name. Well, some cases, it wont be available because somebody else already owns it. But in this circumstance, I own smoke. Mont winery dot com So say you already on your domain name? Well, you just type it in and you go over here toe I already on this domain and it'll register for you. So there we go, registered All set. Looks good. So that's what I'll do for my website already. Register mine domain. Since it's already been purchased, it smoke mont winery dot com. But for the time being, let's head back up to register a new domain. I want to show you guys something. So let's just say I chose smoke mont wine dot com and let's head down. So you see, right down here domain privacy protection is a dollar 25 extra month billed annually would be 14 95 not bad. And, uh, I'm gonna keep this checked. I recommend you do as well. If not, you can definitely expect to receive just a crazy amount of spam phone calls and emails of people saying, Oh, let me build your website for you. Let me offer you this by this purchase This sign up for this and I mean you can deal with it. If you want to save that 14 95 year, or you can leave that checked and save yourself some time having to reject people on the phone and clean out your inbox, I'm gonna leave that checked and we'll move on down to choose a hosting plan. So right here we see package type in the previous window. We chose, actually, so we're good there. Let's leave that alone and go over to billing cycle. So if you hit, this little arrow brings down a drop down menu, and it gives you so many different selections of how you'd like to pay, how long you'd like to have this hosting plan for and all that jazz so you can do 36 months . That's what they recommend. You see. You get the biggest savings from it, for sure, but sometimes for people that's just too long. They don't want to commit to something that longer. They don't want to pay that for in advance. And that's okay. That's why there's other options. So I recommend 12 months. It's a four year, and it's the same amount of time that you have your domain name every 12 months. You have to renew that domain name if you want to keep it. And so I recommend 12 months. You still get some good savings and everything just stays kind of automated and organized, just coming out and renewing at the same time. But for today's tutorial, I'm gonna choose one month. I also recommend one month if you're not sure your if this is something you're new to and you're just giving it a try 7 66 for a month, giving it a try and finding out that you really do enjoy this. It's it's really helpful on beneficial for your business. And like I said, you can always go in and change this. After the month, you can choose a different billing cycle and renewal. This all that good stuff one month is not gonna hurt, gives us a try. And yes, So I'm gonna go with that 11 month and then just down here, you'll Internet user name and security pin anything you want. Just make sure it's gonna be easy for you to remember, but also still secure. So I'm gonna put my name now. You do the same. Okay, Looks good. we could move down to entering in our billing info. So right here. Basic. If you've ever purchased anything online or sign up for any online accounts or anything like that, literally the same. So you just fill out your email and your information, your credit card. Now keep in mind when you're putting in your email, put in the email that's associated with your business. You want to keep things organized under one email and just simple, easy toe access like that. So I'm gonna do mine. We'll go over it, make sure it looks good and then confirm it. All right, and then just put in the rest of your information. Well, all this out, Okay, Now, once you've done all that review it, make sure everything looks good. You got your right email in their right credit card and move on down to step number four additional services so you'll see in this step. It says SSL certificate include it for free. This is awesome. What an added bonus. So we don't pay for it, but it's an SSL certificate. This secures your site. So anybody coming on signing up, creating an account, purchasing anything, those passwords that credit card information, all of that's secure and private information that nobody would want getting out is secured through this SSL certificate and a good way to know if a website has this is to go to the browser and you'll see a little Lockard here if it's locked, you know you're good to go as the self certificate. Also, the S at the end of the beginning of the search address or the web address. So H T T P s instead of h t t p secure site. It's very beneficial. Looks better. It is better for Google. Google looks down on people that don't really have the SSL certificate. I mean, they they ping your site, meaning they're gonna push you down. Your ratings and all that stuff are going to be affected by not having this. So it's awesome that host Gator include it for free. So let's move on down and you'll see cite law monitoring unchecked this We don't need it. We don't need site back up. There are ways that you can get these for free. So for now, we're just gonna go with that. We're gonna leave them unchecked. Go on down to the coupon code, and it should say, create a pro website and be validated, if not going type in, create a pro website right now, and shoes validate, which will give you a humongous savings and will bring your total down to 27 61. So there we have our domain registration went from 17 90 90 year two for 99 are hosting went from 10 95 a month to 7 67 And of course, we have those add ons, which is our security keeping us from getting those terrible, terrible spam calls and emails. And that's 14 95 a year. Bringing are awesome total with that killer discount to 27 61. So once you've looked over everything, you reviewed it. Everything looks good to you, and I'm gonna actually go ahead and go back to already owned this domain. And I'm gonna put in smoke winery dot com because that's the one I'll be using today to build. And then you just go all the way down. And like I said, once you've read over everything and you've reviewed it, read the terms of service. Go ahead and check this box. You agree? And when you're ready, go ahead and click. Check out now 3. Step 2: Install WordPress: Step two is to set up WordPress. WordPress is the most popular content management system in the world, and it's free and easy to get set up an awesome. So it set us up a host Gator account, and now we can move on to step number two, which is installing WordPress. So in order to do that, you see, we're on our dashboard. Let's go over to launch. See panel, Okay, And from there, just go head down to right here, build a new WordPress site and just click on it. And now that'll open up the page that we need in order to install WordPress. So let's get started with that. So here says Selected domain for installation. So go down to this little drop down a row and just click on your domain name that you just registered for now. Minus smoke. Mont winery dot com Just confirm you have the right one and let's move on. So right here, where it says directory, Just leave it as is good to go and just click next. Now for install settings, go ahead and choose a block title, Admin, user name, last name and the email that we just signed up with. So go and fill all this out and I'll fill mine out as well. Okay, So once you felt all this out, just look at it and confirm that everything is the way it needs to be. You have the right email address in there, and you're happy with all of this. So once you are done with that, go ahead and click this little box Terms of service, agreement and click install. Awesome. WordPress is installing and just like that installation complete. So now what we need to do before we choose to log in as you see this user name and this ridiculously long password. What? We're gonna need that ridiculously long password to log into WordPress once it's available . So let's go ahead and just highlight all of this and go and paste it somewhere where you can get to it quickly, somewhere handy and somewhere where you're gonna be able to find it and remember it. So I'm gonna post mine right in pages. Okay, here we go. Perfect. And once we're done with that, just go ahead and choose log in and awesome. So it should take you to a page that looks like this. But if not, that just means that your WordPress website is not ready yet. It can take a while because all of that information has to be sent out across the entire World Wide Web, letting them know Hey, this is a new website. This is a new web address, a new domain name. So this could take anywhere from 20 minutes to 24 hours. Now, I've never seen it take any longer than 20 minutes. So if you guys want what you can do is you can take a quick break and let's come back and check in 20 minutes. And I want to remind you that if you don't see a page that looks like this, don't panic. Actually, let me show you what the page might look like. It might either be a blue and white page that says spectrum Oh, are whatever your Internet provider. So it could also look like this website coming soon. Pages used to test the proper operation of your recent mobile market, please. Okay, so website coming soon. Like I said, your page could look like this, or it could just happen to look like this But more than likely it's going to look like this . So what you'll do? Like I said, Let's take about a 20 minute break right now and we'll come back in about 20 and see if everything's ready. And if so, then we'll get moving on to the next step. Okay, so we're back. And what we need to do now is we need to see if our WordPress site is available and if we can lock in. So in order to do that, don't bother with this admin log in right here. That's not going to be available every time. So I don't want you to get comfortable with logging in that way. So go up to the browser and type in your domain name so minus smoke, mont winery dot com and then make sure you do forward slash WP dash admin. So that is forward slash WP dash admin at the end of your domain name and hit enter. And just like that, it should bring you to this awesome WordPress log in page. So what we're gonna do now is we're going to inter in our user name or email, and then our passwords so minus smoke mont winery at yahoo dot com. And let's see, Remember that ridiculously long password that you need it in order to get in. We're gonna need that again, because this is where we're gonna use it. So go ahead and grab it from wherever you saved it. Here's mine, and then just paste it in. And when you're ready, log in. Erin. So we're in our dashboard, and before we get started, this page just kind of looks a little crazy. There's so much to look at in your eyes and bring Don't even really know where to go. So let's go to clean it up a bit. So exit off all of these and give me your money. No, thank you. Just get all of them. And just Here we go. Close this. What was this? Close this. Clean it all up. All of it. All right, there we go. It's looking better, and yeah, there we go. Ok, much cleaner. Much easier to read and see. And ah, So now, before we move on to our next step, let me show you how to change that ridiculously long password. So you don't have to worry about putting it in every time. So in order to change your password, let's go over to users all users and go down and click on your name Here's mine. And from here just grow all the way down to the page where you see, generate password Click on that and it's gonna create another ridiculously long password for you. Just delete that. And now put in a password that is going to be easy for you to remember but also secure. So I'm going to mind. Now you can add yours. Okay. Awesome. Once you've added a new password, just go to update profile and we're good to go. Now we have a new password. Let me go and update that they're awesome. And that means now we can finally move on to our next step, which is Step number three. Activate a new theme and installer plug ins. 4. Step 3: Activate a New Theme & Install Plugins: Step three, activate a new theme and installer plug ins. So in order to build this website today, we're gonna use an awesome theme called Ocean WP. With that, we're gonna also download a page builder called Element or the two of those combined are gonna allow us to build a website that's flexible and customizable to fit our needs. Okay, So, like I said, now that we've installed wordpress and we've changed that lengthy password, we can move on to our next step. Step three activating and installing a new theme and plug ins. So in order to do that, just go on over to appearances and we go themes. And from here, let's just go and close out of this little thing. It's just another distracting pop up. All right, so from here, we need to download our theme. And the theme that we're gonna use today is this awesome theme called Ocean WP. So, in order to get that, we're gonna go over here toe, add new theme and in the search bar right here, just go ahead and type in ocean WV enter. Awesome. So it should be the very 1st 1 You see that pops up It says Ocean WP Just do it. It looks like a Nike website. And so if you see that, go ahead and shoes install, I should say, installing and installed. Awesome. Now we can activate it aren't cool. So our Ocean WP theme is installed. Now we're almost at the part. We get to start building our website. But before we do that, we need to specific plug ins and you'll actually see right here. This theme recommends the falling plug ins, How convenient element or an ocean extra that is actually what will need what will be installed. So what I'm gonna have you do, though, is instead of installing it right here, because sometimes it can get a little buggy and and not work or not show that it's working even though it works. So we're gonna go over to plug ins and we're gonna go add new, And from here we're gonna type in first element or and then ocean extra. So, actually, let's do ocean Extra first hit, enter and you'll see right here. Ocean extras Got a little rockets, red ocean, extra at extra features. Once you've seen that, you know it's the right one click Install now and in Stop and go ahead and activate it. Gorgeous. Done. All right, so now we need to go back to plug ins new and back to this little search bar and typing element. Or And here we go, you'll see Element or page builder. There's a funky looking E and a nice Ahm braid. Um, purple and pink background. Go ahead and choose. Install now and activate. Nice. Okay. Ah, some So welcome. L a mentor. And we can create your first page. Get the full guide. We don't need the guide. I will be your guide. I'm going to teach you how to do this. So now that we're done with insulting that theme and those plug ins, we can move on to our next step, which is building out our website. Do. This is the fun part. You guys were gonna love it 5. Step 4: Customize Your Website | Part 1: Step four customize our website now. This is where we really get toe, have a lot of fun customizing and creating a website that we can really be proud of and collar own. So now that we've downloaded that theme and we've installed those helpful plug ins, they're going to really play a big part and being able to customize our website more. We can finally move on to step number four, which is customizing our website. So before we can actually get into the design in the customization of the website, we're going to need to download this awesome template that I provided for you guys. And this template is just going to make the whole process Ah, lot easier and quicker. So in order to get that template, let's go over here in this little left hand menu and we'll go to templates. Click on it, and from here, you'll see add new or import. We're going to import templates because Thea template that I'm providing for you. You're going to be able to download that onto your computer. And once you've done that and you save it in a place that is going to be easy for you to find. Remember, I recommend making one folder for your website and then folders within that folder toe help you keep things really? Just micro organized. So from here, we're gonna go to import templates and choose file. And so we're gonna have a home page template and a personal footer But right now we're just gonna import the 1st 1 which is the home page templates to go ahead and open that and click import now. Okay, awesome. So we have our one page WP theme right here. So now we need our footer. So let's go back up to import templates, and we'll do the same. Choose a file. Personal footer Open import now and there we go. Look, we have our footer and we have our ah, home page. Well, actually, we have our template page. So what we need to do is actually create a home page. We need a page to start building this website out on. So in order to get that one to go appear to pages and from there we're gonna go to add new and you see, right here we need a title. So let's just go entitle it home page. All right, now go over here to the right menu. You see where it says template page attributes. This is very important. Make sure you click this little drop down arrow and shoes element or full wit. Once you've done that, go up and she was published. It's gonna ask you if you're sure. Yes. We're sure this is not gonna be anything that anybody else sees right now. This is for our eyes on Lee. So published. Okay, awesome. So we have a home page, but right now, our, um, our website. So our Ocean WP theme doesn't actually recognize this as our home page. So we need to go in and tell Ocean WP that this is a home page that we'd like to use. So go up to the little house icon, the name of your website and click visit site. Okay, so we seize very static. Pretty simple bare bones website. So right now, we need to go to customize and from here, go to home page settings and just go ahead and click on a static page. From there, you'll see home page, Go ahead and click on this. Dropped on arrow and select home page. There we go. Now we've identified our home page as the home page for Ocean WP. So we should be able to hit, publish and go to close out of this at the X. All right. And from there we're gonna click edit page and edit with Element or yes, So we're gonna edit within the home page with L. A mentor. Awesome. So this is l a mentor. This is where we'll really customize our web page and make it look beautiful, make it look personalized and just really create a vibe that we can be proud of. So in order to do that, we're going to go down to this little gray file menu to get our template, which, like I said, we're gonna plot that template in, and it's gonna make it so much easier for you to actually build your webpage. But before we do that, let me just kind of show you a little bit how element tour works. If you wanted to start from scratch, you didn't have a template. You go to this little plus sign and you would just start with choosing a structure so you could choose the 1st 1 any of these. So if we chose this 1st 1 we have a little structure right here and from here to add features to add sections, we'd go up to this little a Rubik's Cube looking block, and you would just choose any of these widgets that you wanted to add. So let's say we want to add an image. You just drag it, click it, drag it. And once you see the blue highlighted section, drop it in. That's how we know it's actually with in this section. But we're not gonna do that. Like I said, we have that template that we just downloaded. So going close out of that, we don't need it and go over here to this little file button from here. We're gonna go up to my templates, and you see that we have a, um, home page where actually, it's a Web page, and then we have our footer, which is gonna be, um, just a little bit of information that you see at the end of the page. But right now, we're gonna go ahead and do one page WP theme, so go ahead and insert. All right. And there we go Awesome. You'll see. Right now it has all of my information from a previous wine website that I built. So it was called Rocklin Winery. And even though some of my pictures and stuff like that are missing, that's okay. It just takes a step away from what we have to dio. But you'll see all of the information in each section is already added in for you. It's just gonna be from here and easy adding our own images, adding our own text, re sizing a few things and all that good stuff. This should be a video right here. Doesn't look like the video file is actually imported. But I will show you how to do that. So, yeah, in order to get started, let's just go ahead and head back up to the very top and we'll start with this top section . So the first thing we're gonna do is let's get rid of this big old, bulky section right here that says home page. We know it's a home page. We don't need other people to see this. We want it to flow nicely, and as soon as they hit the page, you want him to see this beautiful section. So let's go and fix this. So in order to get rid of this or hide this, let's go up here to these three Little tabs. Looks like a hamburger to me and we go toe exit to dashboard. Now from here, let's go up to the name of your company and choose visit site. Okay, now go to customize and let's just go to general options. From here go to ah page title and down here we see where it says style. Click on this, drop down a row and choose hidden. And just like that, we'll see it disappear. Here we go. Awesome gone, so we know it's the home page, but now it's hidden. So we got to see that anymore. And neither will our site visitors. So now that that's done, go to publish. We want to save this, and once it's done, hit X go over to edit with L. A mentor. Awesome. Now we can add in a beautiful image or color whatever we want for this top section right here. This is the main section. This is what people are going to see immediately. As soon as they land on your web page. So we want a nice, beautiful photo here. That kind of expresses what we are, what we do. But we don't want it to really take away from the theater text too much. So in order to do that, we're gonna go up to this whole section and right here, this little blue panel with all this cluster of squares, Just click on that. That's gonna open up this section. So from there, go to style and you see, we don't have an image. So going choose image. And if you already have them in your media library, great. You can choose from here, but if not, goto upload files, select files. And again, I recommend you saving everything in one folder. Ah, specifically created for your website. And that way everything is organized. It's in one place, easy for you to just click and, uh, and grab. So for this one, I'm gonna go ahead and choose this beautiful vineyard photo right here, and I'm gonna click open and you see it downloads it now. Already had that image in here. So I'm going to delete this one. I don't need it twice. Um Yes, thank you. So there we go. And once you have it checked to go ahead and choose insert media. And there we go. We have a beautiful background image, nice and beautifully displayed. Now, I wanna I wanna let you know that when you are uploading images for your website, you always want to make sure that the file is compressed thes large files and so many of them are going to just slow down your website. Slow time and we don't want that. So in order to fix that, if your images not already compressed, just go appearing. Open a new tab and go to optima zilla dot com. Click, enter, and this is a great compression tool. You'll see a little dinosaur at the top and just go down to upload files. Choose the image you want to compress and just click open and you'll see it starting toe. Upload that image and then it will go on to compress it. Alright, awesome. So it's done and you'll see that it has compressed our image 40%. So it's going down and it will show you a side by side comparison of our original image and are compressed image, so you'll see. Yes, there are, um, there are some grains. There's a little bit of picks, elation, but not much at all. So this looks good, and from here you can change the quality. You can change the amount of compression, and once you're satisfied, just click. Apply and then you'll go appear to the image and you'll choose download. And there we go. There's your new compressed image, so you just take the same step for inserting that image. Make sure that you click on image and then you'll go to upload files. Select and you'll choose that new compressed image. But ours is good to go. It's already compressed. So now we're just gonna take it step by step from here, with each section and every little section within each section. So let's start with this background. We have our new image, but we have this weird white overlay that's just kind of making everything look too bright when it jumps out at us. So let's fix that. In order to do that, scroll down to background overlay and you see right here where it says color click on this little box, and from here you can change it around, Pick the color, whatever you want. Purple green, yellow Get crazy. But I'm not gonna get crazy. I'm just gonna stick with black and you can kind of change the opacity of that that background overly as well. You could be a really dark, really light. I want this beautiful font in this call to action button to really pop. So I'm gonna keep mine. Ah, pretty dark. Alright, Awesome. So that looks really good. And again, you can play with the capacity, but it looks really good. Very pretty and just close out of that. And from here you can change the hover. You can change your duration. You can change the color, however, right here again, like I said, And let's go on over to advanced. So I'm just going to show you a couple other things that you can dio. And you can apply this to each section as you go on if you want. So right here you'll see margin and patting. If you see that these air grayed out, that means it's already linked. So each of these variables will change if you just change one. So let's say I I took this from 00 to 30. A lot of padding. A lot of empty space in between. So we don't need that much. But you can if you want. I mean, you can go 200 gets really crazy. 00 I think it's good. It looked great the way it was standard, but you can do the same for margin. And if you just wanted toe edit, like maybe the top where the left or something unlinked thes and then just do each little section individually. So from there we're just gonna go back to lay out and you'll see that you can kind of just change the height of this whole section. So I mean, we could make this like, really big or really small, and I had mine, like, right there. So that looks good. I'm gonna keep that. We want our content with to be full with not boxed. We want this web page in this image to be spread out nice and full, get the full effect of it, and ah, yes. Oh, that looks good. I'm very happy with that. Now, from there, let's go to move on to thes text box and I'll show you how toe those put your own Texan and also show you how to edit and leak this call to action but into a different portion of your page. So let's start here where it says Rocklin Winery. If you want to edit this, add your own business name. I know I do. What you're gonna do is either click in the box or you can click this blue little edit pencil right click it. The only reason I am not a big fan of right clicking is because that button can stick and it will like it thinks you want to move it somewhere. So just in order to drop it back, make sure you have this part. Highlight it. You see what it's within this section? Drop it. There we go. So I'm gonna click within the box, and you can either edit right here on the page where you can edit over here on the left hand side in this little title box. So let me put the name of my winery. Okay, that looks good. You can also play around with the settings. You could change the size, the alignment, anything like that and you can also go up to style And you can change your text color, your typography and all that jazz. So let's start with text color Click on this little box. I have white, but you can change it and go read. I mean, blue, purple, whatever. I'm gonna keep mine with white. I think it pops nicely. I recommend whatever color you choose. Just make sure that it's popping beautifully and nicely. We want to the name of our website to stand out to be nice and bold. We want this section to be beautiful and bold. So I definitely want to choose a black or something like that. I'm gonna go with white. Um, just looks great. So from there we can go back and close this little box and you can change the font in typography. So click on this pencil and you'll see I have Monserrat chosen. So for my website, I chose to different fonts that really play well off of each other. It shows Monserrat and open sands. You can go in here and you can play around with things and you can get crazy and choose whatever you want. But like I said. I recommend choosing 1 to 2 thoughts that really play well off of each other and just kind of play with those throughout your website. You don't want too many different bonds than things start, Teoh. Just look crazy and unorganized. And this is a better way toe to keep your website at a nice flow. So I'm gonna go back to Monserrat at this time. You can change that to whatever you'd like. Okay. And from there, we can just change the size. I mean, we can get crazy with it and make it really big. Make it so tiny you can't even see it. Having that looks good. 60. Looks nice. I'm gonna keep it there. I'm happy with that, for sure. All right. So from there we changed our typography. We edited the size. You can change the weight, the transformation, your line height, your letter, spacing, all of that. I think that looks good. Okay. We're gonna leave it right there once you don't. That just going to click update again? We want to make sure that we're saving our progress throughout. We don't want our power to go out or computer to shut off. something terrible like that and lose all this hard work. So from there, like I said, you can always do your advanced settings. And and I used these features, but I think this looks really good. I'm happy with it. And now let's move on to this text box where it says tasting tours and special events and again click in the box or right click on the Blue Little pencil and just edit right in here . I'm happy with tasting tours and special events, but at this time you can type in whatever you want. So whatever you do, whatever you offer, um, you know, women's fashions, delicious cupcakes, anything like that. Whatever you want this to say, tagline. Whatever you're offering, go ahead and put that in right there or again. You can edit rate right in here entitled, so we have tasting tours special events again. You can change your alignment of these things and let's go to style. You can change your text color. Do whatever you want to keep white. Close that out, shape your change, your typography again. I have opened sands for this one again, I said they did monster, raw and open Sands. They just play off of each other. Really? Well, I like them together, So I'm gonna stick with those to You can change the size of your father, make it big and bold or whatever you want. Same setting, same features that are provided for each of these sections. And so you can just edit it within on personalize it as you go. So again, with the advanced, you have your margin, your padding and different things like that. So let's go back to content. Like I said, I'm very happy with this. I think it looks good. It's a nice color that pops. Okay, so now that this section is edited, it says what we want. It looks good and it pops nicely. Let's move on down to this bright, beautiful button right here. So this button is our call to Action button. We want somebody to see this and to know that they can click this and either contact us, make a reservation, purchase something, sign up. Whatever it is that we're offering or selling, we want them to be able to get to it right here from this button. So let's edit this, but go ahead. and again click on it. Well, sorry. That actually takes it to what I'm gonna teach you to Dio. So since I've already linked it, go ahead and click on this little blue edit pencil, so that should bring you over here to the section toe, Edit the button. So in content, you'll see it says text. And this is what our buttons says. So you can go in and change that now and have it say whatever you want. Purchase book. Now, um, sign up. Whatever it is you wanted to say, mine is going to say both. Now I like that. I think it's bold. Looks good. And that's a nice called action statement. So now here's where we're going to create that jump link in order to have this but in link to another part of our page when we click it, we're gonna go down to link, and we're going to make sure that we put in the section name of where we want to link it. I want my book now button to go all the way to my contact section so that it just takes them right to my email address. My phone number and all that information that they need in order to actually get ahold of me. So you're gonna make sure that you have that hashtag that's linking it and the name of the section So hash tag contact for me. Now go down to the section that you actually want to link it to again minus contact. So I'm gonna go appear to this little blue panel edit section, click on it, and I'm gonna go to advance and you see where it says CSS I d just know hashtag type in that name of the section that you named it up at the top in the link. So contact, once you've done that, Click update and let's see if this worked. So go up and click on your button. Well, who? Awesome. So it worked. We have a working functioning called action button. So let's go back up. Now that we have that actually working, let's edit of the look of our button. So again, click on the little blue pencil icon and let's go over to actually, let's just start in content so you'll see we change the text. We gave it a great jump link and here you can change the alignment, put it on the side, put in the middle, make it the whole bar. Whatever you want to do, I'm gonna put mine in the middle and right here where it says Icon, if you want, you can either upload your own or add an icon from the library that will sit in this little button. So say you wanted to do that. Let's click on Icon Library and you'll see that there are just so many to choose from. If you want to filter this out by keyword, you can go in here and let's say you can type in. Phone brings up all the phone icons, and you can do that with anything. Or you can just go over here and search with these sections as well. So I don't want an icon. I'm happy with it the way it is something close this out. But if you did, you would use this button to edit the spacing between your icon and your text. So let's go up and go to style. Now my butt in goes with the flow. My website is this beautiful cranberry color. It resembles wine, but if you want to change that. You'll just go right here to background color and you'll choose whichever color you want. Now, I love this cranberry, and I know I'm gonna use it consistently throughout my website. So I want to save that color code. I don't wanna have to keep going back and looking at it in. Well, let me check it again so that I can type it into this section. So I'm gonna copy it, and I'm gonna go to pages just file that I have opened. Help me with all of my my information while I'm building any links. I need passwords, whatever it is, and I'll put it right there. So I'm gonna just bring that back down and again, You can change the color of this button. You can go crazy with it and just get creative. I recommend using a nice, bold, vibrant color that stands out So Ah, a nice pink or ah, beautiful, bright blue or vibrant green. Something like that. So, like I said, I'm gonna use that cranberry color and I recommend again, just like the font. Don't go too crazy with a bunch of different colors. You could kind of play around with it and just get as close as you can to the last one. I recommend saving that code and just placing an end when you need it. So it's close out of this box and go to text color so you can change that as well. Mine is white. I like that, pops. Really? Well, you know, I think that it needs to be easy to read and easy to see. But you can change that purple. I mean, graze whatever you want to do anything. But I'm gonna keep my white. And let's just close out of that as well. And like with thes sections, you can change your your fought Ah, family can change your tech shadow. You can give this, but ah, hover shadow. So when you hover over it, either the text changes a color or the actual background button could change a color. Let's try that. So go to background, however, and I'm gonna type in my color code. Here we go. And I'm actually going to just bring this part down and make that a little deeper. So let's see what happens when I do that. So if I scroll over my button. You'll see it gets Pinker after our once I scroll over it. I am not a fan of that. I'm just gonna bring us all the way back up. It's definitely something that you can do. And it's definitely something that stands out when somebody is kind of playing around on your Web site. And, um, you know, scrolling over these buttons, I'm gonna leave mine like that. Wouldn't close this out. But you can do the same for your text again. You can change your border radius. So that would be how square around it. Your butt nous. I had mine a five. I really like that. Remember, this great out link button keeps all of these links. You can change them all at once. You can do like a 20. Makes it a nice round button. You can do 00 nice and square. I like 05 has a little bit of roundness to the edges. And again, you can change your padding. So the space between these words and and this red button itself for the space between this but and then on. And you know these sections. But we're gonna go on up to advance. And from here again, you can change your padding in your margins and different things like that. So we're done with this. This button looks beautiful. Ah, By now I hope that you have edited this button to the color and, um, the link and everything like that that you want. So now that we have that done, we have this beautiful section done. And I also want to point out you'll see that when we scroll down the page, our picture back here does not scroll with us. It just stays locked in the place that is called a parallax effect. I love it. I think it looks great. But if you don't go and click on this little cluster right here in the blue edit section and what we can dio is we can change that. So let's see. So you would go to style. And of course, you wanna change the position. If you want. I like center center, But changing this would change this picture around a little bit and move it on to go with center center. But anyways, your attachment is your fixed. So that's what locks that picture into place. If you don't want to walk in a place juice scroll and you'll see the picture moves with the site. But I just think it kind of looks jazzy. Looks really cool. So I'm gonna go back to fixed. All right, So now we are officially done with this beautiful section, so go ahead and hit update again. We just want to make sure that we're saving all of our progress throughout. You do not want to go through all this hard work and then lose it all toe. Have to do it again. 6. Step 4: Customize Your Website | Part 2: so that's update. It looks good. Now, let's go down to this About a section. Okay? So in order to get a beautiful picture into this section, what we need to do is click on this little edit columns button and make sure your style and go down to image and click. Choose image. Now, if you don't already have the image in your media library, just gonna goto upload files, select files, and again, just choose Theo image that you want and hit open and will insert that. So already do have mine. Let me go to Media Library. And she was this one and insert. So there we go. That looks absolutely beautiful. Have this nice picture of these delicious looking grapes. So we have that picture set. And again, we can just go in and edit within this little section. So for the picture, you can She was center center, bottom center bottom. Right. You know, just kind of play around with it. I'm gonna choose center center. Hope that center right after centre left. There we go. Center center jazz. Right. Okay. And from there you can choose your attachment style. You can do scroll. You can do fix. So fixed is just like I showed you up here. It's gonna lock it and as the background picture. Ah, and it's going to stay in place as you scroll past that section. But we don't want that for this. It looks a little funny, Some to go. A scroll locks into place as just that picture. And then it just continues with the website. All right, so that looks good. No, we don't want this picture to repeat. Ah, you can add a background overlay if you want. That way it has a little dark overlay or colorful overlay to it like we did in this section . But I like this nice and bold doesn't have any font over it. So it's fine just like that. But you can edit all of that and you can go over here to advance and again change your padding in your margin and all those good things. But I think this looks good. I'm happy with this photo. So now let's move on to this little section on the about section. So we have this great background. We can either make this a nice, solid color or at an image and then edit are fought in our buttons. So let's start with the background again. Click on this little edit column button and go to style, and from there was, just upload another image. Now you don't want this image to be too crazy, too busy. This is going to be a background image just to kind of be in place for our words, to really pop off of nicely. So upload files, select your file and then just do the same thing. Pick the file you want in the back room. Once it's loaded, go ahead and shoes. Insert media and there we go. We have a beautiful background image of wine barrels, so we have that set and you'll notice that mine already has a nice dark overlay on it. But if not, if your picture is bright with a background overlay, go to color and you can change that. You can take the overlay off. You can add an overlay. You can go with a colorful overlay whatever you want to do. But I like this dark one, but I don't want that dark, so I'm gonna go about right there. I think that looks good and ah, go back up to background. And from there again, you could just change the position of the photo of the type of attachment if it repeats and all of those awesome features. But I like it like that. I think it looks really good. We got our background overlay. We have our image. It doesn't distract from the text. So let's go on and edit our text now. So right here Click again either in the box or on the Blue Little Icon pencil. Remember to right Click that part, though I'm gonna click in the box nice and easy and just gonna type in your title Mine is going to be about smoke Mont Winery and that's a little big. You see, it puts it on a different line. So what I'm gonna do is go and fix that so I can do that by going to style and going to typography. We'll see. It's my monster rock beautiful fought, but let's just adjust the size just a little bit. There we go. 28 puts it on the same line. Looks nice and clean and beautiful. So again, if you want to change this around you can change your line height and just put a lot of space in between that, Um, here we go. You change your letter spacing. You go up to text color and change the color of this font right here to keep it white again . I think it pops nicely, but you can do all of that. All those awesome things and, um, again margin. You can change the padding and the margin between this section and the amount of ah, blank space that you have from there to the next. But I think that looks really good. I'm happy with it. So let's move on to this phone box. Click on this again. Click in it, click the little edit pencil and again you can edit right here within or you can edit over here This time let's change it up. I'll edit over here entitled, So just change it around. Haven't say whatever you want. So this happy little winery will make all your vacation dreams come true. Uh, yeah. So just type in whatever you want, and it's simple. Edit it right in there and everything. So I like to mind the way it was. That looks good. and again By going to style, you can change the font family. You can change the text color your text shadow. You change your alignment, different things like that. So, um, let's go down to this of your history. But I'm happy with this. This looks good. And now again, I'm gonna show you how to create a jump link on this button, and we'll edit this button like we did the top one. So click on the blue icon pencil or click on the button. It's actually I can't click on the button itself cause I've already linked mine. But click on this little blue edit I conference over Right Click on a button. Oops. There we go. No! Oops. Oh, there we go. Thank Jesus. Okay. All right. So now, now we can edit our buttons. So let's go over here and we'll see the text for about. We'll start There you are history. You have to say whatever you want. You can link it to whatever section Mind says of your history, because I wanted to link to our video section where viewers can watch a short video of our history. How are wine is made? How we got started in all that awesome self, So mine is gonna stay. You are history and just type in here and show you guys perfect your history and again in this link section you want to make sure you have your hashtag and then give it the title to whatever section you're gonna linked to. Mine is video. So hashtag video. Now go all the way down to the section that you want to link it to or up wherever it might be And go ahead and click on that gray edit column button and go to advance where you see CSS I d I'm sorry. You're gonna click on this little cluster in the blue section We want to edit the whole section on not just the video. So click on that, Go to advance and you'll see CSS i d. And then just type in the CSS i d. That you gave it in the link button on the last portion so minus video. Once you've done that, click update and let's go back up and see if it worked. So click on your history and boom, There we go takes us right down to our video section. Awesome. So now that we've linked that we know this button works, it takes us right to this section. Awesome. Let's go back up and do a little more editing in this button so we could go down and again we can change. Um, the positioning of it. I actually like that nice. Full with buttons. I'm gonna leave it like that. So I'm gonna leave my alignment as justified. From there, you can add an icon just like we did for the other button. We're not gonna do that. I like it without nice and simple, But go to style and you'll see again from here, we can change our fought. I have opened sands. You can change the size of your font. Your line height letters facing you can change your tech shadow, and you can change the color of the button itself. So remember, I have that nice cranberry, but you can go in and play with this and choose whatever color or paste in the color that you used for your other button. Close out of that and right here in text. You can change the color of the actual words on the button to keep mine white. It pops. It looks great. Once you're done with that, you've edited everything within this section. Your border radius again. That's just rounding out your button. I'm gonna make it even to the last one. It was five. So we're gonna do that. And, uh, yeah, I think that looks great. Are button links It's functioning. So let me show you how to get this awesome little growing little want want effect on your button or any other you'd like. So in order to do that, you're just gonna go to style, and instead of normal, you're gonna make sure you're on hover now for that, go over to hover animation and you can choose any of these Grow shrink post push whenever you want. I have a don't grow, but this is what group Post looks like. Um, you could do push anything like that. So I like growing to keep that and then also go to background color because you'll notice when you scroll over my button, it gets a little darker. So I have that as a feature that you can change that you can make it turn to another color if you want to show them that they've clicked on it. Ah, you could keep it the same. Whatever you want to dio going to keep mine the same. I think it looks fine like that. And just having that grow feature is good enough. So once you've edited that, it looks the way you want has the space. You want links to where you want. We can finally move on down to our services section. Okay, so in this section, I'm gonna show you how to add these little icons and then edit them, customize them. I'm gonna show you how to change out, uh, this text and also show you how to change this background. Okay, so you'll see Right now I have this nice deep blue as my background color. But if you don't want that and it doesn't go with your site, then go up here to this little blue edit column, click on it and go over to style from there. Go to color, click on the color. I'm gonna go ahead and save this because it is one that I want to use throughout. And now you'll just change this around, change it to whatever color you want. If you don't want to do a color, let me just go and add my color back. And then I'll show you what to do if you don't want to do a color. So my color said I like that gorgeous clothes that. And if you don't want a color shoes image and go over here and just pick whatever image you want for that section So I don't want that, I have it up here. I'm not gonna repeat my images, but you can do that. You can add a nice image and actually an image behind that looks really pretty. But if you don't just go ahead and trash this image and have your simple, beautiful color that really allows each of these service sections toe pop so nicely, so we have that. And again we can add a hover color, which would allow this to kind of change a bit if we wanted it to. Once we hovered over it. I want to keep it normal and simple, and I think it's fine just like this. So now we can go back and again in layout or advance. You can change your margin. You're patting. Ah, layout. You can change the height of this section. Let me just remember that actually would be good. Copy that. But you can change this. Make it really big. Make it really tiny. Whatever you want to do, I'm gonna go back toe 3 95 I think that looks really good, but you can go box for with I recommend leaving all this at full with. We want our page to be nice and full. So yes. So that's how you change all of that. And now let me show you how you change seats each section within this section. So let's start with wine tastings. Let's edit this little section as a whole, go up to the great and a column button. And again you can change your alignment. You can. We have default. You top middle bottom. Whatever you want to dio, I'm gonna keep it on default. But you can change your horizontal and vertical line ments and different things like that. But let's go to style and right here you'll see that you could just change your your normal or your hover colors again for this section if you want it. So once you hovered over this. It could get darker or lighter change colors. But I like it like this. I don't think we need to get too crazy with it. Um, and then things just end up looking, stopping unorganized. So that looks good. Let's move on to actually editing this section right here with our icon and our our text. So go ahead and click on the Blue Little Edit Icon pencil and that will open up that section right here on the left and you'll see right here right away. You see our icon box. We have a little wine glass. So again you can upload your own or you go to the icon library and you can change things out from here. So click on Icon Library and for my 1st 1 I'm just gonna look for like I did, and I look for wine and you'll see there's a wine bottle, a wine glass that's full and a wine glass that's half full. So let's go ahead and just to change it around, which choose this wine glass in the middle and we'll click insert And there you go. I have a beautiful wine glass that symbolizes my wine tastings. And, um, let me show you how to get this cool effect right here toe where when you scroll over it, it changes colors. So in order to do that, go to style and go to primary color. And that's gonna be the color it is at all times. Not when you're scrolled over it. We haven't chosen as white, which I think looks good, pops nicely and then for the hover of back to goto, hover and choose primary color. And here's where you can change that again. I don't want to lose this. I'm just gonna copy and paste it while I'm in here. But you can change that to green or purple or whatever you want to do. But I'm gonna go back to my pretty cranberry color. I just do that. There we go. And Walla. So let's go back to normal. You can change your spacing out. See a lot of empty space in between those two. I'm gonna go back. Teoh, 15. I thought that looks nice. Not in 1915 years ago. A little bit of space in between it, but not crazy. You can change the size right here of your image. I mean, you could make that icon giant enormous if you want. I had mine at 75. I think that is the sweet spot. Looks good. Okay, awesome. Now let's go back to content and let's go under icon. So right here, you'll see title and description. That's where we'll edit this part. So if you don't want this the same wine tastings say you are telling them about your photography, your you know your own a photography business. So there you go. That's your photography section or cakes. You wanna, um, cake decorating place or something like that so you can change it within right there. So wine tastings is what I had. Beautiful. All right. And then in the ah text box below is where you'll just edit all of this information. And again, I mean, you can click right here in this box and change it out. Or you can go over here and change it out within this text box text box as well. So join us at Smoke Mart Winery for a fund feel time enjoying life music. Ah, flight sampling from our award winning Smoky Mountain wine collection. So oh, and flight music flies and yes, Oh, that sounds good. Looks good. And that's how you edit that section again. You can link this if you want. You can add a link that brings this to another page, or you can add a link that brings us to another section. So if we just wanted to keep referring people to our contact, I mean we could dio Hachette Contact. And that should link to our contact section as well. Awesome. Very cool. All right, so let's go back up, and we will just do the same for each of these. So now let's go to our next section and edit this. All right, get the little icon you want. Change up your title description and go ahead and change your actual text information as well. You'll never want to leave. Um, that's true. Mountains are the best, so I'm just going to get rid of that. I was happy with the way it was. Everything is nice and even. And yeah, there's a little bit more text here than on these two. But it's consistent. It looks nice and even very pretty. We have our nice hover over this and let me Just show you how you can change out the color off all this spot right here as well. So style. Primary color. That's it. That little guy. Let me show you this section. Okay, so now let me just show you how toe edit the font as well. You can change the color and the size of this. Just go over to content. And again, you can choose in alignment to play around with that, you can choose spacing the color of your font, the font family and all that good stuff. So let me choose Open Sands here. It doesn't look like actually had one chosen. Alright, Awesome. There we go. Open Sands is the front we have there. And let's just make sure that it is the same for all of these. Just go in and edit this last one as well again. You just performed the same steps of changing out your icon, editing the colors, just walked through it one more time. Icon library. I would sue calendar on the lectures, choose this one and insert. There we go. So we have our new calendar and from there we can change this title looking event If you want to go back to special events, Um, and let's see so you can change your view. Default you Could you stack frame default like default from there again, change your icon position. Different things like that. You go up to style, you change your primary color. We have our set toe white So it could look like that. Some like that. Go back toe white and you can change your hover color. We have ours that nice cranberry. So every time you scroll over it it changes to a different color Really allows it to stand out and again on this section for animation We have grown. You can change you to shrink. You could do whatever you want. I let grow. I think it stands out, Pops, it's bold. But from here you can change your spacing. Um, your size and all that awesome stuff. So this looks really good. I'm happy with this section. I mean, we've edited our font. Let's make sure, actually, that this is open Sands. Can you open Sands? There it is beautiful. And now all of these air the same. They're open sands. This section looks good. Go ahead and click Update because we're done with that section. Want to save our work, our progress and let's go on down now to meet our experts. So the first thing that will do in this section is edit this mirror experts part. So in order to do that, either again, click in it or click on the little blue icon pencil, we're gonna click in it and title right here is where you can change this. Meet our team, anything like that. I don't know who we are. Why you love us. Different things like that. I'm gonna go with meet our experts, Mert, murder our experts, meet our experts. Beautiful. And from there you can link it. You can change the size. I'm gonna go to default. You can again change your alignment so everything is the same within each section. But you can customize it for every little part which is awesome to go up the style. You can change your text color. I have basic simple black pops nicely on that white. But you get crazy with them. Play around with it, change it. Purple, pink. Ah, yellow. You can't read that. Well, you could do that. White Oh, no, We can't see that at all. I don't recommend that. Let's go back to black. That looks good. Uh, go ahead and click on this color again to close that out and go to typography. And from here, change your font family. The size of your text could make that beast really big. I'm gonna go back to 32. Thought that looked great. You were style, decoration line, high letter spacing, all of that. You can change now. We don't need that much white space in between. I'm just gonna keep it very small. Very simple. We have enough padding here, as is so again you could go to advance. And you can change your margin. You're patting link, even this right here. But I think it looks good. I'm happy. Was that Let's move on down and we'll edit each little, um, profile box within this. Meet our expert section. So let's just start with E. Um, this part right here that says Ron Dewberry, owner, and it didn't show up, but you should see a picture of an employee right here. So let's go ahead and edit this and I'll show you how to get that image. Go ahead and either click in the box or click on this blue little icon pencil and go over here to choose image. Open that up. Goto upload files. If you don't already have in your media file our media library, select files and again go to that one folder that you have set aside for your website here is Mr Ron Dewberry. I'm gonna open that up, and I'm just gonna insert that media once it's fully loaded. And there we go. Nice, beautiful picture of Ron. This looks good. It's looking good, but I'd like a square image here. I just think that it would look more organized. Look, more need and a line. So in order to get this image squared, what do we need to do? Well, go ahead back over here and click on the image. It's gonna open up this page again over here where it says edit image, and it's going to bring us back to our dashboard. You'll go down where it says aspect ratio and go ahead and just type in 2000. By 2000 we would make a square image. Now, once you've done that, click in the top left section of the image and just drag out until it makes are full square . They're gonna position this exactly where you want. It looks good. And don't forget to hit the crop. Told a very important step. So crop it, It saved. Okay. And now we're gonna hit update. We'll make sure that saving. All right. Perfect. Now we should be able to go back to our site. It's gonna visit site at it with l a mentor update. Save all of that and let's go down. And there we go. Ron's image is cropped, and it's a beautiful square image. Okay? And so everything looks good. We have all of our information for each employee said in these profile sections, and now we can actually move on to our awesome video section. 7. Step 4: Customize Your Website | Part 3: So now what we're gonna do is we're gonna edit this background, and I'm also going to show you how to link and edit your own video to put in this section. So in order to do that, we'll start with this background color. Let's go up here to this little blue panel and click on this cluster of squares and let's go ahead and you see where it says content with boxed changed it to fool with. We just want to spread it out more. Give us more video space. Know the full width of the website. That looks really good again. You can change your gaps. You're your height. You could fit it to screen minimum high Anything like that. Let's go over to style and let's go to color. So you see, I have again this beautiful deep midnight blue chosen as my color. You can change that. You can do whatever you want. I mean, you can even do Ah, background image. If you want right here, you would just do the same. Open it, upload file insert or if it's already in your media library, choose one from there. I like it like this. Simple it's not distracting or taking away from the video itself. So I'm gonna leave that as is So now that we've done that, we can also go to hover and you can change the You could make a a Grady in a solid. But you can also add a hover color that way, like we did with other sections. If you want to hover over this, it can get darker. It could get lighter. It can change colors. Whatever you want to do. Let's just say we did. Ah, hover color of green boom. It turns green as soon as we have hover over it. Okay, that's pretty cool, but I didn't want that. So we're just gonna go back and we're clear this We don't want to have a color so close out of that and you can just go back up here in this section, and now I'm gonna show you how to put in your own video. So go ahead and go up to this edit column and go to lay up. You'll see right here we could again change your column with vertical alignment. Horizontal line meant go to style and you could just change the color off this blue part as well. Now we're gonna keep it the same. But you can change all of that within editing features of this column right here. Hover radiant. Whatever you want to dio, you can change your padding so that again, these are linked and we have more blue space. Or you can have Les Bleus space. I'm gonna do no blue space. So we're gonna keep it 00 like that. I think that looks good. So in order to add a video that we want for this section right here, what we're gonna do is go up to the little blue icon pencil and right click it at a video. Uh, sometimes that video can sticks or just drop it right back in that section. And over here, where you see, choose file, go ahead and choose video. So if you already have it in your media library, great. Just click on that and upload it. If not, goto upload files, select files, and you're just gonna want to go to, um, the folder that you have all that information save. Remember? I said it's helpful to keep it all in one folder. So you can move quickly and keep things organized. So let me go ahead and find my folder. I'm actually gonna go desktop. Here's my folder and there's my video. So click on it open Let that upload. And once that is uploaded, you're just gonna go ahead an insert and there we go. My beautiful video looks great. Let's see if it plays so good and click on the play button. And there we go. Awesome. So the video looks good. It in started the way it needed to. Now let's just go over here and let me show you a few settings in the left little edit video menu. So you're gonna see there's a start time and an in time section. So what that is for is to allow you to choose exactly where in the video your video will start and end, so it could be a longer video, but maybe you don't want the whole thing. Maybe you just want I don't know, like five seconds of it, 10 seconds of it, and you want a very specific part so you could put that right here, so I have it starting at two seconds within the video but say I wanted to start at 20 seconds and end at 32. This is what it would look like. It would start right there, and it would go all the way counting to 32 seconds and be a very short video. But I just wanted to show you exactly how you could edit that. So mine I'm gonna go to two seconds. Shows them walking down the vineyard, but it doesn't show. Um, you know what you see before they're walking down into the vineyard. So now we're at two seconds to 32. I thought it looked good, and you're going to see this, but nobody else that's actually visiting your website is, so you'll know it starts at two seconds and ends at 32. You don't know that the video is much longer than that, but nobody else will, so they'll see exactly what you want. All right. So you can also do things like auto play, meaning as soon as the page loads. This video was playing. Um, we don't have that selected. I'm not a big fan of that. And that's why I'd rather just go down and play the video myself. you can have this video muted or you can have sound mind doesn't have sound to begin with. So we're gonna leave it as is And you could also loop it, meaning instead of playing and stopping, it's just gonna continue on Repeat. So it's gonna keep playing, but I like it with no loop. So we're gonna leave it as is now. You can also do an image overlay if you want there to be like a still image over this section before you actually like Click to play on the video. You could also do that. But I like it as this. I'm gonna keep it like this. Let's go over to style. I must go to video style and here you can just choose your aspect ratio. So we have it at 16 9 You can change that, make it smaller, make it bigger. But I like 16 9 Think that looks good and again, with advance, you could do the same stuff. You can change the margin and the padding and even ah, link this video which we did. So remember we gave this CSS i d the name video and we linked it to our view our history button. So if we go back up and you'll go to your history, remember, if we click that it takes us down to our video section. So awesome. That is how you upload your own video. That's how you change the duration of the video where the video plays where the video stops . And that's how you just edit this whole section. So now we can move on to our next step, and normally that would be Contact section. But I'm actually going to show you how Teoh add in a new section and a new widget before we move on. So what I'm gonna do is I'm actually gonna show you how to add an image gallery to your page. I think that image galleries are very important for your website. Having beautiful pictures, displaying what you're offering your kind of really showing a little bit more personality to your business itself can just be really beneficial. And I just think as a customer or client, personally, I like to go to a website and check out their images. That's the first thing I look at the next thing, our reviews. So, like I said, let's go ahead and add in image gallery. So in order to do that, we need a section first. So go down here to this little plus sign and we're going to select a structure. So let's just choose this 1st 1 Very basic. That works perfectly. Now we'll see that this this structure, this section of the website is down here at the very bottom past contacts. If that's where you want it, that's great. You can leave it there. I do not. So what I'm gonna do is I'm gonna right click on this edit section. I'm gonna click Edit section and I'm going to just move it up to exactly where I want it now. For me, I think it would look great in between video and contexts are contacts. It's kind of a nice transition. So let me just drop it in right here and you'll know exactly ah where to drop it. You'll know if it's placed where you want it by this blue highlight it section. So it doesn't matter where you're putting it, you always gonna see that and no. OK, I'm ok to ah to click and drop this in. So let's go ahead and scroll back down because I would like mine right here. So I'm going to drop it in and there we go. We have a new structure now. Right now, it's on Leah structure. It's not an image gallery yet. It's just a section where we can add widgets and add of their sections. So in order to get our image gallery, let's go up to the little A Rubik's Cube and ah, from here. Just go all the way down in the widgets section until you see Image Gallery. There it ISS. So we're just gonna click on it and we'll drag it over and we'll drop it right into that new structure that we made. And again you'll see that blue highlight and then boom, weaken, Drop it. Very good. Awesome. So there we go. We have an image gallery. It's pretty empty. It's pretty dull right now, so we're gonna need images now. This has four columns s. Oh, that's the way it's gonna display. And it allows for eight images. So in order to get those, we dropped it in, so we should already be in the edit section for it. But if not just point and click in it. Or again click that little blue ah, pencil icon. Go over to add images. Open it up. And if you have them in your media library, choose from there. If not, go ahead and go toe upload files and select the eight images that you would like for your website. I'm gonna do that now for mine. And now you can upload these one at a time. Or what I'm gonna do on my Mac is as I click on another image, I'm gonna hit command and then click it, and that allows me to click as many ah as I want at the same time. So let's see, So that one looks good. And let's just go with this one. This one, this one, this one, this one. If I need to delete some, I will all right and open. Once you've selected a mall, just open. It's going to upload them all right here into your media library. It's going to take a little longer than just a single photo, because we are uploading all eight of them at the same time. Oh, it looks like I uploaded in nine, so I'll go ahead and get rid of one of those. And I think I know which one. I want to get rid of this. Well, just wait for them to finish. Uploading. All right, there we go. So I did accidentally help blow nine. That's okay. If you do that, just go ahead and uncheck the one you don't want. And just make sure you have the rest checked in there. Looks good. All right. And then now you'll go down to create a new gallery here in edit gallery. We can change these around and put them in the exact order that we want. So I'm just gonna change this around, create a sequence where it kind of tell a story. Kind of like a time line of the day. So I'll start right here with this nice vineyard Mountain view. Kind of far out. And from there, I like this because it zooms in right on the vineyard and let's see. All right, I think that looks pretty good. I like the order of things. And once you're happy with that, you go ahead and just goto insert gallery. Now it looks like our pictures are uploading. And once they do? They should appear right here. Okay, Awesome. So there we go. We have great looking images. Nice, beautiful square images. But there is a lot of white space. So how can we fix this? If you like it, you can leave it. I don't think it looks very flattering. Looks a little unorganized. And I don't think we're getting the full benefits of each photo. So let's go down here where it says image size, and it's his thumb. Now, go ahead and change that to fool. And there we go. So now each picture is nice and big and full weaken. See them clearly and there's not too much white space. But there are some issues here. This could look better. First of all, we have white space showing, so we know that these images are not the same size and they're not square anymore. So we need to fix this. How can we fix this? Let me show you. So the way you're gonna fix this is go appear and click on any of these images because we're we need to add it, all of them. So we'll just start with this 1st 1 All right, so that'll open up our edit gallery, Click on the one you want to edit and go over here to edit image, and we're gonna do the same thing that we did with the meat. Our expert section. We're gonna go to aspect ratio and do 2000 by 2000 and we're going to look in the corner and just drag out your square and then line this up, get the box exactly where you want it. And don't forget to hit your crop button and we'll click, save and awesome. So now that image is beautifully cropped. It square, and we'll just take the same action for the rest of the photos. So let's go to do that now and it aspect ratio 2000 by 2000. Click up here in the top left and bring out your crop box. Choose your perfect position. Click the crop icon and safe. And again, let's just repeat this process for the rest. And now they should all be perfectly squared. Beautiful images that fit full with. So let's see. Let's insert our gallery. Let's give those a moment to load Gorgeous. Yes, awesome. Look at that. That looks so pretty and they did not take us long at all. And I know how to edit photos in an image gallery because you're awesome. So this looks amazing. So now that we've done that, I just want to show you how to play around with a few things within this, and then we can move on to our next section. Were doing so good. You guys. All right, so we change this toe full. They were thumbnails. We want to keep him full. They look gorgeous. The less white space, the more picture, the better. We have it in four columns. You can change that around, but I like four. It looks great. So let's go up to style. And right here, you'll see you can change the border radius, which would make these more round instead of square. So let's just play around with that and just take a look at what it would look like. All right. So, yeah, they look like little. I don't know, icon buttons or something, but I definitely like the simple, nice, strong square images does look good. You can change your spacing, but we just edit all that to make it look beautiful. nice and square in full, so you could also go to advance. And we've talked about changing your margin and your pad ings again. That's gonna be the amount of white space between it that would just, uh, cancel out what we just did. But, um, you could also link each of these. So your CSS idea You could link this section to another button or another section like we did with our of your history button and our book now, But but let's go ahead and let me just show you how to change this background color real quick. So go ahead to this'll. It'll blue at its section, click on it and go to style. So you'll go to border and you'll see that there's normal right here. And there's hever. So right here you congest edit your border type. You can make it a solid double dot It, um, whatever you want to do with all that, I'm just gonna make it none. And you could change your border radius. So if you want this at, like 90 something like that, Um, yes. So you could play with that. Change that around, and you could also go to, um, to go background. Close that up. Sorry, you could go to your background and you go to normal and you go to background type radio classic radiant or videos. You could have a video playing behind these images if you want as well. That would be a latte, but let's go to classic and just let's work on the color here. So you see this is white. We could change that to green or gray or blue or whatever you want to do. So I liked White. I think it looks good. It's a nice contrast against Thea Dark Blue. I have appears from to go back to white, but you can edit that, and also you could do a radiant if you want. So that's how you edit that part, and you can add an image if you want to. This background that's just a bunch of images sitting on top of an image, so I don't recommend it. But that is something that you can add to that background. Each section has Thea ability to be edited and each section with in their sections, so it's really cool, very customizable. There's just a lot of cool features that go with L. A mentor. Okay, so our image gallery looks beautiful. We have nice, full images, and if you'll see, you can click on any of these images and they will open them up individually so you could see them larger. Kind of just kind of creates a shadow over these in the back and helps you really focus on each picture. Very pretty looks great. And you could just scroll through those or close it back out. So, like I said, this looks awesome. I'm very proud of it. And now we can go down to the contact section. So in this section, I'm going to show you how to edit the section as a whole. So we'll edit this background. We can change the color at a picture and we'll work on that and then also show you how to change this contact information. So I'll show you how to edit all of this phone number, email address, and I'll show you have add other contact information or change this. So if you don't want this or you don't want to give your address, maybe you're solely online, not a brick and mortar. Then we can take this address away. We can out of Facebook something like that. So I'll show you how to do all of that. And I'll also show you how to edit this map. I'm gonna show you how to add your own address so that of site visitors can pinpoint your location and come visit you whatever they want to do with that. And then I'll also show you how to edit this little sign off contact message right here. I'll show you how to change it and make it your own And just, you know, at a little sweet message to your site, visitors, your customers just saying Thank you for reaching out or visiting whatever you want. So let's just start with the background of the contact section. So edit this. Just go up to this blue little tab and click on the cluster of squares, and that should open it up over here in the left. So let's start with style. So in this you can change color image. You can add a hover color, anything like that, But let's start with the color, so over here and click the little box and you'll see that my nice Midnight blue is put in as the color. I think that looks nice. It's dark. It's not too bright and distracting. And it allows all my father and my map to really pop. So I'm going to copy this because I'm gonna get rid of it and play around with things so you could add any color you want. You could just play around with the color spectrum and get creative. Like I said, I just recommend whatever you dio, just make sure that you're keeping your information as your focus. You want it to be eligible, unreadable. And you just wanted to pop and be the information that that people see. You don't want them to really be distracted by this background. So if you do do an image, maybe don't do one that so bright were so busy. And if you do a color, maybe stick with a nice deep color like that as opposed to something so bright, and if you do a bright color than just change your, um, your text color accordingly, so we'll move on from there. I'm gonna go ahead and go back to my nice Midnight Blue really liked that and Just to get out of that, we'll click back on the color box. Let's go over to hover. I'll show you how toe out a hover color again. Click on the color box and we just play around with it from there so you could hover and it turned white over and have it turned pink. Anything like that, you can play around with it if you have your own color code, a specific color that you know you're using, or you like you can add that in right up here. You can even do something subtle Where, um here, let me clear this where you just go from the color you already have and just do something a little brighter, a little darker, something like that. But I'm good with no, however, colors. I'm gonna clear that and just click back in this box to close that. Let me go back to normal and let's go down to image. I'll show you how to add an image. So go ahead and click on this and the same way we add images for every other section. You can upload your file or if you already have it in here, just click on the one you want and insert. And there we go. Nice, beautiful background image looks great. You know, there's probably a few things we could do to bring the focus in on this information. More like we can add a background color. So if you wanted to do that, you would just background overlay, and again you would click on the color box, you'd click on your color box, and then you just change it from there on, you can change the opacity. So let me close that and then just bring it like this, all right? And there we go. So it's darker, and that way we still have that beautiful image that represents our brand. Well, but we have the most important thing the information standing out and popping. So that looks good. I'm not gonna actually keep it. So I'm gonna go in and clear this, and I'm gonna go back up to background, and I'm gonna delete this image. There we go. I have my nice, beautiful blue background. I like that already. So now we can just go on to advance, and it's the same with this. Like it is with every section you can edit the margin and the padding. So again, if you see these linked or if you see this great out, you know they're linked and you just go in here and click on whichever one because it's gonna edit all of them and you just change it around. So 200 that would give us a lot of padding. Um, I don't want that much empty space, but, you know, if you did, then you could always just play around with that and get it exactly where you want. I'm gonna go back to 50. I thought that looks really nice. Gives us a little bit of padding, but, you know, not a crazy amount and the same with the margin. So you could link that. And, I mean, you could go with anything, whatever you wanted to do. So now this has more white space in between these two just kind of setting each space apart and that can, you know, become a lot like a lot of white space. So I'm gonna keep that blank like that. I like it. I want them right on top of each other. All right. And again, just keep updating your information as you go. You don't want to do all this hard work just to lose it, so update update. And now we can move on to this contact information. So if you want to edit this, change us around. All you have to do is either click in the box or click the little blue Edit pencil, right. Click it. I'm gonna click in the box, and that opens up this contact information on the side and weaken. Just edit with them so you can add a new item. And there you go. You see it, Pop, don't right here. List item. And within that we can change what it says. So change the text right here. Delete that and weaken dio Facebook. And let's see, we can also change the icon So say you don't want a Nikon. It all just trash this by clicking on the little trash camp and you see it disappeared. Now let's add a Nikon so you can either upload one that you might have saved on your computer. Maybe you had someone create for you, or we can go to the icon library and it opens up a big library. There's so many options in here. You can search by keyword, or you can just search by category section over here. Let's do keyword. We're going to Facebook. All right, there we go. There's some good Facebook options. They have all of them pretty much so. Let's just go ahead and choose this one. You click which everyone? You want an insert? There we go. Now we have our Facebook and our little Facebook icon, and they even have an option for you to link your Facebook down here. So say we want it to be able to click on this and it go right to our personal or business Facebook. Let's just try this. So I have my Facebook open here. I'm just going to copy the link and I'm gonna go back and I'm going to put the Lincoln right here, and then I'm gonna hit update. And now let's just go to preview changes. Scroll down on your page. This is actually looking beautiful. And let's see, go right here to Facebook and click it. And there we go. It opened up our Facebook. Awesome. So you go back to our element or page that we're working in and, um Let's see. I'll show you how to edit the rest of this as well. So if you want to just change, each of these will be the same as as we did with this one. Just click on it and it will open it up and we can change our phone number. So go ahead and fill out this information. Add your phone number or whatever else you might want. We'll just go through that process. So you put a phone number in here? No. All right, There we go. And we can change your icon again. Maikon library. Or, if you have one, you can upload it. Just gonna type in phone. It's so much easier than sifting through all of these. So let's just change it up. I'll choose that phone there would go. And again, you can link certain things, but we're not gonna do that for our phone number. But again, let's go down to email, and then we'll do address and we'll change all of those. Right? Got that in there? That looks good. I'm happy with little envelope. Get rid of this, right? That looks good. And we can move on to address and right here. You just want to make sure you put in an accurate address. And again you can change your icon. So I'm gonna leave this. This looks good for me. Nowhere to see will do that. Alright. And just once you're done with all of that, you've changed it around. You have exactly what you want. Hit update. All right, Perfect. Now say you've added one too many or there's a section you don't want. Like, say, I don't want this list item right here. It clicked it too many times. All you have to do is go over here to the X and click on it, and it deletes that for you. All right, so that looks good. And now I think we can move on to our mouth. Let me go. An update. What? I just did. Not that it would be a big change of if I had to, but there we go. That looks good. And go ahead and click on either the blue little edit icon Pencil were click in the map. There we go. So I clicked on the little blue icon pencil and it brought up my map. It shows location, zoom and height. So let's start with location. Go ahead and delete what I have there and put in your location if you have an address. So if you're also a brick and mortar, if you're not just a online business, then you can show your dress and you can just do that right here. So for the winery capitalized that. All right, there we go. So mine is not actually really so I just put in Gatlinburg, Tennessee, and again you can play with your zoom. You could really bring this in like that. Or you can really bring it out so they can see more. I have more work to do, old boy. All right. I'm just gonna leave that right there. I think that looks fine. Yes, sure. And you can change the height of the maps. You could make it really, really big. Or you could make a really tiny That's a little too small. No, that's a little too big. There we go like that. I think that looks good. Alright, awesome. Another thing we have this little bar in place. If you don't want that, it's just like a little space divider. If you don't want that, you can just click on it right here. Go to the pencil and right click it and go down and click delete. So I'm gonna leave it there. I think it's a cool little space divider, but you can also delete that you can edit that you could change like the wit of it. Let's say so. Let's put it back, and then you could change like the weight of it. Make it like, really thick and noticeable. You can change the color of it and just like you could play with it, make it shorter like that. Maybe just highlighting or underlining 11 section. You put a gap between these two, so again more empty space and you can change the alignment as well. All right, so I'm just gonna put it back in the center. I think that looks fine. Everything's good. And again, let's just hit update, All right, and then let's go back to our map. So again, click on the Blue Little Edit icon pencil, and we have our location in there. So now, as you see, once people view the map, you'll see your location and they consume in so find it exactly. I don't have an exact location, but if you do, you'll see it there and just zoom out and they can get directions. They can save this. They can view it as a whole page. Larger map s So this is very cool, and they can also view it like this. So we're just gonna go back to this view or like that? Better. But if you don't want this map, what you could do is you could always delete it like again. If you don't have a location that you want to show just right, click on the blue pencil and go down and delete. And that's how you would get I grabbed it. That's how you would get rid of that map. But I'm gonna keep that there, go to advance. And again, you could change your margin and you're patting. So the amount of empty space that we have between this map and these other sections or these sides. So that looks good. I think the map looks great and we have our exact location. So now all we have to do is update it and let's go down to our little message here are little Sign off message again. Either click in it or click the little blue icon pencil. I'm to click in the box and you can edit from the title box. Or you can edit from right here, Um, in the on the page. So thank you for reaching out. I will get back to you soon. You can change this. You could make it really personal and sweetened long if you want short and sweet. Thanks for reaching out. We'll get back to you soon. You know, normally responds within 24 hours. Whatever you wanted to say. Oh, thank you for reaching out. Please. We look forward. Let's see. Thanks or thank you for reaching out. We look forward to your visit. Awesome. So I think that sounds good. It's positive. It's encouraging. Come see us. Come taste our wine. All right. So once you're happy with what you have written, we can go down here and we can fix the size. We can fix the alignment, Play around with that. I like it right in the middle and leaking over to style. We can change the color, so edit your text color over here. Click on the box and you could just play around with it from there. Choose whatever you want again to make sure that you can read it. I'm gonna just go with white. That's staying consistent throughout. And once you're done, just close this out and again, You can change your font family tech shadow, all of that jazz. So let me just go ahead and choose open Sands. Awesome. Looks great. You could change the size. Whoa, They're OK. I like that. Alex. Get change. The weight, the line. High letter spacing. But this looks good to me. I'm gonna leave it like this. But here, let's just see. And you're crazy. Really? Put it together. That's gonna be hard to read. I would just do just like a good old healthy distance apart. That looks good. Uh, and then just hit update. Alright, awesome. So there we have it. You have an awesome contact information. It's given awesome contact section. It's full of information. You have your phone number, your email address address in your Facebook. And remember, we link this facebook. You can link this email address to your email page. You can link your phone number, your address if you had another page like a full contact page that you created, you could always link this stuff to that page. And, um and that's just the information you need right there. It looks great. It's nice and bold, and, um let's see So Oh, you know what? I didn't show you guys. I didn't show you how to change your icon color. So let's go back to the icons right here and you'll see right here color, hover size all that So you could change the size of your icons and make them nice and big. They're going like that. You could change the color of your icons right here, and you can do the alignment, everything like that. But I have my cranberry color pick. So that's what they're going to stay. But I just wanted to show you guys how you could edit that, because I know, I know you probably don't want that same color, you know, and you want to keep it consistent throughout, so I'm gonna update that. Alright. Awesome. And now that we're done with this awesome contact section, what I'm gonna show you how to do is create your very own logo and then I'm gonna show you how toe add that logo onto your website and up here in the browser. So, yeah, let's go ahead and get started on that. 8. Step 5: Create a Logo For Your Website: Step five, create and add a logo. We're going to be using a free service called logo maker to create our logo. Okay, so now that our website is pretty much done as far as design goes, it looks very beautiful. We have all of our information in there, and it's functioning. Great. We can finally move on to step five, create and add your own logo. So in order to do this, let's go ahead and open a new tab. And in that tab, going type in logo maker dot com without the All right, there we go. All right. This is what the page should look like. Very nice. And this is a free logo maker, and we're just going to start with two types of logos we're going to make Just our Our logo itself are little icon, and then we're gonna do a logo with our icon and the name of our business. So go ahead and just close out of this tutorial. We don't need that. I'm just gonna show you how to do this real quick. So what we're gonna do is go up here to the search bar, and whatever your business, maybe go ahead and type in a keyword that's relevant to your business. So mine is a winery, so I'm gonna type in wine, all right? And awesome. Look at that. There's so many different options for me to choose from. I mean, there must be hundreds here. So what you can do now is just again play around with this type in different keywords that are relative to your business, and then go through and find the local you want. So I'm just gonna go through here. And you know what? Actually, I really like this one. I like how the glass is half full, and it has, like, this cool little wave effect going on with the wine. So I'm going to choose that, and it just pops up on her page, and we can edit the size by clicking and dragging, and they're out. There we go. I'm actually gonna bring this down about there, and I'm gonna put it in the state or here. And you can also go over here and play around with your color. So this is your fill. And this is your saturation, so you can make it right or dark. Whatever you want to do? Just make sure that this will stand out. So this actual one we're going to do the 1st 1 we're gonna dio is just the icon itself. And that one is gonna go up here in our browser. So we want to make this one black. So go on down to the black as we want that to stand out up here against the white or gray browser bar. So he made a nice black logo. And again, you can resize that. I just bring it about somewhere in the middle. That looks good. And once you're done with that, go up here to this little save logo, floppy disk looking guy, click on it. And right here it's gonna offer a high resolution file for $19. We don't need that. We can get a really good one for free, so just say no, thank you. Download low resolution file. Click on that. And there we go. It's downloading our logo. Awesome. So we have a nice wine glass right there, and just save your logos that we make in that same folder that you've been saving all this information for your website, so it may go ahead and find mine now, and I'll add this to it. And there we go. We have our logo on our folder that we need. And now let's just minimize that, because we're gonna need it again in a second. And go ahead and close out of this little pop up right here. And now, grab your icon. Bring it over to the left hand side. Just kind of place it in the center somewhere, but on the left and go ahead and click out of it and click the little T for text and a text box is gonna pop up. Now, this is where we're gonna put in the name of our website, all right? And from here, you can edit the thickness so you could make it bold. If you want, you can tell us eyes it, whatever you want to do underlying it, we can change how big it is. And we can also change the color. Play around with all of that. Just kind of make it whatever you want. This is the one that's actually going to go on our website, not up in our browser. So again, just make sure you're putting it as a color that's going to pop against your photo or your background. But other than that, you can just kind of play around with it and do whatever you want. I recommend you keeping it consistent with colors you're using on your site, but for here, my pages kind of dark at the top. So, um, I know once I get it in the right place, what it looks like and then I'm just gonna save it is white because that's where I want mine to be. And once it actually is put on the page, you'll be able to see it. So I'll show you that whole process. Let me just go over here and gonna click out of this, and I'm gonna grab it. I'm gonna move it over, and I want to make this all kind of lineup and and look good together. So I don't want, um the contrast of a really big wine glass and then, like, really tiny text. So let me just make these even just lining up as best you can. And again, you can pick your fonts over here so you can pick your style. Decorative three d Scary dark, different things like that through Spooky. Um, just go to decorative. Oh, no, I don't want that simple in modern. All right? And then let's just look for your thought or a font. That's closest. Whatever you want rich in this is gonna look for open Sands. That's one of our phones. Awesome. There it is. So we have open sands, and we're not keeping it. This this color, we're just trying to line things up and get it exactly where we want Also change the rotation of it. So just kind of look at it, play around with it and get it exactly where you want. Yeah, I think that looks good. I like that. Let me move it up. Just a smidge. All right? Perfect. So I think that looks good. Good size. No, this is actually bothering me. All right, that looks good. Let's do that. And now we're gonna go ahead. And if yours is already the color that you need, keep it as is. I'm gonna go and change my colors because I know that once they are white or pop up on the page nicely. Once you're done, go ahead and click. Save logo. And again? No thanks. Down low rez. And there we go. That looks awesome. So again, I'm gonna add that to my saved voter. So we're going to close out a logo maker. We're done with it, and now we can add our logo. So in order to do that, we're going to make sure this page is updated that everything that we've worked on his updated and saved. And if it is, go ahead and click on the little hamburger bar. Goto exit to dashboard. Click No things on this little pop up. All right, there we go. And now we're gonna go up to the name of our website and click visit site, and from here, we're gonna go to customize. Okay, So once you're in customized, what you're gonna do is go over here to this menu bar and go toe header, click on it, and the first thing that we need to do in order to see our logo that we're going to add is get rid of this header bar up here, so we need to make it transparent. And in order to do that, let's go to general and you'll see right here style, and right now we have minimal and there are many different styles. Center. It looks like that you could do vertical and it would be on the side. Sorry about that. It would be on the side over here, but we're gonna make ours transparent, so you can't see it. It's there, but you can't see it. And there we go. Awesome. So now we can add our logo. So let's go ahead and click this little back arrow and go down to logo And right here, where it says, select logo, Go ahead and click that already. If you already have your logo in your media library, you can just click on it and hit Select, and it'll add it for you. But if not, goto upload files and you can hit select files and just pull your logo from whichever folder you have it saved and then you'll just hit select, and it will upload that file. But I have mine right here, and I'm gonna just drag it over. You can also do that if already have your folder open and then go ahead and hit select and right here, where it says crop image just go ahead and skip cropping. And there we go. We have a nice, bold, beautiful logo. Now that one is kind of big. So we can go down here where it says Max with and Max height and just kind of play around that and change it. Yeah, there we go. All right, So I have my with that to 17 and my height at 46 I think that looks really good. Nice, beautiful and bold. And, um, just make sure you're happy with all of that. Make sure it looks good. It's set where you want it to its size the way you want it. And once you're done with that, you're going to hit publish because we want to save this and update this. Okay, so now what we're going to do in order to get where we need to be in order to add this new logo, let's go ahead and go back and let's see. We'll go back again and we're gonna go up to cite identity. And from here we see that it says smoke. Mont wineries are title or tagline. Just another WORDPRESS website. We can go to just get rid of that we don't need it. And down here where it says site icon, go ahead and click Select Icon and it's gonna open up our media library again. It's gonna upload media library wherever you have this store and go ahead and grab it, drag it in or open it up. Click Select. And this one we are going to crop because it needs to fit into this a little space right here so you can move it around and get a preview of what you're looking at. So just play around with that and said it exactly where you want it. Okay, now, once you've done that, go ahead and choose crop image and there we go. We see a beautiful example of it right here. And if you go to the top of your browser bar or your tab, you'll see it right over here as well. So we have a nice wine glass. And again, let's just go up to published so we can save our progress. An awesome. There we go. You guys have made a beautiful logo, a beautiful sight icon, and we've added it to our website and to our tab and browser bar. So now we can finally move on to step six, customize our header and footer 9. Step 6: Customize Your Header and Footer: Step six customize your head or in your footer. So in this section, I'm gonna show you how to customize your head or in your footer. And I'm also gonna show you how to add a top menu. All right, so now that we have our beautiful logo and our site icon in our browser, what we can do is finally move on to step number six. Customizing are header and footer. So in this step of the tutorial, I'm going to show you how to customize your header. I'm gonna also show you how to add and customize your footer, and I'm gonna show you how to create a top menu bar over here. And I'm gonna show you how to link that menu bar to different sections of the page. So let's just dive right into this. Let's move on to our first step. We're going to start editing our header. So what we want to do is go over here to the menu bar and go to Top bar, go to general and right here, where it says enable top bar. We're just gonna uncheck that we don't want that enabled. We want to disable the top bar. And there we go, our top bars disabled. And now it's just hit back. Let's just click back again. And from here, we're gonna go down to header. We're gonna go to general and just make sure it's on transparent. We did that in the last step, so that should be fine, but go down here and choose. Header full with and uncheck header Border bottom. All right, there we go. And now you can just go to background color. I just make sure that this is clear. All right, so we have that selected and now just hit. Publish. I want to make sure we're saving all of our progress as we go. All right. And now from here, what we're going to do is I'm gonna show you how to add that top menu bar. Okay, So in order to do that, go down to menus and right here, where it says create a new meant menu. Just go and click on that. And we need a name, our menu. So let's just name it primary menu. All right? And we need a location for our menu. We know it's not gonna be on the top. Are because we disabled that. So go ahead and shoes main now. Right? And from there, just click next. And here's where we'll start to add our menu items so good and click at items and right here it will automatically open up pages for you thinking that you're gonna wanna add these up here toe link to different pages. But this is a one page website, so we're gonna link to different areas of the page. So just gonna close that one out and open up custom links from here, We're gonna put in are you are l hashtag? And then the text were a link it. So let's just start right here. And don't forget your hashtag enlistment contact. All right, then we'll just put this here. This one You do want to make capitalized this when you can leave lower case. Ah, there we go and add to menu. And let's just do it for the rest. Well, doing about us. Let's add our gallery and a menu. And let's see, we have contact about US Services Gallery And let's just do meet our experts and just add a menu and just go ahead and look at your menu. Go over it, make sure it has everything you want. Contact about a services gallery. Meet our experts. If you have different sections than Ideo, then just go ahead and create that accordingly. But once we're done with that, just look over it. Like I said, And let's just hit, Publish and you'll see right over here. Boats loading one second. So you see, right over here we have all of our sections and we even have a little search bar. So there you go. They should appear there, and now they're you know, they're beautiful. They're up here. But we need them to be able to link to something. And some of them may already be linked, since we did link the's names toe other parts of the page previously. So like, I believe if we did contact, it would go to contact. So there we go. But I think that's the only one we have linked right now. So let's go ahead and link these. Let me show you how to do that. Okay? So, in order to add jump links to all of these sections, let's just make sure that we've already published this and saved all of our progress. If so, click on this X and from here just go to edit with L a mentor. And now what we want to do is we want to just go to each section and we want to link accordingly. So let's start with services. Click on the Blue Tab. It's gonna open up this section as a whole instead of just this part. Let's go to advance and go to CSS i d. And we're gonna name this about us. Here we go and let's just do it for the rest will go to services and do the same. And let's go down to meet our experts and what did the same here and again head on down to gallery. And like I said, contacts is already connected. So go ahead and hit update cause we're done with that, And from here, we're gonna go ahead and go up to this little hamburger tab and click Exit to Dashboard. And now let's edit the style of our buttons. So go up to the name of your website click visit site and from here, go to customize. Okay, now let's just go ahead over two header right here. Perfect. And from there go to menu. And now let's go down until you see link color. So they're gray right now. You can see it's gray right here. And when we hover over them, they're blue. We want to fix that. That doesn't really go with the website that I'm building right now. If you like it, you can keep it. But if not, this is how we change that goto link color. And from here, you're just gonna add the color you want. Pick whatever you want for these. However, you I want to do that. Just make sure that it's popping against your background. So for this, I'm gonna do white. I think that looks great. It pops. It's nice and clear and close that out if you're done with that. And now let's go down to link color Hover. Open that up and this is gonna change the color that we see when we hover over each section of ours. So just go and pick a color that you like. Whatever you want. See, I'm gonna add one of my previous colors and there we go. So when you hover, you see my nice cranberry color that I have consistently throughout my website. You'll even see it in my book. Now, button right here. All right, so that looks awesome. Now, what we're gonna do is publish. We want to save all of our progress. And now we can move on to our footer. So let's just hit the back button and back again and go all the way down until you see footer bottom and right here where it says enable for your bottom. Just uncheck that we want to disable that, you know, right? Let's see from their hit back and go toe footer, widgets and let's go down to select templates and we'll see that it's not there. There's nothing in there. So we need to get this template here that we download It are footer template. You remember that at the beginning, I will need to get that here so that we can actually select it and put it on our page. So in order to do that, just click publish. We want to save all of our progress. And ah, once that's saved, they would go just hit X. And now from here, just go to the name your website and go down to dashboard. Okay, so now let's go down here to our little side menu and go all the way down to theme panel and just open it up. And if you don't see theme panel than that means that ocean extra probably didn't download like you thought it did. So if you if that's the case, then you'll need to go back to plug ins, type in ocean extra and download that and activate it. But if you do see a theme panel, you're good to go. And if you see this little pop up, just going to hit Skip it for now. All right, here we go. This is what the page should look like. And let's see now from here, we're just gonna go over here where it says theme panel and that it has these little drop down sections. And go ahead and click my library and up here where it says add new, We're gonna click, add new, and we're just gonna name this template. So I'm gonna name it Footer and again, You want to make sure that you're going over here where you see template, drop this down and go toe element or full with. We want our footer to expand the full with of our website. Otherwise, it might look a little funky. Now go ahead and go up to publish, save our work and go ahead and choose edit with L. A mentor within the footer. We're gonna build a separate page for our footer and then we'll be able to add that to our main page. So what we're gonna do, Let's go over to this little gray folder and click on it, Go up to my templates and you see right here. Ah, see, PW personal footer. Go ahead and insert that. And just like that, you should see that we have a footer right here. We have, um, the name that we can edit on our website, and then we can also edit these little social icons. So let's just start with this section right here. We're gonna edit this, go ahead and click on the blue pencil and I don't open it up over here in this little side menu. So what we need to do is go to text and we're gonna change what it says. So I'm gonna have mind say, smoke. Mont winery 2019. We just edit it. We're gonna be launching it years 2019. So we're gonna do that. 2019 smoke Mont winery. Just have your say the name of your website. Just change that. And you can also change the icon. If you want again, you do it the same way we did in the other sections. Either upload your own or go to the icon library and you can change it from there. And then here's where you can add it the spacing between your icon and your text. So I'm just gonna leave that right upon it. I think that looks fine. We go, You can change the size of your icon and, um, your name. You could make it really big. You could make it super small. Whatever you want to dio, I'm gonna leave that extra small. I think that looks good and you can change the alignment as well. I'm just gonna put that in the right over here. That way it's ah, nice and close to these. All right, so now that we're done with that part, let's just go ahead and go over here to style so you can change your typography. So again we can change our font family. We could do keep it consistent with your website. I'm gonna do the monster rot. There we go. That looks great. And you could just play around the size. You could make it really big. Really small. Um perfect. That looks great. You can change the line height. So your spacing between so all that blank space above and below that looks good. And you can also change your letters facing as well. I was gonna leave that right there and let's go and hit update. We want to make sure we're saving everything. And now let's go down a text color. So we see it's gray. We could change that. If we want. You could make it, um, consistent with the color on your website. You could just make it white. Whatever you want to dio, I'm gonna leave it Grey. It's not something that really needs to stand out or pop, so I'm just gonna keep it as that great. And you can also do a hover color if you want. You know how that works. When we scroll over it, it will change colors. We're just gonna leave it like that. I think that looks great. All right, so now we need to go over to our little icons right here and either click on the little great column or you can click on this edit pencil and this edit pencils Gonna actually open these up and you'll see them right here so we can delete them. If we don't want them, we can change amount. We can add a new item. So right here they added WordPress. It's just kind of example one. But you can go in here and change your icon and then edit accordingly. So let's just go to YouTube. Say we had a YouTube channel. What you would do here is you would go right here, and you would link your YouTube channel so you would go to open a new browser. You go to youtube dot com, you go to your channel, and then you would just highlight copy and paste that link right here and again. You can change your icons kind of look for a different one. If you want to change it up, you know, do the round ones if you want. Whatever. Now let's just close out of that, I'm actually gonna exit off of that. I don't have a YouTube, so we don't need that. And Ah, let's just go to Facebook. I don't have a Facebook for this business. It is a fake business that I'm just creating for this tutorial. So let me just go to my Facebook. I'm gonna open in a new browser window. I'm gonna go to Facebook, and I'm just gonna go ahead and copy this, and I'm gonna paste it right in right here. And then I'm just gonna hit update and the same with Instagram. Here we go. This is my instagrams. Just gonna open that up and go down here to link and add my instagram tag, and I'm gonna update that. And there we go. So we have our instagram and our Facebook buttons linked. That looks good. And once you're happy with that again, just make sure everything is updated and saved. Okay? So now that we have that foot or edited, everything looks good. Let's actually go and officially add our footer. So again, once everything is updated, go up to this little hamburger tab, exit to dashboard and go over to Ah, the name of your website and click visit site. Now from here, go to customize. All right, and then go all the way down to footer Widget. Open it up. You're down to my library and select footer. All right, so that looks good. Let's go down and check it. See, There we go. So we have our 2019 smoke want winery and our logos right here and what we're gonna dio just a lot of padding. So let's link this and change them all to zero. There we go. That looks good. We didn't need that much space. And we just want to make sure that we unchecked at container. I like it going all the way across, right? Just look at everything, make sure it looks good. Perfect. All right. And yes. Oh, that looks great. That's how you add your footer. And now we just need to test our buttons. So let's test our, ah, Facebook and our instagram button. So in order to do that, let's just publish this. Make sure everything is saved. Now gonna hit the X. Okay, so now we're on our main page. Let's go all the way down to that footer and let's just test these buttons so hit command and click on them so we can open them in a new tab. All right, and there we have. It looks like Facebook and Instagram have linked perfect. All right, so let's go back to our page and let's just go ahead and go to edit with Element. Or we can close out of our Instagram and our Facebook or whatever else we might have linked and checked. And let's just go down again. We just want to confirm that everything looks good in here and there we go. We have it. We have our side icons. We have our footer down here for your name and everything looks great. We're done with customizing or header and footer. You guys did an awesome job with this step. So now we get to move on to our next step, which is Step seven editing for mobile and tablet 10. Step 7: Edit Your Website for Mobile and Tablet: Step seven editor website for mobile and tablet, 52% of all online traffic is from a mobile phone. That's a lot of people. Therefore we need to optimize our website for both mobile and tablet. All right, so now that our site is looking beautiful, it's functioning well. Everything links where it needs to. We have our top menu. We have our header. We have our footer. We're almost done. We're almost at the end of the site where we can publish it and send it out for the world to see. But first we need to do Step seven, which is editing our site for mobile and tablet. So 52% of global online traffic is from a mobile phone. So that's a lot of people. It's really important that we not only have a site that looks good on our laptop and desktop, but we wanted to function well and look beautiful on tablet and mobile as well. So what we need to do is we need to go in and edit, according So let me show you how to do that. All right, so let's just stay in this edit with element or section but were to go down here to this little gray tab, and you're gonna go over here to where it says pre. I'm sorry, Responsive mode. So click on that. It looks like a little computer. And let's just start with tablet. So click on the tablet, and right here you'll see a full view of exactly what your site will look like on tablet. So let's scroll down and just take a look and make sure that everything lines up. It looks good. We're pleased with it. Looking good looking good. So far, so good. I'm really happy with it. You all right? Uh, that looks awesome. Okay, so this looks great. I think we're fine. There's really nothing that we need to edit in this section. I did notice that there is a little extra section here, and we don't need that. So let's go ahead and delete that. I'm not sure what that was or why it was there. All right, so there we go. We had one edit issue. There was, like, an extra little structure here for some reason. But if you did need to edit, say something was wrong within this, what you'd want to do is whatever section it might be. So right here, in my opinion, you know, these look a little squished. I feel like they could maybe not be sitting on each other as much. So let me just edit that so I can show you how to do it in here. First of all, you want to make sure right here where it says alignment. You want to make sure that your clicked on the right, um, view. So make sure you're actually in tablet because if not, is gonna edit it for the whole thing. Onley wanting to edit in tablet. So, yes, we're in tablet now go up to style and let's go typography. And then we're just gonna go right here to line height, and we're just gonna adjust it just a little bit. So this is 0.9. I'm gonna dio 0.9. All right, Let's just leave that at 0.9. I think that looks really good. It's a little spaced out more and then other than that, I think everything looks great. So again, hit update. I want to make sure we're saving our progress. Don't want to lose any of that work and let's go back to responsive mode and click on Mobile. Now let's do some editing for Mobile. All right, so right here we see a big issue right away. It says Smoke mo winery. So? So let's change this. We need to goto edit pencil and again make sure that you're editing in the right Ah, view. So we're editing in Mobile to go to style. Go to typography and let's just fix this a little bit fixed. Thea the size of the font. I think that looks good. It's not kind of it's not really running off the page. Looks good. It's all in one line. Very, very beautiful. So I'm happy with that. Let's continue down the page and make sure the rest looks good. Perfect. Perfect would just go just Oh, no, This right here is not gorgeous. So click on the blue pencil icon and again go to style typography and let's just not the size but the line height. Let's fix that. You know what? That looks great right there. We have at a 0.9. That seems to be, um, the golden number. So let's just stick with the 0.9 for the line height for these sections, as we add it. So let's go on down and continue reviewing our mobile site. This is looking great. There have been a couple little things here in there that we've had to edit. But other than that, it's looking great. Or videos functioning. Who? These pictures are gorgeous. Very pretty. And here's our contact information. Map looks good. Everything looks good. The notes nice and beautiful. We have our foot or down here. Let's see. All right. Yes. So everything looks great. So now again, we can update this and just go over here to responsive mode and go back to desktop. Okay, So once we've added everything and desktop tablet and mobile, what we want to do is just go through, look at your site, finalize everything, make sure it looks the way you want. It's word it the way that you want it to be. Your pictures look great, because once we're done with this, we're gonna move on to Step eight, which is publishing our website. Final steps. So exciting. This is what we've all been waiting for. You guys have worked so hard on this site, and now you get to share it with the world. So let's just go through, review everything, make sure there's no errors, no typos. Oh, that good stuff. Look, I see one right here. Boom. Alright, Fixed that. Right? Let's keep going. Looking good. Other than that one issue, I think it looked good. Boom! Okay, we're done. 11. Step 8: Publish Your Website: Step eight, publish your website. This is where we get to send our website out. To go live for the entire world to see, to shop, to explore whatever we offer them. They now get to enjoy it. All right, you guys. So like I said, this website looks absolutely beautiful. We've checked it. We've confirmed that there aren't any typos that everything's linking that. It looks good. Ah, in every window. And now we can finally move on to step eight publishing our website. So in order to do this, let's just make sure everything is updated and go to this little hamburger tab Goto exit to dashboard. All right, now from here. What you want to go Dio is Just make sure you're on the dashboard home, not pages or anything like that. And this next part is kind of tricky guys to really pay attention right here, where? It says your site is currently displaying a coming soon page. Once you're ready to launch your site, click here. 123 All right. And there we go. Congratulations. Your site is now live. So let's just click right here to view it. And there we have it Let's just scroll up and down. Look at our beautiful page. Be proud of the work that we made and accomplished. Everything is functioning. Everything looks great. Our video works. Our image galleries just absolutely gorgeous. You could scroll through these pictures. Look at him as a whole. We have our site icons in our footer that conveniently connect to our social media accounts . And in our top menu bar, all of our sections link just how they're supposed to. This looks great in mobile. This looks great on tablet. And this looks great on desktop and laptop. So that was how to create a wordpress website in one hour or less. I really hope you guys enjoyed this tutorial. I hope you found it helpful. And I hope you're proud of the work you did because you did a really good job. So thank you guys for tuning in. I hope you have a good day and check us out in our next video. 12. Thank You For Watching!: this was how to build a website in two hours or less. I hope you all enjoyed the class and found it helpful. Thank you all so much for joining me. Stay tuned for the next video.