How to Create a Website Using WordPress (2018) | Step By Step WordPress Tutorial for Beginners
Articles Blog

How to Create a Website Using WordPress (2018) | Step By Step WordPress Tutorial for Beginners

August 30, 2019


In this video, we’ll show you how to create
a website using WordPress for 2018 and 2019. A great website design will stay relevant
for at least two years, and for this step by step tutorial, we’ll use a premium WordPress
theme to create a fully responsive website that looks great on all devices. The website we’ll create together is SEO
friendly with a fast page load speed, features an optimized UX design, and includes an intuitive
and beginner friendly drag and drop page builder. The theme we’ll use comes with a number
of pre-built designs that you can leverage in just a few clicks to create a stunning
website. So, regardless of what type of website you
want to build, we’ll provide you with the tools you’ll need to do it. 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. This theme leverages a one click demo content
importer to enable you to build exactly what you want, like a creative agency style website,
or one of these other layouts just as easily. Such as a more corporate or consulting style
website like this A niche specific website such as a:
Fitness website Restaurant, cafe, or bar website
Portfolio, resume, or magazine style website Or a Wedding website
Just to name a few. In addition to that, the theme we’ll use
includes over 65 professionally designed layouts that you can use as a starting point to create
your website. You’re also able to choose around 15 different
header and menu styles to get the exact 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. 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 a website. This is something a lot of people miss, and
ends up wasting time and causing a lot of frustration. We’ll then cover, how to secure your domain,
set up your hosting account, and install WordPress. Review the fundamentals of WordPress that
you need to know and provide you with free access to a more detailed overview in case
you’re brand 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. And finally, go through how to customize your
website, covering the fundamentals on creating and managing pages, posts, menus, widgets,
and how to adjust the global design settings of your website. We’ll show you how to access more than 10
hours worth of free video content that walks you through customizing every inch of your
website, so regardless of how intricate your website design is, you’ll have the tools
to create it. So, if that sounds good, then let’s get
to it. We’ve created a blog post that accompanies
this video, that you can follow along on the OHKLYN website at OHKLYN o-h-k-l-y-n.com (there
will be a direct link in the description below). In that post, you’ll find the written instructions,
as well as any links mentioned in this video. So we would recommend opening up 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). To access 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. Similarly, 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 and 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, they
will also automatically install WordPress for you, and 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. Ok, so before we start building your new website
– let’s make sure you’re prepared. You’ve heard the cliches: Preparation prevents
panic, if you fail to prepare, then prepare to fail, and…when it comes to creating a
website with WordPress, they’re all true. By taking a couple of moments upfront to put
together a game plan for creating your website, you will save yourself a lot of time, and
create a much better outcome. 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:
The most common include a: Homepage
About page Contact page
Portfolio page Services page (if it’s a business website)
Blog page (including the individual post pages, and blog archive pages or category pages),
And a privacy or terms of use page. You might have more, or less, but make sure
you draw it 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 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 this is to create, 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. 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. Next is brand design and content planning. Once you’ve outlined the pages you want
to include on your website, and 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 can be 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. You will need a small budget of around $150
– $300, depending on the options you choose. This will include things like:
Your website hosting: at about $3 – $10 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 Once you get started on that, or if you’ve
already got that under control, we can move on to setting up your new WordPress 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 the 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. Ok, 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’. 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
on your website, 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. 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 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 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. 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 3 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. 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 backend. The Admin menu located to the left of your
dashboard is separated into 3 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 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 our
website. Once you’ve clicked on the skin you want
to use, for this example we’ll use the agency 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 agency demo includes the
typewriter plugin, which you may want to use. However, if you don’t want to use that feature,
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 theme has been installed successfully,
select ‘activate plugin’ Select ‘add new’ and repeat the process
for the remaining plugins. Pause the video and finish the steps. Great, let’s move along to the next step. Once you’ve installed the required plugins,
navigate back 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 agency skin,
and click on the ‘import’ option to bring in the demo content for our website. Once that’s done, the page will refresh
and we can go to the front end of our 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. 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 very straightforward. If you don’t want to include a Google Map
on your website, you can ignore this and just delete the 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. 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
WordPress website, uploading the theme and required plugins, as well as how to leverage
the demo content to get up and running quickly. In this section we’ll look at how to create
pages and posts, and 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 ‘Landing’. 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 pre designed
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 pre designed 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 App 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 backend by clicking on ‘edit in backend’. This takes us to the backend version of the
Themify builder for the page that we’re editing. The backend 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 ‘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 ‘landing’. Then select ‘save’. If we go to the homepage of our website, we’ll
see that the landing page we just created is now our homepage. 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
get to how to use the Themify builder to customize your pages shortly. We’ll focus on getting your website structure
and critical elements right first, such as pages, menus, your logo and branding, as well
as the global layout settings. If you want to include 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. 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 going live. 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 what
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.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’
At the bottom of the page, 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 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 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 a lifestyle blog,
you may have a category called ‘fashion’ with a number of individual posts related
to fashion. If you were to click on the fashion category
link on your website, you would be taken to the fashion archive page, which would display
all the posts related to fashion. 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 Add your favicon and select 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, or 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, plus the social widget area that sits in the header
As well as the footer social widget area, that sits in the global footer
If you imported the demo content, there may already be widgets added to the various sidebars
and other widget areas. If we go to the blog page of our site:
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’ Ok, so that’s a crash course on widgets,
there are theme specific widgets down in 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. Post layouts allow us to choose how we want
individual posts to be displayed on archive pages. Choose the 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. 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. Next we have the Theme settings tab. By default, The Ultra theme is fully responsive,
however, here you can disable this (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 default horizontal header to header min bar option
Save the changes Then 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 back to the default
‘header horizontal’ option Have a play around with the various options
to see which one you like best. Depending on which header option you choose,
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. 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
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 Instagram:
Scroll down to the bottom, and select ‘Add link’
Give it a title, in this case Instagram Add your Instagram link in the link field
To insert an icon, click on ‘add icon’ Search for the icon you want to use, in this
case Instagram 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
The Instagram logo is now present, and if we click on the link
It takes us through to our Instagram account. 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
landing page we created before: By hovering over pages in the admin menu and
selecting all pages We’ll then click on the landing 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 here. 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 all day. 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 our 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 our logo, we’ll click on the plus
icon We can either upload our 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 our logo to the header of our
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 200px, 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,
our logo is now added to our site. If we 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 ‘Instant upload and access’
If we right click, and inspect this heading, we can see that it’s a heading 3 or a h3
If we want to style all heading 3’s in a certain way, we can click on the heading 3
font option dropdown And let’s set the heading 3 font family
to something like ‘dancing script’, by selecting it from the dropdown. You’ll see in the preview panel, that has
now changed, and if we scroll down, all the heading 3’s or h3s on the page now have
that font applied. 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 your 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 back into the landing page we
created earlier, so that we can explore the Themify Builder. To navigate back to that page:
We’ll hover over pages in the admin menu, and select ‘all pages’
From here we’ll select the landing page we created before
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 landing
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 web pages. 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 6. 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 (like in this example), 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 ‘download’ button to open the button settings, you’ll see
that the link address is hashtag download This is linking to the section of the page
with an ID or Anchor name of Download. If we scroll down to the bottom of the page
to the download section, and click on the row options for this section
You’ll see that this section has a row anchor name of download
If we open up this page in a new tab And click on the download button
You’ll see that it takes us down to the download section, where the user can then
download the app. Another common use case for this would be
linking to a contact us section on the same page, with a contact form. 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 in 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. I 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
If we hover over the text in the header section below, you’ll see that a darker grey bar
appears. This is what’s referred to as a sub-row
which we’ll show you how to create shortly. You’ll notice that you have the same column
options available on the left for a sub-row, And on the right you have similar options
there as well. Below that, you’ll notice that the sub-row
has three columns with the text and button sitting in the middle column. You’ll notice that each column has its own
styling options Within the middle column, you’ll see that
the text and button modules have their own setting options. To edit any module, in this case the text
module, you can click on the edit icon, or simply double click on the module
To amend the text, type in the text you want The great thing is that it will preview live
for you to see the changes you’re making You can set the level of heading you want
to use if it’s a title If you want to add a link within the text,
select the text you want to link Click on the ‘insert/edit link’ option
Add the link address And click ‘apply’
In the styling tab, you can amend the various settings available for that module
The most common will be under the font option Here you can amend the text alignment, and
various text attributes You can go through the rest of the options
for each module, you’ll also have the visibility options and animation options for the module,
like you did for the row. For example, if we set the animation to ‘slide
in right’ Select ‘save’
Save the page And then open the page in another tab, you’ll
see that the text slides in on load. Let’s head back,
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
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 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 the image module below
that, 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. Remember to review the documentation if you
need more information. So far, we’ve gone through the basics of
updating content, what if we want to change an existing layout? Let’s scroll down to the next section
Here we have three columns. A quarter, half, and another quarter, with
an image, text with a button, and another image. First, let’s duplicate this row by hovering
over the row settings in the top right and clicking the duplicate button. You’ll see we now have two rows. Let’s go to the second row
Say we only want this row to have two columns: a half column, and another half column. To do that, hover over the column options
for the row in the top left, and select the two even columns option. Great. Now, let’s assume we want to delete the
image that’s in the left column and instead use the image that’s in the right column. To do this, we’ll delete the image module
in the left column Then drag the image that’s in the right column
over to the left column We can change the vertical column alignment
by hovering over the column options for the row
Under the column alignment option we can choose between:
Top Center
Or, bottom Below that, you can quickly amend the column
direction And change the gutter space or the space between
the columns to: Narrow
None Or, back to default
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 want it. From there, you can easily customize it with
your content, using the parts you want and deleting the parts you don’t want. 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. To do this, we’ll save our changes
Then click on ‘edit in back end’ to head back to the WordPress dashboard
From there, 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. You’ll see that we have a clean slate. From here, we can either build a layout from
scratch or 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. In this case, we’ll scroll down to the ‘hero
banner’ row Then click on it and drag it across to the
very top of the page, and drop it in From here we could customize the elements
by double clicking on the element we want to update, say the title for example
Add in a new title, and click save. In the same way, we could add additional rows. For example, we could add the ‘features’
row by clicking on it and dragging it across. We could continue down and build out our page
by following this approach We’ll delete the features row for now. In addition to using the predesigned rows,
you can also create your own layout from scratch. To demonstrate this, we’ll re-create the
hero banner layout above, but build it from scratch. To do this:
We’ll scroll down to the bottom of the page. The first thing we’ll do is add in the modules
we want to use. In this case, we want to use a text module
and a button module so, we’ll click on the plus icon at the bottom of the page and add
in our text module, and hit ‘save’ Then drag in our button module to sit below
that, and click save. For the purpose of this example, we’ll copy
the text from the hero banner above, however, you will need to add in your content. To do that we’ll double click on the text
module above Copy the content
Go back into our new text module And paste in the content
With all the text selected, set the alignment to center via the visual editor settings. We’ll need to amend the text color to white,
but we’ll do this after we add the background image into the row. We’ll hit ‘save’
We’ll then double click on the button module We prefer the square button option, so we’ll
select that. We won’t amend the text or link, but you
know how to do that. What we will change is the alignment. To do this, head to the styling tab, and in
the general tab, select the font option Scroll down and change the alignment to center. We’ll then select ‘save’. We now need to add in the background image
to the row as well as the padding to replicate the hero banner section design. To do this, we’ll scroll up to the row settings
at the top for the hero banner and click on the edit options. The row width is set to full width container
row, so we’ll change that in a moment. If we go to the styling tab, we’ll see that
it’s using a background image. For this example, we’ll just copy the link
url, however, you will be able to upload your own image, use a video url or leverage an
image slider instead. Below that, we can see that the background
mode is set to fullcover which we will need to replicate. If we click on the row overlay, we can see
that it’s using a row overlay gradient which we can re-create. And if we look under padding, we can see that
it’s applying 8% of padding, which we can add in as well. Ok, so let’s scroll down to the section
we’re creating and click into the row settings: Firstly, let’s set the row width to ‘full
width container row’ We’ll then go into the styling tab
Under background, we’ll paste the link we copied from above
Alternatively you could upload an image or choose one from your media library
We’ll set the background mode to ‘fullcover’ Then, under the row overlay option, we’ll
choose the gradient option We’ll set a linear gradient with a rotation
of 327 degrees Set our three gradient colors, remember to
set the opacity to around 50 – 60% We’ll just make it look similar, it doesn’t
need to be exactly the same Then we’ll click on the padding option,
and add 8% of padding to all sides Then select ‘save’
We’ll then double click on the text module Navigate to the styling tab and click on the
font option Here we’ll set the font color to white and
then select ‘save’ We’ll double click on the button
Set the color to yellow and then click save 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 it’s a little slower to start 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 your page layouts. Follow the link on the OHKLYN post to the
documentation if you need additional info regarding the Themify builder or any of the
modules. Once you’ve got 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 to 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. Ok…So that wraps up our how to create a
website using WordPress tutorial for 2018 and 2019. 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.

Only registered users can comment.

Leave a Reply

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