How To Create A WordPress Website 2024 | Complete WordPress Tutorial

making a website has never been easier and in 
this tutorial I will show you step by step how   you can create your own website let me show you 
what we will cover in this tutorial I will show   you how to get your own domain name for free 
if you don't have one and then we will install   WordPress WordPress is the most powerful website 
builder on the web it Powers more than 43% of all   the websites in the world and it's free then we 
will create this website from scretch using a free   WordPress theme and a free page builder called 
Elementor we will not just create a website we'll   also talk about branding choosing the right colors 
for your website I will show you which fonts you   should use and how to create or Outsource your 
logo Elementor is a fantastic free page builder   that enables you to create Dr Pages using a simple 
drag and drop method and I will show you step by   step how you can do that and if you want to change 
something just click and then you can adjust the   content and you can adjust the style that is 
how easy it is we will use Global colors on our   website so if you want to change the colors they 
will change on the whole website so with a few   clicks you can change the look and view of your 
website with the header you can create something   like this also like this or this you can make 
your whole header sticky or just a part of it   and you can make parts of your header transparent 
like this or like this and when you scroll you can   add a different logo and it's all really simple 
to set it up like this I will also show you how   to create all these pages from scratch so this is 
how my homepage looks but with the skills I teach   you in this tutorial you can also make Pages like 
this or like this or like this and of course the   website we'll create will be optimized for all 
devices for desktops tablets and smartphones and   if you want to you can learn how to create blog 
post on your website so you can be found through   organic search results which can help you to get 
more clients I'll will also show you how to create   portfolio page and showcase your work we'll talk 
about creating the right title for your website   finding high quality images add external plugins 
that give your website more functionalities like   extra Elementor elements or a contact form so 
people can reach out to you and we'll save part   parts of our designs in our website so we can 
use it again and again and save time I'll also   show you how to copy and paste whole areas in your 
website with a few clicks when you follow all the   steps in this tutorial you will be able to create 
an amazing professional website and not only that   you will be able to create websites for others and 
generate an extra source of income tons of people   who have watched my videos say that they now make 
websites for a living and you can be the next now   let me give you a few important announcements 
before we get started in the description of this   video I have time s so if you to go to a certain 
part in the tutorial you can click on one of those   time stamps and you go directly to that part of 
the tutorial when I go to fast for you you can   go to the settings here at YouTube playback speed 
slow down the speed of this tutorial and if you   want to go back a few seconds in the video just 
hit the left arrow on your keyboard and you'll   go back 5 seconds in the video If you appreciate 
that I made this video for Freedom please give   this video a like and if you want to learn more 
about making websites that generate you money   then subscribe to this YouTube channel now let 
me show you the three steps we'll take in this   tutorial so first you get your free domain name 
and we will get web hosting what is a domain name   a domain name is the address of your website web 
hosting is a special computer that's turn on 24/7   that contains all your fils all your emails all 
your images all the content on your website so   with your free domain name and web hosting you 
are visible on the internet then we will install   WordPress and WordPress is completely free it's 
the best tool to create a website without having   to know anything about coding because WordPress 
is doing all the hard stuff for you and then the   third thing you will create your website and 
for the website we will make people can charge   thousands of dollars but I will show you for free 
how you can do it yourself if you already have a   domain and web hosting you can do two things you 
can migrate your current website to this amazing   web hosting platform I have tutorial here that 
can show you step by step how you can do that   if you already have installed WordPress you can 
skip step two and go directly to step three and   I will show you right now where you need to go in 
the tutorial in order to follow along from that   point on so ladies and Gentlemen let's let's get 
started if you already have a domain name and web   hosting that's great then you can skip this part 
if you don't have a domain name and web hosting   you can go to webhosting 40.com hit enter then we 
click here to go to hostinger through the years   I've have been searching for the best web hosting 
company that's affordable and then I came across   hosting I'm already using them for 5 years and 
I love it and I'm not the only one if you take   a look at the reviews on trust pilot you see 
that all people are also really excited about   hostinger and if you take look at the Google 
Trends hostinger is taking over the web hosting   industry they're getting more and more popular why 
because their web hosting quality is topnotch and   they are affordable so if you want to get a free 
domain name and web hosting here at hostinger you   can click on claim deal you scroll down and then 
we see three plans the Premium plan the business   plan and the cloud startup plan let's start with 
the Premium plan everything you need to create   your website if you're on a budget this is the 
best plan for you what does it contain you have   standard performance what does it mean I've tested 
everything like crazy as long as you don't create   100 websites on this plan you will be fine the 
performance will be fast this is a performance   test of a heavy website that I've created using 
the Premium plan the performance will be a bit   more challenging when you will create 80 websites 
on this plan but if you only want to create one   till three websites everything will be blazing 
fast you have 100 GB of SSD storage which is more   than enough weekly backups free SSL unlimited 
brandwidth so so you can have as much visitors   as you want a free email account you get a free 
domain and to make it even better for every plan   you have there will be free domain privacy what 
is domain privacy that all your details your phone   number your email will be hidden so people on the 
internet canot see all your details when they look   up your domain information and with hostinger this 
is free and with other web hosting companies this   can cost up to $20 per year but is also really 
nice if you somehow don't like the service there   is a 30-day money back guarantee no questions 
asked so there is no risk at all to get started   so if you want to go for the budget plan you can 
click on add to card and there's a period you   can choose and the longer the period you choose 
the more discounts you get so here you see for   48 months you get three months for free and you 
pay $2.99 per month for the next four years so if   you scroll down that's a total of $173 but let me 
make this even better if you click over here you   fill in 30 you click on apply you get 10% extra 
discount if you're like okay but I want to go for   a shorter period you can go for 12 months then the 
price increases a bit per month but then if you   scroll down look at this you just pay $41.68 so 
for $41.68 you can get started with a free domain   name in your own web hosting plan now let's talk 
about the business plan which is even better here   is the most popular one the business plan look at 
this you get increase performance up to five times   as fast you get 200 gab more than enough but it is 
nvme storage so basically nvme servers make your   websites up to five times faster than SSD servers 
so you can have 20 30 50 80 websites on this plan   and your websites will still be fast there are 
daily backups instead of weekly backups and you   have free CDN free CDN makes your website fast 
on every single place in the world if we scroll   down what you'll see over here we have a WordPress 
staging tool object cach for WordPress which will   make your website even faster you can create a 
backup on demand and this is also something really   big you have the WordPress AI tools those AI tools 
will help you in building your website they will   give you advice on what you could do to make a 
better website and the great thing is that it's   already really good but will only become better 
in the future that's included in the business   plan so if you want to get this plan you click on 
add to card then there's the same overview choose   a period And when we scroll down we can fill in 
in 30 apply you pay $28 for 4 years if you don't   want to go for the long run but you want to go 
for 12 months you pay a bit more but then the   total amount will be $652 so it's up to you to 
choose which plane you want to have and which   period you want to choose well you know what you 
want I will go for 12 months you can create your   account so I'll will fill in my email address 
over here I create a password or you can sign   up with Google or Facebook and then you can pay 
with credit card PayPal Google pay lay and coin   gate but there are also local payment methods 
so if you come from a certain country from the   Netherlands or from India there are local payment 
methods that's also what I love about hostinger   that everybody can pay with their favorite payment 
method so that makes it easier for you to make the   payment so you can choose over here how you want 
to pay I want to pay with credit card and then   you can fill in your details over here but you 
don't have to do that over here you can also do   that later so I will leave this empty you can 
add your company details if you have a company   fill in the details over here and then when you do 
that your texes will be subtracted and you'll pay $538 so what I will do now I 
will fill in my credit card   details and then I click on submit secure payments and then I want to congratulate you with 
your free domain and your web hosting plan and in   a few minutes we can choose our free domain name 
awesome it can be that the hosting panel is in   your language click over here they're adding 
languages all the time so if you prefer your   own language you can select it over here I will 
use English and then I click on start now over   here who are you creating a website for I want 
to skip all these steps they want to help us but   I will show you what you need to do so I click 
on Skip and also over here create or migrate a   website I say skip create an empty website and 
then over here we can claim a free domain name   so over here we can fill in our domain name and 
then here we can fill in in our extension I want   to go for the domain we are web Divine and over 
here I can select my extension Com or something   else I say.

Com and then I click on search it is 
still available as you see over here so I click   on continue and now we can fill in our details 
over here if you don't have a company you can   select personal if you have a company you can 
select a company I have a company so I click on   company next step and we need to fill in some 
extra details so my first name 30 my last name   my email my company so make sure to fill in all 
these details and your phone number this is for   registering your domain name and the great thing 
because of domain privacy these details will not   be shown to the world so people cannot call you 
like hey I'm calling you because I saw online that   you have a new domain we can make a website for 
you or a logo you you will not get spam thanks to   the free domain privacy from hostinger I click 
on finish registration now we are registering   our domain we can choose our server location if 
you click over here you can choose one I want to   focus on people from the United States so I leave 
it where it is you can also select another one if   you're focusing on people in Europe you can select 
something in Europe I leave it as it is and then I   click on finish setup and now your WordPress 
website will be installed on your brand new   free domain [Music] name our website will be made 
secure which is great and it says well done you   are ready we can view our website and if we click 
over here it will probably be a website that is a   preview of the current website as you see over 
here this is not the real website yet but we   can already get started so I close this and then 
I click on the control panel it's it says over   here that my domain will be accessible in about 3 
minutes so I prefer to wait instead of working on   a domain that's not my real domain so my advice is 
that you also wait until your domain is live and   then we can work on our real domain which we got 
for free so I will be back in a few minutes it's   now one minute later if I refresh the page the 
text is gone so if I click over here look at this   this is crazy we see our live domain it's hosted 
at hostinger and it is secure you can see that   by this icon connection is secure how cool I close 
this command or control W and now I go to security   SSL just to check and it says yes it is active so 
I go back to the dashboard and now I want to go to   the autoinstaller and then I select WordPress my 
website title is my WordPress website we'll talk   about it later the administrated email I want to 
use another one my username I want to use this one   and my password and then over here I click on next 
we get the most recent version of WordPress we can   change the language so if you want to create a 
website in a different language you can change it   over here and all the other settings are great so 
I click on install now we can click on admin panel   and that will bring us to our website look at this 
our live website we are live everybody that goes   to this domain at this moment will see our website 
so what you see over here is the back end of   WordPress this is where we can adjust our website 
if I click over here I see the front end of my   website this is what people will see when they 
enter our website and it looks okay but of course   we're going to make it look so much better so by 
default this will be installed on your website it   can be that it looks a little bit different and 
because we are logged in we see this bar over   here all people that are not logged in they don't 
see this bar with this bar we can navigate from   the front end to the back end by clicking here 
so now I want to close the other two tabs this   is the back end of our website this is the front 
end on the back end of our website we can adjust   our website we can create blog posts we can add 
videos images PDFs we can create the homepage the   contact page the about us page we can moderate 
comments when people have a comment on our blog   post or a product we have we can change the look 
and VI of our website with themes we can add extra   functionalities to our website we can add other 
users that can do things for us on our website   there are WordPress tools and there are settings 
so congratulations you're live now I like to work   in a tidy space just like my desktop but also when 
it comes to WordPress I want to work in a cleaned   up environment right now they plugins we don't 
need it's a little bit messy let me show you how   to clean up your WordPress website and configure 
a few things before we get started with making our   website how can we do that well the first thing I 
want to dismiss this message then I want to go to   the screen options and uncheck everything so the 
overview of our dashboard will be clean of course   afterwards I want to install go analytics so I 
seen overview of the visitors of my website and   if I have a web shop I want to see the amount of 
sales but for now I want to leave it empty then   I want to go to the website to the front end I 
search for my blog post there's one blog post   that will come with every WordPress installation 
and in this case it is here hello world if I click   on it it says my domain for/ index.php all that 
stuff I want that to look better so I go to the   back end to settings Perma links and there on I 
want to change the custom structure to post name   so I'll will see my domain.com or whatever for 
SL and then the name of the post so I click on   Save the changes now I go to my website I scroll 
down I click over here now as you see it just says   for/ hello world that's so much better then I go 
over here howdy 30 Corp I click on edit profile I want to scroll down I want to fill in my first 
name last name and then change the display in   name publicity to 30 Corps and now it says howy 
30 Corps if you want to have an image like this   let me save it first update my profile I scroll 
down you can change or create your Ro of picture   on gravitar so you need to open this link then 
you can sign up leave your email address which   should be the same as on your website and upload 
an image that will be displayed over here and over   here okay over here at the admin color schem we 
can change the look and view of the back end the   colors so I can click over here it will be light 
Modern Blue Ocean Etc you can choose something you   prefer and I prefer the default one let's go to 
posts I want to select all the posts even though   there's only one and I click on bu actions move 
to the trash apply go to the trash empty the trash   then I go to Pages select all pages build actions 
move to the trash apply and then at the trash   I want to empty the trash then I want to go to 
plugins select all plugins book actions deactivate apply select again book actions delete I want 
to start from scratch with no plugins of course   we can add plugins later but right now I want to 
start with nothing now if I go to my dashboard it   looks so much cleaner already then I want to go 
to the settings General and make sure that over   here in my WordPress URL it says htps and not 
HTTP if there's no s you can add it over here   and also over here and then scroll down and save 
the changes if you need to change it you need to   log in again go back to settings General 
and I scroll down you can change the side   language you can change the time zone well if I 
say I'm from Netherland so if I focus on people   from Netherlands I can just say AMS Amsterdam 
I search the City that is in my time zone and   then automatically everything will be synced to 
the right TI Zone then there's the date format   I like to prefer the upper one you can change it 
to another one or have a custom one in the time   format I like to use PM in capitals my week starts 
on Monday so I click on Save the changes great now   we need to come up with a site title this part 
is really important we're going to talk about   the title of your website so let me show you how 
you can come up with an amazing title for your   website so you'll be found better in the search 
results never say in your site title welcome to   this website because people do not search 
for welcome to this website when they want   to find your website so what I will do always 
use keywords you want to be found on in your   site title preferably at the beginning and after 
that the name of your company so if I say command   or control T I go to new tab and I search for web 
design agency l London I skip the sponsored stuff   so here's the first organic result what do you 
see web design agency so when I search for web   design agency I find this page on top web design 
London web design next one web designers London   web design agency web design London web design 
agency London nowhere it says welcome to this   website or the name of the company it's all 
web design agency so in my case I would like   to say web design agency Amsterdam so keyword 
of what I do I'm a web design agency then the   location in Amsterdam and then pipe and I can 
say what the name of my company is and it is a   web Divine so if I would search for a plumber in 
Sydney let's keep all the s but you see Plumbing   Sydney plumbing services you see what they are 
doing because that's what people are searching   for people are not searching for the name of 
your company if they don't know your company   they are looking for a service so they search 
for the service in my case plumber Sydney also   here plumber Sydney Plumbing Sydney plumber to 
the rescue plumber Sydney so over here first   the keywords a web design agency in mster them 
because that's what people are searching for   and then the name of your company then there's 
a deckline in a few explain what this site is   about just another work website or I prefer we 
create highly converting websites I scroll down   and I save the changes and now if I go to my 
website I see web design agency Amsterdam and   that's how it will be found in the search results 
of Google do you already have colors in mind for   your website for your branding maybe you already 
have a business with colors and a branding and   you just want to make a website great great then 
you can skip this part if you are starting from   scratch you need to think about the colors you 
want to use if you have no ID and you you get   stuck no worries you can also follow along in 
the tutorial with the images and the colors I   use and then later on you can decide to choose 
your own colors and change website colors in a   few clicks in your whole website now let's take 
a look at how to find the right colors for your   website for your branding when it comes to colors 
you can get inspired by the internet so I search   for branding colors then I can go to images I 
already see a lot of images for instance this   one here you see a lot of popular brands with 
their colors so you want to go for optimism here   are a few examples friendly excitement creative 
trust peaceful balance it's just for reference it   doesn't mean that you could never have the fenta 
logo in yellow or red but gives you some IDs also   here what you also see a lot is that brands use 
multiple colors so if I close this and I go to images here you see a great example papal uses 
a blue color dark blue light blue and in between   MasterCard three colors BP three colors so it's 
great to have a color palette and that's also   what we're going to use in our website here are a 
few more examples of multiple colors that somehow   fit with each other more examples don't you love 
the internet all those examples it's it's amazing   man yesterday I went to the internet for the 
first time I was like what is this for kind of place so if you want to get more inspiration 
what you can do imagine you have a website   about a web design agency you can search 
for web design agency let's say thereis   hit enter and now you can go to a few websites 
from web design agencies in Paris and you can   take a look at the colors okay they use the 
color red this how their design is okay and   you can get inspired by that so you can use the 
color red if you want to or black with probably purple blue this our website so you can get 
inspired and what you also can do if you want   to you can follow along with the colors I will use 
in my tutorial let's talk about it in a minute I   will show you where you can find those colors 
what we can do now we can go to cool.

Go hit   enter and we can start generate a color palette 
and what coolers does they will find colors that   will match other colors so if you hit space you 
get a few random colors again again and if you   see color that makes you feel like hey this could 
be something from my website then you can use it   so let me show you how it works if I like this 
color or this one I can lock it I can bring it   to the left like okay this color is okay and now 
it's going to find a few matching colors and if I   hit space this one will stay okay I like this 
let's see what else I can do I can click over   here okay I want to be a bit more orange okay and 
over here maybe I want it to be have a more color okay space that's interesting this color 
I think that matches great with this one   so I lock this one actually I want to have 
a lighter version of the orange a lighter   version of this one so I can also copy this 
then paste it and then I click over here I go   to U saturation and light I guess luminance 
make it higher so it's the same color but   lighter color the same I want to do over here 
okay let me go back to the Picker copy this color paste it go back to H SL make it 
lighter okay I'm bring oh command S I   bring this to the left so those two are 
lighter colors of this one and there can   be one more color or maybe you're like hey 
those colors are fine with me I don't need   the other one then I can close this I 
think I want to have one darker color   so I copy this picker copy it paste it and 
then go to this one and make it even darker   okay I drag this to the left and actually I 
like those colors except for this they can be lighter also this one if you're happy with the   results you can click on export as a 
PDF I call this one web Divine export and there you go you get a beautiful PDF and you 
can use those colors for your website if you want   to follow me step by step in this tutorial also 
with the same logo the same colors and same images   I use and I will show you right now how you can 
get those for free so you can follow along in this   tutorial and create exactly the same website that 
I create if you want to follow along with the same   images I use in my tutorial with the same colors 
then you can go to 30C corp.com for/ images hit   enter and there you go you don't have to sign up 
for an email account or something you get it for   free and then you can unzip them i' like to bring 
them to my desktop which I cleaned especially for   you then we can go to web Divine branding and 
here is my overview of the colors I will use in   my website and here is the fave icon I will use in 
my website and the logos I will use in my website   so if you want to follow along feel free to use 
these images and the great thing is you can change   the images later in your website and then it will 
be changed on every single place in your website   so it doesn't have to be the definite colors that 
you can never change afterward no you still can   just change the color and it will be changed on 
every single place use that color in the website   is that great I think it is let's talk about 
WordPress themes you have WordPress WordPress   makes it easy for us to create websites we don't 
need to know anything about coding and then on top   of WordPress there are themes and Page Builders 
so a theme decides a look and view of your website   and every theme has their own functionalities so 
what we'll do we'll find the best theme for our   website there are premium themes that cost money 
and they are free themes in this tutorial we're   going to make use of a free theme and that free 
theme is amazing it can even do more than some   B themes so let me show you what themes can do 
show you a few examples and then we're going to   get the free bloxy theme let's talk about themes 
this what you see over here is a theme a theme   decides the look of view of your website and 
every theme has their own functionalities so to   give you an example over here I have web design 
agency Amsterdam web Divine this displayed in   Black text on the light background because that's 
the style of this theme if I go to the back end   and go to appearance themes there are also other 
themes if I go for the theme 2022 and I activate   it look at this the content of my website stays 
the same but now the same title has a different   color and a different background why that's the 
sty of the 2022 theme so the theme of your website   decides what kind of sty it is and every theme 
has their own functionalities well I have been   searching a lot for the best free theme there is 
and I found it I finally found it it's an amazing   theme you can create professional websites with 
it it's the bloxy theme and you can get it by   going to 30 corp.com blockc hit enter and then 
you can go for the free download over here it   also has a pro version but in this tutorial we 
want to focus on the free version then I click   on download and there it goes I close this and 
I close this in order to install this theme I go   to the back end of the website to appearance 
themes I click on add new theme I can upload   a theme and then I can drag it over here and 
install it or over here themes add a new theme   I can search for bloy and there you go so I can 
also download it from within WordPress I click on install and then I click on activate so now if I 
go to the website it looks like this it doesn't   look that appealing yet but we're going to make 
it look beautiful then I go back it's really   important that we install the companion plugin so 
I click on install bloxy companion and that will   give you all the features in the free version so 
you need to have the the theme the bloxy theme and   then you need to have the bloxy companion plugin 
and when you install that then disappears over here and then we can make use of all the beautiful 
features of this theme so it is time to upload our   logo and our fave icon to our website what you can 
do you can do a few things you can use the logo   and the fave icon I have in my images folder then 
you can follow along with that you can also create   a logo yourself I have a tutorial about it you can 
watch it over here or in the description how you   can make a logo for free using canva or you can 
Outsource it or you can have a friend that creates   a logo for you well there are multiple options 
that's up to you of course right now I'm going   to show you the the few ways I just mentioned 
on how you can let someone else make a logo or   create a logo yourself so let's continue now if 
I go to the website it looks like this I make   it look better how can we do that well we just 
downloaded the images for this tutorial and I   want to use my logo if you want to create your own 
logo you can do that you can go to YouTube search   for logo canva 30 hit enter look at this I show 
you how to create amazing stunning logos for free   with a transparent background what you also can 
do you can go to 30 corp.com fivr let someone else   create a logo for you I have a friend have created 
a logo for me so I go to figma he created the logo   in figma over here so I could choose one and I 
decided to go with this one but if I finish my   website then I can side to change the colors and 
in a few clicks I will show you in the tutorial   how to do that I can change the look and vi from 
this to something like this or this so I decided   to go with this one I exported this as an SVG and 
you can find it in the images folder so if I go to   the desktop images tutorial web Define branding 
you can find it in SVG and in PNG and with SVG   the the resolution stays perfect so you can make 
it as big as possible it will still look sharp so   let me close this close this close this in order 
to upload your logo to your website you go to the   customizer over here then you can hover over here 
and you see three dots click on it now over here   we can upload our logo I click on select logo and 
then we can grab it from our computer by clicking   on select fils I go to images tutorial web design 
branding and I want to go for the logo SVG which   is the high quality file if that doesn't work for 
you you can go for the PNG file but you see the   quality is a bit less I go for the logo.

SVG and 
it's also smaller 12 kilobytes and the PNG is 23   kilobytes so I click on logo.svg open then I go to 
the title copy the title I paste the title in the   all text and in the description then I click on 
select and there it is what I don't want is this   text below so here at the left I can click on the 
side title and I can turn it off over here is the   logo I can change the height of the logo and since 
the quality is SVG look at this it doesn't matter   how big it is it will still be sharp do you see 
that how far do you want me to go in showing you   that it stays beautifully sharp well let's stick 
with 50 and then everything else seems to be fine   publish then I want to upload something over here 
because right now if I would go to apple.com and   to tesla.com what I see over here is the Apple 
logo what I see over here is the Tesla logo I see   the workers logo over here I want to change it to 
my logo it's called a fave icon in order to upload   it to this place I click over here I go back 
and then I scroll down all the way I go to side   identity and I select a site icon again upload 
files select files and then here at branding I   go for my fave icon it needs to be Square open 
copy paste paste select it I can crop the image   and then it appears over here so now when people 
are at the Tesla website they know hey I want to   go back to the web design agency Amsterdam website 
and then I can see this fave icon and know that   this is the right place to go publish close it so 
now it's looking a bit better already so we have   our logo we have our fave icon now I want to add 
some pages to our website and I want to add those   pages to a menu like almost every other website in 
the world so let me show you how we can configure   that using the bloxy theme when WordPress started 
years ago it was a blogging tool so that's why you   see over here ready to publish your first post 
get started here well I don't want to show my   first post over here I want to show the homepage 
over here in order to show the homepage I need to   create a homepage so let me show you how to create 
the homepage and other pages in WordPress it's   really easy go to the customizer then scroll down 
here at the left all the way to menus click on it   then we can create a new menu we want to assign 
it over here so I click on create new menu and   this menu name is just for your own reference you 
can call his Uncle Jim or John if his name is John   depending or maybe it's your Aunt aunti poly okay 
whatever it's for your reference so I would prefer   to call this the main menu so I know it is the 
main menu and I want to assign it to the Heather   menu one which will appear over here I click on 
next and then I can add items so I click on ADD   items and I can add a new page well the first one 
I want to create of course is the homepage that's   the page people enter when they go to my website 
then I click on ADD and two things will happen a   page will be will be created and the page will be 
added to my menu so that's what I want I click on   ADD items again now it's not just a matter of 
oh I just created a few pages now think about   what is the purpose of your website you can say 
my uncle lives in Cape [Music] Town but it has   probably nothing to do with your business so it's 
maybe a weird example I know it's a weird example   but keep in mind what is the goal of my website if 
it is to get new clients now which Pages can help   you to get new clients and for that we can take 
a look at other websites so if I search for web   design agency Cape Town and normally I prefer not 
to do this but people pay for this if I click on   this if I click on this then I know this website 
is optimized for conversion otherwise if people do   not get more money from advertising they will not 
advertise anymore so we can take a look what are   they posting over here well they are showing their 
services financial services help healthare media   about their company about us careers insights 
testimonials projects get pricing and what I   see is that get pricing is highlighted they even 
have something like this I should make a tutorial   about that how you can create something like that 
there's a call to action called booking so what I   see they they want to get new clients and that's 
why they have two call to actions so what I see   they talk about about us about themselves so I 
can create a page called about us or about and   add it to the menu what I also see is that they 
show their services so that's also what I want to   do so I create a Services page and then I want to 
highlight which Services I offer they offer a lot   of services I don't offer that much services but 
there are four Services I offer the first one is branding the second one is web design edit the 
third one is SEO and the fourth one is advertising advertising super cool now I see all the services 
over here I don't want that I want them to be   below Services how can I do that really simple 
below Services branding drag it to the right until   there is a tap like that a space and it snaps so 
now it just became a submenu as you see I don't   like colors but we're going to talk about colors 
later I add a new item because when people see my   services and about us and they're interested they 
want to see the quality of the service I offer so   I want to have a page call or work so people can 
see what we have done for other clients and a way   to get a free customers to your website is by 
blogging so we got a add a Blog Page and when   people are happy they can get in touch with us 
so I can say contact okay so right now this is   our page well if I take a look at this website 
that people um advertise for what I don't see   over here is the homepage when people want to 
go to the homepage or if I go to the company   page and I click back on Anderson then I go back 
to the homepage that's what I also want to to do   so over here sorry homepage I open you and then I 
click on remove so the homepage will not be shown   over here then I want to go back I want to go back 
again and then I go to the homepage settings and   instead of showing on the homepage the latest 
post I want to show aesthetic page so I select   my homepage displays not your latest post but a 
static page now we can select that static page   which we have just created the homepage we can 
also assign the post page the blog page to the   blog page publish and now if I close this we don't 
see create your first post but we see the homepage   so step by step is getting better and better we 
have a manual over here with services and then a   submenu branding web design SEO and advertising 
what else can we do over here well if I go to   the back end to menus we see the menu but in a 
different way here we can do a few more things   what I can do I can add pages but I can also add 
post so if I would have a blog post I can add it   to the menu or a custom link so maybe you want to 
have an external link to my website for instance   and you can call this my [Music] inspiration you 
can save the menu open it and new tab and there   it is and the goes to my website you can also 
click over here get more options over here by   going to the screen options tags link Target title 
attribute Etc and now have a lot of extra options   one of them is open the link in a new tab save it 
so I go to the website if click on contact I stay   on the same tab but if I click on my inspiration I 
open it in a new tab so there those are a few more   options that you can unlock over here I personally 
almost never use them only link Target so now it   looks clean I can only open it in a new tab 
I save it uh let me show you one more thing   I can also have a footer menu I don't know if you 
will see that at once refresh no but then in the   footer you can assign that to certain area in your 
food we're going to talk about it later but right   now uncheck it the header will only be displayed 
in the header menu one which is assigned to this area great I want to get rid of this 
menu item over here so I go to the   customizer scroll down to menus main 
menu click over here remove so that's better before end the tutorial we created a 
sheet with a lot of colors that we will use   the colors of our branding let me show you how 
we can Implement them in your website with the   bloxy theme now I want to talk about colors 
I use certain colors in my logo and I have   a color palette I made it through cools and 
you can follow along in the Toral with the   same colors I use or use your own one what 
I will do I will go to my finder I can go to   the downloads for my PDF I also made a PDF 
in the images tutorial file so I go to web   Divine branding web Divine colors so I will 
use those colors so what I need to do I need   to copy this copy now I go to the customizer 
and then I go to colors and here we can make   use of the global color palet if I click over 
here I can choose a different pallet and right   now you don't see a lot you see that this is 
a little bit greenish but what will happen if   you use all those global colors throughout your 
website and you change those colors the whole   style of your website can change by changing 
those colors why because a lot of colors in   your website will be linked to those eight 
Colors Let's click there again if I go for   a dark one look at this the whole look of view 
will change by changing the colors over here so   I will go for pallet one and I start to use the 
colors from kolars here's the first one then I   go over here I go for the second one it's a bit 
weird to copy this it's hard so what I also can do do it like this so I go to the second color 
and after the hashtag I say 006 based on this   color and then 573 then I go for the third 
color this one over here one one 2 two 2 two   the fourth color I want it to be completely black 
and then the fifth color I want it to be this one copy and this lighter color paste then I want to have off 
white it's not perfectly white but a   little bit less I leave it with that 
and then completely white okay the   completely white I want to make it a bit 
darker I don't want to use with perfect white and then this color I want it to be the 
same as this one so I copy this but then a bit   darker so I drag this down or maybe not darker 
but a small change yeah like that okay what you   see this color is now changing I don't want 
that so I want the background to be white how   can I do that over here at the global color 
palette or at the colors I scroll down all   the way the side background I want it to be 
white okay so so far so good and the tutorial   we will make use of this color palette and then 
when our website is complete and I change those   two colors the whole looka few of our website 
will change so I click on publish and close   we talked about colors it's also important to 
talk about fonts funds are also a part of The   Branding so let's talk about funds which funds 
you can use which funds uh fit your branding   and which one do not fit your branding so 
um let me show you how that works we just   talked about about the colors now it's time 
to talk about the fonts I like to use Google   fonts in order to find those fonts we can go 
to fonts.

[Music] google.com and in order to   show to see how the menu would look I copy this 
I type the text in over here so I see it over here and now I can I can make this smaller if I 
want to I can filter a few things what I don't   want something like this because the fun says a 
lot about your branding my website will be about   helping people to create an amazing website 
that is designed in a good way so if I use   those fonts which have nothing to do with what 
I want to represent that's weird so bungee spice   what I can do I can go to the customizer I can 
click on the three dots and then here at design   by the way let me select the main menu design 
I can go to the font family and I can go for bunge look at this looks like you've picked a 
Google font read this and if you want to learn how   to store the Google funds on your own website I 
have tutoral about it you can find it over here I   click on continue it looks like this that does not 
represent my brand so a few things I want to do I   want to filter few things here you see sarif and 
son sarif I can search for serif versus son serif   there's a big difference and that's displayed over 
here over here with Ser you see those extra things   over here those those extensions if you can call 
it like that sun uh it's French for without surf   is just uh straightforward in my opinion so a 
few examples so what you can do website with Sur   fonts examples I personally don't like to use it 
unless you have a kind of Arty website I like to   work with sun Reef so what I can do I can select 
Sun reef and there are a lot of families that are   sound toef I don't want to have a handwriting 
or display prefer to select nothing over here   so what I also like to do um over here after about 
space and then an i why because my logo has an i   in it with a square as a DOT so I want to see how 
the I will be displayed through all those fonts   so here it is round so let me make it bigger 
what else I can do I can get rid of everything else and say about okay here you see it 
round round round so now I can just go   through all this and when I like something 
I can check it out so this is what I like   real way no need those SS even better so 
what I can do I can select over here Nito   sounds and there you go then I can go to the 
boldness make it a bit Bolder I can make it bigger that's really big so let's not do that 
and I also want to make it less bold I like that   so that's the the the font I want to use use for 
the the menu and for the all the headings I also   want to make use of a body font body text font so 
all the text in my website which font should it have can check it over here and I want it to match a bit with the the 
one I have the nunito sons I can also search   for a font well I know that uh Sons they have a 
lot of great fonts so I open Sons for instance again nunito [Music] Suns PT Suns so I like 
open SS this one so I want to use that for the   text so I go back and I go back to typography the 
base font I want it to be open SS so I copy this   open S select it and then for the headings 
I say nunito S command C or control C copy it so everywhere I place Nito SS I only have to do this once so it's 
not fun to do but you have to do it only once so when I type something on 
my website it will be open SS and   when I create a header or create 
something over here it will be noo SS okay let's keep it with that let's go back to the menu there's more we 
can do right now when I hover over it you see   no change or slight change you can also create 
something like that or like that this one I like   to keep it it as normal as possible so I go to 
type one item spacing you can create more space   between all the elements let's say 30 I can 
stretch the menu like that I prefer not to do   that and then there's the drop down so let's take 
a look at theop drop down I don't like it it's not   in the the The Branding Colors by the way um I 
want to make use of small capital I don't want   to have any capitals over here because it's also 
in small text without capitals so in order to do   that I can go to design click on the three dots 
and turn this off but I'm not there yet I am not   a CSS Guru what is CSS CSS is cascading stal 
sheets without CSS your website is just plain   text and here and there an image with CSS you 
get style things will be published on the right   place in the website so with CSS we can change the 
style of our website and the theme and WordPress   is doing a lot of that stuff so we don't have 
to know anything about CSS but sometimes if you   want to tweak something you can use a little bit 
of CSS well let me show you step by step how you   can do that my latest course uh CSS course was 
in 2007 I don't know a lot about CSS but I know   enough to show you what we're going to do yes so 
it's not going to be too complicated you can just   follow along do exactly what I do and you'll get 
the same results yes let's go I'm not a CSS Guru   but I know a little bit about it what you can 
do if you have Google Chrome right Mouse click inspect okay let's close this first right 
Mouse click inspect and then over here let   me see menu Li okay over here I click and I say 
text transform and I say lowercase everything   is lowercase so what I do right now I grab this 
whole area command or control C closes now I go   to the customizer it's also a great thing about 
the the blocky theme that it has additional CSS   in the free version normally it's in the pro 
version with a lot of themes I paste this   and now this is no more capitals so I want to 
get rid of everything I did not type over here   I only said text trans transform so I don't 
need this what I show over here what I type   over here is overwriting the basic CSS so CSS 
is cascading St sheets my latest course about   CSS was in 2007 so I don't know a lot about it 
anymore but what I know is that CSS makes sure   that your website has a certain sty that this 
background is this color that this is the right   font it's all with CSS so what I say over here 
in the additional CSS like overwrite the menu list menu link to lowercase but here 
it's not the case yet so how can we do   that let me publish it maybe a little bit 
Next Level right Mouse click inspect over   here the sub menu let me click somewhere 
and then again text [Music] transform lowercase okay let's see if it works everything 
lowercase wow scroll up again so here's the   text transform lowercase okay now I select 
submenu and submenu Link I copy those two copy customize additional CSS and then over here 
space when I paste it everything is back to   normal I don't want that so what I need to do 
after this after menu link comma and now what   it says for these CSS classes and these 
because the comma is kind of a plus like   we want to have the text transform lowercase 
also in the submenu it is lowercase so there   was a mini course about CSS if it doesn't work 
for you take a closer look at this if you fill   this in exactly as I have it on my screen 
you should be fine you can pause the screen   if you have done so I hope you have the same 
results I close it okay and then I go to the customizer click over here design 
and then I can make it a bit bigger publish close I want to do one more thing 
about this menu and that is adjust the submenu   because I don't like the colors so let's dive in 
I go to the customizer I hover over here click   on the three dots next to the menu and here we 
can adjust things if I scroll down there are   drop down options so right now when I hover over 
it it appears I can also say when I click on it   it'll appear I prefer hover because that's what 
every website in the world should have and if I   go to design look at this the color is white when 
I hover over it it becomes green that's the second   color and when I make it active so when I click 
on it it will be green the background is dark   I don't want it to be dark I want it to be light 
so I choose this color now I cannot read the text   anymore so I go over here I change this to the 
color three like that when I hover over it I want   the background to be orange in order to do that I 
go to General and I change the item hover effect   to solid color and now when I go to design there's 
another option over here when I hover I can change   it to let's say the yellow color like that but 
then I want the color to be white just like this one and that's what I prefer then I 
want to go to the font family nunito Sons okay and I want to make it bigger I think 16 is fine I can have items divider 
so let's make it um black to to show you how it   looks we can change the way it looks but I prefer 
not to use that so I can say zero or [Music] none   and then over here I want to change those colors 
so I scroll up and then over here I go to design   again color three when I hover over it I want 
it to be orange or yeah uh yellow perfectly in   between when it's active it also be [Music] orange 
and now we have sted our menu okay I close this   this how it looks ladies and gentlemen I hope 
you like this tutorial so far if you do please   like the tutorial that will help me out a lot that 
you're watching this will also help me out a lot   because the longer people watch the better it is 
for the search results the more competitors you   get because the more websites will be made and 
that way we get more competitors but the world   will also become a better place because a website 
is often a place where people offer services and   the more services that are offered to each other 
okay let's let's um while I talking about oh yeah   I hope you like the tutorial what I'm going to do 
right now we're going to configure the header I   like this part I hope you like it too I like 
it even more to work with the elemental page   buer we're going to do that later so if you're 
like this is boring the fun stuff is coming it's   coming closer every minute it's coming closer 1 
minute so now let's configure the header and now   I want to adjust the header how can we do that 
I go back to the customizer before I do that I   want to do two things I want to change this color 
so in order to do that I go to Colors all the way   down and I select the green color that will 
show me how high this header is then I click   on Main row what I also can do I can go back 
and go to General options header look at this   what we see over here three rows on top of each 
other the top row main row and the bottom row   we can adjust those by clicking here so if I go 
to the main row it's the second thing I want to   do I want to go to design change the background 
to White like that so now we can see the height   of the header so let me break it down for for 
you again we have the top row the main row and   the bottom row and every row has three areas a 
left one Center one and the right one right now   I don't see the center one because there's no 
element in it I can drag this element the menu   to the center and now you see nine areas three 
areas per row left Center and right top Center   bottom so now we have our logo at the left our 
menu at the center the search icon at the right   if I go back I see all those elements over here 
so maybe I want to have a button on the top row   as soon as I release it a new area appears 
the top row so now I can adjust the buttom   individually by clicking here or hovering over 
here and clicking here or I can adjust the top   row by clicking here or clicking here so if 
I go to the design area of the top row I can   change the background to Green interesting and 
I can click on the button I can change the label   to contact over here the link is for/ contact 
so when people click over there they go to the   contact page let's do that now they're at the 
contact page I click on the logo and I go back   to the homepage if I go over here to the top row 
I can increase the height of this row I can also   decrease it but I cannot make it smaller than 
this button so if I remove the button and I go   for HTML it becomes even smaller I click on HTML I 
I say call us at plus 31 6 1 2 3 4 5 6 7 8 but the   text is dark that's the only color you can have 
in the free version of boxy now just kidding if   you go to the design tab click on the font color 
make it white then I can change the text I can   make it open Suns or nunito Suns since we're in 
the header let's do nunito I can make it a bit smaller I can go to the top row make the Heather 
a bit higher and to automatically line in the   center vertically so now I can go back what 
else do we have we can have an account people   buy things on your web shop they can have an 
account over here they can log out go to the   profile Etc or we can have a second menu or we 
can have socials like that and if you click on   the socials you can go to design change the color 
in my case to White and when people hover over it yellow like that then I want to go to the main 
row click over here change the height I don't   I don't want to take too much space if you do 
do that and we take a look there's less space   for all the other important information on our 
website so I prefer to keep it as low as possible   or decrease the height so let's say um 70 okay 
maybe bring it back with the arrows 260 let's   say 60 what you also can do with the header you 
can make it boxed so it will be smaller so if I   say command minus or control minus look like this 
or full width and full width means it's totally   from the left to the right doesn't matter how big 
your screen is totally from the left to the right   so you can choose to have that you can also have 
that with the other areas f with the top header   like that or bring it back to default click over 
here default so with a free version of a theme   the blocky theme we can create something like 
this I can bring this to the right again I can   also bring the socials over here then I need to 
change the colors again I can bring this to the   center it's just all drag and drop and if I want 
to have another area the third row I can have a   menu over here and then I can also adjust that 
design do whatever I want because it's my life   and it's now or never I just want to live forever 
I just going to Live While I'm Alive it's my life   I think man that could be a really nice song 
especially when you have someone that can sing   it like crazy yeah let's see maybe I should do 
something with that maybe I should just get rid   of the menu too I don't want to overwhelm people 
with a lot of information I think this is great   for now so uh what you also can do menu over here 
call to action over there since my website is not   that big I don't want to have a search area right 
now so I can do something like that um yeah let's   take that serious I want to have a contact button 
because uh we we we saw the call to action before   so I can make it medium then I can go to design I 
want to increase the Border radius so let's say 25   so it that's nice roundings that's what I want to 
use in my website just like the logo no capitals a   lot of roundings so I want to maintain the sty but 
now I have contact and I have contact over here so   I go to uh the menu I go back I go back scroll 
down all the way menus main menu and then at   contact I can click over here and say remove then 
I can click over here it's I love it the more you   play around with this the the easier it becomes 
to navigate I just really like how intuitive this   beautiful theme is it's by far my favorite theme 
and probably through this tutorial we'll see why   maybe this is the first website you'll make well 
then you get used to one of the best themes out   there especially when it comes to free themes 
it's all really easy to set up if you ask me and   I do my best to show to you so um we started with 
this and now we have this I think we're doing a   great [Music] job want I see here it is aligned 
really nice and here it's not aligned perfectly   let's see if we can do something about that at 
the logo design margin if I uncheck this at the left I want to bring it down to negative so it aligns with this area our header looks 
great if you ask me I think it looks great I   hope you share the same opinion but how 
does it look on a mobile let's optimize   it for other devices for tablets for mobiles 
whenever I create something in my website I   want to check how it looks on different devices 
well I can tell you that menu or the header will   look different on another device so if you want 
to see that go to the header so click over here   on header and then I go to the tablet mobile 
header and this how it looks really clean if   you want to you can still have the upper area 
with the HTML the socials or socials it's up   to you and what you will place on the tablet will 
also be shown on a mobile it still looks great so   I click over here and now I see all these colors 
I see this menu which makes no sense to me in a   random order so what I want to do I want to click 
over here on the mobile menu so what I see here   is decided over here here's the off canvas area 
so I click on the mobile menu then I select the   main menu like that but then I miss the contact 
area so what I can do I can go back I can add   a button here below like that so we still have 
to call to action I want to change the sty how   can I do that while I can change the sty of the 
background by clicking over here the off canvas   area so let's take look we can reveal it as a 
model as a full width or as a side panel left   side or right side the panel width it's the the 
viewport width so if you say 100 it's completely   over the width of the screen if you say 50 it's 
exactly 50% of the width of the screen you can   also do it with pixels I like the the viewport so 
I will leave it with that and I think 50 is great   the alignment I can bring it to the center wow I 
actually like that horizontally you can bring it   to the center I'm okay with this and the padding 
head panel heading do you want to show that it is   a menu also when you close it do you want to show 
that it's a menu well for me that's not necessary   I can change the text but I'm I'm okay I'm good 
then we can go to design I like to make use of a   light men uh light menu and now I need to go over 
here to the mobile menu design color three nunito nunito SS why so bold doesn't have to be 
the case and then the drop down okay that's   can be glitchy but just make sure it's the same 
newo Suns 500 maybe a bit smaller so let's make this 20 and then this [Music] 18 color I want to be the same so when I off over it it becomes 
yellow orange I can have dividers like   that different color of course 
but um I prefer not to have them okay you know what I want to bring it to the 
top so again it's okay like that then I go   to the mobile [Music] menu for the drop down 
what do you want display I'm okay with this   can increase the spacing but I'm good one more 
thing interactive collapse right now I can open   it but why if I turn this off it looks like 
that I think that's better so I go to design   drop down font and I make it 20 and then I click 
on publish also over here seems to be working   great nice animation I'm happy with this I think 
our Heather already is cool but using the bloxy   theme you can make your Heather sticky you can 
make sure that the header will stick with you on   the whole page so if you scroll down it sticks 
with you there are a few different options you   can have I think this is amazing I've been wning 
this since 2015 I had a premium theme that could   do this but there was no free theme that could do 
this and now there is it's called the bluy theme   I'm excited about the bluy theme and um now I'm 
going to show you how to create a sticky header   so what's next if I go to the desktop screen 
we can make this sticky in order to do that we   need to have a higher website so what I will do 
I will edit this page and I go to the dummy text generator I go for 400 words with a few paragraphs 
and then I can copy this text why this text uh   this is text that you cannot get a copyright 
claim for this is text that can be published on   any website without getting into legal problems 
so that can help you to fill in some details   without having any text so we can check out how 
things will look okay now we can scroll so what   I want to do I want to go to the customizer 
I want to turn on the sticky header how can   we do that I can go to the header then over here 
the second tab headers Global header and then I   can add the sticky functionality by default only 
this area sticks the main row like that can be   handy and then you can also say the top and the 
main row should be sticky so they both stick with   you only thing is that the color changes you can 
fix that by going to the top row design and the   sticky State still can give you a dark background 
so now when you scroll it stays as it is if you   would have three rows you can also have all rows 
or only the top row I prefer only have the main   row and sticks with you all the time the effect 
can be default slide down like that or Auto high   and show that means if you scroll down it's hidden 
as soon as you scroll up then it appears this is a   a premium feature with most themes and with the 
bloxy theme this is free and I actually like it   because when you scroll down you're probably 
focus on the content and then you're like okay   maybe I want to go somewhere else and as soon as 
you scroll up it appears so if you want that it's   possible I keep it at the default you can also 
have an offset so I scroll down it will look like   that so you can see through the menu and if I go 
to the top row and I say it's 30 pixels and then I   go back to the headers Global headers the offset 
is also 30 and I publish it and I close it look   at this then you can still see through it in the 
background above the header I like it but I will   turn it back I want my website to be as simple as 
possible header headers Global header and then no   offset I want to turn off the sticky header for 
other devices so over here on the tablet it does   not stick with us if I turn it on it will I prefer 
not to do it so we have a sticky header but we can   do more we can also make it transparent and this 
is something I really like so let me show you what   you can do with a transparent header can you guess 
yes it will make your head transparent okay let me   show you how and then next thing I want to take a 
look at is is the transparent function I turn it   on and this looks weird it it can be shown better 
when there's a background image but uh right now   I just want to show you what it's possible so 
what I will do I go back and now we at the main   row I can go to design and there are three states 
the default one when you don't have a transparent   background the transparent state so right now 
whatever I say over here here's the opacity it   can be shown like that what I like is making it 
partly transparent but then I need to go to the   menu to design and then at the transparent State 
I want the text to be light on have over it I want   to be yellow now I go to the logo and now this 
is the power of Blocky again maybe I'm talking   too much about how much I love this theme for me 
I don't need a premium theme this theme is doing   a great job the transparent State logo while 
I have a light logo I go to upload fils select   files logo white so when I have a dark background 
or a transparent background then I can make use   of this logo but when I scroll down I want to use 
another logo so at the sticky State logo I want to   have the dark logo again look at this it starts 
like this and I scroll down the logo changes really nice and this can look beautiful when you 
have an image in the background but we'll talk   about later when we start to use an amazing page 
builder so so far so good the only thing I don't   like is when I scroll down the logo becomes a bit 
smaller what's the case I accidentally uploaded   the wrong logo so I go to the logo and instead 
of uploading the SVG at the transparent State I   uploaded the PNG over here so I delete this one 
upload fils select fils and I go for white.

SVG   so it's it's the best when you have the same 
sizes for the logos you upload so logo white   PNG is exactly the same size as the other one 
so with SVG is the same so logo white. SVG open it and now it's exactly the same some 
people I don't know why but a lot of   people in my tutorials with the bloxy them say 
they they seem not to have the transparent and   sticky menu options well if that's the 
case I think there's only one solution   and I think that there could be one case and 
that is that you don't have your own domain   name with web hosting but that you use the 
wordpress.com version the free one in that   case it's not possible but when you have your 
own domain as shown in this tutorial or your   own web hosting you install the free version of 
Wordpress and you have installed bloxy and the   companion plugin you should be fine okay are 
you happy I hope you are let's take a look at the tablet view I should be able to change 
this so I go to design and in a   transparent State I want it to be this 
color default State when I hover with orange but um I just showed you what's possible 
I want to bring it back I don't want to have this   logo like this so in order to do that I go over 
here sticky is okay but transparent no thank you   and everything will be fine what else go to the 
customizer I don't want to have the top bar so I   can go back over here or I can remove it over 
here and I don't don't need the socials I keep   it clean and simple this is it my logo my menu 
and the call to action what I see is that the   the width of the website is really wide I want 
to adjust that so I go to customize there's a   perfect size for your website in order to get that 
we go to the general options General layout and I   change the width of the website to 1120 it's in 
my opinion the best site you can have so that's   it about our header ladies and gentlemen we're 
getting to a place where we are going to install   a page builder we we have installed WordPress 
man you've done so many things already you have   a domain name you have web hosting you installed 
WordPress you installed the bloxy theme you   configured the bloxy theme and now we're going 
to work with a page builder why Elementor in my   opinion Elementor is the easiest in my opinion 
is also the easiest and best page builder there   is right now I know there's a page builder that 
comes with uh WordPress itself I think it's not   there yet but Elementor is Elementor I've been 
using it since 2017 and when I started using it   for the first time it was like wow this was 
the tool I was all always searching for I've   been making websites for clients and sometimes 
it took me days with CSS and trying things to   to make something happen and with Elementor 
it was it was so intuitive so easy and man   I love it it's free there's a pro version but 
in this tutorial we're going to talk about the   free version I will also make a tutorial about 
the pro version I think bloxy free bloxy theme   combined with Elementor it's an amazing deal 
we're going to make an amazing website using   free tools so so uh let me show you how to 
install Elementor in order to get Elementor   the best free page builder in the world we go 
to 30 corp.com elor hit enter and we will be   redirected to a page with prices well Elementor 
is free but they're also really good in hiding so   there must be a free plan or a free page Weller 
somewhere but I can't find it if you can't find   it either then we can go to the back end of 
our website to plugins at new and search for Elementor and there we see the free version of 
Elementor so I click on install now before I   do it by the way 5 million installations 
updated 3 weeks ago compatible with our   current version of WordPress this page 
builder makes it easy to make websites   I love this page builder I've been making 
website since 999 with HTML and stuff and   then I found a theme in 2015 that made it 
easier for me to make websites and then in   2018 I found out about Elementor and that was 
like wow this is next [Music] level I clicked   on the install and then I click on the X I don't 
need to configure this so I click on the X and I   go to the screen options and I uncheck this it 
can be that sometimes you get an up so I go to updates I update the Blacky companion I go to the other update that's the 
theme blocky update the theme what we see over   here is Elementor super cool so if I go to my 
website I can edit the page and now there's a   new Option I can edit the page with Elementor 
so that's what I will do I click on edit with   Elementor now the Elementor base Builder will be 
loaded sometimes there are new things and they   give you a notification I close it and ladies and 
gentlemen welcome to the Elementor page builder   before we're going to build things in Elementor I 
want to set it up in a certain way so we can work   more efficient so maybe this a bit more boring 
we we just need to set it up in a way that we   in the long run we will be more productive so 
um how long will will take I don't know a few   minutes maybe 10 minutes I don't know actually 
but um it's worth it and after that the fun is   uh coming then we're going to create things 
yes okay let's continue before we get started   I want to configure a few things so we can work 
more productive I close this I don't need this   I click on update what I want to do first I want 
to make use of the top bar there's a new top bar   layout and I want to use it in Elementor pce 
Builder so in order to go there click on the   three lines if you see them click on exit then 
I select the wp dashboard that means if I exit   Elementor I go to the wp dashboard to the back end 
leave the site so what I want to do I want to go   to Elementor settings we're going to talk about 
disable default colors and disable default fonts   right now I want to keep them checked and later 
on I will configure this so I can show you what   I mean features I scroll down and I'm searching 
for the editor top bar and I turn it to active   and I scroll down see if there are other things I 
want to be adjusted well that's it I click on Save   the changes and now if I go to the website and I 
edit it with Elementor look at this now there's   a top bar over here so this is the elemental 
page Brer with a top bar at the left we have   elements so I can drag a heading to the website 
an image a video text editor and a lot of other elements here at the right we see structure some 
when we've created our page or we are building our   page we see the site structure over here that 
can help you to navigate through your website   but before we're going to dive deep into this I 
want to do a few things the first thing I want   to do I want to click on the elemental logo then 
I want to go to the user preferences and if you   want to you can make the interface of Elementor 
dark I prefer light but it's up to you what I   want to have is editing handles if I create a 
new container clicking over here and I want to   duplicate it I cannot do that I want to be able 
to do that so I turn those on by clicking here   user preferences editing handles and now there's 
another option and I can duplicate things it makes   things easier then I want to go over here to the 
site settings and then I want to go to layout the   the first thing I want to do the content width 
I want to align it with the bloxy content width   which is [Music] 1120 then there is container 
padding let me illustrate it to you I save   the changes if I close this and I create a new 
container we're going to dive deep in containers   later but right now if I create a container and in 
that container I add anything so let's say another   container what I see there's a petting over here 
there's a space if I drag another container over   here there's again some space so every time if I 
import something there is some space around the container and I don't want that I want to because 
now if I would uh add an image that image is   not aligned here at the left it's over here why 
because by default there is 10 pixels of petting   when you insert a a new container but that's not 
good for the look of our website so in order to   get rid of that I go to the side settings to 
layout and container padding is zero but let   me show you something I save this if I drag an 
image over here and I go to the tablet view I   want there to be more space over here that looks 
fine if I go to the mobile view that also looks   fine so what I don't want is that those images 
are totally here against the side because that's   not good for the look and VI of your website so 
right now it seems to be great so I don't change   anything if later in the tutorial I see that 
things are looking weird on a mobile or on a   tablet I will go to the settings over here layout 
and then I can adjust the container padding okay   I go back to the desktop view I scroll down by 
default I don't want to see this home title if   I go to the about page you see about Services you 
see services I don't want that so in order to fix   that I go to the side settings layout I scroll 
down I go to the default page layout and that's   not the theme but element are full width save 
the changes if I go back to the editor publish   and I take a look over here on the eye so I 
can see the result there's no more home over   here so that's what I want what I can do now 
I can click here exit to WordPress edit with   Elementor again and now also here there is 
no more title something else I can do if I   go to the side settings layout I can also say 
it needs to be a canvas what is a canvas it   means that it has no header footer from the 
thing theme so if I turn that on Save the changes and exit to WordPress go to the website 
now there's no header and no footer that's not   what I want I want to use the header and the 
footer of the bloxy theme we're going to talk   later about the bloxy theme footer I edit this 
with Elementor go to the side settings and in   the beginning it can be overwhelming like whoa 
all those settings all those options but the   more you work with this the easier it becomes 
I go back to layout and I change it back to   FID save it what I see when I exit to WordPress 
I go to the post I don't want that I want to go   to the dashboard so I go back to Elementor 
then I go to user preferences over here and   when I exit I should go to the wp dashboard 
publish okay I go back over here this is an   element I hover over here and I can remove it 
I can also remove this container then I want to   go to the side settings again this time I want 
to go to the global fonts and we don't want to   use these funds actually but I can do for just 
to make things sure set everything to open SS   copy it select it second one paste it select it 
the third one why don't we use it we want to make   use of the [Music] fonts in the bloxy theme 
I don't want to use the St guide then I save   the changes then I go back what I do want to use 
over here the theme Styles so I go to typography   text color I want it to be the third color but I 
want to use colors from the bloxy theme I cannot   see those I will come back to that in a minute 
right now the typography I want it to be open   SS and then for the links I just want to inherit 
the default font because right now this is the   default font then for the typography then for the 
age1 until age 6 I want to make use of nunito s so I go to H2 newo s copy select select first thing I only use H1 H2 and 
H3 those are headings and when you have a   heading your website Google knows okay that's a 
special piece of content so there's only one H1   in the website that's the title of your website 
often then we have other title it's H2 and if a   title that's less important I use H3 we'll talk 
about it let's take a look at the text colors   if I close this and I drag let me get rid of 
this and get rid of this publish if I drag a   heading over here I go to the St if I click over 
here I can see all those colors here the theme   pallet colors I don't want to use those four 
colors from Elementor I want to use the colors   from my theme so if I select this one it will 
become orange so that's why I don't talk about   those colors but just to make things sure we 
can use the same colors so first I need to go back grab this color and go to to 
the St Global colors primary then   I go back save it I go to the second color copy it secondary color okay [Music] then I go to the third color copy I want to use it for the latest 
two colors so Global colors the third one and   the fourth one just as a backup but 
we're not going to use those colors   I go back and I go to typography 
text color I want to be the same color one I just chose the third color in my color 
palette from the bloxy theme so now we've set up   the colors font in our website now I want to take 
a look at the page builder I close this close this   there is so much to tell about Elementor there are 
so many things I can explain to you at the same   time but then you will be overwhelmed because 
there's a lot to learn so I will start with   the basics of the basics I will show you how to 
drag elements into a container and how it works   with three tabs and how to sty things after that 
we're going to do another basic tutorial on how to   pos position things we have done those two basic 
trainings then we're going to put it into practice   and we're going to start building our websites 
but now we going to learn it so normally I watch   tutorials on double speed or 1.5 speed I think 
this is the moment to put it on speed one just   the normal regular one and then um learn it good 
luck if you get overwhelmed like okay this is not   for me I'm going to quit can I please advise you 
to continue because um it it takes a bit of time   to learn this the way you learn it man it's 
going to help you to create amazing websites   and I'm here for you if you have a question you 
can leave a comment I do my best to answer them   to be honest I'm not that activated because I get 
so many comments but I do my best is it enough is   it fair okay I hope my tutorial is sufficient 
yes okay let's uh let's start with the basics   of the basics of Elementor as I said here at the 
left we have all the elements and we can place   those elements in the container this for the pro 
version so I close set but all those elements can   be used within the element or Page Builder and we 
place them in containers so if you want to create   a new container there are few ways to do that 
you can click on the plus and you can choose a   certain structure you can have a container with 
two containers in it one at the left and one at   the right we can have a container with even five 
parts like that and if you click on the plus then   you can drag images in it click on the plus text 
click on the plus Google Maps and that's actually   how we create websites but the great thing is 
we can St everything of course so let's start   from the beginning I showed you how to create a 
container like this but what you also can do you   can drag a container over here or you can drag 
your first element over here and then it also   creates a container around it so what I prefer 
is just to use this one click on the plus and   then arrow down or Arrow to right and then I can 
say Place everything all the elements below each   other or next to each other if I say below each 
other I can click on the plus and I can drag   a heading over here then plus I go for a button 
I can drag it like that and if I see the purple   area I can release it and then it will be placed 
so if I want to have a third element an icon for   instance I can drag it in between okay it's in 
between now if I release it it will be there   so how does it work for every container and 
every element there are three tabs over here   the first one is the content so right now I'm 
selecting the icon element the icon element has   different information here at this content area 
then a heading when I've selected a heading I can   add a title URL line it with an icon there are 
other options and with a button there are also   other options so based on the element there are 
different options in the content area the same   goes for the St so here we can change the content 
we can change the heading title of your website   here we can change the content by chasing the 
icon do something else and here we can change   the content by changing the text of the button 
subscribe by the way if you like this content   feel free to subscribe to this YouTube channel 
I create more WordPress related tutorials and I   show you how to create websites that can help 
you to make money online how cool is that I   think it's really cool especially when there's 
an honest guy just telling you the truth instead   of selling you anything and I'm referring to 
myself of course I can link it to my YouTube channel I can say say it should be opened in a new 
window publish so that's the content I change the   content of three different elements but we can 
also change the St how by going to the second t   so with the title all those options over here at 
the style are also based on the type of element   you have over here so for the title I can change 
the text color so let's say the primary or the   theme pallet color one for the icon I can also 
change the color to this light color over here   when I hover over it I can change it to Orange 
as I said I prefer not to use the primary color   so I use theme palet color one for the button I 
can also change the style background I can even   create a gradient color one this one color two 
can be the light color wow that's really ugly   that also so let's do accent color okay and then 
I can change location can change the degrees so   that's part of the St and then there's the third 
T Advanced and that's the same everywhere we can   talk about margin pedding aligning position motion 
effects transform we're going to talk about those   options but that's not all we can adjust the 
elements but also the container which contains   those elements so let me show you something 
right now the main background of our website   is green that is because of the blocky theme 
we configured it like that but I can give this   container a different background color so I can 
go to St background type I can say this should   be almost white but then I can go to the icon to 
Advanced to background I can say I want to have a   dark background again and I also want to change 
the sty I want to give some space over here on   top and below this icon so I can go to Advanced 
layout and then at ping I can say 50 then I can   go to the contain and I'm like the the title is 
totally against this line and below the same so   I want to give it some petting so I also say 
over here 50 so you see we have the background   of our website then we have the background of the 
container and then we can have a background of an   element and all those options combined can help 
you to create amazing websites and I will show you   step by step how to do that we'll do it in a way 
that it will keep your website light and keep in   mind that there are multiple ways to do things 
in Elementor so there's no one perfect way but   I think there's the best way and now what I want 
to do I want to show you the best way that keeps   your website light and fast so that was a small 
introduction uh let's talk about this area over   here if I say command or control P I can see how 
the website will look I can publish it by clicking   here if I want to see the result of what we have 
edited so far I can click on the I the cool thing   is if I change something over here I change 
this color to green and I publish it without   refreshing the page it is updated so that's how 
I prefer to work so I can say command P control   P or I can click over here and see the result 
but what I prefer is to adjust something over here and then check it over here and I like to 
make use of the Navigator so let me show you the   Navigator or it's also called called structure it 
was called the Navigator now it's called structure   so if I click over here if you have a big screen 
you can align it to the right I prefer to make   it float so what you see over here I have the 
container and in that container we have three   areas The Heading the icon and the button I 
can also double click call this the hero the   hero is the first area the first container in 
your website and in that way I can keep things   structured and organized so I can collapse 
this if I create a new section or sorry an   container it was section called section before 
now it's container so sometimes I say section   I mean container I create a second container 
and then I can say R Services hit enter and   then that way through the structure area I can 
keep a structure in my website and see where I   am at so if I select this I see the options over 
here so I like the the structure panel I always   use it leave it open somewhere unless I want 
to adjust something over here then I collapse   it and then I can bring it back by clicking here 
and if you click over here look at this how many   cool keyboard shortcuts there are if you want 
to undo something command Z redo it command   shift Z and depending on where what kind of 
platform you are maybe you're on a PC maybe   you're on a Mac it will show the right keyboard 
shortcuts saving it also nice command s and my   case so it says command I so if I want to have 
that command I and there it is so if you learn   those keyword shortcuts it can become really 
easy for you to navigate through your website   okay so what I will do I will get rid of this 
I get rid of this so now if I say command I I   see the structure and there's nothing here I 
can click I can say command s now it's saved   so if I go over here it's gone what I want 
to do now I want to go to the customizer go to colors and make the side background white 
completely white publish close it awesome and now   let me close this and click on edit with Elementor 
now I want to start building and show you how the   container works are you ready I hope you are 
let's get started we're going to talk about   the basics of positioning things and when you 
got that basic information then we're going to   create our homepage yes let's go right now we're 
on the homepage but I want to practice somewhere   else so what I can do I can say command or control 
e that brings me to the finder and now I can say   add new page then I see that option over here add 
a new page that's what I will do then I go to the   settings over here page settings I call this one 
practice and then I click on publish so now we can   practice with Elementor so the first thing I want 
to do I want to click on the plus I want to create   a container with elements that goes to the right 
like that now I want to click on the plus drag   an image over here I want to click here to select 
an image upload fils select fils and then I go to   images tutorial web Define practice and then say 
command or control a so I select all the images I   open them and I select the first image select now 
I can say right Mouse click duplicate or command   or control D like that then I click on the second 
one and I change the image to two then I change   the third image to three and I think you know what 
I'm going to do right now I'm going to change the   fourth image to the fourth so how does it work 
with the container well if I want to select the   container I hover over it I select it over here 
I can click on structure there's the container   what I see in my container I have four Images so 
when I select the container and I go to layout I   see a few options over here the first one is the 
content width right now it's boxed that means it   is within the width of the website within the 
1120 pixels so it starts here and it could end   here so if I would replicate it again and again 
you see it's totly from the left over here to   the right that's what I prefer but if I go back 
to the container and I say it is full width that   means that it will use the whole width of your 
screen look at this so it goes completely from   the left to the right so if you have a really big 
screen it will still stay completely at the left   until the right well that's not what I prefer 
what I prefer is to have everything within the   Box well it can be in some cases when you want 
to have a text area you click on the plus and   then you can select the text editor you copy and 
paste the text a few times it can be that in this   case for the container you have the content with 
boxed but the width you can change it to let's say   7 100 pixels because reading a text like this 
completely from the left to the right that can   be a less fun experience then when you decrease 
it a bit so in that case I change the width but   most of the time I I leave it as it is so I go 
over here boxed and then the width I keep it at   1120 so it aligns perfectly with the rest of my 
website so let me get rid of the two extra fours I go back to the container so we have the content 
width and the width most of the time I leave it   with boxed and 1120 then there's also the minimum 
height well right now I will increase that what   you'll see this line this purple line or pink 
line it will increase so now you see the height   of this container it's now 500 pixels in height 
in order to make things clear more clear I go to   The Container second T and I want to give this 
a dark background so I go to background normal   click on classic and then I can choose a color 
I choose one of the global colors the second one   from my bloxy theme okay go back to the layout 
so we have the height if I increase it you see   it increases if I don't want that command Z or 
control Z on the PC so look at this direction   justify content and align items this is really 
important we're not going to use everything so   so I will make it a bit easier for you for 
instance over here at Direction let's start   with Direction you know there's only one direction 
written on the walls are the stories that I can't   explain okay let's continue the direction is 
from left to right at this moment that's what   you see one two 3 4 but I can also change the 
direction from top to bottom vertically 1 2 3   4 then there's the third option I never use 
this on the desktop I can use it on a mobile   and on a tablet but we'll talk about it later 
on the desktop I only use horizontal vertical   if I would say row reversed then it starts at the 
right and goes to the left 1 2 3 4 and if I say   column reversed then it goes from the bottom 1 2 
3 4 towards the top so look at this look at this   area and this area when I click over here or when 
I click over here based on the dire direction also   those directions change well let's start with the 
horizontal right now we have 1 2 3 4 from left to   right I can click over here but nothing changes 
because by default this first option is already   active so if I click here nothing changes if 
I click on Center then horizontally based on   the direction everything will be centered and 
now if I duplicate it it will still be centered I can also align it to the right or to the 
end well then there's the fourth option that   is space between this an option I like that means 
that the first element is totally at the left and   the latest one is totally at the right and that's 
how it stays so if I add something the space in   between becomes smaller but the first element will 
Al always start here and the latest one will also   end here that's what I like so I also use that 
option then there's also the option space around   right now those three spaces are evenly so so 
the width of this area is the same as here and as   here but when I say space around that means that 
around every element the space at the right and at   the left is equal so now we see this space this 
space and this space but also here at the right   and here at the left there space why because this 
is not one space this is 50% of the first element   and 50% of the second element here at the left 
and at the right that's why you have 50% of this   space here at the left and here 50% at the right 
then there's another option space evenly and that   means that all the spaces have the same width so 
this space has the same width as this one and this   one as I said I almost never use those two options 
so for me it's horizontally or vertically and then   those four options same goes over here I can have 
it at the top okay let me make this a bit higher   so I click over here make it 700 so there's a 
little bit of space let's make it 900 so right   now since I changed this also this changed so 
now justy content by default it's at the top   but if I select the center it will be vertically 
aligned in the center so this space is the same   as this one then I can bring it to the end so now 
everything is aligned towards the bottom but now   if I would say space in between that means that 
the first one will be here at the top the latest   one here at the bottom and the space in between 
is evenly divided so let me show you that and then   the other two options here's a bit more space 
and there is a bit more space so that's how it works bring it back and and then we have the 
other option because right now we're talking   about horizontally alignment at the left in this 
case but we can also have vertically alignment   based on the row or the column so if I say 
start nothing happens but I can also align   everything vertically in the center like that 
or at the end or I can stretch it well stretch   is something I'll talk about right now but I 
need another example for that so really quick   uh let me build something you don't have 
to follow through but let me show you how   I would do this everything goes down so here's 
that area now I go to the plus and I want to   drag three elements over here so the first 
one it's a container in a container you see   that by the the tab so it's a little bit more 
to the right this container I want to place a   heading in it and some text then I go to this 
container I want to go to the St background make it dark go to Advanced padding as I said you 
don't have to follow through we're going to talk   about all these things adding 20 so that's 
the the space in between this section okay   now I want to duplicate this twice I can also 
do that over here duplicate it and duplicate   it then I go to the container that contains 
the other three containers this one I bring   it from left to right like that great but now 
look at this if I make this text longer copy paste let's paste it again by default if I go to 
the container that contains the three containers   by default if I select nothing the alignment 
of the items is stretch that means if this has   a certain height then this will stretch with it 
but what I also can say align everything to the   top or everything to the center or everything 
to the end but if you say stretch in some cases   it can be really beautiful because then it 
just fits better in the sty of your website   so that's where where you use stretch and I 
just want to show you the example and maybe   you're like 30 why are we playing around with 
numbers I will never create something like this   I know but I want to start from scratch we're 
just scratching the surface I want to show you   step by step how everything works so step by 
step we're going to increase the difficulty and   if I do like that I think you can follow along 
if I dive deep from from the start then maybe   you're like okay this is too complicated and 
I can lose you I don't want that so that's why   I start with simple images but you can add 
images but look at this you can also add a container you can also add a [Music] heading and 
now if I change the Stell there's a number then   there's a container and right now everything is 
below each other but in this container I can add   a button and I can add a another button or I can 
duplicate it and they're below each other but now   because this is a container I can do the same 
thing and this time I say no I want them to be   next to each other and aligned in the center and 
that if you combine elements with containers then   the power of Elementor becomes really big and 
you can create almost anything you can imagine   but I just want to start from scratch with a 
few simple images so let me get rid of this   now so a few more things I want to show you we 
talked about Direction right now they're going   down justify there uh at the start I can also 
bring them to the center Let's uh keep it with   the center and then I can align the items left 
right or in the center what you also see this   area over here that's a gap of 20 pixels if I 
increase it let's say 50 it becomes 50 I can   also say zero then everything will be attached 
to each other also when I do it like this so by   default I prefer 20 and that only applies when 
you use those three options or those three when   you start to play around with stretch then those 
20 pixels do not apply anymore so um but you can   increase that or decrease that I prefer 20 so 
I talked about these things but what you also   can do you can adjust the style individually or 
the settings so for image one I'm okay image two   I can say you know what I want to align it over 
here at the center so I go to Advanced and then   over here align self I can say I want it to be 
in the center and for the third one I I want you   to be at the [Music] bottom and now I can still 
go to the container and change the order then   over here I can say I want you to align self to 
the left okay and now let me show you something   it's just a teer what you can do and that will 
make it easier for you to create the design you   have in mind now I can go to the margin margin 
I can uncheck this and then go to the top with   a negative value value my wife always says very 
the word you say value you don't say it right I   I often say value and I try to say value sometimes 
har he I'm doing my best so now you can adjust the   design Pixel Perfect so over here I could say top 
margin well I prefer not to do that over here I   can go to the section and say by default I want 
to have a padding of 50 pixels so there's a bit   of space on top and space below and by the way if 
I go to layout and I change the minimum height to   nothing then automatically the padding will decide 
how much space there is over here and here so if I   increase this then you see more space over here 
and the same space is over here but also at the   right and at the left and that's not what I 
want so I would uncheck this and then at the   top I would say 90 at the right zero the bottom 0 
and the left zero because I prefer to keep those   alignments so that was a a teaser we're going to 
talk about margin ping and align self so this the   prti page I can say command or control S I can 
say command or control p and then I see how it   looks or I can click on the ey and then I see how 
it will look so these are the basics of Elementor   I will leave them with that what I can do Now 
command E I can search for the homepage by by   typing home I can go to the home page or to the 
home page this is the front end this the back end   this is editing this is the side so I click on 
homepage leave it and now we're here now ladies   and gentlemen we talked about the basics now 
we're going to put it into practice so now it's   finally getting started so we have the basics 
now I hope you understand it and throughout the   tutorial we're going to dive deeper deeper step 
by step so we're going to start with creating a   hero that's the first part people will see when 
they enter your website and then step by step I'm   going to show you other things I'm going to show 
you more advanced things and at the end of the   tutorial you'll have an amazing website and you 
can consider yourself to be an elemental expert   because I'm going to show you so many things 
but first first we're going to create the hero   so let's do that right now so I want to create 
the hero for our website that's the the first   thing people will see when they enter our website 
so I click on the plus and I want to have an area   with two columns so I choose this one now I want 
to go to the sty and I want to choose a background   well there are four backgrounds you can choose the 
background type the first one is the classic one   just a color actually there are five you can just 
choose one color this one for instance or you can   choose an image I already have all these images 
because I recorded this part later I choose this   image now if you want to follow along you can go 
to upload files select files images tutorial web   Divine business and choose one of those images 
these images by the way I will check if they   are not from Io if they are I cannot share them 
with you so then in that case there will be other   images that are royalty free that can be found 
on pixels or pixabay.com and those images can be   used for free without you getting into trouble 
I go to the media library I choose this one I   select it then I go to display size over here 
and I choose cover I go to the layout for the   sake of the tutorial I will bring this back later 
just want to show you something so I can have an   image as a background then I can go to the style 
background I can also choose a gradient that's   what I want to do so let me come back to this 
later I go to video you can upload a video or have   a video link over here so let me show that I go 
to YouTube I search for GoPro I don't know which   is the newest one 12 already okay right Mouse 
click copy the link address and then I paste it here now it says Go Pro in the beginning I don't 
want that so what I want to do I want to start   after 12 seconds that's also okay let's go for 
15 so at once it starts with this I can also   have an end time I can play it once I can let it 
play on mobile I can have a background fallback   image so if the video somehow doesn't work I can 
have an image that will be shown instead of the   video but it can be if you have a heading over 
here that you don't see that well first of all   because it's dark but then if you have a light 
background you don't see that well so what you   also can do with every background you have so 
I select the container style background you   can have a background overlay so I can choose a 
color I can say black then increase the opacity   so I can still see the heading if I bring this 
toly to the left you see the whole video if I   bring this toly to the right you see this color 
over here you can also have a gradient so you   can maintain the style of your website so if I 
would say color two and color three I can change   the angle bring this back so I can combine it and 
then the latest thing if I go to the background   and I get rid of the video I can go to a slideshow 
so I can add multiple images select them insert   the gallery I can config it so let's say every 
second it will change just for the sake of the tutorial so you can also have something 
like like that how cool is that and   then there's one thing I really like 
that's the can Burns effect look at this a small Zoom I really like it I almost 
never use it I used it in 2015 then it was   really hip and cool right now uh in some cases 
I would use it but in my case I don't all those   Imes also take up space for your website or 
make your website a bit slower so color or   an image or a gradient or a video or a slideshow 
well I want to go for gradient but first let me   bring this back go over here to layout remove 
this over here get rid of this color and then   go to the overlay and also get rid of that so 
now I go to the background gradient I choose   the first color which is color two second color 
is color three I change the angle and right now   it's a really nice gradient but I also can 
change the location if I would say 50 over   here and also 50 over here it will be a line I 
can also change the angle then so I can create   something like that I can change it type from 
linear to radial and then play around with the   gradient so I bring this to zero 100 type is 
linear and the angle is 90 and what you just   saw we saw an image and that's a stock image so 
what you can do in order to get images for free   pixabay.com and there you can find a lot 
of pictures so I can say B business group people those are stock images the upper 
ones from iock and these are free ones   so the quality is obviously less you can 
get this for free can download it and use   it and if you want to go for the real stuff 
which I highly suggest you do you can go to   30 corp.com for/ iock hit enter if you search 
for business group group people look at this   quality is so much better so let's say you 
go for this image it cost three credits that   can be up to $27 maybe more maybe less maybe 
think that's so much money but think in ways   of how much can this make my website look more 
professional and give you more business for me   it's worth it I don't even think about I have a 
subscription for a thousand pictures per year I   think and I use them on my websites websites for 
clients because the website becomes better with   high quality images but if you want to prefer uh 
the freeway you can go to pixabay or pixels.com business business group people those look uh okay so you can use 
something like this for free close it   close it so that is what you can do then 
I say command or control I it's called a   container this area I want to rename it 
double click hero I have a left area and   the right area then I want to click on the plus 
and I want to go for a heading and drag it over   here and I want to change the text and keep 
in mind what is the goal of your website I   can say welcome to this website please 
don't say that take a look at the best   websites in the world they they spend Millions 
probably on advertising and optimizing their website so over here I see something 
and then learn more there's a call   to action over here iPhone this 
is normally the the the landing   page iPhone Pro Image learn more or 
buy so what I see also with Tesla beautiful image two options learn more or custom 
order so some people are ready to buy they click   on custom order some people are ready to buy they 
click on buy some people are not ready to buy but   they are interested and those people can click 
on learn more so it's not like buy and nothing   and if people don't want to buy they're gone 
no people that are not ready to buy they can   click on learn more so I take look at the best 
websit in the world and I want to learn from   that instead of spending thousands of dollars 
or millions of dollars to optimize my website   so I want to have two call to actions and learn 
more and another call to action we going to talk   about it in a minute and right now there's a 
title that should help the visitor to see what   our company is all about so I will say we make 
websites that generate customers really simple   let's keep it with that then I go to the St I 
want the text to be light so I go for this one   I want it to be H1 so I go to content H1 you can 
have only one H1 in the website and this is the   one I want to use and then I go to The Container 
settings because there's no space over here so I   go to Advanced I uncheck this area at the padding 
and at the top I say 60 at the bottom I say 60 so   I have a little bit of breeding space okay next 
below that I click on the plus I want to have two   call to actions the first [Music] one okay what I 
want to say over here is learn more and then I can   talk about our services page what we offer we dive 
deeper into that subject on the servic page and   then I want to have another call to action I'll 
talk about that in a minute so I go to the Stell   and let's see typography by default for buttons is 
already the right one text color is also great the   background type I want to be a normal color which 
is this one if you take a look at my other button   contact it's also with beautiful roundings just 
like the logo so I want to do the same over here   the Border radius let's say 25 perfect and when I 
hover over it nothing happens so I click here on   the hover tab then I can change the background 
color to the green one now it looks like that   publish I can say command P now we see how it 
looks so far so far so good can also click on the   eye perfect now I want to have a button next to 
this area so I duplicate this but what happens it   goes below why if I take a look at this container 
layout the direction is down so I can say you know   what I do it from left to right but then all the 
three elements are from the left to the right and   that's not what I want and that's a problem we 
cannot fix unless you get Elementor Pro now just   kidding you can fix this how can we fix this 
right now everything is going down again click   on the plus I drag a container over here then I 
drag this in the container just like the other one so it look like that and now if I take a look 
at this container I can call this container to   buttons I can say to this container layout go from 
left to right and that's how you can fix it that's   one way to fix it there is a better way I'll 
talk about it in a minute so I click over here   I say get in touch that's my call to actually 
my main one and I don't want to have the same   color so I click over here then I want to go to 
the Stell and instead of having this background   I want the background to be transparent nice 
and I want the background or I want the button   to have a border so over here border type I can 
say solid but the more I increase this the more   it does not align with the other button so let's 
say two pixels so what I need to do now here at   padding if I would say zero it's not aligned 
with the other one but if I increase that step   by step I can see where it is aligned so now 
it's aligned when I hover over here nothing   happens so I click over here go to hover and I 
can change this to a lighter green so I click over here so you see a distinction so like that the only thing 
I see there's more space over here at   the left and at the right here is not so 
I go to the padding uncheck that and then   at the right I can say 25 at the left I can 
also say 25 if I want to see if it works I   click on the container put below each other 
they're not perfectly aligned so I go over here let's say 26 I go over here again place them 
next to each other and that's the way the cookie   crumbles so if we take look at the structure over 
here we see we have one hero that contains this   whole area in that hero we have two containers 
in the left container over here we have a text a   heading and another container and that container 
contains two buttons here at the right we also   have an empty container and I want to fill that 
so what I can do I can click on the plus search   for an image or if I want to show multiple image 
I can go for an image carousal I drag it over   here and as I said before every element has their 
own functionalities so here at content I can add   multiple images so I click on ADD images I want to 
use two images that have the same height and width   so I go to images tutorial web Divine homepage 
and this is console delivery full resolution and   this is the reduced size 1200 pixels open it so I 
select it study.com copy it paste it paste it the   second one conso delivery.com copy it paste it 
and paste it it's good to to copy the title to   the alt text and description and if you upload an 
image please don't uh name your image like this   IMG z0000 Z or 0 one because this is literally 
what people upload and that's how you can be   found weird images so always rename your images 
so if you take a look at my folder if I go to web   Divine homepage you see console delivery stud me 
business Los Angeles web design web design agency   California so also in my images I use titles so 
always do that and never leave it to IMG 00001   because you can be found through images based on 
your title so use keywords in your titles okay I   have two images create a new Gallery insert the 
gallery and this this is how it looks by default   so we're going to change it the image resolution 
I want to make it large like that how many slides   do I want to show at the same time only one yes 
do I want to stretch the image no do I want to   show navigation arrows and dots no so I say none 
great then I go to additional options Auto playay   yes and every 3 seconds I want to see the other 
image like that but not in a slide but I prefer   it to fade so let's take a look over here one two 
three okay but I want the fade to be slower one   second so one 2 three better that's what I want 
great so I go back over here because what I see   tell out I want to align the content to the center 
like that so it's vertically in the center that's   what I prefer okay so what I have right now if I 
go to the structure a hero with two containers and   in the right container I have an image but what 
I also can do I don't need a container because   containers and elements can be next to each 
other in a container so this is just a waste   of the unnecessary code that will be created for 
this unless you want to give this a background   so if I would say um dark and advanced ping 50 
then you can use a container but even then it's   not necessary so what I will do I can drag this 
to the left and now I can get rid of this one so   now I have this area at the left this container 
and this area at the right great okay then I go   to the first container the the width is 50% so 
over here I should also say Advanced with it   should be custom and in this case 50% perfect if 
I want it to be smaller I can make it smaller but   then do you see what happens it's not aligning to 
the right well what I can do I can click over here   go to Advanced and click on size and then grow so 
now what happens is that based on this width this   will cover the rest because I said it needs to 
grow so if this is 30% automatically this becomes   70% well that's not exactly what I want the great 
thing is when I go over here and I increase this automatically that will adjust well I don't 
want this image to be too high or too big so   I see what I want want and then over here 
this is a small trick what I can do I can   go to pting uncheck it and then at the right I 
can increase it what will happen the generate   over here will go away when I increase it see 
what I'm doing with the pading I'm saying the   space look at this when I half over 10 you see it 
I'm saying the petting this area there should be   space between the outer area of the container 
and the element and when I do that then this   area goes more to the left it will be pushed 
because this word is longer than this area   so it goes to the next line that's how I can 
fix it okay so far so good I want to go over   here to advanc I want to say you know what 
make this 120 and 120 so it takes a bit more space and then I think you know not it can be 
a bit bigger so I go to Advanced I increase it again and I'm happy if I would go over here 
advance sorry um I go to The Container if I   would say zero okay that means that I still 
need to have this pading I thought maybe   because I pushed this or made this bigger then 
this automatically would go to the second row   so if I would say zero do you still get it I 
click over here if I increase it okay let's   make it 46% which brings this word generate to 
the next line without me doing some pening so   I'm happy with the results what else can we do 
we can click over here container then I go can   go to St collapse this and then there is a shape 
divider and this is for me what makes a website a   bit better in when it comes to layout and design 
same words same words layout and design so I go   to the bottom of the shape divider so something 
will happen over here type is none I can make it   drops triangles curve what I prefer is waves and 
there are a few things I can do I can change the   width you see I can also change the height so I 
like to decrease it I can also so flip it invert it so this looks great in my opinion and then I 
can say command or contrl P this is how it looks   or I take a look over here we make websites 
that generate customers learn more or get in   touch and every 3 seconds this image changes so 
take a look over here content additional options   every 3 seconds pause on Hover no so when people 
hover over it it still changes because now it was   not the case I had to wait longer automatically 
it will change so one two three even if I hover   over it yeah it will change perfect we talked 
about CSS before and what I want to do now I   want to link any text in a website to the color of 
our color pet so when I change that color pet In   Blocky later also that color that I assigned to 
a certain text will be adjusted let me show you   how you can configure that with a little bit of 
CSS code two more things I want to do let's dive   a little bit deeper what I want to do I want to 
highlight this word I want to make it a color so   so this is highlighted this is highlighted in 
the word websites how can I do that well over   here I would like to select this and then give 
it a color I make it bold so let's make it bold   bolt what I see then in the content is made bolt 
with this code the only thing you see over here   is code so to show you that it's code I could 
make a break BR close it and then that goes to   the next line by the way um if I use this then 
I don't have to use the petting I can just make   a break over here the only thing is then when 
I do that and I go to a different device the   break will also be there so so I prefer not to 
do that but it's a possibility what I want to   do in order to highlight this word I'm going to 
use a little bit of CSS and HTML actually maybe   only HTML so what I will do I'll create a span 
you don't have to understand this just follow me   opening uh parentheses I don't know arrows shift 
comma on a Mech then I say span space style equals shift this one and then color semicolon if I say 
hasht z00 Z that's always what I use as a to to   see if it's working that's is the color black 
Arrow right so shift point now everything after   websites and websites itself everything after 
this area will be black so what I'll say after   website is opening for slash that makes it stop 
and then span so the span stops there so only the   word website has this color so what I can do now 
I really like this tool it's called color pick   ey dropper it's a Google Chrome extension 
so search for Google Chrome color pick ey drop and then can add it to chro Chrome and 
when you do that you can select a color click   on it copy and now if I click here I can change 
the color to this one the only thing is when   I decide to change all the color palettes in 
my website that this will still be yellow so   I prefer to use a color that is linked with the 
color of our website well in that case we don't   need to use the color with a hashtag I need to 
remove this let me publish it right now okay what   I will do I will go to the customizer to colors 
I go to the first colors I want this to be the   first color and over here there the color code 
that's linked with this color so I copy the color code then over here span sty color 
space what I will do now I will will   say I will paste this nothing happens so 
what I will do here before the dashes v r   shift n and then after color one shift 
zero so I close it I need to learn in   English what are what these words are 
maybe I have a blackout so look at this publish refresh if I go to the customizer and 
I go to colors and I change this color let me   copy it right now but if I make it green look at 
this this color also becomes green and that's the   power of this theme if I change this green copy 
it look at this everywhere I use that color the   global color it changes and that's how you can 
change the look and feel of your website in just   a few clicks using the global color pallette 
how cool is that I I think that's really cool   did you know that you can animate elements and 
containers in Elementor well maybe you did maybe   not but let me show you how it is done so that 
was the first thing I wanted to do the second   thing I want to do click over here I can go to 
Advanced close this and then there is motion   effects entrance animation so I can say when the 
website opens fade in left oh am I wait click over here yes now I'm selecting it Advanced 
closes motion effects fade in left or in   this case fade in right I can make it slow 
I can delay it so I can say after 1 second   which is a th000 milliseconds is all here we 
can also make a nice animation of everything   so this will [Music] arrive immediately 
from the left then this button will come from the right sorry from the 
left and this one will come from the right okay look at this wow well it's cool but it   will make your website slower so 
right now I will turn it [Music] off this [Music] one and this one 
did I use this one yes and then the image so now I publish it and now there's no 
animation anymore so we have created our hero   is important that's that's how I prefer to work 
after you created a container I think it's best   to optimize it for all devices at once you can 
also create the whole home page but sometimes   you want to copy things and paste things and if 
those things you copy and paste are not optimized   you have to optimize it twice so I prefer after 
every container that I've created to optimize   for all devices and then you know every time 
you copy something and paste it somewhere else   it's optimize for all devices and it will help 
you to have a more productive workflow so let   me show you how to optimize it for all devices 
what I prefer to do to see how it will look on   a different device so I click over here but 
what I see immediately is that this Tex is   totally at the left and totally at the right 
that's that's not professional at all so what   I will do I will click over here the section 
settings then I need to go to Advan and what   I see the padding top is great and the padding 
bottom also great that creates this space but   here at the left and right nothing is happening 
so let me uncheck this this this was 120 this   was 120 what I can do I can increase it over 
here let's say 10 pixels also over here 10 maybe align it with the menu 40 so let's say 40 okay publish that looks so much better but I 
don't want to do this for every single container   I create we talked about standard padding before 
that means that you can say to Elementor that   every container that's created has a certain 
padding by default it is 10 and if you have a   container in a container in a container it it 
shifts the elements in a way that I don't like   so I put everything on zero zero petting so when 
you have 10 containers in containers there's still   no no petting but um I want to add a few a bit 
of petting for other devices because otherwise   the the the the the boundaries the sides of 
the websites are the content is against the   side of website especially with a tablet and a 
smartphone so I'm going to adjust the standard   padding options right now so what I also can do 
I can click over here go to layout and then the   container padding I can say 60 everywhere or 40 
so now all the containers automatically for the   tablet will have a padding of 40 pixels well 
a lot is changing over here why is that well   first of all nothing changes over here because 
I already have overwritten those settings the   default settings with my custom settings 
over here so if I go to layout these are   the container padding default settings but 
I've overwritten them over here already at   padding but over here it's not overwritten so 
what I see since I have an container over here   it has a padding of 40 everywhere so I need 
to uncheck this and then this will be normal   and now it looks great so maybe it's a little 
bit unclear as long as you keep this empty it   automatically will take the settings of the 
layout container padding and I prefer to have   it 40 everywhere otherwise manually I have 
to do this on all the sections or containers   in my website I prefer not to do that let me 
show you again if I go to the mobile you have nothing but it's probably if I close this I 
go to the section it's inhering it from the   tablet when you adjust the numbers over here 
on the tablet or on a desktop you don't change   anything for all devices automatically it will 
inherit those numbers so for the tablet I should   make this less high so I could say let me uncheck 
it no more 120 but 60 or you know what let's keep   it empty right now um link it together and 
remove the numbers no remove them okay why   is that because it's automatically inheriting 
those numbers so let me see what happens if I   go to the settings layout container pedding 
if I increase this nothing happens because   it's inheriting the numbers from the tablet 
view so I cannot illustrate how it looks but   I okay what I can do in order to show you 
how it will look I can go to the desktop   this is how it work as as I said before there 
there's no perfect way this is how I prefer to   work I duplicate this whole area click over 
here do nothing with the padding also here nothing and then here nothing okay 
now if I go to the layout and I say   increase it now we can adjust over 
here so let me show you how it should look okay let me close this I can drag this up then I can go back to the settings layout 
I want to align them over here but I can also   say uncheck it and at the top I want it to be 
50 a little bit more space and at the bottom   also or maybe 100 100 so there's more space 
over here well this doesn't look that good   but um we'll sure I'll make sure that it will 
look better that's why we optimize things so I   save the changes close this I remove this one and 
remember here it's not the case because manually   we have those settings over here so I'm okay 
with this space over here we make websites so   how can I optimize it let's go back this is how 
it looks on the desktop on the tablet it looks   like this still fine for me and on a phone 
I can click over here for a phone I can say content okay let's see okay alignment for 
the phone center over here containers layout   direction is okay and for the mo mobile I say 
bring it to the center then there's this area   it's not like container it's an image so 
let me see the width for a mobile is it   says it's custom so I can go to the width 
for the mobile in percentage I can say 100 okay then I go to [Music] 
the margin and I create some space and that's how you can adjust things Pixel 
Perfect maybe there's a bit too much space over here 120 40 120 40 so let's see how 80 will 
look 80 80 it's so important I I have courses   in in the Netherlands about making websites and 
people have to do assignments and I teach about   this ping and margin creating space on almost 
every website I check they have not much space   over here so every time I have to tell that so I 
want to be really clear about that please for the   mobiles for the tablets make sure there is some 
space over here this looks beautiful and also   this looks great please don't have it completely 
from the from the left to the right this looks   way better so so far so good it was the first 
area of our website are you having fun are you   excited I hope you are I really hope you are I I 
did my best so I did so much my best to make this   tutorial as easy to follow for you as possible one 
thing I did that's new is that I created a little   bit more animations normally I zoom in and then 
it's a static zoom in but now I tilted a bit do   you like that or is it irritating or frustrating 
please let me know in the comments because every   time I make a tutorial I want it to become better 
than than one before and that's also probably why   I have so many sub subscribers because I always 
try to improve I like what I'm doing I hope you   like what I'm doing and you like making this 
website let's go for another container and in   this container we're going to show something 
about our services or something that you're   better that make that's that um makes you stand 
out from your competition and I will show you a   few ways on um or I will show you a way on how to 
create that area and by showing that they're going   to learn a few new things yes let's go so let's 
create the second area I want to tell something   about my services not not my specific service but 
how I like to work with my clients so I want to   highlight three or four things that make me better 
than my competitors so I click on the plus what I   could do I can have three arras that I want to 
show or four so I can select this one or three   so I can select this one and then and remove 
this remove this and remove this and then in   every container which is in one big container so 
one container with three small containers I can   add information but every container also gives me 
some extra code in my website and I want to keep   it as clean as possible so what I will do I'll 
start from scratch and show you how you can work   in Elementor and save space and make your website 
faster or keep your website fast so I click on the   plus I want to go for one area one container that 
goes to the right from left to right then I click   on the plus and I want to go for an icon box so 
here's an icon I want to go for an icon box over   here I drag it there it goes so I want to have 
three so I can duplicate it and duplicate it so   this is what I want it doesn't look appealing 
we're going to make it more appealing how let   me show you I start with the first one so first 
I want want to change the icon and the icon that   that fits with the text text is about that 
we listen I as a company I really listen   to my clients what they want and then I start 
working I don't give them IDs and stuff without   first listening to them so when I think about 
listening then giving good IDs I think about   of a light bup I use a dark version for every 
icon excuse me I need to select the first one bup okay the second one I think about we 
think along so we really think together   with the client we listen and then we 
come with other IDs so we work together   so I like to have something like a 
handshake and then again the dark   version the third one is we are super fast 
and I think that has something to do with a clock okay now I want to change the headings so   I go to the first one there 
I say we listen the second one we think along the third one in my case is we 
are fast and I like to have a capital for every   first letter of every word so how do you come up 
with these just think about your company and think   about what is it that you that you offer and What 
Makes You stand out from others and then you can   come up with those titles I don't consider myself 
to be a professional type writer or writer at all   uh so what you can do you can hire people but so 
far I've always managed to do things myself and   I'm doing great I have a lot of clients so 
I think I'm doing okay I don't want to have   more clients so I definitely will not Outsource 
it to make my text even better so you can write   it yourself you can take a look at a few other 
comp companies uh getting inspired by that and   then based on that create your text you can use 
AI to create your text say hey write me a text   about that we listen as a company in web design 
then they can make a text for you you can even   say write it in 45 words um you can even write 
with AI That's a feature within Elementor you   can also search for my tutorial about that 
or click over here that is uh Elementor AI   30 that video went viral one of those 136,000 
views only six minutes so um and this one goes   a little bit more in depth so you can use AI I 
will uh I already have my text I will write my   text right now and then I will be back with 
you and again I place it at the wrong area   so I go over here and there I place it then the 
second text okay and then the third one awesome   I really don't don't like how it looks but we're 
going to make it look better so what I will do   I will adjust one area and then copy paste the 
sty to other ones so I click over here this is   the content we we fixed the content now I want 
to go to the sty there I want to adjust things   so the icon position should be on top like right 
now or the left I prefer the left I can bring it   to the center but this is okay then I go to 
the icon and there's only one primary color   because there's only one color over here but if 
I go back to content there's another option how   do I want this to be displayed so I can have the 
default one or stacked like that or framed well   I prefer framed so I go back to the sty and now 
I have other options so based on what I've chose   chosen over here I get other options so if I go 
to Icon now there are two colors so the first   one color one second one this one and then you 
know what the border with zero so let me see the   spacing I can increase the spacing but 15 is okay 
the size of the icon if you press the up button   it starts at zero the padding let's say 15 I can 
even rotate the icon but I don't want to do that   then I can go to hover when people hover over 
it I can change the colors so I can invert them but I uh I'm okay so I click on it the color and 
then clear I go back to normal icon and then I go   to content and then we have the spacing between 
the heading and the text I think zero is perfect   the color of the text by default it is color 
three so I'm okay with that I don't change that   this the title by the way I don't want to change 
the title it's okay by default typography I don't   change it I can change the height or the the the 
size but the the family font is the default one   from the bloxy theme so I'm okay with that 
so let's go for something 20 or 20 is okay   no 18 okay then we have the description 
typography I can change the size of the text but um let's say 15 and 
I want to change the line height 24 26 okay and then I want to go to the title what is happening yes okay 
and now I want to go back to the icon and go to the size 26 great so far so 
good we have created this area it doesn't   look great yet but what I want to do I 
want to shift it up a little bit because   then you can create cool Styles so let 
me show you how to do that what I want   to do I want this to overlap the waves so 
I can go to the section to advanc uncheck   the margin over here and then at the 
top I can decrease it with minus let's say minus 80 okay but now this looks weird so 
what I want to do I want to go over here to the   sty or no uh better Advanced close the layout go 
to the background make the background white that's   color eight I don't like color eight so what I 
can do take a look over here this is white this   is not white so what I will do I will go to the 
customizer then I can go to colors and I can go to   the the latest color and I can make it completely 
white and then everywhere in the website I use   that color it will be changed so now it is 
perfectly white so let me refresh this command R and now it is white great I click over 
here I go to the advanced area there is   the the background below that is the Border 
I want to have an increased border radius   how about 15 because everywhere uh 
here we have roundings and stuff   here our logos so I want to keep it in 
the website okay 15 and I want to add a shadow I want to increase this 30 
so we have a nice shadow around   this area now I want to go to 
layout and I want to increase   the petting because right now it's at 
the edge I don't want that so let's say 20 right Mouse click copy right Mouse click 
paste or I select it and then shift command   V and if you hover over it or right Mouse 
click you can see the shortcut okay but uh   not all the stells are copied so let's see Bas 
sty B St so what I need to do over here it's   St small glitch so let me see if I would 
publish it without adjusting this I check   this I close this everything is fine great 
edit with Elementor so sometimes there's a   glitch it is what it is and what I also see 
is that this is four rows and this is three   but what I like is that they all align so that 
is because at the container look at this align   items by default is stretch if I would say 
top those two will be shorter but because we   have stretch and that looks better what looks 
even better is if we make this a little bit shorter so now I have three lines everywhere 
okay since we brought this up now this is not   vertically in the center anymore so I can do two 
things as I said I I can do multiple things in   order to get the result I have in mind and in my 
case I want to go for Advanced and play around   with the padding so here I want to decrease 
it zero and here I can add 40 maybe or I go to 140 so what I get rid of here needs to be added 
over here so it stays in the center so this area 160 should be around the same over here okay publish let's take 
a look I think that looks great if   I want to look at this I can duplicate 
it and there's a Ford area how cool is that and what I can do if I want to I talked 
about it before if I go to the section I can   change it to F with now look at this that 
looks like that um if you want to you can   do that but if you have a really big screen 
it still will be totally from the left to the   right so I prefer not to do it you can also 
do box and make it a bit wider so a bit so   let's say 1300 and that can maybe be a cool 
uh cool exception like that and then below   you can have stay in between that area so 
cool things you can do let me see we listen   Okay what I also can do I can increase the 
space over here by going to the container and   then over here the gaps I can increase them 
but 20 is perfect for me so I leave it with 20 and one more thing this one is wider than this   one and this one so I can click over 
here I can make this custom width of 30% this one also 30% and this one also 30% but there's one 
problem in total it's 90% so there's a bit space   but that space can be taken with the two gaps but 
those gaps are are in pixels so it's not now not   completely aligning so what I can do I can go 
over here bring it to the center but then it's   still not perfectly aligned I have to say it does 
a PR great job what I also can do click over here   grow click over here grow click over here grow 
now they all have the same size and they work perfectly I was thinking what's going on 
over here but I forgot to bring this back   to 1120 or get rid of it so uh I was like 
what is happening I'm teaching others how   to do it and now I'm confused but fortunately I 
found out what was happening so far so good but   what can we do let's do something fun go back 
to Advanced with this button then go to motion   effects and say after 500 seconds milliseconds 
I mean otherwise you have to wait for a long   time and the second one from the right right 
sorry from the right 1 second or 750 then this after 1 second and this 
after let's go up after 1250 milliseconds this one after 1500 and this one after 1633 just kidding 1750 so here we go it slows your website down 
it can be fun um but I just want to show you   what is possible maybe at the end of the tutorial 
I will bring it back but right now I want to work   efficiently and every time if I refresh the page 
I have to wait I don't want that so I I'll put it back I hope you're having fun so far if you're 
learning a few things then please like this video   that help me out a lot and if you want to learn 
more about making websites I do my best to get   better every time also not only with my knowledge 
but also in presenting the tutorial then you can   subscribe so please do that that will help me 
out a lot I have already more than a million   subscribers and I love that I love making those 
tutorials and I love it when you would like it   and I would like it if you would love it but 
that's something I still don't understand if   I think things like that then okay you know what 
let's continue so how does it look on a different   device okay okay well you see by default it it 
it has these edges or these spaces I love that   but I I don't like the the St so what we can do 
click over here and say at the container layout   for a tablet as you see over here the directions 
can be below each other but then I need to come   over here again go to layout change the width 
for the tablet to or 100 or I can say 70 or I   can work with pixels I think that's better 500 
yes okay and then for the smartphone that looks   perfect what I need to do over here the container 
for the content is below each other so over here   for the tablet I need to bring it to the center 
okay so here I go for 500 and here I go for 500   I want to if I want to I can bring this back 
to zero so there's no more it's not overlapping   I think that's better then for a tablet or 
sorry a smartphone it looks like this and I   think for a smartphone there can be a bit more 
space over here so I go to layout smartphone Rose 40 and [Music] then top 40 40 and then of course over here 
40 it's 40 too much I think it is let's   say right 20 left 20 what did I say 
in the in the in the settings let me   check that I want to align with that side 
settings layout 25 okay so I need to go back Advanced 25 25 so actually I only adjusted 
the bottom and the top for this one and the space   in between and over here I saw there was a 
animation so I click on it I get rid of it   wow I'm happy with the result so far so let's 
dive a bit deeper and every time I want to show   you more things so uh let's dive a bit deeper 
right now so I go to the back end we're going   to create a new area so let me see what I want 
to have I want to go for a new container I drag   it over here I want to align or go to layout and 
direct everything from left to right and then I   want to add a carousal again image carousal carel 
I don't know I add the images upload files I use   the files I showed you I gave you in my folders I 
go to images tutorial web Define business and then   you see all the beautiful names I should change 
them to Amsterdam because in this tutorial I use   Amsterdam as the city of my web design agency 
and then I can click over here get rid of all   the dashes there's a trick if you upload a lot 
of images go to text edit create a new document   then paste this and then copy the dash then go to 
edit find and replace and all the dashes will be   replaced with space all copy paste paste paste 
copy text edit paste all copy paste paste paste   and that's how you can do it you only have to do 
it once and it will help you to be found better   in the search results paste it paste it paste it 
the next one only one so let's do it like this   copy paste all P copy paste paste paste and the 
latest one you know what I feel good let's do it manually create a new Gallery I can change the 
order so first we're going to talk with each   other or first we have a meeting then we're going 
to talk with each other let the boss take a look   we're going to take yeah have a conversation 
about it then use posted notes and then do it   in real time or do it in real life okay whatever 
image resolution large slides to show only un no   image stretch no what I want to do I want to go 
to Advanced with default change it to custom and   then 50% content go back let's see the navigation 
I see arrows over here and dots over there I only   want to show dots no link no caption additional 
options I go for lazy load that means if people   only see this when they enter my website this 
will not be loaded yet only when they scroll   over here and that will make your website faster 
Auto playay yes every 3 seconds there will be a   new slide it will take one second I don't want to 
have the slide effect but the fade effect now what   let's do the slide effect from the left or to the 
left okay then I go to the Stell the pagination   is outside of this area outside out out I want 
it to be inside I don't see it so good so let   me make it bigger there it is color this one and 
the active color or you know what this one should   be white and the active color should be color 
one like that so we see where we are now let   go to The Container Advanced uncheck the margin 
and create some spacing let's see 60 or what I   can do it's a little bit tricky publish I can go 
to the side settings layout and here it is every   time zero pixels why I said before if I create a 
container and in the container in the container   there are all these paddings I don't want them 
but now if we adjust one thing in the padding   of our container all these settings are gone so 
I prefer to have 60 over here uncheck this like   that you see how many things Chang by default now 
so let me close this over here there's a standard   padding of 60 so I need to go to Advanced uncheck 
this also over here uncheck this now by default   there's 60 on top and 60 at the bottom so now if 
I go to the tablet mode let me show you later or   I can show you now there's this space and on the 
mobile there's [Music] also this space from the   left standard because that's the standard of the 
side settings layout and then the pedding but if   we change one thing then all these settings from 
the side layer settings layout will change so I   prefer to say 60 the only thing is now when I 
create a new container and in that container   I will create a new container you see those 
60 pixels it is what it is I'm okay with that   so that was a lot of information in a short 
amount of time okay this looks great I don't   want to change anything over here except for some 
rounded edges because I have that also over here   over here it was 20 so over here I want it to be 
20 okay next thing I want to add a heading and a   text and that's why I will add a container and 
then in that container I can have a heading and   a text so this is a dark area this is a light 
area so I want have a dark area over here it's   not a must but I prefer to do that so I can 
go over here to the Stell Etc and change the   background but can also say right Mouse click 
copy right Mouse click paste St the only thing   is it grabs all the stells so that's what I prefer 
not to have it would be great if you could as uh   copy specific Styles so I can go to the layout 
I go to style background then copy that area and   only copy that and then paste it there but now 
I I have to do manually that's that's okay the   more you do it the better you become at it so the 
more I do it the better I become at it color two   second one color three sorry color three and 
then change this to 90 and there we are then   I go over here layout I want it to be at the 
top sorry uh from left right so here at the start okay then I want to go to this container 
Advance uncheck this so it's at the top then   I want to go to the color over here change 
it [Music] to this one I go to the content   I want to say taste the at mere at web Define 
super cool text over here I want the text to be white so I can go to the content and I can 
create the text I'll be back with you when   I've created it there you go let's see how it 
looks command B okay some things are not going   that great okay let me show you what not going 
that great there's no space over here so I go to   the section Advanced and then over here I want 
to be 60 that's better looks so much better uh   over here these buttons are weird so what I will 
do over here Advanced I said that is 50 pixels   what I need to do over here layout when I have a 
container next to an element then I need to change   the width to full width then I need to change 
this to let's say 40 okay now it's not complete   so then I need to go to advance again make it 
grow so now it's actually 50/50 and now if I   decrease this automatically this text will adjust 
and stay here totally at the right the gap is container let me see layout 20 and 
maybe for this divider maybe for an   image and a text that's a little bit 
less uh not much so let's change it to 40 okay and then again I 
can play around with these settings I think this is perfect great so we have done a trick over here C 
trick with this color so I want to copy that first   area because I want to highlight a few things 
over here first I want to make the words bolt that   I want to use so I go for amsterdan click twice 
command b or click over here and later on in the   text everything is possible command B control b or 
click on the B over here now I go to the text the   only thing I have to do after strong look at this 
I paste this and automatically only this word is   highlighted so the the strong the end of strong 
is also making the end of the span so that's why   I make it bold I want it to be bold but now it's 
easier so I only have to go after the strong paste   it and there I go then I go to visuals delete 
enter and now it looks great so people don't like   long text on a website sometimes I see website are 
like oh man so much text this is a lot of text so   this why I want to highlight a few things where in 
Amsterdam and everything is possible and if they   want to read more then they can do that over here 
okay so how does it look on a tablet keep in mind   we haven't changed the padding so by default this 
looks great maybe look at this if I go over here and I go to layout say top I go to tablet now 
it works yes it works I love myself self love   is something new you know it's all about self 
love these days no I'm just kidding but um I I   read something about it today I think it's good 
to love yourself but U I think it's not the cure   for everything yes that's for free normally I 
don't pass it around but in this tutorial for   you I want to share that with you without you 
asking me for that okay so I was just excited   that I figured out something during the tutorial 
okay and now something needs to adjust over here   so I click here and then I go to the pixels and I 
say 100 okay remember that I said that I normally   don't use those well for the mobile we can use 
those and what it does it actually reverses the   two areas the container and the area over here 
the image Corel so if I do this it should be   reversed maybe it's not the case because it's not 
the container okay let's go back let's fix it in   another way click over here and then the order on 
the phone is two that fixes it on the tablet this   is left this is right but on a phone the order 
is changed because I said this is a two and then   to make it complete I should make this a one so 
that's how you can swap it swap it man are you   excited I hope you are I think this is beautiful 
publish let's take a look let's see if I'm still   recording un fortunately I am okay this is what 
we' have created so far and I'm really happy with   the results I want to create a new area with 
the awards we have won and what I've done I've   uploaded a few different images on purpose with 
different sizes and I will show you how you can   align them we're going to talk about a bit more 
about positioning and there's a feature I really   like so I'm going to talk about it a little bit 
more also later in the tutorial because I like   this feature and it will help you to make your 
website look better so let's create that area   Okay the next area and again we're going to learn 
something new so what I have I want to show some   things about Awards I've won so I can click on 
the plus I want to go with a simple container   that goes from the left to the right so I want to 
add a title A heading so I drag it over here then   I want to add an image like that come [Music] 
on there it goes then I can drag like that okay   I select the image upload fils select fils I go 
to wins command a and upload them all the funny   thing is or what I did on purpose is that all 
the sizes of the logos are a different size so   I will select the first one duplicate select the 
second one or let me see this one then the third one and the fourth one so how can I make this 
better first let's change the title to Awards   we have one so far so good don't you think no 
I click over here I want to go to Advanced and   I want to push this to the whole 100% of the 
width by saying full width not a lot happens   why in the container we need to turn on wrapping 
this one that means that when you go over 100%   the next elements go below that area so I wrap it 
and now it says okay this is 100% as you see by   the outline so everything else will be pushed 
so I click over here I go to the content and   I bring it to the center I go to the Stell and 
I give it this beautiful color [Music] then I   click here and I go to Advanced with custom and 
I can say 25 but let's say I copy it paste the   St I paste the St and I paste the St this one 
goes to the next area to the next uh below all   the other ones why because those four in total 
are 100% but there are also gaps 20 pixels 20   pixels 20 pixels so 100% in width plus pixels 
equals over 100% in width so it goes to the   next line so what I can do again I can say 20 
right Mouse click copy select command shift   sh V click command shift V command shift V but 
now again it is not covering the extra area well   we spoke about it before you can click over here 
and you can stretch everything make it grow copy   paste paste and paste now it is 100% but maybe 
some things should be smaller and some things   should be Bigg biger then I can go to percentage 
over here you know what let's take a look over   here there are a few things we can do I can first 
of all I want to bring everything to the center   really nice one click there was a time I did 
something like this okay then here I need to   uncheck this and do that oh man I'm happy that 
I found out two months ago that is not how it   needs to be done just kiding longer AG go but 
um I keep on learning things so again this one   20 pixels between everything and I can go to the 
sty over here in pixels and I can make it a bit smaller but what I prefer and here at Advanced decreases or you give them all 20 you know what yeah 20 
20 let's make this one a bit bigger and the   rest all 20 and 20 what I also can do I can click 
over here go to St pixels and then change it over here what I also can do click over here decrease 
the width of this whole area that's what I prefer   and now I see so let's say 700 now I see this 
becomes really small so I prefer over here to   increase that a bit and then the other ones can be 
decreased a bit and that's how you can play around   how does it look on on a tablet I think it looks 
perfect already because of all the great settings   and then on a smartphone it looks ugly probably 
okay it's okay I click on this one and I say you   know what you can have 45 over here you can have 
45 so these would be below 100 and there's still   pixels left so 45 is safe if I would say 50 and 
50 this one would go to the next line because   then 100% plus the space is too much is over 100% 
in the width so 45 is okay percentage 45 and then   percentage 45 if I decrease this one the other 
one grows so I'm like okay this can have some more   space that's the way the cookie crambles I did not 
have to do a lot about the m view so um I'm happy   with the results let's continue now we're going to 
focus a bit more on design of course you can drag   an element in the container place it somewhere 
and then change the color but let me show you a   few other ways on how you can design the elements 
and the sections in your website so it will look   better yes and when you notice you don't have 
to do exactly the same thing but you can Free   Will bit you can do whatever you have in mind 
for your website because at the end of the day   it's cool to know how everything works but then is 
even cooler if you learn how to or create things   yourself or take a look and get inspiration from 
other websites and learn how to create the things   you see that's what my goal is for you that you 
know exactly how to create what you see on other   websites not to copy them but to get inspired so 
if you think hey I want to do this they know how   to do that that's why I'm that's why this tutorial 
so long so let's create a new area and show you   a bit more about designing so time for a new 
container and again we're going to learn something   new so I click on the plus I go for a simple 
area goes down I want to go to the background sty   gradient the first color is color two the second 
color is color three and I change it to 90 degrees   and this time as we have done already for a lot 
of times we drag a heading in it but this time   everything will be different wow I bring it to the 
center I change the title to what we are really gooded I go to the St I make the text color 
white then I go to the typography I want to   make the text a bit smaller 20 then I go to 
Advanced close this and I go to the background   every element can have a background I go to 
classic and I change this one to this color   it goes over the whole width of the website of 
yeah I don't want that but first I go to layout   and increase the padding to six now I go to The 
Container to [Music] layout over here then this   needs to be in the center yes okay then I want 
to have a new area I can duplicate things so   I click over here duplicate it check it here 
below that's how I can save myself some time   I just have to change the text and then I say 
this is what we do best I Tred to figure this   out without using extra containers and I did 
not figure it out so what I will do I will   drop a new container over here below and in that 
container I will have four more containers one   or two three four they're all below each other 
but I want to click on the upper container if I   get lost I can click on the structure collapse 
a lot of stuff what I see I have a container   that contains a container and that container 
contains four other containers so I need to   select this container so I can say four services 
and then I can bring it from left to right right   this makes sense I click over here Advanced 
uncheck the padding I want to do the same over here and copy basis St basis St and Bas St 
over here I want to have the order go from   top to bottom and now I want to add a few 
elements over here so I click on the plus   and I want to start with an icon below that 
I want to have two titles or headings so I   duplicate it and then I want to have a list 
an icon list there it is and I drag it here   below so let's configure this and I want to show 
you what you can do and then I want to show you   what else you can do so very simple I start with 
four numbers let me first click over here and I   want to go for four words for services I have 
the first one is branding and it feels like a   fingerprint so I search for a finger what makes 
you unique your branding your fingerprint so then   the second one really simple 01 for services the 
third one is branding the service title and then   here I have a a list I want to have one click 
on it and get rid of the icon then I want to   say when it comes to branding we talk about 
brand scan that's what we do okay so now we   have the content everywhere I want to have two 
more things I do the second option is branding strategy and the third one is logo and colors 
great now let's make this look better I click   over here I go to the St and I make it white 
then I go to branding I go to the St and I make   it yellow I go to typography and I make it bit 
[Music] small 16 or 18 then I go to branding sty   and make it white then I go to Advanced uncheck 
the margin and I go for a negative in the top so I   can bring it a bit closer to the number then over 
here I want to make the Stell let's go to the text   color is white and I want to make it a little 
bit more Boldt so weight let's say semi bolt   okay I can align everything to the left okay and 
now I can duplicate this a few times then remove this like that so okay this how it looks what 
else can we do I can click over here or I can   click on the container and then bring 
everything to the center like that but   still this is not in the center so I click over 
here and then I bring it also to the center copy B sty Bas sty B sty copy Bas sty Bas sty 
and Bas St then I want to go to the upper   container and if I cannot select that then I 
need to go to the structure I go for the four   services and then I want to increase the 
margin top a bit a little bit more space okay now I will Fast Forward change all the 
information [Music] so two so I'll be back in a minute okay publish how does a look on a 
different device well not too good so what I   can do now let's make sure I select four Services 
I can let me see okay what I will do I will go to the containers first at four Services I 
want to turn on at layout the rep now   I see only one okay okay but how about I 
want to show two so I go to container now   in this case I need to go for full 
width and for percentage and I say 45 copy paste paste paste then I need to stretch it so I go to 
Advanced grow copy paste paste and paste okay and   then I go for the mobile everything should be 
below each other and that is the case so I'm   happy but I'm not happy you know today I was in a 
fight with my wife now I'm not happy no that's not   the case that was not that did not happen today 
what happened today with my wife um and you know   what let's talk about WordPress related stuff so 
it looks like this m p okay but you can spicen it   up as long as you stay within the style of your 
website so what I can do I can click over here I   can go to the sty I can give this background or I 
can go to the Border give it a solid border of a   few pixels but then give it a color white for 
instance then I go for a radius of 20 publish like that but then of course we need to take a 
look at the advanced area margin and increase   it with 20% everywhere now we're talking copy 
paste paste paste but that's not [Music] all   what I can do I can go to the sty background 
and say you know I grab a a random color but   it should be in the style of our website what 
I can do I have this gradient over here so I   can grab one of the colors copy it and use it 
as a background or I can use a gradient so I   can use the dark color also use the darker 
color change degree bit copy paste paste   paste see I don't like it so I prefer to have 
one color over here the color I picked with I   drop Color Picker tool and then over here I 
can say grab this one copy B sty Bas St and   Bas St so a few things you can do I think 
this looks better than how it looked a few   minutes ago but it's up to you what you want 
to do with this and it's [Music] optimized for all devices if you want to you can 
increase the spacing over here want   B so I go to the tablet view go for the forer 
container and then I say gaps 40 and for the phone also 40 a little bit more space great publish I think it is time to say that I'm really 
amazed at everything we have done so far has been   made using a free theme in a free page wheer with 
a free domain and free images that can be found on   stock image websites that are free to use so 
I'm impressed I hope you are too sometimes I   think maybe 20 is uh not enough maybe it should 
be 40 everywhere but I leave it up to you this   is 40 I think this looks better this is 60 This 
is 40 this is a bit close to each other but um   I leave it up to you and also something we can 
do is decrease the Border thickness to [Music] two let's see did it change or Not St border let's see oh wait wait wait Stell 
border two okay okay what we're really good at   this is what we do best branding web design SEO 
advertising oh yeah now we're going to create a   simple area a simple counter where I want 
to show a few statistics about my websites   the amount of employees I have the amount 
of website I've made the awards I've won   so let's continue with it there's one small 
error I already recorded this in one area I   have a plus before a number in the other area 
I have a plus after the number of course it   should be or left or right and but I messed 
up I'm sorry but I just don't want to record   it again it's what it is I'm GNA be real 
with you you know y' y okay was it weird   no offense to anyone I was just doing that 
okay let's create that area then I I want to   show some numbers and I can do that by clicking 
on the plus to the left and I want to go for a counter okay so the starting number can be zero 
and I can say how many websites we have made I   can have a prefix so before that I can say this 
is a number prefix but it can also be something   else so I say plus you see more than 430 websites 
made okay the animation duration um let's make it   4.3 seconds every second 100 websites I want to 
have a thousand separator while we are less than   thousand so it's not necessary and everything 
else uh this is how many websit SES we've   made then we can go to the Stell text color 
this one and then the title or three and bit bolt or semi bolt right Mouse click copy paste okay then I go over here to The Container 
I can bring it to the center I can have space   between space around that looks great 
it's nice if it's aligned with this area can also do it manually by increasing 
this but uh that's not what I prefer to do   so I go [Music] with space around okay now 
we need to change the content cool number   so I need to change the number to 23 and 
then behind I can say plus after that and   we have 23 so let's go for 2300 milliseconds 
and the third one how many employees do we   have we have 12 so let's go with 1,200 
and then over here we have 19 [Music] Awards so I say Awards here I say 
years of experience here I say [Music] employees publish great what else you can do 
I can bring it to the center then go   to each individual area and I say [Music] custom 20 and make it bigger copy base sty Bas 
St B St and then they should align even   better yeah they align better now something 
I forget things it's um 1:00 in the morning   so maybe I should go to sleep but I'm 
so excited making this tutorial so I   was like hey let's go and do weird things 
and forget things so I go to the tempet view I can do the same what I did over here 45 so I can do the same over here 
Advanced let's see if I don't change it   to pixels if it will yeah then it will be 
pixels so let's change it to percentage   uh but this time okay wait layout rep copy B 
sty Bas Bas St what is going wrong over here   why is it 20 I said 45 copy paste paste and 
baste so for things in the center [Music] awesome L well they can only be below each other so here they can be 90 copy base sty base sty and B okay there's one more area I want to create let 
me save it let's enjoy what we have created so far already okay let's create our latest area on 
this page now we're going to create a call   to action and that call to action I want it to 
be on every page in my website below the page   so I want to save it as a template let me show 
you how to create the CTA area and then how to   save it as a template it is a simple one but 
um I will show you something new what we've   not talked about before so I will create an 
area where people can reach out to us because   people should be excited when they read all 
this and then they should be able to reach   out they can go to the contact page click 
on get in touch or here Below have a way to   reach out to us so I click over here everything 
below each other St gradient you know the drill 90 and I can copy something paste it and I can   drag it okay then I can click 
on the plus and I search for a divider I can make it solid change 
the width to pixels let's say 600   pixels bring it to the center go to St 
change the color to this one change the   weight to two then I go to content make it 
smaller again then I want to have a small text make it white go to content 
or even better Advanced and the   width I change it to something custom not in 
percentage but in pixels and bring it to the Center let's say 600 and then I can say at the content okay bring it to the center St Center 
and then I'll have a button I can duplicate it   and drag it all the way down by click on it 
and then dragging with my mouse okay I want   to bring it to the center and then I say get 
in touch and it goes to the service page I   want to be go to the contact page okay in the 
same window so far so good I go to the tablet view I go to the this View only thing I want 
to change is the text reach out to us okay what I want to do I want to display 
this on every latest container on any page   on my website so what I can do right Mouse click 
I can say save as a template how cool is that I   can call this one CTA call to action get in touch 
save there it is now if I save this command s and   I go to the website and I go to the about page 
and I click on edit page edit with Elementor I   click on the folder icon I go to my templates 
and I click on insert I say don't apply I have   this area over here is that cool well I hope you 
think it's cool I think it is cool it saves time   I love saving time I think saving time is cool 
I think it's time to uh for me to go to bed we   created the homepage I'm really excited about it 
it's optimized for all devices so if I make this smaller it looks great also for the phone enough space everywhere perfect so that was that let's go to the 
second page the about page so the homepage   looks great it's optimized for all devices now 
we're going to go to the about page and we're   going to create a new template because for 
every page I want to have a title area and   I don't want to create it again all the time 
so I will save it and then for every new page   I can import it save some time I like it 
when I save time because I have time for   other things to talk more into the camera to my 
people to the people that watch my tutorial and   um I can I can talk to you now because I will 
help you to save time so I feel more Liberty   to Liberty from Paul Patrol nice dog you know 
I have kids and um okay let's create the about   page and create a template I already edited this 
page using Elementor so I can just click on edit   with Elementor if you don't see that click 
on edit page and then edit with Elementor I   get rid of this I will edit later what I want 
to do I can go to the website so let me double click then I click on edit with Elementor and 
I can copy this whole container towards this   area right Mouse click paste awesome well I don't 
use all the same information so I can hover over   here remove it remove it and remove it and now I 
want to add a title over here I drag The Heading   and I want to say about wow you did not see that 
one coming didn't you I bring it to the center I   go to the sty and I give it a color okay what I 
remember from this area if I click over here is   that the padding is a bit off so it's not in 
the center now so I rather say 80 80 or even   better 120 120 I don't want to to take too much 
space um I think 100 is okay but I like it uh as   a nice start for the rest of the page now right 
Mouse click save template and I can call this   one hero title save it okay so every time I open 
a new page I can just import this and then change   it text publish and of course it's already 
optimized for all devices how cool is that   I think that's pretty cool one thing I want to 
change over here if I go to this container and   I go to the St I close the background I want 
to go to the shape divider we have one already   over here and the color is white now I want to 
change that to this yellowish color then here   below I want to take it a step further I want to 
show you a few ways how to play around with the   positioning of elements and containers on your 
website I I still keep learning things on how to   do things the best way there are more ways to do 
things in Elementor there's another wrong way or   uh but there is a better way there's always the 
best way the fastest way the the the we the way   that makes your keeps your websites the lightest 
so um that's in my opinion what I've what I found   how to create a cool design but still make your 
keep your website fast so let me show you how to   create that area okay look at this this is 
what we're going to create and if you take   a look at Elementor I played around with a few 
different settings and there are multiple ways   to do things but this night I had an idea on how 
to do this even better so you see all the stuff   over here that's what we're about to create let 
me remove it for now also remove this there are   multiple ways to do things in Elementor and I 
had a way with transforming and ping a margin   creating separate containers and laying them on 
top of each other and then play around with a   lot of stuff but this night I had an idea like 
hey wait maybe if I do it like this and that's   what happens I still keep learning things myself 
so I'm about to show you how to create something   like this but then easier the first thing I will 
do I'll create a new container with two containers   in it okay in the first one I click on the plus 
I go for an image I grab the image and where   is it this because uh I I already finished the 
tutorial this is made later that's why you see   all the stuff over here select this image then I 
go to St I go to border radius and I say 25 then   I go to the backround of the container and I 
change it to dark green because for the sake   of right now so we can see what's happening I 
have those edges I go to the container that is   containing the image and I go to Advan and I say 
ping uncheck then I go to this are plus I want to   go for a heading and I want to go for a text yes 
and I go to this container I give it a background   at St white I want to go to the border and also 
at the border I want to have a radius of 25 you   see it over here I want to go to Advanced and 
have a ping of 40 not 240 but 40 yes I make this orange or yellow and I say about web Divine this text we're going to change it later 
right now I copy it and paste it twice so I have   a little bit of text so what I want to do 
I want to have this area be on top of this   area for a certain percentage not completely 
so I can go over here I can play around with   margin and start doing a lot of things but that 
makes it quite complicated I'm not saying it's   not complicated what we're going to do but 
it's easier what I will do instead of going   to Advanced layout I go to transform then I go 
to offset and I say minus 100 and there it goes   then I bring this area to the right for for 
100 pixels so I go to this container with the   image I go to transform offset and this time I 
say plus 100 okay but I want to have the image   around this area so what I need to do I need 
to go to The Container to layout and instead   of aligning items with stretch I say Center 
this is kind of what I have in mind but what   happens this is not completely at the left here 
and this not completely at the right because we   used transform with 100 pixels to the right and 
100 pixels to the left so the idea I had last   night was Hey what if I go to The Container I 
change the width the total width from 1120 to   13 20 so I add 100 at both sides now it should 
line up but it doesn't but it's because we are   watching this on a smaller screen so I say Comm on 
P and you see it lines up perfectly well over here   I have a little bit more text so I will copy this 
and paste it publish and this is actually what I   had in mind it's Pixel Perfect I love it and I 
think it's a really nice way to show something   about your company and write something about 
your company since I made a recording before   in that recording I showed you how to create a 
certain text so I will go to the old tutorial   the old recording and show you how to get a text 
and then I will be back with this new layout and   then you can paste it and everything will be fine 
so I will go over here and I will paste the new   text which you will learn how to make right 
now I can have a text Laur ipsum let me show   you something you can do if you have chat GPT you 
can go to chat open.com and I can say write me a   three par graph text about a web Divine web design 
agency in Amsterdam Amsterdam that focuses I don't   know if the word correct on helping companies 
to get more conversions and more business by   creating a new branding website SEO and at iing 
hit enter there it goes make it three times as short okay I use that text create a few paragraphs and what I do I will use 
the same as I did before I go to the   homepage edit with Elementor and I want 
to go to the title I copy this span onto   here copy it command W or control W 
close it and over here I go to okay   let's say Bas in M stem we make it both 
command control B and the next [Music] one helping businesses thrive in the digital 
landscape command B okay then I go to the   text Tab and everywhere I see this the strong 
I paste the text what I've just copied and then   over here opening for/ span so it closes and 
then the second one where's the strong face it spin okay I'm missing one letter so 
I got this I paste it here okay so far   so good I go back to visual because 
I think I lost my paragraphs maybe if I refresh it now they are gone Okay add it 
with Elementor click over here enter [Music]   delete enter delete need to help Elementor a bit 
publish refresh okay only a small area over here   if I want to fix that what I can do over here 
let me go to the first container that's 50%   let's make it 60 and then the second one or let 
me okay second one layout 40 let's see if that   works it works like that so depending on the the 
the height of the amount of text the design can   change a bit so I'm happy with this but how 
does it look on a different device it looks   like this and that's not what I have in mind 
you can have something like this in mind but   H I don't know so what you can do over here 
you can click here or you can leave it like   this or you can play around a bit more with 
the transformation so I go to The Container   Advanced transform for the tablet you can change 
the value value the number can bring this to the   right transform say zero so by default is there 
I can even say over here layout or uh layout in percentage 30 or 50 and then bring it back a bit Advanced okay let's do um 70 
and then this [Music] image 70 something like that if you like or you go to 
the container on top and go change direction to Vertical I click on the container of the image 
go to the transform area offset and I play around   with this so how about minus 100 and this time 
over here I can say transform 100 so we get kind   of the same thing maybe think okay offset y we 
bring it up that's it perfect this is what I want   but there's something going on why because when 
you use transform the orig original place takes   it space so if I would say zero it doesn't matter 
what I do with the offset the space stays over   here so instead of using space on the y- axis I 
can go to layout margin top and decrease it minus   so minus 200 now you see here below the space 
stays intact so this also a really nice way to put   it so on the a desktop it looks like this uh you 
don't see that well like this on a tablet it looks   like this and on a on a phone like this well how 
about we fix it over here so I go to the structure   container one layout let's say percentage 100 
100 okay then I go to the second container I   get rid of the margin so I say zero for the phone 
layout percentage 100 that looks great then I go   to The Container Advanced transform bring this to 
zero and the second container Advanced transform   also bring it to zero then I go to the upper 
container and I can say the gaps need to be 40   so it looks like this just normal and what you 
can do if you want to you can click over here   go to Advanced and then say the order I want it 
below this so first below so first the text and   then the image click over here go to the desktop 
version go to sty background and then I choose the   original background color five publish so now 
it's optimized for the desktop for the tablet   and for the smartphone I think it's cool I hope 
you think so too I want to create an area where   I show the team members I have my employees but 
there is no element for that in Elementor you can   get Elementor Pro that has it but there are also 
external addons on top of Elementor Elementor is   really popular page B it's the by the way the the 
most downloaded to plugin in WordPress super cool   but there are also a lot of plugins that are built 
on top of Elementor because Elementor successful   other company think hey I want to build upon that 
success so I will add additions to Elementor and   they're paid additions and free additions and 
we're going to make use of the free additions   so we can add team members in our website let 
me show you how to do that I want to add a few   team members to the alow page so what I can do 
I can click over here go to the left or to the   right go for a background gradient with green and 
black I change the order or the the the angle if   I take a look over here and I want to add a 
team member I can search for team or profile   well I don't see [Music] anything why it's not in 
a free version of Elementor so instead I will use   an external plugin a free plugin that will give 
me that functionality how great is that you can   build on top of Elementor so I go to the back end 
I go to plugins at new the only thing I have to do   I search for Elementor and then you see a lot of 
add-ons and I'm searching for essential add-ons   for Elementor more than a million installations I 
click on install now and then I click on activate   Okay I go for basic I click on next and I want 
to make sure that there's a team member over   here everything else is fine I can click on view 
all I can also say I want to add let me see I saw   that somewhere the post crit maybe I can use it 
in the future of this tutorial which is actually   not future if you're watching this then it's the 
past because I record it then what I will record   in the future I record it in the past because at 
this moment of reviewing this it's published so I   recorded in the past even though I still have 
to record it in the future that's how my head   goes all day long I click on next next next 
and I don't want to be counted in somehow I'm   already strong weird I get a congratulations 
how how do they know it's my birthday wow how   do do they do they wow okay hey let's go back 
we install the plugin we go to the about page   edit with Elementor and Now ladies and gentlemen 
when I search for team I see a team member from   essential adance EA it's in the game okay there's 
the first one and what I can do I can duplicate it   twice so I can see how it will look how I want 
it to look because I want to show three people   in a row the first thing here at content I want 
to add an image and unfortunately I cannot share   the images I'm about to upload because they're 
from IO and I have a license for it but you can   find the people for your team or you can go to 
pixabay.com and search for profile pictures and   I can use those for free so I select all the 
photos um I somehow through the internet got   their names Andy Dwight Jim Kevin and Michael so 
I start with Andy copy the title base it base it   make it a habit so every time you do that and of 
course always rename your images to um relevant   keywords that says something about the image so 
there it goes then I go to the content his name   is the one and only Andy Bernett Barnett what's 
it and the and the I don't know his job position   he is in sales and you can have a text over here 
well you can fill that in if you want to I go for   dummy text Dummy text generator what is this I 
don't want to show my history oh I'm showing you   my history dummy text generator okay I think this 
is all about Andy so I pasted here uh somehow the   text got bigger why is that because okay what 
I can do I can paste it here copy it again so   I I paste it without the St okay nothing changes 
okay it's okay I will get rid of a little bit of   text like that that's better then I go to social 
profiles and to be honest I don't want those so I   uncheck them now I can go to The Styling because 
there's a lot to be done we can change the the   overall style so if you hover over it you can 
show this I prefer the the simple style if you   want to have something else be my guest I go for 
the simple style and then the background color I   wanted to be white like that and then I go for 
the team or color and typography the team name   color is color one the size and all that stuff 
okay the job position I want to be color two   and I want to be bolt and bigger so I go for 
bolt and bigger then there's a text I'm okay   with this that I don't like the the space I want 
to have more space so let me see where I can do that I think somewhere over here content 
[Music] padding let let's say 20 okay so   what I want to do if I go to The Container 
I want it to be boxed the width is okay from   the left to the right what I want is it 
to rep okay now everything will be pushed   down so what I will say over here at the first 
image go to Advanced and I change the width to   custom and since I want to have three people 
and the maximum is 100% I want to go for 30%   not 33 because there are still 20 pixels of of 
Gap and as I said before in the tutorial when   you ex exceed the total of 100% the next 
element goes to the next line so I say 30   and I want it to grow and when I want it to 
grow it will go to 100% but if I copy these settings and I paste them over 
here I will have two people next   to each other even better okay let me remove all this I want to duplicate this whole 
area like that now if I add a fourth   one automatically it goes to the next area 
and then again perfect that's what I want   so now it's a of changing all the names 
in the images so let me do that and fast forward okay great so if I get rid 
of this image because I only have   five people in my team this happens 
uh how I can fix that is by adding a container where is it over here I select it then 
I go for full width and for the desktop I go for   30% as you see over here but it's not aligning 
perfectly because over here at Advanced I need   to make it grow like everything else and now 
it's perfectly aligned okay how much how many   people do I want to show on a tablet next to each 
other three it's a little bit I don't like it so   I click over here by the way it's Andy Bernard 
I finally remember the surname so what I will   do I will go over here and I say in percentage 
for the tablet it is 45 and then for the mobile   it is 100 okay I go back copy paste the sty paste 
the sty paste the sty and paste the sty I go back   to the tablet so far so good but the latest 
one okay over here I need to to go to layout   and say in percentage 45 so it pushes it and 
then for the [Music] mobile I can just get rid   of it by going to Advanced and if I don't want 
to show anything on certain device I can go to   Advanced responsive and say hide it on a mobile 
and then it will not be shown so this all looks   great using free tools I'm happy I hope you 
are too and this is how you create beautiful   Pages then I can click over here on the folder 
my templates I go for the CTA get in touch don't apply okay normally I prefer not to have um two dark 
areas below each other so I can click on the   plus over here I can go for a new area with a 
background image of this then I can go to display   size cover I can go to the layout and change 
the height I can go to the background overlay grab some colors but I don't want to use 
those because I already use those so let   me see by the way about the background I like 
it to be fixed like that and then I can have a quote we love you wow that's deep bring it to 
the center or click over here layout Center   Center make the text white and then you 
know what at the background overlay I can   also make it just black and play around 
with the transparency and click over here make something like that or white cool I think it's cool tablet [Music] view okay on a tablet it doesn't show uh it's   not fixed the background so in order 
to fix the fixed background in this container we can focus the position 
to the center of the center and I   think that looks better better and 
on the big screen okay and on the phone yes cool so it's time to take a look at 
the next page and see what else we can do in   order to speed up our workflow we've learned a 
lot about Elementor already and now I want to   show you some things that has everything to do 
with productivity I will create a new page but   what I will do I will copy and paste things we 
have already created that already optimized for   all devices so we can save ourselves some time 
so let me show you what I will do in this part   I will work a bit faster so you can see how I work 
normally when I create a website at the other hand   I also get fast when I get excited when I create 
a website for a client I put on some music and I   just I'm not like let's do it as fast as possible 
I'm just working normally in a pace that I like   but sometimes when I'm making tutorials and I'm 
excited and I want to show you how fast things   can be done then things can go a bit a little bit 
fast so I'm sorry for that but um let me show you   how to create a new page by copy copying and 
pasting things and then adjusting it so you   can also change the look and few of the things 
you copy and paste let's go so let me show you   how fast we can create a new page what I will do 
I will go to the homepage in the new tab holding   command or control on the PC I click on edit 
with Elementor then I go to the services page   I click on edit page edit with Elementor I go to 
Elementor on the homepage I want to copy something   right Mouse click copy over here I click on the 
folder my templates I go for the hero title don't   apply the settings double click triple click I say 
Services then right Mouse click paste it's full wi   so what I will do I go to Advanced change default 
to custom pixels let me see like that I bring it   to the center okay I want to have a text below so 
I click on the plus I want to go for small text   create I change the cell to White then I go for 
the dummy text generator I think this is a great   text for this area so I go to content I paste 
it then I go to Advanced to with [Music] custom   let's say 400 pixels I bring it to the center okay 
that's what I want also the text style Center okay   then I want to go back to the not to the homepage 
yeah I want to go to the homepage grab this whole   area over here so I click over here here then I go 
to the structure because I want to have the four   Services container right Mouse click copy and I 
want to enter a new container and I paste it over here I want to click here go to the sty change 
the color to the this one I get rid of this area   I want to align everything to the left so I 
go to layout everything is below each other   so I need to go to the start and over here sty 
line it to the left this space is here because   of all these areas but if I remove this this 
and this and I copy the sty command shift V   command shift V command shift V and here right 
Mouse click copy one shift fee paste B Basel   and Basel so same information different L and F 
then I want to create a new area I click on the   plus I want to have two containers or actually 
uh let's go from the left to the right then I   want to go for an image over here let's add one I 
want to add one of those images then besides that   I want to have a container okay then over there 
let me copy this paste it copy this paste it copy this baste it baste it then I go to the structure [Music] area 
let me see the heading I want it to be yellowish then I go to the let me see 
where's the other heading I did not copy it probably copy paste there it is I make that one 
black or dark color three and I drag it over here   this one I want to get rid of the Shadow so I 
go to the text no text Shadow but the color I   want to be dark or [Music] green okay then I 
go to the plus I want to have a new text area here copy this text okay I want to have more space 
over here so in order to do that I go   to The Container I mean the container 
over here and then I say 40 and then   here I would like to say in percentage 
40 and over here in [Music] percentage 60 I go to the image and then I go to the St 
I could say as big as possible but um I do not   get the result I have in mind so what I will 
do instead remove this I go for the container   let's see how I can drag this at the [Music] 
right okay let me try it over here okay wait   come on z i Dr it over here yes come on that 
Elementor I'm live I'm recording okay now   over here go for the background then I grab 
this image now I can have a certain setting   so I can say display size cover now I get rid of 
this area so now it's it's bigger I click on the section and full width percentage what was it 
45 40 then this one 60 okay then this one is   40 That's What I want okay then I want to go 
to this container go for the St border solid   two pixels but only at the top so WR bottom 
left nothing the color I want it to be color one okay there it is and I want to 
go to the container on top Advanced   ping [Music] buttom 20 Bing top 20 okay 
over here I go to the St I want to give   it a background color let's do this one 
okay I go to the homepage go to a button copy paste get in touch I change that [Music] to 
branding and over here branding The Branding page   it opens in a not in a new tab so that's great 
okay and it has an animation probably oh no it   doesn't okay what I will do now I'm happy with 
this I will duplicate it three times because I   want to show four Services I offer 1 2 three so 
I have four of those the second area container   I click on the Arrow towards the left and it 
switches the fourth one I do the same and it   switches and then over here I want to have 
the call to action don't apply the settings   okay what I should have done of course before I 
would um duplicate this take a look at the tablet view tablet view is okay mobile [Music] phone okay do I like this on the 
mobile phone or do I prefer to   have the title first let me see 
layout I could reverse it or I   could go over here this section go 
to Advanced go to the order and say two that's what I prefer so I click over here 
Advanced order or just end that's the same [Music]   principle if you only have two containers section 
Advanced so now to do it four times because I did   not do this before I copied everything so okay 
and now it's a matter of changing the content   so I will fast forward and I will be back with 
you let me show you one how I would do one so   okay here's branding and here it is web design 
I should change the text what I can do copy paste copy paste sty remove over 
here web design and over here web   design then the image or container 
background image choose another image and what I can do I've not done so yet I 
said cover but I did not I want to attach or uh   have the position in the center of the center also 
here St or I can say with mouse click copy past   sty oh now it's also paste okay that's not what I 
want so click over here and this how it goes I I   make errors I make mistakes normally when I make 
websites I I like to put on music and just have a   good time enjoy myself and if things go wrong 
I figure out how to to fix it that that's it   making website is fixing problems that's it maybe 
it's not that's it but that's a big part of the deal okay in this case maybe it's 
better to leave it where it was so   U default okay then the third one okay let 
me show you one more [Music] time 03 SEO copy paste copy sty paste 
[Music] sty okay branding   change it to seo [Music] seo and then I change the image you know what since you're here at wait wait wait over here advertising copy and paste copy 
and paste step remove branding   change it to advertising copy it paste it select it so awesome that's how we created a page 
in a relatively short amount of time and   it's optimized for all devices one more 
thing over here this is like light blue   this also everything I want to have a light blue 
background and a white one so I click over here   go to Stell change this to color eight same 
with the fourth [Music] one sty color eight   so in that way there's a little bit more of a 
distinction publish now I want to create the   services pages and save even more time so over 
here I have my services page looks like this I   want to save that as a template so I click on 
this arrow down save as a template and I call   this one the services page save it great I exit 
to WordPress I go to the website to the service   page branding edit the page edit with Elementor 
click click on the folder my templates and then   I go for the services page don't apply and this 
service is called [Music] branding can change   the text or over here branding is so important 
I don't know just a random text I get rid of   this there are a few things I want to get rid 
of this over here this over here and this and this and the fourth area 
Okay I want to get rid of the images so section style remove section St 
remove so I have The Branding page and The   Branding has a few services uh subservices 
branding is about the brand scan then after   that we're going to do The Branding strategy 
and the third thing we're going to do is talk   about logo and colors and I can explain a bit 
more I can show images if I want to so I know   this page is already optimized publish it then 
I want to save this again as a single service   page save it Okay click over here go to the web 
design page edit page edit with Elementor click   on this icon my templates single service 
page don't apply click over here say web design web design is so important the thir 
thing with web design is we're going to do   some wire framing then we're going to talk 
about the ux or the UI design and then the   ux design people may think what is that and 
then I can explain it over here publish click   on the I go to the third service do the same 
thing look how fast we can create Pages based   on inform information we have already created 
and the great thing is if you start to make   more websites you can have a full library of 
beautiful things you already have created and   just copy them and paste them to your new 
websites save yourself a lot of time and   help more customers in the same amount of time 
how cool is that I think it's really cool seo   seo is so important first thing with SEO is 
market research the second thing is keyword analysis analysis and the third 
thing we'll do is talk about   page speed because it's also important 
publish click on the eye of the [Music] tiger I guess you did not see the one 
coming but you see this coming we go   to my templates single service P don't apply guess   what advertising is not so important 
just [Music] kidding oh F you're so funny okay the first thing with advertising is 
Facebook and the Google Facebook and Google the   second thing is pixels and targets or Tex Tex 
just getting Texs not targets how can how can   I come up with something like that and the 
third one is we [Music] tarting it's getting   lunatic getting [ __ ] from not getting the 
results you want with Facebook and Google   advertisements and that's why they come to 
me and then I un [ __ ] that so they can see   those great results yeah so we have created 
1 two 3 four five pages in a relative short   amount of time of course it depends on how many 
images you want to add the the information you   need to add we're going to talk about information 
adding information later you can use AI for that   and what I don't like over here now I need 
to fix that for all the pages is this line although that that's okay but then 
this should be the same color I guess and then maybe this top border 
should be gone so instead of making   funny jokes trying to be funny maybe 
I should pay more attention to what   I'm doing wow well I said that I was not 
paying attention to what I was doing so the Border zero but besides the zero I also want to 
say none so there's double negative in having a   border in that area better of course I need 
to do it with the other pages so that's cool   we have our website optimized for all devices 
looks looks like this using a free theme free   page builder we have the about page we created 
some cool things we use external plugins for free   to create something like that we have the service 
page which we created relatively fast with things   we've created before and then we use this page 
adjusted it and then created those pages pretty   nice for now we'll skip the portfolio page and 
the blog page will go for the contact page let   me show you how to create the contact page and 
make use of an external plugin called Contact   form 7 so people can send messages to you because 
that's the goal people should be able to reach   out to you to do business yeah it's all about 
business no it's all about love no it's all   about people it's all about business people that 
love each other no it's also about okay it's about you let's create the contact page shall we now I 
want to go to the contact page we'll talk about   the portfolio page and the block later first I'll 
do the contact page so I click over here you know   the drill edit the page edit with Elementor then 
go to the folder my templates hero title don't   apply and say contact then I want to have an area 
with two containers here below like this and the   first area okay before I go to the the background 
I want to go for the bluish color okay and I go   over here to the St the shape divider buttom 
I need to go slower I'm excited slower and I   choose the same color and I wonder if that's the 
right color so in a minute we'll change it to see   if will change everywhere in the website then 
I want to create two areas the first one over   here will have a white background so at a St go 
to classic choose the default color color eight   so it's white and the second one sty classic color 
two so far not so good so I hover over here copy   it bring it here to the left call this one contact 
that's already the case I changeed the style color   to the third one and now I want to add something 
new so I click on publish click on the I I go to   the back end I want to add a contact form so I go 
to plugins at new then I search for contact form   seven in my opinion the best most simple contact 
form there is install now and that way people can   send messages to your inbox activate now I go to 
the contact area over here I want to duplicate   this area or copy it so I select it copy and go 
to the back end here to the plus the text editor   I draged below I go to the text Tab and there I'll 
paste this and in the beginning you will see the   code but now if you click on the I you'll see a 
real form it doesn't look that appealing yet so   what I will do click over here the first container 
I go to Advanced at the Ping I say 40 okay then I   go to the second area again want to copy this area 
drag it over here not in between but in here okay   over here I do the same container Advanced Penning 
40 I align this to the left and I call this web   Divine LLC then I want to place some information 
over here so here can people can reach out to me   and here I want to place some information about 
my company so I go for the text editor here below   St text color white and I go to the content and 
I say the street of my company shift enter so I   don't go to new paragraph but a new line then the 
third one the Netherlands let's T it type it write   the Netherlands okay then I want to duplicate 
this area over here I want to save a few more   things LLC and then number shift and enter vet 
ID and then a number and then my iin my bank number okay what I will do I will go to the 
homepage edit the page with Elementor I go over   here and I grab this code copy it and then over 
here at the text area first let me make this uh   bolt so I select this command to control b or you 
click over here select it bolt select it bolt then   I go to the text and after every strong I paste 
this second one paste it the third one okay and   before the closing of the strong with this for 
slash I say for slash span so I copy this pen and   here before the closing strong and here before the 
closing strong okay now I go to visuals I need to   say shift enter delete shift enter delete okay so 
far it's getting better click on the plus I want   to go for an A List an icon list I drag it here in 
between okay I remove the second and third one and   over here I want to go and share something 
about my email address so I search for an envelope then I go for the text which 
is info at we are web dine.com it can   be link it can be mail to over here but 
let's let's not make it a link it's okay   what I do want to do I want to go to 
the the St icon icon I want it to be   orange and the text I want it to be 
white I think the icon can be a bit bigger yes then I go to the content duplicate the 
second one https we are web.com and I excuse me I   click over here and I search for an address like 
that and then the third one is my phone number   plus 316 and then a random number and then I 
search over here for a phone like that or a mobile phone okay I go to St space between I can increase 
it if I want to it's my website I can align it   somewhere else I can have a divider but I'm I'm 
good okay then I go over here do the first or   let's do the second container first I want to 
have some roundings but we have two containers   so I need to do 50% of the roundings over here 
at the right the other 50% here at the left let   me show you select the second container then I 
go to the St I go to the border and instead of   having a border radius everywhere of 100 you see 
it's everywhere right now I don't want it over   here in the middle so I uncheck this and then 
I think at the top it's zero and at the left it   is zero so only those two corners are changed so 
I bring this to 25 so if those two in the middle   are 25 then over here at St border uncheck it's 
super should be the outer ones the first one and   the latest one you don't see it that good but you 
see it is there then I go to the publish button   and then I go to the tablet version that looks 
great and then I go to the mobile version okay   and then I see those roundings so over here I go 
to the border for the Border radius of the phone   I couldn't do two things I can say top right 25 
and zero and zero I cannot check this because   this is in front of it seems great and then over 
here border zero un check 25 25 so now yes that's   exactly what I want unless I click here I go to 
Advanced and I bring this down I want it to be   the other way around if I want to be the other way 
around then I can go to St border 25 25 0 0 and contact 0 0 25 25 how cool is that one more 
thing if you type over here you see something   but it's hard to see so let's do some CSS 
magic right Mouse click inspect and I see   this big area what I need to search for over 
here is color let me see the Border color and   then I see this color if I click over here I 
change it and it changes also here then I know   I'm on the right track so what I'll do I'll 
will make this black then I grab this whole area let see scroll a bit copy this all 
mon c contrl c i go to the customizer I   go to additional CSS enter enter paste 
it and then I have those colors but I   don't need all this stuff what I need 
is only the Border color so this stuff   I don't need it so let me see I need to 
cut it after this icon and then after this area okay now I can grab a color I thought it was one one two 
two two two uh maybe I wanted to be   be a bit lighter so let me see if I go to certain colors this one if I select 
that copy let me bring this back now I [Music] can B it okay that 
is the light color probably yes and   that's not what I want so I want it to be 
darker so I can grab a random color or this one and then make it a bit darker copy it reset B it here now it's darker so people can 
see where they need to fit in their details   publish so now people can f in their details 
and then send a message if you want to learn   more about how to create an a more complicated 
or in-depth form with more information you can   follow this [Music] tutorial contact what's that 
contact form 7 tutorial it's not the newest but   it's still relevant 31 minutes 32 and I show you 
how to create something like this with with um   now the the information is above then it's inside 
and there are so much more options also to Stell   it so um you can watch that tutorial and in this 
tutorial I want to focus on creating websites so   not everybody wants to have a complicated form I 
don't want to make this tutorial unnecessary long   so if you want to learn how to do that watch the 
video or click over here or in the description and   you will be fine we have created a header before 
using the bloxy theme and with the bloxy theme   we can also create the f so let's do that right 
now if I scroll down I can scroll down with my   mouse or face down on my keyboard I see there is 
a small footer I want to increase that I want to   add more information how can I do that same as 
with the header I go to the customizer because   the header and the footer are configured by the 
theme and we use the bloxy theme so what I can   do I can go to the footer you see the same 
structure multiple rows multiple areas and   that's how you can create a footer well already 
the the bottom row is already uh filled in so I   want to go to the styling of the bottom row I go 
to design Row background I click on it and I want   to change it to the green color but then I want 
to make it a bit darker so I drag it down a bit   like that then I want to go to the copyright area 
by clicking here I go to design I want to change   the font color to White when there are links I can 
make them a certain color orange for instance and   when I hover over the link I can change that color 
again well I'm not going to use a link over here   what I will do I will go to General I remove the 
copyright text current year is great and after   the current year I say web Divine that's it then 
I scroll down and I align it horizontally to the   center and for me this is great then I want 
to go to the middle row I see nothing there   because there's no content yet I can have multiple 
columns I can have three I can have four and also   these options are normally uh premium options for 
uh certain themes but here it is fre okay we have   four areas we see them over here now I can drag 
stuff in it how can I do that by going back so I   actually need to go to the footer and then you see 
all these options over here so I scroll down what   I want to add over over here in the middle row is 
the widget area one now you see something widget   area two widget area three and then the socials 
well this how I would like to do it it's up to you   what you want to do but I will just show you how I 
would do this so you know how you can do what you   want to do make sense I hope so let's go to the 
middle row design settings I want to change the   background to the regular color two and then step 
by step we can fill in the content of this area   but what I also want to do middle row design let's 
see the top row divider I want have a divider over   here a stroke that is color one three pixels 
and then full width okay that creates a nice   separation in my opinion it is within the style 
of the website so I'm fine with that I click on   widget area one and I want to start with a logo 
of our website so I click on the plus and if I   click on browse all we can fill in anything you 
can add to the WordPress page Brer or also known   as the Gutenberg editor um I go for an image 
I already have that image so I click on media   library and I want to use this one web Divine the 
light one because it has a dark background there   it is below I can have a text so I click on add a 
block and I want to go for a paragraph and then I   can fill in the text or type it I go to dummy text 
generator I grab a text over here you can fill in   any text about your company so I almost do not 
see it let's see if I say command Z and I paste   it here copy it that removes the St and now if I 
start typing it looks better then I go to design   font Colors oh wait wait wait I don't have to do 
that over here I want to do it at the middle row   settings so it will be applied to all widgets so I 
go to design the title font there's no title font   yet but I want it to be white and then the widget 
fonts the text white and now this will be changed   if there's a link I want it to be white and if 
I hover over that link I want it to be color one okay now I can go back to the widget area and 
this looks okay we're going to make it look   better in a minute the second area I want to add 
a menu so let me click on publish I go back I go   back I scroll down all the way to menus I create 
a new menu and I call this one privacy we need   to State some things on our website about how 
we deal with the information from customers or   visitors on our website I add a few items this 
is for every country different so I cannot give   you a uh one fits all solution so search for um 
privacy policy in and then in your country or   if you're going for an international website 
for international use so I go for the page privacy policy and at the page 
the second one is the cookie policy the third one is the gdpr for European 
visitors this one is not ymj but DCM a I think   for people from California I'm just adding them 
but you can use the one you want to use okay then   I'm going to create a new menu by going back 
create a new menu I call this title legal next   add items and then I want to have the terms and 
conditions and I want to have the germs and not   just kidding uh the terms of use okay and if you 
feel like it like hey let's do that then you can   click on publish it will be saved then we can go 
back to the footer or we hover over here click on   edit and then we go to widget area two I click on 
the plus and I search for a navigation menu there   it is the title is privacy and I select the menu 
privacy there it goes then I go to widget area   three plus navigation menu select legal and the 
title is legal okay then I go to socials and we   can add a few more maybe you want to use Facebook 
X Instagram maybe you want to use YouTube click on   the Plus or LinkedIn click on the plus and a few 
others you can email have your email over here   only if it's necessary if it's not then then don't 
use it so I go for email Instagram this is a lot   I have to say so I get rid of YouTube and this 
one so I have those four over here and I want to   open them in a new tab I can change the icon size 
make it bigger or smaller icon spacing we'll talk   about it later what I want to do I don't want them 
have I don't want them to be next to each other   but below each other so by the items Direction 
I go to vertical and I want to have the label so   label visibility turn it on great I want to show 
them on all devices so what I will do I'll go to   design font color white when people hover over 
it I want to be orange and for the icon I want   the icon to be white but when I hover over it 
I want the icon to stay white like that great I   don't want to use Capital so I click on three dots 
move those and then let's see let's make it a bit   bigger seems that it's a I'm not sure it seems to 
be different font maybe because of this if I say default yeah it's the same font I like 16 
you know what I make it a little bit more Boldt so reg medium and then above that is 
semi Bolt yeah okay this looks okay in my   opinion let's configure this further and 
this is how it looks and I want to make   it look a bit better here's a lot of space so 
what I can do right Mouse click my daughter yeah right Mouse click inspect going to make 
a use of a little bit of CSS because I want to   close this Gap so what I will see let me see oh 
over here this area it has an ID so when it has   an ID it has a hashtag I copy this ID command 
C or control c i close this then I go to the   customizer I scroll down then I go to additional 
CSS I do a hashtag and then I pi spaces opening   parentheses and then they'll create a closing 
one so I say enter enter in order to make sure   I have the right area I always say background 
hashtag 0000 z now I see I have the right area   okay and I get rid of this and then I say 
margin dashtop 10 pixels and now it is 10   pixels between the logo and this area I I can 
also say five and I'm okay with that let's say   six just because our son is becoming six this 
year yeah that's how I think I'm making websites   and sharing it with others teaching others to 
keep their birthdays of their children in mind   when making websites why not it's your website 
it's your life so I'm happy with that I'm not   happy with this there's a lot of space over 
here so again right Mouse click inspect can   be tricky to have this open when you also have 
the customizer but seems to be doing okay so here   you see when I hover over here this whole area 
is covered and then I see the class widget menu   so I copied that and a class starts not with 
a hashtag but with a point so class opening   parenthesis and closing and now I say margin 
top paste it nothing's happening 16 26 so it's   working but not that well so what I want to do 
I want to go to a negative margin so how about 14 12 he 14 is okay with me uh I want to make the 
titles a bit bigger but 14 is okay with me but   but then I want to do something else line 
Dash height I want to make that 20 pixels   to see what's going on it's really close to 
each other I like this more so how about 30   or 40 no 30 okay margin top 14 so for both menus 
because it's a class uh a hashtag I don't have   to explain it it's not a course a hashtag 
always refers to a a yeah to a division so   to one single area in your website and a class 
can be applied to multiple areas so normally I   don't pass it around but for you I make an 
exception then over here there's a lot of   space but I don't need to use CSS for that 
and go back click over here and then go to design what's that here socials yes ion spacing something like that then I go to the 
middle row to design family for the widgets uh   how about 18 and then for this one it's okay it's 
it's the right size so that looks better but how   does it look on a different device if I go to 
the tablet view this is really big I don't want   that so I go back to the widget area one on the 
desktop screen click over here click over here on   the three dots show more settings and then the 
width of the logo I want it to be 250 so now   if I go to the tablet it stays 250 [Music] okay 
what I want to do click over [Music] here let's   see and then go to horizontal alignment in the 
center widget two which area to also widget area three sometimes can be hard with clicking I 
don't know why it it I think it should not   become too easy to make websites there should 
be some level of difficulty so I think that's   why they use some trouble trouble how you say that 
they make it a little bit harder for us to click   that's that should be I think that's it that's 
it okay don't worry about this we'll fix it in a minute okay then we have the mobile there it is okay one more 
thing on the tablet this is really   a lot really wide so if I click on inspect 
and now it's getting wow let me drag this down that's getting even more challenging 
hi to Builder oh that's better okay this Ara inspect okay let me see it's again widget block nine so what I can say 
maybe let's see I'm not a CSS Guru but let's see   if I can fix something I go to additional 
CSS block nine Max doesn't even exist 300 pixels okay okay for the first time I I believe 
that I deserve a million subscribers you should   see you should see me right now I'm having my 
hand against my head like whoa I figured something   out okay this is cool and probably over here it 
still looks great yes but I don't want it to be   completely from from the left to the right so um 
I can also align it with this one that's I think 600 and then on the phone yes publish I go back to the 
desktop and I click over here then   I go to tablet now those text are G 
the labels so I need to scroll down   over here and it says the label visibility 
only on the desktop stop so I turn on the   tablet and then for smartphone I also 
turn it on there you go you're [Music] welcome the tutorial is already getting too long 
in my opinion so I should not do things like these   publish and voila so that's how you can create a 
footer in your WordPress website using bloxy theme   maybe you want to have a portfolio in your website 
so you can showcase what you've done for clients   well I don't want this tutorial to be too long so 
I created a separate tutorial for that I recorded   it already and I will show you in a minute where 
you can find it you can go to youtube.com and   search for Elementor portfolio tutorial 30 hit 
enter this is an old one four years ago this   is Dutch one there will be a new one when you're 
watching this I will upload it this week and then   can watch that tutorial and learn step by step 
how to create a portfolio where you can showcase   your work on your website using Elementor When I 
close the step I go to the our work page this is   what we will create you can see an overview of our 
latest work we can divide it by film photography   web design or a subcategory if you want to 
only wedding photography so if I click on all if I take a look at one of those items this 
one for instance photography I can click over   here navigate through all the images so you can 
showcase your work can scroll down see related   cases only photography only the same category 
and then I can navigate to other portfolio items   so that is what we're going to create in that 
tutorial we're coming to a close of this tutorial   there are so much more to explore I have a 9-hour 
course on the internet about how to make a website   is in Dutch I will also make one in English 
there's so much to cover for instance maybe   you want to have a blog page with blog post well 
I have a blog post tutorial that's two hours so   to implement that in this tutorials maybe a little 
bit too long knowing that not everybody wants to   have blog posts why would you want to have blog 
post in your website it's a way to get organic   visitors to your website so you get more traffic 
more traffic can mean more business more business   means more money more money means nothing it's 
nothing it's not about money but um if you want   to learn how to write blog post I will show you 
where you can find that tutorial and I will also   have I also have a tutorial on how to uh configure 
the blog page using blocky theme so you can follow   along in this tutorial I will show you um where 
you can find it right now so if you want to learn   how to write blog posts you can go to youtube.com 
and search for write a blog post 30 hit enter I   have two tutorials you need to go for the longest 
one this one it's the most recent one and I show   you step by step how to write a block post but 
not only that also how to apply for Google AdSense   Google search console rank mat so you can optimize 
your website and then we have learned how to   create a blog post from scratch you can search for 
blogy theme tutorial hit enter mine appears over   here with a small GL I will make a new one but 
there I'll definitely dive deep into how to set up   your blog page so you can watch that and then if 
you go to the website it will look something like   this here are your block post I configured the 
edges over here what is displayed over here where   the featured image should be then when you open 
the blog post I'll show you how you can create   look and feel of this page we can have stuff like 
this but you can configure it to your wishes and   I'll will show you how to do that in that tutorial 
we have worked with the colors of our branding if   you somehow want to change them look how amazing 
result can be with a few clicks you can change   the whole look of view of your website without 
having to go to any single place where you change   the color or decided which color it should be 
and then do it manually no you can just change   a few colors and then they will be changed on 
all places on your website let me show you how   it works so our website is finished what else can 
we do well I want to show you something about the   colors we use colors from the color palette so 
if I would go to the customizer I would go to the   colors look at this look at this I can make this 
orange I should have done that before because the   whole tutorial I'm like is it yellow is it orange 
I can change this look at that it changes on all   the places in the website so I can make it blue I 
can go to the green color I can decide to make it purplish or like that now everything changes 
accordingly not everything because this color   is chosen outside of the color palette so I 
need to do that manually but all the other   colors look at that or you go to another 
color palette well this doesn't always work let's try the dark ones no thank you 
of course need to adjust a few things but   um in a few clicks especially when you just 
go to your own pallet and then change those colors let so let me make 
this one bit lighter this one darker BM there you have it that's how you can 
adjust the style of your website of course I   need to adjust the logo so I could go to figma 
let me go to this color copy it go to my Logos   I go to this logo or select this also and I 
change that color to this one hit enter BM   there you have it I can export this import it to 
my website as an SVG and my whole style changed in   a matter of clicks I think that is amazing close 
it I have everything back the way it was so I'm   happy with those colors but hey you can change 
them when you finish your website it's important   to have a cookie notice area in your website so 
people can comply with your privacy policy that   is mandatory so let me show you how you can 
turn it on in bloxy theme I want to go to the   back end to bloxy I go to the extensions I go for 
cookie consent and I turn it on I can customize it it looks like this I can change the text I 
can change the cookie period I can change how it looks and I can make this a link the privacy 
policy I can link it to the privacy policy page publish and there you go accept as I said before 
there is so much more that we can cover this   tutorial can be 10 hours and I would still have 
fun making it but I think when my tutorial is 10   hours less people will watch it and not everybody 
wants to learn everything I have to offer so   that's why I created a playlist with all these 
tutorial I will make a lot of short tutorials   like how to um upload SVG backgrounds how to 
create svgs how to create an SVG logo how to   work with certain um tools certain features within 
Elementor so I will show you right now where you   can find those tutorials so in order to learn all 
those new skills for Elementor which I did not   cover in this tutorial go to youtube.com search 
for 30 cor purs or click over here there's my   channel click on my channel then go to playlists 
scroll down and there you see element or tutorials   right now I just put a tutorial in it one but uh 
here I will show you a lot of new things wow fdy   looking good man um yeah that's how you can do 
that and learn more about Elementor ladies and   gentlemen we're really coming to a close of this 
tutorial but there are few more things we can do   there are so much more things we can do so let me 
show you share a few tutorials with you that you   can follow as a follow up on this tutorial if 
you want to learn more about certain subjects   if you want to learn how to make money with your 
website I have an affiliate marketing tutorial 30 and there are a few the most recent one is two 
months old now um it's so you can say 2024 there   it is this is crazy this is seven half hours I 
show you everything I do I create blog post and   I make content with videos and rules and shorts I 
show you step by step how I do it and how I make   my money and how you can start doing the same this 
is groundbreaking if you ask me because um I have   not seen such an in-depth tutorial yet I'll just 
try to to also do it they're not as in-depth as   mine 28 minutes 30 minutes 52 1 hour 20 a lot of 
short tutorials uh where people just want to make   money through their tutorials with cool titles and 
stuff but I show you the whole the whole thing so   I think that's uh cool and that's also what I see 
in the search results a lot in the in the results   a lot of people are watching it so that's cool 
you can start with affiliate marketing or you   can create a course website tutorial F you can 
gain knowledge and you can create content about   it so I have a tutorial is already 2 years old 
almost 4 hours I will make a new one soon in q1   of 2024 and there's also an online course website 
where where other people can host courses on your   website and you share the revenue and people buy 
that and automated all that stuff that's why I'll   show you in this tutorial what else you can learn 
how to apply for Google AdSense 30 and then you   can place ads on your website and make money 
with that Google AdSense tutorial 2023 let's   than an hour and if you don't get approved there 
are 10 ways what could be wrong or how you can   get approved and if you want to sell things on 
your website you can go to woocommerce tutorial   30 I think this one is number one yes yes yes yes 
yes you can watch this tutoral I create a new one   every year and I don't know but I'm doing really 
great with with those um tutorials of woocommerce   and um I'm happy with that because they're also 
the best tutorials on the internet when it comes   to woocommerce in my opinion I really think so 
even though I don't check the tutorials of my   competitors too much because I want to have my 
own flavor in my tutorials so I leave it with   that thank you for this tutorial uh no thank me 
for this tutorial thank you for watching this   tutorial I hope you learn a ton of stuff I hope 
you're really happy I sincerely try to give you   my best without making the tutorial too long 
I learned a lot of new things last year about   Elementor and that's what I um implemented in this 
tutorial because there's also a current tutorial   WordPress tutorial 30 and it's almost the same but 
so many things changed that I decided I'm going to   make the same tutorial but better much better and 
um yeah I hope you learn a lot of stuff and I have   a great website with a successful business and a 
successful life I wish you the best and bye-bye

Website Setup Service

Leave a Comment

Your email address will not be published. Required fields are marked *