In this video, we'll show you how to make
a portfolio website in WordPress for 2018
and 2019.
Regardless of whether you're a photographer,
designer, artist, professional, or creative
freelancer, we'll show you how to create a
portfolio website to showcase your skills
and work.
In doing this, we'll teach you how to create
this exact website here as well as how to
customize every aspect of it, including the
navigational style, layout and structure,
visual elements such as colors, hover states,
and galleries so that you end up with the
exact portfolio website you want.
In the portfolio website tutorial, we'll create
a website that features an optimized UX design,
is SEO friendly, and fully responsive to ensure
your portfolio website looks perfect on all
devices.
So, if that sounds good, then let's get started.
On the OHKLYN blog, we've created a step-by-step
guide that you can follow along with for free.
The link will be in the description below
and in the info card for this video.
Here, you'll find the written instructions
as well as any links mentioned in this video.
We would recommend opening the post in a new
tab so you can follow along.
For this tutorial, we will use the Ultra Theme
by Themify.
Via the description below and on the OHKLYN
post here, you'll be able to access the theme
as well as view the live demo.
Similarly, to show you how to start your portfolio
website with WordPress, we suggest using Bluehost
as your hosting provider.
With the link in the description below and
on the OHKLYN post here you'll be able to
access discount hosting and a free domain
name if you haven't purchased one already.
We'll cover the steps on how to set this up
shortly.
If you've got your domain and hosting already,
that's fine.
You'll still be able to follow along.
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 deal 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.
Okay, so let's begin with what you need to
do before you start making your portfolio
website using WordPress.
One of the biggest mistakes beginners make
when making a portfolio website is that they
forget to begin with the end in mind.
Thinking about what you want to ultimately
achieve with your site will make the process
a whole lot smoother and produce a better
result.
Before we start installing WordPress and creating
your posts and pages, it's important to take
a moment to define your target audience, identify
your niche, and consider the things that will
make your site uniquely you and entice users
to engage.
What is the goal of your portfolio website?
To attract potential employers?
To grow your social media following?
To showcase examples of your previous projects?
Or perhaps something entirely different.
Whatever it is, make sure it's clear.
In the article on the OHKLYN blog, we provide
you with a broader insight into why you would
want to start your own portfolio website.
Feel free to pause the video and read through
it if you feel you need more guidance.
It's important that you have a firm grip on
the goal and identity of your portfolio website
before you begin.
If you have multiple portfolios or suites
of your work to show off, you should start
organizing them by category.
This could be the niche or the type of work.
For example; your resume and personal skills
or traits, UX or UI design, web design, or
branding.
The same can go for any other industry or
line of work.
One way to do this is to think about the individual
portfolios you want to include and the categories
you'll use to group these on your site.
This will make it easy for visitors to find
specific information that's relevant to them.
A good approach here is to find a portfolio
or resume site in a similar niche and analyze
how they use categories to structure their
content as well as how they are used for navigation.
The idea isn't to copy what someone else is
doing, but to figure out what you think works
well and how you can improve the experience
of your site.
Once again, invest some time in the strategy
side of planning out your site content.
By taking a moment to sketch out the site
map of your site, you'll find that you get
a much better result.
For example, we created this site map where
you can see the pages that will be included
in our site as well as the portfolios and
portfolio categories that will be used to
organize them.
By now, you may have already decided on a
name for your blog.
However, if you haven't, there's a few things
you should consider such as; is the name unique
and memorable?
Is it a name you can scale and grow with?
The value of keeping the name of your site
as short as possible, and of course, it's
the domain name available?
To check if the domain name you want to use
is available, follow the Check Domain Availability
button on the OHKLYN post here.
That will take you through to the Bluehost
site.
From here, click on Domains in the top menu.
Here, enter the domain name and choose the
free domain extension you want.
If your domain name is available, you will
be taken to a page to review and purchase
it.
Alternatively, if it's not available, you'll
be shown other options, or you will need to
try something else.
We'll cover off on purchasing your hosting
and securing your free domain name in the
next step.
Let's start off the process of creating your
portfolio website with preparation and planning.
There are a few things you'll need to make
the process of creating your site a lot smoother.
These are a must have for any blog or website.
They will be used throughout your site on
every page and help all of your website look
coherent throughout.
A logo: make sure that you have all the variations
you need, like a horizontal and vertical version,
dark and light version, as well as different
sizes so that it fits perfectly wherever you
use it.
A favicon: this is the logo your website will
display in the browser tab.
It's usually square, but you can create the
illusion of an irregular shape by using an
image with a transparent background like a
'.png'
Brand color palette: a coherent design always
starts with a brand color palette.
This usually consists of a main color as well
as a few complementary colors.
Tools like paletton.com, Adobe Color, or color-hex.com
can help you pick a color palette.
A small budget of $100-$250: this will fund
the cost of your domain, hosting, premium
WordPress theme, images if required, and if
you want to hire a designer to create some
of your branding assets, it may be up to $300.
We have created an article the details the
expenses you will face as you build your website
or blog on this article on the OHKLYN site.
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 site.
The most common include a Home page, About
page, Contact page, Portfolio page, Services
page, and a Blog page, including the individual
post pages and the blog archive page or category
pages.
You might have more or less depending on exactly
what type of portfolio site you have, 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?
From a user experience perspective, you should
think about the most important action that
you want the user to take on the 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.
For example, for a portfolio website, you
would probably want to convince as many visitors
as possible to connect with you, whether it's
to enlist your services or as a potential
employer.
You could use buttons that link your contact
details and your brand colors to draw the
users' attention.
Spread these throughout your portfolio pages
at important content like where you describe
your services.
The same goes for other images on your other
pages of your site.
If your goal is to sell items, you could have
a call to action or CTA button that says something
like 'Buy Now'.
Or, if it's meant to be a portfolio of your
work, it could be a button that says, 'View
More'.
You'll 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.
For your home page specifically, view the
live demos for the premium WordPress theme
we'll use in this tutorial by following this
button here on the OHKLYN post, then go through
the layouts and see if there's a certain layout
that resonates with you.
We'll use the Portfolio Photography layout
here; however, you can use whichever layout
you want.
If you haven't already, the first step is
to register your domain, setup your website
hosting account, and install WordPress for
your website.
Before we go ahead, let's go over some important
concepts.
Your domain or URL is the web address for
your website and it's what users will type
into their browsers to access your site.
For OHKLYN, it's ohklyn.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.
So, let's go through the steps for setting
up hosting for your blog and registering your
free up domain with Bluehost.
Here is a list of the types of domains that
are included for free, the most common being
a '.com' or '.co'.
If you've already purchased your domain or
if you want to purchase an alternative top-level
domain such as something relevant to your
niche, or a country-specific domain like '.co.uk'
or '.com.au', you can purchase that domain
through a registrar like GoDaddy, CrazyDomains,
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 is then change what is called the domain
name service to point at Bluehost which will
be your new hosting provider.
Fortunately, we've written an article and
a step-by-step guide on how to do this which
you can access here.
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 about 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 select the first 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 or 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 name 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 would have been sent a confirmation email
to the designated email address on the account
as well as a WHOIS verification email.
Follow the link in that email to verify the
email associated to your new domain.
You will need to create a password for your
hosting account.
To do that, click on Create Your Password.
Make sure to pick a secure password.
You could use the 'suggest password' tool
to help you with this.
Once you've entered in your password, review
the Terms of Use and select Next.
You will then be able to log into 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.
You can follow this link on the tutorial post
here.
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 backend 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 backend of your WordPress website.
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 drop-down
in the top right corner 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 a few other plugins
like Jetpack, MOJO Marketplace, etc.
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 drop-down 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 WordPress 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 site.
This is best practice as it improves the security
on your site, allows you to take payments
on your site, and will improve your Google
rankings.
Okay, we've covered preparation, as well as
registering your domain, setting up hosting,
and installing WordPress.
We can now move on to step number three, which
is the fundamentals of WordPress.
Whenever you want to log in to 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.
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 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 video section.
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.
All right, 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
of 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 general
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.
All right, 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
your 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.
Okay 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 to $100 is good value
for money.
Premium support packages can cost $50 a month,
so the fact that this is included in a premium
theme makes it a smart investment.
On the OHKLYN blog we've analyzed hundreds,
if not thousands of WordPress themes based
on speed, design, ease of use, mobile responsiveness
and functionality, which you can access via
the WordPress Theme Reviews category of the
OHKLYN blog.
For this tutorial we'll use one of the consistently
top-rated WordPress themes: 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 in the
OHKLYN blog, you can click on this button
here.
From here, you can just purchase the Ultra
Theme with or without the Photoshop files,
or under Pricing, you can select one of their
club memberships which give 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 the Lifetime Club which will give
you access to everything for life.
We have their Lifetime Club as we make use
of a number of their themes but pick whatever's
right for you.
Enter in your information.
If you subscribe to the OHKLYN blog, enter
in 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 theme section.
Click on the Ultra link to download the theme
file, which will be a zip file.
You will upload the theme file as is, so there
is no need to unzip it.
If you want to install a child theme, you
could use our free Child Theme Generator located
under Resources on the OHKLYN menu by following
the instructions.
Alternatively, you could use a plugin called
Child Theme Configurator.
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 click Open.
Then, click install Now.
This will start the process to upload and
install the Ultra WordPress theme.
Give it a moment to finish.
Once the theme is successfully installed,
click Activate, and your new theme will now
be live on your website.
Once it's done, you'll be taken to your Themify
Settings page.
Once the theme has been installed, you can
navigate back to this page at any time by
hovering over the newly created Themify Ultra
tab in the admin menu on the left and selecting
Themify Settings.
The first thing we'll need to do is install
and activate any plugins 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 plugins'.
Select the required plugins and click on Install.
We'll click on the option to return to the
required plugins installer.
To activate the plugins we just installed,
select the plugins and then select Activate.
Once all the plugins have been installed and
activated, we can head back to the WordPress
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.
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 control the version
of the Ultra Theme that's installed on your
website.
The Transfer tab allows you to import or export
data for the Themify Settings panel.
The tab we'll look at first is the Skins & Demos
tab.
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, menus, and widgets
to create exactly what you see on the Themify
demo site.
They can be viewed by clicking on the View
Demo link below each example
or by following the link in the description
below or by clicking on the button on the
OHKLYN post here to the Ultra page and then
scrolling down to the demo 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 or if you've got existing content
on your website.
We'll cover off how you can use these shortly.
To use one of the skins, you just need to
click on the skin you'd like to use and click
Save.
If you view the site from the front-end, you'll
see that the skin has been applied.
If we select another demo site 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 selected the theme you want to
use, (for example, we'll click on the Photography
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 any of the demos as a starting
point for your website, then you'll select
Import to import the demo content to your
website.
Depending on which demo you import, you'll
be presented with the option to import additional
plugins that you'll 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 photography demo includes
the Builder Contact plugin, which you may
want to use.
However, if you don't want to use a contact
form on your website, then you don't need
to install the plugin.
To install the required plugins, from your
Themify membership area, scroll down to the
builder add-on section.
To download each plugin for the demo you want
to use, just click the link of the specific
plugin to start the download and repeat for
every plugin you want.
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.
Then, select Choose File.
Navigate to the plugin you want to install
first, select it, and click Open.
Then, click Install Now.
Once the plug-in has been installed, select
Activate Plugin.
Select Add New and repeat the process for
the rest of the plugins.
You can pause the video and go through this.
Okay, great.
So, now that all our plugins are installed,
let's finish importing our demo content.
Go back to the Skins & Demos tab by hovering
over Themify Ultra in the admin panel and
selecting Themify Settings.
Then, go to the Skins & Demos tab.
We can now select the demo we want to use.
Make sure to click on the Import option to
bring in the demo content.
Give it a moment to finish.
Once it's done, visit the front-end of your
website.
You will see that the skin and the demo content
is now imported and ready to be customized.
As you can see, this is a great way to get
your site up and running in just a few minutes
with a number of pre-created layouts that
make it easy for you to build out the rest
of your website.
In the following steps, we'll also show you
how to build a page from scratch similar to
this using the Themify builder.
You'll notice that this demo leverages a Google
Map and that at this moment it's showing an
error.
This is because we need to add a Google Maps
API key.
That may sound complicated, but it's actually
very simple.
If you don't want to include a Google map,
you can skip this next part and delete this
section which we'll show you how to do later
on.
To add Google Maps, go back to your Themify
Settings.
Make sure you are in the Settings panel.
Scroll down and click on the Google Map option.
This is where you will add your API key, and
below that is a link that will show you how
to generate your API key.
We've already got ours, so we'll just paste
it in.
However, you can pause the video and follow
this link to detailed steps on how to generate
your key.
Once you have it, just copy and paste it into
this field.
Remember to save your changes.
If you go back to the Contact page, you'll
see that your map is now working.
Now, if you decide that you don't want the
imported posts and pages, in the Skins & Demos
tab, you can select Erase under your skin
which will delete the imported content but
leave the Themify panels, widgets, etc. in
place.
Okay, 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 upload
your logo, favicon, and style your theme using
the customizer, how to update the theme settings,
how to create pages, posts and categories,
how to create a portfolio page, how to use
the Themify builder, how to update the menu
and navigation, and lastly, how to update
the sidebar and footer of your site.
We'll then show you how to can access over
ten 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 upload
your logo and favicon as well as set your
brand color palette.
These are your three most important binding
elements and will play the biggest role in
uniquely identifying your site to visitors.
We'll start with the favicon as this is conveniently
located within the theme settings.
To access the Themify settings, from your
WordPress dashboard, hover over the Themify
Ultra and select Themify Settings.
We'll go through the Settings tab and cover
off the fundamentals you need to know later
on.
The great thing about the Ultra Theme is that
there are so many options.
In fact, we'd need more than ten hours to
cover every option.
So, what we'll do instead is cover the things
that will be most 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.
We’ll cover off on all the most important
settings in a bit.
In the description below and on the OHKLYN
post, there will be a link to the Themify
documentation and detailed video tutorials
which we would recommend opening up in a new
tab in case you want further clarification
on anything.
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 with transparent
areas if you want to include a brand element
that isn't square.
To upload your favicon, click on Upload then
navigate to your favicon, select it, and click
Open.
Then, click Save in the top right corner.
Now, we'll move on to uploading your logo
and choosing your brand colors.
We'll do this using the theme customizer and
run through some of the most important settings.
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 a 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 our new website.
From within the customizer, scroll down and
click on the Site Logo & Tagline option.
Here we can amend the logo and tagline for
our website.
We'll click on the Site Logo drop-down.
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 '+' icon.
We can either upload a logo image or choose
an image from the media library.
We'll upload our logo to add it to the media
library.
Set an alt text, which is good practice for
all images, and click Insert.
This will add our logo to the header of our
website.
It's good practice to set a width or height
parameter to ensure our logo doesn't pixelate
or look odd.
In this case, we'll set a width parameter
of 200 pixels by adding 200 pixels to the
first box.
If you want the logo to take the user someplace
else other than the home page 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 you view the site from the front-end,
our logo is now added to our site, and you
should also see the favicon in the browser
tab.
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
in 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
drop-down.
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 RGB 8-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 override
these settings via individual pages' Themify
custom panel or via the Themify builder itself.
We'll show you how to do this later on.
You can amend the header background color
and other elements via the Header Options
drop-down 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 we will cover later on.
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 guides
for the section is also a great way to explore
your options further.
The last thing we will 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
on the Body options panel, then choose the
Body Font option.
Here, you can choose from a website font or
a number of Google fonts.
If you hover over a font in the drop-down,
you'll see a preview of that font.
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 two blurbs.
If you right-click and inspect one of these
headings, we can see that it's a Heading 2
or H2.
If you want to style all heading H2s in a
certain way, you can click on the Heading
2 Font option drop-down.
Let's set the Heading 2 font family to something
like Dancing Script by selecting it from the
drop-down.
You'll see in the preview panel that it has
now changed and if we scroll down, all the
other Heading Twos or H2s 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 on 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.
Okay, 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.
Next up, we'll cover off the most important
Themify Ultra theme settings.
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.
We will now look at the rest of the settings
you will need to get comfortable with and
know how to use.
These settings not only control largely how
your site looks but also how it functions.
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 Home page, 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 organizational tool and
prove additional context and meaning to users.
Tags can also be added to individual posts.
Individual portfolio posts are the 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 showcase the individual posts or portfolio
posts associated to that specific category.
Essentially, these pages act as an archive
of associated posts.
For example, if you had a portfolio website,
you may have a category called 'Projects'
with a number of individual posts that each
focus on one of your completed projects.
If you were to click on the Projects category
link on your website, you would be taken to
the Projects archive page which will display
all the project posts.
This page is what's referred to as an archive
page.
Okay, 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.
There are a number of options below the Favicon
which we won't cover.
However, we'll turn 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 would 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 theme 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.
If you want to include blog posts on your
website, then you should definitely spend
some time adjusting these settings.
You will see that they are very similar to
the portfolio archive and post layout options
we will spend some time on next.
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 Home page, for
example.
Once we've made changes, select Save to commit
them.
The next tab is the Portfolio Layouts.
This is where we set the default layouts for
individual portfolio 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.
If you expand the Default Archive Portfolio
Layout section, the first option is 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 see
the 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.
We'll show you how to use these widget enabled
areas in the relevant section.
If you're new to WordPress, review the documentation
to get your head around widgets and widget
enabled areas as they're a powerful feature.
For the portfolio Sidebar Option, we'll select
option with a sidebar on the right as this
is the most common way to do it.
Portfolio layouts allow us to choose how we
want individual posts to be displayed on archive
pages.
Choose the option you like 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 metadata such as the author, date, category,
etc.
To see your changes, view your site from the
front-end and go to any portfolio category
or archive page.
In our case, we can go to the Home page of
our site and click on Portfolio.
Play around with the settings until you find
the perfect options for you.
The next group of layout options relate to
single portfolios, which if we go into the
Portfolio page and select a specific portfolio,
this is the layout this section is referring
to.
Once again, we'll leave the default layout,
but pick whichever is best for you.
Go through the options below and try a few
to see what works best.
We'll go through creating portfolios from
scratch later on which will cover the same
settings and will overwrite whatever defaults
you select here for a specific portfolio.
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 a generic theme accent color
and typography.
You have more control over these settings
in the theme customizer panel which we covered
off earlier, so we'll leave this as is for
now.
However, below that are the various header
options we have available, which dramatically
impacts the look and feel of your website.
For example, if we change the header style
from the default horizontal later 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 will explore in the later section.
The text components are managed by scrolling
to the bottom of the Theme Settings page we
are now on and adding our text to the fields.
The footer styling will be controlled via
the theme customizer panel.
The last tab we'll go through together is
the Social Links tab.
We will cover how the social widgets can be
added to the header or footer of your website
via the widgets tab, and we already covered
how to exclude social icons via the Theme
Appearance settings 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 the social link simply, click the
X icon.
Save your changes and the social link is removed.
Okay, 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 portfolios,
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.
In the next few sections, we'll go through
how to add content to your site in terms of
posts, pages, galleries, portfolios and categories.
We'll start by creating the pages we need
for our site.
We want our photography site to have a Home
page, About page, Contact page, Portfolio
page (including the individual portfolio pages
and portfolio archive pages or category pages),
Privacy page, Services page, and Bog page
(including the individual post pages and blog
archive pages or category pages).
In WordPress, the pages for your blog will
be managed under Pages in the admin menu.
By hovering over Pages, you can either view
all pages or add a new page.
Let's click on All Pages for now.
If you've imported the demo content, you'll
notice that there's a number of pages that
have been created already.
If we look at your sitemap, we'll see that
we have created all the pages we want except
for a Services page.
So, we'll create this page now.
To create a new page, click Add New.
You could also hover over the '+ New' icon
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 a URL
for this page.
For this example, we'll call this Services.
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've already gone through setting the default
global page settings, but you're always able
to override these for individual pages here.
We're going to load in one of the pre-designed
layouts, which is a fullwidth 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 Fullwidth.
We will also select Yes for the Hide Page
Title option.
This will create a clean slate for us to bring
in the pre-designed layout.
Remember to occasionally save your page as
a draft.
To add one of the pre-designed layouts, click
on the Themify Builder tab to launch the back-end
builder.
In the Themify Builder tab, click on the Import
Layout button.
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 Product/Service
layout by clicking on the layout.
You'll be asked if you want to replace or
obtain the layout.
We'll select Replace, and the layout is now
loaded onto the page.
If you preview the page, you'll see the layout
loaded in.
We'll go through a practical example of using
the page builder to customize pages or layouts
shortly.
For now, we'll save the page.
At the bottom of the page, you'll now see
the Themify Builder tab populated with content.
This is the back-end version of the Themify
Builder, and the blocks correspond to content
on the page.
We'll go through an example of using the front-end
builder later on.
The main difference between the front-end
and back-end builder is that you're able to
view your changes live as you make them in
the front-end.
To view the front-end builder, click on the
Themify Builder button here at the top of
the page.
If the builder does not automatically open,
click the Turn On Builder option from the
top of the page.
This is the front-end version of the Themify
builder, and what we'll mostly use to customize
pages later on.
Remember to publish your page when you're
ready for it to go live.
Okay, for our About page, let's go back to
the All Pages page.
Edit the About page by clicking on the name
or the Edit link.
Start by deleting the 'Us' from the title
and edit the permalink to just be 'About'.
Remember if you change a permalink or URL
after you've published a post, once your blog
is live, you'll need to add what's called
a 301 Redirect from the old URL to the new
URL.
This is to avoid Google having crawl errors
or 404 Page Not Found errors.
The best way to do this is with a plugin like
Simple 301 Redirects or something similar.
Remember to update the published page to commit
your changes live.
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.
Now, let's take a look at how to create blog
posts and categories in WordPress.
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 on 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 featured image by clicking on the
Set Featured Image option on the right-hand
side as well and either uploading an image
or selecting one from the media library.
The featured image for your post will display
at the top of the post page as well as on
the listing for that post on any category
or archive pages.
It will also be used as a thumbnail for the
post in the mega menu, which we'll show you
later on.
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.
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 ten hours of detailed
content, covering every element of this theme.
You can also review our How to Use WordPress
for Beginners article for more information.
Pause the video and create the pages, posts,
and categories you want to include on your
website before going live.
Now that you have your pages and posts in
place, we can go through how to add portfolios
to your site to showcase your work or talents.
For the most part, you treat portfolios the
same way that you treat blog posts, with individual
portfolios organized under portfolio categories.
A portfolio page usually consists of some
photographs, a few pieces of informative text
and links to your services or contact information
depending on what type of portfolio you create.
The Ultra Theme comes with a number of attractive
and practical portfolio layouts that you can
leverage.
In this section, we'll show you how to create
and edit the portfolio using the content builder
that ships with the Ultra Theme.
To view your portfolios, from the WordPress
dashboard, click on Portfolios in the admin
menu.
There will be a number of pre-designed portfolios
created when we imported the demo content.
Portfolios can be organized underneath categories
just like posts and galleries.
You can manage portfolio categories by hovering
over Portfolios in the admin menu and selecting
Portfolio Categories.
If we refer back to our sitemap, you'll see
that we have four portfolio categories: Who
Am I, UX-UI Design, Web Design, and Branding,
with a few subcategories.
So, we'll create these categories the same
way as we did for our blog posts by entering
a name and then clicking Add New Category.
We'll create the Who Am I category like this.
You can also create subcategories by entering
a name, then selecting a parent category from
the drop-down.
We'll create a category called Corporate Branding
and select Branding as the parent.
As you can see, Corporate Branding will be
created as a subcategory of branding, indicated
by this line here.
You could also delete the category by hovering
over a category and selecting Delete.
Portfolios in that category won't be deleted
but will be sent to the uncategorized category
instead.
We'll skip ahead and create the rest of our
categories to reflect our sitemap.
You can do the same.
When you're satisfied, we can move on to creating
portfolio pages for our categories.
To create a new portfolio page, hover over
Portfolios in the admin menu and select Add
New.
Or, from the toolbar, select the '+ New' icon
and select Portfolios.
As you can see, creating a portfolio looks
very similar to creating a post.
[
You can add a title here.
We'll type in 'Mobile Fashion App'.
You could also add in some content here that
would display at the top of the page.
We don't want this to interfere with our demo
layout, so we'll leave it blank.
The same goes for the featured image.
However, in the Portfolio Categories box,
we will add this portfolio to one of our categories.
Depending on how you want your page to be
structured, you need to change some settings
before importing a layout.
To do this, scroll down and make sure you
are in the Portfolio Options panel.
Here, you can change many of the layout settings
we saw on the builder for a specific page.
These will override any settings for this
page made in the Theme Settings.
Most default layouts work best with the sidebar
disabled as this is how they were designed.
So, we will disable it here.
If you wanted to create your portfolio from
scratch, you could start off with any of these
portfolio layout options.
We'll also hide the title.
To import the content, let's use the front-end
builder this time.
Let's save the page and open up the Themify
Builder by clicking this button.
Hover over Layout at the top and click Load
Layout.
Scroll through the layouts or search for something
like 'Resume' or 'Portfolio'.
As you can see, there are a number of portfolio
layout options to choose from with different
uses.
For example, if we preview Personal Portfolio
Layout, you'll see this portfolio page.
This page would make a good homepage for your
portfolio site but can be tweaked to act as
a portfolio page.
If we go back to the layout, you'll see a
much simpler portfolio page that could work
for a design agency.
Lastly, we'll view this parallax portfolio
page which you can see is filled with cool
parallax effects.
We'll select it as our portfolio page.
You can then save the page.
In the next section, we'll show you how to
use the Themify builder to customize your
pages and add in your own content.
You could apply these same lessons to your
portfolio pages.
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 create a resume page that will act as
a homepage for our portfolio site.
To do this, let's head to Pages and then delete
the existing Homepage.
Click on Add New. in the title, we'll call
it 'Home'.
Scroll down and choose the No Sidebar option
as well as select Yes for Hide the Page Title.
Save the page, then launch the Themify builder.
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
layout 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.
Once again, go to Load Layout, then search
for the Resume page.
Select Replace Existing Layout.
Once the Themify Builder is switched on, you'll
see a toolbar appear at the top with a '+'
icon on the 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 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 b=Builder documentation
for a detailed look at the toolbar and the
other aspects of the builder that we won'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.
Okay, next, if we hover over the image at
the top of the page, you'll see that the purple
bar with options appears.
This signifies a row.
You can also have sub-rows like these within
a row, also signified by purple options.
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).
To the right of the column options, we've
got the options for the row itself.
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.
Fullwidth Row Container sets the row to fullwidth
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 the columns or modules to push
them off edge of the browser window.
Fullwidth Content is the last option and makes
the row fullwidth and pushes the columns within
the row to fullwidth 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.
Later on, we will create a menu navigational
link that points to the section of the page
with an ID or anchor name of Services by giving
it a link target of '#services'.
If we scroll down to the Services section
and click on the Row Options for the section,
we'll give this row an Anchor name of services.
We will link to this later on when we get
to creating menus.
Another common use case for this would be
linking to our Contact Us section on the same
page with a contact form.
All right, back to our 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 saved.
Your options include an image, 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.
You might want to replace this one with a
photo of you, for example.
Below that, you could set the 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 these elements in the section.
We won't go through all of the settings as
we'll go through a practical example 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
a 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 are the ability
to duplicate the row, import or export the
row, or delete the row.
If we go down to the Services section and
hover over the section, you'll see that another
purple 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
as well as the other options.
Below that, you'll notice at the sub row has
two columns, each with an icon and a piece
of text.
You'll notice that each column has its own
styling options.
You can also import, export, copy or paste
the column.
To delete or add a column, you will need to
change the row column settings.
Within the column, you'll see that the image
and text modules have their own setting options.
This is a feature module, which basically
acts as a blurb with an icon and some text.
To edit any module, in this case the feature
module, you can click on the Edit icon or
simply double-click on the module.
To amend the text, type in any 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 heading you want to use in
the Feature 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 other text attributes like color,
font family, etc.
You can go through the rest of the options
for each module.
You also have the visibility options and animation
options for that module like you did for the
row.
For example, if we set the animation to 'slideInRight',
select Save, save the page, and then open
up the page in another tab, you'll see that
the features 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.
And 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.'
part of the URL, just everything after the
'.com' or root domain.
So, in this case, '/contact'.
This is what's called a relative path URL.
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 drop-down
in 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.
Remember to save any changes you made to a
module.
If we double click on the text module above
that, you'll see that while there are different
setting options, they are very similar and
function in the same way as 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, but what if we want to change an
existing layout?
Let's scroll down to the next section.
Here, we have a single column section with
a piece of text.
First, let's duplicate this row by hovering
over the Row Settings in the top right and
clicking 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 and select the Two Even Columns
option.
Great.
Now we can add an image to the right by hovering
over the '+' icon here, making sure we are
in the Module tab, and dragging the image
module into the new column.
You can either upload an image directly or
choose one from your media library.
You can then style the image by adding a module
title, select a Drop Shadow, Rounded Corners,
Border, or making the image a Circle.
You can use the height and weight to adjust
the size.
We'll delete our first row and keep the second
one.
If you want a new row, you can either scroll
down to the bottom and create one from scratch
by clicking on the '+' icon here and adding
in the modules you want to use.
Alternatively, you can leverage one of the
pre-designed rows by clicking on the '+' 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.
Okay, so hopefully you're starting to see
how easy it is to create a beautifully designed
website with just a few clicks.
Remember to always save your changes when
you're done, and if you're happy with your
page to navigate back to the backend and publish
it so the changes go live.
The last thing we will need to do is set a
homepage for our website.
To set this page, or any page as the homepage
of your website, hover over Settings in the
admin menu and click on Reading.
Under the 'Your homepage displays' option,
make sure that 'A Static Page' is selected,
and then choose the page you want to set as
your homepage from the Homepage drop-down
list below.
In this case, we want to set Home as our homepage,
so we'll select it and then click Save.
Let's go through the process of creating a
new page from scratch.
To do this, we'll head back to All Pages.
From there, select Add New.
We'll give the new page a name.
We'll just calls ours 'Test'.
Before we create a new page, let's once again
disable the sidebar and hide the title, then
save it.
Once that's done, 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 the layout
from scratch or use one of their pre-built
rows to start our design by hovering over
the '+' icon at the top, navigating to the
Rows tab, and then choosing a specific row.
In this case, we'll scroll down to the 'Full
Height Hero Banner - Center' 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 pre-designed rows, you
can also create your own layout from scratch.
To demonstrate this, we'll recreate 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 two text modules
and a button module.
Add in some text and align it to center.
We will also set it to Heading 1.
Save the text module.
We'll add in another text module, type in
some text and center it.
Then, drag in our button module to sit below
that.
Set the shape to Rounded.
We'll make this a Contact Me button and enter
'/contact' into the link field to link to
our Contact page.
Go to the Styling tab and set Alignment to
Center under the Font section once again.
We'll then save the button.
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 Fullwidth Row Container
Row, and the Row Height to Full Height.
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 a to Full Cover, which we will need
to replicate.
If we click on the Row Overlay, we can see
that it's using a row overlay to make the
content stand out more.
Okay, so let's scroll down to the section
we are creating and click into the Row Settings.
Firstly, let's set the Row Width to Fullwidth
Row Container row and the Row height to Full
Height.
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 section, we'll
set the color as black and then adjust the
opacity to be around 50%.
We'll just make it look similar.
It doesn't need to be exactly the same.
Then, save your settings.
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, the
font to Oswald and then select Save.
Then we'll go into the second text module,
also set the color to white, and save it.
Lastly, double click on the button and make
sure that the shape is set to rounded.
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.
Okay, 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.
Now that we have all our content in place
on our portfolio site, we can move on to how
to create your own navigational menus to make
it easy to navigate to the most important
parts of your site.
The first thing we should do is change our
header structure so that we can properly view
how menus, and especially mega menus work.
To do this, go to the Themify Settings by
hovering over Themify Ultra in the admin menu
and clicking Theme Settings.
Go to the Theme Settings tab and expand the
Theme Appearance.
Then, scroll down and change the header to
the horizontal header layout.
Save your changes.
To manage menus, hover over Appearance in
the admin menu and select Menus.
This is the Menus dashboard in WordPress.
The menu you are working with is on the right
and the items that you can assign to the menu
is on the left.
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.
We'll enable our Portfolio Categories so that
we can use this to organize our menu.
Under Screen Options, you can also enable
the ability to set a link target for a menu
item, which means whether the link opens in
a new tab or not, as well as assign CSS classes.
We won't cover CSS classes for this tutorial,
but 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,
and the Menu Settings at the bottom is where
you manage the location where the specific
menu will be displayed.
Rather than edit an existing menu, let's go
through the steps of how to create a new menu
and assign it as our main menu.
To create a new menu, click on Create New
Menu.
Enter a name for the menu.
This is for your reference.
Then, select Create Menu.
At the bottom of the page, select where you
want a specific menu to be displayed.
In our case, we'll select Main Navigation.
To add menu items to your menu, select the
elements from the left, then click Add to
Menu.
From Pages drop-down in the View All tab,
we will select our Home, About, Contact, Blog,
Portfolio, and Services pages by checking
the box next to each and clicking on Add to
Menu.
We can amend the order by clicking on the
menu item and dragging it into position.
From the Categories drop-down, we'll go to
the View All tab and select any of our blog
categories.
To add them to the menu, select Add to Menu.
You can add items as sub items of a menu item
by dragging them underneath it like this.
If you save the menu and preview it from the
front-end, you'll see that the blog categories
sit underneath the Blog menu item in a drop-down
menu.
If we go back, you'll also add your portfolio
categories to the menu and drag them into
place underneath the Portfolio menu item.
We can then create a mega menu for our portfolio
menu item by expanding it and choosing one
of the options from the Mega Menu drop-down.
We'll choose the Mega Posts option.
We'll then click Save Menu.
To preview what this looks like, we'll navigate
back to the front-end and refresh the page.
When you hover over the portfolio link now,
you'll see a mega menu open up.
The categories will be shown in a list on
the left and portfolios with your featured
images will be shown on the right.
If you click on one of the categories, you
will be taken to that category archive page
with all the categories underneath it.
The same goes for the Blog categories in our
menu.
Let's head back to the Menu section.
Once again, pause the video and create the
rest of your menu structure.
You'll create other menus like your footer
and sidebar menu exactly the same way.
When you're happy with the structure, you
can further customize the appearance of your
menu via the theme customizer by hovering
over Appearance in the admin menu and selecting
Customize.
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.
In this case we want to link to the Services
section on the page, so '/services', 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.
Let's go to the front-end to test our Services
link.
If you refresh the page and click on Services,
you'll see that it takes you down to the relevant
section.
Okay, let's head back to the menu.
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.
Once you've got your primary navigation menu
working the way you want, we can move on to
updating the sidebar and footer of your website
using widgets.
The sidebar and footer in WordPress are referred
to as widget enabled areas and allow you to
set a global sidebar or footer that appears
on all pages, posts, or archive pages where
a sidebar is enabled.
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.
On the left, you have all the available widgets,
and on the right all 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.
If you go back to your front-end, you will
see any widgets you added in the widget enabled
area.
Okay, so that's a quick 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 your social accounts, etc.
In the Themify Settings, or in the Page Options
tab for individual pages, you can change the
overall layout of your widget enabled areas
as well as where they will display on the
pages where they are enabled.
For more information on using the Themify
widgets, check the relevant section in the
documentation.
Once you've got your portfolio website looking
the way you want and you're ready to launch
your site, there's a few good practices that
you should follow to ensure you get the best
results.
If you want your blog to be searchable via
search engines like Google, then you will
need to index your blog.
To learn how to do this, we've added a link
to our video on the OHKLYN post here.
In this video, we'll show you step-by-step
how to add your blog to Google Search.
Similarly, if you want to monitor traffic
and user behavior on your blog, then you will
want to install Google Analytics.
Yes, we've created a video now to add Google
Analytics to your blog as well.
You can find the link on the OHKLYN post.
And that wraps up our How to Make a Portfolio
Website Tutorial Using WordPress.
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 site.
Your feedback is appreciated, so please leave
a comment below and tell us what you liked,
or if there was anything you found difficult
so that we can put together additional videos
to help support you as you build 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 (ohklyn.com), and until next time,
happy building!
