Introduction

0:04

if you're 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

0:09

come to the right place

0:15

[Music]

0:21

[Music]

0:36

my [Music]

0:46

huh [Music]

1:04

hi i'm bethany and i love to write right now i'm at cabo san souci in ocho rios jamaica one of my favorite travel spots

1:12

i recently got the idea to make a wordpress website so i could share my writings with others and offer my

1:17

readers practical advice i wanted my website to be mobile friendly easy to navigate and simple to update i also

1:23

needed a shopping cart and a blog it turned out so well that my husband and i decided to make a tutorial to show

1:29

others how to use wordpress i hope you enjoy making your website as much as i have fun making mine

1:35

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

1:42

video professional logo eye-catching graphics and all the bells and whistles the pros use at absolutely no cost to you this video uses all the current web

1:49

design and web development techniques to build a fully responsive website that automatically adjusts to meet the screen needs of any computer laptop tablet

1:55

phone or any other handheld device to get started the only hard cost we have is web hosting and that's where your

2:00

website lives that's going to run us three to ten dollars a month with your web hosting you'll get a free domain a value of 15 as well as an ssl key which

2:08

makes your web pages secure and that has a value of about ninety nine dollars as for software requirements there are none

2:13

everything we're going to need we're going to do online as for system requirements this website tutorial is compatible with both windows and ios

2:19

systems all you need is your favorite browser and access to the internet and you're ready to go i recommend chrome

2:25

and firefox as browsers of choice as i've had some students in the past that had complaints about compatibility issues with safari opera and internet

2:31

explorer now during this course if you run in any troubles just leave a comment below the video and i'll be more than happy to assist you and don't be shy

2:37

about asking for help i've been a webmaster instructor aka the web yoda for over 20 years and i love to hear from my students but if you could please

2:44

pay it forward if you could like the video subscribe to the video share the video tell your friends about the video

2:49

those are the kind of things that help get the word out though so other students like you can find this video there was something else oh at the end

2:55

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

3:01

these four things are really easy and they're free so i think we're ready to get started so without further delay

3:06

let's go ahead and look at the website we're going to build today

Website Project Overview

3:11

today we're going to build bethany's new website which is selfdashtastic.com

3:16

we'll learn how to do an intro like you see right here and we'll learn how to add it to our website

3:22

now notice how this text flies into place at just the right moment once the home page is revealed you're going to be able to learn how to do that effect as

3:28

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

3:35

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

3:41

sitting in the audience watching a magic show as i put the show on you're actually going around behind the scenes how to do all this it's very simple it's

3:48

very easy and you're going to be surprised how quickly you can build this entire website if you don't have a logo we'll learn how

3:53

to make a logo scroll down notice how these items animated out we'll learn how to do that

3:59

we'll learn how to make these category sections in many cases those are services for example scroll down

4:04

we'll learn how to do that animation but we'll also learn how to remove the background from that animation so that it just has the girl coming in

4:11

we'll learn how to do these call to action areas and notice how they also animated in from the right and the left

4:17

and then we'll learn how to make the buttons grow when we hover over them scroll down

4:22

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

4:28

to do another animation similar to the one we did above and then if you need an email newsletter

4:34

we'll be able to integrate that into your website and then we'll learn how to make this footer at the bottom it looks exactly

4:39

the same on all pages [Music] under about we'll learn how to make this

4:44

fancy header and then we'll learn how to integrate text so that it can wrap around a picture like it does here

4:51

and then we'll learn how to import the words of wisdom section so we don't have to create that again

4:56

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

5:03

want to add the shopping cart later we'll learn how to make this super fancy

5:08

gallery notice as we scroll down how neat those are when they slide in together

5:14

and this is also a light box so any of these we pick on it'll bring it up and we can scroll to the left or the right

5:21

and close that out and then we'll learn how to make a fully functional blog

5:27

with a unique header and then the individual blog items like this and when you click on one of those

5:34

we'll learn how to format the blog post to have all these extra features nicely formatted like that

5:41

and then we'll learn how to make this contact us page where we have a really nice clean form like this

5:47

and then near the bottom we'll have a map and the map can zoom in and out and change it to whatever you need it to be

5:53

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

6:00

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're running

6:05

any troubles just leave below the video i'd be more than happy to help you out

Choose A Web Host

6:13

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

6:18

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

6:24

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

6:36

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

6:42

review sites make sure that the web hosting company they are affiliated with always get the best review so basically

6:48

that web hosting company is 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

6:54

the first five years being me supplying my own hosting i have used at least 10 of the hosting companies shown here

6:59

either personally for my clients obviously not all web hosting companies are created equal and there are only a

7:04

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

7:12

was able to find my answer while not allowing my own bias to interfere for me i like to turn problems inside

7:17

out in this case i was looking for the web hosting review that reveals a web hosting company that sucks the least

7:23

so first the quick answer to the question of who is the best web hosting company for me is simple hands down it's

7:28

hostgator hostgator is definitely the best web hosting solution for me my clients and for web yoda but the obvious

7:34

next question is why is hostgator the best choice well webiota did some research to try to find some authentic

7:39

web hosting reviews and they settled on some results from pc magazine you have to understand that pc magazine has been

7:45

around for nearly 40 years providing essential technology information to the end user for our purposes every year pc magazine

7:51

does an editor's choice award to determine the best web hosting companies and shown here the top six web hosting

7:56

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

8:03

many years running basically hostgator collectively has the features you need their server reliability is amazing

8:09

their 24 7 support is amazing their prices are good or better than anybody out there i personally have been using

8:14

hostgator for more than three years now i host over 200 domains and websites with them webiota also decided to go

8:19

with hostgator for all their needs in fact webiota partnered with hostgator and as part of that partnership webview to students receive up to 75

Purchase Web Hosting

8:26

off plus a free domain name now for you to take advantage of this offer you simply need to go to your browser and

8:31

type in hostgator.com front slash web yoda now this takes you to the partner

8:36

page for hostgator and web yoda and it reveals our three choices for hosting plans currently as part of this

8:42

partnership hostgator is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most

8:48

affordable choice for us if we scroll down we can reveal the pricing for each of the plans all three

8:54

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

9:00

it'll install everything for us they also come with unmetered bandwidth which means we don't pay for the traffic that

9:06

comes to our website no matter how small or large that might be and finally they also come with a free ssl certificate

9:12

which typically runs around ninety nine dollars a year and you say okay what is that what do i need that for well that's

9:18

a little lock up here in the top left it allows your page to be secure so the information going to and from your

9:24

website is secure at this point you need to decide which one of the plans is best for you for our purposes i'd recommend

9:29

the hatching plan if you have one domain or the baby plan if you plan on building multiple websites and then if later you

9:34

find you need additional features you can just upgrade to the business plan and pay the difference so in your case

9:40

you probably need the hatchling plan which is just a single domain so we'll choose that the first step is to pick a domain name

9:46

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

9:52

the right it'll tell us if it is available and in our case it is available

9:58

so we're going to scroll down the next item is domain privacy protection and basically what they'll do

10:03

is for 14.95 a year they'll hide your name your address your information like

10:08

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

10:15

away so i'm not going to choose to pay for that next we already picked our package type we chose the hatchling plan because we

10:20

only have one domain so we want to look at our billing cycle within the billing cycle if you purchase

10:25

one month it's 5.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

10:31

it's going to be 2.71 and it's going to be 61 off now to get the free domain you're going to pick 12

10:37

months 24 months or 36 months so let's go ahead and pick the 12 months it says 76.40 but let's see if we can do a

10:43

little bit better than that now we're going to pick a username in my case i'm going to pick admin yoda

10:49

and a security pin then we want to put in our billing information and we'll scroll down to additional

10:54

services now we don't need any of these services but i'll explain them real quickly the first is an ssl certificate we already

11:01

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

11:06

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

11:12

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

11:18

i'm going to show you how to make an email forward for your domain at no cost at all next they offer a backup service where to do daily backups but i know

11:24

firsthand they do monthly backups for you i'll go ahead and give you a video that'll show you how to make your own

11:29

backups without having to pay them a regular fee like that if you're looking to make scheduled

11:35

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

11:41

computer then you'll want to check out my wordpress backup and restore video at some point

11:48

we'll turn that off and finally hostgator offers some seo tools for nearly three dollars a month

11:53

but there's plenty of free tools out there so we're not going to worry about that if we scroll down

11:59

you want to make sure the web yota coupon code automatically spawned in here so you get the best possible price

12:04

and we look down and we see that now we're at 33 dollars which is really a great deal that's money for the whole

12:09

year it also includes our free domain name at no cost to us and that comes with 24 7 365 support

12:17

instant activation of our account money back guarantee which is awesome 45 days

12:22

collectively all these features leave me feeling very confident that i'm making the right decision today so we're going to scroll down we need to agree to their

12:28

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

12:35

the top so scroll to the top and i'm going to choose i already own this domain

12:41

then i'm going to change this to say choose yourdomainname.com that's the one i own so now we go back

12:47

down to the bottom and we're ready to check out now and my purchase is complete

12:54

it is now setting up my account once our hostgator hosting account is complete and ready to go you're likely

13:00

to get a survey that 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

13:06

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 but we're going to

13:12

be able to get there faster and easier we're ready to set up our email forward and install wordpress so to proceed

13:18

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

Name Server Settings

13:23

account info at the top from my experience there are two different versions of emails you might

13:28

receive from hostgator that will contain the information you need to proceed so now we'll discuss both of those email

13:34

versions to minimize confusion of course hostgator could change things at any time but what you learn here should be

13:39

enough to allow you to proceed the first email type will look something like the one you see here

13:45

whereas the second email look more like this one if you selected a free domain name from

13:52

hostgator as part of your purchase then this short section on how to point your domain name to your hosting account will

13:57

not apply to you as your domain was automatically set up for you by hostgator

14:03

to point your domain name to your hosting you first need to know what your name servers are for your hosting account in the first email example your

14:09

name servers are shown here as i've selected in the second email version you can also easily find your name service as shown

14:15

here please do not use the name server shown in this example as those are the name servers for my hosting and your name

14:21

service shown in your email will most likely be different than mine once you have located your name service you need to log into your domain account

14:28

and set your dns settings to use your name servers all of my domain names live at

14:33

godaddy.com so i needed to go into the dns at mygodaddy account and point that domain to the hostgator name service as

14:40

shown here now if you're not using godaddy.com it should be a similar process and if you have any trouble just

14:45

contact your domain company and they can give you further assistance next we're going to log into our control

Log In To Your Control Panel

14:51

panel and since there are two possible emails you might receive that means there's two possible ways to log into your control panel to access your

14:57

hosting account let's start by looking at the first method to log into our hosting account we're

15:02

going to need our username and we're going to need a password we're going to take that password and

15:08

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

15:13

hosting space so we'll click on this link and that takes us to the control panel login page

15:20

now my username and password are already there so i can just choose login and that takes you to your hostgator

15:26

control panel also known as your cpanel in the second method for logging into

15:31

your control panel you will simply click the go to hostgator button found in your email

15:36

and this will take you to the url porthole hostgator front slash login from here you will

15:42

enter your username and password that you provided when you purchased your hosting now my username and password are already

15:48

there so i can just choose login once you are successfully logged into your hostgator portal there'll be an

15:54

option at the bottom right to access your control panel simply click on the cpanel button to access your control

15:59

panel and that takes you to your hostgator control panel also known as your cpanel

Email Forward Setup

16:06

as promised i want to quickly show you how to make an email forward under popular links you can find email

16:11

forwards here if for some reason it doesn't show up under popular links you can click on email on the left and that

16:17

will bring up all the email options and then you can choose email forwards now we're ready to set up our email

16:22

forward we're going to choose add forwarder and we're going to put in this case i'm going to put yoda

16:29

there's my domain name and where do i want it forward to i want it to forward to in my case yota

16:34

webiota.com scroll down add forwarder

16:39

and now any email sent to yoda at chooseyourdomainname.com will be sent to my email address yoda at www.com

16:46

obviously this would be your domain name and whatever email you wanted to send to now we're ready to install wordpress if

Find WordPress Installer

16:52

we click on hostgator at the top left it takes us back to the control panel at the time of making this video there was

16:58

a wordpress installer inside the popular links but this particular method of installing wordpress has gone away for a

17:03

much easier method so on the left hand side under our website section we're going to choose

17:08

softasculus apps installer and that takes us to the softasculis options at this point simply choose

17:15

wordpress as the option and this will display the wordpress installer

17:21

so to be completely thorough i wanted to throw in one additional tip when you come down and you click on softasculus

17:27

apps installer there's a chance that wordpress doesn't show up in your list a very very small chance but let's assume

17:34

it doesn't in that case you simply click on any of the other ones and in the box just type wordpress

17:41

you click on wordpress and you're back to the same installer

Fix WordPress Install Errors

17:47

now before we proceed with our wordpress installation i wanted to address how to deal with wordpress installation errors

17:52

in very rare occasions when you're trying to install wordpress you may get an error i've already installed wordpress so that

17:58

i can demonstrate that error then i can show you how to correct the error then we'll install wordpress correctly so

18:04

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 that next time through

18:11

and i'm going to click on install at the bottom it starts the install and then it gives you an error

18:18

now in this case it's just telling me it already exists but this error could be any area where something went wrong our goal is to get rid of the install error

18:24

so we can reinstall correctly to get started click on softaskulis at the top left

18:30

and right here is a list of our installations if i click on that it shows the one installation we had

18:37

we know that we don't want it because it didn't work so we can simply click this x

18:42

we can scroll to the bottom remove installation are you sure

18:47

yes we're sure that installation has now been removed and now we're ready to install wordpress

Install WordPress

18:54

so at this point we can go back to softasculous choose wordpress

19:01

and now we're back to the installer and we'll click on install now and we'll go ahead and proceed to

19:06

install our wordpress the first option is which version do you want to use

19:11

the default will be the latest version we'll use that next you'll choose your domain if you

19:16

have multiple domains they'll be in that drop down now over here it says what protocol do

19:21

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

19:26

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

19:32

our ssl certificate was not found and that's because it takes hostgator about 24 hours to get that up and running

19:38

under site settings the site name is the company name so let's say this was for web yoda i'd put webiota

19:44

and then the description is whatever the description for the company is so let's say i put free online courses

19:51

you can leave this unchecked we want to pick a username and a password i'm going to pick yoda user then you

19:57

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

20:03

where any email associated with your website will be sent so for example if you needed to reset your password that's where it would go

20:09

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

20:16

going to be yod.weber.com for you it'll be whatever your regular email address is you could choose a different language

20:21

if you like we don't need to select any plugins we're going to do all that ourselves

20:27

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

20:34

when the installation is complete where do we want to send details to i'll use the same email address and now i can

20:39

click install this says that it could take three to four minutes

20:45

i've found it doesn't take really that long at all now that wordpress has been successfully installed we're ready to

20:50

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

20:56

because we just set up a hosting account that has a new domain the hosting is immediately available but the domain

21:01

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

21:07

ready simply open up a new tab in your browser and go to your domain name and if your domain's not ready you'll get a

21:12

message that says this site cannot be reached so you're likely need to take a break for about two hours and then come

21:19

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

21:25

soon or you might get your new website home page so let's go ahead and close that test tab now we're looking at our

21:30

completed wordpress installation page again now that wordpress has been successfully installed we're ready to

21:35

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

21:41

website before you can start editing your website you need to be able to access

21:46

your website admin to do that you simply go to your domain name front slash wp

21:53

admin hit enter a login box will come up now simply enter the username and password you created during your

21:59

wordpress installation so in my case yota user password

22:05

paste that in hit login and now we're logged into our wordpress

Login To WordPress Admin

22:16

so if you've been following along with the video you probably already know by now that selfdashtastic.com already exists

22:22

so for us to build a new website we're going to have to have a sample area so in this case i'm going to build

22:27

sample.selfdashtastic.com and i'm going to go to wp-admin

22:33

to bring up the admin for her website in my case my username was already there

22:41

so i can paste in my password and log in and now i'm at the fresh install for

22:47

bethany's new website now one of the first things i want to do is get something set up for us and so if

22:54

we go over here and we highlight over where it says self-tastic if i right click on that

23:00

i can open the link in a new tab and what that did was it opened our new website in our second

23:06

tab and now i want to go to bethany's live website in a third tab

23:12

so we can follow along in real time exactly what it is we plan to accomplish

Access Course Script

23:18

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

23:24

video and at some point when i was using the script in a previous video a student pointed out that i should make that

23:30

script available to everybody since it was very useful well it was a great idea and so that's

23:35

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

23:41

go to webyota.com self-tastic

Download Course Content

23:47

and 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

23:53

website so i'm going to open up another tab and this time i'm going to go to webyota.com front slash content

24:01

and now i'm going to scroll down to the project we're working on selftastic.com

24:07

and that was another way to get to the script we're going to click on this link here

24:12

and it's going to download selftastic for us and when it's done on mine i can click

24:18

on that and show in a folder and you see it's in my downloads folder

24:26

and then i can right click on the file i can choose extract all

24:32

click on extract and now it makes a folder containing all the content i need

24:39

opens it up in a new window so i can close that one bring that over here

24:47

and when i click on that this is all the content we're going to use to create this website

24:53

so i can go ahead and close this tab and this tab is a script for building the website

24:58

and this tab is bethany's real website and this tab is the site we're going to build and then this tab is our admin for

25:04

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'll really help you out first

Helpful Tips For This Course

25:11

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

25:18

probably because i refuse to grow up fortunately youtube offers a feature to slow videos down to meet your needs so

25:24

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

25:30

i'm going to choose playback speed 0.75 now this is what 75 percent sounds like

25:36

which should probably meet your needs now choose playback speed again

25:42

i'll choose normal and we're back to normal speed next i want to scroll down

25:48

and within the content under the video that i've provided there's going to be an entire set of time stamps that allows

25:54

you to pick any particular spot in the video to proceed let's go ahead and close that tab

26:00

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

26:06

to cover that anyway in the video it tells us about the astra theme then it has a whole bunch of royalty-free video

26:12

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

26:17

for the class for example all the colors i'm going to use are found here now two things that are nice within this is if

26:23

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

26:29

an 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

26:34

right here is your hex color all you have to do is click this icon and it copies it and now

26:39

you have that color alternatively the other one will right click on this choose open link

26:46

this gives you the ability to pick this type of color and this digit right here is to say how much transparent it is so

26:52

watch when we go like this see how that gets transparent right here so that gives you some idea here's your

26:58

color settings and then here's how transparent it is and then again you can click there it

27:03

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

27:09

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

27:15

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 yoda why are all

27:21

the extra w's i will tell you bethany decided she was going to get a new kitten the kitten decided it wanted

27:28

to play on my keyboard it hit the w and i decided to leave it in the course

27:37

okay random facts we've already covered the hosting we've

27:43

already covered wordpress and now we're going to jump into themes and plugins now for the most part i won't be showing

27:49

the script i'm just gonna be using the script but you know that it's there for you as well

27:55

now admittedly i'm no bob ross but i definitely do my best to keep things fun and easy i hope that the tips i just

28:01

provided you will ensure your experience building your website will be met with confidence and enjoyment

28:08

so i'm going to go ahead and go back to our wordpress admin at this point if you already have a

Skip Making A Website?

28:13

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

28:18

the section called enable ssl which is the first step in the process of adding a shopping cart to your website

Delete Pages & Plugins

28:25

so the first step in building bethany's website is to remove all the stuff that's not going to be part of her

28:30

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

28:35

our own so we select that check box there and it selects all of them under bulk actions we're going to choose

28:41

move to trash and then we'll choose apply and as an additional step i like to

28:47

click on trash choose them all again bulk actions

28:52

delete permanently apply and now we want to get rid of all the plugins that were pre-installed because

28:59

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

29:04

and this brings up a list of all the plugins that were pre-installed again i can select next to plugins

29:10

that check box and it chooses all of them bulk actions and before we can delete them we have to

29:17

deactivate them so we'll choose deactivate apply now i can choose plugin again so it

29:23

selects them all bulk actions delete

29:28

apply okay because yes we want to delete them and this will remove all the

29:34

pre-installed plugins now we want to add the theme that we're going to use for bethany's website

Download Astra Theme

29:40

so we're going to go to appearance themes

29:46

choose add new and we're ready to upload a theme so first we're going to download the

29:52

theme we need but you might say to yourself that here are all the themes when i just pick the one i need well the answer is you could do that but

29:59

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

30:04

environments so if you don't have your hosting with hostgator the theme and plugins may not be available in your

30:09

environment to make sure the theme and plugins we need are going to be available i've stored them permanently on the webiota server so let's go ahead

30:16

and get our theme now so open up a new tab and we're going to go to webyota.com

30:21

front slash themes scroll down to the project we're working on

30:27

there's self-dash tastic.com and we're going to click on astra theme

30:32

that takes us to the astra website but it also downloaded the astros theme right there

30:38

we go and close that now we want to go to webyoder.com front slash plugins we want

Download Plugins

30:44

to download the plugins we need for this project so again we'll scroll down to this project selfdashtastic.com and we're going to

30:51

need to download all of these plugins and as we download them i'll give you a little bit of information about what

30:56

each one of them is the astra starter sites we'll click on that that's going to allow us to install

31:02

a fully functioning complete website including a shopping cart in case we want one then we're going to download header

31:08

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

31:15

then we're going to download profile press and profile press allows you to set the icon for your blog instead of

31:22

being whatever the default one is and then we're going to download social sharing and this plugin makes it real

31:28

easy for someone else to share your blog posts and then we're going to download the classic editor

31:34

a lot of updates and changes have made to the wordpress environment and by having the classic editor as well as the

31:40

classic widget it ensures that we all see the exact same environment so that what you're

31:45

following along on your admin matches what's in the video then we're going to download duplicate

31:51

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 your

31:58

new page which is significantly faster than building a page from scratch now we're going to download really simple

32:03

ssl what this plugin does is ensure that the secure pages are the default for your website and next we're going to download

32:10

the woocommerce stripe gateway and the woocommerce stripe gateway is what allows you to accept credit cards

32:17

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

32:22

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

32:28

woocommerce plugin itself and that's the plugin that allows us to add a free shopping cart to our website

32:35

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

32:41

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

32:47

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

Install Astra Theme

32:54

now we can choose upload theme and now we're going to choose a file and you want to go to your downloads

32:59

folder then we're going to select astra.zip that's our theme we'll choose open

33:06

install now and once it's installed we need to activate it and it's that little link

33:11

right there and that activates our theme in almost all cases you'll immediately

Update Theme

33:17

be able to update it to the most recent version so we'll choose update now

33:23

now our theme is updated now if we come back to our website and hit reload you notice that it's changed

33:29

a little bit still nothing like the site we're going to build but we're getting closer

Install Plugins

33:36

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

33:41

we're going to choose plugins add new now we want to do upload plugin

33:48

choose file we want to be in a downloads folder and the first one we're going to do is astra

33:53

starter sites so we'll select that choose open

34:00

install now activate plugin

34:06

ready for the second one add new upload plugin

34:12

choose file the second one is header footer elementor

34:18

open install now activate plugin

34:24

ready for the third one add new upload plugin

34:32

choose file wp user avatar that has a new name

34:37

profile press but the original file name is still the same so we'll choose that one

34:43

open install now activate plugin

34:50

we're ready for the next one add new upload plugin

34:57

choose file the next one is social sharing by danny

35:03

open install now activate plugin

35:10

add new upload plugin choose file

35:17

and the next one we're going to do is the classic editor open

35:22

install now activate plugin and choose add new

35:29

upload plugin choose file the next one is classic widgets

35:36

choose open install now

35:42

activate plugin again add new upload plugin

35:48

choose file duplicate page open

35:55

install now activate plugin now at this point if you're following

36:01

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

36:06

that later so we've installed all the plugins we need for now also at some point profile press may ask

36:12

you to create pages we're just going to do no thanks when it asks us that because we don't need that

36:17

so we'll go back to our wordpress admin and another thing you're going to find is always a lot of little advertisements

Deleting WordPress Ads

36:23

you can close each of those and try to clean things up a little bit

36:28

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

Update Plugins

36:35

plugins so we're going to choose to select them all bulk actions

36:41

update apply then we can scroll down and watch it do its thing

36:47

now all of our plugins are updated and now we're ready to install our starter site

Install Astra Starter Site

36:53

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

36:59

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

37:05

arrow and then we'll get back to the starter sites when we click on c library again

37:11

it's going to work what we want to do is scroll down choose build your website now

37:17

and we're going to choose elementor which is the world's most popular website page builder so we'll click on that

37:23

now for some reason you didn't have that option for some reason maybe you had already tried this before your option to

37:28

choose would be up here as well now what we're looking at right now are all the different website templates they

37:34

have to offer it's totally amazing what they have already pre-built and basically a lot of times you can find a

37:39

website that's just about everything you need it to be now there's two types of templates in here if we go over to all

37:45

we can choose premium and it shows only their premium versions

37:50

and if you decide on a premium template for your website go ahead and visit wpastra.com front slash web yoda and

37:57

this will guarantee you the best price in most cases you can find a free site that will work and for this example

38:02

we're going to use a free site so let's go ahead and change that back to all

38:07

now notice there's lots of different categories that you can look through to find the particular one you're looking for

38:12

in our case we're going to do one that's called cosmetics as our default so if you type cosmetics in the box

38:19

you'll see that the ones that are available under that heading show up and the one that we're going to want looks like this in my case it's the first one

38:26

it may be farther down the list if you want to go ahead and click on that and this brings up the starter site

38:31

we're going to use to build our website there's a number of options you can fill in here but we're going to do all that

38:37

ourselves later so all we need to do is click on skip and continue we're going to scroll to the bottom

38:44

we're going to choose continue it's going to ask us a couple of questions so let's go ahead and fill in the boxes

38:51

we'll put yoda yoda at web yoda.com i am

38:57

we'll tell them we're intermediate and we're building our website

39:03

and i don't really want their newsletter right now scroll down submit and build my website

39:10

now it's installing our starter site and remember earlier we didn't install elementor ourselves that's because it's

39:16

going to install it here so there's really no reason i add that extra step this process doesn't take very long i

39:22

speed it up just a little bit right here so that we didn't have to wait as long

39:30

congratulations installation complete took 33 seconds they give you an option to view your website here but we already

39:36

have a tab to do that and if we go to our second tab and hit reload

39:43

look at there we've got a fully functioning website with a shopping cart already built into it how nice is that

39:51

so that's for free from astra themes and you could basically build any website

39:56

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

40:02

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

40:08

think even cooler so let's go back to our wordpress admin

40:15

i'm going to close this little window it takes up space and i don't like it now since we're going to be building

Disable Shopping Cart

40:20

bethany's website first before we do any of the shopping cart related things and some people may not even choose to use

40:26

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

40:33

so the first step to do that is we're going to go to plugins scroll down

40:39

and we'll just deactivate woocommerce next we want to remove the shop button

40:47

in this case on our website is right there to do that we're going to go to

40:52

appearance menus and now we need to choose the menu we're

40:57

going to look at so we're going to pull down that menu there and choose primary menu

41:04

hit select and now we're looking at the primary menu inside of the one that says shop

41:12

i can remove that for now and now at the bottom may have to scroll

41:17

down to get to it save menu and now when we go back and reload our

41:22

site there's no longer a shopping cart in there for now so go back to our wordpress admin

Fix Murphy’s Law Errors

41:30

and at this point i wanted to discuss the things that can go wrong murphy's law states that when things can

41:36

go wrong they will go wrong and you will experience this yourself it's in my experience plenty of times while

41:41

building websites that random unexplained things can go wrong for example once i wanted to update my

41:46

theme and the theme button would not work another time i clicked on my widgets page and instead of seeing these widgets

41:53

the page came up empty like this another time on my shopping cart where there should be stars under the review

42:00

there were just a bunch of s's instead another time inside of my customized options only a portion of the options

42:06

were showing up instead of all the options i expected to see so i know right now you're saying

42:12

yourself hey yoda what am i going to do about these things what happens when they go wrong i will tell you

42:18

in most cases the problems can resolve with a simple keystroke if you're inside the page that you want to fix for example let's say it was this

42:24

page i can hold down the control key and the shift key and then i can hit the reload button at the top left and in

42:30

most cases that'll solve the problem and you'll see the corrected version alternatively you might also try

42:36

clearing the cache inside of your browser you may try restarting your browser or you might also try viewing your

42:42

website in incognito mode to see what the rest of the world sees and at this point if you're still having

42:47

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

Backup Your Website

42:54

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

43:00

lose everything i personally use backup buddy which has saved me many times over the years either way you want to

43:05

consider a backup solution that meets your needs if you're looking to make scheduled

43:11

automated backups of your wordpress website where you're in full control as well as make manual backups at any time

43:16

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

43:23

now in my case i also installed the backup buddy plugin in bethany's new website and periodically as we go along i'll

43:29

save where i'm at in case something goes wrong i can always restore to where i'm at so at this point i'm going to scroll

43:34

down i'm going to choose backup buddy i'm going to choose complete backup

43:40

watch it do its thing which really doesn't take that long

43:46

and when the backup's complete i scroll up and i choose download the backup file and this

43:52

downloads a complete copy of the entire website and the database in case something goes wrong

Organize Header Menu

43:59

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 one there's

44:05

a logo to the left and a menu to the right on ours the logo is above let's go ahead and get started in making some of these

44:11

changes so go back to our wordpress admin we'll go to appearance

44:16

customize header builder and notice down here it shows us the

44:23

orientation of the stuff that's up here so for example i can move this one over here

44:30

and it shows that logo over there i can move this one over here and it shows the menu over there

Add/Replace Menu Logo

44:39

now we're going to choose the site identity and logo button and we're going to change our logos

44:45

so we'll click on change logo i wanted to point out an interesting

44:50

quirk about the media library sometimes when you load the media library it'll be in this mode which is upload file mode

44:57

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

45:04

i bring up a screen that looks like this but yet you go into yours and it looks like this it could be confusing

45:10

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

45:16

media library to bring up the picture version so let's go back to the upload files now

45:22

i can select files here but the much easier way to do that is to bring up that folder we have that has

45:28

all of our content in it but we can drag stuff from the content folder directly into here

45:35

so i'm going to scroll down and look for my logo and there's my menu logo

45:40

i can drag that over i can choose select

45:47

we're going to skip cropping and we'll scroll down

45:52

we'll change the next image now it's in our library

45:57

so i'll choose it again choose image

46:03

scroll down and what width do i want it in this little icon here says on a

46:09

regular computer screen and i want the width on a regular computer screen to be 230

46:14

see how that made it the correct size there now if i click that icon now it's in tablet mode

46:20

and in tablet mode i want it to be that size and also

46:26

i can move this to the left this to the right

46:32

we click that icon again it shows us phone mode i want to go ahead and make that 180.

46:39

we want to make sure both of these settings are turned off which they are by default

46:44

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

46:50

web yoda one on bethany's you see the self-tastic one and on these two tabs it shows the wordpress default

46:58

so we'll choose select site icon you want these images to be a minimum of

47:04

512x512 we'll go back to our library

47:09

and here's our logo for the favicon i use the ping format for most files it's a very versatile format

47:15

so i'll drag that over i'll hit select

47:21

choose crop image and now you see it showed up down here

47:27

and when we refresh this page it'll also show up so we'll hit publish

47:32

now we're not seeing it here just yet but if we come over here and we hit reload i held down shift and control when i did

47:38

that to make sure i got a better reload and now it shows the new icon

47:44

the logo is to the left the menus to the right we're making progress now notice this doesn't have our logo

47:50

yet and that's because this is a transparent menu bar so we're going to go ahead and go back

47:55

and change the logo in a couple of other places the logos we've done so far will make sure the logo shows up correctly in

48:02

your shopping cart in case you're putting a shopping cart on your website so if we scroll to the top we can hit

48:07

customize transparent header and now we scroll down and we're going to change these two images

48:13

so that logo is right there choose image again or change image use that one

48:21

hit the choose image button we scroll down now we're looking at the phone version

48:27

still if i click that it displays the computer format again i want to make that 230 for the computer

48:34

as before and then for the tablet i'll make it 200

48:40

and for the mobile again 180. let's choose publish

48:47

go back to our new website hit reload and now we have a nice logo here but

Make A Free Logo

48:53

you're saying yourself but you don't have a logo what do i do i will tell you

48:59

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

49:05

logo video at some point the next thing we want to do is to be

Choose A Menu Font

49:10

able to change this font this font may be fine for you and you don't need to change it but i want a different font for our menu so we'll go

49:17

back into our wordpress admin i'll choose x and just for consistency i'm going to

49:24

show you how to get to these things each time from the top menu so we're going to go back to appearance

49:30

customize header builder choose the primary menu button

49:38

choose the design button scroll down and here's the menu font option

49:45

they really hide this stuff don't they so i'll click on the pencil

49:51

and i want the family to be open sans condensed

49:57

going to choose 24 i'll choose publish come back over here

50:03

reload and i like that a lot better now i want to look at how to set base

Set Website Default Colors

50:10

colors for your entire website so we're going to close that out again for consistency we'll start at the

50:16

dashboard we'll go to appearance customize global

50:22

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

50:29

so i'm going to choose this and i want to scroll and i'm going to put my background color in there and

50:35

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

50:42

the colors that we had predefined me and bethany sat down and figured out the colors we wanted you'll want to go in

50:47

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

50:52

them for so in my case the background color was this light blue and that's where

50:58

that number came from right there we came back over here i can hit publish

51:04

and you could 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

51:11

and one of the last steps that we want to do that have to do with kind of the setup of things is when you come to the website and

51:18

let's say we clicked on testimonials notice how it says the word testimonials here now the page name you assigned to a

51:24

webpage is called the slug name so in this case the slug name for the testimonials page is testimonials to

51:30

make wordpress use the slug name as the page name requires a specific setting in wordpress and let me show you what i

Permalinks Settings

51:36

mean if i come back in here and you go to settings and then you go to permalinks

51:43

this defines the different ways that your urls for the pages can show up by choosing post name as the permalink

51:49

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

51:56

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

52:03

is liked better by search engine so we like to use that now scroll down

52:08

hit save changes and now if we go back to the website we're working on and we click the home

52:14

button we're going to start making this page look like this page

52:19

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

Build Website Home Page

52:26

our website and then down where the home page is out to the right when you're hovering

52:31

over it you can choose edit with elementor and that loads our home page up into the

52:36

elementor editor now the elementor page builder is the most popular page builder on the planet and you're going to find

52:42

out real quickly why that is it's just really easy to use super user friendly

52:47

it's fast reliable all those fun things now before we get started making changes to our page i wanted to give you a

Elementor Overview

52:54

little bit of background on how this works at the very top you see these icons and

52:59

this is the section edit icon this allows you to control the section which in this case is this whole area here

53:05

whereas this section is that section there and that's a different type of a section we'll talk about that notice how it's

53:11

got a little border on here if you click on that that's called an intersection see right there

53:17

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

53:24

is what a section is now inside of a row can be columns and

53:30

this little icon here defines the column so as we scroll down this particular one here has more than

53:36

one column in it notice there and there and this one here has a column here a column here and a column here

53:44

so you see that's the section so we click on that it shows a section in this case it's called an intersection

53:50

i'll tell you how that's different we'll use that later but it's still a section and inside a

53:55

section there's columns so a section is a row and then the columns inside of it there's a column marker so you edit the

54:02

column by clicking on those and then inside of a column this is a cell you can put different widgets so

54:09

that's a widget and see the little icon that's how you edit the widgets so when you scroll down to any area

54:15

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

54:22

inside of that look there's one two three different widgets if i click on that it's editing

54:28

that widget if i click on that it's editing that widget if i click on that it edits that widget

54:33

furthermore within each section within each column and within each widget

54:40

are three different ways that you can edit so for example where it says are happy clients if i select that

54:46

on the left i can change the content so here's the content i can change the

54:52

style of that content and then i have advanced settings for that content and that's true for anything so when we

54:58

come to the top and we click on this content up here that is the section

55:04

at the top here is the layout in this case the style for that section and the advanced

55:10

settings for that section and if i go to the column here is the layout for that column

55:16

here's the style for that column and here's the advanced for that column and then inside of this if i click on a

55:22

widget there's the content for the widget the style for the widget and the advanced for the widget so that's enough to get

55:29

us started and the first thing i want to do is change the background from being this cute girl to being the one that's

Change Background Image

55:35

going to be on our website so we'll choose the section at the top and then we're going to choose between

55:40

layout style and advanced we're going to choose style and here's the image that we're going to change

55:46

so if we click on that i need to put the new image i'm going to use here so we'll bring up our content folder

55:52

and now i'm looking for the cover image and it's that one right there cover home i'll drag that over

55:59

and then i'll choose insert media and now it has that image we can hit update at the bottom

56:06

go back to our website hit reload and it's that easy pretty neat huh

56:12

so let's go back to elementor and one of the things you might ask yourself is well where did i get this image

Free Stock Photos

56:18

i will tell you if you're looking to access the best royalty free photos and images online at

56:24

no cost to you then you'll want to check out my best free stock photos and images video at some point or you can simply

56:30

click on the link at the top right and visit it now now as that promo mentioned you can

56:37

basically get almost everything you need for free online and that's how almost all the art within this website was

56:43

collected was to get free images online so if you're wondering why didn't we just use a free bethany picture well she

56:48

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

Edit Fonts/Sizes/Colors

56:55

so now let's make some changes to our website this text right here we're going to use some of this stuff

57:01

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

57:08

want to put welcome 2 and then we're going to set some style for that typography is basically the font and

57:15

stuff like that so we'll click on that we're going to set the font to open sans

57:21

condensed we're going to choose a size of 23. and

57:26

the weight which is how bold it is will set to 100. that's what 900 looks like

57:31

that's what 600 looks like and we're just going to use 100 and now let's change this heading right

57:37

here so we'll choose that widget and then on the left we'll choose content and we'll type in that now i

57:44

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

57:51

you do a less than the letter b the letter r and a greater than that's literally the only html tag

57:58

you ever need to know and that tells it to make a line break and what it did was is it put self on

58:05

one line and tastic on the other now we'll go into style typography

58:11

and for the font i want to use lundrina shadow so we'll choose that and we'll

58:16

set the size of that to 122. look how cool that is now i don't like the line spacing in

58:22

between that being so big so if you scroll down here's the line height let's set that to 100 that way they're

58:28

nice and close and i want to set the margin to zero and let's look at what margin is if we

58:34

scroll to the top inside of our advanced we've got margin and we've got padding

58:40

well i want to set this margin from being 20 i'm going to set it to 0 and notice that it took this space out

58:46

here as we go along we'll see some differences i'll show you how margin and padding are different right now it would

58:52

be difficult to tell but both of those things give you a certain amount of space around

58:57

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

59:04

for the next line now we want to change the text in this widget i'll choose that one

59:10

be the best you will go to style typography

59:16

for this one i want it to be open sands condensed we'll make this 30.

59:23

we'll change the weight to 100 and we'll choose a line height

59:29

of 19 and that just kind of told us how much space we want between this text and this button right here

59:35

now i want to change this view more button to a learn more button i'll choose that widget

59:41

under content where it says view more i'll put learn more

59:46

and over here for the link i'll put about and now we can hit update

59:53

go back to the page we're working on hit reload and while look at that we're

59:58

making progress so let's go back to our elementor and now i want to add

Add Website Intro Video

1:00:04

the intro video but to add the intro video i first have to add it to the media library and to add a video i have

1:00:10

to do it outside of elementor so i'm going to choose this icon here and then i'm going to choose

1:00:16

exit to dashboard now i'm going to choose media and that takes us to our media library

1:00:22

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

1:00:27

load directly into elementor and now i'm going to go to our content folder and i'm looking for our intro video

1:00:35

and there it is i'm going to take this drag it to the left now that that's loaded

1:00:41

i'm going to select it so that i can get this link over here and i will copy the url to the clipboard

1:00:49

and now i can close that we'll go back to pages

1:00:54

we can go back to home edit with elementor and now we're going to select the

1:01:00

section at the top again we're going to choose style but instead of choosing it to be a

1:01:06

background which is just the classic one we're going to choose this little video choice

1:01:11

and here we can put in a link so we'll paste our link in there

1:01:17

and look at there our animation automatically worked right out of the

1:01:22

box now it's playing over and over again here's an option play once we'll turn

1:01:28

that on so that way it'll only play once and when it's done what we see

1:01:34

is that there's no background then we're like but it was there what happened

1:01:39

well the reason is is now we need to scroll down and there's a section called background

1:01:44

fallback we want to click on that and we'll choose the image we already uploaded

1:01:50

like so hit insert media and now it's there

1:01:56

we can hit update and that allows it to have the image that's going to be there after it loads

1:02:01

we'll go back to our page and hit reload and watch the animation but also notice

1:02:07

this text is already on the page right there but on bethany's site

1:02:12

when you reload it loads the intro and then right after the intro finishes

1:02:18

that little menu slides in boom pretty neat huh that's what we want to do

1:02:24

so we'll go back to elementor and this is the column we want to set to delay until after the intro video has

Animate Website Content

1:02:30

completed and so what we're going to do is we're going to choose that column

1:02:36

and now we'll go to advanced and under advanced one of the options is motion effects

1:02:42

and for the motion effect we want to choose fade in from the left

1:02:50

and then we're going to set the animation to eight thousand eight thousand milliseconds is eight

1:02:56

seconds which is a little bit longer than our animation is so we go and click update

1:03:02

go back to our version of the website hit reload now the intro shows

1:03:09

and at the end of the intro slides in the text really neat huh

Make An Intro Video

1:03:15

but you're saying yourself yo that's a pretty neat intro but i have no idea how to make one i will tell you

1:03:22

if you're looking to make a free video entry 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

1:03:29

point now we'll go ahead and go back to our elementor

1:03:35

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

1:03:42

typically you'd use it if you had services that you wanted to highlight or feature in your website this particular piece of code right here

1:03:49

i don't need it so i can right click on that little icon and choose delete

1:03:54

and now let's start working on our category section first we'll delete this widget right here and also i can right

1:04:00

click on that little icon and choose delete now for this header right here i'll select that icon and over here i'm

1:04:07

going to change that title to beat that text and the color we're going to use if we go to set style

1:04:13

we can choose a color and i want to be that color kind of a brownish color

1:04:19

now to get out of color mode you just click the tab again so it kind of toggles let open and close like that now

1:04:24

for typography the family i'm going to use the site pretty much we're going to use

1:04:29

open sand condense on a whole bunch of stuff and the padding around this

1:04:35

so if we go to advanced do padding again we'll talk more about this a little bit later

1:04:41

right now see this icon that's linked together that's linked apart

1:04:46

if they're linked together and you add one they all add together and if they're linked apart if they're

1:04:52

not linked then you change them individually i want them linked together that's the default

1:04:58

and i want to put 20 in there and that puts space around that particular item

1:05:04

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

1:05:11

now i'm also going to delete this widget i don't need it and now we're ready to add a widget we

Adding Widgets To Website

1:05:17

haven't done that yet to your elementor environment to add widgets we have to get to the collection

1:05:23

of the widgets to get to the collection of the widgets we choose this icon right here

1:05:28

and these are the different widgets we have at our disposal notice some of these have locks on them

1:05:34

because we don't have access to those the one we want is the one at the top

1:05:39

it's called intersection basically it allows you to make a section inside of a section so if you

1:05:45

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 it's kind of tricky sometimes to

1:05:52

get it to land where you want it i want it to land under the text and now i have this new section

Adding Images To Website

1:05:59

now in this first box i want to put an image so we'll go back

1:06:04

to our collection of widgets and here's the image widget i can drag that over and again notice

1:06:11

i can choose where it's going to land by moving it around and i want it in that box right there

1:06:17

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

1:06:24

that image and they're not in here yet so let's go to our content

1:06:29

and we're looking for categories and we've got six categories i'm going to select all six of those and

1:06:36

i'm going to drag them over all at once to save me some time later

1:06:41

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

1:06:47

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

1:06:54

media and now we've added an image to our website pretty easy huh now what i want to do is show you a

Duplicate & Move Widgets

1:07:01

trick for reusing widgets so here this widget here is a title widget if i click on that

1:07:07

it says it's a heading i'm going to right click on that and tell it to duplicate

1:07:13

now i have a second copy now if i move my mouse over the little

1:07:18

widget icon edit i can hold down on it and drag it wherever i want it and i want to drag it

1:07:23

under this picture like that and then i want to change this text

1:07:29

so i have that one selected already over here and change the title to say personal development

1:07:35

i'll go to style typography in this case i'm going to change the

1:07:40

font we're going to choose work sans and i'm going to choose a size of 22

1:07:46

and now i want to make a copy of this because i want to be able to reuse the

1:07:52

layout that i already have so just follow me on this if i wanted to duplicate this picture i could right

Duplicate Columns & Sections

1:07:57

click here and duplicate but what i want to do is duplicate the whole column so i'm going to say right click

1:08:03

and duplicate now i want another copy so i'm going to say right click and duplicate now i've got three copies

1:08:10

and now on this fourth column i want to get rid of it so i can right click on that and choose delete

1:08:16

and now i have the three that i want now at this point i can right click on that intersection

1:08:24

and choose duplicate and now i have six of those so you can see quickly instead of having to build

1:08:30

everything from scratch we have a lot of the stuff that we're going to want to use already

1:08:36

and now we can customize these one of the things that i don't like is how much space is around here

1:08:43

so let's choose this one i'll come over to advanced

1:08:48

and we're going to set this to 0 even though that worked for the top title it didn't work down here

1:08:55

i'll set it to 0 and i'll disconnect these

1:09:01

and then i'm going to set the bottom one to 20 by itself

Copy/Paste Content Style

1:09:06

now i need to fix all the other ones the same way i did this on purpose because i wanted you to see how to copy the style

1:09:14

so here we made a style change on this one so i can right click on this one

1:09:19

copy it and when i right click instead of pasting it to make a new copy

1:09:24

i'm going to paste the style and it just fixes the style and i can do that for each one of these

1:09:31

so you can see that's a neat way to be able to make changes quickly to the style without having to do all

1:09:36

the work over and over again now i just need to change out the pictures and the text to match

1:09:42

so to change this one i choose that image i come over here

1:09:49

and i pick my second image hit insert media and then i'm going to

1:09:55

choose that text change the heading over here and now that one's changed and then i'm

1:10:01

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

1:10:08

fact that's a picture of me and bethany at one of our favorite resorts at our wedding now if we click on update

1:10:14

and go back to our website and hit reload and you don't have to wait for the intro to load before you start

1:10:20

scrolling down just so you know and there's our new section now in bethany's

1:10:26

when you hit reload on it notice that these things come out to the sides like that and so we want to do

1:10:31

that next so we'll go back to elementor and now we're going to choose this

1:10:38

column icon we'll go to advanced motion effects

1:10:46

and we want to slide in from the right to the left so for the animation

1:10:52

we're going to slide in from the right

1:10:58

we're going to put the delay hit 1000 milliseconds which is one second

1:11:03

now we'll right click on that column copy right click on this column

1:11:09

paste style and now that one's set it didn't move but it did set it so now we'll come over to this one

1:11:17

select it advanced motion effects

1:11:22

we're going to slide this one in from the left

1:11:29

1000 milliseconds which is equal to one second right click

1:11:35

copy right click paste style

1:11:41

now for this one we'll select it advanced motion effects

1:11:48

and then this one will choose zoom in again one second

1:11:55

right click copy right click paste style

1:12:01

now we can update go back to our website hit reload and notice how those slide in

1:12:10

but let me do it again notice how this one is on top so they're stacked in a different order

1:12:16

than i want them basically we want this one and this one to be on the top and there's an easy way to do that so go

1:12:22

back to elementor we already have this one selected under advanced

1:12:28

for z axis we put a number one the default zero that will make this one sit a little bit

1:12:33

higher and we'll do the same thing here advanced

1:12:41

z index of one hit update we'll come up here

1:12:47

hit reload and they're coming in exactly the way we want them now we're ready to work on our next

1:12:53

section so let's look at bethany's site and we scroll down we're going to make this animation right

1:12:59

here and we'll also learn how to make the background transparent for the umbrella girl so now let's go to our

1:13:05

script and we're in the inspiration section and we're going to learn how to make the

1:13:10

girl transparent so first we're going to go to unsplash

1:13:15

and we're going to do a search for girl umbrella yellow and there she is

1:13:22

and we can download that if we want it gets added to our collection in our download folder

1:13:27

and you go to 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

Edit Photos Free Online

1:13:35

cropped out that's a really good question right i will tell you

1:13:42

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

1:13:50

so now let's go to our script now we want to go to the photo scissors

Remove Image Background

1:13:57

this is a website that allows you to crop a picture and it says upload an image

1:14:03

show you how easy it is here's my images there's the one we're interested in

1:14:09

click open uploads the picture

1:14:15

notice that it cropped the girl out no problem you can take this and go like that

1:14:21

obviously i made a mirror image of this but it gives you generally the idea of what you're trying to do

1:14:26

and then you can choose download download load resolution

1:14:31

the low resolution is fine for what you want to do

1:14:37

and you can go back to your elementor we scroll down so now that we've

1:14:43

successfully made our umbrella girl have a transparent background we're ready to start on our inspirational section and

1:14:49

then add her to it the first thing i'm going to do is going to change this background

1:14:55

so we're going to click on this and it's called an intersection this one right here

1:15:00

see how there's an intersection is there and the main section is there we want to be on the intersection we want to be on

1:15:06

that section there specifically and then we'll go to style

1:15:12

and then we'll click on the picture and now we need to upload a picture and we want to go to our inspirational

1:15:18

pictures so here's our content and scroll until we get there they are our inspirational pictures

1:15:25

and there's the background i want drag that over hit insert

1:15:31

now we want this to be center center for the position it already is but check that to

1:15:37

make sure instead of size cover let's change it to contained and now in this intersection there's two

1:15:44

columns a left and a right if you grab the edge in between you can slide it left and right and make it

1:15:49

change its size and get it roughly to 40 percent on the left

1:15:55

and 50 or 60 on the right you can also choose the column

1:16:00

and then specifically put it to 40 that's a little easier and the other one by default will be the difference

Animate Transparent Image

1:16:06

now let's add the girl we'll go up here to where we can pick from our widgets

1:16:14

we'll drag over an image and then we'll add our image so we'll go

1:16:20

back to our content folder and there's our transparent girl that we created drag that over

1:16:27

we hit insert now her image has been added so from here we're going to choose

1:16:33

advanced i want to put some padding at the top so let's say 200 that moves her down a little bit

1:16:41

and then we're going to go into the motion effects default

1:16:47

let's fader in from the left and let's give it a thousand

1:16:52

milliseconds or a one second delay for bringing her in like that

1:16:58

and let's let it come in a little more slowly just because we can ta-da there we go

1:17:05

now we can just hit update just out of curiosity it's nice to see our work sometimes come over here

1:17:11

we'll hit reload and there she is

1:17:16

we're making progress back to elementor we're going to choose

1:17:22

our section tab right here to edit the section itself

1:17:27

and we're going to go to style and see that background's white we're going to change it to

1:17:33

one of the darker cyan looking colors and now we're going to go to advanced

1:17:40

and change this from 0 to 35 and change that 100

1:17:46

to zero and bethany's you see this little wave brush thing going on right here we want to add that

Add Section Divider Effects

1:17:53

so let's go ahead it turns out being at the bottom of the section above so we got to scroll up

1:18:00

choose that section then go to style and then we're looking for shape divider

1:18:06

we're going to add the shape divider at the bottom and the type of shape divider we're going to use

1:18:12

is waves brush so we scroll down and you see that's what it looks like and there's lots of different ones you

1:18:18

can choose from it's worth checking them all out to try different stuff

1:18:25

in this case we're going to use the waves brush and then

1:18:30

we're going to set the color to that same blue that's in the section down here see how

1:18:35

it matches now and then we're going to set the height to 60. there's a lot of extra space

1:18:41

right here i want to come back up here we still have that selected we'll go to advanced

1:18:48

and we're going to change that from 200 to 100 so that brings it in some

1:18:54

and this itself will adjust itself out a little bit to bring that down in a second to make it look more correct

1:19:01

now over here this particular header this widget we're going to drag it below

1:19:06

the other one like that and then this one we're not going to need so let's delete that one

1:19:12

and then this button obviously we can make a button but i want to show you how you can recycle

1:19:17

stuff so i'm going to take this button i'm going to bring it down here and put it right there because we can just use

1:19:23

it there and make it work for us and it saves us the trouble of making one come back up now let's work on this

1:19:29

first header here the bigger one and let's make that say be inspired and we'll go to style

1:19:37

we'll set the color to be white and we'll close the color out we'll go into typography

1:19:43

i'm going to choose a font of mozzarette we'll make it 80

1:19:49

and make the thickness be 700 now the margin for our header

1:19:55

we go up here we'll click on margin and we disconnected those right there

1:20:04

is going to be 29 and basically that just allows that to

1:20:09

sit a little bit lower and so for this text if we choose that widget

1:20:16

i'll change the text to live your best life good advice

1:20:22

click on style color is white

1:20:28

close that go into typography font

1:20:33

laura we'll make this one 40

1:20:38

and we'll make the weight 500 and now below this we want to do an image carousel

Add Image Carousel

1:20:45

and so we need to go up here and choose this icon that displays all of our widgets

1:20:50

now the one we want is called an image carousel but instead of scrolling down looking for it we type the word image

1:20:56

it'll bring up all the ones that have that in common there's the image carousel we can drag that over that puts it above

1:21:04

the words that puts it below the words where we want it i can choose that now we need our inspirational pictures

1:21:11

so we'll bring up our content these are our six inspirational images

1:21:16

drag those over now they're loaded we can just click

1:21:22

create a new gallery and insert gallery now it's got three of them there for now

1:21:29

we're going to tell this to be large and we're going to sell it to put one per slide

1:21:36

and we're going to say image stretch equals yes and that looks about right

1:21:43

now notice that it has these dots here and it has these left right arrows

1:21:48

so you can have navigation built into the carousel i don't want that for this particular carousel so under navigation i'm going

1:21:56

to tell it none and that gets rid of the arrows on the dots and then down here under additional

1:22:02

options pause on hover that means if i put the mouse over it it stops showing new

1:22:08

pictures well that might be nice in some situations but i want to continue to show new pictures whether the mouse is

1:22:13

on it or not so we're going to turn that off our animation speed

1:22:19

let's set that to 4000 and we'll change this from being a slider to

1:22:25

fading and that'll fade in between the different pictures like that

1:22:30

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

1:22:37

let's go ahead and hit update we'll go back to our page hit reload

1:22:44

and look at that our inspired section is really working

1:22:50

well so now we want to work on our call to action section these little sections that have like an

1:22:56

icon some text and a button they're called call to action let's go back over here

1:23:03

the first thing i want to do this is an inner widget so we got to drag it i want to bring it down to this

1:23:09

next section into the light blue section and then this logo bar right here this

1:23:14

logo carousel i can right click and delete that i no longer need that and now we want to build out our call to

1:23:20

action section and the first thing we'll do is put our little brush divider here

1:23:25

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 section selected i go to

1:23:32

style shape divider it's going to be on the top this time

1:23:38

click there waves brush pick the same color as this color right

1:23:44

here like that close that out

1:23:50

set the height of it to 60 and we've got that part done

1:23:55

and so let's start to format this i'm going to click on that column

1:24:01

and we're going to choose advanced and where this says 0 25 0 25

1:24:08

i'm going to just change it to 0 20 0 20 just a little less space on that

1:24:16

don't waste so much space then we're going to choose this icon widget

1:24:22

and we're going to go to style and i'm going to set the color a little bit darker

1:24:28

and then for the header we'll also go in set the color to the same color

1:24:36

close that out and then typography we will pick

1:24:41

monserret we'll make it 32 tall and a weight of 300

1:24:48

and then for the text section we'll choose that widget

1:24:53

and i want to go into style and i'm going to use a special kind of alignment normally if you've got left

1:24:58

center right i'm going to use justified and i'll square things off it looks a little weird with this sample text when

1:25:04

we put real text in there it'll look a little bit better and then we'll go into typography

1:25:10

and a different font railway i'll make this 21

1:25:15

and a way to 200 and then a color for this will be the same color

1:25:20

we used for the icon in the header so everything kind of matches and i'm going to choose

1:25:28

right click on that icon and choose copy right paste style

1:25:34

right okay style and on this header right

1:25:39

copy right click pay style right click pay style

1:25:45

and for the text box right click copy right click pay style

1:25:52

right a style now for our button i'm going to choose the button

1:25:58

and go into style and i'm going to change the button color

1:26:06

to that not much different

1:26:11

and then when you move over the mouse we want it to grow a little bit so what we're going to do

1:26:18

is we're going to choose the hover option

1:26:23

and then on hover the animation we just want it to grow

1:26:28

look at that pow now right click copy

1:26:34

right click paste right click paste

1:26:40

bring it over bring it over many ways you could have done that just

1:26:45

showing you a different way now we see that there's content in these but it needs to be changed obviously

1:26:53

so let's go ahead and change the icons first so i'll click on that icon

1:26:59

go to content choose here and i can search i want to do a heart icon

1:27:06

so we'll choose that one and now for this one we'll choose that icon you don't always have to click the

1:27:11

little box i tried it in the habit because i know that works better come back over here come up over here

1:27:19

we'll look at comments we'll pick that one insert and then we'll choose the last

1:27:26

one come back over here question i'll choose the first one

1:27:32

insert and now since you know how to change the text on these i'll just use a little magic to make those happen

1:27:39

okay that updated the text but i wanted to do the buttons together because we hadn't had as much practice with that so

1:27:45

we'll choose the first button come over here on the left and this one will be learn more and we'll point that

1:27:50

to our about page the second one will say contact me

1:27:58

and we'll send them to our contact page and the last one

1:28:03

we'll say tips here and we'll send it to our paypal page

1:28:08

let's hit update go back over let's reload the page

1:28:14

scroll down and it's looking a lot better but let's add some animation to this

1:28:20

so we'll come back in here choose column one go to advanced

1:28:26

motion effects fade from the left

1:28:31

take this one advanced motion effects

1:28:38

fade from the right choose this one advanced

1:28:44

motion and we'll zoom that one in

1:28:49

just like that we'll hit update and we'll reload

1:28:54

looks pretty good all right so on bethany's site the next one we're going to do is this words of

1:29:00

wisdom section and ours does not look anything like that right now

1:29:07

we'll come back over here and to do the words of wisdom section we're going to do a carousel and we're

Insert New Section

1:29:12

going to go ahead and insert a new section above this just so you can see how to insert sections in between

1:29:20

i'll click right there now i have a new section and i'll click on the plus sign

1:29:26

i just need this to be one column and i will choose that section

1:29:32

i'll go to style and we're going to set the section color to white now i'm going to scroll to the top

1:29:40

and i'm going to right click on that header and copy it just another way of showing

1:29:46

you how to recycle stuff come back down here right click and paste it and now for the

1:29:53

text we'll change it to say words of wisdom

1:29:59

and now we're going to go to our collection of widgets and we'll type the word image again to

1:30:06

find the carousel we're using the carousel differently this time

1:30:11

we'll click on here to add pictures to our carousel we'll bring up our

1:30:16

content and we're looking for words of wisdom and there they are

1:30:23

so we'll select all those drag them over all at once

1:30:29

we'll click on create a new gallery we'll click insert gallery

1:30:34

for the image size we'll choose full so we can see the whole word

1:30:41

slides to show let's say five we want to scroll one at a time

1:30:47

i don't want any navigation now we'll look in the advanced section again i don't want to stop the animation

1:30:54

if i hover over it i only want about 500 milliseconds in

1:30:59

between that's half a second and i want to slow that down so it's going to do it slower

1:31:06

that's nice just like that we'll hit update

1:31:11

go back to our page hit reload and we're making progress

1:31:17

so we're going to go back over to elementor and i don't really like the spacing here

1:31:25

let's come back into advanced for that widget i'll put zeros in there disconnect them

1:31:30

i want 70 from the top because we're going to put a brush wave thing here but i want these closer

1:31:38

now what's interesting is is that if i do a margin i can do a negative margin on that

1:31:44

and look how it brings it up so we'll take that negative margin of 25.

1:31:50

for all practical purposes that's the main difference between padding and margining in most cases we will see some

1:31:56

other examples as well but with margin you can bring things closer together by using a negative number instead of a

1:32:03

positive number so we want to put our brush divider right here

1:32:08

we got to choose the section first and then we'll click on the shape divider

1:32:15

and it's going to go at the top and it's going to be our waves

1:32:21

and our color is going to be that same color

1:32:26

we'll close the color we didn't pick the right waves did we waves brush

1:32:32

we'll change it to 60 and that's looking pretty good we can hit update now since i know we're

Save Section As Template

1:32:39

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

1:32:45

so i'll go ahead and go up here we can right click choose save as template

1:32:51

we'll give it a name choose save now that we've saved our words of wisdom

1:32:57

section as a template we'll be able to reuse that in any other page in our website so let's go ahead and close this window

1:33:04

come back over here reload and that's looking pretty good

1:33:11

now we'll look at bethany's website again the next section we're going to do is this practical advice section again

1:33:17

we'll utilize a transparent image slider so let's go ahead and go back to our page

1:33:23

now the next section of the website is a testimonial section bethany's website does not need a testimonial section but

1:33:29

you might need one for your website so one of the things you might consider is to leave this the way it is

1:33:37

or you potentially could come up here copy this button

1:33:42

come down here paste the button and then change this to say

1:33:49

more testimonials and you could have a page of testimonials and in fact the default

1:33:54

site also has a testimonials page so you could point to that and repurpose it and have a testimonials page for yourself

1:34:01

so since bethany's website doesn't need testimonials i'm going to delete this section

1:34:06

we're also not going to use a latest product section here so i'm going to delete that section

1:34:11

and then i'm going to click the plus sign so i can make a new section in between

1:34:17

and then we'll click the plus we want this to have two columns

1:34:22

under layout instead of content with boxed we're going to say full width and then the left column

1:34:29

we're going to make it 55. which makes the one over there 45.

1:34:35

i'm going to choose that section it's already chosen but choose style

1:34:42

and we're going to add a background so we'll click on the background classic

1:34:48

click there now we need to get our correct image for this so we'll go back to our content and

1:34:54

there's the practical advice beach we'll drag that in

1:35:00

insert media and now we have our beach scene in there the positioning we're going to use is

1:35:06

going to be top center and the size is going to be

1:35:11

cover i know you can't see anything yet but it will reveal itself

1:35:18

now in the left box we're going to put an image let's drag an image in there like that

1:35:25

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

1:35:32

drag that over insert media and now for this left column

1:35:39

i'm going to go in advance and we're going to set some padding and we'll turn that to 90 on the top

1:35:46

and 40 on the bottom and then we're going to copy

1:35:51

the words of wisdom heading and then we'll come back down here and

1:35:56

right click and paste it that'll save us from some of the setup for that and we'll go into style

1:36:04

we'll set the color to black and we're going to change the height of that to 50.

1:36:10

and then below that we're going to add a widget

1:36:16

if we type the word test brings up testimonial we'll put that

1:36:22

under it it's kind of like an all-in-one widget it has some text and a picture and stuff

1:36:29

like that in it and for the image we're going to put a profile picture for

1:36:35

bethany and there is the practical advice profile picture

1:36:42

we'll drag that over insert and for

1:36:47

the content we're just going to put questions and answers from quora

1:36:53

we'll put her pin name of pepper low and positioning

1:36:59

we'll choose top and then we'll go back to the top and look in style

1:37:04

under image we'll set a size of 115

1:37:10

for the image size for the content style we're going to go into typography

1:37:18

and we'll choose droid arabic 24

1:37:24

and we'll set the color to that and for the name we'll go into

1:37:29

typography and we'll pick

1:37:34

open sands condensed and we'll make it 30 and we'll set the color to that

1:37:43

make it a little easier to see on the sand and we'll go back where it has title

1:37:49

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

1:37:56

to choose that column and we're going to tell the vertical alignment to be at the bottom

1:38:02

that way when the picture slides in it'll be sliding in at the bottom and then we're going into advanced

1:38:08

and even though these look like they have no value at all i'm going to open those up and make sure

1:38:13

they all say zero and now we're going to add our image to the right column so we come up here

1:38:19

choose our image widget choose our image go to our content folder

1:38:27

there's the transparent bethany she's very transparent very genuine great person

1:38:33

got that size pull a line left

1:38:39

and if we go into style we can set the width to 400

1:38:48

that does not look right the default was percentage we wanted pixels

1:38:55

400 see it happens to me too murphy's law

1:39:01

i hate that guy we'll go into advanced

1:39:06

motion we're going to fade in from the right we're going to fade in slowly from the

1:39:13

right and we're going to wait a thousand milliseconds one second to do that

1:39:18

we can hit update we'll come back to our page

1:39:23

we'll hit reload look at that we got it working i don't really like all this extra space

1:39:30

here so let's go back and fix that and that's because the words of wisdom

1:39:36

had extra space when we made a copy from the other header so we'll go into advanced

1:39:44

and we'll change this to zero and that looks pretty good we can update

1:39:50

and then where it has the name here for bethany inside of this widget let's go ahead and make a link

1:39:57

to contact we'll hit update reload

1:40:04

and that looks much better now we want to do the sign up

1:40:11

and that's pretty straightforward we look at the one over here

1:40:16

we just basically change the text out because everything else was okay for our needs so i'll come back over here

1:40:24

and we're going to change this text out so we'll click on that come over here

1:40:29

paste that in notice i had br tag to allow this to break in the middle

1:40:35

and now i'm going to choose alignment right i can make it look exactly like i want it to look

Add Join Email Form

1:40:42

now over here if you click on this widget it shows this shortcode form

1:40:48

this is not the way to do this there's a better way to do this so we're going to delete that widget

1:40:55

and you're like but it was fine it worked well maybe but we want to do it more correctly

1:41:00

if we type in this box wp forms we come up with two choices

1:41:06

this is the one from the company itself wp forms we'll drag that in the box

1:41:13

now over here or over here we can select the form so we'll go in here

1:41:19

we want to choose sign up form and now it looks the same but it's more correct

1:41:25

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

1:41:31

your email address at the same time so we won't worry about making that update just yet

1:41:36

so we hit update come up here hit reload

1:41:41

and that's ready to go and i forgot one last thing

1:41:47

this wasn't supposed to continue to say words of wisdom it was supposed to say practical advice

1:41:52

so i'll say update and that'll be fixed

Build Website Footer

1:41:58

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

1:42:04

elementor and now we're going to have to exit to the dashboard so we'll click there

1:42:09

exit to dashboard the first thing you want to do is remove the footer that came with the website then we're going to replace it with one

1:42:15

that's much better so the first thing we're going to do is click on appearance

1:42:21

customize footer builder and then we're going to delete all the

1:42:27

fields that are here now we'll hit publish

1:42:33

and we can exit out of that now we're back at our dashboard

1:42:38

now under appearance we're going to go to elementor header and footer builder we're going to choose add new

1:42:46

intermediate for myself or just choose skip

1:42:52

the title is going to be website footer the type is going to be footer

1:42:59

choose it makes sense to display on all pages but really what we want is the entire

1:43:05

website so don't make that mistake all pages doesn't include posts so anytime you posted something to your blog it

1:43:11

wouldn't show up there so you want to choose entire website and that'll mean it'll show up on all pages

1:43:17

all posts everywhere scroll down user rules

1:43:22

all we'll check that box to enable for elementor choose publish

1:43:29

now we'll edit with elementor and now we're ready to build our footer

1:43:34

you're saying to yourself but you know i just saw what the footer looked like why should i have to do it all the way you're correct i will show you we're

1:43:40

going to build it using a template so we're going to click on our folder

Import Section Template

1:43:46

we're going to choose this little icon here which imports a template

1:43:51

and now we're going to go to our content folder and at the bottom are a whole bunch of templates

1:43:56

and one of those is the website footer we'll drag that over now we have a website footer

1:44:03

we can insert the footer and it automatically loads it in exactly what you need it to say

1:44:10

obviously you change this to be whatever content you need whatever image you need but it's already set up easy to use just

1:44:17

like that now if you're going to have a shopping cart you might want to change this one over

1:44:22

here it says about you could change it to shop you could also have more but i didn't

1:44:28

really want more and we put shop there

1:44:33

and now it'll go to the shop when we get ready to do that hit update

1:44:41

come back over here hit reload

1:44:46

scroll to the bottom we already have a footer it's just that easy

1:44:53

so now our home page is totally complete

1:44:58

okay okay so it's not totally complete what it's totally complete on is your desktop what we need to do is to

Mobile Device Optimization

1:45:04

optimize it for a mobile as well and then you can apply that to tablet too now to make other device adjustments

1:45:11

first of all we click down here on the responsive mode and then at that point you can choose

1:45:16

between the different views that you're seeing and we're just going to focus on the mobile version and you can apply what

1:45:22

you learn here to all your other pages in your tablet so we'll choose the mobile device

1:45:27

and notice this wraps funny so we'll choose that

1:45:32

we'll go into style and for the size let's just set that to 100.

1:45:38

now that works also the website intro videos aren't typically compatible with mobile devices

1:45:43

so if you find that your video intro is not working on a mobile device rest assured it's not your fault

1:45:49

so let's scroll down now i want to change the padding on this a little bit

1:45:56

and if you go to the bottom of that section i can change it here as well so we'll choose the section

1:46:03

and we'll go into advanced and we'll set that to 40 20

1:46:09

40 20. and then for this text i want to make that just a tiny bit

1:46:14

bigger so i can select that text go to style typography

1:46:20

and we'll choose 26. now when you scroll to the bottom of this section

1:46:26

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

1:46:31

change that this particular wave is at the bottom of this section

1:46:37

so we'll choose that section we'll go to style shape divider we know it's at the bottom

1:46:44

and we'll go ahead and set that to 30. now we scroll down

1:46:50

see that looks good now while we're already in that mode let's scroll down and do the other ones

1:46:56

so we'll choose that one style shape divider 30.

1:47:02

see if i missed any yeah i missed that one select that section style

1:47:09

shape divider height 30. okay

1:47:15

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

1:47:22

and she kind of takes the whole screen so we'll choose the umbrella girl and we'll go into advanced

1:47:29

we'll do 60 at the top we'll unconnect that

1:47:35

we'll do 30 on the left and we'll do 30 on the right

1:47:40

at the bottom we'll do zero now we want to work on this piece to bring it up a little bit and make it

1:47:46

smaller so the first thing we'll do is work on the padding for that column so we'll choose the column

1:47:51

choose advanced now notice these have the little phone next to it this means we're only editing the phone version

1:47:57

i'll type 10. we'll select the be inspired go to style

1:48:03

typography we'll set the font to 40. it's still wrapping so let's move it

1:48:08

down now it doesn't wrap so now it's at 38. now that's a little bit close at the top

1:48:14

so let's go ahead and go back into our padding on that we'll disconnect these and let's set the padding at the top to

1:48:21

say 30. now we want to adjust this font

1:48:26

so we'll select that we'll go to style typography

1:48:31

and we'll set the size to 28 and now there's too much space below b inspired so we'll choose that

1:48:39

we'll go to advanced change this to zero brings that up

1:48:45

and that looks real good now so we'll scroll down there's not enough spacing at the bottom

1:48:50

of that wave so we can choose that column

1:48:56

and at the bottom let's try 50.

1:49:01

there that looks better now for the about me the spacing looks okay but look how close that one is so

1:49:08

we're going to choose the icon and we'll go to advanced and then for the margin at the top we'll

1:49:15

put 60 and that looks good same thing with this one we'll select the icon

1:49:22

go to advanced and set the top one to 60.

1:49:27

now for the words of wisdom that's a little small so i'll click on that choose style

1:49:33

typography let's try a size of 40. that worked out good

1:49:38

now this section here really doesn't work really well look at the text how it fits in there funny and

1:49:44

it's a wrong color and i wasn't able to find a way to make this work well that made any sense but

1:49:50

it's a good chance to see another feature and that is we're going to select that section

1:49:55

we'll go to advanced and under responsive we're going to hide that section on

1:50:01

mobile now you can hide a section you can hide a column and you can hide a widget so you have that flexibility in

1:50:07

this case we're just hiding the whole section now we'll scroll down

1:50:12

this particular piece of text here let's go ahead and choose that and let's center it

1:50:18

there's no way to center this any easy way unfortunately and that should do it now what you can

1:50:24

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

1:50:32

so you scroll up and you see is there anything else i want to change about this but it looks pretty good so we can bring

1:50:38

that back out choose update and the mobile updates to our homepage are now complete

1:50:45

so now our home page is totally complete and we've accomplished a lot in a small

1:50:50

amount of time so i'm going to go back to my elementor

1:50:55

i'm going to exit elementor and now that i've personally

1:51:02

completed a substantial amount of work i'm going to use my backup buddy again if you have another method of

1:51:08

backing up it's a good time to do it i'm going to choose create backup

1:51:13

i'm going to choose complete backup let it do its thing

1:51:23

now the backup is complete come back up download the backup to my computer

1:51:33

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

1:51:40

can at least get back to where i am right now so now we're ready to start on our next page so we'll go back to our dashboard

Create About Us Page

1:51:48

and we're ready to start on our about us page and let's go ahead and close this down here

1:51:54

we're going to go to pages we'll hover over about and choose edit with elementor

1:52:02

now that our about page is loaded in elementor let's go ahead and go back to bethany's site and see what her about page looks like

1:52:08

so i'll scroll to the top click on about and we're going to build this nice

1:52:13

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

1:52:19

that has self-tastic in it let's go ahead and go back to elementor the first thing we'll do is update the

1:52:26

background picture for the about section so we'll choose that section

1:52:32

go to style choose the image now we need to bring up our content

1:52:38

folder scroll to the top and now we're looking for our header images so we'll scroll down

1:52:44

and there they are and the one we want at this point is going to be the about header so i'll drag that over

1:52:51

now that's loaded we can insert media notice there's some shading on this

1:52:56

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

1:53:02

through a little bit better and i'll show you how that works we're going to go to the background overlay section

1:53:08

and these are the two colors that are associated in here we'll choose the first color

1:53:15

we'll set it to that and i'll close that and i'm going to start with a location

1:53:20

of zero which is the top edge up here and then i'll go to the second color

1:53:26

paste that in now if you're interested where am i getting these particular colors from i'm getting them from the about us

1:53:32

content in case you want to do the same thing then i can close that and notice how

1:53:37

it's light at the top and it goes dark to the bottom if i change this angle to 180 it turns

1:53:43

it upside down now it's a little bit dark at the top and light at the bottom and then for the

1:53:49

bottom location i'm just going to change it to 24 because i only wanted to come down a

1:53:54

certain amount of space now if i click on update and we go back to our site and view it

1:54:00

scroll to the top click on about notice there's a little bit of shading

1:54:06

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

1:54:11

elementor and now let's work on the header so we'll select that we'll make the align left

1:54:17

we'll go into style let's set the color to white it already is white but

1:54:23

just in case we'll go into typography we'll set the font

1:54:28

to laundrina shadow size 90 and then we'll go into advanced

1:54:34

we'll open up our padding and let's set this to to 150 that pushes that down just nicely

1:54:41

like that we can hit update and now if we look at bethany's you'll see there's a little bit of a shape

1:54:47

divider here we're going to add that same effect using that same cyan color we'll go back

1:54:52

to our elementor let's go ahead and choose that section and now we're going to scroll down

1:54:58

choose shape divider and we're going to apply it to the bottom and we're going to select tilt opacity

1:55:05

and then we'll set the color update

1:55:11

reload our page and there it is we're going up using this header on a

1:55:17

lot of pages so what i want to do next is save this as a template so let's go back to elementor

1:55:22

we'll right click choose save as template give the template a name

1:55:30

hit save our template has been saved so now we can close that window

1:55:36

and now we want to work on the next section so the first thing we'll do is choose that section

1:55:42

go to style we'll set the background color

1:55:47

and then we're going to set a background overlay notice that there's something in the background already

1:55:52

we'll choose background overlay there's the current one we'll choose that bring up our content folder

1:55:59

now we need to find our logo background overlay so we'll scroll down to our logo section

1:56:06

and there it is we'll drag it over now it's loaded

1:56:11

insert media we're going to choose ours to be

1:56:16

top left and we'll leave it fixed

1:56:21

we'll leave it at no repeat our size will be covered

1:56:28

and we'll set our opacity to 0.05 so we can see it a little bit better

1:56:33

so now you can see that shows in the background but it doesn't get in the way of the text now i want to adjust the padding for

1:56:39

this section so we'll scroll back to the top go to advanced

1:56:44

let's just make this 100 at the top 100 at the bottom

1:56:51

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

1:56:58

column and then i'm going to scroll down and i'll delete this section

1:57:04

and i'll delete this section and now we're left with the one section we need and then i will delete that

1:57:11

widget and i'll delete that widget and i'll delete that widget

1:57:18

and i'll delete that intersection so now basically we have

1:57:25

a header a heading and we have a text editor now

1:57:30

alternatively you could come over here and you could have dragged a heading over and you could drag the text editor

1:57:35

over it as well so we'll select the heading and we want that to say about me

1:57:42

and we want to go to style we're going to set the typography

1:57:49

the font will be montserrat

1:57:54

32 a weight of 300. now we actually have two of these we

1:58:00

only need one i'll delete that one we're going to edit the other text editor so i select that

1:58:07

we'll come back in here to style we'll choose a color of that typography

1:58:15

we'll set the font to railway size to 21

1:58:20

weight to 400. now we'll go back to content

1:58:25

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

Wrap Text Around An Image

1:58:32

click on add media and now we need to get the item that we're going to be adding so let's go to

1:58:37

our content folder scroll to the top and there is the about picture we'll drag that over

1:58:44

it's loaded insert into post and it's at the bottom

1:58:49

but we don't want that there so let me click on that and delete it and i'll show you what i really wanted

1:58:54

to do i wanted to scroll to the top select right there so i can set it in

1:59:00

there choose add media select the image insert

1:59:06

now it's inserted at the top we need a few more adjustments here so we'll select the image

1:59:14

this icon here will align it to the right so now all of a sudden the text wraps around it nicely

1:59:20

we'll click the pencil for the size i'm going to choose full size

1:59:25

if you wanted to add a link you could add it there we'll do update and it wraps nicely

1:59:32

let's hit update go back to our page hit reload

1:59:40

and we're making progress now on bethany's page she's got the words of wisdom section

1:59:47

so let's go back to our elementor we'll scroll down we'll choose the folder icon

1:59:53

we'll choose the words of wisdom section click on insert always choose no on this question

2:00:01

now it's been inserted into our page we can hit update

2:00:06

go back to our page hit reload and now we just need to add the black

2:00:12

waves brush above the footer we can go back to elementor so words of wisdom is already selected

2:00:19

we'll go to style scroll down shape divider we're going to put it at

2:00:26

the bottom we're going to choose waves brush

2:00:33

we'll set the color we'll set the height

2:00:39

to 60. and notice this is overlaying funny right here it's okay

2:00:44

advanced we'll unconnect those and let's see what 50 does

2:00:50

looks just right so we can hit on update go back to our page

2:00:56

hit reload and this page is complete

2:01:02

now inadvertently even though i told this font to be railway somehow it got saved as default

2:01:07

so we need to choose this widget go to style typography

2:01:13

and where it says default we'll choose railway

2:01:19

and notice how it changed there we'll do update we'll go back to our page

2:01:25

and now see it's the old font here we hit reload that's the correct font

2:01:32

now we go back to elementor and we can exit elementor

2:01:38

and go back to our dashboard so let's go ahead and go back to pages

Create Duplicate Pages

2:01:45

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

2:01:51

going to go over and hover over about choose duplicate

2:01:56

now here's our duplicate i'm going to choose quick edit

2:02:01

the title for this page will be gallery the slug name will also be gallery

2:02:08

status published hit update

2:02:15

now we'll make another duplicate for our blog page again we'll hover over the duplicate

2:02:21

choose quick edit this one will be called blog slug name blog

2:02:27

published hit update and we're going to make one more

2:02:32

copy and we're going to make a services page even though bethany's site doesn't need a services page yours might so we're

2:02:38

going to make a services page for you in case you need one so we'll go to duplicate this

2:02:45

and again hover over that so we can choose quick edit title equal services

2:02:52

slug name equal services status is published

2:02:59

hit update and that should be all the duplicate pages we'll need for a while

2:03:04

and now if we go back to bethany's site scroll to the top you can see these are the different items she has we want to go ahead and

Add/Edit Menu Bar Items

2:03:11

make our menu match hers so let's go back to our dashboard

2:03:16

we're going to choose appearance we're going to choose menus

2:03:21

make sure we're pointing at the primary menu still and this is what our menu looks like

2:03:27

right now we're not going to need a testimonial for her site but if you need one you'll leave it

2:03:33

so i'm going to take that one out also you can decide whether or not to leave a home button

2:03:38

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

2:03:44

you whether you want one or not i'm gonna leave ours there for now

2:03:49

now for bethany's website it needs a blog it needs a gallery you might add services if you're going

2:03:55

to add the services page that we're going to create we'll choose add to menu

2:04:02

and now you can drag these around to organize them so i want

2:04:07

the gallery to be here and i want the blog to be here scroll down

2:04:14

save changes change is saved and now we're going to quickly build a services page

Create Services Page

2:04:21

in case you need one for your website so we're gonna go to pages

2:04:27

i'm gonna scroll down hover over services edit with elementor

2:04:34

and there's our copy of our about page and what we're going to do is delete every single widget here

2:04:43

and then we're going to choose the folder and then we're going to import a template

2:04:49

we'll go back to our content folder scroll down to the templates

2:04:54

here's our services page drag that over

2:04:59

and here's our complete services page we'll choose insert i'll always choose no

2:05:06

and look at there you have a complete services page you can make updates and changes to that yourself

2:05:13

we'll hit update your services page is complete we'll exit to the

2:05:18

dashboard and now we're ready to work on our gallery page so let's go back to pages

Create Gallery Page

2:05:24

we'll hover over gallery choose edit with elementor see how nice it is to start with a page

2:05:30

that already has a lot done for us so we'll go ahead and change that text to gallery

2:05:37

let's change our background have a different background for the gallery select that section so we can change the

2:05:43

background image we'll go to style click on that now we need to load the correct header

2:05:48

so let's go to our content folder scroll down to headers

2:05:55

and there's the gallery header drag that over

2:06:01

choose insert media our header is complete

2:06:06

now we want to work on the next section and we're going to go ahead and delete this header

2:06:12

and delete that text editor and the first thing i'm going to do is show you the free gallery

2:06:19

so we'll come up here choose type in gallery

2:06:24

and there's the basic gallery drag that in now we want to add pictures to the gallery

2:06:31

we need to go back to our content folder and here's our gallery pictures

2:06:36

we'll choose that one hold down shift and choose that one so they're all

2:06:42

selected we'll drag them all over at once and let them all load at the same time

2:06:49

they're all loaded and by default they're all selected so we can create new gallery

2:06:55

you could reorganize these if you wanted to and then we'll choose insert gallery

2:07:02

and there's our gallery we'll scroll down we'll set our image size to medium

2:07:08

columns four let's hit update let's go back to our page

2:07:15

scroll to the top let's see what that looks like we need to hit reload because our menu

2:07:20

is not there yet our new menu there's our new menu choose gallery

2:07:27

and there's our gallery so we can see this is a nice looking gallery

2:07:33

and not bad it's also a light box gallery

2:07:40

so we click on that but it's just not as fancy as the one that bethany has if we go to her gallery

2:07:49

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

2:07:56

look a lot better than it does and that's basically as good as you're going to be able to do for a free plugin at this point but in my case i'm going to

2:08:03

want to go ahead and go back to elementor and i'm going to upgrade to elementor pro so you can see how to use the pro

Create Fancy Gallery Page

2:08:08

version of the gallery

2:08:14

now that upgrade is complete i'm going to delete the current gallery

2:08:19

i'm going to come over here type in gallery and we want this one

2:08:25

it's just called gallery but it ought to be called super fancy gallery choose that

2:08:31

we want to pick our pictures they're already loaded from before so we'll just select them all

2:08:36

create gallery again you can switch these around however you want to organize them

2:08:42

insert gallery and now see it automatically made things fit nice together like a puzzle but

2:08:48

we're going to scroll down and the layout type we're going to do is masonry

2:08:54

look at that and we'll use four columns that's the default

2:09:00

we can choose update now let's go review our page again

2:09:06

we'll hit reload and i just like that a lot better

2:09:12

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

2:09:18

for me if you decide you want to get the pro version of elementor at the best possible price just go to webuta.com

2:09:24

front slash elementor and choose the elementor pro button so our gallery page is complete so we

2:09:32

can go and exit to the dashboard to blog or not to blog that is the

Create Website Blog

2:09:38

question at this point there's many reason to have a really good blog on your website and there's

2:09:43

people who just don't need a blog if your website doesn't need a blog you can remove the blog button from your

2:09:48

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

Posts Header & Blog Header

2:09:55

so the first step in adding a blog to your website is to create a header for all of your blog posts as well as a

2:10:00

header for your blog page that contains all your posts so let's go ahead and go to appearance

2:10:06

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

2:10:12

of all your posts so the title will be blog page header

2:10:18

template type will be a header and where do we want it to display

2:10:24

we want it to display on our blog post page user roles

2:10:30

all will enable this for elementor will publish

2:10:37

choose edit with elementor i'm providing a template for both the blog page header and the blog post

2:10:43

header so let's go ahead and click on the folder we're going to choose the upload arrow

2:10:51

bring up our content folder scroll down to the templates

2:10:57

and there's our blog page header we'll drag that over and there's our blog page header

2:11:05

we'll go ahead and insert i'll always choose no and there's our blog page header

2:11:11

obviously you'd change this out to be whatever you needed it to be we'll choose update

2:11:18

exit elementor now we want to create our blog post

2:11:23

header so we'll choose add new we'll set the title to blog post header

2:11:31

template type header display on

2:11:36

all posts user rules all

2:11:44

enable for elementor choose publish

2:11:49

edit with elementor now we're in elementor

2:11:55

we'll choose the folder we're going to choose the upload arrow

2:12:01

again go back to our content folder now we're going to choose the blog post header which is this one

2:12:08

drag that over and there's our blog post header go ahead and insert that

2:12:14

i always choose no again make whatever changes you want

2:12:21

here we'll choose update

2:12:28

exit elementor and now your header for your blog page and your blog post is complete

Remove Old Posts

2:12:35

so the next step to adding a blog to our website is to remove any old posts so let's go ahead and choose posts on

2:12:42

the left so now we can select all the posts in this case one

2:12:48

bulk actions move to trash apply

2:12:53

and that's all gone now we're ready to add our first post so we're going to choose add new

Creating Your Posts

2:13:01

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

2:13:06

need to do your post obviously you're not likely to just make these up as you go along so i collected all the

2:13:12

information for the different posts we're going to do to make this easier so for example the title of the first

2:13:18

post will be this so we'll set the title to that and now for the content

2:13:25

paste that in and notice at the top this is already bold because in the

2:13:30

google doc i did it was already bold so it allowed me to import some of the formatting as well

2:13:36

blog posts are organized into categories so over here we want to add a category

2:13:41

in this case this particular post is a life lessons so i'll add life lessons

2:13:48

hit enter and it automatically checked it now if you don't give it a category

2:13:54

it'll automatically use uncategorized next we'll add tags for this particular

2:14:00

post i'll hit add and these are basically like keywords that are associated with the post i also

2:14:07

want to point out if you need to make changes or adjustments to your categories or tags under posts categories and tags allow you to make

2:14:14

those updates and changes scroll down now we want to add a featured image

2:14:21

i'm going to choose set featured image we want to bring up our content folder again

2:14:28

and the images for blog will be near the top so there's our first blog and there's

2:14:33

our six we're gonna have six in this example drag those over

2:14:38

and our first blog is the puppy set featured image

2:14:43

now i normally make my blog images about 800 pixels across just as a reference now we can scroll up

2:14:50

and choose publish now if i want to see this post just as an example

2:14:56

i can right click on this link and open in a new tab and we can look at that tab

2:15:03

and there's that header we made and this is the post just like that

2:15:10

not bad huh let's go ahead and close that now we're going to add one more post

2:15:16

together so i'll click add new and then the other four

2:15:21

we'll use some magic to make those since it's all the same process so the second blog post the title is

2:15:26

that the content for the post is that

2:15:31

this one's going to have multiple categories so we'll choose the life lessons

2:15:37

we'll add a new one hit enter this will also have mental health

2:15:44

personal development and we'll scroll down we'll put some tags in that are terms

2:15:50

associated with the document scroll to the bottom set our featured image

2:15:57

and there's our blog 2 image that one is now set scroll to the top

2:16:03

now if you didn't want to publish immediately you could go inside and choose a date that you'd publish

2:16:09

something i'm going to publish this immediately

2:16:15

now we can right click on that open a new tab

2:16:21

check it out and there's our second post notice it automatically added the share

2:16:27

post plugin so other people can share your blog posts we'll close that

2:16:33

i'm going to go ahead and add the additional post at magic speed okay and so now all six posts have been

2:16:40

added and let's go ahead and look at this particular post right click

2:16:45

open a new tab i'll bring that up this particular one bethany wrote about

2:16:51

people that wanted to make money using blogs and so if you have an interest in doing that this might give you some more information as well

Set Profile Picture & Pen Name

2:16:57

we want to make a couple of changes to this to make this more user friendly first of all notice it says buy yoda

2:17:03

user instead of buy pepper low and if we click on that has picture of

2:17:09

me we don't want that well she doesn't want that so we'll back up

2:17:15

how do we fix this we'll go back to our wordpress admin so the two things we'll change are the

2:17:21

profile picture and the pin name the first thing we'll change is the profile picture and we're going to do that inside of profile press

2:17:28

and i go to plugins and then i scroll down to profile press

2:17:34

and i choose settings i'm going to choose profile and cover photo

2:17:40

now i want to scroll down where it says disable gravatar we're going to choose to disable that

2:17:47

now we want to choose an image at this point we want to upload a profile picture for bethany for her blog

2:17:54

bring up our content folder there's our profile picture for the blog

2:18:00

drag that over select

2:18:06

save changes next to change the pin name

2:18:11

we're going to go to users i'll click on the username

2:18:17

we'll scroll down and for a nickname we'll change it to

2:18:23

pepperlow and for the display name we'll choose pepperlow

2:18:28

and there's also a section to do bioinfo let's put a little bio in there

2:18:34

choose update profile profiles updated now if we go back to

2:18:40

our post and scroll down where it says yo to user if we reload

2:18:47

it'll now have bethany's pin name pepper low if we click on pepper pepperlow

2:18:53

it now says pepperlow has her picture and it has her bio pretty nice right

2:18:58

now if we back up we're looking at a post now one of the

2:19:04

problems with this post is that there's no way to really get anywhere else other than the post itself

Add Blog Post Side Bar

2:19:10

so a really convenient thing to have is a sidebar over here that has a lot of controls that you can use within your

2:19:15

blog so let's go ahead and add the sidebar so we're gonna go back to our wordpress

2:19:22

we're gonna go to appearance customize we'll choose sidebar

2:19:28

under blog post we'll choose right sidebar we'll hit publish

2:19:35

and then we can close out of that now we want to customize our sidebar to do that we're going to go to

2:19:41

appearance widgets now the sidebar that's going to be the

2:19:47

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

2:19:52

may not want the defaults for these are never exactly the same so what we want to do is we

2:19:57

want to clean this up now if we go to the script file this is basically what i want to get i

2:20:03

want to have a search box i want to see recent post i want to see recent comments archives categories meta and a

2:20:10

tag cloud and we'll talk about those but basically we're trying to get to that and we're currently seeing this

2:20:16

so the first thing that we can do is delete all of these that just say block on them

2:20:22

i think as much as anything they're just duplicates

2:20:28

and now we have the list that looks like this one

2:20:34

except that there's one extra one that i want to add to this now on the left hand side are all the

2:20:39

widgets you could add to your sidebar and you could probably find other plugins to add additional stuff

2:20:47

if i scroll down the one i'm interested in is called tag cloud if i click on that i can choose where i

2:20:53

want it to be it's got by default it's chosen the main sidebar

2:20:58

i'll choose add widget and when i scroll up now tag cloud has been added to the

2:21:04

collectional widgets on the main sidebar we're not going to give it a title it'll automatically say tag cloud

2:21:11

also you can organize these however you want that order right there matches what we

2:21:18

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

2:21:24

going to see on most blogs and there is no save on this page so basically it's already

2:21:31

saved so now if we come back over to our post and we hit reload

2:21:38

and now you can see the sidebar has been added we have a search box we have recent post comments

2:21:43

archives categories meta options and a tag cloud

Blog Post Style Settings

2:21:50

the next thing you might wonder is okay here's the default but what kind of control do i have over this and the

2:21:55

answer is really not much the free version astro the free version of elementor neither of those give you

2:22:00

any real tools for doing any updates and changes to the formatting for the posts themselves so unfortunately kind of

2:22:06

stuck with the excessive padding and the default font and things like that i know you're saying yourself hey there

2:22:12

must be a way to fix the spacing in the fonts for free right absolutely i will show you

2:22:18

so what you want to do is go to your script and you're going to look for a section under the blogs

2:22:23

that's called the just blog post font and spacing and this is cascading style sheets css

2:22:29

don't worry about what it does just worry that it doesn't what you want to do is select the yellow text

2:22:35

copy to the clipboard and now we're going to go back to our wordpress admin

2:22:40

we're going to go to appearance customize and at the very bottom is additional css

2:22:48

we'll click on that we don't need this little window so we can do close and right here there's nothing in there

2:22:54

yet so we're just going to paste that in at the top and now we'll do publish

2:23:00

and then 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

2:23:07

we hit reload look at that we have better spacing now we have a different font that doesn't take up so much room

2:23:13

it's a lot cleaner than it was before and it was free so at this point we want to be able to

Create Basic Blog Page

2:23:18

access our blogs from a blog page if we click on our blog page actually let me clean this up real quick

2:23:24

we've got an extra tab here if we click on our blog link it takes us to our default about page

2:23:31

remember we made a duplicate of that we'd like that to come up with our blog so let's go do that

2:23:36

so we're going to go back to our wordpress admin we'll close that to get to our dashboard

2:23:41

we're going to go to pages we'll hover over blog choose edit with

2:23:47

elementor and from within here we're going to delete the top section

2:23:53

and the delete that about me section and leave words of wisdom we'll choose update

2:24:02

and now we'll exit elementor we'll choose appearance

2:24:09

customize scroll down home page settings

2:24:15

for post we'll choose blog we'll hit publish

2:24:21

and now we'll visit our website again and hit reload and look at there there's our header

2:24:27

and there are all our blog posts now unfortunately no matter how much you talk to yourself about hey yoda this

2:24:34

really doesn't have a lot of formatting what can we do about it i don't have an answer for that because unfortunately

2:24:40

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

2:24:45

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

Create Pro Blog Page

2:24:52

access to elementor 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

2:24:58

so we'll go back to our wordpress and where we had post page and we set to

2:25:04

blog let's go ahead and set that back to select and we'll hit publish

2:25:11

now we're going to exit out of that to our dashboard so let's edit this page again with

2:25:17

elementor now at the very top we're going to insert a section we'll choose our folder we'll choose my

2:25:24

templates now we want to insert our blog page header so we'll choose insert

2:25:30

always choose no so at the very top we will not need this intersection that has the logo in the

2:25:35

menu in it so we're going to go ahead and close that one not the one at the top but that one right there so we close

2:25:41

that now there's not a lot of space there let's choose the widget that has the word blog in it we'll go to advanced

2:25:48

and where it says 200 let's put 300

2:25:54

now we want to add another section just below our header and in this box we'll hit the plus

2:26:00

we'll choose a single column now we want to go up to our widgets again we'll type in the word posts

2:26:08

that's the one we want right there make sure your icon matches that drag that over

2:26:14

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

2:26:20

skin to cards that's really nice now let's go ahead and do some formatting on this so we're going to go

2:26:27

to style we'll go into content under title for typography we'll set the

2:26:34

font open sans condensed we'll set the size to 24.

2:26:40

we'll close that next we'll do the excerpt typography

2:26:46

font open sans condensed we'll set the size of this to 21.

2:26:51

we'll close that finally the read more typography

2:26:57

font open sans condensed and we'll set this one to 16.

2:27:03

close that now hit update now we'll go back to our blog

2:27:10

and hit reload and look at that we have a really nice looking blog now now i understand it

2:27:17

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 elementor pro to

2:27:23

be able to get a nice fancy blog that looks like this now we're ready to work on our final page of the website before we start on

2:27:28

the shopping cart and that's the contact us page so let's go ahead and go back to elementor

2:27:33

and now we'll exit out of elementor back to our dashboard to start on our contact us page we need

Create Contact Us Page

2:27:39

to go back to pages now we want to go down and hover over contact

2:27:45

choose edit with elementor the first thing we'll do is delete their header and add our own

2:27:52

so let's delete that now we'll choose the plus sign to add a section we'll go to our folder

2:28:00

and remember we saved in our my templates are about us header so go ahead and insert that

2:28:08

always choose no now we'll choose the about

2:28:14

and let's change that to contact now we want to change the background image we have a special one for this

2:28:19

page so we'll go to style click on the image

2:28:25

now this is one of the situations i talked about earlier it didn't come up with the pictures this time like it had before

2:28:30

i don't understand why i want to bring up our content folder

2:28:36

now we're going back to our header images they'll be near the top and there's our header image for the

2:28:42

contact page drag that over choose insert

2:28:48

now we're ready to work on the next section let's go ahead and change the message us we'll choose that

2:28:54

go into style typography we'll set the font to open sans

2:29:00

condensed size 30. close that

2:29:07

we also have a background that we're going to use so we'll choose that section we'll go to style

2:29:13

click on the image now we want to go back to our content folder scroll to the top

2:29:20

there's our background for the contact now notice it's not going to matter that the pictures aren't here

2:29:25

i can still drag that over and it works fine choose insert now we're going to scroll down

2:29:32

we'll set the settings for this soon that'll allow this to point to your email under contact us let's put some content

2:29:39

there like that i'm going to make that a little darker so i'll go into

2:29:46

the style for that change the color to that

2:29:52

close that out we'll go into typography font

2:29:57

you guessed it open sans condensed size 21 we'll put a weight of 400.

2:30:04

that looks nice we'll close that now we want to put a profile image under this

2:30:10

so we'll go back to our widgets let's drag an image right there

2:30:15

we'll select the image go to our library we'll scroll down

2:30:21

the image we want it's already in here that one right there insert media

2:30:28

scroll down let's go ahead and style we'll set the max width to 75.

2:30:36

that's percent by the way we learned that already and now for follow us let's edit that

2:30:43

first we'll go into advanced instead of 100 for the margin top we'll put 70.

2:30:50

go into style typography font open sans condensed

2:30:57

size 30. that looks good let's close that at the bottom is our social media

2:31:04

we'll choose that i'm going to go into style and set the size to 32 make it bigger

2:31:11

go back into content these can be added subtracted organized so for example i can take instagram and

2:31:17

drag it to the bottom like that now you're going to set each one of these so we'll go ahead and set hers

2:31:23

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

2:31:29

be bad now in bethany's case she doesn't have a youtube so we're going to use that one differently

2:31:34

so we'll recycle that one we click on it we'll go to here in the box we'll type medium and there's

2:31:42

medium we'll insert that now for the link we'll put her medium link

2:31:48

you can close that back down i think we'll put that one at the bottom now let's do the facebook one

2:31:55

set the link to that close that now we're ready for twitter our twitter link is that

2:32:01

close that let's put twitter at the top open instagram set the link

2:32:07

close it and we're okay with that now let's come back on this side and work on

2:32:12

it a little bit we'll go ahead and choose this widget we're going to come over to the left hand side

2:32:18

we'll go ahead and set the address like that close that out

2:32:24

now i'll put the phone number like that change the hours

2:32:31

like that obviously you could pick different ones you can also move these around

2:32:36

you can add one right there so let's go ahead and go to style under text

2:32:43

we'll set the color to that close that

2:32:49

typography change the font opens condensed

2:32:55

let's make that 21 and weight of 400

2:33:00

now we want to work on our map so we can select that widget we can put our location

2:33:08

zoom at 15 is fine but i think we want this a little bit taller maybe come down to here somewhere

2:33:15

let's try 500 that looks good

2:33:20

we'll hit update come back over to our page we'll click on contact

2:33:27

and look there we already have a contact us page it was that fast isn't that nice

2:33:34

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

2:33:39

the idea so let's go back to elementor now we're going to exit

2:33:45

elementor to the dashboard now we want to edit our forms as well as set the forms to point to the email we

Edit WP Forms Settings

2:33:51

want to go to to do that we're going to go into wp forms

2:33:56

and then i'm going to choose the contact form that's the one we're going to edit so i click on that

2:34:03

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

2:34:08

basically is free so suppose you wanted to add a subject line

2:34:14

on the left hand side grab the single line text widget drop it in just like that

2:34:21

now if we choose field options

2:34:26

and we select that field now we can edit that field and we can make it say subject

2:34:32

now suppose you want to go all the way across under advanced set field size to large

2:34:39

and now it's all the way across so now let's say you wanted to have a phone field

2:34:45

come back over to add fields and you look and you're like uh oh there's no phone field oh wait here it

2:34:50

is and you click on the phone field upgrade to pro that's quite convenient everybody's

2:34:56

going to want a phone number yet we're going to have to pay for it but you're saying to yourself hey yoda

2:35:01

there's got to be a way around this don't you have a trick for this absolutely i will show you

2:35:08

so we'll close out that window now instead of picking the phone field

2:35:13

let's go back up pick the single line field we'll drag it in let's say we want to set it there

2:35:20

and then we'll go back to field options we choose that field set the label to phone

2:35:26

now we have a phone field now let's say you want that field to be required you notice the ones with an asterisk

2:35:33

next to them those are the ones that are required so for the phone field if we turn this on right here

2:35:38

now it's required it has the asterisk next to it now we'll go into the advanced

2:35:44

and we'll set the width to large now we have a phone field but what's the difference well the main difference is

2:35:50

when somebody enters a phone number in ours it's not validated to make sure it really is a phone number

2:35:56

now we want to set where the email is going to go to so on the left hand side if you go to settings

2:36:02

and then you go to notifications right here send email address

2:36:07

that is the email that it's going to send to by default it's going to be the one that's in your admin and that might be fine

2:36:13

but in our case the admin was mine but we want these to go to bethany so we'll put that in there

2:36:19

and we can set the subject line for the emails so let's change that

2:36:24

i'll change it to say self-tastic comments and then who do we want the from name to be

2:36:30

we'll say from there we can leave the rest alone let's go ahead and click save

2:36:37

now i'll close that and we'll go ahead and make the change we need for the sign up page as well

2:36:44

so we'll click on sign up we just want to go into settings notifications

2:36:52

this will also go to bethany or the subject line

2:36:57

join club self-tastic set our from name everything else can stay the same hit

2:37:04

save obviously we didn't do a lot in wp forms only the stuff we really needed but if

2:37:09

you're interested in learning more make sure you watch my video if you're looking to learn more about

2:37:15

what wp forms can do for your website then you'll want to check out my wp forms for beginners video at some point

2:37:23

so hit close and now we want to test this out to see that we get email

2:37:29

so back to our website we'll hit refresh just to make sure we're looking at a fresh copy

2:37:35

and notice now it has the subject line now this is going to go to bethany

2:37:41

so let's send it from me subject line test hello world

2:37:47

hit send and our message was sent successfully good job

2:37:53

now one of the things you might be interested in is you might have said to yourself

2:37:59

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

2:38:05

of tools but you're like but yoda you always have a piece of code for us so we can do it

2:38:10

without having to pay for it i know you're right and okay i will show you

2:38:16

so what you want to do is you want to go to your script and look under the form section for a section called format your

2:38:21

forms so once again you'll highlight the yellow code like that

2:38:26

copy it to your clipboard now let's go back to our wordpress and now from here we're going to go to

2:38:33

appearance customize scroll down

2:38:39

additional css let's click on contact over here so we can actually see this working

2:38:46

and that's what it looks like right now down below this let's hit a couple extra lines

2:38:52

paste that in and look at that it changed everything up just a little bit

2:38:58

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

2:39:04

you like we'll choose publish go back to our page

2:39:09

that's what it looked like before hit reload

2:39:14

that's what it looks like now now officially our website's complete but there's one more step that we don't

Turn On Website Secure Pages

2:39:20

want to forget and that is to turn on secure pages for our website to do that we're going to go back to

2:39:26

wordpress we'll exit to the dashboard now we want to install the plugin that's

2:39:32

going to allow us to make our pages secure so we're going to go down to plugins

2:39:38

add new plugin upload plugin choose file

2:39:44

make sure we're looking at our downloads folder and now the one we're looking for

2:39:50

is really simple ssl hit open

2:39:56

install now activate plug-in now for some reason you didn't have this

2:40:02

plug-in already you just need to go to dot com front slash plugins

2:40:08

scroll down to this project and then download the plugin you need

2:40:13

now once that's installed it immediately says hey go ahead and activate but i don't want to do that just yet we're

2:40:19

going to do is we want to scroll down find the plugin and we're going to go to settings

2:40:26

tells us we're not connected yet we know that but what we're really looking for is this check mark it found an ssl

2:40:32

certificate detected for our website if you don't see that message you need to contact your hosting company to ask them

2:40:38

how to get your certificate activated because without a certificate we can't secure your web pages

2:40:44

since we have a certificate all i need to do is click on go ahead to activate

2:40:49

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

2:40:56

log back in so for example our next step is going to click on elementor

2:41:01

and when i did that it asked me to log back in so i'll choose login

2:41:06

so our next step was we clicked on elementor it brought up this page and it has these options we're looking for the

2:41:12

option called tools so we click on tools

2:41:17

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

2:41:24

pages so i'll paste that in and notice it just has http

2:41:30

then in the second box i'm going to paste the same thing but at the beginning i'll put an s right

2:41:36

there basically going from non-secure pages to secure pages and it's going to look

2:41:42

throughout the entire website and see any places that finds this and replace it with this we'll hit replace

2:41:49

261 rows affected that was a good thing

2:41:55

now if we go back to our page notice it's not secure if we hit reload

2:42:02

now it has a little lock there and now we're secure

2:42:10

so our website is officially complete and if you don't plan on adding the shopping cart to your website there's one more thing you'll want to check out

2:42:15

at the end of this video i have a search engine optimization section that will teach you how to make your website liked better by the search engines if you will

Add A Shopping Cart

2:42:22

be adding the shopping cart to your website simply choose the link above to proceed to the shopping cart video then jump ahead to the section for adding the

2:42:29

shopping cart so we've reached the end of creating the website i hope you've enjoyed taking the course i know i've

2:42:34

enjoyed being your guide and your instructor but as promised i had four really key things that i wanted to add at the end

Search Engine Optimization 101

2:42:40

of this video that will help your website show up in the search engines better the first tip is that inside of

2:42:46

wordpress there's a place that specifically discourages search engines from indexing your site once your

2:42:51

website's 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

2:42:58

going to look for settings and under settings we're going to reading

2:43:04

and this may or may not be set depending on when and how yours was done and look at that search engine visibility

2:43:09

discourage search engines from indexing this site i definitely want to turn that off

2:43:15

and hit save changes tip number two there is an amazing plugin out there called yoast every

2:43:22

website that ranks higher than yours probably has yoast also free so we're gonna go to plugins

2:43:29

we're gonna add a new plugin and over here

2:43:35

type in yoast five million active installations tells you something

2:43:41

so let's go ahead and install it let's activate it now you have the most powerful plug-in

2:43:46

for doing seo available tip number three secure pages

2:43:52

google likes websites that have a lock google likes websites that are mobile friendly so if we can do both of those

2:43:57

things we're going to ensure that our website's liked better tip number four you want to make sure

2:44:03

the search engines think the value of your website's stronger than any of your competitions obviously having a lot of

2:44:08

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

2:44:15

of the number one things that improve your search engine results is by having other websites point to you if somebody

2:44:21

else's website has a link to you that's called a backlink the more backlinks you have the more important your website

2:44:26

seems to google the more backlinks the people who point to you have the more important they seem which also means the

2:44:32

more important you are now it seems like a lot of work but if you go to jose1.com these guys

2:44:38

will teach you everything you need to know about backlinks that's basically all they do and if you look at it jose

2:44:43

one seo literally is their middle name so they know what they're doing now under seo solutions

2:44:48

it shows you the basics the terminology and the details they'll teach you everything you need to know as far as

2:44:55

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

2:45:00

time in to build them yourself you can also contact them so if you decide to use jose one services be sure to mention

2:45:06

the promo code web yoda and that'll save you 50 off your first month with a 100 guarantee on that first month if you

2:45:11

don't like it you get your money back now i truly hope i covered everything you needed in this tutorial now if there

You Finished, Well Done!

2:45:17

was 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

2:45:22

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 could work on it together so i really enjoyed

2:45:29

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

2:45:35

out of this that would be super helpful but outside of that i just hope you have a great day peace out

2:45:54

you

0:00

today we're going to use WordPress the best and most popular way in the entire world to create a website it's used by

0:06

the best companies and artists for their own websites and it's really easy we're going to be doing it all step by step

0:11

with no steps skipped hi I'm Tyler Moore and to make a website it's just three simple steps first we have to set up

Overview

0:17

your website and then we're going to organize your website and then we're going to design your website the first thing that we need to do is we need to

0:23

set up our website so we need to do the intro which we've already done we need to do the overview which we're doing now

0:28

and then we need to set up your website name and hosting super easy to explain your website name is yourwebsite.com and

0:35

hosting is where you store all of your website files after that we're going to install WordPress WordPress is the most

0:41

popular and best platform in the entire world and it's super simple to install after that we're going to log into your

0:47

website super easy and then we're going to be done with the setup phase the next phase is the organize phase so we're

0:54

just going to organize a few things so that we can begin designing basically we're going to delete something called plugins which is basically basically

1:00

like apps or programs on your website that they include automatically that we don't need then we're going to delete the sample pages and posts then we're

1:07

going to back up your website so you never need to worry about messing up and then we're going to do your site title and taglines and this basically

1:13

describes your website to the search engines so you can get ranked better and then we'll be done with organizing your

1:19

website and finally we'll begin to design your website the first thing that we're going to do is we're going to choose your designs and there's so many

1:25

different designs to choose from and this is just going to be your starting point and you can mix and match different designs together to create

1:31

basically any design that you want then we're going to get into the theme style the theme style is basically all of the

1:37

default colors and the default fonts you want throughout your entire website and after that we're going to edit your home

1:43

page and here I'm going to show you a whole bunch of Tricks basically like how to change your text how to change your buttons your backgrounds your colors

1:50

background overlays inserting new images deleting sections moving sections

1:55

deleting columns the different spacing around everything adding new sections rearranging new sections creating

2:02

multiple columns and updating your website once we do that I'm going to show you how to make your website mobile

2:07

friendly it's already 99 mobile friendly so it's going to work on your phones and tablets and everything like that and

2:13

then we're going to get into the about page where I'm going to show you how to save a lot of time by adding blocks

2:19

instead of having to recreate and build your website from scratch you can use these different blocks that are going to save you so much time and then we're

2:25

going to get into the services page obviously this could be any page you don't need to have an about or Services page you can delete any Pages or change

2:33

it however you want but in this section I'm going to show you how to import an entire page from a different template

2:38

and this is super cool because you can mix and match so many different templates together to make your own and

2:43

then we're going to learn about the contact page how to edit it and then how to edit the form on the contact page because you can have a contact form so

2:50

that your visitors can get in touch with you super easy all they have to do is fill out this form in that form we'll email you to your email address and you

2:56

can start having a conversation with them in that way after that I'm going to show show you how to put in a brand new page so you can put in any page that you

3:03

want on your website I'm going to show you how to put in a projects page but obviously you can put in any page that you want and then I'm going to show you

3:09

how to create your own logo or insert a logo that you already have and finally we're going to get into the header and

3:14

the footer which is just the top of your website and the bottom of your website basically where your logo is and your

3:19

menu links are and I'm going to show you how to add in a cool button at the top of your website and I'll also show you

3:25

how to edit your footer and then that's it congratulations we're all done that could have cost you thousands and

3:30

thousands of dollars but you're doing it all yourself and you're learning something cool and we're going to be doing it all step by step with no step

3:36

skipped so we're done with the overview now let's learn about the only part that costs money getting your website name

3:41

and hosting also in the description below I have a website checklist where you can keep track of all of your progress and it also links to each part

3:48

of the video I also respond to each and every comment whether it's just a thank you or if you get stuck with something

3:54

I'm always here to help alright so let's begin so what is your website name and hosting your website name and hosting

Website Name & Hosting Explanation

4:01

are the only thing that costs money and it's super easy to understand your website name is basically

4:06

yourwebsite.com or yourbusiness.com and Google's website name is google.com and

4:12

Apple's website name is apple.com so that's your website name you need something to type in order for someone

4:18

to go to your website hosting is a little bit different hosting is a place that stores all of the information so if

4:24

you had a website name and no hosting then we'd be able to type in your website name right here but the website

4:29