You’ve come to the right place! You’re about to watch 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 90
minutes, 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 go
over 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 up
a 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, and
it’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 theme
design 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 go
wrong here. So now, the first thing we need to do is get
you 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 web
host, that’s absolutely fine, but just keep in mind the rest of this tutorial will be
done using my HostGator account. So if you really want to follow me step by
step 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, but
there’s no reason we need WordPress Hosting, specifically. Now, it costs more, and you can read about
that 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 Hosting
as 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 cheapest
option, 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 somewhere
else – maybe you’ve registered elsewhere - just click this tab and enter your domain
that you own. Otherwise, in this field, just enter the domain
that you want to own. So it might just be your business name. What the service will do is just check to
see if that name is available, and if it’s not, it will just come up with an indicator
like 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 exactly
the same. It’s just my personal preference because
customers always naturally assume that your website ends in a .com, so I like to choose
a .com, but here, I’ve seen businesses choose .net as frequently as I see .com, so it’s
really up to you. Scroll down. You’ve got a couple of different billing
cycle terms you can choose from, and you can see here there’s some discount, but I’ll
show you how to get a better discount than the one that you get by default, so bear with
me. I tent to choose either of 12 months or of
24 month billing cycle, and the longer you sign up for upfront, the cheaper it becomes
per month, which is the case with most things, buying in bulk. So it’s completely up to you how you want
to pay. Now, let’s go with the 12 month. I will actually sign up for a 12 month hosting
account 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 any
optional additional services. Now, these are not absolutely essential. To be honest, they’re not things that I
use myself. They are not things that you necessarily need
to set up your website. So it’s completely up to you. It’s your choice. Now, in the Coupon Code section, I did tell
you that I’ll give you a coupon code which gets you a bigger discount. So instead of the default coupon code that
it shows you, use this one instead: EMEDIACOACH. Then click on the Validate button. Before you do that, just look at your Amount
Due. 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 be
the case, so make sure you take advantage of this coupon code. Then go back up and complete your billing
details. Now, of course, I’m going to blur my screen
while I do it because I’ve got some confidential billing details. Make sure the email address you enter here
is correct, reason being you’ll receive a confirmation email after you complete your
order. You’ve got a couple of different options
for payment: credit card and PayPal. Okay. Once all of that is entered, scroll back down
the page. Just confirm the details of your order. Click on this check box here which just states
that you’ve read the terms and conditions. After you check out, you will be the sole
owner of your new domain, and you’ll have hosting for 12 months, and this is all you’ll
be paying for hosting a domain for the next year or however long you subscribed for. So it’s really cheap, as you can see, when
you put it in comparison to when you’re paying web developers to build things for
you. So when you’re ready, just click the Check
Out button, and I’ll show you the next step, which involves installing WordPress on your
website. From time to time, I may receive referral
credits from HostGator, and to be honest, this just helps me pay the bills and bring
these tutorials to you free of charge. So I really thank you for your support in
advance. Okay. So click Check Out, and I’ll show you what
you need to do next. So this is the email that you’ll receive
from HostGator when you complete your order, and you’ll see it has details, such as your
Control Panel link, which is very important. I’ll show you what to do with that in a
minute. It’s got your username, password, and the
domain 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 elsewhere
and not from HostGator, you will need to go to your domain accont and add these two name
servers, 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 assistance
there. You’ll see a link called Troubleshooting
FAQs. And if you need to connect your domain to
your 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 thing
you need to do is access your Control Panel and log in on the next screen using your username
and 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 and
password from the confirmation email, and then log in. And this is known as your Hosting C Panel
Account. And all this suff here-- you won’t really
need to access this page too often. The thing we’ll need to do now is install
WordPress. So if you go down and search for a link called
Quick Install, click on that. And then if you go down, you’ll be able
to 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 because
we’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 free
instalation. Install WordPress for free. Now, in this field here, your domain should
automatically populate. If it doesn’t, just go to the drop-down
here, 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 domain
itself. Enter an admin emain, and this should be an
email that you can easily access. Give your website a title. Enter an admin user and a first name and last
name, if you like. And go down and install WordPress, and WordPress
will be installed onto your domain. You can close this pop-up or any other pop-ups
that come up. This is the area that you want to pay attention
to. So if you view details, you’ll be able to
see when your instalation is complete. There you go. So the next thing you neec to do is access
your WordPress Dashboard. And now, if you just open this link in a new
page 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 password
given to you to log into WordPress. Okay. So this is the screen you should see. Now, just note that sometimes it can take
up to about 20 minutes for this page to load, so if it doesn’t work for you, come back
in 20 minutes or half an hour, reload this URL over here, yourwebsite.com/wp-admin. So just come back, and eventually, this page
will load. Once again, if it doesn’t load, just contact
me on emediacoach.com/help. Check out this page or enter your details
in this form, and I’ll definitely help you out to the best I can, and most people get
a resolution within a couple of days. So feel free to contact me if you have any
problems. Okay. So welcome to your WordPress Dashboard. This is the admin control panel to everything
or to manage everything on your WordPress website. Now, the first thing that I recommend you
to 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 new
password. You can choose a strong password that they
choose, or you can enter any password that you want to use to log in. Just confirm the use of your password and
update your profile. Let me just log out and just make sure that’s
working. There you go. Most of this tutorial will be conducted from
within this Administration Dashboard. This is basically the engine begind your entire
WordPress website, and this is what enables you to make a website with WordPress so easy. And you’ll see that in the next few sections
of this tutorial. The next thing you need to do is just delete
any default plugins. So if you just go to the Plugins area on your
sidebar and click on Install Plugin. What a plugin is, it’s basically additions
or additional functionality to a WordPress site, and to give you an example of the different
kind of plugins there are--- you can have a plugin for a contact form, you can have
a plugin for an image gallery. You can have a plugin for almost anything. Just be default, there are a bunch of plugins
that are installed when you install WordPress, and to be honest, you don’t really need
them, 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 all
of them because to be honest, you don’t need them at all. We will be installing plugins later on, and
I’ll show you exactly which plugins you need to install. So yep, we want to delete all of these files
and data. Cool. Okay. Now, it’s time for the fun part, and that
is to install the website theme, otherwise known as the design that your website is going
to 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 you
direct 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 things
that 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 any
way you want. Okay. So when you get to this page, click on Add
to Cart. And you want to be able to add this product
to your shopping cart. You’ll have to sign up for an account with
Envato or Theme Forest. Of course, you will create an account over
here. 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 go
to 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 Avada
theme. I’m sure you can do that on your own. Just purchase that, then after you do, you’ll
be able to see this theme in the Downloads area. Now, if you click on Dowloads, you can either
download all files and documentation, which I do recommend because there’s a lot of
interesting documentation there that will help you set up your website. Of course, I’m going to be covering a lot
of it, but there are other things there that will help you on how to make your website
look the way you want it to look. For now, I am going to download the installabe
WordPress file only. Now, this is only the Design file, without
the other documentation. And then save that onto your computer, wherever
you can access. I’ll just save to my desktop. Okay. After it’s finished downloading - here it
is – all you need to do is upload that file into WordPress as a theme. Before I do that, I’ll quickly just show
you what the full documentation looks like. Here we go. Here’s the full package. There’ll be a file for Mac OS, Extras, the
Avada Theme, and then there’ll be a package for Windows. You’ll see all the extra stuff in there
that 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 your
computer that you stored that file, and here it is for me. And thing click on Install Now, and it will
install 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 process
because I want you to see exactly how long it’s taking for me as well. So wait a few minutes and come back, and then
you’ll see what to do next. So there it is. You should see this page over here: Theme
Installed Successfully. If it doesn’t, give that another shot, and
it should work. But when it’s installed successfully, all
you 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 what
your 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 your
brand-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 on
your website, including the home page, the Contact page, adding a logo, and everything
else you need to know. Next, we’re going to import the demo content
for 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 below
that says “Import Demo Content.” So just click on that, and you’ll get to
this page over here. What we’re going to be doing is importing
a demo. So let’s follow this through. Step 1- Install the required and recommended
plugins for the demo. The one we’re going to install is called
the Avada Classic Demo. We need to install all of the plugins for
the 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 install
and activate the all-in-One WP plugin. Now, if you go back to your Dashboard, go
to 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 activate
the plugin. Okay. We need to make sure that all these plugins
are also activate to be able to import the demo content. Now, all you need to do is go into Avada and
Plugins. So this Plugins tab here, you’ll see a number
of plugins here, and you basically need to install and activate each one of those first
before 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 taking
a while to load. Yep. All done. Let’s return to the Plugin Installer. Now, you may net need all these plugins, but
we just need to install them to be able to import the demo content, which is going to
make it very easy for us to set up our WordPress website. Okay. So all of our plugins are installed, all the
Avada plugins. Next, Step 3 – Bellow is a list of the demo
backup files. All you need to do is download the relevent
file to your computer. So if you scroll down on this page, you’ll
see a number of downloads. The one we’re interested in is the Demo
Classic, and so let’s click on that and download that and save it somewhere on your
computer where you can easily access. Okay. Once it’s done downloading, next step: Navigate
to WP Admin All-in-One WP Migration Import. So the plugin we just installed a couple of
minutes ago, the All-in-One WP Migration. We want to import a theme, a demo, so let’s
do 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 importing
that into your site. This can take a couple of minutes, so just
be patient. It will prompt you with this message, “The
import process will overwrite all your database, media and plugins and themes.” And, yes, we do want to continue to the next
step, so let’s do that. Okay. Now, let’s see the next step. Once your import is finished, you’ll receive
a 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 update
the WordPress Database. Click on Update WordPress Database. So let’s just close this for now. If you go anywhere on your site, you’ll
notice 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 actually
reset 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 that
you go back into Users and update your password from here on in. Also, update your email address because that
would 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 import
the 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 deleting
most of this stuff and setting up your website, creating your website exactly the way you
want it to look. Okay. Now, back into your Dashboard area, there
are just a couple of initial configurations that we need to do to set up the framework
before we dive right into setting up the home page, slider, and all the other elements that
go 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 scroll
down and go to General Settings, you should be able to upgrade or update the site title
to whatever you want it to be. So that would probably be your business name
in here. I’d recommend you taking out the tagline. Now in here, you’ll see there’s no www
before the domain name. Now, I’ll show you what that does when you
load 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 the
same thing for the next field as well. This is completely up to you. Update the email address to your own personal
email address, once that you have access to because if you forget your password, you will
need to get that reset, and it will be sent to this email address, and any other notifications
that 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 will
ask 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 right
now, even if you name the page, for example, My Portfolio, it will be named with a page
number, and obviously, that’s not ideal. If you name a page My Portfolio, you want
it to be /myportfolio, and that’s proper naming convention. So select this here, Post Name, and then go
down and Save Changes. Cool. Next, if you go up to Pages and click on All
Pages, 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 currently
exist on your site as a result of the bulk upload. Now, the thing we can do is we can delete
all of them because we don’t need them, but if you want to leave some and just see
how they’re structured, you can do that as well. So let’s go ahead and delete by moving to
Trash. So what I did was just click on the check
box at the top, which selects everything, and Move to Trash, Apply. There are heaps of these, so you’ll have
to do this a few times. Once you’ve done that, I recommend you go
into 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 delete
all these pages permanently. Actually, you can just empty Trash right here
by clicking this button, and it’ll delete everything. There we go. I recommend you go to Posts as well, and do
exactly the same thing. There’ll be a bunch of dummy posts, basically
just default posts, so I recommend you just check all of them off and move them to the
Trash 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 the
moment, 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 then
go to Pages, and we want to add a new page. Name your page “Home,” and then go to
the 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 choose
a static page. We want to display a static page as a front
page, 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 be
completely 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 two
options. Either to Edit Slides or Add a Slider. First, we want to add a new slider, so click
on that. Let’s name this one “Home Page Slider.” Now, you’ve got a few options you can choose
from. Slider Width, 100%. I want to keep it a full-width slider. The hight of the images in the slider, now
I recommend something between 400 and 500 pixels. So let’s keep it at 450. Okay. Full-screen slider, no, I don’t want it
to 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 after
that kind of a look. Parallax Scrolling. I’ll actually enable that a little bit later
and show you what that does. That’s another cool effect. Display Navigation Arrows. Yes, I want to display the left and right
navigation 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 Fade
or a Slide. It’s completely up to you. The speed of the slideshow. Now, the speed is in milliseconds, so 7.000
is actually 7 seconds. So you can change that, depending on how many
seconds you want each slide to appear before the next transition. So let’s say 8 seconds. The speed of the animation is just a speed
in milliseconds between each slide, and the rest you can leave as Default, and click on
Add 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 settings
at 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 click
on that here. Okay. So when you’re adding a new slide, just
go 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 be
putting any text overlayed onto your slide, you can choose the alignment of that, and
you’ll see what that does in a second. Scroll down. And to be honest, I don’t want to add too
much on my slide. There is also the opportunity to add a button
with 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 a
colour 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 link
to any URL. Actually, let’s say google.com just as an
example. So make sure button link equals, and you’ve
got the two speech marks outside your URL. So you can do the same and edit this button
over here. What you need to do to add an image to this
slide is click on Featured Image, Select Files, and from your computer, just select files
that you want to add to the slider. Now, you can add one by one, or you can actually
drag all your files into what’s known as the Media Library, and select which one to
apply to this particular slider. So you’ll see all of your images upload. And this is known as your Media Library, and
you can access this any time you want. So any time you upload an image, it remains
there, 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 to
the 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 to
the 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 third
slider. 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 edit
any one of these slides. If you want to see what slides have been added
to a particular slider, go to that slider, and click on the number beside it. So if I click on that 3, I’ll actually be
able to see which slides are assigned to this home page slider, and of course, I can go
in and edit them at any time I like. Okay. So now, we’ve added our slider, and we’ve
added slides. So what we need to do now is actually add
it 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 front
page, 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 correct
slider in this area here. So Slider Position. I want the slider to appear below the header. You can choose to make it appear below or
above. 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 that
stuff you don’t need. You just need to make sure your select the
correct fusion slider, which is the home page slider we created. You can assign a fall-back image. What that is, it actually overrides the slider
on a mobile phone, so if somebody loads your website on a mobile phone, the slider won’t
apprear. It will just be an image in its place. If you don’t have a fall-back image, a slider
will appear on a mobile phone. So it’s absolutely your choice how you want
to do that. I’ll upload a fall-back image just by way
of a demonstration. And let’s say I want that image there. So click Show. If I click the Insert into Post buttone, this
URL pops into this area here, and this will become the image that becomes our fall-back
image for mobile phones. So okay. So that’s done. I’ve enabled the correct slider settings
for this to appear on our home page. So when you’ve done that, click Update. Now, let’s refresh our site to see what
that 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 text
and a link? So if I click here, it’ll actually go to
google.com. What I can also add is some text above this
area here. So what I need to do is go to this particular
slide. So if I go to Fusion Sliders, Add or Edit
Slides. 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 bit
taller than 450 pixels. I can come back in here any time, go to the
home page slider, and then change the height as I wish. And then make sure you hit Save or Update
anytime you make any changes. Cool. Now, let’s refresh and see what that looks
like. And there’s the text. So there you go. If you have any questions about setting up
your slider on your home page, please do ask me in the comments below because I’m always
happy to help. And I know how important it is to get your
home page looking absolutely right. Okay. So so far, this is what our website looks
like. As you can see, we’ve added our slider. And there’s some space here. Now, we need to basically add all the elements
and panels that we want to display on our home page, and you can configure this any
way 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 because
we’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 bar
over here. We don’t need it and it doesn’t need to
be there, so the way to do that is just go back into All Pages, and go into whatever
you’ve called your home page, so Home. Then scroll down, and all of these Fusion
Page options are all page-specific, so if you make any changes here, they will all reflect
on that particular page, not the whole website. The thing we need to change is this Page Title
bar. At the moment, it’s default. We want to hid that Page Title bar. So if I just go and update that, and you should
see that dissapear now. There we go. Now, we’ve got a good blank slate for adding
all of our home page components. So like I said, I’m going to be showing
you a slightly different approach to setting up your home page, and it’s one that I’ve
noticed that beginners adapt to very easily, and to be honest, I think I’m the first
to demonstrate this approach. So here we go. For the purposes of clarity, this is the home
page I’m going to show you how to set up. So all of these different elements you see
here 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, and
some testemonials. Now, I will show you how to add each one of
these elements in the next five to ten minutes. So first things first, make sure that you
are on the page that is your front page or your home page, and if you followed me, it
should be the page called Home. You’ll see something here called the Fusion
Page Builder. If you click on that, you will see a range
of options or containers that you can add that are varying widths, and you can basically
drag and drop a couple of containers, then go to Builder Elements. Then drag and drop, say, a Google map, and
then you can click on this icon here to edit the element, and then you can configure all
of this stuff. Then you can add more elements, etc., ect. Ths is the way you can do it, but I’m going
to 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 Fusion
Builder is. It allows you to add any one of this elements
on 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 some
pre-built templates. Okay. So now, here’s the cool part. So I just want you to right click on Add New
in Pages, and open it in a new tab or window. This will open us a new page, and just name
it something random like “Temporary Page.” And you can publish it if you want. Actually, you don’t even need to publish
it. Just have it sitting there. Go to Fusion Page Builder. Now, the first thing I want to add is a Call
to Action, along with the link. Okay. So if you click on the link below, the one
that takes you to the Avada theme details. It’ll take you to this page here, so what
I 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 different
home pages. There are a few different versions that you
can look up in your own time. So let’s say Version 14. Okay. I don’t want to add anything from this version
into 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 know
this is Home Page Version 4. It’s one of their pre-built templates, one
of Avada’s pre-built templates, Home Page Version 4. And now what I can do is now I can go to this
Temporary Page, go to Pre-built Templates, click on Home 4, and it will add everything
that belongs into that particular templete. So now, if you save that page and look at
your 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 into
my actual home page here. So if I go to Column Options, first thing
to do, add a full-width containter. Now, I recommend you do this, regardless of
what 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 tagline
box. So drag and drop that. So now, I can edit this tagline box, and what
I 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 fill
in 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 point
to. 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’s
blank. If you want it to open in the same page or
same 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 button
type Flat. Of course, you can experiment with this in
any 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 title
in here and your own description over here. So for the purposes of this demo, I’m just
going 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 update
and show you the update on the front end itself, so you know what it’s done, and you know
how 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 some
text that you can easily edit, and you know exactly what options you need to change to
edit that. Okay. Now, I’ve added that element. Now, I need to continue to add more elements
onto the home page. So if I go back into the Demos, let’s try
Home 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 Version
1 – go to my Temporary Page as I did before. Click on the relevant page or click on the
relevant pre-built template. In this case, Home 1. And yes, I want to replace with the pre-built
template. 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 real
home page, scroll down, add another full-width container. I recommend you do this by default. This takes up the whole width, so I’ll add
a 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 temporary
page 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 because
it’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 frontside
content, and the backside content. Okay. Interesting. So you can fill all of that stuff in. And I’ll just copy and paste from the demo
for demonstration purposes. You can experiment with all the other settings
if 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 update
the 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’t
actually have to work from scratch. You can see what the demo or default content
is, and then use as much of that as you can as a guide. So next, let’s have a look at a different
page version. So let’s try-- let’s see what else is
on 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 drop
and drop another half-column to get ready for the next one. And then go to Builder Elements, and then
drag and drop the Progress bar. And as you can see here, they’ve done four
of 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 can
do, you can edit. You can set it all up, and then you can click
this link over here and Clone Element, and it will clone all of the settings without
having you to do it all again. So what I’ll do, I’ll just edit the first
one. I’ll go to this one here and edit that one
as well. You can pick your percentage. I’ll copy that Unfilled Colour back into
here. Striped Filing, yep. Animated Stripes, yep. I actually quite like that, so I’ll use
that. Progress Bar Text, so let’s enter something
here. 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 duplicated
that a number of times. All I need to do now is click on Edit and
just edit the relevant sections. So maybe it’s percentage. And it’s probably only the precentage and
the text, actually, to be honest. And do that for each one. So as you can see, we’re not wasting any
time 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 here
or 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 choose
a 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 chech
boxes with some key advantages to choosing our company. So Home Page 3, once again, go to your Temporary
Page, click on Home Page 3. And now, go down and-- which section is responsible
for 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 Builder
Elements, 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 default
Checklist look like. Okay, okay. Cool. So it’s got different areas for each Checklist
item. Now, this icon over here you can set as a
global icon. So it says here, “Global setting for all
list items, this can be overriden individually below.” So if you select it here, you don’t need
to 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 able
to do is enter a new Checklist, some text over here. “Brilliant step by step video tutorials
to help you make a website with WordPress easily!” Create Your Own, actually I’ll put that
in the next item, so Checklist Item 2. Okay. Let me just save that for the time being and
click on Update. I just want to make sure it’s appearing
as 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 and
add 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 fild
the content boxes. There we go. And then I can edit. Okay. ‘“Parent Level” settings will control
each box stile individually.’ So you can either choose settings for all
the boxes, or choose to adjust them separately. So I’ll do it in the same way the demo is
doing it. So Content Box Layout, Classic Icon on Top. Number of Columns, 4. You can obviously change that to how many
columns you want. Three, four, five. It’s up to you. Content Alignment. I don’t think it works with this particular
layout, 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 open
in a new window, I suggest this. Okay. So these were all the overall settings. Now, what you need to do is actually add the
content for each box. So let’s have a look at the demo [silence]. And then you’ll have to enter a URL to link
that to. Obviously, the pages are not set up yet, so
for now, I’ll just enter some dummy URLs. So Link URL. Obvously, once all the pages on your website
are set up, you would adjust these linked URLs so each one of these go to the relevant
page on your website. And that’s fine. So you need to do the same thing for each
one 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 and
update 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’t
actually show the Learn More or whatever it is. It just links this directly to whichever page
you 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 while
you’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 Temporary
Page. 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 to
set up. So let’s just copy the theme. Now, I haven’t selected an icon, so it doesn’t
show 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 have
on a website. It makes it look really modern, and I can
see, recently, that there are trends towards having the kinds of counters on websites just
to 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 Home
Page 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 business
location 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-width
map. 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 click
this 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 the
same. The hight, it’s slightly different, but
you can set that to whatever you want. Map Overlay Colour. Now, this is an interesting one. Your map’s look and feel will be determined
by this Overlay Colour. So you can choose one, or you can actually
leave it as blank. So you can clear this, and it’ll just be
Default. 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’ll
see 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 added
a 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 than
an 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 leave
it 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 and
the 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 drag
it down there, and then find a text block. And you’ll notice whenever you’re entering
text, there are two tabs over here. There’s a Text tab and a Visual tab. The Text tab should always be used when you’re
entering any code, any HTML. Otherwise, you should always use the Visual
tab. 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 in
the other demo site. And you can actually add a hyperlink by using
this icon over here. And you can choose to make it open in a new
window or tab. Or otherwise, it will open in the same window. Okay. Save when you’re ready, and let’s check
out 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 accordions
that I wanted to add. They’re a nice little feature when you don’t
want to take up too much space on your site, but still want information available to your
users 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 easy
to 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 the
demo as per usual [silence]. So there we go. Pretty straightforward, actually. Perfect. Perhaps I’ll add some testemonials on a
page. So I know there are some on Home Page 16. As you can see, all these home pages look
really, really cool. So that one there, I’ll add this onto our
site. Okay. So I’ll need thirds and a testemonial block
in each third [silence]. And then you can enter the name, avatar, and
the 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’ll
duplicate this one. And then I’ll change the text a bit later
on. 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-built
template. So let’s have a look at what we’re missing. Okay. So we’re missing all this stuff above the
testemonial. This is basically a text block with some large
text, 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 the
text block and drag that in above the testemonials. And I’ll just copy and paste all of this
stuff. Okay. We’re also missing a separator. No style with some margin. Now, if you’ve got a lot of gaps in your
hope 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 whenever
I need to. So you don’t have to get it right the first
time. It’s all about trial and error and getting
a look that suits your business website. One other thing that the demo has that I don’t
is a nice background image, and I can easily achieve that. All I need to do is go to the box that’s
around the testemonials. So this full-width container. As you can see, there’s a couple different
tabs: Background, Design. And pretty much that’s where the background
of this particular area is coming from. And to be honest, you can add a background
to any one of the elements that we’ve added throughout this process of builing a home
page. So let me do that now. I’ll go and add a background on this Testemonial
panel. Cool. So that’s all default. Okay. So let’s choose a background image. Obviously, you can upload one from your Media
Library 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 the
parallax, and I’ll show you that a bit later. For now, let’s just save and see what that
looks like. So as you can see, that image probably isn’t
right for this area. So it’s just a matter of going in and editing
that 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 quick
intro on the Content Editor and also show you how you can add multiple pages, as many
pages as you want to your website. Now, say you want to add a page for every
section of your site. For example, and About Us page, a Portfolio
page, a Contact page. Say you have a number of services here, and
you 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 here
and have links going to each individual page. The way to do that is just simply go to pages
and Add New, and you can add an unlimited number of pages. If you want to manage pages, just go to All
Pages, then you can either trash or edit from this section here. So if you click Add New, you’ll get to a
screen where you can add your title, your text, and also importantly, choose a template. So a default templete has a side bear, whereas
a 100% width page is full width, obviously. So I’ll be showing you how to use this Contact
page 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 entering
code. For example, you’re imputing some code from
Google Maps or you’re embedding a YouTube video. You would put that in the Text tab because
it actually collects code and renders that accordingly. However, the Visual tab works very similar
to 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 icon
there. You can add quotes. You can add bullet lists. To be honest, it’s exactly the same as a
word editor, so I don’t see you having too many problems with that, but if you have any
quesitons about what you’re seeing here, just let me know, and I will be happy to help
you. If you’re not seeing everything, just click
on this Toggle tool bar, and you’ll be able to see everything. So hopefully, that okay. But if you have any question, please get in
touch via the comments below. Okay. Now, I’ll show you how to set up a content
page 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 Add
New. Now, say that we are organising or preparing
a 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 that
I’ve got on another screen here for demonstration. Stuff you can do here, maybe you can put something
in 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 the
front end in a second. I looks really, really cool. Okay. You can also add images, so if I go to Add
Media, 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 important
to have a default template. Okay. So I’ll click Publish and show you what
that 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 maybe
to the left. So what I would do is I’d scroll down, and
in these page options, I’d just go to sidebar, select the default sidebar, and then sidebar
position. 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 a
bunch 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 Appearance
and 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 able
to 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’ll
get rid of that. Okay. I’ll just refresh to see what it looks like
now. So I’ve got some tabs here, which I can
probably 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 in
the 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 Info
into this area here. Now, if you look around, you will notice that
there 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 doing
here to change the order in which all these things appear in your sidebar. Okay. So you can configure your Social Links if
you like. I’ll leave that out for now. So I’ll just get rid of that. And like I did before, I added the contact
info. So you’d just be able to fill out all the
fields here, and just like magic, all of that stuff will appear in your sidebar. If you have any questions about that, please
do 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’t
go into too much detail right now because it’s probably not something you want to
learn about at this stage. But update your Blog sidebar because that’s
the main default sidebar that we’ll be using for any of your static content pages. Now, I’ll just run you through how to make
changes to the footer area of here down at the bottom of your website. So if you go back into your Dashboard, and
in the Appearance tab, you should see Widgets. Just click on that. Now, the one we want to change are these Footer
Widgets, 1, 2, 3, and 4. So this is Footer Widget 1, Footer 2 is in
there – there’s nothing in there – 3, and 4. That all corresponds to these four areas over
here. So now, similar to how the sidebar works where
we added different elements to the sidebar area, you can add different elements to the
Footer Widget area. So if you open this up, you will see that
there 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 you
want in that box or you can actually drag new stuff over. For example, Contact Info, Social Links, and
all this other stuff. Calendars. You can also create a cutom menu. Here it is. So let’s go ahead and make changes to our
Footer Widget. So I’ll leave the first one as is. The second one, Recent Posts. The reason why nothing is showing up is because
there’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 social
media links in the fields you want the icon to appear. For any fields that you don’t enter any
URLs in, it just won’t appear. Now, you can do this in your own time. I’ll just put some dummy data in here, just
so you can see how it works. So let’s pretent I had all these social
media pages set up. Then click Save. So there you go. That’s added that over there, and they will
link 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 categories
in Footer Widget 3 and add some contact info [silence]. That’s pretty cool. You’ll see that it automatically puts in
the 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 information
under the Social Links, and you can do that by just dragging and dropping like that. So you can drag and drop anything in this
interface. It’s really easy to use, and that will update
on the front end like so. So I might add a custom menu here. To add a custom menu, you can actually drag
and drop this widget over here. But to actually create a menu, you can go
to Menus and Create a New Menu. And perhaps you can link some important links
in your footer. So maybe Our Services, Contact, and any other
important 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 know
how 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 find
an area called Footer, so I’m just look for that. Here it is. Okay. By the way – just taking a detour here – but
if you wanted to change the number of columns in the other footer, that’s this setting
over here. But anyway, scroll all the way down. In Copyright Bar, you’ve got the option
to display this Copyright area or hide it completely using this checkbox. So it’s completely up to you what you want
to do. You can chack this box to centre the Copyright
bar. And in this field here, you can actually edit
what’s shown over here. So let’s say “Copyright 2015 eMediacoach
How 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 social
icon options. Firstly, you can choose to show or hide any
of the social media icons using that checkbox. You can change the size of those icons using
this 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 links
go, it’s actually in a slighly different page. So if you scroll back up and then find Social
Media in this area. There it is, Social Media. And it’s these links here that you need
to update. So obviously, you would enter your social
media links in these fields. Now obviously, I’m just doing this as an
example, so I’ll just copy and paste that link just as a demo. So say I have all of those social media pages
set 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 that
will all update. It’s as easy as that. It’s really user-friendly, and it looks
absolutely amazing. Okay. I’ll show you how to add a Contact page
now, 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, and
select the Contact template, and just Publish. Now, let’s view that page. You’ll see that, without doing too much
now, this Contact template that we selected has enabled this nice, big Google map, as
well as this contact form, where your customers or people looking at your site can fill out
this 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 your
locations. 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 notification
here 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 locations
on the map. And that’s pretty cool. You can actually show multiple locations if
you have multiple offices. So that’s really, really handy. So back into the Avada theme dashboard, you’ll
need 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 are
all 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 want
to make the hight of the map larger or smaller. This doesn’t matter here if your map is
100%, Now, your address. You can see each address is separated by this
pipe 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 addresses
or your multiple locations. If you only have one, obviously, just enter
one location in this field here. So obviously, you would enter your exact business
address, 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 in
it will be. You can hide the address pins if you like. And you can do a bunch of other things as
well, such as dissable the scroll wheel. When someone hovers over the map and uses
the scroll wheel on the mouse, it will zoom in and out, so you can dissable that if you
like. There’s more stuff in here. As you can see, it’s using the Custom Styling. Or we can use Default Styling or the Theme
Styling. I urge you to experiment with that. See what suits best. See what look you like for your particular
website. Now, Custom Styling, I will just choose a
different 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 each
one of these, and the order in which these appear are very important. So the first one here corresponds with the
first address you’ve put in over here, and so on and so forth. The second and third correspond with the second
and third info boxes that you enter in here. So let’s change some of that around just
to experiment. And then when you’re done with that, you
can go down and save all changes. So let’s just refresh and see how that looks
now. So there you go. As you can see, the colours changed because
I’ve chosen the Custom Colour. We’ve got our pins here, and we’ve also
got the little info boxes that we’ve put. Now, if you don’t want the info boxes, you
can actually get rid of that whole box and it will get rid of all of that information. What you can actually put-- a good example
is-- put your address, so that when somebody clicks on the pin, they can easily see your
address. 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 address
over here. We can change the colour. I don’t really like that colour. So maybe I’ll just change it to something
a bit lighter. Good stuff. Okay. Next, I want to add some text before the form. So now, back to where you added your contact
form, if you add text in this area here, this Visual Editor, that text will appear right
in between this contact form and the maps. Smack, bang, right in between. So I’m just going to use some dummy text
that I have here on another screen. So I’ll just copy and paste it across. And maybe I’ll put some [inaudible] in there
with 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 some
social media links because obviously, this is our Contact Us page, so people might want
to add their social media. You can choose your settings. I’ll just leave everything as Default for
now. 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 text
to fill this out. You can open one by defautl as well, if you
want. Pretty cool. Now, if you watch the section on the home
page build, you’ll be very familiar with this. There you go. It does look a little bit cramped up, so we
can 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 notification
saying that the email address isn’t set in the Theme Options, so we need to fill that
out. So last but not least, let’s go back into
Theme Options, and back down to the Contact section. And it’s this field here, Email Address. So enter whatever your contact email address
is here. And there you go. We can now fill in anything we want. Your users would be able to send in an inquiry
to you, use this email address. And there you go. There’s the notification for the successfully
sent email. Now, if you log into your email address, if
you’ve put your correct email address in that setting there, you will receive that
in 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-looking
Contact page on your website. Let me know if you have any questions about
that. 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 and
hover over Appearance and click on Menus. Now, you should see a Main Navigation tab
over here. If not, just choose that and press Select. And now, these menu items correspond with
what we’re looking at over here. So we’ve got Home, we’ve got a few pages
under Home, sliders, pages. As you can see, it all corresponds to what’s
appearing. Now, the way you customise this is you can
actually drag and drop. It’s a really intuitive drag and drop feature
where you can drag and drop pages or posts or anything else. Any custom links that you want to add to your
menu. 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, it
becomes 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 use
and really intuitive. So now, you want to add the items for your
website. 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 give
it a new title. Okay. So we’ve created a brand-new menu. So what we want to do is asign this to the
main navigation. Currently, there is a different menu asigned
Main 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 these
pages that we’ve created into our menu structure. So let’s go ahead and do that. I’ve obviously created a few more pages
just for an example. Okay. So say we want Home at the top because we
want 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 rearrange
evertything like you just saw. Another really cool thing I can do, I can
add 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 of
a few minutes. There you go. Abolutely perfect. If you have any questions about that, please
do give me a yell. I’ll be happy to help. The reason this shopping cart appears is probably
because 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’ve
seen in this tutorial, please do ask me in the comments below because I’ll do my best
to help you out. And all I need from you is a big Thumbs Up
on this video. Subscribe to my channel, and please do click
the Share button, and share it on social media. I really hope you found this valuable. Thank you for watching, and I’ll catch you
next time.
