How To Make A Website For Free 2018 | Beginners

Hi guys, my name is Ferdy and in this video I will show you step-by-step how you can create an outstanding website using free tools I'm talking about the WordPress, local web hosting, the free page builder Elementor, the free theme Astra

 I'm talking about free images and free plugins, and besides that I will show you how you can create your own logo   This tutorial is for people that want to learn, how to create a website step by step and this tutorial is for people that want to create a website really quickly without spending too much time and without spending money and the reason is because I will show you how to import complete pages using the Elementor page builder  We have a library with all kinds of sections that we have made and you can import them with a few clicks There you can adjust the import of pages and that will save you a lot of time However I want to be upfront with you there's one thing that costs money

When you want to get your website live on the internet, so it will be public for the whole world then you need a domain name and web hosting  A domain name and web hosting cause money If you really don't want to spend money, I will show you how to create your website on your own computer and in the end of the tutorial I will show you how to migrate your website from your local computer to web hosting So you can follow along without spending $1 The only thing with a website on a local computer is that it is not public for the whole world to see it or that you need a domain a web hosting

  This is the website, we are going to make We're going to make our own logo using canva and we use the Astra theme We have a nice menu and beautiful animation over here with our services and a call to action I will show you how you can make this page using Elementor but I will also show you how you can import it with a few clicks, if you just want to make a website and not want to learn how to make a website We have the about page, a nice hover over here

I'll show you how to get beautiful images for free, like these how to put a video in the background, how to create a contact form, social media icons I will show you how to make the footer widgets, some text, the Facebook like box, Instagram widget and a recent post widget  We have a services page and also this one you can import with a few clicks and then you are done I'll show you how to create a portfolio page with portfolio items based on category, and if you click on it you can see a video or a photo or a website We have the blog page

I like it really much with the Astra theme, you see everything is in boxes, recent post box, like us box, a follow us box and here you see all the blog posts beautifully displayed  You can decide if you want to show the title, what kind of Meta information you want to show, if you want to show the featured image, a text If you click on the blog post you can decide what you want to show over here, if you click over here you open it in the light box I will show you how to create a blog post, highlight the words, use headings, use paragraphs, import images, import videos style your website with colors  I'll show you how to leave a comment, how to reply on a comment

You see everything looks really clean and all this stuff is made with free tools, free images, free logo, free theme, free page builder then we have the contact page, so that people can get in contact with you and a great thing about the tools we use is that it is responsive for every device, so if I make this smaller here appears a menu, with a sub-menu, make it even smaller and then look like that So you can adjust everything for every device, and that elementorferdykorpershoek, you can download parts for your website or complete pages, so for instance complete pages, click over here scroll down, download it and you can import it into your website  So, for who is this tutorial, for people who don't want to spend thousands of dollars on a web developer, but just want to do it ourselves for people who do not have much time because I will show you how you can do this within a few hours It is for people that have never made a website before and if you start learning how to create a website, why not start with a tutorial that will show you how to create an amazing website and it is for people who want to have the flexibility to change things on the website immediately when they want it and not have to wait for a web developer to do it for them

  When this video is valuable to you in any way please like this video and you can subscribe and then click on the notification icon and you will be notified when I upload a new video If you have any question or feedback or comments, please leave a comment in the comment section and I do my best to answer all the comments, so without further ado let's create an amazing website   So what's the plan, first we need to get domain name and web hosting or we need to create a local website on our computer, then we need to install WordPress After that we install the Astra theme and the Elementor page builder and then we are going to create our amazing website   So we want to create a WordPress website

We can do it on our own computer using server press and in that way you don't spend money, but if you want to get a website live on the internet with a domain name and web hosting then you can go to webhosting125com This cost money, if you don't want to spend any money then go to minute twelve to twenty eight second, there I will show you how to get web hosting on your own computer, but then only you can see your website, you cannot share it with the world  So it's up to you, if you want to get a website live with a domain name and web hosting then go to webhosting125com and click on, click here to go to SiteGround and here we are SiteGround is amazing

I host all my website here at SiteGround and it is in my opinion the best web hosting provider there is and that is not only my opinion, if you take a look in popular Facebook groups about web hosting SiteGround's comes up number one every year They have a great live chat and you can call them I had a few issues so far and all those times in the live chat they solve it within five minutes, so that's amazing and if we scroll down you see three packages where you can choose from The first one is Startup that is if you want to start with only one website then you have 10 gigabyte of web space, it is suitable for 10,000 visits per month and you have a really fast website If you want to create more than one website or you have more than 10,000 visits per month then you can go to GrowBig and then you can have multiple websites, what does it mean you pay $5

95 per month but you can have unlimited domain names So domain name costs around $12, so it could pay $595 per month and have 10 websites up and running and you have more gigabytes and you can have more visitors If your website is exploding with visitor than you can to go GoGeek and actually I hope you will get to this point because that means that you have a lot of visitors   I can give you a discount of 60% and I would start with the Startup plan because you can always upgrade later, so I click on get started

We can register a new domain and if you have a domain already you can click over here and fill in that domain name If you would say Facebookcom and proceed, it would say error you have chosen an invalid domain name, that is because Facebook already exists, but if you would say Astra Elementor proceed, then it works, congratulations domain Astra Elementor is available for registration with your hosting account  So we need to fill in some information my email astra@ferdykorpershoekcom, I can choose my own password and fill in my client information, my first name, my last name, my company, my city and address and then your VAT registration number, this is important because using this you don't buy taxes so it will be subtracted from your total amount you have to pay

I scroll down at my payment information I want to pay using my credit cards so I fill in my details, my billing address is the same as given in the contact information, my plan is Startup, my period is 12 months  I scroll down, I don't need domain privacy, I don't need a SiteGround scanner and the total amount is $5935 I confirm that I've read and agreed to the SiteGround Terms of Service and when you click over here, you get a web hosting and I get some credit for that so thank you that helped me to create those tutorials, so I click on Pay Now and the great thing about SiteGround is that your website is live immediately

At all other hosting companies where I tried that, it did not work yet to wait for 20 minutes or an hour or sometimes two days, but right now our website is live, so I click on proceed to customer area and there it says, SiteGround sales receipt Welcome to the SiteGround account setup wizard I don't need any help because I will show you how it's done I proceed and there I am, now I need to go to my accounts and as I said before you can upgrade later, so if you click over here you can upgrade Now you can go to the C-Panel, remember my selection proceed

  So we completed step 1, we have a domain name and web hosting Now we need to install WordPress, so I scroll down and it says Auto installers over here but also here WordPress tools, you find the WordPress installer, click over here, you need to verify your account, if you don't do that within a few days your account can be eliminated until you click on this link, so I click on this link and I approve it immediately, I say verify information and that's it Now nothing can go wrong, I scroll down and I click on "Install Now", my protocol is HTTP and this is the website I want to install WordPress on, you can also say install this website on Astraelementorcom/new but I don't want it, I want to install it on the root of AstraElementorcom

My site name Astra Elementor, site description you deserve to be seen, that's the site description it is not shown on your website but you can use it if you want to, your admin accounts username, I like this one, my password is fine, my admin email The language of my site I want it to be in English, you can choose a different language if you want to and then I scroll down and I click on install and it's saying that it can take between 3 and 4 minutes but it's not true, it will take around 10 seconds and then your WordPress website is installed There it goes and the great thing is if you click over here now, your website is live already, it is amazing, that is the only web hosting company where I've seen this A few minutes ago we bought a domain name and web hosting, a few minutes later we are for website live, everybody in the world that goes to AstraElementorcom right now sees this website

  Now we have installed the WordPress, only I really don't like this website, how it looks So we are going to change that, I can go back over here, this is the front end this was people will see, but we also have a back end and there we can configure and edit our website So you can click on this link and then you have WP admin behind it and now we are in WordPress I close this, so this is the front end and this is the back end If you want to create a website on your own computer so you don't have to pay for web hosting and a domain name then go to serverpress

com and this helps you to create a website on your own computer if you are using a PC or a Mac  I click on download and you see desktop server premium, desktop server limited and we will go for the limited one, it is free, so I click on "Add to Cart", price is $0, I can fill in some details over here, my first name, my last name, my email address, I agree to the terms and I say free download and there it is I can download it for the Mac or for the PC, I'll go for the Mac since I'm on a Mac I click on it, like a thank you email so I go to the file, I just download it If you use this then you don't have to spend $1 for this tutorial which is amazing

However if you want to make your website live then you need to get web hosting and the domain name and I instructed you before how you can get that and in the end of the video I will show you how you can back up your website from your local server to your live server  Install, desktop server, open, continue, my password of my computer accept this, new desktop server installation continue, this takes a minute or two to install, done you can start desktop server from your application sent folder, click finish to close the Installer, finish So now I go to applications close this, I scroll down because it's at the XAMPP and here this desktop server, yes we start desktop server with privileges, next my password is from my computer again, yes start Apache and MySQL services next, done, click on next create a new development website next, I can give it a name over here so I say AstraElementordev and again only you can see this, no one else in the world can see this, create it's all virtual, next and I can click over here and if this is not working for you at chrome don't let your heart be troubled, then go to Safari or Firefox  I use Safari and I want this to be in English, continue, the site title Astra Elementor, username this one, my password, info it's ferdykorpershoek

com scroll down, I click on install WordPress I login ferdykorp with my own chosen password, login and there I am on my own computer creating a website with WordPress and you can follow along in the tutorial and then don't have to spend one dollar on the entire tutorial and in the end you will have an amazing website and I will show you how you can copy your website through a domain name and web hosting In order to do that you need to have web posting I've shown you before in the video For now I will close this and I will continue using my domain astraelementor

com from now on but all the steps are the same as here, development website   When you are logged in you will see this bar over here, so now if I refresh you see this bar only you will see this because you are logged in I want to clean this up, so what will I do? I will dismiss this message, I close this and I go to the posts and I bring this post that comes with SiteGound to the trash I want to start with a clean empty web site, then I go to the trash and I click on empty the trash, then I go to the dashboard again and now that is OK I collapse this and this and this and this, it says there's new update available, so if you want to update your WordPress website click on please update now or go to updates or go over here and then you can click on update now, that's it

I go back to the dashboard now I go to plugins I want to remove all the plugins because we don't need plugins yet Jetpack over here I click on deactivate and now we have three plugins, they are all deactivated  I click over here then I select all the plugins and then I can do a bulk action, I say delete, apply OK yes Now I want to go to the settings, to permalinks and when you create a new blog post is what we called yourdomain

com and then with the date and then with the sample post I don't like that, Google does not like it either so I want to change it, I want to make it clean, so I click on post name Now we have a page about us it will say yourdomainnamecom/aboutus and that's much better So select post name and click on save Changes

What else can we do?    If we have a blog post, it will say this blog post is written by Ferdykorp that is what you will see over here I want to change that, you can click on edit my profile or can go to users, all users edit and maybe you think why do we have an image over here? that is because I have a Gravatar accounts if you go there, you can sign in, upload a picture and then base on your an email address in my case info@ferdykorpershoek, it will know that I am linked to Gravatar, so it will grab my image of Gravatar that will look a little bit better If I screw up, I can change the look a few of my back ends I can select a different option, I like the default one then I can scroll down at my username I cannot change that, I can type in my first name, my last name and then my nickname is this one and then display name publicity, right now it says ferdykorp and I can change it to Ferdy Korpershoek and will look like that    Now if I post a blog post it will be written by Ferdy Korpershoek, I like that

You can generate a new password, so I do this, it is not weak I don't know why they say it is weak I update my profile and now I can log in with my own made password So if we take a look at our website, there's a lot we can do If you have a website you want to have certain pages, the home page, the about page, portfolio page So we are going to create a few pages

You can do it over here, new page or you go to pages, add new or you go to all pages add new and of course we begin with the home page, I call this home and I publish this and you can think what do I want to show on my website, maybe have a really simple website with only home and about and contact or home services I want this tutorial to be complete so maybe you have a very small website there you can watch this tutorial but maybe have a really big website with a portfolio and blog post and then this website is also for you and that is why I decided to make a website about my company, where I do photography, film making and web design   So add new, I want to add a new page and that is called 'About', I publish it I will not add anything only create a page, add a new one and it's called services, publish and I have three services that I want to publish, so I click on add new, the first one is Photography publish, add new the second one is Film, publish and the third one is Web Design, publish  I want to showcase what I can do making photos, videos on websites So I want to have a portfolio page

I click on add new and I call this portfolio, publish, then I want to have a blog page so I can post some blog posts about film related stuff but also personal stuff, add new blog and publish and when people want to get in contact with me I want to have a contact page contact publish Now if I click on all pages you'll see all the pages we have made, but if we go to the website and refresh the website you see nothing I want to have a menu, so I want to assign all those pages to a menu How can we do that? We go to appearance, menus, I can have a menu name only I can see that I call it main underscore menu and I create the menu Here I see my most recent pages

  I can also say view all and I click on select all and I add them to the menu Now if I would save this and I refresh the website, you still see nothing because we need to assign this menu to a certain place in the website and that depends on the theme So this theme has a few locations the top menu and the social links menu If I select the top menu and I save it and I refresh the page you see the menu over here So that's really nice but I want to configure this

I see two home pages I don't like that, so I go to menus in the back end and all those menu items are pages except for this one This is a custom link I don't know what it is doing here, so I click over here and I remove it then I want to bring some order in it So I click on home, I hold my mouse, well I clicked and I drag it here to the top then comes about, then comes services like that below my services are photography, film and web design then there is my portfolio, my blog and contact I save the menu, refresh and there you are, home about in the right order, but what you also can do in a really easy way, is have sub items in your menu

  So here we have services and I have three services and I want to have those services as a sub item of services How can I do that? I click over here I hop my mouse and I drag it to the right and now it is a sub item also this one to the right and you see a small tab like that if you release it, this is a sub item like that but I can also have a sub item for film, so if I would bring this more to the right and I save the menu and I refresh the page I see services with arrow down and if I hover over it I see photography, film and if I go over film you have web design and the great thing is that a word press and the theme are doing all the hard stuff for us All we do is create a few pages and drag them like we want them So I want it to be like this, three sub items save it, refresh and if I go to web design you see extraelementor

com/webdesign, so that looks really amazing If I go to applecom and I go to iPhone then click on buy the iPhone now just kidding, you see if I want to go to the home page there is no home item I need to click on the logo and the people of Apple did all the hard work for us they thought for us what is the best way to show your website So we are going to do the same, we don't need a home page we need to click on our logo in order to go to the home page even though we don't have a logo yet but that will come

I save the menu and now it looks like that about, services, portfolio, blog and contact   Let's take a look at themes If you go to themes, you see we have three themes 2017, 2015 and 2016 and the theme decides how to look a few of your website will be, so with in WordPress we have a lot of information, we have pages, we have post with images, with a menu We have plugins but the theme decides how the page will look So we can have the same information displayed in a different way

So if I want to activate a different theme, I hover over the theme, click on activate and now if I refresh the page you have the same menu, only if this shown in a different way with the menu at the left here and the homepage over here, and if I would select 2016 and I activate it, you have a different look of view  So I want to provide you with the best free tools so in order to get that we are going to get the Astra theme Right now I will not use those themes so I remove this one, I click on theme details I want to keep everything clean in my website I don't want to have unnecessary stuff, delete

Now I go to ferdykorpcom then we go to tutorials, Astra Elementor 2018 and here are some important links We already have web hosting and here it says get the free Astra theme I click over here, perfect theme for any web site stylish lightning fast easily to customize and see what is possible, it is free theme and we're going to use it in combination with Elementor also for free and it looks all really nice  So, let's get it download now, there are a few options, the free theme you can upgrade to pro and you can have the agency bundle we are going for the free theme

I click on free download, I fill in my first name and my email address, I say subscribe and download and then I will be updated with the latest updates I like that and if it doesn't download then click again and click on the link here below and it should start downloading That's great, I close this now I go to the website and I go to appearance themes and I click on add new  Here you see a lot of free themes, I click on upload theme, choose the file and here at downloads I see the theme It's a really small theme so that's great I open it and I click on install now

Now our theme is installed, if I refresh, it still will look the same because we need to activate it We need to say to WordPress, this theme is our active theme from now on So I click over here and now if I refresh it, it looks like that It looks better already than the other themes but it needs some work and we're going to work on that, we're going to make such a beautiful website using the free theme and the free page builder So that's great I can remove this one now so I click on theme details, delete and since we are downloading stuff I go back to my page over here FerdyKorp

com go to tutorials Astra Elementor and then I go for get Elementor A free page builder so it is over here, I click on free download and again my email address astra@ferdykorpershoek subscribe and download, and also here I will get the latest updates  An Elementor also has a pro version but we are going to make a beautiful website using the free version I go to my website to the back end I go to plugins, I click on add new upload plugin, choose a file and here it says Elementor

I click on open, install now I want to activate the plugin, great We have now installed the Astra theme and the Elementor page Builder Now let's create an amazing website    Then we need to download one more thing, if you want to create the same website I make then you can go to Astra Elementor again at ferdyKorp

com and click on download the images I use in the tutorial So I click on that, I open it and I bring it to the desktop so I can work and use the same images, great, I close this, I close this so one more thing I want to do before we start customizing the theme, go to the back end, go to settings, reading and here you see your homepage displays your latest post and that is the reason why it says ready to publish your first post  I want to change it to a static page and here we can select the home page and that is the page Home and our Post's Page is the blog page, save the changes If we take a look at media, everything we upload will be stored in our website and here we can organize our uploads into month and year based folders or you can have it all in one big folder It depends on what you want, I want this everything in one folder so, I refresh the page then it says it is the home page but what you also can do is install a complete website

If you go to the back end to plugins and click on add new you can search for Astra sites and there this Astra starter sites, you can install it and then you can take a look at a few demos, activate and then if you go to appearance Astra sites, you can install a lot of sites than you see there are few premium ones you cannot have those, but this one you can click on detail and this is how it will look and I have this website with a few clicks you can install the plugins that are necessary, contact forum beaver builder WooCommerce, you can go to the next one, this is a premium one I think, yes over here, so I have a tutorial about that if you want to watch it then click over here I will not use it because we are going to create our own website I close this, I close this and I close this I go to the home page and let's configure it I click on customize and then we go to site identity and what will happen here we will configure a lot of stuff or customize a lot of things and here at the right you will see the result immediately  The first thing I want to do I want to have a logo

How can we get one? Let's go to canvacom we are going to create a logo for free So first we need to sign up so I want to sign up for personal use, sign up with email my full name is Ferdy Korpershoek, my email address is Astra@ferdykorpershoekcom again I create a password, I am not a robot so I sign up Let's start creating beautiful designs

I see myself as a freelancer, I skip this step and I want to create a logo What type of logo? I'm not sure so I play with canva and here we see logo layouts They will show us in 23 seconds how it is done, you search for logo about lions or images you drag them over here, you can resize them, you can add some text and then you can download it and use it for your own benefit That's how it works in 23 seconds   Now it's our turn, so I scroll down and I can use this and start to create my own logo

So I scroll down a bit until I see what I like and I like this one, so I click on it and there it is I can zoom in a little bit and I want to create my own logo So I click over here and I change the text to ELEMASTRA Elementor and Astra then I can change the colors if you want to take a look at colors then you can search for colors and brands, go to images and you can take a look over here and you see colors and a lot of logos and examples or you take a look over here, blue Facebook, lntel, Skype there are a lot of those pictures  I want to search for logo examples and actually what I see immediately are those colors I use chrome, Chrome as an extension which is called color picker chrome, click on it and then you can install it I have it already it's over here, so what I can do I click over here and then I can grab a color so, I grab the lowest color possible some are like this, I copy it command C or control C on a PC then I go to the logo, I click over here

Here are three colors, the first one I want to paste this one so I can choose one or I can click on the plus and I can search for color or I can paste the color code like that, enter and that is the first color that I go to the second one  I go to logo examples, click over here and grab it in the middle, copy it click on the plus and I paste it enter and the third one over here at the top, copy it, paste it, enter like that, then I make it a little bit bigger to align it like that, I want to click over here I want to change the color to something dark I click on the plus, I go a bit darker like that and you see the result immediately, something like that and what I could do over here, I could say photography or photo, film, web design but I think it's too much I can make it smaller, but I just remove it

  So I click over here and I click on the basket then I want to make this a little bit bigger because I want to align it exactly so, I zoom in and drag it up a bit, go to the left, go to the right, zoom out and with the arrows I go down or shift arrows and it goes faster, something like that So this is my logo, I like it So I click on download as a PNG and I want to select transparent background so it would have a different background color depending on where you place the image but because we're using a free version it's not possible but we don't need it so it's okay I click on download and there are this the Downloads What I want to do now? I go to file and make a copy

I remove everything then I go to elements, grids and I search for something like this  I click on spacing the first color can be this one, the second one can be the middle one and the latest one can be the orange one Now I go to elements, I search for camera enter and I like this one, I drag it over here or I click on it and make it white, make it a little bit smaller and I drag it in the middle I click on download and then download it as a PNG as a fav icon I download it, it is saving my design

I rename it, this will be my fav icon that you will see over here So what can we do now?  I go to the back end and I go to media I want to add the new file so I click on add new, select files, I go to downloads and here they are I upload them both holding command or control I open them, it looks great I click over here and I want to edit the image, so what I will do? I want to make a shape over here and it should be really close to the edge of the logo maybe command plus, so you can see it better you know what that can be a little bit of space around it, so fine like that command-0, then I click over here and I say save and now we have cropped our logo

  I close it, I go to the dashboard I go back to customize and I close it, I refresh the page and I click on customize again then I click on site identity and now I can select the logo we have just made I go to the media library I click over here, I copy the title, I paste it at the Alt -X, I click on select, skip cropping and voila, here it is and it's a little bit big So here we have the logo with I can make it smaller like that until you like it

You can also have a retina logo, select image and just select the same image then you see Astra Elementor below I don't want that, so here's the site title and I deselect this place site title, look at that and then we have the tagline and leave it, deselect it and right now over here you see this icon and here you see the C of canva Here see the G of Google I want to play something there, so I can select the image I can select this one, select, skip cropping and then you see that and let's take a look we have the site icon you see it over here and then we can click on publish and then it will be saved So, right now we have our logo and our menu using a free theme and free page builder I like it, then we can go to layout here we have the site layout and we can make the website with smaller or bigger but right now you don't see that because we need to make the website a little bit smaller in our view, so I say command minus, minus, minus and then I can explain it better

If I drag it to the right you see the width of our site will be bigger if I change to the left, it will be smaller I would like to have it 1200, some web sites have 1400 some have thousands, I like 1200, command 0, so it will be the original view again that's it Let's go back to container and I will make it smaller again command minus, minus, minus because over here I want to display a few things    The default layout, right now our home page is a box and that is because the default layout says content should be boxed I can also say boxed and then everything is boxed also to widgets over here

So everything is in a box that can be really nice when you have a website that is focused on blogging, then every article has its own blocks every widget has its own block I don't want it also no content box I say full width contained and now the block is gone, but it is contained What does it mean?  It does not go outside of the boundary of the container we just measured, so over here at site layout It will stick to the width of the website Here at the Left and here at the right but if I would say full width stretch then it means is what we totally at the left and totally at the right here based on your screen, so if I have a big screen and it still will be totally at the left in here totally at the right

I say command zero and command – a few times So I choose for full width but contained, so like that no boxes I like it The same things we can do for pages, blog posts and blog post archive So for blog posts it can be really nice to have everything in content boxes  So I'll take a look at it later and this I'll leave it at default

I click on publish, command 0 I go back and I go to the primary header Here we can choose our type of header Right now the logo is at the left and the menu at the right You can do two also the other way around but I would not do that because a lot of big websites in the world have their logo left

You want to give the visitor an easy way to navigate to your website and if everything is different than all the other websites then it can be very distracting Some people say I want to have a unique website then I say no you should have a normal website that is intuitive You can have the logo in the middle, I like that option like that and then here below is the menu  I like it at the left, you can disable the menu if you want to and then it's gone You can have a custom menu item for instance a search icon, here at the right or a text, a button contact us or maybe I want to talk about Astra Pro and here you can have a button about that or a widget

We'll take a look at widgets later I say none for now and then we have a border over here, a small border you can change it to 10 pixels then you'll see, better You can change the color, if I go to logo over here, I can grab this color then I can click on the plus, select this logo, grab the color code, go back and change it over here in the code, I paste it like that and you can change back to one pixel, if you want that I say clear I don't want it I like the border of one pixel, header width, again I make it smaller command minus, minus, minus and the same principle Do I want it to be contained or full width? So totally at the left and totally at the right

I like it contained so I say content with, menu label on a small device  If I click over here I see how the website will look on a smartphone or on a tablet and I can have a menu label so I could say menu and a great thing, I really loved about this theme is when you type something the logo adjust automatically I like that, I say menu over here because people can have big thumbs and when they are on their smartphone they have more area to click on the menu and when you click on it, it will look like that You have two sub menu when they click here It appears like that really nice and if I click over here again it is gone

What else do we have? We have the mobile header alignment  Right now it is inline left a logo right menu but it can also stack it on top of each other and then the logo is bigger, you have the menu I like that, so I'll leave it as this stacked I click on publish, I go back and blog I will save for later Sidebar, I click on this screen again, the big screen, here we have a sidebar and in the sidebar you can place widgets I will talk later about widgets

  By default I don't want to have a sidebar So by default I say no sidebar for all the pages I do not want to have a sidebar So I say just default because then it will apply or this says over here Then we have blog posts there I want to have a sidebar at the right or at the left I want it to be at the right and at the blog post archive I also want to have it at the right

The sidebar width you can change it, it's often 27 or 30 percent I leave it as this we can take a look at it later but I like it I publish it, I go back and we have the footer over here We have footer widgets and as I told you before we are going to talk about widgets If I select this then you've seen area over here with four widget areas and we can add widgets, for instance if I go to my website ferdykorpershoek

com I scroll down I have a text widget I have a recent tutorial widget or a recent blog post widget, a Facebook like me widget and you can also have different ones like latest portfolio items and all kinds of stuff a video, a text, follow us on Instagram  Right now I disable it but later in the tutorial we'll use it I go back and then we have the footer bar We can disable it, then you don't see it anymore

I want to use it, you can use it in a way that it will be in the center, all the information or that it will be at the left and at the right and I like this option because here at the left we can have some text about our website and here at the right we can have social icons later when we add a widget So we have a custom text over here I remove the text, you see it updating immediately Here that's nice automatic the site title I like it I want to place a pipe between it and then I don't need this so I remove that, but I can say disclaimer and if I want this to be a link to the disclaimer page I can copy this, copy it I go to the dashboard hover over new post or page then I go here to this visual area, I paste disclaimer, I click on this icon over here and I say (no capitals) /disclaimer enter, apply

  Now this is a link you can click on it and if I go to the text tab, then you see the code behind this link I copy that code, select it, copy it and I paste it and now when somebody clicks over here, he goes to AstraElementorcom/disclaimer You can add another one pipe, paste and then here you can say privacy policy and change it also over here If you don't have that page yet we don't have a thing you can say hashtag in the link between the quotes and that means that it is a link but it will link to nothing

If you click on it nothing will happen    Then we have section two, we can have a custom text or a footer menu So for instance we can assign a menu If I click on publish and I go to appearance menus, leave this, then I can say assign a menu to the footer menu, save it then take a look at the website and now we have also our menu over here Really nice, I don't need that for now I say nothing later on we will add a widget over here and also here we can say footer bar with content width or full width and with full width it will go totally to the left and this area totally to the right

  Since we have not done that over here and in the content I leave that content width Then we have a bar over here and we can change the color for instance to this one again, copy it I paste the color and you see it over here you can see five pixels, maybe I like that three pixels I like it so I leave it like that then I go back, I go back and I go back and then we can go to colors and backgrounds  What are the base colors of our websites? That are those three colors and I want to use this one as my main color

So that is the middle color over here, I have the code so I will use this code a lot So why not? Make it the theme color and the link color, like that then we have the text color I want it to be the same color as my logo So I click over here, it is this color so I grab that color, '2D' copy it and I paste it over here and the link hover color This is a link when I hover over it I want it to be a little bit lighter, so I go to this object again, this color click on the plus then select this color the lightest one, copy the code and I want to paste it here

  The background color if I change that it will be everywhere on the content, I don't want that, so I'll leave it or make it white, publish I go back and then we have the footer bar, this bar over here then with the text color, it is white The link color, those two are linked so if I change the link color you'll see a change over here I do that or I leave it just white or maybe a little bit grey, I don't know I'll leave the white, link hover color that can be this one when somebody hovers over it, then it will appear like that and then the background color I think it can be the same color as this one which is #2D2D2D, really dark, then we go back go back then we have typography I click on it and base typography

  The base typography that is used in the whole website So I can choose a font family and I like open sans What you will see? Everything changes all the fonts, so if I would say this, everything looks like that here in the menu here and here in the footer So you can search for it, try a few or you can go to Google fonts, click on it and you can search for a one you like so for instance serif, uncheck all the other ones or this one Yeah, immediately I see this one open sans, I like it the most

So take a look and then you can decide what you want to do? I use open sans, the font weight If I would say extra bold everything will be bold I don't like it, I even like light more than normal but for now I will use normal We can have text transform we can do everything in uppercase and I don't want that, just default   Font size is OK line height will take a look at the later we have no lines yet and then we have the heading

At heading I want to have a real way, and you see changing the heading over here and I can say ultra-bold or just normal like that I go back, the content, we'll take a look at later since we don't have content yet, blog archive single post things, we'll take a look at later We have buttons, we have the menu  This is our menu, you can change it over here What you see now? I just change something, that's the power of WordPress and the power of Astra

Widgets we'll look at that later The home page settings and they have custom CSS, so if I publish it and I go to the home page, it looks like this Our logo, our menu, our text and our links I think it looks beautiful I want to change one more thing, I want to make these capitals so I go to the menu over here at Astra menus and here it says, about that is the title of the page but you can change the navigation label So you could say about me

If you save it and you go to the website you'll see about me So I change this to about in capitals, services in capitals  So I make everything in capitals and then I save it and I refresh it like that, I like it Now we can edit the home page and make a beautiful page with Elementor I click on edit page

I scroll down and I want to remove the title if I take a look at the page in the new tab you see here home, I don't want that so I say disable the title, update, refresh and now it is gone I go to the back end and I click on edit with Elementor and here is the Elementor page builder, in my opinion by far the best free page builder that is I see that everybody is using it these days because it's the best How does it work? Here at the left we have all kinds of elements that will help you to put certain information on your website For instance you can have a heading, you can place an image, you have a text editor you can place a button a video, an image box, image gallery and all this is for free then we have WordPress widgets depending on the theme we use, it comes with a few widgets and you can place those widgets also on your website

    Well this is the page builder in combination with those elements over here So I will show you step-by-step how this works We can add a section and the Elementor page builder is divided in three parts First we have sections, in those sections we can have columns, one column, two columns, five columns, two columns, in a different way and if you click on one, you see four columns So this blue area means that it is a section so if I click over here, I see the section settings, if I click over here on the grey area then I can adjust and edit the column and if I click on the plus, I can drag elements over here

For instance a heading and when I click on the heading, I have the settings of the heading, well all those settings for elements columns and sections have three parts At the section it is layout then we have the style and then we have advanced and if you go to the columns, it is the same layout style and advance and we will walk through all the necessary options to get to the website we want If you go to the elements we have content, style and advanced If I want to remove this, I click over here    Now I will talk about something with an Elementor, that's amazing that will save you a lot of time

If you go to elementorferdykorpershoekcom you can import sections through Elementor So you can make a choice now you can choose how to learn with Elementor and I will show you step by step or you can just make a website, maybe you just want to get a job done, well then this website is for you Let me show you what we can do

    I go to complete pages I can choose one Let me see maybe I like this one This is the one we are going to make I can click on it and this is what we are going to make in the tutorial but maybe you're like, I want to just import this into my website, well you can do that

Over here, it says download the home page version 2 right click, Save Link as and here it extra Elementor I save it Now I go to my home page I click on add template and here you can import templates You can take a look, maybe you want to import it or you can import it with one simple click over here, or you can go to my templates, click on this icon I can upload one, it's a

JSON file I go to the desktop extra Elementor home page version 2, look how small it is I open it and now it's in my library and I can click on insert  Let's take a look what is happening right now and maybe think, "oh no everything is going wrong", no this is exactly what needs to happen Also this over here, I'll show you why, that is because we optimize it for a mobile

So if I update it and I refresh the page, we made this and it's optimized for smartphones and tablets and this is what you'll get with a few clicks for free I made this for you and you can download it so you can make a website really fast if you want to If I make this smaller, you get the menu, make it even smaller even more smaller and it works perfectly, that is the power of Elementor, with a few clicks you get this Isn't that amazing?   So let's take it a step further We go to the page "About" and you go to "Home", Astra Elementor

I scroll up, I go to templates complete pages, I scroll down and it says "About Us" Phlox and I want to import this I scroll down right mouse click save as, save it, About, edit page, edit with Elementor and when this website tutorial is finished, I have all these pages for you to download  Add a template my templates upload, select the file, "About Us" page version 1, open, here it is I insert it and there it is and you can adjust the information so you can change this, Hi there, welcome, so there's so much that you can do We need to plug in for this one so if you install contact form 7, you get a beautiful form over here

Also this is optimized for a smart phone So if I would go over here, I make it smaller and the video is gone So that's how easy you can make a website these days  So if want to make a website really quickly then go over here to elementorferdykorpershoek

com and take a look at templates and all the elements and here you see is a complete page here you see it's only a section So maybe you only want to install this section and then you can do it also Let me show you, we are working with the free elementary version so I click on all free and I want to have a section then I click over here, right mouse click, Save Link As, save it, about, edit with Elementor, scroll down add a template, upload, select header version 2, open header version 2, insert and there it is I can drag it up, holding this icon over here, use the arrows on the keyboard, drag it over here and that's how it works, update Now I go to the home page again

I can remove everything I start here at the bottom and now let's start from scratch I will show you step by step how we are going to make this   I want to start with the header So I click on new section and I want to have one area and you see it over here if I hover over here, I can do a few things

I can go to the settings of the section the settings of the column or I can add a new element and I can drag it over here, but I want to start with the settings of the section so I click on this icon, the left one like that Now I'm in the settings of this section So we can do a few things here but the first thing I want to do I want to add an image So I go to style, backgrounds so this area will have a backgrounds and we can have a few backgrounds  A classic one, a color for instance this one or we can have an image I want to get an image so I go to pixabay

I think that is the best free images provider, you also have unsplashcom and take a look at what you can get It is amazing and then we have pexelscom So pixabay

com, unsplashcom, pexelscom I want to search for mountains, I copy it and also here, at unsplash mountains and at pexels, Mountains I start with pexels and I can scroll a little bit and take a look if I see something what I like, that looks beautiful and the more you scroll, the more images will be loaded

  Wow look at that, all for free also here at unsplash it looks like that those images have a little bit more style added to them Wow, I like this one, so far, any of them here at pexels, also the same one, I like this one So what can you do? I click on it here at pexels I click on free download and there it goes, it's already downloading, but what I see over here is that the download is 10 megabyte  It's a very big image but its 10 megabytes so I don't want that

How can we fix that? I go back to Astra Elementor I go to the back end, to media First I want to rename the image, it's important for Google so I call this photography, the Netherlands for instance because I want to be found on photography the Netherlands, never leave an image named like this IMG 0001 because nobody is searching for that but people are searching for photography, the Netherlands If I search for a Ferdy Korpershoek Maassluis that's where I come from I go to images, I see all those images why? If I take a look, at the image it is called Ferdy Korpershoek Maassluis

  I close these now and I click on add new, select files I go to downloads, photography, the Netherlands 10 megabytes and is 6000 pixels by 4000 pixels that is really big, Full HD is 1920 pixels by 1080 pixels so this is a lot more I open it you see it takes a while because it's 10 megabyte and if we put this on our website, our website will become really slow and Google does not like that So we want to change that, how can we do that? I click over here and over here I click on edit image What I want to do? I want to scale this down to 1920

I click on scale so right now the original dimensions is 1920 by 1280, but I want it to be in 1920 by 1080 I want to drag a selection like that and then I change it to 1080 and now I have a perfect image of 1920 by 1080    You can drag around depending on what you want more on the image Do you want to have more air or grass? I like the grass, so I click over here and I click on save and now we have an image of 1920 by 1080 pixels only 342 kilobytes that is 30 times smaller than 10 megabyte I optimized it

How can I do that? The title's photography the Netherlands I remove the dashes I copy the title and I paste it in the Alt Text you need to do it with all the images in your website It is saved, so I close it I close this one also, I click on update first

I close it and now I go to the website and I say edit with Elementor  I go over here again I click on style, I remove the color and I click on image and grab this image and I say insert media but if I update it and I take a look over here, you see nothing, you see one pixel over here How can we fix that? I go to layout and here we have the height, then I say minimum height and I can say 500 pixels, update  Let's take a look and now we have that but I don't see grass

I want to see the whole image How can I do that? I go back to the style I scroll down and I can define that position, that's also handy for smartphones So if the screen is smaller for instance, a tablet or a mobile where should it be focused on So if I change the position to center, center you see this will be seen on a mobile

I like that, I bring it back to a normal desktop screen I go to size and I say cover, so it will show the most amount of pixels that it can show, update, refresh and now when I make it smaller, you see it just automatically and the center of the mountain will be in focus, I really like that and also like this and menu, sub-menu so that is great    You see those colors over here, so I go back to canvacom and I want to use those colors throughout my whole website so I click on this one and then I go to background, I close it and I go to the background overlay We can have an overlay color over this

I want it to be a gradient, it can be a color or gradient so I click on gradient and then we can grab our first color and that color I want to get it over here So I click over here, here I see the color I click on the plus then I click on the first color I copy the code, I click over here, I paste it and there it is then I go to the latest color this one and I grab that color and I paste it, you see its nice overlay How can we change this? You can change the angle but before I do that I change the opacity

If I bring this to 100 or to one then you see the overlay    You see it's from top to bottom, if I want to change that I can change the angle over here, to 90 for instance, so it's from the left to the right You see it looks nice with the logo it's the same style, also this line, but I want to see the mountain so I can decrease the opacity like that until I think this is what I like So I bring it to something like that and if you take a different color, I copy this one for now for instance blue, look how beautiful it can get I really like it

I actually like those colors also, maybe I can change my logo with the colors and then use this, but you know its okay decrease it you can always change it later I like it so far, I update, I refresh and then you see it's updating automatically so that's great so let me show you one more time I close this, if I click over here, it opens in a new tab but it's not the final page yet So if I change something for instance I put a header over here and I click over here I see nothing and people that visit my site at this moment don't see the changes but if I click on update then I don't need to refresh because it will automatically show you that but what you also can do you can click over here and then you'll see how do website will look

  The only thing you don't see when you're in Elementor you don't see animations Yes we can add animations but you'll not see them over here, but if you take a look over here then you'll see them So I remove this but now for you I will drag the header over here I want to say something about my company I call this ELEMASTRA

What can you do? You can add a link to it I don't want that, you can change the HTML tag for now I leave it as this and you can change the alignment I bring it to the center then we can go to the style and adjust it even more I can change the color I want to change it to white  You also can change the opacity, so you can make it more transparent and since we're talking about colors, you see a few colors over here We're going to use colors a lot

If you have to copy and paste all those color codes every time it will take a lot of time So one more time I go to canva over here, then at Elementor I update this and I click over here then I can go to default colors, my primary color, I think it should be the middle one So I click over here, I click on the color, on the plus I grab the middle color and I grab the code I copy it and I paste it over here The same goes for the accent color I paste it also over here, then I go to logo to this color, I copy it, it's the color of Elemastra and that will be the secondary color and the text color will be this one

  What I also can do is make this a secondary color I think that is better, then I apply the changes I click over here again and now I go to the color picker and here we have white and black, I think that's quite important and after that I want to grab my three colors I use or for instance, this one copy it and I start over here, the latest four, I paste it then this color we're starting with dark, paste it, second one, copy it, paste it and the third one copy it and paste it Now I apply it and now if I click over here and I go to style, I can choose a text color, I can choose those four colors immediately So this will save a lot of time

    Now we have typography that has everything to do with how the text will look So I click on it, at first we can have a font family So I can say Arial or Google fonts, I like a Raleway for instance, then I can change the size, make it really big like that We can change the weight, make it bold or make it really thin I like this one actually then we can transform it to uppercase but it's already uppercase

I can make it italic, I just leave it at default The decoration do I want to have it underlined or over lined or lined through, I leave that default and since we have one sentence we don't need line height, if I do something and I don't want it, I can say command or control Z and then it will be back so that's really nice and then the letter spacing, yes make it a little bit more dramatic So right now you don't see it but if I would say update, the only thing you need to do is go over here and it is adjusted, amazing What I like to do when I scroll I want the image in the background to stay at the same place, so I go to Elementor, I hover over here, click on this icon, go to style, scroll down and go to attachment and I say fixed, update and now it stays in the same place I hope you like it so far

  I hope you learn a ton of good stuff, if you do so please like this video and please subscribe and then click on the bell icon so you will be the first that gets a notification when I upload a new video    What's next? I click over here then I go to the elements and I want to go for the divider You can also search for it, the divider, yes drag it over here and it's a black line It is solid Let's change the weight so I can make the line bigger 5 pixels for instance

I can change the color, I want to change it to white and I can change the style to double, two lines or dotted or dashed I like the solid line The width is in percentage, if I would say 50%, it will be 50% of the width I bring it to the center but I can also do it in pixels but I like it in percentage so I say 60%  How big should a gap between those elements, not much, zero, update and by the way if I make the screen smaller and you don't see the background over here at the left and here at the right then go to the section over here and click on stretch section and the content width where we stayed at the box so it will not go further than here at the left and here at the right and if you say full width and that can go anywhere, update okay make it a little bit smaller

The line 50, I can go too advanced and then we can work with margin and padding I will explain it later but margin is actually pushing space outside of the element and padding is pushing space within the elements but since it is a divider I cannot show how it works  I will show that later but if I want to bring this closer to each other, I can un-check this I can go to the top I click on the arrow down a few times and I bring it closer to each other Now I can duplicate something so I like this, I hover over here, I click on duplicate

You can do the same here at the columns and over here so I can drag it so I drag it below the divider or I drag the divider on top and then I can change this over here So I say photo pipe, film, pipe, web-design, you know I do it photography Now what should happen now? It should be smaller so I go to style typography, make it a lot smaller like that  It can have more weight in my opinion so I say 500 like that, update and I think this line can be thinner so I click over here, make it 3 or 2 and what would happen if we decrease the height? I click over here on the section and I change the height then it stays in the middle which is really nice, so say 400 and what I want to do now? I want to add a button not only one but I want to add two How can we do that? I click over here and I go to columns and a column is actually a kind of section in a section

I'll explain what I mean  I drag it over here below until I see that blue area I release it Now if two areas and in those areas I can add new elements So I search for a button and drag it over here and says click me

You can change the type but we do not need to do that because we can change everything ourselves and the text is portfolio I want to show what I can do? So I want to give people the possibility to take a look at my work, then we can have a link I say forward slash portfolio and that means that everybody that clicks over here goes to yourdomaincom/portfolio and that is this page So I bring this to the right, like that, the size can be extra large or small or normal medium and I like it that way We can have an icon, so I can place this over here

I can place it before the text or after the text I place it before and I can have some spacing between the icon and the text like that then I go to the style, the typography and we have normal and hover  When we hover over it, you see it lights up a little bit or the color increases Now we can change that, the text color is actually okay but you can change it I changed it to white

The background color again let's go to Google colors, take a look over here and I search for a green color, for instance, this one copy and paste it, like that We can have a border, solid, make it 3 pixels We can change the color and we can have a border radius, so if I bring this up with the arrows, you see the border radius increases I don't want that and I also don't need a border, so I say none but it's really nice We can have a box shadow, so I can click over here and there it is, I can change the blur, the spread, horizontal, vertical, position can be outlined but also in line so you can change a lot over here and then it gets a new effect

If I will change this to zero, a vertical to zero then I can make the spread everywhere like that, so you can play around with that I can just say you know what I don't want to have a shadow so I remove it You also can have a different color with a shadow  You can do a lot, but as I said before, I don't use it, so totally transparent but we can also change the hover So if I click on hover, I can change the background color to this one for instance and now if I hover over it, it becomes that color

We can have an animation for the hover shrink, so if I hover over it It shrinks a bit, you see beautiful animation, different animations So really nice options, I update it and that looks like that  I want to duplicate this whole area on this whole column, so I click over here then I want to remove this column by clicking over here, then I click here, I align it to the left Now I have two call to actions over here in the middle

I change it to 'Contact' and it should link to contact, /contact this page I can change this to something else I want to change the color so I go to style and for now I copy this color, copy and I change it to this one but when they hover over it, it should be green  So here it becomes this color and here it becomes the green color I like that, update, yes beautiful

What can we do? We can bring some life into it so, I click over here I go to advanced and as I said before I can change the margin and the padding We'll take a look at it in a few minutes I want to have an entrance animation, so I can say zoom in and then you see it zooms in like that, then I want this line to come from the left or to the right So I go to advanced, entrance animation, fade in from left and then also here I want this to appear as a zoom in

  On this to come from the left and this to come from the right, like that but it's a lot at the same time so I can bring some changes in it What you also can do? If I go to this one, you can decrease the speed So right now the animation duration is normal, you can make it slow or fast I like it slow and then I click over here, I want to bring some delay in it, in milliseconds so one second is a thousand milliseconds So after a half second then this will appear, after one second, disappears and then after one and a half seconds this one and after two seconds, this one should appear

So how will that look? Like that, I like it but what will happen when we make this smaller So far so good, so far so good ooh, that's not good, that's not good This is also not good, so now we have a really, really big problem Now that's not true because we have Elementor, so over here you can change to the tablet view and if you like it, you can leave it If you don't like it, you can click for instance over here, maybe increase the gap a little bit so you have more space to select it and you can go to advanced

  Let's say, minus five, and at the top or bottom minus five, but what you see when I'm editing right now, I'm editing here at the tablet So I can have different settings on a tablet than on a screen and that is great because if we take a look at the tablet, I think this is too small but for a screen, it is great So how can we change that? Just click on the tablets or on a device that you want to select or edit something For instance I go to content to do with and I want to increase it, something like that, 82% but if I go to a smartphone well this line is still OK but I really don't like this So how can I fix that?  I just click over it

I go to style, typography, everywhere you see those icons you can change it for a different device So right now it's for a smart phone I want to make it smaller, like that and of course this should also be smaller, so I go to style, typography and change it What you even can do, maybe you think I really don't like this, you can do it like that but then you see those pipes over here What you also can do is go to advanced and now this is getting crazy, scroll down, crazy in a good way by the way, go to responsive and say hide on a mobile, update

  Now when you go to the mobile version it disappears, you see it, you see it, now it is gone why? Because then we can change it, so what I can do now? I hope I do not go too fast I can go to the desktop and I can go to text editor and drag it here below and then I can say photography shift enter, film, shift enter, and web design then I go to style I bring it to the center, change the text color to white I change the topography to open sans like that, maybe a little bit bigger, like that  Now I go too advanced and I say at responsive hide on a desktop and hide on a tablet, update

Let's see what happens? Elemastra, photography, film, web design we make it smaller and I see it over here photography, film, web design So this one disappears on a mobile and this one will be shown but this one will not be shown somewhere else, so that's the power of Elementor Let’s change this really quickly, it's not that hard, Elementor home, I click over here I go to the alignment of a smart phone and I bring it to the center and also here to the center, update one more time This is how it looks, make it smaller, make it smaller, make it smaller and one more thing, I go to this bar the divider

I changed it from percentage to pixels I go to the desktop first, two pixels, like that then I go to a tablet I change it to pixels, then I go to a smartphone I change it to pixels, update, make it smaller and that's how it looks Elemastra, photography, film, web design You can click on portfolio and then on contact, the menu appears, the logo appears in the middle, really nice Now I go to the back end and I'm going to create a second section I go back to the desktop view and now it looks a little bit weird but only for us

So I click on add new section and I want it this time to be three areas If I update it, I see there's a white space but really small I click on the plus and I go for an icon box I drag it over here and this is how it looks, default view we can have it stacked and framed I like stacked, I want to showcase my three surfaces and maybe you're like hey in my last tutorial, I made almost the same and that's because making a page like this shows you all the options you have in Elementor but I decided to do something new

  I will also create different pages and create tutorials about them So that will be tutorials around 20-30 minutes where I showcase, how I create a website, How we optimize it for a smartphone and tablet and If you want to see those videos and subscribe then you can go to FerdyKorpcom, go to resources, design videos, be updated with new design videos, sign me up and then fill in your first name and your email address, subscribe and then I will send you a few videos about creating beautiful pages using Elementor  I continue over here, the title is photography and we can have an icon, so I can search or I can type in Cam of camera, there it is then have a text over here, so I paste it like that and I will link it to /photography It will be centered in the middle H3, I can make it H2 and then we can style it even further over here at style, primary color is this one

The secondary color is this one, I like that The spacing can be a little bit less  The size, I think it should not be too big so something like that is great, padding, you can change that, you can rotate it if you want to You can have a border, you can make it a square by heading-0, a hover, what happens when you hover over the icon You can change the colors or you can have an animation

I like shrink and then the content of course a line in the middle that's already the case Alignment at the top, the title How much spacing? Not much, something like that The color is OK The typography, it's a little bit bold the text I don't want that, but I will not change it over here, but I want to change it everywhere

  So I go over here again to default fonts and then I go for the body text and I search for open sans and normal, like that and the accent text, open sans and maybe a little bit bigger, 500, update and now it should be looking fine I update it, so that's it What I want to do now? I want to add a new element, an image carousel, I search for image and there it is I drag it over here and I can add a few images and now you can make use of the images  I use in my tutorial which you've downloaded at the desktop

Now we go to Home, photography and there are a few images You see they've all the same height and width You can do that also within WordPress, I've shown you before I upload them all and I create a new gallery I can change the order

I can reverse the order and I can insert them into the gallery You will see the result immediately I don't want this, I want to change the image size to full How many slides do I want to show? Only one at a time, like that, no stretching of the images, no navigation, no arrows, no dots, no links, no captions then here are additional options, pause on hover, no, auto play yes, every 3 seconds, infinite loop that means that after the latest picture, the first one appears again and the effect I want it to be fade  So let's take a look, now it does not slide, but it does fade and the animation of the fade can be one second

Direction is not relevant anymore because we fade then we have the style and it falls in this all, okay, I go to the elements and I search for a button and I drag it here below So I say more information, I'll link it to /photography, in the center, size medium I can have an icon the same one for instance again and then style, hover, create an animation, shrink and that's okay like that, update and now I want to do something new  I want to do a few things, first I want to create a new style over here at the bottom So I go back, I click on this section of the header

I go to style, all the way over here, and it says here is a shape divider So I can add a shape, drops and you see that over here or tilt and I don't want that at the top but I want it at the button, so I choose for the type tilt and I want to flip it and I can change the height I think this is OK The color is fine, update and now it looks like that I like that, what I want to do now? I want to bring this up over here

How can we do that? Can I go to the settings over here? I increase the height a bit  I go to 550 pixels, update, like that but then I go to this column I go to advanced, now bring the margin down First I need to uncheck this, now I bring the margin down, so everything goes up I think 90 or a 100 is okay Let's see how that will work

Now I go to this section, advanced, uncheck and at the top I say minus and there it goes, it scrolls up now and goes to the other section and this is also an amazing feature of Elementor, maybe minus 200 but well I see, it doesn't have a white background So I go to the element icon so I add the icon box background  I go to advanced, backgrounds and I make it a white background like that, but now there's no padding here So I go to the element style here at advanced then I go to padding and I increase this You see that, so that is little bit more space from here to there

So padding is increasing or decreasing space within the element and margin is increasing space from outside of the element but now I see, this also is farther away so I uncheck this and at the button I bring it back to zero So this will be close to this text, update, let's take a look and I want to decrease this, so I go to this column, advance,  -200, update, like that, great  I want to bring an animation over here, so I click over here on the column advanced, entrance animation, fading up like that, I want it to be slow and this is after 2 seconds so on this to be after 2 and a half seconds, update It can be after 2 seconds, like that then I want to duplicate this area So I hover over here at the column

I click here and I click one more time I hover over here and I close it, I hover over here and I close it then I go to this column, advanced and I say 2250 and here I say 2500 So there's a small delay between those three, like that I love it all with free tools, I really like it So what's the plan over here? The plan over here is to change this

So I click over here and I want to change this to film, change the text, I scroll down more information I change the icon to cam, video camera, also here, cam video camera OK Again over here I change the link to film I do the same over here, I say web design, I change the text I change the icon

  Also over here, I change the link then I want to change the images over here so I click over here I click on clear, delete add images, upload files and I go to my folder again, select files, Astra Elementor, home page or web design and I select them all five command A, open, create a new gallery, insert and it has all the same style, so it should be fine This one I want to remove, I go to elements I want to drag a video over here from Vimeo, I go to my folder, I go to portfolio films, Montana and I grab the video link without sound, copy, I paste over here and there it is, auto play but before we do that, I don't want this, so I click on remove, remove, remove and then I click on auto play Keep in mind that when you click on auto play, it will not be auto played on a smartphone or a tablet, that's why I duplicate it and over here I will have the setting auto play at will be off  I click on advanced, responsive and I say hide on a desktop and here I say responsive, hide on a tablet and hide on a mobile, update

So if I make this smaller, it will not be playing anymore You see and then you can click on it and then you can play it Same goes for the iPhone and you see it's all responsive, so that's really nice I want to decrease the height bring it to 500 update Let's see what it does, then you see that stroke better and the works fine

Great this is what we have made so far   I don't like this, it's a little bit bigger So I need to change the text, see if that does the trick, yes it is all the same, great icons, we can click on it and go to a certain page Only change this one, I like it One more thing but what I want to do? I want to increase space here at the button

So I click over here I go to advanced, bottom and I say 30, you don't see it but you will, you see there's more space now Great I'm going to create the next area    I click over here I add a new section one area

I click over here and I go for a stretched section minimum height 600, style background, type, classic I want to add an image I grab it from the folder you downloaded, of course you can grab your own image I want to talk a little bit about myself and my team, my wife and I, so I go to the home page folder who we are? Open, insert the media and there it is I want us to be at the left and some text at the right

How can I do that?  I'm still at the section, settings, style and the position I say focus on the center-center or Center-top-center and that's better, but I will say size cover, attachment fixed So if I scroll it will be still like that and then over here I can duplicate this area so now we have two columns I go to the elements and I drag a header over here I say who we are? What we do? I go to style typography, change the weight to 300 like that I click over here on the column settings

I go to style background type classic and it's just white then I go to Advanced padding, I say 20, everywhere you see it's changing Maybe even 30 I go to the elements, I search for the divider, I drag it over here, the weight – 2 pixels, a solid line of this color and I make it something like that Then I go for a text > text editor, I drag it over here, I create my text over here, I go to the elements and I search for a button It might as well be this one So I duplicate it and I drag one over here

I click on it and I say 'More About Us'; change the icon and I search for slide share, two people that should be us, okay And now I update it, who we are and what we do The text, it's still bold I don't know why, but I will take a look how can I fix that Who we are? What we do? More About Us and I like it If you want to decrease this area, then you click over here, go to advanced and margin uncheck it

Go to right and say 50 or 100 What will happen, it will decrease over here You also can do that in percentage so I say 30% update and it looks like that What happens when you make this smaller, it looks like that and that has everything to do with betting over here, so let's see if we can fix that   I go to tablets and then it's ok, but at the tablet, I want it to be different

I want no margin, like that; and at the smartphone, I don't make any changes So I update and I will take a look I drag it like that It's okay What I can do? I can go over here, go to the screen, full screen desktop screen, to the column style and I change it to more transparent white

But you should read it so let me see, something like that You still can see us a little bit, I like it What's next? A new area, add a new section with one column and a title So I duplicate this one, in that way I can save some time I say "what people say about us"; I bring it to the middle; make it a bit bigger; give it a little bit more margin

How to use testimonial and I want to have four testimonials So I use columns, two columns and then I searched for testimonial I drag it over here and let's start with testimonial one   The text, I paste the text I add an image and I add a few images, I select files, here at the homepage I go to the testimonials and there are four people

I open all the images and I insert this one – Daniel And I say, his name is Daniel, his job is designer, the image should be aside or on top I like this and then I want to style it but what I want to do first, I go to the backend I go to style and the background should be a gradient with this color at the start and this color in the end I change the angle to 90, like that   Now, what can we make of this

I should click over here, make this text white So let's see what we can do Designer – it's all fine Then I go to style, we have the content, we can change the text color but actually I would like to change backgrounds, so over here I go to backgrounds, at advanced, backgrounds > white I like that

Then we have the margin As I said padding is creating space outside of the element, padding is inside of the element – 30, like that Then I go back to style – text color is okay Typography – typography is fine Let me see, I make this 90, this is okay

This is okay Line height, you can change it, letter spacing – I close it and then I go to the image, I change the image size and make it bigger The border type, you can have a square image So if I say no it is square, we can have a border with two pixels and the color of the border is this one; border radius – that's okay   The name – it can be bigger, so I go to Typography > Daniel

I change the font to Raleway, I close it I go to job, change the phones also to Raleway and weight to bold and I make it a little bit bigger like that Okay, advanced > let me see what we can do I want to give this an animation for instance zoom in like that and then we go to the background, that's all okay We go to border, we can have a border a solid one and if I would say 40, it will look like this

If I say 10 it would look like that, why not Now we can do all other kinds of things, we can have a shadow, spread it, blur it but I don't want that, but you can have it The border radius can be 30 or 50 and it can change also on hover, change the transition, make this 100 So when you hover over it, it changes like that and then you can change how long it will take like that I change the border to 3 pixels and this just for illustration, I would not do this on the website, that's okay

So if I update it, it looks like that, then we can duplicate this, so over here, then I close this one and I can change the text and grab this image and then I copy this and I have 2 more, so I click over here, I change the text, I change the image > header – traveler and the last one – a wedding couple and it looks like that A little bit more space here, at the bottom; how can I do that? I click over here, go to advanced, I add some padding at the top – 40 and at the bottom – 40 I click over here > advanced and remove this, like that Look at that, this is our website using Astra and the Elementor page builder Then I want to do one more thing on the front page, I want to show people the clients we have

  So a new section, one column I copy the title, I drag it here below, change the color to the middle one over here and then I go for an image carousal again but now we are going to apply it differently I drag it over here; add images > upload files > select files I go to the home page > clients CMD A and open I create a new gallery; insert the gallery and this is how it looks

Not everything is shown fully, so I change it from thumbnail to medium and that should do the trick We can navigate over here and over here and we can configure it Slides to show – it says default, so it will decide by itself Slides to scroll, so if I go over here, you see two new ones So if I go to the left WordPress you will still see because it only will show two new ones

I can say one and then I have more bullets like that No image stretching Do we want to have navigation? Yes No links Additional options > pause and hover – yes; auto play- every 2 seconds show a new one; infinite loop; animation speed – yes; and the direction is also fine with me

Then I can go over here to the section settings > advanced and I say margin top or you know what padding is 40 I uncheck this, this is zero, zero Update; I like it   If I want to decrease the space from the bullets and this line over here, I click over here again; advanced > margin – uncheck and at the button I say -20 Update

So let's take a look It can be -60; that's a little bit too close So I say -45; like that Let's make it smaller, this looks nice Change one more thing of course, the title – 'The clients we work for'; update

So this is our home page It looks amazing, beautiful images, nice style, more animations and even when we make it smaller, it will still look fine A nice menu, free logo, so far so good Now if we go to about, you see we inserted that template already, this one does not belong there So I edit it with Elementor, I scroll down and I remove it

If you want to follow this website in order to learn more about Elementor then please click over here on the 'I' that you will see right now, and then you can go to a different video where I show you step by step how to create this, how to create this, how to create a contact page so you can learn more about Elementor And if you want to start importing everything, then go to Elementorferdykorpershoekcom and take a look at this and insert all the sections you want and this library is growing It's all for free and everybody can make a website really quickly and that's what my channel is all about, helping people to make a website

So I go over here, I close this, I go to services, let me show you really quickly how I can do that, I edit the page; I scroll down; disable the title; disable featured image; update > edit with Elementor; I go to complete pages; I scroll down > services I click over here; scroll down – right mouse click > Save Link As > save it > add a template > upload > select > services page > open > insert and update it And all this you can learn in the other video which you can see if you click on the link over here   Now I want to install a plugin, so I click on the 'I' over here and if I scroll down, I see the contact form it's not working So I go to the back end, I go to plugins > add new and as you see over here there are a lot of free plugins A plugin extends your website with a certain aspect and maybe it provides some information in a certain way or it makes your website faster

So right now I want to have a plugin that helps me to create a beautiful form and in order to find it you can search for contact form 7 Don't press enter, it will search automatically; 1 million installs and a lot of good reviews So I install it now I activate it and that's all   If I go to the website, to services and I click on videography, then I click on get in contact, now we have a beautiful form over here

If you want to optimize this form then click on edit with Elementor, go to ferdykorpcom > tutorials > Astra Elementor; scroll down and here copy the code of a contact form, like that I select it, CMD + C, go to the website, click on the eye, so I can go to the backend Then I go to contact, click on Contact Form 1, I select everything and I say CMD V or CTRL V, I paste it I scroll down; I save it and now if we take a look, now we scroll down, it looks like that

So in that way, you can build a website really fast Let's take a look at the portfolio page I close all this stuff, normally a portfolio plug-in will come with the theme We use Astra and with the free Astra theme, there is no portfolio plugin unfortunately So we need to download one

I found one that I like for free portfolio item So I go to the backend, I go to plugins > add new and I search for portfolio and I search for the one from theme radius or radius theme This one; I click on Install Now > activate   It is now activated and here at the left we see a new item portfolio I click on all portfolios and it means portfolio items but this says portfolio, so I'm going to add a portfolio item by clicking this link add portfolio

And if you go to the folder you've downloaded in the beginning, this one you can go to portfolio and I have a few So I have the wedding of Daniel and Lia, so I'll start with the title Daniel and Lia and it Pro features but we will use the free version   I want to add some media so I click on add media > upload files > select files and I go to portfolio photography > Daniel and Lia I select them all; open Now when you click on it, it remove the dashes, copy the title and place it in the alt text

That's it If I scroll down, I see some attachment display settings I want alignment to be in the center I want it to link to the media file and I want the size to be full size I click on insert into the post

I click on it and I remove it again and now I can add the media and now if I select it, those settings still apply So I select this one, I hold shift and I select the latest one, I insert them into the post and I all insert them with the same settings There they are   Now we have categories; I have three categories The first one is photography

I click on add new category and if I want to, I can have a subcategory – for instance wedding photography and then I can have a parent, I select photography and I can add the new category and then I've subcategories and in that way you can organize your portfolio I don't use it for now so I uncheck it, I scroll down and I need a featured image, set featured image, I click on it and I select one image of those pictures for instance this one Set featured image > here we have a short description and since we are working with a free portfolio and you need to be creative to get the result that you want, so I want to place over here photography The project URL – No; the tools used – I leave this empty   I scroll up and I click on publish

I can view the portfolio and it looks like that Now I want to add a second one and this time it is a video and I call this Montana Lisianthus Here at visual I want to add a video, so I go to that video > films > Montana > then a Vimeo link Here it is, I copy the link; I go to a Vimeo, paste the link, then I click over here on share, show options; I don't want to display the text, I click over here on embed, copy the link, go back, go to the text, not a visual but the text I paste a link and now if I go to visual, I'm embedding a video

I add a new category which is called film I add it like that and I select it Short description – film; featured image – I upload a file select file and I can find it at blog > Montana over here Open it, I can optimize it I leave it for now, set featured image > publish

  Let's take a look The video, the image and people can see the video I close it I close it, I close this, I close this; one more and I say Counsel Maassluis NL, add media, it is a website; this one, inserted into the post I can click over here and I can add a link to it which is this one

It's a Dutch website, open in a new tab; add a new category web design, like that Featured image, also this one and you need a featured image so it will be shown on the portfolio page and I call this web design Publish   Now I open the website in a new tab holding CMD or CTRL on a computer, I go to portfolio and I want to edit the page I scroll down, I disable the title and now I go to the backend, to short code

We can create our own short code We can choose a layout; for instance layout two, columns – I like to have four, order by date, the order is descending or ascending It means the most recent one will be shown first Total number 50 and which categories – those three I can say disable image but I enable it

The title color can be the color of our website, paste it here The size – not too big, 14 and then I can grab this code, copy, I go to text over here, I paste it and I update it I click on view page and I don't like this, so how can we fix that? I edit a page in a new tab, I drag it to the left and what you can see if you go over here, you can go to settings and scroll down and here it says demo I open the demo and actually I like this way of displaying things So I can select this code, copy, go to portfolio > edit page and I place it below and I want to copy all this information until the quote mark, copy it I paste it over here, space, then I remove this area, update; refresh

I like that better And here it says – web design, photography, film You can see the image or you can go to the portfolio item and then you can see the images over here and here I see the category and you can share this   I will make a few more and come back to you So I added a few portfolio items and this is how it looks

I think this is really small So I click on edit page, I drag it to the left and let me see, font size If I would say 18, update and refresh, it's a bit bigger, I think that looks better and let me try something else, copy this, paste it space and size I change in weight and I say bold and over here I also need to make a space, update, refresh Now it is bold So this is what we have, nice animation

If you click on the item, you go to the item, great   Now let's take a look at the blog page I close this Now you should see here ready to publish your first post, if you don't see that then go to the back end, to settings > reading You should have displays a static page, homepage home and the post page blog

If that's the case, then you should see this We hover over new and click on post We're going to write our first blogpost and in my case the title is the Elementor page builder We can use Elementor to create a blog post but I will use the visual editor Create a category, I call this WordPress and it has everything to do with the category of blog post you want to have

So if you're traveling through the whole world, then you could say Asia or Africa and then with a subcategory South Africa, so it's just the subject where you're writing about In my case, it is about WordPress related stuff Set featured image > upload files > select files, I go to the folder blog > Elementor and there it is, Astra Elementor 2018 I open it and I set the featured image, I publish it and now when I go to the blog page over here, I see it over here The Elementor page builder, I can leave a comment

It's uncategorized, so let me see what's going on over there After I type WordPress, I should click on add new category, I uncheck this; update; refresh like that; by Ferdy Korpershoek And here we have the recent posts, recent comments and all the widgets, we'll take a look at that later So I want to explain a little bit about writing blog posts and the use of paragraphs and headings If I would say over here, The Elementor Page builder and I would say enter, I can type a text and it will be a new Alenia since I pressed ENTER

If I press ENTER again, you see it skips a line So this is a new alinea If I would press SHIFT ENTER, this is the same alinea as the sentence above What do I mean? Every time you hit ENTER a new alinea starts, a new paragraph starts; and every paragraph you can give it a style You can give it the style paragraph but you can also give it a heading style

So if I want this to be a title, I click over here, I click on paragraph and I make this a heading – heading 2 for instance Heading 1, you don't need to do that because this over here will already be heading 1, and you can use heading 1 only one time on a page So, I will choose heading 2 So, this was one sentence, and it is now a heading 2 Also here, if I click here, and I would say heading 2, this becomes a heading 2

If I update it and I view the post, I close this, then it looks like that It's bigger; this is a header 2 and this is an alinea But remember here I said SHIFT ENTER, so this is still 1 alinea So if I only want this sentence to be a heading 2, it's not possible So keep in mind that if you want to have a certain text as a heading, you need to hit ENTER for it to be a separate alinea

  So again if I would say ENTER, then now I can make this a heading 2 What else can we do? If I would select everything and say paragraph, I can click over here, that's a toolbar toggle, I click over here and now I have more options So I can select this over here, I can make it bold, I can make this italic, I can make this a color – purple and if I update it, I refresh it, it is bold, it is italic, it is purple We can add a link, new alinea, I select it I click over here and I say go to http://Elementor

com   I can click over here and have a few more options, I open the link in a new tab, update > update I refresh the page and now this is a link I can also make it bold and a link update > refresh and if I click over here, I go to elementorcom in a new tab like that

So that's the basic of paragraphs So let me show you how we can put this to practice even more   I remove this text I will grab a new text So I have a text over here about Elementor; here you see there's no space

So what is this? This is one paragraph So if I would like to have this as a header, what will happen everything will be a header 2 like that   So what should I do if I want this to be a header? I leave this paragraph, I should say ENTER and then I can say heading 2 and now it works like that So let me show you how I do it, ENTER, I go down, one BACKSPACE ENTER, one BACKSPACE ENTER I click over here and as you see, there are shortcuts

So in this case on the Mac it is CTRL ALT 2, so I selected CTRL ALT 2 and in that way you can work faster If I do it over here, something goes wrong because this is just another SHIFT ENTER So I would say, ENTER and now it works; like that   I would always start with a title, so I copy this title and I paste it over here and then I say CTRL ALT 2 and now if I update it and I refresh the page, it looks a little bit better already As you see, you have the image over here with the sidebar, with the widgets

We can leave a comment Let's make it even better When you want to optimize your blog post for google or for other search engines, it's good to highlight the word you want to be found on In my case its 'Elementor Page builder'; so I select it and I say CMD B or I click over here Page builder, I select it, CMD B

Don't do this too much, you should highlight it now and then but not too much   Elementor Pro, here's a link Click here I'll make it a link and I say https://ferdykorpershoekcom/elementor in a new tab

Update We can make it a color So make it bold, make it green, update, refresh and it looks a little bit better You also can give it a color if you want to Now I want to add a few images

How can I do that? I go with my cursor to a place where I want to have the image; for instance over here I click on add media > upload files > select files and I want to import those three images and they're already optimized for Google Open Elementor live page builder   So I want to start with this one I align it at the right

It can link to the file itself or you can have no link to it and I want is to be medium Insert into the post and now it's over there and here, pixel perfect with no coding I can put my cursor over here Add media; select this one; bring it to the left; insert and maybe I want this to be bigger or smaller, that's up to you You see if I make it bigger, their quality is worse So I click on edit and I say full size, update and now it's better and now I can decrease it but the quality is still better

  Here is the one minute template setup, so I click before the header > add media and here you see a few demos I want to align it at the right, full size and then I make it smaller So I select it and then I make it smaller, like that And here I press ENTER and I say add media, this one, but now no alignment, none; full size, like that Now maybe I want to show a video so say enter and then I go to YouTube, I search for Elementor 2018, my last tutorial, click on it, click on share > embed, copy the code and go to the text editor and I paste the code

I go to visible and there we have it I say update, refresh and now we have images over here In the video now let's take a look at the customize settings of the blog page First a blog post, the single post I click on customize, I close this, I go to layout > blog > single post; so this is over here and over here I uncheck the featured image and it is gone, then I can remove this one if I want to, unchecking it over here but maybe I want to have them both, so I click here and I click here and I can also change the order

So I place this here above, so if the title and the image like that I uncheck this one, I want to show the title and blog meta, so what do I want to show? First the comments, leave a comment, I want that to be the latest one, leave a comment by Ferdy Korpershoek, WordPress I can uncheck the category It says by Ferdy Korpershoek, leave a comment So you can play around with that

The published date, I want that to be first January 22, today it is four years ago that I asked my wife to become my girlfriend and she said yes So I'm happy, it's a special day today   If you want to change this, maybe you're in a different country and there's a different way of displaying the date, then you can go to your website, go to the backend, then go to settings > general, scroll down and change the date format So this is okay

Single post, content width default or custom Maybe I want it to be smaller, that's possible I go back and I go back; I go to container and here at the blog post, it says content box So if I would change this to box and I go back to colors and backgrounds and I go to base colors and I change the background to nothing, you see it looks like that All boxes like that and actually I like it, so I publish it and now it looks like that

You don't see it here, if you want to change it, over here click on customize, go to layout > container > blog post archives boxed and they have the same effect I bring them both back to default, but you see it is an option Publish, close it So this is a single blog post with the title, the date, the author, leave a comment, the Elementor page builder Maybe we want to change this? How can we do that? Click on customize, it is a header 2

We go to typography, base typography, the headings are Raleway, maybe they can be a little bit more bold like that I like that I go back, content and now heading one is very big, heading 2 is a little bit less big So I can say make this 30 or 10 and then it becomes smaller – 20; not too big so maybe 22 You can do that for everything

  You can also change it for tablet and for smartphone but I like it Publish, okay I want to make this a little bit bigger, I edit the post, I go to the text tab, I scroll down all the way and now I could say 800 by 450 I don't know if it is correct but if I would update it and I view the post, it will probably look like that I like it

So now it's from right over here to the left, all the way on all width I like it more I can leave a comment So if I would open Safari and I can say "wow! great blog post" My name – Ferdy, my email, my website no, post comment

Your comment is awaiting moderation   Now if I go to the back end, I see comments over here I can approve it I click on approve > reply, "thank you sir," reply and now if I go to the blog post, I click on read more, it says two comments If I click on it, I see it from Ferdy, "wow great blog post" and from me "thank you sir

" So that's really nice I want to show a few more things If I go to the blog page, I see text over here and then those three dots How can I change this text? I go to the blog post, I edit the post and then if you scroll down, you see nothing over here, if you scroll up, you click on screen options, excerpt, close this and now you see an excerpt text And that is a text you can create yourself

I grab the first Alenia and it ends with go, update, now if I view the post and I go to the blog page, it ends with go So in that way you can decide for yourself what text you want to play it over here So you could give a summary about your blog post The only thing is that you don't see the read more button anymore but you can click here and you can click here So that's great

And I want to take a look at the sidebar over here If I hover over here and I go to widgets in a new tab, holding CMD, I see search, recent posts, recent comments here at the main sidebar If I take a look at the website, it says search > recent post > recent comments So everything you see over here will be displayed here in the sidebar, in the main sidebar The main sidebar means that on all the pages and posts that have a sidebar, those widgets will appear

So if I would delete search and I refresh the page, it is gone So we have recent post, recent comments; I will remove them all like that, refresh and that's empty   Now I go to plugins and we are going to add a new plugin That plugin will show you the recent post with a thumbnail So I say recent posts with thumbnail

From Martin, a lot of active installations Install now and I activate it and this is a widget So now if I go to appearance > widgets, it should appear over here Those are all the widgets and here it says recent post with thumbnails and speaking about widgets, a lot of premium themes have their own widgets So the amount of widgets depends on the theme you have, but you can also have plugins like this one and I bring it to the main sidebar, I click add widget, then I say a recent posts

The amount I want to show, we only have one but I want to show a maximum of 5, then I scroll down, I want to show all the categories, display posts featured image and I want it to be 50 by 50 Save it, refresh the page and I see recent posts, the Elementor page builder so I like it   I'm going to build a few more blog posts, let me show you New post, let me do it quickly "The Oasis of the Seas" I paste some text over here and I add two images > upload files > select files > blog > Oasis of the Seas; two pictures open them, you need to optimize them and then insert into the post, like that

A new category, photography > edit > featured image > set featured image and I grab this text as my excerpt Publish and we have a new blog post We can take a look and there it is – The Oasis of the Seas   Now if I go to the blog page, you see the image – Oasis of the Seas; so that's how it works I will create a few more blog posts and then come back to you

So I added a few blog posts, I refresh and there they are and it's displayed nicely So looks good We can customize it I click on customize and I go to layout > blog > blog archive Do we want to show an excerpt – a text like that or do we want to show the full content? That's also a possibility and you'll see all the images, you'll see the full text like that

I choose excerpt Do we want to see all the featured images if I would turn it off We will not see them I do want to see them and the rest works the same They want to see this, leave a comment, maybe, I don't want to show that

I want to show personal and by Ferdy Korpershoek Now what I want to do, I want to change those two So the title will be on top, then the image, then the text I like that better So this is our blog page

I publish it, what I want to show you, right now there's no date over here but if I click on the link, you see January, the 22nd, and all the blog posts are of the same date because I just made them today   If you want to edit that, for instance – our honeymoon was in 2015 So I click on Edit Post and over here at publish, I click on edit and I can say December 12, 2015 I can change the time; say ok Now if I update it and I view the post, you see the date has changed but not only that, now it is here at the bottom, why because it's ordering and it is ascending

So the most recent one will be 1st, 2018 and the oldest one will be here below But you can do something else, you can also schedule a post So if I click over here, I say edit post, I can say this should be published the first of February at 10 o'clock; ok Now it says schedule; so if I go to the website, to blog, you don't see it anymore because it's scheduled   So the 1st of February, it will appear at 10 o'clock automatically

So in that way you can create a lot of blog posts and configure that they will all be scheduled for every Friday So every Friday there will be a new blog post online and in that way you can automate your blog posts on your website which is really nice I will put it back so I go to the backend > posts > all posts and there it says, it's scheduled for the date Quick edit, 1st of January, update Now it's over here; over here we can have more widgets and here at the bottom, we can also have a few widgets

So I click on customize, I go to layout > footer > footer widgets and I turn them on So right now they are not here and now they will be like that Publish, I close this and I want to add a Facebook widget so I go to the backend > plugins > add new and I search for Facebook by weblizar and there it is A lot of installations, install now > activate and now I can go to appearance > widgets and here it is I click on it and now I can select footer widget area one, I add the widget and I say like us on Facebook

I go to my Facebook URL, the international one, remove this; copy it; I paste it here and do I want to show faces? Yes Do I want to show a live stream? No Save it Let's take a look and here it is Like us on Facebook and if you want to, you can like me and I would like that

The second one I go to plugins > add new > instagram > wpzoom There it is Install now; it can get a little bit complicated but I'll show you step by step what you need to do, because you need to configure your Instagram widget   I click on the settings page, otherwise you can go to Instagram widget and then go to settings, connect with Instagram and there's my token, I save the changes and now I go to appearance > widgets or you can go to the front-end, go to customize, scroll down and do it over here

So you can go to widgets footer widget area 2, add a widget search for WP Instagram widget by WPzoom and there it is I can say follow us, 9 images, 3 columns I want to bring this back to five, the image spacing So it will be a little bit more narrow; the third one I want it to be the same one we have already Something with blog posts or with posts, recent posts with thumbnails, like that

Title recent posts – five; it's all fine Publish and what we can do, I can go back, go to footer widget 4, add a widget, search for text, about and then I go to, I grab this text, I paste it here and I publish it; close And now actually I want to change the order How can we do that?   I go to widgets, I open those four areas, the text I want to be at the left and then I want to drag this all one down, like that; refresh I like it

What you also can do, you can add more widgets over here For instance below about, I can have another one, for instance a search widget, you don't need a title so I can refresh it and I've searched over here and over here I can say, I want to show only 30 posts Save; refresh and now it looks like that I like it a lot If I click over here, you go to the blog post

Also here I want to add a few things So that is over here, Facebook and I just can go over here Copy this, paste it, show faces – yes, show livestream – no; save and Instagram I can also drag it like that Save; refresh Now it looks like that

You can have more things like sign up for our newsletter if you want to learn more about email marketing I've tutorials about it using MailChimp or using ConvertKit   So that's it I go to contact, let me show you how fast I can do this, edit the page, go to Elementorferdykorpershoek

com, search for complete pages, contact page one, right mouse click, save as, save, I scroll down, disable title, update, edit with Elementor, close this, add a template, upload, select file, contact page, insert; that's it Update, let's take a look and there it is Look how fast that goes So I have a tutorial that is about what's next, optimizing your website for Google, adding a few more plugins, you can watch it over here and I want to do one more thing, if I go to, new blog page, for instance this one and I edit the post and I say edit > link to media file > update > update, view the post and if I click here > I go to the file itself I don't want it

I want to have a lightbox So I go to the backend > plugins > add new and I search for light box I did not prepare this So video lightbox, image light box, a lot of installs; not that good Responsive light box

I like this one Install > active I go to the website, to the blog page; Oasis of the Seas, the first image and it looks like that I like it

I'm happy So that's what you can do with free tools within WordPress   So if you have made this whole website on your own computer, then I will show you how to transfer it to your live website I go to the back end I go to plugins > add new, we're going to transfer this website from our local computer to a website

I search for all in one, install now I activate it and here you see a new item, all-in-one WP migration I click on export > export to file and I click over here to download the website And here I can see it is downloaded   Now you can follow the steps in this video how to get a domain name, a web hosting through SiteGround and if you follow through all the steps, then you are here

So over here I can go to the backend of my website and I go to plugins, I want to deactivate jetpack, select all the plugins, delete them, apply > ok I go to the dashboard, to the post, I click on trash, empty the trash, I go to the dashboard, I dismiss this message and now we are ready to go to plugins > add new, all-in-one and it is the second one, install now > activate Here it is I click on import, import from file, the file we just created, here it is from our developer website, open it and now it is uploading I click on proceed and then we need to go to the permalink settings

We need to log in first probably with our login details of your developer website, click on post name, save the changes, again save the changes; two times Now your website is live – newastraelementorcom

So that's how it works So we have made a beautiful website using free tools I hope you learn a ton of stuff and if you want to take it to the next level and you want to take a look at the pro versions of Astra or Elementor then go to FerdyKorpcom > tutorials > Astra Elementor and let's take a look at Astra first   So I click over here; I go to download now and we use the free version and if you take Astra Pro, what do you get? You can use them on limited websites, you pay it once a year

You can also buy it for a lifetime so you pay once $250 and then for the rest of your life you can use all the Astra Pro features on unlimited websites, so that's ideal when you want to become a web developer What do you get? You get updates and supports for a lifetime if you get the lifetime version You pay only one time for the rest of your life and the top features, you have a transparent header, so I made a website with a pro version So if we take a look over here, give this a nice menu, if you scroll down the header can be sticky What else? As far as footer, we've now four footer widgets

But if you go to layouts > footer > footer widgets, you see there are more options, so you can be very creative over here   Let's take a look at all the features – transparent header, sticky header We can have page headers, we have more control of all the colors, better typography, custom layouts, the footer widgets, I scroll to top, so over here if I click over here, I go up We can have different blog layouts, so if you go to the blog page, there are more options For instance I have a grid view like that

So if we take a look at the blog archive page, you see there are more options but also at the single post there are more options We can have a mega menu and more stuff But if you even want to take it to the next level and you go for the agency bundle, if you pay per year you pay $250 per year, if you go for a lifetime you pay one-time $700 and then for the rest of your life, if Astra Pro add-on, Astra premium sites, let me show you premium sites, I go to appearance > Astra sites, I go to Elementor, what you see over here, this is the portfolio plug-in that comes with the agency So this is what you also can create when you get this package, but if I take a look at Elementor and I see a site that I like, for instance this one details and preview and I want to have this, I say install plugins and import this site, okay So if you make a website for a client, you can start from this point

  So you search for a site that you like in the Astra sites and then you can import it with a few clicks and then you can work from there and it will save you so much time and it will make you so much more money So I have to say, it is a big investment, $700 or you can start with annual but what you get for it is amazing It will save you a lot of time Done; view the site and there it is With a few clicks you get this take a look at shop, click on a product, look how amazing it looks

So if a client wants a website with a webshop, you can choose this one and change it and then within 2 days you can show the first preview and it is amazing What else do we get? Convert Pro, only one Schema Pro, so that's about Astras and then we have Elementor So if I would go to Pro Astraelementor and I go to Elementor Pro, here you see what is possible Again the menu, that is sticky and here I show you all the pro elements

The animated header, the Facebook button element, the slides element, slides element that you can use to show images like this, the price table; so all those elements are not within the free package but in the pro package Portfolio, again the blog quote, so it gives you even more freedom to create whatever you want on the website I like this one the most Look at that, the flip box, there are so much great options over here For instance this one, the template element, if I change this over here and have also placed this element on different place on the web sites, then it is also automatically changed

  The media carousal in a different way and if I click on it, I go to video, the share button, woo products; I don't have WooCommerce on this website but it gives you so much freedom If you want to get that, go to FerdyKorpcom, click on tutorials, Astra Elementor and here you can get Elementor and I have also tutorials on all the pro elements So I want to take a look at that click over here and that's it I wrap it up

So that was it   Thank you so much for watching this video I hope this video was helpful to you and you are able to create a beautiful website Good luck with your business, which are nonprofit or whatever else you are doing and I hope you have a great day Please like this video and subscribe for more upcoming videos and then you'll see me the next time

Bye

Free Email Updates
We respect your privacy.

affiliate marketing companies

affiliate marketing