WEBSITE FOR FREE
Generate Your First Professional WEBSITE FOR FREE PROJECT & Get Your BUSINESS 2 Another Level.
TRANSCRIPT
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
334,996 views 10 Sept 2022 WordPress Trending Now
HOW TO MAKE A WEBSITE FOR FREE 2023
This How to Make a Website for Free 2023 course covers all the website design and website development techniques needed to create your own website from start to finish. The course explains why HostGator is the right web host for you and covers purchasing web hosting, getting free domain name, installing WordPress for free, installing your theme and plug-ins for your Website for free, and creating your own video intro and professional logo for free. It provides a very detailed and complete step-by-step walk-through of everything you'll need to know how to create your own professional website from start to finish using the super easy (and free) Elementor page building plug-in. Below you will also find super discount options, lots of free resources, and timestamps to access specific lessons within this tutorial.
YODA'S TIP JAR 🗑️
DISCOUNT HOSTING OFFERS*
Host Link: http://hostgator.com/webyoda
Coupon : webyoda (Up to 80% off)
* You save money, I get a commission :-)
WEBSITE MUST HAVES
Backup Website : • How To Backup A W...
Free Logo : http://designevo.com/webyoda (Coupon WEBYODA30OFF)
Elementor: https://go.elementor.com/webyoda
TIMESTAMPS
00:00:00 Introduction
00:03:11 Website Project Overview
HOSTING
00:06:12 Choose A Web Host
00:08:21 Purchase Web Hosting
00:13:19 Name Server Settings
00:14:50 Log In To Your Control Panel
00:16:06 Email Forward Setup
00:16:47 Find WordPress Installer
00:17:45 Fix WordPress Install Errors
00:18:50 Install WordPress
WEBSITE
00:22:16 Login To WordPress Admin
00:23:17 Access Course Script
00:23:46 Download Course Content
00:25:07 Helpful Tips For This Course
00:28:11 Skip Making A Website?
00:28:24 Delete Pages & Plugins
00:29:36 Download Astra Theme
00:30:39 Download Plugins
00:32:50 Install Astra Theme
00:33:14 Update Theme
00:33:35 Install Plugins
00:36:19 Deleting WordPress Ads
00:36:33 Update Plugins
00:36:50 Install Astra Starter Site
00:40:19 Disable Shopping Cart
00:41:29 Fix Murphy’s Law Errors
00:42:50 Backup Your Website
00:43:58 Organize Header Menu
00:44:38 Add/Replace Menu Logo
00:48:53 Make A Free Logo
00:49:08 Choose A Menu Font
00:50:08 Set Website Default Colors
00:51:35 Permalinks Settings
00:52:22 Build Website Home Page
00:52:50 Elementor Overview
00:55:30 Change Background Image
00:56:15 Free Stock Photos
00:56:54 Edit Fonts/Sizes/Colors
01:00:02 Add Website Intro Video
01:02:25 Animate Website Content
01:03:14 Make An Intro Video
01:05:15 Adding Widgets To Website
01:05:58 Adding Images To Website
01:06:59 Duplicate & Move Widgets
01:07:55 Duplicate Columns & Sections
01:09:05 Copy/Paste Content Style
01:13:31 Edit Photos Free Online
01:13:53 Remove Image Background
01:16:05 Animate Transparent Image
01:17:47 Add Section Divider Effects
01:20:40 Add Image Carousel
01:29:10 Insert New Section
01:32:39 Save Section As Template
01:40:40 Add Join Email Form
01:41:58 Build Website Footer
01:43:42 Import Section Template
01:45:02 Mobile Device Optimization
01:51:48 Create About Us Page
01:58:28 Wrap Text Around An Image
02:01:45 Create Duplicate Pages
02:03:08 Add/Edit Menu Bar Items
02:04:17 Create Services Page
02:05:19 Create Gallery Page
02:08:05 Create Fancy Gallery Page
02:09:35 Create Website Blog
02:09:55 Posts Header & Blog Header
02:12:35 Remove Old Posts
02:12:55 Creating Your Posts
02:16:56 Set Profile Picture & Pen Name
02:19:09 Add Blog Post Side Bar
02:21:49 Blog Post Style Settings
02:23:15 Create Basic Blog Page
02:24:49 Create Pro Blog Page
02:27:38 Create Contact Us Page
02:33:47 Edit WP Forms Settings
02:39:17 Turn On Website Secure Pages
02:42:21 Add A Shopping Cart
02:42:35 Search Engine Optimization 101
02:45:12 You Finished, Well Done!
ABOUT THE AUTHOR
About me (Yoda) – http://webyoda.com/first-certified-we...
CREDITS
Drawing Artist - https://aubingarfielddunkley.com
Beta Tester - Dave Capamagian
WE LOVE QUESTIONS & COMMENTS
Please leave your comments and questions below.
WEBSITE FOR FREE
TRANSCRIPT
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
would come up blank because there's no place to store all of your text images and files but if we had a website name
4:35
and hosting then we would see all of our text and images and files and everything
4:41
like that so it's super important to have hosting because without it your website would come up blank so this
4:47
right here is basically what hosting is it's a computer that's on 24 7 that holds all of your images and all of your
4:53
texts and then those images can be displayed on your website and the text can be displayed on your website let's
5:00
see a really quick example let's say someone types in the website google.com so right here they type in google.com
5:06
that's where they want to go then that request gets sent to this hosting computer right here and then this
5:12
hosting computer that's storing all of the text and images sends all of that information back to their computer and
5:17
we can see that website get transferred back so it travels from this computer all the way back to their computer right
5:24
here and then we can see the Google Website so your website name costs about
5:29
15 per year and that's before discounts I'll show you how to get a discount in just a second and hosting cost about ten
5:36
dollars per month again before discounts but in total with all of the discounts and everything else it costs about
5:43
thirty dollars for the entire year and I think that's a really good deal to have your website spread across the entire
5:49
world operating 24 7 365. and again that's the only thing that you need to pay for there are no extra costs for
5:56
your website alright so let's get your website name and hosting and luckily we can do that at the same place all we
Get Your Website Name & Hosting
6:02
have to do is open up our browser and go to hostgator.com that's
6:08
h-o-s-t-g-a-t-o-r Dot c-o-m and press enter I do get a commission for recommending HostGator so thank you so
6:16
much and I've been recommending them on YouTube for 11 years now I can't believe it's been that long I really like them
6:21
because they have super great prices and they have 24 7 365 live chat phone and
6:27
email support but there are thousands and thousands of Hosting companies and obviously I haven't tried all of them so
6:34
if your hosting company is different this tutorial might be a little bit different but you should be able to follow along just fine we can see these
6:41
different buttons up here but what you want to do is hover over hosting and then we see these three right here and
6:47
you'd think that you would use WordPress hosting but it just costs more and we can always upgrade later so what we're
6:52
going to do is install WordPress on the shared hosting so just click on shared hosting if we scroll down we can see
6:59
these three different plans and we can see it says 275 for this hatchling plan but there's a trick if you go up here
7:06
and you type unlock and press enter we can see that the
7:11
biggest discount is unlocked and if we scroll down we can see that the prices have changed and now we're getting a
7:18
much bigger discount so there's three different plans the hatchling plan the baby plan and the business plan the
7:24
business plan is just way too much we don't need all of these things and we can always upgrade later so it really is
7:30
between the hatching plan and the baby plan the difference between the hatching plan and the baby plan is that the baby
7:35
plan offers unlimited websites so you can have like your website.com your
7:41
friendswebsite.net yourmomswebsite.org you can have as many websites as you want on the single baby
7:47
plan but with the hatching plan you can only have one website but because most people are only starting off with one
7:53
website anyways I recommend getting the hatching plan and then you can always upgrade later unless you know for sure
7:59
you already have two websites that you want to make then you'd use a baby plan but really the hatchling plan is
8:04
everything that most people need so we're just going to scroll down and click on buy now now it's going to ask
8:10
us are we registering a new domain or do we already own a domain you would click I already own this domain if you got
8:16
your domain name from somewhere like godaddy.com and you already own it but today I'm registering a new domain so
8:23
I'm just going to click on register a new domain and I'm going to put in the domain name right here and now it's
8:29
going to ask us do we want it to be our businessname.com or Dot online or Dot
8:34
site or dot store the most common is.com so I would stick with that if I could but sometimes your domain name isn't
8:42
available because someone else already registered it and in that case you would either think of a new domain name or you
8:48
would change the ending right here if you're a non-profit maybe you'd want a DOT org but we're just gonna stick with
8:54
the.com next if we scroll down it's going to ask us do we want the.com and the dot Club in the Dot site and the.net
9:01
in my opinion you don't need all of these they obviously just want to make more money but I don't think someone's
9:06
gonna like steal your business or anything like that so I think just get one domain name as your primary domain
9:12
and then we can scroll down and we can look at domain privacy protection so when you register a new domain your
9:19
information like your email and your phone number gets registered to this domain name then anyone online can look
9:26
it up and sometimes you might get a few spam calls or spam emails that are a little bit annoying and if you
9:32
definitely didn't want that to happen then you would enable domain privacy protection and what this does is it
9:38
hides all of your information like your email and your phone number but in the spirit of saving the most amount of
9:44
money and just knowing that we may get a couple of spam calls and spam emails I'm going to uncheck this and I'm Gonna Save
9:50
15 a year next we can scroll down and we're going to choose a hosting plan we already chose the hatching plan so we're
9:56
just gonna leave that and next the billing cycle this is where a little bit of strategy comes into play because if
10:03
we go with the one month plan then our discount is only applied for that one single month so if we go with the one
10:10
month plan even though we're paying the least amount up front that discount only gets applied for that one month so we're
10:16
actually going to be paying the most amount in the long run if we go with a 36 month plan we're going to be paying
10:22
the most amount up front but saving the most amount in the long run I think the perfect balance is the 12-month plan or
10:29
you're not paying much up front and you're saving a lot in the long run and it's actually the cheapest amount per
10:35
month of all the plans next we can scroll down and we can enter in our email address confirm our email address
10:41
enter in our password then put in a security pin scroll down and we can enter in our billing information like
10:47
our first name last name phone number address country city and state I'm in
10:52
California next we can scroll back up and enter in our payment type we can pay by credit card or PayPal and don't worry
10:59
this is not my real credit card number then we can scroll down and it's going to ask us do we want to add additional
11:05
services so for our SSL certificate that's when you get this little lock up
11:11
here and we would think that we would need it but actually this is Advanced SSL your website already comes with SSL
11:17
so we don't need this right here next is securing your website the beautiful thing about WordPress is we can download
11:25
something called a plugin that will add extra security to our website so we don't need this and we're saving 36
11:32
dollars a year for professional email your website already comes with basic email but this is something that I would
11:38
consider maybe in the future especially if you already use Google for your other email addresses but we can always get
11:45
this later so we don't need to worry about it right now and this is site backup so it'll back up your website and
11:51
even though this is a great idea again we can download something called a plugin for free that will back up our
11:56
website for us and we'll save 24. a year next is SEO tools and while that's a
12:02
great idea again there's a plug-in that's free that you can install on your website that will save you thirty five
12:09
dollars a year so we don't need any of these additional services so make sure they're all blank then make sure our
12:16
coupon code is unlocked that's the highest coupon code that there is and now we can scroll down and we can review
12:21
our order 24 7 365 live chat email support instant account activation money
12:27
back guarantee for 45 days we are registering our domain name and we have
12:32
the 12 month plan or whatever plan you chose and it says the amount is about
12:37
thirty dollars so anywhere from thirty dollars to forty dollars sometimes this fluctuates a little bit but anywhere in
12:44
between there is a great deal to have your website online and spread across the entire world next we can scroll down
12:50
and check that we have read the terms of service and then click checkout now all right congratulations you've done
Install WordPress
12:57
the hardest part which is just decide that you actually want a website everything else is pretty easy after
13:02
that the next thing that we're gonna do is install WordPress so just find any button that says install WordPress and
13:09
go ahead and click on it then we're going to see this right here and it used to be super hard but now all you have to
13:16
do is click on install now and now it's going to ask us for some information leave this as it is your domain name
13:23
will probably already be selected but if it's not you can just select it from here next we're going to make sure that
13:29
this is blank right here we don't want to put anything right here because if we do it's going to install it on your
13:35
website.com forward slash something instead of just yourwebsite.com we want to leave this as default whatever it is
13:42
and then we want to scroll down to our site settings and for our site name that usually is just your business name or if
13:49
you don't have a business it's just your name next is your site description and this is something that describes your
13:55
site so for example if you made logos and you're from Los Angeles maybe you'd put Los Angeles logo designer or if
14:03
you're the best math tutor in the world maybe you would put best math tutor in the world I'm just gonna put learn how
14:09
to make a website and for your admin username I like to put my name and for
14:14
your password I like to change this password to something that I can remember and just put it in right here
14:19
then for your admin email this is important so we want to change it to our main email so I'm just going to put in
14:26
my Gmail and that's because if you have to recover your password or something it'll send it here next we're going to
14:31
scroll down and for select language I would recommend keeping it as English even if you speak another language and
14:38
that's because you'll be able to follow this tutorial much easier if you keep it on English then later you can change it
14:44
we don't need to worry about this we can always do that later we're gonna scroll down and we're going to skip select
14:50
themes I'm going to show you how to do that later and if you want you can put in your email right here it's not
14:55
necessary but it will send some additional details to your email address then all we have to do is Click install
15:01
and if we scroll up we can see it installing so it's doing all of this magic behind the scenes setting up
15:07
databases and all of that stuff for you that used to be hard but now is super super simple so all we have to do is
15:14
wait a couple of minutes and WordPress will be installed so it says congratulations the software was
15:21
installed successfully but has it really if we go to our website right here and
15:26
click on it we can see that the website can't be reached and that's because it takes your website anywhere from 10 to
15:32
20 minutes to spread across the entire world and let everyone know that it exists so we're gonna have to wait 10 to
15:39
20 minutes sometimes it's very rare it can take an hour and it's super super rare for it to take up to 24 hours but
15:47
it has happened so I'm just going to take a little break right now I'm going to close this up here and I'm going to go for a walk and I'll be back in about
15:53
10 minutes alright so so I'm back it's been about 15 minutes let's go ahead and check out our website and we can see
Login
16:00
that our website works some developers would charge you 500 just to get to here
16:06
which is ridiculous this is so easy so now that we have our website we can go ahead and close this right here and
16:12
right now we're viewing the website as a visitor would view it in order to make changes to your website we have to log
16:19
in so we can go up here and go to yourwebsite.com forward slash WP Dash
16:26
admin and then press enter and now we can enter in that username and password that we just made so I'm
16:33
just going to put in my name as the username and the password that I made right here then just press login
Dashboard Explained
16:40
and now we're logged into your website and this is where you can make changes
16:45
this is called the dashboard to get back to the front end of your website as your
16:50
users would see it you just click on your business name up here and that will transport you back to the front end of
16:57
your website in order to get back to the back end or the dashboard of your website sometimes you have to click on
17:02
refresh right here and this bar will show up right here this means that you're logged in your users can't see it
17:09
only you can see it because you're logged in and to get to the dashboard again all you have to do is click on
17:15
your website name again so that's how you get to the front end and the back end of your website the next thing that
Delete Plugins
17:20
you might notice is if we scroll down here we have all of these things jumping out trying to grab our attention and
17:27
what the hosting companies do is they load you up with a whole bunch of plugins already pre-installed on your
17:34
website it's like when you get a phone and you have all of these apps that you didn't download or you get a computer
17:39
and you have a all these programs already installed that you don't really need the hosting companies do the same
17:45
thing they have all of these plugins that you don't really need that are just cluttering up your website but plugins
17:51
are super important and what they are is they're little apps or little programs
17:57
that you can install on your website for free that help you do things for example by default WordPress doesn't have a
18:04
contact form so we can download a plug-in and now your website can have a contact form or by default your website
18:11
can't make backups so we can download a free plugin and now your website can
18:16
make backups but most of these plugins we don't need so the first thing that we're going to do is delete all of these
18:22
plugins that we don't need so go over to plugins right here then we can scroll down and we can see all of the plugins
18:29
installed and if we scroll back up what we can do is we can check this box it'll
18:34
select all of them go up here first we're going to deactivate them and then click apply and then go here again and
18:42
go to the drop down and press delete and then apply and that's going to delete all of the plugins then we can press OK
18:49
and now all of our plugins are deleted so if we go back to the dashboard we can
18:54
see that this looks much better this looks much more clean but in order to clean our website perfectly we also need
Delete Pages & Posts
19:01
to delete the pages and the posts so let's go to the front end of our website
19:06
by clicking on our name and we can see here we have a sample page right here we can just click on it and we see the
19:12
sample page we didn't make the sample page and so we want to delete this sample page let's click on this right
19:18
here to go to our main website and we can also see this hello world right here this is like a blog post and we didn't
19:26
make it so we are going to delete it so in order to delete our page in our post
19:31
let's go to the back end of the website and click on pages we can see these two pages right here we can select both of
19:38
them we can go here move them to the track and apply and then click on the trash select this so it selects both of
19:45
them go to delete permanently and apply now we have zero Pages let's go to post
19:51
right here we can hover over it and click on trash and then we can go to the trash just because I want everything
19:57
super clean hover over it and press delete permanently now if we go to our website we can see that our website is
20:05
blank it doesn't look great yet but it will look great really soon the one
Backup Your Website
20:10
thing that I really like doing once I have a clean website is to make a backup then I'll always know I can go back to a
20:18
clean fresh start and it makes me feel like I can be free and make any sort of wild changes that I want and I won't
20:24
break anything because I can always go back so to do that we're going to download a plugin so just hover over
20:29
your website name click on it to go to the dashboard click on plugins then
20:34
we're going to add a new plugin right here and then we're going to search for a plug-in right here and the plugin has
20:39
a super weird name but trust me it's the best backup plugin it's called all-in-one WP migration and we can see
20:47
that it has four million active installations almost 7 000 reviews with
20:52
four and a half out of five stars so all we have to do is click on install now that will install it to our website and
21:00
then we have the activated so just click on activate and that will activate it on our website now if we look over here we
21:07
have this new all-in-one WP migration menu item and we can just click on it and we can say export to and we want to
21:15
export this to a file once we do that it's going to Archive it and it's going to tell us to download it
21:21
so now we can just download this to our computer and now it's downloaded I'm just going to drag this to my desktop
21:27
and just exit out of here that's all you need to do then press close and now we
21:32
always have that backup so we can make any changes we want right now and let's say we did something crazy and messed up
21:38
the website somehow we would just click on import and we would drag this file from your desktop to right here and it
21:45
will import this clean backup I'm going to stop the import right now because I don't need to do it but that's how you
21:51
would import your backup onto your website so these are like checkpoints in a game to ensure that you never lose
21:57
progress on your website alright so let's go back to our dashboard right here the next thing that we're going to
Site Title & Tagline
22:03
do is we're going to learn how to change your site title and tagline in WordPress so all we have to do is click up here
22:10
and we can see it if we hover over our website name we can see that it says create a website that's our title and
22:17
learn how to make a website that's our tagline this is super important because this is what shows up in the search
22:23
engines and it gets people to click on your website so you want to have a good site title that's usually your business
22:29
name and a tagline that really describes your business well alright so to change
22:34
it we want to go into the back end by just clicking on your business name and then going to settings and general once
22:41
we're here we can change that site title right here and we can change this tagline right here we don't want to
22:47
change any of this right here because that will break your website but we do want to make sure that this says your
22:53
email and we can scroll down and we can press save changes and that's how you
22:58
change your site title and tagline the next thing that we're going to do is install your theme the theme is the
Install Theme
23:04
design of your website let's look at it we can go to the front end of your website and we can see that this is the
23:09
current theme and right now this theme is pretty crappy we can't do anything on
23:15
this theme that we want it has a certain design that probably doesn't speak to you and it's just not that great before
23:21
there used to be themes for every different type of business so if you're a plumber you get a plumber theme if
23:28
you're a designer you get a designer theme if you're a marketer you get a marketer theme but that's the old way of
23:33
doing it the new way is you have one theme that can turn into any type of
23:38
website so literally everything can be changed within this theme so that's what we're going to be installing this one
23:44
theme that can be anything it can look like any type of website you see on the internet so to change our theme all we
23:51
have to do is go back into the dashboard by clicking on our website name and then going to appearance and themes so right
23:58
now this theme is installed right here we're going to be adding a new one by clicking on add new and we're going to
24:04
be installing this theme right here but let's go ahead and search for it we can just search for Astra
24:10
a-s-t-r-a and press enter and we can see this Astra theme right here we can go to details in preview and we can see that
24:17
it's rated five thousand times five out of 5 stars super great this is a preview
24:22
of what the theme will look like but because it's blank it doesn't have anything on it and it looks terrible
24:27
we're gonna make it look super great really soon so just click install and then we can click on activate now our
24:34
theme is activated we can go ahead and look at it on our website it still looks
24:40
terrible but this is the blank website or the skeleton that will allow us to do anything the next thing that we're going
Choose Your Design
24:47
to do is install a plugin that will save you so many hours and make your website really professional it's going to allow
24:53
you to import almost any design into your website as a starting point that you can then edit to do that all you
24:59
have to do is hover over your website name and click on it and then scroll down and click on plugins once you do
25:06
that you can click on add new and this is how you could add any plugin to your website then over here we can search for
25:13
a plugin called starter templates s-t-a-r-t-e r t e m p l a t e s then we
25:22
can see the starter templates it's been installed a million times and has 3400
25:27
five-star reviews and we can click on install now once we do that we can click
25:32
on activate and now when we go over to appearance and starter templates we can
25:37
see this new item right here and we can click on it once we do that we can scroll down and click build your website
25:44
now then it's going to ask us to select a page builder and by far Elementor is
25:50
the best page builder so we're going to select that one and now we can see all of the templates that we have access to
25:56
some of these templates are paid but a lot of them are free you can tell if they're paid by if they say premium on
26:03
them right here but I think the free ones are just amazing once we find one that we like we can go ahead and click
26:09
on it and then we can open it up right here and we can preview all of the different pages if we want to see what
26:15
we're getting but you should know that you you can mix and match different templates so if you like one page from
26:21
one of them and another page from another one I'm going to show you how to do that too if this is not the one that
26:27
we want we can open this back up and exit out of here and we can continue our search we can also go up here and search
26:34
for a template I made one called Earth just for this tutorial I designed this
26:40
template myself I think it's beautiful I submitted it so that they can include it for free you can choose something
26:46
different but just know that this tutorial might be slightly different but you should be able to follow along just
26:51
fine so we can click on it and we can check out all of the pages so we can check out the home page right here
26:58
scroll back up and check out the about page and check that out then we can check out
27:03
the services page make sure that we really like it and we can check out the contact page where people can get in
27:10
contact with you they can email you they can call you but of course you can change all of these Pages however you
27:16
want so let's go back to our home page and open this back up and I'm going to show you how to create and put in your
27:22
logo later so we can just press Skip and continue here you can change the colors to any
27:28
colors that you want and it'll change across the entire template I'm also going to show you how to do this later
27:33
so you can just keep it default or choose whatever you want we can also change the font to anything that we want
27:40
but I'm just going to keep it as the default and again we can change that later then we can press continue we can
27:46
scroll down and we can press submit and build my website installing the template can take anywhere from 20 seconds to two
27:53
minutes if you ever want to change or reinstall your template you can just follow the steps and do it again but
27:59
just know that it will rewrite your entire website right now it's installing all the designs all the extra plugins
28:05
you'll need like a contact form adjusting all the colors and making it mobile friendly so bam now it's done you
28:12
have saved so many hours of time we can go ahead and click view your website so
28:18
instead of having to create every web page yourself this gives you an amazing starting point and you can just change
28:23
whatever you want the next thing that we're going to do is change your theme style you'd want to do this so that your
Theme Style
28:29
website has consistent fonts and colors we did this in the previous section but it's important to know how to access
28:35
this for the future it's super easy all we have to do is click on customize up here and then click on global right here
28:43
and then we can click on typography which is the same thing as your fonts and if we scroll down a little bit we
28:49
have the heading font which is like the big text up here and right here and we
28:54
also have the body font which is all of this text here here and even up here so
29:00
if we wanted to change the heading font we could just click on it and there are hundreds and hundreds of fonts to choose from so you could just change it and we
29:07
can see that it has changed we could change it again and we can see that it will change again and we can see that
29:13
any heading will change right here I'm going to go back to Joss because that's what I like and for the body font it's
29:20
pretty much the same thing you just click on it and we can change it here and we can see that it will change and
29:27
it also changes up here but I'm going to go back to Roboto because I think that one's awesome and for your colors all
29:34
you have to do is go back and go to colors and we can change all of the different colors right here these are
29:40
just the general colors on your entire website so we can like go here and change these different colors and you
29:46
just have to play around with these colors to see where it changes if you want to reset the colors back to how
29:51
they originally were you can just press reset right here you can also go on each page and change the colors however you
29:58
want so if you wanted this button to be different then the general colors on the entire website you can change this page
30:04
individually once you have the colors you want we're going to click on publish then we're going to click on the X to
30:09
exit out of here so that's how you change all of your colors and all of your fonts for the entire website the
30:15
next thing that we're going to do is probably the part that you've been waiting for the fun part and that's editing the pages to be exactly how you
30:22
want to edit your website all you have to do is click on edit with Elementor Elementor is a visual page builder
Edit Your Website
30:29
that's going to make editing your website super easy you can change anything on your website by just clicking on whatever you want and then
Edit Text
30:36
on the left side you can just start typing in your own content so we can do that again by clicking on anything that
30:41
we want and then type in something different you'll get different options on the left side depending on what you
30:47
click on the right side so if we click this button it's going to give us different options right here and here we
Edit Button
30:53
can change what the button says and where the button links to so we can just start typing in contact and I'll
31:00
automatically find our contact page and we can just click on it and now this button will link us to the contact page
31:06
so when someone clicks on it they will get sent directly to your contact page if we want to change the background
Edit Background Image
31:12
image it's super easy all we have to do is click on these six dots up here and then we can click on the style button
31:18
right here and we can just click on this image and obviously you can upload your own images or there are a couple
Copyright Free Images
31:25
websites that I really like that help you download copyright free images the first one is pexels.com
31:33
p-e-x-e-l-s.com the second one is pixabay.com
31:41
and the third one is unsplash.com
31:47
u-n-s-p-l-a-s-h.com but let's actually close all of these different tabs up here and we just want to search pixels
31:55
and we can search copyright free images for our website and when we find something that we like we can just click
32:01
on the download button and that will download the image to your computer and then I'm going to drag it to my desktop
32:06
so I can find it easily and then we're all done with this tab so we can just close it right here and now I could go
32:12
back to my website and press select files find that on my desktop and press open that's going to upload it to our
32:18
website and once it's uploaded we can just click on insert media and that's looking really good except we can't see
32:24
the words that well to change the color of the words all we have to do is click on the word and instead of content this
Change Text Color
32:30
time we want to click on style then we can just change the text color here and we can select whatever color we want and
32:37
we can do that really quickly with any of the other texts select it go to style change the text color and now we can see
Change Button Colors
32:45
it we can also do the same thing with the buttons where we can just click on it and then go to style then for
32:51
background type we can click on classic and for color we can change the button color right here if we want to change
32:58
the text color all we have to do is click on text color and we can change that right here also and we can also
Change Button Roundness
33:04
change things like the Border radius which is how rounded the button edges are so if we put in something like 50
33:10
it'll make it rounded like that and we can also change the button hover color so when you hover over this button it
Change Button Hover Color
33:17
should change slightly so that people know that it's a button so we can click on Hover and for background we can do
33:23
classic and for the color we can just make it slightly different than the
33:28
other color and we can see that subtle change right here so that's looking pretty good another thing that we can do
Background Overlay
33:34
is put a background overlay on this image so that we can see the text even better so we can just click on the six
33:41
dots right here and then go to style and go to background overlay and we can
33:46
choose the color right here so we'll choose a dark color and we can make it all the way black or make it a little
33:52
lighter and that's looking pretty good if you don't like any of those changes and you want to undo all of that all you
Undo Changes
33:58
have to do is press Ctrl Z if you're on a PC or command Z if you're on a Mac and
34:03
you can go backwards in time and undo all of those things another cool thing that we can do is we can click hold and
Rearrange Sections
34:11
drag any section and rearrange it so we can just click and hold the six dots
34:16
right here and just drag it up and when we see a blue line we can let it go and now we've moved the section to right
Delete Sections
34:22
here we can also exit out of any section so just press on the X and that will
34:27
delete the section and within all of these sections there's different columns so we can actually click hold and drag
Move Columns
34:34
and rearrange these columns also and you can move this column over here you can also if you wanted to delete any of
Delete Columns
34:40
these columns by just right clicking and pressing delete of course now you can
34:45
also undo all of that again by pressing Ctrl Z if you're on a PC or command Z if
34:51
you're on a Mac the next thing that we're going to learn is going to make your website so super pro and that is
Spacing
34:56
the spacing the spacing of your website is super important and there's three different ways to control it the first
Section Spacing
35:03
way is to click on a section and then under layout and under height we have this minimum height and this is the
35:09
minimum height of this entire section and we can change the values right here so we can make it really big or really
35:15
small now let's scroll down and click on this section right here and the second
Margin & Padding Spacing
35:20
way to control the spacing is this Advanced right here so the margin is the
35:25
spacing on the outside of this box right here so we have 80 pixels of space up
35:31
here and for the bottom we have 80 pixels of space down here if we didn't
35:37
have the space for example if we put in zero it would be too close and it would look crammed and your website wouldn't
35:43
look professional if we made it too much like 190 it just wouldn't look right and
35:48
it would be way too much space so we're just going to keep that as 80. if we scroll down to the talk to a sec section
35:55
and we click on the section and go to Advanced we can see that the margin has nothing so there's no spacing because
36:02
the section above it already has 80 pixels of space so this doesn't need any spacing but we can see that it has
36:09
padding and has padding of 100 and 200 so what's the difference between margin
36:14
spacing and padding spacing margin spacing is a space on the outside padding is space on the inside of the
36:22
section or the inside of this blue box right here so if we change the margin to 200 we see that the spacing changed on
36:30
the outside and it also added more space to the bottom right here but the inside
36:35
spacing didn't change so if we go back to zero we can see that it removed the
36:41
spacing from the top and the bottom but didn't affect inside of it if we wanted
36:46
effect inside of it we would have to change the padding so the padding is the spacing on the inside so we can say zero
36:53
and 0 0 and that would look terrible because there's just not enough space it
36:59
doesn't have enough breathing room we can undo that by pressing Ctrl Z on a
37:04
Mac or command Z on a PC and we can see that 100 and 200 looks much much better
37:09
so that's the difference between margin spacing which is spacing on the outside and padding spacing which is spacing on
37:16
the inside of this blue box right here every single thing that you click on has the ability to have different spacing so
37:23
we can click on this talk to us go to Advanced and we see that it also has a
37:28
margin and a padding so if we wanted to add more space between here we could
37:34
either use margin which would be spacing on the outside or padding it doesn't
37:39
matter which will be spacing on the inside to change the distance between these two texts so in this case it
37:46
really doesn't matter what you choose we're just going to go with padding and we want to change only the padding
37:51
bottom so let's see what happens I'm going to put in 50 and it changed for all of the values and that's because
37:58
this is linked right here so I'm going to go back to zero I'm going to unlink these values and then I'm going to
38:05
change it to 50 and that'll allow us to change only the bottom value and now
38:11
that bottom value has space right here all right but that's ugly so I'm going to undo that and just keep it at zero
Spacer
38:17
the third and final way to control spacing is to actually drag in a spacer
38:23
so what we can do is we can click on this elements button to see all of the things that we can add to our website
38:29
and we have this spacer right here so we can click hold and drag any spacer in
38:34
between anything and we can actually change the spacing right here you can delete the spacer if you want by right
Deleting Elements
38:41
clicking on the spacer and just pressing delete or you can press Ctrl Z or
38:47
command Z to undo and there actually is a spacer up here so we can click on it
38:52
right here and we can change the height of of this and we can make it bigger or smaller just by moving the slider right
38:59
here once you've made some edits to your website you can just click on update to save all of your changes and then you
Update Website
39:05
can press on this I right here in order to preview all of your changes and we have all of our changes right here and
39:12
now we know how to use the spacing and also how to update our website to create a new section all you have to do is
39:18
scroll down and hover over any section and press this plus button or we can scroll all the way down and press this
39:25
plus button right here and now what I like to do is I like to go to another website and get some inspiration so I'm
39:31
just going to open up a new tab and we're going to go to pixar.com I really like their films so we can go to their
39:37
website and just click on short films or anything that you want and we're going to copy this right here so maybe we'll
39:43
copy this up here and we'll take inspiration from this right here and these sections down here how would we
39:51
recreate this and obviously you can do this for any website and use same technique and recreate any website that
39:57
you want so we can see this section right here it's only one column across it's not divided into two different
40:03
columns or four different columns as it is down here so let's go ahead on our website and let's add in one column so
40:10
right here we can add in one column so just click on it and on that Pixar website they had a background so let's
Add a Background
40:16
go ahead and click on these six dots and go to style and here we're going to add in a background so under background type
40:22
just click on classic and we're going to add an image so just press this plus button right here and now we can go to
40:29
one of those websites like pexels.com p-e-x-e-l-s Dot c-o-m and we can search
40:35
for something like nature run I don't know and we can scroll down and we can
40:41
try to find something and let's say we really like this one we don't want to download the Large Size because that
Download Correct Image Size
40:47
will make our website a little bit slow so just click on the image and with this drop down right here we can click on it
40:53
and we see that the original size is way too big and the large size is pretty good so you usually want to go with the
41:01
large or medium sizes we're just going to click on large and press download selected files this will make sure that
41:07
your website is fast because the file size isn't that big alright let's go back to our website and let's just drag
Upload Image
41:15
in that image after we click on upload files we can just take the image from over here or wherever it is maybe it's
41:22
on your desktop and click hold and drag it in once that file has uploaded we can go ahead and press insert media right
41:29
here and now we notice because this section is so small we can't see it so what we need to do is go to Advanced
Add Spacing To Background
41:36
right here and then we're going to unlink the padding so all the values aren't the same and we're going to add 250 pixels of space to the top and 250
41:45
pixels of space to the bottom and that looks alright but we still can't see the whole image right here so what we need
Resize Background
41:51
to do is go to style and then under size we want to make it cover and you usually
41:56
always want to make it cover this allows you to see the entire image without any white space around the edges alright so
42:03
this looks much much better what we also can do is we can position this image and maybe we want to make the image Center
42:08
Center so it just shows up like that but that didn't show up that great so I'm just gonna keep it as the default but I
42:16
just want you to know that you can position it in any way that you want so now that we have the background image just like on the Pixar website we also
Add Text
42:23
need some text so let's go ahead and add in some text we can click on the elements icon right here and we can drag
42:29
in a heading so just click hold and drag to the center box right here now that we have that we can align it to the center
42:36
we can put in some inspirational text or whatever you want and now we can style it differently so let's click on style
42:43
and let's make the text color white just like on the Pixar website and under typography let's make the size a little
42:51
bit bigger maybe we'll make it something like 50 and and let's make it a little bit more bold which is the weight so
42:57
let's go over here and let's make that 600 or semi-bold and let's make the letter spacing have a little bit more
43:04
space so we can go over to letter spacing and go to something like six and
Add Background Overlay
43:09
that looks pretty good for the text except for we can't see it that well one of the cool things that we can do is we
43:15
can click on the entire section and then if we click on style and scroll down a little bit to background overlay we can
43:21
click on that and we can click on just classic and we can add a color let's add black and then we can make it darker or
43:28
lighter let's make the opacity about 0.2 and now we can see that text just great
43:33
if we go to the Pixar website we can see that it looks obviously different but we took a lot of inspiration from it but if
Make Background Fixed Effect
43:40
we scroll right here we can see that he sort of stays in the same area and we
43:45
can also achieve that on our website by going back and clicking on background and under attachment we can click on
43:52
fixed and now the image will sort sort of stay in the same area it's a pretty
43:57
cool effect but personally I like the regular default effect better where it
44:02
just Scrolls normally so we can preview those changes real quick by clicking on this button and I think that's looking
Preview Changes
44:07
pretty cool I really like that let's continue editing our website by clicking this out and let's say that we don't
Rearrange a Section
44:13
like this section right here we want to drag it somewhere we can just click hold and drag this entire section until we
44:20
see this blue line right here and we can let it go and now that section is above this one so that's pretty cool and a
44:27
little fancy but what if just like on the Pixar website we just want to add some regular text like this let's go
Add Regular Text
44:33
ahead and copy this text obviously you can type in your own and let's go back to our website what we want to do is we
44:39
want to create one column because there's only one column of text and we can hover over this section and we can
44:45
add a new section right here so we're going to add a new section we're going to click on the plus we're just going to
44:50
add in one column because it wasn't multiple Columns of text and then we're going to click on the the elements right
44:55
here and we're going to drag in a text editor so this is just regular plain text so click hold and drag until you
45:01
see the blue and let it go now we could paste in all of that text by using the visual and pasting it in the problem is
45:08
it's going to take the formatting from this Pixar website and it's going to paste it into our website which is not
45:14
what we want we just want the plain text so just click on text right here and highlight everything delete it and just
45:21
paste it in there once we do that we can go back to visual and then we can format it any way we want for instance we need
45:27
to put in a paragraph right here and that's looking pretty good all right I think the text was a little lighter on
Change Text Color
45:33
the Pixar website so let's go to style and let's go to text color and let's change that so I'm going to change that
45:39
to something like that right there and now that looks a little bit lighter and I'm going to make the font a little bit
45:44
bigger so I'm going to go over to typography and set the size to be about
45:50
let's say 18 we could just type it in right there and the line height was a
45:55
little different basically the spacing between each of these lines was a little bit more on the Pixar website so we can
46:01
go to typography again go down here and change the line height maybe let's do something like 35. all right so that's
46:08
looking a little bit better but if we open it up like this we can see that our text goes all the way across the screen
46:14
which is kind of hard to read it would be better if it just went here to here like we can see on the Pixar website
46:20
it's a little more narrow between here and here it doesn't go all the way across the screen and there's padding up
46:26
here padding over here and padding over here so we can easily add that by going to our website let's click this out
46:33
again let's click on the entire section and there are multiple ways to do this but the easiest way is just to go to
46:39
this width and let's put it at about 960. we just type that in right there
46:44
and now we can see that it doesn't go all the way across there's a little padding on here and here but not enough
46:50
padding at the top so let's fix that again we can click on the entire set section and then go to Advanced and then
46:57
we're going to unlink all of these padding values because we only want padding on the top right now and I'm
47:02
going to put in 125. and there you go our text is looking much better and it
47:08
sort of has enough space all around and that's why I wanted to show you spacing because spacing is super super important
Create a divider line
47:14
the next thing that we're going to do is go back to the Pixar website and we see this little line right here we can even
47:19
do that super easily so let's go back here let's add another section so let's open this up and hover over this go to
47:27
plus and plus it's just one column so we'll just put in one column and we're going to click on the elements right
47:34
here and we're going to click hold and drag in this divider now this is a bit too big so what we can do is we can go
47:40
over to width and we can shrink that down maybe we'll shrink it down to about 15 and we'll make the alignment in the
47:47
center you can add cool things like stars to the middle of it or different icons or even put in some text in the
47:52
middle of it but we're just going to go to style and we're going to make it a bit lighter so we're going to click on
47:58
the color and we're going to drag in some color that we like all right that looks pretty good to me we can click off
48:03
of that and now we can go back to the Pixar website and see that we have something that looks like this and this
48:09
and this what about these we can easily do that also maybe these are your different projects or something and they
Create Multiple Columns
48:15
go to different pages or you just want to have some sort of gallery to show all of your stuff super easy to do also but
48:21
we have to notice that this is one column this is one column this is one column but this is four columns one two
48:27
three four there's four different places that we can put in things right here so if we go back to our website and we add
48:35
in a new section by hovering over and pressing this plus and then pressing plus again we don't want to select the
48:40
one column we want to select the four columns so now we can drag in widgets to each of these right here the first one
48:46
that we're going to drag in is an image widget so just click on the elements button and go over to image and click
48:53
hold and drag and we can drag in an image right here all right now I'm going to go back to pixels and I'm going to
48:58
search for some images so I'm just going to search for nature and I'm going to give it a filter because I only want
49:05
ones that are vertical so I'm going to go to filters and I'm going to click and I'm going to choose
49:11
vertical now I can see all nature pictures that are vertical and I could just start downloading them so I'm going
49:18
to download four and sometimes I can't choose which image to do so with the magic of editing I'm going to speed this
49:23
process up and choose four pictures and of course I'm going to download them in
49:28
the large or medium size format I'm just going to do medium because that's big enough for the four different columns
49:35
all right I found those four Images let's go back to our website and let's put them in so just click on the image
49:41
click choose image and we're going to upload files and we're going to upload all of those files so just click hold
49:48
and drag and do that to the rest of them all right now that we have all those files we can just insert media for the
49:54
first one and we're going to go to style right here and we're going to make it a certain height so we're just going to do
49:59
height and we're going to make that 365. that's going to stretch out the
50:05
image a little bit so again we want to make it so it says cover and that will make it so it's not distorted now that
50:11
we have all the the settings for this one that we want like cover and the height we can go ahead and right click
50:17
on it and press copy and we can right click and paste into each of these columns so we can just paste paste paste
50:24
now it's easy to change the image for each of these so just click on it go to choose image and we can select a
50:30
different image and insert media do that again select choose image select the image insert media click on it choose
50:37
image and select it in insert media all right to me that's looking pretty good they did on this website right here have
Add Text
50:45
text at the bottom right here that's pretty easy to do all we have to do is click on this elements then click hold
50:51
and drag in a heading under it and we can type in whatever we want right here so maybe we'll just put in Jungle and we
50:58
can Center that and then go to style and go to typography and we can make that a little bit smaller we can make it really
51:04
small or I like it about 20. once we have that done again we can just go ahead and right click copy and and then
51:12
right click and paste right click and paste right click and paste then we can
51:18
type in different names right here with text you can actually double click and just start typing so we can type in
51:23
River Forest and mountain and if we wanted to make multiple of these sections we don't have to recreate
Duplicate Section
51:29
everything we can just right click on this entire section and press duplicate and now we have another one and we can
51:35
just keep on doing that and we can change the spacing in between these to make it look a little bit better but I like just four so I'm just going to exit
51:41
out of there and I want to add a little space down here because it's a little bit too close so I'm going to go to this
51:47
section and then go to Advanced and then I'm going to unlink these values and I'm going to add 125 pixels of space to the
51:54
bottom and to me that looks way better it has more breathing room I can check out what this all looks like by clicking
51:59
on this button and we can see that our website is actually looking pretty cool I really like that and it looks a lot
52:06
different than this Pixar website but we took inspiration from one of the best companies and we really made it our own
52:12
nobody would think that we copied it but we definitely used some of their really cool ideas to make our own website and
52:18
make it look really cool too Alright once we've done that we can go ahead and update our website so it saves all of
Update again
52:24
those changes and we can actually preview our changes by clicking on the I right here and we can just go to our
52:31
main website because it's on our main website and we can scroll down and we can see these changes right here and
52:37
that's looking really cool we've just updated our website we can close these tabs up here because we don't need them
52:43
anymore and we can exit out of this another thing that you should know about is none of your work has ever lost we
Revisions
52:49
can go down here to the history and we can click on it and we can see all of the actions we've made and all of the
52:56
revisions we've made the actions are like everything that you just did so I can undo that margin I can undo editing
53:04
this title I can go way up here and undo all of these things like I didn't do any
53:09
of that or I didn't do any of of that and I could go all the way basically to the beginning and have my website just
53:16
as I did at the start or I can travel forward in time and re-put in all of
53:21
those changes and get them all back so the actions are the things that you did today the revisions are things that
53:27
you've done not only today but the bigger changes maybe you want to go and see what your website looked like two
53:33
weeks ago so we can click on that and we can see that this is what it looked like two weeks ago or we can see what it
53:39
looked like just right now and we can apply those changes anytime you want so don't be afraid to mess around with your
53:45
website because you can always go to this history right here and you can move backwards and forward in time and see
53:50
all those changes that you just made so I'm just going to click on apply because I like the changes that I just made and
53:55
our website is looking pretty awesome except for one thing what does our website look like on mobile devices like
Mobile Friendly
54:02
our phones we can go down here to the responsive mode and we can click up here on our mobile device and now we can look
54:09
at our website alright that looks pretty good good except for it's a little bit crammed right there like I would want it
54:15
to have a little bit more breathing room this looks like it's too big of a word kind of if we scroll down that looks good and it looks good because all of
54:22
the templates are already mobile optimized but if we go down here this adventure awaits the adventure is too
54:28
big and that doesn't look right and maybe I want to see the lady running or the dog so that's not right and if we
54:35
scroll down we can see that these images look pretty good except for this one's not wide enough so maybe I'll make them
54:40
all 100 width and that looks pretty good so we have a couple of changes that we
54:46
need to make but only for the mobile website because the desktop website looks fine so what we can do is we can
Resize Text For Mobile Device
54:51
click on any section and then we can go to style and then we can go to typography and we can see that we have a
54:57
size here but we not only have a size here we have this mobile icon and if you don't see the mobile icon then that
55:03
means it changes across the desktop tablet and mobile versions but if you see the mobile icon then it only changes
55:10
for the mobile light so this isn't going to affect how the desktop site looks so
55:15
let's put this a little bit smaller let's put it at 40 just for the mobile website but on the regular website it's
55:21
going to be 50. so we can actually click on this and we can see desktop version is actually 80. and we can go here we
55:27
can see tablet version is 60 and mobile version is 40. so that makes sense to me
55:35
it needs to be smaller because you're on a smaller screen now let's scroll down and see what other fixes that we can do
55:40
this isn't looking right to me so let's go ahead and click on this and let's go to typography and for the mobile version
55:47
right here let's again let's make this 40. that looks right to me this image is not position right so let's click on the
Change Mobile Background Position
55:53
entire section and we have position right here and we can position it Center Center and maybe we see the dog or we
56:00
can position it center right and we can see the lady running which looks great to me all right let's keep on going
56:07
let's scroll down a little bit we can click on each of these right here and we can make the width 100 because it's not
Mobile Background Width
56:13
going all the way across so let's make the width 100 and click Style with 100
56:21
Style with a hundred and to me that's looking much much better they're all the
56:26
same width which is a hundred percent so that's looking awesome and that's only for the mobile versions all right now we
56:34
can click on update and go back to our desktop or tablet version and we can see
56:40
that none of those changes affected the desktop version the text is still big but now our mobile version is perfectly
56:48
optimized for everyone's tablets and everyone's phones now let's go to our home page and learn something that's
Edit About Page
56:54
going to save us a ton of time we can edit the about section by just clicking on it and then we can click on edit with
57:00
Elementor and of course we can change or create anything just like we did on our home page but most of the time we don't
Blocks
57:08
actually have to do any of that work because we can use something called blocks let's say we wanted to add
57:13
testimonials to our web page right here we can just scroll down and click on this s right here and then we can click
57:20
on blocks and we can mix and match any of these and make millions and millions of different variations of websites so
57:27
if we wanted a testimonial we can just click on it and we can import this block right here
57:32
once it's done importing we can just click hold and drag it anywhere we want maybe we want it right under here and we
57:39
can change this however we want maybe we want this to say testimonials and of course you can click on any of this and
57:46
change the content and put all of your testimonials right here let's say we wanted another section we wanted an FAQ
57:52
we could just press this plus button right here click on the S go to blocks
57:58
and then we can actually filter it so we can go here and go to FAQ right here and
58:04
now we have all of these different FAQ blocks to choose from we can just choose any one we want and we can press import
58:10
block then we can find it on our website and just click hold and drag it anywhere
58:16
we want and we can exit out of this right here and now we have this really cool FAQ we can of course change all the
58:23
content right here by clicking on it and we can update that then we can preview it by clicking on this I right here and
58:29
we can just remove all this preview stuff right here because it's actually updated and we can view our website and
58:36
we see the testimonials right there and we see the FAQ right here of course you can add color or change it and make it
58:42
however you want it's also already mobile friendly so we don't have to change any of those settings it should
58:48
work perfectly right out of the box and just using that technique right there will save you so much time and you can
58:54
actually make millions and millions of different types of websites by just combining different blocks together and
58:59
I think it's going to save you so much time so we can close this tab up here and we can go to the services page and
Import Entire Page
59:05
now I'm going to show you something that's going to save you even more time so we can just click on edit with Elementor like we always do and of
59:12
course you can edit anything just like on the home page or any other page and if we scroll all the way down we can
59:18
again click this s right here and instead of importing blocks we're going to import pages so out of all of the
59:25
different templates you can actually import any page from any template into your website and mix and match any
59:31
templates together this is super cool what I like to do is Click right here and go to free and we can choose any
59:38
template and any page on that template to import into our website let's just click on this Lotus Spa right here and
59:45
maybe we want to import this Services page right here we like this page more than our services page so we can just
59:51
click on it and we can click import template all right now this template is imported we don't need any of this other
59:58
stuff because we're going to use this template instead of the original one so we can just X out of all of these
1:00:05
different sections to delete them and now we have this website right here
1:00:10
but maybe we don't want all the sections let's go down let's delete this section right here
1:00:16
and let's go up let's delete this section and this section and maybe
1:00:21
because this is our services page we can just put in Services right here and it looks a little bit too cram to me so
1:00:28
we're going to click on the entire section and go to Advanced to add more spacing and let's add 150 pixels of
1:00:35
space to the top all right we can update that and we can preview our website by
1:00:40
clicking on the I and we can exit out of here and now we see we have our new Services page and it looks much much
1:00:47
different from our original template and of course you can change all this content you can swap out all the images
1:00:54
just like we learned on our home page now that we've edited the about and services page let's edit the contact
Contact Page
1:01:00
page so just click on contact and then again we can click on edit with Elementor so you can change any of this
1:01:07
content however you want just like the other pages and over here on email we can just click on it and you'd obviously
1:01:13
add in your email instead of this email mail and you can add in your phone number or just delete this section in
1:01:19
your address or just delete this section and of course you can click on any of these social media icons and add in your
1:01:26
own social media links right here so that's pretty much the same as everything else we can also add in a map
Add a Map
1:01:32
right here let's do that real quick let's click on this plus section and let's have a map go all the way across
1:01:39
so we'll add in one column and then we'll just click on the elements right here and we'll find a map widget so just
1:01:46
click hold and drag the Google Maps and we can change the location to an exact address or just a city let's go with
1:01:54
Malibu California and you can change in how much it zooms in the height but I like how it is right here I think I want
1:02:00
the map to go all the way across the website right now so if we open this up we can see that there's space here and
1:02:06
space here so let's make it go all the way across by clicking on the entire section right here and then for Content
1:02:12
let's go with full width that will make it go mostly cross but there's still a
1:02:17
little bit of space right here we can see so we can open this back up and then we can click on this column right here
1:02:24
and then we can go to Advanced and it actually has some default padding so we're going to make the padding zero and
1:02:30
that's going to make it go all the way across now we can see that it looks really really cool and with this map you
1:02:36
can just double click on it to zoom you can drag around you can even do satellite and I think if you're going to
1:02:41
add a map then that's pretty cool but what about up here we have this contact
Editing Contact Form
1:02:46
form how do we edit this we can open this back up and if we click on this contact form right here and we click on
1:02:53
edit this selected form right here this is how we edit this form so it's a little bit different than editing with
1:02:59
Elementor and that's because this form is a different plugin this form is WP forms and it integrates within Elementor
1:03:07
the visual page builder but it's a different plugin so to edit it's pretty easy all we have to do is just hover
1:03:13
over it and let's say we don't want this phone number we don't want want to ask people for their phone number so we can
1:03:18
just click on delete and press OK and now the phone number is gone if we want to add another field we can add all of
1:03:25
these different fields to it let's add in a multiple choice so let's just click hold and drag a multiple choice right
1:03:30
there and maybe we don't like it positioned here so we can just click hold and drag it all the way to the bottom and then we can click on it to
1:03:37
change it and maybe we'll put in something like how did you hear about us so it might be good to get some
1:03:42
marketing data and maybe we'll put in Google social media or from a friend
1:03:47
alright now that we have that or any of the other fields that you want to add we want to make sure it's going to the
1:03:53
right email so we can click on settings and we can click on notifications and if
1:03:59
we scroll down here this admin email is the email address that you're using for
1:04:04
your WordPress account if you want to go somewhere else you put in another email address right here so this send to email
1:04:11
address is where the information is going to get sent to so when someone fills it out it's going to send to
1:04:16
whatever email address you put in right here email subject line you can change that if you want that's just the subject
1:04:22
line of the email from name this is just your website name that it's going to say it's from and then from email you could
1:04:29
just put an admin at yourwebsite.com and this is because we're sending it from your website and then reply to email
1:04:36
address when someone's filling out the form they put in their email address and so when it goes into your email inbox
1:04:42
it's going to reply to their email address I'll show you that in just a second and then this all Fields this
1:04:48
just means that all of the fields that you put in it's going to send you an email alright so let's get an example
1:04:53
let's click on Save and let's exit out of here and now it's going to update with our options how did you hear about
1:05:00
us and it's going to delete that phone number field right there so let's just update this and let's preview it by
1:05:07
clicking on the I and let's exit out of here and we can just delete all of that preview stuff right there we don't need
1:05:13
it and we can see that we have our form right here so let's enter in some information let's say my name is Tyler
1:05:19
because it is and let's say I'm at hello tyler.com and my message is hey there
1:05:27
maybe they heard about you from a friend and we can just click on send now so that's gonna get sent and now we can
1:05:33
open up our email by just typing it in there and we can see our new email right here we can just click on it and we can
1:05:40
see who it's from it's from admin at our website.com we can see the visitors email right here and the message and how
1:05:47
did you hear about us from a friend and when we click reply it's going to reply to their email address that they filled
1:05:53
out and then you can email them back and answer whatever questions they have so that's how your form works on your
1:05:59
website that's how you edit it so that people can get in contact with you so we know we can edit any of these pages but
Adding A New Page
1:06:06
what about adding a new page to add a new page all we have to do is go to the dashboard by clicking on our website
1:06:12
name and then click on pages and we can see all of our pages right here and we can just press add new once we do that
1:06:18
we can exit out of this and we can add a title to our page I'm just going to name this projects of course you can choose
1:06:24
any name that you want you can make any page that you want and then we can click on edit with Elementor because Elementor
1:06:30
is our visual page builder so just click on that and now we've created a new page but it's blank we could of course import
Copy a Section
1:06:37
any page or any block by clicking on this but there's something else that we can do if we open up a new tab and we go
1:06:44
to our website and we click on edit with Elementor we can actually copy any section by just right clicking right
1:06:50
here and then press copy and then we can go back to our page that we're creating and we can right click and we can press
1:06:56
paste this is going to save us so much time but what if we want to copy this entire home page it would take a bunch
Create a Template
1:07:03
of time to copy each section we can also make this page a template and that way it'll copy the entire page you can also
1:07:10
save any template to your website and then import it to any other WordPress website so to save a 10 template we can
1:07:16
just click on this Arrow next to the update and we can press save template and we're going to call this template
1:07:22
home because it's our home page and we're going to press save now we have this template right here so we can exit
1:07:28
out of this and we can actually exit out of this page right here now let's delete this section right here and let's go to
1:07:34
this folder right here and go to my templates and now we can see this new home template and we can press insert
1:07:41
and then we're going to press apply and that's going to import that page and now we have the entire page on our website
1:07:47
so we can just check that out this is the entire home page and this is going to save you so much time and keep it
1:07:53
consistent across your entire website maybe we don't want all of this though so we can exit out of this and this and
1:08:00
this and this and maybe this too and maybe because this is our projects page we can put up here our projects and
1:08:08
let's scroll down and maybe we have all of our projects right here so we can just go ahead and duplicate this and
1:08:14
we'll have all of our projects here we can even make this a link to different pages to show our individual projects
1:08:20
like that so that when people click on any of these right here they can go and get more detail about that specific
1:08:25
project all right that looks really cool and great except for we have a little issue this has a white background this
Transparent Header
1:08:33
is not a transparent header like our other headers so it doesn't look the same if we click on publish and we
1:08:39
preview this we can see this background right here but if we go to our home page we can see that it's actually
1:08:45
transparent right here to make it transparent is pretty easy let's exit out of here and let's preview this one
1:08:51
more time and then we can click on edit page up here this is the same thing as going to the dashboard and clicking on
1:08:57
pages and what we can do is we can click on this a right here for Astra and go down to advanced settings and where it
1:09:04
says transparent header we want to enable it once we do that we can exit out of here and we can press update and
1:09:10
now we can exit out of here and click on preview to preview our projects page and we can preview do it in a new tab we can
1:09:17
see that our projects page now has that transparent header just like the home page but we have a little problem let's
Add Page To Menu
1:09:24
close this right here because we don't need it and let's go to our home page and I see the home about services and
1:09:29
contact but they don't see the projects page so how do they look at our projects when they can't find the projects page
1:09:36
the next thing that we're going to do is we're going to add a new page to this menu up here and to do that is super
1:09:41
simple all we have to do is go to the dashboard by clicking on our website name and then going to appearance and
1:09:48
then menus alright let's open up a new tab and let's go to our website again just so I can show you it says home
1:09:55
about services and contact and over here it says home about services and contact
1:10:01
so this menu right here corresponds with this menu up here to change it is really
1:10:07
easy we can just go back here and we can see pages right here these are all of our Pages we can view all or see the
1:10:14
most recent and we can click on our our projects page and we can add it to the menu and what we can do is we can click
1:10:20
hold and drag this projects wherever we want I'm going to drag it right under services so now it'll read home about
1:10:27
Services projects and contact and we can press save menu once we do that we can go ahead and refresh our page right here
1:10:34
and we can see now we have this projects right here so it's home about Services projects and contact and our visitors
1:10:41
can click on it and they can visit our projects page we can also make a sub menu so we can click back to our menus
Sub Menu
1:10:48
and we can scroll down and instead of this projects being its own menu link we
1:10:53
can actually put it under about and this would just be the same link but if we click hold and drag and indent it a
1:11:00
little bit it'll be a sub menu under the about so maybe you want to learn about us and then you want to learn about our
1:11:06
projects and then we can press save menu right here and once that's saved we can go back to our website and click on our
1:11:13
logo to go home and now we can see this about has a down arrow indicating a submenu and our projects is under it so
1:11:20
basically if you have a whole bunch of links and they won't all fit then you can start categorizing them under these
1:11:27
different main links say that we don't want our projects page to be on the menu anymore we want to delete it we can go
Delete Page From Menu
1:11:34
here and press this and we can press remove and that will remove it from our
1:11:39
website we can press save menu and now we can go back and we can go to our home
1:11:44
page and we can see that the projects doesn't exist anywhere on our menu anymore and now we can exit out of this
1:11:50
right here if we wanted our projects page to be completely deleted off of our website you'd go to pages and you delete
1:11:57
it from there just like we learned before now let's go back to the front end of our website by clicking on our
1:12:02
website name and we can see this logo right here but what if we want to put in our own logo that's super easy all we
Create a Simple Text Logo
1:12:09
have to do is click on customize and the first logo that we're going to create is going to be super simple just your text
1:12:15
right here your business name right here but then I'll show you how to insert your own logo to do that we can click on
1:12:20
header Builder and we see site title and logo and to remove this logo just click on remove right here and remove right
1:12:28
here then we can scroll down and we can press display site title that's going to display our site title so whatever you
1:12:34
put in here it's going to display right here we can't really see it right now because this is white so to change that
1:12:40
and make your super simple logo just scroll up here and customize transparent header and then press design and where
1:12:47
it says site title right here we can make that any color that we want so we can make that a green or a blue or a
1:12:53
black let's just make it black for now and this is the hover so when you hover over it it'll turn green and it would do
1:13:00
that if we're on the real website and that looks pretty good that might be good enough for you a lot of websites
1:13:05
just have that but maybe you want something a little bit better or maybe you have your own logo so let's go back
Upload Your Logo
1:13:11
and again click on site title and Logo you can upload your logo right here or I
1:13:16
can show you how to make one right now so to make a logo we're going to open up a new website and we're going to go to
Create Your Own Logo
1:13:22
logomaker.com that's l-o-g-o-m-a-k-r without the e.com and
1:13:28
press enter once we do that we can press start my design and we're going to create a new design and we can search
1:13:34
for an icon something like Earth maybe or whatever your business does and we
1:13:39
can scroll down and try to find the right icon for us and they have millions and millions and millions of different
1:13:45
icons but I think I like this one right here and I can click hold and drag this
1:13:50
around maybe I'll put it over here maybe I can resize it a little bit make it a little bit smaller then I'll add some
1:13:56
text maybe and I'll go with something like simple and modern text and I'll do
1:14:03
something like Josephine Sans I like that one then I can type in whatever
1:14:09
your business name is right here so we can just type in something like Earth or this would be your business name and you
1:14:15
can make it a little bit smaller here and then you can make it bigger here by resizing it maybe we'll do something
1:14:20
like that and then we can just click off of it and click hold and drag it around maybe I'll drag it right here and maybe
1:14:27
I'll make this a little bit bigger just a tiny bit and put this over here you
1:14:33
can also use your arrows to make it exactly where you want it so we can just use our arrow keys and put it about
1:14:40
there all right that looks pretty good to me I don't like the colors though so I'll highlight both of them and maybe
1:14:45
I'll go with uh let's see something like a greenish blue and drag it down here
1:14:52
maybe something like that alright I'm really liking that I think that's pretty cool and then we can click on Save right
1:14:59
here and then what we would usually do is click on download low resolution PNG files but there is a trick instead of
1:15:07
getting the low resolution files we can actually just click hold and drag this to our desktop and this is under the
1:15:14
examples where it shows you all the examples of everything that you can use your logo on which is pretty cool so
1:15:21
just click hold and drag this to our desktop and that will actually give us the high resolution file right there so
1:15:28
that's a little secret to get the really nice high resolution files but if you want the super resolution files and you
1:15:34
want to support logo maker because I think they're pretty cool you can press download your files right here and you
1:15:39
can purchase a super resolution files which makes all your logos based off of math so they look perfect in crisp so no
1:15:47
matter how big they are even if they're blown up on like an entire billboard alright so let's exit out of there and
1:15:52
let's get that logo that we dragged to our desktop and we can exit out of this right here and we can go to our website
1:15:59
and now where it says select logo we can upload that logo that we drag to our desktop so we can press upload files and
1:16:07
select files and it should be called download.png and then we can press open and we can press select and we can skip
1:16:14
cropping because we didn't want to crop it it's already cropped and then what we're going to do is we're going to go down and we're also going to do the
1:16:20
retina logo by pressing select image and we're going to click on it and we're going to choose image the retina logo is
1:16:27
for retina displays so this one would show up on regular displays and this one would show up on super high resolution
1:16:33
displays then what we can do is we can go down and we can click off display site title and now we can see our logo
1:16:40
but it's super small so we can go here and we can put in 155 and now that to me
1:16:45
looks super good but if we scroll down we can see something that's called site icon and our site icon right now is this
Create Site Icon
1:16:53
W logo maker site icon is a whole bunch of shapes right here and Apple's site
1:16:58
icon is this apple right here so we want our site icon just to be an icon that
1:17:05
helps identify our site when we have these tabs open like this so we can go back to logo maker and we can create our
1:17:12
site Icon by just going here and we can delete the this and we can go here and
1:17:18
we can make this icon bigger and then we can press save right here and we can use the same trick by click hold and
1:17:24
dragging it to our desktop but of course do support logo maker if you're actually going to use this for your logo and then
1:17:31
we can exit out of here and we can go to our website again and we can click on site icon and then we can select our
1:17:38
site icon and we can upload files and select files and we see our site icon on
1:17:43
our desktop that we dragged and we can press open and we can press select we don't want to crop it too close because
1:17:49
it won't look that great as an app icon so we want to give it a little bit of
1:17:55
space but not too much because we want it to be as big as possible and then we can press crop image once we do that we
1:18:01
can go ahead and click on publish and we can exit out of there and now we can see
1:18:06
not only our logo but we can also see our site icon up here and that's going to help identify our website so I think
1:18:13
that's pretty cool we can exit out of these tabs right here and the next thing that we're going to learn is how to
Header
1:18:19
change this header up here we already learned how to change this logo up here and how to add a page but how do we
1:18:24
change the colors of these links and maybe add a button or anything else up here all we have to do is click on
1:18:30
customize and then click header Builder and now we see the site title and logo that corresponds with this right here
Rearranging Header
1:18:37
and we see this primary menu that corresponds with this right here so we could do things like click hold and drag
1:18:44
this over here or put this primary menu over here we can also move this primary
1:18:49
menu above or below but I think I liked it how it was that's usually what people
1:18:55
do they have the logo on the left side and the menu on the right side so we're just going to keep it like that let's
Header Button
1:19:00
say we wanted to add something maybe we wanted to add a button so we can just press this plus right here and we can
1:19:06
add things like search or social media but we're going to add a button so just click on button and now we can see that
1:19:12
there's nothing in the button so we can click on the button and we can say the text is our projects and we can link it
1:19:19
to our projects page which was forward slash projects so now this link will go to ourwebsite.com forward slash projects
1:19:27
we don't need to put in the whole our website.com we just need to put in forward slash projects and now we can
1:19:32
click on it and we can see that it will go to our projects page we can also change the design of our button by
1:19:38
clicking on design and we can go to background color and we can change the background color right here we can
1:19:44
change it to whatever color that we want but I'm just going to revert back we can also change the text color so maybe we
1:19:50
don't want it to be white we want it to be black or we can undo that right there we can also make a border if we put in a
1:19:56
border we need to put in a border with that will give it a border around the button right here and we can also change
1:20:01
the font right here something kind of cool that we can do down here is with the Border radius we can make this
1:20:07
rounded so we can just increase it right here and it will make it round over there and I think that looks pretty good
1:20:13
that's pretty cool but what if we want to change the color of these links up here that's pretty easy we can scroll up
Change Menu Color
1:20:20
and go back and we can go down and click on transparent header right here then we can click on design and then Under menu
1:20:27
color right here we can make the text link any color that we want so we could make this any color that we want right
1:20:33
here maybe we'll make it a white or something but we can't see that so we can make it any other color that we want
1:20:38
and then this color is the hover color so we can click on it and we can make it any color that we want also so now we
1:20:45
can see when we hover over it it turns that color now obviously that doesn't look that great so we're just going to
1:20:51
revert back but this is the area to control all of the colors right here we can also change these options for your
Mobile Header
1:20:57
tablet and your phones if we click down here we can click on the mobile icon and
1:21:02
maybe let's say our logo is a bit too small so we click on site title and logo and actually we can't really see it
1:21:08
right here so let's hide this control and hide this Builder and now let's show that control again and now now we can
1:21:16
scroll down and we can change this logo with because it has this mobile icon right here it's only going to change it
1:21:23
for the mobile website so we can put in something like 130 and make it bigger and that looks much better for this menu
Mobile Menu Design
1:21:30
icon up here we can also change that let's hide this control again and show this Builder and we can do that by
1:21:36
pressing this toggle button right here and then we can change this however we want so let's show this real quick and
1:21:43
we can change any of these options right here we can make it outlined and we can go to design right here and we can
1:21:49
change all the colors and make it any color that we want so that's super cool we can also add a button to this menu
Mobile Menu Button
1:21:57
right here so if we wanted a button like our projects button we could do that so let me hide this and show this right
1:22:04
here and you do that by clicking on this primary menu right here and then what we can do is we can press this plus button
1:22:09
right here and we can add a button so we can just press on the button and now when we press on that menu I know you
1:22:16
can barely see it we have this R projects button right here so we can click on the button and of course change
1:22:22
any of the design anything that we want we can change any of the colors or anything like that just like we learned
1:22:27
before you can also change the margin or how much spacing is on the left side or right side and we can press unlink and
1:22:34
we can put 60 pixels of space on the left side so that it looks more centered
1:22:39
or maybe we don't like that at all and we can delete it and if someone's using a tablet again we can change the size of
Tablet Logo Size
1:22:46
our logo by clicking on site title and logo and then clicking on the tablet version and we can scroll down that
1:22:53
looks a little bit too small for me and we can change it to something bigger like 150 alright so that looks perfect
1:22:59
on our tablet now so let's go back to our desktop and now we can learn how to change the footer so that was the header
Footer
1:23:05
we learned how to change the colors and add a button and how to make it mobile optimized if we scroll down we can see
1:23:12
the footer how do we change that it's pretty much to the same and don't worry this just looks smushed because we have
1:23:18
all these controls right here out it won't look like that on your real website so to change this footer right
1:23:24
here we can scroll all the way up and go back and then go back again and then we can go to footer Builder and of course
1:23:30
we could move anything around just like we did on the header we can move this here this here we can switch anything
1:23:36
that we want I'm just going to keep it as it was normally because that's how I like it and the first thing that we can
1:23:42
edit right here is you're going to want to put in your copyright information so you're going to want to put in maybe the
1:23:47
name of your website right here and instead of this year right here you don't want to have to change it every
1:23:53
single year so what you can do is you can do left bracket current underscore year and then a right bracket and that
1:24:00
will put in the current year and this is what's called a short code and this will put in the current year so that you
1:24:07
don't have to change it every single year we can also replace this logo if we want right here we can just click on it
1:24:13
and we can just click on this over here and we can press delete right here on the X and then we can add media and
1:24:20
maybe we want to add our icon I think that'll look pretty cool and we can insert this into post once it's inserted
1:24:26
it's way too big so what we want to do is we want to click on it and press the little pencil icon to edit it and for
1:24:33
size maybe we'll do something like custom size and something like 40 by 40.
1:24:39
I think that'll be good and we want it to link to our home page so this is a little trick but all you have to do to
1:24:45
link to your home page from any page is make a forward slash once we do that we can click on update and that will get
1:24:52
much smaller and we can publish that and we can exit out of there and now we have our projects page right here we can
1:24:59
click on it and we can click on it from any page that we want we can scroll all the way down and we see this little icon
1:25:05
right here and that'll take us back to our home page there is one last optional step that you can do and that's logging
Logout
1:25:12
out so that you can visit your home page just like a visitor would view it and we can do that by hovering over our name up
1:25:18
here and pressing log out once we do that we can delete all of this to go to
1:25:23
our main website and we can see our website just like a visitor would see it so congrats we learned so much you guys
Congratulations!
1:25:30
should be super proud please remember to comment rate and subscribe I'm Tyler Moore thank you so much
543,131 views 2 Jan 2023
Easily create your website in 1 hour. Step by step with no step skipped. We will use WordPress, the most popular platform in the entire world to create your website. Learn how to get your website name, install WordPress, choose your design and customize it in any way you want. Learn other tips and tricks like how to make a logo and how to mix and match templates to make amazing designs and save you time. You have complete control over your website. Your website is the most professional and cost effective way to advertise and spread your message. It is all step by step so you have a complete understanding of the process from start to finish. https://tyler.com/website-checklist.zip (download the checklist to keep track of your progress). Every question is answered in the comments below. Timestamps: Setup 00:00:00 Why WordPress? 00:00:13 Overview 00:03:57 Website Name & Hosting Explanation 00:06:02 Get Your Website Name & Hosting 00:12:55 Install WordPress 00:15:59 Login Organize 00:16:40 Dashboard Explained 00:17:19 Delete Plugins 00:18:57 Delete Pages & Posts 00:20:09 Backup Your Website 00:22:02 Site Title & Tagline
HELLO AND WELCOME TO THE
5 STAR AI.IOT TOOLS FOR YOUR BUSINESS
ARE NEW WEBSITE IS ABOUT 5 STAR AI and io’t TOOLS on the net.
We prevaid you the best
Artificial Intelligence tools and services that can be used to create and improve BUSINESS websites AND CHANNELS .
This site is includes tools for creating interactive visuals, animations, and videos.
as well as tools for SEO, marketing, and web development.
It also includes tools for creating and editing text, images, and audio. The website is intended to provide users with a comprehensive list of AI-based tools to help them create and improve their business.
https://studio.d-id.com/share?id=078f9242d5185a9494e00852e89e17f7&utm_source=copy
This website is a collection of Artificial Intelligence (AI) tools and services that can be used to create and improve websites. It includes tools for creating interactive visuals, animations, and videos, as well as tools for SEO, marketing, and web development. It also includes tools for creating and editing text, images, and audio. The website is intended to provide users with a comprehensive list of AI-based tools to help them create and improve their websites.
אתר זה הוא אוסף של כלים ושירותים של בינה מלאכותית (AI) שניתן להשתמש בהם כדי ליצור ולשפר אתרים. הוא כולל כלים ליצירת ויזואליה אינטראקטיבית, אנימציות וסרטונים, כמו גם כלים לקידום אתרים, שיווק ופיתוח אתרים. הוא כולל גם כלים ליצירה ועריכה של טקסט, תמונות ואודיו. האתר נועד לספק למשתמשים רשימה מקיפה של כלים מבוססי AI שיסייעו להם ליצור ולשפר את אתרי האינטרנט שלהם.
Hello and welcome to our new site that shares with you the most powerful web platforms and tools available on the web today
All platforms, websites and tools have artificial intelligence AI and have a 5-star rating
All platforms, websites and tools are free and Pro paid
The platforms, websites and the tool's are the best for growing your business in 2022/3
שלום וברוכים הבאים לאתר החדש שלנו המשתף אתכם בפלטפורמות האינטרנט והכלים החזקים ביותר הקיימים היום ברשת. כל הפלטפורמות, האתרים והכלים הם בעלי בינה מלאכותית AI ובעלי דירוג של 5 כוכבים. כל הפלטפורמות, האתרים והכלים חינמיים ומקצועיים בתשלום הפלטפורמות, האתרים והכלים באתר זה הם הטובים ביותר והמועילים ביותר להצמחת ולהגדלת העסק שלך ב-2022/3
A guide to improving your existing business application of artificial intelligence
מדריך לשיפור היישום העסקי הקיים שלך בינה מלאכותית
What is Artificial Intelligence and how does it work? What are the 3 types of AI? The 3 types of AI are: General AI: AI that can perform all of the intellectual tasks a human can. Currently, no form of AI can think abstractly or develop creative ideas in the same ways as humans. Narrow AI: Narrow AI commonly includes visual recognition and natural language processing (NLP) technologies. It is a powerful tool for completing routine jobs based on common knowledge, such as playing music on demand via a voice-enabled device. Broad AI: Broad AI typically relies on exclusive data sets associated with the business in question. It is generally considered the most useful AI category for a business. Business leaders will integrate a broad AI solution with a specific business process where enterprise-specific knowledge is required. How can artificial intelligence be used in business? AI is providing new ways for humans to engage with machines, transitioning personnel from pure digital experiences to human-like natural interactions. This is called cognitive engagement. AI is augmenting and improving how humans absorb and process information, often in real-time. This is called cognitive insights and knowledge management. Beyond process automation, AI is facilitating knowledge-intensive business decisions, mimicking complex human intelligence. This is called cognitive automation. What are the different artificial intelligence technologies in business? Machine learning, deep learning, robotics, computer vision, cognitive computing, artificial general intelligence, natural language processing, and knowledge reasoning are some of the most common business applications of AI. What is the difference between artificial intelligence and machine learning and deep learning? Artificial intelligence (AI) applies advanced analysis and logic-based techniques, including machine learning, to interpret events, support and automate decisions, and take actions. Machine learning is an application of artificial intelligence (AI) that provides systems the ability to automatically learn and improve from experience without being explicitly programmed. Deep learning is a subset of machine learning in artificial intelligence (AI) that has networks capable of learning unsupervised from data that is unstructured or unlabeled. What are the current and future capabilities of artificial intelligence? Current capabilities of AI include examples such as personal assistants (Siri, Alexa, Google Home), smart cars (Tesla), behavioral adaptation to improve the emotional intelligence of customer support representatives, using machine learning and predictive algorithms to improve the customer’s experience, transactional AI like that of Amazon, personalized content recommendations (Netflix), voice control, and learning thermostats. Future capabilities of AI might probably include fully autonomous cars, precision farming, future air traffic controllers, future classrooms with ambient informatics, urban systems, smart cities and so on. To know more about the scope of artificial intelligence in your business, please connect with our expert.
מהי בינה מלאכותית וכיצד היא פועלת? מהם 3 סוגי הבינה המלאכותית? שלושת סוגי הבינה המלאכותית הם: בינה מלאכותית כללית: בינה מלאכותית שיכולה לבצע את כל המשימות האינטלקטואליות שאדם יכול. נכון לעכשיו, שום צורה של AI לא יכולה לחשוב בצורה מופשטת או לפתח רעיונות יצירתיים באותן דרכים כמו בני אדם. בינה מלאכותית צרה: בינה מלאכותית צרה כוללת בדרך כלל טכנולוגיות זיהוי חזותי ועיבוד שפה טבעית (NLP). זהו כלי רב עוצמה להשלמת עבודות שגרתיות המבוססות על ידע נפוץ, כגון השמעת מוזיקה לפי דרישה באמצעות מכשיר התומך בקול. בינה מלאכותית רחבה: בינה מלאכותית רחבה מסתמכת בדרך כלל על מערכי נתונים בלעדיים הקשורים לעסק המדובר. זה נחשב בדרך כלל לקטגוריית הבינה המלאכותית השימושית ביותר עבור עסק. מנהיגים עסקיים ישלבו פתרון AI רחב עם תהליך עסקי ספציפי שבו נדרש ידע ספציפי לארגון. כיצד ניתן להשתמש בבינה מלאכותית בעסק? AI מספקת דרכים חדשות לבני אדם לעסוק במכונות, ומעבירה את הצוות מחוויות דיגיטליות טהורות לאינטראקציות טבעיות דמויות אדם. זה נקרא מעורבות קוגניטיבית. בינה מלאכותית מגדילה ומשפרת את האופן שבו בני אדם קולטים ומעבדים מידע, לעתים קרובות בזמן אמת. זה נקרא תובנות קוגניטיביות וניהול ידע. מעבר לאוטומציה של תהליכים, AI מאפשר החלטות עסקיות עתירות ידע, תוך חיקוי אינטליגנציה אנושית מורכבת. זה נקרא אוטומציה קוגניטיבית. מהן טכנולוגיות הבינה המלאכותית השונות בעסק? למידת מכונה, למידה עמוקה, רובוטיקה, ראייה ממוחשבת, מחשוב קוגניטיבי, בינה כללית מלאכותית, עיבוד שפה טבעית וחשיבת ידע הם חלק מהיישומים העסקיים הנפוצים ביותר של AI. מה ההבדל בין בינה מלאכותית ולמידת מכונה ולמידה עמוקה? בינה מלאכותית (AI) מיישמת ניתוח מתקדמות וטכניקות מבוססות לוגיקה, כולל למידת מכונה, כדי לפרש אירועים, לתמוך ולהפוך החלטות לאוטומטיות ולנקוט פעולות. למידת מכונה היא יישום של בינה מלאכותית (AI) המספק למערכות את היכולת ללמוד ולהשתפר מניסיון באופן אוטומטי מבלי להיות מתוכנתים במפורש. למידה עמוקה היא תת-קבוצה של למידת מכונה בבינה מלאכותית (AI) שיש לה רשתות המסוגלות ללמוד ללא פיקוח מנתונים שאינם מובנים או ללא תווית. מהן היכולות הנוכחיות והעתידיות של בינה מלאכותית? היכולות הנוכחיות של AI כוללות דוגמאות כמו עוזרים אישיים (Siri, Alexa, Google Home), מכוניות חכמות (Tesla), התאמה התנהגותית לשיפור האינטליגנציה הרגשית של נציגי תמיכת לקוחות, שימוש בלמידת מכונה ואלגוריתמים חזויים כדי לשפר את חווית הלקוח, עסקאות בינה מלאכותית כמו זו של אמזון, המלצות תוכן מותאמות אישית (Netflix), שליטה קולית ותרמוסטטים ללמידה. יכולות עתידיות של AI עשויות לכלול כנראה מכוניות אוטונומיות מלאות, חקלאות מדויקת, בקרי תעבורה אוויריים עתידיים, כיתות עתידיות עם אינפורמטיקה סביבתית, מערכות עירוניות, ערים חכמות וכן הלאה. כדי לדעת יותר על היקף הבינה המלאכותית בעסק שלך, אנא צור קשר עם המומחה שלנו.
Application Programming Interface(API):
An API, or application programming interface, is a set of rules and protocols that allows different software programs to communicate and exchange information with each other. It acts as a kind of intermediary, enabling different programs to interact and work together, even if they are not built using the same programming languages or technologies. API's provide a way for different software programs to talk to each other and share data, helping to create a more interconnected and seamless user experience.
Artificial Intelligence(AI):
the intelligence displayed by machines in performing tasks that typically require human intelligence, such as learning, problem-solving, decision-making, and language understanding. AI is achieved by developing algorithms and systems that can process, analyze, and understand large amounts of data and make decisions based on that data.
Compute Unified Device Architecture(CUDA):
CUDA is a way that computers can work on really hard and big problems by breaking them down into smaller pieces and solving them all at the same time. It helps the computer work faster and better by using special parts inside it called GPUs. It's like when you have lots of friends help you do a puzzle - it goes much faster than if you try to do it all by yourself.
The term "CUDA" is a trademark of NVIDIA Corporation, which developed and popularized the technology.
Data Processing:
The process of preparing raw data for use in a machine learning model, including tasks such as cleaning, transforming, and normalizing the data.
Deep Learning(DL):
A subfield of machine learning that uses deep neural networks with many layers to learn complex patterns from data.
Feature Engineering:
The process of selecting and creating new features from the raw data that can be used to improve the performance of a machine learning model.
Freemium:
You might see the term "Freemium" used often on this site. It simply means that the specific tool that you're looking at has both free and paid options. Typically there is very minimal, but unlimited, usage of the tool at a free tier with more access and features introduced in paid tiers.
Generative Art:
Generative art is a form of art that is created using a computer program or algorithm to generate visual or audio output. It often involves the use of randomness or mathematical rules to create unique, unpredictable, and sometimes chaotic results.
Generative Pre-trained Transformer(GPT):
GPT stands for Generative Pretrained Transformer. It is a type of large language model developed by OpenAI.
GitHub:
GitHub is a platform for hosting and collaborating on software projects
Google Colab:
Google Colab is an online platform that allows users to share and run Python scripts in the cloud
Graphics Processing Unit(GPU):
A GPU, or graphics processing unit, is a special type of computer chip that is designed to handle the complex calculations needed to display images and video on a computer or other device. It's like the brain of your computer's graphics system, and it's really good at doing lots of math really fast. GPUs are used in many different types of devices, including computers, phones, and gaming consoles. They are especially useful for tasks that require a lot of processing power, like playing video games, rendering 3D graphics, or running machine learning algorithms.
Large Language Model(LLM):
A type of machine learning model that is trained on a very large amount of text data and is able to generate natural-sounding text.
Machine Learning(ML):
A method of teaching computers to learn from data, without being explicitly programmed.
Natural Language Processing(NLP):
A subfield of AI that focuses on teaching machines to understand, process, and generate human language
Neural Networks:
A type of machine learning algorithm modeled on the structure and function of the brain.
Neural Radiance Fields(NeRF):
Neural Radiance Fields are a type of deep learning model that can be used for a variety of tasks, including image generation, object detection, and segmentation. NeRFs are inspired by the idea of using a neural network to model the radiance of an image, which is a measure of the amount of light that is emitted or reflected by an object.
OpenAI:
OpenAI is a research institute focused on developing and promoting artificial intelligence technologies that are safe, transparent, and beneficial to society
Overfitting:
A common problem in machine learning, in which the model performs well on the training data but poorly on new, unseen data. It occurs when the model is too complex and has learned too many details from the training data, so it doesn't generalize well.
Prompt:
A prompt is a piece of text that is used to prime a large language model and guide its generation
Python:
Python is a popular, high-level programming language known for its simplicity, readability, and flexibility (many AI tools use it)
Reinforcement Learning:
A type of machine learning in which the model learns by trial and error, receiving rewards or punishments for its actions and adjusting its behavior accordingly.
Spatial Computing:
Spatial computing is the use of technology to add digital information and experiences to the physical world. This can include things like augmented reality, where digital information is added to what you see in the real world, or virtual reality, where you can fully immerse yourself in a digital environment. It has many different uses, such as in education, entertainment, and design, and can change how we interact with the world and with each other.
Stable Diffusion:
Stable Diffusion generates complex artistic images based on text prompts. It’s an open source image synthesis AI model available to everyone. Stable Diffusion can be installed locally using code found on GitHub or there are several online user interfaces that also leverage Stable Diffusion models.
Supervised Learning:
A type of machine learning in which the training data is labeled and the model is trained to make predictions based on the relationships between the input data and the corresponding labels.
Unsupervised Learning:
A type of machine learning in which the training data is not labeled, and the model is trained to find patterns and relationships in the data on its own.
Webhook:
A webhook is a way for one computer program to send a message or data to another program over the internet in real-time. It works by sending the message or data to a specific URL, which belongs to the other program. Webhooks are often used to automate processes and make it easier for different programs to communicate and work together. They are a useful tool for developers who want to build custom applications or create integrations between different software systems.
ממשק תכנות יישומים (API): API, או ממשק תכנות יישומים, הוא קבוצה של כללים ופרוטוקולים המאפשרים לתוכנות שונות לתקשר ולהחליף מידע ביניהן. הוא פועל כמעין מתווך, המאפשר לתוכניות שונות לקיים אינטראקציה ולעבוד יחד, גם אם הן אינן בנויות באמצעות אותן שפות תכנות או טכנולוגיות. ממשקי API מספקים דרך לתוכנות שונות לדבר ביניהן ולשתף נתונים, ועוזרות ליצור חווית משתמש מקושרת יותר וחלקה יותר. בינה מלאכותית (AI): האינטליגנציה שמוצגת על ידי מכונות בביצוע משימות הדורשות בדרך כלל אינטליגנציה אנושית, כגון למידה, פתרון בעיות, קבלת החלטות והבנת שפה. AI מושגת על ידי פיתוח אלגוריתמים ומערכות שיכולים לעבד, לנתח ולהבין כמויות גדולות של נתונים ולקבל החלטות על סמך הנתונים הללו. Compute Unified Device Architecture (CUDA): CUDA היא דרך שבה מחשבים יכולים לעבוד על בעיות קשות וגדולות באמת על ידי פירוקן לחתיכות קטנות יותר ופתרון כולן בו זמנית. זה עוזר למחשב לעבוד מהר יותר וטוב יותר על ידי שימוש בחלקים מיוחדים בתוכו הנקראים GPUs. זה כמו כשיש לך הרבה חברים שעוזרים לך לעשות פאזל - זה הולך הרבה יותר מהר מאשר אם אתה מנסה לעשות את זה לבד. המונח "CUDA" הוא סימן מסחרי של NVIDIA Corporation, אשר פיתחה והפכה את הטכנולוגיה לפופולרית. עיבוד נתונים: תהליך הכנת נתונים גולמיים לשימוש במודל למידת מכונה, כולל משימות כמו ניקוי, שינוי ונימול של הנתונים. למידה עמוקה (DL): תת-תחום של למידת מכונה המשתמש ברשתות עצביות עמוקות עם רבדים רבים כדי ללמוד דפוסים מורכבים מנתונים. הנדסת תכונות: תהליך הבחירה והיצירה של תכונות חדשות מהנתונים הגולמיים שניתן להשתמש בהם כדי לשפר את הביצועים של מודל למידת מכונה. Freemium: ייתכן שתראה את המונח "Freemium" בשימוש לעתים קרובות באתר זה. זה פשוט אומר שלכלי הספציפי שאתה מסתכל עליו יש אפשרויות חינמיות וגם בתשלום. בדרך כלל יש שימוש מינימלי מאוד, אך בלתי מוגבל, בכלי בשכבה חינמית עם יותר גישה ותכונות שהוצגו בשכבות בתשלום. אמנות גנרטיבית: אמנות גנרטיבית היא צורה של אמנות שנוצרת באמצעות תוכנת מחשב או אלגוריתם ליצירת פלט חזותי או אודיו. לרוב זה כרוך בשימוש באקראיות או בכללים מתמטיים כדי ליצור תוצאות ייחודיות, בלתי צפויות ולעיתים כאוטיות. Generative Pre-trained Transformer(GPT): GPT ראשי תיבות של Generative Pre-trained Transformer. זהו סוג של מודל שפה גדול שפותח על ידי OpenAI. GitHub: GitHub היא פלטפורמה לאירוח ושיתוף פעולה בפרויקטי תוכנה
Google Colab: Google Colab היא פלטפורמה מקוונת המאפשרת למשתמשים לשתף ולהריץ סקריפטים של Python בענן Graphics Processing Unit(GPU): GPU, או יחידת עיבוד גרפית, הוא סוג מיוחד של שבב מחשב שנועד להתמודד עם המורכבות חישובים הדרושים להצגת תמונות ווידאו במחשב או במכשיר אחר. זה כמו המוח של המערכת הגרפית של המחשב שלך, והוא ממש טוב לעשות הרבה מתמטיקה ממש מהר. GPUs משמשים סוגים רבים ושונים של מכשירים, כולל מחשבים, טלפונים וקונסולות משחקים. הם שימושיים במיוחד למשימות הדורשות כוח עיבוד רב, כמו משחקי וידאו, עיבוד גרפיקה תלת-ממדית או הפעלת אלגוריתמים של למידת מכונה. מודל שפה גדול (LLM): סוג של מודל למידת מכונה שאומן על כמות גדולה מאוד של נתוני טקסט ומסוגל ליצור טקסט בעל צליל טבעי. Machine Learning (ML): שיטה ללמד מחשבים ללמוד מנתונים, מבלי להיות מתוכנתים במפורש. עיבוד שפה טבעית (NLP): תת-תחום של AI המתמקד בהוראת מכונות להבין, לעבד וליצור שפה אנושית רשתות עצביות: סוג של אלגוריתם למידת מכונה המבוססת על המבנה והתפקוד של המוח. שדות קרינה עצביים (NeRF): שדות קרינה עצביים הם סוג של מודל למידה עמוקה שיכול לשמש למגוון משימות, כולל יצירת תמונה, זיהוי אובייקטים ופילוח. NeRFs שואבים השראה מהרעיון של שימוש ברשת עצבית למודל של זוהר תמונה, שהוא מדד לכמות האור שנפלט או מוחזר על ידי אובייקט. OpenAI: OpenAI הוא מכון מחקר המתמקד בפיתוח וקידום טכנולוגיות בינה מלאכותית שהן בטוחות, שקופות ומועילות לחברה. Overfitting: בעיה נפוצה בלמידת מכונה, שבה המודל מתפקד היטב בנתוני האימון אך גרועים בחדשים, בלתי נראים. נתונים. זה מתרחש כאשר המודל מורכב מדי ולמד יותר מדי פרטים מנתוני האימון, כך שהוא לא מכליל היטב. הנחיה: הנחיה היא פיסת טקסט המשמשת לתכנון מודל שפה גדול ולהנחות את הדור שלו Python: Python היא שפת תכנות פופולרית ברמה גבוהה הידועה בפשטות, בקריאות ובגמישות שלה (כלי AI רבים משתמשים בה) למידת חיזוק: סוג של למידת מכונה שבה המודל לומד על ידי ניסוי וטעייה, מקבל תגמולים או עונשים על מעשיו ומתאים את התנהגותו בהתאם. מחשוב מרחבי: מחשוב מרחבי הוא השימוש בטכנולוגיה כדי להוסיף מידע וחוויות דיגיטליות לעולם הפיזי. זה יכול לכלול דברים כמו מציאות רבודה, שבה מידע דיגיטלי מתווסף למה שאתה רואה בעולם האמיתי, או מציאות מדומה, שבה אתה יכול לשקוע במלואו בסביבה דיגיטלית. יש לו שימושים רבים ושונים, כמו בחינוך, בידור ועיצוב, והוא יכול לשנות את האופן שבו אנו מתקשרים עם העולם ואחד עם השני. דיפוזיה יציבה: דיפוזיה יציבה מייצרת תמונות אמנותיות מורכבות המבוססות על הנחיות טקסט. זהו מודל AI של סינתזת תמונות בקוד פתוח הזמין לכולם. ניתן להתקין את ה-Stable Diffusion באופן מקומי באמצעות קוד שנמצא ב-GitHub או שישנם מספר ממשקי משתמש מקוונים הממנפים גם מודלים של Stable Diffusion. למידה מפוקחת: סוג של למידת מכונה שבה נתוני האימון מסומנים והמודל מאומן לבצע תחזיות על סמך היחסים בין נתוני הקלט והתוויות המתאימות. למידה ללא פיקוח: סוג של למידת מכונה שבה נתוני האימון אינם מסומנים, והמודל מאומן למצוא דפוסים ויחסים בנתונים בעצמו. Webhook: Webhook הוא דרך של תוכנת מחשב אחת לשלוח הודעה או נתונים לתוכנית אחרת דרך האינטרנט בזמן אמת. זה עובד על ידי שליחת ההודעה או הנתונים לכתובת URL ספציפית, השייכת לתוכנית האחרת. Webhooks משמשים לעתים קרובות כדי להפוך תהליכים לאוטומטיים ולהקל על תוכניות שונות לתקשר ולעבוד יחד. הם כלי שימושי למפתחים שרוצים לבנות יישומים מותאמים אישית או ליצור אינטגרציות בין מערכות תוכנה שונות.
WELCOME TO THE