How to Use Avada Theme Tutorial (FULL) 2021

and people are gonna think how the heck did he build this website did he pay a bunch of money but the answer is no you did this all by yourself in less than two hours just watching this video tutorial in this video we're gonna show you how to save thousands of dollars building out your own professional wordpress website and you don't need to know any type of coding or programming whatsoever it's just going to be a bunch of drag and drop and copy and paste and by the end of this video you're going to be a wordpress expert and we're going to be using templates to build our website so you can build any type of website that you want whether it's a business website a services website a freelancer website a blog website a food website it doesn't even matter no matter what type of website that you want to build by the end of this video you're going to have it up and running it doesn't take a lot of time it doesn't take a lot of money a lot of the people that charge you hundreds of dollars thousands of dollars to build a website are watching video tutorials just like this so all you have to do is just spend a little bit of time watch this video follow it step by step and you can have a beautiful and professional wordpress website up and running so what the heck are we going to be covering in this video we're going to show you everything that you need step by step so you don't need to worry about anything whatsoever we're going to show you how to get your domain and your hosting how to install wordpress and we're also going to show you how to get the avada theme the most successful premium wordpress theme that there is it has everything that you need to build a professional wordpress website and then we're going to go through our settings to make sure that we have the right colors the font styles the layouts all that stuff is set up so that you can build whatever type of website that you want and here's the secret the avada theme has a bunch of professional pre-made templates so you can build any type of website that you want and you don't even need to start from scratch so whatever type of website that you want to build you're going to be able to choose a template that works for you whether it's a business website a services website a photography website a blog website whatever type of website that you want there's a bunch of different templates that you can choose from so it doesn't matter if you want to use the template that we're going to use in this video or you want to use another one but we are going to be choosing a really professional one to use and it's going to cover almost everything that you need to know about the avatar these a bunch of different sections from a slider to an about section to icon boxes to testimonials and even a contact form so your visitors can send you a message right to your email we're gonna make sure that you're an avada theme expert and a wordpress expert so if you like what you hear you like what you see then keep watching because we're gonna show you how to build your own wordpress website step by step using the avada theme and wordpress so let's get started so the first thing that we're going to do in this avada theme tutorial is we want to make sure that we have everything set up so that we can run our website so the first thing that we're going to do is make sure that you have a domain and hosting if you already have these two then you can skip this step but if you don't you want to make sure that you do register a domain which is your web address and you get hosting which lets you store your content and run your website and what we can do is we can get a free domain with hostgator.com so hostgator is what i recommend to a lot of my clients a lot of my viewers i think they're really fast really cheap really reliable and they have a great customer service and that's why i'm gonna recommend them to you so go ahead and click on the link to the hostgator website and once you do go ahead and come over here and click on get started and once you come to this page right here we're not going to go into too many details but you have the hashtag baby and business plan the business plan is probably too expensive and the difference between these two plans is if you only want to build one website then all you need is the hashing plan if you want to store more than one website on the hostgator hosting plan then you want to get the baby plan so it's really up to you and just remember that you do get a free domain and you also have a 30 30-day money-back guarantee so once you guys are ready go ahead and just come down here and click on the buy now button i'm going to choose the hashing plan because we're only building one website here so what we're going to do on this page is i'm going to walk you guys through what you need to fill out so that you can get your domain and hosting and i already have my hosting and my domain so i'm not going to fill everything out with you but i want to make sure that you fill it out correctly so you can see right here that you do get a free domain with certain plans so the one year the 24 months and the 36 months so just keep that in mind and there is a 30 day money back guarantee so the first thing that we want to do is we want to register a new domain so go ahead and type in the web address that you want to register so i'm going to type in nycbrz.com and push enter and once you see the search results if you see this then we are good to go otherwise someone probably registered the domain that you wanted so you want to put in another one that you also would like and once you're ready come down to the bottom and down here in the domain privacy protection if you want to protect the privacy of whatever contact information that you put in for your domain you want to add the service right here you can see right here it says protect your identity online privacy protection hide your personal contact information from public view when you register this domain so it's really up to you guys i don't really mind that i have my information public so i'm going to uncheck that but you can always add this back a little bit later if you want also so i'll leave that up to you and over here we just want to make sure that we choose the plan that we want so i'm going to choose the hashing plan right there and then for the billing cycle for how long you want the service for you can choose anywhere from one month all the way to 36 months and i usually recommend 6 or 12 months just to give yourself enough time to know whether or not you want to run a website or not and because we get a free domain with the 12 month option i'm going to choose that and just remember that you do have a 30 day money back guarantee so there's really no risk also and down here we're going to create a hostgator account so you want to put in an email address password and a security pin so you guys can do that on your own i'll let you guys pause the video if you need to and then same with the next step right here you want to put in your billing information so if you need to go ahead and pause the video to do that and then push play once you're ready and then come down to add additional services and by default hostgator used to select these for you so these were extra costs that would just get added to your invoice but now they are unselected which is awesome because you don't really need any of this stuff you get the free ssl certificate whenever you sign up with hostgator and you can create your own email address and you can use plugins to backup your website so what i recommend is that you just keep all these unchecked and you can always add these back later and then once you're ready come down to probably the most important step entering a coupon code so by default hostgator puts in a coupon code for you and you can see right here that you do get a discount but you can get a larger discount if you delete this and you type in nyc tech three zero and this is a special coupon code that hostgator has created for us it's probably the largest discount code available so you want to just type in nyc tech three zero and then click validate and what you're gonna see is that the discount actually refreshes and it's going to be about 65 to 70 percent off so make sure you type in nyc tech 30 right there and you can also see that you get a free domain with the 12 month or 24 or 36 month plan so make sure that you select that and then once you're ready just come down here select the box that says you have read and agree to the terms and then click checkout now 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 to 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 going to do this with you but you're going to 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 login 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 we're going to go into these other settings a little bit later but first 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 so the next thing that we have to do is we have to get the avada theme and in the video description there is a link to this page right here so go ahead and click on it and you'll come to the themeforest website and if you guys don't already know the avada theme is the number one best-selling wordpress theme there is it has a five-star rating it's always updated and you can come to this page and check it out yourself there's a nevada page builder with a bunch of different modules you can make responsive websites you have a bunch of different templates and you can really customize your website however you want so we're not going to spend too much time on this page but again you can come to this page you can check it out on your own and just remember that it is a premium theme so there is a small little fee but you get so much with this theme and it's again there's a reason why it's the number one best-selling wordpress theme there is so all we're going to do right now is go ahead and click on the add to cart button or the buy now button and you can just go through the checkout process so over here you want to create an account and then just go through these other steps for billing and the payment method and then once you're ready you're going to check out and once you check out you should be logged into the themeforce website so you can see right here there is a downloads tab and you can also hover over this and click on downloads and you should be brought to this page right here so let me just search for the avada theme right here you can see that it's in my list right here so click on the download button and what we can do right now is just click on installable wordpress file only so you're going to download a zip file you can see that it downloads right over there and now what we want to do is open up a new tab and go back to our wordpress website so the first thing that we're going to do on the wordpress dashboard is install the avada theme so if you don't have that you want to hover over appearance click on themes and on this page just click on the button that says upload theme and right over here we can just click on choose file and what i want you to do is go to wherever you downloaded the avada zip file so if you need to you might need to right click it and compress it in the folder because you want to make sure that it's a dot zip and once you find that go ahead and just choose it and you can see that it's right over here now all we have to do is click on install now and once it's installed all we're going to do is click on the activate link and once the theme is activated you should see the avada dashboard right here what i want you to do is make sure that we register our website so that we can get the updates and the premium plugins and everything that we need in order to really build out a wordpress website using the avada theme so right over here click on register your website and then it's going to say you need to put in your purchase code right over here so what we can do is go back to the themeforce website and again on the downloads tab right here just click on the download button and then right here it says license certificate and purchase code go ahead and click on that and it should open up right over here and you can see that we have our purchase code right here and this is specific to everyone's own website so even though i might show you this right here you're not going to be able to use it because i'll be using it on my own website so i think you can try but i don't think it's going to work so i'm going to just paste that in and click on the register button right over here and now your website should be registered right over here and what we can do is we can go back up to the top over here and you can see it says installation activation you need to update some plugins these are plugins that you need to use the avada theme so go ahead and click on go manage plugins and once you come to this page right here you're going to see that these plugins are required so let's go and just click on install for all of these so click on the install button right here and you can see that it's successfully activated so we're going to go back to the plugins page and we want to install some additional plugins so you can see down here that there are a few more and we don't need to install all of these but these are all free so what we can do is install the avada builder and you can see that it's successfully installed so we're going to go back one more time and what i also like to do is i like to recommend that you install the slider revolution so i'm going to click on this and we're not going to go into too much details with the slider revolution but it's a great plugin that really lets you customize and build out any type of slider that you want so we're not going to go into too much details with the slider revolution i do have additional video tutorials on how to use this plugin and also another avada theme tutorial that goes into more details on how to customize an existing slider using the slider revolution so we have this installed right here and i want to go and install one additional plugin so down here in plugins go ahead and hover over that and click on add new and the last plugin that we want to install is just to secure your website so this is called really simple ssl if you search for it over here and this is for anyone that's using hostgator or any other hosting company that we recommend you get the free ssl certificate so go ahead and click on install now and just so that you know it is this one right here really simple plugins so just make sure you find that one and then once you're ready you want to click on the activate button also and once it's activated we can just click on the activate ssl button and pretty much that's all we have to do so if we go back to the plugins page really quickly so just hover over plugins and click on install plugins and pretty much that's all we have to do so really quickly we can go and check out what the website looks like so just hover over your website name at the top and click on visit site and this is what you should see this is the avada theme with the avada theme template and it's just a blog website right here we're going to show you how to use the avada theme to choose a template and really customize your website so i'm going to hover over my website name and click back to the dashboard and what i want to do really quickly for everyone that is using wordpress for the first time is just go through our settings so if you already know the general wordpress settings you can skip this section and move on to the next part of this video but for everyone else let's hover over settings over here and let's go to general so on the general settings page right here just really quickly this is where you can change your site title so if i wanted to i can type in avata designs right there and then i can remove the tagline if i don't want it and then i can also put in the www dot right here so make sure that you don't put anything else in if you do want to include that otherwise it's going to mess up your website you're going to have to start all over and really it's just going to crash everything so the only thing you can change here is adding the www dot if you want you can change your admin email for your website and then come down here click save changes once you're ready and once that's saved now what we can do is we can come down to permalinks go ahead and click on that and what i like to do here is i like to choose the post name structure because that's good for seo so i'm going to select that and click on save changes and you can always make these changes a little bit later so we might come back in here for setting our homepage and blog page after we go into the avada theme but that's pretty much the general settings right here so now what we're going to do is we're going to move on so now what i want to do is really quickly go through the theme settings so for most wordpress websites you can hover over appearance and click on customize and you would come to the theme customizer with a bunch of different settings but because we have the avada theme we have some additional theme settings that we can go through so we don't need to be on this page so i'm going to click on the x and hopefully you just watch that and you didn't go into it but if you did that's okay just click out and what we want to do is we want to hover over avada and over here you can see that we have options layouts all this stuff so what we're going to do is just go into the options tab so on the options page right here this is for the theme settings for the avada theme and you can see right here that you have all these different tabs to go through for your different settings so you can see that you have the layout option so you can change the site width or the page content padding you don't really need to change anything here especially with what we're going to be showing you how you can upload a pre-made template so all that stuff is going to be changed and customized for you but again you can always come in here and change what you need to so you can see right here if you need to update your logo you can come down here and you can change your logo very very easy and you have all these other tabs such as typography or colors or adding your social media icons so if you go in here you can just choose the social media icons that you want to add you can change the custom links and then you want to click on the save button if you do make any changes same with these forms over here so if you click on this you can change the form colors and sizes and all that stuff so we do have a full video tutorial that shows you how to use the avada theme to make a wordpress website i'm going to link you to that in the video description i don't want to go into too many details with the nitty gritty on the theme settings because everything is personal preference but if you need any help or you need some suggestions let me know in the comment section below and just say hey jameson i don't know how to do this or that can you show me what i need to do and i'll make a video or i'll leave a comment or reply to you guys okay so what we're going to do now is we're going to go through these other tabs right here so i want to talk about the layout tab so go ahead and click on that if you guys want so what you can do on the layouts tab is you can create global layouts for your wordpress website using the avada theme so down here you can see that you can create a header a page title a content section or even a footer and remember these are layouts so if you want a custom global header that shows up on every page what you can do is click here and then you can name it and then you can customize it using the avada page builder this stuff is going to make more sense after we go and import a template for our wordpress website which is the easiest way to have a wordpress website up and running with the avada theme so we're going to skip all these other things right now we can always come back into the stuff and again this is where you would go to customize the global layouts and i'll talk about that some more after we add a template so what we can do right now is we can go and choose a pre-made template let's click on websites and what we can do on this page is you can see right here it says import a pre-built website and that's one of the great things about the avada theme is you have all these templates and you can see all the different categories here so you can just choose any of these thumbnails and maybe you like this one you can click on the preview button and you can see the website load right here and this is again just a template so if you like what you see then you can import it onto your own wordpress website and then you can use the avada page builder to customize everything so again we can close this and you can see all these different categories so if you wanted a corporate website you can click here and you can filter and then you can just come in here click on the preview button and you can see that this is what this one looks like and you say hey this one isn't exactly what i want so i'm going to go back and maybe i'll look at this one right here and maybe this one fits what you're looking for and if it does then what you can do is you can just go and import it so what we're going to do is we're going to go and just find a template that we can use and it doesn't really matter which one we use because just remember we're going to learn everything that you need to know about how to customize your website as we go through learning how to use the avada page builder so what i think i'm going to do is just choose one of these ones i'll go with creative and i'm just coming up with this stuff on the fly right now and maybe we'll go with freelancer a lot of us are freelancers so i'm going to click the preview button again just to check it out really quickly this one looks pretty sweet so it's probably a one pager which i kind of like but we can always just change it you know this one might be a little bit more difficult for some of you guys because it has a header menu on the side like this but we're gonna go with it anyways because i'm gonna show you guys everything that you guys need to know so i like this one so what i'm going to do is i'm going to hover over this and i'm going to click on the import button and then we'll get this pop-up right here what we want to do is the easiest thing is import all the content and then you can just remove it if you guys want so i'm going to click on the import button right here and then i'll click on ok right there so you can see that it's processing and it's downloading so we'll just wait for everything to import and you can see right here that we have everything imported and at the top over here you can see that the required plugins for this template is the avatar and the avada builder so we don't need the slider revolution in this template which is good because sometimes it's really heavy and it's a little detailed so again i will link you to the video on how to use the slider revolution and also another avada theme tutorial if you do want to learn how to use that plugin so i really like this template it's the first time that i've seen it and if you are a freelancer you might want to actually get the avada theme and maybe even use this website template for your own website so again there are a bunch of different templates over here you can choose whichever one you want the one that we're gonna use now is the freelancer one so let's go up to the top over here and what we're gonna do is go and check it out really quickly so we can go and hover over our website name and just click on visit site so you can see right here now the template is uploaded onto our own wordpress website so if you guys are using a different template that's completely fine what i want to do is just go through how to use the avada page builder now so if you guys want you can go back to the wordpress dashboard right here i have another tab opened up so that i can reference that page and what we want to do is make sure that the pages are set first so let's go down to the settings and let's go to reading so in the settings page you can see that we have a static page selected and we have our home page right here we can rename these pages if you want and you can also create a blog post page and set that right here so if you guys need any help with that let me know and we do have tutorials on how to use wordpress that cover pretty much everything also so now what we're going to do is we're going to go to our home page so we can hover over pages click on all pages and over here you can see that the home page is set right here so we can just click on the edit button and once you're on the edit page right here if you guys want you can change the title and there is a front-end view and also a back-end view so this is just an overview of the avada builder so i'm going to show you both and then you can decide which one you like better so the avada builder is already turned on and over here you can see the layout for the entire page so there's a bunch of different sections here with different containers and you can go in and customize them you might see for some of the templates that you have the homepage hero with the tablet name right here and also right here so you might think there's a duplicate but that's not actually true so if we open this up and we'll go over this in more detail in just a little bit but first let me just show you why there are two of them if i click on the edit button right here in the extras tab for the rendering logic you can see that there is a rule right here so if i click on device type you can see that it doesn't show up for the mobile device so this container does not show up for the mobile device and then if i click to close that and i open up this one right here and i go into the pencil i can go into the extras tab right here and again you can see that we have a rule and now if we click on this you can see that this one shows up on the mobile device so that's just a way to make your website responsive you can use this extras tab to make certain sections hide or appear on different devices and you always want to click on that save button right there so we're going to go through this stuff and we're going to talk about the main modules that you have to go through to edit all this stuff that you see over here and again remember you can use any template it doesn't need to be the freelancer one so over here on the side you have your page attributes so we have 100 full width and we don't need these slider revolutions so you don't even need to install that for this specific template and then down here you have your avada page options so what you can do is you can go through these tabs right here and you can see that everything is already set up for you so you shouldn't need to customize or change anything unless you're going to create your own page then you can come in here and you can change whatever you want and there is nothing that you need to do down here and you can always click on the update button before we go to the live update so that's what i'm gonna do just click on that update button and once that's updated now let's go and check out the live view so this is the front end option so you can see right here that when you click on that it says this will redirect you to the front end builder so let's click ok right there and this is the front end builder and you can see that you have all of your different sections right here i like the front end the only problem is sometimes it's hard for me to hover over some of these options so you can see when i hover over the section we have that edit button at the top but then when i go to try to click on it it disappears so that kind of frustrates me a little bit and i don't really like how that is and i also like having all the different sections titled so i know what i'm working on so this is a little bit more confusing to me but if you guys like this you can use this and all you have to do to edit any of these sections is you can see that you have this section right here you can hover over this and then you have your container options right here you can delete you can save you can duplicate or you can edit this so if you click on the edit button then this is exactly what you see on the back end it's just a lot smaller over here where you have your general settings and then you can go into these other tabs right here for design for background or even the extras tab where you can set the rules to make the website show up on different devices to make it responsive so if you guys like this then you guys can use the front end and there are some buttons here for the library for these other things so you want to close out of this and then you can see over here that you have all these other options including the tab right here for the global options and you can click on edit this you can click to edit this or you can click back over here and then you can go into the page options also and then you can hide this if you wanted to as well so it's really up to you guys you have the save button here you can see what the website looks like on different devices and then you have these other tabs to preview and all that stuff so you want to click on the save button if you do make any changes on the front end i'm going to close this and i'm going to go back to the back end so you can see right here i'm going to exit to the page backend right there so once we're back on the back end over here what i want to do is just walk you through this stuff so first what we can do is we can talk about how you can add a new section so what you always want to do when you add a new section is you want to add a container so you want to click on the plus button here and then you can choose the row option that you want so if you just wanted something really large for like a slider or a large section you can do this but maybe you want a 1 3 2 3 section like this so you can see that it shows up just like that and then what you can do is you can go into the edit container right here and what you can do here is you can change the container settings so if you wanted to change the width or the height or the content alignment you can and when you're using a template you don't really need to change anything because everything should be set up for you so this is only if you're creating a new section on your own and then in the design tab right here you can change the margin so you can add some top and bottom margin you can add some padding if you want and you can also change the custom link colors and you can also customize this in your theme settings so make sure that you do that for your default settings and over here you can change the hover colors the border size if you wanted to and then you can add a background image in this tab so you can do a color a gradient an image if you click here just upload your image or even a video so i'll let you guys do that on your own if you guys want otherwise you can leave this blank and you want to just come in here and you probably want to make this transparent so that's up to you guys and then you want to click on save if you guys do make any changes and then on the extras tab right here this is where we can go for the responsive stuff so maybe we'll have an entire section on responsiveness but just remember that over here rendering logic if you created a rule so you can come in here and maybe we can choose device type if we go equal to then it's only going to show up on whatever we select so if we go mobile and tablet and it's equal to you that means that this entire section that we're creating is only going to show up on the mobile on tablet device if we go not equal to and we say mobile then this section is only going to show up on desktop and tablet and not on the mobile device okay so the big thing here is the equal and not equal and then what device you select for the responsiveness and again i'll cover that again when we go over the slider so again you want to click on the save button if you do make changes and you have the buttons up there so we're going to click cancel right here and then you have your sections right here that we just added so if you wanted to edit this little column right here you can click on the pencil and again you have some settings that you can go through so maybe you want to change the alignment to centered or you want to change the width or just the number of columns that you have and then you can change the background over here super easy similar to what we just talked about in the container section even over here you have the rendering logic and you would just click save and then you can add your elements so you would do the same on this side but we'll just talk about this one so to add your elements you just click on the plus button right there and then you have all these different elements that you can add and you probably don't know how to use these yet and that's what this video tutorial is for so if we wanted to add something like a text box we can just find that and these should be in alphabetical order so we have a text block right here we can click on that and then you can choose the number of columns we'll leave it at one and then you can just put in your text right here so maybe we'll type in demo text just like this and then if you wanted to go to the design tab you can change the margin you can change the font size and you can see by default it's 16 px so maybe we'll type in 24px right there and then the font family you can change if you wanted to you can change the line height the spacing and even the font color so we're gonna go with red or this pink color just so that you guys can see and then we'll click save right here so now we have this section and we're going to click on the preview button just to show you what that looks like so we're going to open up a new tab and you can see once the home page loads i'm going to scroll all the way down and just remember that this section is very very basic so it doesn't really look good but you can see that we did add our text right here we probably want to add some margin some padding and a bunch of other stuff and we have the background color right here and then below that we have the footer okay so super easy to create a new section but what you want to do is make sure that you do go in and customize it so add a background image or different color and then add some margin and padding and whatever types of elements that you want all you have to do is just come in here choose whatever you want and then customize it and you're going to see how easy it is to really play around with these modules as we go through this video so what i'm going to do right here is just delete this container and now we're going to scroll up to the top and we're going to go through these little containers right here and really talk about the different modules and i think you're gonna really get a good handle on the avada theme really really quickly so what we're gonna do is expand the first home page hero right here and we'll walk through the settings and then these modules so the first thing that we're going to do is click on the pencil right here so you can see that we have our general settings right here and we don't need to actually change anything because when we use a template the designer's already set everything for us so you can always just come in here and back into what they did so if you want to create a new section you can see that they set the minimum height or the alignment however they did it and then you can go and create your own section and in the design tab over here you can see that there is some padding and they use vw instead of px or percent so just keep that in mind but you can always use px or percent if you're used to that and then down here you can see that the link color is the default link color in the theme settings so if you want to change that you can go and do that and everything else is already set up for you and one of the things in this section is there is a background image so i believe the image actually overrides the color so even though you have a color right here and you can change this if you wanted to you can go into the image section and you can see that there is an image that already has a background overlay so you can see right here that it skips the lazy loading and then you have the positioning right here and there's no repeating and then you have the parallax effect turned on right here because it has the fixed options so if i go over here and look at this you can see when i scroll through it that the image has the parallax effect so what you can do is you can come in and you can change the background image if you wanted to by clicking on the edit button right here and then you have the upload files tab if you want to upload your own images or you can go to the media library and you can see all of your imported content right here and you can always remove the stuff also if you do change anything you want to click it and then just click on the insert button right there okay so you can click save right here and that's how you can insert a background image into the first section or any section at all and now what we're going to do is we're going to talk about the modules that you see right here inside the section so you can see we have some text right here on these three different lines so the first thing that you can do is in each container or column you can click on the edit button right here and then you can go into the edit column and you can see that the content alignment is set up and then in the design tab right here you can see how many columns there are so this one is just a one by one so it's just a large column but if you wanted something like two by two or one thirds then you can just select that and then it'll make it smaller and if you go through this you can see everything looks like it's all set up for you and there is no background image here so again you can just go into those and see what the designers do and then you can go and set up whatever you wanted to or edit whatever you want for your own containers even if you are using these templates so that's all we have to really talk about for containers on how to add a background image or change the width for each of your columns so now what we're going to do is we're going to move on and talk about how to change some of this text so these are all title modules and you can see that there's two of them here that are the same so we'll talk about that and how that helps with responsiveness in just a bit so the first thing that we're going to do is we have this title module so we can click on the edit module and all you have to do for a title or a headline is putting your text right here and then you do have the additional buttons down here to customize your text or you can add an element if you wanted to using this button and these are just avada theme elements right here that you can add also and then if you go to the design tab this is where you can go to center the text you can change the html size or the font size and the font family which is also set up by the default theme settings and then if you come down here you can see that you have spacing and you can change the font color also all you have to do is just come in here and then you can just click and drag and color whatever you want for your font sizes or colors and that's pretty much it so you do have the extras tab here for animations if you want but setting up a title or headline is really easy so we can go into this next one and you can see the same thing you just have the title and then in the design tab the different font size this one's going to be larger and then if we come down here you can see that the font color is also different so when i come to the homepage you can see that this was the first line and then this is the second line right here and if we go and check out the modules right here you're gonna see that there are two of them two of the same ones and you're probably wondering what the heck why would you do that and that's because if we go into this first one right here where it has this little icon we can click on this and we can open it up and we can see element visibility this one is for large screens so this is for like larger desktops and when we go to the design tab you can see it's 140px okay so now let's go into the second one same text but now let's go into the title icon right here and you can see that it's selected for small screens and medium screens and again this is for responsiveness so it won't show up on the larger screens and if we go to the design tab here you can see that the font size is smaller it's 90 px instead of 140 so it fits on the screen so that's just another way just like the rules that you can add for making your website responsive okay and then this text module is the same as the other one so we won't cover it but that's pretty much it and you can always add some additional modules to any of these sections just by clicking in here and then you can search and find whatever modules you want you can add a search bar table icon box whatever you want we're gonna go and teach you how you can customize that stuff as we go through this video so right now i'm going to collapse this section so that we can move on to the next section right over here and this is a container and we can expand this really quickly and you can see that we have an image here and that's because this is a background image for the mobile device so this is part of the responsiveness that the designers created and you can see that by going into the pencil right here for the container and if i go into the extras tab you're going to see that we have a rule right here so we might as well just talk about the responsiveness again so again for these different containers or different modules you always have this extra tab right here and you can create a rule to make the module or the container just show up on certain devices and not show up on others so it's kind of like hiding and unhiding the section so what we can do is right here the developers created a logic and the logic is right here if we open this up you can see that they selected device type equal to mobile device that means that this section the container whatever is inside it is going to show up only on the mobile device if they change this to desktop it would only show up on the desktop device and same with mobile and tablet and if they changed equal to to this other option not equal to that means that the container and everything it contains would not show up on the device that's selected right here so a lot depends if you choose the not equal to or the equal to sign over here so we want to choose equal to because we want this to show up on the mobile device so we're going to click save right here and just remember that this container right here at the top this first one if we go into it and we go into the extras tab here and check the device type or the logic right here you can see that it's not equal to the mobile device so again this first column does not show up on the mobile device but the second one does and if we come down here the home page hero over here should probably also show up for the mobile device i think so if we click in here and just check we'll go into device type and you can see that this is also for the mobile device so this probably should be renamed to mobile instead of tablet so maybe i'll just rename that so you guys don't get confused and my keyboard's making some mess right there so we gotta make sure we type that in correctly so this is for the mobile device and this is also and that's because of the responsive rules that we set up okay so if you want to add an image you can just click on the add element and then just come down and find the image right here and then you can go in and upload your own image you can go into this tab right here to upload your own images you can go into the media library and you can find the image that you want to use so let's just say we want to select this one and you should see the image show up and remember this is just for the mobile device so we can't actually see it so i'm actually going to remove this unless we were looking on our phone so i didn't make any changes but i'm going to click save right here and i'm going to remove this module so we'll just remove that just like that and again this is just for the mobile device and super easy and then down here we can go into this section and i don't think there's anything to change here so this is just a kind of an overview again of the first container that we went through the font sizes are probably a little different you can always go and check and we can see in the design tab that the font size right here i think this was blank last time so now it's 15 px and then i know for this size this was like 140 or so so you can see that it's only 80 this time for the mobile device okay so that's how we can cover responsiveness images text and what i want to do is go through these other containers and see what's inside of them so we can just expand this and what we're doing here is really just kind of going through exercises of learning the different modules so that you can go and customize your entire wordpress website using the avada theme so this is the about section and you can see that there are some sections within sections so we have our headline up here and then we have a split column down here with some text boxes so if we go to the home page and we check it out you can see that we have an about section with a divider and then some containers right here with some text boxes so let's show you guys what the designers did for this section so the first thing we should always do is go into the container settings and just make sure we know what they set up right here so we don't need to change anything we can go into the design tab you can see that there is some padding on the top and the bottom so that just gives it some space between the two containers and then we have our link sizes and then you can see that there is no border right there so super easy has a background color here and there is no rule for this section so that means that this section works on any device okay so we're going to close this and you can go into these ones if you want these are just going to be title and text blocks you should know how to use this stuff so you can see right here that the number of columns is one and that's what we want and you can just see that this is all just centered like this and the heading right here is heading six and we can go over here and you can see that everything is just set up as the default and the font color is this color right over here so it's just selected for you and you can always change that and you can see right here that we don't have anything in the animation tab so you can always add an animation if you want to but we're going to leave it as is so i'm just going to click save right there and we're just going to move on to the bottom section right here and what you can see is that this is a two column section right here and we can go into this and you can see in the design tab that is just one half so if we wanted to we can actually split this up more so let's go with one fourth and see what happens let's click save right here and now if we scroll down to this section you can see that it's one fourth right here and then over here would be another section that you can add another fourth so we don't really want that i'm gonna go back in here and change this back to one half because this looks a lot better and we're gonna come down and just see what we have in here so if you wanted to you can go to the container or this column and edit it but these are just text blocks so you can see again we have one column and then we have some text right here and then you can format it so i don't need to go into too much detail here because this stuff is pretty straightforward so if you guys want to edit your text if you want to add an image you guys can do that you can also just drag this stuff around you can rearrange the stuff just by dragging it just like that or you can delete it or copy it whatever you guys want to do okay so now we're going to come down to this section right here and one of the things i did miss though is that we have this little border here so i want to show you guys how that is created so before we come down to the next section right here we have a blank section and you can't really see it but there is something there so you can see that it's a separator this is a separator module and there's different styles you can have none which would mean that you just have spacing or you have a single border which is that line that we have and then what you can do is you can come into the design tab and you can change how thick the border is so we have 130 px is how long it is and then we have some spacing here just to give it some space in between these sections right here and then you can come down here you can center it and then you can change the border size so if you want to make it thicker you can you can change the color right here and you can even add an icon okay so i just want to make sure that you guys know that that's how that is created it's using a separator module and then you just turn it into a border line just like that all right so we're gonna come down now and we're going a little fast and i want to because this stuff is so easy that i want you guys to be able to really just run with the avada theme and get what you guys need to get and if you guys really wanted to you can probably just pause the video now and play around with the template and you'll probably know what to do because as you're seeing right now everything is super super straightforward as long as you have the template so this is another section within this container right here and we can go and check it out so we have the about section here and then we have this other section right here so we can come in here and what we can do is go into the edit column and you can just see that we have all of our settings and we might want to go and check the background so we're going to go over here and you can see that there is no real background color and there isn't really a gradient i don't believe and there's no image so we can click save right here and you can see down here that there are some modules so we have the separator module and this time around there's no style so it's just some spacing and you can check it out there's 50 px for the spacing and then we have this other thing right here called section separator with a slant so this is how we create something like this where you have this little slant right here so let's go and check out how you can use this so let's click on the edit button so right here we have our separator section so you can see on the website if we scroll up a little bit you can see that there's a line right here that kind of goes slanted and that's because we have this section separator right here in the style we have the slant option and then if you come into the design tab over here you can change the background color so what i'm going to do is just make it so that you can actually see so i'm going to choose this yellow color because i think you're going to be able to see it once we do that i'm going to click on the preview button right here and once the wordpress website loads i'm going to scroll down and you can see that we have this slant separator and this is the section that we're editing right here so if you want to add that all you have to do is just go and add the section separator module and then you can just come in here you can choose the style and then you can come in and choose the background color just like this okay so what i'm going to do is i'm actually going to change that back so i'll do that as i go through this video but i'm going to remove that yellow color so i'm going to close this right here and that's pretty much all we have to do for that section and once you guys are ready we can come down to this next container so if you guys want on the website what we're doing now is we're working on the why work with me section so you can see that we have all this text and then these little icons right here so we want to come in here and we can expand this section and you can go into the container settings if you need to and again we're not going to go through all that because this is a tutorial that kind of just shows you everything that you need to know you can see inside this container we have three different columns and we have a two thirds section and then a 1 6 and 1 6 and these ones are just kind of columns to keep everything in the middle over here so you can go into the 1 6 column on the left hand side and just see that there's really nothing here you can just see that the width is selected here there's some spacing and then for the background there's nothing selected over here the main content section is right over here so what you want to do is just go into the settings section right here and you can align the content to whichever one that you want and then if you need to change anything you can so we'll just go through this really quickly you can see that there is some spacing and some margins so you always want to play around with this stuff make sure you do something that works with your website so play around with the margin you can use px or percent it's really up to you guys and then in the background section over here you can see you can add your own background color also so the main thing for this section is really just these modules and you already know how to go through these because these are just text and headline modules so i'll just click in here and just show you that you can see we have a title module so we won't go through it again but we have the design tab here for the alignment the heading size and then the font size and font family same with this one right here and then we have a separator i think right here so we can just click in this and you can see that it's a separator with a single border that's solid and then if you want you can change the size and the length over here so you can see that we have the width and then we have the alignment and then the border size and then the color is going to be selected right here so it's all that white color that fffffff so again super fast and then you have a text module right here that you can just go in and customize and you already know that you have the design tab right here to change the font family font size and font color and that's pretty much all you have to do for this top section right here so what we're going to do now is just talk about what to do for these icons so i'm going to come and scroll down a little bit and you can see that we have some additional columns right here and we have these counter circles so what we can do here is we can go into the counter circle so let's just go into one of these and check them out so you can see that you can add as many different counter circles as you want you can just click on the plus button right here and if you do that they're just going to show up one by one so one right here and then one below and so forth and we can see that we have three columns for this stuff so what i'm going to do is just remove these two and to edit this all you have to do is go into this first one click on the pencil right here and then you can change the percent that you want to fill with this color so you can see that it's 88 right there so that's why this one is filled out almost 100 just like this and then this one also so you can see down here that you can change the size of the counter you can change the countdown the animation and you can also add an icon so if you use the font awesome icons all you have to do is put in the code right here and then you can change the size and everything like that and then you're going to get what you see right over here so that's all you have to do and you can go into each one of these and just click save after you edit them or you can remove the section again you can just go in here click on the pencil and then you can change the area filled and you can change the color and you can change the size and then you can add whatever icon that you want so this one is the shield and you can see when we go here that we have the shield right here and then for these text boxes below in the template that we're using and again we're using a template to create our website and customize it because it's just so much easier you can see we have our counter circles and then we have this text box right here that you can't see so if we click on this you're going to see a title section and then we have our title right here and the reason why it's white is because i believe the font color is also white so if we come down here you can see that we have our font color so if you guys want to customize your font colors or sizes you can do that right here you guys already know how to do that so you can pause the video to edit this entire section if you want and then what you want to do afterwards is you want to come back down here and this is just like what we had at the top so if i come up here you can see in this section we had a separator with the slant and that's just going to do the same thing for the section below so you can see this time around we have a slant that goes the opposite way so let's go in and check it out so in this one we'll just click on this and you can see that we have the slant and the horizontal this time starts on the right hand side and then in the design tab over here you can see that it says green color and that's what we have over on this page right here so i believe the next section is going to have the same background color but we have this little slant right here because of this module okay so you can customize that as well and then what we're going to do is we're going to come down here and i want to make sure in this new container i'm going to click on this and i'm just going to go into the background just to see and you can see that again we do have that same background color to make everything kind of be seamless with the slant and then the background over here so super easy we have a title section with a separator and then we have these boxes down here so let's just go in and check this out so we're going to click save right here i'm going to open up this new container and you can see that we have our title section so we won't go through that and then we have a line right here i believe so this is the separator line so we don't need to go through that and then what we want to do is we want to talk about the section below this so we have this section that we just covered and then down here you have these hover boxes with i don't know what you want to call these projects or just links so let's go and check out how you can edit those so we're gonna come down here and you can see how easy this is we already have covered so many different containers and we only have about six more left so i'm going to open up this one and you can see that this is a portfolio module that we're using for that section so if you guys need to you can go through the settings to see that we're using the 100 full width option right here and i don't think there's a background color but you can put in one if you want to and then over here we have our portfolio modules so we want to click and open that up and you can see that this is what you see right here so there are two sections and you can see that we have a grid section like this and then we have an auto feature so it might be the entire section that you see over here with all this other stuff so let's just go and make sure so you can see we have the grid option selected so if we scroll down you can see that the number of columns is 2 right here and so that means that we just have two columns per row and if we scroll down some more you can see that there is another two projects here and another two projects here so if you want to limit the number of projects that show up you want to scroll down to the post per page and you want to put in the number that you want to show up over here so i put in six some people put in eight some people put in two it's really up to you and then if we scroll down some more you can see that you can exclude or add different categories that show up and you have the order that you can screen or order by and over here you can put in the responsive mode so element visibility you can make it show up or hide on different devices or screen sizes and that's pretty much it if you guys are wondering how to customize the hover color so you can see when you hover over this it turns that pink color you can either go to your theme settings or in the container settings over here if you go into the design tab i believe you have the container link color over here so you can always just change this and this is the default colors okay so you're probably wondering how do you actually add the projects or portfolios to show up because we talked about these modules but how do you actually have the beyond labels project so what you want to do is you can click to update this if you want i'm just going to show you really quickly where you can go to create your portfolio projects so over here on the left hand side you have portfolio so we can just click and open this up in a new tab but what you would do is click add new right there and then you would go to this tab and you can see that we already have some template projects so if we want we can just go into one of these so we can click on the edit button and you can see that the title is right here and then we have the formatting which is the standard option and then down here we're just using the avada builder again to create this portfolio page to showcase a project so i'm not going to go through the entire modules here but you can see that a module is used and again you can come in and customize it and add or change whatever you want and then what you can do is you can go and check it out and you can see the portfolio page right here so this is again using the avada page builder and you can see there's a bunch of different modules and you can go in and customize the stuff you can see how it's all built just by going to the project page so it's a lot different than the home page but also very very similar so again we're not going to go through everything but you can see all the cool stuff that you can add and this is a great thing about the avada theme templates they just have so many cool details so many cool things that you can build and i think this is just really professional and just adds a great touch to your website okay so again all you have to do to come to the project page is you just want to hover over portfolio and you can click on any of these links to create your own or just customize these ones and then you have all your settings over here also and if we come down to the bottom let me just scroll all the way down we should have some theme settings also over here or some custom fields that you can check out and look into but i don't think you need to do anything so don't worry about a lot of the stuff only in the avada page options maybe you want to customize the stuff but again everything is already set up for you okay so click on the update button if you do make any changes we're going to close that and come back to the home page right here so we just covered the portfolio section so what we're going to do now is we're going to scroll down to this view all work link so if you want to add that that's just a button and down here in this new container right here you can see that it's the full width option and in the design tab we have our custom color links and then you can see that there's no padding right here so all we did was we added a module so if we come in here you can see that it's a button and then we have the link right here and then the text for that button so it says view all work and then over here you can see that you don't need to do anything but you can change the alignment if you want to and then in the design tab this is where you're going to go to customize the colors for this link or this button so in the design tab over here you can see that we have the default option but if we go in and we want to change the colors we can select the custom option so this is for customizing the colors for your button just select the custom option in the design tab and then over here you can change your colors for the button and then also the colors for when you hover over the button and then also the text colors and the accent colors and the size and the radius and the border so you can see right here we have this border color and if we scroll down some more you can see that you can even add an icon if you wanted to so again when i just hover over the section you can see that this entire button it's just a button that goes all the way across it just turns white just like that pretty cool so again you can customize it you can make even smaller buttons you don't have to make something like this but that's the thing that is made for this section and i think it's really really cool okay so we're gonna come down and look at this so quick how the template just lets you just flow through building out your website and i know that you guys have to pause the video to customize some of the stuff but it's so easy to explain how simple it is to use the avada page builder with these templates because we can just go through this stuff and it just saves you so much time so over here again you can go into the container settings if you want you can see that it's the site with option this time and over here you can see that we have a background image for this testimonial section so that means if we go into the background and we go into image right here we have an image right here so again you can always edit and remove this if you wanted to and you can also add some different types of loading so if you wanted the parallax scroll effect you can add that or anything like that also so i'm going to click save right here and we're going to open this up and you can see that we have a big quote image so that's pretty easy to customize we'll just go into it really quickly just to show you you're going to edit or remove this and this is something that was uploaded by the theme developers so if you need some help with images or anything like that i'll link you to some websites but you can also find some on your own and then you can change the size if you wanted to and then if we come down a little bit we have a separator which we don't need to go into and then the testimonial module this is something new so i'll show you it really quickly i'm going to click on the edit button right here and you can see that we have testimonials so again you can just add as many as you want just like that and then you can customize the colors or settings over here so you can change the speed the background color the text colors and all that stuff if you want to edit the testimonial just click on the pencil for an existing one and you can see that you can put in their name right here and then if they have an avatar you can put that in you can put in their company you can add a link so if you have their linkedin or social media profile you can just type that in right here and then you can just type in their testimonial right over here and that's pretty much all you have to do and then just click save and then you can do it for this next one and then you'll create some sort of carousel just like this so you can see we have two testimonials just like this they're both the same but you can see that we have bullets and that's pretty much it so for the next part let me just click save right here you can see that we have this section over here and inside this section we have a big gap so you can see that there is a large gap right here so we're probably wondering hey how do you actually create that let's go into the edit column or container right here and i think if we go into the design tab we're going to see some margin right here so the seven percent is what's going to give us some spacing between these two sections and then if you come down here there's a 25 gap also and then we have some icon boxes right here so we can just go through those so let me just close this we have a text box a separator and then we have this image carousel so if we click on this all we did here was we added our logos one by one by clicking on image and then just uploading a new image just like this okay so if you guys want you can remove any of these you can edit them and then you can come over here and you can see that the autoplay is not on because we don't want it to just scroll through and then we have five columns so we have six different images right here so what we can do is we can just click and drag like this kind of cool and that's pretty much it so you have your spacing your scroll and you can turn on the navigation if you wanted to we have the mouse scroll on and you can customize that stuff super cool and just something that you can add if you have some icons or business logos or anything like that okay so now if we come down here again we have another separator we're not going to go into it this time but that's just another slant that you see right here this blue slant and then if we just close or we'll leave that open we'll come down here you can see we have three more options or three more containers so down here we have another text box super easy don't even really need to go through it but i'll just show it to you it's just very very simple just like this and then we have our blog post section so if we open this up let me just talk about the blog module really quickly so we can go into the blog module and we can go and check this out you can see that the blog layout options are here so we choose the grid layout which just makes it so it shows up just like this and i did delete the hello world blog post already so i'll show you how you can do that in just a second and right here we have the number of columns we have three and the number of blog posts per page is going to be three also so that's all that's changed here and if you want to change the link colors then you can go into the container settings for that what i want to do is i want to show you how you can add a blog post so what you can do is over here we can hover over posts and we can click on add new if you want to create your own i'm going to go to the post page right over here and i already removed the hello world one so i'm just going to edit the one that i see right here and when we open this up what you're going to notice is that you can put in your title right here and then you can just write a blog post or what you can do is turn on the avada builder and then you can create containers and different sections so you can add all your different text and images and you can format everything however you want so when we go and check out this page now let me just open it up you can see that we have a featured image with our title and then when we scroll down we have our text with headlines and then our blog post image right there a quote right here and then if we come down we have some additional modules down here so what you can do is you can back into the section just like the portfolio page where you can create the stuff so this is a quote and when i go into the edit you can see that it's just a text block but over here when i click on this you can see that the whole thing is quoted so that's why it shows up as a quote and then you can also add a featured image if you want over here and a separator and what you want to do is when i go back to the home page let me just show you guys really quickly we have an excerpt section so if you want to customize the number of words that show up you want to go into your theme settings for that so we went through this a little earlier but you can just go to the options and in the evada options over here just go down to blog and then you can just scroll down to the excerpt section so right here excerpt length just put in the number of words that you want to show up or the number of text characters and then just click save and then that's going to change the formatting okay so to add your featured image for the blog post and that's where we have the title section you can just put in the featured image at the top over here and then if you come down to the bottom you're going to have the avada page options and then for the posts you can just come in here and just click yes for show featured image and then for the page title bar just keep this as the default and then just click update and then you're good to go all right so that's how you create a blog post super easy so go ahead and do that you can customize this section if you guys want and then once you're ready we're going to go back to the home page and we're just going to talk about this last section which is a contact us section where you can put in a contact form and then we have our footer down here so you can see that we have a background image and some text and then a contact form so i'm going to come down here the first thing we can do is go into the container settings so you want to do this all the time and i'm just walking you through it again you can see we have our site width right here and then our content alignment we have the design tab for the link colors and some padding and then for the background we have a color and it's this color right here so this color code and we just click save right here and then we can go and expand this and you can see that we have a single column in the middle it's two thirds we have some text modules so you can go and format those we have a separator right here which has a little border so we can just see right here we just went through these different modules and then we have a text block below and you already know how to format that and then below that we have another container or column right here with the avada form module so you're probably wondering this is the contact form but we don't have a contact form already created so we can't really customize or talk about this until we talk about how to add a contact form or customize the existing one so over here on the left hand side is we can hover over the avada theme and click on forms and i'm going to open up a new tab and you can see right here that this is the avada form builder and if you want to create a new form just put in the title of the form right here and then click on create you can also read the documentation and there's some videos on how to create contact forms but what we have down here is a template of the contact form that's already created for us so we can just click on the edit button right here and check it out so on this page right here you can see that we have the contact form and the avada builder turned on and then we have our container with our different modules so you can just add the different modules that you want so you can see right here that the modules that we have our name email and phone and if we go over here we have a text field for our name so we can come in here and you can see that it says name right here so this is just the field name and you can type in whatever field names you want and then you can make it a required field and then you want to put in the placeholder if you want people to know to type in their name right here and i'm going to show you how to add some additional modules but let's just go through these other ones really quickly so we have email address right here and you can just type in email underscore address and then email and make it a required field also and then you have the phone number one that you can go through on your own and this one is not a required field so people don't have to input that and then right here the notice let's click on this really quickly and this is the success message so whenever someone submits the contact information this is the message that they'll get and then if something messes up this is the message that they'll get right here so you can just change that if you want and then we have our button right here if you guys need to customize it you can see that it says let's talk and then it has the alignment right here if you want to change that and then just for the design again if you want to customize the colors choose the custom option and then you can customize it however you want otherwise it's going to use the theme settings if you have the default option okay so what i want to do really quickly is just show you how you can add some of these modules because you're probably wondering what the heck like i don't know how to add an email or phone number or even a text block so that people can send you a message so what we can do is just go into the element box right here and see these different modules so if we wanted to we can add a phone number field just like this and then we can just type in phone number again and you can't put a space so you have to do an underscore and then you can just type in phone number right here so let's just capitalize all this just like that and click save and then we can add a text area field so if you want someone to send you a message this is the one that you would use and then we can just type in a message right here and we can make this required so that someone actually has to send you a message and then we'll just type in message right here and then i'm going to rearrange these just so that we can see them and this is going to repeat the text for the phone number field because i have two of them but i want to show you that it's possible to add a new one if you didn't have one before so i'm updating this and i'm gonna go back to the home page and just refresh this and once it's refreshed we're gonna come down to the bottom and check this out really quickly just to see if everything worked so we have our contact form right here we have the phone number and it looks like it adds it and then we have this message box right here so everything is awesome and you don't need to have this you can just add a custom one if you wanted to but that's all you have to do and then you can just submit and you're probably wondering where does the email or submission go once they click on this button so let me just show you that really quickly so first i'm going to remove this and also i'm going to remove this one so all we're doing is taking in someone's contact information so we want to talk about what happens to the submission so if you come down here to the form section you're going to see submission type you're going to see the submission type and in this drop down right here you can save the database you can send to url or you can send to email so if we want to send this information to our email address we would select this one and then we would type in our email right here for it to send to so i can type in nyc tech club gmail.com and then i can say submission from website and then it's just going to send me an email whenever someone fills out the contact information just like that okay and you can also put in some additional information here if you need to so if you wanted a name for the email you can just type in let's say nyc brizzy and all this other stuff it's up to you guys you can see it's pretty straightforward you can just read it and then just click update right here and now all this information is going to be saved so when someone clicks on the submit button it's going to send an email to this email address right here okay so that's all you have to do to create a contact form and then what you want to do is go back to the page builder and you want to select that contact form so we have the avada form right here and all we have to do is just go into our drop down and we should see a list of all of our contact forms that are created so we have that contact one we just select that and then click save and now it's going to show up on the home page or any other page if you have your own contact us page or anything like that and then you can just click update and then you're good to go so pretty much that's all you have to do to go through the avada builder especially with this template to customize all the different sections to build out your own wordpress website using the avada theme so we covered a lot and i think we did it pretty fast so if you wanted something more detailed slower paced i do have a full four hour video on how to use the avada theme to build or make a wordpress website i'm gonna link you to that in the video description the other two things that i want to do before we sign off on this video is we want to talk about the header menu which is up here and this is a little funny one because it has the hamburger icon with the pop-up like this instead of something right at the top so i'm going to show you how you can customize that and then we also want to do the footer way at the bottom over here so we have some links we have some social media buttons and a logo right here so let's go and show you how to customize the header and the footer so the first thing i want to do is i want to go and make some menus so hover over your website name we can click on menus right here or we can go back to the dashboard and once you're back on the dashboard if you hover over appearance and click on menus you're going to go to the menus page and once you're on the menus page let me walk you through how you can create a header menu like this where you have the plus button for a menu on the side that shows up and then also the hamburger icon to show your different pages and then you can click on these pages and then go to them just like this so if you want this plus button right here what you want to do is you want to come and add the avada special menu items you can see right here that it's the sliding bar toggle so you want to come in here and click add and then once you do that you want to come into the avada menu options and you want to choose the icon that you want to use to make the side bar toggle show up so we're using the plus button right here we just click on freelancer and then click on this click save and that's pretty much all you have to do so if you're wondering how you get the menu items for this one it's actually in the main navigation so the sliding bar toggle links to the main navigation so i'm going to click select right here and go to the main navigation and the reason why you know this is the main navigation is because you select main navigation here and then you have these items what we are editing with the other tab is the entire menu that you see right here so it's not the main navigation but it's this entire section so to get the hamburger icon you want to add a custom link so it's just one of these and it uses the pound sign you can just click add and you'll come in here and you'll have something like this again you want to go into the avada menus and then just click on freelancer find the hamburger and then you can add it just like that and then once you do you can put in all your pages down underneath to show up and you want to indent them so that they're a sub item of the toggle or the hamburger icon right here okay so you don't need to select any display location here because the only main navigation one is linked to the sliding bar toggle and then once you're ready you want to click save right there and once you click save now what we want to do is we want to go and set our global settings for the global header so to do that you would come into the dashboard you can hover over avada and click on layouts and on this page you can set your global layouts so down here you can see that we have the global header and the global footer so all we want to do is click on the edit button for the global header and we'll open up the page builder and on this page right here you can see that we just have our header and this is going to show up on every page so we have our logo right here and you can go and change your logo in the avada theme settings over here and you have your menu over here so if we click on this you can see that it's going to link to the freelancer menu so right here we have the hamburger icon and then it's just going to link to this menu and this menu remember it has the sliding bar toggle and also the hamburger icon that links to everything else and that's pretty much it so you can go into the settings and in here you can see the settings so we have the 100 width right here and then we also have some padding and then our link colors right here and the hover color so if you want you can put in a z index also and it's really up to you but that's all you have to do to create your global layout for your header and your theme or your template that you use might be different than this one so it might have a different layout but that's all you have to do to customize it and then down here you can see the layout section options you don't really need to do anything here but you can go through the stuff and check it out if you want and then just click update if you do make any changes okay so now what i want to do is i'm going to close this and we want to talk about the global footer so really quickly i'm going to open up the home page again and we're gonna go back to this page and just scroll down all the way to the bottom and look at it really quickly we have our logo right here some text and then the social media icons so if we go into the global footer we can go and check out the items that are added so let's click on the pencil right here and you can see that we have our global footer right here and then we have a container and again if you go in here you can see that we have the width selected and then we have some padding and we also have a background color and then over here we have our image so i think this is the logo and you can see right here that we have our logo but it is transparent so if i click on the edit button it's going to go to the media library and i can just scroll down and you can see that it is selected right there and then we have the copyright below this you can see that has some dates and then some links right here if you want to customize this you can just go into the next section so it's the date section right here if we open that up you can see that we have one column and in the date section you want to click on the pencil right here and then you can just change the formatting if you want to so right now we have it as a year so right now the year is 20 21 and then the before text for this year is gonna say this and then it has the y right here so it's 2021 and then the text after so if we wanted to just type in stuff right here we could so we can type in nyc brizzy and then i can change some of this text so i can come in here and type in www.nycbrizy.com and then i'm going to remove this other text that links to another page so i'll just click and delete this and then i can see what else is here so it says theme fusion so i'm going to change this to nyc brizzy and i don't know if that's going to repeat let me see it's going to say avada theme by theme fusion so i'm going to type in nyc tech club instead so nyc tech club let's put that in and then all rights reserved powered by wordpress you can change this if you want to we'll leave it like that and then just click save and then you have your social icons right here so if we click in here you can see whichever ones have a url are the ones that are going to show up so you want to replace these with your own links so we have facebook instagram and then i don't know if there's any other ones we'll just scroll through this twitter right there and then we can click save right here click update and then once that's saved i'm going to come over here and refresh this one more time and once the homepage loads i'm going to scroll down to the footer section and this page is just it's this template is just beautiful i really like it so i hope you guys liked it also but down here we have our logo we have our updated text and then we have our icons that show up based on the urls that you add into the global footer layout over here so remember this is the global layout so if you want to access it you can always just go to your options and then go to layouts or you can just click on layouts right here and then you'll go to the global page and then you can format this stuff so we just covered the header menu and the footer and all the modules for the home page and just remember that there are some additional pages so if you hover over pages you can click and see the template pages that you have on your website so we have a let's talk page work page and then a design page so you can go into each one of these and you can look at the avada page builder and you can look at the different modules and then you can go and customize them however you want just make sure that you click on the update button and you can go through all your settings and everything and just remember that the avada theme has pretty much anything that you need so if you want to change the layout for the website you can come back into the website tab and then you have all these pre-built templates that you can just choose from you can replace it you can do whatever you guys want okay so this was a quick overview or i don't know if i would call it quick it was really detailed but we just went a little fast on how to use the avada page builder to make a wordpress website and this one right here is a freelancer website looks beautiful but just remember this is just one of many many different templates that you can choose from i hope you guys enjoyed this video hopefully you found it helpful hopefully you realize the power of the avada theme page builder and hopefully you guys build something beautiful and amazing let me know in the comment section below if you guys need any help whatsoever make sure you subscribe to the nyc tech club youtube channel and like this video if you found it helpful thanks for watching and i'll see you in the next one and there you have it congrats on learning how to make your own wordpress website using the avada theme the only thing that i want to mention before i say congrats like the video all that stuff is make sure that you remove the demo content if you imported it and you replace it with your own stuff whenever you guys are ready so that's about it if you guys have any questions comments need any help whatsoever leave a comment in the comment section below make sure to give this video a big thumbs up like subscribe and all that stuff thanks for watching and i hope to see you guys in the next video

Channel: NYC TECH CLUB

Views: 1,673

Keywords: make a website, wordpress website, wordpress tutorial, wordpress, avada, avada theme, create a website, build a website, how to, blog website, ecommerce website, portfolio website, photography website

Id: VdH3YtuRjuM

Length: 85min 32sec (5132 seconds)

Published: Tue Oct 05 2021