How To Create A Wordpress Website In 2023 _ Elementor Flexbox Container Tutorial

Making a website has never been easier .

And in this tutorial , I will show you step by step how you can create your own website .

Let me show you what we will cover in this tutorial .

I will show you how to get your own dot com 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 scratch using a free press theme and a free page builder called Element .

We will not just create a website .

We will 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 .

Element is a fantastic free page builder that enables you to create your pages using a simple drag and drop method .

I'll 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 the 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 feel of your website with the header , you can create something like this .

Those are like this or this .

You can make your whole head are sticky or just a part of it and you can make parts of your head are 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 home page 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 will make will be optimized for all devices for desktops , tablets and smartphones .

And if you want to , you can learn how to create blog posts on your website .

So you can be found through organic search results which can help you to get more clients .

I will also show you how to create a portfolio page and showcase your work .

We will talk about creating the right title for your website , finding high quality images , add external plugins to give your website more functionalities like extra elemental elements or I contact so people can reach out to you and we'll save 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 watch a tutorial and you follow all the steps , you'll be able to create an amazing professional website .

And not only that you can start to make websites for others and generate an extra source of income .

Those of people who have watched my tutorial say that they can do this now for a living .

So you can be the next .

Well , let me show you two more practical things in the description of this video .

I have time stamps .

So if you want 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 , you can go to the settings here at youtube , lay back 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 .

It will go back five seconds in the video .

If you can appreciate that I made this video for free , then please like this video and feel free to subscribe for more upcoming free wordpress related tutorials .

And now let's take a look at the three steps we will take in this tutorial .

So first you get your free domain name and we will get a web hosting .

What is a domain name ?

A domain name is the address of your website .

Web posting is a special computer that's turned on 24 7 that contains all your files , 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 , I think 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 it .

And 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 get started .

So in order to get your free domain and web hosting .

We need to go to web hosting 28 dot com hit enter .

I love hosting her and I'm not the only one .

If you take a look at all the reviews at trust pilot , you see that people are really excited about hosting her .

And if you take a look at the Google trends , you see the word is spreading more and more people are getting into hosting her and they are really excited just as I am .

So if you want to get started , we click on start now and you see there are four plans and I can tell you all the plans are really fast and it's maybe a little bit overwhelming four different plans .

But I will show you which plan is right for you .

You can get started with one website and then you pay less than $2 per month .

The only thing is you don't get a free domain name with this plan .

If you take a look at the most popular plan , the wordpress starter plan , you can create up to 100 websites .

In this plan , you have 100 gigabytes of SSD storage , which is more than enough and you can have up to 25,000 visits per month .

And over here , you see you get your free domain .

The big difference between the wordpress starter plan and the business wordpress plan is that you can have more gigabytes storage , but I don't think you need those extra 100 gigabytes .

I think this is enough for one hour , the websites , but you can have more monthly visits , but you can always upgrade later .

So when you reach 25,000 visits per month , you can upgrade to the business workers plan .

And if you know already you want to start an agency , you want to create 50 websites in the first year , then I suggest the cloud startup .

And the crazy thing is this is really affordable for cloud hosting .

As I said , you can always upgrade later .

And two more important things to say , all plans are blazing fast .

The only thing is the higher the plan , the more websites you can have up and running at the same time and still maintain the super fast speed of your websites .

So if you know , you want to create 50 websites in the first year , then I definitely suggest you go for the cloud startup .

But if you want to create one website or two or maybe five or 10 , I suggest you go with the worker startup plan and then when you reach 20 5000 visits per month , and I hope that will be the case for you and you can always upgrade later .

And the second thing I want to tell you , there is a 30 day money back guarantee .

So if you somehow , I don't know why , but if you somehow would not like the service , you can get your money back , no questions asked .

So it's solely risk free .

And I will show you step by step how you can create your first website .

So I select the word for startup plan .

I click on select and now we can take a look at the amount of discount we get .

And the great thing with hosting is if you are really sure you want to go for a few years with your first website , you can get the discount of $2.99 for four years for 48 months .

And that will save you $432 .

And then after those four years , you start to pay $6.99 which is still super affordable for a web hosting plan that can hold 100 websites .

If you just want to start with two years or one year , you can click over here .

And then in your first year , you just pay $2.99 per month and then you're still going to create 100 websites .

And after the first year , you start to pay $8.99 per month .

So the longer the first period , the more discount you will get when you renew your plan .

So if you have the budget and you want to get the most discount possible , you can go for the 48 months .

And after those 48 months , you start to pay around $7 per month instead of $9 but wait , there is more .

If you scroll down over here , you see have a coupon code and if you fill in 30 you click on apply , you get even more discounts .

So I scroll up again .

Now you see $2.69 for the 1st 48 months or 24 months or 12 months .

I go for 12 months .

I scroll down and I need to create an account .

So I will fill in my email address over here .

Of course , you need to have access to this account .

Then I scroll down a bit further .

And the great thing is with hosting her , you have local payment methods .

So if I'm from the Netherlands and I go to hosting her , I can pay with ID , which is in the Netherlands , the main payment method .

If you're from India , you also have local payment methods .

And that's the great thing about hosting her depending on where you come from .

There are more payment methods I want to pay with credit cards and let's see what we have over here .

We have to work for a starter plan for 12 months .

We can have up to 100 websites .

Our first domain is completely free instead of $10 we get a lot of discounts and the total amount I have to pay is just $32.29 .

It can be , that's a little bit more because of the taxes depending on where you come .

From , but this is so affordable .

So what I will do , I'll scroll down .

I will fill in my credit card details .

And as you see a 30 day money back guarantee and I click on submit secure payments .

It's redirecting us to the control panel .

Now , we need to create a password for our hosting account .

We need to confirm our password and then I click on confirm .

Now they are gonna ask a few questions .

I click on start now and then I want to skip those questions .

So I click on skip .

I want to create my first workers account so I can use my administrator email and then I need to create a password and then I click on continue .

I don't want to have those plugins on my workers website .

I want to start from scratch .

So I click on skip .

I will manage plugins later and I don't need to have a certain look .

I want to start from scratch .

So I scroll down , I click on skip .

I don't need a template now .

I can claim my free domain name .

So I click over here and then I select my domain name .

I want to go for a dot com .

You see all those extensions they have I go for dot com .

And if it's already taken , be creative with another domain name because you definitely want to have a dot com domain name , especially when you're into international business .

If you're from a local business check out if your country extension is over here .

But I want to go for dot com and then I can enter my desired domain name .

I go for we are web divine .

Let's see if it's still available .

I click on search and it is available .

So I click on continue and now workers will be installed on this brand new domain name which is completely free .

I click on finish set up and then I need to fill in some details for my domain name .

The question is , where do you come from ?

I'm from the Netherlands .

And did you buy this web posting personally or because you are a company ?

I choose personal .

So I click on next step and then I need to fill in my details over here .

So there I go .

My first name , my last name , my email in the Netherlands .

I'm from South Hollands , a city , my address space and my phone number and then I click on finish registration .

Now our domain will be registered .

And the great thing is this is crazy with hosting her .

Ultimately , your information , your email and your phone or what you just filled in is secure .

It's it's hidden .

It cannot be seen by companies that want to advertise to you that want to call you that's called Domain Privacy .

And with hosting air that is free with other web hosting companies .

This can cost $20 per year here .

It's free So now we can edit our website .

It's live already or we can go to the control panel .

I first want to go to the control panel .

So I click on manage site .

Then I want to go to the wordpress dashboard and maybe this looks overwhelming , but you're gonna be fine .

We don't have to spend a lot of time over here and the more you do , the easier it becomes , I really like this layout .

So you click on wordpress dashboards and what I want to do , I want to force the htps .

So our website will be secure like this .

So I turn it on and it's for this domain name .

So I click on install SSL and it says your SSL is being installed for your domain name in the background .

HPS will be automatically forced on your domain .

Then we click here on edit a website and ladies and gentlemen , look at this .

We will be redirected to our own brand new domain name with web hosting with wordpress installed on it .

Great .

So now we are logged in .

You just need to close this , click on the Wordpress logo .

OK .

Then we need to go to our dashboards .

Look at this .

This is the back end of our website .

This is what we will see when we are logged in and when you're logged in , you can adjust things in your website .

If you click over here on the house , you go to the front end of your website and you see you are alive already .

Your website is secure .

So everybody that goes to your domain at this moment will see this over here and that means you are live .

We have this bar over here .

That means that you are logged in and we want to go to the back end of your website .

Just click over here on your domain link .

Let me show you around a little bit .

When you use wordpress and use wordpress plugins , you will have updates .

So if I click on updates right now , there's a plug in that needs an update so I can select it and I can update to plug in every time .

There's an update , you will see it over here or when you're on the front end , you'll see a one over here .

I go back to the back end .

We can create blog posts , we can upload PDF S images , word documents and videos .

We can create pages , the home page , the about page people can leave comments on your pages or blog posts or products if you have them .

And here you can moderate those .

Let me skip this for now .

If I go to plugins , I see there's a plug-in called WP forms Light and some plugins when they're active also appear here at the left hand , this one for instance and we have appearance , we can change the look a few of our website .

We can add users so we can create a user that only can write blog posts on our websites or only moderate our posts or moderate the information we have on our website .

We have our wordpress settings .

And also this is a plug in .

I like to work in a clean up environment .

And also when it comes to wordpress , I want to work in a tidy space .

So right now wordpress is a little bit messy .

There are a lot of plugins , a lot of things we don't need and I want to clean it up so I can work better .

So let me show you how to clean up your wordpress website .

And when we are doing that , I will also show you a few configurations we can configure in order to do that .

I need to , I make sure I'm here at the dashboard and I want to dismiss this message and all this stuff over here .

I don't need it .

So I go to the screen options and I sag them all .

Then I go to all the plugins , click here .

So I select all the plugins and then I go to the build actions and that means I can adjust everything at once .

Everything I've selected , build actions , deactivate all plugins .

And in order to do that , I need to click on apply , then I select them again , build actions , delete , apply , hit enter or say OK .

And there they go .

Now , if I go to the website and I go to this blog post .

It's on every word installation .

If I click on it , look at this , you go to your domain name and then question mark B equals one .

I don't like that .

And Google does not like it either .

So I need to go to the back end .

I want to change the way it is displayed .

So I go to the settings Burma links and I changed the permanent structure from plain to bows name .

I scroll down and I click on save changes .

Now , if I go to the website , I click on Hello world .

Look at this looks so much better .

Hello world .

What else can we do right now ?

It says this post is created by hello at Freddie Corp dot com .

I want to change that in order to do it .

I go over here and I edit my profile .

You can change the look a few off the back end .

I like the default one .

I scroll down a bit and I want to fill in my first name over here 30 my last name over here and then here at display in name publicity .

I want to change it to my first and last name .

So if I select that , look at this now , it says how Fred the Corpus right now , we don't see an image over here .

If you want that .

Let me first update my profile .

If I scroll down , look at this I can have a profile picture .

It needs to be linked to my grave account .

So in order to have an image over here , you need to create a grave account .

It costs around $50 per month , but it's really worth it .

Not just kidding , it's free right mouse , click open link in a new tab , then you can create your gravity and then you need to upload an image .

And when you do that , it will appear on multiple places in your website .

But right now only over here , I update my profile .

So now it says , how do you , so can I see my image ?

What I want to do ?

I want to go to settings general since our website is secure , I want to have an S over here .

So HPS SPS , I scroll down and I need to save the changes and then I need to log in again .

Probably .

So I use my email address which I use to sign up for my workers website .

The information where I filled in over here and my password , then I scroll down .

I can change the sign language to something else and I can change this time zone .

So I want to change it to my city .

I live near Amsterdam so you can just hit a big city and you can also take a look over here which one you can decide and then summertime , winter time , everything will be changed automatically .

How do you want to display your date .

I can say 22 12 27 .

You can choose one .

I use this one in the time format .

I like to work with AM and PM in capital .

So I select this one .

My week starts on Monday and I click on save changes .

Great .

If you want to be found better in the search results of Google and other search engines .

It's really important to have a good site title with a lot of keywords where you want to be found on .

So let me show you how to create a super duper cool site title that will help you to be found on the internet right now .

The title of our website is we are web design dot com .

You also see that over here .

But if there are people that want a website , they do not search for .

We are web design because they don't know about us .

They search for web design company and then probably web design , Sydney web design , New York based on where they live .

So if I would search for web design , Los Angeles , I skip the ads .

What I see over here .

You see web designers , Los Angeles , web designers , Los Angeles .

So this is the title of the website .

If I change this title over here , that is what you will see over here in Google .

These are a lot of uh websites that show a lot of different companies , but I'm searching for a web design company website .

And that is this one Los Angeles web design .

So you see the keywords where people are searching for , they are here at the left and the more to the left they are the better you will be found .

So here Los Angeles web design , the two keywords , Los Angeles and web design .

That's what I want to be found on because when people search for that , I want to appear in those search results , the name of the company and then Los Angeles web design agency , Los Angeles , web design company , Los Angeles , web design .

So you see when you search for web design , Los Angeles , same as for Sydney .

Let me correct that I skip the ads .

Top , top , top .

OK , Jimmy Webb , web design , Sydney , web design , Sydney of design agencies , web design , Sydney .

So it's really important to use keywords in your title .

So instead , well , let's go to the back end to settings general .

We can go to the site out instead of saying we are web defined .

Welcome to our website .

We should have keywords in our title .

If you want to have a website , you are not gonna search for .

Welcome to this website .

No , you're searching for web design and then where you live .

So that's what I also want to do .

I want to say web design , my most important keyword and then in Los Angeles and then I can say or my company name Web Divine or more than 23 years of experience , something that needs to trigger people to go to my website instead of to another website in the search results .

So what is a compelling title if I search for website in New York ?

What I always do , I try not to copy them but I get inspired from other titles .

So there's a top website , OK .

Web design company and Seo marketing agency .

So that's also something I can say .

Web design in Los Angeles and Seo because people want to be found New York web design .

Number one , freelance website designer , thrive internet marketing agency .

So web design , Los Angeles or web design agency , Los Angeles and 30 plus yes experience or all in one packages .

Like we're gonna do the branding , the logo , everything you need to trigger people to go to your website .

Then there's a decline in a few words , explain what the site is about .

You will not see this anywhere in your website , you can leave it empty or you can fill us in .

We create highly converting websites using the best tools .

OK ?

So that's the title on the decline .

And if I save it , look at this .

Now , if I go to the website changes over here , web design agency , Los Angeles , web design agency , Los Angeles , all in one package .

It's important to have a great title .

When you create a website , you need to have a few colors , you want to use .

Don't go all over the place with a lot of different colors because they are your favorite colors .

Now , you need to think about what you want to display on your website .

Your website needs to represent your company .

And it can also be done in the colors in the fonts in the images .

So think about the style you want to have for your website .

There are a lot of things you can do .

You can Google for branding colors , go to images and you see a lot of nice tools .

For instance , this one , a lot of companies with certain logos , what are they expressing ?

You want to express trust or peace optimism and then you often see you see that over here .

Uh People use with color palettes , so not one color in your website , but three colors or 3 to 5 colors .

So if you can inspire , search for the website you want to create .

So maybe you want to create a bike website , bike shop , Sydney , what I will do , I will go to all websites , scroll down , click over here , just take a look at the style .

Those websites are in the top ranking of Google .

So they must be doing something great .

So maybe you want to work with the color red and then a few colors that are completing that color or cream , maybe you're talking about electric bikes or orange blue .

So when you know what kind of colors you want to use .

What you can do .

You can go to let's go and then start the generator .

Then you can play around with all those cars so you can just hit space .

Oh You see color you like for your website , you can lock it .

And then based on this color here , new colors show up here that are a great combination with this color .

So there you go .

And like this one , what I prefer to do is have a head color .

The , the the the the major color in your website , then a secondary color that is different this one for instance .

And then a light version of this one .

And if this will be dark color , also a lighter version , so I would have a light version of this .

So I can also copy this , go to the third one base it and they found to go for the lighter version .

I go like this , then I can lock it , please enter .

And if I don't like it , I can also change this one and then a different color maybe more uh in the warm area .

So what I have , I have the , the hat color which is dark green or dark blue .

So the head color , then the secondary color , let me direct it to the left .

Then there's a lighter version of this one and an even lighter version .

And then I also can have a light version of this one .

Then I can play around with that .

Ok .

Maybe I'm , I'm rushing a little bit through like , uh , just , uh , pick a few colors per space and then lock them and then you're done .

But please take your time because branding is really important .

Take your time to find the right colors .

Go to a lot of websites , maybe have competitors , maybe of all people to , to get a few feeling of what kind of website you use , what kind of colors ?

And there's no one perfect color .

But take your time .

And at the other hand , when you have found your colors , I will implement them in our website in a way that we , we can change them later .

And then all the colors in the website will change in a few clicks .

That's really amazing .

So you can always change it later .

So , but take your time and at the same time , you can always change it later .

Yes .

OK .

I think you can continue with that .

If you're happy with those scholars , you can export them as a PDF and I can call this one , the Web Divine two and I export it .

Look at this , this is what we can use in our website .

How great is debt .

Let's talk about themes with the theme .

You can change the look a few of your website .

So the the content on your website stays the same .

But if you change the theme , the content will stay the same .

But the look of few will change and every theme has their own special abilities .

So there are themes that have not that much abilities .

There are themes that have a lot of abilities or capabilities or however you want to call them functionalities .

And I found the best free theme you can use that has a lot of Amazing Pro features .

So I I talk about features about capabilities , about functionalities .

I all , all , I mean the same .

So I found the blocky theme .

It's in my opinion , the best free theme you can use , there's a pro version .

But in this tutorial , we're gonna make use of the free version .

And it's amazing what you can do with it .

And I will show you step by step how , but first let me show you how to get the blocky theme right now .

Our website looks like this and I really don't like it .

Of course , we don't have a lot of information on our website , but the way it is displayed is based on the theme we use .

What is a theme , a theme besides the look and feel of your website .

And every theme has their own functionalities .

There are three themes and premium themes and I want to show you uh what I mean by that .

So I go to the back end and I go to a parent themes and I see we have three themes by default .

They all have a different color .

So right now , 2023 is active .

If I activate 2021 look at this , I go to the website now , I have the same information , the title and the subtitle , but the , the style is different .

Everything looks different and that's what a theme does .

It decides to look a few of your website .

I've done a lot of research and I found the best free wordpress theme there is in , in order to get it for free , you go to F Corp dot com forward slash block C you hit enter and then you see there is a pro version and there's a free version .

And if I click on free downloads , we can download it over here .

Let me close this close this , then I can go to the back end of our website and we can go to appearance themes .

I can click on add new , then I can click on upload theme and I can drag it over here and then I can install it .

What we also can do , we can go to appearance themes at new and then just search over here .

So I search for blocky and either way it's fine .

So I hover over here and I click on install and remove this now and then I activate the theme .

Then we need to scroll down to downloads and we need to go for the Blocky companion .

So we have a blocky theme and a blocky companion plug in and those two combined is fireworks .

So I click on install blocky companion now it's active .

Great .

So if I go to my website , look at this , the style is different .

It's not that appealing yet , but this is a great foundation to build on and to make your website look so much better .

What I want to do now , I want to upload my logo and I want to upload my fave I can and maybe you don't have those .

Well , let me show you how you can create those .

I have tutorial about that .

So what I want to do now , I want to upload our logo and our fave I can if I would go to apple dot com and then in a new tip , I go to tesla dot com .

I see two fave icons .

The one from Tesla is over here and the one from Apple is over here .

I have this , I want to upload my own fave icon and I want to show you how to do that and what I suggest you do , you can make your favorite and yourself .

I have tutors about that .

You can also create your own logo .

If you search on youtube for make a logo 30 over here after tutorials on how to do it yourself .

As you see over here , I suggest you outsource it .

You can do that at uh 30 Corp dot com forward slash fiver or through upwork dot com .

Just hire someone that can create a logo for you .

Uh I know I should not create my own logos because or they are basic , which is sometimes fine , but I don't seem to have a lot of creativity in that part .

So I outsource it , a friend of mine created my logo .

So I I want to upload that one .

So this logo , a friend of mine created for me through in , in and it gave me a lot of options .

So what I can do now , I can select this and design , I can export it .

And even if I am like a notes , I'll create a different color .

I can do that over here and then it looks like this and then I can export it as an SVG .

And with the XY theme , you can import logos to SVG .

And what does it mean when you use SVG ?

The , the quality of our logo stays the same .

So if I would uh click on the plus , you see that the quality stays perfectly fine and with a PNG , that's not the case .

So if you can , I suggest you use and SPG fell for the save , I can , you can use a PNG file .

So I have my logos already in order to upload them , I go to the customizer and I hover over here on the three points here at the title because that's the logo area .

Then I select my logo and then I can upload a file .

So I click on select files and there I see web define .

Then I go to the branding and I have my logo which is an SPG file just 12 kilobytes .

I open it .

I want to copy the title , place it in the all text and in the description , I select it as my logo below my logo .

I have the site title .

I don't want that .

So over here at the settings at the site title , I turn this off great .

Now we have our logo over here .

If I want to upload my fave , I can I go back and I go back to the settings of the , the , these are the theme settings and there are a lot of extra functionalities within the free blocky theme .

And then here below , we have some core wordpress settings and I go to the site identity and then I can change the site icon .

I select it .

I upload a file , select files from my computer and I go for the say I can open , then I click on select corrupt the image and voila .

It's over here .

If I click on publish and I close it , we have our logo over here and we have our icon over here .

So if I'm on a different page and I want to go to my website again , I see .

Hey , there , I need to go .

Ok , ladies and gentlemen , it is time to take a look at pages and our menu .

I will show you how to do it .

But really important to think about what you want to display on your website .

We do not just create pages because we can now we have to think what kind of pages we want on our website .

And if you want to ask yourself the question , you need to ask yourself the question , what is the goal of your website ?

And then think about all the pages you have in mind and think , hey , is this page contributing to that goal or not ?

We don't need tons of pages just because so I will dive a little bit deeper into that .

So let me show you how to add pages , how to add a menu and then how to find out what kind of pages you can add to your website right now .

I want to do two things over here .

It says ready to publish our first post .

But why is it saying this and not showing a static homepage ?

Well , when we started out , it was a blogging tool and then a lot of editions were added and now it's a complete website builder .

That's why it's still here , ready to publish our first post .

So we can showcase our latest post on our homepage .

I don't want that .

I want to show my home page on the home page .

So in order to do that , I will create a few pages and let me show you how to do that .

I go to the customizer by clicking here .

Then I scroll down all the way I go to the menus .

And I want to create a new menu .

That's the second thing I want to do a menu with menu items that link to all the pages I want to create .

So I click on , create a new menu and I call this one main menu and that's just for the reference , that name .

So you can call it anything you want .

I like to call it the main menu and I want to link it to the main menu area , which is this area .

Then I click on next .

Now I can add items .

So I click on add items and now I can create a new page .

Well , of course , we want to have a home page .

So the first page , I call it home .

Now I click on add and I do two things at the same time I create a page and that page will be added .

Let me make this smaller to the menu .

So again , I can add more items .

And the question is really important question .

What do you want to place in your menu ?

And then a deeper question is , yeah , we're gonna get into the deep stuff .

What is the goal of your website ?

If the goal of your website is to get new customers , you should not say in your menu .

My uncle went to Australia , went to Australia .

He liked it and then add it as a page because that has nothing to do with the goal of your website .

So think about what you want to place in your head .

I'm gonna get rid of this .

Of course , I need to remove the page later .

So what you can do if you want to get inspired , think about the website you want to create .

In my case , it's about the web design agency for you .

It can be a plumber website .

So I searched for plummer in Cape Town plumber .

Let me get to this website .

I can also open the other ones .

So what do they have in their head about themselves ?

The services they offer a block and a contact aspect ?

Ok .

Really interesting .

So something about ourselves .

So what I can do , I can create a page .

It's called about people want to know more about who you are .

So we have a home page and about page and that page will be shown over here if I click over here , see home and about .

I add another item .

Let me take a look at another website , home services again about and contact also here about us installations , maintenance , gallery , testimonials , contact plumbing emergency .

So what I say over here is services .

I add it as a page .

Ok .

But I have a few services that I offer and I want to have those as sub items of the services page .

How can I do that ?

Well , I just add them as a page .

So what I do is branding as one of the services I offer , creating a logo , creating a branding .

Then we do the web design , then we do the development .

The latest thing is optimization , but I don't want to place them all in the menu over here .

So what I can do look at this , here's the services page .

I want to drag it a little bit to the right until it snaps and then I release it .

Same with web design development optimization .

And now look at this .

All those pages are hidden over here .

I don't see it yet .

So I close it .

Look at this .

There they are .

Well , we're gonna take a look at those scholars later , but that's how you can create a menu with something new .

It's looking clean .

That's how I want to keep it through out the whole website .

I want my website to be clean with one goal to get new clients and I can help those clients to get an amazing website that will bring them more clients .

That's the whole goal .

So I go to the customizer .

What else did I see serves as a block .

We can create a block .

So I go to the menus , main menu add items .

I want to create a new page called block .

What else do I want ?

I want to have a portfolio .

I understand that a plumber doesn't have a portfolio .

But if I would to search for web design agency London and I go for a few websites .

Our work is other way of saying a portfolio , portfolio , recent work , our services , recent project .

So you can decide how you want to call this .

It can be portfolio , it can be cases , it can be our work .

Let's do that one and I want to have a contact page so people can reach out to us .

So this is how it looks right now .

If you want to change something , I want to say our work above block .

That's how easy it is to do .

What else can we do ?

I close this , I go to the back end and if I hover over here , I can go to the menus .

So now we see our menu over here and what I can do , I can add custom links so I can say HPS 30 corpus hook dot com and say my inspiration .

I can add it to the menu and it will be added if I save it .

And I go to the website , I click over here .

I go to my website .

OK .

Let's go back to the menus .

I want to get rid of that .

Remove .

And if you have more options over here right now , we can add pages , block , post custom links and categories over here .

There are screen options A and FX link targets , title attributes , show more stuff .

I never go into this .

But if you want that , you can turn it on over here .

Save the menu .

And now we have our logo and our menu .

Then I go to the customizer and what I see when I go to a website , where's the home page ?

Where's the home page in our menu ?

No , home page here it is .

Plus it's a flying menu .

You home home , a lot of homes .

Well , sorry .

but I don't want that .

Let me close those .

I go to the menus and I want to get rid of the home page because by now people should know when you click on the logo , you go to the home page one more thing right now .

It says ready to publish your first post .

I don't want to place this over here .

So I go back back .

I want to place my home page over here .

So I scroll down .

I go to the homepage settings in the core area .

I change the display from our latest post to a static page and then I select the home page .

The second thing we want to do the block page .

I want to link it to the block page .

That means that the blocky theme will define the style of the block page .

And I can tell you Blocky does an amazing job with that and you can customize everything we're gonna talk about it later .

I publish it .

I closed it and now you don't see , ready to see your first post , but you see the home page so , so far so good before we create some colors using coolers dot co .

I hope you did it and you have your PDF with all those colors .

What I want to do now , I want to implement those colors into our website so we can use them in our whole website .

And let me show you how to do that before we continue with our header .

I want to take a look at the colors because right now if I hover over here , I see blue colors and a dark color over here and this color is lighter , I don't want to use those colors .

So how can we use certain colors in our website ?

Again , I go to the customizer and then we can go to colors and look at this .

There's a global color palette and by default block , it gives the main color palette , these colors look at this .

If I change it , you don't see a lot of change because there are not so many colors attached to those colors , you see , this becomes green .

But now let me show you power .

If I go to a color palette with dark colors , look at this , the whole look , a few of our website changes .

So if you want to create a dark website , you can change it in a matter of seconds and this is so powerful because maybe you're working on our website , you have created a lot of different aspects already .

And then you think , hey , I want to change the colors and you need to change all those colors in the websites .

I've done that .

I've , I've played around like crazy with copy and pasting in the whole database stuff .

Does it sound complicated ?

Well , it was a little bit , but now with this , it's quite easy to change colors in your website .

So those are the global colors .

And over here throughout the website , I can link all those colors to global colors .

And that means when I change one of these colors , it changes everywhere on every place where I decided to use one of those global colors that is super powerful .

So what I will do , I go to color palette one .

I want to make use of my color palette which we have made in Coors dot Co .

So I go to my home page to branding and grab my PDF .

So I grab my first color , which is this one , copy it .

And then I go over here and I past it and look at this .

When I do that , look at those colors over here , it changed .

Then the second color a past over here really important that you keep the hashtag there .

Otherwise the color will not work .

OK ?

It's the second color you see it over here .

Third color .

I want to place it here at the dark area color four .

OK .

In the lighter color , I want to place it over here , light orange and light green , light blue .

Place it over here , then this is nothing and this is white .

So what I want to do , I want to make the use the third color black .

If I want to use perfect black , I can use color three and color seven .

I'll leave it for what it is .

So now I can go throughout the whole website .

So let me go to the header to the menu to design .

I see those colors over here and I can choose those global colors .

And then whenever I change the global colors , this color will change and that will speed up your workflow .

So let me publish it and close it .

Now , we are ready to change the colors in our website .

As I said before , with the blocky theme , you can do a lot of things .

So what I want to do now , I want to show you how you can adjust the header in the blocky theme right now , I will show you what you can do with the Heather .

There are a lot of possibilities .

And before I do that , I want to make the home page background dark so we can see better what is possible with the heather .

So I go to the customizer , then I go to colors , I scroll all the way down and then I grab this dark color .

Look at that that's what I want .

Now , we can see the height of the header and I can show you more beautiful things .

Let me publish it .

Now , I go back and I go to the Heather .

OK .

What you see over here there are three rows , the top row , the main row and the bottom row .

And in every row , there are three areas , the left center and the right .

Well , right now you don't see it because I have no elements in the middle area .

But if I drag the menu to the center , look at this , I see nine dots and I see that the menu goes to the center and here at the left , we see elements .

So maybe I want to have a button , I can drag the button to one of those nine areas .

For instance , left at the top I want to see as soon as I place an element in the top row , there appears a new row .

If I click on the button , I can change everything , I can make it bigger .

I can change the label to contact , I can change the link , I can let it open in a new tab .

So I can adjust things over here .

And then at the design area , I can change colors for the button , but it is also possible to change the row settings .

So over here when I hover over it , I can change the main row settings , the button row settings and the top row settings .

So I can go to the top row , I can go to design background and change that too .

The green one , then I can go to General and I can change the height so I can make it smaller as since there's a button , it has a minimum of the height of the button .

So if I get rid of the button and I go for some html text , look at this .

Now it is smaller .

Now the text is dark on a dark background .

In order to fix that I click on the html , then I go to the design type of HML and change the font color to the white one .

And then in general , I can change the content .

So in general , you can change content at the design , you can change the design .

So if I go to the menu , yeah , I can change the settings and then at the sign I can change how it looks .

So I click over here and I can say contact us at and the number for instance , then a design I can say , hey , this should be smaller .

Then I go back , I can have a second menu .

I can have socials , I drag them over here to the right and they are black .

I don't want that .

I click on socials .

I go to design and I change them too white and when people hover over it , I want them to be orange .

So here's the initial color .

When I hover over hover , you see hover and then it becomes orange .

What else I can go back and then the search area right now it's here .

I can drag it over here .

I can change the color too white .

Look at this right now .

It's white .

I'm gonna over it , it's orange and then it matches with this area .

Then I can go to design uncheck this .

So at the left , I can increase or decrease it .

So I can make it look like it's one of the four icons with the same space in between each icon .

So we can make it pixel perfect as we want it to be .

I go to HML , go to design , make it bit bigger , change the text , but it's really nice .

What we can do ?

We can also have that lower area menu two in the center over here .

So now we have three areas and then over here , I can also change a lot of things .

But the question is not what we can do .

The question is what should we do ?

Because it's really nice that there are so many possibilities .

But we need to keep in mind what is the goal of your website and everything in your website should reflect that ?

So it's really nice that people can go to our Facebook and our Twitter and our Instagram .

But does it really help you to get more clients if that's the goal of your website .

Well , in my opinion , it is not on my website .

I will show people what I can do .

So they don't need to go to my social media accounts to see what I can do for them .

So I get rid of it .

I will have a website with a few pages and a few portfolio items where I showcase my work .

Do people need to be able to search on my website ?

No .

So I get rid of that if I have nothing here at the right .

It's a little bit weird to have the menu in the center .

So I drag the menu to the right and I don't need this secondary menu .

So I close it and the question is , uh it's up to you .

If you want to have to contact us area over here and if people can create an account on your website , you can drag it over here .

It can be nice .

And then when you are logged in , you see that over here .

Of course , you can also configure this .

And then again , if I want to change this over here , that the colors and stuff , I can click on the main row settings or over here , main row and then I can change how it looks right now .

By default , it looks like this and I can make it boxed and then it is close to each other .

And I can also make it full width .

That means it's totally from the left of the screen to the right .

So if I make the screen smaller , come on , minus , totally from the left to the right .

I prefer the default version like that's on zero , control zero and that can change the row height .

But I think it's taking a lot of space and I'd rather use that space to showcase what I have on my home page .

So I minimize the bit , bring it down until I'm satisfied .

Then I think 60 pixels is perfect .

So if I publish it close , it , it looks like this .

That's great .

When I think about branding , I think about colors and I think about funds .

We have not yet talked about funds .

So that's why I want to do that right now .

Let's talk about funds .

Now , I want to take a look at the funds on our website right now .

This is a default fund and I want to use another one .

Well , the fund is a really important part of your brand .

So don't take this lightly think about what kind of funds you want to have .

If I go to funds dot google dot com , you can type something over here .

So what I can do , I can copy this whole part , copy , paste it over here , type something .

And the question is how do I want to display those fonts over here ?

Well , if I have a web design company , I don't want to use Rubik eighties fade if I would do that .

Let me go to the customizer and I click over here on the three dots .

That means that I go directly to the menu elements and I go to design over here and change the default family to Rubik .

Oh , let's say beastly or burnt .

Look at this .

That has nothing to do with what I want to express as a company .

I'm a well designed company .

I'm about great designs that fit the branding of my website .

This doesn't fit and what I would do if I were you just go to other websites in my case , web design agency Amsterdam , take a look at a few websites and see what they are doing .

So this font is used .

I see that the font is quite big .

The font size .

OK ?

Nice .

Clean and clean font .

S OK .

Here you see uh uh Sarah font and explain in a minute , what are this ?

So you can get inspired and let me show you the difference between uh Serif and San Serif .

So if I say serif , Sarif , sorry , Serif versus San Serif , I go to images .

It's French sounds for uh without , here's a great example .

Serif is with those .

How do you say that extensions and San Serif is just clean without those things over here , you can use those in your website serifs .

But normally when you do that , it's a little bit more a special website or art website and what I would do .

What I always do , I would say website examples with serif .

The internet is amazing .

And then you can see also your images how it can look adventure reimagine .

This is a serif font .

The great thing is you can combine it with some serif also here .

So it's up to you like this is also something you can do .

So this is possible .

But normally for , for the website I have in mind , I think it's better to use a sound serif .

So over here , I can search fonts , but I can also search base by on category .

So I can say I only search for sounds serif and I also do not use handwriting .

Otherwise you get this , I don't want this to be in my menu .

So I say San Zarif and then I started scrolling by the way , if I take a look at my logo , it has a point on the I and it's a square .

So what I also will do , I place an I in the text so I can see if the uh text I want to use the fonts if they are square .

So I can use Oswalt .

But I don't like the , the font .

I think it's not a fit for what I want to do real way .

I like that font .

You need your sons .

Yes , this is , this is the clean font I'm looking for .

And the great thing is that the Google fonts are all free .

So what I can do , I can go for unit .

So and there you see it , services or work block contact .

Ok .

What I also see is everything is in capitals .

So if I want to change that , this is not in capitals .

So I want to click on the three dots .

Normally I like capitals and you see it in a lot of websites .

But since my logo is without capitals , I want to maintain it still over here .

But I see every first letter is a capital .

That's because I decided to do that when I was creating those pages , which is totally normal .

I do not consider myself to be a CS S guru .

My latest course about CS S which helps you to sell your website .

I did it in 2007 .

So I know a little bit about CS S .

What I want to show you is how to work with CS S and then we're gonna keep the basic .

And uh let me show you what you can do with CS S if I want to get rid of that , let me show you .

I close this .

I go to the menu item , right ?

Mouse , click , inspect , I use Google Chrome for that .

I'm not into Cesar .

I did my last course about Cesar in 2007 .

But what I want to do , let me see , I want to come here and then I see next transform then transform and then lower case and that's what happens now .

So what I will do , it's a little bit technical .

I copy this whole area or you just can follow along what I will do .

I go to the customizer and you need to type exactly what I type and I will uh zoom in a little bit so you can see it .

Sorry , I'm going too fast .

You go to the customizer , you scroll down and then go to additional CS S and the great thing is it's free with the blocky theme with a lot of other free themes .

It's not possible .

You need to go for the pro version here .

It is free .

And if I base it , look at this , no , it's no capital anymore , but I don't need all this stuff .

So I get rid of that .

Oh , I only want to leave text transformed .

So the menu list item is without capitals , lower case .

So I zoom in for you .

So you can type this text dash transform , lower case publish .

So in that way , we can use CS S to get what we want .

Well , let's go back to the customizer because I don't like this at all .

Right now , I go back to the menu to design and then I make it bigger .

Let's see .

18 .

OK .

That's great .

We don't have to talk about line I because there are , there are not multiple lines .

So I say zero letter spacing you can increase it in em or in pixels , let's say 1.1 and maybe 17 .

OK .

I'm happy with this .

I click outside of this area .

We can take a look at the font colors and I want it to be color four .

It's the same color as this color over here .

Why ?

People hoffer over it .

However , I want to be orange like that .

And then over here we have those other colors .

Let me change those .

So I scroll down and then here at the drop down , look at this .

If I hover over it , this becomes blue , but I can also change it to a solid color .

When I hover over it , you don't see that well , but the whole area becomes a different color as you see over here or you make it ved and then it also covers the background but except for a border over here .

Well , I want to use a solid color and then I go to the design and I want to change the font color to white .

When I hover over it , I want to still to be white because on the background color to change .

So the item's background color by default , this is dark color .

But if I hover over it , look at this , then I want it to be orange or green , that's too orange .

I don't feel it .

I have a better idea .

How about we make the background scholar white ?

I make the initial color dark .

Awesome .

And I see there are still capitals over here .

So let me fix that in a minute .

I go to design unit sounds and then I also make it bigger .

Great .

I can have a divider if I want to , I can have a dropdown shadow .

I can have a border radius of the drop down over here in the corner .

But I'm a fine .

I go back to general .

Now when I hover over services , I see those options .

I can also say that people need to click in order for this to appear and that's up to you .

I prefer hover because that's the the standard .

And then I go back to the home page .

We can go back and inspect this to see how we can uh use the CS S which you also can do , we can go to the customizer and we go to the menu to the main menu .

And then over here we open the page by clicking on the arrow down .

And here I can say branding without the capital .

Also here , web design development and optimization publish and our sub looks different .

No more capitals said .

So away we can't work and then there's a , a typo , I make them all the time up .

Great .

OK .

This is exactly how I wanted to look .

The question is , do we want this upper area or not ?

I leave it up to you but before we remove it or not , I want to show you what else is possible because we can work with a sticky header if I scroll down now , nothing sticks with me .

So let me show you how we can make this header sticky .

I think our header looks great already .

We can also make it sticky .

And that means that when you scroll down the header goes with you on the top of the page , let me show you how to configure that .

Right now , I want to make our header sticky .

And before we do that , I want to make our page a little bit longer because right now our page is not big enough to see the sticky states .

So I click on edit the page .

Then I go to a new tab and I search for dummy text generator and click over here blind text generator dot com .

And I want to have 1000 words into a few paragraphs .

I copy this all text , select all copy and I base it over here .

Doesn't matter how it looks .

Right now , I click over here .

I go to the website and now we can scroll .

So now we can see if our page is sticky or we can make it sticky .

I click on the customizer .

Now I go to the Heather and then to the heather step , I click on global header and I want to turn on the sticky functionality and by default , only the main row will stick with us .

So I have my top row over here .

If I scroll down , it does not stick with us , but the main row does by default , that's what we can do .

I can also say that the main and the Taro stick with us like this .

But what I see that the color changes over here when I scroll down .

It's interesting .

We're gonna talk about that in a minute right now .

We just want to talk about the stick area .

If you have a third row , we can also make them all sticky , all rows or the main in the bottom row , only the top row like that or only the bottom row .

I prefer to only stick the main row with us like this .

But there's more we can do , we can have an effect right now by default , it just sticks with us .

As soon as it reaches the top of our viewport , I can change the effect to slide down .

It can be that right now .

We don't see the effect immediately .

So I scroll down and then it will appear let's go back to the customizer to the main row or let's go back to the header's global header sticky area .

You can try all those effects fade .

They need to save it and check it because here it can be that you don't see it right now .

You do see it if you scroll down now , it appears like that can also be nice .

Or auto hide and show .

So when I scroll down , nothing happens .

But when I scroll up that it appears , I prefer the default one .

We can also have an offset .

So right now it's on the top of our page , we can also creates an offset some offset with 20 pixels .

And then you can see behind this area over here .

So it's not exactly at the top and you can enable on this , this on different devices .

So for me , it doesn't have to be used on a phone .

So I turn it off .

If I would go to the phone version , I scroll down , it does not stick with us .

And if I turn it on by clicking here , it does stick with us .

And then I need to get rid of this zero , zero and zero as I said before , we want to have a specific goal for our website .

Well , my goal is to get clients .

So I want to let that call to action , call to action is a button people can click on .

In order to take action , they can sign up for an email address .

They can call me , they can email me , get in touch with me through a form .

They can go to a certain page .

I want that call to action to be in my header and I wanted to stand out .

So let me show you how to create a call to action button in your header before we talk about the transparent header .

I want to talk about two things .

First , I go to the customizer and keep in mind what is the goal of your website ?

My goal is to get new clients that can help by making a website for them and do the branding and do the marketing .

So I wanted to be really clear .

So right now , the goal is for people to reach out to me say , hey , I want you to make a website for me so people can do that by going to the contact page .

But it does not stand out .

How can I do that ?

I go back to the header .

Look at this , I have a button over here .

I can drag it to the right there .

It is .

I already had it uh before .

So I already have the contact text .

I can change the UL two forward slash contact because then people go to the contact page .

I don't want them to open it in a new tab .

I don't want them to have a no follow link .

They always will see it .

There's no CS S class , I can change the style but I want to stand out .

So that's why I create this area over here .

Then I go to design and at a default state it is yellow .

The text is white .

When I hover over it , I get this color and that's exactly what I want button color on a sticky state , it's the same .

So I don't need to change anything .

I do want to change the border radius and it's up to you .

If you want to use border radius or everything , you want everything to be flat right now , it's flat .

There's no corner radius .

I want to have a corner radius , a border radius .

So I say 25 and then get a button like this .

I think it's nice because we also use rounding in our logo and then we can create margin and I don't want it .

So we'll , we'll talk about a margin and betting later .

So now this stands out , but I don't need it anymore .

So I go back and I go back and I scroll down all the way to menus .

I click over here .

I go to the contact page , open it by clicking here and then I remove it .

Great .

Then I go back to the button , heather button .

Get rid of the C capital C .

Make the small C .

Now , if my font is not as big as the font of my menu , let me see that one is 18 .

What I can do right ?

Mouse click , inspect over here .

I say font size and I make it 30 pixels .

So I can see if it's really working out of this and then I know it's working and I say 18 .

So it's as big as this one .

Then I cover this whole area , close it refresh the page and go to the customizer , two additional CS S I base it and I only want to keep the line F size 18 , publish close .

Great .

As I said before , we will dive deeper into the transparent header .

But before we do that , I want to install a page builder so we can , I can show you better what you can do with the transparent header and the page builder we will , we will use is elementary .

Elementary is my opinion .

The best free page builder there is I , I used it since 2017 and since that moment , my , my whole worker's life changed , making websites became easier than ever before .

That's why I use the tool .

This tool will always be free and there is a pro version , that's the whole concept .

They have something for free and then if you want to get to the next level , you can get the pro version .

So they will always have that uh free version free .

And I will show you right now for free how to install the free version of elemental .

Let's get right to it .

In order to get the element of page builder , we can go to 30 corp dot com forward slash element or it end .

Then we go to pricing page go plug in .

Let's scroll down .

And I have to say they hide the free version and they make it harder to find it .

So you know what I think they hide it completely what we can do .

Now , instead of getting it over here , we can go to our website to the back end to plugins at new .

And then I search over here for a mentor .

I know Elemental .

Since 2017 , they changed my life .

They made , making websites so much easier .

And I'm not the only one , more than 5 million installations and one of the most popular workers plugins ever .

I click on install now , then I activate it and then we need to do a few more things before we get started .

This is something I want to skip .

I skip all these steps , skip , skip , skip and I skip this and I skip this .

Then we go to and there are a few things I immediately want to show you first go to those three lines , go to the user preferences and I prefer to have an interface that is dark .

So I change it from light to dark and I want to turn on editing handles .

If I would click on new this area , I see three parts and I want to duplicate this or I want to remove this .

I cannot do that unless I go to the three lines , user preferences , turn on editing handles .

And now there are four options .

Now , I can duplicate it .

I can remove it .

It's so much easier .

Right now over here , those options were not available without those editing handles .

So that's what I want to configure , then I click on publish .

Now , I've created a page called Element or 81 .

Really important to click on the three lines and click on exit .

And then you choose what should happen when you click on exit and what I prefer .

That's the best thing .

Probably for you also go to the WP dashboard as soon as you leave Element or you go to the dashboard , whether it is this post or all post , you always need to click more to go where you want to go .

So I decide the worker dashboard apply .

So every time I exit element or I go to the dashboard elementary overview , close this and then I go to the screen options , check it out , closes , closes .

So we keep it organized .

Now I go to elemental settings .

Then the fourth step experiments and make sure when you scroll down that the Flex Boxx container is turned on , you can use it on live websites already .

I've done it already .

It works super fine .

Make it active and then save the changes .

Great .

No , I don't need this element or development developer edition .

No , I go to the website .

I edit this page .

I get rid of all these texts by clicking on the text area , three lines or three dots , remove paragraph .

Oh no , I need to remove them all .

You know what I update it .

Instead of using the wordpress page builder , we use element which is , in my opinion , far better .

The wordpress builder is getting better .

But right now elementary is far ahead .

So I click on edit with Element and now I can just remove it all at once .

Great .

So now we can use Element or to create our website .

That's great .

I'm gonna show you so much about this amazing tool .

The first thing I always want to do is go to the settings over here and change the page layout from default to element or full width .

It , it means that you will get rid of the title and we can have an image that's over the complete width of the website updates .

Now I want to click on the plus for the sake of uh working with this header and show you what's possible with the transparent header .

I want to upload an image so I will show you really quick how we can do that .

I click on the plus , click on this arrow down area .

Then I go to the ST you don't have to understand everything .

I'm gonna explain everything .

But right now I just want to get the job done .

I want to upload an image in the background over here .

So I go to the ste then I click on background , background type classic .

I grab an image .

You can choose any image I click over here on upload files , select cells .

I go to one of the images I have in my website to business and I grew up an image , this one , I open it .

Then I want to insert the media that ghost and I want to go to golfer , I go to layout , I want to change the minimum height to the viewport height .

So I say instead of pixels VH I'm gonna explain everything but right now just trust me that it's good to do this here .

I say 100% OK .

Right now , I want to make our background a bit darker .

So I go to the background , I close it , I go to the background overlay so we can have a color or an image over this image and I want to use a gradient .

So I click over here and I choose my first color , which is the green one .

And the great thing is we can choose all the colors from our blocky theme and I never use those colors .

I always use the colors from my theme .

So if I change one color in the theme , it will change everywhere in the website because I only use the global colors .

So I choose the dark green color as the first color and then the second color , the really dark color palette or I can change the angle to 90 from left to right .

And I can also increase the opacity and I will do that so I can show you what is possible .

I click on update .

And now if I close this by clicking here , exit , I go to the dashboard .

Now with one click , I can go to the website or I edit this with element or , and I click on the I and I go directly to the page .

So now let's take a look at the customizer and see what we can do with our transparent header .

So we , we have worked a little bit with mentor and now finally , finally , finally , I can show you how to work with a transparent header .

So without me talking about nonsense , let's dive right in .

Isn't that what we all want in life to have a transparent heather and just show it to your friends say , hey , this is my website .

I have a transparent heather .

Let's continue .

I click on the customizer .

I close this .

Now I go to the header to headers global header .

I scroll down and there's the option transparent functionality .

So right now when I it's it , the my page begins here because this is the header and below that begins my page .

If I make this transparent , this part shifts towards the top again .

So I turn it on .

There you go .

Look at this , look at this , look at , oh I love this .

This is part of a free theme .

It drives me crazy in a good way .

My wife said to me , Fred , you're crazy .

But in a good way .

And then I said yes , it is because of the blocking theme .

And she gave me a kiss on the cheek and we had a moment .

Well , ok , let's continue .

Now look at this .

Oh man .

Oh , wow .

What I can do now I can change all the colors , all the styling for the transparent menu because right now it's ugly .

It doesn't look really well .

But what I can do since we have a dark background , I can say I click on the logo and I can say , you know what in a transparent state , I want to have a different logo with white text so I can change it over here , upload files , select files and through FMA I export it a logo with white text .

You don't see it because it's white open , select now I get this logo which is so much better when it comes to visibility .

Same with the the menu .

I go to the menu by default , it is black like this right now at the design , when I'm in a transparent state , I want it to be white , of course .

And when I hover over it , I do nothing because then it will automatically get those colors .

So look at this , look at this , our menu still the same which I like .

So this is great .

What we also can do , we can go to the main row and especially when you have a light background .

OK ?

Let me show you first , let me show you first I go to element or so I close this .

It looks great when I scroll down .

This looks less great .

We'll fix it in a minute .

I edit this page with element .

Maybe I do want to have a light background .

But wait right now , I cannot reach this because it's behind the header .

No problem .

I go to the Navigator to the container and now I select it .

Then I go to the stall background .

I close it and I remove this part .

So uh I say I don't need it anymore .

No , I'll have a Southern .

It's hard to read .

But what I can do if you want to use a light background and still want to make use of the transparent functionality .

I go through the customizer , I go to the header , select the main row , go to design and say the transparent state background should be black butts , dragon a little bit to the right .

So people can see through it or if you want to maintain the style of your website , make it uh greenish a bit lighter .

I prefer black going to the left .

So we have the menu light background and we still can make it look like this so that our light areas are light colors .

Our light logo still looks great and is readable .

Even when you use a light background , I scroll down and it looks like this .

How can we fix that ?

Go back to the customizer , go to the header or you can go to the logo logo default is this color .

The transparent logo is this one and the sticky state logo wants to be the default logo .

So as soon as I scroll down the logo changes , well , how about the top area ?

We can do the same , I can say at the top row , no matter what happens .

Also when we are at the transparent state , I want this to be green and when everything would not be sticky .

So let's go back .

Um Let's go to the Heather heathers global header and let's take the tab with us .

And when I see what I see , it becomes white when I scroll down is because if I go to the top row designed , it says at the sticky state , the background should be white and I want it to be green .

So it will always say green when we stroll down , you see .

So talking about sticky and transparent , the sky is the limit .

I don't need anything else in my header and it's a free theme and I love that about them .

Really nice guys , the people that make this theme .

So I wanted to show you uh that , that it was possible with that .

I don't want to use the top .

So if you want to get rid of the top row , just remove all the elements in it and how it's gone .

And I prefer to use a dark background .

And if I use a dark background , I go to the header and then I go to the main row , I go to design , I don't need to use um any color over here so I can get rid of it , actually choose a color and I can get rid of it .

Then of course , that's only uh a good option when you use a dark background .

So then I would go to and I would make use of the dark overly or I would use my use of no background at all .

Only the colors .

There's also a possibility when I do this or when I get rid of all this stuff , go through the background , remove the image , go to the gradient and choose the same colors M to 90 update and they have the same effect , scroll down and it changes .

So that's the way to cook .

I'm really excited about this .

What you can do with the heather ?

Our heather looks fabulous .

But how does it look on a different device on a tablet or on a phone ?

Well , let me show you how to configure it in a way that looks amazing on all devices , how to make it look great on other devices .

I go to the customizer to the tablet view and then do it like this .

Well , using the header on a tablet or mobile , we can add everything we want so we can add a button over here .

Again , we have those nine areas .

So there's a lot we can do I can also place it over here or get rid of it .

I want to keep it clean and simple .

So what I will do , I will go to the trigger .

I can change it .

I look and feel I go to design and in a default state , I want to be white in a transparent state .

I also wanted to be white and in a sticky state , I wanted to be dark when I hover over it wanted to become orange .

Also here , orange and or orange , yellow .

It's a little bit in between .

OK .

Then we can go back to uh the icon size , make it a bit bigger .

We can have an outline solid .

We even can have a text label saying um menu but I don't want that .

And then when you click on it , this menu appears and we can um customize it .

So I click on mobile menu and I select the menu that's better .

Then by default , I want this to be open .

So the sub menu , I want it to be visible .

So I uncheck this OK ?

I can have a vertical spacing six .

Then I go to design and let's see what I can do over here .

I can change this to unit sounds James Boltons too 600 .

Also here for a sub menu , you need 400 .

When I hover over it , I want everything to be orange .

Also here , orange like that or yellow .

What should I say ?

I said Y yellow .

And now I'm saying uh orange all the time .

Great .

And if I want to , I can go back .

I can I add other stuff over here on the mobile or the menu ?

But why should I do that ?

It's a distraction .

So I don't use that .

So I'm happy with that .

Then I go to the mobile version and it looks like this great rectifying and I see those capitals again , if I want to get rid of it , I can do the same thing I did before go to me my menu and here at about I type it in small capitals services , our work and block what I can do .

Let me go to the header after the tablet few and here below .

I can have that button so people can go get in touch with us or we can drag it over here and then on the mobile looks like that .

So no , thank you .

Maybe here .

No , I drag it over here below .

So that's how we can optimize it for all devices .

Ok ?

We have created a beautiful header using the blocky theme with a lot of functionalities that in other themes are premium , you need to pay for that .

But in the blocky theme , it is free .

I really liked about the theme .

But now it is elemental time and elemental is an amazing free page builder that can enable you to create professional looking websites .

And that is what we're gonna do .

And since , well , they make use of a new way of making websites before they used sections in those sections , you can have columns and in those columns , you could have elements and they have changed that to containers .

So there's still a container .

It looks like a section , but there are no more columns , but there are elements , but they use the flex box container .

So it works a little bit different .

The learning curve is a little bit harder .

But I also step by step , how you can work with this amazing page builder .

I'm really excited about this .

I'm really excited for you because you're gonna learn something new .

I hope you will become as excited as I am because you're making your own website .

And now what I'll further ado let's make a website using element or before we start to work with Element or I want to go back to the customizer and change the background to a light one again .

So I click on the customizer .

Then I go to colors all the way down .

I bring this back to the white color .

No worries about the top header because we're gonna make a dark background in element or so I close this , I edit the page with mentor and before making a website with elemental walls like this , you click on the plus , you can have a few columns .

So you have one big section .

Let me make it a little bit uh higher minimum height .

This is the section , the blue area .

In the blue section , we can have columns , one column , two columns , three columns .

I can even duplicate columns .

So we have more columns .

I can resize them , do stuff .

And in those columns , I can add elements , a heading oh or a button come back or a video and I can drag them in any column .

It was a really nice way to work in elementary and it was also great to optimize it for all devices .

But the website could become a bit slow because of the whole way it was built up .

So this is how you used to make websites in elementary with sections .

In those sections , you would have columns and in those columns , you would have elements .

But now we work with containers .

What happens with containers ?

We get rid of the column .

Area .

Columns were nice , but they are also a little bit limited .

And with the container builder and elements without the columns , you have far more flexibility .

The learning curve is a bit bigger than with sections and columns , but you can do more things .

And in the end of the day , you'll know more about how to make great websites and I'm here to teach you everything .

So there are a few ways on how to import a container because we're gonna work with containers and in those containers , we're gonna place elements .

So the first way on how to create or import a container .

Is clicking on the plus over here , then we can choose a structure , we can choose a structure with one container with all the elements below each other or one container with all the elements next to each other .

Or we can have a left container and a right container .

And there are a few more structures you can use .

And if I choose one there , it is .

And I also see it over here , I remove it .

The second way on how to create a container or import a container is just dragging it over here and it will be there the default 11 container without any containers in it .

And the third one is dragging an element in this area and then automatically a container will be added .

So if you want to save some time and have a certain structure in mind , you can click on the plus and see if that structure is visible over here .

So maybe we want to have an a container with three parts , then you can choose this one and then get rid of those three containers and then you have three parts .

So over here , I use the Navigator to explain to you how everything works .

And the Navigator is also a great way to navigate through your website .

I think personally , that's also the reason why it's called a Navigator .

So let me break it down a little bit .

More .

I imported this premade area .

And I see over here , I have a container and if I click on the arrow , I see that are three containers in that container .

So you don't work with columns , but you work with containers and you can have methods , containers .

So I have three methods , containers in one container .

So if I click on the head container , then I can go to the layout and I can decide a few things right now the content with is boxed , that means that it's here from the left to the right over here .

If I would change that and I make it through it .

Look at this , this border is now totally at the left and here totally at the right .

So if I make the screen smaller , it's totally from the left to the right .

If I bring it back to boxed , it's here from the left to the right .

If I do that box , I can also decide what the width should be .

So I can make it smaller than the website is .

So the website is from here until here .

But I decide that this container should be smaller and then those containers within , they adjust automatically , the width will adjust to the width of the container .

If I remove this , I'll get rid of it , I can change the minimum height .

Uh by the way , if I would play something , an element , I can do that by clicking here and then I go to all the elements .

If I drag an element over here , the height of the container will automatically adjust .

So I can go to the container change the minimum height or I can let the elements decide how high the content should be .

What I prefer is to set the height of a container .

So uh let's bring it to six on the pixels and you can do that in pixels or you can then do it in view board height .

What doesn't mean Viewport height ?

It depends on the screen of your visitor on your website .

It will say if you say Viewport height and I say 50% it will say that this will fill 50% of the screen of your visitor's computer .

So if he has a big screen , it will be bigger than when he has a small screen .

So if you want to have a pixel perfect height , no matter how big the screen is , you can do pixel perfect .

You can say 600 .

So let me go back .

If I want to go back , I go to this area and I drag a container over here .

They found to get rid of this one .

See right mouse click , delete what I can do .

Now , I can click on the plus at an image , drag it over here .

It's really big .

Now I can , let's grab this one .

Now I can duplicate it , applicate it , duplicated and duplicated .

If I go to the container .

Why is it below each other ?

Because here at the container , uh there's no direction .

If I say everything should be vertical , then everything will stay exactly the same .

But if I say I want everything to be horizontal , it will go from left to the right and it doesn't matter how many times I will duplicate it , it will fit in one row .

So if I go back to the container , everything goes from the left to the right , but I can also put something in between .

So I go for a heather I say next .

So the text is wrapping a bit weird .

So let me remove a few images like that .

But what I can do if I go to the container , I can put everything next to each other below each other .

So then the text appears over here but also the other way around .

But I only use this in tablet view or in mobile view .

I'll talk about it later .

So let's put it from the left to the right .

Let's remove all the images .

Now I have this text , I can duplicate it , duplicated and duplicated .

What I see by default is going from the left to the right .

That's OK .

Let me make this a little bit higher , let's say 500 pixels , but it's solely as a top .

How do I get this here at the center or here below ?

Well , depending on the direction , look at this , if I say the column is vertical is below each other .

When I say vertical , this changes and this changes .

So look at this , if I go to the left , they look at this area and this area it changes .

So if I put everything from the left to the right , that's OK .

But now I can justify the content , I can say everything should be at the left , which is already the case , I can say everything should be at the center .

Now everything is in the center but still close to each other .

So not here at the left , not here at the right .

I can put everything to the ends .

Now look at this , I can have space between , now there's space between .

So here at the left , it starts here at the right , it ends and everything else is evenly divided .

So if I would duplicate one of them , this space over here is still evenly divided .

I go back to the container , I can also create some space around .

That means that there's also space here at the left and at the right .

So with every element , there is the same amount of space here at the left as at the right .

So here is twice as much space it over here .

And I can also say space evenly .

That means between every element , both left and right is the same amount of space .

So this area , this er maybe you're thinking 30 what are you doing ?

What are you talking about ?

This is behind the the header .

It's so complicated .

What are you doing ?

Ok .

Through this tutorial , I will show you step by step how everything works .

It has a learning curve but I'm with you .

And if you have any question , please leave a comment .

I will do my best to create more tutorials to explain everything to you .

This is amazing making websites like this is amazing .

So right now we justify the content on one level , but we can do more , we can align the items by default , it's at the top , but I can also bring it to the center .

And since we're working with a horizontal row , when I say center , center is vertically , when I make it vertical , then horizontally , this is in the center .

So depending on the direction , this changes , I can also place at the end right here below or I can stretch it .

So let's say I bring it to the center , what I can do now , in order to make it even more flexible , I can select one of the headings , go to advanced and overwrite the alignment .

So even though everything is in the center and at the center , I can say I want it to be at the start and I go to this one advanced , bring it to the end .

So now you see that , that the , the things we can do and and right now it's stupid text a few columns and you're like , what are you doing ?

But through the tutorial , I will show you , show you the power of this tool .

It is amazing what you can do with this .

If I remove something , everything adjusts automatically .

So if I have three boxes with three features , I want to show and then I think , hey , but actually there's 1/4 feature I just can say duplicate it and then I adjust the information and then automatically it will respond .

Well , there's more to show .

But right now I want to start with a container .

So I drag it over here .

I want to start with the style the background gradient with this color , the green color , the second color will be this dark one .

I change the angle too 90 and then I'll show you what you can do .

So I go to the layout and I change the height to 600 .

So now you see how beautiful it looks with this background in the menu over here .

I like to keep things organized .

So I double click on the container in the Navigator and I call this one .

The hero .

The hero is the first thing people will see when they enter my website .

And then I start to think again , what do I want to show in my website ?

I want to have a clear text about what people can expect from me .

And I want to show an example of what I can do for people .

So I want to show a website example that I have made .

So people can see at once , hey , this guy delivers some quality and it's really clear what he has to offer for me .

So what I will do , I will create two parts over here .

So I inject this container over here and then I can duplicate this container .

And what I see by default , those containers are below each other .

Then again , if I go to the hero container , I can change direction to left to right .

Look at that .

That's how I do it .

No , I want to start with a heading over here .

I drag it over here .

That's how easy it is and it's here at the top .

I don't want that .

So what I will do , I go to the hero and I say the contents should be aligned in the center .

Oh , so right now I selected the container .

When I select the container , I see three steps over here .

The layout self-explanatory here , we can change the layout , then we can change the style over here , change the colors , background , work at borders , shape , dividers .

And here with the area we can play with the margin and the betting , we can create motion effects , transform things , make things responsive and add some custom CS s which is by the way , a pro option .

But thanks to the XY theme , we can also add CS S in our theme and then we , it will still apply within an element or so , depending on what you select , there are three taps or almost always three taps layout style advanced .

If I go to this heading , look at this , we see the tap content so you can change the content .

We have the style and depending on the element , there are different styling options and then we have advanced which are the same options as with a hero .

See .

So we're gonna explore them more and more .

And if I would add an image for instance over here to the the right I see content , but there are different options over here .

And at the styling , then when I would go to the heading .

So so far so good , I go to the content and I can change the text so I can change the text over here or by double clicking or triple clicking over here .

We make websites that generate , that generates customers .

OK ?

So far .

So good update what I want to do before I continue .

I click over here .

I go to the site settings .

I go through global funds .

L If you go to funds at google dot com , I decided to go with uh Nito Sons as a normal font , but I want to go um with open sounds as the as the default fund .

So primary , I will say open suns everywhere , copy paste it secondary also open sounds third one .

So by default , the text on my website will be open .

So it's updated and then this is the fallback on Sarif , which is great because I don't want to use uh serif .

I go back then I go to the typography and over here the body text typography .

I want this to be open source and default text fund .

I think 18 is great big letters and then oh the headers H one H two , this is the header .

I want them to be sense salts .

So I copy this selected over here H two .

Did you see that the change ?

That means that this is an H two .

A default A header starts with H two .

You can have only one H one header on every page that's really important for Google .

And after that I will use H two headers or headings face it .

There it is .

There you go .

So two fonts and that's totally fine for me .

Click here , go to the change the text color to a global color .

That means that if I want to change the global color later on , it will be changed over here .

Typography by default is sounds .

So if I go for nuo sounds , it should be exactly the same .

And that's the case .

So I don't need this and bring it back , I can make it bigger .

OK ?

We make websites that generate , generate customers .

That's my goal .

I want to show that to people .

I know how to get customers from websites and that's what I want to help people with .

So then I want to have a call to action , actually , two calls to action .

And then I take a look at Apple really smart .

They have two options .

I see this .

They have a clear image .

People get excited and they think , hey , I want that .

So , or people are convinced and they are like , ok , where do I buy this ?

Well , there's a really straightforward button on the website that says buy or people are like , OK , that seems nice .

What does it offer ?

I only see two cameras instead of five .

I want to learn more .

So all the customers can be helped with those two buttons or people want to learn more or people want to buy or people close the website .

Well , if I take a look at tesla dot com , also two options , create a custom one that will take longer or see what's already available .

So people that are like , OK , I want to create my custom one with a certain color click here and hey , I want to have that as soon as possible and then they scroll down and again , two options .

The images are great .

Images are really important in your branding .

So we can learn from those amazing websites .

People that spent companies spend millions of dollars in marketing and we can just take a look at our website and learn from death for free .

So I want to have two calls to actions .

So I go over here to all the elements and I drag it here below how the changes to our gas or our work .

Then I search for work in the link and then I can select the page , our work .

So it will link automatically to this page our work .

Great .

Then I want to create a style , but there's another call to action I want to have .

So I will duplicate it .

The time is below each other .

I want to have this next to each other .

How can I do that ?

Let me explain in a minute .

First I click over here , I want to change this too .

Get in touch and then I want to go to the and then I see the button typography that's already OK with me , I want to go for the background color .

And again , I want people to get in touch with me .

So I changed the color to this one to get some attention .

And then I want to change the border radius to 25 and then I can say right mouse , click copy and base .

But then I prefer if I click over here not to make this yellow because then there's too much yellow .

The only color I want to use over here is to get people to the contact form or to reach out to us to call us .

So I want this to be a another color but I want to maintain the style .

So I don't say I want to have a different color .

OK ?

Why not ?

Let's go with green .

No , no , no , no .

So what I prefer to do in this case , I click on the color and I make it transparent and then I want to go for a border type solid and that will be white .

So our work and get in touch or get a quote and , and a lady will talk about what you can do is split testing and then see uh get in touch uh on page one and then the other page that other people will see other visitors is get a quote and then you can see what triggers better .

What are people clicking more and get in touch or reach out to us or get a quote .

And then you can see how we can comfort more people really exciting stuff .

But I want this to be next to each other .

How can I do that ?

I go over here to all the elements and I drag a new container because right now over here in this container by default , everything is below each other .

So I can say , you know what , I'll put everything next to each other , but then it just looks weird .

So in order to fix that we create a new container , we import it over here and in that container , I want to have this and this and every container has their own rules .

So over here , I can say yes , I want everything to be from the left to the right .

And that's how we build websites .

Then I bring this more to the left .

So our work which goes to that page and get in touch should go to the contact page .

Also .

What happened when we hover over here ?

Well , over here , I can go to the and say when people hover over here , the background should become green .

I'm also over here still .

However , in the background should be green .

If I want to create more space or less space over here , I go to the container and then over here at the gap between elements , I can increase it or decrease it to zero so I can adjust everything pixel perfect .

Then we make websites that generate customers .

I'm happy with that .

I update it and then I can click on the I it's really nice about element .

It looks nice .

But now when I want to change something , look at this , since I use the I and I recite that I want to say work two and I click on update , I don't have to refresh the space automatically .

It will be refreshed .

And this is so nice when you think about work flow and speed , it is just so intuitive .

So that's what makes me really happy .

And what I also see here at the left , everything seems to be in the same place .

But when I go to my website , this is wider than this .

Why is that ?

Because we use a theme and a page builder , the header is from the theme and this is from the page builder .

And with both the theme and the page builder , we have the settings for the width .

So if I go to element or I go to the three lines to the side settings and layout , it is 11 40 I want to keep it that way .

That's a great width for a website .

Now , if I go to the customizer of the blocky thing , I can go to general layout and I see the width is different .

So if I base that now I have the same width for both the page builder and the thing .

So if I close this , everything is lined up perfectly , I have been making websites since 90 99 .

I started in Front Page Express .

Then I went to Dream Wever and , and wordpress and now I'm still with wordpress , but still to this day , I'm sometimes confused about betting and marching .

Instead of telling you right now in front of the camera , I will just show you how it works .

Betting and marching coming next right now over here .

I see there's small space so it's not perfectly lining up and that has everything to do with betting and margin .

So what is betting and what is margin ?

Let me show you if I click over here and I go to advanced and I give this a background , let's say yellow one or orange right now , you see that the text is really close to the border .

What you also see is that there is a small gap between this container and this element and that is everything to do here at the layout with margin and betting what is margin , margin is creating space outside of an element .

So I have this yellow background and when I increase the margin , that yellow background does not go with us , but I create space outside of this element with betting .

It's the other way around .

I create space within an element .

So now I will see there will be more space between the text and the background .

So let me do that .

So if I would also say 22 margin creates space outside of the area , bedding creates space within the area .

If you don't use bedding , your website will look ugly .

So please always use betting .

This looks .

Let's say that this looks better than this .

I'd never want to see that in the website .

Sometimes people come to me , hey , I made a website based on your tutorial .

This is how it looks .

And then I see that I'm like , oh the betting and the color .

So then I think maybe I should make better tutorials and that's why I'm doing my best right now to talk about margin and betting , that's why you see that gap .

If I make this zero and zero , look at this .

Now there is still a gap .

So if I click over here and vote advanced and I uncheck the patting , look at this .

Now it is gone because the betting is inside of this container .

So if I turn this on again and I remove it , then that space is back because by default , there's always a little bit of betting .

That's how it works with betting and margin .

So I go back to the elements , scroll down backgrounds .

No , thank you .

So over here how to make use of no betting .

Um And now everything is aligning perfectly .

I think there can be more space over here .

So then I go to container layout in the beginning , maybe you are searching where everything is and the more you play around with this , the more you work , what element or the clearer it becomes .

I say 20 update at ghost .

We make websites that generate customers .

And now I want to show my work double click or click once and go to content , get rid of the two .

And then I want to add an image that shows me how good I am in making websites .

So I dragged this image over here .

I have this image on my computer and you can Google uh on youtube on how to learn things like this , how to make it .

I go to the one the folder to home page .

And then I have here my website which I have made and I make sure it's visible on all devices .

So I want to show it it's a PNG so it has a transparent background .

And what I always want to do , copy the title of the website based in all text and based in the description , insert the media and now it looks like this .

Let's update it and I would look like this .

OK .

That's OK .

We can make it look better in my opinion , but this starts OK .

Let's take it a step further .

I have multiple of those images so I can remove this one .

I can search for a carousel .

I drag it over here and then I can have multiple images .

So let me add another one , upload files , select files and then I go for console delivery open .

And now I can select this one , hold shift , select the other one and I can create a new gallery .

I can change the order and inside the gallery right now it looks like this .

So first the image size I wanted to be large , then I want to show only one slide at a time like that .

And now I can slide nice .

But I don't want people to do that .

I want to it to go automatically .

So uh the navigation , I don't say arrow and dots , arrows and dots .

I want to say just dots only those dots over here , I don't want those arrows .

I don't want those dots .

So over here at navigation , I say none .

I don't want it to link .

I don't want it to have a caption .

So I go to the additional options now to turn on auto play .

When I hover over it , I still want to uh continue .

So I say no pause on hover , no pause on interaction .

And every three seconds I want to show a new image infinite loop .

So after the latest image , the first one appears again and to change the effects from slide to fade .

Look at this 123 like that .

I want the animation speed to be a second which is 1000 milliseconds and the direction doesn't matter because I'm fading it instead of sliding it updates .

There you go .

So people know what we can do .

People can learn more about our work , see our portfolio or our work or our case studies or they can get in touch and here they can see already a little bit of what we can do .

So I want to create multiple images over here so people can see what I can do for them .

Well , this is a lot of space but I think it's good .

I can also bring it down .

So go to the hero layout , make it look like this , but it's it's it's too close .

So uh I think 600 pixels is fine and then what I want to do , I want to go to the style of the container .

Close this , I do use a shape divider at the bottom .

I can choose a type so I can have mountains like this or clouds or , and what I think only , I would only use two or three because I think if you use pyramids .

Yeah .

Yeah .

OK .

P is OK .

But zigzag also , OK .

And then you can change the width , the height .

But uh , it should be beneficial for the website and not get people away from the goal of the website .

It should not be too distracting .

That's what I mean .

So what I prefer is waves I can play around with those , change the height , I can flip them , I can invert them .

And actually I'm a , I'm ok with this looks great in my opinion .

So let's leave it with that .

And now if I take a look at the first part of our website , our hero , it looks nice .

And when people scroll down , which is not possible right now , but you would see the menu in a different way .

I like to keep structure in my website .

So also here in the Navigator , I want to have um some clarity .

So I say website title or just title .

I know it's a website and here it's right are or Roselle , by the way , this Navigator , I can also bring it here to the right .

But then my website becomes a bit smaller .

Um , you can get used to it but I prefer to just keep it flowing and then I can get rid of it or I can get it back .

So , we have created a hero in element or ?

Congratulations .

I hope you like the two .

Maybe you're like , oh , it's so hard .

It's so frustrating .

I don't understand .

You're going all over the place .

Yes , I am .

But the more you watch this , the more you play around with this , the easier it becomes .

I , I love the Flex Boxx container .

It's , it's easy at the end , it's easier .

It's faster your website will be faster .

Uh And now step by step , I want to dive a little bit deeper , show you different aspects of the elemental Flex Box container .

So um let's dive a little bit deeper with the next part in this tutorial .

So now I click on the plus over here .

I want to go for six areas .

Actually not , I only go for three , but they are over the three over here .

So I remove those ones .

I click on the plus .

I search for an icon .

Bucks , I drag it over here and then I want to change the content .

So I want to change the title .

I want to say we listen , we think it's really important to listen to our clients .

What is our goal for the website ?

So that's the title .

And then the second thing is a text .

So I explain a little bit what I mean by .

We listen , I want to tell you that a text writing , uh an artist .

Uh , so you can hire someone to write a text for you .

But , uh I always started out with my own text for the websites I made and I'm doing fine .

But if you want to take it to the next level , it's not wrong to let someone else take look at your text and see if they can be improved .

So I want to find an icon that suits this text so I can search for an air or listen , that's there .

So I can insert it or maybe you're not into ears .

You're afraid that your customers are neither that I can search for a BP light bulb .

Ok .

This is how it looks .

Uh I don't like it , it looks like this .

Oh , I don't like it .

So how can we make this look better ?

Well , here we can change a few from default to stat or framed .

I want to go for frame shape .

I can make it a square or a circle .

I like to circle because everywhere there are circles and rounding , I can have a link .

I don't have a link so I don't use it and I can change the position .

That's really important .

I want to bring this to the left like that .

Then I go to the style .

So we have the content now I want to style this content .

So I start with the primary color , which is this one and then the secondary color is my green color .

I can play around with the spacing .

I think 15 is great .

I can change the size .

So let's start with zero and go to 20 .

We can play around with the betting increase it .

I think 15 is fine .

We can even turn it a little bit , look at this .

And I think then it's ok .

We rotate it a little bit , then the border .

I don't want to have a border .

So I say zero .

Now it looks like this already a little bit better .

I close the I can panel and I go to the content panel and it's already aligned at the left .

I think that's great .

The top alignment is also fine .

I want to change the color of the title to this dark one that I got .

Biography font is OK .

But I wanted to make the text a little bit smaller .

18 , not too big .

It's OK .

No tech stroke or shadow .

Then I go to the description and I want to change the color to the dark one .

The typography , let's say 13 to add another word .

We listen to your story and ask important questions to find out .

So now there are three lines I like that better .

So I updated now what I want to do .

Now , I want to go to the container to advanced uncheck this margin .

And then here I want to go into the negative .

So minus one minus two , et cetera , I want to bring this up .

So it will be in front of this nice curve .

So let's say a minus 70 .

So now I want to give this a background .

So I go to the container over here that contains the I can box and then I go to the ST background of the container and I want it to be white .

I want to go to the border on the border radius .

I wanted to be 20 if I update it and I take a look .

OK ?

I want to increase the patting right now .

It's , it's too close to the edge .

So over here I go to advanced and I increase betting 20 what I can do now I can duplicate it and I removed this .

OK ?

I go to the first container .

Then I go to ST border .

I want to go for a box shadow .

I don't do anything with horizontal , vertical and spread .

I only want to go for 20 maybe more 30 shadow , let's say 25 .

Now I can copy the cell and paste it over here .

Right ?

Mouse , click past the ST and base the what I don't like , of course is that those three areas are sticking together .

There's no space in between .

How do I fix that ?

I go to element or to the container to lay out and now I can increase the gap between the elements .

But when I do that , look at that , this slides into the next row .

Why ?

Because over here at the rep , we said it needs the rep .

If I say no , it will stick on one line so I can increase this and look at this automatically , everything stays the same .

That's really nice .

Even if I would add another one , look at this , it'll stay in one line .

That's what happens when you have the wrap on .

No wrap .

So when you have no wrap , uh let me see .

Yeah , better .

OK .

Now I want to change the content over here .

So the I can and first I want to say we do not only listen , but we think along , I think we think along , I want to change the text , then I changed the icon , maybe a handshake like working together thinking along and then the third one , we are fast .

So I want to go for 80 clock .

This one .

Can I change the text ?

That's enough .

So we listen , we think along and we are fast .

Great .

I want to reduce the space over here .

So you should know by now that I should go to container to lay out and then I get in between how to reduce it to 20 Yes better .

I want to bring it up a little bit more .

So I go to advance at the container say minus 85 .

Ok .

Since I brought this up , look at this , here is less space than here .

How can I fix that ?

Well , I can go to the hero , go to advanced and then at the patting and check this and at the bottom I can increase it .

You see every , everything the , the height stays the same .

The only thing that happens is that this shifting up , although I think it's in the center better .

I'm happy with the results .

We have a dark area , we have a light area .

Now , I want to create a new dark area , even though this is a small area , I'm still going for the dark area .

So what I do , I click on the plus and I want to have two areas .

I want to say something about my company like I want to let people taste a little bit of the atmosphere by saying something about the company and showing some images .

So two parts .

So I select this one and then I create some space over here here at advanced betting .

I say , let's say 60 at the top and 60 at the bottom .

And then I want to start with the text .

What I can do , I can just say copy over here and then over here I can say based well , it's white so I don't see it .

So I click on it .

I go to the I make a text color one .

Then I want to go to the background and what I can do , I can copy this area .

So here I right mouse click copy in the year base .

There you go .

Now , I also base a few things I don't want .

So what I can do , I can click over here .

Make this nothing .

Then I go to the layouts , minimum height , change it to nothing .

I go to the , to the shape divider to the button .

Nothing , nothing and none .

Then I go back over here betting and then I turn this off and I say 60 60 below this area .

I want to have a text .

Uh Of course , I want to change this text to do something else .

Taste the atmosphere at web divine .

Then below , I want to have a text .

So I go for the text editor .

I drag it here below and I basically text .

Then I want to go to the style text color and make it white really nice .

And what I want to do , OK , it is time for a CS S lesson and it looks a little bit um complicated and maybe this , but I just want to go for it .

So what I see over here , I want to go over here to discolor right mouse click , inspect , I mean this button and I want to get the color over here .

So I scroll down over here at the right and I see this over here color variation yellow .

So I see that's the color link initial color .

If I click over here , I will be pointed to this area and then I see this code .

So this is a color and I grab this God , let me grab the whole area .

I copy it .

OK .

What I want to do , I want to make a highlight over here and that highlights .

I wanted it to be the yellow color .

But when I change the colors in my website later , I want that color also to change .

So instead of selecting it and basing the color code , I wanted to have the color pat one color .

Let me show you I go to element or I want to go do this text over here contents and I go to the text area .

So I see all the the codes .

So class pho B one et cetera .

So I search for the area , nothing has to be done but everything is possible .

I can grab random text over here .

So let me show you OK .

There it is .

OK .

I zoom in again .

What I start with is this opening spin space class to assess equals semicolon and those two shift comma shift comma twice and over here , I can get this a class so I can say ballet 01 , then I close this with an arrow to the right .

OK .

Everything after this will have a certain style until I close it .

So nothing has to be done .

But everything is possible after that , I close it , arrow left forward slash spin .

OK ?

You see nothing yet because we have not attached any style over here .

So what I need to do , I need to create a class in CS S 0.01 .

And then I need to style that using CS S it's also new for me .

I just Google this but I just want to give you the best .

So I go to the website to the customizer .

I scroll down over here also .

Now at additional CS s enter , enter , I say dot ballot 01 opening .

Let's see if I , if I say font dash , W font weight , I can say bolt .

But you see now look at this .

Now this is bold so I can attach a lot of styles over here .

So let's start with color and then I paste this code and then again , let me uh get back that color by mouse .

Click , inspect , click on the variation .

What I need is only this part copy that V and then the pallette color one .

So let me use it over here and look at this .

Wow .

Ok .

Now , I think , OK , so much hassle for just this .

Why ?

Well , let me show you .

Now I close this and I go to the customizer .

Look at this .

If I go to the colors and I go to the main color color one and I copy this and I change this color .

It will be changed everywhere in the website .

But also here .

So if I would just choose a color , a color code and I change this , then I need to go back to all the places where I use this trick and then change it again and I don't want it .

So right now , this color is linking to color palette one and that's what I like .

So let me paste it back , by the way , 6573 .

Look at this , I can change the whole style of the website in two clicks or in a few clicks .

Look at that .

Wow .

What did I say ?

006536 , something like that .

No , I don't think so .

I don't , I'm not sure .

I basically call her beck .

OK .

Let me figure out what this color is .

Brenning Web Divine 6573 , almost 73 .

OK .

Now everything is back to normal .

So now we have this special text .

So if you want to emphasize something in your text , you can use this trick .

It's for free , this extra trick .

So I'm happy with the text .

I'm not happy with this space over here .

So what I want to do , I want to go to element or on to go to the container or the Navigator is the second container .

I can call this double click three features , taste atmosphere .

And here are three features advanced at the bottom .

I can increase this .

So I can create some space or even better .

Maybe do that in the pairing .

Make it 60 .

Also here .

This already fine , great .

What I can do now , I again , I can use a carousel image carousel .

I drag it over here .

I select the images and what I did um that unless you have your own images of your own company , you can go to dot com forward slash I stock and then you can get the photos I have uh a subscription over here .

So what I did I said team then I found an image .

I liked this one and I search for photos of the same series .

I bought a few photos .

They can be expensive , they can be $27 per piece .

But think about the , the the first impression you leave behind .

It also costs money in this mock up .

But I'm really willing to invest because that's what people will see in my website that it looks professional .

So it's up to you .

If you want to do that , if you want to go for the free alternative , go to Pixar bay dot com , then if you search for a team , you also can find nice images but the quality is livid less or yeah , it's up to you to to decide what you think about that .

OK .

So I click on the plus I go to upload files , select files .

I go to web design business .

What I did really important .

I renamed all the images I downloaded from IU to Los Angeles Web Design , web design agency California because I want to be found on those terms .

So also through images you can be found .

So I always rename them with keywords .

Went a open them all and now I can create a new gallery .

I can change the order and I insert it into the gallery .

Look at this by default , it looks like this , The image size .

Um Let's say 1000 and 24 .

How many slides to show one at a time ?

Image stretch , no navigation only dots and I have no link , no caption and additional options .

I want it to be auto played no balls on hover , no balls on interaction .

Every three seconds , a new image will appear and I will take the time off one second before the new slide appears .

So the animation is one second like that infinite loop .

Yes .

At the las image , the first one appears again , the effect that I like it to be slide and direction to the left like that .

Then I want to go to the the position of the Peggy nation .

This one I wanted it to be inside .

I think that looks so much better .

I want to increase the size , make it bigger , change the color , the normal color to white like that and then the active color to orange .

So again , it is still off our website and then you can also play around with the , the width .

So over here , I can say it should be 40% over here .

I can say it should be 60% and then you see it all aligns a little bit better if I would update it .

And I click on the , I let me close this , this is what we have so far and I like it .

So we are really clear with our goal .

We make websites that generate customers .

We talk a little bit about what we do .

We listen , we think along we are fast , more text about a company , what we can do for you .

It's not only making a website .

We're , we're also thinking about other stuff , seo hosting , hostel styling .

And I have to say I , I just translated this text from Dutch .

Don't take it too serious .

Uh Normally you can also use LA I text but um it's up to you what kind of text you want to play on your website .

Don't take this too seriously .

This text that is probably full of errors and then we have those images and people can navigate if they want to so so far .

So good .

Hello ?

Are you still having fun ?

I hope so .

If you can appreciate what I'm doing in this tutorial , then please like this video that would help me out a lot and feel free to subscribe for more upcoming workers related tutorials .

I help people to make websites that make them money .

It can be through becoming a web design agency .

It can be through affiliate marketing , through blogging , through advertising on your website , creating a social media website , creating a course website .

All those tutorials I have on my youtube channel and I'm creating new ones , better ones .

So if you want to subscribe , please do that .

And if you want to get updates , then click on the bell icon next to the subscribe button .

It will be the first that sees when I create a new video .

Now let's continue with element or , and I want to show you more amazing stuff .

Let's take a look at the next area .

I want to create an area showing off what we have accomplished so far when it comes to nominations or awards .

So I click on the plus or even better .

Let's start from scratch and just direct a container over here .

And I want to start with the head .

So I duplicate this one .

I drag it over here and I want to bring it to the center and then I want to add four images .

So the first one upload files , select files .

I go to wins four logos .

I opened them and I get the first one .

I duplicate it .

Then I get the second one and duplicate it .

And then I get the third one and duplicate and the fourth one .

So everything is below each other .

It looks perfect .

Let's go to the next area .

No , I'm kidding .

It doesn't look nice .

No .

So what I want , I want this to be on top and then below the four logos next to each other .

How can I do that ?

Well , I can go to the container and change the arrow to the right ?

Great .

So now everything is uh next to each other , but that's not what I want .

I want this to be on top .

So what I can do look at this , I can go to the container and I want to use the wrapper .

So when something is not fitting it goes to the next line .

So if I go to this image or maybe even better this image , I go to the style to pixels and I make it bigger , you see this goes to the next line .

So what I can do over here , I can go to advanced change the width from default to 100% .

So it pushes the next item next element to the next line .

If I make this one smaller , I bring it back and that one .

So now we're getting somewhere .

So what I do , I go to all the elements , individual elements , I go to the ST pixels .

And I think what is the right amount of pixels in width ?

I think this one can be smaller .

This one is OK and this one can also be smaller in pixels .

But what I want , I want everything to align in the center vertically .

How can I do that ?

I go to the settings over here and now we can play around .

So right now this is from the left and nothing at the right .

So I can place it in the center , I can place it at the right .

I can play space between space around space evenly .

What I like to do .

I like to bring it to the center , but then vertically also .

So align items also to the center .

And now it looks like this that can go back , make it a bit smaller just like this one and it stays in the center .

That's what I really like .

Then I can go to the container , change the gap between the elements like that .

I can go to advanced uncheck the betting and say patting top 60 but also 60 to create some space .

And then of course , I can change the title awards we have won .

That's how you create an area like this using the wrapper update .

Great .

I go to the back end and I want to create a new container .

I click on the plus arrow down .

I go to the ST and I want to change this to a gradient with green and the color or I changed it to 90 and then I copied this area .

I face it and I base it , I click over here , go to advanced uncheck , the patting and at the top I say 60 then I go to the layout , I want to bring it to the center and to the center like that .

Then I want to say over here what we , what we are really good at .

I want to make the text white .

I want to make the text smaller and then I go to Advanced and also in a heading , I can give it a background .

So I go to background at advanced and I changed it to the yellow color .

Now I go to the layout and at the betting , I increase it .

Then I see this is what we do and then I'll create a new area with four columns over here .

Copy this one and bassist style over here .

Look over here .

I change it from the left to the right like that .

And now I want to have uh some things in the container a few first and I can , I drag it over here .

After that , I go back .

I don't have a title .

So let me duplicate this one .

Bring it over here .

I want to duplicate it again .

Then I want to have a list I can list , I track it below .

So we're gonna make something beautiful out of this .

The first thing I want to do .

I want to go for an icon and I want to talk about branding .

So what fits branding ?

How about fingerprints ?

I would not do this one but this one inserts go to the color and I want to make it white , align it at the left and then over here really simple .

I say 01 .

I go to the and I like it 20 .

Then I go to this text below and I say the first thing we do is branding .

I want to change the color to white and a typography and that's ok , but I want to bring it closer .

So I go to margin and I bring it pillows are over here .

Then there's the list , I get rid of everything except the first one .

I don't want to have an icon .

I just want to say something .

Ok .

Over here , what we do , we start with a brand scan like , hey , where is the company right now ?

When it comes to branding , we scan that and based on that , I mean , duplicate it , we will have a brenning strategy and then we will create a logo and branding .

I don't like the color .

So I go to ST next , next color will be white .

The text can be a bit smaller , a bit bolder and then add a list .

How did you increase the space between ?

No , it's fine .

Ok .

Ok .

Updates so far .

So good branding can be a bit smaller .

35 .

Great .

Now , I want to duplicate it a few times and get rid of this one , this one and this one .

Now I'll change the Eigen the number , the title in the list .

I'll be back with you .

OK .

Then I go over here to advance in the container and also at the bottom , I want to create some space .

And now look at this , I click over here , I can go to the layout , I can change the width and bring it close to each other .

And now I can say I can make it wider or leave it as this and I can change the gap in between .

Then I was to create a light area again , again with four areas .

I start with the first one .

It will be a counter .

I drag it over here .

I would say that I already made more than 430 websites and I can have a plus so I can have a suffix or a prefix prefixes before .

So let's do it before and then 4 30 let's see , four seconds , 5.3 seconds in order to show everything and go to the styling , the text color like that and then the title to this color .

And I changed the text to websites made I duplicated a few times and I change this too .

Yes , of experience .

You know what's over here ?

Wait , wait , wait , there's a glitch over here .

I need to type over here but I already typed it over here and now it's gone .

So I can type in double , I go through the typography .

This is the , the number can be 80 and then I go to the title Typography .

Bit smaller 16 and then make it bold 700 bolt or 600 .

Ok .

Right .

Mouse click copy and piece of steel over here , it can be faster on second , what else ?

12th employees and 19 oars great over here .

You know what I want to do ?

Top 60 bottom 60 .

And then I want to end this page .

I want to show more about my portfolio and stuff , but I will talk about it later in the tutorial , I want to create one more area which is a call to action .

So I create a new area with the arrow down .

I want to start with the title copy based and with the background , copy a and then ac reach out to us and then I like to have a divider .

So I drag it here and then we'll go to the right .

So here I say arrow down , you hear here , change the amount of pixels and then first change the color so I can see what I'm doing , increase the weight .

And then let's let's bring the pixels back because right now we see nothing .

I bring it to the center .

Yes , then I want to have a text so I copy this text , base it over here .

Then I bring it to the center here at alignment center .

And again , the text can be made better , but there are other people for that .

And then I want to have a call to action that looks like this one happy based .

And then I say get in touch .

Yes .

OK .

What I want to do over here , I want to go to the layout content with this box , but I want to make it smaller like that .

I love it .

So this is what we have made updated .

I think it looks great right now .

Our website looks a little bit static .

There's no movement , we can create movement , we can create animations and let me show you how , what I want to do .

I want to show two things .

First , I want to show how we can add some animations .

And second , I want to optimize this page for all devices .

In order to create some animations in the website , we need to go to element or , and I can go to this button .

For instance , I can go to advanced closes and I go to motion effects and then I can give it an entrance animation from a lot of places I can zoom it , bounce it .

I personally only use zoom and I can fade it in from the left like that I can change duration to slow , normal or fast and I can have a delay .

So I can say that after a half second it should appear .

So if I update it and I take a look , look at this after a half second it appears , but I can say then that after 0.75 seconds .

Sorry , sorry , sorry .

Wait .

500 and get in touch advanced motion fix from the right fast .

I can say after 0.75 seconds , they get a nice animation .

I can also grab a complete container instead of only an element directly here , advanced motion effect from the right normal .

And then after 1.5 seconds , so then they will look like this .

Well , I prefer to work with Antonio Banderas but I it will probably never happen .

So I like to work with um , a normal animation , let's say 500 seconds .

I mean , 500 milliseconds .

Then after a second .

Ok .

And now after 1.5 seconds disappears .

So then I want to do this motion effects , fade him up after two seconds .

Then this one fed up .

Wait , wait , wait , wait , fade up , fading up after 2.3 seconds .

And then the third one after 2.6 seconds now , had this happens ?

Ok .

Well , I think it should be less .

Ok ?

Wait , we're coming closer to something that it needs to feel good .

And then this one .

So now first those three things .

Ok .

Nice .

And then , ok , this looks nice .

Uh When you do this , we , we right now we , we make use of a delay .

But if I would bring this to the right , we don't have to have a delay .

I mean , sorry on the left because it will animate as soon as we scroll down .

So I do nothing .

I scroll down and then it appears what I not suggest to do is to put animations everywhere on the website .

I just keep it like this .

But for the hero , I think it's OK to , to do that .

So we refresh it .

I think that's perfectly fine .

The more you do this , the slower your website becomes , keep that in mind .

So we've created a page using element or I hope you like it already and get a little bit familiar with the tool .

Now , let's optimize this for all device .

And when I saw this , my life changed again .

First , it was when I met my wife , of course , my life changed .

Then I became a father before I started working with mentor .

OK .

Long story short .

Um We're gonna show you how to make this website and what we , I mean , I will show you how to uh optimize the website for all devices and it's gonna blow your mind .

I hope so .

Maybe not because you already know how amazing elementary is .

So your expectations , expectations are really high 30 .

You're talking too much .

Yes , let's continue .

But first , like this video , I'm watching like come on , be serious .

Come on , you need to be serious .

Youtube is all about being serious .

OK .

Let's talk about optimizing your website for all devices .

Now , I want to optimize my , my website for all devices in order to do that .

I go to the home page and I click over here on the responsive mode and I click on the tablet .

This looks ok , except for one thing and we go to the hero , uh , because I use a lot of betting in the plus and the minus everything else is zero .

So the , the content is really close to the edge .

I don't like that now , we can keep it here .

So at the betting , I would like to say , I don't want to look up .

I want to say 60 .

You know , it's 30 better .

OK ?

If I want to , I can click here , go to the style through typography and what I will see , I see the size and as soon as I see this tablet , that means I can give this a different size then when I'm on my desktop .

So here it is this site .

But if a size , but if I go to uh a desktop , it is 40 .

So that's the power of element or and optimizing your website .

If I take a look at this area , really don't like it .

So let me see how we can make this better .

I think uh there should be a betting everywhere .

By the way , let's go to the hero and decrease the size .

Gus we don't need that amount of space , let's say 500 more than enough .

OK ?

Then let me see .

I can also click over here .

Go to layout change this , make it , but it's , it's OK .

And as long as I change nothing .

It will automatically use the settings of the desktop .

So if I would change something tablet mode , for instance , this text automatically , the same size of 33 will be visible on the phone unless I change it .

So it overrides it override each other .

So what I want to do here , click over here 15 and I can copy it , face it and base it or mai see and I click over here and I go to the content and I say I composition on top .

Perfect copy out .

And then of course , I don't have my contents title back to let me see .

Sorry , the title back to 22 copy base and a So look at that .

When I go back to the desktop , it is at the left .

When I go to the tablet , it's on top .

How great is this ?

It's so easy to do .

What else over here ?

I can take a look , I can say that um when it comes to the alignment , they should be on top and she's only at the tablet like that so that it is better in my opinion .

OK ?

Again over here , advanced make this 30 .

So there's a little bit more space everywhere .

Awards we have won again also over here , advanced betting 30 .

And then over here I go to the pixels make it 90 over here , make it 200 over here , make it 1 60 and then here make it 1 20 .

Great .

Over here , advanced 30 everywhere .

And then here uh let's go to the longest word style change , topography to 20 22 copy .

And over here typography make it 60 copy , Bassel and bassist .

And this looks fine .

So let's go to the mobile version and then I go to the container two , sorry , the hero container , it's increase it a bit .

Then I go to the second container advanced and check and bring it closer to each other like that .

Maybe go to layout , decrease the height .

Wait , wait , wait , this is not sorry of the hero .

I mean and then here typography , sorry content before the mobile , bring it into the center .

Then over here I can bring it up a little bit .

Wait a minute , I check this minus 60 a little bit .

We listen , we think along .

So over here I go to the layout and I want to increase the gap in between how about 60 .

So it gives some space also below at advanced on check , I say 30 30 60 30 .

So below , I also have some space .

This looks great awards .

We have one , make this one a bit bigger .

So everything will be below each other .

This was what we're really good at .

I click over here style type park , sorry uh gain content , bring it to the center and also this area , bring everything to the center and the center and I copy this bassist and I this looks fine .

Let's go to advanced make everything 30 bring it to the center and change the typography to 32 .

So that's why how we have optimized .

Our website for all devices is our desktop screen .

This is on a tablet and this on the phone .

There are a few things I see that are not correct yet over here and over here .

So let me fix that .

Then I go to this area .

I bring everything to the center .

There you go .

So now it is in the center better here below .

Let's make everything a bit bigger or what we can say really simple for the mobile , just direction down .

So everything will be below each other .

So now if I make that area smaller , it's below each other .

And that's the way the cookie crumbles .

Now , I want to create the second page and what I will do through this tutorial , I will start to talk a little bit more about copying and pasting because we can save quite some time by copying and pasting things .

Uh I want to talk about the about page .

So let's get right to it .

Now , I want to go to the about page and I want to open it in a new tab hole in command or control on a PC .

I click over here here at the home page .

I want to edit this with Element .

And meanwhile , I go to the about page and I want to edit the page , I cannot edit it with elementary yet because I've not turned it on .

So I click on edit page and now over here I can say edit with element or , and now it's an element of the first thing I do .

Every time I go to a new page , I go to the settings and change the page layout to Element or full with .

I update it .

And now if I would go back exit , go to the website to the about page , I can edit it with element or so I open it .

So I have both the home page and the about page open in elementary .

Why ?

Because I want to copy and paste something .

So I go to the home page and here at the Hero , right , mouse click copy .

But here I only want to base the steel .

So I go from my first container arrow down and then over here , right ?

Mouse click , I paste the steel really nice except for one thing .

First , let me call this the title .

I think it's way too high so I can bring it back to three hundreds or even better .

I have a great idea .

250 .

Yes .

Then I go to all the elements and I direct the heading over here .

I renamed this two about and I go to the title and I want to bring it to the center and I go to the heading .

I go to the cell and I change it too white .

So that saves me some time .

Now , I want to create a second area and I want to dive a little bit deeper .

Show you some things you can do with elementary and using elementary and in the flexible container , there are multiple ways of doing things .

And I prefer this way if you have a better way .

Let me know .

But what I want to do , I want to have an area over here with a nice background image .

And then over here , I want to have a text with a vibe background that overlaps the image .

Let me show you how I would do that .

I click on the plus and I want to go for this area structure with two containers in one container .

Then I go to the less container I go to ST click on the classic area and go for an image .

And I choose this image .

I insert the media , then I go to size contain and then I don't want to repeat it no repeat .

So now it looks like this .

I go to the layout and I change the minimum height before I continue , I want to change the width to 60% .

So now I see I have a little bit more , please .

For the image .

Perfect .

Then I want to go to the to the border , I want to increase the border radius to 20 .

So we have a nice border over here so far .

So good .

If I update it , it looks like this .

I'm happy with that .

Except for this harsh corner , I want to have a rounded corner .

So what do I need to do over here ?

I said the width is 60% but over here , the width is 50 .

So I have a total of 110% .

So I need to reduce this to 40 and now I can increase this over here .

So I go to the height and increase it until it fits perfectly .

I update it .

Ok .

Not working yet .

Ok .

I go to the change it to go .

Now it looks like this .

Ok .

I'm happy with it , but I think we can go a little bit higher .

So probably because of the width over here .

Let me take this , we can get a better representation .

I think it has to do with the Navigator as I want to see that the width of the website is what I want and also to make it a little bit higher like that .

Updates .

Nice .

Now I want to create another area here below .

Again , the structure two containers .

This time , this left container is 40% and the right container is 60% .

The right container needs to have a background .

So I go to the and the color I want it to be wife .

And again , I go to the border here and I want to great radius of 20 now I want to let this area overlap this image .

So you get a nice effect .

How would I do that ?

I click on the container settings .

I go to advanced uncheck the margin and say minus 500 or less .

So I scroll down like that's I still have two containers selected and just to make sure I want the Z index index to be 10 because right now we have two containers in front of each other .

And I want this one to be a front one .

So I say this is 10 and it is more than zero .

So this is in front of this one .

Now what I want to do , I want to add a panning of 20 pixels that I click over here .

I will do a heading and I say about web Divine .

I go back to the right container advanced , I go to betting and I increase it to 20 .

Then I want to go for a text .

If I , I use dummy text like this , I go to dummy text generator and then I can have a lot of settings so I can say 200 words in six paragraphs .

And I can say I will grab three paragraphs like that .

Look how beautiful that looks .

So I update it and I take a look and this is the effect I had in mind .

You know what I can say ?

I want to have a less text and then go to the container .

Let me see .

I mean the upper container and then bring this a a little bit more to the center updates .

Great .

Then I want to go to the other container and at advanced I uncheck this and I say at the top , I want to have 60 pixels and at the bottom , I also want to have 60 pixels and now I need to go to the other container and bring it a little bit more to the center updates .

Yes .

OK .

I want to change the background over here .

So what I will do , I will go to the container .

Uh Let me see the the the this container to the ST background color .

I want it to be the bluish color , this one .

But now I want this also to be the same color .

Otherwise it looks a little bit weird .

So I go to the title two , the style shape divider bottom , change the color also to the blue one .

Perfect .

Yes , I like it a lot and then yeah , I can do do the same I did before .

Highlight some text , make them bolt .

Uh Give them the yellow color .

If I want to know how to do that .

I go over here to the home page added with element or scroll down .

Click here , go to the text and then over here spend Ballad , I copy it .

Leave close this and then over here go to the text .

OK .

Let's get rid of this bold stuff .

Then I go to the text and I can just paste it here and then at the end end of Spain like that , that's a first word .

Then also here and the ants after span and then one more in the center , I mean , spend great .

Make sure those paragraphs come back updates .

Yes , that's what I want .

I want to create another area here below check , click on it .

A the right and then I go to advanced with margin .

Make sure I correct all the negative margins I created over here .

So I will bringing those lines closer .

Then I go for Elle backgrounds .

Let's see .

Let's do the radiant again and then 90 .

Now I want to create something but it's only available in the pro version of element .

I'm not gonna Upsell you saying , hey , now you need element of pro .

There are alternative third party plugins that are built on top of elementary .

Elementary is really popular .

So other companies come and they build things upon on top of elemental .

So there if you go to the plugins , we can uh install an extra plug in and that gives us a lot of free extra elements within elementary .

So let me show you how to get it .

And then I want to show you how you can add a team member element in your website for free .

I want to add , add some team members but uh there's no element or free element that's doing that .

So what I want to do , I want to show you what else is possible .

So I click on the I and I go to the back end to plug in at new and look at this .

If I search for element or there are a lot of third party plugins that will build upon element or for instance , essential add accounts .

And those plugins are quite popular , more than a million installations .

A lot of people like it even more than elementary itself updated four days ago and compatible with my version of work .

So I can install now I activate it and look at this .

If I would go to Essential Advance , I close this , I close this and I go to elements .

I can choose all the elements I want to use .

So I know for sure , I don't want to do anything with Woocommerce .

So I turn it off .

Why would you want to turn it off ?

Well , the more elementary needs to load the slower your website becomes when you're editing your website .

So what I like over here somewhere is team member .

It's also popular .

So now if I go to my website about add the element or I can scroll down , I go over here to all the elements and I search for team there .

It is essential , announced team member .

I drag it over here and it's really big .

That's no problem .

So I will choose an image and I go upload files .

I got those images from is so let's say I upload them all .

And I grabbed the first image , I insert it .

There you go and change the image size two 1024 .

And then I can change the content .

So this is Andy , he is the CEO and I can have a text .

So again , I go to dummy text generator .

I also have this text and then I'll see here below and I have two paragraphs .

Let's copy it .

Then I go to social profiles .

I don't want to show them and there's a lot of room for improvement .

So what I can say over here , click over here , go to advanced , I change the width from default to custom and I say let's make this 300 pixels .

Is it still a percentage 300 pixels ?

So you see a little bit better what you can do ?

Then I go to the backgrounds and I make it white great .

And I actually like this .

I want to go to the styling , I can change the style overlay style , but I prefer to show everything at once .

Then I want to go to the colors typography and the memory name ought to be yellow , orange color , the job position .

I wanted it to be the green color and a little bit bigger , let's say bolder at least bold and then maybe just like the title and then the text maybe if it's smaller and James , if it's on space , that looks nice .

What I want to do ?

I want to have some more space over here .

How can I do that ?

Well , by now , you should know you go to advanced betting and you increase it .

But then also the image decrees I don't want that .

So what I can do , I can't leave it like this .

I check it right , mouse click , inspect and over here I see this area .

So let's try it .

I say margin 20 pixels .

So now I see that this is changing .

So if I increase it , but it's not for the whole area .

So let me get rid of it , refresh and what I will do right mouse click inspect .

But now I hover over here to see when the whole area is selected this one .

So now I know this class , let me copy it is adjustable and when I adjust this , this area will be adjusted .

So I always test it .

Let me go to the customizer .

Show you what I mean .

I copied it .

The class I go to additional CS S I start with a point .

Every plus starts with a point .

I open it , opening parentheses and then like I say backgrounds black and then I see OK , this is working .

I'm having the right area over here .

So then I change it to margin 20 pixels .

Now there's more space over here and that is what I like close it refresh element or I scroll down and I go over here to advanced and at the top , I want to have at least 60 pixels and at the bottom also 60 pixels .

I want to duplicate it .

You see it's fitting automatically .

Why ?

Because over here and layout , I said nothing about wrapping .

If I do that , then it goes to a new line , but there's more space over here so we can do a few things .

First , I can decide that everything should be in the center and then it's ok .

But now there's a lot of space over here left and I want to use those lines .

So what I can do , I can increase the gap until it doesn't fit anymore .

But there's a lot of space in between .

So what I prefer to do I click over here , go to advanced and I changed it through , let's say 370 copy A OK , then I go to the container and I increase decreases .

So let me see how much space I've left .

Ok , 15 pixels .

So what I can say over here , a little bit of math , let's say 65 .

Well , let's say 60 3 60 copy or copy base .

And ok , now I go back to the container .

Increase it until I see it goes to a new line .

Ok .

30 and now it looks great based over here and based over here , now I can change the content .

So I'll be back with you in a minute .

So now it looks like this and if I want to , I can go to the container settings and bring it to the left like that , everything aligns perfectly .

And if I would duplicate it , it just continues .

So that's a really nice flow really is to do using the flex box container .

And now we've created quite a nice page using element or , and now I want to know how it looks , why we optimize it for all devices .

So let's see on an ipad or tablet .

OK .

This is too high .

So I go back to the Navigator title .

Better .

This store looks great if you ask me .

OK , here I want to have a little bit more spacing , let's say 60 .

And then I go over here and I make this 300 I think 340 is fine .

Copy .

No sir , not .

OK .

Let's see .

Copy a , let's see what's happening here .

How small should it become before ?

OK .

I know 35 , 35 and ok , so far so good and never a film about let's make it 2 50 .

Also nice is perfect .

OK .

Over here , I think advanced 30 is also fine .

Perfect .

I'm happy with the results .

You see optimizing the website .

It's not a big task because by default element is is doing a great job .

So that's how we create our second page .

I've shown you already a little bit that you can copy and paste things and elements .

And now I want to take that to the next level .

Next , the next few pages , it will be created like copying and pasting and adjusting and it will save you a lot of time .

And oh man , I'm excited about this .

I hope you will be too .

So let's get right to it .

OK ?

We're gonna create a new page , but this time I'm gonna make use of copying pasting and saving and importing templates .

So the first thing I want to do , I want to open this in a new tab , the the the services page .

Then I open this page in element and the search page .

I click on edit page Edward mentor .

I know you should know the drill , go to the settings , change the page to and then also the title will be gone .

So what I can do , I can go to the title , copy and paste it that saves time .

What I also can do , I can go to the title right , mouse click , save as a template .

I call this one title , save it now in my templates , it is stored .

So I go to this page , I click on the folder icon .

I go to my templates and I import it and don't apply to settings .

Just a so that saves time .

And for the next page I can do the same .

So I change this to services .

I also have some extra information here below .

In order to get it , I click on the eye over here .

I go to the home page , I click on edit with element or because I want to grab something from the home page .

I scroll down and I have this text over here .

So I say right mouse , click copy , right , mouse , click and paste it and then below it will appear or to the right .

So I can go to the title settings , change the arrow to arrow down .

Then I want to say something .

So I go for the text editor , I drag it down and I go to dummy text generator and I grabbed this text and I face it .

Let's give it to this .

OK .

I go to the style , change the color too white and then I go to the title and I change the width of the whole container content , do something like this 500 .

So I need to create more space because it's not fitting .

If I change this a bit , let's say uh 400 or 500 built advance .

Get rid of that .

Great .

Then I click on the text .

I want to bring it to the center .

A not let's say , or 50 or 400 .

Yes .

Great .

Again , I go to the home page and I want to copy this area .

Look at this right now .

We have dark backgrounds .

I can change it .

I can copy it , face it .

Then I go to the backgrounds and I change it from the gradients to a classic color , which is the light greenish bluish color .

So it looks like that .

Then I go to all the containers , I go through the steel and I change the style to this color .

OK .

Before I continue , let me remove this .

Click over here , I go to the border .

I wanted to be 20 .

So we have nice random corners .

I go to advanced depending and I increase it .

And now right now click copy based , get rid of this basis , they get rid of this and still and get rid of this .

Ok ?

I have to say I'm I'm going a bit fast um because I'm excited , I need to be careful with that , but look how easy it is to adjust all those things by copying and basing and not adjusting .

I go to advanced and I change it to 30 to 30 .

OK ?

And now I want to create a new area and I want to talk about all those beautiful features .

I have all those services I offer .

So I click on the plus , I want to have two columns , one will be 45% and the other one will be 55% .

So I copy this copy , paste , copy the branding text , copy past and I changed the color to the dark one .

Then I want to go for a text .

So I drag it here below and I base the text .

Then I want to copy this area , copy based and change the colors too green and how to make the text bowler .

Then I go to the home page , I grab this button copy right mo like taste and I want to get rid of the animation .

So I go to advanced motion effects X .

There it is .

And then I click over here , go to the content and I say go to the branding page , wait branding .

So I can search for branding or type it in .

And then the branding page will appear .

I go to the container to advanced uncheck this and make this 60 60 .

I go to the and I change the background to the light greenish bluish color and then I want to go for the border and at the top , I have a solid color which is orange uncheck .

This only at the top three pixels .

Great .

I click over here .

I want to go to the background type image and I want to grab an image and insert the media and then click on size go and then I go to the border and I change it to 20 .

So there's a lot of there's not much space over here .

So what I can do , I can go to the container and since we have not wrapped it , look at this , I can make it big .

This as big as possible .

Everything stays on the same line or same row .

So uh let's say 30 or 40 better .

Now I can duplicate this area and look at this .

I click on the container and instead of arrow right , I say arrow left .

That's how easy you can change it .

So let me duplicate it again .

I click here .

OK ?

Duplicate it again .

Now , over here , I see that .

So left , right left , right .

Now we need to adjust the content .

So I go to this area branding and then web design make it a two , three development optimization .

Four great branding , web design , web design .

Let me be back with you when I've adjusted everything .

OK ?

I copy this from web design .

I base it .

Then I copied his style .

I base this style .

I remove this so that's how it can work really efficiently .

The more you do this , the the easier it becomes .

Of course , I really like flying through my pages , adjusting things , the latest one copy , we remove it .

Of course , we need to change text but this la and text .

OK ?

Then I want to end with the following at the home page .

I have a call to action copy based and that's the way the cookie crumbles because look at this , this is what we have created within 15 minutes , maybe within 10 minutes .

I don't know branding , web design .

Oh Of course , we need to uh I need to change those images .

Look at this .

How easy click , click , click and it would be great if those images are representation of the subject over here .

So at development , I could show something with a graph .

They'll make it too uh corny be creative .

But right now I just grab the images I have over here .

So a really nice space if you ask me and we create it in a relative short amount of time because we could , could copy and paste a lot of things .

I just look on a mobile .

Really important question .

I'm glad you asked .

Let me click over here .

Go for the tablet the night .

Go to the Navigator title has increased at 3 50 or 400 .

I click over here .

Go through the I copied this .

I paste over here the style and the and what I don't like is that this is longer than this .

So what I am , I need to fix it somehow .

So let me see .

I can go to betting .

OK .

That's how it has been solved right now over here .

Of course , we need to talk about betting 30 .

OK .

For this image I click over here , go to the and I changed the size to contain and now repeat over here , I say 30 A and over here make it 30 bass , make it 30 and that looks fine .

Ok .

On the mobile ?

Wow , how about we ?

We increase the height a bit ?

Ok .

So far so good .

I can bring this maybe to the center or puppy .

A and a let's take a look over here , make it go again and maybe a bit higher 1 80 copy they tell and they , that's it .

Let me see how it looks on the normal screen .

All those images are the same now .

So let me change that and then back to mobile .

Yes , optimized for all devices update .

I'm happy with the results .

I hope you are too .

Let's keep the space because what I can do now , I can edit this space with elemental .

I can go over here to the update area and the arrow up and I can say this whole page as a template and that's what I want to do .

I call this one services page or serve a page .

Save it .

There it is .

OK .

I go back to the website and I go to the first service branding , edit the page with element or go over here , change it to full width .

Click on the folder .

I can my templates and I want to import the services page .

What are the settings of the page ?

Great .

So what I want to do over here , I'm at the branding page .

I want to change the title to branding .

It's super important .

I don't know how to come up with a better text right now .

I can remove this if I want to , I can get rid of this .

Now , there are three arrows over here .

So I get rid of this one .

I go to the first one because first I want to go for the brand scan , I can get rid of this end of this .

Also here , I also want to get rid of the images .

After that , I'll talk about branding strategy .

And then the third thing loo and branding , I want to tell a little bit more about what the order is and how we work .

So that's it update .

And now I want to save this page .

I call this one specific service page .

So it's not the overview page .

It's a specific search page .

So I can go to web design .

Let make your first call back to the website to web design .

We do the same thing , edit page oo element or go through the settings , make it full with click on the folder , my templates , specific service page don't import the settings and I just started changing everything .

Web design .

Web design is super important .

The first thing we need to do is wire framing , then UXU I design and then UX design change the text and you're good to go the same we do with the development page and the optimization page .

And then if you take a look with copy and pasting , we created this page four of those pages over here .

I can't get rid of the upper line .

So that's what you can do when you work with copying and pasting with an element or let's create the contact page so I click on contact .

I added the beach edited with element and go to the settings and get a full web page .

Click on the fuller go for the title .

I insert it .

Don't apply to settings .

I changed this too contact .

Then I want to create a new area with two columns , change the background too .

The blue is one .

And then in the first area over here , I do have that backgrounds .

R to be a white one .

Then I want to go to this container here at the left , go to the ST and make the background color white and want to duplicate this area .

Drag it over here , change the color too dark one .

And then below , I want to have a form .

How can we do that ?

I click on the eye and I go to the back end .

I want to create a contact form and I need to plug in for that .

So I go to plugins at new and I search for contact form seven really simple form builder install .

Now activate it .

Now I go to the contact area , the contact forms and by default , there already is a form .

So I want to copy this because that's how we can embed the form in our website .

I copy the short code .

I go to the website or over here , I go to all the elements and I drag this hair below .

I go to the text and then I select everything and I paste the code , I click on updates and there it is .

If you want to learn how to create a special form using contact form seven , go to youtube and search for contact form seven .

And there's my tutorial is still relevant .

I will make a new one but it's still relevant .

And then you can take your form to the next level .

I go back over here to the container to advanced and I increased the betting to 30 .

So I have a little bit more space over here .

Now people can fill in this form .

Then over here , I want to go to the to the border uncheck .

This let's say at the left and turn it into 50 .

Why ?

So I can see which corner is affected and that is this one .

So I bring it back to 20 .

And then at the top , I also say I say 100 I see this area is affected .

You don't see that well , but I see it enough to know that is that part .

Then I go to this area style background type , choose a color and I choose the dark green color .

I duplicate this area and I may use text white and I say this is about Web Divine LLC .

And also here I go to the container .

I want to have a pending of 30 pixels .

Great .

I go back to the title and I want it to be this one .

And then below , I want to have a text area , text can be white and I want to tell something about my company .

First .

I want to start with the address .

I want to say shift enter .

If I say enter , I start a new paragraph , I want to say shift enter .

So I go to new line .

She entered the Netherlands .

Ok , I update it .

Then I want to duplicate it .

And over here I say something about my company , the LC number , my Fit ID number and my bank account number .

Ok .

I want to do the same trick as I did before in the tutorial .

So I go to the homepage I edited with mentor and then I go over here to the text .

Where is it ?

The ballot one spa copy .

I go to the text based based and based .

And then let me see over here , I'll say close to Spain , but I want to close it right after this arrow also here and also here .

Go to the visuals .

OK ?

Now I want to go to all the elements I search for and I can list that dragon here in between .

Let me get rid of those two .

I go for the first one .

I want to show my email account .

So I say info at we are Web Divine .

Let's come , I change the icon to a and Philippe I go to , to the icon and I make the icon , orange , yellow make the size a bit bigger .

Also for the text .

I want to go far bigger text and then at the color I say white .

Did I duplicate it twice because over here , I want to say something about my website .

I change this to an address I can and the third one is a phone number like that .

I want to update it .

Take a look so we can make this form better if you follow the tutorial .

This is how it looks .

I think it looks nice .

And then I want to go over here , I first go over here to the border stop and left .

So I need to go to the those two still border and I check it and I say 2020 .

So we have those riding around over here and over here in here , click over here on the container and you know what I want to do 60 and 16 .

Then I go to the devi is fuel 60 and then I go for the smartphone view and over here I see 30 and then at the the edge can go to the border and I can decide to go for , let's say 2020 N zero N zero .

Let's see what which area is .

Ok .

There's also ok , you here border 2020 years see better .

So let's see .

Yeah , I got the right two and then over here , I also got the right ones .

Yeah .

So there are those rounding and also here or details and people kind of they form from their phone and that makes our website almost complete .

We've created all the pages we want to create .

Of course , it can be that you want to create a different page as well by now .

I hope you know how to build things in element .

So what is next ?

So we've created quite a few pages .

Congratulations with that .

If you're still here , I respect that .

Thank you because the longer you watch the better my video will perform in youtube .

So thank you .

If you're not watching this on youtube , maybe you should consider , hey , maybe I should go to youtube to the original owner and watch for this video instead of downloading this from a pirate website and that happens all the time .

No , no , it's not happening .

I forbid it , I have a whole team of lawyers .

No .

OK .

Uh Let's talk about the food .

Let's create a foot using the team .

Now , I want to take a look at the foot of our website right now .

We have this and I want to add some more stuff so I can go to the customizer , click and pay down there it is .

So I go to the food .

Let's start with this area .

What I prefer to do here at the footer .

I want to go to the design tab beside that , the background is dark but even darker .

Yeah .

And I want to go to the copyright area .

Sometimes it will be hard to select it and click a few times .

I go to design font color , get white logo colors can be orange , only half of it .

They become green .

I don't want that , want them to become white again because our background is already green even though it's a different green but still OK .

I'm OK with the , the , the font size , I go to general , I remove this area and I can say Web Divine and I can bring it to the center and that's all for the bottom row .

I want to go for the middle row .

I see nothing yet .

Well , first , I want to make it four or equally divided .

I go back and I need to create our dragon area over here in order for it to pop up .

So there it is which is area two , which is a three and the fourth one , I want to show some socials there they are .

So I go to the backgrounds of the middle row to design and I change the background to the green one like that at the middle row again at the design .

I want the title funds to be white , the font color to be white or a top divider .

OK ?

And then fourth make it orange and three pixels .

So it doesn't matter if you have a light background below or a dark one .

There's a nice separation over here .

So so far .

So good .

OK .

OK .

Which is the area I want , I click on it sometimes hard to click on it .

Yeah , I got this and then I click on the plus and now I can add everything that I can add in the press editor .

So I search for an image .

There it is .

I go to the media library and I go for my light image on a dark background .

There are ghosts below .

I can have more stuff I can have text over here .

So let me go to dome Generator .

Get a nice text about our company as a caption or I click on the plus I go for a paragraph .

I base it and ghosts , I can bring it to the center to the left .

I can bring it low down or up right now .

You don't see that because it's taking up all the space .

So this widget area one and the widget area two and three .

I want have two menus and I need to create those .

So let me publish this and then I go back and back .

I go to menu .

I create my first menu .

Call this one legal and I'm not gonna place it anywhere .

So I click .

I'm next .

I want to create any few pages .

The first one is privacy policy .

The second one is cookie policy .

I use cookies on my website .

The third one is GDPR and the fourth one .

VC ma of English .

Then I go back and I want to create a new menu .

A second menu legal .

Next , I want to create two more pages for that .

The first one is terms and conditions .

The second one is terms of use .

Of course , you can play something else over here .

Nice links to your services , whatever you want .

So I publish it .

Then I go back , I go back and then I go to the widgets .

Uh sorry , sorry , sorry to the footer .

Go to widget area two .

Click on the plus and search for a menu , navigation menu with the title legal .

Then I select legal and ghost .

Then the widget area three , click on the plus .

Search for the menu and I go for you .

Go , you go two and I forgot which is area one is all about legal .

It's about privacy , your privacy .

Great .

What I can do at the design of this whole um middle row design , I can change the widget font can change the size 14 is ok .

I could change the title font juice unit .

So there you go .

Make it bolder like that .

And I want to go to my socials to design .

I can let's make them white when you hover over them , you can make them orange .

But first I go to General and I want to adjust a few things .

I want everything to open in a new depth .

I can change the I can size but what I want , I want to change things from horizontal to vertical and I want to show labels and then I need to go to design again and change the font color to white for this text .

And I click over here or the three dots and I get rid of the capitals and I use a regular font just like everything else in the food or if I want to add more links .

But if I offer over it , it becomes blue .

Never better .

If I want to um add some accounts , I can uh click over here .

Ok .

Now I can add some thanks .

So my email Facebook , you can add a link over here .

What else ?

Let's see .

I have Instagram , I've linked in , people can reach me on Skype .

If they have questions on whatsapp and on youtube , I publish it .

I go back , let me take over here .

Then I go over here and I search for those .

So which one email ?

Click on the plus .

What else ?

Linkedin , click on the plus whatsapp and then youtube .

There you go .

Keep in mind .

Uh Don't make it too crowded .

So what do you really use ?

Maybe you don't use whatsapp on Twitter and get rid of those .

And then we have our footer over here , close it and then it will look like this .

I'm ok with this .

You can change the text over here here .

Look at this .

If I hover over it , I don't want this to happen .

So I go back to the customizer .

I go to the scroll down .

OK .

What I do , I go to the middle row settings to design and look at this .

If I hover over it , I want to be orange .

Sorry .

Uh I want it to be white .

If I hover over it , then orange .

Great .

And what I also can do over here social design .

I can color it .

Keep stays white .

That's what I prefer .

Publish it's base down .

There you go .

And also uh if I go to a different page , the about page looks like that .

If I go to the services page and I enter with a lighter area also , then it still looks fine .

Oh , it's still a dark area .

But it doesn't matter if this is the latest area because of this beautiful orange line , there's a nice separation which makes this fooder look great everywhere .

There's a height over here .

If I want to change it , I go to the customizer to the food and I go to the copyright area and at the text , I go to the text area and I remove the p and be and look at this .

When I do that , there's a beautiful height .

That's what I prefer .

And now it looks even better go to the customizer .

Let's like look how it looks on a smartphone or a tablet fuel .

Ok ?

Or the tablets .

I'd like to bring this to the center , so center and also the first area , bring it to the center and then for the smartphone , it looks like this .

Perfect closes .

And now your website is optimized for all devices , both the header , the content and the footer .

So we're coming to a close but further to this .

So what's more we can do ?

Yes , there is .

But for that , I have different tutorial .

So if you want to create a portfolio within our website , I have a different tutorial for you .

You can watch it over here or you go to the description of this video , you can find it .

So um if you want to do that be my guest , I'm still here .

Yes .

Why the same story is for the block page .

I have a beautiful tutorial where I show you step by step how you can create a block page and optimize it and do research and uh I will make a new one .

But what I have already is great and there you can learn step by step how to create a block post .

Why would you create a blog post ?

Well , if you create a blog post that will be that can be found on the internet .

And then when people find the things you're writing about , which is probably the same thing as the service you offer .

So if I'm writing about an email service I can provide for people , I can write a blog post about email services and then people find me on the internet and they think , hey , 30 can help me because he has a lot of knowledge about the subject and I don't want to do it myself .

So I will reach out for 30 .

So it's actually a way to get organic visitors to your website .

If you want to watch this video , let me show you where you can find it in order to find a video , you can go to the description of this video or you go to youtube in a new type of course .

And then we search for how to write a block post .

And then 30 there is five months old .

I will make a new one .

This one is great and then you can learn how to write a blog post .

Optimize it , do market research , all that stuff .

So good luck with watching that .

So there is actually so much more to cover .

You can create a web shop , you can start with affiliate marketing , you can optimize your website for the Google search results .

Well , let me show you the tutorials .

I want to show you that you can follow after this one .

So you can get even more out of your website .

OK .

People let's go back to youtube dot com .

You're already there .

But in a new tip .

So what else can you do ?

Or if your website is finished , you need to optimize it for all search engines and you can do that through the rank math tutorial .

I think I'm at number one , complete rank ma tutorial 2022 2 hours long on how to be found better in the search results .

What else if you want to sell things on the internet ?

Search for woocommerce tutorial .

If you don't find me , just say 30 after that 30 there it is for our tutorial on how to create products , different kind of products and link them with your payment method , calculate shipping at coupon codes , et cetera .

A really valuable tool , valuable tutorial .

If I can say so myself , then if you want to build an email list , Govert K tutorial 30 how to build an email list from scratch .

It made me more than $200,000 .

Of course , it's not true .

This click bait .

No , it is true .

Wow , how great is that ?

It's crazy what you can do with email marketing .

So in this tutorial , I will show you how to build an email list , how to create broadcast emails , give something in exchange for an email address and I'll show you some numbers on how much money you can make with that .

And then last but not least affiliate marketing tutorial .

And then there's so much competition .

I say 30 Phillip marketing tutorial for beginner from 0 to 1 million and it can be even more depending on how much effort you put into it .

Six hour tutorial , then another six hour tutorial .

This one is a complete uh course about the field marketing .

This one is specific for making a website and then there's the 3rd 13 years old .

It's a shorter 1 , 3.5 hours on the website also .

So you can choose one of those .

It seems that I think this one is better than this one , but this one is too long .

So I think it scares people away .

I need to stop talking because also this tutorial is becoming quite long .

So let's wrap it up .

So ladies and gentlemen , thank you for arriving at this bar .

That means that you've watched Thor or you skip to the anthem to see what I have to say because sometimes in the end , I make really good jokes and people go to the end of the video .

That's a joke .

Um ok , so thank you for watching this video .

Feel free to like the video and to subscribe for more upcoming tutorials .

And if you have any questions , feel free to leave a comment , uh feel free to do whatever you want as long as it's in the boundaries of the principles that we use worldwide , not stealing and stuff .

Yeah , I'm trying to be funny .

Where is it ?

What else ?

Let me go to my notes .

Um Yeah , as I said , there are a few follow up tutorials .

I will also show you over here and there's a subscribe button .

You can subscribe from our on tutorials I would love that only if you want to because if you subscribe and you do nothing with watching my tutorials , then youtube thinks I'm a bad channel and I will rank averse for me .

It's all about growth .

I also grew in Bounce .

So that's it .

And uh bye bye .