How to Make a WordPress Website with the Avada Theme v. 4 and Website Design Tutorial

your watching this video it’s probably
because you want to learn how to make a great website this video is gonna give you on massive
head start and show you step-by-step from the beginning how to build a
website you’ll find out exactly how to set up hosting and WordPress and a new
show you how to set up and build this exact web page right here but are not
limited to the look of this web page right here as a matter of fact with the
tools are gonna show you how to use you can be able to make a website that looks
very similar to say Apple’s website or Microsoft home page Tesla Motors or Spotify all these are
great looking websites built by professional designers and you gonna
learn a tool to let you build websites that look almost exactly like these
websites as an example sites that were made using this teen I mean look at this
website here it’s beautiful it’s gorgeous check out this header and when you
scroll down its amazing is another great example another beautiful website we can
build something like this without knowing code I think it’s so cool check this
out another completely different look still crisp clean nice different menu
different header all done with the same theme now here’s a completely different
menu and a great looking website again over the same thing you can do all of
this without having to know code to be ready to make an awesome website for
your business or organization or just for yourself keep watching and show you
exactly how to do it step by step right in this tutorial have included links the
sponsors providing the tools that were going to use in this video say ground which is awesome easy to use
web host with great customer service and innovative theme which you already saw
those great examples from the make it easy for you to build a great website so
I want to familiarize yourself with the two companies because we’re going to be
using them throughout the video to go ahead pause the video scroll down to the
description below this video are if you’re watching this on my website and
also below the video on my website and go ahead and click on the links for the
webhosting and for the Aveda theme song go ahead and get to know these two
companies first thing that we need to to to build our website is to have a place
to build it and I think that the best and easiest way to do it is to build it
live online on hosting company I do have some
alternative methods and you can see those in description below but if you’re
just getting started anyone the easiest and best way he would
go ahead and build your site live online if you already have hosting that you’re
happy with him go ahead and skip this section but in this section here I’m
gonna show you how to get hosting for your website and how to install
WordPress so my recommended company and a link to them in the description below
is site ground and you can see the plans they’ve got here and these guys are
really great they don’t give you anything extra that you don’t need and
they provide a really great service plus I found her support to be amazing and
really nice and friendly so you can see we still have an indirect repressive 395
also what I like about these guys as they show you what the price goes up to
some other hosting companies stranded tricky you by just showing a surprising
is that way forever but it’s not and I think that for most people the start up
a standard price here is going to be just trying to find additional space in
your site search going really fast and get a lot of his very easily move up to
another hosting a problem so to go ahead and click get started and then if you
want to register a new domain you can do that here and that’s included free on
sign up if you already have a domain then you can enter in here and I’ll give
you the instructions to forward that domain information to your new server
let’s go ahead and just create a new domain and it’s free after all and then
just click Proceed and just go ahead here and fill out all
of your billing information on there are a couple of extra things down here we’ve
got domain privacy which is dollar-a-month and this will hide your
personal information from your who is generic information that way your phone
number and your address aren’t online I think that’s a good idea and a good
thing to do and it’s really not that much money to add and you’ve got hack alert monitoring which will monitor your site for malicious code and
unfortunately that has kind of become an issue recently so that’s what I would
say that either one of those are optional I recommend putting both of them on
think it’s just good protection for yourself but you can skip those if you
do choose and then just go ahead and click pay now soon after signing a free account you
can be asked to verify your order and they may have you either do an online
chat or call on the phone and it’s just part of the great security measures at
SiteGround takes make sure that your credit card information isn’t being
stoned and that you’re a valid person and really take security seriously so
that’s really important to receive two emails one of them that looks like this
and that’s going to have the username to use to log into the site ground area
which is different than your WordPress website and in the password that you
created during login and then a second email you’ll get is if you register a
new domain name there’s you asked to verify the information that you filled
out is accurate so they’ve got accurate information about who registered that
domain name go ahead and get started and we do that
by opening up this e-mail here including to log into the customer area and then
I’ve already signed in once here says really filled out my information be able
to set to enter in your information in the password you created and then click
Sign In to here we are on our hosting companies panel and get started with my
accounts and it has all the information about the domain name that we signed up
for here on the bottom as well as the other information about our hosting
company and email if you want to use email on your domain and to get started
with go to cPanel this here is the cpanel not really much you need to do
here the only thing we really need to do right now is install WordPress on our
computer to do that we need to click on WordPress auto installer here or down
here so go ahead and click on that and what’s great about this installer is
that it’s going to install WordPress correctly and is gonna make sure that
everything is configured just right for what you need so you can go ahead and click install so
we can go ahead and set up our protocol here says whether it’s HTTP or http www
or HTTPS or HTTPS www that’s really a preference that you’re gonna have this
with you want the WWW to appear or not so this case I’m gonna have a nine
appearances can be used the default and you’re going to want to choose the domain name that you want
it to be installed on now have one domain on this account to which has been
installed directly then and this is it you want to have it installed on a
separate directories that your main WordPress install was not add your main
URL dot com and I recommend that for most people get ready regular URLs were
gonna leave that alone and then fill out this information here is an auto
entering into WordPress as part of the install so we’ve got our site named
and you do need to give yourself a description and you want to make that something related to
your website is about we do not want to enable multi-site don’t worry about that
and they’re going to set up the admin account and it’s going to be for the WordPress
setup and again I will recommend that you use a robust user name you don’t want
to use something like admin you want to do something creative that somebody is
gonna be able to guess easily because unfortunately there’s hackers out there
and they will try every basic user name and they will try every basic password
in every common password and other password combinations he really want to
use strong user name here in strong password and building website I
definitely recommend that you use a password storage system of some kind I
personally use LastPass so you can consider using LastPass there’s other ones like
one Password also that you can use definitely want to use something robust
and then you want to enter in an admin email here I recommend using an email
address that separate from your website for now and then you can change it to
your email address at your own domain name later on if you want to but right
now you something that you have access to you language and then this first plug in I’d
definitely recommend that you install what’s the limit login attempts and I
will help protect your website from hackers trying to log in and just use
every single password and username combination that’s a good one to have
and we don’t want people to pick our own theme and the advanced options you don’t
need to worry about and then just click Install we have this data bar that is showing us that the
installation is taking place and then we go now we know that the installation has
been completed successfully and it’s been installed on our domain that we’ve
created a this link here which is to the administration area for a new website
and you’ll also receive an email with this information go ahead and log into the panel of our
website and then click Login so this is the back end of our website as we’re
gonna be making a lot of the changes to our Web site is right here so let’s just
make sure that everything is configured the way we want it the first thing I like to do just check
the plugins and we’ve got some extra plugins here we don’t need like the
hello dolly plugin and this Akismet plugin is actually a really good plugin once your
website’s established need lots of comments on it but I’d recommend on
activating it and maybe even deleting it now until you need it also personally
don’t use the jetpack plugin I recommend just deactivating it and then deleting
it there we go we have the limit login
plugin that was installed for us now lets just check our pages. Good, no pages were found
we have this one default post we don’t need thats within just click on trash and there was
just one more thing and that is we want to go to Settings and then permalinks and want to make sure that this
is set to host name was gonna make search engine optimized and friendly
URLs for all of our posts and pages to really important thing to click on Save
Changes so there we go we have WordPress configured on our host and we’re ready
to start building our website so once you have WordPress installed and configured on
your site it’s time to start by installing a theme and the theme we’re
going to use is called the Avada theme and this is the website where you can
get the Avada theme and I’ve actually got a link that will take you directly here
right in the description of this video are right below this video here now what
you need to do you need to setup an account on the Envato market marketplace
with ThemeForest and then once you have your account go ahead and go to this page here and
then buy a license and after you’ve got your license go to your gonna send you some emails
and verify that your account is all set up and ready to go and we’re gonna go to
your account here by highlighting this and then going to downloads and you want
to download the installable WordPress file only there’s the all files document
this does have the installable WordPress file in it but it’s a little bit more
complicated you can unzip this file and then install WordPress file because you
actually upload the zip file to your website so go ahead and click on this
and download that. Make sure you know where you download that you need to be able
to find it later when you upload your website and then let’s go back over to
our website so then from our website here when you go two appearances, themes
and then click on Add New and then click on upload themes and you can choose the
file you can upload the file here and it’s the zip seen anyone make sure that
you downloaded that installable file and you doing upload the zip file click on that and
then click on install now soon after this theme file has uploaded
to your website gonna go ahead and unpack and install and then all you
gotta do is just click Activate here in this gonna make it your active theme on
your website and after you’ve activated the theme you’ll see this but here is the
required plug-in installation so we’ll go ahead and install that go install
plugin and then click on install here and then we go to return uh return to required plugin installers
and then we’ll see here there’s a bunch of other plugins that we can install I
don’t recommend installing any additional plugins any additional
plugins that use on your website that you don’t need can cause potential
problems later either an update might cause some sort of an error or it might
slow down your website so unless you need one of these additional plugins
don’t install it and the base plugins that come with this theme are fantastic and they are going to let you do so many things to make your website looks great so I recommend
just using the core plugin that comes with the theme now we’ve also got this
tab here called the installed demos tab and this is got all of the
professionally made demos that have been made by the Avada professional designers
they have in their great looking demos and I definitely recommend using them to
sort of reverse engineer some of the looks at you like that are on these
demos and you click the Install button here it’s gonna install it to your
website is actually a wright over a bunch of stuff on your website all of the
settings can add a bunch of posts and pages and things like that so I don’t
recommend doing it on the actual site that you’re building and using got a
couple of demos that show you how to install WordPress on either your Windows
computer or on your Mac computer I would recommend using that technique
of installing it with WordPress on your computer to install some of these demos
said you can go back and look at how the professional designers configured their
sites to get a certain looks If there are certain looks that you like that you’d want to
implement on your site you can download the demo for that and look at exactly how they do it in
this tutorial I’m gonna walk you through exactly how to build a page and show you
how a lot of the different element works but I obviously can’t show you
everything works. Now let’s go ahead and I’m going to give you the the shortcut
technique to configuring the Avada theme so that it matches your branding
your website to start with that you want to go to the Avada menu up here and then
to theme options or the Avada menu on the dashboard over here and click on Options
the first thing that I like to do is install my logo and usually I like to base
all of my branding off of the logo for the website so to install your logo on
your website click Remove here to remove the default Avada logo and then click on
upload and I’m gonna drag in my logo file here you now have chosen a logo
file of 250 by 125 I think that’s a great looking size for a logo on this
website and click Select now we’ve added this logo to our website and the next
thing I like to do is to get the colors that match the branding of our websites
on a pic to basic colors off of the logo of this website should go down here to
styling and then we’ve got a choice of the themes skins that’s mainly the
background of the main pages are a website so I like light for this website
but they also got dark, it’s sort of like a dark grey background with lighter text
another option and we get this predefined color scheme here and set the
green and there’s several other options here I think there’s much better to go
with your own custom options would recommend just leaving the sitting alone
just know that if you decide later to change this setting that is going to
overwrite any custom settings that you’ve set up down here so with the Avada theme it’s actually pretty easy to
figure out which colors we need to change which highlight colors we need to change
to match our logo and our website because of that this bright green color
here that was the Avada highlight color and how we can just change that to our
highlight color so I’m going off of the main logo color for her this website and
click select color here and you can either use the color picker here or if
you want to be precise and I definitely recommend with the colors that there are
consistent throughout your entire website you precise they find out what
the hex code is for it and then you just paste that in… another one here for
the header background color and then that’s it there under element colors here rollover image gradient color and that’s it there. Let’s go down here to the main menu colors change this to our color there and that’s it there and everything
else pretty much neutral color so chances are you can leave them alone but
of course there’s something specific you would like to change the color of you
can probably find it in here now there’s one more place where we want to change
or colors and that’s in this short codes section and there’s the button short
code section here and this is sort of the default buttons that you can add
your website and we’ve got these two colors here the the button gradient top
color and button gradient bottom color if you want to put it to be just one color
without a gradient you just put in this same code for both of these and that’s what I’m gonna do here and when I had a slightly different color for the hover over colors when you
hover over a button like this the color will change slightly so people
know that that’s active button. So I’ve got my slightly different color here and then if you want to use the 3d
buttons may want to add and shadow color for that I’m not actually going to use
any of the 3D buttons but I’m gonna put in there just in case later on I decided to figure out all
over again where the settings are for that and there’s a couple more places on
here where we are going to put in our highlight color so some of the different
elements which is what they call the items that you can put into your layouts
have got highlight colors we also need to change so under the checklist short code change
that to our default highlight color and then under content boxes short code and
then under countdown shortcode we’ve got the Countdown background color and the
counter boxes short code and if you want step-by-step instructions on how did
this in like written destruction and you like to look at written instructions are
you can go over to real website hints dot com slash Avada Tutorial and got all
the instructions written out there this get counter circles shortcode drop cap
shortcode flip boxes short code and it’s just really easy
to figure out where you need to go because you’ve got all that bright green
as I said before that does make it really nice pricing table shortcode the last one is the progress bar shortcode
and what’s really important here is that you click save all changes make sure
your changes get saved and then the next thing I like to do is to change the typography
setting sort of get their typography that I want on my website so than in the
topography I definately recommend using Google fonts for the easiest thing to do
and the most recognized across the web and you might have a different
look that you want for your fonts but I’m gonna show you an example and change
these fonts here so I change this one here to Questrial and I changed the menu font to
Monserrate believes hey pronounce it and then heading thought I changed to
Playfair display in the footer Font I changed to Playfair display SC and
I did the same for the Select button front of these settings the same and the
other thing that I did is a change all of the fun sizes because I wanted to make
sure that my readers could easily read the content on my website so I bumped up
all of these standard font sizes by two so don’t waste your time to go ahead and
skip ahead to after I’ve changed all of these and for the heading font sizes I wanted
this to be a lot bigger so tended to pump them up by about 20 or so on on
each of these just to make sure that it was really easy for my viewers to read
the titles on my website and so as not to waste your time to go ahead skip
ahead to after I’ve adjusted all of these and then on the post title font I just bumped these up by
two and then a few made all of those changes make sure you go up here and click Save all
Changes let’s go ahead and check out what the front page of our website looks
like with the Avada Theme so we could come here and visit site make sure you want to reiterate make
sure you click save all changes so you don’t have to go back through and make
all those changes again alright so over here including visit site and then we go
so can’t see much right now but we can see that when we roll over links that we’ve
got a highlight color and their can see our logo has been put in another one
thing I don’t like theme does put this in by default is this what they call the
title bar here so go ahead and remove that so that it doesn’t show up by
default on every single page we create it’s pretty easy to add in their
settings for each individual page if you want this title bar to show up on
individual pages you can have that happen so remove this title bar we
go on to the Avada menu here and we go to theme options and then over here on
the left we look for the page title bar tab and an under page title bar we click on
hide and click Save Changes. Then once you’re finished making all the changes that you
want to the default settings in the Veda theme I recommend scrolling down here
on the backup tab and then clicking backup options and is going to back up
all of these changes that we just made to our settings ok so the next thing to
do is to start building the home page of our website so to do that we’re going to
make a couple of new pages actually one for our home page and then one for our
blog posts so we can get rid of this sample page and click trash on that
And then we’re going to click up here and then click Add new to add a new page and since this is going to be our home
page when a call at home and then I like to just activate diffusion page builder
because I know we’re gonna be using that for our homepage and when you go into
how all these settings work on this page right now just click Publish add one more new page and this is going to be the page were all of our posts are going to show up so you can call this with
ever you want. You might want to call it like news or something that relates to your
industry or company but for this examples I’m just going to call it blog and then click on
publish and we don’t need to do anything else this page the theme and WordPress are gonna
default to adding our posts as we create them to this page as soon as we
set that up another two ways of setting this up we can either go to Settings
reading and we can click here to do a static page said our front page to home
and their posts page which will be for our blog posts to the blog page that was
created and then if you want to change the settings for your posts you can
change them here one thing I like to change is from full text to summary of
always on your blog page every single posted you put will have the entire text
on the page and then the next post will show up after the full text from first blog blog post showed up this
way this will just show a summary of the text from your blog posts and then
you’ll get more than one post probably on each listing and then click Save
Changes and that is one other place where you can get some of these settings
here and it’s kind of a new thing that WordPress assorted doing last couple
years and that is if you go to your visit site up here and then go to
customize. We’ve got several setting some of these don’t apply related this theme but
like the menus applies and get a little bit later and then the static front page
on this the same settings that we just changed the settings and reading section
of our website go back to our dashboard and from the example page that I showed you
that hotel page the first thing that I created was a giant full window image of
the hotel and show you how to do that and i actually don’t do that directly on
the home page we use a fusion slider here so to create a new slider we go to
add or edit sliders and so this sliders function is where we put our slides and
you can actually choose just one slide have just one image and that’s what we
gonna do for this so called this slider home page and then when I scroll down
here in this setting here which is full screen slider will make it so that when
our viewers first come to our page that the image fills up the entire screen or
actually entire window for a website and then was gonna check this parallax
scrolling effect here and its effects and makes it look like the content is
coming up from lower is actually going up and over the original image I kind
of like that effect and then we’ll click on scroll down to the bottom and click
on Add slider scroll up here and you can see the homepage slider has been added
and the next thing we need to do is to add some slides to this slider. We click over here
underneath fusion slider which says add and edit slides and then go over here to add
new slide and they want to call this one home one just in case we decide later on
to add more slides will have some reference to what this is and in the
background type of the default image and that’s what we’re going to use for this
content alignment is their content or their
text that were going to type into our slide and we want that to be aligned to
center for the headline text we can use the title of hotel Malta can and we’re not
gonna choose a separator for this, this would go next to the text if you
want to do their various different style then we have the option for a heading
font size and I want to make this a large change this to 82 of course you can adjust the color but I happen to like the default color and heading
background yes this is gonna put a background around the texts to make it
easier to read and separated from the background image yes it’s good for that
and I liked the default background colors and in the caption area we can
add a little bit more text here paste in some text that I’ve already written
and for this one here caption separator single solid just to see what that looks
like and we’re going to adjust the font size up a little bit here to make this 60 and the caption background again that’ll make
that sort of separation between the text and the image that’s easier to read for
our viewers and then here we’ve got some settings for buttons and you can also
choose to have just a full slide be one big giant but in this case let’s look at
this button thanks this is a little bit confusing in this theme. They have done a really
good job of making the setting so easy and so much of this theme but this is
one of those things that’s a little bit tricky so first of all this is what we
call a short code it’s sort of an easier to read style of coding that WordPress came up
with and it’s fairly easy to read to me can definitely everything’s very well
written and described but it’s a little bit confusing so we start off actually
by removing this button too because we just want one button on our site and
then here which has been linked this is where you would type in the URL for the
page that you want to button to go to in this case we don’t have any other pages
have a place where he wanted to go to this place marker we’re gonna put in the
hash and that way if any sort of styling things require the hash require
a link first to see what it looks like like the rollover only works if there’s
actually a link involved in it to have allowed to see
what about is gonna look and feel like we can later on come back in and type in
the actual URL we want this page to go to the next thing we want to change is
the button text or what the button says and that’s sort of right here at the end and
was gonna call this ‘Learn More’ and now the default color for this button is going to be the
highlight color we already added in the shortcodes but only to worry about the
color you would try to adjust some of these settings the button comes with you
can click on this link here it takes you to a well-written page that talks about
how to make changes to the look of the button and then screw the top and click
Publish to publish this button there’s one more thing we need to do
which was we need to add to that slider that we created so in click on home page
here at home page slider and then we’ll update and now the next thing to do is
to add this to our homepage so let’s go back over
here two pages all pages and then when I edit the home page you can click here or
at it and scroll down to the bottom here so these are the page settings knows
lots of different settings to customize the look of the specific page and one of
them is this slider tab the very first tab so slider position default
works out fine but let’s have it be below because we want basically our
header and menu bar at the top and then the image to be below that and then for
the slider type we have fusion slider installed and that’s what we’re using
so we’re going to select fusion slider we don’t have a layer sliders we can ignore this
and then for Fusion slider we need to choose which slider we want to show so
that would be the homepage slider that we just created and then we gotta do is
click on update up here to save our settings always remember any time you’re
adjusting any settings on the home page before you’re finished and want to view
the page click Update otherwise your settings will get lost. Really important
something I forget to do often and it’s frustrating to have to go back and
change I’ll make sure you always push this update button here let’s go ahead
and view what that looks like so if you click on view page up here we see that we’ve got
this image here but it looks like I forgot to add a background to the slider
lets go ahead and add that background image so we’ll go back over here and
we’ll click on dashboard fusion slider add or edit slides we’ll edit the home one side
and yep here it is I forgot to put in a slider image so OK click on set featured
image upload a file and I already have a file here that I’ve selected to
drag this an so I recommend using a large image here it’s gonna fill up the
entire window actually probably a larger image then this 1280 by 720 I would probably recommend
something like 1440 by 900 approximately For this image and you want to make sure
they’re always uploading an optimized image that loads quickly for your
viewers and that your page speed is really good important for your Google rankings and
then we’ll go ahead click Set featured image and we’ll click update here. Now let’s go back and
check out our home site home page There we go, we’ve got this great looking full
window as you can see image on the one thing we want to do next is we want to
change this header here so that it’s transparent so it looks like our image really
stretches across the whole screen here so go ahead and do that she can click on
Edit Page up here and scroll down here to this header tab and then we can change this
background opacity here to zero and that’s gonna take all the color away from the
background of the header and make it clear so click on update over here and let’s
see what that looks like so there we go got our logo up here eventually at the end we gonna fill out
our menu and are many is going to show up right here but this is a great
looking start for a website go ahead and add some more content to our home page
here and click on Edit page and then we can start using the fusion page builder
so page builders are a really great way of adding content and customizing the
look of your page easily and we got the two main functions
you can use on your page builder or the column options so when I added a full
width container and that’s we’re gonna put our content and if you want to have
different columns so if you want to separate out the widths of the different sections
inside the container you could drop in these elements here for our first
container we are going to just use a full width image and then to add text or any other
sort of element in here we click on this builder elements and where to start with
a image. So we’re going to use the image frame drag that in here thats the other great thing
about this is after you started setting things up if you wanna move things
around against click and drag them around we only have one thing set up
right now there’s no point in doing that but that’s what you can do now let’s go
over here to this pen tool, and that’s how you make adjustments to each of the elements So what we’re going to do is to scroll down here a little
ways when you get this image section and that’s we’re gonna
upload an ad the image that we want to put in. so just click on upload here and use a
logo image but needs a slightly larger logo image. Upload a new logo file
drag it in here right click on the insert into page at the bottom right
here to save add some text right below this so we’re
gonna look for the text block all this stuff is in alphabetical order here drag in the TextBlock there and then edit
this and then enter the text here and then we’re gonna add in kind of a
little headline text here at this in and past it in and then center this and then to
sort of modify the size of this or the style tag you need to use this toolbar
toggle here’s one click on that and then highlight this text here and I’m going
to use the Heading 3 tag for this and then a quick save down here now let’s add a separator between this text in the next section of text just drag that separator
in there. Use the pen tool to adjust it change the style to single borders solid We’re going to add the margin top. This is the space between the line that is going to draw and the space above the line and then the margin
bottoms space below the line to make this part of their margin top 40 and
then the margin bottom 50 and then let’s use the highlight color for the color of this little bar we’re going to use to separate things so I’m just going to click on that
then paste that in here Then we’ll just click save on the bottom. Below that let’s add some more texts and an image
over on this side so to do that when you use the column options and we had
dragged one third block below that separator and drag a two-thirds block
below that and if you sort of decide that you later on that you want to
change the widths of these you can always click this plus and minus buttons to change
the widths of these sections as you add in then let’s go ahead and add a text block to
this side here click on builder elements and then text block we’ll drag that in
right there and we’ll give it some text and then we want to center this and make it nice and large center that no one is there h1 tag to make it big an then below that we’re going to add some text about our hotel and this is just filler text that I have got here. Then we’re going to click on save. Then below
that we want to add a button to add a button we go over here we find the
button element we drag it in right below that text that we just put in and we
need to make some modifications of this button to button your own ad in as a
placeholder until we make the page that button is going to lead to so then for the button
style we’re going to use custom for the size we want to use extra large for the button shape we want to make this square and the buttons titles as the titles can
appear on the button will make ‘reserve now’ and then for the top gradient
color let’s go ahead and and and our main highlight color will do the same
for the bottom gradient color and we don’t actually want that have a gradient on
this and then we use our hover over color for they gradient hover top and
bottom and we don’t need an accent color and the next thing we need to do is add an
icon to this to make it look more interesting uses little kind of right
arrow or carrot icon here and they won’t have the icon positions make this on the
right and also use a divider just to give a little bit of separation between
the text and the icon there and then click Save the bottom in the final thing that we can do for
this section we’re going to build it was gonna add an image of our hotel here we
go to image frame drag that in here edit this so for the
frame style we’re going to choose drop shadow for the hover type we’re going to choose zoom in just to show
what that looks like it’s kind of neat little effect will make the border size
two pix and border color alone border radius will be if you wanted their edges
corners rounded you could add a border radius and we can change the alignment
of the image to center and we don’t want an image lightbox and then upload the
image that we want to use here already got an image picked out and then let’s just drag this in here and then click on insert into page and then click Save As be sure
to click the Update button here let’s see what our page looks like we are now
as we scroll down we can see that that’s white bar comes up to make sure that our
header is easy and separated and there are menu will appear here and we’ll get to
that and so far it’s coming along looks pretty good we do you want this centered and I think it
would look really nice if we had a background image here and also if this
image here was a little bit larger so go ahead and add a background image and
center this image here. Let’ to go back to edit page and then we’re going to go down
here to a line change that to center and then let’s just see what’s going on this image size
here and let’s change the size of the image over here too large and we’ll click insert into page click Save and add an image behind this entire section we just the settings
for the full width container so we click on this one click on background up
here and then went to select a background image have already chosen a
background image for this drag it in here and make sure it’s set to full size
and so I definitely recommend our 1400 width image for this and then click insert onto page and
then click Save sure what that looks like there are some other settings we need to change
here, but I just want to show you what this looks like now so if you have a problem
and you’ll know how to fix it so go ahead and click on update the page
now here we go we’ve got this background image here it’s not going across the
full width and then this text is a little bit difficult to read because of
the image that was now put in the background so what we need to do now is to add a background section here and a background around the image might be
nice just to separate from background image and we want to make this image
this background image here full width go ahead and do that now we’re going to
click on Edit page and make that background image full width what we actually wanna do is to change this page template here to 100% width this is gonna make these
containers here go all the way across our page including the background image
that we did for this and then for these sections here to add a background to it
we’re going to adjust the settings for these one third section by using the pen icon
next to a scroll down we’re going to select a background color I’m going to choose white and we want to put some space around this background to the text has got some space
around it will change the padding to 30 pics then the same thing to this 1/3
section here gonna choose Center content vertically change background color to
white gonna put some padding around this let’s make that padding 20 and then
click Save go ahead and go to update to update those
changes we just made. Clicking save on one of these additional items just makes
the save temporarily until you click Update and that saves all the settings
on the page you if you don’t click Update you lose any settings that you’ve made over
here your page now So there we go it’s pretty nice
looking so far let’s keep going with we’ll add some more sections to our page here we
so go ahead and click edit page in essence we don’t want the next section of our
website to have the same background as this full width container. We’re going to add another full width container. Another
way of adding of adding a fullwidth container instead of dragging it down or you can actually just click
fullwidth container and it will automatically going to add it here so let’s try a different element we’re going to try the tagline elements under builder elements click on a
tag line tagline box rather have that in here edited tagline box by clicking here
instead of the default color the tagline box when you use white and make the
border color dark grey so either selected or I’m just going to use the hex code of
a5a5a5 and then we want to set the content alignment to center so that
everything we put inside this box is going to be centered and then we can
this feature comes with a button and add some button text here and then we put in
temporary link here which can be this hash and the button size we’re going to choose large and the button type is going to be flat. Set the shape to square and the button color default again we find is gonna
pull from the settings that we’ve already made a title for our tagline
here and then lets out a description for our tagline and then we could a
description here but actually a description and this text box down here
and then click Save to see what that looks like. Click update. Always remember to click
Update before you leave this page and click view page there we go so we’ve got this fun little box here with more information and a nice little button so lets add some more. Let’s click on edit page. Let’s add some information about our hotel spa and we’re going to do something very similar to the section
right here so we’ll add a new full width container. and we’re going to add a one-third box and a two-third
box and now you can see that one-third and two-thirds get added below our full width
container it’s a good idea to always keep your content inside of a full with
container let’s drag it up into this container here and then ordered them
correctly ok let’s go ahead and drag in a text
block into this one third section and when you use that as a title section and
we actually have two different kinds of titles and that two different styles of titles and click on the text block. Go ahead and drag it down drag it into the 1/3 section here click edit
and then let’s add some text. So the first line of text we’re going to use the h3 tag when a center that and the
second line of text center that also and then we’re going to make this a little bit larger sort of, to give an interesting look to this section here click Save then after that
we’re going to add a separator section below that to separate it from the text. That we’re going to have. Drag that separator
section in right blow there and then click edit. For the style we’ll do a single border. Se the margin top to 30 and the bottom will make 30. For the separator color will use our highlight color. Paste that in right there. And we don’t want
this to go all the way across the so for the separator width we’re going to use 20 and then click save. Then we’re going to add another text block bellow that with a description about this hotel spa go
ahead and enter in text here and click save and now in our 1/3 section lets add a little image of our spa
here and drag the image frame and add that in here we’ll click frame style and make it drop shadow
hover type we’ll just change it a little bit lift up border color we’ll use the a5a5a5 make this border two pix also just to separated from the background scroll
down here choosing an alignment center and image
lightbox no upload the image that we want to use and then we’ll click insert into page. Lets see
what that looks like. Hit update great that looks good. We’re going to add kind
of an interesting section here next e’re going to have images that sort of fill up the entire
width here and we have some content on some texts in the middle so it’s gonna
really make a nice divider for a website here go ahead and do that when click on Edit
page then let’s click on full width container here and add three 1/3 containers and I’m just clicking the
one-third container three times that’s going to automatically added it to the bottom
of our page here and drag that into our full width container and after each one
of these let’s a dd a background to them for the first one third container I’m going to add a
background image and also adjusting the settings here. So I wan to set the column spacing to ‘no’ that means there is no
spacing between the columns. There is not going to be any content in this doesn’t matter and we’re
going to add a background image upload a background image here. I have this romantic
image romantic dinner image here full size and click Insert and a page and we
have a background image in this last section to go ahead and change that spacing to know had a background image
and his last image here on all the other images on the website are images that I’ve
taken actually except for this image here and this beach image and it have a
blog post at real website hints dot com slash free images that show you where you get
free images to use on your website then inserted into the page and then click
Save and it’s this middle section when then giveit a background color and when
I had some text in here we go select color or any sort of selected the color
that I want to use and then one more thing we want to do here is make sure
some spacing around the text in his box to do that we’re going to go
down here to padding change the padding to 40 pixels a lot of nice space around
our texts safe and that’s also make sure that we change this column spacing to
‘no’ that there’s no space between the columns and let’s go ahead and add some
text ok so now its title block this section here. Lets’ go ahead and edit that.
We’re going to use the heading size one and that’s the largest size when I said to text alignment
Center separator to ‘none’ we don’t want a
separator on this. Separator color doesn’t matter just type in romance and here to set that text for that and then we’re going to click on save. now below that let’s add separator item click on this. Click on separator. and then for the style we’re going to add single border margin top we’re going to make forty, margin bottom forty and for this
one separator color to white, click Save Now let’s add one text box below this as you can see the separator shows
nothing here because the separator color was white so should know that’s the
separator was white go ahead and just the text and add some
text in here about romance at our hotel headline this text center by
highlighting it including new line center and let’s change the text color
here so that it stands out from the background really well and when they change it
to white just use the spot here and then said to white now the one thing to know
about this is that when you set your background color to white it’s gonna look
like there’s no texting here because the default background color for the editor
is also white but just know the text is there click Save not quite finished with
it yet but i just want to show you what this looks like right now and then how
we fix it so we’re going to go ahead and click on update whenever you change settings before you
move quick update and click View page here we go obviously it doesn’t look quite right
it’s not going full width here and it’s also these images are kind of got this
sort of high low high low thing going on here so let’s go ahead and fix them to
include on Edit Page and so to change that look we need to edit the full width
container here and changing the settings in there so we need to change the
interior content width to ‘yes’ 100 percent interior content wit to ‘yes’ that
way it goes all the way across the screen we want to set the columns of equal height so
it’s going to force the cards to be equal height so that one text block it larger
than the other ones and then click on Save. We’ll click on Update then lets do view page they’re we go really nice looking section here
so the last thing I’m going to show you the last couple things we have to do is
how to adjust this copyright section in here so that it reflects the information for your company and
then how to add some sort of important and how to some additional content into the footer
area here of your website and also how to set up the menu up here so you got
some different pages that you can link let’s go ahead and do that now so to edit the footer section of our website we go to the dashboard and then we go back to the
Avada theme options and then we click on footer over here and we can just scroll
down here is really nice in this theme that they’ve given us the ability to
adjust the footer really easily. A lot of them other themes really want to have
their name in the footer and make it a little bit to make it difficult for you
to change it you actually have to go in there and and change the code of the
website but fortunately they have it right here so we can change this text
here which our company and there is little bit of code here
this is like the link code here to weren’t present code to the team fusion
website that makes the Avada theme was going to just delete that right now like
this text just how you adjust the footer text there and then click on Save
Changes button to add some content for section or go to appearance widgets and
widgets are or what wordpress uses for predefined areas on your website where
you want the same content to appear over and over again so in this example here
on this theme we’ve got the blog sidebars on her blog page these widgets
are gonna be in there and you can remove them simply by clicking the Delete
button if you choose to remove them we’ve got the footer widget areas here
which is where the content that we can add to the footer we’re gonna be go ahead and
look at he do that now we’ve got one two three and four and is gonna be one
concerning the left to the middle left three middle right and for all in the
right but just know that if you only add content to four or three for example
that this content is gonna slide automatically all the way over to the
left just the way that the CSS code works on websites is gonna just default
to staying under the left so if you don’t feel it all up whatever content
you choose gonna just sort of be on the left there go ahead and add a couple of
content items to this server the widget 1 content let’s add contact information
is just a basic contact information section here and drive phone number number email the link you would use this
section here and then we could have had the website we needed a quick safe close
this up and head for the widget section to look to use this recent works fine
here not gonna show things from the portfolio section of our website and I’m
gonna add some portfolio items because if you put in the images into the
portfolio section it shows up on this recent works and looks really nice but
if we don’t have a portfolio any portfolio items you’re not gonna add
this section that’s my coat and then for area three let’s add are a Twitter
Widget right there and it’s got structions on exactly had do this right
here and the D easiest thing to do is to use the Twitter style and gives you a
little bit of control over that you would need to add in our Twitter widget
I D the instructions on how to do that are on this page right here with this
link and then enter in my tweet widget I D receptors to just one tweet that looks
the best on the home page editor color of the footer is dark and change this to
dark and make the link color and make the link color are default main color
and that late enough to look good there and then have it not show the borders
not sure the footer or header and footer order of the Twitter box when the and to
think that I just looks best for them save can add one more which adhere to
the footer section and that’s gonna be the social links whether mckinney this
social links section here and it’s good show our social media links I don’t have
the links right now but the links for your various different social media
platforms and a half or so we can see what they look like on the bottom there
now let’s look at adding a menu forcing me to do is to add a couple of
pages to some temporary pages here go ahead and do that and I’ll be right back
soon after you’ve added a few pages to your website go ahead and adjust the many so too does
the many we go to appearances menus and then went to do create new menu here I
think we’re already in that set up here in the main menu names will call this
one main menu create menu and then we can add the
pages that we wanted to our menu here so homes that our viewers can easily get
back to the home page and then add these additional pages here and had too many
pretty much that simple and then to order it was going to be left to right
top to bottom so I want the homepage to be first blog page to be second and then
page 123 and as you can see if you drag something to the right little bit make
this a submenu to make this a drop-down item here in this case we don’t want
that would want to leave this like this and then went to add this to the main
navigation area for a website says gonna be aware of the the main navigation of
our website is and that’s gonna be the main title for a website and that’s
going to automatically added there and then you probably do not want to check
this box but this can automatically add new top-level pages this many are so nicely that I checked
and click Save menu and now let’s go ahead in view what our site looks like
here we go now have created a great looking website and I’ll show you how to
use the Aveda theme and you can see just how much power the Aveda team really has
to make your site look great have got more questions about how to use
the Aveda team please go ahead and leave a comment below and we have already
written instructions for this tutorial you can find them at real website his
dot com slash of editorial and be sure to subscribe to my channel for more tips
and tricks and tutorials on how to make building websites as easily as possible
thanks for watching

, , , , , , , , , , , , , , , , , , , ,

Post navigation

61 thoughts on “How to Make a WordPress Website with the Avada Theme v. 4 and Website Design Tutorial

  1. hello, i cannot find the written tutorial you mention is on your website. Please send me a link, thanks 🙂

  2. +Anne Huffman Thanks for reminding me! I wrote it up and then forgot to post it. Here is is!

  3. when i upload my logo for some reason its huge takes up half the screen, i need it small and to the top left corner, what am i doing wrong

  4. Do you have any tips anywhere on how to make an icon with font awesome on the fusion page builder? thanks

  5. thanks for the tutorial, it helps me so much… one quick question how to make bold font on my blog title?

  6. Hi can I ask why some Themes like Genesis and Jupitor need one to set up Child Themes and need immediate plug ins installed, yet this super cool Avada theme which I use is a quick launch pad. That said if there are any updates to Avada can they affect my Site and plug ins, since its not a Child Theme but a Parent. Appreciate your time in responding. Denis Lawlor.

  7. Hi thanks for the info and for getting back to me so soon. Enjoyed your video and will look at more of your content over coming days. Tanks.

  8. We don't have to make a child theme when starting with this theme? Our changes wont be overwritten when we have to upgrade our theme?

  9. Thanks for the great tutorial! One thing I have been trying to find is how to undo setting and similar changes after they are saved and published (and you realize you don't want that change). Is a backup restore the only option? Thank you in advance!

  10. Hello! When you say to make sure the image is optimized before uploading, what exactly do you mean? Great tutorial by the way, very helpful! Thank you. 😀

  11. Hello, thanks for your nice tutorial. Just one question, in my Avada theme options I don't get the stilyng option you mentioned. Do you know how can I get it? Thanks

  12. your tutorial was so awesome about revslider. its always the same
    thing:i cant get full screen slider;there always a white space at the
    top where the menu displays..i tried evreything…removing header
    ..transparency…nothing works..and if i try to move the slider up in
    the CSS it reflects on every pages…can you help me?thanks

  13. Excellent video. I did great following until I came to the footer section. I am trying to ad contact information. I click on the first footer widget but there is no where to drag the contact box from. I am getting old…maybe my eyes are failing me….but I sure don't see it…

  14. Before, anything else let me say that your video is AMAZING!! You were the one that helped me understand how to work with Avada.

    Now I have a small question. After the fusion slider there´s a huge blank space between the Fusion Slider and the Recent posts. How can I reduce it?

  15. Hi, when I go into my home page, I do not have the Fusion Builder button to set things up as you are doing? Has this changed since you created this video do you know? Thanks

  16. Hello, if you need royalty-free music for your next videos (completely free, no strings attached) you can visit my website

  17. Good tutorial. My intuition about this theme was condoned by an online reviewer. So many options that a beginner may get drowned out; particularly if you need blogging iche options vs. a general all round web theme… just my opinion. Thanks

  18. I'm using Avada 4.0.3 and the Appearace Menus are all different from this video (especially Fonts and Styling). Do you have an updated video?

  19. Round about 15:00 you get into colors and those options simply dont exist in v5.0.2. Maybe the heading of your video should say what version you are using ? v5.0.2 only has predefined theme skin, predefined color scheme and primary color. All that stuff about customising and about buttons aint there buddy.

  20. Based on the number of views you have on this video, you've probably saved your viewers 100,000 hours! As you suggested, I think installing their demos and then editing could become an overwhelming amount of work. Rather than installing WP locally (I watched that video too) to install the Avada demo themes, is there any way to look under the hood of those demos to see how things were done and then simply implementing them on my site?

  21. it seems like the start has changed a lot when going through styling and fonts etc as there updates have moved everything around

  22. a small question: i have established a blog but i want to re-edit it using avada, i have bought the theme and i am wondering if i can still edit and see changes if i disable the blog from people" currently under maintenance plugin" can i still view what my blog will look like after doing all the changes? because i am going to change everything thats why i want the blog to not be viewed by people for a while

  23. also one other question, i want to add an instagram feed in my home page, can i also add that, or can i only add a twitter feed in the home page? because i saw a theme in avada that allowes instagram feed to be shown

  24. Hi Tim, Happy New Year. Great tutorial here as always but have you made an updated version of the Avada tutorial since this one or is this now the latest version? Previously I think you said you were holding out to do the Avada update until they updated their theme later in 2016.

  25. You sir have earned a subscriber within first couple of mins, I have watched so many tutorials for Avada nobody taught how to change the colours globally.
    Thanks alot
    And very kind of you to put an index in the description 🙂

    Update : I cant find the STYLING tab in Avada 5.0.6 🙁

  26. Terrific job on these Avada videos. You get to the point and move with pace but not too fast that you can't follow along. A lot of tutorial authors could take some lessons from you on making a succinct video packed with useable information. THANKS TIM!!

  27. I really enjoyed your tutorial. You have a very clear voice and diction that makes watching the video a treat. Thanks!

  28. You should explain what the different options means and how will they change the appearance…example you are saying from here we can change xyz header but you should explain what this header is…becuase even I can see these options but need to know what they mean

  29. Hello Real Website Hints,
    May I get your advice on something? Do you know what is the best email subscription or newsletter subscription plugin to get for the wordpress avada theme? Thanks in advance!

  30. Hay i have a chap installing the avada theme from fiverr in india
    and he is having what he calls font cache issues is there such a thing

    and if so is it easy fixed ?
    my web hosters say all is well at their end is the site

    look forward to you reply

    appreciate your time

    warmly Johannes

  31. thanks for the video, I have a problem with Avada , when I create item and add content to that , the content (ex :text box) appears on the home page screen on top of my slider, how can I change it , and make sure it only appears when we enter the new page

  32. Get the avada theme

Leave a Reply

Your email address will not be published. Required fields are marked *