How To Make A WordPress Website | Beginners Tutorial

hello people my name is ferdi and in this video i will show you step by step how you can create a professional website using a free theme a free page builder a free stock images even when you've never created a website before this tutorial is for you let me show you what we will cover in this tutorial so this is the website we're gonna create we have a white logo with white text in the call to action and when i scroll down we change the header colors and we see another logo really nice nice menu and a nice sub menu if i want to i can adjust this header so i can go to the customizer go to the header i can add some html i can add social icons over here then i can say that the top row should have a background that is dark blue and then i go to html because i want to change the link color from orange to light blue or white and when i scroll down it sticks with us and if i don't want that i can go back to the headers and decide that only this area should stick with us now we have this header over here and if i scroll down only this area sticks with us we will create this page using the elementor page builder and i will show you how to create this step by step i will also give you all the templates so you can download them but i will show step by step how you can create this from scratch a good looking contact form all using free tools here's our food air can showcase our latest case studies talk about our company show some quick links and our recent post and if i click here i go up again and we're not just gonna create something over here we're gonna talk a lot about how you can give a great first impression to your viewers don't say welcome on this website be really clear this is what we will do for you talk more about it and then have a call to action over here or over here so we're not just gonna create a website we're gonna create a website that converts that gives us new clients and let me show you the power of elementor if i edit this page with elementor we can do so many things i can click on this image we can go to advanced close this i go to motion effects i say you know what i want you to fade in from the right like that but a little bit slower and after a half second [Music] if i think hey there is not much space over here i can go to this area go to advanced and create some space over here pixel perfect if i think this text is too big i can click on it go to the style change the typography to 40 and if i want to i can make it uppercase i don't like this color so i go to style and i change it to a blue one when i hover over it it shrinks but i rather let it grow maybe you're like what are you doing where are you going you're going all over the place in this tutorial i will show you step by step how you can learn how to create pages like this and how to apply all these things that i'm showing you right now but that's not all what we will also do is really important we will optimize our website for all devices so if i click over here i can see how it will look on the tablet and if i don't like it i can change it so maybe i want to have a little bit more space from the sides i go to advanced i change this to 70. now we have more space from the side if i don't like it command z command z ctrl z and it goes back to the original state and i can update it so we will make sure everything looks great for every device we go to the about page i'll show you how to create this from scratch but i'll also show you how you can import pages like this so you can save yourself a lot of time import a few pages and adjust the information you can showcase your services and have sub items those are all pages if i go to the case studies we can showcase what we've done for clients in the past so visitors can get excited about what you can do for them you can create categories so this was marketing rebranding web design when you click on it we created a template that will showcase all our portfolio items or case studies like this text a few images and then we see related projects click over here again and we're gonna create a blog page with blog posts and blog posts are a great way to get organic visitors to your website so they search on google for something they go to your website because of your content and then they also can get excited and maybe you want to make use of your services i click on a blog post and i will show you how to format it like this i'll show you how to create a blog post let's create a converting blog post and thanks to the bloxy theme it all looks really nice and below the blog post people can share this people can read about the author go to the social media accounts of this author and go to the related post and leave a reply if they want to i'll show you how to import a contact page then you can change the information saving yourself a lot of time and talking about saving time if we go to the home page look at this we will set everything up in a way that can save so much time when we want to change the colors in our website so if i go to the customizer and i go to colors i have my global color palette and if i want to change one color make it darker so let's let's make it this color what i will see everywhere in the website style changes then i have this orange button so i go to the orange one and change it to something else green and now everywhere i use that orange button or the orange color it's green i can change the second color and in a few clicks we can change the complete look and feel of our website and we can choose between different color palettes this one for instance this can be handy when the clients of your says you know i like it but i want to change the colors you just can do it in a few clicks when you follow this tutorial you will not only learn how to create an amazing website but you will also be able to start a web design agency and start making websites for others make money with that another thing you can do you can write blog posts place advertisements on it and then you can also start to make money so when you learn how to make websites a whole new world opens with opportunities for you to do things for a living and i will talk about it in the tutorial a few more practical things for you when i go to fast for you you can go to the settings of the youtube video and change the playback speed to a slower one or you can click on the left arrow on your keyboard and go back five seconds in the video in the description of the video i have time sam so if you want to go to a certain part of the video you can click on one of the timestamps and you go directly to that part of the video i hope this introduction made you excited already if you are please like this video feel free to subscribe for more upcoming wordpress related tutorials and now let me show you the four steps we're gonna take in order to create an amazing website so there are four things we need to do if you don't have it yet i will show you how you can get your own domain name and web hosting that can give you seventy percent discount after that we will install wordpress then we get the bloxy theme and the elementor page builder then we will create our amazing website if you already have a domain name and web hosting and you have already installed wordpress i will show you on the screen right now where i need to go in order to continue with this tutorial now it's really time to get started the first things we need are a domain name web hosting let me tell you what a domain name is and what my posting is a domain name is the address of your website so if i would go to facebook.com facebook.com is the domain and everything you see on this website is the web hosting web hosting is a really fast computer that is turned on 24 7 with all the information on your website you can rent it for a few dollars per month it's like having a house if you want people to visit you you need to give them your address and your domain name is the address of your website so your domain name is the address of your website and everything you see over here is the web hosting if facebook would have no domain name it would look something like this and that can be quite a challenge to remember by heart and that's why we need a domain name and when we have a domain name we want to display things on our website and that's why we need web hosting if you have that already that's great then you can skip this part if you don't have it go to webhosting1515.com [Music] hit enter and then you can click on the link go to siteground i love siteground scigirl is in my opinion the best web hosting provider there is and i'm not the only one with that opinion in the facebook web hosting group with more than 5000 members siteground is mentioned most when it comes to the best web hosting provider and i agree with them i scroll down a bit and there are three plans you can choose and the best value for your money is to grow big plan what is the difference between the grow big plan and the startup plan here with the grow brickplane you can have unlimited websites look at this unlimited websites with the startup plan you only have one website and all the time people are upgrading from startup to grow big because they want to create more websites so i suggest rubric and you can always upgrade later if you want to over here you can have unlimited websites 20 gigabytes of web space while most websites are 200 megabytes so you can have up to 100 websites with this plan you can have up to 100 000 visits per month and i hope you will get that because that will mean a lot of business for you and then if you have that you can always upgrade to the go geek plan and then you'll have 40 gigabyte of web space and you can have up to 400 000 visits per month this is the plan i have right now because i have a lot of websites and a lot of visitors but keep in mind you can always upgrade later so i will start with the grow big plan and more great things about is you can have free ssl so your website will be secured with some web hosting providers that cost money here it is free you have daily backups that's amazing if you somehow mess things up sideground got you covered you will have a backup of the day before and of the day before that free cdn that means that your website will be fast throughout the whole world no matter where the visitors come from your website will be blazing fast it can have unlimited free email accounts and really important this is great for e-commerce and if you somehow really don't like it you have a 30 day money back guarantee so there's no risk for you so i will choose to grow big plan by clicking here now we need to choose a domain name if i would say facebook.com i want to buy facebook.com i click on proceed of course it will say you've chosen an invalid domain name because it's already taken so you need to choose a domain name that is still available what i would advise everybody in the world to do is get your own domain name with your first name and last name i hope it's still available for you and otherwise you can use a company name or a custom name [Music] and if you offer local services you can place your hometown in domain for instance web design but slash the great thing is that you can choose a lot of different extensions dot com.net.org i always suggest use.com or the local one from your country i go for ferdinand david so let's see if it's still available i click on proceed yes it says congratulations domain fury and david.com is still available for registration with your hosting account let me make this a little bit bigger for you now i can leave some details over here first my email address jk24co gmail.com i need to create a password and i need to confirm my password and then over here i need to say from which country i am i'm from the netherlands and i will fill in my details ferdi or pursue 30 and anna media if you have a company fill your name over here in your vet text id if you fill in your text id you don't have to pay taxes for this order it's okay great siteground gives feedback at once which is nice i'm from this city this street and my zip code if i would say it wrong it will correct me it will say hey you need to remove the space and then over here i need to fill in my phone number and it's really important that it's the correct number so say plus three one six and then your phone number really important to have this over here the country code i scroll down and depending on where you come from that can be local payment providers so if i would enter this website from the netherlands i would see i do over here you will maybe see paypal i will use credit cards so i will fill in my details and then we go to the purchase information we go for the grow big plan and the data center we can choose a few depending on where you want to focus on if you want to focus on people from the united states keep it in the united states if you want to focus on people from the netherlands or somewhere near the netherlands choose germany or the netherlands i want to go for people worldwide so i choose usa and the period is 12 months we pay 6.69 per month and then we can have unlimited websites on our grow big account which is amazing and then if we scroll down i highly urge you to get domain privacy it will cost you 12 per year but it will save you so much spam because if you don't turn this on a lot of companies can see that there's a new domain name with your personal information with your phone number your address your email account your email address and then they can send you spam emails like hey i can make a logo for you i can do seo for you you don't want that so for twelve dollars you don't have that then i scroll down and i will pay a total amount of 110.27 cents it can be a little bit more or less with you depending on where you come from and with this amount you have a domain name or web hosting for a complete year and you can add more domains to your account and create multiple websites and they're all blazing fast and there's a great support if you get stuck somewhere i confirm that i've read the terms service and i agree with them and i would like to receive news updates from siteground if you got a true web hosting 15.com you don't pay more but you get amazing discount and i do get credit for it so it's a win-win situation and then i click on pay now and then the great thing is that our website will be live immediately we don't have to wait for 24 hours it will be live at once if everything goes right you should see this right now and that's amazing and then i want to congratulate you with a domain name and web hosting if you don't see that it can be that you see something like this if that's the case fill in the confirmation number you get in the text message and then you should be able to proceed and in some cases siteground will put an amount on your credit card account and you need to fill in that number so they know for sure it is your credit card account you can do that by going to your account or your credit card account or by calling your credit card company i had to call them i want to check everything so you know exactly what to do in every situation i hope both of those confirmations do not appear for you but now you know what to do when you see those two screens so let's continue and my account was successfully created how great is that i can proceed to the customer area and i login with jk24co at gmail.com i click on next my password which i just created i click on login really nice this is awesome so we can set up our site but what i prefer to do we will verify it later i will go to websites then over here it says pending but if i click on complete we go to the next screen we use an existing domain we already selected it and i click on continue if you don't see it you can select it over here i click on continue now to skip and create an empty site so i click on that button and then i finish it i don't need to have the psychon scanner it will take a few minutes to set us up most of the time it's shorter a few seconds and there we are we can view our site so if i go to my website it is live we are live right now which is amazing we can also go to the site tools and that's what i prefer so i go to the site tools because we want to make our website secure just like this one in order to do that we need to go to security ssl manager then i select my domain and i select let's encrypt if it's not visible over here that means it's already there i scroll down and i click on actions and force https and i turn it on there it goes now i go to wordpress install and manage because we are ready to install wordpress no matter what you install if you also install woocommerce just select wordpress i scroll down i can select my domain the language the main folder so i can also install it on my domain forward slash new so subfolder new but i want to insert in my main folder then i will have my username my password and my email address i don't need to install the wordpress starter i uncheck it and then i click on install and this can take a minute great we can do two things now we can take a look at the back end of our website this is where we will configure our website and then we have the front end of our website i close this this is what people will see when they go to your website it's called the front end and then this over here is the back end is what you only can see when you're locked in and no matter where you are in the backend or in the front end when you are logged in you see this bar over here this top bar this bar is only visible when you're locked in so your visitors will not see this but if i would go to this website let's say in an incognito window clicking over here when people go to ferdinand david at this moment they will see this website so we are live immediately and that's what i really like when you take a look at your website i think we can all agree it doesn't look that appealing yet we're gonna make it look really appealing really professional but first i want to do a few things in our website i want to work in a clean wordpress environment so we need to remove a few things we don't need and we need to configure a few settings so let's get to that so let me talk you through the front end and the back end starting with the backhand this is the place where we adjust our website we can change the theme we can create blog posts we can add pages we can monitor all the comments we can add plugins create new users go through the settings of the website and step by step i will show you how everything works and then when we change things over here at the back end you'll see the changes here at the front end so first things first i always like to make my website a little bit cleaner because this is a little bit overwhelming so the first thing i do i dismiss this message and all this stuff over here i want to make it look cleaner so first i go to my blog post over here and i want to remove it right now on my website i see one blog post which is this one if i click on it you go to the blog post and there's a comment and it looks really ugly in my opinion we're gonna make it look so much better but first i want to get rid of this blog post i don't need it so over here at the posts i select all the blog posts there's only one build actions move to the trash and i click on apply then i go to the trash and i empty the trash the same goes with pages there are a few pages i don't need those i select them all by clicking here i can also select them individually build actions move to the trash apply then i go to the trash over here and again i can remove them permanently one by one or empty the trash now i go to the dashboard i see all those steps over here i want to collapse them or even better get rid of them so i go to the screen options and i uncheck them all so i don't see unnecessary stuff over here later we're going gonna add a few things over here but right now it's not necessary then i go to the plugins okay two plugins they're not active so i can click on delete if you want to delete a plugin you need to deactivate it first so if i would activate it i cannot delete it right now i first need to deactivate it and then i can delete them okay then i want to go to settings permalinks right now when we have a blog post over here you see this my domain name and then the date i don't want that that's ugly i just don't want that i want to have my domain and then the title of the blog post which is in this case hello world how can i do that here at settings permalinks i select post name that's the best option in order to be found in google and other search engines so i save the changes i do it twice just because i feel like so sometimes it's good to follow your feelings and now if i would refresh this this blog post doesn't exist anymore but it would look like this and it looks much better if i go to my website ferdicorp.com and i go to tutorials how to make a wordpress website it will say freddycorpsing.com how to make a wordpress website for free so that's what i like to use and not this or this or this i don't want that okay so far so good now i want to go over here to my profile and then we can change the look and feel of our backhand i always use the default one i'm just used to it so um i keep it with that what i can do right now you see how defer the corp and then when i write a blog post it will say the author is further corp i don't want to show my username i want to show my real name so my first name is ferdi my last name is corpus hook and then over here at display namplicity i can choose the combination 30 or pursue what you will see over here howdy for the corp souk if you want to have an image over here you can scroll down you can create a profile picture on gravatar so if i open this in the new tab you can sign in and if you sign in with the same email address you use over here at contact info then you can upload an image in this account and then when you use the same email address over here as over here in your gravitor account there will appear an image over here a lot of overhears in one sentence so i normally use this email address for my websites and this email address is also active here at gravatar and when i have that so when i save this and i confirm it my profile picture that i have on gravitor will appear i scroll down all the way i can create a new password if i want to i click on update profile and now i need to confirm my email and i have done that and now you see this image over here which is from gravatar so when i place a blog post and people can see my my profile picture this one will appear and if they see my profile picture i can also say something about myself over here so here so uh i love to teach people about wordpress affiliate marketing and who commerce my style is being honest straight to the point and optimistic i don't know i'm not the best text writer but then we have something over here and then i use grammarly to fix all my errors because there are a lot i'm from the netherlands my first language is dutch so grammarly is helping me thank you emily you're welcome did he talk back no okay whatever so this is how it looks right now really ugly but as i said we're gonna make it look so much better so one more thing go to the side settings in general and here we can give our website a site title really important for the search results and the tagline we're going to talk about this later really important that you have http s over here that your website is secured also over here your administration email address and what we can do over here we can change the language of our website to a different language if you want to and we can change the time zone so if i'm from the netherlands and i want to schedule a few blog posts it's important that my time zone is correct so i can use one of those and google which one is which one or i can scroll up and over here i can select the place where i live or close by so i can choose amsterdam and then i can change the date format depending on where you live it's it's different you can choose one you can create your own and you'll see how it will look over here i like this one and the time format i use this one am and pm using capitals over here and also here you can have your custom time format my week starts on monday and i save the changes one important thing you need to do you need to confirm your website so if we log in at siteground and we log in over here jk24 what i see over here i need to verify my domain card robbie24.com if i don't do that it can disappear so i click on view domain i need to go to my gmail account over here and confirm it so i go to my gmail account sideground verification required it's already the the second email or the third i don't know i click here scroll down and click on approve and i'm okay with this information and i verify the information if i did not do that let me see within seven days from this day on my website would be offline and i don't want it because i'm already selling products so really important to him to approve your domain now when you come back in a few days or maybe immediately it is now 20 minutes later and this message is gone so it means her domain name is confirmed since i'm here at my siteground i want to show you something really important let's go to websites i go to the site tools i've got a robbie 24 then i want to go to speed caching side ground is all about speed so they have an amazing super cache that will make your website super fast but the thing is when you're adjusting your website it can be that those adjustments will not be displayed at once while when you make a website that's a big thing because we want to see the results that we adjusted so in order to see the results of everything you configure in your website you need to go to dynamic cache and over here flush the cache but it's not a fun process to flush the cache all the time when you change something in your website so for now i want to go to this tab and i want to turn the super cacher off over here and now when we adjust things in our website we see the results immediately and then when you're finished with your website go back to this place and turn it back on so if we take a look at our website it looks ugly okay ladies and gentlemen we're gonna install a wordpress theme there are thousands of wordpress themes and these they decide look a few of your website and there are themes that gives you extra functionalities well i've been around quite a long time in wordpress world i really like it here and i think i know what the best theme is there are a few but i want to choose the best of the best and at this moment in my opinion that is the bloxy theme it will make your layout look so much better and it can help you to create beautiful headers footers and it has those extra functionalities which are really nice so are you ready to download the bloxy theme i hope you are because we're going to do that right now wordpress theme decides the look and feel of your page and it gives you certain functionality so right now my website looks like this when i would go to the back end to appearance themes i see a few other themes and they look different so what will happen i have this title over here i have no content yet but if i would have it the content would me remain the same but the style would change so if i would choose this theme by clicking on active over here and i refresh the page i still have the title and the subtitle and now it all looks different the footer looks different there's a new functionality over here go to the top i have a search icon over here i did not have that with the other theme so themes decide the cell of your website and every theme has their own functionalities so if i would go for 2021 i refresh the page again the titles here the subtitle the footer but there's no go to the top button over here there's no search icon over here so as i said every theme has their own functionalities and that's why we're going for the best theme the best free theme there is right now in order to get it we go to 30 corp dot com forward slash block c hit enter it will be redirected to creative themes and there we can download this theme by clicking here free download i can click on downloads it is a popular theme it has a lot of installations a lot of wow five star reviews one four star how dare he or she wow and it's been downloaded every day a few thousand times and i know why because it's one of the best themes out there in my opinion it's the best thing right now but i hope the competition will drive all the theme makers to make better free themes so we are the winner so i have the theme over here as a zip file so i go to the back end to themes i can click on add new upload theme i can drag it over here and click on install now or i go to appearance themes add new and i search in the database so over here i can search for block c and there it is and i click on install i don't need this one anymore and then i click on active activate so if i refresh this page it looks different but with this theme also comes a plugin so i click over here on install block c companion that will give it a lot of extra functionalities which we of course want okay you can decide if they uh can see things you do on your website so they can make their tool better i do that you don't have to do that but you can and then i was talking about extra functionalities we have starter sites over here that's a functionality that lets you import a complete website with a few clicks it's a great functionality within the free bloxy theme and there are extensions free extensions and pro extensions so for instance cookie consent so if i activate this and somebody goes to your website for the first time they see this area and they need to accept it and normally you should download the plugin for that now it is included in this theme so i love this theme so i will show you step by step how you can use this theme and the first thing i want to do i want to create a menu with the home page the about page and all the pages you want to create so in order to do that we go over here in the front end to the customizer then i scroll down all the way and i see menus i click on it and now i can create a new menu we don't have a menu yet so i click over here you can give this a name it's just for reference purpose only you're the only one that will see this so you can call this one uncle jim or john [Music] as long as you know which menu it is well i'll call this the main menu and then i need to assign the menu to a certain place in the website i can assign it to the footer over here or to the header one or even to the header two that can be header here above and for the mobile menu so i right now i choose header1 and the mobile menu i click on next and now i need to add items so right now i can add items that will appear over here so i click on this plus and i can add a new page and the first page of course i want to add is the home page so i just call this one home and i click on add and when we do so it will appear over here come on minus where are you it's a little bit shy there it is home also if i would publish it then i will see it but i want to add more items so i click on add items so what kind of pages do you want to have on your website well it depends on what kind of website you are creating what i always suggest is that you have an about page about me about us about i call this one about and i click on add and what i suggest you do depending on the the company you have search for websites of competitors so if i would have an uh marketing digital marketing agency i search for digital marketing agency and then let's say sydney and please don't copy things but you can get inspired by other websites so those people pay money for it and when you pay money for your website you know you have an optimized website you want to spend less than you make so when those people are advertising they probably make money with that so they probably have a really good website so i open this in a new tab this is how it looks so they have a text over here call to action really nice so they say about then they have creative if a lot of sub menus web design seo digital marketing programmatic advertising work and blog so what i can learn from this is okay show your services web design seo digital marketing okay so what i will do i will add a new item call this one services okay i edit and then i want to have the pages of my services so what do i offer well i do offer rebranding marketing [Music] web design and maybe you have other sources you can add them over here but what happens they are added to the menu and i want to add them into a sub menu how can i do that over here i have services i want rebranding to be here below so i drag this to the right this one also this one also and now it's a sub item so i click on publish then it closes now we see it looks like this and we can style this later but i think this looks nice home about services so what else what else can we learn what else can we do well of course we want to showcase what we have to offer if you offer a certain service you want to show people what you've got so i go to the back end sorry the website and then to the customizer again scroll down all the way or you can click over here oh no no just kidding no i'm not kidding yes i'm kidding but now we're going to the cell i want to go to the menu itself so sorry i was misleading you you know always when i was lead people no i don't leave people that much much as i know i go to the main menu yes there we are so i click on add items and i can say portfolio or cases and also here i can take a look at what others do if i go back or close this let me go to one of the search results that is really high because that should also be a really great website and that's the same one yeah it's the same one they are doing a great job so i go to the second organic result case studies okay case studies add about us resources block our services okay what i like to do is add a blog post because when you add blog posts to your website you can be found through the organic results so when people search on a certain subject they can go to your website find your blog and then if they like the blog they can see hey these guys know what they're talking about maybe i can outsource my product to them so it can help you to earn extra money get more clients and all that stuff and a call to action we can take a look at that later so um the blog page at and of course when people are super excited about you they want to get in touch with you so we will have a contact page so that's how we can work just search for a competitor see what they are doing preferably the one of the best search results because those websites are doing a great job google thinks those websites are amazing so probably the visitors also think that way and then you can learn from them about services case studies blog we are doing a great job we are having almost the same things about services case studies blog and then also contact us and we can also make a beautiful button like this and maybe something like this so save that i was talking about not copying but you could get inspiration from other websites if i refresh the page nothing happens because i need to publish it first and then it will be saved and now if i refresh the page this is how it looks if i go to one of those websites what i do not see is the homepage button also with different websites you don't see it so we should also not show it over here people click on this link then they go to the homepage so people go to case studies and looks beautifully like this when we want to go to the homepage we don't click here we click here so in order to fix that i go over here to the back end and at home i click on the arrow down and i remove it then i publish it i click on the x i want to change one thing sorry go to the customizer again it says ready to publish your first post so right now our home page is showing the most recent posts so if i scroll down i can change that by going to the homepage settings and change our homepage displays to a static page and then we can select that static page which is the home page and the post page is of course the blog page publish close it so now we see the homepage over here so i want to do a few things about the header so it looks nice and then we're going to focus on creating a beautiful website using the elementor page builder how can we do that we go back to the customizer and if you want to follow along with the same images i use in the tutorial you can go to 30 corp.com forward slash images hit enter and there it goes then you can open them and there you have them you can drag them to the desktop i have them over here and then you can go to how to make a website 2020 i have a few logos over here in color and in white a fave icon so a few images you can use so you can follow along in this tutorial and what you also can do you can use your own logo your own images create your own websites i go to the customizer i hover over here and i click on those three dots and then i go directly to the logo area i select a logo and here at upload files i click on select files i go to the desktop to images tutorial how to make a website 2022 and then over here i select or i search for the logo advantage logo in color i open it then i always optimize all my images because then can be found through your images through google i remove the dashes copy the title paste that alt text and paste it in the description that's the way the cookie crumbles then i click on select and there the logo is but below there is this text and i don't want that so over here i have a few settings so i want to uncheck the site title and then over here i can change the logo height to make it bigger i can make it smaller and i think 40 is perfect so i don't want to show this or the tagline no just want to have a logo and for me that's perfect i don't have to go to design because i'm happy with how it looks and then i can go back go back and here we can customize our theme and one of the options is the header so i go to the header i want to rem i want to make this a little bit less high how can i do that i can click over here i can also hover over here and click over here on main row then i can change the minimum height of this header while i think it's really high the examples we just saw of other websites were also not that high you can increase it but i rather use a lot of space to show my homepage so i bring it back to 70. and then i think then the logos are maybe a little bit big so i click over here and bring this back to 34. okay then i can click over here and i can select the menu i use the main menu and i can select how it is shown so right now when i hover over this becomes blue but i can also change it to type 2 then we have also a line here below or the third one or the fourth one well i like to keep things clean if you take a look at apple it's clean when you hover over it it changes a little bit it's just clean not much other things so i want to keep it clean like apple i can also change the space over here between the manual items like that but i think it's perfect and if i don't want to change it or bring it back i just click here and there we go it will go back i can also stretch it there's so much you can do look at this look at this we're going to talk later about the header and the menu but if i want to i can drag this menu over here to the center and to take it to the next level i can also drag it over here to another area and in this area i can click over here i can go to design give it a different background color then i go to the menu can change the colors to white so there's so much you can do let me bring it back let me bring this also back to the right there's so much you can do we'll talk about later right now i just want to make it look okay so i go to this menu and i go to design so here we can change a few settings and then at design we can change the colors and other stuff so i click over here on default family and i want to change this to new nito i just like that font i can make it a little bit less bold like that and then over here i can do other things i can make it bigger i can change the line i'd well for now it doesn't matter because we only have one line i can change the letter spacing bring it back i can bring it back to normal cases or uppercases underline it and then change the colors well let me talk about colors let me publish it refresh it it looks so much better already let's take a look at colors because we can use certain colors in our website if i go back and i go back to the colors i can make use of global color palettes and when i use those colors and i change those colors everywhere in the website the whole style will change by just clicking once clicking again so now if i hover this becomes red so we can use this global color palette to save you a lot of time so what i want to do i use this tool over here it's called the color pick eyedropper you can download it as an extension in chrome and i can grab this color so i copy it i choose the first color i paste it and if it doesn't work hashtag before then it works i copy this again i paste it and i want to make it a little bit lighter then the third color i want to use an orange color to to yeah to for my branding i use orange you see it over here and the fourth one for me is black then i want to have a gray color that's the text of my uh the color of my text not completely black also not that light too light so that's okay color six i want it to be white perfectly the seventh one the eighth one i also want it to be white because i don't use those colors so i want to make use of this color these colors and please never use too much colors in the website i like to use three the blue one the live blue one and the orange one don't use yellow and green and then on a different area on the website blue and red maintain your style okay so now the base text i wanted to be the dark one the links links can be dark blue or light blue and when i hover over it they can become orange when i select the text sorry sorry sorry let me go back to colors when i select the text the background becomes dark blue i can also make that orange so when i select something it's up to you what you want to do with that borders and give them a color then all headings well i like them to have this color this one aside background if you change this it will look like that well i prefer white so publish so you see it looks like this and when i would change it to the green ones this will all change if i would change it to this one so i like palette one and for now that's enough we're gonna take a look at the header and the footer later i close this this is what we have so far about services for now it's perfect okay this looks great a few more things i want to do before we get started with elementor i go to the customizer because i want to change the title of the website where can we do that if we scroll down we can go to site identity and there we see the site title and the site title is really important and if you have a site title please don't call it your business name advantage media group because when people want to search for a certain service and they don't know me they will never search for this if somebody wants to have a website they search for web design probably their city rotterdam so if i would skip the ads over here the title this is the title you can create over here and will be displayed over here like this web design wrote to them rather than website website web design rather than web design and brought to them web design wrote to them web design wrote to them web design web direction wrought to them web design rotted them again again again so make sure that the title you want to be found on the keyword you want to be found on is in the beginning of your site title so i would call this one digital marketing rotterdam or in my case amsterdam so people know hey when i see that page i'm searching for a digital marketer in amsterdam that's my title i will be found on the title and then they can get in touch with me and they know immediately i'm from rotterdam and then people see this name and they know hey the advantage media group so they see the name of the company but first digital marketing amsterdam so what on what term do you want to be found what are people searching for when you want your business to appear and that's what you need to type over here as far as to the left as possible digital digital marketing amsterdam and then advantage media group then there's the tech line you can have more information about your company and i say we help companies small and big to get more business and serve more people okay i publish it and then it will be displayed over here so no more on my blog but digital marketing amazon them and then i see this wordpress icon or fav icon and if i would go to apple.com i see the apple icon over here so i want to select my site icon so i click here upload files select files and then i go to my fave icon it needs to be square and i will make it at least 512 pixels by 512 pixels i open it i select it i do not crop it so i click on skip cropping and now it starts to look really nice in my opinion i close this so we have our logo we have our menu which is enough for this moment we're going to focus on the homepage to build it we have the site title and we have this beautiful fave again amg advantage media group i want to say to you that i appreciate yours that you're still hanging around over here i hope you're excited i like making websites and i've been going to a lot of errors in my life with making websites and these days it seems to be quite easy to make a website i hope you think the same thing i hope to help you as good as possible and now we're going to create our first page the home page and we're going to use elementor for that the free page builder in my opinion the best free page builder in the world it is an amazing page builder i can't wait to show you everything but first we're going to download it so let me show you how to download the elementor page builder so in order to get elementor we go to 30 corp dot com forward slash elementor hit enter and elementor is optimizing their page continuously because they want to grow their business so they change a lot of things every time so if i want to find the free version of elementor the plugin this is the pro version get started for free get started and then i need to log in i don't want that so you can also go back and then go to the website your own website go to the back end go to plugins add new and search for el mentor and there it is more than 500 installations but there's somehow there's a cap over here it does not go above and beyond 5 million but meanwhile there are 10 million installations already of elementor it's crazy it's an amazing page builder i click on install now and then i click on activate now i need to do a lot of things i don't want that so i click on skip skip skip skip and skip now it will create a page for us actually i don't want that so i click over here i go to the dashboard i close this then i go to this wordpress icon then i go to all the pages and i remove this draft from elementor trash go to the trash and empty the trash and now we go to the home page by clicking here and now we can edit the page now over here it says we can edit this with elementor so we can do that click here we're finally creating our homepage using elementor but before we do that i want to show you a little bit around let me show you a little bit about what everything is how you can do things so you get a little bit of familiar familiar you get your feet a little bit wet and then we're gonna get started so what i will show you right now in order to save that i will just show you how to work with elementor and through this tutorial you'll get more familiar with it and i'm excited i hope you are too so let's start playing around with elementor and this is how it looks here at the left we have a lot of elements that's why it's called elementor so all these elements over here i can drag them over here and then i can create an image select an image i can adjust it make it bigger smaller i can do a lot of things but before i do that i want to go over a few basic configurations so here at the left top corner i go to the user preferences and i want to make this user interface dark i want to add editing handles right now i see three icons if i want to duplicate this i cannot do that but if i add editing handles i can so it gives you a little bit more options now i can remove that if i turn this off i cannot see those extra options i need to do the right mouse click so go over here use a preference turn this on and now it's easier to do that i close this what else if you see intersection over here that can be possible but i don't want that that means that you need to update if you want to know how to do that click here on update then click here click on exit to the dashboard and click on this icon then we go to elementor settings experiments scroll down turn on the flexbox container by selecting active save it and now again we go to the homepage edit with elementor and now we see container over here when you see that you're good to go okay the first thing i want to do i want to get rid of this area over here so i go to the settings here left below settings and then i want to change the page layout to a elementor full width update now the title is gone now let me show you what is possible with elementor over here at the left when i click on this icon i see all those elements and i can drag them over here and it's what you see is what you get page builder so when i drag something over here i see the result immediately and then i can adjust over here here i can adjust the content here i can adjust the style of the content and here i have advanced options which appear at every element and also every section column let me explain it to you let me close this i go back to all the elements and i want to start with the plus and now i can have a container i can have a container that's pointing downwards so when i add new elements they'll be below each other i can also create a container with elements next to each other and i can also have containers with multiple columns that can be nice when you have one some text over here at the left and the image at the right maybe you want to offer a few services over here four or three so i click over here and then i remove this one this one this one and i can offer my three servers over here so i can have an image with a button and a text and also over here and also over here so let's start really simple let me show you the basics we're not going to save this uh i just want to show you what's possible with elementor so i choose for a container with arrow down that means over here when i go to the elements if i drag this header over here now i can go back to all the elements and i can add a button over here and it will be below or above and that's because we had that arrow so let me show you really quick if i have this arrow to the left and i add a heading and after that i add a button it will be next to each other so that's the difference i actually always use the arrow down or i use one of those containers and don't use this one but through the tutorial you will learn everything you need to know in order to create amazing websites using elementor so what i have over here let me show you i have this container and in that container i have two elements the heading element and the button element and if i would go over here to the navigator icon i can see that over here i have the container and in that i have the header and the button so you can use the navigator to select something and then you can edit it over here i can also bring this to the right so your website becomes a bit smaller and then you have this overview over here really nice when you have a big computer screen and you want to create a website it's really nice to have here at the right i will use it like that sometimes i will remove it and then i can bring it back over here so when i click on the container i have the layout the stell and advanced so here at layout i can have a few settings i can change the width of this container i can change the height so if i want to make this really big let's say 500 i can do that over and then here at the items i can bring this to the right next to each other like that which we just had but i prefer the other one or just nothing so it will be below each other i can bring align the items here to the center and i can align them over here vertically to the center so really easy like that and when i add something now so let's say an icon everything will stay in the center and that's really nice so let me remove the button i go to the container so here i have the settings i can change but i can also change the style the background a few colors so if i would go to the style i can change the background type to a classic color so i can choose a color like that i can also use a gradient so the first color is this one and the second color is the lighter one and then i can adjust the background so i can change the location so maybe i want to have a really straight line like that then i can change the angle i can change the type and in that way i can do a few nice things what i prefer is to make this 0 is 100 and then change the angle to 90. so it's from the left to the right but now the text is a little bit weird i cannot see it that well well then i need to go to this heading area here i can say digital marketing and business growth then i go to the style and at the text color i can make that white over here i can change the typography so i can make this neato i can make it bigger smaller i can make it thin or really thick and it's also easy when i change it over here i see it immediately and if i want to see how it looks on a whole page i can click over here and then i can see the results what else can i do i can make it uppercases so here at the transform uppercase and then if i want to have another text below that i can hover over here duplicate it triple click over here and then i change the text advantage media group i can go to the style make it bigger align it a little bit and then if i wanted to be on top i can drag it over there sometimes if you see it's not working you can always go to the navigator change it like that and i can call this container double click hero i can call this one digital media and the one below advantage so just like that and now i have advanced so if i click over here advanced i can play around with margin so i create some space inside or some padding some space like this that outside or if i make everything zero i can uncheck this and then at the bottom i can make it a minus margin so i can bring things closer to each other then i go to all the elements and i want to add a button over here go to the style change the background color to orange if i hover over it i want to make it blue maybe the light blue like that and that's how you work with elementor just dragging and dropping and then through the content to the style and advanced we can adjust areas in our website so this is just an overview of what you can do and now it's time to create an amazing homepage using the elementor page builder so i want to get rid of this now we're going to start from scratch okay we've been playing around by now you probably know the basics and through this tutorial you will learn more but right now we're gonna start for you making our homepage using the elementor page builder wow good luck so i want to start with the hero that's the first thing people will see when they enter my or your website so it's really important that it's really clear what people can expect when they enter a website they need to see immediately what you can do for them if it's a weird hero like hey welcome on this website people can get confused and they think okay i don't know what this kind of website is so bye bye so we're gonna start building and then meanwhile learn a few things so i want to start with a text over here a title a subtitle and a call to action and then at the right i want to have an image so i click on the plus over here and i want to have two areas left and right so i can choose this one but what i want to have below i want to have an area where i show a few logos of companies i work with or for so i can choose this one but i rather choose this one okay and then i want to start the first thing i want to do at the container i want to change the height so i can make it a little bit higher let's say 500 pixels and that's what i also love about elementor you can change things pixel perfect you can say i want to have exactly 500 pixels in height then i go to the style and i can use a background but i want to use a gradient with the first color dark blue and the second color light blue then i want to change the angle [Music] to 90 degrees so the dark color is at the left and the light color is that the right great then i click here so i go to all the elements and i want to start with a heading like that before i change the heading i go to the style text color click on this world so you can use a global color and i want to use all the colors of the theme so i never use those colors i always use the colors theme color palette 1 etc so i choose the white color sorry palette color 7 and then i go back now i can see the text and i can change it so i say grow your business with ease as i said before i want to have a clear description of what i want to do for my clients i want my clients to grow their business with ease not with easy with ease if i go to apple.com what i do i go to the famous websites in the worlds and then i take a look at what they do how have they done their marketing do you see welcome on our website feel free to take a look around if you have any question hit me up with a contact form submission no they're really clear iphone 13 with a beautiful image super pro learn more or buy so you give the the viewer the visitor an option or they're convinced at once like i want to buy this click here or they are not yet convinced and then they can click on learn more so give people options have call to actions on your website and if you use images use high quality images so i say grow your business with ease and then i want to elaborate on it but before i do that i want to take a look at the fonts in my website because i want every header to have the font called nunito if you want to find fonts you can go to fonts.google.com you can type a text grow your business and then you see something you like maybe you can also [Music] take a look at the categories and if you see something you like opens also really a nice one really clean oswalt bangla noto sans ubuntu if you see something you like you can use it in your website i personally like nunito so i click on those three lines then i go to the site settings global fonts that's what i click on and then at primary my primary font for the for everything is open sounds then my secondary is also open sounds the text of my website also open suns and the accent color of color and also this one okay so far so good i update it then i want to go back one step and then i want to go to typography and then the body text typography again open sounds but over here link color is the same uh typography so i leave it empty but every h so header one header two header three etc which we use to create headers in our website i want them all to be nunito so i copy this now i select it the second one you need to do this only once and did you see that it changed because this is a having two and i just changed heading two so if i change this one changed over here so it will save me a lot of time in the wrong long run if i already predefined all the heading fonts if i pre-defined all the heading fonts [Music] so i continue over here and the latest one i normally only use h1 and h2 h1 can be used only once in your website so grow your business with ease is a heading and i like it to be a heading one because i can have only one heading one and this is my most important title of the website so i choose heading one and all the other ones needs to be h2 so for google heading one is really important heading two is less important but that's why it is important what i can also do i can have a text editor and i can say grow your business with ease and then i can go to the style make it white make it bigger and then it can look exactly the same as this one but then it's not a heading so it's important to use headings now i want to go for a text editor i drag it here below sorry i drag it here below go to the style change the text color to white and then add content i would start typing get more clients okay then i go to the style i want to make this text a bit bigger it's already open sense because we predefined that okay and over here i want this to be bigger so i go to style typography 50. perfect over here i want everything to be in the center so i click over here this container within the container if i want to see how it looks double click this is the hero this is container left let me collapse this that one is container right and i call this one container logos so i select container left and i want to say at the items here below that they should be vertically in the center okay so far so good i go back to all the items all the elements and i bring a button to the page builder and i call this one view work so that's my call to action i want to show people what i'm capable of i want to show some case studies so i click on i select the view work and i can search over here for case studies and since i have a page already i select it and automatically the link will be created so when people click here they go to the case studies page so what i want to do i want to go to the style of this button and then i want to give the background a color and that color is transparent there's no background then i want to create a border solid make it one pixel the color is of course white and then when i hover over it i can do two things i can make it increase or shrink like that and i can give the background so the background color can be the light blue one like that but since it's uh transparent i'm okay with having nothing here grow your business with ease we help companies from startups to enterprise to get more clients view our work great then i go to all the elements and i drag it here to the right an image i click over here and then i select this image at our case study i can also call this the company name of the website over here in the banner but for me this is okay great so far so good then i have this third area over here and what i want to do i want to add an image so i drag it over here i choose the image and i upload a few files i select the files and i go to logos and every colored logo has color after the name so i search for everything that has not color after it so coca-cola hold control or command meta sony spacex uber so five white logos and i start with the first one and that's really big what i can do i can duplicate this a few times then i click on uber the second one and i click on space x the third one sony fourth one meda the fifth one coca-cola so now i want those aligned next to each other instead of below each other in order to do that i go to the navigator i go to the container logos and then at items right now it has this arrow down i want to change that to row and now they're all next to each other really nice i can go to the big hero which contains three containers and what i can say at layout i want it to be bigger so i can increase it but what happens now the more height i give it the more space there will be between those elements so i don't want that i say nothing i make it empty and now i can go to the complete container the hero advanced and then i say at betting at the top i want to have 70 pixels and at the bottom i want to have 70 pixels so everything stays connected here in the center and i want to make it 100 again i can make this pixel perfect so everything stays in the center grow your business with ease we help companies from startups enterprise to get more clients and they can view our work well i want to add one more color so i go to this button and i have a color in my branding which is orange and with those three colors i can make a really nice website and when i hover over it i don't need i don't need the the solid anymore so over here at style of the button i don't need any border anymore and i do want to have uppercase text so over here transform it to uppercase update so when i click on the i what happens i see a preview of what i've created and the great thing about that i is when i change something so let me change this color to a blue one if i update it it will be changed automatically it's now blue if i bring it back to orange and i update it i don't have to refresh the page it will automatically be refreshed that will save you so much time and if you have two screens i highly advise to have this area on your first screen the back end and the elementor page builder and the right and on the right screen i would have the result so as soon as you click on update at the other screen you'll see the update and that way you can work faster by the way there will be more moments where i will talk about productivity and making websites faster because in the end of the day we want to create great websites in the shortest amount of time that will help you how you can do that so i think this looks nice there's more we can do we can click over here on the container and let's tell the background i can collapse that i can have a background overlay that means that i can mix an image with this gradient so here at normal background overlay i can click on the classic one i can select an image so i go to upload files select files if i go back to this one i can go for mac marketing agency amsterdam if i select it and i optimize it copy paste paste and i insert the media look at this it's now overlapping with the gradient so it's 50 percent if i would increase it i see 10 of the image if i decrease it and that way i can play around with this and i can also use blend modes i can multiply those colors overlay and you can play around with that and normally i would do this in photoshop but right now you can do this with an elementor you don't need photoshop for this i use the normal one opacity like that i can change the size to cover so you will see as much of the picture as possible and then one important one if i scroll now everything is static but um but i can change the attachment to fixed this is what i like if i scroll the background stays like that what i don't want is that the image will take too much distraction so it becomes a little bit too crowded if you want don't want that you can always decrease this a little bit more or just get totally rid of it i want to get rid of it i just want to show you it's possible what else is possible over here we can have a video in the background well it's really it becomes really crowded when you have that but if you just want to show a video in the background don't have a lot of content over here then it is possible how do you do that you click over here you import the video link you can adjust the start time the end time play once play on mobile have a fallback image if it somehow doesn't work so that's what you can do and you can have a slideshow with multiple slides so it will change now and then i want to keep it simple and for me this looks fine i can also make this links so i can make it a custom url right now i have a hashtag but i could refer to my case studied called uber and then i can show case what i've created for uber and then this can be a link and then when people click on that link they can go to the case study of uber okay one more thing i go to the hero and then i collapse this and then i see the shape divider that means that i can have nice shapes on top of the bottom of the container so right now it looks like that a little bit creepy i can increase it or decrease it we have quite a few different ones i can have pyramids curves waves you can change the height etc and that's where you can give your website a nice style you can also do this at the bottom i want to keep it simple i want to have a tilt i can flip it i can change the height i think 70 is perfect and then at the top i can say i won't have none so grow your business with ease great okay i click over here i go to advanced and i want to slide this in so i collapse the layout area and i go to motion effects and i say the entrance animation is fading from the left and what it does it fades everything that's within this container from the left to the right i'll do the same over here advanced collapse motion effects fade in from the right and then over here this container let me check the right one container logos advanced collapse this go to the motion effects and fading up like that but we can also give everything a delay so this one can appear slowly after half a second the second one can appear slowly after one second and then the third one can appear slowly after one and a half second now if i update it i can see the results like that when you do this in your whole website i think it will be distracting and can make your website slower so you should not do it too much but now and then i think it's it's a nice way to do that i think there's too much space over here so really simple i go to the hero advanced i bring this one to 50. better okay grow your business we with ease we help companies to start we help companies to get more clients view our work and image great i showed you how to work with the interest animations what i also can do i can click over here on this element i can go to advanced and then i can go to transform normal that means that without you hovering or doing anything you can change this so i can make it look like this so now without me doing anything it will be tilted a little bit like that or what i also can do when i hover over it i can also do things so when i hover over it it tilts even further there's so much more offset skill skew so let's try something so that's what you could do well never overdo this this is too much so but what i can do i can't do this so now if i update it it slides in when i hover it deals even further what we've created so far in elementor it looks really nice in my opinion um but how does it look on a different device it looks great on a desktop screen how does it look on a smartphone or on a tablet well we're gonna optimize it for all devices right now great but really important how does this look on a tablet and on a smartphone well in order to find out i can click over here go to the tablet mode what i see is that everything is really close to the edge it's exactly against the edge so in that case i should go [Music] to the container settings and then the padding i should increase it with 60 pixels at every site and now now it looks like this and then there are a few things i don't like so let's make it 50. what i can do i can click over here go to the typography and then over here for the tablet i can make it smaller let's make it two lines then i go over here to style typography 18. okay if you work looks fine to me over here i go to the style of this image and in pixels i want to say make it a bit smaller and then over here i click layout items bring it to the center only on the tablet then [Music] i go to the container logos and then i uncheck this and i want to increase the margin a little bit so i have more space between the view work and all the logos and at the bottom i want to do the same because right now coca-cola is beneath this white area or in front of so until i think pixel perfect that i like it so now it looks great and there's a little bit of space over here so i'm happy with that how does it look on a smartphone grow your business with each with ease okay i click here advanced uncheck and at the top i want to increase some space and then we have those images over here and what i can say i click here advanced responsive i can say hide this on a mobile so on a mobile i will only see this grow your business with each ease sorry this button this text this image but this will be hidden and you see those lines over here so when i go back to a tablet you don't see those lines because it will be visible but as soon as i go to a smartphone view i see this will not appear that's the power of elementor you can make it all look so great on any device so this is how it looks i can make it smaller this is how it looks on a tablet and this is how it looks on a smartphone and i think there's not much space over here so over here let me see i click and then bottom i can also say 30 pixels update let's take a look make it small again and now i see there's enough space over here i think this all looks amazing okay are you ready for the next area over here what i want to do i want to showcase some portfolio items i don't have them yet but i will show you how to display a few images make it all look really nice and i want to show you a little bit more about elementor we're gonna dive a little bit deeper so i want to get rid of this thing over here by clicking this again drag this over here click on the plus i want to start with this area over here and then with a header or a heading so i change the text to next level digital marketing and then i go to advanced close this i go to the background and i want to add a background really simple just this dark color then i go to the style of the heading change the text color to a white one great then i go to typography i make it a little bit smaller and [Music] let's say 500 make it smaller and then i go to advanced and i increase the padding so i create some space around the area not too much okay but i want to get rid of this stroke over here i only want to to be until this point so i can go to layout change the width to custom then again pixel perfect i can increase it or decrease it until i think it's exactly how i want this to be and that's how it is then i uncheck this and at the top i want to increase some spacing or add some spacing 20 and that's how i like it i go back to all the elements and i drag a heading below first i change the content our focus is your growth and that can be a little bit smaller so i go to the typography yes then i can have text area so i can grab the text editor place it here below and now i can go to the dummy text generator [Music] i click over here and i want to have multiple paragraphs if i want to i can have less words more words you note one paragraph is okay and let's go for 100 words or a little bit less copy this i paste it what i can do here below i can add columns so i can make it two columns or three and i can change the gap in between and then i go to the style make it a bit smaller be careful with too much text people tend not to read it anymore so um okay you know a little bit more if you use this lorem ipsum text you can never be sued for copying someone else's text because if you want to see how thing some things looks and you go to a news website you copy the whole text and place it over here you're violating some copyright stuff we don't want that okay what we can do now it's a little bit next level but at the other hand it's actually basic it's the way how we work with elementor we have one container i can call this one case studies to keep the overview i can make close all these so case that is heading heading and this so what i want to do i want to drag a container in a container isn't that cool so let me drag it over here below there it is and then i can drag it below in that container i want to have three other containers so i drag them over here and then duplicate it and duplicate it then i go to the container settings to the items i want them to be next to each other as a row so one two three exactly what i want now i search for an image i choose an image and you can i don't have this in my folder so you need to use your own images what you can do you can just go to the internet search for portfolio digital agency or whatever and then use those images or you go to pixabay.com there you can find images for free but since you are creating a portfolio you can also use images you have from the case studies you already have created so i select those images let me see let me see portfolio i open this one [Music] i search for another one [Music] is one and then third one this one okay i upload the first one great i want to change the image size to 768 because then it still looks great but we have a less heavy website because if i would say 2000 then it will load unnecessary space because right now it looks great look if you make it 300 by 300 you'll start to see that the quality becomes worse so take a look at the lowest resolution and when it still looks great then it's perfect because you don't want to make your website heavier than necessary okay i go to the elements drag a heading below i call this one the name of the company carry lotion later in the tutorial or and in a different tutorial i will show you how to create a portfolio like this so you don't have to do this manually right now i believe when i show you this you will also learn a little bit more about elementor that's my goal in this tutorial not only to help you to create an amazing website but also to help you to work with elementor so meanwhile i'm at typography i make the text a little bit smaller then i duplicate this area and here i want to place my categories for instance consulting comma identity id and web design and i go to the style typography and make it uppercase make it a bit smaller and over here carry lotion i want to make that dark blue and categories i want to make them lighter blue i go to advanced uncheck this and at margin i bring it closer to each other and at the left padding [Music] let's say five also here at carry lotion advanced left five okay but it still looks a little bit boring in my opinion so how can i fix that i can make it look better by going to the container make sure it is only this container and not the complete container in order to find it out we go to the navigator and it is the first container then i go to the style of that container to border and i don't use a border but i want to use a box shadow if i turn it on by default you have something over here you can adjust it blur it more spread it even further do the on the inside of the or the container well and you can bring it all back bring it all back to you don't stop never give up [Music] bring it all back to you you know i got a phone call a few days ago from an ex-member of s club 7 asking me if i could do this to remember them let's see how they are doing i think they created two video clips s club seven i think it was in the year 2000 really happy music so that was all for free um if i go to the container to the advanced area i want to increase the space the button why is nothing happening sorry i have to be honest i'm making websites now for 23 years and still sometimes i have to figure out what is betting and what is margin i'm sorry i feel like i'm letting you down i go to the border again yes bring it all back okay now i'll do it manually zero zero zero zero and then two or three blur it a little bit then we can also increase or decrease the shadow so let's make this five it can play around and make it pixel perfect then i can duplicate this area and duplicate it and i remove those two over here i change the image to the second one and over here to the third one and then i can change the title seeing believing can be a different categories and then the third one blue lizard it was all about identity and also web design so what does my eye see over here it's not aligning perfectly because this image has a different aspect ratio how can i fix that let me go to the back end by elementor overview go to media and let's take a look at this image i see that the dimensions are 16 by a thousand edit image so if i would say 16 by 10 and i choose crop i have the exact aspect ratio so 16 by 10 then i go to a different image and let me see which one is having problem the blue lizard one so over here i can edit the image and i can say 16 by 10 then i go to crop if i change the size look at this so i select this area and i click on crop i save it i close it and now if i would go to the dashboard if i would go back to the elementor editor page builder now they should be aligned yes and that's what i like i like alignments so our next area next level digital marketing our focus is your growth text and then this area maybe i want to have more space over here in this that case i can go to [Music] container i can rename this case or three case studies and then when i'm over here i can go to the items i can increase the gap pixel perfect so let's say 30 or 40. update that's the way the cookie crumbles one more thing i don't like it that there is not much space over there so let me see what you can do advanced at the left make it 10 and i say copy and paste the style and paste the style and then over here i want to have then at the bottom five so over here right mouse click copy paste style and paste the style update click on the eye great i want to do one more thing i want to duplicate this area and drag this one let me see over here and then i drag it here below as far as i can drag this above it three cases above it okay and then this heading above the text and now i have this button i can bring this to the center and i can say all case studies and advanced margin at the top let's create some space let's give this button a bit of space so what we've done before we have taken a look at how it looks on a different device and again over here advanced say 50 at the betting and then if i go to this container let me see if i have the right one three case studies then i can say make this 20. and then over here the typography for the smartphone for the tablet let's say 16 copy pastel base tail and then over here typography make it a bit smaller 12. copy paste the style and paste the style i like it it looks great smartphone for the smartphone i can say over here your smartphone it should be only one column awesome okay i really like what we have so far what i don't like is that here is the start of our content here's the end of our content all really well lined up except for with the header so if i want to line this up with this area i can go to the let me go to the elementor page builder which is over here and go back then i click on those three lines and i go to the site settings then i go to the layout and i see that the width of our content is 1140 pixels and i want it to be the case also over here so i close this i've copied it 1140 i go to the website to the customizer if i go to command or control minus click on that you see the difference if i want to align that i go to general layout and then the width the maximum size width i change it to 1140 so now it's aligning perfectly it brings a smile on my face i publish it and i close it and now it looks even better very nice i don't want to have the animations because right now if i open it it's just empty and here you see something it's i just wanted to show you that it was possible so i go to advanced over here motion effects i say nothing over here motion effect nothing and then container logos advanced motion effects none or x default refresh yes no more animations let's go to the next area which looks a little bit like this area so i want to show you how you can duplicate an area and change the look of view of it and that shows you the power of elementor so i duplicate this area by clicking here there it is then i go to the container settings still and again [Music] i choose for this gradient i choose this gradient over here i change the text to mindset elevate i go to the advanced area [Music] background i make it a lighter background and then at the layout i decrease this until i think that it fits perfectly yes then i go to our focus is your growth i change that the color to white change the text growth by re by changing the way you think and i click over here change the style you can fill in your own text and then i don't need this area so i click over here i go to three case studies right mouse click delete bye bye and this one i bring it to the left like i say read more and make the background light blue and the link hashtag i can create a page about this and then i can refer to that page okay this is great but what i want to have i want to have an area with two columns and this is one column so let me show you how you can copy and paste things first let me save it by clicking on update so i want to open a new container with two columns let me show you how i do this i click on the container settings still this is what i would do if i would not make a tutorial about it with this speed and then i just drag this over here and this one over here this one over here this button over here then i click here go to the content changes to one column i remove this and now i want to click over here search for an image drag it over here click on the image upload files select files and i search for images tutorial how to make a website this one graphic design remove the dashes copy paste it paste it insert the media go to all the elements and i want to drag a container over here and in that container i want to have another container so i go back to all the elements i search for an icon box okay let me slow down again like that i want to change this icon to a heart so i search over here for heart this one then i go for a title love for our clients i think this text is perfect should not change anything about it i can link it to somewhere but i can also change the position i want to bring the icon to the left like that then i go to the style change the color to orange or it's a heart make it red i can change the spacing i can decrease or increase the size of the heart i think this is fine i can rotate it and then i go to the content and i want to change the title to white and the text description also to white then i want to remove the space over here so at the icon this is okay so at content spacing let's say zero and i'm happy so what i can do i can duplicate this and now it's below each other so i scroll down i go to the let me see the icon box container and the overlapping container so the whole container and then i change the items from left to right i click over here i change the heart to slack and i say support for our clients how to make this text smaller so i go to the content typography this is the title 18 and the text 12. i copy this copy right mouse click paste style and voila i want this to arrive in advance from the right so i go to the motion effects from the right after half second yes then i go to the whole container i increase the padding at 50. uncheck at the right and the left i say zero so that's how we can copy and paste an area and change the look of fuel quite rapidly but again how does it look on a different device also here we're gonna dive a little bit deeper i will show you what your else what else you can do okay what we know by now 50 everywhere what i don't like is this area so let me take a look at that in a minute you know what let's do it right now i want to make the text a little bit smaller okay what i want to do i want to duplicate this whole area like that over here i want to get rid of this of this of this of this over here i want to get rid of this area then i want to drag this over here to the left this one too i want to get rid of this container stuff when i've done that i want to drag this to the left again yes then i go to the overlapping container over here go to the items change this to [Music] 20 like that so this is what i want to show on a tablet and on a smartphone so over here i go to advanced this whole container and then add responsiveness i want to say hide this on the tablet but show it sorry hide it on the desktop but show it on a tablet and show it on a mobile and then to those two i want to say you know this whole container i want to say exactly the opposite height is on the tablet and height is on the smartphone so what happens when i go to the normal screen this area is what will be shown on the normal screen and this is not what will be shown on a normal screen but when i go to a tablet those two will be hidden and this will be shown then i go to the mobile [Music] this will not be shown this will be shown and this will also be shown so let's see how that looks in real life i scroll down this is how it looks i love it i make it smaller this is how it looks on a tablet okay i see that i think there's too much space over here so on the tablet i click here advanced at the top i say nothing wait wait wait uncheck this and at the top nothing and then over here at the bottom nothing so i update it make it smaller so it's a little bit too close maybe but that's how it works and then i go to smartphone perfect maybe a little bit more space over here so smartphone image advanced margin top 30 update looking good i think this is really close to the edge i don't really like it it's one of the first rules and the website i make should be space around update all right guys happy i hope you are if you like what you're seeing so far then please like this video to help me out a lot you're already helping me out because the longer you watch the better i will be found on the internet and that's my goal i want to be found a lot not that i'm lost you know i actually want to be found so i feel free to subscribe for more upcoming tutorials okay let's continue with the homepage are you ready for the next container well i am i hope you are too i scroll down i can create a new one or since the thing i want to create looks like something we already have i can scroll up to this area i duplicate it so now i have two of those areas i click here i hold it i drag it down and i place it here below double click or triple click y advantage question mark i go to advanced i bring this down like that double click over here i call it i say a client first approach to service and support i don't need this text so i hover over here close it close this one this one and this one i remove the button then in this container i want to add two new containers so i drag this one over here and i duplicate it and i want to have them side by side then i go to all the elements i close this and i search for accordion there it is i drag it over here i want to answer a few questions or tell something about my company so i click over here and i call this one title one over here title two i can duplicate it a few times so i have three and i have four okay so far so good i click on an area and it opens and i can see the content and of course you can fill in the content yourself i can change the icon over here to something else but i like the plus and when you open it it becomes a minus it's also what i like so i don't change it but hey you can do that then i go to the style let me open one so i can see what's going on i can change the border width so you see where the border is you can change the color let's say one and i can make it really light then we have the title this area what i always do i like to just choose a color to see which area is affected so now i know okay when i change the background this will be affected bring it back with the color i can do the same okay the active color so maybe i want to have the active color orange for me that's a little bit too much so what i prefer let me go to the icon the active color i want the active color of the icon to be orange so when i click on the plus only the plus or in this case the minus will be orange let me go back over here to the title typography i can change that [Music] stroke why would you want to change the stroke of the text i don't know i don't want that the text shadow you can have a shadow and the padding 20. then i go to the icon what i like to do i like to bring the icon to the right i can change the color of the icon but um i'm okay with the current color i can change the spacing but that's only when you have this option available then spacing is relevant when you put this to the end it's not then i go to the content background okay the content background the color of the content the typography the texture and what i like to do is change the padding and uncheck this and i can increase the top and bottom but i don't need to do this it's already perfectly fine i want to know i want to not zero okay let me turn this on then yes and then it will be by default normal one so i like this title one title to title three and four and i can have my text maybe make the text a little bit smaller and the title also then at the right i want to show something about the the city where i operate amsterdam so i use this image and then there's a space over here and i want to get rid of the space so i need to go to container settings it's called three case studies i call this one faq and then i go to the items and i bring this one to zero so they stick to each other that's what friends do that's what okay accordions do with images from amsterdam they stick together so how does it look on a different device by default it looks nice and by default not the better default but i just need to bring this back to zero and for the smartphone i can click over here go to advanced and get rid of that image by going to responsive and say hi it is on a mobile update and a little bit more space to advanced top 50 button 50. perfect so what is the next step well since people should become excited about your services they should have an option to reach out to you and you can make it easy for them by creating a form contact form so that's what we're gonna do i go to elementor and then i say call command or control e and i can search for the dashboard and click over there and then at once i go to the dashboard then i go to plugins add new and i want to search for wp forms and i will create a complete tutorial about it so i will not take too much time over here but we're going to make a great form so i click on install now it has a lot of installations and the free version is amazing i activate it then i can watch this video but i will show you what you can do so we're going to create our first form by clicking here or go to wp forms add new and then i want to select a simple contact form the second one so i use this template okay great then i can click over here i can change this name first last i go to advanced i want to have a placeholder placeholder text will appear within this area so i say first no first name last no no no no last name so as you see it appears over here and then i want to get rid of this text and this text like that then i go to email i do the same thing i copy this i go to advanced i place it and then i check those two and with the third one copy advanced paste the placeholder text and hide the label i save this form then i close it now i want to use it with an elementor but in order to do that in order to style it i need to have a plugin and this is amazing this is amazing about elementor if you go to plugins add new and you search for elementor there are a lot of free editions so you can have extra elements within your free elementor page builder by installing essential add-ons for instance so we're going to use this one more than a million installations what's the catch why do those people create this for free well they all have a pro version and they hope you get so excited about the free version that you'll buy the pro version in this tutorial we'll make use of the free version so i click on install now and i activate it great you can go for advanced or custom or basic i go for basic i click on next and then over here i can turn on the elements i want to use for now i click on next i'm okay with that next next next no thanks congratulations and then i go to the elements over here the second tab so essential addons and elements and here i can enable them all or disable them all in order to keep our website fast i can disable everything except for the things i want to use so you see not everything is active and not everything is in the free version but i'm searching for the forum stylers and over here wp forms i turn it on so we can see it in our elementor page builder i save the settings then i will go to the website edit with elementor i scroll down [Music] i click on the plus i want to have one area arrow down and the style gradient dark blue light blue with an angle of 90 percent and at advanced i want to have a top margin of 50 and a bottom margin of 50 then i go to all the elements and i search for wp forms and you need to see the ea because that means it's from essential add-ons i drag it over here now i need to select the form we have and there it is a simple contact form first name last name so here's the title if i want to i can get rid of it and it will be gone let me keep it i want to turn off the description the labels and the placeholders and then it looks like this so i will turn back the placeholders and then i go to the styling the form max width let's say 500 then i want to bring it to the center and again i want to try this color to see what it is okay there's the color uh now i know um which area will be used so there's more margin padding you can play around with these settings but i'm happy as it is then i go to the title and description i bring it to the center this title over here the text color is white and i can change the text custom title reach out to us go to the style title make sure it is nitto it gets a bit smaller maybe a bit thinner okay and then it can be a bit bigger yes then i want to style the labels no no not the labels that input text area so the background color i can make it orange so i can see whichever it is applied applied and then i want to make it black and transparent yes like that the text color of course is white then i want to have a border type that is solid and i uncheck this and the only area i want to be at the button and then the color should be white we can have a border radius as you'll see i don't need it so i say zero and we can change the text indent input width so there's a lot you can do and i'm actually happy with it so um i want to go to the placeholder text color white then i want to go to the submit button and i want the background to be orange when i hover over it i want it to be i blue sorry something's not going right the text color should be white yes and when i hover over it the background color should be blue yeah that's what i want so i think it look this looks beautiful submit if you want to change the text over here submit let's say command e go to the dashboard collapse this say no thanks and i go to the screen options and i remove the wp forms area and then i can go to wp forms select the form [Music] go to this button over here and i can change the text submit to send or something else and then if i save it it will change so i go to the homepage this is the page we have created i scroll down see if everything is okay reach out to us first name last name corpus hook that's my last name in dutch in english i don't know corporate karpshuk just corporate i wish i would uh start with a different channel name [Music] trevor sampson something like that but when i did i thought i've really thought like doing that calling myself drivers trevor sampson but i was afraid that i would get a identity crisis not knowing who i am anymore because my real name is ferdi so i'm happy i just call myself 30 and uh that's who i am 30 30 30. 30. okay i'm really happy with this and um yeah let's go to the whole page again close this before we continue we need to check everything looks great on every device yes and on the mobile so far so good but here it doesn't look that well so okay and over here we're going to take a look at this area later in a few minutes but first i added the website with elementor scroll down and go to the container and by now i hope you know what you should do we go over here to the mobile view and if this area is at the edge what should you do what would you do i go to advanced should you choose margin or betting margin creates a space outside of this area so if i would increase the margin there will be in a white area around it so margin is for the space outside of this area and padding is for the space inside of this area so if i make this 50 then everything will be brought 50 pixels at the inside and that's what we want update let's take a look and everything can be adjusted pixel perfect i'm happy we have created the homepage using elementor and i think it is time to take a look at what we can do with the bloxy theme we have the free bloxy theme with the free page builder called elementor and i think we've got already learned a lot on how to create pages using elementor but now i want to get everything out of the bloxy theme and it's a lot that you can get out of it so let's get to that right now so what i want to do now i want to take a look at the header right now we have a simple logo a menu and a search area and when we scroll down nothing happens so let's take our header to the next level by clicking on the customizer i hold command so i open it in a new tab i bring this to the left so here i can see the result of what i'm creating over here so before we do that let me show you what we can do with the colors if i go to the colors here we have this palette and if i would change that to this one look at that whole style [Music] change like that i bring it back because that's really nice and if we want to go to the header we can go to the header over here then we see those nine areas i talked about them before so here i have elements if i drag this over here i can drag to the left to the center to the right and our main menu or our main header header and then the lower header so there are nine places so if i would bring this over here it will be there i can bring the menu to the center i can remove the search area especially when you have a small website in the beginning you probably don't need the search area so i click on the button i can make it bigger i change the link url i can change the text of course get started or reach out whatever you want to do and then we can open it in a new tab or set a link to nofollow i can go to design awesome but i can also bring the button over here and then we have a new layer so let's not do that what i want to do i want to go back and i want to add my social media accounts at the top and i want to have some html text over there if i click on it i can adjust the content and the style so here the content i can say call us call us plus three one six one two three four five six seven eight i can make this a link comment k hashtag and then i can stretch the container then i can go to design and for now it's okay but what i also can do over here top row i can go to design change the background to dark color then go to html design change the first color to white link is blue if i hover over it becomes orange you can do whatever you want to do with that you can also make it orange when people hover over it it becomes blue so easy and then with this one i can select it over here or i can click on the three dots next to it go to design change the icons to white and then when i hover over it to orange and i think yeah the the header is a little bit high i want to decrease i click on the top row change the height great then there's another area and that's the area below also there you can have more stuff so you can be really creative with this i have tutorial or i will have tutorial on the bloxy theme and i will dive deeper into this but for me this is perfect so i get rid of the search area and then i can go to header so let me go back publish it refresh this is our header okay before i continue go to header html text design it a bit smaller and then at the top row also make a bit smaller and then i can go to the socials i can change the icon size publish refresh so i go back and then i go to the header to headers and there i can click on the global header and i can make the global header sticky so now if i scroll down this area will stick with us so if i click on publish i refresh this this stays sticky so this area is only at the top this will be sticky with us what i also can do i can say that the top and the main row should both be sticky so now everything scrolls with us only the color changes i can change the color when i scroll so let me show you how i go back to the top row design and at the sticky state i also want to have a dark color this option appeared at the moment i decided here at heather's this selection should be made so i refresh it again now everything will stick with us and the colors will stay same there are more options if you have all rows also the third row you can all let them stick with you or only the main and bottom row or only the top row that can also be the case the sky's the limit as i said before i only want to do the main row click on publish i'm happy with that and there are effects it can be slide down like that or fade i can mean offset so after let me see after 111 pixels then it will appear so not yet not yet not yet now and then there will also be an offset over here which is awesome well i think if you make this um 20 it can look nice so i scroll down there it appears this is interesting so that's what you can do i bring it back to default no offset and i enable it on all devices so that's the first thing you can do what else can we do look at this we can make our header transparent so i click on transparent now something changes as you see i want to add some conditions first i close everything i only want to have this option on the home page so i add a display condition and it says that i only want to show this on the front page over here save the conditions so if i click on publish and i refresh this right now it looks like this but when i go to the about page it will have the normal header if i go to the home page it will have the other header yes okay i enabled everywhere only not not on the smartphone okay publish what i need to do now i need to go to this header the main row and then i go to design and it says that on a transparent state it has no background which is exactly what i want what i can do i can make it dark a little bit visible like that that's what we can do we don't need to do that but we can let me show you for a second how that will look and then i need to go to the logo and the logo also has a few new options on a transparent state so right now i want to have a different logo of course so i select the light logo now in order to get it i go to upload files select files you need to have a white logo with exactly the same aspect ratio the same amount of pixels and it looks like that and when i scroll it's still white so i need to go to the sticky state logo and then i check change it to the darker one again and then when i scroll down it changes like that and that is amazing then i go to the menu design and on a transparent state the color should be white when i hover over it orange and on the sticky state it should be dark when you hover over it orange also over here let's make a dark blue so on a sticky state it looks like this i scroll down it starts to look like this it should also become orange i guess so i click on the button design change the hover to orange okay since i've done that i want to bring back the [Music] main row design to completely transparent not a black area and actually i don't want to use the header the the top header so let me refresh this yes but now this is interfering with each other so i need to edit the page with elementor and i go to the navigator because because maybe i cannot select it anymore because the menu is in front of it then i can select it over here i go to advanced and at the betting top i can say 100 and that makes me happy so now there's space if i scroll down it appears like that i'm happy with this but as i said i don't want to use this header so i go to customizer at the top row i get rid of html and socials publish close it now it looks like this exactly what i want and that you can do this with a free theme amazes me and that you can do all this with a free page builder also amazes me but again how does it look on a different device okay i would look like that not in the branding of our website not install okay how can we change that we go to the customizer and i go to the header look at this when i go to the tablet view i see the tablet slash mobile header so here i can change the header so i can have different items over here i can have the mobile menu but i also can have a button and then it will appear over here i can have socials like that i can have an html text with about anything i want to see and on a tablet i can still have the logo over here and the trigger but i also can have other menus so i can also bring this to the center it's up to us what do we want to do if i click on the trigger i can make it bigger i can change the outline make it solid change the colors of course decide where i want to display the label if i want to have a label so i can say you should have a menu on the tablet so there are a lot of nice options over here i can change the logo or the icon and then a design i can change the color when i hover over it it looks like that on any state so sticky transparent etc so how does it look on a mobile like that i think this is perfect so let's take a look at the menu i go to the office off canvas area i go to design and right now the background is dark i want to make it blue in the style of our website then i want to go to general i can also show it as modal so it will be over the whole width i want to be a side panel left or right i can change the width how about 76 the alignment should be in the center vertically at the bottom at the top horizontally then when i go to the mobile menu i can also go to design by the way i can change the arrow to a plus arrow down like that and then i can increase the spacing i can change the border design so let's go over here and choose nunito because that's the font for all my headers less bold it's really bold right now i can make it uppercases and then maybe a little bit less big smaller okay i publish it i refresh the page if i make it smaller it looks like that i'm actually happy with how things look the divider change the color and stuff so that's how you can optimize your header for all devices that is what we have done and i think it looks fantastic except for this area so let's take a look at that customize we go to the header then go to the menu and i scroll down and i see the drop down options so when i hover over it the drop down appears i can also say click then i need to click and then it will appear but i want to go to hover and let's go to design again to find out what the colors are let's change this to [Music] green to orange so i really know which area is affected okay then i go to general and let me see if i hover over it nothing happens to the background okay the default state is white when i hover over it let's make it blue so it becomes blue and then the default state let's make it a dark blue dark blue and dark blue like that then i want to make the font uppercase okay when i hover over here i want the background to change i want this to be orange when i hover over it or a blue light blue and then this area white so let me go to general change this to solid color so when i hover over it you see that the background color changes now we can go to design yes now we can go make it orange yes and then i want to make this white yes awesome [Music] you can use different colors of course so now everything looks great i think you can be really proud of yourself what you've created so far if i go to a different page it looks like that it all looks fine beautiful have a great header we have a great homepage we're going to create a new page but i want to show you a few ways on how to be more efficient in elementor because the more efficient you are the more time you will save and time is money so we'll save money and with that money you can do other things whatever you want to do and it's it's nice when you can make a website faster so let's go to the next page and show you i will show you how to work really progressive so let's go to the second page the about page and let me show you how you can speed up your workflow so the first thing i want to edit this page and when i've done that i want to edit it with elementor so the elemental page builder will start great and now you know the first thing we should do again here left at the bottom settings and change the page layout to elementor full width okay i'm talking about speeding up your workflow what i can do now i can hit ctrl e or command e then i search for a home page then i click over here wait let me update first command e home or home even better home and then i click here and then we go directly to the elementor page builder within the homepage and now if i go to the navigator i can copy this hero right mouse click copy then i say command e and i go to the about page there i go [Music] right mouse click paste and that's the way the cookie crumbles so now i can change this text i can change the image i don't need this area so i go to the navigator again [Music] remove and here i can change the text so let's say we are one big happy family and i can create a text over here now over here i change the text apply for a job and if you would have jobs over here and then a 7 after that like this uh and it's really the case that you have seven uh places for people that can uh apply for a job then it looks like you're a really big company and that can also give the visitors some trust like hey those guys know what they are doing so we are one big happy family we like what we're uh doing our passion and skill for then people can apply for a job and then over here i can change the image and if i want to use make use of three images i can search for pixar b.com and you can use all these images save them and don't show any credentials so i search for people work if i see something i like i can use that image on my website keep in mind those images are free and that's why the quality is a little bit worse than when you go to uh something like i stock so if we would go to 30 corp.com forward slash i stock photo hit enter photo then we can find really high quality images so if i would search for people work those images are way better so you can download the image and if you take a look uh or i have this one already or i can get this for free since i'm new it's all dutch over here i don't know why so i can [Music] sign in and then this one would cost one credential one credit that's around nine dollars so maybe think what nine dollars for a picture yes but keep in mind that that thousands of people can potentially visit your website and when the the quality of the website is great it will pay back itself if you go to apple.com look at this image high quality image high quality image image image image image image image if all those images were lousy and stupid and ugly the website would look ugly and uh not professional so high quality images are really important so if i go to my photos i download history i like to use this image i can download it always rename it digital marketing amsterdam then i go to elementor click over here and then [Music] i go to finder i drag it over here copy paste and then i click on insert media i can also make the image smaller right now it's 573 kilobytes if i would change it to 1281 i go back then it's only 200 kilobytes so um it's lighter now and over here i can create some space at the right like that okay so that's how you can copy and paste things and then save yourself some time let me show a few other things on how you can make a nice website and use elementor let me [Music] have two columns and i can drag it a little bit like that over here i want to have an image so i search for an image and then again i go to eyestock i can grab this image let me show you what else we can do oh oh sorry download again rename digital marketing than because people are searching for a roth them and then eventually they can go to our company in amsterdam or you have multiple places where you have your own company and then they can go to digital media route them to your company and rot them so click over here upload files select files downloads most recent one and it's 20 megabytes that's a lot but it will be made smaller automatically by wordpress so that's nice but we can make it even smaller so i click on edit the image is 374 which is quite okay but now i want to crop it i want domain is an aspect ratio of three four by three why is it not working like that maybe because i already have a crop over here so let me edit it again no crop four by three and now it's working and now if i click on crop yes i have the four by three aspect ratio so i cannot make it a different aspect ratio now i can select a certain area and then i can click on crop save now it's uh 302 kilobytes i insert the media and now i can do something nice first i can make the image smaller and then if i'm here at the style i can go to box shadow i can give this a shadow but i can also make the shadow really harsh so i can make the okay let me go to this button i go to the style to this color then i copy this color command c or ctrl c then i go over here to style below i go to the box shadow at the color i paste it now i can say minus five minus five get rid of the blur and then it looks like that so if i would say -10 minus 10 you have a nice effect like that and then over here i can have a heading let me save it i drag this heading over here we are [Music] then i can have a divider if i want to drag it here below make it um 214 pixels solid if i go to the style i can remove the gap to nothing change the color to blue change the thickness two three then i go to advanced uncheck the margin and at the top i bring it a little bit closer then and then i can have a text i can type this text something like that and then i can duplicate this drag it over here change the text get started i can change the style to dark blue when you hover over it it can become orange okay then i click on the whole section i go to advanced and at the top i would like to say give me some space also at the bottom then i want to have a new area like that i want to change the height to 500 pixels and i go to this area i want to go for a nice image this one download it web design amsterdam there i go again i go to the style background type image upload select files there it is open copy paste edit the image change it to [Music] 1920 scale back and that's 430 kilobytes i insert it i want to change the size to cover so as much as possible will be fitted in this picture i change the attachment to fixed like that and then i update it then i say command e home and then i want to copy this area copy command e about over here i want to paste it get rid of this this and this and then over here at the container advanced uncheck this i want to bring it closer to the image above so you get a nice effect so this can be the portfolio who we are and then this area with this image we can also go to style background overlay and then we can choose a gradient increase it and then if we want to we can have a heading over here our focus is your growth or your growth is our focus our goal and then i can go to this area layout bring things to the center and the center i change the text color to white and then advanced i can also bring this closer to the center of this area in this area like that so that's how we can create a page i want a little bit faster i hope you don't mind let's take a look how does it look oh click over here advanced uncheck 50 50. over here advanced at the left 40. and this looks great okay let's go to the hero for mobile increase this a little bit more like that over here 40 no no no only at the top and then [Music] zero over there click over here bring it to the center let's see sorry content over there and this all looks fine so now it's optimized for all devices let's take a look and close all this stuff and then it looks like this i think it's amazing so what can we do now since you know a little bit about elementor there are tons of ways on how you can make money using a website or knowing how to make websites you can do that for a living but you can also sell design so if you become really good in making websites you can sell your designs so if you want to sell this you can go to elementor you know it's optimized for all devices make sure you don't have [Music] any copyrighted images in it and then you can click over here and save this as a template so i can now call this one about or advantage media about page with a nice dish in between save it and now i go to all my saved templates and i can click over here and i can export it and there it is i can rename this to add vantage media about page only 15 kilobytes and i can import this somewhere else so let me remove it right now delete and then i click on the i great this is the homepage this is our about page if we go to the services page i can edit the page edit with elementor if i want to import a template first i can make this a full width page update then i can click on the folder in the center over here click on this icon select the json file we just created 15 kilobytes open it i want to import without enabling and then i want to insert it and i don't apply these settings so now i cannot import these images because they're copyright protected and that's how you can sell your designs and people can insert it and then they can change the information really quick so i can click over here three times what can we do for you i can change the text here make the text a bit smaller advanced at the right i make this 40. get started we are what is our approach question mark and then i can change this text i can change this image in the background and that's the way google crumbles so i update it and then that way you can speed up your workflow if you want to download all the pages i use in this tutorial i give them to you for free you can go to 30 corp.com then to templates then when you fill in your first name and your email address click on give me the package from your option i need to consent with this i click on subscribe and now i need to go to my email account okay then i click here on my email get the template black back and then we can click on download the template pack there it goes and you can also go to all templates and there you can find templates for elementor the free version pages like these or elementor pro and you can import pages like this in my opinion beautiful pages even if you have a webshop i can show you how to create import something like this or uh headers so you can click on headers and then when you scroll things change and you just have to change the colors and stuff so um that's what you can do i close this i close this this and this then i open this and there they are the advantage website so let me click on the i then i go to the contact page i edit the page then i go to edit with elementor the first thing i want to do i want to change the settings basically out to elementor full width update then i click on this folder icon i click on this icon to upload a json file or a zip file and then i go to downloads this folder advantage and i go for the contact page three kilobytes and i say import without enabling the red one keep in mind that you need to have wp forms which we use on the home page so i click on insert don't apply the settings of the page there it is and i see there's no form so i click over here i need to select this form and now it works update so this for free but what i said before you can learn how to create beautifully designed pages and sell them on your website and then i will also have tutorials on i already have them on how to sell digital products on your website using woocommerce and that's the way to quickly crumbles i really like making a website like this using the bloxy theme and elementor if i open this page this is how it looks of course i can change the information over here and i can change the form so we have the homepage and i also have a template for that so you can import this page completely the about page services page contact page so let's take a look at the case studies party people in the house are you still having fun i hope you are i hope you are excited i do my best to create the best tutorials possible and what i also can do i can also make the longest tutorials possible like 10 hours but i don't want to do that because that will scare people off if they see learn how to make a website and it's 10 hours long so what i do i take a look at all the basic things people need to know i put it in this tutorial but not everybody wants to have case studies in their website it's just the way it is some people don't want that so what i did i created a separate tutorial for that otherwise another 30 minutes will be added and maybe not everybody wants to make use of those 30 minutes so if you want to learn how to create a case study case study portfolio area in your website you can click on the link over here yes i've been working out thank you what time is it okay or you can go to the link in the description let's continue this is how it looks as an end result i can go to marketing rebranding web design if i click on one of those i can see the content and then below i see related projects great let me go to the blog page there i am again because the same thing goes for the blog page and the blog post creating a blog post and optimize it for the search results and adding ranked math and you can do so much things with it and that can be a tutorial that's two hours long so what i will do i will create a tutorial so if you want to learn how to create a blog post you can click over here or go to the link in the description and then um when you follow that you can go back to this tutorial and follow along again if you don't want to have a blog post you can just keep watching because i will skip that part because not everybody wants to have that i don't want my tutorials to be too long yes i hope you um are not mad at me because when people are mad at me i it's hard for me even when people are mad at me for a reason that i not agree with and i still feel like oh no somebody's not happy with me actually i should have not become a youtuber if i am vulnerable for that but um yeah i feel like i'm sharing my heart with you and feels good to open up you know even though it's true youtube okay i can imagine that you sometimes think okay are you serious or are you weird what's going on okay this is just who i am i like what i'm doing and sometimes i just do something like that so um we're gonna skip the block thing if you want to learn how to do it follow the tutorial and let's continue now if you follow the tutorial and you refresh the page it will look like this beautiful overview with all the blog posts i'll show you in the tutorial step by step how you can create those if i click over here i go to one of the blog posts and this is how i made it look i'll teach you how to create a blog post like this with images links how to format the text how to write a converting blog post this blog post makes me money through advertisements and through people that click on the link about convertkit and then [Music] i make money and i help them great way to make money affiliate marketing i also have tutorials about that then through this beautiful theme bloxy we can display information about ourselves we have a related post and people can leave a reply so since you have case studies and blog posts maybe it's a great idea to put them on your homepage and in order to do that and go to the backend we need to have another plugin for that i also downloaded that already in that other tutorial but if you have not followed that tutorial let me show you i go to plugins add new i search for live mesh and it's a live mesh elementor we need to install it and activate it then we go back to the home page edit with elementor and as i said in the other tutorial i already did it so i remove everything i have over here and then i search for grid and i need to have post grid i drag it over here okay then i go to the navigator i want to drag it below the text editor oh man i love how simple everything is then i click over here and i change posts i close that and i click on the plus i choose portfolio so i choose my portfolio items then i go to settings and i remove this text and i uncheck the filterable question mark area then i go to content again and make this a little bit wider i collapse this i go to the post content and i only want to check the first one and the fifth one i go over it a little bit quick because i have a tutorial where i show you that so uh this area and then the title this size size of the image can be smaller as long as you see that the quality is high because uh right now with 300 or 150 you see it becomes worse so i think also with 300 it still looks great and your website will load faster because the images you load are smaller so if i would say shift command 4 on a mac okay it's 400 pixels wide this one is 300 so i choose 700 and then you have really high quality images then i go to the post query and i choose to show just three posts update so we've created this really fast and if i click on them i go to that case study then i scroll down i want to add my recent blog post over here but you know i want to have dark areas and then light areas dark areas and i want to have a light area for my blog post so i need to have another dark area so i go to elementor scroll down over here i click on the plus one area with the arrow down i go to the style you know by now how i will have my background 90 and then i go to the elements and i drag this heading over here and it can be a nice blog post i have a blog it can be a nice quote so um your growth is our focus i have already somewhere else in the website but i'm totally fine with that okay then i go to the cell make the text white i can make it a little bit bigger then i go to this area container layout i want to make it higher let's say 500 and then add items i bring it to the center and to the center then i go to style overlay and then i choose an image this one i make it cover and fixed and i decrease the opacity okay and then i want to have a new area arrow down we're having still bring this back to this one or let's say that one okay i bring it to the center and then i go for the grid again i do the same thing i go to settings remove this and uncheck this content three items and then here at post content i only check the first one and a fifth one and change this to 768 then i click over here and i say block make the text a bit smaller increase the margin at the top or i go to this this area and i increase the padding then i go to the [Music] responsive mode this is fine this is not so here i say 50 everywhere let me see click over here okay what i want to do i i don't want to show how to show three in a row also over here so what i can do i can duplicate this and over here i go to advanced and then responsive i say i did on the desktop not hide it on a tablet and this one i say hide it on a desktop and add content i say show only two blog posts i do the same over here duplicate it this one is only for the desktop this one is for the smartphone so [Music] hide it let me see yes now over here again [Music] i say two so what i see this area with three case studies is only for the desktop and this area two is only for the smartphone and tablet so if i go to the smartphone i see two below each other also here to below each other update we see three we see three here we see two and we see two i like it so that's how it works let's go to the home page okay people we're coming to an end of this tutorial and what we're going to create right now is the footer the finishing touch and of course we're going to take a look if everything is optimized for all devices and after that i will give you some follow-up tutorials because there are so much more to do in wordpress world you can create a webshop you can sell a course you can create a facebook page you can optimize your website for the search results so i have tutorials about all those things for free on my youtube channel so feel free to subscribe and i always say that the best is yet to come i do my best to create better and better tutorials so feel free to do that and now let's create our footer in order to create a beautiful footer we need to download or activate something in order to do that i go to the back end and then i go to bloxy to extensions and then here at the free extensions i turn on trending posts and also a few nice widgets then i go to the website i click on customize and now we can create our footer i scroll down all the way and this is what we have it looks a little bit weird but these are trending posts and this is hidden so let me configure this i can click on edit or i just go over here to extensions trending posts and then first i want to go to design let's change the back ground and then [Music] i want to change the font color when i hover over it i want to make it orange i can increase or decrease the space 20 is okay with me over here i make sure that it is nunito and then i go to general again i can say trending now i can change the text i can show the recent posts or trending posts or portfolio items let's do that portfolio items um [Music] case studies trending from all time so the ones that are clicked on the most visited the most those will appear over here and it will not be visible on the phone great publish then i want to edit this area so i click on edit there we go so we have the bottom row settings and i want to change the design first i want to change the background color to the darker one so this dark one then even darker like that then i click on copyright in this area i go to design and i change the font color to white and then the links also to white and when you hover over the link it is orange and then over here i say open sounds it's already the case and i make it a little bit smaller a general i bring it to the center i can change the text i remove to copyright i like the year so when it's new here it will automatically change and i want to have a pipe over here site title pipe and i remove all this and then i can have a few links i can say website made by freddie corpora zhuk over here i can make it a link https for the corpushook.com open it in a new tab okay what else can i do over here i can say disclaimer and privacy policy i can create pages about that i say command control k and then i can say forward slash disclaimer then then i need to create that page privacy policy forward slash privacy dash policy and um if you want to learn how to work with that you can google you can hire someone to do it for you or you can search for create disclaimer pages or website and there are tutorials for that okay well then we have two more areas and i want to make use of this one i have to say before this was a smoother uh experience right now it's a little bit clunky i don't know why wordpress did that but hey i think it will become better in the future let me walk you through it i go back and then i have a lot of areas so let me go back one more time i go to fooder then we have all these areas and then we have widget area one two three before uh first i want to show you that there are three areas right now and if i would click over here i can change it to four five six and when i do that you see them change over here and in all those areas i can drag these things footer menu socials widget area so i go to the middle row editing area and i want to have three columns evenly divided or divided like this so a small one at the left at the right and a big one in the middle but i want to have this one two small ones 25 each and then one of 50 i can change the column spacing widget spacing [Music] um it's time to add some drag some areas so the widget area 1 is over here i release it widget area 2 over here and then widget area 3 over here before we continue i go to the middle row to design i want to change the background to dark blue but now we have dark blue and dark blue so what i can do design i scroll down top row divider beautiful line over here which i want to be white okay then i have widget area one and if i click on it i should see something over here and this is what i mean with clunky yeah there it goes okay i got this then i click on the plus and then i see a mini gutenberg editor if i click on browse all i installed cadence blocks so now i can make use of all these blocks so i can add a page break a calendar our latest comments latest posts so i just want to have a simple image so i search for image and i click over here and now i can upload an image or i can go to the media library i want to have my logo in white so i go to advantage that logo i select it and voila there it goes and in this widget area i can have multiple widgets so this over here is one widget so if i click on the plus i can have a text widget or a paragraph widget let me go to the dummy text generator and you can play some text about your company i paste it but i don't see it why because a design i need to say that the font color is white and a link also white and when i hover over it it becomes orange okay then i can go to widget area 2 and this time i click on the plus and i want to go for a menu so i go for the navigation menu i need to select one there it goes really dark so first i want to create a title quick links and then also here over design i can make them white or i go to this whole area design and i say that all the titles should be white and all the fonts colors should be white when i hover over things it can be no no links can be white and when i hover over it can be orange so that's how you can do that i click on click on publish but i think the text is a little bit big so i can click over here just for the title make it a bit bigger make it uppercase okay and then for the fonts i can make it a bit smaller like that i like it then the third area widget area three i want to have a special plugin for that so i click on publish i close this i close this then i go to the back end to plugins add new i search for a recent post with thump nail i'm searching for kybernetic there it is a lot of installations installed now it now i go to the website to the customizer i scroll down okay and then in the third area these are the settings so let me go back i click over here click on the plus and then i search for a recent post with thumbnails there it is because we downloaded that you see a lot of options and by default it looks like that oh it's quite nice so i can say block or recent posts posts how many do i want to show let's say three otherwise there will be a lot of space over here which is not used so when i say three is better open a new window no order descending just uh based on the newest blog post and [Music] i do want to show the date so over here it will be shown no excerpts i can choose to show certain category do i want to show the thumbnail well if i would say 300 by 300 i'll get a weird aspect ratio so i say um thumbnail and that looks better i can change the size here manually and i think it's uh great like this okay right now it's not evenly divided 25 25 50. so i want to divide it equally so i go to the middle row and bring it back to equally maybe over here edit i can bring it to the i can bring it to the center also here great that's how we have created our footer now i want to go up and then i need to scroll up all by myself i don't want that so i can go back i can go back some general options and then here we see scroll to top then there's that button and if i click over here i can change the arrow and change the design so let's make the background blue i can color white when i hover over it can be orange and i want to change it to this arrow i can change it to a circle i can do a lot of things so that's how you can do that publish ladies and gentlemen we have created an amazing website so ladies and gentlemen congratulations with your website congratulations with following true i'm happy for you and i wish your company or whatever you do whatever you created the website for the best of luck and i hope you will reach a lot of people so what is the next thing you should do what you can do well i have a few tutorials as i said i don't want to create a one ten hour long tutorial i rather have specific subjects because not everybody wants to follow every subject so let me show you a few tutorials i suggest you follow if you want to take it to the next level the first one is rank math tutorial rank math is a tool that will help you to optimize your websites for the search engine search engine results so here's uh mine and if you don't see me on number one you can say space 30 and i probably will be number one so that's why you can do this one is two years old this one is five months old what else maybe you want to sell things on your website well then there's the woocommerce tutorial and again if i'm not number one you can say 30 after that but i'm still number one uh this is a newer one so choose one of those i should choose this one uh what else convertkit maybe you want to build an email list get subscribers i made a lot of money building an email list giving something away for free uh for instance my um free templates and then i built an email list and then where there was uh something i could sell to them with some discount i send an email to all my people sometimes i make a lot of money in a short amount of time using my email list and using this convertkit tutorial two and a half hours i show you step by step how you can get started i think i don't know why it doesn't have that much views maybe because i'm a wordpress related channel this is crazy what you can learn over here so i highly suggest you watch that one if you're interested in it and then of course there is affiliate marketing selling other people's products and when people buy it through your unique affiliate link you get a commission an amazing way to help people and make money i have two tutorials about it this is affiliate marketing in general and this one is affiliate marketing for uh when you want to make a website so we already have a website if you want to turn it into a affiliate marketing machine you can watch this tutorial also here i don't get it why i don't get that much views but hey so be maybe it will come this one for instance after a time all of a sudden i got a lot of feel so it looked like i was less heavy over there that's true so those are a few follow-up tutorials thank you for watching this tutorial i hope you learned a lot of stuff and good luck with your website one more time feel free to like this video and subscribe for more upcoming wordpress related tutorials and then i hope you have a great day and a great life bye

Channel: Ferdy Korpershoek

Views: 62,576

Keywords: build a website, build a wordpress website, create a website, create a wordpress website, how to make a wordpress website, make a website, wordpress 2022, wordpress tutorial, wordpress tutorial for beginners, wordpress website tutorial

Id: 9gjBEx3ssnA

Length: 200min 9sec (12009 seconds)

Published: Sat Jun 04 2022