How to Make Your Own Website 2018 | Divi WordPress Tutorial

In this video, we’ll show you step by step, How to Make Your Own Website for 2018 and 2019 In this WordPress website tutorial for beginners, we’ll show you how to create a website that would typically cost two to three thousand dollars plus, if an agency or web designer was building it for you

The great news is, we’ll show you how to do this for less than a few hundred dollars Because everyone is different, we’re going to show you how you can access over 25 professional designs for free that you can choose from to build the exact type of website you want So, regardless of whether you want to build your own: Business or consulting website Freelance website Portfolio website SaaS style website Product or app website Coffee shop website Wedding website, or; Any type of website for that matter You are able to follow this WordPress tutorial and get building For this example, we’ll use the business style website as our starting point to create a seven (7) page website that will include: A landing page, that we can send paid traffic to or optimize for search Homepage About Page Contact Page Blog Page Portfolio Page, and; Pricing page

You’ll be able to create one of the other website examples we shared before just as easily, and create the exact pages you want on your website using what’s referred to as a free layout pack The great thing about the website you’ll create is that it’s SEO friendly, features an optimized UX design that is 100% mobile responsive, and includes an intuitive, beginner friendly, drag and drop page builder Our intention is to give you as much flexibility in design as possible, so that when we show you how to create your own website, it’s actually the one you want! To do this, we’ll leverage pre-designed layout packs, and provide you access to more than 25 uniquely designed website layouts that you can download for FREE and use on your website with just a few clicks As part of this tutorial, we’ll show you how to customize these layouts to suit your design, as well as go through how to create stunning layouts from scratch In fact, we’ll go through step by step how to create this exact layout here that we’ve used as the hero image for this tutorial

You’ll also be able to choose from a number of navigation styles, including: The classic horizontal navigation at the top A centered logo option, or centered inline option Slide in menu Full screen option As well as vertical navigation options, with the menu on either the left or right We’ve created a step by step guide for this tutorial that you can follow along with on the OHKLYN website You’ll find the link to this in the description below and in the info card for this video Here, you’ll find the written instructions, as well as any links mentioned in this video We would recommend opening the post in a new tab, and following along

You can also access many of our free WordPress tutorials by selecting ‘tutorials’ from the top navigation menu, and scrolling through the available options In this step by step WordPress tutorial for beginners, we’ll show you: What to prepare, and the things you should consider before getting started This will save you 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 of you that are new to WordPress)

We’ll then upload and install your WordPress theme Install any required plugins Then go through and customize your WordPress website, covering items such as: Creating and managing pages and posts Leveraging pre-designed layout packs Creating and managing menus Using widgets, As well as adjusting the global design settings for your website Once your website is looking the way you’d like it to, we’ll show you how you can take your website live, ensure it can be found by search engines like Google, and show you how to install Google Analytics on your website for free As part of this tutorial, you’ll get access to over 20 hours worth of free video content that covers how to customize every inch of your website, so, regardless of how intricate your website design may be, we’ll provide you with the tools to create it

If that sounds good – then let’s get to it! For this tutorial, we’ll use the Divi WordPress theme by Elegant Themes (you can access a discount by following the link in the description below, or if you’re following along on the OHKLYN website, you can click this button here) To view some of the free layout packs available for use in this tutorial, from the OHKLYN website navigate to our ‘Free Divi Layouts’ page, which is under ‘Resources’ in the menu, you’ll have access to all of these layouts for free with the Divi theme 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 and on the OHKLYN post, 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, thank you in advance for using the links provided If you require premium hosting, or faster hosting, we’ve included a discount link to WP Engine You will notice a difference in speed between the two providers, however, for most people, the more affordable Bluehost option will be fine, and you can always upgrade later on Ok, so before we get started, let’s go through what you need to prepare

A big mistake beginners often make is forgetting to plan out what they want their website to look like before getting started By taking a couple of moments upfront to consider the user experience, as well as brand and content design, you’ll save yourself a bunch of time, and produce a much better result First, 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: Figure out which pages you want to include on your website Common pages include: A Homepage About page Contact page Gallery or portfolio page Blog (including the individual post pages, and category pages) And, a privacy or terms of use page Make sure you draw out all the pages you want to include on your website Next, for each page, create a rough guide for what will be on the page in terms of text, images, videos, and other elements

You can use the layout pack you want to use as a guide For example, on the homepage: We might have a hero image at the top with a heading and dual call-to-action, or CTA buttons Next, we might have an intro paragraph on the left and a video on the right Below that, we could include some number counters with some stats about our offering – we could overlay this over a dark image Then, we’ll have a headline differentiating our business And below that, three columns with blurbs and icons that we could use to feature services or highlight what makes us unique

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 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

Give some thought on how you structure your content Does the flow of information you’re presenting make sense? Does it logically take the user through a process, or tell a story? If it does, this will dramatically improve engagement on your website Up 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 post for this tutorial, 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 better 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-hex

com that you may find useful If you need help with copywriting, or graphic design, consider using a third-party platform to help get these things done professionally and efficiently We’ll link a few options below and on the OHKLYN post And lastly, allocate a budget for your website In this tutorial, we’ll show you how to make a website that would typically cost two to three thousand dollars

For this, you’ll need a small budget of around $100 – $300 This will cover the cost of items such as: Your website hosting: This costs around $3 – $20 per month depending on your hosting term A Premium WordPress theme: This typically costs $50 – $100 Premium images, if you want to use them Or, a graphic designer, if you want to create some custom graphics

Ok, so let’s get started on building your new website The first step is to register your domain (if you haven’t already), set up your website hosting account, and install WordPress So we’re all on the same page, let me quickly explain what they are Your domain, or url – is the web address for your website and is what users will type into their browsers to access your site For OHKLYN it’s OHKLYN o-h-k l-y-n

com Pick something that works for you Hosting, is what allows your website to be accessible to users 24/7 It’s the process of storing the content and data for your website on a web server, and serving it to 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 down below 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: 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 Choose the option that’s best for you

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

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

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

Once you’ve entered in your password, review the terms of use, and select ‘Next’ You will then be able to log in 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 is updated, they’re often more secure They also 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 some extra plugins 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 well on your way 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 and your search rankings as Google prefers secure sites It also allows you to take payments on your website 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, examplecom/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 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 You can build your website on your live site, however, we would 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 while 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 out 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 – It adjusts the available options depending on which page you’re on and if you’re viewing the page from the front or 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 you’d be managing plugins, users, controlling 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 video), 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 one of the top rated WordPress themes – Divi by Elegant Themes To access a discount, follow the Divi discount link 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 a yearly access to all of their themes and plugins, or select their lifetime access option, which gives you access to all of their theme and plugin updates for life We have their lifetime access option, however, choose what’s right for you

You can always upgrade later on Once you’ve chosen your access level, select ‘sign up’ Enter in your personal information Select your payment method Review the terms

And select ‘complete registration’ Then, log into your Elegant Themes dashboard The next step is to download a copy of the Divi theme: From your Elegant Themes dashboard, scroll down to where you see ‘installing Divi’ and select ‘download’ This will download a copy of the Divi theme 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 Divi 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: Go to your WordPress dashboard Hover over appearance in the admin menu on the left, and select ‘themes’ From here, select ‘Add new’ Then select, ‘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 Divi WordPress theme Once the theme is successfully installed, click ‘activate’, and you’re new theme will now be live on your website

Unlike other themes, Divi doesn’t require you to install any additional plugins to leverage all its features However, if you want to include any additional plugins on your website, review our article and video on how to install a WordPress plugin, which you can find on our blog or YouTube channel One of the great things about the Divi theme (other than its industry leading page builder), is the ability to access an unlimited number of layout packs that you can use on your website So, what exactly is a layout pack? A layout pack is a group of JSON files that include a series of page layouts that can easily be imported into your new website These include all the content, Divi settings, images, and other design elements, making it really easy to create a great looking website From there, you can update or amend the design to create the exact website you want

In a recent update, you can now access a number of these pre-designed layouts or layout packs directly from the Divi builder We will be creating a number of free divi layouts of our own that you’ll be able to access by subscribing to the OHKLYN newsletter These will include the homepage layout that we used for the hero image of this tutorial, which we’ll build out together later, plus much more, so remember to subscribe to the OHKLYN community to stay up to date on that To review all of the layout packs that you could leverage on your site, check out our free Divi layouts page which can be found under resources via the OHKLYN menu A number of the layouts featured on this page will be available directly from the Divi builder, however you can also follow the link and download any of these layout packs

These will download as a JSON file We’ll go through how you can upload this to your website in the next section Ok – let’s move on to customizing your website In this section we’ll look at how to create pages and posts, as well as how to upload and use the pre-designed layout packs from within the Divi Builder, or that you downloaded earlier We’ll create the pages we want on our site and upload the layouts we want to use, then move on to how to create and manage menus for your WordPress website

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 layout 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 20 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 first up, let’s take a look at how to create the pages that you want on your website For this example, we’re going to create seven pages, these include: A landing page, that we can send paid traffic to, or optimize for search Homepage About Page Contact Page Blog Page Portfolio Page, and A pricing page We’ll load in the layouts for each of those pages as we go through, and then set the homepage (or front page) for your website This is where page visitors will land when they enter your domain name into their browser You can set this to any page you like

To create a new page: From your WordPress dashboard, hover over ‘pages’ in the admin menu on the left To view all the pages on your website, click on ‘all pages’ Alternatively to create a new page, click ‘add new’ You could also hover over the ‘+ new’ option at the top of the page and select ‘page’ Or, from the ‘all pages’ tab, click on the ‘Add new’ button at the top

The first thing you’ll want to do is give your page a name If you’ve selected ‘post name’ as your permalink structure, this will be used to create the url for this page For this example, we’ll call this ‘Landing’ On the right-hand side of the page, 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 as ‘no parent’ 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 To launch the Divi builder and leverage the pre-designed layouts, we’ll click on the ‘Use the Divi Builder’ button We’ll go through how to use the Divi Builder to create and update pages on your website in the following section However, to access the pre-designed layout for this page, we’ll click on ‘load from library’

Under the ‘premade layouts’ tab, you can access any of the pre-designed layouts by clicking on the layout you want to use In this case we’ll click on the ‘Divi for business’ Agency layout pack Then navigate through the various pages, and choose the page layout you want to use For this page we’ll select the landing page layout From here, you can either view the demo in a new tab Or, click ‘Use this layout’ to import the layout into your page

You’ll see that our Divi Builder is now populated with content We’ll go through a practical example of using the page builder shortly For now, we can save the page as a draft if we’re not ready to publish the page Preview the page, which will preview what the page looks like from the front end You’ll see that the layout has imported all the content from the demo, which is great

If we head to the back-end and we’re ready to publish the page, we can hit ‘publish’ and that will take the page live We’ll create the other six pages that we’ll use for this demo and import the content just like we did for this page The pages we’ll create will be called ‘Home’, ‘About’, ‘Contact’, ‘Blog’, ‘Portfolio’, and ‘Pricing’ Pause this video, and follow that process to create the pages that you want on your website If you want to upload a layout pack that isn’t one of the premade layouts within the Divi Builder

You will just need to upload the layout pack to the Divi library, and then select the layout from the ‘add from library’ tab, rather than the premade layout tab, once you click on ‘load from library’ as we did before To upload your layout pack: From your WordPress dashboard, hover over ‘Divi’, and select ‘Divi Library’ This is where you’ll manage any saved page layouts, sections, rows, or modules that you can easily load into pages with a couple of clicks Click on the ‘import/export’ option at the top of the page Click on the ‘import’ tab, and select ‘choose file’

Navigate to the JSON file with the layout or layouts you want to upload and select ‘open’ Then, click on ‘import Divi Builder layouts’ You’ll then see a progress bar Once it’s uploaded you’ll see that the layout or layouts have now been added to your Divi library And that’s how you upload any Divi Layout that isn’t featured on the premade layouts tab

Create the rest of the pages you want on your website We’ll skip ahead and come back once we finish creating the rest of our pages Remember, paint in broad strokes for now, and we’ll go through and customize the layouts for each page shortly Ok, so you should have created the pages you want to include on your website What we’ll do now is show you how to set the homepage for your website

For our example, we’ll set the page we created called ‘Home’ as the homepage for our website, however, you could just as easily use any other page To set this 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’ option, 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 called ‘Home’ Then click ‘save’

If we go to the homepage of our website, we’ll see that the page we just created called ‘Home’ is now our homepage Ok, so that’s how you’ll set the homepage for your website If you want to leverage a blog on your website, you’ll create blog posts the same way The only difference being that you’ll need to set up categories first by hovering over posts and selecting categories Here is where you’ll add the blog categories that you’ll assign your blog posts to

By entering the category name For this example, we’ll use ‘Creativity’ And select ‘add new category’ Repeat this process for all the categories you want to include in your blog We’ll add ‘Inspiration’ and ‘Productivity’

Once you’ve created your categories, you’ll need 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 You can either upload an image or select one from the media library Then, ‘save as draft’, preview, and publish your post The default blog page will feature your recent posts, unless you’d like to create a custom blog page and set it as your blog page via the ‘reading settings’ tab, like we just did for the homepage As we go through this tutorial, if you want more information about WordPress, please watch our ‘How to use WordPress for Beginners’ video and review our blog post

Similarly, for more information regarding the Divi WordPress theme or the Divi Builder, follow the button on the OHKLYN blog post here to access 20+ hours of free video tutorials and documentation If you haven’t already, 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 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-hand side, 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 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

We’ll check both boxes as we’ll show you how to use the link target option to open a menu link in a new tab and how to include a mega menu on your website by adding a CSS class to the menu item If you’re interested in learning some HTML and CSS fundamentals for WordPress, register for one of our courses at coursesohklyncom Back to the menu options: On the right, you have your menu structure

To create a new menu click 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 The Divi theme includes three default menu locations, the main navigation menu located here

Secondary navigation, which is shown above the main navigation This is where you can include a phone number or another call-to-action item Or, the footer navigation menu, located in the footer section 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-hand side

In this case, we’ll select the pages we created earlier 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 a menu item across to sit underneath the item above For example, we’ve added the blog page to our menu

We’ll now 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, you can also add custom links to your website’s menu

Custom links are used primarily to link to pages that aren’t part of your website, or to specific sections of a page, using what’s referred to as the ID for the section To create a custom link: Click on the custom menu link option on the left Add the URL from where you want the menu item to link to In this case we’ll link to Dribble Then add the link text that you want featured in the menu We’ll just type ‘Dribble’

If we’ve checked the link target box above in the screen options tab, we’ll have the option to open this link in a new tab by checking the ‘open link in a new tab’ box, which is what we’ll want to do as we’re taking the user away from our site Then click ‘Add to menu’ Drag it to where you want it to be positioned in the menu For this example, we’ll add it as a sub-menu item within ‘Creativity’, under the blog section of our menu If you want a menu item to link to a section on the page, for example, if we open the homepage in a new link

You’ll notice that at the very bottom we have a contact form Let’s say we wanted to link to this section of the page from our main menu To do this, we’ll need to assign an ID to this section Let’s go to the back-end of our homepage We’ll go through the page builder and customize these layouts in the next segment, but for now, let’s scroll down to the very last section of the page, on the blue tab section, we’ll click on the edit settings option (with the three lines)

We’ll then click on the ‘advanced’ tab, and in the box next to where it says CSS ID, we’ll enter the ID of ‘contact-test’ We’ll then click ‘save & exit’ Update our page We’ll go back to the menu settings and refresh the page We’ll add a custom link with a ‘link url’ of ‘#contact-test’, and for this example we’ll add ‘test’ as our link text

Then click ‘add to menu’ Save the menu Then navigate to the homepage and refresh the page Our link called ‘test’ should now be there, and if we click on it, it will take us down to the section that we added that ID to earlier And that’s how you link to internal sections on the page

Firstly by giving the section an ID (this can be whatever you like without spaces), then using hashtag and the ID name to link to it If you want to use the custom link as an organizational tool and not a link, you can set the link url to just a hashtag, and if the user clicks it, it will only reload the page they’re on There may be a few instances where you need to do this, so you now know how Divi also allows you to include mega menus which can be great from a UX perspective as they allow you to show large amounts of information in an efficient way To show you what we mean: Click on the blog menu item

If you’ve checked the ‘CSS classes’ box under the screen options at the top, you’ll notice there’s a field called ‘CSS Classes’ We’ll add the class name of mega-menu Now let’s hit ‘save’ Then 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

It will take some finessing, but this can be a powerful feature On the OHKLYN post, follow this button to the Divi Documentation, then search for mega menu, and you can view the tutorial video on how to get the most from this feature To amend the footer menu, you’ll approach it the same way – By creating a new footer menu and following the steps we just went through Remember to refer to the documentation for further information regarding the menu options available in the Divi 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

[DIVI THEME OPTIONS] In addition to what we’ve covered so far, within WordPress and for the Divi Theme, there are three places where you’ll control the global look and feel of your website These are: The theme options or settings, Theme customizer panel, and; The Widgets section The theme options tab is where we’ll set the logo and favicon for our website, control our default page and post layouts, amend the visibility of global elements like social icons and metadata, as well as integrations for things like Google maps, social media, etc The Theme customizer is where we’ll manage our global styling parameters, such as colors, fonts, menu styles, etc And lastly, Widgets are how we populate our sidebar with content and other widget enabled areas on our site

Firstly, we’ll take a look at the Divi Theme options section To access the Divi Theme options section, from your WordPress dashboard: Hover over ‘Divi’, and select ‘Theme options’ In this tutorial, we’ll provide a brief overview of the most important parts that will be relevant to everyone Divi has so many options and you can access hours of free tutorial videos with the most relevant and up-to-date information for all the available options via the Divi Documentation link which can be found in the description below, and on the OHKLYN post here Follow the link and then search for a specific element that you’d like more information on

In this case, we’ll search for ‘Divi theme options’ Here, you’ll be able to access detailed video tutorials and documentation on every option available In the theme options, you’ll notice that there’s a number of tabs along the top Before we go through each of them, let’s cover some common vocabulary that relates to the basic architecture of WordPress so that these make more sense to you as we go through them Let’s quickly define static pages, individual posts, portfolio posts, and archive pages, as you’ll be able to change a number of the settings that relate to these within the Divi theme options section

Static pages are the pages of your website where the content is relatively static For example, your homepage, about page, contact page, etc Individual posts are the unique blog posts that you create on your website Individual posts are grouped by categories which serve as an organizational tool, and provide additional context and meaning to users Individual portfolio posts are most commonly used to showcase examples of work or case studies

These function in a similar way to individual posts, where they are associated to a category Archive pages are typically the category pages and showcase the individual posts or portfolio posts associated to that specific category Essentially, these pages act as an archive of associated posts For example, if you are a fashion brand and want to include a blog on your website, you may want to have a category called ‘Lifestyle’ with a number of individual posts related to ‘Lifestyle’ related keywords or topics related to your niche If you were to click on the ‘Lifestyle’ category link on your website, you would be taken to the ‘Lifestyle’ category archive page, which would display all the posts related to the category of ‘Lifestyle’

This page is what’s referred to as an archive page Ok, so hopefully that makes sense and we can now go through the Divi Theme options In the ‘Divi Theme Options’ section, the first tab is the ‘general’ tab, and is the tab where we’ll spend most of our time This is where we’ll upload our logo and favicon To update your logo, go to the logo option and select ‘upload’

You can select your logo from your media library if you’ve already uploaded it If you haven’t, you can drag in your logo, or navigate to ‘upload files’ and click ‘select files’ to upload your logo Once your logo is added to the media library, select your logo and add an alt text like ‘your brand name and the word logo’ Adding alt text to all images used on your website is good practice and something we’d recommend doing Then choose ‘set as logo’

Next, we’ll follow the same process to add a favicon to your website 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, next to the favicon option, select ‘upload’

Either select your favicon from your media library or upload it Then select your favicon, add an alt text and then choose ‘set as favicon’ For each of the available options in this section, you can hover over the question mark icon on the right-hand side to see more information about each specific option If you have a brand color palette, we recommend adding it to the ‘Color Pickers Default Palette’ section here, as this will make your color palette available anywhere throughout your site where you have the option to set a color For example, in addition to black and white, which is already preloaded in, we’ll add the color #0ddadd by entering in the hexadecimal color code

Below that, you have some blog options including the placement of the sidebar on either the left or right-hand side of the page If you want to add a Google map to your website design, you’ll need to set up your Google Maps API key and paste it in here On the OHKLYN post, we’ve provided a link to the guide on how to do this, which you can access here Similarly, you can enable the default social media icons on your website here by enabling the options you want, and adding your social media links below We find this feature from Divi limiting because of the limited options available without needing to amend the base code

We prefer to disable these and instead, import font awesome instead which enables us to add any social icon to our website and add the links anywhere on our site There’s a guide on how to do this with Divi on the OHKLYN post here Below that, you’re able to set the number of default posts shown on the various types of pages Underneath that are a number of options including a back to top button on your site that you may want to utilize At the very bottom is where you can add custom CSS to your website

You can also add Custom CSS via the Theme Customizer panel which we’ll explore next Whenever you make changes, remember to hit the ‘save changes’ button at the bottom to commit your changes Let’s take a quick look through the remaining tabs: The first is ‘Navigation’ – Here you can control the visibility of specific elements related to pages, categories, and your navigation menu features Next up is ‘Builder’ – the Divi Builder was recently upgraded to move away from adding what’s referred to as ‘inline CSS’ into your web pages when you make customizations to your page This is huge, as many drag and drop builders add Inline CSS, and if you know anything about web design best practices, inline CSS is a major rookie move

In this tab, you have a few options that relate to how the CSS is generated on your site (which we wouldn’t recommend changing), as well as the ability to turn off the product tour feature Next is ‘Layout’ – This allows you to control the look and visibility of elements included on individual posts and pages Up next is ‘Ads’ – As the name suggests, this allows you to integrate ads on your posts Next is ‘SEO’ – We prefer to use the Yoast SEO plugin to optimize the on-page elements of our website, however, you have control over some of these elements here Up next is ‘Integrations’ – here you can add your Facebook pixel, Google Analytics code, or any additional code to your website

Finally, we have ‘Updates’ – This allows you to add your Elegant Themes username and API key to enable Divi theme updates from within your WordPress dashboard as Divi improves and evolves Ok, so that’s an overview of the fundamentals everyone should know about the Divi Theme settings As we mentioned, review the help (or question mark) icon next to each option for further definitions, or follow the link on the OHKLYN post here to the Divi Documentation and search for ‘Divi Theme Options’ for a more detailed overview of each element Before we take a look at the Theme Customizer which allows you to set global fonts, colors, and other styling attributes on your site, let’s quickly explore widgets If you’re new to WordPress, we would recommend reviewing 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-hand side, 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 Divi has the sidebar widget area which appears on individual posts, archive pages, etc As well as four footer widget areas that you can use depending on which footer layout option you choose in the Theme Customizer which we’ll cover off next

By default, there may be some widgets added to your sidebar Depending on the layout you’re using, this may or may not be displayed, however, this can very easily be added For this example, if we open the blog page of our site in a new window, we’ll see that the sidebar is included here If we go back to the widgets section of our dashboard, you’ll notice that the elements that are listed in the sidebar are what’s being displayed in the blog sidebar of our page here Let’s take a quick look at how we manage widgets

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’ This process will apply for managing all widget enabled areas on your site So, hopefully that all makes sense

If you need more information, we recommend reviewing the WordPress documentation under the help tab at the top of the page, or follow the link through to the Divi Documentation Pro tip – Search for the ‘Divi Sidebar Module’ from the documentation section This guide will show you how to use the Sidebar module which will be implemented on a number of the blog pages for the layout pages included in the free Divi layouts Ok, so we’ve covered the Divi Theme Options and had a quick look at widgets, let’s move on to the Theme Customizer options The theme customizer is where you’ll have full control over the global styling options for your website

To access the theme customizer: Go to your website dashboard, hover over ‘appearance’, and select ‘customize’ You could also hover over ‘Divi’ and select ‘Theme Customizer’ On the left is the customization panel, and on the right is a live preview of your website One thing to note before we get started is that the module settings for the layouts and elements on each page will override the global settings that are set via the theme customizer Let us show you what we mean – If we right click on the heading for the homepage that’s being set and click on ‘inspect’, we’ll see that the font being used for Heading 1 or H1 is ‘Montserrat’

Within the theme customizer, if we navigate to ‘general’ Then go to ‘typography’ Let’s scroll down to the ‘header font’ option And select ‘Raleway’, then publish changes You’ll notice that nothing has changed

This is because the title font is being set within the module and overwriting what we’re setting here To remove the font being set at the module level: We’ll close the customizer Hover over ‘pages’ and select ‘all pages’ Select the page called ‘home’ In the next section, we’ll go through how to use both the back and front-end Divi builder

However, if we click on the ‘edit setting’ option for the text module hero section at the top Then navigate to the ‘design’ tab Scroll down to the ‘title text’ section then set the title text and weight back to the default setting by clicking on the arrow icon to the right This will reset the font options to whatever is set via the Theme Customizer Let’s hit ‘save and exit’ Then publish the page

View the page from the front-end You’ll notice that the title font has now changed And if we right click and inspect the font You can see that Raleway is now the font being used Let’s head back into the Theme Customizer

Ok, so what’s the point? The point is, if you have a large website with a number of pages, we would recommend resetting the fonts for the modules and setting global styles via the Theme Customizer and the module customizer which we’ll cover next The reason for this is that if you want to change anything later, such as the font, your accent color, or the default button design, you’ll only need to change it in one spot Otherwise, you’ll need to update every individual module which can be very time consuming and inefficient We would typically create a child theme where we set the styles via an external style sheet, however, setting these via the theme customizer is the next best option If that all went over your head, that’s totally fine – just ignore that for now

Bottom line, a lot of the styling settings you set here can be overwritten via the Divi Builder which we’ll go through in the next section If you’re brand new to making a website, this will be the best way to make changes to your website Ok, so let’s take a look at the theme customization settings Obviously, we’re not going to go through all of the options, however, we will cover how to choose the header navigation style for your website, set accent colors, and configuring the footer for your website For a detailed overview of every option, follow the link to the Divi Documentation on the OHKLYN blog here, then scroll down to the ‘Customizing Divi’ section and click on ‘view tutorials’

From there, you’ll be able to access the newest and most relevant information for the Theme Customizer and module customizer The first thing we’ll take a look at are the ‘General’ settings: Under the site identity tab, is where you can add a ‘site title’ and ‘tagline’ for your website If you haven’t uploaded your favicon via the Divi theme options, you could also upload it here Next is the layout settings, here you can enable a boxed layout, adjust the default content widths and heights for your site, as well as set your website’s default accent color For this example we’ll set ours to #0ddadd, by clicking on the color picker

Because we added our brand color to the palette earlier we can easily select it from the pre-loaded options Whenever you make any changes, remember to publish changes by clicking on ‘publish’ at the top If we go back, the next option is ‘typography’ Here we can set our default header and body fonts You can choose from a number of free web fonts and a number of Google fonts

In this case, we’ll set ours to ‘Raleway’ for both the header and the body Below that you can set your body link color, which we’ll set to our brand color Then there’s the default header text color and body text color, which we’ll leave as is but you could set this to suit your design Remember, if you choose to use a layout from the library where the fonts are set at the module level, these will be overwritten To ensure the font you set here is used throughout your site, you’ll need to reset the font option for the specific module via the Divi Builder which we’ll cover next

Let’s go back The last option for this section is the background settings Here you can set a default background color for your website or upload an image or texture Let’s move on to the next group of settings which are the ‘Header and navigation’ settings Here, we can set the header format by selecting a header style

This includes the default option You can also enable the vertical navigation option If we uncheck the vertical navigation option, you can also hide the navigation until scroll We’ll uncheck that Another option is the Centered logo option

Centered inline logo option Slide in menu option, similar to that on the OHKLYN website And, Fullscreen menu overlay option Pick the option you like the most and remember to publish your changes Next, we’ve got the ‘Primary Menu Bar’

This is the top navigation bar for your website Here, you can opt to make it full width Or, hide the logo image You can also set the height of your menu bar And set the max height of your logo

You can also amend the text color And, menu background color in this section Depending on which header style you go with, you’ll either have access to the secondary menu bar settings, or the Slide In and Fullwidth header settings These will look similar to the settings in the primary menu and allow you to further customize your website If you choose one of the header styles that support a secondary menu, this can be a great option for featuring your phone number, email or other call-to-action items above the fold

For more information on how to use this feature, follow the Divi documentation link and navigate to The ‘Divi Header & Navigation Theme Customizer Settings’ section which goes through all the options in more detail Next is the fixed navigation settings, this refers to the sticky menu or the menu that sticks to the top of the browser when the user scrolls down the page You can amend the fixed (or sticky) header options, by following the same process You’ll notice that the options are very similar to the settings we went through in the primary navigation panel Lastly, is the Header elements tab

Here you can enable or disable the social icons (if you’ve populated these via the Divi Theme Options), and the search icon You can also choose to show a phone number or email which will enable the secondary menu and feature this information above the primary menu The last thing we’ll cover here is the footer options for your website In this section, you can set the global footer for your website This requires choosing a column layout under the layouts option and using the Footer widget enabled areas that we covered before to populate your footer with content

This can be a little tricky for beginners and as such, we would recommend using one of the predesigned footer layout packs that we’ve linked on the OHKLYN post here There will be a video that shows you how to use any of these designs as well as how to set this as global sections that you can use on all of the pages on your website What we will do together though is update the bottom bar of our website (which is this part here) To do that, within the Footer options, we’ll navigate to the ‘bottom bar’ tab Here you can amend the background color, text color, etc

To amend the text, click into the ‘edit footer credits’ box and type in the information you want here For this example, we’ll add a copyright symbol which in HTML is an ampersand, the word copy, and a semicolon We’ll then add the year 2018, 2019, etc depending on when you’re watching this We’ll then add our brand name ‘Triangle’ Then a pipe character

And we’ll add the text ‘All rights reserved’ full stop Obviously you can add whatever you like here If you want to remove the social icons from the footer, go back and select ‘footer elements’ Then uncheck the box next to ‘show social icons’ Remember to publish any changes

Let’s go back to the theme customizer From here you could customize the default style of the buttons, amend the blog post headings and meta text styling such author names, dates, etc and adjust the default spacing on mobile and tablets Once again, we recommend going through the Divi documentation for more information on all the available options here, and remember to publish any changes you make To exit out of the theme customizer, click on the ‘x’ in the top left

Now, let’s take a quick look at the module customization options The module customizer is used to set the default settings for the various modules available in the Divi Builder which we’ll look at next To access the module customizer from your WordPress dashboard, hover over ‘Divi’ and select ‘Module Customizer’ As you can see, this functions very similarly to the Theme Customizer, it allows you to set some of the default global settings for the various modules you’ll use to build out your pages such as the image modules, blurb module, etc Once again, any changes you make to modules within individual pages will overwrite these settings

For example, if you wanted to control the global heading size of text in a blurb module, you would click on ‘Blurb’, and set the desired font size here While this gives you a little more control over global settings, if you know CSS, we would recommend managing these via the style sheet of your child theme rather than managing them here For beginners, you’re better of amending these at the module level as you have more control over the responsive styling, meaning, the ability to change elements such as the size of the font depending on the device your website is being viewed on A 60 pixel heading might look great on desktop, but it’s not going to work on mobile This is referred to as responsive styling and is really important to get right

If you want to explore the Module Customizer in more detail, follow the Divi Documentation on the OHKLYN post, then click on the ‘Customizing Divi’ option, and select ‘The Divi Module Customizer’ tutorial Now, let’s take a look at Divi’s best feature – the Divi Builder The Divi Builder is Elegant Themes’ custom built drag and drop page builder, and is one of, if not the best in the industry You’ve seen how easy it is to bring in modules, rows, sections, pages, and entire pre-built website designs in just a few clicks And now, we’ll go through how to customize these designs to suit you

We’ll also go through how you can create your own designs from scratch To do this, we’ll create the page that we used as the hero image for this tutorial which is this page here The Divi Builder has both a back-end editor (which we prefer working with), and a front end editor which is great for beginners as it allows you to see exactly what you’re doing in real time From our WordPress dashboard, if we hover over ‘pages’ and select ‘all pages’, click into the homepage or any page you created before and already loaded a layout into You’ll see the back-end version of the Divi Builder

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 this video and doing that now, as it will make the process much easier If we look at our homepage as an example, each of the most outer containers here, for example the purple tab and the blue tabs are referred to as sections If we look at our blue sections, you’ll notice that within them are green tabs which are the rows

You can have multiple rows per section The rows consist of varying column structures, and within those are individual content modules such as text blocks, blurbs, images, etc The purple section at the top is referred to as the full width section and only by definition consists of one full width column If we open up this page in a new tab and view it from the front-end You’ll see that the purple section is this heading section here

If we scroll down, the next section has three blurb modules, Which if we navigate to the back-end is this section here If we go back to the front-end, we then have an image background on the left and a CTA section on the right, and below that is a section with an opt-in form If we head to the back-end, this is the section with the image background being set on the row and the CTA on the right, and below that is the section with the opt-in form For each section, row and module, you can access the settings by clicking on the edit settings button which is the three lines on the left Obviously, the available options will differ depending on the section, row, or module you’re editing

Similarly, you can duplicate sections, rows, or modules by clicking the ‘duplicate’ button here To move sections, rows, and modules around, simply click and drag them into place To delete a section, row, or module, click on the ‘x’ To change the column structure of a row, click on the ‘change structure’ option Then select your desired layout from the available options

To add a new module, click on ‘insert module’, and select the module you want to add from the available options To access detailed overviews of all the available modules, follow the link to the Divi Documentation and navigate to the ‘Divi Modules’ section Here, you’ll be able to access all the information you’ll need to successfully implement any of the Divi modules You can also save any Divi module, row, section or page layout to the Divi library to easily use it in another section of your website For example, let’s click on the ‘feature 01’ CTA module

To save this to the library, all we need to do is click on ‘save and add to library’ We then name the module, in this case ‘Feature CTA’ We can then opt to make this a global element by checking the box What a global element is, is a module, row, or section that can be saved to the library and then used on multiple pages Global modules are all linked so that if you make an update on one page, it is then updated on every page where you’ve used the global module

This is great for deploying advertising banners, site wide footers, opt-in forms, or other content pieces that you want to be the same on a number of pages that you can easily update For this example, we’ll want to change the text to be unique, so we’ll leave the box unchecked To save the module, click ‘save and add to library’ Now, if we click on ‘insert module’, we can navigate to the ‘add from library’ tab, and the module we saved is there To add this to the page, we simply click on it and it’s now added to our page

We’ll delete that for now Let’s scroll back up to the top of the page If we want to change the heading for this page from the back-end, we would click on the settings option for the hero section at the top Then change the title to say ‘Make a Website’ If we scroll down, we could also change the button text and subtitle text here Further down we could amend the button URLs and below that, the image and background settings for this section

On the design tab, we can set the orientation and control a number of the visual elements One of the most important being the title text settings here And the content text settings here You can reset these to their default by clicking on the arrow to the right Which in our case, as we set the default header and body typography to ‘Raleway’, would mean that they would now be set to ‘Raleway’

If you want to customize these at the module level, one of the great features here is the ability to amend the font size depending on which device the user is viewing your site on This is indicated by the mobile icon to the right of the various settings For example, if we change the heading title text size to 62 pixels then click on the mobile icon, we’ll see that we can click on the tablet and mobile tabs to set a varying font size for each device This gives you more control over exactly how your website looks on all devices and is something we recommend spending some time on to get your site looking perfect To save changes to any module, row, or section, click ‘save and exit’

Divi is constantly upgrading and improving the Divi builder, so rather than us run through every option, follow the link to the Divi Documentation and module settings sections to get familiar with all the options Are you ready for the great part? We’ll now show you the front-end builder We’ll update our page to commit changes Then click ‘view page’ to view the page from the front-end To deploy the front-end version of the Divi Builder (or the visual builder) click ‘enable visual builder’

This will launch the visual builder Similar to what we covered from the back-end, if we hover over the hero section at the top, you’ll notice the same structural elements The purple section here indicates a full width section and the available options can be accessed via the settings tab in the top left If we click on the settings icon, the interface looks very similar, the main difference being that you can edit in real time If we close that, we can edit the text directly by clicking on it, and typing in some new text

If we scroll down, we can see the next section with the three tabs and can edit them directly from here To save changes, click on the purple circle at the bottom, then select ‘save’ As we mentioned before, Divi is constantly evolving and improving To ensure you have access to the latest resources, follow the link on the OHKLYN post here to the Divi Documentation From there, navigate to the ‘Using the Builder’ section

If you’re new to Divi, we recommend pausing this video and watching the ‘Getting Started With The Divi Builder’ tutorial by Elegant Themes, as you will learn the fundamentals you’ll need to know and see just how incredible the Divi Builder is These videos will be the best resource for you, as they will be the most relevant and up-to-date After watching these tutorials, go through and customize the individual pages for your website based on the page layouts you sketched out at the beginning of this tutorial What we’ll cover now is how to create the layout in our hero image from scratch using the Divi Builder For this, we’ll use a combination of the back-end editor and the front-end editor so you can see both in action

To exit the visual editor, click ‘exit visual builder’ at the top Then we’ll return to our WordPress dashboard by hovering over our site title and clicking on ‘dashboard’ To create a new page, we’ll hover over ‘pages’, and select ‘add new’ We’ll give this a title – Let’s call it ‘test’ Then select ‘Use the Divi Builder’

Let’s go back to the page we sketched out earlier In this example we want to create a hero image with a title, subtitle and two CTA buttons In our newly created page, there is a default section which is loaded in whenever you opt to use the Divi Builder For our hero section, we’ll create a new full width section by clicking on ‘full width section’ option here We’ll then drag this above the default section that was automatically created

Add a full width header module by clicking on ‘insert module’, and choosing the ‘full width header’ module We’ll add in our title of ‘Make Your Own Website’ In the subheading text box, we’ll add our subtitle of ‘Free Step by Step WordPress Tutorial’ Below that, we’ll set the button one text to ‘GET STARTED’ And the button two text we’ll set to ‘EXPLORE MORE’

If we scroll down to the button one and two URLs, here is where you’d set the url where you want the button to go For example, we’ll set the button one URL to /contact and we’ll set the button two url to /about Note that if you’re linking to an internal page of your website you don’t need to include the https or www part of the domain This is referred to as a relative path However, if you link to an external page, you’ll need to use the https or www part of the url which is called an absolute path

If we scroll down, we could add images, backgrounds or overlays here, however, we’ll set the background via the section settings, rather than in the module settings here We’ll then head to the design tab Here, we’ll set the ‘Text and Logo Orientation’ to center Then opt to use the ‘Make Fullscreen’ option This will make this module take up the whole screen above the fold

Meaning, the visible part of the screen the user sees when the page loads This prevents us from having to worry about messing with padding or spacing, and creates a nice feature Now, let’s scroll down to the ‘Text’ settings and change our text color to ‘light’ Depending on your Global styling preferences, you can either control the text settings via the theme customizer, or you can use the easier, but slightly more manual approach and set the heading fonts under the title text and content text settings here As this WordPress tutorial is more tailored towards beginners, we’ll add our text styles in here so we can show you how the responsive styling works

Under the ‘Title’ text section, we’ll select the level of heading we want to style, which in this case, is the H1 or Heading 1 Typically you should only have one heading 1 per page, and use Heading 2’s or H2’s to Heading 6’s or H6’s to demonstrate content hierarchy on your site Headings should be used for hierarchy in web design, not for styling purposes As you’ll see, we can very easily change the look of each heading to suit your design Headings are telling search engines about the structure of your content, so use them hierarchically

Hopefully that makes sense With the H1 option selected, we’ll set our ‘Title Font’ to ‘Raleway’ Because we set our global header and body font to ‘Raleway’ via the theme customizer, we don’t actually need to do this as ‘Raleway’ IS our default font, however, we’ll show you how to change the font in here anyway We’ll set our ‘Title Font Weight’ to bold You could very easily pick whichever font and font weight you want to use on your site from the dropdown

Or set it globally via the theme customizer, and then leave ‘Default’ selected We’ll then scroll down to the ‘Title Text Size’ option and set this to 70 pixels You’ll notice that the mobile icon appears If we click on that, we can then click on the tablet tab and set the title text size on tablet to say, 50 pixels Then we’ll set the mobile text size via the next tab to 30 pixels

As we’ll see later once we’ve saved changes, and resize our browser this will adjust our design to look great on all devices Under the Content Text option, we’ll set our Content Font to ‘Raleway’, and leave the weight at regular We’ll then scroll down to our subhead text section, and set our ‘subhead Font’ to ‘Raleway’ with the regular font weight And then set the Subhead Text Size to 22px We’ll set tablet to 20px

And mobile to 18px Next, scroll down to the button customization section We’re not sure as to why the button two options appear first, but next to the ‘Use Custom Styles for Button Two’ option, we’ll switch the toggle to ‘yes’ If they’ve changed the order of this by the time you’re watching this, then scroll down to the button two section first, and following along We’ll cover the button one settings next

Next we’ll set the ‘Button Two Text Size’ to 14px Then set the ‘Button Two Text Color’ to white, or #fff Leave the background color as is, as we want the background of the button to be transparent Set the ‘Button Two Border Width’ to 2 pixels The ‘Button Two Border Color’ will be white And the ‘Button Two Border Radius’ will also be 2 pixels

This refers to whether the button has rounded corners or not, the higher the value the more rounded the corners We want our ‘Button Two Font’ to be ‘Raleway’, however, to demonstrate how global fonts work, we’ll just leave this as default, as we’ve set our global font to ‘Raleway’ in the theme customizer Scroll down, and we’ll disable the ‘Show Button Two Icon’ The ‘Button Two Hover Text Color’ will be set to white Wherever you see ‘Hover’ this is referring to what happens when the user ‘hovers’ over the element

So in this case what happens to the button text color when the user hovers over the button For ‘Button Two Hover Background Color’, we’ll set our brand color of #0ddadd which we’ll select from the color palette selector we set earlier Similarly, we’ll set the ‘Button Two Hover Border Color’ to our brand color using the color palette selector The ‘Button Two Hover Border Radius’ will be 2 pixels We’ll then scroll down to the button one settings and select ‘yes’ for ‘Use Custom Styles for Button One’ ‘Button One Text Size’ 14px ‘Button One Text Color’ black or #000 ‘Button One Background Color’ will be white or #fff ‘Button One Border Width’ we’ll set to 2 pixels ‘Button One Border Color’ is white or #fff ‘Button One Border Radius’ will be 2 pixels ‘Button One Font’ will be ‘Raleway’ but we’ll leave as default as we set this globally Switch ‘Show Button One Icon’ to ‘No’ ‘Button One Hover Text Color’ will be white or #fff We’ll set the ‘Button One Hover Background Color’ to our brand color Similarly, the ‘Button One Hover Border Color’ will also be our brand color ‘Button One Hover Border Radius’ will be 2 pixels The last thing we’ll do is show you how to add some custom CSS to your design To our knowledge there isn’t an easy way to add padding to the buttons to increase the actual size or space around the text of the button If there is, please leave a comment below

For this, we’ll navigate to the advanced tab, and scroll down to the ‘Button One’ section Within the box you can add custom CSS targeting that specific element In this case we’ll add padding:10px 20px; This is applying 10 pixels of padding to the top and bottom of our button text which is an anchor or link text, and 20px to the left and right Now, if you’ve taken our CSS for WordPress course which you can sign up for at coursesohklyn

com, you’ll know that what we’re about to do next is not best practice Because the Divi styles at the time of recording this applies the important rule, the only way for us to overwrite this is to apply the important rule to this declaration to make sure the padding is applied If that all sounds like gibberish, that’s ok All we need to do here is add !important to the CSS declaration before the closing semicolon We’ll copy this CSS and paste it into the button two box below as well

Then select save an exit Before we preview this, we’ll add our background image and overlay to the section, by clicking on ‘edit settings’ in the purple tab for the section On the content tab, we’ll scroll to the 'Background’ section Here we can add background color, gradient, image, or video In our example we’ll add a background image and set an overlay to make sure our white text really pops

To do this, we’ll click on the background image tab, which is this one here We’ll click on the plus icon, or the section below We’ll upload this hero image here By dragging it into our media library Remember to set an alt text, from an SEO practice it can be a good option for this to align with the keyword your optimizing the page for

In this instance we’ll add an alt text of Make your own website dash hero image Then click ‘set as background’ We’ve added the link to this image on the OHKLYN post here, and in the description below, which will take you to this page here If you click on ‘download a preview’, you’ll be able to upload this image with a watermark to help recreate the look We use Shutterstock for a lot of the images we use, and we love this feature as we can trial images to see how they look on our sites before purchasing them

Ok, so we’ll then click on the background color option tab Here we can add the color that we want to overlay on our image You could also overlay a gradient by selecting the gradient option on the next tab We’ll set a background color of black and change the opacity to about 10% as we don’t want to lose too much from the image This will allow our white text to stand out more

To ensure this is set as an overlay, we’ll click back on the background image tab Then, scroll down to the ‘Background Image Blend’ option Here we could select from a number of options, in this case we’ll select ‘overlay’ Then select ‘save and exit’ From here, in the top right corner, we can either save this page as a draft, preview the page so far, or publish the page Let’s click on preview to see what our hero section looks like Ok, that’s looking good

Let’s head to the back end and we’ll save this page as a draft by clicking on ‘save as draft’ Later, we’ll publish this page by selecting ‘publish’ when we’re ready for it to go live Something that’s trending in 2018 and we’ll see more and more of in 2019 and beyond, is including angles or shapes over images Let’s skip ahead to the end of this tutorial and we’ll show you what we mean, See in the finished version of this page, how we’ve added this angle look to our sections This can be done in a number of ways

This can be done with CSS, however an easier way that’s beginner friendly, is using png images to achieve any range of shapes For this example we’ll use this simple shape here, which we’ll add to the section where the background image is set Because the background of the next section is white, and the shape includes a white section at the bottom and a transparent section at the top, it looks like the image has this cool angle effect If you want the shapes we use in this tutorial, subscribe to the OHKLYN newsletter You’ll be sent a welcome email with a link to the tutorial assets and the password to download any of our tutorial assets For this one, scroll down to the ‘Make your own website’ section and click on the ‘Download shapes’ button

This will download as a zip file, and in there you’ll see two shapes Shape one which is the one we’ll use here, and shape 1 Inv Which is the inverse of shape one which we’ll use in the counter section below – which you can see here on the final example Divi has just been updated to include 'Divi Shape Dividers' that allow you to include all kinds of divider shapes between sections which is also a great way to this We'll link a video on how to use these in the tutorial post

So we’ve gone through how to create a section using the backend builder and hopefully you see how you can use that approach From the backend of our test page, let’s enable the visual builder and build out the rest of our page To do this we’ll click ‘use visual builder’ This will launch the visual builder What we’ll do is add a fullwidth image module to our hero section that we just created

This will allow us to upload or shape 1 and create the angle effect we want If you don’t want to do this, you can just skip this part To add the fullwidth image module, we’ll hover over our fullwidth section (which is the puprle section here) Then click on the grey plus icon We’ll select the fullwidth image module You’ll notice that the options available in the visual builder are very similar to those in the backend editor Under image, we’ll select ‘upload image’ Drag our shapes into the media library, Then select shape 1 Add an alt text Then choose ‘upload an image’ We’ll then hit save, or the green box with the tick

And our image has now been applied, creating the effect we wanted You can play with the spacing, or change any of the settings by clicking on the gear icon which is the module settings To commit your changes, click on the purple circle with the dots, then select ‘save draft’ or ‘publish’ Once you’ve published your page you’ll have the option to ‘save’ which will update your live page If we refer back to our sketch from earlier, in the next section we want to create a two column row, with text and a button on the left and a video or image on the right

When we created the page, Divi automatically created a section for us, which is this section here When we want to create a new section we can click on the plus icon here, and then select the type of section we want to create from the options For this example we’ll use the section that was created before To make this a two column row we’ll hover over the section, then the row When the green outline appears, we’ll click the change column structure here

Then select the two even column option We’ll then be promoted to insert a module into our first column, or we could click on the grey circle with the plus icon We’ll scroll down and select the ‘text’ module You can move the settings box around by clicking and dragging it, or amend the size, by clicking on the corner and dragging it to suit We’ve prepared some text elsewhere so we’ll paste it into the text tab, which is the HTML text editor tab

Here we can paste in text then add our own HTML markup, or switch to the visual editor and choose our options from there, which is what we’ll do in this tutorial Whenever you paste text in, make sure you paste it into the text tab and not the visual tab to avoid bringing in outside styling from a word doc, etc which will mess up your website styling Now that we’ve pasted in the text we want to use into the text tab, we’ll click on the visual tab to add the styling we want We want Welcome to Triangle to be our heading, so we’ll highlight this text and set this to a heading 2 Then, save the changes

To add a button underneath our text box, we’ll hover over the text module and click on the plus icon towards the bottom We’ll select the button module Add our button text of ‘LEARN MORE’ in all caps Under the ‘Link’ option is where we set the link address for this button In our case we’ll set this to go to the about page by adding /about Here, we have two options, we can save our changes, and commit the changes for the page, then set a global default button style via the theme customizer (which is what we would recommend), or under the design tab, you could set the specific button style you want to use here Let’s save our changes to date Then save the page as a draft

Exit the visual builder, and return to the back end Now, let’s hover over Divi in the admin menu, and open the theme customizer in a new tab Within the theme customizer, click on buttons Firstly we’ll set the default button style by clicking on ‘buttons style’ We’ll set the ‘text size’ to 14px ‘Text color’ to black We’ll leave the background color as transparent You’ll see that the homepage is currently different as this is being overwritten at the module level The border width will be 2 pixels Set the border color to ‘black’ Border radius to 2 pixels We’ll leave the font as the default which will be ‘Raleway’ as set before Then select ‘No’ for ‘Add button icon’ We’ll head back and set our Buttons Hover style Set the text color to white And the background and border color to our brand color with no transparency

Lastly, we'll set the border radius to 2 pixels, and publish changes If we head back to our test page And launch the visual builder Our button style is now updated, and that looks good Now, whenever we want to add a button, we won’t need to amend the button design settings Even better than that, if we want to change the style of our buttons, we’ll only need to do it in one place – via the theme customizer Ok, our test page is starting to look pretty good, however we want to include a brand accent above the text module we just inserted

To show you what we mean let’s jump ahead to the finished layout What we’re referring to is this accent divider line here To create this, with the visual builder enabled, hover over the text module and click on the plus icon here to add a new module Scroll down, and add a divider module Under visibility, we’ll select ‘yes’ to ‘show divider’ In the design tab, we’ll set the color to our brand color Under ‘sizing’, set a divider width of 2 pixels And select a width of 80 pixels We’ll set the module alignment to left And then hit ‘save’ Hover over the divider, then click and drag it to the top of the column to sit above our text module

That’s looking good Remember to save the changes to your page as you go through The next thing we’ll do is insert a video on the right For this you can paste a YouTube url, vimeo URL, upload a video, or use a code module to add the embed code from a provider like Wistia For this example, we’ll paste the link to another one of our free tutorials that uses the Ultra Theme by Themify which is another great theme

The link to which is in the description below, and if you subscribe to the OHKLYN newsletter you’ll be sent a discount for that theme So to insert our video, we’ll click on the plus icon to add a module to the column on the right From there, we’ll select the video module Then paste in the url to our video And save the module

That’s how easy it is to add a video to your site Just as easily you could add an image if you don’t have a video to use That looks good, but we want to add a bit more space to the top of our video which is referred to as padding To do this we’ll click on the module settings for the video Under the design tab, we’ll choose spacing

And set 5% of padding to the top of the module Then select save That looks really good The last thing we’ll do is show you how to add more or less padding between rows Firstly, if you hover over the row so the green outline appears

When you hover towards the top of the row outline, you’ll see a shaded green area appears This is the default padding on the row You can easily click and drag this up or down to create more or less padding for the row Although this is one approach to adding padding, this adds padding in Pixels We prefer to use percentages as this works better for responsive design

In this example let’s add 5% of padding to the top and bottom of the row To do this, click on the row settings option Navigate to the design tab Then scroll down to the spacing section In there, clear the current padding, and add 5% of padding to both the top and the bottom Then, hit save Ok great – let’s move on to the next section

For the next section, we’re going to set a background image with a darker overlay, and within there, feature a four column row with number counters and titles for specific things related to our site To do this we’ll click the blue circle with the plus icon and select a regular section Then, set our row columns to four even columns The module we’ll use is the number counter Within there we’ll set the first title to ‘INDUSTRY PARTNERS’ in all caps

Set the number to 125, obviously you could set this to whatever for your specific use case Under elements, we’ll turn off the percentage sign Under the design tab, we’ll set our text color to light as we’ll set a background image with dark overlay to the section next As the text is light, or white, we won’t be able to see it now, but we’ll add our background image in a moment We’ll set our text orientation to center Because we’ve set our default fonts via the customizer we can leave all the text settings as is

The only thing we’ll change is set the number text color to white And then hit save To add our background image and overlay, we’ll hover over our blue section, and click on the section settings cog Under background, we’ll click on the image tab Then click the plus icon to add our image We’ll drag this image here into the media library Add an alt text Then choose upload an image This image is from a free image resource called pexels On the OHKLYN post here, there’s a link to our article on free stock image resources you can use for your website, we’ll also include a direct link to this image

To set our image overlay and darken the background so our text pops over the image, we’ll go to the background color tab Then click to add our color We’ll choose a background color of black with an opacity of around 60 percent We’ll go back to the background image tab, and set the ‘Background image blend’ to overlay Then save changes Now what we’ll do is duplicate the number counter by clicking on the ‘duplicate module’ option Then drag it to the next column We’ll do this twice more To update the number counter in the second column we’ll click the module settings option Then set the title to ‘MILLION IN TURNOVER (USD)’ And the number to 70 For the Third column we’ll set the title to ‘TEAM WORLDWIDE’ And the number to 250 And for the final column we’ll add a title of ‘LOCATIONS’ Then set the number to 22 Remembering to save changes

If you want to replicate the angled design as per the hero design for this tutorial You’ll create a row by clicking on the plus icon in the green circle Setting the row to a single column Then add an image module Click upload image

Then select the Shape 1 inverse image Hit save Then click and drag the row with the shape above the row with the counters Click on the row settings Under the design tab, open the sizing options, and either make the row fullwidth, or choose to use a custom width

Set the width to 100%, and save changes Lastly, remove any padding at the top of the row Then remove any padding at the top of the section We’ll then do the same thing for the bottom By creating a new row Selecting the image module and setting the image – this time the regular shape 1 from the hero section Setting the row width to 100% And removing any padding at the bottom Ok, that’s how you create a section like that

The last section we’ll create is a very practical layout, which is an intro section of text, with a three column row below that which features an icon, title and text To create the section, we’ll click on the plus icon here to add a new section and choose a regular section We’ll start by choosing a single column row Add a text module to this row Once again we’ll copy and paste some text into the text tab

Then change to the visual tab and make our title here a Heading 2 or H2 Under the design tab, we’ll scroll down to the bottom of the text settings, and set the text orientation to center And save changes To enhance the design, we’ll set this row to a custom width of 60 percent, by clicking on the row settings Navigating to the design tab

Then, under sizing, we’ll make the row a custom width and set it to 60 percent And save changes The last thing we’ll do is add a new row underneath by clicking on the icon here We’ll set this row to a three column row Then select to use a Blurb module

These are great for showcasing features, services or highlighting things that differentiate your offering We’ll set the first title to ‘Better Technology’ Paste some text via the text editor tab Under the link option you could link the title to a specific page if you want to do that We’ll go to the icon option and select ‘yes’ to use icon We’ll choose the cloud icon

To amend the color you could change your theme accent color via the theme customizer, under ‘general’ and ‘layout settings’ – which we set earlier We’ll then head to the design tab Under image & icon, you could also set your icon color, add a circle background to your icon, and change the placement We’ll leave these as is We will change the size of the icon though by selecting ‘yes’ for ‘use font icon size’

We’ll set this to 46px Once again you could amend this for various devices also Under the ‘text’ option, we’ll change the text orientation to center Then save changes We can then duplicate this module

And drag it to the next column We’ll update the title to ‘Results Oriented’ Change the icon to the chart Save our changes We’ll duplicate this once more and drag it across Update the title to ‘Award Winner’ Select a new icon Then save changes

And that’s how you re-create the design we used for the hero image of this tutorial using either the frontend or back end editor In the comments below, let us know which editor you prefer so we can focus our tutorials on using that builder Remember to save your changes, and when you’re ready to publish your page, all you need to do is click on the purple circle at the bottom of the page, and choose ‘Publish’ The process is very similar if you’re using the backend builder When you’ve created your website and have it looking the way you want, there are a few best practices that you should follow

If you want your website to be searchable via search engines like Google, you’ll want to make sure that your WordPress settings aren’t blocking search engines from indexing your website To check this: Go to 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 Add Your Website to Google Search’ This will help 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 on our YouTube channel We would also recommend installing Google Analytics on your website

Fortunately, we’ve created a free step-by-step video on how to do this as well Using the Divi theme, you can add the required tracking code within the Divi Theme Options tab, under integrations We cover how to do this in the video And that’s it for our ‘How to Make Your Own Website 2018 & 2019’ tutorial We hope you found this step-by-step WordPress tutorial helpful and are well on your way to launching your new WordPress website

If you’ve followed the steps in this tutorial, you’ll have full access to support through Bluehost and Elegant themes, so if you get stuck with anything, be sure to leverage that resource and view the support videos and documentation 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 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 learn how to make your own 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 security measures

affiliate marketing