In this post, I will show you step by step how you can create a professional website using the best free tools out there. My name is shehroz and in the next minutes, I will show you what we will cover in this tutorial. I will show you how to get a domain, how to install WordPress, install the free Astra theme and a free page builder called Elementor and then I will teach you how to create a website from scratch, or if you prefer, how to choose from dozens of pre-made templates that you can import with a few clicks. You can even import all the pages for your website in the same style. Those pages are made by professional designers and we can import them for free. Then, we will adjust those pages to our wishes. I will show you how to change the text, add free images, adjust colors, use background videos, and how to adjust your website in a way that people want to make use of your services. If you want to, you can learn how to create blog posts, a blog page, and a portfolio. I will talk about footer elements, free WordPress plugins to add more functionality to your website, and of course how to optimize your website for the search results, and how to make your website responsive for all devices. I have been making tutorials for over 2 years now and people seem to love my tutorials. I do my best to become better and better in explaining how you can become a pro in making websites. If you have a comment or feedback, feel free to leave a comment below the post. After read this article, you will be able to create a beautiful website, but not only that, you can do this for a living. I’ve heard from a ton of people that they make websites for a living because of my tutorial guide and that makes me really thankful. So if that’s something you would like to do you can do that and you can make good money with it. So feel free to learn all those beautiful things I teach you, help other people to boost their business by creating a website for them. Having said that, please like this post if you like it and now let’s get started. So, for who is this tutorial? This tutorial is for anyone who doesn’t want to spend a lot of money on the website. Anyone who doesn’t have much time; anyone who has never made a website — so for complete beginners; anyone who wants to adjust and edit their website themselves without waiting for someone to do it for them, and anyone who wants to learn more about Astra theme and the Elementor page builder.
The first step is to get a domain and webhosting then, we’re going to install WordPress, after that I will show you how to install the Astra theme and the Elementor page builder, and then we will create our amazing website. The first things we need are a domain name and web hosting. If you have that already that is great then you can skip this part. If you don’t have it, let’s go to webhosting124.com. Then you can click over here to go to siteground. Site ground is, in my opinion, the best webhosting provider there is. I tried a lot of web hosting companies and I found out that site ground is the best one, and it’s not only my opinion that they are the best, there’s a Facebook group all about web hosting and every year there’s a poll with who is the best web hosting provider and Siteground is number one every year. The web sites here are super fast, you can call them 24/7 or you can open a chat session with them. I had a few times that I had no idea how to figure something out and then I went to the chat session and within a few minutes, they were able to help me. At the chat, they can say you should do this and this and this, but they often say let me do it for you if you want to. So the support is amazing. Because Siteground believes in their product and their service, they offer you a 30-day money-back guarantee.
So if you somehow do not like it, you can get your money back. So there’s no risk for you. I don’t think you will cancel within 30 days. It’s amazing to get a domain name or web hosting through siteground. I host all my websites here and I will walk you through the plans. There are three plans. There’s the Startup Plan, the Grow Big Plan and the Go Geek plan. The startup package is $3.95 per month. In Euros, it’s the same €3.95. You can have one website, that means one domain, then there’s 10 gigabyte of web space which is more than enough and 10,000 visits per month which is also more than enough when you start. You can install WordPress for free — there’s free SSL. What is SSL? With that, your website becomes secure. With other web hosting companies, you need to pay money for that. There’s even one where you need to pay $120per year to get SSL. With Siteground it is free. You can have free email addresses like info@yourdomainor ferdy@yourdomain or your own name and your domain, and daily backups. So if you mess up somehow, you can go to the backup of the day before and you’re good to go. Then there’s the GrowBig plan — $5.95/month or €6.45 per month. With this plan you can have unlimited websites. What does it mean? Here we can have one website, so one domain.
Here we can have unlimited domains, so when you get the web hosting package of $5.95 per month, you can buy ten domain names and then create different websites. So that’s the great thing about the GrowBigplan. You can have more space, you can have more visitors and if you scroll down a bit, you see, you can have on-demand backups. So you push the button and you get a new backup. If you already have a website, you can have a free site transfer to Siteground. You can have staging so you can change things in your website and then push one button and then it goes to the live website. If you want to know more about all these options, you hover over here and you can see them. So what I love the most about the GrowBig plan is that you can have unlimited websites, and then there’s the Go Geek plan — 11.95dollars or Euros and you have more web space, you can have more visitors and there are all those extra options. I personally use this plan because I have a lot of websites and a lot of visitors. But when you’re creating your first website, you can choose between the Startup plan and the GrowBig plan. So if you have a domain name with a short URL, you can have one website, so you can use the Startup package. If you want to have a second domain with a shorter link, in my case, FerdyKorp, instead of FerdyKorpershoek, then I suggest you go for GrowBig because then you can create a second domain and you can host all the websites you buy, all the domains and you can host them in your grow big account. So it’s up to you. I go with the Grow Big account. I will go for the Grow Big plan. So I click over here on “Get Plan”, and now we can register a new domain name.
If you have a domain name already, you can click over here; you can fill in yourdomainname.com and then proceed. I want to register a new domain name and I can choose it over here. So I can say ferdykorpwp (WordPress) and then there’s an extension. You can say “.com”, “.net” but there are also country-specific extensions like .nl, like .pl, the .co.uk, .es. If you want to go international, I prefer.com, not .net or those other ones, just .com. So be creative, make sure it is available, if it’s not available you click on proceed, you will see it is not available. The domain costs $15.95 per month or €14.95per month and I click on proceed. Now it says “Congratulations! Domain ferdykorpwp is available for registration with your hosting account.” That is amazing! So now, I want to fill in some details over here. I want to leave my best email address over here which is [email protected]; I need to create a password and I need to confirm my password. Then we scroll down a bit and we go to client information.
So first you need to select your country, then your first name, and your last name. If you have a company, you can fill in the details of your company. If you’re from the United States, you need to select your state or province, your city, your street address, your zip code and your phone number. Then I scroll down and I go to payment information. So I will fill in my details over here and the great thing is, depending on the country where you live in, there are local payment options. So if you’re from the Netherlands, you have Ideal, if you’re from another country, you can pay with your local payment provider which is what I love about Siteground. My billing address is the same as given in the contact information. I scroll down. We’ve chosen the Grow Big plan; you can choose your data center — I choose the USA. If you want to focus on people from Europe or the United Kingdom, you can choose something else. I’ll choose the USA. This is important. Here it says period: 12 months. REMEMBER, you get 70% discount here at Siteground but it’s only for the first payment period. So if you pay for 12 months, you get a 70%discount for 12 months. If you choose 24 months you get 70% of 24months. If you choose 36, you get 70% discount on36 months. The thing is when you say 36 months you need to pay now. So you pay $214.20 and then you have three years of web hosting with the Grow Big plan where you can have unlimited domain names. If you will go for 12 months, then after 12months, you will start to pay $19.95. I want to be upfront about that. So if you’re really sure you want to go for a long time with this domain, then I would suggest you go for the 36 months. If you want to try it out, do a shorter period then I would say go with 12 months, and after a year, you start paying $19.95 per month depending on the plan you have. It’s not entirely true, because after your first period, you can decide to go for three years with Siteground web hosting and then you get 30% of discount. So then you would pay around $14 per month with Grow Big, and $7 per month with the startup plan. If I take a look at what a website means for a business, I know it is worth every penny. So it’s up to you, if you want to go for 12months, 24 months or 36 months. I go with 12 months and then we go to the next step. We register a domain name and then I also suggest you get domain privacy. Why is that? If you don’t do this, people will see all this information you have filled in on this page and they will call you, they will email you like hey I can make your website, you can have a business loan if you want to; people start spamming you. You don’t want that. For $12 per year, you can get rid of that. You don’t need the Siteground scanner, so there’s a total of $99.35 and you have a domain name and website for a year. I think this is an amazing deal. What you can do now? You confirm that you’ve read and agree to the Siteground Terms of Service and Privacy Policy and you can check this if you want to receive Siteground news and special offers by email. When you get there through webhosting124.com, you don’t pay more, but you get the 70 percent discount and I get credit for it. So it’s a win-win situation and it helps me to make these tutorials. So thank you for that. I click on ‘Pay Now’ and now ladies and gentlemen, you have a domain name and web hosting — congratulations. The next step is to install WordPress. Click on this button with the text ‘Proceed to the Customer Area’. And then we see this: Create or Migrate Your Website and then you see your domain name. We click on this orange button to set up our site and here we can start a new WordPress website.
So I click on the button below: Start a New Website. Then I choose WordPress even when you want to start a Woo Commerce website, still choose WordPress and now we need to set up a login. Here you need to fill in your best email address and create a password. So I will use [email protected] and my password. Awesome! Then I click on continue. I don’t need the site scanner; I have that already. I click on: Finish, and now our website are being created. It will take less than 2 minutes. It says now that your domain has been created and WordPress is installed. So what I want to do now, I want to go to a website. Here’s my website and I click on: Site Tools. I want to do one more thing before we go to our WordPress website. I want to make it secure. So here we are at your domain and then there are a lot of options over here. What we can do now, we can click on security and then we click on SSL manager. Our request is being processed. So here you can select your domain, if you have one it’s probably already selected. Select SSL and what it says, it’s already encrypted. So I need to scroll down, here it is: Manage SSL. My domain already has an encryption certificate. I click on Actions get Enforce HTTPS. I click over here and I need to turn this on and now it’s turned on; that’s it. So now; what I want to do? I want to go to WordPress & Install and manage. I scroll down. Here we have our domain name, WordPress is installed and I want to take an action by clicking here: Login to the Admin Panel, and we are already logged in. What we need to do now, we need to skip the WordPress starter. So I scroll down and I click on exit, and ladies and gentlemen here we are in the backend of our website. Look at this FerdyKorpWP.com. I bought it five minutes ago and I am already live with it. Everybody in the world that goes to FerdyKorpWP.com goes to my website. So I can close this now, I don’t need it and if I click over here, I go to the frontend of our website. This is our website and it is really ugly. It is, I don’t know, ugh! I don’t like it, but we’re going to make it beautiful. So in the next post we’re not going to create website — no, in the next post I will show you how to get an email address and use it on any device. So let me tell you the difference between the frontend and the backend. The front end is the website that is what people will see when they enter your website, when they go to your domain, they see the front end. When you want to edit things and configure things, you can go to the backend. You can only go to the backend when you can login into your website. Since we are logged in, we have this beautiful bar over here which says we are logged in. If I go to FerdyKorp.com, I go to my website. I’m not logged in so I cannot go to the backend. If I would log in then I see this bar and then I can go to the dashboard — to the backend. So I hover over here and I go to the dashboard and here we can configure a lot of things. But before we do that I want to remove a few things. I go to plugins and I click here, so I select all the plugins, then I click on bulk actions, deactivate. I click on apply, so we deactivate all the plugins and when we have deactivated them, we can remove them. So I click here again, so we select all the plugins bulk actions delete. Then I click on apply and okay. Then I go to the dashboard, I want to dismiss this message. I want to close this. There’s one page so we can go over here or we go to pages, I want to remove both pages, I select this area, so I select all the pages, move to the trash apply. I go to the trash and there I want to empty the trash. I go back to the dashboard. I close this. I close this. I close this and I close this. Now, I want to change my username, because over here, it says howdy, [email protected] and when I write a blog post on my website, it will say written by [email protected]. I want to make it personal. So I click over here on Edit my profile I want to add an image of course. So here you can do a few things — you can change the look and feel of the backend. I like the default one. I want to fill in my first name and my last name over here and then here at display name publicity I want to select Shan syed, and now over here it says, “Howdy, shan syed.” Then I can scroll down, I can create a profile picture and generate a new password. First, I want to click on update profile and if you want to get your image on the website which is highly recommended, then, you need to scroll down over here to profile picture, you can change your profile picture on Gravatar. So I click on it, if you want to know how you need to do this thing, click over here I go back now to my website and I want to change my email address because this email address is linked with my Gravatar account. So I click on update profile, and now I have my image over here which is much better. What else? I go to settings general and if I scroll down, I can change the date format April 13, 2020. I can customize it; change it to something else and the time format, right now its 1:55 p.m. You can change it and you can take a look at the time zone, at this moment at +2 and if I save the changes, the time is correct now. If I prefer the time formula with 24 hours, I can check this one. I save the changes. Now I go to the permalinks, here at settings, permalinks, this is really important. We want to optimize our website so we can be found on Google. Sometimes the common setting is plain and then when you have a page or a post, it will look something like this. Well, that looks ugly. I want to change it to post name, it’s the case already. I leave it at that and I click on save the changes. And now we have a blog post, for instance, my awesome journey. It will say: yourdomain.com/my’s-awesome-journey, instead of something like this because this looks really weird.
This is something you don’t want. So post name, save it, perfect! So I go to the dashboard and now we’re going to do something amazing. If you go to Google and search free Astra theme. Hit enter. This is a free theme. Over here, you have paid versions. I have tutorials about all the paid versions but in this tutorial, I will talk about the free stuff and then here below, below it says, “Can’t decide which plan is right for you? Download the free a theme.” You can click over here then you can leave your first name and your email address or you say, no thanks, I just want to download Astra. I want to close this. There’s also a different way to get the Astra theme I want to show you in a minute. What I want to show you now is how you can make use of their amazing starter templates. We’re going to save a ton of time. If I scroll down, we’re going to make use of the page builder Elementor I will talk about it in a minute. Over here, if I change the selection from all to free, all those websites over here can be installed in a few clicks for free in our website. Isn’t that amazing? Look at those. Look at that. You can check them all out and that’s really important because we’re going to install a template and from that point on, we’re going to configure everything, change the text, change images. So depending on the kind of website you want to have, you can choose a template. So what you can do, hold command or CTRL on a PC, click on all of the websites there are and CTRL + Tab so you can go to the next one, and if you see something you like, you think hey this looks similar to something I have in mind, then you can select that template. You can also have web shops for free, how amazing is this. What we’re going to do, we are going to choose a template and then configure it and I will show you step-by-step how you can do that. Look at this — it all looks beautiful. Wow! Another web shop. Wow! Another web shop — video in the background, or if you want to have a restaurant website, yoga, life coach — this is all done for you. Look at this; it looks beautiful. So over here, you can take a look at all the other ones and when I found your ideal template, you can install it and I will show you how. So what I will do now? I close them all. Before we’re going to install it, I want to show you something else. Open this Google drive — hit Enter. This is the free page builder we are going to use. This is the best free page builder in the world. Here you see how it works, just drag and drop, making things bigger. It is so easy. It’s crazy and they keep on getting better. I’ve been to the office of Elementor, they are doing amazing things. It’s crazy. We’re not going to work with a paid version, although, that’s a really great option, we’re going to work with a free version. So what we can do, we can download it by clicking here or I’ll show you another way. Go to the dashboard of your WordPress website. I go to themes and I click on add new and I search for Astra and there it is — Astra, this one. I click on install or Install gets Activate. Awesome! Now I don’t need the other themes anymore. A theme is actually a layout of a website.
So if I take a look at the website now, the content stays the same, but the layout looks different. So if I would choose 2020 and I activate it, now it’s active. I refresh the page — the same title, My Word press– but a different look and feel. So with the Astra theme, you have seen that you can create so many beautiful websites. So I choose Astra theme and since we use Astra theme, we don’t need the other things anymore. I prefer to keep things clean in my website and delete things I do not use. So this one, delete; and this one, delete. Ok. So, then I go to plugins add new and I search here for Elementor. Over 4 million installations, it’s crazy. I click on Install Now, and I activate it. Awesome. Now, I go to the dashboard. I collapse this. What you see over here, thank you for installing Astra. You can go to the starter templates, or if you don’t see this I remove it, you can go to appearance Astra options and then over here it says Install Importer Plugin. So I click over here, so now we import the starter template — importer has been activated right now. Awesome. Now we can select our page builder. I select Elementor. Ok, and what I want to do now, I select all and I want to select the free ones and then we can navigate again, and if I take a look over here, and I see something I like, take a deeper look into the website. What I will do now, I will grab my favorite websites and walk through them with you. So here’s the first one, it’s a one-page website.
So if I click on about me, you scroll down and then you can tell us something about yourself. You can change the title, change the colors, change the images — you can add other stuff. I will talk about that. So I go to the gallery. So what you can do now, you can import this website and then change everything and save a lot of time. So if you’re like hey, I’m a one-man show, or I want to have a portfolio website where I talk about myself – what I offer and stuff- then, this can be a nice option for you. The next one, if you’re a dentist this can be a nice choice for you. A nice call to action, you can call them. Another nice one — you can change the colors, give it a total different look and feel. Some testimonials. I like this one. I like colors, the style, how it is set up. Again testimonials, who I work for or my clients, request a quote — looks really beautiful. Or something like this, all with free themes, free plugins, and free page builders — everything is free and it looks amazing. Maybe you’re a barber; you can import this website, change the images, and change the text. Here you can list your prices. I like this one very much. It just looks beautiful. You can go to a different page, to the portfolio page — navigate through the images. So if you see something you like, you can import it. Here is a beautiful restaurant website with the menu, beautiful images. I’m getting hungry all of a sudden. I like it. Next one, this is the one I love the most personally and that’s why I’m going to use this one. I will show you how you can change everything from green to different color. Change the logo; change the background image; change the look and feel, l but you have a beautiful template to start with and save a lot of time. Then there’s this one — instruction and makeup studio template, and again you don’t have to be a makeup artist. You can also change all the information so it becomes a web design agency website. So as I told you, I will use this one. Green Gardner and its called gardener. So I go to my website. I search for “gardener”, this one. So what I can do now, I can click over here, I can import one page — this one has five pages or I can import the complete website. Import complete site. I click over here. You can delete previously imported site if you have one. I want to import the customizer settings from the Astra theme, all the widgets, required plugins and import the content and then we can change the content. I click on import. Meanwhile, I want to close all these websites and now it’s importing the website. This can take a few minutes. It says, “Hurrah, the website imported successfully.” Visit the site and this is our website. So look at this — this is the website we have and we can change a lot of things. So the question is, what kind of style do you want to give your website? Well, what I prefer to do. I go to Google and I search for branding colors. Maybe you have branding colors already that’s perfect. I go to the first image and here you can get an ID, optimism, yellowish, friendly orange, excitement, red, creative is purple, blue, green and gray. You see examples, so you can choose colors over here. You can also search for – let me go to Google- “random color generator.” Refresh. It’s one color I prefer more colors. I don’t like this. Colors.co. that’s what I’m talking about. Start the generator. Generate. So in that way, you can change things. You can also search for a random gradient generator. Yeah, this is what I like. Next one; actually, I liked it, the first one. So I like this. So you can grab this color, grab this color and import it into your website. Well, I have my colors already. What you can do, if you want to you can follow along in my tutorial with the images I use and with the colors I use. If you want to do that then go to FerdyKorp.com, hit enter, then go to tutorials – how to make a website for free. Scroll down; download the images I use in the tutorial. Click over here and they will be downloaded. When they are finished, I unzip them by clicking on them, and I drag it to the desktop. I close this website and this one and this one. I close this. Now, I want to give my website a title. So I go to settings over here, General and I say “Photography | Film | Web design — Ferdy Korp Media: We bring your company to the next level. In a few words explain what this site is all about. I decided to say this. You don’t see this in the website but Google sees it. So let me make this secure again. I don’t know why it’s not secure. I need to log in again and now the website is secure. Also the front end, I don’t know, it will take a time before it is but everything is fine. So what I want to do now? I want to change the colors in the website. Right now it’s greenish; I want to change it to my colors. How can I do that? I click on customize, then I go to global colors base colors and there are two green colors. I want to change those. So I go to my folder images tutorial which we just downloaded. I go to Miscellaneous FK Media and then I go to colors. This is my first color, I grab it and I want to paste it here and the second one also pastes it over here. Now you see, this becomes a different color. I go back, I go back and then I go to the buttons, to the color of the buttons. Right now, the background is green. I paste my color and I want to have a hover color. So I go, again, over here. Let’s go with the second color, copy, yes publish to save it.
Now when we hover over the button, it becomes that color. I have a logo in my images, over here. I have a few, I will upload them now. How can you do that? I go back. I go back to the main settings and then I go to header site identity and then I can change the logo over here. I click on upload files select files, then I go to Images Tutorial Folder 6 FK Media; let me see, FK media logo. Click on open. If you want to create a logo yourself, go to YouTube search for “Ferdy Korpershoek” or “Ferdy make logo” and then let me see, here is the one – how to create a logo in 2020 in 5 minutes. I will grab this one, remove the dash, copy the title and paste it in the alt text, that’s good for the search results. Then I click on select skip cropping and I want to change the logo upload files select files; I want to go for the retina one. This is a white logo, this one is in color, open and I prefer this one. CMD + C, CMD + V; select skip the cropping. Perfect. It can be a bit bigger. I like it. Then I want to do something else. I want to go back. Go back. If I go to apple.com; …apple.com [kid: Apple], what I see is a beautiful website. And if I click on iPhone and I want to go back to the home page, there’s the home page over here, but you can click on the logo. So that’s what I also want to do. I want to get rid of the home page in the menu. So I can go over here to menus primary and then here at the home, I click on the arrow down. I scroll down and I click on remove, and now it is gone. What I also like to do, I click on about. I open it and I change the navigation label to about with capitals. I like to work with capitals in the header. Services, gallery and contact. Publish. Okay. That’s it. I click on the X and now this is how our header looks — much better already. So now I want to change colors in the website. These are green; I want to make them purple. How can I do that? Let me show you. We are going to edit the website with Elementor. So here’s the homepage and then over here, I can click on edit with Elementor is my favorite free page builder. If I scroll down all the way, I’ll show you from scratch what you can do with Elementor. Elementor has three parts when it comes to building a website. So if I click on a plus over here, I can create a new section. In that section, I can have multiple columns. So if I say two columns, I have one section, then this is the blue area, then there’s the gray area — those are two columns. And in those columns, if I click over here, I can have elements.
So section. Let me show you over here, here’s one section then there are two columns and in those columns, there are elements. So I can drag a header here in the left column. I can adjust it, we’ll talk about it. I go back. Now I can add a video below. I go back. I can drag an image here to the right. I can click on the image. I can show you the logo for instance and below that, I can have more elements and every element has their own settings. So that’s what you can do. Then you can give the section certain styles– all the columns and all the elements. So in that way, let me show you. I can say the background of the section should be green. Okay. But then over here, at the column, I can click and I can go to the style and I can say I want the background to be white. But now you don’t see the green backgrounds. I want to still see the background a little bit. So I go to advanced and add margin, I say, 20 and add padding. I can also say 10. So now the section has a background style, but the background of the column is overlapping the section style. Then over here, I can go to the heading. I can go too advanced & background chooses a color and I can say green again and then here at advanced I can increase the margin and the padding. So with those three things combined and all the settings you can configure, you have so much freedom to create beautiful websites. Well Astra has done it for us already, but of course, I will talk about how to adjust things; how to create new things. We’re going to create a beautiful website. So having said that, let’s scroll up and I want to change the color. So over here, this is an element. As you see it’s a section with one column this one, and then an element, element, element. I click over here, and then every element has three parts.
The content like the text or with a button. The image, the phone number, and then the second tab are the style. Here we can configure the colors and stuff and then advanced: the Advanced Settings — motion effects, background border, positioning, responsive, custom CSS. So I go to content and I leave the text as it is, right now, I want to focus on the colors. So I click on style, I want to click on the color and I want to show my color which is this one. Since I like this color, I can click on the plus. So now I have added this new color. If I don’t want to use these colors, I can drag them down like that, and since I don’t need those, I want to have black and white. This one — I don’t need it. I don’t need it. I don’t need it. So what I want to do, I want to grab my other colors, second one, copy, paste, click on the plus and then the third color, copy, paste, click on the plus. So those three colors are of my style. I click on this color and now it looks like that. Then I can go to the button, click over here. Then I go to Advanced, background and I change it to this one. But I can also make it a bit transparent like that. Then I want to go to the style of the text. Let me see — this is the image. I go down to content and then there’s the title. I change the color to white. Okay, perfect. Update. We’ll talk about the background image in a minute. Now I want to go to the rest of the website. I want to change this color, but what seems to be the case, it is an image. So how can I change this? I need to save it; change it, no. With Elementor, you don’t have to do that. You can go to the style, scroll down to the CSS filter. Click on it and now and Hue. You can drag it around and the color changes. So let me see. I want it to be the color — this color. I think it matches. Maybe a little bit darker. I can increase the saturation, decrease it, bring it back to 100 and if I think I’ll like it, I can say right mouse click – copy, right mouse click – paste style. Paste style. Here, I should not do it because if I do this, it looks the other way around. So CMD + Z. What I do, I click over here. I go to the CSS filter: 261. I copy the code and the number and here I go to Style CSS Hue, and paste it again. Right mouse click – copy, paste style and paste style. Maybe, you have eight services that you want to show. Right now, there are six. If you want to duplicate it, you can say, right mouse click – duplicate. But a better way (CMD + Z), if you hover over here, you can duplicate it. How can you do that? You go over here, you go to the preferences and there you can enable the editing handles. So right now, I hover over it and now there are two more options. Also over here, you can duplicate it, so now there are four columns. I can close it. I can create a new column — an empty one, and also here I can remove this. If I want to go back to the history, removed, I click over here and it is back. So I can duplicate it and give it a new title, change the text. So that’s how you can play around. So over here, let me see. How can I fix this background — this greenbackground? I click over here. I go to style and then I go to the background overlay, here you see an image but over the image is an overlay which is the color green. I click on it, add the color, I want to make it this color and I think it’s perfect. I can make it less transparent or do things with it — opacity change it here. But I think it’s perfect. So we can go through the website over here, again style CSS filter 261, right mouse click – copy, paste style, paste style. Okay. If I want to have three options over here, I can do this. Hover over here, close it, now there are three and they automatically adjust, and that’s how great it is to work with Elementor. Go to colors over here, style, grab this color, copy, paste style, paste style and paste style. What our clients say? Beautiful. If I want to change an image, I can click over here, I can go to upload files select files, I go to my Dropbox, there’s an image of myself, this one. It’s really big, maybe, let me see, let’s use this one. Open it Ferdy Korpershoek 2020, copy, paste. Insert the media and that’s… wow! Beautiful. It’s the most beautiful thing I’ve seen so far in this website. Even though he’s also really special of course and this person… okay! Let’s continue. How I became a male model… international. Okay. You can also change the text here. So now we see the footer and I want to change the footer but I cannot do this. So what do I need to do? I need to update everything I’ve changed. So now it’s updated. What I prefer to do, I click on the eye over here so I can preview the changes. The great things are when you click on the eye and decide to change something else, so Q A, and an I click on update. Now I don’t need to refresh this. It will automatically be refreshed. So now when I scroll down, it says QA – that show great it is to work with Elementor. Now, I can hover over edit with Elementor and then I can select the footer and that’s where we can change the footer settings. So what I want to do over here? There’s an image box. I change the logo. I want to use a white logo, so I click on upload files, select files and then I go to the desktop images tutorials. Let’s create a retina one. You don’t see it because it’s white. Open. Optimize it — copy, paste, insert media. Looks beautiful! You can change the text over here. The color is already purple. We have a gallery over here. And here I want to go to style, to the icon and change the color of everything to this one. Same goes over here. Of course, can enter your links. So let me do that. First style, purple then over here Facebook, https://facebook.com/ferdykorpershoek. If you don’t have twitter, close it, Google does not exist anymore. Instagram, https://instagram.com/ferdykorpershoek. I am trying to get a thousand followers without having one post — 555, so far so good. And then I go like crazy, posting a lot of stuff. So now this is in style. I see this blue color over here, I can also change it. Like that. It’s really simple. The current year and the current site title. Then here, I want to get rid of this. I can also remove this one. Click over here and bring this to the center. Then there’s this green bar. How can I fix that? Let me see. Style border and then there’s a border of two pixels in this color. So I make it purple and now if we take a look at the results. I only see the footer, but if I remove all this stuff and I hit enter, now the website is more in our style. So let me show you something else. I open the about page in the new tab and over here, I click on Edit with Elementor. And over here, I click on Edit with Elementor. I go to this page. I scroll down. I say right mouse click, copy. I go to the about page — a different page, right mouse click, paste. So what you see right now, over here, it doesn’t have the lower border and stuff, paste and now it has, I can also say CMD+Z, CMD+Z, CMD+Z and I scroll down even further, and this is already in style. So I say right mouse click, paste the style and paste the style and paste the style. Now, so what I see over here… I forgot something; the lower border should also be in our color. I think style should do it or, advanced border, change it like that; update, right mouse click – copy, paste, paste. Update and update. So you can go through your whole website, change all the colors, here you go to CSS filter – hue 261, copy, paste and paste. So over here it is green and I want this to be the same color as over here. How can I do that? I go over here to the section settings, style and here I see the background, but I cannot change the style of the color. So what I can do? I can remove it over here, then I go to background overlay and there I can use an image. I will search for the same image. I think it’s this one or maybe it was that one or that one. I think it was this one. Insert media and you see it’s really bright, why? Because it shows opacity of 50% so I need to bring this totally up and now I can change this style with CSS filters. So Hue: 261, well that’s a little bit light. I go to brightness, make it darker, I want to increase the saturation and since I cannot read the text that well I can blur it more. So in that way you can play around with those settings and the images in the background overlay. So we maintain the same style. I will do it for the rest of the website and then I will be back with you. So I go to the services page and there I will change this background color and all this stuff, and I close all this and I will be back with you when it all is done. While I’m editing the website, I see this area over here, you can create a beautiful overlay and I will show you how. I click over here to go to the section settings, I go to style and here you see this image over here. I can close this and now I can go to the background overlay and I can choose a gradient, and I have a gradient over here. I choose the first color, this one and a second color – the purple one. Now I can change the location, bring it up, bring it down. I like to keep it in the center. I can change the type from linear to radial. I never use that and I like to change the angle to 90. If I increase the opacity it looks like that. I can decrease it or I can leave it and then go to the blend mode, and say multiply, screen, overlay, darken, lighten, color dodge, saturation, color and luminosity. So I like to keep it at multiply and what I also can do is change the opacity. So this is the normal image and this is with our style. Well, maybe I prefer normal and then I decrease the opacity. So we maintain the style of our website, those colors and we still can see the background image. Over here, we can do the same thing, go to style close it, go to background overlay, gradient or we choose one color. That looks weird and then I can change the blend mode. See if something is fitting, you can also combine the blend modes. So I can say overlay, I like the effect but I don’t like the color, then I go to CSS filters. I go to Hue; I don’t see what I want to see. So it’s not working. I bring it back and then I can change this to normal, or I can just remove the background image. As long as the styling on your website is consistent. You know what? Background overlay, gradient 90 and opacity can be 1. Awesome. Update and I will continue with editing the website.
So here I am at the home page — everything now it’s in the same style and I want to change the hero. The hero is the most important part of your website. So what I want to do I want to edit it withElementor and by doing this I can show you more about how to work with Elementor, and after that we’re going to work with all the templates and adjust them. So in that way you can save a lot of time. So the first thing I want to do, I want to change the background because I’m not talking about gardens. My website is about branding, about marketing, and helping other people to be found better on the internet. So I’m based in Amsterdam, so I go to pixabay.com. Here you can get tons of free images and I search for Amsterdam. Beautiful images. I think the first one is perfect. So I click over here and I click on free download in this resolution; download; I’m not a robot and I click on download. There it goes. I click over here I want to rename it. I open it in a finder and I say Web Design Amsterdam Film Photography. Okay, now I go to Elementor. I click over here, I go to the style and here I see the background and I choose a different image. So I click over here, I click on upload files, select files and I go to the downloads and there it is. I open it. It’s a big file; we’re going to make it smaller. Open. Now, what I want to do now. Instead of inserting it, I want to edit the image. So I click over here on that image and now I want to change it to 16×9 aspect ratio. So over here I say 16×9; tap. Then I drag over here and I drag it to the full width of the image. Now I can select the part I want to crop. So I think this is a beautiful part, then I click on crop and it will do. It will crop it to an aspect ratio of 16x9and since the width of the image is 1920, the height will now be 1080. I like to have this resolution for all my images on my website. Now I need to save it and right now it’s almost700 kilobytes and if I click on save, and I need to go back. So I go to the library, and I click on it. Now it’s normal. What I need to do now? I need to close this, open it in a new tab, close this and click on edit with Elementor. Again we need to load elementor again in order to see the new image. I can get rid of this. I click over here and I go to the style, click over here and I grab this image like that. Okay. I want to give it the style of our website. How can we do that? I’ve shown you before. Go to the background overlay. I choose a gradient, the first color is this one, and the second one is this one. I want to change the angle to 90, opacity let’s say like this. Then I can go to the blend modes and what I prefer is just opacity 2.5. I want to make it darker, so I go to color. The first color, I drag it down — the second color, I also drag it down and then I can maybe increase the opacity so it becomes a bit darker. Maybe this one, a little bit lighter adds this color, bring it down a bit, okay. Now I want to change this text. I want to get rid of this area; I don’t need it. Actually, I want to get rid of everything. So I hover over here; close it and close it. Then I go over here to all the elements and I drag a heading in it. I would like to have a slogan that says let us tell your story. I want to do a few things with it. I want to bring it to the center, go to the style, change the text color to white, change the typography to uppercase and make it bigger. Something likes that. Okay. Over here, I hover, I click over here and here I want to say, “Branding,” or I could say Photography | Film | Web design, but I say “branding, marketing and web development.” Okay. I go to style, click over here to make it smaller and I want to align the text above. Arrow down, like that. Okay. What I like to do, go over here. Go to dividers, bring this in between, bring it to the center, and make it shorter like that. You can align it or you can bring it more to the center like that. I like to align it, then I go to style color, make it white and then I go over here to the settings of the header. Advanced, uncheck this area and at the bottom I want to decrease area, – 25. Then over here I do the same. Click over here. Go too advanced; uncheck the margin and at the top I want to say, – 25. Then I click over here and I want to add a button. So I drag it over here, below and now it’s on top so what I can do now I can go to the Navigator, I can drag it here below. I can give each section a name. So I can double click over here, I can call this the “hero” and if I want to select something, I can do it over here. So if I cannot find it somewhere, somehow, I can find it over here by clicking here. I can also stick it to the right and close it. So over here, I click on the elements, I bring it to the center and I can also make it full width and I would like to say, get in touch. Then I want to link it to the contact page. So over here, I search for contact. There it is and I can open it in the same window. Okay, then I goes to the style. When people hover over it, it becomes the other color. I think it’s perfect. I can also have an animation. When people hover over it, hover animation. Shrink. If are update it and I take a look, it looks like that. I want to do one more thing over here and then I will show you how we can make use of templates and save a lot of time. Over here, this element, I want to go to advanced motion effects fade it in from the left like that. I can also make it slow or do it after one second. Update heck this, there it goes. Let’s tell your story, branding marketing and web development. Get in touch and when I click there, I go to the contact page. I go back. I want to show three more things before we take it to the next level. The first one I go to the back end, I click on the section, style, background. I can click over here. What you see I have free images from pixabay. This is a link that came with the Astra starter site, so if I search here for Amsterdam, you can access the same images but then quicker. The second one — you can also add a video so over here, at the style, of the section I can change it to video and I can add a link. So if I would search for go pro hero 8, it always has really nice videos from Go Pro itself. Copy the link address, and paste it over here. If you don’t want to see the logo, you can say starting time 5 and start with this immediately. And there’s still the background overlay as you see. So I can increase it now like that. Then third one, I bring this back by the way, remove this bringing back to A – an image. The third one is responsive mode. Right now, it looks good but if you go to a tablet, does it still look good – yes. If you go to a mobile, does it still look good? No. I click over here; I go to style, “let us tell your story.” And then over here, it looks weird. So what I can do, I can duplicate it and then I click over here and go to advanced, scroll down and then the responsive, if I say you can hire us on a tablet and on a mobile and on this one I say it the other way around. Advanced responsive, height is on a desktop. You know what? Also show it on a tablet or hiding on tablet and then over here turn it off. So this area will be hidden from a mobile and this one will only be shown on mobile. So over here, I can go to content and I can say, just like this, after everything and then you have three lines. This will not be seen on a mobile well and then at style, I can change the letter spacing. Update and now when I take a look at the results and I make the site smaller, look what happens. It looks like this. So in that way you can optimize everything in your website and the great thing is when you make use of the pre-made templates, they’re already optimized for every device. And now I want to show you something that is amazing. I will close all this and now ladies and gentlemen, we are going to take things to the next level.
Right now, we have this page over here which is imported and we’ve adjusted a bit, change the colors, change the image over here, but now I will show you a new and better way on how to create a website. So I cleaned up my homepage except for this part and I will show you how I would create this homepage. I click over here then I go to all the free pages and I start looking. I go over here to this area and I like this area. So what can I do now? I also like this. I can import the template. I don’t need this area; I want to have this area and this one, and I do not want to have this one. So what I can say over here, “Hi, we are FerdyKorp.” And then I want to change these images, what I can do, I can remove them, and I click over here and I want to have an image in the background. Then I go to Pixabay pixabay.com and I search for office. I like this image. I will keep it for later; free download; download; I am not a robot. Where’s the bus? Downloads. The first one, I go back to office, I like this one, free download, downloads. I’m not done. Download. Okay, back to the office and this one. Free download. Motor cycles. Okay. The best thing is that you rename them. I will not do it for the sake of the tutorial. I click over here, go to style, I click over here; I drag it here, the second one. I insert the media. Now I can cover it, or I can go to center, center change the image or, I can go to custom. So I can drag it around until I think— yes, this is what I like. Okay. Then there’s the second image. I want to get rid of it. Click over here. Style Image, this one. Insert. I go to default or custom I mean. Somebody’s working and I want to show that. Over here, I can say advanced border: 2. Solid. 2 again. Okay. I just want a color like that. I’m not Lucy Anderson. I can copy this or duplicate it, and I can drag it here below. Bring it to the left. Can I touch? Okay. The second areas, I go to the background, under the section, style, change the background to a gradient. You know how I like my gradients by now. Change it to linear and 90. I can change this text and all the adjustments. I can make them here. Under content, 89 or 98. Okay so far so good. Then I can click over here again and I want to show something about my services. Or how I like to work. So when I see something I think I like, I can click over here. I like something like this or this. So I click over here and I like this. So I click on imports, I don’t need this. I like this. I don’t like this. I like this. Okay. So now I can change this text. I can change the colors; I can go to the CSS filters and then again, copy, paste. Then this one, we’ve worked with. You can configure the settings over here. What I want to do now, I click on the plus and this time I do not want to create a new or import a new page, but I want to go to blocks. I can filter them by color light or dark and I want to have a dark one since this is a light one and this is a light one. I click over here, blocks, dark and I want to have a quote. Well, there are quite a few. I like this one, single quote, import block. Background & style gradient. And then over here, I want to, let me see, background overlay, its okay. But the background, I want it to be a little bit transparent. So I click on make it black and then make it transparent. Now it is the style of our website and now I can say, when you help other people to get what they want, you can have anything you want. It’s not from Jane, but in this case, at this moment, I want to leave it as it is. Okay. Like that. Like that. Like that. Okay. One more area click over here. Let me see. I want to have an image and a text, really simple. Maybe like this or this. I click over here. It overlaps a bit, I like that. Yes let’s do it. I click on the import template. Okay. I don’t need this, but I like this one. Everything below it, I want to remove it. Okay, it’s overlapping a bit. I like that and then the image; I want to change it over here. I have this one like a group meeting, and the background, of course. You can also drag this to the right. We love to take your business to the next level. We are a young team with people that blah, blah, blah… Read more or right-mouse-click copy, paste. So if I take a look at this website, we’ve created it in a few minutes. Let us tell your story, animation. If I click here I go to the contact page. We are Ferdy Korp – a few images about our office. You can have a text about your office. Get in touch. Call to action to the contact page. You can say things about your company, what you’ve accomplished. How can we help you? You can show your benefits of working with you. Create a design, development and all that stuff. A beautiful quote. People we’ve worked for and then we can talk a bit more about ourselves, or maybe what I like to do. Over here, create some more space. Advanced increase the margin here and at the bottom, and then here is our footer area. So that’s what you can do with every page and when you’ve done that then you can decide to do a few other things. If I go to the back end, you can go to pages add new. You can create a blog page, blog publish. Okay. Then I click over here. I click on add new and I can create a portfolio page if you want to create that for your website. If you want to implement it into your menu, click over here, go to appearance menus and right now, this is our menu. You can see the menu over here and then I can add a portfolio and blog. Add it to the menu. Let’s post it over here, or place it over here. I click over here. Call this blog and here portfolio, save it and now if you take a look over here, here’s the blog page and portfolio page. If you want to know how to create a blog post, all that stuff — you can go to YouTube, “how to create a blog” So a post on how to create a blog into your WordPress website and I will show you, step by step, how you can do that with free tools. Then a portfolio, “how to create a portfolio “and then there’s this page, tutorial where I’ll show you how to create a beautiful portfolio with Elementor which you are already using. In that way, you can create a beautiful website. There are so much more tutorials. If you want to know SEO, “NEIL PATEL “. If you want to optimize your website, I have a tutorial that’s less than an hour and you can READ it for free on how to optimize your website It’s better than Yoast SEO in my opinion. A lot of likes, so people seem to like it. If you’ll to take it to the next level you can go with Astra agency so that’s it. Thank you so much for reading this post, I hope you learned a ton of stuff you’re able now to create a beautiful website. Good luck with creating your website or maybe you finished it already when you’re READING this; good luck with your business or what you’re going to do with your website.