How to Create a Small Business Website | WordPress Business Tutorial
Articles Blog

How to Create a Small Business Website | WordPress Business Tutorial

August 10, 2019


Do you run a successful small business? Or looking to start a new business? Then you know how important a professional
and effective small business website can be. In this free WordPress tutorial, we’ll show
you how to create a small business website step by step. Whether you want to create a fitness website,
restaurant or bar website, auto-repair website, gardener or handyman website, florist or hairdresser
website, painting or contractor website, an accounting, bookkeeping or professional services
website, or any other small business website for that matter, then you’re in the right
place. We’ll show you how to create a website that
would typically cost you two to three thousand dollars for about a hundred and fifty dollars. We’ll cover the fundamentals of what you’ll
need to know to get your small business website up and running as well as manage your content
ongoing. For this tutorial, we’ll use the world’s most
popular content management system, WordPress. We’ll show you how to set up your hosting
account as well as give you access to discount hosting and a free domain. We’ll provide you with a discount to a premium
WordPress theme that gives you access to over a hundred free entire website layouts, free
support and over twenty hours of detailed video tutorials covering everything you’ll
need to know. The website we’ll create will be SEO-friendly,
feature high-converting, professionally designed page layouts, be 100% mobile-responsive and
include an intuitive, beginner-friendly drag-and-drop page builder. So, if that sounds good then let’s get to
it. To make this tutorial easy-to-follow we’ve
created a free step-by-step guide on the OHKLYN website that you can use to follow along with. We’ll add a link in the description below
and in the info card for this video. Here, you’ll find the written instructions
as well as any links mentioned in this video. We would recommend opening the post in a new
tab and following along. In this WordPress tutorial, we’ll use the
Divi WordPress theme by Elegant Themes. You can access a discount by following the
link in the description below, or if you’re following along on the OHKLYN website, you
can click this button here. Divi is one of the best WordPress themes available
as it has a beginner-friendly drag-and-drop builder, a massive community of users and
one of the most extensive video libraries that covers how to customize every inch of
your website. In the description below and on the OHKLYN
post here you’ll find a link to a page with all the free Divi layouts which you’ll have
access to for this tutorial. We’ll show you how to create your small business
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. For this tutorial we’ll use the food catering
layout and build this website step by step, including a home page, about page, services
page, contact page, and blog page. However, you could use any of the 100-plus
layouts on this page here as your starting point and we’ll show you how to customize
your small business website to create the exact website you want no matter which layout
you’ve picked. Okay, so the first thing we’ll cover is preparation. Let’s start with a few things you’ll need
to make the process of creating your site a lot smoother. These are a must have for any blogger website. They will be used throughout your entire 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 a 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. A 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. On top of these things, you’ll also need a
small budget of between $100-$250. This will fund the cost of your domain, hosting,
premium WordPress theme, images if required, and 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 will face as you build your website or blog in this article on the OHKLYN blog. One thing that will help you out a lot when
planning your website is to create a sitemap for it like this. Here you can see I’ve got all the pages that
I want on my website and I’ve got them organized under the menus that I’ll use to link to them. For example, all my main pages like Home,
About, Blog, Services, Contact will be linked to from my primary navigation menu. I’ll also have a smaller footer navigation
menu that will only link to my Contact and Privacy pages. You can also plan your site out further if
you’re going to have a blog by creating the blog categories and organizing them under
the Blog entry. So, here you can see I’d have categories that
are About Simply Delicious, which is my website, Events, Our Menus, and News. And I’ll also organize the subcategories under
Events like Children’s Parties or Corporate Events, or under Menus I’ll organize them
under the type of cuisine like Asian, Western with even sub-subcategories under that. So, once you have a sitemap and you know what
pages, categories and maybe even blog posts you’ll have on your website, you can then
go and plan it a bit further by sketching out the individual pages. You can use any tool, or you can even do it
on paper, but I like using Sketch.IO. So, I’ve created these ahead of time, and
if you know what your website will look like – I’ll just as an example use the layout,
the food catering layout that, from Divi that we’ll use for this website, and here you can
see I’ve created a rough outline of the homepage. Here, pretty much the same elements. Just very basic. And the About page below that. So, what you do here, this – this will just
be a very simple illustration of your website pages, because you’re going to hit more depth
later on. So, if we say, want to create a model of the
Blog page, so let’s go down to the Blog page. Here we go. So, quite a narrow header at the top, maybe
like this, with a heading, some small – some small text below that and a button. And on this side, you’ll have an image. And then below that, your first post will
be a big, highlighted image with a small excerpt from the post, so. Oh, and the sidebar, so we’ll have the sidebar
first and then we’ll have our big first post, and then smaller posts underneath that. Like – something like this. And they’ll also have some excerpts. Yeah. So, you can just go on and finish your pages
like this. Just a very rough and simple outline so that
you’ll know what pages you have and what will be on those pages. Then from here you can go into way more depth. So, I’ll create a new slide. I’ll make the height a lot more so that I
can draw with the whole page. And then we’ll just start with the outline,
so. And here if you want, I’ll actually just start
by adding the actual text I want on my site, so, I’ll call it Simply Delicious. And let’s just have a look at what we want
our finished product to look like. So, we’ll align it this way. Just a bit smaller. Some text at the bottom. Maybe something like this. There. And we’ll have a single button like this over
here that says View Menus. And that’ll be our header. So, if you want, you can actually even go
and put in the image you want here but we’ll just move on for now. And then below that, we have some blurbs with
our services and kind of features of our services, so these would look something like this. I’m just being very rough here. And they’ll have a small icon at the top,
which once again, you can actually add the icon if you want. And the text will be “Corporate Events” and
you’ll have some more text below that. I’m just showing you this is an example, so
I’m not going to put in everything. And you can sketch this out in as much detail
as you want. You’ll probably change it a bit as you’re
creating your website so don’t go too intense and think that you have to stick to whatever
you’re creating here. It’s just to give yourself something to work
with so that you don’t have to figure it out as you’re building your website. And this one will have the header at the bottom,
so something like Our Services and some more text below that, and a button. So yeah, of course you won’t know what your
end product would look like just yet but doing something like this will just help you speed
along your design process and, yeah, you get the idea. So, plan your pages like this and I promise
it’s going to save you a lot of time in the long run. The most important thing to ask yourself while
doing this is does the flow of information make sense, and does it 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 1-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 the 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 the 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 a
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 this 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 the 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 our 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,
Jetpack plugins as well as the Google Analytics plugin. Then, from the bulk actions drop-down, you
can just select the 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 sight, 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 in 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 back end 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 will 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 address. 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 the new secure admin account to manage your WordPress website. You will 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 is 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 back end. 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 dropdown is also on most
pages, and if you expand it, you’ll see that it gives you extra options and features 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 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
our 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 dollars. 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 login to 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 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 the 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 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 your logo, you 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 a 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 your 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 thumb 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
dropdown, select Move to Trash and Apply. And then, to make sure they’re gone, you can
go to Trash, box select them again and Delete Permanently. Okay so let’s take a look at our sitemap so
that we make sure we create the pages that we planned on. Okay, so once again your sitemap may look
totally different, but I want six pages in total which are my Home page, About page,
Services page, Contact page, Blog page and a Privacy page. So, I’ll go back to my Pages panel and then
I’ll click the Add New button here to create a new page. The first page I’ll create will be my Home
page. 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 the 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’re all ready for visitors to see your
page then you’d publish it and it’ll 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 important 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. Once it loads, you’ll have three options on
how to use the Divi builder. You can either start building a page from
scratch using the drag-and-drop page editor, you can choose a premade layout to start your
page off with a professional design which you can then customize using the drag-and-drop
page builder, or if you’ve already created a page using Divi, you can clone that page’s
design and settings and start customizing it from there. So, we’ll choose ‘Choose A Premade Layout’. That’ll open up the entire Divi library of
layout packs, and you can filter them by category over here, like Food & Drink, or you can search
for it here. I want the food catering layout packs, so
I’ll search for it. And here you’ll see all the food catering
layout pack page designs. So, if we click on the home page, you’ll see
that each layout pack has layouts for all the most essential pages of a website. So, for this its Home, Contact, Blog, About,
Landing, and Services, as well as Food Catering which is special – which is a special layout
for this particular layout pack. So, you can view a live demo of this page
here which will show you what the design will look like, and if you’re happy with the preview
you can just click Use This Layout to import it onto your page. Just give it a moment to finish. It’s usually pretty quick but we’ll see. Okay, almost there. Okay. Just give it a moment to load everything onto
the page. And yeah, here we have our home page with
the Divi layout pack, and you can see everything is here. It looks pretty great. And if you’re happy with it you can either
save it as a draft in which case it won’t be live on your website just yet, so visitors
won’t see it. Or you can publish it if you’re ready for
it to be seen by the world. So, we’re happy already, so we’ll click Publish. And once it’s done, if you click Exit Visual
Builder over here, it will take you to the live preview of the page, so what it will
look like on your website, and then you can enable the visual builder again from here
or you can go back to the back-end editor by clicking Edit Page here. Okay, so here in the back end, once again
you can go and preview your page, you can – okay, so we have published it. So, we can change it back to a draft so that
we can make changes without it being live on the site, and you can update it if you’ve
made any changes that you’re ready to also go live. So, just like this we’ll continue building
out our website. So, we’ll add a new page. This one we’ll call ‘About’. I forgot to mention it with the home page,
but since we selected ‘post name as our URL structure’, this ‘About’ will show in the
URL for this page. So, it’ll just be whatever your website URL
is, ‘/about’, which is the most logical way and the one we prefer. So, then we’ll click Use Divi Builder. Just let it save. Again, Choose A Premade Layout. We’ll use Food Catering again and this time
we’ll select the About page. And we won’t bother previewing this one, so
we just Use This As Layout. Give it a moment to import. Just a bit more. Okay, so let’s see what this one looks like. And yeah, you’ll see this time it’s a different
layout, this time from the About page. The images should load any moment. Yep. And we’re happy with this one as well, so
we can publish it. And then go back to Edit Page. Oh, and another handy shortcut is you can
just go to New over here and then to Page also if you want to create a new page. And I’ll just go on and create the other pages
I want on my website, and you should do the same according to your site map and then I’ll
just skip ahead. Okay, so here are all my pages. I hope you’ve gone and created all the pages
in your sitemap. So, an important thing you’ll always have
to remember to do is to change the default homepage for your WordPress website, and you
can do this under Settings and Reading. So, what this change will do is it’ll make
sure that when someone follows the URL to your website that the first page they see
is the page that you set as the homepage. And this could be your homepage or your landing
page. It could also be any other page, but those
two are the most logical options. So, the default ‘Your latest posts’ option
makes your homepage almost like a blog category page where all your blog posts will be listed
in chronological order. But we want to use our own page, so we’ll
select ‘A static page’ and then under Homepage we’ll select Home. We’ll also change our post page to our blog
page. What this will do is it will make our blog
page we just created our default WordPress page where it will display our blog posts,
and this will make sense in a bit when we’ll go through and create our posts and categories. So, we’ll save our changes and then we can
move on to creating our blog categories and posts. So, we’ll go to Posts, and this is usually
where you’d see all your posts. If you’re going to have a portfolio instead
of a blog, then it works in exactly the same way. So, you can take projects over here and just
apply everything that I’m going to show you now. So, the best place to start is to create our
categories. And if I go to my sitemap, we’ll see that
my categories are About Simply Delicious, Events, Our menus and News with some subcategories. So, the only thing you need to do to create
a category is type in a name. My first one will be
About Simply Delicious. And if you have any special characters in
your name that aren’t URL-friendly then you can type a different slug here without those
characters so that there aren’t any problems navigating to that page, that post. But we don’t need one here. And then this is a top-level category, so
we don’t need to choose a parent, and you can optionally add a description, then click
Add New Category. Okay, so once it’s created, you’ll see it
over here and you can edit it again to change the name or the description. You can delete it over here and you can view
it here. So, Uncategorized is the default category
WordPress creates where it will put all your posts that you haven’t put inside a category. Then we’ll create the rest. So, the others will be Events. Again, don’t need a parent. And events will have some sub categories,
which are Children’s Parties, Corporate Events and Weddings. So – and for this one, we’ll choose the Parent
category as Events because we want Children’s Parties to be organized under it. And if we Add New Category, you will see it
create Children’s Parties with this line next to it which shows that it’s one level down. On the right you can see the URL-friendly
slug without the apostrophe. And then we can go on and create our others,
so Corporate. This doesn’t have a parent category. And Asian, let’s say, Cuisine. And this we’ll put under Our Menus. And then under that is Japanese. And we’ll select Asian Cuisine, and if we
add that, you’ll see Japanese has two lines to show that it’s two levels down. Okay, so again I’m, going to go and create
the rest of my categories and you’ll do the same and I’ll just skip ahead. Okay, so here are all my categories, and now
what we have to do is create some posts that will go within these categories. So, we’ll go to All Posts or Posts – Add New. Then we’ll click Add New. Okay, so the first post we’ll create we’ll
just call – something like that. And as you will see it’s a very similar interface
to that of the pages. And just like our pages, because we selected
post name, this title here will be used as the URL for this specific post. And some of the important settings I want
to show you is, categories is where we will actually choose the category. So, since this is about our company or business,
we’ll select About Simply Delicious, which will organize it under this category. Then, Tags are just random phrases or words
that you can use as an organizational tool and that users can use to filter or search
for posts. The Featured Image is the image that will
show at the top of the blog post and it’ll also show as the image for the post in a blog
category page in the post listing. So, if we set it, let’s say – let’s just choose
this one. Select. If we save. Okay. And just like a page you can also use the
Divi Builder to customize a blog post or even to import a layout, but I’ll just use the
default editor here and then I’ll add some text. So, just something like that. And if we preview it you will see that the
featured image is at the top with our text at the bottom. Okay. And below that you will want to make sure
that comments are – if you want comments – but usually you’d want comments to be allowed
on your posts if you want some user interaction. And also, you can change if the sidebar should
be displayed and how the navigation should function. So, yeah. That’s all we want here. So, we’ll click Publish. Publish. Okay. Then we’ll add a new post. And we can say something like – something
like that, and just some random text. And then we’ll organize this one under our
Japanese blog category and Publish. Just to show you the difference. Okay, so now, to see our blog posts, if we
go to our pages and we view our Blog page, it should show our blog posts because we set
it as our posts page, and you’ll see the posts from both categories because this is our main
blog page, so all the categories’ posts will be displayed here in chronological order,
and if we click on them it’ll take us through to that post. But yeah, this just shows you how blogs will
work. And as you can see, the category that the
post is organized under will be shown here, and if we click on that we can actually view
that category page. Okay, so the next thing we want to do is to
create a menu for our website, and as you can see over here, WordPress by default uses
this menu that uses every single page, category or post you create in the menu structure. But we want more control over what’s shown
here. So, to create new menus we’ll go back to the
dashboard, then to Menus under Appearance. Okay so this is your menu dashboard where
you create and manage menus. This is the main panel where you can edit
your menu structure or create new menus, and here on the left is everything that you can
add to your menu such as pages, posts, custom links and categories. So, we’ll start by creating a new menu. We’ll call this one Main Navigation since
it will be our top navigation menu. Create Menu. Okay, so on the Menu page under Screen Options
you will see that you can add more items that you can include on your menus like tags, formats,
projects or project categories. Yep. You can also activate some advanced properties. So, these aren’t too important but two that
are important is CSS Classes and Link Target. Link Target will help you choose whether to
open links in a new tab or in the current tab and CSS Classes will help us take advantage
of Divi’s mega menu function. So, okay, to add items to your menu, the only
thing you need to do is select them here on the left-hand side and then click Add to Menu,
so we’ll add Home, About, Services, Contact and Blog, just like on our site map. Okay. And once your items are here you can rearrange
them by dragging them and you can also add posts, so we won’t – don’t want to add any
posts directly, but we can maybe add a category. Let’s add these to our menu and then what
I’ll do is I’ll drag and drop them like this, and [that’s] – we’ll put them under our Blog
menu item, so now they will show in a dropdown. What I also want to do is instead of having
an actual contact link to my Contact page, I’ll just remove this one and I’ll add a custom
link, and let’s say the URL is ‘http://#contact-us’. And picking a custom link like this with hashtag
and a name or ID, if we go into our page and we make the idea of a section or element the
same as this, then this link will take you to that part of the page. And we’ll show you how to do this later on,
but I’ll just add it to my menu for now. You can also just make a custom link hashtag
if you wanted to refresh the page or you can actually link to another website like putting
in your YouTube or Facebook profile link, whatever. Okay, and then here at the bottom we want
this to be our main navigation menu, so we’ll select Primary Navigation Menu, and as you
can see here is that option to automatically add pages to your menu, but we don’t want
to do that. So, let’s save and then see what we have so
far. Okay. So here we can see we don’t have all that
other stuff in our menu. We only have the items that we selected. And if we hover over Blog, the categories
will be in the drop-down list below it. So, if we go back to our menu, if we want
to change this to a Divi mega menu we just have to open it, and in the CSS Classes panel
we just have to type ‘#mega-menu’. Save it once again. And if we go back to our site and refresh,
you’ll see that it’s now this handy mega menu, which you can style. It doesn’t look too great now, but you can
style it further using the theme options and the theme customizer. So yeah, that’s basically how you create and
manage menus in WordPress. If you want to know more about this then you
should check out our How to Use WordPress for Beginners article where we go more in
depth. So, in the same way you can also create a
footer menu just by saying, create a new menu and then selecting Footer Menu. And we’ll just edit the one that’s here. So, we’ll select it. And the only things we want as per our sitemap
is Privacy and Contact, so we’ll add it. Remember to always save your menu. And if you go back and refresh, then here
at the bottom we’ll have links to our Privacy and Contact pages. So, to create a footer menu, we’ll just say
create a new menu. Let’s say ‘Footer Nav’. Create. And then here we’ll select Footer Menu, and
we want to add links to our Contact and Privacy pages. So, Privacy, Add to Menu. Save. Refresh. If you go all the way down, you’ll see we
have them here in our footer menu. Okay so depending on what pages you want in
your site and your categories you can go on and create your menus just like this. You can also take a look at How to Use WordPress
for Beginners tutorial to learn more about how to use menus for your website. 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
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 add 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 is 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. And if we now go into our website, and okay,
let’s go into the Contact page. You should see that Maps is now working. 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 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’ll 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 – 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 keep it enabled. Some advanced options. Under Layout, 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 user – the visitors to comment
on your posts, so we’ll keep this enabled. And here is 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 post 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 to 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 step we have is 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 the link to it in the article
accompanying this video. Okay, so I just very quickly want to run you
through how to use widgets on your site. And you can use widgets to add some functionality
or some small extra features. So, to access widgets, go to Appearance and
Widgets. Again, if you want more information on this
or how to use it, we recommend reviewing the documentation. So here on the left, you have all the available
widgets that you can add your site. There might be some specific to Divi but there
are a few default WordPress widgets. Here are your widget enabled areas, which
are areas on your site where you can add widgets. So, the sidebar is something you should know
about already, and if we go to a preview of our site – our home page doesn’t have a sidebar,
but our blog does, so we’ll go over there. So, here’s the sidebar with its widget enabled
areas and its widget. Another area that can have widgets is the
footer, but since there are no widgets there yet you will see there’s no widget area. So, to add widgets you can – let’s add a calendar. So, you just select the widget on the left,
select which area and click Add Widget. And you can give it a name. Something like that. Save it. The footer area, we’ll also add one. Take Categories. ‘Check out the blog’ sounds good. Display as dropdown. Show post counts. Show hierarchy. Okay. Save. So, if I go back and refresh, you’ll see our
– the calendar widget we added over here. And if we go down to the footer you will see
the widget we added here. Oh yeah, if you want to remove a widget, just
click the Delete link over here and it will remove it. So yeah, if you want to learn more about widgets
check out the documentation and then we’re off to the next part of customizing your site
which is the Theme Customizer. Okay so to access the Theme Customizer you
either go to Appearance and Customize or Divi and then Theme Customizer. Okay, so this is the Divi WordPress Theme
Customizer. It’s where you can make changes to the appearance
of your website by changing the global styling options of your pages and elements on your
pages. So, as you can see there are a lot of options
over here, and even inside these categories there are subcategories with even more options. So, we can’t cover everything in this tutorial
but if you want to know anything more about any of the settings we’ll look at now just
refer back to the Divi documentation’s Theme Customizer section where they’ll have a wealth
of information on anything we’re going to cover. So, an important thing to understand about
how the Theme Customizer works is that it makes changes to the global settings of your
website. What this means is that if you change, let’s
say the header over here, it will change all the H1 headers on your website and you can
then go and change those headers for specific pages on those pages themselves. So, to show you what we mean and why this
is such a handy option I’ll just quickly give you an example. So, if we inspect this header over here, scroll
down, you’ll see that it’s the Abril Fatface font. So, if we go into General Settings and Typography
and try to change this under the default header font to, let’s say Raleway, you’ll see that
it doesn’t change. So, the reason for this is because it’s set
to Abril on the page itself. If we go to our dashboard, and then Pages
– Home – Edit With The Divi Builder. Okay. And we go into the settings for
the section, and Design – Title Text. So, you’ll see that the font is set here. And if we set this to default then it will
be Raleway, because that’s what it set to in our customizer. But if we set it to Raleway over here – we
save it, then we go back to our customizer and we click Publish and refresh, you’ll see
that it’s now also set to Raleway, and if we set it to the default theme font, it will
stay as Raleway. So yeah, as you can see, you can use this
to make changes to the global settings. And if for some reason you want a specific
page to look different, then you can go change it on that page. But it helps with keeping the design of your
whole website consistent without having to go change little settings like these everywhere. Okay so if we go back under General Settings
and then Site Identity; so, this is where you can change the Site Title or Tagline,
and this is, if you remember, where we uploaded our favicon earlier. Under Layout Settings is where you can enable
layout options like a boxed layout that has these spaces at the sides. You can adjust your content width. If you make any changes here and you don’t
like it, you can just reset it by clicking these little reset icons to the side of all
the options. You can say Use a Custom Sidebar Width so
that you can adjust the size of the sidebar which we don’t have on our home page. And then Theme Accent Color, so this will
make changes to the color of small things throughout your website. And since we added our brand color earlier,
we can easily just select it from this palette over here instead of typing it here like that. So, we’ll just select it here. Go back. Typography. So here you can change the size, height, spacing,
styles of most of the text on your pages. So, if we find some body text – so the default
color is black. If you make this yellow, yeah, that doesn’t
look great, so we’ll set it back. We’ll set it to default. We can change the header fonts over here. We’re happy with what they are at the moment. You can change the Body Link Color, so this
will change the color of links. We’ll just make it our brand color. I’m not sure if there are any here at the
moment. No. Then, under Background, we’re not really using
a background for this theme, so this doesn’t really matter. I don’t think you’ll see it anywhere. Then, back. Header & Navigation. So, you’ll probably want to spend some time
with these settings as they change the header over here, which is usually an important part
of your website’s design. So, under Header Format, you can choose from
the header styles like Default, Centered where your logo’s at the top, Centered Inline so
that it’s between your menu items. Slide In. So, here your menu will slide in from this
hamburger icon over here. Fullscreen in which case when you open it,
you’ll have a full screen menu like this, and Hide Navigation Until Scroll, so when
someone navigates to your site, your menu won’t be visible, and then only when you scroll
down the menu will pop up. A sticky menu. So, we’ll set this back to Default. You can also set in a vertical navigation
menu. So, in that case it will be over here like
this. But yep, I like the default horizontal version
more. Okay. So, Primary Menu Bar, this will make changes
to this menu bar over here with the styling options. So, we can make it fullwidth which looks pretty
good. You could hide the logo. You could adjust the height. Maybe we’ll make ours just a bit bigger. 50. You can make the – you can adjust the logo’s
height. Text Size, so the text of the blog items,
of the menu items. Spacing, fonts used and colors as well. So, again will change both of these to our
brand color. And as you can see, this is why you should
go set your brand color as one of your – of the colors in your palette, because it just
makes it so much quicker than actually typing in the hexadecimal code. Then we have the secondary menu bar. So, depending on where you put it, the secondary
menu bar for Divi will either show here on top of your main navigation bar or here on
the right side. But the only way it will show is if you’ve
already created a secondary menu which is why we don’t have one just now. But just to show you, the settings are mostly
the same. Make fullwidth, change the font. We can also just set our brand color to be
safe. Yep. Just like that. And it also has a fade-in animation or whatever
other animation you’d like to put. Okay, then, Fixed Navigation Settings. So, these settings change how the sticky bar
operates. So, that’s when you scroll down and you see
this menu stay at the top. And just like the main menu, you can change
the height, the text size, the primary colors, secondary colors. Yeah, a whole bunch of colors. So, once again we’ll just change it to our
to our brand color. And so, yeah you can see just how handy it
is to save your brand color beforehand because it really saves a lot of time instead of typing
everything in. Okay, so then Header Elements. So, here we don’t have any social media icons
in our header, so – but in the secondary menu, you can see there, you can show or hide your
Show Social Icons. You can show or hide the search icon here
at the top corner. And if you had a secondary menu you could
also enter your phone number or email here to just have your contact details on the page. Okay, next up is the footer. And we won’t really go through the footer
here because styling your footer nicely can be quite tricky, which is why we recommend
making use of Divi’s free footer layouts that you can find via this link in the article
on the OHKLYN blog. These are pre-designed footer layouts and
they’ll save you a lot of trouble because they’re already attractive, they work well,
so yeah. You should use them instead. But you can also customize your footer’s layout,
you can add widgets to the footer as I just showed you and customize them here. So, there’s a lot to go through. Then there are Buttons, and these are also
just pretty basic styling options. You can change the color of your buttons. You can change the sizing, the fonts. So, pretty much the same stuff as we’ve seen
so far. And the hover style is when you hover over
a button, so you could change the color if you hover over it or the text color if you
hover over it. Something like that. Yeah. So, that’s all we’re going to cover for the
customizer. And like I said before, if there’s anything
here you want to have more information on or you want to know how to use, then just
look at the Divi documentation and they really put a lot of effort into guiding you through
every single setting. Last thing, just to show you is, you can also
customize your page in a tablet or mobile view so that you can see what it looks like
on different devices. And here at the bottom, if you’ve got some
coding skills you can also add your own CSS for custom styling and so on. Okay, so once you’ve customized your page,
then here at the top if you click the gear icon you can either save it as a draft in
which case it will save your changes, but it won’t make those changes go live on your
website. You can discard the changes, so basically
just reset it to before you started customizing, or you can publish if you’re happy with what
you’ve done and you want the changes to be live on your website. So, we’ll publish our site. Just give it a moment. And then you can close the customizer by clicking
this X icon over here. To read more about any of the settings that
we’ve covered or those that we haven’t, just follow the link to the Divi documentation
from the link on the OHKLYN article over here, and then just go to the Customizing Divi section
and have a look at their articles and videos. Okay. So now it’s time for what’s arguably Divi’s
best feature: the Divi drag and drop page builder. Okay, so to access the Divi Builder we’ll
create a new page. And for the sake of this tutorial I’m just
going to call it Test. And then we’ll click Use Divi Builder. And this time we’re going to build the page
from scratch, so we’ll select this one. Okay, so we’re going to model our page after
the home page that we created earlier just to illustrate how the Divi Builder works and
how you can recreate great designs like these. So, the first thing we want to do is create
this – I’m just going to enable the visual builder first – the first thing we’re going
to do is create this big fullwidth header area at the top that has our heading, call-to-action
button and this background image with – you will see it has this effect as if it’s faded
to the one side. So, to do this we’ll go back, and you can
think of the Divi Builder as organized under sections, rows and modules. So, sections are these big areas of related
content. Rows organize these sections into rows, horizontal
rows, and then there are modules which are the actual elements on your pages. So, I don’t want to use this default section
that Divi creates. So, because I want a fullwidth area for this
top part of my page, so I’ll select it. Then we want the fullwidth header module. And then before we edit this, I’m just going
to delete this default one Divi put in. Okay, so you can drag modules around like
this, you can duplicate them like this, and you can delete them like that, and you can
save them to your library here. And to change the design or appearance of
the module, you’ll click this gear icon on this bar. So, the sections are purple or blue like the
one we just deleted, and modules are gray. You’ll see rows later on. They’re green. So, we’ll edit it. Okay. So, this is our main title. We can say something like – something like that. We don’t want to sub it. Button #1. The example actually had a good one, something
like ‘View Our Menus’. And we don’t have a Button #2. I’ll just keep this text here as dummy text,
but you could change it to whatever you’d like. And then we won’t look at this just yet. So, as you can see the content is literally
the textual content that will be in a module. Design is more the styling. So, here. Okay. Our layout’s fine. We want it orientated. The Scroll Down Icon is this button over here
that if you click it, it scrolls down to the next section. So, we don’t want it for this one so I’m just
going to disable it again. Next one we want to look at is text. So, as you can see, we’re using dark text,
so we can just change it here to Dark. And then the Title Text. So, title text will be your headings. So, what Divi does that’s quite handy is it
organizes all your title settings under heading levels. So, H1,2,3,4,5,6, and if you change them you
change the setting for that level of H1 under your content. But this is our H1, so we’ll stick with that. We’ll change the font to Raleway. We can maybe make the font to Semi Bold. And we’ll definitely make the size of it bigger,
maybe around 60 looks good. Letter spacing we’ll leave the same. We’ll give it a bit more breathing room by
making the line height bigger, maybe 1.2. Okay, then the body text. This one we’ll set to Cabin. Let’s see how this looks. I think I’ll leave this as Regular. We also want this line but it’s still fine. We’ll also increase the text size just a bit. Also give it a bit more breathing room. And yeah. Okay, so we don’t have any subtext. Then, for some reason Divi puts Button Two
before Button One, but since we only have a Button One, we’ll just open that one. Say Use Custom Styles to open up its settings. So, we can’t really see the text now, so let’s
change the color first. We’ll make our text color white, and then
the size may be a bit bigger. 24, that seems good. You could change the background color of your
buttons. So, I know they went for something orange. We’ll just do the same. I’ll just shift it a bit. Something like that. Set the saturation down a bit. And the border width we’ll make a bit bigger. And we don’t want to see the border, so I’ll
change the border color. And you can just go here and copy this color
and then in the picker here just paste it so that we don’t see the border. The Border Radius rounds the corners of your
buttons. So, as you can see, the higher we set this,
the more rounded our corners are. I don’t want to round it a lot, but maybe
7 is good. You can also adjust the letter spacing, so
we’ll maybe make this a 4. We’ll also change the font to Cabin. Regular font weight. I’ll stick with Regular. You can use this to make it all caps. Of course, you can also just write it as all
caps, but it’s up to you. Then, the icon is this one you see when we
are over it. So, it’s set to this arrow by default, and
it’s up to you. You can change it to anything you’d like. I kind of like this arrow so I’ll keep that. And you can also change the icon color. And this, if you set it off, the icon will
always show. If you set it on, it will only show when you
hover over it. You can give the text a shadow, and then you
can give the button itself a shadow. So, just like our example, I’ll use a drop
shadow like this. And I just like to move it a bit to the side
so that the shadow falls to the bottom and right. So, you can adjust it down a bit. And the Blur Strength, maybe just like that. The Spread, just like that. And I want to make the shadow color the same
color as – okay, so that’s it for our button. The next thing we will do is adjust the size
of our content here. So, I’m just going to move this to the side
and then set it 700 pixels, may be a bit less. Yeah. Let’s do it like that. So, it just reduces the size a bit so that
the content doesn’t go across the screen. Then, under Spacing we want to make this header
a bit bigger, so here under Custom Padding we’ll – 10vw, 10vw. Yeah. That’s looking much better. A handy feature of the Divi settings is that
you can click this phone or tablet icon here and then you can adjust padding or sizing
options for different devices like tablets or phones. So, we can set our phone to let’s say, 2vw,
and 2vw so that it would look – so that it’s appropriate for phones and everything isn’t
one size fits all. Okay, that’s all for our header element for
now. So now we’ll do the background image. So, actually first, let’s go back and then
we’ll just remove this background color. Just set the opacity to zero so we can see
what’s going on, and then we’ll actually put the image into the section. So, we’ll go into the Section – Background,
then the image tab over here. So, again you can add it from your media library
or upload an image. So, we’ll go down and select this one. Okay, so now we want to create that effect
as if the image is faded out to one side. So, what we’ll do is we’ll actually go back
into our module settings and then we will just scroll down to the background. And we’ll add a gradient because we want it
to fade off to one side. So, I’ll make both colors white. So, with a gradient you select two colors
and then you choose where they fade into each other and how strongly they fade into each
other and so on. You’ll see now. So then, this one we’ll set the opacity all
the way down. And as you can see it’s still a bit faded,
so we can change it from a linear gradient where it fades in a straight line to a radial
gradient that fades in a circle. So, we’ll choose Radial. Okay. And then, we want it to go off to the side,
so we’ll select the side from here. Left. Okay. Then the Start Position. Maybe around 30%. Then the End Position. Maybe 60%. Okay, so yeah. That’s pretty close already, just with a few
adjustments. And you can of course go and design whatever
you like. So yeah, the next section we’re going to create
is this section over here, the services section with a bunch of blurbs. So, as you can see here, it actually a row
structure. And I’ll show you how that works in a moment. And then below that we have a text element
and another call-to-action button. Okay, so what we’re going do first is we’ll
add a new section, and then for this one we’ll choose a three-column row. And this Insert Module will immediately pop
up when you choose a row, so we’ll go ahead and the first thing we want is an image. So, Image. And it’s one of these icons, so which one
do we want? We want the paper and the tie, so this one. Okay. Cool. So, as you can see, this is our row, and it
created three slots for us in this row that all act like columns. And we can add another element below this
one by clicking this gray Add New Module icon here, and this will be a text element. Okay. And firstly, the text will have a heading
in this case: Corporate Events, and then some text below that. I’m just going to copy theirs. And in this text editor, you can select text
and then you can change it to let’s say, Heading 5. Actually, let’s make this a H3. Yeah, that looks better. And then, to put a link there we’ll just highlight
it, and then to turn text into a link you just click this Insert/edit link icon here. And because we’re going link to our corporate
events category on our blog that’s on this website, we can use what’s called a relative
URL. So, with a relative URL, you don’t need to
include the ‘www’ and ‘https’ part of the URL. You just have to create the part that follows
your organizational structure. So, ours is going to be under ‘categoriescorporate-events’. Like that. So, just click Ok and you’ll see it’s now
a link. And yeah, that’s it for our blurb. So now, to save time, you can either recreate
all of these or you can just duplicate them and then drag them across like this. And then you can just add in the image. This one is the calendar, so calendar. Okay, and then we can just drag this one above. Okay, and like that you can go on and create
all your blurbs. You can even instead of going to create a
new row, you can just duplicate the entire row when you’re done. And yeah. In the interest of time I’m going to skip
ahead, but I just wanted to show you this. Okay, then below these rows we’re going to
create another one, but I’ll just delete these modules and I’ll change the structure to a
single row and then what we’ll insert here is our text module. And I’m just going to copy their content again
and paste it in here. Oh, and this is already a Heading 2, but this
time just go to Design – Text, and we want to orient everything to centers. We’ll go to Heading Text. Nope. not here. Text Orientation to center. And then we can just add another module for
our button. But I already showed you how to create a button,
so we won’t do that now. Okay. The last thing I just quickly want to show
you, if you want to create a contact form, there’s actually a module for that. So, we can just go add a new section. This one can just be a single row. And Contact Form. And you’ll see it already has all these fields
for you. So, you can even type a message, something
like – something like that. But what I want to show you is – so if you
remember, we created this link in our Menu section, so – and we wanted to link to this
section at the bottom. So, what we’ll do is we’re going to our Section
Settings. We’ll go to Advanced, CSS ID & Classes and
we’ll call this ‘contact-us’. So, what this will do is now that this link
in the menu will link to this section on our page. So, to show you we’ll save this, and we’ll
save our page and publish it. And then if we exit the Visual Builder and
we click on this link, it’ll take us down to our contact section. So, that’s also you can link to specific content
sections on your pages. Okay, and that also brings us to the end of
our How to Use the Divi Builder part of the tutorial. So, I hope this gives you the confidence to
go and play with it yourself. It’s really one of the best builders around
and it’s a lot of fun to use once you get used to it and you know everything that you
can do. But again, the best way to learn more is to
access the free Divi documentation that we’ve also provided the link for in the article
over here and then go to the Divi Builder section and here you’ll have access to in-depth
tutorials and a lot of hours of video tutorials to help you get to know all the different
functions and features. 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 this 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. That’s it for our How to Make a WordPress
Website tutorial for 2019 and 2020. 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 (www.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 *