WordPress Tutorial for Beginners 2019 [NEW]
Articles Blog

WordPress Tutorial for Beginners 2019 [NEW]

September 1, 2019

Welcome to OHKLYN. In this WordPress tutorial for beginners,
we’ll show you how to make a WordPress website for 2019 and 2020 step-by-step. We’ll cover the fundamentals of what you’ll
need to get your website up and running and provide an introduction to the WordPress Content
Management System or CMS to get you familiar with creating and managing the content and
design of your website. We’ll show you how to set up your hosting
account and give you access to discount hosting and a free domain. We’ll use a premium WordPress theme that gives
you access to over a hundred free entire website layouts, including everything from a creative
or freelance website, to a business or consulting website, restaurant, cafe, or bar website,
handyman, gardener, or trade website, travel, photography or design website, or a wedding
or wedding planner website, just to name a few. The website we’ll create will also be SEO-friendly,
feature an optimized UX design, be 100% mobile-responsive and will include an intuitive beginner-friendly
drag-and-drop page builder. In this tutorial we’ll show you how to create
the exact website you want. So, if you’re ready to learn the fundamentals
of WordPress, then let’s get to it. To make this tutorial easy-to-follow, we’ve
created a 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,
as well as in the info card, for this video. In this post 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. If you don’t have an active Elegant Themes
subscription, you can still follow the links to download these layout packs and upload
them to your site. That being said, we would recommend you upgrade
to the latest subscription or get the lifetime option like we’ve got so you get access to
all the latest features, updates and designs. We’ll show you how to create your WordPress
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, so before we get going, let’s begin
with the end in mind and go through what you’ll need to prepare, as well as give some thought
to the structure and the outcome you want to achieve. 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 blog or 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 to $150. 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. Another thing that will make the whole process
a lot easier is to draw out a sitemap that conceptualizes what your site will look like. As an example, I created this slide with the
sitemap of what my website will look like. As you can see, here are the pages that will
be on my site: Home, About, Services, Contact, and a Blog page. These will all appear in my main navigation
menu. I’ve also listed the categories for my blog,
which will be: Who Am I, Branding, Corporate Identity, and News. If you’ve got the time and you’ve got a good
idea already, you can also create subcategories or headings for articles within your categories. So, I’ve also got my footer navigation where
I’ll again link to the contact page as well as the privacy or terms of use or terms and
conditions page. The next step would be to come up with more
details about what will be on these pages. Let’s look at how you could do that using
one of my favorite tools, Sketch.IO which you can find a link for in the description
for this video. In the interest of time I’ve already drawn
out one or two pages, but you’d go about it like this. So, we’ve got a Home and About page already. We’ll then draw a blog page. Blog. And then you just very – in a very basic way
draw out how the page would look. So, let’s say our blog will be a staggered
list with an image and an excerpt. It would look something like this. And of course, on every page we should have
our navigation menu at the top and so on. So, this will give you a good idea of what
content is on which of your pages, and you can go on and draw a Services page, Contact
page, every page that you add in your sitemap. Then, the next step would be – we’ll just
make this longer so that it reflects a long page that you can scroll down through – is
to go into a lot of detail on every page. So, if we do our Home page, then – we have
an example of what our end product would look like, but just to show you, so if you want
a header image at the top with your main heading, a subheading and two buttons then you just
draw that in. So, we’ll start with our navigation menu. Here you can write your actual navigation
links, like ‘Home’. And you can go on with About, Contact, Blog,
all the links you’d have in your navigation menu. Then we have a header image at the top, say
our name and profession. So, something like that. Set the alignment. You can put in your slogan. We’ll just add the buttons for now. And there’s really no wrong or right way to
do this. You can do it on paper. You can do it using a sketching tool like
this. And you can also come back and change it if
it doesn’t work. And this would be something like a call-to-action
button. And maybe a button to view services. And you’d go on creating your website like
this. If you look at the next section, it’s a services
section with the square blurbs and a heading at the top as well as a ‘learn more’ button,
so we’d go back and then – so, again, add a service heading, ‘My Services’. And some text below this, and then the actual
blurbs. So, these blurbs should have an icon at the
top, some kind of picture, and then let’s say – center align that. So, you’d go on like this. And you can go into as much detail as you
want. It really depends on how well you want to
plan it at the beginning. And you can go on and create your entire page
like this. We highly advise that you do this because
it just makes actually building your site a lot smoother and you don’t have to think
about this as you’re working with WordPress. The most important things to keep asking yourself
is: does the flow of information on your pages make sense? And does it take the user 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 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 name’ 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 on 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, we’ll 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 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 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 Home page, 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’ll also impact the performance of your
site as they add some unneeded complexity. So, we’ll just multi select the WPForms, the
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 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’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 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 a 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 to 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’ll 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 you 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, we’ll need to download the
Divi theme. Just login to your Divi Members Area and download
the theme from here as the ‘.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 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 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, you’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’. And 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 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 time 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 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 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. Then, you can either use existing content
in which case you’ll use the content that you already placed on your page using the
default editor and then customize it using the drag-and-drop Divi Builder, choose a premade
layout, which is what we’ll do now, or clone one of your existing pages. So, we’ll go with Choose a Premade Layout. This will open the library of free Divi layouts. We want to use the Business Coach layout,
so we’ll search for it here. You can also filter by category. Then you’ll see there’ll be a number of layouts
for different pages. So, there will be a Business Coach About page,
a Business Coach Blog page, a Business Coach Contact page, so you can build your whole
site with a consistent design. So, we’ll look for the Home page. Here it is. Click on it. And you can also view the live demo here which
will open up a demo of the site that you can scroll through. Also go to different pages. And then, you can see the other layouts in
this back here, and ‘Replace existing content’. So, like you saw, I typed a bit of text earlier,
and if we check this option, it will remove that text and replace everything on the page
with the layout, which is an optional one. So, I’ll click Use This Layout. Just give it some time to import. And here you will see the entire design and
all the demo content loaded onto your page. So, just like with the default editor, if
you want to save your changes but you don’t want to make it live on your site just yet
you’ll, save it as a draft first. And if you want to push your changes live,
you’ll click Publish here. You can also exit the Divi Builder by clicking
this big X icon here or click Exit in the toolbar, which will take you basically to
the preview of your page, and then you can go back to the visual builder here or Edit
Page to go to the back end of your page. And we’re back here. And once you’ve published the page, you save
your changes on the live page by clicking Update, or you can switch it back to a draft
in which case the page will no longer be live, and you can edit it offline again. So, we’ll click Update. And that should do it for our Home page. So, we’ll go back to All Pages and then create
the other pages for our site. I’ll run you through one more as an example. So, Add New. About. By the way, since we selected post name as
our permalink structure, this ‘about’ will also be used in the URL for this page. Then, we’ll click Use Divi Builder. It just sometimes saves before opening the
Divi Builder, so that’s why it’s taking a bit long. Choose A Premade Layout. Search for ‘Business coach’ again, and this
time we’ll choose the About page. We’re happy with how it looks, so we’ll choose
Use This Layout. Okay, there we go. And there we have our About page. Okay, so now that we’re happy with this page,
also save as draft and Publish. Head back to Edit Page. You can also add a page with this handy shortcut
in the toolbar. Okay, so I’m going to go on and create the
other pages for my site, and you can do the same using the pages that you created in your
sitemap. Okay, so as you can see, I’ve created all
six of my pages and an important thing you need to know how to do is once you’ve created
your pages, how to set the default homepage for your website so that when users type in
your URL and navigate your page, they land on the homepage that you want them to land
on. So, to do that you’ll go to Settings, and
Reading. And the default WordPress setting is to use
this ‘Your latest posts’ option, which basically makes your home page like a blog page with
your blog posts in chronological order on the page. So, if you want to choose your Home page,
you have to select ‘A static page’, and then under Homepage, you choose whichever page
you want, so in my case, Home. And then save your changes. And you can test this by clicking on My Site,
and this should now load the home page we created earlier, as you can see. Okay the next thing, if you’re going to have
a blog on your website or even a portfolio, since portfolios work in the same way, is
to create your blog posts and blog categories. It’s easier to start with the categories,
so we’ll go to Posts and then Categories in the menu. So, if we go back to our sitemap, we’ll see
that we have one, two, three, four categories: Who Am I, Branding, Corporate Identity, and
News. So, categories are like, kind of like folders
under which you organize your blog posts. So, the first one we have is News. And a slug is a – if you have special characters
or something in your category name, a slug is an alternative that you can use in the
URL that’s URL friendly. So, yeah, it’s usually all lowercase and contains
only letters numbers and hyphens. Ours should be fine, so we don’t need to enter
a slug. You can organize categories underneath each
other, but News will be a top-level category, so we won’t select a parent. And then, you can also add a description for
your category that will just describe what’s in that category. So, Add New Category to create it. And then we’ll go through and create our others. Corporate Identity, and it [unintelligible
52:20] a slug or parent. Branding. Okay, now as you can see, under Branding we
have some subcategories. So, how you would create them is go back and
then you’d select Branding as your parent category and Add New Category. And the line here will show that it’s a subcategory. So, you can delete, view, or edit categories
here. And Uncategorized is a category created by
default by WordPress where posts that you haven’t associated with a category will be
stored under. So, I’ll show you that later on. And you can also create sub-subcategories. So, you could have more categories under Corporate
Branding if you wanted. Finish this up. As you can see here, I could select Corporate
Branding and it would create it under it, so. Okay, so now that categories are done, now
we have to create posts to put in these categories. So, just like pages, you can either go immediately
to Add New or you can go to All Posts. So, we don’t have any posts yet, so we’ll
say Add New. Give your post a name. So, just as an example, My First Post. You can also edit posts with the Divi Builder,
so if you wanted a special design for your post, you can also go import a layout for
it. And you also have very similar options here
to pages, but there are a few special ones just for posts. So, under Categories is where you would choose
a category for your post. So, let’s just put it under Personal. And tags are just like cloud tags where you
can associate words with them and users can filter posts or search for them based on these
tags. So, you can enter anything. ‘general’. Featured Image is usually used as the image
for the post in a blog list. So, if you have a blog page where all your
posts are listed, that would be the image that illustrates the post. And it can sometimes also be on the top of
the post depending on which layout you use. And then Allow Comments if you want users
to be able to comment on your posts and Pingbacks and Trackbacks. And you can also change the layout just like
for pages, so you can choose a side for the sidebar, or no sidebar. Dot Navigation, etc. So yeah, that’s creating posts. And just like pages as well, you can save
it as a draft if you’re still going to work on it, you can preview a post like this, and
you can publish the post here. So, I’ll just add a feature image, so you
can see this in action later. Since we imported demo content, there will
be some images here for us. So, I’m just going to select one of these. Maybe the handshake. And you can add an alt text again. And if you also want to know more about how
blog posts work, you can also check that out in our How to Use WordPress for Beginners
tutorial. So, if we save the page now and then preview
it, you’ll see the image at the top. The featured image. And of course, you can add in some content
below your post. We’d do this using the Default Editor, so. Just whatever. And then Save Draft, preview it again, see
the text underneath the featured image. Okay, so then we’ll publish this. Okay, so as you will see, just like for pages,
because we selected post name as our permalink structure, the title of our post will also
be the URL for this specific post. Okay, so if you want to see what this post
would look like in your Blog page or wherever else you would have blog posts listed, we
will first have to go to Settings, Reading. You’ll want to do this anyway if you want
to create a blog so that you have a set blog page. And then under the ‘Your homepage displays’
option, under ‘Posts page’, so this is where you’ll choose which page will show your blog
posts. So, we’ll select Blog and then Save Changes. So, now if we go to our Pages and we view
the Blog page, then you’ll see that our page we just created is the first entry in your
Blog page. If we create more posts, they will also show
up here above or below this page depending on the order. So, yeah that’s how you create a blog in WordPress. Okay, so now that we have all the pages and
posts that we want on our site, we want to change the navigational menu to be able to
easily navigate to every page or post. So, you’ll see the navigational menu here
at the top. And by default, WordPress imports all the
pages on your site into the menu automatically. But we don’t want all of these here, so let’s
go make our own. So, we’ll head back to the dashboard. And then, you can manage menus under Appearance
and Menus. As you can see, we don’t have any menus yet,
so we’ll create our first one. Let’s call this Main Navigation because it
will be our main navigation menu. Great. Okay, so here on the left-hand side you have
all the items that you can add to your menu. As you can see, there are Pages, Posts, Custom
Links and Categories. You also, on the right-hand side, you can
choose where you want your menu to be located. If you choose Primary, it’ll be the top navigation
bar as I just showed you. Secondary Menu can be placed at different
places depending on what your theme is. And a Footer Menu is the menu at the bottom
of your page in the footer. And you can see here is the option to automatically
add pages, which WordPress does now, but we don’t want that. We want to be in control of what goes in our
menu. In the Screen Options, you’ll see some settings
here. These checkboxes, if you tick them, the options
will show up here. So, if we want to be able to add tags, we
can click it here and we can add tags, but you don’t want tags, I think. Yes, we’re fine with Categories, Custom Links,
Posts and Pages. Two things we will take are Link Target and
CSS Classes. Link Target will allow us to specify whether
to open links in our main menu in a new tab, and CSS Classes will be used to turn our mini
into a mega menu later on. Okay, so to start creating our menu you will
select what you want to add from here. So, we’ll choose Services, Blog, Contact,
About, and Home, and then click Add to Menu. And then you’ll see them over here. Let’s activate Primary Menu. And if we Save Menu, we can go to the preview,
and so, yeah, you’ll see the pages we added to our menu here. So, you can rearrange them just by dragging
and dropping them. I wanted Home, About, Services, Blog, Contact. Yep. And then you can also add sub menu items. So, in this case we’ll use our categories
under our Blog menu item, so we’ll go to Categories, Add to Menu. And then, to make it a sub item, you drag
it like this. So, save our menu. Refresh. So, it’s rearranged. And if we go under Blog, you’ll see our category
underneath the Blog menu item. So, the next step is – oh, let’s quickly show
you how to add custom links. So, we can add a custom link, let’s say to
our Facebook page just as an example. You’ll probably use it to link to other external
sites. Add to Menu. And if you go into the – yeah. You can tick here ‘Open link in a new tab’
so that it doesn’t navigate away from your current page. This is usually a good idea if you’re linking
to an external site so that users still have your website open. So, we’ll tick that. Save Menu. Go back and refresh. So, you’ll see our Facebook link here, and
if we click it, it will open Facebook in a new tab. So, another way you can use links is to navigate
to a particular section on your web page. In that case, you’d make the URL ‘#’ and the
ID of the section – so, this will make sense in a moment but just follow along for now. Let’s make it ‘#contact’. And we’ll change this to – let’s change this
rather to Contact Now so that we don’t confuse it with the contact page we already have here
in our menu. Okay, so you’ll see this in action later on
when we use the Divi Builder, but we’ll rename one of the sections on our page, we’ll rename
the ID to Contact Now and then we’ll be able to link to it from this menu item. Okay, so the
next thing we want to do is change this to a mega menu. So, to do that, we’ll go to Blog which has
subcategories, and in the CSS Classes box we’ll type ‘mega-menu’ then save, go to our
preview, Refresh. Now if we hover over Blog, you’ll see the
open this mega menu. It will look better with more items inside
of it, but yeah, that’s how you create the mega menu in Divi. Okay, so that’s how you’d go about creating
the main navigation menu for your site. To just give you a quick example, we have
a – we want a footer navigation menu with the Contact and Privacy page links. 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 our 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 posts 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 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. And if we now go to our website, and – okay,
let’s go to 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 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’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 dropdown menus, 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 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. You usually want visitors to comment on your
posts, so we’ll keep this enabled. And the other’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 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 like using Yoast SEO, and it’s one of the
best free SEO plugins you can find. In 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 to 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 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 widgets. Another area that can have widgets is the
footer, but since there are no widgets there yet, you will see there is 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, say Categories. ‘Check out the blog’ sounds good. ‘Display as dropdown’, ‘Show post counts’,
‘Show hierarchy’. Okay. Save. So, if you now go back and refresh, you’ll
see our – the calendar widget we added over here. And if you 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. The Theme Customizer makes global changes
to styling settings for your site. So, you can override these settings by making
them on the pages or posts and that will override these settings for that page or post specifically. To show you what we mean, if we were to inspect
this header title here, we’ll see that the font family is Playfair. And if we try to change it in the customizer
under Header Font, let’s say to Raleway, you’ll see that doesn’t change anything. But let’s publish the changes anyways. If we go edit our own page in the back end,
so here, Pages – All Pages – Home – Edit With The Divi Builder –
go into the settings for the header area, and here’s our title as you can see. Design – Title Text. So, this is the reason it doesn’t change in
the customizer because it’s set here on the page itself to PlayFair. If we change it to Raleway here, it actually
changes. But if you want the global styling settings
to apply here, you can just set it to Default and it’ll still be Raleway because that’s
just what we styled it to in the customizer. Save here and then we’ll save the page. So, if we go back and we reload the customizer
– just refresh the page. Because this is a preview of our Home page,
you’ll now see the new font that we’ve set here inside the customizer. So, this might seem a little complicated but
it’s actually a very good feature because you can quickly make changes to your entire
site’s styling here, but then if you for some reason wanted to look a little different on
a specific page, you can go to that page and change it without affecting your other pages. So, as you can see, the customizer has a lot
of options, and just like the theme options, we don’t have time for everything in this
tutorial, so we would recommend you check them out in the Divi documentation where you’ll
find more than enough information on any of these settings. We’ll also have a link to the Divi documentation
in the article for this video. So, one of the cool features is that you can
change your view to fit a mobile, like a tablet or a phone display here. As you can see, this is what your site would
look like on tablet and on mobile. We’ll work the desktop view. And we’ll just cover the most important settings
quickly. So, if we go to General Settings – Site Identity,
so this is where you change the title for your site or your tagline. And if you remember, this is where we changed
our favicon. Under Layout Settings, there are some general
layout settings like putting your design in a boxed layout with these borders at the side
like this, default content width and so on. If you make changes to any of these, you can
reset them by clicking this button here. So, if we do that, you can just reset it like
this. Theme Accent Color: this is just changing
colors in random places throughout your site to get it in line with your brand color, so
we’ll actually go in here. And you can either change the color here directly,
or because we added our brand color palette earlier, we can just select it from these
default colors here. So, we’ll select it. Then, Typography. So, we just covered this a bit, and it’s just
changing the fonts throughout your pages. We’ll change the body link color to our brand
color as well. And you can see you can also change the header
text colors and so on, but we’ll just leave these on the default setting. Background: the background image or color. We don’t really have backgrounds here, so
it doesn’t really matter. Under Header & Navigation is you’ll make changes
to the stop navigation menu, so this is quite important section. Header Format: you can choose different styles,
so we’ve got this Default style, or we can change it to something with a logo at the
top and then your menu underneath, the logo in between your menu items, Slide In, so if
we click here, it’ll slide in, or Fullscreen, so if we click here your menu is Fullscreen. You can also Hide Navigation Until Scroll. So, in this case, your menu won’t show when
people just land on your page and only when they scroll down will the sticky menu come
up. Let’s change this back to Default. Yeah, and as you can see, these options change
based on which header you’ve got selected. Vertical navigation is this vertical menu
on the left. Okay. Primary Menu Bar. This also makes changes to this main navigation
area over here. So, you can adjust the height. That’s a bit too big. Just reset it. It just freaked out a bit, so. What can we do here? Publish. Yeah. It’s back to normal. Yeah, if you go too crazy with the settings
it can make the customizer freak out a bit. You can make it full width, so now you see
it’s to every side. I actually like this, so I think I’ll keep
this. You can hide your logo for some reason. You can change the font. You can change the active link color. The Active Link Color applies to the link
of the page you’re on. So, as we’re on the Home page, you can see
that the Home page changed to our brand color. Dropdown Menu Line Color, it’s just this little
line over here, so we’ll change that to our brand color as well. Secondary Menu. If you’re using one, you could change this
to our brand color as well just for the sake of it. So, you can see now how nice it is to actually
go set your colors over here and then you don’t have to look for them or type them in
anytime. You can just pick them from the picker. Fixed Navigation Settings. So, this is for the sticky bar when you scroll
down. And you can also hide or show the logo. Again, the Secondary Menu if you’re using
it. And the Primary Link Color, we can also set
to our brand color. And then Header Elements. So, we’ve got the search icon here, so we
can disable or enable it, and we can also enable or disable social icons if we have
any set up. So, then to the footer. So, customizing your footer can be a bit tricky
because there are a lot of factors involved like your widget enabled areas and the customizer
settings, etc. So, it’s a good idea to take advantage of
the free footer layouts that Divi has to offer. You can find a link to them in the documentation
here and there is also a video that shows you how to use them. And this will import pre-designed footers
for you which is a great tool to quickly set up a great-looking footer. Okay, so there are a lot of other options
here, like – the same way as we styled our typography, you can go style your buttons,
settings specifically to your posts as you can see here, styles specifically to mobile
devices, color schemes, you can also change your menus here. Widgets. And you can even add some custom CSS over
here. So, yeah, that’s the most important aspects
of the customizer. Again, if you want more information on any
of these settings, check out the Divi documentation through the link we provide on the accompanying
article. And whenever you make changes, you can either
save them as a draft in which case they won’t be live on your site, you can schedule them,
you can discard the changes if whatever you did doesn’t look too good and you want to
start from scratch, or you have to publish them to save the changes and make them live
in your website. So, we’re happy with what we did so we’ll
click Publish. And then you just click this X over here to
close the customizer and go back to your WordPress dashboard. Now, let’s get some hands-on experience with
Divi’s best feature: the Divi Builder. It’s Elegant Themes’ custom-made drag-and-drop
page builder and undoubtedly one of the best around. Okay, so to use the Divi Builder, we’ll go
to Pages, and All Pages, then create a new page. I’ll just call it ‘Test’ for now but call
it whatever you want. And then, to open the front-end builder we’ll
use ‘Use Divi Builder’. Just let it save. So, this time we’ll be building a page from
scratch, so we’ll choose this option. And we’ll just ignore this for now. So, as you can see, we, have a blank slate
to work with, and what we want to do for this page is I want to loosely replicate the Home
page we imported from the Divi layout. So, we’ll basically recreate this page over
here with some minor differences. Okay, so first up is the big header area so
if we go back to the Builder, we’ll first create a new section. We want it to be fullwidth because we want
it to cover the screen from left to right. And I’ll just delete this placeholder section
Divi created for us. Okay, so fullwidth sections are purple like
this. The normal sections, like the one you just
saw are blue. And here you have some options. You can drag it around. This will open up some settings for the section. You can duplicate the section, you can save
it to your library so that you can load it in and use it on another page, or you can
delete it over here. So, the first thing we want to do is add in
our big background image, and for that we’ll open up the settings for the section to Background. And here you can select a color or a gradient,
an image or videos. So, we want an image. And again, you can choose any one, but I’ll
just take this one over here. There we go. And don’t worry about the fact that it’s a
bit cut off at the moment, we’ll fix that in a bit. So, you can enable a parallax effect which
is quite cool. True Parallax. Yep, we don’t want to do anything else here
for now. So then, to add other elements within a section,
you click this gray icon over here. Okay, so the first thing we want to add here
is this fullwidth header module. And the first thing we’ll have is our title,
so we’ll change this to something like ‘Business Coach’, give it a subhead text of – something
like that. Button #1 Text can be ‘Book an appointment’. Button #2 Text can be something like ‘About’. And then, we don’t want this text under here,
so we’ll just select all of this and delete it. And then, in the Background section, so we’ve
got this solid background over here, and it’s obscuring our image behind it. So, what we can do is we can set this opacity
to zero and then you’ll see our image in the background. And then we can go over to the gradient, and
as you can see a gradient is like a two-tone color that you can blend. So, we’ll keep this darker blue and we’ll
change this to our brand color. And we’ll drop the opacity down to maybe 50. It’s really up to you to play around to – with
the settings to see what looks good for you, but I think that should do it for us. And then you can choose whether it’s a linear
gradient or radial gradient that starts in the middle. The direction of the gradient, so I want my
dark blue pointing in the top right corner, so maybe something like that. Okay, then in the Design tab is where you
will style all of the stuff that you add in your Content tab. So, here, Layout, you can see you can change
the orientation. I’m happy with orientating it to the left. You can make it Fullscreen. And while we’re at it, all of these settings
have this little tooltip, so if you want to learn more about something you can just click
on the tooltip and it will give you a short explanation. So, we can enable a scroll down icon like
this which you click and then it goes to the next section. That’s quite cool, so I’ll keep it and adjust
the size here. We don’t have an image, so we’ll leave these
settings. Don’t have to play around with Overlay. We deleted all our normal text, so this field
won’t style anything for now. And then the Title Text will apply to our
main title here. So, as you can see, a handy feature of the
settings box is that you can change the H-level (the heading level), and then you style that
individual heading level. So, we want to style our H1. Since we changed the font in the customizer,
I’m happy keeping it at Default, but I’ll just maybe make it Semi Bold. Text alignment’s fine. Text color is fine. I’ll make it a bit larger, maybe like 65 and
I’ll give it a bit more breathing room. So, this line height gives it a bit more space
at the top and bottom. Yeah, that looks good. And you could add a shadow if you want, like
that, but I don’t want that. And then a Body Text; we also have no body
text so, fine. Then the subheading. So, the subheading font is also set to Default,
which is okay. Maybe I’ll just set this to – no, I like it
better Regular. And I’ll also increase the size quite a bit,
maybe 30. No, a bit smaller. 25. And I also want to give it a bit more breathing
room, so 1 point. Yeah. 1.5 seems good as well. Okay, so I’m not sure why Button Two is first,
but it doesn’t really matter. We’ll just go into Button Two first, so we’ll
be styling this one. And you can enable custom styles to be able
to change its settings. So, at the moment it might be a bit big considering
our subtitles, so I’ll just make this a little smaller. It’s too small, maybe 18. And oh, we can change the background color,
so I’ll actually do this, and I’ll give it a white color but I’ll set the opacity way
down so it has this faded look, like this About button here. Maybe like that. And then you can adjust the width of borders,
so you can make it thicker or less thick. We’ll take it out completely. You can also give it a color. And since you – oh yeah, the Border Radius;
that gives you these nice rounded edges. So, we want to round them all the way through,
so that’s about- it seems, 30. And then we have these nice, rounded edges. Font; I was happy with the default font. Font Weight; actually, set this to bold. And this icon refers to this little arrow
over here. So, I don’t really want that for my About
button. Okay, and then we’re off to Button One. Actually, I just want to see. Yep, that looks good. Okay, so then Button One we’ll also enable
custom styles, also drop my text size just a bit. Give it a background color of white. So, now we won’t see our text, so I’ll just
go up, change the text color to our brand color. And I’ll also remove the border. And I’ll also give it these nice rounded edges. We’re happy with the font. And for this one, I might actually keep the
arrow just for the heck of it. And you can change its color as well. Okay. Don’t really want to play with that. Okay. Then, under Sizing, we could adjust the Content
Width. So, if I want it to be – go across two lines
I could just make it a bit – reduce the width a bit. So, I’m happy with it like that. Spacing; so, if we want to give this background
a bit more room, we can adjust the top and bottom padding which will increase the space
between the border of the section and the content of the section. So, to do that I’ll give this 10vw and the
bottom also 10vw. Okay, and now we’ve got bigger header section
which looks much nicer. We don’t want to give this a border, so we’ll
skip this. Don’t want to give it a shadow. And we could actually give it an animation
like this. Because you have the image behind it, and
it’s not in the content section itself, it’ll animate on its own. So, yeah, you could add an animation and set
it to Repeat, set the duration at which it repeats and so on. Okay, so that’s our header section. Okay, the next section we want to create is
the Services section with a title and some services blurbs. So, we need to create a new section which
you can do by just clicking this ‘+’ icon at bottom. So, we just want a regular section. And you can think of pages as being divided
into sections, rows and columns. So, sections or these big content pieces you
see, like this one. And then rows divide them horizontally, and
then rows are divided vertically into columns like this. Four or five or six. So, our first one is just a single column
row because we just want our text element, this one here. And this time we’ll just add it in the content
editor here, so something like – something like that. And we’ll make this H2. And we’ll select everything and centerline
it. You can change this text to whatever you want,
but I’m just going to keep the placeholder text for now. And then in Design, go into Heading, and this
time we’ll change the H2 settings since we made this an H2 header. So, H2, and I’ll just set it to – I think
I’ll do Semi Bold. And then to make that, this isn’t so far spread
out, I’m going to Sizing and make this a bit smaller. And then you’ll see it goes to the left, so
we’ll just align it to the center again. And yeah, that’s all I want to do here. So then, to add another row, you click this
green ‘+’ icon over here. Oh, and while we’re at it, you can also change
your row structure at any time by clicking this icon on this settings toolbar. So, we’ll add a new row. And we have four blurbs in a row, so we’ll
add a four-column row. And we’ll add a Blurb. So, our text would be something like ‘Visioning’,
and we won’t have all this content. We don’t want an image, instead we want an
icon. And this icon we want, the light bulb. And we’ll go to Design – Image & Icon. Okay, we’ll keep our brand color for our icon. You could put a circle around it and then
change the circle color, but you don’t want that. Use Icon Font Size will allow you to readjust
its size, so we want to make it a bit smaller. Maybe 30. And Text settings. Title Text: we want to align this in the middle
and we also want to – no, we’ll keep the color as it is. And yeah, that’s it for our first blurb. Oh, we might just head to Sizing. 150, 100%. That’s fine. Spacing. 40, 40, 20, 20. 40px. 40px. 20px. 20px. Okay, there we go. And this is where the duplicate function comes
in handy, because usually we’d have to create another seven blurbs, but now we can just
duplicate this one which we already styled – and then I’ll drag it into the box next
to this one. And then we can go in and edit. And this one is Planning. Planning with a little map icon, I guess. You don’t have to use the same one, so – this
kind of looks like a – oh, here it is. The map. And we have the same settings and everything,
the only thing we’ll change is we’ll give this one a background color to create that
background effect. So, in this case, we’ll use this blue, but
we’ll take down the sharpness and we’ll take the opacity way down as well. Something like that. So, yeah. You’d do this and then you can duplicate this
one again and drag it over, and duplicate and drag it over. And when you’ve got this then you could duplicate
the entire row. But we want them in the same row, so we’ll
keep them like this. We will duplicate to create
four more so we have our eight. And then to get them stacked against each
other, we just have to go into the Row Settings this time. Design – Sizing – Custom Gutter Width. This controls the space between them, and
then set this all the way to one. So now if we – let’s say we edit this one,
and we go into the background color, we can just set the opacity up again to keep that
pattern going. Okay so that is for the Services blurbs. Oh, we actually have a Learn More button still
to do. So, we’ll go back here and then we have to
add a new row. This will be a button. And I’ll make this a Contact button. Design. Alignment: center. Button – Use Custom Styling. Let’s first change the text. We’ll make this a white button and then we’ll
make the background color – we’ll make the background color our brand color. Change this to color. Move the gradient. Don’t want a border but we want the border
radius to make it nice and round. Okay, so that should do it. Then, the next one we’ll do is – we’ll skip
this one because I just want to show you something. And we’ll do this about section which we need
in a Regular section. Two-column row and on the left we have our
text, and this time we’ll give it two headings. So, ‘About Me’ and ‘BUSINESS COACH’. And we’ll make this one an H4 and we’ll make
this one an H2. And in Design, I want to give all of my text
a bit of breathing room, so I’ll do this. And for the heading text as well. So, first one’s an H2 and our second heading
is an H4, so it’s over here. And also, I want to change its color to our
brand color. And then we give it some Line Height. Okay, then on the right-hand side we’ll add
an image. So, we’ll go down. Actually, just for the heck of it let’s do
a – let’s do a video. And as you can see, if we go into the settings
here you can either select the video from your media library, upload a video or you
can go insert from URL. And you can insert a video straight from YouTube
or something similar. So, if we go to YouTube – and we can copy
the URL from this video and paste it in here. Insert into post. And you’ll see we have a video over here. So, what we want to do is I want this button
over here to link to our About section. So how we can do that is I can go into the
Section Settings to Advanced – CSS ID & Classes. And here, under CSS ID I’ll call it just ‘about’. Maybe ‘about-me’. And then I’ll go to this button over here. So, my module Settings – Link – Button #2
URL. And I’ll call this ‘#about-me’. And now if I click this button once we publish
our page, it will go to this section. So, yeah. And that’s pretty much all I want to show
you from using the Divi Builder. And you can go on using it the same way. You should really just experiment. It’s a lot of fun once you get used to it,
and you can use it to build out any of your pages, not just your Home page. Remember to show – to use what I showed you
before, and if you build a site and you want to make it your Home page, go set it in the
Reading settings. So, if you’re happy with your page click here,
Save Draft and hit Publish. And you would have built your first page using
the Divi Builder. And if we exit the Divi builder, you can see
it load with animation. And if we click About it goes to that About
section. Just like with everything else related to
Divi, I suggest you take advantage of the documentation to get a complete run-through
of all these settings, concepts and modules we’ve explained here. You can find a link in the article for this
video to a complete tutorial of the Divi Builder. 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
(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 *