Elementor 101: Design great WordPress websites | Janosch Herrmann | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Elementor 101: Design great WordPress websites

teacher avatar Janosch Herrmann, Tools for digital business

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

34 Lessons (7h 4m)
    • 1. Introduction

      1:30
    • 2. Website basics

      6:23
    • 3. Registering your domain name

      3:11
    • 4. Set up your webhosting

      8:20
    • 5. Install an SSL certificate

      3:42
    • 6. Create a professional email address

      6:53
    • 7. Get to know the WordPress dashboard

      5:57
    • 8. WordPress basics: Themes & plugins

      3:36
    • 9. Install Elementor & Elementor PRO

      3:36
    • 10. Create your first page with Elementor

      12:12
    • 11. Create a homepage

      36:58
    • 12. Make your website responsive

      27:11
    • 13. Create a design system: Global fonts & colors

      15:35
    • 14. Create a design system: Theme styles

      11:44
    • 15. Create an about page

      23:51
    • 16. Design a contact page

      11:23
    • 17. Create a landingpage

      46:21
    • 18. The Elementor theme builder

      2:33
    • 19. Create a header

      26:51
    • 20. Create a footer

      11:04
    • 21. Create a blog page

      12:57
    • 22. Design a blog post template

      15:24
    • 23. Create an archive page

      8:02
    • 24. Create a 404 page

      4:02
    • 25. The Gutenberg editor

      13:26
    • 26. Elementor popup builder

      17:35
    • 27. Elementor motion effects

      12:45
    • 28. Site settings & common issues

      11:05
    • 29. Elementor productivity

      9:21
    • 30. Backup & update your website

      12:47
    • 31. Elementor role manager

      9:28
    • 32. Speed up your website

      15:58
    • 33. Secure your website

      11:29
    • 34. Outro

      1:10
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

186

Students

--

Projects

About This Class

Welcome to the Elementor 101 course!

If you want to learn, how you can design beautiful websites without having to write a single line of code, then you've come to the right place. In this course, I teach you all about Elementor: A tool that allows you to build your own website with absolute ease.

Elementor is an extremely easy-to-use and extremely powerful page builder, built on top of WordPress (the content management system that powers 40% of the entire web!). Together, these two tools are extremely powerful, because they are both beginner-friendly, but also allow for lots of customization and extra features!

In this course, we'll go step-by-step through everything thatĀ Elementor has to offer, so that you will be able to understand the software from beginning to end.

We'll cover topics like:

  • Registering a domain name
  • Setting up your web hosting account
  • Getting to know the WordPress interface
  • Creating your own design system
  • Creating a blog
  • Creating custom headers & footers
  • Using the Elementor popup builder
  • Designing beautiful landing pages

& much more!

If you have any questions, feel free to ask me in the "Discussion" section.

I hope to see you in the course. Take care!

- Janosch

Meet Your Teacher

Teacher Profile Image

Janosch Herrmann

Tools for digital business

Teacher

Hey, I'm Janosch,  a computer science student  & tech enthusiast based in Berlin, Germany. I help individuals & small business to organize & automate their work using modern tech tools!

Check out my classes below :)

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: If you want to learn how you can create your own beautiful website using WordPress and the elemental page builder, then this is exactly the right place for you because I've put together an extensive course on these two tools that teaches you everything that you need to know, going from a complete beginner to an advanced user and building your own custom WordPress website. I spent weeks preparing its resource so that you have a step-by-step guide that actually walks you through all the steps necessary to go from 0 to 4 website. And the best thing is that the complete course was designed with beginners in mind. So there's absolutely no coding required. And I make sure to explain all of the technical concepts that are necessary for using WordPress and elemental in great detail so that everybody can understand them. In the course, we cover pretty much everything that you need to know about elemental and WordPress, which is how you can register your domain name, how you can set up your hosting account, how you can design your first page, and also other saying things like how you can make your website responsive using Elementor, theme builder, credit pop-ups, creating a landing page, and all the other things that you might want to do when you create your own website throughout the course, we'll actually build a website or self, which will also be available as a free download in the course. So you can actually use what we're building and what I'll fill in your own website design later as well. Let's build your first website with WordPress, an element or see you there. 2. Website basics: In this course, I want to show you all the things that you need to know in order to build beautiful websites using WordPress and the element of page builder, My name is Janusz and I've been creating websites with these tools for years now. I always thought that the tutorials that are out there on these topics always lack a certain bit of detail and sometimes they go over important and really interesting things. And sometimes they are just way too long and don't get to the point. So I want you to create this tutorial to actually put all of my knowledge of elemental into, into 11 course and really help you to go from a complete beginner to someone who can confidently design his or her websites in elemental and WordPress. That's why we'll cover all the important topics concerning WordPress and elemental in this course. Going from registering your domain name over setting up your hosting, building your first pages and dabbling with Elementor all the way up to designing a full website, designing landing pages, having forums, having pop-ups, maybe even integrating your e-mail lists later, building your blog and all those things that are important. Throughout the course, I'll be referencing a lot of materials that might be helpful. In addition to this course, there will always be linked in the description down below. We'll also have the designs that we create in this course, the available as templates, which can also download by clicking in the description down below. If you have any questions concerning something that we're doing in this tutorial, please let me know in the comments. I'll make sure to answer all of the comments to the best of my ability so I can yeah, I hope I can answer all of them. I don't know how many Cummings I'm going to get, but I'm going to try my best trans every single one of them and to help you out in building your website. All right, So first I want to cover some of the most basic concepts of websites and how websites work. So for those of you who know what hosting is and what domain name is, you can skip to a later part. But for those who don't, let me quickly explain to you how these different concepts work to better understand how it works and why you would even need a domain name. Your domain name is like your address on the internet. It's something in the base.com is also a domain name. It's something you need in order for other people to actually find your content online. You need some kind of names and kind of address. So that's why you need a domain name. Now there's different hosting providers for that. And I'll show you the one I like most later on. But let's first cover number concepts, which is web hosting, because for your website to be seen or for your website should be on the internet. That needs to be some kind of server that actually hosts your website. You'd like. Images, the videos, the documents, the texts that you want your website to contain that is on all the time, and that gives this back to any computer that wants to access it. The housing provider you choose is essential to your website success because bad hosting providers result in slow loading times on your website, They might result in downtime, meaning your website might not be accessible sometimes, and other problems that can be caused by bad hosting. So I also recommend you, the host that I've been trusting and using for several years now. And that I think is really well suited for beginners, especially if you already feel overwhelmed by some of these technical terms. Don't, don't worry. It's really not that hard. I'll show you step-by-step how you can do. You can set up your hosting, how you can register your domain name. It's really simple, and I'm sure that all of you can do it. So yeah, there's nothing to worry about here. The last technical kind of layer that we have is WordPress and the element of page below which are the tools that we're using. And you can think of workplace like the underlying framework or the system that helps to website run. So you don't have to do any of the technical stuff. It's a CMS, so a content management system, which means it takes all of the technical difficulties away from you and helps you to create things on the web without having to deal with like server stuff and so on. So it's what makes it possible in the first place to create websites that easily. And then lastly, on top of that we have Elemental, which is the last thing that we want to talk about. Elemental makes it possible to have an additional layer on top of WordPress that makes the drag-and-drop building experience possible. So it allows you to design websites by simply dragging elements around, which would have previously been done by actually writing code. But now you can really do it only by moving blocks around and adjusting the settings. There's actually a great analogy that I really like, which is the analogy of the human body. And I think if this describes how these things play together really well, so think of the thick of WordPress as like the skeleton and the organs of your body, right? What do they do? Well, they provide basic functionality to you. They help you to live pretty much. And you might not know exactly what they're doing and how they're doing it. But it's a great basis for you to live off of and you don't need to interfere with it. You can just leave it be and it does things itself without needing your help. And then elemental might be your clothes in your skin. Things that are visible to the outside. And this is customizable. So like in the case of your clothes, customizable using, using Elementor. And it can also how you look to the outside or in the case of your website, how your website, or look on the outside, while the core WordPress is still the same. 3. Registering your domain name: Planning a good domain to use is sometimes harder than you think. Usually you will want to go with something that resembles your name of your business or your personal name. But sometimes that can be hard to find. And that's why there's some nice tools out there that didn't actually help you in finding a good domain name. One of them is called namely x, which is a business name generator. So this is obviously something you would use if you didn't already have a name for your business or your product, then this could be nice to generate a name which you can then also use for your domain name. Let me show you how this works right now. So we're on the website of hover, which is the company that we wanted to register our domain with. And we can actually just type in a domain name here to see if it's still available. So what I want you register is learned with IANA.com. And then I just click on the search symbol. And as you see, the domain is still available. And I can actually purchase it and register it to my name. Now, we're actually going to register our domain now. So what we'll do is we search for it already. So we'll just click on Add to cart. And once that's done, I'll just go to the checkout. Now as you see, we have what we wanted right here, the domain registration for one year, which costs $13 right now. And one thing that's great with hover is that you actually get a who is privacy for free. So usually you would have to use your personal details, would have to come up on a so-called who is registry, but you have the option to keep that private with hover. So it's a nice little add on. Yeah, that helps you out. And now we'll just go to the checkout. Alright, so I'll just enter in my personal information to create my account, which is really important because we need to access this array to obviously. So just fill out your information here and then go to the next step. Next, you will have to accept the terms of service of hover. Just look at them and then if you are finished, just click on this button. You don't need to check that one, so we'll leave that checked off and then you can continue. Now, hover needs to know the registration information. Again, just fill it out. Your organization address, country, and so on. And lastly, you will have to enter in your billing information. And then we're good to go now asked to look over your whole order again. And if that's correct, then you can go on and continue to purchase your domain and submit your order. Now we're going to receive the order confirmation and a welcome mail for hover, which if you click on, you can navigate to your account and find into that, which is what we'll do later on in order to connect our domain name with our actual hosting provider. 4. Set up your webhosting: The next step is to take care of hosting far website. For this, I love to use SiteGround as a hosting provider. It's a company that I've been using for years now. And it's also one of the most popular web hosting companies in the world. It's one of the three only companies that are actually being recommended by word trust themselves. And they are constantly mentioned in Facebook groups and blog articles. One of the best hosting providers for WordPress websites, they offer outstanding support, which is really great if you are a beginner that might sometimes run into trouble with hosting and with your website. They help you out with pretty much anything, even if it's not even in their scope of the things that they do, even if you have problems with your website yourself. They might help you out. And they always were usually friendly and you can always reach them. So it's great. Using cyclone, I've been using platform hosting for, I'd say like four or five years now, I host most of them are websites there and I love it. If you look at the cyclin website, you see the different pricing plans that they have available. There's the startup plan, the plan, and the Gopi plan. Now, we usually add recommend you just to take the startup plan. It's the cheapest plan and also it's more than enough for beginners because it adds a special prize the first time you purchase, and then it renews, add a little bit higher price. But still it's, it's really worth it. I'd rather pay a couple of dollars more on hosting, then have the hassle of dealing with bad customer support, downtimes and bad performance. So I really recommend you to choose the startup plan. If you are planning to host multiple websites in one account, then maybe the grow big account would be a good option as well. Because this allows you to host more than one website. So then it's like a better deal for your money. But in most cases, go with the startup plan. All right, well, click on Get plan. And now we are asked if we want to register a new domain or if you already have a domain and we obviously want to use a domain we already registered. And the reason why we are separating the hosting from domain is because it gives us more flexibility. So, and it makes it easier to switch hosting if we ever wanted to, because we're not bound to use 11 platform and 11 company. And we're bit, bit more free when it comes to this. All right, so now let's enter our domain. As I said, we have registered the learned with Janusz.com domain. And we'll click Proceed. And now it recognizes this domain and we can fill in our information in order to purchase are posting. All right. So once you've entered in your information. You will have a couple of options to choose from, and this is important. So I want to walk you through this. So the first thing is the plan you want to choose. We obviously talked about that already, but now comes the important parts. First of all, the datacenter, you can actually change the datacenter you want to choose. And I wouldn't recommend using a data center that's closest to your audience. So if you are in America and you want to, you want your visitors to mainly be from the US as well, then you would probably choose something like Iowa. As I'm from Germany, I will choose Germany, Frankfurt, because this is the closest to my location. So it makes the most sense for me. Almost thing that's actually really important is this deal periods. So period is really important right here because as I've talked about already, you get a special discount on the first purchase. So if you want, you can actually like purchased hosting in advance for the next three years, but choosing 36 months and then you will get a discounted price for a much longer time. So keep that in mind. If you are planning on using this website for a really long time, then this might be interesting to you. Otherwise, just choose the normal deal which is the 12 months, and you're good to go the side scan or something you don't need, so just ignore that. Yeah. Then you have your total you have to agree to the terms of service. So click on that and then you can just click on the Pay Now option. All right, well that's sun. You will receive the email from sat down again. So you can just click on that and you'll see some of the information. This is the page for the login to your customer area. You can also obviously login through the site crawled website. That doesn't really matter. We'll just click on that and login to our account and then we'll continue to set up our website. So we'll just enter in our email address right here. And now I'll enter in my password and login to my user account. Now in order to install WordPress on our website, we'll go to websites. And then on our website that we just purchased will go to complete. Here we can actually click on Start a new website to install a new application. So we'll select that. And we want to install WordPress on our website. Now we need to add the login details again for our WordPress website. So this is also really important. You got to keep all those logins safe because they all give you access or give people access to critical infrastructure of your website. So just choose a e-mail address and a password and then click on Continue. Now again, you don't need the side scanner add on, so just click on Finish. And then it will take a bit of time for SiteGround to actually install WordPress on your website. Now we only need to connect the website or the hosting account to your domain. And we do this by appointing the name servers to your hosting account. So for this you need to login to your account and your SiteGround account. And then in your site current account will go again to websites. And then we'll click on Site Tools for this website. Now here on this page, you see the name servers and we need to copy those over to our other account to connect the two. So now we'll go to hover. And actually here on the name servers. So this is when I'm already logged in, just so that you aren't confused. And then under name servers will actually edit those and we'll put in the SiteGround domain servers, denser or sorry. So choose the first one and also choose the second one. And then click on Save name servers. Now for these changes to be reflected in your website, it might take up to 48 hours, but usually it's done in less than an hour. So just check back in a bit of time to see if you can actually go to your website. If you can navigate to your website by adding your domain to the top bar here or so. Like in my case, it will be learn with SHE.com. And you see all for me already there's the WordPress default interface. So check that out and see if it works for your domain already. One more thing you might need to do actually, is to verify your domain in your hover account, you will get an e-mail for that. So don't worry, just click on the e-mail link and your domain should be verified. But that's it pretty much for setting up your domain and your hosting account. And then the next videos, we'll go over some, some other technical parts and then we'll continue on to build our website. 5. Install an SSL certificate: Now we want to install an SSL certificate on your website. This is really important because what it does is it encrypts the traffic on your website and makes it secure. So if someone sends a form through your website to you or if you have an e-commerce store, this is really important because this way traffic can actually be safe and otherwise you might actually break the law in your country. Really depends on where you live. But in Europe, for example, if you use a contact form or it happened e-commerce store, you are actually really required to use an SSL certificate. Using this in, in WordPress is really easy, especially using SiteGround. So I'll quickly show you how it works. So in our SiteGround account will again go to websites. And then here we actually want to go to Site tools again. Now, just so that, you know, this is really where you can manage most of the things that are related to your WordPress hosting account. There are several things in here, and I will show you some of them in this video as well. But let's first of all check out the SSL certificate. So we'll go to security and we'll go to SSL manager. And here we can actually select the domain that we want to install the SSL certificate on. And we'll just choose the normal learn with Janos.com domain. And then we want to click on this. Let's encrypts SSL certificate. Now this is completely free. It's included in your hosting account. And so we can just click on Get and then this will be installed automatically. All right, Perfect, Now this is done and one thing we want to do is go to https and force and make sure to turn this on. So this pretty much enforces that the SSL certificate is being used and that your traffic on your website is secure. Which is really important. So yeah, just turn it on. And now we're done. Now there are a couple of additional things that you can manage in this site ground hosting backend. And I just want to give you a really quick overview so that you know what you might be able to do with this. So one thing that's pretty interesting is that this also has some statistics. So you'll see like the visitors to your website, the audience sources and so on. So well, it will have a bit of analysis and a bit of statistics built into it. This might be something that's interesting to you. For example, if you don't want to use Google Analytics, for example, you can also take a look at your backups, for example. So usually your backups will be will appear, appear saccharin automatically takes backups of your website. So should anything go wrong, you can just go in here and access them to re-install an older version of your website that doesn't have any arrows or so on. And there's additional things like email, which is really, really nice because this allows you to actually get an email with your domain names or professional email like, like the one I was using. So Yammer, add yellows, workspace.com. We'll create one of those for you as well in a later part. But just so you know that they're there, that you can like set up auto responders and so on. All this nice stuff in here. If you want to get into the technical parts of your website, you don't need this, but it's there for you. If you want to access it. 6. Create a professional email address: Creating a professional e-mail using your freshly bought domain is actually really easy. And I'll show you how you can do this right now. We'll also set up an alias in Gmail so you can actually send your emails for that email address right from the inbox of a different e-mail account so that we don't need to check different inboxes all the time. You can also obviously use something like Google workspace for your domain. But I'll show you the easier way right now. Using your workspace. Just set nothing to do with what we're trying to do in this course. But I want you to be able to set up your own professional e-mail addresses. So I'll show you how to do this right now, we're in the site brand hosting back-end again, and we will navigate to the website again, just as we did in the previous section. We'll go to Site Tools. And here we'll go down to the emails and account. Now we can just create a new email account name for this domain. So I am going to choose, I'll just say info at learning with ganache.com will be my new account name and then I have to choose a password for that as well. Once you've entered in a strong password, you can just click on Create. And now your new email account has been created. One thing that's actually really nice to know is that you can change your coda. So you can change how much space you have for your emails like this, just drag it up. There's always the counts two words, your entire space for your website as well. But if you want to have some space more for your email address, which is fine, just click on Confirm, and then you have changed your quota. Alright, so now we're going to be setting up the alias in Gmail. This obviously works for other e-mail clients as well, but I'm just going to show it to you for the Gmail e-mail client because that's the one that's most often used. And yeah, so let's go right now and I'll show you how this works in your Gmail account you watch and navigate to your settings. So click on the Settings up here, and then click on accounts, and then click on check email from other accounts. So you want to add in additional e-mail account here. Now, this window will pop up and this is where we can then enter a known information to add this new e-mail address. So first of all, we need to add in the email that we just created. Next, we need to add some additional technical details and we'll get these from our SiteGround account. So we'll just go to the SiteGround account again. And maybe we'll actually even pop this up as a second window in here. And as you see, we have some of the e-mail configuration information in here. So first of all, the username will be again, the e-mail address. So info add learned with yellow.com. The password will be the password that you set for your email account. And then the POP server will be the one that's specified in here. So just use that one. Learn with yellowish.com or in your case, this would be your domain name. So we'll just change it up, delete the male part, and then we'll choose the port as well. So this will be port 995 groups. And I recommend you check the first three boxes in here. And then click on Add Account. Now, your account has already been successfully added to Gmail. But we also want to send e-mails from this email address. So we need to add some additional steps in order to do that. So we'll click on Next. And then we can enter in the name that will be displayed as the coming from them. So this will be the name that people will see when you send an e-mail address, just choose your personal name or maybe the name of your brand, depending on what name you want live. This tree doesn't alias checked, and then we'll go to the next step. All right, so now we need to enter in additional information. Again, we need to enter in the SMTP server username and password. Now the SMTP server is the same as earlier, so we'll just copy this learned with the IRS.com and I'm going to pop this backup and paste it in here. The username will again be the e-mail address. So infrared learned with yellow sheets.com. And then the password is your e-mail password. Again. Keep this as using TLS, it's recommended and it's also best and 0. Lastly, we need to change the port number two for 65. Now, you can click on Add Account and you will get a verification email to your email address, which helps to confirm that this is actually your email address. And to check that you can go in to your site current account again and click on this email address on this little menu in here, and then clicking onto a login to a web mail. Now, your webmail within SiteGround will open and then you will see this verification mail. Once you've done that, you can enter in the verification code here or just click on the link in the email address. And then you'll be able to send and receive emails from that email address, right in your Gmail inbox. Something that you need to remember with this method is that the emails won't always appear right away in your inbox. So sometimes you have to go into your Settings again. And then under accounts you can actually like click the check male Now button and then it will check for emails and they will appear in your inbox. So don't be frustrated. If the males don't appear right away, then it's usually because the males just haven't been checked during a specific time-frame where they were sent. And also something that you have to remember is when you're writing emails, you can then actually choose which e-mail you want to use. So you have to keep that in mind when sending emails from a specific e-mail address that you can choose between them that you remember to do so so that you don't get confused or the person you're talking to isn't getting confused with your emails. 7. Get to know the WordPress dashboard: Before we can start working on the design and layout of your website, we have to adjust some of these settings in the WordPress dashboard. This can be accessed by going to your actual website. So learn with yellowish.com and then typing in double slash WP and dash admin. And now you will get to this login field, which allows you to login to your WordPress, backend using the credentials that you created earlier. So I'm going to do this right now and then I'll go back, I'll come back to you. All right, so now we're in the backend of your actual WordPress website. This is what you will be using when you are making changes to your website or later on when we're using elemental to design the pages. Well, first of all, what we'll do is we'll go to Plugins and we'll actually just delete both these plugins that have been installed by siteground automatically because we don't meet them right now. Now we'll go through some of the settings that we'll need to adjust in order for the website to work properly, will go to General first. And we can change the site title and the tagline, which is what will be displayed by default up here and also on other places. So I'll just type in learn with emotion here. And then I'll say as a tagline, learn keeps turned to use WordPress and Elementor. And one more thing we'll do here is we're actually put an S to this admin URLs. This is, has got something to do with the HTTPS that we activated earlier. And we need to do this in order for HTTPS and the SSL certificate to work properly. Now you can also obviously go through some of the additional settings like changing language, date format, Time Format, and so on. If you want to, we don't need that right now, so we'll leave that alone and we'll just click Save Changes. Now, you will have been logged out of your WordPress account. And this is because we changed the URL structure. So nothing to worry about there. We'll just re-enter our login information once again. And then we're good to go and we've now changed the URL structure. All right, so now we're back and now we'll go through some of the additional settings. So we'll go to reading actually. And something you will have to check in here is search engine visibility. So this is really important. Usually this isn't checked, but sometimes it might be. And then your website board be able to be indexed by Google and so on. So you might wonder why you upset isn't found. And this could be the issue. So make sure that this option isn't checked. Also something we'll do later. We'll actually create a static homepage. So we'll create a actual homepage that will design using Elementor. But we don't need to do that right now. Lastly, we'll check out the permalink structure. This is important because you want your posts. If you are planning on writing blog posts in WordPress, you want them to use this post name URL structure because all the others aren't, just aren't that good for SEO as well. And it's really, really bad to change the structure later on. So make sure to choose the post name structure and go with that and don't change that ever again. Um, because it can really mess up your SEO if that's something that you are planning to do a lot addressed so that you have a general understanding of the workers interface. I want to show you some of the things that you can do here. So if you click on this little button up here with the little home icon, we can actually navigate to our front end of a website. So this is where we actually see how the website looks like. You see, now we have this little bar up here, and this is only because we're logged into our WordPress account. None of your visitors will actually see this is just for us so that we can manage the page and we can go back into our backend to adjust some settings and so on sidebar right here, you have all of the different options that are important for you, for you to use. So we have the option to create posts, which we'll cover later. You have a media library which just help us all of the images and files and so on that have been uploaded to your website. So you can organize them and take a look at them. Then we have a Paige's sections. So this is what will create the actual sub pages of our website. If you want to allow comments, you have a common section as well. Will not use that, but just know that it's there. Then we have some other options like the appearance where we can manage like the menus or checkout the themes. And so on. We'll be going over all of these concepts and all of these different features of workers in much more detail in the coming, coming parts of this course. So don't worry if you don't get everything from the start because it's a learning process. You can't just automatically know where everything is. This might be overwhelming if you're just starting out, but I'm sure that your managed to figure things out and I'll obviously go into detail on all of these different topics and show you all the features that you need to know. So you can always go back to the sections of the course. If you feel unsure about something. 8. WordPress basics: Themes & plugins: Themes and plug-ins and WordPress are two really key concepts that you need to understand and they are a crucial factor to how WordPress actually works. Themes are like the basis of your website and previous to the page builders like Elementor, this is what he used. Design your website. So you had a theme, and the theme had certain options for choosing different colors and different, you could have different themes with different layouts. And then you would actually just fill in the theme with your content. But you wouldn't have that much freedom in how you organize your layout. And that's why then page bullets like elemental came along. And this is why today, the theme is actually, you couldn't say useless, but you don't really need to use the theme anymore. And the theme is actually more just like a technical requirement that you have to have on your WordPress website, but you don't do much with it. And that's why we want to have a theme that's pretty lightweight and it actually doesn't have a negative impact on our loading time or it doesn't introduce any technical problems with Elemental, for example. And that's why I recommend using the Astra Theme, which is a free theme that is available in the WordPress theme library pretty much. And it just works great. It works perfectly well with other mental. It's also really lightweight, so it's pretty much the perfect theme for our purposes. So let me show you how you can install it. To do that, we'll just go to appearance and then we'll go to themes. And now you see we already have some default themes in from workers, but we want to use a new theme and we'll search for themes. We'll just search for Astra. And there it is. That's the one we want to install that. And now after we've installed, it will just click on Activate. And now we can remove these notices. It is actually a best practice to remove the additional themes that are not needed. So we'll do that right now because it just takes up space and it might introduce vulnerabilities for hacks. So it's best to just have the theme installed that you actually to use. The next core concept is the concept of plug-ins. And plug-ins are pretty much as the name already suggests, pieces of software that you plug into your website to add additional functionality. So for example, you could have a plugin like WooCommerce, which allows you to create an e-commerce store based on WordPress. Or you could have a plugin like updraft plus, which allows you to backup your WordPress website to storage locations like a Google Drive or OneDrive and other other plug-ins as well. For example, for for SEO, there's lots of plugins and also elemental is a plug-in as well. So these are just additional pieces of software that you can install on your WordPress website. Some of them are free, some of them are paid to enhance the functionality of your website. In this course, we'll only be working with the elemental plugins, but I will definitely be publishing additional content around other login state you will need or that you might need for your website. 9. Install Elementor & Elementor PRO: Now we're going to actually install WordPress on the website because this is the most important plugin to us and we're going to use this throughout the rest of this course. So to do that, we'll go to Plugins and we'll go to Add New. And then we can search for elemental and click enter and they all texts time. We can click on Install. Now, once it's finished, then we can click on Activate. Now that we've got the elemental free plugin installed, we also wanted to install them into pro version, which you have to purchase. You can also just try to use the normal version without the paid plan. But throughout this course we will be using many of the features that the Pro Plan offers. And it's just that much better, that much easier to build a great websites using the amount of pro version. It includes lots of additional widgets as well as the theme will and I will be using in this course. And also there's additional templates that you get access to. You have the pop-up builder and much more so it really is worth it. I highly recommend you upgrade to the pro version. Now on the elemental pressing Page, different plans that you can choose from. Usually, you should be fine choosing the personal plan. If you are planning on only having one website. If you want to install WordPress, sorry, if you want to install elementor on different websites as well, then you might want to choose the plus or the expert plan. Just click on Buy Now and then you will be brought to the checkout. Just entering your personal information and your details and then your payment information, and then you will be good to go and you will also be able to then login to your Elementor account. All right, so when you're finished with the checkout process, you can login to your elemental dashboard. We have so many dashboards and the accounts in this tutorial, I'm sorry, but it's obviously necessary. And you can go to subscriptions. And here you can actually download Elementor Pro as a zip file. So I'll just do that right now. And I'll just save it to downloads. We can go back to our website and we can go to plug-ins again, and then click on Add new. And now we can choose Upload plugin, choose a file. And we go, I'll go to my Downloads folder and install the Jews, the zip file, and then click Install now. Alright, so now it has been installed successfully. We just need to activate it. And now we need to connect to our actual license so that the mental knows that we actually have a license for it. So just click on that button. And now as I'm already logged into the Elementor account, it will automatically recognize that I'm logged in and will tell me that this is my account. And now we can turn it off and then click Activate to connect the license to this website. All right, and now you see the license is active and we have connected element approach to our website, which means that we can now start working on our website design. 10. Create your first page with Elementor: All right, so after all this preparation, we are now ready to start building our website with elemental. And that's why now I want to show you the Elementor page builder and we'll take a look at some of its basic features, how it works so that you get a general sense of how you will be working with elemental. We're locked into our website right here, so I'm in the back-end of my dashboard. And now we'll go to pages. And you see what pros already generated. These pages automatically will create a new page. And then we'll call this our homepage. This will be at the first page that we, that we actually use. Okay, so we'll just enter in a title right here. And then we'll click on Publish. Click again. And we can hide this. And now this page, as you see down here, has been published to our website. So if you go back and refresh the page, you'll see it appears right here. All right, now we'll click on Edit again. What we want to do right now is we're going to edit our page with Elementor. That's why we want to click up here on this button. And now it will load and it will take us into the Elementor page builder. This is pretty much how it looks like. This is the setting that you will be getting familiar with and where you will probably be spending most of your time when you're creating websites with elementor. Alright, so now let me explain a bit about the interface of element or on the left side, right here. This is the elemental sidebar, which is pretty much where all of the element of features actually sit. And then here on the right is the canvas. And this is pretty much what your page will look like to other visitors. So you can directly see how it will look like while you're working on it. And this is one of the big advantages of these. What you see is what you get editors like elemental, because you are directly get feedback and visual feedback, how things change on your website. Basically, you can create the so-called sections if we click on this button, so it says add new section. If I click on this, I get this pop-up menu to create different styles of section. Usually I'll just create the blank section right here, but you can obviously also choose others. This will be split into two columns. This will be split into three columns and so on. If we add this to the page, you see this yeah, little section appears up here. And you see this little box in the middle, which is where we can drag him content later. So this is where we could add elements like a text or an image to the screen. Basically, you first have these different sections. Then inside of the sections, you have different columns. And then in these columns you can have intersections or you could even have just the basic, basic content. And I'll show you how this works right now. So if we click on this little button up here again, we'll get taken back to the different, the different styles, different widgets that we have available to us. So we could just drag a text into this little section. And yes, you see if I hover over the space, this little blue line appears indicating that I could drag is content into this space. So if I let go of my mouse key, then we see the text gets dropped into this little box in the website Canvas, indicating that it will appear in this place on the website as well. Now we can also move them around as well. So we could say create another section. And let's say we want to add a button to this, and maybe we might want to add texts in the middle, so we're adding the text editor on top. You see I can drag it below the button or I could drag it above the button. And now you see we have these two different sections. But maybe now I want the button to be in the top section so I can just drag it up there and drag it in and drop it into this top section without any problems. You can also create layouts with several columns as we saw earlier as well. And it's really easy if you just, if you have a section already, for example, and click on this Edit Column button or the like, right-click on it. You see this duplicate button which will allow it to be duplicated. And if we click on that, then we see this column gets duplicated within that section. And now we have two of these columns next to each other. I could like remove this from here. Thus they delete. And maybe I want the text to be next to an image. For example. I don't have an image right now, but you see this then would appear next to but text. Now you might be wondering how do I actually edit how the different elements look. And that's pretty easy because the way you can edit these elements is the same for pretty much all of them. They might have some different features, but basically, there's always the same layout. For example, if we click on the button, you see we have this. If I hover over the place work the button actually is, we get this blue box again. And then I can click on this little edit button, button in the corner. And if I click on Add, you see the side menu here changes to the editing options. So now instead of like general options, I see just the editing options for that button. Usually you will have these three different tabs. So we'll have the content tab, the style tab, and the Advanced tab. The Content tab is where you can add or change the content of the element that you're working on. So for example, in this case, I could change the text of the button so I could say, instead of click here, I could say Pi. Now, if I wanted to do that, and I could also add an a link. So if someone clicks a button and I wanted to go to a certain place, then I can add that link in here. You also have the option to change the alignment of the button. So right now it's aligned to the left. I could also say align it to the center, so it will be centered on the page. I could say align it to the right, or I could even say justify it. So it would take up the full width like this. And I think you get the general idea of this content tab. So let's move on to styles. This is actually where you change the actual style of the content. So for example. Styling would be the color or it would be the font style. You could go into typography right here, for example. And then click on this button and we'll say more, choose a different font. So maybe we want to use Georgia as a font and you see it changes the font cell right here as well. We could also go in and say we wanted to change the text color, which might look a bit weird, but you see it turns green now. And all these things, you can also change the border radius, which is kind of how round the corners are. So if I bump that up a bit, you see, To close this for a minute, how it is now rounded instead of like this edgy button. These are all kinds of things that you could add it using the styles have, okay, I'll click on it again, right? And lastly we have the Advanced tab, which covers a bit more of the technical features. What we'll be using a lot will be a margin and padding, because these are just extremely important concepts and extremely important tools to space out your content in a good way and to make it look good on mobile devices as well. So we'll be using that a lot. But there's also other options that aren't as relevant for you right now, like adding your own CSS classes and so on. Something that you don't need if you, if you want to use what to use elemental, I actually often don't use them as well. So you don't need to have knowledge of all these advanced features. Sometimes they can be helpful, but for most of the time, they, they aren't necessary to use. What's important about the interface is every time you do something on your page, you add a new block of content. You change some of the styling or so on. Each of these times, I want you to click on this Update button because this is what actually saves your styles to the website. This will then reflect in how you upset looks. If you don't save it, then your website will not change. All your progress will be lost. So keep that in mind. One more thing is that little bar down here, which is, yeah, has some additional tools from Elemental, which will also be using later. So for example, we have this preview button which will just create a new preview of our site. So this will be how the set actually looks of. Obviously it looks terrible right now because I just demonstrated some stuff with these blocks, will turn this into a nice homepage later. And yeah, this is just a little, little preview. We also have the responsive mode. This will become really important later as well, because it allows you to preview your page in these different and sizes so you can optimize them for the mobile views. And things like history are also there. So your history or your changes. You can go back to previous versions of your website. If you change something about it and then you realize that you don't like it, then you can easily go back. And lastly, we'll have something like the Navigator as well. Something will look into later and the settings which also will come in later. All right, so now let's actually save this page and then we will go on to actually turning this into a homepage That's actually nice look at, doesn't look as weird as it looks right now. What I might be doing as well is you see you have this header bar and there's Footer Bar. These are right now generated by the theme that we have, but we will actually change this to be generated by elemental and we'll design our own footer and header. So what I will do right now is if I go into settings to page layout, I'll actually go to elementor canvas, which means that we won't be able to see the header and footer again. So we can just work on the page content for now because we'll talk about and we'll cover the header and footer later. All right, So update. And then we're going to go back to our WordPress dashboard. You can do this by just clicking on this button right here. So we'll just go to the dashboard and we'll click on this button to take us back to the dashboard, will go to settings, will go to writing, will go into reading actually. And now this is the optional I talked about earlier. So now we want this homepage or recreated to actually become our homepage. Because if you see, if we, right now, if you go to turn us up and go back to go back to our actual root homepage. You see the homepage what we wanted to be so on, directly on this URL isn't here. And this is because WordPress needs to know which page should actually be the homepage. And by default it will be just a random generated page. So we'll go in here and we'll click on aesthetic page, and then we'll go to homepage and we'll select our homepage, save changes. And now if we go back here and refresh, we see that this is actually the page that we created. It looks ugly, but we're going to turn it into something, something beautiful. 11. Create a homepage: Alright, let's get started on building out our beautiful lament, our homepage. We'll go back to the page and clicking on Pages button here. And then we'll click on adequately mental, just like we did previously. And now one thing we want to do before we start is we go to the site settings and we'll go to layout. And we'll actually change the content width to 1250. That's something I like to do because it gives me a bit more space and I usually work with a bit of padding on each side to make it fit even on smaller screens. So I don't get any problems because I'm choosing a bit of a bigger width. But I just think that 1250 years is much better than working with 1140. All right, so that should be it will just update. And now we can go back to the page or at, and we'll actually also delete the stuff we did earlier because it just looks terrible and we don't need it. The temperature will create now will also be available for download later. So I'll show you how to do this in later parts of the course. But now we have to design it first. And to do that, we want to start off by creating our homepage. It will have a couple of different sections. And we'll start off by having like a hero section. So we'll click on this structure right here. And what we want to do is we wanted to have a heading. We also wanted to have a bit of text, and we also wanted to have foods, a bit of a button like this. Now, what we want to do is we also want to actually want to maybe make it like this and we want this background of this box to be an image. And I'll show you how you can import images into, into corpus. So we'll just click on Select file right here. And now I'll go to wherever I actually don't download it. These images, you you don't need to use the same images as I did. I just took a couple of unsplash and some of the lowest are from my friends. So you can just you can just use any pictures that you want that you have the rights to use. But I'll just the ones that I'll be using right now. All right, so now that the images are imported or just click on the image that we want to use. And then we'll click on Insert media. And now we see that it has turned into the background of this little section that we have right here. So it looks a bit weird right now. And in order to change that, we need to work on the padding and the margin. And this is something that is really crucial to know about, about working with general. It's a concept from CSS and it pretty much determines how much spacing you have around your elements. And I want you to quickly demonstrate how it works. So let's. This column as an example, and we're going to advance. And now we can change the margin and the padding. And let's say we want this margin to be in present. You always want to use percentage if possible, because this is better for, for responsive websites. So if the screen size changes and you have fixed width elements in your page, then things might get too big for full screen size and that might just look weird. So you're going to use relative sizes because then the size actually changes based on how big the screen is. The sentences always in relation to how many pixels, width and height you have. So just so that you know that. And what we now want to do is I'll just add a bit of padding and margin. So we'll add margin like three for example. And let's add a bit of padding as well, like five. And now you see how the dimensions have changed. And you also kind of see what the margin and what the padding is. So on the outside we have the margin which is pretty much the spacing outside of the box that you're, you're targeting the in relation to the other boxes or other content. So in this case, in relation to this parent container, which is this, this section, and the padding is actually what's inside of the box. So the padding inside it, this is the space around here. And one way to actually see this in action is by going on preview changes. And now we can just go to Inspect. And now if we go on this box and we go to compute it and 36 technical, but it is just for demonstration purposes. It's actually see these different elements right here. So we have our core element. This is the box that we actually want to work with. The box where we added the changes. Then we have the added padding around it. So this is inside of the bigger box that we have. So it still has the image. But there's whitespace or there's empty space around it. And this is the padding we added, you see on the screen as the green bar. But then we have the border which is just the line around the entire element. We haven't changed that right now, so we don't see anything here. But then outside of that, of that box, out of that border, we actually have the margin that we talked about. This might be a bit, a bit weird and a bit hard to understand in the beginning, but it really is just trial and error and just working on it a bit. And the more websites or the more kind of sections you add to your website, the better you will get with this. And we'll also continually work on this in this course. So I am sure that you will have a great understanding of these two concepts later in the course. Alright, now we want to go back. We'll just close this and we'll continue working on our homepage. I'll actually remove the margin because we don't need that right now. We actually want to You only have a padding. Next, we want to change the alignment of these items and we also want to make the contrast of it better because right now it just doesn't look too great because you can barely see the text and the heading. So first, we'll actually go in and do the backward or sorry, we have to go on the column. And we'll go into style, will go to. Background overlay. Choose a classic background type. So this is just what will be overlaid over this entire section. Will you see how it works right now? So we'll just click on the color picker. And here you have the choice to just choose any color that you want to use for this overlay. Now obviously, you have to be careful because if you just choose a really hard, hard color, then it won't be a very visible as well. So we want to choose something, maybe a bit bluish, though. We'll go here and we'll look if we find something that looks, looks good. I'll just choose something like this. Gas should be fine. We'll change the other styles as well, so we don't have to worry about that right now. So for this heading will go in and change the color as well. We'll click on this color picker again and throw it into a white. And also we might want to change the typography. So we'll just go to Roboto. This is a very popular font and we'll make it a bit heavier, so we'll add a bit of font-weight to it. And lastly, we might want to put this into the center and yeah, make it a bit bigger as well. It's quite small for a heading. Something like this. Yeah, this should be fine. All right, Next, we'll do something similar for the textile, so we'll align the US as well to the center. We'll change the text color. Choose like some light, light gray, for example. We can even turn the background a bit darker as well, I just realized, because actually look better like this. And you will usually elicit, usually want to go be like when you actually work on these kinds of these kinds of websites. It will be just like a bit of trying out and seeing what works well, what doesn't look too great and so on. But it's, it gets better and it gets easier the more often you actually use. So I hope this is helpful. Yeah, Well actually it can go to, the column, will go to background overlay. And we might just turn this a bit darker like this. This is the opacity. So it's kind of like how it pretty much determines how much of the background we can still see. And the higher I crank this value up, the less of the background is actually visible. So yeah, we'll do something like this because now the texts actually visible. And one last thing actually we might want to make this a bit bigger as well and change it to Roboto. So we'll say Roboto and wall apply a bit of size to make it like 18. Yeah, looks better. All right. Now, I want this not to stretch from side-to-side. So I wanted to be bit more centered because there's just looks better. So what I'm going to do is I'm actually going to apply a padding here as well. And now you see how this works in this case. So what I've done is I've, I've de-linked the different values. So i now I can change like each of these values individually. And what I'm going to do is I'm going to apply a bit of padding to the right, maybe like 10 percent and to the left as well. And maybe even like, Oh, yeah, I'll just go up to like 15. I think that That works well as well. And now you see we have the space on the left and right, and the text is a bit more centered and looks a bit better. All right, and lastly, we want to work on the button. The website that we want to build is going to be for a digital consultants type of online business. It's yeah, it's going to be a bit of generic, but just so that we have a general theme to build this website around. So I'll centralis as well, and I'll also I'll also change the text so I'll say check out my services will be the call to action. We will also change the typography clips. We haven't added global, global cells yet, so we'll just do it this way. Roboto and volume increase the size a bit like this. Maybe 16 will add a bit of weight. Oops, I'm maybe like 500. Yeah, it should be fine. And then for the background, we might want to do you want to use this light blue now? I think we will stick with a bit of a darker blue. Something like like this. Maybe. It doesn't really matter too much, but yeah, we'll just, we'll just choose this and use it for now. Because I think it looks fine. All right, now, I think we need to apply a bit more padding to this column because it still is a bit small. But we want to apply more padding to the top and the bottom. So what we'll do is we'll de-link these values again. And then we'll say for the bottom we'll have 10 percent and for the top as well. So just enter in 10 percent, and now it's a bit bigger and looks a bit nicer. So this might be our first heading section, and I've chosen to not make this full width. So you could easily make this full width as well by, by not adding the image to the section, but by adding it to the, sorry, not bad, but not adding it to the column instead of adding it to the section. But I think this looks just fine as well. Next, we want to add a client section which shows logos from our clients to show that we have some kind of credibility. This is something that you often see on websites and it's something that's really easy to do and eventual, for example, the nice thing is that there's actually a template for this as well. So elemental has some built-in templates as well can use to speed up your workflows. We'll check out one of them right now. So if we go to our template, you see we have these pages right here, but we also have blocks. In the blocks category. We can actually choose what kind of type of block we want to create. So in our case, we want to check out the client client sections. And as you see right here, we have all these different previews of sections that use this kind of client. Yeah, client layout. And we might just choose something like this. Yeah, we can click on it to see how it looks and this looks good. So we're going to click on Insert. And now this will be inserted into our page. As you see right here. We now have the client section, but we want this to be a bit different, so we actually don't need the text field here. So just click on this button and click on Delete. We'll also click on this text right here and also delete that. We wanted to be directly under this heading texts. So we want to change the padding. We'll go in here and receive it has a top padding of 100 and a bottom padding of a 100 as well. So we'll just delete that and see how it looks. It's already looking quite well. And now I'm actually going to change these out for logos that I actually have imported into workforce myself. So you can obviously choose any any logo that you have, any logo that you, that you are allowed to use. I'll just go in here and like this, I will choose a logo like here and inserted into the page. And I'll do this for the other logos as well. I've just added in a couple of, couple of logos. I like that I could use. All right, so I've only got four logos to use. I might just keep the last one just to keep it at five. Now we actually don't want it lowers to have any color. So we'll change this up by going to the style and then by going to CSS filters. And what you can do is you can turn down the saturation. Now in case of the already black logo, if this doesn't make any difference. But now if we actually copy the CSS style from here to this other property which we can do. So we have the saturation set to 0. We can click on this image and we'll click on Copy. So this copies the image. We'll click here on this Add Image button. And now we can click on paste style. And what this will do is it will actually paste in the style from a previous image into this image as well. So if I click on this, you see this turns black and white because the style has been applied to this element and now it'll also be applied over here. And we can do the same for these other elements right now. But first I want to actually change the size of bed because these just look a bit too big to me. So I might just go down to 33 percent. Maybe this might even be too much as well. So let's just say 25 percent. Yeah, it looks better. So I'll copy the style again and paste it in right here. You see it, the size changes to the same over here. Again, sizes changed and we can do the same here and here as well. And now we have our little logo section down at the bottom. Next to our heading section. Next we'll actually create a little kind of About Me section which will give some insight into the person that's running the website and what the website is about. For this, we'll create a new section again. And I'm intentionally choosing to create them from scratch right now, which is something that you probably won't do too much if you've been working with Elementor for a long time because you're just going to be using templates more often and you'll have your own templates. But I think in the beginning it's really great to try to build it up yourself from scratch so that you actually know what you're doing and you know how you can build these layouts yourself so that you don't have to rely on the template and that you understand the concepts behind Elementor bit more. All right, so what we do again is first of all, we'll add in a bit of padding. This is something that I apply f to the top sections as well because this is something I usually do all the time. So I'll apply a bit of padding on both sides to the entire section. We'll do the same just for, for these as well. Obviously this section would need it because there's so much space, but we'll do this as well right here and up here. Like just 3% on all sides. So it just works better on responsive devices or tablets and so on. And actually I want to change the heading right here as well, just so that we get a bit more of a actually a useful website and not just a website full of dummy text. So we'll just say something like creative digital marketing agency. So this will be the title of this website, or let's say credit digital marketing, freelancer, because we're talking about one person here. Now we can go on to create the About Me section of this page. So we'll just add the section and then we want to add two headings and a text editor. So we'll just add in these headings first, and then we'll add in a text editor as well. And what we can do now is we can just copy the style that we have credit up here. So we will save some time so we don't have to, um, yeah, just add all the other properties to the texts on here. We just paste the style in and now it appears like it disappeared, but it's just because the color here has turned to white as well. And if we turn it back to something but darker than you see, it reappears. All right, We also want to apply this to the other textile. And one of them will be our subheading and all of them will be the actual heading. And also for added, just add a bit of padding. So both to the left, a bit of padding and the right, and then at the top and bottom as well, to make it a bit more spaced out. So it just looks nicer to our visitors. Will also copy this text style. We might have to change the color. Yeah, looks a bit too light so you can barely read it. It's good on the, on the darker background up here, but on the white background. And we might want to use a bit of a, a stronger gray tone to make it more readable for users. So something like this should be fine. This is something that you should consider when you're building these websites. I'm a big fan of having really clean and easy to use interfaces on your websites and having good contrast and elements being visible easily is one aspect of that. So try to make your website I clean and don't use too many different colors on top of each other because it just looks weird most of the time. All right, So now we'll apply a style to this heading to make it look a bit better as a kind of subheading. So we'll apply actually the color that we used up here. We'll just use that. We want to keep things consistent in our websites. That's also something that is really important, which we'll get into in a bit because we're going to cover the design system capabilities of elemental as well. But for now, we'll just use the copy and paste feature. So we'll just copy that color into Excel. And then we want the bit of to make it a bit smaller. So it should be something like 25 maybe. And we'll change the text to say about me. Who might also want it to be bit more space down. I'll just take a quick look, but it looks fine. We can leave it like that. And then I'm just going to add a title. So we'll say I loved to help digital brands. This is going to be our branding. And then we could have some like kind of short introductory text down here that kind of introduces what we do, who we are and so on. So having this little about me section blow this will add a widget that makes it a bit more visually appealing. So we want to use a, another, another section and we're going to give it the same padding as well. So the left and right padding, if I'm thinking about it, maybe we would even need to make the padding of the top section a bit smaller because it just might look too far spaced out, but we'll see and first of all, we just add in the widget and we're going to choose the Media Library of a media carousel for it. So we'll choose this or drag it in. And we'll have these different items here. We only want to use three because I just prepared three. And now we can actually add in these images. So I have some prepared and you can just choose some, whatever you like. You can use your own oil. I'll link down some of the best stock photo and unlicensed photo sites on the web so you can take images from the as well. Okay, So first image is this one, then we'll choose this as well. And lastly, we'll have the one right here. And now we want to change the style of how it looks. So now it's a bit like edgy and doesn't really look too great. But what we can do is we can change this to skin. It appears this is something built into elemental in this case. And we want to choose this cover flow option. Now we want to change how these slides look. So what we're going to do is we'll change up the height. So we'll crank up the height to maybe like, yeah, foreign pixels. It should be fine for the width, will actually make it a bit bigger. So I will just say like 60 percent, think that should look fine. And then we're going to click on the additional options. Because we don't want this autoplay options that we don't want decided to actually move. We want it to be dragged manually so you can, oops. Once we go out of the element to editor, you can actually drag these around and like scroll through the different images. All right, You can leave these flights per view and the floods to scroll as the default option, that, that should be fine. So we don't need to change anything bad. Folder style will actually change the border radius. So we'll say something like eight, for example. Now you see all these images, how he's like rounded curves, which just looks nicer, my opinion. The padding. Yeah. We don't know. It just looks bad, so we'll just we'll just leave that out. And we don't need that right now. And that should already be fine for this kind of section. Again, as I said, we will want to make the bottom tanning here a bit less because it just looks a bit weird if it's too far spaced out will reduce this to 3%, and then we'll click Update. And now this actually already looks quite good. Maybe I want to make these images a bit bigger, but yeah, it should, should already look quite nice. So we want to make this into, let's say, 500 pixels. And maybe we want to crank up the width to 75 percent. Think that that should be fair. And yeah, that actually does look, I can't move it like this. This actually looks quite nice right now. So we can drag these around. We can look to these images. So it will be nice like faraway, someone coming to a website and then like seeing a couple of images of us or the work that we do, this could be a red section for that. All right, next we want to have kind of like a service section that will be combined with the one that we had with this kind of media carousel. So we want this, I want to add a three column layout because we're going to have three columns for all of these services. And this time we're also going to use in our sections as well, because intersessions allow you to have greater control over the placement of your widgets within your sections. Once you're using Elementor on your own, you're quite often run into this issue. So just remember that you can use intersections and that often makes it much easier to work. So we'll drag in an intersection into the first one. And now we're going to create our layout. So we have this intersection and we want this left column to be a bit smaller so we can change the width of that column was, let's say we wanted to be like 20 percent. And then this will automatically be resized to 80 percent. And now we will add in an icon on this side and then we'll have a bit of texts. And like the surface on this side. So we're going to choose an icon. You can just search up here for icon and then drag it into this field. And on the other side, we'll add in a heading and we want to add in a text editor. Now, obviously this is still unstyled. So again, for now let's just keep copy and pasting these styles. So this is a bit too big, but we have the basic styles down. We'll align it to the left actually. And we want to turn the size down tremendously. Something like yeah, maybe 18 is good. Yeah, good size. And then maybe for the for the typography we have 16. That should look fine. Maybe a bit. Select 20. Yeah, this, this looks good. Alright. Now, I want to change the spacing, the default spacing between these elements. And this can be done if you click on this column by going to the which space here. So this determines how far apart the individual elements within each of these columns are. As you are here. The top line of this blue box isn't like adjacent to the byline of this blue box. And the heart in the middle is what we can control with gap, with this widget space right here. So we're going to turn this to 0 maybe. But this might be a bit too little space. So maybe let's go with 10 and then we have a bit less space, but still some subspace to make it look, make it look rough. And right next we want to make some changes to the icon. So we're going to go click on the icon. And then here you see that we can click on this image. So this takes us to the icon library of Elemental, which is a built-in library of all kinds of icons that you can use in your website designs when you're using a mentor, which is great because otherwise you would have to go to different website, maybe even purchase a set of icons and then re-import that into your website. But with elemental, you have all these icons available to you right inside of your website. And we can even filter through them. So we can search through these icons. And we're going to search for a check mark. And I think we'll just be choosing this one. Now this looks good. We'll insert that. And now you see we have this little check, check mark symbol. Insert here. All right, we can also change the style of this element. So this works as well. We want to change the size of it, maybe make it a bit smaller. So like maybe 35 is a good size. Yeah, looks good. And then we want to change the primary color as well. So again, we'll choose the color from up here, or you start one, copy paste, just as we did earlier. Go back in here and then paste the style. And now we've got this little blue, blue icon here. And now we could do the same thing for these other columns as well. But instead of just like doing this all over again, what we can do is we can just duplicate this whole column. And then it will just be duplicated, obviously. And then we can just delete the other two because we don't need them anymore. And then we've got all of these three different columns with our, with our different sections. And this could be like a different services that we have. So maybe we want to do web design. We do search engine optimization. Looks like this. We do web hosting. You get the idea, you have this kind of be the surfaces. And also we could have additional services by duplicating these intersections like this. And now we have a, another of these boxes in here. We could have something like Facebook ads, for example. We could do the same over here as well. So have something like Instagram marketing. And lastly, we'll have something like maybe a video production, right? So these are all our services and I think they already look quite nice. Yeah. One thing I might want to change is the size of the, of the boxes for the individual icons. So I'll scale it down maybe like to 10 percent. Now that's two that's two little maybe 15. Yeah, I think that looks a bit better. So I'm just going to copy paste that style and to the other boxes as well, just as we did earlier. So nothing new here, just pasting in the style, and then we should be good to go. So usually when you do something like this, yeah, you can easily just then paste in the Styles again to make it to reflect the changes in the other elements that you want to change as well. To wrap things up for our homepage, we're going to create one last section, which will be the call to action section, which is where you usually use to kind of nudge your users or your visitors to take some kind of actions. So in the case of this website is might be that you want them to contact you for a consultation or you can send them an offer on your services. In other cases, in my signing up to an e-mail list or it might be buying a product for an online store. This can be anything but you're creating something like this is really easy. One thing you could do is you can just use a template as well. So we could go to the template library and we go two blocks and choose the call to action library, and then just add one of these. So this is something that we can do and it's also what we will do right now. You can obviously just create this yourself, but sometimes it's easier to, to choose one of the pre-built components and then to make some changes to reflect. Yeah, how you want it to look in the design. All right, one thing we need to do is we need to add some padding to this section so that it's not that crown. So we'll do some on the left and right and then on the bottom, select five maybe, and maybe even like to 2 percent padding on the top so that it's like a bit more space out like this. All right, and now we can just copy like our, like our style the way we wonder web search look onto this section down here. So maybe this, this background is a bit too dark for our design. Maybe we wanted to use like a light version of that blue that we used earlier as well. So we can just copy that style and then go to the section, go to style, and then we will just paste that in. Now this will look a bit too like with too much. So we'll just turn this down a bit like this. Maybe even a bit more, something like this. Yeah, and now we can actually turn this into the same site is up here, so we'll copy the, the textile from over here. We'll paste it in into this box. Maybe you want to make it blue this time. So we'll change the color to be blue that we just copy pasted. We'll also be copying the textile from here. Or maybe even now I'll just choose the one up here because that's actually the same texts that we used, the same font to be used. Paste it in. And now you see we applied a bit of styling to the text appear so we have the padding applied so the texts hasn't breached the full width of this container. So all you have to do is we have to remove this outfit ago. And here we have to remove this margin and the padding, as you see the 15 pixels, if we wanted to be the full width again. So I like this. I actually wanted to be a bit darker here as well because again, we can contrast issue so the background is a bit too light for this, for this kind of text color. So maybe we want to go in here and we want to make it a bit darker, just so that it looks a bit more gestural, it's a bit more readable. Next, we want to change the button, so we just choose the button style from up here, copy that as well, and then paste it in here. So paste style. And we want to change it from purchase now to something like maybe contact. Now, as this reflects better what we actually want to do with the site. Now we still have this kind of border here that was applied from the template that we import into the site. So we could use it by maybe like turning it into this blue as well. I don't know how this looks, but maybe it's maybe it's something that looks good. I don't know. We're just added a border-radius doesn't even apply to this. Yeah, it should be played here. Will serve you go to Style, go to border. And now here's what will change it so we can change the border radius, so we'll make it a bit rounder like this. So you see now it has this like rounded edges a bit. And if we go back into the style settings, back to border, we can click on the text and the color like this. And then began, we can paste in maybe the blue that we used earlier. So like this. And I think you'll have flux. It's not the greatest design of adult creative, but I think it looks fine. And I think this should demonstrate how you can build your homepage in Elementor quite nicely. 12. Make your website responsive: We're now going to pick up exactly where we left off in the last part of this course, because we're now going to create a responsive version of your website for tablets and smartphones. And this is extremely important nowadays because big search engine companies like Google have actually started using a mobile first index. And that means that they look at the mobile version of a website first to determine if it's worthy of ranking in their systems and going higher up the ranks. So if you don't have a good mobile version of your website, google thinks that the website can't be used on mobile devices easily, then you might lose out on a lot of ranking, or you might even not rank in the first place. And this is extremely important obviously as you probably want to have good search engine ratings. And also, just generally speaking, if you use your phone and you go to your website, probably you've experienced that as well when you go to whatever that isn't optimized for mobile devices and just looks terrible on your, on your smartphone or isn't sometimes isn't even accessible your smartphone? For me, that means that I'm probably leaving the site immediately because I just don't want to be bothered with that kind of experience. So it's extremely important and that's what we're going to do in this video right now. We're still on the homepage that we just created. So it really looks nice. Just a simple homepage. And now we're going to go into the mobile view. So I showed you that already. So down here we have this responsive mode and we can click on that and then navigate between the different views. You can also click Control Shift M to switch between the views. So if you do that, we get into this tablet view right here. And if you do it again, we get into the smartphone view. And again, then we're back in the desktop view. But for now I'm going to use the buttons down here, and I'll just use this to go to the tablet view. And now we can start optimizing this page. Now, usually the biggest issues you will have are around spacing and layout, because obviously, the less space you have on your website, the better you have to manage your, your space and the better you have to move around items to make them look nice. But it's really not that hard. And yeah, let's get started right away. So first of all, what we see here is this top section right here. Now, this actually looks quite fine to me, so there's not that much I would change here. One thing that bothers me is that there's this empty line. How we can get rid of this by going to this text tab, then clicking into this text and then just pressing Enter. It's kind of hacky. I don't know why, why, why element hasn't fixed that yet. It's been a problem for quite a while now, but yeah, this shouldn't shouldn't stop us from optimizing this page. Usually elemental already like optimize the text so it makes it a bit smaller. And I think in this case, actually a Audi looks fine, so I might even just leave it as it is, cuz yeah, it's not, it's not too, too messed up. For this section. Obviously the spacing is way too big, so we go into this section. And we can actually remove some of the padding that we have. And take note that this is actually, this will not impact your, your desktop version of the site. So that signal is a great feature that elemental has. You can edit the different versions of your website. So you can edit a desktop version, a habit virgin, and a mobile version. And whenever a styling property has this little icon at the top, you know that it has like different versions for the different, different screen sizes. So we could now change the padding and the margin that we talked about earlier for this section without impacting the design on our desktop version. Now this isn't true all the time. So please be careful when you're doing this because if you don't know what you're doing, sometimes you might like mess with properties that are set for all of the different views in one place. And then you might be wondering why your page looks weird. So that's what we'll be using mostly when you're designing and editing the mobile layouts. All right, so now let's actually change this padding so we want to use pixels. As I said earlier, pixels are just much better for your, for working with the web because they are, they change based on the screen size. So they automatically resize base on the screen. Looking at this section now, I think we have like a bit of padding at the top, so we could make this a bit smaller. Thickets. Think it's up here. Yeah. But I might want to have a bit of padding left, so we'll actually do is I have to access them back for the after use, the navigator. It's actually something that we haven't covered yet, but just if we needed right now, i'll I'll show you what it does. So the navigator pretty much like has all the elements of your page and then you can click on them to directly access them. Now in this case, because they have this intersection and the outer section behind it, I can't really click on the other section which is like a yeah, a bit of a weird feature in elemental. They haven't fixed it yet as well. So what I'd said can do is use this navigator by clicking down here or using a shortcut. And then I can just click on the section that I want to edit. And now it's highlighted and I can like edit the features. All right, so what we do is we want to have a bit of padding here as well. So we'll say like three pixels on both of the sides. And then we'll have like, maybe like one or two pixels. Two might be, might even be too much. Let's say, just say one pixel at the top as a margin. And now it has like a bit of distance. But it still looks quite well. Actually for the top section, I forgot to do that as well. Let's just add a bit of Lego, tiny bit of margin and padding here as well, select three pixels left and right, just to make it look consistent. Again, consistency is something I would usually look for in website design. Obviously, you can do something else and you can do whatever you want. But I like websites to be cleaned and consistent, so that's, that's what I usually do. Now for this next section, I might actually want to make the text a bit smaller because it just seems a bit too big for me. This again is it's not like these changes I'm making right now are not like really necessary. So it's not like this page looks terribly, terribly bad. On an iPad or another tablet, you could like, you could leave it like it is. But I just like to optimize it to make it look like exactly how I want it to look. And when we go further down, you'll see here is when we like have to start looking for ways to make this year actually looked good because it just wouldn't, wouldn't fit because of the screen size. So let's check if we have anything else optimize appear. Again, we'll do this little text thinking, well, we have to like press Enter to remove the text line. And this actually looks good as well. I might just leave it like it is. Yeah, I think I think that should be fine. Maybe I can make it display three of the slides as well. But yeah, I was just too too little space. Spatter. Know. We'll leave it at 222 is how a product works best. All right. Now we come to this section. Now it gets interesting. So how do we, how do we go about doing something like this? How do we go about optimizing this kind of section? One of the things that you will probably do most often is playing with padding and margin, and also playing with the column width because this usually is what is causing the issue. You see right here, this column is so tiny. So this, this Eigen doesn't even fit in it anymore. So it kinda overlaps into this column and or everything kind of looks weird. So what we could do in this kind of case is just change the width of this column to maybe even like a 100 percent. And then it will be displayed as full width and the other column will just be displayed below it. So I'll show you how this works. We'll say one hundred ten hundred, one hundred percent should be enough. And then we'll make this 100% of width as well. And now you see we have like these, these columns on top of each other. And this kind of fixes the problem because now, yeah, it doesn't look too weird and we can further optimize it to make it actually look good again. So maybe we want this to be, maybe we want the entire text to be aligned to the center. In this view. This might be something that looks good. I'll just check. Yeah, and maybe we want to make it a bit smaller just because it in here, it actually is a bit cramps or maybe a bit of smaller texts would be great here. Also, let's make the icon a tiny bit smaller. So maybe like 25. Something like this, gathers actually looks good. And now we can apply these changes to the other columns. Now this still is more of an easy example, but you get the idea of how you might. Go about these, these kinds of sections and I think we'll do a couple of more of these sections later as well. So you know, yeah, how I would optimize them. All right, so now we can actually apply the changes that we just made to the other sections as well to reflect the changes there as well. So we'll just copy the section of this little icon. So I click on this and then click Copy. And we'll just paste it into all the other icon sections. Just click Copy. Oops. Sorry, I think tastes here up to click Copy. And then here I'll paste it in. And that's not me. I don't want to do either or you can. Obviously, you can always go back with control that I don't want to paste in the element, I want to paste only the style. So like this, and not do the same thing here. Paste it in the style, and same for all of the other sections. All right, So now we'll go over the other properties that were changed as well because we need to change these as well obviously because as you see right now on these other sections, the ICM is still bigger and the text isn't aligned to the center and so on. So we'll change these properties as well just by tasting and these styles. Now this is a bit of just repetitive work, but I'll show you how you can make sure that you don't have to do things like this too often later in the course because there's ways around having to like do this 56 times. Because you could just optimize one of these elements first and then like duplicated when it's already optimized. And that would save you a lot of time. But yeah, that's, that's too much for this tutorial right now. We'll do this later in the course. All right, so now text alignment. So we'll just copy paste, paste, paste, paste, paste. And lastly, we have the textile, we'll paste that in into all of these. All right, and then click Update to save our changes. All right, so now we see we have, yeah, optimize this section to make it look much better. We can still see that this search engine optimization title is a bit bigger than the rest. So you see how it kind of doesn't align down here because this is just a biggest sections. And these two, we could do something about it if we wanted to. So for example, we could change this from being search engine optimization to SEO. So it only takes up one line. So let's do that right now. And now you see it actually, it actually looks, looks by the end of the line. And this is an example of a change that is reflected in all of the versions of the website. So be sure that if you change something like this text that you noted, it also is going to be changed on the desktop version. So if you go back to desktop, for example, we see that it now says SEO instead of saying search engine optimization here as well. All right, and I think the last section is already looking quite good. I don't think that we need to optimize it right now. Obviously, what we haven't looked at right now for this, for this entire side is having consistency with the fonts and so on. But again, we'll do that later when we start putting our design system. Because you obviously want the font styles to be the same, you want the size to be the same, and other properties to be the same as well so that you have a really consistent experience and that you also know what styles to use when you're creating new pages on the website. But I think that's it for the, for the tablet version. Let's quickly go through it again. If we collapse the sidebar and look through it like this. But I think it's looking good. And we can go on to the mobile view. Here we see that we have a bit more to work with because the mobile view is just that much smaller than the tablet and the desktop view. So we'll need to make a few additional changes on this, on this version. So first of all, we have the heading, which is way too big for the mobile view. So we'll make this a bit smaller. Something like 30 should be a Much better size. The text as well. It's kind of a bit crammed together because again, we have the style applied from the other, from the other views, which has the padding on left and right. So we go into the Advanced tab and you see it when it looks like this, and we can just click on the link values together, a box to kind of get rid of that, so to reset it. So like this and now the padding has been removed. Next, we'll check out the style and we'll turn down the side of the bed. So we'll just see what looks good. Maybe something like 17 should be fine. Yeah, this is actually looking looking quite right. So I only did like this. The button is fine as well. And we'll now edit the section. Have some kind of padding on the sides again just to make the to make it respond better to changes. So three on the left and three on the right. That's that's what I usually do. And I usually have these kind of fixed sizes for the different views. So for example, on mobile I usually do like three or 4% padding on the left and right for all of the sections because it just give the cognitive bit of breathing room on the sides and it just makes it so that it doesn't like, like the cotton doesn't get too close to the edge of the screen, which just looks weird. So something like this is fine for the phones on iPad or on tablets are usually have something like 5 often, but it really depends on how you want your site to look. Next, we have the lower section. And now because screen sizes too small, all of these different logos have been added in a vertical role. But we actually want him to stay in the alignment that we had earlier. So what we have to do is we have to edit the column width of these different logo columns to make them align in one row again. So we'll just click on that button, go to Column Width. And as we have five logos will add 20 percent as our column width. And now it looks a bit tiny, but we'll edit that later as well. So we'll just copy the style again and then paste it in for all of the different logos. This is something you'll probably do quite often. So your style one element, and then you'll paste the style to other elements. Because it just makes it much, much easier to quickly get, get things done in elemental. Alright, so now the lowest are really tiny, so we want to fix that. But first, let's get. Rid of that top padding right here. And also we'll add the padding off this entire section. So we'll go back to the percentage. And then we'll say again, 3% on the left, 3% on the right. And maybe like one pixel out, or sorry, 1% top and bottom padding. And now we can change the size of the images. So we'll go on the image, we go to style and we'll go with a width of maybe 100 as well. Yeah, I'll just I'll just check out how it looks for all these. If I, if I use the 100% width, but I think there should be looking fine. So yeah, I think that, I think that looks good. Maybe we want to have a bit more padding top and bottom. But this actually should look quite nice. Yeah, I think that should be fine. Next, we'll cover the next section up here, which is also a bit too big. So we can use the same textile from up here. So copy that and we'll paste it in here. And we have to make it a bit darker as well. So again, don't, don't worry about the colors too much now, I'm not doing this exactly how I would do usually, but I just want to demonstrate how it works now. Usually you want, as I said, to have a consistent color theme that you use all the time. And right now I'm just randomly picking colors whenever I need them. But just so that you know that this is not how you would usually do this. All right. This could be a bit smaller as well. So maybe like in this case, 25 would be all right. And then obviously this subheading has to be a bit smaller as well, because we want this to be in the background and not ended complete foreground. So maybe like 20, this is looking much better. I might even make this a bit bigger again, they don't like how it's aligning, so I'll just make it a bit bigger too. Yeah. Maybe we can keep it at that size. All right. Next we have the carousel. So again, we'll do our basic padding on the left, padding on the right. What we always do. And now let's see, we want this maybe to be a bit bigger. So I think as we have some padding here still left that we can get rid of. So we'll just click on that and we'll get a bit more, more space as well. If we go on this and go to advanced, I think we can get some more padding. Maybe not, but yeah. Okay. Well, we definitely need to work on here is the size. So this just looks a bit awkward. It's just a bit too to tall for its width, so we need to change that. And also, the navigation is a bit unclear here. So we have these little arrows here, but they are barely visible. And that's why we want to make them, make them stand out a bit more. So that's what we're going to do right now. First of all, let's go to the content. And that actually changed the height and width. So we'll make the width be like Maybe I think, I think 100% might even be, right, maybe like a 90 percent to make it not look that big, but yeah, 90 percent should be fine. And the height might be something like. Like this. Maybe 450 pixels. Yeah, I think, I think that should be looking fine. So now let's go to the style and we'll go to Navigation. And we have these arrows here. These are the elements that are like write down. We want to change the color of them. So we want them to send them to stand out a bit more. I think we'll just choose this dark gray tone. I think this should be fine to make them. Yeah, it's done a little bit more so we'll just go in here. Paste that in. Oh sorry, that was, that was the wrong style. We have to go down here two arrows and then on color. And here is where we have to pass it in. But still it's not that, it's not that visible. So maybe we also want to crank up the size a bit to something like 30. Yeah, I think it's, it's sub-optimal that we have this style right here because it just, it's faded out because it's the last element. So maybe we even want to just get rid of the arrows. Think we can do this as well. I don't know. Maybe, maybe we can't. Oh, yeah, we kept right. Yeah. Okay. So maybe we just want to get rid of the arrows and only have this little bottom navigation here. So we can still scroll through these, these, these elements. But we don't have the like barely visible arrows and we just have this little menu indicator menu down here. Alright, saves the changes. And let's go to the next section. All right, so in this case, actually the services sections already looked quite nice because it has been automatically resized and the width of these elements is already 100%. So I think this is already how we want it to look. So I guess we'll just leave it like that and we'll just apply a bit of padding on the sides to make it follow our general guidelines for the website. And then I think we could leave it like that. Maybe we actually want this section to have a bit of padding on the bottom as well. So we'll say something like seven pixels padding on the bottom. Because we wanted to have some kind of spacings between this section and then the next section that's to come. We'll obviously want to optimize that as well. So we want to change the title size. I'd say we just use 25 because that seems like a decent choice. Then from texts, maybe we want to use something like 16. Again, you can just play around with these sizes because yeah, there's not there's not a fixed size that you have to use. It also comes with experience. So when you have been doing this for a couple of times, then you will see or you can't get a feel for what sizes are good. I'll also be giving you a detailed guide on font sizes, or unlike my recommendation for font sizes, of the ones that I use for the different types of fonts, of font styles, and also for different devices. You will be able to download that as well. Also more you can do if you want to check if the design actually is looking good, is to get out your phone and just go to your website and then take a look at those and see if there's anything that Comes to minor and things that you find on your actual phone that might seem a bit off because sometimes the representation isn't like one-to-one. And obviously the font size that we're optimizing for right here isn't exactly the same font size as the phone you might be using. So there might be some little differences. But you can get a general feel if the design is looking good or if there are still things that you want to fix. So now I think we want to do one more thing which is to edit the padding of this as well because it's still set in absolute values. So in pixels, we want to have it in percent as well. So what are you left with the three on the left and three on the right, and also top and bottom. Because now as you see, this border is the bottleneck we added. This little blue border is clashing with the blue background that we've added. So we might want to have like seven pixels, top and bottom as well. And then we should actually be good to go. Let's take a look at it again. And yeah, it actually does look quite well. Maybe there's one more thing, like having a bit more padding up here, because we haven't edited that as well. So we'll do 1, 2, 3, 1, 2, 3, and maybe like seven as well, top and bottom. We'll have even 10 in this case. Think that should be good. Okay. Yeah. Yeah. I'm actually quite quite happy with the page. And I think that we could leave it at that because already optimized the page quite well. Maybe just to sum up so that you know, like what you have to generally look out for when you're doing these kinds of mobile optimizations. Choose a set padding that you want to use for the different, the different styles. So for the tablet view, just choose a padding that you want to use on the sides. Same for the mobile view as well. And then, yeah, just, just go from that. Tried to use consistent styles. Again, That's what we'll do in the next parts of this course. So stay tuned for that because then they will become much, much easier to actually create great layouts for your website and you won't have to do that much manual optimization anymore. And lastly, one thing that is just a big time-saver as well is to optimize one section and then to copy and duplicated because that's what we saw with the sections up here. If you remember, we actually credit them on the desktop view and then duplicate them on desktop without optimizing for mobile first. And that's why we then had to optimize each of these individually, even though they all had the same changes applied. So it might be better in these cases to first create one of these sections and then actually create that actually optimize that section for both tablet and mobile and then to duplicate it into the other sections. So then the other sections will already be optimized. And you don't have to do any additional work. 13. Create a design system: Global fonts & colors: Having consistency in your designs on your website is something that's really important and that also helps you make your brand look much more professional. And that's why you should absolutely create a design system for your website. And that's really easy with elemental because it has a built-in design system that lets you easily create styles for you to use all over your website and having a convenient place where you can change them and edit them so that you always have your brand guidelines, up-to-date and new website can be really, really consistent. Now when you're doing this, you obviously need some kind of branding. So if your business or your personal brand doesn't have a branding yet, then I would always recommend doing some work on that. Maybe hiring a designer to help you get like a visual identity for your brand so that you can use that consistently. It's not just helpful for your website, but also for other parts of your, of your digital presence as well. And yes, this is a bit of effort, but effort that's extremely worth it in the long run because you just have to set it up once and after that you can use it all the time. And it's it makes it so much easier to work with the website, trust me. So this will be split into two sections, into two parts. First, we'll cover the global fonts and global colors in elemental. And then later we will go to the theme styles and we'll look at take look at how you can actually style all of the components do you use on a website before you actually even use them so that you don't have to edit all of these styles manually each time you add an element to your website. To go along with this, I have credit a template that you can use for this design system to make it easier to have an overview of how your elements will look like when you've applied the styles, which you can again download from the description down below. And they will give you access to a template that you can upload to elemental. And this will help you to see what you're actually doing and how the elements will look like once you've started them and it gives you a good overview. So we'll do that right now. We'll install a template on the website. And then we'll be starting on the global colors and global fonts. To do this, we'll create a new page in WordPress. So we'll go to Pages and then we'll go to Add New. And we'll call this design system. And then it will just publish it. And later we'll go to the Elementor editor. Now will again turn this into a canvas view because we don't want the header and the footer and just as a bit annoying, we don't need it. And now we can go on this little button here, and we'll go to my templates. And we'll actually click on this little button up here, which allows us to import a template. So that's what we'll be doing. I created this template for you and then you can import it and then select the file from your computer. I've got it. I think in I just have to check the folder where I put it in, but I think it's somewhere in here. It should be this one. Yeah. This should be the right one. All right. And now you see it appears up here. We click on Insert, and now we see how the template appears on our screen. Now this is, yeah, this is what the template looks like. It's just all different styles that we can edit using the design system in WordPress. And we'll get to that later as well. So we'll, we'll add in these styles to the system so that we have a good overview of what our styles are. In order for this to work, we have to check something in the elemental settings because otherwise these changes will just not be applied later. So we'll go back to our WordPress dashboard. And then we want to go to elementor and we want to go to settings. And then here we have to check that these options are checked on. And this is the case in my, in my in my website. So I don't have to do anything different. But if this isn't checked for your website, then you have to change that manually because we need to disable the default colors and the default funds in order to make this possible. So I don't need to save anything, but if you have to save it, then click Save Changes. And then we can go back to the pages, go back to Design System, and click on Edit with Elementor. So we'll start off with the global colors. And we can access these global colors by going on this menu again, and then going to Site Settings. And here we see all of the sides settings options. And up here where it says design system, this is where we have the global colors. So by default, elemental has these four different colors styles that are automatically added into your WordPress website. And we can obviously add additional styles and change these default styles. But before we do that, I want you to understand what the global codes actually do and what it actually does to your website. So a global color is a color. You can apply it to your elements, your text or your images or buttons or whatever, because it's a global color, all of the instances where you use it are connected to each other. So for example, if you have three different buttons and you make them all use this primary colors. So they all are blue at first, but then you change the global color to something like red, then all of the buttons also automatically turn red because they are connected to this global color. And so you can easily change the entire design of your website. Just a couple of clicks, instead of having to edit each of the elements on every page, which would be a nightmare to do. So, it, it makes it much easier to stay consistent with your colors and also to make changes wherever you might need to or 12. So that being said, let's now start adding in our colors. I recommend you have a couple of different colors styles in every case. So something similar to what elemental has done here, you always want to have some kind of primary color that makes up the majority of your website. So like your main brand color, then you might have something like the secondary. So something like a silent you use for your headings, for example. A style used for text. And maybe it's something as an accent as well. You can obviously add additional styles as well, but we'll start off with these couple of styles first. All right, so I'll add in the styles that I previously chose. So this will be my primary style and I'll go through the list of the styles that I want to apply. So I'm going to speed through this process because it's just not that interesting. I'm just adding in those styles and the color in here. And if I want to add a new one, I'm just going to add it like this. All right, so now I've added in my different textiles and what I recommend you do is you also name them so you can just click on the text here and then you can change the name of these just like I did. That's really helpful. For example, when you haven't been working on your website recently and then you just don't remember what you used, what style for. So it's great to keep consistency and therefore I would recommend it. So just to go through the styles that I added, as I said, you don't need to add up all of these styles. I just like working with a bit more styles because it makes it easier to combine elements and to make nice designs. Yeah, So I usually apply a bit more of these styles, but you can obviously work with a lot less. I have the primary, secondary texts and accent, and then I have a white also as a style because sometimes I might not want to use complete white as the default white for the site. So I might want to use a bit of a different white tone. And so I have that as a global color as well, so that they can use that style of white consistently on the website. Then I have all of these different low saturation, lower opacity values of the colors appear. Which is just nice for like cephalic your background. So I have the high saturation, higher capacity content on front and then the background, the lower saturation version, which is a style of design that I usually really like. So I use it often. Then I also have a style for links. So when you hover over a link, what style does the link, what colors the link turn into? I usually choose a bit of a darker version of my primary color because I usually want the primary color to be the color that the links are in. And lastly, 14 texts on dark backgrounds because this cell of texts is usually not working too great on, on dark backgrounds. And so I usually have 14 dark and wonderful light backgrounds to make things easier. Next, we actually have the global fonts, and this is pretty similar. It's just a list of fonts that you can use. And they work exactly the same as the color styles work. So if you connect different texts or headings to a certain font style, then they will all look the same. And when you change that font style changes will also be reflected in all of these different instances where you use that style. And here you have like the same, the same thing, and it's also the same way you have these four default styles. But I usually add a bit more sounds because often you need additional styles in order to, to make the website look good. And I'd rather have more styles than too few. And then having the problem of not having global and consistent styles for the things that I'm doing. By default, you can access all of the Google funds in elemental directly. So you can just go through a big list of fonts that you can use as we did earlier as well. So all of these funds right here, if you don't know what fun to choose, I will link APF with some of the, some of the most popular and some of the, in my opinion, best fonts to use from Google Fonts. And so you can check that out if you want to get a bit of insight into what, what is popular, what people are using most often if you're unsure about what to use. Now in the case of the fonts, that we have the additional option to style them for the different screen sizes as well. So that's something that we'll definitely be doing. As you can see, if I click on the primary style, I have this little icon appear. And if you recall, that means that we can edit the different versions of this property for the different screen sizes. So we can create a, a primary style for a desktop. We can create the same also for a different size for tablet and mobile and so on. So that's something we'll definitely be doing. So I'll quickly show you how I might be doing this for one of the font styles. And then I'll just add in all of the others because it will probably be a bit boring for you to sit through all that. And I'll just go over them once I've added them in. So the first I will do together, which will be the primary style, but will change this to a heading. And this will be H1 heading. And one refers to a hedge HTML tag which you don't know to need to know about. It's just the biggest heading that is being used in web design usually. And that's why we want to call it that so that we know when to use it. Now we're going to edit this. We are going to use Roboto for the size. Maybe let's say 50, and the weight should be fine with 600 and maybe I want to do 700. Um, yeah, but that should usually be fine. Style can be left as default. The transform also decoration as well. Maybe just the line-height is something that I want to work, so on, so maybe like 1.5 e m should be fine. But besides from that, I might just leave it as that. And then I can actually just save it and maybe just go to the tablet view. And now you see we can edit the properties for this year as well. So that's what we're going to do right now. For the size, I might just choose something like 40 because that should be fine for, for the tablet. And I think I'm just going to leave the line-height and letter spacing way it is for now. We can obviously also go back in later and change this. And this is the great thing about global fonts, because if we find out that one of the sizes maybe not perfectly fitting for our use case, we can just change it. And the change will be reflected in all of the instances where it's used. So lastly, we'll go to the mobile view. And for this, we'll just choose 32 maybe as the size. And I think that should be it for now. And this is what you can kind of do for all these other sizes as well. I will be giving you a link to my recommended sizes, as I mentioned earlier. So you can check that out as well. Where you see like what kind of size of font I am recommending for the different cells and also the different devices. All right, so now I'm all finished with all of the different font styles. And now let me show you what I've, what I've added. So I've added all of the different heading sizes for the different headings that are available in the web, on the web. So in HTML there are six different heading sizes. And so I've added in 11 the Global Fund for each of these. And this is because I wanted to have a different size for each of these different cells. So if I ever need of the six from having sizes, I have a separate style for them. Usually, you will only work, I'd say with H12, H4. So each one is the biggest and then H2, H3, and so on. But yeah, usually add them all in. Just happened once I need them. Then I have different textiles. I have the normal textiles. So this is like for general text on the website. I have a big text style which I usually use in like the hero section or an important call to actions. And then I have also like smaller text sizes, maybe in a small column or four little like. Notice that I need to add. I would use one of these small text textiles. And lastly, I have a different font style for the buttons as well, because the buttons usually have a bit of a, I usually make it a bit thicker, so I want to have a different style for that as well. And now with that, we are set to start adding these styles that we created to the themes styles and also to our template right here in the next part of this course so that we can actually see how this will look on the different sizes. And so that we can optimize it to look exactly the way that we want it to look. 14. Create a design system: Theme styles: After we've added in the global colors and the global fonts and the last section of this course, we are now going to use them to build out on themes, styles, and to actually use our design system template that we imported and to make it look nice and to see how our design system actually looks. So let's do that right now. We are going to go to our pages and we will go to our design system again. So we'll click on edit with Elementor. And then we are going to land on the design system. Now, we are going to go back to this menu, to the site settings. And then instead of going to the census from here, we're going to go to the theme styles, and we'll start off with typography. So this is what the default style for the elements will actually be when you add it to the page where we are now going to do is we're now going to add in the global styles that we actually just created into these different elements here to create these themes styles. So we have, for example, the body and the text of the body. So for a body copy, we want to obviously use the normal textile which we created. And we also want the color to be the text color we added. And now this is going to be what our default text body will look like when we imported or when the added into our element or Canvas. Now next for the links, we're actually going to use the primary color as the normal color and as the topography. We wanted to use the normal text style by default. And then we are going to use on the HVAC, we're actually going to use a different color. This will be the link hover color that we added so that you actually see a difference when you hover over a link. Just makes it look much better. And we'll also use the normal texts that right here. And then for all of these textiles, the H1 through H6, again, this is what I told you about. These are the different sizes, pretty much are different tags that you can use in HTML to differentiate between different headings. And it just makes it easier for us if we add in the styles that we created earlier. So we can now, as we already credit these global funds, we can just add him the color we want. So we are going to choose the secondary color. And then for the H1, we're going to choose this first one, which if you hover over it, there's the H1 heading that we created. For H2. It will be secondary as well, and then it will be the H2. And you see how these changes are already reflected here in the style guide. So you already see that this is how this, these headings, we will look in an actual page because they're already connected to these styles. And we can now easily see how this, how the changes we implemented this design system actually reflect in the actual content of the page. So next, we're going to add the H3, and we'll just do this same way for all the other tags. I'm just going to speed through this again. All right. So now as you see right here, we do have some kind of issue. Yeah, I think actually didn't style the text correctly. So I'm going to go back into the global funds and see what the issue is here. So maybe I haven't said it correctly, but I think they do. Okay. So maybe it's just because the because it hasn't actually updated yet. But I'll actually just add in the font weight because I think I forgot that earlier. Just make sure that you I had all of these correctly because if you don't, then they won't show up this way in the design as well. So going back to the topography and baby just going up out of the site settings for once. I'm just going to hit Refresh. And then this should be working again. Okay. There's still is a bit weird here. It doesn't I don't know why it's showing up in this huge size, but yeah, sometimes the elemental themes styles are still a bit buggy because they've just been recently introduced. So I'm just going to look for the issue and then I'm going to tell you what I did wrong. All right. I found the issue. Instead of choosing the size in pixels, I actually chose a different unit which is way, way bigger. And that's why it's kinda weird, weird. So I'm going to go into pixels now. And yeah, 18 pixel, I think it's the size of the ones you have. And now you see it actually makes sense and it's not a huge weird sides. Alright, so now we're finished with the heading styles and I think we've got all of them. Yeah, Then now we can move on to the buttons and buttons. This is the one right here down at the bottom. And we can now style how we want this to look across our website. So again, we can just use the global styles that we have created. So for the topography, we want to choose, let's see where it is. I might have to refresh again. Again. As I said, sometimes it's a bit weird because they haven't I don't think they have quite figured out everything that needs to happen to make this work perfectly. So sometimes it might be a bit fidgety, but just reload. Reloading the page usually does the job. And then we can click on it again. And now we see the button style right here. And you see if I click on it, I see it applied. It's applied to the button as well. Actually, I might change the thickness of the font again, so I'll do that right now. But first, let me just edit like the color of the button for the test. Actually want the text color to be white, law just like here. And I want the background to be the primary color that we used, so like this. And then we're going to have a solid, solid border, which will be two pixels wide, and it will also be primary color. And I will have like a border-radius of, let's say five. That's usually a good, good way of going about it. Now for the hover state, I want the border-radius to stay at five. And the text color will be the primary color and the background should be transparent. So I'm just going to drag this down here and leave it as transparent. And then the bold type is going to be the same. So it's going to be two pixels wide and the silos going to be the primary color. And now, as an end result, this is what we get. So we have this button and if we hover on it, you know, the text turns, turns blue and the background turns white. So this is actually what we wanted to have. I think we also need to click on this again. So it does, it just updates the text style for the, for the hover state as well. Well, we're also going to do is in global funds under buttons will actually make this have a weight of, I think 500. And X-linked reference should be alright. So save and then just refresh the page again. And I really think that they will fix this in the future. So they are working on making this even better, but right now it's still sometimes a bit of it buggy, so yeah, but now, as you see, now, it looks how we want it to look. Now next up we can style how we want our images to look on our website. And usually you don't want to do too much here because this obviously affects all of the images in all of your website and just a hassle if you apply too many cells, which then led me to remove. So the only thing I actually do here most of the time is apply a border-radius just so that the corners of the images are a bit rounded. So usually like five pixels. And now you see on the image right here on the example image that this now has this, these little rounded corners. But I would do nothing else here because everything else usually isn't something that you would want for every single image. Then moving on we have the form fields. So this is what we have done here, this form and what we're going to optimize now as well. So the label is this up here above every field. And we can style this using the secondary color. And for the topography, we might want to use something like the h3. I think. I think H3 w is a bit too big, maybe something like H4 or even H5. Think H5 might be enough. Yeah, we don't even need that big of a text, so H5 should be fine. Then the topography of the field, we'll just use the normal texts typography and CA will update then as the text color will choose the normal text color and so on, you get the idea. It's pretty much always the same. We'll also add a little bit of border-radius. And I think that should be it already, maybe for the focus. So if we click into these, we might want the border will make this solid and we'll say like one pixel. And we might want us to turn blue. So, yeah, as we see right here now this is like this little blue border. I think this might look quite nice on these types of forms. And now I'll just apply the last styles to this layout so that we have a good overview of the entire design system. And so that the changes that we make are actually all reflected in the system and we directly see what we changed. So what we do for this is going to go out of the site settings. And I'm just going to change these tech cells here to the different styles that they have. So the biggest one is obviously going to be on the first one is obviously going to be the big text. So you see it gets a bit bigger than the next one will be connected to the normal texts that's already so nothing to change here. And then for the third one, will choose the words that the small text. And lastly, for the last textbook, choose the really small text. And now you see these different textiles appear right here. The text appear. We can also turn this into a big texts. So updated like this. And now we should be good to go with the styles. Yeah, down here, I actually usually add the colors as well, so I have the primary colors and then the accent colors. So let's do that real quick. So when we want to use this again, when we wanted to update something, we just have everything in one place and we see how it looks. So we don't have to like, I guess around what we actually changed and how it would look. So the texts like this, then, I think this already is the right accent. Something like this. Yeah, and now we have all these colors connected. I usually leave a bit of space so I can add additional colors that for 12. But you see now we have the different colors. And if we were to change anything about these colors, that it will also be updated on this page. And we can now see how our website design system would look. 15. Create an about page: And about page can really help your website visitor understand who you are or what your business is. Get to know you a bit better. And this is why we are going to create an about page in this section. So we are again logged into our WordPress dashboard as we are all the time. And now we're going to go to Pages and we're going to create a new page. And this time we're going to call it and part of me, and we're going to take publish again, just as we did previously. Now we're going to go to the Elementor editor again. And now here we can actually edit the page as we did previously. We want to hide the header and footer from our website. So we're going to go and choose the element, a canvas from the little menu down here, and then click on Update. And now we have a blank canvas without the header and footer. So the first section that we want to create is a slide that section. So we're going to choose a section like this. And we're going to go to the widgets draw, and we're just going to search for the slider or the slides, and we're going to add them like this. Now, we want this to be full width. So in this case, we have to remove the padding. And also what we have to do is we have to change the content width because usually previously we have a content width of 1250 pixels. But in this case, we have to make our content but bigger and extend to the edges of the screen, because otherwise it just looks bit weird. So we're actually going to select for width from this dropdown. And now you see if we update, this slide actually goes all the way from the left side of the screen to the right side of the screen. Now we're going to add the content of the slider by clicking on it. And then we can trust the different settings. We're going to make it a bit bigger. So we're going to change this to 50. This is the view hide. So it's 50 percent of the screen size that is visible. So just to let you know, that's what we're going to choose here. And then we can add it to the individual slides. For the first slide, we'll choose a background image. Now, we've imported some images for this. So I just use this for example, cuz I think would look nice. And it should be a cover image. And we want a background overlay as well. For the background overlay, let's look at maybe the, this one right here. So we're going to choose the secondary lower capacity low saturation value as our background. Now, for the second one, we'll just add in a different content piece. So maybe let's add in this different image. Again, these are just stock photos, so not much to, not much to see here, but we're just going to add in the same information as the previous image. And then the last one is going to be the last slide that we have. And this is going to be maybe like this one or maybe less like strategy thing here. It should cover the page and then we go to background overlay and we choose. Now secondary low saturation. Perfect. Now that we've got that out of the way, we can go through the style tab and actually worry about the content of the slider. So what we're going to change the title. So the title is going to have the, I will leave it as white, but we're going to change the typography to maybe had a one. Yeah, so H1, this is the one global style, what you're going to apply. And then to the description, we're going to apply the text color I think would look weird like this. So maybe the texts for low saturation. My, we might just leave it white because I think this looks best here. And we will change the typography to be the big text style. So as you see it gets a bit bigger like this. Then for the button will make this medium size will change the typography to button. And this is just all this stuff that we did earlier as well. Add border-radius. We're going to add a text color which will be white for the state. Then we have the background color like this, watercolor as well. This is just really simple stuff, exactly what we did earlier as well. So yeah, nothing too special. Changed values around like this. And now we've got the same end result where if we click on it, it actually the background kind of fades out and thinking maybe we would want to leave the text white here because it actually looks a bit weird because the background is dark. So yeah, this is, this is maybe better and looks better in this case. The spacing is a bit off in my opinion, so I might take a look at that and see if I can actually remove all also, the autoplay is kind of weird, so I don't want that to be there and I'm going to remove that. But now let's look at the style and let me see where we can actually edit that. Yeah, the description. So we want this to be something like 30 pixels and the title shouldn't be that far away. So maybe like 15. Take that looks a bit better. And yeah, now we're finished with the content. Now we could actually add in my titles. So we could go into the individual slides. And I, we could go to content, change up the, the button that appears on the different slides, and we can change up the title and so on. So we could say something like, I love working with digital brands. Again, it's not well thought out what I'm going to play in here, this is just to give you an idea of what you could add in here. You can also add things you did or like events you went to, just as a general idea of what you could do appear in this topper flatter section. Next, we actually want to copy a section that we designed earlier for our homepage. And I'm going to show you how you can do that easily because that's a really nice feature as well, that you can actually copy and paste sections between different pages. So in a new tab, I'm just going to go to. With ganache.com and on the homepage website, I maybe I'll just go with elemental as we see in the design. It looks a bit weird now because as you see, the global styles haven't been applied right here. So it looks a bit weird here, there, but that's fine because from now on we can apply them and we could also just go back in here and just apply a reply these global South. Alright, but what we're gonna do right now is we want to copy this section to our other page. So we're going to click on the section and then right-click and click on Copy. And now we're just going back to the other page. And in this field right here where it says brac, which it here, just right-click, then click on Paste. And now you see we just pasted this piece of content from one page to another easily without having to do any additional work. Which is quite nice because sometimes you might want to just reuse a piece of content or a column or some sort of widget that you created and you don't want to recreate it and then you can do something like this really easily. Now we're going to do the same with the logos right here because we want to use them as like a trust factor on the about page as well. So in a new section, we're just going to paste this in. And what we actually want to add is a little section above that, that actually just says like brands that trust us, something like this. So we'll just paste in a heading like this. And we're going to align it to the center. Then we are going to change up the styles. So the text color, in this case actually should be something like texts maybe. Because I think we'll just look better. Again, we're not going to worry about that too much. I just want to show you how it works and not make it like the perfect website. But yeah, I think you know what I'm doing. But one thing I want to do because it really nags me is that this color is different to the global color we created. So we're just going to change up to what it's supposed to be. All right, and now we're going to change this up. So for typography, we actually might start off with the buttons as a basis and then I want to actually change it. So I want to change the transform to uppercase. And I want to make it a bit, make it a bit lighter as well. I think that looks much better. And then I'll say like clients that trust us. But trust me, something like this. Maybe make it even a bit smaller because just, oh, that's not small but actually bigger. Make the letter spacing a bit. They go like this. Yeah, I think that should be fine. Again, we're not looking for the perfect lepton side, but I think you get what I'm trying to do right here. And I think we can leave it at that. Next, we'll create like a quick profile of the person that's run this business. So give some general information about the person. Show like a profile image and some contact information. So again, we'll create a new section. For these sections, I think I might actually add in a bit of padding as well. So for the bottom. I'll add like 5% or so. Yeah, should be fine. And now we're going to create a column. Actually we want two columns, so we're just going to duplicate the column. And now we have these two column, two column layout. In one of the columns. We're going to add an image like this. We can just put that in. So we're going to go to choose Image and then choose the image that we want to use. So that's the portrait I chose to use. And then on this side we're going to add some additional content. So we're going to use a heading. We're also going to use a bit of body text. Then we're also going to use a intersection with additional headings in there. So there's going to be one in here and then we'll just provide us optimize the other one later. And then we want another item which is the icon list. Now we can always drag these in lighter. I'm just going to drag them in all at once and then I'm just going to optimize them later. How you do this really doesn't matter. You could work on one element and Ben like optimize it and then add in the next one. Or you could do it like I'm doing right now and just adding all of them. And they'll start optimizing. Okay, so let's start writing something in here. So this is like the text that it's about that person. So I'm just going to duplicate that to make it a bit like look a bit more realistic because usually you'd have a bit more texts for the person that you're like introducing. For the text appear. I think the H2 is fine and just say, like write down the name here. So I will call this person John Doe, which is like the default name for any web design demonstration. And then we want to have an additional title, actually, an additional heading that's a bit smaller, maybe like the style that we had up here. Copy that down here, and align it to the left and maybe make this the primary colors. Well, yeah, I think that looks all right, So web designer and owner, this is like this description of who John Doe is and what he does. For example, now, down here, we're going to add the social media links. So we'll again use this heading, will copy it down here. Paste in the style, will make it a bit smaller. So we are going to, yeah, it's edited and make like make it 13. I think that should be finally 14. I wanted to make it too small and then changed the style maybe to the accent color we have. Yeah, we might just use that. It doesn't really matter too much. And then we'll make this into the social media column. Now we're going to add different social media profiles in this list. And this is a really nice way to do this because we can actually add an icon's to these individual items. So we can just go to the icon library again, like we did previously. And now we can search for all the social media networks. So for example, Facebook. And then we can just choose the Facebook icon and use that on our website. And we can do the same for maybe like Twitter for example. And as a third one, we'll just choose something like LinkedIn. Perfect. And now we can also give a description to these. So we can name this one LinkedIn. Second one will be called Twitter obviously. And then the first one will be the Facebook link. Now, we can make it so that if you click on these, you actually get forwarded to your profile on these platforms. So you could do this by just entering in your link right here. So your Facebook link. And then if anyone who clicks on this link, you will actually go to your Facebook page. Now I think I'm going to change a bit about the color theme. So I'm going to make this be the secondary color, and then I'm going to make the icons in that green color. So we're going to change the size of the icons will make them a bit bigger. Select maybe Say's. Law says 21 might be too much, but that's a size 18. And we'll give it a color of this accent color. And yeah, folder list for the text will actually give the text a topography of the small text. Maybe, maybe it's a bit too small. Maybe I wanted to be the normal text size. Yeah, I think that should be should be fine. Perfect. Yeah. So we're going to copy this, so we're going to duplicate it. And now we're just going to delete the other column. And now we'll turn this into the Contact column. So it will be the address and the telephone number and maybe Yeah, maybe email address and physical address. So I will say at first, I would say e-mail, just like this. Then we'll choose an email icons. For example, an envelope would be fitting in this case, the like this. And then we might have as the second one, we might be found right here. But we found it. So we'll choose a phone icon, like this one right here. And then lastly we'll have like a location icon, so maybe like Maps. Yeah, I think that should be fine. And then we'll just go into writing the address. And usually you oh, sorry, we, we kinda actually write that in here. So we would need to enter in the email address right here so that it actually shows up. It was my mistake. So for example, Janusz add workspace.com would be one. And then we could have like a phone number, like just random random number. I don't want to azure anyone's phone number here, so that might be our phone number and then maybe your location is Berlin, Germany, something like this. And now you see it, it gets a bit big. So maybe we do want to make it a bit smaller. I might just go away from the global font and just make it a bit smaller like this. So like size 15. Think that should be fine. Just copy paste it over to the other element. And now I think we're good to go. The last thing that we want to worry about is the alignment because as you see it's a bit like covered up or like a bit too close to the image and it just doesn't look too great. And also the text isn't really aligned, so it's aligned to the top. And this looks kind of weird. So what we can do against this is in this column, we can go to the Align and we can align it to the middle. And now you see it actually aligns to the middle of its, its parent elements. So the column and just looks much better. And also we might now actually just get this image a bit more padding. So we'll go with a percentage of maybe something like five. Yeah, I think that should be fine. And there you go. I think that looks quite nice. Just remove this line again. This is something that's really annoying. Actually. Just remove that again, like this. And I think now we're good to go. There's one last section I want to add here, which is kind of like a contact slash email list section, which will be, will just be like a basic section that actually just gives you the choice to enter in your email address. And to me maybe subscribe to an e-mail newsletter, for example, or to directly contact you. You could do this however you want. So we're just going to give you this background color will just add in a heading as well. We're going to add in some text. And we're going to add in a form which is something that we haven't used yet, but it's pretty easy. So I'll show you how it works for the text. We want to change this to white. We also want to change the alignment that we want to give it a bit of padding on the left and the right, like we did all the time. Now a bit on the bottom as well and the top. And now we want to align this to the middle. Say something like stay, stay in touch, keep in touch Maybe would be fine here. Then for the text, we are going to choose a different text style. I don't know if that yeah, that low saturation textile needs to be changed. That doesn't look good whatsoever. So we'll just keep it white or maybe like maybe a bit darker, something like this. This isn't how you do it, but I'm just going to do it quick, so yeah, this is what it's going to look like now for the topography will make this maybe even a big texts as well. So like a bit bolder. And now for the form, we have to make some adjustments. We only want them to be able to enter in the email address. And then yeah, if the email address maybe two to be sent to us or to be entered into an e-mail newsletter. So that's why we actually can remove these fields right here. This is how forms work. We have these different fields and we can remove them like this by clicking on this axis. So we're going to remove these fields and will only be left with the email field and the sand field. Now, what we're going to do is make this into one line. So we're going to click on the e-mail. We're going to go to Column Width and say 66 percent. And then down here, when it says buttons, we're going to also go to Column Width and make this a 33 percent width. Now you see it's actually aligned in one line. The way that forms work is you can enter in, so anybody can enter in the email address and then you can send that to your, to your e-mail. Or for example, you could send it to an email address. Oh, sorry. An email newsletter, as I mentioned earlier. So let me walk you through how these folks actually work in elemental. If we go into the forum settings, we can go to the content. And this is where we can determine how we want this form to be sent. Now, first of all, as we just did, we can have these different fields, so we could add a field as well. We don't want to run now, but you can add your own fields and you can also determine what type of field you want to have. So you could say, I want, my website was uttered to enter in a text. And you can say you want an email address, a telephone number, anything like this. There's loads of different fields that you can use for various different purposes. We're not going to go over all of them right now because it's just too much. But yeah, just to let you know you have these different options and you can also like say it, but you want to be required and so on. I think our going to go into a bit more detail on these in an additional course where I'm going to go through all of the wages in much more detail. But for now, we just want to know how this actually works. First of all, if you have this field, you have the option down here for the actions after submit. And this is what happens after someone clicks the Send button. And if we go on this, you see this default option which says email. But if you click on the plus, you also see that we have all these other different things that we could do when someone actually further apart form. So email is the most basic or the most often used version of that, which is that the form is actually being sent to an email address that you specify. So for example, why you would use the most often would be on your contact page? Yeah. Where you have like a big contact form where people enter in like what they're interested in and why they want to contact you. And maybe like a TextField of maybe they want to collaborate with you. You know, they give you all this information. And then when they click send, this form will be sent to your email address. And as I said, this is the default option. If I click on this email field right here, you can see you have the options to edit what actually is contained in that email. So you see this is the email address that it will be actually sent to. So once this form is being sent out, this is what we'll go to. You see what the subject line will be. So you can customize that, and you can also customize what's contained in the message. So for example, you see things like and metadata. This is something that you can actually have included in your e-mail you receive. And you usually don't need this, but it's just nice, nice to know that you have the option to do this. And the second most popular way of using these forums or the form integrations, is to connect them to your e-mail marketing software. So if I go back to the actions of the Submit button or field and right click on the Plus again, you see things like Mailchimp, drip, active campaign, GetResponse, convert B and so on. And these all our email marketing software tools which allow you to send out e-mails to an e-mail list. And with elemental, you can actually have an integration between these softwares and you can make it so that whenever somebody actually enters in their email address to one of these fields, you can subscribe them to one of your lists in your e-mail marketing software. Again, this is something that we'll be covering in an additional course that goes into more detail on this topic because you can't possibly talk about all the topics that are important to elemental in one course, especially not if it's for beginners. So keep that in mind, but we're not going to worry about that too much for now. But instead we're going to continue building our page. 16. Design a contact page: In order for your website visitors to contact you, we are going to create a Contact page that allows them to fill out a form which will then be sent to your email address so they can contact you and enquire you if they want your services or your products, or if they have a question and so on. As with every new page, we now have to go in to the Pages section in a WordPress dashboard and we'll create a new page this out. We'll just call this the contact page. We'll publish it again. And then we'll click on Edit with Elementor, like we used to in the other videos. Again, same procedure. We're going to change the page layout to the canvas, right? This is going to be a pretty easy page. We'll just add in the contact form with some information. And then we'll also add in a section that has like a map of our office, for example, in it. But aside from that, there's nothing much to do is we're going to create a section, again, a full width section or like a normal section with one column. And we are now going to add in a heading to this. We're going to add in a bit of texts as well. We obviously need a formed. And I think that should be fine for now. Now we're going to add in a bit of padding to our page or to our Section 3 on the sides like I always do. And then like five top and bottom. And this should be fine as well. Now for forms, I usually want my page to be a bit smaller because as you see right here, the form just looks so big. And it just doesn't make any sense to have a form that looks that big. So we're going to go to the section and then go to Layout. And we're going to change the content width from the default width to something like maybe 900. I think that looks much better because now the form isn't that wide and yeah, it's just it's easier to read and to work through. The heading is now going to be centered in the middle. So like this, just call this contact us or contact me, especially if we want to talk about a freelancer. This text is also going to be centered. It will be a big texts. So like this. Yeah, I think that should be fine. Maybe I want to make it a bit given a bit of padding on the sides so it's more centered. So like be 15 percent on both sides. Yeah. So it looks a bit better than bit more centered. I think that is a nice way of doing this. And now we're going to edit the form itself. So in this case we want more forms than we did in the last page. We want maybe not only the name, so maybe we want the firstName and lastName. So we'll call this firstName. And the place holder might be something like John. And this is required. So we definitely want people to fill this filled out when they want to submit the form. The required field pretty much tells Elementor That's the form won't be sent if that field isn't filled out. So uses the 12 contact. You have to give you an information. Because otherwise the form will be sent. So we definitely want to check that for the FirstName. And we might want to make this into a 50 percent width because we are going to add quite a few fields and otherwise the forms just go to bed, way too big. So for the second one we're going to say lastName. And this might be something like, yeah, I could say medulla for example. And then we have the next field, which is the email address. And this is also going to be a 50% of the width. We're going to put in our email address right here. Like this as a placeholder. And then we want to duplicate that. And then in the next one we actually want you get a phone number. So if we want to get something different, we actually have to change the type of field that we want to have. Because depending on these fields, it will be possible only to enter in certain kinds of information. For example, you couldn't enter in a phone number into the email field because then warp us would recognize that it's not in the email format and that it would not accept this entry. So definitely make sure that you choose the right type. And this case, it will be the phone number. So the label, label will also be the phone. And then in this case we can just enter in any random number like this, right? And maybe in the case of this freelancer, we want to have like an additional fields. So for example, let's say we want the person to enter in their company name. So this is what we Island as well, we'll say company. As a placeholder, we might put in Google, Inc. and the Tiv in this case would be a text as well. And then lastly, we want the budget for the project, for example. So this is a freelance website, and maybe the Freelancer wants the website visitor to actually give away some information about the budget they're trying to spend so that he can better he or she can better look if the project would be a right fit. So in this case, we actually want to choose a different, a different type of input fields. So instead of texts, we actually want to choose a Select. And now we can create different values. So we could say something like maybe like $1000 are up to 1000 as like the smallest price range that we could say. Maybe like 1, 0, 0, 0, 0, 0, 0 to 2 thousand dollars as the second price range. And it doesn't have as well. Then we might have something like, let's say two to $5 thousand. Don't know what kind of what kind of what kind of sources this would be. But then we just do one more for 5000 to 10000, maybe as the last option. And now I will hit Save. And now we actually see that we can click on this and choose one of the values here from this menu. So the person entering the form will be able to enter this end. And then this form entry will actually be sent to the website or to the e-mail address that we specify. And we can see this information. I'll actually show you a screenshot of how this looks right here. So it should be on the screen right now. This is how it will look if you send this form to your email address or if someone enters and then formation and it fed to your e-mail address, for that to happen, you obviously have to add in your information here in the e-mail section. So you have to enter in your email address right here and can maybe customize this if you want to. You don't need to usually, but as long as you have email address in here, you should be fine. And actually maybe one more thing just to make this page look a bit better. How about we add an image on top of that contact me headings. So add in the portrait that we have and maybe make this into, make this like a small little portrait appear. So maybe like 20 percent of the width and half the border-radius go up like this. So go up to the max. And yeah, I think this might look even a bit better. Give this a bit of padding on the top like this. And now I think this looks quite good. And we are ready to add the second part of this page, which is going to be a map. So this might be something if you have a local branch or like I like office in your local city where people can come to or like a store, then you might want to add something like this so that people know where they have to go. For this, we're going to create another section. Will have two columns actually. So, oops, oh, just duplicate that one. And the one side we're going to add an, a map. So just adding the Google Maps widget. And then on the other side will have like some additional, yeah, like contact information. So your address and so on. Maybe you just have a text field. Having a textbook should be fine. Now we're going to add a bit of padding to the sections to make them look a bit better. So we're going to have like say 5% should be fine. Yeah, we're going to make this map a bit bigger as well because we can change the height of it. So maybe like this for 100 pixels should be, should be looking fine. And now we can actually choose a location that we want this to point to a. So we could enter in the location right here. And then it will actually show like a map preview of that location. So if I just choose Berlin, Germany, which is Berman Curry located, like this, we'll see how it actually like navigates to Berlin. I could just choose random spot in the town for you to see it in preview right here. And then this will appear like this on your website as well. So people can click on that to directly get to Google Maps. Google Maps in order to navigate to your office, for example, for the other column, again, we want this to be aligned to the middle, and we want this to be a bit smaller. So maybe we choose a h3 right here. And then we say something like come to our office. Then we might have the address right here. So this will be examples street, Berlin. Something like this. This really doesn't matter. You can do it however you want. Just as an example, you have like some random address in here and maybe even have like an additional button that directly takes you to Google, Google Maps as well. It's something you could have given you. So you could say like go to Google Maps. Obviously, you get your maps as well if you click on this, but you could add an additional button and then you can just paste in the link from Google Maps into this button field right here is so that you can actually navigate to Google Maps through the link as well. All right, that's already for our contact page. Again, really simple just to demonstrate how it actually works and how these different out of different elements work together. It's not the prettiest page, but I think it gets across how you could do something like this really well. And yeah, I hope you enjoyed it and see you in the next section. 17. Create a landingpage : All right, so now let's create a landing page for your website. Landing pages are what you use as a kind of marketing side for a specific purpose. So for example, you would have a landing page for a new product launch. For example, say, you sell digital products, you sell courses, and you want to launch a new online course, then you have a sales page or landing page for that. That goes through like all of the features and what's included and who is it best for and so on. And then kind of prompts the website visitor to take action to purchase the course, to enroll in the waitlist or something similar. There are a couple of things that are really important for these landing pages. And that's why I want to show you how I might go about building one of these landing pages myself. And I want to show you kind of my thought process and how I use different sections to communicate what I'm trying to do. So first of all, landing pages are usually about selling something. It doesn't have to be selling something that actually costs money. It could also be selling something like access to an e-mail list or a free resource. Or in other words, you're trying to get the website visitor to do a specific thing. So this is something that's really important. You need a clear call to action. You need something that you clearly want the user to do so that he or she knows what you want from them and that they go into one clear direction. Also, you need clear messaging, so you need the website copy to be on point and to reflect what you're trying to sell, to speak to the people that you are trying to sell to. And again, that doesn't matter if it's a paid product or if it's something like a free resource where you just want them to maybe like entering their email address or share something online, whatever it may be. But that's enough for the talking. Now let's get right into building your landing page. Again, this is the learning curves are actually used previously. So we're just going to rebuild it. And I'm going to show you my thought process. So we can do this by going to elemental or two templates and then going on the landing pages section. Now this is recently been introduced by Elemental. You don't need to do it like this, so you could just create a normal page pretty much, but they newly added this feature to have the kind of landing page flow right here. So we can click on landing pages and then we can say Add new landing page. Now we actually get this template library that shows us different templates for landing pages that we could use if we wanted to. So there are a lot of these templates that have been added by Elemental themselves, but we're just going to start from scratch right now. So we don't need to take a look at these. We're just going to close this out. And you can also always go back to the template spec taking on the templates button. So the first thing we'll create is like the top section, which is also the first thing that people see when they come to the website. So it's important that this is well optimized for that purpose and that you have content there that actually makes sense for people. And that kind of sums up what the pages about say. As I said, we'll just start off creating our section. We'll do the usual and that we just create this. We add a bit of padding on the left and the right, just to make it a bit more look a bit better. And then we want to add in a heading, we want to add in a bit of texts. And for this, we also want to add our logo to the top. So we'll just choose an image. We'll drag that to the top and we'll select our logo. Again, something that I've previously added to my library here. You can just use your logo just like however you want to use it. All right, and now we're going to add a bit of padding here as well. So maybe like two at the bottom and the top add in an extra heading. And we're going to align them in the middle. Just like the text. The text is also going to be a bit bigger. So we're going to choose the big textile. And then we will have one of these as a subheading. One of these is going to be like our main title. So it will get a H1 tag and also will change the size to the H1 headings, so make it a bit bigger like this. And then the second one will be much smaller and it will also be in our primary color like this. Now, we need to make it a bit smaller. So maybe we'll go with like adding five. I think that should be all right. Maybe our rearranged again, but we'll see I probably have to work a bit on the pattern here as well. So make this a bit smaller because the distances between the individual elements, which is a bit too much for me. So, yeah, we'll add a bit of padding here as well. So click on the percentage symbol right here as well. And then we'll add a bit of bottom padding, so like 22 pixels, right? And so the page that we're trying to create, as I said earlier, going to be for a imaginary free online course. Maybe let's say just about learning digital marketing would just keep it pretty generic and not do too much here because it's not about the content, but it's more about how we actually lay out these pages. All right, so then we want our titled to be something like learn to market your business online. And then this might be something like, Who is this for? So who's the target audience for this product? So this might be something like for, for business owners and marketers. Something like this for example, we might also want to change the typography and transform this to uppercase and maybe put the weight down with like 500 and also give it a bit more letter spacing, something like this. Yeah, it doesn't really matter too much, but let's just leave it like this. For this text will actually go with a bit of padding on the sides as well. Just like previously, something like 15 maybe on both sides. To make it a bit more centered. And yes, it just looks much better. All right, I think that should be fine for the top section. So this is like the introduction. It's like a short intro to what we're about to talk about on this page. Then we might have like a little kind of sales video, even if it's a free course. But you can obviously use the same kind of landing page or your setup same kind of sale proceeds page for a PE course as well. So that doesn't really matter. And we're going to create a section that has two columns. And one of them is going to be the video. Oh sorry, it's going to be a video so you can choose to play from YouTube or other content sources doesn't really matter as well. We are going in a heading in here. We're going to add in a button as well. And also we're going to add in a icon list. So what we used previously for things like contact information and so on. And in here we might enter something like your chance to grow your digital presence, something like this. Or just grow your digital presence. We don't even need be your chance thing. We just want to keep it simple, just like that, okay, now, we want this to align in the middle as well, just like we did all time for this video. Yeah, we can just keep the place all. It doesn't really matter. And for the button, maybe we'll say get the course for free. Something like this, as like a call to action because we want to give a free course away for free, then this would be what our contraction would look like. Okay, now for this, we want to actually have all of these have this little checkbox check icon. So we're just going to duplicate the first one so that they all have the Check symbol. And then we're going to add up the style. So one thing we're going to edit is the icon color. I think in this case, I actually want to do something that we haven't done before. I want to do some kind of green because it just makes more sense with these checkboxes often it just looks nicer with a green color. So I think that should be fine. And then for the text I think we might go with yeah, just keep the text style but make the topography bit bigger. So something like the big text. And then also making the icon a bit bigger. Something like this. And then we could have like the different like advantages you get when you actually watched the course. So something like create your website. And another one might be something like advertise on Facebook. I don't know. It's just really random, but I think you get what I'm saying. Get the idea. And then the third one might be something like build your newsletter. Things like this. Okay, so we've got the back basics of our landing page done and now we have like the top section, which is what you will see when you get to a page. And this is really important because this is the first impression that people get. They need to know what they're going to get into when they access the page immediately. Because obviously, people don't stay around forever. If you can't give them something that they're interested in, then they will leave your website and that's not what you want to do. So this has to be something that's right on point and really catches their attention. Next, we'll again have the lowest section that we created. So this is something that we can frequently reuse. We'll go to learn.com again, and we'll just click on edit with Elementor. And now we can just take the section that we created here again, just copy that and paste it in right here. Should be, should be fine. Maybe even again, remove the padding on top because we wanted to actually appear right when we access the page. But I'm seeing right now I think it looks a bit like this, so maybe I do want to give it some padding. I'm just looking like what it would look best for me like this, for example, and give this section a bit of padding as well. Yeah, you just need to like, try around a bit and see what works best. At. Think this would be a decent option though, something like this. Let's see. I'm not 100%. I'm a 100 percent happy with the result, but I guess we'll just we'll just go with it and it doesn't matter too much. Obviously, you can just take your time and make us look perfect. But going into too much detail in too much, refining the individual sections too much, but just make the length of this course explodes and trying to keep things interesting. And that's why I think we'll just leave it like this right next, we'll create a section that kind of focuses on problems that potential uses of this course might have. This is a common theme with these types of landing pages. So talking about a problem or several problems that your, your target audience is facing. And then going into detail on how, what you're offering is a solution to that problem and seeing how you can address these problems that they're facing. So we're going to create this problem section right here, which will be where we cover all of these different problems that people might have. So first we might want to have a section that just says, I'll just healthy title. Something like sounds familiar. And then after that, we are going to list out the problems. So we're going to have the scale, a bit of spacing. So again, same as always. I'd say top as well and bottom as well. Maybe we want a bit more padding on top and less on the bottom like this. And then we credit the next section. Same, same procedure, again, giving it a bit of padding like this and like that. And then we want to add different sections to it. So we're just going to create three columns. Sorry, just duplicate like this. And we're going to create three different columns, but we wanted to style 1 first and then just duplicate that setup. We save a bit of time. So what we do is we add in a heading. We're going to add in a text, and we're also going to add in, I think we have an icon down something like this. So right here, then the textile right here is going to be the H3. And this icon is going to be aligned to the left. Then we might want to have the, want the gift as column my color. So we want this to be like the primary and the low saturation. So this case, we want to give it the same padding on each side. So Toby, 5% on each side. And also we want 1% of margin because otherwise these books being right next to each other. So we want them to have a little bit of space, maybe even 2%. And I'm thinking maybe 2% is the better choice here. So now we're going to change the icons to the primary color. We're also going to change the text to the primary color. Just need the text color right here. And then this is going to be just the normal text color. Yeah, Perfect. Then we can add in the problems or the things that we want to talk about, the issues that your target audiences tasting something like in the case of this, in the case of marketing your business online, it would be no digital reach circulate this. Or it could be no customers coming to your shop. Or you're struggling to find clients for your for your business or whatever it might be, you get the idea. We're not trying to actually go into detail on this. So we're just going to leave it like that. The ICANN would obviously be a bit different for this, or maybe it would be a megaphone. Them like that. I think there is an I I comfort or like a speaker volume. Yeah, I could do something like this. Maybe. That's what we wanted to look like. I don't know. And then we'll change the space so that the spacing between these different widgets is not too big. Something like this. So yeah, not, not looking perfectly, but I think it would be fine. Maybe I want to do this and make it the secondary color. And I think now we should be fine. We can duplicate these just like we did earlier. And now we're going to delete the rest so that we actually have our three different boxes here. So this would be our free different problems, for example, that the customer might be facing that we are addressing with our problem, with our solution. Sorry, after we've now talked about the problems that your visitors might be facing, it's now time to suggest a solution. So we're going to add a section that talks about what it is that you're offering. In this case, the free course and how this actually helps your website visitors and your audience with the problems they're having. So for this, we will create a new section. And we'll make this a bit more spaced out than the other ones because we wanted to have this like Canada, like a dramatic effect, even. And then we have bit of padding at the top and the bottom, maybe even several pixels. Now it's 7%, sorry. And then we can start adding in our content. So what we'll do is we'll have a heading and we'll make this into a smaller heading. Actually, I think I'm going to call it something like introducing and have like a couple of dots to fill up the tension even. And we can edit the text color. Maybe we want something like the actual color of the text on the page. I think we will make this a bit smaller as well. So maybe like this size looks good. And then we will start by adding in some content for what's to come. So we'll have a bit of padding here as well, because we want this to be separated from the introduction. So we might say something like print top of ten. I think that should be fine. We're going to insert an image here. And this image is going to be like the, like an introduction to our product. So I think I've uploaded already, just need to refresh right now. All right, so here's the image that we will be using. It's just something that I have built for my earlier projects. We'll make this into a 50 percent width. I think that should be fine. Maybe even like 60 percent make it a bit bigger, but I think we don't need that much more and will also turn down the padding a bit because if it gets a bit too much, something like this, this should be fine. All right, Now we're going to add in a heading here as well. And this is where we will be actually introducing the product or the course. So we'll say the free course on digital marketing does obviously if terrible marketing, but you get the idea as always, okay, Now, we will want to add in a bit of a placeholder. I think, like in line. It's called in English here. I think it's the divider. Yeah, right. Okay. That's what I wanted to add. This is like a kind of like a little line, doesn't do much, but just display this shorted line. And we want this to be a bit thicker. So you want to say maybe like three? Yeah, this is why I want and then make this a bit smaller, even, maybe even like 7%, yeah, something like this. Make this be the blue tone right here. And then we want to have like a short text introduction to the solution. So to our course, this will be a bit bigger because obviously on this page, everything pretty much is important content. So we're going to magnetic bit but bigger. And then we'll also again the adding a bit of padding on both sides. I think even again, I'll go with 15 percent because that's just a nice amount so that it kind of aligns more to the center. I think this should be fine. All right, so this is the product we're introducing and now we'll be talking about some of its benefits. Here will be using a similar layout that we used in one of the previous videos. So we'll drag in a intersection and we want to add three columns. And then we will just have a hanging in here actually. And we want to have an icon. And it will just be an icon like this check mark I can again that we used earlier, like like this. And then the texts will display one of the benefits of the courts, for example. So we'll make this into an H for tax, so it gets a bit smaller. We align it to the center and we want to make this I can flu, yeah, I think blue would be the best California that and I think we want the spacing to be 10 as well. Now, this is This looks better. And yeah, I think this will just be the benefits, so we'll just say benefit one. So you can just write out all of the benefits of your course in here. And we'll just duplicate that three times. So will lead these. And we'll say this has benefit one benefit to, maybe we are benefit three as well. And then we could actually even duplicate that. And half like even more benefits if you wanted to. So Albert of padding in here to make these two sections a bit spaced out like this. And now we could say benefit for benefit five and benefits six. To complete our setup here. Next, we'll create a section that goes over the things that you get when you sign up for the course so that you kind of get a better feel for what you're actually signing up for. Again, a normal section is required here. We want two columns this time again. And this will be special because we need to use individual in our columns are intersections in one of the columns here. To make this layout work, Let's first start off with the first column right here. So we're going to have an image in here. We're also going to use a heading. I think even we're going to use two headings, maybe think that's better. And then we're going to use a text editor like this. And then we will have like this will be the image of what's inside of the course. So we'll just use this mock-up I created once. The color theme doesn't exactly line up, but again, it doesn't really matter that much. We'll add a bit of padding to this section. So maybe like 5 percent made it even too much. I'll just see I want to add one more padding here. Yeah, solid. Let's go with 4% padding actually. And then we want to give this a background as well. So we want to give it a background color. Maybe we'll just use something like the blue, like this low saturation blue. And obviously it doesn't really work that well with the red tone, but just ignore that for now. It doesn't really matter too much. And then we could say something about like what this actually is. So we could say the full course on digital marketing to make it fit the line on marketing. And then this like subheading will be something like 15 high-quality videos, something like this. I think that should be fine. Who again, go in and change the color. And we'll make this much smaller, I'm thinking H5. Yes, something like this should be fine. Again, we're using bold text all over this page with that because I think it just fits the whole style of the page better. So something like this. Then we need this to actually have a border as well, because it just looks better if we have a border around it, a five pixel, I'd say. And I think that should be fine for now. We'll go over and we'll actually start by working on the second column. And this is where we'll actually add in the intersection. So it will look pretty similar to this, but we just want it to be smaller because this is like the main part of the course. And then there's like some added bonuses. They will be a bit smaller just to give it some visual hierarchy and to highlight that this is the most important and biggest part of what you're getting when you're signing up for a course. So we'll actually just copy over like the content and then we'll just do some changes to it. So we'll just duplicate all of these also work. So you can just duplicate the content like this and we can drag it over here like this. Same for the image. Drag it in here. And then also the same for the text. Duplicate that, and then drag it over here. Now, obviously, it's too big right now. So we want this to be, I'm a bit smaller. We need the image to be, probably can't be four sides, so we'll go with something like 50 percent and align it to the left. And then the text will be much smaller on both of these. So we'll go with maybe like H6. And here we'll go with H three as a, as a font style. I think that's even too big, so I might even go with H4. Yeah, I think that should be fine. And then for a text style, I'll be using the H L3 level text. I'll be using the normal text style that we created. And That should be fine, right? And now we're going to create the same blue outline, like a blue background for this as well. So we'll add a bit of padding, let's say like 3%. And I don't think we need, well, we need some kind of margin. So leave it like that and I'll add a bit of margin at the padding and also add a bit of margin like this. Just one on all sides. And yeah, it should be fine. I'm guessing that we don't need this then anymore than we should be fine like this. And also, I think the spacing is a bit too much right here. So I'd say we go with 10 percent widget space. Again, this looks better. Actually, I think I need to, I need to apply the spacing to this intersection right here. So that's what I'm gonna do. I'm just going to do it like this and then remove the padding from that again because I don't think we need that. And also I think where I'm not going to apply the top padding because we want this to be on the same height so that it kind of seems aligned. Yeah, which is what we want we want to do, or right bottom as well. And think it's going to be applies to this one. The head, sometimes things get a bit messy with this kind of layout. So you'll just have to look around and see where you actually have to make your changes. But again, this all comes down to experience and I think now it should be the way I actually wanted to look. Let's apply the background color. And yeah, I think that's that's for we're looking for here. And perfect. Yeah. So now we can actually duplicated as well and give it a bit of margin at the top and the bottom one so that they don't collide with each other. And now I think we're good to go. So we have these three different sections, highlight different parts of the course. And now all you see is that this kind of section is stretched because these are just much bigger. So I think we're going to make this a bit smaller. So we're going to make the image smaller, maybe like 35 percent, just to kind of align these a bit better and that makes a bit more of a smooth appearance. And i'm, I'm also going to make this text a bit longer just because I think it will look much better. So just copy paste that again. And now I think we are where we want to be. All right, So now we're ready to change up the content of these as well, because right now they all look the same, so we could add in a different piece of content in here. So maybe we have a design. I'm just gonna choose a random one right here. Doesn't really matter though. This might not be a good idea because this is such a high photo. So I'd rather use something that I can fit into this format. So maybe something like this or like that. Yeah, I'll just choose that one for now. And we'll say like bonus life says sessions for example, as a, as an added, added feature of this course. And we might say something like for the other one, I don't know. Maybe it's that one. I like that one-on-one coaching. Hello. It really doesn't matter. You know, we're just, you just messing around here. So this might be what you want to do, could obviously also choose whatever you want your page to look like. All right, next we want to create a testimonial section. And testimonial sections are meant you give your visitors like access to people who actually took your course before or your service. And we're happy with it so that they can actually read about real people, stories or experiences with whatever you're offering. And it's really quite easy to add us. So we're going to add this in into this landing page design as well. So for design will again be using a two column layout. We'll create right here. So we'll have this duplicated and then we want to make the section color this time, so we'll give it a darker color. I think we'll use the secondary color this time. And in one column, we're going to add an image like this. We're going to drag it in right here. And this will be like the testimonial of the customer. So let's say in this case, talking about Tiktok or Tiktok marketing as a part of online marketing. And let's talk about that. And let's say that we have like some kind of statistics like right here, which we want to demonstrate what we want to show that. As a certain user or certain person that has finished our program, had good success on that platform. So we're going to insert that image right here and make it a bit smaller because that's way too big. And maybe even just by, by making this column smaller. So what you can do for that is if you hover between these columns, actually, you get this little, little element right here, which allows you to drag these columns to left and right and to resize them. And you also see this little indicator that tells you how big both of the columns now are. So we might even go as low as like 30, Five. Yep, I think 35 would be a good size. And we'll remove the padding that it has and will actually give it a padding in the section like this. So again, classic left and right padding and then also the top and bottom padding. Now on the right, we'll add in the result of this kind of case study or testimony that we had to imagine this is a client or a person that use this course to get a quite a good audience size on Tik Tok and to build his business on tectorial her business. So what we'll do is we will have a heading, like always, will also have some text like this. And we will have another heading, which will be a sub-heading. And then lastly, we'll have some counter elements. So this is something that's also available in the elemental, the counter, which counts up any number that you want. Actually, we might want to use a intersection for that because we want to have multiple counters. So yeah, I think having this intersection makes much more sense. Now you can't see anything because obviously the default styles are this, this dark black or this dark blue. So we have to change that. We're going to go into the text color and make this one white. And for the other one will make it actually white as well. But for one of them will give it a blue background like this by going to advance and, and background. Choosing the background type as classic and then going to color and then choosing this blue color. And now what we want to do is we want to give this some padding. So like this little bit of padding, maybe like seven pixels. In this case, you want to use pixels. Then in typography, we want to change the size to a much smaller size. So maybe like 16 should be fine. Yeah, I think that looks good. And now we have this full screen or full bar of blue, which we obviously don't want to have. We only want the text to be wrapped in the blue background. So there's a little trick to do that. And it's one of the more advanced features in Elementor, which is changing the positioning of the element. So you can change the width of the element. Now it takes up 100% of the Entire space. So that's the default. But we could change that to be an inland element, which means it would only take up as much space as it actually needs. So if you do that, if we click on inline, you see it only takes up the space it needs, and the blue bar now only wraps the actual texts. Now, this looks a bit cramped right now, so we'll add a bit of padding to the headline in pixels, let's say like three for example. And then we would say something like case study reaching 1 million people on tiktok in 12 months. Let's say that. And yeah, I think that looks good. And we'll have the username of our testimonials. So maybe like at John Doe, the web designer. If you don't know if it's an actual person that is called as the username on tiktok. But once they actually can type designer, no work. Okay, now it should be fine. Yeah. So this is the username of our imaginary client or imaginary course participant. And I think we'll go from there also. I think the letter spacing or the line-height for these texts is not that great. I might have to change it in the global settings later, but for now, I'm just going to change it in the topography itself. So I'm going to go to line-height and I'm just going to increase it to maybe 1.4 things that should be fine. Yeah, and leave it like that. Alright, next up we have the text. So we'll just silage to be the bold texts or the big text. And we'll also give it a white color, maybe even a bit less like that. So bit more grayish. Yeah, I think that should fine. Now, this top username doesn't have rounded corners yet, so we'll do that as well. So we'll go to positioning or sorry, we go to portal and we'll add a bit of border, like five pixels. Now it looks good, Perfect. And then we can worry about the number counters down here. So this would be like the statistics of our testimonials. So like how many followers he guards and how many counts he reached, how many likes he goes something like this. But first we have to worry about the color because we can't see anything. So we'll make the text color a primary blue, I think, and the topography will be heading one. And then for the title, the text color will be white. And we'll make this have a topography of maybe Heading 5, something like this. Yeah. And now we can say, we can go back to the content and you could say something like 50,500. And then we could go down to the title and say followers for example. And now you see how this automatically counts up to that number and tells us how many followers we actually got there. I think we absolutely, yeah, I think that should be fine. All right. And then the next one might be something else, but we'll first copy the style over so that we don't have to adjust it again. And we'll also do this for us, empty columns. So we'll have three columns. Maybe this might be, let's say this is the amount of likes, so we'll say five. And then we have the option to set a suffix. So we'll say million, let's just say Mill, because there might be shorter like this. And then down here we might say likes. And then we might say in the last column something like 500. And then for the suffix with a K. And then we'll say people reached. And now last thing we want to do is to align all of this to the middle to make it look better, we'll give it a bit more padding on all sides like this. And I think this should be fine. All right, so in order for this part of the course to not go completely out of hand and to be hours long and probably already is much too long, but yeah, we'll we'll take a little shortcut here and will only create one more additional section. Though I will provide the full landing page that I actually intended to create here and in the description down below as a download. So you can use that as well, but will not create the whole page in this tutorial because it will just be much too long. So we've gone through this part of the website now this looks fine. But lastly, I think we're going to create a pricing table. And I know, yeah, I said the cost would be free, but I just want to show you how this pricing which it looks. And we have used other widgets like you're doing a contraction and so already, so I don't want to duplicate that. I don't want to annoy you or bore you. So we'll take a look at a pricing table in elemental and I'll show you how that works. So we're just going to create an additional section like this. We always did. And now we're going to add a pricing table. So as both a price list and a price table, I will make a really big course on all of the different widgets as well. So check it out once it will be released. But I think for now, we'll just talk about the pricing table. You can check out the prices yourself if you want to. And we'll just enter that into our page. Now this looks a bit squashed, more like a bit too wide. So again, we'll change the content width from Box to a bit smaller width, somebody like 600 pixels. And the ion think that's too much. So I think we'll go with 500 and we'll change the padding of the section. Perfect. And now we can go in and actually edit this pricing table. So you could say the title, which will be probably like the name of the item you're selling. So we'll say digital marketing course for example. And then the description might be learned. Digital marketing fast, something like this. Okay? Then for the pricing will use the US dollar symbol. The price is right at that price. So there's nothing to be changed here. We could actually add in a sale price. Like a temporarily like the original price so that we have this as like the discounted price, that's possible, but we'll leave that out for now. Then you could also say something like a period. So if this is something like a membership that you're selling, you could have like a monthly period, like a monthly payment process. And so you could give that information to your users on this page as well. If you don't have something that is a recurring payment, you could use this, for example, to enter in, let's say, a 30-day money-back guarantee or so. So that's why you could use that for. All right, Now features, these are the little items in here. So these are the different things that are actually like part of what you're getting. So pretty much similar to what we added up here. So you can just fill out that list to actually add in all these things. It's pretty easy. Just add an icon and then you can add Endo texts as well. We'll just leave this icon and it is, or maybe it will. Maybe we'll change that because I like this other Check icon, much more like this. And then we'll just duplicate these. Maybe had like four or five of these. So we'll get have the list item one will have list item two will have list item three. And then maybe we'll have a list item for as broad. Perfect. Now, the footer is the button for once, so this is what the button tags actually recessed. So this would be somewhere where you put, put, put in something like purchase now, for example, and putting the link to your product through to a product page. Maybe you, if you're selling something on a different platform, link to that here. And you can also add in additional information. This is like the little text down here. So this could also be a good place to add in your 30-day money-back guarantee or to add in some other information that you might be, for example, legally required to include depends on what you're selling pretty much, but this is what you could use that for n. And lastly, the ribbon is this little thing up here. So this could say something like popular. You can also say you don't want to show this, so just remove this. Sometimes it might come with it scammed me if you have that, but some people might like it. You could also say something like recommended, for example. Now that's a great feature if you have multiple pricing plans for example. So you have like a basic version, a pro version, and a premium version. And then you could have like a recommended like ribbon for one of these. And maybe you have a budget ribbon for the other one. And then you have like an exclusive ribbon for the third one. Like this would be possible. All right, so now styling, this is also pretty easy. Pretty much the same as always, the padding, obviously, we can apply that. So to make it a bit more spaced out, I think we'll just go with like bit more padding and we'll select yes, 7%. Looks good. The background color for the header will, might use something like this, blue right here. I think that just looks better. And then the color of the title, we'll say the same. Also the topography will go for something like age to maybe yeah. And for the subtitle will go with the same color or maybe like a bit more of a I'm a gray like this. And then we'll give it, we'll give it a font style of the big texts like this. Pretty much same as always. Then for the pricing will go with the wall, just leave the background color. I think that's fine. The padding can be something similar, so maybe like 10 pixels or 10 percent. Yeah, I think that looks fine. Okay. So the pricing itself will give that the darker color. This will be a one in size than the currency symbol might be a bit bigger in size. So like this, think that looks better. Position is also correct. And yeah, I think that looks that looks fine for the period like this one down here. We're going to add in the text style. We'll give this a normal text typography and then follow these features will actually do something pretty similar. So we'll just go with, what do you want to go with? Maybe we want to have the color of these be something like blue. I think that's a bit too much. So maybe just stay with the secondary color and therefore the topography and choose the normal text. And I think the width, yeah, Should we could just keep it at 100%. This should be fine. Let's take a look at the water. This also looks fine. It usually like versus the little text at the bottom. You might also just leave that out if you don't need it. But I think we could just leave it like this and save and I think this looks quite nice. Oh, maybe one more thing for the ribbon up here. You see that it kind of doesn't fit the screen because it's too big. So you might want to give it a bigger distance from the corner. And also you might just want to like change the typography so make it a bit smaller, for example, and then it will fit better. Select this, and now it actually fits the corner and it doesn't look like to cut off. All right, that's it for this part of the course. I think this was a really extensive, extensive party, took a really long, but sometimes it just, it just takes a bit longer to build your design from scratch. So if you are then going on to design your own websites, you can already see a lot more templates as well. And also you will get access to the full landing page shoveled, as I said in the description down below. So that's it for this part and I hope I'll see you in the next part of the course. 18. The Elementor theme builder: In this part of the course, I want to introduce you to dynamic content. Up until this point, we've only worked on single pages that we had to create manually. But in order for things to update automatically, sometimes we want to use dynamic content. Think of a blog post, for example, if you publish a new blog post, you might want that to appear in different places on your website, but it wouldn't be that great if you had to put it into all these places manually and if you had two, each time you uploaded a new article, like distributed all over your website. That is just not a great way of working. And you can do that much easier because use dynamic content for that. So basically dynamic content is where the content of the page changes based on certain factors. So for example, again, if you have something like a Account page, for example, that you have, if you have an Amazon account, then the URL of your Amazon account is the same for everybody. But you see different things that other people do because you see things based on your purchases and based on your account. So the pages so same, the content is different and that's pretty much the concept of dynamic content. Now elemental has introduced a way of working with this kind of dynamic content that really easy and really intuitive. And I want to show you how to use this right now. So we're going to use the theme builder to build out our entire website, pretty much our blog, our header and footer are archived pages and so on. So let's get started right now in our WordPress dashboard, we want to go to templates and then click on Theme builder. And this is how the old theme, but I used to look like, but we now have the option to also use the new one, which is what we're going to do now. So now we're in the thimble of elemental. This is pretty much what you can do with it. So it has all these different site parts as they call it, our dynamic and that are like this by the different places on your website automatically. And you can pretty much just change how you want them to look. For example, we can create a header and a footer, which we're going to do right now, we could create a single post. So for your individual blog posts, that's the template that you would be using. Also single pages. Or we can create archives have been created search results, and also we can create 404 arrow pages, which will also do later in this course. So that being said, let's start working on the header in the next segment of this course. 19. Create a header: All right, so let's get started designing our website header. To do that, we'll first create a couple of more likely to default or demo pages just so that we have a bit more content in our header. We're not going to create each of these pages. But I mean you can, you can leave them out. I just wanted to demonstrate how the header might look with a couple of more pages in it. So we're going to go to pages. And I'll just add in a couple of pages, something like services for example. And then we might later even like ABA block, I think I think they actually leave it at that and, and more just have the blog page as well, which will design later. So do it like this. And now we can actually go back to the theme bullet. Now I actually put that open here as well. So what we're going to do now is just click on this header. So click on the plus button. And this will open up the menu to creating your own header. Now, elemental has templates for this as well. So you could get started using one of these templates and then customizing it to your liking. But we're going to do this from scratch again, because sometimes I think it's just easier to do it from scratch if you have a specific design in mind. So we'll close that out and then work and started working on our design. Creating this header is pretty much just the same as working on a page or creating a new page. It works. Yeah, pretty similar. So we can just create a new section like always, will give it a bit of padding on the sides, which is again, something I always like to do. And then we're going to get started. Now I think what I'm going to do is we'll have a logo, will have the menu, and then we'll have like a call to action in the header as well. So I'm going to create three different sections first. So I'm going to duplicate these. And now let's start off In these elements. Now, one thing that we can actually add as well, and we haven't covered that yet. But we could also add in a site logo. So if we can set a logo for the entire website, and then this dynamically changes also. So this is actually a good idea to do so let's, let's actually do that so well, adding the site logo here. Now, we haven't added in a state-level yet, so, oops. So we have to add it in first. But what we're going to do or what we're going to talk about first is actually the publisher and setting. So for headers, it's a bit different than four pages. So instead of just clicking publish, and saving the page, if we could publish, as I said, you get these Published Settings and this determines where on your website the header is being displayed. So you can display it on a single page only, or you could display it on the entire website for this purpose, now we're going to display it on the entire website. But in some cases you might want to have a different header for a certain page. So this is easily possible. For now. We're just going to add the condition to include the entire site. And that's pretty much it. Now, again, you could include also other conditions. So for example, I could say, I want to exclude a specific site. So singular means single site pretty much. And I could say I want to. Exclude a single page, Let's say the contact page, for example. Yeah, so this will mean it will be displaying pretty much on the entire website, just not on the contact page for now. We will leave this out though, because we actually want to use it on the entire site. And then we'll just click Save and Close. And then the conditions are saved. Now, you can always go back and change them by clicking on this little Save Options button here. And then you can click on display conditions. And now you have the same menu again, you could alter the way you want this to appear away, wanted to appear, and so on, right, so now for the site logo, we're going to go to the menu up here. Then we're going to go to Site Settings. And now we can go to the site identity. And this is where we can add in the logo. And now we can also add in a favicon, which is the little icon that will appear up here. So let's add that in right now. Like this, insert media. And now this will lead to update and will also be shown here. And on every instance where you use this site logo, this is the logo that will appear. And if you change it, then all of these instances also will update. Now, you can also add in a site favicon, which is the little icon that appears up here. This has to be in a square format though, because otherwise it just looks really weird. So I'm just not gonna do it right now because I haven't prepared a logo in a square format. But if you have your logo like little logo icon, I would recommend having this in here as well because it just looks more professional to have this kind of sites have econ. All right, so we're going to update the page now and then we're going to go out of the site settings and we're going to refresh this page again. And now you see that this has updated and this is now the logo that's actually being displayed in the header. Now, obviously this is way too big. So we're going to do is we'll just make this section much smaller. I'm thinking maybe like 15 percent and might even make this even smaller later on, but let's first add the other items. So for the navigation, there is a additional widget by Elemental which I highly recommend you use, which is the nav menu in order for this to work, because we want to include a menu, we have to create that menu first in WordPress. So we can add in like custom pages that we are going to appear in this menu. And to do that, we're going to go to appearance, and then we'll go to menus. Now here we can give our menu a name. So we'll call this Main Menu. And then we'll click Create menu. And now we can add in these pages to this menu. So we're going to add the about me page. We're going to add the contact page, the services page, and also the blog page. Now we'll click on Add to Menu, and now we can rearrange the order of these items. And that's important because that's also the order in which they appear in your menu on the website when, when it's live. So maybe we want the About me to be more at the front. And maybe the block should be like the third icon, something like this. I think looks good. Yeah, I think I think we can save it like this. You can also add in. Other things to your menu. So you could also add in posts or custom links. So if we had a blog post already, we could add our blog posts as a menu item as well, just to let you know or you could create a custom link. So just have like a link to a different page if you want to know all these things are possible. All right, so now let's save the menu and then let's start working on our header. Okay, so the next widget we're going to be using is going to be the nav menu. And this is a nice handy widget which elementary was created, which allows you to display the menu that we just created in WordPress directly on your website and also it makes it easier for you too, optimize their menu for mobile devices. So we're just going to drag it into the middle right here, like this. And now you see that displays the pages that we actually have created in our, in our press menu. So just like we wanted to do, I'm still not really sure about the color, so I'm going to change that properly. Let's first add in the last element, which will be just a simple button like this. So we'll go up here. Yeah, I think that should be fine. We're now going to change the color theme because I don't like the look of this. I think I'm going to make this even smaller. Like I said, I think maybe like 12 percent or so should be should be better like this because maybe we don't even want it to have too much padding. Okay, So for all these items when we wanna do is we want to center them. So we want them to be in the middle of their individual columns like this. I'll just do that right now for each of these, right? So I think I'm going to go for a different color theme this time. So I don't want the elements to be blue, but I want the background to this blue color. So what I'm going to do is I'm going to start by changing these items. So this is going to be like the call to action for the free calls that we have. So we'll call this free course and we are going to align it to the right. I think that looks better. Then we're going to change the color as well. Yeah, I want this to be our secondary color. Like this. Yeah, I think that looks good. We'll give it a solid border like always. And we also want to change it on the hover state, so we'll have the text color be the primary color, and then we'll have the background color be the see-through. So just transparent. And water color is also going to be the secondary color. Just like this. Perfect. And then also the border-radius. I'll just yeah. I think that should be fine. All right. Now, I'm also not happy about the space that this has because it just doesn't need that much space. And I think I want to align the menu to the right side. You're always free to do whatever you want here. It's not like there's any year, like best practices are, so you can just do it however you want to do it, but I just think that it looks better like this. So I'm going to align this to the right, actually like this. And I'll also, I think I want to remove this little underline. Some people like it does affect some people even like do these like framed effects for example. But I just I just appreciate it when it's simpler, so I'll just leave that out. And yeah, I think this is what I'm going for. I'm going to change the color of the text to white actually. So we're not going to see anymore, but it's just going to be for a second because now we'll add in a background color for the entire section like this. And yeah, I think it's starting to look much better. Maybe now this is a bit too small, so I'm going to change it up a bit more like this. Yeah. Again, it's not going to be perfect, but I like this Much better. Now for the topography, let's add in a bit of a bigger pie live like the button style. Yeah, I think that should be fine. And then for the hover will actually change the background as well. Select this. Yeah, I think that's what I'm going for. Perfect. All right. So that's the first part of our head are done and now we've added to our individual pages will be able to navigate our website through these links. And also we have the base URL of the sites are like learn with the NRC.com linked on this image. So this is done by default with the site logo. So I'm going to show this laser to you as well. And now we also want to link this to our landing page that we created. Now we haven't actually credit a page for landing page yet. We just have pretty good template. So we'll create a page later and call it free course. And then that's going to link to that as well. Yeah, perfect. So now we want to add an additional section to the header, which will be on top of it actually. And it will be like kind of like information. So we'll have like a phone number and e-mail address and social media links, right, so to do that, we'll create an additional section on top of that. And we'll make our basic changes like always. Great, the padding. And now we'll have two sections here actually. So like this. And we are going to have an icon list on one side. And then we'll have like prophylaxis social icons on the other side like this. So put them in right here. And now this is obviously way too big. So for this list or we want to do, we want this to be inline, so we don't want you to be stacked on top of each other, but we wanted to be inline like this. And now this takes up space, so that's good. We'll also vertical align this to the middle. We'll do the same for these right here as well. Like this. Perfect. Now we want these to be much smaller obviously because they just take up way too much space. So we'll align them to the right first. And then we are going to turn the size down massively, something like that. I think 12, maybe 15. Think that should be fine. Maybe even a bit smaller like this. Yeah, it should be fine. Okay, so now let's space them out a bit more like this. And now we want them to have our own color themes. So we're going to choose a custom color up here instead of the official color. And then we'll say maybe like a primary color should be black or like a secondary color. And I wanted to look like this. Maybe I'll just add in the secondary color and leave that blank actually. So just turn that down to be a transparent column. And now it's a bit too small, so I'm going to bump it. Backup like 15. Yeah, perfect. I think that's that's what I'm going for. I think I'm going to leave it like that. And now for the second part, Let's add in our contact information. So e-mail address, phone number, and maybe our physical address. So again, in the icon library will go to something like what's the location? So location. I've opened maybe with maps. Again, a map. Yeah, something like this is a nice, nice icon. So we'll say Berlin, Germany. And then we'll have a different light list item which will go in is going to be the phone number. So it's going to be like a random number, will change the icon again to a phone icon like this. And then lastly, we'll have our e-mail address. So we'll have some kind of male maybe envelope is better. Yeah, like this. And then change this to the e-mail address. So yellow wash at the yellows workspace.com. Perfect. All right, now this is still a bit too big, so we'll change this up a bit. So we'll actually change the color as well. So we'll make this the primary, the secondary column will also give the text a different color because that's also going to be the secondary color. And we want to make it a bit smaller. So something like like this. I think that should be looking looking good. Yeah, perfect. So now we have these two different heterosexual. But what if you want your header to scroll down with you when you scroll on the page. So you always see that the header on top, and that's what we're going to implement right now. So how you do this is by going to the section that you want to be sticky so that you want to stay at top. And then you go to Advanced. And then you can go to the motion effects. And then you can go to the section where it says sticky. And you can say top. And now this section, we'll stay on top of your scheme. Screening items. Are that right now if you go to a different page, even if you scroll down and you can say you want that only for desktop or you can do it for all different devices. So let me actually show you how this looks and one of our pages and then we'll go back and do the mobile optimization for the header. So we can go to, I think we will save that for a couple of pages. So let's go to a new page for we haven't actually added anything. So we can go to the blog page. Now you see, you see that if I scroll down, like this section disappears, but the other section stays on top of the screen like this. You can obviously do that with the other section as well. I usually do it with only like a one small section because I don't want too much space to be taken away on top, but yeah, so just to let you know how this would work, okay, so let's start off with actually optimizing this header for mobile devices as well. Because I know that's something that might be a bit or challenge for some people, especially when you're starting out. So let's go to the tablet view. So go to responsive mode, go to tablet. And now you see it does look a bit weird right now. And we are going to fix this. So for the top section, it doesn't look weird because this part is going into two rows and we want it only to be in one row. So what we have to do on this you is to make this column a much bigger answer that it actually fits in one row. So maybe like 70 percent. Okay. That's still doesn't work. Maybe like 80 percent or just check. I like 75. Yeah. So 75 percent works. All right. So now we have to change this column up to be like 25 percent. And I think now it already it is looking much better. I think I might just leave it like that. Yeah, okay, So now let's start off with the next column. So this is a bit too small here, the logo. So again here we want to increase the size of the column. So maybe like 35 percent. Okay. That's much way too much. So maybe like 20 percent. Okay. Yeah. I think that looks much better. 20 percent should be fine. Then maybe I'll add 70%, uh, sorry, 50% here. And select the button actually gets a bit more space as well because the buttons also like crammed and the text goes into two lines. So we might want to give it a bit more space. So let me write it 30 percent. Yap, perfect. And now this actually looks white Nyos. One thing you might have noticed is this little hamburger menu right here, which if we click on it, it actually expands the menu. And it does look a bit weird, but now because you see that it expands the entire header, so we'll have to fix that as well. And also, I don't like the alignment of it because it's just like sitting right in the middle. So what I might want to do is to align this to the right here as well. So we'll go down to, toggle a line right here, and we'll click on right. So let's start with actually being aligned to the right side. And also I want to align it to the center because if you see that It's like saying the top but not centered vertically. So we might want to do that as well in the middle and it should be working. I think maybe there's some padding applied or maybe it's just like a bug in elemental. Yeah, I don't know. We'll we'll just start out by actually optimizing the in-app menu. So the colors also a bit weird because you can't really see it on this screen, but we'll not worry about that too much. Let's start by actually optimizing the page. So one thing you can do to fix this issue that the menu is popping up inside of the header is by going to content and by turning on this full width section right here, like this. And now the menu is actually being displayed below the header, which is actually what we want to do. Now for the toggle button itself, we want to change the styles that as well. So maybe we want this to have a color, something like the darker blue, but maybe even I might even want to do that for the background though. So maybe I'll do it like this and then make this white. And no, Okay, So I'll leave it like this I think gets at this should be fine. Just turn that back down like that, like that and maybe just increase the size of it. Yeah, I think that should be should be working fine. So something like this also. This is something again, where you have to play around a bit. You have to kind of see what works best and what looks the way you want it to look. And then you can, you can go from there. This is like a salad I usually or often use. And I think it's already looking quite good. So I don't think we're going to need much changes here. One thing I want to change though, is how this sub-linear looks, because right now the color theme just doesn't match our colors. So we want to go to drop down and we want to change the styles here. For the text color, we will go with white, probably for the background. We'll just adopt that to our primary header like this, so make it blue as well. And then the typography can actually stay the same. I might just change the hover color as well. So for Obama, I might make the text background this dark, this dark blue again. And I'll keep the background as our primary color. So like this. Yeah, perfect. So that's that's what we can do. Also, maybe the collateral be a bit more distance between these different items because they feel a bit like crammed together. So I'm just going to give them a bit more padding to the side, like maybe 25, oops. And then also bit more vertical padding like this. So maybe like 15. And I think that should be looking good. Perfect. So now we've got this optimized for our tablet as well, and we can go on to our mobile device. Now here you see how this will look when it doesn't fit in any way whatsoever. So this is where we have to get a bit creative to make it fit, to make it work out. So one thing I like to do in these kinds of situations on mobile devices to actually just hide the top section. So it just doesn't show up and all devices. Because I think it's extremely hard to optimize that for mobile devices and to make it look good using elemental. So I'll usually just go to the section and then I'll go to responsive. And here you can actually toggle on if you want the section to be seen on a certain device. So I can just go to Hide on mobile. And you see how like grays out in here, which means it doesn't, it's not shown anymore. And if I toggle that down or sapphire like hide the panel, you see how it disappears. So this is how it will actually look on mobile devices. It also looks terrible, but now we can focus on optimizing that part and we can leave out like the additional top menu. All right, so for the next part, we will go with the logo first. So this is obviously way too big. So we might give it like again, 20 percent or 25 percent width again, will give the entire section a bit of padding on the left and right. So we have like two or three pixel, 23 percent, sorry. And then we might start by adding in the course and the menu, like the toggle menu in this case, because the logo is so big, I think I might need to, yeah, I might need to cram these things in a bit. So I will use this logo and microcycle bit smaller, like maybe 40 percent. I think that's already too much, so maybe 35. And now what have we got left is 25, yeah, and this is 45. So we've got 40% with left for the button. Yeah, So now you see it is a bit tight, so we might have to give this bit less space. They would like 25s. Well, and then we'll have 50 percent here. And we'll also just make the button much smaller because you definitely through that on mobile devices would just put in fed like that. So the topography will be a lot smaller, maybe like 13 second at this. And we'll also work on the padding. So we'll make this much smaller loops. So we'll give it like a bit of padding like that. And now at think we can yeah, we can remove the space as well because now it has gotten much bigger. So maybe like 50 and 25. And again, what I recommend you do on these types of occasions is pull out your phone, go to your website and see what it actually looks on your phone while you change the name, because that's where you actually see how this will appear in elementary, it's sometimes hard to judge how to actually look because it's not exactly precise. So it's not like exact one-to-one translation from her. Look, the're on your phone. So just do that and check out how it looks and then you can go from there. Okay, But now I think we actually have gotten this through a pretty decent point. I might get this section like 1% padding on the bottom and top like that. And now this should be looking fine. It's a bit small but distributed definitely fine. Maybe like 100% padding. Day that. And now we're good to go. Now you see there's a little bit of space between the the actual header and the drop-down menu. So what we can do for that is we can go to the dropdown and we can change the distance like this. So now it should be, there should be no space between, so it doesn't look weird. And yeah, we're finished. Perfect. So that's it for our header in WordPress. In the next quarter, we're going to do the same for our footer as well. Yeah. So I hope I'll see you there. And yes, you in the next section. 20. Create a footer: So after we've trained our header in the last part of the course, we are now going to create a footer. So let's get right into it. It's pretty much the same process and it's just a different part of the website. So I'm not going to go over all the content concepts in that much detail. You can go back to the video to see that in more detail. But yeah, we're now going to go straight into designing our footer. So we're going to go to templates. We're going to go to Theme builder, and then we'll go to the new theme below. So now we see the halo we created in the last video. But now we want to go the footer and then we can go to add new. Again. Here we have the option to use one of the precreated footers wanted to follow templates by Elemental. But we are going to do this ourselves. Again. You can do whatever you want. You can also use a template. But sometimes I think that training from scratch teaches you a better and also is sometimes much easier to do than using a template. So we're going to close it out right now and we'll start by working on our footer. Again. We'll just create a section like this. Maybe we can create a two column section in the first place because that's what we're going to do. Then we'll add our padding like always. Now we can get started creating the section. Now what I want to do here is to create like a overview over the entire website. And I'll also have like a small section that talks about yet what this website is about. So I'm going to add in the site logo on this part of the side, so like this. And then I'll also add in a text editor below that. Now the entire foot is also going to be in this blue color. So we'll go to a classic background type, choose the color and use our primary global color like this. And now we can go over the display settings because we want to actually save off water. And this is just the same as last time. We're going to add a condition to include it on the entire website. Again, you could do a different photo for different parts of the page, but for now we'll just have one for the entire site. Okay, so now go to Save and Close perfect analogy. Footer is saved and we can start working on the individual parts of it. So this is much too big and I think I'm also will need more sections, so are actually duplicate that like this and maybe we'll have like four sections. Yeah, I think that should be fine. Then I might change the text editor to be a different color. I'm going to choose white because I think it's just the simplest and yeah, perfect. So now I also want this to have a bit more padding on the bottom and the top sled just looks a bit better like this. And this. Think of this as like a description of the website. So something like I'm a freelancer working on the digital marketing of cool brands. Sounded like this, for example. Yeah, Perfect. Okay, and now these actions are going to do is we want to have lichen. Overview of all the pages. So what we'll add is a little heading, and then we'll add an icon list. So we want to add cyclists, but we don't want to use any icon's about for now, so we will change that around in a bit. So there's not going to be in H2. Well, 20 years from like an H for maybe you've even in H5. Yeah, I think that's that's better. So it gets much smaller. And also the text color should be something like white. Yeah, that's looking better. Okay, So now for the icon list, we're actually not going to need the Eigen, so we'll delete these and we are going to delete the icon as well so that the element actually is being aligned to the left, just like we wanted to do. Okay? So now these are going to be like of different pages of our website. We obviously don't have that many pages. So just just imagine that we had more pages on our website so that I can demonstrate how this would look maybe. So for example, you could have something like about me. And then you have like different parts of the websites of FAPE for, for example, you'd have about me as a page. Then you might have something like my portfolio and you might have something like my certificates. So yeah, Something cycle along those lines. Then you will also have that for other pages as well. So we'll change the style first. We'll go to the text and we'll actually change the text color to white. But maybe yeah, in this case, I will decrease the visibility event because that's just better for the visual hierarchy. And these are going to be, these will have less, less spacing again. So something like 10 maybe, or even like 0. Yeah, I think finding this case, then we'll actually just duplicate that two times. And we'll delete the other columns. Now, if you're wondering why I actually create these columns all the time and then I'll delete them. Well, it's because I want to actually see how the individual cons would look if there were three of them. So if I'm working on one column, you know, and I wouldn't have added in these additional columns. I would not really see how the rest would look. So I can demonstrate that right now. So if I delete all of these again, like this, now I wouldn't be able to see how this actually looked if there are additional columns next to it. So I like to have these columns all the time, even though I'm going to let them later on because I just it just gives me a better idea of how it will look when there are more columns there. All right, so now we need to change things up a bit. I think I'll also add in like a different part of the page. So maybe like this would be the services part and then we'll have like different services pages and Yanukovych to credit them all. But like this, maybe web design that we have, something like social media marketing, email marketing, and so on. Thank you. I think you get the idea as well. So. Just having these different pages for the different services to like give an overview of the entire site. Now, I don't like the alignment of these items because this is just way too big and these are like way too small. So what I might be doing, and I might be actually giving them less space and giving this section more space. I'm just thinking, what if that would be a good idea? So maybe we'll give them all like 20 percent space. And then the other section is going to get the last 40%. Oops, that didn't work out like I wanted it to. So like this, 20 and then 20 here as well. And then this got 20 as well. Perfect. All right, so now we'll make this much smaller. So we'll change the width to something like, I don't know, maybe 50 percent and will change the alignment to the left so that it lines like this. And also I think we'll need some padding on the side because now it's too close to each other and it looks a bit weird. So I might just add a bit of padding like this to the right. Maybe we'll do 30% or maybe 25 percent and then increase the size again a bit because now it has been getting smaller. Think like this. Yeah, I think that should be should be looking good. And I think we can actually leave it at that. Okay, perfect. So now we've got our footer and WordPress. And now what we can do is what we always need to optimize it for mobile devices. But in this case, I'm not going to show you all of that because it's just because it's just the same as we already did. So you would like you'd see, Look, if this is too crowded and then maybe if it is, then you can go in here and give it a bit of make this bigger, also make this bigger like that. And then, for example, do the same here as well. And now the mobile view is pretty much optimized, something like this. Obviously you can play around with that. You could make this 100% of the width, and then you can have these three sections in line here. It just doesn't really matter. But if you watch my videos previously on how to optimize these pages for mobile devices, then you'll have no problem doing this yourself as well. Couldn't go into the mobile view and you already see it already looks quite good. So you can just make a changes if you have something that you actually want to change, but I think you could already leave it like that if you wanted to. So last one we actually want to do is now we actually have a header and a footer. We want to go back to our pages where it disabled the header and the footer in order to actually see it. So we'll go back to our pages and we'll go to the About Me page for example. Because right now you see we still don't see the header and footer because we've disabled it. And if we go to Settings and then go to elementor canvas and change that to the default again, you see the side will refresh. And now we've got the header and footer, just like we want to have. Perfect. We'll do the same thing for the contact page as well. So go in here and go to Default like that. Perfect. And also you see Flores also at the bottom like that. And now lastly, we'll do this for the homepage of our own. So on the homepage, we'll just go in and we'll create the same changes like that, goes back to default. And we'll have our header and our footer. Perfect. All right, that's it already for this section of the course. I hope you enjoyed it and I hope I'll see you next one. 21. Create a blog page: In this part of the course, we'll be creating a beautiful blog page for your website so that you can publish your articles on your website if you want to. Creating a blog in Elementor is really easy. And this and the next sections of the course, we're going to take a closer look at how you can do this and how you can design all the different parts that are necessary for you to credit beautiful block. So we'll start off with our blog page and we'll get into that right now. So what we're going to do is we'll create some dummy blog posts. I'll just going to show you how you could do this for one and import a couple of more blog posts that we just have a couple of proposed to work with. And then you can like obviously import your own blog post as well if you want to. So how we can create blog posts in the first place is by going to post and then by going to the Add New section. Now this is pretty much the same type of editor that we have for the pages as well. So we can add in our title up here, and then we can add in the content down here as well. And what we're going to do for this is we'll just use a text generator, a dummy text generator. So we'll use this Lorem Ipsum site to generate some Lorem Ipsum dummy text that we can use. So we'll copy that and then we'll go into our posts and we'll just add this to all the posts that we create will change the title up. So we'll have different titles will say something like how to build your website might be one article. Again, in my case, this is just dummy data, but if you have actual blog posts, you can always use them as well. And then last thing what we want to do is we want to add in a featured image as well. So this is important because it allows us to actually have like an image associated to our posts. So we'll just choose one from a library for this purpose, it doesn't even matter, so we'll just use a silk simple like dummy post. And then we can save the article and do this for a couple of more articles and then I'll get back to you when I'm finished, right? So now I'm finished importing this demo data. So now I have these six just dummy posts right here which I can, we can use to design our page. And how we're going to do this is we'll go to the pages again. And then we're going to go to the blog page that we credit in one of the last videos. And we'll just go to Edit and then Edit with Elementor. So this is going to be the page where your blog posts are going to be displayed. And it's not the page where you will actually read your individual blog articles. That's what we're going to create in the next section of the course. So now we'll first, yeah, worry about how your posts are being displayed. And for that we'll create a new section as we do always. Now we're going to add the posts widget from elemental, and we're just going to drag it into this section right here. And as you see already, it automatically pulled in all of the different posts that I've created. And it should do so as well on your pages. So now we can start by actually styling these posts. Now we want them to have a bit more padding on the bottom and the top because it just looks much better. I think. And then what we can do is we can go into the article section actually. And we'll change the skin firstly. So we want this to be at the card skin because I think that just looks much, much better. And yeah, let's, let's, let's go over some of the customization opportunities are possibilities that we have here. So first of all, we can determine how many columns we want to have. So right now we have three columns, as we see right here. And also we have six posts per page. Obviously we can change it around. So if we said we wanted to have one column only, you see, we have all these articles blow each other. But usually three columns is the way to go. Yeah, the most common layout, I think now if you want to have more posts per page, you can do so like bumping up this number. What happens to the posts that aren't displayed on the page anymore? Well, I can show you what would happen to them as well. So if I only want to display three posts, then the other posts just aren't shown. But I have the option to add in the page nations. So if I turn that on, you see we have different pages and if I click on the second page, then the other articles would be displayed as well. So that's what happens when you have more posts than are actually being displayed on the page will turn it off for now and we'll go back I'm sorry, turn off like that. And we'll also go back to having six posts per page because that's what we want to work with right now. Now we do want to show the image because I think that's just looks nice. I think the image size could be a bit bigger. So maybe we'll pump that up to like a 1000 so that the quality is much better. One thing that is important with websites is low time obviously. So you have to keep that in mind when you're displaying these images in this high-quality because yeah, just drags down the amount of time your website takes to load. Yeah, we'll not worry about that for now. That's something that we'll cover in additional cores probably here we want to add some additional changes so the title will always see what your show that the excerpt here is also something you want to show. We can also show like the date and the comments. And now as we don't have any comments, I think we'll just turn them off because we're just not going to include them into our page and leave it like that down here. We can have this Read More button. I think that's fine. We can leave it like that, right? So the badges up here, they can be used to display categories, for example. But since we're not using or not using categories in this, In this course, we'll just leave them out. It's pretty simple and probably have also additional continent that as well. But for now, we don't need any categories and so we'll just leave it like that. And also, I think I want to hide the avatar because we're not have a, an image in here. And this could be used, for example, if you want to display the author of the post on the blog page. But for us, we'll just leave that out for now because it just looks nicer without OH, like that. So okay, perfect. And now we can update it. All right. Now one thing I just want to quickly show is that you can actually use a query you right here. And this is. Bit of advanced stuff so you don't need to worry about it right now if you don't want to see what it allows you to do is to determine what kind of articles are shown here depending on different filters that you set, for example. So you could say you want to include all of the articles written by a certain author. So for example, in my case, that will probably be my yeah, yeah, nanosatellites, workspace.com, author or account in WordPress, something like that. Or you could also say you want to include only post from a certain category. But, but again, we're not going to talk about categories in this course. So you don't have to worry about now. Okay, so now we'll just click Update and then we'll go over to the style tab to go over some of these styles settings. So I think the columns gap is maybe a bit too big. You're going to flex 20. And also for the rows gap, like like 24, the gap. Okay, So we'll justice to 30 and then 20th. I think that should be fine. Yeah, Fall card. I think that the background color maybe we'll choose like a really light gray, but don't think that looks good. So we'll probably just keep it as wide as it is. And we'll give it a bit of border-radius of five pixels. Think that looks good, just like we do always. And then for the metal box border color, we'll just use the texts low saturation value. That also should, should look fine. Now for the image, I think the spacing on top is a bit too much. So maybe we'll be, we'll put that down to like 0 and think that should be fine as well. And then we'll go on to the content. Just go over like quickly go over the content elements are pretty much the styling is the same as we always do. So would have something like the title color. Maybe we want that to be the secondary color like that. The topography maybe like H3. But I think that's even too big. So maybe we'll go maybe we'll go with yeah, I think that should be looking fine. We'll just leave it like that for the excerpt. We'll actually make that be the normal text size. Then we can also like the spacing is a bit too much. So again, we'll turn down the spacing to maybe like 10, something like this. Again, I'm just going over that really quickly. I'm not really going into too much detail on the individual styling elements because I think by now it should have been children clear like how you can actually style your pages and how it actually works. So I'm just going to go over the things real quick and then maybe it increases the side of the Read More button a bit. So we'll give this jacket, but because it's like a topography, the button style, and maybe we wanted to be a bit bigger even. I think the, I don't want it to be like capitalised, so I wanted to be the default. So let's take a look. Maybe we'll increase the size a bit more. No, that's too much. Okay. So we'll just leave it at 16. Something like that. Should be, should be looking fine. Or we haven't covered the little Meta information down here so we can. Go into that as well. Maybe we'll want to have like small text. Yeah, I think that should be fine as well. And now you see we have created our blog page. Now I want to show you how this actually works now and how we can actually click on these pages to get to the individual blog posts. So we'll go back to the page. And now we can go to the permanent option and then just click on that link here, for example. And now we actually get to the actual page and we can click on these little read more buttons can also click on the image. And if you click on that, you see we get to this post page where we have our post content. Now you see this page hasn't been designed with elemental yet. So that's what we're going to do in the next segment of the course. But just so that, you know, like this is how the blog posts work. And now we have this beautiful blog post page where we can like add in our new posts. And the beauty of dynamic content is that this page now will automatically update if we added a new blog article. So that's something I want to show you as well. We'll just go back to our dashboard, will go to posts, and we'll go to Add New. And we'll just say something like test demo post, right? And we'll just paste in a bit of a demo content here as well. We'll give it a quick featured image, like just choose anything like that. And then we'll hit Publish. And now if we go back to our blog page and we click on Refresh, we actually see that this demo post now appears right here as well. And we didn't have to manually add it into your page. It just updates like that. And that's nice because now you can, even if you don't know how to build websites with Elemental, which you obviously do now, but if you working with someone else on your website, he or she can easily write a blog post and it doesn't have to worry or she doesn't have to worry about where this post actually appears in. Like you don't have to manually add it to the page because it's just there like that. Optimizing this type of page for mobile devices is also really easy. So again, I'll just quickly go over this as we covered something like this already. It's pretty simple because these posts actually like resized pretty well. So as you see on the tablet page right here, I don't even think we would need to optimize that to be honest, because it really looks, it looks good already. And also, if we go to the mobile view, just the same. So like these cards really respond well to resize in Greece, they just changed the amount of cards that are in one row. So yeah, you can, you can obviously go over this and like make little changes to really adapted to how you want it to look. But it's basically already done for you. And that's the beauty of elemental, right? So that's it for the blog page. In the next part we're going to go over how you can create the individual post page. The one we saw earlier which we haven't optimized, that we haven't designed yet. So we'll cover that in the next part of the course. So see you there. 22. Design a blog post template: All right, So nice time to build our single post template, which we can easily do using the theme builder again, in Elementor, we'll start off by going to templates, then going to the molar again, just like always. And now this time we actually want to go. First, we'll go to the new thimble up because it's just nicer to use. And then we'll go to single post. And then we'll click this little plus icon again. And we'll get to the single post template editor. Again, we have these pre-made templates which we don't want to use. We'll start from scratch like we always do because it just, yeah, much easier. So there's a couple of posts specific, like widgets that you can use an elemental. And I wanted to show you some of them yeah, in this video. So we'll start off by creating like the first heading section like this. And remember this template will appear every time you click on an individual article on your page. So keep that in mind. And yeah, so that you'd like don't add anything that just doesn't make sense to be on every single post page. So we'll first create a little heading section, which will be half of which will have a darker background. And we'll give it a bit more spacing again. As we do all the time. Maybe like a bill on top and bottom as well. The 5% should be fine on all sides. All right, and now we can add in like some elements to it. So the first thing we're going to add is the post title. So this is actually the name of the posts that we're looking at. And you can see this right now because it's not, it's not white, so we'll do it like this. And then we're going to align it to the middle. And I also think that the size of the bit too big. So maybe in the topography settings will turn it down to maybe like the h2 style, like that. I think that should be looking fine. All right, and what you see here is the demo posts. So right now we're previewing the demo post and we're using the data from the demo coast as an example for this page. So just always see will change based on what article you see. But it's always nice to have like a, something to test it worth to see how it will actually look. Next thing we want to add is some post information. So that's what we're going to add below it. And we're also going to be aligning it to the middle. Now this is pretty much like information about the post, so we can change what we want you to be displayed here. I don't think we want the author to produce lead. I think we'll just keep it at the keep the date and maybe the time, but we also don't need the comments. Maybe we want to add something different as well, but yeah, no, I don't think so. We'll just leave it as date and time and then we'll change the style of this as well. All right, so we'll give this text a different color. I think we'll just use white, but we'll also like make it a bit lighter as well because I think that looks better. Again, this isn't best practice. You should use colors that you include in your design system. I'm just going to real quick right here, quick and dirty. Sorry. Yeah, don't don't do this on your own website. Instead, use the global colors. All right, so for the typography, I think that should be fine. One and change the icon as well. So I think that should be something like maybe like white. Yeah, I think that should be fine. Maybe increase the size of these icons a bit like that. Maybe have it be a bit more indented like that. Perfect. Okay, so now where do we want to display this? We obviously want to display this for all singular posts. So singular in this case is like the post type, the longer post type, we want to display it for all individual posts. So we'll just click on save and close, and then we can go on to design the other parts of our website. So next we'll have an additional section. And this is where we want to add in our feature image like that. Now, this will load in the featured image that we chose earlier. And one thing we're going to do is we'll also will make it smaller because it's just way too big. So maybe like 50 percent of the width. I think that should be, should be better. And work off this section cutting again, like all the time. And in this case, I actually want to do something different, I think. So what I'm going to do is do a little trick with the margin and the padding to move this, this element out of this box and to make it a bit, make it overlaps a bit with the top section. And for that to happen, I think I need to give this a bit more padding as well. So maybe like 8% or seven should also be fine. Probably dad or no, maybe, maybe, maybe even a little bit more because I don't want it to like look weird later. So what do you like that? And then for this, for this element will actually go into advance and into margin and then percent. And for the top margin, what do a negative margin like that? So see how it like now overlaps the top part of the, the top section. This is actually what we want to do. And now we've got this like, Yeah, nice effect where the image actually overlaps into the post area that you can't really see the border between the image and the other white part right here. So what we'll do is we'll also apply a bit of a border, I think in a box shadow to this box. So this is like a shadow around the entire element. And we can change this up so will not make it that dark. We'll make it a bit lighter and will also make the blur a bit bigger like that. Maybe yeah, maybe like that. Maybe even make this a bit lighter, still. Something along those lines. Perfect. And now you actually see the difference between the image and the other part of the site. Perfect. The next section we're going to add is going to be the post content actually. So this just pulls in the content from your actual post into this, into this website. And since this is way too wide, I'm actually thinking about just making this entire section smaller. So maybe something like 900 pixels or maybe even 800. Because you always want to like make it easier to read for people and having a smaller post width. Just, yeah, just makes things easier to read. Now we also have to change up the image width again. See this is like always like it was kind of trial and error. Maybe you can make it full width. I think we'll just keep it add like 75 percent, something like this. Should be looking fine. Perfect. So this is our post content. You always have images in there as well, so we just haven't added any, but we'll go over the, the WordPress editor later as well in more detail. This is just our post content for now. Next we'll add in a sharing sections. So imagine somebody reads through your post and then you want them to share the post to social media. A mentor gives you a really easy way to do this by introducing a share widget, which is really easy to implement our show you how that works right now. So it's that one right here, the share buttons, and we're going to implement them down here. Now we want to change the colors of these actually. So we'll go to style and will actually change the color from official to a custom color theme. And more adapt that to our theme. So we'll make this blue color. And I think that really should be looking fine. And now what actually happens, which I'll show you later as well, is when you click on these buttons, you actually get redirected to the different social media networks. And you can automatically share the page that you're on. So the blog post to your social media following. So people that read this article on your website can easily share it to their social media accounts as well. Next, we'll add in the author widget. So the Orthodox like that. For this widget to work properly, we need to add in a bit of information to our profile in WebQuest. So I'll show you how to do this as well. We'll go back to WordPress or go back to our dashboard. And here under users will go to all users. And this is where we see our user accounts that has been created. Now we can edit that. And now we're going to add in some information that we can then display in the author box on our posts. So I'm just going to enter in my name. And I'm also going to enter in a bit of information about myself. So I'll just say I'm Janusz and I like to create websites using WordPress and elemental. Okay, so that's just a real basic information here. You can also add in a profile picture, you have to read through gravity though. So again, something, I won't be going into more detail now. But just imagine that this is also the profile picture that then will be displayed in here in the author box. So now if we save this profile like that and we go back in here, refresh the page. We now actually see the information has been added in here. And for the last sections of this page, we're going to add in both the post navigation and then we're also going to add in the posts again. So post navigation and we'll probably add a bit of spacing here as well because it just looks bit crammed. And yeah, I wanted to look a bit better like that. So maybe five pixels, 5%, sorry. And now we're going to look at the post navigation. So the post navigation allows users to navigate between your blog posts. So for example, Yeah, you can click on the previous post and also the next post. Now obviously as the posts that we're previewing right here is the last post that we added. There is no next post. So what we can do is we can change the posts were actually previewing by going on this little Settings button right here. I'm going to preview settings and then just go into a different posts. So I think I credit one on landing pages. Yeah, the perfect landing page. Then click on Play and premium. And now you see how the entire content is being changed because we now previewing a different piece of content. And now you also see that now we have a next post because now the demo post is the next in the order that we credit them in. Now we'll quickly optimize this as well, so just make it look a bit better. We'll have the label be a secondary color. Yeah, and full typography. We'll just do H6 maybe. And then for the title, we'll make that into a normal texts maybe and give it a text color as well. Something like this. Yeah. It doesn't look too great, but yeah, you can always play around with the settings here as well. It doesn't really matter too much. Just know that you have all these options available to you. You can change the different texts and you're also, you can change like the arrows. So we can change the size of this arrow. You could change the gap between the arrow and the content. And we can also change the borders, like the ball in the middle like that. Next we want to add in like two actual posts that people can click on if they want to read additional things on our website. And all we can do here is we can go back to our blog page and we can actually choose the post switches from here, copy that, and then just duplicated into here. So paste. And now we've got this widget and here now we can add a new section which we don't want. So we'll just drag it out of here and into the section that we already have like that. And we'll read a section at the bottom like that. And now we have to change up how this is actually being displayed. So we don't want three posts in one row to be displayed because that would just be too much for this, for this occasion. So we'll turn down the columns to two. And I think that should be fine. And also we don't want six posts to be shown down here, right? So we just want the user to have some options to click on additional blog posts and to read them. But we don't want to have that many because it might just be confusing and too much. So we'll turn down the posts per page and all the way to two, so that we have two additional posts here that people can click on and that people can view. So now you might be thinking, why can we click on the post that we already are looking at right now? And that's a valid question because right now we're on the perfect landing page and we could actually click on that again, it down here. And that's obviously not what we want to do. So what we have to do instead is we have to exclude that from happening in the posts option. Now that's why we can use the query options that we talked about earlier. So we can click on that, can go to exclude. And we can click on this little exclude by Plus icon and say current post. And that means that the posts that we currently are viewing cannot be displayed in this section down here. So if I click on that, you see it refreshes and the post is being replaced by a different post that were not visiting right now. And this will be the same on every single post that you've used. So you won't see any duplicates here in this section. So just to make it look a bit nicer, we'll also add in a heading up here, or just go up here and add in a heading like that. And we'll make it like an h3. And we'll say something like keep reading. And then you can see the additional articles which you can click on and keep reading like that. All right, now again, we'll add in a bit of spacing at the top just to make it look a bit nicer like that. And now I think this should be looking good. All right, on the bottom, we also have to add a bit of padding because that just doesn't look nice. So we'll go up here, go to Advanced, and add a bit of padding to the bottom as well. Perfect. And now we actually have our post template designed like that. They will definitely want to optimize these for mobile devices as well. Again, just take a look at the previous parts of the course. I talked about that in more detail. So I'm not going to go over that right now because it would just be too repetitive. If you have any questions, please let me know and I'll be sure to help you out. But I think that should be pretty self-explanatory. And I think we've covered how to optimize pages for mobile devices in great detail in this course already. So, yeah, I think you'll be able to figure that out. That should be it for this part of the course. And I'll see you the next one. 23. Create an archive page: In this part of the course, we're going to create an archive page for our elemental website. Archives are a feature of WordPress and they are displayed in various different circumstances. I wanted to show you an example of this. So we're in our WordPress website and if I go through the actual page and then go to our blog page, for example, just click on one of the article. We added this Meta information right here, which shows the date that the post has been published. And this type of information is clickable in WordPress, which means we can click on this. And now we are on the archive page for this specific day. And these are not pages that you have to create manually. They are automatically created by water, so generated by WordPress. And we can actually alter how they look. Because now we see this is the default page and we can change this to fit our actual layout and a hostile and our branding of the website. In order to do that, we are going to go back into our dashboard and we will go to the templates. Then we'll go to the theme builder, and we'll click on the new theme, theme world as well. Here we can go to archive and then click this little plus button to create our own archive. As always, we see these templates we're here, but again, we'll not use them for now. So we'll just click Close and we'll design our own archive. Now, again, this is a bit different than like the posts page for your block because this can be for different purposes. So it could be a date archive. It could also be an archive for a different or a category or a taxonomy that you created on your website. Now keep in mind that this is different than the post page because this will be displayed, as I said. For example, for Meta information like the date, or also for things like tags or categories that you create on your WordPress website. This is why we don't use the posts widget will instead we use the archive posts and also the archive title, or create a section first. And we'll give it our classic padding as always, like 3, 3% on both sides and maybe like a bit of padding on top and bottom like that. And now we'll just add in the archive title. And we'll also add in the archive posts. Now we'll make this a bit smaller. So we'll make this will give us a topography of how we'll use the H2 heading style like that. And now this is what our icon will look like. Now we're going to save it. And as a condition, we'll say, we'll want to include this for all archives. Now actually right now, the archive just displays all of the posts that we've created. But I'm going to show you how this looks when we have a specific query that we want to filter for. So we'll check that out later. But first of all, make sure that the archive title, if you click on that actually in the settings right here, that the include contexts is turned on because if we don't, then we don't know the context of this archive. And if we turn this on, then the archive title will actually dynamically change based on what kind of archives were looking at at the moment. All right, so now what we want to do is follow the ICA archive posts. We want to change them to look a bit more like the posts. We have on our normal blog page because we just want the design to be similar, to want to change the skin again to the cart skin because that's the layer we used earlier as well. And that's just allowed that I personally like the best for these posts. Now, the image size is going to be a bigger again. And then we want to turn off these additional additional information. So we will remove the comments, will also remove the badge and remove the avatar like that. And then we can go on to style the page. So for the column gap will say 20 years then for the rogue AP will say 30. And now let's go on to style the cards, the border-radius, I'll say five pixels again, like always. Box-shadow. Yeah, we'll just leave it on. I don't think we need to start anything else here. We'll go on to the content. The title will be our secondary color as usual. And then we'll do the H4 style for the heading. For the main information will make that this little light, light gray. And I think the topography could be something like the small text click. That looks good. And for the excerpt, we'll make that have the text color and the topography can be normal text style. Perfect. I think the spacing a little bit off, so I think we're going to change that up a bit. Yeah, 10 right here should be fine. Maybe for the image, we'll do a little bit less of spacing and roll maybe even 0. Yeah, I think that should be fine. They're going back to the content. For the Read More button will say, make this the primary button and we'll change the style to buttons like that. And now I think this looks pretty much the same like our normal post page, which is great because as you know, I like consists of design and I think it's great to do that here as well. So that's great. And now I'll add a bit of spacing here as well, just to make it look a bit less crammed, like three pixel, 3%. I keep on saying pixel. I don't know why. 3%. Perfect. So, yeah, now actually the archive page is already ready. There's not much else to do here. So I'm just going to go back out of the editor. And I'm going to show you how this actually looks now on our page. All right, so now I'm on the actual blog page. And now if I click on any random article and then click on one of the Archives. So for example, the date archive in this case, you see, well, actually it's not. I could have an example because we all publicly published all of these posts obviously today, because I just created all of them next to each other. So all of these get displayed. But let me look for a better example to show you what would happen if there was a different kind of archive. All right, so now I manipulated this demo post so that it was published one day earlier. Now we can actually click on this and see how this changes. So now the if you click on this button for the 17th of February, then we should only see this demo posts because all the other posts weren't actually posted on that day. So let's click on that. And now you see we only see this demo post and this is the updated tile. So it actually, as I said, the context is all automatically updated. And it now says, these are the this is the archives for all of the posts that were published on that day. And same if we go back to the other posts. So all of them were published on February 18th. If I click on that, this obviously it says February 18th. Now, suppose there was published one day before, isn't showing up here. And it works that way for pretty much any type of metadata. Again, this could be a category or some type of search term doesn't really matter. In all these cases. This is how the Archive works, right? That's it already for the archive pages. I hope this was helpful to you and I'll see you next part of the course. 24. Create a 404 page: In this section, we're actually going to wrap up the theme builder in Elementor with building a 404 page. Now, you might be wondering what a 404 page actually is. And pretty much it's a, an error page that shows up whenever somebody tries to click on a link on your website, that's leading into nowhere. So as an example, on our website, if I just type into the URL bar, something like learn with Janusz.com slash 404 test, which is a page that doesn't exist. I get this error message saying the page doesn't seem to exist. And this is also a part of WordPress that we can design using elemental. And I'm going to show you how to do this in this section of the course. Just as in the last sections of the course, we're going to go to the templates theme builder, and then we're going to go through the new theme builder. And this time we're going to go to the 404 page and add a new one right here. Now for four or four pages, there's really not that much to them. It just is like a little error message. So the only thing that you should or could be doing on that page is to provide helpful links for people that maybe you wanted to go somewhere else but just typed in the wrong link. Could create like a link back to your homepage. Or you can obviously have some fun with it and make like a bit of a funny for a four page that's completely up to you and really depends on who you're trying to reach with your website, whether or not they are open to ya nice little jokes or not. So we can also choose a template for this if we wanted to. So for example, this one right here, we can just insert that and work with this. So in the case of this template, we actually have a video background that's just someone typing and ya'll not finding the right page. And it has this big 40 for the page you were looking for couldn't be found message at the right in the center. And down here, you can actually add links to your pages, too sad, I said so you could, we could change this up to make it fit or brand a bit more so we could at least like give this an H1 and then maybe like, yeah, make it a bit bigger still. So something like a 120. And then for this, we could also again change. This gives us our own custom branding and then we're already pretty much good to go. Now we can obviously like adding the links to these pages. So this is an icon list right here. So we could just go click into these different items and then adding a link in here. So we could just write something like for the homepage, it would just be HTTPS, then Coleman, and then slash, slash, and then it would be learned with ganache.com like that. And you could obviously do the same thing for the other pages as well. It's self-explanatory, so there's not much to hell here. And then you can publish this and include it as a 404 page and save and close like that. And now we'll just go back to our WordPress website. And what we can now do is we can type in another random page like four or four Check. And now we actually see that this page is being displayed. So the page that we just created and is now the default page that we get when we actually provoke a 404 error. So as I said, really simple, really straightforward, and that's something that's necessary so you can just leave it out if you don't want to. But it's nice little extra feature and it gives you a website, a little bit of personal touch. If you actually have a custom 404 page, and it's really easy to do so you might as well just do it, but that's it for the theme builder part of this course. We've now covered pretty much everything about the theme builder sections. And now we'll go on to cover additional topics in the next parts of the course. 25. The Gutenberg editor: Now that we've fretted our blog post template and Single Post Template that successfully in Elementor, it's now time to take a look at the blog post writing and building experience in WordPress itself. And this is called the Gutenberg editor, which is a new editor that work was introduced in 2018. And it works quite similar to the page builders that you know already like Elementor because it also has this kind of drag-and-drop system with different blocks that you can arrange on your canvas. And it allows you to build your blog posts and your posts in a really nice and visual way to use it inside of our WordPress dashboard, we're going to go to posts. And here we're going to click on Add New. Now this is the same builder that you used previously to add in the dummy posts. But now we're just going to take a much closer look at what you could do with it. So first of all, of course, we have the title up here to say this is our block post title. Now below that you have the actual post editor. And how it works is that the different ways, but you can first of all, type in slash to get this little drop-down list of different blocks that you can embed. You can also do is if you click on this, you can go to the side right here and click on Add block. And you will get a different like when menu that pops up. You can also click on Browse all. And this will pull up this little side menu, which you can scroll down, which shows you all the different blocks that you can actually add into your blog posts in WordPress. And now there's the usual files that you know, like the image. So I could just click on Image and then click on Media Library. And let's say we're going to add in this image into our post. And now you see it appears on the post Canvas. I can also paste in content from like a Lorem Ipsum generator like this. And now you see we have this paragraph that appears instead of a blog post. Now there are tons of different blocks that you can choose from. I'm not going to go through all of them. But if you like, if you click on the plus button and click on Browse, all you know, you can actually go through the entire library. We also see these little like pop-ups up here that actually showed you what it would look like if you'd used the different blocks. And you can just play around with them like you wanted. You can like embed YouTube videos. You can embed all your files. You can embed like normal PDF files and so on. So there's lots and lots of options that you have inside of this Gutenberg editor. One of the options that I wanted to show you that it is quite commonly used is the ability to add in columns. So down here, we can click on columns. And now we can actually choose what kind of column we want to have. So let's just choose a 5050 split column. And now you see we have these two different columns, which if we click on them, we can actually add in content in here as well. So for us we could say all, let's add in another image in here. And we'll just choose this one right here. And then maybe for the other column, let's just add in a paragraph again, just for demonstration purposes. And let's add in this textbook and maybe even, let's say we also want to add in a button below that, click here, like that. And now you see we have this really basic layout credit inside of the Gutenberg editor. Now, obviously, I wouldn't recommend that you actually use this to create your pages. It's just to structure your blog posts and to make them look appealing. It's not that powerful. It's, I think it's not powerful enough to create actual pages. It's really, really useful when you want to make your workers posts look good. Next, I also wanted to show you how you can add in a YouTube video. So we'll search for YouTube like this. And then we'll just entering the URL to the video, click on Embed. And now you see this video is actually appearing within our content as well. And if you, if you use the elemental content like block inside of your posts template, then all of these visual elements that you add in here will also appear within your blog posts on the elemental template page. And there's even one more really useful feature that the Gutenberg editor, I am sure that they will actually improve this as well. And this is called Patterns. And what it does is if you click on the Lock button again and go to patterns, it actually allows you to have predefined patterns that are implemented in Gutenberg and to use them within your blog posts. So right now we only see the buttons, but we could also say, let's go to gallery, and now we see how a gallery pattern might, might look. Or also we could go to columns. And we have these different layouts right here that we could choose. Like, let's just choose that one. And now you see it actually adds in the different blocks that are needed to create this pattern directly into your blog posts template. This can be really useful if you're designing your blog posts and use wants to inspiration on how you can lay out your content. Or you have a shortcut at like quickly gets you to where you want to. And you can use these patterns like to speed up your workflows and to create more beautiful layouts within the Gutenberg editor. Alright, so now we've added in all these different layouts and all these different styles onto your page. But we also can actually style them using the Gutenberg editor. So for example, you see, for this text, we see this little box up here. And I could, for example, say like, I want to highlight this. And then I can just like make it bold like us. Also, I could choose these words right here, and I could add a link to it, so I could choose the YouTube link that we just used. Clear also enable open in new tab for 12. And then you see it now has a blue background which indicates that it's actually a link. And there are lots of different ways you can do this the same as an elementary actually, for each of the blocks, you have this little side panel right here, which actually also gives you access to some settings. So for example, for typography, for color settings as well. And also for some advanced settings where you can use CSS and so on. For example, I could say, you know, I want to make this entire text maybe green. And if I click on green, you see the entire text turns green. Also in here you have some additional options if you need them, like Inline Code, keyboard inputs and so on. So if that's something that you need, just know it's there. Basically, mostly you want to use the panel up here. And then for some styling settings, you can use the block kind of styling settings in the right side panel. This also works for other blocks and all the Bronx have different settings. So if I click on the button here, you can see I could also change to the outline style so I can make an outline, I can make it fail. I can adjust the border-radius like this. I could like style the link settings and so on. And I can also like yak, add the CSS and HTML tags are 12. So when it comes to this, just play around with the settings a bit. And I'm sure that you actually like find out how to use the different elements. It's not that complicated. There's not that many options like compared to Elemental for example. So freak out. I think now that you've also like Plato for the mentor a bit, it's, it will be quite easy for you to understand how couldn't work. It works. Now that we've talked about the Gutenberg editor, let's talk about the publishing settings for your blog posts because they are also quite important and I'm sure that you will get something out of them. So it's the same as the styling tab. It's actually on the right side of our Gutenberg editor. And you have to click on this little postbox up here. And then you have all these different options for your publishing your post and like general information about your course. Let's start from the top. The first one is the visibility. So this is right now set to public. I could also make this private, and I can also make this password protected if I wanted to. So I could enter in a password and then the page or the post will only be available to people that are actually entering that password. So this might be nice if you have like a membership area that you don't want anybody to have access to, or similar things like this. Next we have the Polish options, and this is right now set to immediately, which is the default. If I click on this, I can actually determine a postdate. So I could say I want to schedule this post to be published on maybe April, April 15th, for example. Or I could like scatter it way more and into the future. This is completely up to you, but it helps you to like, have a organizational system, to have a publishing schedule for your team. Maybe you were actually like working in a team and you want to have multiple people publishing blog posts. Citizens great to be able to plan when blogposts are actually being published. Now the post format and the SEC to the top options or aren't too important for us right now. So we'll just skip over them. Move to trash. Obviously, you can also move the post to the trash, which will also don't want to do right now. The next thing I'll actually is important and that's helpful is the permalink. So this is actually. The link that comes after your URL, slug, that comes after your URL which links to the post. So if I click on this, you'll see that this is right now the post that we just created. And this is also the URL, but this post will be found under once we've published it. And this is important for SEO purposes. So usually if you have a good blog post title, you don't need to change this. But if you have a certain SEO strategy, you might want to address it and that's where you can do it in WordPress. Next we have the categories. And the categories. A pretty self-explanatory. It just allows you to categorize your blog posts on your WordPress website. You can have different categories, like in the digital marketing space. It might be something like search engine optimization, web design, SEO, paid ads, these might be your categories and this is great to categorize and to organize your content on your page. Next, you also have tags. Tags are similar to the categories. There are also a taxonomy, but usually what I would say is use the categories for like the higher level pages like SEO, like web design. Use tags if you want to, for things that are more specific. So for example, a tag might be, I don't know, might be Facebook update or like iOS 14, if we're talking about Facebook ads and so on, this wouldn't be a category on your website because it's probably something that's temporary and that's over at some point. So this is where you would use these tags. Next up, we have the featured image. You used it already. So this is just the image that will appear in the top of your blog posts. So these images right here, you can add it in to this featured image box, and then that's why I will actually show up. Now, the custom excerpt is also something that's interesting. This is optional so you don't need this, but what it does is actually it creates a custom like preview or customer of your posts, which will be shown on your blog pages as well. So right now on our block you see we have this Lorem Ipsum, Lorem Ipsum phrase right here, which is like the preview. And where this comes from is actually like elemental pulls this from the beginning of our page. So all of our posts. So if I go to the perfect landing page, you see this is the beginning of the actual blog post content. And if you don't want it to be the beginning of the content, but rather a custom excerpt. You can changed out within this little excerpt box. Alright, and that's it already. For the Gutenberg editor and the publishing settings. You can now publish your post if you want to soak, just click on Publish. You'll have this little check again, and then you could click on publishing. And now the post is online. We click on view post. And now we see how the poets appears. We didn't add the customer, the preview image, but that's okay because it's more for demonstration purposes. All right, I hope you enjoy it and I'll see you in the next video. Take care and bye. 26. Elementor popup builder: Another great feature that elemental has to offer is the ability to add pop-ups, which you can display on the website depending on different requirements and on different specifications that you can choose. For example, you could have a pop-up be displayed immediately when somebody like accesses your website for the first time. If you have an online store, for example, you could have some kind of discount. You could have a pop up for your email list and so on. So there's lots and lots of different ways to use these pop-ups. And in this part of the course, I am going to show you how you can do this in elemental. So to create a pop-up, we're going to go to the templates and then we'll go to popups. Now here we can easily create our own pop-up like that by clicking on this button. And then we'll just call it something like test pop-up will create the template. And as always, we have a library of templates to choose from if we want to. But we again are not going to use them and we're going to build our pop-up from scratch. Working with popups is a bit different than working with pages because just of the nature of the pop-up itself, it has some, some unique specification that we need to take into consideration. So we have this section here as our pop-up and we can create, as I will just create a normal structure like that. So this is going to be the content of the actual pop-up. How it's going to look like for proverbs who actually also have a different set of settings, which is down here. So if we click on that, then we can open up the pop-up settings with all the different options that we can choose from. Now we're just going to create a really simple e-mail sign-up pop-up. So there's nothing too special, but I'll show you how this works. We'll start off by adding the content to our pop-up. So we'll add a heading like this. We'll also add a bit of texts, I think. And then we'll add a form as well. So search will form. And then added in here as well. Now we're ready to work on some of these settings here. So this might be a bit too big for this type of pop-up, so we'll make this a bit smaller. The text is too small actually. So in this case, we'll make this the normal size. And for the contact form, we're only going to need the email field so we can delete the name field and the message field. And also we don't want the label to show up, so we'll click on height right here. So we only have email field and then the send button. Now we're going to remove this line again from this text field right here, like this. And now we can work on the actual email form. So we're going to do is we will change the style of the button. Instead of saying Send, we're actually going to say subscribe. And then in the style tab, as you see right here, the background turns white so we don't see the subscriber anymore. And we want to change that. So we're going to go to Buttons. And then we're going to go to the background color and we're going to be hover styles. And I will go through the text color and turn this on to the primary color. And now this looks just how we want it to look. Now we want to save our changes and click on Publish again. But in this case we have some more additional rules for this, for these kinds of pop-up. So we have more control over where we actually want them to be displayed. First of all, we can add a condition. So this is pretty much just the same as it is for pages. We can say we want this to appear on the entire site. We could also say we just wanted to appear on a very specific page on our website. This is entirely up to you. I'll just leave this on as include on the entire site. And then we'll go to the next tab, which is the Triggers tab. Now this menu allows us to control when this pop-up will actually be triggered. And there's different ways to trail the pop-up and we'll go of all of them right now. So the first one is the on-page Load Trigger. And that pretty much means once the page loads, then the palpable also be triggered. So if you turn it on, we can also say within how many seconds of the page loading it should appear. So if you say three seconds, then the pop-up will appear three seconds after the page has loaded. For example, the next option is the on scroll option, and that's also really nice. So hundreds on right now, this pretty much triggers the pop-up when you scroll to a certain point in the page. So for example, we can say, like in this case, within 50 percent. So if you reach the 50 percent mark of the entire page, then the pop-up will be triggered. You can also control if you want this to trigger when you're scrolling down or when you're scrolling up depending on what you like or what you prefer. The next one, which is the honest scroll to element trigger. Triggers when you reach a certain element on your website. Now this is a bit advanced because you need to use CSS classes in order to target this element. If you know how to use them, then you can use this as well. But if not, then I would just recommend you use one of the other triggers because they work just fine. This is more for the advanced users. Next, we have the onclick trigger. So you could actually say that when you click something or when you click on the page somewhere, then this part of actually is being triggered. It also can determine how many clicks it takes for the pop-up to be triggered. So if you do one click, then on the first click that you do on the page, the probable be triggered. And in other cases it might be on the second click, on Third click and so on. The next one actually triggers after inactivity. So when somebody is on your page and he or she maybe just getting a coffee or something and he or she is staying on the page and not doing anything. Well then you can say after a certain time. So for example, in the default setting, within 30 seconds of inactivity, this pop-up will show up on the page. And the last one is the on-page exit intent. Trigger, which gets triggered when the mouse of your website visitor actually exits your screen and goes into the browser bar on the top. And the idea behind this is to kind of trigger the pop-up right before somebody is about to leave your website so that you might get his email address for your newsletter before he or she leaves your site. As you can like, have one last chance of showing your website visitors something that he might be interested in so he can stay on the website for longer. All right. So I'm actually just going to choose this one so I can show it to you later. And then we'll go on to the advanced rules. The events rules are some additional requirements that have to be met in order for the pop-up to be shown. This actually gives you even more granular control over when the pop-ups actually being triggered. So let's look at some of the options. The first one is to show the pop-up after x page views. So for turn this on, we can specify the amount of page views here. And it pretty much means show the pop-up once the visitor has looked at so many pages. So in this case, it would be after the visitor has looked at three pages, he will see the pop-up, the next one show after x sessions, pretty much means that this pop-up will then show up after your visitor has visited your website for a specified amount of time. So if your site visitor actually returns through website, then he will see this pop up. The next one is C sharp to x times public option. And this pretty much controls how often your pop-up actually gets shown to your visitor. So for example, think about a discount code pop up that you have. Well, you probably don't want to show that to your visitors every time they visit your website. Maybe you just want to show it once or twice. And then if the person hasn't gotten the discount by then you'll just get rid of it and the person will not see that pop-up anymore. So you can actually just specify how many times the pop-up, how many times the polymer should be shown to the visitor. You can also choose whether you want to count the instances when the pop-up is actually shown based on when they open or when they're closed. So does the popup have to be opened three times or doesn't have to be close to three times because sometimes maybe your visitors won't close it and then you get these different numbers. So want to specify that you can do so here as well. The next one is also a really cool feature, which is the ability to set a pop-up based on a specific URL. So if you turn an option on, you can allow a pop-up to be shown based on the URL the person is visiting from. So for example, if you have a, let say you have a Facebook account and you have a specific discount code for Facebook users that come to your website. Maybe again, you run an online store or something. Then you can say you want to only want to use this forum, Facebook.com. To be able to see the pop-up. The same also works the other way around. So you could also say you want to hide this pop-up for people that come from Facebook. So depending on what you want to do, you can do both of these things. The next option is pretty similar. It actually just says show when arriving, arriving from. And what you can choose here is whether you want people to see this pop up when they're arriving from search engines, when they arrived from internal links or from external links. So search engines, obviously if someone comes like visits your website through Google, searches for us or he or she searches for a search term and then clicks on a link that goes to your page, then, well, in this case, it would be shown to him external links are other links like for example, on another website that directly link to your website. So this is what you can control with the external links. And internal links are links on your own website that link to other pages on your website. For example, it will be your on your about page linking to your services page, for example, something like that. This is what you control with this setting here. So you can control where we want the pop-up to appear next. You can also hide the pop-up for logged in users. Which is, yeah, not necessarily, usually. But sometimes it might be nice if you're logged in yourself and you don't want to see the pop-ups all the time, you can just turn it on so you don't see it when you're working on your website. All right, and then the last two options, you can say show on devices. So you could say, well, I only want this color to show on the desktop devices, or only on tablet or only on mobile, or only on mobile and tablet. Depending on how you like it. You can choose that right here. And then for the last option, you can actually say you want to show it on all browsers. Or you could say you want to show it on custom browse. So you can say, I only want to show this pop-up on Chrome, I only want to show it on Internet Explorer and so on. So something that's, yeah, you probably won't need, but just to denote that the option is already there for you. So when I'm going to choose any of the options right now because I just want to show you how this pop-up looks. Well, maybe I'll say I'll only show it three times. Yeah, I think that should be fine. And then we can save our pop-up. Alright, now we can continue to work on the actual design of our pop-up. So what we're going to do is we'll add some padding actually to the sides like this. And I think will also make the edges around again because that's just the style of the site. Or what I think I have to do this in the pop-up settings actually. So we'll go into style and border-radius. Yeah, and we'll have to do it like this. Now you see the edges are a bit rounded in here. Let's just quickly go over all of the other settings here so that you'd like know what you could do with these pop-ups as well. So the first option you have is you can determine how how wide your pop-up is supposed to be. So we can make this much smaller or a bit bigger, just how he wanted to be. So maybe let's say like 400 pixels is a good size. You can choose the height to be the shift to content or fit to screen. So it will be much bigger like that. Usually. I don't wanna do or you can set it to be a custom size. We'll just go with the Fed to content because it actually works good for our design in this case. All right, so the position is going to be centered. So both horizontally and vertically. We could also put this at the bottom, like right of our Supreme like this if we wanted to. But I'll just keep it in the middle again because I think it actually looks quite good. All right. So the overlay, that's actually like the background behind the pop-up and sorted file is off. You see, like it doesn't have any background anymore. And I think it's actually nice to have this kind of overlay so that you have like a bit of contrast to your actual website when you are opening this pop-up and the button, It's actually this little button up here, which if we hide it, it doesn't get shot anymore. But usually you want to have that so that people can actually go out of your clothes, your pop-up if they don't want to use it. For the animations here, we're just going to choose like some really basic like Fabian options and fade out. We haven't covered is actually yet, but pretty much you can animate any of your widgets or elements or sections in Elementor using a couple of different animations. And we'll just choose like a really basic animation. Maybe make the animation duration a bit shorter. And I think that should be fine. So now we're going to work on the style settings up here. And we're going to go to the overlay and I think would choose a different color for this background overlay. I think I might just choose the primary low saturation color, although maybe that's a bit too light. So maybe I am rather going with the secondary low saturation. And I think yeah, that works better because it's just more clear that it's actually a background. And so I think we can leave it like that. For the close button will actually say we can leave it on the inside. You could also have it outside of the actual pop-up, like like this so you can move it outside of the box. But we'll just leave it as inside. I think the positions also arrived at Figure, make it a little bit bigger, like maybe 25, and maybe put it a bit more into the corner. This is always a bit fidgety or to work with these buttons, but usually it works out once you've like, try to round bits for this close button and also going to give it the secondary color. And I'll give it a hover color of the primary value. So now this has the thick blue. It gets blue when I hover over it and I think that looks much better. Now we'll just add him to texts like get to the newsletter. Maybe it took weekly newsletter. Daily. Hope this fifth. Yeah, Perfect. Get the daily news that a perfect entering your email and subscribe to the newsletter. And I think that's going to be it for this pop-up. So now we'll just check how it looks on mobile devices. Okay, So that looks good actually. And this also looks good. Maybe I want to give it a bit of space on the sides. So maybe make the view width be like 90 percent. And now it actually looks good. So it just doesn't clash with the corners or the borders of the screen. And I think now we can use it like that. So now we'll just show you how this actually works. So as you know, we send it to trigger on page exit intent. So whenever I go out of my screen Canvas and onwards to the Chrome tab on the top. And so if I do this right now like this, you see how this little pop-up appears and we have this little overlay around it. And I can enter in my email address and then subscribe. Obviously, we haven't set up like the e-mail newsletter because that's just outside of the scope of this course. But you could enter an e-mail address, or you could also close this through this button right here, like that, and then interests appears and you can navigate the side. They're like you could before. That's it for this segment on the pop-ups in Elementor. I hope you enjoyed it and I hope you find some great use cases to use this on your website, to yao, to display it to your customers or to your visitors to collect email addresses. Or maybe as I said, to display a coupon code for certain people. These are great use cases. You can, you can use the pop-ups for. So I'll see you in the next segment of the course. Bye. 27. Elementor motion effects: Motion effects are a feature of elemental that allow you to make your websites a bit more fun and to animate the content of your website easily. And I wanted to show you how you can use them in this segment of the course. To do so, we're on the homepage of our Prussia designed website with elemental, and we're just going to click on edit with Elementor in this case, just like we did all the time. Now, to actually access the animations and emotional effects in elemental, We have to click on any section or element and then go to the Advanced tab. And here we see the option for emotion effect. Click on that. We have different options here. So for the sections, we have the scrolling effect, we have the sticky effect, and also we have entrance animations. And for individual elements, we have even more options that we'll go through later as well. So the simplest way to animate something like this, for example, would be just adding a fade in effect. So as you see right here, it just fades into screen, will do this for this section as well. And then refresh the page actually and take a look at how this actually looks when you're scrolling through the website. We'll add it in here as well, the fading effect. And then we'll just act with that on another tab like this. And now if you scroll down, you see how these elements like fade into the website. It's not that big of an animation, so you don't see that much. Just really subtle. And that's why it's something that's often used. But you might also find it a bit boring, depends on your style. So you can really choose how you want to do this. All right, so we could also say we make this slow. So this would be, as you see right here, much slower than before. So if we update it again, we might actually be able to see it much better. Like this codon here you see the slowly appears instead of just being there like it is with the un-annotated sections of the course. Now we'll walk our way up to the more complicated or more specific animation or more we're elevations. Also in the entrance animations, you could have also different crazy animations like you can have a bounced in like this. So it just like bounced around. You could have something like a slide in from one side, which is also quite popular, or like really wild animations like this. You have really many options to do this. And again, it depends on what kind of site you're trying to create. My personal recommendation would be to not overdo it with these animations. I personally think that subtle animations are really nice. But if you apply it, these crazy effects like I just showed you, something like this. It often just looks really weird and not like a professional at least. So maybe if you're creating a site for children, then this might be a good choice, but usually I would stick to the lake a bit more sophisticated and more subtle and elegant animations. The sticky effect is something we already covered when we talked about the heading. So that that's what we are actually using for our header right now, if we scroll down, it actually stays on top of the site. Usually that's also like the biggest use case. You would use this for some other elements. It's just a bit more of a pain to actually implement this correctly. But I'll just show you how this would look like if I. Actually tried to apply a sticky effect to, to one of these elements. So if I would say like stairs to get to the top, who scroll down, you see it just stays in there and it's just, it just looks weird. So usually that's not what you want to, what you want to do. One of the examples where it might actually be great to use this kind of sticking effect is on a sidebar for a block because you might have some important links there that you want to stay at the side of your block the whole time. So in these cases, it might actually be something useful. But in other cases, I wouldn't recommend you use this effect for your, for your widgets. All right, and now there's two other kinds of animations and effects that we can use for the sections that only the scrolling effects. But if you, for example, click on this icon here and then go to the motion text. And here we also see Mao's effects. So what are these? Well, let's start off with this example and let's start off with the scrolling effects. There are actually different, different types of effects here. So these, all these effects actually apply when you scroll through the page. So the first one being the vertical scroll. So this means the section will actually scroll vertically when you scroll through the page. If we, if we enable that by clicking on this button and we scroll down, you see how this actually moves a bit. So you could actually turn up to speed as well. And you see how it's actually moves a bit when I move my screen. So it's hard, it's hard to see, but I think it should be visible right down here. It actually is really close to this SEO thing. And if I scroll up, it's pretty far away because it scrolls with my mouse scrolling as well. Now for these effects, you have different options and they have to do with the viewport of the website. Now, I won't go into too much detail on this because it's a bit more of an advanced topic. And yeah, I think that would just be too much for this course. So I'm just going to like French quickly explain it. So the viewport is pretty much like your screen, the screen that you're looking at at any given time and where you'd like drag this kind of determines the effect will actually be triggered. So, and what percentage of the viewport that the effect will be triggered. So like in this case, if I say 50 percent, you see the fact pretty much doesn't appear right here. But if I scroll down here, you now see it like the whole effect is happening. And in the other case, if I like, drag the top viewport down like that, actually get this effect to appear like Ray way when I'm scrolling past it. So that just doesn't make any sense. And that's why usually I'd recommend you just keep the default settings for this if you don't have any experience with working with coupons. Also, if you ever want to remove the effects that you applied, just click on this little back to default button like this, and now the effect is gone. So yeah, you can remove things easily if you don't like them in the future. Next we have the horizontal scroll, which is the same kind of effect just with the element actually scrolling horizontally like this. So if I actually speed it up again, you know, you see how this moves to the side. When I scroll through it, you can move this to the left or to the right, like depending on what you actually prefer, that's totally up to you. But so, yeah, pretty simple. The next one is the transparency. And this actually makes the elements transparent when you scroll through it. So, you know, if I scroll like this, you see how it like faith algebra and scroll all the way back up. So to actually make this fully transparent, you can see if I scroll down now, you see how it actually turns less, less transparent when I scroll down. And I could make this, move those up as well like this. Because that wouldn't make any sense. But let's do it like this. So like here and now you see it fades out. If we are on the top and now if I scroll down, it appears and now it's mostly, mostly non-transparent again, now all of these features are just to add a bit of a funny quirks and like little fun features to your website. So it's definitely not something that you need to know that you need to experiment with, but it's definitely fun to do. And it just takes some time to find out the perfect animations, especially if you're trying to work, trying to make different animations work together. Yeah, it's definitely fun, so I recommend you try it out self. All right, next we have the blur effect. It's pretty much the same just instead of being transparent. And now the whole section turns, light, gets blurred and it's the same way round. If I scroll down, you see how it like yeah, isn't as Gloria anymore, I can make this, move this over here so we actually see the difference. So if I scroll down now, you see how it's not Laurie right here, but if I scroll back up, it gets really burglary and yeah, so we'll remove this as well. Next we have the rotate option, which is also quite crazy. So just like a rotate, the entire section when you scroll. Also a crazy effect that you can use. And lastly, we have the scale effect, which just scaled up the element when you scroll through it like this. And there's even the option to scale the element down and then back up and the other way around. So, yeah, also something that you might want to play with. And all of these effects can obviously be applied on the different device types as well. And you can choose whether or not you want to display it on, on each of them. So you can say you only want to display on desktop or only at mobile. And depending on how you actually want to do this. All right, Now we're going to take a look at the other kind of effect that there is, which is the mouse effects. So maybe we'll just choose something like this logo here, like my actual logo. And we'll use the effects on this. So we have the mouse facts which we can turn on. And here we have two different things that we can do. So the first one is the mouse track effect. And what this does is it pretty much makes the element track my mouse. So as you see, like depending on how I move my mouse, the element moves with it. And we can have this be in the opposite direction. So femur here, if I move to the left, the element moves to the right. And if I move back to the right, it moves to the left. But we could also say it should move in the same direction that I am moving. And so now it pretty much follows my mouse. And this can also be a pretty, a pretty nice effect to use. We can also increase the speed. So if I bumped the speedup, I'd like it really follows me around the complete page. It just moves away out of bounds in here. So if that's something that you want to use them, yeah, experiment with that. But usually, I think having this as a really low speed is already Funny enough for your, for your website. All right, and then the second mouse effect is the 3D tilt. And if we enable that, you see how this element like kind of shifts. I think it's a bit too small to really see. Yeah, Now you see, so this kind of resembles a 3D effect. So it kind of like shifts around when we, when I, when I move around it, I think it should be you should work better on an image. So maybe I'm just going to look for an image that actually makes us better select maybe the immediate carousel and turn on the 3D tilt here. And now you see how the light actually has this wobbly 3D effect that you can use. Also, you can again use the opposite direction. So like it tilts in the opposite direction of where your mouse is going. And you can again, have fun with that. That's something that actually might be quite useful if you are trying to sell a product and you want to make like a Product Showcase where you show how your product works or how your product looks. Then it's actually might be really nice for people to be able to see the product. So, yeah, that's why we could use case where you might want to use something like this. And with that, we're already at the end of this little animation tutorial for elemental. Um, I would say play around with little animations, but usually I try to not overdo it with them. And I think there's a limit to how many animations you can fit on the page so that it actually still looks good. So yeah, I think less is more when it comes to this. But it's still fun to use. And I think you can come with really nice that credit ideas. So if you have a nice website where you actually use this, please send me the link to your website and I will definitely take a look at it because I think it's really fun to use these effects. And yeah, that's it. And I hope I'll see you in the next segment of the course. Bye. 28. Site settings & common issues: In order to save you some of the confusion, I wanted to go over some of the site settings in elemental as well. If you're a beginner in elemental and WordPress, you'll often find yourself in some width situation where you don't know how to fix a problem you're facing. And to eliminate some of these common problems, I wanted to go over some of the settings and walk you through some of the things that might be causing issues you're facing on your website. So without much talking, let's get right into the video, will start off by going over the Elementor settings itself. So here we have like the general settings for elemental. One thing that we covered earlier, as well as the importance of checking these two boxes when you're using the theme and the global styles. Because otherwise they won't work correctly. Something else that you definitely should be looking for is that these post types are actually checked on. Usually they will be by default. But just to let you know that this is also something that could be causing an issue for you. Now, in the style section, these style settings, they were previously, there are now part of the theme Bella and film styles and we'll go into in a bit as well. But yeah, so just to know, these are in the elemental style. So if you go to the page like this and go to Edit with Elementor, and then click on the menu. Once it loads like this, this is where we have the style settings. Next up we have the integrations tab, and we haven't covered these integrations in much detail, but I just want to show you that they're there and that you can actually use them. And this is the place where you have to enter in your information. And this works the same for all of the other different providers here as well. All of the different mailing services and also something like Adobe fonts if you want to use something like that. So just to let you know that you can actually do this here. Again, I will probably be adding, either adding in different sections to this course or I'll be creating a, an additional course that goes into more detail on these kinds of integrations later on as well. So check that out once that comes out. But now let's go on to the Advanced tab to check that out as well. Now here we have some of the more technical options you have in Elementor. And I wanted to show you some of them that might cause you problems when you're creating your website. So the first one, I'll definitely leave that on. So definitely leaves that as external file because that's just much better for your load times and just for the general January for your website. Sometimes you might want to switch the loader method, but usually you don't need that. So he has to say about those. Well, for the file uploads, sometimes if you, for example, once you upload your custom icons, SVGs, then this won't work because this setting isn't enabled. And the reason that this isn't enabled by default is because there are some security risks with these types of files because you can't have like a malicious code in them. If you're not careful. But usually if you're just trying to like add in your own icons to the website and you get the icons from. Some somewhat trusted source of yours, then there should be no problem. And then you have to turn this on in order to enable these uploads. Now, this option is actually something that is also often a problem. And I'll show you where it actually is a problem on our page as well. So if you go to the blog, I have to go out of this. And if we go to the blog and click on wealthy articles right here, you see this icon here for the time is actually not being displayed properly. And that's because of the font awesome for library which we have to load the support script for that. It's not loaded by default and you don't know what it's really about. It's just something that if you are facing some of these issues with the icon's, that the default icons from elemental not displaying correctly. Just try and disarm, save your changes. And then we'll go back to the website. And now you see this actually loads properly. So that's an issue that you're often facing. Also, when you have a drop-down menu in the header, that's also something that's often coming up there. So just keep that in mind if you have this problem. Now lastly, a pretty recent introduction from elemental is the experiments feature. And that's all something that you want to be careful with because it allows you to actually activate experimental features in elemental on your website, which also might cause you problems. So my recommendation if you are not too comfortable with your WordPress website yet, would be to not to not activate them, such as inactive and yeah, just just leave them like that because these might turn into into problems. If you don't know what you're doing and you might be facing some bugs on your website with these. All right, so now we'll go through some of the settings in the elemental editor itself. So we'll just go, just go to our front page as well. Click on edit with Elementor. And now we'll go back in to this little menu and we'll go to the site settings. Now down here, couple of things that we haven't covered yet. Some of them also include some of the styling options, but also other things that might be just helpful if you don't know where they actually are. So first of all, we have the standard entity which we talked about already. This is where you can add in your site name, your site description, your site logo, and your favorite car. And if you have one, then the second one is the background. This is where you can actually add in a consistent background for your entire website. So you can say you want the menu you want to default color of your background should be, I don't know, a blue or something. And then you could like, you know, create a blue background for your entire website. Obviously, you usually just wanted it to be white, but in some occasions you might want to have some kind of different color as the background. Maybe you have like a dark theme, so you want a dark background. So this is something you can set up in here. Next we have the layout. This is where we earlier the change our content width. And obviously you can also change that if you want to, then you also have the option to change the default widget space. So now if you remember from earlier, we often we're working on the, on the spacing. Maybe sometimes you want it to be a bit bigger, sometimes a bit smaller. So this is something that you can edit here if you have any preferences for this, usually 20 pixels is a pretty decent size for this. So usually you don't want to or you wouldn't want to change anything here, but you have the option to, if, if you need to, for the next part of this, we're actually going to go back into our design system so that I can show you what I'm about to show you, which is the feature to enhance the light box. So what is a lightbox? Light boxes are when you click on images and you enabled a lightbox to appear like we can do right here. So we can say media file and then we'll say lightbox. Yes. Now if I click on this image, we get this image like as a big screen with some additional options like to make it bigger or to share the image, or to close the light box again, things like this. And we can change the styling of this by going in here and going to the site settings and then going to lightbox. And like going over these changes. Now I won't go through this in more detail because It's pretty straightforward. And we have talked about so many styling cases that I think you will be fine doing this on your own. But I just wanted to mention it to you that you can actually do this in here as well. And lastly, something for the advanced users or something that we might be covering in the next courses will forward. The more advanced users would be custom CSS. So you could have custom CSS codes in here for your entire site. If you actually want to have some custom code in there. Now, going out of the site settings again, we're going to take a look at the user preferences. We have also something that might be quite nice for some people. You can set the panel width of this panel to a different size. So maybe you want a bigger panel like this. And then the panel actually is being resized like that. You can always drag this around, but you can also set the default for it. I usually just keep it out the normal size like that. But yeah, it really depends on what you want. Usually it's a bit this is a bit buggy and in some cases, so yeah, I'll just move this out again like that and returned to my normal return to my normal panel size, right? And now one more thing is also you could, if you want, you could change the UI themes. So you could say you wanted this in dark mode as well. It's also possible, something that some people might want to use. So we'll just keep it on orange and tags, but that's also another really useful option to have. And where we are already here and talking about all these options that elemental has and some of the settings. I wanted to take the time to also cover some additional settings we have here. Just go over all of these different things that we can also do. So you have the option to upload custom fonts, or I will probably be creating a additional content for this as well. You have the ability to upload custom icons. You can also add in custom codes. Again, don't worry about that. You don't need to do this. And also you can have, you have a role manager, which means you can have different roles for your users in WordPress. And they can do different things based on their roles in elemental as well. Again, something I'll probably be doing another video on if you ever need help with your limit their website and you want to contact the elemental support. For example, you can go to the system info tab here and you see all the system information which you can actually, if you go down here, download into a text file and which you can then also send to the element of support so that they can provide better support for you. So that's something again, that is really, really useful, especially when you're a beginner and you might be facing some issues. Also, again, feel free if you have any issues to comment or to contact me and give our best to to answer your questions and to help you out. And I think that about wraps up this video about the different settings and some of the problems you might be facing with Elementor when you're just starting out. Some of the things that might be hard to find if you've not been using this for too long. So I hope this video helped you out and I'll see you in the next section of the course. 29. Elementor productivity: Once you've got a bit of confidence, working with elemental on WordPress, you might want to think of ways to actually speed up your workflow in order to become more productive and to get things done faster. And that's why I want to introduce you to some tools that are mentor gives you that help you actually to speed up these workflows and to create your website's plays in the past, we'll start off with the elemental Finder. This is something that you can access by clicking on control ie. And it pops up this little window right here. You can actually pop this up anywhere on your WordPress website. So no matter if you're within the Elementor editor or like I am right now, outside of it. And you can actually type in anything on your website, any page, or any setting in Elementor that you want to access, any template and you can actually click on it. So let's say we added in if you like, typed in a, just to like demonstrate that, you see, we can have the option to edit all of these different tail pages and templates. We have the option to go through these general pages and also we can create new pages. We can go to different sites. We can access the settings and tools and pretty much all of these things. So this is really helpful if you want to, for example, open up a different page in WordPress when you're working on something else, you just flip quickly, tap this end. Let's say you want to go to the homepage, then you could like click, click Control and press it so that it opens in a new tab like this. And now you've got just open up your homepage like that. So we obviously we're on the homepage before, but we could also say like we want to edit the Elementor for 400 page from here. So click on this as well, opens up a new tab and actually jumps right into the editor for the 40 four-page. So really nice and handy tool. Quickly navigate your site when you're using Elementor. Next up we have the Navigator, which we also briefly touched on earlier as well. You can open this up when you're in the editor by going down here and then clicking on the navigator. But you could also like pop this up by clicking Control I. And then the navigator actually appears on this side. Again. You can also drag this to the side to actually attach it like this. And now I will actually stay in place when you'd like scrolling through your site and you're working on your page content. But you can also remove this again if you don't want it to be there anymore, right? And also like you can click on this button, expand the entire navigator, and move it around however you want. All right, so now let's collapse that again and see how you'd actually use something like this. So again, this is something you can use to really quickly navigate on your page and to directly access any of the sections that you have, for example. So if I wanted to go to this section, the second section, I could just click on this. And now the section settings automatically pop up on the side right here, which is also quite handy. And also one way we use this is to edit these hard, hard to reach sections like here where the two. The intersection and the outer section like overlap. We can use that to edit the outer section as well. Also, we can go down here to see the site structure and edit any of the elements with ease by just clicking on them. So also in here you have all these different columns. We could go into a column, click on the image, and just work on that image by clicking right here. And additional nice feature is that you can actually hide your elements here as well. So if you click on this little icon right here, you see how this logo disappears. And you could use this to test how things look if they weren't there, for example. So this is also a really nice feature that Elementor office view. Another feature that elemental has is the ability to create global widgets. And they are a bit different than the global styles that we've created earlier. So I'm going to show you how to use them. Pretty much. How it works is you can have a certain widget and you can create a global style out or global budget out of it. Which means that no matter where you use it on your entire website, it will always look the same. So if you make changes to the global widget, they will change everywhere else as well. One idea of where this would be really useful, for example, could be a pricing table. So usually you always have the same prices. And if you want to display the prices of your products in different places on your website, then it might be a great idea to change your pricing table, chew a global widget. And I'll show you how to do this using the landing page that we created. So if I scroll down to the part where we actually added in the pricing table and I click on the widget here. I can actually say save as global. And now this will save this widget as a global widgets. So I'll just call this global pricing table for example. And I'll save this. And now up here you see we have the option to go to these global widgets. And I could like adders n. I don't know right here. This just doesn't make any sense, but I'll just add it into to demonstrate how this works. And now you see they actually look exactly the same. But now if I was to change the global widget like this, and maybe I want to change like the price for example. So I say, Well now it, instead of $40, it costs $70 as you see up here. And if we update that and actually like refreshed page, then you see down here that this price has also been updated. And that's true for all of the different properties of that widget. So you can change the color, you could change the title. You can change the different list items here. You could change the link, for example. So anything that you are actually trying to use on the side, you could change that easily and it will be reflected in all of the instances where you were using that exact global widget. So that's extremely useful for a lot of cases also for like call to actions. For example, if you want to have like a, a notice for your newsletter or if you have like an important message for your, your followers that are for your visitors that is on different parts of your website. This is why you can use this in a really nice way. Now one thing you have to keep in mind though, is that this only works for individual widgets. So you can't just choose a whole section and make that into a global widget. It only works with the individual, individual widgets that you can use, but you can also do, if you ever wanted to use it in a different way, you could just say unlink this from the global instance. And if you unlink it like that, now you can change this however you want and it won't affect the other instances of that global widget and also the other way around. So this is now completely set free from the constraints of that global widget. All right, and lastly, I want to talk about some of the shortcuts in Elementor. I talked about some of them already, but I wanted to show you some additional ones and go through them again. So the first one would be to change the view. So changing the view from desktop to mobile, to tablet to mobile. You can use Control Shift M for this. And then you can easily shift between these views however you want to. Next we have control I to access Key navigator, as I said already earlier. Then we have Control E to access the finer. Also you have the option to use control shift and EEG to open the theme builder actually, also all of the basic shortcuts that you already use daily also work in elemental so you could copy paste texts like this, then just paste it in here like that if you wanted to. The same also works for individual elements. So for this image, for example, we could click on the, could do a right-click. And then using Control D, we can duplicate it. Using control C, we can actually copy it. And we can also paste in the style using Control Shift V, like that. So all these options are there for you. And you can use these just like you who's on any other platform like a word or your use these shortcuts as well. And probably one of the most important shortcuts would be Control. And that in order to undo changes that you made. And you're going to use that a lot in the beginning. But it's nice to know that it's there and that you can use it to quickly revert back to the previous version if you did something by mistake or if you applied some changes that you want to be removed later. And that's it already for these productivity tips and elemental, I hope you enjoy them and I hope that they can help you to speed up your workflow and to work on your website in a more efficient way. Other than that, I hope I'll see you in the next part of this course. 30. Backup & update your website: Creating regular backups of your website is something that might seem a bit unnecessary for a new WordPress users, you often only come to realize how important it would have been once it's too late and your website maybe got hacked or you have a bug in your code because you updated your site and now nothing's working anymore and you don't know how to get back to a normal website. And I don't want to scare you with this, but sometimes things like this can happen. Your website can get hacked, which it shouldn't. And we're going to look at ways you can actually prevent this in the later video about what for security. But things like this can happen. And also, what's really common is that you update your plugins on your website and then something just doesn't work anymore because, well, the software isn't compatible and yet Then issues occur which usually get fixed. But in some cases it might take some time and your website is working in the meantime. So without a proper backup system in place, you might lose days or weeks of the work that you put into your website, which would be a risk that I wouldn't be willing to take if I was in your position. So that's why I highly recommend that you watch this video and set up this backup system with me. Now there are three different ways to backup your WordPress website. And one of them is to do it manually, which is not the option that we're going to take. So we'll have a look at the other two options. The first one is by letting your web hosting provider trade the backups for you. This is something that many workflows web hosting providers actually offer as a service. And in many cases this is actually free. So you will get automated updates like once a day or once a week that will be saved to your web hosting space. Now this is a really nice add-on that somewhere posting companies provide, for example, Citroen. If you use my recommended host site ground, then you will have access to this feature as well. But still, I wouldn't trust this to 100% because then the backup will be stored on the server while you watch that as well. And if something happens to that server, ever, like if the web hosting company messes up, then you don't have a backup anymore. And that's why I recommend that in addition to this automated backup by your web hosting provider, you also install a updates or like backup plug-in on your WordPress website. When it comes to this, as with anything in WordPress, there are multiple good options here. For example, there's Wordpress, then there's also Backup Buddy, and then there's also updraft plus. And the updraft plus is the plug-in of my choice. It's also, I think the most popular backup plug-in. And there's also a great free version available. So that's what we're going to be setting up in this video to install up 12 plus. We're going to go to the plugins page inside of our WordPress dashboard. And here we'll go to Add New. Now, you can just search for updraft plus like this. And keep in mind that the plus doesn't mean that this is a premium version. It's just the naming. That's weird. But yeah, plus doesn't mean that it's like it cost any money. This is a free plugin. So let's click on install now. And once we're finished installing, Let's activate the plugin is parallel so that we can directly use it. All right, perfect. So now it's thought and so let's activate. And now we see the plugin is actually activated so we can go on to set it up. So let's navigate to the settings down here. And then we can go to the Settings tab in here as well. So again, click on Settings. And I will just remove this banner from up here. Now the first option you have here is to specify how often you want updraft plus to create these backups. And there are two parts of your website that can actually be backed up. One are the files and then there's also the database. Now, I would recommend that you back up your files at least once a week. So in here, create this weekly option. And for the database, I would actually say to it every day because the database usually gets changed more often. So if you'd like to add any changes to your website, design changes, these will be reflected in the database as well. And especially if you have like some kind of e-commerce store, I would probably even go with every hour because yeah, ecommerce stores just need much more power. And if you have like a huge loss in your database, that's a big problem. So, yeah, choose these options for like a regular website. If you have a more high traffic and advanced website, that is really like bringing in thousands of dollars in revenue per day, then you will probably have to have a better schedule than this. Now you can also specify how many of these backups you want to keep on your web server. Because actually allows you to backup your website both on the actual server that you worked on. But also let us see right here, you can also back it up to a different Cloud storage provider, which will also setup. So here you can just keep it at two because we don't need more copies of these backups on our server. We much rather have them on our remote certification and that's what we're going to set up next. So in my case, I will be choosing Google Drive as relocation. And this is really important because you do want to have a backup on a different server than the one that you want. So it is actually on, as I said earlier, if the web server that your website is on, it's actually going down or has problems, and somehow your data gets lost, then you don't have your website anymore and you don't have the backup anymore. Which can be a huge, huge costs and can cause you lots and lots of problems. So that's why I would choose at least one external search location. You can use more, but then you would have to upgrade to the updraft plus premium plan. So if you don't want to just keep that one and that should be fine as well. Now you can specify what the Google Drive folder is. Again, in the free plan, you have to upload it to the folder, but that's completely fine. And then down here you have the option to specify what you actually want to be included in these backups. Now, I would recommend that you actually keep just all these things checked because it's important that you backup all the different parts of your website. And then the last setting down here is to check this box if you want to have a basic report sent to your site admins e-mail address. So if that's something that you want to do, check the box and then you can just click on save changes. Now you will see this window pop up that will let you, like, authorize access to your Google Drive account, which is something that you need to do in order to connect up draft to your Google Drive account or whatever storage location that you're using. And then you will be able to send backups to that remote storage location in order to secure your website. Now after you've done that successfully, you can go back to the backup and restore page. And here you can actually check out if it's working. So you can click on the Backup now option. And then you can also specify to send this backup to the remote storage location. And you can check these other options. And then you can click on Backup now and test if this backup is actually being sent to the correct source location. So it's actually working. And then from there on up to a plus will just automatically backup decide in the interval that you specified in your settings and you don't have to worry about, yeah, backing up your site ever again. Now, this will take a bit of time. So yeah, don't be worried if it doesn't happen instantly because they're copying this side over to Google Drive or whatever other certification you use. Just takes a couple of minutes. So maybe like five to ten minutes and then it should be yeah, working in most of the cases. Now to finish this video off, let's talk about updating your website because updating website and keeping backups of your website are two things That should be connected to each other because they're both really important. And first of all, why do we even need to update our website? Well, there are multiple really good reasons for this. First of all, new updates to plug-ins or themes or WordPress itself often come with performance improvements, which means that they will make your website faster, your symbol load quicker, and you will just have a better experience working on your website. Another big advantage of updating is that you will also get access to any new features that have come out both in WordPress for your themes and also for plugins like elemental, because the developers of these different tools are constantly updating and adding to the plugins and themes and so on. And so you don't want to miss out on the new functionality. But the by far the biggest reason to always keep your site up to date is to prevent hackers from being able to hack into your website. And that's because most of the hacks of the thousands of tags that happen every day are because of outdated software. And that's because outdated software often contains security vulnerabilities that aren't fixed anymore because the version is just out of date, which then will usually be addressed in newer versions of the software. But if you don't update well then you keep these security vulnerabilities on your website, making it easier for hackers to get access to your site potentially. So that's why it's so important. And now let me actually show you how you can do this and also what you can actually update. So I'm here on the update page and let me just quickly dismiss this because we don't need it. Um, and in here we actually see we do have the current version, which is like the newest version of WordPress right now, if there were to be a new update, we would see it right here. And then we would be able to click on the button to update WordPress. Now we can also update plug-ins. So in here you see I've got this SEO plugin right here, which I just installed to show you how it works and that you can actually update this. And also for the themes. You can also get updates. Now how it works is you just click on this little bucket button next to the plugin and then click on update plug-ins. And the same also works. If you have multiple plug-ins, then you can choose to update like individual plugins. Or you can choose to select all and then select all the plugins that you have available to update. So in that regard, it's really easy to do this. You just have to press a button. But was really important is that you actually do a backup before you do any of these updates. Because updates often can cause problems on your website, not all the time. And if you don't have too many plugins and usually doesn't happen too often. But sometimes a new update might cause problems with another program, but because these planets might be not compatible anymore. Now that doesn't happen too often. If you don't use too many plugins, and if you use well-supported plugins by good developers, but still it can sometimes happen. And yeah, then you do want to have a current backup of your website ready to roll back to that version of the backup that you created. So please always do this backup before you do the updates. Again, it might seem like a bit of manual work that you have to do that's unnecessary, but I guarantee you it's less work than having to roll back to a version of a website that's maybe like from a week ago when you just publish changes on ten different pages on our website. And now you have to do all this work again. So I recommend you do this all the time. If you want to upgrade to updraft plus premium, then you actually get the ability to automatically perform these, these backups before the updates. But if you don't, then that's fine. You'll just have to do this manually. Now, how often do you actually have to update your website? Well, I would recommend that you do it at least once a month because that is a good time frame to make it achievable for you, but also not to give it like the versions too much time to build up. So that you might have security exploits, enthalpy of software which might make it easy for hackers to hack into your website. I personally update them once a week because I think that's just a good schedule to really be at the latest level of software each week, because usually these developers push out updates every couple of weeks. And so this allows me to be assured that there's probably no security exploits immediately available for hackers on my website. Keeping my website is nice and secure. All right, that's it for this video on updating and backing up your WordPress website. I hope you enjoy it and I'll see you the next one. Take care. 31. Elementor role manager: Wordpress and elemental user roles allow you to give different access levels to different people within your company in order to better manage what they are able to do, and also to prevent certain errors from happening because unexperienced people are changing things about your website. That's why we're going to take a look at the elemental role manager and the default WordPress roles. In this video, you can add new users and added the permissions that different users have on the user's page within your WordPress dashboard. And now you can only see this if you are actually an administrator for the website. But as you are the person that created the website, you will have the rights to do this. Up here on the Add New button. You can actually add in a new user if you want to. So let's just quickly, quick click on that and see what actually happens. And so we have to specify a username. We can add an e-mail address and information about the person. Now it's important for us is that down here we can choose the role of the user. And this is really important to keep in mind because this will allow the user to do various different things based on the role that they actually have. So let's actually go over the different rules that we have within WordPress. The highest role is the administrator role. This is the role that you have, again as you create a website, and this will give you access to plug-in. So you can actually add or delete plugins. You can add or delete pages. You can make changes to the website. So you can like edit a theme and things like this. So you have the full control over the website. And anybody else who has this administrative role as well. We'll also have full control over the website. So this is really important to keep in mind because if you give this out to that maybe one of your employees or one of your co-workers, then he or she might be able to do things that you don't want them to do. Maybe it's an unexperienced. They will even like a mess of the website. So please be careful in giving out the administrator role. I would recommend that you actually only have one or two people that have this role on your WordPress website. Cause we have all these other different roles that have much less rights than the administrator, which will make your website much safer if most of the people don't have the admin role. The next row we have is the editor role. And this will allow the user to create their own post and to publish their own posts, and also to manage other people's posts. So this is a great role for a, an editor that has control over different other writers for your website. So if you have a blog or a news website and you have maybe like five people writing articles, then one of them should be the editor that is able to then go into the, into the articles that other people wrote To approve them because he or she has the power to do that. Next up, we have the author role, which will allow you to write your own posts and edit your own post and publish your own posts. But you won't be able to edit any of the posts that were written by other people. So you can pretty much work on your own, but you can't have access to any of the things that were done by other people. T