How To Make A WordPress Website With Elementor Pro 2024

Do you want to learn how to make your own website? If that's the case, you're at the right place. My name is Ferdy and in this tutorial, I will show you step by step how you can create an amazing professional website using WordPress and Elementor Pro. Let me show you what we will cover in this tutorial. I'll show you how to get your own.com domain name for free and then we'll install WordPress. WordPress is the most powerful website builder on the web. It powers more than 43% of the websites in the world and it is free. Then we'll create this website from scratch using Elementor Pro. Elementor Pro is a drag and drop page builder that makes it easier than ever before to create a website. It is a matter of creating a new area, place some elements in it and style them. And I will show you step by step how you can do that. And if you want to change something in your website just click on it and change it. Want to change this image click over here choose the image and there you go that's how easy it is. Throughout this tutorial I will show you how to create amazing pages like these using Elementor Pro. I will not just show you which buttons to push, no we'll talk about so much more than that. We'll talk about the branding of your website, which colors and which fonts you should use on your website. And if you don't have a logo yet, I will show you how to create one yourself using a free tool or outsource it so that you can focus on building your website. And if you just want to follow along and create the exact same website I'm about to create in this tutorial, I will give you all the resources for free. The logos, colors, templates, everything you're about to see in this tutorial, I will give it to you. All to help you and of course in the hope and expectation that maybe you will consider to like this video. I will show you how to create this header from scratch with a transparent area and a top header. And when we scroll down, we can make sure that we display another header. We will make use of a simple dropdown menu, but you can also build mega menus in Elementor Pro. And of course, I will show you how. In Elementor Pro, you can assign any area in your website to any place. So I decided to show this header only on the homepage and on all archive pages. But on all the other pages I show a different header with another logo, white background and a purple background in the top header. I will show you step by step how you can create this homepage but with the principles I teach you in this tutorial you will be able to create a website like this. Or like this. I will show you how to work with animations in your website and we can make our website more responsive by creating hovers like these. And this can be applied to any area in your website. We will use a lot of different Elementor Pro elements and learn a lot about how to style those elements. So they can go from something like this to something like this. And of course we'll make sure that everything we create in Elementor Pro will be optimized for all devices. We will create an opt-in area to Elementor Pro so you can give something away for free in exchange for an email address so you can build an email list and reach more people. And just like the header we'll also create a footer that can be displayed on every single page, unless you decide otherwise. When it comes to SEO I will show you how to create the right title for your website and place the right information on the right place on your website. And if you want to you can learn how to write blog posts so you can get more visitors to the organic search results. And with Elementor Pro we can create single post templates and in this template you can place what you want, where you want and style it the way you want. I will also show you how to create a portfolio using Elementor Pro and we will talk about custom post types and advanced custom fields. By default a WordPress installation comes with pages and posts but with custom post types you can add anything below that. Portfolio items, team members, advertisements, tutorials, whatever you have in mind. By default, a custom post type will look like this. You will have a title and a place where you can add some content. But with advanced custom fields, you can add more fields to any post type, like a date, address, square meters, color. In my case, with tutorials, I can add a URL field, a time field, a featured field that will show the visitors which tools I use in my tutorials. And when you're filling all this information on your website, you can use Elementor Pro to display all this information in a beautiful way. And in that way, all your custom post types, in my case tutorials, will be displayed in the same way. What else will we cover? Backgrounds, background overlays, creating pop-ups based on the behavior of people on your website, using ChatGPT to create custom CSS codes, glassmorphism, display conditions, the loop builder, scrolling effects, mouse effects, custom 404 pages, pre-made templates with the Elementor Pro library, creating forms, copying and pasting, and many ways to make great designs and work more efficiently. When you follow all the steps in this tutorial, you will not only be able to create an amazing website, you will also be able to start making websites for others and generate an extra source of income. Tons of people already let me know that thanks to my tutorials they are doing this now for a living. Making websites and you can be the next. In the description of this video I have timestamps, so if you want to go to a certain part in the tutorial, you can click on one of those timestamps and you go directly to that part of the tutorial. When I go to fast-forward you can go to the settings here at YouTube, playback speed, slow down the speed of this tutorial. If you want to go back a few seconds in the video just hit the left arrow on your keyboard and you will go back 5 seconds in the video. If you can appreciate that I made this video for free then please help me out by liking this video. If you want to learn more about making websites that can generate you money then please subscribe to this YouTube channel. Now, let me show you the three steps we will cover in this tutorial. So first, you get your free domain name and we will get web hosting. What is a domain name? A domain name is the address of your website. Web hosting is a special computer that's turned on 24-7 that contains all your files, all your emails, all your images, all the content on your website. So with your free domain name and web hosting, you are visible on the internet. Then we will install WordPress and WordPress is completely free. It's the best tool to create a website without having to know anything about coding because WordPress is doing all the hard stuff for you. And then the third thing you'll create your website using Elementor Pro and for the website we will make people can charge thousands of dollars but I will show you for free how you can do it yourself. If you already have a domain and web hosting you can do two things. You can migrate your current website to this amazing web hosting platform. I have a tutorial here that can show you step by step how you can do it. If you already have installed WordPress you can skip step 2 and go directly to step 3 and I will show you right now where you need to go in the tutorial in order to follow along from that point on. So ladies and gentlemen let's get started. If you already have a domain name and web hosting you can skip this part. If you don't have a domain name and web hosting you can go to webhosting41.com, hit enter. Then we click here to go to Hostinger. Three years I have been searching for the best web hosting company that's affordable, and then I came across Hostinger. I'm already using it for five years and I love it. And I'm not the only one. If you take a look at the reviews on Trustpilot, you see that all people are also really excited about Hostinger. And if you take a look at the Google Trends, Hostinger is taking over the web hosting industry. They're getting more and more popular. Why? Because their web hosting quality is top notch and they are affordable. So if you want to get a free domain name and web hosting here at Hostinger, you can click on claim deal, the scroll down and then we see three plans. The premium plan, the business plan, the cloud starter plan. Let's start with the premium plan. Everything you need to create your website. If you're on a budget, this is the best plan for you. What does it contain? You have standard performance. What does it mean? I've tested everything like crazy. As long as you don't create 100 websites on this plan, you will be fine. The performance will be fast. This is a performance test of a heavy website that I've created using the premium plan. The performance will be a bit more challenging when you will create 80 websites on this plan. But if you only want to create one to three websites, everything will be blazing fast. You have 100 gigabyte of SSD storage, which is more than enough. Weekly backups, free SSL, unlimited bandwidth so you can have as much visitors as you want. Free email account, you get a free domain. And to make it even better, for every plan you have, there will be free domain privacy. What is domain privacy? That all your details, your phone number, your email will be hidden. So people on the internet cannot see all your details when they look up your domain information. And with Hostinger, this is free. And with other web hosting companies, this can cost up to $20 per year. But it's also really nice if you somehow don't like the service. There is a 30-day money-back guarantee. No questions asked. So there is no risk at all to get started. So if you want to go for the budget plan, you can click on Add to Cart. And there's a period you can choose. The longer the period you choose, the more discounts you get. So here you see for 48 months, you get three months for free and you pay $2.99 per month for the next four years. So if you scroll down, that's a total of $173. But let me make this even better. If you click over here, you fill in 30, you click on apply, you get 10% extra discount. If you're like, okay, but I want to go for a shorter period, you can go for 12 months, then the price increases a bit per month. Then if you scroll down, look at this, you just pay $41.68. So for $41.68, you can get started with a free domain name in your own web hosting plan. Now let's talk about the business plan, which is even better. Here's the most popular one, the business plan. Look at this. You get increased performance up to five times as fast. You get 200 gigabyte, more than enough, but it is NVMe storage. So basically NVMe servers make your websites up to five times faster than SSD servers. So you can have 20, 30, 50, 80 websites on this plan and your websites will still be fast. There are daily backups instead of weekly backups. And you have free CDN. Free CDN makes your website fast on every single place in the world. If we scroll down, what you will see over here, we have a WordPress staging tool, object cache for WordPress, which will make your website even faster. You can create a backup on demand. And this is also something really big. You have the WordPress AI tools. Those AI tools will help you in building your website. They will give you advice on what you could do to make a better website. And the great thing is that it's already really good, but it will only become better in the future. That's included in the business plan. So if you want to get this plan, you click on add to cart. Then there's the same overview, choose a period. And when we scroll down, we can fill in 30, apply. It paid $208 for four years. If you don't want to go for the long run, but you want to go for 12 months, you pay a bit more, but then the total amount will be $65.21. So it's up to you to choose which plan you want to have and which period you want to choose. When you know what you want, I will go for 12 months. You can create your account. So I will fill in my email address over here. I create a password or you can sign up with Google or Facebook and then you can pay with credit card, PayPal, Google Pay, AliPay and CoinGate but there are also local payment methods. So if you come from a certain country, from the Netherlands or from India, there are local payment methods. That's also what I love about Hostinger, that everybody can pay with their favorite payment method. So that makes it easier for you to make the payment. So you can choose over here how you want to pay. I want to pay with credit card and then you can fill in your details over here but you don't have to do that over here. You can also do that later. So I'll leave this empty. You can add your company details. If you have a company, fill in the details over here. And then when you do that, your taxes will be subtracted and you'll pay $53.89. So what I will do now, I will fill in my credit card details and then I click on submit secure payments. And then I want to congratulate you with your free domain and your web hosting plan. And in a few minutes we can choose our free domain name. Awesome. It can be that the hosting or panel is in your language. Click over here. They're adding languages all the time. So if you prefer your own language, you can select over here. I will use English. And then I click on start now over here. Who are you creating a website for? I want to skip all these steps. They want to help us, but I will show you what you need to do. So I click on skip. And also over here, create or migrate a website. I say skip, create an empty website. And then over here, we can claim a free domain name. So over here, we can fill in our domain name. And then here we can fill in our extension. So over here, I can say Ferdinand Korper. And over here, I can select my extension, dot com, or something else. I say.com and then I click on search. It is still available as you see over here. So I click on continue. Now we can fill in our details over here. If you don't have a company you can select personal. If you have a company you can select a company. I have a company so I click on company. Next step and we need to fill in some extra details. So my first name Ferdy, my last name, email my company. So make sure to fill in all these details and your phone number. This is for registering your domain name and the great thing because of domain privacy these details will not be shown to the world. So people cannot call you like hey I'm calling you because I saw online that you have a new domain. We can make a website for you or a logo. You will not get spam thanks to the free domain privacy from Hostinger. I click on finish registration. Now we're registering our domain. We can choose our server location. If you click over here, you can choose one. I want to focus on people from the United States, so I leave it where it is. You can also select another one. If you're focusing on people in Europe, you can select something in Europe. I leave it as it is and then I click on finish setup. And now your WordPress website will be installed on your brand new free domain name. Our website will be made secure which is great and it says well done you are ready. We can view our website and if we click over here this will probably be a website that is a preview of the current website. As you see over here, this is not the real website yet, but we can already get started. So I close this and then I click on the control panel. It says over here that my domain will be accessible in about three minutes. So I prefer to wait instead of working on a domain that's not my real domain. So my advice is that you also wait until your domain is live. And then we can work on our real domain, which we got for free. So I will be back in a few minutes. It's now one minute later. If I refresh the page, the text is gone. So if I click over here, look at this. This is crazy. We see our live domain. It's hosted at Hostinger and it is secure. You can see that by this icon. Connection is secure. How cool! I close this command or control W and now I go to security SSL just to check and it says yes it is active. So I go back to the dashboard and now I want to go to the auto installer and then I select WordPress. My website title is My WordPress website. We'll talk about it later. The administrator email, I want to use another one. My username, I want to use this one and my password and then over here I click on next. We get the most recent version of WordPress. We can change the language. So if you want to create a website in a different language, you can change it over here and all the other settings are great. So I click on install. Now we can click on admin panel and that will bring us to our website. Look at this, our live website. We are live. Everybody that goes to this domain at this moment will see our website. So what you see over here is the backend of WordPress. This is where we can adjust our website. If I click over here, I see the front end of my website. This is what people will see when they enter our website and it looks okay, but of course, we're gonna make it look so much better. So by default, this will be installed on your website. It can be that it looks a little bit different. And because we are logged in, we see this bar over here. Other people that are not logged in, they don't see this bar. With this bar, we can navigate from the front end to the back end by clicking here. So now I want to close the other two tabs. This is the back end of our website. This is the front end. On the back end of our website, we can adjust our website. We can create blog posts. We can add videos, images, PDFs. We can create the homepage, the contact page, the about us page. We can moderate comments when people have a comment on a blog post or a product we have. We can change the look and feel of our website with themes. We can add extra functionalities to our website. We can add other users that can do things for us on our website. There are WordPress tools and there are settings. So congratulations, you're live now. I like to work in a cleaned up environment, a tidy space, and the same is with WordPress. When you install WordPress, it comes with a few plugins and a few configurations I don't like. So let me show you how you can clean up your website and let's configure a few important settings. Now I want to configure our website in a way that we can work more efficiently. How can we do that? Well, the first thing, I want to dismiss this message. Then I want to go to the screen options and uncheck everything. So the overview of our dashboard will be clean. Of course, afterwards I want to install Google Analytics, so I see an overview of the visitors of my website, and if I have a webshop, I want to see the amount of sales. For now, I want to leave it empty. Then I want to go to the website, to the front end. I search for my blog post. There's one blog post that will come with every WordPress installation, and in this case, it is here. Hello world. If I click on it, it says my domain, forward slash index dot PHP, all that stuff. I want it to look better. So I go to the back end, to settings, permalinks. There I want to change the custom structure to post name. So I'll see my domain dot com or dot whatever, forward slash, and then the name of the posts. So I click on save the changes. Now I go to my website. I scroll down. I click over here. Now as you see, it just says forward slash hello world, but so much better. Then I go over here, howdy ferdykorp. I click on edit profile. I want to scroll down, I want to fill in my first name, last name, and then change the display in name publicity to Ferdy Korpshoek and now it says howdy Ferdy Korpshoek. If you want to have an image like this, let me save it first, update my profile, I scroll down, you can change or create your profile picture on Gravatar, so you need to open this link. Then you can sign up, leave your email address which should be the same as on your website, and upload an image that will be displayed over here and over here. Okay, over here at the admin color scheme we can change the look and feel of the backend, the colors. So I can click over here, it will be light, modern, blue, ocean, etc. You can choose something you prefer and I prefer the default one. Let's go to posts. I want to select all the posts even though there's only one and I click on build actions, move to the trash, apply and add the trash onto, empty the trash. Then I want to go to plugins, select all plugins, bulk actions, deactivate, apply, select again, bulk actions, delete. I want to start from scratch with no plugins. Of course we can add plugins later, but right now I want to start with nothing. Now if I go to my dashboard, it looks so much cleaner already. Then I want to go to the settings, general, and make sure that over here in my WordPress URL it says HTTPS and not HTTP. If there's no S, you can add it over here, and also over here, and scroll down and save the changes. If you need to change it, you need to log in again, go back to settings, general, and I scroll down. You can change the site language. You can change the time zone. If I say I'm from the Netherlands, so if I focus on people from the Netherlands, I can just say AMS Amsterdam. I search the city that is in my time zone and then automatically everything will be synced to the right time zone. And there's the date format. I like to prefer the upper one. You can change it to another one or have a custom one. The time format, I like to use PM in capitals. My week starts on Monday, so I can save the changes. Right now, we're gonna talk about a really important topic, the site title, the title of your website. Don't say, hey, welcome on my website as a title of your website. Let me show you how you can come up with a great site title. Never say in your site title, welcome to this website, because people do not search for welcome to this website when they want to find your website. So what I will do, always use keywords you want to be found on in your site title, preferably at the beginning, and after that the name of your company. So if I say CMD or CTRL T, I go to a new tab and I search for Web Design Agency London. I skip the sponsored stuff. So here's the first organic result. What do you see? Web Design Agency. So when I search for a Web Design Agency, I find this page on top, Web Design London, Web Design. The next one, Web Designers London, Web Design Agency, Web Design London, Web Design Agency London. Nowhere it says, welcome to this website or the name of the company. It's all web design agency. So if I have a web design agency, what I will say is, Web Design Agency, and then where I live Amsterdam and then I can say Ferdinand Corporate Agency something like that. Let's take another example. I'm searching for a plumber in Phoenix, plumber. Again go to the organic search results plumber Phoenix. So that's it the keyword you want to be found on, I want to be found on web design agency, web design agency, Amsterdam and then the name of my company Ferdinand Corporate. Then there's the tagline, in a few words explain what this site is about. So I can say we create highly converting websites using the best tools. It's not even necessary. We create highly converting websites. I scroll down, I save the changes and what we will see when I go to the home page, it says Web Design Agency Amsterdam. So we have configured WordPress to our wishes and now we can get started creating our website. I want to make the website a bit more personal. I don't want to use my last name over here. So I go to edit profile and I select display name publicity S30. I want to get rid of it, but not use it on the internet as much as possible. Because I bought Ferdy.com. Because my last name is a little bit hard to pronounce. Corpus hook. We have installed and configured WordPress. Now we can work with themes and with page builders. What are those? A theme decides the look and feel of your website. For instance, the header of your website, the footer of your website, how the blog posts are displayed. A page builder decides how the content of your website is displayed. And there's also a third option that is a website builder that includes everything. It will create your header, your footer, your content, your blog post layout, everything. Everything can be made with a website builder. So let's take a look at that. So I'm here at my website. It says Web Design Agency Amsterdam Ferdinand Corporate. And then there's this text, there's this image and this text. It has all to do with the theme we use. What is a theme? A theme decides the look and feel of your website. WordPress works with WordPress themes. So if I go to the backend, I go to appearance, themes, there are a few themes already on my website and this one is activated right now, 2024. If I would select 2023, so I activate another theme. Now, the content on my website is the same, still the title, but there's a different look and feel, a different style. And everything has their own functionalities and their own styles. So one more, go to the backend, themes, check this one, different style. So you can go to themes also here, add a new theme and then search for popular themes, Astra, Hello Elementor and you see they all come with different styles. But there are also page builders. So if I would go to pages, I click on add new page, what I see now, this over here is the WordPress page builder. So if I click on the plus over here, click on browse all, I can add a lot of stuff over here, a heading, a table, a gallery. I can even go to patterns, import all parts over here. So there are also page builders and themes together with page builders help you to create your website. So if I click over here, I don't save this, I go to the website. So a theme decides how this header looks. Also the footer area is created using this theme, but this area in the middle can be filled using content created by the page builder. But besides themes and page builders, there are also website builders and those create everything. They create the header, the footer, the block layout, everything. And that's what we're gonna use in this tutorial. We're gonna make use of Elementor Pro. So which theme should we use? We're gonna use the Hello Elementor theme. It's actually an empty theme because all the settings, all the configurations, everything we're gonna create is gonna be created using Elementor Pro. So let me show you how to get Elementor Pro and how to install the Hello Elementor theme. So let me go back to themes. We will use a theme, it's from Elementor, but it's actually an empty theme. And then with Elementor Pro, we can create everything in our website and that's what we're gonna do. So in order to get Elementor Pro, we go to ferdy.com forward slash Elementor. Hit enter. And you'll be redirected to the Elementor Pro login page. There are four plans. If they look at the essential plan, that's for one website, but it doesn't have all the widgets there are. And it's also missing a few important features we need in this tutorial. So I would go for the advanced plan. It's 99 euros or dollars per year. You can install it on three websites. You have premium support and 82 widgets. And you also have the pop-up builder, custom code and CSS, e-commerce features, and collaborative notes. We're going to use this version to create an amazing website. So if you're ready for that, click on buy now. And then you can continue with Google, Facebook, Apple. I want to continue with email. So I enter my email. And I need to create a password. Then I click on create my account. Now I need to fill in my billing information and my company name. So the taxes will be subtracted. The VAT is 21 euros and now it's 99 euros. So I click on continue. Now I need to choose payment method. I want to use my credit card, so I fill that in over here. Great, and now I can click on pay now. And immediately I get access to Elementor Pro. You can get Elementor AI. I will skip that for now. So I want to download Elementor Pro by clicking here. And there it goes. On my computer I say Command W. So I close this step and then I go to my website and here I go to appearance, themes, add a new theme and before we're gonna import Elementor Pro I need to make use of another theme. It's the hello theme. It comes with Elementor. You can find it over here or you search for hello Elementor and there it is. I click on install, activate, then I can also install the free version of Elementor. So I click on install Elementor. I activate the plugin. I want to click on the X because I'm going to show you how you can set up everything yourself. I click on X, screen options, turn off the Elementor overview. So I've installed the Hello Theme and the Elementor page builder. And now I want to install Elementor Pro on top of the free version of Elementor. So I click on plugins, add new plugin. I go to upload plugin, click over here, and I drag this one into the choose file area. Or you can click on choose file, and then you can browse on your computer. Install now. And then I want to activate it. Awesome. Over here at plugins, I see connect and activate. I can also go to Elementor, license, connect and activate. So I click on that. I sign in with my email, sign in, awesome. If you want to you can become a super contributor. I don't want to do that. Activate my license. And now our Elementor Pro installation and license is active. If I go to the website, it looks like this. Our theme is gone because this is all made with Elementor. It looks really ugly, but we're going to make it look so much better. In order to keep everything organized, I go to the back end, to Appearance, Themes, and I get rid of all the other themes except for the active Hello Elementor theme. So I click on theme details, delete, okay, theme details, delete, okay, theme details, delete, okay. So are you ready to create a beautiful website using Elementor Pro? I hope you are. Maybe you already have a company with a branding, with colors, a logo and all that stuff. If you don't have that, let me show you how you can choose the right colors for your website. There is a very big chance that you are not going to use these colors in your website. You have different colors in mind. Maybe you don't have colors yet for your website. Well, if you want to find out which colors you can use for your website, this is how I would do it. I would go to Google, search for a competitor of you. So if you are a plumber, I can search for plumber. Sydney. Open few websites. And you can see which colors they are using. Blue, water. Yellow, not water. Blue and red. As you see, you can go all kinds of places if you want to get some inspiration. You can also search for branding colors, go to images, and here you see what kind of colors you can use. And there is this color emotion guide, and this can give you some ideas. What do you want to express? Optimism, friendliness, excitement, creativity, trust, peace, balance, and again, there's Coca-Cola, but there's also Pepsi, the same drink, not exactly the same, different colors. What you also see is that those colors often times comes with multiple colors. So over here, there's Paypal, which has three colors, dark blue, a little bit lighter blue, and light blue. Red, orange, and a different orange. Green, light green, yellow. So if you want to create your own color palette, there's a tool you can use. You can go to coolors.co, hit enter, and you can start the generator. And the generator will create colors based on the other colors. So it will not pick colors that are totally not relatable. So you can press the space bar, and then it will show some colors. So I like this color. So what I can do, I can click over here or I can drag it to the left and I can lock it. And what it will do now, it will lock this color and based on this color, it will find other colors that match this color. I can also click over here and decide to change it a bit, make it more blue, for instance, darker. Okay. So often I use a premium color, then a secondary color that is or a lighter version. So I could go, I can copy this, paste it. If I want to have a lighter version, I can go to the picker and go for HSB. And I can turn off the brightness or turn it up. So make it lighter, a lighter version. Or increase the saturation, well, or you choose an opposite color. So in my case I would like to use orange. So I go back to the picker, I scroll this bar or drag it over here, something like that. That's what I like. Then I want to use a dark color for my text. 1, 1, 2, 2, 2, 2, that one. And then I want to have lighter versions of these colors. So I can copy this color, I can paste over here, then I can go back to HSB, go for brightness, and then bring back the saturation. I don't want it to be white, but a little bit less than white. Okay. What else I can do? I can click over here, go to the color picker, the eyedropper, use this one, click on it again and do the same thing. Make it a lot lighter, something like that. If you're happy, I mean, not like if you're happy, I hope you're happy, but if you're happy with the colors, if you're happy and you know it, clap your hands and if you're happy with the colors, then click on export. That was weird. Let's click on PDF, give it a title. Last week I went on vacation to the Netherlands. Export now of course you can give this a name so I can name this Ferdinand Korper. Export and voila. Look at this. This is our color palette. I really like it. So this is what we can use in our website. Let's talk about a logo. Do you already have a logo? Please let me know. That's not possible because this is a video that I already created. I cannot have interaction with you through this video. Hey George! I'm just kidding. Do you already have a logo? If so, I'm happy for you. If not, let me show you how you can create your own logo for free or you can follow along with all the images, all the logos I use in my tutorial. In order to do that, let me show you, first of all, let me show you how you can create a logo and then let me show you how you can follow along with the same images, same content I use in this tutorial. If you want to create a logo, You can go to YouTube and search for logo Canva Ferdy. And there is a tutorial on how to make a logo using Canva. And if you want someone else to create your logo, you can go to ferdy.com forward slash fiverr, two R's, hit enter. And then you can search for a logo and then let someone else create your logo. So find someone, reach out to them, and they can create a logo for you. If you want to use the same logo I use, the same colors I use and maybe also the same blog post I use in my tutorial, then go to ferdy.com forward slash images, hit enter and you will be redirected to this page. There you can leave your first name and your email address. Then you click on subscribe and then you can download the images. If you're from Europe you need to consent to a few things, subscribe, then I go to my Gmail account and it says important confirm your subscription, confirm my subscription and then images will be downloaded, you can drag them to your desktop, then I go to the desktop and there I can use the images. So let me close this and now you can follow along with the same images I used I use in my tutorial. In order to upload a logo, we'll use a logo using Elementor, but for now I want to upload my first logo, so it will be displayed over here by default. In order to do that, I click on Customize, and I go to Site Identity, and I click on Select Logo. Select Files, I go to Images Tutorial, and I want to make use of the folder Ferdinand Corporate. Over here I see the colors I use in my website. And I want to go for a PNG Ferdinand Corporate logo. This is a logo I've made in Canva. I exported it as PNG and SVG. For now we will use PNG. In Elementor we will use the SVG. What is an SVG? It's sharper, it's bigger, it can become bigger without losing quality. In file size it's smaller. Right now we're going to use a PNG. What I always do when I upload an image, I go to the title, I get rid of all the dashes, if there are dashes. Command A, Command C, I paste in the alt text and I paste it in the description. click on select. I skip the cropping. Ladies and gentlemen, there is our logo. I also want to have a favicon if I would go to Tesla.com. I see the Tesla logo if I go to Apple.com. I see the Apple logo. So I want to have a logo over here. It's called a favicon. In order to upload it over here, we can click on select side icon. It needs to be square and a PNG. In my Canva tutorial I show you how to create a favicon. I click on upload files, select files and actually the first thing I want to do I also want to upload the white logo. So open that first. Okay. I have a logo with blue and a logo with white for a lighter background. I click on upload files, select files and now I go for the favicon. It's square, it needs to be square. It has a transparent background because then it'll look better in my opinion. I skip the cropping and what you will see over here is our favicon. So if people are at tesla.com and at apple.com and at ferdykorper.com, they know immediately, hey, I want to go back to my favorite website. And then they can click here and there they are and they can close those because my services are probably cheaper than Tesla. Okay, so far so good. Ladies and gentlemen, it is time to start creating our menu and don't think about a menu lightly like okay, homepage, about us, what else, what else is fun to put in our website? No, we have to think this through. What is the goal of your website? Do you know that? I guess it's getting more clients. So we need to base our complete website on that goal. So we don't need to stuff our website with things that are not helping the visitors to go towards that goal, become a client of us. So let me show you how you can figure out for your own company, for your own website, what kind of menu you should create which pages do you want to include in your website let me show you right now how to do that since we're here I go back I want to make use of a menu so I click on menus a menu is the navigation on our website so again if I would go to web design agency Sydney Sydney. I skip all the sponsored stuff. I go for Jimmy Webb. I have the logo and then I have the navigation over here with a beautiful video in the background. I'm going to show you how to place a video in your background. But this is the menu. You have services. They have a lot of services I have to say. Our work insights. So we can get inspired by this. So you have to take some thought into what you want to place over here. What I suggest, of course, a homepage, then something about yourself, the services you offer, and then you can have a submenu with pages for all the services you offer, or work, also known as portfolio or cases. Then we can have a blog page and a contact page. So insights is actually a different word over here, I guess, for blog posts. So actually, I like this menu. This is exactly what I want to have except for the super big sub menu. But I do want to have sub services like these. So I go to the customizer and in order to create my own menu, I click on create menu. I call this one main menu. Nobody will see this, it's just for reference. You can also say uncle Jim, but I prefer to say main menu. It's the main menu that I use over here on the top of my website. I want to assign a location. That's the header. So now I can add items. And when I add items, I also immediately create pages. So I click on add items. And I want to add the first item, which is of course the homepage. I call this home and I edit. Then I want to say something about our company or about ourselves or my team so I create an about page and then I want to have the services page and I offer four services. I'm a web design agency but I do more than that. I do web design but besides that I also do digital marketing. I'm helping my clients with the text for the websites. We have people that can do that, they are really good, text writers. Then of course we do SEO, search engine optimization, making sure that my clients are found better on the internet so they can get more customers, get paid more, so it can be a blessing to the people around them. How cool is that? And we're going to talk about advertising, spending $100 on advertising and getting $300 in clients, that will be great. So advertising is something we do. And if I publish this, I see them all next to each other, but I want them to be below services. How can I do that? Over here, below services, web design, I drag it to the right and there you see a nice step. And now they are part of a sub menu, which is really ugly, but we're gonna make it look better. Then I want to showcase what I can do. So I can say cases or Casey if her wife's name is Casey. If you have a wife and you want to say something about her in your menu, but I prefer to say our work. Edit. Then I want to have a blog. Not everybody wants to have a blog, but a blog is a great way to get organic visitors to your website. Visitors that found you through blog posts that are displayed in the Google search results. And of course, really important, we want people to be able to get in touch with us based on all the information on our website. They probably get excited and think, hey, I want to do business with the company of this website. So then they can reach out. I click on publish. I close it. And this is our menu right now. Well, if I would go not to Jimmy Webb, here they have the homepage. If you go to our work page and you click on Jimmy Webb, you go to the homepage. With Apple, that's the same thing. You go to TV and home, click on the logo, go back. There's no homepage. With Tesla, go to charging, go back to the homepage. But where is the homepage? Click on the logo. So I want to do the same. I don't want to have the homepage over here. So I go to the customizer, go to menus, main menu, click over here, scroll down, and remove it. Then over here, I see the title archives. That's because by default, WordPress shows the latest blog posts on your website. That's how it started more than 20 years ago with WordPress, a tool to help you to make blog posts. And right now it's so much more. So I go back and I go back, I go to the homepage settings and I don't want to display my latest blog posts on the homepage, but I want to display a static page, which happens to be the homepage that we have created. And for the posts page, I want to have blog page. Publish and now ladies and gentlemen, if I close this, we see home instead of archives. So right now when people go to your website, they will see your homepage. So now it is time to make it look so much better. So we're going to dive deep, really deep into Elementor Pro in this tutorial. But first I want to show you how you can set up and configure Elementor Pro in a way that it can help you in the long run to be more productive, work more efficient, because in the long run, that will definitely save you some time. And after we have done that, I will show you how you can save that as a template for your next website. So if you're gonna create a second website using Elementor Pro, you don't have to configure all those things again. You can just import that website with all the configurations we have already created. Also, we are only going to create one website. This will save you a lot of time. So let's get started with setting up and configuring Elementor Pro. It is time to open Elementor for the first time. We're here at our homepage and in order to open Elementor for the first time, we need to click on edit page. Then we go to the WordPress editor, but there's a button over here that says edit with Elementor. And when you click on that button, Elementor will be opened. There's notification over here, that's because Elementor is always working on new things. So this is the most recent thing, unlock the power of AI. I click on the X and this is the Elementor page builder. And I hope that soon you'll be really familiar with the interface. The first thing I want to do, I want to click on, got it, get rid of that message. And what I see, we're still making use of the old interface. So in order to use the new interface, I click on the three lines over here. Click on exit. Exit to this post. Apply. Don't save and leave. And I click on the icon over here. Then I will go to Elementor, settings, features, I scroll down and I see here editor top bar it's not active yet. So I click on active. There are also a few other things I want to use in the tutorial so I want to make those active. Nested elements, that means that you can place elements within elements which gives you so much more functionalities within your website, lazy load background images. That means if you're on a page, let's say over here there's an image, but the page is loading this area. And normally if you don't use lazy load, that image will already be loaded, even if you don't scroll that far down to see that image. With lazy load, it decides, when I activate it, that if there will be an image over here, that it will be loaded when I come close to it. So it will not be loaded when it's not necessary. That's lazy load. That's what I want to activate. I also want to turn on the mega menu function and then I scroll down. I click on save changes. I click over here to go to the homepage. I click on edit with Elementor. As soon as you open the page for the first time with Elementor, it can be opened afterwards through the top bar. So if I go to the about page, I cannot do it because if I edit the page, it's still being created with the WordPress editor. If I click on edit with Elementor, then when I go to the about page, I can edit it with Elementor. So that's the case with our homepage. That's why I click on edit with Elementor with the new interface. So now it looks different. We have a top bar over here with a lot of nice features. Here at the left, you see all the elements we can use, a heading, an image, a video, text editor. I'm gonna show you step by step how we can use all these amazing elements to make amazing websites. So later on, I'm gonna show you how we can make use of this, use of containers. In those containers, we can have elements and we can adjust them. We're gonna talk about that in depth, but first I want to talk you through the interface and a few configurations. So we have our top bar over here. No matter how far you scroll down in the website, we have a lot of content we can scroll down over here. We will always see this. So let's start at the left in the top bar. If I click on the logo, we can go to the theme builder, we can go to the history, and if you edit the things, we can reverse those editings. Then there are the user preferences. Let's go there. We can do a few things over here. Right now we have a light interface. We can change it to a dark interface. That's what I prefer. This over here is the panel width. It's 300 pixels. If I would say 400, it becomes wider. I like 300, so I keep it with 300. You can also drag it over here. I like 300. Then editing handles. If I click on publish, if I click on the plus, then I go back to all the widgets again, if I drag an image over here. Okay, now I see three areas. I can close this container with an image in it. I can select a container and I can create a new container here on top. What I would like to do is duplicate it. Now over here, if I want to duplicate this, I cannot do it. If I want to hover over here and remove this one, I can also not do that. That's why we need editing handles. So I go back to the Elementor logo, user preferences. If I turn on the editing handles, look at this. Now we have more options. I can duplicate this whole area. And if I hover over here, I can duplicate the image and I can close the image. So I really like editing handles. The default view for our website is desktop. You can also say the default view should be tablet portray or mobile portray. I like the default one. And when we exit this, we go to our blog post. So if I exit to WordPress, we go to our blog post. You can also change it to all posts or to your WordPress dashboard. Do we want to turn on the style guide preview? Yes, there we can see all our colors we use and all our fonts we use. So I like it, I click on publish and of course it's up to you if you want to use a dark or a light interface. Then I click Click on the plus and I'll be out of the user preferences. Then, important, there are keyboard shortcuts. I will talk about a few. One I like, of course, is Command Z, or redo, Command Shift Z. On a PC, you'll see different shortcuts, the control and stuff. You can copy things, paste things, paste a style. So take a look at this, but also through the tutorial, I will show you what I use. I like to use Command I for the structure. And of course, here we can go and actually to WordPress. If I click on this plus, that means I can add a new element. An element and widget is the same thing. Here it's called widgets. Somewhere else it's called elements, over here for instance. So no matter where you are in the website, if you click on the plus, you go to all the elements and you can drag something new over here. Then there's the third area, the site settings, really important. There are a lot of things we can configure over here and that's what we will definitely do. Things like global colors, global fonts, typography, buttons, the width of the website. So let me close this. Then there is the structure in the website. That means if you open this, it gives you an overview of everything you have in your page. So right now, the only thing I have is a container and in the container I have an image. If I would go, scroll down a bit, and I go for a button and I drag it over here. Now I have a container with an image and below that a button. If I drag this on top, it's now on top of the image. So with the structure you can navigate through your website. You can make it float or you can place it over here. And what I like to do, Command I, I hide it, and I bring it back. Well, whatever you prefer. I like to use it in the corner, say Command I, because I like to use as much space as possible. But I can also imagine that you like to stick it over here, especially if you have a bigger screen, it can work great that way. You have always over here. So if I remove this or command I, you see space increases. I can also click over here. So I can see exactly what I've made. Yes, so that's the site structure. Over here, we have notes. If you're making a website for clients, then you can let your client make notes. So your client can say over here, make it a different color, red. And then you can leave a note. That can be handy. Then we go over here. You can go to your latest pages. So if you have opened all the pages in Elementor, you can navigate through the pages. Here are individual site settings. So for only this page, the title, status, is it published or not, the excerpt, featured image, allow comments, you can hide the title and you can change the page layout per page. So you can say for all the pages it should be Elementor full width but for this one only Elementor canvas and there's the style for every page. I never touch this so I leave it with settings but that's what you can adjust over there. Click outside of the area and then you will leave those settings. And then we have the displays for the desktop, tablet, and a smartphone. By default, Elementor is doing a great job in making your website responsive, but here you can tweak other things. So if you change something over here, the width or the size, It will only be changed for this device. And we go back to the desktop. So we're also gonna talk about that, how to optimize everything even further. We can search for things. Also, there's a great shortcut for that. Command E, you can even go to other pages. So if you go to about, but now you don't see it because the about page is not created using Elementor right now, but it's also a way to navigate to other pages. Or if I say page, I can add a new page over here. Now we'll leave this one. So nice shortcuts. I don't use it a lot, but hey, it's a nice feature. Then there's the question mark if you want to help. So if you have a question about buttons, there's an article and you can learn more. There's a nice structure over here, even videos. So you can learn a lot over here. Over here we see what is new in Elementor. They're constantly updating and improving their tools. So this is what you can see over here. And this is so cool. If I click on publish, and I click on the eye, look at this, I see a updated version of what I've created over here. So if I go and I change the color, don't follow along with this, do something else. I click on publish. I don't even have to refresh this. It will already be shown. Well, you can also click over here as I said, if I do control tab, there's almost no difference. So you can also just see what happened over here. But the great thing is if you publish it, at once you see the updated version over here and that's what I really like. So I like to work with two tabs, this one, then I can change things over here. In fact, I can publish and I check it, it goes to the right and I see the result. If I want to bring it back, command Z a few times, there it is. And then I say Command S, and then I save it, and it's like that. Well, here we see the publish button to save it, but we can also click over here. We can save this as a draft, or what I sometimes do, we can save the whole page as a template, and then you can import it somewhere else and save a lot of time. So that's the top bar. I already talked about the widgets over here, the elements and drag it in. So since we talked about it, let's configure it even further by going to the site settings. I want to go to the layout of the website. The content width is 1140. If I bring it down, don't think about this, the width of the page will be more narrow. Well there's an ideal content width and that's 1120. Why? If you use multiple columns, one or two or three or four or five, 1120 can be divided by all those columns. So for me, 1120 is the best width for a website. So I want to use that 1120. And then this is really important. Let me save it. If I close this, and I close this, if I drag a container over here. By default there is a small padding over here so if I drag a container in this container and again and again a few times every time you see small spacing well that's not what I want because sometimes I have to use containers in another container and then there is that padding I don't want to have that padding. The downside is if you don't have padding over here, all these containers are on top of each other. And you see which one is which one. Then you can say Command I, Control I. I see I have a container in that I have a container. So I have a container in a container, in a container, in a container, in a container. And if I would have no padding over here by default, I would not see it. But I prefer to have no padding over here. In order to adjust that click on the side settings Go to layout And then container padding I can say zero Save the changes, close this I still have all those containers But I don't see them with the spacing anymore because I set zero. Well, there are ideal settings for containers in my opinion. Let me get rid of this and drag an image over here. If I publish it, I get rid of the structure. I see right now that this is aligning beautifully. If I go to the settings, layout, I see everything is zero but there's no spacing below and on top of every container. That's what I do want to have. So for me I uncheck this and then on the top my ideal container padding is 60. So you see there's more space now. At the bottom also 60 like that. At the sides zero because then it is aligning perfectly with the width of 1120. So everything will align perfectly. But then, look at this. Here is no panning anymore, because automatically the settings for tablet will be taken from the desktop. So automatically it says zero over here, unless I change it. So if I increase it, what you'll see here is that it is increasing. I don't like it when I see a website on a tablet and it's totally against the edge. So for a tablet I prefer to say 45 on all sides on top and at the side. Don't take a look at this we're going to create our own header so these settings are not what we should follow. 45 is a decent amount of space between everything. But then on a phone it will also say 45. Well that's too much in my opinion. So for a smartphone I like to say 30 on all sides. And in that way, since we are doing it here at the side settings, that means for every page in Elementor, for all the containers, these settings apply. If I don't do that, then I need to do that for every single container I'm creating. That's a lot of work. And if I decide to change it, then I have to change it individually for all containers. I don't want that. So for me, these settings are the best. So for the desktop, 60, zero, 60, zero. For a tablet, 45 everywhere. For a smartphone, 30 everywhere. Then there are also gaps. So if I save this and I close this, and I close this, I go for a new container, flexbox, and I say, I want it to have two areas, then there is no gap in between. So I can say 40 and if there are rows on top of each other also 40 but I prefer to do that everywhere at once at the side setting. So let me close this and go back to the side settings layout and then the gaps I want them to be, I prefer 30 for columns and rows. Okay, save it. Then there's one more thing over here at the site settings layout and that's really important, the default page layout. Well normally I prefer to use Elementor full width, nothing changes but with this page I want to have Elementor canvas. But these are the site settings for the whole website. So every new page that will be created will have automatically Elementor full width, which is the perfect page layout. But for this one individually, I would like to say by going to the page settings. So only for this page, I would like to say page layout, not Elementor full width, but Elementor canvas. So there will be no header and no footer, because that's what we're going to create later. I want to focus on the layout over here. So now I know that this width is 1120 pixels and if I go for the tablet I know this is 45 pixels and if I go for the smartphone I know automatically this is 30 pixels. So I know it's a lot of things we need to do but we only need to do it once and that will help us to have a better workflow throughout making all the websites we're going to create. Maybe you're creating your first website now with Elementor Pro, but maybe in a few years you will have created 50 websites, I don't know. But even if it's only for this one website, it will save you a lot of time. Earlier in the tutorial, we created colors for our websites while we did not create them because they already exist. They already exist for like 6,500 years, maybe longer, but we're not going to create colors, we're going to use the colors we decided to use in our website. Let me show you how you can do that within Elementor Pro. And by the way, if you like this video, please like it and feel free to subscribe for more upcoming tutorials on how to make websites that can generate you money. All about the money. All about the dum, dum, dum, dum. I guess you did not see that one coming from a serious guy like me, never making jokes and then I'm going to do something like this and I'm going to leave it in the video even though I have the power to cut it out but I will just leave it in. How about we go to the next part and set up the colors in our website using Elementor? Bro? Okay, what I can do? I can drag a heading over here and by default it has this color. Why is that? Let me publish it. If I go to the site settings and I go to the global colors, there are by default four colors that comes with every element or installation and I want to change those. In order to do that, I go to the desktop images tutorial, I go to Ferdinand Korper, I go to my colors PDF. I want to use this as my main color. So I replace it. Then I go to the secondary color, dark blue, and third color, this one, actually I want it to be the same as the primary one. I almost never use that color. Then I want to add a few other colors. The first one is light orange. Click over here. Then I go to this color. Paste it. color, paste it then I want to say light blue, copy and paste and then I want to have white or off white so maybe not perfectly white but a little bit below that, save the changes. So now in our style guide we see these other colors we use in our website. In our website we're going to make use of local fonts. Two reasons. It will make your website faster and it will help you to be legal. Do you want to be legal? I guess so. It can be in some countries when you use Google fonts from an external place so you load them from the Google service. That is not allowed and it can be fine. We don't want that so we're going to download the fonts we're going to use and import them in Elementor Pro. There's also a free version of Elementor that does not enable this so using Elementor Pro you are safe and you can download the local fonts you want to use in your website. I'll show you right now how you can do that. Then we have the global fonts. So if I would go back, go to global funds, I go to primary which is the base fund of our website, I have Roboto. Roboto is a Google fund and I see a lot of Google funds but you can get in trouble by loading external Google funds. In some countries you can get a fine for that. So what I prefer to do, I want to disable the Google funds and then I want to download the Google funds we want to use to our website. So what I will do I will go to funds.google.com and we close this for now, save it and I go to the backend, exit to WordPress, click on the logo then I want to say disable, save the changes. So now if I go to the website, edit with Elementor, by the way now you see this car by default is orange instead of blue, so that's great. I go to the site settings, global funds, primary and now I only have the default funds, no more Google fonts. So I go to fonts.google.com, so I can say about services, our work, to see how this looks because I want to find a font for our menu. And then over here I can do a few things. I can say I want to use a sans serif. I like this one, Noto Sans. So what do you want to use as your heading, for instance? Noto Sans. Well, there are a few I like. You can also search for most popular Google fonts to use Roboto, Open Sans, Lato, Oswald. This one is really popular, Realway. I like Nunito Sans, so I can search for Nunito Sans for my heading. I can click over here, I can get this font, and I can also say download all, so I download all the variables. I do that, I open it, so here I have a lot of fonts, oh actually only two. Here are all the other ones. So let's see what we can do with this. I can go back to the backend, I can go to Elementor, custom fonts, and I add a new one. I call this one Nunito Sans. I can add a variation. Now I want to go for normal and normal. And if I take a look at the finder, I see they're all TTF. So I go for the TTF file, upload, select. I go to downloads, Nunito Sans. And I want to go for, not for the italic one, but the variable font. And then I can choose which one I want to import. So these contain all the fonts that are not italic. I don't use italic fonts and then I can say I want to have the normal one and the normal one. I add a variation, this one again, this time I say very light 100 and then the fourth one is 900 which is the boldest. So I'm uploading four variables and if I click on publish I will see how they will look. So really thin 100 then there's normal, there's bold and there's even bolder. And then I want to have a font for the text of my website. Well, as I saw, Open Sans is very popular. I want to use it as the text. So I search for Open Sans. Get font. Download all. There they go. Open Sans now. Even downloading more fonts at the same time, okay. I go to add new on the top and I say open Sans and then again I need to think about which one I want to display. Of course normal, upload files, select files, open Sans, the variable font which contains all the other funds. So normal. Oh, you know what? I'll start with 100. Then I go for normal. Then I go for bold. And then I go for super duper bold. 900. That means if the fund was a person it will be 900 pounds. Now that's not true but this is what I like. Update now if I would go to Elementor custom funds looks like this open Sans, Numetor Sans four versions. I want to have one more. I reset all the settings. I want to have a nice heading. Something different. Something like that, maybe a little bit different. I'll just take a look. For some website that just works, having a nice font and then as a heading something else. I'm having something in my mind, but I haven't seen it yet. Something like this, Titan. No. If you would have a big word, web design on your home page, it could be nice to have a different style than the other two you have. I decided to go with what I have. So those two. Now Now if I go to my website, edit with Elementor, I go to the site settings, global fonts, primary one, now I can select them here at the family, open sans, open sans, secondary also, the text also, and the accent also open sans. Save the changes. They are all the same except in font so let's I like to have 16 in size. Primary is already 16, oh no wait, 16, 16 and 16. So they are all the same and I save the changes. I go back and I want to go to typography. The text color. I want to use a text color. The global one typography. Is open sounds. 16 and medium. Then there's a link. Link can be. Primary for instance, when I hover over it, it can become secondary. Typography, I want it to be the same, so by default it will inherit default typography. Then there is heading 1 and I like to say Nunitosans 24. The second one also Nunito Sans, so what I will do, Nunito S, copy and select it everywhere, 24, page 3, 24, paste. I only have to do this once, after that we don't have to do it anymore. Save the changes and now we see our heading is quite small so what else we can do this No, it's not there. And I see that this is also affected. So let's close this. I click over here and I see it's a heading 2. If I would say copy, copy, copy, copy, copy. And over here I say heading 1. And here h3, h4, h5 and h6, they're all the same so it's working. For Google it's important to use h1, h2, properly h3 also but for the size it doesn't matter for me. If I would have a text, I drag it over here and I copy and paste the text. Get rid of all the new paragraphs. So I have one text over here. How do I want to display this? I can go back to the site settings, to typography and there's the body text and the line height, I can also increase that a bit so 26, so it has some more space and I would normally not display a text like this, I would make it smaller because it's not fun to read, but I like to have some space here in between save, changes look at this. Still working on the configurations. If I would drag a button over here, it looks like this. If I hover over it like that, I don't want that. By default, I want to have a certain style. So I can see the results. I go to the side settings, buttons, by default the text color should be of white. When I hover over it, I want the text color still to be of white and the background color to be secondary and the border radius, let's say 25 like that. Save the changes, close it, why is there no hover, I said buttons, hover, background color, secondary is not working, why is that? Look at this, I need to go and disable the default colors and fonts from the settings page. So that's what I will do. Closes, publish. I go to the backend, click on the logo or the icon. I go to Elementor settings, and then over here there are two buttons, disable the default colors and disable the default fonts. So everything will be loaded from Elementor. So now, if I edit this page with Elementor. Now it's gray. If I go to the button style, by default the background type will be primary. If I hover over it, it will be automatically as I said. Same for the header, if I drag it over here, now it's not orange anymore but it is dark. Now I can go to the style, by default it should have a certain color. color that's what we can configure at the topography. So by default I think it can be primary so if I would do the second one this is H2 it will become orange but actually I prefer to use the dark text. Save it. So those were quite some configurations. What I would like to do? Let me publish this. As I mentioned before, when we have set up everything for our website using Elementor Pro, we are going to export it as a template that we can import in other websites and in that way save a lot of time. So let me show you how you can export your current website with older settings and then import it into another website and save a lot of time. Have I already told you that it will save you a lot of time? I hope so. So let me show you how you can do that. If I'm going to make more websites and I've set everything up and it took a while as you've seen, I actually to the WordPress editor. I want to make a backup of what we've created so far. I know we see nothing, but if I can export this and import it later on for a new website, it can save me a lot of time. So in order to do that, I go to plugins, add new. Plugin is an addition to your WordPress website. So I want to add an addition, which in this case is all in one WP migration. Here it is. I click on install now and with this tool I can make an export of our website, everything that's needed and I can import it in another website, really easy to use. Activate it. I use it all the time. I go to all in one, export, export to 71 megabytes so we can still use the free version and what I would like to say is enter Elementor Pro configured website 2024. How about that? Dot WP press and as I said I use it all the time. I use it here which is a few days ago. I like it. I like to use it a lot. Now if I go to a new brand new WordPress installation, I can go to plugins, add new, search for all in one WP migration. You can install now, activate, import, go to my downloads, I go for Elementor Pro configured, proceed, finish. Then I need to go to settings, permalinks, and I need to log in. I need to save it twice at permalinks. And now I have the same website somewhere else with all the settings, dark interface, the width is 1120. So that's how I can save a lot of time when I create a new Elementor Pro installation. Now let's go to our website and let's get started with the Elementor page builder. We're finally getting there. We're getting to the point that we're going to work with Elementor Pro. Until this point, there was a lot of configuration, logo, colors, menu, WordPress, setting things up and now we're going to create content using Elementor Pro. So we're going to get our feet wet into Elementor Pro. I'm going to show you step by step what you can do. It's going to be a theory and I'm going to show you how everything works and then we're going to create a real page and then I'll show you how you can do the practical application to what I'm about to show you right now. We're going to talk about the elements within Elementor, we're going to talk about the containers and how you can sell all those things and work with containers and elements, and after that we're going to talk about how you can position them so you can place all the content in your website on the place you have in mind. Yes, are you ready? Let's go. So first I wanna talk about containers and elements and after that I want to talk about positioning. So I already have a container over here, so I hover over it, X. There are three ways to create a new container. The first one is click on the plus over here, go for the flex box, and then I can choose a certain structure. So I can have a container with two containers in it, one left and one right. I can have a container with three containers, one left, one right, one below. I can have four, six. So if I choose that, I see one container, which has this beautiful pink line around it. And then here are six more containers. I see one container with six containers in it. I want to get rid of it, close it. That's the first way, like that. The second way is going to the elements and drag a container over here. There you go. And then the third way is going to the elements and drag an element over here. And now I have an element with a container. As you see by default there are 60 pixels over here and 60 pixels over here because of the settings, side settings, layout, 60 and 60. So we don't have to do that everywhere. In this container I can have multiple elements so let me say command I again or control I. Here's one container right now it contains a heading. I can also go for a button and I can drag it below the heading or above. If I release it, it will be released. And automatically as you see here is the line around the heading. Here's the line around the button. There are 30 pixels over here. Why? Because in the container by default we say that there should be a gap of 30 pixels. I click on the plus and I want to add another element, an icon. I can drag it here or on top or in between. And there you go. So what I have is one container with three elements in it. If I click on one of the elements, so I click on the heading, there are three tabs over here, content, style, and advanced. If I go to the icon, there's content, style, and advanced. If I go to the button, there's content, style, and advanced. Every element has those three steps. The content is for changing the content of a specific element. So I can change the title, for instance. This is a title. I can add a link, go to https://desktopcomputers.com. I already talked about Apple, so I should also talk about desktop computers. I can open it in a new tab. Then if I go to the icon, it looks different. There's content, but this content is different, of course, than the title. So over here I can change the icon to a heart, of course, because I'm so full of love making these tutorials for you, hoping you enjoy them. I can also link it to Tinder or something like that, whatever I want. I can change the view. And then for the button, I can change the button text so I can say more information. Over here I can say contact and then it suggests the contact page to link it over there. I can have an icon. So that's all content, but then there's also style. So if I go to the heading, I can go to the style, change the color of the text to the dark one. I can align it to the right, to the center. everything to do with the colors, the style of this element. So with this one, the style is also different. Yeah, I can also align it, but now I can change the color of the heart. So let's say red, that redemption, I can align it to the left. When I hover over it, I can change the color. I can have a hover animation. And for the button also there are different colors of course. Alignment, typography of the button, the background of the button, when I hover over it what should happen. So the content and the style are different based on the element we are editing. Then there's also the container. If I click on the container I can click on the six dots over here or I can select it here at the right I have no content style in advance but layout style in advance. So the only thing that is different is add an element, it's content and add a container, it's layout. And there I also have the style. So here I can have a background color, let's say this one, or I can have a background gradient. So first color and then second color and I can configure that, change the angle for instance. But now I don't see this title, so what I can do now, I can click over here, I can go to the heading, go to the style, change this to white or monzi. I go to advanced, close layout, I can go to background, and I can create a white background. But what I don't like is that the content is really close to the edge. In order to change that here at advanced I can go to layout and I can increase the padding on all sides. Now I don't like this whole area over here. Then I can go to the width, change it from default to custom, change the percentage to pixels and then I can increase this area. I can align it to the right, to the center, to the left. So as you see there are so many things we can do to adjust the content and look a few of our elements. So the point I want to make is that every element has its own functions here at content and at style and advanced everything is the same for every element and for containers it's a little bit different. Also here I can have padding so I can increase this, play around with that. So of course we're going to talk so much more about this, but right now I just wanted to show you that every container and every element has those three tabs over here. So I will get rid of this and now I want to talk about positioning. The second part of the introduction of getting your feedback into Elementor Pro is about positioning. How can you do that? It can be overwhelming, but hey, that's what I'm here for. I'm doing my best to show you step by step how the basics work. And then we're gonna put it into practice by creating a beautiful homepage. Are you ready to learn how to position Elementor Pro? If not, make sure you're ready and then let's get started. We're already started, so let's continue. So how can we position elements and containers within Elementor? Let me show you. I can go to an image, drag it over here, and I think I want to have more images. So I can duplicate it, duplicate it, but I see nothing happens because when I duplicate it, they are all below each other. So if I would say command I or control I, I see four images below each other. If I want to change that, I go to container, to layout, and I want to use a flexbox, not a grid. If you don't see the grid, it's because you did not turn it on yet. I go to my website, to the back end, to Elementor settings, features, and then there's the grid container. If I don't use it, I can also make it inactive, save the changes. Now if I publish this, I take a look over here. Now there's only the flexbox, no more grid. Since for now we're not going to work with the grid, I'm okay with that. So what I see over here, the content width is boxed. If I close this, I see the width of the website is here from the left to the right. And I can make it wider or I can decrease it and if you leave it empty by default it is 1120 in pixels which is in my opinion the best width for a website. If I get rid of all the images what I can do I can go to the container and I can also change the minimum height. See? So if I would give this a color, I go to the style, background type, I say secondary, I go to layout, if I increase the minimum height, you see it increases. I can do that with pixels, I can do that with viewport height. So if I would say 100%, it will cover the whole height of your screen. So if you have a bigger screen or smaller screen, it will cover 100% of your screen. Get rid of it. Pixels, I almost never use this. I always let padding do the work. So I bring this back to no background, so it's white. And I go back to the plus. I want to add an image and then the second one, third one, fourth one, go back to the container, layout and now it becomes interesting because right now the direction is pointing down because all those images are below each other. In order to show you what I'm doing I can click on the image, choose an image, I can click on upload files, select files and you can go to the folder which I've created for you, images tutorial, then web design, practice, now over here you see four images, I say command A, open them, select them and I want to select 2, 3, and 4. So they're now below each other. If I go to the container, I can change direction. Really interesting. If I click on row, they go from left to right. If I click on column, they go from top to bottom. I can also do row reversed for 3, 2, 1 and column reversed but I never use those two, never. If it's up to me they can get rid of it, maybe the real cool super duper web designers use it I don't. I like to keep things simple so I would like it if Elementor if you're watching give you the option to get rid of those. Otherwise, actually it doesn't matter, just don't use them. So, or you go for a row horizontally or for columns vertically. If you take a closer look, I will zoom in for you. If you are having a row, this looks different than when I click over here. Look at this area when I click over here. It changes 90 degrees based on the direction. So if I'm working from left to right, what I can say over here, by default it's using the first option over here. So if I say left, nothing happens, but I can justify the content to the center and just fight to the right. And then there's space between this really interesting. Now to illustrate it better to you, what I'll do over here, click on the plus, arrow down, and I click on the plus here and I go for an image. So what you will see is this is the width of the website. If I come back over here, if I would go to space in between, what you will see that the first element is aligning perfectly with the one below. So it's starting from the left of the website, the most left area of the website and it's ending at the most right area of the website. What it does, depending on how many elements you have, the space in between will be automatically created and it will be evenly divided over the three gaps in between. So if I add one, look at this, the gap in between will have the same size everywhere. If I do it again, and again, and again. It will make sure that the gap always is, in this case, 30 pixels. Why? If I click over here, here below, I set that by default the gap should be 30. If I say 20, look at this, then it's 20. If I say 0, there's no gap at all. So I can also use the arrows up. I like to use 30, so it will respect the gaps over here, but I can keep on adding new elements over here. So let me bring that back. If I go to space around, it doesn't only have space in between the elements but also left and right. So here's the left border of the website but instead of having gap in between it has a gap left 50% and right 50% of this gap. So here it has a gap of 15 pixels and here it also has a gap of 15 pixels but since there is also a left area from this element it is a total of 30. So here is 30 and 30 and here it's 15 and 15. So that's space around. Then we have space evenly. That means that the space between element 1 and element 2, this space, is the same space as this one from the left to this area. I don't use space evenly and space around. I do use space between. So also these two, if it's up to me, we can get rid of it. That's probably because I'm not a fancy web designer that knows how to use this. Just kidding, I think you really don't need it. So as I said before, when we change this to vertical, this also changes. So now, so since everything is now below each other and I have no minimum height there's not much I can do over here because there's no space in between so nothing happens but if I would increase the minimum height like this now I can say justify to the top justify in the center vertically justify to the end space in between so this at the bottom, this at the top and this is the space in between which is evenly divided then we have space around again and space evenly, well don't use those two but that only applies when you have extra space left over here which is in a lot of cases not the case Let's go back to horizontal and let's make it a little bit higher again to illustrate a point if I would say 600. So we said over here direction it should be a row horizontally from left to right then justified in the center or at the right or space in between but there's a third option and that's align the items on the top or at the bottom or in the middle or stretched. That's why you see this line over it. So let me illustrate it by giving this a background. I can do that at advanced background. Okay. I go back to the container. If I would say stretch, nothing happens because by default it's always stretched when it comes to align items. If I would say start, then the background is gone because now you see the pink area is around the image. Nothing more because it's not stretched anymore. If I would say center, all those elements would be in the center. If I say end, they all will be below. And if I say stretch, then again, things are stretched. Later in the tutorial, I will show you how we can apply that, how you can use this in a functional way. So now with those settings, if I say column vertical, you see this is also still stretched because I clicked on it. If I would say left, it's there, center right with stretched, you see the background. I release it, it's still stretched because by default this is always activated. If you have nothing selected over here, and it always automatically uses this one. If you select nothing over here, it also will always use vertical. But we can take it even a step further. I can say over here, I want to have one element to be aligned differently. So I can select it, I can go to advanced and I can say align self. This one should be at the end. This one, the fourth one, I can say, you know what, I want it to be at the start. Now, if I go to the container and I bring back the direction from vertical to horizontal, it also tries to apply that. So align self is now here, the fourth one on top and change it, stretch it. So with all those things combined you can do really cool things. But wait there is more. Let me bring this back now. I can get rid of all the images and I want to add a new image or I can close this. Okay let me show you something else. Over here I have a container with one image. I click on the image and I want to add some people from my team. And let me add one over here. What I want to do, I want to show a few people next to each other, but if I duplicate this, they are below each other, how come? Over here, they are below each other, so if I say horizontal, then they are next to each other. But I can do this unlimited times and they all stick in the same row. Why? Because here at the container, if I take a look at the wrap, there is no wrap. By default, this is selected, so if I select this, nothing will change. But I can also make it wrap. What does it do? When I say wrap, all the elements will stretch out as far as possible and everything next to the element will be pushed down. That's why they're all below each other. So if I turn this off, it looks like that. So if I go for a new element heading, and I say, our team, it doesn't look very nice. So what I want to have, I want to have our team below that three pictures and below that three pictures. How can I do that? Well, click over here, scroll down, I want to turn on the wrap. And as you see, this is not 100% in width. So why will this be pushed below? Because this wants to be at 100%. This area after our team is maybe only 90%. That's why it goes to the next row. So if I click over here on this image and I go to advanced width and I change it from default to custom and in percentage I say 30% now it's over here. If I duplicate it, it will be here. If I duplicate it again, it does not fit because 30 plus 30 plus 30% plus this and the gaps is more than 100% so it will be pushed. So if I want to have my team I can duplicate it like that. But that just looks weird. So what I can do instead of using multiple containers I click over here. I still use the rep function. I click on our team. I go to advanced and I say the width should be 100%. What will do it will push those two pictures to the next row. So I say full width, and now it pushes it to the next row. So automatically, let me remove this. So automatically, since this is all 30%, and there's a gap of 30 pixels, everything that I create over here, that will go to the next line. Two, three, and the fourth one will go to the next line. Perfect. The only thing is, when I add another image over here, let me get rid of this one, it's not aligning. And that's what I want. I want everything to be pixel perfect. So how can I fix that? Well, I can go to the container and I can say, you know what, justify the content in the center. And now it's all centered, but it's still not aligning. Well, what I can do now, first of all, I can click over here, go to the style, bring to the center, I can click over here, advanced, and I can increase this to 33%. And I say, right mouse click, copy, paste style, Paste the style. Paste the style. But now this is going to the next row. Why? Because 33% plus 33% plus 33% plus the gaps is more than 100%. So how can I make sure that without using multiple containers this will all fit? Let me show you. I click over here. I bring this down to 30% copy it, paste it and paste it. Now it's not aligning perfectly so what I can do now I can click over here the total of them all is 90% plus those gaps now I can say expand or grow so I go to advanced of this image, size, grow and now it will grow as much as possible pushing the other images away until the total is 100%. So now if I get rid of all these images, as you see it starts over here and it ends here. That's perfect. The only thing is this image is bigger than the other two. So I need to do the same over here. Click Advanced, Grow. Click Advanced, Grow. And now we have set it up in a way it doesn't matter how many images you add, it will always have a total of 100% while maintaining the 1120 pixels perfectly. Even though this is in percentage and this is in pixels, this is in percentage, this is in pixels. So in that way with the wrapping function and the grow function, you can work pixel perfect even though you're making use of percentage. What if I do want to have four images in a row? Then I can click over here. How I do this? Four images, the total of 100% divided by 4 is 25. If I all make them 25, then because the extra space over here will make it go over 100%, so I can only have 3 in a row. So if I add the fourth one, it will not go over here. So what I need to do, I need to say 20. Copy, paste, paste and paste. And now I have four columns with a width gap of 30 pixels and they're all in the same place. So one more time, if I duplicate it, it goes to the next row. So if I would say 100 divided by 5 is 20, let's go below that, 18, copy, Copy, paste the style, paste the style, paste the style. And it can be that it will not fit. So paste the style, it doesn't fit. So what I need to do, just set it a bit lower. 17, copy, paste the style, paste the style, paste the style and paste the style. And that is how you can work with the wrapping function. I really like this. It gives me the freedom to work with a percentage and take a look at the container with a gap in pixels. So pixels and percentages combined using the wrap and the grow function will help you to create pixel perfect designs. So if we wrap it up, we have content width. Right now it's boxed. You can also make it full width. If I make it smaller it's completely from the left to the right. I prefer boxed. We can change the width, make it smaller. If we do nothing it will automatically be the side default. We can change the minimum height. We can change the direction, next to each other or below each other. We can justify the content to the left, the center, the right or space between and I never use those and we can align them. So if I would have a high container I can align to the top, to the center, to the bottom or stretch them. We spoke about the column gaps. By default we said it is 30 per column and per row so on top of each other and then we have the wrap function. Without the wrap everything is next to each other squeezed so it fits in one row. If you say wrap you can use the advanced width, you can use the grow function and the percentage in order to create the result you have in mind. So let me close this and close this and then it's time to start building our website. Ladies and gentlemen, I bought Ferdy.com. My name is Ferdy Korpershoek. That's my YouTube channel name but not everybody has a good time pronouncing it. It's quite a hard name to say. Korpershoek, Korpershoek. So I'm going to change my branding and how cool would it be if I take you with me on a journey by creating my new website. So until this point, we worked with ferdykoper.com. From now on, we're going to work with ferdy.com. I made a few adjustments in comparison with the other website, the logo, favicon, and a few other settings. I will walk you through those settings so you're exactly where we are in the tutorial and then I will show you from now on how to make this website in my case at Ferdy.com. No big do I guess, I hope you learned already a lot of stuff. The thing is we changed a few things and we changed the domain name and we're going to continue to create an amazing website. Yes, let me show you what I've changed in at Ferdy.com. So up until this point in the tutorial I used FerdyKoper.com as my website. Now I will use Ferdy.com and I changed a few things and I want to show you the changes. So what I've done, I've changed a few colors. So if I go to the site settings, global colors, they are slightly different. So orange, blue, and light purple and white. I changed the global fonts. So if I go back and I go to global fonts, my font is now Adobe Clean. I downloaded it from Adobe website, then imported in the same way I imported the Google font before in the tutorial. And if I go back and I go to the typography, I also changed the headings over here. So heading one is really big. It's 80 with Adobe Clean, black, which means really bold, uppercase. So that's the reason why over here and the global colors, I see those big titles. And two other things I changed if I go back over here, exit to WordPress, I see a new favicon and if I go to the customizer, I go to site identity, I have a new logo. Everything else is the same. Elementor and I'm gonna create this website using Elementor Pro. Now we're gonna put everything into practice. I'm gonna build the homepage of my website and I have certain things in mind for my website. It can be that your website is different. You can follow along with everything I do, that's fine, but you can also create your own website and change the colors, change the content, change the images, maybe somewhere change a few things in comparison with my website. It's your website, make what you have in mind, but the principles I will teach you in the coming hour are applicable to all websites that you have in mind. So it doesn't matter that I'm creating something else than you are. So it's up to you if you want to follow along with the content I create or if you want to give it your own spin, the principles you will learn will benefit you in making amazing websites using Elementor Pro. So let's start with that. So since we're getting started, don't take this lightly. Don't think like, okay, I'm just going to create something and then the clients will come. So I'll drag a heading over here and I say, welcome to this website. Feel free to browse through this page. No, it doesn't work like that. We need to have a really clear goal in mind about what we want the visitor to see and to do. Welcome to this website is so 1998, we don't do that anymore. So I get rid of this. What I can do, what I almost always do, to be honest, not to steal things, but to get inspired, I go to websites from competitors. So if I have a web design agency, I search for web design or digital marketing agency. I already searched in Sydney. Let's go for Phoenix. I can go to the ads, then I know that those websites are probably really converting. And I can get inspired about the information. So that's one way to display the content on your website. So again, let's go to digital marketing agent Phoenix. I skip the ads out of respect for the people that place the advertisements there. And then I hold command, click, click, click, click, click, and click. And then I say control tab. Okay, power websites, rank in Yahoo, it's an image that's the first thing I think okay that's not good, you should not have an image over here, the text like this. We build brands, a big title, we build brands, awesome. This is also what I want to implement in my website Google reviews, they are really important or they can help you to be found better in the search results. You can implement that. Two call directions. Also big title, big title, bad image, bad image. Oh I don't like that. Why? Okay. A lot of text, a big heading. I personally don't like it, but hey, if it's not working, it's good. So what I will do, I want to be really clear on my website ferdy.com what I offer. What do I offer? Well, you're watching it right now. I teach people how to make their own website using WordPress. I want to show my face because I'm the face of ferdy.com. It's my first name. I'm really happy with this domain. It cost me $223 million. No, that's not true, but it was a lot of money, but I'm happy that I have the domain. So what I'll do, you already heard about the basics in this tutorial. Now I click on the X here. I want to start over again with a flex box and I want to have two areas, a left area with information about what I do and what I've already accomplished. And then at the right, I want to have an image of myself. So I click on that. Now I click on the plus, and then I go to all the elements over here. I can also click over here, then I go to all the elements or widgets. What I want to add first is a heading. So here at the basic area, I drag a heading over here. By default, it already has this style because over here at the site settings, at typography, I set that a heading two should have this color, this typography, which is 60 pixels, which is quite big. And then I can overwrite that over here if I want to. So the first thing I want to do, I want to make this a heading one. You can have only one heading one in your website, not in your website but per page. So for the homepage it's this one and it needs to have some keywords in it. Well I want to say learn how to make a website using, not suing but using WordPress. I don't want to sue WordPress. They sued me once because I had a website wordpress.com. They did not sue me but it's not allowed to have WordPress in your domain name. And I started this channel with wordpressking.com. So I changed it to Ferdy Korpershoek but people have a hard time, having a hard time pronouncing my last name. Learn how to make a website using WordPress. Perfect. Then I click on the plus. What else do I want to add over here? Well I want to sum up a few things about what I've accomplished. I search for a list. If I cannot find it, I just type over here list, there it is, an icon list. I drag it here below. Before I start to fill that in, I click on the plus again because I want to have a call to action button. Drag it over here. Awesome. And then here at the right, I click on the plus, I search for an image, I drag it here, I click over here, I click on upload files, select files and I want to go for an image from myself. This one, wow, open, I copy the title, I paste the title in the alt text and I paste the title in the description. That's how I roll. If I click on publish I can see the results, learn how to make a website using WordPress while the title is clear. I don't like how it's looking. You can do two things, you can do a lot of things but you can have a light background and dark text or you can have a colored background and light text. Well it's up to you what you choose. I will show you both versions. So over here I'm okay with this for now I will change this later I think it's a bit big. Over here I want to change the content so I click on it. Remember content style advanced so if I want to change the content I click over here. I want to remove all the other items I only want to display the first one. Then I click over here and subscribers on YouTube. Now I can duplicate it and I already have to check over here. I click on it and I change the information 200 plus hours of WordPress tutorials. I want to be found on WordPress tutorials. If people search for WordPress tutorial there are a few sponsored results, there are videos, I want to be here because then you get a lot of views. More videos, I'm not even there, that's why I only have a million subscribers and not 30 million subscribers. Learn WordPress, wordpress.com, so I want to be found here, so in order to do that I want to use the word WordPress in my website now and then. Okay, duplicate it and then the third one I make free pre-made websites. Awesome. Then I go to the style and I can have space between, I can increase it, I can have a different alignment, align it at the left, I can have a divider in between. I don't want that. Then we go to the icon. First of all, I want to change the color to a primary color, which is orange. I want to increase the size of the icon 20. The gap between the icon and the text, it's fine with me. I can change it once we get rid of it. Then I close this and I go to the text. I go for typography, let's say weight bold, and I can make it bigger. So how about 18, something like that. Awesome. Then I go to the third area, click here, and I hover over it, it looks weird. Why? Because I have to adjust that in the settings, and I go to buttons, if I go to hover, I need to add the color white over here. So when I hover over it, yes, still is white for every button I will add to the website. So the only thing I have to do over here, click change the content because I already adjusted the style. So I say get started. So I can have a page get started. I think I don't have that yet so I just say get dash started and I need to create that page later or I say hashtag, I'll do this later, publish. I can have an icon if I want to. Or something like this. Get started. When I hover over it nothing happens but let's see if I go to the style, button, normal, hover. I can have a transition, shrink. For now I'm okay. Changing the color is enough for me. We're going to talk about how you can customize the hover animation right now it's okay. Publish, automatically I see the results so you can create something like this. What I want to do for the sake of the tutorial I want to have a new area over here. Flexbox, arrow down, what I want to do I want to add an image over here. With nothing in it. But then I see the width of the website because we have no header yet. And then also over here I want to make this a little bit darker. So we can see when it ends. When this section or container ends. So, okay I see the width is aligning beautifully also over here, but there's so much more we can do over here. But now we see the difference in color, so we see where this ends and I see that I'm floating, don't want that. So how can we fix a few things? First I want to make sure that I'm not floating anymore. So what I can do, I can click over here, go to the structure. What I see over here, so this is the temp container, this one, so we can remove this later, let me drag it over here. Here is the container, I call this the hero light. And if I open this I have two containers, information and an image. Well in that image container I have an image but I don't need to have a container to contain my image so I can drag this one on top. So now I have a container, an image and a container so let me get rid of the container over here. So now I have a container called hero light. Then I have in that container, one container at the left with three elements in it. And then at the right, I have the image, which is not a container. So how can I make this look better? Let me show you. But the first thing I already did is there's no more space over here so I'm not floating anymore. So that's what I wanted. But what I actually want to do, I want to make this image a bit smaller and I want this text to be a lot longer, maybe until here. How can I do that? I can go to the information container, I go to layout and I want to increase the width. Right now it's 50%, I can increase it like that. And you'll see that now I have a bit more text. But this image becomes smaller, now it's going up. How can I bring this down again? I click over here and go to Advanced. And here at Align Self, I say, and so it goes down again. If I take a look at the results, this is a bit longer. I want it to be even longer. How can I do that? Because I'm already at 100%. Well there is a trick. Normally look at this, normally this word would never go over this line because over here starts a new element. So how can I make sure that there is a little bit of overlap? Well there's a trick for that. By the way there are so many different things you can do in order to get the same results. So this is how I will do this. In order to shift myself more to the left and make this text longer, I have a trick. Important for me is that the right of this image, this right area, is aligning with this area and that the left area here is aligning with the left area. So I'm going to do a trick. Let me show you what I'm going to do. I bring this back to 70% and what I want to do now, I want to click over here, then I go to layout, so of the container, let me show you the hero light, normally the width is 1120. So what I will do, I will increase it with 200 pixels, so I will make it 1320. So now if I publish this, look at this. Now here is the left edge of our website, here is the right edge and this one is over it with 100 pixels and this one is over it with 100 pixels. And now I want to bring them back together. How can I do that? Well, first I go to transform, normal, offset, I click on it and then I say offset X 100, not 3100, 100. I do the same with the image, this one, advanced, close this, go to transform, offset, but this time on the X minus 100. So I said to Elementor that the width should be 200 pixels wider but then I shifted this 100 pixels to the right and this to the left and now we see the overlap. So websites is take a look at this imaginary vertical rule, ruler it's crossing that area. And that's exactly what I want. And it's still between the 1120 pixels. So that's how you can work around things. And now I'm going to fine tune it because this is not what I want. I get rid of this. So now over here, I go to the container. Layout. Let's increase it a bit more, let's say 80. Let's see if something changed over here. Yes, now I have learned how to make a website using WordPress. This is how I want to display this. I think my image can be a bit like this. I really like it. Okay, I need to increase this a bit more. Yeah, better. So this is one way of creating this. What else we can do? I can duplicate it. Now I can do it the other way around. I click over here, I go to the style, I go to gradient and I can choose the light purple color. Then I go to the first one and make it a lot lighter like that. And now I can play around with this. First this is linear, I can change the angle, I can change the location, make it something like this. But what I prefer to do, I like to change the type to radial. So there's a nice light area. I can also go to the position and say it should not be in the center but at the bottom right like that. But it's a big area so what I prefer to do with location, I can increase it, well not too much. I prefer to increase the dark area so I bring this to the left. So there's a small area over here with a highlight and if I publish it, it looks like that. Well other things need to be adjusted so over here go to style, text color and change it to white also over here the text click on it style text white so you can have something like this or something like this it's almost the opposite and I prefer this one so I go with this one but there's something I want to do. I am not a CSS guru. CSS is Cascading Style Sheets and it helps you to style your website. And actually, WordPress and Elementor Pro are doing that for us. We drag a slider and then the CSS code is changed based on our slider. So we do the fun stuff, the easy stuff, and Elementor Pro. And WordPress are doing the hard stuff. Well, in some cases, it can be that you need to use your own custom CSS. I'm not a CSS guru, but I know a few things, and I will show you those. So I will teach you how you can adjust a few things in your website using custom CSS. First, click on the image, and instead of going to advanced and change the custom width over here, I want to go to the style, go to pixels, and change the width over there. So this will not be touched but this can be made a bit smaller. Like that. I always want to check how it will look by clicking here or by clicking here. So you see the difference here. This is the bigger image. Here it is a bit smaller. Okay. What Over here, I want to have a background so I can go to advanced of the heading, close layout, go to background and then background type. I choose the secondary color like that but then it's also covering this area. I don't want that. So I get rid of this like that. Well in order to do that I need to use CSS. CSS is Cascading Style Sheets. I did my last course for CSS in 2007. That's from 17 years ago. So I don't know that much about it anymore. But what I do know is that you can be helped by ChatGPT. I have the free version of ChatGPT. So what I can do, I can go to chat.openai. I will show you what I've done. Then I will show you how I will do it again. Over here, this is what I searched today. I searched give me a CSS code for h2 titles and Elementor that need to have a colored background and that background has to be has a need to have border radius of 20 pixels. So I did that and then I asked but um it needs to be around the text not around the whole element. So then I got this code so what I can do me a CSS code for Elementor that gives my page 1 title a darker background only around the text not around the whole element. Okay, so now I can grab this whole area. I can click over here. What I prefer to do, this is, if you take a look here at the content, page one. So now I can click over here, site settings. I prefer to keep all my CSS code at one place. So I scroll down at the site settings and I go to custom CSS. I paste it. the site settings and I go to custom CSS. I paste it and now something happens. Well, also a few things I don't like. So I want to get rid of all the purple text and I'll explain a bit what is going on. So the background color is black, but then 50% of it. Well, I like that actually, so I leave that. There's a border radius. I can increase it and then show you what is happening. But it's not, since it's one line, it's not working like this. So I get rid of the border radius. The color of the text is white. I already have that so I get rid of that. So what is happening here? Display is in line. What I want to change the padding. So if I would say 0 pixels, 0 sorry 0 pixels, 0 pixels and 0 pixels, it's top right under left. So if I would say 0 everywhere, it looks say 10, but then there's a lot of space over here. So you know what? In order for the purpose of the tutorial I say hashtag 000, now the background is black, then I click on save changes, closes, click over here, go to style, typography, I want to increase the line height. I want to increase it even more so I say 110. Okay, so I see this is what I want to have. But then there's something with the spacing. Here's less space than here, so how can I fix that? I go back to the site settings, to custom CSS, and then let's play around. So at the top, Troll, you know, T-R-O-L, Troll, top, right, under, left, top, I need nothing because there's a lot already. Let's go to under, let's say 10, okay, and then left, let's say 10 and right and left can be 15, T R O L, so right and left 15, top 0 and below like that. Okay save the changes and sometimes making websites is solving problems, so I solve this but now there's a new problem, there's no gap, so I close this, I click over here, I go to the typography and I change this to 120, okay, but again it's solving problems. So here there's a nice space, but because it's one sentence I can make three different headings but that's making a mess of the code. So I say one heading, heading one, how can I increase space over here? I click over here, I go to content and then I go again, CSS space code, it fits. So you can add a space manually. So learn how to, I paste the code, so there's a space. Now I need to go to a new line so I say opening br space slash forward slash closing but now I need to have a space over here again so I paste it again and then I need to get rid of the other space. Make a website I paste it so let me paste this whole thing from to to make. I'm sorry if I make it too complicated just to get this background. Using WordPress, so far, almost so good. Now, there's a new problem. So I go over here, a bit more, maybe 3%. Refresh, learn how to make a website using WordPress. I think it's way too big, so I go over here to the text style, let's say 80, decrease it, I think it's great. Maybe change the color. So if I go to the colors, I would like to have the secondary color. Copy that, close it, go to, sorry, go back to the CSS settings and I paste the color here. Learn how to make your website. That's looking better already, less aggressive. Save the changes. So I get rid of this area, closing this. Okay, publish. Learn how to make a website using WordPress. One million subscribers on YouTube, more than 200 hours of WordPress tutorials, free pre-made websites in this area. Now I think Verdi can be a bit bigger, so I go to the image style, I get rid of it, let's see how big I am and I'm happy with the results. So it took some while, I have to be honest, we're diving deep at once with all this background stuff which is not necessary but I just want to show you exactly how I have my website in mind. So I also want to show you the difficult or complicated stuff. And if you want to create something else and duplicate it, you can say we make websites that generate new clients and I go to the style, to the text, mimic websites that generate I can say digital marketing and change all the content and then get started or get a quote. So that's what you can do and then here you can upload an image. I don't know, you can get rid of the image over here and click over here, go to style, background overlay, I used this image, select, I can make it fully opaque. We make websites that generate new clients. So you can play around with all these settings and in that way in a few clicks you can change the look of you, change the content so you can make it look as you want it to look with the information you want to display in your website. I'm happy with this. If you ask me this design looks great but how does it look on other devices, on a tablet, on a smartphone because more than 50% of your visitors enter your website probably through a smartphone. So it's amazing if your website looks cool on a big screen, how does it look on all devices? Well, let me show you how we can configure that. By default, I think Element Pro is doing an amazing job with that, with optimizing for all devices. But here and there, we need to tweak a few things and I will show you how we can do it. I prefer to optimize my container after I finish a container. So if I copy it and paste it somewhere else on my website, I don't have to optimize it for all devices multiple times. So after every container I create, in this case, the hero, I want to make it mobile-friendly, so I know when I copy and paste it, I just set it. So let's optimize this for all devices. Now we need to optimize it for all devices. How can we optimize it for all devices? Let me close this, close this. First, we want to take a look how it looks, and I think it will look a little bit messy because we played around with this advanced CSS stuff. So I click over here to go to the tablet view and we also played around with those shifting settings remember. So over here, add containers and go to layout. See the width is still really big. Let's not change this but what I want to do I want to go over here. So to the information container, go to advanced, close the layout, go to transform and over here at offset, it's still using that offset. So when you go to the tablet view, it automatically takes all the information from the desktop, so also the font size 80 and then we can overwrite it, overrule it with all the settings in the tablet view and wherever you can change something for a different device is where you will see this icon. So by default it says 100 because that's what we did on the desktop. It's a little bit greyish because it's not a definite number but it's taking that number since we did not change anything but I can overrule that by creating a new value over here which is zero. The same is with the image, advanced, transform, I will overwrite this, overrule this, zero and then of course I need to go to the heading. I can do that over here or over here. Go to the style, typography and then again I see the size for a tablet can be made smaller. It's 80 but I can make it way smaller. I want to have three rows, learn how to make a website using WordPress. So let's go for 40 and then here the line height. I can definitely make that smaller and then it starts to look decent. Don't you think? I think so. Let's see if I can play around with the size over here so there's advanced custom width let me see if I can increase it without messing around too much with other stuff. Okay publish, learn how to make earbuds using WordPress. WordPress, I can also make this smaller. Go over here, layout, increase it, it says in pixels I want to prefer percentage. I can make my cell a bit bigger so I say 60, then I go over here, content, sorry, style. I should remember that I'm making a tutorial, I should not be too fast, so sorry. Decrease that and now, well, maybe a bit bigger, 60 is because now my face is really big so I need to find a middle way. Okay, then I go to the tablet, learn how to make a website, make it smaller, again those three rows is what I want, make use of all space, not too much, and then I want to go to the line height, learn how to make a website, this information. And what I can do now, I can click on the image and then I can go to padding. Let's first make this smaller. Okay, that's what we can do. Or I leave this as it is. Or I can go to the margin, uncheck this, margin top. So with margin I can create space, but I can also have negative space. So I can bring this up, the more I bring this up, the more I guess it will be interfering with the other content, which I don't want. But the great thing is it's also bringing this up, so it's not leaving any space. So this is what people will see on a mobile, maybe that's not what I want because I also want to display my content over here. So let's say minus 200 and if I go to the left and I increase that, then I shift myself, my image to the right. And this can take a while, so meanwhile I will watch a movie on the other computer. So I've been watching the Lord of the Rings and now I'm here at the right place. Well, you know what, I can bring this back a bit. That's the best option. So this is what people will see when they enter my website on a phone. Learn how to make a website using WordPress. So that's how you optimize for all devices. This looks weird, but if I take a look over here, it looks perfectly fine. We are going to create a second part, a second container in our website. I'm going to show you a few tricks on how to make it design-wise a little bit cooler, but also functional. And what I want to do now, I want to show people my unique selling points. I have a company about YouTube tutorials, helping people to make their own website, what are my unique selling points? Or what are things I want to display to my visitor to show some authority or to show people, display to people that I know what I'm doing and that I'm successful and that I can help them? Well, in your case, it can be different things. Let me show you how we're going to create that area. Right now, I want to create a second area here below with three things I want to say about me or about my company. So in your case, for your company, it can be three or four or two things that you're really proud of that makes you stand out from your competitors. And then you can create an area like this. I keep this over here, this image for the width of the website as a reference. So I click on the plus below the first container. Now I can create a container in between the hero and the temp. By the way, the hero is not a live hero anymore. I collapse this. So again, click on the plus. I want to have three areas, but I want to start with one. So I click on the flex box and I go for a container that goes from left to right. I click on the plus and I go for, I can go for an icon box or I can go for a flip box. Since we use Elementor Pro, we have the flip box. It's a pro element. So the first thing I want to do, go to advanced, to the width, change it to custom, let's say 30, 30%. By default, this heading is really big. So that's why it looks so big and ugly, but I'm gonna make it look so much better. So I go to the content. That's what I like to do first, and I want to say something about the amount of videos I have on my YouTube channel. So I go for the title which is 1500 plus, and then the description will be videos or videos. Then I go for the icon, and I want to have a play button. Play. I think this one is great. There's no YouTube thing. Oh, there is. So I could do this one. But you know what? Let's keep it with a play button. Okay. Really ugly. I can go to the background and I want to make that white. So I go to background type. So in this case, it's not that all the styles are at the style tab, in this case since we use a flip box, it also has the style over here. So now I don't see the colors anymore, the text so I bring this back for now, I will do this later. So that's okay. This then at the back I want to have some information about my company, no title tag so I get rid of that and I want to have a description about what I teach about. I teach people how to… I can have a subscribe button over here but I don't want that so I get rid of it. Okay, the background can also be white. So now I need to go to the style and let's see the first thing the icon. I can change the primary color. Let's make it orange. Okay. Then I like this color already that's there. Then I scroll down all the way. So here at description I want to change the color to the text color. Now I can go back to the content background and make it white. Okay. I go back to the style of the front. Padding I uncheck it. The alignment is in the center. I want this to be in the middle. The border type. I can have a border over here. But I don't need that right now. I can go to the icon spacing. I don't want to have too much space. Primary colors, okay. The icon size, not too big. Let's say 40. I can rotate it if I want to. I don't want that. And there's the title. I don't want to have a lot of spacing. I want everything to be close to each other. The text color is great. The typography, it can be smaller, but more bold so let's say 30, weight, black like that and then videos, the text videos can also be bigger, 20 and maybe a little bit more spacing like that. hover over it, I should see the text but I don't see that so I go to the style tab, back and then I need to change the description color, that's the only one I have to. Text and the great thing right now at the back I only see information about the text stroke and the description but if I would go to content, I would go to the back, now I also have information about the title. So based on what I fill in over here, in this case title, information is shown here at the style so that makes it so much easier to work with. It will not be too overwhelming with all the options you have over here. So let me publish it. Let's see. It looks really minimal. I think the text can be a bit bigger, so we can go to typography. Am I still at the right area? No. Back, description, typography, and make it bigger. The great thing is when you edit things here at the style, depending on where you are, if you're at the front, you will see the front, and when you click on the back then you see the back without hovering so that makes it easier to work with. I want to say 20 and then I think no 18 is okay. Okay well a few things I want to do. I will give this a background for now. So I click on the container, style, just a simple color just for the sake of seeing what we are doing. So I can click on the element, go to content and then there's a third option, settings. It's an H3, the title that's perfect. There's a border radius. So if I would say 20, that's the one I like. It looks like this. Publish. I can show it like this. It's called a flip box, but I can also change the flip effect to slide or push well I like slide I want to get rid of the background of the container I call this container three unique selling points, USBs so I can navigate through it, I go to the style the background color, I bring it back to nothing. Then I go to advanced. I uncheck the padding. So now there's no padding outside of this area or inside this area. So I click over here. I go to advanced. I uncheck the margin and now I bring this back minus. So I want to have an overlap over here. So right now it will look a little bit weird, but we'll fix it. We're gonna do some math. So what I want to do, I want 50% of this title of this area to be in overlap with the first container. So let's say minus 60. Publish. Don't think about this, we'll fix this later. I think this is perfect. But what I want to do, I want to have a shadow, a box shadow. So right now, I have this border radius here at content, settings, border radius. But what happens if I go to advanced and I go to border, near I want to have a box shadow. Look at this. The shadow is only over the element. It's not taking the border with it. So that's a weird, it looks weird. So I don't want that. How can I fix that? Well, let me go over here to the flip box content, settings, get rid of the border radius here. Then I go to advanced border. What I need to do, I need to create a border in order to get a border radius because if I would say border radius right now 50 or 40 and I automatically refresh, I don't see the shadows looking weird now and there's no border. So what I need to do in order to fix this first, let me click over here on the container advanced and at the bottom it increases with 60. I see what's happening below the element. It's just looking weird. So what I need to do, element advanced border, the border radius is over the border. But there's no border yet. So what I need to do, I need to create a border solid and now I can have a border radius. So if the border width is 20, now I can have a border radius over the border. So I also should say 20 over here. And this is how I roll. I figure things out. Sometimes I'm working in a way that's maybe not the best way, but as long as it's working for me, I'm happy. So I tried to work with the content settings over here with the radius. I found out it's not working with the shadow. I do want to have a shadow, so I get rid of this, I go to advanced and then I play around with the border and that's then how it works. The only thing is I want to change this border of course to, let's see, I want this to be 20, so I want to do now, click over here, go to advanced layout and I get rid of the custom width. So I get rid of it and I go back to default. Now I want to have three areas of those next to each other. Copy, copy, so I duplicate it twice. And since I'm duplicating it, and by default, I can have as much as I want, by the way, so I can duplicate it, duplicate it, duplicate it. It will all be within one row. Doesn't matter how much I'm creating. That's because if I take a look at the container layout, I'm not making use of the wrapping, but I only want to use three. So in this case, it's perfect to have no wrapping. Okay, some information. So the second area, I want to change the content, so I click on it, change the icon and content. So I want to talk about how much experience I have, experience or metal. And then I can say 25 plus years, I made my first website in 1999, so it's exactly 25 years. How crazy is that? Front page express, my first website experience, and then of course I need to have a text over here so I go to the back. Checkmark is always working or in this case I could say YouTube and I can say more than a million subscribers. I think meanwhile it's 1.1. Okay, and then of course I can share things over here. I decided to start. So let's see how that will look. Automatically it's over the whole width with a gap of 30 pixels. Information, information, information. The only thing is it doesn't look right over here. So in order to fix that, let me show you how you can do that. In order to fix this area over here, I click over here, I go to advanced and I see I have minus 60. So over here, what I could do, but I should not do, I can uncheck this and I say at the bottom I want to increase it with 60, then I bring this back, I don't want to do that. So I could say over here with padding I can do 60 but then I'm pushing myself back so I'm floating again so I don't want to do that. So in this case I would go to this button or even better to this container so it's the left information container advanced. Uncheck this and at the bottom I can increase this. And the great thing is that I'm still floating with it. So I can say 120. So I create twice as much space, publish. So here it is 60. I'm fine with that. But I also need to have space over here. So at the top I also say 60, refresh, learn how to make a website using WordPress and when people see something like this they're like hey what else is here so they can scroll down but then there's this gap. How can I fix that? Let me see. I go to the image. I uncheck the margin. And at the bottom I can decrease it. Okay. And of course I need to check how it looks on a different device. It's looking okay. So what I've done here at the hero, I changed a few settings. So I need to bring those back I set the zero so for the padding of the tablet I would say 45 everywhere not 155 but 45 accept the button and then for the smartphone I should say let's start with zero and I think, let's see 30 is okay, uncheck it because here at the bottom I don't want to have 30. Well this looks really weird that's why we're also going to fix that for the smartphone. Let's first go over here. Then I go to three unique selling points. I select it then I go to the tablet version. It can look weird but I know that on a tablet it will look great. Let me show you in a minute. it on a smartphone however this is not how I want it to be displayed so what I will do I will go to layout for the direction of the smartphone I don't use the overlap. One more thing I need to do over here at the tablet, three unique selling points at the make it smaller so now it's looking okay I can bring it up a bit more so not everywhere sorry only the top 0,0,0 I can say minus 60 then increase it a bit further, 120 and that's how you do it. It's refreshed already so I can make it smaller for the tablet. If this is important. Because if you already see this text, it just looks weird. By the way, that's why I know why that happened, that I did not see this before. Why didn't you tell me? No, just kidding. I made an error over here. I went to the front area, need to remove this, and I go to the back, and there I need to paste it. Over here, front, subscribers. Okay let's take no risk over here. What I want to do, click over here, go to the layout and for a tablet it's better to place them below each other. Go to the advanced area. Bring this back to minus nothing. Or not. Minus 60. Just play around with it. You can also leave it there and it looks like that. So two areas. I think it looks great. This is one of my most loved features in Elementor Pro. We already talked about it in the basic instructions. We're going to talk about wrapping and the grow function. And in that way you can style everything in a beautiful way and keep your website light without a lot of unnecessary containers. I love this. I use it a lot in my website, the grow function with wrapping. I'm going to talk you through it coming up right now. Are you ready for the next area in your website? In my case, I teach people how to make a website. So I want to show something about the service I offer. We go to the big screen. I don't need this anymore. The temp, so I say, thank you. Bye bye. I want to create a new area showing some services. So I click on the plus, and go for the flex box and what I want to teach you in this area of the tutorial is how to make your website as light as possible. I don't want to have unnecessary codes so what I could do, let me show you real quick, I can have this area then I want to go for a heading, below that I want to have a divider, so like that. You don't have to follow along with this. Then I could have a new container here below. In that container, I want to have three new containers. So I click over here, arrow right, then duplicate, duplicate. So this is actually what I want to create. Heading, text, and then talk about a few services. But I have a container. In the container, I have another container and another container. So it's a lot of containers and there's a way we can do this without making your website unnecessary heavy. So let me show you how I would do this and meanwhile you will learn a new thing. So start from scratch. I click on the plus. I go for the flexbox and the arrow down. So I have one container with all the elements below each other. I double click over here, I call this one start learning now because I want to help people how they can start learning by two services. Let's talk about it in a minute. The first thing I want to do, I want to add the header, the heading and I say start learning now. Somehow this title is in color I don't want. So what I will do in order to save time, every time I create a heading two, I want there to be a different color and I want it to be in capitals. So I go to the site settings, I go to typography. What I see over here, H2, is this color. I don't want that. So I click on the global color and I go for light purple. Yes. And then at typography, I say transform to uppercase. Yes. Now if I add a new heading, at once, it is exactly how I want it. And then that way we can save time. That makes me excited because I like to save time because if I save time I have more time to create more tutorials. How cool is that? Depends on how cool you think this tutorial is. If you think this tutorial is cool or nice or helpful in any way, maybe not in the way of learning websites, but maybe you like to hear my voice, in that way I can help you. Maybe I should talk like this tutorial, please would you like to like this video by clicking on the thumbs up below the video or next to the video, I don't know, depending on the device you look at it. What am I saying? Please like the video. Let's continue. What I want to do, I go to the style, bring it to the center. That's it. I click on the plus because I go for a new element for the divider. How I prefer to work, if I know the titles, I just say divider. I search here and then it is there. I can select it. Okay, a solid color. I can also have all these cool things, something like that. Well, let's stick with this for now because I want to change the color. Let's tell color, primary color. I go back to content and I want to change it back to a solid. The width I go for pixels, let's say 300 pixels. I want it to be in the center. I can have something in between so I can have a text saying divider or start learning now. But I prefer to have nothing. I can also have a heart, because I have a heart passion for teaching and then that heart could be this color. Wow! But I don't want thicker line so I go to the style, the amount of pixels, how about 2 and the gap in between nothing, because by default there is a gap of 30 pixels. So below that I want to have a text area. So I drag the text editor here below. If I cannot see it, sometimes I don't see it, I drag it above. And then after that I can drag it here below. If you don't like, the width, I don't like to have text totally from the left to the right. So when I have a text like this I go to advanced of this particular element and I go to the width and I change it to custom and I like to use the amount of pixels, 600. But now it's not in the center. I bring it to the center or I go to the container, bring it in the center like that. So far so good but now it's getting a little bit tricky because I want to have two containers here below with two surfaces. So I drag the container here below, okay, but I want it to be next to each other. So how can I do that? Well, I can't. I can, okay, let me show you in a minute. First let me work with this container. I change the content width to full width and then the percentage to 40. Okay. Now I want to go to the advanced area, get rid of the padding like that, and I want to have a background image. So I go to the style, classic image, upload files, select files, and I have two images over here. But there are 760 kilobytes, that's a lot. So what I would prefer to do, I like to go to tinypng.com to make images smaller. So I can drop my images here or I can click on it and I grab two images, hold shift, 30 tutorials and 30 courses. I always rename my images because I can also be found on those images when people search for those terms that I have in my title. There they go. They go from 760 to 126 kilobytes which is a lot smaller. They go to my downloads. So now I can select files, I go to my downloads, I select those two. Now they are a lot smaller. So that's how I prefer to keep my website light. First I want to talk about tutorials. So my tutorials are on YouTube, that's why I have more than a million subscribers which hopefully you are one of them. This looks a little bit weird let me get back to that later. I click on the plus I want to go for a heading and below that I want to go for a button. Then I go to the container to the background image and I want it to be covering the image. Then I go to layout and I go to the minimum height and I increase that until that image starts moving. Although this is really high, so what I also can do, click on the container and I bring this to 30%. 30 percent. Then I make this smaller. The height 450. Perfect. Here at the container layout I want the direction to be everything below each other but I want to justify the content at the end, at the bottom like that. Then I click on this text and over here I say tutorials, I make it page 3 which has a different style. I go to the advanced area and I want to increase the padding width. Let's see, wait this is off the button I want to do it at the container level. So, 30 pixels, awesome. The gap between things could be less. There's a lot of space in between. Let's say 10. Then I go to tutorials, make it a bit smaller, really bold, like black bolt. Can be a bit bigger but I don't see the text as well because the background is not that dark. So what I like to do, I click on the container and go to the style. I already have this background over here with this beautiful person. It looks like me. It is not me. It is a picture of me. That was funny. Then I go to the background overlay and now I want to do something cool. I think it's cool. I go to the background type which is the gradient and the first color is let's go for the secondary color and the secondary color let's do the same color secondary but I only want to have the lower part to be this color. First let me go to the opacity, make it 1 so now we don't see the background image. But for the first color I go to the transparency bar here below and I drag it to the left. So now only the lower area has that background. But I want to play around with the location because actually I only want the lower part to be visible. So I have to play around with the location. So if I bring this down, then the background goes up. Okay. So I go to the location here and then I bring that down. And now I see, start to see the result I have in mind. So now there's a nice gradient from here until 61%. So around this, And maybe drag this up a bit and maybe, well play around with it until you're satisfied with it. I'm happy with this. Tutorials, okay. But I want to have two areas next to each other. So how can I do that? You think maybe I can duplicate it but then it's below each other. So what I can do, I can create a new container. Drag it in there and the other one also. Then wait a minute, I can do that but I don't want to do that. What I prefer, I go to this container, I go to the direction I say from left to right. But now everything is next to each other. So I scroll down and I want to make use of the wrapping tool. But now it's a mess. How can we fix this mess? Click over here. I go to advanced. I change the width to full width. And it's still in the center. So now it's pushing everything else below. So now this is next to each other. So over here I also say advanced width 100%. Then I go to this area but now the custom width is already set. So how can I fix this? Well I could say full width and then I can play around with the padding. Well, I know that the whole width of the website is 1120. So I can go to the calculator, 1120, 1120 minus 600 is 520 divided by two, 260. So what I can say over here at the padding, uncheck this, right I can say 260 and left I can say 260. Now the width of this area is 600 pixels and this is pushed below. If I click over here and I scroll down I can justify the content in the center. Voila! This is what I have in mind and now we only used one container well of course we used two containers over here, but we did not have to use an extra container. So in that way, I like to work with wrapping and in the beginning it can be like a bit complicated, but the more you play around with it, the more you watch my tutorials, the better you will become at it. So now it's a matter of copying and pasting. I already copied and pasted now I have to adjust it. So I click over here and go to the style and grab the second image which is about courses. So no more YouTube button here at the background but now it's about courses. So over here I see courses. Go to courses and then over here courses. Awesome. How does it look on a different device? Let's find out. That's what I thought. Over here, of course, we need to fix a few things. Because over here, I want to use 45 pixels everywhere. And over here, I can use a width in percentage of 45. Also here. I don't know, but I feel happy right now, like wow. It looks great. Only thing here, at the top, it's just individually 45 and 45. And at the top and at the bottom, nothing. Okay, and on the smartphone, start learning now. There needs to be no padding or everywhere the padding of 30 or at the top nothing, the bottom nothing. And then here we have tutorials and here we have courses and that is how you can optimize it for all devices. devices, publish, let's take a look. I love it. I hope you do too. One more thing over here I have edges over here it's rounded I mean with edges I mean rounded edges so I want to have the same over here so I go to the container I can go to style and border and then I can say 20. Also here style border 20 and that way I can maintain the same style throughout my website. Let's talk about animations. If you want to, you can use animations within Elementor Pro and it can make your design look really cool when you're scrolling or when you're entering the hero of your website. So when people enter your website, you can have a lot of nice animations. Let me show you how you can configure that. Keep in mind that when you do that, it can make your website a bit slower. It's not a deal breaker, but I would not over-animate your website. What I like to do is when I scroll down, if you see a nice animation, I will show you how you can create something like that. So let's get into it right now. Right now, our website is quite a bit static. So if I refresh the page, everything is there at once. But I would like to have some animations to make it more alive. So let me show you what you can do in Elementor. I go to the back end, I scroll up and I go to the advanced step. I close layout or scroll down and I go to motion effects. And there is entrance animation. So that means what animation should it be when you see this for the first time? So I can select something, I can say fade in and then it fade in. So right now I'm here at the container. So the container fades in. So if I publish it, you see it fades in. What I also can do, I can make it fade in slower, like that. Or I can delay it, so I can say after a half second, then this container will appear. See? So the website is loading and then it looks like that. Well, I think that's okay. Let's do after 1 10th of a second. So it has 1 10th to load and then this can all be displayed. But what you also can do, now everything appears, but it can also make entrance animations for every single element. So I go to the heading, advanced, close layout, go to motion effects, and then entrance animation, I say fade in from down. So it's not going down, it's not going to the left, it's coming from the left so fade in from left comes from the left goes to the right so let's say after a half second then I click over here advanced motion effects entrance fade in from the left after 3 fourth of a second. So 750 milliseconds. And then this one, advanced motion effects from the left after one second, a thousand milliseconds. Then I can click over here and I want that to appear also after one second. Fade in, up. So this time it's not coming from up but it's going to up. So it's a little bit confusing. Down is going down but left is not going left. So that's a little bit confusing. It's coming from left. I'm here to explain to you what is what. it goes up, it doesn't come from up. But if I do that, let's take a look. Okay, that is okay, but what I prefer is fading from the left. So fading from right after 1100 seconds. So a little bit later is when the button appears. So it will look like this. Nice. Then, I want to make this appear. How can I do that? I click on it. Advanced. Motion effects. Fade in. Up. After 1250 milliseconds, I mean. Otherwise, you have to wait for a long time. So it's actually 1.25 seconds. Also up after 1.5 seconds and then the latest one, transform, sorry motion effects, just kidding. 1,750 milliseconds and then you get something like this. Actually, I want this to appear on the homepage. I know I zoomed in a little bit with my screen. I have a 4K screen. So normally you would see something like this. So I think that's okay. Yes, so I'll keep it with that. But since I'm zoomed in, you don't see it at once. I can also make the text a bit smaller, but on a normal screen, you should be able to see this at once, this area over here. So when we scroll down we can also make this animate. So this is all fine with me. Here I can say advanced layout, motion effects, entrance from the left and I can also have from the right, this time I want to have a small delay. So they do not appear at the same time, but there's a small delay. I think that looks better. So there's no delay because when I scroll down, you see it at once. Only the delay of 0.25 seconds. And maybe it is better, it's what you prefer, to have a slow duration. Slow. Let's see how that will look. Nice, nice, nice. I scroll down. Wow! No, I choose to be normal. I'm a very normal person. That's also what I want to reflect in the duration of my animation in the middle of my website. Bam, bam, bam. Bam, bam. You don't have to do this for your whole website. If you go to Tesla or Apple, you don't see that. But you see that other websites. So it's up to you. I just want to show you that it is possible. I think it's nice to have some animations. And I also would like to have some interactions. When you hover somewhere or when you scroll, that's not as sticky as it is right now. So let me show you how you can accomplish that. I like to make my website interactive. To give you an example, when I hover over a button, I like the color to change, because then people know, hey, this is a link, this is a button. But there are more ways to make our website interactive. Let me show you how. In order to make my website more interactive, I go to the back end, and I can select any element or container and make it interactive. So for instance, this button, in the case of a button, I can go to, let me see the content or the style, go to hover and then create a transition. So with a button, that's the case, but with this, that style, it's not the case. But what I can do, I can go to an element, go to advanced, let's go to the button, to advanced. I close layout and then I can go to transform. I can by default make it look like this. Well, that's not what I have in mind, but if I go to hover and I go to rotate, I can rotate it. So when I hover over it, it rotates. In this case, it's rotating like this because it's taking the whole width of this element as a whole. So it's not doing this from the center. But what I can do, go to offset and say minus 10. And when I hover over it, there's an animation. I can also say 10, that's better in this case. So I can do a lot of things. I can do rotation, offset, scale, skew, flip horizontal, flip vertical. I almost always use rotate or offset. And then I can change the transition so I can make it really slow. But I like the default one. So that's one thing you can do. Over here, I have an element. Transform by default, it looks okay. I can rotate it a bit by default, but I'm okay with how it looks so I bring this back set it to default but if I go to hover I like to rotate it a bit so let's say two degrees and also here I can use the offset or a scale this is making it smaller so I can say 1.2, 1.1 well I think it's too much so I can also say 1.05, but I prefer not to use this, only the rotation like that. I can copy the style and paste the style. The only thing is when I do that and I click on this button that I also copied the transformation, sorry, the motion effect, this delay, which is normally 1500 in this case. So in this case I try not to copy and paste it so I go to the third one and I have to do it manually so I go to hover rotate to publish. So now we have the animation in the beginning. Now if I hover over here. This happens. I like it. I can do the same here. Click on the container, transform, hover, rotate, one. Rotate one. Sorry, not three, one. I scroll down and also here I can apply the same principle layout transform hover, sorry I did it at the wrong place that sometimes happens I just want to show you the honest journey so I did it at the normal part I want to do that the hover part so over here I say Transform, nothing, and then hover, then publish. Great. But there's more we can do. I have this container with a style. What I can do, if I want to, I can go to hover and choose a different image. So this one for instance. So now when I hover over it, it changes to this. You can change the transition duration, I change it to 1. By default it's this one. Well, that's what you can do. I prefer not to do that. You can also go to the background overlay. And when I hover over it, I can change this. I already adjusted this a bit. So two different colors. And the opacity needs to be one. Like that. There is no transition. It's at once. So I don't like that. So let's get rid of that. By clicking on it. What I prefer is the CSS filters. So I can change the contrast or the saturation, change the hue. What happens then only for the overlay it changes a bit. I can change the duration to one. Let's see how that will look. I scroll down and I hover over it. Well it seems there's no transition, so I don't know what's going on over here. Maybe it's not applicable on the CSS, but only on the background type. So let's say, I do secondary. Now it's 1. Yes. Okay, so that's how you can play around with it. Or you can have a different image, change opacity. So in that way you can also have a little bit of interaction when you hover over things. Well I'm okay with the animation, I don't need to have the other stuff. So over here, I get rid of this, I click on it again, transition is back to zero comma three, and I leave it for what it is. But that's how you can create some interaction in your website. I like it. I hope you do too. I want to create an area in my website that is about me. Why am I full of myself? No, but it's good to show some information about you or your company on your homepage and then link it to the about page. That's good for the search results. Don't ask me why. and then link it to the about page. That's good for the search results. Don't ask me why it is the case. So have an about me area on your website, link it to the about me page. There also share more information about yourself or about your company, and that can help you to be found better in the search results. Let me show you how to create an area in your website. When it comes to SEO, it's not all about using the right keywords, using WordPress all the time. No, it's more than that. It is also important to have some information about yourself on your homepage and then refer to the About You or About Us page in your website. So the next area we'll create is an About Us page or About Us area. So I'm gonna create a new container and what I can do, I can create a dark container because we have a big light area again, but I can also continue with the light area. When you have a light area in your website, it looks clean, it gives some rest, so it's up to you. I decided to go for the light area and then I will show you how I can make it a darker area. I want to go for two containers in one container and I always go to the inner containers and there I see no padding. Also here, advanced, no padding. I'll start with an image over here. I can do it two ways. I can have an image in the background over here. So style, background type, image. Let me show you how that looks. Go for the family of Ferdy. I want to tell something about myself, family. I should have done it in English. I accidentally did it in Dutch. So let me show you what I will do. Instead of thinking it's okay I go to the desktop change this to family because I'm focusing on my English audience so I can delete this permanently Now I go for family 30 I optimized the image already, space, copy, paste it and I paste it. I select this image. While you don't see a lot about this image yet, it will come. Now when I add a new heading, it's probably heading 2, so I don't have to style it, I just say about 30. I want to bring it back to 30 and I click on the plus. I go for the text editor and here I'm just going to write something about myself like that and then I want to have a call to action which I can copy, duplicate and drag it down. If it's hard for you to do, command I, you can also do that over here. So I can grab this button. If I click on it, I go there. I can drag it all the way here. With ease. Now it's here below. So that's what I also like about the navigator. It's still called the navigator. Now it's the structure. Sometimes I have to get used when things get a different title. And now I need to bring it back. Below the heading. Now it's back. So let me close this. So I call this about 30. I have two containers. I go to the first container. I call this one family photo. It's empty because I'm only displaying background image and here is about or I say content, 30. And then it has three things, a heading, text button, heading, text area and a button. Publish, command I. Okay. So over here, I can increase the space in between. So right now it's nothing, I can make it 30 and then there's a nice extra space. Then I go over here to the border and I say 20, sorry, 20, there you go. And now I want to click over here, go to the style background and say display size cover. So now it displays, it shows my family. If you talk about me, one of the first things I think about is my family. Family men like to be father and marriage with Anna, two children. My wife prefers we do not show their faces. I totally agree because they are so handsome and good looking that people can get jealous and stuff. She looks like her mother. Yes, enough about that. Okay, so I think it was pretty easy to do. If I would use a dark area, I would duplicate it. So now I have two of those areas, then I can take a look over here. Style, backgrounds, 17 and 50. What I would like is that you can only copy this area. That's not the case yet. I will suggest it as a function because then I can just only copy and paste the background without copying all that other stuff. So what I will do, click over here, go to style, background, gradient, I go for the type linear and I go for the light purple color I guess and then the second color, sorry the first one is that one, the second color is the light purple one so click over here, paste that color, the second one is And it just takes time, you know, to create all this stuff. So I'm okay with taking my time. I want to get in a rush, I'll show you as fast as possible how everything is done, but it's just not how it works. I like to put some music on, bottom right, and then just enjoy making the website. I really like making websites, I hope you do too. I can go to the style, make it white, I really like making websites, I hope you do too. I can go to the style, make it white, go over here, style, make it white and what I prefer, I think I just don't like it. So what I can do, I can click over here or command Z, command Z, click over here, container, go to the style, background type, color, I choose the white color and I go to the border and I say 20 and in that way I can show this as a dark area or as a light area. Well, it's up to you and since I copied it, it has a nice animation but not the same info. text, just read more and over here about 30. Publish. So you know what I will go with the dark area so I get rid of this one. I like spacing of 60 pixels here, 30 pixels. By the way, two things about this area, I used the container with the background image because then automatically the whole height of the image will be used. If this is bigger than this area, so if I can get rid of this, let me see, let me do it this way. If this is smaller, it will automatically adjust. adjust so that's what I like and if it would not fit or if it I don't see the things I want to see over here I can go to the background and change the position so if I would say center center and see more of my legs and stuff I can also say top left so I leave it at default but that's how we can play around so one more time if I get rid of a lot of information over here, then it looks like this. And then over here I can change the focus point or over here I can change the minimum height. Then I can do something over here, or sorry, here, or maybe here. I go to layout and then bring it to the center. So that's how you can roll. Or if you don't want to have this whole area, you can click over here, go to layout, right now it's stretched, if you say center, then it will look like this. And then if you change this, everything stays in the center. If you're bored, you can do something like this, it's kind of funny. It's really, really peaceful. I'll be back in an hour and then we'll continue with the tutorial. It's now an hour later, I'm still having fun doing this. No, let's bring everything back, command Z, let's see how far I can go back after an hour, still everything is there. Okay, I publish it and then we're going to take a look at a new area in our website. Right now, I'm going to create an area in our website that displays our latest blog posts or in my case the latest tutorials, but I want to create that part using an external tutorial about advanced custom fields. There's so much to cover in Elementor Pro. Not everybody wants to use advanced custom fields, so I have a separate tutorial for about it. If you want to watch that, let me show you where you can get it. So what I will do for now, I will just create an area with a static container, with static stuff, and later on in my Advanced Custom Fields tutorial, which you can find on the internet on YouTube, I will show you in a minute where you can replace that area with the latest blog post or your latest tutorials or your latest movies, whatever you want to do, that's going to be explained in the Advanced Custom Fields and Elements Pro tutorial. I have courses and tutorials and I want to show my latest tutorials. If I want to do that, I need to work with four blog posts or with something called tutorials. Well, I have a separate tutorial for that. I'm going to make it. You can go to YouTube, search for Ferdy Korpershoek. Click over here. Go to playlists and there I will have an Elementor Pro tutorials playlist and there I'll talk about how we can make use of advanced custom fields, custom post types and there we'll create blog pages with beautiful layouts made with Elementor and then we can display them over here. So what I will do right now I will just fill in some information, static information not created for the blog post. So I'm not going to go to the plus and go for recent posts and then play around to this. I'm just going to create some static information so I will fast forward and then if you want to learn how to create an area like that using advanced custom fields, creating blog posts and stuff then you can watch the tutorial in the playlist. I will also make sure it's visible over here when I publish it so in that way I don't make this tutorial more than 8 hours. People don't want to learn how to do this, don't have to skip this part. So I will build this and then I will be back with you. And then it will look like this. So if you want to learn how to create something like this later on, follow the tutorial over here or take a look in the description or go to my Elementor Pro playlist. I like to play around with the background to give it a certain style that fits our branding. So let me show you how to do it in two ways. The first thing is using gradients in your website. Let's talk about backgrounds for a moment. Over here I use the color purple and then a light area with a radial, but I can also do something over here to make it a little bit more sparkling, I don't know the right word. So what I can do while keeping the website lightweight is go over here, go to the style, background and I can have a gradient. So I select the first color so you definitely see where this gradient is applied and if second one I can have a gradient like that. But I can also change the angle. What I want to do, I want to have a slightly darker area in my background, so I want to have a radial, so it's a circle, and if you want to get rid of the, the nice, how do you say it? The nice feather, then you can bring this closer to each other, so we can have a circle like this. So let me bring the position to center or left, bottom left, I mean right. Of course I'm going to change this color to something slightly different than white. And the other color I want it to be white. So you see now the edge, you see it definitely a changing color. So now I'm going to bring this, let me see. Okay. Now it is radial, but it's completely from here till here to the point that you will see an edge over here. I don't want that. So I want this area to be smaller. In order to do that I need to go to the second color location, make it smaller. So to illustrate it better let me make this color right now light purple so now you see no more line over here so that's good but I want to make it a smaller area. So this will make it bigger. I can do that for a part and I can direct this to the left but then you see the feather starts from this point up. I don't want that I want it to be at once. So you see the more I drag it to the right the bigger it becomes. Let's say 40 and now I bring back this color because I want to do the same over here. 0, 40, here's the color white, here is this color, then I go to radial, bottom, right. So that's how you can play around with the background and give it some a different design, not completely white, but something like that. So I've created a few gradients in our website that can enhance the look and feel of our website. There are also other ways we can do that. It gives us a little bit more freedom and using those tricks and Elementor Pro, we can have really cool results. So let me show you a free tool where you can create forms, certain objects forms that you can create by yourself, create a gradient and then implement it in Elementor and it will not make your website slower. That's also really cool. So let me show you how you can create something like that. Another way to create a background is using Figma. Figma is free. I don't know if you have to sign up for it, I think so, but it's free. And what I created over here, look at this, a simple shape with the pen tool, I created a few colors over here, two colors. this, export it as an SVG. Look at this, 860 bytes. So I drag it to the desktop. I already have one background. So what I can do now, let me make sure if we go to the website, settings, advanced, that I enable unfiltered file uploads like SVGs and JSONs. So I turn that on and now I can go over here. At the background I have this over here, I can get rid of it. I click on it again. And I can also click on classic image, upload files, select files. I go for the background which is really light. When I was younger I went to Photoshop, mount N, let's say this one and if I want to have a I saved it as 1920 and I made the quality a bit lower but then it was still 30 kilobytes. This is more than 30 times smaller. Select okay there are some things we can do. First of all I can get rid of it over here and I need to add it to the overlay. So let's get rid of this color. I go to the overlay, classic image, this one. Then I say no repeat, position, button, right, display size, I can change it, I can change the opacity I want to make it fully visible but then at CSS I want to make it blurry but not 10 but more like 30. So now you see a nice area like this I can also make it fixed so I can go to attachment fixed with us. Command Z. I don't want it to be fixed. Default. So over here, this longer area, I can click on it again, go to background overlay, choose this one. That's not blurred blurred yet so you can see where it will go. Repeat, no repeat, position, bottom right. It's quite big so I can also make it smaller. Playing around with auto or cover or contain or custom. There I can make it smaller. It can be fully visible and then here again I say 20. So not fixed but default, publish, there it is. Go to the overlay, bottom right. Let's go to custom opacity, this is 48. I can also go to the CSS filters, change the hue to a different color. with an SVG file that is smaller than one kilobyte. Oh man, I love it, I love it, I love it. Super cool what you can do within Elementor. Right now we have a background gradient. You can also do other stuff with it, let me show you. Edit with Elementor. So I can go to the hero, style, I can have a simple, so I can have a simple color. So if I get rid of this, I can go to the classic one and say I have a color, simple color, let me go to the overlay, get rid of this. So I can have a simple color as a background. Then I can have a gradient, I already showed you. We can also have an image, so let's do something random. This one for instance, I can make it cover. Okay, why not? Publish, let's take a look. Now this is our website. What else? I can have an overlay background. So I have this image already, now I can have a color, automatically it is displayed at 50 percent. So I can give it a bit more of a style of our website. I make sure that that is like this. Opaque or transparent. But I can also have another image. So let me do that. I don't see it yet. Still at the overlay. Position default. There you see something. The width should be default or better. Cover. And here I need to fix some things because the CSS is doing a lot of stuff. So now I have two images on top of each other and one is fixed. So it's weird. You can play around with those settings. You can also work with blend modes. So it can be combined. Like that. You can bring the best out of each other. So now if I choose another image for instance this one you get this. So you can play around with those things and what you also can do you can have a background video. So I like to go to YouTube, search for GoPro Hero. I think 12 is the newest one. From GoPro itself, copy the link address. And in the background, video. There's a fallback color. If I grab the video link, it will play. I can also say play after 4 seconds because I don't want to show the logo. Well, I think the logo is until second ten maybe. Okay, twenty. So now I see this. But it's making it hard to watch when there are light images. So now I can have a background overlay. For instance, really simple. Black. And then I can decide what opacity is. I see no difference because it's on blend mode color Dutch. So I could use the style of my website as an overlay. I can also have a gradient overlay and then play around with the angle and stuff. So you can have a lot of different backgrounds. Keep in mind when you have a video in your background of your homepage, it can make your website slower. Both Tesla.com and Apple.com use it now and then, so hey, you can also do it. And then there's the latest one. Let me get rid of the overlay. And that is a slideshow with these images and then it looks like that the duration can be changed the transition the length of the transition there can be Ken Burns effect super cool, so yeah I like it I really like it so you see a nice animation but then again we have the thing with the white text. So in order to fix that, you know, by now, you can go to the background overlay, choose a color and change opacity. Publish. So those are the things you can do when it comes to creating a background in your container. Right now, I want to highlight one specific element and then show you how much you can do in the styling. It's crazy because if you drag an element to Elementor Pro it can be like, okay, this is how it looks, but you can do so much things in order to make it look the way you want it to look. So let me show you how I will do that. And at the same time, it's important to have this area on your homepage because it can help you to get found in the search results of Google when people ask specific questions that line up with the questions you ask on your website in the FAQ, Frequently Asked Questions area. So let me show you how to create a container with the Frequently Asked Questions area and style it like crazy. So let's do that. If I search for something on the internet, how to buy Bitcoin, it can be that you see a few of those questions? Those can be fetched from FAQs. So I can have an FAQ area on my home page and then the questions I put in there can be displayed on Google when they search for certain related topics. second, I click on the plus or I copy this area, command I, scroll all the way down, there it is. Asked questions, then I duplicate it and over here I say FAQ and make it a lot smaller, change the color to primary so Google knows it's an FAQ. Okay, I don't need this or this. What I need is a break to go on vacation for a week all all by myself. Or what I need is clicking on the plus. Maybe you would say you need to go for an accordion. Sometimes I'm having a hard time with that. Command I, drag it here below. And what we said earlier in the tutorial is that we want to have nested elements. So with accordion, in that accordion item, this one, you can have something else. So I could have a question, can I install WordPress on my computer? Click on the plus, I can add something else. So I can have a video with the answer. So you can have in that way an advanced accordion. I want to do it different. Click on publish. I want to go to the back end. Go to Elementor settings, features. And right now I want to turn off the nested elements. Inactive. Save the changes. Go back to the website, edit the homepage, scroll down and I want to search for the toggle. There you go. I drag it here below or up and then like that. First of all, the width here at advanced. Let's change it to pixels 600. Okay, I want to show you the power of designing an elementor. Right now it looks like this. I don't like it. What I can do first, I can click on it, go to the content and change the question. Do I need to have? Okay, so I have a question and I can get rid of this one and duplicate it a few times, create a few other questions. So I made a few questions, publish, there you go. I want to, but I'm okay with them. This is really important, FAQ schema. If you turn this on, then Google will know this is an FAQ schema, and it can be displayed in the Google search results when your website is ranking high. I go to the style, and there's so much we can do. I want to change the look and feel totally from this to something like what I'm about to show you. So the border width, do I want to have a border in between the questions? No, so I don't need to have a border color. I do want to have spacing in between. So let's say 30. Then I want to go to the title, this area over here. The background, I want it to be white. And now you see the space in between. Great. The color of the question wants to be the secondary color. When people hover over it or it's active, then it can be orange. So everything that's opened will become orange. I'm okay with the typography and a padding, let's say 20, so I can make it a bit bigger. If I would go to the background just for the sake of the tutorial, so I can show you this, what is happening over here. Let's do the dark color. Yeah, now I can show you how I want to adjust all this. So I go back over here to the style. I was at the title. That's okay with me, the title. I go to the icon, which is this area. I want to have the icon at the end, that is better in my opinion. And the color of the icon is also secondary, but the active color is also orange. Do I want to have spacing? No. Then I go to the content and the background of the content I want it to be white, like that. and also the padding here I want it to be 20. So that looks okay except for the background of course. So right now it looks like this. It looks nice but what I prefer is to have the edges like here and here and here and here. In order to do that, I'm gonna use a little bit of CSS. So I do a right mouse click, I use Google Chrome, inspect. Okay, let's see, I don't need this. So what I see over here. Okay, here's the color. What if, let's see, if I can say border radius 20 pixels. Okay, I know this is not the right place then let me copy this. And check it. Okay, let's click on the white area right mouse click inspect. Okay. Let's try it here border radius 20 pixels. Yes. That's what I want. Awesome. So what I can do I can grab this whole area, copy it. Now I go back over here to the site settings, to custom CSS, and I paste all this stuff over here with the border radius. All the other things I get rid of. I think it's the Elementor tab title, so I try to get rid of this. And since the border is still there, this is everything I need. Save the changes. The only thing I don't like is this area over here. So if I refresh the page, which will automatically happen, and it looks like that. So how can I fix that? Well, if I mouse click on this area, inspect. And here you see one difference, Elementor tab content. So no title. So over here, I paste this, opening, no closing. And then I also want to have a border radius. But not everywhere. So what I will say 20 pixels, 20 pixels, 20 pixels and 20 pixels and then again the top let's say 0 and the third one I think 0, no 20, also not that one, second one. So the top areas, they don't have a border radius. Now I want to say margin-top, I can say 20 pixels and now you see the space. So what I want to do is say minus 10 because I want to get rid of this edge. I still can see it a little bit so I can say minus 14 I still see a little bit so if I would say 15 16 let's do 18 now it is one whole thing with a nice border radius save the changes let's see if It is. Okay now I can get rid of that weird background but it looks like that. Great. Okay, then I can fix the background. I go to style. Get rid of that. Okay. I don't like it that the titles are different so in order to fix that color I just close this and I edit it with Elementor again. Now everything is in the normal color again so there was a small glitch. So I really like it. And that's how you can style things using Elementor Pro and custom CSS and this is great for the search results. So if you get a lot of questions, place them over here and then they can be placed in the search results. There's only one thing I don't want to have that gap over here, so I go to style, toggle And also here maybe the background of this color but maybe something like that which makes the whole area look a bit better in my opinion, a lot better. So I have this color which is a lighter version of this one and we have this cool thing that SVG thing which is less than a kilobyte. I really like it. I hope you do too. If you do so and you have not done so yet, please like this video. Now it's a matter of changing the content so people can get answers on questions they are searching for. There's one more area I want to add to my homepage and that's an opt-in area where people can leave their name and their email address and I can send them something for free. And when they click on submit, they leave their name and email address. Automatically, they will be added to my email list and they will receive the thing I promised on my website. Let me show you how to create it using Elementary Pro and how to link it with your favorite email marketing provider. I want to give people a chance to sign up for my email list, so I'm going to create an area for that here below. So over here, the first thing I want to do, go to this last container which I will call FAQ, then I go to the advanced area and at the bottom I say 180. At the top I say 60 and left and right nothing. For other devices I would like to say 45 and for the phone I will leave it this, the only thing I need to do over here is tell typography 42 and then it should be the same over here 42 42 Publish. So I have a big space, a lot of space. So I want to have an overlap just like here. And in order to create it, I'm going to go for a plus. I'm going to go for a flexbox with two areas, one left, one right. I go to the inner containers, uncheck the padding over here also and then I want to use style of a dark background also here. Secondary okay here I want to go to the border and have a border radius but only left and at the bottom. So let's see where that happens. I don't see it so I can say 100 and there I see it is happening so I say 20 and then bottom 20, that's bottom right so I guess over here, yes. Then I go to this area, background, border and then the other way around in the middle 20 and all the middle 20 like that. I go for a heading, let's go over here and now I say 30, I click over here and I say Receive 11 essential website tips. Change the color to white and then at the right area, I want to go for a form, really simple form. I go to this container, I say justify in the center also vertically, oh no sorry here it must be stretched and then here layout in the center also here just in case. So if this text becomes bigger than this and this area also stays in the center. Okay, real quick, the form name is opt in newsletter, name, email, no message, input size I like to have it large. Do I want to show labels in the fields? Not here on top, I don't see them because they're dark, but I don't want to show them like that. Then there's the button. I want it to be at the left. Send and then the button text. The button text is receive or submit. Now I want to go to the field which is this white area. The text color I want it to be white and then the background I want it to be transparent. The border color should also be white. The radius can be 20 pixels or even 50. How does it look on the website itself? When I type the text it seems to be completely white. Maybe that's better, that if it's not filled in yet. So good, well maybe a bit more space in between. The fields, receive 11 essential website tips, name, email, receive or I said submit. Why is it changed? I don't know. No. Submit. Let's make sure that it's the right color. I think it is. Yes. When people hover over it, it can be light purple. Publish. Okay. Then I get rid of all the space around it by going to advanced. Uncheck the padding and then I go to layout. Uncheck zero. And I go to the minus. 120, receive those tips, well I think the text can be a bit less big, 42. Okay, publish. Great, Ferdy, info at Ferdy. Well, if you want to learn how to work with an email list, I have a tutorial which is amazing. You can find it over here, or you can search for ConvertKit tutorial Ferdy. I cannot understand it. It's not watched that much time really in that tutorial just 28,000 views. I put a lot of effort in this and this is what making me a lot of money having an email list giving value through emails and then sometimes I want to sell something and people buy it a lot. So how can I connect this in this case I use ConvertKit. I need an API key. Okay. Now, I need to go to Advanced, copy my API key, paste it here, validate the API key, and now I can link my forms to any email list I have. So I go back to the website, edit with Elementor, scroll down, click over here. Awesome. Actions after submit. Collect submission, so it will be stored on my website. People can receive an email, we can adjust that email over here. So I can also let ConvertKit do this, so I can close this. What I can do now, I can go to ConvertKit, add actions that will be performed after visitors. And then I go to ConvertKit. Now all the forms of my ConvertKit account will be fetched or retrieved or however you want to call this. I have to wait for a minute. I will publish it. So I chose the ferdy.com newsletter form. So when people fill in their details over here and submit it, automatically ConvertKit will do the rest. And then I can give them automatically the 11 essential website tips. So that's an easy way to link ConvertKit or any other email program with Elementor and gain more subscribers on your email list. One more thing, how does it look on other devices? I think we need to adjust a few things for that. Over here I would like to say 45 to make it a bit smaller and then also here, let's see if it's not linked. Okay, it is. I can have it look like this and on a smartphone I would like to say zero, just a new normal area. Then this is weird. So I go to this container to style border and then I need to say zero and where do I have to at the top so let's say 20 over here so there it goes and then the other one I No. 20. No. Maybe the first one. 20. Yes. So here the two left ones, then here, style, border, the two right ones, 20 and 20. So we have the same borders on the right place. Publish. Awesome. I think this will be a part of the footer. We'll create a footer later, but right now I already created it. So later I will show you how to copy and paste things into another area of your website. So this is the website we've created so far, optimized for all devices. Let me refresh it. I think we're doing an amazing job and of course based on the information you want to display on your website or the website you are creating you can change the content but I think it looks professional, clean. So well done. Dear people, there are moments in your life, defining moments that you need to make choices. Choices, consequences. And I'm at that point right now. I can make this tutorial 12 hours long. I have 12 hours of video tutorials. And the idea was to put it all in one tutorial, but that's not going to fit. It can fit, but then it's 12 hours. Not everybody wants to apply everything that I teach. So from now on, I'm going to refer more and more towards other tutorials. So all the 12 hours will be placed on YouTube for free but I will show you how you can watch other tutorials that will cover the things that I wanted to cover in this tutorial. So for instance the header, the footer. Advanced Custom Fields, that tutorial alone is probably more than 90 minutes. So from this moment on it's going to be a little bit different and I'm gonna refer you to more tutorials. But it is what it is. I do my best to show you around on how you can watch everything you want to learn about Elementor Pro. And I hope this is not a bummer for you. Yes, okay. I wasn't expecting this tutorial to become that long so that's why I had to split it up in multiple tutorials. Okay, let me show you what we're going to do next. What we'll do, we will create a custom header using Elementor Pro that can be displayed on any specific page in your website. So we can have multiple headers and say this one is for the homepage, this other one is for all the blog pages, another one is only for all the other static pages except for the homepage. So we can have multiple headers, display them on multiple areas in the website. And what we're gonna do, we're gonna make our website transparent. We're gonna add a top area in our header. We're gonna make our header sticky, responsive. It's gonna be fun. Let me show you how you can do that. This is the header we are gonna create. This is transparent, with a submenu, simple submenu. A call to action, some information about how cool we are. If I scroll down, a new area appears. You can see truth, it's a glass morphism, something like that. And how does it look on a mobile? Like this. Still a call to action. A menu over here. Submenu. So if you want to learn how to make that, then go to ferdy.com forward slash elementor tutorials. Since I'm in the middle of making my website, I want to refer you like this. Here's the tutorial you're watching right now. And then here are a lot of other tutorials. One of them is create an advanced header using Elementor Pro. You can watch it over here by clicking here. And I wish you the best of luck with watching this tutorial. You can also use the Elementor Pro pop-up builder to create a menu for your website. Let me show you how. In order to create this, we need to scroll down a bit further. And over here, create a pop-up header using Elementor Pro. Click over here and then you can watch that tutorial. Did you ever hear about glassmorphism? I don't know if I say it correctly, but what it does, it will turn an area in your website in a glossy look, blue glossy ish. You can see through it, so if you scroll down and you have an area with that with a background image, that will become blurry through that glassmorphism area. You can apply it to headers and to any other area in your website. Let me show you how you can do that. So with the glassmorphism effect, you can create something like this, or this, or this. If you scroll down on the Elementor Pro page, you see create a gloss morphism look on your website. You can watch this tutorial. Sometimes you create something within your website using Elementor Pro and you want to undo it. Well, there are two ways to do that. There are revisions and there's the history, the recent history. So I will adjust a few things and then I will show you how you can undo those changes. I've been looking at the website and I think especially also since we have the header which adds around 40 pixels, this should be visible earlier. So I think this should be smaller. So in order to do that, let me show you how to edit with Elementor. We have a few special CSS codes over here, HTML code, so I have to be careful with what I'm doing. I want to stick with the three lines. What I can do is decrease the typography a bit. 68 and decrease this to 105. Let's see how this will look. Okay. Almost. So let's see what I can do. Let's make it 60. And then this. 95. Maybe increase the letter spacing a bit. Better. There is no more overlap. So I decide to go back to the old version. So if I close this, I added this Elementor, how can I bring something back that's not there anymore? Well, over here, I can go to the history. If I've done a few things, so let's change a few things here. Now if I go to history, there are actions over here, so I can go back to the editing when I started. So, before I save or after I save, I can also go back to earlier actions. But when I really close this page and open it again later in Elementor, then I can go to revisions. And then I can go to all the older revisions. So let's go to the one from a few minutes ago. Three minutes. Yeah, that's what I want to have back. So I click over here, I scroll up and I click on apply, publish and now it's back to the big one. One more thing, let's get rid of this animation. So, this is how our website is looking, beautiful header. It's optimized for all devices. So what is next? We have already created a header for our website. Let me show you how you can create a footer for your website. We will create this footer over here. We'll add this to it, an opt-in area. People can fill in the details and they get 11 essential website tips and I can grow my email list and my logo, text about my website and then a few links and social media icons, a nice line. The year, people don't know which year it is, they can go to my website. And then this area, we're gonna talk about that a little bit. If you want to watch that tutorial, then go to ferdy.com forward slash Elementor tutorials hit enter. This is the tutorial you're watching right now. Scroll down and there is create an advanced header and pop up and then create a footer using Elementor. You can watch this tutorial by clicking here and I wish you the best of luck with that. Now we're going to create a mega menu using Elementor Pro. Let me show you how. This is how the mega menu looks. And in order to learn how to do that, go to the same Elementor Pro page at ferdy.com. And over here you see create a mega menu using Elementor Pro. Click over here and then you can watch that tutorial. Ladies and gentlemen, it is time to take it to the next level using Elementor Pro templates. With a template, you can create the design of a specific page. For instance, an archive page for blog posts, a single blog post page, a WooCommerce product page, a WooCommerce product archive page. And when you set it up once, you can apply it to all the pages you want to apply it to. So in this case, I'm going to show you how you can create a blog post archive page and how to create a single post template. If I go to the blog page, I see a nice overview with the latest blog posts like this. And I style this exactly how I wanted to using the loop builder. If I go to a blog post and go to a single post, this is what I've created using Elementor Pro templates. So I decided that this image will look like this. The curves, this will be on top, below the title. I have all the freedom to create it as I want. So for instance, all the H2 headings are looking like this, purple in this size. If I scroll down, I see that the backgrounds becomes a bit more purple. And then people can leave a comment. And go to the next blog post, some information about me and some information about flirty.com tutorials. More blog posts and this is sticking with us and based on the content over here Elementor will or will not be shown and this element will or will not be shown. So we're going to work with dynamic content. So if you want to learn how to create that, then go to ferdy.com, forward slash Elementor tutorials, hit enter. This is the tutorial you are watching right now and if you scroll down, create the blog archive and single post template. It's a whole tutorial on itself. I don't want this tutorial to be eight hours, so you can click here to watch that tutorial. Now I want to show you how you can work with custom post types and advanced custom fields. What are those? A post type, for instance, can be pages and posts. With custom post types, you can create a new post type, for instance, tutorials or movies or team members. And then with advanced custom fields, you can add extra fields to those custom post types with information you want to display on your website using Elementor Pro. For instance, if I have a custom post type called Movies, I can add a custom field with the length of the video. I can have a field where you fill in which movie stars are in the movie, which music is used, images of the movie, the director of the movie. And then you can fill that in on your website really simply, and then you can use Elementor Pro to display it in a way of your liking. And after that, it's a matter of adding new movies, fill in the information and then on your website, a database with all the movies will be shown, how you have it in mind. So let me show you how you can achieve that using advanced custom fields, a free plugin and Elementor Pro. If I go to the backend, by default, I see blog posts and pages. Those are custom post types called posts and pages. But using advanced custom fields, we can create new post types, for instance, tutorials or recommended, and we can create field groups. So normally when I go to a blog post, I create a new one. I can have a title, I can have some text, here's some SEO, and that's it. Of course I can have my categories and text and stuff, but with custom fields, I can do more. So look at this. Tutorials, all tutorials. If I go to how to make a WordPress website, here's the content. But below that, I have more information about tutorials. The YouTube URL, the duration of the video, the reading time of the blog post, the timestamps, the tools that are related in this tutorial. So I have a how to make a WordPress website tutorial and included in that is the Bloxy theme, Elementor and Canva. And this is from another post type. So let me show you how it looks. Here, automatically, the YouTube video is displayed. Below that, I see the title, how much hours it's, this tutorial is the amount of minutes and the featured tools. So I use Canva, Elementor, and DocC. I decided that since this is about Elementor, making a website using Elementor, this advertisement should be displayed. When people click over here and they buy Elementor Pro, I receive a commission. So I decided that this template should look exactly like this. So now it's a matter of creating new content. So if I go to tutorials, add a new tutorial, I can fill in the title, the content, and then over here the YouTube URL, the duration, the reading time, and these are custom fields. I can make those here and advanced custom fields. If I take a look at post types I created recommended and tutorials which you see over here. But if I go to field groups I have tutorials and there I created those extra fields. Using Elementor Pro I can go to templates, theme builder. I can go to single post for instance and here I see single tutorial. If I click on edit, I decided that all the tutorial single pages, so all the single tutorials should be displayed like this. So there's also Hostinger, Elementor, based on the content of the blog post, this will or will not be displayed. So we're going to learn a lot of stuff. If you want to follow that tutorial, then go to ferdy.com forward slash Elementor tutorials. I have to do it like this because my website is in the making. It's not live yet. I scroll down. This is the current tutorial you're watching. And then over here, it says create advanced websites using advanced custom fields. So you can click over here and then watch that tutorial. Good luck. I was editing my video while sitting down in the sun, so I have my sunglasses. Then I run up to continue to edit the video inside and now I want to record a short part and I don't want to get my glasses downstairs. So that's why I have my sunglasses on. What I want to talk about is when people enter a page on your website that does not exist, right now they go to a weird template. That's not what I want. I want to refer them to a 404 page. That's a page that people see when they enter a link that does not exist. Let me show you how to create it using an Elementor Pro template. If I go to a random page, forward slash, blah, blah, blah, this is what I will see. It's not super cool. So what I can do, I can go to the back end, templates, theme builder, and then there is an error 404 page. If you go to a page that does not exist you can create a 404 page. Click on add new. We can create one from scratch. I'm at the end of the tutorial, my voice is gone. I woke up this morning at 5 and started editing. I can make use of a template, a simple one like this. Insert, it is not what I was searching for. So I can also create something from scratch. Let me do that. I go to the arrow, get rid of it, and I click over here, I call this one Elementor Error 404. And this page, I want it to be included on the 404 page only, but I want it to be a canvas. So here at the settings, preview settings, sorry, general settings, page layout should be canvas. Or just full width. just for it and over here I create an area arrow down the style of course is the one I already use a lot light purple light purple, this one lighter radial center, bottom, right then I go to the layout and I say viewport height 100%. Then I click over here. I go for a heading. I make the text white. I say 404. Make it super big, 200. I want to duplicate it. I say this page could not be found. That can be smaller, way smaller. How about 32? I go to home page. Forge slash publish. So now if I go to a page that does not exist I go to this page instead. What I do want to do, I want to bring this a bit closer. I can also make it a bit more playful. Are you lost? Publish. So that's how you create a 404 page. So when people go there, you can go back to the homepage. And everything will be fine and they will be safe. I said in the intro of this tutorial that you'll get everything for free. And that's what I want to show you right now. How can you get my Complete Elements Pro website for free? Let me show you. Go to ferdy.com forward slash free element or website. Please. Hit enter. And there goes my download. Now I go to my new website. I want to install my website over here. So I go to the back end. It's a brand new installation so I can dismiss this. Get rid of the post. Trash. Empty the trash. And I go to the pages. Select them all. Move to the trash. Apply. Trash. Empty. Then I go to plugins. Add new. My voice is gone because I've been talking too much into the microphone because I want to finish this tutorial. But I want to implement this in the tutorial because I promised. So I have Install all-in-one WP migration, activate it, then refresh the page. All-in-one, import, file, I go to my downloads. There it is, Elementor Pro website, open, there you go. Now I need to go to settings, permalinks and then I need to login again. You need to use the username subscribe with a capital S and then the password change this 1, 2, 3. This one, change this ASAP. 1, 2, 3. I click on login. Okay, save this. Now you need to go to Elementor.com and download the latest version of Elementor Pro and upload it on your website. Now we have done that, I need to connect and activate. activate right now. Let's go to settings, permalinks, post name, save it and another time. Our website is working as you see. But if I edit the home page, there are still a few things I cannot change. I can change this, the flip box, but if I click on the plus and search for the flip box I cannot use it. Same thing with the theme builder. I cannot edit anything over here. What I can do, I can connect and activate. Activate my license. And now I can edit everything and my website is fully functional. That's how easy it is. So what you need to do now, go to the backend, go to users, add a new user. So in my case it can be Ferdy InfoAd Ferdy I can generate this password I create an administrator Copy this password Add a new user OK Now I want to login I log in as Ferdy with the new password. Log in, save it. Then I go to users again. I delete the subscribe user. Attribute all to Ferdy. Ferdy. And the same with this one. Everything to Ferdy. Okay. to 30. Okay now I can edit my website. I can also add new pro elements so that's how you can get this website for free. There's one more thing we need to do. We need to go to the back end over here. I need to go or you need to go to settings, general and you need to fill in your administration email address that you want to use for this website. So in my case I would say ferdykorp.gmail.com then I save the changes and then it will say there is a pending change of the admin to ferdykorp.gmail. So I need to go to my gmail account and then accept it and then I'm the head administrator. So if this was you, you need to go to your email account, accept it and then you will be the head administrator of this website. Make sure that all the other users are removed so you are fully in charge. And then I wish you the best of luck with your website and your business. I want to thank you from the bottom of my heart for watching this tutorial. I hope you learned a ton of stuff. I had a lot of fun creating this tutorial and I hope you had a lot of fun watching it, learning new things. This is not the end of the tutorial. There's so much more we can cover. If you want to learn more about Elementor Pro, go to ferdy.com forward slash Elementor Pro, hit enter. There you'll see this tutorial and you'll see all the additional tutorials. And I'm still adding new tutorials because there's so much to cover. I have more than 12 hours of content about Elementor Pro. You can watch it on the space on that page. Maybe I should start over completely. Just kidding. You can learn so much more. So just go to the page, browse, and if you see something you're interested in, you can learn it. If you want to. You can like this video. That would help me out a lot. And feel free to subscribe for more upcoming tutorials on how to make websites that can generate you money. Have a great day, good luck with everything you do and take care. Have a great day, good luck with everything you do and take care. Bye bye.

Channel: Ferdy Korpershoek

Views: 43,416

Keywords: Ferdy Korpershoek, Ferdy.com, WordPress, Elementor Pro, How To Make A Website, How To Make A WordPress Website, Build A Website, Create A Website, WordPress For Beginners, Elementor Pro Tutorial, Elementor Pro Course, Elementor Pro Header, Elementor Pro Advanced Custom Fields, how to build a website, build a wordpress website, wordpress tutorial for beginners, elementor tutorial for beginners, wordpress elementor tutorial, create a wordpress website, wordpress tutorial, Elementor

Id: _7XYqWJlNJg

Length: 280min 36sec (16836 seconds)

Published: Fri Apr 26 2024