I'm super long, I may take a bit to load 🙂

Build a Blog with Divi: A DIY Blog Tutorial

Jun 1, 2017 | 61 comments


Last updated: Jan 27, 2018

Who is this for?

Beginners

Anyone new to WordPress and/or Divi.

Aspiring Bloggers

Anyone thinking about blogging for fun or for money.

Anyone!

Anyone just wanting to join in on the fun!

What is was this?

This was a passion project of mine that went over how to build a blog with Divi. It was “live” from June – Dec 2017. It’s a really thorough walk-thru but you can also jump to specific sections you need help with if you already have a blog site built with Divi, as I go over quite a lot.

Backstory

I had seen plenty of Divi resources on the interwebs but hadn’t come across anything that was really in-depth (or at least not anything that wasn’t behind a paywall or only accessible through paid membership). The free resources I found didn’t go over some of the things complete novices may not have ever done before, like buying a domain or setting up WordPress.

That’s exactly what I aimed to do with this project: Build a (fake) blogging website using Divi and show my steps by updating this post weekly for anyone following along. At the end participants would have their own shiny, new blogging website.

For those who aren’t beginners but maybe just need help with a specific issue in the setup process, hopefully there’s something useful in here for you too!

With each section if I cover certain products or services I have a corresponding area with links to everything I use, as well as links I think may be helpful in explaining topics that might come up in the steps. No one is obligated to use any of the products I recommend of course, I’m just sharing what I use as part of running my business.

Even though this project is technically over if you stumble upon it post-2017 and still have questions or need help, do still use the comment section! I’m still around to help!

Future Updates

Because Divi has gone through so many updates and changes since first posting this I’m not going to be updating any screenshots of the builder steps. This is such a long post and I wouldn’t be able to keep up with the changes. I’m leaving this post up anyway, though, because the steps will still work, modules just may look a little different and functions might be in slightly different spots. Also there is SO MUCH MORE that I cover than just using Divi.

Some of the resources I link to ARE affiliate links. You can read more about that if you’d like in my fine print.

Required Materials

  • An Elegant Themes subscription for the Divi theme
  • A desktop computer or laptop with a modern, up-to-date browser installed (I’m a Chrome fan)
  • You will need to spend some $$ if you don’t already have hosting or a domain
  • Your logo (.jpg or .png file)
  • CONTENT & PICS!! Be ready to write posts if you’re starting fresh

Things I’ll go over:

  • buying a domain
  • buying a hosting plan
  • pointing the domain to your hosting
  • installing WordPress
  • installing Divi
  • installing plugins
  • integrating Mailchimp and Bloom
  • starting with Divi’s included layouts
  • adding your menu
  • styling the sidebar
  • styling the blog grid & fullwidth layouts
  • mobile tweaks
  • various CSS tweaks
  • using Chrome’s “Inspect” tool to see/edit CSS
  • and a bunch of other stuff!

Things I will NOT go over:

  • using FTP
  • any code other than CSS and HTML
  • Google ads / ads in general
  • SEO
  • building locally (we’re going all naked and live people!)
  • how to make money blogging (you’re on your own here)
  • anything I don’t feel I’m the right person for explaining or I think may be too technical for the purposes of this blog project

I’m pretty transparent in what I know and don’t know (I don’t know a lot! LOL), if there’s something I feel you should know but I can’t explain I’ll link to reputable sources.

Things to note:

  • This page is craaaazy long so please be patient if it loads a bit slow, I’m sharing a lot here! "”
  • I’ll be using a domain purchased from Namecheap
  • I’ll be using SiteGround for the hosting
  • I’ll be using Divi’s classic backend pagebuilder, not the frontend visual builder *
  • Participants should be using a fresh WordPress installation with zero custom CSS or plugins (unless you’re experienced enough to deal with potential conflicts on your own that may come up)
  • This is not meant to be your only source for Divi and/or WordPress information, you should still be using supplemental information like Elegant Themes documentation.
  • I will not be teaching CSS or HTML. I will be giving some snippets for you to use to fix issues that come up but it’s up to anyone following along to learn on their own about the code I’ll be giving.

*Apologies to anyone who’s interested in learning Divi’s frontend builder. I’m most comfortable with Divi’s original backend builder and for the sake of doing things efficiently and correctly I need to stick with it, BUT I encourage everyone to experiment with both.

A quick bit about me…

I’m Leslie and I’m the gal behind A Girl and Her Mac. I graduated with a degree in Graphic Design in my mid-30’s after working for 12+ years in food service I couldn’t find freelance work in GD but everyone wanted a website, and I did learn web basics in college so I went where the money was and eventually stumbled upon WordPress I found Elegant Themes and started using Divi when it was released With hard work, happy client referrals, and an abundance of help from blogs, FB groups, tutorials, YouTube, friends, and more I’ve run a successful web design business for 5+ years now I’m a designer who loves CSS, and even though I do write the occasional tutorial I don’t consider myself a blogger or a writer… but I’m still going to take a stab at this! Also I love emojis and will use them way too much!

Domain Registration & Hosting

I originally thought I would address these two separately but they really go hand in hand so I’m going to handle them in the same section. These first steps aren’t the most fun, it can feel tedious, but you get quicker with practice.
You could be in one of several scenarios:

  • You already have a domain
  • You already have a domain and a hosting plan and they were purchased through the same company
  • You already have a domain and a hosting plan and they were purchased through separate companies
  • You have nothing at all

Hopefully it doesn’t really matter which describes you since I’m trying to set this up to where you can hop in at the part that’s pertinent for you, and even though I technically already have both I’m going to go through this project as if I have nothing since it’s (mostly) geared towards complete beginners.

I mentioned in the intro I was going to be using two separate companies for domain and hosting. It’s totally normal and commonplace to have your domain registered through one company but host the site through another. I won’t go into why too much here, I’ll just say that pricing, reputation, and other factors can play a part, plus some I’m probably not even aware of heehee. I mainly do it because although I’m very happy with SiteGround for hosting I find their pricing for some of their other services is just too high, and domain registration is one of them (or at least for the domains I’ve happened to compare pricing for).

Another reason I’m choosing to use NameCheap for domain registration and SiteGround for hosting is because I think something that sounds very confusing to people is the pointing of nameservers, and it’s really a pretty simple thing to do. And don’t worry, I know a lot of you will be using GoDaddy as your domain registrar so I’ll include some screenshots for changing your nameservers there as well.

A nameserver can also be referred to as DNS (Domain Name Servers) or NS (Name Server), I’ve seen it spelled as one word and as two (?), but basically we want to tell our domain registrar — NameCheap — to look at our server at our hosting — SiteGround — and find our domain. From there our content gets rendered. 

Buying Your Domain

If you’re starting out with nothing most, if not all, reputable hosting companies will offer you a FREE domain when signing up (with restrictions of course). I would compare the renewal cost of your domain offered by your chosen web hosting company vs GoDaddy, NameCheap or similar.

Or if cost isn’t an issue at all it may be more convenient to have them both through the same company. If you end up doing that you can skip down to hosting.

Head over to your domain registrar of choice — see sidebar links for suggestions as well as domain-related articles. I prefer NameCheap for my domains but I do think GoDaddy and Google are fine too. You’ll see a handy search bar for looking up domains. Enter yours (hopefully it’s available) and you’ll see a bunch of domain name options based on your query. If you’re not using NameCheap searching and buying the domain at any registrar is pretty much the same and fairly easy.

NameCheap steps

You’ll see that there are a TON of domain extensions available nowadays, I use a .design myself. Whether you should get a .com or .org or one of the more “designer” extensions is going to depend on what’s most appropriate for you and/or your business, so you may want to research a bit. You might also notice some domain extensions are much more expensive than others. If you check out the “Domain & Hosting” button in the sidebar I’ve added some links there to some articles that address these two topics.
As I said I already own a domain — divi.pizza — that’s been sitting unused waiting for the perfect Divi project, like this one! 

Follow the steps for checkout and if you’re using a separate company for hosting like I am don’t leave the site because we’ll be coming back here!

Purchasing a Hosting Plan

Hosting is a BIG subject and I cannot stress enough that this is NOT the area to cut corners in!! So much is affected by the hosting, you will save yourself hours of stress and headaches if you just go with a solid managed WordPress hosting provider, and this does not necessarily mean the most expensive.

See sidebar links for suggestions as well as links to articles that go over types of hosting, but if you’re here because you’re new to WordPress and blogging and just want to start a personal blog – you’re not really sure where it will go yet – then most of the managed WordPress hosting suggestions here have very reasonably priced starter plans.

I use SiteGround for managed WordPress hosting but there are a lot of great hosting company options. Keep in mind NO HOSTING COMPANY IS PERFECT, or any type of web service company for that matter. You may read a lot of blog posts, chat room discussions, fb group threads, etc. regarding hosting and you’ll find there are pros and cons for all of them. It can feel overwhelming so just make the best decision you can based on your needs, and if down the road you find you’re not happy it’s really easy to switch to another hosting provider since you’ll have a full backup of your site (I’ll be going over my method for setting up backups as well).

At the very least your hosting should:

  • be running PHP7
  • have caching at the server level
  • offer free basic SSL by way of Let’s Encrypt or other
  • NOT be on this list (the tone is a bit over-the-top but the info is accurate)

If you have hosting and aren’t sure what the top 3 are don’t be afraid to ask your hosting company.
For the purposes of this blog project we’re using the StartUp plan that SiteGround offers since that should be more than sufficient for a DIY blog site. Plus it’s very easy to upgrade later should you need to.

There is an instance where the StartUp plan may not be enough and that’s for photography blogs or blogs you know will have a lot of galleries. Images are a big resource hog, especially if they are not optimized. Hosting a lot of big images comes at a storage cost. Consider a middle-tier plan to start with to be on the safe side.

Head over to your chosen hosting company. If you’re following my exact steps you should see this after clicking through the SiteGround link:

You’ll need to go through and enter all your personal or business details and you’ll be asked to choose a new domain or enter one you already have. Eventually you will get to this screen, click on My Accounts

Next click on Go to cPanel

Your cPanel is where you’ll be doing most configurations for your site. If you’re not using SiteGround your cPanel may look a lot different. Everything is there though, it’s just a matter of locating where everything is.
Copy and save your Name Server details because we will be entering them back on our domain registrar. Leave your cPanel open because we’re coming back!

I’m using Snagit for my screen recordings (GIFs) and I optimize them here. For annotating and screenshots I’m using Nimbus chrome extension (it now has screen recordings and it’s free).

For the sidebar buttons that open into an overlay I’m using Divi Overlays by Divi Life. If you’re new to Divi there are a LOT of plugins developed specifically for the Divi theme. It’s one of the things that makes the Divi community of the best WordPress sub-communities around and why I recommend using it.

Pointing Your Nameservers on NameCheap

Let’s go back to where we registered our domain, in this case NameCheap. You might’ve got kicked out while we were signing up for hosting so you may have to log in again. Go to Domain List > Find your domain and click ‘manage’

and you should see something like this

domain nameservers in namecheap

In the Nameserver section click on Custom DNS and you’ll see the two fields where you will enter your nameserver details. Once done click the tiniest checkmark I’ve ever seen "”

And that’s it for your domain stuff!!  Go ahead and head back over to your hosting cPanel.

Pointing Your Nameservers on GoDaddy

I know GoDaddy is a super popular domain name registrar so I’m going to show how to get to the right areas in their dashboard as well. Get to your main domain page and select Manage DNS for the appropriate domain

Click Change

Select custom and then enter your nameserver details that you copied from your hosting account dashboard and click save, ignore that ‘add nameserver’ button

and that’s it!! HIGH FIVE!! ✋

Installing WordPress

Get back to your cPanel in your hosting account, in SiteGround you can see there’s two WordPress icons. Click on either icon, they take you to the same spot.
If you’re not using SiteGround search for the WordPress logo, or you may need to look for an ‘autoinstaller’ or ‘website building tools’ section.

You should see something like this, click Install

These are my settings for my divi.pizza blog. I don’t use the www but it’s totally up to you. I also don’t select https because we’re going to add the SSL in just a bit

I don’t add the Loginizer plugin because I use something else to limit login attempts (I will go over what I use) but you certainly can (I’ve never used it so can’t vouch for it). We’re not selecting a theme because we’ll be uploading our Divi theme. The Twenty Seventeen theme will be installed by default. Click install once you’re done filling in the required fields and you should then see this

Now if you click on your domain you should see this!!

Woohoo!! You’ve installed WordPress AND set up a live site!!

Adding SSL (http → https)

It used to be that SSL was only expected to be on ecommerce sites or sites that were asking for personal information. Not the case anymore since Google decided to change things up several years back. Good news is most hosts should now offer some form of free basic SSL. Contact yours if you’re not sure. Since we’re using SiteGround we’re using Let’s Encrypt:

Let’s Encrypt is a free, automated, and open certificate authority (CA) that issues domain-validated security certificates. Let’s Encrypt SSL certificates are issued for a period of 90 days, and on SiteGround servers when installed via our tools they are renewed automatically. These certificates are domain-validated, don’t require a dedicated IP, and are supported on all SiteGround hosting solutions.”

sources one and two

Go to your hosting dashboard and get to your cPanel. Reminder: in SG (SiteGround) it’s My Account > Go to cPanel. Then find the Let’s Encrypt logo and click on it

locate your domain, activate HTTPS Enforce for your site

now go to your site and refresh, and voilà! You should see a little lock (every browser will display this differently, I think some might show a key).

Installing Base Plugins

Now that we have WordPress installed we can login to our WordPress dashboard. When you installed WordPress all your credentials were shown and you also should have received an email with your installation details. In general you can just add “/wp-admin” to the end of your url, so for example: mydomainname.com/wp-admin and you’ll be redirected and see this



With SiteGround (and most hosts) your new WordPress sites will come with a few pre-installed plugins that your host may have made or plugins by companies who they have partnered with. The only one I’ll advise you delete from your site is Hello Dolly (this is installed on every WordPress site, host doesn’t matter). Everything else you can research and see if it’s something you’ll want to use.

Here’s what comes pre-installed on my SiteGround installation:

  • Akismet is pretty good as a free option, but if you don’t use it be sure to find another one because every blog that has comments enabled needs a decent spam blocker (CleanTalk is excellent and worth the price).
  • Jetpack has a ton of features but the only one I’ll sometimes use it for is site stats.
  • SG Optimizer is SiteGround’s own optimization and caching plugin. If you’re not sure what caching is I’d leave it and use it as a good starter caching plugin but go ahead and deactivate it since we won’t enable caching until the site is done being built. I personally use WP Rocket (premium plugin) but I’ll link to some free and paid options that I’ve used and recommend in the “Plugins” section of the sidebar Resource Links.

What are Base Plugins?

What did I mean by “base” plugins? I mean the plugins that you would consider necessary on any and all WordPress sites you end up creating, no matter what they are for. I realize that right now the scenario for this tutorial is building one blog site, but it’s pretty likely that anyone following along may end up building more than one blog (or general website) so I’m trying to keep that in mind and mention things that hopefully will help you create good habits

What a blog site should have installed (unless your host provides it) and what I’ll be using in this tutorial:

This is optional but I highly recommend for it’s free features:

I’ll elaborate on a couple of these as I go, all are free options (some have premium upgrades available). I’ll share a few of my basic settings for some, I don’t want to share all my settings because they may not be appropriate for your site and I don’t want to lead anyone in the wrong direction.
It’s important to note that with some hosts some of these functions are already included. For instance WP Engine has it’s own caching environment and does not play well with all 3rd party caching plugins.
* The caching plugin isn’t activated until development is over, you can wait to install this if you prefer.

I’ll go over setting up iThemes, Imagify, and Updraft Plus. Akismet is easy and the other two we aren’t touching til later.

I’ll take this opportunity to say that the myth that you should limit your plugins to a specific number is COMPLETE BS A site running 5 plugins with one of them being poorly supported or poorly coded is just as vulnerable as a site running 100 plugins with one of them being poorly supported or poorly coded. Definitely limit them to only what you need, but don’t get too hung up on the number. Just research plugins as best as possible before you install them.

Quality is FAR MORE important than quantity.

Installing iThemes Security

There are quite a few free and premium options for security plugins (and services) but I’m going with iThemes Security free version for this project. I like how it has its settings laid out, it has a pretty intuitive UI (user interface – how all the buttons and stuff are laid out for you) compared to some of the other popular security plugins in my opinion. It’s highly rated and iThemes is a well-known product developer in the WordPress community so it gives me peace of mind to use one of their plugins. In truth I used a combination of two other security plugins up until a few months ago but felt it was time to try something else.

When it comes to plugins I think security and caching plugins are two of the most confusing to beginners (and still for me too!). There are a lot of terms a non-developer won’t know so it makes it difficult to know how to properly configure, but all security and caching plugins should have readily available documentation on their website, it’s just up to you to go through it — and let’s not kid ourselves, a lot of people do not read documentation and wing it instead. Security and caching are definitely NOT areas to mess with settings if you don’t know what they are, you can temporarily kill your site. 
On the plus side most come with predefined settings configured, these companies know not everyone who uses their plugins is a tech-savvy coder. Reminder: we’ll be setting up caching towards the end of this tutorial.
So, back to iThemes… first go to your Plugins page and click ‘Add Plugin’

Do a search for “iThemes” in the repository and you’ll see it come up. Install and then activate.

Click the ‘Get Free API Key’ and follow the prompts. You may need to click twice to see that you have successfully received your key.

You’ll see some settings are already set for you.

I can’t go through each of these for you because I don’t even know what all this sh** is  some things are very easy to understand and you’ll be able to tweak, others not so much, but you should take some time to at least go through and familiarize yourself with the settings. iThemes has documentation you can check out to help understand everything better, and if you don’t understand something but it’s enabled by default it’s most likely fine to leave as is. I do recommend to read up on WordPress Salts.
I don’t use their Database Backups so I do disable that, and there are two things I change that I’ll share. The first thing I recommend you enable are the System Tweaks. Open that and tick the first two checkboxes, then click save.

Next go to your Local Brute Force Protection and tick the box that says “Immediately ban a host that attempts to login using the “admin” username.

IF YOU ARE USING THE USERNAME ‘ADMIN’ YOU HAVE TO CHANGE IT!! Tell everyone you know that uses WordPress to NEVER use that username. Simply put it’s one of the first ways hackers will try to get into your site, they know that the default username is ‘admin’ and that many people never change it. If you’re not sure how to change it follow these steps, it’s an old article but the steps are the same.

I wish I could say that by installing one (or more) security plugins that your site is as secure as possible, that you’ll never get hacked, but that’s just not the case.
So much goes into securing your site, it’s many pieces that help make up a puzzle. Choosing reputable plugins, using trustworthy and well-regarded hosting companies, using strong passwords, these things and more help you be as secure as you possibly can but no site is hack-proof (I don’t believe anyway).
The great thing is, though, with backups there really isn’t much to worry about, anything can be fixed with a backup (plus the knowledge on how to restore it).

Imagify for Image Optimization

I need to note that a plugin is not necessary for this, a plugin isn’t necessary for a lot of things but not everyone is a coder nor is everyone comfortable doing things manually, so that’s where reputable plugins can help. If you don’t know how to optimize your images before uploading them then this is a great plugin, and YOUR IMAGES HAVE TO BE OPTIMIZED, that’s not optional (unless you want a slow-ass site ).
Find and add Imagify and install and activate

Go to settings and sign up for an API key if you don’t already have one.

Here are my settings but you can play with these to see what’s best for you. I will warn you that the Ultra setting REAAAAALLY optimizes, to the point of pixelation sometimes, so you should test how they look on the frontend. The great thing about this plugin is you can revert to the original photo and change the level of compression PER PHOTO should you need to.

Setting up Updraft Plus (for remote backups)

I’ve been a happy user of Updraft Plus for years, but I have so many colleagues that rave about All-In-One (for backups and migrations) that I feel a bit obligated to at least mention it as an alternative you may want to look at.
Go back to your Plugins page and click ‘Add New’, search the repository for “updraft” just like you did with iThemes and Imagify and it should come up.

Install and activate, then go to Updraft Plus settings. You’ll choose how many backup copies you want to keep, as well as how often to back up, and you’ll need to connect the backups to some type of remote storage (i.e. Dropbox, Google Drive, etc.). Follow any prompts to connect this service, click ‘save changes’.
We’ll also be setting monthly backups up through ManageWP. It’s important to have backups in AT LEAST 2 spots. Most hosts will also do automatic backups depending on your plan (SiteGround does but to be honest I’ve never needed to access them yet).

Once you’re done you can leave this plugin (and the other two we installed) alone for the most part. It will start scheduling your updates automatically according to your settings, and we haven’t really done anything yet so you don’t need to do a manual backup at this time (though it may be a good idea to test that they really are going to your remote storage).

Setting up ManageWP (for backups and more)

ManageWP is an awesome service for managing updates on multiple WordPress sites/blogs. You may only have this one site but I still recommend using ManageWP for its features that are available on the free plan, primarily the monthly backups. You’ll also get speed performance checks, Google Analytics integration, maintenance pages, and security checks with their free plan but just know that they are very basic types of these functions at best, but still good to take advantage since they’re free.
I really like their monthly backups because they restore really quickly and with zero hiccups (in my experience anyway). As mentioned earlier even though we just set up backups with Updraft Plus we should be backing up to at least two different places to be on the safe side. I don’t even count backups that are done with the host honestly, I still do 2 places on top of that.
By the way there are other services similar to this — I myself have tried InfiniteWP, MainWP, and WPRemote and ManageWP is definitely my favorite!
Go to ManageWP and sign up for a free account
On your own blog add the ManageWP Worker plugin (search the repository or download directly)

Once you’ve installed and activated it go back to your ManageWP dashboard and look for the plus sign in the upper left corner, click it and add your site URL > click ‘enter credentials’

it’ll do some thinking and tinkering and then you’ll see something similar to this (if you don’t see this make sure you activated the ManageWP Worker plugin on your blog!)

Woohoo!! Click ‘done’ (or add another site if you have any) and do some exploring…

ManageWP Dashboard

I can see that I have one plugin update, one theme update, and since we added our Google Analytics to our site earlier ManageWP automatically connects and grabs some of your basic data.
They have an excellent guide to help but it’s really simple to set things up. Be sure to activate the free monthly backups, security checks, and performance checks.

I’ll go over setting up the backups and the other two are very similar processes. Click on ‘backups’ to start > click ‘activate backups’

Select the region if it’s not already selected for you and click ‘activate’

You can change the time and date your monthly backups run, you can also pay a couple bucks to have it backup more frequently than monthly (totally worth it by the way).

when you activate the backups the first one will automatically start running, and when finished you’ll see something like this

Should you ever need to all you have to do is click ‘restore’ and it will restore to the backup you select. Between Updraft Plus and ManageWP I actually trust ManageWP a bit more, so if this is for your site I highly recommend paying the $2 to do daily or weekly backups.

More Tools

Make sure to look under the ‘more tools’ tab on the left, there are some useful things there like system info which shows pertinent information about your WordPress installation that you may need to know at some point..

and maintenance mode, which lets you hide your site to the public if you don’t want anyone to see it while it’s in the process of being built.

Installing Divi

If you don’t have Divi already downloaded head on over to Elegant Themes and login (go here if you need to purchase a license). Go to your dashboard and download it to your hard drive.

Go back to your WordPress dashboard and click on Appearance > Themes

click on ‘Add New Theme’ then ‘Upload Theme’

locate it in the place you saved it to on your hard drive, click install

uploading will take a minute or two…

once it’s done click ‘Activate’

Congrats!! Your site should look something like this


Don’t worry about the content you see there, it’s loaded by default (and will vary by host if you’re using an autoinstaller). We’ll be removing all that later when we go to start blogging.

Add Google Analytics (and Search Console)

Even if you don’t know what Google Analytics (GA) is and don’t know how to use it you should still have it on your site. You may intend on learning more about it, or down the road you could decide to hire someone to help with SEO and they’ll need your site’s traffic history. I’m not going over this area in detail because 1) I’m not an expert and 2) I have to cap the content of this tutorial in some spots so I can focus on the build of the blog.
We’ll also connect our site to our Google Search Console (formerly Google Webmaster Tools). Neither of these needs to be done this early in the build, I just prefer to get it out of the way.

First go here and click sign in < analytics and it will prompt you to sign in with an email account Google Analytics I have properties already so I’m not sure exactly what your page will look like, but you want to get to this page. If you see something that says ‘Admin’ try clicking that. We want to add a new site (property in GA terms) so click on the Property dropdown and click on ‘create new property’ then add your info and click ‘get tracking ID’ You’ll be pasting all the code in the ‘Website tracking’ box so copy it (and save if you need but we’ll be putting it in right now). Don’t close this, we’re coming back! Login to your blog site if you’re not already logged in. Go to Divi > Theme Options > Integration and paste your code in the appropriate box that Divi has available just for this  Now go back to your GA property page and click Property Settings scroll down and enable demographics and interest reports and enable users metric in reporting, click save Don’t leave yet, click on ‘adjust search console’ 


then you should see this (you might have to scroll up)

click edit and a new window will open; click ‘add a site to search console’

and yet another window will open up LOL, click ‘add a property’

enter your site’s full domain address, click add

click ‘alternate methods’ (we’re not using the recommended method because I don’t consider it beginner-friendly)

click on ‘HTML tag’ and copy the full line of code

Now go back to the same place where we added our Google Analytics code in our blog’s options (divi theme options > integration). This time we’re going to add it to a different spot

Remember that Verify button I told you not to click?? Now click it!! You should see something similar to this:

We’re still not done though. Go back to your search console settings and click edit again (if you closed this page go to property settings > click ‘adjust search console’)
Last time your property wasn’t there, now it is. Select it and add it

Now we’re done with this part, your site is now in your listed properties

This is not the end of your GA work, there’s SO MUCH more to it, but at the very least you’re connected. To learn more this is a good starting point. You should have received an email regarding search console, just follow the instructions as best you can (there’s useful help links in the email).

Creating a Child Theme

What is a child theme?

A child theme is a collection of files you add to your WordPress site so that you can make changes to the parent themes’ code and prevent that code from getting overwritten when that parent theme has an update (here’s a way better explanation). It’s considered good practice to use a child theme on every WordPress site.
If none of that made any sense to you don’t worry "” If you’re here most likely you’re a beginner so why would it?

Does Divi need a child theme?

If you never touch any of Divi’s parent files (i.e. header.php or functions.php) then NO you technically do not need a child theme. Divi’s custom CSS box (which we’ll be using for our design tweaks) does not get overwritten when Divi has an update and we will not be adding any functions in this tutorial that require touching Divi’s parent files, so if you’re following along just for building a simple (but awesome!) blog you do not need to do this part, but I strongly recommend that you do. It’s really quite easy and you’ll feel like a rock star after you do it!

Can I add a child theme even after I’ve already started or completed a site?

Yes you can.

Ways to add one:

There are several ways to add a child theme. You can create them manually, use a plugin, or there are some good child theme creator tools out there. In fact there is so much information out there on how to do this anything I add would just be redundant, so I’m just going to recommend two ways to add a child theme that I’m aware of and that I know work.

  • Divi.space has a child theme creator that many in the Divi Facebook groups swear by. I’ve not used it (only because I have a child theme I created manually) but I’m confident in recommending it.
  • Orbisius child theme creator is a plugin that I have used in the past. Back when I used it it used the old way of calling a stylesheet (@import) but it has since been updated. I like that you can delete the plugin after using it.

I’m not going to show step-by-steps for adding Orbisius because you all know how to search the WordPress repository now (just like we searched for Updraft Plus earlier). The Divi.space tool is pretty self-explanatory but I will show you what I put in the fields in case you’re not sure:

After you submit your info you’ll receive an email with a link. Click that link and download your zip file. Remember how we installed Divi? Do the exact same thing with this zip file, go to appearances > themes> and upload it just like you did Divi and activate it. DO NOT DELETE DIVI.
Afterwards you should see something similar to this, with your custom screenshot visible. If you didn’t supply one Divi Space provides one for you.

In the Divi community you may find that there is much discussion about child themes and premium divi child themes. The two are very different:
A regular child theme is just a bare bones child theme like what we just went over, it will have no added design or configuration. They’re essentially (sort of) blank files waiting to have code added and can be used on any WordPress theme.
A premium Divi child theme, on the other hand, is an entirely pre-designed website and can only be used with the Divi theme. Most come with several pre-built pages and sometimes blogs, some are designed specifically for ecommerce and integrate WooCommerce, and all you need to do is add your images and text and tweak to your branding. We’ll be going over these more when we get to the design part.

Adding Pages & Main Menu

If we take a look at our site we can see it’s pretty lame lol

First let’s add some pages to our site. It’s okay if you don’t have your content, I just think it will be easier for anyone following this tutorial if we set up a sort of “skeleton” of the site so we can have a few visual references, like the navigation.
Log in to your blog site if you’re not already logged in. Reminder on where to log in: yourdomainname.com/wp-admin
Go to Pages in the left sidebar and add a new page

I’ll just be adding an ‘About’ page, ‘Contact’ page, and a ‘Home’ page but you can start with whatever you’d like, remember you’ll be coming back to add your real content so don’t worry too much about what it looks like now.
Add your title and click ‘use the Divi builder’ button

select ‘load from library’

The following window will pop up showing one of the best features about Divi, their predefined layout library. It’s especially great for anyone new to Divi or anyone unsure how their content should be laid out.
I’m going to select their ‘About Me’ layout for my about page, here’s a handy PDF showing what each layout looks like along with their module structure. It’s a bit dated but everything looks to be the same.

Note: On my homepage I’m using the “Blog Masonry” layout

So now my main navigation (a.k.a. main menu) looks like this. I have two ‘Home’ links and that sample post that SiteGround stuck in my installation (some hosts do this) isn’t assigned a category so it’s showing up as ‘Uncategorized’. We’re going to fix this next.

Go to appearances > menus in the left sidebar of your dashboard, name your menu and click ‘create menu’

select your pages and click ‘add to menu’

check the box that says ‘primary menu’ and click ‘save menu’

Now when we look back at our site we can see this

Setting the Homepage

To set your homepage go to settings > reading and choose the ‘Home’ page you just created. While you’re here also check the box to “discourage search engines…”. Since we’re in development mode we don’t want our site indexed.
NOTE: Remember to UNCHECK THIS BOX when you are ready for Google (and other search engines) to start crawling/indexing your site. If you end up using Yoast for your SEO needs it will alert you to turn this off.

Even though I’m only going over setting the homepage this is a good time to go through all your settings and set everything up. Things are pretty self-explanatory but I’ll share a couple of my settings to help:

Divi Theme Options & Customizer Settings

Divi Theme Options

The Divi theme options panel on the left side of your dashboard is where we’ll be a lot, so get familiar with it.

I’ve been using Divi for several years now (since it came out) and there are still settings that I don’t change from the default settings. You’ll want to go through and see for yourself what the settings do and what you’ll need to change (or leave alone) for your site.

It’s important to note that different blog settings are actually in several different spots BUT what settings you’ll actually need to touch will depend on whether you will be using the default WordPress post layout OR Divi’s pagebuilder for your post layout (the method we’re using in this tutorial).
Don’t feel too overwhelmed or confused, I’ll go over our blog settings as we go since it makes more sense.

Get familiar with everything under the ‘General’ tab. I still need to make a logo which is why I haven’t uploaded anything yet  I don’t plan to use Divi’s header and footer social media icons on this blog. The reason is Divi doesn’t come with all the social media icons I seem to need, and while I can code them in myself I’d rather show you how to integrate Font Awesome to use in place of Divi’s icons, because more than likely you’re going to want an icon that they don’t have as well.

While I’m here I just want to mention since Divi has a lot of new features being added so often…

The Customizer Settings


This is where you want to set a lot of foundation settings that can be applied to your site globally (your settings are applied everywhere on your site). This is something I can’t really show, you’ll just have to play around and choose your fonts and colors, the look of your buttons, etc. BUT Elegant Themes blog comes out with so many resources and this is a very thorough blog post on the customizer that should help. Everything here can always be changed so don’t feel too stressed about your selections.

Updating Divi

Most likely you’ve seen a little update notification in your dashboard because ET is doing a lot of improving and fixing in Divi 3.x. It is important to keep your theme up to date but I personally wait to update at least 2 weeks between versions

First get your API key from your ET dashboard

Then go to Divi theme options > Updates and enter your ET credentials

Known Issue

Normally this will allow you to see when you need updates BUT sometimes it doesn’t work (no clue why). If that’s the situation you are in you can always use ET’s own updater plugin. First go to this page and download the zip file referenced. Upload it just like a regular plugin and add your username and API in the plugin settings section (that page has detailed instructions if needed).

Creating a Blog Post

We’re going to dive into creating some posts because, as I mentioned way up there somewhere, with this being a blog site we really need blog content to be able to start building. It would be awesome if you had content and photos ready but if you don’t that’s okay too! I’m going to be using dummy text (a.k.a. latin lorem ipsum text) and some free stock photos.

DO NOT get in the habit of using photos you find on Google!!
I know it’s tempting but don’t. Always make sure you are using original photography, premium stock photos that you paid for, or copyright-free images (unless you’d like to risk being sued, and yes it absolutely does happen).

Creating a blog post is pretty simple but it can be really daunting in the beginning. There are two ways to create a blog post when using Divi:

  • by using the default WordPress post layout
  • by using Divi’s pagebuilder to create the post layout

Go to Posts in your WordPress Dashboard sidebar. If you got SiteGround you’ll see that you have an included default post. We don’t need that so trash it.

next click ‘add new’

Create a Blog Post – the Default Way

For any blog post the bare minimum you need is:

  • a title
  • a featured image
  • content

but these help you really get the most out of your blog as a whole:

  • categories
  • tags
  • post formats

You can see in my post I’ve added my title, my content (fake text for now), my featured image, and I’ve created a couple of categories. I didn’t create any tags and I’m just using a standard blog post format for now.
I’ll include some links in the sidebar to help with all blog post aspects but I don’t want to get into detail about the actual writing or content creation on this tutorial because there’s already so much information out there for that, and I want to stick to the build and design of the entire site since that’s the main purpose of this project.

after I hit publish this is what my post looks like

Create a Blog Post – the Divi Way

Go back to the post you just created and click that giant purple button that says ‘use the divi builder’

and this happens…

Now we can use any module or section or layout that we want for our blog posts because the Divi builder is enabled. It gives us a lot more freedom with our layout.

The Big Decision

So this is where you have to decide if you want to use default blog posts or Divi blog posts. Here are the main differences:

Default

  • you can use blog post formats which affect how your blog grid looks on the front end
  • you are pretty much confined to the one column / sidebar layout
  • you don’t have to do any extra steps to get all your blog posts to have the same layout
Divi

  • blog post formats are not available*
  • you can arrange your layout however you want using the Divi builder, just like a page
  • there are extra steps in making each of your posts have the same layout
Neither one of these is necessarily bad or good, one isn’t really better than the other. It just depends on 1) what type of blog you have and 2) do you mind having one or two extra steps to do every time you write a blog post?
I’ll give an example of why I used the default post format on a Divi site I created not too long ago. I’m one of several participants in a podcast called Divi Chat. This podcast is a video podcast so when building the site I knew it needed to be simple for people to watch the video they wanted without having to click through to the entire post if they didn’t want to. If you go to this page you’ll see what I mean, you can click directly on the play button on any video

This was important as it was a UX (user experience) detail meant to make it easy for the user to see what they wanted in as few steps as possible. It makes sense here because it’s a video blog so the video blog post format was really suited to it, but for a blog where videos will not be a big part of the content that may not be important whatsoever.
*I know how to get the blog post format box back into a blog post using the Divi builder but even after setting a non-standard post format it did not apply, but if someone has seen otherwise please let me know!
Something to keep in mind: if you choose one method now and change your mind later it can be a bit of a task switching, especially if you’ve racked up a decent number of blog posts. That’s why I think it’s better to decide early on what will work best for your blog.

Using Divi’s Pagebuilder on Posts

If you’re deciding to use the default WordPress post layout that’s totally fine! You can just skip this section. I’m going to backtrack just one step and show how we left off, this is what my post looks like in my dashboard (remember I clicked the purple ‘use the divi builder’ button). I have one text module with the content I put in..

We can create whatever layout we want because of the builder! We don’t want to get too crazy because we don’t want to alienate anyone, blogs have been around for quite some time now and there’s something to be said about consistency. People are used to seeing the sidebar with pertinent information in it so we are going to leave that, we’ll also add a few more areas of interest though.
The first image is of a typical blog post layout, the other is the layout I’ll be making with the builder (please excuse the crude sketches "”)

NOTE: I’ve made 6 fake blog posts with a featured image, categories assigned, and some content just so I could have something to show up in my post slider module.
Divi comes with a lot of modules for you to use on your layouts. Here’s the modules I’m using on mine but you can use whatever you’d like. And don’t worry! I realized as I was doing this that screenshots of stuff isn’t going to be enough so I’ll be adding a download option below so you can import this layout and play with the settings

So I’m basically going to start adding my modules based on my drawing. You don’t have to do a sketch but it can be helpful. I’m actually really bad about sketching things out first but I’m trying to get in the habit because it is a major timesaver!

notice how you can add labels to your modules to help you remember what is what

one last thing that’s super important, in the upper right corner you’ll need to change two settings to make our layout look how we want

Now when I look at my post this is how it looks

Something you HAVE to get familiar with is using the “global” setting in the Divi modules. You can read about it here and here, and I’ll add more links in the sidebar.
Play with the selective sync and see how powerful global modules, rows, and sections can be. Used properly they drastically cut down build time and make things easier to manage. I say used properly because when I first started out I completely used them wrong and had the same text on all my posts LOL!
UPDATE: I go over adding a global header for reusing on all your pages here.

Saving and Re-Using a Layout

So now I have a layout I’d like to use, how do I use it on another post? While on the post you want to duplicate click “save to library”

name your layout

Start a new post, click on ‘use the divi builder’ then click ‘load from library’

click on ‘add from library’ and then click ‘load’

Woohoo!! Now you’ll see this

Importing a JSON File

I’m going to show you how to import a layout so you can import the one I made and take a look at the settings. Since I’m doing this literally as I go I’m figuring out the best ways to help you learn on the fly, and playing with a pre-designed layout seems like a good way to get you started.
First download my layout. Click the blue button below, save the zip file somewhere on your hard drive, DOUBLE CLICK IT and you’ll see a .json file called “pizza post”

Add a new post, click the ‘use divi builder’ button and click the two little arrows

Click Import > locate that .json file that you downloaded > click ‘choose file’ and import it. It may take a few seconds. You’ll need to have your own published posts for it to show up correctly!

When done go through each module and try to see what setting controls what. A lot of using Divi is just taking the time to learn what the settings in the modules do but it’s fun!!  I’ll add links in the sidebar “Blogging Links” button that help with module documentation.
** If you see that there’s no image behind your text on the top it’s because you need to add a featured image to the post.

It’s good to get the hang of knowing how to import and re-use a layout with the Divi library because it is so easy, but I do want to let you know about a plugin I use sometimes when I know I’m going to be using the same layout, like we will be doing with our blog.
It’s called Duplicate Post and it lets you duplicate a post with one click (instead of the few steps that it takes us when we use the method shown above). You can configure what exactly it duplicates in the settings. It really is a handy little plugin and it works on pages as well, not just posts.

Blog Meta Info Settings

Blog post meta information lets the user know some particulars about the post, the most common information being the date it was published, the author, the categories assigned to the blog post, and the visitor comment count. In Divi there are several areas to control this information so it can be a bit confusing.

In the Blog Module

When you are using the blog module all the meta information can be set in the blog module itself under the design tab.

On a Single Blog Post

These settings control the meta info on individual blog posts only if you are NOT using the Divi builder on your posts. If you are using the Divi builder (like I am in this tutorial) you DO NOT need to set these (and in fact they won’t be applied anyway).
If you’re using the Divi builder you’ll control this information in the post title module and not here.

On Search Results / Archive Pages (i.e. category pages)

For these pages there is a different spot…

Creating a Custom Sidebar

Creating different sidebars can come in handy if you want certain sidebar content to show only on certain pages or posts.
To get started click on widgets on the left side of your dashboard. You’ll see a custom widget area on the lower right side. I think the wording here is very confusing because we’re not actually making a custom widget, we’re making a custom sidebar (or at least that’s what it seems like to me). I know technically it’s a widget area, but I guess because I’ve never heard of it referred to as that it just doesn’t make sense to me  *shrug*

Name your sidebar and click create and you see this

reload the page or click widgets again and now you can see your custom sidebars you just created

Now when we want to use a specific sidebar on our page they will be available from the dropdown menu in the sidebar module

Setting Up Bloom with MailChimp

If you’re following along for this part you’ll need:

Create a MailChimp List

Login to your MailChimp account. If you haven’t already you’ll need to create a list so our Bloom signup entries have a place to go. In the upper left of your MailChimp dashboard locate the ‘Lists’ tab and click ‘create list’

a dropdown will appear and click ‘create list’ again

On the next page is where you’ll have to put your personal information and add some basic list settings so I won’t show a screenshot of that part. After you’re done in the upper right click on ‘account’

then click on extras > API keys

click ‘create a key’

copy your API key because you’re going to need it for Bloom settings

Creating a Bloom Optin

To get Bloom you must log in to your Elegant Themes account and download the zip file just like we did with Divi.
Installing a plugin that is NOT on the WordPress repository is just one tiny bit different. Instead of looking up the plugin you’ll need to upload it from wherever you saved it on your hard drive after downloading it from your account.

Once you’ve uploaded and activated it go to your Bloom settings. Click ‘new optin’ and select the inline style

this is where you’ll paste the MailChimp API key that you just copied

after you authorize your lists will show up in a dropdown menu, select the list you just made

Click ‘next’ and you’ll see a bunch of optin looks. I’m not going to be using an image on my optin because our footer area is a bit slim and I don’t want my optin to be too tall, so it doesn’t really matter which one I pick, BUT make sure the email field and the button are on the same line. This is important because of the space we have to work with in the footer. I’m using the first optin that’s already selected.

Scroll aaaaaaall the way down to the bottom and click ‘next’

Go through and set up your optin, here’s my settings (if a section isn’t shown it’s because I left it with default settings)


You can preview your optin by clicking the little eye icon

click ‘generate shortcode’ > copy the shortcode in the popup

click ‘save & exit’ and go to your widgets

Add a custom HTML widget to footer area #3

paste the shortcode you just copied and save

now I have this in my footer area

Not to worry. This is the kind of stuff I’ll be giving you code for once we start getting into CSS. It’s also looking pretty plain but I have plans for this footer area (hint: we’ll be using Canva
*** Reminder: I will not be teaching CSS or HTML. I will be giving some snippets for you to use to fix issues that come up but it’s up to anyone following along to learn on their own about the code I’ll be giving. ***

Designing the Homepage

Let’s go ahead and start making our homepage look like a real homepage. This is mine as of now, pretty plain as I’m just using part of a predesigned layout that came with Divi (blog masonry layout) and I’ve not really done anything to it..

and here’s another of my (very crude) sketches of what I’ll be looking to achieve

What Should You Put On Your Homepage?

We’re all going to want different information on our most important page of all — our homepage. Since it’s a blog obviously we want some posts to show up, maybe you want a lot more posts than what I have, but I prefer to show some and add a button for people to click through to view more.
The homepage is a pretty crucial component to the entire website. It’s the first thing people see when they come to your site (usually) and you want people to want to stick around and be drawn in by the visuals as well as the content.
If you’re not a professional web designer you’re not going to really know what “should” be on your page other than what common sense dictates, but if you have a few favorite bloggers you follow then take a cue from what type of content they have on their homepages. It’s always a good idea to look to successful mentors when you feel you’re in a pinch and not sure what goes where.
I’ll give a little breakdown of what was going through my head when I arranged my homepage sections in my sketch:

This is the area at the top of the page. When talking about the homepage specifically it’s usually referred to as the ‘hero’ section but ‘header’ is used often as well. This section (plus the one underneath depending on height of these sections) is what is referred to as “above the fold”, meaning the area that is visible when a user first lands on the homepage before scrolling. 
One of the most common design elements used in this area are sliders, and I want to talk about sliders briefly because I feel they get a bad rap. You may read a lot of articles that say how sliders are horrible for lots of reasons, and for the most part I agree. When I use a slider, though, I really only take advantage of the movement of the background image, not the text or the call to action button. So while the image may change I set the text and button on each slide to stay the same. This way visitors still get the visual movement they expect to see but we’re avoiding most of the pitfalls that concern slider-haters.
I didn’t make my slider terribly tall or anything, I don’t want it to take up too much “real estate” space. My blog is sort of going to be built in layers, meaning I’ll be tweaking my section settings and adding/removing sections several times over until I get it right (you will too lol), so I’m not too worried if I don’t have enough CTA’s right now.
I want to show the most recent three posts and I want the most recent post to show up bigger than the other two. I just think this looks cool and I like that the most recent seems more “featured” in a way. Plus it’s just a nice change from all the other blogs using the standard blog grid.
I’m also going to add CSS to remove the excerpt completely. I just prefer how it looks with only the title and meta info but if you want your excerpt to show you can just not add the CSS I’ll be providing.
I changed my mind about having a dedicated About page because I just don’t have a lot I want to put on it, so I’m okay with just having a section to link to. I’m really going to use this area to describe the blog and this project, not so much me.
It’s not necessarily good or bad to just have an about section and not a page, but I should mention that it can be better for SEO purposes to have it separated out as a page. If knowing about you and your background is really key to your blog and you think it’s important for your reader base to know as much as possible about you, then you should do a dedicated page about yourself / your background / your blog. Do what feels best to you.
You’ll notice I’m thinking about adding a slim signup section right below my header but I already have a signup in my footer. That may seem redundant, and it would be if both were visible in the same window at the same time when viewing, but they won’t be so it’s okay to me. You may not agree, though, and may want to omit it from your homepage layout.

After adding modules and doing some tweaking in the settings (and adding a little bit of CSS) this is what my homepage looks like now. It will need some more CSS for mobile but mobile stuff comes last

In this layout I’m using some of Divi’s newer background blend features. If you’ve ever used Photoshop at all you’ll recognize the blend modes. Honestly I never remember which blend does what except “multiply”, I always have to select each in the list and look at them one by one LOL! "”

Import My Homepage 1 Layout

Just like the blog post layout I think it’s best if I provide a layout for you so you can go through the settings and see how I created the look. Be sure to check all the tabs in all the modules because I put CSS in some advanced tabs, particularly the slider and the blog. The two blog posts towards the right are using the blog grid format and not fullwidth format like the first “featured” post, but I’ve added CSS in the fullwidth module advanced tab to make it mimic the look of the grid, don’t forget to check it out!
Download the file then follow the same instructions I went over here.

Optional CSS Code

Woohoo, finally we’re adding some CSS!! If you want to hide the excerpt on posts 2 and 3 like mine add the CSS code below to your Divi Theme Options > general > Custom CSS box, don’t forget to press save.

{;} css code

/*** HOMEPAGE BLOG SECTION ***/
.et_pb_blog_grid .et_pb_post p {
    display: none;
}
.et_pb_blog_grid .et_pb_post .post-meta {
display: block;
}
/*** STOP DESCRIPTION TEXT FROM TRANSITIONING ***/
.et-pb-active-slide {
opacity: 1 !important;
}


In case you’re curious the first snippet hides all the paragraph text (p) and the second snippet makes sure the meta info is still shown (since it’s technically part of the p text). Also this CSS is only being applied to the blog grid right now, the fullwidth is still showing the excerpt. I like this but I may change my mind later and remove the excerpt from all of them like in my sketch. If you know you want the excerpt removed from all blog posts delete both instances of .et_pb_blog_grid from the CSS.
This is just one way to code this by the way, there may be different CSS to accomplish the same goal.

Import My Homepage 2 Layout

I wanted to provide at least one other look and tried to keep this one more traditional by putting the sidebar on the homepage. I’ve brought in a separate menu below the header just for categories as well.
I also had to create a custom sidebar for this layout, which you can see how I did here. A custom menu and custom sidebar are needed if you want it to look like my demo and I show you how to do both.

(Not) Optional CSS Code

The following code has to go in your Divi Theme Options > general > Custom CSS box, don’t forget to press save.

{;} css code

/*** FULLWIDTH MENU MODULE ***/
.et_pb_fullwidth_menu .fullwidth-menu-nav>ul {
background: #dec181;
margin-top: -30px;
}
.et_pb_fullwidth_header .et_pb_fullwidth_header_overlay {
z-index: 0;
}

Chrome Inspect Tool & CSS

We’ve added some CSS for some styling a couple times now and I want to touch on using Chrome’s inspect tool to find out the right selector to target a certain something on your page.
On my homepage 2 layout for example, this is how I grabbed the selector so that I could give my custom menu a background color and raise it up slightly to overlap the header image:

  • hover over the area you’re interested in inspecting (in my case the yellow menu)
  • right-click (mouse) or control-click (trackpad)
  • click “inspect”


after you click “inspect”

chrome inspect element

click to enlarge

I was going to go more in-depth on using Chrome’s inspect tool but I no longer have to  My friends over at BeSuperfly just recently put out a great video tutorial showing how to use it. It’s pretty long and way more detailed than anything I could’ve put together so I’m very happy to recommend it!
This is also a great resource if you’re getting started with learning CSS.

You may be wondering why some CSS code is put in the advanced tab of the modules and other CSS code is put in the custom CSS box (or stylesheet if that’s what you’re using). The advanced tab is great but not all kinds of CSS can go in there. Media queries for example. Yes, Divi does come with settings for tablet and mobile, but sometimes that just isn’t sufficient for what we are trying to accomplish. Also some classes that we try to target may be a bit “nested” and the advanced tab doesn’t provide a spot for every class in the element structure (it’s not really feasible that it would).
I will always use module settings first wherever possible in this tutorial, but I do think learning the basics of CSS is incredibly empowering when you are building your own website.

Adding Font Awesome

Divi’s options panel allows for 4 social media links to be displayed in your header and your footer — Facebook, Twitter, Google Plus, and RSS Feed — but what if you have others you want to share? Most likely Elegant Themes will address only having those four fields at some point (fingers crossed) and you can buy this plugin if you don’t want to code, but I’m integrating Font Awesome since they have a pretty big icon library, they add to it often, and because they’re vector-based (scalable without losing quality).
FYI: There is a way to add more ET social icons in the header and footer by customizing child files, but most following along will not be comfortable touching their core files (and I’m not going over that anyway), so that’s why bringing Font Awesome in is the best choice. 
Even though I’m just using it to add social media icons in my main menu, once you add their library to our site you can use their icons anywhere you want!

Add Font Awesome Library

First let’s add their library to our site. Go to Divi theme options > integrations in the head section add the HTML code (it’s okay if you have something already in there, just paste it directly underneath)

Don’t forget to click save!

</> html code

<link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">

Notice how in the code it says “latest”. This means you will always have the latest Font Awesome library, it will automatically update

Adding Icons to Main Navigation

Now let’s add the actual icons to the menu. In appearances > menu I select my primary menu since that’s where I want my icons (you can have these in a secondary menu if you prefer, if you need help with this comment and I’ll add a section). Add the URL to your Facebook page in the URL field and then the FA facebook icon code in the link text field.

<i class="fa fa-facebook"></i>

Where am I getting the Font Awesome icon code??
I’m getting it here and using their cheatsheet to pick the specific icons. You can also browser their icons by type. Also if you plan to use FA in more ways than just menu icons I don’t think it’s difficult per se, but I do think there is a slight learning curve if you’re totally new to HTML. My best advice is to go slowly but it is easy, I promise.


click ‘add to menu’ and you see this

This is great, but I want my social media links to open in a new tab/window so users don’t leave my site. In the upper right click on ‘screen options’, then select link target, title attribute, and CSS classes (we’ll be using the CSS option to style these icons later).

Now you should see more options for your menu items

Select the box to open link in a new tab (optional), and you can take the time now to go through and add your title attributes as well (optional).
Follow the same steps to add your other social media icons. I’ve added two of mine and now my menu looks like this

Styling FA Icons in Main Navigation

Okay, now that we have them where we want them let’s style them with CSS to make them look a little better.
We enabled the CSS option before so we need to add the class “menu-fa” in the class field for each social media menu link (you can choose whatever name you want for your class)

Next you’re going to add the following CSS to your Divi theme options custom CSS box, remember to read the comments in the code and change the appropriate colors to match your look.

{;} css code

/*** STYLE FONT AWESOME ICONS IN NAVIGATION ***/
.menu-fa .fa {
    background: #fff; /* THE COLOR OF THE CIRCLE BEHIND */
    width: 27px;
    height: 27px;
    border-radius: 50%; /* REMOVE THIS WHOLE LINE IF YOU WANT SQUARE ICONS */
    padding: 5px;
    color: #7d9fa9; /* COLOR OF THE ICON */
    text-align: center;
    line-height: 1.3em;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.menu-fa .fa:hover {
    color: #938f79; /* COLOR OF ICON ON HOVER */
}
#top-menu li.menu-fa {
    padding-right: 0 !important;
}
.et_mobile_menu li.menu-fa {
    margin-left: 4%;
    text-align: center;
}
.menu-fa {
    display: inline-block;
}

Now my navigation looks like this!

The Contact Page & Caldera Forms

I need to still work on some of my pages so I’m going to do the contact page next, and I’ll be using Caldera Forms. Caldera Forms is a free third-party form plugin that I’ve been using for a few years now (they do offer paid add-ons but the free covers all the basics you should need). I’ve tried a few and Caldera is the best free option I’ve found. It’s super easy to build a form, and I’ll include some CSS to style the form so it won’t look so generic and you can tweak it to match your branding/site (although a little birdie told me that they’re coming out with a customizer, so you may not need custom CSS soon ).
You may be wondering why I’m even going over adding a third-party form plugin since Divi comes with a contact form module…
Here’s the thing: I’ve been using Divi since it came out. I have never had the contact form module work as it should on all of my client’s websites. Sorry Elegant Themes, but that’s the truth. It works on some, but not all, and for a contact form that’s just not acceptable. They have been doing some great updates with it lately but it still doesn’t save entries to a database (another thing that’s absolutely necessary in my professional opinion), so I still recommend using a third-party contact form plugin on your Divi site.
Caldera Forms and similar are in the form plugin business, Elegant Themes is not.
Gravity Forms is another one of my favorites but Caldera is free so I’m going to use that one for this project.

Install Caldera Forms

So first install Caldera Forms from the repository

Click ‘new form’ and you’ll see a popup of starter forms to select from. This is one of the things I reaaaally like about Caldera, that they give you starter forms. Others I tried don’t and to me that just seems like such a simple no-brainer thing to add, especially knowing that the WordPress platform is so widely used by DIYers … *shrug*

After selecting the first one name your form

Then you can start building your form. They have a little tutorial in the beginning to show you the basics and it’s pretty easy to catch on

Set Up Contact Page

Now that we’ve built the form we need to add it to our contact page. In my contact page I start with Divi’s predefined ‘Contact Us’ layout which you can load from their library

these are the modules I get (remember you can add whatever modules you like, don’t feel restricted and have fun!)
I’m going to delete the map module (keep the purple row, just delete the map module itself) because I don’t think it’s really necessary for this blog project, but if you need help setting it up here’s ET’s documentation on it.
I don’t have a header made for my contact page but I show how to create one here. You don’t have to add it now, you can add it later if you don’t want to lose your spot now.
Now I’m going to delete Divi’s contact form module and replace it with a text module. When I open it I now see a button to add a new Caldera form

select your form, modal means popup box.

✋ HOLD IT RIGHT THERE HOMIE!!
I know what you’re thinking … “ooooh a popup box” … No, lol just no. I know it may sound neat BUT it makes no sense at all to put a popup box with a contact form in it on an actual contact page. The user is already where you want them to be, giving them yet another step (even just triggering a popup) is redundant and unnecessary. In fact it’s poor UX (user experience) design. 
A modal contact form should be used anywhere except on a contact page. If you promise not to break my little design heart by not breaking that rule I promise to show you how to use a popup box in a more appropriate way "” (no but seriously I will I do here!).
now my contact page looks like this

Add CSS for Styling

Now I’m going to add CSS to style my form to match my site. Remember to leave off any CSS you don’t want and what you do want, just replace the color codes with yours. And don’t be afraid to play with the code, if you mess up you can always save a copy or come back here and get it fresh
The code goes in your Divi theme options > custom CSS (or your child stylesheet).

{;} css code

/*** CALDERA FORM CONTAINER ***/
.caldera-grid {
    background: #e5e2db;
    padding: 30px 25px 15px 25px;
    border-radius: 4px;
}
/*** FIELD STYLING ***/
.caldera-grid .form-control {
    color: #fff !important;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    height: auto;
    padding: 10px 15px;
}
/*** BUTTON STYLING ***/
.caldera-grid input[type=submit] {
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 12px;
    border-radius: 2px;
    background: #7d9fa9;
    color: rgba(255, 255, 255, 0.8) !important;
    border: none;
}
/*** BUTTON HOVER STYLING ***/
.caldera-grid input[type=submit]:hover {
    background: #a1b7b2;
}
/*** REMOVES THE BLUE COLOR WHEN A FIELD IS SELECTED ***/
.caldera-grid .form-control:focus {
    box-shadow: none;
}
/*** CHANGE COLOR OF THE HR HORIZONTAL RULE ***/
.caldera-grid hr {
    border-top-color: #938f79;
}

Now my contact page looks much nicer with matching colors, and I added a social media follow module 

Add a Google Font

Divi comes with quite a few pre-installed Google fonts but maybe you want to add one it doesn’t come with. I’d like to add a different font to use for my headers. Since Divi has a spot where we can easily integrate code into the head of our site it’s super easy to add other Google fonts.
Visit Google Fonts and choose your font

After deciding click the black bar on the bottom and you’ll see some instructions pop up with your necessary code

the HTML code goes in Divi theme options > integration > head

The CSS code goes in your custom CSS box (or child stylesheet). You can copy mine and just replace the font family with yours if you’re not sure how to assign the font to your headers.

{;} css code

/*** ADD GOOGLE FONT TO HEADERS ***/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Vast Shadow', serif; /*** REPLACE WITH YOUR FONT FAMILY ***/
}

Now I can see all my headers are using the newly added Google font!

CSS Tweaks for Mobile Homepage Slider Issues

If you’re using my homepage templates I posted earlier here and here then you may notice you have some issues with the homepage slider on mobile and tablets. I mentioned the issues way earlier here

so now I’m going to fix this. On mobile and tablet this is what that slider looks like

Our slider text isn’t legible and of course needs to be. I’m going to add some CSS that changes the look and behavior of our slider, but just for smaller screen sizes like mobile phones and tablets.

{;} css code

/*** FIX HEADER SLIDER ON SMALL SCREENS ***/
@media only screen and (max-width: 1024px) {
.et_pb_slide {
padding: 0;
}
.et_pb_slider .et_pb_container {
width: 90%;
}
div.et_pb_slide_description {
max-width: 68% !important;
}
.et_pb_slide { /*** ADD YOUR IMAGE URL ***/
background-image: url("https...yourimage.jpg"),linear-gradient(90deg,#ffffff 70%,rgba(0,0,0,0) 70%) !important;
}
}

Don’t forget to insert the URL of your image you would like to appear in place of all the slider images. The slider will be disabled since it’s the easiest way to deal with this legibility issue, and it’s not really necessary on mobile anyway.
After I add my CSS I now see this

Easy to read
BY THE WAY: If you need help with modifications to the CSS because you’ve changed the look of my layout leave a comment or email me and I’ll help you out!

If you’re not sure how to check what your site looks like on different devices there are free online tools available to check responsiveness across common screen sizes. Note that these are just “emulators”, they are not as accurate as an actual device, but of course we don’t all have access to all devices so these tools are very helpful for troubleshooting.
Here are a few I have tried myself:

SSL Troubleshooting

Early on we added SSL to our site so hopefully you haven’t had any issues with that as you’ve been working on your blog. But what if you have? Or what if you’re not following along this project but stumbled on it just looking for general Divi help?
You’ll know you have SSL issues if you don’t see a little lock in your browser bar, or if you’re getting a message like the one below..

Not to worry! There are handy sites and plugins we can use to pinpoint what our issue is.
First let’s see if we can see what’s causing our site to have “mixed content”, this is typically what you may see it referred to as since it literally means that secure content is mixed with insecure content on your site. You’ll also see this happen if you are displaying content from an external site that is hosting insecure content.
Go to Why No Padlock? and enter your website URL

you should then see a list of items, usually it will either not recognize a valid SSL certificate (in which case contact your host) or some of your images may not be secure.
Note: I really wanted to be able to show a real screenshot example here of SSL errors but I just don’t happen to have a site right now that is having SSL issues. I’m sure I’ll run into an issue at some point lol so I’ll update this area when I can.

Fix Mixed Content

If the results show that your media files are coming up as mixed content then there is a plugin I’ve used called Better Search Replace. What it does is change all instances of http:// to https://.
Install and activate that plugin, go to Tools > Better Search Replace

BEFORE MOVING FORWARD MAKE SURE YOU BACKUP OR HAVE A BACKUP!!

You’re going to:

  • copy/paste your website URL in both fields, make sure you add an s in the appropriate spot
  • select/highlight all your tables (command-a on Mac)
  • do a dry run first


After the dry run it will display how many items the scan found that need to be changed. The purpose of the dry run is just good practice really. Any kind of change to the database like that is one to be done cautiously, but I’ve never run into issues. I think it’s also in part for peace of mind, to know that you can see what you are about to change before actually doing it with no surprises, but this is why it’s also super important to back up your site!! Sorry, I can’t stress that enough
Now you can go ahead and do the exact same thing as before, only this time uncheck the dry run box. Hopefully your issues should be fixed! You may need to log back in again.
There is another plugin that’s worth mentioning called Really Simple SSL. It’s also popular and I have used it a couple times. The distinction I see is that this plugin stays activated on your site to work, whereas BSR can be deleted once you’ve run the fixer, so their functions are slightly different. At least that’s my understanding, but take that with a grain of salt since that’s really just my experience and I can’t say I’m an expert in this area.

Using a Caching Plugin

What is caching?

Now is a good time to go over caching. “Caching is the process of saving data temporarily so the site, browser or app doesn’t need to download it each time.” — I like that wording from this article but there are many good sources to explain caching and how it works. It helps speed up load time and is something you definitely want to utilize, even if you think your site is “small”.
It’s important to note that there are different levels and types of caching. This article may help shed some light and also lists some other popular caching plugins. I personally use WP Rocket but I’m not going over that one because it’s not free and I do think SiteGround’s caching plugin is a good free option.
Early on in this project we added what I referred to as “base” plugins, one of these was a caching plugin and the one that you will have pre-installed on your site if you are using SiteGround like I am is SiteGround’s own caching plugin SG Optimizer (note that this plugin will only work on a SiteGround-hosted site).
So first go ahead and activate the SG Optimizer plugin if it’s not already activated. When you do that you may see this notification at the top of your page

Go to your cPanel in your SiteGround dashboard and look for the SuperCacher option

locate your website and turn on the static and dynamic cache options


And that’s it!
Now when you need to clear your cache you just have to press the Purge SG Cache button in the black admin bar at the top of your site
You can hide that notice you saw earlier before we turned caching on.

It’s good to clear your cache when you’ve:

  • just updated a plugin, your theme, or WordPress core
  • done some reconfiguration of any kind to a plugin
  • fixed all your insecure content (like the SSL troubleshooting above)
  • you’ve updated a Divi library layout
  • come across some Divi “quirks”

With any caching plugin I’ve tried they’ve in general automatically cleared the cache every time a page or post was updated, but I’d double check with whatever caching method you end up using.

Blog Grid Looks

I had a poll up for a while asking what you all wanted to see more of and the top answer was blog grid looks, so I’ve added 3 looks that you can use on your blog. All you need to do is import the layout you want to use and add the corresponding CSS (instructions on the page).
I’ve put them on my Divi Pizza blog and there are links to each under the Blog tab

You may want to try combining parts of each look to see what you can come up with 🙂

Slim Bloom Optin Form

When I first started the homepage I had a placeholder up for where I wanted to put a slim optin form to connect to my Mailchimp lists (like I added to the footer). I wasn’t sure if I was still going to add it because I’m not sure that it really needs another optin form, but I went ahead and made it anyway because I still see the slim Bloom form as a common request in one of the Divi Facebook groups I’m in.
You can see the new slim optin on the Divi.Pizza blog.

1. Import the Slim Bloom Optin Form

First you’ll need to download the files

Next double-click the zip file you just downloaded so that you see two .json files, one is the Bloom form and the other is the Divi section that goes on your page(s). You’ll see something like this in your file browser

Head over to your Bloom settings and click the 2 arrows in the upper right corner

import the file called “Slim Bloom Optin (import to Bloom).json

Once imported your screen will refresh and the slim optin will now be under your Inactive Optins list. Click on the little settings icon and set up your email service and then click “save & exit” (if you’re not sure how to do that I went over that here)

your screen will refresh, now just click the checkmark to activate the optin

now your newest optin will be under Active Optins list, you need to grab it’s id number so click on the shortcode icon

make a mental note of the id number, in this case 3 (since I already had 2 optins)

2. Import the Slim Bloom Module

Now that you’ve set up the actual Bloom optin form we need to add that section to our page. Go to your Divi Library and in the upper left click Import & Export

this window will open and you’ll just locate and select the Slim Bloom Optin section (import to Divi library).json file

after importing you’ll see it listed at the top of your Divi library layouts.

3. Add the Slim Bloom Optin to a Page/Post

Now go to the page you want to put it on, in my case I’m putting it on my homepage under my top header area. Select Add from Library because you just added it there

select the Bloom slim inline optin layout (it’s really a section)

Now open the text module it’s in and make sure the number is the same is same as the id number of the Bloom optin you just imported. If it’s not just change it and save (edit your text when you’re ready).

that’s it for set up, now we just need to add a little code to get that form nice and skinny!

4. Add the CSS

Add the following to your Divi options > custom CSS box 

{;} css code

/*** SLIM INLINE BLOOM OPTIN STYLING ***/
#slim-bloom-optin div.et_bloom_header_outer {
    display: none;
}
#slim-bloom-optin div.et_bloom_form_content {
    padding: 0 !important;
}
#slim-bloom-optin div.et_bloom_inline_form {
    margin-top: 5px !important;
}
#slim-bloom-optin input {
    text-align: center;
}

and that’s it! 😃🙌
Now you can change the colors in the module settings and also inside the Bloom optin settings just like you normally would.

The end ✅

Thanks to everyone who followed along and to anyone who continues to find this post! I really do hope it’s been helpful and I will absolutely be around if anyone still needs help, just post in the comments or email me. It’s been a fun experience