How to design Websites with Elementor Pro: WITHOUT EXPERIENCE | Paul Okoduwa | Skillshare

Playback Speed

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

How to design Websites with Elementor Pro: WITHOUT EXPERIENCE

teacher avatar Paul Okoduwa

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

45 Lessons (3h 47m)
    • 1. Introduction

    • 2. Brief WordPress Installation Workthrough

    • 3. First Look at the WordPress Dashboard

    • 4. Understanding WordPress comments

    • 5. Adding Pages in WordPress

    • 6. Quick Summary

    • 7. Understanding WordPress Post

    • 8. Working with Media

    • 9. Adding New Users

    • 10. 2 Using WordPress Tools

    • 11. 3 Exploring WordPress Settings

    • 12. 4 Paying for Free Software the GPL Licence

    • 13. Getting Started With Plugins

    • 14. How to install Free Plugins

    • 15. Exploring Paid Premium Plugins

    • 16. 8 Premium Plugin Shops

    • 17. 1 Getting started with themes

    • 18. 2 Using widgets in WordPress

    • 19. 3 Creating menus in WordPress

    • 20. 4 Using the WordPress Customizer

    • 21. 5 WordPress Theme Editor

    • 22. 6 Wordpress Free Themes

    • 23. Custom CSS

    • 24. Premium theme shops

    • 25. 1 what We Will Build

    • 26. 2 Elementor General Setting

    • 27. 3 Setting up the Homepage

    • 28. 4 First Section Setup

    • 29. 5 First Header Section Style

    • 30. 6 Creating the Second Section part1

    • 31. 7 Creating the second section part2

    • 32. 8 Elementor shortcuts

    • 33. 9 3rd section with styling

    • 34. 10 Assignment

    • 35. 11 Assignment answer

    • 36. 12 Creating the About Section

    • 37. 13 Adding the 5th section with a button

    • 38. 14 Creating the blog section with template

    • 39. 15 Adding the testimonial section

    • 40. 16 How to Create Menu Links part1

    • 41. 17 How to Create Menu Links Part2

    • 42. 18 Adding a Footer

    • 43. 19 Working With Responsive Mode

    • 44. 20 Rounding Up

    • 45. Course Conclusion

  • --
  • 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.





About This Class

Hello, my name is Paul Okoduwa. I decided to produce these video tutorials as I spotted a gap in the market for a basic step-by-step linear approach to building websites, just as I do with my students. The easy-to-watch videos accompanied will enable you to systematically build a complete website from scratch using WordPress alongside Elementor pro.

Every Video will progress you further until you are proficient in creating your own web pages. I’ll also provide you with WordPress and Elementor Pro-related theory. I’ll provide you with design tips and where you need to go to source Royalty Free images and videos. Finally, I’ll offer you some suggested steps in how to select your appropriate Website Colors/Colours.

I’ve been designing websites for the past 7 years and started my own web design agency a few years ago. 

By the time you complete this course, you will have the techniques, skillset and confidence to build and develop your own website.

It's a lot of work but in the end, you will be able to develop websites as an individual or small business. 

what you'll learn

  • Create and Build a Professional Website without any previous experience.
  • Install and Utilise WordPress
  • Install and Utilise Elementor pro
  • Build an elaborate website that's based on a website that was purposely built for this course
  • How to select appropriate colours for a website
  • How to design, build and apply Elementor Pro widgets
  • Utilise a number of Elementor Pro common widgets on your web page
  • Build and apply global widgets within Elementor Pro

Meet Your Teacher

Teacher Profile Image

Paul Okoduwa


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
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.


1. Introduction: Hi, welcome to this course. My name is Paul. I'm going to be your instructor. I am going to be teaching you how to compute what WordPress websites for yourself. You use element or attribute an amazing and a stunning websites for yourself. All videos are being created properly. It doesn't match the show beginner, if you're someone who is an intermediate or advanced in using WordPress, I'm pretty sure you're going to benefit really, really wealth. Well from this course will walk you through from installing WordPress if you did your first time to installing Elementor plug-in to use an element of login to design your own website for yourself. And I love Elementor because 2. Brief WordPress Installation Workthrough: Now that you have been able to get a domain name and you've been able to secure host there who switched install WordPress. One of them is a solid online and the other is to install it on your local PC. You do, you design an idea after you move it into, into your C pointer or you hosted somewhere else. To install it on your PC, you need XAMPP, which is a local sable, and you would need a WordPress file. The WordPress files can be downloaded from Just like we understood before what Bresson itself is free. It is free for each it was used. Wordpress is a CMS that is used by virtually millions of order or the entrepreneurs and businesses like yours. So two years was press is free, it is open source and anyone anywhere can use it just like we had before. Some of the reasons why WordPress is good, because it is SEO friendly, responsive, it has high-performance, high security. That's the reason why a lot of businesses use it. Since you want to install locally, you first of all have to go to and get WordPress. When you click on gut, WordPress isn't download a zip file and you would put it in your system. I'm going to be dwelling on this course. We are going to be installing WordPress treat up on the C pile, but I assure you and against give you a bonus video that will show you how to install WordPress on your local. Several. I will log in to my soprano, put my username and my password, Click Login than immuno and I click Login. The soup on a dashboard might be a bit confusing at first. By should keep on using it as you keep on using it, you would see that you only need the select few of the features. You do not need the entire features, just a select few. So what I am interested in soft calculus up in store, It's a free app install lie in your SIP 10, though you can use to install thousands of applications. Clicking it, it will show me all the type of CMS, which is content management system, all the type of CMS I can install, and all the type of pre-written script that I can install. All my superego does WordPress, there is Joomla, there is opened cart, there is bunk, there was pH BBB there is, there are lots of them. All of them are used for simple projects, different types of projects. I want to install WordPress. So I will click on the WordPress installation, which is what I want. And after clicking on it, I will see the number of WordPress installation and a half. But this is not what I want. So I'm going to go back. One I want. So click, I want to click on Install, not the installation. I will click on Install and screw down. Where you scroll down, you would see that WordPress has several versions. As at the time of recording this course, the litres passion is version 5.53. We'll click on it. Select the domain in that I want to register on WordPress arm. Either is excess L, then I will click on the HTTPS. But if there's not, I will click on the Mississippi, my, my domain name Kim with an SSL certificate. So I'm going to click on HTTPS. Most of you, when you are installing WordPress, you would see this fuller hair WP, please wipe it away. It is not necessary. Wipe it away so that your your web presence dilution will install in the public folder. So the name of my site, I would put it as my business website or my business portfolio. Then my site description. I relive it that way because I can always change it. My username is admin. Both can be anything I like. My name is Paul. I'm going to call my username port. It could be anything. It can be. I mean, it can be a funny name, it can be a pet name. The password is very important. It's good. You copy the password and put it, paste it on a on a shit, press it on a notepad way you can easily see it. I'm going to paste my in a browser. So after that, I will go ahead and say, in straw, I don't, it's not necessary that you are PJ you have to pick a team is not necessary at all that you have to pick a team. Now, I'm now going to pick in the team. I'm just going to leave WordPress like that. So it went a straw with the default team. I will click on install. Installation time. We take only a few seconds, but it might take two to four minutes depending on how fast Jay Internet is. If you have a very, very fast Internet data to install as fast as possible. See, we are order. We've installed WordPress in our system. But let's see how it is. I'll click on the category of energy, which is the domain name I'm using to assess my WordPress website. So this is the way a new WordPress website would be. You would have the hello word, you'd have the simple page. You wouldn't have the name of the name of the website and also the tagline, way screw down. You'd have a few post and a few we get is what we're going to be learning about as we move on in this course. Also, you have a chance to have a chance to visit the administrative dashboard. This is the way our WordPress dashboard looks like. This is where we are going to control everything that is Abilene in our site. 3. First Look at the WordPress Dashboard: Let's take a look at the WordPress dashboard. She would see you have the buttons on the left and you have the display on the right. And you also have several questions that are all over the place. They're almost just similar thing, just like the one you have on the left. On the dashboard, you have the post media pages, comments, appearance plugins. This is all what we are going to be talking about as we go on in this course. Also we screw low. You also have the WordPress updates, app updates. You have seminars that are coming up and you also have some quick way you can assess, assess your, you can access the WordPress features. You can write your post, you can add an About page, you can set up your own page. These are very easy steps when you just make a new WordPress installation. Wordpress gives you all this. So it will be very, very easy for you to use ACI. You have the pathway says value prefer C. My name is Paul. That's the name of does my username. We have the edit profile and we also have the login logout. Also, when you click on the new event seat asking me do I want to add a new post media page or Asia? This is the number of comments on your website. There's a link that links back to your website. So this is your full WordPress dashboard and we're going to explore everything on it as we move on in this course. Remember, everything that you do affect whatever you are displaying on the front end. This is, this is usually called the backend of your website because this is where you make all the customization that you want. Why this is the front end of your website, because this is worth the user sees the visitors to your website. This is what this c, This is how do we interact with whatever you have done on the back end. Let's go ahead and take a look at the majority of the features by dashboard and what exactly they do. 4. Understanding WordPress comments: When you set up your posts, the researcher pages, visitors are going to be looking at it when they have questions. All they're very into whatever you've written, then they are going to leave comments. Comments are ways visitors in your website give you feedback, communicates with you and tell you if what, if what you're doing is awesome or not, it might be a way for them to criticize your work whenever your criticized, do not take it to heart. It is just a way for people to tell you that, Hey, I'm sure we at you have to improve and sometimes they don't call it and also desk payments. Those are the ones that you should really avoid. On Click another comment, you would see the first default comment, that concept, what price this is? This is done by their one press Enter so you can delete it or you can leave it a real dependents. And when you look at this, you would see on an approve reply, quick update added spam and trash. So whenever someone leaves the color for you, and it's very good to go through his first before proving it dangerous. Allow every everyone to leave a comment for you and comment Go life, it is good that you approve it first before it goes live. Remember this is saying on a poof, that means it has not been approved. And so when you check the post, their present commented on, it will likely not work. And also, you also have your own comment. You can also leave a comment on your website. You can also require reply to all this comment is a submissive. You and the person who left a comment, you both are Charlton. They would get an alarm that you've commented on it. And also when they do do two, you'd also get an allowed ourselves to commit a great comment, a very huge, and it's a very good way for you to get feedback on your website. 5. Adding Pages in WordPress: The buffer media, we also have pages. Pages are ways that individualist of visitors to your website navigate from one page of your site to another one. What present itself is made up of all pages, pages, and post. So these are two of the most important part of a WordPress website. Disseminate where we have it in media where we have a new labeling the anew similar to we have all pages. Are we having me? Let's click on all pages. The all pages we have two default pages that comes with WordPress to add a new page. It is similar, just like adding a new post. Click on Add New. And I will click on the name of my, of my page. So let me just say about us. There. I would write as many things as possible. This is about, this is about worse. So I'm going to double-click, double-click it, and just paste all over the place. So then when I want to see if I've done something good, I will click on the Preview. Preview investor. This is the way the pages right there. Then let's go ahead. If I wanted to stay, I will click on the Publish button. Then the page will not go away. And time, sir, it is very important. You can see this is our our URL is slash About Us, which is very, very good. So let's go back. One reason why it's very important that you research your pages and talk about the information you want to pass out before creating the pH is because it takes a whole lot of time for you to come up with for you to come up with all the page and all the contents and all the designs. But when you wake up one morning and just to everything now, it doesn't, doesn't really make right, is very good that you plan your pages before Christendom. Very, very good. Else you would end up working in circles and you would end up changing too many cents. Consider x, you consider your readability, consider accessibility and evil. Watch more. 6. Quick Summary: Congratulations on getting this far. You are such a winner. So far we have seen how to guess how would your WordPress, we've seen how to install WordPress on our remote server. You have seen how the entire WordPress dashboard looks like at high works. We talked about post in our previous class. Tell me about media. We saw would pitch stories, how to add new pages, and how to see the entire summary of our pages. And we also saw how to use comments in our websites. Why comment is why you should approve some ways to just let them go. As we move forward, we're going to see how to set up our WordPress or success. We would see how sir, How's it create users? How to check out how to use the WordPress choose. They would see what plugins are and what they are not. Why we should use paid plug-ins, our Wij, well, we should use free plugins. The advantages of using paid and advantages of using free plugins. So let's jump right ahead in the next module. And so we can keep on learning and see how we can use what price to different websites. So let's go ahead and learn. 7. Understanding WordPress Post: First, let's take a look at post. You should take your mouse over it. You would see on our post our new categories and tags. And now that you have begun to use WordPress, post is one part of what price that you would hardly get tired of. You would have to use it over and over again. Because that is how you send messages. That, that is how you will communicate with your audience via contents, video, and any other type of contains they tend to add to your website on a regular basis. First, our posts will show us all the number of posts that we have on our website. We click on the add new, we would be able to create a new post suggests ticket in mind, post a 100 percent equal to articles, just what you call articles on people's website. It's actually called post on WordPress. So when I say add a new post, I'm simply saying add a new article shows that when I say either new asic or article must not be test. It can't be a video post, it can be a audio post. It could be a normal, it could be a, an animated posts, depending on what you think your audience would like. Then you have the add new, you have the categories. Categories are similar posts that are grouped together. Similar posts that are grouped together. Tags, tags are similarities among post. So if you're writing, it's 10 different posts that are very similar and they are talking about the same topic. You can easily tag for all the tempos. Are you able to find them very, very easily? So let's click on the All post. So this is what we have. We have just one post, so we'll be able to see just one space click on new, new post. So you would see the new editor. This is the editor that shows us that help us to add new posts to our website. First or at the post title. I could say my post title. So secondly, I will add other elements to my page using Box. Blocks are quite easy to using WordPress. All I have to do is click it. When I click it Albia which add a paragraph, an image, a heading, or quote, a gallery, at least on and on and on with it. All you have to do is to simply click it. So this is the post. This is my paragraph. I would say this is my pair. So this is my paragraph. If I'm done with that, I can go ahead and add another type of, another type of elements. So I can add image, I can add a heading south the head. Now, this is my two. You can see how easy it is for you to come up with post. I was supposed article was using WordPress. If I'm satisfied with what I've done so far, I will go ahead and say preview. What preds gives me the opportunity to preview on desktop, tablet and mobile. So I will click on Preview on a new tab. So you can see this is my post do when I just started. This is the paragraph is my heading 2. This is the title of my post. So it's very important that you do all distance. If I'm, if I'm okay with it, I will click on publish. Everyone everywhere will be able to see it. So let's go back and explore the others. Then we also have, okay, we have a split, Add New. Now we also have categories. Education categories is very similar. Secretion post Josie, you don't have a BI dashboard to walk into. I will click on categories. And now I can add a new category, I would call it, okay, I could say working with us. Then the slog. This is how people will be able to find a category so I could see it working. Then if it has a parent category, I would I would click on it. But since it doesn't, I will go ahead and click Add New. It helps. It's a good axial. It's good for you when you add a description to your category. So click on Add New. And working with us now has become a category to add any article that got to do to this category, I will go to or post, or new post, whichever I may prefer. So I will click on quick edit, then choose the category it should belong to, and move the other one. So this is one of the ways, or several other ways you can add categories to a page. 8. Working with Media: I know you have never seen a website without images, without video, audio, animations and what have you. It is almost impossible for you to have a website which has all those features these days. That's the reason why media in one-price, it's very important. This is media. This is where you will store all the files you want to use. Though most times it is important for you to store your things for mostly in the Nazi give you a website, a lot of speed. There are some fellows or you would likely not be able to do without. You would want to put your images, your logo. Sometimes when you're doing regenerations, you definitely have one charge your PDF, put it inside your video. So when people download it, they will be able to, you'll be able to put your, your PDF inside the media. And so you'll be able to share it with other people. And also D2 can download, I learn from you. So you have, we have two buttons and the media, the first one is the library, and the second one is the avenue where you click on the library. You will see already existing images that you've used on your website. This see if this website has one. These were perhaps no image to populate this place. You have it in a few way. One of them is to add new. Clicking on the add new will enable you to find images in your PC. Add New. Then I will click on Select. And I will just click on this. So you can see that miasma of low file size is one GB, which is very, very large. Your old Phi side might be different from mine. You can always go ahead and increase the file size if you cannot as good, or you contract your hosting provider to help you do that. So now I have the image, I have, click on the Add New, and I have the image. This is how you upload lots of images on your website that will enable you to communicate your offerings a whole lot bigger. Mind you, too many images on website is not good at all. It's paused. The user experience. 9. Adding New Users: Every time you log into your WordPress dashboard joy user, every time someone leaves a comment on your platform or on your website, the person also easy user, just that both of you have different sets of the assessed level. So to assess, to setup the user, you would go to the left-hand side and see Isa. When you put your cursor ahead of it, on top of it, you would see all users are new and your own user profile. Let's check out the Euler's first. So what ways will show you all the number of precedence we're currently logged into your website or who are currently registered user in your on your website? What is have different type of visa, but you wouldn't know until the sides are near. So when you decide to add new, you would be able to add the person's username. Say I want to add a username, cord support and email support, art. Clavicle. That column. Firstname, let's say the first name is John. And the second name is though, the website. We don't have to feel old the entire all of it. So the website, we don't have to put it. And for the password, we don't have to say shoppers show password or not. We can copy this password and send it to the person. And the person will be able to use it as a login password when logging in as a, as a user of your WordPress platform. And the most fun parts of this platform is the role. So you have a subscriber had the role of a contributor, auto editor, and administration. Be very careful before you make someone that I missed out on your website because the person can do and undo. The president can even delete you as the owner of the website. So it's good that you, that you make people either an editor and auto contributor or just as simple subscriber. So I'm going to choose the relevant editor of a support. After choosing the row, you go ahead and add new user. You can see now the New World for this person is the digital and the business name is John Doe and the username II support just like the way we login into WordPress as sport. This person also will login as a username support and enter the password. Let's click on a deed so we'll see what details in there. So we can see this person can customize WordPress, depress the way he wants. So I'm going to say light. The username is support, it cannot be changed. You can see, and also you can change the firstName, the lastName, and also you can also change the password. So let's generate a new password for this user. Generally password, I'm going to copy it so we can use it to log in. Then I would say of this user. So I want you to logout of the, my, my own WordPress dashboard for this user login support. So let's see how we spread our support. This is how we spread our support, execute PPO, RT. So let's go ahead and logout login as support. Then with the password, we just copy it and say login. So as you can see, the user dashboard is restricted. It is not like the, I mean, there has everything. But for default digital, the most important thing an editor would do is to add post and read posts. And a dtau only have the writer Tuesday he or she needs to carry out his job. So be very careful whenever you are making you're adding someone share website, choose the rural wisely and make sure only presence that you think will be of immense potential and help to you. And restrictive, right? As they will be able to change things, a website, they will be able to do so many things that you couldn't even imagine they will do. So be very, very careful. 10. 2 Using WordPress Tools: Now that we have seen how to create different users on WordPress, let's logout and login into admin dashboard. So we can talk about 2s. 2s are great way to perform non-routine task. In what price they used to perform tasks that you do not do all the time. Task like a spotting phos from what price? And importing files from another WordPress site into yours, checking your site health and a spokesperson our data. So let's click on the Export and see what he does. Wordpress is used by millions and millions of people. So it is good that you are able to work using WordPress and also work with previous data from other website to get started with using WordPress juice. You first of all have to install it. So by clicking the Install now button. So after clicking the installer, you will round in the importer. This is assuming that we want you bring content from, from Blogger into WordPress. What we will do is to just browse and import the XML file. That's the way it does. Wages just browse, import the file as Spotify from Blogger and imported into WordPress. And it will save everything like you just did it in WordPress is we save the user, is if the content is, you save all the comments, tags, and also category. That is how easy it is. Also what allows you to export. So I'm clicking export. You can export all your contents to all the websites to it could be a WordPress to your WordPress blog. It could be one price to blogger depending on the platform you are migrating into. What restaurant, a breach or sport export all your content. Are you going to support just a post? You can split only the pages and you can also export just the media. You select the one you want to spot a spot and click on Download. You say download as sport. Where you sit, download a subset. So we didn't have so much on our website. But nonetheless, it asks us to save it. And it's going to be saved in an Extensible Markup Language so that you, Why you save it on your PC. You can also import it into another context, into another content management system that you're using somewhere else. Another very important to with what price is checking your site health. This, you can see if you're really, if you're really, you can check out the hysteresis on your website when you click on this eye health. So we can see that the site had for this particular website is good, where it can also be improved. It telling me, It's telling me I should do number one. Number two, improve my PhD. I did my PhD, Russia and fixed number 3, good, is going to turn to something else. It should be even much more better. So I can check the info of my, of my entire WordPress setup. Check the info. I can see the word preservations. I can see the active team that I'm currently using. So this just tells you if you are working well or you are not working. And lastly, WordPress gives you the opportunity to as Spot young personnel data. So none of them is shown. If someone is registered as a user or yeah, someone is registered as a user, you can simply, if someone have lead their data on your website, probably the person is an administrator or maybe an 80 or a subscriber or a contributor, you can easily send them their own data. All you have to do is anterior immunology, such births WordPress will send them an invite, tells them to confirm your request and send them the data. All by itself. Sonata, which, whose work you can download more 2s or the way you can remove some, you can add some depend on what you like. It's very, very extensible. So that's it. About 2s. 11. 3 Exploring WordPress Settings: Sessions are the holy grail of your WordPress website. If you said it very well, Daniel bunch duo, but you don't, then you're bunch of bricks, things similar to the choose, such as found in the left part of the WordPress dashboard. Just at this time, it has a whole lot more options for you to consider and configure. On clicking this button. Onclick and settings were open to the general certain way we can set up our site title. Tagline. Tagline is just a fewer dies planes what your site is about, like I said, our site address. And also as we go down, be able to set up an assertive male, which is very important when we are setting up our email. Also we will say the new default row. So when someone comments on our website, what we'll do we give to the person, we would say subscriber, it's good to leave it this way. Also, you can configure your language. I'm English, so I put my English hair. But if your polish, if you're Romanian, of course, you can change your workplace language. So your time zone. For now, my timezone personality iss plus one. So you can go ahead and change it. You're putting your time zone, your date format. You can walk on it, your time formatting and walking into when you are done, click on Save, and that's about it for a general searching for WordPress. Also, next we have the right-hand. In lots of precedence, use what Paris as a blogging platform. They're always right, It's not a time and teaching that content for, for their users to read, to read. Choosing a blog post categories is easy. What was has a normal default category that comes with every WordPress installation and that is all categorized. So since we have just one category, we can choose it where if we have say five, well for we can choose the default category that every time we make a post, that is way to go if we do not choose a category ago. So and we also get to choose the default port for light. There is standard, there is a side, there is chart gallery is good to leave it on standard since that's different. And what places would normally use a pink those days. Sit out whenever you make a new update on your website, it will ping all these other services. You can add a lot of other sites that what Press Campaign part is not so important lived which used to be because now search engine not cross your website every now and then, I'm picking up signals when you're done. Also with this, you click on Save. Also we have the reading. If you are using your WordPress website primarily as a blog, you can leave it this way. It's as perfect as the way she's also, how many content do you want your block to show? 1010? And also do you want to show a flu test or a summary? Summary is the best way to go. And also, do you want to stop search engine from indexing your website? I don't think you want to, you want it, you want to click this because it's good to our last search engine visits your website. But if you're using your website as a family, as a front facing corporate website, as a foreign facing landing page, you should choose the static page. It's a tonic inch from your blog into a static page. Then you select the homepage. The homepage is that page where he uses fest land on when they visit your website? Server would say probably our homepage is our simple page and our posts page is about sars. So whenever you make a repost, it will go to you Albert, ours, and your, your homepage, which is your landing page, will be your simple page. So my end you lots of questions will always say, call the opposes page, blog, or sometimes they'll call it the article, whatever you call it, or you have to do is to come to the region surgeon and change it. Sound click on there. So if citizens here too, Let's head on to discussions. Press is, is all this matter of what prices are set? The default setting is very, very good. But also you can, this is very important saying you must be registered and logged in to come in. Some websites. You can go there and just comment the way you want us by Schillinger details. But some other websites that are very private, especially forums and membership websites, you have to be registered to leave a comment. But the other part, so if you don't want to be disturbed all the time, when someone leaves a comment, you don't know, you don't want to be notified because if you run a website that people leave comment or the time, you would have a very, very filled in, you would have a field in bus advisable. You uncheck this, so you don't get so much primer, you don't get so much pure person's hitting your inbox or the type comments must be manually approved. Yes, it is good because lots of passengers go ahead and leave bad comments on your websites. And so you just good that you manually approve them before you make it visible on your website. So there are few other things that you can check out. Avatar is your person and their logo. So you can see this is your avatar. So whenever someone leaves a comment, this is the fixed I would show like a very, very scary face. So that's about it for the discussion part. You can go ahead and play with it, break things. So boy, you can always, always come back to correct it. And let's go to media. Media is fairly straightforward. The default, the default size is good for every website to nil size having a weight of 150 PXE and a height of 150 PXE. So if you're not comfortable with all this, All the size of images, you can also go ahead and change them. Then the pen blinks, families, our so-called pretty links. It is a permanent URL for every post and every page on your website. Good, so make it WordPress friendly. The previous version used to be the plane. This is why he used to be plain or numeric, but now the new versions of WordPress automatically optimize your, your permalink for you. So anything aside, anything aside plane. It's very good. But I personally always go for the post name because I think it is more SEO friendly and it is more straightforward for users to understand. To change that simply go to your post name, suggests you post name or you can switch it to Martin name their name or first name is what I usually go for because I think it's more SEO friendly. So click on the save. Last you have the privacy policy. Go, go ahead and choose a privacy policy page. What first comes with one that you can update, that you can add your own privacy policy on and just use it as the default. Sit with Sutton's setting your WordPress website, it's good. And as you install more, more plugins, which we're going to talk about later, you would see you have more and more and more options on your setting dashboard. 12. 4 Paying for Free Software the GPL Licence: Have you ever wondered why anyone anywhere can use WordPress, can install WordPress, can do anything they want with what breath, and not getting penalized or punished for anything they break, or why you personally can install WordPress on your local PC or new remote server and not get penalized for anything you do. It is because of the GPL license. The chickpea last census, the lessons that was written by Richard Sterman, it is called the general public license. It allows everyone and anyone to modify it to use and redistribute Every an OH, part of WordPress. It is because of the GPO laughs and satisfy. Anyone can download and run WordPress software, anyone can modify it, anyone can redistribute free copies of the software and anyone can distribute modified version of the WordPress software. Also, it is because of the GPL license. That is why people can use SEM team or SEMP logins for multiple websites which are getting point lies or sued by anyone. It is assumed that everything on WordPress is free. Gpl license makes most of the team the premium chain, make them free. You're wondering why, right? Makes them free. It makes most of the premium plugins, it makes them free. People always go back and forth. Should plugins be free? You plug-ins not be free, but a GPL laughs and says, Hey, we can go ahead and do anything and everything that you want with what press. Even though there are so many bugs branch site using plugins and themes licenses. But nobody is going to come against you, but you're going to lack a whole lot of things when you tried to use I don't unless says plug-in and also analysers, team towns to the GPL license you are able to use what price we are paying for it, pesticides in right. 13. Getting Started With Plugins: Plugins are bits of software that can be uploaded so a stand and expand the functionality of our WordPress website. They are very flexible, they are very useful. They are tons of things ordinarily what press will not be able to do. But because of plug-ins, you're able to do them using WordPress. To find that a more abrupt again, you would go to the dashboard and click on plug-ins. But you would see that you have, you have installed plug-ins. You're able to add new via the Add New button. So we have to add new button, one on top and the other one Benes, the plug-in dashboard. There are lots of things we can do here. We can update, we can activate, we can delete. To activate the plugin. It would just simply click on the activate boxing. So we don't want to set it up. We'll go back to our plugins straight. So you can see that this plugin has been activated. Hence, the reason why you are able to see these green rectangular bar, say it's been activated now, but we can also go ahead and deactivate it too. And also we can delete it. If I asked you, I showed you want to delete, I would say Okay. And that's it. We can also view active plug-in. We can view plugins only that, uh, that are inactive. And we can view plugins where we see also updates disabled. So this is a new future in WordPress before now you have to update all WordPress plugins yourself. But now you can set all your plugins to be also updated. This makes sure that your website keeps us with compatibility and security. We will see how to add new plugin in the next class. Also we have here the plugin editor. So if you issue and not a developer, what breast gives you a heads up. If you're not a developer, it will not be good for you to touch it. It will not be good at ATSIC. Soviet activity plugins. You able to find them here and did living daylights out of it. If you are a developed Babele, if you are not, just go ahead and don't touch it so you don't really break your whole of things. So you just be able to select the name of the plugin new onto addicts, probably Hello Dolly. And he would say select. Then it should load all the codes. It'll load the codes. And it's a little different names. And you'll be able to and it anything you want, you're at it. So let's not touch this. And ledgers, folklorists are adding plugins in sodium, the new plug-ins, and doing whatever we want with it. But if you're brave and you understand how these work, show, you can go ahead and check you out. 14. How to install Free Plugins: What breaks has lots of Freemium plugins that you can use to do what, heaven, and whatever you like, as long as it's there on the WordPress and WordPress plugin straw, you can always go ahead and download it for free and use it to view all the plugins on WordPress, you would click on the Add New. These are plugins that are on your dashboard. Once you can see, all these plugins have tons of different categories. So if we choose an email marketing, let's choose on marketing. So I just clicked on marketing. So you can see there are lots of lots and lots and lots and lots of WordPress plugin that you can use for marketing. There's a sidebar for the share. There is keywords to link converter. Most use plugins are usually on top. So you have matching for WordPress market into a kid biopsy investor. The more the feedback and the more the good comments, the more most of them appear on top, most of the time, the ones that API on top are good, but they are not necessarily good all the time. Simone, reason why you have to read reviews. I have to check them out. Some more about female. Let's see the definition of a freemium. If female is a business model, especially on the internet, whereby basic services are provided free of charge. Why a more advanced features must be paid for? This is according to the Oxford dictionary. So most, lots of business do it. Most of the plug-ins here allow you to use their basic features for free. Why you pay for the advanced features to fatigue, for example, opt-in monster, I say we'll click on the store now. And we click on activate. He would see where's our optimal C would see where it says get started. So we scrolling down, scrolling down, scrolling down. So you can see that, that Ultima say, saying create a free account or logged into an existing account. So most of the things you would see here, they are all paid. They're not free, they are all paid. So you can connect your website when you want to use most of the features, most of the big features, like I would say, say you want to use a full-screen pop hop, you want to use an inline pop-up warped in muster will ask you to pay, especially when you want to use the gamefied see to ask you to pay. They will tell you they have to subscribe after a setting, obtain before you can use most parts of the plugin. You will pan for the premium plugins. I think it's very good that you search and search and search a whole lot more to find a free plugin and duty things that you want to do. It's not like they cannot do it, just that you might have to combine if one or two plugins to be able to do the same thing that a premium plugin will do. 15. Exploring Paid Premium Plugins: In the last lesson, we talked about the opt-in monster, which when stored as a free plugin from the WordPress Dashboard. Let's go ahead and see how much to charge if you're using the premium service or open a different tab and type in obtained monster. So this is it obtained monster. Then click on the uprising. So who screwed down? So you can see that for the basic features, they are charging you five-dollar, 85 cents every month up to for the advanced features, that would change your techy $1, 85 cents every month. These are all the features you will get when you decide to opt-in for one plant or another. So it has a lot like the first one it says you'd have unlimited campaigns. Second one is say's, you'd have everything in basic. The other one it says you would have everything in place and lots of other features I had. So the plugin is great, right? Very, very good for using it. Enable you to generate leads and WHE get more image sign-ups and enable you to track conversions. Optimal SRE is a very, very, very powerful, very powerful software. But if you're willing to do all the work, you will likely find all these other free software that will enable you do what you want to do. The reason why people use premium plugins is a factor. You will get full-time support. So you can see there's a customer care agent. This customer care agent is always there most of the time they offer 24 hour support when you purchase your software, if an always talk to them and if anything breaks, that developers will be looking forward to helping you fix it. And also paid plug-ins are very compatible. They're very compatible with the recent WordPress upgrade. So every time there's an upgrade, every time there's a changing WordPress. Those companies who are often paid what prayer service, they are always in line with all the new upgrades of WordPress. So for the free plugins, you might not get as much support. You might not get as much updates because it's free. You're not paying for it. Both for the premium plugins. You will definitely get their support. And also if entity would break, you would know will reduce your chances of having security breach. It will reduce your chances of having this head loss. I should make sure that you comply with the recent whatever standard. If you think you have the budget, it's advisable for easy go with premium plugins for all the things that you would get. 16. 8 Premium Plugin Shops: At some point in your WordPress development career, you will likely not be able to do without premium plugins. They're very important to make your life easy, especially if you don't do not code seriously or you're not a very advanced available premium plugins just make your life so, so easy. Could Qian is one of my favorite places, one of the easiest and the best place to get premium plugins. They've been vetted, they've been looked upon, so there is likely not going to be an error when you purchase them. You have lots of plug-ins, warranties and return. So WooCommerce, there is ultimate membership pro there is what President Martin plugin, lots of plug-ins or you can look out for, and you can do that for, you can do that at a very, very cheap rate. Say for example, if you're doing like telemetric. So you see you can even implement telomeric on your, on your WordPress website. I mean, these are things that you need a lot of developer to do, like you need to have less money for you to achieve. By C, You Can Save Video constituency easily add appointments, sections, high-quality Zoom integrations. There are lots of other plugins that you can explore and their plug-ins for the ball, they have gone through quality checks. Are you really don't have anything to share when you're buying plug-ins from cocaine. And other website that I like is plug-in The cell very similar. Plug-in with cocaine. Very similar. And they also sell from the They also sell from established company that they're trying to push new plug-ins into the market. And they also researcher you combined membership from her, combine yearly membership and use the entire plug in f of $3. You combine a lifetime membership for one 1997 gown permanent. I saw this time of recording this video. So you have to do is login and select the plan you want. Hi, I'm buying a lot. There is elemental Yoast terrify. You can see how cheap it is used for the, for the, for nine. What presses WooCommerce. But difference is that is good. You buy from a place like could care because you're going to get support. Somewhat other websites you would likely not get support or you go straight up to the vendor's website and by then you will get support and you'll get all the needed help. So we also have Tim Press, Tim president have so many changed and I have so many teams is a good place for you to buy plug-ins to do. Didn't have a lot of options where you can see the various currency, not so many options, but it's a good way for each gap logins. For me off all the places to buy plug-ins. Event to market seems to be the best. They they offer very good support service. They have had very good quality checks. And so the DNC good easily with a vendor's website. So anything as you're doing and Vento is similar to what you're going to do on the vendor's website. So I think she asked me that, I think is very good a goat and the venture market. 17. 1 Getting started with themes: It's been great hanging out which used so far since the beginning we've been talking about the other will be talking about the WordPress dashboard will do less blurring what the dashpot can do. And so now we're going to finish it up by exploring the appearance section of the WordPress dashboard. So yes, the appearance, we have teams we have customized, would get. We have menos, we have background and we have team editor. We're also going talk about free teams, are going to talk about premium teams. And I'm also going to show you a few places where you can also get premium temperature. Let's get started with Teams. I'm going to click on it. So what price column with three, with three different forms. It comes in 2020, 2019, and 2017. If you're making a basic blog or you're making a basic website, or maybe you're using a page Buddha district teams, they walk really regret. They have very good feature as a resize very well on mobile. They are laptop responsive. They're very, very good for you to use and it's free so you don't get to pay any amount of money for it. Teams formed the backbone of the offered price. You can't do anything on WordPress without installing a team. The team is what controls your page layout. It's what controls how your test would be. It's what controls your menu. It's what controls the colonise. So your team setting controls everything on your website. So that's why when you're, when you're, when you're looking at installing attain is good that you check, first of all, go through the documentation as to what the team can do and what the team cannot do. We can check out determined details by clicking this button. The 2020 team is majorly designed to use the WordPress block editor, say x0 0, if that's what you intend to use for your designs, the 2020 theme will work really, really good. It has very good typography. It has some very good color as you can peek. It comes with GetState can use for your websites. So we're going to talk about it. We'd get later, Let's go back to the teams. It's just oral route. So you can do a lot with the 2210. So if you want to switch your team to a different team, or you have to do is to go to the other one and say activate. Well, first of all, you can do a live preview. And when activate those do a light freeze your first. So the live preview is basically to show you the way your content is going to appear on this new team. Say to tell you to check it out before you go ahead and say activate. And if you're okay with it, you just go ahead and click on activate and your entire website, we use the features of this new team. So you can see the 2020 is yay. Now, why we have the 2019 overhead? If we also wanted to switch to just one and we simply go ahead and activate every team that you add to WordPress will stay in this team section. If you add in your team, if you stay in the section, the module team, you have this particular dashboard populates, you can delete a team from here. You can only delete when you go to your supine ELF files. Are you? Yeah, you go to your dashboard and deleted from there. See you can't delete anything from her? I do not know you there's a plug-in for that by know for sure that if you try, you can't, there's no way. There's no delete button heresy. You cannot delete your team from her. So next, we're going to check how we'd get and see what we can do. 18. 2 Using widgets in WordPress: Welcome back. You will find that we get below the customized sexual in WordPress. So I'm going to click it. Each team that you are installing WordPress comes with its own available with jet. It's changed and not all Tim can use oil you would get in WordPress, especially the free teams they all call Medea own. We'd get a you can use for your team that we're using right now. You can see it has archives, audio, colander categories, custom HTML, gallery. There are lots of, lots of width gets, if only the opt-in monster plugging that we installed a while ago has its own. We get Let's go ahead and open open the website so you see how we get operates. We get, add some functionality to your WordPress websites, shut courts, and other functionality to your WordPress website. So with Yale, we have this set would get sack and such anything on the website. We have the recent posts with GAD. This is called the archive would get, we have the recent comment with get. We have the METAR would get half the category with you. Can always on in smoother we've got RNA can also put it back. These are all the weekend we have already. So we have search recent post, recent comments archive and considering to remove them, you simply just have to say delete. As all we have to. Remember that we'd get is adding additional shocked quartz and functionality to our website. Let's just say we'd get us somewhat like plugins. But they're not as complex as plugins, but he just add similar functionality to our website. So now we've moved all the way to get from here. Let's go ahead and refresh our page. So as you can see that we get they've all disappeared because we're moved them. Let's go ahead and add one to add and navigational menu. We will click, we're just simply pick it up from there. Drop it here. If we want to add a video, or we're simply tickets for mirror and pulley here. So if we wanted to add a category where we simply take your hand, put each hair, we can always drug are we get opened now I guess so we can rearrange our width get simply by holding and dragging it. This particular team has just a foot high. We'd get some team have head and we'd get some have the left sidebar somehow. Right sidebar. Some of them have double foot hours, up to three or four photos. They will be f2 toward future too. A tree for the four, depending on how robust the team will be. If we go back to our website and refresh it, you would see that we now have this we get appearing on our website. This is the category would get under category we have is uncategorized. The reason why other ones are not showing is because our website and have those features yet they're not available, has the reason why it's not display less at the archive would get C. You see that we can always add, we get to our website calendar. So we get, let's go back here and say, Okay, let's put a title and say post calendar. Safe, visibly tightly to our archive. Who'd post and say safe. So we've given, Let's put dog category, my category and say save the video. Oh, we just have to do on the video is to take a video from our dashboard. Sarah, I'm going say either video, self-exile, we can remember you can always input video on WordPress via a URL. You don't have to always take video from your PC. You can always include it via a URL. Not sure if I have a video here. So I'm just going to pass on this one and go back and refresh the page. So you can see we have the colander where we have the colander Hannah. And now we have old post, which is the post archive. Then we have the category. So that's it for we will get just help you to add additional functionality to your WordPress team. Saw you can do your users can have shortcodes and some other parts of your website can be visible through the front-facing part of your website. 19. 3 Creating menus in WordPress: As successive wave for users of your websites to navigate from 1 of view or websites to another one. For WordPress, it is quite straightforward to create. A minute. We'll go back to our website. We would see that we do not have a menu or to most time you have horizontal menu, you have vertical manner. Your menus can be at the middle. It could be the left-hand side, or it could be on the right-hand side. Most menus on the right-hand side. Somehow like a convention that you have the logo of your website on the left, and then you have the memories and the right. So let's go ahead and add a menu. Medulla on what price your menus are majorly or pages. Know you can have your menus as your block category or as a blog post by it's more of a convention or your menus are your pages. Let's see all the pages we have. So we have two pages about page here, the privacy page. We have this single page. Let's add in an abridged our site. Click on the Add New. So I want to call this page my home has it. I want to call the page. I would just put them with tests. These a's this is my home. Then I would say Publish citizens, my home nurse. So I went to grow back. So now we have one page about our home privacy policy and simple page less than i simple page tell blog. To do that, I click on the Quick Edit and turn it into blog and say slug, It's the blog. Let me make this a capital P. And I will screw down and say Update. Then remember we launch it by setting before. Now. I want you to make the homepage, the default front facing website, which is the landing page. And I want to make this blog page, the post page. So I will go to Setting and say reading the homepage now it's set to as the blog and the postpaid is set to About Us. I want to change starts the whole page. I'll make it home page or a blog. Then, and I'll go ahead and click Save. Now it's time to create matter. And their parents tab. Go down to the menu. Click it and see though we don't have many yet. Most time, lots of WordPress users or WordPress developers always use the word main menu for the first mayor. So you can see I already have one here for the first menu. Then I would say, make it the primary Meno probably manner is that menu days at the top, then automatically add new top-level pages to this menu. What it saying? Hey, it's every time I create a new page, just like we always had few said a few minutes ago. It automatically added as a metal, as a menu option. Every time I create a new page. Much caryatids, so you don't want to create it all tick, tick this because you might have a 100 pages on your website one of these days. And all those 100 we call the menu, which is not good. So instead, just leave it as the Permian Meno, the footer menu appear at the bottom of it. Social Links menu mostly appear on top of the primary menu or immediately below the permeant manner. Then I will go ahead and click Create menu. So now you see we have the managed location in Virginia is Hannah, the multi-location watching this error, which is the main Meno. But we're not going to worry about that. So what Nest? We would view all our app pages and simply click, click, click, then Our tomato. So I sent home blog and about, and click on safe. Then we'll go back to our website and refresh it. So you can see now we have home blog and about us. And now this is our homepage now which he saying, this is my own, though there is nothing inside of it. We don't want to convert, customize it. We just want to talk about the menu. If we click on the blog, is it across our blog post? Now you see we have blog post for a click on the About or sticks us to be About Us page. This is about stars. Go back, click on Home. It goes back to the homepage. So that's the way men and men whose work. We can always customize menu. If every time you wanted to, different websites will calm a different menu options. This is a free team and so he's not as flexible as a pitching. Also all the things that we can do with manners. We can also add custom links. Say I am inviting people to another website which is less tremor agency website. I put the URL link here and say, let me just call it agency, then see at men. So it is the costume link. You can see the title of the link is called a costume link. And if I want to add a block category as my menu, I will go ahead and say a view or I watch this category as in many of our ticket and see our two minute widespread automatically accept and click on Save. Now I'm going back now it's a refresh. So you can see we have the agency, the agency will link back to a different website entirely. When I click it, it will link back to my agency website. Sooner you have, this is the agency. Now we have the website linking back from own website. The reason why it's like that is because it's a constant link. And we'll, we'll click on this, which is a category not in his found because there's no post for this category here. If we had posed in this category, it will display all the post it's found in this category. So that is the way men is. Work. Menus are very straightforward and honest way. You can use them. 20. 4 Using the WordPress Customizer: Irrespective of detain you are using, WordPress gives you the ability to customize your page, customize your blog page, customize your homepage, and customize the look and feel of your website. You can do this simply by going to the appearance menu under width, click on Customize. Here you will see a couple of options. Options here will depend on the team you're using. If you're using a pay team, it will likely be a whole long list of options. Now we're using a free team that conjugate WordPress sold in a number of options you will see here will be very few. So under customize section, you can change your team. We don't want to do that right now. We can turn our site identity. This is our logo and we can click on Change Lucas, change it. We can add our site title and also the tagline. Then we can work on the colors. Now we have the default color which is blue, continue to something else. Click on Custom. We continue to something else that will continue to pop, will change it to red, or we can change it to some other color depends on what we think is right? So I'm going to do a green. Then I'll go back. Now we also have the menu. We already have men and which we're using now, we can create new menu. We can add to it to create new menu, click on create new menu and say I will add a primary menu. And I want to call it something as colleagues say manner and say, Next, we have a second menu and that's what we use. So you can see there is no menu item here yet. So click on Add menu item you would seal. We can add the home, we can add the blog. I wouldn't have to add any other C. We have the blog. The blog and the home menu is showing up, so we don't have to add any other. We can add all three F12 or we can even remove it. Remember the We'd get we talked about. You can also customize your we'd get from this page. Simply click on the width, get. You can click on it and remove it. Click and remove it. You can also go ahead and add new. So for one either we click on Add a New would get and we will see all the width get who have or that team. So all the we get that is suitable for this team was CDM or hair. We're going to add a gallery. We can add an image, you can add a colander, this article in the first, let's call it event. Then I've added it. Unless I add another we get cord met her tank. So it's a matter of either this we get now. I said I want lastly and call it, let's call it a search bar. So say search site. So we're saying Darn, it was cooled down to scroll down to the bottom of it. You can see we have I learned. We have our sexual now metta section showing our site. I mean logout entry feed comments. And we'll go down, we'll have saturated. And lastly, we have our Homepage section. This is where we said what's going to be the homepage on what's not going to be. If we sell it to our latest post, then it will change. And it will show just our blog mostly that we can use the navigation albedo to navigate to other parts of our website. What would click on this static page? Then we want a front-facing part of our website where people will come and notice or find out what will do immediately. Last, we have additional CSS. We're going to talk about this later in the course. This is where you will add additional styling to your website. See you are not comfortable with the fonts. You're not comfortable with the font-style. You go ahead and change it, write your own custom class, your own custom CSS, and you go ahead and change it. But we'll talk about this later in the course. If you're all clear with all you've done, simply click on Publish. Now you've clicked on probabilities. That means everything you are doing now as taking effect. So you can, you can change it in the tower. But for now, if we go ahead and refresh, you'll see that that said, that same effect has taken place. You see the meadow is great. We have our home here, we have the vent, we have the Meta tag, then we also have the search, say. So you can see all the changes you have made have affected the homepage of our website. So that's the way to use customized customizer in WordPress. Don't forget, all teams cannot or will not come with the same customizer options. So we'll review and some will be not much more. You will always get clue on what to do, how to do it and where to do it. We use the customizer option in WordPress. 21. 5 WordPress Theme Editor: Wordpress isn't just for Novus or for beginners. It's for everyone if you're an S, but it's also for you, is you're right cold and you're an S Patton writing cold, then what? It's for you to hear because it gives you the ability to stretch it, to customize it as much as you want. What purse comes with abusive editor and you can use to I did attain, you did the look and feel of the website. You can't do the things you like. You can add more and you can remove some took to assess the editor, simply go to the Appearance and click on Team editor. Teams are the bedrock of which WordPress is built, because without that team, you cannot use WordPress. It is difficult for you to customize what price without a chain. So when you open the team, you will see all the pages and all the scripts that form the particle axiom that your user. So you can always, always go ahead to editor. As you can see by the right-hand side, you can't see the customizer. You can see the templates. You can see commerce Consider Tim footer and header, image attach my template. Everything that you are seeing a website is right here. And also we had the option to select the team we want to edit. Now is the 2019. All the team that you have on your WordPress website will be shown here. And so you can click any of them and customize it. Say we want to assess the comments dot PHP, what base is written in PHP? So we want to assess it. We simply click on it. And it will then open that by glass section on WordPress. These are the line of codes that controls your comments section of your WordPress website. If you're good with it and you understand what you're doing, you can always go ahead and tweak it. You can go ahead and update it. And also there are lots of functions here. You can see all the functions on this particular PHP file. You can see it all. You can see all the functions there. You can look them up. You can learn more about the functional and what they do, how to do it. So you can read up on it and do not make mistakes. Once you're okay with all the Adichie made, you can go ahead and say on this show, most of them come with an extra shout him, there isn't as ciliary don't break things so that when you make mistakes and when you break things, it doesn't affect the entire team, but only affect the child team, which can always delete once you take your Wendy child team and you deleted WordPress restores everyday or website back to the way the parents team look like. So it's good that when you're using WordPress and you're making edits, you do so to the child team since you can always override it when you do so to the main chain, it is very difficult for you to override. You would have to break so many things before you start working. Over and over again, you simply click on update file. Is you, okay, you are done. You are sure of what you've done. Simply click on update file. But I must warn you, you do not cold, you're not honest bank, and you don't really know what you're doing her dog onboard ISS in this far because any line of code and you take away my end up affecting the entire WordPress website, you will definitely have trouble trying to fix it back. Another option would be to contact an Xbox contract and S part programmer to change things for you they are not comfortable with or probably someone to explain things for you. So you don't break things? Yeah. One person, one forgive you if you do break any of the systems. 22. 6 Wordpress Free Themes: Apart from the WordPress content management system being free, lot of other things are free when you're using WordPress. Wordpress gives you the ability to install free Tim to select from thousands and thousands and thousands of free tools that you can use. First, we'll go to the Teams. As you can see though, we have a couple of team here. We have three teams here, and we can add more. Every new team that your audience, your WordPress, you will find them. You would find them in this dashboard. Every new team your art to add a new team and to assess what Press Three team, simply click on add new team. So as you can see, we have a lot of team here we can choose. There is one here called 2020 Warren is the latest stream. For what price? There's one is Scottish, there is GMR Jie Jue de. There are lots of them. So we should pick at what risk team depending on what we want to achieve. Like this is an online store. We can use these for a magazine. We're going to use this for an official landing page. It really depends on what we want to do. That's the way we use WordPress. If you know the chain you want to use, you will simply go ahead and search it here. They are coupled team that I like a lot. One of them is the team extra. This is it. The strikes him. It's very heavy, very fast. Does the, does want in the chain is really fast. It's very small in size and very easy to customize the StratSim. I can just go ahead and click on it. When I click on it, I will see the detail of the entire team and see the way it's going to look like when I install it. You can see the team has a five-star written form 4,834 presence. Well, and look at what you've got. The team is just 50 kilobyte. It is less than 50 kilobyte on the front end. That means your website will load was sold so much speed that you can't even I mean, it's going to load with the speed of light emitted. Say that. This is the way your website is going to look like when you install this thing. But you don't have any you can install it from her if you want to. You don't have to go back. Simply click on the backside and you go back. Another team I love a lot is the elemental team. The Elementor. Hello team. Yes, this is it. I loved the elemental Hello team because it is lightweight, it is plane. It is easy for you to use IVs, the elemental team a lot which we are going to be lending in this course, is so easy for you to use it. So straightforward, it loads the way we fostered and most of the audit team I've used. And it is so good. But on this course, right now we're going to install the stretching. Don't forget there are other teams. If you're using an online store, you can go ahead and search for his shop team. And you will see lots of it. You will see a lots of it. You can see, I like using the shop AT team chapeau. It's one of my favorite chain when it comes to building simple online store, you can check it out there. Lots of teams you can use for your online store. And to enable you to set up the set things up as fast as possible. You can see the number of online store teams you have. 596. This is just the one that's showing up, but there are lots of other ones that you can use. The three sharps, I have tons and tons and tons of Teams. Now you can select from. So we also have a feature team to charge him quiet, very popular among lots of persons. We have popular teams. These are some of the most downloaded attain on WordPress, downloaded a whole lot. So you see we have extra, we have the halo chain because they are very good team. Yeah, the latest you have favorites and it can also customize your search feature. So this time we will click on in storage in a story extra team. So after installing, just like we did previously, we click on activate. And now this is the team we're using. We're using the extraction now. So if we go back to our homepage, you will see that we are websites have changed already. So you can see now we have a homepage, we have a blurred, and our website is looking great already, even without such anything, touching anything just by clicking on the homepage. Let's see how many items we have on the customizer remind showed you that your customizer really depends on the tame your user, the number of items your customizer depend on the chamber you're using. So let's click on the customizer. So you can see now we have a lot, we have a lot. You have a lot of Global Head of breadcrumbs, lot of items in our customizer menu. And you can go ahead always on customize it the way you want to. More options comes with more beauty and WordPress. Yeah, More Options common to a lot of customization. And so you can keep on tweaking it and tweaking it to you get your desired results. So you can always go ahead and customize your team. You can see we have lots of options. We have, the header has lots of options besides identity transparent header. We have a lot of options on this team that we can always set and we we can always customize it what we want. We have the foot out with gerd, we can customize it easily. So go ahead and get your hands dirty. Tried to customize things. We are going to see the beauty in beautifully simple project media strikes him at the end of this section of the course. And I'm pretty sure we're going to have fun Buton there. So next we're going to look at protein premium change and wait to get pretty much James from. 23. Custom CSS: No team can have everything that you eat the way you want it. Know, Tim can have everything where you want it. Sometimes the fonts might be different, sometimes the styling might be different. The heading, font size might be different. And not have things might just be wrong and you want to trick it. What Press gives you the ability to tweak the look and feel of your website by adding additional CSS. Simply go to your WordPress dashboard and click on Customize. One-click and clicking on it, you'll be shown a familiar dashboard which we have used before. Scroll down and click on additional CSS. Yeah, you'll be able to enter some styles that will affect the entire website. Css stands for cascading style sheet. A good place to learn about CSS is W3 It's a very fun place to Lenny by CSS. You can see this is the way CSS code look like. This is the way syntax for CSS will look like. It'll tell you what elements are you styling, your style in the body. The H1 P is for paragraph, which is for heading, and how do you want them to look like? So similarly is what we're going to do on the WordPress Dashboard here. Saving once you start all the H1 tag, we will simply say hitch on. Though we are not covering all CSS, we're just writing day. So you would know that there are extra weight is styled team apart from all the team gives you. So we can put a color on it. Color, and we can call the color pink. So you can see a whole now it's pink. I see it. It's pink, know? And we can say font-size. You'll give it a font size of 20 pixels. Let's say 20, 30, px. And also we can give it a font weight. If you do not understand what I'm writing right now and don't feel so bad about it. Just go to W3 and Lenny for you and you'll be before you know it. It's something that you can learn on the day, something that you can lend over a few hours of just practicing with it, you might not be perfect, but at least you know everything that I'm doing right now. So we can also style they. We can also add more. We can study the entire body tag and change the, the and change the color. So every HTML element, every element, the agency, your your home tied, everything is inside the body tag. When you say the body tag of the word press element, it affects a launch event in lots of things on your website. So let's go ahead and say Buddy, and we give it a color. We give it a color of green. So you can see, you can see that are colonized green. Our column now is green. So you can see everything will be green, even the search bar, it's green. So you can see it will be green and we can change the font size. Can change the font size to say, 14 px. So you can see it's way, way smaller than it was before now. And we can also work on the head and shoes and let's say age to color. As we recall, a yellow as you give it, let's say history. Let's give it a color. Red. So what we're doing right now is that we are styling the stallion, the elements of the page. And we are we're just starting the elements of the page. And once we are okay with what we have done, who's simply click Publish. So click. Let's visit the blog and see if the AP style is going to reflect there on the block side of it. So you can see our page now, our blog page now it's still green. So this is the way you add custom CSS to your website. You can keep on styling. You can even start the, you can start the paragraph, you can start the title, you can tie all the elements on your WordPress website simply by adding custom CSS. So a good way to do that. Remember I said you can go to W3 school and learn CSS is to teach you almost everything there is to know about CSS. And if you want to duly those of CSS everyday from advanced, from adventitious or simply go to CSS, tricks of calm. You actually cause our fresh. You can always, the articles are really, really fresh. You can't find awesome everything. Hey, CSS, I mean, everything you see here is how to do things. We see access everything, everything to draw. You can then actually draw with CSS actually create table has a query so many things with Sarah says, and it's really beautiful way you know how to do things that I don't have. 24. Premium theme shops: Looking at the abstraction we talked about last, you can see we have the more options available in Astra Pro. Most of what Preston developers offer two options for forever team, the BWT. They offer the free part and they offer the pro part. The free version has a couple of features, while the pro version have so much features. So they want you to use the shot and see how you like it. That should like it. You can go ahead and use the profession. So if we click on the provision of the abstracting, you can see we have the Pro, you can see we have starter templates and we have the pro, the pro con. Whole lots of features that you can use. If you're just going to buy a onetime it costs $1, which are going to buy chair and a mini agency. And you're going to be using over and over again across 135. And if there's another one called agency bundle, because one I had nine. So you can see all the features that are available to you depending on the options they are chosen. So and that's why the good thing about protein is that they give you real-time support and they give you reach. I'm upgrade when you're using a feature, there is no so much attention on the free time because it's given to you for free. But when it's pro, or you bought it, you're going to get real-time support for a very long time. There's anything wrong. You can always reach out to their customer care service. You can always call, you can always leave a message and D will definitely respond to you as fast as possible. And so they have testimonies. This chimp can, can integrate very well with WooCommerce. You're going to create an online school. It can integrate very well with an online school. It integrates so well with lots of other teams that you want to use. So I have some favorite places online where I get teams, though. I bet a lot of WordPress website from scratch using the page builder, but I see how to find him sometimes one of my favorite plays a steam forest. Forests. You can get lots of WordPress stream. Some of the best WordPress theme that you get, the hair on, Tim forest. So we can click on, let's look on the WordPress theme. So you can get him again, searching for isn't nice. Click on the WordPress theme and you'll see you have a lot to choose from. This particular theme is wow, this is one of the most popular team when it comes to WordPress. And have you done, has ceased 149,300 sales. Say you have the 17 and 17, you have Gb HR team. These are some of the most popular team on WordPress. Then you have the less popular own like go, Yeah. Met routing. The fact that lots of people are using it should give you confidence, but that doesn't mean you should install it. It doesn't mean you should, to know what I can do for you. Simply click on it. You would see what they offer you like. Yeah, they offer you, you see the quality checked by an Vento, give you a hosting of the ecosystem of support. You can extend this to 12 months if you've been additional $18. And you can always go down and see the integrations. You can see the integrations. You can see some of the way you can use the tame, a video conference with its own page builder, which is on page layout. So you can just use a page layouts to beauty or WordPress website from scratch the way you want it. And if you want to check out the preview, you can click on Preview straight. And you will see the way it's going to be when you put the a demo contents, said we will have a demo content on it. You'll see how it's going to be, how your website is likely going to be. But really most of this demo contents have been worked on really, really fine. They've been walks on by professionals, by graphic designers. So if your website is not all like this, do not regret it. It's a very bad thing at all because they'd been worked on by professionals is going to take time for you to get to this level of professionality when you're using your own particular website. So you're going to learn, you're going to learn, by the way, you online store is going to be. When you go down, you would see the kind of layout they are bringing. And you can click here to see a lot of demo. It has a lot of them options that you can pick from. You can always pick from one of these themes and just gain inspiration or you can install all of it. It's a seed which came to be if you're building a winery website, this is beautiful. This is so beautiful. We're beautiful. Red wine. I love great way. Red wine, white wine boys, why? This is the way this show is going to look like. They've been professionally done by amazing graphic designers. It's going to take a lot for your website to be like this if you're building from scratch. But it is something that you should try. Another place you can get it from is the elegant team. Differ that divert him is one of the most popular team and what risks? Aside, a Vidar is so popular, it comes into its own page. You can see it. Lots of people are using it. Lots of developers are using it. We don't really need any other thing. It should so powerful, it's so powerful when you get it, once. You can use it for Soo many things, so many things. This device and only one team magazine. There's also, there is an e-mail obtain social media. Again, it has a lots of layout that you can use. C has just similar to a Veda. It has lots of layout. This agency, there is restaurants, there is the one for a creative agency, an online store for flourish. So you can click each one. You can click on each one. So we're building for its software design agency. We can click on each one and see what it's going to be less in a live demo. So we're going to see a live demo for an app development agencies. You can see this is going to be, we use it. You can see the ISM animation, beautiful find animation for this. So all these, it's positive made possible because of the team, if the team were handicapped today's except you're using the page builder, but you should just start from scratch. It would be difficult for a Phrygian to get you. Or this. Go ahead and explore premium teams from Tim forests, from elegant. Go ahead and check it out and let's see what you come up with. I mean, you're going to have to buy them, just go from one of the websites and other city features, any type of change you like and see the one you'd be interested in mind. 25. 1 what We Will Build: So now that you're done with the basics, now that you know majorly how to use the various tools and various sections of WordPress. We are going to move, moving on to the other section of this course, where we will use a new tool to build a very responsive website in new page, beautiful, tribute, a very responsive website that you personally would like. In fact, in particular, that can be built in fact, the pitch period or convenient virtually almost any website. You could imagine. Cell, it's the elemental Elementor page builder. You can also get it from It is paid by four because you are taking this course. I'm going to, I'm going to leave a religious ration for you. So on the folder here you will find this course material. You're also going to find the latest version of Elementor. You can see it's a page builder. You can use it to build an amazing website. Cheek is elemental to do tricks like this. You can use it to build very piece of profit website. It doesn't matter the type of websites you want. There is a max of what you want to integrate. You can integrate various integrant may change. You can integrate. If I mute forms, you can impute, you can insert videos, you can write your own custom CSS. You can do virtually almost anything you can do you wanna do with WordPress using elemental. So that's why we will be using it. It's one of the most popular page builder in the words, with over 5 million in storage. So you can imagine like 5 million developers what designers like you use Elementor. That's how amazing it is another perfect days. It used to be in your store. These elements attribute virtually, almost anything you could imagine. That's why we're using it. So then though they are tons of resources, but we're just going to be skipping that so we don't get, so we don't get bored and we don't get submerged inside all the information here. But this is the tool we are going to be using when we are going to be using a paid version. And we said we're going to be using the free version. Or for the start, we're focusing on free version of reducing low paid an adventure using any paid features. So don't be scared. Just go ahead and install elemental form your plugin, plugins section and bam, you have a dough, you're going to get there. And then how cheesy. But this is what we're going to review them. It's beautiful, right? This is what we are going to be viewed in very beautiful single-page website. That's what we're going to review them. So bought now part we will take away the Meno and replacing it with our own single-page websites in October doing I like the electro website because of the because of how simple it is, the color, it's simpler. The color combination of black and yellow is very simple, very elegant. So that's one of the, that's the reason why I love it. So you have icons, you have brands, see imagery. So it's quite, is quite straight to the point. And it's easy for, It's easy for beginners to build this type of websites is not something real difficult. But once you follow this step, the step-by-step instruction in this course, you'll be able to do something this amazing. We're going to go straight in store and you plug in and start building this website. So I have all the picture. So the pictures for this website is going to be included in the folder. Once you purchase this course, you're going to get the pictures and everything that's used on this website. So let's go straight ahead and start designing this website. 26. 2 Elementor General Setting: So welcome back. Sit. The first thing we have to do is to go ahead goods or plugin section, click on Add New and in-store the Elementor plug-in. And that's the first thing you want to do. So we go here and search for elemental. So search for it. We're going to install the elemental website better. So this is what Jen straw see how many precedence using a whoop and 5 million persons. So we're going to say in store. So click on Install and now it's stored in Activate. So now we have activated that for everything to go. And very well in elemental, we have so easily tamed was very well. Though Elementor works very well with the current team we have. But since we're building everything from scratch, we want, we want a team we're going to use to work perfectly with our new plugin. I'm going to go to the Team section on the Appearance and click on Teams. So now I want to change the, oh, okay. I want you to activate. The Destin is tracking this what I want you to activate. So I could just click Update first. After updating, I will then activate the stretching, which is what I want. Then I will click on activate the StratSim. It's a very minimalistic, isn't it's warm using it with Elementor. It's one of the best filled in you can imagine. So we're going go back to our website. You would see that it's changed a bit similar. Click on it now. So it's changing not because of elemental, but because of the StratSim that we just added, not because of Elementor at all. It's not changing because of elemental, it is because of the stretching. So I'm going to go back and nest. I want us to go to elementor and set it up. So click go to elemental and click orange, the second elemental, click on Settings. So we have post types and we say post and we say pages. If one elemental to appear on just the pages, I would uncheck it. But if I wanted to appear in both, I would then check yet. So it says disabled different colors. If you check this. If you check this is to make sure that any color user elemental will not work. It will only it were inherited default color from the chain. So also you check this fonts you set on elemental will not work. It's an inherited the same. So we don't want that data sharing. You don't have to deal with this issue, so careful about privacy. So we've got to star, so we can have, we can find the sysadmin somewhere else. So this I-System has moved before now the succession used to be where it is now inside the elementary teacher. So we'll go there and set it up. And also this is the advanced. They are all set up correctly so you didn't have to really do anything. But if you think you want to change anything here, you can show, go ahead and change it. But we can say yes, we want to load fund for. So we can use, you can make good use of all the icons that comes with it. And don'ts, I just click Save, just click Save. And now we're done with the, with the generous segments so we can see our custom fonts here. If we go pro will be able to do that. We can see our custom icons here, but we have to go pro to be able to do that. We can also check out our 2's. So we can see we have various choose her. So we have regenerate CSS file sync library. We have the same mood. They have the bugbear, replace via URL. So we have version control. Version control. It's good, it makes you and make sure that you're able to recover what you've done before Sally, she's done something before. Select Today's go. And you just imagine that today you do not like what you've done. You can roll it back using Prussian control C, you can roll it back to the last row, elemental back to the previous question. So version control is saying you the way it works. Say you did something in a few days ago and he didn't like the way it is. You can roll it back to the previous version. But in this case, in this case, if you've installed maybe elements treatment nine and you're not setting, if you do not like the installation, you can roll it back to the other passions of Elementor. So lastly, we have the maintenance mood. This is, this is really at the site, is temporary down. So you can say click on the comments soon, Lithuanian communist, and then your homepage will change. If we change that, if you click or click this, there is no temporally Yeah, nikola coming soon, then the cell will change. If you click on the maintenance, then the site itself will change. But that's all we actually do. The other part of it will just go set it in a elements your dashboard itself. So that's, that's, that's that. Next we're going to blend in houses, setup our homepage. So that's that. So that's that. Next we're going to be learning how to setup our homepage. 27. 3 Setting up the Homepage: So, so remember that this is where we're building are beautiful dress and we're just focusing on this alone. We just fixing the homepage and the homepage alone, nothing else. So that's all we're going to start doing. First. Let's go to, let's go back to our page, provides elemental and click on Pages, then add new. So I'm gonna say, I'm gonna call this page to home, as I'll call it. Then instead of hitting publish, I would say Edit with Elementor. So you can see at the bottom here illustrated elements or do not click Publish. Just click on this one and say Edit with Elementor. So now this is it. You can see our page. We just have the header and we have the photo. There's so many things that we can do here. But first we need a header and we do not need a photo, at least not for now, what we can do is that we click on the setting, then go back to, go back and say elemental canvas. When we say Canvas, just imaginable way Canvas is a lays like a drawing board, like a drawing board that's empty. That same way, our design is going to be empty. The colon is the elements of full width. This is the default which is a full width, but which we want to be a Canvas. Click on Canvas. Then I, then I would just click safe. Sometimes it does like this. Then click on Reload. You don't have to go through all this process a lot of time really, you click on the Canvas, a safety. It reloads itself and gives you a new Canvas. So we can see now the entire page is empty. There is no footer, there is no future anymore, and there is no header even when you minimize it, you can see there is no football and there is no header anymore. So that's why it's, it gets very, very interesting. So we can go to our settings page now and we'll see the status. We have the draft, we have pending review, we have private and we have published some drafts. You see design in it. You're not done designing your just keep War II, just working on it every day. That's going to be a draft. And then we view as it needs the permission of someone else. Or maybe you are done, you want to review it or your dorm and it needs permission of someone else for you. Let it go. Then for the private, you're the only one who can see it's published by, you're the only one who can see it, both for published its public now. So it's not private, it's public. So once you hit the Publish, anyone anywhere when a browser and it's connected to the Internet, can easily use it for our title. So if you click years, normally with specificity are tied to her, well now we're using a canvas so the title itself will not appear. We can also go ahead and see if want to setup a burger image for this, but we don't know if you want to, you just simply click here. And you would see, you can choose from any of the selected dragon wagon image that we like, Buffy, Berg and image show, you definitely have to add something on the page which we're going to be doing later. So we do not need it now or legislated away. So you can see that you can always add a background image to your design. So we'll click on style again so we can add padding, we can add, we can add lots of pilots. If I give it a band of 50, you can see it's shifting. Or even the patent of a 100, you can see a shifting from all sides on the top, from the left, from the right, shifting from our side. We can also give it a background type of maybe an image, a color, a single color, or a gradient. A gradient a lot. So when I give it a gradient, I can say from your two or maybe here, which is not so Cu, not so cool. How can you say everything I want to, it doesn't have a black. Like I want everything to be real black. So just move downwards and it's all black now. And we can say we want the color to be a bit, maybe a bit, not so black, maybe something like this. Firing rate. So that's the way we can always give it a location and say, Hey, we want it to be this way. But we really want this to be one Sibley like that. So we'll just go ahead and take enough we just go ahead and take everything off. So we also have the advanced too. Vance. We can do it, we can use it, but it's only visible and only useful when we have the profession. For now, we're not making use of a probation, so we're just going to stick with Woolworth gut. So now first we're going to be learning how to setup our global value. It's easy, it's very cool, which isn't a setup. Our global value is like our color, font-size. When we're designing, we don't really have to go back and forth, setting things up. 28. 4 First Section Setup: I remember in the previous lesson, I said we're going to set up the global sessions. But if you can see now, it's very, it's, it's saying, Hey, do you want to set your global variable? You have to go pro. So that's why we can do it. If we don't have the pro version, we can serve anything global. But with what we have now we can use it to design this website. We're only limited in terms of forms, templates, which we are going to do later in this course. First, let's go ahead and start a website and set it up. Let's go ahead. So I'll click the Plus Plus button and I'll click how many divisions do I want? If I want a full rectangle, I will click justice one for one to unclick the other 13. I couldn't hear the 1, 4, and 2, but the the left bigger than the left 70 percent and the right 30 percent, then I will click this, but I just know click this middle one because you can see that we have to. So you can see this is two and it's a bit different system like 5050. So we can say one of them, it's techy and the other one it's one of them is 40 and the other one is 60. Well, we can see it has equal space for the piece from the end of my pieces screen to the first letter. And also these also have equal spacing for my PC screen to the image itself. So we'll go ahead and choose the one with two. So now we'll choose it and you can see we have, we don't have anything yet until we put something inside of it. So we'll click here. But this is called instruction and this is called a column. So you can see this is called a section, and this is called a column. We have one section but two columns. So this is one column to another column. First, let's give it a width, a height. Let's give it a very, doesn't give me the height. So we can click will go to height on the layout. I think on the height would say we can sift feature screen and it should fit the entire screen, the entire visible part of the screen. Or we will just go ahead. You can see it's fitting the entire visible part of the screen. Or we will click on a section again and say min-height. So this, this right here, we want to specify how high it's going to be. So you can specify 400, 500 depending on what you're working on. But this time I'm going to give it a min-height of 700. So this is huge, right? Boy, you see, this is, this is equally, very, very high too. So we're gonna give it a min-height of 400. And we will make sure that our content starts at the middle. So our country right now is you'll start at the middle surgery or send the content that you've seen, the columns and the middle. But we can also change that. We can make sure that our continent sudden the middle, that it starts from top. So you see column position, we have stretch, we have taught, you have middle, we have bottom, and we have the default, which is the start in the middle stretch. It will start from on top but then flow down. So you can see, you can see starting from on top and it's flowing down. Then we have the middle, we have the top. It's just going to start from on top. It'll keep on flowing down for it to start from the top. When you, when you put something in the middle is strategy stays at the meter tube. So we can say bottom. So it goes to the bottom of the page you can see. But now let's just stick with stretch. So just going to stick with stretch now. Then let's go back again. The first thing we're adding, we're adding a heading, the heading, the platform for coworking space. I'm just going to copy this heading controversy. Then I will go to, go back to elementor. And this is my heading, which EAD RNG, this is for heading. So I'm going to click it. So you can see now this is my heading. The heading, I will replace the test. The platform for coworking space. Don't worry, this is the difficult for elemental headings, will definitely going to change it. So go ahead, we'll fix this other one. This is the other one. This is what we're doing now. So this is a subheading, so I'm just going to go ahead and copy the subheading two. And I will go Drug a sub heading into the column. So drag it. I can put it on top and I can put it below. But this time I just know put it below. So click it and I would replace the test. Yes, r. So this what we'll do, we'll go to open another browser section and paste the chest and then copy it again and put it back and pasted back. So you see it's different. Now why? The reason why we're putting it in another browser is just saw the formatting goes away. That's why we're doing it. So the famotidine just go away. And that's something that we're just watching working on this first section. So next we will add a button, does have one at the bottom says Get started. Now, don't worry about style in it. Just go ahead and add what you want to. Add a button. So we can also put up button on top. We can put it below. So the Abbasids below, as it were gonna do, say, it says Get Started. Now, that's what our body in space. No arrest. We have a video. That's what we have here. This is a video and this is, this is a video and this is a heading, and this is a link. A video link said, well, we'll do it as you can see, we have enough section, so we're going to add an inner section inside the column. C can add in a section inside another column, you can add as many intersection as you want inside this column. So we're just going to draw the intersection in and in a section by default, is to. An intersection produces two columns just like you have the outer section. So this is the outer section, and this is the inner section. So I'm going to click, I'm going to add a video as I'm going to add. So this is a video. So remember we have a video air, so that's I'm adding a video. So I'm going to add a vigil. And after the video I'm going to add the headings. So this is the heading. This is heading as I'm going to add kind of a drag heading right here. And just say Paste optimizing, opt, introducing objects. Then after I've done that, I'm going to go ahead and add a button. So we'll start at the bottom differently. So it doesn't look like it's clickable. So we're going to add a button, undo it. So that's what we're doing. So you see we have a heading, we have a subheading, we have a button, we have a video and another button. To go back. You will see that we have an image here. So we're going to add an image now. To add an image, we will say, we will just drag in an image right here. So you should know about working with, when you're working with image. Yeah, So understand sizes. If you want the right column which has image to display like the right, like the left colon. Then you have to give it some size. You have to give the image same size as the height of the section. You have to give you same size so it flows downward. So that's why you have to do. 29. 5 First Header Section Style: Now that we've added everything we need, Let's go ahead and style section. So it becomes beautiful. And so it's looks like what we have on this other section as go. So let's go ahead and let's go ahead and study this path. So we have a co-working space. Let's go ahead and style it. So when I started this, remember the color, hair color is black, so we'll go ahead and say color. We'll change it to black. So alkaloids black, now, that's what it is. Then we will go increase the font. So topography we will take on Chicago Field, we increase the font. We can say the boldness, it's 800. And we can say the type of font we want. What type of font that is to know the type of disease. We can just simply right-click and say inspect, inspect so we can find out the type of font. You can find out stars and let's ties you will be able to see. I'm pretty sure we'll be able to see the type of font, the heavier. So let's click on Inspect again. So let's say Inspect. This is Microsoft. Microsoft is a bit different. Let's go to the type of phone. See you like me, find the fonts. So you see the font-family is tempo. I doubt if we have this. And by the fallback fonts, the aerial have Issachar and san-serif, so we can use any of these. So let's see if we have shampoo in elemental. Let's say t, i, t d, m, we don't have samples, so let's go use have article. So I think there's a forward fold. And I think, I think I've actually got will work. So let's turn our font size. So this is the size we can use, the slider. Slide, I'm like, Okay, I think it's nice that we can use this slider, this what we're looking for. We can use the slider. All we can put a number ourselves. So remember, if I take this away is going to be wider than normal. So we're just going to leave it this way. So this is 40. Then we want to change the font of this other words. What did change the font of this other 12? Let's change this. Although I set the font-weight for this, let's change it to say six hundred and eight hundred. And then looking so bold suggestion is this Android and I'm going to increase the font again, say it gets bigger. Then let's go to the, let's go to the other one. So I'm gonna click this and I will go to typography and increase the frequency, say 30. That's way big 20, Sidak, that's okay. So this is 20, so I'm going to give it 500 and I'm going to turn it to have the article. So this is how vertical. So this is where where we are now. Then we have a guest solid body CC button. We have a button now. So we have a button and we'll see the bar graph for budget is, is white, but we move over, it becomes blocked. So you just have to do is to exchange it. So you have to do. But I think we should give this a black color, really should give us a black color. Give it a black color. I think that's fine. Then let's walk on the bottom. We'll go to our styles and we'll go to background color. Let's keep it white. Let's give it a background color, white, which is right now so you can see it because the text is white and the background color is white. So we're gonna give it a black. We're going to give the test as black. So we can see it gets started, it's showing up. And now we want to give it, once you give it a border, once you give it a border called solid. So that will have, will have a solid color around it and we give it a weight of one. So, so the, the bottom becomes very small. Now, this is where it gets exciting. So we have to give it a radius, a border-radius. So give it a border radius of say, 180. So you see this what we have now, look at what we have. Get started now, and this is what we have. So you see a buttons, it's more, it's not very big. That's what we're going to adjust it when we go to typography. But before we do that, see our UFO is not working yet. So I'm going to go to ova and just as change the color, make the text color white and a background black. So Hoover and make the text color white, guys, I want to do now. When you move over it, then I will make the background color. So that's why I wanted to make the background color red-black. See what we're getting. So when we take our amount of it. Black on white background. We take our mass to it. It is white background on black. So let's go back. Let's go back. Let's less than are the size of our body into large intestine, it's large. So its peak announcer with large know it's bigger. So if we take, Let's give it a preview and see what we've done so far. So we're close, we're very close to what we have here. Very close with the font is now here. So we didn't get it fun very close. So let's go back. Again. We have the video. We have a video. Now. Our video is coming from YouTube. We have. So these are some of the video settings which we're not going to really play around with a lot. We have overlaying, we have startTime, rough control branding. So we have to have the visual styles. So we're not going to do so much on this right now. We're just going to leave it the way it is, but which isn't a change the color of the image. So I'm going to reduce the frontal image and just turn it to block. Think it's black. So we turn it to black, which is 0. Then we turned, turned it to the font, which is the font and maybe say 20. Setting, that's what we have. 20. Then we'll turn the button to watch my video. I think that's what we have, right? Watch the video. The video. So that's what we have. There. We'll add an icon. This is called an icon. This, you have this arrow right here is called an icon. So we're just going to add an icon to it. We're going to get a row is an arrow, that's where it is. So we're going to say, so this is the icon we are looking for, long arrow, this oval looking for then is saying start, inserted after. Then we'll give it a spacing, give it a long space in cities where we're at. Then we're going to go to a star, protostar and just change, change the space and it's changed a Byron form convene to white as we're going to do and change the text color to black. And I changed it just color just like we did before. Change the text color to black and change the background color to white. So it changed the background color to white, opposite. So that's what we have there. So change the text color to black and the background color to white. So you see, it's looking like more we have here. So Nast, you see with school, uh, when we, when we hover over it, it shows a it gives it a bottom, it gives it a butter. Butter. And when we take off, the border goes away, we can only do so much hair because we don't have the wouldn't have the pro version yet. But if we had the profession shot would have been able to add motion effect that is very similar to what we have here, but we're just going to leave it off for now. Let's focus on image as before the image or the image. Click it. I want to add the same image like you have to click on Upload Image. I sifted before, so I'm going to go find it on my desktop. I think I'll save it as Website image, I think so. Here you go. So this is the image you're looking for. So I'm going to import it safe. So this is what I was, this is what I was telling you about. The height of the image has to be really good. So we can see the height of the image is very similar to the height of the entire test we have here, C ofs and make the height of the village really cool. So now I think it's good. So this is video. Video now, and we can specify the width. Specify the width of our video. So suits and make our videos smaller. So we're just specifying this so we can make it smaller. You can see that he is going to be way smaller than 40. So our video can be a whole lot smaller than what we have here. L says I got to see a video is a lot smaller. It's a lot smaller than what we have here. And we are doing v, Great. So next we're going to align, we're going to align this properly and add some spacing and then move on to the next section. So this is the next session we are going to quit. But before we do that, we're going to align this way properly. 30. 6 Creating the Second Section part1: So welcome back. Now we're going to give it some padding and margin. So glass plane padding and margin for you so you understand what it means. So we can see that we can see the mansion. It's the distance from one element and the other one. So we have two columns here. So we have two columns here and we have this, we have this, this is a section. The distance between this suction to the end of this canvas is the margin. But the distance between this section and this test, It's called a padding. So let me just go ahead and add a pile into this section so you see what I'm talking about, Sam clicker section now. So I'm gonna add a margin top and bottom. So you see, you can see it's just going down. It's going down from the top, from the canvas itself. Or watch when I add them apart into it. Here you see the chest, it just shrinks the padding to make it a 100. You will see the chest keep on shrinking. So but that's not what we want to do. So first, I want to give you a, I want to move all the, I want to move everything to the middle editor and this column on the left column transmitted, move it to the middle. So I'll say vesicle, I would say middle. No vertical. Now top, middle. So you can see it shifted it to the middle. Now, see the weights is now shifted to the middle. And that's, that's making more sense. And now I want to give it a padding. I want to give it a imagined. So it moves away from disorder, say moves away from these other although column. So I'm going to click on it and I'm going to give it a matching left, left, margin, right of Terry. So the reason why I'm given a, so it has space to breath, it moves away from these other column. So that's margin for you. You can also give, you can also give margin to an image. Two can also give imagine shall image, even though it's nice for you to design your image properly before using them, can also give imagine an HDR image. So we can say to one, right? So you can see it's small, so it's compressed everything. And also we can also give it a part of the tube. So in an image there is no such difference between the margin and the party. Not so much difference. But you can also give image can also keep just one side. You can give it a padding bottom. So just like the boss, it has top, it has side, it has bottom. It has left it as, so you can give it a margin bottom which you want to. You can click on the column itself and also give it a margin tree. So you can say that the margin is 440, can give it a party of 30 because there's no test inside, so you keep on shrinking. It adds the margin and the padding. So when we say margin 40 and give it a party, not 50, why does is that the total everything in total becomes 90 shrinks from all sides 90 to 95 percent. So that's what it's doing right now. So we don't have a need for this. We're just going to leave this alone. So for less creative next section, section, the next is shown as the, so we have the is like a service section. Like what we do is kind of section. So we're going to add what we do in R. So we're now going to duplicate this section too much. So we're going to say hard and other section, this section through it. And we're going to give it a margin top and imagine margin top mostly. So I have space to brief 50. I'm going to give it 50 is my favorite. So I like, I like having the whitespaces between two sections. So after that we'll go into 3 enough section 123. So that's three intersections can see it's 3123. Can A3 enough sexual or so. Let's just go ahead and add three inner column, sorry, not Sections 3 in columns. And we're gonna say our new column as number 1. That's never to have new coal industry, so we have 123. Now we've done that. First, we're going to add, so you see we have a border. We have a bottle bulb before the bada will show in each eye contact inside. If you look at this, we have an image, we have a heading, we have a test. So we have image heading and texture. Let's go to the same thing. So we are just going to copy the first test. So, but first let me, let's add the image. So we're going to add image. Don't worry about the size of the image. Just go, go ahead. So we're going to add a heading. So the head end is what the heading says, that we're going to test on it. So this is a test. Just copy the text and add it. So we're going to copy the chest. I'm just going to copy the text and add it here on my right. So let's do the same way. Let's go open another tab, paste coding to see. So we're going to paste it here. So we have our first. So let's go do the same thing for the other ones. So I'm just gonna do, I'm gonna do it as fast as possible so we can save time. Then we have a test 7000 copy. And I'm going to just copy this. So priestly on my time to remove the styles country compared again. And just put it here. So I'm going to do the same thing too. We're going to be something we're going to do the same thing. And we're gonna say update c, We have symptoms. So now we have connect with your community or copy that, paste it on the head in section. Then I'm going to take off for Uber community. So just like we do with a copy it, copy it, and put it here. So this is what we have for these other section. This is where we have say is looking good. Now, let's add something so that people know that this is a, let's add something so people will know that this is what we do, is what we do. So I'm going to add another section simply by clicking on this button and an a section and just put a, just put a new section. Then I'll put a heading here and just call it what we do. What we do. Let's just let me know we did not put it in the middle of things. So put up now, then I will take you away. I will sell less, less, just I think we're good. We're good Now. We're good now next we will think about with next we would just go eight. And now what we have here. 31. 7 Creating the second section part2: Welcome back. I'm glad. I'm super glad we're learning a lot today. So let's go, let's go do it. Let's turn sends out the color we're using. It's majorly black on white. So everything is going to be black. So we can see our callers, yeah, majority of our costs are black and lead to touch of yellow. So we're just gonna do that. So let's go First Style this. Remember we give it a pod and we give it a margin of 50 setups, right? This is way far from us. This section is way far from these other section. So let's reduce the padding top to say 30, since we're adding something to it. Let's, let's turn this to black. So we're going to turn this to black. So we're going to turn this to black. So after this, we will see some shortcuts that we can use to escape all this Rigo or changing colors. Then we'll increase the test color to 40 and reduce the limit as this Android tended to have article. So have Article 5 and drag that smaller slavery or 600 we use. Okay, so within equity canal. So let's go ahead and add the image. So this is the first one I think, or we can always swap it if it's not the first-order cell would say inside. So this is the first. And let's go alone. If they're not all good. So we add in the other image. I'm going to add this one. In what price you can add multiple images at the same time. So there's not in stock image form, clicking multiple images and just add in everything at once. Since this is a new course. And so we see there's a new cost that we won't see. I want to get everything, Clara, Sarah, you, you'll be able to see and you'll be able to understand everything that I'm doing. So yeah, we've added this already and let's just put it at the middle for, for mobile friendly sake. Certain ASM is that a meter now? So let's turn our let's turn our chest to tobacco. So we're just going to take the arrow down and that's black. Now, let's put it at the middle to split the middle. Say we turn this all sorts of block and ticket to the middle. So we take to the middle, so n will just increase the text. Let's just increase the test or beat. Turn it to have article. The reason why we are using a particle is so we have uniform test all over the place as reason why we use a logical. So we'll do the same thing here. So we'll put it, let's put it in the middle. Middle. Say we do the same thing here quickly. Will the same thing quickly. I promise I'm going to tell you a short way, a couple of shortcuts to just, you know, not waste time trying to do this for everything. So turn this to black. Turn this to black now. And we do have article. This time, the 20 natural, we're still turn this to black again. Crudely do it. Tends to block in the middle. Then we will say typography vertical. And we will see, Let's do it again for these other all. He would say 20. Return this to a vertical. And I think the color, actually we'll tell the color to black. So I think we're good. So we're good. Just as just general, just in the middle. So I think we're good now. But let's give it a less, give it a border. Let's give you the bottom. So we have a boat ahead and give me the bottom quickly. Let's give it a border style, style. Click on button. And we just put like solid and say 1, which is black thing, we're going to see it. So this is solid one I'd set. So the same thing. Let's give it a margin so we can see that we have spaces between both. So we're going to give it a margin and we're going to give you an insight party. So let's give it a margin first. As you get a margin of say 20. So get a margin of 200, can just give it a margin-left, I imagine right. So we'll give it a margin-right, petty and imagine left, Betty. So that's small, right? As he would 2020. So that's smallest. Let's give it a part in inside of it, 20. So we can see this is how it's going to look like, is that it's going to look like now. So we can do the same thing for this. Let's see what we're dealing with. Give it 20, Let's get to the top logistically, top 20. Give it up to 20. So I'm just going to get 20, 20 everything. So let's go 20. The thin. One thing that you should know is that you can always readjust if you watch you did is now really good. You can easily just go ahead and readjust again on t, what you, what you're doing. What you're doing completely makes sense to you. So this is what we have now. We didn't give, wouldn't give us the butter, which is not good. So let's give it a border. Let's give this a border style border, say solid and we would say one is give it a border again. I would say I would say border. This is one, say Yeah. So a given solid border and not radius which is given a bottle of one. That's what we're doing. So we are almost done. So we're almost done with this. But one other thing with malicious, give it a, let's give it a border-radius, Let's give it a radius of a fence so we can have that call V look. So just quickly going to do this, go to Styles, go to bother and goods or radius and say 15. And that's much ten. Yeah, so we have a look. So we go to a style again, say border-radius and just give you 10. So we have the loop. So we go to go to border-radius and so we have a look. So that's it for this section as if one instruction, I think what gold you doing well so far. So next we're going to go to the next section. That's what we're doing next, this section of it. And before then, I'm going to show you some really cool shortcuts that you can use so we don't duplicate things and spent so much time trying to copy, trying to do so many things. The same thing to the different columns. 32. 8 Elementor shortcuts: So welcome back. We're going to learn some tips and tricks to do things with fostering. And we did the last section. So it has less teh. First, I want us to, I wanted to really show us they didn't Navigator. So this is all the things on our website since morning. So we have, look at the first section. You have the section. This is the section, so we can section and this is the column heading. This is our test, so this is our test, and this is our test. There's the button, so as we're ordinate the navigator, so it's adding each for a CIF. Want to go back to the top section, you can easily click on the navigator. And it's cool. It's down to where we are. If one of the parts of the column, It's, that's where we are now. So we can easily go back whatever would click in here. Seen it on the page and we're seeing it on the left-hand side of it. And for E4, beautiful, very complex homepage, we can easily rename. It can easily we name our sections. Second, right-click and just click on. I can right-click and I want to rename. So I want to rename this section on, say this is my hero section. So I can easily navigate to it. So I could go back and say I could go to the other section on saying this is my what I knew section. Why do section? So you can see we have several sections here. And it's an easy way for us to just, you know, navigate and move up to any particle a website that we're looking for, especially if our website, It's super complex and long and we want to save time. Another shortcut is this. You might do something, you might be working on your website and you feel like you to do something that you don't like. And you want to go back to the article back in history and correct something, or you just want to go back to your seats fashion. So this is a way to do it. You go back to you or you go to your history, visited the top history, top click it and you will see all the things we've been doing. So I wanted to get back to when we started this section. So I'm gonna try each of them. So I'm going to say, let's go back to when we sorted each of the section. So you see that we are going back. So this is the time when we had no column. So we can even go further than this. So you can see we can go where we've farther than what we have now so we can go, we can just keep on going. We can keep on going. So you can see all the changes we make it on our website since you've seen it, all the changes that we're making on our website. And nurse, let's see some very amazing short courts, some very easy shortcuts that will enable you to do things faster. So you see, we have a border, we have a border. We have a very tiny button here and we have test, we have chest again. Let me change the color of this test to green. Let me just change it to green for practice sake. So I want every other, every order I went every other heading on this other condition columns have green. So what I wanna do is that I will go to this, this, this, I will go to this hidden. I would right-click. I would click and say Copy. And I would simply go to this other heading and say paste and paste it or not, not, not that type of basis. So I would paste this down. I would say paste style does, I would do, I would say paste styles and then we'll paste this and paste everything. And let's say pistol. So another thing I can do is that I can also go to this column and just sit everything for one coulomb and paste the other one. So I'm gonna set the butter. I want to set, how would you set the padding for this column to 20 all around? And I'm going to set the element said the margin should be 22. And also I want to go to the star and set my border-radius to 15 to 10. So we can see this is the star, this is the column that has the Pocket Style for us. So I'm going to copy. Just going to copy. Yeah, we'd say paste style, same thing. And there would see haste style the same thing. So you can see it's way, way faster, its way quicker and it's way easier. Sandwich, I want a good changes back to the black. So I will change this back to black marks. I didn't want to keep on choosing black all the time. It's wasting my time. So what I would do, I would look for block and we'll click on the Plus and say a name, the color, say block, create. Remember we also always look for white too. So whenever I want to change this color, I would just click on it, go to my style and look for, and click on this on there, on the map icon. Just click on the map. I couldn't say block, It's Lockerbie. Go here, click on the map icon and say block, and it's black already. And also I can copy paste a full section. So see, I have another part of my website that has, that has similar, selective similar properties as this section. I can easily go to this section and say Copy, step, copied it. So I want to paste it. I'll just go down and click anywhere and say Paste. So it duplicates this section entirely. For me SAC, we have two section and if I want to cancel it, I can easily click on the console to delete this section. Now, this section is our organ. So these are some of the ways you can, you can use shortcut. I think before. Photograph these options in the dark middle way, you can do it another way you should, you know, we keep on giving chest test. If we keep on giving keep on givin are changing our typography all the time and the topography is the same. So we'll go to our typography now. This is a vertical, there's just a vesicle, this article, and this is 20 right here, this is Chetty, this is 30. And so we will click on AI. So if you've got hard, we would say, let's just say heading font, heading towards. So this is our heading fonts. So you want to change these to totally change it that way. I'll change this to what we did in the first column. Simply go, go back to your Fontan, see heading font. I'll go back in our clinic or1 headed font. So that same what we can do this. I just go ahead and do the same thing for this. So sit out, we can move our way. We cluster. 33. 9 3rd section with styling: So welcome back. Now that you know how to use shortcodes, we're going to be making use of it to, on the next section. So we can do this as fast as possible. Let's go ahead. So this is the first one, this is the first heading. We have headings, we have a smaller gradient, and we have lots of images. These are not terrorists, these are images. So let's go create another section as grit know that section and let's give it a padding not part in sorry. Let's give it a margin of say, 40, 50. I think if there's gold, this section has a lot of padding above and padding between. So let's give it more. I'm going to give it a 100 and is a lot. So let's go ahead and put jump ahead in my head. Let's go drop a subhead inverter. Then. They would drop a couple of images. We would drop sections, couple of sections. So we can have four images, so we have two sections now, see a new column. So with a new column, so we have a heading, you have a subheading. And we have in our sections with four columns. These columns are going to add image to it, similar images. So we have image or we have image two, we have image three, and we have NH4. So this is what we have now. Then let's take our section to the middle. As therapists also, let's take our heading to the middle. Let's take this also to the mineral. And what we'll go down, we'll see it's back. So let's go all black. So let's go back. So we just come back here and look for a heading or click on heading font as double-click. Then we'll paste as subsection with paced out our section here. So that set, so let's go copy this other one. Let's go copy these other ones. Just compare. So we're going to add this to it. So we have this as go change it to black. So let's go change this to as it turns your head inside the fourth font size. And also let's take it down. Let's take, let's take you down to 200. Sticky down to 300, which it's more like you're going through and around and through derivatives. So this is where we are. Last. We're going to add in the image. So we'll go to undergo input all the missing. Now this time I'm going to import all the images in Bach. Say I have one, have to have three. Okay, we have 12344 images going to seem for all the image once. So we have four images. So in no regular order, I'm going to drop the images there to image one and image two. So this is image three. So we have image for now. So this is our images. So let's see. So you can see that images are smaller here, so they're all smaller. So let's go meet us smaller. So we have images this more and in the middle. So let's go put everything in this column in the middle. So let's click on the interception. Let's click on Enter section and go say, oh, so we can see everything is in the middle now. Then let's towel this image. It's to make them smaller. I'm going to go onto Sam clicking the image. This is the image. Let's go back. This is our image and click in it. So I could do reduce the size to medium, but as unable to do so much. So in fact, really large. Then go which is the width. So go to style. We're going to reduce the width to foresee. And then my mouse with, I'm going to make my mercury. So 40, something I've done here. I just want to copy. So I'm just going to copy from this image. So copy this image. You're going to put in this one place style. And I'll copy, paste, copy and saying, Hey style. So we can see with the shortcut reliant, it's already working. So we see these images. So I think the image have different styles. So I'm going to work on this one and increase this to say 60 Sudoku work. And we're gonna make your 60. It gets bigger. And let's say 100. So you've got a lot bigger. So I'm going to go a 100. So you've got a lot bigger. That's big. Sellers do 86, That's fine. At and that's fine for the station are mostly going to do 80. I'm just going to copy the styles and put it here. So this is what we have now. So we can see design is come into life. Bought, we have something else. This is way bigger than what we expected. This is way bigger and this is way, way bigger than what we expected. So let's go fix that. Let's go fix it. Increased the best increased to 40. And let us reduce this point. Unless it's reduced the weight and acid-base, this is OK. And so that's where we are now. So I think we're good. Yes, there's something wrong with our design. We have to make it as good as theirs. So to do that, I'm going to add another section inside of this. Other section inside of this and delete one part of it. Say Delete. Then I will odd, I would take this test and just put it inside of it. Then now that I'm done with doing that, I'm going to reduce the WHO going to reduce it, reduce it, reduce it, produce it. So I just reduced it to 500 so it can have this type of fitting. So that's the reason why I'm reducing it to 500. So we can have this type of patient. But that doesn't mean we cannot take everything inside the first column. So I can just drag this and also pretty hair can drag it up here. It's very possible for me to do. I can just increase it to 600, so everything fits. So this is 600 and you see it does fit similarly like this. So this is what I'm talking about. So you see it does fit irrespective of the size of the screen. It doesn't go. It doesn't change. It doesn't change because it is inside a particular container. So that's why it doesn't change. So that's it for this class. Next we'll go into, That's it for this. So it's time for the next lesson. I will tell you your assignment so you can go do it and practice a whole lot. 34. 10 Assignment: Congratulations, you've been working so hard to get this far. I mean, Lenny, something new can be lots of hard work. And so also learning something new requires a whole lot of practice. So that's why I'm going to give you an assignment so you can practice before the next graph. This what you're going to do for me, this particular exception, I want you to duplicate it. The images are inside your, your, your host folder. Go ahead and duplicate this section yourself. Practice what you've done in just this section alone, so it doesn't become too much for you. Just this section alone. Go ahead and duplicate it. Called The alone has See you in the next class. And so we can walk through the entire assignment. 35. 11 Assignment answer: Welcome back. How did the assembly it go? Were you able to do it? I would just call yourself 10 percent, 20 percent, 90 percent, or maybe a whooping 100 percent. If you weren't able to do it, do not Frank. If you were able to do it Congress listens to yourself. So now I am going to walk you through, I'm going to walk you through how to duplicate, how to do the same thing and how to. Now I am going to walk you through and we're going to go through duplicating this section by ourselves. So let's go back to our dashpot. So we'll create a new section like we did before. This time we're going to make it too, because you have two sections. So this time we're going to make it too. I just want to give you a min-height, a minimum height, or say 600. So these are min-height. Remember, you can see it's taking a whole lot of those screen. So you mean height for 600, but that doesn't mean our content wouldn't go past 600. Or we can give it a fill the whole screen, since it's taking the whole screen content, Let's put out content in the middle. So we see our content is in the middle. It's not called in the middle. And the first thing we have to do is drop in an image. So we have an image, her chocolate in, jumped in and we can't, then we'll go put a test. So we have a test, we have is sub-test, Subheading. We have a test, we add lots of tests, and we have lots of terrorists or in terrorist and Danielle link. So let's go food frustrating first. Let's copy this. Copy it. So we're going to call it a test first. So this is our heading. We know paced day had India. We are. So next we're going to paste a test. Don't worry, it's just something similar. Similar. Then we're going to place the test here and we'll put this or or two to oligos. Go, Let's just go ahead and we'll copy this. We'll copy this then as usual, we'll paste it on another tab entirely, festival and just control exit. If you'd also want to do. So, I will put another, another test here. Put another test, concert V. Then I'm going to do the same thing again. I'm going to do central, but this time I'm going to use a heading. I'm going to use a heading this time and I would just copy it. So I'm going to use a heading. Heading is way bigger. Willingness hearing is way bigger than this and you have to study so we can just reduce it down. Say P, P stands for paragraph. So this is a p and so it's the heading, but now it's a paragraph. So we'll put the test hidden and copy the nest. So we just copy and paste. That's it. Then we will copy the old or don't get tired of copying. I'm going to tie it. So copy this other one. Condition is going to be a very quick class. So we'll put a heading, we'll put a heading here at the bottom of this, and we'll just give it a P. Then paste. Then we can put a text editor. Put a text editor here. And the safest. Then now we're going to add a button. We're going to add a button or the end. Cities are going to add a button at the end and an icon too. Long arrow. I belong. So put it on the other end of it. And we can just increase the size of our synapsids for that's a 10. That's it Now it's time to start off. So we just put our image as we will do. So copy select files, images, the big phone right here. So put a poem. So we're going to say Insert media. So it's a very, it's a big image. So this is our phone right here. You can see it's just like the way these just like do we have here its way big. It's big. So before we do that, let's give it a padding-bottom. Let's give our our top margin-bottom so he doesn't overflow. So I'm going to give it a margin, bottom row, we have the bottom early. So let's give it a top. Let's give it a top. As you've had to vote. So we just found into default, Tony from this screen, fifth coin is going to force it to use enough for cities to fit the entire screen where we are. So I'm just gonna give it a default now, C doesn't, doesn't fit everything. Then I will turn everything into the middle. So go horizontal and say middle. So now everything is in the middle. Now, that's what I'm doing. Then I'm going to give it a podium. So I'm going to give you, we'll give it a margin left. We're given image oxidize imagined right of 30. So we can see what's happening now. And I'm gonna give this a Pauline of say, 20 on around. It's going to follow, reduce it. So Tracy other, and that's where we are now. So we can see what we're doing. So you can see the distance that we're given a padding of 20 or around. And NES, Let's just go ahead and stop this. So I'm going to stop. So we're going to go and give it a color block. And we're going to increase the, going to increase the font. This time, say 40, as we're going to do, and we're going to reduce it to 400, population 500. And say for the five, okay, Now quality, because what we have here right on the go, give it 600. So this is what we have, hey, now. And then we're going to give this a, let's go. Let's go change this into a heading as your changes into a heading. So I'm going to copy the test. So don't worry, once we're done with this, all we have to do is to duplicate the other ones. I'm going to delete, paste and just turn it into a paragraph p. So now we'll style. So once we style the first one, we don't have to style the other one. So we'll start with the first one. And we'll just copy and duplicate this, dial this down. So we'll just go around and say paste style. So I think we have to do the same thing also for the other one. Well, we have to increase a, you have to increase the size. So I said 20 average use a font, font face. So let's just go paste all the way again. Copy, paste, paste, stop. So we have these other ones. So we're going to, we're going to give you, we're going to give it a black too. And we're going to give it a subheading font. But let's reduce these to pay 17. So we can see that R2 lot to you, it's way bigger, its way bolder religious copy and just paste, paste down. So that's called me and say Paste star. I think we will paste in the styles too much. Or prison the status to March of these this time. But let's just go ahead and say inquisitive font-weight to 600. Hot, Let's try 500. I see y is differentiable. So generally we have 500 images in your corporate quickly. This lesson has gotten a lot longer than I expected, but let's just go ahead and do this. Then the button, the same thing with deed, the symptom we did here. So we can easily just copied this, can easily copy this and paste it here instead. You can say paste and just delete this one. Delete set of Bosnia. Now we're going to make the button, call it not because I'm a coin. And what's there? We have explored the benefits as what we have here as floor, the benefit, as floor, the benefits. So that's it for the assignment. We're gone and it doesn't have to be, it doesn't have to be or Parfit and all beautiful. All you have to do is to make sure that you are doing something. You're doing it, you're doing it the best way you can do it. So next section, last, we're going to go down and create this file, single section of the website. 36. 12 Creating the About Section: So now it's time to work on the most beautiful section of the website. For me, I think this is the most beautiful section of the website. I think it's cool. It's just nice. To me. I think it's nice. I like the combination of yellow and black. So let's go direct. It will usually two sections to read, but we're going to click on this and disrupt the normal. So we're going to give it against you give it a lot having. So this first one, let's go ahead and give it padding to go ahead and give it a padding of 1550. So we can go give it a tag. And 50 said this, which is going to give it another polynomial. So margin padding or margin of 5050. So top three, top five in a few 150. And after that, I want to give it a heading 2 it. And as I hadn't added ahead and today, I want to add a test and also desk copy and just paste here. So this is what I want to add. So I'm just going to copy what if what if, what if reaching her already. So we'll copy that. Paste where an emission join us. We'll copy this also. I'm going to paste it here. I'm going to place it here. Oh, no. Not looking for a widescreen, so I'm going to paste it here. And this is the last one is land more about our mission. Cell gives me write down myself. So learn more about our mission. So I've copy pasted everything. And this is a time where I get to storm surges, which is normal. And just all the other color, which is black, increase the change the font to heading font and probably increase it to 4040 px. And also go through this to change this to this. And I will change the font is subheading font. And then I'm going to add the image now. So this is my image. I'm going to add the image. Let's just go in the image. I think this is, yeah, this is the image we want to add, this one. So I'm going to say in fact, we can see that image. It's more because this is THC and this is, this, this hair, it's 70. But as we change this to 16, so we can have a bigger, bigger image, then I'm going to change the background color of this to yellow. So the background color of the first column will change it to yellow. I'll go to style background and click on the color. Click on this, I will change it to yellow. Not this type of debris, yellow. So that's a water change it to yellow. So this is yellow, right? I think this is yada, yada, suffer changing it. So we're going to give you lots of padding. So let's go padding of 40. Let's go padding of say, okay, let's go piling up 50. And that would be a lot better for us. Sodium part in a 15 and that's better. Then. Also, we're going to also render also turn our image to 40. Let's turn to 40. So these are in my section. So we can see that both of the sections, most of the columns and not together. So what we'll do is double-click on this section and close the gap. So we're saying gap, no gap as overdue. But let's, let's take our vertical line to the middle. Or we don't have ticket to the middle, we can leave it on top. That's fine. And so we, we wanted that. We want to let the image come down because now we're not satisfied with the way the images. I have some space at the bottom. So what we'll do is start. I wouldn't give it first. I want to give it more padding. Think I have given it a pattern of 40. So I'm gonna give you more pairing of 60 now. Then I went to go to my ventricle. Okay. No, not yet. 70, you just go and make it 40. So it becomes 40. Then I want to say, so now we've made, now we have put it in the image in the middle, or what we want to do it once you increase the distance between watching, increased the top and we end towards increased the buxom Sage 50 entire convex. And we'll go to Image. Image and give it a width of 100 percent, which what that's what it is now, just look at MOSFET of a 100 percent. If something is just for soda, it be mobile friendly. But I just increase our high say it meets the heights of the comb. So we don't have to do anything. You don't have to specify the height itself, do it. So it means the height of the column. That's what you go on. The other one, cover contain yeah, we can we want to meet you want you don't want to make it contain. You want to make a cover. Which is way better. Coma we only work if you're, if you're specifying height. So we see now the image is clean, it's gold. A moment doing It's okay. I think we have one piece of a puzzle and that's term of the bank owned and make the background transparent as you're going to do so we'll go there, click on the button and go to Style. Go to our background color from white to just going to make it transparent, transparent. This is a transparent slider. Just let it slide it backwards. I would see it's all transparent right now. So we don't have to set the color white. It's white, but now it's very transparent and now it's taking the color of the background. So that's a fairly long lesson and that's where we are. So I think we're almost done with it. So we're just gonna do this. I want you to go ahead and try to get your hands dirty with it. Try do this. And we will be, once we do this, we will be joined. Let's go Jue de setup Salazar. I think what was said not singular within something similar over and over again. But we just have to build a website because this is something similar to what we'll be getting for a large client when we get started. So let's just go ahead and do this and get your hands dirty. And we would get our hands on this in the next class. 37. 13 Adding the 5th section with a button: So how does Alice coming up Products section for you? Was it easy? I hope your words. So we're just going to brush through it as fast as possible so we can get to the other sections of this class. So this is it, this is where we are. And so we're going to give it a lots of heights. So I hope you did this to give it a height and specify that it be in the middle. So we can see it's a lot of I so we're going to give you a lots of it. I can't even say fit to screen. So it can take on the task. And because also we have on the other section. So first we generally say get started today. That's what we'll do. And it's adding it's a heading or put it in the middle. Get started today. Amino hair. And the other one we have a sprints up to objects fee for 14 days. So we're just going to put this 14 days. That's where we are. So put it in the middle. We'll put it in the middle. And now we just need a button. And this should be way, way faster than you can imagine. So need a button, a very, a very big button. So we need a very big button. Let's go though. We have a on the button sections side of things. So when the button's side of things. So I just need a lots of big button, large, very large button. Less of a need. Started today. As I put there. This image just need large city statistically and guests had it today. So we're going to go and fix it. Dark colored chair has made the colloid lot Beagle 14. Let's go back to the other one. They started to block. Let's make the color, let's make it a lot bigger. And so now let's go to the button. As much of a bison and just a one on one. Q11 camo. Think it's bulky. Your one-on-one demo, bouquet, one-to-one demo. Let's change the color, mixing. Yellow. Change the color, the background color, yellow, yellow, yellow, yellow, and black. So that's yellow. That's yellow. And so the test colloids block. So good. Book, Hawaiian one demo. So now let's go chain card, leg witness could change the radius. So the body just to 150, 180. So we can see the radius is changed now. And this is what we have here. So this is what we have, and this is what we have here. But one thing they also want to take what you want to see the distance between the demo button and this other one. It's, it's pretty much so we can just go give it 0. Keep it Sarah Palin. Or if we're not okay with 0 padding, we can give it a negative margin bottom. So you can also give a negative margin bottom. So we have 10 minus, so it goes together. We can say if stain, it goes together. But don't forget. Don't forget. When you give it a negative margin it has affected in the mobile C after make sure that the mobile version of it, It's way, way, it's also very, very good. So we're good. Now, Nast was just walk on this. This is, this is pretty straightforward, right? This is pretty straightforward. We're just work on this. And now will be all for this section of building this website, how we move forward to seeing all the features off. We just move forward to seeing other features of elemental. 38. 14 Creating the blog section with template: So welcome back. This is section that we're going to be creating right now. We're not just going to create this section. We're also going to create a template. Template at very easy way for each equate thing for you to create reusable elements or releasable block in elemental sulfur. Just quickly go ahead. I'm going to use demo content in lots and this one, and I will go ahead and fix it after, after class. So I'm going to add a heading. We're going to add a section Joppa heading in there and just take it to the middle and give it an H1 if I want to, then give it a black hole. And the typography, I think typography, it's good. Don't want to increase this. Let me just increase it to 40. Inquisitive or graphics or 40. And then I'm going to add an intersection. So it tends to be very fast with this man, to be very, very fast. And essentially, I'm just going to give you 40. Then I will duplicate pay. I would duplicate the inner section to give me a sense of what I'm working on. And I'm going to add an image, then a test block. It has a digital. And then also I will add a heading. So this all what I'm gonna do and I'm going to change the area to block, which already used to. I'm going to change the styles to that, which we used to. So, and so then I'm going to add an image and renew for a very tall, big image. I might in an image of one to 1012 by 800. That's the image of adding. And so we can see that the image is, I've got an image, I'm going to add a border. I had a budgetary. Not every radius and ulna are the solid body. Has just give it a, give it a two. So we can see we have the imager give them, given about a two. And I want to, I want the image to be very close to the continent. So we can see this image is so close to the container and wanted to be very close, then I will go give the image a margin. But this time I'm not going to give it a positive margin. We're going to give it a negative margin. All around. I'm going to give it a negative margin, doesn't want to do 10 minus. So that's what I'm gonna do for this image and negative margin so that it goes all around. Then I will add a border-radius to it. Debugger, we just do it on top, I would say five. Okay. Let's say left or right? Left and Right. I would give it ten. The other left. I'll give you ten or so. And I think we'll have something Covey. Okay. No, not left and right. I think we're missing. So it's happening and it's happening here. Well, what's happened here is that the forecasts think it's entirely, so entirely, so we just give it a border radius entirely. Give it 10 all around. So that's where it will do it. So you see what we're doing. We're giving it a turnaround, but we can add the shadows to it. We can add the shadows to it because we don't have Elementor Pro. So that's how we can add the shadows to it. But what we can also do, we can go ahead and give it, give the content padding, and go ahead and give the contents that padding, left and right, say 20, 20. We also give these left and right of say, time t would give it, right? Term sheet will give it. So we're gonna give it a try and see whether you've been left. You could left 20. So that's all we were doing high and it's code. So now that we're done with this, okay, For also, let's give it a, let's get the column in a left margin of 20. So we'll give it a left margin of 20. So we have space for the, for the other one. So I'm just going to duplicate it. I would delete. I would duplicate and I will delete citric acid. We have, we have this and with certain equations, something fine. The image might have to change the image. But once we are, once we are done with the record base, I will go ahead and fix the test on the image. And so you see the way it looks. And you also go in and fix your testing your image. So the bottom line of what we want to do it, Let's add this template. So we're just going to go to our section, which is equal to R section and say Save as Template. So I'm going to call it blowers section. Template as I'm going to call it. So it's saved now, it's a template. We can use it anytime we like so we can see it's yeah, if once I imported somewhere else on a different patient, Charlie, all we have to do Easter identity yeah, once and it should save on the other side. So we just, if once you edited anywhere, we just edited in one place as a template and it's and it's edited on all sections on our website. So that's the way text go ahead and fix the test on the heading of everything and we will be able to and will be good. So I'll see you in the next class and we're going to learn something new. 39. 15 Adding the testimonial section : Hi, welcome back. I'm glad you've been able to get this far. So we went to I went to either bonus session to this. And it's the testimony section. I know the testimony section is not on the page that will beauty. Testimony section is now in the page that we're building that I went to add it so we can see how the eye testimony page to our website. One good thing about testimony is that it builds credibility and it helps people that you trust your, your brand or the brownish or client the most. So we're just going to add another section. Goods are unnecessary and you can give it a part in if you want to. For me, I'm just going to give it a patent of CSAT. Let me say 50. That's how I'm going to do it. Then I'm going to look for the test. I give it a margin. I didn't imagine a 50 and I want to give it a padding of 30. Worry that I want to add a testimony box. So we have two type of testimony. One is the testimony carousel and the other one and the normal system. But the current cell will not work, will only work for a pro version CC. It will work only for a progression, so we just add excess ammonia. Does. So at a testimonial. This is one single testimonia to chew enables add more than one testimony a woman have to do is to add multiple sections. So I want to add, I want us as three testimonials. So I'm going to add three different sections with a new column. Or I'm just going to say duplicate instead of saying add new call and say duplicate, then I'm going to say duplicate them. So that's what I've done. No, I want to delete this. Delete. Just want it to be this one. The number of testimony has to be three only. So now we have this, we have this and we have, we have this. That's three testimonials inward. So let's click on the listening on the testimony on I'm probably the only testimonial itself on the column itself and give it a margin. So Guernsey give it a margin of 20, so it can be farther from the other, from the other ones. And I also want to give it a border of one radius. I want to give it a border or just one. And that's how they change the color to orange, change the color to, not to block this time. But it's something that needs to be transparent. So if I take it this way, you see what I've done. So then I went to go ahead and change the color, the text color to black and make it smaller. 17 to 20, 20 is 20 small, or even 15. So that's my test color and making it black cowl. And I would also add a padding inside or it's either put it inside of it. I want to add a padding inside the column. So just to make, make the text appear a bit, give the type space, like I always say, give tests, room to breathe. And for my titles, I will go back to my testimonial and I'll go back to my testimonial. I went to sell the goods in my style. I wanted to start, the name was changed, the name to yellow. Yellow is not going to be really Phi. So I'm gonna change it to be yellow. Then for the title, touching a MOOC ear with the title it that way, then I would just go ARD and I go add an image to it so you can easily add any type of image to it if you want you. But just make sure that it's an image where you have the face of the person. C, you don't get to adjust and adjust all the time SCC, just make sure it's an image where you have mostly the face of the other pressing C. C We have this, I want you to duplicate. I want to copy the style from this so we don't waste so much time. We're going to copy the style to the other column, just like we learned before, paste style, not paste. So I want to paste, paste, paste but images delete this. I want to copy the style from or so. And I'm going to say paste style. So then just go ahead and add the image. So now we have the image here. One other thing we can do, we can also change the background of this section. We can play around with the background section and see how beautifully days, if it's something that's fine and we can just go ahead and use it. But if it's not, you don't want to you don't want to use it. So we have the background resection as yellow and see what it brings us now this is general. So that's the background section, yellow. And we can also increase the, we can also increase the entire height, make it min-height, and see what happens. So this is when it becomes min-height. So I think it's, it's a bit fine. We can also, we can also what can we do Again, I think this is phi. We can give it a border. We can give it a, give it a border. We can give it a border. We can add Order style into it because we need to prove fashion to do more than what we're doing right now. So I think this works. We can we can leave it this way. But if you're not comfortable with is so much spacetime around it, you can always do all to remove it. So that's how to add testimonial. That's how to our testimony or to your webpage. After this, we're going to create a header. You can see the header here. You can see the header section here we're going to create our EDA section and add it as a we're going to do nest. And that don't forget the safe, don't forget to Save when you're done, suggest Save As Draft. You don't have to save as template and you didn't have to publish. Just save it as a draft, only. 40. 16 How to Create Menu Links part1: Hope you were able to create a testimony as fine as mine, or even better. Now we're going to add a menu. We're going to add many sections to it. You know, when people coming to your website or you're building a website for a client, you need a menu for people to navigate the entire website. So you can see the website itself is just empty. There is no menu, there is no footer, that is the header. So one way to add it, one way to add a menu to your website is to change the, change the so change it from a canvas to a template to a full width template. To do that, we'll go to our setting and we'll say, change it from an elemental carbon back to Elementor full width and say safe drafts that we can just go ahead and reload. So now, when you reload, you see you have the, you have men who see how the blog, this links to the blog. This leads the above page. We treat it earlier. But just imagine when we equate in a while a single-page website, we would need all our managed to stay here. So that's where we need it. We'll need everything to print out to the homepage. So let's go, let's go remove it and turn it back into Canvas CSAs, and just reload again. So let's go create our own menu by ourselves. So I'm going to say, I'm going to add a new section on top. This will serve as the menu. They'll be on top of this. We establish the menu and I'm going to give it a, I'm going to make it two sections. One section will be 70 and the other will be techy Sam going to give the left section 30, white, red section, have 70. And also we're going to add a couple of sections, only. A couple of, we're going to add an inner section on the right section of it. So we have seen our section. I'm going to make it. I'm going to add new. I'm going to add new. The reason why I'm doing this is because we have, we have the we have the beginning where it says get started. That's one button. You have the what we do as another button. We have the we have another section here and we have the testimonial, we have the valves. So we want everything to lean back. We just want everything to link back. We have we have the testimony and we have a blog. So we don't want everything to look back and say that's where we will coordinate a lot like this. This is for a logo, so we just drop an image hair and that's all we have to do with this image here. That's all going to have to do to March. And we reduced the size of the image, just reduce the size alone. And that's all we have to do. Give it a mass of 40. That's all. We can drop anything here and the image will just work. But preferably the image as the logo. It has to be something that you, personally, you have designed yourself. So I'm going to get an image and just drop it there. We're going to go to your poll so I can find it for logo and just put it there. This is the logo. So I'm just going to put it there. Add New and one. Another thing I want you to do. I want to make this full width. I'm going to make this full width. So it'd be very, very spacious. Instead of boss's, boss gives it potted equal part in the top, left and right. Sounds good. Make it full width. Then stretch. So you'd be very special, as you can see, for which stretch It's very, very special considerations now, very spacious. And so we don't have to try to manage the margin and the padding again. So let's go drop a couple of header in here. Let's call this. Let's call this gets started. Don't worry about how big the testes will always going to reduce. It does get started. Let's just copy and you just copy and paste here. I just paste. This is go ahead and paste. Let's go ahead and paste. So the first one is get started as a wall right in there. The other one, it's what we do. The next one is about and last one is the testimony. Testimonial. That's the last one. So we can make it more than this if we want to. For the first one, for the first image, I'm just going to take it left. I'm going to pick everyday lives. So we have a loss of spaces or we can leave it in the middle if we want to present absolutely left. You can put everything in the middle if we wanted to. So it makes sense. So we have this uniformity or everywhere in the middle. In the middle, I want to change the color to black. I think that's what we have here. We have black so much as it says color to black, which is black hair. And reduce the font size to 400, 500. We don't have to start changing each one of them. We just simply copy the stars and really fast because I think you know how to do this now, simply copy the styles and say Paste town, paste style. So that's what we're doing. We just copy the styles and say Paste towers spaced out as overdose. That's how it should create it. Next, we're going to be linking it to the apple per section of the page. 41. 17 How to Create Menu Links Part2: Welcome back. Let us some uncaused to manners. So when we click them, they go to to where we want them to go to. So just add the closer the spine sign you can add a pound sign yourself. Doesn't matter, right? Get started. You can call it whatever you want. It's just genetic holy something that is related to when you watch your the button. So you can easily find it or you can easily, you can easily link it or remember. So I'm going to go to the guys started. Yeah, I can make it lean back Sydney's to the button to get started boxing or make a link back to something on top. So I can just put it here. Especially when, when they are mobile, they can easily link back to the Buxton so we can put it in a button here, or you can just take it or leave it on top here. So I'm going to go to I'm going to go to my advanced or click on the chest H0, which my advanced and say, then look at the CSS ID's, does this, I want to give it so I'm going to just give it gets started removing the pound signs. I didn't need to add a pound sign to it. Now this other one is clickable, as you see, it takes me to this test editor, which is very close to the button. So we're going to do the same thing. What we do, click on what we do. Go ahead and go to the link, the pound sign, call it what we do. Copy Control C. And go to that section where we want to add what we do. Because you've got section. Where is it? Yeah, this is a section. Click on it or click on the section itself. Instead of clicking on the on the tests and the hiring component, click on the section itself, go to advanced CSS ID paste. So pasted without a pound sign. Don't forget to remove the pound sign, so it's linkable for take it up and we click on what we do is cuz it down to that particular section. So we're just going to do the same thing for the, about how the plant science read and colleagues about they would do the same thing for this estimator is to testimonial or the pound sign to it and call it test a memorial. See that, so we'll call it. So let's go back. Let's go down. So I bought page is I bought subset, record it and go to our CSS ID and an about moved upon side. Don't forget. And we'll go to our testimonial page. These are testimonial GARCH click on advanced and say test the ammonia. So make sure you get the spelling currently. Getting spending currently, it is not going to work. Say I'm going to try, let's see that everything we've done, it's working. So this is taking us to see less, less, make sure that everything we're doing is working to minimize the page is they can actually testimonial section. The belt is taking us to the about section. We have the What We Do section. So this is bisexual is not taking us where we want to go. I guess the recession, I will know what's happening. Body belt is working, so let's go figure it out. These are bisection. Let's see, I think it's working. These are what we do searcher to work. Specific as to where it wants to go. Buy. A good way for us to find out is to go ahead and preview or changes on a different browser entirely. So I'm going to preview some previewing the changes now on this browser. So now we have what we do. Yeah, it's working. Now we have guests. Fact that it's working. We have the about section, CD about section is working. And now we have the testimonial. It's working. So that's it. Don't bother about all the social media templates you have. We're going to take it out later. We're going to take it out and make it be fine. So correlations and getting this far you see go ahead and try your menu. Go ahead and try to create your own menu and see that it's working just the way we just way we did it. So next we're going to create our photo. We are almost ready for this section. We're going to create our photo. And we have the header. And we need to have a footer at the bottom, navigation or footer at the bottom. 42. 18 Adding a Footer: So now with the Edit menu, I would have linked it properly. Let's go figure out how to add a photo. It seemed very similar process not to men, not so much to friends. So let's take a look at this photo. So we have an image which is, which is the objects logo. We have, we have a set of links. We have a set of links and we have a set of links that will have a noose, a newsletter subscribe body, and we'll have a CNC, sodomy. So we don't have food to doesn't have to be so complex. We can have the bottom photo. We can have the one above. It doesn't have to be so complex. We can do something very little. Chalets go, let's go find that outside the FUTA like this one. Since the first one is very similar to the menu, we don't have to do that too much. Let's go find out how to create a free towel. Like the one I like the one at the bottom. So I'm just going to copy this. I'm just going to copy this. So we don't stress it. So don't stress too much. Go back to my home life stages or an array. Another page and make it full width, make it full width, and stretch it. Then we can also make the Fourier can also make the photo. You can change the color of the foot tower, but we're not going to do that since the original house change colors and I'm going to give it a height. But this time we're going to give it a min-height, but this time very small, torn, right? Not too much, maybe 150 bill. So leave everything in the middle. And you can see. Then we want to add a divider. So this is called a divider, or you have here is called a divider. I'm going to add a divider. So I'm going to add it, a valid it, and it's very slim. But we're going to change the way. We're going to change the color. Lighter colored eyes, black already, but we're just going to make it a little bit lighter. So this is the color, the divider. And then we can start adding other things. Next, we'll add an intersection. It's an intersection, but you see we have an intersection that has 1, 2, 3, and 4. Cylindrical art for intersection share. For four intersections. New, new, new column. So we've added a columns now. But you can see here that one, It's, the last one is way, it's, it's big. It's way larger, is way longer than Consider last and has more width than the other words. So we can adjust that as time passes. But let's go on a test. Let's go ahead and add the chest. Here. This test, it's, it's pretty large, but will then reduce it. So let's go reduce it to something very small so it fits properly. Submerges averages did something very small so it fits properly. So this is the breaches now. And now we have another one. Wherever we are, we are the nest. We're going to add terms of service. That's a link, but we didn't have a linker. You can see it's a link. You can see privacy policy or Jason link, say instead of India, which is going to attest since we don't have linked 0. So we just get Charlie chest, I'm calling it temps times our service. Then we check each of them. It'll take you to the middle and the lower end. And we'll call it privacy policy. That was it take you to the meadow. So unless they're given a given a given 15, I think so. I have 15 eerie or let's just copy. Instead of trying to find out, I just copy and paste a style. Let's copy and paste. But still we have to take it in the middle again. Sends within, within tick to the middle at that time. So I'm going to put it on me again. Then last we have we have shisha media handles laughs, which is Facebook and Twitter as we have here. So we have the social icon. So we're going to take away to know, are we just in the limits, Facebook and Twitter. But there's something special here. Say it has a white background and a black and maybe an ash and ash font size. So we're going to do the same thing here. We're going to say it's circle to give me that circular That's secular fill. And we'll go to change the size, change its peak. Then we'll change the party and hinder carry. This is way bigger than we expected. So let's just live in normal. This is Louis, normal listener fight with it. So we have the spacing, spacing HE bit. Then we will change the color to custom. And we changed the colorful customs, our primary color we will call. Now we'll call white. That's going to be a primary color. White is going to be a primary color and a secondary color. And we will call harsh. Say can see what we have here. I may call on there. We're going to give it a border of ash to say, let's go find a bottle. As give me the butter, butter type of essay solid. Give it a bottle, one. And we'll just call it ash. So you can see what we have here and see what we have done. Let's go take the leg. Good. Take it to the, let's go align it to the right-hand side. So everything floats. Pharaoh said this is aligned to the right-hand side. And you can see what we have now we have something, a perfect photo that we can use. And one last thing, let us stick everything in the intersection to the middle. Vertical line would say middle. So you can see we have something good that we can use if you're doing this for yourself, when you're doing this in production for your dailies, for a client. Don't forget the social media handling share. And it's very important. Don't forget if you don't add it, it's not going to link anywhere. Don't forget to add it. So that's it. That's how to add a tiny photo. I believe you can add the other one yourself would want to blend in this course. 43. 19 Working With Responsive Mode: According to the website right now, isn't responsive. It looks fine, very fine. And desktop, but it's not responsive. If we go to I've opened our website ready on a web browser, you can see how terrible it looks. So this is what we've been doing in sales. You can see how terrible it looks, but you see the other one we're trying to copy. You can see how beautifully this on mobile. So we're just going to go change that now and fix it so as Luke, as fine as can be. So we'll go. Elemental has three different options. When you click on the TV like icon at the bottom, you will see desktop, tablet, and mobile. Every time you click on it, it doesn't resize. So you see this is the desktop version. The destination is a bit nice, but the mobile version is so terrible. To get started. To get started, we will go back to our desktop version and make all the sections. We'll go back to our desktop version and just make all the sections stretch. Let's click on Navigator so we can see it very well. So we can see very well. So this is our first section. These are second section which is our hero image. It's stretch. This is our other section. We'll just make it stretch. This is our other section. Will make you stretch. Just go ahead and make every section stretch. This will enable you have a very good mobile version. Though this is not all of it, so we're just going to make everything stretch out. It's very important you do this. Just make everything stretch out. It makes makes your life very easy. Trust me, makes things very easy for you. So this is our stretched out version of it. It really does make your life so easy when stretch, when you stretch everything or an elemental. So we'll just made everything stretch now. And even the last version of it will just make it stretch ready. So we're good. They are for the for this parts of it. If we want to, if you want to make it different, we can always reduce the, the we can always adjust the width and we can always change it, but we'll just leave it like that. Silicon. Just go ahead and start the mobile version of our website. So let's go to the top and take it and change it to mobile. So we would go to the left, go to the first section, which is the hero section. So you can see we're not going to touch the menu because you're going to be fixing that later. This is good. Now, we'll go down a bit. Let's go to heading com. So these are heading, this is where we have citizens, what we have the platform for co-working spaces. So we're going to put it in the middle, is I'm going to put it, we're going to put it in the middle and we're going to reduce the size. So most of the things you begin hair will not really affect the mobile version of it. So we're going to reduce the size is a 35. This is less than 40. Okay. Less a telephone. So I think we have okay. We have let's say 40. 40. Then we'll take it back to the other side and we'll add a line height to it. So we have 11.51.3. So the reason was spacing the, spacing the lattice, we just paste in the lecture so it, it fits. So we'll go down. So we'll go down. We have the, have the Get Started, which is okay. We can even add a pattern to it if we want to, can add a pattern to it if we wanted to. But we don't really have to. We don't need to add we can add a part into it. We don't have to, but salacious, go ahead and style it the way we we we want to style it. And also I want to put this in the middle, so 4D. So I'm gonna click on less. And I want to put everything in the center. I think we're in the center ready. Sammy put everything is centered, so just make sure that we're good. Then I'm going to go head. And so this is the video. I'm going to click on it and change it to 50. And also this, I'm going to click on it and change it to 50. Say has. So it's just like what we have on top. Then I will then reduce the size or the test is a 15. And also I will reduce the size of the link tool and just make it say 15, 13 kids to be less than 15. Thinking is that it's a bit less. This is those more. This is really small. This is really more. So I think they have a different size entirely here. This is very small, so I think we have to change the video and make the video a bit difference there, maybe for a t. Then we'll have the Then we will reduce takeaway or the other for the video. So I think that's where we have now. We have this. So let's make it full width is now making bossed. Let me make it full width. And I think we have with good. So we will just take away this image so we don't have the image here. You can see the images all gone, but then have the image has a good way to do it as if you think that your image is going to be distracting on any of the device, you take it away. Just to do that, we'll click on the column. Go to Advanced and go to responsive than say hide on tablet. Teach all gone. Not just observing. We say hide or mobile. You can see that's how we have it tuns the gray. So when we, when we click on it, you see it all go and say it's not there anymore. Since we have the we have the what do you do? I'm not sure if want to change anything there somehow. So if want to change anything in this section, razor, navigate to those, change anything on this section, I think this section is just perfect. We might want to reuse the tasks. So whatever changes you make, a mobile does not affect the desktop version. So I said maybe you're making changes to the section. Are you making changes to columns? Making sense? If you're making changes, suddenly making changes sections, it's not going to affect the mobile version of it. So I think all these are good. So we have this. Let's go see the way these ideas and see if it's something that we can make out. So we have our 50, 50%, 50%, 50% percent. So we're going to reduce our eyes if we go to a 100 percent or out. So we're going to make this 50. We're going to make this 50. Then we're going to make this another 50. Then we're also going to make this 50 or so. Then also make these and other 50 cc. Well, we're getting close. Then let's go down. Let's go down. Let's get to the next section. So this, the next section where we add these, our next section now. And so we're just going to call it stretch. And let's go see the way these here. So you can see it doesn't have, it doesn't have the mobile, it doesn't have the image again. So we'll take you with this image. So we're going to say, well click it, click column goods you advanced, click on responsive and see height. Now that image is hidden. Now, let's go to the other column C. You can see we have this other column is a column is fine. But we also have this image data set has no need for us to change the image was have this image on the other path, and then we have to get started today. We have this year from our customers. We have the testimony, we added our own self. We have here from our customers. Let's go reduce the size of it. So we're going to click on it and reduce the size. So let's say, let's give it a size of a techy. Then let's add a, add a margin to it so it have the space from the other column. So we're going to add imagines rate. I didn't have to give, always give us imagine for the top and the bottom. So it doesn't have to be that way. So I can also reduce the test folder to say 22nd span a single column itself. And I'll go down. And this, we can see they're all together because they lack margin. So we're going to give it margins now. We're going to give it imagine bottom. So I'm going to give it a margin bottom, I will give it a margin top nouns and give it a margin bottom. So the other element goes away. And we're going to give this also. Okay, let's increase it to 60. So it's a bit far. Genji also give this again, imagine batch of 60 or so. So I'm going to go down. So go to the other column and also give it a margin Shadow. Have to give it a margin because this already has a margin on top. Are ready. So let's go. So we have this, this is fine, is no need to change this. And so now we have this other path for our footer. We can leave it this way or we can just walk on it. We can change the colon to change the column size to 50. So both of them fits a single comb. And this is shifting and we can bring everything on this column to the middle. So we can take every other column to the middle. So then we would take this to the middle. So you see, this is what we have and these are mobile version. So congratulations, we're hair correlations. You've been able to fix it. And if we go to Preview again, you would see that we have, we have something a whole lot better now. So you can see it's a whole lot better now. Have it's way better now and the way we made it before. So you can see the mobile version is way better than the four. And we'll be able to transform the website into something that looks fine. 44. 20 Rounding Up: So congratulations on getting this far. We are done with this section of the course. We've been able to use Elementor, the free element of Russian to create a good website that any claims would like. And lots of people just want something easy and something that's user-friendly. So we don't have to, we don't have to do too much for a whole lot of clients before the before the war were doing a pretty short you give me at this website I'm pretty sure I will definitely like here. So there are, although there are other there are other LMS or you can try, there's a space arteries, the icon there is a Google map. You can try all that. So as the lesson progresses, the nest, the other half of the lesson we're going to see how to use the element a poll. So these are some of the, some of the, some of the features is that some of the icon, this is this is some of the features that you'd be able to use in the Elementor Pro, which we also have some, some other, some other free version. We have the content you have testimonial, do go ahead and play with other features of the free version. Just go ahead and play with it. Don't worry, you will not really break anything. You just go ahead and play with it and that's all you have to do. So I see you in the next section of the course. Congratulations once again. So I'll see you in the next section of the class. Congratulations, once again. 45. Course Conclusion: Hi, thank you so much for watching this question. I'm sure I hope you really learn something and you're so short that from today you'll be able to design your own website with elemental, with what price, and you're very, very confident now, don't forget to leave any questions. You might have a free feature which asks me via my e-mail PO POD could work that calm. I'm currently working on other courses and I'm pretty sure you're going to get a male when Windows courses are ready. Thank you so much once again for learning half a beautiful, beautiful day ahead.