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 and Hance your credibility and become an asset that you own and can leverage to showcase your business and 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 will 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 websites, health. Or fitness websites. Restaurant. Cafe, or bar website, or a, portfolio. Solo. Entrepreneur, style website in addition. To that the theme comes with over 65 pre-designed. 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 Oakland o H. K, L, Y, n, dot-com. Forward. Slash go forward. Slash ultra, -, demo into, your browser, by. Following the steps in this business website, tutorial, you'll get access to more than fifteen different headers 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, will, show you what, to prepare and the things you need to consider before creating, your business websites, this. Step often gets missed, however, by planning ahead we'll, save a bunch of time and frustration, will. 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 will. 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 websites 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 Oakland 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 Oakland community, you'll get access to a discount code that gives you 30% off, the ultra theme subscribe. To the Oakland newsletter, and you'll be sent a welcome email with the discount code included. For. This tutorial will show you how to setup 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 matically install wordpress for you as well as provide 24/7. Supports, 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 up front 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 websites, and how they relate to each other some.
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 that 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. Next. Is brand design and content planning. Once. You've outlined the pages, you want to include on your websites 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 layouts, write, the content, for each section, and decide, on the media elements, you want to use on, the. Oakland 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 websites 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 Palatine com Adobe, color or color hacks com that you may find useful, if. You need help with copywriting, or graphic design consider.
Using A third-party platform. To help get these things done professionally. And efficiently, we'll, link a few options below and on the Oakland post. Lastly. Is setting, a budget for your websites, 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. To 300 dollars, depending, on the options, you choose this. Will include things like your website, hosting, at about $3, to $20.00 per month depending on your hosting term a premium. WordPress theme which, is typically around $50. To $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 web site and is what users will type into their browsers, to access, your sites for, Oakland its Oakland. Ohk. Ly. 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 will 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. Oakland web site 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 web sites 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. Dot. Online, store. Dotnet. Dot. Org dot. Co dot. Club now. If you've already purchased, your domain or, if you want to purchase an alternative, top-level, domain, such as dot io something. Relevant to your niche or a country specific domain, such as dot co uk or dot-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 already secured, your domain name all you need to do then is change what's called the domain name servers, 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 Oakland 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 to 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.
Of This process we'll provide a link to our video and 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 websites, 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 Oakland 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 forward, slash WP. - admin, to the end such. As example.com. Forward. Slash WP. - admin, then. Enter your username and password setup, in the prior step you'll, then be taken to your WordPress dashboard, the. First time you login 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 plug-in 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, of her channel, the. WordPress dashboard our 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 adjust, 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. Dashboards section provides, easy access to, the dashboard updates. And additional, plug-in features, the. Content, management section, is where you create and manage posts, pages, media. Items comments. And additional, plug-in features, the. Site administration, section is where you configure the design and appear in settings of 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 plug-in 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 permalinks, 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 and the permalink, however. The more common option, and what we'd recommend from, an SEO and UX perspective is post name so. We'll select that option and save, our changes, you. Can learn more about each option under the help tab and choose the best option for you we.
Recommend Doing this before you start creating content so that your urls are created, the way you want. Also. If you want to update your user profile, or add users, to your website you, can do this by hovering over users. In the admin menu on the left and selecting. From the options here. Alright. Moving, on the, menu is fully responsive. Meaning, that as the screen size gets smaller the, menu adjusts, to remain accessible, on all types of devices. Lastly. The main admin, area serves as our primary workspace. And adjusts. Depending, on what's selected from the admin menu we'll. Draw your attention, to the screen options tab in, the top right corner when. You open this tab you'll see a list of options, and features that are available for, display depending, on which page you're on, similarly. The help tab to the right shows you helpful hints for the page that you're on as well, as links to relevant documentation. Once. Again for a detailed walkthrough of WordPress, we recommend, watching our how to use WordPress tutorial. 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, websites, for. A more detailed overview check, out our what, is a wordpress theme article. On the Oakland blog, there. Are both free and premium themes, that you can choose for your website the. Main benefits, of using a premium, theme is enhanced, security, access. To supports, 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. Premium. Support packages, can cost $50, a month so, the fact that this is included in Premium theme makes, it a smart investment on the.
Oakland 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, on the Oakland blog for. This tutorial we'll, use the top rated business website, theme ultra. By themify for, 30% off subscribe, to the Oakland 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 Oakland 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. Subscribe, to the Oakland blog add the discount, code you received in the welcome email and, select next, add. Your payment, information. Then. Log in to 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 Oakland menu by, following the instructions. Alternatively. You could also use a plug-in called a 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, activates and your, new theme will now be live on your websites, 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. Plug-in. 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 plug-in and select activates. 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, and demos transfer.
And Updates. We'll. Go through the settings tab in detail shortly as this is the main tab for controlling the global theme settings for your websites 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 and 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 Oakland post here to the ultra page and, then. Scrolling, down to the demo section and following, the link to the specific demo, sites 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 websites, 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 this site from the front-end you'll see that the 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 websites. 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 websites. Then. You'll select import. To import the, demo content into your websites. 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 sites 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 websites, then, you won't need to install that plug-in. To. Install the required plugins. From. The themify membership, area scroll, down to the builder add-ons section. To. Download each plug-in required, for the demo you want to use simply, click on the specific plug-in, link to start the download. Repeat. This for every required plug-in 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, plug-in. Click. Choose, file. Navigate. To the zip file for the first plug-in you want to upload select, the plug-in zip, file and hit open. Then. Click install now. Once. The theme has been installed successfully select. Activate, plug-in.
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 and 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 accountants, skin and click on the import option, to bring in the demo content for your websites. Once. That's done the page will refresh and we can go to the front end of your websites, 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, will. Customize, a few elements of this design to match the look we created, for a 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 and 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 sites as part. Of that will look at widgets, and how you control, your website's sidebar, and footer options. Will. 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 page as 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 home page for our website so, that you're aware of how the home page is set for your websites 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 plus 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 inside 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 setting shortly, but, you're always able to overwrite, these for individual, pages here. We're. Going to load in one of the pre-designed, layouts, which, is a full width layout with, no sidebar, so, in the page options, tab we'll, set the sidebar, option to, no sidebar, and. We'll. Set the content width to full width. 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. To. Add one of the pre design 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 layouts. You. Can either search for specific layouts, 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, layouts by clicking on the layouts, you'll. Be asked, if you want to replace or append the layouts 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 were editing the. Backend, editor is located, in the themify builder tab, of the themify custom, panel, which we'll explore further in the next section. To. Set this page or any page as the home page for our website, we'll. Hover over settings in the admin menu and click on reading. Under. The your home page displays option. Make sure that a static page is selected, and then choose the page you want to set as your home page from the home page drop down list below in, this. Case we'll, choose the page home alt, then. Select save if. We. Go to the home page of our websites, we'll see that the home alt page we just created is now our home page. 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 setting tab like, we just did for the home page, for. More details on anything we've 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, 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 websites, 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 websites, 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 a sign CSS, classes which, is slightly more advanced, than we'll cover today, however. If your interest isn't learning some HTML, and CSS fundamentals. For WordPress register. For one of our courses at courses Oakland. Ohk. Ly, 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, have 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. Will. 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 drop-down, 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, will select mega posts, from the drop-down 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 pose 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 there on there. Are a few instances when, you may want to do this so now, you know how to. Amend. The footer menu you, 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 need more than ten 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 layouts. And setting, the default layout for pages, posts, and other global elements, in, the. Description, below and, on the oakland 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 home page about, contact. Page etc. Individual. Posts, of 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. 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, 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 websites, 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 and enabled area and allows, you to set a global sidebar. That 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 will. 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 one 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 one area. Within. There you'll see that it's using a text widget you, could also use a HTML. Widget for this feature. You. Will see that there's an opening span tag and a closing span, tag. 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 tell colon, than 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, okay. 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 websites. Let's. Head back to the themify settings. For. The archive sidebar, option will, 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 metadata, such as the author date, category. Etc. The. 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, will, set the page sidebar option to no sidebar. Will. 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. And 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 preferred 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 themes responsiveness, which we wouldn't recommend here. You can also amend, the responsive, breakpoints which, basically refer to the defined screen widths, that represents, 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 will 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 mimbar 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, Explorer. 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 widget 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, select. 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 is clicked if it, interests you check out our HTML, and CSS fundamentals. For WordPress course at courses Oakland. Com, if you'd like to learn the fundamentals of HTML, and CSS. The. Footer styling, will be controlled, via the theme customizer panel. Which will 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 websites how they're displayed and, add the links to your counts 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 to 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, the global styling, options for your websites to, access the theme custom. 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 will refer to the theme customization. And styling documentation. The link to which will be in the description, below and on the Oakland post this. Guy 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 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 your logo will 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 up 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 200 px, to the first box if. You, want the logo to take the user to someplace 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, will. Minimize the site logo and tagline options, panel and will 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, option drop down here. We, can set our X and font background. And link color by clicking on the color selector, box. You. Can either select the color and its opacity. Or. Enter. In the hexadecimal or, RGB, a color, code of your brand color, you'll. See the elements, this effects 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, pages themify, custom, panel or via, the themify builder itself. 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, 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. Then. Choose the body font option. Here. You can choose from a web safe fonts or, a number of google fonts, set. The default, paragraph font size, line, height font, weights 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 ch