In this video, we’ll show you step by step,
How to Make Your Own Website for 2018 and
2019.
In this WordPress website tutorial for beginners,
we’ll show you how to create a website that
would typically cost two to three thousand
dollars plus, if an agency or web designer
was building it for you.
The great news is, we’ll show you how to
do this for less than a few hundred dollars.
Because everyone is different, we’re going
to show you how you can access over 25 professional
designs for free that you can choose from
to build the exact type of website you want.
So, regardless of whether you want to build
your own:
Business or consulting website
Freelance website
Portfolio website
SaaS style website
Product or app website
Coffee shop website
Wedding website, or;
Any type of website for that matter.
You are able to follow this WordPress tutorial
and get building.
For this example, we’ll use the business
style website as our starting point to create
a seven (7) page website that will include:
A landing page, that we can send paid traffic
to or optimize for search
Homepage
About Page
Contact Page
Blog Page
Portfolio Page, and;
Pricing page.
You’ll be able to create one of the other
website examples we shared before just as
easily, and create the exact pages you want
on your website using what’s referred to
as a free layout pack.
The great thing about the website you’ll
create is that it’s SEO friendly, features
an optimized UX design that is 100% mobile
responsive, and includes an intuitive, beginner
friendly, drag and drop page builder.
Our intention is to give you as much flexibility
in design as possible, so that when we show
you how to create your own website, it’s
actually the one you want!
To do this, we’ll leverage pre-designed
layout packs, and provide you access to more
than 25 uniquely designed website layouts
that you can download for FREE and use on
your website with just a few clicks.
As part of this tutorial, we’ll show you
how to customize these layouts to suit your
design, as well as go through how to create
stunning layouts from scratch.
In fact, we’ll go through step by step how
to create this exact layout here that we’ve
used as the hero image for this tutorial.
You’ll also be able to choose from a number
of navigation styles, including:
The classic horizontal navigation at the top
A centered logo option, or centered inline
option
Slide in menu
Full screen option
As well as vertical navigation options, with
the menu on either the left or right.
We’ve created a step by step guide for this
tutorial that you can follow along with on
the OHKLYN website.
You’ll find the link to this 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.
You can also access many of our free WordPress
tutorials by selecting ‘tutorials’ from
the top navigation menu, and scrolling through
the available options.
In this step by step WordPress tutorial for
beginners, we’ll show you:
What to prepare, and the things you should
consider before getting started.
This will save you a bunch of time and frustration.
We’ll then secure your domain, set up your
hosting account, and install WordPress.
Review the WordPress fundamentals, and provide
you with free access to a detailed overview
(for those of you that are new to WordPress).
We’ll then upload and install your WordPress
theme.
Install any required plugins.
Then go through and customize your WordPress
website, covering items such as:
Creating and managing pages and posts
Leveraging pre-designed layout packs
Creating and managing menus
Using widgets,
As well as adjusting the global design settings
for your website.
Once your website is looking the way you’d
like it to, we’ll show you how you can take
your website live, ensure it can be found
by search engines like Google, and show you
how to install Google Analytics on your website
for free.
As part of this tutorial, you’ll get access
to over 20 hours worth of free video content
that covers how to customize every inch of
your website, so, regardless of how intricate
your website design may be, we’ll provide
you with the tools to create it.
If that sounds good - then let’s get to
it!
For this 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).
To view some of the free layout packs available
for use in this tutorial, from the OHKLYN
website navigate to our ‘Free Divi Layouts’
page, which is under ‘Resources’ in the
menu, you’ll have access to all of these
layouts for free with the Divi theme.
For this tutorial, we’ll show you how to
set up your WordPress website using Bluehost
as your hosting provider.
With the link in the description below and
on the OHKLYN post, you’ll get access to
discount hosting plus a free domain name,
if you haven’t purchased one already.
We recommend Bluehost as they provide great
quality hosting at an affordable price.
They have an intuitive user dashboard and
will automatically install WordPress for you,
as well as provide 24/7 support, making it
the ideal option for beginners.
As an affiliate partner, they’ll also set
aside a few dollars to help fund future free
tutorials like this one - So, thank you in
advance for using the links provided.
If you require premium hosting, or faster
hosting, we’ve included a discount link
to WP Engine.
You will notice a difference in speed between
the two providers, however, for most people,
the more affordable Bluehost option will be
fine, and you can always upgrade later on.
Ok, so before we get started, let’s go through
what you need to prepare.
A big mistake beginners often make is forgetting
to plan out what they want their website to
look like before getting started.
By taking a couple of moments upfront to consider
the user experience, as well as brand and
content design, you’ll save yourself a bunch
of time, and produce a much better result.
First, let’s take a look at website design.
In this section we’ll provide an introduction
to user experience (or UX) design.
For this, take out a sheet of paper, or open
your favorite drawing tool and sketch out
the pages you want to include on your website
and how they relate to each other.
Some of our favourite free tools for this
include sketch.io, and if you need to collaborate
with others, check out InVision:
Figure out which pages you want to include
on your website.
Common pages include:
A Homepage
About page
Contact page
Gallery or portfolio page
Blog (including the individual post pages,
and category pages)
And, a privacy or terms of use page.
Make sure you draw out all the pages you want
to include on your website.
Next, for each page, create a rough guide
for what will be on the page in terms of text,
images, videos, and other elements.
You can use the layout pack you want to use
as a guide.
For example, on the homepage:
We might have a hero image at the top with
a heading and dual call-to-action, or CTA
buttons.
Next, we might have an intro paragraph on
the left and a video on the right.
Below that, we could include some number counters
with some stats about our offering - we could
overlay this over a dark image
Then, we’ll have a headline differentiating
our business.
And below that, three columns with blurbs
and icons that we could use to feature services
or highlight what makes us unique.
You see where we’re going here.
Go through this process for each of the pages
you want to create.
When we get to the step on using the page
builder, you’ll see how easy it is to create
the pages, particularly if you’ve got it
all mapped out already.
From a user experience perspective, you should
think about the most important action that
you want the user to take on that page, and
make sure it’s above the fold (meaning,
it’s visible when the page first loads)
and it’s obvious and /or repeated in a way
that makes it easy for the user to engage.
Similarly, use buttons and your brand colors
to draw the user's attention to important
pieces of content.
Give some thought on how you structure your
content.
Does the flow of information you’re presenting
make sense?
Does it logically take the user through a
process, or tell a story?
If it does, this will dramatically improve
engagement on your website.
Up next is brand design and content planning.
Once you’ve outlined the pages you want
to include on your website and put together
the rough layout for each page, you’ll then
need to start writing the copy, sourcing or
designing the images and graphics, and planning
the navigational elements.
Go through each page layout, write the content
for each section and decide on the media elements
you want to use.
On the OHKLYN post for this tutorial, there’s
a link to an article with a list of free high-quality
stock photo sites with images that you can
use for free on your website, as well as a
few of the best stock photo websites where
you can purchase more unique and better quality
images.
From a branding perspective, you will need:
A logo
A Favicon (which is the icon that appears
in the browser tab when a user visits your
website)
And, your brand color palette, including the
hexadecimal color codes.
We’ll show you how to customize your website
with these colors later in this tutorial.
There are a number of great tools like paletton.com,
Adobe color, or color-hex.com that you may
find useful.
If you need help with copywriting, or graphic
design, consider using a third-party platform
to help get these things done professionally
and efficiently.
We’ll link a few options below and on the
OHKLYN post.
And lastly, allocate a budget for your website.
In this tutorial, we’ll show you how to
make a website that would typically cost two
to three thousand dollars.
For this, you’ll need a small budget of
around $100 - $300.
This will cover the cost of items such as:
Your website hosting: This costs around $3
- $20 per month depending on your hosting
term.
A Premium WordPress theme: This typically
costs $50 - $100.
Premium images, if you want to use them.
Or, a graphic designer, if you want to create
some custom graphics.
Ok, so let’s get started on building your
new website.
The first step is to register your domain
(if you haven’t already), set up your website
hosting account, and install WordPress.
So we’re all on the same page, let me quickly
explain what they are.
Your domain, or url - is the web address for
your website and is what users will type into
their browsers to access your site.
For OHKLYN it’s OHKLYN o-h-k l-y-n.com.
Pick something that works for you.
Hosting, is what allows your website to be
accessible to users 24/7.
It’s the process of storing the content
and data for your website on a web server,
and serving it to users.
For this tutorial, we’ll walk you through
getting started with Bluehost, as we believe
it’s the best option for beginners.
If you want a premium hosting solution, we’ll
provide a link to WP Engine that entitles
you to a discount, and we’ll provide a link
down below to our video on how to set up a
website with WP Engine.
The OHKLYN website is hosted on WP Engine
and our demo sites are hosted on Bluehost.
So, let’s go through the steps for setting
up hosting for your website and registering
your free domain with Bluehost.
Here is a list of the types of domains that
are included for free, some of which include:
.com
.online
.store
.net
.org
.co
.club
Now, if you’ve already purchased your domain,
or if you want to purchase an alternative
top level domain (such as .io, something relevant
to your niche, or a country specific domain
such as .co.uk, or .com.au), you can purchase
that domain through a registrar like GoDaddy,
Crazy Domains or any other domain registrar
(we’ll add some links below).
If you go with that option, or if you’ve
already secured your domain name, all you’ll
need to do then is change what’s called
the Domain nameservers to point at Bluehost
(which will be your hosting provider).
Fortunately, we’ve written an article, and
a step-by-step guide on how to do this (we’ll
add the link to this guide in the description
box).
To get started, follow the Bluehost link in
the description below, or if you’re on the
OHKLYN website, follow this button here.
We’ll then click on ‘Get started now’.
You’ll then select the plan that’s right
for you.
If you intend to have just the one domain,
then the first option will be fine, alternatively,
if you want to have multiple domains on the
one hosting account like we do, then you’ll
need to select one of the other plans.
You can always amend this down the track.
The great thing with Bluehost is that you
get a 30 day money back guarantee on any plan,
so you can get started risk-free.
Choose the option that’s best for you.
To get your free domain name, you’ll enter
the desired domain name for your website into
the ‘new domain’ field, and select the
domain extension you want (for example .com),
and hit ‘next’.
If the domain name isn’t available, you’ll
get an error message and will need to either
select an alternate domain name, try to contact
the owner of the domain to purchase it from
them, or select another top level domain extension.
If you’ve already purchased your domain
name, enter your domain in the ‘transfer
domain’ field and select ‘Next’.
Remember to review the article on how to change
the DNS records to point at Bluehost.
To set up your hosting account, enter in the
required account information.
In the package information section, choose
your desired hosting term and domain add-on
preferences.
We recommend selecting ‘domain privacy protection’
so that the personal information that’s
associated to your domain, isn’t publicly
available (this is optional of course).
Once you’ve entered in the required information,
add your payment details, review the terms,
and select ‘Submit’.
Once you’ve done that, you’ll be taken
to this page here.
You will have been sent a confirmation email
to the designated email address on the account
as well as a WHOIS verification email.
Follow the link in that email to verify the
email associated to your new domain.
You will need to create a password for your
hosting account.
To do that, click on ‘create your password’.
Make sure to pick a secure password - You
could use the suggest password tool to help
you with this.
Once you’ve entered in your password, review
the terms of use, and select ‘Next’.
You will then be able to log in to your Bluehost
dashboard.
As part of the new Bluehost offering, WordPress
will automatically be installed on your new
domain.
If you’ve registered your domain elsewhere,
you’ll need to amend the DNS records to
point at Bluehost and install WordPress using
the Bluehost one-click WordPress install.
For the steps on how to do this, review our
article on the OHKLYN blog (the direct link
will be in the description below).
You can choose to install one of the free
pre-selected WordPress themes on your domain.
However, with WordPress themes, you typically
get what you pay for.
As premium themes are regularly updated when
WordPress is updated, they’re often more
secure.
They also provide you with access to support
as well as a greater range of design and customization
options.
So, for this tutorial, we’ll use a premium
WordPress theme, and select ‘skip this step’.
WordPress will now be installed on your domain.
To access the back-end of your WordPress website,
click ‘start building’.
This will prompt a guided tour, which you
can choose to run through or not.
We’ll go through this in our tutorial, so
we’ll click on ‘I don’t need help’.
This will take you to the Bluehost tab within
the back-end of your WordPress site.
To access your WordPress dashboard, click
on ‘dashboard’ in the menu on the left.
There will be a number of notifications that
you can action or dismiss by clicking on the
‘x’ in the top right corner.
You can amend what’s visible on your dashboard
by clicking on the ‘screen options’ dropdown
in the top right, and checking or unchecking
the boxes.
A number of additional plugins will be installed.
You can view these by hovering over ‘plugins’
in the admin menu on the left, and selecting
‘installed plugins’.
In addition to the standard WordPress plugins,
Bluehost will install some extra plugins.
You can leave these active or choose to deactivate
and delete these plugins.
We’ll leave this up to you.
We’ll delete ours, as we like to use as
few plugins as possible.
This can be done in bulk:
By selecting the checkbox next to the plugin,
Choosing ‘deactivate’ from the bulk actions
dropdown and then clicking ‘apply’.
We’ll then delete all of the selected plugins
by selecting them and hitting ‘delete’.
Then return back to the WordPress dashboard.
If we enter our domain name into a browser,
we’ll see that WordPress is now installed.
Congratulations!
You officially have a new website!
It’s not much at the moment, but you’re
well on your way.
As part of this process, we’ll provide a
link to our video on how to set up your free
SSL certificate which will encrypt the data
on your website.
This is good practice as it improves the security
of your website and your search rankings as
Google prefers secure sites.
It also allows you to take payments on your
website in the event that you want to include
an online store as part of your website.
For specific eCommerce tutorials, check out
our free WordPress tutorials page on the OHKLYN
blog, or on our YouTube channel.
Alright, we’ve gone through the first two
steps which were preparation, as well as registering
your domain, setting up hosting, and installing
WordPress.
We can now move on to the next step.
Whenever you want to log into your WordPress
website, enter your domain and add /wp-admin
to the end.
Such as, example.com/wp-admin.
Then enter your username and password set
up in the prior step.
You’ll then be taken to your WordPress dashboard.
The first time you log in, depending on which
hosting provider you went with, there may
be a walk-me-through it feature, or welcome
series which you can choose to follow or not.
We’ve installed WordPress in a development
environment.
It’s a clean WordPress install so it should
look the same, however, if it’s slightly
different, don’t worry - the fundamentals
will all be the same.
You can build your website on your live site,
however, we would recommend installing a coming
soon plugin so you can launch your site properly
once you’re ready for the world to see it.
We’ll add a link to a video on how to do
this in the description below.
For similar videos and tips while you build
out your website, subscribe to our YouTube
channel and check out the videos section of
our channel.
The WordPress dashboard or admin panel is
broken out into three main sections: at the
top, we have the WordPress toolbar, the menu
or admin menu is located on the left-hand
side, and the main admin area is in the middle,
where we'll do most of our work.
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 how WordPress works in
about an hour.
Alright, so the WordPress toolbar at the top
is dynamic - It adjusts the available options
depending on which page you’re on and if
you’re viewing the page from the front or
back-end.
The Admin menu located to the left of your
dashboard is separated into three main sections,
these are: The Dashboard section, the Content
Management section, and the Site Administration
section.
The Dashboard section provides easy access
to the Dashboard, updates, and additional
plugin features.
The Content Management section is where you
create and manage Posts, Pages, Media items,
Comments and additional plugin features.
The Site Administration section is where you
configure the design and appearance settings
for your website (including selecting the
active theme for your website, creating and
managing menus, widgets, and customizing your
website’s theme).
It’s also where you’d be managing plugins,
users, controlling global WordPress settings,
and activated theme and plugin extensions
like SEO, Social sharing, theme specific settings,
and security.
We’ll go through some practical examples
for each of these in the coming sections once
we upload our theme and start working with
content.
However, one thing we recommend doing before
we move on is updating the permalink structure
for your website.
This will impact how your url strings will
be created for pages, posts, etc.
To do this:
Hover over ‘settings’ in the admin menu
(this is where you’ll manage your global
WordPress settings.
We cover these in detail in our ‘how to
use WordPress’ tutorial video), then select
‘permalinks’.
The default option leverages a more journal
approach featuring the date in the permalink.
However, the more common option and what we’d
recommend from an SEO and UX perspective,
is post name.
So, we’ll select that option.
And save our changes.
You can learn more about each option under
the help tab and choose the best option for
you.
We recommend doing this before you start creating
content so that your URLs are created the
way you want.
Also, if you want to update your user profile
or add users to your website, you can do this
by hovering over ‘users’ in the admin
menu on the left and selecting from the options
here.
Alright, moving on...The menu is fully responsive,
meaning that as the screen size gets smaller,
the menu adjusts to remain accessible on all
types of devices.
Lastly, the main Admin area serves as our
primary workspace and adjusts depending on
what’s selected from the admin menu.
We’ll draw your attention to the screen
options tab in the top right corner.
When you open this tab you’ll see a list
of options and features that are available
for display depending on which page you’re
on.
Similarly, the help tab to the right shows
you helpful hints for the page that you’re
on, as well as links to relevant documentation.
Once again, for a detailed walkthrough of
WordPress, we recommend watching our ‘How
to Use WordPress’ tutorial.
Ok...now that we’ve touched on the fundamentals
of WordPress, let’s move on to choosing
and uploading your WordPress theme.
A WordPress theme is a group of files that
work with the underlying WordPress software
to enhance the design and functionality of
your WordPress website.
For a more detailed overview, check out our
‘What is a WordPress’ theme article on
the OHKLYN blog.
There are both free and premium themes that
you can use for your website.
The main benefits of using a premium theme
is enhanced security, access to support, the
inclusion of more extensive theme documentation
or instructions, extended functionality, and
access to demo content and pre-built layouts
- Which for around $50-$100 is good value.
Premium support packages can cost $50/mth,
so the fact that this is included in a premium
theme, makes it a smart investment.
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.
For this tutorial, we’ll use one of the
top rated WordPress themes - Divi by Elegant
Themes.
To access a discount, follow the Divi discount
link in the description below, or if you’re
following along on the OHKLYN post, you can
click on this button.
From here:
You can either purchase a yearly access to
all of their themes and plugins, or select
their lifetime access option, which gives
you access to all of their theme and plugin
updates for life.
We have their lifetime access option, however,
choose what’s right for you.
You can always upgrade later on.
Once you’ve chosen your access level, select
‘sign up’.
Enter in your personal information.
Select your payment method.
Review the terms.
And select ‘complete registration’.
Then, log into your Elegant Themes dashboard.
The next step is to download a copy of the
Divi theme:
From your Elegant Themes dashboard, scroll
down to where you see ‘installing Divi’
and select ‘download’.
This will download a copy of the Divi theme
which will be a .zip file.
You will upload the theme file as is, so there’s
no need to unzip the file.
Next, we’ll upload the Divi WordPress theme.
If you want to install a child theme, you
can either use our free child theme generator,
located under ‘Resources’ in the OHKLYN
menu by following the instructions.
Alternatively, you could also use a plugin
called ‘Child Theme Configurator’ to help
set this up.
This is best practice but not essential.
To upload and install your WordPress theme:
Go to your WordPress dashboard.
Hover over appearance in the admin menu on
the left, and select ‘themes’.
From here, select ‘Add new’.
Then select, ‘Upload theme’.
Select ‘choose file’.
Navigate to the .zip file you downloaded earlier,
and select ‘Open’.
Click ‘Install now’.
This will start the process to upload and
install the Divi WordPress theme.
Once the theme is successfully installed,
click ‘activate’, and you’re new theme
will now be live on your website.
Unlike other themes, Divi doesn’t require
you to install any additional plugins to leverage
all its features.
However, if you want to include any additional
plugins on your website, review our article
and video on how to install a WordPress plugin,
which you can find on our blog or YouTube
channel
One of the great things about the Divi theme
(other than its industry leading page builder),
is the ability to access an unlimited number
of layout packs that you can use on your website.
So, what exactly is a layout pack?
A layout pack is a group of JSON files that
include a series of page layouts that can
easily be imported into your new website.
These include all the content, Divi settings,
images, and other design elements, making
it really easy to create a great looking website.
From there, you can update or amend the design
to create the exact website you want.
In a recent update, you can now access a number
of these pre-designed layouts or layout packs
directly from the Divi builder.
We will be creating a number of free divi
layouts of our own that you’ll be able to
access by subscribing to the OHKLYN newsletter.
These will include the homepage layout that
we used for the hero image of this tutorial,
which we’ll build out together later, plus
much more, so remember to subscribe to the
OHKLYN community to stay up to date on that.
To review all of the layout packs that you
could leverage on your site, check out our
free Divi layouts page which can be found
under resources via the OHKLYN menu.
A number of the layouts featured on this page
will be available directly from the Divi builder,
however you can also follow the link and download
any of these layout packs.
These will download as a JSON file.
We’ll go through how you can upload this
to your website in the next section.
Ok - let’s move on to customizing your website.
In this section we’ll look at how to create
pages and posts, as well as how to upload
and use the pre-designed layout packs from
within the Divi Builder, or that you downloaded
earlier.
We’ll create the pages we want on our site
and upload the layouts we want to use, then
move on to how to create and manage menus
for your WordPress website.
We’ll then explore the global theme settings
and customization options where you can upload
your logo and favicon, set your brand colors,
amend the typography settings and choose the
default header layout for your site.
As part of that, we’ll look at widgets and
how you control your website’s sidebar and
footer options.
We’ll then show you how you can access over
20 hours of free content specific to your
new website, so that you can go through every
element in as much detail as you’d like.
Lastly, we’ll advise you on some best practices
and next steps such as:
How to ensure your website is discoverable
via search engines such as Google.
And how you can leverage Google Analytics
for free to provide insights on your website
traffic and users.
So first up, let’s take a look at how to
create the pages that you want on your website.
For this example, we’re going to create
seven pages, these include:
A landing page, that we can send paid traffic
to, or optimize for search
Homepage
About Page
Contact Page
Blog Page
Portfolio Page, and
A pricing page.
We’ll load in the layouts for each of those
pages as we go through, and then set the homepage
(or front page) for your website.
This is where page visitors will land when
they enter your domain name into their browser.
You can set this to any page you like.
To create a new page:
From your WordPress dashboard, hover over
‘pages’ in the admin menu on the left.
To view all the pages on your website, click
on ‘all pages’.
Alternatively to create a new page, click
‘add new’.
You could also hover over the ‘+ new’
option at the top of the page and select ‘page’.
Or, from the ‘all pages’ tab, click on
the ‘Add new’ button at the top.
The first thing you’ll want to do is give
your page a name.
If you’ve selected ‘post name’ as your
permalink structure, this will be used to
create the url for this page.
For this example, we’ll call this ‘Landing’.
On the right-hand side of the page, you can
select if you want to assign a parent page.
This will impact the site hierarchy as well
as permalink structure.
In this case, we’ll leave the default as
‘no parent’.
If you’re new to WordPress, we recommend
watching our ‘How to Use WordPress’ tutorial
where we cover the default WordPress options
available when creating pages.
To launch the Divi builder and leverage the
pre-designed layouts, we’ll click on the
‘Use the Divi Builder’ button.
We’ll go through how to use the Divi Builder
to create and update pages on your website
in the following section.
However, to access the pre-designed layout
for this page, we’ll click on ‘load from
library’.
Under the ‘premade layouts’ tab, you can
access any of the pre-designed layouts by
clicking on the layout you want to use.
In this case we’ll click on the ‘Divi
for business’ Agency layout pack.
Then navigate through the various pages, and
choose the page layout you want to use.
For this page we’ll select the landing page
layout.
From here, you can either view the demo in
a new tab
Or, click ‘Use this layout’ to import
the layout into your page.
You’ll see that our Divi Builder is now
populated with content.
We’ll go through a practical example of
using the page builder shortly.
For now, we can save the page as a draft if
we’re not ready to publish the page.
Preview the page, which will preview what
the page looks like from the front end.
You’ll see that the layout has imported
all the content from the demo, which is great.
If we head to the back-end and we’re ready
to publish the page, we can hit ‘publish’
and that will take the page live.
We’ll create the other six pages that we’ll
use for this demo and import the content just
like we did for this page.
The pages we’ll create will be called ‘Home’,
‘About’, ‘Contact’, ‘Blog’, ‘Portfolio’,
and ‘Pricing’.
Pause this video, and follow that process
to create the pages that you want on your
website.
If you want to upload a layout pack that isn’t
one of the premade layouts within the Divi
Builder.
You will just need to upload the layout pack
to the Divi library, and then select the layout
from the ‘add from library’ tab, rather
than the premade layout tab, once you click
on ‘load from library’ as we did before.
To upload your layout pack:
From your WordPress dashboard, hover over
‘Divi’, and select ‘Divi Library’.
This is where you’ll manage any saved page
layouts, sections, rows, or modules that you
can easily load into pages with a couple of
clicks.
Click on the ‘import/export’ option at
the top of the page.
Click on the ‘import’ tab, and select
‘choose file’.
Navigate to the JSON file with the layout
or layouts you want to upload and select ‘open’.
Then, click on ‘import Divi Builder layouts’.
You’ll then see a progress bar.
Once it’s uploaded you’ll see that the
layout or layouts have now been added to your
Divi library.
And that’s how you upload any Divi Layout
that isn’t featured on the premade layouts
tab.
Create the rest of the pages you want on your
website.
We’ll skip ahead and come back once we finish
creating the rest of our pages.
Remember, paint in broad strokes for now,
and we’ll go through and customize the layouts
for each page shortly.
Ok, so you should have created the pages you
want to include on your website.
What we’ll do now is show you how to set
the homepage for your website.
For our example, we’ll set the page we created
called ‘Home’ as the homepage for our
website, however, you could just as easily
use any other page.
To set this page as the homepage for our website:
We’ll hover over ‘Settings’ in the admin
menu and click on ‘reading’.
Under the ‘Your homepage displays’ option,
make sure that ‘a static page’ is selected
and then choose the page you want to set as
your homepage from the homepage dropdown list
below.
In this case, we’ll choose the page called
‘Home’.
Then click ‘save’.
If we go to the homepage of our website, we’ll
see that the page we just created called ‘Home’
is now our homepage.
Ok, so that’s how you’ll set the homepage
for your website.
If you want to leverage a blog on your website,
you’ll create blog posts the same way.
The only difference being that you’ll need
to set up categories first by hovering over
posts and selecting categories.
Here is where you’ll add the blog categories
that you’ll assign your blog posts to.
By entering the category name.
For this example, we’ll use ‘Creativity’.
And select ‘add new category’.
Repeat this process for all the categories
you want to include in your blog.
We’ll add ‘Inspiration’ and ‘Productivity’.
Once you’ve created your categories, you’ll
need to create a new blog post.
Hover over posts in the admin menu and select
‘add new’.
You’ll add a title.
And your content.
Select the category for the post on the right-hand
side.
Assign a feature image by clicking on the
‘set feature image’ option on the right-hand
side.
You can either upload an image or select one
from the media library.
Then, ‘save as draft’, preview, and publish
your post.
The default blog page will feature your recent
posts, unless you’d like to create a custom
blog page and set it as your blog page via
the ‘reading settings’ tab, like we just
did for the homepage.
As we go through this tutorial, if you want
more information about WordPress, please watch
our ‘How to use WordPress for Beginners’
video and review our blog post.
Similarly, for more information regarding
the Divi WordPress theme or the Divi Builder,
follow the button on the OHKLYN blog post
here to access 20+ hours of free video tutorials
and documentation.
If you haven’t already, pause the video
and create the pages, posts, and categories
you want to include on your website before
we move on to the next step.
By now, you should have roughly created the
pages, posts and categories for your website.
Don’t worry if it’s not perfect or if
you’re not 100% sure on the exact structure
- remember, broad strokes.
What we’ll do now is create the menu structure
for your website, so you can easily navigate
through your website while you continue to
build out your layouts and content.
Menus in WordPress are created and managed
in the dedicated menus section which you can
access by hovering over ‘Appearance’ in
the admin menu, and selecting ‘Menus’.
On the left-hand side, you have the available
content that you can add to your menu, such
as:
Pages
Posts
Custom links
Categories, etc.
To add more options, click on the ‘screen
options’ tab at the top and check the boxes
next to the elements you want to add to your
menu.
For example, tags.
Under screen options, you can enable the ability
to set the link target for a menu item, which
means whether the link opens in a new tab
or not, as well as assign CSS classes.
We’ll check both boxes as we’ll show you
how to use the link target option to open
a menu link in a new tab and how to include
a mega menu on your website by adding a CSS
class to the menu item.
If you’re interested in learning some HTML
and CSS fundamentals for WordPress, register
for one of our courses at courses.ohklyn.com.
Back to the menu options:
On the right, you have your menu structure.
To create a new menu click on ‘create a
new menu’.
Enter a name for the menu (this is for your
reference).
Then select ‘create menu’.
Down the bottom, you can select where you
want this specific menu to be displayed.
The Divi theme includes three default menu
locations, the main navigation menu located
here.
Secondary navigation, which is shown above
the main navigation.
This is where you can include a phone number
or another call-to-action item.
Or, the footer navigation menu, located in
the footer section of your website.
We’ll set this menu as our main navigation
menu.
To add menu items to your menu:
Select the elements from the left-hand side.
In this case, we’ll select the pages we
created earlier.
Then click ‘add to menu’.
You can rearrange the order by clicking and
dragging the menu items into place.
Similarly, you can create menu hierarchy by
clicking and dragging a menu item across to
sit underneath the item above.
For example, we’ve added the blog page to
our menu.
We’ll now add our blog categories as well.
And organize the categories to sit underneath
the blog menu item.
If we save that and view our menu from the
front,
Our menu items are now all there.
If we hover over ‘blog’, we see that the
categories are sitting underneath the blog
dropdown, and if we were to click on them,
they would take us through to the category
archive page and show the user all the posts
associated to that category.
If we head back to the menu options, you can
also add custom links to your website’s
menu.
Custom links are used primarily to link to
pages that aren’t part of your website,
or to specific sections of a page, using what’s
referred to as the ID for the section.
To create a custom link:
Click on the custom menu link option on the
left.
Add the URL from where you want the menu item
to link to.
In this case we’ll link to Dribble
Then add the link text that you want featured
in the menu.
We’ll just type ‘Dribble’.
If we’ve checked the link target box above
in the screen options tab, we’ll have the
option to open this link in a new tab by checking
the ‘open link in a new tab’ box, which
is what we’ll want to do as we’re taking
the user away from our site.
Then click ‘Add to menu’.
Drag it to where you want it to be positioned
in the menu.
For this example, we’ll add it as a sub-menu
item within ‘Creativity’, under the blog
section of our menu.
If you want a menu item to link to a section
on the page, for example, if we open the homepage
in a new link.
You’ll notice that at the very bottom we
have a contact form.
Let’s say we wanted to link to this section
of the page from our main menu.
To do this, we’ll need to assign an ID to
this section.
Let’s go to the back-end of our homepage.
We’ll go through the page builder and customize
these layouts in the next segment, but for
now, let’s scroll down to the very last
section of the page, on the blue tab section,
we’ll click on the edit settings option
(with the three lines).
We’ll then click on the ‘advanced’ tab,
and in the box next to where it says CSS ID,
we’ll enter the ID of ‘contact-test’.
We’ll then click ‘save & exit’.
Update our page.
We’ll go back to the menu settings and refresh
the page.
We’ll add a custom link with a ‘link url’
of ‘#contact-test’, and for this example
we’ll add ‘test’ as our link text.
Then click ‘add to menu’.
Save the menu.
Then navigate to the homepage and refresh
the page.
Our link called ‘test’ should now be there,
and if we click on it, it will take us down
to the section that we added that ID to earlier.
And that’s how you link to internal sections
on the page.
Firstly by giving the section an ID (this
can be whatever you like without spaces),
then using hashtag and the ID name to link
to it.
If you want to use the custom link as an organizational
tool and not a link, you can set the link
url to just a hashtag, and if the user clicks
it, it will only reload the page they’re
on.
There may be a few instances where you need
to do this, so you now know how.
Divi also allows you to include mega menus
which can be great from a UX perspective as
they allow you to show large amounts of information
in an efficient way.
To show you what we mean:
Click on the blog menu item.
If you’ve checked the ‘CSS classes’
box under the screen options at the top, you’ll
notice there’s a field called ‘CSS Classes’.
We’ll add the class name of mega-menu.
Now let’s hit ‘save’.
Then navigate to the front-end and refresh
the page.
When we hover over ‘blog’, you’ll see
that we now have this awesome mega menu.
It will take some finessing, but this can
be a powerful feature.
On the OHKLYN post, follow this button to
the Divi Documentation, then search for mega
menu, and you can view the tutorial video
on how to get the most from this feature.
To amend the footer menu, you’ll approach
it the same way - By creating a new footer
menu and following the steps we just went
through.
Remember to refer to the documentation for
further information regarding the menu options
available in the Divi theme.
We’ll now move on to the global theme settings
where we can begin customizing your website
to reflect your brand and design style.
[DIVI THEME OPTIONS]
In addition to what we’ve covered so far,
within WordPress and for the Divi Theme, there
are three places where you’ll control the
global look and feel of your website.
These are:
The theme options or settings,
Theme customizer panel, and;
The Widgets section.
The theme options tab is where we’ll set
the logo and favicon for our website, control
our default page and post layouts, amend the
visibility of global elements like social
icons and metadata, as well as integrations
for things like Google maps, social media,
etc.
The Theme customizer is where we’ll manage
our global styling parameters, such as colors,
fonts, menu styles, etc.
And lastly, Widgets are how we populate our
sidebar with content and other widget enabled
areas on our site.
Firstly, we’ll take a look at the Divi Theme
options section.
To access the Divi Theme options section,
from your WordPress dashboard:
Hover over ‘Divi’, and select ‘Theme
options’.
In this tutorial, we’ll provide a brief
overview of the most important parts that
will be relevant to everyone.
Divi has so many options and you can access
hours of free tutorial videos with the most
relevant and up-to-date information for all
the available options via the Divi Documentation
link which can be found in the description
below, and on the OHKLYN post here.
Follow the link and then search for a specific
element that you’d like more information
on.
In this case, we’ll search for ‘Divi theme
options’.
Here, you’ll be able to access detailed
video tutorials and documentation on every
option available.
In the theme options, you’ll notice that
there’s a number of tabs along the top.
Before we go through each of them, let’s
cover some common vocabulary that relates
to the basic architecture of WordPress so
that these make more sense to you as we go
through them.
Let’s quickly define static pages, individual
posts, portfolio posts, and archive pages,
as you’ll be able to change a number of
the settings that relate to these within the
Divi theme options section.
Static pages are the pages of your website
where the content is relatively static.
For example, your homepage, about page, contact
page, etc.
Individual posts are the unique blog posts
that you create on your website.
Individual posts are grouped by categories
which serve as an organizational tool, and
provide additional context and meaning to
users.
Individual portfolio posts are most commonly
used to showcase examples of work or case
studies.
These function in a similar way to individual
posts, where they are associated to a category.
Archive pages are typically the category pages
and showcase the individual posts or portfolio
posts associated to that specific category.
Essentially, these pages act as an archive
of associated posts.
For example, if you are a fashion brand and
want to include a blog on your website, you
may want to have a category called ‘Lifestyle’
with a number of individual posts related
to ‘Lifestyle’ related keywords or topics
related to your niche.
If you were to click on the ‘Lifestyle’
category link on your website, you would be
taken to the ‘Lifestyle’ category archive
page, which would display all the posts related
to the category of ‘Lifestyle’.
This page is what’s referred to as an archive
page.
Ok, so hopefully that makes sense and we can
now go through the Divi Theme options.
In the ‘Divi Theme Options’ section, the
first tab is the ‘general’ tab, and is
the tab where we’ll spend most of our time.
This is where we’ll upload our logo and
favicon.
To update your logo, go to the logo option
and select ‘upload’.
You can select your logo from your media library
if you’ve already uploaded it.
If you haven’t, you can drag in your logo,
or navigate to ‘upload files’ and click
‘select files’ to upload your logo.
Once your logo is added to the media library,
select your logo and add an alt text like
‘your brand name and the word logo’.
Adding alt text to all images used on your
website is good practice and something we’d
recommend doing.
Then choose ‘set as logo’.
Next, we’ll follow the same process to add
a favicon to your website.
A favicon is the icon that appears in the
browser tab when a user is on your website.
Your favicon image will need to be square,
however, it can be a .png image if you want
to include a brand element that isn’t square.
To upload your favicon, next to the favicon
option, select ‘upload’.
Either select your favicon from your media
library or upload it.
Then select your favicon, add an alt text
and then choose ‘set as favicon’.
For each of the available options in this
section, you can hover over the question mark
icon on the right-hand side to see more information
about each specific option.
If you have a brand color palette, we recommend
adding it to the ‘Color Pickers Default
Palette’ section here, as this will make
your color palette available anywhere throughout
your site where you have the option to set
a color.
For example, in addition to black and white,
which is already preloaded in, we’ll add
the color #0ddadd by entering in the hexadecimal
color code.
Below that, you have some blog options including
the placement of the sidebar on either the
left or right-hand side of the page.
If you want to add a Google map to your website
design, you’ll need to set up your Google
Maps API key and paste it in here.
On the OHKLYN post, we’ve provided a link
to the guide on how to do this, which you
can access here.
Similarly, you can enable the default social
media icons on your website here by enabling
the options you want, and adding your social
media links below.
We find this feature from Divi limiting because
of the limited options available without needing
to amend the base code.
We prefer to disable these and instead, import
font awesome instead which enables us to add
any social icon to our website and add the
links anywhere on our site.
There’s a guide on how to do this with Divi
on the OHKLYN post here.
Below that, you’re able to set the number
of default posts shown on the various types
of pages.
Underneath that are a number of options including
a back to top button on your site that you
may want to utilize.
At the very bottom is where you can add custom
CSS to your website.
You can also add Custom CSS via the Theme
Customizer panel which we’ll explore next.
Whenever you make changes, remember to hit
the ‘save changes’ button at the bottom
to commit your changes.
Let’s take a quick look through the remaining
tabs:
The first is ‘Navigation’ - Here you can
control the visibility of specific elements
related to pages, categories, and your navigation
menu features.
Next up is ‘Builder’ - the Divi Builder
was recently upgraded to move away from adding
what’s referred to as ‘inline CSS’ into
your web pages when you make customizations
to your page.
This is huge, as many drag and drop builders
add Inline CSS, and if you know anything about
web design best practices, inline CSS is a
major rookie move.
In this tab, you have a few options that relate
to how the CSS is generated on your site (which
we wouldn’t recommend changing), as well
as the ability to turn off the product tour
feature.
Next is ‘Layout’ - This allows you to
control the look and visibility of elements
included on individual posts and pages.
Up next is ‘Ads’ - As the name suggests,
this allows you to integrate ads on your posts.
Next is ‘SEO’ - We prefer to use the Yoast
SEO plugin to optimize the on-page elements
of our website, however, you have control
over some of these elements here.
Up next is ‘Integrations’ - here you can
add your Facebook pixel, Google Analytics
code, or any additional code to your website.
Finally, we have ‘Updates’ - This allows
you to add your Elegant Themes username and
API key to enable Divi theme updates from
within your WordPress dashboard as Divi improves
and evolves.
Ok, so that’s an overview of the fundamentals
everyone should know about the Divi Theme
settings.
As we mentioned, review the help (or question
mark) icon next to each option for further
definitions, or follow the link on the OHKLYN
post here to the Divi Documentation and search
for ‘Divi Theme Options’ for a more detailed
overview of each element.
Before we take a look at the Theme Customizer
which allows you to set global fonts, colors,
and other styling attributes on your site,
let’s quickly explore widgets.
If you’re new to WordPress, we would recommend
reviewing the documentation to get your head
around widgets and widget enabled areas as
they are a powerful feature.
Widgets are managed in their own dedicated
section which you can access by hovering over
‘Appearance’ in the admin menu on the
left-hand side, and selecting ‘Widgets’.
We’ll open this in a new tab:
On the left, you have all the available widgets.
And on the right, are the widget enabled areas.
Divi has the sidebar widget area which appears
on individual posts, archive pages, etc.
As well as four footer widget areas that you
can use depending on which footer layout option
you choose in the Theme Customizer which we’ll
cover off next.
By default, there may be some widgets added
to your sidebar.
Depending on the layout you’re using, this
may or may not be displayed, however, this
can very easily be added.
For this example, if we open the blog page
of our site in a new window, we’ll see that
the sidebar is included here.
If we go back to the widgets section of our
dashboard, you’ll notice that the elements
that are listed in the sidebar are what’s
being displayed in the blog sidebar of our
page here.
Let’s take a quick look at how we manage
widgets.
To add a widget to the sidebar, or any widget
enabled area:
Simply click on the widget on the left.
Select the widget enabled area you want to
add the widget to.
And select ‘add widget’.
Once the widget has been added, you can drag
it into place.
Click on the widget to amend its settings.
Once you’ve updated the widget, hit ‘save’.
To delete a widget, click on the widget.
Then select ‘delete’.
This process will apply for managing all widget
enabled areas on your site.
So, hopefully that all makes sense.
If you need more information, we recommend
reviewing the WordPress documentation under
the help tab at the top of the page, or follow
the link through to the Divi Documentation.
Pro tip - Search for the ‘Divi Sidebar Module’
from the documentation section.
This guide will show you how to use the Sidebar
module which will be implemented on a number
of the blog pages for the layout pages included
in the free Divi layouts.
Ok, so we’ve covered the Divi Theme Options
and had a quick look at widgets, let’s move
on to the Theme Customizer options.
The theme customizer is where you’ll have
full control over the global styling options
for your website.
To access the theme customizer:
Go to your website dashboard, hover over ‘appearance’,
and select ‘customize’.
You could also hover over ‘Divi’ and select
‘Theme Customizer’.
On the left is the customization panel, and
on the right is a live preview of your website.
One thing to note before we get started is
that the module settings for the layouts and
elements on each page will override the global
settings that are set via the theme customizer.
Let us show you what we mean - If we right
click on the heading for the homepage that’s
being set and click on ‘inspect’, we’ll
see that the font being used for Heading 1
or H1 is ‘Montserrat’.
Within the theme customizer, if we navigate
to ‘general’.
Then go to ‘typography’.
Let’s scroll down to the ‘header font’
option.
And select ‘Raleway’, then publish changes.
You’ll notice that nothing has changed.
This is because the title font is being set
within the module and overwriting what we’re
setting here.
To remove the font being set at the module
level:
We’ll close the customizer.
Hover over ‘pages’ and select ‘all pages’.
Select the page called ‘home’.
In the next section, we’ll go through how
to use both the back and front-end Divi builder.
However, if we click on the ‘edit setting’
option for the text module hero section at
the top.
Then navigate to the ‘design’ tab.
Scroll down to the ‘title text’ section
then set the title text and weight back to
the default setting by clicking on the arrow
icon to the right.
This will reset the font options to whatever
is set via the Theme Customizer.
Let’s hit ‘save and exit’
Then publish the page.
View the page from the front-end.
You’ll notice that the title font has now
changed.
And if we right click and inspect the font.
You can see that Raleway is now the font being
used.
Let’s head back into the Theme Customizer.
Ok, so what’s the point?
The point is, if you have a large website
with a number of pages, we would recommend
resetting the fonts for the modules and setting
global styles via the Theme Customizer and
the module customizer which we’ll cover
next.
The reason for this is that if you want to
change anything later, such as the font, your
accent color, or the default button design,
you’ll only need to change it in one spot.
Otherwise, you’ll need to update every individual
module which can be very time consuming and
inefficient.
We would typically create a child theme where
we set the styles via an external style sheet,
however, setting these via the theme customizer
is the next best option.
If that all went over your head, that’s
totally fine - just ignore that for now.
Bottom line, a lot of the styling settings
you set here can be overwritten via the Divi
Builder which we’ll go through in the next
section.
If you’re brand new to making a website,
this will be the best way to make changes
to your website.
Ok, so let’s take a look at the theme customization
settings.
Obviously, we’re not going to go through
all of the options, however, we will cover
how to choose the header navigation style
for your website, set accent colors, and configuring
the footer for your website.
For a detailed overview of every option, follow
the link to the Divi Documentation on the
OHKLYN blog here, then scroll down to the
‘Customizing Divi’ section and click on
‘view tutorials’.
From there, you’ll be able to access the
newest and most relevant information for the
Theme Customizer and module customizer.
The first thing we’ll take a look at are
the ‘General’ settings:
Under the site identity tab, is where you
can add a ‘site title’ and ‘tagline’
for your website.
If you haven’t uploaded your favicon via
the Divi theme options, you could also upload
it here.
Next is the layout settings, here you can
enable a boxed layout, adjust the default
content widths and heights for your site,
as well as set your website’s default accent
color.
For this example we’ll set ours to #0ddadd,
by clicking on the color picker.
Because we added our brand color to the palette
earlier we can easily select it from the pre-loaded
options.
Whenever you make any changes, remember to
publish changes by clicking on ‘publish’
at the top.
If we go back, the next option is ‘typography’.
Here we can set our default header and body
fonts.
You can choose from a number of free web fonts
and a number of Google fonts.
In this case, we’ll set ours to ‘Raleway’
for both the header and the body.
Below that you can set your body link color,
which we’ll set to our brand color.
Then there’s the default header text color
and body text color, which we’ll leave as
is but you could set this to suit your design.
Remember, if you choose to use a layout from
the library where the fonts are set at the
module level, these will be overwritten.
To ensure the font you set here is used throughout
your site, you’ll need to reset the font
option for the specific module via the Divi
Builder which we’ll cover next.
Let’s go back.
The last option for this section is the background
settings.
Here you can set a default background color
for your website or upload an image or texture.
Let’s move on to the next group of settings
which are the ‘Header and navigation’
settings.
Here, we can set the header format by selecting
a header style.
This includes the default option.
You can also enable the vertical navigation
option.
If we uncheck the vertical navigation option,
you can also hide the navigation until scroll.
We’ll uncheck that.
Another option is the Centered logo option.
Centered inline logo option.
Slide in menu option, similar to that on the
OHKLYN website.
And, Fullscreen menu overlay option.
Pick the option you like the most and remember
to publish your changes.
Next, we’ve got the ‘Primary Menu Bar’.
This is the top navigation bar for your website.
Here, you can opt to make it full width.
Or, hide the logo image.
You can also set the height of your menu bar.
And set the max height of your logo.
You can also amend the text color.
And, menu background color in this section.
Depending on which header style you go with,
you’ll either have access to the secondary
menu bar settings, or the Slide In and Fullwidth
header settings.
These will look similar to the settings in
the primary menu and allow you to further
customize your website.
If you choose one of the header styles that
support a secondary menu, this can be a great
option for featuring your phone number, email
or other call-to-action items above the fold.
For more information on how to use this feature,
follow the Divi documentation link and navigate
to The ‘Divi Header & Navigation Theme Customizer
Settings’ section which goes through all
the options in more detail.
Next is the fixed navigation settings, this
refers to the sticky menu or the menu that
sticks to the top of the browser when the
user scrolls down the page.
You can amend the fixed (or sticky) header
options, by following the same process.
You’ll notice that the options are very
similar to the settings we went through in
the primary navigation panel.
Lastly, is the Header elements tab.
Here you can enable or disable the social
icons (if you’ve populated these via the
Divi Theme Options), and the search icon.
You can also choose to show a phone number
or email which will enable the secondary menu
and feature this information above the primary
menu.
The last thing we’ll cover here is the footer
options for your website.
In this section, you can set the global footer
for your website.
This requires choosing a column layout under
the layouts option and using the Footer widget
enabled areas that we covered before to populate
your footer with content.
This can be a little tricky for beginners
and as such, we would recommend using one
of the predesigned footer layout packs that
we’ve linked on the OHKLYN post here.
There will be a video that shows you how to
use any of these designs as well as how to
set this as global sections that you can use
on all of the pages on your website.
What we will do together though is update
the bottom bar of our website (which is this
part here).
To do that, within the Footer options, we’ll
navigate to the ‘bottom bar’ tab.
Here you can amend the background color, text
color, etc.
To amend the text, click into the ‘edit
footer credits’ box and type in the information
you want here.
For this example, we’ll add a copyright
symbol which in HTML is an ampersand, the
word copy, and a semicolon.
We’ll then add the year 2018, 2019, etc
depending on when you’re watching this.
We’ll then add our brand name ‘Triangle’.
Then a pipe character.
And we’ll add the text ‘All rights reserved’
full stop.
Obviously you can add whatever you like here.
If you want to remove the social icons from
the footer, go back and select ‘footer elements’.
Then uncheck the box next to ‘show social
icons’.
Remember to publish any changes.
Let’s go back to the theme customizer.
From here you could customize the default
style of the buttons, amend the blog post
headings and meta text styling such author
names, dates, etc. and adjust the default
spacing on mobile and tablets.
Once again, we recommend going through the
Divi documentation for more information on
all the available options here, and remember
to publish any changes you make.
To exit out of the theme customizer, click
on the ‘x’ in the top left.
Now, let’s take a quick look at the module
customization options.
The module customizer is used to set the default
settings for the various modules available
in the Divi Builder which we’ll look at
next.
To access the module customizer from your
WordPress dashboard, hover over ‘Divi’
and select ‘Module Customizer’.
As you can see, this functions very similarly
to the Theme Customizer, it allows you to
set some of the default global settings for
the various modules you’ll use to build
out your pages such as the image modules,
blurb module, etc.
Once again, any changes you make to modules
within individual pages will overwrite these
settings.
For example, if you wanted to control the
global heading size of text in a blurb module,
you would click on ‘Blurb’, and set the
desired font size here.
While this gives you a little more control
over global settings, if you know CSS, we
would recommend managing these via the style
sheet of your child theme rather than managing
them here.
For beginners, you’re better of amending
these at the module level as you have more
control over the responsive styling, meaning,
the ability to change elements such as the
size of the font depending on the device your
website is being viewed on.
A 60 pixel heading might look great on desktop,
but it’s not going to work on mobile.
This is referred to as responsive styling
and is really important to get right.
If you want to explore the Module Customizer
in more detail, follow the Divi Documentation
on the OHKLYN post, then click on the ‘Customizing
Divi’ option, and select ‘The Divi Module
Customizer’ tutorial.
Now, let’s take a look at Divi’s best
feature - the Divi Builder.
The Divi Builder is Elegant Themes’ custom
built drag and drop page builder, and is one
of, if not the best in the industry.
You’ve seen how easy it is to bring in modules,
rows, sections, pages, and entire pre-built
website designs in just a few clicks.
And now, we’ll go through how to customize
these designs to suit you.
We’ll also go through how you can create
your own designs from scratch.
To do this, we’ll create the page that we
used as the hero image for this tutorial which
is this page here.
The Divi Builder has both a back-end editor
(which we prefer working with), and a front
end editor which is great for beginners as
it allows you to see exactly what you’re
doing in real time.
From our WordPress dashboard, if we hover
over ‘pages’ and select ‘all pages’,
click into the homepage or any page you created
before and already loaded a layout into.
You’ll see the back-end version of the Divi
Builder.
The best way to think about a web page is
in terms of rows and columns, or as a grid.
If you’ve sketched out a rough guide of
the layouts for each page on your website,
then creating them using the builder will
be easy.
If you haven’t done that yet, we’d recommend
pausing this video and doing that now, as
it will make the process much easier.
If we look at our homepage as an example,
each of the most outer containers here, for
example the purple tab and the blue tabs are
referred to as sections.
If we look at our blue sections, you’ll
notice that within them are green tabs which
are the rows.
You can have multiple rows per section.
The rows consist of varying column structures,
and within those are individual content modules
such as text blocks, blurbs, images, etc.
The purple section at the top is referred
to as the full width section and only by definition
consists of one full width column.
If we open up this page in a new tab and view
it from the front-end.
You’ll see that the purple section is this
heading section here.
If we scroll down, the next section has three
blurb modules,
Which if we navigate to the back-end is this
section here.
If we go back to the front-end, we then have
an image background on the left and a CTA
section on the right, and below that is a
section with an opt-in form.
If we head to the back-end, this is the section
with the image background being set on the
row and the CTA on the right, and below that
is the section with the opt-in form.
For each section, row and module, you can
access the settings by clicking on the edit
settings button which is the three lines on
the left.
Obviously, the available options will differ
depending on the section, row, or module you’re
editing.
Similarly, you can duplicate sections, rows,
or modules by clicking the ‘duplicate’
button here.
To move sections, rows, and modules around,
simply click and drag them into place.
To delete a section, row, or module, click
on the ‘x’.
To change the column structure of a row, click
on the ‘change structure’ option.
Then select your desired layout from the available
options.
To add a new module, click on ‘insert module’,
and select the module you want to add from
the available options.
To access detailed overviews of all the available
modules, follow the link to the Divi Documentation
and navigate to the ‘Divi Modules’ section.
Here, you’ll be able to access all the information
you’ll need to successfully implement any
of the Divi modules.
You can also save any Divi module, row, section
or page layout to the Divi library to easily
use it in another section of your website.
For example, let’s click on the ‘feature
01’ CTA module.
To save this to the library, all we need to
do is click on ‘save and add to library’.
We then name the module, in this case ‘Feature
CTA’.
We can then opt to make this a global element
by checking the box.
What a global element is, is a module, row,
or section that can be saved to the library
and then used on multiple pages.
Global modules are all linked so that if you
make an update on one page, it is then updated
on every page where you’ve used the global
module.
This is great for deploying advertising banners,
site wide footers, opt-in forms, or other
content pieces that you want to be the same
on a number of pages that you can easily update.
For this example, we’ll want to change the
text to be unique, so we’ll leave the box
unchecked.
To save the module, click ‘save and add
to library’.
Now, if we click on ‘insert module’, we
can navigate to the ‘add from library’
tab, and the module we saved is there.
To add this to the page, we simply click on
it and it’s now added to our page.
We’ll delete that for now.
Let’s scroll back up to the top of the page.
If we want to change the heading for this
page from the back-end, we would click on
the settings option for the hero section at
the top.
Then change the title to say ‘Make a Website’.
If we scroll down, we could also change the
button text and subtitle text here
Further down we could amend the button URLs
and below that, the image and background settings
for this section.
On the design tab, we can set the orientation
and control a number of the visual elements.
One of the most important being the title
text settings here.
And the content text settings here.
You can reset these to their default by clicking
on the arrow to the right.
Which in our case, as we set the default header
and body typography to ‘Raleway’, would
mean that they would now be set to ‘Raleway’.
If you want to customize these at the module
level, one of the great features here is the
ability to amend the font size depending on
which device the user is viewing your site
on.
This is indicated by the mobile icon to the
right of the various settings.
For example, if we change the heading title
text size to 62 pixels then click on the mobile
icon, we’ll see that we can click on the
tablet and mobile tabs to set a varying font
size for each device.
This gives you more control over exactly how
your website looks on all devices and is something
we recommend spending some time on to get
your site looking perfect.
To save changes to any module, row, or section,
click ‘save and exit’.
Divi is constantly upgrading and improving
the Divi builder, so rather than us run through
every option, follow the link to the Divi
Documentation and module settings sections
to get familiar with all the options.
Are you ready for the great part?
We’ll now show you the front-end builder.
We’ll update our page to commit changes.
Then click ‘view page’ to view the page
from the front-end.
To deploy the front-end version of the Divi
Builder (or the visual builder) click ‘enable
visual builder’.
This will launch the visual builder.
Similar to what we covered from the back-end,
if we hover over the hero section at the top,
you’ll notice the same structural elements.
The purple section here indicates a full width
section and the available options can be accessed
via the settings tab in the top left.
If we click on the settings icon, the interface
looks very similar, the main difference being
that you can edit in real time.
If we close that, we can edit the text directly
by clicking on it, and typing in some new
text.
If we scroll down, we can see the next section
with the three tabs and can edit them directly
from here.
To save changes, click on the purple circle
at the bottom, then select ‘save’.
As we mentioned before, Divi is constantly
evolving and improving.
To ensure you have access to the latest resources,
follow the link on the OHKLYN post here to
the Divi Documentation.
From there, navigate to the ‘Using the Builder’
section.
If you’re new to Divi, we recommend pausing
this video and watching the ‘Getting Started
With The Divi Builder’ tutorial by Elegant
Themes, as you will learn the fundamentals
you’ll need to know and see just how incredible
the Divi Builder is.
These videos will be the best resource for
you, as they will be the most relevant and
up-to-date.
After watching these tutorials, go through
and customize the individual pages for your
website based on the page layouts you sketched
out at the beginning of this tutorial.
What we’ll cover now is how to create the
layout in our hero image from scratch using
the Divi Builder.
For this, we’ll use a combination of the
back-end editor and the front-end editor so
you can see both in action.
To exit the visual editor, click ‘exit visual
builder’ at the top.
Then we’ll return to our WordPress dashboard
by hovering over our site title and clicking
on ‘dashboard’.
To create a new page, we’ll hover over ‘pages’,
and select ‘add new’.
We’ll give this a title - Let’s call it
‘test’.
Then select ‘Use the Divi Builder’.
Let’s go back to the page we sketched out
earlier.
In this example we want to create a hero image
with a title, subtitle and two CTA buttons.
In our newly created page, there is a default
section which is loaded in whenever you opt
to use the Divi Builder.
For our hero section, we’ll create a new
full width section by clicking on ‘full
width section’ option here.
We’ll then drag this above the default section
that was automatically created.
Add a full width header module by clicking
on ‘insert module’, and choosing the ‘full
width header’ module.
We’ll add in our title of ‘Make Your Own
Website’.
In the subheading text box, we’ll add our
subtitle of ‘Free Step by Step WordPress
Tutorial’.
Below that, we’ll set the button one text
to ‘GET STARTED’.
And the button two text we’ll set to ‘EXPLORE
MORE’.
If we scroll down to the button one and two
URLs, here is where you’d set the url where
you want the button to go.
For example, we’ll set the button one URL
to /contact and we’ll set the button two
url to /about.
Note that if you’re linking to an internal
page of your website you don’t need to include
the https or www part of the domain.
This is referred to as a relative path.
However, if you link to an external page,
you’ll need to use the https or www part
of the url which is called an absolute path.
If we scroll down, we could add images, backgrounds
or overlays here, however, we’ll set the
background via the section settings, rather
than in the module settings here.
We’ll then head to the design tab.
Here, we’ll set the ‘Text and Logo Orientation’
to center.
Then opt to use the ‘Make Fullscreen’
option.
This will make this module take up the whole
screen above the fold.
Meaning, the visible part of the screen the
user sees when the page loads.
This prevents us from having to worry about
messing with padding or spacing, and creates
a nice feature.
Now, let’s scroll down to the ‘Text’
settings and change our text color to ‘light’.
Depending on your Global styling preferences,
you can either control the text settings via
the theme customizer, or you can use the easier,
but slightly more manual approach and set
the heading fonts under the title text and
content text settings here.
As this WordPress tutorial is more tailored
towards beginners, we’ll add our text styles
in here so we can show you how the responsive
styling works.
Under the ‘Title’ text section, we’ll
select the level of heading we want to style,
which in this case, is the H1 or Heading 1.
Typically you should only have one heading
1 per page, and use Heading 2’s or H2’s
to Heading 6’s or H6’s to demonstrate
content hierarchy on your site.
Headings should be used for hierarchy in web
design, not for styling purposes.
As you’ll see, we can very easily change
the look of each heading to suit your design.
Headings are telling search engines about
the structure of your content, so use them
hierarchically.
Hopefully that makes sense.
With the H1 option selected, we’ll set our
‘Title Font’ to ‘Raleway’.
Because we set our global header and body
font to ‘Raleway’ via the theme customizer,
we don’t actually need to do this as ‘Raleway’
IS our default font, however, we’ll show
you how to change the font in here anyway.
We’ll set our ‘Title Font Weight’ to
bold.
You could very easily pick whichever font
and font weight you want to use on your site
from the dropdown.
Or set it globally via the theme customizer,
and then leave ‘Default’ selected.
We’ll then scroll down to the ‘Title Text
Size’ option and set this to 70 pixels.
You’ll notice that the mobile icon appears.
If we click on that, we can then click on
the tablet tab and set the title text size
on tablet to say, 50 pixels.
Then we’ll set the mobile text size via
the next tab to 30 pixels.
As we’ll see later once we’ve saved changes,
and resize our browser this will adjust our
design to look great on all devices.
Under the Content Text option, we’ll set
our Content Font to ‘Raleway’, and leave
the weight at regular.
We’ll then scroll down to our subhead text
section, and set our ‘subhead Font’ to
‘Raleway’ with the regular font weight.
And then set the Subhead Text Size to 22px.
We’ll set tablet to 20px.
And mobile to 18px.
Next, scroll down to the button customization
section.
We’re not sure as to why the button two
options appear first, but next to the ‘Use
Custom Styles for Button Two’ option, we’ll
switch the toggle to ‘yes’.
If they’ve changed the order of this by
the time you’re watching this, then scroll
down to the button two section first, and
following along.
We’ll cover the button one settings next.
Next we’ll set the ‘Button Two Text Size’
to 14px.
Then set the ‘Button Two Text Color’ to
white, or #fff
Leave the background color as is, as we want
the background of the button to be transparent.
Set the ‘Button Two Border Width’ to 2
pixels.
The ‘Button Two Border Color’ will be
white.
And the ‘Button Two Border Radius’ will
also be 2 pixels.
This refers to whether the button has rounded
corners or not, the higher the value the more
rounded the corners.
We want our ‘Button Two Font’ to be ‘Raleway’,
however, to demonstrate how global fonts work,
we’ll just leave this as default, as we’ve
set our global font to ‘Raleway’ in the
theme customizer.
Scroll down, and we’ll disable the ‘Show
Button Two Icon’.
The ‘Button Two Hover Text Color’ will
be set to white.
Wherever you see ‘Hover’ this is referring
to what happens when the user ‘hovers’
over the element.
So in this case what happens to the button
text color when the user hovers over the button.
For ‘Button Two Hover Background Color’,
we’ll set our brand color of #0ddadd which
we’ll select from the color palette selector
we set earlier.
Similarly, we’ll set the ‘Button Two Hover
Border Color’ to our brand color using the
color palette selector
The ‘Button Two Hover Border Radius’ will
be 2 pixels
We’ll then scroll down to the button one
settings and select ‘yes’ for ‘Use Custom
Styles for Button One’
‘Button One Text Size’ 14px
‘Button One Text Color’ black or #000
‘Button One Background Color’ will be
white or #fff
‘Button One Border Width’ we’ll set
to 2 pixels
‘Button One Border Color’ is white or
#fff
‘Button One Border Radius’ will be 2 pixels
‘Button One Font’ will be ‘Raleway’
but we’ll leave as default as we set this
globally
Switch ‘Show Button One Icon’ to ‘No’
‘Button One Hover Text Color’ will be
white or #fff
We’ll set the ‘Button One Hover Background
Color’ to our brand color
Similarly, the ‘Button One Hover Border
Color’ will also be our brand color
‘Button One Hover Border Radius’ will
be 2 pixels
The last thing we’ll do is show you how
to add some custom CSS to your design.
To our knowledge there isn’t an easy way
to add padding to the buttons to increase
the actual size or space around the text of
the button.
If there is, please leave a comment below.
For this, we’ll navigate to the advanced
tab, and scroll down to the ‘Button One’
section.
Within the box you can add custom CSS targeting
that specific element.
In this case we’ll add padding:10px 20px;
This is applying 10 pixels of padding to the
top and bottom of our button text which is
an anchor or link text, and 20px to the left
and right.
Now, if you’ve taken our CSS for WordPress
course which you can sign up for at courses.ohklyn.com,
you’ll know that what we’re about to do
next is not best practice.
Because the Divi styles at the time of recording
this applies the important rule, the only
way for us to overwrite this is to apply the
important rule to this declaration to make
sure the padding is applied.
If that all sounds like gibberish, that’s
ok.
All we need to do here is add !important to
the CSS declaration before the closing semicolon.
We’ll copy this CSS and paste it into the
button two box below as well.
Then select save an exit.
Before we preview this, we’ll add our background
image and overlay to the section, by clicking
on ‘edit settings’ in the purple tab for
the section.
On the content tab, we’ll scroll to the
'Background’ section.
Here we can add background color, gradient,
image, or video.
In our example we’ll add a background image
and set an overlay to make sure our white
text really pops.
To do this, we’ll click on the background
image tab, which is this one here.
We’ll click on the plus icon, or the section
below.
We’ll upload this hero image here.
By dragging it into our media library.
Remember to set an alt text, from an SEO practice
it can be a good option for this to align
with the keyword your optimizing the page
for.
In this instance we’ll add an alt text of
Make your own website dash hero image.
Then click ‘set as background’.
We’ve added the link to this image on the
OHKLYN post here, and in the description below,
which will take you to this page here.
If you click on ‘download a preview’,
you’ll be able to upload this image with
a watermark to help recreate the look.
We use Shutterstock for a lot of the images
we use, and we love this feature as we can
trial images to see how they look on our sites
before purchasing them.
Ok, so we’ll then click on the background
color option tab.
Here we can add the color that we want to
overlay on our image.
You could also overlay a gradient by selecting
the gradient option on the next tab.
We’ll set a background color of black and
change the opacity to about 10% as we don’t
want to lose too much from the image.
This will allow our white text to stand out
more.
To ensure this is set as an overlay, we’ll
click back on the background image tab
Then, scroll down to the ‘Background Image
Blend’ option
Here we could select from a number of options,
in this case we’ll select ‘overlay’.
Then select ‘save and exit’.
From here, in the top right corner, we can
either save this page as a draft, preview
the page so far, or publish the page.
Let’s click on preview to see what our hero
section looks like.
Ok, that’s looking good.
Let’s head to the back end and we’ll save
this page as a draft by clicking on ‘save
as draft’.
Later, we’ll publish this page by selecting
‘publish’ when we’re ready for it to
go live.
Something that’s trending in 2018 and we’ll
see more and more of in 2019 and beyond, is
including angles or shapes over images.
Let’s skip ahead to the end of this tutorial
and we’ll show you what we mean,
See in the finished version of this page,
how we’ve added this angle look to our sections.
This can be done in a number of ways.
This can be done with CSS, however an easier
way that’s beginner friendly, is using png
images to achieve any range of shapes.
For this example we’ll use this simple shape
here, which we’ll add to the section where
the background image is set.
Because the background of the next section
is white, and the shape includes a white section
at the bottom and a transparent section at
the top, it looks like the image has this
cool angle effect.
If you want the shapes we use in this tutorial,
subscribe to the OHKLYN newsletter
You’ll be sent a welcome email with a link
to the tutorial assets and the password to
download any of our tutorial assets.
For this one, scroll down to the ‘Make your
own website’ section and click on the ‘Download
shapes’ button.
This will download as a zip file, and in there
you’ll see two shapes.
Shape one which is the one we’ll use here,
and shape 1 Inv.
Which is the inverse of shape one which we’ll
use in the counter section below - which you
can see here on the final example.
Divi has just been updated to include 'Divi
Shape Dividers' that allow you to include
all kinds of divider shapes between sections
which is also a great way to this.
We'll link a video on how to use these in
the tutorial post.
So we’ve gone through how to create a section
using the backend builder and hopefully you
see how you can use that approach.
From the backend of our test page, let’s
enable the visual builder and build out the
rest of our page.
To do this we’ll click ‘use visual builder’.
This will launch the visual builder.
What we’ll do is add a fullwidth image module
to our hero section that we just created.
This will allow us to upload or shape 1 and
create the angle effect we want.
If you don’t want to do this, you can just
skip this part.
To add the fullwidth image module, we’ll
hover over our fullwidth section (which is
the puprle section here)
Then click on the grey plus icon.
We’ll select the fullwidth image module
You’ll notice that the options available
in the visual builder are very similar to
those in the backend editor.
Under image, we’ll select ‘upload image’
Drag our shapes into the media library,
Then select shape 1
Add an alt text
Then choose ‘upload an image’
We’ll then hit save, or the green box with
the tick.
And our image has now been applied, creating
the effect we wanted.
You can play with the spacing, or change any
of the settings by clicking on the gear icon
which is the module settings.
To commit your changes, click on the purple
circle with the dots, then select ‘save
draft’ or ‘publish’.
Once you’ve published your page you’ll
have the option to ‘save’ which will update
your live page.
If we refer back to our sketch from earlier,
in the next section we want to create a two
column row, with text and a button on the
left and a video or image on the right.
When we created the page, Divi automatically
created a section for us, which is this section
here.
When we want to create a new section we can
click on the plus icon here, and then select
the type of section we want to create from
the options.
For this example we’ll use the section that
was created before.
To make this a two column row we’ll hover
over the section, then the row.
When the green outline appears, we’ll click
the change column structure here.
Then select the two even column option.
We’ll then be promoted to insert a module
into our first column, or we could click on
the grey circle with the plus icon.
We’ll scroll down and select the ‘text’
module.
You can move the settings box around by clicking
and dragging it, or amend the size, by clicking
on the corner and dragging it to suit.
We’ve prepared some text elsewhere so we’ll
paste it into the text tab, which is the HTML
text editor tab.
Here we can paste in text then add our own
HTML markup, or switch to the visual editor
and choose our options from there, which is
what we’ll do in this tutorial.
Whenever you paste text in, make sure you
paste it into the text tab and not the visual
tab to avoid bringing in outside styling from
a word doc, etc which will mess up your website
styling.
Now that we’ve pasted in the text we want
to use into the text tab, we’ll click on
the visual tab to add the styling we want.
We want Welcome to Triangle to be our heading,
so we’ll highlight this text and set this
to a heading 2.
Then, save the changes.
To add a button underneath our text box, we’ll
hover over the text module and click on the
plus icon towards the bottom.
We’ll select the button module
Add our button text of ‘LEARN MORE’ in
all caps
Under the ‘Link’ option is where we set
the link address for this button.
In our case we’ll set this to go to the
about page by adding /about
Here, we have two options, we can save our
changes, and commit the changes for the page,
then set a global default button style via
the theme customizer (which is what we would
recommend), or under the design tab, you could
set the specific button style you want to
use here.
Let’s save our changes to date.
Then save the page as a draft.
Exit the visual builder, and return to the
back end.
Now, let’s hover over Divi in the admin
menu, and open the theme customizer in a new
tab.
Within the theme customizer, click on buttons
Firstly we’ll set the default button style
by clicking on ‘buttons style’
We’ll set the ‘text size’ to 14px
‘Text color’ to black
We’ll leave the background color as transparent.
You’ll see that the homepage is currently
different as this is being overwritten at
the module level.
The border width will be 2 pixels
Set the border color to ‘black’
Border radius to 2 pixels
We’ll leave the font as the default which
will be ‘Raleway’ as set before
Then select ‘No’ for ‘Add button icon’
We’ll head back and set our Buttons Hover
style
Set the text color to white
And the background and border color to our
brand color with no transparency.
Lastly, we'll set the border radius to 2 pixels,
and publish changes.
If we head back to our test page
And launch the visual builder
Our button style is now updated, and that
looks good.
Now, whenever we want to add a button, we
won’t need to amend the button design settings.
Even better than that, if we want to change
the style of our buttons, we’ll only need
to do it in one place - via the theme customizer.
Ok, our test page is starting to look pretty
good, however we want to include a brand accent
above the text module we just inserted.
To show you what we mean let’s jump ahead
to the finished layout.
What we’re referring to is this accent divider
line here.
To create this, with the visual builder enabled,
hover over the text module and click on the
plus icon here to add a new module.
Scroll down, and add a divider module.
Under visibility, we’ll select ‘yes’
to ‘show divider’
In the design tab, we’ll set the color to
our brand color
Under ‘sizing’, set a divider width of
2 pixels
And select a width of 80 pixels
We’ll set the module alignment to left
And then hit ‘save’
Hover over the divider, then click and drag
it to the top of the column to sit above our
text module.
That’s looking good.
Remember to save the changes to your page
as you go through.
The next thing we’ll do is insert a video
on the right.
For this you can paste a YouTube url, vimeo
URL, upload a video, or use a code module
to add the embed code from a provider like
Wistia.
For this example, we’ll paste the link to
another one of our free tutorials that uses
the Ultra Theme by Themify which is another
great theme.
The link to which is in the description below,
and if you subscribe to the OHKLYN newsletter
you’ll be sent a discount for that theme.
So to insert our video, we’ll click on the
plus icon to add a module to the column on
the right.
From there, we’ll select the video module.
Then paste in the url to our video.
And save the module.
That’s how easy it is to add a video to
your site.
Just as easily you could add an image if you
don’t have a video to use.
That looks good, but we want to add a bit
more space to the top of our video which is
referred to as padding.
To do this we’ll click on the module settings
for the video.
Under the design tab, we’ll choose spacing.
And set 5% of padding to the top of the module.
Then select save.
That looks really good.
The last thing we’ll do is show you how
to add more or less padding between rows.
Firstly, if you hover over the row so the
green outline appears.
When you hover towards the top of the row
outline, you’ll see a shaded green area
appears.
This is the default padding on the row.
You can easily click and drag this up or down
to create more or less padding for the row.
Although this is one approach to adding padding,
this adds padding in Pixels.
We prefer to use percentages as this works
better for responsive design.
In this example let’s add 5% of padding
to the top and bottom of the row.
To do this, click on the row settings option
Navigate to the design tab.
Then scroll down to the spacing section
In there, clear the current padding, and add
5% of padding to both the top and the bottom.
Then, hit save.
Ok great - let’s move on to the next section.
For the next section, we’re going to set
a background image with a darker overlay,
and within there, feature a four column row
with number counters and titles for specific
things related to our site.
To do this we’ll click the blue circle with
the plus icon and select a regular section.
Then, set our row columns to four even columns.
The module we’ll use is the number counter.
Within there we’ll set the first title to
‘INDUSTRY PARTNERS’ in all caps.
Set the number to 125, obviously you could
set this to whatever for your specific use
case.
Under elements, we’ll turn off the percentage
sign.
Under the design tab, we’ll set our text
color to light as we’ll set a background
image with dark overlay to the section next.
As the text is light, or white, we won’t
be able to see it now, but we’ll add our
background image in a moment.
We’ll set our text orientation to center
Because we’ve set our default fonts via
the customizer we can leave all the text settings
as is.
The only thing we’ll change is set the number
text color to white.
And then hit save
To add our background image and overlay, we’ll
hover over our blue section, and click on
the section settings cog.
Under background, we’ll click on the image
tab
Then click the plus icon to add our image
We’ll drag this image here into the media
library
Add an alt text
Then choose upload an image.
This image is from a free image resource called
pexels.
On the OHKLYN post here, there’s a link
to our article on free stock image resources
you can use for your website, we’ll also
include a direct link to this image.
To set our image overlay and darken the background
so our text pops over the image, we’ll go
to the background color tab
Then click to add our color
We’ll choose a background color of black
with an opacity of around 60 percent.
We’ll go back to the background image tab,
and set the ‘Background image blend’ to
overlay.
Then save changes.
Now what we’ll do is duplicate the number
counter by clicking on the ‘duplicate module’
option
Then drag it to the next column
We’ll do this twice more
To update the number counter in the second
column we’ll click the module settings option
Then set the title to ‘MILLION IN TURNOVER
(USD)’
And the number to 70
For the Third column we’ll set the title
to ‘TEAM WORLDWIDE’
And the number to 250
And for the final column we’ll add a title
of ‘LOCATIONS’
Then set the number to 22.
Remembering to save changes.
If you want to replicate the angled design
as per the hero design for this tutorial.
You’ll create a row by clicking on the plus
icon in the green circle.
Setting the row to a single column.
Then add an image module.
Click upload image.
Then select the Shape 1 inverse image.
Hit save.
Then click and drag the row with the shape
above the row with the counters.
Click on the row settings.
Under the design tab, open the sizing options,
and either make the row fullwidth, or choose
to use a custom width.
Set the width to 100%, and save changes.
Lastly, remove any padding at the top of the
row.
Then remove any padding at the top of the
section.
We’ll then do the same thing for the bottom.
By creating a new row
Selecting the image module and setting the
image - this time the regular shape 1 from
the hero section
Setting the row width to 100%
And removing any padding at the bottom
Ok, that’s how you create a section like
that.
The last section we’ll create is a very
practical layout, which is an intro section
of text, with a three column row below that
which features an icon, title and text.
To create the section, we’ll click on the
plus icon here to add a new section and choose
a regular section.
We’ll start by choosing a single column
row.
Add a text module to this row.
Once again we’ll copy and paste some text
into the text tab.
Then change to the visual tab and make our
title here a Heading 2 or H2.
Under the design tab, we’ll scroll down
to the bottom of the text settings, and set
the text orientation to center.
And save changes.
To enhance the design, we’ll set this row
to a custom width of 60 percent, by clicking
on the row settings.
Navigating to the design tab.
Then, under sizing, we’ll make the row a
custom width and set it to 60 percent.
And save changes.
The last thing we’ll do is add a new row
underneath by clicking on the icon here.
We’ll set this row to a three column row.
Then select to use a Blurb module.
These are great for showcasing features, services
or highlighting things that differentiate
your offering.
We’ll set the first title to ‘Better Technology’.
Paste some text via the text editor tab.
Under the link option you could link the title
to a specific page if you want to do that.
We’ll go to the icon option and select ‘yes’
to use icon
We’ll choose the cloud icon.
To amend the color you could change your theme
accent color via the theme customizer, under
‘general’ and ‘layout settings’ - which
we set earlier.
We’ll then head to the design tab.
Under image & icon, you could also set your
icon color, add a circle background to your
icon, and change the placement.
We’ll leave these as is.
We will change the size of the icon though
by selecting ‘yes’ for ‘use font icon
size’.
We’ll set this to 46px.
Once again you could amend this for various
devices also.
Under the ‘text’ option, we’ll change
the text orientation to center.
Then save changes.
We can then duplicate this module.
And drag it to the next column.
We’ll update the title to ‘Results Oriented’
Change the icon to the chart.
Save our changes.
We’ll duplicate this once more and drag
it across.
Update the title to ‘Award Winner’
Select a new icon
Then save changes.
And that’s how you re-create the design
we used for the hero image of this tutorial
using either the frontend or back end editor.
In the comments below, let us know which editor
you prefer so we can focus our tutorials on
using that builder.
Remember to save your changes, and when you’re
ready to publish your page, all you need to
do is click on the purple circle at the bottom
of the page, and choose ‘Publish’.
The process is very similar if you’re using
the backend builder.
When you’ve created your website and have
it looking the way you want, there are a few
best practices that you should follow.
If you want your website to be searchable
via search engines like Google, you’ll want
to make sure that your WordPress settings
aren’t blocking search engines from indexing
your website.
To check this:
Go to your WordPress dashboard.
Hover over settings in the admin panel and
select ‘reading’.
Scroll down to the bottom to the ‘Search
Engine Visibility’ section.
Ensure the box is unchecked so that Google
can crawl and index your website.
Keep this box checked while you’re still
working on your site, but uncheck it once
you’re ready to go live.
Once you’ve done that, we would 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’ll add a link in the description below,
or you can find it via the videos tab on our
YouTube channel.
We would also recommend installing Google
Analytics on your website.
Fortunately, we’ve created a free step-by-step
video on how to do this as well.
Using the Divi theme, you can add the required
tracking code within the Divi Theme Options
tab, under integrations.
We cover how to do this in the video.
And that’s it for our ‘How to Make Your
Own Website 2018 & 2019’ tutorial.
We hope you found this step-by-step WordPress
tutorial helpful and are well on your way
to launching your new WordPress website.
If you’ve followed the steps in this tutorial,
you’ll have full access to support through
Bluehost and Elegant themes, so if you get
stuck with anything, be sure to leverage that
resource and view the support videos and documentation.
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.
Please leave a comment below and tell us what
you liked or if there was anything you found
difficult, so we can put together additional
videos to help support you as you learn how
to make your own website.
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 o-h-k l-y-n.com, and until next
time, happy building!
