Use Avada Theme to Build a Professional WordPress Website! | Melissa Taylor | Skillshare

Use Avada Theme to Build a Professional WordPress Website!

Melissa Taylor, ✨Web & Graphic Designer 20+ Years✨

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (4h 21m)
    • 1. Class Intro & Overview

      2:17
    • 2. What is WordPress & Why Should I Use it?

      2:31
    • 3. Overview of the WordPress Admin Area

      12:22
    • 4. Pros & Cons of The Avada Theme

      3:42
    • 5. How to Purchase, Download & Install Avada

      14:54
    • 6. Review Of The Avada Tab Options

      9:59
    • 7. Layout & Menu Global Options

      19:58
    • 8. Responsive Design and Colors Global Options

      5:29
    • 9. Header, Logo, and Page Title Bar Global Options

      17:02
    • 10. Sliding Bar, Footer, and Sidebar Global Options

      15:39
    • 11. Background, Typography, Blog, and Portfolio Global Options

      17:49
    • 12. Social Media, Slideshows, Elastic Slider, & Lightbox Global Options

      9:53
    • 13. Contact Form, Search, Extra, & Advanced Global Options

      19:15
    • 14. Custom CSS, Fusion Elements, Import and Export Global Options

      10:19
    • 15. Building a Blog Post

      21:29
    • 16. Building a Page Using the Page Builder

      17:01
    • 17. Creating & Using Templates Throughout Your Site

      5:09
    • 18. Creating a Portfolio

      5:40
    • 19. How To Build, Edit, or Remove the Navigation Menu

      9:24
    • 20. Build Sliders Using the Fusion Slider

      14:27
    • 21. Creating & Using Widgets

      9:46
    • 22. Installing & Using Plugins

      9:08
    • 23. Updating Your Theme, Plugins, & WordPress Files - Maintenance

      6:24
    • 24. One Final Avada Tip & Your Class Project

      1:42

About This Class

This class will teach you how to build a professional WordPress website using the Avada theme, and how to customize the look and feel of your site either from scratch or by using Avada demos. When you finish this class, you will have all the info you need to build your own WordPress website.

Wordpress is a very powerful, very popular content management system (also called a CMS) that allows you to build a beautiful website without knowing how to code. The Avada theme allows you to create your WordPress website using a graphical interface, making it very easy to style and modify your website.

In this class you will get a brief overview of what WordPress is and what it is used for. Then you will be given in-depth lessons on what the Avada theme is, what it can do, and how to setup and customize the theme for your own website.

This class is geared towards any person who wants to build their own website, or anyone who wants to learn the ins and outs of the Avada theme on WordPress.

This class assumes you already having hosting setup and WordPress installed for your website, but from there, you will be shown how to purchase, download, and install Avada, then how to set it up for your specific style and site map. Some WordPress experience is helpful but not necessary.

Skills you will learn include:

  • What WordPress is and how it can be used
  • Where to setup your WordPress hosting
  • How to buy and Install the Avada theme
  • The various elements of the Avada theme
  • Installing & customizing a pre-configured Demo
  • Configuring theme options to your style
  • Setting up pages using the Avada page builder
  • How to use and customize page elements
  • How to create templates and use them throughout your site
  • Creating and customizing your blog using Avada
  • Creating a portfolio
  • Editing navigation menus and adding pages to your menu
  • Creating and editing WordPress Widgets
  • And more!

When you are finished with this class, you will have a solid foundation of WordPress and the Avada theme upon which, you can build your website!

2fb05006

Transcripts

1. Class Intro & Overview: hi and welcome to this class on using the Avada theme to build your WORDPRESS website. My name's Melissa and I'll be teaching this class. I am a freelance graphic designer with 20 years of experience. In the last 10 years, I've been building WordPress websites and I have found the about A theme is one of the best , most robust and easiest to use things that you can use to build your website. I'm really excited to show you today how you can use the thing to build out your own site in this last first, we'll start with a brief overview of WordPress and what it is, and then we'll review the WordPress admin area. Then we'll dive right into about it, and I'll go through all of the theme elements in the page builder and how to use each of the items were going to go through how to set up your block or create a portfolio, how to use widgets and plug ins, how to create your own menu and your header and footer. And then finally, at the end of the class, we're going to go through how to update the about a theme. How to update the WordPress software and how to update any plug ins that need updating. This is something you have to do on a regular basis, and it's really important to make sure that you do that this class is fairly long, but I've broken it down into digestible chunks so that you can watch as you have time. I also labeled each class as to exactly what we're going to cover in that specific lesson. So if you need to jump around and find something that you really want to hone in on, feel free to do that. But keep in mind that the classes do build off of each other, so watching it in order might be a good way to go as you're watching the class. If you have any questions, please post them in the community form below, and I will be sure an answer them quickly so that you can get back to learning. I will answer every class question and reply to every project that's posted under this class. Thank you so much for enrolling in this class. I really hope you enjoy it. As you're watching the class, you might see a little prompt pop up above the video that asked if you would recommend this class to other students. If you are enjoying the class and you're learning from it, I would really appreciate it if you could click, Yes, and then maybe give me a word or two of a review. Those types of reviews and recommendations will help this class to get out to other students who may also benefit from watching the class. And don't forget to follow me on skill share by clicking the follow button above the video . That way you'll be notified of any new classes I posed or announcements and giveaways that I might do. Okay, we have a lot to go over, so let's go ahead and get started. 2. What is WordPress & Why Should I Use it?: Hi, everyone, this is Melissa. And to get us started, I'm going to give a quick overview of WordPress and a few things you need to know about using it. WordPress is a very powerful, very popular content management system. Also called a CMS. The louse should have built a powerful website using plug ins built in features, a theme and even a page builder. WordPress is free and open. Source comes available with most hosting plans and is install a ble via a one click install system. WordPress is older than Twitter and Facebook and has more than 50,000 free plug ins available for you to use when building your site. So the way it works is that the hosting company holds all of your files and the WordPress software. And then WordPress is the back end powerhouse that controls the functionality of your website. So then you can purchase a theme that sits on top of WordPress and let you build your website without having to know you know any in depth coding knowledge. Then the website is what you see. Once you put those two things together so this class will review many aspects of WordPress and the more important areas of the administration area to give you a good basis from which to start. It will not review all of the preferences, options or features of WordPress, but mainly the ones you will most be using. This class assumes that you already have hosting set up with a reputable host company, preferably using a WordPress managed hosting plan. I use site ground, and I'm set up on their go geek plan. I also have use Go Daddy WordPress managed hosting and Blue Hose Toasting for WordPress websites. If you want just a general hosting plan, you can do that, too, as long as it's running the software that WordPress requires in order to work properly. So for WordPress 3.2 and higher, you'll need PHP version 5 to 4 or greater in my sequel, version 5015 or greater. Keep in mind. There are two types of WordPress sites, wordpress dot com and wordpress dot org's so wordpress dot com is a blogging service that's run by automatic, and you cannot build a full website on wordpress dot com. You can Onley build a blogger on wordpress dot com, so if you want to build a full website. You'll need a wordpress dot org's site, which could be hosted on a company of your choice and will allow you to build a robust website and a blogger. So we're trust out or will allow you to install the Avada theme and then build your site with it. So once you have your hosting set up and WordPress is installed, you want to buy the about a theme, so I will show you how to purchase, download and install it after a quick overview of the WordPress admin screen. 3. Overview of the WordPress Admin Area: So in this lesson, we're going to do a quick overview of the WordPress admin. So basically, how this works is once you have your wordpress installed on your hosting server, you will get a you Earl of the WordPress admin log in. This is my log in page. I just type in my user name in my passport and you'll click log in here. And once you do that, you'll see this. This is your basic WordPress admin. There's just a few options over here on the left hand side as you build your side and you add more plug ins or theme or other options, you'll see that this menu will get longer as things add to this side bar. So basically your options for the WordPress admin er within the black bar, so this black bar at the top will give you all your account information, allow you to log in and log out on this. Info here will let you add new items. This will let you go and visit your site from here. Show you have any comments you have, and then the left side are just various lengths to different options within WordPress for this website. So basically, let's start with the dashboard. This is the first item. I very rarely go to this section of the WordPress admin there some things here that might show up based on the plug ins that you have installed. But for the most part it, you know, shows you your activity if you want to do a quick draft of a post, which I never use, So just some things on here that really I kind of just skip this updates. Link will show you if you have anything within your WordPress site that needs to be updated . So, for instance, if there's a new version of WordPress that's come out and you can update it here if you have plug ins that need updating or if your theme needs to be updated so you can update these on various sections of the site so you could update your themes on your same page, and you could update your plug ins on your plug ins page. But if you wanted to do them all at once, you can come here and it'll list them all down the page so you can do them all from one spot which is fairly convenient. This post section is where all of your block post will be hosted. So if you click on all post, it will show you all of the post that you have set up in your sight. As you can see, I just have the one post that was pre installed when I set up my hosting in sight ground. I'm. If you wanted to add new, you could click at New here at New here, set up your categories or add tags to any of the posts. Your media library is the next option. Basically, this is where all photos and all files for your website or stored so pdf's for documents, images, gifts, anything like that will be stored in this library. You can view them as a list view. Auras. Ah, image view. You can search by items that are attached within the side already, if their images or video etcetera. So the next option is your pages option, and it's very similar to your post option. Basically, you come here to view all the pages within your sight or to add a new one. So this is your comments option, and you can come here and see all comments that have been added to your site by users so you can approve the comments, unapproved them, delete them, Marcus Spam, etcetera. And there's some other settings I'll show you as to how the comments appear on your site. The appearance panel is really important. It has a lot of different options in it. So this is where your themes are housed. So if we were to go in and add the avada theme right now, it would show up here on this list these Air three themes that come pre installed on site ground and what I'll do is after I install a bottle, come back in and I'll delete these So they're not taking up space on the server. And so I don't keep getting notifications that they need to be updated in that kind of thing. The customized option is something that a lot of people like to use. I don't generally use it because the about of same gives you so many options within their themes, settings. But if you were using a different theme, for instance, you could come through here and you could set up some things like the color scheme that you're using the menus and where they live, the widgets. So there a lot of different options within this customization. And what's nice is that when you as you do it, it'll show it to you here in this preview window, and then you could decide to publish it or to not publish it and back out of it. All right, so then the widgets or something, you'll use a lot as well. And all you widgets live here, and you can see there's the blog's sidebar comes pre set up with some items within the widget, and then these air your widgets for your foot or left column and right column, and I'll go over all this as we set up the evade a theme. But basically what happens is if you wanted to say at an image to your footer your left hand footer, you could drag it over here, or you could click here and you could say which one to add it to. So if I wanted added to foot or two, you'll see it shows up over here. You have to, you know, make a change, and then you can save it, or you can delete it if you decide you don't want it there. Your menus option is also part of the appearance panel, and basically, that lets you set up menus for your website, as's faras the navigation. So the header navigation, the foot or navigation sidebar menus, that kind of thing. You can set up a many menus as you want, create them here and then add them to various places on your site. The head of section is also part of the customization area. Um, and again, since I don't really use that, I'm going to go over with you how to set up your header Gen Avada instead of through this customization panel. But that's what that is then The editor is something you probably don't ever want to mess around with. This is basically or your CSS and your PHP files for the entire site. So if you go in here and he mess with something and you do it incorrectly, you could break your entire site. So I highly recommend that you stay out of here and it does give you this warning, which is nice. So generally you would just go back and not mess with that. Your plug ins option is where all of your plug ins go that you installed to add functionality to your site. So as we go through and we build the Nevada side, I'll add some things in here, like an S e O Plug in or Google analytics plug in or security plug ins. And then, as we add each one by clicking, add new. It'll just show all of them down here on the page. And then, if they need to be updated, you'll get a little notice under each one, and you can activate or turn them all on or off by using this menu. And again, it's the Agnew here for the plug ins and again, that plug INS editor, which is very similar to the appearance editor in that you really don't want to go in there and mess with it. The users option. We'll let you set up, edit and delete users for your WordPress website. So I'm the administrator, so you'll see my user name here. But if you wanted to add a new one, you could do that pretty simply by clicking. Add new and then you can also give them various roles. So let's say you want somebody to have full privileges to edit or modify anything on the site. They would get an administrator privilege if you wanted them to be ableto editor. Modify most things on the site, but maybe not touch the same files. You could give them an editor privilege, and there are a lot of different settings you would have to go through and kind of see what each of these are. Some of them knock it all the way down to where all they can do is maybe Creative Block post. So it's good to have those options based on what roles you want your users tohave on the tools option that gives you a couple of different tools that you can use. And really, all I ever use this for is for importing and exporting data. So if I were building a site and I were pulling data over from another WordPress site, I would click import and that I would import it using one of these various options. So let's say somebody had 100 block post on their old site. They wanted me to build a new site and I needed to import those. I would do it through here. The same thing goes, if I'm exporting some vials from this site to put on a different side or to back up or whatever, I could either export all the content where I could export. Maybe just the blawg posed to maybe just the media library. So that's basically what the tool section is for. And then the settings air fairly important. This is where you're going to do a lot of the back end options for your site to get it set up initially, right when you install your WordPress for the first time. So this site title is something that will populate the title tags of each of your pages. And most times I would name that with maybe the company name that I'm building a website for. So if it's, you know, Bob's bits, this might say Bobst IDs or something like that. So since this is it and avada class, that's what I'm going to call it, and then the tagline. This doesn't really show up anywhere in your website. But you could add the text here and you know you some keywords that might be used in a search for your for your company site and so you can just set it up that way. So I would probably call it, uh, skill share, uh, healthy. Get it's Nevada, Think, And then this is the address of my website and this is the Sorry. This is the address of where my WordPress files are stored, and this is the address of where my site is, and this will be very useful to know later when we get to the part about launching the class so we'll come back to this. This is my email address for any notifications or for admin purposes on the site. You can set up your user default rule here. So if you think you're gonna set up 20 different blog's authors, then you might want to come in here and say what the role is. So all of them get that same rule, and then I was so I can set up my language, my time zone and the format that I want my date to appear in and my time. So you can also set up what day your week starts when I like to have, that is Sunday and then just click save, and then all those options are saved, then underwriting. This is just your writing settings for your basically for your post. So let's say I have a category of news and I want the default post category to be news. I would just select that here. Same for the post format. Pretty basic stuff here for reading. This is just a general setting. I will generally override all of these settings within the same options themselves. But if you let's say, didn't have the same that had the option for how many blood post to show at one time, you could set that here I, generally while in building site, will turn on discourage search engines from indexing this site because I don't want them to come in and start indexing pages as I'm building them before the site is launched. So I turned that on, and then you have to be sure to turn that off when you launched the site so that search engines will then index your site. So then under discussions, this is basically information about your block posts. So a lot of different options here to set I generally leave this alone, and I said in my blog's options within the theme, it's a little bit easier that way. And the themes settings will override these settings for the media settings. You can come in, and you can tell what size you want your thumbnails to be by default Max with large size etcetera. And you can also tell WordPress to organize your uploads. So like your images or your files into month and year based folders. If you don't do that, then it will just drop them all into the uploads folder. So that's really a preference, you know, personal preference based on how you like to be able to find your images and your files. The Perma links option is interesting, so a Perma link basically sets up the link structure for your pages and for your post. So there are a lot of different options, and you've probably seen some of these as you've gone through different WordPress sites. So this is basically the page name portion of the URL, so not very pretty page name difficult to for people to type in and no keywords for search engine results. So really, what you want is something that gives the name of the page. You know, like the keywords of the page name as the link. So generally I will select the Post name because that gives you your basic, your old structure. And then it takes the name of your page like the title you give it and create your page name from that. So let's say this said Bob's bits, because it was a Bob Spitz page then that would show up. Here is your page name, which is much better for S E O than archives 123 So generally I stick with Post name because that's a good way to do it and have nice, simple names to tell people and for people to spell out and for a CEO. So for the privacy option, this just allows you to set up a privacy policy page. This is a new option in WordPress, so you can create a page here. Or generally I will just set up page to be the same and link to it. And in the last option is collapsed menu, which kind of takes the menu down to just icons, which is nice. So that's it. That's the basics of your WordPress admin and after this will go through and we will purchases, download and install the about a theme. 4. Pros & Cons of The Avada Theme: Let's talk a little bit in general about the about a theme, and some of the pros and cons of using it. Been a big fan of avada for quite a few years, and I've always found that it's super easy to use and has so many features that it totally makes it worth some of the cons that may overshadow some of those features. So let's just go through a list real quick. Here's some of the pros that I found I bought. It comes with a very easy to use Dragon drop Page builder, which makes building out your pages a breeze. The theme comes with a built in about a slider element that's very easy to use and add flatters to your site. It also comes with a lot of pre built elements and layouts, which make building pages so much easier than having to use a short code. However, you can also use short codes if you need to. It takes very little custom coding to get things to work properly. Everything kind of works within the elements and within the columns and containers, so you're not having to do a lot of customization via custom coding. The theme comes preloaded with dozens of demos that you can install and customize. It allows you to create templates of pages or containers or elements and then easily use them on various pages of your site so you're not having to recreate everything on each page . The thing comes with a Patch ER feature, which allows Avada to implement small fixes instead of you having to make large updates to the entire same very frequently. The tech support for Avada is very good and is always very responsive. The support website for Avada is full of videos and full documentation for the theme. There's also a community forum and a knowledge base of different articles that you can search through and within the Avada theme. As you're building your site, there's a little help tab on every pay. So if you have some questions about the page you're on or the element you're using, you can usually find it within that help tab. And when you purchase a bottle theme, it comes with six months of free support. Let's talk a little bit about the cons of the Avada theme, so the theme does come with a lot of various elements and plug ins, which I love. However, that can cause it to be a bit bloated and sometimes a little slow if you put all of them to use. So I think it's a good idea not to turn on every plug in that comes with the theme just to try and keep that blow down. The theme does cost $60 however. It comes with a ton of plug ins and features. So in the long run, if you had to buy all of those things individually, your costs would add Oppa's well. So in the end, I think that of audit is very reasonably priced, based on what all it comes with. About a dozen stay on top of keeping the theme updated is needed, so there are frequent updates to the theme. Plus, when you go in and update the theme, it's generally a multi step process. The support section is really great, like I said, but a lot of the videos and some of the documentation is a few versions behind. So if you go when you watch one of the videos, you might notice that the admin screen for some of the videos is different from what you're saying within your website. Admin. The fame files themselves are fairly large, and sometimes host companies limit thes file size that you can upload to the server so you may get an error when you're trying to upload it Initially. That's something that you can reconcile with your host company. Or you can upload the theme via FTP manually instead of through the WP admin. And lastly, you have to create or have a theme forced account in order to purchase about it. So, in my opinion, the pros far outweigh the Collins for the avada theme. And I'm sure that once you're in the theme and building your website, you'll see how easy it is and you'll see all the advantages that of auto has. And the Collins were really end up being a non issue. 5. How to Purchase, Download & Install Avada: in this lesson, I'm going to walk you through how to purchase, download and install the Avada theme on your WordPress website. To purchase the avada thing, you'll want to go to thing forest dot net, which is part of the in Vado marketplace. So once you're on thing for us dot net, you can come down here toward press and click on popular items. Or you can just type in about a here, and this will show you the avada fame. So if you just click on Nevada, then it will take you to a Vadas main purchase page. And so from here you can see that this is the number one selling team of all time on thing forest. It says more than 400,000 people have purchased it, which I believe I probably used it personally on about 35 different websites. It's a really robust thing. It gives you everything you need. It comes with sliders and a page builder and contact form and all these other things, and it's just super easy to use. And what I love the most is that the page builder is very, very intuitive. Dragon Drop Container based page builder, and since I build my websites for clients generally who aren't super techy, it's really great for them. But also, it's really simple for me to build a site because the way that you build the pages is so easy. So what? You're on this page, you can scroll down and you can see some of the things you know, a few bullet points and call outs about the same. What makes it so great. And they're also they've been around for five years, so they've done a whole lot of updates and upgrades to it along the way, based on user feedback. So I think when you get in here you'll see that it's just a really robust thing that has a lot of the kinks already worked out of it. So there's just a lot of different things on here. Testimonials from clients. If you'd like to read down through these, you can. That's a lot of information to go over here. But suffice it to say that about it is a really great team. So we're going to do is from here. You would just add it to your court and go to check out so If you don't have it in Vado account already, he could set one up here. If you do, you would just sign in and it will walk you through how to pay for this. Don't be fooled. Here. I have to. In my court, it's actually $60. Let me talk about the price for a minute because I know there's a lot of free themes that you can, you know, download off various websites or that come standard installed with your WordPress installation. The thing that makes this worth the $60 is that if you get a basic theme a lot of times it doesn't come with a page builder. So you may have to buy a page builder and a lot of times it doesn't come with a good slider . So you have to buy a slider and it doesn't come with this. That and the other thing. So by the time you go and you use your free fame, you're gonna end up paying money anyway, So this comes with all of it installed. It's all integrated together, and it's just so super simple. You're gonna see when we get in here. It's so easy to use that it's totally worth the $60 I pay for the license every single time . I use one on a client site, and it's totally worth the cost. So you're gonna go through that once you have purchased. It is going to give you a button to download the files and you'll click that and it'll download it straight to your computer. So from there we will go into your admin again, and then we will install the theme. So now that you have the avada thing downloaded to your computer, I have opened up the WordPress admin, and what I'm going to do first is I'm gonna go find the ZIP file on my computer. So this is where I've downloaded it to, and I'm going to unzip it by double clicking, letting it expand the package. And now, once that's done, you'll see that I get a folder here that that's the full package unzipped. So I'm going to double click on that and you'll see all the files that come along with your theme. So here are the theme files. There's some extras. Languages, etcetera. You really don't need much of this. There is a Photoshopped file in here, though that's handy. If you're trying to calm something up for a client or just create a design on your own, it does give you a photo shop file that you can work from. So if you look inside the steam folder, you'll see that there two files named Avada. So one is about a dot zip, and that's your main theme. And then one is about a child thing dot zip. So what that is is the child theme sits on top of the avada fame, and you make all of your edits to the child theme and the reason you want to do that. It's very important because when Nevada updates, let's say, two weeks from now they come out with a new version of Avada. So you're going to go into your dashboard and you're gonna update the same. It might overwrite all the edits you've made so the customization of your colors, or if you could end special code or anything like that. If you update Nevada and you've made all your changes to avada, it can override it. So what you do is you install the child. FEMA's well, you make your changes on the child theme and then when the main of auto theme updates are your edits and customization stay intact. So that's what we're gonna do now. We're gonna go into the WordPress admin. We'll go to a parents and then themes Mrs Where World Installer Files. So I'm going to click, add New and then upload theme. And then I'm going to browse to find my fault. So now I'm going to go into the same folder. I'm going to click the main of auto theme, and I'm gonna keep it zipped. I don't click open and then I'm going to click Install now. And as I do that, it's gonna go through and you'll see it's installing here, and it takes a minute to do. OK, now it's installed, so I'm going to go back to the Themes page that I'm going to say Add new. And then I'm going to install the child thing. Click upload trails to find the file, click on the child fame, still zipped up and then install now, and it will go through and it'll install the child. FEMA's Well, okay, so now they're both installed. So now we're going to go back to the team's page and you'll see there right here. Now you can see here. This is the active theme and it says right here. Active 2017 theme. So what we want to do is we want to make our child seen the active thing, so it's a little confusing. You might want to think you make the avada may and theme the active, but you don't because you want to make your edits to the child thing. So we're going to say, Activate. It'll take a minute and go through its process and then to know it is activated and of auto is your current thing. So first thing you see on this page is a big red message saying that you need to install some required plug ins so we're going to click, go to manage plug ins. And then it's going to show you all the plug ins that come with this thing. And there are a few that are required, and you'll see the orange box here that says required they're a few that a premium that come with the same. And then there are just some others that come available, said that it's more convenient for you, so I will go through and install the require ones first by clicking you have her over it and then you click install. Then that will go through its process and it says, Okay, it's done. So I'm going to return to that plug ins installer, and I'm just gonna go through and install the ones I want. So the fusion builder is another required. That's done, and then I generally like to install a slider. There are a couple that come with this theme, the slider revolution and the layer slider. Both of them are really good. They work a little bit differently. I think the slider revolution is more robust, but it's a little more complicated, so the layer slider might be the way to go. This theme also comes with its own slider, called the Fusion Slider, which you see right here, and that's a good slider, but it's a little bit limiting. So if you want to do some kind of fancy slider on your side anywhere, then you'd want to choose one of these two things. I'm gonna install the slider revolution and then you get a message because I haven't finished my set up yet, So basically some of these plug ins can only be installed after you complete the product registration. So let's go through into that. I'm gonna click this link here that's gonna take me to new windows so I can finish registering my product. And you can do this in any order you can register at first. You can do your plug ins and register it when you get the message. It's not gonna matter. So basically, how this works is you need a token key foreign Votto and order for some of the plug ins that come with your theme to be registered. And then that's going to allow you to get auto updates and premium plug ins and that kind of thing. So basically, what you want to do is you come to this first link, generate a personal token, and you're gonna click it to go back to theme forest. Now you have to be logged into your account that you purchased the theme through in order to create your token. So make sure that you have all your account settings from theme forest so that you can log in, so I'm gonna click Sign in and it's gonna take me to the Creator token page. So basically, what you want to do here is give it a name and I'm going to call it the Veda class token. So I know later what this is if I need to, um and then all these options, I just leave the same. I don't even go through and see what any of them are. I click, have read and understood the terms and agreements. Great token. Now it gives you this token. You're gonna want to copy this and put it somewhere, just in case you need this token again. There's not a real use for that later. Like it doesn't ask you later for the token. But what I have had happen is I've miss copied it, or I have pasted it in place and then exited the page and lost my tokens. So you definitely want to copy it and put it somewhere. So we're just gonna go back to our token page. We're gonna paste it into this field, and we're gonna click submit. It'll go through its process. And then today I your product is now registered. Okay, so Now we can go back to the plug ins, which you can see from this tab right here, and we're gonna finish installing, so it looks like it has unlocked the premium ones now. So I'm going to install Slider Revolution, Okay. And so now it has installed successfully. I'm gonna go back to the plug ins page. I'm just gonna check and see if there's anything else on here I want to install. And I think I want this contact form and maybe use Tesio. So I'm gonna install those were quick and get those all on the server as well. Okay, so now that I have my plug ins installed, we'll see that suddenly I've got this little number four in a red circle here. So what that means is that there are four items under this menu option that need to be updated. So this is the fusion patch er, and basically Nevada has instituted this patch your system so they don't have to keep making so many big updates. So you'll see this fairly often that there's an update that needs to be made. And it's basically just a tiny little fix that they needed to do so super simple to update you just click on Fusion Patch er, you click, apply patch, and then I will go through and apply that patch. And then once that's done, the button for this one will come up. You click apply patch there and so basically I like to stay up to date on these. I'm not sure that any of them really ever affect my website based on what I'm doing personally. But keeping them updated is not a bad idea. And I like to do this at the start of every installed, just to make sure that everything is up to date with a bottle before I get started. You saw that when we were doing the required plug ins that I clicked on something called Fusion Builder. So basically, the fusion builder is the page builder for the bottle. Same, and it allows you to set up the page using columns and containers and different things like that. It's a really robust page builder, and I really like it. This is the menu options for the builder, basically the welcome screen that gives you an intro video that will walk you through the builder, an option for support so that you can get documentation. If you have a question, you can submit a ticket. Their tech supports really good and pretty fast assed faras replying. There's a knowledge base that you can search for different articles. There's also a community forum, which comes in really handy. So if I go in and I know that I can't get, let's say, the logo to align left, I can click on Community Forum. And then I can type in that question and see if anyone else has asked that question. And then I can find the answer. Possibly that way. There's also a whole bunch of video tutorials for a bottle which are great and a Facebook group, which you can also join. There is also an F A Q tap here, so there's, you know, a few questions that you might have. You can come through here and read through this first before you go and try and submit a ticket. The various settings for the fusion builder. Now this is important. So when you go to build the page and I'll mention this again, once we do that, you can have the fusion builder turned on automatically or you can have it off so that you see the default WordPress page builder. I'd like to turn it on because I use it on every page, so that just makes things a little bit simpler. And it's one less click on each page is I go through. You can also tell it what items you want to have turned on and turned off. So let's say that you know you will never use video on your website. You can turn it off so it doesn't show up, and that can help, You know, help with your performance of the website. Help things load faster because you don't have so many things turned on. So generally I'll go through and I'll turn off a few of the things that I know that I don't need where I won't be using on this site. So let's say you want the fusion builder to turn on on every page except on the F A Q pages so you can turn it on here for every page, but then turn it off just for the FAA cues. You know, it's a little bit of more customization, which is nice. So If you have set up a website before using the fusion builder and you decide you want to use that information, you can export it from another side and imported here and save yourself some time on setting it up. So that's what this is. You can do the same backwards. You can export the content from here so that you can import it into another website and then the sticky preview and published buttons. This is really nice new feature. It puts the preview and published buttons down here in the right hand corner of the page as you're building a page, and that comes in super handy when you're pages really, really long. So you don't have to keep scrolling back up and down, so I usually turn that on. I'll be sure and point those out to you as we go through. I was going to save these settings, and now we have the page builder set up and ready to go the ad Elin's tab, which you can get to all these tabs over here and over here. So these are different things that different authors have built for Avada, so feel free to run through these and add the man. I don't generally do the add ons. I've never really needed them, but it looks like there's some really cool options in here that you could go through like this before and after. Element is new, and it lets you slide across an image to see the before and after, which is super cool. So there are a couple new things in here that are pretty cool that you might want to add to your site down the road. So now that we've gone through the fusion builder, one last thing I like to do before I get started building my site is elected. Delete all the other themes. This is just kind of a housekeeping thing that I do. It keeps the number of alerts as faras things that need to be updated, you know, to a minimum, because you don't have a random 10 or 12 different themes installed. I think it also probably freeze up since based on the server. So I like to just go through and delete these, so to delete a theme, you click on theme details. Then down here on the right hand corner, says Delete, confirm that you want to delete it, and then I'm gonna go through and do that to the other two themes on here in this last thing and click. OK, so now we have about a installed. We have all the patches updated. We've got our setting set up for the fusion builder. So now that we've done that, in the next lesson, we will explore the options that come with the avada thing. 6. Review Of The Avada Tab Options: So now that you have a vada installed on your WordPress website and we've gone through and we've installed the required plug ins and we've got all the patches updated now I'm gonna walk you through some of the other options on Nevada as's faras like the main welcome screens and a few of the other things that you can do here. So if you go to the Obata tab here on the left hand side bar, you'll see basically the welcome page, which gives you a few different options to run through. Basically, the first tab is the welcome, and that will show you a guided tour. We went over this a little bit during the installation, but it tells you a little bit about avada the tools and the customer support that they have . This is a pretty good overview video, so you might want to take a few seconds and go watch it. The registration is something we also did. So this has already done. If you came here and you saw that this was not registered, you could walk through the process to go and get a token again. If this was not here, you would see the link to go and get a token so you could do that. The support tab is probably most important tab on this welcome page. Basically, this will walk you through how to set up a support account, which you definitely want to go do. This is where all the documentation for the theme is in the knowledge base in those things . So you definitely want to go through and create a support account right when you said you're about a theme. So let's walk through that real quick. You're gonna click the creative support account button, and that's gonna take you to the theme support page, and this will walk you through every step you need to do. I'm gonna also show you how to do it within theme forest. But basically, what it does is it goes and it gets your registration information for the theme that you purchased, and it puts it into its support section, and then it gives you an account based on that theme that you purchased. So I think their support is for six months as a standard. And then you can expand that support option through theme for us by buying a few additional months. So basically what you do is you would go into theme forest. So basically what you do is on the support page, you would create account, and that's super easy. You would just say register and it will send you a confirmation that you then send back. And then you come back to theme fusion and you look into your account, and then you have to go and get your purchase code from thing forest and then put it into the account. So let me show you how you do that real quick. So if I go back to my Fame Forest account and then I go to my account information and then I click on downloads that will take me to the page. It shows me everything I've ever downloaded from theme forest. So this version of a bottle right here is what we just downloaded for this class. So you click here and it will show you a few different options. And what you want is the license certificate and purchase code. You could get a PdF or text file. It doesn't really matter. But once you click on that little downloaded and you can open it, and then you will see your purchase code right here. And that's what you want. You gonna copy that and then going to go back to the same support page and on the theme support paid. You go and you would paste it into place to register your code, and it shows you it walks you straight through this. So it's really easy to do. You just put your code in there. It would register that is key. And then, bam, you would have your support token so that you can go to support and submit questions. And basically, you do that just by submitting a support ticket like you would with any other support website, and then they'll get back to you in 24 to 48 hours via email. So super easy to do that. I highly recommend that you get a support account with of auto so that you can ask questions as needed, and so that you can access the documentation and the community form the F A Q tab. We've already kind of gone over, but these just have a few different options if you get stuck. This also walks you through how to get support. If you get a little confused on that, it's some tutorials and that kind of thing. I'm gonna come back to demos in a minute. This is the plug ins page. So once you've gone in and you have updated your required plug ins for the theme, you can also come back at any time by clicking on this tab, and you can install some of these others if you'd like. Let's say you want the events calendar or woo commerce. You just come right here and install it from this page. The system status will show you your various settings and system settings for of auto on your server. And it just gives you some things like your memory limits for PHP, where your girls are the server environment, that you're on the plug and you have active etcetera. This is really helpful when you create a support ticket, you should come here to the system status tab and then click on this get system report button, and that will generate a report that you can then copy and paste into your support ticket. And that helps the support texts go through and figure out. You know what the issue might be with your themes? Here is copy that and pasted onto the Avada theme support page when you're creating a ticket. So what's really cool about Avada is that it comes with all these pre made demos that you can take in, download directly into your site and then just customize it with your logo and your text. So when you're getting started, a really good way to learn how to use Avada is to download one of these demos and kind of play with it. These air set up to use pretty much every widget they have and a bunch of different, you know, like background images or curved photos and and all these different, really cool things that you can put into your site. And sometimes it's not so intuitive to go and build them on your own. But if you can download a demo and then kind of reverse engineer it, you know, just look at their settings and that kind of thing that you can figure out. Oh, I can make this image have a curved bottom, and that's really cool. So I'm gonna look at the Nevada side real quick, so we can kind of look at that a little bit faster when you're on theme forced and you're only avada page. You can click this life preview button and it'll take you to the avada site where you can kind of, you know, cruise through all the demos. So this is what the bottle looks like straight out of the box. If you were to install the basic demo for Avada, it looks like this. If you come over here and you click on this cause this will show you all of the demos that are available with Avada that you can download and then customize. And there's a time there's some that have a left sidebar option there so that have a top header option and they're all really cool. So let's look at this hair salon, one that they have set up. I'm gonna close that so we can see. But then, basically, you can see you know they're headers across the top with a centered logo on this big kind of cut out image, which is really cool. It's got this interesting curve at the bottom of the photo. Some of these page dividers and like this cool background here Anyway, there's just a lot of different things. So if you were to go through and browse some of these different demos and you find one that you really like, you might want to say, you know, pull out some of the elements from the demos, and an easy way to do that is to install the demo onto your site and then just customize it to look the way you want. Now, it's really cool about this version of Avada is that you can also import only elements of it. So what we're gonna do is we're going to install one of these demos so you can see the process and how it works. So I'm just gonna install this electrician's demo clicking import, and then you come in here and it will tell you which plug ins are required in order to import this stain and all of these air active right now. So we're good here. If they weren't active, you could just click on. This is a link and it would activate for you. And then you want to select what type of import a type of content you want imported. So if I only one of the sliders from this theme, I could do that. But I want all of the same when everything that's included with it. So I'm gonna click all and then I'm gonna click Import. Now, this gives me a few warnings. Basically, it says it's going to replace everything on my website. So if you're gonna import a demo, you want to do it first. You don't want to go and spend a whole bunch time updating your site and putting in your logos and your colors because this demo is gonna wipe all that out. So do this. First, if you want to import a demo, and then you can go in and play with the customization. So I'm gonna click, OK, and then it's gonna process. Okay. And then once it's done, you just click done. So then, let's go and look at our websites. We're gonna go appear to this little home icon and click visit site. Open that in a new tab. Okay, so it's important the fame, but you can see we're getting a 404 error. Now. If you ever get this error, it is because there is this one hidden setting that I always forget to do first, Um, and we're gonna go back and update that right now. So if you go back to your WordPress admin, you're gonna come down the settings, then I'm going to click on reading. And what that does is this is like the main place to say what you want to show in your home page. So there two options. You can either show your latest post. So if you wanted this to be a blawg site, you would do that. Now you're blawg Post would show on the home page, or you can select a static page. Now, since the demo had all the pages already created, I'm gonna click that. And then it's gonna show me all the pages I have to choose from for the home page. I'm gonna slipped home, and then for the post page, I'm gonna select blawg and click Save Changes. And now that I didn't say that, let's do that again. Okay, And now that that's done, I'm gonna go back to her page refresh. And then that should clear out the 44 error. Merry go. There's your home page So what's really nice about this is now that I have this installed. If I were an electrician's, all I would have to do is go in and change my phone numbers and my logo and you know the information on the contact page in that kind of thing. And then I have a full working website if I'm not Electrician's and I just kind of like how this looks. Maybe I want to figure out how they've done this with Sunshine Icahn and then the headline . I could always go in and deconstruct this through the editor and say, Oh, well, that's how they put this together And it looks really nice and maybe I'll use that, you know, elsewhere on the site. So it's really cool to go in and import one of the demos so that you can kind of see how things have put together. It's a great way to learn. How about it works in the various things that you can do with it. So now that that's all done and you know how to import a demo, the next thing we're going to do is go through some of the theme options and the various things that you can do within the about of fame, to customize it to look like the site you want to build. 7. Layout & Menu Global Options: Now that we have the Avada theme installed and you know how to import a demo, we're going to review the about a theme options and how to use them to customize your website. So there are a lot of options available, which is great because that allows you to do a ton of custom ation on your site. So I'll do what I can to give you is much info about each one as we go through it, although I may brush over a few of them that are more self explanatory. So to get started within the WordPress admin, you will select avada from here and then same options from here. And that will bring up this page that you see right now. So with the Nevada, there are multiple different ways you can customize your website options within the theme options panel, which is this page or global, and affect every page or post. So if I set my fall int within the theme options to be aerial than all the font on the site is gonna be Ariel. However, there are on page options or options within the page builder on the page that can override these global settings for that specific page. So let's say my phone is Ariel throughout the entire site. But on one specific page, I want it to be Georgia font, so I can go to that one specific page and change it there, overriding the options that I have made on this theme options page. So keep that in mind. There are two different ways global or on page options. So basically how it works is you'll see your fusion logo here at the top and the version of a body that you're using and then down the left hand side or various categories and then within each category are different options that you can customize. So also, with the top, you'll see a link for the support centers. You can click right here to get to support. You can also search for any of the items within the theme options panel, which is extremely handy. You have your save changes button reset section and reset all now with these two buttons. Just be really careful because if you go through here and you've set up all of your options , etcetera colors, debt deducted A and you've spent a whole bunch of time on it and you click reset. It does wipe everything out, so be real. Careful. This will reset this section. So let's say you've made some changes. You don't like him. You can reset it to the default. If you click. Reset all that reset every panel, every option. So just keep that in mind is your building. So let's start at the very top with layout. The layout controls basically the width of your site, the padding that's on it and sidebars in that kind of thing. So you have two options for your layout. It could be boxed where it could be wide. So wide means that the images stretch from left to right of your browser. Window box means that you have a page that kind of sits in the middle of your browser window, and you have some space on either side. And in that type of box layout, you can put a background image or a shadow behind the main body of the page with wide. You can't do that, so this controls your site with, and basically that means that the content of your site falls within 1180 pixels so you can vary this based on your own personal preference. You know the Russian standards. It's usually between 1112 100 pixels, which works well on laptops and smaller devices. Your page content heading shows you how much padding is at the top and at the bottom of every page of your site. So the 100% with padding, we'll let you control how much space is on the left and the right margins for each page of your site. So if you're using a wide setting and then you go into the page and you select 100% with as your page template, which I'll show you when we get to the pages section, then you can also then go in and say, Okay, I want 20 pixels on either side of the left and the right so that your content doesn't but right up to the side of the browser window just gives you a little bit of breathing room. You can also use a percentage in this space if you'd like. So the single sidebar layout just let you determine the percentage width of the sidebar in relation to the rest of your page. So 29%. That's pretty good set up. That's, you know, 1/3 basically of the page for your sidebar and then the gutter is the space that falls between your sidebar and the main content of your page so that they don't bet right up to each other. So if you have a dual sidebar layout, then you can set the width of each of the sidebars and the gutter between them. A lot of people will do a side bar on the left, maybe for navigation and then a side door on the right, maybe four contact info or other links. So this would be an instance where you would use the dual sidebars, and you would want to set them up to the wit that you want and with the gutter spacing that you need. Then, if we go to menu, this has a lot of different options under it. So there is the main menu, the fly out menu, which is only used on certain layouts. The secondary top menu, which works in some specific layouts as well, and I'll show you how to add that in and what it does. The mobile menu which is the menu that you'll see on your mobile device. Your phone. The mega menu, which is an option in Nevada to set up really cool big menus and the main menu icons. So if we start with main menu, so this controls the height of the main menu and you can see here on the demo that we installed, it's a you know, it's a good size height. It matches up pretty closely with the logo. The logo probably has some padding, which I'll show you in a minute. So basically you set up your height, and then it drops into that to fill that space. So there are three styles that you can choose for the highlight on the main menu background , arrow or bar. As you can see now, it puts a background behind each one is you have her over. If we were to change that toe, arrow and click save and then go back to the page instead of a background color, you see the arrow with the bottom that showing up every time I have a river, it so that's just a different way to show it, and then the bar and you go back flips very fresh. When you go back, you'll see Now those is orange bar, right above the item that I'm hovering over. So a quick, easy way to change those settings to show a different hover appearance. You can also, so if you do choose the bar, then you get this optional setting to make that bar size thicker. So if we wanted to make it 10 instead of three pixels and click save, we could go back and you can see how it gets taller for that section. It also adds spacing and pushes everything down a little bit. So now your menu more, maybe 116 pixels tall. But you've also added 10 pixels with that bar height, so the main menu item padding is important. You'll use this quite a bit to space out your menu. So this is the space between each item. So between about and work that spacing and there's 44 pixels. So let's say we made it 24 pixels and then we came back in and looked at that page again. You can see how everything gets really close together. Let's put that back. Let's change that fact of three, so this main menu drop shadow will turn on her off. The drop shadow for the menu dropped down. So it's that little fly out box that comes down when you hover over an item, and then the main menu dropped down with lets you set up. How Why do you want your drop down? Many to be so. In some cases, you may have really long words that you don't want to break into two lines. So, for instance, electrical installed jobs. So if I were to have this at 1 50 instead of 2 50 and then came back and refreshed, you'll see that now it breaks. And so everything's on two lines. So that's something you want to consider for, you know, user experience and the way it looks on the page as to how Why do you want this drop down with to be so the drop down, out and padding is the padding between each item and your drop down menu, so you make a look nice and easy to read. By putting some padding between the two, you can turn on the drop down divider. You can turn owner off the drop down indicator, so that puts an arrow next to the parent level menu items. So you probably have seen that on here. As I've been looking at it, Services has a drop down menu indicator, so you can see it's very difficult to see because of the color that set up here. But there is a divider line now between each of these items on the menu. It's really hard to see. It's very light, but it is there, so main menu search icon will turn a search magnifying glass. I calling on within the main menu bar so you can see they don't have it here now. So let's turn that bond. And when we go back and refresh, you'll see that now we have a search, or here you can just click on and type in your search term, and then the main menu icon Circle borders. So if you have a shopping cart or search icon in your main menu, you can turn that on. It'll put a circle border around those items so the menu highlight label radius goes here, and this will control the border radius of the highlight labels on your menu. Now I've gone through and set up a ah highlight label for services, as you'll see when I have her over at this pops up services title. The Radius isn't changing when I do that, and I believe that's probably because there's a setting somewhere else that's controlling that to keep a radius subzero So. But if you wanted to change that and you didn't already have some other settings overriding at you, which has changed that here, so the menu dropped down. Background color is this darker color, so you'll see the drop down background is that dark color, and then the hover color for that menu drop down as yellow as you saw. And then this is the separator color. So earlier it was difficult to say. So let's change it to whites. You can see what I mean, And there you go. Now you can see that it has a white divider color. Now, the main menu typography is all set up here, so there is a different section for typography on the menu, and that's right here. But that's just for your body and your headers. Um, if you want to change your menu typography, you need to do it from the menu options. So let's go back down to the bottom. So you have a lot of different phones that you can choose from. It starts off. It has some basic fallen aerial Helvetica comic sans etcetera. But then, as you scroll a little more, you'll see all the Google Web fonts that are available to you as well. So the best way to look at these because it's a little bit difficult to go through and check every single one that you might want to use you can either click it here and you'll see it updates right here in this little preview so we can find one that's kind of funky so you can see it previous here. Or you could go to fonts dot google dot com. And then you could kind of do a search. If you're looking for, let's say, a sand Sarah font. That was a bold wait. You could do a search within Google phones, find the name of it, then come back here and then type it in, um, here and then it will show up in the menu, and you can use that flint instead. You can also choose a backup thought. So let's say for some reason, Google Fonts doesn't load. Then I know that Roboto is a San Sarah fallen, so I might choose aerial to be the backup falling for it. That's not something that is 100% necessary. That's really an optional thing. I like to do it there just in case. For some reason, Google fonts aren't loading at the time. You can also select your weight, so depending on the font, you'll have different weight sizes here and then. The subsets, which I never really mess with Latin, seems to be the standard, so I just leave it at that. Of course, you can change the font size. Let's say we want it to be 40 which is very big, and the letter spacing between each letter to give a little more space and you can see it just kind of pushes out the space in between the letters and then, of course, the thought color. So this will be the main color that you see in the menu before anybody hovers over it or clicks on it, and then you can do things like change the font color for the many items the drop down fallen color, the drop down fall in size and for side navigation, which I'll get to and we're building pages. You can also set that size here. So when you're done, click save changes and that shows you had to update the main menu items. So if you want to look at the fly out menu, these are only available when you're using a specific header layout. So the set of that they're using now doesn't, So you won't see any options here. But if you were to change your head or layout than this would show all the options for the fly out menu. The secondary top menu is also header based. So I'm gonna go in and look at a couple of these layouts and switch it up so I can show you how that works. So we're gonna click on Header, and this is where you select positions and we'll come back and go over this a little bit more in a minute. But you can see the header layout that they've selected doesn't have another top level menu above it, but this one does. So this is your secondary top menu it has your phone number and email address, and then it has some social icons. So let's go and look at this one, which is the same. It just has a color behind it, as opposed to a border. So I'm gonna pick head or three. I'm gonna save that, that I'm gonna go back to menu and Secondary Top menu because that's what that's called. So secondary top menu. Now you see all the options on the page for that. Let's go and look at what that looks like on our demo so you'll see it's added the secondary top menu on the fly, which is really nice because I'm not having to reconfigure anything in order to turn that on and off. So if we go back and we look at the settings for it, the secondary menu dropped down with. It's similar to how the regular drop down menu with works if you wanted to be really wide, he said. Higher number, etcetera. This does not currently have any drop downs, but basically it would look like this and it would drop down this way, and that would just set your with their so you can see when I change the font in some of the spacing that it messed up our header. But that's gonna happen as we move through this. So just bear with me so the secondary menu divider color, same as it was on the main menu. It'll just change the color of the divider between each item, background, color, background, hover color and the separator color. So for a secondary top menu typography, you can change your fallen size here your menu line height. So let's say that you want to have a little bit more spacing above or below each line of text. You can change that here. Secondary menu font color, drop down, phone color and fallen, however color, so it's gonna pick up the same font face that you have selected in your main menu and apply it to your secondary top menu as well. So for your mobile menu, it's a little difficult to see on screen, but basically you have three options as faras, the design style. You have the classic, the modern and the fly out, so if you select the fly out and you click, save changes and then you go back to the demo page and you shorten up your browser window and hit Refresh. This will give you some idea of what it looks like on mobile because it is responsive, so it kind of knocks down your screen with, and you can see how everything works. So this is the file. You see. It just opens, and then it gives you an extra close it. If you were going to go to modern and click save, then you can go back and refresh, and you'll see that the hamburger menu gets fatter, and then when you click it, it has a fly out many or drop down menu like this. If you click on the arrow, it will drop down all the services items as well. And then if you go back and you pick classic and that's also a little bit different, it drops below the logo. Then you have a go to, so it depends on what kind of interface you want to show your users, Then similar deal here with the item padding, so this controls the padding for the mobile menu. When you're showing the normal desktop menu on a mobile device, that's not something I use very often cause. I generally want to show the mobile menu on a mobile device, but you can't change your settings there that you can change the height of each item in the mobile menu so that you have a little more space for a little less face between them, depending on how big your menu is. So the drop down slide outs you can turn this offer on, and basically it's just a different effect. When the sections open up in your menu, it shows whether they slide out when they're tapped or if they just open up mobile header background color is thebe background color of the header where your menu is on your mobile page, and then you have the mobile menu background color. So those are two separate things that they let you change separately here, which is really nice so you can style it to match the page on your laptop set up for your desktop set up so that they look consistent. Menu background however color just a color setting here, the mobile menu border color. Here's a color selection here, so the mobile menu taco color is what controls the color of that quote hamburger menu that you see on Mobile right here. So it's that orangey color. You can change that if needed, and then the mobile menu typography. This is nice because it lets you change the font to be different from your desktop menu font, which you may want to do, depending on how big your menu is and what it looks like on a mobile device. So you may want to go with a more narrow font or with a more eligible thought because it's on a smaller screen. And again, you have similar options with the menu hover color and if you want it aligned, left, right or center. Okay, so on the mega menu options you can set your mega menu Max with. So that's approximately the entire width of the site of the column title size. So your font size for the titles, the padding for the drop downs and then whether or not you want a divider on now to turn on the mega menu and to set it up that's in a totally different place. I'm gonna show you real quick, but then we'll go over this more when we set up menus. So in order to manage your menus, you would go over to appearance and then menus. I already have that open here. So then you would work on the menu that you want to change. So I've already selected the main navigation menu. Now the mega menu only works on top level pages. So home services about etcetera. Those were all your top level pages. So you would just turn down this arrow, click on the evaded menu options and then in here. You can set up additional options for your menu, which will also go over later. But if you wanted to turn on that mega menu, you would turn it on here. Then there's some other settings that appear. So then I click save menu, and then I go back to our demo page on I hit Refresh, and then you'll see that on the services menu. It has changed to more of the horizontal menu that has all the items left to right now you can change the number of columns and padding and fall in that kind of thing in this mega menu. But just if you turn it on, it would kind of look like this and then you would go through and customize it. So I'm going to go and turn that back off so we can continue. And then the last item in the menus option is the main menus icon. So basically, you can turn icons on for these main menu items so you can have the icon at the top, right bottom or left set the size, the icon color, the hover color of the icon and then the thumbnail size. If you are using it in a mega menu and again, some of these options are done within the menu. So if you go back to the menu section and let's say we wanted to add an icon to the home, I would click on that button again, and then I would select my icon from this list. So let's say I wanted to do Ah, house. It shows me the house icon, my click save right click save for the menu that would go back to our demo page the fresh, and then you get a little home icon next to the home menu items, and then that's it for the mini auctions. And so in the next class, we will continue on down through the about a theme options 8. Responsive Design and Colors Global Options: So now that we've gone over the layout and the menu theme options, let's review the responsive options for your website. So responsive basically just means that your site responds and redraws itself based on the width of your browser at the time, or the device that you're viewing on so it will automatically detect if you're on mobile or on a tablet or on a laptop, so your site layout may break it. Certain areas to fit the device that your own and resize your phones in your images to fit that device. So let's go through these items real quick. The response of design in turn it on and off. So if you don't want it to be responsive, you would select off right here and you would not get that re sizing. Now, I don't suggest that you do that simply because so many people visit websites now on a mobile device, so I would definitely keep that on the grid. Responsive Break Point basically tells your page when to break any items that are laid out in a grid. So your blogger, your portfolio pages have an option to lay out in a grid, which I'll show you as we're building things later, but this will allow you to change where the page breaks to start shifting items underneath one another. I'll give you an example of that here when we go over the head of responsive Break Point. So basically what this does is it controls your desktop header so that when you change to a smaller screen or mobile device that your head will break gracefully. So right now it's said it. 1000 and 50 pixels on. Let's go look. So this is what our page looks like now. And if I were to demonstrate what maybe a smaller screen would look like, I'll just closing my browser and you'll see right there it breaks. You see how it goes more full menu to a mobile menu. Okay, so that must be around 1000 and 50 pixels. So let's see what happens if we didn't have that break point set up correctly. And let's say we had a break in 800 pixels. If we go back and refresh your page, you'll see that when I then closing my browser window again, it doesn't break properly. It ends up putting the menu underneath the logo, which I don't like. It makes the page really tall. It just looks awkward, so you would definitely want to set it up so that it breaks at the proper width was generally I tested a few times and I wanted to break right before it hits the logo. You don't want it overriding the logo or slipping underneath it, so I'm gonna put that back to 10 50. The site content Responsive Break Point is very similar to the head of response of break point that basically controls the content below the header so that all the body content will also start re rapping at a certain point. And the header in the site content are generally pretty close to each other in size. The sidebar response a break point is where it will start breaking the sidebars to show up underneath the content of the page. This mainly is on mobile devices, depending on how you have your sights set up. If you have a sidebar on a page and you have your break point at, you know, 900 pixels or whatever, then as your browser gets smaller as your own, a smaller device that side barbell slipped and be shown underneath the body of the page. Mobile device Zoom lets you turn. Offer on the ability for somebody to pinch to zoom on a mobile device. Responsive. Heading typography. So what this does is if you want your H one h two settings to change to a different font size to, like respond dynamically is your browser changes or as you're on a mobile device, then you can turn that on here. Or you can turn it off so that on mobile devices, your H one and H two setting stay the same. They may just be really big on mobile if you don't have responsive headers on and then the sensitivity for the response of typography. So if you're going to have responsive typography on, say, these, go away if you turn it off. But if you have responsive typography on, then you can set how sensitive that responsiveness is. So let's say I'm closing my browser window and I don't want the front to get teeny tiny really fast. I want it to be kind of a subtle, gradual thing. Then I can set that here, And if it's below one than it decreases the rate of re sizing. And if it's above one, then the sizing will get smaller faster. And then you can also set your minimum fall in size factor here. And basically what that does is it just gives you the minimum distance between headings and the body text that you have on your page. This is the value by which it calculates that information. So in the colors panel there on a lot of options in this one. And I don't use this one specifically for the colors, because I tend to go in and set those up under each individual option to basically what this does is you can select your theme skin whether you want your site to be light or dark . So let's say that you have say, this demo that we're looking at is a pretty dark site. It has a lot of dark backgrounds. The footer is dark, so they may have. It doesn't look like they have either one selected right now, but they may have selected one of these in order to make it a little easier down the road to set up all their options and as well You can also define your color scheme. So if you pick these pre defined schemes, the Nevada has some options already set up. So if I were to select red and that might make all the buttons and check mark icons and divider lines red, I don't generally use that. I will generally put in a primary color that I've selected for my fame. So in this demo, this orangy yellow is their main color. So they selected that here and that will tell about a that some of your primary colors, like hovers or highlights, are that color. But you may still have to go through and set up some of those optional colors for things as faras buttons and check mark icons and that kind of thing. So that goes over the next two items, responsive in color. And in the next class we will continue on down the list 9. Header, Logo, and Page Title Bar Global Options: So let's get going through the about a theme options continuing with the header options. So the header is the area at the top of the page that holds your logo and your menu, and you can have a couple different types of header positions. You can have topped what you're seeing here, or you can have a sidebar down the left or a sidebar down the right that hold your header information in it. This is an example of a demo that uses a left sidebar header as opposed to a header that goes across the top of the page. So a couple different options you have on setting of your pages and then you can select the layout so about a has seven different options for headers and the layouts that you can put in them. So this one, if you hover over it, gets a little larger so you can see this one's very basic logo on the left menu on the right logo on the left, many on the right, but then with the top navigation bar, where you can put some contact info, another drop down menu and your social icons. This one is very similar to the one above, except that it has a color bar behind this top header, whereas Number two has a border instead of the color background. Number four has a search field with in the middle of the header, the menu below that logo and then the social icons in the menu above. So this is really good. If you have a lot of pages on your site and let's say like thes, they have, you know, six different links for top level items. This gives you a lot more room. Plus, you have this place. You have this additional header at the top, so it just gives you a little more flexibility. When you have more top level links, you can also make this instead of the headliner link. You can make that some kind of tagline or some information for the search field or whatever you'd like. That's totally customizable. This next option gives you a similar layout, but again, with the background color instead of just a light color. And then the logo is in the middle instead of on the left, and they removed the search option. This option lets you use just a hamburger menu. So this is a very minimalistic design search field hamburger menu and then below go and then this one again is very basic, just with logo in the center so you would come in and you would just select the one that you want. This is the one we're using now. It's highlighted and you can see how that looks here with the top level menu, the regular menu and the logo. Then you can choose where you want your slider to be if it appears above the header or if it appears below the header. So in this theme they had the slider appear below the header. So this is their slider. This is their header. But if you look on one of the other demos Ames, you'll see that there header is below the slider. So this is their slider here and this is their header and then when you scroll down the page there, header jumps to the top of the page. That's a pretty cool effect Now The header content one and header content to allows you to drop some information into the left and right sides of the top header, so that only works if you choose one that has this top header. So header number two, head of number three, number four and number five will allow for these features and I think, regardless of which one you pick. So if I picked this one and it doesn't allow for those options in those options, turn off so you won't accidentally try and use them. But let's turn back on the header we have and then so header content. One is the left hand content and that is the contact info which you would put in right here . So if I want to change this to I have an email address, then that would be my new information that would appear in that top left corner e mail us today in forward email dot com. But it automatically adds the email information as well. So and this is the email. So if you want, you can just put email us today and then put the email in here and it will automatically create the link and everything for you. Header content to. You can do a couple different things. You can have the contact him for their social lengths navigation, So if you said per menu for that area, or you can leave it empty so nothing will show there. Sometimes I like to put navigation there because it will give an extra option for some more menu items but social links. You see it there pretty often and the contact info. So the header background image allows you to add an image to show up in the background of the header instead of just using the color. So let's say we wanted to use something like this and select Now what you do that, then you'll get a lot of other options to use with the header background. Let's go look at that real quick and see what that looks like. So since they have a color in place that won't display, so what we're gonna need to do is go to header styling and then we would turn off this color and then save, then go back and see what that header background looks like. And then you see it. So it's not a full with they didn't crop it to the exact with, probably because they didn't intend to use it there. But let's see what we can do with that. So if we go back to the header background image, if I said to make this 100% and then maybe I wanted to repeat so that it fills the entire space, I might say Repeat. Also repeats left, right and top bottom and click save. And then if I refresh my page, you'll see it spans the full with of the page. Now it looks like it has some black area at the top, and since it is a making it a full with image, it enlarges the entire image. So what you would need to do is go take this same image and crop it down so that you had less black at the top and it would push the image up a little bit higher on the page. You can see it there and then for the parallax background image, so that lets you have a scrolling effect on the background image and in his own right now. So let's go check that out, and it's gonna be hard to tell because there's so little of the image here. But watch those disappears. I scrolled down the page, so if you had a full image here, one that was showing a bit more of the image. You would see that, in fact, let's go and, um, turn off this Repeat all. See if that helps us to see it just a little bit better. I want you to see this effect, say, so you can see how it kind of scrolls up and move that image behind it stays put. So it's kind of a cool effect to check out. I'm gonna go ahead and take that off and then go and put our color back in place and click , Save. And now we should be back to what we were before. Okay, Okay, so then on the head or styling tab, there's a lot of different things you can do here to style your header. You can add additional padding to the left, right top or bottom to space it out a bit. So if we were to go and put some padding at the top in the bottom, then go back and check that out. You can see that it makes it much taller. It adds 50 pixels to the top and to the bottom of the header, you can add a shadow on the header so it displays just below the header. It might be hard to see here, but let's see if we can see that right. So it's really, really light. It's just a little bit of gray shadow right behind that header. You could make the header with 100% and that will make the content within the header span left to right. So it gives you a little bit more spacing here. Maybe if you had a really wide menu, I tend to like mine to be within the grid of the page layout which we had set here. If you remember so 11. 80 and that seems to work a little bit better. So I'm gonna go and I'm going to turn that header with off Now. This is where you said the background color which you already saw. So one other thing on the header styling is that you have the ability to make an image drop behind your navigation in your menu section on the header. So if you look here on our home page, you'll see that the navigation is set within a bar and it's solid, so you can't see anything that goes behind it. But if you look on this demo, you'll see that the image goes all the way behind the navigation in the header area, which is kind of a cool effect. So how do you get it to do that? You go into the header styling options and then on the header background color. It actually gives you the instructions right here, so you don't forget what you're doing. But if you click on that and then you set the transparency to be anything other than 100% then your image will go behind your header area of your website. Now they have it turned off on their pages individually. So I'm not going to show you that. But this is where you would do that if you wanted your page to end up looking like it has the photo going behind the header area. The archive header background color will allow you to set a different color four pages that are archived. So search pages the 44 page the Blawg archive pages in that kind of thing. So I'm not sure why they give you a different option for that, but they do. So you could set that right here. This is the head of border color. They have a white border set here, but you'll see it's not displaying, and that is because they haven't opacity set on it of zero. So if we were to set that toe one and click save, then you would see that the border appears right here at the bottom. It's a little hard to see against that great background, but it's right there. And then the header top background color, which is this section appear. They have that set to the orangy yellow that the using on the rest of the site, now the sticky header. You may have noticed that when I scroll down the page, this header sticks to the top of the page, so that is a sticky header, and it has its own settings, so you can make that a little bit shorter or taller. You can turn it owner off. Obviously, you can hide it on tablets or on Mobil's, which I tend to do because there's so little real estate on a tablet or mobile. I usually turn sticky headers off, for those could have it to animate two different size So if I were to turn animation on and then when that can refreshed, you'll see that it animates to be smaller as I scroll up. So some people like that affect some people don't, but you have the option right there to turn that on. You can change the background color for the sticky header. So let's say that once I'm on this this page and I've scrolled up, I want that headed to change to yellow so everything's reversed. You can do that here. You can also change the thought menu color. So if I did change this to yellow, I wouldn't want my menu color to be white. So I have changed that to a darker color. And then you can change the padding for the sticky header menu to make a little bit smaller because it's nice to have it there. But you also don't want it taking up a bunch of room, and then you can change the font size right here. It'll pick up the same font face from your regular menu and from your regular header, but you can change the size of it right there. So that's it for the header. Pretty easy. Now we're gonna go onto the logo, which is also included in the header. You can set your logo alignment to be left writer center, but only on certain header selections. So ours is set to left. The centre only works on head or five. And on that sidebar header. So if you were to look here, they have their Henderson, their logo centered right here on this sidebar header. You can control the margins as well, just like we did with the header itself so that it will add a little more padding just to the logo. So if you're having trouble getting things centered here, you might add padding to the header. But then remove patting from the logo to get things to center up. You can turn on a background just for the logo. I think that would be strange. I probably would not do that, but you do have the option here. And if you wanted the logo toe link to something other than the home page, then you will add in a link here. I don't know why you'd want to do that, but some people might just leave it blank if you wanted to link to the home page, and then you have various fields to set up different logos for your site, so your default logo is the one that you're saying now. You can also add a retina logo for people who are using a retina screen, and the way you would do that is you would set up the same logo, but you can either make it two times bigger at the same resolution. Or you can just double the resolution of the logo at 100% size. So let's say this is three inches wide at 72 d p I. That I would make this three inches wide. 144 dp I or I would make it six inches wide at 72 DPS. So something to kind of play with and see how that works. The sticky header logo. If you wanted to put in a different logo for the sticky header, you see, this kind of gets a little small. Maybe you just want the text when it's on the sticky header so that you could make it a little bigger than you have the option here to upload that and then saying for mobile logo . Sometimes I want to put a different shape or different sized logo for the mobile, and you can do that right here. And as you add these, it's gonna give you just a couple extra options as you do that, as faras adding, letting you add a retina default logo to each of those. The favor icon is the little icon that displays right here in the tab of your browser window, and this one is just the one that comes with the Avada theme. But if I were to go in and add a favor icon that it would show up in this little area so you can see it's different for these avada demos. They have a little piece of paper icon, and then these have the two bars so you can go in and you can take Let's say they wanted to take this upside down triangle and make that their favor icon. They could do that. It just has to be 16 pixels by 16 pixels at 72 d. P. I. And then you would upload it here, and you can do the same. You could do a different one or the same one. I tend to just use the exact same one for all of these different options. Now the page title bar is something that they're not using on this site they haven't turned on, but then on each of the pages they have, it turned off. So I'm going to show you an example of what the page title board looks like. So you have a few options. You conglomerate turn it off here, which is generally what I do. And then I would go into each page and turn it on if I needed it. But you can show the title bar and the content where you can show just the content and not the bar itself in the bar generally has a border or an image behind it, and then you can turn the text owner off. So each page when you set up its page title and I'll go over this when we go through the pages. But if you set the page titled to be about Us, then about us would show in the page title bar as the title text. You can style the page title bar to be 100% with and that's similar to what we just did with the header. It just pushes the text out to the far margins. The page title bar height. You can change that as well. The mobile height could be different. And then the title bar, background, color and border colors. You would just set your colors here, the fall in size, the line height for the phones, the font color. And then if you had a subtitle is, Well, you could do that here and then you can decide whether you want it left center or right. They have it centered on this one, and I'll show you how that looks in a minute. And then you can also add an image. So this is a little bit hard to see. It's very, very faint, but you kind of want that if you're gonna have text set over top of it, so you would just click to upload, browse to find in your media library and drop it in here. You can also add a retina background image if you'd like, make it 100% or not, and then add parallax or the animation, just like we did on the header bar. So like I said, they have it on here. But they have it turned off on all the pages. So I'm gonna go in and show you on one of these pages held to get it to turn back on. So this is the work page, and there's no title bar here, So I'm gonna go into the to edit the page and show you we'll go over all these features in a bit. But if you scroll all the way down, you will come to the fusion page options. Now, these air, the on page options that I talked about earlier, and the same options are global, and these are on page options only. So this will override any of the global settings you have. So you see here under the page title bar tab, they have it set to hide on this page. So if we went and turned it on and click update and they went back to our page and then refreshed, we'll see it appear right here so you can see it has a bit of that faint background picture here, the title of the page and then showing the breadcrumbs as well. So I'm gonna go turn that one back off when? All the way down to the Fusion Page Options Page Total bar, and I'm going to turn that back off. So then you saw the breadcrumbs on that page, and here's where you alter those. So you click on the breadcrumbs option so you can show the breadcrumbs in its place. You could show us search box instead, or you can turn that off completely on the smaller sites. I generally leave it off. There's no point in having it. But if I had a bigger site with a lot of deep level pages, I would probably turn breadcrumbs Elin, and then same here. You could turn on her off for mobile, and you can have a prefix before your breadcrumbs that says something like, You are here so that the people know that that's actually a navigation area, and they can click on those links. The bread comes separator. I might want to use a colon, or I might, when he's a dash, so you get to choose what that would be right here. The font size, the text color, the text hover color and then these post categories and post type archives on breadcrumbs. These are things that would be used on something like a portfolio page or a blocked page. So let's say you're on your block page and you have a category of news. If you want to show that news category, you turn it on here. But if you don't, you would turn it off, and it would only show of your pages instead of your categories. Same thing here with the post types. You can turn that on her off for the breadcrumbs, all right, and that's it for the header logo and page title bar. Come back for the next one and we'll go over the next few items. 10. Sliding Bar, Footer, and Sidebar Global Options: the next item to review in the avada theme options is the sliding bar, so the sliding bar doesn't really get used a whole lot. But it does have some really interesting features that you can use in order to promote an event or a special that you may be showing on your website. So this is a sliding bar option, and you see that there's really nothing on this page except the on and off. But when she turned it on, then you get a ton of different options that you can set in order to customize your sliding bar. So I'm gonna turn it on and save it just so you can see where it appears on the page. First, you'll see that there is nothing up here in this corner. And then when I refresh, we get this little plus in a triangle. If I click it, it drops down and this is your sliding bar area. So let's go back and see what we can do here. So I turned it on. You can also turn it on or off for mobile. You can have it open on the page load, so you might want to do this if this is something you're really trying to promote, because, as you can see, it's very small, and a lot of people may not know to click on this element so you could have it so that when the page loads, this is open right away. Now, of course, that does cover up your navigation in your logo, so that's just something you'd have to kind of think through. The sliding board position could be top right bottom or left. I would usually say the top, but if we put it on the right, go back and check that, and it shows up down this right side and comes out as a column that way. So this may be something to do if you wanted it to be open when your page loads and then that way doesn't cover up your logo in all of your navigation. So then you could make the with you know whatever size you want, especially if it's on the right. If it's on the top, then you'll get a couple different options. So depending on where you have it set up, you'll get a couple of different options as faras, sizing and placement so you could make it sticky when it's on the top and it will stay at the top the whole time. As you're scrolling right now, it looks like it's sticky on the right, and then you can set up how many columns you wanted it for. Now I have it set to two, and we'll go explore what we can put in those columns in a minute you're padding and then your alignment of the content left Writer center, and then you come down to the styling options, so the toggle is kind of like the hamburger menu here. You see that it's a triangle with the plus in it so you could make it a rectangle or circle or a Nikon. Let's try circle and see what that looks like. So it's just a big plus here, which I think, actually stands out a little bit better. I might be more inclined to click on that, being that it's a circle, and then if it's a main menu icon, then it just drops here into the main menu, and you can style it to stand out a little more. Let's go back to the circle. I think that looks nice. You can do a divider color, so if it's a triangle and you wanted the color of the toggle to have a border between the toggle and the background, you could add that here, the closed, the icon color said that. Plus, in the minus that you're saying this is the color there font size, and then the headings in the font, the link in the hover you consent. All those colors here is well, so based on what your background color of the slider is, you would want to adjust your phones to show well on that. And then, if you wanted a border on that slider, you can turn that on or off. So this is our background color of the cider the paint that you saw. So I've got the fonts in the link set up to be lighter colors. Let's go ahead and save that, and then go look at it again so you'll see that I have a column of text here and it's black with a white border and white text on a white header. So the way that you set up the content that goes into the sliding bar is through the widgets panel. So if you click on widgets, which you'll find here under appearance widgets, you'll see that you have a sliding bar widget once you turn the widget on. So I haven't said it for two columns, so we have to widgets the left and the right. And I went ahead and I put some text into the 1st 1 And the way I did that was that I scrolled down here to the text, hover over it, click, and then I selected which widget I wanted it to go in. So I'm gonna put it in widget to, and we're gonna walk through what we can do here. So let's have a title. So this is title for Cone to and then, um, putting some text here. All right, so now you can do what you would normally do attacks, and you could make a bold or italic can add a link in that kind of thing. You can also add an image if you wanted to do that by clicking, add media and then it would take you to your media library to select an image. You can also do some more options here through the Avada widget options button. So if you click that, you can add some padding to your column, which I would suggest because it does just but it straight up to the sides, you can set a background color. Let's make that orange. You can set the radius of the background so this will make the corners curved. So if we just put maybe a five pixel radius, it'll be a really shallow curve. If we wanted a border, we would put that here and then the style of the border so we could have a dotted or dashed border and then the border color. So we have an orange background. Let's make the border black and then content online. That will just inherit the same attributes as you have set up in your theme options and then mobile content online. If you're doing this on mobile, something clicks save and then click Save here on the widget. That's very important now. Once that's done, it'll gray out. You can go back to your page hit, refresh, then click the button and you'll see that it's added this whole second column. Bold italic it. It made our background orange. You can barely see the little dotted column here. Let's go back and change that border to be a little bit sick, Chris. You can see it and go back. Refresh again, Quick Plus. And there you see, we have a dotted black border that three pixels wide with the orange background white text , and that's what you do. So if you wanted to change this to B three columns, you would just go back to your theme options. Find the column setting here, save it to three, and then you'll see when we go back and refresh. Now we have 1/3 column added, If you go back to the widgets page and refresh, you'll see that now we have 1/3 widget for the third column, and then you could add into here anything you wanted. So let's say you wanted to add the social links for your site. You could drag that in there. Let's just add couple. It's on YouTube, interest in Facebook, and then save that and then go back and refresh again. And there you have your social links would add into that third column. It's kind of a neat feature. You just need to figure out what you would want to put in there and what would be okay for people to not see if they decided not to click on this icon after the sliding bar, We have the footer. The foot is really important. This appears on every page of your site unless you turn it off of the page options. So this will allow us to customize the footer for all of the pages. So let's show you a couple of the elements of the footer here on the home page. So this part of the page is the footer, and this part of the page of the very bottom is the copyright area. So it's two parts to the footer, the main footer area that shows the foot or widgets and in the copyright area. So on the foot or content, you can turn them off her on. So you do not have to have any widgets in your footer. You can adjust the number of columns this thing will do up to six columns in your footer. You can center the foot or widgets content. I finally have one column for the footer. I might want to center the content right in the middle of the floater. Now you can have some special effects. You may have noticed they have the parallax effect turned on on their foot. Or so you can see that as you scroll, it stays in place in the page, rolls over top of it. I'm not super excited about that effect. I find it a little bit weird, so I'm just gonna put none. We're gonna turn that off and you'll see that now, when I go back and refresh, you'll see that when I move the foot or moves with the page, which I think is a little bit cleaner and easier to read so you can turn your copyright bar on her off. I like it on because I do like to put a little bit of info. They're all usually put a link to the privacy page in the copyright bar. Or just some general information may be another link, the phone number, that kind of thing. So I like to keep it on. You can also send of the copyright content here. And then this is where the text for the copyright goes. Now, this allows you to put any kind of html into this box. You don't have to, but if you wanted to add a link, you can see they have, ah, link tag right here. You can do whatever you'd like to in this box, and then it will show up in the copyright textbooks. So let's save those changes. Now let's go to the background image. This is very similar to how the header background image works. Once you upload an image, then you get additional options. So let's add that same image that we use for the header into the footer. Then you'll see. Now we have other options to use, and if we do it 100% size with repeating and we're going to center it in the middle, then save. Let's go back and look at our floater. You can see that it shows up in the background, and it's really horrible. I probably would never do something like that, but you get the point. So if you wanted to put an image back there that was a little more subtle, that probably work better. Gonna go ahead and remove that. So then the footer styling has a lot more options on it so you can do 100% footer with which is the same as in the head, or it just pushes it out to the margins. You can set the padding so they have a lot of padding at the top and bottom to give it some spacing. Background color. If you wanted a border above the footer and below the footer between the foot and the copyright, you can add that here. Set your border color. The widget divider color is just a small border that appears between each of the widgets in the footer. The copyright padding top and bottom for the copyright area. Copyright, background, color and border size. Very self explanatory. And then the border color, of course. And then you can set up your typography for your foot or in this section. It's not done in the main typography section. It's done right here, very similar to what we've done before by selecting your font, font, size, line, height and that kind of thing. And since this is just for the headers, you can have your headers be a different font color than the text in your footer. You can also set up a foot or link color. Ah, hover color and then change the copyright text, color links and hovers and the copyright on size. So there's a whole lot of options in styling the footer and you can just really make it look. However you want, you can see you can also add social icons and that kind of thing to it. I'm gonna show you how they did that. Let's go back. Let's make sure we've changed these. I want to get rid of that background. Okay, so now we're going to go into the widgets just like we did for the slider bar. And you will see that we have widgets for the footer as well. So since we haven't said it for three columns, it gives us three widgets. And inside each widget, you can drag any of these widgets over into this section. We'll go over the widgets a bit more thoroughly later. But for right now, just know that you can either click on an item and then select it to go into whichever widget you're looking for. Or you can just drag it and put it into place wherever you want it. So you'll see here they have company info and social links in the first column of the Widget. So the company info in the social links and the second widget. They have a menu set up for the footer, and they just select that menu here and drop it in and then on foot or widget. Three. You can see here they have an image widget in place. You'll be able to see it because the images actually white, as you can see here, so it's not showing up. But there is an image here in place, and then they have a link on that image to go to a different page so you can see how all that would lay out there. So the next option in the Nevada theme options is the sidebars. So we talked about sidebars a little bit when we started going through these, and basically, it's just a bar that you can put on any page of your site, and it shows up in the right or the left column or both, so you can have sticky sidebars. No sidebars or sidebars, one both. So if you say you have a sidebar set up, So let's say you have a sidebar one set up. You may want that to be sticky so that when the person scrolls on the page, the sidebar stays in place so you could turn that on here. This is the padding for the sidebar so that the text doesn't but right up to the left and the right, the background color, the sidebar, the widget heading background color. So if you have ah, heading for your widget, it would have a white background with the text on top of it, and then the widget font size heading and the headings color. So a lot of different options you can set up here is far styling. Your sidebar. Now these other links down here, this lets you set up the sidebar four pages, Post archives, the block pages in the search page. So a lot of these options may be similar, but it will globally set the sidebars that you want and how you want them to look for specific pages and posts on your site. So we'll go through these real quick for the pages. You can turn a global sidebar own or offer all the pages, and again if you do this and let's say you want the sidebar on every page except for the home page. You couldn't go into the home page and on the page options. Turn off the sidebar for that page. So if you think you'll want a sidebar on the majority of the pages on your site, I would go ahead and turn it on and style it here. And then you could go into the pages. You don't want it on and turn it off. But conversely, if you only want the sidebar on one or two pages, I would leave it off here and just turn it on on the pages You want it, and then you can select which widget you want to be. Your sidebar. So you can see here that there's a block sidebar already set up and then the widgets for the footer in the sliding bar. So if you wanted to set up a sidebar specifically, four, let's say your portfolio page. You go back into the widgets admin, and you would create a new widget for that side more so you would just click here portfolio the sidebar and click OK, and then it would create it and it would drop it right here. So then you can build out your sidebar by dropping in items over here. So let's say we want the Facebook plug in which you would have to then customize. And let's say you wanted Calendar and you wanted an image. Then you would drop all those into the side door and we'll be good to go, and then you would come back. You would probably have to refresh this page to get that to load, and then you would see it right here in your list for global sidebars. So if you wanted the pages to have a portfolio sideboard, select it there. But since we don't have ah sidebar, set it for the pages. I'm gonna leave this, says is and then want to go to the Portfolios page. I'm going to select it there. So now, on any portfolio pages, it'll show up with this sideboard that we just created in the widgets. So the portfolio archive page is the page that shows all of your old portfolio items, whereas the portfolio post page shows one individual portfolio item. Same with the blog's. The archive shows all of your block post and the Blawg Post page shows just the individual post so you can set it up to show one sidebar on the active Blawg page and then one sidebar on the archive blocked page and kind of keep things separate. And then again on the search page. If you have a search page set up, you would do the same thing here. You'd select your sidebar, and if you want it on the left or the right, and that's it. Pretty simple. Come back for the next class and we'll go over the next few options. 11. Background, Typography, Blog, and Portfolio Global Options: the next item to review in the about a theme options is the background styling. So there are two different ways that you can style the background with the color or an image, and one is the full page background, and one is the main content background. So this website is set up as we reviewed initially as a wide page, so you can't use the page, background, color or image for this type of layout. So I'm going to show you how this works by going back and changing the layout to be a box toe layout instead of wide so I can show you how this works. So now we've changed it to box. Let's go back and refresh, and you can see now that the page comes into the middle and then you can see there's some area on the left and the right side that is the background. So now if we go into the page background, you'll see the pattern has turned on, so there are a lot of different patterns you can select to go into the background. I'm gonna choose that dotted one. It's a little easier to see, and then we can also select a color as blue, or we could select an image and upload it to the background. So let's see what those changes due to our page, so you'll see that the pattern supersedes the color so you can have this pattern on the background or you can have the blue color, but you cannot have both. You'll see there when it refreshes. Now we have the blue is the background instead of the pattern. So conversely, you could also have an image. Is the background Let's go and take this one again, not that into place and save. Then when we refresh, you'll see that the background image appears. But we didn't have it to repeat, so it shows the blue and the rest of the area in the background. So then, if we go on, we say on for 100% background and then repeat all, then it should tile across the background and fill that entire space so you don't see any blue. It's like that so you can see that's kind of a cool effect to add. When you have a box background, I'm gonna go and remove thes and then change our layout back toe wide, and now we can go look at the other background, which is for the main content. So the main content background basically sets up the color that you see behind these blawg posts. So it's his darkest purple color going to refresh now that I've made this wide again. So the main content background color extends left to right throughout the entire page and behind all the elements of content that are on the page when you have it in the wide layout . So if we were going to go and then change this color, we would just select right here, pick any color from the palette and save changes. We would go back and refresh our page and you'll see the background is pink now. So a couple different options that you can play with with that you could also do, ah, background image here, and we would do the same thing. Make it 100% with and repeat all click save, and then when we go back and refresh your page, you'll see that the image drops into the background and then it stays in place. I think that there is some margin padding here, and that's why you're still seeing the pink So the background doesn't cover up that margin that they have said in the bottom. But generally, if you didn't have that set, this background image would just tile across the entire page. So let's go remove those items and change that back to the purple. Okay, so pretty simple. Just a few different options you can do to stop the background of your pages or of your site. Let's move on to typography. This is where you're going to set all the phones for your site globally, so it's really good to go in and do this. So then you're not trying to put code in on each page of the site or within just individual pages. So if I go in and I sent my body phone here and let's say I make it San Serif font like it is now, but then later, the client comes back and says they wanted to be a Sarah phone. Then I can change in one place and it updates throughout the entire site, so it's really great to come and set it here globally, and then if you needed to be a different bond on one or two pages of the site. You could do that in the page options. So you would set your phone here, the weight backup phone like we've gone over before the font color. So you can see here they have their link color set up to be the same as their font color. So everything looks really nice here. The only problem is you can't really tell which text is a link until you have her over it. So you see, it hovers toe orange, so I might go in and change this link color to be slightly different. Maybe we make it that orange color click save, and then you can see that all the text links on the site change to that same yellow color, so that might be a bit a bit much. You may want to play without a little bit, but you can see how changing that link color affects the rest of the site. And then, if you wanted to change your typography for your headers, this is where all your header tags will live, and you can adjust each one individually. So you ch one than H two and straight on down the list to H six, so you can do the same kind of settings to each of these, and it will update throughout the site. So any time you create a page and you put in that, you want to use an H six R NH three for a header, it will pull all these styles directly from that, so you don't have to keep going through when writing in your font styles for each header. Then you can also change the title typography for your post. So on your block post. This is where you would change those font settings and then for any of the extras with in your post your block poster your portfolio pose. This will change the font style. Four comments, author titles, related posts and I think other metadata as well. Then, if you have a specific thought that you want to use, you come here to custom phones, and then if you had gone and purchased a font online and downloaded it to your computer, you could then upload it here so you can upload as many phones as you want. This box represents one fault, even though it does give you five different options. So if you downloaded in TTF format or SPG format or whatever that might be, you would upload it into its specific field by clicking that green box, and then you would save toe. Add that fought, and then, if you wanted to add a second phone, you were, click the add button and it would give you another photo. Add in so the phone sections. Pretty simple, pretty straightforward. As for the typography and how to set that up, the next section is the blawg. So this is where you'll set all your global settings for your blog's. There's a lot of different options so similar to the page title bar that we went over earlier. This would be a title bar for all of the blog's pages so you can show hide show content only. So when we first set of the site, we looked through the settings we selected. Which page to set is our home page, in which page to set is our blawg page. So this is the page title bar for the page. We said it's our blawg page. So mainly it's really gonna be your bloke archive page. So if you want a title bar there, you would say show or hide. The Blawg layout lets you control the different layout for your blog's style, so they're quite a few different ones. They have grid selected for this website, and you can see here there boxed into a grid and then they just fall underneath each other . So a couple different ones you could do a medium large alternate, which I believe shows the date medium alternate, which shows the date but with the smaller picture than large timeline, which will show them in a timeline, setting down the page and masonry. And to get a good look of each of these, you can go to the Avada website and then just run through some of the layouts that they have on their website for blog's to get a good feel for what the layouts might look like in the different options that you can do for each of the styles, and then you can set your pagination type here. Basically, what this lets you do is you can either let the user see a load more button. They can scroll infinitely in each block. Post will load as they scroll, or you can have pagination on the page. So the Infinite Scroll does sometimes take a little longer to load because it's constantly pulling new blawg post. I like the load more button because then you can set, you know, to show maybe six blawg post and then let the user determine whether or not he wants to load more onto the page and similar with pagination. It will show you the 1234 and the user can click through for the load more post button color. You can change that here. This number of columns will set the number of columns in your layout. So for the grid, which we have said, they've selected three and then this is the space in between each of those columns. So the spacing hair is 40 pixels, and you could make that smaller if you wanted those columns to be whiter, then if you want equal height for each of your block post, this is a nice new feature. I have a lot of people who say, Oh, well, you know, they don't line up because you know the text is not the same or the image is bigger than one of the other block post. So if you turn on this option, then it will make all of the grid boxes the same height, regardless of how much content is in each one. So it just adds a little white here to make it even up with those two, and you'll see there nice and neat. So when you have grid or masonry selected, this text chatting for the grid will allow you to add a little padding to the top left, right and bottom. And then again, if you're using the grid, then you can align the text left, right, center or text flow. The bloke content display will allow you to either show the full content of the block post the ex ERT, which will set in a minute or no text at all, and just show the picture and the headline. I usually go the next CERP, and then I just control the amount of text that shown here. The next item is where you can set the length of the excerpt, which I have said to 80. You can also set it to strip the HTML from the excerpt. So the excerpt is pulled from the post itself. So let's say you have a title for your post, and then you have the post. And within the post you have some HTML settings, maybe there links or images or tags that you have set up. So this will strip out that HTML so that in the Blawg archive page here, it just shows the straight text. It doesn't show any HTML set up that you have included. If you want to show the featured image or the video on the block archive page, which they have here, they have featured image turned on. Then you say Yes, here. This layout month in your format took me really long time to figure out. Basically, each of these letters represents either the full month, the month abbreviation, the year, the year and two numbers. The day, the date. It's it's really interesting to kind of go in and play with, but if you click on this link here, it will give you all the information on how to format, date and time for WordPress, and then you can go in and you can play around with it by doing lower case Informa uppercase y for the full year, and maybe you want to add the day would put common j there. And so it just gives you a few extra options. If you're using a Blawg style that uses the date, then you would want to come into one of these options and change the date settings here. So the blog's single post is on the single post page. So if you have a blawg set up, this is your archive page. It shows all of your blog's post, and then if you click on one of the post, then this is your blog's single post page. So the options here will let you set up the layout in the styling for that one page so you can have it be 100% with Show the featured image on this page, which they have turned on, and you'll see the image shows up right here at the top of the post. You can show previous or next pagination, so if you turn that on, you would see that it will let the user go in and go back and forth. See, with the previous and the next Blawg posts that set up on the site. You can show the post title and whether or not it displays above or below the feature post image so you'll see here. They're using a page title bar here. If we were to go and turn this off, you'll see. Right now the title is below the image. Now we can change it to be above the image, or we can turn it off completely. So now it appears above the image for the meta data. This is going to be things like comment, count categories, author information. There are a lot of different items that are accounted as metadata, so you can show it. You can turn it off completely or you can tell it where to display. So here they're showing it below the article. So if we look, this is the author Meta, this is the date meta in this category. Meta. So let's say that we wanted it below the title than it would show up. Just blew the title where we had moved that to. If we want to show the author box info, if we turn that on, then that will show you all the information for the author, including their Gravitt, or you can see that right here. And if there was a bio with it, that would show here. If you want to show related posts, you see that they show up here at the bottom, and those are set in relation to the current blawg post through tags and categories, which I'll show you when we get into the blawg, and then you can turn comments to display on her off. I generally keep those turned off and then blogged. Metta is where we can control all the metadata and what displays on your blog's so you can turn it completely off, and then you don't have to worry about it, or you can go through and you can select them individually. So I generally turn off the the author meta keep the categories I usually like the comments off. You can add a read more link, which I think is helpful for the user but generally don't have the meta tags, and then you can change the font. And the date format for the meta information here is well, so the date format here is the meta data that shows here and then for the portfolio it's really similar to the block. The portfolio is also comprised of post, just like the blawg. Is there a few extra settings because the portfolio will allow form or images and descriptions, but generally it's very similar. You could do a grid or a masonry style for the portfolio. You can set the featured image to fix your auto, and we'll go over what the featured images when we build some of these pages out the portfolio archive number of columns. So if you want it to be, you know, three across on a page, just like their bloggers set up, you'd set that here. Columns facing like we went over equal heights. Number of portfolio items per archive page. So again, this go back to your archive page here. This archive page has three columns, and they're showing 10 on a page so you can set that on your portfolio, and you could be 5 10 However many want, I usually multiply it by the number of columns I have, so it ends evenly, so I would probably make this six or nine, and then the archive text layout. It will show you the text in a box or Unbox or no. Text it all on the archive page, which is your main page that shows all of your portfolio items. And then again for the text, display an excerpt, full content or no text form, and you can also said the excerpt length here again. Strip the HTML from the excerpt, and then you have a portfolio archive type display so you can show the title and the categories of the portfolio. So let's say your portfolio consists of Web design and print design. If you wanted to show what category it is that we show up after the title, you can show only the title. Only the categories were none left, right or center. Then you also have your layout padding so you can kind of adjust that for spacing, the same pagination styles that you have for the blawg and the load more post button color and then the portfolios slug. So let's say and you want your portfolio to be named projects in your URL. So let's say your you know www dot my website dot com slash projects is what your portfolio would be named. And then all your projects that came after that would be named slash project one you know, or whatever the name of that project is. So if you wanted this to be called our work or portfolio or, you know, artwork or anything like that, that's where you would put the slug for that page name there and then your meta data font size. You can set that in this field. And if we go back up to the portfolio single post again very similar to how the blawg was, you can turn off your pagination on the single post offer on for your featured image 100% with the title, so the project details is something that's different from the block. This will give you a header and some information about the details of the project, and there's a field on the project page toe. Fill this in if you want to show that you turn it on if you don't turn it off for your portfolio links. If you want them to open in a new window, you would just say on, and it would open it in a new window instead of in itself. For the comments, you can turn those owner off same with the author. The social sharing box. I don't know that we looked at that here on the bloke, So let's check that out. You scroll down to the bottom. You can turn this social sharing box on, and basically it allows the user to go and post this article to their Facebook page. So it's a good way to get your blood Poe story of portfolio pages out to different people. Two different users. Because, as a user, if I came in here, posted this on my Facebook page than my Facebook, friends would see it and kind of spread the word about your poster, your portfolio. So it's a good way to get the word out, and you can style this box, which isn't another option that will show later, but so you can turn that on or off and again with the related projects to turn those on or off. So that's it for those four about a theme options. Join us again for a few more options and how to stylized them for your website 12. Social Media, Slideshows, Elastic Slider, & Lightbox Global Options: the next item to review in the avada theme options is the social media option. So in this theme option, you can go in and set up all the links to your social media profiles and you'll see for this website. They've already set up their Twitter, Facebook, YouTube and INSTAGRAM links, so I'll show you how to do a couple more. So you click on the add button and you'll select this drop down arrow, and then you can select from any of these available social media sites. You can also do a custom or put in your email address. So let's say you wanted to link to your Yelp page. You would select yelp, and then you would type in the euro for your page on Yelp, and then it would show up in your social media profiles. You click save changes, and then you'll see it appear on your site. If you need to delete one, you just clipped the delete button and you can open and edit any of the other ones just by clicking on this, Plus everyone this site now to have your icons appear in the header, you would go through here and you would stylized them to be the correct font size if you wanted to show a tool tip, which is, basically, it shows the name Facebook as you have her over the Facebook icon. You can have it in custom colors, which will set here, or you can have it show up in the brand color, so the Facebook I can be a dark blue. The Twitter icon would be a light blue, and then, if you select custom, you can make your colors. You know whatever color you think would work well with your theme. And if you want them to be in a box as opposed to just the logo itself, you can turn that on here and then set up what color you want the box to be and the radius . Let's make that just a little bit rounded on the box corners. And then how much padding you want tohave between the icon and the boundary of the box. So let's do that click save and then we'll go on. We'll look at our website and you can see that the social icons are not showing up, and that is because you have to turn them on in the header setting, so you'll go back up to where the header is and then a header content and then you'll scroll down to where you want it to peer in the header content. So you remember we selected this layout, which has some information on the left in the top header and then some information in the right. So if you want it to be on the right, you would go to header content to select the drop down and then click social links. And now, when we go back to our site and refresh, you'll see that those new social icons appear here as a white icon and then with the black border with the 10 point radius. So, conversely, if you wanted to put your social links into the left side of that header, you would collect social links here and then they would appear on the left instead of on the right. So let's go back to social Media and we went through the header. Now let's go through the footer and this works very similarly. You can tell it to display them in the foot or here, and then you can set up the rest of the customization, just like you did in the header. And then if we go back and we look at the foot or you'll see that they're showing up here they appear in the copyright section of the Footer. You'll see that there also here on the page, in the Footer in the first column. But that's because that was manually added via the widgets. So if you turn on show social icons in the Footer, they'll show up in the copyright section of the Footer and then the social sharing box. We went over this a little bit when we're looking at the blawg set up. If you go to one of the block pages or portfolio page, you'll see this share. This article box appears at the bottom of the page below the post so you can customize this and you can set up the various social profile is you want to show. So to do that, you would just you could change share this article that you see right here you could have that read anything else she wanted. So share this news item. If that was a news item, the text color for the tagline can change that there and the background color. And then for the icons, you can change the size of them by changing the point size. If you want a tool tip to show up, you can say top right bottom left or none if you want the icons to be custom colors or brand colors, just like we did in the Footer, if you wanted to have a box color, if you want the icon color to be a particular color or to have a box just like we had in the others and then the padding and the radius. Now this is where you turn on and off the links that you want to show in that box. So let's say you wanted to not have what's app on you would turn it off there and maybe not Tumblr or Pinterest. And then you can also have your email link show or not show. Then if you click the changes and you went back to look at it, you come back here and you would see that some of these icons have changed and there's only five now, So if we go to the slideshow option, the slide shows display on the portfolio or the block post pages, and you set these up by creating various featured image for each post. And once we go when we build some of those pages, I'll show you how to do that. But basically, this just sets the options for the slide shows. I've set up a quick slide show here so you can see what it looks like as we go through it. It's just a very basic images, with a left and right arrow and some arrows down here at the bottom. So if we go back to the options you can have, however many items in your slicer shows you want. You can make it auto play or only play when the user clicks. The smooth height option will allow you to make the heights equal based on the photo image , So if you have a photo that's 20 pixels taller than another, it will make all the images the same height. You can change the speed of the slide show. If it's on auto play, you can show pagination circles below the video sides, so that's these circles right here, whether you want them on or off the navigation box dimensions or just the size of the boxes that the arrows appear in. So that would be these boxes here on the left and the right, and then the navigation aero size. You could make that era really big or really small, so that's pretty simple and just stylized is your slide shows. The elastic Slider is another slider style type that comes with the Avada theme. It's generally turned off because it's a bit older, and I think at this point, most users generally go for the revolution slider that we showed you earlier, the slider revolution or even the fusion slider, which is the newer version of their slider. But if you did want to access the elastic slider and build slides and use it, you would access it on the main WordPress menu here on the left, under elastics lighter. But to stylized all of the slide, you would come into this option setting, and you could set the dimensions whether it slides or centers if it auto plays and how fast that goes the width of the thumbnails that will display with the slider, the font size of your title and of your caption the color of the title and of the caption. So just a few extra settings here. The light box option allows you to stylized images when you click on them to pop them up on the same. So if you want your images to be clickable and then have them pop up to be larger on the site, you would turn this on. But if you don't want that, you turn it off and all the settings go away. So right now, let's turn it on and you can set whether or not you want the lightbox on single post pages . Maybe you do, and maybe you don't even turn that off there. You can control the behavior for the single blogger and portfolio post, and you can set whether you want it on the first featured image or only featured images for the individual post, and you can change the skin of the lightbox. So let me show you what that is. So this is the slideshow I had set up, and if you click on it, you'll see that it pops up into a light box. So the skin is this gray background that kind of has the darker lines through it. And if we go in here and we change that to be, let's save Metro White and click, save and then refresh, you'll see that the background for the slide show changes toe white so you can kind of stylized that to match your thing. You can also change the position of the thumbnails for the slideshow, so you'll see here, there at the bottom. You could change those to be to the right the animation speed of the light box. If you have it on auto play, whether or not you wanna have arrows in the light box, you'll see here that we haven't arrow on the left on the right, the gallery start and stop button. So if you wanted to start playing, you can have it all on or off. Those options are right. Here is the play. That's the stop, and that's the close button. You can turn on auto play for the gallery lightbox. You can change the speed of the auto, play the background capacity behind the light box, and you can turn on the title to display in the image of the light box. So this is the title here where it says Team four. You can also turn on the caption and the social sharing so you'll see here that it also has social icons here so that users can share this image. The deep linking will allow you to set up a link to another website and instead of linking just to the home page of that website you can link to within the website. So if you go and you create a post, which would be a blogger or portfolio item, and you have images within the page of that content area for that post, if you turn this on than those images will also display in this gallery. So right now I only have four images and they're all set up right here. But if I had created more information down the page and had put photos within, let's say the body text of this page, they would also show up within the gallery and then the slide show video dimensions. You can change those right here, and that's it. For these about a theme options come back to see how to style eyes. The next options for your website 13. Contact Form, Search, Extra, & Advanced Global Options: the next item to review in the avada theme options is the contact form option. So there is a template page already set up in the about a theme for your contact page to make it really easy to put a page together, and basically this information will determine what is shown on that page and and how it all works. So if you were to go to just a regular page set up, you would come over here and you would select the contact template from this side. This is something we'll go over when we create a new page. But if you select this, then these options that we're reviewing now or what will control the information on that page. So if you selected that contact template, you would put the email address that the contact form sends to in this field. If you wanted a comment field as part of your form than you would tell it where you wanted it to appear within the form so above or below it. If you wanted to add a check box for data privacy confirmation, you could add that here, and you'll see that it's on this page just a little check box with the disclaimer about privacy, and then you can change the information that shows up with that check box in this box here . So if you want to add recapture to your site, you can do that here. And recapture is just that box that appears at the bottom of website forms that says, I am not a robot or it makes you add up to numbers or check a box or something like that. So that's recapture, and this is the area where you would put in your psyche in your secret key for your specific recapture code. In order to get this information, you would click on this link, and it will walk you through all the steps that you need in order to get these two keys. And then you can change your color scheme of the recapture to either light or dark to match the rest of your theme. The next option under the contact form settings is the Google map. So again, this Google map setting here does apply to the contact page template. If you've selected that, so you are going to go and get your Google map, a P I key, which is now required in order to use the Google maps. So to do that, you would click here, and it will give you all the instructions on how to set this up. I'm not gonna walk you through that, because it does take a little bit of time and you have to log into your account and set up your account in that kind of thing. But if you walk through this link here, it will tell you exactly how to do that. So once you get your A p I key, you will just copy and paste it. Here. You can type in your address, or you can put in the latitude and longitude, which you can pull off of Google Maps. You can determine which type of map you want to be. A road map, satellite hybrid or terrain the size of your map, the top margin of your map so it doesn't but upto what's right above it. The zoom level that you want to start off with. So if you want it really zoomed in like toe road level, you would do a higher number and then zoomed out would be a lower number. If you want the pin for the address on her off, if you want it to animate, so what kind of bounce onto the page? If you want the map to pop up when you click it, you'll turn that offer on here. I usually keep that turned off. I find it a little distracting whether or not you want to be able to scroll with the zoom wheel. If you want to be able to turn on the scaling on the map, I usually keep that on because I always like to scale on a map. And if you want the zoom and pan control icons to display on your map, the next option is the Google Maps, styling and just like it says, this will allow you to style that Google map. There really only three options. The default for the Google map, the styling based on the same and then custom styling, which will allow you to add some color to the overlay See info box, which will give you even more options and then the content that's in the info box. The next about a theme option is the search page, so the search pages what shows up when you do a search using that little search icon in the top corner. So if we went in and we typed in Electrician, these were the results that we would get for that word. And this is what the search results page looks like. So there are a few options in order to style this page so you can have it show up in a grid format. It's basically the same formats that you have for the block, so you could have a large, medium, large alternate grid timeline, that kind of thing. You can determine which results actually get shown. So if you only want post types and pages, so items from your blogging from your pages you can do that. You can do on Lee Block Post shows your results you can have on Lee pages, so no Blawg Post would show up. So there few options there if you want to show the excerpt or not. And this is the ex ERT. There's just this little bit of text here. The number of search results for page if you want to show the featured images for the search results, so that would be this image here. And if you want the search field to be above or below the results or turned off altogether and this is the search results field here, I don't like it at the top because if you're looking at the site like this on your results page, it almost looks like it didn't find anything and want you to search again. So I would probably either hide that or put that at the bottom. The next about a theme option is the extras, and this has a lot of different little small items that don't really have their own section . So we're just going through these one by one. The's side navigation behavior will allow you to either show sub menu items on hover or on click, and I'm gonna show you how that works. I set up a test page that using the side navigation and you'll see I have a couple items here, and the second item has an arrow, which means that it has some sub navigation below it, so you'll see if I hover over it. It drops that down, and that's a quote. Pretty cool effect. It lets user see exactly the pages that are below this page. However, when you get 10 or 12 of these side knave sub pages, it can get a little disturbing when this whole thing is flying in and out. So you do have the option to just show those items on Lee when you click. So if we go back and we look at that and refresh the page, you'll see that it still has the arrow. But it doesnt hover, so I have to click it in order to show it, and it takes me to this page at the same time. So that's really a personal preference of how you want your navigation to work. I tend to like the click, but some people like the hover for image place holders. This is basically, if you have featured images on your blog's and one of your blog's post doesn't have a featured image set. So this will show a placeholder image, which is basically just a great image with that picture icon in the middle of it. For your excerpt length, you can determine whether you want it based on how many words or on how many characters I usually do. Words Word seems a little more logical, so you can set that here. You can also overwrite this setting within individual pages in the on page options for the dot dot dot This is something that displays at the end of your blog's posts so you can turn that on or off. This is a clickable link, so I do like to have it on to give users an option to use it. But some people don't like it, so you can turn it off. And if you want to show this so that there is more so that the user can tell that there's more information to come, you can actually turn the link on her off for it. So this is where you would do that for the avatar shape. If you have an avatar in the comments or the author info, you can make it square circle. If you want to have your comments turned on for all your pages or off, this would be your global setting. But again, you can override that on the on page themes. Settings. If you want to show your featured images on your pages, I don't usually have that on for pages because I would generally put the image on the page myself, so I have a little more control over it. But you may want to do that and then turn it off on individual pages for the social links. You don't generally want search engines to follow that link and index. It is part of your site, so I always turn on no follow so that the search engines don't follow those as part of my sight. And then, if you want to open your social icon links in a new window, which is a good practice, then you would turn that on here. So for related post on projects, these are the items that appear at the bottom of a post page four of your blog's where your portfolio. So if you look here, this is a single block post, and then down here, the bottom these air, your related posts, so this will style these. So if you want the title below the image or just to show upon, roll over, you would set that here. How many related poster projects you want to show the number of maximum columns, so this one is set up with three as you can see here, but you can make this five columns or six columns. How much facing is between each one the image size, whether it's fixed her auto. So if your image is a really tall and skinny or short and fat, it would either do a fixed size for all of them, or just let them resize automatically based on their shape. If you want them to auto play is a slide show. You can turn that on here and then set the speed that you want them to play. And then, if you want to show navigation, you can do that here. If you want users to be able to use their mouth scroll wheel in order to a scroll through those projects, you can do that here and then How many items scroll at a time. So if you have, let's say three columns and you want the user to be able to scroll three images at a time by clicking their wheel. You would set that to three here, so the featured image roll over are the images that show up in areas like this. So they're a bunch of different areas where featured images show up, but this is just an example. You can see it hovers to a darker color, and then it has a link icon on it, which will link you to wherever this photo links to. You can turn that off her own, so you don't see it at all. You can set the image, rollover direction or the style so they're set right now to just a fade. But you could also have that fade in from the left or the right. So if you go back and look, you'll see that now it shifts over from the left instead of just fading in. If you have a title turned on for your image, roll over. You can set the phone size here. You'll see the link icon has turned on. That's what we just saw. But you can also turn on a zoom icon for that as well. Let's go back and see if we turn on the search icon. You'll see now a search icon and a link icon show up. If you want the title to show up a swell, you can do that. You do have to set the title on that image, but this is where you would turn it off and on. If you want to show the categories for that image, you can turn that on a swell. And then, if you want the image icon to show up in a circle, you would turn that on here. And then you can set the Grady in top and bottom color. So if you wanted this to be something different from gray and let's say we changed it to blue and then maybe a dark blue for the bottom ingredient and click save and then go back and refresh, you'll see that now it's blue instead of gray, so you can really customize that to match your theme for the element color. This would just be the roll over text and the icon, so that would be white and then the color of the icon itself, not the circle behind it. So if you wanted the color of the icon to be pink and then go back and look, you can see how customizable this whole little area is. The next option is pagination. This is where you would set the pagination style for your blogger, your portfolio post. So it's pretty basic your box padding whether or not you want to display previous and next and then the phone size. The form styling allows you to customized the form without having to write code, and this is a great new feature. But this is really nice, because you can select the height of your input fields, the background color of your form, the text cole of the form. If you want to have borders on the fields, you can turn that on here and make it the certain width and color and then the radius of the form itself. Then you consent from two different styles, classic or clean, and this form would look similar to the form on the contact page they have right here. So if we went through and let's say we want to make the background color green, then you'll see that it goes in, and it updates the look of this form. Based on that color. The next option is the grid or masonry styling, so the grid is what you see on the block page. Let's go back to the main block page and you'll see that when this comes in, everything set up in a grid each in its own box, which is nice. The masonry isn't very different, and they don't have that set up on this site. But if you look here on the avada site, this is a masonry layout, and it's very similar to the grid. There's a few differences in the styling, and the images are big and different sizes, which is a pretty cool effect versus the grid, which is all very similar, just more Pinterest like than the masonry style. So those are just two different styles you can choose for your layout, so in this option you can select with the grid box color would be. And if we go back and look at our blogger, you can see that it just changes this background box color, the element color. So that would be the colors of the date, the timeline dots and then any borders the separator style. If you want to have a separator, you can turn that off, turn it on or change it, and then the separator color itself. And for the masonry items, this is very similar to the grid. It's for your blog's your or your portfolio or your gallery. You could just change your image aspect ratio, and this determines if the image should be portrait or landscape. So you get that cool effect like where they have here, and this is a landscape image. This is the portrait image. So then this masonry two by two with this allows you to set how an image will appear. It's similar to this option here, but it's in pixels instead of in a ratio. And then for the advanced settings, you have your code fields option. So this is where you would put your Google analytics code. If you had that or any other tracking code that you might have, you would just paste that right into here. And then if you have special job, script or other code that you need embedded into the header of your page, which will appear on every page of your site, then you would drop that in here, and sometimes that's good. If you have, like a pixel tracking code, you can put that in here, and this is for if you need anything added in before the close body tag. You would add that in right here. So for theme features, there's some various features. Again, this is very much like the extras page, but these air some about a specific features that you can turn off her own or modify here. So, basically, this is the network dependencies option and the way that about a set up, it has all of their dependencies turn on which I would recommend that you keep on. This allows for the page builder, the builder options and the theme options to have their dependency set. And then you can go through, and you can modify each of those as you need to. This will set your J pay quality as it comes in. It's set pretty high. I think that's a good setting. I don't think you really need to change that. So the smooth scrolling this is a pretty cool effect. If you we go and look at one of our pages, you'll see that we have just a normal scrolling bar here, and then when we scroll are mouse. The minute we take our finger off of it, it just stop scrolling. So it's a little herky jerky, so But if you go back and you turn on smooth scrolling and then come back to this page and refresh. You'll see that gives us a totally different type of scroll bar here. That's how you to comptel. It's on. But then is I scroll with my mouse wheel. It has this nice little you know keeps going, so it's very smooth, and it looks kind of pretty. If you turn on code blocking coding, this will let you write your code within the fusion builder code element on the page, and it will give you some syntax, highlighting and that kind of thing. This is where you return on the bottom mega menu. I think we may have already shown you this option in a previous lesson. This will allow you to turn on Nevada styles within the Revolution slider. I usually have that off because I like to set up my own styles and do my own thing and the slider. But this would be a good option if you wanted to use the avada styles. This option for the avada drop down styles lets you turn on a lot of styles for drop downs and select fields throughout the entire site. It says here you should do this if you experience issues with third party plug ins, so I would keep that on. So hopefully you won't experience any of those issues in the first place. These next ones or for CSS animations. I don't use CSS animations, but some of the demos that you important might. So I would definitely keep that turned on. And then, if you want it on or off when mobile, you can set that here and again. This is for image hover animations on Mobil's as well. Then it has some A P I script options. One for YouTube, one for video. They have those both turned on and then for the Google Map script. You definitely want to turn that on a few years and Google maps it's on by default. The two top script is the little arrow you see at the bottom of the page that lets you kick right back up to the top so you can turn that owner off here and then the fusion slider. If you're not gonna use that which is available right here on the left hand side, you can turn that off here saying, for the elastic slider, which is down here, I usually keep that turned off because I don't use it. Also icons thes air little icons that are actually a font, and they use them throughout the theme, so I generally keep those on. These are also the icons that you can add to your mega menu. The open graph Meta tags So open graph is what social networking sites use an order pull content off of your pages. So if you go to Facebook and you put a link to your website, the open graph tells Facebook. Hey, this is the image you should use when you're linking to this page, so I would keep that on. There are other plug ins that you can install that will let you have a little more flexibility when using open graph. But this will work pretty well within the about a theme. So rich snippets is the term used to describe some structure data that you can use within your HTML of your website, which allows search engines to better understand the information that is on each page. I don't use which snippets, but you can, and then this will auto pull information from your page and add rich snippets to your pages so it's supposed to help search engines better rank your pages on their search results pages. The next option is privacy, and this is a new feature. This has been implemented since the European GDP. Our privacy options came into play, so this just lets you set a couple options for Google phones. So this in beds privacy prevents embedded information on your side. Let's say from 1/3 party site from loading until the user gives consent that they're okay with that information displaying. So if you turn that on here, you can have a cookie expiration time, the embed tights that you want. So if you had a different in bed type, you could add that there background color and the text color for that message that you're going to see haven't played with this much yet. It's pretty new feature, but it's nice that they have this on here for the GDP are and then the last option is dynamic CSS and JavaScript. If you're not familiar with CSS and JavaScript, I wouldn't mess with this at all. I'm not super familiar with JavaScript, but this just gives you a few different options for your CSS and JavaScript within your sight, and that's it. For these about a theme options. Come back to see how to stylized the last three options for your website. 14. Custom CSS, Fusion Elements, Import and Export Global Options: the next time to review in the avada theme options is the custom CSS option. And when you look here, it's really just a big box where you can see some random code. And if you're not familiar with writing CSS for your website, then you can just leave this whole section alone. I'm pretty sure you can style most anything just by using the fusion same builder options that you see on this page. However, I have gotten in some situations where I needed to add a little padding or maybe a different color, and I couldn't find the option to do it or for some reason, the option wasn't there. So you can come in and you can write your own custom CSS toe, overwrite the original styling and then add the code here. So again, if you're not familiar with custom CSS and how to write it, you wouldn't really use this section. But if you have a developer who's helping you, it would be good to let them know that this is where they can add their custom. CSS to the website. The next option is the fusion builder elements which were going to come right back to in a minute, So let's skip forward and go to the import and export. This is an important one to know, because you can take your stylings from another of auto theme and import them into this thing so that you can start with the settings that you already have created in another site . Conversely, you can export your settings from this website and then upload them to another Avada website just by clicking. Download here and then go into the other side and importing it in there now, a couple of things to keep in mind. If you import the contents from another file here been, it will overwrite everything you've already done. So be very careful when you start to do that and make sure that something you actually want to do. Another tip would be that if you are getting ready to back up your site, maybe make some big changes to the fame, or maybe installed a new version of WordPress. Sometimes I'll come in here and I'll download all of my options from this download data file button and just keep that on hand. And that way, if something really bad goes wrong, with the site while you're doing an update. At least you have all of your settings right here in this one simple file. So once you got the site back up, you could just import them and all your settings would be intact. The next item on the list is thief fusion builder elements. And I say this toe last because there are a lot of items in here that we can go over. So basically, the fusion builder elements are the elements that you can add to your pages to add functionality or a little bit of interest each page. And as you can see, there are a lot of them. The majority of what goes on inside of these options or color settings, border settings, padding and that kind of thing. Let's go and look at a page real quick. Of course, we'll go over this again when we're building pages. But basically, if you click on this item that says elements, it will bring up a list of all of those elements. I just showed you on the theme options so you can take any of these and drop them into a page and then customize them to show this option on your page. So it's really nice about this, is that you can set them globally here to the color or the following tor the border size you want, And then when you add them into your page here, they just drop in the way that you've already set them up. So let's go through and let's look at how that works. I'm gonna add a button real quick. I'm just gonna put in a fake euro. This is the button text, and I'm gonna hit, save, and you'll see it appears right here and it's yellow. Let's preview that page and see how that button looks. So it's a very long button. It goes all the way across the page, it says, but in text and it's in yellow with white text. We then go back to the same options and we find the button element, which is right here. Click that to open that up. Now we can do a couple things in here. We can change the standard size where it appears right here. They have buttons span on, so this button s spanning the entire column with, So let's turn that off And then let's make it a pill shaped button instead of around. And we could change the font to be something completely different. Make it normal instead of upper case. And then we can change the colors here. And I really like to come in when I first start working on a site and set on my buttons because used buttons throughout your site pretty much on every page. So if you get this set up, then you're not wasting a lot of time customizing each button on the page individually. And if you come back and you decide you want all your buttons to be green instead of yellow , you update it in one place. We're just going to go in. We're gonna make these buttons different color and use the same color for the top radiant on my hover. Just gonna kind of flip them. And then the button accent color is the border divider in the text, so the text is white, so we're gonna leave that their accent hover. Color still stays white. You can change the border with if you want to add a border to it. But if we go and we save these changes, and then we go back to this page, gonna preview it again. Then you'll see now that the but no longer spans, it's pill shaped and has its green and has a green hover. So all those elements that we just changed change this button. It also changed all the existing buttons on the site. You can see this contact button used to be yellow in the square, and now it's green as well. So a really good thing to go in and do is when you're starting your website to come in here and set things that you know, you're going to use a lot like the button element, another one. You might use a lot of the checklist element. This is basically a bulleted list that has an icon to the left of instead of just a standard bullet so you can come in here and you can customize it toe look the way you want it to. So if you wanted to have a Nikon that's blue and let's say you wanted to have a circle behind it, you would turn it on, Then the circle color is going to be white. You can change the size of the icon right here to make it bigger if you want a divider line and then what that color would be. So if we go back and say that and then preview this page again, you'll see that now we have a blue check mark, which is the icon that was selected for this item with the White Circle for the bulleted list. And if we go into that page and we actually look at the on page styling So what we did was we selected that the any icon we chose would be blue. So they have a check mark selected on the page for this item. So if you wanted to change that, you would just come in and change it here to whatever icon you wanted it to be for this particular page. So you can't select the icon specifically for this element and said it globally. But you can do that on the page on an on page global element, which is pretty nice. So as you can see, there are a lot here gonna pick out a couple more and go through them with you. So the image before and after element this before and after. Element is a new feature that they've added, and it has a ton of customization that you can do, which is really cool. So basically, this before and after, lets you post an image a before image in an after image, and then they overlay on top of each other. And then you can have a slider that will let you go from left to right or top to bottom and show the before and after so you can come in here and you can set that up and let's say you're doing a dentist website and they're showing before and after pictures of teeth that they've capped with veneers you can set up if you want it to slider to fade the font size for the label. The color of that. If you want the label centered on the image, what kind of handle that you want on each image, The handle color. So there's a whole lot of options in here that you can do for each element that's available on the site. The person element is what you would use if you were doing, Let's say, a team page, a bio page for each team member. Then you can set a few various options, like the background color of the widget that has the person's bio information in it. Border color, style, color If you want the content left. Writer center. The section separator element is something you may want to set up, so as you go through and you're building your sections on your site, let's say you wanna a separator between a couple of the paragraphs. You can go in and set that custom here with the color and the border size, and then each time you drop it in, it will have the same setting, so you don't have to set it on page each time. For your social icon elements, you can set up your size if you want them to be customer brand. If you have the one custom colors, you would set your custom colors here if you want them boxed or not, what the box color would be, So this would be when you drop this element onto the page. This does not control the elements in the header in the Footer because you set that up in the header in the footer styling options. The testimonials element has a few different settings and they also have on page settings. So this would just let you go ahead globally, set like the colors in the speed of the loop. I believe you can only set the speed here within the global settings, and then if you want the order to be random or not, the titles element is one that you may want to go ahead and set up, since most your pages will include a title of some sort. This will style your H one h two h three all of those header tags And then once you have them styled here as you drop them in using the title element, then it will have these settings already precept. So if you wanted to have a separator, you would set that here, there a few different options. You can also turn that off. If you wanted it to have a separator color and then the margin of the title itself. You could set that here and then Once you do that, when you go onto the page and you select the element for title which is right here, well, you would have to do is set your title and tell it if you want it to be each one through 86 you can do some on page overriding here. But if you have it set up and you want that used throughout the entire site, then it would go in exactly as you have it set on this global page. So, like I said, there's a lot of different elements in here. Feel free to go through and modify these as needed. I do not generally go in and update these immediately as I'm working on a site. If I'm building something and I realize that I'm gonna need, let's say a progress bar element been, I may come back and do it, but I wouldn't want to go in immediately and spend a lot of time setting all these up when I may not ever use the pricing table element or portfolio element. So that's it. We've gone through all of the avada theme options. As you can see, there are a lot of different elements that you can go ahead and set up globally, which will really help in speeding up the building of your website 15. Building a Blog Post: next, we're going to review the post option and how you would create posts that will show up on your block page. So to get to those posts and see everything that you've created or to create a new one, he would just come over here and click on posts. Then I will show you every post that's been created for your blog's. They're a couple different items on this page that we're going to go over a swell. So let's say you want to display all your block post by title. You would click here to show them alphabetically. If you wanted to show by date to find your most recent one, you would click date. So date entitle allow you to filter based on the date and the title. If you needed to do something to all of these items, you could click here and it would select every block post, and then you could edit them all. Move them all to the trash. If you needed to edit one of them, you could just or let's say, two or three. You could do the same, and then you could do that option to them if you wanted to Onley show Blawg Post from October 2017. You could do that and then filter and then would show you only the ones that were created in October of 2017. So there a lot of different things you can do here to make it a little bit easier to find your posts, because once you get a few pages of them, it can get a little bit difficult. You could always do a search here for a post by using a keyword that's in the title, such as Light Bulb. And then it would bring you all the posts that had the word lightbulb in it like this one. But so let's clear that and let's clear our filter and do that again, and that will be back to all of our posts that are available. You can also see here it will show you how many posts you have, how many are actually published. An active on your site there, if you have any that are in the trash, will see another option here that says trash is well so there are a couple different ways that you can view your block post if you click on view right here. Then you could go to it directly and see what it actually looks like. If you click on edit or if you click on the title of the block post, it will take you to the editing page for that block post. They're a couple different options that you could do under quick edit. So let's look at those real fast so quick it it just lets you change the title in the slug , which you can also do on the page. You can change the date, so let's say you didn't want this to publish until next week. You would change it to next week. State. This shows you the tags that you can set within the page and the category that it's set to . So if I didn't want to go into the page to edit it and then re save it, I could just come right here and select it toe. Add to a new category, and then I can change here if it's published, drafted or pending review Now. Also, if you wanted to make this post sticky so that it's always the very first post at the top of your blog's archive, page. You would do that right here by clicking this box and then, lastly, if you want this page to be password protected, very simple to do You would come in here in your type in your password here. Or you can make it a private page. And then once you update when you go to that page, it will have a message that says this page is password protected and asking for your password. Before that, you could be the page. So a couple good options within the quick edit, which you access simply by hovering over the title of the block post. So let's go and look at this post real quick and you'll see when I work. A lot of times I will right click on the item and then I'll say, open in new Tab and elect to do that because I like to flip back and forth between things as I'm working. So you'll see me do that. A lot is just a right click to bring up the contextual menu and then open a new tab. So here we are on the edit page, and this shows you all the information about the page and how it's built at the very top. This is your title, and that's what shows up on the block page. And this is what the page jorelys built from So you'll see it's called troubleshoot electrical equipment and then you'll see right here. This is the link for this page, and the page name is troubleshoot dash electrical dash equipment. Now, if you decided you wanted this title to be this, but you wanted the page oral to be something different, you can click on edit right here, and you can say, maybe you wanted to add a new word to it like let's say for the month that we're in right now July 2018 and you could click OK, and then you'll see it updates that right there to at the July 2018 And that is now going to be your new page. You, earl, that's gonna come in handy down the road if you decide that you need to change a page name . If you do it here instead of trying to do it anywhere else on the site, then your menu buttons will update to point to this new page as well. So used to fault editor will take you back to the very basic with seaweed editor that comes with WordPress, so you don't really need to use that. This will come up standard with infusion builder for any post pages. As you can see here, that's what they've built it in already. They're a couple options over here on the right hand side as well. You can see the status of the page. It's published already, and you could change that if you wanted it to be a draft to a click right here and select draft for the visibility. It's public, but you could change it to private password protected or to make it sticky. You can see the date that it was published on, and if you wanted to change that, you could do that right here. And you would just select your new date and click OK, and any of these options when you click, edit and then you change it and click OK, you also still have to come here and update it before it will take effect. And then, if you wanted to move this to the trash, you could do that here. You can also do it on the post pages I showed you before. So there are a lot of options down the right hand side of the page, and you can see they have toggle errors. So as you go through it, you can close up the ones you don't use this frequently. You could also move. The ones you don't use this frequently is they're all dragon drop, so there are quite a few I don't use. This format option is something that is standard with all WordPress websites. And it's not something I have ever used on anything that I've installed because the themes kind of have their own set up. So generally ill wind that up, and I'll just drag it to the bottom of the page to get it out of my way. The categories are the sections that you can categorize each of your block post into, so let's say you have a news section you would want to create a news category, but let's say I want to create a new section, which is events. I could do it right here, and I just hit return and it automatically adds that event to the page and select sit for this block post. I can also add maybe press releases so you can do that as many times as you want, and this will stay as categories for your entire site. So for all of your blog's post, these new events and press releases categories will be available. You can also do this over here under the categories Tab show you that real quick. It's super simple. You would just do the same thing. You would say. Add new category. You type the name here. Let's say this is company parties. You don't need to do a slug. It will pull that itself. You can select a parent category if you want. I generally do not. I very rarely add a description or any tax on Amis and then hit. Add new category and you'll see it adds it right here for you. So then, if we were to go back to this page and refresh it, then you'll see that Company parties is now a category that we have available to choose. It did wipe out our setting here, but we're not gonna worry about that for right now. So tags are words that you can use to tag. Each of your post sometimes related content pulls information from the tags. Sometimes related content will pull the categories and relate the content to each other that way. So this is kind of a backed up setting for that. I don't always use tags. You can, and you can do the same as you did for categories, and you can add it right here. Just click add, and then it adds it. Here format is the one I said we don't use very often, so I'm gonna keep that closed up. So the featured image is the image that displays on the main blawg page, which is the block archive page. So let's go and look at that real quick. We're gonna go to the site and we're going to click on Blawg, and this image you'll see is the featured image. So this is the post we're working on right now. Troubleshoot electrical equipment and you'll see this little tiny image here at the top is the same as this image here as the featured image. So to add it, you would just click on the set, featured image and go to your media library. Select the image and it would drop it in here to remove it. You can just click, remove or if you needed to edit it, you're click on the image again. It would take you back to the media library, and you could set it there. What you can do on these block post is you can set up multiple featured images. You see they give you five right here, and it will create a slide show within your block post for it. And that's a future that we went over in the a lot of theme options where we set up a slide show and then in the theme options that lets you set the size of the arrows, the color of the arrows and that kind of thing. So this is where you would set up that slide show. Within this page. You can also control the number of featured images by going to the same options and determining how many featured images you want to display on each page. So those are the options for the right hand side. What you'll notice about this featured image is if I go back to this blog's and this is our post, that we're working on if I click to go and view that the featured image also shows right here at the top of the page automatically. So if you go back and you look at this post that were editing, there is no image that you can see here. It's just the text. So the theme automatically takes this image and drops it onto the page at the top right here, which is a real time saver, and add some interest to the page right away. So then there are a few other on page options We're gonna go through real quick. The comments is right here. This will show you if there are any comments associated with this block post, so there are no comments yet, but let's say you had a comment here from a site visitor and you wanted to reply to it. You could click add comment and then you could type in your reply. Here, click Add comment and then it would show up on the page or the Revolution slider options. If you wanted to add a slider to this block post, you would do it here, and you would do that by selecting this default dropped down. And if you had revolution slide templates set up, then you would select one of them from right here and again. These also allow you to talk with them, closed or open and drag and drop so that you can set them up the way that works best for you. I will generally take the fusion page options and I'll move them to the very top because I use them more often. And then I usually move the S E o option up because I use that next most frequently. So the Yost s CEO on page options that you see here this is pulling from the plug in that they have installed for their S e O. This is something that's totally different. So it's something that you would learn separately from Nevada. But it is a really good plug in to install, and I highly recommend that you do that for search engine optimization. So the fusion page absence is a really important one, and this works on block post and on pages. The options were just slightly different, so we'll go over them here and again when we build out a page. But basically it starts with the post options, and it lets you do on page settings here. So a lot of these you will have set up within the avada theme options initially. So you remember when we went through and we looked at the theme options and there was one for block. We set up our global options there. And then let's say you have a ah block post where you don't want to follow those exact same settings. You can come in here and you can change them on this page. So, for instance, if you didn't want that first featured image to show on this specific page, you could say yes, disable that image. And if we updated that, and then we went back and we looked at that bloke post that we were viewing a minute ago and hit Refresh. Then you'll see that that first featured image goes away. So if you don't want that image to show up, let's say you have a different image and you want it may be embedded into the text here. Instead of having it at the top of the page. You could come back in and you could do that manually within the page builder itself. Now, if you want to use 100% with again, that's something that was set up in the global options. But you could change it here to be yes or no. If you have a video that you want to in bed, you would do that here. If you wanted to change the roll over image icons instead of using the global setting, you could come here and you could say that you only wanted to zoom or you didn't want any icons on your rollover image. This is the link your L that will be used on the archives for the rollover link icons or on the image. If you don't have any icons that are turned on, this will be a default for the post girl. So you really don't have to do anything with this. If you want to open any links from inside this block post into a new window, you can do that here and then again, these air default settings that you have set up globally. But if you wanted to show related post or not, let's say you don't want them on this page. You would hide them. If you don't want to show the social share box, which we currently have turned on, we would hide that as well. Previous. Next, pagination all through info box, post metadata and the comments. You can set all of that on the page individually for each post for the sliders. If you wanted to have a slider attached this page, you would have that set up as to where you want it to appear above or below the header. You would select it from right here, and it gives you all the options of each of the sliders that you have installed on your site. So layer slider, fusion, slider, slider, revolution, an elastic slider and all those air available here. You see fusion sliders right here. If you scroll down a bit, here's the elastic slider, and here's the slider revolution so you can build in any of those options. And then once you have a slider built, you would come here and you would select which one you want to display on your page and the once you do that, then it lets you choose which slider if you want to blow or above the header which is another global option that you can overwrite here on the page. And then, if you don't want your slider to show up on mobile devices because it takes too long to load, or maybe the device doesn't support it, you could just have a static image here. That would be the fallback image, and you would just click to browse and pull it from your media library or from your computer. The page settings are right here, and that will just allow you to add padding to the top of the bottom again. This is a global setting that you would be overriding here, and it tells you right here that those of your settings that you have set globally. So right now we have 100 pixels for the top and the bottom padding for the page or the with padding. You could set that here if you wanted again. It tells you what the default already is. But if you want it to be wider or less, why you would enter that information here for the header? You could turn the header off completely for this page. There would be no logo or no navigation on this page. If you turned it off, you can set the width here, which is also a global setting. We went over earlier the background color, the capacity, the background image and which menu you would want to use. So if you have two or three or four different menu set up and on the block post, you wanted to use something different. You could come in here and select that menu from this option for the foot or on this page, very similar to the header. It's set up with the default options, but you can turn those offer on determining which options you want to be shown on this page . But the sidebars. You'll see that it's using the default blog's sidebar. I don't know if you got a good look at that, but here it is. It's got a search. Your recent post comments, archives categories, metta, another surge. So it's got pretty much every widget is already set up in here. If we go when we look at the widgets page, you will remember. This is where the sidebars air set up and each of these items that you see on this sidebar are set up here. So let's say we wanted to delete this search box because it's already appear at the top of the page. So I'm going to delete that and it's gone. And then let's say I didn't want the recent post because I have recent post down here, so I'm going to delete that. And let's say that instead of comments first, I want to show the categories first on the drive that up, all right, And then if we go back to the block page and we hit refresh, then you'll see that categories now is above comments and that we've deleted the second search box and the second post so really easy to update. Once you have your sidebar all set up and you included in the page on the theme options page, which you would do right here under sidebars in Blawg Post, you could turn on which sidebar you want to be included. So once you have that selected here and set up globally, it will automatically put that side bar on every page, and it will use the widgets that you have set here as the items for that sidebar. So it makes things a whole lot easier down the road when you do them globally like this, and then it just builds out the pages as you write the block post. So again, if you had a second sidebar set up for your blog's pages, you would select that here. If you wanted to do that on this page on Lee, and then you could tell it where you wanted sidebar one to be left, right or center and inside bar to would do the opposite. If you want sticky sidebars so they stay in place and they don't scroll along with the page . You can sit that here and the side or background color, which again, all of these you can do in the global theme options panel the background for this page you can set all that up here is well, and it's pretty self explanatory. So since you know that all of these options are in the Avada Global Options page, I'm not gonna go over every one of them with you. But I think you get the picture that you can do all of these on Page and these all of your own page settings Again. The page title bore, which we've gone over where you can just show the title bar on this page, your breadcrumbs, total bar text. You can even change the title bar text size here and do all of the different styling settings that you would need to on page, just like you can do in the global settings and then the import and export. If you wanted to take thes page setting, let's say you set up everything on the about a global themes settings. And then you decided that you want 20 of your different blawg post to use thes new settings that you set upon on page here. So what you can do is you can save those, and you can say special blawg page set up. Save those page options, and then you can go into the next blawg page that you want to look exactly like this one, and you can import those options just for this page. That makes it really nice. Let's say you start off with a particular set up for your blog's and then three weeks later , after you've already created 20 Block Post, the client comes in and says, Do all of these for this special event in this one style, you can come in and you can save these page options here and then import them into those pages to save you all the time of resetting all of these on page options independently. So that's how you create your own page options and set them up to be different from your global options. Now let's look at building a block post, and we're gonna do a quick overview here because I'm going to go over the page builder on the pages section. Basically, the way this works is that everything is set up within a container, and then within that container you have columns, and then within the columns, you have elements you can see that one is set up right here. So this container is blue, has a blue header, and you can see that it goes extends down to here. And then this is your column. You see, it says one by one here, which means it's just one column on the page, full width and then inside that you haven't element here, and then you have the option to add a new element. So I'm gonna roll this up, which you can also do here, and I'm gonna create a new container to show you how we do it. So if you click on the container button, it's going to immediately take you to this option where you can set up all your columns automatically. So it's really nice to be able to build quickly. You can set up individual columns if you just want to start with one, or you can say, You know, I really want my page to be three columns and just select the three by three Let's create the 1/3 layout. You just click it and then you'll see in this container. It starts with three columns set up in this container. So generally what I'll do is I'll name my container, which you can do right here. And we'll call this three columns because what happens is once you start building your page and you have 15 different containers, it's nice to be able to go in and quickly just know which one you're working on. So now that we have three columns in here, if you wanted to drop in an element, you just do that here, add some text, but save it Maybe in this one, you want to add an image and save it, and then maybe in this one you want to add a checklist. So it's really simple to go and add elements and columns into your blog's post if you wanted to stylized it a bit with more content. But as you can see here, all they've done is they've just added a text box by going on here and finding the text box to add. And then when you have done that and once the text boxes in place, if you hover over it, then you get the option to edit it, duplicated, save it or delete it. So if you click edit, it would just take you to a WYSIWYG editor like you see right here. And then that's it. This is your featured image here, so it's really simple to set up a block post by just dropping elemental into the page within your container, setting up the columns to style the page to look the way you want it to, and that's it. As you can see, it's pretty easy to set up a block post. It's a fairly basic procedure, especially once you have your layout in your global settings all put together. You had your image if you want one. You had your text at a few links in set your categories and then you're done. 16. Building a Page Using the Page Builder: Let's take a deeper look at the about a page builder and see how to set up a page using containers columns on page elements to find all your pages that have been created for your website. You'll come over here to the pages admin, and you can either click all pages, add new or just click on the pages, and then that will show you all of the pages that are included in your website. Now this demo that we install, it has quite a few pages that have already been created, and navigating two pages is very similar to how you navigate to post so you can click on the title of the page here to edit it. Or you can click the edit button you can hover over and find the quick edit link, which will give you the same options that you had for the Post. You can put it in the trash, or you can view the page outside of edit mode. So for right now we're simply going to add a new page and build it using the page builder. So we're going to click the add new button here. We could also click the add new button here. So now we're on a new page where we can start building from scratch. The first thing I normally do is put in a title for the page. Doing that automatically creates the euro for the page, so you want to name it something that has maybe some keywords in it or that's easy to find so that people can type in the URL easily, Let's say for this instance, and this is going to be the about page. So once you do that, you can see that a Perma link is created and it takes the title that you just put in and makes the oil for the page from that again, like it is with the Post. You would just click at it if you needed to edit that your URL. So we're using the fusion page builder here, and you can see that it loads right in. And what's nice about this is that does come up with some instruction. So in case you forget exactly what you're supposed to do first, you can always read through the on page instructions, and it will tell you exactly what you need to do so to get started, you add a container, or you can add a pre built page from one of their templates. So the process always starts with a container and then columns and then elements, just like we did with post. It also gives you a description of what each of the controls are, so the pen is at it. The page with the plus on it is duplicate. The disk is save. The trashcan is delete. The pluses add content. The backwards clock is history, states. The co tags, CSS and the Arrows are for collapsing sections. And then there's also a tutorial here so you can watch the video and it will walk you through exactly how to build a page, and then you'll see that down the page. We have similar options that we had on the Post page, the Revolution, slider, the use, Tesio and the page options. We also have similar items here on the right, and they all work just the same. There are a few differences that we can go over, so all the publish information is the same where you can edit the status, the visibility or the time that you want it to be published. You also have a preview button here. So once you've built your page, if you don't want to save it and have it go live right away. You can click the preview button to see how it looks first, then make any edits and then publish it live. But the page attributes they're a little different here in that you can select a parent page. So let's say this about us. Page needed to go below the about main page so you could select the parent page here. There are also a couple of templates that you can select, so 100% with will allow you to create a page design where the images go all the way to the edges, to the left and the right of your browser window. If you don't select that, then you may have some issues with getting your images to stretch all the way across like you want to. A blank page is just a blank page template. The contact page, like we talked about in the theme options, is the page that will show you a Google map and a form on that page by using their template ah, page with side navigation. How this works is that each page that you said it was side navigation has to be within the same family. So let's say we're creating an about section on Let's say it has five or six pages in it, as long as we denote that each of those pages belonged to the about section, and we set up each section with this side navigation as the template that we're using. Then WordPress will automatically grab the links in the navigation from each of the pages that appear here, and it will add side navigation in a sidebar for those pages. And I can show you that as we go through this, the order number here will allow you to set what order you want this to appear. So if you have six or seven pages in a section, just like we're talking about with the about and we wanted one of them to be 1st 2nd 3rd you could order each of the pages from here again, featured images like we discussed earlier, and then how to control how many featured images is here. So it's pretty similar, So let's go through some of these options on the page builder. So you have two tabs on your left builder and library. So builder just let you start building pages from scratch and library lets you pull pages or layouts from the template section. So right now there are no templates in the library, but there are some saved containers. There are no saved columns, and there are a couple of saved elements now. You can't drop these in right now because you don't have a container in place and elements have to go into a container, as do columns. But you see, on the demos tab, there's a whole home page demo that you could load in here if you wanted to. And this would load in the demo home page for Avada onto your page here, and then you could go in and edit it as you needed to. We're not going to do that quite yet. We're going to go and build a page first. There are a few other options on the right hand side. This toggle arrow will close up or open up all of your containers Once you have a few in place. This tag code allows you to add CSS to your page. This disk icon lets you save the template that you're currently building, so you could name this about page template and save it, and then it would show up on every page of your site. Said that later. If you wanted to use this exact same layout, you could just load it from a template and then customize it for your other pages. Delete would delete any of the containers that you had in here and then this history revision. It will give different options as you build the page so that you can go back and you could , like jump two different times when you have built out certain sections of the site, I'll show you that as we go through. So let's start off by adding a container and building a page, just going to click the container button Wish, then brings up this window where you have all these options, just like on the post. It shows you different ways that you can add columns to your page. You can also look at the library containers. There are a few things in here that you could go ahead and add in. I don't know what each of these look like because it varies based on which demo you have installed. But if you wanted to create your own libraries, you can do that. If you wanted to import some, you could do that as well. And these are already installed based on the demo that we had imported. So let's go back in and we're just gonna drop in a full with column. It's one by one, and let's see what we can do with this. So once it's in place, you'll see you have your container, and then you have your column inside the container, and then you have an option to add an element. So if we went and added an element, we get this pop up window that shows us all the elements that are available with the about it seem you can see there are a lot of them. Sometimes it's handy to come up here and type in what you're looking for. So if we're looking for a text box, you might do that, and then you'll get just the two options, which is much easier. So let's say we want to add in a text block then you'll just get a whiskey wig editor, and you can type in your text. Here. You can style it as necessary with gold metallic, you can change the text color. You can also change your headings here. If you remember when we went in and we set up our typography in the Nevada theme options, you might be able to select one of thes and just have it set to that style. Now this editor does not show the settings that you have created within your theme options . So, for instance, if we were using a sans serif font set up in our typography theme options and we selected it here, it does not necessarily show it to you in this with seaweed editor. So you do have to go out and preview the page in order to see that take effect. And then, if we wanted to add another element, we would just go back in and continue to do that until you've built out that container as you want to. We'll go over some of these other options in just a few minutes. So a couple things you can do with the container and with the columns Let's say I've started building out this page and I thought, Oh, man, I want this to be two columns instead of one column Instead of having to delete this and then at a new set of columns, you can simply come here and hover over the one by one. And then you can select 1/2 column, which will give you room for two columns on the page, and then you can either come down and say columns and then go find 1/2 column again. Then you have two columns on the page, or you can simply come here and duplicate this one, and then you have your second column. Now the way this comes in really handy with this duplicate is let's say that I've gone and created this left hand column, and it has texted an image, maybe a check box and a button. And I want another column that looks just like that, but with different content than I can duplicate this one and then just edit everything I have over here. And then all my settings will stay intact, so that's kind of a quick way to work and build your page. Don't forget we can always name or containers so that we may name this first container, so we know that that's what it is. Once we get a bunch of containers and have them rolled up, it's a lot easier to find them on another couple of containers so we can see how that might work. So now if we have them all rolled up, what's great is that we could shift them around if we wanted to Really easy to do that. And then, since they were all closed, you can see with this toggle. Now that we have three containers, I can open them and close them. How that comes in really handy is, let's say I need to jump down to the fusion page options. But now my pages fairly long and I'm scrolling scrolling so I can close that up and then banned. There's my page options right there, so it just makes navigating around on your page a little bit easier. So now that you know how to drop containers in how to label them and then how to move them around, let's look at some of the elements that we can add onto the page. Gonna delete these two, which is a Z Z is that and I'm gonna delete these columns and I'm going to make them two columns instead of four. And now we can play with the elements a little bit. So I just click on this ad element button and then it brings up the elements box. So there are a couple different things in here. The builder elements are all the elements that come with the theme. The library elements are elements that you can create. There are some that will come pre installed with the demo, and you can create them as you go along. The nested columns is really interesting, because this will help you get a really intricate layout. So let's cancel this and go back. So you see that you have two columns here. Now let's say that I wanted to split this left hand column into two more columns, so this would be two columns on this side and one column here have a click on Element. I would click nested columns, and then I would click the two column layout again. And then what that does is now. I have two columns inside of this and then one column here. No, it's a little bit hard to visualize, so let's put some text in there so you can kind of see how that looks. So these are the two columns, and then you see them here. But it doesn't really display for you. So let's go ahead and click preview, and you can see that I have one column of text here, one here and then this is a whole column here. Let's drop something in there so you can see it. If we go back in, preview it again, so you'll see that this is different because it's spans the full column and then these each fan half a column of the original column, So I know it's a little difficult to kind of see how that works. Let's put a background color in, and that will give us a little bit more definition for each of the columns. And then if we go in preview one more time. All right, So here's your left column. Here's your right column and then the two columns within Column one and the one column in column two. So that gives you a little bit better idea of how that works. So now let's look through some of the elements that we can add to each page of our site. But clicking on the elements button that brings up the elements window, and from here you can select any of the available elements for the Avada. Same now, there are a lot of these, and each of them has dozens of options to customize them exactly to your site. What I found, the best thing to do is when I'm looking for an element, and I'm not exactly sure what I can do with it or how Aiken style it. I always go to the avada site and look of the elements there, and then I'll get a lot of examples of how they might work. So, for instance, this alert, which is the first element if you go to the about a site and you click on elements and alert, it will show you all the different ways that you can set up the alert elements. So as you scroll down, you'll see you can have a red box with a red outline with red text and this icon or a yellow box with this icon And so there are a lot of different ways that you can set up the alerts. The look on your site if you needed to. Adam alert different, fatter borders, different colors. They can slide in and be animated, and then at the bottom of each of those pages, it will show you a couple of the different options and how to set them so it will walk you right through what each of the settings do for each of the element types. This is a huge resource as you're going through these and you're not quite sure maybe what animation direction means You can come here and then it will tell you exactly what what it will do as you said, the options for that setting. So if we go back and look, there are just dozens of these, so let's just kind of go through the avada site for each one of them and show you how they each work. So for the block, this is a nice element in setting up the blawg to pull on the various pages of your site. So, let's say, on the home page of the website, I wanted to have some blawg element in there and maybe the most recent two news posts. I would go to my page and I would drop in the block element that I would select the style that I wanted. Let's say we wanted the grid set up how many columns I wanted, how much space between each column and I would go on down the line, and I would customize it as I needed to. And then I'd click, save, and then you see it drops it right here into this left hand column. If I went and previewed that, it would show you the three columns and it's pulling from the block posts that I set up earlier. It even gives any pagination, which I can turn offer on. I consent. How many blawg post I want to show up. So it's a really powerful element that you can drop in to show different blawg items throughout your website. And if you look on the avada page, you can see a few of the different layout. So this is a grid layout. There's a timeline layout. I think this is the masonry layout. You can see they're all just a little bit different and you can customize them. Then again, as you come down here will show you all the options in different variations for each of them. So what you can do there with the block element, the button element we've gone over before? A swell. There are a lot of different ways you can use the button if we go here and find all the buttons. They're just hundreds of different styles you can customize. But again, I suggest you go in and you create your button for the site in your global settings, and they have auto theme. And then, if you need to on particular pages, you can customize it on that page. But you can see there's just unlimited colors, various sizes, different types, shapes, borders. I mean, it's the full gamut you can. You see the animation. You can have it animate in so rubber bands or shakes. So a lot of different things you can do with the button element. So it goes on down the list checklist, Code block. I would suggest that you take quite a bit of time and go through these elements because there's so many different things you can do and until you really get in there and play with them. You really don't know all the functionality that you can add to your site, which is another reason I suggest that you install a demo and play with that because it will show you some of the things that have been created within the demo that you could then do on your website. Now that we've gone through the page builder and the elements and the containers and how they all work together, next will look at a few other Avada features that will really save you some time when building out your website. 17. Creating & Using Templates Throughout Your Site: Now let's talk about templates and how you can use them to save time when building out your website. So on each page of your site, there are multiple ways that you can save or import a template onto your page every time you see this disk icon, that means that you can either save this element as the template where you can important a template into this element, so you'll see they're everywhere. Every item on here has an element to save its the little disk icon that you see. So let's walk through this and see what we can do. So in the black bar, this disk will allow you to save this entire page as a layout. So if you were to click this and let's say you wanted to use this page as a layout, you would just call it. Um, let's say about us page template and you click save template and you'll see that it will drop right down here. So now when you're on a new page creating something and you want it to look very much like this about us Page, you can load it to replace all the page content to inserted above the current content or inserted below the content. You can also edit the template once you created it, or you can delete it altogether. If we go down here to the container, you'll see the icon in the blue bar to save just. This container is a template, and it works very much the same way you click the icon, and now you can save the container. So, let's say top of about US page container. Now, what's really neat here is that you can save this global lease. So let's say this container had an element like an email address. So if you save it as global by clicking here now, any time that you go in and you've placed this into a page, let's say you place it into 10 pages of your site. In that email address changes, you can come back to the container and edit it. Edit that email address and it will update every container template, the choosing this to be that new email address so that super convenient. I've used that very often on my websites. When I'm creating repeating elements on pages, Save it is global, and then if you need to make a change. It updates every single one of them. And then once you come back to your page, you'll see the container that is set up is global. Now it has this kind of blue background, and it has this little global element behind it, which means it's the global container. So let's say you wanted to save an element, same thing. So let's say you wanted to save this separator. It's a fancy separator of some sort, so you would just click here and same thing you would save it right here. You can also save is global. Now you may be seeing as I'm going through these, that they're already a few in here. So there's a lot of container templates, and then there's a lot of element templates already created. So what we're gonna do now is we're going to go to a new page. We're going to use some of those templates and set up a page using them. So we would say new page. This is gonna be a template Test page. We're using the fusion page builder here so we can start initially by using an entire page template by clicking here and you see, the about US template is here. So if we were to click load, you can select any of these because there's no content on this page. So if you would just said replace all page content, you'll see it'll drop all of it in here now. What's nice about this is if I'm using this throughout my site and I want to use This is my base template. Now that it's on a new page, I could just go in and delete the containers of the elements that I don't want. So if I didn't want this teen section, I could just click the trash can. And now it's deleted, and now the page is slightly different than the other. And then I would just go through and customize each of the different elements on the page to make it work for this particular page. So let's say I wanted to add an element into this frame. I'll click the element button, then I go toe library elements, and then any of the elements that have been saved will show up right here. So I would just click one of those and you'll see now that it's dropped it in here. Looks like it's ah nested column element that has phone number in it. So we can do that as many times as you want. You could build your whole page out using saved templates. There's another one for a checklist. So let's say we wanted to add a container element. You would come down here to where it says container. Wherever it is, you want to put it on your page. So if I wanted it to come after this blue about us container, I would click here. Then I would go to library containers, and then I would find the container template that I wanted to use. Let's say dark curve up and then it just drops it in. So here's my new container. It's called section Separator. It was not called dark. Curve up within the template, and that's something you may want to keep in mind is to name that your templates really specifically, so you know exactly what it is you're grabbing when you go and put it into your site. But there it is. It just drops it right in. So that's a super simple way to speed up your building process if you have a website that has a lot of pages and you may use certain elements or certain page setups similarly throughout the entire site. So now that you see how you can really save some time and building your site by using various types of templates, next will discuss a few other ways to customize your site, toe look and function just how you want it. 18. Creating a Portfolio : Let's review how to set up a portfolio page and how to get your portfolio items to display the way you want them to so you can use a portfolio element to showcase your design projects. Photography services pretty much anything a ticket started. First, you want to create a portfolio post for each item that you want to showcase. To do that, you'll come over here to the portfolio section in the left hand bar, and you can either click on portfolio or add new. And that will bring up the portfolio post page. And you can see here that there quite a few that have already been created. You can also create a new one by clicking. Add new here or add new here. So let's go in and look at one of these portfolio items that's already been created and see how it's set up so you'll see that portfolio items air set up similarly to how you set up a page. You use the fusion builder, and then you just create the different elements of your portfolio page and how you want it to look when you use your lands on it. They have a lot of information in here. They have their headline and intro text, a divider service information, etcetera. It's It's a pretty long page that they've created here, but the main thing to remember is that in order for it to show up properly on your portfolio page, where all of your items are displayed before the user clicks through, you want to be sure that you have it. A featured image set, which you'll do right here. And we'll do this the exact same way that we did for Blawg Post. You simply click on set featured image, and then it will take you to your media library, where you can search for an image to upload. And then again, you can select categories for your portfolio items. You can add new categories here, just like we did on the block. So when sets done you a quick update to save. This is a portfolio post, and then what you would do is you would go to a page and you were dropped in a portfolio element that would grab all of your post and put it onto a page. So let's go look at their portfolio page real quick. Their pages called work, and it shows some of the work that they've done. And you can see they just have it set up in a bit of a masonry style. And this is the Post. We were just looking at energy survey job, and then these were the categories on that page, and you can see if we go back and look at it. Those are the four categories it's pulling, and that's the image that you're seeing here on this page. It also has the rollover that you've probably seen before and a link and a magnification icon. So all of these things are customizable, so let's go look at that on their portfolio page. So this is the page for their work. You can see here it's their work page, and they have it set up with a headline and a separator and some colors in that kind of thing and then hear their latest projects. Right here is the portfolio element that they've dropped into the page, and to do that, they would simply click element, find the portfolio element and drop it in. So if we click on the pin icon, we can go in and see what their settings air like. So, like I said, they haven't set up in a masonry style using the default text, so that would be whatever set up in the global settings. And again, anything you do here will overwrite the global settings in the about a theme options. And then they set up number of columns, spacing and all those kinds of things. They've also determined that they would like the text centered, some padding or not padding. You can also turn often on filters, and what that will do is if you have a bunch of different categories on the portfolio page , it will show each of those categories, and then it can filter the portfolio options based on those categories. So we're going to just say yes and I'll show you what that looks like. So there are a lot of different options on here and again. All of these air also in the avada theme options, so you can set them globally or you can change them per page. So let's click, save and Update and then go back and see those filters on the portfolio page. We'll click, refresh, and you can see now that this far appears, and this is each of the categories that they have in their portfolio. And if you click on one, you'll see it kind of shuffles all the different items, and Onley shows you the ones under that category. So if we click around, you'll see it changes just based on what categories air associated with each portfolio item . So that's a nice feature, especially when you have, you know, possibly hundreds of different items in your portfolio makes it easy for your user to see only the items that he's interested in. So it's very easy to get this portfolio going. The work really comes in and creating each of your portfolio pages so you can see, whereas this might take a little while to go in and build each of these pages. But again, if you go in and you set up one portfolio page the way you like it, you can then create a template from this page by clicking the safe page layout icon and then that will let you build this template, and then you can go and say add new and then you would load in that template, and then you would just make the edits for that page, so that makes the work of much faster and help you build out your portfolio really quickly . They're a couple other items over here. Portfolio categories is very similar to the block post categories, where you can set them up either on the page and they show up for every single portfolio post. Or you can set them up here on a whole different page, and again they'll show up on all of the portfolio. Post skills and tags are very similar to categories. There's just a different way of tagging each of your portfolio post so you can set those up if you'd like, and that's really it. It's pretty simple to get this going, so you just kind of have to dig into it and get all your items into the portfolio and then on the page where you want to set them up, configure your settings so that they display the way you want. And now that you know how to set up your portfolio, let's go look at a few more options that we have left to review in the about a thing 19. How To Build, Edit, or Remove the Navigation Menu: now that you know how to create pages and how to create post for both your blogging your portfolio, let's talk about the menu and how you can add. Remove and manage your navigation minutes, so define your menus. You'll go over here to the left hand bar and under appearance. You see minis and this controls all the menus on your site. So let's just start at the top. This managed with life preview button will take you to the customized area where you can manage your menus through the customization panel. I don't like this panel particularly so I generally don't use it. But this is an option. And if you like this option better, you would just click that manage with life preview button, and that would bring you here. And then you could set your menus in this area. We're gonna do it through the main menu customization panel and work with that up in the top, you'll see the screen options menu and a help the help drop down. We'll give you some information on how to manage. The menus had edit the menus and then a link to the documentation. The screen options dropped down will give you a few additional options for the screen that you can use for creating your menus. Now this screen option appears on every page of the site within the admin. So let's say you went to the post page and you clicked on screen options. The options would all be different, and they would all relate to the items here on this page. So it's really easy to use this. You could turn off for on any of the items you'll see. This tags here by turn tags off the nets, turns it off down there. So it's just a couple extra options for any page of the site. But if you were to go back here to menus and it clicked on screen options and you turned a few of these owner off. Most of these options show up within this menu structure here, so if you have these closed up, you may not see them turn on right away. I like to be sure and turn on link target. This will allow you to link pages in your menu to a new window. So if you wanted to open up in a new tab, then you would want to set your link target, so I go ahead and turn that on. Now you have two tabs here. One is edit menus, and one is managed locations. So edit menus is what you see first on this page, and basically that allows you to edit all the minis on your site right here. The managed locations. We'll let you set what menus you want to show up in which area, and it really depends on the theme you're using. But in Nevada there five different places you can set menus to be assigned. You can also use menus and other places like via widgets and inside bars. But you can also set up a location for all of your menus on the Edit Menus page. So let's go back to the edit menus you'll see here. The first thing you have is selected menu to edit, and this will show you all of the menus that you have set up for your website. Within this drop down many any time you have a main menu navigation or whichever menu is set up for main menu, it'll have main navigation here, so you would just come here select them and you want to work on hit select and it would load here if you wanted to create a new menu, you click create and you would give it a name and then you would build your menu from there . So for now, we'll work on this one, and then we'll go through and will create a new menu so you can see it has the menu name Electrician's main menu, which is the same. It's here on the left. You have a sidebar that has a lot of different options that you can see pages is the main one that you work with as mostly. We wanted to add pages to your menu. If you wanted to add specific posts. Let's say you had a blawg post that you wanted to put within the main menu. You can come here and I'll show you all the posts that you've created. You can just choose one click, add to menu, and it will add it over there saying with portfolio in the FAA cues, you can also add sliders specific sliders to your menu so custom links will allow you to add links to your menu that may not appear on your site, so it may not be a page or post or category. So what you would do is you would turn down this arrow and let's say you wanted to link to your donation third party software that it's hosted on a different site. So you might come in here and type the donation page link and then what you want the link text to be. So this is what will show up in the menu, so we might call that donate now, and when you click, add to menu, it will add it to the menu. So basically, when you click add to menu, it just drops that menu item to the bottom of the list. Now it's really great about this menu. Is that all you have to do is take it and drag it wherever you want it to live. So if I want it here or here, Or maybe I wanted to be a sub page, I would just kick it in one level, so that makes it really easy to move items around in the menu. If I wanted to go and move about to be the second item in the menu and I would just drag it up here, and it drags all of its sub items with it, so you can see here the menu structure is home about services work, blogging contact. So basically from top to bottom is left to right within your menu navigation. So within each of these menu items, there are quite a few different options that you have when you turn down this arrow. So let's look at the about many item and if your about page is named about, But let's say within the menu you want it to be called about us, then you could just change that right here, and it will change your label for the menu but doesn't change anything on the page. The title attribute is just a little extra information about this item. So, basically, if you have her over the about US menu item in your navigation bar, whatever you type in the title attribute may pop up is a tool tip, so that is supported in some browsers and not in others. So if you wanted it to again say about us as the tool tip or click to learn more, you could do that and that would pop up is a tool tip. Now, if you want it to open in a new tab or a new window, you click this check box. And that is what I did here when I said link target. You see, if I turned that off, it goes away. So I wanted to open in a new window. So I selected that box. And then if you want to move it by clicking these buttons, you can move it up one and then you can move it down one. So just a couple different ways that you can do that. This will show you what the page was originally called. If you hover over it, it will show you the link down here in this bottom. You can't see it until I'm on it. But in that bottom left hand corner, you'll see it gives you the link. Then, if you wanted to cancel your changes, you click. Cancel. If you wanted to remove this menu item altogether, you would click remove. So there are also some options within the Avada Menu options button, which will allow you to do a couple cool things. So let's look at those. So once I'm in the of autumn menu options that will let me do a few different things. And basically, what you can do in here is kind of make that one menu items stand out a little more from the others By making it into a button. We're adding an icon to go along with it. So there are a few different settings in here that you can create your own special custom looking button for the menu item to make it stand out. And that's exactly what we did on the contact button. If you remember, we made it into a green pill shaped button so it would stand out more from the other items on the menu so you could go through here and you could set up a menu item to be a button or to have an icon or to show only the icon and, of course, to show the fusion mega menu at the bottom. If you wanted to do that, you would click on here, then give you a few additional options to set that up, and then once you have your menu, said the way you want it to be you would scroll down to the bottom and you would tell where you want it to be located on the site. So this is the same as what we went through up here with the managed locations. These also worked. So if you just wanted it to be navigation for the sticky header because you want that different than the main navigation. Or if you wanted to be the top level navigation, which is the small board that runs across the top of the site for your mobile menu. So you have a few options here. You can also create any menu and then use it in a widget toe added to different places on your site. And then, of course, when you're done making all of your changes, you would click save menu, and then that would save this money for you. So let's create a new menu real quick. It's pretty simple. He would just click, create new menu, and you would name your menu and hit create, and then you'll see you have no items in your mini. So what you would want to do is you would want to come over to your pages where your post, and you would want to find the pages and then click and add to menu so they would adhere. Now, if you've already just created all of your pages for your site and you want to put all of them over there, you could hit, select all and then add too many at all of them over to your menu. There are a couple different tabs, different ways that you can find your pages. So most recent view all will show you all the pages in alphabetical order, and then you can also search. If you're having trouble finding your page, you could do a search for it here. I generally do view all I like to work alphabetically. So if I wanted to put the about in the blogging, the contact items to my menu do that and click add to menu. And then maybe I want the block to be last, and maybe I want contact to be below about and then that's really it. And then I would select where I wanted it to live. Click Save and that's it. It's as easy as that update and to add new minis to use on your website 20. Build Sliders Using the Fusion Slider: Let's talk about using the fusion slider feature to build sliders for your website. So before you can use a fusion slider on your site first, you needed to create a slider for your slides to sit inside of. It's a little confusing because the words are so similar, but basically the slider is what holds all of the slides that will display within the slider over your site. To start building a slider, you would go over here to the left hand side bar and click on Fusion Slider, and that will bring up the fusion slider page. You can see there are a couple options here. One is add or edit slides, Add or edit sliders or exporter importer. This export import will let you either export your current slides so that you can use them on another website or import slides from another site. First thing you want to do is to add or edit a slider, so this is the item that houses all of your sides. So basically, if you wanted a slider on the home page, the about page in the contact page you had had three sliders, and within each of those sliders you would have multiple slides. So let's walk through this. I'm going to click on at her at its sliders and you'll come to this page where you can see we have one test slider set up. We're going to build another one here. Let's call this slider test Now. The short code will pull on its own. You don't have to create one here. You can set the slider size. I generally keep it this size until I haven't inserted into my page. And then if I feel I need to adjust it to be taller, I could do that. Slider content Max with will constrain your slider to within a certain width, but you can leave it blank, and it will just default to the site with. If you want your slider to fill the entire screen, to fill top to bottom and left to right will take up the entire viewing area. You can click this so when you use the full screen slider, it takes up the entire page in. Your user may not be able to tell that there's something below it, so you can add it on indicator to your slider to show that there's something below it, so sometimes people will put the scroll down indicator on it. Some will put pagination circles etcetera. If you want to change the color of the indicator, you can do that here by putting in a hex code. If you want your slider to have a pair Alexe scrolling effect, you can click here and then what that does is the image stays still in the page rolls up above it. So it's an interesting effect. I found a little disconcerting. I don't generally use that if you want to display the navigation arrows on the left and the right so the user knows they can click through. Check that box. This will allow you to change the box size where the navigation eros it, and then you can actually change the size of the arrow itself. If you want to auto play the slides on your page, click this. I generally do. If you want it to Luke, you can turn that on. I generally like it to Luke. You can order your slides by date or by descending or a sending order of the sides. You can have it animate or slide in changer slides to show speed, change the speed of the animation between the slides. So as it fades or slides from one to the next, this is how fast that goes. The response of typography sensitivity means that as you were reviewing the slider on a smaller device like a mobile phone or a tablet, this is how quickly the text will respond to re sizing. And then the minimum fall in size factor will determine the distance between the headings and the body type by this value that you put in here. So once you've done all those things and you've got all that set up, we're going to click. Add slider here and then you'll see it appears right here. Slider text. Now, if you needed to edit this at all, you can come back to this page and click at it quick, edit it, delete it, view it, or you can actually duplicate this. So if you create your slider and it's exactly how you want it, you wanna add it to another page and you need to create a second slider. You could just come here and click clone, and it would duplicate it for you. Now that we have the slider test set up. Let's go and create some slides to go into it. So I'm going to click, add or edit slides here, and then I'm going to add new slide. So this is set up kind of like a page builder. You just go in and you fill in the blanks. It's fairly simple, so let's say slide one for slider test Now here you can choose a couple different background types. You can use an image for video, or you can use a YouTube orbit video link. So the image one gives you all these options that you see below. But let's take a look at a couple of the other options. Let's say you had a YouTube video you wanted to put into the background of your slider. Once you do that, you get a few extra options. So your video I D. Is the bit that comes after the YouTube dot column mural. You drop that right in there, you can change the aspect ratio, but it will keep the default of 16 to 9. So I generally just keep that video display mode. So if you select cover, then it will just fill the entire slider area if you use contain than it will use the hype than with to determine how much of it fits into the slider. So cover will kind of cut off some of the edges and top and bottom to make it fit completely. If you want to have a color overlay, let's say your website seen color is blue. You can add on overlay to it. You commute the video auto play the video, Loop it. Hi, the controls, etcetera. So it is quite a few things that you can do. So you have similar features for video, and then self hosted video is just wherever it is hosted on your FTP server. So if you wanted to upload, let's say you have an MP four video and you didn't put it on YouTube or Vimeo. You can just click here to find the video and uploaded here, so let's go back to the image and let's look at the image settings. So if you select image, then it just goes straight into asking about your content. So if you want your content left, right or center, you would select that here and this is the text that's going to be as you're heading. So let's say, um, this isn't amazing, Flied. That's gonna be our heading. Now you can have a separator below it between it and the caption. If you want to have a single solid line, you can pick the title size based on your theme setting, so I'm gonna choose an H one title. And if you decide you want an H one title tag, but you want the font size to be different than what you already have, you can type in a phone sized here. It will show you what the default is set up in your theme options right there, which is super handy, So let's make it a little bigger. Let's make it 75 pixels. Then you can choose the heading color. The default is white, which you can see right here, but let's say you wanted to be a different color, and maybe you wanted to be black. You can talk that there. If you want there to be a semi transparent background behind the text, you can choose that here. I have to do this. If the images that I'm using might be a light image for one side and then a dark image for another side. It might be hard to read the text so you can add this little semi transparent background to it. Or if you want a background color, you can do that. Here is Well, then, the caption is the second bit of text. This is gonna be slightly smaller than the header, so you can put your text here and you might want to say yes, right? This is an amazing. So if you want a caption separator, you can do that here. I'm gonna leave that blank again. You can choose your H level tag that you'd like to use and set up your phone size. I think 24 is good. If you want your caption color to be a particular color, I'm gonna leave. It is white. That's the default. Do you want a background or background color now, down here is where you can set your links settings for each slide, and you can do this individually for each slide that is in your slider. Sometimes you may want to add a button, and if you do that, you can see that the default has some short code and here for the button, so this looks a little complicated, but if you walk through it, you can read this perfectly fine. The fusion button link would go right here in between those two quotation marks. So if we had a page called about us and that's where we wanted it to link to, we were just type or Lincoln. There. The color is the default color of the button that you set up in the theme options. The size of the button. You could type here, the type of button, the shape of the button, like if you wanted it a pill or square if you wanted to open within its own window. If you wanted to have a title within the metadata. If you wanted to add ingredient colors, you would put into different hex colors here. An accent, color, accent, hover color. So there a lot of different things you can do. You just have to read through here and figure out what you want included in this short code , and then you can go in and change whatever is within the quotation marks to be yes, no color, etcetera and then down here, the very last thing. This is your button text. So you may want to say click to learn more. And then if you only want one button, you can completely delete this or you can customize it as well said that there was a second button and then you could change all of the different information in here. So maybe this is a red button, and this is a green button just to differentiate. I'm gonna kill that for now. And just have the one button now. Two very important things you need to do. You have to come over here until it which slider the slide belongs to. So I'm going to select Slider test because that's one we're working on. And then to set the image which we selected here for the slider. This is where you do it. So when you used video, you put all your information here right on the page. But if you select image, you come over here to set the image. So we're going to do that. It's gonna take us to the media library and then within the media library. So I'm going to pick an image and I think I used black text, so I'm going to use an image that's a little bit lighter. Hopefully will show up on about this one. Click set featured image. You'll see it shows up here you have your slider selected. I'm going to hit publish, and that's it. So now you've created your slide. So what you would do is you would go back through when you would create two or three slides . You would select each of them to be within slider test slider. And then when you placed this slider test slider onto a page, all the slides that you have categorised within the slider test will display on that page. So we're going to add the slider to your page. So let's just give us a title. It's called us Slider Test page, and you can see that we're using the fusion page builder again. So there are two different ways that you can add a slider to your page. You can add it using the fusion page options, or you can add it within a container. So let's start with the page options first, and if you remember, you'll just scroll down here to get to the Fusion Page options section, and then the very first have in that section is the sliders tab. So you come over here to the slider type, and since we just created a fusion slider will select that and then select the Fusion slider to insert into the page. And there it is, right there. Slider test. Now they're a couple different options. You have the default option, which is to place the slider directly below your header. You can also change that here on page to be above. I generally keep it on the fault because I generally set that up in my global settings now for the fullback image. If, for some reason your slider doesn't load or if they're on a mobile device, you can set a fallback image here. So generally, what I'll do is I'll use the first image from my slide and use that as my fall back. So I'm going to go select that image again, and there you're all set. So if we come back to the top of the page, you'll see now that this has been added, Fusion Slider tells you exactly what it's called Slider test and from here. If you needed to make a change, you could click to edit the slider itself, to edit the slides or to remove this all together. So let's take a peek at what that looks like gonna save the page, and then we'll go and view the page, and then you'll see there's our slider. So if you remember, we had black text is the header. White text is the caption, a pill shaped button that won't blow it with Click to learn more that we also had these semi transparent bars or colors behind the header and the caption. So that's how that looks. So if we had multiple ciders, you would also see the arrows on each side so that you could click through and see the timing, that kind of thing. So if we go back to our page, let's add the slider within a container. So what this will allow you to do is to add it anywhere within your sight. So if you wanted a full with container, we could add it there. We would just click on the element button. Once we've added a column, we would go to Fusion slider, select the slider which has already selected here. You can have it turned off her on for mobile click save. Let's go preview that again and then you'll see it's added it again with it in that container. So this is the one that's added under the header via the page settings, and this is the one that was added via a container. And what happens if we go in? And we change the size of this container to be 1/2 column instead of a full column sub? Take that and then go back and look again. Then you'll see it actually constrains it to the left side column. So this comes in really handy. If you wanted to, maybe make a quick little slider to attract some attention, and maybe it lives in the sidebar of your page or next to an article or a blawg post, so just know that you can add it directly into the page within a column to make an interesting element within your page. You can also add it here in the header of your page. Let's see what would happen, who went back to the page settings, and we changed it to be above the header position. It's Click update, and they will go back to our page and refresh, and now you can see that the slider appears above our head. Er, this is an interesting effect. Once you scroll down past it, you'll see how the header sticks to the top still. But when the page loads the sliders of the top, and that's just something interesting you could do to give your page a little more visual interest. So that's really it, adding a fusion slider to your side of super easy. All you have to do is customize some of the settings, the short codes, your fonts, that kind of thing, and then you can add some really great visual interest to any of the pages of your site. 21. Creating & Using Widgets: next, let's talk about widgets and how you can use them to add functionality to various sections of your website. So which it is basically a little section that you can add within the page or within a sidebar within the footer of your site and you build them on the widgets page, which you confined over here in the left hand bar, under appearance and then widgets. So again, just like we used with the menu, you can manage it with the life preview, which I tend not to do. I prefer this screen, and if you want to add a widget to a currently existing widget panel, you can do that here by selecting one of these items initial. See, there are a lot of available widgets that come already created with Avada to help you add in functionality without having to write a bunch of code. So they have a few things, like your Facebook page plug in or a contact info, which it where you just drop in phone number, address etcetera, and it creates the layout for you. You can do a banner ad, an author area. You can create a horizontal menu and a vertical menu. They have one for each. You can create a tab section, an area for your social links, a flicker, feed a Twitter, feed a calendar so you can see there are a lot of different things sitting right here, ready for you to use. One that I use a lot is text, because if I want to just add a bit of text and let's say a sidebar or in the footer, that's a really easy way to do it. Another one I use a lot are recent Post. I might use that on a blocked page sidebar. So when you decide to build a widget, you may want to look first and see if there's one that's already been created for you. Before you go and put one together by hand, let's see how we could add this to an existing widget area that's already been created. So let's say we wanted to add something to the Foot or Widget three, which is the third column of the Footer. I'm gonna open a page years we can kind of follow along with what we're doing, so you'll see. The footer has three columns, and each of these is controlled using a widget. So if we're going to add something, let's say two right below this badge. We would do it through the widgets, and that would be on foot a widget. Three. You can see their accreditation, which it is right here. And let's say we wanted to add the social links to this as well. We would drag it over here, and you can see it gives you a bounding box where it's going to drop. Conversely, you could also simply go to the social links, click it and then tell it where you wanted to add, and that's probably an easier way to do it. If let's say your pages really long, we do that. Click add widget and it'll drop it right in there so you can rename the title. You cannot have a title at all. If you just leave that blank, it won't add a title area. You can add a link target, so if you wanted it to link to the same page and just refresh that page or if you wanted it to link to a brand new page, you could say blank, and that would link it to a new page or a new tab the size that you want the icons to be. You could change that based on pixel size. If you want to use custom colors or brand colors, let's go ahead and use brand colors here if you want the icons boxed or not. If you want a tool tip. I don't generally like a tool tip, so I must always turn that off. Show custom icons were going to use the brand icons their use, same option links yes or no. And then you can go through and can just add the link to each of your different social pages that you want to include. I'm just going to do those four, and you can also add an email address like to the social profile, if you'd like. Now they're a few different options if you click the about a widget option button, and it will just let you do things such as controlling padding around this widget set a background color. If you wanted to have a color behind it, said the background radius. Let's say if we wanted it to be 15 pixels, so it's a little bit rounded, maybe a to pixel border that is solid and is white Now, the content online. It'll either inherit from the widgets already, and or we could say that we wanted it to center and on mobile. We also wanted to center. We're gonna hit, save and save there once That's great out and finished saving. We're going to go back to the home page and refresh and see what that has done to our footer. You can see it looks really terrible because I've used brand colors against a paint background, but you get the idea so it has a pink background for this widget, and it has a radius of 15. So it's curved with a white border, and then it has the four logos that I selected, and it's put it into that box so you can see you have a lot of options as far styling how this might look, this social widget over here. It uses the exact same widget, and they just set it up completely differently. So they used it with a round circle of a lighter purple, and they used all custom colors so you can see you can make things look really different. But what If you didn't want to add that to a widget that already exist, you can create your own widget, and then you can use it somewhere else on the site. So to do that, you would click on at a new widget section, and then you could name it. And let's say this is going to be for a test page in the sideboard. Click OK, and then it will show up right here. Test page sidebar and you can see there's nothing in it if I turn down that arrow and then let's say we want to add a few different things over here. So if you want to add the contact info to the test page sidebar, we can go and do that. And we can change this to get in touch and 100 Main ST and you can add for the email on the website euro. You can add email text. So instead of showing your email address, they would show email us and it would link to your email and then on a visit, my website and again, you have the same widget options here. So if you wanted to make that, let's say have a 10 pixel padding and a white background. And let's say a to pixel border that is solid in black. We'll click. Save will click Save here and then let's go, and we're going to create a new page and drop that widget in. So when the page comes up, call this widget test page. We're going to drop in a container to start building our page, select a container to use, and on this one, we want to use a sidebar. So the way that you turn on the sidebar for this individual page because it's not turned on and the Avada theme options is we're going to go down here to the fusion page options. Select sidebars, and then we're going to select a sidebar to use so you can do a couple different things. You can select this test page sidebar as your entire sidebar, and then that will show up on the right side of the page. Another way you can do it so you can create. This is a sidebar on its own, but let's say you wanted to use that information in the middle of page. For some reason, you can click on Element and then you can come down and confined widget area, and then you can go and you can grab it here as well. And it will take whatever content is in this test page sidebar and drop it into the middle of your page. So it's almost like you're creating your own element. If you create a widget and then drop it into the page. It's kind of something you've custom made is an element, and you could then go in and save it as an element as well to use elsewhere. So let's take a quick peek of what this might look like by clicking on the preview button that will open the page in a new tab. And then you can see it has set up our right hand side bar by using that test page widget, and then it is also placed it into the middle of the page. Now the get in touch is written in white text, and I would need to go in and do some customization to make that a black text so that you could see it or change the background color. So then let's say I wanted to add something else to this sidebar widget. I could just go back to my widgets panel, and then I could add, Let's say, image. So I'm gonna take it and drag it over here to get in touch and then I'm going. Teoh. You can give the image of title if you want. I don't generally do that, and I'll click right here where it says no image selected. Or you can click the Add Image library, and either one of those will take you to the media library. Were you convinced lecture image to add in click add to widget. And then again, there's a Nevada Widget options button so you can add padding, background color styles, all the different things that you can add on the other. So I'm just gonna leave those as is and hit save, and then I'll click save again. And then if we go back to the test page and click refresh, then you'll see that it's added the image, and you can see that it's done it differently based on where the images place. So in this area, we had, ah, full one by one column set up, so it has it spread the full width of that column, and here it's just a sidebar. So it only spreads the width of that side bar, and that helps when you're doing responsive design that this will resize proportionately based on the element where it's placed. And then let's say that you want to remove this element from the sidebar, but you want to keep it in case you want to use it later, so you don't want to delete it completely. To do that, you would click here and delete, and it would be gone. But if you want to save it for later, you can bring it and drag it way down here to the bottom to this inactive widgets area and drop it right there. And then I'll hold on to that for you for later, in case you wanted to use it in a different element and not have to go through and set it up again. So as you can see, setting up widgets will allow you to reuse the same element in various places on your site , or to simply add some functionality in a quick and easy way. 22. Installing & Using Plugins: Let's look at the plug in section and how you can use plug ins to add functionality to your site war toe ed and features such a search engine optimization or security or site backup plug ins. So if you want to review the plug ins you already have installed, or if you want to edit or add new plug ins to your site, the left hand side bore click plug ins. You'll see you have a few different options. If you could plug ins or installed plug ins, that takes you to this main plug ins page, where you'll see all the plug ins that air installed on your site. If you want to add a new one, you can click here on add new or the button at the top. And then the editor, as we discussed previously, will let you modify all of the code for the plug ins, and you really don't want to go in there. So just leave that one alone. So once you're on the main plug ins page, you can see all of the plug ins that you have installed. You'll see a few of them have this yellow bar behind them. which means there's an update available. Some of them are white in the background, which means they're not active, and then the ones that have blue behind them are active plug ins. There are a few different things you could do with the plug ins that are installed, and you would do that by selecting the plug and you want or selecting all plug ins. And then you can do bulk actions up here by saying, Activate, deactivate, update or delete. You can also do that to each individual. Plug in is needed by clicking, delete, activate four settings and deactivate if the plug in is already active. So just a few different things you can do here. You can also see who wrote the plug in and it says by automatic. This is the author name, and you can view details on the plug in by clicking this link. When you do that, that will pop up a window that will show you all the information about the plug in itself. You can also see how maney plug ins you have that are active, inactive or that have available updates. So the plug ins we have installed right now are the anti spam, which has turned off the Contact Form seven, which we installed when we installed Avada, the fusion builder, which is the page builder for Avada, the fusion core, which is a core plug in for Avada, the slider revolution, which will allow us to create sliders and then the Yost s CEO plug in, which is for search engine optimization. So if you wanted to go and add a new plug in your click, add new and it would take you to the plug ins page. So basically, this is pulling plug ins from WordPress that you may want to install on your page. So this page shows a few featured WordPress plug ins. You can also look at the most popular plug ins, the recommended plug ins for your site, or if you log in to your wordpress dot org's site and you put your use name here. As you go through any of the plug ins, you can favorite them, and then your favorites will appear here on this page, and that's a good idea to do. If you use the same plug ins over and over on various sites, you may want to start creating favorites, and then they could show up on your page under your favorites tab. Let's just go back to feature, which is the main page. And then let's say we want to search for a particular plug in. We were just type it right here and you can search by keyword, author or by tag. I generally just search by keyword. So let's try WP Back it Up, which is a WordPress backup software program. You just hit return, and then it gives back to us the WP Back it up. Plug in so you can do a few things here. You can click on the headline, and it will take you to that pop up window again and give you all the information on the plug in. You can also click here to go to the actual Web site of the people who built this plug in. You can get more details, which will give you the same pop up window, or you can click install now, so there's some info down here is well, which will help when you're trying to side which plug in to install. So if you noticed here, let's clear this out real quick if you noticed on this page, sometimes you get a lot of different plug ins. If I were to type in, um, S e o, we can get a lot of results back from that. And you may not know anything about these plug ins or which one you want to install. But what you can do, you can see how many times this plug it has been installed on other websites and what their star rating is. You can also see the last time it was updated, which is really important because you want to make sure that the author is still working on and maintaining this plug in, and then you can see if it's compatible with the version of WordPress that you're running on your site. So that's something really important as you're going through. Maybe you don't know which plug and you want to use. This is a great way to kind of research right here on the screen as to which plug and you want to install. So let's go back to WP back it up, and we're going to install this on our site. You would just click this button and it goes through its process and then it comes up with Activate. So what you've done is you've installed it, but you haven't turned it on yet, so you'll see this blue activate button here. Or if you go back to the main plug ins page, you'll see it right here. So WP back it up. It has the white background, so it's not turned on yet, so you would click Activate to turn it on, and then once it's installed, it will take you to the plug in page with a little welcome over here, you'll see it's installed its own little item on the left hand side bar for WP Back it up. This is where all its settings and things will be. No, not all plug ins do this. Some plug ins will put their information under the settings for, and some will put him in different places, but quite a few will put them right here on the side bar. If you ever can't find that you can go back to your plug ins page, you can go down to WP back it up and you can click on settings and then it will take you to the settings page, but you'll also see it drops this open so you can find out exactly where it is. So then the next thing you would do once you've installed your plug and as you would go through when you would put in all the information you needed to to get this set up the way you wanted it to be, you can see there a couple different items in here, like how to go to support about the plug in. And then many of the plug ins also have a premium edition. So if you see, get premium or upgrade a lot of times you can upgrade and get a version of the plug in. That has more functionality to it. So you'll see now if we go back to the plug in sight that it has turned on activated and it doesn't have any updates left to it. So let's talk about where you can find good plug ins and what you should look for when you're searching for a plug in. So we went over that just a little bit on the featured plug ins page by looking at some of the reviews and that kind of thing here. But again, if you click on the more details link for each of the plug ins and it pops this up, what I really recommend you do is go in and read some of the reviews for the plug in First thing I kind of do is I look through and see when it was last updated. Like I said, that's important. If it works with your version of WordPress, how Maney installs it has and what the store rating is, and then there are always some reviews, and you can see how many different stores it has for each thing. But then I also like to go and read them because I've had some instances where I can go in and see somebody may have written this Plug in doesn't work with version four point whatever of WordPress. And then I know that I'm running that version, and this may not work for me. Or it may talk through some issues or some glitches that Aaron, the plug in, is always a really good thing to do before you go and install it. Because not all these plug ins, air vetted or verified before they're posted so anyone can write a plug in and install it. So you want to make sure that it is being regularly updated and what the reviews on it say , so that you don't install something to your site that might actually break your site. So let's go through an update one of these plug ins that is out of date, and I'll show you how you can do that from this plug ins page. So it's pretty simple. The first thing I always recommend that you do before you make any updates to your website is to run a backup. So that's why installed WP, Back it up and you can choose any other backup software that you'd like. Or maybe your host company runs regular backups for you. I do tend to install a backup plug in, regardless of whether or not my host runs backups just to be on the safe side. Because if something happens, I have the files. Locally, I can restore the website from this files, and it's just kind of a security blanket for me, so I would run a backup first, always do that, and then all you have to do is come down, and it says there was a new version of Contact Form seven. You can view the new version details, or you can update now. I don't generally need to see the details. It's not gonna make any difference to May. I just know it needs to be updated, so I click update now. Then it will run through, and then it's updated and that's it. It's really simple. What you really want to do is kind of look at your site. First, make sure everything you know, make sure how everything looks and then go back after you've installed the plug in and double check it. Make sure that that new version of that plug in hasn't broken anything on the site, and that's about it. Using good, highly rated and recommended plug ins is key to adding functionality to your website, and it's really easy to do, so just be sure to keep them updated on a regular basis. 23. Updating Your Theme, Plugins, & WordPress Files - Maintenance: and now last, but definitely not least important is keeping your site updated. This is a really big deal, and you should definitely stay on top of making your updates. WordPress, the Avada theme and various plug ins update regularly to manage things like adding new features or functionality, fixing bugs and patching security holes. So if you don't stay up to date, you do run the risk of having security holes or incompatible features on your site. So it's important to go into your site on a regular basis and make updates. Attend to set a calendar reminder once a month, and then I'll go in and update anything on my site that needs it, you may have noticed is we've been going through this class that these little red circles have started appearing with the number inside of them. You'll see one for plug ins to fresh CEO to for updates. And basically, what that means is that there is something within that section that needs to be updated. So I have one plug in that needs to be updated, and then you can also see within the dashboard all of the updates that your site needs to have made within one place. So I'm going to click updates and that will take us to the dashboard, updates Page. And you can see here that I had the latest version of WordPress and then I have one plug in that needs to be updated, and my AVADA theme needs to be updated. I'm about aversion behind, so let's go through an update. All these right now. Step one and most important, run a backup. Like I said before, make sure that you have a backup of your site Before you go in and make any of these types of updates to your site, your host may have a backup for you. I always tend to make a backup myself, even if my host has a back up, just so I have those files on hand. Generally, the way I like to do it is I like to update my plug ins first and then after the plug INS Air updated all update Ward press. If it needs it and then lastly, I'll update the theme. I do that mainly because the plug ins air kind of small, and I very rarely have any issues making updates to plug ins. WordPress, I guess, would be the second biggest thing. A lot of times that's just for a patch or something along that line. But the Avada theme can have ah, lot mawr functionality. A lot more fixes to it, and it does take a little bit longer, so I tend to do that last. So let's go through an update our plug in. If they're multiple, plug and you can click select all. Since we only have the one. I'm just going to select Yost s CEO, Click Update plug ins, and then it's very similar to how it updated on the plug ins page. It will just go through and then you get a message. The update is starting, enabling maintenance mode. It tells you what it's doing. And then it says that it was successful. And so all updates have been completed. So now I'm going to go back to the updates page by clicking here, or you can click here to return to the updates page, and then you'll see the only other thing we need to do is to update avada. So this is multi step. So first use click here and click update. Same and it will go through and do its thing. This first step is generally pretty quick. There you go. So that's done now what you want to do next, and this is really important because we're not done yet. You want to return to the Themes page, and once you click that, it will take you to the Themes page, and most times you will see this red message installation or update of required plug ins is needed. This is very important because it is usually the fusion builder that needs to be updated. So if you click the blue button, it will take you to the required plug ins page. You can also get to this required plug ins page by clicking on Nevada and then plug ins, and that will take you to the plug ins page for Avada. Once you're on this page, you'll see the same message here, so you just want to scroll down to where the plug ins are. If you remember, these were here when we installed about it initially, so any of the plug ins for Obata that need to be updated will have this orange bar across the top new version available. You can also look to see what needs to be updated just by hovering over it, and the button will say update. If it doesn't need to be updated, it will say install or deactivate So new version available. I'm going to click update on the Fusion core. It's going to go through and do its thing. So that's all finished. I'll click to go back to the required plug ins. Scroll back down. Now the fusion builder also needs to be updated, and I'll click that and then it goes through and does its thing. That's also activated successfully. So I go back to the plug ins installer and just double check. That message is now gone, which means everything has been updated and you can see here we've been updated to Version 561 Now what you want to do is go back to your site, which you can get to by clicking here. I just want to make sure that everything looks right. Make sure that the slider still working and that the text looks like it's in the right place in that kind of thing to make sure that nothing got messed up when you did the update . You can also go through and look at the page editor and poke around a little bit just to make sure things were still working. But generally on an update that's kind of small, which that one was. There shouldn't be any issues. So now you can see that Yost also has some updates needed. But since that's part of the plug, and we're not going to review that, But if you do see this number next to any of your plug ins, let's say you had it there. Or maybe next to WP back it up. Those would be updates to that specific plug in, and Joost usually has a few messages within the plug in itself so you can click that and go in and research those but again, very important to keep your side updated. So I do highly recommend that you set up a calendar reminder to go in and update your site as needed. So that's it is pretty easy to make the updates. Just remember that updating of audit is multi step, and you do need to go through and make sure that all of your required plug ins are updated once you update the Avada theme. Also, something else that you may see frequently is this fusion patch er. So instead of making an entire update to avada, sometimes they'll just put patches out. And if you see a little number here, that means that there's some new patches to update. And if there are, you'll see right here what the patches are. And then a blue button here that says Apply Patch. It's super easy. You just click it. And if they're more than one, once you put the first button and it's patched, then the second button will activate, and you could just go straight on down the list and keep them all updated. So that's it. It's really simple to keep it updated. Just make sure you do it on a regular basis so you don't get caught out and run the risk of having security holes or incompatible features on your site. 24. One Final Avada Tip & Your Class Project: My name is Melissa, and thank you so much for joining me in this class about how to use the about a theme to build your WORDPRESS website. I hope you've enjoyed the class and learned all the ins and outs of using the same. Keep in mind that the best way to really learn how to use the Avada theme is to just jump in and start playing with it. I hope to see you in my next class is well. If you saw the prompt asking if you would recommend this class, I would love it. If you did enjoy the class. If you would please leave a thumbs up and a review. Your recommendations can help my class get out. Two more students who may benefit from it. You could also click the follow link to get updates on my future classes. So one final tip about the Avada theme If you go to the Avada menu been select support at the bottom of that page, you'll see a button for video tutorials. If you click the watch videos button, you will find more than a dozen videos about various aspects of the Avada theme, including how to use the fusion slider, how to install Avada via FTP and a full guided tour. So if you feel that you still need a little more info about how to use Avada, be sure to check out those videos for your class project. I want you to purchase and install Avada onto your WordPress website, then build out one page using three or more page elements that you have customized to your look and feel. You will get the most learning from this if you build the page from scratch. But to get started, feel free to download a demo and modify from there. If you have questions as you're building your page, please reach out. Is our replied to every class, project or question that is asked on this class page, Thanks again for joining me for this class about how to use the avada thing.