WordPress Website Erstellen -2024- Tutorial in 20 EINFACHEN Schritten | (Deutsch|German)

Hi, I'm Tim. In this beginner's guide, I'll show you how you can create a

website

with Wordpress in 20 easy steps. Have a lot of fun with it. Here's a brief overview: We first start by getting a domain, meaning the name of your

website

, and hosting. Then we install Wordpress with one click. Next we made some basic configurations for the website and now we can add our home page. We then designed them using the Elementor page builder. It makes website creation a breeze with just drag and drop, copy and paste. For example, if I want to have text somewhere on my page.

Can I select the text on the left, drag it to the right place, and then adjust it to my needs? Of course, you can't just edit text. With the technique that I show you in this video, you can build whatever you want. To show some examples: For example, you can add contact forms. Video backgrounds, slideshow, maps, animations. FAQ etc. You can build and design whatever you want. Of course, your website will also be optimized for mobile use. That means it looks good on smartphones and tablets too. If you want, you can build your entire website from scratch.

Or you can also use templates created by professional designers and customize them for you. There are thousands of options to choose from and you are sure to find something that suits you. If you just follow this video step by step and do what I show you, in the end you will be able to create such beautiful sites and you will understand the whole process. Have fun! Before starting step number 1, 1.2 more things about the video. I linked timestamps in the video description. This means that if you're not interested in any step or want to move forward quickly, you can see when the next part is coming and click on the time.

The video is also relatively slow, so if you want to play it at a faster speed, you can go to the settings here, playback speed and select double, for example. The following fact probably won't surprise you. In this video we work with WordPress to build the site. WordPress has several advantages. First of all, it's free, which of course is always great. And it is used by 43% of all websites on the Internet. This means that there is a large community behind this software that cares about you. For every benefit you imagine, there will probably already be a ready-made solution because the software is so popular.

In my opinion, Wordpress is the best platform for creating websites and that is what we are working with now. That's it for the video, and then we can start with step 1 and get hosting and a domain. To make this step make a little more sense, I'll briefly explain what you need to create a website that's available on the Internet. To create our own website that is active on the Internet, we need 3 things. First of all we need a domain. This is simply the name of your website. For example, Facebook's domain is Facebook.com, Google's domain is google.com and my domain is webseitenmachen.de.

Domain names cost around 15 euros per year. Secondly, we need web hosting. With web hosting, you pay a company to let you use part of their servers so your website can be viewed and accessed live on the Internet. I'll explain this in more detail in a moment. Web hosting is advertised at a price between 4 and 15 euros per month, but is usually also paid annually. Next we need Wordpress. It is available completely free on Wordpress.ORG. There is also Wordpress.COM. But we want Wordpress.ORG because it offers the open source version of the Wordpress platform that allows us to design the site however we want.

Wordpress.COM is a kind of lite version that is very limited. And that is. With just these 3 things you can create your own website that is available live on the Internet. The process is also quite simple. All you have to do is sign up for web hosting and then you will have the domain and Wordpress included. Now we can move on to the actual step-by-step instructions. From renting web hosting, installing Wordpress and designing your website. I'll also show you lots of tips and tricks that will make your life as a beginner much easier. I have learned this the hard way over the years.

If you need help with any steps, feel free to ask your question in the comments and I will do my best to help you. I read every comment and respond to each one. So, step number 1, get a domain and hosting. To take this step, we can first open the article that accompanies this video. We can find it in the first link in the video description, I will also link it in the comments or you can simply open webseitenmachen.de/anfangen. Then I'll come up here. In addition to this

tutorial

, I have linked other videos and articles on website creation here, which are very useful for learning the basics.

For example, how to handle colors, how to create a business email address, for example [email protected] Many things that we will use again later in the video. Accordingly, I would recommend perhaps opening the attached article, but of course you can come back to it later. So here we can start with step number 1 and if you want you can check if the domain you want is still available. For example, if I search for Websitesmachen.de, it is no longer available. Check it now. For example, it is no longer there. Then you'd have to get a little creative.

For example, you could insert a hyphen or a number or change the domain extension, i.e. the end of, for example, .de to .com or .net. You will find something there. But you can also take this step later. In the next step we can go to step number 2 and configure hosting and a domain. As mentioned above, with web hosting you pay a company to use part of their servers for your website. You can think of servers as super-fast computers that store all of your website's content. So your images, icons, texts, logos, etc. And these servers run 24/7 with a premium internet connection and play your website at full speed when someone opens it.

Without web hosting you could open your domain, but nothing would appear. I don't want to go into too much detail on this topic, but it's still a pretty important point. For example, if your hosting provider has slow servers, your website will load more slowly and visitors will get annoyed and leave. If this happens frequently, Google will remember it and your site will end up lower in the search results. That's why I'm going to give you a quick list of points you should pay attention to when choosing hosting. First of all, speed. As already mentioned, it is important that the hosting provider offers fast servers.

To do this, I would simply Google reviews of the potential host. There are a lot of people there trying it out. Second, an SSL certificate. Just make sure your hosting provider offers an SSL certificate for the domain. We'll go into this in more detail in 5 minutes, but if you don't have an SSL certificate, a message or image like this will appear. I'll show something here. When someone opens your site and Google blocks users. We definitely don't want that on our side. Third, uptime. So how rarely do servers fail! That should be good too. You can Google this as well as server speed.

And fourthly, security. Wordpress is the most pirated content management system. Consequently, it is important to protect the site. This happens on two levels. Firstly, on the website, I'll show you that and secondly, on the server level. Just make sure your hosting provider has features to protect the servers and website. Normally everyone has this, but with very small suppliers you can sometimes fall short. Yes, that was a little excursion into the world of hosting. In this video we will use Siteground. This has been my host for several years and I am very satisfied with them. Here we are also on your side.

As you can see here, they are even recommended by Wordpress itself. I can go up there too. So WordPress.org. And then here hosting. Exactly,

wordpress

.org/hosting There you have a list of recommended hosting companies. And here is Siteground. There are also Dreamhost and Bluehost. But I haven't used them for several years now, so I can't say anything about it. Exactly, that would be all. I don't want to sell you this for too long, you may have already decided on another hosting provider. I especially like Siteground because they have very fast servers. The uptime is also very high, so I never had any problems with that.

And the customer service is simply excellent. This may seem quite trivial, but especially as a beginner you may have a problem and then it's great to have good customer service on your side. So if you go to “Chat” here, you can chat with them directly and then they will reply to you within two or three minutes. Even on Saturday nights at half past two. So whenever I have problems they solve it super quickly. You can also just take a look at the page, here they describe a little about their service. For example, if you go to technology and then to technology.

In fact, they do a lot for speed and user tools. This is pretty interesting when you look at it in detail, but it would be a bit long for this

tutorial

. But you can read it and find out for yourself. Security is also great here, I haven't been hacked yet. I would also recommend you look at the reviews. You may already have another hosting provider, but that doesn't matter. I'm going to work with Siteground here in this tutorial, but if you have another host, you'll just have to figure out how to log in and install Wordpress on yours.

And then you can follow the rest of the video. If you want to take a look at Siteground, I've also linked it here on the home page or in the second link in the video description. If you click on it once, you'll see here as well. This is my affiliate link. This means I get a small commission if you click the link. Don't worry, it won't cost you an extra cent and I don't recommend it just because of the affiliate link. All other web hosts also have an affiliate program. But I've been using Siteground for my own projects for several years, I have a Growbig account and a startup account.

That's why I don't do it. Exactly, so if you want to take a look at Siteground, I'd love for you to click this link or the second link in the video description. This way you can support free tutorials like this one. Thanks for that. So we end up here on this page. I can also close this second tab. And then we can scroll down here to see the different plans. Then there is the GoGeek, Grow Big and Startup Plan. The Gogeek plan is probably too much to start with. The main difference between the start up plan and Grow Big is that in the start up plan you can host one website and in the growbig plan you can host as many websites as you want.

As I mentioned before, I have a startup and a growth plan. Websitesmachen.de runs on the startup plan and the big growth plan. I have smaller websites, but there are a lot of them. There should be more than 12 pieces at this time. And that works very well too, so I can recommend both. The Grow Big plan is a little faster because you get a little more server resources. But they are both very fast. You can also check the exact details by clicking compare our WordPress plans here. And then you will see everything that is listed here.

And also the explanations. In this video I will only use the starter plan, but you can choose the one that suits you best. And then go to Schedule Voting. There's also a 30-day money-back guarantee, so it's perfect if you just want to try it out. And here now you can enter the domain you want. Assuming you already own a domain and have registered it somewhere else, you can go to "I already have a domain," enter it here, and click Next. At the top right I will link you to a video where I will show you how to proceed.

This is also pretty easy. Well, I guess you don't have a domain yet. So here I'm going to "register a new domain". And then you can enter the domain you want for your website. For example, I can try to create a website. And here on the right we can select the domain extension. This is simply the end of your domain name. For example .com or .net. There I would recommend sticking with the most popular ones. Let's try .de next. Siteground then checks to see if the domain is still available, and in this case it is. Excellent.

If not, you can be a little creative. Perhaps you could choose a different domain extension or you could also add a hyphen or perhaps numbers. If you are a little creative, you should be able to find a good domain. So now we can log in. First we can enter the account information. We'll use this to log into Siteground later. So enter your email address, a password and confirm it again. Then some customer information. You also need them for the domain. Soonce your country. Probably Germany. Name last Name. If you are purchasing everything for your business, you can enter your business name here and your business VAT ID here.

Then we have the city, address, zip code and phone number. Excellent. Here we can complete the payment information. You can pay with credit card or Paypal. If you want to pay with Paypal, you can select it here and when you complete the registration you will be redirected to Paypal. I'll pay by credit card now. So your credit card number, the expiration date, your name and then again your CVV code. You can find it on the back of the card. This is the three-digit code. Good. So we have the information about the purchase here. Here you can change your plan again.

So between Startup, Grow Big or Gogeek. I will continue with the starting plan. You could change the data center. So where should the server be located? I would choose the one that is closest to your main target group. But that doesn't make a big difference. For the duration of the contract, you can choose how long you want to pay in advance. You can also pay monthly or for 2 years. However, this is a little more expensive. I'm left with one year. I think that's pretty good. We don't need any of the extras down here. And then we can confirm the terms and conditions and go to Pay Now.

Once you've done that, you can also check your email. You will probably receive an email with instructions that you can then follow. Okay, I'll fill everything out here and then I'll go checkout now. And then we'll see each other on the other side. So, I already completed everything once and then we move on to the next step and we can click "continue to customer area". And log in once. Great, then the step would be done and here we have completed step number 1 “Get hosting and domain”. Verify that I no longer need the YouTube tab, so I close it.

In the next step, we can install SSL and Wordpress. To do this, let's get started and set up a page internally in Siteground. This isn't exactly your website yet. This is simply for management in Siteground. That means we can click on websites up here. And here we click on “new website”. Here I then select the existing domain. And there I select my domain, which I just got. Then websitebuilding.de. And it goes on, it goes on. Here I can choose "Skip and create a blank page". And then click "Done". So now the page is created internally.

This may take little time. Perfect, the page has been created. And we can go back by clicking up here. To manage your website, install an SSL certificate, etc., you can click "Websites" above. And here we see the website we just created. Next to it we can click on “Site Tools” to manage it. And here now we can manage the page. Now let's get started and install an SSL certificate for our domain. For example, if I copy and paste this URL. Then you will see that it says httpS here. Assuming you don't have an SSL certificate for the domain, it would now say http instead of httpS.

If I go out and open this tab, you'll also see on the left that there's a lock there. And when I click on it, it says "The connection is secure" and the lock is closed. If you didn't have an SSL certificate, it would open the lock and say, "The connection is not secure." Also, Google sometimes blocked the page if someone opened it. I'll show you what could appear here. And we don't want that to happen. Accordingly, we install an SSL certificate. We can do this by clicking on “Security” on the left and then on SSL Manager.

So we can scroll down here. Well, in my case an SSL certificate was already installed directly for the domain. I see this because the domain appears here under Manage SSL and then here under Let's Encrypt Certificate and the status is Active. Sometimes it installs automatically and works like this. Assuming you don't already have it, you'll need to install it again for your domain. To do this you can choose your domain here under setup and for SSL you can choose Let's Encrypt. And then place the order. We encrypt is a free service. It should then load something and then display below like it is for me.

Maybe the one with the +1 no longer says it. Sometimes this doesn't work right away. This is most likely because you just purchased the domain and it needs to be registered correctly, or it could also be that Let's Encrypt is a little overwhelmed. In that case, I would just log out and come back here in a few hours. Go to SSL Manager and see if it is there. Maybe reorder and try it every few hours. This should take a day maximum, but if you have any problems, feel free to leave me a comment or write to Siteground support.

But that shouldn't be a big problem. So now we have an active SSL certificate, so we can go ahead and go to Force HTTPS here and turn it on. You should only perform this step after you have an active SSL certificate. OK. That would be it for the SSL certificate. And then we can go ahead and install Wordpress. This means that here we can click on the links in Wordpress. and "Install and manage." The first thing we can do here is select WordPress, so I'll click "Select" and then we can make some settings for the installation.

First, we can decide which domain to install Wordpress on. Then we can select the language in which we want Wordpress to be installed. So I choose German. Of course, you can choose the language you want to use. And then we can choose the installation path. The main folder is the right choice. Now we can enter our administrator details here. We will use these to log into our site later. Here is the administrator username. I would recommend not using the word "Administrator" because it is too easy to guess. Then we can set a password. It is also very important that you choose a very secure password.

And then we can enter the email address of the admin user. We don't need the plugins, so make sure the checkboxes are not selected here. And then we can click "Install". I'll quickly complete this and then click install. Excellent. Wordpress has now been installed successfully. And that was step number 2. Install SSL and Wordpress. Check. We don't need the Siteground tab anymore, so I can close it now. Excellent. In the next step we can take a look at some Wordpress basics. To do this, we can first open the Wordpress dashboard. To do this, you can open yourdomain.de/wp-admin and then log in with the admin user data that we configured during the WordPress installation.

I'll do it quickly. Then I open mydomain/wp-admin and log in. This is the WordPress dashboard. Here we edit the page. Here on the right we have a small overview of Wordpress with some data and messages. But we don't really need them. This is quite annoying. That's why we can go to "Adjust View" here and then remove all of these checkboxes. Then I go to "Adjust View" again. Up here we have the ''Administration Bar''. We hardly need them either. Actually, just to look at our website. We can do this by hovering over this house and then clicking “Go to Website.” I'll open this in a new tab.

And this is what our website looks like now. It's not particularly nice, but we're still working on it. Okay, I'll get back to the board. Here we mainly edit our site. Here we can manage posts, insert media, manage pages, read comments, adjust the layout, install plugins, manage users, work on tools or even make settings. Of course, that is a lot and perhaps a little overwhelming. But don't worry, we will see it little by little in this tutorial and in the end you will understand everything. So stick with this and it will work. I would start now and do some basic configurations that you would do with each new installation of Wordpress.

If we open the page, we can see that it says “My Wordpress” in the tab at the top. There you have the title and subtitle of the website. Now we can adapt them to our site first. To do this, I go to the dashboard and here on the left I go to “Settings” and click on “General”. And then I see the website title and subtitles here. So I can adjust that now. For example, I can insert any company name in the website title. In that case, I will now add website creation. And the subtitle could be your slogan, for example.

You can also remove it completely. So there is nothing there. Like now. I'm going to write "Learn How to Create Websites" now. It is important that you do not edit the Wordpress address or the website address. This could potentially crash your site. So you can leave them both alone. Excellent! Then I'll scroll down here and then I can also go to "Save Changes." And if I refresh the page. Has this already changed here? Excellent! You can also do this step later or change it later. The next configuration I would do is also in the settings. That is, under permanent links.

Well, the post name was already automatically selected for me. Assuming you've selected something else for yourself, you need to switch to the post name and then go to "Save Changes." Because the publication name was selected, your contact page, for example, would be available at websitebuilding.com/contact. Suppose you had someone else. For example, day and name. Then your contact page will be available at webseitenmachen.com/2022/11/21/kontakt. This is much more confusing. Sometimes it causes problems with links etc. And it's not so good for search engine optimization either. This is why you should always select the post name.

OK. Once we've saved that, we can go back to the steps. And that would be step number 3: Wordpress basics. Check. One more thing I wanted to mention: sometimes there are updates and Wordpress changes a little. If you want to imitate something from this tutorial and it seems completely different and you can't handle it, you can always look at the home page, there should be an explanation there, or you can also leave me a comment. Excellent. In the next step we can create the first page and make it the home page. If we look at our website, we see "Hello world" here.

This is a blog post, kind of like a post. But we want to have a home page. So we need to add a page first and then make it the home page. To do this, we can hover over the pages on the left here in the panel and then click create. Here I can click on X. Then I can give a title to the page here. For example, you could enter "Home." And then I can go to publish and click publish again. And if I refresh the page now. Nothing has changed yet. That means we first have to make the home page the home page.

Consequently, I return here. And then I can go to Settings and click Read. And when its home page appears, I choose "a static page". And under Home, I select Home. And then I can go to "Save changes". And if I refresh the page now. We have a home page. Excellent. So create the first page and make it the home page. Check. Hey, it's me again. If you like the video so far, please like it. This helps me a lot with the YouTube algorithm. Thank you! In the next step we can install the correct theme. Also a very interesting point.

As already mentioned, the site doesn't look particularly good yet. That also depends on the topic. A theme tells you what you can design on your site. So, for example, what kind of menu can you have here, what colors can you use or what kind of content can I use. All of this is determined by the theme. There are thousands of themes in Wordpress. We can also take a look at them by placing the cursor on Design on the left and then clicking on Themes. And here you will see an overview of possible topics. We can also click on “Add topic” for example.

And then you see even more here. Popular, Latest, Block Themes, Favorites. There are many of them. Some are completely free, others are freemium. This means that there is a free version and a premium version and there are also others that are only available in the premium version. If you look at one of them here. For example, let's say this. Then you have a preview like this. They always look great there. That's just what they have in common. The problem is usually that they don't allow you to change that much. And that can usually only be seen in retrospect.

That's why I'm going to go to X here. In this video we will use OceanWP. You can even see that here. This is one of the most popular. This doesn't look that interesting in the preview, but it has the great advantage that you can change almost everything and that's perfect for our purposes. This means that if you want to follow this video, you must also install OceanWP; otherwise you will not be able to continue. Luckily it's also free. So to install this, you can hover over Theme, go to Themes, Add Theme. And here you can search for “OceanWP” on the right.

And then you'll find it here. Then you can go to install and activate. Great, now it's our active topic. And when I refresh the page, itlook different. Not necessarily much prettier, but definitely different and now we can edit the page more easily. That was step number 5. Install the correct theme. Check. In step 6 we can install the correct plugins. To do this we can go to plugin links and install them. Plugins are similar to themes, but refer to the function of your site. You can think of it like your cell phone. Your cell phone does not come with Instagram or WhatsApp.

These are all apps that you need to install to add this feature to your smartphone and we do the same with Wordpress plugins. For example, Wordpress does not come with the functionality of an online store, so we would have to install a specific plugin; There are thousands of plugins. You can take a look at them all here. So here featured or popular. For example, Contact Form 7 allows you to add contact forms. With Yoast SEO you can make your site appear higher in search results. With Woocommerce you can create an online store. So there are many of them.

And if you want to add a plugin, which is what we want to do now, you can search for it here, for example. We will do it now with the plugins we need for this tutorial. We can start with the Elementor plugin. Here we see it then. You can click "Install now". As with themes, we would now have to activate it to use it. But we need more plugins, so we will install them all first to save some time and then activate them. The next plugin is Ocean Extra. So I'll go install now. And the last plugin we need is Envato Elements.

Here it is, install it now. Great, now we have all the plugins we need. We can activate them once by hovering over Plugins on the left and then clicking on “Installed Plugins”. Then we click on the checkboxes next to the plugins we just installed. Elementor, we use it to build the site. Envato Elements offers us many templates for the pages. And Ocean Extra, we need it to have some additional settings. Exactly, and the others come from Siteground itself, but we can leave them as they are. Then up here I go to multiple actions, activate and apply.

Well, that was step number 6. Install the correct plugins. Check. Again, briefly, to the point: as you just saw, there are many plugins. If you want, you can also try other plugins. I would simply recommend starting with the plugins I show here. As soon as you reach a point where you need additional features, you should Google the appropriate plugins, look at the instructions and only then configure the plugins. OK. In the next step I can prepare the home page with Ocean Extra. I can open the page for that. Each website is divided into 3 parts. Up here you have the header area, also called the header.

It usually contains a logo or page title and navigation. Then we have the body, which simply contains all the information you want to display. And then we have the footer down here, also called the footer area. So these two bars. There you usually also have contact information, maybe directions or even navigation. And such copyright area. We edit our site in two ways. The first way is with the "Elementor" plugin. You saw it before in the introduction. This allows us to easily build our site using drag and drop and copy and paste. With this we build the body and the footer.

We'll also spend a little more time on Elementor because it's pretty much the most important point. And once we learn how to create pages with Elementor, we'll go ahead and create the navigation here and edit the header. Since you can't create the header very well with Elementor, we created it using the second method. The second method is to use the customizer. This is the editor of the theme i.e. OceanWP. Don't worry, the concept sounds a little confusing at first, but if you follow what I do, it will make sense in the end. Now let's get started and clean up the site a bit so we can start building it with Elementor.

To do that, we can first edit the page. To do this, I'll go back to the board. And then we can hover over the pages on the left and click on all pages. Here I go to Home. Because we just created the home page and we want to edit it first. So I'm going to click here. Excellent! Because we have installed and activated the Ocean Extra plugin, we have the OceanWP configuration here. Now we can clean up the page a little. Let's start first and select 100% of the full width for Content Layout and then go to refresh.

And if I refresh the page now, this will already disappear. Excellent. Then I'll come back. Then we can go to the Header on the left and under Show Top Bar, select Off. Update. Now you'll barely see it on the page, but there is a small white bar above the title. This is the top bar. If I refresh the page now, it should disappear. Good, excellent. Next we can go to “Title” on the left and in “Show page title” we select Disable. Update. And when I refresh the page, the title also disappears. Excellent. Then I'll come back.

Then I click on the footer. And for Show Footer Widget Area, I select Disable. And for Show copyright area, also disable. And update. And when I refresh the page. These two bars also disappeared. Perfect. Now we basically have a blank page, except for the header here. Well, that would be step number. 7. Prepare the home page with Ocean Extra. Check. Now we can repeat this step with a few more pages. This means I can add a Contact, Services and About Us page and then also do the Ocean Extra setup for these pages. You can also add more pages later or delete them.

I'm just doing this now to save some time. So I'll go back to the board. And come back here. To add a new page, I can hover over "Pages" and then click Create. I'll start with the contact page. Then I write "contact". Publish and publish again. Then I can click on the "X". And now we can configure Ocean Extra. So content layout, 100% full width. Header, show top bar, disable. Title, Show page title, off. And footer, off and off. Then I can refresh the page. Class. And now, if I want to see my page, I can click on the URL here.

And then I can click view page here. And I see that I now have a blank contact page. Perfect. I can also close it again. Now I'm doing this same step with 2 more pages, but a little faster this time. Class! I now have an About Us, Services, Contact and Home page. And that should be enough for now. That was step number 8, creating more pages and doing the Ocean Extra configuration for them. In the next step we can start Elementor Page Builder and design our page. Now we are here on pages and I would like to start and edit the home page.

For that I can click Start. And now to edit the page, we can click on “edit with Elementor” here. And then Elementor Page Builder opens. We use this to build the body and footer. That's why I'm going to show you how to use Elementor to create pages. So let's first go over the basics of Elementor, like how it's structured, and then we'll go ahead and create a site. We need to start with a basic configuration for Elementor so that we are working with the same updated version. If you have problems with this step, remember the landing page in the second link in the video description.

I would post updates there, or you can also leave me a comment. So if that means an internal section for you, we need to change a setting in Elementor. To do that, we can click on the hamburger icon up here and then click Exit. I can let this be decided later. And then we can come back again. Next, we can hover over Elementor on the left and then open Settings. Here I can open the Experiments tab and then we can scroll down until we find the Flexbox Container item. Here is the. And then we can change it from default to active.

And then scroll down and save the changes. With this setup, we can be sure that we are using the same updated version of Elementor. Excellent. Now we can go back to Pages All Pages. And click on the home page again. And here we can click on “edit with Elementor” again to open it again. Excellent! Now there is no longer an interior section here, but we have containers here. This is so perfect. Good. So, let's start with the basics of Elementor. Elementor is divided into 2 sections. Here on the right you have a preview of everything that happens on your page, and here on the left you can edit everything.

If you want to see the full screen version of your website, you can click "Hide Editor" here. You will then see the full screen version. But I'll open it again. You can also open the mobile or tablet version of your site by clicking "Responsive Mode" in the links below and then opening tablet or mobile here, for example. This will become relevant again later. But now we don't need that anymore. So I'm going to go back to the desktop view and close it again. First of all, I would like to quickly explain to you how a page is structured in Elementor.

I have prepared a finished page where you can see this very clearly. Now I will import them to our site. You are welcome to do this, but it is not necessarily necessary. Looking is also enough. To do this, we can look at step 3 on the Getting Started page, where I linked it. Here you can click this button. This brings us to Google Drive. I uploaded the template there. So I can download it here. Excellent! Then I go back to Elementor. And I can now close the Google Drive tab. And here I can click once on this gray file icon.

And then click the up arrow. Here I can select the file I just downloaded. Here it is. Then I'm going to open it. Here I can choose to import without enabling. Okay, I can see the template here and then I can click insert here. And then Elementor imports them to my site. Great, now we have a finished page where you can clearly see the structure of the pages. By the way, we will take a closer look at how the entire system works with templates later. I've only done this quickly once. So an Elementor site consists of 2 things.

Containers and widgets. You can think of containers as boxes that are used to divide the page into different areas. You can have widgets (also called elements) in these containers. These widgets are essentially the content of your site. You can also see them here on the left if we click on these 9 squares. For example, titles, images, Google Maps, etc. These are all widgets. Let's take a look at the structure of this page. If I move my mouse over this entire area, I can see that it is marked in dark blue on the outside. That's a container. I can also scroll down here.

Here I can drive outside again. And then I also see that it's marked in dark blue on the outside. This is the next container. And here we have the next one. Etc. This means that you can divide the page into areas using containers. In this large container we can find widgets and/or other containers. For example, in the top container we only have widgets. There we have a header widget and a button widget. The widgets are highlighted in light blue. A container can also contain other containers. For example, down here we have a large container and in it we have internal containers here on the left and here on the right.

They are also marked in dark blue. In these subcontainers we have widgets again. Here, for example, is an image widget. This is highlighted in light blue. Here is a headline, texts, etc. The reason you build containers in containers is that you can make different configurations for each container. For example, where the widgets are placed in the container. That's why you use these subcontainers to better structure the page. The main setting you can make is whether the widgets should be placed one below the other, like here, or next to each other, like here. You can see it quite clearly in this example.

Here we have a container, here on the right. It is configured so that the widgets are placed one below the other. That's why here the widgets are one below the other. But I also wanted to have 2 buttons underneath that were next to each other. So I put another container underneath, which you can see here because it's also marked in dark blue on the outside. And I put them next to each other and then added the buttons there. So now I have two buttons next to each other here. In short, containers are used to structure the page into areas.

You can then insert widgets to use the content directly or you can also insert additional containers to incorporate additional structures. Of course, that was a lot at once and maybe a little confusing. But do not worry. we will enterin more details about this in this video and we will see it in practice. Then you will understand everything. If you keep it up, it will work. Well, that would be step number 9. How is an Elementor site structured? Check. Next, we can now start and edit text. So build our site yourself with Elementor. To do this, I'll go back to Elementor and delete the template we just imported.

You can do this by clicking the X at the top of the respective sections to delete them once and leave the page empty. Excellent! We need to start now and add a container so we can then insert text into it. To add a container, you can click on this pink plus sign here and then you can select your structure here. So how many containers should be in it? For example, one, one on the left and one on the right, one third and two thirds, etc. I'll keep it simple and pick one. Okay, now we have this container here.

The container edit menu has already opened here on the left. We don't want to edit the container right now, so we don't need it right now. Let's start now and insert some text here. That means I can go back to the widgets by clicking on these 9 squares at the top right. And here I see all these widgets. If you want to insert a widget into a container, you can do so quite easily. Let's say we want to start with a headline. Then you hover over it and click on it. Hold it down and drag it to the right over a container and wait for this blue bar to appear.

Then you can release it and you have a direction here. This means that the title editing menu has now opened on the left. Suppose we went back to widgets. And if I wanted to edit the title again, I have several options to edit it again. I can hover over it and click on this pencil here on the right. You could also hover over it, right-click and select Edit Header. Or you could just hover over it and click on it. Okay, here we have content, style and expanded. Let's start with the content of this title. The first thing we have here is the title.

So this is simply the text that appears. For example, now I would like to create a page about navigation. So I'll write here: “We love surfing.” And the text here has already changed. We could add a link below. This means that if someone clicks "we love browsing" they will be directed to this link. I have several options. For example, if you wanted to direct this to YouTube, you could copy the YouTube URL. And paste it here in the link. It is important that you keep https colon, forward slash. And then when someone clicks on We love browsing, they'll be taken to YouTube dot com.

Alternatively, if you have already added more pages, you can enter contact, for example. So here they suggest the contact page. I can click there. And now it redirects to the contact page when you click on "we love browsing". You can also click this gear and select Open in new window. Then when someone clicks "we love browsing", Chrome opens a new tab and opens the contact page there. These are all some options. In this case, I don't want to have any links here. Then I delete it. Here we have the size. There you simply have some predefined sizes that you can configure.

But we actually set the size in the style, so you can ignore it. We can leave the HTML tag alone. What's really exciting here is the direction. Right now it's on the left. We could also center this, for example. Or to the right. I'll leave it centered. Excellent. That would be all for the content. And then we can see the style below. First, we have the text color. If you're wondering what colors you should use on your site, I've also linked a great article on the topic on the "Get Started" page here in Step 4 that explains it a bit.

But to summarize it briefly, you shouldn't use more than three or four different colors on your page, otherwise it will often be too colorful. I would definitely recommend it, but of course you can see how it fits on your site. To change the color of your text here, you can click on this color field on the right. And then you can drag this point over here to choose a different shade. You can drag this bar left or right to choose a completely different color. For example, this purple one. And with this bar you can make the text more transparent or less transparent.

Assuming you already know what colors you want to use, you can always insert the hex code here as well. If you want to reset your changes to the default value, you can also click "delete" here. And to close the edit again, you can click on the color field again. Excellent. Of course, editing the colors this way is really easy. The only slight problem is that it would take relatively long if you had to adjust it for each individual widget. There's also the problem that if, for example, you use one color for all normal text and then say "Oh, maybe I want to change the color a little bit," then you'd have to go to each individual text and adjust the color there.

Of course, that takes quite some time. Consequently, Elementor has incorporated a feature that makes this easier for us, namely Global Settings. If I hover over this icon to see the text color, I now see "individual". It's here because we just changed the text itself. What you can also choose by clicking here would be a primary color, a secondary color, or one of the others. These are, so to speak, default colors that you can use over and over again. Let's say I want to use the primary color. So it's this shade of blue. Now, if I go back to the widgets by clicking on these nine squares and then insert normal text, for example, by clicking in the text editor and dragging it below the title and then dropping it.

And here it also comes into fashion. And for the text color, select primary. Is that blue too? That has saved us a lot of time. So that's the first advantage. And now, if I said I want my primary color to be maybe a different shade of blue, I can change the primary color. And this text and title would change automatically. Not just on the home page, but if you also used the primary color on the contact page for example, the text would even change there. This means that if I want to change the primary color, I can click on the hamburger icon at the top left here Website Settings Global Colors.

Here I can click on Primary to edit it. And if I now choose a shade of green like this, for example, it changes for both of us. So you should definitely keep this in mind when using these global settings. If you change something, it will change everywhere you used it. Now I will choose blue for primary. So what I would recommend before you start working on your real side is this. See the article on colors I linked on the intro page. You can then create a color scheme and save the HEX codes. Then I would go to the global settings here and set the colors here.

You can easily edit them or add new ones by clicking "Add Color" here. Then you can give it a name. For example buttons. And here on the right you can select a color. By clicking here once. And then choose a color here. For example, Red. Then I'll come back here. And now I added them too. Of course, you don't necessarily need to work with global colors. As before, you can simply go to each color and edit it yourself. Or use a mix of both. If you like what you changed, you can click Save once. And then he is saved.

And then I'll go to the X up here. Then we return to Elementor in the normal version. And now if I want to edit the title again, I can click on it and then we're back to style here. It's about the color of the text. Next we can move on to typography. There we edit the font to be able to click on the pencil. You can change font in font family. It is currently set to Roboto. You could also use something else. In my case I would like to use Helvetica, for example. And then we have the source.

Here we can set the size. For example, you could make it very large or very small. I'll choose something in between. Then we have the font style. Here you can adjust the thickness it should have. For example, 900 or 300. I'll leave it at 600. When converting, we can set whether everything should be uppercase. Lowercase, uppercase and so on. I'll choose capital letters. For style we can change between normal and italic. I'll leave it as usual. And the marking is whether it should be underlined, overlined, crossed out, etc. I also choose default. The line height: Assuming you had two lines because the text would be very long.

Could you use this to set how much space there should be between the lines? Character Spacing allows you to choose the spacing between letters. And with word spacing you can choose the spacing between words. That's all for the typography too. And then we can come up here again. As with colors, instead of customizing each text individually, you can choose a global font. For example primary, secondary or one of the others. This works the same way as with global colors. You can select them here. And you can customize them by clicking the hamburger icon again Website Settings.

And here Global Source. What I would also recommend here is to read the article I linked to on the topic of fonts on the home page in step 4. You can then choose a font, etc., and set it here in the global settings. So to set it up, you can click here as usual. And then edit it like we just saw. You can then adjust this for all fonts however you want. Or you can also add new fonts. You can then decide later whether you want to work with your global fonts or whether you want to customize them individually.

What I would definitely recommend is to set the font family and size in the global settings. If you have done this, they will automatically be correct when you insert a widget and do not need to be adjusted each time. Okay, that's it again for the global settings, so I'll save. And up here in the Well, then I'll come back here. And here we have the style. Text Border simply gives a border to the text. You could make them thicker, for example. And here you can also change the color. I don't want to have any here, so I'll set it to 0 and close it again.

Text Shadow simply gives a shadow to the text. We can also click on that. Here we can first change the color of the shadow. Here I can make it less transparent. And with this bar you could make it less sharp or sharper. And with this we can move it horizontally or vertically. All of that is possible. I don't want any shadows here, so I'm going to set it to transparent. And get out of here again. Excellent. We don't need the crossfade mode and we don't need the extended mode either. And then we can go back to the widgets here.

Excellent. Now we have edited a header. Next we can look at the normal texts. For normal text, you can use the "Text Editor" widget. So we can select it and drag it under the title here. We already dragged it once, but I'll delete it by right-clicking on it and selecting delete. And then I'll edit the text here again. And here we have expanded content, style and again. In fact, the content here has changed a bit compared to the title. What we can edit here is the full normal text. So I can change it here and write something else.

I can make it bold by highlighting something here and then clicking B. I could make something italic. And I could also underline it. This works very, very similar to Word or Google Docs. I can even make a bulleted list or even a numbered list. For example. 1 and 2. I can link things by highlighting text. Click this Insert Link Here symbol and then insert a link, just like I showed in the title. Exactly. But I'll leave it at that. We don't need columns or column spacing. And that would be it for the content here. Then we can get into fashion.

And here we have basically the same thing as the title, only this time the orientation is style. So I could center it here. Or put it to the right. But I'll leave it alone. I can change the text color using one of the global colors. Or customizing it. I can also change the font, for example one of the global settings. Or I can edit it individually again by clicking on the pencil and then I can do the same settings that we saw in the title. Font family, size, font style, etc. This works exactly the same. Here we also have text shadows again.

It's like the shadow of the headline. And we don't have to dwell on it for now. Well, that's all there is to texting. I've looked at it in quite some detail because these were the first widgets we worked with. The good thing now is that almost all other Elementor widgets are structured very, very similar. Basically all you have to do is paste it in and then you'll see the content, style and zoomed in. And then you can go through the settings. They basically say what they do. You can play with it and if you don't like it you can always undo it.

What wouldthen the next point. Undo and redo things. We've done a lot of editing here now, and assuming I don't like what I did, I can undo it. To do this, you can click on the history symbol at the bottom left. And here you will see all the changes since the last time you saved. That means you could, for example, click on the edited text editor here. And then it goes back to that level. I might do this a few more times or do it again in the future. What you can also do is enter reviews.

There you will see all the changes you have saved. So, for example, if I liked what I did the day before yesterday and I saved it, I can go into the revisions. And then I have my reviews here. For example from 2 days ago. Then I can click on it. Then change the content here to the state of 2 days ago. If I want to keep this, I can click Apply here. And then click save here. So that's great if you've ever made a change that you didn't really want to make or maybe regretted later. Exactly. That would be step number 11.

Undo and redo things. Probably one of the simplest, but also very, very important and useful. In the next step we want to edit the buttons. I can go back to Elementor for that. Before doing so, I would like to remove this text because it is actually unnecessary. It was simply added to show something. So I can go there and then right click and go to delete. Then he left. I would like to start here and insert a button. Then I can go into the widgets. And then we have a button here. Now I can click on it and drag it under the header here and then drop it.

As with text, we now have content, style, and advanced. This is in every widget. Of course, the content here has changed a bit compared to the text, but it's also pretty simple. For the type we simply select default. You can also click on it and choose another one. Basically, these are just some pre-made layouts, but we'll style them anyway. The text says “click here.” This is simply the text that appears on the button. I'd like to change that to "Why?" So I can come in here and type "why?" And now comes probably the most important point about buttons: the link.

The point of buttons is that you click them and something happens. For example, you may be redirected to another page. Here in the link you can now link to any page, for example. For example, you could link to YouTube dot com by copying the URL and then pasting it here. You've already seen it in the text. You also have the option to search for a page you have already created. For example contact. And if I start entering the name here, the contact page is suggested. And then I can click on it and then it redirects me to the contact page.

Another option, if I remove this, is to have the page scroll down to a specific area of ​​your page when you click the button. This is called an anchor link or anchor link. To do this you can enter here as a link, # and then a word. For example, if I enter "#more" now, it will work later. I'll come back to that later, but definitely keep it in mind. Feel free to join. When aligning, you can specify how the button should be aligned in the container. For example centered, left or right. I'll center this. Let's take a quick look at how everything looks in the full screen version.

Okay, looks good. Then I'll come back. Next we have the size, which is currently set to small. You can also set it to medium or one of the others. But that doesn't make a big difference because we set the size based on the style anyway. Icon, that's super interesting too. You can click "Icon Library" here and then insert an icon here that should be included in the button. For example, since this is surfing, I can search for Water. And then select it and go to Insert. And then I have waves like this as an icon here.

Then you can also choose in Icon Position whether it should appear before or after the word. And for icon spacing, how much space should be between the word and the icon. I'll leave it at that. That would be all you can find out about the content of a button and then we can get into the styling next time. First of all, here we have the typography. Then just the text on the button. There you could again select a global font, for example accent. Or you could also customize it. As in the text. Of course, you can always use a global setting first and then go in and edit it.

Then the basics are correct, for example the font, and then you can adapt the rest to your liking. That is also possible. Here you would mainly adjust the font size, as this allows you to make the button larger and smaller. Let's just say that could be good. The font family is already good. Font style and conversion. You already know all this from the texts. I don't want to show that too often. Okay, so I can click on the pencil here again. Next we have the text shadow, which you may have already seen in normal texts. I wouldn't even edit it into a button because it doesn't look that good.

But if you want, you can, of course, click here and add a shadow for the button text. Next we have a cool setup, which is normal and floating. This refers to the text color, background type and color. There is a small line below that means it doesn't affect the rest. Normal is simply what you see here on the button. And hover is when someone moves the mouse over the button, which is what's supposed to happen. If now I set the white text color to normal and the background color to primary. And then it floats. And there we change the color of the text to our primary color.

And the background color is white. And now if I hover over it. Then the text color changes to blue and the background color becomes white. That's a cool effect too. Here you just have to make sure that you can still recognize the button. Because we have a white background right now. For this I can add a frame type here. No one is selected at this time. For example, you could choose solid. Then select the width, for example 2. Then I can choose a color, for example our primary color. And if I hover over it now, I have a blue frame here.

Perfect. We also have "mouse touch animation" here. So what should happen if you go over it? For example, we could select Grow. If I move here now, the button will grow. Or you could also take pulses and then pulse like this. These are all some interesting effects that you can definitely play with. I'll just choose Grow. All of that would be too normal and floating. We already have a type of frame. Next we have the radius of the corner. It's how rounded the corners are. The values ​​are linked because Link Values ​​is selected here. For example, if I enter 25 now.

We have 25 up, right, down and left. And the button has become very round. If I delete the link and then enter 45 at the top, for example. Only the top left corner has become especially round and the rest remains the same. You should pay attention to that too. Let's say I relink everything now. Then everything becomes very round because it becomes the highest value. Although 15 should be fine. Excellent! We could also add a box shadow here. So that would be a shadow of the entire button. Then you could go in there and experiment with it. This works the same as the title shadow.

The next setting we have here in the style is the padding or padding. This allows you to change the size. This is simply the distance from the word to the outer edge of the button. Here the values ​​are now linked again. So if I enter 40, for example, here we have a lot more distance to the outside. Normally, I'd probably do 15 up and down, for example. So don't link that anymore and move a little bit more left and right. Let's say 25. I think it looks pretty good. That would be all for that matter. Then we would also have advanced settings.

But I'll leave you alone for now. Then we can go back to the widgets. Excellent. And now I have added the first button, which already looks good. Here comes another cool trick with Elementor. We've put a lot of time and work into making this button look good. So what we can do now is instead of doing everything again for a second button. Right click here, copy, right click, paste. And now we have the same button again. That means I saved myself a lot of work. What else can you do: I will delete it again. So right click and then delete.

You can also right click on it and click Duplicate, then you will have it twice. I'll delete it again now. Right click and delete. And what you can also do is add a button below here. And then you can right click on it here, Copy and right click on it and select Paste Style. This then inserted the style of the previous button, but not the content. Then I would have to edit it. For example, insert another text or link. But the basic styling, i.e. colors, scrolling animations and all that, would already be included here. You can also copy and paste from one Elementor page to another.

These are also some options that can definitely save you a lot of time. That's why I would always recommend that if you want to create several similar widgets, you create one first and do it really well. And then just copy and paste the style over and over again or just duplicate everything and then change the content. Actually, this one is supposed to be a little bit different, so I'm going to quickly click here and go into the style. I would like to have it in another color now. Then I can use blue for the text color and white for the background color.

And it already has a blue frame because I took the old button design. Perfect. I'll leave it at that for now. And great. Now we've done some wonderful work with the buttons here and there are two cool buttons here. That would be step number 12, working with buttons. Super important and definitely a good step to learn how widgets work. And then we can do step number. 13 and take a closer look at the container configuration. As already mentioned in step number 9, containers are used to build the structure of the page. So where, what widgets are placed, what areas are on the page, etc.

And in order to build these structures, we have to learn what configurations can be made in containers. So let's take a look at it now. You can add containers by clicking this plus here. Here you can select the structure you want. I'll keep it simple now and just pick one. You also have the option to insert containers into containers by selecting the container widget in the widgets here and dragging it to another container. Now we have a container here and another container inside. I'll delete it again. So right click on this icon in the inner container and delete.

And now we just have this big container. Now I'm building an area that allows you to easily view the container configuration. You are welcome to join. To do this I insert 2 icon widgets one below the other in this container. I can look for the icon here. There we have it and then I put it in the container. Then I duplicate it, so right click on it and duplicate it. And in the second I change the icon. For example, this. Insert. Excellent. If you want to edit the settings of a container, you can hover over it at the top and click on these 6 dots.

Here we have Design, Style and Advanced. This is similar to widgets. Let's start with the design. Here first I would like to show you the minimum height. The containers are built in such a way that the height changes depending on how much space is needed for the contents. For example, if I drag a text widget here, the container becomes taller. You can also set it so that the container has a minimum height, even if the content does not require it. To do this, I can edit the container again, then change the pixel measurement unit to VH for the minimum height and move the slider here.

And here now you can see that the height changes. If you select 100 in VH, this container will fit the entire screen height of the respective device exactly once. VH stands for ''viewport height'', so it adapts to the respective device screens. I'll leave it at 100. Next we can see the width of the content. Here you can choose between boxed width and full width. When you add a container, the default value is a box. Boxed means that the container itself goes completely from left to right, but the contents of the container, i.e. the widgets, do not cover the entire width of the page, but are still limited to the left and right.

You can also see this because this blue tick ends here. For example, if this text was very long. Then you can see that it is not completely left to right on the page, but jumps to a new line beforehand. Actually that's not bad at all. When you read a book, the content does not reach the end of the page. We can also change the maximum width of the content here by editing the container again. And then move this slider. And then you see that the widget boundaries are changing. Ratherframing, we could also choose full width. So there is no distinction between content and container width.

Basically everything goes completely from left to right and when you set the width it changes the width of the container. This can also be seen in the fact that the exterior marking of the container changes. Normally the box is used and then the standard width of 1140 px. But I wanted to show you the settings because you can use them, for example, if you have 2 containers next to each other and you want to adjust the width of both, for example so that one container is wider than the other. This will make even more sense when we look at other structures.

Now it's enough if you've seen it once. I'll set it back to Boxed and 1140 and then delete the text as well. Then right click, delete. And then I go back to the container. So let's look at the elements. With this we edit the position of the elements in the container. First, we have the lineup here. By default, Elementor sets it to Column. This will organize the content together. You can see that here too. The widgets are one below the other. You could also change the orientation. Here I can, for example, select a row. And now the widgets are next to each other.

It goes from left to right. You can also choose the inverted row and then simply flip it over. Or flip the column and then you'll change the order here as well. I'll leave him alone. Next we have Align Elements and Justify Content. What this does depends somewhat on whether you choose column or row. For Row, Align sets whether the content should be placed at the top, middle, or bottom. We can also try that here. Up, middle, down. I'll put it in the middle. And Justify sets where it should be placed horizontally. For example, on the far left, in the middle, on the right, with space in the middle, with space around the outside, or evenly distributed.

I'll choose the medium now. OK. But if we go from row to column, it is the other way around. Align then sets where it should be placed from left to right. And justify the height. So for example, here in Align I can select left or right. I will choose the medium. And Justify sets whether it should be placed in the middle, on top, with space in the middle, etc. Here I also choose the medium. Element spacing, which applies to all alignments, is simply the space between content. You can move it here. We don't need wrapping or additional options.

This is more for advanced users. Another configuration related to containers is "align yourself". If you have made position adjustments for a container, all contents of the container are positioned that way. However, if you have individual content that you would like to position differently, you can also adapt it individually. To do this we can, for example, edit this icon and then go to Advanced. And select a different position here in Align Self. Sometimes this can also be useful. Excellent! That is the fundamental principle that you must understand. Once you experiment and understand these 7 configurations, you will be able to combine things and containers and build virtually any structure you want.

Now we could do it with the buttons, for example. So I'm just going to delete what we just created by clicking X here in the container. We have a container up here and it contains 3 widgets. The container is column style. So the widgets are all one below the other. But I want the two buttons to be next to each other. So to make this happen, I can go to the widgets and drag an inner container under the buttons here. Now, to edit an internal container, you can hover over it and then click on this icon. And then here, in Layout, in the elements, under Alignment instead of Column, I can select Row.

Then I can drag the two buttons there by hovering over them, clicking on this pencil symbol and dragging it down. And then when this blue bar appears here in the inner container, I can drop it. And then I have the first button. And now I'll do it again with the second one. So click and drag next to it. And as soon as you see that little blue bar next to it, you can let go. And now we have 2 buttons next to each other. By the way, if you ever have trouble organizing widgets or containers, you can always open the browser down here on the left.

There you can see all the elements of your page and then you can organize them. Excellent! I'll close it again. And now I have the button next to it here. Now I would edit the container again. And then in the Justify elements, I can select the center. So that they are both centered. Perfect! That was a living example of how container configurations can be used to have the desired structures. In this tutorial we will see some more examples so you can understand it even better. So don't worry, it may still seem confusing, but if you look a little further and experiment a little, it will come with time.

That was step number 13. Container configuration: verify. In the next step we can look at images and backgrounds. Also an important point. To do this, I'll go back to Elementor. Let's start with the backgrounds. To do this, I can first build the section that will have the background. I want to have a section up here that covers the entire height of the screen. And this should have a background image and the title and buttons should be in the middle. First of all we have to adjust the container a little. To do this I click on the 6 points of the container.

The section should cover the entire height of the screen, so you can switch to VH for minimum height and select 100 once. I also want to have the content in the middle. Then I can go to the elements. And then under Align Elements, select center. And with Justify, we can also select center. And perfect, now I have the structure I wanted for this section assembled. This was another example of how you can combine containers and their configurations to build the structures you want. Below we can see the backgrounds adjusting the bottom of this large container. So we need to click on these 6 points to edit it.

We want to change the background so we can get into the style. First we can choose the type of background. Here we can choose Classic, Gradient, Video and Slideshow. I'm going to be classic. Here we can first select a background color. Then you can click on it normally and choose any color. For example, here is a red shade. And then we would have a normal color as a background. I can click on it again there. What you can also do is follow the process here. This is a mix of two colors. Here you have color one and here the second color.

And then they mix. You could also change it to purple and pink, for example. Then you could also change the position, i.e. where they are located. Or the angle. For example, if it goes from left to right or from right to left. And also the type. So linear, that is, online. Or radial. More like this in a circle. You can work with it a little. It's definitely a little less boring than a single color. Maybe you can use a very light gradient if you don't want to go overboard. Another great thing we can add here is a video background.

I'll go up there. Here we can insert a YouTube or Vimeo video. I have already prepared something here. To do this, I copy the video link and paste it here. And then we have a background video. Then you can also set the start time. So for example it starts playing 2 seconds into the video. And the end of times. So when should this end in the video? say after 10 seconds. And then it starts again. You can also choose to play it all just once. This means that it will not repeat after the ending you have selected here.

You can also choose whether to play it on a mobile phone or not. Then it is set to no. The option exists because people with mobile data are often unhappy when they accidentally play videos. You can also set an alternate background here. This is an image that appears when the video cannot be played. For example because it is broadcast on mobile devices, or perhaps because there is some type of error. Then you should definitely determine that. Okay, I'll delete this here. Basically, I wouldn't recommend using a video background because it often takes forever to load and makes your site slower.

So I would probably leave it at that, but if you have an interesting video that you really want to use, you can definitely use it here as well. So it's not so bad. Okay, so we can go back to the classic background type. And here we can also select a background image instead of a background color. That means I can go to the plus here and then upload a photo. To do this I can go to "Select Files". And here I can select one of the images from my PC. In this case, for example, I want to use this image, so I can click on it once, open it, and then it will load.

Here you can see the size of the image. It is very important that your images are not too large. Otherwise, your site will take forever to load. The visitors leave. Google recognizes this and places you lower in the search results. 363 kilobytes is pretty big. For background images this large, I would limit the size to about 500 kilobytes. If you want to learn how to get good images and icons and also want instructions on how to make your images nice and small, I have linked a short tutorial on the Getting Started page. You see that here. I will show you some tips and tricks that are very helpful.

So I already have this background image here and then I can go to Insert Media. And now I have a background image here. That doesn't fit perfectly. That means I have to adjust the size a little first. Here on the left I can choose different methods to decide the size. For example, car. Then it simply automatically crops part of the image. You can also choose another position. For example, down in the middle, then change the position here. You should always see the full screen size. The problem with Auto is that every visitor has a different screen size and what you configure often doesn't look good on other screen sizes with Auto.

And it is difficult to adjust it correctly in a car. Also, the “Fit” and “Custom” options are difficult because they don't scale well to other screen sizes. Sometimes the image doesn't even completely fit into the background. Therefore, when it comes to size, it is best to choose covers. Elementor then automatically adjusts the size to fit the screen no matter how big the screen is. For attachments you can choose between scrolling and fixed. Scrolling is normal and fixed gives you this effect when you scroll down. We don't need to repeat. And then we can take a look at the background overlays.

We have a very clear background image and also a very clear font. We can add a background overlay to change the background a bit. For example, I can choose Classic as the background type and set a color. Then you could, for example, select black as the color. And then you can see that the background has become a little bit darker. I can go out again. We can also set a different opacity here so we can edit this a little bit. For example, make it completely dark or much lighter. You could even add an image as a background overlay, which is an image on top of the background image.

This works well, for example, if you have something that has been cut out and then needs to fit. But for now let's stay here. Okay, that would be the background overlay. It's also very useful if you have fairly clear backgrounds and widgets. When I look at this now, it looks very good. This was now a normal background image of a container. By the way, you can also edit the backgrounds of the internal containers. This works exactly as I just showed you. In the next step, I would like to add a section below here to show you normal images again.

I want to have an image on the left and several widgets on the right. This is another good example of container configuration. So let's start by adding a container. To do this I click more again. I choose a container again. Then I can adjust the height. So set this to VH and make it a little bit bigger here. So it should be good. To have the image on the left and additional widgets on the right, I can go to Elements. And here we can choose Orientation, Row. Then I go back to the widgets. Next I'll add 2 inner containers next to each other here.

That means I'm dragging a container widget here. And then I'll right click on it and duplicate it. And now I have 2 next to each other. Perfect. By the way, we could have built this structure if we had selected the 2 here after clicking the plus sign. But I wanted to show you again how to do this manually. To now use an image widget, we can go to the widgets here, select the image widget and drag it once to the left container. We use this to embed images on the page. In the content I can first select an image.

That means I upload there and then I can upload one or grab one from my media library, meaning from images I've already uploaded. I'll go to upload files and select one from my PC. Here I have this, then I'm going to open it. You should also make sure thatbe too big. And then you can go to Insert Media. Excellent! Now we have the image here. Here you can now set the image size. These are just some pre-made sizes. You can also experiment a little with this. For example, also individually. But I find it easier to go into the style and adjust the size here using the width.

I'm going back again. We can also set the alignment inside the inner container. We can add a title. And you can also insert a link. This means that if someone clicks on the image, they will be redirected to this link. So here we could select an individual URL and then enter it here. Great, that's all in the content. Then we can go back to the style. We only look at the size. We don't need opacity. We also don't need CSS filters. But you can try both if you want to try it. In fact, I would change the corner radius again.

For example, if I specify 25, it will round the edges. This works the same as with the buttons. Okay, so we can move on to Advanced. And here we now have the outer space and the inner space. Also called margin and padding. You have already seen the space inside the buttons. This is simply the distance from the outer edge of the image to the edge of the container border. For example, if I enter 50, we have 50 pixels of space above, left, right, and bottom. This allows you to easily move your widget or container around a bit. I can also unbind the values ​​and just push them in one direction.

But I'll reset it again. Margin moves your image up, right, left or down. If I unlink the values, and here I would also recommend choosing percentage. And, for example, increase it to 100. We gain 100 percent distance up and move the image down, so to speak. You could do the same downwards. So I have a lot of space down here. Or left and right, but the space is limited by the containers. I will delete the values ​​again. If you want, you can go negative. For example -7%, then the image goes to the top container. I'll delete it again.

You can even edit the outer space and inner space of the containers if, for example, you want more space in the top section. To do this, you can edit the container, go to advanced and adjust it here. For example, you would adjust the inside distance 5% more. And then we have more space up here. I would just play around with it. You can use this, for example, to group widgets together or to create more space towards the edge of the page on the mobile version of the page. You can always find them in expanded form. Exactly. Well, we don't really need anything else here.

What I wanted to show you again is a motion effect. If we go to the image here and then click on Advanced and Motion Effects. Can we set an entrance animation here? For example, Fade in or Fade in left. When someone opens the page and scrolls down for the first time, this animation appears here and the image moves from left to right on the page when they first open it. Here you can also set the duration of the animation and a delay. So how long should you wait for this effect to occur? You can also use effects like this.

I just wouldn't overdo it, otherwise at some point it will get annoying. Well, that's all about images and backgrounds. And step number 14. Check. Before doing step number 15, I want to do a few more configurations. First, I want to add some widgets here on the right to make this section make more sense. I'll do it relatively quickly now. Here we could, for example, add a header at the top. Make them a little smaller. Then I can add text below. I then pack an inner container underneath and place it in a row. And add 2 buttons there. Excellent! Assuming I want to adjust the width of the two containers, such as making one wider than the other, I can move the mouse between them.

And when this icon with the two arrows appears, I can click and drag it left or right to adjust the width. Alternatively, you can edit the containers and experiment with the box and full width settings I showed you above until you like it. That works too. It's also a good lesson to understand this better. You should always open full screen mode to see how it looks there. The next thing I wanted to look at again is the button. If I click on it once, you can see that we have specified "#more" as a link so that the page will scroll down when you click on it.

But when I click on it, still nothing happens. This is because the area to which it must move has not yet been defined. For example, I can edit this container and open it expanded. And here, in CSS ID, I can enter the word ''more'' to define that it should scroll here. And then I can save. Now if I click on Why, it scrolls down. Because I gave this section the CSS ID More and the button links to Hashtag More. This means you can use this effect to scroll left on your page. Also a cool effect. And I wanted to do one more thing in this container because I think this transition is too difficult.

If we edit the top container. And then go to the style and shape of the dividing line. I can select down here. And with the type, for example waves. And now I have waves like this that allow for a much easier transition to the next container. I think that looks really good. And it also fits thematically. Of course, you can also choose something else, choose a different color, change the width, change the height. You can experiment a little with that. Excellent! That's all I wanted to show you again quickly. Now we can move on to step number 15 and make the page responsive.

So it adapts the entire mobile. Most of your visitors will come from mobile devices, i.e. smartphones or tablets. And that's why we need to make sure it looks good on these devices as well. To check this, we can click on Responsive Mode at the bottom here. And then up here we see desktops, tablets and mobile devices. For example, I can open the tablet and then see how my page looks on the tablet. That looks pretty good. I can also open the mobile and then I can see how it looks on the smartphone. In this case, for example, I think the words are a little big and the buttons could be centered.

Let's start with the title. To edit that, I would click here. And then move on to style and then typography. So completely normal. And here now I see this mobile icon next to the size, which means that everything I change here now, where the mobile icon is next to it, only changes on the mobile version of the page. For example, if I make this font small and then go back to desktop mode. Is it still big? Then I'll go back to the mobile version and the typography and adjust the size a little bit. Let's put it this way.

Then you could search more here. For example, you could change the line height for mobile or the character spacing. But nothing like the font, the conversion, the style or the markup. They would be changed everywhere because you don't see this mobile icon here. Basically, this means that you should open your site in responsive mode and then see if anything seems wrong. If you don't like it, you can customize it just like you would on the desktop. For example, changing font sizes, adjusting margin and padding, changing container settings, or inserting a different background image, etc. You just have to make sure that the configurations you make have this mobile icon next to them.

Otherwise, change the layout on all devices. I would definitely experiment a bit with that. Another problem is that sometimes you can have areas that unfortunately cannot be easily adapted to your smartphone or tablet with the given responsive settings. Sometimes that just doesn't work well. What you can do then is create a version for each device. For example, let's say the correct container is not working correctly. Then I can go back to the desktop. You could then recreate this container and then build it to look good on the smartphone. So I'm going to create a new container and copy and paste all the correct widgets here.

I'll do this a little faster now. Then I can open everything again on my mobile and see if it looks good on the smartphone. If something is wrong, now I can adjust it and don't have to worry about the mobile icon next to settings. Once this is done, I can configure the correct areas to display on the correct devices. I just want to show this bottom area on smartphones. That means I can edit the container. Then I can go to expanded. Here in Responsive and here in Desktop and select Hide on tablet. Then this container will only be displayed on smartphones.

I don't want to show this container right on smartphones. Then I can edit the correct, expanded and responsive container. And select Hide on mobile. Then it will no longer be displayed on smartphones. Excellent. In the Elementor preview you can't see the effect now, but if I save it and open the page by clicking on this eye here. And then right click, browse. I can select mobile up here. So I see it worked. Perfect. By the way, this trick not only works for containers, but also for widgets. I would recommend not using this too often. It's best only if you have things you can't do with responsive settings.

These are the main settings you need to know to make the site responsive. This should allow you to customize the page very well. There are a few other additional settings you can make in response mode. If you're still having trouble getting the site to respond, you can check out this tutorial, which I linked on the home page. I'll show you some more tips and tricks to make the site responsive. Well, that would be step number 15, making the page responsive. Next, we can take another look at how to reposition and remove widgets, internal containers, and external containers.

The easiest way to do this is to use the browser. We can open it at the bottom left and then it will be here. There you can see all containers, subcontainers and widgets on the page. This is particularly useful if you have larger pages with complex structures, because you have an overview of the entire page. For example, if I click on this container, it takes me there and highlights it. Then I can open it to see what's there. If you click on the items in the browser, the respective editing menu will also open on the left.

You can use the browser to move things. This works with all elements in it. For example, if I want to move a large container, I can click on it, hold it, and then move it somewhere. And then leave it. And it's already postponed. I can also do this with widgets or internal containers. It works the same way. This way I can place them anywhere on the page. You can also duplicate, copy, paste, etc. with a right click. I want the page to be blank. To do this I can right click on the content in the browser and click delete.

And great. Now we have a blank page and we have already done step number 16. Now we come to step number 17, basically the most important tip in this video, that is, working with templates and blocks. You've probably already worked a little with Elementor and found that it's fun and pretty easy, but it also takes quite a bit of time to create your own pages. And if you're 100% honest with yourself, it usually doesn't look completely professional. Consequently, I recommend working with templates. These are pre-designed layouts by professional designers that you can import into your site. All you have to do is adjust the content and layout for yourself.

The big advantage is that this design, that is, the way the site is structured, is done in a very, very professional way. That means they are super responsive. And you just have these little subtle adjustments that take everything to the next level that you can't know as a beginner. Consequently, I would definitely recommend you work with him. To open it, we can click on this green icon here. We did this with the Envato Elements plugin. We have 2 options. You can work with blocks or entire pages. Blocks are simply sections of a page. For example, an about us section, or a call to action, a contact area, FAQs, there are many different ones.

For example, you could go to Hero. And then you can choose one of them. For example, I like this and then I can go to insert template. Then import it to my site. And now I have this section here. Then I could edit it easily. The only problem with this is that Elementor is in transition at the time of this recording. I explained to you earlier that Elementor pages consist of containers and widgets. But a few weeks ago this did not exist. Back then, Elementor pages still consisted of sections, columns, and widgets. You can see it quite clearly in this example.

We have a large area here. If I click on the 6 dots, I see "Edit Section". So this is a section instead of acontainer. In this case we have 2 columns. Here on the right and here on the left. I can click on that too. Then I see that it is called column instead of container. And inside are the widgets. So this is a slightly different system. Envato Elements has not updated its previous templates for the container model and, as far as I know, will not. Only new templates you create will likely be built with containers. This means that you might import a template or block that still has sections and columns instead of containers.

But using it is not a problem. If you import an old template and want to use it, you must first convert it to the container model. So if you import a template I would click the 6 dots once to check if it uses the old system. If it says Section instead of Container, you can click Convert at the top here. Then Elementor will convert it automatically. And great! It was then converted and the container version is below so you can compare. For simpler designs, this works without any major problems. Sometimes there might be some issues, then you would have to manually adjust the version of the container and make adjustments to it to make it look the same as the original versions.

For example, you would now see that the widgets are placed at the top of the container and not in the middle, so now you would have to edit it again and set it to the middle. It's mainly things like that. If you are converting a template and are having problems, you can also watch this video on the home page. I will talk about typical conversion errors and how to fix them. In general, the video is also interesting to watch because, for example, I go into more detail about setting the width of the containers and the connections between them.

The tips are also useful to better understand the templates and adapt them for you and generally to create better pages. Once you're happy, you can delete the higher version by clicking the X up here. So let's go back to the templates. You can edit them as I showed you before. That means I can see here now, oh, here's a button. Then I click on it, edit the content, style it, adapt it to my needs. You could change the background image. I can also remove things I don't like, I can add other widgets, or I can even undo everything completely.

Then you are free to do what you want, build and change. In the same way you could then move on, go back to the templates, release blocks and move on to the next one. For example a map. Then I'll go to the Map. Maybe I like it, then I can go to insert template. And then it's there too. Then I can convert it again and adapt it. This way, you could build a page gradually. As you can see, blocks are a good way to save work. I will eliminate them both. Alternatively, you can also insert full templates, i.e. entire pages, by going to Envato Elements, Free Kits.

And here you now have template packages, so to speak, complete themes. For example, for a music teacher, cybersecurity, etc. there are many of them. You don't need to choose anything that fits your site in terms of content. Theoretically you can design a Mexican restaurant if you are a lawyer. It's more about the design. You still adapt the content yourself. So here I would see if you like something. You can always see it in advance by going to Preview. For example, I like this. And then I can go to Install Kit. And then I can go to View Kit.

And then we're up here on the installed kits. And here you can see the subpages, for example the home page, an about us page, services and several different pages that you could use. You can also see a preview here. Let's say I want to edit the home page here, so I can go to Insert Template to import the entire page. And then I can convert it again. To do this for an entire page at a time, I can go to settings at the bottom left and click Convert here. Perfect! And then I would have a whole page here that I can easily adapt and improve.

This works the same as with blocks. Basically, you've learned how to customize now because I've shown you the most important widgets and settings. Of course, there are tons of other widgets, as you can see here, even if you scroll down. If you want to use a new widget, you can just drag it in and then see what it says, test it, and if in doubt, undo it. Or you can also check the instructions for the individual widgets on the Internet. There are too. By the way, templates can have quite complex structures, so I would recommend working with the browser to loop through the structure.

Exactly. So my recommendation is definitely. Use templates, i.e. pre-made pages or blocks, import them to each of your subpages, convert and enhance them and then simply adapt them with your content and design. This is the easiest, saves you a lot of time, and usually looks a little better in the end. You can also delete everything you don't like. Well, that would be point number 17. Work with templates and blocks. When I open the page, I see that it looks pretty good. But I don't have any navigation here. This means that we cannot open our subpages at all.

So we have to create the navigation and then style this header area. Then we have to build the footer in the same way. These are steps 18 and 19. I haven't included them in this main tutorial because there are some variations and not everything is relevant to everyone. Instead, I linked it as an additional tutorial on the Getting Started page. You should watch this tutorial first. There I show how you can create the navigation and then how you can style the header with the customizer, i.e. the theme. By the way, if you want to watch the videos on YouTube, you can click on them, then right click on them, copy the URL, and then open them in a new tab.

Then I would watch this video. There I show how you can create and configure the footer with Elementor and an additional plugin. This is also important if you want to have a footer. In it I also show how the header could be created and styled with Elementor as an alternative to the customizer. Assuming you want to create a single-page website, that is, a website that only consists of one long page divided into several sections, you can check out this tutorial. I'll show you how to set it up and create the corresponding navigation. If not, there are some other additional tutorials here that might be relevant to you.

You are welcome to check them out. But that would be the main part of the tutorial. If you have followed everything so far and are still looking at the header and footer parts, you should know everything you need to make one in order to build a beautiful site. My tips for you: use templates or blocks, they make the creation much easier and more successful. Do not write texts on your site that are too long; Many times no one will read them. And before you start, think of a color and font combination that you can follow. If you have any questions, feel free to leave me a comment.

Better below this main tutorial, even if it involves an additional video. I read every comment and respond to each one. If you liked the video, give it a like, it helps me a lot with the YouTube algorithm. And if you want to see more videos you can also subscribe. Thanks for looking and I hope you enjoy building your site. Bye bye.