Create a Website – Restaurant and Cafe – 2018 WordPress Avada Theme

Create a Website – Restaurant and Cafe – 2018 WordPress Avada Theme

September 9, 2019 52 By Bernardo Ryan


Welcome everyone. In this video, I’ll show
you how to make a wordpress website using the Avada WordPress theme for
your cafe or restaurant. It looks absolutely amazing. It’s really, really
easy to make your own website using this theme. And I’m going to show you
step-by-step how to set everything up. So here’s a quick demo of what it looks
like, and I’ll be showing you how to customize any of these pages that you
see here as well. And there is your food and drinks menu,
which can of course be customized in any way you want. And I’ll show you
step-by-step how to create your own. Just quickly, while we’re here, here is what
the website looks like on a mobile phone as well. As you just saw, it is responsive,
which means it adapts to the screen of your mobile phone automatically, and that
is absolutely amazing people that are on the go and looking for a place to eat. Look at that. It’s absolutely easy use.
They can tap on the phone number, give you a call and eat at your restaurant.
There’s how the menu looks on a mobile as well. So here we go. Here’s a quick overview of what we’ll cover.
For those of you who need to get online, there’s a 10 to 15-minute segment
on how to do that. So it involves acquiring your own dotcom domain name, and also
acquiring webhosting, which are two absolute essentials when it comes to
setting up a website. They are two things you can’t do without. Now if you already have that
covered, skip that section and go to Set Up a Website. Just look in the description below,
and you’ll see the link that you need to click on to jump directly to that Setup
Website section if that’s you. So here’s an overview of what we need to cover. Setting up and running this website will
cost about $10 a month as opposed to paying web developers more than $5,000 or
$6,000 to set everything up for you and design a website from scratch. You
probably wouldn’t even get the same result you’re getting here even with that
much money. So don’t underestimate the value that you get with WordPress, and
that you get with this Avada Design that I showed you. It’s absolutely amazing.
It allows you to do some amazing things. The first thing that I’ll ask you to do is
click on the link in the description below that will take you to domain and hosting.
There’s a link there. Click on that. Okay. Now this is the page you land on. It’s
the Hostgator web site, and I’ve been using his company for nearly 10 years
for all of my websites including eCommerce stores, business websites and also blogs.
So I’m going to be using my Hostgator account for the rest of the tutorial. So
if you want to follow along step-by-step, then I’d recommend you sign up with
Hostgator as well. But having said that, you’re free to sign up with any other
hosts you want, but just be careful because you might not be able to follow
everything that I do step-by-step. So I really recommend these guys. They’ve got
fantastic 24/7 support over a toll-free number or live chat. And if you’ve used a
link in the description below to get to this site, you’ll automatically get the
best price possible. And, you’ll see that discount, but if not I’ll show you how to
get a better discount in the next screen. There are two types of hosting offers
available – web hosting and WordPress hosting. I use a normal web hosting and
it’s also the cheaper option. I know we’re going to be installing and
operating a WordPress site, but that doesn’t mean you need WordPress hosting.
But if you really want that, you can go and read about that in your own time. It
is more expensive. All we need is regular web hosting. So I’ll click on that. Let’s go down to
choose a plan. There are three available. The one you are probably going to use is
the cheapest one here, the Hatchling plan. It allows you to host one website. If you
have more than one website, down the track, you can always upgrade to a Baby
plan, which allows unlimited websites. And the Business plan, you just don’t need.
There’s stuff in there that’s pretty much irrelevant for most of you. So just click on the Sign
Up for the Hatchling plan, which is the cheapest as well. So that’s good. In this field here, register a new domain. So your new domain that
you already own. If you already have one from elsewhere, just into that domain in this
field. Also keep in mind that you’ll need to point your domain to your
hosting after you do this. That can be done by going to your domain account and
changing something called the Domain Name Server. Otherwise, your site won’t
load. But for the rest of you, you probably need to register a brand new domain. This
will be your dotcom domain that you want to own. For purposes of this demo, I
might register something called cafethemedemos.com. When I say dotcom,
that’s a personal preference that I have. I’ve seen plenty of websites that
use dotnet, dotbiz, dotinfo. Look. It really does not matter for the
rest of the tutorial which one you choose. It’s exactly the same steps
regardless of which one of these extensions you choose. But for me, I’ll be
choosing a dotcom. Okay. So that will automatically check if your chosen
domain is available, and then add it to your shopping cart. So then, scroll down. Billing cycle. Let me just show you a
couple of things. I’ll show you how to get a better discount. If you want to
sign up for just one month and try things out and then set up your website and
then continue with low risk, then I’ll show you a really cool coupon to use in a sec.
For now, let’s enter a username and a pin, and just skip all these for the time
being. Go to Additional Services, and deselect
anything that pops up because to be honest. you don’t need these. They’re not absolutely
essential. I don’t use them myself, so there’s no reason you need to either. Then, go down. You’ll see a section for a
coupon code. Firstly, just take note of the amount due. Now if you’re signing up for one month, use a coupon called 1DIRTYCENT, then hit
the Validate button. And, you’ll notice that the amount due is less, and you’ll get the first month
for just one cent. Alternatively, if you want to subscribe for more than a month
and just like anything else, the longer you subscribe for, the cheaper it gets. I
typically sign up for twelve months. So if I click on that, and then go back down,
then use a coupon called EMEDIACOACH. Check to amount due. Just click Validate,
and you’ll always see that the amount due is now lower than it previously was.
So do take advantage of those coupons depending on which time frame you want
to subscribe for. Now once you’ve done that, just got back up and all you need
to do is fill in your billing details, and then process your order by credit
card or PayPal. Make sure your email address here is accurate because Hostgator will be sending you an email
with all of your details. I’ll show you what to do with that in the next
step. So I’ll just blur my screen here while I fill in all of my personal
details. I’ll just sign up by credit card. Okay. Once, all that’s done. Just scroll down. You’ll see a check box at the bottom just asking you to agree to the Terms
and Conditions. It’s all generic stuff, and then click Checkout, and I’ll show
you what to do in the next step. Basically, this is all you need to do to
secure your domain and your webhosting, which are the two essentials to running your
website. I may receive credits from Hostgator from time to time, and that
basically helps me cover the costs of making these tutorials. So I really do
appreciate your support. Click Checkout and I’ll show you the
next screen. You should receive an email from Hostgator in the next five minutes. You should get something like this from
Hostgator about five to ten minutes after you complete your order. It has your
details such as your Username, the domain which you registered, and the password.
This user name and password relate to this control panel link over
here. I’ll show you that in just a second. But before I do that, there are two important
bits of information here. If you purchased your domain from somewhere
other than Hostgator, and they are your name servers. So say for example you
purchased your domain at GoDaddy, or Namecheap, all you need to do is login to
your domain account and update these nameservers, so that your domain knows to
point to this particular hosting account that you’ve purchased. But for the rest of
you who have purchased your domain from Hostgator as well, that doesn’t matter. So
the next step to do is basically log into your control panel using the
username and password given in this email. So I’ll just opened this up in a new
window, and then just copy and paste the username and password. Just make sure there are no spaces
before and after, and then login. This is called your cPanel, your hosting
cPanel. What we need to do now is install WordPress. If you just go down the page,
you should see the section called Quick Install. So click on that. WordPress should be displayed either in
the sidebar or in a panel over here. So if you head to that section, you’ll see a few
paid options which you don’t need. Don’t worry about that. What we need to do is
install the free version of WordPress. So yes, install WordPress for free. Let’s click
on that. This area here should pre-populated with your domain. If it
doesn’t do that, just select your domain from the drop down below and that
probably means that you have a hosting account with multiple domains. So don’t
forget to add that domain as an add-on domain in your cPanel, then you’ll be
able to select it from this field here if it doesn’t already exist. Leave this field empty. Choose an admin
email and something that you can easily access because you may receive
information or updates from WordPress. Give your website a title, which is
probably your business name. For admin user, this is your admin username, and
then go down and install WordPress. You’ll see at the top there’ll be a bar to show the
status of your installation. Cool. So WordPress has been installed, and the URL for your
WordPress dashboard, and this is a very important URL, it’s yourwebsite/wp-admin.
So if you just right click that and open that in a new window, it
actually takes maybe up to 20 minutes to half an hour for this to become
active when you install it for the first time. So if it doesn’t load off straight
away, just be patient and refresh this page after about 20 minutes or half an
hour, clear your website cache, and then it should
load up. So I’m going to wait here, and then come back in a little bit. Okay. Let’s try that again by refreshing
the page. Okay. Cool. It’s working now. It took for me about 20 minutes for that to activate.
So it may take longer for you. If it doesn’t work, just get in touch with me
via emediacoach.com/help for help. So if you load that page up, you’ll
see it in just a sec, there is a form where you can fill out and submit.
It will come straight to my staff where we can help you out. Otherwise, there is a
troubleshooting FAQs, and you might be able to find the answer you need here. So
maybe just connect … maybe you bought your domain somewhere else, and it may be to connect
your domain and hosting. Have a look at this page or get in touch with me if
your website still doesn’t load, if you can’t see this page within about half an
hour. Okay. So in this field here, just enter the username and password given to you
when you installed WordPress. So I’ll just copy and paste mine in. If you’re getting a page that isn’t
redirecting after that, just hold down CTRL and F5, and that will give your
site a hard refresh. So as you can see, there is stuff on your
domain already. So now let me just go back and access our Admin Control panel –
wp-admin, and just try to login again. It should work this time. There we go. This is
known as your WordPress Control Panel, and it’s the screen that you’ll be using
to manage your entire restaurant or cafe website. If you haven’t been able to get
to this step, just get in touch with me at emediacoach.com/help,
and we’ll be able to get you up and running pretty quickly. The very first thing I recommend you do
when you login is change your password because you’re never going to be able to
remember this one here. So to do that, if you go down to the User’s Area and click
on the All Users link. Click on your username, and then if you scroll down, you should
be able to see an area to generate a new password. You can use a strong password
like this suggestion they give you, or just enter any other password you like,
and then just tick this box to confirm. Then, click on the Update Profile button.
And, now that login replaces this password here. So please do write that
information down – your WordPress Control Panel URL, yoursite/wp-admin; your
username; and your new password. Write those three pieces of information down
because they’re really, really handy. Next, I’d like you to go and delete any
default plugins that have been installed with your installation of WordPress. So
if you go to the Plugins area, and then click on Install Plugins, you’ll see that
there are a few plugins here which there as default. Just check this check box over
here. It’ll actually select everything in the list, and then click on Bulk Actions,
Deactivate, and Apply. We want to deactivate all of them first. Now do the
same, and I want you to delete all of them. To be honest, we don’t need them.
They just take up unnecessary space, and it’s a bit of a clutter. So, yep. Delete these
files and data. Okay. Good stuff. Next we want to install the awesome
WordPress theme, the Avada WordPress theme that we’ll be using as the design
for our cafe and restaurant website. So if you go to your URL at the moment, you
will see that it looks something like this, something very plain. What we want to do
is acquire the design that will replace the entire look and feel, and manage
the whole design aspect of your new website. So to do that, just look at the
description below, and you’ll see a link to a design theme. It’s a Theme Forest
link. Just click on that. It should take you to this page here – the Avaya Responsive, which means
mobile-friendly, Multi-purpose Theme. You can read all about it if you want to.
Basically, all you need to do is add that to your shopping cart. It’s at $59, which is
absolutely nothing compared to the thousands of bucks that you’ll be paying
to your web developers if you got them to make something as awesome as this
particular theme here. So you can go to check out, and it’s pretty
straightforward. Once you go to check out, it will ask you to sign up for an
account with Envato, and you can pay with credit card and PayPal, I believe. So
I’ve already bought this, so I won’t show you the person to do that. It should be
pretty straightforward. Just follow it all the way through. Once you do that,
I’ll just log in with my Envato account. It’ll reload with this screen here. And if you
go to your account, just hover over that. Go to downloads, and you’ll see the Avada
Theme ready for download in this area over here. So click on the download
button. What you’ll see is the option to download multiple different types of
files. You can download all files and documentation, which gives you the entire
package and all the documentation associated with it, Otherwise, you can
install or download the installable WordPress file only. So what I’m going to
do here now is just download this installable WordPress file. So save that
somewhere on your computer where you can access very easily. I’ll save on my desktop. Okay. So once that’s downloaded, I can actually close
this now. Back into your WordPress dashboard, in
Appearance, click on Themes, and then click on Add New, Upload, and Browse. So now just
find that file that you downloaded. It’s the installable theme file. Just double
click on that, and click on Install Now. And this installation, actually uploads that
whole file to your WordPress installation. So it might take up to
about five minutes or maybe more. So I won’t actually cut this out of my video.
I’ll show how long it’s taking for me as well. So you know that this actually
takes a while. But be patient, and you’ll see what to do next. There we go. When that’s all done, you’ll
see a link for Activate. So activate the theme, and that’s all done. So if you
visit your webpage now, this is pretty much what it will look like. So as you
can see, we’ve acquired the design and we’ve installed and activated that. Next,
I’m going to show you something that’s really cool, and that is going to make
your life very easy setting up this website. We’re going to import a
bunch of demo content automatically. I’ll show you that now. Okay. Now we’ll be importing some demo
content, which will really help you set up this site very, very quickly. I’ll show
you exactly what to do, so just follow everything that I do. I’ll go through it
very slowly, so we get this right. It’s important to get this step right. Back
into your dashboard area, if you go to Plugins, Avada … under the Avada tab, go to
Plugins. You’ll see here there are a bunch of different plugins, and they’re all
waiting to be installed. I need you to install each and every one of these
one-by-one. So let’s go ahead and do that. Some of these are quick, and some take a
bit of time. So be patient. This one takes a bit of time. Okay. So now all of these plugins have been
installed and activated. If you go to the Plugin’s area, Install Plugins, you
should see all of them there. There they are. The next thing I need you to do is
go to Plugins, and Add New. We want to add a new plugin. By the way, a plugin is
basically an add-on feature for your website. So as you saw there, there are
plugins for different things such as a Contact Form, WooCommerce, which is an
eCommerce platform, which you probably won’t need. But anyway, there are plugins
for a lot of different things. I need you to install or search a new plugin called
All In One WP Migration. It’s this one here by ServMask. Just install that
one and activate it as well. Okay. Now if you click on the link in the
description below, there will be a link to something called the Demo Import, and
it is a URL. I’ll show it to you here. It’s this URL here. So just click on that. It will take you
to this page. What I need to do is scroll down and find the Cafe Demo link. So
download that one there, and save that onto your computer somewhere because
we’re going to be uploading that somewhere in just a second. Okay. That’s all downloaded. Now go back into
your WordPress dashboard, and go to this All-in-One Migration plugin that we just
downloaded, and click on Import. Click on this box here, Import From. We want to
import from a file, and it will be the file that we just downloaded the Cafe
file. So it’s this one here, Cafe, and wait until that imports; in other
words, uploads into your WordPress website. What it will do is actually
import the entire demo and the demo contents immediately to your website.
It’s pretty cool. You’ll see it in a second. Okay. Once that’s done, you should see the screen here that the
import process will overwrite your database. Just click on Continue, and you should receive this successful notification. Don’t worry about all of this. Just close that
notification. Now if you attempt to go anywhere on your dashboard, so say for
example, the Home Dashboard. It will give you a notification that the database
requires updating. So we need to do that. Just upgrade your WordPress database. Yes. Continue. Okay. That will log you out. The reason being that import process
actually replaced the username and password in your login database. So now
you’re new username is admin, and your password is also admin, admin and admin.
So type that in, and then click Login. It should let you back into your
dashboard. First thing to do, go back into the user’s area. Click on
All Users, go to your username. That import has overridden the email address,
contact info, so make sure you change that. Then, generate your password, and just
give it your custom password; whatever you want your password to be. Tick that Confirm
box, and update the profile. There you go. You’ve got your login details back to how it was before the import.
Dismiss any of these notices, and believe it or not, you’re done. So if I now open
my website, you’ll see it’s looking like the Avada Theme demo. It basically is the
theme demo because we’ve updated or … sorry, I should say we’ve imported this
entire demo onto your website. So now what we’re going to do is start manipulating and changing the way or
different panels that you want. Maybe you want some to exist, maybe you don’t. We’ll
do that a little bit later, so just follow me. At the moment, you should be
able to see this. If you’re having any problems, just get in touch via my
website – emediacoach.com, and I’ll try to help you out the best that I can. Before you go any further, I’d like you
to update some basic settings. Firstly, if you go under the Settings tab and go to
General, you’ll see that you can update the site title. So you can name that
whatever you want; probably your business name, or the name of your
restaurant or cafe, and just remove the tagline. Next, you’ll see here that in
these two fields, there’s no www before your domain. Now this is just a personal
preference of mine. I’ll show you. So if I go to my website and add www dot, you’ll see that it
automatically retracks back to without the WWW. So what I like to do is just add it in
there just before the domain like I’m doing there, and you need to do in both
fields. Just be careful that you’ve done that correctly, and then go down and click
Save Changes. That will log you out, and that’s because
that change you just made will automatically trigger you to log out and log back in
again. So just log back in. If you go back under Settings and General, I’d
recommend you to update your email address in this field here as well, and
then Save Changes. Okay. The next setting I would advise you to
do is go to Permalinks over here. You’ll see by default there is a URL structure
that is selected here that will be your domain forward slash the year month and
day that any post is made. That’s not ideal because for example say you have
a post on your menu, then your menu post will take on this format rather than
forward slash menu, which is ideal. So go and select the postname structure. That’s
ideal because it’s easier for search engines to identify what your page is about, and
it’s also most importantly easier for your users. So go and select that, postname and just save changes. Okay.
That’s about it. You’ll see that if you go to Pages and All Pages that there are
a few pages that are created by default when you imported your demo. Now I recommend you
not to delete them immediately because there’s a chance that you’ll need them
later on. I’m actually going to use these default pages, and adjust and
change them, so it’s much easier to set up the site. So I recommend you leave
these as is for the time being. After you’re finished, then maybe you can
delete any pages that you don’t want. Okay. So we’re only about 25 minutes into
this tutorial, and your website already looks as awesome as mine does here. So
what do we do next? Let me show you a couple of different
color schemes that you have to choose from. So if you just go back into your
Dashboard, and go down to Appearance, and you’ll see a section for Theme Options.
Now it’s completely up to you how you want to set up the site as far as the
theme of the color scheme goes. I’ll just show you how to do that. So there should be a
section in here called Styling. There it is. You can choose from a dark skin or a light
skin. So let’s check out what the light one looks like. You’ll see in just a
second. So just by changing that configuration there,
if you refresh your website, that’s what it now looks like. It’s applied a
light skin to your website immediately. You might have to go in and change a
few things, but that’s a bit later on down the track. So first things first,
decide if you want a light skin or a dark skin. Okay. Now regardless of what you
choose, there are other predefined color schemes which will affect other elements
such as the text of your menu, some buttons, and I’ll show you that. So if I go back to
the dark skin and I choose say for example blue. So there you go. As you can see, the color
scheme here is now blue and so is the button, etcetera, etcetera. I’m going to
stick with the default because I just prefer that, I guess. The brown. Okay. There
are other options you can also look at in your own time. I won’t go through all
of that now, but there are a multitude of things that you can select from. So you
can absolutely customize anything that you’re looking at, really. It just depends on what
you want to achieve. Next, I’ll also show you how to change the menu bar locations. So
that’s this bar over here. So right now, it’s on the left-hand side. If you wanted to change
the position of that, just go to … in the same section – Appearance and Theme Options, go
to header. Let’s have a look at the header content options. This header
position over here, left, this is the key. If you select say for
example Top, and save that … There you go. That’s the new layout for your
website. So have a play around. It’s absolutely
your personal preference. It just depends on what you like, I guess. You can choose
from top, left, and right. I’ll leave it as default for now. So you really can see
the power of this theme in the design and how everything is configured in such
a way where you can easily make changes when you like. If you have any questions about anything
by the way, just ask me in the comments below, and I’ll help you out. Next I’ll start showing you how you can manage the homepage
of your WordPress website. So the first thing I’ll show you is if you go
back into your dashboard, just go to … go down the page and go to Settings, and
Reading. Just make sure that the static page is selected, and the one selected is
home. Now if you go to Pages and All Pages, you’ll see all the default pages
all set up over here. This is where you can access or edit any one of the pages
you look at on your website, or you can add new ones whenever you like. But as a
first check, just make sure that your homepage is set up as your front page. Now before you start making changes to
your homepage, there’s a precautionary step that I would like you
to take. It’s completely optional. You can listen to my advice or you don’t
have to. That’s absolutely your choice. but what I
tend to do is in pages, if you go to All Pages, this homepage here, if you click
on the Fusion Page Builder link over there, every page is set up using a
specific layout and template. What this is, is called the Fusion Page
Builder. You can basically drag and drop containers from here onto your page, and
I’ll show you a bit of that a little bit later, and then add different elements. Say for example, a
Google Map, or a title, or some social links. You can add any one of these
modules inside this area here. So it’s a nice drag-and-drop interface. But what
this homepage is, it’s basically a template that came default when you
imported your demo content. So what I would like you to do is actually go to
the custom templates, and save this layout as a template. Call it something like homepage backup.
The only reason I would advise you to do this is because if you start
mucking around with your homepage and you start deleting things and changing things
around and you want to know how to set things up just as they look before, at
least you’ve got to homepage backup ready to go. So if you ever needed to
see, okay, this area here, which corresponds to here, A New Way of Eating,
you’ve got the pictures and you’ve got the text and separators in between. Okay. So you needed to
know how to set that up. What you could do is just add a new page. Just a
temporary page. You can now go to your Fusion Page Builder. You can go to Custom
Templates, and you can load this homepage backup template exactly how it was
when you saved it. Okay. So you can come here. Okay. What I need is a full-width
container. I need a two-third block. I need to add a title. If you click on the Edit
button, this is what the TextBlock had previously. If I click on this edit
button, this is how this is set up. So you’ve got all that as a reference point
in the future if you need it. So that’s why I advise you to save your homepage
layout as a template. In the future, any other layout, say for your About page,
or your Menu page, if you want, just go ahead and save each one of these as a
template, so that you’ve got them ready on the site if you ever need them in the
future. Let me show you how you can customize
and manage this panel you’re looking at over here. So back into your WordPress
dashboard, have this is set up on each one of your pages. So even if you go to any
other page, you’ll see a panel with a picture. So the way that is setup is it’s
actually a slider. So if you go down to the Fusion Slide Area, and click on Add
or Edit sliders. Click on the relevant slider. So in this example, home, you’ll
see that all the settings there can be changed. So at the moment this is
actually a full-screen slider. So that’s checked. If I uncheck that, it will
actually take this slider height into consideration. So let’s make that, say 450
pixels. Let’s see what that looks like. There we go. It’s not a full screen
slider anymore. It’s just got a fixed height. So that’s up to you. Depends on
your taste and what you want back into the home slider. I might just
keep that checked for now. Parallax Scrolling Effect, you can remove
that. What will happen is this image won’t remain still as you scroll. All
these other settings take effect when you add a new slide. I’ll show you that now,
actually. So if I just click update for now. Okay. So now, we’re still in the slider area. If
I go to Add or Edit slides, I can add new slides. But the way to see which slides
are associated with a particular slider, just click on a number beside it. So I’ll click on this number one. There’s one
slide associated with the homepage slider, and it’s this one here. That’s the image. So what I’m going to
do now, I’ll just go back. I’ll add a new slide to this area. Let’s call it Home
Slider 2. What you can do, I’ll actually recommend this to you, if you
open the slides in a new tab. So I’ll go back to the homepage slider, the one that
already exists. I’m going to take the exact same settings and put it in the new slider
that I created. So image, center, heading area, and this is the logo that appears.
This logo over here. I’ll show you how to update that in a second. For now, I’ll just
copy and paste that in. Okay. Heading background, No. Caption background, No.
Obviously, you can change all of this if you like. I’m just going to use the
default settings, and I’ll remove all the button stuff. I don’t want a button on
there at the moment. This actually allows you to import a click of a button on your
homepage. So actually, I’ll show you that just as an example. View Menu, and I’ll just take this here.
You can put a URL in there, right in between the speech marks button link. So
speech mark, URL, another speech mark. I’ll show you that again. So I’ve
just put it right in between those speech marks and pasted whatever URL
you want the button to show. Okay. Make sure you assign this to the relevant
slider. In this case, home, and then select a feature image. This is called your
Media Library. So any images that you upload will be stored into your media
library, and you can tap into that at any time. You can upload files from your
computer. So let me try and upload something. Alright. Maybe, I’ll use this as
an example. It will upload into your media library. There
we go. And then once that’s selected, Set Featured Image. Now, Publish. So make
sure you’ve done all of that. Just to recap – select the relevant slider,
Feature Image, Publish. Now that that’s done and we’ve added to the home slider,
if I refresh this page, there we go. Obviously, we need a bit of careful
selection with the image that’s been used, but that’s a perfect example. We’ve
got the button link over here. After X number of seconds, it will change.
You can manage that back into your sliders. So now I’ll go back into the
sliders area. So we’ll choose the home slider, and these options here – do you want to
display navigation arrows left and right, Yes or No. The pagination circle, Yes or No. Do you want
the slides to autoplay, Yes. I want the slides to loop. I want them to slide,
not fade. The speed, this is in milliseconds or microseconds. So changing
this to 5 means that it will transition every five seconds. So I’ll update that, and then just
refresh my slider. Now let’s wait to see what happens. There you go. There’s the slide transition.
If you ever wanted to change this image, easily done. You just need to go back into
slides and update the featured image. While I’m here, I’ll also show you how to
update this little logo. So go back into your slides. Now let’s take your home slider as an
example. It’s this area here. So this relates to that image. If you go to
this URL, it’s actually that image. So I’ll just show you what I mean. So what we need to do now is add a new logo,
or I’ll show you how you can do that. So if I open the Media Library, so you hover over
Media, I’ll just open it in a new tab. Add New. You can drag and drop things from your
computer as well. So let me just select. I’ll go and find a logo sample, which
I’ve got ready here. So that will upload into your media library. That’s all done. So now
as you click that, you’ll see that each image has a URL associated with it. So
just highlight this URL, the entire URL. Copy, go back to this section here. Now
leave the speech marks intact. Just start with the HTTP, and end right
before the next speech marks. So I’ll delete that, and now paste the new URL in there, and
then Update. Now keep in mind this is only for one slide. So you’ll need to do
it for the next slide as well, otherwise both slides will have a different logo.
So if I go back to my sliders, and the home sliders or slides, and slider 2. So I just need to paste all of that in
here, and update. Now I will just refresh the homepage. There you go. There’s our new logo.
If you have any questions about that process, please do ask me in the comments
below. Now you probably want to know how to edit all of the stuff you’re looking at on
the pages. So let’s start with the homepage. How do you edit all of this stuff? How do
you change the text? How to change the images? So if you go back to your
dashboard, and go to Pages, All Pages, click on the page you want to edit. In the Fusion area of the site, you’ll
see that all of these elements correlate to what’s showing on your website. So A New
Way of Eating. That’s that over here. If I click the edit button, you’ll see here in
A New Way of Eating, is a header 2. This is a header 4. What you can do if you like
the look of this, you can actually just go in and edit that. I’ll get to adding new
stuff in the next section of this tutorial, and then Save, and then you’ll see an
update button on the right-hand side. That updates any changes that you’ve made
to this page. Once you do that, you can reload your website. You’ll see the
change take effect. There you go. You can also edit existing pictures. So
say this chair over here. You want to edit the look of that. Now this section here
correlates to this panel over here, the one-third. So if I click on the Edit
button, you’ll see that if you scroll down, there is a background image. What
you need to do is either remove or edit. So what I’ll do, I’ll edit. I’ll actually upload some images that I have
on my computer. I’ll actually upload them all in one hit, so I don’t upload again. Okay. So once you’ve selected the image
that you want to replace any panel with, just select it from your Media Library
like you saw me do. Insert into page, and then save. Similarly, say you want to
change this image down here, all you need to do is go down and find what section that
relates to, so that is these full-width containers just above New Store Opened.
So that’s New Store Opened, it’s these ones here. So if I edit that element, and I
go down and edit the picture, let’s try that. Save. Don’t forget to publish or
update your page. Now refresh the site. Let’s check that out. There
you go. Obviously, the picture I’ve selected isn’t of good quality. It’s a bit too small for this
particular screen here. So it all depends on the
images you choose as well. Okay. So that’s a brief overview of how to
edit different sections that you’ve already like. So say here, No Reservations. You can edit the text over here. Now this
text is white because that’s just the color of it. If you ever see that, you’re
the Visual tab. Just go to the Text tab. This is the HTML part of the screen, but
don’t be concerned. Just get where the text actually starts, to where it ends. That’s right there, and don’t edit any of
the other code like that right-hand side or left-hand side indicator. You can
delete that, and just type in anything you want. When you’ve done that, you can save, update
the page, and that will take effect on the front end. So there’s a brief
overview of how to edit sections that you already like. So you don’t need to do
too much work. Now if you want to delete an element, say you don’t like these
sections over here. So these images or this text here. Say you think
it’s too much mess. You want to get rid of it, and also you want to get rid of this
logo here, just say for example. All you need to do is go back, find the section
that relates to that element. So in this case, it’s these panels, and just click
the Delete button. And then, I’ll delete the container itself. So now I go to the page, you see that all
that stuff has disappeared. You can do the same for any other panels
that you don’t like. It’s as easy as that. Now say you really like this section
here, Call To Book, and you want to duplicate that and put a section similar
to that under here. What you can easily do, try and find the Call To Book section,
this entire container. You can press the Clone Element button. So there we go.
We’ve cloned that. Now drag and drop that to to wherever you want that to appear. This can be a
little bit fiddly at times. That worked. So we’ve done that. We’ve
cloned that element. All the settings have been cloned. So at the moment, it will
look identical to this. What we want is to change perhaps the image, the text. So
let’s do that. Save. To change the background image, it’s
in this full-width container, the … container. Under the background tab, you can
edit, and add a new image. So let’s say this one here. Now just update this page. There we go. We’ve added that new panel, and
it’s starting to look really, really cool. So that’s one great option of editing
any of the pages on your site. Next, I’ll show you how to add new elements, an easy way
to add new elements. In fact, I don’t think anyone else has ever taught this
method. So it’s a really, really good method for beginners; that’s what I found
from the people that I’ve taught in the past. Next, let’s discuss this food and drink area of the site. So you won’t be able to
edit your menu similar to how I’ve showed you before. We can actually edit what’s
already there, or we can add new modules if need be. So if I go back into the
dashboard and I go to Pages, and All Pages, Food and Drink; here it is. Okay. So I can see here that this container
over here, Starters, all relates to this section of
the site, as well as Main Course over here, relates to this container over here. So what I can
easily do, and I recommend you do as well, if you like the structure of this,
then just go in and start editing. So it’s the easiest way to do things. So say I’ll edit
that. You can edit the description as well if you like. It’s really as easy as that. If you need
to add more stuff, what I recommend you do is just clone an
existing element. So clone that, and clone a separator. And then, move it into position,
and then of course start editing. There we go, and then start editing. So you can edit the
image here like I showed you earlier in this tutorial. That image there is related to this
container here. If you click the edit element button, and so on and so forth. It’s really, really simple. Say this
Drinks area, you don’t like that and you want to bring the same format as all the
other areas over here. All you really need to do is say I wanted it in
this color, Desserts. All you need to do is come in, and then click on this clone element button
because that will close everything within this box as well as that box
itself. Drag it into place, and start editing. Then say you don’t want these
areas down here, it’s too much clutter. Just get rid of them, or get rid of that
whole section there. I’ll get rid of that section there. I’ll get rid of that. There we are. If you want to change the name of your
page, so say you want to call it your Menu, just do that. You can also change
the hyperlink here, but just keep in mind, and then click Okay. You should see that change in your
navigation. Actually, your navigation is controlled
separately. I’ll show you that a little bit later. If you have any questions about arranging your menu page,
please do let me know and I will definitely help you out. It’s really,
really easy. You’ll probably want to change the logo
over here. To do that, go back into your dashboard and into Appearance, and
Theme Options. Just click on the logo tab, and all you
basically need to do is upload your new logo into your media library, and then
select it to be your default logo, which will appear over here. There’s also an
option here where you can upload a retina version of your logo, which will
be as stated here, it should be exactly twice the size of an original logo. A retina logo is great
for mobile devices because they have really high quality screens. You can also
control the width and the height of the logo. It’s completely customizable. It’s up to
you how you want to set that up, and how you want it to look. There are a few other
options here, but if you have any questions about that, just let me know
and we’ll go from there. Next, I’ll show you how you can add new
pages very easily and maintain the look and feel of the other pages on your site.
For an example, say I want to add a new page that has a similar structure to
the About Us page, so I’ll add that one. I want to add another page that has
a similar structure to the Food and Drink page, so maybe a secondary menu,
maybe a lunch menu, and a dinner menu. So I want to create two new pages that have
similar structure to these two pages, the best way that I advise you to do
that is let’s take one for example. Let’s take the About Us. So I’ll go back into
the dashboard. I’ll go to Pages, and I’ll go to the About Us page. In the Fusion
Builder, what I recommend you to do is to add this About Us page as a template. So
save it as a custom template. That’s just over here, Custom Template. So I want to save
this layer as a template. Okay. So that’s done. Similarly, I want to save the
other page that I want to make. So I think that was the Menu page … as a
template as well. Alrighty. So they are now saved. What I can
do now is just go to Pages, and then I can add a new page. You can add as many
new pages as you want on your website. Its unlimited. Let’s call this one
More Information. What I can do is go to the Fusion Page Builder, go to Custom
Templates, and now I can load one of the templates that I saved. So say I want to
load the About Us template into this new page called More Information. Make sure you choose 100%
width as well, and then Publish. So now all of a sudden, you’ve got a
brand new page that looks pretty much exactly like the About Us page because
you’ve loaded its layout. You can add or edit the slider area over here in the
same way I taught you before. Just go to Fusion Slider. You can add a new slider, then add
slides to that slider, and set all of that up. Go back to the Slider section
if you’re unsure. What you can basically do is now you can edit all of the panels
in here, or delete or update the images, etcetera, etcetera to make it look exactly how
you want your new page to look. It’s really that simple. It’s the same process
repeated all over again that I showed you a few minutes back where you just
take existing panels, and then update the content within those areas. Very, very
straightforward. Same thing for example, for Food and Drink. So you create another
page. You want to add a new page for say a dinner menu. All you need to do is of course go
to the custom templates, load the menu layout, select 100% width, and then you
can come in here, and then manage the entire page. It will be in the same
structure as the other menu page that you have. So that’s absolutely perfect.
It’s really streamlined. It’s efficient. It doesn’t waste any time. Next up, I want to show you how to manage this navigation
area over here. You can actually customize this any way you want. Back into your dashboard, if you hover over
Appearance, and then click on Menus, you see here that the main menu is already
created and assigned as your main navigation. Okay. What you can do is create
a new menu or you can just edit the existing menu. Just so you know what to
do if you had to create a new menu, I’ll show you that. Okay. Create menu. Make sure you select Main Navigation,
then Save. Immediately, when you load your site, you’ll noticed that the menu
disappears. Reason being, we need to now start adding menu items to this area. So
to start with, what you can do is actually just tick any of the pages you
want from this list here already available to you. So say you want to add
these pages. Add to menu. If you save that, you’ll see that the menu now appears, but
you probably want to change the order in which they appear. Easily done. All you
need to do is drag and drop as you’re seeing here. That will take effect on the front
end. So as you can see, it’s really easy to use user-friendly interface. Not only can you
add existing pages, you can add any custom links that you may have. So say … I
mean you can link to absolutely anything from you menu. Just as an example, if
you ever want to customize the tab … Oh, sorry. I should say the label of your menu,
you can change that here. So you might want to call this instead of Menu, Food
and Beverages. Okay. You may want to call this one something else, or you may want
to just delete something. What you can do is click on that arrow, and click on
Remove. That will get rid of that from the menu. So there we go. That’s a really, really
easy to use feature of WordPress itself, and that’s one of the things that makes
WordPress so popular. Next, I’ll demonstrate how to edit this footer area
over here including the social icons. So if you go back in the dashboard, and in
the Theme Options, you see an area called Footer just over here. You can check this
box if you want the footer to be 100% width. You ca add a parallax effect if you like, but that
won’t really look too good to be honest. You can change the number of columns in
the footer. At the moment, there’s only one column because it sort of looks
good with this theme, but you can change it to have three different columns. You
can manage that in the Widgets sections. So that’s Footer Widget 1. You’d be
able to manage it there. I’m going to leave that as is. What I need to do is edit
this copyright area. So if you scroll down, you’ll see this copyright area notifications or options. You can check
or uncheck this box to display what’s in this field here. So if you want to
display a copyright, you can actually edit all of the stuff here, and go down, and
click Save. There we go, or you can remove that
entirely. You also probably want to manage these social icons here. You can
manage the look and feel of them using these settings here, but to manage which
social icons actually appear. Here it is, Social Media. If you enter anything in
these fields here, and i’ll just demonstrate. For purposes of an
example, I’m not going to bother putting all the different URLs. But for one of the fields,
you enter your social media. It appears in two different places; this
area here and this area here. So if you want to get rid of any, just simply remove
the URL to your social media page. It will only show those particular pages.
It’s as easy as that to manage your footer, and your social media. Any questions, give
me a yell. Last but not least, I want to add a
Contact Us page on our site. Now we’ve already got one page on the
site called Locations. So I’m going to use that as a base. So if you go to Locations, before moving any further, I really recommend
you save this one has a custom template or custom layout just in case something
stuffs up, then you got something to refer back to. So Locations Layout. Okay. We’re
all good. Now this is what the page currently looks like. You can see
there’s a massive map with all the locations, and there are a few images and a
bunch of locations down here. Now, I want to edit this and simplify it, so that it’s much
more … I think this is a bit messy. So it really depends on how many locations you
have. You may just have one, and that’s absolutely fine. What you can do, let’s
start with the Google Map. Let’s click on the Edit element tab. I’ll leave everything
just about the same. If you go down, you’ll notice that the overlay color is very
dark. I’ll select a lighter color. Okay. This custom marker is this … are these circles.
It’s a custom location marker. So leave that as it is if you like. Address, now here is where you would put
your real business address. Obviously, as an example, we’re just using generic
addressed here, but I would recommend you to put your real cafe or restaurant
address here. So let’s say for example, New York, followed up with a pipe symbol,
which is shift and the case under backspace on my keyboard. So it’s that
vertical line. Let’s say Chicago, and let’s just try Tampa Bay. Okay. Let’s
save that. There we are. So when a user clicks on any of
these, they would see your address pop up. This is a dynamic Google Map. You can
actually move this. Zoom it in, out. It’s pretty cool. Next, Locations. I want to get rid of this
panel. It doesn’t really serve a purpose. So that relates to this area here, but I
don’t want to get rid of these because they might come in handy. So what I can do is
just get rid of the location stuff, that whole container. Next maybe you don’t
need so many locations, maybe you just have one location. What
you can do, I’ll give you an example. Let’s delete a few of these. I click the plus button,
and make it a fullwidth. Okay. Update. So what I’ve done here is two examples – one if you’ve
got multiple locations; and secondly, if you’ve just got one location. There we are. Obviously, if you want to put some text
in, that would be fullwidth. If you wanted to edit any of that, you just come in
here and click on one of the edit buttons, and you can edit all that information
right in that area there. There we go. Okay. Next, I don’t want this logo, so I’ll get rid of that.
Also, the rest of it looks pretty good. Obviously, you would’ve updated all of your details.
Here we are. We’ve got a much simpler page, a much simpler layout that’s more user-friendly.
People can find and contact you very very easily. If there’s spacing that you
want to get rid of, perhaps get rid of this separator. You can just much around with the
separators and the margins within all of the settings inside each element. That will get you your layout
that you are happy with. That’s all. As you can see, there’s quite a lot of
space here in between these two elements. There’s too much space. So I’ll quickly show
you how to edit that. So it’s between this block here and the next block. So what
I’ll do, I’ll go to Edit, Design, and here we go, the Padding. 130 pixels at the moment. Maybe, I’ll try
20 pixels. Let’s see how that goes. Yep. So that’s better. That’s changed the
padding underneath. Now I’ll need to change this padding over here. So if I go to this
container and edit, I should be able to … Yep. Okay. So let’s keep that as, yeah, 20 should do. There we are. That’s a lot nicer. That’s how to set up a Contact page on
your website. Looks professional, doesn’t it? If you want to add the Contact page to
your menu here, it’s as easy as going back into the Appearance, and Menus
section adding that page that you just created, and then saving. Perhaps, label it
something different. If you have any questions about that, please do ask me in
the comments below, and I’ll be more than happy to help. So there you go. I’ve shown you how to make a
WordPress website using the Avada theme for your restaurant or cafe. It’s
lasted less than two hours. To be honest, now you got all the tools you
need to set this up in any way you want. I would really appreciate it if you
could give this YouTube video a thumbs up, and share it on social media as well. Subscribe to my channel. I’ll be putting
up more stuff in the future. Ask me any questions you have in the
comments below, and I will do my best to help as many of you out as I can.