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.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 WordPress theme and a free page builder called Elementor 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 the logo Elementor is a fantastic free page builder that enables you to create your pages using a simple drag and drop method and I will show you step by step how you can do that and if you want to change something just click and then you can adjust the content and you can adjust the style that is how easy it is we will use Global colors on our website so if you want to change the colors they will change on the whole website so with a few clicks you can change the look and feel of your website with the header you can create something like this also like this or this you can make your whole header sticky or just a part of it and you can make parts of your header transparent like this or like this and when you scroll you can add a different logo and it's all really simple to set it up like this I will also show you how to create all these scratch so this is how my homepage looks but with the skills I teach you in this tutorial you can also make Pages like this or like this or like this and of course the website we 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'll also show you how to create a portfolio page and showcase your work we'll talk about creating the right title for your website finding high quality images add external plugins to give your website more functionalities like extra Elementor elements or I contact forms so people can reach out to you I will save parts of our designs and our website so we can use it again and again and save time I will also show you how to copy and paste whole areas in your website with a few clicks when you watch the 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 the extra source of income those of people who have watched my tutorials 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 timestamp so if you want to go to a certain part in the tutorial you can click on one of those timestamps and go go directly to that part of the tutorial when I go to fast for you you can go to the settings here at YouTube playback speed slow down the speed of this tutorial and if you want to go back a few seconds in the video just hit the left arrow on your keyboard and you'll go back 5 seconds in the video if you can appreciate it 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 web hosting what is a domain name a domain name is the address of your website web hosting 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 thing you will create your website and for the website we will make people can charge thousands of dollars but I will show you for free how you can do it yourself if you already have a domain and web hosting you can do two things you can migrate your current website to this amazing web hosting platform live tutorial here that can show you step by step how you can do that and if you already have installed WordPress you can skip Step 2 and go directly to step 3 and I will show you right now where I 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.com hit enter I love hostinger and I'm not the only one if you take a look at all the reviews at trustpilot 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 hostinger 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 two dollars per month you only thing is you don't get a free domain name with this plan the WordPress starter plan you can create up to 100 websites in this plan you have 100 gigabyte 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 gigabyte stores but I don't think you need those extra 100 gigabytes I think this is enough for one on the websites but you can have more monthly visits but you can always operate later so when it 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 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 ten I suggest you go with the WordPress starter plan and then when you reach 25 000 visits per month and I hope that will be the case for you then 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 totally risk free and I will show you step by step how you can create your first website so I select the WordPress 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 dollars 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 that 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 seven dollars per month instead of nine dollars but wait there is more if you scroll down over here you see have a coupon code and if you fill in 30 and you click on apply you get even more discounts so I scroll up again now you see dollar 69 for the first 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 and of course you need to have access to this account then I scroll down a bit further and the great thing is with hostinger you have local payment methods so if I'm from the Netherlands and I go to hostinger I can pay with idea 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 hostinger 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 the WordPress starter plan for 12 months we can have up to 100 websites our first domain is completely free instead of ten dollars we get a lot of discount 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 hostinger account we need to confirm our password and then I click on confirm now they're 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 WordPress 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 WordPress 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'll 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.com you see all those extensions they have I go for.com and if it's already taken be creative with another domain name because you definitely want to have a.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.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 WordPress will be installed on this brand new domain name which is completely free I click on finish setup 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 hosting personally or because you're 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 Holland my 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 hostinger automatically your information your email and your funnel which 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 hostinger that is free with other web hosting companies this can cost 20 dollars 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 while 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 dashboard what I want to do I want to force the https so our website will be secure like this so I turn that on and it's for this domain name so I click on install SSL and it says your SSL as 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 okay then we need to go to our dashboard 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 live 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're logged in and when you 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 plugin that needs an update so I can select it and I can update the plugin 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 PDFs images Word documents 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 plugin called WP forms Lite and some plugins when they're active also appear here at the left hand this one for instance then with 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 plugin I like to work in a cleaned 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 while we are doing that I will also show you a few configurations we can configure in order to do that I need to 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 I uncheck 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 okay and there they go now if I go to the website and I go to this blog post it's on every WordPress 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 permalinks and I change the permalink structure from plane to pose name I scroll down and I click on Save the changes now if I go to the website and 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 Freddy corpse.com I want to change that in order to do that I go over here and I edit my profile you can change the look of feel of 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 and my last name over here and then here at display name publicity I want to change to my first and last name so if I select that look at this now it says howdy 30 Corps shook 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 gravator account so in order to have an image over here you need to create a gravita account it costs around 50 per month but it's really worth it now just kidding it's free right Mouse click open link and a new tab then you can create your gravitar 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 howdy for the corpse 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 https HPS I scroll down and I need to save the changes and then I need to log in again probably so I'll use my email address which I use to sign up for my WordPress website the information we have fill in over here and my password then I scroll down I can change the side 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 I 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 webdefine.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 loss Angelus if 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 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 a web design company Los Angeles so you see when you search for web design Los Angeles same is for Sydney let me correct that I skip the ads top top okay 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 let's go to the back end to settings General we can go to the site Arrow instead of saying we are web design Welcome to our website we should have keywords in our title if you want to have a website you're not going to 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 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 web design New York what I always do I try not to copy but I get inspired from other titles so it's a top website okay 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 23 Plus years experience or o 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 tagline 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 best tools okay so that's the title on the tagline and if I save it look at this now if I go to the website it changes over here web design agency Los Angeles while design AG Los Angeles all-in-one packages it is 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 that 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 do you want to express Trust or piece optimism and then you often see you see that over here people use with color palettes so not one color in your website but three colors or three to five colors so if you want to get inspired 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 green if you are 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 coolers.com and then start the generator then you can play around with all those colors so you can just hit space when you see color you like for your website you can lock it and then based on this color here new colors will appear that are a great combination with this color so there you go again like this one what I prefer to do is have a head color 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 would 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 paste it and if I want 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 in the warm area so what I have I have the the head color which is dark green or dark blue so the head color then the secondary color let me drag 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 and then I can play around with that okay maybe I'm rushing a little bit through like uh just pick a few colors press 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 of competitors maybe with other people to to get a few feeling of what kind of websites 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 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 okay I think you can continue with that if you're happy with those colors you can export them as a PDF and I can call this one web divine two and I export it look at this this is what we can use in our website how great is that let's talk about themes with a 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 fear will change and everything has their own special abilities so there are themes that have not that much abilities there are things 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've talked about features about capabilities about functionalities at all with all I mean the same so I found the bloxy theme it's in my opinion the best free theme you can use there's a pro version but in this tutorial we're going to 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 bloxy theme right now our website looked 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 the theme a theme decides to 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 what I mean by that so I go to the back end then I go to appearance 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 style is different everything looks different and that's what a theme does it decides the look and feel of your website I've done a lot of research and I found the best free WordPress thing there is in order to get it for free you go to 30 corp.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 add new and then just search over here so I search for bloxy and either way it's fine so I hover over here and I click on install can remove this now and then I activate the theme then we need to scroll down to downloads and we need to go for the bloxy companion so we have a bloxy theme and a bloxy companion plugin and those two combined is fireworks so I click on install bloxy 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 icon and maybe you don't have those well let me show you how you can create those I have tutorials about that so what I want to do now I want to upload our logo and our fave icon if I would go to apple.com and then in a new tab I go to tesla.com I see two fave icons the one from Tesla is over here and 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 feedback and yourself I have tutorials about that you can also create your own logo if you search on YouTube for make a logo 30. over here I have tutorials on how to do it yourself as you see over here I suggest you Outsource it you can do that at a 30 corp.com forward slash Fiverr or true upwork.com just hire someone that can create a logo for you 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 want to upload that one so this logo a friend of mine created for me true in in figma and it gave me a lot of options so what I can do now I can select this the design I can export it and even if I'm like a note 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 with the bloxy theme you can import logos through 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 an SVG file for the fave icon 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 that I select my logo and then I can upload a file so I click on select files there I see web design then I go to The Branding and I have my logo which is an SVG file just 12 kilobytes I open it I want to copy the title place it in the alt text and in the description and 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 I go back to the settings of the theme these are the theme settings and there are a lot of extra functionalities within the free bloxy 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 and I select it I upload a file select files from my computer and I go for the save icon open then I click on select crop 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 fave 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 okay ladies and gentlemen it is time to take a look at pages and our menu I'll 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 well why is it saying this and not showing a static homepage well when WordPress started out it was a blogging tool and then a lot of additions were added and now it's a complete website builder that's why it's still here ready to publish your first post so we can showcase our latest post on our home page 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 in 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 names you can call anything you want I like to go to 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 we want to place in your menu and then a deeper question is yeah we're going to 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 added 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 header 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 a web design Agency for you it can be a plumber website so I searched for plumber in Cape Town plumber and let me get to this website I can also open the other ones so what do they have in their heading about themselves the services they offer a block and a contact us page okay 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 an about page and that page will be shown over here if I click over here she's 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 added as a page okay but I have a few servers that I offer and I want to have those as sub items of the services page how can I do that while 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 going to take a look at those colors later but that's how you can create a menu with Sub menu it's looking clean that's how I want to keep it throughout 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 it serves us 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 search for web design agency London and I go for a few websites our work this other way of saying a portfolio portfolio recent work our services reason 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 HP s30 Corpus hook come 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 okay let's go back to the menus I want to get rid of that remove make sure they have more options over here right now we can add pages blog posts custom links and categories over here there are screen options and you can have tags 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 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 homepage where's the home page in our menu no home page here it is because it's a flya menu also here 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 I want to place my home page over here so I scroll down I go to the home page settings in the core area and 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 blog page that means that the bloxy theme will Define the style of the block page and I can tell you boxy does an amazing job with that and you can customize everything we're going to talk about it later I publish it I close it and now you don't see ready to see your first pose but you see the home page so so far so good before we created some colors using coolers.com 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 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 look at this there's a global color palette and by default bloxy gives the main color palette these colors look at this if I change this 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 the 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 a website you have created a lot of different aspects already and then you think hey I want to change the colors they need to change all those colors in the websites I've done that I've I've played around like crazy with copying pacing 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 coolers let's go so I go to my home page to branding and grab my PDF so I grabbed my first color which is this one copy it then I go over here and I paste it and look at this when I do that look at those colors over here it changed then the second color I paste over here really important that you keep the hashtag there otherwise the color will not work okay that's the second color you see it over here third color I want to place it here at the dark area color four okay 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 as black if I want to use perfect black I can use color 3. and color seven I 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 that will speed up your workflow so let me publish it and close it and now we are ready to change the colors in our website as I said before with the bloxy 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 bloxy theme right now I will show you what you can do with the header 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 header 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 you 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 header okay what you see over here there are three rows to the top row the main row and the bottom row and in every row there are three areas left the 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 of what you 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's 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 bottom row settings and the top row settings so I can go to the top row I can go to design background and change that to the green one then I can go to General and I can change the height so I can make it smaller well since there's a button it has a minimum of the height of the button so if I get rid of the button then 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 HTML then 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 here I can change the settings and then add design I can change how it looks so I click over here and I can say contact us at than 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 why do my people hover over it I want them to be orange so here's the initial color and a 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 to White look at this right now it's white and whenever it's 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 a pixel perfect as we want it to be I go to HTML go to design make it a bit bigger change the text but it's really nice what we can do we can also have that lower area menu 2 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 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're 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 closer to each other that can also make it full width that means that it's totally from the left of the screen to the right so if I make the screen smaller command minus totally from the left to the right I prefer the default version like that command 0 Ctrl 0 and I 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 and I think 60 pixels is perfect so if I publish it close it it looks like this and that's great when I think about branding I think about colors and I think about fonts oh we have not yet talked about fonts so that's why I want to do that right now let's talk about fonts now I want to take a look at the fonts on our website right now this is a default font and I want to use another one well I found this 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 fonts.google.com [Music] 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 80s 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 element 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 web design 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 font is quite big font size okay nice clean and clean font capitals okay here you see a serif font let me explain in a minute what it is so you can get inspired and let me show you the difference between serif and Sun serif so if I say serif serif sorry serif versus Sans 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 Sansa reef 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 here at images how it can look Adventure reimagine this is a surrey font the great thing is you can combine it with sound sarif also here so it's up to you like this it's also something you can do so this possible but normally for for the website I have in mind I think it's better to use a sensory 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 ever even I also do not use handwriting otherwise you get this I don't want this to be in my menu so I say sansarif and then I start scrolling by the way if I take a look at my logo it has a point on the eye and it's a square so what I also will do I place an i in the text so I can see if the text I want to use the fonts if they are square so I can use Oswald 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 do you need to sense yes this is it this is the clean font I'm looking for and the great thing is that the Google files are all free so what I can do I can go for nunito Sons and there you see it services are work block contact okay what I also see is everything is in capitals so if I want to change that this is nothing Capital 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 CSS Guru my latest course about CSS which helps you to sell your website I did it in 2007 so I know a little bit about CSS what I want to show you is how to work on CSS and we're going to keep it basic and let me show you what you can do with CSS 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 see that I did my last course about Jesus in 2007 but what I want to do let me see I want to come here and then I say text transform then transform and then lowercase 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 you need to type exactly what I type and I will zoom in a little bit so you can see it sorry I'm going to fast you go to the customizer you scroll down then go to additional CSS and the great thing is it's free with the bloxy 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 paste it look at this that'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 lowercase so I zoom in for you so you can type this text Dash transform lowercase publish so in that way we can use CSS 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. okay that's great we don't have to talk about line I because 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. okay 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 hover over it however I want it 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 boxed 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 it is this dark color but if I hover over it look at this then I want it to be orange or green let's do orange I don't feel it I have a better ID how about we make the background color white I make the initial color dark awesome and I see there's still capitals over here so let me fix that in a minute I go to design unito sounds and then I also make it bigger great I can have a divider if I want to I can have a drop down shadow I can have a border radius of the drop down over here in the corner but I'm 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 use the CSS what 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 soft menu looks different no more capitals so it's okay way we can work and then there's a typo make them all the time optimization great okay this is exactly how I want it 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 I search for dummy text generator and click over here blind textgenerator.com and I want to have thousands words into a few paragraphs I copy this whole text select all copy and I paste it over here doesn't matter how it looks right now 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 header and then to the header step I click on global header and I want to turn on 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 top row stick with us like this but what I see that the color changes over here when I scroll down that's interesting we're going to 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 you 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 headers 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 then it appears I prefer the default one you can also have an offset so right now it's on the top of our page we can also create an offset so I'm 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 and disabled 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 let's 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 publish 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 and there it is I already had it uh before so I already have the contact text I can change the url to 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 CSS 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 the default state it is yellow the text is white I want to hover over it I get this color and that's exactly what I want button color on a sticky state is 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 roundings in our logo and then we can create margin and I don't want it so we'll talk about margin and betting later so now this stands out but I don't need this anymore so I go back and I go back and I scroll down all the way to menus click over here I go to the contact page open it by clicking here and then I remove it great publish 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 and it is and then I know it's working and I say 18. so it's as big as this one then I copy this whole area close it refresh the page I go to the customizer two additional CSS and I paste it and I only want to keep the line font 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 query we will use is Elementor Elementor is my opinion the best free page builder there is I I use it since 2017 and since that moment my my whole WordPress life changed making websites became easier than ever before that's why I use the tool this tool will always be free 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 free version free and I will show you right now for free how to install the free version of Elementor let's get right to it in order to get the elemental page builder we can go to 30 corp.com forward slash Elementor hit enter then we go to pricing page builder plugin now 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 L mentor I know Elementor 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 one of the most popular WordPress plugins ever 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 and I skipped this and I skip this then we go to Elementor 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 changed 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 LS I go to the three lines user preferences turn on editing handles and now there are four options now I can duplicate it and remove it it's so much easier right now over here those options were not available then I click on publish now I've created a page called Elementor 81 really important click on the three lines and click on exit and then you need to 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 Elementor you go to the dashboard when it is disposed or all posts you always need to click more to go where you want to go so I decide the WordPress dashboard apply so every time I exit Elementor I go to the dashboard Elementor overview close this and then I go to the screen options check it off closes closes so we keep it organized now I go to Elementor settings then the fourth step experiments and make sure when you scroll down that the flexbox container is turned on you can use the live websites already I've done that already it works super fine make it active and then save the changes great now 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 Elementor which is in my opinion far better the WordPress build is getting better but right now Elementor is far ahead so I click on edit with Elementor and now I can just remove it all at once great so now we can use Elementor to create our website that's great I'm going to show you so much about this amazing tool the first thing I always want to do is go to those settings over here and change the page layout from default to Elementor full width it will it means that you will get rid of the title and we can have an image that's over complete width of the website updates now I want to click on the plus for the sake of 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 you can do that I click on the plus click on this arrow down area then I go to the style you don't have to understand everything I'm going to 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 style 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 files I go to one of the images I have in my website to business and I grab an image this one I open it then I want to insert the media there it goes and I want to go to size cover and 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 okay 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 bloxy theme and I never use those colors I always use the colors for 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 a dark green color as the first color and then the second color that really dark color palette or I can change the angle to 90 from left to the right and I can also increase the opacity 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 added this with Elementor 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've worked a little bit with Elementor 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 header 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 and scroll down and there's the option transparent functionality so right now when I it's it 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 30 you're crazy but in a good way and then I said yes it's because of the bloxy theme and she gave me a kiss on the cheek and we had a moment no well okay 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 is since we have a dark background I can say I click on the logo and I can say you know what in the 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 figma I export it a logo with white text 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 the transparent State I want it to be white of course when I hover over it I do nothing because then it will automatically get those colors so look at this look at this are many are 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 okay let me show you first let me show you first I go to Elementor so I close this it looks great when I scroll down this looks less great we'll fix it in a minute I added this page with Elementor maybe I do want to have a light Background by the way 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 style background I close it and I remove this part so I say I don't need that anymore now all of a sudden 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 to the customizer I go to the header select the main row go to design and say the transparent state background should be black butts drag it 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 greenish and a bit lighter I prefer black bring it to the left so we have the transparent 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 then 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 I want it to be the default logo so as soon as I scroll down the logo changes well how about the stop area we can do the same I can say at the top row no matter what happens also when we're 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 header headers blue header and let's take the top row 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 design it says at the sticky State the background should be white I want it to be green so it will always stay green when we scroll 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 it was possible with that I don't want to use a top row so if you want to get rid of the top row just remove all the elements in it and now 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 a good option when you use a dark background so then I would go to Elementor and I would make use of the dark overlay 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 to the background remove the image go to the gradient and choose the same colors bring this to 90 update and they have the same effect scroll down and it changes so that's the way to cook rhombus I'm really excited about this what you can do with the header our header 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 two the tablet View and then click 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 this 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 and look a few I go to design and in the default State I want to be white in a transparent State I also want it to be white and in a sticky State I want it to be dark when I hover over it I want to become Orange also here orange and or orange yellow it's a little bit in between okay then we can go back to the eigen size make it a bit bigger we can have an outline solid we even can have a text label saying menu but I don't want that and then when you click on it this menu appears and we can 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 to be visible so I uncheck this okay I can have vertical spacing six then I go to design and let's see what I can do over here I can change this to Nonito sounds change boldness to 600 and also here for the sub menu you need those sounds 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 a yellow and now I'm saying uh orange all the time great and if I want to I can go back I can add other stuff over here on that mobile or develop menu but why should I do that it's a distraction so I don't use it so I'm happy with that then I go to the mobile version and it looks like this great web design and now you see those capitals again if I want to get rid of it I can do the same thing I did before go to menus name menu and here at about I type it in small capitals services are work and block what I can do let me go to the header of the tablet View 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 nope I drag it over here below so that's how we can optimize it for all devices okay we have created a beautiful header using the bloxy theme with a lot of functionalities that in other themes are premium you need to pay for that but in the blockchain theme it is free I really liked about the theme but now it is Elemental time and Elementor 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 that looks like a section but there are no more columns but there are elements but they use the flexbox container so it works a little bit different the learning curve is a little bit harder but I will show you 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 without further Ado let's make a website using Elementor before we start to work with Elementor 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 Elementor so I close this I added the page with Elementor and before making a website with Elementor was 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 higher minimum height this is the section the blue area in that 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 go back or a button come back or a video and I can drag them in any column it was a really nice way to work at Elementor 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 Elementor 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're also a little bit limited and with the container Builder and elements without the columns we 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 going to work with containers and in those containers we're going to 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 in the 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 will be there the default one one container without any containers in it and the third one is dragging an element in this area and then automatically the 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 a container with three parts you can choose this one and then get rid of those three containers and then you have three parts so over here I use a 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 pre-made 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 nested containers so I have three nested 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 width is boxed that means that it's here from the left to the right over here if I will change that and I make it through it look at this this border is now only 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 by the way if I would play something the elements I can do it 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 600 pixels and you can do that in pixels or you can then do it in viewport height what does it 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 percent 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 also 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 I drag a container over here they want to get rid of this one say right Mouse click delete what I can do now I can click on the plus add an image drag it over here it's really big now I can let's grab this one now I can duplicate it duplicate it duplicate it and duplicate it if I go to the container why is it below each other because here at the container 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 header I say text so the text is rapping a bit weird so let me remove a few images like that but what I can do if I go to 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 duplicate it and duplicate it what I see by default is go from the left to the right that's okay let me make this a little bit higher let's say 500 pixels but it's only at the 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 it is below each other when I say vertical this changes and this changes so look at this if I go to the left take a look at this area in this area it changes so if I put everything from a left to the right that's okay 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 there at the right I can put everything to the end 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's this same amount of space here at the left as at the right so here is twice as much space as 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 era maybe you're thinking 30 what are you doing what are you talking about this is behind the header it's so complicated what are you doing okay 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 the 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 it at the end where 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 I go to this one advanced bring it to the end so now you see that the the things we can do and right now it's stupid text a few columns here like what are you doing but through the tutorial I will 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 a fourth 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 then 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 to 90 and then I'll show you what you can do so I go to the layout and I change the height to [Music] 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've 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'll drag this container over here and then I can duplicate that 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 the direction to left to right look at that that's how you do it now 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'll 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 tabs 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 with borders shape dividers and here with the it files area we can play with the margin and the padding we can create motion effects transform things make things responsive and add some custom CSS which is by the way a pro option but thanks to the black C thing we can also add CSS in our theme and then we'll it will still apply within Elementor so depending on what you select there are three depths or almost always three tabs layout style Advance if I go to this heading look at this we see the tab content so here we 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 the hero see so we're going to explore them more and more and if I would add an image for instance over here to 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 okay 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 to the global funds and if you go to phones.google.com I decided to go with nunito sons as a normal fund but I want to go um with open sounds after as the default one so primary I will say open sounds everywhere copy paste it secondary also open sounds third one so by default the text on my website will be open sounds it's updated and then this is the fallback sansarif which is great because I don't want to use a serif I go back then I go to the typography and over here the body text typography I want this to be open sounds and default text font I think 18 is great pick letters and then o the headers H1 H2 this is a header I want them to be Nonito sense sounds so I copy this select it over here H2 you see that the change that means that this is an H2 a default a header starts with H2 you can have only one H1 header on every page that's really important for Google and after that I will use H2 headers or headings paste it there it is there you go so two funds and that's totally fine for me click here go to the style change the text color to a global color that means that if I want to change that Global color later on it will be changed over here hopefully by default it's negative sounds so if I go for new Nito 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 okay 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 or actions 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 okay where do I buy this well there's a really straightforward button on the website that says buy or people are like okay 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 they take a look at tesla.com also two options create a custom one that will take longer or see what's already available so people that are like okay I want to create my custom one with a certain color click here and hey I want to have a Tesla 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 spend companies spend millions of dollars in marketing and we can just take a look at their website and learn from that for free so I want to have two call to actions so I go over here to all the elements and I drag it here below I want to change this to our cases or our work then I search for work in the link and then I can select the page artwork 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 but now it's 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 to get in touch and then I want to go to the style and when I see the button typography that's already okay with me I want to go for the background color and again I want people to get in touch with me so I change the color to this one to get some attention and I want to change the Border radius to 25 and then I can say right Mouse click copy and paste style 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 context form or to reach out to us to call us so I want this to be another color but I want to maintain the style so I don't say I want to have a different color okay 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 it 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 let's see get in touch 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 on get in touch or reach out to us or get a quote and then you can see how you can convert 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 what should happen when we hover over here well over here I can go to the style and say when people hover over here the background should become green and also over here cell hover 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 you can adjust everything Pixel Perfect 10. 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 Elementor it looks nice but now when I want to change something look at this since I use the eye and I decide that I want to say work to and I click on update I don't have to refresh this page automatically it will be refreshed and this is so nice when you think about workflow 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 Elementor I go to the three lines to the side settings and layouts it is 11 40 and I want to keep it that way that's a great width for a website now if I go to the customizer of the bloxy thing I can go to General layout and I see the width is different so if I paste that now I have the same width for both the page builder anything so if I close this everything is lined up perfectly I have been making websites since 1999 I started in front page Express then I went to Dreamweaver and Joomla and WordPress and now I'm still with WordPress but still to this day I'm sometimes confused about banning a margin instead of telling you right now in front of the camera I will just show you how it works betting and margin coming next right now [Music] well over here I see there's small space so it's not perfectly lining up and that has everything to do with betting a 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 the yellow one or orange right now you see that the text is really close to the Border what you also see is that there's a small gap between this container and this element and that has everything to do here at the layout with margin and padding what is margin margin is creating space outside of an element so I have this yellow background and when I increase the margin the yellow background does not go with us but I create space outside of this element with bedding 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 that increase space within the area if you don't use betting 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 30 I made a website based on your tutorial this is how it looks and then I see that I'm like oh the bedding and the colors so that I think maybe I should make better tutorials and that's why I'm doing my best right now to talk about margin and padding 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 go to Advanced and I uncheck the padding look at this now it is gone because the padding is inside of this container so if I turn this on again I remove it then that space is back because by default there's always a little bit off adding that's how it works with betting and margin so I go back to the element scroll down background no thank you so over here I want 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're searching where everything is and the more you play around with this the more you work with Elementor the clearer it becomes I say 20. update a 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 drag this image over here I have this image on my computer and you can Google on YouTube on how to learn things like this how to make it I go to the web design folder to home page and then I have here my website which I've made and I made 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 paste it in alt text and paste it in the description insert the media now it looks like this let's update it and I would look like this okay that's okay we can make it look better in my opinion but this is starts okay let's take it a step further I've 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 I go for console delivery open 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 insert the gallery and 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 the time like that and now I can slide nice but I don't want people to do that I want it to go automatically so 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 autoplay when I hover over it I still want it to continue so I say no pause on however 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 now to change the effect from slide to fade look at this one two three like that I want the animation speed to be a second which is a thousand milliseconds and the direction doesn't matter because I'm fading it instead of sliding it update 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 uh 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 want to use a shape divider and at the bottom I can choose a type so I can have mountains like this or clouds or tilt and what I think only I would only use two or three because I think if you use pyramids yeah yeah okay parents is okay let's see exact also okay and then you can change the width the height but 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 okay 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 some clarity so I say website title or just title I know it's a website and here it's right or work cell by the way this Navigator I can also bring it here to the right but then my website becomes a bit smaller you can get used to it but I prefer to just keep it floating and then I can get rid of it or I can get it back so we've created a hero in Elementor congratulations I hope you liked it too 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 flexbox container it's it's easy at the end it's easier it's faster your website will be faster and now step by step I want to dive a little bit deeper show you different aspects of the Elementor flexbox 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 want to go for three but they're already three over here so I remove those ones I click on the plus I search for an icon box 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'll explain a little bit what I mean by we listen I want to tell you that a text writing an artist so you can hire someone to write a text for you but I always started out with my own texts 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 a 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 error or listen that's near 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 build light bulb okay this is how it looks uh I don't like it it looks like this I don't like it so how can we make this look better well here we can change the view from the file to Stacked or framed I want to go for frame shape I can make it a square or a circle I like to Circle because there are circles and roundings 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 Stell so we have the content now I want to style this content so I start with the bribery color which is this one and then the secondary color is my green color then 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 bedding increase it I think 15 is fine we can even turn it a little bit look at this and I think 10 is okay we rotate it a little bit then the Border I don't want to have a border so I say zero and now it looks like this already a little bit better I close the eigen 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 the die-cut biography font is okay but I wanted to make the text a little bit smaller 18. not too big it's okay no text 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. I want 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 update it and 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 2 Etc 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 icon box and then I go to the style background of the container and I want it to be White and I want to go to the Border and the Border radius I want it to be 20. if I update it and I take a look okay I want to increase the padding 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 then I remove this okay I go to the first container then I go to style 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 style and paste it over here right Mouse click paste the style and paste Style 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 and go to Elementor to the container to layout 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 wrap we said it needs to 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 will 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 okay now I want to change the content over here so the icon 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 change the icon maybe a handshake like working together thinking along and then the third one we are fast so I want to go for a 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 layout and then over here to get in between I want to reduce it to 20. yes better I want to bring it up a little bit more so I go to Advanced at container say minus 85. okay 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 padding uncheck this and at the bottom I can increase it and see everything the the height stays the same the only thing that happens is that this is Shifting up until 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 to let people taste a little bit of the atmosphere by saying something about the company and show you 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 paste well it's y text so I don't see it so I click on it I go to the style and make a text palette color one then I want to go to the background and what I can do I can copy this area so here I'll right Mouse click copy and then here faces tell there you go now I also pasted 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 style do the shape divider to the bottom nothing nothing and none then I go back over here heading and then I turn this off and I say 60 and 60. below this area I want to have a text of course I want to change this text to do something else taste the atmosphere at web design below I want to have a text so I go for the text editor I drag it here below and I place a text then I want to go to the style text color and make it white really nice and what I want to do okay it is time for a CSS lesson and it looks a little bit um complicated and maybe this that I just want to go for it so what I see over here I want to go over here to this color 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 code let me grab the whole area I copy it okay what I want to do I want to make a highlight over here and that highlight I want 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 facing the color code I wanted to have the color palette one color let me show you I go to Elementor I want to go to this text over here content and I go to the text area so I see all the the codes so class pH B1 Etc so I searched for the area nothing has to be done but everything is possible I can grab random text over here so let me show you okay there it is okay I'll zoom in again what I start with is this opening span space plus two SS equals semicolon and those two shift comma shift comma twice and over here I can get this across so I can say pellet 0 1. then I close this with an arrow to the right okay 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 okay 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 this CSS dot palette zero one and then I need to style that using CSS 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 add additional CSS enter enter I say dot palette zero one opening let's see if I say font Dash W on weight I can say both what you see now look at this now this is bold so I can attach a lot of cells over here so let's start with color and then I paste this code and then again let me uh get back that color I Mouse click inspect click on the variation what I need is only this part copy that VAR and then the palette color one so let me use it over here and look at this wow okay now I think okay so much hassle for just this y well let me show you now if 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 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 that 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 six five seven three 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 zero zero six five three six something like that no I don't think so I'm not sure I basic color back okay let me figure out what this color is branding what divine 6573 almost seven three okay now everything's 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 the space over here so what I want to do I want to go to Elementor on to go to The Container or the Navigator this is the second container I can call this double click three features taste at mosphere there 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 padding make it 60 also here it is already fine great what I can do now again I can use a carousel image Carousel I drag it over here I select the images and what I did um the unless you have your own images of your own company you can go to 30corp.com forward slash istock and then you can get photos I have a subscription over here so what I did I set team then I found an image I liked this one and I searched for photos of the same series I bought a few photos they can be expensive they can be 27 dollars per piece but think about the the first impression you leave behind this also costs money in this mock-up but I'm ready 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 a free alternative go to pixabay.com then if you search for a team you also can find nice images but the quality is a little bit less or yeah it's up to you to to decide what you think about that okay 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 istock 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 command 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 let's say 1024 how many slices 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 pass on Hover no puzzle interaction every three seconds a new image will appear and I will take the time of one second before the new slide appears so the animation is one second like that infinite Loop yes as the latest image the first one appears again the effect I like it to be slide and direction to the left like that then I want to go to the style the position of the Peggy Nation this one I want 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 offer website and then you can also play around with the the width so over here I can say it should be 40 percent over here I can say it should be 60 percent and then you see It'll 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 where we're also thinking about other stuff SEO hosting hostel Ing and I have to say I I just translate this text from Dutch they'll take it too serious uh normally you can also use lorem Epson text but um it's up to you what kind of text you want to play on your website don't take this too serious 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 WordPress 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 to blogging through advertising on your website creating 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 Elementor I will 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 drag a container over here and I want to start with a heading 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 open 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 now 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 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 then 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 Uli elements in the video elements I go to the style pixels I think what is a right amount of pixels in width I think this one can be smaller this one is okay 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 it's from the left and nothing here at the right so I can place it in the center I can place it to the right I can place 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 I 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 padding and say padding top 60 and bottom also 60 to create some space and then of course I can change the title Awards we have one and 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 style and I want to change this to a gradient with green and color four and change it to 90. and then I copy this area and I paste it and I paste it I click over here go to Advanced uncheck the padding 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 how to make the text White I want to make the text smaller foreign also in a heading I can give it a background so I go to background at Advanced and I change it to the yellow color now I go to the layout and at the padding I increase it then I say this is what we do and then I want to create a new area with four columns over here copy this one and paste the style over here click over here I change it from the left to the right like that and now I want to have some things in the container a few first an icon I drag it over here after that I go back I want to 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 if I drag 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 I want to talk about branding so what fits branding how about fingerprint 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 zero one and go to the cell and I'll make 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 that typography and that's okay but I want to bring it closer so I go to margin and I bring it closer 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 okay 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 based on that let me duplicate it we will have a branding strategy and then we will create a logo and branding I don't like the colors so I go to style text text color will be White the text can be a bit smaller bit bolder and then add a list I want to increase the space between no it's fine okay okay update so far so good branding can be a bit smaller 35 great now on the duplicate this a few times and get rid of this one this one and this one now I'll change the eigens the number the title in the list and I'll be back with you okay then I go over here to Advanced in a 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 layout I can change the width and bring it closer 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 want to create a light area again with four areas I start with the first one it will be 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 before and then 4 30 let's say four seconds 4.3 seconds in order to show everything and go through the styling the text color like that and then the title to this color and I change the text to [Music] websites made I duplicated a few times and I change this to years of experience you know what over here 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 to the style 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 gold or 600 okay right Mouse click copy basic Style and paste style over here it can be faster one second what else 12. employees and 19 Awards 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'll just start with the title copy paste and with the background copy base Style and then let's say reach out to us and then I like to have a divider should I drag it here and then we'll go to the right so here I say arrow down click 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 paste 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 copy paste and then I say get in touch yes okay 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 otherwise it 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 you 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 Elementor and I can go to this buttons for instance I can go to Advanced close this and I'll 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 the 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 what I can say then that after 0.75 seconds sorry sorry sorry wait 500. and get in touch advanced motion effects from the right fast I can say after 0.75 seconds and then you get a nice animation you can also grab a complete container instead of only an element so I click here advanced motion effect from the right normal and then after 1.5 seconds so then it 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 a normal animation let's say 500 seconds I mean 500 milliseconds then after a second okay and now after one and a half seconds disappears so then I want to do this motion effects fading up after two seconds then this one Fade up wait wait wait wait Fade up fading up after 2.3 seconds and then the third one after 2.6 seconds now this happens okay well I think there should be less okay wait we're coming closer to something that it needs to feel good and then this one foreign those three things okay nice and then okay this looks nice uh when you do this we right now 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 okay 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 Elementor I hope you like it already and get a little bit familiar with the two now let's optimize this for all devices 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 Elementor okay 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 optimize this website for all devices and is going to blow your mind I hope so maybe not because you already know how amazing Elementary is so direct space expectations expectations are really high 30 you're talking too much yes let's continue first like this video I'm watching but come on Freddie be serious come on you need to be serious YouTube is all about being serious okay let's talk about optimizing your website for all devices now I want to optimize 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 okay except for one thing let me go to the hero because I use a lot of padding 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 give it here so at the padding I would like to say I don't want to look up I want to say 60. you know what 30. better okay if I want to I can click here go to the style to the 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 side but if a size but if I go to a desktop it is 40. so that's the power of Elementor 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 there should be a padding everywhere by the way let's go to the hero and decrease the size because we don't need that amount of space let's say 500 more than enough okay then let me see I can also click over here go to layout change this make it but it's it's okay and as long as I change nothing it will automatically use the settings of the desktop so if I would change something develop mode for instance this text automatically the same size of 33 will be visible on the phone LS I change it so it overwrites it override each other so what I want to do here click over here 15. and I can copy it paste it and paste it or command Z command Z and command Z I click over here and I go to the content I say icon position on top perfect copy paste style and then of course I want to have my content title back to let me see sorry the title back to 22. copy paste style and a style 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 you can take a look I can say that when it comes to the alignment this should be on top you see it's only at the tablet like that so that is better in my opinion okay again over here Advanced make this 30 so there's a little bit more space everywhere Awards we have one again also over here Advanced heading 30 and then over here I go to the style pixels make it 90. over here make it 200. over here make it 1 60 and then here make it 120. great over here advanced 30 everywhere and then here let's go to the longest word Style change typography to 20 22. copy basic Style basis style and base Style over here typography make it 60 copy basis still base style and base Estelle and this looks fine so let's go to the mobile version and then I go to the container and I will do sorry the hero container let's increase it a bit then I go to the second container Advanced and check and bring it closer to each other I like that maybe go to layout decrease the height wait wait wait it's not sorry of the hero I mean and then here typography sorry content before the mobile bringing to the center and then over here I can bring it up a little bit wait a minute and check this minus 60 a little bit we listen we think along so over here I go to the layout I want to increase the Gap in between how about 60. so it gives some space Also below at Advanced uncheck 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 sorry uh gang content bring it to the center and also this area bring everything to the center and the center and I copy this Style [Music] and I face a style 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 these are desktop screen this is on the tablet and this is on the phone there are a few things I see that are not corrected 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 to cookie crumbles now 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 you can save quite some time by copying and pasting things I want to talk about the about page so let's get right to it now I'll go to the about page and I want to open it in a new tab holding commands or control on a PC I click over here here at the homepage I want to edit this with Elementor and meanwhile go to the about page and I want to edit the page I cannot edit it with Elementor yet because I've not turned it on so I click on edit page and now over here I can say edit with Elementor and now it's an Elementor page the first thing I do every time I go to a new page I go to the settings and change the page layout to Elementor 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 Elementor so I open it so I have both the home page and the about Page open in Elementor 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 paste this still so I go for my first container arrow down and then over here right Mouse click I paste the style voila 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 300 or even better I have a great ID 250. yes then I go to all the elements and I drag the heading over here and I rename this to about then I go to the title and I want to bring it to the center then I go to the heading I go to the style and I change it to White so that saves me some time but I want to create a second area and I want to dive a little bit deeper show you some things you can do with Elementor and using Elementor and in the flexible container there are multiple ways on 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 white background that overlaps the image let me show you how I will do that I click on the plus I want to go for this area structure with two containers in one container then I go to the left container I go to style 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 percent so now I see I've a little bit more place for the image perfect then I want to go to the style to the Border I want to increase the Border radius to 20. so we have 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 set 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 okay not working yet okay I go to the style change it to cover now it looks like this okay I'm happy with it but I think you 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 that Navigator because I want to see that the width of the website is what I want and I want 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 percent and the right container is 60 percent the right container needs to have a background so I go to the style and that color I want it to be White and again I go to the Border here and I want to create a 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 I still have the container selected and just to make sure I want the Z index to index to be 10. because right now we have two containers in front of each other and I want this one to be the front one so I say this is 10 it is more than zero so this is in front of this one now what I want to do I want to add a padding of 20 pixels then I click over here I want to add a heading and I say about web design I go back to the right container advanced I go to bedding and I increase it to 20. then I want to go for a text and if I want to use dummy text like this I go to dummy text generator and then I can have a lot of settings 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 won't have less text and then go to the container let me see I mean the upper container and then bring this a little bit more to the Center update 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 update yes okay I want to change the background over here so what I will do I'll go to the container and let me see the the this container to the style 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 to the style shape divider button change the color also to the blue one perfect yes I like it a lot and then here I can just do the same I did before highlight some text make them bold give them that yellow color if you want to know how to do that I go over here to the home page edit with Elementor scroll down click here go to the text and then over here span palette I copy it leave close this and then over here go to the text okay let's get rid of this bold stuff then I go to the text now I can just paste it here and then at the end of spin like that that's the first word then also here and the end of the span and then one more in the center I mean spin great make sure those paragraphs come back updates yes that's what I want to create another area here below so I click on it arrow to 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 bring those lines closer then I go for the style background 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 Elementor I'm not gonna upsell you saying hey now you need Elementor Pro there are alternative third-party plugins that are built on top of Elementor Elementor is really popular so other companies come and they build things up on top of Elementor so there if you go to the plugins we can install an extra plugin and that gives us a lot of free extra elements within Elementor 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 and I want to add some team members but there's no Elementor 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 then I go to the back end to plugins add new look at this if I search for Elementor there are a lot of third-party plugins that will build upon Elementor for instance essential add-ons and those plugins are quite popular more than a million installations a lot of people like it even more than Elementor itself updated four days ago and compatible with my version of Wordpress so I click on install now I activate it and look at this if I would go to essential add-ons 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 Elementor 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 added to Elementor I can scroll down I go over here to all the elements that I search for team there it is essential Advanced 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 istock so let's say team I upload them all and I grab the first image I insert it there you go I change the image size to 1024 and then I can change the content so this is Andy essco and I can have a text so again I go to dummy text generator I want to have this text and then I'll see it here below and I also 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 but it's still percentage 300 pixels so you see a little bit better what you can do then I go to the background 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 wanted to be yellow orange color the job position I wanted to be the green color and a little bit bigger let's say bowler at least bold and then maybe 18 just like the title and then the text maybe a bit smaller and change the line Knight give it some 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 we go to Advanced betting and you increase it but then also the image decreases I don't want that so what I can do I can 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 would 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 CSS I start with a point every class starts with a point I open it opening parentheses and then I can say backgrounds black and then I see okay 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 Elementor 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 that are to duplicate it you see it's fitting automatically why because over here add a layout I said nothing about rapping 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 then it's okay but now there's a lot of space over here left 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 change it to let's say 300 70 . copy paste Style base Style okay then I go to the container and I increase decreases so let me see how much space I've left okay 15 pixels so what I can say over here a little bit of math let's say 65 or let's say 60. 360. copy or copy paste style and base Style okay now I go back to the container increase it until I see it goes to a new line okay 30. and now it looks great copy the cell based over here and paste it 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 just continue so that's a really nice flow really easy to do using the flexbox container and now we've created quite a nice page using Elementor and now I want to know how it looks while we optimize it for all devices so let's see on an iPad or tablet okay this is too high so I go back to navigator title better this still looks great if you ask me okay here I want to f a little bit more spacing let's say 60. and then I go over here and I make this 300 I think 300 40 is fine copy basis Style no it's not okay let's see copy they still let's see what's happening here how small should it become before okay now I know three five three five star base style and basic style okay so far so good and then for a phone about let's make it 250. also nice this perfect okay over here I think advanced 30 is also fine perfect I'm happy with the result you see optimizing the website it's not a big task because by default Elementor 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 in Elementor now I want to take that to the next level next the next few pages will be created by 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 okay 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 services page then I open this page in Elementor and the service page I click on edit page edit with Elementor and now you should know the drill go to the settings change the page layout to full width 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 don't apply the settings just a style so that saves time for the next page I can do the same so I change this to services I would have some extra information here below in order to get it I click on the I over here I go to the home page I click on edit with Elementor 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 grab this text and I paste it let's keep it with this okay I go to the style change the color to white and then I go to the title and 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 so I change this a bit let's say uh 400 or 500. go to Advanced get rid of that great then I click on the text I want to bring it to the center a note let's say 450. 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 a dark background I can change that I can copy it paste it then I go to the background and I change it from the gradient 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 to the style and I change the style to this color okay before I continue let me remove this click over here I go to the Border I want it to be 20 so we have nice rounded Corners I go to Advanced depending and I increase it and now right Mouse click copy paste get rid of this basis they'll get rid of this and a style and get rid of this okay I have to say 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 pasting and then adjusting I go to Advanced and I changes to 30 to 30. okay 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 percent so I copy this copy paste I copy The Branding text copy paste and I change the color to The Dark One then I want to go for a text so I drag it here below and I paste the text then I want to copy this area copy paste can I change the colors too green and how to make a text bowler then I go to the home page I grab this button copy right Mouse click paste and I want to get rid of the animation so I go to Advanced motion effects X there it is then I click over here go to the content and I say go to The Branding page wait ing so I can search for Branding or typed in and then The Branding page will appear okay I go to the container to Advanced and check this and make this 60 and 60. and go to the style and I change the background to the light greenish bluish color and then I want to go for the border and at the top also 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 style background Type image and I want to grab an image and insert the media and then click on size cover 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 this at this as big as possible everything stays on the same line or same row so 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 okay duplicate it again now over here I say 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 for great branding web design web design let me be back with you when I've adjusted everything okay I copy this from web design I paste it then I copy the style I paste this style and remove this so that's how you can work really efficiently the more you do this the easier Becomes of course I really like flying to my pages adjusting things the latest one copy paste copy this style basis cell remove it of course we need to change decks but this lower ambition text okay then I want to end with the following at the home page I have a call to action copy paste 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 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 don't make it too uh corny be creative but right now and just grab the images I have over here so a realize page if you ask me and we create it in a relative short amount of time because we could copy and paste a lot of things I'll just look on a mobile really important question I'm glad you asked let me click over here go for the tablet then I go to the Navigator title let's increase it 350. or 400 I click over here go to the style I copy this I paste over here the style basis style and paste the style and what I don't like is that this is longer than this so what I am I need to fix is somehow so let me see I can go to bedding okay that's how it has been solved right now over here of course we need to talk about betting 30 okay for this image I click over here go to the style and I change the size to contain and now repeat copy the style over here I say 30 basis Style basic Style and over here make it 30 basis Style make it 30 and that looks fine okay I'm a mobile wow how about we we increase the height a bit okay so far so good I can bring this maybe to the center or copy Asia style and Asia Style if I take a look over here make it cover again and maybe a bit higher 180 copy paste Style face cell and base Style and 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 [Music] yes optimized for all devices update I'm happy with results I hope you are too let's keep the space because what I can do now I can edit this page with Elementor I can go over here to the update area then the arrow up and I can save this whole page as a template and that's what I want to do I call this one services page or Services yeah page save it there it is okay I go back to the website then I go to the first service branding edit the page edit with Elementor go over here change it to full width click on the folder icon my templates and I want to import the services page without 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 I want to have three errors over here so I get rid of this one go to the first one because first I want to go for the brand scan I can get rid of this and 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 logo 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 turns out the overview page it's a specific search page so I can go to web design let me first come back to the website to web design we do the same thing edit page edit with Elementor go to 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 ux UI design [Music] 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 then if you take a look with copying pasting we created this page a four of those pages over here I can get rid of that upper line so that's what you can do when you work with copying and pasting with an Elementor let's create the contact page so I click on contact I added the page edit it with Elementor and go to the settings make it a full web page click on the folder go for the title I insert it don't apply the settings I change this to contact then I want to create a new area with two columns change the background to the bluish one and then in the first area over here I want to have that backgrounds car to be a white one then I want to go to this container here at the left go to the style and make the background color white and I want to duplicate this area drag it over here change the color to Dark One and then below I want to have a form how can we do that I click on the I 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 add new and I search for contact form 7. really simple form Builder install now activate it now I go to the contact area the contact forms and by default they're already is a form to copy this because that's how we can embed the form in our website I copy the shortcode I go to the website or over here and go to all the elements and I drag this here below I go to the text and then I select everything and I paste the code and click on update and there it is if you want to learn how to create a special form using contact form 7 go to YouTube and search for contact form 7 and there's my tutorial it's 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 increase the padding to 30 so we have a little bit more space over here now people can fill in this form then over here I want to go to the style to the Border uncheck this let's say at the left and turn 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 let's say 100 and I see this area is affected so you don't see that well but I see it enough to know that it is that part then I go to this area still 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 penny 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 the 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 shift enter the Netherlands okay I update it then I want to duplicate it and over here I say something about my company the LC number my effect ID number and my bank account number okay I want to do the same trick as I did before in the tutorial so I go to the home page I edit it with Elementor and then I go over here to the text where is it the palette one span copy and go to the text paste paste and paste and then let me see over here I'll say close to spend but I want to close it right after this area also here and also here go to the visuals okay now I want to go to all the elements I search for and I can list that I drag it 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 design .com I change the icon to a envelope go to the style to the icon and I make the icon orange yellow make the size a bit bigger also for the text I want to go for bigger text and then at the color I say white then 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 that tutorial this is how it looks I think it looks nice and then I want to go over here and we'll first go over here to the style border top and left so I need to go to those two still border and uncheck it and I say 20 and 20. so we have those writing roundings over here and over here in here click over here on the container and you know what I want to do 60. and 60. then I go to the thank you 60 and I go for the smartphone View and over here I say 30. and then at the edge I can go to the Border and I can decide to go for let's say 20 and 20. and 0 and 0. let's see which area is okay there's also okay over here border 20 and 20 years you'd 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 roundings and also here or details and people can they form from their phone and that makes our website almost complete we've created all the pages we want to create and of course it can be that you want to create different pages well by now I hope you know how to build things in Elementor so what is next so we've traded 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 that happens all the time no no it's not happening I forbid it I have a whole team of lawyers no okay let's talk about the footer let's create a footer using the bloxy thing now I want to take a look at the footer 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 paste down there it is so I go to the footer 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'll go to the copyright area sometimes a little bit hard to select it so you need to click a few times I go to design font color it's white logo colors can be orange when you hover over it they become green I don't want that and to become white again because our background is already green even though it's a different green but still okay I'm okay with the the font size I go to General I remove this area and I can say web device 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 4 or equally divided and go back and I need to create our Dragon area over here in order for it to pop up so there it is widget area two widget area three and the fourth one I want to show some socials there they are so I go to the background 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 fonts to be white the font color to be white or a top divider okay and then full width 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 okay okay which area I want I click on it sometimes I have 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 WordPress editor so I searched for an image there it is I go to the media library and I go for my light image on a dark background there it goes below I can have more stuff I can have text over here so let me go to dummy text generator get a nice text about our company as a caption or I click on the plus I go for a paragraph and I paste it there it goes 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 at the widget area two and three I want to have two menus and I need to create those so let me publish this and then I go back and back I go to menus and create my first menu call this one legal and I'm not gonna place it anywhere so I click on next I want to create a new 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 vcma publish then I go back and I want to create a new menu 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 I publish it then I go back go back and then I go to the widgets uh sorry sorry do 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 there it goes then widget area three click on the plus search for the menu and I go for legal eagle 2. and I forgot widget area one is all about legal it's about privacy your privacy great what I can do at the design of this whole middle row design I can change the widget font I can change the size 14 is okay I can change the title font choose Nonito sounds there you go make it bolder like that and I want to go to my socials to design icons let's make them white when you hover over them you can make them Orange first I go to General and I want to adjust a few things I want everything to open in a new tab I can change the eigen 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 footer if I want to add more links by the way if I hover over it it becomes blue never if I want to add some accounts I can click over here okay now I can add some things so my email Facebook you can enter a link over here what else let's see I have Instagram [Music] I've LinkedIn people can reach me on Skype if they have questions on WhatsApp and on YouTube I publish it I go back let me click 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 you can get rid of those and then we have our footer over here close it and then it will look like this I'm okay with this you can change the text over here but 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 footer scroll down okay what I do I go to the middle row settings to design and look at this if I hover over it out to be orange sorry I want it to be white if I hover over it then orange great and what I also can do over here socials design I can color it stays White that's what I prefer publish close it page down there you go and also uh if I go to a different page here about page looks like that if I go to the services page and I end 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 nice separation which makes this footer look great everywhere there's a height over here if I want to change that I go to the customizer to the footer and I go to the copyright area and at the text I go to the text area and I remove the B B and look at this when I do that there's a beautiful height that's what I prefer and now it looks even better [Music] go to the customizer let's take a look how it looks on a smartphone or a tablet tablet View okay for the tablets I like to bring this to the center socials 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 30 there so much more we can do yes there is but for that I have different tutorials so if you want to create a portfolio within your 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 blog page I have a beautiful tutorial where I show you step by step how you can create a blog page and optimize it and do research and 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 blog 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 tab of course and then we search for how to write a blog post and then 30. there it is five months old I will make a new one this one is great 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 webshop 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 okay people let's go back to youtube.com you're already there but in a new tab 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 ranked tutorial 2022 two 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 the shipping add coupon codes Etc a really valuable tutorial valuable tutorial if I can say so myself then if you want to build an email list convertkit tutorial 30 how to build an email list from scratch it made me more than two hundred thousand dollars of course it's not true this clickbait 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 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. affiliate marketing tutorial for beginners from zero to one 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 course about affiliate marketing this one is specific for making a website and then there's the third one two years old it's a shorter one three and a half hours on a website also so you can choose one of those it seems I think this one is better than this one but this one is too long so I think it's cash 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 part that means that you've watched thorough or you skipped to the end and you 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 okay 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 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'll also show you over here and there's the Subscribe button you can subscribe for morecon tutorials I would love that only if you want to because if you subscribe you do nothing with watching my tutorials then YouTube thinks I'm a bad channel on I will rank version for me it's all about growth I also grew in pounds so that's it and bye bye

Channel: Ferdy Korpershoek

Views: 786,930

Keywords: wordpress tutorial for beginners, wordpress tutorial 2023, Elementor Wordpress Tutorial 2023, elementor flexbox container tutoriall, create a wordpress website, wordpress tutorial, make a website, create a website, how to build a website, how to make a website, how to create a website, how to make a website for free, build a website, how to make a website using wordpress, wordpress website tutorial, wordpress for beginners, Free Domain, Free Hosting, make a wordpress website

Id: 6r1cFtFh1AU

Length: 239min 56sec (14396 seconds)

Published: Tue Jan 03 2023