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

In this video, we’ll show you how to make a business website for 2018 and 2019 The right website will generate new leads, enhance your credibility, and become an asset that you own, and can leverage to showcase your business in the best light

For this business website tutorial, we’ll use WordPress and show you how to create a website that would typically cost two to three thousand dollars for less than a few hundred dollars A well designed website will stay current for at least two years, and for this step-by-step tutorial, we’ll use a premium WordPress theme to build a fully responsive website that looks great on all devices without needing to have any coding or design experience However, if you do have some experience, you’ll be able to use those skills to create the exact website that you want The website that we’ll be creating together is SEO friendly, features an optimized UX design, and includes an intuitive, beginner friendly, drag and drop page builder The theme we’ll use comes with a one click demo content feature, allowing you to make this exact website here with just a few clicks

You could also just as easily create niche specific websites such as: An agency style website Health or fitness website Restaurant, cafe, or bar website Or, a portfolio, solo entrepreneur style website In addition to that, the theme comes with over 65 predesigned layouts including: Corporate layouts Creative layouts And, product layouts that you can leverage on your website with a couple of clicks There’s a link to the live demo in the description below, or you can enter ohklyn o-h-k-l-y-ncom/go/ultra-demo into your browser By following the steps in this business website tutorial, you’ll get access to more than 15 different header and menu styles to help get the look you want These include: The standard layout with the navigation at the top (in a number of variations) Header and navigation on the left or right Header with a slide out navigation menu Header with a navigation menu overlay Or, a minimal header and navigation option, just to name a few

In addition to amending the global look and feel, customizing the pages and posts of your website is incredibly easy to do using the drag and drop page builder So, regardless of what type of business website you want to create, we’ll provide you with the tools you’ll need to do it In this step-by-step WordPress tutorial for beginners, we’ll show you: What to prepare, and the things you need to consider before creating your business website This step often gets missed, however, by planning ahead, we’ll save a bunch of time and frustration We’ll then secure your domain, set up your hosting account, and install WordPress

Review the WordPress fundamentals, and provide you with free access to a detailed overview (for those who are new to WordPress) We’ll then upload and install your WordPress theme Install any required plugins As well as explain what plugins are and how you can use them Lastly, we’ll go through the steps of customizing your business website where we’ll cover, creating and managing pages, posts, menus, widgets, as well as how to adjust the global design settings for your website

As part of this tutorial, you’ll get access to over 10 hours worth of free video content that covers how to customize every inch of your website, so, regardless of how intricate your website design is, you’ll have the tools to create it So, if you’re ready, then let’s get to it We’ve created a post that accompanies this video You can find this on the OHKLYN website (via the link in the description below) In that post, you’ll find the written instructions, as well as any links mentioned in this video

We would recommend opening the post in a new tab, and following along For this tutorial, we’ll use the Ultra theme by Themify (there’s a link in the description below) As part of the OHKLYN community, you’ll get access to a discount code that gives you 30% off the Ultra theme – Subscribe to the OHKLYN newsletter and you will be sent a welcome email with the discount code included For this tutorial, we’ll show you how to set up your WordPress website using Bluehost as your hosting provider With the link in the description below, you’ll get access to discount hosting plus a free domain name, if you haven’t purchased one already

We recommend Bluehost as they provide great quality hosting at an affordable price They have an intuitive user dashboard and will automatically install WordPress for you, as well as provide 24/7 support, making it the ideal option for beginners As an affiliate partner, they’ll also set aside a few dollars to help fund future free tutorials like this one – so, thanks for using the links provided If you require premium hosting, or faster hosting, we’ve included a discount link to WP Engine You will notice a difference in speed between the two providers, however, for most people, the more affordable Bluehost option will be fine, and you can always upgrade later on

So, before we get started on your business website, let’s go through what you need to prepare The biggest mistake beginners make, is failing to plan out what they want their website to look like before getting started Taking a couple of moments upfront to put together a game plan for creating your website will save you a lot of time, and create a much better result Firstly, let’s take a look at website design In this section we’ll provide an introduction to user experience (or UX) design

For this, take out a sheet of paper, or open your favorite drawing tool and sketch out the pages you want to include on your website and how they relate to each other Some of our favourite free tools for this include sketchio, and if you need to collaborate with others, check out InVision: The most common pages on a business website include a: Homepage About page Contact page Services page Gallery or client work page Blog (including the individual post pages, and category pages) And, a privacy or terms of use page Whichever pages you want to include, be sure to draw them out Next, for each page, create a rough guide for what will be on the page in terms of text, images, videos, and other elements, such as counters, bars, testimonial sliders, etc Will there be a sidebar? If so, on what side, and what will be included within the sidebar? For example, on the homepage: We might have a hero image at the top with a heading and a call-to-action, or CTA button

Next, we might have an intro paragraph of text on the left and a video on the right Below that, we’ll have a headline differentiating our business Then, we might have a row with three columns that feature an icon, title and blurb with ‘learn more’ buttons in each column You see where we’re going here Go through this process for each of the pages you want to create

When we get to the step on using the page builder, you’ll see how easy it is to create the pages, particularly if you’ve got it all mapped out already From a user experience perspective, you should think about the most important action that you want the user to take on that page, and make sure it’s both above the fold (meaning, it’s visible when the page first loads), and it’s obvious and /or repeated in a way that makes it easy for the user to engage Similarly, use buttons and your brand colors to draw the user's attention to important pieces of content As an example, on the OHKLYN post for this tutorial, you’ll see that we have the Bluehost link in a button, as clicking on this button is an action we want want users to take OHKLYN is an affiliate partner of Bluehost, and if a user clicks on this button, Bluehost knows that we referred them

In addition to the user accessing discount hosting and a free domain, Bluehost will set aside a few dollars from their marketing budget to fund future free tutorials like this one So if you haven’t already we appreciate you using the links provided Now, if this page was a landing page and not a post, AND if this was the number one action we wanted users to take, we would also include this button above the fold So, consider the actions you want users to take on your site as part of your planning For your business, it might be for the user to submit a contact form, download a pdf document in exchange for their email, subscribe to your newsletter, or pick up the phone and call you

Whichever it is, make sure it’s clear You also need to consider how users will consume your content Typically, content will be consumed from top to bottom and from left to right If your target market consumes content differently, make sure you’ve considered this Does the flow of information you’re presenting make sense? Does it logically take them through a process, or tell a story? Because, it should

[Introduction to brand design and content planning] Next is brand design and content planning Once you’ve outlined the pages you want to include on your website, and put together the rough layout for each page, you’ll then need to start writing the copy, sourcing or designing the images and graphics, and planning the navigational elements Go through each page layout, write the content for each section, and decide on the media elements you want to use On the OHKLYN blog, there’s a link to an article with a list of free high-quality stock photo sites with images that you can use for free on your website, as well as a few of the best stock photo websites where you can purchase more unique and higher quality images From a branding perspective, you will need: A logo, A Favicon (which is the icon that appears in the browser tab when a user visits your website), And, your brand color palette, including the hexadecimal color codes

We’ll show you how to customize your website with these colors later in this tutorial There are a number of great tools like palettoncom, Adobe color, or color-hexcom that you may find useful If you need help with copywriting, or graphic design, consider using a third-party platform to help get these things done professionally, and efficiently

We’ll link a few options below and on the OHKLYN post Lastly, is setting a budget for your website Being a business owner, budgeting isn’t a new concept As we said earlier we’ll show you how to create a website that would typically cost two to three thousand dollars if you were paying a web designer or agency You’ll be able to do this with a small budget of around $150 – $300, depending on the options you choose

This will include things like: Your website hosting: at about $3 – $20 per month depending on your hosting term A Premium WordPress theme: which is typically around $50 – $100 Premium images, if you want to use them Or, a graphic designer, if you want to create some custom graphics Pause the video if you need some time to put that together, or if you’ve already got that ready, we can move on to creating your business website with WordPress The first step is to register your domain (if you haven’t already), set up your website hosting account, and install WordPress So we’re all on the same page, let me quickly explain what they are Your domain, or url – is the web address for your website, and is what users will type into their browsers to access your site For OHKLYN it’s OHKLYN o-h-k-l-y-n

com Pick something that works for you Hosting, is what allows your website to be accessible to users 24/7 It’s the process of storing the content and data for your website on a web server, and serving it to users For this tutorial, we’ll walk you through getting started with Bluehost, as we believe it’s the best option for beginners

If you want a premium hosting solution, we’ll provide a link to WP Engine that entitles you to a discount, and we’ll provide a link to our video on how to set up a website with WP Engine The OHKLYN website is hosted on WP Engine, and our demo sites are hosted on Bluehost So, let’s go through the steps for setting up hosting for your website and registering your free domain with Bluehost Here is a list of the types of domains that are included for free, some of which include a: com

online store net org co

club Now, if you’ve already purchased your domain, or if you want to purchase an alternative top level domain (such as io, something relevant to your niche, or a country specific domain such as couk, or com

au), you can purchase that domain through a registrar like GoDaddy, Crazy domains or any other domain registrar (we’ll add some links below) If you go with that option, or if you’ve already secured your domain name, all you’ll need to do then is change what’s called the Domain nameservers to point at Bluehost (which will be your hosting provider) Fortunately, we’ve written an article, and a step-by-step guide on how to do this (we’ll add the link to this guide in the description box) To get started, follow the Bluehost link in the description below, or if you’re on the OHKLYN website, follow this button here We’ll then click on ‘Get started now’

You’ll then select the plan that’s right for you If you intend to have just the one domain, then the first option will be fine, alternatively, if you want to have multiple domains on the one hosting account like we do, then you’ll need to select one of the other plans You can always amend this down the track The great thing with Bluehost is that you get a 30 day money back guarantee on any plan, so you can get started risk-free For this example, we’ll go with the middle option

To get your free domain name, you’ll enter the desired domain name for your website into the ‘new domain’ field, and select the domain extension you want (for example com), and hit next If the domain name isn’t available, you’ll get an error message and will need to either select an alternate domain name, try to contact the owner of the domain to purchase it from them, or select another top level domain extension If you’ve already purchased your domain name, enter your domain in the ‘transfer domain’ field and select ‘Next’ Remember to review the article on how to change the DNS records to point at Bluehost

To set up your hosting account, enter in the required account information In the package information section, choose your desired hosting term and domain add-on preferences We recommend selecting ‘domain privacy protection’ so that the personal information that’s associated to your domain, isn’t publicly available (this is optional of course) Once you’ve entered in the required information, add your payment details, review the terms, and select ‘Submit’ Once you’ve done that, you’ll be taken to this page here

You will have been sent a confirmation email to the designated email address on the account As well as the WHOIS verification email – follow the link in that email to verify the email associated to your new domain You will need to create a password for your hosting account To do that, click on ‘create your password’ Make sure to pick a secure password, you could use the suggest password tool to help you with this

Once you’ve entered in your password, review the terms of use, and select ‘Next’ You will then be able to login to your Bluehost dashboard As part of the new Bluehost offering, WordPress will automatically be installed on your new domain If you’ve registered your domain elsewhere, you’ll need to amend the DNS records to point at Bluehost and install WordPress using the Bluehost one-click WordPress install For the steps on how to do this, review our article on the OHKLYN blog (the direct link will be in the description below)

You can choose to install one of the free pre-selected WordPress themes on your domain However, with WordPress themes, you typically get what you pay for As premium themes are regularly updated when WordPress changes, they’re often more secure, they provide you with access to support, as well as a greater range of design and customization options So, for this tutorial, we’ll use a premium WordPress theme, and select ‘skip this step’, WordPress will now be installed on your domain To access the back-end of your WordPress website, click ‘start building’

This will prompt a guided tour, which you can choose to run through or not We’ll go through this in our tutorial, so we’ll click on ‘I don’t need help’ This will take you to the Bluehost tab within the back-end of your WordPress site To access your WordPress dashboard, click on ‘dashboard’ in the menu on the left There will be a number of notifications, that you can action, or dismiss by clicking on the ‘x’ in the top right corner

You can amend what’s visible on your dashboard by clicking on the ‘screen options’ dropdown in the top right, and checking or unchecking the boxes A number of additional plugins will be installed You can view these by hovering over ‘plugins’ in the admin menu on the left, and selecting ‘installed plugins’ In addition to the standard WordPress plugins, Bluehost will install, JetPack, Mojo Marketplace, OptinMonster, and WPForms You can leave these active, or choose to deactivate and delete these plugins

we’ll leave this up to you We’ll delete ours, as we like to use as few plugins as possible This can be done in bulk: By selecting the checkbox next to the plugin, Choosing deactivate from the bulk actions dropdown and then clicking apply We’ll then delete all of the selected plugins By selecting them and hitting delete

Then return back to the WordPress dashboard If we enter our domain name into a browser, we’ll see that WordPress is now installed Congratulations! You officially have a new website! It’s not much at the moment, but you’re a lot closer than you realize As part of this process, we’ll provide a link to our video on how to set up your free SSL certificate which will encrypt the data on your website This is good practice as it improves the security of your website, improves your search rankings as Google prefers secure sites, and allows you to take payments on your website as well, in the event that you want to include an online store as part of your website

For specific eCommerce tutorials, check out our free WordPress tutorials page on the OHKLYN blog, or on our YouTube channel Alright, we’ve gone through the first two steps which were preparation, as well as registering your domain, setting up hosting, and installing WordPress We can now move on to the next step Whenever you want to log into your WordPress website, enter your domain and add /wp-admin to the end Such as example

com/wp-admin Then enter your username and password set up in the prior step You’ll then be taken to your WordPress dashboard The first time you log in, depending on which hosting provider you went with, there may be a walk-me-through it feature, or welcome series which you can choose to follow along or not We’ve installed WordPress in a development environment

It’s a clean WordPress install so it should look the same, however if it’s slightly different, don’t worry – the fundamentals will all be the same We do a lot of WordPress website and blog development for clients, webinars, and live workshops and prefer to work in a staging or development environment before pushing a site live However, it isn’t always necessary, and for the purpose of this video, you can build your website on your live site We would however recommend installing a coming soon plugin so you can launch your site properly once you’re ready for the world to see it We’ll add a link to a video on how to do this in the description below

For similar videos and tips as you build out your website, subscribe to our YouTube channel and check out the videos section of our channel The WordPress dashboard or admin panel is broken down into three main sections: at the top we have the WordPress toolbar, the menu or admin menu is located on the left-hand side, and the main admin area is in the middle, where we'll do most of our work We’ll give you a brief overview of each section now – however, for a more detailed overview, watch our free ‘how to use WordPress’ tutorial, which is an introduction to WordPress for Beginners This is intended to get you up to speed on the fundamentals of how WordPress works in about an hour Alright, so the WordPress toolbar at the top is dynamic, and adjusts the available options depending on which page you’re on, and if you’re viewing the page from the front or the back end

The Admin menu located to the left of your dashboard is separated into three main sections, these are: The Dashboard section, the Content Management section, and the Site Administration section The Dashboard section provides easy access to the Dashboard, updates, and additional plugin features The Content Management section is where you create and manage Posts, Pages, Media items, Comments and additional plugin features The Site Administration section is where you configure the design and appearance settings for your website (including selecting the active theme for your website, creating and managing menus, widgets, and customizing your website’s theme) It’s also where we manage plugins, users, control global WordPress settings, and activated theme and plugin extensions like SEO, Social sharing, theme specific settings, and security

We’ll go through some practical examples for each of these in the coming sections once we upload our theme and start working with content However, one thing we recommend doing before we move on is updating the permalink structure for your website This will impact how your url strings will be created for pages, posts, etc To do this: Hover over ‘settings’ in the admin menu (this is where you’ll manage your global WordPress settings, we cover these in detail in our ‘how to use WordPress’ tutorial), then select ‘permalinks’ The default option, leverages a more journal approach featuring the date in the permalink

However, the more common option and what we’d recommend from an SEO and UX perspective, is post name So we’ll select that option And save our changes You can learn more about each option under the help tab and choose the best option for you We recommend doing this before you start creating content so that your URLs are created the way you want

Also, if you want to update your user profile, or add users to your website, you can do this by hovering over ‘users’ in the admin menu on the left, and selecting from the options here Alright, moving onThe 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

Oknow that we’ve touched on the fundamentals of WordPress, let’s move on to choosing and uploading your WordPress theme A WordPress theme is a group of files that work with the underlying WordPress software to enhance the design and functionality of your WordPress website

For a more detailed overview, check out our ‘What is a WordPress theme’ article on the OHKLYN blog There are both free and premium themes that you can use for your website The main benefits of using a premium theme is enhanced security, access to support, the inclusion of more extensive theme documentation or instructions, extended functionality, and access to demo content and pre-built layouts – Which for around $50-$100 is good value Premium support packages can cost $50/mth, so the fact that this is included in a premium theme, makes it a smart investment On the OHKLYN blog we’ve analyzed hundreds if not thousands of WordPress themes based on Speed, Design, Ease of use, Mobile Responsiveness and Functionality which you can access via the ‘WordPress Theme Reviews’ category of the OHKLYN blog

For this tutorial, we’ll use the top rated business website theme – Ultra by Themify For 30% OFF, subscribe to the OHKLYN blog and you’ll be sent a welcome email with an exclusive discount code The link to the theme is in the description below, or if you’re following along on the OHKLYN post, you can click on this button From here: You can either purchase just the Ultra theme (with or without the photoshop files), Or under pricing, you can select one of their club memberships, which gives you access to all of their themes Depending on which option you choose, you’ll get various inclusions for the year, or you can select their lifetime club, which gives you access to everything for life

We have their lifetime club as we use a number of their themes, but pick what’s right for you Enter in your information If you’ve subscribed to the OHKLYN blog, add the discount code you received in the welcome email, and select ‘next’ Add your payment information Then log into your Themify dashboard The next step is to download a copy of the Ultra theme: From your Themify dashboard, scroll down to the themes section Click on the Ultra theme link to download the theme file (which will be a zip file) You will upload the theme file as is, so there’s no need to unzip the file Next, we’ll upload the Ultra WordPress theme

If you want to install a child theme, you can either use our free child theme generator, located under ‘Resources’ in the OHKLYN menu, by following the instructions Alternatively, you could also use a plugin called Child Theme Configurator to help set this up This is best practice but not essential To upload and install your WordPress theme: From your WordPress dashboard, hover over appearance in the admin menu on the left, and select ‘themes’ From here, select ‘Add new’ Then click, ‘Upload theme’ Select ‘choose file’ Navigate to the

zip file you downloaded earlier, and select ‘Open’ Click ‘Install now’ This will start the process to upload and install the Ultra WordPress theme Once the theme is successfully installed, click ‘activate’, and you’re new theme will now be live on your website You will then be taken to the Themify settings page Once the Ultra theme has been installed, you can navigate back to this page at any time by hovering over the newly created tab called ‘Themify Ultra’, and selecting ‘Themify settings’

The first thing we need to do is install and activate any plugins that are required by the WordPress theme we’ve just installed In this case, we’ll see a notification at the top of the page To do this: Click on ‘begin installing plugin’ Select the required plugins and click ‘install’ That will install the required plugins We’ll click on the option to ‘Return to Required Plugins Installer’ To activate the plugins we’ve just installed, select the plugins and select ‘activate’ Once any required plugins are activated, we can either return to the dashboard, or navigate back to the Themify settings by hovering over ‘Themify Ultra’ in the admin menu, and selecting ‘Themify settings’ You’ll notice that there are a number of tabs within the Themify settings panel These include ‘settings’, ‘skins & demos’, ‘transfer’, and ‘update’ We’ll go through the settings tab in detail shortly as this is the main tab for controlling the global theme settings for your website

The ‘update’ tab is used to manage the version of the Ultra theme installed on your website The ‘transfer’ tab allows you to import and export data for the Themify settings panel The tab we’ll look at first is ‘skins & demos’ This tab allows us to leverage demo content to create a well designed and functioning website in minutes, with just a few clicks Here, you have the option to import all the demo content, theme settings, widgets and menus to replicate exactly what you see on the Themify demo sites that can be viewed by: Clicking on the ‘view demo’ button from within the ‘skins and demos’ tab below each example, Or by following the link in the description below, or on the OHKLYN post here to the Ultra page, And then scrolling down to the demos section and following the link to the specific demo site

As part of this theme, you also get access to over 65 professionally designed page layouts that you can use to create your website from scratch if you choose not to use one of the pre-built layouts, or if you’ve got existing content on your website We’ll cover off how you can use these shortly To select one of the skins: You just need to click on the skin you’d like to use and select ‘save’ If we view the site from the front end, you’ll see that that skin has been applied If we select another demo skin and hit ‘save’ Then refresh the page from the front end, you’ll see that it changes the look of your website Once you’ve clicked on the skin you want to use, for this example we’ll use the ‘accountant’ skin, you’ll notice that you get the option to import the demo content

If you’ve already got content on your website, you won’t want to import the demo content However, if you’re starting from scratch and you want to use one of the demos as a starting point for your website: Then you’ll select ‘import’ to import the demo content into your website Depending on which demo you want to import, you will be prompted to download additional Themify builder plugins, which you will have access to as part of your Themify membership Before you do that, decide if it’s a feature you want to include on your site For example, the ‘Accountant’ demo includes the builder maps pro plugin, which you may want to use

However, if you don’t want to include a map on your website, then you won’t need to install that plugin To install the required plugins: From the Themify members area, scroll down to the ‘Builder Add-Ons’ section To download each plugin required for the demo you want to use, simply click on the specific plugin link to start the download Repeat this for every required plugin you want to use To upload and install the required plugins: From your WordPress dashboard, hover over ‘plugins’ in the admin menu, and select ‘add new’ At the top of the page, select ‘upload plugin’ Click ‘choose file’ Navigate to the zip file for the first plugin you want to upload, select the plugin zip file, and hit ‘open’ Then click ‘install now’ Once the plugin has been installed successfully, select ‘activate plugin’ Select ‘add new’ and repeat the process for the remaining plugins

Pause the video to finish the steps Great, let’s move along to the next step Once you’ve installed the required plugins, navigate to the Themify settings panel by hovering over ‘Themify Ultra’ and selecting ‘Themify settings’ Head back into the ‘Skins & Demos’ tab or refresh the page, and we can now select the demo we want to use In this case, we’ll go with the ‘Accountant’ skin, and click on the ‘import’ option to bring in the demo content for your website

Once that’s done, the page will refresh and we can go to the front end of your website The skin and demo content is now imported and ready for us to customize This is a great way to get your website up and running within a few minutes, with a number of layouts pre-created, making it easy for you to build out the rest of your website We’ll customize a few elements of this design to match the look we created for the hero image of this tutorial, however, if you like the default design, stick with that You’ll notice that this demo leverages a Google map, and at the moment it’s showing an error

This is because we need to add a Google maps API key That sounds complicated but it’s actually really simple If you don’t want to include a Google Map on your website, you can ignore this and just delete that section However, if you want to include a map: From the Themify settings, click on the ‘Themify settings’ panel Scroll down and click on the ‘Google Map’ option On this tab, there’s a field to add your Google API key, and below that, there is a link that shows you how to generate your API key Follow this link and go through the steps to generate your API key

Once you’ve created your API key, copy and paste it into this field and hit ‘save’ Your map will now be working We’ll go through how to customize modules later which will allow you to set the address, etc As well as provide a more detailed overview of the Themify settings options But for now, let’s head back to the demo content

If you decide you don’t need the imported posts and pages, in the ‘Skins & Demos’ tab, you can select ‘erase’, and that will remove the content, but leave the Themify panel settings and widgets, etc in play Ok – let’s move on to customizing your website So far, we’ve gone through setting up your business website with WordPress, uploading the theme and required plugins, and explored leveraging the demo content to get up and running quickly In this section we’ll look at how to create pages and posts, as well as how to create and manage menus

We’ll then explore the global theme settings and customization options, where you can upload your logo and favicon, set your brand colors, amend the typography settings, and choose the default header, page and post layouts for your site As part of that, we’ll look at widgets and how you control your website’s sidebar and footer options We’ll then show you how you can access over 10 hours of free content specific to your new website, so that you can go through every element in as much detail as you’d like Lastly, we’ll advise you on some best practices and next steps such as: How to ensure your website is discoverable via search engines such as Google And how you can leverage Google Analytics for free to provide insights on your website traffic and users

So firstly, let’s take a look at how to create additional pages, as you will no doubt want to include pages that aren’t included in the demo site Or, if you’re not using the demo content, you’ll want to know how to create the pages you want, as well as how to either leverage the pre-designed layouts, or build out your design using the drag and drop page builder For this example, we’ll create a new page, and set this as the homepage for our website so that you’re aware of how the homepage is set for your website To create a new page: From your WordPress dashboard, hover over ‘pages’ in the admin menu on the left To view all the pages on your website, click on ‘all pages’ Alternatively to create a new page, click ‘add new’

You could also hover over the ‘+ new’ option at the top of the page and select ‘page’ Or, from the All pages tab, click on the ‘Add new’ button at the top The first thing you’ll want to do is give your page a name If you’ve selected ‘post name’ as your permalink structure, this will be used to create the url for this page For this example, we’ll call this ‘Home Alt’ If you’re new to WordPress, we recommend watching our ‘How to Use WordPress’ tutorial where we cover the default WordPress options available when creating pages On the right-hand side, you can select if you want to assign a parent page

This will impact the site hierarchy as well as permalink structure In this case, we’ll leave the default of ‘no parent’ If we scroll down, at the bottom you’ll see the ‘Themify custom panel’ We’ll go through setting the default global page settings shortly, but you’re always able to overwrite these for individual pages here We’re going to load in one of the predesigned layouts, which is a full width layout with no sidebar, so in the page options tab, we’ll set the ‘sidebar option’ to ‘no sidebar’

And, we’ll set the content width to full width We’ll also select ‘yes’ for the hide page title option This will create a clean slate for us to bring in the pre-designed layout, To add one of the predesigned layouts, scroll back up to the top and click on the ‘Themify builder’ button to launch the front end builder If it hasn’t already launched, click ‘turn on builder’ in the toolbar at the top In the Themify builder menu at the top, hover over the layouts icon and select ‘load layout’ You can either search for a specific layout, view the layouts by category, or scroll through the available options You can preview layouts by clicking on the search or view icon In this case, we’ll select the ‘Innovative Corporate’ layout by clicking on the layout

You’ll be asked if you want to replace or append the layout, we’ll select ‘replace’ And the layout is now loaded into the page We’ll go through a practical example of using the page builder shortly For now, we’ll save the page, and go to the back end by clicking on ‘edit in back end’ This takes us to the backend version of the Themify builder for the page that we’re editing

The back end editor is located in the Themify builder tab of the ‘Themify custom panel’ which we’ll explore further in the next section To set this page (or any page) as the homepage for our website: We’ll hover over ‘Settings’ in the admin menu and click on ‘reading’ Under the ‘Your homepage displays’ options, make sure that ‘a static page’ is selected and then choose the page you want to set as your homepage from the homepage dropdown list below In this case, we’ll choose the page ‘Home Alt’ Then select ‘save’

If we go to the homepage of our website, we’ll see that the ‘Home Alt’ page we just created is now our homepage We’ll go back into reading options and change this back to the ‘Home Accountant’ page Go through and create the rest of the pages that you want to include on your website by following the same process Paint in broad strokes for now, as we’ll go through how to use the Themify builder to customize the pages of your website shortly We’ll focus on getting your website structure, and the critical elements right first, such as pages, menus, your logo and branding, as well as the global layout settings

If you want to leverage a blog as part of your business website, you’ll create blog posts the same way The only difference being that you’ll need to set up categories first by hovering over posts, and selecting ‘categories’ Here is where you’ll add the blog categories that you’ll assign your blog posts to By entering the category names And selecting ‘add new category’ Repeat this process for all the categories you want to include in your blog Once you’ve created your categories, to create a new blog post, hover over posts in the admin menu and select ‘add new’

You’ll add a title And your content Select the category for the post on the right-hand side Assign a feature image by clicking on the ‘set feature image’ option on the right-hand side And either uploading an image or selecting one from the media library Then, preview or publish your post The default blog page will feature your recent posts, unless you create a custom blog page and set it as your blog page via the reading settings tab, like we just did for the homepage For more details on anything we covered (or didn’t get a chance to cover) in this tutorial, follow the links to the Ultra or Themify Builder documentation pages Here, you can access over 10 hours of detailed content, covering every element of this theme Pause the video and create the pages, posts, and categories you want to include on your website before we move on to the next step

By now, you should have roughly created the pages, posts and categories for your website Don’t worry if it’s not perfect or if you’re not 100% sure on the exact structure – remember, broad strokes What we’ll do now is go and create the menu structure for your website, so you can easily navigate through your website while you continue to build out your layouts and content Menus in WordPress are created and managed in the dedicated menus section which you can access by hovering over appearance in the admin menu, and selecting ‘menus’ On the left, you have the available content that you can add to your menu, such as: Pages Posts Custom links Categories, etc

To add more options, click on the ‘screen options’ tab at the top and check the boxes next to the elements you want to add to your menu For example, tags Under screen options, you can also enable the ability to set the link target for a menu item, which means whether the link opens in a new tab or not, as well as assign CSS classes, which is slightly more advanced than we’ll cover today However, if you’re interested in learning some HTML and CSS fundamentals for WordPress, register for one of our courses at coursesohklyn o-h-k-l-y-n

com Back to the menu options: On the right, you have your menu structure If you uploaded the demo content, a main menu and a footer menu would’ve been created for you If not, we’ll need to create a new menu by clicking on ‘create a new menu’ Enter a name for the menu (this is for your reference) Then select ‘create menu’ Down the bottom, you can select where you want this specific menu to be displayed as either the main navigation menu located here Or the footer navigation menu, located in the footer of your website We’ll set this menu as our main navigation menu To add menu items to your menu: Select the elements from the left Then click ‘add to menu’ You can rearrange the order by clicking and dragging the menu items into place Similarly, you can create menu hierarchy by clicking and dragging the menu item across to sit underneath the item above For example, we’ll add the blog page to our menu Then add our blog categories as well And organize the categories to sit underneath the blog menu item If we save that and view our menu from the front Our menu items are now all there If we hover over blog, we see that the categories are sitting underneath the blog dropdown, and if we were to click on them, they would take us through to the category archive page and show the user all the posts associated to that category

If we head back to the menu options, one great feature of the Ultra theme is the ability to include mega menus which are great from a UX perspective as they allow us to show large amounts of information in an efficient way To show you what we mean: If we click on the blog menu item Under the mega menu option, we’ll select ‘mega posts’ from the dropdown And then hit ‘save’ If we navigate to the front end and refresh the page When we hover over blog you’ll see that we now have this awesome mega menu with the blog categories on the left, and when we hover over them, it shows the posts for each category, which the user can engage with directly This is a very cool feature and is something you can incorporate in a number of ways on your website You can also add custom links to your website’s menu To do this: Click on the custom menu link option on the left Add the URL for where you want the menu item to link to And the link text that you want featured in the menu Then click ‘Add to menu’ and drag it to where you want it to be positioned in the menu

If you want the custom link as an organizational tool and not a link, you can set the link url to a hashtag, and if the user clicks it, it will only reload the page they’re on There are a few instances when you may want to do this, so – now you know how To amend the footer menu, you’ll approach it in the same way: By either selecting the footer menu that was created with the demo content And amending the menu items, Or, creating a new footer menu following the steps we just went through Remember to refer to the documentation for further information regarding the menu options available with the Ultra theme We’ll now move on to the global theme settings where we can begin customizing your website to reflect your brand and design style

To access the Themify settings, from your WordPress dashboard: Hover over ‘Themify Ultra’, and select ‘Themify settings’ We’ll go through the ‘settings’ tab, and cover off the fundamentals you need to know The great thing about the Ultra theme is that there are so many options In fact we’d need more than 10 hours to cover every option, so what we’ll do instead is cover the things that will be important to everyone, such as setting your favicon, amending your website’s header and menu layout, and setting the default layout for pages, posts, and other global elements In the description below, and on the OHKLYN post, there will be a link to the Themify Builder documentation and detailed video tutorials, which we would recommend opening up in a new tab in case you want further clarification on anything Before we jump into the Themify settings, it’s probably best if we explain a few things first, to ensure we’re all saying the same thing

As far as published content goes, the basic architecture of WordPress includes static pages, individual posts, portfolio posts, and archive pages Static pages are the pages of your website where the content is relatively static For example your homepage, about, contact page, etc Individual posts are the blog posts you create that are relevant to your business, industry, or niche Individual posts are grouped by categories which serve as an organization tool, and provide additional context and meaning to users

Tags can also be added to individual posts Individual portfolio posts are most commonly used to showcase examples of work, or case studies, etc These function in a similar way to individual posts, where they are associated to a category Archive pages are typically the category pages and showcases the individual posts or portfolio posts associated to that specific category Essentially, these pages act as an archive of associated posts

For example, if you had an accounting business and included a blog on your website, you may have a category called ‘Advisory’ with a number of individual posts related to relevant issues and strategies that your firm advises on If you were to click on the ‘Advisory’ category link on your website, you would be taken to the ‘Advisory’ category archive page, which would display all the posts related to the category of ‘Advisory’ This page is what’s referred to as an archive page Ok, so hopefully we’re all on the same page, and we can now run through the Themify settings Within ‘settings’, the first tab we have is ‘general’

Here we’ll upload our favicon A favicon is the icon that appears in the browser tab when a user is on your website Your favicon image will need to be square, however it can be a png image if you want to include a brand element that isn’t square To upload your favicon: Click on ‘upload’ Select your favicon and hit ‘open’ Then click ‘save’ in the top right There are a number of options below which we won’t cover, however, we’ll draw your attention to the header code section which allows you to copy code snippets that will be added to the head tag for the pages and posts of your website

This is great for adding Google Analytics tracking code, or your Facebook pixel, etc If you need to add any code to the head tag of your website, this is where you do it, without needing an additional plugin As we mentioned, we’re only going to cover the things that are most likely important to everyone Review the rest of the settings in each tab on your own to see what’s relevant to you, and check out the documentation if you need further explanations The next tab is the default layouts

This is where we set the default layouts for pages, individual posts, and archive pages as we discussed before We’ll walk you through our preferred settings and provide some rationale, however, you choose whatever is best for you The first option is the Archive Sidebar Option A number of the layout options will include the placement of the sidebar on your website The sidebar in WordPress is referred to as a widget enabled area, and allows you to set a global sidebar that appears on all pages, posts, and archive pages – where a sidebar is enabled

Themify Ultra has two sidebar widget enabled areas that you can leverage – these are the standard sidebar and a narrow sidebar which you can include in your design If you’re new to WordPress, review the documentation to get your head around widgets and widget enabled areas as they are a powerful feature Widgets are managed in their own dedicated section which you can access by hovering over ‘appearance’ in the admin menu on the left, and selecting ‘widgets’ We’ll open this in a new tab: On the left, you have all the available widgets And on the right, are the widget enabled areas You’ll see the two sidebar areas, social widget area that sits in the header, footer social widget area, that sits in the global footer, and the two custom header widgets, that are used in the original demo to display the phone number and social icons above the navigation

If you imported the demo content, there will already be widgets added to the various sidebars and other widget areas If we go to the news (or blog) page of our site and click into one of the articles: On the right-hand side, this is the sidebar widget area If we go back to the widget panel, you’ll see that the widgets that have been added to this area align with what’s being displayed in our sidebar To add a widget to the sidebar, or any widget enabled area: Simply click on the widget on the left Select the widget enabled area you want to add the widget to And select ‘add widget’ Once the widget has been added, you can drag it into place Click on the widget to amend its settings Once you’ve updated the widget, hit ‘save’ To delete a widget, click on the widget Then select ‘delete’ One thing worth mentioning with this demo is that it’s using the header widget 1 area to display the phone number as part of the navigation This is a great feature if the primary objective of your website is for potential clients to call you directly

So, we’ll quickly show you how to update the phone number If you don’t want people to call your business, we’ll show you how to exclude this in the next section Let’s click into the header widget 1 area Within there, you’ll see that it’s using a text widget You could also use a custom HTML widget for this feature You’ll see that there’s an opening span tag, and a closing span tab Within the opening span tag, it’s using a Font Awesome CSS class to bring in the phone icon After the closing span tag, there’s an opening anchor tag (links are called anchors in HTML) Then there’s the anchor or link text, which in this case, is the phone number you want displayed And then there’s the closing anchor tag Within the opening anchor tag, between the two inverted commas or quotation marks there is tel colon then the number

Here is where you’ll update the phone number that will be called if the user clicks on a phone enabled device You can use visual separators, however, you can’t use spaces within this number To change the number displayed, you’ll amend the anchor text here You can use spaces, or even change this to a word such as ‘call us’ or whatever you like here Ok, so that’s a crash course on widgets, there are theme specific widgets down the bottom like the Themify social icons widget that you can add to the header or footer to link to your social accounts, etc

In the Themify settings, we’ll show you how to add your social media links so you can use this widget to easily include them on your website Let’s head back to the Themify settings For the Archive Sidebar Option, we’ll select the option with the sidebar on the right, as this is the most common option If we go back to an individual post, and click on the category that the post is associated to, it will take us through to the archive page This is the layout option that we’re talking about in this section Back to the settings, post layouts allow us to choose how we want individual posts to be displayed on archive pages

Pick whichever option you like the most Review the display options that sit below that, such as the ‘display content’ option, we would recommend showing just the post excerpt rather than all the post content Also, decide if you want to display all the post meta data, such as the author, date, category, etc The next group of layout options relate to single posts, which if we go to the blog page and select a specific post again This is the layout this section is referring to Once again we’ll leave the default layout, but pick whichever is best for you

Once again, go through the options below, and trial a few to see what works best Towards the bottom, we have the default page layout: We’ll set the Page Sidebar Option to no sidebar We’ll hide the page title on all pages And disable comments on all pages, as we want to work with a clean slate on all pages, and don’t want people commenting on any of our pages Comments on blog posts are fine, but we don’t want people commenting on our homepage for example Once you’ve made changes, select ‘save’ to commit changes The next tab is the portfolio layouts

If you want to include portfolio posts on your website, then follow the process we just went through and assign your prefered layouts for both portfolio archive pages and the single portfolio posts Most businesses will use portfolio posts to showcase client work or case studies, however, you could also use pages to do this Next, we have the Theme settings tab By default, The Ultra theme is fully responsive, however, here you can disable the theme’s responsiveness (which we wouldn’t recommend) Here you can also amend the responsive breakpoints which basically refer to the defined screen widths that represent, desktop, tablet, and mobile screens

Once again, it’s probably best to leave the defaults unless you have a specific reason to change them The section we will explore together is the theme appearance section Here, you can set the generic theme accent color and typography You have more control over these settings in the theme customizer panel, which we’ll cover off next, so we’ll leave this as is for now However, below that are the various header options you have available, which dramatically impacts the look and feel of your website

For example: If we change the header style from the ‘Header top widget’ option to the ‘header min bar’ option Then save the changes If we refresh the front end of our website You’ll see that the look of the whole site has now changed Let’s go back We’ll change the header to the ‘horizontal header’ option, and check the ‘Exclude Header Widgets’ option below to match the design from the hero image for this tutorial If you want the phone number for your business visible, then do not check this option Have a play around with the various options to see which one you like best Depending on which header you go with, the options below that will vary Many of the options will include the ability to disable the sticky navigation, exclude the site logo or tagline, as well as the option to exclude the search functionality or social icons Explore toggling the various options on and off to create a unique look Under theme appearances, you’re also able to pick your footer design from the options available Based on the design you choose, you’ll be presented with additional options: The widget component will be managed via the widgets tab we just explored The text components are managed by scrolling to the bottom of the theme settings page we’re now on, and adding your text to the fields In this example, included is the html for a copyright symbol Some text on either side of an anchor or link, that should look relatively familiar The only thing that’s different is the target html attribute which opens the link in a new tab when the link in clicked

(If it interests you, check out our html and CSS fundamentals for WordPress course at coursesohklyncom if you’d like to learn the fundamentals of HTML and CSS) The footer styling will be controlled via the theme customizer panel, which we’ll show you how to access in the next section The last tab we’ll go through together is the social links tab

We’ve covered how the social widgets can be added to the header or footer of your website via the widgets tab, and you know how to exclude social icons via the theme appearances section in the theme settings tab above In this tab, you’ll manage the social platforms you want to include on your website, how they’re displayed, and add the links to your accounts To add a new social platform, say ‘Dribble’: Scroll down to the bottom, and select ‘Add link’ Give it a title, in this case ‘Dribble’ Add your ‘Dribble’ link in the link field To insert an icon, click on ‘add icon’ Search for the icon you want to use, in this case ‘Dribble’ Then select the icon you want You can drag the box to rearrange the order Then hit ‘save’ If we refresh the page from the front, and scroll down to the footer (as we’ve excluded both the header widget and social icons widget option’ via our header section) The ‘Dribble’ logo is now present, and if we were to click the link, it would take us through to the link address we added To amend the details of an existing social link: Just update the details you want to change, for example, the link details Then select ‘save’ to commit the changes To delete a social link: Simply click the ‘x’ icon, Save your changes, And the social link is removed Ok, so those are probably the most important aspects of the Themify Builder

However, please go through the rest of the options and refer to the documentation for further details It’s worth noting that within individual pages and posts, you have the ability to override the Themify settings for a specific page, which is a really powerful feature allowing you even more control over the design of your website For example, if we navigate to the example ‘Home Alt’ page we created before: By hovering over pages in the admin menu and selecting all pages We’ll then click on the ‘Home Alt’ page Once we’re there, if we scroll down to the ‘Themify Custom Panel’ at the bottom of the page In the page options tab, and the page appearance tab, we can alter these settings for this individual page, which is a pretty cool feature Alright, let’s move on and take a look at the Theme Customizer

The theme customizer is where you have full access over all the global styling options for your website To access the theme customizer: From your WordPress dashboard, hover over ‘appearance’, and select ‘customize’ You could also hover over ‘Themify Ultra’ and select ‘customize’ Either way, it will take you through to the theme customizer You’ll notice that the Theme customize panel has two tabs, ‘basic’ and ‘advanced’ Most of what we need will be in the basic tab, however as the name suggests, we can access more advanced options in the advanced tab if required Now, we’re not going to go through all of the options, as we’d be here for a while However, what we will do, is go through the most important ones like adding your logo, setting your brand accent colors, and updating the global fonts, etc So that you have a solid understanding of how to use the theme customizer

For this section we’ll refer you to the theme customization and styling documentation, the link to which will be in the description below, and on the OHKLYN post This guide takes you through every option in the customizer to make sure you have all the information you need Let’s take a look at how we can add a logo to your new website: From within the Customizer, scroll down and click on the site logo and tagline option Here, we can amend the logo and the tagline for your website We’ll click on the site logo dropdown Here we can choose between using the site title as our logo, uploading a logo image, or setting no logo, we’ll choose the logo image option To add your logo, we’ll click on the plus icon We can either upload a logo image, or choose an image from the media library We’ll drag our logo to add it to the media library Set an Alt text (which is good practice for all images) And click ‘insert image’

This will add your logo to the header of your website It’s good practice to set a width or height parameter to ensure your logo doesn’t pixelate or look odd In this case we’ll set a width parameter of 200 pixels, by adding 200px to the first box If you want the logo to take the user to some place else other than the homepage when clicked, you can add a custom site logo link at the bottom To commit changes, remember to hit ‘publish’ at the top of the customize panel

And if we view the site from the front end, your logo is now added to your site Let’s go back to the theme customizer, and click on the site tagline option Here we can choose to include text, an image, or show no tagline We’ll choose to show no tagline However, if you want to include a tagline on your site, here is where you’ll do it

Once again, publish any changes We’ll minimize the site logo and tagline options panel, and we’ll scroll up to the accent styling tab which is where you’ll add your brand colors if you want to include them as accent colors on your website To do this: Click on the accent styling options dropdown Here we can set our accent font, background, and link color by clicking on the color selector box You can either select a color, and its opacity Or, enter in the hexadecimal or rgba color code of your brand color You’ll see the elements this affects in the preview panel on the right Remember that these are global changes and will be applied to your entire site That being said, you are able to overwrite these settings via an individual page’s Themify custom panel, or via the Themify builder itself

You can amend the header background color and other elements via the header options dropdown by selecting the header wrap option You can set the background color here Similarly, you can amend the sticky header options, by following the same process in the sticky header options panel The sticky header is the navigation header that sticks to the top of the page as the user scrolls down the page This can be disabled via the Themify settings panel as we covered earlier The best way to get up to speed with all the available options is to have a play around, and see what works best for your design Reviewing the documentation and video guide for this section is also a great way to explore your options further The last thing we’ll cover in this section, is how to amend the global typography settings for your website

To amend the body and paragraph font: Scroll up to the top of the customizer, and click the body options panel Then choose the body font option Here you can choose from a web safe font, or a number of Google fonts Set the default paragraph font size, line height, font weight, letter spacing, as well as a number of stylistic options, and the font color at the bottom As an example, we’ll add a strikethrough to the body font You can see that the changes are previewed in the right-hand panel We’ll undo that by clicking on the strikethrough option, and minimize the body options panel We can do the same thing to set our global heading styles To do this: We’ll click on the headings option In the preview panel on the right, we’ll scroll down to the first section of the page with the title ‘Accounting Services’ If we right click, and inspect this heading, we can see that it’s a heading 2 or a h2 If we want to style all heading 2’s in a certain way, we can click on the heading 2 font option dropdown And let’s set the heading 2 font family to something obvious like ‘dancing script’, by selecting it from the dropdown You’ll see in the preview pane that all the heading 2’s or h2s on the page now have that font To remove that, just clear the field, and the font will resort back to the default You can also adjust the font weight, line height, etc to get your design looking just the way you want We recommend setting your global font styles here as opposed to doing it on individual pages, primarily because, if you change your mind later and want to adjust anything, you only have to do it in one place rather than on every page It will also ensure your design is consistent throughout your website

Ok, hopefully you’re feeling relatively confident to go and customize your website further The only way to get good at this, is to get your hands dirty and play around with the various settings to find out what’s right for you Once again, review the customizer tutorial and documentation for more details on any of the settings Remember to publish any changes you’ve made before closing the theme customizer panel Things should now be starting to take shape, and we can move onto the most important section, which is building out your page layout designs and populating your website with content

For this, we’ll go through the fundamentals of the Themify builder, and show you how to access the free tutorial content covering all the features you’ll need to build out the pages of your business’s website To ensure you’re comfortable using the Themify Builder, we’ll go through an example of how to customize one of the pre-built layouts to suit your website design We’ll also show you how to create a page from scratch using the Themify builder modules and pre-built rows Let’s jump into the ‘Home Accountant’ page we created earlier, so that we can explore the Themify Builder: We’ll hover over pages in the admin menu, and select ‘all pages’ From here, we’ll select the ‘Home Accountant’ page that was created as part of the demo content You can follow along with the ‘Home Alt’ page if you didn’t import the demo content

To launch the front end version of the Themify Builder, click on the ‘Themify Builder’ button Then click the ‘turn on builder’ option from the toolbar at the top if it hasn’t launched already This will activate the drag and drop page builder, which is one of Ultra’s best features In the description below, and on the OHKLYN post, you’ll find the link to the Themify builder documentation, which includes a detailed tutorial and guide for the Themify Builder As everyone’s needs will be different, it wouldn’t make sense for us to go through all of the options here Instead, we’ll cover the fundamentals of how to use the builder, and get you up to speed with the most common features

If you want to dive deeper into anything along the way, refer back to the theme documentation that we’ve provided the links to The best way to think about a web page is in terms of rows and columns, or as a grid If you’ve sketched out a rough guide of the layouts for each page on your website, then creating them using the builder will be easy If you haven’t done that yet, we’d recommend pausing the video and doing that now, as it will make the process much easier Let’s take a look at our sample ‘Home’ page: Once the Themify Builder is switched on, you’ll see a toolbar appear at the top with a ‘plus’ icon in the top left and a save button on the top right

The save button is used to commit any changes you make to your website, and if you hover over the + icon in the top left, you’ll see a panel appear that shows all the available modules you can add to your website By clicking on the rows tab within there, you can see all the pre-built rows that you can leverage to speed up the process of creating your website Here’s a tip, don’t look at the content of the pre-built rows, as the content can easily be changed Look at them in terms of their row and column layout or structure Refer to the Themify Builder documentation for a detailed look at the toolbar and the other aspects of the builder that we don’t cover in this tutorial

Similarly, follow the link on the OHKLYN post to the builder modules documentation This walks you through every setting option for the modules available to you via the builder Ok, next: If we hover over the image at the top of the page, you’ll see that a light grey bar appears This signifies a row On the left-hand side of the bar we’ve got the column options for the row

Here we can choose how many columns we want to include in this row (up to six) On the right-hand side, the first icon is our row options Within there, we can set our row width to either the: Default: this sets the width of the row to the default row width for the theme This can be amended via the Theme Customizer panel, under the advanced options (if required) Full width row container: sets the row to full width so that when you apply a background image or color, it covers the full width of the browser The content containers within the row however, are set to the row default width, which is nice, as you don’t need to worry about adding padding to columns or modules to push them off the edge of the browser window Full width content is the last option and makes the row full width and pushes the columns within the row to full width as well

Below that is the row height options, the ability to add a CSS class, and the option to add an ID or anchor name to the row The most common way to use the Row Anchor is when you want to link from one section of the page to another section of the same page You’ll notice that in this example, if we double click on the ‘book appointment’ button under the heading, this will open the button settings Here, you’ll see that the link address is ‘hashtag appointment’ This is linking to the section of the page with an ID or Anchor name of appointment If we scroll down to the bottom of the page to the ‘appointment’ section, and click on the row options for this section You’ll see that this section has a row anchor name of ‘appointment’ If we open up this page in a new tab And click on the ‘book appointment’ button You’ll see that it takes us down to the appointment section, where the user can then enter their contact information and message Ok, hopefully that makes sense and you can see how you can use that technique You could also add a custom link to a menu using the page url with the hashtag and anchor name to link to a specific section of your page from the menu This is how the navigation works for one page websites that include a navigation menu

Alright, back to our row options at the top: The next option is the styling options, here is where you control the design settings for the row In this example, if we click on the background option This is where the background image is being set Your options include an image or background color, gradient, video, or slider To remove the background image, you would click on the ‘x’ You could then either paste an image or video url, upload an image or video, or select one from your media library, if you’ve already uploaded one Below that, you could set a row overlay color or gradient, as well as an overlay on hover Below that are the font settings for the row, which includes the alignment, etc And further down, you can apply padding or margin to the row It’s the padding on this row that’s creating the space above and below the text and button in this section We won’t go through all of the settings as we’ll go through a few practical examples in a moment

However, review the theme documentation to get familiar with the options that are important to you The visibility tab allows you to show or hide the row on specific devices And the animation tab allows you to add animation and set parallax effects You will need to hit ‘save’ to commit your changes The other options you have on the right are: The ability to duplicate the row Import or export the row Delete a row And the option to minimize the row Next, if we scroll down to the section below that says ‘Accounting services’ and hover over the row below that with three columns, you’ll see that a darker grey bar appears This is what’s referred to as a sub-row, which you can create by changing the column structure via an element within an existing row For example, if we duplicate the fancy heading module where the ‘Accounting Services’ title is by clicking on the duplicate option on the right You’ll notice that you have the same column options available on the left for a sub-row, By selecting the four column option, this will create a sub-row with four columns On the right-hand side of the sub-row heading you’ll see that you have similar options to that of a standard row

We’ll delete this sub-row Under the accounting services section, you’ll notice that their is a sub-row with three columns that each have an image with a title Each column has its own styling options Let’s say that we want to delete the image module in the middle column and replace it with an icon, title, and some text (known as a feature module): To delete the image module we’ll click the ‘x’ on the right To add add a feature module, we’ll click on the plus icon, then click and drag the feature module into place The editing options will open From here, we can change our featured title text, Add some paragraph or blurb text Choose the layout option we want If you don’t want to include the animated percentage counter around the icon, you can just delete the percentage value Adjust the icon size To change the icon, click on the icon option, and select a new icon from the available options You can also use an image instead of an icon You can also add a link to the icon and feature title The great thing is that your changes will be previewed live for you to see Select ‘save’ If you want to use the feature modules in all columns, you can just delete the other image modules Then duplicate, and drag the modules into place To commit your changes, remember to save the page Let’s head back to the top: You can double click on the fancy heading module to edit the text Similarly, if we double click on the button module Up the top, you can set the size and style of your button In the text field is where you amend the button text And we can add the link destination for the button to the link field For example, we’ll link to the contact page (for this, you don’t need to include the www dot part of of the url, just everything after the

com or root domain So in this case, forward slash contact hyphen us) Under the styling tab, you can customize the design of the button The most important things will be: Alignment, which will be controlled under the font dropdown on the general tab, by selecting the text alignment option here And on the button link tab, this is where you amend the: Background and background hover color for the button Link and link hover color The amount of padding for the button text And border style and attributes Save any changes If we double click on any of the modules on the page, you’ll see that while there are different setting options, they are very similar and function in the same way as the examples we’ve covered so far

The best way to get comfortable with the Themify Builder is to invest a bit of time exploring the options, as well as reviewing the documentation for more information So far, we’ve gone through the basics of updating content What if we want to amend an existing layout? Let’s scroll down to the section with four columns featuring image modules Say we wanted to change this row to five columns instead of four We’ll hover over the column settings for the row, and select the five column option We can then duplicate and update an existing module and drag it across to the new column Or select add a new module by clicking on the plus icon If you want to add a new row: You can either scroll down to the bottom and create one from scratch by clicking on the plus icon and adding in the modules you want to use Alternatively, you can leverage one of the pre-designed rows by clicking on the plus icon at the top of the page Navigating to the rows tab Then select the row you want to use, and simply drag it into the builder, and place it where you’d like it to be From there, you can easily customize it with your content

Ok, so hopefully you’re starting to see how easy it is to create a beautifully designed website with just a few clicks Let’s go through the process of creating a new page from scratch In fact we’ll go back to our draft homepage mockup we created earlier Here we’ll have a hero image at the top with a heading and a call-to-action, or CTA button Next, we have an intro paragraph of text on the left and a video on the right

Below that, we’ll have a headline differentiating our business And, a row with three columns featuring an icon, title and blurb with learn more buttons in each column Ok, so let’s create it! To do this, we’ll save our changes: From your WordPress dashboard, hover over pages, and select ‘Add new’ We’ll give the new page a name – we’ll just call ours ‘test’ Once we’re there, we’ll click on the Themify Builder button to launch the page builder Turn on the page builder, if it doesn’t launch right away You’ll see that we have a clean slate

From here, we can either use one of the pre-built rows to start our design by hovering over the plus icon at the top, navigating to the ‘rows’ tab and then choosing a specific row Or, build a layout from scratch To do this: Even when we’re building a layout from scratch, we’ll load in a pre-designed layout, as sometimes the builder can be glitchy and include white space at the top of the page This doesn’t happen all the time, but if you have this issue, loading one of the pre-designed layouts and selecting ‘replace existing layout’ typically gets around this Then just delete the rows you don’t want When the row you’re adding modules to is pressed against the top navigation bar, you’re good to go For our example, we’re going to add a title with a subheading and a call-to-action button

To do this, we’ll click on the plus icon, and add a text module by clicking and dragging the module into the row We’ll then add in our title text, and set this as our heading 1 or h1 (From an SEO perspective, you should only have one heading 1 per page We won’t get into SEO in this tutorial, however if you’re interested in learning the fundamentals of SEO for WordPress, enroll in our SEO course at coursesohklyncom) Below our H1, we’ll add our subheading With all the text selected we’ll set the alignment to center We’ll set the font color to white, but we’ll come back and do this in a moment, once we’ve uploaded our background image To add our call-to-action button, we’ll click on the plus icon and drag a button module into the row, under our title text We’ll set the button background style to squared Set the button text to ‘Get STARTED’ Add in the link destination, where we want the link to go to, in our case, we’ll send this to the contact page by adding ‘forward slash contact hyphen us’ Go to the ‘styling’ tab, and within the ‘general’ options, under font, set the alignment to center Under the ‘button link’ options, under ‘background’, we’ll set a custom background color of #c4943a, and a background hover color of black, or hashtag 000 Under the ‘link’ option, we’ll set the link color to white, or hashtag fff We’ll then select ‘save’ We’ll now add a background image to the row as well as some padding to create space around our heading text and CTA

To do this, we’ll scroll up to the row settings at the top for the hero section and click on the edit options We’ll set the row width to ‘fullwidth container’ We’ll then head to the styling tab Under the background option, we’ll leave that background option set to image, however, you could set a background color, or use a video or slider We’ll click on ‘upload’ to upload our background hero image We’ll select the file, and click ‘open’ Set the ‘background mode’ to ‘fullcover’ We’ll add a gradient overlay, as this is a popular trend for 2018 and 2019 To do this, select the overlay option dropdown, and select ‘gradient’ We’ll select a linear gradient with a 275 degree rotation The color selector on the left we’ll set to is #081966 with an opacity of about 40 – 45% The color selector on the right we’ll set to is #056a8c with an opacity of around 40 – 45% again Lastly, in the padding dropdown option, we’ll add 15% padding to the top of this row, and 13% of padding to the bottom of the row And then select ‘save’ We can now amend the title text color by double clicking on the text module Navigating to the styling tab, and under the font option, setting the color to white Remember to save changes As per our rough mockup, we’ll now create a row with two even columns

The left will have a text module in it and the right will have a video module For this: We’ll add a new row to our page under the hero section we just created, and set the number of columns to two We’ll then add our text module to the column We’ll add our text and set our title to a h2 We’ll leave the rest of the text as paragraph text We’ll then add our video module to the column on the right To include a video, you can either upload a video to your media library, or add a url link In this case, we’ll add our ‘Best WordPress themes for Business video’ Then select ‘save’

That’s looking OK, but the difference between an OK design, and a great design is often the little things The first thing we’ll do is add 5% of padding to the top of the row, to create some breathing room between our hero section and our intro section To do this: Click on the row editing options Navigate to the styling tab, and under the padding option, uncheck the ‘apply to all’ option Then add 5% of padding to the top And select ‘save’ We’ll also add a divider line as an accent above the text module To do this: Click on the plus icon and add a divider line above the text module We’ll use our feature color of #c4943a as our divider color Include a bottom margin of 40px And set a custom width of 100px with left alignment We’ll also add a ‘slide in left’ animation Then, save changes The last thing we’ll do here is add a button with a link to the ‘about us’ page

For this: We’ll click on the icon and add a button to our column Set the ‘button background style’ to ‘outlined’ Amend the button text to ‘read more’ Set the link to forward slash about hyphen us Under the styling tab, in the general options, set the font alignment to center Then, under the button link options, we’ll set the background hover color to our accent color of #c4943a (leaving the regular background blank) We’ll set the link color to our accent color of #c4943a And the link hover color to white Under the border options, we’ll set the border color to our accent color of #c4943a, with a solid border width of 1px Then hit ‘save’ That looks pretty good, but our columns now feel uneven To fix this, hover over the column settings for the row, and set the column alignment to the bottom alignment option That looks better Remember to save the page as you go to avoid losing your changes

The last thing we’ll do together is create a row with a headline differentiating our business and a sub-row with three columns featuring an icon, title and blurb with learn more buttons in each column To do this: We’ll add a text module to a new row Add in our text, and set the headline to a h2 Select all the text and set the alignment to center Under the styling tab, we’ll add some padding: 15% to the left and right, and 15 pixels to the bottom This will constrain this text which will add to the design Then save the changes We’ll also add some padding to the top and bottom of the row by clicking on the row styling options And adding 7% of padding to the top and bottom Then hit ‘save’ To create our sub-row: We’ll duplicate our text module Under the column options on the right for the duplicated module, select the three column option We’ll delete the text module, and instead add a feature module by hovering over the plus icon and dragging it into the column We’ll set a feature title Include some feature paragraph text We’ll stick with the icon top alignment, however, remove the percentage value to remove the circle around the icon To change the icon, we’ll click on the icon option, search for the cube, and set that as our icon We’ll change the icon color to our feature color of #c4943a We think there may be a little too much space between the icon and the feature title

To fix this, we’ll navigate to the styling tab, and under the feature title options, we’ll set the line height to 0 Then save changes We’ll then duplicate the feature module twice Drag them across to the other two columns And update the information for each, following the same process The last thing we’ll do is add in the CTA button for each feature This could be used to link to individual pages for each feature if you were using this for services or locations as an example To do this: Click on the plus icon, and drag the button module into the column under the feature module For this, we’ll select the ‘outlined’ option Set our button text to ‘Learn more’ Add in the link destination Under the styling tab, in the general options, set the font alignment to center Then, under the button link options, we’ll set the background hover color to our accent color of #c4943a (leaving the regular background blank) We’ll set the link color to our accent color of #c4943a And the link hover color to white Under the border options, we’ll set the border color to our accent color of #c4943a, with a solid border width of 1px

We’ll select ‘save’ Duplicate this button twice Copy it across to the other columns, remembering to update the text and link destination Then save the page And there you have it, that’s how you’ll use the builder to create layouts from scratch Remember we’ve been doing this for years, so if you’re taking a little more time to begin with, that’s totally normal Within a few hours, you’ll be through the steepest part of the learning curve, and you’ll find that this actually becomes quite enjoyable Slightly addictive even Ok

so hopefully that makes sense and you’re feeling comfortable enough to build out the rest of the page layouts for your business website Follow the link on the OHKLYN post to the documentation if you need additional info regarding the Themify builder or any of the modules When you have your website looking the way you want and you’re ready to launch, there’s a few best practices that you should follow to ensure you get the best results

If you want your website to be searchable via search engines like Google, then the first thing is to ensure that your WordPress settings aren’t blocking search engines from indexing your website To check this: From your WordPress dashboard, hover over settings in the admin panel and select ‘reading’ Scroll down to the bottom to the Search Engine Visibility section Ensure the box is unchecked so that Google can crawl and index your website Keep this box checked while you’re still working on your site, but uncheck it once you’re ready to go live Once you’ve done that, we would recommend watching our step-by-step video on how to index your website using the free Yoast SEO plugin and Google Search Console

This will help to make your website discoverable via search engines like Google We’ll add a link in the description below, or you can find it via the videos tab of our YouTube channel We would also recommend installing Google Analytics on your website You guessed it, we’ve created a free step-by-step video on how to do this as well With the Ultra theme, you can add the required tracking code within the Themify Settings section

To do this: From your WordPress dashboard, hover over ‘Themify Ultra’, and select ‘Themify Settings’ Under the general tab, scroll down to the header code section, and this is where you’ll paste your Google Analytics tracking code And that brings our ‘How to make a business website tutorial for 2018 and 2019’ to a close We hope you found this WordPress tutorial helpful, and are well on your way to launching a new website for your business If you liked this video hit the ‘Like’ button, and remember to subscribe to our YouTube channel for more videos related to WordPress, digital marketing and how to run a successful website Your feedback is appreciated, so please leave a comment below and tell us what you liked, or if there was anything you found difficult, so we can put together additional videos to help support you as you build out your website

To get access to exclusive discounts, free tutorials, and to stay in the loop on the latest updates, sign up to our newsletter at OHKLYN o-h-k-l-y-ncom, and until next time, happy building

Free Email Updates
We respect your privacy.

website ssl certificate

affiliate marketing