How To Build A Website in 2022 ~ A Free Website Tutorial For Beginners By WebYoda

Looking for a complete how to make a website for beginners tutorial to build a fully, functional professional website at no cost to you. Then you’ve come to the right place.

Hi, I’m Bethany, and I love to write right now. I’m at couple sent Susie in Ocho Rios Jamaica. One of my favorite travel spots. I recently got the idea to make a

WordPress website. So I could share my writings with others and offer. My readers practical advice. I wanted my website to be mobile friendly, easy to navigate and simple to update. I also needed a shopping cart and a Blog. It turned out so. Well, then my husband and I decided to make a tutorial to show others how to use WordPress. I hope you enjoy making your website as much as I had fun, making mine.

Thanks, Bethany. Hello. I’m Yoda and welcome to my YouTube channel. In this website tutorial. You learn how to build a website that has an amazing intro video, professional logo, eye-catching graphics and all the bells, and whistles of Pros use at. Absolutely, no cost to you. This video use, all the current web design and web development techniques to build a fully responsive website that automatically adjust to meet the screen. Needs of any computer laptop, tablet phone, or any other handheld device to get started. The only hard cost we have is web hosting and that’s where your website lives. And it’s going to run is 3 to 10 dollars a month with your web hosting, you get a free domain.

Nina value of $15 as well as an SSL key, which makes your webpages secure and that has a value of about $99. As for software requirements. There are none everything we’re going to need. We’re going to do online as for system, requirements as website, tutorial is compatible with Windows and iOS systems. All you need is your favorite browser and access to the internet and you’re ready to go. I recommend Chrome and Firefox is browsers, have choices. I’ve had some students in the past. It had complaints about compatibility issues, with Safari Opera and Internet Explorer. Now, they’re in this course, if you run into any trouble, just leave a comment below the video.

Oh, it’ll be more than happy to assist you. And don’t be shy about asking for help. I’ve been a Web Master instructor, aka the web yet o for over 20 years and I love to hear from my students. But if you could, please pay it forward. If you liked the video, subscribe to the video, share the video. Tell your friends about this video. Those are the kind of things that help get the word out. Those other students. Like, you can find this video. There was something else. Oh, at the end of this video. I’m going to discuss the four biggest mistakes people make that drastically hurt your search engine placement. Turns out the solutions. For these, four things are really easy and they’re free. So I think we’re ready to get started.

So without further delay, let’s go ahead and look at the website. We’re going to build today.

Today we’re going to build Bethany’s new website, which is self Dash tastic.com.

Well learn how to do an intro. Like you see right here and we’ll learn how to add it to our website. Now, notice how this text flies into place at just the right moment. Once the homepage is revealed. You’re going to be able to learn how to do that effect as well as all the other effects that are shown in this website. Now. Definitely, don’t get intimidated. I know this is going to look really fancy. It’s going to look very professional, but you’re going to be able to do all this. Trust me. It’s not going to be a problem at all. Now, you’re not just a passive participant, sit in the audience, watching a magic show. As I put the show on your actually, go around behind the scenes, how to do all this.

It’s very simple. It’s very easy. And you’re going to be surprised how quickly you can build this entire website. If you don’t have a logo, will learn how to make a logo, scroll down. Notice how these items animated out will learn how to do that. We’ll learn how to make these category sections and many cases. Those are services. For example, scroll down. We’ll learn how to do that animation, but will also learn how to remove the background from that animation so that it just has the girl coming in. Well, learn how to do these call to action areas and notice how they also animate it in from the right and the left.

And then we’ll learn how to make the buttons grow when we hover over them, scroll down.

We’ll learn how to make an image Carousel. In this case. It’s just images of words of wisdom, but they could be any images you want and then we’ll learn how to do another animation similar to the one we did above and then if you need an email newsletter will be on integrate that into your website and then we’ll learn how to make this footer at the bottom. It looks exactly the same on all pages.

Under about one, how to make this fancy header and then we’ll learn how to integrate text. So that it can wrap around a picture, like it does here and then we’ll learn how to import the words of wisdom section. So we don’t have to create that again. We will not be adding a shopping cart as part of this course, but once we have completed our website, I will provide a link to the video shown here in case you want to add the shopping cart later.

We’ll learn how to make this super fancy gallery.

This is we scroll down how neat those are when they slide in together.

And this is also a lightbox. So any of these we pick on, it’ll bring it up and we can scroll to the left or the right.

You close that out.

And then we’ll learn how to make a fully functional blog with a unique header and then individual blog items like this. And when you click on one of those,

we’ll learn how to format the blog post to have all these extra features, nicely formatted like that. And then we’ll learn how to make this contact us page where we have a really nice clean form like this. And then there, the bottom will have a map, and the map and zoom in and out, and change it to whatever you need it to be. Now. You should be able to learn everything you need to know in about two hours time. I know on the surface, it could look intimidating super complicated. But trust me, you can do all this. I’ve got step by step all the way through showing you exactly what to do.

And if you run any trouble, just leave them below the video. I’ll be more than happy to help you out.

So, we’re ready to start on our website. But before we can build a website, we have to have a place for our website to live and that’s what web hosting does for you. Otherwise, you’d build a website on your local computer. But only you’d be able to see it. You want to be able to have the world, see it? So you have to get hosting so everybody else can see your results.

Finding great web hosting Solutions in The Matrix of hundreds of choices. Can be frustrating at best. You have to understand that nearly all web, hosting review sites. Make sure that the web hosting company, they’re affiliated with always get the best review. So, basically that web hosting companies, number one to them, because they get paid. If you decide to use that company, I have been hosting websites for over 30 years. With the first five years of being me supplying, my own hosting, I have used at least 10 of the hosting company shown here, either personally for my clients. Obviously, not all web. Hosting companies are created equal and there are only a few that stand out from the rest.

But how do you reveal the best web hosting provider with all the fake reviews out there? As puzzling as this might sound? I was able to find my answer. While not allowing my own bias to interfere for me. I like to turn problems inside out. In this case. I was looking for the web hosting review that reveals a web hosting company. That sucks, the least. So first, the quick answer the question of who is the best web hosting company for me as simple hands down its HostGator HostGator is definitely the best web hosting solution for me my clients and for web Yoda, but the obvious next question is why is host?

Under the best choice. Well, what if you did some research to try to find some authentic web hosting reviews and they settle on some results from PC Magazine. You have to understand that PC Magazine has been around for nearly 40 years, providing essential technology information to the end user for our purposes. Every year, PC Magazine does an editors Choice Award to determine the best. Web hosting companies. And shown here are the top six web hosting companies for this year with HostGator being number one. It turns out the HostGator has been rated. The number one web hosting Provider by PC Magazine for many years. Running. Basically HostGator. Collectively has

Features you need their server reliability is amazing. There 24/7. Support is amazing. Their prices are good or better than anybody out there. I personally been using HostGator for more than three years. Now. I host over 200 domains and websites with them web, you to also decided to go with HostGator for all their needs. In fact, web you to partner with HostGator, and as part of that partnership, web you to students receive up to 75% off, plus a free domain name. Now, for you, to take advantage of this offer, you simply need to go to your browser and type in hostgator.com, front slash web Yota. This takes you to

To the partner page for HostGator and web Yoda and it reveals our three choices for hosting plans currently. As part of this partnership, HostGator is going to offer us a free domain name provider. We sign up for one of their annual plans and it turns out this is actually the most affordable choice for us. If we scroll down, we can reveal the pricing for each of the plans. All three of the plans come with one click install. So that means, when we go to install the software, it’s going to allow us to build our website. We can just click a link and it’ll install everything for us. They also come with unmetered bandwidth, which means we don’t pay for the traffic.

They come to our website, no matter how small or large that might be. And finally, they also come with a free SSL certificate, which typically runs around $99 a year. And you say, okay. What is that? What do I need that for? Well, that’s a little lock up here. In the top left. It allows your pace to be secure. So the information going to and from your website is secure at this point, you need to decide which one of the plants is best for you for our purposes. I’d recommend the hatching plan. If you have one domain or the baby plan. If you plan on building multiple websites, and then if later you find, you need additional.

Features, you can just upgrade to the business plan and pay the difference. So, in your case, you probably need the hatchling plan, which is a single domain. So we’ll choose that. The first step is to pick a domain name. That works best for your purposes. In my case, for this example. I’m going to use choose my domain name and if we click to the right, it’ll tell us if it is available. And in our case it is available.

So we’re going to scroll down. The next item is domain privacy protection. And basically what they’ll do is for $14.95 a year, they’ll hide your name, your address, your information, like your email, and stuff like that, from people being able to see it. Now for me. It’s going to be on the website anyway, so I don’t feel like I’m giving anything away. So I’m not going to choose to pay for that next already, picked our package type. We chose the hatchling plan because we only have one domain. So we want to look at our billing cycle within the billing cycle. You purchase one month. It’s five dollars and 48.

But it’s only for that first month. And then the price goes up. If you go all the way up to 36 months. It’s going to be two dollars and seventy one cent and it’s going to be 61 percent off. Now, to get the free domain. You’re going to pick 12 months, 24 months, or 36 months. So let’s go ahead and pick the 12 months. It says, seventy six dollars and forty cents, but let’s see if we can do a little bit better than that. Now, we’re going to pick a username. In my case. I’m going to pick admin Yoda and a security pin. Then we want to put in our billing information. He’ll scroll down to additional Services. Now, we don’t need any of these services.

I’ll explain them real quickly. The first is an SSL certificate. We already get that for free. So we don’t need to add that. The second is for them to protect us from hackers. I know firsthand, they’re going to give you protection whether you ask for it or not. So there’s no reason to pay for this additional thing. They’re going to want to protect their servers from both the internet and from you. So they’re going to definitely stay on top of this. Next. We don’t need to pay for an email for our domain name. I’m going to show you how to make an email forward for your domain at no cost at all. Next. I’ll for a backup service where to do daily backups, but I know firsthand. They do monthly backups for you and also,

So if you click on this link at the very top up here, I’ll go ahead and give you a video that will show you how to make your own backups without having to pay them a regular fee. Like that will turn that off.

And finally HostGator offers some SEO tools for nearly three dollars a month, but there’s plenty of free tools out there. So we’re not going to worry about that. If we scroll down,

You want to make sure the web Yoda coupon code automatically spawn in here. So you get the best possible price and we look down and we see that now we’re at $33 which is really a great deal that’s going to be for the whole year. It also includes our free domain name at no cost to us and that comes with 24/7 365. Support instant activation of our account money back guarantee, which is awesome. 45 days, collectively, all these features, leave me feeling very confident that I’m making the right decision. Today. We’re going to scroll down. We need to agree to the

Terms and now we’re ready to check out. But in my case, I own the domain I’m going to use. So I’m going to do one last thing at the top. So scroll to the top and I’m going to choose I already own this domain.

And I want to change this to say, choose your domain name.com. That’s the one I own. So now we go back down to the bottom and we’re ready to check out now.

And I purchase is complete. It is. Now setting up my account.

Once our HostGator Hosting account is complete and ready to go. You’re likely to get a survey. It looks like this one, but at this point, we’re going to go ahead and go off script and save ourselves a lot of time and a lot of questions. If you didn’t have this video to follow obviously, following these steps would probably get you to the goal that you wanted to do, or we’re going to be able to get there faster and easier. We’re ready to set up, our email forward and install WordPress. So to proceed, you’re going to go ahead and head to your email and you want to look for an email from hostgator.com that says your account info at the Top, If You

Is a domain name while setting up your HostGator account, then the next piece of information will not apply to you. If you already own your domain name and didn’t purchase one with this process. You’re going to need to get your domain name to point your hosting area to do that. You need to point your domain name to the name servers for HostGator. All of my domain names live at godaddy.com. So I needed to go into the DNS at my GoDaddy account and point that domain to the HostGator name servers as shown here. Now. If you’re not using godaddy.com, it should be a similar process. And if you have any trouble just contact your

Main company and they can give you further assistance to log into our Hosting account. We’re going to need our username, and we’re going to need a password. We’re going to take that password, and we’re going to copy it to the clipboard. And now you want to go to the control panel, which is how you access your hosting space. So, we’ll click on this link and that takes us to the control panel, login page. Now, my username and password are already there so I can just choose login.

And that takes you to your HostGator control panel, also known as your cpanel as promised. I want to quickly show you how to make an email forward within the email section of your C panel. You’ll see the email forwards option called forwarders. The. Easiest way to find this option is to type forward in the search box, which reveals the forwarders option, then click on the forwarders icon. Now, we’re ready to set up our email forward. We’re going to choose add forwarder and we’re going to put. In this case. I’m gonna put Yoda

There’s my domain name. And where do I want to forward to? I want it to forward to in my case Yoda at web.com.

Add forwarder.

And now, any email sent a Yoda at choose your domain name.com will be sent to my email address Yoda at web. Beauty.com., Obviously, this would be your domain name and whatever email you wanted to send to. Now, we’re ready to install WordPress. If we click on HostGator the top left, it takes us back to the control panel because the options shown below are always changing. I wanted to give you the most reliable method of getting the same results. You see in the video in the search box below type the word soft and this reveal the softaculous. App installer then click the sought a she owes icon to load.

Task ulis.

Now, in the search box, type WordPress, this reveals a WordPress installer. Now, simply click on the word, press installer to load the installer. Now, before we proceed with our WordPress installation, I wanted to address how to deal with WordPress installation errors and very rare occasions. When you’re trying to install WordPress, you may get an error. I’ve already installed WordPress so that I can demonstrate that error. Then I can show you how to correct the era then we’ll install WordPress correctly. So let’s go ahead and click on install now like we think this is going to work and don’t worry about the settings right now. We’ll worry about

Next time through. And I’m going to click on install at the bottom. It starts the install.

And then it gives you an error. Now in this case. It’s just telling me that already exist. But this air could be any area where something went wrong. Our goal is to get rid of the install are, so we can reinstall correctly to get started. Click on soft Aesculus at the top left. Right here is a summary of our installations. If we click on that, it shows a complete list of the installs. We have on this account. At the bottom of the list, is the newest, install. This is the WordPress that we want to replace, so we can click the trashcan at the right then scroll to the bottom.

Choose the remove install button. Click, OK because we’re sure that insulation has now been removed and now we’re ready to install WordPress. So at this point we can go back to soft Aesculus.

Choose WordPress. And now we’re back to the installer and will click on install now. And we’ll go ahead and proceed to install our WordPress. The first option is, which version do you want to use? The default will be the latest version will use that. Next, you’ll choose your domain. If you have multiple domains will be in that drop down. Now over here. It says, what protocol do we want to use? The problem is it can take a little while for the secure key to be activated. So we’re going to go ahead and turn this off for now, we can activate it. Later.

So we’ll just choose the regular one like that and it shows that currently are SSL certificate was not found and that’s because it takes HostGator about 24 hours to get that up and running under site settings. The site name is the company name. So let’s say this was for web UI put web Yetta and then the description is whatever the description for the company is. So let’s say I put free online courses.

You can leave this unchecked. We want to pick a username and a password. I’m going to pick Yoda user. Then you want to pick a secure password. So let’s hide that. So I can put a secure password in there. Now. The admin email is where any email associated with your website will be sent. So for example, if you need to reset your password, that’s where it would go. Now since we didn’t set up this email forward, that’s not going to be good enough for us. So in my case, I’m going to pick one that does work. So for me, it’s going to be o-w-t-dot-com for you. It’ll be whatever your regular email address is. You can choose.

Different language if you like. We don’t need to select any plugins. We’re going to do all that ourselves. No reason to make any adjustments to the advanced options and no reason to select a theme. Now we’re going to do that ourselves as well. When the installation is complete. Where do we want to send details to all use the same email address and now I can click install.

This says that it could take three to four minutes.

I found, it doesn’t take really that long at all.

Now that WordPress has been successfully installed. We’re ready to open up a new tab, and look at our website. At this point. We’re probably going to have to take a small break and that’s because we just set up a Hosting account that has a new domain. The hosting’s immediately available. But the domain takes a while to propagate across the internet, so that it’s able to be accessed to test to see if your domain name is ready. Simply open up a new tab in your browser and go to your domain name. And if your domain is not ready, you’ll get a message that says this site cannot be reached.

So you’re likely need to take a break for about two hours and then come back again and go back to your domain and refresh and see if it works. When it’s ready. You’ll get a page that looks like this one that says website, coming soon, or you might get your new website homepage. So let’s go ahead and close that test tab. Now. We’re looking at our completed WordPress installation page again. Now that WordPress has been successfully installed. We’re ready to open up a new tab, and look at our website to access our website. We simply go to our domain name, and go to our website.

Before you can start editing your website, you need to be able to access your web site. Admin to do that. You simply go to your domain name. Front slash wp-admin. Hit enter a login box will come up now. Simply enter the username and password you created during your WordPress installation. So in my case you had a user password paste that in hit login.

And now we’re logged into our WordPress.

So, if you’ve been following along with the video, you probably already know by now, that self to tastic.com already exists. So for us to build the new website, we’re going to have to have a sample area. So in this case, I’m going to build sample Dot self-test, essec.com, and I’m going to go to WP Dash admin to bring up the admin for her website.

In my case. My username was already there so I can paste in my password.

And login and now I’m at the fresh install for Bethany’s new website. Now. One of the first things I want to do is get some things set up for us. And so if we go over here and we highlight over where it says self tastic if I right click on that, I can open the link in a new tab and what that did was it opened our new website in our second tab.

And now I want to go to the Bethany’s live website in a third tab so we can follow along in real time. Exactly what it is. We plan to accomplish.

In most cases when I build a new how-to video, I make a script for that video so that it’s easier for me to create the video. And at some point when I was using the script in a previous video, a student pointed out that I should make that script available to everybody since it was very useful. Well, it was a great idea. And so that’s what we’re going to do next.

So let’s go ahead and open another Tab and to get to the script. We’re going to go to web Yoda.com front, slash self tastic.

In the last thing we want to do is download all the content I use within this website. So when you’re following along you can build the exact same website. So I’m going to open up another Tab and this time I’m going to go to web Yoda.com front / content. And now I’m going to scroll down to the project we’re working on.

Self tastic.com. And that was another way to get to the script, but we’re going to click on this link here.

And it’s going to download self tastic for us.

And when it’s done on mine, I can click on that and show in a folder.

And you see it’s in my downloads folder and then I can, right. Click on the file. I can choose extract all.

Click on extract.

And now it makes a folder containing all the content. I need opens it up in a new window.

So I can close that one. Bring that over here. And when I click on that, this is all the content. We’re going to use to create this website.

So I can go ahead and close this tab. In this tab is the script for building the website and this tab is Bethany’s real website in this tab is the site, we’re going to build and then this tab is our admin for our WordPress, so we can build the website. Now that we’re ready to get started. I wanted to cover a couple of tips that will really help you out. First. Some subscribers have pointed out that I tend to talk too fast. This is unavoidable. As my processor, runs a little faster, like a child’s processor, probably because I refuse to grow up. Fortunately, YouTube offers a feature to slow videos down to me.

Your needs. So for example, I’m going to go to this video in a new browser window. Now, within the video. I’m going to choose the settings gear. I’m going to choose playback, speed .75. Now. This is what 75% sounds like, which should probably meet your needs now. I’ll choose playback speed again. I’ll choose normal and we’re back to normal speed next. I want to scroll down and within the content under the video that I provided. There’s going to be an

Our set of timestamps that allows you to pick any particular spot in the video to proceed. Let’s go ahead and close that Tab. And the last tip I want to give you is the script itself. When you go to the script. It’s got a lot of information here. Tells you the plugins. We’re going to cover that anyway in the video. It tells us about the Astra theme, then it has a whole bunch of royalty free video clips. You may be able to use royalty free images, you can use and then it has all the notes. I’m going to need for the class. For example, all the colors. I’m going to use are found here. Now, two things that are nice within this

As if you need to find a hex color. And we’ll talk about that, a little later. If you click on this link, I’ll right click and open link. It comes up with the ability to pick a color. So let’s say, I wanted to pick a red. And now this number right here is your hex color. All you have to do is click this icon and it copies it and now you have that color, alternatively, the other one will right? Click on this and choose open link. This gives you the ability to pick this type of color and the digit right here is to say how much transparent it is. So

Watch when we go like this, see how that gets transparent right here. So that gives you some idea. Here’s your color settings, and then here’s how transparent it is. And then again, you can click there. It makes a copy of it, and you can use it in your website. Let’s go back to the script and now you’re into the getting started section. These are all the notes I made for myself, so I can make the video, but you can also use these to your benefit. When you scroll down, you’ll probably notice to the left of Yoda, you talk too, fast is a bunch of W’s and you’re going to say to yourself. Hey, you do why all the extra W’s?

I will tell you Bethenny decided she was going to get a new kitten. The kitten decided it wanted to play on my keyboard. It hit the W and I decided to leave it in the course.

Okay, random facts.

We’ve already covered the hosting, we’ve already covered WordPress and now we’re going to jump into themes and plugins. Now, for the most part. I won’t be showing the script. I’m just going to be using the script but you know that it’s there for you as well now. Admittedly. I’m no Bob Ross, but I definitely do my best to keep things fun and easy. I hope the tips. I just provided. You will ensure your experience building. Your website will be met with confidence and enjoyment.

So when I go then go back to our WordPress admin.

At this point, if you already have a website, then there’s really no reason to watch the steps on how to build a website. Instead. You can go ahead and proceed to the section called enable SSL, which is the first step in the process of adding a shopping cart to your website.

So the first step in building Bethany’s website is to remove all the stuff that’s not going to be part of her website. So let’s go ahead and click on pages first and we don’t need any of the pages. They have here. We’re going to make our own, so we select that checkbox are and it selects all of them under bulk actions. We’re going to choose move to trash and then we’ll choose apply. And as an additional step, I like to click on trash.

Choose them all again. Bulk actions, delete permanently apply. And now we want to get rid of all the plugins that were pre-installed because we’re not going to need any of those. We’re going to use all of our own. So I’m going to go down to plugins and this brings up a list of all the plugins that were pre-installed again. I can select next to plugins that checkbox and it chooses, all of them bulk actions and before we can delete and we have to deactivate them. So we’ll choose deactivate.

Date. Apply now. I can choose plug-in again. So it selects them all bulk actions.

Delete apply. Okay, because yes, we want to delete them and this will remove all the pre installed plugins. Now, we want to add the theme that we’re going to use for Bethany’s website. So we’re going to go to appearance.

Themes.

Choose add new and we’re ready to upload a theme. The first we’re going to download the theme we need, but you might say to yourself in here, all the things when I just pick the one I need. Well, the answer is you could do that, but I can’t guarantee that the theme we’re going to use. Or the plugins. We’re going to use are always available in all environments. So if you don’t have your hosting with HostGator the theme and plugins may not be available in your environment to make sure the theme and plugins we need are going to be available. I’ve stored in permanently on the web you to server. So let’s

Didn’t get our theme now. So open up a new tab, and we’re going to go to web youtube.com front slash themes’.

Scroll down to the project. We’re working on their self Dash tastic.com.

And we’re going to click on Astra theme, that takes us to the Astro website, but it also downloaded the Astros theme right? There we go ahead and close that. Now we want to go to web. You to.com, front slash plugins. We want to download the plugins we need for this project. So again, we’ll scroll down to this project self Dash tastic.com, and we’re going to need to download all of these plugins. And as we download, and I’ll give you a little bit of information about what each one of them is.

The Astros starting sites will click on that. That’s going to allow us to install a fully functioning complete website including a shopping cart in case we want one then we’re going to download header footer for Elementor that’s going to allow us to build a free header and footer for our websites instead of having to pay a premium for it. Then we’re going to download profile, press and profile press allows you to set the icon for your blog, instead of being whatever the default one is, and then we’re going to download social sharing in this plugin.

Makes it real easy for someone else to share your blog posts. And then we’re going to download the classic editor. A lot of updates and changes have made to the WordPress environment. And by having the classic editor, as well as the classic widget. It ensures that we all see the exact same environment. So that what you’re following Along on your admin matches. What’s in the video? They’re going to download duplicate page, and duplicate page allows you to take a page. You’ve already created and make a copy of it and then edit that to be.

New page which is significantly faster than building a page from scratch. Now, we’re going to download really simple SSL. What this plug-in does is ensure that the secure pages are the default for your website and next. We’re going to download the woocommerce, stripe Gateway and the woocommerce stripe Gateway is what allows you to accept credit cards on your shopping cart in case you’re doing the shopping cart and now we’re going to download woocommerce taxes and shipping and this gives you an automated way to do taxes and shipping in case you add a shopping cart to your website and

Finally, we’re going to download the woocommerce plug-in itself, and that’s the plug-in that allows us to add a free shopping cart to our website. So now all of those have been downloaded. I’ll go ahead and close that. And now we want to go to our downloads folder. So I’ll bring mine up and it shows everything that we’ve downloaded so far. I’m going to go ahead and click on date and that’s going to allow me to see these in the order that they were downloaded. So now, let’s go back to our WordPress admin. Now, we can choose upload theme and now we’re going to choose a file.

You want to go to your downloads folder. Then we’re going to select Astrid zip. That’s our theme will choose open.

Install now, and once it’s installed, we need to activate it and it’s that little link right there and that activates our theme.

In almost all cases, you’ll immediately be able to update it to the most recent version. So we’ll choose update. Now now our theme is updated. Now, if we come back to our website and hit reload, you notice it, it’s changed a little bit.

Still nothing like the sight. We’re going to build but we’re getting closer.

So let’s go back to our WordPress admin and we’re ready to install the plugins. We’re going to need for our website. So we’re going to choose plugins, add new. Now. We want to do upload, plug-in choose file want to be in a downloads folder. And the first one we’re going to do is Astro starter sites. So we’ll select that.

Choose open.

Install now.

Activate plugin.

Ready for the second one, add new.

Upload plugin. Choose file. The second one is header. Footer element or

Open.

Install now.

Activate. Plug-in ready for the third one.

Add new.

Upload plugin.

Choose file.

WP user Avatar. That has a new name profile press, but the original file name is still the same. So we’ll choose that one.

Open install now.

Activate plugin.

We’re ready for the next one.

Add new.

Upload plugin.

Choose file.

The next one is social sharing by Danny.

Open.

Install now.

Activate plugin.

Add new.

Upload plugin.

Choose file in the next one, we’re going to do is to Classic editor.

Open.

Install now.

Activate plugin.

And choose add new upload plugin.

Choose file.

The next one is classic widgets.

Is open.

Install now.

Activate plug-in. Again, add new upload plug-in choose file.

Duplicate page.

Open.

Install now.

Activate plugin. Now at this point, if you’re following along in the script, you’ll see that we’re not going to install the other four at this time. We’ll take care of that later. So we’ve installed all the plugins we need for now.

Also, at some point profile press may ask you to create Pages, we’re just going to do. No. Thanks when it asked us that because we don’t need that. So go back to our WordPress admin. And another thing you’re going to find is always a lot of little advertisements. You can close each of those and try to clean things up a little bit.

This says, to install Elementor that’s going to be taken care of a different way. For us. Next thing we want to do is update our plugins. So we’re going to choose to select them all.

Bulk actions update apply and we can scroll down and watch it. Do its thing. Now, all of our plug-ins are updated and now we’re ready to install our starter site. Now, watch what happens when I click right here. I want to see the library.

It’s going to give me this. Sorry, you’re not allowed to access this page. Don’t know why sometimes it doesn’t do that. Usually it does. So I’ll click the back arrow.

And then we’ll go back to the starter sites. When we click on C library, again. It’s going to work. So within the Astros starting sites, you get to choose the type of page builder, you’re going to be using, and we’re going to use the most popular one in the world. And that’s Elementor. So we’re going to choose on that and this brings up a complete collection of all. The Astra starter sites that Astra theme has to offer these. Come in two flavors, the ones that premium you’d pay for in the ones that don’t say premium are free. So, for example, we can go here and choose.

A doing only see the free ones. If we go here and choose premium. We’re only seeing the premiums clearly if you have a website that needs to be a pizza place or something else in here that’s already built that matches exactly what you’re trying to do. You may want to consider their pro version. And if for some reason the starter site you need is a pro version. You want to go to the link WP Astra.com front slash web Yoda, and this is going to guarantee you the best possible pricing on the pro version. Now in our case we’re going to be using a free version. So

We’re going to ahead and choose from the all list will choose the free ones and then we want to choose from these only the e-commerce because we’re going to be building a site. That has the potential for adding a shopping cart to it. Now. What we’re looking for is the cosmetic store. That’s the one we’re going to use as a starting point. I’ll click on that.

And I want to import the entire site. So I’m going to click import complete site. And then from here, it’s going to ask a couple questions.

Choose intermediate. For I am WordPress. Intermediate, and why are we building this? We’re building it for ourselves now under Advanced. There could be extra options here. So these are the different options. There could be. You want to make sure these are the settings. You have, depending on what options you see. We definitely don’t want to delete anything previously installed because that would delete the plugins. We’ve already installed. But in our case, we only saw these two. We want those to checked. So we hit next now at once some personal information.

Nation right down here. We’ll go ahead and click. Skip. We don’t want to give them any information at this time. And now it’s importing our entire website.

Now, our website was successfully imported, we could click view site here, but we’re not going to do that instead. We’re going to close this little window.

And if we go to our second Tab and hit reload look at there, we’ve got a fully functioning website with a shopping cart already built into it. How nice is that? So that’s for free from Astra themes and you could basically build any website they have in that collection, either the free version of the premium versions and start with a website that’s already completed. I love it. But in our case we’re going to take this website, which is pretty cool as it is and build Bethany’s website, which is I think even cooler.

So, let’s go back to our WordPress. Admin.

Don’t go ahead and close this little window. It takes up space and I don’t like it. Now, since we’re going to be building Bethany’s website. First before we do any of the shopping cart related things. And some people may not even choose to use the shopping cart. We’re going to go ahead and disable the woocommerce shopping cart for now, and then we can reactivate it later when we’re ready. So the first step to do that is we’re going to go to plugins.

Scroll down.

And we’ll just deactivate woocommerce. Next, we want to remove the shop button.

In this case on our website is right there.

To do that, we’re going to go to appearance.

Menus and now we need to choose the menu. We’re going to look at. So we’re going to pull down that menu there and choose primary menu.

It select.

T’. And now we’re looking at the primary menu inside of the one that says shop. I can remove that for now.

And now at the bottom may have to scroll down to get to it, save menu. And now when we go back and reload our site, there’s no longer a shopping cart in there for now.

So I go back to our WordPress admin.

And at this point, I wanted to discuss the things that can go wrong Murphy’s law states, that when things can go wrong. They will go wrong and you will experience this yourself. It’s in my experience plenty of times while building websites that random unexplained things, can go wrong. For example, once I wanted to update my theme and the theme button would not work another time. I clicked on my widgets page and instead of seeing these widgets the page came up empty like this another time on my shopping cart where there should be stars under the review.

We’re just a bunch of s’s. Instead, another time inside of my customized options. Only, a portion of the options were showing up instead of all the options I expected to see.

So I know right now you’re saying to yourself. Hey Yoda. What am I going to do about these things? What happens when they go wrong? I will tell you in most cases, the problems can be resolved with a simple keystroke. If you’re inside the page that you want to fix. For example, let’s say it was this page. I can hold down the Ctrl key and the shift key, and then I can hit the reload button at the top left. And in most cases that will solve the problem in, you’ll see the corrected version.

Alternatively, you might also try clearing the cache inside of your browser. You may try. Restarting your browser or you might also try viewing your website and incognito mode to see what the rest of the world sees. And at this point, if you’re still having problems, just leave a message under the video and we can work on your problem together. Now, as a last resort, you can always restore your website from a backup when things really go wrong. Unfortunately. If you don’t have a reliable backup solution in place, when something goes wrong with your website, you stand to lose everything. I personally use backup buddy, which is saved me many.

Many times over the years, either way. You want to consider a backup solution that meets your needs. If you’re looking to make scheduled automated backups of your WordPress website, where you’re in full control, as well as make manual backups at any time that you can store locally on your own computer. Then you’ll want to check out my WordPress backup and restore video at some point. Now, in my case. I also install the backup, buddy, plug-in in Bethany’s, new website and periodically as we go along. I’ll save where I’m at. In case something goes wrong. I can always restore to where I’m at.

At this point, I’m going to scroll down. I’m going to choose backup buddy. I’m going to choose complete backup.

Watch it, do its thing.

It’s really doesn’t take that long.

And when the backup is complete, I scroll up and I choose download the backup file and this downloads a complete copy of the entire website. And the database in case something goes wrong. And now we’re ready to make some adjustments to the header section of Bethany’s new website. If you look at the real time, when there’s a logo to the left and menu to the right on our is the logos above. Let’s go ahead and get started and making some of these changes will go back to our WordPress. Admin will go to appearance.

It’s customized.

Header Builder.

And notice down here. It shows us the orientation of the stuff. That’s up here. So for example, I can move this one over here.

And it shows that logo over there. I can move this one over here and it shows the menu over there.

Now, we’re going to choose the site identity and Logo button.

And we’re going to change our logos. So we’ll click on change logo. I wanted to point out an interesting Quirk about the media library. Sometimes, when you load the media library, it’ll be in this mode, which is upload file mode. However, sometimes when you load your media library, it’ll come up in Media Library mode where you see the pictures and you see how it could be confusing. If I bring up a screen that looks like this. But yeah, you go into yours and it looks like this, it could be confusing.

So, just keep in mind that if you see this, but you expect to see all the pictures. All you have to do is click on media, library to bring up the picture version.

So let’s go back to the upload files. Now. I can select files here. But the much easier way to do that is to bring up that folder. We have that has all of our content in it.

But we can drag stuff from the content folder directly into here. So I’m going to scroll down and look for my logo.

And there’s my menu logo and drag that over.

I can choose select.

T’, we’re going to skip cropping.

And we’ll scroll down.

I’ll change the next image.

Now, it’s in our library. So I’ll choose it again.

Choose image.

Scroll down and what with do. I want it in this little icon, here says, on a regular computer screen, and I want the with on a regular computer screen to be 230. See how that made it the correct size there. Now, if I click that icon, now, it’s in tablet mode and in tablet mode. I want it to be that size and also, I can move this to the left.

This to the right.

But click that icon again, it shows us phone mode.

I want to go ahead and make that 180.

We want to make sure both of these settings are turned off, which they are by default.

And now we want to upload What’s called the favicon icon. And that’s a little icon like right here, where you see the web, you do one on Bethany’s, you see the self tastic one. And on these two tabs. It shows the WordPress default.

So we’ll choose select site icon.

You want these images to be a minimum of 512 by 512?

We’ll go back to our library. And here’s our logo for the favicon. I use the Ping format for most files. It’s a very versatile format. So I’ll drag that over.

I’ll hit select.

Choose crop image.

And now you see it showed up down here.

And when we refresh this page, it will also show up. So we’ll hit publish their run, it seeing it here just yet. But if we come over here and we hit reload, I held down shift and control line. Did that to make sure I got a better reload.

And now, it shows the new icon, the logos to the left, the menus to the right. We’re making progress. Now, notice this doesn’t have our logo yet. And that’s because this is a transparent menu bar. So, we’re going to go ahead and go back and change the logo and a couple of other places that the logos we done so far. We’ll make sure the logo shows up correctly in your shopping cart in case you’re putting a shopping cart on your website. So if we scroll to the top we can hit customized transparent header. And now we scroll down and we’re

To change these two images. So that logo is right there, choose image again, or change image is that one, hit the choose image button. We scroll down. Now we’re looking at the phone version still, by click that, it displays the computer format. Again. I want to make that 234 the computer as before and then for the tablet, make it 200.

And for the mobile again, 180.

What she’s publish?

Go back to our new website, hit reload. And now we have a nice logo here, but you’re saying yourself, but you don’t have a logo. What do I do? I will tell you, if you’re looking to make a professional logo for your website online at no cost to you, in about five minutes time. Then you’ll want to check out my make a free logo video at some point. The next thing we want to do is to be able to change this font. This font may be fine for you and you’ll need to change it, but I want a different font for our menu.

So we’ll go back into our WordPress. Admin.

I’ll choose X.

And just for consistency. I’m going to show you how to get to these things each time from the top menu. So we’re going to go back to appearance, customize.

Header Builder choose the primary menu button.

Choose the design button, scroll down. And here’s the menu. Font option, A really hide this stuff. Don’t they?

Tile, click on the pencil.

And I want the family to be open. Sans condensed.

I’m going to choose 24. I’ll choose publish and back over here, reload.

And I like that, a lot better.

Now, I want to look at how to set base colors for your entire website.

So, we’re going to close that out again for consistency. Will start at the dashboard, will go to appearance, customize Global colors. And now here’s your colors for your website. The only one I’m going to set right now just so you see how it works. So I’m going to choose this and I want to scroll and I’m going to put my background color in there and you’re like, well, where did I get that color from? I came over to our script. I’ll scroll to the top and these are all the colors that

At predefined, me and Bethany sat down and figured out the colors. We wanted. You’ll want to go in and decide the colors you want. And then when you save them in a file, you can always get back to the ones you need for the different things. You need to use them for. So in my case, the background color was this light blue and that’s where that number came from right there.

We came back over here. I can hit publish and you can set all your default colors for your website within here. The what’s there is going to work fine, for what we’re trying to do for right now. And one of the last steps, what we want to do that, have to do with kind of the setup of things is when you come to the website. And let’s say, we clicked on testimonials, notice how it says the word testimonials here. Now, the page name, you assigned to a web page is called the slug name. So in this case, the slug name for the testimonials page is testimonials.

To make WordPress use of slug name as the page, name requires a specific setting in WordPress. And let me show you what I mean. If I come back in here and you go to settings, and then you go to permalinks. This defines, the different ways that your URLs for the pages can show up by choosing post name as the permalink setting. You are telling WordPress to use the slug name as the page name, at the end of your URL. And so if you’re following along and you built your website with a different theme or something like that, yours, may not have the

Permalink set the same way. We want to set them. Typically post name is like better by search engine. So we like to use that. Now, I’ll scroll down hit save changes.

And now if we go back to the website, we’re working on and we click the home button. We’re going to start making this page look like this page. So let’s go back to our WordPress admin and we’re going to choose pages and that brings up the pages that are in our website. And then down where the homepage is out to the right. When you’re hovering over it. You can choose edit with Elementor and that loads our homepage up into the element or editor. Now, the element or page builder is the most popular.

A page builder on a planet and you’re going to find out real quickly. Why? That is, it’s just really easy to use super user-friendly. It’s fast, reliable. All those fun things. Now, before we get started, making changes to our page. I wanted to give you a little bit of background on how this works at the very top. You see these icons? And this is the section edit icon. This allows you to control the section which in this case, is this whole area here, where as this section is that section there and that’s a different type of a sectional.

About that. Notice how it’s got a little border on here. If you click on that, that’s called an intersection see right there.

And keep going down and we click on here. That’s a section in itself. So each one of these, it’s basically a row is, what a section is.

Now, inside of a row, can be columns in this little icon here, defines the column. So as we scroll down, this particular one here, has more than one column in it. That is there, and they’re in this one, here has a column here. A column here in a column here, say see, that’s the section. We click on that. It shows a section in this case. It’s called an intersection. I’ll tell you how that’s different. We’ll use that later, but it’s still a section and inside a section. There’s

Alarms, so a section is a row and then the columns inside of it. There’s a column marker to edit the column by clicking on those. And then, inside of a column. This is a cell. You can put different widgets. So that’s a widget and see the little icon. That’s how you edit the widgets. So, when you scroll down to any area, here’s the section that edits the section, and then here’s the column. If I click on that now, I’m editing the column. And then inside of that. Look, there’s one two, three different widgets.

It’s if I click on that, it’s editing that widget. If I click on that, is that adding that widget, if I click on that, it edits that widget furthermore within each section within each column. And within each widget are three different ways that you can edit. So, for example, where it says are happy clients, if I select that on the left, I can change the content. So here’s the content. I can change the style of that content and then I have advanced settings for that content.

And that’s true for anything. So we come to the top and we click on this content up here. That is the section at the top. Here is the layout, in this case, the style for that section and the advanced settings for that section. And if I go to the column, here is the layout for that column. Here’s the style for that column, and here’s the advance for that column and then inside of this, if I click on a widget, there’s the content for the widget, the

all for the widget and the advance for the widget. So that’s enough to get us started in. The first thing I want to do is change the background from being this cute, girl, to be in the one that’s going to be in our website. So we’ll choose the section at the top and then we’re going to choose between layout style and advanced. We’re going to choose style and here’s the image that we’re going to change. So if we click on that, I need to put the new image. I want to use here to will bring up our content folder. And now, I’m looking for the cover image.

And it’s that one right there. Cover home. I’ll drag that over. And then I’ll choose insert media. And now, it has that image. We can hit update at the bottom. Go back to our website, hit reload, and it’s that easy. Pretty neat, huh. So let’s go back to Elementor. And one of the things you might ask yourself is. Well, where did I get this image? I will tell you if you’re looking to access the best royalty, free photos and images online at no cost to you.

You then you’ll want to check out my best free stock photos and images video at some point or you can simply click on the link at the top, right? And visit it. Now now is that promo mentioned, you can basically get almost everything you need for free online and that’s how almost all the art within this website was collected was to get free images online. So if you’re wondering, well, why don’t we just use a free Bethany picture? Well, she decided she didn’t want to be the clickbait on everything. So as a compromise, I picked a different picture as the main picture for the website.

So now let’s make some changes to our website. This text right here. We’re going to use some of this stuff. I’ll click on that, widget like that. And on the left hand side. It’s already defaulted to content. And in this box, I want to put welcome to and then we’re going to set some style for that. Typography is basically the font and stuff like that. So we’ll click on that. We’re going to set the font to open Sans condensed.

We’re going to choose a size of 23 and the weight, which is how bold It is. Well, set to 100, but 900 looks like that’s what 600 looks like. And we’re just going to use 100. And now let’s change this heading right here. So I’ll choose that widget.

And then on the left will choose content and we’ll type in that. Now. I really didn’t want this all the way across. I kind of wanted to be two separate words. So you’re going to learn a really neat little piece of code. If you do a less than the letter B, the letter R and a greater than that’s literally the only HTML tag ever need to know and that tells it to make a line break and what it did. Was it put cell phone one line and tastic on the other.

Now, we’ll go into style typography. And for the font. I want to use Lynn, Drina, Shadow will choose that, and we’ll set the size of that 21. 22. Look how cool that is. Now. I don’t like the line spacing in between that being so big if you scroll down. Here’s the line height, let’s set that to 100 that way. They’re nice and close and I want to set the margin to 0 and let’s look at what margin is if we scroll to the top and the side of our advanced?

Got margin, and we’ve got padding. Well, I want to set this margin from being 20. I know set it to 0 and notice that it took this space out here as we go along. We will see some differences. I’ll show you how margin and padding are different right now. It would be difficult to tell but both of those things give you a certain amount of space around whatever the item is, but for now, let’s just set that to zero and we’ll discuss margin and padding in depth later. Now for the next line, now, we want to change the text in this widget.

And I’ll choose that one.

Be the best. You will go to style.

Typography.

For this one, I want it to be open. Sans condensed will make this 30.

I’ll change the weight to 100 and will chase a line height of 19 and that just kind of told us how much space we want between this text in this button right here. Now. I want to change this view more button to a learn more button. I’ll choose that widget under content where it says view more. I’ll put learn more and over here for the link.

I’ll put about and now we can hit update.

Go back to the page. We’re working on hit reload. And while look at that we’re making progress. So let’s go back to our element or and now I want to add the intro video but to add the intro video. I first have to add it to the media library in to add a video. I have to do it outside of Elementor. So I’m going to choose this icon here.

And then I’m going to choose exit to dashboard. Now. I’m going to choose media and that takes us to our media library. And this is the same one. We’re using inside Elementor. It’s just that some things you can load here that you can’t load directly into Elementor. And now I’m going to go to our content folder and I’m looking for our intro video. And there it is. I’m going to take this, drag it to the left. Now that that’s loaded. I’m going to select it so that I can get this link.

Over here, and I will copy the URL to the clipboard, and now I can close that.

We’ll go back to pages.

We can go back to home edit with Elementor, and now we’re going to select the section at the top again. We’re going to choose Style.

But instead of choosing it to be a background, which is just the Classic one. We’re going to choose this little video choice, and here we can put in a link. So we’ll paste our Link in there.

And look at their, our animation automatically worked right out of the box.

Now, it’s playing over and over again. Here’s an option. Play once will turn that on. So that way it only play once and then when it’s done, what we see is that there’s no background no more like what it was there. What happened? Well, the reason is is now we need to scroll down and there’s a section called background fall back. We want to click on that, and we’ll choose the image. We already uploaded like so,

Hit insert media and now it’s there. We can hit update and that allows it to have the image that’s going to be there after it loads. We’ll go back to our page and hit reload and watch the animation. But also notice is text is already on the page right there.

But on Bethany site, when you reload it loads the intro, and then right after the intro finishes that little menu slides in boom, pretty neat, huh? That’s what we want to do. So, we’ll go back to Elementor.

And this is the call me want to set to delay. Until after the intro video has completed.

And so, what we’re going to do is we’re going to choose that column.

And now we’ll go to Advanced and under Advanced. One of the options is motion effects.

And for the motion effect, we want to choose fade in from the left.

And then we’re going to set the animation to 8000. 8000 milliseconds is 8 seconds, which is a little bit longer than our animation is. So we go ahead and click update. Go back to our version of the website hit reload.

Now, the intro shows.

and at the end of the intro,

Slides in the text really neat, huh? But you’re saying yourself, you know? That’s pretty neat intro, but I have no idea how to make one. I will tell you. If you’re looking to make a free video, intro for your website online at no cost to you. Then you’ll want to check out my, make a free video, intro video at some point. Now, I’ll go ahead and go back to our element or and we’re going to scroll down and we’re ready to work on this next section. Now, in this section, I want to build a category section.

Typically use it. If you had services that you wanted to highlight or feature in your website, this particular piece of code right here. I don’t need it so I can right click on that little icon and choose delete and now let’s start working on our category section. First will delete this widget right here and on so I can right click on that little icon and choose delete. Now for this header right here. I’ll select that icon. And over here. I’m going to change that title to beat that text and the color we’re going to use if we go to.

Set style. We can choose a color. I don’t want to be that color kind of a brownish color. Now, to get out of color mode. You just click the tab again. So it kind of toggles. What? Open and close like that. Now for typography the family. I’m going to use this site pretty much we’re going to use open sand condense on a whole bunch of stuff, and the padding around this. So if we go to Advanced,

The padding again. We’ll talk more about this a little bit later right now. See this icon, that’s linked together, that’s linked apart, if they’re linked together and you add one, they all add together and if they’re linked to part, if they’re not linked, then you change them individually. I want them linked together. That’s the default, and I want to put 20 in there.

And that puts space around that particular item.

Again, don’t worry too much about the difference between margin and padding right now. I’ll discuss it a little bit later when I have a good example for it. Now. I’m also going to delete this widget. I don’t need it.

And now we’re ready to add a widget. We haven’t done that yet to your element or environment to add widgets. We have to get to the collection of the widgets to get to the collection of the widgets. We choose this icon right here.

And these are the different, widgets we have at our disposal.

Notice some of these have locks on them because we don’t have access to those.

One we want is the one at the top is called intersection. Basically, it allows you to make a section inside of a section. So if you hold down on that with your mouse, you can drag it over and see that little blue line. That’s where it’s going to land at its kind of tricky sometimes to get it the land where you want it. I want it to land under the text. And now I have this new section now, in this first box.

I want to put an image so we’ll go back to our collection of widgets and here’s the image widget.

I can drag that over. And again notice I can choose where it’s going to land by moving it around and I want to in that box right there, just like that. And now I want to set that image to be one of my categories. So on this side over here, I can click on that image and they’re not in here yet. So let’s go to our content.

And we’re looking for categories, and we’ve got six categories. I’m going to select all six of those, and I’m going to drag them over all at once to save me some time later. Now. They’re all loaded. If you click on it that tells you which one you’re going to select and over. Here. It tells you the particular name of whichever one it is. So, in my case, that’s my first category I want. So I select that and insert the media. And now we’ve added an image to our website, the easy, huh?

Now what I want to do is show you a trick for reusing widgets. So here this widget here is a title widget. If I click on that. It says it’s a heading.

I’m going to right click on that and tell it to duplicate. Now. I have a second copy.

Now if I move my mouse over the little Widget icon edit, I can hold down on it and drag it wherever I want it and I want to drag it under this picture like that. And then I want to change this text.

I have that one selected already over here and change the title to say personal development. I’ll go to style typography.

In this case, I’m going to change the font. We’re going to choose work Sands and I’m going to choose a size of 22 and now I want to make a copy of this because I want to be able to reuse the layout that I already have. So just follow me on this if I wanted to duplicate this picture. I could right? Click here and duplicate. What I want to do is duplicate the whole column. So I’m going to say right click and duplicate now. I want to another copy. I’m going to say right, click and duplicate.

Eight. Now, I’ve got three copies and now on this fourth column. I want to get rid of it so I can right click on that and choose delete. And now I have the three that I want. Now at this point, I can right-click on that intersection.

And choose duplicate. And now I have six of those. So you can see quickly instead of having to build everything from scratch. We have a lot of the stuff that we’re going to want to use already and now we can customize these. One of the things that I don’t like is, how much space is around here. So, let’s choose this one.

I’ll come over to Advanced and we’re going to set this to 0 even though that worked for the top title. It didn’t work down here. I’ll set it to zero.

Now, disconnect these and then I’m going to set the bottom 1220 by itself.

Now I need to fix all the other ones. The same way it did this on purpose because I wanted you to see how to copy the style. So here we made a style change on this one so I can right click on this one, copy it and when I right click and set of pasting it to make a new copy. I’m going to paste the style and it just fixes the style and I can do that for each one of these.

Thanks. See, that’s a neat way to be able to make changes quickly to the style without having to do all the work over and over again. Now. I just need to change out the pictures and the text to match. So to change this one.

I choose that image. I come over here.

And I pick my second image.

Hit insert media and then I’m going to choose that text change the heading over here.

And now that one’s changed. And then I’m going to do a little magic to get all these a change real quick since you know how to do that. And now they’re all changed, little fun. Fact. That’s a picture of me in Bethany at one of our favorite resorts at our wedding. Now if we click on update and go back to our website and hit reload, and you don’t have to wait for the intro to load before you start scrolling down just so you know, and there’s our new section.

Now, in Bethany’s, when you hit reload on it, notice that these things come out to the sides like that. And so we want to do that next.

So, we’ll go back to Elementor, and now we’re going to choose this column icon.

We’ll go to Advanced.

Motion effects.

And we want to slide in from the right to the left. So for the animation.

We’re going to slide in from the right.

Then we’re going to put the delay at 1000 milliseconds, which is one second.

Now we’ll right-click on that column copy right? Click on this column pay style and now that one set it did move but it did set it. So now we’ll come over to this one, select it Advanced motion effects. We’re going to slide this one in.

From the left.

1000 milliseconds, which is equal to one second.

Right. Click copy.

Right-click. Paste Style.

Now, for this one, will select it Advanced motion effects.

And then this one will choose zoom in again. One second.

Right. Click copy.

Right-click. Paste, aisle.

Now, we can update.

Go back to our website, hit reload, and notice how those slide in, but let me do it again. Notice how this one is on top.

So they’re stacked in a different order that I want them. Basically we want this one in this one to be on the top and there’s an easy way to do that. So go back to Elementor. We already have this one selected.

Under Advanced for Z axis. We put a number one, the default 0 that will make this one. Sit a little bit higher and we’ll do the same thing here.

Advanced.

Z index of one hit update will come up here. Hit reload, and they’re coming in exactly the way we want them now. Ready to work on our next section. So let’s look at Bethany site. Let me scroll down.

We’re going to make this animation right here and we’ll also learn how to make the background transparent for the umbrella girl. So now let’s go to our script and we’re in the inspiration section and we’re going to learn how to make the girl transparent. So first we’re going to go to unsplash and we’re going to do a search for girl and Briella yellow. And there she is.

Here, we can download that. If we want, it gets added to our collection in our download folder and you get your download folder. You see the picture that’s there. Now. It’s going to be the whole thing. The question is, how do you get Just the Girl part cropped out? That’s a really good question, right? I will tell you if you’re looking to edit photos and images online at no cost to you. Then you’ll want to check out my how to edit photos online video at some point. So now let’s go to our

Now, we want to go to the photo scissors.

This is a website that allows you to crop a picture.

And it says, upload an image show you how easy it is. Here’s my images. There’s the one we’re interested in. Click open uploads the picture.

Notice that it crop the girl out. No problem.

You can take this and go like that. Obviously. I made a mirror image of this, but it gives you generally the idea of what you’re trying to do and then you can choose download.

Download resolution.

The low resolution is fine for what you want to do.

And you can go back to your element or we scroll down. So now that we’ve successfully made our own Briella, girl have a transparent background. We’re ready to start on our inspirational section and then add her to it.

The first thing I’m going to do is going to change this background. So we’re going to click on this and it’s called an intersection, this one right here.

See how there’s an intersection. Is there in a main section is there we want to be on the intersection. We want to be on that section there specifically.

And then we’ll go to style and then we’ll click on the picture and now we need to upload a picture and we want to go to our inspirational pictures. So here’s our content and scroll until we get there. They are inspirational pictures.

And there’s the background, I want drag that over hit insert.

Now.

We want this to be Center center for the position. It already is but check that to make sure instead of size cover. Let’s change it to contained. And now in this intersection, there’s two columns, a left and a right. If you grab the edge in between, you can slide it left and right and make it change the size and get it roughly 240 percent on the left and fifty or sixty percent on the right. You can also choose the column and then specifically put it to

That’s a little easier. And the other one by default will be the difference. Now. Let’s add the girl will go up here.

To where we can pick from our widgets will drag over an image, and then we’ll add our image. So we’ll go back to our content folder and there’s our transparent girl that we created drag that over.

We hit insert now. Her image has been added. So from here, we’re going to choose advanced.

Do I put some padding at the top? So let’s say, 200 that moves or down a little bit.

And then we’re going to go into the motion effects.

Default, let’s fader in from the left.

And let’s give it a thousand milliseconds or a one second delay for bringing her in like that.

And let’s let it come in a little more slowly just because we can tah-dah. There we go.

Now, I’m just hit update, just out of curiosity. It’s nice to see our work sometimes come over here. We’ll hit reload.

And there she is.

We’re making progress.

Back to Elementor. We’re going to choose our section tab right here to edit the section itself.

And then we’re going to go to style and see that backgrounds white. We’re going to change it to one of the darker cyan looking colors. And now, we’re going to go to Advanced.

And change this from 0 to 35 and change that 100.

The zero and Bethenny’s. You see a soul wave. Brush thing going on right here. We want to add that. So let’s go ahead, it in turns out. Being at the bottom of the section above, we got to scroll up. Choose that section, then go to style and then we’re looking for shape divider. We’re going to add the shape divider at the bottom and the type of shape divider, we’re going to use is waves brush, so we scroll down and you see that’s what it looks like.

And there’s lots of different ones you can choose from.

It’s worth, checking them all out to try a different stuff.

In this case, we’re going to use the waves Rush.

And then we’re going to set the color to that same blue. That’s in the section down here. See how it matches? Now.

And then we’re going to set the height to 60. There’s a lot of extra space right here.

Going to come back up here. We still have that selected. Okay? To Advanced. And we’re going to change that from 200 to 100. So that brings it in some and this itself will adjust itself out a little bit to bring that down in a second. Make it look more, correct.

Now over here, this particular header is widget. We’re going to drag it below the other one like that. And then this one we’re not going to need. So let’s delete that one. And then this button obviously we can make a button but I want to show you how you can recycle stuff. So I’m going to take this button. I’m going to bring it down here and I will put it right there because we can just use it there and make it work for us. It saves us, the trouble of making one come back up. Now. Let’s work on this first.

Better here, the bigger one and let’s make that say Be Inspired and we’ll go to style, will set the color to be white and we’ll close the color out. We’ll go ahead and typography.

Choose a font of Montserrat. Well make it 80 and make that thickness be 700. Now, the margin for our header.

We go up here. Will click on margin.

And we disconnect it those right there.

Is going to be 29.

And basically, that just allows that to sit a little bit lower.

And so, for this text, if we choose that widget.

I’ll change the text.

To live your best life. Good advice.

Click on Style.

Color as white colors that go into typography font.

Laura.

Well, make this 140.

And we’ll make the weight 500.

And now below this, we want to do an image carousel.

And so we need to go up here and choose this icon that displays all of our widgets. Another one. We want, is called an image Carousel. But instead of scrolling down, looking for it. But you type the word image. It’ll bring up all the ones that have that in common. There’s the image Carousel. We could drag that over that puts it above the words. That puts it below the words where we want it. I can choose that. Now, we need our inspirational pictures.

They’ll bring up our content. These are our six inspirational images.

Drag those over.

Now they’re loaded. We can just click create a new gallery and insert gallery.

That’s got three of them there for now. We’re going to tell this to be large.

And we’re going to sell it to put one per slide and we’re going to say image stretchy Chuckles. Yes.

And that looks about right now. Notice that it has these dots here and it has these left right arrows. So you can have navigation built into the carousel. I don’t want that for this particular Carousel. So in a navigation, I’m going to tell it none.

And that gets rid of the areas of the dots and then down here under additional options.

Pause on Hover. That means if I put the mouse over it, it stopped showing new pictures. Well, that might be nice in some situations, but I want it to continue to show new pictures. Whether the mouse is on it or not, but we’re going to turn that off.

Our animation speed. Let’s set that to 4000 and will change this from being a slider to fading and now it’ll fade in between the different pictures like that.

And now you see, when we added this stuff in there, this wave sits exactly where we needed it to sit, which is really nice. So let’s go ahead and hit update.

We’ll go back to our page, hit reload, and look at that.

Are inspired section is really working. Well, so now we want to work on our call to action section. These little sections that have like an icon, some text and a button there called call to action.

Let’s go back over here. The first thing I want to do. This is an inner widget. So we get a drag it. I want to bring it down to this next section into the light blue section. And then this logo bar right here. This logo Carousel. I can right click and delete that I no longer need that. And now, we want to build out our call to action section. In the first thing we’ll do is put our little brush divider here, but will it put at the top of this section? So you can see how you can do it either way. So I have that.

Option selected, I go to style.

Shape divider. Don’t be all the top this time.

Look there. Waves brush.

Pick the same color as this color right here, like that.

What is that out?

Set the height of it to 60 and we’ve got that part done. And so let’s start to form at this.

I’m going to click on that column and we’re going to choose advanced.

And where this says 020 5025, I’m going to just change it to.

020, 020 just a little less space on that. Don’t waste. So much space. They’re going to choose this icon widget.

And we’re going to go to style and I’m going to set the color a little bit darker and then for the header.

We’ll also go in set the color to the same color.

Close that out. And then typography, we will pick.

Monserrat. Well, make it 32 tall and a weight of 300 and then for the text section will choose that widget.

And I want to go into style and I’m going to use a special kind of alignment. Normally you got left center. Right? I’m going to use Justified and I’ll square things off. It looks a little weird with this sample text. When we put real text in there. It’ll look a little bit better and then we’ll go into typography.

Hey, in a different font.

Railway make this 21 and a way to 200 and then a color for this will be the same color. We used for the icon in the header. So everything kind of matches and I’m going to choose right click on that icon and choose copy.

Right. Pay style, right? A style it on this header. Right? Copy right? Click paste aisle, right? Click paste aisle. And for the text box, right? Click copy, right? Click paste, aisle, right? Click a style. Now for a button.

I’m going to choose the button then go into Style.

And I’m going to change the button color.

To that.

Not much different.

And then when you move over the mouse, we want it to grow a little bit. So what we’re going to do is we’re going to choose the hover option.

And then on Hover the animation, we just want it to grow.

Look at that. How now right click copy right? Click paste right? Click paste. Bring it over, bring it over, many ways. You get it done. That just showing you a different way. Now we see that there’s content in these.

But it needs to be changed obviously.

So, let’s go ahead and change the icons first. So I’ll click on that icon.

Go to content choose here and I can search. I want to do a heart icon.

That will choose that one. And now for this one will choose that icon. You don’t always have to click the little box. I trying to inhabit because I know that works better.

Come back over here.

Come up over here. We’ll look at comments, will pick that one insert and then we’ll choose the last one.

Come back over here question. Let’s choose the first one insert and now since you know how to change the text on these, I’ll just use a little magic to make those happen, Okay? That updated the text, but I wanted to do the buttons together because we hadn’t had as much practice with that. So, we’ll choose the first button come over here on the left and this one will be learn more and we’ll point that to our about page.

The second one will say, contact me.

And we’ll send them to our contact page. And the last one will say tips here and we’ll send it to our PayPal cage.

Let’s hit update.

Go back over. Let’s reload the page, scroll down and looking a lot better. But let’s add some animation to this. So I’ll come back in here.

Choose column 1, go to Advanced motion effects.

Faith from the left.

Take this one.

Advanced motion effects.

Made from the right choose? This one, Advanced motion.

And we’ll Zoom that one in.

Just like that will hit update and we’ll reload.

Looks pretty good.

All right. So on Bethany site, the next one we’re going to do is just words of wisdom section.

And ours does not look anything like that, right now.

But come back over here. And to do the words of wisdom section. We’re going to do a Carousel and we’re going to go ahead and insert a new section above this. Just so you can see how to insert sections in between. I’ll click right there. Now. I have a new section and I’ll click on the plus sign. I just need this to be one column, and I will choose that section. I’ll go to style.

We’re going to set the section color to white.

Now I’m going to scroll to the top and I’m going to right click on that header and copy it. Just another way of showing you how to recycle stuff. Come back down here, right? Click and paste it. And now for the text will change it to say words of wisdom.

And now we’re going to go to our collection of widgets.

And we’ll type the word image again, to find the carousel. We using the carousel differently. This time. We’ll click on here to add pictures to our Carousel will bring up our content and we’re looking for words of wisdom.

And there they are.

So we’ll select all those bag of over all at once.

Will click on create a new Gallery. Will click insert gallery for the image. Size will choose full.

We can see the whole word.

Slides to show. Let’s say five. We want to scroll one at a time. I don’t want any navigation. Now. We’ll look in the advanced section. Again. I don’t want to stop the animation. If I hover over it only want about 500 milliseconds in between that’s half a second and I want to slow that down. So it’s going to do it slower. That’s nice, just like that.

Well, hit update.

Get back to our page, hit reload, and we’re making progress.

So, we’re going to go back over to Elementor.

And I don’t really like the spacing here. Let’s come back into advanced for that widget. That zeros in there. Disconnect them. I want 70 from the top, because we’re going to put a brush wave thing here, but I want these closer.

Now, what’s interesting is that if I do a margin, I can do a negative margin on that and look how it brings it up. So we’ll take that negative margin of 25.

For all practical purposes. That’s the main difference between padding and margin and most cases will see some other examples as well. But with margin, you can bring things closer together by using a negative number instead of a positive number.

So we want to put our brush divider right here. We got to choose the section first and then we’ll click on the shape divider.

And it’s going to go at the top and it’s going to be our waves.

And our color is going to be that same color.

Close the color. We didn’t pick the right waves. Did we waves brush?

I’ll change it to 60.

And that’s looking pretty good. We can hit update now since I know we’re going to want to reuse the words of wisdom section. I want to go ahead and save it as a template now so we can use it later. So I’ll go ahead and go up here. We can right-click choose save as template will give it a name.

Choose save. Now that we’ve saved our words of wisdom section as a template, will be able to reuse that in any other page in our website. So let’s go ahead and close this window.

Come back over here.

Reload, and that’s looking pretty good.

Now, we’ll look at Bethenny’s website. Again. Our next section we’re going to do is just practical advice section. Again, will utilize a transparent image slider.

So let’s go ahead and go back to our page. Now. The next section of the website is a testimonial section. Bethany’s website does not need a testimonial section, but you might need one for your website. So one of the things you might consider is to leave this the way it is.

Or you potentially could come up here. Copy this button, come down here, paste the button and then change this to say more testimonials and you could have a page of testimonials. And in fact, the default site also has a testimonials page. He could point to that and repurpose it and have a testimonials page for yourself. Since Bethany’s website, doesn’t need testimonials. I’m going to delete this section.

We’re also not going to use a latest product section here. So I’m going to delete that section.

And then I’m going to click the plus sign so I can make a new section in between and then we’ll click the. Plus. We want this to have two columns.

Under layout and set of content with boxed. We’re going to say full width and then the left column, we’re going to make it 55.

Which makes the one over there, 45. I’m going to choose that section. It’s already chosen but choose style and we’re going to add a background.

So I’ll click on the background, classic click there. Now. We need to get our correct image for this. So we’ll go back to our content and there’s the Practical advice Beach will drag that in.

Insert media.

And now we have our beach scene in there. The positioning we’re going to use is going to be top Center.

And the size is going to be cover.

I know you can’t see anything yet, but it will reveal itself.

Now, in the left box, we’re going to put an image.

Let’s try again image in there like that.

And then we’re going to put the image into the image widget. Go to our content and then we want the Q&A image this time drag that over.

Insert media. And now for this left column, I’m going to go in advance and we’re going to set some padding and we’ll turn that 290 on the top.

And 40 on the bottom.

And then we’re going to copy the words of wisdom heading.

And then we’ll come back down here and right, click and paste it. That’ll save us from some of the setup for that. And we’ll go into style. We’ll set the color to Black and we’re going to change the height of that. 250. And then below that, we’re going to add.

A widget.

If we type the word test.

Brings up testimonial, put that under it.

It’s kind of like an all-in-one widget. It has some text and a picture and stuff like that in it. And for the image.

We’re going to put a profile picture for Bethenny.

And there is the Practical advice, profile picture.

We’ll drag that over.

Insert, and for the content.

We’re just going to put questions and answers from Cora.

We’ll put her pin name of pepper, low, and positioning will choose top. And then we’ll go back to the top and look in style under image.

We’ll set a size of 115 or the image size of the content style. We’re going to go into typography and we’ll choose Droid Arabic 24.

And we’ll set the color to that and for the name will go into typography.

And we’ll pick.

Open Sans condensed and we’ll make it 30.

And we’ll set the color to that.

Make it a little easier to see on the sand.

We’ll go back where it has title designer. We’re not going to put that at all. I’ll just take that out. Now, on the right hand side. We’re going to choose that column, and we’re going to tell the vertical alignment to be at the bottom. That way when the picture slides in, I’ll be sliding in at the bottom and then we’re going into advanced and even though these look like they have no value at all.

I’m going to open those up and make sure they all say zero and now we’re going to add our image to the right column. So it come up here. Choose our image, widget. Choose our image, get our content folder.

There’s a transparent Bethany.

She’s very transparent. Very genuine great person. Got that size Bowl, align left, and if we go into Style,

We can set the width to 400.

That does not look right. The default was percentage. We wanted pixels.

400.

See it happens to me too. Murphy’s Law. I hate that guy will go into advanced motion.

We’re going to fade in from the right. We’re going to fade in slowly from the right. And we’re going to wait a thousand milliseconds, one second to do that. We hit update.

Welcome back to our page.

We’ll hit reload.

Look at that. We got it working. Don’t really like all this extra space here. So let’s go back and fix that.

And that’s because the words of wisdom had extra space when we made a copy from the other header, so I go into advanced.

And we’ll change this to 0.

And that looks pretty good. Make an update and then where it has the name here for Bethany inside of this widget.

Let’s go ahead and make a link.

To contact will hit update.

Reload.

And that looks much better.

Now, we want to do the sign up.

And that’s pretty straightforward.

We look at the one over here. We just basically change the text out of because everything else was okay for our needs. So I’ll come back over here.

And we’re going to change this text out. So will click on that and we were here paste. That in notice. I had BR tag to allow this to break in the middle. And now I’m going to choose alignment right now. You make it look exactly. Like I want it to look.

Over here.

If you click on this widget, it shows this shortcode form. This is not the way to do this. There’s a better way to do this. So we’re going to delete that widget and you’re like, but it was fine. It worked. Well, maybe, but we want to do it more correctly if we type in this box. WP forms.

We come up with two choices. This is the one from the company itself. WP forms will drag that in the Box.

Now, over here, or over here, we can select the form. So we’ll go in here. We want to choose sign up form and now it looks the same, but it’s more correct.

Now, when we build our contact page, it’ll also have a form like this. And we’ll be able to set both of those to point to your email address at the same time. So we won’t worry about making that update just yet.

So we had update, come up here. Hit reload, and that’s ready to go. But I forgot. One last thing. This wasn’t supposed to continue to say words of wisdom. It was supposed to say practical advice. So I’ll set up date.

And that’ll be fixed. So now we’re ready to build a footer for our website, and our footer will be the same on every page. So let’s go ahead and go back to Elementor. And now we’re going to have to exit to the dashboard. So will click their exit to dashboard. First thing I want to do is remove the footer that came with the website. Then we’re going to replace it with one that’s much better. So the first thing we’re going to do is click on appearance.

Customized.

Footer Builder. And then we’re going to delete all the fields that are here.

Now, hit publish.

And we can exit out of that.

Now, we’re back at our dashboard. Now, under appearance. We’re going to go to Elementor header and footer Builder. We’re going to choose add new.

Intermediate.

For myself or just choose? Skip.

The title is going to be website footer.

The type is going to be footer.

Choose, it makes sense to display on all pages. But really what we want is the entire website. So don’t make that mistake. All pages doesn’t include posts. So anytime you posted something to your blog. I wouldn’t show up there. So you want to choose entire website, and that will mean it will show up on all pages, all post everywhere. Scroll down user rules all

We’ll check that box to enable for element or choose publish. Now, we’ll edit with Elementor and now, we’re ready to build our footer.

You’re saying yourself, but you know, I just saw at the footer look like, why should I have to do it all the way you’re correct? I will show you, we’re going to build it using a template. So we’re going to click on our folder. We’re going to choose this little icon here, which Imports a template. And now we’re going to go to our content folder and at the bottom are a whole bunch of templates. And one of those is the website footer will drag that over. Now. We have a website footer, we can insert.

The footer and it automatically loads it in exactly what you needed to say.

Obviously you change this to be whatever content, you need, whatever image you need, but it’s already set up easy to use, just like that. Now, if you’re going to have a shopping cart, you might want to change this one over here. It says about

You can change it to shop. You could also have more but I didn’t really want more and we can put shop there.

And now it’ll go to the shop when we get ready to do that.

It update.

Come back over here.

Hit reload.

Scroll to the bottom. We already have a footer. It’s just that easy.

So now our homepage is totally complete. Okay? Okay, so it’s not totally complete. What is totally complete on is your desktop? What we need to do is to optimize it for a mobile as well. And then you can apply that to tablet too.

Not to make other device adjustments. First of all, we click down here on the responsive mode.

And then at that point, you can choose between the different views that you’re seeing. And we’re just going to focus on the mobile version and you can apply what you learn here to all your other pages and your tablet. So we’ll choose the mobile device and notice the straps. Funny.

So, we’ll choose that.

We’ll go into Style.

And for the size, let’s just set that to a hundred. Now that works. Also the website intro videos aren’t typically compatible with mobile devices. So if you find that your video intros not working on a mobile device register. It’s not your fault.

So, let’s scroll down.

Now, I want to change the padding on this a little bit.

And if you go to the bottom of that section, I can change it here as well. So we’ll choose the section and we’ll go into advanced and we’ll set that too.

40:24 T20. And then for this text, I want to make that just a tiny bit bigger so I can select that text, go to style typography and we’ll choose 26.

now, when you scroll to the bottom of this section,

you notice how the wave is really tall. We don’t want the waves to be that tall on the mobile device. So we’re going to change that. This particular wave is at the bottom of this section.

So we’ll choose that section will go to style.

Shape divider. We know it’s at the bottom and we’ll go ahead and set that to 30.

Now, we scroll down.

See that looks good. Now while we already in that mode, lets scroll down and do the other ones. So we’ll choose that one. Style shape divider 30, see if I missed any.

Yeah, I missed that one. Select that section Style.

Shape divider.

Pipe 30, okay.

Now, all this looks pretty good. So we’ll leave that alone. However, this isn’t working out. It’s got too much space up here, and she kind of takes the whole screen. So we’ll choose the umbrella girl, and we’ll go into advanced, will do 60 at the top.

well, unconnect that

Will do 30 on the left and will do 30 on the right.

At the bottom will do 0.

Now, we want to work on this piece to bring it up a little bit and make it smaller. So, the first thing we’ll do is work on the padding for that column. So, we’ll choose the column, choose Advanced. Now, notice. These have the little phone next to it. This means, we’re only editing the phone version. I’ll type 10 will select the Be Inspired. Go to style. Typography will set the font to 40. It’s still wrapping. So, let’s move it down. Now, it doesn’t wrap, so now, it’s 38. Now. That’s a little bit.

Closed at the top. So let’s go ahead and go back into our padding on that will disconnect these, and let’s set the padding at the top to say 30.

Now we want to adjust this font. So we’ll select that will go to style typography and we’ll set the size to 28 and now there’s too much space below Be Inspired. So we’ll choose that.

We’ll go to Advanced change this to 0.

Brings that up.

That looks real good now, so we’ll scroll down. There’s not enough spacing at the bottom of that wave.

So, we can choose that column.

and at the bottom,

let’s try 50.

There that looks better. Now for the about me, the spacing looks, okay, but look how close that one is. So we’re going to choose the icon and we’ll go to Advanced and then for the margin at the top will put 60 and that looks good.

Same thing with this one, will select the icon.

Go to Advanced and set the top 1260.

Now for the words of wisdom, that’s a little small. So I’ll click on that. Do you style typography? Let’s try a size of 40 that worked out good.

Now, this section here really doesn’t work really well. Look at the text, how it fits in there funny, and it’s the wrong color. And I wasn’t able to find a way to make this work. Well, that made any sense, but it’s a good chance to see another feature and that is, we’re going to select that section.

We’ll go to Advanced and under responsive.

We’re going to hide that section on mobile. Now. You can hide a section. You can hide a column and you can hide a widget. So you have that flexibility. In this case. We’re just hiding the whole section.

Now, we’ll scroll down.

This particular piece of text here. Let’s go ahead and choose that and let’s Center it.

There’s no way to Center this any easy way, unfortunately.

And that should do it. Now. What you can do is you can click this little tab right here and this gives you an idea of what it’s going to look like on a mobile device.

Say, scroll up and you see, is there anything else? I want to change about this, but it looks pretty good.

The we can bring that back out. Choose update in the mobile updates to our homepage or now complete. So now our homepage is totally complete and we’ve accomplished a lot in a small amount of time.

Signed to go back to my Elementor. I’m going to exit Elementor.

And now that I’ve personally completed a substantial amount of work. I’m going to use my backup buddy. Again, if you have another method of backing up, it’s a good time to do it. I’m going to choose create backup. I’m going to choose complete backup.

Let it do its thing.

Now, the backup is complete.

Come back up. Download the backup to my computer.

That is complete and now I have the most recent backup of everything that I’ve done so far. So if anything goes wrong, I can at least get back to our am right now.

So, now we’re ready to start on a next page. So we’ll go back to our dashboard.

Am I ready to start on our about us page?

And let’s go ahead and close this down here. We’re going to go to pages.

Well, hover over about and choose edit with Elementor.

Now that our about page is loaded in Elementor. Let’s go ahead and go back to Bethany site and see what her about page looks like. So I’ll scroll to the top, click on about.

And we’re going to build this nice header. We’re going to put some text in. That’s going to wrap around a picture.

And we’re going to put that background. That has self tastic in it. Let’s go ahead and go back to Elementor. The first thing we’ll do is update the background picture for the about section. So we’ll choose that section.

Go to style.

Choose the image.

Now, I need to bring up our content folder, scroll to the top, and now, we’re looking for our header images. So, we’ll scroll down and there they are. And the one that we want at this point is going to be the about header. So I’ll drag that over now. That’s loaded. We can insert media.

Notice, there’s some shading on this image. We’re going to do some shading ourselves, but it’s only going to be enough to shade the top so that the menu shows through a little bit better and I’ll show you how that works. We’re going to go to the background overlay section.

And these are the two colors that are associated in here.

Will choose the first color?

We’ll set it to that.

Now, close that. And I’m going to start with a location of 0, which is the top edge up here.

And then I’ll go to the second color.

Paste that in. Now, if you’re interested, where am I getting these particular colors from? I’m getting them from the about us content in case you want to do the same thing.

Then I can close that and notice how it’s light at the top and it goes dark to the bottom. If I change this angle to 180. It turns it upside down. Now. It’s a little bit dark at the top and light at the bottom. And then for the bottom location. I’m just going to change it to 24 because I only wanted to come down a certain amount of space. Now, if I click on update and we go back to our site and view it, scroll to the top.

Click on about.

That is has a little bit of shading here. It made our menu show up just a tiny bit better and that’s what we were looking for. So let’s go back to Elementor and now let’s work on the header. So we’ll select that will make the Align left. We’ll go into Style.

Let’s set the color to white. It already is white, but just in case we’re going to typography will set the font to lend Rena Shadow size 90 and then we’ll go into advanced.

We’ll open up our padding and let’s set this to to 150. That pushes that down just nicely like that. We can hit update. And now if we look at Bethenny’s you’ll see there’s a little bit of a shape divider here. We’re going to add that same effect. Using that same cyan color will go back to our Elementor. Let’s go ahead and choose that section. And now we’re going to scroll down choose shape divider, and we’re going to apply it to the bottom.

And we’re going to select tilt opacity and then we’ll set the color.

Update.

Reload our page.

And there it is. We’re going up using this header on a lot of pages. So what I want to do next is save this as a template. So let’s go back to Elementor. Will right? Click choose save as template.

Give the template a name.

Hit save.

Our template has been saved. So now we can close that window.

And now we want to work on the next section. So the first thing we’ll do is choose that section. Go to style.

We’ll set the background color.

And then we’re going to set a background overlay. Notice that there’s something in the background already will choose background overlay. There’s the current one. I’ll choose that bring up our content folder. Now, we need to find our logo background overlay. So we’ll scroll down to our logo section. And There It Is Well drag it over.

Now, it’s loaded insert media.

We’re going to choose ours to be.

Top left.

And we’ll leave it at fixed.

We’ll leave it at no repeat.

Our size will be covered and we’ll set our opacity 2.05 so we can see it a little bit better.

Now, you can see that shows in the background, but it doesn’t get in the way of the text. No, I want to adjust the padding for this section.

So we’ll scroll back to the top. Go to Advanced.

Let’s just make this 100 at the top.

100 at the bottom.

We’re not going to use any of their content, but we do need one cell. I’m just going to take this one and delete that column.

And then we’ll scroll down.

Now, delete this section.

And I’ll delete this section and now we’re left with the one section we need and then I will delete that widget and I’ll delete that widget and I’ll delete that widget.

And I’ll delete that intersection the now. Basically, we have a header on heading and we have a text editor now. Alternatively, you can come over here and you can a dragged a heading over, and you can drag the text editor over it as well.

So I’ll select the heading and we want that to say about me and we want to go to style.

We’re going to set the typography. The font will be months surrett.

32.

A weight of 300.

Now we actually have two of these. We only need one. I’ll delete that one.

We’re going to edit the other text editor, so I select that.

We’ll come back in here to style and choose a color of that. Typography.

We’ll set the font to railway.

Size, 221.

Wait to 400.

Now, we’ll go back to content.

And I’ll paste in the correct content. And now we want an image over here to the right and to do that. We’re going to click on ADD media.

And now we need to get the item that we’re going to be adding. So let’s go to our content folder, scroll to the top, and there is the about picture will drag that over. It’s loaded insert into post and it’s at the bottom. We don’t want that there. So let me click on that, and delete it. And I’ll show you what I really wanted to do. I wanted to scroll to the top select right there, so I can set it in there.

Choose add media, select the image insert. Now. It’s inserted at the top. We need a few more adjustments here. So we’ll select the image. This icon here will align it to the right now, all the sudden, the text wraps around. It nicely will click the pencil or the size. I’m going to choose full size. If you wanted to add a link, you can add it there.

Will do update and it wraps nicely.

Let’s hit update.

Go back to our page, hit reload.

And we’re making progress now on Bethany’s page. She’s got the words of wisdom section.

So, let’s go back to our element or will scroll down. We’ll choose the folder. Icon will choose the words of wisdom section. Click on insert, always choose. No, on this question. Now, it’s been inserted into our page.

We can hit update.

Go back to our page, hit reload, and now we just need to add the black waves, brush above the footer, and go back to Elementor. So words of wisdom is already selected.

We’ll get a style.

Scroll down, shape divider. We’re going to put it at the bottom. We’re going to choose waves brush.

We’ll set the color.

We’ll set the height to 60.

And notice, this is overlaying funny right here. It’s okay advanced.

Well, unconnect those and let’s see what 50 does looks just right. So we can hit on update, go back to our page.

It reload and this page is complete.

Now inadvertently, even though I told this font to be Railway somehow, it got saved as default. So we need to choose this widget, go to style.

Typography and where it says, default.

We’ll choose Railway.

And notice how it changed there.

Will do update will go back to our page and that see it’s the old font. Here. We hit reload.

Now, it’s the correct font. Now we go back to Elementor and we can exit Elementor and go back to our dashboard.

So let’s go ahead and go back to pages.

And now that we’ve made the about page, I want to make some duplicates of that page so that I can use them later. So I’m going to go over and hover over about choose duplicate.

Now, here’s our duplicate. I’m going to choose quick edit.

The title for this page will be gallery.

The slug named will also be gallery.

Status published.

Hit update.

Now, we’ll make another duplicate for our blog page.

Again, will hover over the duplicate choose quick edit. This one will be called blog.

select name, blog published

hit update.

And we’re going to make one more copy and we’re going to make a Services page. Even though Bethany site doesn’t need a Services page. Yours might. So we’re going to make a Services page for you. In case you need one.

So, we’ll go to duplicate this.

And again, hover over that. So we can choose quick, edit, title, equal services.

Slug name equal services.

Status is published.

Hit update.

And that should be all the duplicate pages will need for a while. And now, if we go back to Bethany site, scroll to the top, you can see these are the different items. She has. We want to go ahead and make our menu match hers. So let’s go back to our dashboard.

We’re going to choose appearance. We’re going to choose menus.

Make sure we’re pointing at the primary menu, still.

And this is what our menu looks like, right now.

We’re not going to need a testimonial for her sight. But if you need one, you’ll leave it. So I’m going to take that one out. Also, you can decide whether or not to leave a home button on many websites. These days. The logo itself is clickable. So you don’t really need a home button. So it’s kind of up to you whether you want one or not.

I’m going to leave. Ours are for now. Now for Bethany’s website. It needs a Blog and needs a gallery. You might add Services. If you’re going to add the services page, that we’re going to create, will choose add to menu.

And now you can drag these around to organize them. So I want

the gallery to be here.

And I want the blog to be here. Scroll down.

Save changes.

Changes saved. And now we’re going to quickly build a Services page in case you need one for your website. So we’re going to go to pages.

Scroll down.

hover over services and it with Elementor

and there’s our copy of our about page.

And what we’re going to do is delete every single widget here.

And then we’re going to choose the folder and then we’re going to import a template will go back to our content folder.

Scroll down to the templates.

Here’s our services page, drag that over.

And here’s our complete Services page will choose insert always choose. No.

And look at their, you have a complete Services page. You can make updates and changes that yourself will hit update. Your services. Page is complete. Well, exit to the dashboard.

And now we’re ready to work on our Gallery page. So let’s go back to pages. Will hover over Gallery choose edit with Elementor.

See how nice it is to start with a page that already has a lot done for us.

So go ahead and change that text to gallery.

Let’s change our background, have a different background for the gallery, select that section so we can change the background image will go to style, click on that. Now. We need to load the correct header. So let’s go to our content folder.

Scroll down to headers.

And there’s the gallery, header.

Drag that over.

Choose insert media.

Our header is complete. Now. We want to work on the next section and we’re going to go ahead and delete this header.

And delete that text editor. And the first thing I’m going to do is show you the free gallery.

So, we’ll come up here.

Choose type in gallery and there’s the basic Gallery like that in. Now we want to add pictures to the gallery. We need to go back to our content folder, and here’s our gallery, pictures.

What choose that one?

Hold down shift and she’s at once. Oh, they’re all selected. I’ll drag them all over it once and let them all load at the same time.

They’re all loaded and by default, they’re all selected. So we can create new Gallery. You could reorganize these if you wanted to.

And then we’ll choose insert gallery.

And there’s our Gallery, will scroll down. We’ll set our image size to medium.

columns for

Let’s hit update. Let’s go back to our page. Scroll to the top. Let’s see what that looks like.

We need to hit reload because our menu is not there yet. Our new menu.

There’s our new menu choose gallery.

And there’s our gallery.

So we can see this is a nice looking gallery.

And not bad.

It’s also a lightbox gallery.

So we click on that.

But it’s just not as fancy as the one that Bethany has, if we go to her gallery.

See how nicely those load in like that.

Now at our Gallery, if we made all these pictures, the same size, it would make it look a lot better than it does. And that’s basically as good as you’re gonna be able to do for a free plug-in at this point, but in my case, I’m going to want to go ahead and go back to Elementor and I’m going to upgrade to element or Pro so you can see how to use the pro version of the gallery.

Now that upgrade is complete. I’m going to delete the current gallery.

I’m going to come over here type in gallery.

And we want this one.

Just called Gallery but it ought to be called super fancy Gallery. Choose that we want to pick our pictures. They’re already loaded from before. So we’ll just select them all create Gallery. Again. You can switch these around however, you want to organize them, insert gallery.

And now see it automatically made things fit. Nice together like a puzzle, but we’re going to scroll down and the layout type we’re going to do is Masonry.

Look at that. And we’ll use four columns as the default.

We can choose update.

Now, let’s go review our page again.

We’ll hit reload.

And I just like that a lot better. Obviously. It’s up to you. But for me between that and the other things I can do with Elementor Pro, it was worth it for me.

If you decide you want to get the pro version of Elementor at the best possible price, just go to web youtube.com front slash Elementor and choose the element or Pro button.

So our Gallery page is complete so we can go ahead and exit to the dashboard to blogger. Not to blog. That is the question at this point.

There’s many reasons to have a really good blog on your website. And there’s people who just don’t need a Blog. If your website doesn’t need a Blog, you can remove the block button from your menu bar and go ahead and proceed to the contact us section for the rest of us. We’re going to go ahead and create a blog. So the first step in adding a Blog to your website, is to create a header for all of your blog post, as well as a header for your blog page that contains all your posts.

So let’s go ahead and go to appearance and then we’ll go to Elementor header footer. First. We’ll create a header for your blog page. The page that contains a list of all your post.

So the title will be Blog Page. Header. Template type will be a header.

And where do we want it to display? We want to display on our blog post page.

User roles.

All.

Well, enable this for Elementor.

We’ll publish.

Choose edit with Elementor.

I’m providing a template for both the blog page header and the blog post header. So let’s go ahead and click on the folder. We’re going to choose the upload Arrow.

Bring up our content folder.

Scroll down to the templates.

And there’s our Blog Page. Header will drag that over.

And there’s our Blog Page header.

We’ll go ahead and insert. I always choose no.

And there’s our Blog Page. Header. Obviously, you’d change this out to be whatever you need it to be.

We’ll choose update.

Exit Elementor.

Now we want to create our blog post header. So we’ll choose add new.

We’ll set the title to blog post, header.

Template type header display on all posts.

User rules all.

enable for Elementor

choose publish.

edit with Elementor

Now we’re in Elementor will choose the folder.

We’re going to choose the upload Arrow.

I can go back to our content folder. Now. We’re going to choose the blog post header, which is this one drag that over and there’s our blog post header. Go ahead and insert, that always choose know.

Again, make whatever changes you want here.

We’ll choose update.

Exit Elementor.

And now your header for your blog page and your blog post is complete.

So the next step to adding a Blog to our website is to remove any old post. So let’s go ahead and choose posts on the left.

So now we can select all the posts in this case, one.

Bulk actions move to trash apply.

And that’s all gone. Now. We’re ready to add our first post. So we’re going to choose add new.

Let’s visit the script for a second. I want to point out how helpful it is to have, all the information, you’re going to need to do your post. Obviously, you’re not likely to just make these up as you go along. So I collected all the information for the different posts. We’re going to do to make this easier. So for example, the title of the first post will be this.

So, we’ll set the title to that.

And now for the content pay set in and notice at the top, this is already bold because in the Google Doc I did, it was already bold. So it allowed me to import some of the formatting as well.

Blog post are organized into categories. So over here we want to add a category. In this case. This particular post is a life lessons.

So, I’ll add life lessons, hit enter.

And it automatically checked it. Now. If you don’t give it a category, it’ll automatically use on categorized.

Next, we’ll add tags for this particular post.

I’ll hit, add and these are basically, like keywords that are associated with the post, also want to point out if you need to make changes, or adjustments to your categories or tags under post categories and tags, allow you to make those updates and changes scroll down.

Now we want to add a featured image. I’m going to choose set, featured image. We want to bring up our content folder again.

In the images for blog will be near the top.

So there’s our first blog and there’s our six where I have six in. This example, drag those over.

And our first blog is the puppy.

Set featured image.

Not normally make my blog images about 800 pixels across just as a reference. Now, we can scroll up and choose publish. Now if I want to see this post just as an example. I can right? Click on this link and open in a new tab and we can look at that tab.

And there’s that header we made and this is the post.

Just like that. Not bad, huh?

Let’s go ahead and close that.

Now we’re going to add one more post together. So I’ll click add new.

And then the other four will use some magic to make those since it’s all the same process to the second blog post. The title is that

The content for the post is that this was going to have multiple categories. So we’ll choose the life lessons will add a new one hit. Enter. This will also have mental health.

Personal development.

And we’ll scroll down, we’ll put some tags in their terms associated with the document, scroll to the bottom set, our featured image.

And there’s our blog to image. That one is now set scroll to the top. Now. If you didn’t want to publish immediately, you could go inside and choose a date that you publish something. I’m going to publish this immediately.

Now, I can right-click on that.

Open in new tab.

Check it out.

And there’s our second post.

Notice it automatically added a share post plug-in. So other people can share your blog posts.

Well, close that. I’m going to go ahead and add the additional post at Magic speed. Okay, and so now all six posts have been added and let’s go ahead and look at this particular post right. Click open in new tab will bring that up. This particular one Bethany wrote about people, they wanted to make money using blogs. And so if you have an interest in doing that this may give you some more information as well. We want to make a couple of changes to this to make this more user-friendly.

First of all, notice it says, by Yoda user instead of by Pepper low. And if we click on that has picture of me, we don’t want that. Well, she doesn’t want that. So we’ll back up. How do we fix this?

We’ll go back to our WordPress. Admin.

So the two things will change are the profile picture and the pen name. The first thing will change, is the profile picture and we’re going to do that inside of profile, press.

And I go to plugins and then I scroll down to profile press and I choose settings.

I’m going to choose profile and cover photo.

Now, I want to scroll down.

Where it says disable gravatar, we’re going to choose to disable that. Now, we want to choose an image. At this point. We want to upload a profile picture for Bethenny for her blog.

Bring up our content folder.

There’s your profile picture for the blog drag that over.

Select.

T’, save changes.

Next to change the pin name.

We’re going to go to users.

I’ll click on the username.

Will scroll down and for nickname will change it to Pepper low.

And for the display name will choose pepper, low.

And there’s also a section to do bio info. Let’s put a little bio in there.

Choose update profile.

Profiles updated. Now, if we go back to our post and scroll down.

Where it says, yo to user. If we reload.

It will now have Bethany’s pin named Pepper low. If we click on pepper, low.

And now says pepper Lo has her picture and it has her bio pretty nice, right?

now, if we back up,

We’re looking at a post. Now, one of the problems with this post is that there’s no way to really get anywhere else other than the post itself. So a really convenient thing to have is a sidebar over here that has a lot of controls that you can use within your blog.

So, let’s go ahead and add the sidebar. So, going to go back to our WordPress. We’re going to go to appearance. Customize will choose, sidebar, under blog, post, will choose right. Sidebar will hit publish.

And then we can close out of that. Now we want to customize our sidebar to do that. We’re going to go to appearance.

Widgets.

Now the sidebar that’s going to be the one that’s on your blog post, is called the main sidebar and for whatever reason, there’s a lot of stuff in here. I may or may not want the defaults for these are never exactly the same. So what we want to do is we want to clean this up. Now if we go to the script file, this is basically what I want to get. I want to have a search box. I want to see recent post. I want to see recent comments, archives categories, meta and a tag cloud and we’ll talk about those. But basically we’re trying to get to that and we’re currently

This. So. The first thing that we can do is delete all of these that just say block on them. I think as much as anything they’re just duplicates.

And now we have the list that looks like this one.

Except that there’s one extra one that I want to add to this.

Now, on the left hand, side are all the widgets. You could add to your sidebar and you could probably find other plugins to add additional stuff.

If I scroll down the one I’m interested in is called tag Cloud. If I click on that, I can choose where I want it to be. It’s got by default has chosen the main sidebar. I’ll choose add widget and want to scroll up.

Now, tag cloud has been added to the collection. All widgets on the main sidebar.

We’re not going to give it a title. It’ll automatically say, tag Cloud. Also, you can organize these however you want.

That order right there matches. What we have on our list again, you could pick other ones if you want to put stuff in there, but these are basically the general tool set you’re going to see on most blogs and there is no save on this page. So basically it’s already saved. So now if we come back over to our post and we hit reload.

And now you can see, the sidebar has been added. We have a search box. We have recent post comments, archives categories, meta options, and a tag cloud.

The next thing you might wonder is the okay. Here’s the default. But what kind of control do I have over this? And the answer is really not much the free version Astro. The free version of element or neither of those. Give you any real tools for doing any updates and changes to the formatting for the posts themselves. So unfortunately kind of stuck with the excessive padding and the default font and things like that. Now, you’re saying yourself. Hey, you do there must be a way to fix the spacing, in the fonts for free, right? Absolutely. I will show you. So what you want to do is go to your script.

And you’re going to look for a section under the blog’s. This call to just blog post font, and spacing in. This is cascading style. Sheets CSS. Don’t worry about what it does. Just worried that it doesn’t what you want to do is select the yellow text, copy it to the clipboard and now we’re going to go back to our WordPress. Admin.

We’re going to go to appearance.

Customized.

And at the very bottom is additional CSS will click on that. We don’t need this little window so we can do clothes. And right here. There’s nothing in there yet. So we’re just going to paste that in at the top.

And now, we’ll do publish.

And now we’ll come back over and this is what our page looks like right. Now. This is what the fonts look like. This is what the spacing looks like. We hit reload. Look at that. We have better spacing. Now. We have a different font that doesn’t take up so much room. It’s a lot cleaner than it was before and it was free.

So at this point, we want to be able to access our blogs from a blog page. If we click on our Blog Page, actually, let me clean this up real quick. We’ve got an extra tab here. If we click on our blog link, it takes us to our default about page. Remember, we made a duplicate of that. We’d like that to come up with our blog. So let’s go do that. So we’re going to go back to our WordPress. Admin.

We’ll close that to get to our dashboard.

We’re going to go to pages.

Will hover over blog choose edit with Elementor.

And from within here, we’re going to delete the top section and the delete that About Me section and leave words of wisdom will choose update.

And now, we’ll exit Elementor.

We’ll choose appearance customize.

Scroll down.

Home page settings for post will choose blog.

Or hit publish.

And now we’ll visit our website again and hit reload. And look at their, there’s our header and there are all our blog post now, unfortunately. No matter how much you talk to yourself about. Hey, Yoda, this really doesn’t have a lot of formatting. What can we do about it? I don’t have an answer for that because unfortunately, there wasn’t really an easy freeway that I was able to do that. There must be free, plugins out there that will allow you to have more control over your blog layout than this, but I haven’t been able to locate them.

However, just for comparison, if you have access to element or Pro, it’s possible to make this page look really professional with very little work at all. And that’s what we’re going to do next. So, we’ll go back to our WordPress.

And where we had post page and we set to blog. Let’s go ahead and set that back to select and we’ll hit publish.

Now, we’re going to exit out of that to our dashboard. So let’s edit this page again with Elementor.

Not the very top. We’re going to insert a section.

We’ll choose our folder.

What she’s my templates now, we want to insert our Blog Page header. So we’ll choose insert always choose know. So at the very top we will not need this intersection that has the logo in the menu in it. So we’re going to head and close that one. Not the one at the top with that one right there. So we close that now. There’s not a lot of space there. Let’s choose the widget that has the word blog in. It will go to Advanced and where it says 200 let’s put 300.

Now we want to add another section, just below our header.

And in this box will hit the plus. We’ll choose a single column. Now. We want to go up to our widgets again.

I’ll type in the word post.

That’s the one we want right there. Make sure your icon matches at drag that over.

And there it is, that’s looking nice. Now. Let’s go ahead and change a couple things on it. First of all, we’ll set the skin two cards. That’s really nice. Now. Let’s go ahead and do some formatting on this. So we’re going to go to style, will go into content under title for typography. Let’s set the font open. Sans condensed will set the size to 24 will close that. Next. We’ll do the excerpt.

Typography.

But open, Sans condensed.

We’ll set the size of this. 221 will close that. Finally, the read more typography font open. Sans condensed and we’ll set this one to sixteen close that.

Now hit update. Now. We’ll go back to our blog.

And hit reload. And look at that. We have a really nice looking blog. Now now I understand, it took Elementor Pro to make it look that good, but that decision is going to need to be up to you. Whether or not you feel it’s worth paying for element or Pro to be able to get a nice fancy blog that looks like this. Now, ready to work on our final page of the website before we start on the shopping cart, and that’s the contact us page. So let’s go ahead and go back to Elementor.

And I will exit out of Elementor back to our dashboard to start on our contact us page. We need to go back to pages.

Now, I want to go down and hover over contact, choose edit with Elementor.

The first thing we’ll do is delete their header and add our own.

So let’s delete that now, I’ll choose the plus sign to add a section.

We’ll go to our folder.

And remember we saved in our, my templates are about us header. So we’ll go ahead and insert that.

Always choose now.

Now, we’ll choose the about and let’s change that to contact. Now. We want to change the background image. We have a special one for this page. So we’ll go to style.

Click on the image. Now. This is one of the situation I talked about earlier. It didn’t come up with the pictures this time like it had before. I don’t understand why I want to bring up our content folder.

Now, we’re going back to our header images, will be near the top.

And there’s our header image for the contact page drag that over.

Choose insert. Now. We’re ready to work on the next section. Let’s go ahead and change the message us will choose that go into Style.

Typography.

We’ll set the font to open, Sans, condensed, size 30.

Close that we also have a background that we’re going to use. So we’ll choose that section will go to style. Click on the image. Now. We want to go back to our content folder.

Scroll to the top. There’s our background for the contact and notice. It’s not going to matter that the pictures aren’t here. I can still drag that over and it works fine, choose insert. Now. I’m going to scroll down.

We’ll set the settings for this soon. That allow this to point to your email.

Under contact us. Let’s put some content there.

Like that. I’m going to make that a little darker. So I’ll go into the style for that.

Change the color to that. Blows that out. We’ll go into typography.

Font you guessed it. Open. Sans, condensed size. 21 will put a weight of 400. That looks nice.

We’ll close that. Now, we want to put a profile image under this. So I’ll go back to our widgets. Let’s drag an image right there.

We’ll select the image at our library.

Will scroll down.

Image me once already in here.

That one right there.

Insert media.

Scroll down.

Let’s go ahead and style will set the max with the 75 that’s percent. By the way, we learned that already and now for follow us, let’s edit that first. We’ll go into advanced.

Instead of 100 for the margin top will put 70.

Going to style typography. But open, Sans, condensed, size, 30, that looks good. Let’s close. That at the bottom is our social media. We will choose that. I’m going to go into Style.

And set the size to 32, make it bigger. Go back into content. These can be added subtracted organized. So for example, I can take Instagram and drag it to the bottom like that. Now you’re going to set each one of these. So we’re going to head and set hers now to close these. Be sure you click on the name because if you click on the X, over to the right, you’re going to actually delete the item and that would be bad. Now, in Bethany’s case. She doesn’t have a YouTube. So we’re going to use that one differently. So will recycle that one, we click on it will go to

Here in the Box will type medium and there’s medium. Well, insert that now for the link will put her medium link. You can close that back down. It will put that one at the bottom.

Now let’s do the Facebook one, set the link to that close that. Now, we’re ready for Twitter or Twitter link. Is that close that it’s put Twitter at the top open, Instagram set, the link close it, and we’re okay with that. Now those come back on this side and work on it a little bit. Okay? And choose this widget. We’re going to come over to the left hand side.

We’ll go ahead and set the address.

Like that, blows that out. Now, I’ll put the phone number.

Like that. Change the hours like that. Obviously, you can pick different ones. You can also move these around. You can add one right there. So let’s go ahead and go to style.

Under text.

We’ll set the color to that.

Close that.

Typography.

Change the font.

Open, Sans condensed. Let’s make that 21.

And weight of 400. Now. I want to work on our map so we can select that widget.

We can put our location.

Zoom at 15 is fine.

I think we want this a little bit taller. Maybe you come down here somewhere. Let’s try 500.

That looks good.

We’ll hit update.

Come back over to our page, will click on contact.

And look at their, we already have a contact us page. It was that fast and not nice, but now we need to get the forms to point to you. In this case. They’re going to point to Bethany, but you get the idea. So let’s go back to Elementor.

Now, we’re going to exit Elementor to the dashboard.

Now we want to edit our forms as well as set the forms to point to the email. We want to go to to do that. We’re going to go into WP forms.

And then I’m going to choose the contact form. That’s the one we’re going to edit. So I click on that.

Now this works very similar to Elementor. That’s why it’s such a great product and everything we’re going to do with this, basically is free. So suppose you wanted to add a subject line.

The left hand side, grab the single line text widget, drop it in, just like that. Now, if we choose field options,

And we select that field. Now we can edit that field and we can make it’s a subject now. Suppose you want to go all the way across under Advanced set field, size too large.

And now it’s all the way across.

So now let’s say you wanted to have a phone field come back over to add fields and you look and you’re like, uh, there’s no phone field. Oh wait, here it is and you click on the phone field upgrade to Pro. That’s quite convenient. Everybody’s going to want a phone number yet. We’re going to have to pay for it. But you’re saying to yourself. Hey Yoda, there’s got to be a way around this. Don’t you have a trick for this? Absolutely. I will show you.

So we’ll close out that window now instead of picking the phone field. Let’s go back up. Pick. The single line field will drag it in. Let’s say we want to set it there.

And then we’ll go back to field options you choose that field set the label to phone.

Now, we have a phone field. Now. Let’s say you want that feel to be required. You notice the ones with an asterisk next to them. Those are the ones that are required. So for the phone field, if we turn this on right here now, it’s required. It has the asterisk next to it.

Now, we’ll go into the advanced and we’ll set the width to large.

Now we have phone field. But what’s the difference? Well, the main difference is when somebody enters a phone number in ours, it’s not validated to make sure it really is a phone number. Now, we want to set where the email is going to go to. So on the left hand side, if you go to settings.

And then you get a notifications.

Right here. Send email address. That is the email that is going to send to by default. It’s going to be the one that’s in your admin and that might be fine. But in our case the admin was mine, but we want these to go to Bethany. So we’ll put that in there and we can set the subject line for the emails. So let’s change that. I’ll change it to say, self, tastic comments. And then who do we want the from name to be?

We’ll say from there, we can leave the rest alone.

Let’s go ahead and click save.

Now, I’ll close that.

And we’ll go ahead and make the change. We need for the signup page as well. So I’ll click on sign up.

We just want to go into settings.

Notifications.

This will also go to Bethany.

Or the subject line, join Club. Self-testing set our from name. Everything else can stay the same hit save.

Obviously, we didn’t do a lot of WP forms. Only the stuff, we really needed, but if you’re interested in learning more, make sure you watch my video. If you’re looking to learn more about what WP forms can do for your website, then you’ll want to check out my WP forms for beginners video at some point. So it close.

And now we want to test this out to see that we get email.

So back to our website hit refresh just to make sure we’re looking at a fresh copy.

And notice now it has the subject line now. This is going to go to Bethany. So let’s send it from me. Subject line test. Hello world.

Hit send.

And our message was sent successfully. Good job now.

One of the things you might be interested in, as you might have said to yourself. Hey, what about some formatting here? What can we do? Well again, without getting the pro version. They really don’t give us a lot of tools, but you’re like Yoda. You always have a piece of code for us so we can do it without having to pay for it. I know you’re right. And okay. I will show you.

So, what you want to do, you want to go to your script and look, under the form section for a section called format, your forms. So, once again, you’ll highlight the yellow code like that, copy it to your clipboard. Now, let’s go back to our WordPress. And now from here, we’re going to go to appearance.

Customized.

Scroll down.

Additional CSS.

Let’s click on contact over here, so we can actually see this working.

And that’s what it looks like right now.

Down below this, let’s hit a couple extra lines, paste that in and look at that.

It changed everything up just a little bit. Again. I’m not going to try to teach you CSS, but you can look in here and see that some of these things can be changed and get a little bit more flexibility. If you like will choose publish, go back to our page.

That’s what it looked like before hit reload.

That’s what it looks like now.

Now officially our website is complete, but there’s one more step that we don’t want to forget, and that is to turn on secure Pages for our website to do that. We’re going to go back to WordPress.

What exit to the dashboard?

Now we want to install the plug-in that’s going to allow us to make our Pages secure.

So, we’re going to go down to plugins.

Add new plug-in.

Upload plugin.

Choose file. Make sure we’re looking at our downloads folder.

And now the one we’re looking for is really simple SSL.

It open.

Install now.

Activate plugin. Now. If for some reason you didn’t have this plug-in already, you just need to go to web. You to.com, front slash plugins, scroll down to this project and then download the plug-in you need. Now, once that’s installed, it immediately says, hey go ahead and activate but I don’t want to do that. Just yet, I want to do is we want to scroll down, find the plug-in and we’re going to go to settings.

Tells us we’re not connected yet. We know that. But what we’re really looking for is this check? Mark, If found an SSL certificate detected for our website, if you don’t see that message, you need to contact your hosting company. To ask them how to get your certificate activated because without a certificate, we can’t secure your web pages since we have a certificate. All I need to do is click on. Go ahead to activate.

Now, it’s been activated once you’ve activated your SSL and you weren’t in Secure mode. It’s likely to want you to log back in. So for example, our next step is going to click on Elementor.

And when I did that, it ask me to log back in. So I’ll choose login.

So, our next step was we clicked on Elementor it? Brought up this page, and it has these options. We’re looking for the option called tools. So we click on tools.

And then we’re going to click on replace URL. So in this box, we’re going to put our original URL. When we didn’t have secure Pages. I’ll paste that in.

And notice it just has HTTP. Then in the second box. I’m going to paste the same thing.

But it’s a beginning. I’ll put an S right there.

Basically going from non-secure pages to secure pages and it’s going to look throughout the entire website and see any places. They find this and replace it with this will hit replace.

261 rows, affected.

That was a good thing.

Now, if we go back to our page, notice, it’s not secure. We hit reload.

Now, it has a little lock there, and now we’re secure.

It’s our website is officially complete and if you don’t plan on adding the shopping cart your website, there’s one more thing. You want to check out. At the end of this video. I have a search engine optimization section. It’ll teach you how to make your website like better by the search engines. If you will be adding the shopping cart to your website, simply choose the link above to proceed to the woocommerce video. Then jump ahead to the section for adding the shopping cart. So we’ve reached the end of creating the website. I hope you’ve enjoyed taking the course. I know I’ve enjoyed being your guide in your instructor.

But as promised I had four really key things that I wanted to add at the end of this video, that will help your website show up in the search engines better. The first tip is that inside a WordPress. There’s a place that specifically discourages search engines from indexing your site. Once your website is live. You don’t want it to be discouraged from being indexed. So let’s fix that exit to the dashboard. And then we’re going to look for settings.

And under settings were going to reading in this may or may not be set depending on when and how yours was done. And look at that. Search engine visibility discourage search engines from indexing this site. I definitely want to turn that off and hit save changes tip. Number two. There is an amazing plug-in out there. Called Yost every website that ranks higher than yours probably has Yost also free. So we’re going to go to plugins. We’re going to add a new

In.

And over here.

Pipe in Yost, 5 million, active installations tells you something. So let’s go ahead and install it. Let’s activate it. Now. You have the most powerful plug-in for doing SEO. Available tip number three, secure Pages, Google likes websites that have a lock, Google likes websites, that are mobile friendly. So if we can do both of those things, we’re going to ensure that our websites like to better tip number 4. You want to make sure the search engines, think the value of your

Side stronger than any of your competitions, obviously having a lot of great graphics and great content. Your website makes a difference. Having a really good look. And feel like this website makes a difference. However, one of the number one things that improve your search engine results is by having other websites point to you. If somebody else’s website has a link to you, that’s called a back link, the more backlinks. You have the more important your website seems to Google the more backlinks, that people who point to you have, the more important they seem which also means the more important you are now, it seems like a lot of

Work. But if you go to Jose one.com, these guys will teach you everything you need to know about backlinks. That’s basically all they do and if you look at it, Jose one SEO literally is their middle name. So they know what they’re doing now. Under SEO Solutions. It shows you the basics, the terminology and the details, they’ll teach you everything you need to know as far as making your own backlinks, how it works, how to make the system work for you. And if you decide you don’t want to put the time in to build them yourself, you can also contact them. So if you decide to use Jose once,

Services. Be sure to mention the promo, code web Yoda, and that’ll save you 50% off your first month with a hundred percent guarantee on that first month. If you don’t like it, you get your money back.

Now, I truly hope I covered everything you needed in this tutorial. Now. If there are something I didn’t mention or you had additional questions. Please leave them below. Be more than happy to answer them for you. But if I don’t know the answer, I’ll go. Hey, I don’t know, but if I do know the answer, I can find the answer. I’ll give it to you and maybe we can work on it together. So, I really enjoy doing this. I hope you had a great time as well. The only real payment I’m looking for. If I could possibly get a subscribe out of this. Possibly a like out of this. I’d be super helpful, but outside of that. I just hope you have a great day. Peace out.