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