How to Make an actractive WordPress Website – 2020 by using Avada Theme
You’ve come to the right place! You’re about to learn an amazing tutorial on how to make a website using the Avada WordPress theme. I’ll teach you how to create a WordPress website step-by-step. Look at how awesome everything looks and how nicely it functions. Seriously, you’d pay about $5.000 for this-kind of thing with the web developer, but I’ll show you how you can do it for next to nothing here in about 90 minutes. I’ll show you how to add all these cool panels, and elements, and widgets to your website as well. Come and check out the emcthemedemo1.com on your mobile phone as well. So here’s the mobile demo. Check it out for yourself on your mobile phone. You’ll see here that it responds perfectly to the size of your mobile device, and this is absolutely automatic.
Seriously, it’s just going to take you 90minutes, so follow along with what I do here, and you’ll have this awesome-looking WordPress website using the Avada WordPress theme. Here is a brief overview of what we’ll goober in this tutorial. Now, the first thing I’m going to take you through is getting online. Now, for some of you, you may already be online and you only want to know how to set up the Avada theme. So if that’s you, please do look in the description below, and you’ll be able to skip the whole Getting Online sections, which goes for about 10-15 minutes. So if you need to do that, just look in the description below, and you’ll be directed to the area for setting up your website. However, for the rest of you, getting online is extremely important because, of course, without getting online, you cannot set upa website. So we’re going to spend the next 10 minutes doing that.
You’ll need two things. A domain name– about $12 a year or so, andit’s just your .com domain name. Whatever your business name is, it’s your choice. You will own that domain. It’s only $12 per year. That’s literally $1 a month. Web Hosting, approximately $7 per month. And hosting is just another way of saying–a computer where all of your files are stored, that are necessary to run your website, and that includes all of your content, your pages, and everything that loads up when a website loads, that’s all stored on something called a Web Hosting Server, and it’s as cheap as $7 a month for good hosting, and I’ll show you where you can get that in a bit. Then setting up the website, the Avada themedesign costs $59 from Theme Forest, and the advantage of that is you don’t have to pay$5.000 to a web developer to get some design done. It’s all there and all ready to use. And then last but not least, setting up and configuring everything costs you nothing because this tutorial shows you exactly what to do,step by step. Therefore, what’s the total website cost? About $10 a month, so you really can’t gowrong here. So now, the first thing we need to do is getyou online. So if you look in the description below this video, you’ll see a link for hosting.
Just click on that link, and it’ll take you to this site here for HostGator. Now, this is the company that I use, personally,and I’ve been using them for nearly 10 years for all of my websites, my business websites,my e-commerce sites, everything. So look, if you want to choose another webhost, that’s absolutely fine, but just keep in mind the rest of this tutorial will bedone using my HostGator account. So if you really want to follow me step bystep and get everything set up exactly the way I do, then I recommend sticking to what I’m using, but it’s completely your choice. So you’ll see a couple of different options. You’ll see Web Hosting and WordPress Hosting. Yes, we’re building a WordPress site, butthere’s no reason we need WordPress Hosting, specifically. Now, it costs more, and you can read aboutthat a bit later. What I use is basic Web Hosting, and basic Web Hosting is super fast, and it is absolutely more than enough for most or 99% of websites out there.
So it’s cheaper than the WordPress Hostingas well. So you can read about that in your own time,but I’m going to stick to Web Hosting. That’s what I use. So it’s really your choice. Choosing a plan, there are three on offer. Ignore Business. There’s stuff you don’t need there. Baby and Hatchling, pretty much identical,except Hatching allows you to host one website, and Baby allows you to host a number of websites. Now, you can always upgrade from this to this. So if you’re in doubt, go with the cheapestoption, the single website, the Hatching Plan, and click on Sign Up Now.
Here, you can register a new domain. If you’ve already owned a domain from somewhereelse – maybe you’ve registered elsewhere – just click this tab and enter your domainthat you own. Otherwise, in this field, just enter the domainthat you want to own. So it might just be your business name. What the service will do is just check tosee if that name is available, and if it’s not, it will just come up with an indicatorlike you see here. Now, I’ll just pick something else. Cool. It’s a personal preference of mine to choose. .com. Now, when it comes to setting up your website,it does not make any difference whatsoever if you choose a .com, a .net, a .org, .biz,.info. It really does not matter. Everything in this tutorial will stay exactlythe same. It’s just my personal preference becausecustomers always naturally assume that your website ends in a .com, so I like to choosea .com, but here, I’ve seen businesses choose .net as frequently as I see .com, so it’sreally up to you. Scroll down. You’ve got a couple of different billingcycle terms you can choose from, and you can see here there’s some discount, but I’llshow you how to get a better discount than the one that you get by default, so bear withme. I tent to choose either of 12 months or of24 month billing cycle, and the longer you sign up for upfront, the cheaper it becomesper month, which is the case with most things, buying in bulk. So it’s completely up to you how you wantto pay. Now, let’s go with the 12 month.
I will actually sign up for a 12 month hostingaccount for this particular website demo that I’m setting up for you. Choose an account username. And choose a security pin. Okay. We’ll come back to the billing info details. Just skip that for a second. In Additional Services, I tend to remove anyoptional additional services. Now, these are not absolutely essential. To be honest, they’re not things that Iuse myself. They are not things that you necessarily needto set up your website. So it’s completely up to you. It’s your choice. Now, in the Coupon Code section, I did tellyou that I’ll give you a coupon code which gets you a bigger discount. So instead of the default coupon code thatit shows you, use this one instead: EMEDIACOACH. Then click on the Validate button. Before you do that, just look at your AmountDue. You’ll notice that after using this coupon,it’ll give you a bigger discount, and the amount due is less, and this will always bethe case, so make sure you take advantage of this coupon code. Then go back up and complete your billingdetails.
Now, of course, I’m going to blur my screenwhile I do it because I’ve got some confidential billing details. Make sure the email address you enter hereis correct, reason being you’ll receive a confirmation email after you complete yourorder. You’ve got a couple of different optionsfor payment: credit card and PayPal. Okay. Once all of that is entered, scroll back downthe page. Just confirm the details of your order. Click on this check box here which just statesthat you’ve read the terms and conditions. After you check out, you will be the soleowner of your new domain, and you’ll have hosting for 12 months, and this is all you’llbe paying for hosting a domain for the next year or however long you subscribed for. So it’s really cheap, as you can see, whenyou put it in comparison to when you’re paying web developers to build things foryou. So when you’re ready, just click the CheckOut button, and I’ll show you the next step, which involves installing WordPress on yourwebsite.
From time to time, I may receive referralcredits from HostGator, and to be honest, this just helps me pay the bills and bringthese tutorials to you free of charge. So I really thank you for your support inadvance. Okay. So click Check Out, and I’ll show you whatyou need to do next. So this is the email that you’ll receivefrom HostGator when you complete your order, and you’ll see it has details, such as yourControl Panel link, which is very important. I’ll show you what to do with that in aminute. It’s got your username, password, and thedomain that you’ve just purchased or used to open the accound. It’s got two more pieces of information,and that is these name servers. Now, if you purchased your domain elsewhereand not from HostGator, you will need to go to your domain accont and add these two nameservers, so that your domain points to your hosting.
And if your having any troubles with that,or if you need help, just go to emediacoach.com/help, and you’ll be able to get some assistancethere. You’ll see a link called TroubleshootingFAQs. And if you need to connect your domain toyour hosting, just read that, and you should be able to do that yourself. Otherwise, get in touch with your domain company. Okay. So now that you’ve got that, the next thingyou need to do is access your Control Panel and log in on the next screen using your usernameand password that’s given to you in this email. So I’m going to do that now. Okay. I’ll just copy and paste the username andpassword from the confirmation email, and then log in. And this is known as your Hosting C PanelAccount. And all this suff here– you won’t reallyneed to access this page too often. The thing we’ll need to do now is installWordPress. So if you go down and search for a link calledQuick Install, click on that. And then if you go down, you’ll be ableto see a link called Install WordPress or you can click on the WordPress in the sidebar. So I want you to go ahead and do that becausewe’re going to be installing the WordPress platform onto your website. There are a few different options. What you’ll need to do is use this freeinstalation. Install WordPress for free.
Now, in this field here, your domain shouldautomatically populate. If it doesn’t, just go to the drop-downhere, and select the domain. Leave this field here blank. We don’t want to install it on a path. We want to install WordPress on the domainitself. Enter an admin emain, and this should be anemail that you can easily access. Give your website a title. Enter an admin user and a first name and lastname, if you like. And go down and install WordPress, and WordPresswill be installed onto your domain. You can close this pop-up or any other pop-upsthat come up. This is the area that you want to pay attentionto. So if you view details, you’ll be able tosee when your instalation is complete. There you go. So the next thing you neec to do is accessyour WordPress Dashboard. And now, if you just open this link in a newpage or a new tab– so what I’m doing. Just right clicking and opening in a new tab. You need to use this username and this passwordgiven to you to log into WordPress. Okay. So this is the screen you should see. Now, just note that sometimes it can takeup to about 20 minutes for this page to load, so if it doesn’t work for you, come backin 20 minutes or half an hour, reload this URL over here, yourwebsite.com/wp-admin. So just come back, and eventually, this pagewill load.
Once again, if it doesn’t load, just contactme on emediacoach.com/help. Check out this page or enter your detailsin this form, and I’ll definitely help you out to the best I can, and most people geta resolution within a couple of days. So feel free to contact me if you have anyproblems. Okay. So welcome to your WordPress Dashboard. This is the admin control panel to everythingor to manage everything on your WordPress website. Now, the first thing that I recommend youto do is to change the password for your login. Just keep note of the URL, yourwebsite/wp-admin. Now, every time you get to that login page,you’ll be prompted with that admin username and password, so to change that password,go to Users and All Users because, to be honest, you’re never going to remember this. Click on your username. Now, scroll down, and we’ll generate a newpassword. You can choose a strong password that theychoose, or you can enter any password that you want to use to log in.
Just confirm the use of your password andupdate your profile. Let me just log out and just make sure that’sworking. There you go. Most of this tutorial will be conducted fromwithin this Administration Dashboard. This is basically the engine begind your entireWordPress website, and this is what enables you to make a website with WordPress so easy. And you’ll see that in the next few sectionsof this tutorial. The next thing you need to do is just deleteany default plugins. So if you just go to the Plugins area on yoursidebar and click on Install Plugin. What a plugin is, it’s basically additionsor additional functionality to a WordPress site, and to give you an example of the differentkind of plugins there are— you can have a plugin for a contact form, you can havea plugin for an image gallery. You can have a plugin for almost anything. Just be default, there are a bunch of pluginsthat are installed when you install WordPress, and to be honest, you don’t really needthem, and it creates more mess than good. So I’d like you to deactivate them. So if any of these are active or installed,just click on them, and then go to the drop-down and Deactivate, and then click Apply. That all will be deactivated. And then, you can even go in and delete allof them because to be honest, you don’t need them at all. We will be installing plugins later on, andI’ll show you exactly which plugins you need to install. So yep, we want to delete all of these filesand data. Cool. Okay.
Now, it’s time for the fun part, and thatis to install the website theme, otherwise known as the design that your website is goingto use, and of course, that is the Avada WordPress Theme. So go down to the description of the video,and you’ll seee a link to themeforest.net. Click on that link, and that will take youdirect to the Avada theme on the Theme Forst website, and this is the page you’ll see. You can read all about Avada. You can check out all its features. You can actually even view one of its demos. Now, everything you see in its demos are thingsthat you are going to be able to do using the Avada theme. So really, it is a limitless theme. It’s all about how you design and configure,and it’s all up to you. So you can really make your website look anyway you want. Okay. So when you get to this page, click on Addto Cart. And you want to be able to add this productto your shopping cart. You’ll have to sign up for an account withEnvato or Theme Forest. Of course, you will create an account overhere. So I’ll just sign in using my account. And then you would check out. Now, I’ve already purchased the Avada theme. And how do I know that? Because when I go to My Account here and goto Downloads, I can see that in my Download list. So now, I can download the theme. So I want you to go and purchase the Avadatheme. I’m sure you can do that on your own. Just purchase that, then after you do, you’llbe able to see this theme in the Downloads area. Now, if you click on Dowloads, you can eitherdownload all files and documentation, which I do recommend because there’s a lot ofinteresting documentation there that will help you set up your website. Of course, I’m going to be covering a lotof it, but there are other things there that will help you on how to make your websitelook the way you want it to look. For now, I am going to download the installabeWordPress file only.
Now, this is only the Design file, withoutthe other documentation. And then save that onto your computer, whereveryou can access. I’ll just save to my desktop. Okay. After it’s finished downloading – here itis – all you need to do is upload that file into WordPress as a theme. Before I do that, I’ll quickly just showyou what the full documentation looks like. Here we go. Here’s the full package. There’ll be a file for Mac OS, Extras, theAvada Theme, and then there’ll be a package for Windows. You’ll see all the extra stuff in therethat you may need, and you can have a look at that in your own time. So that’s the file that we want to install,and I’ll show you how to do that now. So going back into my WordPress Dashboard,once I’ve downloaded this installable WordPress file, all you need to do is go to Appearance,and then click on Themes. Okay. Now, we want to add a new theme.
so click on that, and then Upload a Theme. Now, browse and go to wherever it is on yourcomputer that you stored that file, and here it is for me. And thing click on Install Now, and it willinstall the Avada theme onto your new website. Now, this can take a few minutes. It’s quite a big file, so be patient. I’m not going to cut out this upload processbecause I want you to see exactly how long it’s taking for me as well. So wait a few minutes and come back, and thenyou’ll see what to do next. So there it is. You should see this page over here: ThemeInstalled Successfully. If it doesn’t, give that another shot, andit should work. But when it’s installed successfully, allyou need to do is click on Activate, and that will activate this theme for your site. Cool.
So that’s all done, and to show you whatyour website looks like right now, you can actually go and visit your website. And there it is right there.
We’ve installed the Avada theme onto yourbrand-new domain, and your on the way to creating a new website. Now, the fun part begins. I’ll show you how to set up everything onyour website, including the home page, the Contact page, adding a logo, and everythingelse you need to know. Next, we’re going to import the demo contentfor this theme, and that’s going to make it very easy for us to set up our website. So I’ve left a link in the description belowthat says “Import Demo Content.” So just click on that, and you’ll get tothis page over here. What we’re going to be doing is importinga demo. So let’s follow this through. Step 1- Install the required and recommendedplugins for the demo. The one we’re going to install is calledthe Avada Classic Demo. We need to install all of the plugins forthe Classic Demo to import. So it’s not too complicated. Just follow along with what I show you. So the first thing you need to do is installand activate the all-in-One WP plugin. Now, if you go back to your Dashboard, goto plugins, click on Add New. Okay. Now, go to Upload Plugin, and – sorry.
Go back to Search Plugin. Search for “all in one wp migration,”and it’s this one here. When you see this, install now, and then activatethe plugin. Okay. We need to make sure that all these pluginsare also activate to be able to import the demo content. Now, all you need to do is go into Avada andPlugins. So this Plugins tab here, you’ll see a numberof plugins here, and you basically need to install and activate each one of those firstbefore we can move any further. So let’s go through and do that one by one. Some of them are really quick to install,whereas others may take a couple of minutes.
So as you can see, this one here is takinga while to load. Yep. All done. Let’s return to the Plugin Installer. Now, you may net need all these plugins, butwe just need to install them to be able to import the demo content, which is going tomake it very easy for us to set up our WordPress website. Okay. So all of our plugins are installed, all theAvada plugins. Next, Step 3 – Bellow is a list of the demobackup files. All you need to do is download the releventfile to your computer. So if you scroll down on this page, you’llsee a number of downloads. The one we’re interested in is the DemoClassic, and so let’s click on that and download that and save it somewhere on yourcomputer where you can easily access. Okay. Once it’s done downloading, next step: Navigateto WP Admin All-in-One WP Migration Import. So the plugin we just installed a couple ofminutes ago, the All-in-One WP Migration. We want to import a theme, a demo, so let’sdo that. Let’s import from File. It’s the one we just saved to our computer. the Classic. So double click that, and it will begin importingthat into your site. This can take a couple of minutes, so justbe patient. It will prompt you with this message, “Theimport process will overwrite all your database, media and plugins and themes.” And, yes, we do want to continue to the nextstep, so let’s do that. Okay. Now, let’s see the next step.
Once your import is finished, you’ll receivea message that will overwrite your entire site database. We already did that. Step 7 – You’ll receive a Success message. You’ll be logged out and asked to updatethe WordPress Database. Click on Update WordPress Database. So let’s just close this for now. If you go anywhere on your site, you’llnotice that it will say that you need to upgrade your WordPress Database. So let’s click on that. That should be very quick, and Continue. It’ll ask you to log in again. The reason is, that big Demo import actuallyreset your username and password, so now, log in using these details here. So just admin and admin, in this case. Cool. Now, of course, it’s probably best thatyou go back into Users and update your password from here on in. Also, update your email address because thatwould have overwritten your email address as well. Let’s generate a new password. Cool. That’s all. That’s all we need to do to update or importthe Classic demo of Avada.
Now, this is what your website looks like. You’ll see it has a bunch of new pages,a bunch of new content that’s automatically imported into your website. Now, we’re going to be actually deletingmost of this stuff and setting up your website, creating your website exactly the way youwant it to look. Okay. Now, back into your Dashboard area, thereare just a couple of initial configurations that we need to do to set up the frameworkbefore we dive right into setting up the home page, slider, and all the other elements thatgo on the home page. You can dismiss any notices that come up. Okay. Now, just follow along with what I do here. In the left-hand side column, if you scrolldown and go to General Settings, you should be able to upgrade or update the site titleto whatever you want it to be. So that would probably be your business namein here. I’d recommend you taking out the tagline. Now in here, you’ll see there’s no wwwbefore the domain name. Now, I’ll show you what that does when youload your website. As you’ll see, the www doesn’t load. Now, this is not a requirement. It’s just a personal preference. I like to add www right in there, and thesame thing for the next field as well.
This is completely up to you. Update the email address to your own personalemail address, once that you have access to because if you forget your password, you willneed to get that reset, and it will be sent to this email address, and any other notificationsthat come from WordPress, which are very rare, but it’s good to do. Save your changes when you’re ready. Because you just changed the www, it willask you to log in again, so do that. Okay. Cool. Next, what do we need to do?
We need to update the permalink structure,and I’ll show you what that is. If you go down to Settings and Permalinks. Any page that you create on your site rightnow, even if you name the page, for example, My Portfolio, it will be named with a pagenumber, and obviously, that’s not ideal. If you name a page My Portfolio, you wantit to be /myportfolio, and that’s proper naming convention. So select this here, Post Name, and then godown and Save Changes. Cool. Next, if you go up to Pages and click on AllPages, as a result of the import, you’ll notice there’re a bunch of new pages – 141,in fact – that have been created automatically. They are all of these pages that currentlyexist on your site as a result of the bulk upload. Now, the thing we can do is we can deleteall of them because we don’t need them, but if you want to leave some and just seehow they’re structured, you can do that as well. So let’s go ahead and delete by moving toTrash. So what I did was just click on the checkbox at the top, which selects everything, and Move to Trash, Apply. There are heaps of these, so you’ll haveto do this a few times.
Once you’ve done that, I recommend you gointo the Trash area and do the same thing and delete all of them permanently. The reason is if you don’t delete them permanently,you won’t be able to use any URLs that are already taken. For example, a page called Blog. It would be yourwebsite.com/blog. Now, if you wanted to make a blog in the future,you wouldn’t be able to use that URL because it’s already taken, so I recommend you deleteall these pages permanently. Actually, you can just empty Trash right hereby clicking this button, and it’ll delete everything. There we go. I recommend you go to Posts as well, and doexactly the same thing. There’ll be a bunch of dummy posts, basicallyjust default posts, so I recommend you just check all of them off and move them to theTrash bin. And don’t forget to empty the Trash as well. Okay. We are getting to the cool stuff now. What we need to do is add our home page content,including a home page slider and home page setup and customization. So here’s what our site look like at themoment, and yours, it’ll probably look the same if you followed everything that I did. You’ll see that it’s empty.
It’s got some random stuff in the sidebar,but not to worry because now, we’re going to be creating a brand-new home page. So first, go into your Dashboard, and thengo to Pages, and we want to add a new page. Name your page “Home,” and then go tothe Template drop-down. Choose 100% width. We want our home page to be full width. And then click Publish. Okay. Now, go under Settings, and go to Reading. In Front Page Displays, we want to choosea static page. We want to display a static page as a frontpage, and we want that to be the home page that we just created. So go and select that from the drop-down,then save all of your changes. Okay. So now, your site will look like this. You’ll have a home page, and it’ll becompletely blank, and that’s our blank slate to begin setting up your home page. The first thing we’ll set up is a nice,big image slider, which will make the website look dynamic, professional, and really modern.
So go down and go to Fusion Slider. When you hover over that, you will see twooptions. Either to Edit Slides or Add a Slider. First, we want to add a new slider, so clickon that. Let’s name this one “Home Page Slider.” Now, you’ve got a few options you can choosefrom. Slider Width, 100%. I want to keep it a full-width slider. The hight of the images in the slider, nowI recommend something between 400 and 500 pixels. So let’s keep it at 450. Okay. Full-screen slider, no, I don’t want itto be a full-screen slider. I do want a full-width, though. You can have a look at that in your own time. It’s actually pretty cool if you are afterthat kind of a look. Parallax Scrolling. I’ll actually enable that a little bit laterand show you what that does. That’s another cool effect. Display Navigation Arrows. Yes, I want to display the left and rightnavigation errors on the image slider. The Pagination Circle. Yes, I like those circles. I’ll leave that displayed. Yep, I want to autoplay the slides.
I do want to slides to loop. The animation, you can either have it as Fadeor a Slide. It’s completely up to you. The speed of the slideshow. Now, the speed is in milliseconds, so 7.000is actually 7 seconds. So you can change that, depending on how manyseconds you want each slide to appear before the next transition. So let’s say 8 seconds. The speed of the animation is just a speedin milliseconds between each slide, and the rest you can leave as Default, and click onAdd Slider. Now, it might look like nothing’s happened,but what’s happened is this home page slider has now been saved over here. So you can click on that and edit the settingsat any time you wish. So now, we’ve set up a slider. What we need to do now is add some slides. So back down to Fusion Slider. We want to add some slides, so let’s clickon that here. Okay.
So when you’re adding a new slide, justgo up and click on the Add New Slide button. Give your slide a name. It can be as simple as Slide 1. Background Type– ours is going to be an image,so let’s leave that checked. Content Alignment– if you’re going to beputting any text overlayed onto your slide, you can choose the alignment of that, andyou’ll see what that does in a second. Scroll down. And to be honest, I don’t want to add toomuch on my slide. There is also the opportunity to add a buttonwith a link, so you can do that. You can add either one button or two buttons. These are the default settings. If you want to, you can actually choose acolour here, and you can edit the text over here. So perhaps I’ll say “Click Here.” And say I want it to link to a URL I can linkto any URL.
Actually, let’s say google.com just as anexample. So make sure button link equals, and you’vegot the two speech marks outside your URL. So you can do the same and edit this buttonover here. What you need to do to add an image to thisslide is click on Featured Image, Select Files, and from your computer, just select filesthat you want to add to the slider. Now, you can add one by one, or you can actuallydrag all your files into what’s known as the Media Library, and select which one toapply to this particular slider. So you’ll see all of your images upload. And this is known as your Media Library, andyou can access this any time you want. So any time you upload an image, it remainsthere, and you can access that image any time you wish. So I’ll remove that. I can choose, say, this one as my first slider,and set Featured Image. And you want to make sure to assign this tothe relevant slider, so I would assign this slide to my home page slider. Then click Publish. Okay. Similarly, let’s add two more slides. So back to Add New Slide. Let’s say Slide 2. And similarly, it’ll align any content tothe centre if I put any up there. I can edit the buttons if I want to. Make sure you assign it to the home page slider,and set your Featured Image.
And because I’ve already uploaded the images,I don’t need to upload them again. They’re in my Media Library. So let’s select this one as my second slider,set Featured Image, and then Publish. And what I’ll do is also create a thirdslider. Okay. So Slide 3, and I centre that one. And Publish. Okay. Cool. So all of our slides have been added. Now, you can come in at any time and editany one of these slides. If you want to see what slides have been addedto a particular slider, go to that slider, and click on the number beside it. So if I click on that 3, I’ll actually beable to see which slides are assigned to this home page slider, and of course, I can goin and edit them at any time I like. Okay. So now, we’ve added our slider, and we’veadded slides. So what we need to do now is actually addit to our home page. How do we do that? Okay. So go into Appearance and Theme Options.
Actually, that’s wrong. Go into Pages and All Pages. Go to the home page, which is now our frontpage, which we did a couple of minutes ago. Then scroll down. You’ll see a tab for sliders. So make sure that you’ve selected the correctslider in this area here. So Slider Position. I want the slider to appear below the header. You can choose to make it appear below orabove. Up to you. I want the type of slider to be a Fusion Slider,that’s the one we’ve set up. You can skip all the rest. Select Layout Slider, Resolution– all thatstuff you don’t need. You just need to make sure your select thecorrect fusion slider, which is the home page slider we created.
You can assign a fall-back image. What that is, it actually overrides the slideron a mobile phone, so if somebody loads your website on a mobile phone, the slider won’tapprear. It will just be an image in its place. If you don’t have a fall-back image, a sliderwill appear on a mobile phone. So it’s absolutely your choice how you wantto do that. I’ll upload a fall-back image just by wayof a demonstration. And let’s say I want that image there. So click Show. If I click the Insert into Post buttone, thisURL pops into this area here, and this will become the image that becomes our fall-backimage for mobile phones. So okay. So that’s done.
I’ve enabled the correct slider settingsfor this to appear on our home page. So when you’ve done that, click Update. Now, let’s refresh our site to see whatthat looks like. There we go. We’ve got our beautiful home page slider. And you’ll see that after eight seconds,it will transition onto the next slide. Now, you may choose to make slides taller,shorter. It’s completely up to you. This button– remember how I added some textand a link? So if I click here, it’ll actually go togoogle.com. What I can also add is some text above thisarea here. So what I need to do is go to this particularslide. So if I go to Fusion Sliders, Add or EditSlides. I believe that was the first slide. Okay. So here we are. The Heading area. Into the heading for your slide. So then I can update. Say I wanted to make the slider a little bittaller than 450 pixels. I can come back in here any time, go to thehome page slider, and then change the height as I wish. And then make sure you hit Save or Updateanytime you make any changes.
Cool. Now, let’s refresh and see what that lookslike. And there’s the text. So there you go. If you have any questions about setting upyour slider on your home page, please do ask me in the comments below because I’m alwayshappy to help. And I know how important it is to get yourhome page looking absolutely right. Okay. So so far, this is what our website lookslike. As you can see, we’ve added our slider. And there’s some space here. Now, we need to basically add all the elementsand panels that we want to display on our home page, and you can configure this anyway you want, but I’m going to give you a really cool way, a really simple, but effective,way to begin setting up your home page as easy as possible. And you don’t have to know anythings becausewe’re going to be using stuff that’s already been set up and copy things across.
And I’ll show you what I mean. First, we need to get rid of this Home barover here. We don’t need it and it doesn’t need tobe there, so the way to do that is just go back into All Pages, and go into whateveryou’ve called your home page, so Home. Then scroll down, and all of these FusionPage options are all page-specific, so if you make any changes here, they will all reflecton that particular page, not the whole website. The thing we need to change is this Page Titlebar. At the moment, it’s default. We want to hid that Page Title bar. So if I just go and update that, and you shouldsee that dissapear now. There we go. Now, we’ve got a good blank slate for addingall of our home page components.
So like I said, I’m going to be showingyou a slightly different approach to setting up your home page, and it’s one that I’venoticed that beginners adapt to very easily, and to be honest, I think I’m the firstto demonstrate this approach. So here we go. For the purposes of clarity, this is the homepage I’m going to show you how to set up. So all of these different elements you seehere will call to action a few revolving panels, a nice-looking feature there, some check boxes,some services that link off, this nice counter over here, a nice map, some accordions, andsome testemonials. Now, I will show you how to add each one ofthese elements in the next five to ten minutes. So first things first, make sure that youare on the page that is your front page or your home page, and if you followed me, itshould be the page called Home. You’ll see something here called the FusionPage Builder. If you click on that, you will see a rangeof options or containers that you can add that are varying widths, and you can basicallydrag and drop a couple of containers, then go to Builder Elements.
Then drag and drop, say, a Google map, andthen you can click on this icon here to edit the element, and then you can configure allof this stuff. Then you can add more elements, etc., ect. Ths is the way you can do it, but I’m goingto show you a slightly different way to make it a little bit easier for you. So let me just delete what I’ve added here. But anyway, that’s basically what the FusionBuilder is. It allows you to add any one of this elementson the page at any time.
It’s like a nice drag and drop functionality. So you’ve got, obviously, Column Options,which allow you to select which column widths you want to enter or add. You’ve got the elements to add. You can create your own custom templates. And what I’m going to be using are somepre-built templates. Okay. So now, here’s the cool part. So I just want you to right click on Add Newin Pages, and open it in a new tab or window. This will open us a new page, and just nameit something random like “Temporary Page.” And you can publish it if you want. Actually, you don’t even need to publishit. Just have it sitting there. Go to Fusion Page Builder. Now, the first thing I want to add is a Callto Action, along with the link. Okay.
So if you click on the link below, the onethat takes you to the Avada theme details. It’ll take you to this page here, so whatI want you to do is go down and find the Classic Demo, this one here. Now, let’s have a look at a couple of differenthome pages. There are a few different versions that youcan look up in your own time. So let’s say Version 14. Okay. I don’t want to add anything from this versioninto my site yet. I’ll just close that. Let’s try Version 4. Okay. Cool. What I want to add is this element here. Text and a Call to Action link button. Okay. So what I’m going to do now– so I knowthis is Home Page Version 4. It’s one of their pre-built templates, oneof Avada’s pre-built templates, Home Page Version 4. And now what I can do is now I can go to thisTemporary Page, go to Pre-built Templates, click on Home 4, and it will add everythingthat belongs into that particular templete. So now, if you save that page and look atyour site, it will be pre-built with all of this information. Okay. I don’t want that. I just want this part over here. So what I’m going to do is now go here,have a look at what they’ve done. So this is the tagline box. Okay. So I need to go in and add a tagline box intomy actual home page here. So if I go to Column Options, first thingto do, add a full-width containter. Now, I recommend you do this, regardless ofwhat the other demo pages do. Add a full-width containet. Now, let’s see what they’ve done. I just need to add a full-width tagline box,so I need to add this full-width column. Go to Builder Elements, and add this taglinebox. So drag and drop that. So now, I can edit this tagline box, and whatI can do to compare is go to this one here, and click the Edit button here. So now, I know what details I need to fillin to make it look like the demo. So if I just compare the two pages.
Okay. That’s all fine. Left– you can change the button text. So say “Learn More.” You can change the URL the link will pointto. Let’s just take an example. We haven’t set this up, but let’s say“Contact.” Okay. I want to open this in a new page, so that’sblank. If you want it to open in the same page orsame browser window, use this Self Atributer over here. Button Size, the demo one has it as Large,so I’ll use the same. I’ll use Large. The demo has button shape Square, and a buttontype Flat. Of course, you can experiment with this inany way you want, but I’m just doing things so that it matches the demo. The button color, Default, so that’s fine. Tagline Title, you can insert your own titlein here and your own description over here. So for the purposes of this demo, I’m justgoing to take what’s already there and copy and paste. Okay. Now, Additional Content. You can add some if you want. Okay. What else do we need to change? Animation Type, Direction of Animation, Speed–None, Down, 0.1. So that’s all the same. And so that’s fine. So this is the demo. I don’t need to do anything with that. This is the real site. I’m going to save my changes. And now, with everything I add, I will updateand show you the update on the front end itself, so you know what it’s done, and you knowhow it looks every step of the way. Okay. So now, I can view that page. Beautiful. There we go. We’ve added a nice call-to-action with sometext that you can easily edit, and you know exactly what options you need to change toedit that. Okay. Now, I’ve added that element. Now, I need to continue to add more elementsonto the home page. So if I go back into the Demos, let’s tryHome Page Version 1. Okay. Perhaps I’ll add these three spinning boxes. They look pretty good. So what I need to do now – Home Page Version1 – go to my Temporary Page as I did before. Click on the relevant page or click on therelevant pre-built template. In this case, Home 1. And yes, I want to replace with the pre-builttemplate. And all of that stuff will come down here. Now, these items are the flip boxes. So what I need to do now, go back to my realhome page, scroll down, add another full-width container. I recommend you do this by default. This takes up the whole width, so I’ll adda full-width column and flip boxes from the Builder Elements. Okay. So that’s over there. Drag and drop that. I can edit that. I’ll click on the Edit button in the temporarypage as well, so I’ll know what all the settings are as default. Okay. Number of Columns, three. Yep. All of this stuff I can leave blank becauseit’s like that in the default. Okay. Flip Boxes Item 1, I’ll open that up. You’ve got a heading. We’ve got the backside heading, the frontsidecontent, and the backside content. Okay. Interesting. So you can fill all of that stuff in. And I’ll just copy and paste from the demofor demonstration purposes. You can experiment with all the other settingsif you want. And you can choose an icon. Spinning Icon, no. Icon Width Height, yep. Direction of Animation, Down, 0.1. Let’s try 0.2. And so that’s one flip box set up. Now, I can add a new flip box and repeat [silence]. Cool. And then I’ll add the third [silence]. Okay. So I’ll save my actual home page and updatethe page, save the page itself, and then reload the site now to see what that looks like.
Okay. Good stuff. That’s really, really good. So as you can see, you can use this new technique– if I can call it that – to set up pages and elements on the page so that you don’tactually have to work from scratch. You can see what the demo or default contentis, and then use as much of that as you can as a guide. So next, let’s have a look at a differentpage version. So let’s try– let’s see what else ison this page. Actually, you know what? I might add this. I quite like that. So now let’s find this. This is the Progress bar. Okay. And I will also add that as a half-column,but I’ll add it on the left. So I’ll drag and drop this Full Width Container. I will drag and drop this half-column. Then I will go to– actually, I will dropand drop another half-column to get ready for the next one. And then go to Builder Elements, and thendrag and drop the Progress bar. And as you can see here, they’ve done fourof these particular widgets, or five of them. So I’ll need to drag and drop five of them,but I’ve got a better way, and I’ll show you that. Just drag and drop one because what you cando, you can edit. You can set it all up, and then you can clickthis link over here and Clone Element, and it will clone all of the settings withouthaving you to do it all again.
So what I’ll do, I’ll just edit the firstone. I’ll go to this one here and edit that oneas well. You can pick your percentage. I’ll copy that Unfilled Colour back intohere. Striped Filing, yep. Animated Stripes, yep. I actually quite like that, so I’ll usethat. Progress Bar Text, so let’s enter somethinghere. And that’s all. So now, I’ll save that and update. Okay. Cool. So if you’re happy with the way that looks,what you can actually do is come back in here, click on the Duplicate button. So I’ve clicked five times, so it’s duplicatedthat a number of times. All I need to do now is click on Edit andjust edit the relevant sections. So maybe it’s percentage. And it’s probably only the precentage andthe text, actually, to be honest. And do that for each one. So as you can see, we’re not wasting anytime here [silence]. Okay. Now, I’ll just save that, and there we go. That looks absolutely fantastic.
What I can also do is add a heading over hereor a title. So I think this is a good example of one. Title Size, okay. So what I’ll do, I’ll go in and choosea Builder Element of Title. I’ll drag that in here. I’ll edit. And then save. So let’s see how that looks. There we go. Perfect. Let’s try Home Page Version 3. Perhaps let’s add this here, some chechboxes with some key advantages to choosing our company. So Home Page 3, once again, go to your TemporaryPage, click on Home Page 3. And now, go down and– which section is responsiblefor displaying this area here? Why Choose Us. Okay. This here. So first, this is a title. So to start with, I will go to the BuilderElements, and then drag and drop a title over there. Title Size of 2. And I’ll just enter the title here. Okay. And now, I need to add Checklist. Okay. Let’s find that. Here it is. Drag and drop.
Edit. And now, let’s have a look at what the defaultChecklist look like. Okay, okay. Cool. So it’s got different areas for each Checklistitem. Now, this icon over here you can set as aglobal icon. So it says here, “Global setting for alllist items, this can be overriden individually below.” So if you select it here, you don’t needto select it individually over here. So that’s good. I’ll go into mine and select that. Icon Colour I’ll leave as Default. Actually, I’ll copy and paste this. This translates to White. Icon Circle, yes. Circle Colour, Default, as you can see there. The Item Size, Small. Okay. Cool. So it looks like these are all global settings,so you don’t have to select them in each Checklist item. So now, if I go here, all I should be ableto do is enter a new Checklist, some text over here. “Brilliant step by step video tutorialsto help you make a website with WordPress easily!” Create Your Own, actually I’ll put thatin the next item, so Checklist Item 2.
Okay. Let me just save that for the time being andclick on Update. I just want to make sure it’s appearingas I intend before I go too much further. Yep, that looks fine. Perfect. Okay. So I’ll keep doing that. I’ll add maybe five or six checkmarks [silence]. Perfect. That’s really starting to take shape now. Okay. So what should we do next? Let’s choose another element. So let’s try another Home Page version. I like this. Let’s do that. Some services and links to the Service pages. Okay. So that was Home Page Version 7. And the content boxes. So in my real home page, I’ll go along andadd what I need to, so starting with the full-width container. This element will take a full width. Then I can go into Builder Elements and fildthe content boxes. There we go. And then I can edit. Okay. ‘“Parent Level” settings will controleach box stile individually.’ So you can either choose settings for allthe boxes, or choose to adjust them separately. So I’ll do it in the same way the demo isdoing it.
So Content Box Layout, Classic Icon on Top. Number of Columns, 4. You can obviously change that to how manycolumns you want. Three, four, five. It’s up to you. Content Alignment. I don’t think it works with this particularlayout, but that’s fine. I’ll just leave it. Okay. Icon Background, Default. Yeah. Link Type, Link Area, Link Target. Now, Link Target is interesting. If you want each one of the links to openin a new window, I suggest this. Okay. So these were all the overall settings. Now, what you need to do is actually add thecontent for each box. So let’s have a look at the demo [silence]. And then you’ll have to enter a URL to linkthat to. Obviously, the pages are not set up yet, sofor now, I’ll just enter some dummy URLs. So Link URL. Obvously, once all the pages on your websiteare set up, you would adjust these linked URLs so each one of these go to the relevantpage on your website. And that’s fine. So you need to do the same thing for eachone of those items or each one of those content boxes [silence]. And the fourth one. Okay. So when you’ve done that, you can save andupdate your page to see what that looks like on your website.
That’s awesome. So why am I missing a link here? Let’s just investigate. So that’s interesting. If you’ve got no text, link text, it doesn’tactually show the Learn More or whatever it is. It just links this directly to whichever pageyou send it. And of course, we used. an Underscore Blank setting for new pages. See that there? So all that means is when you click on a link,it opens in a new tab. It doesn’t load in the same screen. Okay. Good stuff. Making good progress here. Of course, if you have any questions whileyou’re watching this, please do ask me in the comments below. Okay. Now, let’s have a look at another home page. Let’s try 14 again. I like these counters, actually. I might use that. So I’ll load up Home Page 14 in my TemporaryPage. And it should be this here, the Counter Box. So our Number of Columns, 4. Yep. Default. And then the Items in the Counter Box. So this one’s pretty straightforward toset up. So let’s just copy the theme. Now, I haven’t selected an icon, so it doesn’tshow one. Counter Direction [silence]. Okay. Let’s check that out. There we go.
I really like that feature, actually. It’a a really nice, dynamic feature to haveon a website. It makes it look really modern, and I cansee, recently, that there are trends towards having the kinds of counters on websites justto add a little bit of depth to the site. Okay. Next, I want to insert a map on our page. Now, I’m pretty sure there is a map in HomePage Version 12. There it is. So I want to do precisely the same thing here,have a map with the business location. So you would have our map with your businesslocation and the address. So I want to do the exact same thing here. Home Page Version 12. So I’ll import that into my Temporay Page. There we are. Okay. So what do I need to do? Full-width container. Now, I don’t want this to be a full-widthmap. I think I’ll just have a half-and-half. And you can also duplicate containers. So if I didn’t have that, I could just clickthis Clone Element here, and it would clone it right over there. Okay. So I need to add Google Map and start configuring that. Okay.
I’ll just make sure the settings are thesame. The hight, it’s slightly different, butyou can set that to whatever you want. Map Overlay Colour. Now, this is an interesting one. Your map’s look and feel will be determinedby this Overlay Colour. So you can choose one, or you can actuallyleave it as blank. So you can clear this, and it’ll just beDefault. So I’ll leave it as Default. And Address. Obviously, you would enter your business address. And that’s it. Let’s check that out. That’s really good. I’m happy with that. So now, if I change that Overlay Colour, you’llsee how the look and feel of the map changes. There you go. Okay. Now, I need to add our address in text. So what they’ve added here, they’ve addeda separator, and then what looks like a text box or a title box. Okay. So I’ll do the same. Builder Elements, I’ll add a separator. Let’s check on our separator, no style. I think that’s fine. And add a text block. Actually, I’ll add a title block. It’s not a text block, it’s a title block. And the size is an H4, which is smaller thanan H1. You can choose the type of separator you want,a solid line or a dashed line.
It’s completely up to you. I will just copy and paste this Default. Actually, I’ll just clear that and leaveit as Default. Top Margin, Bottom Margin. They haven’t located anything. They haven’t imput anything. Located in, okay. You can add some text under the title. And that’s all. They’ve also added another separator andthe actualy address in a block under that. So this is a text block. Okay. So I’ll just copy this text. I’ll duplicate this separator and just dragit down there, and then find a text block. And you’ll notice whenever you’re enteringtext, there are two tabs over here. There’s a Text tab and a Visual tab. The Text tab should always be used when you’reentering any code, any HTML. Otherwise, you should always use the Visualtab. And this is very similar to Microsoft Word,and I’m sure you know what all this stuff is about. So I’ll just copy and paste what was inthe other demo site. And you can actually add a hyperlink by usingthis icon over here. And you can choose to make it open in a newwindow or tab. Or otherwise, it will open in the same window. Okay. Save when you’re ready, and let’s checkout what it looks like now. That’s excellent. Good stuff. I’m really happy with that so far. Okay.
Now, back in Home Page 14, I saw some accordionsthat I wanted to add. They’re a nice little feature when you don’twant to take up too much space on your site, but still want information available to yourusers when they need it. So I’m going to add this accordion block. I’ll probably add it right next to my map,actually. So I’ll close that for now. I’ll open my Temp Page, Home Page 14. Where is it? It’s this one here. The Toggles. And to be honest, this is actually very easyto set up. All you need is a title and some text. There’s not much to these toggle accordions. So I’m just copying and pasting from thedemo as per usual [silence]. So there we go. Pretty straightforward, actually. Perfect.
Perhaps I’ll add some testemonials on apage. So I know there are some on Home Page 16. As you can see, all these home pages lookreally, really cool. So that one there, I’ll add this onto oursite. Okay. So I’ll need thirds and a testemonial blockin each third [silence]. And then you can enter the name, avatar, andthe description of your testemonial. And I’ll just save that. I’m pretty sure I can just duplicate that,and copy things in later on. So I’ll just get rid of these two, and I’llduplicate this one. And then I’ll change the text a bit lateron. There we go. So it doesn’t quite look like the demo. So we’re definitely missing something. So let’s check it out. Here is the one we imported from the pre-builttemplate. So let’s have a look at what we’re missing. Okay. So we’re missing all this stuff above thetestemonial. This is basically a text block with some largetext, which is a Heading 1 text, and some normal paragraph text. So what I’ll do, I’ll add the same thing. If I go to Builder Elements, I’ll find thetext block and drag that in above the testemonials. And I’ll just copy and paste all of thisstuff. Okay. We’re also missing a separator. No style with some margin. Now, if you’ve got a lot of gaps in yourhope page, you can adjust margins wherever you need to. Cool. And that margin, I think, was 20 pixels. So I’ll try that. I’ll update. And I can make any adjustments later on wheneverI need to. So you don’t have to get it right the firsttime. It’s all about trial and error and gettinga look that suits your business website. One other thing that the demo has that I don’tis a nice background image, and I can easily achieve that. All I need to do is go to the box that’saround the testemonials. So this full-width container.
As you can see, there’s a couple differenttabs: Background, Design. And pretty much that’s where the backgroundof this particular area is coming from. And to be honest, you can add a backgroundto any one of the elements that we’ve added throughout this process of builing a homepage. So let me do that now. I’ll go and add a background on this Testemonialpanel. Cool. So that’s all default. Okay. So let’s choose a background image. Obviously, you can upload one from your MediaLibrary or you can use one that’s already been uploaded throught the import. So I might try this one here. Looks interesting. It’s all about trial and error. You can add a parallax or you can remove theparallax, and I’ll show you that a bit later. For now, let’s just save and see what thatlooks like. So as you can see, that image probably isn’tright for this area. So it’s just a matter of going in and editingthat image, adding your own, or choosing a different image. So it’s completely your choice.
Let’s try this. All righty. Next, I’m just going to give you a quickintro on the Content Editor and also show you how you can add multiple pages, as manypages as you want to your website. Now, say you want to add a page for everysection of your site. For example, and About Us page, a Portfoliopage, a Contact page. Say you have a number of services here, andyou want to add a page for each service, so you can detail each service or product. So you can link off from your home page hereand have links going to each individual page. The way to do that is just simply go to pagesand Add New, and you can add an unlimited number of pages. If you want to manage pages, just go to AllPages, then you can either trash or edit from this section here. So if you click Add New, you’ll get to ascreen where you can add your title, your text, and also importantly, choose a template. So a default templete has a side bear, whereasa 100% width page is full width, obviously. So I’ll be showing you how to use this Contactpage in a second, but before I do that, a brief intro on the Visual Editor. You’ll notice here that there are two tabs,Visual and Text. Only use the Text tab when you’re enteringcode. For example, you’re imputing some code fromGoogle Maps or you’re embedding a YouTube video. You would put that in the Text tab becauseit actually collects code and renders that accordingly. However, the Visual tab works very similarto a word processor. You’ve got all your functions. For example, titles, headings. You can bold. You can italic. You can do all of that stuff. You can add a link, so that’s that iconthere. You can add quotes. You can add bullet lists. To be honest, it’s exactly the same as aword editor, so I don’t see you having too many problems with that, but if you have anyquesitons about what you’re seeing here, just let me know, and I will be happy to helpyou. If you’re not seeing everything, just clickon this Toggle tool bar, and you’ll be able to see everything. So hopefully, that okay. But if you have any question, please get intouch via the comments below. Okay. Now, I’ll show you how to set up a contentpage on your website.
And also adjust the sidebar. Now, this is very important because, you know,I’m sure you’ll have many content pages on your site. So to add a new page, go to Pages and AddNew. Now, say that we are organising or preparinga page called Our Services, just as an example. It’s going to be a static content page. I’m just going to use some dummy data thatI’ve got on another screen here for demonstration. Stuff you can do here, maybe you can put somethingin a quote. So if I highlight this and click on this blockquote,it’ll actually put that in a quote format, and you’ll see what that looks like on thefront end in a second. I looks really, really cool. Okay. You can also add images, so if I go to AddMedia, you can select some media from your Media Library or you can upload a new image. So let’s choose one as an example. Link to None. And you can adjust the sizing if need be. Now, for a content page, it’s importantto have a default template. Okay. So I’ll click Publish and show you whatthat looks like. So at the moment, it’s a full-width page,and you can see the nice little blockquote over here. It’s a nice little feature. It makes the page look much better visually.
Okay. So what I want to do is add a sidebar maybeto the left. So what I would do is I’d scroll down, andin these page options, I’d just go to sidebar, select the default sidebar, and then sidebarposition. Left or right, it doesn’t matter. It’s up to you. So there you go. Now, you can see there is a sidebar with abunch of stuff we probably don’t need. So how do we edit the sidebar? That’s the important question. Back into your Dashboard, if you go into Appearanceand Widgets, you’ll see a section for Blog Sidebar. There’re a bunch of things here. If you click the down arrow, you’ll be ableto delete any of these sections that you don’t want. So I don’t want the Search. Recent Comments, Archives, Categories, Meta. I don’t want all of that stuff, so I’llget rid of that. Okay. I’ll just refresh to see what it looks likenow. So I’ve got some tabs here, which I canprobably configure if I wanted to, some accordions if I wanted to configure that, Recent Works,some testemonials. I’ll probably get rid of the tabs. Recent Works I’ll keep in. Obviously, you can adjust that when you want. Recent Posts I’ll get rid of. Contact Info. Maybe you don’t want your contact info inthe sidebar.
You can delete that. So here’s what it looks like now. And if you wanted to add anythings back–say, for example, you wanted to add the contact info on any sidebar or your blog sidebar. All you do is drag and drop this Contact Infointo this area here. Now, if you look around, you will notice thatthere are a lot of different things you can do. You can add some social links, drag and drop,and the order in which they appear I dictated by where they appear in this configuration. So you can drag and drop like I’m doinghere to change the order in which all these things appear in your sidebar. Okay. So you can configure your Social Links ifyou like. I’ll leave that out for now. So I’ll just get rid of that. And like I did before, I added the contactinfo. So you’d just be able to fill out all thefields here, and just like magic, all of that stuff will appear in your sidebar.
If you have any questions about that, pleasedo let me know, and I’ll be happy to answer. Similar to how you can configure your sidebar,you can also configure your footer and all these other sidebars that are available. Or I should call the Widget Areas, but I won’tgo into too much detail right now because it’s probably not something you want tolearn about at this stage. But update your Blog sidebar because that’sthe main default sidebar that we’ll be using for any of your static content pages. Now, I’ll just run you through how to makechanges to the footer area of here down at the bottom of your website. So if you go back into your Dashboard, andin the Appearance tab, you should see Widgets. Just click on that. Now, the one we want to change are these FooterWidgets, 1, 2, 3, and 4. So this is Footer Widget 1, Footer 2 is inthere – there’s nothing in there – 3, and 4. That all corresponds to these four areas overhere.
So now, similar to how the sidebar works wherewe added different elements to the sidebar area, you can add different elements to theFooter Widget area. So if you open this up, you will see thatthere will be a piece of text by default. Now, this correlates to this stuff over here. So all you need to do is edit anything youwant in that box or you can actually drag new stuff over. For example, Contact Info, Social Links, andall this other stuff. Calendars. You can also create a cutom menu. Here it is. So let’s go ahead and make changes to ourFooter Widget. So I’ll leave the first one as is. The second one, Recent Posts. The reason why nothing is showing up is becausethere’s no recent posts at the moment. There are no posts. I’ll just delete that. Now, let’s see. What can I do?
I might add some social links. So I might drag and drop that in. I’ll leave all this other stuff as Default. Now, all you need to do is enter your socialmedia links in the fields you want the icon to appear. For any fields that you don’t enter anyURLs in, it just won’t appear. Now, you can do this in your own time. I’ll just put some dummy data in here, justso you can see how it works. So let’s pretent I had all these socialmedia pages set up. Then click Save. So there you go. That’s added that over there, and they willlink off to the link that you put in this area here. What else can you do here? You can possibly add some contact info. That’s actually a good idea. So maybe I’ll get rid of these categoriesin Footer Widget 3 and add some contact info [silence]. That’s pretty cool. You’ll see that it automatically puts inthe words Phone and Fax, so I don’t need to repeat that.
Okay. I can actually also add a custom menu. So why don’t I move this Contact Us informationunder the Social Links, and you can do that by just dragging and dropping like that. So you can drag and drop anything in thisinterface. It’s really easy to use, and that will updateon the front end like so. So I might add a custom menu here. To add a custom menu, you can actually dragand drop this widget over here. But to actually create a menu, you can goto Menus and Create a New Menu. And perhaps you can link some important linksin your footer. So maybe Our Services, Contact, and any otherimportant pages that you want to add to the menu. Okay. And I’ll just save that menu. And I’ll just refresh this page because ideally, that menu should be selectable. And there it is. And there you go.
That’s how to customise this forte area. Now there’s no doubt you’ll want to knowhow to edit this region over here as well. That’s just as easy as the first. Go to Theme Options this time. Now, within Theme Options, you should findan area called Footer, so I’m just look for that. Here it is. Okay. By the way – just taking a detour here – butif you wanted to change the number of columns in the other footer, that’s this settingover here. But anyway, scroll all the way down. In Copyright Bar, you’ve got the optionto display this Copyright area or hide it completely using this checkbox. So it’s completely up to you what you wantto do. You can chack this box to centre the Copyrightbar. And in this field here, you can actually editwhat’s shown over here. So let’s say “Copyright 2015 eMediacoachHow to make a website,” just as an example. You can change the heading if you want to. Now, see these social icons over here? You can control all of that using the socialicon options. Firstly, you can choose to show or hide anyof the social media icons using that checkbox. You can change the size of those icons usingthis fancy little slider of here, and you can change the colours and all of that stuff. Now, let me just save all that. So there you go.
You can see that’s changed. To control where each of these social linksgo, it’s actually in a slighly different page. So if you scroll back up and then find SocialMedia in this area. There it is, Social Media. And it’s these links here that you needto update. So obviously, you would enter your socialmedia links in these fields. Now obviously, I’m just doing this as anexample, so I’ll just copy and paste that link just as a demo. So say I have all of those social media pagesset up and I want to link to each of those from this area. That’s all I’d need to do. And then go down and save changes, and thatwill all update. It’s as easy as that. It’s really user-friendly, and it looksabsolutely amazing. Okay. I’ll show you how to add a Contact pagenow, and it’s going to look absolutely brilliant. So let’s go to Pages and Add a New Page. Let’s call it Contact.
And now, I want you to go to Template, andselect the Contact template, and just Publish. Now, let’s view that page. You’ll see that, without doing too muchnow, this Contact template that we selected has enabled this nice, big Google map, aswell as this contact form, where your customers or people looking at your site can fill outthis form and get in touch with you via email. So now, let’s start from top to bottom. Let’s edit this map, so we can edit yourlocations. Then I’ll add some text in this area here,and then we’ll configure this form. So as you can see here, there’s a notificationhere that– we need to set an email address for this form to work. So let’s start from the top. Let’s start with the map and the locationson the map. And that’s pretty cool. You can actually show multiple locations ifyou have multiple offices.
So that’s really, really handy. So back into the Avada theme dashboard, you’llneed to go to Appearance and Theme Options. Now, I’ll just open that in a new tab. Okay. Now, I want to look for the Contact area. Here it is. Firstly, go to the Google Map options. If you expand that, you’ll see these areall the settings that configure this particular Google map. So the width, 100%. Yep, it takes up the full width of the screen. The hight, you can change that if you wantto make the hight of the map larger or smaller. This doesn’t matter here if your map is100%, Now, your address. You can see each address is separated by thispipe symbol, and for me, it’s located just under the backpace on my keyboard. So if I press Shift and that key over there,it will result in this pipe symbol. So what you can do is you can edit your addressesor your multiple locations.
If you only have one, obviously, just enterone location in this field here. So obviously, you would enter your exact businessaddress, your precise street location or street address. I’m just going to use it as an example. So let’s say “New York,” “San Francisco,”and “Chicago.” Let’s see what that comes up with. You can set a zoom level. The higher the number, the more zoomed init will be. You can hide the address pins if you like. And you can do a bunch of other things aswell, such as dissable the scroll wheel. When someone hovers over the map and usesthe scroll wheel on the mouse, it will zoom in and out, so you can dissable that if youlike. There’s more stuff in here. As you can see, it’s using the Custom Styling. Or we can use Default Styling or the ThemeStyling. I urge you to experiment with that. See what suits best. See what look you like for your particularwebsite.
Now, Custom Styling, I will just choose adifferent colour as an example. Okay. Now, Info Box Content. See these boxes that are appearing here? These are the Info Boxes. So what I need to do is basically edit eachone of these, and the order in which these appear are very important. So the first one here corresponds with thefirst address you’ve put in over here, and so on and so forth. The second and third correspond with the secondand third info boxes that you enter in here. So let’s change some of that around justto experiment. And then when you’re done with that, youcan go down and save all changes. So let’s just refresh and see how that looksnow. So there you go. As you can see, the colours changed becauseI’ve chosen the Custom Colour. We’ve got our pins here, and we’ve alsogot the little info boxes that we’ve put. Now, if you don’t want the info boxes, youcan actually get rid of that whole box and it will get rid of all of that information.
What you can actually put– a good exampleis– put your address, so that when somebody clicks on the pin, they can easily see youraddress. Now, that’s what I would advise. Obviously, I just doing this as an example,so it’s a bit different. But I would recommend you put your addressover here. We can change the colour. I don’t really like that colour. So maybe I’ll just change it to somethinga bit lighter. Good stuff. Okay. Next, I want to add some text before the form. So now, back to where you added your contactform, if you add text in this area here, this Visual Editor, that text will appear rightin between this contact form and the maps. Smack, bang, right in between. So I’m just going to use some dummy textthat I have here on another screen. So I’ll just copy and paste it across. And maybe I’ll put some [inaudible] in therewith a blockquote. Actually, you know what? I might actually use this Page Builder function,and I’ll make it look a little bit nicer.
So maybe I’ll have it two-third or one-third. I’ll add some text on the left. And I can do all that stuff in here as well. And then, say on the right I’ll add somesocial media links because obviously, this is our Contact Us page, so people might wantto add their social media. You can choose your settings. I’ll just leave everything as Default fornow. Enter all your social media links [silence]. Okay. You can the alignment. Left, right, centre. And let’s click Save and check that out. Perfect. Okay. Under that, maybe I’ll add some accordions. That would be these Toggles over here. Once again, I’ll just get some dummy textto fill this out. You can open one by defautl as well, if youwant. Pretty cool. Now, if you watch the section on the homepage build, you’ll be very familiar with this. There you go. It does look a little bit cramped up, so wecan actually separate or add some spacing in there. So Margin Top and Margin Bottom. When you’re adding spacing, do it in pixels,but don’t enter “px.” So don’t enter that. So let’s try, say, 35 pixels. Okay. Actually, I might add a solid line as well. I’ll actually add 20 above and 20 below. Okay. I’ll also add a title above the social links. Okay.
Let’s give that a shot. Okay. Now, let’s move one to the contact form. As you can see here, there’s a notificationsaying that the email address isn’t set in the Theme Options, so we need to fill thatout. So last but not least, let’s go back intoTheme Options, and back down to the Contact section. And it’s this field here, Email Address. So enter whatever your contact email addressis here. And there you go. We can now fill in anything we want. Your users would be able to send in an inquiryto you, use this email address. And there you go.
There’s the notification for the successfullysent email. Now, if you log into your email address, ifyou’ve put your correct email address in that setting there, you will receive thatin your inbox and be able to reply to your customer instantly. So there you go. That’s an easy way to set up a lovely-lookingContact page on your website. Let me know if you have any questions aboutthat. Whenever you have all of your pages set up,you can easily adjust and customise the menu you’re looking at over here. I’ll quickly show you how to do that. So if you go back into your Dashboard andhover over Appearance and click on Menus. Now, you should see a Main Navigation tabover here. If not, just choose that and press Select. And now, these menu items correspond withwhat we’re looking at over here. So we’ve got Home, we’ve got a few pagesunder Home, sliders, pages.
As you can see, it all corresponds to what’sappearing. Now, the way you customise this is you canactually drag and drop. It’s a really intuitive drag and drop featurewhere you can drag and drop pages or posts or anything else. Any custom links that you want to add to yourmenu. So you can drag and drop submenu items. You can drag and drop Main Menu items. So you can move that block over here. And when you indent something like that, itbecomes a sub-item and becomes a drop-down. And you can actually have two levels. So I’ll show you. Something like this. So as you can see, it’s really easy to useand really intuitive. So now, you want to add the items for yourwebsite. So I would suggest just leave that as is.
There’s any easy way to do things. So if you create a new menu and just giveit a new title. Okay. So we’ve created a brand-new menu. So what we want to do is asign this to themain navigation. Currently, there is a different menu asignedMain Nav, but we want to asign this new custom menu to the Main Navigation. So click that. And there you go. The menu is blank. We can now start from scratch. What we can do, we can actually add all thesepages that we’ve created into our menu structure. So let’s go ahead and do that. I’ve obviously created a few more pagesjust for an example. Okay. So say we want Home at the top because wewant it to appear first. Okay. Our Services. Service 1 under Our Services. Service 2, 3, and 4. Now, what I can do, I can actually rearrangeevertything like you just saw. Another really cool thing I can do, I canadd custom links to the menu. So I can add absolutely anything I want. Add it to the menu. And then when you’re ready to save the menu,and then refresh your site, and you should have a brand-new custom menu in a matter ofa few minutes. There you go. Abolutely perfect. If you have any questions about that, pleasedo give me a yell.
I’ll be happy to help. The reason this shopping cart appears is probablybecause you’ve got the WooCommerce plugin enabled. So if you’re not using any ecommerce functionality,I recommend you go into Plugins, Install Plugins, and then deactivate WooCommerce. Then this shopping cart should dissapear. So there you go. Easy way to customise your Main Navigation. And that’s it. If you have any questions about anything you’veseen in this tutorial, please do ask me in the comments below because I’ll do my bestto help you out. . Subscribe to my channel, and please do clickthe Share button, and share it on social media. I really hope you found this valuable. Thank you for reading this, and I’ll catch younext time.