Restaurant Website Design Tutorial | Building a Restaurant Website with WordPress [EASY]
Articles Blog

Restaurant Website Design Tutorial | Building a Restaurant Website with WordPress [EASY]

August 26, 2019


Want to create an awesome website for your
restaurant, café, bar or food truck? Then you’re in the right place. In this video, we’ll show you how to make
a restaurant website using WordPress. In fact, we’ll show you how to create this
exact website here and how to customize every inch of it to create the exact site you want. A website like this will typically cost two
to three thousand dollars for an agency to create. In this free WordPress restaurant tutorial,
we’ll show you how to do it for about $150 step-by-step with no coding or web design
skills required. So, if that sounds good, then let’s get to
it. To make things even easier, we’ve created
a free step-by-step guide that you can follow along with on the OHKLYN blog. We’ll add a link to the description and in
the info card for this video. Here, you’ll find the written steps for this
tutorial as well as any links mentioned in this video. As part of the OHKLYN community, you’ll get
access to discount hosting and a free domain as well as the discount for the Divi WordPress
theme, one of the most popular WordPress themes on the market. You can find the links to these in the description
below, or if you’re following along on the OHKLYN post, you’ll find them here. We’ll also show you how to access over a hundred
free entire website layouts, free support, and over 20 hours of detailed video tutorials
covering everything you need to know. We’ll show you how to create your restaurant
website using Bluehost as your hosting provider. With the link in the description below and
on the OHKLYN post here you’ll get access to discount hosting plus a free domain name
if you haven’t purchased one already. Okay, for this tutorial, we’ll show you
how to create a Homepage or landing page for your restaurant, About, Contact, Gallery,
Team, Blog. We’ll also show you how to create a reservation
or booking form or link a reservation button or menu item to a restaurant booking site
like OpenTable. The restaurant website we’ll help you create
will use a drag-and-drop page editor for easy customization, feature UX/UI optimized page
designs, be 100% mobile responsive and SEO friendly. So, without further ado, let’s get to step
one, which is preparation. The first thing you’ll need to do is to get
everything you need ready before you start building your website. These assets will be used throughout your
site on every page and will help your whole website look coherent. A logo: make sure that you have all the variations
you need, like a horizontal and vertical version, dark and light version as well as different
sizes so that it fits perfectly wherever you use it. A favicon: this is the logo your website will
display in the browser tab. It’s usually square, but you can create the
illusion of an irregular shape by using an image with a transparent background like a
PNG. Brand color palette: a coherent design always
starts with a brand color palette. This usually consists of a main color as well
as a few complementary colors. Tools like paletton.com, Adobe Color or color-hex.com
can help you pick a color palette. A small budget of a $100-250. This will fund the cost of your domain, hosting,
premium WordPress theme, images if required. If you want to hire a designer to create some
of your branding assets, it may be up to $300. We have created an article that details the
expenses you’ll face as you build your website or blog in this article on the OHKLYN blog. It’s also important to have an idea of what
the end product will look like before you start building your website. Keeping the end in mind when starting to build
your website will help keep you on track and make the whole process that much easier. Start off by creating a sitemap like this,
with all the pages, blog categories and menus you’d like on your website. As you can see, mine will have a Home, About,
Contact, Gallery, Team and Blog page. That will be accessible from the primary navigation
menu. The Contact and Privacy pages will also be
accessible from the footer menu. If you have an idea of the topics you will
write about in your blog, you can also list your blog categories. For example, Our Story, Farm to Table, and
so on. The next step is to sketch out what you’d
like the website pages to look like beforehand. For this, I like to use Sketch.IO but you
can use any other tool you are comfortable with, or even just a pen and paper. So, there’s no wrong way to do this, and you
can choose to be as rough or vague as you want to be or as detailed and thorough as
you want to be. However, the more effort you put in and the
more detailed you make your planning, the more assured you’ll be from the beginning
that you have a great design and the less you’ll have to think about it as you’re actually
building your website. So, you’ll probably start off with the main
navigation bar at the top, or if you’ve got any other navigation, you can draw that out. Then, you’ll probably have a logo and your
name. Something like that. And here, you might have various links to
pages on your website. And we usually like to have a big header area
at the top with a background image. And then, once again our website name in big
capital letters, like that. And then some more writing underneath it,
and some call to action or a button that takes the user to our Contact page. And then underneath that, we might have some
more information about our brand, something like that, with some information below it
and then an image to the right. So, once again, this is just a very rough
example of what you could do. And as I said, the more effort you put in
– you could maybe add some colors, use the actual fonts you want to use on your website,
and use the actual images that you would use on your website to make it as realistic as
possible. The most important things to keep in mind
while doing this is does the flow of information make sense, and does he take the users through
a process or tell a story? Okay, so that should do it for preparation
and planning. Now it’s time to get to work on our WordPress
website. If you haven’t already, the first step is
to register your domain, setup your website hosting account, and install WordPress for
your website. For this tutorial we’ll show you how to set
up your hosting via Bluehost, as we believe it’s the best option for beginners. Remember to use the link on the OHKLYN post
here to access a discount for Bluehost. As you can see, they offer free domain registration,
SSL certificates and one-click WordPress installation. To get started, just click the green Get Started
button. As you can see, Bluehost has three pricing
packages: basic, plus, and choice plus. The biggest difference is that with a basic
plan, you’ll only be able to host one website and you’ll be limited in terms of storage
space whereas the plus and choice plus plans are unmetered. So, if you want to host more than one website
on one account, you’ll have to get one of the plus or choice plus plans like we do. However, you’ll have the 30-day money-back
guarantee regardless of which plan you pick. If you want to get your free domain, you can
enter it into the new domain field here, or if you already have a domain, you’ll enter
it in the ‘I have a domain’ field. Bluehost supports a number of domain extensions
which you can see in this drop-down over here. If you want a domain extension that isn’t
in this list, you’ll have to buy it from another registrar and then put it in the ‘I have a
domain name’ field. You’ll then need to do what’s called pointing
your name servers to Bluehost. Fortunately, we’ve written an article on how
to do this that you can find on the OHKLYN blog. For this tutorial, we’ll register a new domain,
so we’ll type it into the field here and then choose the domain extension we want, in this
case ‘.com’. If the domain is available, it’ll tell you
so on the next page. If it’s not, it’ll take you back to choose
another domain. Next up, you’ll just need to provide some
basic information to register your account with Bluehost like your first name, last name,
business name if you are registering on behalf of a business, country, address, phone number,
email address, etc. You’ll then need to make sure that you have
the right package. Bluehost automatically selects the 36-month
package, so if you only want a year, make sure that you change it. You’ll also see that they again confirm your
domain and your SSL certificate is free. In the package extras field, there are some
upsells that you may or may not need, depending on your circumstances. We recommend paying extra for Domain Privacy
Protection so your personal details won’t be published with your domain online, but
we’ll untick SiteLock and Codeguard. Then, you’ll see the total price at the bottom. Next, you’ll need to provide your credit card
details in order to pay for your hosting. The last thing to do is to agree to the terms
and conditions, and then you’re ready to go. You’ll be taken through to this page welcoming
you to Bluehost with a ‘Set password’ button. In the meantime, you’ll also be sent a WHOIS
verification email that you’ll use to verify your email. Let’s go check that in our inbox first. Here, you can see the WHOIS verification email
for the domain of your hosting, and you just need to click on the green Verify Your Email
button, give it a moment to load, and as you’ll see, you’ll be verified. If we then go to the other email that welcomes
you to Bluehost with a Get Started button, this will take you through to the login page. However, we don’t have a password yet, so
we’ll need to go set that on the page that we were taken to earlier. So, just go back to that tab and click the
Set password button. Just enter any password that you want. Try to keep it secure. As you can see, they provide some guidelines
for that. Or, you can let Bluehost suggest a secure
password for you. Just make sure that you copy this and paste
it somewhere. Agree to the terms, and then click Next, and
you’ve created your password and can now log into Bluehost. So, if you click the button, just let it load
a bit. This may take some time, because they’re going
to suggest some themes for us. So yeah, we’re already logged into our Bluehost
account, and here they suggest some themes that you can pick to start your website with. You don’t have to pick one now, and we won’t
pick one for this tutorial because we’ll set us all up later, so we’ll just click Skip
this step. And that’s pretty much all the setup you need
to do. You might see this notification that your
WordPress website won’t be hosted on the domain you bought just yet, but they’ll automatically
update it to your domain when it’s ready. So, you can go immediately to your WordPress
site by clicking Start Building, or first go to your Bluehost account. We’ll just open it in a new tab for now so
that we can easily navigate back to the Bluehost account later. This is your WordPress dashboard hosted on
Bluehost, and there will be a welcome message from Bluehost as well as the setup wizard. We won’t be using this as we’ll be setting
up our website ourselves, so we’ll just click ‘I don’t need help’ which will take us through
to our Bluehost dashboard for WordPress. As you can see, here are some tools that Bluehost
provides for free with your WordPress hosting. There’s a Coming Soon widget, some quick access
to your blog posts and pages, the app marketplace, some performance settings and staging settings. Staging is important because it allows you
to make a copy of your site that’s offline that you can work on. This means that you can leave your live site
up without affecting users when you make changes or updates to your site, so you’ll come here
to do that when it’s time. Back on the homepage, you’ll see the left-hand
navigation menu, and if you go to dashboard, this is your actual WordPress dashboard. So, there’s a bunch of stuff here mostly related
to the extra plugins that Bluehost installs on your behalf and you’ll see this orange
Coming Soon Active bar at the top toolbar which shows users a coming soon page when
they go to your website since it’s not set up yet. We can also remove some of this clutter from
our dashboard by going to the top right-hand corner of any of these panels and then clicking
the X to remove it. We’ll keep the ‘Welcome to WordPress!’ panel
as it has some handy links that you’ll probably use later on. In the left-hand menu, we’ll next go to Plugins
and then Installed Plugins. So, Bluehost installs some plugins on your
behalf, and while you can keep them if you feel you’ll need them, if you don’t, it’s
best practice to remove them or at least deactivate them as they can only lead to outdated plugins
or security vulnerabilities if you just leave them there but don’t use them. They will also impact the performance of your
site as they add some unneeded complexity. So, we’ll just multi select the WPForms, OptinMonster,
and Jetpack plugins as well as the Google Analytics plugin. Then, from the bulk actions drop-down, you
can just select Deactivate and click Apply. Okay, so with unnecessary plugins deactivated,
let’s go back to the dashboard. You’ll see that Bluehost’s Coming Soon page
is still active. Once you’ve finished your site and you’re
ready to send it live for visitors, just go to the Bluehost panel and then click the ‘Launch
your site’ button under Coming Soon Active to disable the Coming Soon page. If you want to activate the Coming Soon page
again, just go to Caching and Cache Settings and enable it again under Bluehost Coming
Soon Page. When you’re ready for your visitors to see
your site again, just go back to the Bluehost panel and then click ‘Launch your site’ once
again. Okay, so that’s it for WordPress for now. Let’s take a look at our Bluehost account. So, this is your main dashboard area. You can see your WordPress site here with
the URL and the login button. This is your My Sites panel where you can
manage your sites individually. Clicking on Manage Site will open up the settings
for that specific WordPress website and you’ll see settings like Users, Performance, Security,
Backups, etc. Under Security is where you’ll find your free
SSL certificate. Yours might still be unavailable, and this
is most likely because Bluehost is still setting up your domain, but this is where you’d come
to switch it on once your domain is ready. On the OHKLYN blog, we’ve written an article
that explains the importance of an SSL certificate for your website and we provide step-by-step
instructions on how to activate your free Bluehost SSL certificate for your WordPress
website. Going back to our WordPress site we’ll know
our SSL certificate isn’t available yet because the domain for our site will load without
the HTTPS extension. On the Coming Soon page, you can also click
the Admin Login button to log into the backend of your WordPress website. And this is the standard WordPress login page. You can also access this login page or your
WordPress website by navigating to your domain name followed by ‘/wp-admin’. From a security standpoint, it’s not a good
idea to keep using the default admin account that Bluehost provides, so the first thing
we’ll do is create another admin account that you can use to manage your WordPress website. To do this, we’ll go back to our dashboard
and then in the admin menu on the left, we’ll go to Users, and you can immediately click
Add New or go to the All Users page and then click the button. You’ll need to provide a username and email. I’ll just use my name and my email adGress. You’ll use this email address to reset your
password, and WordPress will send notifications to this email, so make sure it’s one you have
access to. You don’t need to provide details for the
rest, and WordPress will generate a secure password for you, so make sure you copy this
and keep it somewhere safe. Also, make sure to change your role to Administrator
so that you have all the rights and privileges that you need. Then, click Add New User. We also recommend deleting the old admin user,
but to do this, you’ll first need to log out. So, hover over the admin in the top right-hand
corner and click on Log Out. Then, we’ll log in using our new details,
so your email and the password. You can also select Remember Me to have yourself
automatically logged in. Then, we’ll go back to Users and delete the
admin user. Just confirm it on the next page. Delete all content. It might take a while, so just let it load. And you have a new secure admin account to
manage your WordPress website. You’ll also notice the name of the account
that you’re logged in with show in the top right-hand corner over here. So, here you can see ‘Howdy, Hendrik’. Okay, so now that we’ve done our preparation
and planning as well as registered for our domain, hosting, and installed WordPress,
it’s time to learn about the fundamentals of WordPress before we start building our
site. Now that we have an admin account and before
we go on, it’s a good idea to cover some of the WordPress fundamentals, so we’re led back
to the dashboard. The WordPress dashboard or admin panel is
broken down into three main sections; at the top, we have the WordPress toolbar. The admin menu is located on the left-hand
side, and the main admin area’s in the middle. We’ll give you a brief overview of each section
now. However, for a more detailed overview, watch
our free How to Use WordPress tutorial, which is an introduction to WordPress for beginners. This is intended to get you up to speed on
the fundamentals of WordPress in about an hour. All right, so the WordPress toolbar at the
top is dynamic and adjusts the available options depending on which page you’re on. For example, if you’re in the back end and
you hover over the site name, you’ll be able to visit your site from the front end, and
if you’re in the front end and you hover over your site name, you’ll be able to go back
to the backend. The admin menu is also divided into three
sections; at the top, you have the dashboard section that provides easy access to the dashboard,
some plugins, as you can see, Bluehost here, and updates. Under that, it’s the content management section
where you can create and manage posts, pages, media items and comments. The site administration section has mostly
to do with the appearance and settings for your site. Under Appearance, you can change the theme
of your site or access the customizer. Here, you can manage Plugins, Users, which
we’ve covered, and General Settings, some which we’ll cover in a bit. Some plugins and themes will also add extra
entries to the menu which you’ll see later when we add the Divi plugin. The main dashboard area is where you will
be doing most of your work and will look different depending on which page you’re on. The Screen Options drop-down is also on most
pages, and if you expand it, you’ll see that it gives you extra options and features that
you can add to the page. Similarly, the Help tab to the right shows
you helpful hints for the page that you’re currently on as well as links to relevant
documentation. Both of these are also contextual and depend
on the page you’re working on. There are a few settings I want to show you. Firstly, let’s go to Settings, and General. If you change the site name here, you’ll see
it update in the toolbar. You can also change the tagline, update the
date and time settings, and more. Again, if you want to learn more about these
and other settings, you should check out our How to Use WordPress tutorial. The other important change I want to make
is to the permalink structure. The permalink structure determines how the
URLs for your posts and pages will look. Sometimes, it’s set to month and date by default,
but it makes much more sense to change this to Post Name. This will look better to your visitors, and
it’s better for SEO optimization. It’s also best to do this before you create
any content so that your URLs are correct from the beginning. Remember to always save any changes you make
to these settings. While you’re working on your site, I’ll also
recommend to go to Reading and check this box that says, ‘Discourage search engines
from indexing your site’. This also stops search engines from using
your site in search results while you’re working on it. Once you’re ready to launch your site, you
can come back and uncheck this. Save Changes. Okay, so let’s take a quick first look at
our WordPress website. As you can see, not much is going on yet. This is what all new WordPress sites look
like, and in the coming sections I’ll show you how to turn it into an attractive site
with content and a great looking design. We’ve covered preparation and planning, registering
for hosting, as well as WordPress fundamentals, so now it’s time to upload and install our
WordPress theme. A WordPress theme is basically a group of
files that change the look and feel of your WordPress site with a professionally made
design. You can find out more about what a theme is
in the ‘What is a WordPress Theme?’ article on the OHKLYN blog. There are free and premium themes, and premium
themes usually have better design quality, extra features, more extensive documentation,
and professional support. They usually cost between $50 to $100. On the OHKLYN blog, we’ve analyzed hundreds,
if not thousands of WordPress themes based on speed, design, ease of use, mobile responsiveness,
and functionality, which you can access via the WordPress Theme Reviews category of the
OHKLYN blog. We’ll use Divi for this tutorial, which is
one of the best premium themes out there and regularly features in a top spot in our reviews. You can access a discount for the Divi theme
by following the link in the description below or on the guide on the OHKLYN blog here. You can either purchase a yearly access to
all their themes and plugins or select their lifetime option which gives you access to
all their themes and plugins for life. We have their lifetime access, however, choose
what’s right for you. You can always upgrade later on. Once you have chosen your access level, sign
up, enter your personal information, select your payment method, review the terms, and
complete registration. So, first of all, you’ll need to download
the Divi theme. Just log into your Divi Members Area and download
the theme from here as a ‘.zip’ file. So, uploading WordPress themes and installing
them is also very easy. From the dashboard, you’ll just go to Appearance
and Themes. Here is where you manage all the WordPress
themes added to your site. You can go customize them in the customizer,
activate inactive themes, view details about the theme, and delete them over here. You can also add new themes to your site. If you go to the Premium Themes button here,
you can purchase themes from the Bluehost theme market. But to upload your own theme, you’ll click
Upload here, which will also open the WordPress Theme Repository. These are thousands of free WordPress themes,
and you can look for one by filtering the results here or using the search feature. So, we’ll click on Upload Theme to upload
the Divi theme, Choose File, find Divi.zip file wherever you downloaded it to, open it,
and Install Now. This uploads the entire Divi theme to your
WordPress website and installs it, so it can take quite a while. Just wait for it a while. Okay, once this page opens up, the theme will
have uploaded successfully and been installed, and you can immediately activate it to your
site by clicking the Activate link here or go back and do it on the Themes page. Okay, let’s immediately take a look at our
site, and except for the Divi logo here at the top, there’s still not much going on,
but we’ll fix that in the next few sections. So, we’ll just go back to the dashboard. Okay, so let’s look at what we’ve done so
far: preparation and planning, registering for a domain, setting up your hosting and
installing WordPress, WordPress fundamentals, and uploading and installing a WordPress theme. Now it’s time for the fun stuff: customizing
your WordPress website. So that you can build out your website and
customize it to look the way you want, we’ll cover how to upload your logo, favicon, and
brand color palette, how to create pages, posts and categories, how to create and manage
menus, how to update your WordPress theme settings, including widgets, how to update
your WordPress theme customizer settings, and how to use the Divi Builder. The best place to start when customizing your
website is to add your branding elements. Your logo and brand colors will probably be
used on every page of your website, and having a favicon in your browser tab will make your
site look more professional. They will also identify your site to visitors
so that they know they are at the right place. So, after the last Divi update, you no longer
change your logo and your favicon at the same place, so we’ll need to go to the Divi Theme
Options to change our logo and to the theme customizer to change our favicon. The good news is that this isn’t too difficult
and that you’ll get a quick look at both of these tools before we dig into them deeper
later on. So, to change our logo, we’ll go to Divi and
then Theme Options. There are a lot of options here that mostly
change how Divi looks and how it functions throughout your website, but we’ll look at
them later on. The only thing we’re interested in now is
the Logo and the Color Pickers Default Palette. So, to upload a logo is very easy, just go
Upload. If you have images in your media library,
you can just choose them from here. Also, you can go to Upload Files – Select
Files and choose one from your computer. So, let’s say we use this alternate version
just as an example, but we’ll select this one. And you can set an alt text for it which will
be used by search engines so that they know what the image is about and will be used as
a placeholder in case the image doesn’t load. So, as you can see, ours is ‘darktrianglelogo’. Then, if you’re happy, just click Set As Logo. Then, the default color palette is the set
of colors that you can quickly select when customizing your site. You’ll see it later on. But I’m pretty sure we won’t use green, so
we’ll select that and then change it to our brand color’s hexadecimal color code, which
is ‘#0ddadd’, and you’ll see the color change here. To keep the changes you make here, you’ll
need to click the green Save Changes button, and you’ll see the green checkmark when it’s
done. To change the favicon, we’ll need to go to
the Theme Customizer, so we can either select it here under Divi or go to Appearance and
then Customize. I’ll just click this one. Okay, so this is the Theme Customizer. You can already see our logo here. This is the Theme Customizer where you’ll
mostly be able to make changes to the styling settings of your theme throughout your website. So, to change our favicon, we’ll need to go
to General Settings and Site Identity, and then this Site Icon is actually the favicon,
so it’s a bit cryptic but you can just change it here by clicking Select Image, then this
one we’ll just choose it from our media library. And our alt text we’ll keep as ‘darkfavicon’. Click Select. You can crop it, but we’ll just skip cropping. And then, any changes you make in the Theme
Customizer, you’ll need to hit Publish in order to commit them. So, click Publish, and then you can close
the Theme Customizer over here. And you should already see your favicon. So, if we visit our site, you’ll see our logo
up here. Unfortunately, our brand colors aren’t used
anywhere yet, so you won’t get to see them just yet, but if you look at the browser tab,
you should see your favicon, and your logo is here in your main navigation menu. Okay, so the first thing you’ll probably want
to do when building out your site is to create some pages, so we’ll head back to the dashboard,
and then to create or manage your pages, you’ll go to the Pages in the left-hand menu. You can either add a page from here or go
to All Pages first where you might see that WordPress has created some default pages for
you. These are usually Sample Page and Privacy
Policy page. We’ll go ahead and delete this. So, to show you how, you could either trash
them here under the quick edit settings, or you can multi-select them from the bulk actions
drop-down, select Move to Trash, and Apply. And then, to make sure they’re gone, you can
go to Trash, bulk select them again, and Delete Permanently. Okay, so let’s go back to our sitemap, and
as you can see, I want to create seven pages in total: Home, Gallery, About, Team, Contact,
Blog, and a Privacy page. So, just refer to your sitemap and then we
can go create our pages. And then I’ll click the Add New button here
to create a new page. The first page I’ll create will be my homepage,
so you’ll add your title here. Okay, so you can straightaway use the Divi
Builder, but I just quickly want to show you what the default page editor looks like, so
we’ll click Use Default Editor. If you’ve used WordPress before and this looks
completely different, then don’t worry. It’s just their latest Gutenberg update that
modernized the interface a bit. The biggest change is that pages now work
by adding what’s called content blocks, so you’ll add a block which is either a piece
of text which you can just start typing, or you can add content blocks that are images,
headers, quotes, lists, galleries, etc. and [it] build out your page like that. On the right-hand side, you’ll have a bunch
of page options and settings. If you don’t want to publish your page live
so that visitors can see it but you want to keep working on it, then you’ll save it as
a draft here. If you ar for visitors to see your page, then
you’d publish it and it will go live on your website. And you can preview pages here. As you can see, not much going on yet. Then, there are a lot of other import settings
here, but we recommend that you watch our WordPress for Beginners tutorial if you want
a more in-depth explanation of them. The only ones I want to show you here are
the Divi-specific settings. So, under Divi Page Settings, we’ll keep the
Right Sidebar, as this is the standard when it comes to websites, and we’ll keep Hide
Nav Scroll to Default so that it follows our global theme settings. So, to use the Divi Builder, we can just click
this button here. The Divi Builder has also undergone some major
changes to keep pace with the WordPress changes, but for now I just want to show you how you
can use the Divi layouts to give your pages a design and some default content to get started
with. So, to do that we’ll click Edit With The Divi
Builder, which will launch the front-end Divi Builder. Okay, so here you have three options to build
your page. You can either build it from scratch where
you start with a clean slate and you build it section by section. You can choose a premade layout from the free
Divi Layouts collection to start you off with a great design, which is what we’ll do, or
you can clone a page you’ve already created using Divi – the Divi Builder – and continue
editing it on a new page. So, we’ll say Choose A Premade Layout. That will open the free Divi Layout Pack Library,
and from here you can either [research] for your layout pack, you can filter it by category
over here, or you can search for it here, like that. If you select a page from a layout pack, that
will open up this page where it will show the related pages from that layout pack. So, here you can see we chose the Home page,
but they show us the About, Blog, Contact, Color, etc. So, you can view a live demo here which will
take you through to the demo page, and you can preview it. So, that looks good to us, so we’ll go back
and say Use This Layout. Then, just give it a while to import. This may take some time because it’s importing
all the images and demo content as well. Almost there. Okay, so once that’s done, it will reload
and then you can see it imported all the demo content and we can start customizing this,
which I’ll show you in a bit, but yeah, you’re starting off at a great starting point and
you can customize this until it looks exactly the way you want. So, when you’re done making changes to a page
using the Divi Builder, you can either save it as a draft which works the same way as
in the back-end editor, where the changes won’t be live on your website, but they will
be saved to work on later. But we’re happy, so we can jump straight ahead
to publishing it. Okay, and then once it’s done, you can click
the Exit Visual Builder, which will take you to the preview of the page or what it would
look like to visitors. So, here we can see. Okay. And you can go back to the back-end editor
by clicking Edit Page over here. Okay, so I’ll just show you another one. So, we’ll go to New – Page. Let’s create our Gallery page. Use Divi Builder – Choose A Premade Layout. The Restaurant pack, and this time we want
the Gallery page. We won’t demo this one, so Use This Layout. Once again, just give it a moment to finish. Let it load the new content. And we’ll also go right ahead and publish
this one. And then go back to the back-end. And just so that you’re aware, this title
we give our pages here, as you can see in the permalink structure, it’s used as the
URL for this page because we selected Use Post Name, or in this case, Page Title as
the URL. And as you can see, this is a much more logical
way to create navigation for your website. So, we’ll go on and create the rest of our
pages. I’m going to skip ahead and use my sitemap
as a guide, and you can go ahead and do the same thing. Okay, so as you can see, I’ve created all
my pages in my sitemap, and hopefully you’ve done the same. So, the next thing we have to do is to make
sure that the Home page is the first page visitors see when they come to our website. And to do that, you have to go to Settings
and Reading. Then, from this ‘Your homepage displays’,
you’ll see that it’s set to ‘Your latest posts’. So, this means that by default, your homepage
will be like a blog category page with all of your blog posts displayed in chronological
order. If you want to set another page as your homepage,
like our Home page, for instance, you should select ‘A static page’ and then from the Homepage,
select the Home and then Save Changes. And now, if we visit our site, we should see
the new homepage that we created. Okay, so since we just created all our pages,
now would be a good time to show you how to use the Divi Builder to customize them, so
we’ll go to all our pages, well go to the Home page, and you can just go straight to
Edit With Divi by clicking this popup link over here. Okay, so this is Divi’s best feature: the
Divi Builder. It’s an intuitive drag-and-drop page builder,
and it allows you to very easily customize almost every aspect of your webpage. We won’t cover everything in this tutorial,
but if there’s anything that we’re going to show you that you want to know more about
or there’s something that you’re interested in that we haven’t showed you, then go to
the Divi documentation from the link in the article on the OHKLYN blog here, then head
over to the Divi Builder section, and here you’ll find hours and hours of free video
tutorials as well as the explanation of every aspect of the Divi Builder. Okay, so the best way to understand how the
Divi Builder works is to think of your pages in terms of sections, rows and columns, and
modules. So, sections are either purple or blue, and
they organize your pages in big blocks of related content, so you can have multiple
rows, columns and modules in one section. Rows and columns are pretty obvious. So, they divide an area into a certain number
of rows and columns. And then you have modules, which are the actual
content on your pages, like a piece of text or an image or a video or even a widget. And they are in grey. So, a handy feature of the Divi Builder is
that if you’ve got text somewhere, you can simply double click it or just click on it
somewhere and start editing it. So, we will start off by changing this to
our website name. Something like ‘OHKLYN’S TABLE’. Just like that. For sections, rows and columns, or modules,
you can either change – you can also change their settings in the toolbar over here. So, you can drag and drop them using this
icon, you can go into their settings over here, you can duplicate them clicking here,
and delete them clicking here, and you can also save entire sections to your Divi library
and then import them on your pages by clicking this icon over here. So, inside the settings, it looks very similar
for sections, rows and columns, or modules, but there are a few different options depending
on what exactly it is you’re editing. So, it’s divided into three main tabs; the
content tab has to do with the actual content. So, this is where you would add a background
or an image or edit the text in your module and so on. Then, the Design tab is you would change the
styling of that section or row or module, such as changing the font, the colors, the
sizing, the spacing, or even adding a box shadow or an animation. And then the Advanced tab is where you can
add some custom CSS or give your sections or modules CSS ID. Okay, so for example, I also want to increase
the size of this heading a bit, so I’ll open the settings and I’ll go to Design, and this
is a title, so Title Text. And the Divi Builder helpfully organizes headings
under H1,2,3,4,5 and 6. So, since this is a H1, we can change its
design under the H1 tab. And I want to increase the size a bit, so
I’ll go to like 80. Yeah. Okay. And what I also like to do is I like to make
my fullwidth headers the entire size of the viewfinder so that it fills up the whole page
when the visitor lands on your page. So, to do that we can go into Spacing, and
I’ll do it by adding some padding at the top and bottom. So here you can go – I’ll make it 10vw, and
also the bottom 10vw. Okay. And whenever you make changes, remember to
save them by clicking the green check icon over here. Just give it a moment. It’ll correct now. Yeah. Okay. So, yeah. That looks good. We have a nice big full-screen header over
here. Other things you can do are you can change
the row and column structures. For example, we can click this icon over here,
and then we can make it a three-column row instead of a two-column row. And you can see we can now add some text over
here or whatever other module you want to add. So, we’ll just change this back to a two-column
row. And this is a particularly handy function
when you’ve got a blurb-like structure or some kind of multi-row and column structure
like this. What’s also very handy in this instance is
the ability to duplicate rows, because you can just duplicate it and then you can change
the content of each block without having to go recreate your rows from scratch. So, I’ll just delete this one. Okay, so what I also want to show you is how
to create a new section, which you’ll just find this blue ‘+’ icon over here. That one’s a bit obscured, but it looks like
this. Then, when you click it – sorry, it’s just
– this thing is in the way, so just click ‘+’, and then a Regular section, and you can
immediately pick a row-and-column layout. I want a two-column layout, so I’ll pick this
one over here. And then you’ll also immediately be asked
to insert a module into the first column, so in this case I first want a text module,
so I’ll add it. And I’ll just make this something like ‘We
can’t wait to serve you!’ And in this little text editor, you can style
your text as usual. I want to make this a H2. And then, to make it consistent with the rest
of the text in our page, go over to Design – Heading Text. So, this time we’re editing a H2, so we’ll
go to the H2 tab and change it to Playfair. And I actually just also want to increase
the size a bit. Okay, so something that’s also very handy
is if you want to revert any particular setting back to default, you can just click this little
‘undo’ icon here next to it and it will set it back to the default setting, but I want
to keep this at 30. Another useful setting is this mobile display
icon over here. So, when you click it, you can change that
particular setting for different devices. So, for desktop, this title can be 30 pixels
but for tablet I can make it maybe 20, like that. And then for phone I can make it even smaller,
let’s say 15. Yeah. So, that’ll help you keep your design looking
good on different devices and not just try and style it on one to suit – as a one-shoe-fits-all
kind of approach. Okay, and then I’ll add another module over
here. Another text module. And you could put anything you want here,
but I’ll just keep the dummy text, but under Design, I want to make it look like the rest
of the text on our page, so I’ll go to the Text Color. Let’s first see, what color is this? It’s Montserrat and the color is ‘#939393’. So, go into the Settings – Design – Text. I also want to increase the size just a bit,
maybe 17 will look good. And we can change the color to ‘#939393’. Okay, that looks better. It’s looking a bit bland, so we can also spice
up design just a bit by adding a divider which you can find over here. Okay. And once again, I want to keep our style consistent,
so I want to use the same color as our buttons, this kind of goldish brown color. So, Button Background Color Setting. I’ll just copy this. Okay, so then we can go to our divider, and
the Design and the Color. Paste the color in here. And we’ll also make it a bit thicker, maybe
3px like that, and we can also reduce the width of it. Okay, like – that looks good. Okay, so now what I want to show you is how
you can add something like an OpenTable widget to your page. This will be very handy to secure reservations,
because using the OpenTable back-end, you can just add a small widget to your website
and it will take users through a process to book a table. So, obviously, you’ll need to go create an
OpenTable account, but we’ll just show you how to add the widget to your pages so that
you can go ahead and do that later on. So, for example, OpenTable will give you some
code to copy, so you’ll just click something like Copy Code. And the same goes for pretty much any other
third-party widget or code that you want to add your website. In the Divi Builder, you’ll then go and add
a code module. Code. And this is what a Divi Builder code editor
looks like, so you’ll just paste the code in here like that and then save it. So, you won’t see anything yet, and that’s
because the script only loads when you actually open the page. So, I’ll show you how that looks in a bit. Just as a final thing to show you, how to
add a background image; You can go into the Settings setting – the Section Settings and
Background. And then, under Background, you can either
add a color gradient which is like a two-tone color that fades the one color into the other,
an image or even a video. So, we’ll add an image, and I’ll just pick
one from our media library, maybe. Which one looks good? Maybe this one over here. Yep. Like that. Okay. So, as always, when you’re – when you’ve made
changes using the Divi Builder and you’re happy with it, just click this purple icon
and then save your changes. If it was your first time building on this
page or you haven’t published it yet, you’d also have to publish it to make the changes
live. And then you can exit the visual builder to
see what it looks like. Okay, so we’ve got our nice, big header section
over here, and at the bottom, here’s the section we’ve created. And here’s our OpenTable widget. So, this is what it will look like, and as
you can see, we haven’t registered an account yet, so you can’t go all the way through,
but that’s basically how it works. And as you can see, it’s really easy. So, yeah, you can easily set up reservations
for your website. So, that was just a very quick introduction
to the Divi Builder. There is way more to get into, but you shouldn’t
be intimidated because it’s actually a very fun tool that’s very easy to use once you’re
used to it and that can make you look like a design genius in no time. So, if you want to learn more about anything
or you want to learn more about anything that we covered just now, just go over to the Divi
documentation. You can find the link on the OHKLYN post over
here, and go through to the Divi Builder section and look through the hours of video tutorials
as well as tutorials in the documentation itself, and you’ll get used to just about
any feature of the Divi Builder. Okay, so the next thing we’ll do is to create
our blog as well as our categories and individual blog posts that will go on our website. So, we’ll go back to our dashboard, and you
can manage your posts the same way as pages by clicking on the option in the left-hand
menu. But the most obvious place to start is the
Categories, which we’ll organize our posts under. So, we’ll go to Categories first. Okay, so this is how you add a new category. I’ll just refer back to my sitemap, and we’ll
have the categories Our Story, Farm to Table, and Gastronomy with Italian and Spanish underneath
that. So, we’ll start with Our Story. A slug is just a URL-friendly version of your
category name, which means if you have any special characters that aren’t usually allowed
in a URL, then the slug will be your URL without the special characters. Our Story will be a top-level category, so
we won’t select a parent, and you can also provide an optional description. Then, just click Add New Category. And you can go through and create whichever
categories you want in the same way, so I’ll just go on, Farm to Table, and Gastronomy. And to create the subcategory, you just enter
the name again, so this time, Italian. And then from the parent category, you select
which one you want this category to fall underneath. So, in this time it’s Gastronomy. And if you click Add New Category, you’ll
see Italian will be created with this line that indicates that it’s a subcategory. If we were to create a sub-subcategory, there
would be two lines next to it. So, I’ll just finish up my categories by adding
Spanish, also select Gastronomy, and then Add New Category. Okay, so as you can see, here you can go and
edit your categories, you can change the name and description and URL, you can delete it,
you can view the category page, which will show the posts that fall underneath that category. And you might recognize this uncategorized
category over here, and you can’t delete it because this is the default category that
all posts will fall under if you don’t assign them to a category. Okay, so now that we’ve got our categories
and our blog structure, let’s go create some posts. So, to create a post, you can either go to
All Posts and then click the button here or click New in the toolbar and select Post or
click Add New in the left-hand menu. And you’ll see that it works almost exactly
the same way as a page does, so we might call this one – something like that. And just like pages, you can also either create
your pages in the Divi Builder or use the default editor that works exactly the same
way as for pages. So, you can type something here. Just something random like that. And there will be a lot of the same settings
here as for pages. And once again, if you want to know more about
any of these, then watch our How to Use WordPress for Beginners video. But one thing I want to show you is how to
add your post under a category. So, how you would do that is, you just select
a category from the list over here. So, in this case, it would be Italian. And now our post will show up if we go to
our Italian category page. You could also select multiple categories
so that it will show up for those various category pages. Tags can just be used to help users search
for posts on your blog. And another important thing for a blog post
is a featured image. So, a featured image will show at the top
of the blog post, and it will also show on the little blurb for that post on a category
page. So, just to show you what I mean, we’ll add
a featured image – let’s say, anyone will do. Let’s take this one. And also, just like pages, you can change
the sidebar layout over here. And you can save it as a draft or you can
publish it and it’ll be live on your website. So, we’ll just wait for it to finish saving
and then publish it. Publish. And if we view our post, you’ll see the featured
image is at the top and the bed of text you added will be right below it. So, if we go to our blog, you will see our
post show here, and it will also show the category it’s under. So, if we click on Italian over here, it’ll
take us to our Italian category page, and you can see here is the link to our blog post
we just created. Okay. So, that’s how you create blog posts and how
you organize them under categories, but one important thing you should do to just make
sure everything functions as you want is to go to your Settings and Reading, and just
like we did for the homepage, make sure that you select the blog page that you created
with the Divi Layout Pack as the default blog page for your website. So, to do that, you’ll just [say] your Posts
page, and you’ll select Blog over here. And now the blog page that we created earlier
will be used as the default page to lists posts on your website. Okay, so if you can create pages and posts,
then you’ve already gotten a handle on creating content for your website, and the next thing
to do is to make that content more accessible by creating menus. So, to create a menu, you’ll just go to Appearance
and then Menus over here. So, this is where you create menus for your
website. If you haven’t created a menu yet, then you’ll
see that WordPress – I’ll just visit our site – WordPress automatically uses this menu that
every single page or category that you create will automatically be added to the menu at
the top. So, obviously, we don’t want that. We want more control over what shows in our
main navigation menu. So, to do that we’ll have to create a new
menu, and you can click here. We’ll call this Main Navigation. Click Create Menu. And here in the menu settings, you can choose
what kind of menu it is, so you can activate the Secondary Menu in the Theme Customizer
later on. A Footer Menu shows at the bottom of the page,
and the Primary Menu is this menu you see here at the top. So, we want to create a primary menu, and
we also don’t want to tick this option because we don’t want it to automatically create menu
items for us. Okay, so how you add menu items to your menu
is; here on the left-hand side, you’ll see there is Pages, Posts, Custom Links and Categories. Just to make sure everything is available
to us, I just want to show you the Screen Options. So, the Screen Options tab here at the top,
it will have a bunch of options. And you can tick these to add them to the
available menu items. So, we want to be able to add custom links,
categories, and you can add any of the others like formats or projects, but you don’t usually
do that. But what we also want to do is we want to
be able to set the link target for our menu items, which means that we can decide whether
it follows a link outside of our website to a new tab or whether it just opens it up in
the same tab. And we also want to activate CSS classes so
that we can take advantage of Divi’s built-in Mega Menu. Okay, so to add items to our menu, you just
select them over here. We want to add Home, Blog, Team, Contact,
About, and Gallery, and then we’ll click Add to Menu. And you’ll see they are shown over here. And then it’s very easy to rearrange them. You can just drag and drop them. To show you, for example, if you want to have
sub-items, you can just select the item, click Add to Menu, and then you can drag it underneath
an item and it’ll be a sub-item of that menu. So, if we save this and we go to our Home
page and refresh it, you’ll see that it now only has the items that we added to the main
navigation menu and that underneath our blog, there will be an Italian sub-menu item. Okay, so another thing we can do is, if you
see, at the moment if we click Contact, it’ll take us through to the actual Contact page
that we created earlier. Now, in some instances, you may want to make
this menu item linked to a contact section on that same page or to any other section. So how you’ll do that is, we’ll go back, and
this Contact menu item, we’ll remove it and we’ll add a custom link. So, a custom link you can use to link to anything. You can even link to outside website pages
or your Facebook profile, but what we want to do is we want to link to our Contact section. So, we’ll say ‘#contact-section’. We’ll just call it that for now, and we’ll
make the link tag text ‘Contact’. Add to Menu. So, then what we have to do to make this work
is, let’s just go to our Home page and enable the visual builder. And we’ll scroll down to the Contact section. So, we want to jump to the section when someone
clicks Contact in the menu. So, we’ll go into the Settings, and under
Advanced – CSS ID, here we’ll give this section a unique identifier, which is the same as
the link we used over here. The only difference is that the menu link
just needs a hashtag in front, and what that will do is that will link this Contact menu
item to the section, and then we’ll save our page. We’ll also save our menu. And if we now go back to our Home page and
we click the Contact link, you’ll see it takes us down to that section. So, this is also how one-page websites are
created where you can click on any menu item and it just takes you down to that section. Okay, so now, if you want an attractive Mega
Menu for your website, what you can do is – we’ll also add Spanish, and we’ll also drag
it underneath our Blog, and then your open our Blog, and in CSS Classes, you just type
‘mega-menu’, and we save it once again. And if we go back to our Home page and refresh,
you’ll now see that underneath our Blog, instead of just a basic drop-down list, it’s now this
big mega menu. And this can look better with some extra styling
and some more items, but that’s basically how you create a mega menu using Divi. Okay, so the final thing I want to show you
when it comes to menus is how to make use of the link target function to link to pages
in a new tab. So, how you’ll do that is you’ll add a custom
link. In this case we’ll link to the OHKLYN Facebook
page. Facebook. And the reason why you sometimes want to open
a link in a new tab is because when you link to an outside webpage, you don’t necessarily
want users to navigate away from your website. To open up a link in a new tab, you just check
this box over here and Save Menu. And if we go to our front-end and refresh,
you’ll see if we click on Facebook, it will open it up in a new tab instead of navigating
away from our website. Okay, so you can also create a footer menu
which will show at the bottom of the page here in pretty much the same way. So, I’ll just select the pre-existing Footer
Navigation, but you can also create one just like we did the main navigation menu. And then, as per my sitemap, I’ll just add
the Contact and Privacy links to it. Save it. Okay. And if we go to the front-end and refresh
our page, then you’ll see we have this little footer menu at the bottom. So, yeah, that’s basically all you need to
know about menus. And now you should be able to go and create
the navigation for your website. Again, if you want to learn more about any
of this, watch our WordPress for Beginners Tutorial or check out the Divi documentation
which will also cover more on their mega menus and styling. Okay. So, now it’s time to make changes to the Divi
theme to change the look and feel of our website. One of the main areas where you do this is
the Divi Theme Options where we changed our logo and our brand color earlier. You can navigate to the Divi Theme Options
by hovering over Divi in the left-hand menu and selecting Theme Options. The Divi Theme Options is where you control
a lot of aspects of your site such as the navigation, default page or post layouts,
managing the social media links on your site, or even integrations and third-party APIs. So, we’ll just go over the most important
ones. There are too many options here to cover for
this tutorial, so we recommend that you head over to the Divi documentation where they
go into every aspect of the Divi Theme Options in great detail, and you’ll be able to learn
to use anything that you see here. So, first of all, we already changed our logo. The Fixed Navigation Bar is the sticky menu
at the top of your pages and disabling it will disable the sticky menu. Enabling it will make sure your menu’s always
visible. The next important ones are your Google API
Key. So, this is what you’d use to activate Google
Maps on your website. We already have our Google API key, but you’ll
need to go over to Google and log into your account to set up your own API key, then you’d
paste it in here. And whenever you make changes, you’ll have
to save them. Okay, so underneath that is where you can
enable or disable certain social media icons on your site. You’ll see that the options by Elegant Themes
are quite limited, and that’s why we recommend using Font Awesome, because they support way
more social media icons. And on the OHKLYN blog here, you can follow
the link to view a tutorial on how to do this. Okay, so to use Divi’s social media icons,
you’d enable the ones you want to use here and then you’d paste in the link to your social
media pages. So, we’ll paste in our Facebook link here,
and the Facebook link should now work on our site. Okay. Here are some more options that you can look
through in the Divi documentation. And also, if there’s anything you’re worrying
or wondering about, you can click on this little tooltip here, and it will give you
a short explanation. So, you can use this and the Divi documentation
to learn how to use all of these settings. At the bottom, you can use this field here
to add custom CSS to your website to add your own styling or options that aren’t available
in Divi itself. Okay, so the next tab is Navigation. And here you can toggle the visibility for
pages or categories within your menus, you can enable or disable drop-down menus, the
Display home link in our navigation menu, pretty much the same settings for categories. And then General Settings also just has to
do with how your menu functions. In the Builder tab, as you can see here, you
can enable or disable the builder for posts, pages, or projects. We want to use the Builder, so we’ll keep
it enabled. Some advanced options. Under Layouts, so Single Post Layout; these
are your actual blog posts. So, the settings you change here will affect
how your blog posts work. So, as you can see, you usually have a bit
of info whenever you write a blog post that displays in the listing or on the post itself,
and these are usually the author, the date, the category that the blog post is in, and
comments. So, you can enable or disable these here,
and you can also enable comments on your posts. Usually, you want visitors to comment on your
posts, so we’ll keep this enabled. And here’s for Single Page Layout. So, these would be your Home page, About page,
Contact page, and so on. Usually, you don’t let visitors comment on
your pages, so we’ll leave this disabled. And then, the same General Settings, Post
info section; so, this would apply to your blog category pages where your blog posts
are listed, and not the blog posts themselves. Ads. As the name suggests, this is where you make
changes to how ads display on your website and which type of ads you allow. So, Divi has some settings for SEO, but we
recommend using an SEO-specific plugin. We are like using Yoast SEO, and it’s one
of the best, free SEO plugins you can find. And the Integrations panel is where you can
add custom code your website such as your Facebook pixel, Google Analytics, or any other
type of code. And you can divide it in these boxes in your
head section, your body section, or at certain points within posts or pages. The last tab we have his Updates, and this
is where you can add your Elegant Themes username and API key to authenticate your Divi installation
and enable yourself to get the latest updates from Elegant Themes. Once again, if you want to learn more about
these settings, then check out the Divi documentation for Theme Options. We’ve provided a link to it in the article
accompanying this video. Okay, so the next thing I’d quickly like to
show you is how you can add widgets to your website. So, you can access widgets by going to Appearance
and then Widgets. So, widgets are modules that can add a little
bit of extra functionality to your website, and example of a widget is like a calendar
or an audio player or even just something that gives users quick access to different
pages or categories. Widgets come in what we call widget-enabled
areas. And if we use Divi, you’ll see that you have
all these pre-created widget-enabled areas. So, if we visit our website, the sidebar widget-enabled
area – just go to our Blog because we have a sidebar here. This would be the sidebar widget-enabled area. And here at the bottom, in the footer, you’d
have various footer widget-enabled areas. Okay, so it’s very simple to use widgets. In this example, I’ll just add a calendar. So, the only thing you do is you click on
Calendar, you check the area that you want to add it to, and you say Add Widget. And you can give it a name. So, let’s say ‘Calendar 2019’. Save it. And then, if we go back and refresh, you will
see that we now have this calendar widget on our sidebar. And the same goes for the footer. You can just – which one shall we add? Let’s add Categories. So, maybe if we want the user to be quickly
able to navigate to a category. And we’ll just say – yeah. ‘Check out the blog’ is actually a good one. Display as dropdown, why not? And then save it. And if we go back and refresh, we’ll have
this category widget at the bottom of our page. And in the same way, it’s very simple to delete
a widget. You just click Delete over here. And yeah, that’s pretty much all there is
to learn about widgets. Divi adds some extra widgets, so you might
want to check those out in the documentation if you want to use some of them, and you can
also learn more about widgets by watching our How to Use WordPress for Beginners tutorial. Okay. so last but not least, I’m going to
show you how to use the Theme Customizer to customize your website. So, you can either go to the Theme Customizer
under Appearance and then click on Customize or by going to Divi and then Theme Customizer. The Theme Customizer is where you make global
changes to the styling options for your website. As you can see, there is a preview of your
website on the right, and all the settings are on the left. Again, there are too many settings here to
go into each in detail, but we’ll show you the most important ones, and from there you
can use the Divi’s customizer documentation to learn about any other setting and to get
comfortable using the customizer. Okay, so what do we mean when we say that
the customizer makes changes to the global styling settings of your website? Well, it means that if you change an option
here, it will apply it to every page on your website. And then, you can go to a specific page and
change the styling options there so that that page looks different from the others. So, to show you exactly how that works, if
we right-click our heading over here and say Inspect, we can see that the font family used
is Playfair. If I go to General Settings – Typography,
and then try to change this header’s font over here – just going to scroll down – you’ll
see that nothing happens. And if you recall, we changed this header’s
font. And the reason why that is, is because this
header’s font is set to Playfair on the actual page in the Divi customizer. So, to show you, if we go to our Home page
and we enable the visual builder, and we go into the Settings – Design – Title Text, see? Here it is set to Playfair. So, because it’s – the font is set at the
page level, it overrides whatever setting you have got here. I’ll just set this back to Default. Okay, so now that we’ve got that covered,
let’s look at some of the most important settings that you can change in the customizer. So, under General Settings and Site Identity
is where you can change your favicon, which we did earlier. You can change your site title and also the
tagline. Under Layout Settings, you can just make some
changes to the overall layout of your pages. So, for example, we can enable this box layout
with the margins at the side. You can adjust your content width. And an important thing about the customizer
is that if you change something and you can’t remember what the original value was, you
can just click this circle icon over here to return it to the default. You can also adjust your sidebar width and
you can change your theme accent color. We’ll set this to our brand color as this
is something that’s used in random places throughout your website. Then, under Typography, you can change the
styling for text throughout your website. So, body text will be your normal sized text,
and then header text will be your H1, H2, H3s and so on. So, you can change the size, the letter spacing,
the style, and you can also change the fonts themselves. And we’ll also change the body link color
to our brand color. So, this will just change the color of any
link anchor text on your pages. And we’ll leave these as is. Then, here you can set a background color
or image. Usually, using Divi Layout Packs, the background
is invisible, but you might want to double check just in case. And you can also set it to some kind of neutral
background color if there happens to be some background visible. Okay, then in Header & Navigation is where
you can change this main navigation menu at the top, and under Header Format is we can
change the header style, so you can make it Centered, or Centered Inline, or you can even
pick a Slide In menu that slides in from the right, or a Fullscreen menu where when you
click on the menu icon it opens up a full screen menu. We’ll just change that back to Default. And you can also enable vertical navigation
so you have this top-to-bottom menu, or you can even hide your menu so that it’s only
visible once you scroll down and then you’ll see the sticky menu show. Let me just uncheck that. Okay, so then in the Primary Menu Bar is where
you can make settings to this main menu area over here. So, you can make it fullwidth, and you’ll
see our logo and menu move out to the sides, you can hide your logo image if you want to,
you can adjust the height, the font. And once again, we’ll set these to our brand
color over here. So, the Active Link is the – your Active Link
is the link of the page you’re currently on. So, since we’re on Home, Home is our active
link, and you can see we just changed it to our brand color. And this Dropdown Menu Line Color refers to
this menu between the main navigation menu and the dropdown or the mega menu. And you can see why it’s so handy to change
your brand color palette beforehand in the Theme Options, because now we can just pick
it from the color picker instead of entering the hexadecimal color code every single time. So, the secondary menu is located here above
your main navigation menu, but you have to go create a secondary menu in order to see
it. And so, we’ll just – to be thorough, we’ll
just change this to our brand color, but it doesn’t really matter since we don’t have
it over here. And the Fixed Navigation refers to the sticky
menu. So, you can also hide the logo and adjust
the height. And we’ll just change the background color
to be safe and the Menu Link Color. And under Header Elements, this is where you
can show or hide your social icons, you can show or hide the search icon, and if you’ve
got a secondary menu or a place to put it, you can also enter your phone number or email,
which is a popular practice with secondary menus at the top. So, the last one we’ll really look at is your
Footer menu, but actually we want to recommend that if you want to style a footer for your
website, that instead of doing it yourself, you make use of the free footer layout packs
that Divi provides. You can find a link to it on the OHKLYN post
over here. And these are already professionally designed
footer layouts that all look fantastic. And footers can be a bit tricky because you
have to work with widgets and different footer layouts, so it’s much easier and much quicker
to just use one of their layout packs. But as you can see, back here in the customizer,
you can change the column layout for your footer, you can change the background color,
you can show the social icons just like the main navigation menu and change the footer
menu options. So, we could set this also to our brand color,
the active link. So, yeah. And then the Bottom Bar refers to this one
right at the bottom, and you can even change this text over here. So, that’s the most important settings we
want to show you in the Theme Customizer. So, for example, you could change it to
something like that. A little signature. And yeah. So, that’s basically the footer. And that’s basically also it for the Theme
Customizer. Other handy things to know is that you can
view a tablet-sized view or a mobile view while you’re making these changes so that
you can be sure everything looks great. And as we always say, if you want to learn
more about any of the Divi settings, then you should check out the documentation. There’s a link on the post on the OHKLYN blog
over here. And you can go to the Theme Customizer specific
section over here, and that should help you get comfortable or get to know all the options
that are available to you so that you can take full advantage of the Theme Customizer. As always, when you’re done, publish or save
your changes. And you can exit the Theme Customizer by clicking
the X over here. Okay, and that’s it for customizing your WordPress
website. When you have your website looking the way
you want and you’re ready to launch, there’s a few best practices that you should follow
to ensure you get the best results. If you want your website to be searchable
via search engines like Google, the first thing is to ensure that your WordPress settings
aren’t blocking search engines from indexing your website. To check this, hover over Settings in the
admin panel and then click on Reading. Okay, we’ll scroll down to the Search Engine
Visibility section and ensure that the box is unchecked so that Google can crawl and
index your website. You should keep this box checked while you’re
still working on your site like we have but uncheck it once you’re ready to go live. Once you’ve done that, we also recommend watching
our step-by-step video on How to Add Your Website to Google Search. This will help make your website discoverable
via search engines like Google. We would also recommend installing Google
Analytics on your website. Fortunately, we’ve created a free step-by-step
video on how to do this as well. Using the Divi theme, you can add the required
tracking code within the Divi Theme Options tab under Integrations. We cover how to do this in the video. And that’s it for our tutorial on How to Make
a Restaurant Website Using WordPress. If you liked this video, hit the like button. And remember to subscribe to our YouTube channel
for more videos related to WordPress, digital marketing, and how to run a successful website. Your feedback is appreciated, so please leave
a comment below and tell us what you liked or if there was anything you found difficult
so that we can put together additional videos to help support you as you build out your
site. To get access to exclusive discounts, free
tutorials, and to stay in the loop on the latest updates, sign up to our newsletter
at OHKLYN (ohklyn.com), and until next time, happy building!

Only registered users can comment.

Leave a Reply

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