WordPress Website Master Course for Beginners plus Practicing Elementor | Naser A. | Skillshare

Playback Speed

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

WordPress Website Master Course for Beginners plus Practicing Elementor

teacher avatar Naser A., Engineer, Teacher and Web Developer

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

17 Lessons (3h 6m)
    • 1. 0 Intro

    • 2. Hostgator Signup

    • 3. The cPanel

    • 4. Installing WordPress (Updated, Version 5.5)

    • 5. Admin Area

    • 6. Customizing WordPress

    • 7. Plugins

    • 8. WordPress Major Upgrade to v 5.5

    • 9. Installing a Theme

    • 10. Backup your website Now

    • 11. Get to Know Elementor

    • 12. Creating a Website from a Template

    • 13. Let us Tweak our Pages

    • 14. Final Touches

    • 15. 13.1 Practice Elementor Part 1

    • 16. 13.2 Practice Elementor Part 2

    • 17. 13 Practice Elementor Part 3

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

In this class you will be learning how to build awesome WordPress website from registering a domain to launching the website, No Experience Required!

You will also Practice using the Page Builder Elementor.

WordPress is a content management system (CMS for short). It's a robust tool for creating and managing your website. Blogs, business websites, personal sites, and eCommerce stores alike can benefit from using WordPress. This platform is run online, meaning you don't need to download any desktop software to use it. Also, WordPress is Free, easy to use, has huge support community, has many Free and Premium plugins that can enhance your website.

What you’ll learn:

  • How to Register a .com, .net or .org domain for Free with your Web Hosting package as low as $2.75/month More info...
  • How to create a Responsive WordPress Website from a Template that will look great on PC, Tablet and Smart Phone.
  • How to install WordPress from cPanel and set it up properly.
  • How to use the Admin Area in WordPress.
  • How to use an awesome page builder to help you create a unique design and how to use custom made templates.
  • How to create Pages, Posts, Contact Forms, Menus, About Us, Services, Privacy Policy, etc...
  • How to create Categories.
  • How to Install Free essential Plugins and Optimize your website for better Search Engine results.
  • How to use simple PayPal button to sell on your website.
  • How to have a Free SSL Certificate and how to Secure your website from Hackers and protect it from Spammers.
  • How to use the basic but essential cPanel features like File Manager, Website Backup, Addon Domains, Subdomains, Emails, Email Forwarders and Softaculous App installer.
  • How to Pack your Website and sell a Carbon Copy of it.
  • Practice using the page builder Elementor.

Are there any course requirements or prerequisites?

  • Computer, Internet and the will to learn.
  • Web hosting yearly subscription, it can be about $18 for the first year including a FREE domain registration, if you utilize my Promotion.
  • Web Hosting must provide cPanel and support WordPress installation.
  • No prior knowledge to WordPress and web development is required.
  • No Coding Experience is required.

Who this course is for?

  • People who want to build a personal informational website for themselves.
  • People who want to build a professional website for their business or for their clients.

Meet Your Teacher

Teacher Profile Image

Naser A.

Engineer, Teacher and Web Developer


Hello, I'm Naser. I have been developing websites, setting up eCommerce Stores, Affiliate websites, and Drop Shipping websites for over 21 years.

I've also been taught and tutored  Math for 31 years; I have taught IGCSE, MYP, and North American Math curriculum (USA and Canada).

I also have experience teaching Microsoft products, such as Excel, PowerPoint and Word.

I have a lot to offer and I am pretty sure that you will greatly benefit from my courses.

See full profile

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. 0 Intro: Hi everyone. My name is nasser. I'm a web developer and I've been doing this for over 20 years. And in this course, I'm going to show you how create a WordPress website step-by-step. With this course, you will learn how to create any design that you can possibly imagine. And there are lots of great templates that you can start with to speed up your work. We will be using an awesome dragon robe page builder that allows you to have a 100% control over the customization of your website. And it is super easy to use and there is no coding involved. So whether you are a complete beginner or you made a website before this course, we'll show you how to create a beautiful and fully functional website that's a 100% responsive to mobile tablet and desktop. But before we start, why WordPress? Because it's the world's most popular website, but they're on the market. It's a free open source. It's an ultimate do-it-yourself solution for website building. It's extra versatile and it can run any type of website. I will show you how to register a domain name for free. You will learn the basic features of C panel. And to those who don't know what cPanel is. It is Backend control panel where you can manage everything about your website. You will learn how to create emails from your cPanel, how to back up your website, and how to auto update WordPress and plugins so you don't have to worry about your website being up to date or not. You will also learn how to install the WordPress, how to use the admin area, and how to install plugins. I will show you how to pick a ready-made template and customize it. I will show you how to secure your website and have a security certificate for free. I will show you how you can pack your website and sell a carbon copy of it. So you can sell as many copies as you wish of your website on Ebay, Etsy, Amazon, et cetera. And it has a 100% legit. Because you are the owner and the creator of the website, you will be able to make it so easy. So the buyer will literally be able to have his website up and running in less than 15 minutes. In this course, you will see me creating a website from scratch by choosing a ready-made template and tweaking it from registering a domain name to launching a complete functioning website. This will be a complete and comprehensive master course, and I am confident that you will greatly benefit from it. Thank you. 2. Hostgator Signup: There are many hosting providers out there like Host Gator, lower daddy, move host, side ground, etc.. It's up to you to choose a provider as long as they provide a sea pan. I use Host Gator. They are good, they are reliable and I like their support. Sometimes they offer 50-60 percent of centers 90% off, and they offer a free.com dot net or.org domains. Would there 12 months hostility. I left a few links at the end of this course that will take you to their promotions if you like. Of course, if you already have a domain and hosting account, you can skip to the next video. So this is their promotion page. You can choose the hatchlings plan, for example, 12 months. Just to register a domain. Choose the plan until your information. You see here it's X3 with the.com. It's up to you to select the domain privacy or not. Domain privacy protects your identity online and drive is protection of personal information from public view. If you are a company, you probably need to uncheck this. So here is where you fill in your information. Uncheck, secure your website with site lock and uncheck markup your artwork. You don't need to pay money for that. We are going to be to protect and back up your website from more press and CPM. So if you decide to go with a plan, just complete registration and checkout. Ok. Now this will take us to our account confirming that our order has been completed. Click on dashboard, then click on cPanel. You can also log into your cPanel from the link provided to you by email when you finished registration. So this is your panel, this is your cPanel. And in the next video we'll talk about the key positions that you need to know. Nc panel to get your WordPress site up and running. 3. The cPanel: Cpanel is the control panel that allows you to easily manage your hosting account. It does not manage your billing references. For that, you need to go to your postal account, cPanel manager, the technical aspects of your website. So when you log in to your cPanel, you will find an interface like this. This will enable you to manage your website. Fewer things we will be looking at here. They are fine. Manager, email accounts, email forwarders, subdomains, add-on domains, and soft calculus at this dollar. The first thing I would do here is create e-mail accounts. For example, admin at flight cheaper. Does you see enter a password, set a quota and create. So now we have created an email account. Let's scroll down and check. Here you can change your password, change the emails quota. And from here, you can set up your mail clients with auto configuration scripts, meaning that you can send and receive emails from male clients, such as Microsoft Outlook. Or you can set it up on your smartphone. For instance, if you login to your cPanel from your iPhone, you can automatically set up your email by clicking on this link. Another way of managing your email is to go to web mail, which is almost the same as Gmail, Yahoo mail, or Hotmail, et cetera. The third option is to forward the email nucleated here to your preferred email. For that, click on email forwarders and setup like this one. Another thing I would like to show you here is defined manager. Your WordPress installation will be under public HTML. Nothing has been installed yet. Another thing is the add-on domains. If you subscribe to unlimited domains package, then you can easily add as many domains as you want. So you can host multiple websites in one hosting account. This is a one domain accounts, so there will be only one domain, but you can host as many subdomains as you want, which I will be showing you next. So the other thing is the subdomains. Here you can add a sub-domains such as marketing at your domain.com. And if you go back to find manager, you will see the add-on domains and the subdomains you create. Each will have a separate WordPress installation. Here is the sub-domain we just created. And by the way, only the main domain of your account will be under public HTML. One last thing I would like to show you is this stack of this app installer. Here you will see some graphical interface where many apps can be installed. Some are free, some are not. So from here we can install WordPress, which I will be showing you how in the next video. Let's go back to cPanel and let's recap. First step is to create e-mail accounts, for example, admin, to your domain.com, and decide whether you want to set it up on your computer or device. By clicking on Setup mail client. You can find under email accounts and scroll down to the email that you want to set up or view it through a web mail, or forward it to an email that you specify. Next step is to click on File Manager, then clip on public HTML and make sure that the folder does not contain any files. Then if you have the unlimited domains package, then you can add or host as many domains as you wish and build as many websites as you want. By clicking on add on domains. Then you can create subdomains and installed separate WordPress websites on them. For example, you can create a website or a branch of your business such as marketing dot your domain.com. Finally, you can install WordPress by clicking on soft daggers app installer and then clicking on WordPress. And I repeat, I wouldn't suggest installing WordPress via the Quick Install link because it will limit my control on the website. This is pretty much what I wanted to show you regarding cPanel and it is enough for you to properly installed WordPress. 4. Installing WordPress (Updated, Version 5.5): In this video, I'm going to show you how to install Wordpress from your cPanel. I wouldn't install it from quick installer right here because it will limit the options of controlling my website. I'm going to click on suffer calculus apps installer, then click on WordPress. So from here, we will be able to install the WordPress. Click on install. Now, we are going to stick with the latest version. And we will choose HTTPS protocol. This is the security, this is the free SSL certificate that you are getting with your hosting account. Choose the domain that you want to install WordPress under and lived the directory empty. If this is the main account domain, then it will install it in the public HTML folder. If it is an add on domain, then it will install Wordpress under that domain, which you can see on the left menu under File Manager. And if you want to install WordPress under a specific category, for example, your domain.com slash sales. Then you need to type sales here. Don't create the folder sales in the fund manager. Wordpress will auto created in the site settings until your website name. Let's say for example, Cheap flight tickets. Best. Hotel, crisis. And by the way, this is the line that people will see in the browser tab when they hover over it. See up there on the top left, this is what they will see. They will see cheap flight tickets, best hotel prices. In the site description, you can write anything you want here that will describe what your website is all about. I'm currently working on this website and hopefully I'll make a course about how you can earn money from an affiliate travel website. We are not using a multi-site, so I'll keep this unchecked. Entering admin username and a password. And the admin email such as the one we created earlier in the previous video. I will keep organizer unchecked. We are going to use a powerful plugin. Instead. We are not going to manage multiple websites. Click on advanced. You can keep the same database name and table prefix or give it a name that will identify it. For example, fly CC sex, and maximum of seven characters. Same for table prefix. If you got confused, then just leave the default values. Here. You need to check all the auto upgrades. This is crucial and this will protect your right side and keep it technically up-to-date. Here you can select a theme that you like and WordPress will pre-installed it for you. For this course, we are going to use a specific theme. Here you can enter an email and WordPress will email you the Installation Credentials. Try it and see how they email will look like. By the way, if you had chosen to install Wordpress from the quick install link, you wouldn't be able to see these options. Click on Install. This is the installed website. And this is the admin page. Click on All installations icon. And here you will find the religion of your website, shows the date of installation, the version, and whether it is hot to upgrading on it. It also has fewer options such as staging, where you can stage your website, a test server before you publish it on the live production server. Big companies used that. They wouldn't push any edits or updates until they tested on the staging server. You can also clone and make carbon copy of the website to another domain. You can also back up the website, deleted or just edit the information you entered before installation. Backup will let you create is zipped copy of your website in case you need to restore it. I always back it up after the first installation, so I don't have to go through the installation process again in case I need to start from scratch. Click on backups and restore icon where you can see the size and the description of the backup file. So this is the WordPress website we just created, which is of course empty, has nothing in it yet. And this is the admin area. This is for installing WordPress, and I'll see you in the next video. 5. Admin Area: To login to your WordPress admin area unit to go to your domain.com, slash WP dash admin. This is the login page. I will briefly walk you through the admin area in case you are not familiar with it. And I'll be talking about the key terms. You need to know. If you are familiar with the admin area, you can skip to the next video. This is the main navigation menu and says the toolbar. Here in the dashboard. You will see many things that you can minimize or turn on and off from the screen options. Here you can update to the latest version of WordPress as well as update your themes and plug-ins. Hosts are part of the blog by default, posts can be sorted or organized by categories or tags. And the inline edit tool called Quick Edit allows you to update Makefiles for an individual post. You will be able to write a new post under add new link. Why you are writing a post? You can create new categories and new tags. Every post in WordPress is filed under one or more categories. Categories allow the classification of your posts into groups and subgroups. So they aid viewers in the navigation and use of your site. Tags are the keywords you might assign to each post. Tags provide another means to aid your readers in accessing information on your block. This is the media library. Since it's a new WordPress install. It is empty. Here you can upload images, sound files, and videos. I suggest uploading only pictures and maybe some files to the Media Library. If you want to do videos, I recommend a third-party host like Vimeo or YouTube. Because we use can eat up a lot of your server and bandwidth and might slow down your website. Pages are your static content such as about us or contact us page. I generally disabled comments. There's a lot of spam out there that can come in with comments. And I will turn it off if I'm not going to interact with visitors. Appearance is something you will be constantly going to. The key things you need to know in appearance as teams and how to install and delete them. In this course, we are going to use a specific theme that I will be explaining later. Customize gives you the ability to edit things like your logo, your site identity, site title, pick colors for your website, etc. Widgets are little boxes that you can put on your website. For example, this is a footer widget. We just give you a lot of flexibility on where to put various aspects of your website. For example, you could put an email subscription, widget, image, WeChat, et cetera. Homepage settings. This is where you pick which page on your site will display as a homepage. The mains feature allows you to create navigation menu of pages, categories, custom links, tags that can be presented to your visitors, plugins. I will be covering this in details when I explained setting up and customizing WordPress, Users can add, delete and edit users. When you add a user makes sure that they're all you choose is what you want that user to be doing only only administrators have full access to your website. There are few options for the rule. Be careful when assigning roles. Wordpress supports importing data from a number of external sources. In many cases, post comments, pages, categories, tags, and users can be important. Or plus export can create an XML file for you to save to your computer, which we'll continue to post, comments, custom fields, categories, and tags. For instance, you can export posts and comments from this website and import them to another website. For settings under writing, you can control the interface with which you write new posts. These settings control the default category, the default post format, and the optional features, and the reading. You can control the settings in posts or pages. You'll be able to select which page you want to show as your homepage. You can also adjust how many posts are displayed on the main page. Discussion allows you to control settings concerning incoming and outgoing comments. The settings media screen allows you to specify the maximum dimensions in pixels to use when inserting an image into the body of a post. Wordpress uses web URLs, which have question marks and lots of numbers in them. However, there's something called perma links. I will use this one. It is neat. It shows the title in the URL, and this can help a lot in SEO. As a website owner, you may need to follow national or international privacy laws and have privacy policy page on your website. That's it. You're good to go. Now that I have briefly gone through the admin area should have a good understanding of basics. This was not a detailed explanation. It was a brief one to get you familiar with the admin area. And I hope this was helpful for you and that you have learned your way around the admin area. 6. Customizing WordPress: By now I hope that you already have a domain registered and they're hosting account and that you have your fresh WordPress website installed and ready to go. So now that we have installed WordPress and got to know the admin area, it is time to customize it. When you first login to your admin area, you might see something like PHP update required. To update to the latest PHP version. You need to go to your cPanel. Search for PHP. Go to multi PHP manger. Select the domains that you need to update and select the latest available. Click Apply. Now it's good. So here, refresh. And PHP now is up-to-date. First thing we need to do is to double-check our user account and change our password if necessary. Click on users, then click on Admin. We need to make sure that everything is in place and complete our profiles such as having a nickname and picture, etc. Now if I click on display name publicly, you will see at the men only, this is the default nickname. This name will appear on posts that you publish. For instance, if we go to our Homepage, you will see my admin as the publisher. Whereas if I choose my display name to be something else, let's say money Nasser. Then click on update profile. Then we go back to the post and hit refresh. You will see that it now shows by Nasser, not by Admin, which is my new display name. Second thing to do is rename the default category uncategorized, which is under post categories. I don't believe that it looks professional when people see a post on the uncategorized. For instance, if you go to the website, you will see that this post is under the category uncategorized. I always rename it as General, which looks more professional. I will leave a slug empty. This is what people see and the slug is the corresponding term in the database. Wordpress will auto create a slug for me, all lowercase. So let's check now, and it is now under the category general. Another thing to delete is the default posts. So let's click on posts. There is only one default post which is Hello World, and it looks like this. So just click on trash. And you will see that it now appears under trash. I will leave it there for now because I want to show you another way of deleting it. Same thing. We will do two pages. Click on pages. You will see two default pages here. A sample page looks like this. And a privacy policy draft page, which looks like this. Here were press created a genetic privacy policy for us and we can modify it the way we wish. So I will just delete sample page and leave privacy policy for now. Next we will check settings. If you remember, this is the site title and this is the tagline or description we enter during installation. Check the site language. If I select French, for instance, look what's going to happen. It switched to French. Let's try right-to-left language. Arabic for example. C. Now it shows Arabic language and it is right to left. Let's make it English again. By the way, when you chose a different language, you might see Update Notification here. Click on that. And you will see the translations has been added. Just click on update translation and it should update to the latest version. Here you can also modify your time zone, Date, and Time Format. Now, let's create some pages. For example, about us contact us Terms of Use, blog, et cetera. And let's publish privacy policy page. And just a quick note here that sometimes you might not need to create any of these pages when you install a professional theme. These pages come built in. Ready-to-use. Click on add new. I'm just going to type a title for now and click Publish. Now let's add three more pages. Here we go. All the five-year pages we just created. Let's publish participles page. Now let's go to Settings, Reading and change our homepage to the home page we just created. By the way, the default home page of WordPress is the latest posts published. But we can change it to a static page of your choice. And you can select your course page to be a specific phase of your choice. In our case, it is the blog page. Select a static page, then select home, and select lump for post page. And you can do all of this from appearance customized, home-based settings. If we go to say about us page and view it, look at the URL, chose beach ID and a number. It doesn't look nice. This is not good, especially for SEO. Same thing applies for posts. Click on posts and view hello world post. It shows the post id. Now it's time to fix our perma links. If you remember, I mentioned before that WordPress shows URLs as numbers and letters. That does not look professional. But WordPress offers you ability to create a custom URL structure for your paramour. Less. By the way, a permalink, which means permanent link, is a URL that is intended to remain unchanged and select mostly Save Changes. Go back to pages view about us. It now shows the page name instead, which is good for Google indexing and better for SEO. Same applies to the post. Let us check helloworld. It looks better now. Let's try another one, say Dan name. But this will not affect the URL of the pages. It will affect the URL of posts on me. Let us check hello world post. It shows the date it was created and the post name, whereas the base URL did not change. Let's choose the most common one and the best for search engine indexing, which is hostname. Let's take care of some widgets. Click on appearance and then click on widgets. If we go to the homepage, you will see all of these default widgets. Let's clean it up and remove all widgets to ways to remove a widget, drag out or click on, delete. Let's have a look. There are all done. Now if you are unsure about deleting widget or you want to remove it temporarily. Let's, for example, and the new custom HTML widget. Call it test. Testing a widget. And click Save. Here is the new budget. Let's say you temporarily want to remove the widget for the website, but you don't want to recreate it. You don't want to lose the content. So what you can do as drag and drop the widget onto inactive widgets. Let's check. It's gone. If later you want to put it back then all you need to do is drag it back again. Hit refresh, and it's back again. Finally, let's create some menus. You can do this from appearance, customized menus, or just click on menus on their appearance. But before that, let's modify few things here to have a better look on menus. Click on appearance. Colors. You see. Here's the background color where the main contact goes. As this color. You can change color from here. I will do color F5, F5, F5, which is light grey. You can reset the color to the default value at any time. Let's change the color of the header and footer or something like that, and click on publish. Let's add some text to the home page. You can go to pages, click on home or from the homepage and click on edit page. Let me, for example, copy this text and paste it here. Click update. Click on new page. Now roughly, we have a page that can customize. But of course, the page does not look professional and it takes time to customize a beach. That's why you must developers use readymade, beautiful themes and tweak them as per the client's needs. But these themes, some are free and some are premium. Now let's go back to menus and let's create a new menu. Let's call it Main Menu and another menu called footer menu. Every team has its own structure, its own menus layout, and its own pages layout. For this guarantee, which is 20-20. These are the locations where you can display menus. Desktop, horizontal menu, desktop, expanded menu, Mobile Menu, footer menu, and social media. You can insert the menu items that you want to, it's corresponding menu. For instance, I would put home about us and contact us under the desktop horizontal menu. Let's add menu items, for instance, at home, blog about us and contact us that the main menu and home contact us Terms of Use and privacy policy under the flutter menu. You can also manage the main locations from here. Ok. Lets go back to the homepage. Click on Contact Us. Click on terms of use. Click on About us. Look at the structure of the pages, just similar header, content and footer. Whereas if you click on blog, it has the structure of hosts. And the free recall, we chose our posts page to be the page blogged under Settings Reading. So just as mentioned before, for instance, FH is your static content and the cost is the stories or articles that you keep adding to your websites. And they will show under each other on a single page and you can select how many articles you want show on one page. Here's an example of a static page. And here's an example of a blog or posts page. Let's quickly recap. We learned how to edit a user and select the nickname, change your password, and update its profile. We then renamed the default uncategorized category to General. Then we deleted the default posts and babies. Under Settings General. We checked our title, description, time zone, Date and Time Format, et cetera. We then created some pages. Change the default homepage and posts pages. We changed our permanent links, learned how widgets work. And finally, we learned how to create menus and assign them to specific locations. There are many other options there and I will be explaining the mostly used and needed ones as we create a new website. I hope this was helpful enough to become familiar with WordPress environment. 7. Plugins: Blogging is a tool or a piece of software that expands what you can do with a website without having to manually write or edit code. So I plugging can extend functionality and add new features to your website. Now depending on which hosting provider you have an account with, you might see some of re-install plugins or themes. And most of the time they try to upsell you to premium version. If you have an account with those gates or you might see these plugins, jet lag, module marketplace, sidekick, my Google. I'm going to show you other options. So I will first select these, deactivate them, then delete them. Now, these are the default WordPress plugins are Kismet anti-spam and handling. Hello dolly is in 1964, musical lyrics and music. When this plug-in is activated, you will randomly see Alaric from hello dolly in the upper right corner of your admin screen. On every page. Here. Kismet. It's a plug-in that checks your comments and contact form submissions against the provider's database of span to prevent your site from she malicious content. You can review the comments spam, it catches on your websites, formants admin area here. For Anatolia, I'm not going to use that, so I'm just going to leave it. And for a Kismet, You need to activate it. You need to create an account for them. So what we are going to do is setup your Kismet account and super easy to set up your account here. Yet personal. Drag this to 0. Enter your email. You should receive two emails. One that gives you the email verification codes or enter it and verify your account. And the other one gives you their count API key and connect with API key here and the status is now active. Let's now install a security plug-in for our website. So let's go to plugins, add new, search for or fence, Security. This one, it has 3 million active installations and almost like all 5-stars. So let's install it and activate. Let's register it. And let's go with no thanks. We know we need the free version. Let's click on war trends on the left me. Or trend security is by far the most popular word press firewall as security scanner. It is a must-have. It identifies and blocks malicious traffic. It's malware scanner blocks requests that include malicious code or content. It protects your website from brute force attacks by limiting login attempts. So really it is a must-have. So let's go through some settings here. Click next, just read the instructions. Next. Quarter's needs to do some modification to your dot HT access file. You need to click on downloaded this just like a security or a backup. Click on Download, then click on okay. And close Dion towards friends to stay up to date automatically ES enable auto update for sure. Of course all of these will go to a 100% if you, if you get the premium version, but the free version is more than enough to protect your website. Let's click on scan. And there's nothing there now, but let's start a new scan. Here. You can scan your website and see if it has any problems, any malware or bad files, and it will tell you what to do. So we did the first game, of course, there is nothing in there, so it has to pass everything. But if there's a problem, it will show you here and it will alert you that email that there's a problem whether it is a plug-in that needs to be updated or upgraded, or a file that has been injected to your website. Things like that, it will protect your website. Next, we need to install a plugin called element, or it is a page builder that delivers high-end page designs and advanced capabilities. I'll explain it in details when we start building websites. So let's go to Add New and search for lm mentor. This is the one. So click on install now. Again, like 5 million active installations and it's almost all 5-stars. Click on activate. Now we will install a couple of plug is essential add-ons for element or where you can enhance your element or page building experience with 70 plus creative elements and extensions. And we will install premium add-ons for elemental where you can supercharge your element are paid on that with 50 plus highly customizable widgets. They come really handy. And that will give you the ability to build great websites and less time with no coding. So let's click on Add New. And again, let's search for element Tor. And this is the first one essential Adams for element or install. Premium add-ons for elemental install activate. And we can activate the other one from here. So another plugin called starter templates. This plug-in gives you access to 280 plus pre-made full website templates and individual pages for the page builder element or so. Let's activate it. Okay, next I'm going to install a plugin called WP about delete. This plugin allows you to delete posts. They just comments, attachments and users and Bach. And it has different powerful filters and conditions. So this is the one Install Now. And activate. Next we are going to install a plugin called W forms. This is a great and easy to use form builder for WordPress and this is the model install now. And activate. Let's go to plugins. Add new, all in one SEO pack. All in one SEO Pack allows you to optimize your WordPress site for SEO. There are another plug-ins out there and one is called the yeast. But the feedback I get from my clients is that all in one SEO Pack is much easier to use and it's straightforward. So I'm gonna stick with the All-in-one SEO Pack. And of course, all of these plug-ins, I will explain them as wisdom while building your website. Next, we are going to install a plugin called WP. Optimize. This plugging cleans your database, compresses your images and caches your site for faster load times. So let's activate it. Next. I'm going to install a plugin called redirection. This is the one. It is the most popular redirect manager photo or press. With it you can easily manage 301 redirections, keep track of 404 error pages. For instance, you might have the page or an article that you deleted, but it is still listed on Google. Redirections plugin will redirect this broken link to your homepage instead of seeing an error page. So let's activate it. Next, we are going to install a plugin called all in one WPA make relation. This is the one. This plug-in exports your WordPress website including the database, media files, plugins, and themes with no technical knowledge required. And then you can upload your sexual different location with the drag and drop interviewer. Press. Next, we are going to install a plugin called social Snap. This is really a nice social sharing plug-in that helps you drive more traffic and increase engagement by leveraging the power of social media. So let's activate it. Next, we are going to install a plugin called click the chat. This is a WhatsApp plug-in that allows your visitor to contact you through WhatsApp. You don't have to have it, but it's good, especially if you have an e-commerce website and you want people to interact with you and send you immediate messages. Finally, we are going to install a login customizer called Color Lab login customizer. As the name suggests, this plugin allows you to customize your login page and it's really nice to have and the powerful one. So I'll explain all of these as we start building the website. But these are the essential plug-ins that I really suggest that you have on your website. So on the plugins page, USE premium lot in emissions widget is now available to check it. Now we don't want like premium Virginia. It's up to you to take it or not. Do you want to help make essential atoms? Four elements are even more awesome. You can get 10% discount, know things, and complete your redirections setup. Let's start the setup. If you change the permalink and post or page, meaning if you change the title of the post or the name of the of a page, then redirection plugin will automatically create a redirect for you. To redirect the URLs to the new post or page. Keep a log two or IP information for redirects and finished it up. Now redirection will go to work and the backend. And here you can monitor all redirects. So let's recap. We first deleted hello dolly plug-in. We then created Kismet account and activated the plug-in. We then installed war security, installed elementary, essential add ons already mentor premium add-ons for another mentor. The start templates. We then install WP, Bach delete. We installed W4. Then we installed All-in-one SEO Pack. Wp optimize, redirections, plug-in, all in one WP migration, social snap login into chat login and the login customizer. I hope this was helpful enough plug-ins and I'll see you in the next video. Installing new theme. 8. WordPress Major Upgrade to v 5.5: Just wanted to let you know that on August the 11th, 20-20 WordPress, you list a version 5.5 and like this is a major upgrade to when you log in, you will see please update now. Click on it and click on update now. And it will upgrade you to 5.5 version 5.5. Click on plugins and you will see now that there is enable auto updates in this new version. If you remember, when we installed WordPress, we chose to auto upgrade the plugins themes and the versions major and minor from here during installation. Now if we go to Plugins page, select all plugins and then enable auto updates, hit apply. And all of them will be enabled. And you can do them one by one from here if you choose to. Just wanted to share with you this new upgrade and update my course. 9. Installing a Theme: For this project, we are going to use a theme called Astra. So let's go to Appearance Themes. And you will see that we have WordPress default things, which we are going to get rid off after we install our new theme. This Sinatra theme, by the way, comes pre-installed by Host Gator. You might or might not see one here based on your hosting provider. So let's click on add new and search for Astra. This is the one. So click on install, then click on activate. Now let's go back to themes and delete the other ones. It is always better to the themes and plug-ins that you are not going to use. So let us first delete Sinatra theme, then 2019 theme, then the May 2017 and Thiel. And finally, let's delete 2023. And we'll end up with Astra Theme only. 10. Backup your website Now: So far we learned how to register a domain name and have a hosting account. Then we learned a bit about cPanel, about how to install Wordpress efficiently. We learned our way admin area and how to set up Wordpress properly. Then we installed necessary plugins and install a theme called Astra. Now it's time to backup everything we have now like WordPress loaded with everything we need to be able to build a successful website. So let's first go to cPanel. Click on soft daggers, absence, dinner, WordPress. Click on home installation. Click on backup. And if you remember, we call the first one thresh information. Now we're going to call it fresh installation loaded, loaded, loaded with everything. We need to have a successful website. Click on backup installation. Now let's click on backups and restore. This is the fresh installation taken at the very beginning, and this is the automatic partial backup taken during a plug-in or theme upgrade. And this is the thresh installation we just had and it's loaded with everything you need to build a website. Now let me show you another way to backup your website with a plugin installed rear. So let's go back to dashboard. Scroll down to all N1 WP migration. Here we have options to select what we want to export, what we don't. And then we have options to export to the file. Export to a file is three. It's in the free version, and it has a limit of 256 megabytes. Whereas for example, Google Drive and the rest of these. This is a premium version. There's a backup scheduler with hourly, daily, and weekly options. So let's go back and let's export to a file. So let's download the file. And let's bring the file over and rename it as fresh installation, loaded and give it a date, 1707. So if we go down here to backups, we'll see our file there. But you cannot restore it from here. Every free version has a limitation. So what I usually do is delete this. Note that I have one on my desktop. And if I want to important again, I'll click on Import and just drag and drop here. So let's have an example of this backup. Let me go to plugins, for example. Select all except all in one. Iteration. Deactivate all, select all, and delete. So let's click on plug-ins. Again. There's nothing except one plug-in. So this is our latest, let's say we did something wrong. We messed up the website, we deleted accidentally some pages or some images, whatever it is. We can always restore to the previous version that we downloaded earlier. So to do that, I'm going to go to imports and drag and drop the file here. Now it's preparing to import the tableau, the database or defile and proceed. This will overwrite everything which is what we want. And your site has been imported successfully. Click Finish. Now if we go to plug-ins, we should see that the area version before we deleted everything, which it is. So as I mentioned, you can do it this way. Just exported file downloaded to your desktop. And do this once a day, once a week. It's up to you or you can automate it by subscribing to one of these services. It's really up to you. It depends on how often you change your website or you update your website and you don't want to lose any data from it. Now, there is another option which is called updraft plus. Updraft plus is a widely used WordPress backup. It's a very powerful plug-in as well. The major difference I see between this and all-in-one migration is that this one exports your website into 4-5 different files, whereas all-in-one migration exports is to 15, sorry, just export on file and import 25-year. You have to export five files and imports five files. This one though, has no file size limitation. In this one. You can do automatic restore and automatic backups before updating the website. So this is ultimately there's no limitation here and the size like there's no limitation for the size as well because you are using your own Google Drive or in your own storage place, et cetera. So it's up to you to choose either. I prefer this straightforward, easy, especially for smaller websites, for bigger forbear websites, you might need to use this one or goal with the premium version of this one. I hope that you now have an idea about how to backup your website, whether using cPanel or a login like all N1 WP migration. 11. Get to Know Elementor: In this video, you will learn the first steps to page building with element or I will begin by adding a new page. In your dashboard under Pages, click on, Add New, then click on edit with element are here on the right side is the editing screen of your site. Here you can add and edit elements that form the layout of your page. Here. On the left side is the element or panel. Here you will see the tools called widgets. You can use with Just to add elements to your page like headings, paragraphs, images, and videos. You can search for specific widgets to when you start building your page, design it from scratch by clicking on the plus button here to add a section. Or you can use a pre-designed template. Click on the folder icon to add a template. Okay, let's add a template first click on the magnifying glass to preview a template. Here we first need to create an account with element or so. Click on Get Started. Click on create an account. Then you need to connect element or to your website. And the templates will be automatically inserted. Okay, now let's have a look at the anatomy of a page. Each page in element or is made up of sections. This entire area here is the section. These are also sections. Notice the blue border around each section. When you hover on it. Inside a section, there are columns. You can identify the column by its handle. Here. Here's another column. Inside the columns we have budgets. This is a text widget which is inside a column that is inside S section. You can use the handles to edit any elements and move them around. To edit your section. Click on the dots in the middle here. This opens the panel to layout, style and advanced. Move this section up and down using the middle dots by dragging and dropping. Here, you can also right-click to duplicate or delete your section or copy and paste, etcetera. You can do the same for a column, just right-click it sandal. And to add a new conscious, click on, Add New Column. And you can do the same for widgets, duplicate, delete, and copy them. The layout is very flexible. You can easily drag any element around, change the column width by grabbing edges and moving left or right like this. So let's create our own first section. Click on the plus sign to add a new section. Here you can use the number of columns you want. In this section. I will choose two columns. Let's start by dragging a heading widget into the left column. So go back to the panel and drag a text editor widget in the same column. By the way, anytime you want to see the panel of widgets, just click on the widgets icon here to open the panel. Now let's add a button. You can see that you can drag the widgets following blue line indicator. If you want to change its position, just drag and drop it wherever you want it to be. Now let's add an image, drag an image widget from the panel into the right column. Click to choose your image from the Media Library and click Insert. Let us adjust the height of the overall section to create some more space. Click on the handle here to open the layout style and advanced tabs that you'll be working with to customize your section. In layout, you have a few options to adjust the width of your section under content to it. Choose between boxed or follow-up. With the box. Use the slider to adjust the width of your content on their height. Let's choose minimum height. Toggle the height of your section, or choose a specific number. Let's try 500 and set the content position to middle. Now let's give this section a back ground color. Go to style and click on the paintbrush icon and choose a color. Now let's go back and tweak our widgets. Click on the headline pencil handle, which opens three types, contents, tile and advanced. In content. Set the alignment to center, right or left. Under style. You can see colors, fonts and more design options. And the Advanced option you can adjust spacing and other advanced options. You can also just type your headline text directly on the screen like that. And then on their style give, detects some color. And in typography, choose a font style and set the size. There are some other parameters here that you can play around with. You can check it out. Okay, let's tweak the button. Click the pencil handle to open its panel. Fill in your button text. Align the button to the center. And here below it, you can set the size or set your own custom size under style and typography. To check your design and see how it looks full-screen, just press the middle arrow here. If you want to publish it, just click on the green Publish button down here and click, Have a look. So you can see the Published page. If you want to preview your draft before you publish it, click on the i icon. Here we are. In the bottom panel. There is also a circular arrow icon that takes you to your history, which is divided into actions and revisions. In actions, you can retrace your steps. Click to return to an earlier edit. And in revisions, you'll find all your saved versions. Elementary auto saves your work after every change, which is good. The device icon here lets you view your content as it appears on mobile tablet and desktop devices. Click on the navigator icon where you can navigate through your page. This comes handy if you have many sections and you don't want to scroll up and down. Click on the gear icon where you can edit the general settings. You can change the name of the page and the status and the layout. Choosing Canvas will give you a full page with no header and footer. Canvas is good for landing pages. Choosing mentor full-width will give you a full page, and we'll hide all the sidebars. One more thing in the panel is the hamburger item, which handles global settings for your entire website, not individual pages. You can set the global defaults for fonts, colors, etc. Generally, we have covered most of the interface and I hope this was helpful enough to understand the Page Builder elements are. 12. Creating a Website from a Template: In this video, we are going to create a website from a ready-made template. All we need to do is choose a template reported and tweak it. And you can probably create a website in couple of hours if you have your content and images ready. So let's first go to Appearance, starter templates. And let's choose element or as the page builder. Here you will find many templates, free and premium. I'm going to choose a free template. Click on All, click on free. And there are many free templates that you can go through and choose the one that fits your needs. So I'm going to choose a template and tweak it and make a few modifications to it. So for this video, I'm going to choose the nutritionist template. Click on it, and you will see it has six pages home about program's success stories, blog, contact like this one is almost comprehensive. Likert has many things that I need to show you. Just a ready-made template, tweak and put your content. And at end your live website up and running in couple of hours or so. So. If we go back and choose another one, for example, this one, this one has five pages. Choose another one. This one has four pages about testimonials, contact, and the homepage. So now let's go back to the nutritionist template. And by the way, you can import pages only. For example, the success stories in port. Success stories template, import contact templates only it's up to you or you can import the complete site. And to preview it. As I showed you before, just click on this arrow and you will have it up there. So let's click on Import complete site. And if you have a previously important site and you want to get rid of all the content and images, et cetera, from it. Just select, delete PVC imported site and it will be replaced by this new template. And this is your new website. And all you need to do now is to replace images and content and make a few modifications which I will be showing you next. Now let's go back to our dashboard and I want to check something here. Under Pages. We had only one page, which was the Privacy policy. But when we important this template, it created all the necessary edges for us. Let's check posts. And for the blog. We did not have anything here. We had trashed it, but it created a new blog posts for us, like ready-made. But unfortunately, it's created uncategorized category again, if you remember like I prefer to rename it as General or whatever the topic is, just like give it a name, give it a proper name. So I'm going to quickly edited, uncheck only the Grise, check general update. Second one. You can create your own categories and assigned posts to these categories, so it's your choice. Now let's go to categories and get rid of uncategorized. Let us check one more thing which is under Settings Reading. Okay, you remember that we have, we have our main URL as the home page and select aesthetic page. Under Readings Settings, select homepage as home and the post page as the blog. Save it. One more thing to double-check is the links. And it should be posted in a few see somewhere as just click on Post Name and updated. And the other thing I want to show you here is the images in the media library. Now these images should be optimized, especially if you have limited space in your hosting account. And if you don't want to slow down your website, if you wanted to load faster, these images should be optimized. And we installed a plugin called WP automized, which I will explain in a bit. Let's have a look at this image. For example. Dimensions is very good. 1200 by six to eight, and the file size is good, 126 kilobytes. This 1500 by 37040 kilobytes. This is excellent and this is optimized. But let's have a look at this one, for example, two megabytes. This is too much and the dimensions is pretty good. But the file size is two megabytes. Now you have two options. Either compress it from here, or before uploading it. You can go to a website called reduce images.com, drag and drop the image. Also, for example, drag and drop the image. And select the size if you want to reduce the size of it or keep it under percent, let's keep it a 100% and quality. Let's make it 95%, and let's resize it. 387.25. It is still vague, but it's better than two megabytes. Now let's close this and let us go to WP optimize. And I will show you why these images did not automatically optimize. So let's dismiss this. And let's go to images. Here. If we select automatically compressed in newly added images, once you upload it and once you load the page, it will automatically decompress it. And you don't need to optimize. And of these, let's click on cash and enabled page caching. Caching is a temporary storage of documents of your pages in the visitor's browser. What this will do is it will save a copy of your webpage in the visitor's browser. So next time they visit the same page, if it's not updated, it will load from their computer, not from your server. So this will decrease the bandwidths and will make the web page load faster. Now, let's go back to the database and it's good from time to time to come here and select all and Run Selected optimization. This will optimize your database. And another thing I want to show you is all in one SEO. And this will make your website Google friendly. And what it does is it adds a metal box in your wordpress post or page editing screen. For example. Under page title formats you will see page title and decide title. Here. If you are all over this, you see page title about and the website title. But you can override this. If you go to that page and click on Edit. Not edit with elemental, but edit. When you create this page, you can do that. And then scroll down. And here you can enter whatever title you want for that page or that all stand whatever description you want. And it will be submitted to Google automatically. So you can override the global cities. And this is your XML sitemap. Click on XML site map. It will show you the sitemap that can be submitted to Google, and this will be great for indexing your webpages. You will post your articles on Google. I would leave everything the same. I wouldn't I wouldn't touch it. I want to change anything unless you are really professional and that just leave everything as default. All-in-one SEO, we'll go back, we'll go to war. In the backend. This is the feature manager and XML segments is already activated. Social. We already have a social plug-in. Robots.txt. I will activate it because this will generate, generate, and validate your robot.txt file to guide search engines through your site. Here file editor. I would leave this inactive. That bought blocker activate performance or a deactivated VDS sitemap. This is a pro. So this is it for all in one SEO, you don't need to change anything here, just leave it as it is as default. And as I said, the All-in-one SEO will go to work in the backend. Now I would like to show you the plug in social snap. I really like this plugin is simple to use. It's free. It has Premium version of course, but the free version is more than enough. And look here, the side on the left, you have the social buttons. So from social sharing, managed networks, you can add networks from here. If you want more unit upgrade, but I don't know, it's up to you. Floating sidebar. On the right, on the left, let's put it on the right circle or rectangle. Large, small or regular. And I want to appear on pages and pages as well. Unsaved changes. Let's go back to the inline buttons. That's come under articles and post pages. Again, circular, rounded, rectangle. Whichever. You can change the share via text here. And you can have it below content or above constant or on both. And yeah, they alignment right, left, center, whichever. And here I want it to appear on post pages and pages as well. Save. Go back. And on media if you want. For example, like the Pinterest button, to appear on images. Rounded circle, rectangle, always visible or on hover. Let's put it on our position. I would like to do bottom right here. And let's have it. Homepages, homepage all images. So now if we go here and refresh here. Now let's go to appearance menus. And this template automatically installed a menu called top navigation. And the location. Here, it is the primary menu. And these are the pages that have been added to the menu and we can actually view it live. And then click on menus. And this is the on top navigation. And this is the menu here. So you can play around with that. Rearrange that these will switch with a dead. What about under programs? Now about as sub-menu? But this here, it is automatically updating and showing to you the live preview. Okay, another thing that I would like to show you is a plugin called login customizer. Now I want to choose a template like this one and login template, this one look nice, especially if you are giving this to a client. The login page will look more professional. So I choose this. Then for logo. That's selected image. This is the logo here and we can increase the widths. And let's go to the background option and select an image. For example, dementias are good. And then had published. Last thing I would like to mention is the favorite item, the fab icon. You might see if AB icon, and this is the little logo here or little image here you see in the browser. So let's replace the WordPress logo with our logo. Let's go to Appearance. Customize. Click on header, site identity, and select Site icon. Scroll down and this is the image I'm talking about, PFE back home, which is abbreviation to favorite item. Select, skip cropping. And here it is up there. Now it's our logo there instead of four press logo. And of course we need to publish for the changes to take effect. 13. Let us Tweak our Pages: To be honest, creating a WordPress website is not only installing WordPress and downloading a free theme, then copying and pasting content. This is really the easy part of it. Everything needs to be integrated and set up properly. You really need to know which theme to use, which template install, which plug as to have, and why you should have them. Now this is lecture number 11, and we are yet to finish the website, but the hard part is gone and the rest is easy. The previous lectures might have been too much theory and might have been boring for some. But trust me, you now have a solid foundation on how to set up a proper WordPress website with a solid backend. So let's go through the pages one by one and analyze them. And please don't mind me using the domain fly cheaper dot cc. This was just for educational purposes and I'm going to delete this website I, after I finish recording the course. And in the next course I'm going to show you how to create an affiliate traveled website and earn money from it. And I'm going to use fly cheaper dot cc for that purpose. Okay, so let's get into it and start replacing the existing content to ours. For the images, I'm going to stick with existing images, but I'll show you a place where you can get royalty-free images. So click on edit with element or this will open page in element or this is the image place. Three images from Pixabay. You can search for an image, but make sure that the dimensions match all at least close to it so you can upload your own image. Or as I said, you can get three images for me. I wouldn't now starts replacing the existing content to my content and I wouldn't be at the video and you can watch me doing it. You And you see this whole sentences because it allows us to do so, to say. So. To understand order now, easy to use one-click ordering system. So let's go to PayPal.com and login to our account or create an account if you don't have it. And after we all again, click on the gear icon there, then click on cellular tools. Then click on PayPal button is manage. And select Smart budgets. Here you can enter your price and there are a few options you can choose from. If you want. If you want it to appear vertically, horizontally on mobile desktop, how it would look. And the color as well. Like You can choose colors. I like the blue one, so I'm going to select that. And ongoing just said let check out. Instead of just because so PayPal check out and copy the code. I know this is copied to your memory. So I'm going to click on the widgets as and search for HTML and paste the code dichotomy from PayPal and just delete the older, not the existing order now button. So let's refresh that each scroll down. And here you go, Paypal checkout and easy to use one-click button. Anybody unlike the way that Montalto this. So let's continue copying and pasting our continent. When I click on blog, it will show me in NTP age. Denise, show me any of my articles. Just remember to go to Settings, Reading and select bloke on the coast pages and hit save changes. Now go back to the page and blog page. Click again. Okay. Sorry. So you see this. So these are the final steps. So the last copy and paste. Then click on Contact. And I want to replace the existing form with our phone WP forms. So just search for forms and select the one at the bottom. Wfp deforms, drag it. And from the drop-down, select our form, contact form, and delete the one at the bottom. Now I want to adjust the margins right hand, left, it looks narrows. I want to just make it a bit wider. So click on advanced and adjust the right and left margins. No, I'm going to deselect the title. And the area going nice-looking. Form. No, let's adjust the footer for that. We go to Appearance header footer blocks. And click on footer. Then click on edit with element. Here, scroll down and here you can replace your email, phone number. She lived on the address. You can put whatever you want in near. You. Now, step two. One more thing I would like to show you is the WP above the L0. And here you can get rid of all revisions, thrash and auto drafts that had been created with one single click here of all of them are gone. Now. Now I will show you how to easily back up and pack your website that you just created. You might want to save a copy of the back up on your computer, or you might even sell it and make this as a business. Then what you need to do is build a website in your cPanel packet and send the buyer as single file that they can import to their fresh WordPress installation. Or you can install Word Press on their cPanel in case they don't know how to do it. And then import the file and they will have their website up and running in less than an hour. So now I'm going to export this website that we created and will import it to another domain on another server. And you will see that it will be an identical website to this one. So on all in one WP migration, select advanced options if you need export to a file and wait until they export is done, it will take some time. I just fast forward it, then download the file. Here it is downloading. Here's the file, it's about 250 megabytes, so be careful when you export your file. The free version allows a 100 megabyte, I guess. So this is the original one. And this is the threshold question on a different server, different domain. And we go to the admin area here, and this is the default WordPress, and then go to plug-ins, delete anything. Then add a new plugin and search for all-in-one migration install. And then activated. After that you need to go to all m And WP migration in port. And drag and drop the file that you are exported from the other side. Again, as I said, they allow a 100 megabytes for the free version. I have upgraded my version so it will take a 150 megabytes, so be careful when you do them. So now it has been imported successfully. And don't forget to give the client the password of your existing website because that's the one you exported in your file. Now go to my blog, hit refresh. And you go, this is the new domain. And it is an identical web site to the one we created in this course. 14. Final Touches: Finally, we need to check if the website is responsive and see how it looks on mobile and tab. So click on responsive mode here. Click on tablet and scroll down. It looks fine. Close good. Click on mobile. And let's see how it looks there. Again, it looks good. But there are couple of things I want to mention here. For example, here it's like there's a big space here. We need to clean this. Allow some people like to see these images cause, to cause. So to do that, click on the six outs here, click on Advanced, and then I just arrived to 0 and the left to 0, I'm Diego. And the top. If you want to be as good. Now select the column. Click on style position, and you click on top center. It will adjust a reach for us. Now click on this column and again, advanced. Top margin 0, bottom margin 0. Now click on this column and go to position and top center. And go to Advanced. And the bottom, make the bottom 0 and top center. Then click on this column. And again make it taut enter. And on this column, we need to change the bottom here to 0. The fixed this. Now click on this section. And let's adjust the top and the bottom. It's a lot of space and the Mobilize, so it's digested. Multicore on advanced. Again. Click the bottom 20. You can also set the margins of these images to 0. It's up to. And one thing I noticed here, again, these, you can set the margins to 0. Let's do it actually. Right? 0, less than 0. And it looks neater like this. So scroll up. Yeah, I notice this one here gets close to cost and this doesn't look good on mobile. Let's give it some margin. So click on the column here. Advanced. And let's give a right of 2020. Yeah, it looks better and nicer life of s. You could do 10101515. It's up to you. So here you go, there you have it. I hope you enjoyed this course and I hope you benefited from it and know how to build a website and responsive WordPress websites from a to Z, from registering a domain to publishing your website. Thank you very much. 15. 13.1 Practice Elementor Part 1: As promised, to explain elemental and have to use element or in case you want to edit all tweak a page or a template that you downloaded, or you want to create your own. You need to know how to use elementary. And with plugins, you need elemental plug-in, essential add-ons and premium add-ons for elements. And they are free, like there are two versions of it, but the three versions are more than enough. But before we start, you need to have an elemental page ready and practice with me. This is the only way you are going to learn. Repeat what I'm doing and apply it. Pause the video at anytime. I'm going to go slowly so you can adjust the action and replicate it. If you just watch the video without practicing, then this might be a really boring. Because as I said, I'm going to go slowly. So kinda understand how it is done. Again, please open element and element or page and start practicing. So let's start by creating or adding a new page. Let's call it practice. For example, publish twice, and then edit element R. So this is our page, empty, nothing in it. And if you view it, it will look like this. And let me remind you with some settings here. This is the default what you just saw. Element or full-width. Again, it will give you the header and the footer. Elements are canvas. You remember if you want to design your own header and footer here, you can't get rid of them. And we are going to learn how to design our own header and footer later. So remember when when we start creating a page, we have to add a section. Inside the section. We have columns. Inside the columns. We can add widgets. So section columns, widget, widget is inside the column that is inside this section. Let me first click on the settings and let's put some high tier. So go to minimum height and you can play with the height. Let's add an image to this section so it's the background. And remember, where did we go to the background? Advanced style. Yeah. And you can add the color, long color, or a primary color, whatever your template is. Or you can add an image. I had added some images and let me pick one, for example, this insert. But first let me clear this color which is underneath the image. I don't need it there. So you click on this little area here, clear. So we only have the imaging and but it's up to you how you want it to. Look. If you go back to layout, you have two options. Height, you can adjust the height. Or you can choose trip to screen and it is responsive, whatever the screen size is, it will respond to it responsive. That's, we're responsive comes from it will resize itself to the screen size of the viewer. Now here we have column position middle. This column is inside this section and it says in the middle of the section, okay, if I go talk to go up. If I go bottom, it's here now. So it's up to you where you want to put it all, go back to the middle. Now, I want to align this, the test itself. So where do I go? I have to click on the widget itself where the text is. And go center. Uncheck, go right, uncheck, go left. The default is aligned left. So I'll go back to the section. And let's do some tweaking to the background. Here, position reports happens here when I choose, for example, centre, centre, centered, the image that I have. As a background. I will choose. No repeat, do not speed the image on the right or left. And for the size I will choose cover. The whole thing now is inside this section. For example, there's contain, but look here. We have empty area. So if I choose now, repeat of what happens if European on right or left, which is, which I believe does not look nice. So I will go back to cover. No, let's go to background overlay and see what happens. To click on the color. For example, primary color or choose your own color, for example, black. Look what happens here. And you can adjust the opacity, how dark or light you want it. So let me go with, for example, 0.65. Okay, now I need change the color of the headings. Where do I go? To the column? Nope, I will go to the section itself. And now we're remember to change the color property of the texts. We have to go to style, text color, and choose white. Now go back here and center it. Now for the size. You can choose, H1, H2, whatever size you want. And if you want a bit bigger or smaller, you can adjust it from here. I do suggest that you always choose the header from here and the size from here. Instead of going to typography and adjusting the size from here, it's up to you, but I do suggest that you do it from there. From here. You can make it darker or lighter. And you can make it all uppercase. Capitalize each word. All lower. Leave it as default and the style, italic, or not. Decoration on the line overlying line through line-height. Please always choose at least one or 1.2. I tell you why in a minute. Letter spacing. I would start with 0.5. Now look what happens here. Some fonts are really too tight, like the letters are too tight, like very close to each other and you can adjust the spacing from here. I go 0.5 to start with and then adjusted accordingly. So let's click here. And if we want to edit the text, of course we go to content and we type our own text here. Now, you remember that when we create a section, we can choose as many columns as we want. And the, the way the columns look. For example, we can, we can choose two columns and from here, we can adjust right or left. This is the one way. Another way. What if I want another column here? What do I do? Right-click on the column and say Duplicate, or let me go back. I'll do control zed. Undo, right-click and say. Add a new column. No, let's adjust the padding and margins of the. So click on the widget. Go to Advanced. And remember the padding is this distance, the inside distance. Up, down, left, right, the margin. I'll explain the marginal and I add another widget here. So for the padding, Let me put, for example 25. What happens? 25 from here, from here, from here, and from here. If you don't want to put a margin, or sorry to put padding on top or bottom. So uncheck this and do it separately. Okay? And for example, the right, you can put it 5050, something like that. You know what, I'll just go and do this. Excel on me. Okay, now let's add another widget here so I can explain the margins to you. So to add a widget where Diego, okay, click on this, these nine dots. Let's add a text editor. Okay, what do I need to adjust here? Obviously, the color. Where do I go? Style, text, color. Choose from your own, defined all the templates defined global colors. Or from here you can choose whatever color you want. Okay, now look at the margins here, right, left, up and down, and let the padding here, right, left, up and down. Okay, now let's go to advance and give it 52. The padding you see from here, 50-50, 50 and another 50. You can do it like this as well. Margin is the distance between this and this here. So if I go with the margin, again, if this is linked together and I go for example, Twenty-five. Ok, it will go 25, up, bottom, left, and right. Let me delete this, uncheck and just adjust the margins of the top between this and this, for example. Now, this distance from here to here is getting bigger. You can also go negative. To make it closer. It's just away. So I'll just reset it. Link, delete, I'll go to the content. Now I will click on this tile. And making the medulla, What do you suggest here we do. And you got that right? Click on advanced and ADA, adjust the padding and I will go, For example, I like the padding between, I like the distance between these two. We just saw. I'll just go with the right or left as a 50. Right? Another 50. Again, it's a preference. And of course you can adjust the column widths from here. Or click on this column. Say I want to 60%. And this will default to 40%, something like that. And by the way, you can have a video background of instead of image backgrounds for that good style, delete their image, click on video and it will accept YouTube or Vimeo. I have a Vimeo link. And it will play. And you can choose the, the time to start from, let's say from 0 to eight seconds. And it will keep looping. Also, you have few options here you can choose from. So let me delete this. Going back here, choose the image again and make sure Center, Center or whatever you want here, but make sure nor VP8 and cover is selected. Now let's add the video here in this column. So for that, I will go to plus add or click on these. And we need to look for the widget video drag and drop. And I will just paste the VMO. Again, you have options here. Let's go again, 0 for example, to six seconds. And if you want it to loop or play once you have few options here, you don't want the player's control auto play, maybe S sub two. So let's update it by the way here. And let's view, etc. Okay, now let's add some divider here, like a line. And the other two white. And the Something like that in the middle. And maybe the thickness or something like that. You can also have a text in between, say anything, anything here. Okay, what about the color? Gain style? Text? See divider is for the line. Take off is for this text. Where do we go? Color. And here you go. And you can have even like an icon instead of a text, whatever you want. And if you don't want anything, just click on that and keep the divider between these two. There is a big space between this and this. So we might need to go to the advanced of this and fold the bottom choose 0. Something like that. Okay, let's add a button here, like call to action button. So for this, let's go back to widgets and drag and drop a button here. Before I continue in anything. What happened here? They all do control zed under Look. They're really aligned. When I added a button, what happened? And why is that? Like this is in the middle of this section and this is in the middle of this section. But what happened inside? Okay, let's check. To be safe. Click on the column and vertical align. In the law. It is. But this column, when you click on vertical aligned with what's happened. Now they are aligned. They look nicer like this. Also. Look at the boundaries, the outside margin, the outside padding here. If you go 0, look what happened. Zero-padding from here and here. You can even make the radius smaller, larger. Look at the padding here, what's going to happen now? See 30 from each side. Okay, so let's go back to the Boston. And from here you can choose the color of it. Something is off here. Do you guys agree with me? Look at the literature, they are really close to each other. So for that, I will go to topography. Maybe make it a bit lighter. Okay, now how do I adjust this letter spacing? Maybe this is too much so. May 0.5 be is good enough and line-height make it 1.2 or one. So let's go back to content and being in the middle. Look at the padding of this widget. If you go to Advanced and put some value in here, the padding of this is not the same as the padding of the button. Look what happens here. Output 25. You see it's around the button, 25 from each side. But to do the padding of the button. So you've got style. And here, let's say from the right, we get from the left, we give it 30, top 15, bottom 15 or ten maybe. See the panning of the button is the inside distance here. The padding of the widget is inside here. Okay, let's go back to content. And for the lane, for example, if you want external or internal Ling, internal link, you don't have to open it in a new window. For the external link, you need to open in a new window. So your website can stay in the background. And from near, for example, you can change the text of the button. Click on advanced and delete this. There are lots and lots of options here. And like it's impossible for me to explain every single long. But you can go and explore it. Discover, make mistakes, learn. And I hope by now you all, you already have your element or page up and running and practicing with me that the only way you are going to learn, you need to make a mistake, fix it, and learn. I spend lots of time and it's a nice trying to figure out where my mistake is and how to do this or that. And you cannot find this information anywhere like in in details. It's a trial and error. Make mistakes. Try searching Google attend, fix the mistake or learn how to do it. So there you have it in front of you. Please, please practice with me. And this is the only way you are going to learn. You don't need to practice, do it, make mistakes, do it again and learn. So I will end this lecture here, and it will be like few lectures. I actually many lectures. This is part one, and in the next part, I will be explaining widgets from here. Not all of them, of course, is, it's impossible to do that. But the most important, and by the, you know, like some of them are premium, you don't want to pay for that. You have lots of them here. And I'll try my best to explain the most off it and hopefully you can benefit from it. So see you in the next lecture. Thank you. 16. 13.2 Practice Elementor Part 2: Okay, one thing I will show you here is how to add some effects to the background of this image of this section. So I click on section. And let me first decrease the height. Let's make it, for example, 500. And I want to add a shadow to this image. So when, when you hear a shadow, you have to think of border. The shadow applies to borders. So you click on style. Border. Shadow. Look here, so you can increase it vertically little bit. Decree is bluer. It's a preference. Another thing is shaped divider. I want to create some shape here. I want it at the bottom, not at the top. So I click at the bottom. And for example, let's go with Triangle. Two quarts happen here. K you can decrease or increase the width of it and the height. And you can invert it as well. You can choose mountains like there are a few of them here, zigzag, clouds, et cetera. Ok, I'll just go back to none. And now I want to add a banner here underneath this. So I'll create a section. Inside there is the column. Inside the column, I need to add an image, of course. Drag and drop an image. Click here. This is the banner I'm talking about. Because the size dimensions insert. And you don't know the size here is 1600. And if you remember, this is 124. So this might resize itself so to be safe, goal with full. Okay, now let's add a map and a form for that. First I'll click on add Section, two columns. And in the first column output, Google Maps, drag and drop. And it's really easy, just entered the address here and zoom in, zoom out, adjust the height of it. And let's update. Okay, now let's add a form. And for that, let's go back to their widgets and search for forms. Ok, now there are three of them here, WP Forms, WP Forms, and WP forms. We want to choose this one. The one of element are essential add-ons. They EA here, okay, is to do not have options to customize the phone. But first we need to create a form. So we go to our admin area. By the way, 5.5.1 version just came out today. Today is September first, and it's just like three weeks after the if the latest update 5.5. So they just come really fast and as I mentioned before, it's really good to have your website automatically updated. So let's go to WP Forms. We want simple contact form. And now it will ask us like to10 metal, say contact us. And you can have a blank form that you can add fields to it. You can design yourself simple contact form, readymade and newsletter sign-up form. This will be like just email and submit suggestion forms like there are a few of them here. You can select from. Let's go with simple contact form. Ok, and this is like name, email, and the common token message area. So let's do some customization here. Now instead of firstname and lastname, you can make this simple format, simple, and they'll just ask for name and make it required. And the placeholder, let's call it name, label. See what's happened here. So let's do the same for email, required placeholder email. And I labor. If you click on Enable email confirmation, it will ask you to enter the email twice. Message as well. Advanced. And I label. And you can limit the length to like long 1000 characters even want more than that. It depends on the form and why you're using it. And we can have the field size, small or large. Let's keep it media for now. I can also add another another things here. For example, I can drag and drop single line text called Phone, required or not. And place holder, form, Hide, Label, and limit the length to how many characters, whatever you want. So now if we go to Settings, there is the general formula about the form, the form name, the submit button, you can say submit or for example, send notifications. They emails. The forums will be sent to the admin email, or you can add another email here. The subject, you can choose, the subject of the form. From center. Conformation. You can have a message displayed after someone submits, like, thanks for contacting us and we'll be in touch with you shortly. Or you can show it be a page here. Now we have wont beige or practice page. So after submitting the form, it would take them to this page or you can redirect it to a URL of your choice. And if we go back here, should they, I need to reload the page first. Okay, so let's type here forms. You will see three of them. Wp Forms, WP Forms, WP on this, we want this one, the one with EA. Essential add-ons. These do not have options for customization. So if you go like this, this is the form and this is the only customization you can do. So let me click and delete it. But if we go with the EIA form, this one. See if we have many options here. And let's select the form, custom, title and description. We could have done it from here. Or you can enter your own title and description. Send us online by her, et cetera. And they are please send us an email with your questions. Whatever. So you can turn off the place holder from here, but since you have the labels off here, nothing will appear. So we need to keep it. Errors. Yes, we want show there's someone does not submit properly, it will chime in error. Now style. Here, title and description. Title color. Okay, topography, description, color. Of course, these are just like colors I'm choosing just to show you the difference. Labels. We don't have the labels input text area. You can have a background color or just reset it from here. Text color. And this is when you type in here, this color will appear. You'll see this color. So let's reset it. Here. The text indent, reset input with what's going on here. If you just delete it, it will go with the default, a 100% here. Input tight, area takes tight. Now this is the field description as well like customization can choose clothes and text. Submit button. For example, you can say Click on percent here and say a 100%. And not customed full-width instead of 100%. Let's now go back here. And I can go full width from here. Bolder type, num, radius. See what happened here. You can change the background color or whatever. Okay, now padding. We have padding here. And we have padding. Yeah. What's the difference between them? Padding here? So we're talking about the submit button. Adding here. You remember it's here inside the Submit button. It's okay to reset it, just delete. Whereas the padding here is for the form itself. So if we go 50, see what happened here. Now, let's add a border. Solid border with one color. I'll make it light and maybe a shadow. But something is off here. I need to add some padding to this. So the form padding is here. It's under formed container. Let me try to antes 25 believing and keep it 20. Bottom occupies 20. Now, look at the shadow here. How can I get a Shadow tool this one year to the column itself? Remember, shadow is Bolder. So you got style. You'll go to border and click on shadow here. You can adjust from here. Now, if I want to shatter to this section, so I click inside this section or hear God's style border. Look what's going to happen here. Shadow, C3 types of shadows. This, this, and this. Now, let me give it some. And in here, like for the section, I'll just uncheck this and at the bottom, just to distinguish between this and this. So one shadow to three section column and the widget or here it's the form. Ok, let me reset the shadows. Okay, now let's adjust the height. So I'll click on the map on ten tight. And you remember how to make these aligned as much as possible. Go to column, vertical online middle. And to be safe, make this one as well. And I'll take spare. And maybe we can add a background color to this section. Five is a nice and easy color. Of course, don't mind the colors. And maybe we can add to the map itself. Put it back for the form itself. And now let's save, update and review the changes. Started it started to live like a website now or page. Here. We need to adjust the IT. Know how to do it. Okay, before I end this lecture, I want to show you a few things here. First, let me make this fit the screen. And let's click on this widget. Go to Advanced and go to motion effects. And fade it n for zoom it in. And you can adjust the duration of it, the speed of it. You can also slide with n down. This one. And rest. Motion affects. Slide it up. And this one probably really low it to slide at thrown, right? Something like that. You can have the whole section actually animated. For example, I know this snowman. Ok, lets the changes. We refresh again. Something like that. So thank you again and I'll see you in the next lecture. 17. 13 Practice Elementor Part 3: Okay, let's continue where we left from four that I'm going to add a new section, two columns. Then let's add a widget. We covered most of the basics. If not all, then the pro is a premium. You don't have to subscribe for it, but it's up to you. The general let's start with the inch box. Here. Self explanatory, you can choose an image, an image, title, and description. For this one. Aecom box, pretty much the same, but for the stamp. For this one, you can put an argument in there. Whatever you choose. Again, title description. And for this and this, you know how to style things now. And let's add another section with two columns. And let's see here star rating. Okay, for this lets you know if you want to read something or just like to give a rating, to give a feed. You can choose this and you can even make ten ratings. Is here, it's empty inside. Let's go back to five. We can put a title, Stars. And to style it, look at the stars year. You can change the size of it, the spacing of it. It's really easy and you can even change the, the colour of the stars, etcetera. Now for this one, image carousel. No, let me leave it there for a full section, so I'll go with the argument list. Okay? It's like a less than you can choose articles from here. Okay, just to make them consistent, I'm going to delete this and this and duplicate this and this, sorry. Something like that. You type the list, you choose an archon for it. You enter link, change the style, et cetera. You guys are pros nouns in this. Okay, now let's add a section with one column. And now this Choose image carousel. Let's add the image. Let me choose this. This. Try to chewed them all the same height and width. It will look better and more professional. So now you create a Galea for this. Then you inserted the gallery. Okay, now here you have options. I always go with 300 by 300 and probably, and I will choose four bytes. It will resize it. You see are these two images, they don't fit in here. So let me do this one. Here you have few options. You want to stretch image or not. You want dots and arrows. And here you have few options to play. Stop, pause on hover or not. The important thing I want to show you here is the link. Now look what happened. Let me update it here and look what happens. When I go to the images. There, just sliding to the left. Not clickable, nothing. So if we go back and under link, we say media file and we say lightbox update. You update this automatically will update. So we go back. What happens now? This is Lightbox. It pops up like this. And you have the caption. You can get rid of the caption. If, if they are not, they are not named, right? They will not look good here. So I would go here, click on this and get rid off all of these or renamed them. Put a title yourself. Insert, update. When you click on them, nothing is here. And let's add a new section again with two columns. Click on the plus sign or here. Basic gallery is just like a Gary, a gallery with images like that, something like that. So I'll just delete this. Add counter. This is neat. Again. Ending number, for example, counting to 250. Starting number, for example, 50. If you have it like this, it will 4 thousand separator. It will put this comma here, counter, et cetera. Date. Let's add one moving gear. Progress bar. No, I'll copy based based. And for example here MySQL's. Let's click on this one. Let's say graphics designer. And let's put percentage higher. And for this one you can change it whatever you want and you can change the colors from here. Let's put one more thing. Testimonial. Again, self explanatory. You just add an image, the name, the title, and description by or whatever. So if I add this image, you see how it will look. And this could be like a testimony to a website, to a service, whatever you want to add in here, it could be like a bio if you wish. The tabs, tab1, tab2, more. And you can name it whatever you want. Put the description in here for all of them. And you can have it vertical or keep it horizontal. Okay, let's add a couple more. These are really self-explanatory and easy. And you can experience some few examples. So here let's go to according. This is good for FAQs. Frequently asked questions. This duplicate, this, duplicate this. And for example here. Let me add. Go basic and small heading here and say FAQs center, it's something like that. And here you need to open this to be able to comfortably writing, change the title. Put the question here, put the answer here, et cetera, against time. Let's add one more. Oh, let's go back to the general. And I'll go kind of like the accordion. Couple more. Social icon, rounded or square or circle. And you can add more items here. For example, if I click on the plus alert, kind of message, nice-looking or just like NMR, that will grab attention with and background color. And here the dismiss button, this one, you can hide it so they won't be able to close it closely. I'd love to just keep it in there. And you can choose the style from here. Half-lit box. This is kind of neat flip content. This is one side and the back of it is the other side. And you can put the title and description in here. Okay? Now, the most important thing I want to explain as well as having a custom header and footer. So not using the WordPress header and footer, but having our own header and footer. And how can we do that? If you remember, we chose Canvas. Canvas means no hydrophobic hands perturb all footer. So let's create our on. And for that we need to go and install in your plug-in. Let's type Header. One element or header footer blocks. And activated. Okay, now, of course, don't forget to enable us to update. Now for this, we need to go to appearance header footer block. And let's add a new one. For example, for the header. Let's call it a header. And let's publish it. Go and edited with element two. So for that, let's add a section with two columns. First one, let's add a logo image. Let me add this logo. Then. Align cleft here, few onto can add menu if you wish, anything. So let's go on vacation or even type menu. And all this. And choose the main menu. We only have one page here actually, so that's why you see only home. But if we have more places, you will see it on the air. And let's align this to the right. This is for the tablet and for the mobile phone. Smartphone. So you can have even like a background, custom background color. So let's add whatever color you want. Get rid of this. And let us updated. But it's not reflected yet. We have to go back to the appearance header and footer. Back to the header. And now let's select the option header. Let's say display it on entire website. And they're all, everyone can review this. And we need to check this torque marriage on the canvas. We're doing this integral. And sometimes you need to refresh this once, twice for this to appear. You can do the same and add a footer menu. Let's go back to the pages and add in new. And let's call it footer. And choose the option here. Footer, blush. And edit with elements. Before this one, let's add a section to columns. And in the first one, let's add copyright. Drag and drop. And you can have it here. Copyright liquidity, this powered by. Let's go to typography. And let's do, for example, 12, etcetera. So 1.2 as usual. And one here. Update. And don't forget to vertical alignment in the middle. Here, you can add anything. Again, let's choose Social Social items, something like that. And this is your footer. Let us make a background color for this forming this footer. Let's do this for examples on now for this, let me choose white. Something like that. Update, and exit to Dashboard. Select an entire website. All now enable layouts for elemental canvas template? Yes, because we are using them to try it. Let's update. And now there you have it. Here's our footer. So finally, let's go back to the dashboard. And for the homepage, now it shows us the page practice as our homepage. Remember guys, when we go for the Settings, Reading homepage, practice, safe. Let me open the page again. And they're going to resemble page we worked on it. We worked on element or please practice. This is the only way we're going to learn how to use element are and how to build a web page on a website. And I hope you guys benefitted from this course and I wish you all the best. Thank you very much.