How to Make a Business Website (2019) | WordPress Tutorial for Beginners


In this video, we’ll show you how to make
a business website for 2018 and 2019. The right website will generate new leads,
enhance your credibility, and become an asset that you own, and can leverage to showcase
your business in the best light. For this business website tutorial, we’ll
use WordPress and show you how to create a website that would typically cost two to three
thousand dollars for less than a few hundred dollars. A well designed website will stay current
for at least two years, and for this step-by-step tutorial, we’ll use a premium WordPress
theme to build a fully responsive website that looks great on all devices without needing
to have any coding or design experience. However, if you do have some experience, you’ll
be able to use those skills to create the exact website that you want. The website that we’ll be creating together
is SEO friendly, features an optimized UX design, and includes an intuitive, beginner
friendly, drag and drop page builder. The theme we’ll use comes with a one click
demo content feature, allowing you to make this exact website here with just a few clicks. You could also just as easily create niche
specific websites such as: An agency style website
Health or fitness website Restaurant, cafe, or bar website
Or, a portfolio, solo entrepreneur style website In addition to that, the theme comes with
over 65 predesigned layouts including: Corporate layouts
Creative layouts And, product layouts that you can leverage
on your website with a couple of clicks. There’s a link to the live demo in the description
below, or you can enter ohklyn o-h-k-l-y-n.com/go/ultra-demo into your browser. By following the steps in this business website
tutorial, you’ll get access to more than 15 different header and menu styles to help
get the look you want. These include:
The standard layout with the navigation at the top (in a number of variations)
Header and navigation on the left or right Header with a slide out navigation menu
Header with a navigation menu overlay Or, a minimal header and navigation option,
just to name a few. In addition to amending the global look and
feel, customizing the pages and posts of your website is incredibly easy to do using the
drag and drop page builder. So, regardless of what type of business website
you want to create, we’ll provide you with the tools you’ll need to do it. In this step-by-step WordPress tutorial for
beginners, we’ll show you: What to prepare, and the things you need to
consider before creating your business website. This step often gets missed, however, by planning
ahead, we’ll save 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 who are new to WordPress). We’ll then upload and install your WordPress
theme. Install any required plugins. As well as explain what plugins are and how
you can use them. Lastly, we’ll go through the steps of customizing
your business website where we’ll cover, creating and managing pages, posts, menus,
widgets, as well as how to adjust the global design settings for your website. As part of this tutorial, you’ll get access
to over 10 hours worth of free video content that covers how to customize every inch of
your website, so, regardless of how intricate your website design is, you’ll have the
tools to create it. So, if you’re ready, then let’s get to
it. We’ve created a post that accompanies this
video. You can find this on the OHKLYN website (via
the link in the description below). In that post, you’ll find the written instructions,
as well as any links mentioned in this video. We would recommend opening the post in a new
tab, and following along. For this tutorial, we’ll use the Ultra theme
by Themify (there’s a link in the description below). As part of the OHKLYN community, you’ll
get access to a discount code that gives you 30% off the Ultra theme – Subscribe to the
OHKLYN newsletter and you will be sent a welcome email with the discount code included. 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, 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, thanks 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. So, before we get started on your business
website, let’s go through what you need to prepare. The biggest mistake beginners make, is failing
to plan out what they want their website to look like before getting started. Taking a couple of moments upfront to put
together a game plan for creating your website will save you a lot of time, and create a
much better result. Firstly, 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:
The most common pages on a business website include a:
Homepage About page
Contact page Services page
Gallery or client work page Blog (including the individual post pages,
and category pages) And, a privacy or terms of use page
Whichever pages you want to include, be sure to draw them out. Next, for each page, create a rough guide
for what will be on the page in terms of text, images, videos, and other elements, such as
counters, bars, testimonial sliders, etc. Will there be a sidebar? If so, on what side, and what will be included
within the sidebar? For example, on the homepage:
We might have a hero image at the top with a heading and a call-to-action, or CTA button. Next, we might have an intro paragraph of
text on the left and a video on the right. Below that, we’ll have a headline differentiating
our business. Then, we might have a row with three columns
that feature an icon, title and blurb with ‘learn more’ buttons in each column. 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 both 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. As an example, on the OHKLYN post for this
tutorial, you’ll see that we have the Bluehost link in a button, as clicking on this button
is an action we want want users to take. OHKLYN is an affiliate partner of Bluehost,
and if a user clicks on this button, Bluehost knows that we referred them. In addition to the user accessing discount
hosting and a free domain, Bluehost will set aside a few dollars from their marketing budget
to fund future free tutorials like this one. So if you haven’t already we appreciate
you using the links provided. Now, if this page was a landing page and not
a post, AND if this was the number one action we wanted users to take, we would also include
this button above the fold. So, consider the actions you want users to
take on your site as part of your planning. For your business, it might be for the user
to submit a contact form, download a pdf document in exchange for their email, subscribe to
your newsletter, or pick up the phone and call you. Whichever it is, make sure it’s clear. You also need to consider how users will consume
your content. Typically, content will be consumed from top
to bottom and from left to right. If your target market consumes content differently,
make sure you’ve considered this. Does the flow of information you’re presenting
make sense? Does it logically take them through a process,
or tell a story? Because, it should. [Introduction to brand design and content
planning] 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 blog, 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 higher 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. Lastly, is setting a budget for your website. Being a business owner, budgeting isn’t
a new concept. As we said earlier we’ll show you how to
create a website that would typically cost two to three thousand dollars if you were
paying a web designer or agency. You’ll be able to do this with a small budget
of around $150 – $300, depending on the options you choose. This will include things like:
Your website hosting: at about $3 – $20 per month depending on your hosting term
A Premium WordPress theme: which is typically around $50 – $100
Premium images, if you want to use them Or, a graphic designer, if you want to create
some custom graphics Pause the video if you need some time to put
that together, or if you’ve already got that ready, we can move on to creating your
business website with WordPress. 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
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 a:
.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. For this example, we’ll go with the middle
option. 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 the 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 login 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 changes, they’re often more secure, they 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, JetPack, Mojo Marketplace, OptinMonster, and WPForms. 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
a lot closer than you realize. 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, improves your search rankings as Google prefers secure sites, and allows
you to take payments on your website as well, 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 along 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. We do a lot of WordPress website and blog
development for clients, webinars, and live workshops and prefer to work in a staging
or development environment before pushing a site live. However, it isn’t always necessary, and
for the purpose of this video, you can build your website on your live site. We would however 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 as 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 down 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, and adjusts the available options depending on which page you’re on, and if
you’re viewing the page from the front or the 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 we manage plugins, users,
control 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),
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 the top rated
business website theme – Ultra by Themify. For 30% OFF, subscribe to the OHKLYN blog
and you’ll be sent a welcome email with an exclusive discount code. The link to the theme is 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 just the Ultra theme (with or without the photoshop files),
Or under pricing, you can select one of their club memberships, which gives you access to
all of their themes. Depending on which option you choose, you’ll
get various inclusions for the year, or you can select their lifetime club, which gives
you access to everything for life. We have their lifetime club as we use a number
of their themes, but pick what’s right for you. Enter in your information
If you’ve subscribed to the OHKLYN blog, add the discount code you received in the
welcome email, and select ‘next’. Add your payment information
Then log into your Themify dashboard The next step is to download a copy of the
Ultra theme: From your Themify dashboard, scroll down to
the themes section Click on the Ultra theme link to download
the theme file (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 Ultra 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:
From your WordPress dashboard, hover over appearance in the admin menu on the left,
and select ‘themes’. From here, select ‘Add new’
Then click, ‘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 Ultra WordPress theme. Once the theme is successfully installed,
click ‘activate’, and you’re new theme will now be live on your website. You will then be taken to the Themify settings
page. Once the Ultra theme has been installed, you
can navigate back to this page at any time by hovering over the newly created tab called
‘Themify Ultra’, and selecting ‘Themify settings’. The first thing we need to do is install and
activate any plugins that are required by the WordPress theme we’ve just installed. In this case, we’ll see a notification at
the top of the page. To do this:
Click on ‘begin installing plugin’ Select the required plugins and click ‘install’
That will install the required plugins We’ll click on the option to ‘Return to
Required Plugins Installer’ To activate the plugins we’ve just installed,
select the plugins and select ‘activate’ Once any required plugins are activated, we
can either return to the dashboard, or navigate back to the Themify settings by hovering over
‘Themify Ultra’ in the admin menu, and selecting ‘Themify settings’
You’ll notice that there are a number of tabs within the Themify settings panel. These include ‘settings’, ‘skins & demos’,
‘transfer’, and ‘update’. We’ll go through the settings tab in detail
shortly as this is the main tab for controlling the global theme settings for your website. The ‘update’ tab is used to manage the
version of the Ultra theme installed on your website. The ‘transfer’ tab allows you to import
and export data for the Themify settings panel. The tab we’ll look at first is ‘skins
& demos’. This tab allows us to leverage demo content
to create a well designed and functioning website in minutes, with just a few clicks. Here, you have the option to import all the
demo content, theme settings, widgets and menus to replicate exactly what you see on
the Themify demo sites that can be viewed by:
Clicking on the ‘view demo’ button from within the ‘skins and demos’ tab below
each example, Or by following the link in the description
below, or on the OHKLYN post here to the Ultra page,
And then scrolling down to the demos section and following the link to the specific demo
site. As part of this theme, you also get access
to over 65 professionally designed page layouts that you can use to create your website from
scratch if you choose not to use one of the pre-built layouts, or if you’ve got existing
content on your website. We’ll cover off how you can use these shortly. To select one of the skins:
You just need to click on the skin you’d like to use and select ‘save’
If we view the site from the front end, you’ll see that that skin has been applied. If we select another demo skin and hit ‘save’
Then refresh the page from the front end, you’ll see that it changes the look of your
website. Once you’ve clicked on the skin you want
to use, for this example we’ll use the ‘accountant’ skin, you’ll notice that you get the option
to import the demo content. If you’ve already got content on your website,
you won’t want to import the demo content. However, if you’re starting from scratch
and you want to use one of the demos as a starting point for your website:
Then you’ll select ‘import’ to import the demo content into your website. Depending on which demo you want to import,
you will be prompted to download additional Themify builder plugins, which you will have
access to as part of your Themify membership. Before you do that, decide if it’s a feature
you want to include on your site. For example, the ‘Accountant’ demo includes
the builder maps pro plugin, which you may want to use. However, if you don’t want to include a
map on your website, then you won’t need to install that plugin. To install the required plugins:
From the Themify members area, scroll down to the ‘Builder Add-Ons’ section
To download each plugin required for the demo you want to use, simply click on the specific
plugin link to start the download Repeat this for every required plugin you
want to use. To upload and install the required plugins:
From your WordPress dashboard, hover over ‘plugins’ in the admin menu, and select
‘add new’ At the top of the page, select ‘upload plugin’
Click ‘choose file’ Navigate to the .zip file for the first plugin
you want to upload, select the plugin .zip file, and hit ‘open’
Then click ‘install now’ Once the plugin has been installed successfully,
select ‘activate plugin’ Select ‘add new’ and repeat the process
for the remaining plugins. Pause the video to finish the steps. Great, let’s move along to the next step. Once you’ve installed the required plugins,
navigate to the Themify settings panel by hovering over ‘Themify Ultra’ and selecting
‘Themify settings’. Head back into the ‘Skins & Demos’ tab
or refresh the page, and we can now select the demo we want to use. In this case, we’ll go with the ‘Accountant’
skin, and click on the ‘import’ option to bring in the demo content for your website. Once that’s done, the page will refresh
and we can go to the front end of your website. The skin and demo content is now imported
and ready for us to customize. This is a great way to get your website up
and running within a few minutes, with a number of layouts pre-created, making it easy for
you to build out the rest of your website. We’ll customize a few elements of this design
to match the look we created for the hero image of this tutorial, however, if you like
the default design, stick with that. You’ll notice that this demo leverages a
Google map, and at the moment it’s showing an error. This is because we need to add a Google maps
API key. That sounds complicated but it’s actually
really simple. If you don’t want to include a Google Map
on your website, you can ignore this and just delete that section. However, if you want to include a map:
From the Themify settings, click on the ‘Themify settings’ panel
Scroll down and click on the ‘Google Map’ option
On this tab, there’s a field to add your Google API key, and below that, there is a
link that shows you how to generate your API key. Follow this link and go through the steps
to generate your API key. Once you’ve created your API key, copy and
paste it into this field and hit ‘save’. Your map will now be working. We’ll go through how to customize modules
later which will allow you to set the address, etc. As well as provide a more detailed overview
of the Themify settings options. But for now, let’s head back to the demo
content. If you decide you don’t need the imported
posts and pages, in the ‘Skins & Demos’ tab, you can select ‘erase’, and that
will remove the content, but leave the Themify panel settings and widgets, etc. in play. Ok – let’s move on to customizing your website. So far, we’ve gone through setting up your
business website with WordPress, uploading the theme and required plugins, and explored
leveraging the demo content to get up and running quickly. In this section we’ll look at how to create
pages and posts, as well as how to create and manage menus. 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, page and post layouts
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
10 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 firstly, let’s take a look at how to
create additional pages, as you will no doubt want to include pages that aren’t included
in the demo site. Or, if you’re not using the demo content,
you’ll want to know how to create the pages you want, as well as how to either leverage
the pre-designed layouts, or build out your design using the drag and drop page builder. For this example, we’ll create a new page,
and set this as the homepage for our website so that you’re aware of how the homepage
is set for your website. 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 ‘Home
Alt’. 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. On the right-hand side, 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 of
‘no parent’. If we scroll down, at the bottom you’ll
see the ‘Themify custom panel’. We’ll go through setting the default global
page settings shortly, but you’re always able to overwrite these for individual pages
here. We’re going to load in one of the predesigned
layouts, which is a full width layout with no sidebar, so in the page options tab, we’ll
set the ‘sidebar option’ to ‘no sidebar’. And, we’ll set the content width to full
width. We’ll also select ‘yes’ for the hide
page title option. This will create a clean slate for us to bring
in the pre-designed layout, To add one of the predesigned layouts, scroll
back up to the top and click on the ‘Themify builder’ button to launch the front end
builder If it hasn’t already launched, click ‘turn
on builder’ in the toolbar at the top In the Themify builder menu at the top, hover
over the layouts icon and select ‘load layout’ You can either search for a specific layout,
view the layouts by category, or scroll through the available options. You can preview layouts by clicking on the
search or view icon. In this case, we’ll select the ‘Innovative
Corporate’ layout by clicking on the layout. You’ll be asked if you want to replace or
append the layout, we’ll select ‘replace’. And the layout is now loaded into the page. We’ll go through a practical example of
using the page builder shortly. For now, we’ll save the page, and go to
the back end by clicking on ‘edit in back end’. This takes us to the backend version of the
Themify builder for the page that we’re editing. The back end editor is located in the Themify
builder tab of the ‘Themify custom panel’ which we’ll explore further in the next
section. To set this page (or any 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’ options,
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 ‘Home
Alt’. Then select ‘save’. If we go to the homepage of our website, we’ll
see that the ‘Home Alt’ page we just created is now our homepage. We’ll go back into reading options and change
this back to the ‘Home Accountant’ page. Go through and create the rest of the pages
that you want to include on your website by following the same process. Paint in broad strokes for now, as we’ll
go through how to use the Themify builder to customize the pages of your website shortly. We’ll focus on getting your website structure,
and the critical elements right first, such as pages, menus, your logo and branding, as
well as the global layout settings. If you want to leverage a blog as part of
your business 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 names. And selecting ‘add new category’. Repeat this process for all the categories
you want to include in your blog Once you’ve created your categories, 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
And either uploading an image or selecting one from the media library
Then, preview or publish your post. The default blog page will feature your recent
posts, unless you create a custom blog page and set it as your blog page via the reading
settings tab, like we just did for the homepage. For more details on anything we covered (or
didn’t get a chance to cover) in this tutorial, follow the links to the Ultra or Themify Builder
documentation pages. Here, you can access over 10 hours of detailed
content, covering every element of this theme. 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 go and 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, 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 also 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, which is slightly more advanced than we’ll
cover today. However, if you’re interested in learning
some HTML and CSS fundamentals for WordPress, register for one of our courses at courses.ohklyn
o-h-k-l-y-n.com. Back to the menu options:
On the right, you have your menu structure. If you uploaded the demo content, a main menu
and a footer menu would’ve been created for you. If not, we’ll need to create a new menu
by clicking 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 as
either the main navigation menu located here Or the footer navigation menu, located in
the footer 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 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 the menu item across
to sit underneath the item above For example, we’ll add the blog page to
our menu Then 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, one great
feature of the Ultra theme is the ability to include mega menus which are great from
a UX perspective as they allow us to show large amounts of information in an efficient
way. To show you what we mean:
If we click on the blog menu item Under the mega menu option, we’ll select
‘mega posts’ from the dropdown And then hit ‘save’
If we 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 with the
blog categories on the left, and when we hover over them, it shows the posts for each category,
which the user can engage with directly. This is a very cool feature and is something
you can incorporate in a number of ways on your website. You can also add custom links to your website’s
menu. To do this:
Click on the custom menu link option on the left
Add the URL for where you want the menu item to link to
And the link text that you want featured in the menu
Then click ‘Add to menu’ and drag it to where you want it to be positioned in the
menu. If you want the custom link as an organizational
tool and not a link, you can set the link url to a hashtag, and if the user clicks it,
it will only reload the page they’re on. There are a few instances when you may want
to do this, so – now you know how. To amend the footer menu, you’ll approach
it in the same way: By either selecting the footer menu that was
created with the demo content And amending the menu items,
Or, creating a new footer menu following the steps we just went through. Remember to refer to the documentation for
further information regarding the menu options available with the Ultra 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. To access the Themify settings, from your
WordPress dashboard: Hover over ‘Themify Ultra’, and select
‘Themify settings’ We’ll go through the ‘settings’ tab,
and cover off the fundamentals you need to know. The great thing about the Ultra theme is that
there are so many options. In fact we’d need more than 10 hours to
cover every option, so what we’ll do instead is cover the things that will be important
to everyone, such as setting your favicon, amending your website’s header and menu
layout, and setting the default layout for pages, posts, and other global elements. In the description below, and on the OHKLYN
post, there will be a link to the Themify Builder documentation and detailed video tutorials,
which we would recommend opening up in a new tab in case you want further clarification
on anything. Before we jump into the Themify settings,
it’s probably best if we explain a few things first, to ensure we’re all saying the same
thing. As far as published content goes, the basic
architecture of WordPress includes static pages, individual posts, portfolio posts,
and archive pages. Static pages are the pages of your website
where the content is relatively static. For example your homepage, about, contact
page, etc. Individual posts are the blog posts you create
that are relevant to your business, industry, or niche. Individual posts are grouped by categories
which serve as an organization tool, and provide additional context and meaning to users. Tags can also be added to individual posts. Individual portfolio posts are most commonly
used to showcase examples of work, or case studies, etc. These function in a similar way to individual
posts, where they are associated to a category. Archive pages are typically the category pages
and showcases 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 had an accounting business
and included a blog on your website, you may have a category called ‘Advisory’ with
a number of individual posts related to relevant issues and strategies that your firm advises
on. If you were to click on the ‘Advisory’
category link on your website, you would be taken to the ‘Advisory’ category archive
page, which would display all the posts related to the category of ‘Advisory’. This page is what’s referred to as an archive
page. Ok, so hopefully we’re all on the same page,
and we can now run through the Themify settings. Within ‘settings’, the first tab we have
is ‘general’. Here we’ll upload our favicon. 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:
Click on ‘upload’ Select your favicon and hit ‘open’
Then click ‘save’ in the top right. There are a number of options below which
we won’t cover, however, we’ll draw your attention to the header code section which
allows you to copy code snippets that will be added to the head tag for the pages and
posts of your website. This is great for adding Google Analytics
tracking code, or your Facebook pixel, etc. If you need to add any code to the head tag
of your website, this is where you do it, without needing an additional plugin. As we mentioned, we’re only going to cover
the things that are most likely important to everyone. Review the rest of the settings in each tab
on your own to see what’s relevant to you, and check out the documentation if you need
further explanations. The next tab is the default layouts. This is where we set the default layouts for
pages, individual posts, and archive pages as we discussed before. We’ll walk you through our preferred settings
and provide some rationale, however, you choose whatever is best for you. The first option is the Archive Sidebar Option. A number of the layout options will include
the placement of the sidebar on your website. The sidebar in WordPress is referred to as
a widget enabled area, and allows you to set a global sidebar that appears on all pages,
posts, and archive pages – where a sidebar is enabled. Themify Ultra has two sidebar widget enabled
areas that you can leverage – these are the standard sidebar and a narrow sidebar which
you can include in your design. If you’re new to WordPress, review 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, 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. You’ll see the two sidebar areas, social
widget area that sits in the header, footer social widget area, that sits in the global
footer, and the two custom header widgets, that are used in the original demo to display
the phone number and social icons above the navigation. If you imported the demo content, there will
already be widgets added to the various sidebars and other widget areas. If we go to the news (or blog) page of our
site and click into one of the articles: On the right-hand side, this is the sidebar
widget area. If we go back to the widget panel, you’ll
see that the widgets that have been added to this area align with what’s being displayed
in our sidebar. 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’ One thing worth mentioning with this demo
is that it’s using the header widget 1 area to display the phone number as part of the
navigation. This is a great feature if the primary objective
of your website is for potential clients to call you directly. So, we’ll quickly show you how to update
the phone number. If you don’t want people to call your business,
we’ll show you how to exclude this in the next section. Let’s click into the header widget 1 area
Within there, you’ll see that it’s using a text widget. You could also use a custom HTML widget for
this feature. You’ll see that there’s an opening span
tag, and a closing span tab Within the opening span tag, it’s using
a Font Awesome CSS class to bring in the phone icon
After the closing span tag, there’s an opening anchor tag (links are called anchors in HTML)
Then there’s the anchor or link text, which in this case, is the phone number you want
displayed And then there’s the closing anchor tag
Within the opening anchor tag, between the two inverted commas or quotation marks there
is tel colon then the number. Here is where you’ll update the phone number
that will be called if the user clicks on a phone enabled device. You can use visual separators, however, you
can’t use spaces within this number. To change the number displayed, you’ll amend
the anchor text here. You can use spaces, or even change this to
a word such as ‘call us’ or whatever you like here. Ok, so that’s a crash course on widgets,
there are theme specific widgets down the bottom like the Themify social icons widget
that you can add to the header or footer to link to your social accounts, etc. In the Themify settings, we’ll show you
how to add your social media links so you can use this widget to easily include them
on your website. Let’s head back to the Themify settings. For the Archive Sidebar Option, we’ll select
the option with the sidebar on the right, as this is the most common option. If we go back to an individual post, and click
on the category that the post is associated to, it will take us through to the archive
page This is the layout option that we’re talking
about in this section. Back to the settings, post layouts allow us
to choose how we want individual posts to be displayed on archive pages. Pick whichever option you like the most. Review the display options that sit below
that, such as the ‘display content’ option, we would recommend showing just the post excerpt
rather than all the post content. Also, decide if you want to display all the
post meta data, such as the author, date, category, etc. The next group of layout options relate to
single posts, which if we go to the blog page and select a specific post again
This is the layout this section is referring to. Once again we’ll leave the default layout,
but pick whichever is best for you. Once again, go through the options below,
and trial a few to see what works best. Towards the bottom, we have the default page
layout: We’ll set the Page Sidebar Option to no
sidebar We’ll hide the page title on all pages
And disable comments on all pages, as we want to work with a clean slate on all pages, and
don’t want people commenting on any of our pages. Comments on blog posts are fine, but we don’t
want people commenting on our homepage for example. Once you’ve made changes, select ‘save’
to commit changes. The next tab is the portfolio layouts. If you want to include portfolio posts on
your website, then follow the process we just went through and assign your prefered layouts
for both portfolio archive pages and the single portfolio posts. Most businesses will use portfolio posts to
showcase client work or case studies, however, you could also use pages to do this. Next, we have the Theme settings tab. By default, The Ultra theme is fully responsive,
however, here you can disable the theme’s responsiveness (which we wouldn’t recommend). Here you can also amend the responsive breakpoints
which basically refer to the defined screen widths that represent, desktop, tablet, and
mobile screens. Once again, it’s probably best to leave
the defaults unless you have a specific reason to change them. The section we will explore together is the
theme appearance section. Here, you can set the generic theme accent
color and typography. You have more control over these settings
in the theme customizer panel, which we’ll cover off next, so we’ll leave this as is
for now. However, below that are the various header
options you have available, which dramatically impacts the look and feel of your website. For example:
If we change the header style from the ‘Header top widget’ option to the ‘header min
bar’ option Then save the changes
If we refresh the front end of our website You’ll see that the look of the whole site
has now changed Let’s go back
We’ll change the header to the ‘horizontal header’ option, and check the ‘Exclude
Header Widgets’ option below to match the design from the hero image for this tutorial. If you want the phone number for your business
visible, then do not check this option Have a play around with the various options
to see which one you like best Depending on which header you go with, the
options below that will vary. Many of the options will include the ability
to disable the sticky navigation, exclude the site logo or tagline, as well as the option
to exclude the search functionality or social icons. Explore toggling the various options on and
off to create a unique look Under theme appearances, you’re also able
to pick your footer design from the options available. Based on the design you choose, you’ll be
presented with additional options: The widget component will be managed via the
widgets tab we just explored The text components are managed by scrolling
to the bottom of the theme settings page we’re now on, and adding your text to the fields
In this example, included is the html for a copyright symbol
Some text on either side of an anchor or link, that should look relatively familiar
The only thing that’s different is the target html attribute which opens the link in a new
tab when the link in clicked. (If it interests you, check out our html and
CSS fundamentals for WordPress course at courses.ohklyn.com if you’d like to learn the fundamentals
of HTML and CSS). The footer styling will be controlled via
the theme customizer panel, which we’ll show you how to access in the next section. The last tab we’ll go through together is
the social links tab. We’ve covered how the social widgets can
be added to the header or footer of your website via the widgets tab, and you know how to exclude
social icons via the theme appearances section in the theme settings tab above. In this tab, you’ll manage the social platforms
you want to include on your website, how they’re displayed, and add the links to your accounts. To add a new social platform, say ‘Dribble’:
Scroll down to the bottom, and select ‘Add link’
Give it a title, in this case ‘Dribble’ Add your ‘Dribble’ link in the link field
To insert an icon, click on ‘add icon’ Search for the icon you want to use, in this
case ‘Dribble’ Then select the icon you want
You can drag the box to rearrange the order Then hit ‘save’
If we refresh the page from the front, and scroll down to the footer (as we’ve excluded
both the header widget and social icons widget option’ via our header section)
The ‘Dribble’ logo is now present, and if we were to click the link, it would take
us through to the link address we added To amend the details of an existing social
link: Just update the details you want to change,
for example, the link details Then select ‘save’ to commit the changes. To delete a social link:
Simply click the ‘x’ icon, Save your changes,
And the social link is removed. Ok, so those are probably the most important
aspects of the Themify Builder. However, please go through the rest of the
options and refer to the documentation for further details. It’s worth noting that within individual
pages and posts, you have the ability to override the Themify settings for a specific page,
which is a really powerful feature allowing you even more control over the design of your
website. For example, if we navigate to the example
‘Home Alt’ page we created before: By hovering over pages in the admin menu and
selecting all pages We’ll then click on the ‘Home Alt’ page. Once we’re there, if we scroll down to the
‘Themify Custom Panel’ at the bottom of the page
In the page options tab, and the page appearance tab, we can alter these settings for this
individual page, which is a pretty cool feature. Alright, let’s move on and take a look at
the Theme Customizer. The theme customizer is where you have full
access over all the global styling options for your website. To access the theme customizer:
From your WordPress dashboard, hover over ‘appearance’, and select ‘customize’
You could also hover over ‘Themify Ultra’ and select ‘customize’
Either way, it will take you through to the theme customizer
You’ll notice that the Theme customize panel has two tabs, ‘basic’ and ‘advanced’
Most of what we need will be in the basic tab, however as the name suggests, we can
access more advanced options in the advanced tab if required. Now, we’re not going to go through all of
the options, as we’d be here for a while. However, what we will do, is go through the
most important ones like adding your logo, setting your brand accent colors, and updating
the global fonts, etc. So that you have a solid understanding of
how to use the theme customizer. For this section we’ll refer you to the
theme customization and styling documentation, the link to which will be in the description
below, and on the OHKLYN post. This guide takes you through every option
in the customizer to make sure you have all the information you need. Let’s take a look at how we can add a logo
to your new website: From within the Customizer, scroll down and
click on the site logo and tagline option Here, we can amend the logo and the tagline
for your website We’ll click on the site logo dropdown
Here we can choose between using the site title as our logo, uploading a logo image,
or setting no logo, we’ll choose the logo image option. To add your logo, we’ll click on the plus
icon We can either upload a logo image, or choose
an image from the media library. We’ll drag our logo to add it to the media
library Set an Alt text (which is good practice for
all images) And click ‘insert image’. This will add your logo to the header of your
website. It’s good practice to set a width or height
parameter to ensure your logo doesn’t pixelate or look odd. In this case we’ll set a width parameter
of 200 pixels, by adding 200px to the first box. If you want the logo to take the user to some
place else other than the homepage when clicked, you can add a custom site logo link at the
bottom. To commit changes, remember to hit ‘publish’
at the top of the customize panel. And if we view the site from the front end,
your logo is now added to your site. Let’s go back to the theme customizer, and
click on the site tagline option. Here we can choose to include text, an image,
or show no tagline. We’ll choose to show no tagline. However, if you want to include a tagline
on your site, here is where you’ll do it. Once again, publish any changes. We’ll minimize the site logo and tagline
options panel, and we’ll scroll up to the accent styling tab which is where you’ll
add your brand colors if you want to include them as accent colors on your website. To do this:
Click on the accent styling options dropdown Here we can set our accent font, background,
and link color by clicking on the color selector box
You can either select a color, and its opacity Or, enter in the hexadecimal or rgba color
code of your brand color You’ll see the elements this affects in
the preview panel on the right. Remember that these are global changes and
will be applied to your entire site. That being said, you are able to overwrite
these settings via an individual page’s Themify custom panel, or via the Themify builder
itself. You can amend the header background color
and other elements via the header options dropdown by selecting the header wrap option
You can set the background color here Similarly, you can amend the sticky header
options, by following the same process in the sticky header options panel
The sticky header is the navigation header that sticks to the top of the page as the
user scrolls down the page. This can be disabled via the Themify settings
panel as we covered earlier. The best way to get up to speed with all the
available options is to have a play around, and see what works best for your design. Reviewing the documentation and video guide
for this section is also a great way to explore your options further. The last thing we’ll cover in this section,
is how to amend the global typography settings for your website. To amend the body and paragraph font:
Scroll up to the top of the customizer, and click the body options panel
Then choose the body font option Here you can choose from a web safe font,
or a number of Google fonts Set the default paragraph font size, line
height, font weight, letter spacing, as well as a number of stylistic options, and the
font color at the bottom. As an example, we’ll add a strikethrough
to the body font You can see that the changes are previewed
in the right-hand panel We’ll undo that by clicking on the strikethrough
option, and minimize the body options panel We can do the same thing to set our global
heading styles. To do this:
We’ll click on the headings option In the preview panel on the right, we’ll
scroll down to the first section of the page with the title ‘Accounting Services’
If we right click, and inspect this heading, we can see that it’s a heading 2 or a h2
If we want to style all heading 2’s in a certain way, we can click on the heading 2
font option dropdown And let’s set the heading 2 font family
to something obvious like ‘dancing script’, by selecting it from the dropdown
You’ll see in the preview pane that all the heading 2’s or h2s on the page now have
that font To remove that, just clear the field, and
the font will resort back to the default You can also adjust the font weight, line
height, etc to get your design looking just the way you want. We recommend setting your global font styles
here as opposed to doing it on individual pages, primarily because, if you change your
mind later and want to adjust anything, you only have to do it in one place rather than
on every page. It will also ensure your design is consistent
throughout your website. Ok, hopefully you’re feeling relatively
confident to go and customize your website further. The only way to get good at this, is to get
your hands dirty and play around with the various settings to find out what’s right
for you. Once again, review the customizer tutorial
and documentation for more details on any of the settings. Remember to publish any changes you’ve made
before closing the theme customizer panel. Things should now be starting to take shape,
and we can move onto the most important section, which is building out your page layout designs
and populating your website with content. For this, we’ll go through the fundamentals
of the Themify builder, and show you how to access the free tutorial content covering
all the features you’ll need to build out the pages of your business’s website. To ensure you’re comfortable using the Themify
Builder, we’ll go through an example of how to customize one of the pre-built layouts
to suit your website design. We’ll also show you how to create a page
from scratch using the Themify builder modules and pre-built rows. Let’s jump into the ‘Home Accountant’
page we created earlier, so that we can explore the Themify Builder:
We’ll hover over pages in the admin menu, and select ‘all pages’
From here, we’ll select the ‘Home Accountant’ page that was created as part of the demo
content. You can follow along with the ‘Home Alt’
page if you didn’t import the demo content. To launch the front end version of the Themify
Builder, click on the ‘Themify Builder’ button
Then click the ‘turn on builder’ option from the toolbar at the top if it hasn’t
launched already. This will activate the drag and drop page
builder, which is one of Ultra’s best features. In the description below, and on the OHKLYN
post, you’ll find the link to the Themify builder documentation, which includes a detailed
tutorial and guide for the Themify Builder. As everyone’s needs will be different, it
wouldn’t make sense for us to go through all of the options here. Instead, we’ll cover the fundamentals of
how to use the builder, and get you up to speed with the most common features. If you want to dive deeper into anything along
the way, refer back to the theme documentation that we’ve provided the links to. 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 the video and doing that now, as it will make the process much easier. Let’s take a look at our sample ‘Home’
page: Once the Themify Builder is switched on, you’ll
see a toolbar appear at the top with a ‘plus’ icon in the top left and a save button on
the top right. The save button is used to commit any changes
you make to your website, and if you hover over the + icon in the top left, you’ll
see a panel appear that shows all the available modules you can add to your website. By clicking on the rows tab within there,
you can see all the pre-built rows that you can leverage to speed up the process of creating
your website. Here’s a tip, don’t look at the content
of the pre-built rows, as the content can easily be changed. Look at them in terms of their row and column
layout or structure. Refer to the Themify Builder documentation
for a detailed look at the toolbar and the other aspects of the builder that we don’t
cover in this tutorial. Similarly, follow the link on the OHKLYN post
to the builder modules documentation. This walks you through every setting option
for the modules available to you via the builder. Ok, next:
If we hover over the image at the top of the page, you’ll see that a light grey bar appears. This signifies a row. On the left-hand side of the bar we’ve got
the column options for the row. Here we can choose how many columns we want
to include in this row (up to six). On the right-hand side, the first icon is
our row options Within there, we can set our row width to
either the: Default: this sets the width of the row to
the default row width for the theme. This can be amended via the Theme Customizer
panel, under the advanced options (if required) Full width row container: sets the row to
full width so that when you apply a background image or color, it covers the full width of
the browser. The content containers within the row however,
are set to the row default width, which is nice, as you don’t need to worry about adding
padding to columns or modules to push them off the edge of the browser window. Full width content is the last option and
makes the row full width and pushes the columns within the row to full width as well. Below that is the row height options, the
ability to add a CSS class, and the option to add an ID or anchor name to the row
The most common way to use the Row Anchor is when you want to link from one section
of the page to another section of the same page
You’ll notice that in this example, if we double click on the ‘book appointment’
button under the heading, this will open the button settings. Here, you’ll see that the link address is
‘hashtag appointment’ This is linking to the section of the page
with an ID or Anchor name of appointment If we scroll down to the bottom of the page
to the ‘appointment’ section, and click on the row options for this section
You’ll see that this section has a row anchor name of ‘appointment’
If we open up this page in a new tab And click on the ‘book appointment’ button
You’ll see that it takes us down to the appointment section, where the user can then
enter their contact information and message. Ok, hopefully that makes sense and you can
see how you can use that technique. You could also add a custom link to a menu
using the page url with the hashtag and anchor name to link to a specific section of your
page from the menu. This is how the navigation works for one page
websites that include a navigation menu. Alright, back to our row options at the top:
The next option is the styling options, here is where you control the design settings for
the row. In this example, if we click on the background
option This is where the background image is being
set Your options include an image or background
color, gradient, video, or slider To remove the background image, you would
click on the ‘x’ You could then either paste an image or video
url, upload an image or video, or select one from your media library, if you’ve already
uploaded one. Below that, you could set a row overlay color
or gradient, as well as an overlay on hover Below that are the font settings for the row,
which includes the alignment, etc. And further down, you can apply padding or
margin to the row It’s the padding on this row that’s creating
the space above and below the text and button in this section. We won’t go through all of the settings
as we’ll go through a few practical examples in a moment. However, review the theme documentation to
get familiar with the options that are important to you. The visibility tab allows you to show or hide
the row on specific devices And the animation tab allows you to add animation
and set parallax effects You will need to hit ‘save’ to commit
your changes. The other options you have on the right are:
The ability to duplicate the row Import or export the row
Delete a row And the option to minimize the row
Next, if we scroll down to the section below that says ‘Accounting services’ and hover
over the row below that with three columns, you’ll see that a darker grey bar appears. This is what’s referred to as a sub-row,
which you can create by changing the column structure via an element within an existing
row. For example, if we duplicate the fancy heading
module where the ‘Accounting Services’ title is by clicking on the duplicate option
on the right You’ll notice that you have the same column
options available on the left for a sub-row, By selecting the four column option, this
will create a sub-row with four columns On the right-hand side of the sub-row heading
you’ll see that you have similar options to that of a standard row. We’ll delete this sub-row
Under the accounting services section, you’ll notice that their is a sub-row with three
columns that each have an image with a title. Each column has its own styling options
Let’s say that we want to delete the image module in the middle column and replace it
with an icon, title, and some text (known as a feature module):
To delete the image module we’ll click the ‘x’ on the right
To add add a feature module, we’ll click on the plus icon, then click and drag the
feature module into place The editing options will open. From here, we can change our featured title
text, Add some paragraph or blurb text
Choose the layout option we want If you don’t want to include the animated
percentage counter around the icon, you can just delete the percentage value
Adjust the icon size To change the icon, click on the icon option,
and select a new icon from the available options. You can also use an image instead of an icon
You can also add a link to the icon and feature title
The great thing is that your changes will be previewed live for you to see
Select ‘save’ If you want to use the feature modules in
all columns, you can just delete the other image modules
Then duplicate, and drag the modules into place
To commit your changes, remember to save the page
Let’s head back to the top: You can double click on the fancy heading
module to edit the text Similarly, if we double click on the button
module Up the top, you can set the size and style
of your button In the text field is where you amend the button
text And we can add the link destination for the
button to the link field. For example, we’ll link to the contact page
(for this, you don’t need to include the www dot part of of the url, just everything
after the .com or root domain. So in this case, forward slash contact hyphen
us). Under the styling tab, you can customize the
design of the button. The most important things will be:
Alignment, which will be controlled under the font dropdown on the general tab, by selecting
the text alignment option here. And on the button link tab, this is where
you amend the: Background and background hover color for
the button Link and link hover color
The amount of padding for the button text And border style and attributes
Save any changes If we double click on any of the modules on
the page, you’ll see that while there are different setting options, they are very similar
and function in the same way as the examples we’ve covered so far. The best way to get comfortable with the Themify
Builder is to invest a bit of time exploring the options, as well as reviewing the documentation
for more information. So far, we’ve gone through the basics of
updating content. What if we want to amend an existing layout? Let’s scroll down to the section with four
columns featuring image modules Say we wanted to change this row to five columns
instead of four We’ll hover over the column settings for
the row, and select the five column option We can then duplicate and update an existing
module and drag it across to the new column. Or select add a new module by clicking on
the plus icon. If you want to add a new row:
You can either scroll down to the bottom and create one from scratch by clicking on the
plus icon and adding in the modules you want to use
Alternatively, you can leverage one of the pre-designed rows by clicking on the plus
icon at the top of the page Navigating to the rows tab
Then select the row you want to use, and simply drag it into the builder, and place it where
you’d like it to be From there, you can easily customize it with
your content. Ok, so hopefully you’re starting to see
how easy it is to create a beautifully designed website with just a few clicks. Let’s go through the process of creating
a new page from scratch. In fact we’ll go back to our draft homepage
mockup we created earlier. Here we’ll have a hero image at the top
with a heading and a call-to-action, or CTA button. Next, we have an intro paragraph of text on
the left and a video on the right. Below that, we’ll have a headline differentiating
our business. And, a row with three columns featuring an
icon, title and blurb with learn more buttons in each column. Ok, so let’s create it! To do this, we’ll save our changes:
From your WordPress dashboard, hover over pages, and select ‘Add new’
We’ll give the new page a name – we’ll just call ours ‘test’
Once we’re there, we’ll click on the Themify Builder button to launch the page builder. Turn on the page builder, if it doesn’t
launch right away. You’ll see that we have a clean slate. From here, we can either use one of the pre-built
rows to start our design by hovering over the plus icon at the top, navigating to the
‘rows’ tab and then choosing a specific row. Or, build a layout from scratch. To do this:
Even when we’re building a layout from scratch, we’ll load in a pre-designed layout, as
sometimes the builder can be glitchy and include white space at the top of the page. This doesn’t happen all the time, but if
you have this issue, loading one of the pre-designed layouts and selecting ‘replace existing
layout’ typically gets around this. Then just delete the rows you don’t want
When the row you’re adding modules to is pressed against the top navigation bar, you’re
good to go For our example, we’re going to add a title
with a subheading and a call-to-action button. To do this, we’ll click on the plus icon,
and add a text module by clicking and dragging the module into the row
We’ll then add in our title text, and set this as our heading 1 or h1 (From an SEO perspective,
you should only have one heading 1 per page. We won’t get into SEO in this tutorial,
however if you’re interested in learning the fundamentals of SEO for WordPress, enroll
in our SEO course at courses.ohklyn.com) Below our H1, we’ll add our subheading
With all the text selected we’ll set the alignment to center
We’ll set the font color to white, but we’ll come back and do this in a moment, once we’ve
uploaded our background image To add our call-to-action button, we’ll
click on the plus icon and drag a button module into the row, under our title text
We’ll set the button background style to squared
Set the button text to ‘Get STARTED’ Add in the link destination, where we want
the link to go to, in our case, we’ll send this to the contact page by adding ‘forward
slash contact hyphen us’ Go to the ‘styling’ tab, and within the
‘general’ options, under font, set the alignment to center
Under the ‘button link’ options, under ‘background’, we’ll set a custom background
color of #c4943a, and a background hover color of black, or hashtag 000
Under the ‘link’ option, we’ll set the link color to white, or hashtag fff
We’ll then select ‘save’. We’ll now add a background image to the
row as well as some padding to create space around our heading text and CTA. To do this, we’ll scroll up to the row settings
at the top for the hero section and click on the edit options. We’ll set the row width to ‘fullwidth
container’ We’ll then head to the styling tab
Under the background option, we’ll leave that background option set to image, however,
you could set a background color, or use a video or slider. We’ll click on ‘upload’ to upload our
background hero image. We’ll select the file, and click ‘open’
Set the ‘background mode’ to ‘fullcover’ We’ll add a gradient overlay, as this is
a popular trend for 2018 and 2019. To do this, select the overlay option dropdown,
and select ‘gradient’ We’ll select a linear gradient with a 275
degree rotation The color selector on the left we’ll set
to is #081966 with an opacity of about 40 – 45%
The color selector on the right we’ll set to is #056a8c with an opacity of around 40
– 45% again Lastly, in the padding dropdown option, we’ll
add 15% padding to the top of this row, and 13% of padding to the bottom of the row
And then select ‘save’ We can now amend the title text color by double
clicking on the text module Navigating to the styling tab, and under the
font option, setting the color to white Remember to save changes
As per our rough mockup, we’ll now create a row with two even columns. The left will have a text module in it and
the right will have a video module. For this:
We’ll add a new row to our page under the hero section we just created, and set the
number of columns to two. We’ll then add our text module to the column
We’ll add our text and set our title to a h2. We’ll leave the rest of the text as paragraph
text We’ll then add our video module to the column
on the right To include a video, you can either upload
a video to your media library, or add a url link. In this case, we’ll add our ‘Best WordPress
themes for Business video’ Then select ‘save’. That’s looking OK, but the difference between
an OK design, and a great design is often the little things. The first thing we’ll do is add 5% of padding
to the top of the row, to create some breathing room between our hero section and our intro
section. To do this:
Click on the row editing options Navigate to the styling tab, and under the
padding option, uncheck the ‘apply to all’ option
Then add 5% of padding to the top And select ‘save’. We’ll also add a divider line as an accent
above the text module. To do this:
Click on the plus icon and add a divider line above the text module
We’ll use our feature color of #c4943a as our divider color
Include a bottom margin of 40px And set a custom width of 100px with left
alignment We’ll also add a ‘slide in left’ animation
Then, save changes The last thing we’ll do here is add a button
with a link to the ‘about us’ page. For this:
We’ll click on the icon and add a button to our column
Set the ‘button background style’ to ‘outlined’ Amend the button text to ‘read more’
Set the link to forward slash about hyphen us
Under the styling tab, in the general options, set the font alignment to center
Then, under the button link options, we’ll set the background hover color to our accent
color of #c4943a (leaving the regular background blank)
We’ll set the link color to our accent color of #c4943a
And the link hover color to white Under the border options, we’ll set the
border color to our accent color of #c4943a, with a solid border width of 1px
Then hit ‘save’. That looks pretty good, but our columns now
feel uneven. To fix this, hover over the column settings
for the row, and set the column alignment to the bottom alignment option. That looks better. Remember to save the page as you go to avoid
losing your changes. The last thing we’ll do together is create
a row with a headline differentiating our business and a sub-row with three columns
featuring an icon, title and blurb with learn more buttons in each column. To do this:
We’ll add a text module to a new row Add in our text, and set the headline to a
h2 Select all the text and set the alignment
to center Under the styling tab, we’ll add some padding:
15% to the left and right, and 15 pixels to the bottom. This will constrain this text which will add
to the design Then save the changes. We’ll also add some padding to the top and
bottom of the row by clicking on the row styling options
And adding 7% of padding to the top and bottom Then hit ‘save’. To create our sub-row:
We’ll duplicate our text module Under the column options on the right for
the duplicated module, select the three column option
We’ll delete the text module, and instead add a feature module by hovering over the
plus icon and dragging it into the column We’ll set a feature title
Include some feature paragraph text We’ll stick with the icon top alignment,
however, remove the percentage value to remove the circle around the icon
To change the icon, we’ll click on the icon option, search for the cube, and set that
as our icon We’ll change the icon color to our feature
color of #c4943a We think there may be a little too much space
between the icon and the feature title. To fix this, we’ll navigate to the styling
tab, and under the feature title options, we’ll set the line height to 0
Then save changes We’ll then duplicate the feature module
twice Drag them across to the other two columns
And update the information for each, following the same process. The last thing we’ll do is add in the CTA
button for each feature. This could be used to link to individual pages
for each feature if you were using this for services or locations as an example. To do this:
Click on the plus icon, and drag the button module into the column under the feature module. For this, we’ll select the ‘outlined’
option Set our button text to ‘Learn more’
Add in the link destination Under the styling tab, in the general options,
set the font alignment to center Then, under the button link options, we’ll
set the background hover color to our accent color of #c4943a (leaving the regular background
blank) We’ll set the link color to our accent color
of #c4943a And the link hover color to white
Under the border options, we’ll set the border color to our accent color of #c4943a,
with a solid border width of 1px. We’ll select ‘save’
Duplicate this button twice Copy it across to the other columns, remembering
to update the text and link destination Then save the page
And there you have it, that’s how you’ll use the builder to create layouts from scratch. Remember we’ve been doing this for years,
so if you’re taking a little more time to begin with, that’s totally normal. Within a few hours, you’ll be through the
steepest part of the learning curve, and you’ll find that this actually becomes quite enjoyable. Slightly addictive even. Ok…so hopefully that makes sense and you’re
feeling comfortable enough to build out the rest of the page layouts for your business
website. Follow the link on the OHKLYN post to the
documentation if you need additional info regarding the Themify builder or any of the
modules. When you have your website looking the way
you want and you’re ready to launch, there’s a few best practices that you should follow
to ensure you get the best results. If you want your website to be searchable
via search engines like Google, then the first thing is to ensure that your WordPress settings
aren’t blocking search engines from indexing your website. To check this:
From 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 index your website using the free Yoast SEO
plugin and Google Search Console. This will help to 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 of our YouTube channel. We would also recommend installing Google
Analytics on your website. You guessed it, we’ve created a free step-by-step
video on how to do this as well. With the Ultra theme, you can add the required
tracking code within the Themify Settings section. To do this:
From your WordPress dashboard, hover over ‘Themify Ultra’, and select ‘Themify
Settings’ Under the general tab, scroll down to the
header code section, and this is where you’ll paste your Google Analytics tracking code. And that brings our ‘How to make a business
website tutorial for 2018 and 2019’ to a close. We hope you found this WordPress tutorial
helpful, and are well on your way to launching a new website for your business. If you liked this video hit the ‘Like’
button, and remember to subscribe to our YouTube channel for more videos related to WordPress,
digital marketing and how to run a successful website. Your feedback is appreciated, so please leave
a comment below and tell us what you liked, or if there was anything you found difficult,
so we can put together additional videos to help support you as you build out your 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.

, , , , , , , , , , , , ,

Post navigation

5 thoughts on “How to Make a Business Website (2019) | WordPress Tutorial for Beginners

  1. Hello, thank you very much for the detailed video, on 38:58 I wanted to select page home alt, but it was not in the menu, I reviewed the previous steps but I don't seem to make any mistake, can you help me with that?

Leave a Reply

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