Transcripts
1. Welcome: Once you become a web designer, but you don't know
where to start. Hi, my name is Maya
and I'm here to show you how you can design a
website with no coding. Nolan. With this tutorial, you will learn how to
make your first website, google used to eliminate or probe builder to build
this website together. Remember that before taking
any project for a client, you should learn
all the techniques. You should learn the
fundamentals of UX and UI and also learn a tool to fifth house good
design the website. Also, don't forget that you
should have your designed for Folio so that the client could
choose to work with you. That's why I'm here
to help you learn how to design a website
with no coding skills. In this tutorial, we
will go longer and, and the fundamental
of UX and you. I will also go over
the brand thing and then we will go over how to set up your hosting
domain and SSL. I will look to you
through WordPress. And then we will start
with the practice of design header footer, and the page of the website needs at the empathy
this course, you will be carefully prepared
to start your journey as a web design disrobe can give you a lifestyle that
you ever wanted. Is that working as a freelancer on your own terms or
in a big company, we'd allowed our opportunities. Thanks for joining me and I'm looking forward to
seeing you in my class.
2. Lesson 1 - Fundamentals of UX/UI: Before we start with the
process of designing, we should learn the
fundamentals of UX and UI. Ux means the user
experience on our website, and UI means the user
interface of our website. User experience, or
how the clients, users that are willing
to use our websites are going to have
on our website. And user interface is the
look and feel of the website. Before we take any
project for the client, it's always better
to first start to and make a prototype or a wireframe on a two Lake Figma
or Sketch or Adobe Eco Z, and we should do the
wireframe of the website. Why is that? Because we need to
understand how the user is going to interact with our website and we need to know. The main goal of our
website is that for someone to buy something
if it's e-commerce store, or it's only a contact
form that we want the user to, to use them, send us a form or
we want someone to subscribe to our newsletter, whatever the main purpose
of our website it is, then we need to know
what is the easiest way for the user to use the
website and go from one to another page on
the website that is calling the user and
experience on the website. And when we talk about
the user interface, we should know what kind of
colors we are going to use. What kind of topography is that? The right typography for
that kind of website. Then we need to know the
logo and also the shaping of the website for the buttons
and maybe the spouse of damages and also the
images that we should use, or maybe graphics that we
want to use on the web. Those two work together
and we need to know both of them so we
can design a website. So now when we know the
fundamentals of the UX and UI, Let's go to the next lesson
and prepare for our website. See you there.
3. Lesson 2 - Preparation/Branding: Before we start with the
designing of the website for if we have a client that we need to make
a website for them, then a day even. Then, either way
they should give us old the branding if
they already have it, or we should do to
branding for DevOps site, or if we're doing our website, we shifted to branding for it. And also if we are doing the
website for your client, have in mind that
they should give you all the copy before we start
with the designing process. If you're doing for yourself, dad, then you should
probably have it for you. Now, first of all, what
I want do is to find the right for my website and the colors and the fonts
that I'm going to use. So first of all, I'm going to come back
and I'm going to logo. I have probe. That's why I can use anything. If you don't have a pro, you will see that you cannot
use anything of this, but you should find
something that will feed q. You can use some of these templates that
they already have, or you can do it
from scratch for your website proposed or
branding for something. So I will go to flowers
and I would like to give up website for
a flower decoration. And let's see what we have here. And look, we can use I won't lose much more time in
choosing something. And that's why I see
this logo and I like it. And I don't have a name for
my website for dispose. So I will just leave it
like violet flower garden. And I will, and I
will rename them this flower, the whole creation. Now we can see that they use a brown color for this proposed, but I would like to change
the color and let's go and find a color. You can use Canva color palette to generate color palette. Or you can use colors
that coal to generate a color palette for your or for any other rending that
you're going to use. Let me just show you this as the generator for two colors. And this is the color palettes. And you can start the January there or explore
trending palettes. As you can see here, how many saves we have, and choose the right for
your, for your project. Now for the color palette, Let's say we have the
name of our logo, we style it and
let's say we can go with the same color,
maybe some violet. Explore more combination. Employee can find
something nicer. What I will do now
is go to colors, and I will search here for violet color because
we already have the name of our a logo
there as violent, Let's do the same branding. And from here, I can
choose this palette. I like it. It has more lighter
color and Lambda darker, and I will go with the darker or a logo because it
needs to send out. And we will use the
other colors for duress, both the VIP set
and I will change. And you can see that all
hears change to change. The same color for the text. And we have it. And now I think that this
font and I will go to, I will go with a leg up. I like it. And for the flower decoration
you as the slop its k. Now we have the
fonts and we have the logo and the colors also. So what I'm going to do
is I'm going to duplicate this page and I'm
going to delete well, this sorry, I'll
pick this lines. And what I'm going to
do is to leave it this here and make it
a little bigger. Just like this. And this is going to be our icon or favicon
for our website. And the next thing that
I'm going to do is to go to Download transparent
background. We don't want to have any
background on our logo and image and then compress
files and all two pages. If you don't have the pro
version of KM of Canva, then you can go to any other
Beck from remover website and remove the background
of your logo if you want to have your logo with
transparent background. And then that looked after we have the two of
the images that we need, the logo and favicon, we can go to our next lesson. See you there.
4. Lesson 3 - Domain, hosting, SSL: Next thing that we
wanna do is to have a halting or a home for
our website as we call it, also a domain and SSL. Now, every website needs to
have a cell and be secure. So first of all, I'm working with named
Chip. Every time. I loved their interface, I love Dear user experience. And also what I love with them
is their customer support. They have 24, 7 customer
support, life chat. Did you can go and
ask them to help you. Basically everything that
you have problem with. So they're always here
to help you in any way. That's why I use them. Also, they're very cheap to use them if you are doing
this for your site or if you're working for
a client site that you can just let them know if
you'd like them to or not. You can go and choose GoDaddy
or maybe a host finger. But also what I have
noticed in working with named Chip and other
hosting providers is that I don't have any problems
with my website, never. In cooperation with GoDaddy. They have like old times
of websites are down, down with their, with their hosting probably because there, they have too much clients and too much people that are
using the rehosting. That's why it isn't. It's down all the time. When we go to domain, you can see domain
name search transfer, everything that you can do here. And you can register
a domain here. And you can see
how cheap is it to register a domain for a year than instead
the second year? You can take a domain for
the whole year for just $6. And what kills I want to
deal here is that they have different Haas things that they're offering
like sure it worked, press reseller, dedicated
service, and any others. And also they have
a private email that I'm also using and
I'm very satisfied. But now what we do is that I'm using they manage a
WordPress hosting. And why is that?
Because first of all, it's so easy to
set up everything. Second of all, you
don't have to go to your cPanel and do a def
kind of different things. You can see that they have three different plans and
if you go to monthly, it's only five or
nine or 14 per month. And yearly it's only 50, almost $15 per ear. And almost every time I
work with the turbo plan. Why is that? Because as you can see
here in the turbo plant, we already have free SSL, include it and we
don't have to buy separately SSL icon and connected with the,
with the hostel. It's a double work and it's a double costs for me
or for anyone else. That way. Also, it's muted. They have a CDN that's provider in every
space of the earth. So they have your
website in there and each place them on
the whole planet. So when someone is trying
to open your website, did it opens right away and
it's not waiting to load from the other country
or that kind of stuff. So it's much faster. And then they have good
visitors per month number. And also you can use
the supersonic if you wanted to have an
e-commerce site. But I think that those WHO
for an e-commerce site, the turbo plan is also good. So I basically go with this and I will now show you
how you can do it too. So aldol bill monthly
and try for free. As you can see, the first
month is also free, and then from the second month, you start paying
for this hosting. So try for free. And I will go the same process and show you how you
can do all this. So the next step for us
is to create an account and give me a second and just follow the step and create
an account for you. And when you leave
your payment details, they're not charging your right away at them after one month. Then you're taken here. Here you can say you can leave your website name or violet. And then you can choose in which category are
you going to be here. So if you're a bank, just sale or showcase creative
work idea in the book, website for businesses,
personal website, I will have Upstate
farm business. I plan to do, as
we've talked about, a website for flower decoration. And then just click Continue. And from here you can
have a free domain. You can connect
your whole domain or domain on another provider. And from here you can transfer, transfer from one to another
provider, your domain. Right now I'm good to go with the free version of the domain. And if you still don't have and you will
buy it after-death, I will show you how
you can change it from insect and then click Continue. And from here, it can just
write the weight one. What team would you like
to have on your website? I will just go continue
and I will change it dear. And here is giving you is giving you a
chance to choose if you want to install practically for dam to instill on
your WordPress website, some of these plugins, I will go continue. I don't use any of this. We are going to use WooCommerce
in some matter. Tutorial. Right now we're
not doing a word. Wordpress will commerce website, so does click continue. And here you can
check your detail. So violet that domain name, our monthly plan, and the team that we use
continue to purchase. And we can see that
our website is live. And from here we can go to
manage or WordPress admin. If you, if we go to Manage, let me just explain you click quickly this will
here we have the backups, pile integration, the
storage, and the updates. And you can see here
where it says domain, we can change that. And when we have
domain and we click your domain name chip, then here we will have available domains
that we can choose from and just click Change and it will
change it right away. And as we can see, we already have our SSL
certification and enable it. And our website is
secure and our status, that is only if we
don't have this, then we will have the chance
here to add to our SSL. And that is a totally different process
that we're going to talk some other time. Let me, before we go to
the WordPress admin, let me show you that if
now we go to name chimp. This is our main
account here and named Chip, definitely did before. And you can see that we don't
have any domain right now. If we go to apps here, we can find our hosting
for our workflows website. And this is an easy WP
and if we click on it, then Google be sent
right to them. Place where we were before. This is it. So from here you can
find if you have private e-mail hosting links are some profile and other things. But let's now go to WP admin
and to our next lesson.
5. Lesson 4 - Getting Started with WordPress: Now we are in our WordPress
dashboard in from here, what we have and
what we can see. Let me explain. We have the welcome
message and if we open the drop-down from here, we can the check or uncheck
what we wanted to have here. And first of all, we
have the activity, events and news and site
helped off a roof website. And you can see that it's clean. We don't have almost
anything here. We have two updates. And here are the
updates that you are going to have when we have, when you have any
new update and just clicking Select All
and update Teams. It's going to do the update of your teams or
plugins if you have. We can see that this is the dashboard and from here
we have Red away to pasts, media pages, comments, uh, periods, plugins, users
tools and settings. Now let me explain. And from here we can see the clear catch and
we will go over dance at the end
of this tutorial. What their post types. So we have both and you can see at new categories and tax. If you're doing a
website like blog posts, to have a lot of blog posts like tutorials or something similar. You can do the post from here and you can have
categories of data. If you want to separate
dam like news, travel, whatever you're going to
ride up out and check when you're doing the
pose to be separated, the category that
they want to be, their posts are different
from the pages. Pages are the main
pages that we have on our website and they
usually show up here. I'm going to show you
now on the website. And those are the pages. And the posts are typically only text and maybe one picture. Comments. If we have India
periods we can find here to Teams and also
the customized, this is the main Customize
of the WordPress. And you can use these
or I use every time we're element or two to do all those changes because
everything is possible there. And you can see now
here we have the pages and this is the name of our website and just
another website. And the team that they have
install it already for us. From here you can
change, input the logo. Again, I'm doing all that from Elementor and I will
show you in a minute, I will just remove
this and come. Ok. And then from
here you can choose the color and the pending
defending prompt. The team declare using. It's what kind of
choices we have here to change or
add or delete here. For the header, the footer, menus visits, all
that kinda stuff. And I will click Publish because I'm not going
to use this team and we don't have to
make any changes here. And then we have widgets. We did. I only use them when I'm doing a look website and in any
other ways I'm not using them. And then we have the menus. From here. We're going to do the
menu for our website. And from the plugins, we're going to
install what we need. And users, if you have, let's say a shop, users, when they make an account, they will appear here. Or if you have a
subscribed for or if you have any other
rule in your website, someone that she's going
to help you tools, it's for import and export. Don't touch it if you don't
know how to work with it. And when we go to settings, from here we can see the
address e-mail we are using. If we have a new rule
you can set up here. Anyone can register if
you don't click this, no one can register
to your website. The language, date
and time for it. And this short tutorial Uriel. In this short tutorial, this is the basic of the WordPress and
what you can do this. But let's go to the
next lesson and let me show you how to
install the team, how to install all
the other plug-ins that we are going to need. And then start with
the rest of the work and see how we can
do the design here. Let's go there.
6. Lesson 5 - Installing theme and plugins: Okay, So as we talk in
the lecture before, I would like to go now to
our periods and teams. And I usually go and work with two teams
that I like most. Those are asked trap
or cadenza team. Much of the designers
were recalled. So we'd Hello
Elementor because it's very compatible with Elementor. But I really like
to use we cut in se or Astra dot plus
0 plus teams are that even know you don't
meet their free to and use in meaning
that let's say Astra have a plugin and you can
install it and you have like, I don't know, 50
teams that you can use for your projects
like already down teams. You can change
whatever you like, text, colors, everything
of that, and use them. Also with cadenza,
they have a smaller, I don't know, maybe 810 teams
that you can choose from. But I also like their structure and their speed in the website, how they're how they're acting. So I will right now go with
Astra team and go install. And you can see when
you click on add new, you can see right away that
they are in the popular team, like the ones that those
three teams are by default teams for WordPress
and there all the time, install deer, but you can
anyways, deactivate them. I mean, delete them. And you can see also a was
working with ocean WP team. It's another good team. And you can see here
what everything else you can use Procore and
then go Activate. And you can see now we
can go team details. And here we have the leap, okay? And we don't need them. And if you click decide helped from time to time
and you have them here, it will tell you delete or
your teams that you are not using or delete or plugins
that you are not using. And that's why I don't
want to have them. Here. Again, n, I think that
I must leave one team. Because if it's something wrong with this team and the site is down that these very rare case to have something like that. And if you cannot get back
the site with the seam, then it will automatically go, go to them, go to another team that you
have installed here. Now let's go and
if the customizer here just wanted to
show you the difference before together a team that
we have installed before. And this one a, you can see that Astra, by default they had a sidebar. And here we have
the widgets that, that was telling me that
I'm not using them. That's why when we go here,
you can see the global. It'll tip over a few
colors container. And then we have bought those. I'm not touching
anything from here. And when we go to, let's say header
builder from here, you can change the
logo and the menu. I will do that again,
that would pull a mentor. And then we have
the sidebar here. And I'm going to say no sidebar. Let's go back. And then we have the
footer, also site identity, DCIS put a logo, menus, visits, and Homepage Settings. And from here we're
going to, okay, we're going to change this
leader because we don't have our homepage and
this we're going to select only select nothing else. And we have a static page. If you have website, then you can go
to you'll lead us force post or
something like that. Let's go Publish. And then I'm going to
leave out of here. And the next thing
that I want to do is to come to the plugins,
install plugins. You can see that we
have Hello Dolly. We don't use this M and
we'll delete it right away. And this is for this problem, let it be there for this period. And let's say at NYU, first of all, I'm always
installing it's Elementor. Elementor. If you want to use a
probe builder and will leave a link down below
from where you can take it. It won't cost you any much more than the right prices
of the Elementor. And please don't go
and buy from somewhere else from someone
else that is going to tell you that this much cheaper
and that's just a fake. And you will have a problem in future if k1 t is at the pro, don't buy it from the main website or
filament or F naught, then just don't use
the pro version. And I'm going to still it now. And as you can see
here, they have a lot. Plug-ins that can help
you build something with element floor if
you're using free version. And you don't want to
pay for the pro version, then you can use the
atoms, premium atoms. Those are all free book, just the name premium atoms. And then also for the
header and footer, because even the free version we cannot do the header and
the footer with Elementor. And I'm going to explain later. Why not? And why is
that not possible? Anyways, you can just
some of these plugins to help you if you're not
using the pro version. Next, what I wanted
is to come here. And two, right now, I want to download all
the plugins that I will need for disrupt build because I don't want to
forget something and I will just installed them and
not forget some of them. And then let's say
we're going to use Rank Math for the
SEO for our website. And they would like to
install it right now. This is direct plugin. Also. If you're going to use
element or pro Dan, element or half forums. And right now they have, they have a submission center. You can see all the submissions right here under Elementor. When we have the pro version, we will have here an
option for submissions. And then we don't have
another plugin for a contract forum or
40 subscribe for. And also at the same
time we will receive the same forms in our email
that Google leave dear. But if you are not using the
pro version that we will, we will need another plugin. Death can give us
that option for now. I will go skip now and I will, I think that returned
to dashboard. Let's not lose our
and I'm connecting. This is the dashboard
authoring math. As you can see, you can monitor
some of your pages, are four or four or
are not working. Then we have also
the analytics that they're going to, to get up. We're going to have images, SEO, link, link counter. You can see this in our next lesson when
we do the DSU white, all of this is
structured like this. And how you can do the, the right is T0 for your pages. Also, if we come
back to the plugins and knew the plug-in
that you and use for your contact
forms if you don't have Elementor Pro is
for forming out. It's an excellent
plug-in that is, pre, this is the one. It's an excellent plugging
that you can use for you can even take payments. We did. It's only a pro version. You can buy it only
if you want to have signature in your forms
or something like that. But anyway, you can
use in a lot of things the four-minute or conduct
form or your proposed, you can also instill
commerce if you were doing a shop and go over
it because aids. A lot more things
to explain there. And maybe I will do
another tutorial, how you can use
WooCommerce and how it can help you with your sales and how we can set
up full depth. One other thing that
I want to add here is a cookie nodess clicky
not this plugin. This is the one that is
popping up when you go in some website letting them
know that they're eating cookies and they should
accept them or not. And that will tell
you can also find and install a cookie
policy reader here. I just, if you don't have the right generator
for cookie policy or your client doesn't have deer are a lot of free website. Then you can generate
then you can, that you can drain the
privacy policy terms and conditions and AD are legal private page that you will need
on your website and you're just going to copy the text and put
it into the page and not have much
more plug-ins here, the last thing that
we wanna do is to the pro version
or fulfill a mentor. So you can, if you already have lot
delimiter pro version, just go Add New Up Plot,
plugin, choose file, and just choose to or
element or profile, and then open and install. Now, now that we
have our plugin, install it here you can see that we already have dismisses here will come to element or
Pro Connect and activate. And also you can go from here, connect to inactivate
or element or license. And from here, we can also
go connect and activate, and then just activate,
and that's it. We have our element or install
it and activated here. And now we can go to our next lesson and see
what we have there.
7. Lesson 6 - Setup pages: Now that we have all the
plugins that we're going to need for this simple website. Let's start with doing
the pages of the website. And I, again, I'm going
to tell you a thing. If you have your own website, what kind of pages? So our homepage
is the main page, the landing page, however
you want to say it. When every wanted that lands on the page first of
all length there. And then if it's business, well, most of them are business
really to phages them, we will probably need to have About page and also
we will need to have maybe services if it's if
they are service providers. Or maybe we're
going to have shop. If it's a shop and then a
contact page is a mosque. And then we need to have, let's say maybe portfolio. If you're a graphic designer
or maybe I don't know, content creator, whatever
you want to say it. And maybe we can have a gallery depending what the
business is about. And if you're
working for a plan, they probably already
know what kind of faded they want to
have on the website. Or if it's your own website, you will also know how many and what pages do you want
it to have funded website. So basically what we need
to go and to do the pages, let me just mention
you mentioned and tell you deaf in both ways. If you're doing your own
website for the first time or you are doing a client's
website for the first time, the property is
to, first of all, a go and do coming from page. Or if you're doing a rebranding
for another website, you can do a maintenance mode. It's easier to do
with Elementor Pro. You just have to go
to Elementor tools. And from here you can go
to maintain and small. And from here you
can choose smooth. You can see coming
soon and maintainers. And when you choose one of them, then you go here and if you don't have already
designed that, you're coming soon page
you can create now here, or you can go to Pages
Edit with Elementor. And we showed you in the next lesson due to the design of the
coming soon page. Come here, choose the right
page and click save changes. That way anyone that comes
to your website will see to come soon page and there, and then there you
should probably explain that your website
is coming very soon. Maybe ask for their
email address or leave your social media and asked
them to follow you dear, so they know when
your website is like. But now let's go
and do two pages. What we wanna do is to
go to Pages, Add New. And from here we can
see this is by default the Gutenberg style
of WordPress. And you can also do
a design from here. You know, but, uh,
right now I'm going, this is explaining you. Welcome to the block, how you can do everything. Get to know where you
can find something. I will just delete it and
from here you can app title and then click Publish, but give me a stick
and Olympic come back. I wondering aware that we're
going to have be just here. But I'm worried now. Go and make this to the
trash also the sample page. I will just put it
into the trash. And we have the privacy
policy as draft. Do a quick edit
to, and from here, I will make it the publish it
because we will need it for the footer menu just
for an example. And then we'll click Update. And you can see that
we already have created here contract
block and about. And I will now here make the homepage so I
will just write home. And hearing the right corner, we can see the beach visibility and when we want to publish it, then we have template. This is default. We can select element canvas. This is, we select
element or Canvas for. I will show you in
the next lesson for the coming soon page eats. We doubt the header and the footer element
or full within is from one to another
aside and the team, so it just leave it by default. The slug we have at
home, future image. We didn't put anything here. We basically prevent
future image only for the blog posts. And we don't touch anything of this and just click publish. And then we can click on this or a slogan
that they have here. And we can see now that
we have the home contact. And about. And I will maybe add another
one that is a gallery. Because we are right now flower the curation
company and I wanted to showcase how I am doing the curation
permanent clients I mean, or my client form to show there the creation
style and then click, Publish and come back. And we have HM, gallery content block and about. And probably we need to have a services, services or project. You know what, I'm going
to make this service? And what we want to do
with this speech services. And what we wanna do is
this page is that we are going to on this page, we're always showing
our services and maybe the prices
for the services. If we wanted the client
to know, if not, then we are just
showing them and ask them to contact task for a
quote or something similar. And the gallery, and yeah,
they'll say gallery. And now that we have this, and I will add one new. Just so it's not only the privacy policy
term, conditions. And I will click Publish. And now look, we
want to do is to go back to a periods
and then the menus. We have already
our primary menu. If we don't have it, you
can always create new here. I think that
disciplines because we installed the team before
we started with WordPress, before it installed the team, but not the pages or something
like seemingly similar, like menus and all those things. And now we have home
is custom link. And now we want to add the home. And we want to add gallery and services as we don't have
them here and up to menu. And now a home as custom link, I will remove it. Flipped my home, as you can see, just drag and drop where ever
you want it to be about. And then I will go services, it's always the best to global
them about that then what we so this is the
structure into homepage. We list all of the things that we want to
say, like call-to-action, our services, maybe
some images and add our call to action and
we will see how we will structure it right there. And then the next thing that we want to have
fwrite to home, we want to have de about, let the people know about
who you are and what you do when your private life and what you want and
you don't like, get the people to know
you, build trust. And then we lose the services and we offer what
we offer there. And then we can have the gallery because we wanted
to show what we are doing. So they can probably convince themselves that we are the right person for them. And then we have black
and contact and block is usually use a use in
this kind of paper. Pages, websites just for DSU propose because
with the blog post we can attach more clients. And then we have the contact. And we can see it's already
checked as primary menu. And we can click Save. And then we probably
have secondary menu. Let's see what we have
is that the footer, those are our
social media links. I didn't use this leg this, so I will just delete the menu. And I will create a new
menu that's going to be Footer create menu. And here we are adding
terms and conditions. Let's give you about
privacy policy. Enter some terms and conditions. And I will check this footer menu and
save even though this is not changing anything
because I'm doing the header and the
footer with Elementor. So anyway, footer has been updated and the last
thing that I want to do is to go to customize
and just check and see if my new
homepage is checked. S. In the homepage settings, you can see LA disposed and now I'm putting it a static page. And from here,
choosing a homepage, only the homepage and click families booklets
loop just go over as T. We don't have anymore sidebar. And then we want
to click Publish. Come back, and let's
go to the next lesson.
8. Lesson 7 - Starting with Elementor and Default colors and typography: We did, we did our pages look, we wanna do next is to
make our site density. As I told you already, I use the Elementor Pro
futures for global colors, global phones, and also for
the logo setup, an icon. That's why if we
go to Elementor, you can see down here
we have templates. And we can use, if we go to save
templates from here, we can add new or import. And we can see here
level digits if we have. But also we can do pay just
sections if we want to save it and we can do pop-ups and then we'll have the
team builder from here. From here you can see all
the pages that you have, or here are the examples
that we can do. Header footer or single post. Our hip search old
Afghanistan fluorophore. And the next thing
that we have from here is that we
have lending pages. If we click here a new page, lend pitches like also like the calming soon page
or any other page so that you can use without necessarily needing to be
connected with the whole page. Family have kids,
library from here. Much easier if you
want to just pick up something and use for your
clients or for your own. And due to changes. If you open some of them, you can see that this is the full page done
already done for you. With the things that
you can change. The header, images,
call to actions, how the whole page
is structured. And if you go to
overview and you can see all the pages right
away or view demo. And you can choose if you
want to use that or not. But don't forget that this is only if you have
a Pro version of Elementor or even
extended if you, of course you have few free, but most of them
are in pro version. Okay, what I want to do now
is to set up my default and global color and phones and all deaf and I'm going
to go and view. And so I don't do 2
times the same work. I'm just right away going to go to the header, the header. And you can see
here that you can select page section
within the page pop-up, header food or a
single post page of search results or error. And I'm going to header and
I'm going to name it header. That is obvious. And from here I'm
going to set up all the necessary
settings that I need. And by default, elementor is
going to save it as default. And I will have here after that. And I need to go again. Then I will just save it. Then I can continue working on my header and everything
else that I mean. So just go and create template. You can do this only if you have pro version for
the header and footer. You're going to have
this option for, for the free version. And here we have
different headers that you can use or
take inspiration from. But I will for now close this. And from this left corner you can see d element
or global settings. You can scratches out. You can make it
smaller as you want. And here we have global budgets. If we have, we're not
using your debts. And from here, you can
see eliminate the risk right away knowing that
we're on the header section. So we have the site logo, your page title, search
sitemap, and the menu. If we're doing the header
and then we have them basic, this is everything that
we have in free version. Then this is everything
that we have in pro version and in general, things that we have here. So now what I wanna do to set up my global settings is go to
this hamburger menu here. And you can see the site
settings from here. And then we have global colors. And those are the
primary global colors that every Elementor, page builder half
setup for a website. What do we wanna
do right now is to come back to our color palette, is we have it here and we gave them close
it because we need that. And we can see that here we have the primary color and the primary color is
going to be our color. Did we need for our local? I just copy it and come
back here and paste it. And we have. Then we have secondary
color and I will go with a lighter color here. I'll copy it and then face it. For the text. I already go to black. So straight black
color and 4 to accent. And you know what I wanted
to go for to accent with. And we'll do some changes. I will do dioxin
color like this. The darker color. Because, you know, we wanted to have the darker color
for our buttons. This is the acts and where we
wanted to send the people, just to be an eye-catching, get the people to
want to click there. And we already can see
to cook Ebola's here, but we didn't set it up. So we're going to change
those colors also. Maybe the next one, we will come back here later. And then for the primary color, I will go with the second one. So just change the
place of death. And then for the secondary, I will go with the
lighter color. And then what I want to
do is to just copy and paste as new color here from the color
palette that I have. And I will see how I'm
going to culminate all those colors on my website and how it's
going to look like. And then the lighter color, maybe I will use it somewhere. Excellent. We can update now
this or a weekend, come back and then go
to a global foams. And you can see the primary font here is by default setup to rubato and the secondary slab. And then we have, I think again the same logo and then
again plus seem remote. And now what we wanna
do is to come back here and we already know
we use a liger, a 40 or primarily primary color. Fun, sorry. So let's
come back here. You can see how different fonts. We have, a lot of
different forms and with search for a light graph, here it is, and just use it. And my default is on 600. And I will leave it like this
and I will let them touch anything because if
I want to let say, make some changes
in many header, then I will do it
directly from the air. And then for the accent, I will also go to a link RA. And for the secondary
in four defects. Sorry, I will go
with Yosef inst law. Let's try to find it. You can see we
have slop and SAS. So slab 14, I will see
if it's going to be the proper for our website or if we need to
go with a darker, I mean, the boulder
of styles here. So it can be seen,
well, sorry, slip. And we can again go to update, but I will come back and
I will go to typography. And from here you can see, here. From here you can see
we have the body. And let's, let's
choose direct one. For the links, I will choose
o like rap and also H1, H2, old the header or hitting. So we were weak link href. So just tooth and tooth, all of them to be on 600. Or it's much easier for
us to just click on this icon here and
just click Primary. And if we click here, sorry, let's make an update
and refresh the page. And now when we come back here and we go to the team
settings and typography. This is changed just right. Let's go to set it up to 400. And then the link
we have pellagra, it's not set at
absolutely go to 600. And we can see now if we
come back here and put it, the primary is changing. Right away. So primary, it will make it as
it is so primary. And if we click is
a leg referencing 600 and we don't have
to go and search. Over again. I'm again for
everyone on of doubt. And right now we can see
here that the Allegra, it's a good font
and it's redone. Well, but when we come here to ESPN's blob is
a little lighter. Even though it's with black
color we cannot see at will. And what's the main propose of the user interface is
that we can see good, We have good contract
on the website. So white and black,
black and white. I don't know. All the color typography is
that you can see that you can think of the different
changes that you can use. There. We need to see, well, that's why I want
to make an update. And then we'll come back and
when we go to global level, sorry, global firms,
in the secondary, I will make it 500 and
also for the text 500, and also make it,
make an update. And let's see now, if we can see better or if we need
to change something. I think that there those
are still two riders, so let me just try it on
Cloud or on another thing. What to let's say
we make them bold. Make an update. Again refers to the website, so the actions chart, note there or not. But what I want to
do right now is to just put a text editor here. And we can see that here. We can see well, old
letters are well, let me just see if Yep, We have to Josephine slump
and we have on bulk and we can see right away
that they're good. Another thing. So
let me just delete this thing here and come back
again to decide settings. Okay, so again, when you come, come to global phones from here, we can also choose the
size of the letters. But I won't choose the primary, but I would I will
choose the text letters. Can I will make them 16? I think that's a very
nice size for delivers. And then we have backbones. And if we wanted to, we can choose the paperwork
referred to battles and I will choose the accent or
it's the same as the primary. And also we can
choose the color. Some other things
here, the border. But I usually see that
when I do the page, when I built, when I
designed a website. Then we have image
and form files. And then from here we
have the bare ground. I will leave it
white because it is, but you can set it
up from here if you want some water or for
the mobile big round. And then we have site
identity from here. I click on it and
then select File. And I just go and
upload the two of them. So I don't go with the
same breath is again. And then I have here my logo and you can
see it's transparent, but I will go and edit
image and I will crop it. I don't want this big space. So I will crop it like this. And click Crop and safe. And then I will go insert media and cytoplasmic
gone again. I have it here and I will insert the media so
it's better like this. It will look better on here. So I will go update and I
will refresh the page again. And if we go to preview, and we can see it here, it's smaller, but
it's nice, Okay. Now that we have our
global fonts and colors, we can go to our next lesson and design
the header and footer. See you there.
9. Lesson 8 - Make Header and Footer: Now that we're in a, we're already hearing a
section for our header. We would like to do it here. So what I wanted
to do is I want to go with a simple
style for me header. And I will just click
on this plus size. And again, you can always
go to this folder here. You can choose any
of these flux. You can upload your own from here and find here if you have save it
from somewhere else. But right now what
I wanna do is to click on this slice icon, and I want to have
three sections. The first section is
going to be for my, it's going to be for my logo, just thinking that it's
going to be for my menu. And the third is going to be for my social media because I want to have my social
media in the header. What I wanna do now
is I want to tell you when we click on this
and we added this here. This here is called
a whole section. So when we click here and you can see Edit
section, we haven't here. And from here we can say, put it like books or
full weeding can see if we remove this from here
till here, the whole point. And then let's come back. When it's books said, you can choose from here
how much you want to be. Maybe you want to be 800
and see how it's looking. Maybe you want to be like this
or maybe you wanted to be, I don't know, 300, 400, however you wanted to beam. I'm going to go with
this, a 100 00. I'm going to do this,
This within here. And then we have column
Gabe's and I go, no go up. And then we have hate. Yeah, we can do it. It does create norming way. We can go with mean weight. We cannot go with
fit the screen here you see it's the whole screen. So we go to mean weight. And here in pixels, I'm usually going with 80. It's the right pixels. You can see we have
space between them. So the right, and then we
have position in middle. That means that
this column here, it's always going to be in
the middle from up and down. And we don't want to touch
this vertical island. And then overflow is by default. And we can also do
scratch section. But right now we are in
buck set and we have, though we didn't
setup from here. And we can see here
in the structure, what kind of structure we have. And we can choose
some other spaces. But I want, what I wanted to do is to flip my little book, my menu, put my social media, and then set up the right
structure for my header style. For from here we have
the background and the normal M Hauer. And we can do the bare on
top type with the color, maybe with this
overlay of the colors, maybe weren't video
or slideshow. This is basically when we do
when we design on the pages. And right now we don't want
to have anything on this. So we'd just uncheck that, that because I want to
have scrolling menu. And I'm going to show you
how it's bolded going to be. And then we have
overlay if we want to have or border or shape, driver and type what were a few, but we are not
using any old depth for the scrolling menu. If we go to Motion Effects, and then we can go to the key. You can see it says, Man, it can be on top or bottom. And we can select on which device we want to
have a sprawling menu. And I usually go with
a hold of the biases. Why I use crawling
menu before we can have an icon here
that says go to top. But it's always better for me, like it's scrolling down
with all the pages and they can all the time sea otter. My website or most of
the websites sometimes have a login here or maybe I'm not phone number
that they want to have like call-to-action col
and something like that and they can
use it right away. And then we have ethics
offset and offset them. We have epics offset. I go with 18. Again. That means that the header start to scroll down
after 18 seconds. And then we have
responsive from here. We can choose to reverse
on a tablet and mobile, but this is only when
we have two columns. Because when we
have true columns, even though we click to
reverse, it will only, it will only revert the
first and the last one, and that one is in the middle. It will stay in the middle. And then we have this ability if you wanted to hide
something from desktop, tablet and mobile app for boots. And then we have custom CSS. This is only possible with
the Pro version of Elementor. I told you we're not
going to use codes here. We didn't meet them. We can use for the header if we wanted to change
some color when the, when it starts, I'm going down, but let's start with
designing and we can see what we're going
to do next here. So first of all, we have here site logo
and when we put it here, it show up right away. It's image full size, no corruption site URL. So right away, if
someone clicks on it, it will come back
to the homepage. And if the plant is on mater
page, it will come back. So we can see it's a
little bit bigger here. So we have, We didn't,
we didn't, and weight. And from here, you can see we have the percentage
here, pixels. And pretty much for
the logo image, we use that percentage. And I usually go, let's say with 16 or 17
depending from the logo. And what we want to have here. Let's go with 16.
I think it's good. It's looking very nice. And we can also choose from here where it's going to be placed it so left,
center, or right. I will go with left. And we can see it
well right away. And then what we're gonna
do is go to this here. And then we go navigation menu by default is set up to footer
and illegal primary menu. Okay, so we have now horizontal, vertical and dropped down. This is by default for the
menu version, but of course, if we are using the horizontal
and then we have here left in the center,
right or scratch. I will go right pointer. So now, right now we have the underlying and it's
right away with our color from the
global colors. And then we have
overlying up there. And we can have double length framing,
background or texts. When you go on text. It just you can see how
I like how it's looking. So it's grown. It can also D animation. It can be a shrink
thing, floats, Qu, rotate or none, but it can't stay too from. And then we have
sub-menu indicative, but we don't have sub menus. And then we have mobile
drop-down breakpoint to tablet. And then we have d Double
about the Hamburg, and then we have a
site or an on-center. And what this mean right now, you can go and click
this Edit column. This is the column, so the
whole here is section, and those are the columns. And from the columns here, you can set up a column
within from here. And I will choose this
in middle, vertical. Ali does. So. We have everything
set up in the middle. And also turn on. And then you can
have from here and choose the right
space for column. Or you can, does, you
can see like this, move it here and there. I can't move it just like that. And I will come back here
and I will go to style. We already have this, but I will click on this. And I will look good. I will put 20
pixels, line weight. I will put 1.5. And I won't touch
the layer spacing, it will make some litter
here, spacing between them. And for the transform
we can see we can go with upper case or lowercase or
compliance. Normal. Sar. I don't know if we wanted to go. To uppercase, I will
definitely go to uppercase and I won't
change any of this. Okay? And then we have divider,
horizontal interrupt down. We don't have dropped down, so I wouldn't touch
it. If you wanted. You could just go
over here and change any of the settings and then
we have toggle about them. We will do that in our mobile version and so we know what we're changing here. And less thing if
you search here, so show that comes. I will let them here. And I will only change
if I come to you and see that they already have a lot of angles here that
you can choose from. Or you can go to upload, or you can go to
upload SVG file. You can also put here a link. So I will just put it like this. Anyway, so it's official color, but I will go to Custom and you can change the color of
the custom from here. And when you go
to primary color, just click on it and you
can choose the color. You can see. Or you can clear from here. Color. I will, just, for the secondary
color, I will choose. Let's say we will go, we act on color. And for the primary color, I will just remove it so we
don't have to beg round. So just the logo. And I will do the same
for the two outer. For dq over social media. You can go with white
or transparent. Let's do transparent
because if we change color, depth way, we'll be, we'll be dear to show off. And then we go again acts. And you can see
it that I changed the color in this default. It's much easier. And when we need
to do transparent, just go here and come back. And you can also use
this color sample. Just chews on it and
click on any older image. I'm just choose the right color. You can see here, it's
that much easier. So now that we have
our icons here ready. Then when you go to
style and from here, spacing we have five and from
size we're going to put 20. They're the same size as our, as our menu, as our menu here. Also, we can go to
icon hover and we can have like hover effect. And also we can even see
they're moving effluent. We can go to let's
say global rotate. Let's see if they
have only glow. Think so. I think the quote, bro, just the same like
our menu is growing, lead the Icon Grow
when they hover on it. Okay, So now the next
thing that we wanna do, we right now have our
menu here set up. We want to go to
those ankles here. This is responsive mode, and it will open this. And from here you can maybe change if you wanted
to see him different. The main engines, but those are for desktop, tablet and mobile. Well, and we can see here we
have the goblet mode to end. What we wanna do here is I'm
going to click Edit section. At a glance. We have the margin
and the padding. So the margin here
in the section. If we click on it, you can see we can edit it. If we add here, it will act space up. Both is, so you can see this
is the top and the bottom. This is moving,
but we cannot see, you can see M, this
is moving now. Right now we can see here the displaced quite
blades here that we have. So we don't want to use this. And the potting is the plays that we
wanted to make changes. This is everything
that's happening here inside these big books. So if we unmarked
this because if it's mark, if it's unchecked, then if we good just one number, it put it everywhere. But if we want to change only, let's say bottom or maybe
right, I don't know. Then we need to unlink this and 10 percent and 10 percent
from left and the right. So we have a little
space here. You can see. And now I think that
this is a good size, but I will do it like 30. And when I click on it, I will make it 80. And then this, this
can be, let's say 20. So we have them in one
line, and now we have 20, and we have 35, 50, and so this needs to be 50. So it's everything in one line. Okay? And now we have our dropdown, as I told you before, we're going to work on
it when we come into it. Now to do is click Full within. So when it opens, it opens under oldest and not
in the same heading here. And then we have
center and Hamburg. And now we want to go, we
want to go into the style. And for the color. It's chosen texts you
can see from here. And we have the right
topography and we have, I jumped choose 20. So it's the same. And again, we're going
to choose like this. So we have a little space here. Okay? A little space here. And next what we
wanna do is hover. Sorry. This is the dropdown and I'll, and the normal It's
normal text color fixed. And we don't want any bedroom
color and we don't have it. And typography, we have
the accent, it's the same. And then we have the hover. And we are going to do
is own transparent. So we don't have that
great big room there. And we already have
to dip over Vg, set it up and text
color on hover. We're going to put
it on accident. So it's the same like in the main menu when
we are on desktop. And when it's active, Whitman touch it, so it's
going to be black again. And from here we
can set up Setup, Order type or maybe
you radios if we want divider distance and the
total of button from here, we can make it the color black, and we can make it
onclick to be on accent, to be on accent, on hover to be an
accident, sorry. And then we can choose the
size to be 20, let's say. And it's perfect.
But you can see that this is a little more here. And this is in the middle. So this is not in
the middle here. So what we wanna do
is to set up this 130 and just set up this ONE 40. And now we have everything in
the middle, just like that. And now what we
wanna do is to go to the icons and put
them at the end. So it's not there in the year and the end and
left, right, middle. And then we have, when we
go to the model version, what we need to do is
to setup these are 30. To setup this, I get 30. So we can see that the song 30 right now it's not pitting. And this setup, this 140, okay? So what we wanna do here is we want to flip this over a 100. And we want to see
bulb, this is good. But we want to do here is to go here and we want to go to Style. And on spacing. I want to make this
a little bit bigger. So I will 40. And I will go this to make hitting the road to
see how much we need space. Okay, so we need around 41 of them didn't
need to come back. Okay. So to 19. And if we remove this, we can see how it's
looking now. We can. So, uh, remove D comes
from the mobile menu. They usually remove da
cost for the mobile menu. And it will look like this. So we will wrap the
column and go to advance and go to responsive
and hide on mobile. So when we come back like
this is just like this. But we will, we will
leave it to be DR2. It's looking good. Let's see if we can. Let's see if we can reduce
the space between them. It's good like this.
So we can now come back here to the
layout and we can now reduce this space and just move it this
as much as we can. So we have more space now. I think now it's looking fine. Excellent. We can see the logo, we can see the menu drop-down, we can see the icons
have, we come back? We can see that here
everything stays the same. And if we'd come back here, what gives you the
thigh everything he's laying out the same. Let me do you know, I
will look at those 16. And I will come back
to the edit section. And I will add here only. Sorry, I will edit
the padding and I will only 5% prom the top
to the top and the bottom. So I have a layer of more
space for the logo here. And as I already told you that, this is only possible
With Elementor Pro, It's because when
you hit Publish, you'd get this at condition. If this is not possible
with the free version. And then you go at
condition and you can go to include an entire site
or you can exclude. Or you can include, Let's eat our halves
and you can add condition to exclude
the entire site. And you have a lot
of possibilities. But we will get to include a entire side and we can
click Save fittings. And also if we're
doing a pop-up or some other landing
page that we have. We have a lot of our other
options like With show up, how much times to show
up in every other. And so much other aspects. They are identical,
saved in and use them. So save and close. And this is one of the
biggest reason why is because if you wanted to use popup and you don't
have Elementor Pro, then you need to use some
other plugin for that. You can not be sure everything's going to work right or not. But let's now come
back to the dashboard. And let's go to
Save it templates. And if we go here to all, we can see the header and
we can see the default kit. This is the one that we need
for the global colors forms. And look. Now what we wanna
do is to add new. And then we go to
footer and name it footer and create template. Again here they're
giving us some options that we can use here and maybe
some change something to, to do Twitter depending
from whatever you're going to do and however we want
the footer to look like. But again, I will close it and
then we'll do into height. So I will here. And you can see it's already down there because
it's a flutter. And I will choose
again three sections. And from here, I will also
go to a 100th, 14, 14 000. And no God. And a mean weight. I will do it. 300. I think it's okay.
I'm column middle. I think folded. Okay. So what I wanna
do for the footer, again, like it's
the same process. Again, we wanted to have
in the footer, our logo. We wanted to have
about we wanted to have social media icons and we want to have
the footer menu. And depending, I don't know, maybe you want to have
maybe 0 contact info also, we can have it there. And we can also have
one layout here. I will do it 40. And this will be
for the copyright. So we can, we can click here and just add new 4k
duplicate. It's the same. We don't have
anything down here, but it's much easier times if you wanted to
duplicate something, I will ask you. And what I wanna do here
is to add the menu here. Footer menu is already selected. And I will put it into the
right horizontal underlined, I will put a text to be exactly like our
menu in the header. But I will leave
a note from here, mobile drop-down,
I will put none. And that will go. You will see why not. And I will go just tile
hover we haven't selected. And I will just change here
the transform to uppercase. Excellent. And then on the left side here, I will drag and drop
here the heading. And it here. What we wanna do is to write reserved. Let's say if it's a firm, if it's accompany them, violet. And usually we need to
have the C icon here, but I won't try to search it. And I will put the x here. It gives me the primary who like the primary
color for the hair. And from here I will go and
close form to uppercases. Let's see. Now, I will put 16 and also I will come back to
this and I will put it, take skin just so
we have to save. So now I need to go and
put it in the middle. And right now they are in the
same. They're looking fine. Next, what we want to do is
to write now to have flank. And then I will go
to social media. And I will put it here and I
will flourish on the right. And again, let me change
the icon to Instagram. I will add a custom colors. So primary color is, the secondary color is axon. And here I will remove it. And I will do the same
for the other two. And that will just add up here. So it can work quickly
to hover on it. Excellent. I k. Then we can
go to style and we can change it to the size it gets pay. Or you can come here to
where it says official coral or it can go to Custom and
customize it from here though, they will all change them. You don't have to
go when do it one by one as I do them right away. And then we can go to, I can hover and then we
can kept fro animations. I was like there. Now what I wanted to do just to we have to
make some contracts. I will add here a color and I
will go with the secondary. Because when we hover
on disk, let me see, even if we go with this one, it's looking even better and what their free
go with this one. Even better contract contrast,
even better contrast. We can go with this one, we can use it sometimes
the spec round this one. And here I will only like
Kyle and the border and I will a solid one and I
will add this color. And I will unmarked. And I'm out here too. So this is our footer right now. And then we can
hear some heading. And we can say eye contact info. And then we can go to style, we can make it affects. We can put the phone. I'm 22. Okay. And then we can go to I can lift we can add
it right under there. And from here we
can save company. Oh my God. Let go. Same Tyvek building. We will insert here
and we will say, I don't know, three or four. York, New York. And you can put your address,
you know what I mean? Then here we can choose mobile. And then we can here
put our mobile plus 4999928 retrieve and
I'll 4, 5, 6, 8. And then we can to
e-mail me e-mail. And we can insert here info that violet, hi, let's say. And then we can come here
and for icons it goes fade deep, primary color. And the size, we
can go to 16 and then we can go to text and
we can put a tax on black. And for the typography, it's already made
on sixteen-fifths, so it's looking like this. And it's looking pretty nice. Maybe we can make them a little bigger or half empty, how it's good to look like. And then we have, we can have our
logo in the middle. But we can put it
to like say it 18. And here what we
can do is again, I'm heading and
bright or violet. And we will move it
does to the right, will come here and we will
choose the black color. And we will put two
as we put here, two. And then we can come here, we can add text editor. And I will just move
it this till here. And it will leave it like this. So we have our 16 here. Well, and our footer is
looking just like this. Or what we can do now. And I will put MOOC is
here and this here. And that will just change place. Let me see how it's
going to look. And I'll put it here. And that will put it here. And let's see, I
can list minus 50. And also I will come back here, unmarked desk, and I will
put it 20 minus on top. I will come here and I will
go here and are marked disk and I will do
to bottom minus 20. So it reduced the space even 30. So we can see that
it's almost the air. And I will also come here into the social media and do the same but at the top, so minus 20. So it's more here, so you'll have the
space here between it. But if you have more texts
than does make it a little bit allele bigger and it
will repeat perfectly. It looking very nice. I want to do now is to
go to response to food. And I wanted to see
how it's looking. You can see how it's
looking forward to tablet and the mobile version. So what I wanna do now is to
go to section and advance. And I went to unmarked
desk and 10 from left, M2M for from story, from right. And we have a little bit
space, even 20, sorry. So we have more space. That's better. And I will come to the logo
and make it a 100 crypt. And everything else
will stay the same is better when all this
is in one line. And here what I wanted to do it to come here and to go. Good. And now let's go to
the mobile version. And here what I wanna do is do click to edit this section. And I want to go to advance, and I want to add
here, sorry, like 10. And it's good from every size. But what I wanna do
here is to go to responsive and to
make reverse column. So we have Percival
privacy policy of dreaming condition and at
DMU we have the copyright. And here I want to do the
same, check this mark. I'm going two unmarked this
and I'm going to sorry. Just like this for everywhere. And it's looking nice. And I'm going to come back here on the desktop
version and I will make Publish app condition today entire site and click,
Save and Close. Now that we're done with this, let's go to the next lesson
and design our homepage. See you there.
10. Lesson 9 - Starting with Design: Now let's move on to the designing process
of our website. First thing that we
wanna do is that we can go to pages and find our homepage and go to
Elementor from daycare. Or we can go to templates
and then we can add new. And we didn't
select single page. The home. If you don't have
element or pro, you can do it directly
from your page. Go to homepage, and then
you can see up there edit with Elementor
and you can do it from the air and then
create template. And from here we can
see by default blink, blink templates that we can use. And we will just close this and we have the
blank template here. I would like to see how
the header it's going to look once pulling down. But we are going to see
when we have the page and, and do the rest for it. So retina look, we want to
do as, uh, we will, uh, we know that we are designing of that site or flower
decoration company. And what we wanna do
here is first of all, we want to have our first header and we wanted to have our
first goal to action. That's why we can add a new section from here
and we can select how many sections do
we wanted to have one big section or want
to have two separate, depending what kind of picture
we are going to put here. Are we going to have a lake, big round or that kind of stuff? Or we can come here and
we can go to Pages, or we can just come and
unmarked desk and we can find something
from here like hero. You can see from here some
examples how it can look like. Or you can find some page if you want to use it from here. But right now, I want to
show you how we can't use. So I'm going to go with this and I'm going to go
with just sections. It's going to be books and book. I will again go with 000. So we have the same line
here for the whole website. So this is the section. And we can use from here the, this is the column that
we are going to end, but let's go with the
section then we have no gov and we can
offer for the weight. We can put it mean
weight or feet discrete. I will do with mean weight. But I will put it to 500. Even just takes contract
just like this. And right now,
this is our header so we can a practice and
we can go to Advanced, we can mark this and we can
go to top minus entering. And this will become under our header and our hair
should be transparent. But I will see a DMD if
we're going to go with that, this ion or another
design syringe for here, for our left column, I will add a heading. And this heading would be, maybe we should think about something that will
catch to our clients. I so maybe you
welcome to paradise. To our paradise. And you should know, destructured that
for a root page or blog posts or
anything similar. You should go with. You see here how
it's H1, H2, H3. So we need the first
paragraph that we have here. The first heading to be H1. This is poor, the proposal DSU for derived structure
of our website. So welcome to our paradise. You can write
whatever you like for the style and we'll
choose the black. And I will put dislike. We've even got 18 maybe
two weeks, maybe. No, Let's put it on 18. Welcome to our paradise. And under disk, I
will text editor. And here we have a simple
texts and I won't change that. The only thing that
I wanna do here is to change the padding. And I want to cut this
off to be a little so let's say left, sorry, right. 15 and maybe 18. Yeah. And we have almost
one under an adder. And then what we
wanna do is to go to. Wrap up bottom here. And right now the question
that we have here is, what is the main propulsive
our website to do? We want to have book costs, a clip of costs. Asked for quote, Look, we wanna do hear or
see your gallery. So I, right now, I want to have here one
bottom that there's going to be the main call to action here in it's going
to be contact us. Contact us. And I
want to let shape it. So we have the acts and fix em. We're going to put this on 18 so it's a little bigger
so we can see it well. And then we want to, to put it on upcase. And 4, sorry, for this file
bordered type is a solid. And we're going to choose the
same color for the border. And we're going to use, sorry, and we're
going to use for war the radius, just one. So it's the same
shape like our logo. It will pick, well, even though that
we want flowers, maybe you start to
more color for a book. Let's have it like this. And I will now go F and fans to, and I will go to positioning, and I will do with inline. So now I can just
duplicate the bottom. And what I will do is to write another sentence
here and we will go to, let's say, find out more. I know more. And I will go to style, and I will do. Now, I want the text color
to be in that acts out. And the color here, it can be white, like this. And then we have on hover, we're going to be the
text to be white. And then we have the
background color to be the axon, the border. So you can see it's lightness
and where to contact us. It's going to be on the
hover to be the text color, the acts of color. And this color, shouldn't we? The white dots like this. And maybe we should
change the place. Four is two and maybe the mean. Sorry, I will again change the
places for them like that. But I will put this to be I'll find out more and
these to be Contact Us. And on this bottom then
I will go to advance. And I will put a lift. Let's say 10, maybe 20. Looked like this and now we
have space between them. Excellent, is looking very nice. All right, I really
liked it. And now what we wouldn't use to find some images that we
wanted to show right away to our plans when
they come here. So we are going to grab the image from
here and put it here. Is that hazy? And in we go Just image and we should upload. But first of all,
let's find some. I usually use Unsplash
or you can also find something on
Canva image library. So just I will search
for flower decoration. And let's see what they have and what I would like to put. Maybe we will search for wedding flower decoration,
something like that. And I have found this one, and I will download
it in medium version. And I will also
download this one. I will need image,
so I will download this one and I will see what it will feel better
for for my design. And then I will come here. You can always go to tiny PNG and reduce the size of your
images is highly recommended. But I like to say anytime now for dab
to you, you can do it. So I will just upload
this one again. So we have right now just one. So we will go insert media. And we can see that
it's too weak. But let's go to the style. And, um, k, We can now
choose the size of damage. So I will go with 65. Okay, for me. And what I want to
do is to come back here and I will
search for flowers. Some story. I will come back to Canva
and come back to home. And what I wanted to
do is to maybe again, to go to the size of the logo. And I will go to elements. And then we'll
search for flower. And let's find some nice floor. That's looking good, that will
look good on our website. And you see the old
days, it takes time. So if this much easier, if you're doing the
website for the client, then you can ask
them to give you old unnecessary details for the website of
like images, copy. All are kind of stuff or you will lose time like this
to try to find the right, the right style, and
the right design for your, for your website. So let's see, for the graphics, I lose the one that I
like when I scroll down. So I think that I will
look something like this because we are doing
a flower to creation. So I think it's looking nice. Now what does downloaded? A weed transparent, they've
room, but download. And I will come back
here and I want to up here another image here. And I will upload the medium. And I will now insert the media. And you can see how big it is. And I will go to within
and look like 35. And then when we go
live to a defense, we can go to the
position and weekend, do position absolute, and then we can grab
it and just put it. One neighbor, we
think that that's looking Good. So let's see. If oldest looks like
something, like nothing. Let's make it a
little, little beaker. And we have, so whitespace here. So when we go to final
and make it much, See you a moment to look like this. Okay. Just the detail, but making
them did sign better. And let's see with this image, I wanted to be like this. Or maybe it was like this. Okay? And I will leave it like
that and I will see if this makes sense. So for the first header section, we have our welcome
section, which with H1. Then we have a short intro
and we have two atoms that are the main call to action and the second
call to action here. Next thing we wanna do is
to put here our services. So what we wanna do is to maybe come here and let's
go to the services. Just too easy, make much easier. A flower. Our work and we can
see what else we have here, our services and
I will insert ds. So we have our services here. And we should put an H2. And also here now
we should change the primary and wishing
come back and put it as 66. And you can see we already have icons here, content, content. And from here maybe we can. Good, Let's see
if we have flour. But we don't have flowers. If we don't have icons
that we can use here, maybe if we search true icons, we will find something
that will suit to our to our services that
we're providing. But for right now,
because I choose to use the flower to creation, it's just not reasonable to have depth,
something like that. So I will just leave it like
like they are and adjust. Let's say. And then winning the
curation, Maybe occur. Curation. I don't know. And then we have let's
say a declaration. You'd get you what this might point here and what I wanna do here is two style. And for the icon, I will choose the act, acts on the color
and for the content, I will choose the primary, and then I will choose the
text and also change to black. And then I will come back and make the same for
everyone of them. So they're just the same. And from here, as I
already mentioned, you can do your own icons also in Canvas and download them like SVG file if you're a pro user of Canva
and upload them here. And also icons played the beak of the rural
here in the host. So think will, what kind of eye it goes you're going
to use for your design. But brain now, because
we already have this whitespace ran everywhere
around here and here, what we want to add
some differences, I would like to go to style and choose the color that we were using down here for the footer. But what I wanna do here is
to come back here and I want to reduce the color and
just leave it like, like this, like
almost invisible. And it's looking nice. I think that this clicking rise. What I would like to
do right now here with this image gets that I would
like to make it bigger. But I would like to
reduce here the space. Sorry, but I would like to reduce here to space
at the bottom, and let's say minus 50. And this, this image which will come under here and
maybe a 100, them 50. And when we see now,
it's looking nice. I think maybe just a 100. And we'll come back to a 100. And you can play with
these numbers here and see how it's looking better. And how you can do
does and how you like it much or less here. And I think it's
looking nice here. Excellent. Then the next
thing we wanna do here is to, to another section. And this section, it's
going to be four up vowed. So right now we have
here the services, our services, and here
you can also add a link. So if someone clicks on it, it will go to services and they can see barrier
services right away. Or you can also
add another button here just to show that you
have your services there. But right now I will add
here an About section. And let's go again here and find something that
feels to us and just input that the air and not loose so many time in trying to
design that I have our own. And what they would
like to do is to go with this section. And I will insert it and I will download an image for here. So I will first of all come
here and choose an image. And I will come here
and select my image. Let's find up here at this, Let's use this one as that
one doesn't want to upload. Let's try to find out here disc. Now let's go and first
change the image. Upload this one. So it's looking nice here. And then we have
about accompany them. We need to put here h tree. So 1, 2, then we have three, and then we have here primary. And we can put the
45 is right here. And we have here some text. I will just come to the
black color and the text. And it's looking now at
nice or the bathroom here. We can just use cheap
because of this. I cannot copy this. It's in front of it, but it doesn't really matter. I will copy this one and
I will paste that here, and I will delete this one. And what I will do, I will read more in the advance. I will lift this up
20 from the left. For this file, I will change
it to be full, like this. And on hover to go with the text color and the white doesn't
make this great more. I think it's excellent. I just wanted to do I just want to click on
this and go to advance. And I would remove
this top people team. And I will also unmarked
desk and Port of Boston. I will remove that
50, but let's say 30. Right now, you can see it gets the same line with the image. So we have the right
space whitespace here, we have space between, and we have the text here and the copy and the
weapon right there. You don't have to make
it to be right there. Maybe you have a lot more
texts or less steps. It doesn't matter, just just take a look
on those details, so it look nice there. Now the next thing
that we wanna do here is maybe to up another
call to action here. So what I wanna do is to come back here
and I will unmarked. This isn't an example of what I want to use here
is something like this, this book, I will change it. I will just click, Insert. And what I wanna do
here is make a box set and a 114 to be the same. And then I'm going to
advance because I can see we have top and bottom
and that's good. But then what I wanna
do here is let's see. Yes, we have the left
250 depth and the right. The, and I don't want
this to be in three rows, so I will grab this
and put it under this. Our story. I will remove this text
and this about brand. I will write something like let's write something that will attach the
eye of our clients. So let's say maybe is your wedding soon. And let's put a
question mark and I will remove this line from here. And this one, I will
leave it on each tree. We don't need to go
further with that. And then they go to primary. And good again, this
and this texts here, I will just make it black. And with the facts that
we are used to using it. And I will delete this column. And for this image here, I will just choose
the same units because I don't want
to lose time in searching for images just to show him how to
change the image. And, and I will go again
to the styles and within. And I will make it
just like this on 16. And then we'll come back
and again put does is color and maybe just grab it from here because I want it to
be just the sex color. So I'm not wrong. And we have those sections
like white color, white color. And what I wanna do here is
go to, uh, to be honest, and I will remove this and
maybe just put into a PLT. And here on 18 15. And just like this, and what I would
like to do is again, I will put the same from here. And I will just paste it here. And like this. Say, okay, I need to put it or if the air. And I think it's looking nice. And next thing that we
can do here right now is maybe to put maybe
to put some Gallery. It damages that we
we I'm a half from some something that
we'd get wet say from some wedding decorations
and something like that. So if we go to portfolio, we can find some images that we can use here and how
to structure data. And maybe I will use this kind
of style, so does insert. And here I will
live checkout our, check out our work of
our flower coloration. And then I will come back
and put this in black, and that will come
back and put this x, and this will come back
and put it as primary. And just click here just to come back on the right position. And here it doesn't
look good at, I leave it like this. So this is basically a gallery. And from here you can choose what kind of even just
shouldn't be here. So I will remove all bold black images and app
to gallery and I will just, I can't hook up six
more times this. So insert to gallery. And an absolute. Let's find two more
images of death are the same shape and
probably the same size. Or we are going to do to resize them to
being the same size. So maybe this one, and I will download it
now as small as they are. Some problems with my website doesn't want to
upload right now. Maybe this one. Okay, this one is Kim
and I will upload. And then back to gallery
and Insert gallery. And this is looking nice. Excellent. Maybe let me see if this one, I will put it a 114 just so it's the same as
the same website. And here at DMU 2, we should put on call to action. I think that it will
look good if we put, let's just duplicate this
and grab it and put it down. Dare does because I like
the color and use t when we put it like
this, it's looking nice. But what we wanna do
is just maybe changes, change this image and
I will put this one, oh, sorry, it's too small. I think. This one
too, but it's K. And I will remove the whole text like that. And here at some texts that it's going to
be eye-catching. And again, at now here at
another factor that will take them to the place
that you want and just maybe contact us. And I don't really
like this image here. I can maybe put the bigger one. And again, this term K, it's looking better but I
like good at like this. I will also maybe like this. Let's see how it's looking. No, no, no, no, no, no, no. Let's put it don't feel
too and again and again. No. No, I don't know. I'll put this one. Sorry, but the image is on 15,
so I will put it. And a 100, just like that. And I think that that's it. Sorry, this one, it should
go only Darla upper. Just like that. And if we scroll back there and we see how everything
up this is looking. So we have our heading with an image
showing what we're doing. We have find out
more in contact us. Those two are but those
are main call to action. Then we're showing our services and then the boat, the company. Again, we're telling
what we're doing here, explaining a little more
than we have images that will show up our
work and we are, we are good in our work
and what we're doing, what we're working this. And then we have another call to action asking the client to contact us or a loop dare
details and anything else. And then we have the
footer and I think it went really
inflicting very nice. And now that you know how
one page it can be structure does you can go to every other page just like about services gallery of sound, and just go to About
make the header. Let's say About Us and then down day or
show more about you. Tell me more about your TAM, more about your company. Why are you doing? Does a later more
about yourself? Also do the same
process with service this in the gallery
at the same way that color you can even open
to the two pages and coffee is Scholars
section and put it there and just add more images. And then it's nice
if you have looked, pulls the world deer, and do the blog post page. And if you have blog posts, you can also add them here
at the end somewhere. And you can do it also. Or if it's easier for me to explain to you
how you can do that. If you're using element or Pro, you can just come here. Extant today is go to Contact and you hear have the
form that you can use, maybe maybe the lead
some of the form files. I will insert it now just
to show you how you can do the contact form
in your contact page. If it's already not
clear to you how easy it is for gays to be done. How easy days, four days to, to design a website
with Elementor. And all that kind of
stuff is just that you need to know in
what way you should go. You need to have the
right tool to have the right assets like images, copy, colours, and
oldest kind of stuff. And it's much easier
for you to do that. And from here, if
you click on it, you can see name, you can change from here. You can also change the
gain of the column. You can, from here
you can change the button and then we have
action after submission. So we have collect
submission and e-mail. Then we have collects
submission into submission. And I will show you
where he does that. And from here you can change
your email address where you will like to collect to receive your e-mail address to settings
and from style you can change again the same style if you don't use Elementor Pro, does here, search for widget. And if you, when you do
the forming neater form, you will also receive short
code and you can come here, does search for shirt coat added here and just paste
here to short code that for me ever will
generate for you that and you will have
the form right away here. In Terminator, you can
also change the colors, the forms that you're using
to match your rent color. So now that you know
how one website can be structure and how you can
design the whole website. You can go and do the same
process with your other pages, as well as you know, the fundamentals of UX and UI. Just go ahead and do
the rest of the pages. See you in the next lesson.
11. Lesson 10 - Blog post template: And don't forget to
save all your work before you exit your pages. So just so I'm clear here, I probably already know
how you can do this, but just by clicking publish
here and add condition, you should not save it to all singular but do the front page. So this is your front page, or if you go to pages, you will have the
chance to choose. You will have the
chance to choose what faith to just search for, how home and then
save and close. Now if we come back
in this lecture, I want to show you how
you can do the blog post. So when you're doing
your blood flow, so you go to post at NYU and we already
have this held world. Add New. And here you are going
to have your title. Hello. And here you're going to
add or your old your text. But if you do like that, every blog post is going to be by default like
the team, like it is. Or if you will, and edit with Elementor, you should edit separately
Every one of them. It's basically the same
if you have projects. Like if you're showcasing
different projects and you and you use some tool like
projects for here. Then you should go to templates, and then you should
go to Add New. And from here select
Single Post and dust boot, single post, just say, you know, what is it about? And create template. And here right away we
have different too. Ways of templates to show off and to use an IDE won't use. And that will take any much for your time showing
how you can do this. I will just choose one template to use it as my blog posts. And I think that I
will go with this one. It's because I think that that will go
with this one needs because it has images for help. And I think that I
will go with this one. It's because it has
text and images in it. And because this website is
about a flower decoration, anything that we will out, it's going to have
probably images showing, explaining what we're
doing with that. And also have a sidebar. Let's insert it. Yet because we only have the hello world,
it doesn't matter. So here is the post, except we don't have
to have kind of text. And we have the hello world. And this is going to be where
the text it's going to be. So am just going to put it
link text. Hello world. I'm a, you can see that
it's already by default. And each one I'm going to
style and then primary. This one here. I also am going to choose
our acts on color. And for the ankle
and foot effects, again are acts of color. And I will use the
fixed for here. Also you, what you wanna do
is to choose text and text. And you can see here
in the right sidebar, you can upload images or
HTML codes for your ads. If you have some texts here, you can use social media. They can post a comment here
or you can just remove. And they cannot, they cannot
comment into your post. And I will rather delete this. And then you have mole
spore polar if you want. And you can all
of this change to your relate to your
default fonts and colors. So some, and what is my
ice here and with element or pro is that when you have
looked boast like this, and you click on Publish, then again, it opens the condition tab and
then we go at conditions, not all singular, but we
go to both and then 0. And when we click,
Save and Close. Now, every time when
we publish new polls, they will all look the same. No matter what we put in
a text, it will be text, it will be images, the side wherever it will
always be the same. The sheriff will
always be the same. Everything would will
every time be the same. This is the main thing that it's best here with Elementor
Pro a thing because it saves a lot of our time and our energy and a lot of work
that we shut down every, in every single time that
we're doing the same thing. And that will be all for
this predicts selection. Let's go to the next one.
12. Lesson 11 - SEO of the pages: Now that our pH is done and when you have holier
look pulls down. Let me show you how
easy it is to do your SEO for the,
for the website. So right now we need, if you weren't doing
your homepage for front pages and edit with Elementor done when you click
on Edit with Elementor, it will just open up. And if you click on home, if you do it like I'm doing it, then you're gonna
need to go to home single page. From here. Our Rank Math to the plugin
that we're using for the SEO. Probably haven't activated yet. Let's come back and
this is shrink met. Then we need to go
to set up reserved. And we're going to
just start the wizard. We need to go over everything of this personal blog down small business
website organization. You should see all of this. Continue and I will
just save and continue. Does go through all these steps and save it so we can use it. And then return to dashboard. Or if you're more advanced, then from here you can
also save changes, change settings and all
that kind of stuff. And now when we
refresh the page, okay, so, so we can
use this on our page. We need to go through
our pages and from there to Open With Elementor so
we can work with that. So we cannot do it from inside D element or
single page template. Then link here have the
SEL as you can see it. And for me here we
can change the title, we can change the link, and we can change
the description. A firm here we cannot
focus keyword and it will tell us what the
score is of our website. And from here it gets steam. It's not found in DSU
meta-description. And then we have
butter to image with the focus keyword and the image. So how we are going to resolve this is we
click on this image, we come here and alt
texts, but it says, let's say we're going to
say hot and insert media. And now when we go
here and to our SEO, we can see that right now. Wait, It's not take
any option our image, Let's do with another. Let's write here hope. Insert media. Okay, Let's save draft and refresh this. And when we come back, let's see right now, yeah, we have 90 is core, and right now we have the image as checkmark that we did this M. That easy days, how you can do that the
SKU of your website t, Well, when you're
doing your own lips, O of M site or of your client's
website if they give you the content that
you shouldn't wait, oh, worry too much about it. But if you're doing the content, think well what you're
going to write there because google search
engine should, should choose you buy the right words to show
to the right people. So take in mind
when you're doing the SEO and take in mind when you are writing the content for your website or for
any other website. You can do this the same
process for the blog post, but you should do it for
from the blog post page. Let's come back and
just go to pause. And when you click
Edit, from here, you can click here it says Rank Math and you can add here. Hello. And it will tell you down here you
can see what is wrong, what you're missing, what you change two to get a
better or they're. Now that you know how you can
do d SEO of your website, Let's go to the next lesson.
13. Lesson 12 - Going over analytics, Cookie notice and cache plugins: Okay, so as we are almost
at the end of this, so S, we are almost at
the end of this course. I want to tell you that the necessary plugins
that we need to use here is the one that
we download the cookie. Notice, it's because every
website should have this. So they already have by
default this message you can click Okay or
changed the word. You can also include the privacy policy link or
change to another page. You can give an option
to refuse the comb, the content to not and enable it and except
expiry one month, you can choose to be in
the header or footer. I always use footer
script placement. And then we have D animation, we have the bottom and then
we have the colors here. I don't know if I still
have some color here. Probably not. Right. You can change the
text color, color from here. It doesn't matter for me
now to change this color. It's obvious what
I wanted to say. And don't forget
to click Save on another team that I want to
go over, e squirming on her. Here. From here you
can create forms, who can create pools,
and creating forums. It's easy. You can go to Blend, pull
requests, registration, logging newsletter, and
contact us or create. Or you have different options. So it's easy just go
there to choose from. You can use their templates
or let's say turn tag. And you already have
here first name, email, phone, and message. You can institute
prior from here, and you can see that
only this signature is in pro version. You can even take payments, stripe or people, and it's
almost everything in free. The difference from
the other plug-ins that we have poor
to conduct forum. Also, they have here the submissions that you can
see and you will receive them again in your email
that you will leave dare into the submissions on
another thing that we have, we already have here,
the clear catch. If we don't have it, we should install a plugin. Like we should install a plugin that will do
it at work for us. Why is and necessary for us
to have the clear catch. Because sometimes we
do some changes and maybe someone is in our website, they want to see the changes. And then we need
to clear to catch. So the website knows that we did some changes and they have really subtle changes
to the public. And listing that we
missed up here are the topics that we need to have. Every I think every
website should have them. I personally use served to N6 analytics and it's easy to use them just
install and activate. And you should have your
Google Analytics set up. And you will just connect that, follow the steps and you, you can connect the
Google Analytics. So floors are, those are
the main few things that we need to have them on our website port of
best basic website. But if you're using WooCommerce, say peer using another plug-ins, it much deeper to explain. So if you want to see how WooCommerce work and what
we can do with that. How we can set up a shop, how we can setup the product, shipping shipping, delivery
oldest kind of stop. Please let me know
and I will try to do another course to, to explain everything there. See you in the next lesson.
14. Congratulaton: Congratulations to coming
to the end of this course. If you follow it along, I'm sure that you are
already ready to start designing your own website or even a website for a client. Not stop practicing and
looking for inspiration. If you want, you can always
follow me and DM me on social media if you need
any help in the future. But also, it will be nice if we become friends and
support each other there. Thank you for
choosing my training and looking forward
to your success.
Maja Ferina Shapteva, Design, Dropshipping & Content creator
