I'm gonna show you how to build a WordPress website in less than an hour. We're gonna get this done in five simple steps. First, I'm gonna help you get your domain name and web hosting so that your website is live on the Internet. Then I'm gonna have you download a complete website template to save you time, at least a couple of hours, of building a website completely from scratch.
Don't worry, it's completely free. Then I'll show you how to customize your new website to look any way you want and we're gonna be using a free page builder to do that as well. After that, we're going to configure your header and footer, and I'll also show you how to build a logo for free for your website as well.
Finally, step number five is to check your mobile responsiveness so that your website looks good on the desktop view as well as the mobile view. Let's not waste any more time. Step number one is getting your domain name and signing up for your web hosting. If there's two essential parts to building a website, it would be getting a domain name and signing up for your web hosting.
A domain name is just the address to your website, and it's how people are usually going to search for your website. So something like yourwebsite.com. And web hosting is just renting space on a server that's connected to the internet.
It's just like getting a brand new phone number and then signing up for service with Verizon or T-Mobile. You have to do those two things to be able to make phone calls. Now, if you don't know who to go with, just take my word for it. I trust Hostinger with all of my websites for my personal projects and also with my clients.
And I've never had any issues with them. They do a great job with their uptime, their security, and their speed. It's all excellent. Not to mention, they're one of the most affordable hosting providers out there. I'll even make this easy for you.
Go ahead and click on the first link in the description or you can go to creativeprowebsite.com Hostinger and it'll take you to a page that looks like this and from here You'll see all of the available hosting plans for you If you just scroll on down now I always recommend the business hosting plan because you get a ton of amazing features for the low monthly price And if you want to actually scroll down and look at all the features you totally can Things like you see the 100 websites that you get included 200 gigabytes as opposed to the 100 gigabytes of the premium plan Which is up here Included with every single plan you do have the unlimited free SSL certificate as well as unlimited bandwidth Which is really nice, but you guys can kind of compare things down here one thing that I also really like and it's under WordPress It's the WordPress AI tool. There it is. So WordPress AI tools right down here at the bottom This lets you basically generate blog posts and word content like chat GPT but built into your website inside of WordPress So you don't have to jump between tabs anytime you want to use chat GPT So anyways, I always recommend the business plan. So that's what we're gonna choose Okay, so next I get to choose my period right up here on top.
And so I always go with the 12 months because your domain registration is for one year. So you might as well make your hosting also for one year. This is basically just choosing your period of how often you make payments.
You're going to pay for the entire period up front. So if I choose 12 months, it comes out to around $4.49 per month. But I'm paying for all of it up front. So if you scroll down, you'll see that I'm paying, you know, $59. Well, technically it should be $167, but you're getting a massive discount right now, which is pretty sweet.
But you see what I mean. So I usually do the 12 months just so that my domain registration and my hosting just kind of line up So every every year I just pay for both as opposed to having domain registration every year and then doing 48 months and you know It's different. So that's just what I recommend for you guys.
Alright, so when you choose your period we can scroll on down We're gonna go ahead and create an account So you put in your email and password and then you scroll on down and we have our payment information And so this is where you're going to put in your credit card info. So whatever card you're going to use to pay for your business website, that's what you're going to use here. Anyways, I'm going to go ahead and enter in all of my credit card information as well as just put in my email and password and I'll see you guys on the next screen. All right.
So once you're done putting in your payment information, you're going to be met with this screen right here. And so this is their hosting setup. This is where you're going to set up your hosting account as well as your domain, link them together and install WordPress all at the same time. So we're going to click on create a website.
Now if you guys are migrating a website from somewhere else, then that's what you would click on and you're gonna add your your WordPress information so that they can log in and migrate your website for you. But we're gonna create a new website right here. Next, it's gonna ask if you want to use WordPress AI or if you want to use the Hostinger website builder. But we're building a WordPress website today. So that's what I'm gonna select.
Click on create it with WordPress and then we get to enter in our admin details. So this is where you're gonna create your username and password, your admin account to edit your website every single time. So Just make sure you write this down or remember it.
There we go. And then click on next. And then next, it's going to ask you what type of website do you want to build? Do you want to build an online store, blog, and all this stuff? It's basically just going to kind of help tailor the experience towards whatever website you're building.
So I'm just going to select a business card, like an online business card, and then we're going to move on. So let's click on next. It's going to ask if you want to use any prebuilt themes or if you want to use a standard theme. For this one, you can literally click skip on the next few.
So we're going to skip this one. Do you want to select any pre-selected plugins? We're just going to skip. I'm going to show you how to install all the plugins that you guys need. And then lastly, it's going to ask if you want any AI content written, which we don't need that either.
So we're going to say skip. And then what do you want your domain name to be for this website? So this is the free domain name that you get included with your web hosting plan. So that's what we're going to put in right here.
So let's go ahead and try something like this. Capw.com so we'll do one hour website capw for creative pro website.com. Okay, perfect So once you find a domain name that's available You're just gonna click on it right here and you'll see that it said zero dollars because it's included So now we have our domain name. We're gonna click on next.
Okay, perfect So last just click on finish registration and you should be done and it's gonna take a second Okay So lastly it's gonna ask where your target audience target audience is gonna be and this is for hosting errs free CDN service Which that's a content delivery network Basically, it's faster to have your website on servers that are closest to your audience so that you know It loads from a server that's close to them rather than coming from like completely across the ocean So this is for their CDN service. I'm over here in Texas. So I'm gonna select Arizona Just basically pick the one that's closest to you or your target audience And so if I'm a brick-and-mortar yoga studio, obviously I want to pick the one that's closest to my physical location of my store Right, so that's where I would select Arizona or that zone which is closest to Texas for me So with that being done, I can go ahead and click on next and it's going to install WordPress. Okay, so once the loading is done, normally what it's going to do is take you to a screen where there's only two buttons on screen.
One of them is going to take you to your WordPress dashboard and you'll know because it has this little W WordPress icon right here where my mouse is. And then the other one is going to ask if you want to go to like the website backend or the H panel or to your dashboard or something like that. Whatever that is, it'll take you to this screen right here.
For some reason mine took me directly to this screen. So if that happened to you and you still want to get to your WordPress dashboard, it's super easy. You literally just click on WP right here, or excuse me, it doesn't say WP, but that's the logo for WordPress.
It's the admin panel. You click on this and it's going to redirect you to your website. Now you'll notice up here that my domain name is not going to be accessible for about three minutes.
That's obviously an estimate. What's happening is my website is propagating. And so what propagation means is Hostinger is taking the new domain name.
that I just purchased and it's sending it to every server in the entire world and it's letting everybody know that I just purchased it and that it's live. And so that propagation time of sending out the notification to everyone all around the internet so that the whole internet is updated with my new domain, that whole process can take anywhere from a few minutes, like three minutes, to an entire hour to up to like a whole day. I've never really seen it go anywhere past an entire day, but it can take like up to a day and sometimes you're like, okay, well, I guess I'm not building my website till tomorrow.
And that's perfectly fine. Hostinger has a really nice feature where they save a temporary version of your website automatically. So right now I can start editing my website and then as soon as my domain name is available, it'll automatically just migrate all the content that we've been building onto my domain name.
So they basically let you edit your website before it's even ready, which is cool because right now they're making it ready, so to speak. So that being the case, we can just click on WP admin panel right here. And what that's gonna do is you'll see it's gonna take me to a website preview.
which is the same thing as like that saved temporary version of my website. And then as soon as my domain name is done propagating, it'll just take all that content and attach it directly to my domain, which is really nice. So of course, it's going to say the site can't be reached.
It's going to reload for a second. And there we go. Sometimes it's a little buggy.
It happens. But no matter what, as long as you get to this screen right here, this is your WordPress dashboard. You're good to go.
Now, right now, you're looking at the Hostinger tab. That's why it looks a little different in case you actually are familiar with what Hostinger looks like. So if you want to go to your WordPress dashboard, just click on dashboard.
right here and it'll take you to the dashboard. We have our domain name, our hosting, and WordPress all installed ready to go. So we can start building.
All right. So now that you have your domain name and your web hosting set up, as well as WordPress installed on your website, we can now download a completely free website template that is complete with a homepage, an about page, and a contact page. It's really easy to do.
So let's go ahead and knock that out. So from your WordPress dashboard, we're going to go over to the plugins tab, hover your mouse over it, and then we're going to click on add new plugin right here. The reason I always hover my mouse over it so that I can click on something else is because if you just click on plugins For example, you'll have to click on add new so I just saved myself a step by hovering and then clicking on add new anyways So now we're on the add new plugins tab and this is kind of like the app store for your phone Basically, this is where we can download another app onto our website, but we call them plugins So what we're gonna do is go over to the search bar in the top right corner and search for starter templates Which I don't even have to type because I guess I download it so much.
It's in my recommended. That's funny. So from here We see starter templates.
It's got this big S. That's the one we're going to download. So I'm going to click on install now. Let it install.
Well, if it wants to, there we go. So we're going to install now. And then you also click on activate right afterwards, just like that. So now it's active on your website because you can download plugins and have them deactivated.
And then whenever you want activate them, don't ask me why, but you can. So that's that. So now we can go back to our WordPress dashboard.
Refresh the page doesn't really matter what tab you go to and so from here now we can go to the appearance tab and you'll See starter templates, which is the plug-in we just downloaded. It's appearing right here So I'm gonna open it on a new tab just like this You'll also see that a massive banner appeared on my dashboard and I totally could have just clicked on let's get started But I like to be difficult So from here, we've got the AI builder and then classic AI is gonna take you to a different website wind up or zip WP and you have to create an account do all that stuff. So we're not gonna do that We're just gonna download a basic template right here now one of the biggest mistakes people always do is they forget to change block editor right up here to Elementor.
So we're going to click on Elementor and we're going to use an Elementor template because we're going to use Elementor to build our website, right? So Elementor is the free page builder plugin that I was talking about at the intro of the video. Completely free, best in the world, or at least in my opinion, and half the world agrees with me anyways. But from here, you can scroll on down and look through all the templates.
They have a ton of them. Some of them are premium. Some of them are free.
Okay. We're going to be using this one right here called Earth because it's a really simple, basic template. You click on it and you can view the template live on the right hand side when it decides to load.
There we go. So you got a live preview of the website and then over here you can make changes. You'll notice I can change the color palette So now it's blue, right?
There's the blue button right there or I could change it to pink if I wanted to or red. Let's just do red There we go. So red i'm going to stick to blue so we're going to do that You can change the font right here, but i'm just going to leave it as jost robato I don't know if i'm pronouncing that right or not But that's what i'm going to stick to other than that you can go down here and do poppin's lato I really like lato.
I think it's a really basic looking clean font. I really like that one. Roboto is really good too. It's just whatever you guys want to do, obviously.
I'm going to stick to the default here. And then if you have a logo ready to go, you can upload it right here, but I'm not going to do it right now because I'm going to show you guys later on in step four, how to build your own logo for free, which I already have built it off camera, but that's when I'll show you guys how to upload it. But if you had it ready, you can just click here and select files from your computer and you can upload it as well.
That's how you can do it. So next click on continue. It's going to ask if you want to install any other features. I'm just going to say skip this step. And then from here, you don't have to put your information in.
They're just asking you, but it's not necessary. I unchecked this box because I just don't care. Nonsensitive data. That's up to you guys if you want to. And then click on submit and build my website.
And then it's going to take a couple minutes to load. I'm already at 7%, but sometimes it gets stuck here. Sometimes it moves. So we'll let this thing load and I'll see you guys in just a second. All right.
So now it says, congratulations, your template has been successfully downloaded. So now you can view your website or just go back to your WordPress dashboard. Let's go ahead and click on view your site. And so now you'll see, ah, and look, my SSL finished installing because now you'll see that it says my connection is secure.
So if I go back to my SSL certificate and I refresh this page, I bet you the domain status is also good because it's been about 10 minutes since I did this, obviously with, you know, movie magic and editing and everything. But if we look at the SSL, it's been installed. So I just wanted to point that out. It's taking too long to load.
So we'll come back to that. But anyways, you'll see that I have that secure connection and my domain name doesn't have like any preview or anything in there. So we're good to go. But now from our starter templates whenever you click on view your website anytime someone goes to our new domain name So one our website cap wcom it takes them to this the website template that we downloaded which it doesn't look great But of course in the next step we're gonna be customizing it So don't worry, but so now that's what it looks like So now we can just close out of these tabs and go back to our WordPress dashboard if however You didn't open it up on a new tab like I did you can just click on visit dashboard or from this screen Hover your mouse over your website name And then you can click on dashboard right here.
Regardless, it's going to all three take you back to the WordPress dashboard. And yeah, just so you guys see the SSL certificate, it is active now. So we're good to go. So I'm just going to go back to my WordPress dashboard and we're ready for the next step. All right.
So now it's time to get those creative juices flowing. We're going to be customizing your website to look exactly the way you want it to. I'm going to start by giving you a basic overview of how Elementor works, which is the free page builder that we're going to be using.
It's also the most popular on the internet. So you're in good hands. And then after I show you how things work, we're going to jump in and completely overhaul this template for the business that I'm setting up. We're going to pretend that I am a yoga studio and I'm building this website for my business.
I've already got my website text all written out on a document, as well as I've already downloaded a bunch of free images that I can use for the website. When you build a website, it's always recommended to have all of your text and images ready to go so that the web design process is really easy and fun. So if you need to pause this video and go type out some content that you're going to put on your website.
You don't have to but it's just my recommendation. Alright, so now that we have all of our information ready to go like our text and Our images let's go ahead and jump right back into Elementor Okay, so anytime you want to build on your website and open up Elementor There's two ways of getting there You can either go to the pages tab like this and then you can go to whichever page you want to edit like the home page and then click on edit with Elementor or you can open up your website on a new tab by clicking on your website name and Then from here, you'll see edit with Elementor in the top admin bar So there's two ways of editing your website. We're going to click on Edit with Elementor. Alright guys, so let's go over a basic overview of how Elementor works and then we'll get right into customizing your website.
So you've got your viewport over here on the right hand side. This is where you see the entire website where I'm scrolling and then on the left hand side we've got all the widgets that are available. You'll see the pro version is over here and they all have a lock icon.
I'm just gonna minimize the pro version and you have all these general widgets and then also the main widgets. So that's more than you're gonna need. So this is the free version of Elementor by the way. So that's over here on the left hand side is all the widgets. If I want to drag one, it's a drag and drop.
you just drag an image. The little purple shows where it's going to be. So let's put it in the middle. And now I have a picture and I can click here and oops, let's not upload one, but let's just use one from the library that's already installed.
We'll just pick this one as a random image. And so you'll see, that's how I can put an image onto my website, right? Anytime you want to delete it, just right click on it and say delete.
And now that image is gone. So that's how you can drag widgets into your website, right? If I want a heading text, you drag it in.
and there's my new text. Anytime you want to type on your website, literally just click there and you can start typing directly on screen. It makes it super easy to just build widgets and start typing.
So I'm going to right click and delete that one. Also don't ask me why, but my microphone is right in the way of my monitor, but that's just how I decide to record when I'm talking to you guys. So I'm over, you'll see me do this.
Oh, what does it say? And that's just because I have to move around my microphone anyways, you know, you live and learn, but so now that we understand the viewport as well as the basics of the widgets on the side. Let's talk about how you can actually edit widgets that are already there.
So anytime you want to edit one Well, actually first let's talk about the layout of Elementor. So you've got containers because Elementor went from Sections columns and widgets to now it talks about containers, which is so much easier to understand So everything that you put on your website is inside of a container, right? And over here on the left-hand side You'll see the container I can drag one in and put a container inside It's a blank space where now I have a plus button to put a widget. That's the that's the most basic way I can explain it so This entire section is inside of a container.
So if I hover my six dots over this little pink thing right here It says edit container and you'll notice that whenever I hover my mouse into this section You see that little pink area highlights all the way around this area It's because that's a section but it's called a container scroll on down this whole area. You see the pink square It's a lot easier to see this whole pink area. That's another section. That's like my services section This is an about section. You see this big open square all the way around And then this is like a call to action section.
The hero section is just really big. It takes up the full screen. So that's why it's kind of hard to see the pink down there.
So inside of this main section, I can put as many containers as I want. And then inside those containers, I can put as many widgets. Okay.
That's kind of how it works. So anytime you want to edit something, you can just right click on it and say edit. So this is a heading widget. So I can just right click and say edit the heading.
If I want to edit the container that's holding all of this, you can just right click and say edit the container. Or if I want to edit this button, right click, edit button. It's really easy.
And then anytime you're editing something, the left-hand side opens up with all the menus. Okay. So the way that I plan on doing this is just going section by section, and we're going to go from top all the way to the bottom of the website.
Okay. So first we're looking at the hero section and the hero section is always the top first prominent section on your website. Don't ask me why they call it the hero section. I have no idea.
There's probably a reason I don't care to know. Okay. So the hero section is the first one. Then we've got a services section and we have an about section and then a call to action section.
Now we're going to be adding additional sections as well, but we'll just go top to bottom. So first the hero section. Okay, so we're going to start with this hero section. The first thing I'm going to do is go ahead and make sure I have my website copy up, which I do.
So this is the website copy that I'm going to be using. I typed all this out before, you know, starting the video. So for the hero section, I want it to say a subtitle of modern classes for beginners, yoga studios, the main text.
And then I want it to say, find your inner light, blah, blah, blah. That's like a little text blurb. So let's go and include that. Actually, hang on. Is it double tap two fingers?
There we go. Pull that up and we'll minimize it so I can always just jump back to it from my menu. So that's what we're going to do. Okay, so the first thing we're going to do is I'm actually going to drag this one below just because it's bigger and I'm too lazy to change it. Endless potential, we're going to change this to be the text that's on my website and it says modern classes for beginners.
So I can just copy this, control C and we'll minimize, control V. So modern classes for beginners. Let's go to the style tab. and we're going to change the text color, but our theme colors aren't necessarily correct. There's one theme color that I need to make a change to. So if you didn't open up your website on a new tab, like I did, you won't have a dashboard to jump back to, which I always recommend so I can go back and I don't have to exit out of Elementor.
If you didn't do that, click on update to save your work in the bottom left corner. And that publishes your work live on the internet, but it's like saving your work. From there, you're gonna have to click on the little hamburger icon, say exit. Where do you want to exit to?
And you're going to say to the WordPress dashboard, apply. Then it'll take you back to the WordPress dashboard say leave now you're here, but that's a hassle I like having a dashboard to come back to so I always right-click and then I say open on a new tab And so now I have Elementor open on one page and I have my dashboard on another the reason for that is we have to Jump back into the appearance tab and click on customize right here On a new tab, we're going to make one change to the global colors really fast. Okay, so from here, go to global on the left hand side, and then click on colors. And we're going to set up our global color palette.
I need a pink color, because that's the pink that I'm going to be using for the entire website. So let's go like this, maybe a little bit more on the pink saturated. That's good. And then for links and everything, let's change this to go to black. Actually, wait, hang on, we'll change it to black for the normal and then for the hover color, we'll change it to pink.
Okay. So for now, that's what it's going to look like. And then for the accent color, I mean, you can just leave it as pink if you want.
I'll explain what those mean later. Don't worry. Just click on publish in the top left corner right there.
And then once you're done clicking on publish, we can close out. Now that color palette that we just changed, if you click on refresh right now, because we have to refresh Elementor so that it picks up the current information, the change that we just made. Now, whenever we click on, for example, I mean, the text right here, go to the style tab. and you click on the little globe icon right here, you're using your global color and you'll see there's the pink that I just used. So now we have pink and blue and that's going to be the color scheme for my website.
But of course we actually want this text to be white, so I'm just going to click on theme color six and now it's white. Before we make any more changes, because it's going to be really hard to see the text on this bright background, let's right click out here in the ether and click on edit container, okay? Or you can click on the six dots, it's the same thing. We're changing the background color and picture.
Go to the style tab, the image is what we're going to change first. I'm going to upload my files. Click on select files and I can upload from my computer.
So I'm assuming that you guys already have your own pictures for your business, right? These are pictures that I found online for free for a yoga studio because I'm pretending that I own a yoga studio. So I'm just going to highlight all of my images, not including my website copy and click on open. I'm just going to install them all at the same time and it'll take a second.
I'd recommend you just install all your pictures as well. Of course, it'll take a second. Now, if you guys don't have pictures ready to install and you need some free pictures. Go to a website on a new tab called unsplash.com.
Yeah, we're gonna have to do it. Unsplash.com. This is a website where you can download, I mean, like millions of free images, high resolution, whatever you want.
I mean, you could search for like mountains and you're gonna see a ton of mountain pictures. And then you've got some filters over here so you can go for landscape or portrait. And then if you're getting tired of all these paid ads, this is Unsplash Plus, you have to pay for these. You can say, I only want free images. So these are all free images that are royalty free that you don't have to make any credit or anything like that You can put these on your website if you need to so that's kind of nice to have All right, so now all my images are done.
So we're editing the hero section. So I want this to be my hero image I even have it titled as hero image. All of these are titled where they're gonna go.
This is my call to action banner This is my services 3 so you can title your images inside of your computer It's up to you click on select and now my background changes So again, if you want to change the background you say edit container style tab Click on image and you can pick whatever you want in the background. It's still hard to see my text. So what we're going to do is go to a background overlay. And then from here, I'm going to choose gradient. And I'm going to choose my first global color.
And then I'll choose my second global color, pink and blue. And then from here, I can change the opacity to be like completely... What's the word?
Is it opaque? Yeah, so opaque and then transparent, right? So I'm going to go somewhere like at like 60 or 50. And then what we're going to do is I'm going to add a little bit more pink. I can drag this all the way over. Now it's all pink.
I could also drag them both together and you'll you know, you don't even see like a line anymore So you can decide how much of each color you want I'm going to kind of drag a little bit more pink just a little bit because the blue is overtaking it And then I can change the angle so i'm going to go this way and have pink in the top Right corner. So something like this perfect Okay, so now I can at least see what i'm working with because I have a little bit more of a darker background That's what I wanted. Let's go and make this look better.
Okay, so now we're going to go back into editing the widgets I'm going to click on this spacer that's up here. If you click on this square, it's a widget where you can just increase space. I don't know why whoever created this template decided to put a spacer.
They're pointless. I'm going to delete it. Gone.
Next, we're going to edit the container again, the six dots. I'm going to go over to the layout tab and I can justify my content, but we're going to align the items to the center and it automatically centers my stuff right there. So align items right here.
Centers my stuff. It's perfect. That's what you want to do. You don't want to use a spacer and then kind of guesstimate where it's going to be. Just automatically center This is better web design practice.
Okay, so from here, let's click on our text and finish editing it. We're gonna go typography I'm gonna reduce the size Something like this then I'm gonna go to the advanced tab Unlink the values and add some padding to the bottom and you can click on the word and drag and you can decide how much You want by dragging your mouse. I think that looks good right there next click on earth and we're gonna change it to I think It says what did I do yoga studio or something like that yoga studio. So let's go ahead and do that real fast So I type out the words, then I go to the style tab, change the color to theme color six, so it's white. And I don't think I need to change anything else.
Actually, I think that looks pretty good. You can increase the size a little bit if you wanted to, typography. It's all based on your preferences.
Maybe something like this. Good. Lastly, click on the Rubik's Cube icon right here in the top right of your menu. You see where my mouse is up here? And then we're gonna add a text editor widget right underneath the yoga studio.
And then from here, the gray is bothering me, so let's go to the style tab and change the color to theme color 6 because that's my white color. We're gonna center the text, go to the advanced tab, and then we're gonna unlink the values together. I want this text to be centered slightly underneath yoga.
Okay, so we're gonna go to the right and to the left. I'm gonna increase until I see it kind of where I want there on the right hand side right about there is good So 271 let's go 270 and I'm just gonna put 270 on this side. Perfect. That's how you do it You just kind of eyeball it.
And so now I've got my all of it in a line down to the button I wanted kind of like this this V look for the graphic design Alright, so there's my text and let's go copy it from my text that I have from my website So this right here oops all the way to there ctrl C minus once you're editing your text you go to the content tab and we can paste it. Controller command V. There we go. I want a little bit of space between my header and the text. So you can click on the header, go to the advanced tab.
Same thing that we did to this text. We're going to add a little bit of padding to the bottom. That way it kind of matches the space in between the button and that.
I think it looks pretty good. I like that a lot. So we've got all of our texts in here.
The last thing is to edit the button. I don't know why this specific template isn't using the global color palette for the button. Sometimes it does, sometimes it doesn't.
We're going to edit the global color palette. for Elementor. It's separate from Astra.
And don't worry, you don't have to know what that means, just follow along with me. Click on update to save your work in the bottom left. From here, we're going to click on the hamburger icon and click on site settings.
Okay. From here, we've got our global buttons. Click on that. And that's what's editing or what's deciding what this button looks like.
So we're going to choose to make this button look completely different. First, let's change the background color to be our theme color six. So it's white, it's the back.
And then we'll change the text color to be like this pink color. So we'll say the theme color one. I know it's not changing the button and that's because there's a caching issue.
It happened to me the other day. I don't know why it'll change halfway through me editing this website. It's the weirdest thing.
When I say a caching issue, caching is when your browser saves versions of your website to your computer. So as I'm making changes to my server side, my display isn't changing because it has an old version of my website. It's a whole thing. Don't worry. As a beginner, you don't have to know what that means.
It's just sometimes caching can get in your way. So refreshing your page or emptying your cache can help with that. We'll do that later.
But for right now it's going to be white with pink text and then we'll increase the border radius to like 30 So let's just type in 30 and it's gonna round the button just like that from here We can go to the hover animation change the background color to the pink and the text color to white just like that done So now whenever you hover see how it works on the hover But for some reason the default the normal is still showing green even though I have a white set as my background color So ignore it for now. It's a caching problem It'll go away later or maybe off camera. I'll just do a hard cache reload, but we'll do that in a minute So you'll notice that I've set up my global button So now whenever you hover it's supposed to go pink and then white and so that's what it does a pink background with a white Text color so whatever we're just gonna go to the style tab hover We'll change it to be theme color pink and theme color six for the text color update our work So now it should do the whole yeah, see it's being buggy because the oh, wait. No, that's border color My bad reset that to clear and again the way I do that is click on the little reset button right here reset to clear, click on the classic, it's the background type, and then change that color to pink. And so now there we go.
It happens to the best of us. So now when you hover, it's going to be pink. That's the style of button I wanted. So click on updates.
And now we're just going to copy that over. So we're going to say copy paste style. So now it's the same thing.
Okay, cool. Update to save our work. Our hero section looks fantastic. I don't think there's any other changes that I'm going to make to my hero section. Let me go and just make sure I'm looking like my preview.
And I do. So we're good to go. Next we're gonna move on down to a small social proof section But before we can do that, you'll notice that this line you see this pink line It's not up against my hero section and it's because they did something really weird when they built this template It's either did they add padding to the top? Yeah, they did they added padding to the top or its margin to the top and bottom of this section clear this out So you link the values together and then just clear it out.
And so now the line is up against it That's what I wanted. Okay It was bothering me that it wasn't there. And then if you want, you can add some padding to the top and bottom if you really want to. So you can do something like a hundred or like 80. Let's do like 80. 80 looks good. And then we'll go to the bottom.
That's what they wanted was space in between the widget and the edge of the section, but they did it in a weird way by putting margin and then it moved around my box and I didn't want that. Okay. So now that's the case.
From here, we can click on the plus button right here. We're going to add a section in between those two sections. You click on the folder icon and we're going to go, Oh, sorry, not the folder icon.
Click on the plus button and we're gonna click on the S for starter templates I love starter templates as a plug-in because it also gives you a ton of free blocks that you can use So click on blocks and then from here. We're gonna go to statistics Statistics, that's what it is. We can filter by color and go light because it's a light colored website. This one right here This is the one I want to use you click on it and you can see what it looks like and then you can Say import and it's gonna automatically insert that into your website. Boom done so we can click on that little X button So now we have this little banner right here I'm gonna edit the section go to the advanced tab and I'm gonna reduce the size of it because my goodness they have so much Space and they don't need it.
Let's do something like this. So let's go with 50. There we go I want the banner a little bit smaller We'll go to the style tab and I want the background color to be theme color 7. Is that too? Yeah, you know what? Let's change that not theme color 7 click on the actual and let's just uh go a little bit off white kind of like that So f1 f1 f1, it's kind of what you're looking for.
Now, let's change the text color as well as the icon So we'll click on it go to the style tab of the widget We can go to icon change it to the theme color of pink and then we can go to the content And we can change the text color of the number right here. So you see how it's blue Click on the global and you can change it to pink if you want. Actually, I kind of like the pink. I was going to say you could change it to gray like this text, but it's up to you.
Once you're done, right click on it, say copy, paste the style. So now it's already matching the theme of my website. It's like that pink color, right?
Looks good. Now, if you guys want to change these, I'm not going to because I'm just pretending like I have, as a yoga studio, I've completed 300 projects and I have a bunch of happy customers. You can change this to say whatever you want.
So you can click on it and go over to the content tab because we're changing the content of the widget. You can pick the icon right here. So for example, let me just give you one. So instead of that, we can just say, let's say five locations.
Let's just say I have five different locations of yoga studios. So we can change the number. You see 352, 352, change it to five and it changes to five. We can change projects to locations.
Let's say open locations. I don't know, something like that. And then we can change the icon to be like a building, right?
Something like that. Insert. So now they say we have five locations, 120 plus happy customers.
Awards received and years in service, right? Once we're done click on update to save your work Okay So now that we have a social proof section or kind of like a feature section it can be whatever you want and we have Our hero it's good to go scroll on down and now we're gonna touch the services section Okay So the services section what we're gonna do is replace these pictures with pictures that are relevant or applicable to the service that we're providing and then we'll just change the little blurb down here and Actually, I can I can copy paste the blurbs right now because I have my text right here. So for the services section, we've got yoga classes.
And then here's the text that goes below it. Control C, yoga classes. Click on the typing, the text right here.
Control or command V. And that's how I paste it, right? So I've already changed one. Let's change the other two. I'm going a little fast, but again, you guys can of course pause the video and paste in all of your texts or type out whatever you guys want. Or you can use chat GPT to write the content for you.
I may or may not have done that. So you guys can use AI to write little blurbs for your website. All you got to do is go to ChatGPT and then say, Hey, ChatGPT, write me website content or website copy for a services section about OpenStudio for a yoga studio and keep it under 25 words. Boom. You got a little blurb.
And then say, do that for three more services for yoga classes, personal training, and OpenStudio. For the next section, the about section, you can just go to ChatGPT and say, write an about section for a yoga studio that's been in business for five years, who's owned by Aurora. Aurora. Who does this does that in Austin and it'll write a blurb for you. That's kind of how I did all of this double tap That's how I wrote out all of this because I you know, it's a video tutorial So I'm trying to do this as an example for you guys Anyways, you get the idea.
So now that the text is done Let's change the picture you click on the picture and it's right there because this is an image widget It's not a background image when it's an image widget. It's the content of the widget to change the picture Unlike if I went to edit the container I go to the style tab and that's how I change the background image like we did Up here that would be a background image of a section But when it's the actual content of the widget because it's an image widget as you can see up here Then you just go to the content tab just so you know not that you asked but you click on the picture right here And I've already uploaded all my images so I can go ahead and insert them. I don't remember what order so this is the Class right here service is one as you can see click on this picture Services 2 and then click on this picture Services 3 which is I think this one there we go. So I've got open classes or yoga classes I've got open gym like you can you can come in and just train however you want No one tells you what to do and we offer personal training So those are the three services that we do So the last thing I want to do is change this text to be the color of my website, right? So we click on it style and we change the color to be my theme color Super easy.
That's it. And then you right-click copy and then just paste it over here. Paste style. Done. So now we have a congruent, concurrent, whatever.
We have a very, we have a theme that's following all the way through the website. It's that pink and blue style that we're going for. We haven't used the blue much, but we use the blue in all of the gradients, which is what I'm going to do.
Scroll on down. We've got pink right here, pink right here. It makes it look like it's all supposed to be one theme as opposed to just different colors. And that's, again, some web design tips for you. All right.
So our services section looks great. The only last thing I'm going to do is click on the image, go to the style tab. And then from here, I'm going to increase the border radius to like, I don't know, 20. Let's go 30. Actually, we can just drag. So click on top, drag, and you can go as much as you want. I think around 40 looks good.
Right click and say copy and paste the style, paste the style. Because I wanted my pictures to be a little rounded. That's about it. Okay, so that is the services section. I think it looks great.
We've already pasted all of our text, so everything's good to go. Scroll on down. Now we have about section. Let's keep this fast and simple. Just change the text, change the color, change the picture.
That's all you got to do. So let's do the picture first. And I think this was my about picture.
Yes, it was. Let's go ahead and edit the image, go to the style tab. And we're going to put in that 40. Well, we might not need to do 40. Let's just do 30. We might need to go 40. Yeah. 40 as my border radius.
About us can be pink. So we'll go to the style tab again. I'm going a little faster, but it's because you guys already see where everything is from the previous sections.
And so I'll just kind of click a little faster. I'm trying not to go too fast. And then we can go to the text right here and let's change the text. So I'm going to grab my about paragraph here. So all of this commander control C command V. And now I've got my about section here.
You'll notice that my picture is off centered. So what we're going to do is click on this little gray box right here for the container that the picture is in. And then we're going to go and center it. So this is vertical centering and this is horizontal centering. So we're going to choose center.
And now it's centered the image to the middle vertically. There you go. Just in case you guys are curious and then let's see for the about section Oh the last thing I wanted to do was add a gradient to the back So first we'll do the padding and then after that we'll go and knock out the gradient So I'm gonna click on the six dots to edit the container and then from here We can go to the advanced tab and we're gonna go to the padding Unlink the values together and then we're gonna go add some to the top maybe about that much Let's go with 50 and then we'll add some to the bottom and we'll go 50 just like that. Cool So that's the padding we'll go to the style tab and now we're gonna do the gradient So we'll go to background, click on gradient, not classic. And then from here, we'll just select both of our colors, the theme color one and theme color two.
While it's easily visible. Oh, wait, sorry, not background. It has to be background overlay because that way we have opacity. So let's just click on these and go clear again.
We can click on gradient again to turn it off. We'll go to background overlay. That's what it was, my bad.
Click on gradient, select both of our colors. And now we have that opacity slider. We'll leave it around 50 for now. So let's go.
I want the pink in the top right corner So we're going to change the direction Let me just make it really obvious and then we'll change the angle to where the pink is in that top right corner I'm basically making it look identical to this the hero section So in order to do that, what we're gonna do is reduce the opacity to like right about there So let's try 50 actually looks identical. Okay, we're gonna leave it at 50 Actually, what I'm gonna do is change the text color from the pink that we just did to white so that it pops off the background a little bit. Right now it looks like it's kind of blending with the gray and the pink. So we'll just go theme color six for both.
Click on it, go to that style tab and change your theme color six. So something like that. I think that looks pretty good.
So from there we can click on update to save our work. Okay, so the about section is pretty much done. We've already copied our text. We put the gradient background in. So now we can scroll on down and we're going to add a couple sections right above this call to action because the call to action is going to be pretty much the last thing on our website.
So the first thing that we're going to do Why is there an empty space right here? My section ends there and that ends there. That's kind of weird.
It's at the plus button. There's some space down there. Did I add margins on this?
Maybe they did. They did. Gotta love that. So if you click on the six dots for the about us section and then you go over to the advanced tab you'll see that there's some margins that I didn't notice. Go ahead and link those values together and then just set one of them to zero and it'll zero it out.
And now if they close out of this we have the lines right up against each other. I don't know why they keep using margins. I use padding most of the time. It's very rare I use margins unless I'm trying to do something custom.
Okay, so about section done. We'll move on, click on the plus button, and this time we're going to add in a gallery. So we'll click on the little S icon again to use the starter templates blocks, which are free. Some of them are the premium version, but you can get a lot of them for free, and they've got some really nice blocks in here. This time we're going to go to the portfolio section.
So we'll have like a little photo gallery that we can use for the website. And so we'll do this one right here. So that's what it looks like. We're going to click on import the block, and we'll see how long that takes.
Shouldn't take too long at all. Done. So now we have this gallery inserted, which is really cool. Even though it's called a portfolio, it's basically a gallery. So the first thing I'm going to do is go and just remove this text because I don't think I really need it.
So just right click on it and say delete. Next let's go ahead and change this to actually be what we need it to be. So we can go over to our text and we can go to the let's see services gallery.
Oh, so the gallery I didn't even write anything did I? Alright, well we can just say something like check out my latest work Let's say check out my studios. Check out the studio. There we go Let's just write something like that and then we'll change the text color to be theme color 3 So it's black because it's on a white background. So I'm not gonna do white And then from there we can edit the gallery by clicking on the little pencil icon up here.
Sometimes, okay so you can right click on the gallery. Some widgets like Google Maps and other things if you click on it it's actually going to interact with the app so you can't just click on it to edit that widget. Just a heads up.
Like I can with the heading. The heading I'm not going to right click I just forward click or left click I mean and I can edit the widget. Can't do that with this one. So click on the pencil icon and you'll see we've got a gallery over here. We can click on the trash icon and it'll clear the gallery.
So if I clear that. Now I don't have any pictures in there. I'm going to click on the plus button and I'm going to put in my own pictures of my business in here.
And we can delete these pictures a little bit later, or actually I'll probably do it right after we insert ours, but let's go ahead and insert our pictures. I'm going to start with this one, then go to that one. Uh, we'll do this guy, then this one.
And where's the beach one? It's one of them on the beach, the beach and the one with the grass in the front. Cool. We're going to say create new gallery.
And now there's our new gallery. You can rearrange them right now. So once you put them on here, you can always drag like this and rearrange them if you want to.
So it's pretty simple. And then when you're done, just say insert gallery right there in the bottom. And now we have our own photo gallery without all those stock images.
So I can say, check out the studio or check out some classes or something. You can put whatever you want here. If you're a roofer, put a bunch of roofs that you've done that look great.
If you're a landscaper, do that. If you're a web designer, put some pictures of websites that you did. You know what I mean?
This is where you just kind of show off your work. So that's the gallery. Looks great. The only other thing I'm going to do to this is just me.
I kind of like, I kind of like the small padding that's down here. I didn't know if I wanted to increase the padding or not, but we're going to leave it the way it is. So that's the gallery section, portfolio section, whatever you want to call it.
We'll scroll on down and we're going to add another section. We're going to add two more sections. So bear with me. We're going to go starter templates again, because it's always easier to just download something and then customize it rather than building it from scratch. Unless there's something really like unique in your mind that you want to do.
So we'll go back to the blocks tab. There we go. And this time we're going to look for a testimonial, right? Actually, no, we're going to do pricing first. So we'll click on pricing.
And of course, that's not going to pop up. Let's see. Was it pricing? Oh, you know what? I think I downloaded a plugin for this.
Okay. So what we're going to do is actually download a plugin really quickly because there aren't a lot of other pricing tables that come for free. Let me see if actually Elementor has one.
Click on that little Rubik's Cube icon and we can say pricing. I think it comes with a premium version. Yeah, all three of them come with a premium version. So. So that I don't have to build one from scratch.
I'm literally going to go download a plugin. That's how lazy I am. So from Elementor, I'm going to go back to my dashboard. You guys know how to do it if you didn't open a tab, but again, I'd recommend having a tab open.
We're going to go to the add new tab again for the plugins. And you'll search for something called Royal add-ons for Elementor. I just type in Royal.
It's the first one you see right here, install. And all this one does is just give you like 40, how many does it say in the description? No, it doesn't. Gives you like 40 additional free widgets to use free. by the way.
And then it also gives you like templates and other things, which I don't usually use. Whenever I need like a pricing widget, I will go and download a plugin. And so that's what I'm going to use it for. So now that you've downloaded and activated it, just close out of the tab and let's just refresh Elementor again, because we made an outside change.
So Elementor wasn't looking at that. So now that it's done loading, we can scroll on down over here and you'll see all of the ones with the little R icon is for Royal add-ons and look at all these things. You've got so many widgets inside of Royal.
It's kind of nice to have. So we'll scroll on down. We're gonna click on the plus button again this time click on re for royal something A royal elementor maybe I don't know So from here, we'll go to their blocks tab and then we're going to search the categories in the top left For a pricing table and this is where you can use a free pricing table Which i'm just going to use this basic one right here.
We'll click on insert All right, and now our pricing table is not there. Oh, we put it down here So for some reason it didn't put it above the call to action. They put it way down here so you can Click and hold on the six dots and just drag it above and that's how you can move sections around on your website So now we have a pricing table Let's first add some padding by clicking on the six dots Going to the advanced tab click on advanced now because now there's a royal add-ons little tab right there And we'll just add some padding to the top and bottom. Let's probably go with like 50 or 80 I don't know why but 70 is feeling right. So that's what I'm gonna do I'm going off of just I'm just eyeballing it.
So let's go with 70 and then while we're here Let's go ahead and enter in that gradient background. You'll notice I don't want just everything to be a white background because then it's boring So you'll notice that like every few sections there's like gradient and then white and then gradient and then white and then Gradient and then there's gonna be another section with the testimonials It'll be white and then the banner with the call to action right here will also be a gradient So you'll see that I flip-flop between the two backgrounds and it just adds some dynamic like depth to your background, not just being a whole white website all the way down. So that's up to you guys, but you know, that's what I like to do.
So we'll click on the six dots. Well, we're already there. So while we're here, we'll go to the background overlay and we'll add a gradient, the exact same thing that we've been doing the whole time. So I'm kind of moving a little fast with my clicks, probably leave it at 50. We'll go with the angle. Top right is the pink.
There's my gradient. It looks the same as this one. It looks the same as that one.
This one's a little bit darker. I think with this one, we went with like what, 60 or something like that for the opacity. 59. Okay, not 60. I was close. But anyways, you get it. We want it a little darker because I really want my text to pop.
But for the rest of them, it's just kind of a nice little background. So this looks good. Let's go ahead and change the text to actually say what we need. So let's go over to our script here and we'll see the services about pricing section.
So pricing section, discover the perfect class to match your goals and skill level, blah, blah, blah. Control C, come back in here, command V. And so now we have that right there. And then instead of write plan for your business, let's just say write class for you. Or maybe find the right class for you find the right class for you and maybe the should be short lowercase There we go.
Find the right class for you. There we go. So that's our pricing section Let me show you guys how to edit the pricing section to look even more tailored to this website So the first thing we're going to click and edit the middle one first. Okay, and so from here, it's very self-explanatory Anytime you want to edit something inside of Elementor most of the time just look for the word that you're trying to change and then Go look for it over here on the left.
That's what I do So professional if I want to change that from professional I can click on It's the heading so I kind of led you astray there, but you see where it says professional right here That's how you know, I'm gonna change that text right there. I've got price So that's probably gonna affect this portion right here divider, which is probably this little line right here Feature one feature two feature three feature four. Those are all these features then I've got button Which is the button and then I've got text which is like this little text down here 30. Let me see Is it yeah 30 day money-back guarantee? So that's where you can change that text to say whatever you want So it's pretty self-explanatory. You can see that it's just like a graphical representation.
So I'm gonna change the heading right here It needs to be a heading type and we'll change this to intermediate. Don't worry. We're going to change the others later. Just bear with me.
First, let's make the color changes. Well, should I do the button? No, we'll do the button later.
First, let's do the color changes. So we'll click on style and I want the button. So let's go down to button over here.
Where is it? Down here at the bottom button. I want the button to be the gradient that we're using for the whole website. So let's just click on theme color one and theme color two. And now you see this cool, you know, gradient effect on the button.
Love that. And then we also want this banner or badge or whatever. Let's see if we can find that in here badge Yep, it's the red badge right there. So, you know first try click on the global and let's make it the pink color There we go. So that one looks great We're going to right click on the pencil icon right here say copy and then we're just gonna paste the style All right So now it's looking a lot more stylized and attached to the theme of the website Lastly you can come in here and click on each one of these And you can change these to whatever your pricing options are.
So this is the part where if you're a plumber, you could say, I don't know anything about plumbing, but you can say something like interior exterior or something. You know what I mean? Or if you're doing roofing, you could say tile shingle and something else.
Or if you're a web designer, that's what this actually kind of looks like is like starter blank and business. And you've got one site, three sites, unlimited site license or whatever. This is where you just do a general pricing table for whatever services you provide. And you can also duplicate by the way, like you could right click on one of these and say duplicate.
Cause like, what if you have four? So now you have another one and you could create three more, you know, it's it's whatever you want to do But i'm going to delete this one So this is where you customize it for your business for this tutorial. All i'm going to do is stick to very basics I'm, just going to say i'm just going to pretend they're classes click on this one Heading advanced by the way, if you ever want to remove one of these you just click on the x button right there And then you can also drag and drop them into reorganizing them But I think the orientation they're in is perfectly fine Oh, lastly if you want to change the banner text, so instead of saying that this one's on sale what we can do is There we go. We can badge.
Turn off the badge on this one, for example. This is just an example, by the way. You can use the badge to say exactly whatever you want.
So instead of that, recommended, you know, and then we can change the distance so that my word isn't cut off on the edge like that. And then we'll change it to none because we're not going to use it on that one. We're going to click on the beginner and then I'll add it to this one.
So let's go to badge corner. Oh, okay. I thought it would copy the text over, but it won't.
So Recommended. Alright, change the distance, a little bit like that. And so now when they're looking at this pricing table, oh, it's recommended you take the beginner yoga class first.
I don't know, I'm being very vague and generic, but I just wanna show you guys how to use the widget. Okay, pricing table's done. We've got our text here on screen.
So, find the right class for you, discover the perfect class to match your goals and skill level with our personalized guidance. That was written by ChatGPT. And then you guys can come in here and add your own features, like maybe this is a one hour class, this is a one and a half hour, and this is a two hour class. You know, it could be whatever you want, but that is how you guys can use the pricing table. Scroll on down.
We're going to add one final section and then we'll make a change to this one and we're done. So bear with me this time. Again, starter templates go to their blocks and we're going to look for the testimonials right here. And so we'll look through the testimonials.
Let's go for the light colors. Cause I want, you know, this website to be light and we can pick one that we like the best, which I kind of like this one. I always like it when they're like big tall boxes, as opposed to little rectangles. It's just personal preference.
So click on import block. All right, so now our testimonial has installed. So now you can see happy clients, and then we've got three testimonials. So first thing we're going to do is I'm going to leave the background, but I am going to change the text. Well, actually, do I even change the text?
I don't remember. See, testimonial section, I don't. So let's just change the color. We'll go to the style tab, and we can change it to be black if we want to, so it just looks regular. And now we can change these three to be pink, so they match the style of the website.
So let's go theme color, copy, paste style, paste style. Done, right? That makes it pretty easy. Let me make sure my notes are up. It keeps going to sleep And so with the pink all the way across now, all we got to do is change the text This is where if you're a real website owner, you would go to your email and ask them Hey email me a testimonial or send me a video or whatever and then you'd literally copy paste the Testimonial from them and put it in here The funny thing is though you can ask chat CBT to make you fake testimonials and they're pretty convincing.
It's it's hilarious I freaking love getting fake testimonials from chat CBT because they're always just so entertaining to read So let's take this first one from Emma Smith You just click on the box right here, it's very self-explanatory, and we're gonna paste our testimonial in there. Done. We can change the name by clicking down here, and you'll see Gemma Stone, like Emma Stone, that's funny.
Gemma Stone, there's the text, and then CEO, it's down here. You can just pick where you want to change. So we're gonna say that Emily, Emily Smith, right?
It was Emily? Did I say that? Yeah. Oh, Emma Smith.
So we've got Emma Smith and her name, and then you click on the picture, And that's how you can change the picture and you would upload a picture of your client So I could pick instead of her I could pick any one of these other pictures of people if I wanted to And that's how you would change the picture by the way So that's how you change both of those you guys have changed the text now And so that's pretty good. We come over here to the next one and let's just repeat these steps So anyways now we've got our three testimonials and we're good to go so we can click on update to save our work And so from here testimonials is done. I think it looks really good.
So now we can move on to our final two sections which is this and then the contact section. Now the contact section, we're actually going to copy from the contact page and move it over here because I'm making you guys a one page website. Making multiple pages obviously adds more time to your website. So if we're trying to do this in one hour, we're going to stick to a single page website. So let's go and make the changes to this one.
So the first thing that we're going to do is obviously copy over all of our texts. So let's go to the call to action here. Okay.
So now that we've got all of our texts in here, we can go ahead and stylize them. I always like to do the background first because I don't know why. In my mind it helps it come together a lot faster, so let's do that real fast.
We'll go to these six dots to edit. We'll go to the style tab. Let's change the picture, which I'm gonna use this one, and I'm gonna focus on the bottom center this time.
So right under here, position, instead of focusing on the center of the image where you can't see the lady doing yoga, I want to focus on the bottom center and now you can perfectly see the girl doing yoga. So, with that being the case, we're gonna do a background overlay. So we'll go to background overlay and we'll go to gradient.
And we'll put in our colors. We'll angle them where the pink is on the top right corner. And then I'm going to increase the opacity just a little bit more. Something like this.
And then we're obviously just going to make the text white. So it's a lot easier to see. So we'll click on the first one, style tab, change it to white.
Then we'll go to typography. And from here, what we're going to do is I like that it's transformed to uppercase. So we'll just reduce the size like crazy.
So it's something like this. We'll, we'll decrease the weight to something like 400 or 300. Yeah. I think 400 looks good.
That's perfect for a subtitle. Let me see here. Also really fast quick change or I just want to double check.
Is it set to center? No. So then it's their padding.
Yeah. They did a whole bunch of padding and stuff. Okay.
So really fast for you guys, right click out here and say edit container, go to the advanced tab. We're going to remove all of this unnecessary padding and we're going to go to the layout tab and we're just going to justify to the center. Now it's not like uneven because you saw how they had like 100 to 200 and it was uneven. Now we can go back to the padding and now that it's centered. I can add to the top 100 and to the bottom 100 and we're good.
There. It's a little bit more centered. It wasn't centered and it was bothering me.
Okay, so now let's edit the second pair of texts or the second heading. Style tab, we'll change it to white. We'll go to the typography. We'll reduce the size a little bit more, something like this. Are you ready to transform your life?
One thing we can do is if you right-click and go edit container again, you can change it from box to full width. And so now it's gonna spread out a little bit more which actually looks so much better for the title. So we're totally gonna do that. Let's go back in and edit the title. We're gonna fix the paragraph underneath.
Don't worry. Let's increase the size of the title just a little bit more so it's like really in your face. I think that looks good. And then from here, we're going to go down to the text and similar to what we did up here in the hero, where we added padding to the sides to make it squish underneath the words.
Let's do that right now. Style tab first and change it to white so we can see it. It's kind of hard to see.
Advanced tab and let's add some padding to the right until it looks perfect where we want it. So let's go slightly under today. Actually, we can cram it a little bit more if we really want to.
Let's go under the Aurora. So that's 700. Let's go 700 on the left. Squishes it in. Done. I think it looks great.
We can also add a little bit more padding on the top and bottom That's just personal preference if you guys want to so we can go back and go to advanced Maybe I want like a little bit more so there's some breathing room. So let's go 130. There we go I think that looks so much better. That's a good call to action right there but we can go back to the background overlay and we could increase the opacity a little bit more to make it like really easy to read that text as opposed to if it's just the picture, it's hard to read the text. So you guys can play around with opacity until it reaches a level that you like.
So maybe something like this. Obviously even more saturated than the hero section, but visually it looks pretty similar as you can see. So I like it.
Plus a call to action should be kind of punchy and in your face. You're like, Hey, Hey, Hey, don't leave, buy something. That's what you're wanting them to do.
You want them to sign up for a class. So that looks good. We're done with that one. Let's click on update to save. Finally, we're on the last portion of the website.
Let's do the contact form. So for the contact form, go back to your dashboard, open up your website on a new tab. Okay, bear with me.
Go to the contact page because when we downloaded this template, it's got multiple pages We're gonna delete them all but I'm lazy So I'm going to copy and paste the contact section into your home page because it's so easy to do that So down here, we're gonna copy this little section right here. So click on edit with Elementor So you're editing the contact page with Elementor click on the six dots right here But you're gonna right click on them go down here and save as a template. Do you see that?
So click on save as a template and just name it contact form or whatever Contact section click on save now. You just created your own little template that you can use That's your own little element or block kind of similar to the other blocks that we've been downloading now You can just close out of this page. We don't need the contact page anymore In fact, you can go over to the pages tab really fast. So pages right here on your WordPress dashboard I just opened it on a new tab. All of these pages are unnecessary So we're gonna select them all like this and then on Disselect this is really important.
Disselect the home page so you don't delete this one And now you can go to bulk actions, move to trash, and then click apply. So now this is a one page website because there's no other pages here. Okay.
So we have our contact section. We can go back to the Elementor that we're editing right now. We're going to have to refresh again, because again, we made a template save outside of Elementor.
So we got to refresh so that it grabs all the useful information, the more recent information. And now, so at the very bottom, it looks like you don't even have to hit the plus button. I forgot. I was, I was about to show you how to hit the plus button again, but it's already down here. Click on the folder icon because that's built into Elementor as a section.
You know what I mean? And then from here, what we're going to do is we're going to go to the My Templates tab right here and you'll see contact section. So you'll just say insert, apply.
And now we have a contact section down below. There we go. It refreshed the page for some reason. So scroll on down, scroll on down.
Here's the contact section. First thing we're going to do is click on this little widget right here. It's your contact form. As you can see, WP Forms.
Click on it and say contact form. Boom. You have a contact form on your website. Super easy.
Do me a favor and click on update to save your work real fast. Go back to your dashboard really fast while we're on the contact form. I just want to show you how to make changes to it.
So from your WordPress dashboard you can either go to the top right here and click on all forms under WP forms or you can go over to WP forms over here and click on all forms. It's the exact same thing. Okay, you only have one form that's been built and it's the contact form. You can click on edit and you can edit the fields that are inside of your contact form. This is similar to Elementor.
It's drag-and-drop. I can drag this one down. And it's different.
I can drag it up and it's different. Or like it changes position. If I want to add something like a phone number, I can add a numbers box, drag it into place as you can see.
And now I have phone numbers. You want to delete it, click on the trash can in the right side. So you guys can customize your contact form.
I think this is pretty good. It gives you a little message, email, phone number, all that stuff. We go to the settings tab on the left under where is it? Notifications I think.
Yeah, notifications. This is where you can change your send. to email address. So basically right now it's using shortcode to take your admin email from your WordPress account. So whatever you created your WordPress admin account with at the beginning in domain and hosting, step one, that admin email address that you used, it's automatically pulling that.
So anytime someone hits submit or send in the contact form on your website, that message is going to go to your email, your admin email. Now, if you want that to be different, you would just type in the email right here. So delete that and type in your email. Like let's say you have a business email that you wanted that's separate or something.
You would put that right here. You can also customize how the emails look. So right now it's saying earth because that's the template that we downloaded but instead of earth you could say If I know how to type, there we go.
Aurora, oh, Yoda. It's the yoga studio. So now it's going to say in my email, it'll say, hey, you have an email from Aurora Yoga Studio.
And when I open the email, it'll have all the info that they had. So I'm basically saying the from name. You can change the subject line.
You guys can customize how the email looks. Click save in the top right corner and you're done. And that's how you can make changes to your contact form. All right, close out of that tab and let's go back to Elementor.
And we have our contact form in. So let's first start with the contact form since we're already touching it. And from here, what we're going to do is we'll go over to the style tab and we can change the button style to be the same color as our website. So let's go and choose the theme color for the background and the text can be white.
And that way, whenever they hit send now it's pink. There you go. Next we can change the text.
So we'll go to the heading, click on the style tab and we'll go and we, I mean, we can change it to just black. So we'll just click black copy and we can paste the style onto that one. And then from here we have these three icons right here so we can edit the icon box. You can go to the style tab and we have the icon.
Change it to pink. It's not even going to pop up. That's weird.
Now let's choose an icon. Let's go to envelope insert. There we go. So that worked.
It's weird that it's not showing automatically though. So all I did was content tab and I typed in my or I chose the email right here the little envelope icon. We can say that the word says email that's a good title.
but then you can actually change the email to your email right here. You would literally just type it out, but I'm just going to leave it as something at tyler.com. I don't know what that is, but from here we can go to the style tab.
That was the icon we changed to pink. We can also change that blue to pink by clicking on content and we can change this to the pink so it matches the style of the website. And then we can just right click and say, copy, paste the style, paste the style again.
And the only thing we have to do now is just. For some reason the icons aren't popping up so delete it and then just search for what you want Let's do a phone because it's a phone number and then for address we can just put I don't know Let's go with map. Let's do this one insert So email phone number address and our social icons are right here You can edit the social icons right here by the way, and all of these are the same So you click on it and it's the same thing you change phone number in the phone at the actual number Same with the address.
But for Follow Us, well for some reason Follow Us isn't gray like the rest of it. So we can go to click on it, go to the style tab, and we can change it to the gray. Well let's just change it to black.
Why not? So Follow Us on our socials, but they're hovering in a weird color. And so I'm going to edit these icons because when you go to the style tab you'll see that the hover animation, so icon hover down here, is blue.
And I'd rather it be something else. So maybe we choose the same theme color. But then we go in here and we actually change it to something a little bit brighter.
Maybe like this. So now whenever you hover, it does like this light animation. You see what I mean? Completely up to you.
But that's what I'm going to do and click on update to save my work. And that's it. I think the contact form looks great.
Let's actually go top to bottom. So that's the hero section. Looks fantastic.
We scroll on down. All of the text is there. So everything says accurate information.
We've got our hero section. That's the services. Then we've got about. And then we have gallery or portfolio section.
a pricing section for like the classes, testimonials, call to action, and contact. I think the website looks fantastic. So from here, we'll go ahead and cut it and we can go over to our WordPress dashboard. All right. So your website is looking fantastic, or at least I'm assuming because I can't see your screen, obviously, but I mean, you're copying me.
So come on, it's got to look great. Now that the middle of your website looks great. Let's go ahead and pay attention to the top and the bottom of your website, which is the header and the footer.
We're gonna go ahead and throw a logo up onto the header, which I'm gonna show you guys how to build for free So don't worry and then we'll even set up your navigation links and finally we'll go down to your footer and set that up as well Let's go ahead and hop back in. So in order to create a logo for free We're gonna go up to a new tab and go to a website called logo maker.com but you're gonna leave out the e under maker and hit enter and so this is logo maker This is where you can create free logos. So we'll click on start my design It's gonna ask if you want to choose a template or if you want to create from blank scratched canvas You guys can choose one of these templates like I did, or you can go to a blank canvas and create something custom. I chose this one right here just as an example for you guys. So I clicked on it.
It's automatically going to load you into their editor. It's really easy to use. Let me show you.
Top left corner is where you can search for icons. They've got over 3 million. So like if I search for a camera, I get a ton of cameras, as you can see, right? Back to canvas in the top right corner.
On the left-hand side, we've got basic functions like adding text. So that's how the text was added right here. Shapes like triangles, circles, square, and all that. pencil, which I never use, but if you wanted to try and pencil something you can.
Paint bucket, and then also the undo button, but there's nothing to undo at the moment because I haven't done anything yet. On the right hand side we've got the saturation square, so I can make something desaturated or saturated with color. The color wheel, which is how you choose the color, and then we have the layers down here. So for this one, I'm gonna keep it very simple.
I selected a template. You'd want to make it obviously different, but I'm just going to be very lazy and change the colors. First of all, I'm gonna change sandy by clicking on it Oh, you can click on anything and drag it wherever you want You can click on these and you can rotate like this if you want to you can resize by dragging from the angles However you want. Let's go ctrl Z. You can click on something and change the color by just adjusting with this, right?
So that's how you guys can change color and everything So we'll do that and you can also change the opacity So if I want sandy to not be visible, I can kind of change the opacity if I want to that's about the gist of it It's really simple to use you can click on something also And if you don't want it, you can click on the little trash can icon That's about it. I'm gonna literally leave this logo the way it is. I'm just gonna put my business name in here So we're gonna put Aurora and then for the text I'm gonna say I did Yoda again, didn't I?
Yoga Studio. So there's my logo. Super easy. Whenever you're done, you go up to the top right corner, you click on save.
Don't click on the blue button because it's gonna ask you to pay for a logo. As you can see, as soon as it's finished loading, there we go. It's like 30 bucks for a logo. If this is gonna be your business logo, I strongly recommend you pay for it because you're gonna get the high resolution quality, you get the rights to it.
like full commercial rights as you can see you you get the large file full commercial rights you can print it you get different file you can get vector or jpeg which vector means that no matter how big you scale it it stays quality it doesn't get blurry you get everything buy it if this is for your business it's an investment in your future just do it if this is just for a website you're building and you don't care about needing the logo for anything else then you can just use it for free i'm just giving you a heads up because their free terms and conditions are you have to give them credit and you can't use it on like specific things so here we go you Don't click on the blue go down here and say download low resolution png file for free click on it And then you're going to accept the terms and conditions Put your email in and hit send to my email and it'll send it to you completely for free You go over here you open your email up and you can download it I've already done this twice and downloaded the logo off for this tutorial. I use this for every tutorial I do and so if you want to go over here, you can go click on save again Well, actually here we go. You're going to download two. You're going to download the light version and the dart version of your logo So that's the dart version Let's just highlight everything, make it white, and I'm going to save a second version. So what I wanted to show you a second ago was you can click right here to actually see their terms and conditions.
And when you do, you'll see that, you know, personal restrictions, $7,800 fine. You're supposed to use it for web use only. It's almost like I'm telling you you can use this for your website. Anyways, it's free, but you're going to get a very small resolution. So if you try and make it any bigger, it's going to be blurry.
You guys get the idea. Whenever it's free, you have limitations. That's just what it is.
Anyways, I just want to give you guys a heads up. So now that you're downloading the lite version, which you can't see it, but it's there, accept, put your email in, send an email, and you're good to go. So now you've downloaded your logo completely for free, ready to go. Close out of those tabs. We can go back to our WordPress dashboard.
We're going to go over to appearance and then click on customize. And so this is going to let us edit the header and the footer of our website. So right now there's no links and there's no logo.
So let's change that. First, go to the header builder and then you'll click on site title and logo. We're just going to remove both of those.
and we can put in our own logo. So first, you're going to put in the dark version of your logo, because that's the standard version of your logo. Select.
We're going to skip the cropping, and voila, my logo is up top. Now, right now, I could use a dark or a light version, because it's not too dark and it's not too bright of a background. But if you have like a white background or a black background or like something really dark, it might be hard to see.
So depending on that, you can also, where is it? Ah, customize the transparent header. And you can add a second logo display, display a different transparent logo and now this is where you can select the light version for example. And so now whenever it's transparent it'll use the white but if I'm not using transparent it'll use the dark. That's just for you guys.
So you have two different logos on your website and then you can change the logo width to increase the size a little bit if you want. Once you're done click on publish and your logo is live on your website. Now you can also do a favicon which I forgot to do one separate so we're just going to throw a logo up as the favicon but you're going to put a little icon right here on your tab.
The way you do that is under site title and logo. Scroll all the way to the bottom and you've got site icon. So you'll upgrade or excuse me upgrade go back So I tell logo site icon you're going to click select site icon and I'm just gonna put in the dark one select Skip the cropping and now you'll see my logo is on the tab So that's how you can customize that little tab icon right there It's called a favicon or a site icon publish and save and you're done So our logos are branded or our website is branded now.
Let's go ahead and edit the navigation menu and it's really easy to do. You're just going to go over to the header builder again, go to primary menu, and you can configure the menu from here. There's actually like six different ways you can get to your primary menu.
I'm just showing you this way. So we're choosing main menu and we can edit the menu. So from here, because there used to be page options for like the home about contact, but we deleted them all, all those pages. So click on add items, a little X appears, and you can just delete those.
Next, we're going to add our own custom links. Okay. So custom links, I'm not going to take too long to explain what these are, but they're basically whenever you click on it, it's going to automatically scroll your website to that part.
So for example, we have a services section. We're going to go, the URL is going to be a hashtag services. And then the link text, which is what's actually going to display on the menu at the top, will just say services. Done.
Let's go down. Next is about, hashtag about. Lowercase, by the way.
Add to menu. Next is the gallery, or you could say portfolio, and we could say hashtag portfolio. And then we have, oops, go to custom links.
We have the, that's the portfolio pricing. It's pretty self-explanatory if you see what I'm doing here. Next, we have testimonials. And you guys can name these whatever you want. I'm just doing this for the example so it's really easy to understand.
Testimonials. And then that's that. And then we have... We won't have one for call to action because you don't click call to action. It's just where...
It's as you scroll, you just see it. It's a reminder. Hey, buy something. So we're not going to do that in the navigation.
But we will say contact. Add to menu. Okay, when you're done, hit publish. Done. So now...
We go up to the top and you have a navigation menu. Looks great, but the colors are off We want it to be white just like that. So let's go back back.
We'll go to that Global or is it header? Let's go to header builder first and let's give this a shot go to the design tab And it's not that one. So we're gonna go to the transparent header my bad. So header builder Transparent header down below and then you click on the design tab and from here You'll see that we have our link text and it's like green and black and there's the green and black So let's change it to white right here because these are your theme colors. Remember we had the red the pink and blue and then we'll say the hover color and the active color will be pink.
So now whenever you hover over them they go pink but they're initially white. Or maybe you want them to be blue because you've got pink and blue up here. Whichever one you think looks better it's up to you. Hit publish when you're done and that's it for the header.
The last thing we're going to do is link these up but let's go touch the footer first and then we'll come back up here okay. So we're going to touch on the footer, scroll on down and here's our footer at the very bottom. It's very simple.
So we'll click on the back button and we're going to click on footer builder because we were at the header now We're at the footer builder and you'll see that we have on the left the footer menu The middle is html1, but it's just an image. It's our logo and then on the right. It's the copyright So the copyright you click on it down here and you can literally change whatever the text is right there So you can add your own copyright this one right here the earth.
It's html1 It's the picture right here click on it and hit remove and you can add your own picture say add media right here And then from here we can add our black logo and it might be, yeah, way too big. So you click on it and then you can just drag it and shrink it up a little bit until you think it looks good. Let's go a little bit smaller. Perfect. I think that looks really good.
Nice and centered. So we're good to go there. And then lastly, you can edit your footer menu. Your footer menu is identical to the main menu up here. So I'm not going to touch it, but if you wanted to, you could create your own footer menu.
I'm not going to do it right now. So that whenever they get to the bottom of their website, they can still go to a new page rather than having to scroll all the way back up. just to click on services once they're done looking at the homepage, if that makes sense.
So it's nice to have navigation menus in the footer as well. Okay. So footers done.
I know it didn't take much like the header did, but the footer is usually really easy, especially when you download a template, it's already done for you. Just got to put in your information. Super easy.
So now that that's done, we can come back up to the top and let's just make sure these actually go somewhere. So make sure you clicked on publish right here, close the tab, and let's open up our website on a new tab. So I just click on the website name.
and open it on a new tab. So from here, if I were to click on services, watch right up here in the URL. When I click on services, see how it just says hashtag services up there. That's the URL that we built.
Remember when I said you type in services and then hashtag services about hashtag about you were building that slug that goes on the end of your URL right now, it doesn't go anywhere. So we have to go back into Elementor one final time. Bear with me.
Well, it's not the final time wink because the next step we use Elementor as well. But inside of Elementor, we have to label these sections now. So if we go down. This is the services section.
So click on the six dots, go to the advanced tab. You're going to look for CSS ID, put in the word services. So whatever was lowercase, by the way, whatever was in front of the hashtag, put that right there because the hashtag is calling on a CSS ID in your URL. So up here, when it adds hashtag services, you're calling on hashtag, which is the CSS ID for this section, which is services. That's what's happening by the way.
So we'll go to about repeat the process click on the six dots Advanced type in what we put in the hashtag so about and I'm just gonna repeat the process. This is portfolio But okay, it didn't select. There we go advanced tab.
We go to CSS ID Portfolio, sorry, it looked like I misspelled or threw an L in there But then I had to just like squint my eyes a little bit click on the six dots again go to the advanced tab And this is going to be the pricing more and this is the testimonial. So click on this one advanced testimonial Did we say testimonials or testimonial? I don't remember.
Let me just open up my tab on a new tab real fast and I can tell you right now. Testimonials. Ah, see, I would have messed that one up because I didn't put in the S. So let's close out of that. We'll go back real fast to testimonials.
Testimonials. Plural. Has to be exact, by the way, because you're linking an ID to the button that gets claimed.
So this one advanced. Oh, this is the call to action. So we don't do anything. And then for contact, we go contact. Click on update to save your work.
and watch the magic happen. Cause watch this. We're going to close out of Elementor.
We're done. Open up your website on a new tab. By the way, you can just come up here and just left click on your website name and it's going to open up your website. It just doesn't do it on a new tab. That's why I keep doing it on new tabs, by the way, because it just, I like having a dashboard to come back to.
So now whenever I come up here to my navigation menu and I click on services, I'm going to click and then pull my hand away just so you guys see I'm not scrolling. It's going to automatically scroll. Watch this. See how it automatically scrolls?
And so if I click on portfolio, automatically goes to the portfolio. And if I'm like, oh, I want to see the pricing or the testimonials, click on it, goes straight to testimonials. So that's what we did. We added little anchor points on our website where the navigation will take the visitor, which is pretty cool.
So when you have a one-page website, that's what you do. When there's multiple pages, then the services page would be different, about page would be another page, portfolio, another page. You guys get the idea.
But now we have a navigation menu that works. And then by the way, The reason that I didn't actually link the home button, I mean, it's going to work, but the reason I didn't do that is because whenever you click on the logo, it usually takes you to the home. Let's see if actually the footer does that. Okay.
So the footer is not a linked logo because it's HTML. It's not an actual icon, but whenever you click on this logo, it refreshes the page and it goes straight to the homepage again. So when you have multiple pages, you can click on the logo and go home. So you don't always have to have a home button by the way. But anyways, that is all we have to do for the header and footer.
So close out, go back to your WordPress dashboard. All right. So you're finally finished working on your website, right?
Wrong. If you went to search for your website on your phone, I bet it would look terrible because we didn't format it for the phone. Actually, just kidding.
The template that we downloaded is already mobile responsive for all viewing methods. However, whenever you make changes to one version of your website, you need to go and double check the other versions of the website to make sure that everything looks good. I mean, think about it. If you just built your website for the desktop view, which is more of a horizontal rectangle, then how's it going to look on a phone screen, which is a lot smaller and it's also more of a vertical rectangle?
So. Let's go ahead and take a look at our mobile responsive mode. Trust me, it's super easy and usually the last step only takes like a few minutes. So let's go ahead and jump right back in. Alright, so you guys know the drill.
We're gonna open up our website on a new tab and then click on edit with Elementor. And then from here, in order to enter the mobile responsive mode of Elementor, you're gonna go down to the bottom left corner right next to the update button down here in the bottom. You'll go two over and you'll see responsive mode. So you click on responsive mode and it's gonna open up this banner up on the top right here.
So now you can see up here this appeared. And so now you can switch between the desktop view, the tablet view like this, and the mobile view, which is like a cell phone screen, as you can see. And as you can see, we're gonna have to make some changes, but not necessarily too many.
And by the way, tablet view is more like laptop view because most of the time they revert to the tablet view whenever you view it on a laptop, because laptop screens are really small. And so it thinks it's a tablet just saying. So desktop view for like when you have a giant Mac, like I do.
It's really easy to see. So we're gonna switch over to tablet view and mobile view here in a second But I want to make something really clear here So let me click on mobile view and then click on this header whenever you click on an item you want to edit and then You go over here to the left hand side and you see this little icon right here That looks like a cell phone and you'll see the three different modes whenever you click on it whenever you see that icon It means that whatever you're editing right now is Exclusive only to that responsive mode So if I make a change to my alignment on the mobile for example And I say I want it to the right like this, but then I go back to desktop It's still going to be centered and that's because that setting is telling you it's exclusive to this one mobile responsive mode So i'm going to center it again So now that you guys kind of have an idea of what that does Let's go ahead and make changes to the mobile view first because it looks terrible First thing we're going to do is adjust the padding because that's what's making this text look like a line So go to the advanced tab and from here it's taking the original settings But if you just go up and then back down it instantly fixes it We can unlink the values though and we can kind of bring it in just a little bit if we want to Like visually so let's just go 40 on both sides just like that What we can also do is go to the six dots right here and we can change it from, oh, you know what? That's not going to be mobily responsive or exclusive to this.
So we're not going to do it because it'll mess with the desktop view. But I was about to make it full width and then just adjust, but we're not going to do that. So everything looks pretty good from here.
Only other thing I would do is we could change the minimum height on the cell phone. We could increase the height of this section so that it takes up the full screen. And that's exclusive just to the cell phone. But that way we have breathing room on the top and bottom, maybe a little bit less if we want to kind of Encourage the scroll but anyways, okay, so that's our hero section.
It looks good. Everything's visible scroll on down the little statistics They look good scroll on down our services now stacked on top of each other So it looks great one two and three right there the about us section Could use a little bit of padding on the top and bottom as you can see it's kind of scrunched So click on the six dots advanced tab and let's go top just a little bit Let's go a little bit more. So like maybe 30 and then bottom let's go up to 30. There we go So there's a little more breathing room if you want you could add more It's totally up to you, but I'm just gonna leave it like this next We've got the portfolio which go ahead and stacks perfectly so we don't have to do anything Pricing stacks perfectly as well, so we don't have to do anything testimonials are good, and then we have the call to action So let's go and change the text sizes here. That's it style tab once you click on it typography You guys know what we're doing We're gonna decrease the size and it's only gonna affect mobile click on this one decrease the size a little bit Something like that and then click on this last one, which is all the text down here You can barely even see it because it's all glitched out with all the 700 padding that we did if you guys remember Down back up and it fixes it instantly It's because it was by default using the 700 from the desktop version But now we're telling it to specifically for mobile use zero padding That's what we just did by going up and down and we're done. That's the mobile Oh wait the contact my bad, but contact looks great Only thing I would do is maybe click on these and see if we can change them to Center Yes, we can so they can be center alignment and it's only gonna affect this view So let's just change all three of these to be Center really fast under the style tab So it looks a little bit better So now on the phone you just scroll down and it's centered and we're done looks great Oh, the footer looks great, too.
So we're done. So that's the mobile we can go up to laptop view is what I'm gonna call it It needs a little bit of changing the hero section looks fine. We could adjust the padding because it looks a little squished So maybe we go up down on link and then we can just shrink it by a little bit.
So let's put it to the eye. So that's 169. I'm gonna go 169 because I'm too lazy to figure out rounding it up. Scroll on down.
That looks good. Services looks good. About section could use a little bit more padding on the sides. Let's go up and down. We're gonna add some padding to the top and bottom.
So let's go about that much. And then to the right. No, let's go left first.
To the right. Let's go about like that much. So 37. Let's go up to 37 on this one and then on the bottom we'll add 60. Cool.
Not bad. Looks pretty good So we'll scroll on down portfolio looks great. The pricing looks good too. It compresses just fine.
Testimonials are good It looks like it kind of compresses into this two column system. So what we can do is we can edit Oh, it's an intersection. Mmm. Okay, and it's gonna have two columns so if you wanted to for the Laptop view you could leave it like this where it looks uneven Or if you wanted to you could maybe come over here and check on this column right here go to the advanced tab under visibility Responsive under responsive not visibility under responsive you could hide this one Testimonial on the tablet view and so now whenever you preview it on a tablet you would only see these two That's kind of a little bit of a weird hack But it's just my recommendation because there's no way to change the columns without getting a little too complicated So you could hide it so that whenever someone's on this mobile responsive mode.
It only shows two instead of the third one that's off-center, but that's completely up to you. I'm going to leave it because I don't really care, but it is what it is. Scroll on down. Then lastly, we have the CTA, the call to action, which looks terrible.
So let's just change the text sizes again to make them look like actual subtitles and main titles. Reduce this one just a little bit. Okay, so I think the size of those two looks good.
We could add some padding on the sides if we wanted to, but I'm just kind of feeling lazy right now. Let's adjust this padding one more time on this text right here. Instantly snapped into a semi decent look I could just add a little bit of right and left Till I think it looks good. So let's go with 110 looks good I like that a lot and then we could edit the section real fast this whole thing I click in the six dots and we could adjust the padding on here if we wanted to So it looks like it's at 160 and 80 we could just go back to 80 So now it's 80 80 as you can see looks great So we'll click on update to save and that one's done. Let's just move on to the contact which is already good Yeah, we don't need to make any changes and we're good to go.
So that is how you can change the mobile responsive mode on your website So it looks good on all viewing platforms because you never know when someone's gonna visit your website I think nowadays it's like almost 60% of people are looking on their phone rather than on a computer because we're all on the go So it's really important to check your mobile responsive mode Whenever you're done You can just click on the responsive mode again in the bottom left Or you can click on the little x in the top right and it'll close out that little ribbon with the mobile responsive on there. Okay, so remember earlier in the video when we downloaded a plugin called Starter Templates to find a website template that would save us time? Well, if you followed along with this video and you built your first website, check out this video right here where I talk about the five WordPress plugins that I use on every single one of my client websites.
It's the perfect loadout for any website. I talk about security, analytics, site speed, and so much more. I'll see you in the next video.