How to Make Your Own Website 2019 | Divi WordPress Tutorial [UPDATED]


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!

6 Comments

Add a Comment

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