How to Make a Wordpress Website - 2021 - AVADA Theme

what's going on everyone it's jamison from nyc tech club and in this video we're talking about the avada theme and everything that you need to know about avada so if you guys don't know the avada theme is the number one best-selling wordpress theme available i think everyone has at one time or another googled wordpress themes and found the avada theme and for some it's really it's heavy there's a lot of stuff there but you can build pretty much anything that you guys want so if you want to learn how to build a wordpress website if you want to learn how to use the avada theme watch this video because we're going to show you how step by step so in this video what we're going to do is we're going to show you how to make a wordpress website step by step using the avada theme so some of you guys probably already have your domain and your hosting but we're going to show you how to do that step by step just in case this is your first time and once we do that we're going to install wordpress we're going to go and get the avada theme which again is a premium theme but it's the number one remember that number one best-selling premium theme that you can build pretty much any type of website with so once we install that we're gonna show you how to choose whatever type of template that you want so whatever type of website that you wanna make if it's a photography website an ecommerce store a business or services website a blog there's a bunch of different types of templates that are pre-made pre-designed and they're just beautiful so all we have to do is just choose the one that works for us install it and then we can learn how to customize it using the avada theme page builder so if you want to build a business website a photography website an ecommerce website a services website or any other type of website there's going to be a template for you and you can use the one that we're going to use in the video or you can just choose another one because no matter what this video is going to show you how to use the avada theme so once we choose our website template we're going to have a home page an about page a services page a contact us page testimonial section whatever you guys want we're gonna have it and we can go and customize it we're gonna show you how to use all the different types of modules and the page builder so what i want to do really quickly is just show you the template that we're gonna be using today for our wordpress website and the avada theme and if you like it you can use it if you don't like it you can choose another one we'll show you how all you want to do is really just pick the one that you guys need and it doesn't even matter if it's this one or that one because we're going to show you how to do everything and you're going to be able to customize your website by the end of this video so let's jump into the tour of our website and then if you guys want let's learn how to use the avada theme step by step so the first thing that we're going to do in this video tutorial is we're going to choose a template that we can customize so you can see right here that there's a bunch of different categories for different types of websites from corporate shop creative food blog magazines sports whatever you guys want and what we're going to do is we're going to choose one that works for whatever you guys want to build and if you guys want you can always just hover over these click on the preview button and then you can go and check them out we're going to go into those details in this video tutorial but i just wanted to show you that there are a bunch of different templates that you can choose from so let me just show you the website that we're going to be using to learn about the avada theme and really learn about all the different modules on the avada page builder so this is the home page for the demo website that we're going to be building today and you can see that we have a custom header that will show you how to customize we'll show you how to use the slider revolution to create beautiful professional sliders just like this with a bunch of different animations and i'm going to go through this really quickly we're not going to spend too much time on all these different sections but you can see right here we'll show you some text modules how to customize this stuff and even some icon boxes like this and then we'll have different backgrounds that we can insert into our website and then some additional sections that will show you how you can link to different parts of your website we'll even show you how to create portfolio sections so just note that everything and everything that we cover in this video tutorial there are time stamps in the video description so if you ever want to skip anything or go back to different sections you can you can see that we have price boxes blog posts and then a testimonial section down here with some logos and then we'll show you how to create call to actions just like this and also a custom footer so this is the home page for the demo website and just remember that you can choose any template you don't need to use this template or you can use this one you can customize it and you can build whatever you want so i'm going to go through these other pages really quickly just to show you what they look like but just remember you can always remove them you can customize them and do whatever you guys want by the end of this video so this is the about page that we're gonna learn how to make and we're gonna make this page from scratch so we're going to really have an exercise that teaches you how to use the avada theme and you can see that we have a background image here with a custom title and sub headline and then a slider section in the middle of our website just like this where you can go through these different slides and then once you're ready you can scroll down to the call to action and the footer down here so we're going to show you how to create a page just like this and then we're going to come back up here and we're going to go through these other pages really quickly just so that you can see some of the stuff that we're learning how to customize today using the abada theme so again we have our title section and then we have these blocks right here with background images and then if we click on these links right here you can see that a map pops up so we will be showing you how to insert the google api keys to get maps to show up for your different locations or anything like that and then we'll show you how to create custom sections with two columns with a background image and then also a little text section right over here and you can see that we have that call to action also so that's just one of the pages and another page is this careers page so just remember that you can customize these pages you can get rid of them you can do whatever you guys want you don't need to have all these pages and you can also use another template this is just the one that we're going to be using so that we can learn how to use all these different types of modules and the avada page builder to really customize our wordpress website so we'll show you how to create custom sections with borders just like this and then down here we can have timelines a lot of cool functions and features that the avada theme offers us that we can learn how to use in this video tutorial and this is the blog post page so we will be showing you how to create blog posts and choosing the layout and all of these colors and the designs and settings you can change and we're going to show you how step by step so if you want to change the colors or just customize anything just watch this video and you're going to learn how so the last page that we're going to learn how to make is this contact us page right here and usually this is my favorite page on any website because you can insert a contact form a map and really just all your information about your business so we're going to show you how to create custom contact forms insert a map just like this and then show you how to create all of these other sections also so this is the website that we're going to be using today to show you how to use the avada theme and really build out and make a wordpress website so if you guys like what you see keep watching because we're going to show you everything that you guys need to know step by step so we're going to be using the avada theme and if you know the avada theme you know it's the number one best-selling wordpress theme available you can see when i hover over this you can't really see it but when i hover out of it 725 thousand people are using this theme it's the number one bestseller for over nine years it has a five star rating and it is a premium theme so there is a small little fee but you get so much with this theme including a custom page builder and it's always updated by its developers you get a bunch of premium plugins and you can really customize your website using all the different templates you can make your website mobile friendly you can create an ecommerce website a business website i'm going to link you to this page so you can come and check it out yourself but we can just scroll through this really quickly you can see that we have custom layout options and we have over seven hundred thousand just remember that seven hundred thousand people are using the avada theme and we can make it mobile friendly we'll show you how to do that in this video tutorial we have the custom page builder that lets you customize your headers and your footers your content layouts and really you can pretty much do whatever you guys want so again this is the most powerful theme there is out there and i'm really excited to show you guys how to use it so if you guys like it go ahead and pick it up and we'll walk you through how to do all that stuff and install it in this video tutorial so again i'm going to link you to this page you can come and check out the avada theme i think it's one of the most powerful wordpress themes available i really like it and i can't wait to show you how to use it so there you have it that's the intro for this video again we're going to be learning how to make a wordpress website a professional and beautiful one using an avada theme template and this video tutorial is an all-inclusive video tutorial on learning how to use the avada theme so if you guys like what you see then keep watching because we're going to learn how to use the avada theme and build our own wordpress website step by step so if you're ready i'm ready let's get started the first thing that we have to do is we have to register a domain and get hosting so we're gonna go to a website called hostgator.com and there is an affiliate link in the video description go ahead and click on that and you're gonna come to this page right here and hostgator is one of the websites that i recommend to my clients my viewers to get their hosting and their domain you can come to this page and check it out yourself you can see right here that you get a free domain with your registration and it's really fast we got one click installs for wordpress which is what we're going to be using and we get a free ssl certificate to secure your website so i want you to click on the link come to this page right here and if you want to use another hosting site you can do that as well but this is the one we're recommending right here so once you come to this page go ahead and click on get started and what you're going to do on this page right here is you're going to choose the hosting plan that works best for you and just remember that you do get a free domain and the free ssl certificate so right here is the hashing plan and then this is the baby plan these are the two that we're going to focus on the hashing plan is for one website and one website only and the baby plan is if you want to build more than one website and you want to host them on the same account then you probably want to get the baby plan so normally i would get the baby plan because i do create a bunch of different websites but it's really up to you guys so for this video tutorial i'm going to choose the hashing plan so just click on the plan that works best for you and what we're going to do here is just go through the sign up process so the first thing we're going to do is we're going to register our free domain so i'm going to type in nyctechdomain.com and search for that you want to search for whatever domain that you guys want and once you find it if the search results say it's available that's good and you can see right here it's free for one year so we like that even better and then we can come down to the bottom over here and if you want to keep your privacy protected so you don't want anyone to know your name or that you registered this domain you probably want to get this service right here but you can always upgrade to this later so if you do want to save some money right now you can uncheck this but again it's really up to you guys if you want to protect your privacy or not okay and then what you're going to do is come down to step number two and choose the package that you want so again i'm choosing the hashing plan and it's really up to you guys and then for the billing cycle you can see that there are a bunch of different billing cycles the longer term ones are a little bit cheaper and just remember you do have a 30 day money back guarantee so there's really no risk and what i'm going to do is either choose 12 or 6 months just because i like to give myself enough time to know whether or not i want to run a website or not but for this example i'm going to choose one month so again choose the building cycle that works best for you and then you want to create your account if you don't have one and i already do so i would just click sign in but i'm going to leave this up to you guys so if you guys need to pause the video to fill this section out and then you want to fill out your billing information also so just remember i already have my domain so i don't need to do this but if you need to and i'm going a little too fast go ahead and pause the video and then what we're going to do is come down to add additional services and by default some of these are already selected for you and this first one we're going to get this for free so we don't need to check this one i'm going to uncheck these because we don't really need these either they're just extra perks and you can always upgrade to them later and you can also create your own email address for free so you don't need this so i'm just going to uncheck all these and then once you're ready come down to probably the most important section in this page and that is where you can put in your coupon code to save a bunch of money so by default there should be a coupon code right here and you can see that you save a few dollars right there what i want you guys to do is delete this and type in nyc tech three zero and then click validate and i forgot how much this gives you off i think it's like sixty or seventy percent off so you wanna make sure that you actually type this in because this is gonna save you a bunch of money nyc tech three zero click validate you can see that the discount increases substantially it's almost what 80 70 percent off it's it's a good amount so just make sure that you type in nyc tech 30 to get a bunch of savings okay and once you're ready come down to the bottom check this box and then click checkout now and we are good to go and once you sign up with hostgator i want you to go to your email inbox and you should see this email titled your account info from hostgator and right here you should see your control panel this is where we go to install wordpress so go ahead and click on that link and then what i want you to do is just take the username right over here and also the password and copy and paste that into these two sections right here and then once you're ready click login so once you're on the cpanel this is where we go to install wordpress so if you scroll down you should see the software section right here and we want to click on quick install and once we come to this page all we have to do is just come down to the install wordpress section click on that and you'll see this pop-up that says install wordpress for free all we're going to do is click on this button right here and then what you want to do is just put in your domain so just select that leave this blank put in your email that you want to use for your website you can always change this later put in a blog title it doesn't really matter what you put in you can change this too and then create your username and you can put in your first and last name and then just click install i've already installed wordpress so i'm not gonna do this with you but you're gonna go to another page that's just going to say that it's installing and then once it's ready we are good to go and so you can pause the video and push play once you install wordpress so once you install wordpress now what you can do is you can go to your email inbox and you should see this install complete email from hostgator so it might be in your spam email or your promotions or other email tabs but you're gonna find this email and it's going to have your login details so it has your website and then the admin url so we want to click on this and what we want to do is log into our website so over here you can see it has the username and the password you want to copy and paste these into the login section right here so go ahead and do that and then once you're ready click log in and once you're logged in this is what you should see this is the wordpress dashboard this is where you go to create your pages your posts upload images go through your settings and install whatever you need to to really make your website so before we get started i want you to install a plugin to make sure that your website is secure with the ssl certificate so you can see right here i already i think already have it locked so it's already secure but we're gonna go and check just to make sure i'm gonna hover over plugins and go ahead and do that too and what we're gonna do is first click on install plugins and you should see maybe you do see some plugins i don't see any i clicked on this and i deleted everything so i'm starting from scratch so what we can do is just click on the add new button at the top and once you're on this page you can see there are a bunch of different plugins we're going to be using some of these i think to customize our website but if not you can always search for whatever type of plugins that you want so if you need something for an instagram feed a contact form or anything like that you can just search keywords right here so what i want you to do is type in ssl and once the search results come up we should see this one right here really simple ssl and it has five million active installations and has a five star rating this is what we want to secure our website so go ahead and click on the install button and then you're gonna click on the activate button and once it's activated you're going to come to this page right here just click on the activate button right here and that's pretty much all you have to do so what we can do really quickly is go to the general tab so once you're on the general settings what you can do here is this is where you can change your site title if you want and you can also change your tagline so i'm going to remove this and i'm just going to type in professionally designed and that's just because i want to put something in there you can also leave it blank what i really wanted to do was come down to wordpress and site address i want you to make sure that you have the https right here so you can't change your domain if you do it's going to mess up your website so don't change anything here but if you want to add the www dot you can also do that make sure you do that in both of these if you do and you can change your admin email over here also and then once you're ready just come down to the bottom click save changes and it might log you out so you might need to log back in and that's just for security purposes and that's pretty much all we're going to do right now we're going to go into these other settings a little bit later but first let's go back to the wordpress dashboard and we're going to go and install the theme that we need for this video tutorial so in the video description there is a link to the avada theme go ahead and click on that and it's going to bring you to the themeforest website and once you click on the link you're going to come to this page right here and you can see that this is the avada theme website and you can see that has a five star rating with almost 25 000 people that have rated this over 700 000 sales and you can come to this page and you can check out what the evada theme is all about they have their own page builder they have templates you can customize pretty much anything you can create an online store a blog any type of business website so i'm going to let you guys come here and check it out yourself and just remember this is a mobile friendly website tutorial so everything is going to be responsive it's going to work on all different types of devices and what you want to do is come over here you can see that i already purchased my license but you want to go and purchase that and so i'll let you guys do that set up your account and all that stuff and then once you're ready push play and i'm going to show you what you need to download so that we can install the avada theme so once you purchase the avada theme if you come to your downloads page and you can hover over your username and click on downloads you should see it in the list over here and what we want to do is click on the green button right here and we can just download all files and documentation so go ahead and click on that you're going to get a zip file and you can see that it's downloading right there and once it does go ahead and close this tab go back to the wordpress dashboard right here and what we're going to do is go and install the theme so you can hover over appearance and then click on themes so once we're on the themes page we want to go and click on add new and just click on the button that says upload theme and right here where it says choose file you can click on this and you should see this folder called avada full package open that up and right here you should see avada theme open that up and then find the avada.zip that's the one that we want so what i'm going to do is just click and drag it in right here and once we have it go and click on install now and once it's installed all we have to do is click on the activate button and once it's activated before we move forward with anything else i'm going to ask for the biggest favor that asks in any video and that's to like this video subscribe leave a comment share it do all that stuff because it just helps the youtube channel it helps get more eyes on this video and ultimately it just helps me keep making videos like this so i want to say thank you in advance and please please please like the video and subscribe and hopefully we'll see you in another video so we have the avada theme right here and we want to register this because we want to get the full benefits all the premium features with the avada theme so the first thing that we're going to do is come right here to where it says register your website and go ahead and click on this so once you come over here it's going to ask for your purchase code so go back to the themeforest website and back to the downloads tab and then find the avada theme right here go back into the drop down and right here where it says license certificate and purchase code go ahead and click on that so that you download that file and you're gonna see it right here and i'm going to probably have to hide this because we all have our own unique purchase code so i'm going to copy this right here it's this tab right here which is item purchase code you want to copy that and then we can just close these tabs right here go back right here and paste that in and then click register now and once your website is registered now what we can do is we can come up to the top to set up website and we can go and select a template and remember these are professionally designed templates so we're going to make our life a lot easier using one of these instead of creating something from scratch and we can customize the stuff so go ahead and click on that and once you come to this page right here don't worry about this notification we're going to install the plugins that we need for whatever template that we use so what you can do is come down here and you can see that there are a bunch of different themes and styles of websites that you can select from so if you want to preview any of these you can just go in here and click on the preview button you'll open up a new tab just like this and then you can see what this website looks like if you like the look and feel then you can import it and then we can go in and customize it so it doesn't really matter which one you choose you're going to learn how to use the avada theme and the page builder watching this video tutorial so if you want to use a different template than the one that we're going to choose that's perfectly fine you should be able to customize your entire website by the end of this video so there's a few of these that look really really good and i think the one that i wanted to use was an seo one so i'm gonna scroll down and look for it and here it is right here so if you guys want to you can hover over it and you can click on the preview button just to check it out the reason why i like this one is because it has a really cool slider and a bunch of different effects we have our header at the top with a call to action a button section down here with a headline and sub headline with a cool background image and you can actually rotate between these sections so you can see right here that we have a bunch of different slider images and if we scroll down you can see that we have a product and services section right here that we can talk about our business and you can insert a break right here with another background image and then down here you can add some icon boxes you can hover over them and we can have links to different parts of our website and we also have a gallery section or project section that we can insert and down here you can also have some additional information if you guys have different plans or business ideas that people can go and click on to go to different parts of your website and then we have a blog section right here so we'll show you how to create blog posts and then a testimonial section just like this and then some icons for partners and another call to action and then our footer down here so you can check out this website yourself i just wanted to kind of give you a quick overview there are some additional pages right here and i probably showed you guys this in the intro so i'm not going to go through all the pages again but this is the one that i'm going to be using for our tutorial and again you can choose any of these other options as you want just watch the video you're going to learn how to use the abada theme the page builder and you should be good to go so if you have any questions let me know otherwise go ahead and select whatever theme you guys want to use i'm going to use the seo one so we're going to click on import right here and you can see it says required plugins to import content we want to install these plugins right here we need the slider revolution avata core and the builder so go ahead and install this stuff and then we're going to import the content too because we're going to use that and then we can delete it as we go and customize our website so the first thing that we're going to do is go ahead and install this stuff so i'm going to click on install here right here and right here and then we'll just select all right here and we'll click import right here also and right here you should see this warning sign we can just click ok and now we're just going to wait for everything to import so once everything is installed now we can just click on the done button right here and you can see that we have our website installed and now what we can do is we can go back to the wordpress dashboard so you can see right here on the wordpress dashboard it says that we need to activate some plugins so go ahead and click on activate and on this page right here we need to activate the evada core so go ahead and click on that button and once that's activated now we have to do the builder so again we can just come down here and you can see the builder right here go ahead and click on activate and now everything that we need should be activated and we can always go and install some additional plugins and you have access to all these other ones so if you ever want to make an ecommerce website you can use woocommerce and we'll probably talk about that in another video so you probably want to subscribe you have yoast seo right here if you want to optimize your website so what i'm going to do really quickly is just hover over the website name and click on visit site and once the website loads now you can see that we have the template that we just imported and it has all the different sections all the different images and we're gonna go in and learn how to customize this stuff and we can show you how to remove stuff and you can see right here that we need to insert a gallery section so we'll show you how to do that it's gonna be super super easy so i'm glad you guys are watching this video tutorial so again if you guys have made it this far make sure you give the video a thumbs up and we're going to jump right into this so the first thing we're going to do is we want to go and make sure our settings are all set so i'm going to hover over the website name again click on dashboard and once you're back on the wordpress dashboard let's go to our settings really quickly just to make sure everything is set up so again let's go to general and over here again you can change your site title so we want to do that so right now it's called avada seo i can just change it to studio seo and again you can put in whatever you want so if you guys are building a business website blog website anything whatever you guys want to put in it's whatever your heart desires so i'll let you guys figure that out yourself and then you can put in a tagline if you want we got our url right here we can't change this unless we want to mess up our website you can put in your admin email right here come down to the bottom click save changes and once that's saved we're going to come down to the reading tab so click on that and you can see right here it says your homepage display so right now we have a home page selected so it's the seo home page right here and we want to go and create a blog page over here so that we can set that for our blog page so let's go and set that up let's hover over pages and click on add new so now what we're going to do is we're going to go through our settings and the theme settings for our website before we go and customize the wordpress website so first let's hover over settings let's go back to general right here and what you can do here is just go through your settings so again if you want to change your site title and your tagline you can and then you have your wordpress and site address i just added the s right here and also the www dot so you can't change anything else if you do you're going to pretty much freeze your website you're gonna have to start all over so you don't want to do that you can update your admin email right here for your wordpress website and pretty much you can just come down and click save changes now there's really not much to do in the settings but we're just going to go through this really quickly so in the reading tab right here what you're going to notice is that you have your home page displays because we're using the avada theme we're going to create a custom blog post page so we don't need to go in here and select that so you can see right here that we have our home page set and we can rename that in just a little bit so if you do make any changes you want to click on the save button right here and then maybe the last thing is in the permalinks if you go there you want to make sure that you have the post name structure because this is really good for seo so that you can optimize your website so go ahead and select that one and then just come down and click save changes so if you ever want to create some blog posts or pages you can hover over these tabs right here and just click add new and same with this one right here if you want to see all your different pages you can click on all pages and we'll be doing that very shortly but first what i want to do is i want to go through the theme settings so again if you hover over avada what we can do is click on options right here so what you can do in the options tab over here is you can go through all of your settings for the wordpress website so these are the theme settings and you can go into each of these tabs and you can check them out what i recommend is that we go into some of these tabs a little bit later after we learn how to customize our website a little bit because it's just going to make more sense after we actually see what the website looks like when we start customizing it so you can see right here in the colors tab you can change the primary color for your website if you wanted to you also have these other predefined color schemes that you can select and what that's going to do is just change the primary color and all the different colors for your website on your own based on these colors that you select so i'm not going to change anything but if you do you want to click on save changes you can also reset everything over here one of the things that you can do right now though is if you want to go into your logo tab this is where you can go to change your logo so you can see right here the default logo if you want to remove this click on this button and then you can just upload your own logo and then for the sticky header logo you can upload the same one and a sticky header is just something like this top bar up here where if you scroll down it doesn't move it stays at the top and you can also upload a mobile logo if you want to if you don't have one then that's okay you can just remove that and use the default logo so you do want to make sure that you upload your own logo when you do have one and if you need help creating one let me know in the comment section below all these other tabs we're gonna go through a little bit later if we need to but you can see over here that if you want to change your body font you can just come in here you can change the font family the style with the different sizes and the line height it's really up to you and you can also change the link color over here so if you want a different color than the orange color just click on this and then just select the color that you want so you can choose any of these colors you can drag this wheel around i'll let you guys do that on your own and again we will remind you guys about the section a little bit later because i want to show you what the website looks like and how to customize it a little bit before we actually come in here and start changing stuff because you actually might like what the theme settings are already set for so these other tabs we don't need to really go into right now we can talk about the forms tab over here a little bit later because we are going to be creating a contact form so right now we'll just leave everything as is so again if you ever want to go in here you can just click on options and then if you ever want to go back to one of your templates and reset the settings just go to the website tab and then you can just find the layout that you selected so let me just find it really quickly i'm going to come down to the seo one right here and you can see it says modify we'll get this you can remove all the content and then if you click on this it'll remove everything and then you can add everything back also okay so let's just jump right into learning how to customize the home page so you guys can see right here that this is the home page and we'll learn how to customize the header a little bit later but i want to go through all these different sections to really show you how to change stuff and add whatever you guys want to add so you can see right here we have our home page so you can click on edit page right here but what i want to do is just go back to the dashboard and show you guys where you guys need to go if you want to go to your pages list so hover over pages and just click on all pages and on this page right here you should see a list of pages and these are part of the template website that we just imported so the page that we want to edit is the front page right here this seo home page so whatever page is your home page is going to be called the front page set in your settings so we want to go and edit this so click on the edit button so once we're on the homepage right here you can see at the top that we can change the page title so i'm just going to remove that and type in home right there i want to click on the update button just to save that really quickly so once that's saved now we can go through the rest of this page right here so it might look a little intimidating because it does look a little different with the avada page builder right here there's a lot of stuff going on but the avada page builder is really detailed and that's what makes it so great so we want to make sure we learn how to use it so on the left hand or actually mean the right hand side over here you can see the page attributes you can choose the template option that you want so we're going to go with the 100 full width option and then down at the bottom over here you're going to see the avada page options so we're going to leave everything as a default since we are using a page template but if you ever want to come in here you can come in and go through these tabs and then really select whatever you want for your own layout so again we're going to leave everything as is because we are just customizing the templates but if you're creating a new page you want to go in and customize stuff okay so right here in the center section what you're gonna see is the avada page builder so this is what we're gonna learn how to use to create our wordpress website and you can use the back end which is this or you can use the front end so let me just open that up just so that you guys can see really quickly and once you come to the avada page builder you're going to see the website right here and it doesn't show the slider because we do use the slider revolution so it just doesn't show up here so i'm gonna show you how you can access that and really customize that but you can see all your different sections here and this is the front end builder so you can always just come into these different sections and then if you want to edit this stuff you can just click on the edit button right here and then you'll see the stuff that you can edit right here i personally like the backend option a little bit more i think i'm used to it but you can use the front end if you want so what i think we're going to do today is we're going to look at what the page looks like using the front end or just viewing the page and then we're going to use the back end to really customize everything that we want so again it's just a matter of visualization here instead of just using the modules but you do have the option here okay so what we're gonna do is click on the x right here and then we're gonna go back to one of these options right here so you can see it says exit to front page exit to back page so we're going to go and click on the second option right there and it's going to bring us back to the back end right here and again this is the same thing as you saw on the front end except you can't really see everything so what i can do is i'll open up a new tab here just to show you again the home page so we'll let that load and you can see that we have the slider right here this is the first section and then we have another slider for the mobile device right here so you can see right here on this page that this is the slider section right here and then if we scroll down here this is our next section so let me go back to the builder right here and you can come down here this is the next section meet the new avada seo demo so what you can do is just expand this and you can see right here it says that meet the team and then you have a little description here and then some content boxes so if we go over here you can see it says meet the team content and then our boxes right here and then we'll have a background image over here most likely so if i come back here you can see that we have the image right there and then we have another section called our services so all you do is just title these sections and then you can go into them so this is a container with a text box so two text boxes right here and then another container right here with four different columns so if we go over here we have this section right here the text boxes and then four containers right over here so it's really intuitive you can see right here that if we just look at this it's gonna have a title a text box and then probably a little gallery section so if i go back to the edit page you can see we have the our work section i'll expand this we have our text boxes and then a portfolio section right over here so if you ever want to edit any of the stuff you can just hover over it click on the edit button right here you also have the option of cloning the element which is duplicating it saving it and deleting it so if i came in here i can just click on element options and then this is where you can add and edit the container or the module so this is for some containers for this section right over here so what we could do and we're going to walk you through all this i'm just kind of giving you guys an overview right now you have the google seo so if you wanted to edit that first box you can come in here you can change the title you can change the icon and then you can change the color of the icon the background color and you can change the text over here also and you can do that for each one of these so super easy and what we're going to do is we're just going to start from the top so remember this is a slider and to use the slider we use the slider revolution which is a premium plug-in that comes with the avada theme so i need to show you guys how to do or use that so that you can customize the slider section right here so what we're going to do is first i'm going to close this stuff and i'm going to collapse these because i don't want to confuse you guys so we're just going to keep scrolling up and collapse and right here is the hero slider so this is the first section you can see that the module is the slider revolution right here and then there's some short code so we need to go and actually edit this so you can't just click on this button right here because all you see is select the slider that you created and then that's the one that's going to show up so what we have to do is on the left hand side over here you should see it says slider revolution we're going to exit this page and go over there to customize our slider so click on the link to the slider revolution and it's going to bring you to the slider dashboard right here and what we can do is we can just scroll down and you can see that we have our slider right here if you want to make a new slider i could show you how to do that but i do have a tutorial that shows you how to use the slider revolution and i'd rather link you guys to that because it's pretty detailed and there's a lot of cool stuff that you can use the slider for so let's just talk about how to edit the existing slider here because it's really professional so what we want to do is hover over the slider that's already created and click on the edit button so this is the slider revolution and we're going to show you how to create your own slider but i just want to walk you through this really quickly because the reason why we're going to show you how to create your own slider is because there's so many different layers here and they went to a lot of detail but probably too much and it's just going to be too hard to really customize the slider right here but what we can do is we can use this as our example so this is the slider image and this is where you can add all your different layers and you can see right here that these are the layers that you can add and then you can customize them so if you want to add a text layer then you can just click on that and then you have your new text layer here you can make it larger or smaller you can edit it you can move this around to wherever you want to place it and you can rename it if you want and you can also just remove it by just clicking on the delete button just like that so over here you have all your different layers and they're all animated and they're time to come in at different times if you want you can push the play button and you can see it kind of load right here and this is a nine second slider so that's how long everything stays on this page until it rotates to another slider so if you look over here you can see that we have additional sliders so we have three different slide images and we're on slider number one right here and again i mentioned that this is where you can add your layers for this slider and if you ever want to go to these other sliders you can just click on them and on this side over here this is the important stuff so if you go to the general options this is where you can change the title and the alias and then the short code is what you're going to paste into your wordpress website to make the slider show up and you can change the layout option so these are the general settings so if you don't want a slider maybe you just want one image so it's a scene or a carousel or you want to change the size you can do that right here and then for the content tab you don't need to do anything for the default tab over here this is where you can change the length of the slider so for each image right now it's for nine thousand milliseconds so that's nine seconds you can change this you can make it larger or longer or shorter it's really up to you and then that's pretty much all you have to do in the general tab if you want the sliders to auto rotate after nine seconds then you want to keep this on and you can also make the slider stop on the same image if you're hovering over it so maybe you want to turn this off it's really up to you guys okay so i'm gonna go to this next tab and right here you can see that we have an arrow so in the middle of the slider we have these back and forth arrows to rotate between slider images what you can do is just come in here and then select the type of arrow style that you want and then you can place it where you want to and that's pretty much all you have to do so if you wanted it lower you can move it down and then if i scroll down here you can see it's down there so i'm going to put it back in its normal spot and we'll just scroll up over here so again you can play around with this if you guys want nothing really much to do here and again just remember if you if i'm going too fast we have an entire video tutorial on the slider revolution what i want to do is give you the basics so that you can create a professional looking slider for your wordpress website and really just tell you what you guys need to know so in the slide options right here this is where you can change the background color or image you're going to go into the options right here so if you want to add an image you can select this and then you can just go in your media library and select the image that you want to use you also have the option to choose a color so we can click in here and you can see that you have all these different color options and you can just click ok just like that and you don't need to do anything with the thumbnail for animation this is for the loading of the slider so maybe you want to change it so right now we're using a slide and fade in slide and fade out option and that's pretty much it nothing to do with these other tabs so if you do make any changes you want to click on the save button right here and make sure you see that sometimes the slider revolution doesn't save and you need to restart it so the best thing you can do is always just click on this as you go so that you can save everything and if you want to preview stuff you can preview it right here you can also check out what it looks like on different devices right here and that's about it so we're going to talk about some of the animations and stuff as we build out a slider but we're not going to use this one because there's just so many details and if we go to these other images you can see right here that again you have all these different shapes and everything and look at how many different layers there are so it would just take a very very long time to really show you how to build something like this and we want you guys to have your website up and running as soon as possible so that's a general overview and i hope you guys enjoyed it what we're going to do is we're going to go back and create a new slider so i'm going to click on the back button right here and we're going to just come down and click a new blank module so click on this so what we're going to see is the start guide right here we can just click on that and you can choose a slider if you only have one single image then you can use this option right here let's go and just choose the slider for now and we can always just change this if we want so we don't need to have more than one slider image let's click next right here and we're gonna go with the full with option but you can always choose any other option that you want so we'll just select that and click next and then we want to inherit the responsive settings so i'm going to just keep that as a default and then we have everything right over here so once we're on the slider revolution builder right here you're going to see the template right here and i do have the original template open over here because i'm going to reference it and use it i don't want you guys to think that using the slider revolution is really easy it's actually really i don't want to say complicated but there's a lot of details so if you guys want to learn how to use it step by step i do have the tutorial on how to use the slider revolution what i'm going to do here is really just show you how to build something pretty professional but also basic so that we have something up and running because i want to go back and really learn how to customize our entire website so that you guys have something for your clients your visitors and everyone else so you can always come back and you can really make the slider revolution more professional or add to it a little bit later let's just get this section done and move on and if you have any questions let me know in the comment section and i'll help you guys out okay so the first thing that we want to do is we want to go to the general options right here and we can re-title our slider if you guys want so you can see right here that mine is seo design and the alias is the same with this little dash right there and this is our short code that we're going to use to paste into our wordpress website and if you go to the layout option over here i have the slider selected with the full width option if you guys want to change that you can and you can also change the layer size also now if you want to go to the default settings you can change the slide duration right here so if you don't want the slider to last for nine seconds before it goes to another image then go ahead and change that this is in milliseconds so 9000 is gonna be nine seconds and in the general settings right here if you want to make the slider pause when someone has their mouse over it you want to turn on the stop on hover i'm going to leave that off but that's up to you guys and then for on scroll we're going to leave everything as is and maybe for the spinner if you guys want something to load right there we can do something like this or maybe number two like that okay so i'm gonna go to the navigation options i'm gonna turn on the arrow and we might come back here a little bit later to choose the arrow style because we can't really see it right now so we'll just turn this on right now and we'll leave this as is and now what we can do is go and start customizing our slider so go to the slide options the first thing that we can do is we can add a background color if you guys want so i'm going to come in here and i'm going to select color and i'm going to go into the color pad right here and i want to change it to this gradient option so i'm going to select this one and then for the color code right here i'm going to remove this and what i'm going to do is just type in this color code right here 0 8 0 e 7 b and that's the same color that we have on the demo slider and that's pretty much all we have to do i'm going to click on this check mark right here and now you can see it so now we have this background color here and you can see on the demo site we have all these different layers and it doesn't really matter what order you put the stuff in so what we can do is we have this let's go to the animation tab and let's just add an animation for the entrance for the slider and what you can see is a bunch of different transitions so if you want something like this you can see that there are different options so you can just pick these and then you can come in here and you can hover over these and you can see what they look like so if you wanted something like a box we can just click on this and you can see like that so i'm gonna go with the base option and what i want to do is just click on this one right here that says slide in fade out so we're going to go with this one right here and it's really simple so now that we have that i can click on this and you can see that it just fades in just like that and then whenever we transition out it'll slide again okay so i'm gonna select that one i'm gonna click save right here and once that's saved now whenever we have a new layer we can also add some animations so we'll talk about that in just a little bit so now what we can do is we can click on any of these buttons it doesn't really matter what i want to do is i want to add our first layer so we can see right here on this page and i'm going to go to the preview screen that there is so many different things that we can add we can add the background lines or shapes if we know how to we can add this image right here we can add our text so let's just go ahead and add this big image right here let me show you guys how to do that we're going to come over here hover over add layer and then click on image so you're going to see the image box right here and you'll also see it down here so when you click on this you're going to see the layer options over here and what we can do is just go into these options right here and select what we want to add so for content we're going to go into the media library and this is where everything is stored so if you want to upload your own files you can go to upload files and then just find the image that you want to use we should have what we need down here so i'm going to select this image right here and click insert and now you can see the image right here and we can drag it around to wherever we want to place it so we have our first image right here and you can pretty much place it wherever you want so you can see over here that there are some tabs to style and everything so you can always just come over here and check what this stuff is all about so if you want to change the spacing or the border you can just click in here for the size and positioning you can see right here that you do have buttons so you can place it wherever you want so let's say for example you want something like this where it's in the center and just to the right you can click preview just to check it out to see if this looks like where you want to place it and for me i would say oh it's a little too low i want to put it a little higher so i'm going to close this and maybe i'll have to drag it up to wherever i want to place it and then again realign this right here and then we can click on the preview button again and now that looks a lot better so a lot of it is trial and error and it's really up to you guys and then in this layer you can see in the layer options you also have the animation right here so if you click on this you can make this layer animate however you want when it joins or shows up on the screen so all you have to do is just come over here to where it says in and then choose the type of animation that you want so if you want a slide transition you can just see like this so maybe we'll just do something like slide from bottom and then the duration is over here of when it's going to happen so you can move this out a little bit so let me just show you guys so maybe we'll do put something here just for fun and now let's click on the play button you can see the slider goes in and then it animates when you're over here kind of cool and so what i like to do is add my different layers and then figure out the timing for the animations so that one seems a little fast so we'll play around with this a little bit more but that's pretty much all you have to do okay so that's pretty much all you have to do and we're going to just come back over here and i think that's about it nothing else to do right now and we can go and add our next layer so you can see over here that will add some text and some of these shapes and maybe a button or two so i'm going to come over here add my layer and let's go with a text layer so let's go with a headline so click on that what you're going to see are a bunch of different options here and you can always customize your text however you want but this is just a good way to create a template for the font style that you want to use and what we can do is just choose one of these options so maybe we'll choose this one right here and then i'll click close right there and then we want to go to the content tab and again just remember that you want to make sure that you select that layer and over here we can just come in and remove this and then just paste in our text so you can see right here that i say reprovide the best seo services and then i have some html right here to break these two lines up and you're probably wondering or saying this doesn't really look that good so what we want to do is we want to format this so i'm going to click on this right here and then for the line break what we're going to do is just go with the manual options so it just squeezes everything together and then we can drag this around to wherever we want to place it and you also have these other tabs right here so you can style the font if you want to change the font size so what we can do is we can change the font size right here so maybe we'll come in here and we can type in 64 right there and if you think it's too large then we can just make it smaller also so we can do something like 54 and okay so that looks pretty good and then what we can do is change the boldness right here if you wanted to to make it a little thinner if you guys like or maybe you like that boldness so we'll just leave it just like that and then we can go and preview this so you can see that this is what it looks like and sometimes the font or the style doesn't carry over to the preview screen so we want to make sure that we see it on the website so i'm going to leave it as is because this is the font that we actually want so what i'm going to do right now is just click save right here so we can add another layer but what i think i want to do is i'm looking at this image right here and i think we can make the colors a little bit brighter so i'm going to go back into the slide options right here and in the background section i'm going to click back into the color right here and i think i'm going to move this and let's see what happens you can see that the color starts to get darker and i'm going to click the check mark just so that we can see so now you can see that it looks a little different and i want to add some additional color down here so i'm going to go back in here and i think that the color kind of just flows down as i move this over so i'm going to make this all the way over here and let's see what happens now now it's just one large color i don't know if you guys like this or not but i think it looks a little bit better maybe i'll play around with it some more but you can see it's just brighter and it looks a little bit more professional to me so you guys can play around with this stuff if you guys want i don't really know what all this other stuff is going to do but that's really up for you guys to play with okay so i'm going i'm going to just move this stuff around a little bit let's see if we can do something like this and click ok right here so there we go i'm gonna go and check it out one more time don't want to waste too much time here but i want to make sure that this thing looks cool and i think that looks pretty good so now what we're going to do is we're going to add another layer and by the way if you guys hear some banging outside i live in new york city and there's a bunch of scaffolding outside always got some type of construction going on and right now the building is doing some renovations and all that stuff so you'll hear something but we got to get these things done we got to help people out so we're going to add another layer right here so we're just going to go with a text layer and we can go with the content option this time you can select one of these but you guys know that we can format the text also so what i'm going to do is just select any one of these go ahead and just choose one and you can see right here it looks like we have two layers i accidentally clicked on it multiple times so i want to just remove one and then now you can see we have this layer and then we have this layer right here so i'm gonna click into this one right here and again just select one of these options and then click close right here it's pretty small but that's okay we're gonna move it down here for now and then go into the content tab right here and just replace our content and we can just paste in some demo text just like that and so you can see it right here and what we can do if you guys want to is i'm going to remove the html here because i don't think we really need it and i'm just going to push in shift and enter right there and now what i want to do is i'm going to go to the style tab right here and just change the font size to maybe 22 just to see how large that is and if i wanted to i can change any of this other stuff so maybe we'll just change the line height right here to 32 just to see and give it some space right there and that looks pretty good so what i want to do is i want to place this in a spot where it kind of lines up with this stuff right here so what we want to do is we want to line this stuff up so what i'm going to do is click on this first layer and then go to size and positioning and you can see the x and y coordinates right here 29 by 184 so if i click on this one and you can see right here it's going to be 28 by 341. so the x is this coordinate and the y is this so i'm going to change the x to the same as the top so it's going to be 24 and just move it over and now all the stuff should line up just like that and now we can preview this really quickly and you can see that this looks pretty good if i wanted to i can shift it over some more but i think we'll just leave it just like that and now what we're going to do and we can do this for both of these is we can add another animation right here if you guys want so we can come into the animations and just come down here and just select one of these options there's so many different ones to choose from i think i'm going to do short slide from left and you can see right here that which one are we on right now i think is it this one or this one it's this one so i'm going to remove this like this so we can click on this and you can see that it shows up just like this and it looks really good and we're going to play around with these animations some more a little bit later so i'm going to click on the save button right here and we're gonna add some buttons now so you can see over here we'll add two buttons just to show you how to add those and then we're gonna be done with the slider and move back on to our website because the steps to create another layer or slider is pretty much the same so you can add as many as you want to your slider so what we're going to do right now is add a button so go ahead and click on that and you can see there's a bunch of different options here i'm going to choose one of these ones these round ones i don't know which one i like more i think i'm gonna go with let's go with this one right here and we can change this color a little bit later so we're gonna just drag it right there and what we can do is first we can close this and you can drag this around and all that stuff we can go to the content tab for this layer and we can type in our text right here so i'm going to remove this and paste in some text and maybe i'll just change this to work with us and delete this so we have that text right there and we can customize this stuff a little bit first i'm going to center this and it doesn't i don't think it matters too much if i select this one but i'm going to go with that and then let's just see let's just center that right there with the style tab right here we can change the font size so right here i'm going to change this to 14 and over here we'll do 28 and we can make this 700 if we want to make it bolder and maybe we'll change this to one right here so i'm going to change this number one px just like that and you can change the font family if you want so i think i'm going to come in here and just change this to source sans pro so just select this one and the last thing i'm going to do is i'm going to come in here and change the background color to an orange color so you can see right here it's ffa 737 and i'm going to click out of this so you can actually see it click ok right here and the last thing i want to do is add some spacing to this button over here so we're going to go with some padding so what i want to do is i want to leave this unchecked right here because if i link this then everything across the board is going to change the same color and i'm going to type in 10 right here and 40 right here 10 right here and 40 right here and you can see that this is what the button looks like just like that if you wanted to add a border color you can you can also change the roundness over here i'm going to leave everything as is i'm going to click update or save right there and these little things take a little bit of time so you just saw that the button we're not even done with it yet but it takes a little time just to customize it the way that you want to and what we can do is we can go to the size and positioning i think this was going to be 24 if i'm correct for that x so i'm going to come into this other one yep it's going to be 24 for this x-axis to keep it on the same line so i'll just type that in right here and we want to know the y-axis because if we're going to put another button right here we want it to line up on the top okay so the last thing that we can do is we can go to the hover right here and if you want to have this hover to a different color so for example we can go to this slider right here and you can see when you hover over it it doesn't really change colors so if you wanted to add a hover color then you can come over here to this section so once you come to the hover tab what you can do is you can change the color for the text and the background when you hover over this so if you want to do that just come into the background color you can change it to whatever you want so if you wanted this orange color or you wanted to paste in a color code like this you can so you can see right here this is ffb251 and maybe i'll make it even darker so we'll do something like that and let's see how that looks i'm gonna just click on i guess i'll click save first and then we'll click on the preview button once that saves so that we can check it out we have our animations that show up and we have our button right here and we hover over it and you can see that we're gonna have some animations and some stuff shows up too fast so we'll we'll fix all of that but you can see we have our button right here and when you hover over it it does change to a different color so that's pretty cool so i'm going to just show you how to add a link to this button right here so we still have the layer selected and what we can do is click on actions right here this is how you can add a url and what you're going to see is that we have our button right here and then you have a bunch of different options so you can link to another slider image if you click on the button or you can add a url so you can see right here we're just going to add a simple link and the interaction is going to be a click and then what we want to do is put in the url right here so maybe we'll just type in something like our contact page so http s colon slash slash www.and um let's go with about actually let's do it with the about page because i don't really like to put a button right there that just goes to the contact page and you can select whether you want this to open up in the same window or another window and that's all we have to do so we can just close this now and i believe this is going to be a link now so when you hover over it you can see that we have that finger just like that and we haven't created that about page yet but when we do then you will have a link to it just like this so what should we do now should we add another button or should we talk about these animations because you can see right here that the text for these two they show up right at the beginning but the slider kind of takes some time to load so what i want to do is just move some of this stuff over so maybe we'll move that and i'm also going to move this one so i'm going to click and drag it over a little bit and you can cascade the stuff you can do whatever you guys want with it put them in whatever order you want and then if you want to make this stuff longer you can actually click on them and then you can change the duration right here so maybe we'll change all of these to 1000 also because that's going to make it longer so what we want to do is just come down here click on this and over here we can change this to 1000 also oops that's 10 000. so let's do that let's click save and you can see that there's a cascade now and we're going to click preview just so that you guys can see the slider should load and then the text kind of appears and all those layers appear a little bit later and you can also delay those or slow them down you can add additional seconds all that stuff so it's really up to you guys let's move this stuff out just for fun so we'll move it all like this and when i actually do this stuff i do play around with that just to make sure it looks good but i'm probably wasting way too much time here for you guys so i'm gonna just move on really quickly we're gonna go back to the main slider let's get out of this section and what we're gonna do is duplicate this one so i got this button right here and i'm gonna come up here and just duplicate this and i'm gonna take a little break because i think there's like a garbage truck or something outside um it's about 12 a.m here so we're just gonna take a little pause and let that garbage truck do its thing and then we'll come right back so i think the noise went away which is awesome and we can get back to recording right here and what's really great about using the duplicate button for a layer is that you're gonna have all the settings so the font settings the padding it's already set up for us and all we have to do is just come in here and we can just type in some text to change the button so maybe we'll type in services right here and we need to align this but first we can go through the styling so i can come in here and then for the background color we can change this to a blue color like that and click ok and we don't need to do anything with the settings you can change the text colors you find this stuff is already duplicated over from the previous button so that's great and then for the hover we can just come in here and we can change this color a little bit if we want also so maybe we'll put in that same blue color code and click out of this and then what we can do is just adjust this just a tiny bit so we'll just do something like that let's see how that looks so let's click on the preview button just so that we can see that everything is not going to line up perfectly but we can hover over this and you can kind of see it it's it's a little hard so what we're going to do is just make this a little bit better we're still in the hover and i'm going to make it lighter let's go lighter something like that and we'll click preview again we'll check it out and it should be a lot better there we go now you can see that it changes to another color so that's great and what i want to do now is just check on the positioning so what i'm going to do is click on this you can see it's 231 and 427 i'm gonna click on this one right here and we want to change it to four to five so click back into this one and we're just off just a little bit so we'll just click right there and then you can change the spacing if you want and now what we can do is add the url for this one so we're gonna go to action right here and we can use the simple link because again we're just copying over the settings from the previous button but this time around we're gonna change the page right here so maybe we have a services page and we'll just type in services like that and then we should be good to go just close it you're good to go i'm going to save this and that is our slider slider number one the only other things that we can do is down here you should see the different layers so if you wanted to you can say double click in here and change this to button two and then this one oops this is going to be the services button so we'll do that and then this one is going to be the first button so work button you can just rename the stuff this text is the sub headline and then this one is going to be the headline and then this is going to be our image and you can also add some additional stuff if you guys wanted to such as shapes and everything like that but we're not going to do that we're just going to make something very basic like this so we can just move these around in the order of what we want the stuff to flow in so we can do something like this so once you have the order and you don't need to do this you can just rearrange these things a little bit to make them a little bit more organized about when the stuff flows in so we're going to do a cascade like this just like this voila so you can see it's going to all flow in and i can show you on this page right here everything kind of just flows awesome so i'm going to click on the preview button just to show you one more time because i i think this is awesome this is one of the great things about the slider revolution that i really like you can see you can even make this stuff slow down if you wanted but i think that looks really good for what we want to achieve so i'm going to close that again save this and i'll let you guys play around with the slider i'm going to show you guys how to add a second slider image if you guys want so before we do that i'm going to go back into i think the navigation tab right here we have our arrows and you can just choose whichever ones you want we have the custom ones right here so i'm going to click save right there and let's i don't think they're going to show up until we have our second slider so we need to go and get that so if you guys want how to create a second slider image all you have to do is come over here hover over slides and then you're going to click on add slide right here and then you can just choose a blank slide so you can see that we have our second slider right here so when i hover over slides now we have slider 1 and slider 2. so what i want to do is just go through how to set this up a little quicker this time around not going to spend too much time because every step that i did in the first slider is pretty much going to carry over here so if you want to go to the general options and the defaults you can change the slide duration right here if you want there's not much that we have to do in the navigation options so i'm going to go to the slide options right here in background i'm going to choose the color option and then come in here and just remove this color code and i'll paste in 311b5b and you can see the color right there i'm going to change it to this tab so i guess i have to re-put it in so i'm going to put that back in and then if we want we can kind of play around with this stuff so let's just do i don't know something like this we'll just do something like this and we'll drag this around this is just random stuff that you can do you can see that the white kind of shows up over there and we'll just make it kind of small like that so i'm going to click ok right there and we can preview this just to check it out so we have our first slider right here and we can always move these over if we wanted to i'm gonna click on the arrow right here and you can see that we have our second slider right here so this is looking pretty good and now what we're gonna do is just add our first layer so i'm going to do an image right over here again so you can see that we have our layer right here and we can double click this and we'll go into our media library and i'm just going to scroll down and find this image right here and click insert and you should see it show up right here and again you can just drag it to wherever you want to place it you have the layer option right here so we can change the size and positioning right over here if you guys wanted to we can move it over just like this and then we can move it down and if we need to we can click on the preview button so that we can check it out so you can see we have our first slider right here and i'm just going to go to the second one i probably want to bring it down a little bit and if i really wanted to i can see what the x and y access on the first image is so i'm going to close this and just move it down kind of like that and i think that's going to be good for now and we can always adjust that later and just remember we're gonna put some text over here so before we do that we can add an animation if you guys wanted to so we can come in here and just click on the in button and then just choose the option that we want so maybe we'll go with slide transitions and we'll go something like short from the right this time i actually don't know if that's gonna look good let me do the other one short from the left so we'll do that and i'll click save right here and i can adjust the duration and where this goes a little bit later so right now i'm just going to add a headline so we'll click on that and once it shows up i'm going to select one of these we'll click on this one and click close and then go to the content tab and add our content right here so we have our layer right here and we want to remove this content and i'm just going to replace it with some text right here and we'll just change this to only manual and click on this and then what we can do is go to the style tab right here and you can change the text to whatever size you want so if we do 64 right here it might be too large so we might want to change that to 54 and then we can change the line height right here also to something like 68 just to give it some space and then if you wanted to change the boldness you can do that right here i think i'll leave it with 900 and then you can change the letter spacing also if you want so i'm just going to drag this over and place this wherever i want to put it so maybe we'll actually move it up a little bit something like that right there and we can go and check it out just to make sure it looks good and what we can do is just go to the second slider and you can see that we have our text right here so we'll put in a little sub headline and maybe a button and then we'll call it a day on this one so i'm going to click on the save button we'll probably want to add an animation so we can also just do that really quickly so we'll just come over here you guys already know how to do this maybe i'll do something like short slide from the top and then we'll cascade this stuff a little bit later so again click the save button and once that's saved now what we're going to do is we're going to come down and add a second layer so we'll do another text content and you can see we have the module right there i'll just select one of these options and i'm going to close this go to the content tab right here and we can delete this and paste in our text so you can see that we have the text right here and then i'll go to the style tab and for the font style i can change this to the source sans pro if i wanted to and then what we can do is change the font size so let's try something like 21 right here and you can see that that's too long so we'll do something like 16 and we'll do 32 right here so let me just put that in 32px and if you guys wanted to you can make it a little bit longer or larger so we can try 18. i just don't want to make it so that you can't read everything and we're going to place it over here and what we can do is we can just line this up so you can see that we have this layer right here and if i go to size and positioning it's 14 by 187 and then we click on this one and we want to move this one to 14 also and then if you want to move it up you can so i can move it up a little bit and we want to keep it at 14 just like that and then we can click save we can go to the animation tab right here and we can just make it slide in if you guys want so maybe we'll do slide in from the left and again we're going to cascade this stuff so i'll wait to show you guys how to do that i had to restart the or refresh this page so i have to re-record this section but what i want to do now is i want to add a button over here so hopefully this transitions well but if it doesn't this is why i had to restart everything and we're kind of just adding this to the video so what i want to do is just add a button so we're going to click on that you guys already know how to do this we're going to click on the button that we want i'll just move it down here and then we'll close this we can put in our text first so i'll type in learn more and then what we can do is we can first center this and then go to the style tab if you guys want we can change the font sizes and style so if you don't know what you used for your previous button you can actually go and check without erasing anything so we can just go to slider one right here and we can click on this button and you can see it says 14 28 700. so i'll go back and let's see if i can remember that so i'm going to click on this and it's going to be 14 28 and 700 right here but we want to change the background color so i'm gonna click on the color pad right here and what we're gonna do is just come in here and put in the color code ffa737 and you can see it right there and we're gonna come down to the bottom to the spacing and type in 10 right here 40 10 and 40. and once we do that we have everything that we need and we can come back up and we can change the hover style over here so i'm going to come down to the background color again and put in the same color code and probably just change it a little bit so what i could do is we can move this up or down it's really up to you guys so maybe we'll do something a little lighter like that so i'm going to click save really quickly and once that's saved i'm going to go to the preview page we don't have the animation we don't have the link yet but i just want to go to the second slider and you can see that we do have that hover option so i might change these buttons to be on the ends i'm not too sure yet so we'll just decide that a little bit later we're going to come back up here and we can add an animation so we'll just come in and we'll do a slide from the bottom and then we'll go and choose our action which is going to be a simple link so it's going to be a click and then we'll just type in https colon slash www dot your domain name so nyc brizzy dot com slash about i'll link it to the about page right there okay so we're going to close that and now what we want to do is make sure that we position it in the correct position so i know that all this stuff is on the 14 x-axis right there so i'm going to type in 14 right here if that makes sense and if you guys want to move it up or down you can also so maybe we'll move it just like that and click save and i don't know if this one has an animation or not so i'm going to click on this really quickly and i might have but then i had to refresh this and everything remember so i'm going to just add a an animation really quickly just like that and then we're going to just rearrange these because i think it's sometimes better to do that and then i'm going to add or change the timing for all the stuff to make it a cascade so you'll notice that all the stuff is going to flow in and probably flow in the loud loud noises outside it's going to flow in a lot differently than the first one so i'm going to click save here you can click on the play button if you guys want to but let's just preview this so i'm going to actually show you guys that you have the slide duration so this one is nine seconds so we can just wait for the nine seconds probably like five more seconds so five four three oh there you go and you can see all that stuff just flows in kind of cool just like that and maybe the last thing that we have to do is just change those arrows to be on the corner so i'm going to go back in here to the arrows tab and you can see that we have the alignment right here i don't know if it's because of this 30 right here i'm going to put it in at zero and see if that changes anything i think it does put it in the corner like that so i'm going to click save and then we'll just go back one more time and check it out but you can see now these are all the way on the edge and you can move them up and down it's really up to you here's our slider it looks really cool really professional and i'm really really happy with it oops i accidentally clicked on this so that it skipped that second slider but the animations are there awesome let me know if you guys have any questions but we are done learning how to use the slider revolution for our website and now we can go back and let's just click here we can go back now so again click save and we can start building the rest of our website so if you guys want you can click back here to edit anything that you guys need to i probably spent way more time than i wanted to on the slider revolution but i want you guys to really know how to use it so we have this right here let's go back to our dashboard so we can hover over our website name or we can go to our homepage let's see what happens if we go and visit site so you can see the website right here and we still have the old slider so let me show you how to swap this out so what we're going to do is we're going to go to the edit page and once we're back on the edit page right here you can see in the avada builder that we have the slider right here let's click on the edit button and we can go into this drop down and choose the slider that we just created and then click save right here now click update and that's pretty much all we have to do now if you go and click on view page you should see the updated home page now you should see on the home page your updated slider and you can see that we have the first one right here and then if we look at the second one you should see it right here and you might say well some of the stuff is a little too high and i want to move it down a little bit on my page so we can do that really quickly and i think i'm going to do that because i want to make sure that this page is as professional as possible so i'm going to hover over slider revolution and then click on my slider and i'm just going to adjust the alignment for all the stuff so right here i will just kind of come down here and scroll down and move it down a little bit and then for this other stuff i'll do the same so i'll move this down over here and then i'll move this down over here and this over here and this over here and then we can just align the stuff we can go over here to size and positioning this is 30 so we'll make this one 30 also right here and then for this one i'll make sure that this is 30 and i want to make sure that it's on the same line so it's 521 right there so we probably want to move this down to 5 21 also so right here it's going to be 5 2 1 just like that and then we can click save on this one and then i can move on to my second slider and we can do the same and this is really easy all we have to do is just move this down a little bit to wherever we want to place it and then we'll do the same on this stuff so i'll move this down over here and then this down over here and we'll just make sure that we align the stuff correctly so you can see that this is going to be 9px so we'll make sure that this one is also 9px and then i'll click on this one to make it 9px also and then we'll click save and that's it so i'm going to go back now to the wordpress website and i'm going to go back to the home page just to check it out one more time so now what you're going to see on the home page is everything looks really nice and aligned and if we wait nine seconds we'll see the second slider transition in and you can see all the animations just kind of cascade just like that so you want to make sure that you update the links to your buttons if you do have some and if you just want to make this a one-page slider you can just use the scene option instead of the slider option so let me know if you guys have any questions with the slider revolution otherwise we're going to move on and start showing you how to edit the rest of the website and also make sure that your website is mobile friendly and responsive okay so what we're gonna do is we're gonna go and click on edit page and once we're back on the edit page right here let's go to the page builder and you can see right here that we named this one the hero slider and what i want to do is show you how you can hide the slider on different devices so we know that this one's going to show up on the desktop and the tablet device and then this one says hero slider mobile so that means that this is for the mobile device so if you want to hide anything or make something show up if you click on the container option on the back end over here what you can do is you can see the container with all your general settings and you can come in here and customize the stuff we don't need to do anything so we'll leave it as is same with the design tab here if you wanted to add some padding for the section you can or some margin and you can change the link colors also right over here so there's nothing to do right here and then background we don't need to change the background color and you can see right here in extras rendering logic add conditional rendering logic for the element and you can see right here that there is a logic and if we click into this you can see it says device type so in this drop down there are different options so it says device type and it says not equal to mobile so when you have this selected that means that this section will not show up on the mobile device okay so i'll show you how to do this on the front end too but this is the back end and then what happened was we created another section and we want this one just to show up on the mobile so what we can do here is click into the edit and then go to the extra section and you can see right here again rendering logic it says device type we open this up and it says equal to mobile so the other one said not equal to mobile and this one says equal to so this one only shows up on the mobile device so that's how you can make different container sections show up on different devices and now let me open up the avada front end builder just to show you guys really quickly because you probably want to know how to do this so once you see the page builder here what we can do is let me just show you guys if we hover down a little bit so i can actually see this pencil here i can click on this and i can go into the edit elements right here and you can see that we have the tabs right here so these are the same tabs as the back end where you have the design background and then the extras right here and you can see right here it says rendering logic so this is the same thing that we saw in the background except it's more visual and you can kind of see what you're doing over here so again you can just click in here you have device type not equal to mobile and then if i came down to this next one and i clicked in here and then i went into the extras again we have the device type and then this one is for the mobile device okay so again this is the front end i like the back end better but you can use pretty much either one and you'll probably become familiar with one or the other if you like this one so that you can see what you're building then go ahead and use this one i'm gonna go back to the back end i it's just personal preference for me i think it's better so or it's easier so i'm gonna click exit to the backend page builder so now you should know how to hide different sections on different devices to make your website responsive but now what we need to do is we've already created the slider revolution slider for the desktop but we didn't talk about how to actually make the mobile slider so what the developers for this template did was they created a new section for the mobile device and it's just going to have some text a sub headline and a headline and then an image and if you want to learn how to edit the stuff we can just do it on the back end right here so in this first so you can see right here in this hero slider for the mobile device what we can do is we can just go in and edit these modules so you can see we have a headline a sub headline and then an image section right here and whenever you hover over these you can't actually see the text so that's a little confusing but that's okay so the first thing that you can see is we have this large container so if you ever want to go in here you can edit this you can change the content alignment you can change the url or the url target links so the first thing that you're going to notice is that we have this hero slider for the mobile device and so this is going to be for your um iphone android device all those mobile devices that you have and the reason why is because you probably don't want the automatic slider for the phone or the iphone so what we can do here is we can just edit what we see so we have some different elements we have a headline a sub headline and then an image right here so the first thing is if you want to edit the entire container or the column you can come in here and you can change the alignment you can change the design so you can see right here we just have one large box but if you wanted multiple columns or rows you can come in here and select those you can change the column spacing the margin padding and anything else that you see here so if you wanted to add a background image or color you can also do that for the section and just remember that you do have the extra tab over here where you can add some rendering logic but you don't need to do it for the column because we did it for the entire section and then you can change some of the colors right here so if you do make any changes you want to click on the save button so right now we're just going to go into these modules and show you how to customize them i will show you how to add your own entire section in just a little bit so first we can just go in here click on edit and you can see that this is a title module so all you have to do is just come in here type in your text and then you can customize it with these buttons and you have this one called toolbar toggle to expand the section right here and you can change the type of text or the type of title and then you can go into the design tab right here you can center the alignment you can change the font size and you can come down here and change the font family if you want and then you can do some other font spacings also so line height letter spacing all these things are at your fingertips and you can even change the font color and you can add an animation for this section also so again click on the save button when you do make changes so all you have to do click on the button and then put in your text right here so if you guys wanted to go ahead and do that and then click save and it's going to be the same pretty much for the second column right here so i'm going to talk a little bit slower just in case you guys want to pause the video for that first section what you'll notice in the second one is this is a text block so that's different than a title block so really the difference is going to be the type of formatting for the font and again all you have to do is just come in here type in the text and you're good to go but you can go into these different tabs right here so we have the design tab for the font size the font family so if you don't like the default font size then you want to come in here and change that so you can see you can just put in the number and value so if you wanted 32px you would type in something like that so 32px right there click save and then now that font size is going to be a lot larger okay so i'm going to actually just remove that and keep it as the default and then you have the extra tab over here so i'm going to click save and then the other thing for the mobile header is this image module all you have to do click in here you can remove this so we can remove that and then we can go to upload image and then in your media library you're going to have all your images here you also have the upload files tab if you want to upload your own image so in the media library right here we can just choose the image that we want so we're just going to come back in here and scroll down and find the image again and click insert and then just click save right here so we have our image right there and that's for our hero slider for the mobile device so what i'm going to do is just collapse this so that it goes away and now we're going to just show you how to edit these other sections so you don't always need all these sections in this website so if you want to remove any of these you can you can also just go in there and edit anything that you see it's really up to you guys what i want to do is just show you how to use the avada builder so that you can really customize your website so we're going to show you how to edit this section now and we already have it on the template right here it's the meet the team demo section so you can click on the edit button or you can just open this up really quickly so you can see that so usually the first thing that you want to do is come up here and go to the edit button for the entire container and make sure that the settings are set correctly for your website so if you're just using the template and you like how it looks then you don't need to make any changes and that's what i recommend because again the goal here is to use the professional templates to really make our lives a lot easier so that we have a website up and running as soon as possible so you can see that there is some padding for the top section so padding is just what's up here this is 100px and then there's some padding down here this is the default padding so if you wanted to add more padding to the sides or the top or the bottom this is where you would do it in the design tab and you can see if you have different colors or a different color scheme for your website you can update the link colors here for this entire section and you have these other options here again for background it's really up to you guys if you want to have a background color or image you can upload the stuff you can even do a video but we're not going to do that and this section is going to show up on all different devices so we don't need to go through the responsive rules here so if you make any changes click on the save button and then you can do the same with each of these columns so you can see that you can change the alignment you can change the content layout and anything else that you see here we don't need to make any changes though because everything looks pretty good so i'm going to just click save here and you have the headline right here again you can just go in and edit this you guys already did this for the mobile section so super easy i'll let you guys do that go ahead and pause the video if you want to and then down here you have your sub headline so again just click in here and then you can just change your text and if you wanted to add some additional stuff you have the plus button right here to add stuff below here so you can just click on this and then you can see all your different modules of different things that you can add so if you wanted to let's just say let's add something really random let's add an image just click on that and then right here you can upload the image and we'll go into the media library and we'll add let's say her right there let's click insert and then you can change the max width if you wanted to but we don't need to so i'm gonna go to the extras tab right here if i wanted to put in an animation we can do something pretty crazy like a bounce let's do that and click save and then click update just so that we can actually see what this looks like so once that's updated let's go and check it out really quickly just so that you can see that we just inserted that image so we have our slider section and then now we have this right here and we probably could format it or do whatever we want but you can see how easy it is to insert a module just like this and you can always remove it using the live editor i'm going to go back to the back end and once we're back here if you wanted to edit this image you can always go back in here and then you can come down and you can see that you can center this right over here so you can just click the alignment and then that'll center it okay so i'm actually going to remove this now just hover over it and click on delete and then it's gone just like that if you ever want to rearrange the stuff you can just click and move them around super easy so what we're going to do is we're going to just move on to the content boxes here and this is just another element so you can see that we have on the demo website three content boxes and you can hover over these and you can see that you get a hover color so when you come over here if you want to add the content boxes or edit them just click on the edit button you can add as many as you want so only three right here you can click on the edit button to edit the title right here and then change the background color and then you can search for whatever icon that you guys want to use over here and once you do that you can come down and you can flip the icon if you want to you can rotate it you can spin it you can change the color super easy stuff really intuitive if you just come in here and spend a little time looking at all this stuff the great thing about the avada theme is they do put in descriptions for everything also so if you guys are wondering what the heck is an icon image you can actually just read this description and then realize that you can upload your own icon right there and you can also link the icon at the bottom over here this is where you put in your description so you can see right here that we have the title with the icon and then the description section right here so you can pause the video to edit each one of these with some real text if you guys want and change the icons and you want to go into each one of these you can add some additional ones if you want so if you do then you'll get another box and that's pretty much all you have to do over here you can change the number of columns per row so if you do add one you probably want to change this to four right there and then if you wanted to add a different type of link like a button or something you can also do that over here so pretty easy and i'll let you guys just go through this on your own and on the design tab over here if you want to customize the formatting for the font size or the color or the body font or the content background color for this entire section of content boxes you can do that over here all right so you can see again the design tab and then inside this one sometimes it's a little confusing because you have the content box background color here but you can actually just go to the design tab here and customize the entire section for all the modules right so i'm going to click save right there let you guys play around with that and then we have another image right here that you guys just know now how to edit so you can see here if we come down that it is aligned to the center so if you guys want to swap that out with your own image you can otherwise let's collapse this section and let's move on to the next section so the next one is going to be the services section so i'm going to open this up and you can see that we have that image right here and then we have another services section here you can see that we have a different background color here and then we have background colors here for each of these boxes and then some content boxes also so you're going to realize how easy this is so there's only a few different things here the background colors and also the text links right here so we'll walk you through how to edit this next section if you want to add a services section so the first thing that you want to do is click on the edit button for the container and customize the section however you want we're going to leave everything as is but what we can do is come into the section for the background color so first you can see that we have the content link color and the hover color and then over here in the background tab we have the background color so if you want to change that you can just click in here change it from that navy blue color to any color that you want you can do a gradient or select an image or a video and then you can just click save just like that so now what i want to do is just talk about this section right here and it's super easy just like the last section we have a headline a sub headline and then you can add some additional elements if you want and then we have a content box down here so i don't want to waste a lot of time repeating exactly what you guys probably already know how to do you can just click on the edit button you can edit the text over here so if you can't see it you can highlight it i think that's because the text is a white color so you can see right here and i'm going to just click save right here and then you can edit this one you can always add an element if you want and then the difference right here is this content box this time you can see that it has four columns so if we go in here what you're gonna notice is that we have four columns set right here and then four boxes right here and again you can just go into each one of these and you can customize them with your own icon and your own icon color and then what you're going to do is come down to this section where it says read more and then you can put in your own url and then you can put in the text link right here that is going to show up as the link so you can see on the demo website that says let's work together right there and it's going to say let's work together right here and it's going to link to this page so a what we do page if we have that set and then at the bottom over here you have your text and it should be aligned to the center and all you're going to do is click save once you're done and you can do this for each one of these container boxes and then what you're going to do is go into the design tab and if i scroll down you can see right here that the content box background color is set over here for each of these content boxes okay so you can play around with this stuff on your own and you can see that the design tab is really the default settings for all of these containers so you don't have to go in one by one and select the designs and colors unless you really want to customize each box to be different you can just go to the design tab and format everything here and then it's going to carry over to each one of these boxes so you can play around with the title size and all that stuff i'll let you guys do that on your own and that's pretty much it if you guys wanted to edit this container you can come in here and you can play around with it also but i don't think you need to and you can always add some additional stuff so if you click in here you can see that you can add a new content box or you can go into the library if you have anything saved which we don't so we're not going to go in there and you have all these other options that you can just scroll through and play around with super easy and i'm going to close out of this and we can just move on to the next section so as you can see it's not that hard to really build out all this stuff it's a lot of just figuring out what works for you guys and the best thing about these templates is they're already professionally designed so we don't need to create them ourselves so you can see right here we have another headline sub headline and then a portfolio section like this and then a button down here so let's show you how to customize this section pretty quickly and hopefully i'm not going to fast but you can see how easy this stuff is so again we have our entire section right here headline sub headline and then a portfolio module this time right here and a separator and then this button right here so if you guys want you can pause the video to update any of these containers and then also these modules right here otherwise let's just come down here and talk about the portfolio module so if you want to have this portfolio section the first thing that you can do is come into the column and you can edit this section if you want but just remember we're using a professionally designed template so we don't really need to do anything here so i'm going to just cancel out of that and we have the portfolio module here and just remember we have this section and you can see that we're editing this part right here so these are links to different pages and i can open up one so you can check it out you can see right here we have a title section and then these little bullet points with different column sizes a banner right here and then some icon boxes another banner image and then a gallery so it's really really detailed and you don't need to go into all this detail but you can using the avada page builder because you have all those different modules so let me go back to the wordpress page right here and we're on the portfolio module right here we can click on the edit button and you can change the layout option if you want so if you don't like the grid option maybe you want something like the masonry grid it's really up to you and then you can change the number of columns so when i go back to this page right here you can see one two three and then one two three so there's six different portfolio images and three per column and you can see the spacing right here and then we have the number of posts per page right here you can change the portfolio titles if you want so this is for the links so when you open these up and you can change the portfolio display if you want and again it's really up to you guys if you want to make any changes maybe you don't even want this section if you don't you can always just delete it but if you do want the portfolio section in order to add the portfolio images or projects or pages you're going to have to go to this tab right here so what i'm going to do is just open up a new tab just to show you guys and it's no different than creating a page or a post you're going to see your list of portfolios that you can create right here just click on add new and you can make a new one from blank or you can just edit these ones so we can click on the edit button right here and what you're going to see with the portfolio right here is that you have the page builder and it actually creates another page for you so it's not like you just upload an image and just have some text but you can actually format the entire portfolio page to have something that looks like one of these so let me again just open this up and we can just go through the details really quickly and we're still working on the home page so don't think that we forgot about the homepage i just want to show you that this is what you would do for a portfolio page so at the top right here we have some details and we can come in here and expand this and what you're going to see is that we have the bullet point section so that means that this is the title section so remember in the page builder over here for the portfolio when we come in here and i think when we scroll down a little bit to the portfolio titled display we have the title and the categories so that's what's going to show up right here and then down here is our first section so you can see that this is a two column or two row section and if you want to know how to create something like this what you want to do is we can come down to the bottom and click on container and over here we can just select this one fifth and fourth fifth option and you'll see it show up here we can come in here and change this to 1 6 and if we need to we can change this and then you can just go in and add the text elements and the headline elements and that's pretty much all you have to do and you have your new container right here so you can rename this you can go into the formatting and change whatever you need to change and if you don't want it just delete it just like that so pretty much this is what you want to do to create a portfolio page and you can back into how this entire page is created going through the page builder right here so we're not going to spend too much time here because we're getting familiar with the home page right now i just want to let you guys know that in the portfolio section right here just click on add new or go to the portfolio list and then you can edit the existing portfolios okay so i'm going to close this and we're back on the home page right here so we just talked about the portfolio module and now we have the separator line so let me just open up the homepage again so that we can just reference that so over here on this beautiful home page we're going to scroll down a little bit and we have our work right here and here we go we have a little separator line and then our button so we can come in here and we can click on edit and you can see right here that there is no separator line it's just an empty space and that's because we have no style right here and then that's pretty much it we can go into the design tab and you can change the margin right here so that's going to give that spacing and that's all you got to do so pretty easy you can add um an icon and all that stuff if you want but if you want something simple then just leave that now you have this button right here and we can go over this really quickly and what you can see inside the button right here is if you want to edit the url you can do that right here and then this is the button text so it says view our work so you can change this to something else if you want and you can also just click on select link right here and you can find the page that you want to link to if you know it you can also search for the page right here or some keywords and then you can just find the link and click select right there and the other thing that i want to mention with the button is if you come down a little bit you should see the design section so either it's on this tab or this one right here so you can see that we have the button style over here and you can change the button style to have whatever colors you want if you customize it and then you can come down here and you have the hover colors and the text colors and also the button type over here and then you have your button border size and the radius so if you don't want a round button you want to put this as zero so that you have these sharp corners just like this so if you just use the default option then it does use the theme settings so everything is already selected for us to have the exact button that we see on the demo website right here so it's really up to you guys but i just want to let you guys know about that okay so you want to click on the save button if you do make any changes and now what we can do is come down to the next tab right here which is very similar to everything else that we've done and and so hopefully you guys are seeing how easy it is to use the theme builder from the avada theme so what we're going to do now is just cover this next section so we have a headline sub-headline and then these boxes right here with buttons to link to different parts of our website so we have this background color also if we come into the section the first thing that we want to do is we have our column right here we can go into the edit column and in the container tab over here you can see that we have our general settings and we don't really need to do anything but i like to remind you guys that you can come in here and change your margin and your padding your link colors if you guys want to and if you guys want to add a background image or color you can come into the background tab for the container and you can see that we have a color right here and we have the gradient tab and in the image tab right here we have our background image so if you guys want to remove this and replace it with something else you can just click on the remove button and then upload your own image it's really up to you guys so again this is just the default image right here and you do have settings for the background down here you can make it a parallax background you can do the fade animation it's really up to you guys to play around with this on your own and if you guys ever want to add a video background you can come to this tab and then you can put in the url or upload the video over here so you can see down here that you can put in a youtube video so you want to click save if you guys make any changes and now what we can do is talk about this section right here so we have our three columns right here and you can see in this first one if we go in here there's really nothing that sticks out to me that is done over here so this is just a smaller column you can see that you can change the width right here so if you want to make it larger you can select these other options but just know if you do do that it's going to shrink these other options over here or these other columns so really all we have to do is focus on this middle one and you can come in here you can change your title text and it is in white right there so if you want to you can change the color so you can see it and then you can change it back to what color was that it was white i believe right over here so you can see that disappears just like that and then you want to change your text for the text block right here also once you do that there is another four row column over here and these are just going to be pricing tables so if you come into each one of these and let's say that you have a service or you're a virtual assistant or seo writer or something like that and you want to offer your services then you probably want to use the pricing table so there are two different styles we can actually choose the style too and let's go and check it out so i'm gonna click on update so this one is style two all these other ones are style one so we're gonna come over here and we're just gonna refresh this and you can see when we refresh this that the style 2 looks like this so it has a box for the title and it just makes it a lot larger the font and everything like that so if you like that then you can go into the boxes over here and you can select that so it's always an option for you guys and you can change the colors over here so you can see that you have all these colors for your different options for the settings for this pricing box and then you can come over here so what you can do here is you can customize your pricing table so you have your title your price some information right here and then your button down here so if i go to the demo website you can see that we have our title price description and then the button right here and the only thing to really note is if you want to add some additional rows just click on add row right here and you can see that you can add a new row and you can remove this and you can remove any of these other ones you can also click in here to edit these and then for the button over here you want to remove this text if you want to add a new button and then click on the add new button and then you'll get this pop-up you can type in the url for the button right here so i'll just type in a pound sign right now and then you can type in something like start today right here and then you can center this and then what you can do is go to the design tab right here if you want to change the background color in the button style right here just click on customize or custom and then you can change the colors right here so if i wanted to i can put in a color code or i can change it to red so i'm going to make this one a little funky i'm going to choose a bunch of different colors just so that you guys can see what happens so let's go with green right here and then we'll click insert right here and now we have our text i'm going to click save really quickly and then click on the update button and then once this updates i'm going to go to my website and just refresh the home page so once we come to the homepage let me just scroll down to the pricing tables just to show you you can see that this is what my button looks like so super easy you can pause the video if you need to to customize this section if you want to have a pricing table for services then go ahead and update this what i'm going to do is come back to the pricing section right here and i'm changing this back to style one what i want to do here in my table is i'm just going to paste in the button text so that it stays consistent with the rest of the demo website so you can see right here that we do have a custom color code for the hover and also for the different gradients right here so i'm going to click save right there and just click update and again you can pause the video if you want to update the section right here with a background image your pricing tables and customizing these buttons otherwise what we're going to do is just move on to the blog post section so super easy you probably already know what to do so you can speed this video up if you need to but we have a headline a sub headline and then a blog post section right here with a button and you can see that there is a background color a little gray color right there so we're going to go back over here and first i'm just going to close everything and then we have our new section right here so what we can do is open this up and again you can change whatever you need to in the container if you want to change the width you can do that you can change the padding and the margin if you guys want and the link colors and then you can also change the background color right here for the entire section so once you do that you want to click save and then there's really not much to do just go into the title change the title if you want so maybe it's going to be our stories or latest happenings so let's see what we can type in let's type in latest news and then just click save right here and then you can add a little description if you wanted to like keep up to date with what we're up to or just leave this dummy text if you guys want to if you guys are just learning how to use the avada theme and then down here is the recent post section so what we can do here is if we go to the edit column what you can do is you can change the alignment or the content layout whatever you guys want but there's really nothing for us to do what i do want to do is just go through the background color so first you can see that we have the one column width so it's just one by one and there's nothing to be done with the spacing unless you guys want to but if you want to change the background color or image you want to come into the background and then you can choose the type right here so you do have image gradient or color and then if you want to change the color you want to do that right here so you can just drag this wheel you can click on any of these colors or you can drag the transparency or change the color right here so on the demo website you can see that there is a grayish color so there is a little break you can see that it's gray and then it turns white right here so i'll let you guys play around with that color if you guys want to and then once you're ready click save right here and then what you can do is go to the recent post and click on this and this is where you can choose the layout option so we're going with the standard option and there's nothing to really do unless you want to change the number of columns for the number of posts that you have per page so you can see right here the number of columns is three and then the number of posts is three also so you can see right here that it's one two and three and this first one doesn't have a featured image so i will be showing you guys how to create some blog posts maybe after we create all of our different pages so i'm going to go back here and you can change the stuff you can just drag the wheel or change the number if you guys want to and then you can come down here and see if there's anything else that you want to do so you can exclude certain categories from showing up for this section or you can just select certain categories if you have them for your blog posts and then you can show the meta the author name the category names you can just turn these on or off if you guys want to but i think what we have right here looks pretty good so it has the title the date and then an excerpt so you can go through this and that's how you would make the blog post section show up and again you can just click on the save button right there and then you're good to go so creating a blog post you would come over here and click on add new we'll go through that a little bit later let's just go through the rest of the section right now so you do have this separator if you go in here and it's just a gap so when you don't have any style or any option right here it's just going to be a gap and you can see right here that it's just the spacing right here so you could add a padding if you guys wanted to but this is just a module that you can use and you can go to the design tab over here and you can see that this is where you add the margin so it's negative 70 so it's going to be padding on the bottom of the separator so you can change the spacing if you want to and then you can just click save and then we have this button right here so we can click on this you guys already know how to edit a button you would just go and put in the url right here so if you want to create your own custom page or if you want the blog post page just type in blog right here so i need to make sure you spell it right but i'm going to go with the news link right here because we do create a custom blog post page for this website and you can see right here it says go to news so right here that's the button and you can change the color if you go to the design tab so again i'll show you that all you have to do is just come in here click on custom and then you can choose your colors right over here for the hover or just in general okay so i'm gonna click save right there and that's pretty much the blog post section so again the page builder is super easy to use i hope you guys are just saying why am i even watching this video i never knew the avada theme was so easy and it really is and i'm glad i'm able to show you guys how easy it is if you have any questions let me know otherwise we're going to move on to this testimonial section that you see right here so we're going to go back to the home page and again we're on the back end right here we're just going to scroll down to the testimonial section and you can rename this if you want and you can click on the edit button but first what i'm going to do is just open this up so it expands everything right here and then we can click into the edit button and what we can do here is just go through our settings so if you want to change any of the general settings you can right here the only really important thing is that in the design tab this is where you can change the top and bottom padding so you can see right here it says 100 px for the top and then 20 px for the bottom and you can see up here that this is the 100 px right over here and then you can see that it's a smaller gap at the bottom over here this is the 20px and you also have the right and the left if you wanted to add padding there the other thing is that you have the link colors here for the hover and the normal so if you just want to go in here and change the link colors you can and that's pretty much it if you want to add a background image we talked about this in the last section you can add a color a gradient image or video it's really up to you guys and then just click save if you do make any changes then what you can do is add your title right here so just go in here and then just put in your title and then you can go to the design tab and if you're using the html heading sizes you can select them here or you can use the font sizes and put them in and then you can also change the font family right over here so i'll let you guys do that on your own if you guys want to just pause the video and fill that out and just make sure you do that throughout this whole video if i go too fast or if you need to slow down just pause the video take your time and just rewatch sections if you need help you can always quest ask questions and all that stuff so now what we're going to do is move on to the separator and what you're going to notice i guess if we go to the demo site is that there's a separator with no line it's just a gap right there so if you want to do that you can add a separator and then you can go in here just select the no style option and then that's pretty much it you can go to the design tab and choose the margin right here so it's a 30 px gap but if you do want a margin or a separator what you can do is come in here choose the style that you want so maybe we'll go with double border solid that one sounds kind of cool and then we're going to go to the design tab and this is just for fun you guys can just watch what i'm doing maybe i'll add some margin at the bottom over here just so there's some spacing and then for the separator width i'm going to change this to 5 right here and we'll do center right there and the border size will do three and then we'll select any color that we want so maybe we'll do this blue color and then i'll click save right here and click update and once that updates i'm gonna come to the website and just refresh this and once the page refreshes if we come down i think the border is going to be pretty small but you should be able to see it so you can see it right over there you probably want to make it a lot larger if you want a border so that's all you have to do and if you don't like it you can always just go back into the section that you're working on right over here click on edit and then go to the design tab and change whatever you need to change so i probably need to put in five px here or five percent so it's really up to you guys i'm gonna remove that actually and i don't need to change any of this stuff i'm just gonna change the style back to no style right there and click save and i'll click on update in just a little bit but let's go and talk about the testimonials right now so disregard that border let's pretend that's not there and let's talk about our testimonials right over here so what we can do is we can just click on the edit button right here and you can see that you have your testimonials right here so if you want to go into these just click on edit you can change the name you can upload an image if you don't have one you can go with none or you can have an avatar like a male or a female so it's really up to you guys and then you want to change the image over here and then what you can do is add a border radius if you want otherwise at 100 it's just going to have these sharp corners you can put in the company name and you have a url for their profile or social media links you can put that in right here super easy so again pause the video if you need to you can also add some additional testimonials just like this and then go in here and customize it however you want if you want to remove any of these just click on the delete button and then over here you have your design so we go with the clean option we can turn on the navigation bullets so that we can actually flip through these so keep that on right there and then you can change the speed right here you can change the background color for this section the text color and that's pretty much it so i'm going to click save and again this is the testimonial section so we'll click update right there and then we're going to refresh this just so that it's cleaned up and now when we come over here we can just scroll down and we should see a beautiful and professional testimonial section now so right down here you can see i removed the spacing on the bottom and then we have these buttons right here and you can also add some additional testimonials if you want so you can pause the video if you want to have the testimonial section you can also just remove this entire section sometimes i like to have it sometimes i don't but what we're going to do is move on to this section down here where we can have these logos so let me just show you guys how you can add that with this little border line right there so let's go back to the builder right here and we're going to scroll down to our next section maybe we'll just collapse everything so that everything is cleaned up and then we can go to back to the section actually and right below it you can see that we have our image carousel so the first thing we can do is click on the edit column right here and we can go into the design tab and you can see that we have some margin and if we scroll down we should see the border right here so this is the border for the top that's this little line that you see over here so if you guys want something like that just come into the column and then just add a border size for the top and then you can change the color and you can also change the style if you guys want so i'm going to click save right there and now we just have to talk about how we can add these icons so we have an image carousel as you can see we'll hover over that and just click on the edit button and this is where you can upload your images you can do a bulk upload or you can remove all of these if you want or you can update them one by one if you do have logos so again you can just click remove and then upload your own image and if you have a url so a company website or anything like that you can type that in right here and you can do this with as many different logos as you want and over here on the right hand side what you can do is format the layout so you can see that we have four columns so only four logos show up at once and then we have some spacing right here and you can turn on the navigation arrows if you want and you have all these other options also so you can see that we turn off the image light box so you can't click on the logo so it doesn't pop up on your screen or anything like that but really you can just leave the settings as is if you do like this logo section which i think adds some credibility and also shows some of the clients or customers that you have then you should add this to your website okay so i'm gonna click save right here i'm gonna give you guys a chance to pause the video to upload your own stuff and just remember we do have logo images so you can use those also and then once you're ready let's round this out with our last section which is this call to action section down here so we can click on the carousel right here and what you can do in here is you can upload your different images so if you want to do a bulk upload for all the different logos you can or what you can do is add them over here so we have some already set up and if you want to you can click on the edit button and then you can remove this and then upload a logo for a client or a customer that you work with and then if you have a website for them you can put that in here also if you wanted to so we do have demo images that you can use to upload some additional logos or you can just remove these ones or add your own it's really up to you and on the right hand side over here this is where you go to customize the look and feel for the section so if you want to have a hover effect where you can zoom in if you hover on the logo you can do that and you can see that you can change the number of columns so we have four logos that show up and we have some spacing right here and down here you can add some navigation buttons if you wanted to and you have the mouse scroll and a border if you want and you can see that the image light box is turned off so you can't click on these images and they can't pop up on your screen so it's really just for logos but you can customize it however you want and again it's for this section right over here okay so i'll let you guys play around with this on your own and i'm gonna click save right here and the last thing that we're going to do is talk about the call to action section right here which is this box right here so really it's just a background image with some text modules and then a button that's linked to the contact us page so you guys already know that it's going to be really easy we're going to click in here we're going to look at the container you can change the design and the background you can see that there is some padding right here for the top and the bottom and then we have the link colors that you can customize right here so most of the time you want to have a different hover color than the link color because you want people to see an active link so if you want to modify these you can we can actually check to see the colors if they're the same or not and it kind of looks like they are but you never know so you probably want to just play around with the stuff and then you can decide for yourself the one thing in the container is the background image so if we click on image right here you can see that there is a demo image that is inserted so if you want something like this you can come in here you can remove this edit it or you can add a color or a gradient or even a video once you do that you can click save right here and then we can expand the section if you guys want and we're just kind of going through this but you can see right here this is just the headline where we have the title it's in white right here so you can change the color you can go into the design tab and you can change the size if you wanted to and we'll just scroll down here so that you can see everything you have the font color right over here also and that's about it so we're going to click save right here and then we have a sub headline if you want to say contact us and ask us a question or if you have some concerns or anything like that you can type them in right here and then you can go to the design tab once again and you can customize whatever you need to and then just click save and then we have a separator and we can see on the demo website that the separator is just some spacing so you guys already know because we've customized a separator before that you just want to go with the no style option and then in the design tab you can change the spacing right over here and the last thing is just this button that we've talked about before so you can add the url and then also the text and then what you can do is you can just look over here and see if there's anything else that you want to customize so you probably want to go to the design tab and you can change the style right here so if you click on custom then you can choose the colors that you want for the background of the button right over here and even the hover colors and there's also the text colors and everything like that so again if you have the theme colors selected in your theme setting then you can just go with the default option okay so i'll leave that up to you guys and then just click save right there and then pretty much that's it so we can just kind of close all this stuff and now we have our entire homepage all set up and you guys can customize this however you want and we went through how to make the slider responsive and you can do that for all these other sections also and again remember we don't really need to touch anything in the avada page options because everything was set up for us so you can make all the changes that you want if you have any questions about adding different modules or how to use anything or how to remove anything let me know in the comments section and just remember that the page attributes has the template selected right here so if you do make any changes you want to click on the update button up here or down here and then you're good to go so once everything is updated if you guys want you can go and check out your web page by just clicking on view page so now we should see the home page and we're going to go over the header section a little bit later but you can see right here we have our different sections and maybe you customize it maybe you just left everything as is what i want to do now is i want to show you guys how to create your own sections on a blank canvas or blank page just so that you guys know how to do it so maybe we'll just create one or two different sections and then we're going to go over how to edit or create our blog post because i want to get rid of this one just because it kind of looks weird without the featured image this is a default blog post right there so let's do that and then we'll go through the other pages we'll talk about the header and the footer and then we'll be done with this website tutorial learning how to use the avada theme and building a wordpress website so if you guys want let's go and create a new page and this is going to be a blank page so we can hover over new and click on page so what i want to do now is an exercise to learn how to use the avada builder and we're going to create this about page right here with a bunch of different sections so you can see that there are different sections with different modules we're going to insert all the stuff and customize it with background colors images buttons and everything like that so i think this is a great way to really learn how to use the bodybuilder because we can use templates all day but if you want to customize your own pages your website you want to make sure that you can use the avada builder if you don't care to learn how to create pages on your own you can skip the section and we can just go through the other templates but this is an exercise for people that want to really learn how to use the different functions and options with the avada builder okay so what we're going to do is just type in the page title right here so we'll just do about us and then we can come to the page attributes right here and what i want to do is just choose the template option so i'm going to go with the 100 full width option and then we're going to come down to the avada page options and we can just go through these tabs and select what we need to so we don't need to do anything in most of these but you can see right here for the page title bar what you can do is choose your option right here so if you do want the page title bar to show up then you can come in here and select these we're going to leave everything as the default what i want to do is come into the content tab right here and for the content padding i want to type in 0px for the top and the bottom right there and then i'm going to go into the sidebar right here and in the sidebar tab right here what i want to do is get rid of these sidebars so you can see at the top it says no sidebar that's the one that i want to select and that's pretty much all we have to do we can leave everything else as is so we can come up to the top over here and click on the publish button and what that's going to do is just save everything so if you don't want to publish the page yet you don't have to you can save it but i just want to do that just to save all the settings and then what we can do is turn on the avada builder so we have the live front end or the back end and again i prefer the back end so i'm going to click on the avada builder right here and you can see that we have the builder show up so once the page is updated if we want we can go and check it out just so that you guys can see really quickly so i'm going to open up a new tab and you can see the page right here we have this default background image with our title and then our footer down here that we're going to customize so what i want to do is first we wanted to turn on the avada builder so there's the live front end and also the back end and i prefer the back end so i'm going to select this button right here and you can see the builder right here and the first thing that we can do is come down to the page title bar and we can add a background image if you guys want to so down here you can change the font size and the font color and if you scroll down some more you can see the background color and also the background image section so if you want to change the background color you can just go in here if you want to change the background image click on browse and what we can do is find the background image that we want to use so i'm going to select this one right here and click choose and you should see it show up right here you can click on the update button if you want and you can also change the size of the background image and you can make it a parallax background image if you want also so once we do that we can come back up to the top and we can start building out our different sections so the first thing that we're going to do is we're going to create this section right here so you can see we have an image and then a little blurb section right here and so what we want to do is go back to the builder and we want to create our first container so you can see right here that we can go with the one half option click on that so we have our rows right here and you can see that we have two columns and the first thing that we can do is we can rename this section right here so we can say how about so we have our two columns right here and the first thing that we can do is come over here and we can put in our name for this section so let's type in history right here and then we can go to the pencil and click on that and if you want to change any of the settings this is where you can do it so this is where you can go to edit the container settings and all i want to do is come to the content alignment and i want to change this to the stretch option and then we can go to the design tab right here and i just want to add some padding to the top and the bottom so i'm going to type in 80px for the top and 90px for the bottom and this is just spacing and then we can come down here for the border size we can type in zero all the way across so we'll just do zero px for all of these so that we don't have a border and then if you guys want we can click on save or you can go into the background tab if you want to have a background color so we're going to leave this as white so i'm not going to change this so i'm just going to click save right here and now we have the settings for our container and we can go into these two columns and edit this stuff so the first thing that we want to do is we want to edit the left hand column over here so before we put in our elements we can click on the plus button right here to go to the edit column and what we can do is change the alignment if we want to so we can come down here and we can just center everything just like that and you can come down and see if you need to change anything else and if you don't you can go to the design tab right here and we have the width for the column right here and what we can do is come into the column spacing so we can add some spacing if we want so what i'm going to do is just put in 4.5 right here and then for the margin down here i want to add some top margin so we're going to type in 20px right there and we'll just click out of that and if you guys wanted to do anything else you can i'm going to put in zeros right here so 0px and then 0px and we'll do that two more times right here and we'll leave this as no and i don't need to add a background image so i'm going to click save right here and now what we can do is add our elements so we can click on the plus button right here and what we're going to do is we're going to find the title modules so go ahead and just scroll down and find that right over here and once you have that what you can do is just come down here and put in your text so i'm going to paste in the history behind our international seo company and you can format the text here if you want but we can also just come up to the top to the design tab and we can center this and then we can come into the html heading size and we can change this to h2 to change the font size and then if you want to change the font family you can also do that but i don't think there's anything else that we have to do so what i'm going to do is just come down to the bottom and just make sure and then click save right here and now we're going to add a sub headline so i'm going to click on element and i want to add some spacing so i'm going to find the separator so go ahead and find that right here go ahead and click on that and i want to choose the no style option so it's just going to be space and then i'm going to go to the design tab let's add in 15 px right here so go ahead and do that and then click save and now we can add the sub headlines so click the plus button again and what we're going to do here is find the text block so i'm going to scroll down and you can see it right here just click on that and we have one column right there and we can just come in here and paste in our text so i put in some short code for the avada theme and it's for this special looking s right here so if you want an initial or a letter to have a cool little circle like that you want to include the short code like this and just remember that this is a template page so you can always just go to the pages list and go to the who we are page and then you can see that text here also and this is just some description text right here so i'm going to paste this in right here and then i can go to the design tab if you want and all i want to do is just come down and you can see the font color here this actually looks pretty good so we're just going to leave that just like that and then what we can do is we can add another separator right here for our description section so go ahead and click on this and just find the separator or any module that you guys want to input and then we're going to come in here again and choose the no style option and then go to the design tab and we're going to add some margin so we're going to put in 15 px at the top over here and we'll just scroll down make sure everything looks good and it does we can click save right there and then we'll add one more text box down here so we're going to click on this and you can see how easy this is i like to say that when it really is easy and hopefully you guys are catching on and you guys are making something beautiful so we have our next text box right here this is for our sub headline or description section so you can see on the demo website it's this text right here so i'm going to just highlight this dummy text and i'm going to copy it and paste it in right here and that's pretty much all i'm going to do i don't need to do anything in the design tab or anything like that so i can just click save right here and now we have our first column for the first section and we can move over to the second column right over here so what we're going to do on this column over here is again go into the edit column and we can just center align everything and then we can come down and make sure that we don't need to do anything else we can go into the design tab right here and we can change the column spacing so we can put in 4.5 percent right here and then for the margin we'll type in 20px right there and once we do that we can come down to the column border size and we'll just put in 0px and i'm going to just copy this and paste it into these other sections right here and once we do that we can click save and now we can add our image right here so click on element and we want to find the image box so this image module go ahead and click on that and then we can upload our image so click on the button and in the media library right here you can use one of these demo images you can also go to upload files and upload your own images if you have any so just remember that that's what you have to do so we're going to just scroll and find this image right here so you can see it's a bunch of people kind of laughing working together we're going to click insert and you can see that it shows up right here and that's pretty much all we have to do so you can scroll through here and customize stuff if you want to you can make it round with the border radius but we're going to leave it as is so i'm just going to click save right there and now we have this entire section so i'm going to click update and we're going to go and preview this just to make sure it looks good so once it's updated we can go and check it out and you can see that we have our background image with our title and we can put in a sub headline if we wanted to so i'll show you how to do that and then down here we have our new section right over here so everything looks pretty good and we want to keep adding to this but first let's go back and add our sub headline and then what we can do is we can go over here and we can create our next section down here so our team members and some links to their social media if you want so i'm going to go back and edit this page and once we're back on this page right here i'm going to come back down to the avada page options and in the page title bar i want to come down to the section right here where it says page title bar subheading custom text and what i'm going to do is just paste that in right there and i'm going to click update just to save that and once that's updated you can go and check it out but that should add the custom sub headlines so you can paste in whatever text that you guys want we'll check that out a little bit later now what i want to do is i want to collapse this container and we want to add a new one so let's click on the plus button right here and the container option that i want is this one right here the one fourth one half one fourth so go ahead and click on that and you should see it show up right here the first thing that we can do is come in here and just rename this so i'm going to type in our team right here or employees whatever you guys want i'll click out of it and then we're going to click on the pencil right here to the container and we don't need to do anything in the general tab but i want to go to the design tab and i want to put in 90 px for the top and 90 px for the bottom and you guys can change the link colors if you guys want to for your own websites i'm going to go to the background tab and i want to add a grayish color so i'm going to paste in the color code f7f8f9 so once you put that in if you guys want click save right here and now we can add our different elements so all we have to do for this first part is come into the middle section click on element and then find the title module so i'll just scroll down and find this and i'll paste in my section right here so it says the right people in the right jobs and let me just show you guys again that that is the title right here so i want to add this sub headline so i'm going to copy this really quickly and we want to go back to our wordpress website right here and still in the title module i want to go to the design tab change this to h2 right there and also center this and then i'm going to click save and now i'm going to go back into the elements right here and find the text block so right over here go ahead and click on that and then i'm going to paste in my text right here and i'm going to go over here and just click center and we want to change the font size so i'm going to go to the design tab right here and what i'm going to do is type in 21px and click save and once that's saved if you guys want you can click on the preview button to open up a new tab and on the preview page right here you can scroll down and you can see that this is what it looks like so that looks really good and now what we can do is close this and add our container or another column down here for our employees so we're going to click on columns and we want to go with the one third one third one third option so you can see it right here so the first thing that we're going to do is we're going to go and edit these columns so click on the pencil on the left hand side and we don't need to do anything here but we want to go to the design tab and for the column spacing i want to add some spacing on the right hand side so i'm going to put in two percent right there and then for the margin right here i'm going to put in 30px and once i do that i'm going to come down to the border size and put in 0px and we'll put that all the way across so we'll just paste that in and then we can click save right here and we might as well do these other ones also before we put in the elements so let's click on the center one right here and then again go to the design tab and you can see right here in the demo page what we're doing is we're adding this spacing in between these modules so we want to add some spacing on the right so we want to add some margin on the right and the left hand side so what we can do for the center one is put in two percent right here and also two percent right here and again for the bottom margin we're going to type in 30 px and then we'll just do um down in the column border section we're going to do 0px so i almost typed that in the wrong spot but i corrected that so right over here just put in 0px all the way across click save and then we'll do the right hand side one over here so all we have to do is just do the column spacing on the left hand side right here so we'll do two percent and then 30 px for the bottom and then come down to the border size and again put in 0px all the way across and then click save right here once we do that now we can add our elements so click on the plus element right there and we want to find the module called person so go ahead and find that it's this one right here and click on that and what we can do is put in the person's name so we'll just paste that in right here and then we can put in their title so again i'll just paste that in and you can pause the video if you need to to type this stuff out and then for the description right here i'm going to paste in some dummy text so you can see that we have all of our text right here and then we can insert an image for this employee so i'm going to click on upload image and in the media library here i'm just going to find the image that i want to use and select that click insert and you should see the image show up right here and you can add a url for that image if you want to link them to a linkedin or a social media page whatever you guys want and over here you can customize the photo a little bit you can add a border you can add a color for the border and you can even make the radius for the border round so if you put in numbers right here it's just going to make the photo instead of having sharp edges be round so i'll let you guys do that on your own what i want to do is i want to come down to the social media icon section and i'm going to leave it as the default but what i want to do is i want to come down to this section and if you put in a url for any of these social media platforms for the employees profile or anything like that then an icon is going to show up so we can type in facebook right here so we'll just do https colon slash www dot facebook let's make sure we spell that right dot com slash nyc tech club and this is going to make a facebook social media icon show up and i'm going to come down to twitter and we'll also put in the same thing so we'll again type in https colon slash www.twitter.com nyc tech club and you can always follow me if you guys want so i'm gonna click save right here and i'm just going to update this really quickly and once that's updated i'm gonna go and check out the page really quick so on this page right here if i scroll down you should see our employee right here and we have his information and now we have these buttons right here to link to the profile pages so what i'm going to do is i'm going to pause the video to add my other two profiles right here you can do the same if you want i don't really want to repeat the steps because it's just going to waste some time and you guys know how easy it is to do this so if you guys are ready let's just go back to the edit page and what we're going to do now is we're going to come down to this section and create this where we have another section with a button right here so i'm going to go back to the wordpress website so once we're back on the edit page right here you can see that i added some additional employees right here and i just changed their name the description and the profile images but they have the same padding and spacing so what i did was i actually duplicated these and then just dragged them over and then i updated them so you can do that on your own and once you're ready we're going to create our next section so the next thing that i want to do is create the next section which is going to be the career section right here so we're going to go back to the wordpress website and we want to create a new container so go ahead and click on container and we're going to go with the one half by one half option and right here we can put in our title for this section so i'll type in careers and then i'm gonna go and edit this container so over here all i'm gonna do is go into the design tab and for the top padding we'll put in adpx and then for the border size we'll put in 0px and we're going to copy this to make it faster and just paste it in to these spots right here and if you want to edit anything else you can otherwise click on the save button and before we add our elements right here i'm going to go into the edit column so what we're doing here is we're setting up the alignment for the column first so we want to center this or have it as the flex start right here and then we want to go to the content alignment and i want to put this right in the middle so everything is going to be in the middle and if you guys want to we can go to the design tab to play around with the spacing right here so what i want to do is i want to add 4 on the right hand side for the column spacing just for the gap right here and then what we're going to do is for the margin right here we'll put in 0px and we'll also put in 0px for the border so what i'm going to do is just come down here and paste that in so again 0px all the way across and once we do that we can click save unless you want to add a background color now let's click in the element right here and we want to add an image so click on that module and then right here we'll click on upload image and in the media library right here you can just find the image that you want to use so i'm going to select this one and click insert and now you should see the image right here and if you want to change the size or anything like that you can i'm going to come down to the alignment right here and change this to the left and then that's pretty much it so i'm going to click save right here and we should be good to go so now what i want to do is come to this other column and we can click on the edit button right here and this time around what i want to do is go into the design tab right here and we're going to put in 4 for the column spacing on the left hand side and then four percent on the margin for the top and then 0px right here so you can type this in if you guys want and then i'm going to copy this and i'm going to paste this into the border size over here also so we'll just paste this in in these four spots and then click save right here now we're going to add our title module so click in here and then scroll down and find the title module so it's right over here click on that and we can come down here and just add our title and we'll just paste in some text right here so it says are you dedicated hardworking and fun join us because this is recruiting people for a job or career at our made up wordpress website so in the design tab right here i'm going to change the font size to h2 and you can change the font family and all that stuff over here if you wanted to so let me just scroll down and i don't think there's anything else i need to do here so we're just going to click on save for now and i might need to center this but we'll see after we add all of our other stuff so now what i want to do is i want to add another text box so we'll come back into our elements and i'm going to scroll down and find the text block right over here and we'll just come down to the bottom and paste in our description so if you need to go ahead and pause the video type in some text that says maybe something about the company or why they should work with you guys and then you can go to the design tab and if you want to change the font size or the font color you can otherwise just click save right there and we're going to scroll down just a little bit and now what we can do is we can go and create the separator or some space so come in here and find that separator module and it's right over here you guys already know how to use this we're going to come in and we're going to go with no style and then i want to add some padding so over here for the top i'll just do 10px and then we'll click save right here just for some spacing and then we're going to go back into the elements and what i want to do now is i want to add a button so go ahead and click on this and you can see on the demo website that the button is right over here so what we're going to do is the first thing is you can put in the url so we have a careers page already created for us with this template so i'm just going to type in the website name so you want to type in your own website right over here and then you can just type in slash careers right here and once you do that you can come down to the button text and you can always update this to be whatever url for any page that you want also on your own so you don't need to use the careers page that's just the one that we're going to use as the demo so right here where it says button text we can type in something like seed job offers and then what we can do is we can come down and see if we want to change anything else and if we don't we can just go into the design tab right here and if you guys remember we can change the colors if we go with the custom option so what i want to do is i want to change the button gradients for the top bottom left and right and the hovers and all that stuff so we're going to come in here and i'm going to put any color code so if you guys want you can pause video to see this color code right over here if you want the same one and then i'm gonna click on select color just to change that and i'll do the same for the bottom right here and we're gonna do it for the top and the bottom for the hover right here also so again just the same color code i'm just typing it in it's rgb 255 167 5 5 and 0. and once we do that we can come down to the button text color come in here and i'm going to type in a custom color code so it's 5d5f64 go ahead and type that in if you want this gray color and then for the button accent hover color we're going to change this to a light purple color so i'm again i'm going to put in a custom color code and this time around it's going to be 607 afe so if you want this purplish color go ahead and type in that color code and once you do then we can just come down here and i want to change the button border size right here to two so you can drag this wheel to 2 if you guys want and then the border radius i do want it to be 25 because i do want the rounded edges so we'll leave that just like that and for the button border i'm going to put in the gray color code 5d5f64 and then for the hover color right here i'm going to put in that purple color so that's going to be 607afe once again and then you can change the button size if you want to we'll leave that as default we don't need to change a lot of this other stuff so unless you want to include an icon right here we can just click on the save button so now we should have our section all completed so you can see right here we have the career section with our image and our two columns so what i want to do really quickly is i'm going to click on the update button because i want to make sure i save those changes so once it's updated let's go and check it out so click on view page and you can see on this page right here we can scroll down and we can see our new section down here where we have our see your job offers button and what we want to do is make sure that this page actually looks good on the different devices so what i'm going to do is come back to the edit page right here and let's go to the avada live so that we can actually see what it looks like on the laptop the ipad and the mobile device and once you come to this page right here if you want to view what the website looks like on different devices just click on this responsive button and then you can see the different devices here so we can see what it looks like on the ipad and everything looks pretty good right here so i like how this looks but i can go to the other device so i can go to the iphone or the android or mobile or whatever you want to call it and i can scroll down and you can see this looks pretty good but over here we can customize this a little bit if we wanted to so let me just show you guys an exercise on making your website responsive if you want a mobile section so instead of going and customizing this in the live builder i'm going to go back to the back end so i'm going to click on exit right here and then go to exit to back end so back on the edit page right here one of the things that we can do is we can go into the edit for this column for careers so click on the pencil and if you guys want to make it so the container or the section only shows up on certain screens you can see right here in the general tab where it says container visibility and what we can do is turn off this container for the small and medium sized screens and only show up on the large screens which pretty much means the desktop or the laptop devices and then we can create another section that shows up for the small and the medium screens which would be the responsive mobile friendly or the ipad devices so this is what you can do in addition or instead of going in and creating a logic or rendering logic okay so over here all you have to do is come into the general tab and come down to container visibility right here and you can just select the screens that you want the section to show and then click save so once we do that now what we're going to do is we're going to create a new container and now what we're going to do is create a new container and the one that i want is the one by one so go ahead and select that and we're going to come in here and type in careers for mobile just so that we know that this is for the mobile and then we're going to go into the edit and what we're going to do is come into the general tab and the first thing i want to do is come into the content alignment and just stretch that and then for the column spacing i'm going to type in 0px and the main thing that we want to do is come down to the container visibility right here and just turn off the large screen so this section only shows up on the small and medium screen and what i want to do is go into the design tab here and i'm just going to and what i want to do is type in some padding so for the top right here we'll type in 70px and for the bottom we'll type in 0px and then we can come down to the border size right here and let's type in 0px all the way across so i'm going to copy and paste that in over here and if you guys want to change your link colors you can do that otherwise let's click save so we have our section here and now we're just going to recreate this but make it mobile friendly so let's go back to the wordpress website and let's go and what i want to do for the careers for this mobile section is first let's go into this column right here and let's go and click on the center option and then we can go to the design tab and let's just put in some margin for the bottom right here 0px and i'm going to copy that and just paste that into the border size right here also so we'll just put zero right there click save and now we can add our first element which is going to be that title module so again just find the where is it title right here click on that and what we're gonna do is just come down here paste in the same title and then we'll go to the design tab we'll center this put this as h2 and then you can format whatever you want and we'll click save right there and now i'm going to add some spacing so i'm going to go into this next module and we're going to choose the separator and i'm going to go with the no style right here and from trial and error i know i want to put in some margins so i'm going to put in 15 px right here and we'll just leave it just like that so i'm going to click save and then we're going to add some text right here so this is the sub headline we'll go and find the title block or the text block right here and click on that and then we're going to come down we're just going to come in here and i'm going to paste in the same text and what i want to do is highlight all this and just center it and then we can click on save right here and we're going to add another separator so go ahead and click on this again and hopefully you guys are learning now that we're using this builder to really just create whatever we want so you can see right here i'm going to use the separator again and you don't need to use the borders we're going to go with no style and this time around i'm going to choose a lower margin so i'm going to do 10px right here and i'll click save and now what we can do is come down to our next element click on that and this time around we're going to add our button and then we'll add the image after this so again we can put in our url right here and this is just my website name slash careers and then for the button text it said see job offers so we'll put in the same thing right there and we're gonna scroll down and just make sure that our settings are correct so we'll go with center for the alignment and then i'm gonna go to the design tab and we're going to go in here and choose custom and this time around i'll go a little faster right here because we're using the same colors that we did for the larger screen section so this is the color code and i'm going to paste it into all of these sections so if you need to you can pause the video so that you can check that out and then we're going to do it one more time right here and then i want to change the button text color right here to the gray color so again that color code is 5d5f64 and then the accent color is going to be the purple color so that's going to be 607afe and then we're gonna change the border size right here back to two so we'll just drag that like that and then we have the round radius right there and i need to change the border color to the gray color so it's gonna be five d five d5f64 and then we'll go with the hover color right over here which again is 607 afe and i believe that's all we have to do so we'll just come down and just make sure so that looks pretty good so i'm just going to click save right here and now we can just add another separator and then our image so click on the element button and let's go down and find our separator and then we're going to come in here and choose no style and then go to the design tab and let's put in 60 px and again if you guys don't know the right margin or space input in you can always just click on the update button right here and then go and view the page okay so i'm gonna go into the elements and we're gonna choose our image module this is the last thing that we have to do here so we're gonna click on upload image and in the media library we're gonna find the same image that we found earlier and click on insert so you can see it right here and i just want to make sure that this is centered so i'm going to come down to the alignment and just center this and click save and then we are good to go so now we have our mobile responsive section for the careers right here if you guys want let's click on the update button just to save everything so once that's updated now let's go and create our last section for this page which is going to be this call to action right here so if you guys want you can pause the video and try to recreate this on your own if you guys want to walk through it together let's go back to the wordpress website and we're going to collapse this and once that's updated now what we're going to do is we're going to go and create the last section for this page which is this call to action so there's a background image a title section text block and then a button so if you want to pause the video and try to recreate this on your own go ahead and do that if you want to do it together let's go back to the wordpress website that we're learning how to make and we're going to come down here and we're going to collapse this section and let's go and add a new container so we're going to do the one by one and then we're going to go into the general settings right here and what i want to do is just stretch this and then we'll come down and we're going to go with the column justification in the center right here we'll do 0px for the column spacing and then what we can do is go into the design tab and i'm gonna add five percent for the top spacing and then six percent for the bottom and again you can play around with these numbers just to figure out what the right spacing is for your website and then i guess what we'll do is just make sure that we don't need to add anything else and once you're ready let's go and click on the save button right here and if you guys need to you can click on the edit container and we can align everything to the center right here and then we can go into the design tab and add some margin so right over here let's click in here and let's type in 40px for the top and the bottom right here and then what we're going to do is come down to the column border size and we'll type in 0px and we'll just paste this in all the way across and the only reason why i really do this is because the demo templates do it so i don't really know if you actually need to do this or not but i like to add it just because the demo template has that and that's what we're trying to recreate and then at the top over here you can see in the width section we don't really need something super wide so for the column with all of our content we can just center everything so let's go with the one half option and click save so now this is what we should see everything right down the middle and we can add our first section or actually what we should do is add the background and i forgot to do that so we want to do that for this entire container so let's go back in here and let's go to the background and let's add an image so click on this and then click on upload image and in the media library go ahead and find this image right here and if you don't have it we do have a demo folder with all of our different images that you can select and upload on your own and then you want to click on the insert button so you can see that we have it right here and we can just scroll down and see if we need to do anything else and what you can do is you can add a parallax effect if you wanted to right here and you can also change the positioning for the background image also so what i want to do is just come down to the background blend mode and i want to add an overlay so i'm going to select this and once you do that we can go to the section up here in the color and we can add an overlay color so once the page is updated let's come down and now we want to add our last container so you can see right here on the demo website we're going to create this call to action so if you want to pause the video to try to recreate this on your own you can if you just want to go through it together let's go back to the wordpress website that we're learning how to make and let's go and add a new container so we're going to go with the one by one so the first thing we're going to do is just rename this so let's do call to action and once we type that in we can go over here and click on the settings for this container and what i want to do is change the alignment to stretch and then we're going to go with center and we'll put 0px right here and once you do that let's go to the design tab and we can type in five px or five percent right here and six percent right here and i know to do this because of the demo page so sometimes you have to play around with this to get it right so you just want to change the padding or the margin and you can see what they are over here and if you want to change the link colors you can otherwise let's go to the background tab and i want to go into the image and upload a background image so we're going to come into the media library and you can choose any image that you want to use i'm going to select this one right here just because i don't actually have the one that you see right here i don't know why it doesn't show up in our demo content but that's okay we can just use this one and if you guys want to you can come down to the bottom you can add the parallax scrolling if you want and right here where it says blend mode you can add an overlay if you wanted to so we can just select that and click save right there so now we have the section and we want to go into the edit for the column right here and what i want to do is just go and center this right here and we can scroll down and i don't think there's anything else we need to do here i'm going to go to the design tab and what i want to do is i want to change the width to one half just so that everything is in the center and for the margin we're going to put in 40px right here and also for the bottom right here and again this is from the demo page and what we can do is come down to the border size put in 0px and i'm going to copy and paste this and we do this for a lot of the different columns for the different sections because that's what the demo website does so i don't know if you need to or not i just put it in just in case but again it's always really up to you guys what you want to do so i'm going to click save right here and you can see now we have our section so the first thing that we're going to do is go and add our title so find the title module and click on that and once you're in the title section we can just come in here and paste in our text and if you can't see it that's because i have it set to white right now so if you guys have it at black you can see that it says turn your prospects into buyers and what i want to do is just change this to white so i'm going to do that and then i'm going to go to the design tab and go with h2 and we're also going to center this so once you do that click save and then what we can do is add our section right below it so click on the plus button and we want to find the title or the text block so this one right here just go ahead and find that and then we're going to come back in here and paste in some sub headline and it's white right now because i'm just copying and pasting it in so i want to center this and let me just show you what it says just in case you do want to put this in it's just some gibberish so i'm going to keep it white because we do have that background so it's going to make it really show up and i want to go to the design tab and change the font size to 21px so i'm going to put that in right there and now what we're going to do is just click save right here now let's add a little space over here so click on this and let's go and find the separator so you can see right here we're just going to click on that i'm going to come in and choose no style and then we're going to go to the design tab and i just want to add 10px to the top right here just to give it some spacing so i got to make sure i put in pxnot pz so once we do that we are good to go i'm going to click save and now we can just add our button at the bottom so click on this and you guys already know we're gonna just choose our button and the url that i'm gonna put in is the contact us page so you can see it right here it's just our website name slash contact and then right here we're gonna change the text so i'm going to paste in contact us now and then we can just scroll down and we want to make sure we center this so i'm going to click center right there and then we're going to come to the design tab and we don't need to change the button style so we'll just leave it as is and you can see right here we have our button type and we also have the border radius and the size we're going to keep everything just as it is so we don't need to do anything right here we're going to click save and now you see this entire section so we should be good to go and what we can do is click preview if you guys want but i'm just going to update it just to save everything really quickly and once everything is updated let's go and view the page so click on this link and once you come to this page right here i'm going to scroll down and you can see all of our different sections and we're going to make sure that the new call to action section looks good so you can see right here that this isn't the exact image from the demo site but it works pretty well so we have our entire section and we are good to go so what i want to do now is i'm going to show you how to create your blog post just to clean up that home page and then we're going to really quickly go through the other pages and if there's some modules that i think you guys need help with we're going to show you how you can customize it but you guys have just learned how to use the avada page builder and it's really really easy and all you have to do is really just turn it on you can add whatever containers you want you can go and click on the edit buttons you can go into each of these and add columns and modules and customize them so if you have any questions about this page or the home page let me know otherwise what we're going to do really quickly is move on to learning how to create blog posts so if you want to learn how to create a blog post we can just hover over the existing post over here so click on post and then click on all posts so once you're on the blog post page you can see right here that these are a bunch of demo blog posts and this first one is a default blog post from wordpress so what i'm going to do is just remove this one but if you want to remove all of them you can click on this box right here and then just go in here click on edit trash or move to trash and then click on the apply button so what i'm going to do is i'm just going to delete the first one so we'll keep all those other demo blog posts and once that one's removed what i want to do is just show you how to create a new blog post so again you can remove all of these and start writing your own blog post i'm just going to click on add new right here and once you're on the add new post page what you can do is i'm going to walk you through how you can create this page so you can see the demo post right here so we have a title with a default background image which i think you can change in the customize page and you can always insert one on your own and then we have some text here and this is using the avada builder so that's how you get some of these custom buttons and everything like that so i'm going to show you really quickly what you have to do on the edit page and i'll let you guys just go to the demo post and you can just kind of back into how to create these types of layouts because you have a container here with a column that is two-thirds and you already know how to use the avata builder and then you just insert some text boxes some separators and then you have this checklist one right here also so really quickly let's go back to the wordpress website and on the add new post page this is where you would type in your title so i can type in something like favorite seo tools and then what we can do if you don't want to create your own custom page for the blog post is just type in the content right here and then come down to the avada page options and this is where you want to select the options and you probably want to make sure that they are the same as the rest of the posts so what we can do here is for show featured image we can turn this off it's off and then we can go to the layout tab and you can see your options here i don't think we need to change anything and we don't need to do anything in the header and for the sliders we don't have a slider so we'll come down to the page title bar and again you don't need to do anything here so we can go to the content tab and if you want to change the content with you can just change that here so we'll select no and then for the sidebars the second sidebar right here we want to choose the no option and that's just the settings for the demo template okay and then down here you can see that you can add your own categories so you can create your own or use existing ones if you want to add your own just type it in right here and then push enter and then same with blog post tags right here and then you can leave the post attribute template just as the default but if you want to add a featured image you want to click on this button right here and the featured image is going to be the thumbnail for your post on your homepage so i'm going to select this one if you need it this is a demo image that i downloaded so it'll be in the zip file that you can access in the youtube description so we can just set it and you can see that shows up right here and we'll leave the format as the standard and you can click on publish if you type in your content but if you want to use the avada builder you want to turn it on so you have it right here and then you can just go and add your containers and again you can just open up any of these blog posts and you can see that we have one right here just click on edit and then you'll come to this page right here and then you can see the blog post right here and you can see that we have a container so you can click on container so you can go back and forth kind of like this you can come back to this page click on add container and then choose the container that you want go into the edit settings and then you can go to the existing template right here for this page and then go into the settings and then you can select what the template has okay so i'm gonna let you guys do that on your own because really this is the same as what we did on the home page maybe even less technical because all it is is just some text blocks and some separators but it does take a little bit of time to go through this stuff including the edit column and the container and then formatting everything but you can do it on your own so i don't want to spend too much time on this video just walking you through something that you can walk through on your own once you have the blog post updated what you want to do is just click on the publish button and then you'll be good to go so if you guys want to you can pause the video to create your own blog post and edit them and there is a shortcut that you can also go with so if you go back to the all post page over here on this page right here if you just want to go into one of these templates and update them you can just click on the edit button and then what you can do is just go into each of these modules and click on edit and then you can go and type in your blog post and you can edit whatever you guys want and on the right hand side over here you can change the category names and you can also update the featured image and then you can just click on the update button and then you'll be good to go so it's really really easy to just update these templates also but it's really up to you if you want to go and create new ones or if you just want to use the demo templates so i'm going to leave that up to you what i want to do now is i want to go back to all the different pages that are created for this demo website and i just want to walk through them just to make sure that we know how to use these different modules and once you're on the pages list you're going to see a list of all the pages for this demo website and i have them opened up over here so we have a careers page a what do we do page another page about google adwords and the location or where we work and then a contact page right here so what we can do is we can learn how to create all of these pages just by looking at the avada page builders for each of these so you can see right here that there are a bunch of different sections with a bunch of different modules and most of them you already know how to use so there are a few that you might not know how to customize such as this one with a border right here and also this section right here with this little timeline so what i want to do is just go through all these different pages and kind of review them and if we see anything that we need to cover like the slider over here then we can go through it and really figure it out together but i don't want to go and rebuild all these pages with you because i feel like that's going to be a waste of your time since you can just open these up and look at them yourself so right here on the pages list you can see that we have the careers page you can click on the view button to open up a page to show you what it looks like and then you can click on the edit button on this tab to go to the page builder or the edit page so what you're going to see on this page is the title so if you want to change that you can and really you can just go into each of these pages and just change the content if you like the layout if you want to remove anything you can you can add anything or you can build these pages from scratch what we want to do is just show you that you can just back into these templates by looking at them and seeing out seeing what the setting what you can do is back into them and you can go in and look at the settings for all the different containers and columns and modules to really build your own wordpress website so once you come to an edit page the first thing that you probably want to do is you want to come down to the avada page options and you want to go through these tabs to see the settings and if you want to change anything you can most likely you don't need to and then just remember on the right hand side in the page attributes you have the template right here which usually is going to be the 100 with option if you want to click on the update button you can otherwise you want to come into the avada builder and see how this page is created so you can see right here that we have a few different sections and again just like the home page you can go into each of these containers and you can see the general settings right here so if you're creating something from scratch you can come in and look at the settings and then just select the same stuff that you want on your page you can also go to the design tab and see the padding and then the custom colors and the custom border sizes over here and if there's a background image or color you can see what is used over here so once you're ready click save and then you can go and expand each of these and you can see the modules that are used or even the layout so you can see right here that this is a two column module and you can just go into each of these and then edit whatever you need to you already know how to do that and you can see that this module is an image module so if you want to edit this click in it and then just remove this and then you can change the image and the settings if you need to over here you can see that we have some text modules and a separator and we already know how to customize the stuff so really what i want to do is i want to show you how you can add this little icon right here so it's the first letter for your sentence and it's going to require some short code so if i'm going a little too fast go ahead and pause the video if you just want to watch and see what we're talking about go ahead and keep watching okay so right here this is where the icon is so i'm going to click on the edit button and this is a text block and you can see right here that we have some short code so this shortcode is from the avada theme and all you have to do if you want to change the letter is just come into this section between the code and change the letter for the start of your sentence if you want to add a different color you can do that in between these apos in between these quotes right here so you just want to put in the pound sign and then the color code if you know it okay so i will link you in the video description to the short code or the tutorial page for the avada theme so you can learn how to use short codes if you want to but you really probably shouldn't because they customize and upgraded the page builder to be a really drag and drop builder so i wouldn't recommend confusing yourself with short code but if you need to for something like this then you can okay so i'm going to click save right there and the rest of the stuff you already know how to do so we can move down to the next section and this is just a section with a headline and sub headline and then some container boxes right here so again you can always just review by going to the page and then saying oh we're on this section right here we have a background image for this container and then we have a few different rows of these icon boxes so if you want to go and customize them you can just come into each one of these click on the edit button and then you can customize the boxes right here okay so it's again super easy and now that you guys know how to use the avada builder we're going a little faster so the next thing i want to do is i want to cover how to create these border boxes right here so in the open job section right here we can expand this and this is how i would go through making my website if i was wondering how do i make an element so in this section you can see that we have our headline sub headline and this is a three column section and then right below this we have our next section which is brand strategist digital marketing so it is in these sections right here where you have the border boxes so we can try to back into this by first going to the edit column for this section and you can see in the general settings right here that we have our alignment and if you scroll down you can see that there is a link for the page or the button so you can see when you hover over this the entire box is a link so when you hover over it you can see that the mouse changes just like that so that's how you can add a link for this entire column and then what we want to do is go to the design tab and i'm pretty sure this is where the border is going to be so first you can see that the size is right here and if we scroll down we have our padding and then the border size instead of putting in 0px which is what we've been doing for a lot of our sections this one actually has a border width so 2px pretty thin but it's a it's it's noticeable pretty thin but it's noticeable and then what you can see is that the border color is right here so that's all you have to do to create a border for the entire column and then all they did was just selected the border style and then if you wanted to make it round you could but you can leave that blank also and then just click save and then now you have your container and then you can add in your modules which is really easy just put in your text and that's pretty much it so this was done for each of these columns all six of them and then this is the result right here links with a border around each of these just like this okay so again you can notice that we do have a background image so that's for the entire container and i'll let you guys go ahead and customize that section if you want the last thing that i want to cover on the careers page is this little thing right here so i don't know if you want to call this step by step or a process or order flow or what but we're going to go into the next section and actually take a look so first i'm going to close all this stuff if i can and that's going to collapse everything over here and here we go it says what does our recruitment process look like so if we click on the container right here you can see that we have content boxes and the layout is the timeline horizontal so if we click in here you can see that all we did was we have our items so there's four items and then in the box layout there's different options right here so the one that is selected is the horizontal timeline so that's what you see right here this is a horizontal timeline and you can change the number of columns so if you wanted to make it five you can do that and then you can add another box right here and that's pretty much it you can go into the design tab and you can change the colors if you wanted to it's really up to you guys so that's all you have to do you can just come in here and change the box layout for something like that if you do want a timeline and it looks pretty cool so it looks really professional and it looks like a professional web designer created your website for you okay so i'll let you guys play around with the careers page if you guys want to but this is just another way of showing you guys how you can build out your website using the avada page builder just back into these templates and if you see any type of module that you don't know how to use you can just come into these pages and then look at them and then figure out the settings and what they selected and then you're good to go you want to click on the update button if you ever make any changes so once that's updated now we're going to go to our next page so i'm going to go back to all pages right here and let me go to this page right here this is the what we do page and i'm not the biggest fan of this page but if you guys want something like this then i'll show you how to create it so you can see when you scroll down here it kind of like is a magnet to come to this section because this is actually a slider and you can see right here these are your different slides and when you scroll down it just scrolls through the slide images so it's a little weird and it just uploads the new slides it doesn't really flow and everything like that so let me show you guys how to create something like this so if you guys want you can click on the edit button right here or just go back to your pages list and find the page that we're going to work on i think it's the what we do page so i'm going to click on edit right here and once you're on this page right here just know that you can always change your title and you can also update the permalink to match your title and you have the template formatting right here or the template that we're using and then at the bottom over here you have the page options so if you ever want to change those you can but we like to leave everything as the default because everything is already set up for us so over here you can see that we have one two three four and five containers and on the web page right here you can see that we have four different slider images right here and then our section right below so if you're wondering how to create the slider section right here all you have to do is inside your containers you want to click on the edit button for each one of these so go ahead and click on that and then over here where we have the height it should be set to auto by default these ones are set to full height and then right here where it says enable 100 scroll you want to turn this on and once you do that and if you do that for each one of these then it's going to create that slider so you can see in the second one right here it has full height and then it has this yes right here and the only one that doesn't have this is going to be the call to action right above the footer so if i click on this one you can see that this one is auto and this is what we're used to because we have the column alignment and the justification that we see on all the other modules that we've used but for this page it uses the full height to create that slider okay so that's pretty much the only difference to create this section right here and again it's a little funky because it makes your page jitter a little bit and it's hard to scroll through and everything like that but if you want something like that it's really easy to create and again you can always go into each of these containers and then see how to edit these columns and then see what modules are added if you do make any changes again remember to click on the update button right here but really that's all we have to cover on this page which is how to create a slider for a section of your web page okay so we're gonna move on to one of the next pages and again you don't need all of these pages but this is another page on the demo website and this one just has some icon boxes and the icons are on the side instead of on the center so we'll cover that and then pretty much this one's really going to be easy because it covers everything that we've done before except this section right here where we have these counter icons so we'll go through some of this stuff and we'll just show you how you can edit this page so again what you can do if you are on this page just click on the edit button or we can go back to the wordpress dashboard right here and just remember you can pause the video if you need to never feel rushed in this video i just like to kind of cover everything because we already know how to use the avada page builder now so i'm just kind of going over the other pages so i'm going to go back to the pages list so click on all pages and once we're back on this page right here i'm going to find that page that we're looking at right now which is the google ads word page and i'm going gonna click on edit all right so i just realized we're almost done with this video so if you guys haven't already go ahead and give it a big thumbs up and make sure you subscribe because you guys might not remember to later on and i want you guys to make sure that you guys are up to date on the latest nyc tech club tutorials so on the google ads page right here just remember that what we're covering is this section this section right here and i'll cover how to edit your icon boxes to have an icon on the side like this so again you have your google page right here so again you have your wordpress page right here and you have all your containers and again you can always go into each one and look at how they're edited and again you have the wordpress page right here and you have all your containers and you can go into each one and check out the settings the designs the background whatever you guys want and what i want to do is just talk about how to edit the icon boxes so if i open up this first section you can see right here we have these container boxes and if we click on the edit button right here you're gonna see that we have four of them so you can see right here that we have one two three four and there's two on each row so you can see right here that it says number of columns is two and the box layout is icon on the side so this is where you can select where you want the icon to be so we selected to have it on the side and then over here you can just go into each one of these you can change the title you can add your icon so you can see right there and then you can rotate the icon if you wanted to you can flip it you can do all the stuff including changing the color over here so all you have to do is just come in here and then you can just update whatever you guys want including the content down here and if you want to have a url or a link to go to another page you can put that in right here okay so super easy all you have to do is really just come into this box over here and then you can change whatever you guys want to change the layout for the icon and in the design tab over here there's really not much to do but if you want to change anything for this entire section you can write over here so super easy and i want to move on to another section on this page so again this is the google ads page and you already know how to create this section with the background image and then this right here we covered this on the home page so we don't need to cover this again but over here you have these boxes right here which kind of track your progress or how good you are at something so maybe your skill set for your business so what we can do is go back to the edit page right here and then in the results section right here you can see first in the container that you have your settings so we don't need to go through that but if you expand the section what you're going to notice is down here we have these counter circles and we have these text boxes below it so we can click on the edit element and you can see right here that if you click on this then this is where you can change the percent that gets filled out you can change the color and you can change the unfilled color if you want also and then you can change the size over here so that's pretty much all you have to do and you can see over here that we don't really need to make any changes on the right hand side and if you guys are confused or wondering how they set all these columns up just remember that you can go into the edit column for each one of these and then you can see if the alignments are changed or anything like that so you can see right here that pretty much everything is set to the default so we don't need to worry about anything here and each of the widths is 1 4 because we have four different columns and the only thing i can notice right now is that there is some margin at the bottom and that's just to add some spacing between the counter block and also the text right here so you guys can play around with this if you guys want a section like this it's just your results or services or how good you guys are at something i will probably put them at 100 for each one but it might not look that great if it is and they might not believe you but i think i'm pretty awesome and hopefully you guys do too so hopefully you guys have these things set to close to 100 so the last thing and it's actually really easy is this section right here so it looks like there's some content boxes and you might be whoa this is pretty difficult to create but it's really not again we can always go into the default or demo pages and we can back into all the stuff so we have our services container right here and if we expand this what you're gonna see again is four different columns that are one-fourth by one-fourth by one-fourth so we can just click on the edit column right here and the only thing that is really going to be different is that we inserted a background image for each of these so first you can see that we center this but you can see right here that the column is 1 4 and then we have some spacing options right here and also some padding to give it some space and maybe even some border size but the big thing is in the background tab you can see that there is a color which might be for the gradient but you can see on the image tab we have an image also inserted so if you want to replace the background image you can just come in here and do that and then one of the things you do want to do is you probably want to add an overlay which is going to tint or dark the color of the image so this is something that we also did on the home page but that's all you have to do to create these separate boxes right here and then these are just modules so you have a button right here and some text so i can show you the button really quickly and we'll just cover it really quickly so if i click on this edit button you can see that has the url the text right here and then if we go into the design tab what you're going to notice is that the button doesn't have any filling or borders because we go and select the custom option and then for each of the colors even though there have and then for each of these colors even though there is a color selected on the right hand side right here the transparency is 100 so that means that there is no color it's just going to be transparent and that happens with each one of these bottom top left right and all the stuff so a button doesn't really have a color it's just going to be the text and then you can see right here you can just change the text color and then the hover color right there all right so that's pretty much it super easy and you can see right here the button border color and even though you might see a color selected on the right hand side the transparency is set to 100 that means that the color is not solid it's very transparent it's invisible and this is happening in each one of these color options so that's why there is no border or filling they're all transparent it's just dragged all the way down to 100 so if you do want to change the text color you can do that right here and also the accent color and i don't think you need to worry about the border color because again it's transparent but you can play around with this stuff and mess around with it if you guys want just make sure that you do click save right here and then you can just copy and replace everything for these other columns and then just click on the update button and then you're good to go for a page like this so i think a page like this you might not have anything with google adwords but you might have a services page where you want to go into more details about what your business is all about so this is a great page to actually do that okay so i'm going to go on to the next page and we're going to check this one out and see if there's anything that we need to cover here so we have our background image a title section sub headline and then you guys just learned how to create this stuff but maybe you want to create a button with some icons so i'll show you how to do that really quickly and then this section is really easy to create and then we have that call to action down here so really quickly i can just cover how to create these buttons with little icons right there so i'm going to go back to the wordpress website we'll go back to all pages and once we're back on the pages list if we come down to this page right here where we work and click on the edit button so once we're back on this page right here with the avada builder we can just come into the container with those links and i'm gonna open this up and you can see down here that we have these different columns and we have our button right here and then you can see something called a model so let me just talk about the button really quickly so if we click on the edit button right here to add the icon all you have to do is go to the design tab and you want to select custom and then you can change your colors and all that stuff and then down at the bottom you're going to see the icon and you can select the one that you want and then you can change the positioning right here and that's pretty much all you have to do to add that icon okay so the other thing i want to do is i want to talk about how the button actually works so you can see right here if we click on it it's going to get this pop-up and this will usually populate a map but you can see that it says we have to input an api key from google to authenticate this so i will show you how to go and get that but let's pretend that a map does show up right here we want to make sure that you guys know how to actually make that happen so back on the wordpress website right here what you're going to see is first you want to create your button and you don't need to put in a url right here you can just put in the text for the button and then down at the bottom over here in the model window anchor section this is we're going to create a name for this button so you can see right here it says map one so we're going to click save and again this is the one that we're working on right here so right below it you can see it says model and then model name equals map one so this one's map two and this one is map three so these are just anchor names and they're going to be used to create the pop-up so what we can do is click on the edit button right here and again this is a model module if that makes sense so you want to add one of these and then all you have to do is put in the name right here of the anchor that you created in the button tab and once you do you can just put in the heading whatever you want to type right here and then if you just come down to the bottom to the content section this is where you're going to insert your map and if you don't see this or maybe you do and you're wondering how can you update it all you have to do is click on the avada builder element generator and this is where you can create your short code so in this element section you just want to find the google map click on that and then over here we can just select the embed api option and then you want to paste in the address or use the formatting here if you want to use longitude and logitude or you can just paste in the address so i'm going to paste in a random one right here and then you can come down and change the dimensions for your maps so maybe we'll type in 450 px right there and you can change the zoom level it's really up to you and then just click insert and then you'll see the shortcode right here and this is the same exact shortcode that the demo website shows so we can just click save right here and that's what you would do for all these other ones but you'll notice if i click into this one that the anchor name is going to be map 2 and over here in the module name it's also going to be map2 so you want to make sure that they're unique for each of your buttons otherwise it won't really work and they have to match up okay so that's all we have to cover for this page and i'm going to just click on the update button just to save that and then what we're going to do is show you how to insert the api key to make your map populate because we want it to populate not only on this page but also the contact page if we have a map over here so we're going to do that and then we'll cover this page and then we'll do the header and the footer and then we're going to be done with this video tutorial so i'm super excited we're so close to being done so back on the wordpress website now we want to go and insert the api key so that we can make our google maps populate all right so i cleaned up my web browser so all the tabs are gone right now and what i want to do is i want to show you how to insert the google api key to make your map populate so if you want to do that you want to hover over avada on the wordpress dashboard and then click on options and once you come to the options page what you want to do is you want to scroll down on the left hand side over here and where it says contact template you want to go to the google map and click on that and once you do you're going to see this over here so you can see that it's for the google map and we want to insert our api key right here and then if you have another google map that you want to populate maybe on the contact page then you can insert the address right here and you can select the correct api type so super easy and what we're going to do is just go into this section and paste in our api key so what you can do is click on this link right here that says google docs and i'm going to open up a new tab to go to it and i'm going to click in here and i'll just dismiss this and what we want to do is we want to add an api key so down here where it says create api keys you want to click on go to the credentials page and so once you see this what you want to do is select your country and click you have agreed to the terms and click agree and continue and you want to type in the name of your website or business or anything like that so i'm going to type in avada and just click create and once you're on this page right here what you want to do is select the api keys that you want to create for so we can click on the javascript and the embedded one so let's click on javascript first and all we're going to do is click on enable and once it's enabled we want to add some additional api keys so we want to come down and click on maps embedded api so click on that and again we're just going to click on the enable button and once you have both of those now we have to go and get the keys so we can hover over credentials and click on that and over here you can see that there are no api keys to display so we want to click on create credentials so click on this plus button and then click on api key and you're going to see a pop-up right here and this is going to be your key so all you have to do is click on the copy button and then you can click close and you can see it right here also so once you copy that you want to go back to your wordpress website and over here all we have to do is in the google maps api key section paste that in and once you do we should be good to go so if you want to change the api type you can you can also update your address for whenever you have a contact page that needs the google maps but we'll just leave it like this but again you probably want to update it and you have these options down here i'm just going to leave everything as is just to show you but you can always come in here and change your settings so click on the save button and once you do now what i want to do is go back to that page that has those links to the maps so i'm going to hover over pages and click on all pages and once we're back here i'm going to come down to where we work this is the page so i'm going to click on view and once we're back on this page right here the seo offices i can click on this button right here we get this pop-up and now we don't have the text but we have an actual address with a google map just like this so this looks amazing super professional and really easy so let me know if you guys have any questions on how to integrate the api keys so that you can have this on your website and what i want to do now is i'm going to go back to the contact us page and i think that's the last page that we have to learn how to customize so i'm going to go back to the dashboard so once we're back on the wordpress dashboard let's go back down to our pages and click on all pages and on this page we have the contact page what i'm going to do is i'm going to open up a new tab for the actual website and then we're also going to go to the edit page so we can see the avada builder on the edit page and then on the actual website right here we already know how to edit the top part and then down here we have some icon boxes and two sub columns and we have the contact form which i want to show you how to integrate and then if we scroll down some more we have our map which we just learned how to add and then down here we have some columns with different background colors and buttons so pretty easy let's just go and back into all the stuff on the edit page so back on the wordpress website right here just remember you can always edit the title the permalink the template and then you have the avada options way at the bottom down here so what i'm going to do really quickly is just collapse all the stuff so that we can see it so you can see we have three containers and you can always go into each of these to edit the container settings so i'll let you guys do that on your own all i really want to do is come over here and show you that we have two columns and we have a nested column right here so that's going to give us what you see over here where we have two large columns and then a column inside so we have those icon boxes we probably want to see how those work so you can see that we have one half by one half and then a one third by two third so down here you can see that there is another nested column down here so we're going to go into this one click on edit and inside this nested column you can see right here that we have two sub columns and this is a checklist that's how you have the icons with the information so i'm just going to click into this just to show you how to edit this stuff so you can see right here that you have your checklist and you have three items you can always add more and let's go to the phone number and you can just type in the phone number down here and then you can add the icon that you want over here once you do that click save and then you can go and add the other one or you can customize it so we have an email address right here so you can see we have the envelope and then we have the email if you want to make this into a link just highlight it and then right here you can see that it says mail to and then the colon and then the email address and if you click on the apply button that's going to link that okay so super easy to create a checklist and you have two of them right here so you can update that you can delete these you can customize the columns however you want super easy just wanted to show you that you do do that and then this other one is just a different variation of that right here for a button and then some text right there so again you would just go into your settings now the one thing with the contact page that we haven't covered yet is how to create the avada contact form so you can see right here it has a name email how can we help you and you can submit the email or the message to your inbox so we want to go and learn how to customize that so right here what we want to do is click on the module so let's click on edit and this is the avada form and you can see right here that the form is one that is created and if you need to you can go and create it so that's pretty much the only thing here so we need to learn how to create this form so you can click on this link right here or what you can do is on the left hand side you should see a forms tab so it might be in the avada tab right here where we can just hover over it and click on forms and i'm going to open up a new tab and this is where we're going to go to create our contact form so the first thing that we can do is we can go through the pre-made contact form right here and then i'll just show you how to create oops so the first thing that we can do is just show you how to edit the pre-made template right here that was already created by the avada builders and then what we can do is go and create a new one on our own so let's go to this contact us tab right here and let's click on edit so what you can see over here is that for the edit form we have the title and we're using the avada builder to create our contact form and what you're going to notice is down here in the settings section or the options section this is for the forms page so it's different than creating a page so the avada builder and the avada theme will know that you're creating a form instead of a page so the settings are going to be different and over here you can change the appearance so if you want to change the settings for the text colors or the labels or spacing you can do that right here the main thing for the form options is you want to go to the submission tab and right here where it says the type there's two different types or there's a few different types you can save to the database which is like collecting emails you can redirect people to a url or you can go and send an email and that's what we're doing because we want visitors to be able to send a message to us now there are some other options also if you want we're going to select this one because this is a contact form and then right here in the confirmation tab what you're going to notice is you can choose the type over here also so you can choose a success message or an error message when you send a message or you can redirect them to another page so right now we're just going to click on display message and i'll show you where you can create that message in just a little bit and then you have these two other tabs right here that we don't need to really do anything on but just remember you go through these two pages or these two tabs to create your type and then the confirmation type okay so once you do that you can come up here and you can see on the avada builder we have a container with some modules so if you wanted to go into the container settings and you can see what the settings are right here there's really nothing to change i think everything is the default and we can go to the design tab right here and you can see that there is some padding so 0px on the right and the left and then the container link is the orange color which is the default color for the website that i'm building so again you can go through this and check this stuff out and then if you wanted to add a background color or image you could also and just make sure that you click on the save button and we talked about how to make your website responsive with the extra rules and all that stuff a little bit earlier so if you need to do that you always can so right here you can see that we have our form and it's in one column so you have your edit column right here and you can see everything is pretty much the default layout and in the design tab this is where you can change the width if you wanted to but we're going to go with the one by one right there and once you do you can just close out of that and again we're editing the existing contact form right now so you can see right here we have the first text field and this is just a module where you can put in the name so you can see it says field name and we left this blank so if we go to the contact form what you're going to notice is that there's no label at the top but inside the field name it says name right there okay so if you wanted to have a label then you can put in the title up here and then it'll have a title above the section so over here you can see that it's a required field that's why there's the asterisk next to the field name and what you're going to notice here is that the field name is name and down here you can see that it's a required field and then we have the placeholder text right here that says name so if we go to the contact form you can see that we have the placeholder name and it has an asterisk because this is a required field and the reason why you want to include a field name is so that when an email is sent it knows the categories of everything that's being sent such as an email or a name or a message okay so right here again this is for the name and we just have the placeholder and we made this a required field so we're going to click save right there and this is the email field so if you go in here you'll see that this is for the email so whenever a message is sent it'll know that this is the email that it needs to send from and then right here it's a required field and then we have the placeholder text right there and that's about it there's nothing else to put in here and there's no conditional rules or anything so these are just modules that again you can just click to add to your page and then you have another text field and that is going to be for how can we help you so you can make this or just delete the section if you don't want it i don't really know why they included it but it's a subject section so if this was an email then this is what the format would look like so again they missed the required field you can make it an unrequired field and then you just have the placeholder right here which is what shows up inside the box right here and then when you start typing it disappears okay so now we have another section right here called message and you can see that has the asterisk for the required field so if we go and check that out in the avada builder you can see that it says text field area so this is what the module is for for the message and you can see that it's for the message right here it's required and then the placeholder is just messaged just like that and then right below that we have a button that you guys are used to it's just a contact us button and you don't need to put in pretty much anything else you can see that there's going to be another section below this where it has some rules set up so right here you're just putting in a button with the text and we can go to the design tab just look and there's really nothing to change here and you guys already have this form on your website also so we're going to click save right there and then you can see that it says notice right here so if we click on this you can see that we have a success message or an error message and this is what the submission display message will show you after a message is either sent or it can't be sent okay so this is where you can edit the messages and if you wanted to redirect them to another page then instead of using something like this you would come down to the confirmation and then you would choose the url that you can redirect them to and then you can type in that page after they submit a message to you it'll redirect them to maybe the home page or a success page or something like that but if you want that display message then you want to just include that notice module and just know that on the button field over here when you click on it it's a submit button so it's not just some random button and i should probably just show you some of the modules so let's come down to the bottom and look at some of these elements so if i click on element right here and what you can see here is that these are the four modules so there's a bunch of different ones that you can use and you can see right here that there isn't a normal button it's just a submit button that you can just add and you don't need to do anything like add a url or anything like that just add the button and once someone clicks it they're going to send out that message okay so i'm going to close this really quickly and if you do make any changes you want to click on the update button just like this so once that's updated you're pretty much done editing this page the one thing that i need to mention though and i haven't yet is that when you click on the submission tab over here and you select the send to email you want to make sure that you put in the email address that you want the messages sent to so you can see right here it says form submission email enter email id where form data should be sent to so for my visitors i would want them to send a message to nyc tech club at gmail.com so you want to put in either your admin email your domain email or your email that you want messages sent to and you can see right here we can just put in nyc brizzy contact form submission and this is just the email subject so whenever i get an email with this title right here i'll know that someone used the contact form from this website to send a message and right here you can see that you can put in a special email name if you want to put in the website name or you can leave it blank just to have wordpress send you a message and then right here it says send or email enter sender email address if left empty then the email will be from wordpress at sitename.com so if you have your own website name so maybe we have something like contact at nyc brizzy.com then this is going to be the email that is sent and then we can just type in nyc brizzy right here but again you do have to make this email if you use something like that otherwise you can leave it blank and it'll just use a wordpress address and for the reply to email this is the email address we can use we can use any email i can just use this one right here so if i ever do send a reply email this is the one that will show up on the replies otherwise i can update this to a corporate email or anything like that okay so down here you can see it says enable member only form we don't need to do that but if you do make changes here and you need to in order to get the submission message you want to make sure that you put in an email address that works so that you can get those messages so again you want to click on update and then you're good to go and once that's updated now in order to add this contact form to your page you want to come back to the wordpress page right here and then wherever you have the avada form module so you can see it right there you want to just click on this click on the edit button and then right here where it says form you should see all the contact forms that you created and they'll be listed out by the title name so the one that we were editing is the contact s1 so we just select that click save and then click update and then this will show up right there okay so everything else is pretty straightforward the only other thing is the map right here so before we do that i do want to just do an exercise of creating a contact form with you so what we're going to do is go back to this tab right here and we're going to create a new contact form so if you're not on this page right now we're going to hover over avada and then click on forms and on this page right here i'm just going to create a new form so i'll just type in demo and we'll click create and once we're on this page right here the first thing i'm going to do is come down to the forms tab and so on this page right here you can see that we have the title right here and the first thing i want to do is come down to the forms option and we don't need to change anything on the display settings right here but what we can do is go to the submission tab and we want to change the submission type so i'm going to go with send to email so i'll click on that and right here we want to put in the email that the messages are going to be sent to so i want to type in my own email so it's going to say nyc tech club gmail.com and i think i need a new computer because it's always double clicking some letters and all that stuff so you'll see that i have to misspell and correct things over and over again so right here for email subject we'll just say website contact submission form and then down here for email from we'll just say nyc brizzy website so we'll type that in and we gotta make sure we spell it right and right here for the sender email i don't have an email so we'll just type in or leave the default right here and then for reply email i'm going to type in my email also so we'll just type that in right there and then for the confirmation we want to click on that and we're going to go with the display message so we'll just leave that like that and these other tabs we don't need to change and then what we can do is we can turn on the avada builder so i'm going to click there and then go to the container and you can add whatever size you want i'm going to go with one by one we're going to go into the settings right here and we can leave pretty much everything as the default but what i want to do is go to the design tab and for the padding for the right and the left i'm going to type in 0px right here and i'm going to leave the link color like this but if you want to change it you can do that i'll click save and then for the container i'm going to come in here and i think i'm going to leave everything like this but i want to go into the design tab and maybe for the margin we'll type in 0px right there so i'll click save and now we can add our different fields so i'm going to click on the element button and the first thing we're going to do is add the name field so click on text field and then we can just put in the field name right here we'll just type in name and then i'm going to make this a required field so i want to come up here click on yes and then for the placeholder which is what's going to be inside that box i'll just say type first and last name and maybe they won't but that's what we're going to ask for so we'll click save right there and now what we can do is add the email so over here we'll go and click on email field and then right here we'll do email we'll make it a required field and then we'll just use email right here so once we have that i'm going to click save once again and we'll just put in the text field so instead of having a subject line i'm just going to have the message section so we'll type in message right here and then we'll make this a required field and say type your message here and once we click save right there we should be good now we can add the submit button so click on this and then you can just say send message and once you do that you can design this if you want to change the colors the radiuses and all that stuff i'm going to leave everything as is so we'll click save and the last thing we have to do is add the notice so this is going to be the message that is given after a message is sent so you can customize this if you want it's a default message right now i think i'll just leave it just like that for this demo and i'm going to save that we have everything we need you can always customize and add more stuff i'm going to click update right here just to save everything and once that's saved now what i'm going to do is i'm going to go to pages and i'm going to go back to the contact page and i'm going to add this contact form so right here on contact i'm going to click on edit and on this page right here i'm going to leave the existing contact form but i want to add another one so i'm just going to show you how so underneath click on element and find the avada form right at the top click on that and all you have to do is in the form tab now you should see the new form that you just created we can click save right here and then click update and now when we go to the preview page we should see that new contact form so on this page right here we're just going to click on view page and once you're on the contact page right here i'm going to scroll down and you can see we have our existing form right here and now we have our new form which doesn't have the subject field and also has different placeholder text right here so again you can just type in your fields and your message and then click on the submit button and then that's going to send a message to the email that you put in for the submission form okay so it's super easy and what i'm going to do is just go back to the edit page and remove this form so back here on this page i'm going to remove this new avada form and what i want to do now is go back to this page and just come down and i want to show you how to insert this map right here and that's pretty much it because all this other stuff is really easy so we talked about the map earlier but we want to make sure that you know how to add it to this page so if you want to you can click on the edit button on any of these i think i already have the edit page right here so what i'm going to do is just come down to the map section and again this is the contact page so we'll come down to this new container right here that says map and we can expand this so that we can see it and you can see that the thing in here is the google map module so first we can go into the container and see that the height is the auto height and we have a hundred percent width so that's going to be full width all the way across and you can see the settings are all the default and everything looks good and then in the design tab right here the margin is negative 20 px i think you can make it even larger if you wanted to but it's really up to you you want to play around with that if you guys want and that's all that they change there and then here you have your google map so if you click on the edit button you can see that this is just a module that uses the default api and the address is added right here so you can put in the longitude and latitude if you don't have the address and then right here we have the map type which is the road map and then you have the dimensions right here so you can put in whatever dimensions you want but this is a 100 from right to left so it goes all the way across and then the height right here is 500 px and then the zoom level is 14 so you can kind of see some streets but not too much detail so you can always zoom in some more or you can zoom out so 14 seems just about right and that's about it so there's no design tab or anything like that and so really the only thing is this right here the dimensions of the map 100 for full width and then whatever height you want and then you can just insert it just like that and then you're good to go and then there's some spacing or margin below for the next section over here so that's how you can insert a map let me know if you guys have any questions about that but i think that's all we need to cover for the contact page so again if you do make any changes you want to click on the update button just to save everything so now we are towards the end of this video tutorial and we only have to cover i think two more things so we covered all the pages and all the different modules that you can use but we need to cover the header up here and how to customize it with maybe a label like that and also a button like this and then we want to talk about the custom footer way at the bottom down here where we can add our logo some menu items and then have a copyright like this with some social icons down here so let's talk about the header and footer so we're going to go back to the wordpress dashboard so if you are on the website just hover over your website name and click on dashboard and once we're back on the wordpress dashboard we're going to go over how to create a menu so you can see that we have a menu at the top and we should have the same menu all the way at the bottom down here and then we'll show you how to customize the footer and the header so if you want to learn how to create your own header or how to customize the current one then what you want to do is on the wordpress dashboard we want to hover over appearance and click on menus so on the menus page right here if you want to create a new menu just click on create menu and then you're going to title it click on create and then you'll be able to add whatever links you want so you can see right here in the pages tab you have your most recent pages that are created and you can view all your pages right here and then if you want to add a blog post you can come down here and you can see your blog post and you can also create custom links so if you want to add your own url and your own navigation label you can go in here and do that and then same with categories right here so we usually just add some pages and you can see right here that these are the pages the who are we now or who are we what do we do where we work careers and news and you can see that at the top over here we have these links right here that look just like the menu that you see on the menus page and the one unique thing is that right here on the careers tab we have this notification label called apply so i want to show you how you can customize that and this is the same menu as the footer menu so if you wanted to create a different footer menu you want to create two menus but it's really up to you so you can always just rename this and save it and what you can do with these tabs right here is if you want to remove any of these just go into them and then click remove just like that and then it's going to disappear and then you can click on the update button if you want to add that page back then what you can do is just click here and then click add to menu and you should see it show back up right here and you should see it show up right here and you can just rearrange it by just clicking and dragging it to where you want to place it if you want to make a sub menu item you can just indent it just like this so it'll have a drop down with some items that are indented okay so you can also change the navigation label if you just come in here and change the text but if you don't want to do anything then that's okay really what i want to do is just go to the careers link right here and show you how you can add this little label right here so for any link that you guys have even if you create your own custom menu when you have your menu item right here and your navigation label you're going to see when you expand this the button right here that says avada menu options if you click on that you're going to get this pop-up and you can add an icon for the link if you want but if you just want to add that little navigation label then right here where it says menu highlight label you can just put in the text right here and then once you do so you can see that it says apply you can put anything that you guys want then you can just come down here and this is where you can go to change the text color and also the border color so you can play around with that on your own and then if you wanted to have a menu highlight label background color you can also insert that and that's pretty much it so that's going to just be a notification at the top over here that says apply and you can do that for all of these super easy and i'm just going to click save right here and again just remember you can delete all of these and you can add some additional pages or whatever pages that you have for your website and down here on display location for this menu you can see that you can select where you want this to show up so this is the main navigation so we want to just select that just like that and then we can just click save so we're using the same menu for the header and the footer so we don't need to do anything else but i just wanted to show you that this is where you go to create your menus let me know if you guys have any questions otherwise let's go and do the last thing here which is showing you how to customize the header and the footer so to do that we're going to hover over avada and then click on options and once we're on the avada options you can see we have all these tabs here and we went through this stuff earlier so you can see that on the logo tab you can insert your own logo down here so you can play around with this on your own but what we want to do is we want to go into the header and the footer right here to customize those two sections so let's click on header and what you're going to notice is over here it says important note these options are not available because the global header override is currently being used so to edit your global layout you want to visit this link right here so i think it's just this link but what we can do is just click on this link right here so let's click on it and on this tab right here you can see that it is the layout builder down here you're going to see the pre-made global layouts so we already have the global header and also the global footer so what we can do is just go into these and see how they're created and see what we can edit so we can click on the pencil right here and once you come to this tab you can see right here that we're on the layouts tab so this is the avada layouts and they have global layouts so we have the global header and the global footer and what you want to do is you want to go and customize this stuff to look how you want or you want to at least change what you see on the header and the footer so that you have your own logo or your own text so you have to come here in order to customize this stuff so these are already set for you and all you have to do is click on the pencil so we're going to go to the global header and in the global header you can see that we have our title right here which we're just going to keep and then we have our avata builder and at the bottom over here we have the layout section options and you don't need to make any changes here but you can always just see what is selected on both of these tabs and then at the top over here where we have the avada builder this is how you're going to create or customize the global layouts for the header and the footer so on this page you can see that there is a header for the mobile and tablet device and then there's also a header for the desktop in the laptop to make sure that your website is responsive so for the first one right here we can go into the container and you can see that the settings right here you can always customize them if you want all i really want to do is just go through these tabs really quickly and show you that there is some padding for the mobile and tablet header and then they have the colors that are selected right here and you can see right here that there is a z index and then if you go into the background tab if you go into the select color then you can see that it's selected but you don't really need to do anything here because our header menu is going to be transparent so in the extras tab you can see that you have a rendering logic and remember we talked about this way at the beginning of this video tutorial if you just click on the add logic right here or the edit logic you're gonna see that this device works or this container works for the mobile and the tablet and then you can click save right here and then we can go into this other one just to make sure if we go into the header and we go into extras you can see the logic right here if we click on the pencil this one is just going to be for the desktop and the laptop devices okay so again you can go into the general settings and the design settings these are just two separate containers that you can check out and then for the mobile tablet header you can see that you have a section right here for your logo and then you have some additional stuff right here so an email and then your header menu and if you go into the stuff you can always click and edit the containers if you want to change the logo size just click in here upload your logo in the image upload your logo in the image module and then you can change the max width right here and then whatever settings you want down here and you can just click save and what's really cool is if we go into this module right here and click on the edit this is just an icon and you can see that it's for mail so you can change the size and then what you can do is come down here and make the link go to the contact page so that's just something that you can do if you want to make it look a little unique and over here we have our header menu so if we click on this what you can see is that you can select the menu type and we only have one right there and if we scroll down a little bit you can see that there are some different settings selected what we want to do is we don't need to go to the main tab or the sub menu because this is a mobile menu so if we come over here you can just see that you can select your different settings so the big thing is really the mobile menu mode we use the collapse option which is that hamburger so if you guys want you can just change this and then you can play around with it you can see that there is some padding and you can change your colors and all that stuff and then you are good to go there's nothing to do on the extras tab and again you don't need to go through these tabs for the mobile or the tablet menu you can just play around with whatever you see right here so you can see that you have different options or you can just leave it as a default and just come in here and just change your logo and also the link for the contact us section and once you do that you want to come down to the desktop or the laptop header right here and again we already went through the container but over here is your logo so we can go to the website really quickly you can see that we have the logo header menu and then a button so we want to go into the layouts and you can see that we have our header menu right here for the desktop and a laptop device and if you guys want you can just change the logo and then you have your header right here and then your get touch button right here so you can see on the website that we have our logo header menu and then our button right here so if you guys want to customize that just click in the edit again you can just upload the logo that you want to use change the max size and then anything else you want over here and then for your menu there's really not much to do you're just gonna come in here select the menu that you want select the direction that you want and then you can pretty much just go over here and if you want to align the items a certain way you can but that's pretty much it so it's super easy and you can also do the same with sub menu items if you have them and then just click save so the other thing is just this button right here so you're just gonna click on the edit button and you guys already know how to add a button so this is nothing special it's just a custom header menu where you can have this part right here so you can just put in your button information and then you should be good to go just like this and if you're wondering about the spacing you can see that there isn't a lot of space in here but there's a lot over here what you can do is you can always just look at the columns and you can see that this is 18 64 and 18 and then just go into each of these and you can see if you add some padding so this one has 18 width and there's zero percent right here and then we can go into this one right here and we can check the design tab and you can also see the same so that just means that the header menu doesn't fill out all the way over here so that's why there's that gap so i'm going to let you guys play around with that and again all you have to do is just go into the layouts tab in the avada options and then right here you can click on the edit button for the header the last thing that we're going to do is we're going to really quickly just talk about the footer section down here and i'm pretty sure it's going to be very very similar to just what we did for the global header so again back in the avada layouts all we're going to do is just come to the global layout and this time around we're going to go to the global footer and we can click on the edit button and on this page right here you can see that it's pretty straightforward so again you can go into the container and you can customize the design if you want so over here you can see that there's some padding and the link colors and then if you wanted to add a background color you can so just come in here and you can make it transparent if you want or add an image and then in the modules right here you can see that we have an image so this is where our logo is and the image size is right here and then you can see the settings right here and it's just centered with some margin and you don't need to do anything with the extras tab so the next thing is the menu so right over here you can see that this is just like the header where we come in and we select the menu that we created so we're going to use this one and then you can choose the direction and then you can put in some margin to add some padding and that's pretty much all you have to do now the interesting thing is the date so if i go back to the demo website and let's come back down to the footer what you're going to notice is that we have the copyright and then some text right here so you might be a little confused with this module because it says date and there is a funny little thing that you can do to kind of trick it to add some additional information so if we come in here and this is just a text block and you can see where we have the content you can select the type of content that you want so you can come in here and what you can see right here is that we chose the post publish date so what you want to do is you want to probably choose the post modified because we want to put in the most recent date so i'm going to remove that and i'm going to click y again and that should give me the current year and then you can see right here the text before that year is going to be the copyright and then after that we have a divider right here and then we have some text and then a link to the avada theme and then you have some additional text right over here just like this so if you want to change any of this stuff you can just put in the text right here so maybe we can type in nyc and we'll just type in tech club and we can also just come over here to where it says avada theme and instead what i'm going to do is type in nyc brizzy and maybe we'll just delete this right here and we can always just change the text or the link right here so you can see it says http and then we can put in the s right here and this is just html so if you don't know it then you can just google it and then we just have to make sure that we don't delete anything that we don't want to so i'm going to type in nyc brizzy.com just like that and we'll leave all the other stuff blank i'm not sure what this other stuff is let me see i said theme fusion right here so sorry i'm just moving over so that i can see this right here so i'm going to change this to design studios and this is just some text that's going to show up at the end over here so let's see what happens if we click on the save button and then we'll click update right here and what you might want to do and before i go and show you the page is you might actually be better off down in the date section actually over here putting in the actual year right here because you can see right here that the date type just updates to the post modified so whenever you click on the update button okay so just keep that in mind and then the last thing right here is just the social icon so this is another module if you put in a url or even just a pound sign then the icons will show up so you can see right here we have a facebook icon or pound sign so if you put in the url for that then it'll link to facebook and then you have instagram linkedin and all these other ones and then you can just come over here and you can change the size of the icons and then you have the default colors or you can go in and create custom colors if you wanted to okay so i'm going to click save right there click update again just to save everything and then let's go and refresh the home page really quickly just to see how the footer looks now so back on the homepage i'm going to scroll down and you can see right here we have copyright 2021 and we have nyc brizzy with our text and then it's powered by nyc tech club pretty awesome and everything else looks pretty good so i think i think that's all we have to cover today in this video tutorial on how to use the avada theme so just remember you have a bunch of different options you have the dashboard you have the customize page and you also have the avada layout section over here and also just your options so if you come back over here and go back to the options tab you can customize your entire website using the avada theme settings over here and then you have the avada theme page builder that we covered in a lot of detail today so what i want to do right now is just go back to the website and give you some final words and there you have it congrats on learning how to use the avada theme to build your own wordpress website if you guys have any questions comments need any help whatsoever leave a comment in the comment section below and also make sure to subscribe to the nyc tech club youtube channel because we're always coming out with new videos just like this and we'll probably make some additional ones maybe some quicker ones i know this one was a little long but we wanted to cover as much as we could so i hope you guys enjoyed this video and i hope to see you guys in the next one subscribe like video comment do all that stuff and thanks for watching i'll see you guys in the next one

Channel: NYC TECH CLUB

Views: 2,543

Keywords: wordpress, website, make a website, build a website, tutorial, beginners, how to use avada theme, avada theme

Id: Kx6_YjLoJZ4

Length: 256min 59sec (15419 seconds)

Published: Wed Sep 22 2021