6 Shares

Hey beautiful mumma, The Mammoth Guide To Using The Divi Theme is here…

This post is going to be all about the wonderful, amazing, fantastic ( I could go on and on) Divi Theme!

I rave on about Divi all the time, because I absolutely love it!

It does everything I need + more and I couldn’t imagine using anything else on my blog.

It’s by far the best theme and page builder I’ve ever come across (and I’ve used a lot)…

Before we get into it though, if you're new to blogging and want to make sure it's right for you, go here first to my Is Starting a Blog right for You post…

What you’ll learn today…

Having a fab theme is a must when you have a blog, because you need to be able to work with something versatile, reliable and simple.

You want to be able to get done what needs to get done and enjoy the process.

I’m going to take you through all that Divi has to offer. I have gone through Divi as well in my how to start a blog post! but this post is the beast which goes into full details about all aspects of Divi…

It’s going to be a longer post, but there’s so many things you can do and customize and I want to share it all.

Trust me, you won’t be disappointed and when you start using it – you won’t look back…

So let’s get into it and check out the world's most popular blog theme (their words not mine)

“This post does contain affiliate links throughout and if you make a purchase using one of my links, I receive a small commission at no extra cost to you”. 


All about the divi theme blog post

What is Divi?

Divi is a website building platform with an awesome visual editor, which transforms the way your blog looks and feels.

It’s efficient, effective and can produce a stunning looking blog!

The great thing about Divi is, it isn’t just for web designers, it’s for EVERYONE and that means you my lovely…

Even if you’ve never built a blog before, this is super simple to use and I’m going to show you how.

Before we get into it though, I just want to clarify one thing!

Divi has a Theme and Page Builder.

divi theme and page builder plugin

You can use the theme, which has the page builder inbuilt, or if you’re using another theme you love and don’t want to change,  you can use the page builder plugin and still have the use of the amazing visual editor…

Either way, you’re going to get a great user experience and have an awesome looking blog, whichever one you use!

So what’s the difference between the Divi Theme and Page Builder?

Not that much really, apart from the fact the Divi theme includes the page builder, so you don’t need to download the page builder plugin separately.

There are however, some different things within the Divi options bar in the dashboard.

Divi Page Builder Plugin 

The plugin offers less options than the theme, but the options are as follows:

Updates

divi builder options

Here is where you enter your username and API Key information you would have received when you purchased the membership.

It’s essential you add these in so that the plugin can be regularly updated.

Having a theme which is updated regularly is an absolute must, because it’s these updates that maintain your blog's functionality, speed and readers user experience. 

The details on the screen here tell you exactly how to enable the updates, so make sure you go ahead and do this. 

API Settings

API settings for divi theme

I don’t touch anything on this screen, although you have the option to enter a Google API Key if you’re wanting to use Google Maps on your blog…

Post Type Integrations

divi post type integration

This is where you get to enable the divi builder on posts, pages and projects.

You can toggle on and off depending on where you want to use it.

how to use divi theme post type integration option

Advanced

how to use divi theme advanced builder options

I leave all the options here at the default settings and I’ve highlighted in the box the two options I wanted to draw your attention to.

You want to make sure that the “latest divi builder experience” is always enabled and then you can choose whether you want the classic editor or the Gutenberg editor (which is a newish feature and has its own drag and drop elements within it).

It’s totally up to you which editor you use. 

Check them both out and see which you’re more comfortable with and like using the best (although the classic editor will be phased out in 2022 from what I've heard).

Next up we’ll take a brief look at the “Theme” option…

Divi Theme (with page builder included)

If you use the Divi theme, then there will be many more options, because you’ll have the theme customizer, so you can create the whole look of your blog (like you would with any other theme installed). 

Below are two images – one is of the default TwentyTwenty theme, which comes pre-installed and you can see the customization options available.

The second one is of the Divi Theme and you can see how many more customization's you get, meaning you have way more things to make your blog awesome and unique.

default theme options twenty twenty
divi theme customization options

Before we check out the customization's in more detail, let’s get either the Theme or Page Builder plugin installed – so you can get building your blog…

How to install the Theme or Page Builder Plugin

When you purchase the Divi theme from Elegant Themes, you purchase it as a membership and get access to not only the theme and page builder, but some other options as well:

  • “Extra” theme, which is a magazine theme
  • “Bloom” which is an email opt-in plugin
  • “Monarch” which is a social sharing plugin

divi theme membership options

One membership basically gives you access to everything you need to create a beautiful blog.

Once you have purchased the Divi theme, you have the option to either install the page builder plugin, or the whole theme (which you do as per the instructions below):

WordPress dashboard appearance for theme

> Appearance 

> Themes 

> Add New 

> Upload Theme 

> Choose File (upload the Divi Theme zip folder you downloaded from the download screen and install and activate)

When you’re on the Elegant Themes Members page, you’ll be able to see the two different options Divi offers.

how to download divi theme
how to download divi builder plugin

You can see that it even says on the “Divi Builder Plugin” that you do not need to use the plugin if you’re using the Divi theme.

If you upload the plugin only (because you have another theme installed) you do the following:

>Plugins

>Add New

>Upload Plugin

>Choose File (upload the Divi Plugin zip folder and install and activate)

uploading divi builder plugin

Woohoo, so you’ve now decided whether you need the Theme or Page Builder and installed it…

If you’ve chosen the Theme version, then we can now look at all the different customization's available.

If you have an alternative theme, you can skip all this and head to the Divi Modules section…

Divi Customization's

The Divi Theme has a ton of things you can customize and we’re going to get into these right now!

General Settings

We’re going to be looking into the “General Settings” tab to start with and this includes:

  • Site Identity
  • Layout Settings
  • Typography
  • Background

Site Identity

First up is the site identity option, which you get to as per the below instructions:

>Appearance

>Customize

>General Settings

>Site Identity

In the above below you can see the options you have to change.

You can complete the “site title” and the “tagline”.

I’ve entered “Mummy to Boys” in the title, as that’s the title of my test blog and in the tagline, I’ve just entered “My Test Blog”.

divi builder customizer site identity options

Before we move on, let’s just clarify what a tagline is:

A tagline is just a short sentence, or phrase, which needs to help your readers learn what your blog is about instantly.

Here is where you can also add a site icon (also known as a Favicon).

It’s an icon which symbolises your brand.

I created my favicon for this test blog in the program I use called Canva, another amazing tool I couldn’t be without…

I use it for pretty much all my graphic design.

Layout Settings

To get to it, go to:

>Appearance

>Customize

>General Settings

>Layout Settings

Here is where you can customize the layout of your blog.

Do you want to have a boxed layout, if so you can do that here and what theme accent colour do you want?

divi builder customizer layout enable boxed layout

Have a play around and see what you like the look of.

I don’t have the boxed layout on my blog, because I like the clean and seamless look across the page.

Typography

To get to it, go to:

>Appearance

>Customize

>General Settings

>Typography

This section is where you choose all the font sizes, colours and styles for your blog.

Again, you may want to have a play around to see what looks good and what you like.

Whenever you’re changing things, you can see the changes in real time on the right hand side of the screen…

divi builder customizer typography

Background

To get to it, go to:

>Appearance

>Customize

>General Settings

>Background

The background is where you can change the colour or have an image.

You can position the background image how you like and you can have it either as a scrolled image or fixed.

Scroll – the image scrolls when your readers move down the page.

Fixed – the image will stay put when your readers scroll down the page.

divi builder customizer background options

Header and Navigation

The next section we’re going to look at is the “Header and Navigation” section…

This section includes:

  • Header Format
  • Primary Menu Bar
  • Secondary Menu Bar
  • Fixed Navigation Settings
  • Header Elements

So let’s begin with the Header Format…

Header Format

To get to it, go to:

>Appearance

>Customize

>Header and Navigation

>Header Format

This section changes the way your header looks.

divi builder customizer header example

There are many things you can change here, including the position of the logo, the navigation of the menu and also the style of the header.

You can see all the options in the image below…

divi builder customizer header format

Primary Menu Bar

To get to it, go to:

>Appearance

>Customize

>Header and Navigation

>Primary Menu Bar

This is a more exciting element, as you get to bring your blog to life a bit more, with link colours for your menu bar.

Again, I’ve created an image below where you can see how to change the different things within this element.

divi builder customizer primary menu bar options

Secondary Menu Bar

To get to it, go to:

>Appearance

>Customize

>Header and Navigation

>Secondary Menu Bar

You can have two menus however and the next element is the Secondary Menu Bar.

I’ve not used a Secondary Menu Bar yet, but they’re great for call to actions, or to have a phone number or email address.

It separates the information and makes it stand out from the rest of your blog.

divi builder customizer secondary menu bar options

Fixed Navigation Settings

To get to it, go to:

>Appearance

>Customize

>Header and Navigation

>Fixed Navigation Settings

This is the fixed menu, when a reader scrolls down your page. 

You can fully customize how this menu looks, just like the primary and secondary menu bars, but this only comes into play if you enable the “Fixed Navigation Bar” within the “Divi Theme Options” tab…

fixed navigation header example

In the image below, you can see how to customize this and how it looks when you do…

divi builder customizer fixed navigation settings

Header Elements

To get to it, go to:

>Appearance

>Customize

>Header and Navigation

>Header Elements

This section is where you’re able to add a phone number and an email address…

You can also have a “search” icon and “social icons” too

divi builder customizer header elements

I don’t have the social icons showing here, but by default, the Divi theme has the option to have Facebook, Twitter, Instagram and RSS.

Google+ is showing on there, but it’s disabled as it’s no longer available.

You just toggle the ones you want on and then add in the URL’s.

WordPress dashboard divi theme options social icons

The next big section we’re going to look at is the Footer.

This section includes:

  • Layout
  • Widgets
  • Footer Elements
  • Footer Menu
  • Bottom Bar

You really want to utilize this section and have your important information.

I have a Call to Action, my support email address and links to my legal pages…

my footer section on blog

First up is the layout…

Layout

To get to it, go to:

>Appearance

>Customize

>Footer

>Layout

The layout section is where you can create some columns, so that important information can be separated and easier to read and navigate around.

In the example below, I’ve used my fave workout blog Tone It Up as an example.

four column row example

You can see they have a 4 column layout and have all their information within these columns.

You can see how you can do this within the Divi customizer below:

divi builder customizer layout options

Widgets

To get to it, go to:

>Appearance

>Customize

>Footer

>Widgets

This area is where you can customize the look of the widgets that you add to your site.

BUT… What is a Widget?

A widget is a block of content which is used to control a specific function and can be added in various places on your blog.

You add the actual widgets in a different section (Appearance > Widgets) as you can have different widgets in different parts of your blog (side bar, footer etc)…

WordPress dashboard widgets options

The image below shows how you can change the elements within the widgets section, including the bullet point colour, header colour and link colour. 

divi builder customizer widgets options

To get to it, go to:

>Appearance

>Customize

>Footer

>Footer Elements

There isn’t much to do in this section – just showing or not showing your social sharing icons…

divi builder customizer footer elements options

To get to it, go to:

>Appearance

>Customize

>Footer

>Footer Menu

You can have a menu in the footer of your blog, just like you have at the top of your blog, within the header…

Again, there isn’t much to do with this element, but you can change the colours of the menu background and the links!

divi builder customizer footer menu options

To get to it, go to:

>Appearance

>Customize

>Footer

>Footer Bar

The final element within the “Footer” section is the footer bar.

This is a great section to have your copyright notice, disclaimers, social share icons, links to important pages etc…

I just have the copyright notice and a disclaimer in mine.

my footer bar example

There isn’t really a right or wrong for the footer bar – just place in there what you feel is important and what you want to get lots of eyeballs on…

You can see how to customize this section in the image below:

divi builder customizer footer bar options


Ok, so we’re 3 big sections down and have a way to go…

How are you feeling?

Take a break – grab a drink and a snack!

You’re going to need more energy to keep going.

I know there’s a lot to go through, because I want to show you everything that Divi has to offer.

But once you know how to use it, you’ll be flying around the dashboard in no time, making changes and creating your own beautiful blog!


Buttons

Next up is the “Buttons” section…

This section includes:

  • Buttons Style
  • Buttons Hover Style

One of the smaller sections, this is where you can set customization's for the buttons you use on your site.

Buttons are used for things like Call to Actions and you can have them anywhere you like.

Below are two of the CTA (call to actions for short) that I have on my blog…

homepage button style for one of my call to actions
homepage button style example

Buttons Style

To get to it, go to:

>Appearance

>Customize

>Buttons

>Buttons Style

This is where you can create a button which will show all over your blog, whenever you add the “button” element to a post or page!

I’m going to be showing you how and where to create a button later on in this post, but for now I’ve added one in so you can see how you make the customization's.

divi builder customizer button options

It’s just showing as the standard yellow, default button at the moment in the above image.

I’ve played around it with it and you can see how to do this below:

divi builder customizer button style options

I’ve also added an image below, where you can see the button being used on the blog post I’ve set up for this tutorial.

divi builder button within a post

Buttons Hover Style

To get to it, go to:

>Appearance

>Customize

>Buttons

>Buttons Hover Style

This is basically where you can customize the button to look different when someone hovers over the top of it.

divi builder customizer button hover demonstration

I think this can make things visually nicer for your readers, so have a play with it and see what you like.

divi builder customizer button hover options

Blog

To get to it, go to:

>Appearance

>Customize

>Blog

>Post

This section looks at one element and that's “Post”.

This is for your blog posts.

You can customize the “Meta” and “Header” text settings for all your blog posts, so they’re all uniform and look the same to your readers.

It’s a good idea to make these customization's here, as you can amend individual posts to suit your liking if you want to mix it up a bit, as and when you write each post…

divi builder customizer blog post settings

Up next is the “Mobile Styles”

Mobile Styles

This is where you can set customizations for the different devices.

This is really important as the majority of people tend to view blogs and other things online, using their mobile phones and tablets, so you want to make sure your text and posts look right on each one.

This section includes:

  • Tablet
  • Phone
  • Mobile Menu

Tablet

To get to it, go to:

>Appearance

>Customize

>Mobile Styles 

>Tablet

Here you can customize the header text size, the body text size, the section and row height.

See what looks right around all the other customization's you’ve made.

divi builder customizer tablet options

Phone

To get to it, go to:

>Appearance

>Customize

>Mobile Styles 

>Phone

The phone settings are exactly the same as the tablet, so customize these to suit what looks best with the type of font you’ve chosen etc…

divi builder customizer phone options

Mobile Menu

To get to it, go to:

>Appearance

>Customize

>Mobile Styles 

>Mobile Menu

The mobile menu is where you can keep or hide your logo, change your text colour for the drop down menu and also change the background colour.

As the name suggests, this is just for the mobile menu, so your normal menu (which you made customization's to earlier on in the post) remains the same.

divi builder customizer mobile menu options

The next few sections don’t have a lot of tabs within them, so we’ll run through them really quickly…

Colour Schemes

To get to it, go to:

>Appearance

>Customize

>Colour Scheme

This is an option I recommend you don’t touch.

Because you’re going to be creating your own colour palette and branding, it’s best to leave this at the “Default” setting.

Within the “Theme Options” is where you can set your default colours and you also may want to add in different colours in the separate page builder later on…

divi builder customizer colour palette picker

Menus

To get to it, go to:

>Appearance

>Customize

>Menus

Within the customizer area, you don’t really need to fiddle around with the Menus.

WordPress dashboard where to find menu options

The best thing to do is generate them within the “Menus” tab itself and then you can go to “Manage with Live Preview” when you want to see what they look like…

If you do want to do it in the live preview area, you can see what it looks like in real time, as you’re moving things around.

You can generate posts or pages from here to add to the menu bar, reorder the menu tabs and add or remove menus from particular areas (secondary and footer menu).

divi builder customizer menus

Widgets

To get to it, go to:

>Appearance

>Customize

>Widgets

This section is very similar to the menus one, in that you can make all the changes in the “Widgets” tab…

WordPress dashboard widgets

OR, within the live, real time customizer…

divi builder customizer widgets

Homepage Settings

To get to it, go to:

>Appearance

>Customize

>Homepage Settings

This is where you decide which page you’re going to have as your homepage, when visitors come to your blog!

The “Classic” blog style is where you have “Your latest posts” showing and is what a lot of blogs tend to do.

I have “A static page” as I created my own home page and this is what I want people to see when they first visit my blog!

It has links to the posts I feel can help my readers the most when they’re just starting out, along with other information I feel is fab for people to read when they first enter my blog.

divi builder customizer homepage settings

The final element within the theme customization's is the Additional CSS…

Additional CSS

To get to it, go to:

>Appearance

>Customize

>Additional CSS

I haven’t used any custom CSS within the Divi theme yet, but it’s probably because there are so many things you can do with the theme customizer, that it leaves little that needs custom CSS.

However, if you want to make custom CSS customization's to your whole blog, this is where you’ll do it.

divi builder customizer additional CSS

The final thing I want to mention in the customization's, is that you can see it in real time whether you’re editing it in Desktop, Tablet or Phone view.

divi builder customizer desktop, tablet or phone views

I urge you to always check the way it looks on different devices, so that you can make sure it always looks the best it can for your users, no matter what device they’re on.   

Theme Options

To get to it, go to:

>Main Dashboard

>Divi

>Theme Options 

Under the “Theme Options” there’s eight sub-sections which can be customized:

  • General 
  • Navigation
  • Builder
  • Layout
  • Ads
  • SEO
  • Integration
  • Updates

We’re now going to work through them all to see what they are and what they can do…

General

divi builder general theme options

This is the largest section for customization's that can be done.

Logo

Here you can add your logo, which will appear on every single page and post of your blog.

Just click on “upload” and add it in. 

Fixed Navigation Bar

We talked about this earlier on in the post. 

When people are scrolling down the page, you can either have the menu bar remaining at the top in a fixed position, or you can choose to have it disappear.

Below is an example when the fixed navigation bar is disabled.

divi builder non fixed navigation bar

When the navigation bar is enabled, it remains on the page when scrolling takes place, as per the example below:

divi builder fixed navigation bar

Enable Divi Gallery

WordPress already has a “Gallery” option within the Gutenberg editor, where you can present your images in a gallery style format.

If you enable the “Divi Gallery”, this will just override this to use the Divi gallery style instead.

divi builder blog gallery style

Color Pickers Default Palette

This is where you can set your default colours for your whole blog! 

I have set a colour palette below for this tutorial:

divi builder test colour palette

If you set them here, they’ll be available whenever you customize modules throughout your blog.

I’ve created a test page and opened the “Divi Text Module” so that I can show you how it pulls through the colour palette.

divi builder pulled through colour palette

I’ve also changed some of the text in the example below, to show you how easy it is to choose the colour palette options whenever you need them.

divi builder text colour palette

Grab the first post image

This is disabled by default and is all to do with the Featured Image.

These featured images automatically become the posts thumbnail images

Featured images can be created using custom fields.

As you can see in the example below, you would select the “Set featured image” tab and choose whichever image you want as your posts featured image.

divi builder option to set featured image

However, if you want to use images which are already in your posts, you can enable the “Grab the post image” option, meaning you don’t have to set a new featured image every time.

When this is enabled, your featured images will automatically pull the first image used in your post.

divi builder pulling the first image through

Blog Style Mode

The “Blog Style Mode” changes the way your blog posts appear on the homepage, or blog page, depending on whether you have a static homepage or have your latest posts showing on your homepage!

I explained this earlier on in the post…

When this is disabled, you get the title, featured image and a snippet or preview of the text from the post itself.

divi builder blog style mode disabled

When you enable the “Blog Style Mode”, this then shows your posts in full, as per the example below…

divi builder blog style mode enabled

Sidebar Layout

If you have a sidebar, then you can decide where you want this to be placed.

You can have it either on the left or the right!

divi builder sidebar to the left
divi builder sidebar to the right

Shop Page and Category Page Layout for WooCommerce

If you’re going to have a shop/store on your blog, then you can use the WooCommerce WordPress Plugin.

You’ll be able to decide what layout you would like on each of your product pages.

Divi theme options woocommerce options

Google API Key

If you’re going to need Google Maps on your blog, then you need a valid key in order for this to work correctly.

You get it from the Google API Console.

divi builder google maps

Enqueue Google Maps Script

Sometimes there can be compatibility issues between plugins and by disabling this option, it removes the Google Maps API script from your Divi Builder pages.

This can help to resolve any problems that may occur, for other plugins which may enqueue this script.

I don’t really have much of a clue when it comes to these techie sections of themes, because I don’t touch them.

I always leave anything I don’t use in the default mode.

Use Google Fonts

Divi has an amazing range of over 800 fonts available within its theme. 

By enabling the “Use Google Fonts”, you can have access to all these.

Divi builder module text google fonts options

Show Facebook/Twitter/Instagram/RSS Icons

Here is where you can toggle on/off whichever social icons you wish to have and add in the URL’s for the profiles you do use.

Divi theme options social icons

You can see in the images below that I have toggled off the Twitter and RSS, so that only the Facebook and Instagram icons are showing in the bottom bar (where I placed them earlier in the post)…

Divi theme options social icons facebook and twitter

Divi theme options social icons you want to show

Number of posts displayed on Category/Archive/Search and Tag Pages and Number of Products displayed on WooCommerce archive pages

Divi theme options number of products and posts displayed

Date Format

This next section allows you to change how many posts or products (if you’re using the WooCommerce plugin) you can have on each of the above mentioned pages!

I have always left this defaulted, but you can play around with it and change it when you have more blog posts added, to see what looks best for your own blog.

WordPress date formatting

The string of characters which I have boxed, show the formats that can be added into the Divi Theme Options…

I have also boxed the “Documentation on date and time formatting” as you can read more about this and which format you should use, if you’re unsure.

Use Excerpts When Defined

Divi builder excerpt example

Excerpts are short versions of the text from your blog post or page.

When this is enabled, it means that excerpts are used in the posts and pages.

Responsive Shortcodes

Shortcodes are a small piece of code that perform a certain function.

They are shown in brackets [shortcode here].

Convertkit shortcode example for WordPress

I use shortcodes a lot when adding in my Convertkit Email Marketing softwares opt-in forms to my posts!

When this option is enabled, it means that the shortcodes respond to different screen sizes.

Google Font Subsets

If this is toggled on, it means that any Google fonts will be enabled for non-English languages.

Back to Top Button

I love this feature, because the back to top button enables readers to click a button, no matter where they are on the post/page and it'll take them back to the top again…

It’s a simple button and you can see how it looks in the image below:

Divi theme options back to the top button

Smooth Scrolling

This enables smooth mouse scrolling and is great when there are anchor links, linking readers to different sections of a post!

Divi theme options smooth scrolling

Disable Translations

If you don’t want to add a translation theme, then disable this. 

It is automatically disabled and this is how I’ve left it.

Enable Responsive Images

Make sure you have this enabled as it makes sure any images you upload are generated to be responsive on all devices.

Minify and Combine Javascript Files and Minify and Combine CSS Files

These options are defaulted to “enabled”…

They are options which speed up page loading, so keep them toggled on.

Custom CSS

This is where you can add custom CSS to override the default styles of the theme.

That’s all of the “General” options for Divi – I know there’s a lot and that’s just one of the 8 sections within the theme options.

The rest of the sections have less options, so it won’t take as long to go though laughing


Navigation

Here is where changes can be made to the Navigation Settings.

To be honest, I haven’t touched any of these settings and left them all defaulted, but I want to show you everything, so you have all the information of what Divi can do!

There are 3 sub-sections under the Navigation umbrella…

  • Pages
  • Categories
  • General Settings

Pages

Divi theme options navigation pages

Exclude pages from the Navigation bar

Whenever you create a new page, it automatically gets added here by default.

You can check and uncheck pages here, depending on whether you want them to appear in the navigation bar or not.

Divi theme options navigation exclude pages info

Show dropdown menus

If you also want to remove dropdown menus from the pages navigation bar, you can enable this element. 

Display home link

The Divi theme creates a “Home” link by default.

When a reader clicks on this link, they’re taken back to your blogs homepage.

If you create your own static homepage, which you want people to link back to as your “Home” link – make sure this is disabled.

Sort Pages Link

Here you can decide how you want your page links to be displayed.

There are several options, as per the image below:

Divi theme options navigation sort pages links

It is defaulted to post title, so I would recommend you keep it defaulted to this.

Order Pages Links by Ascending/Descending

This goes with the above and you can choose whether to have the page links in an ascending or descending order.

Number of dropdown tiers shown

This allows you to change the number of dropdown tiers you want to have on your navigation bar.

It is defaulted to 3 tiers, however, if you increase this, it allows additional menu items to be shown.

Categories

Divi theme options navigation categories

Categories are used to define what topics you have on your blog and allow people to navigate around your site quicker.

It is good practice to have different “Categories” for your blog posts.

For example, if you’re going to be blogging about “desserts”, you could think about having the following categories:

  • Ice cream desserts
  • Desserts for under £5
  • 5 ingredient desserts
  • Kid friendly desserts…

Every time you write a blog post, you would assign it to the most relevant category.

As you blog more and you write more content, you may add more categories. 

Try and have 3-4 main categories though to start with.

Anway, I’ve gone completely off track…

Exclude categories from the navigation bar

Any categories that you create will appear here by default.

If you want to exclude certain categories from the navigation bar, you simply uncheck that category here.

Show dropdown menus

You can remove the dropdown menus from the categories navigation bar here, by simply  disabling it here.

Hide empty categories

If you’ve created a category, but you haven’t used it yet, then you can choose whether or not you want to display it within your navigation. 

This is because empty categories are hidden by default.

Number of dropdown tiers shown

You can decide here how many tiers your pages dropdown menu has.

Adding more tiers means additional items will show.

Sort Categories Links by Name/ID/Slug/Count/Term Group

Here is where you can sort your pages and change the setting you want them to be sorted by.

Order Category Links by Ascending/Descending

This is where you can change the order of the categories to be ascending or descending.

General Settings

Divi theme options layout general settings

Disable top tier dropdown menu links

This is all to do with “Parent Categories” and “Child Categories”.

Parent Category > an example of a parent category on my blog would be “How to Start a Blog”…

Child Category > examples of child categories under the “How to Start a Blog” parent category, would be:

  • How to get started with a domain name
  • How to get set up with a hosting plan
  • Picking the right niche…

This option relates to not having the “parent” links leading anywhere, but being there just as an organizational function. 

If you enable this option, the links will be removed from all of the parent categories/pages, so they won’t lead anywhere when someone clicks on them.

Alternative scroll-to-anchor method

Divi builder module CSS ID & Classes options

If you choose to use the “CSS ID” section within a page, so that your readers can scroll to another section of the page (anchor link) this can often be inaccurate. 

By enabling this option, this alternative scrolling method can be more accurate. 

JUST A QUICK NOTE – I just wanted to add in here that my interface may look slightly different, because I’m no longer using my mummy to boys domain name to train on.

I’ve just created a test site off the back of my blog, so all future tutorials will be done using this.


Builder

Divi theme options builder post type integration

Post Type Integration

This is a super easy section to set up.

You just enable or disable where you want the divi builder to work.

You have the options of:

  • Posts
  • Pages
  • Projects

Advanced

Divi theme options builder advanced section

Static CSS File Generation

This allows the Divi builder’s inline CSS styles to be cached for all pages and served as static files, when the toggle is enabled. 

This is defaulted to “enabled” anyway and I would recommend keeping it this way, as it can help to improve performance.

Output Styles Inline

Previous versions of the builder meant CSS styles for the modules’ design settings were output inline in the footer.

This isn’t the case now, so if you want this, you need to enable the toggle. 

Product Tour

If this is enabled (which it is by default) the first time you use the builder, it will start a product tour automatically. 

Enable The Latest Divi Builder Experience

Again, defaulted to “on”, this allows you to have the latest Divi building experience, when you’re working. 

If you have this disabled, it will revert back to the “Legacy Divi Builder”. This has a lot less features and lacks interface improvements. You’ll also be using the classic WordPress editor instead of the Gutenberg Block Editor. 

Enable Classic Editor

Toggle this on if you want to use the Classic WordPress editor.


Layout

Single Post Layout

Choose which items to display in the post info section

Divi theme options layout single post layout and which items to display in the post

Here you can toggle which items you want to appear below your post title, as in the image below. 

Divi theme options layout items on post info section

You can choose between:

  • Author
  • Date
  • Categories
  • Comments

Show comments on posts

Here you can decide whether you want comments to show or not on single post pages. 

Place thumbs on posts

Thumbnail images are placed at the beginning of yoursingle blog post pages by default.

If you want to remove this thumbnail, so that images aren’t repeated, you can disable this option. 

Single Page Layout

Place Thumbs on Pages

Divi theme options layout single page layout

Thumbnail images are only placed on posts and not pages. 

If you would like to have them on pages as well, you can simply enable this option.

Show comments on pages

Again, the same as the thumbnail images, comments are not automatically placed on pages.

You can enable this option if you’d like people to be able to comment on your pages too.

General Settings

Divi theme options layout general settings

Post info section

Here is where you can decide what options you want to show on your pages post info section (the area below your post title).

  • Author
  • Date
  • Categories
  • Comments

Divi theme options layout post info section

Show Thumbs on Index pages

This option is enabled by default and is to show thumbnail images on Index pages.


Ads

Manage Un-Widgetized Advertisements

Divi theme options ads options

This is the section where you manage ads which are not within the widget area of your blog (sidebars etc).

Enable Single Post 468×60 banner

If you enable this option, a 468 x 60 size banner ad will be added to the bottom of your post pages, after your post content.

If you do enable this, you need to make sure you complete the destination URL and other information as in the image below:

Divi theme options banner ad image information


SEO

Homepage SEO

Divi theme options how to customize the homepage for SEO

Enable custom title

When you create your blog, Divi uses a combination of your blog name and description to create your homepage titles. 

If you want to create your own custom title, enable this option and enter the new title in the box further down the page (as in the image below).

Divi theme options how to enter a custom title

Enable meta description 

The meta description is created using the default information from your theme, when you set your blog up!

If you want to use a different description, then enable this option and fill in the custom description box.  

Divi theme options custom meta description

Enable meta keywords

Keywords are not added to your header by default, simply for the fact that search engines do not use keywords to rank your site like they used to. 

However, if you still wish to add some keywords anyway, just in case, you can do that here by enabling this toggle and filling in the custom keywords field.

Divi theme options meta keyowords

Enable canonical URLs

A canonical URL specifies to search engines what your preferred URL is and its purpose is to prevent duplicate content issues with search engines.

By enabling this option, you can define a canonical URL which tells the search engines which URL you “officially” want to use.

If custom titles are disabled, choose auto generation method.

If you don’t use custom titles within your posts, you still get to have control over how your titles are generated. 

You can choose from the following 3 options as to which order you would like your blog post title and description to be displayed:

  • BlogName | Blog description
  • Blog description | BlogName
  • BlogName only

You can also choose to remove the blog name from your title completely. 

Divi theme options how to choose autogeneration method

Define a character to separate BlogName and Post title

You also have the option to change the “character” which separates your blog title and post name, when using auto generated post titles. 

Common characters tend to be | or –

Single Post Page SEO

Divi theme options single post page SEO

This section’s options are almost identical to the Homepage SEO ones, so I’m not going to go through them again!

The great thing about Divi is, there’s a little question mark next to each element, which tells you what each one does, so you can check them out if you do get stuck.

Again, I don’t touch any of these and leave them all defaulted.

Divi theme options where to get help

Index Page SEO

Divi theme options how to index page for SEO

Again, this has some of the exact same options as the other two, so I’m not going through them again here. 

So that concludes the SEO section. 

How are you doing? 

I know when you’re starting a blog, it can be so overwhelming as there’s so much to learn and get done.

If you need anything at all, just ping me an email, or reach out on social media and I’ll help you out…

I’ve always got your back. 


Integration

Divi theme options integration

This is where third part code can be added, without the need for you having to mess around and edit any files. 

Any changes made here are also saved to the database, meaning nothing is ever lost when you update your theme. 

I leave all this section set to the default options, of which most are enabled. 

 

Enable header code

If you disable this option, the header code will be removed from your blog. This option allows you to remove the code while saving it for use later on. 

Enable body code

Disabling this option removes the body code from your blog, allowing you to remove it and save it for later use. 

Enable single top code

If you disable this option, the single top code from your bog will be removed, but still saved for later use.

Enable single bottom code

Again, disabling this allows you to remove the single bottom code, whilst saving it for use later on. 

Add code to the < head > of your blog

This section is where you can add custom code (such as javascript or css) and it will appear in the head section on every page of your blog.

Add code to the < body > (good for tracking codes such as google analytics)

If you need to input code for something like a tracking pixel for a stat counter, like Google Analytics, you can enter that here and it will appear in all the body sections of all the pages of your blog. 

Add code to the top of your posts

Adding code here will place it at the top of all single posts. 

You can use this for things like social bookmarking links. 

Add code to the bottom of your posts, before the comments

This is exactly the same as the option above, except the code would be placed at the bottom of all single posts.

The final section (woohoo) within the Divi Theme Options, is the Updates section…


Updates

Divi theme options updates section

General

This section MUST be completed.

Firstly, you need to enter your Elegant Themes Username and API Key.

Make sure you’re logged into your Elegant Themes account and then you generate an API Key by doing the following:

>Account

>Username and API Key

>Generate New API Key

You can see in the image below that I’ve already generated a key for my blogging for mums blog and my test site. 

You just click on the big “Generate API Key” button and it will ask you to “Add A Label For Reference” and then a big long key code is created with letters and numbers, which you just click on to copy.

It can then be added to the “API Key” Updates section in the Divi Theme Options.

Save the changes and you’re ready to use the theme fully!

Elegant Themes how to get your API key in the members area

You won’t be able to receive product updates until this information has been added. 

Version Rollback

This lets you rollback to a previous installed version of Divi in a single click.

If you update your theme and something goes wrong, there’s nothing more frustrating!

With this rollback option, you can simply click this button and roll back to how it was before you carried out the update.

Yay, you’ve made it through all the Divi Theme Options and should have it all set up ready to go, so when you’re creating pages and posts, it’s set to how you want it.

As I’ve said lots in this post, I’ve kept the majority of the options defaulted and you can too.

As you become more familiar with your blog and blogging itself, you can change things to suit your needs more!

For right now we don’t want to make things more complicated than they need to be, as it’s hard enough when starting a blog, because there’s so much to do!

Next we’re going to look into the actual page builder and see what all the different elements are…

This is used when building and creating any pages you want on your site (such as About Me, Home, Contact Us pages etc).

These page elements are the same if you were to use the Divi Page Builder for blog posts, although I highly recommend you don’t do this as it can take a loooooong time and is really fiddly.

When you’re creating blog posts, there’s a lot more to them and you also have to come back time and time again to add links, make changes etc. 

For blog posts, I recommend you just use the default editor (which is the built in Gutenberg editor) as it has its own awesome block editor + you can add Divi Layout blocks anyway, if you want to use certain Divi elements.

I used the Divi page builder for my first 4 blog posts, because I wanted them to look a certain way, but boy did I regret it and now use the default editor every single time!


So what can you do with the built in Divi Page Builder?

Divi has so many different things you can do with it and I’m going to go through them now…

There’s no way I could ever go through every single unique thing within the Divi Theme and Builder, because there’s just such an incredible amount.

I am however going to go through as much as I can for you, so that you’ll know exactly how to use it and be comfortable using it as well.

My aim is to always make things as simple as possible for you, but some things will just come up as and when you use them and become more familiar with time.

So let’s get into it…

Creating Your First Page Using Divi’s Page Builder

Before we get into all the nitty gritty, I want to say that because a lot of the sections, rows and modules have the same elements, I won’t be repeating myself, because it’s not only boring for you, but it’s also a waste of both our time.

Each module has tons of elements within it, but these tend to be the same for all of the modules within the builder!

So if we come to an aspect which has already been covered, I will only cover it very briefly…

To start, “Add a New Page” and when the editor opens, add a page title which resonates with what your page is going to be about.

Then click on “Use Divi Builder”…

adding a new page in divi builder

You then get 3 options:

  • Build from Scratch
  • Choose a Premade Layout
  • Clone Existing Page

divi builder layout options for new posts and pages

Build from Scratch

This is exactly what it says and you build your page from the ground up, adding everything from scratch.

Choosing a Premade Layout

This is an amazing option, because Divi allows you access to hundreds of premade layouts, making the whole “page creating” stage so simple and easy!

I created all my pages using premade layouts and tweaked them to make them unique to me and my brand. 

This is also where your saved layouts go, if and when you save them as you create. 

Again, this is something I do regularly and when I create a certain module, which I know I’m going to use again, I save it so I can use it again and again and not have to waste time creating it from scratch.

Clone Existing Page

Here is where you can select a page you’ve already created and duplicate it for a new one.

This is a HUGE timesaver and will make creating pages super quick and easy for you!

I again use this a lot, so that all my pages are congruent to my branding. 

Before we start actually building, I want to cover the 3 main elements which will enable you to actually create a beautiful page. 

The 3 main elements, which everything else umbrellas under are: 

Sections

Rows

Modules

I wanted to make the above statement bold and stand out, because it’s so easy to forget to save work (yep, I’ve done it a few times). 

You save it by clicking on the big green box with a tick in and then you also need to click the other green box in the bottom right hand corner, when you want to save everything you’ve done before you exit the builder. .

divi builder how to save your work

As well as the “Green tick and Save” buttons, you also have 3 other buttons at the bottom of each module.

four buttons within divi builder modules for actions

The red cross is to “Discard All Changes”, so if you click this, it will just click off and you’ll lose everything you’ve done within that module.

The purple “Undo” button simply undoes the last edit you carried out.

The blue “Redo” button simply puts back the edit you carried out, if you clicked undo by accident.

That was a mouthful to get out…

using the four buttons to save, undo, redo etc in divi modules

We’ll start now with the “Sections”…

Sections

The sections are the largest building block within the Divi builder and they’re used to group your content into individual and distinguishable areas.

Everything you build within Divi starts with the section element and the section wraps all your content together nice and neatly.

New Section

To add a new section, you find the blue circle with a white cross in it, which says “Add New Section” when you hover over it.

divi builder adding a new section

You then get different section options to choose from, including (regular) blue, (specialty) red and (full width) which is the purple colour! 

We’ll start with the regular one, as that’s the one you’re probably going to be using the most!

Regular

The regular option tends to be for your everyday content.

Specialty

This is for when you want to get more creative with your layout use, as you can have more advanced column structures, which you can add more complex column variations and full-spanning vertical sidebars.

divi builder speciality options

You’ll know when you’re using this kind of section, as it has a bright orange colour frame. 

divi speciality section is orange

I’ve created a couple of examples for you in the image below, so you can see the different layouts and styles you can have with a specialty format section.

specialty section in modules example

Full Width

This section is used when you want to cover the full width of the browser and only certain modules are able to be used within this section…

The difference here is that there are no columns or rows to work with, as everything expands to 100%.

The module options you have are:

  • Full width Code
  • Full width Header
  • Full width Image
  • Full Width Map
  • Full Width Menu
  • Full Width Portfolio
  • Full Width Post Slider
  • Full Width Post Title
  • Full Width Slider

I haven’t used many of these options myself so far, but I have used the Full Width Post Title and also the Image and Slider one too, as they look really cool. 

You can see how to add a Full Width Slider module below…

how to use the full width slider module

As well as adding a “New Section”, you also get to “Add from Library”.

Add From Library

You need to actually have things in the Divi library though in order to do this. 

I’ll show you how to save templates later on in this post, so that you can do this, but for now, I just wanted to show you where you go to add from the library.

adding section from the divi library

The sections area (which you’ll find on the top left hand corner of the section itself) also has some tabs which can be customized.

They are:

  • Move Section
  • Settings Section
  • Duplicate Section
  • Save Section To Library
  • Delete Section
  • Other Section Settings

Move Section

This is exactly what it says it is and you move the section up and down, using the cursor, to wherever you want it to go.

how to move a section in the divi builder

Settings Section

This is where you can change a lot of things for that particular section, so we’ll take a look now at the individual tabs within the settings section.

There are 3 main tabs within the sections settings, which are:

  • Content
  • Design
  • Advanced

The first tab is the “Content” one, so we’ll check this one out first.

NB: The “Content, Design & Advanced” tabs also appear in the “Rows” and “Modules” sections…


Content

Under the content tab, you'll find the Link, Background and Admin Label options.

Link

This is where you can add a link and when anywhere is clicked within that section, it will take you to that link…

section link target

Background

The background of your section can be whatever you want it to be.

You have the options of:

  • Background Colour
  • Background Gradient
  • Background Image
  • Background Video

Before you change all this, I wanted to show you how you make the element you’re working on expand, if you can’t see everything.

For example, in the image below, you can’t see any of the colour options for us to change the background colour, so I’ve shown you how you can drag and expand this out, so you can place it in the best suited position for you.

dragging the section out to show more

Now I’ve shown you how to do that (which you can do for any section, row or module tab you’re working on), we can get back to looking at how we can customize the section background.

NOTE: All the modules have some little icons next to the titles:

  • Help Question Mark – If clicked, this will tell you what that element does
  • Phone Icon – This allows you to change which view you want to work in or see how it looks, either Desktop, Tablet or Phone
  • A Little Arrow – This brings up a “Desktop” and “Hover” setting, which allows you to customize a module, if you want to add hover visualizations. 
  • Three dots – This allows some other options, such as copying, resetting and finding & replacing etc…

elements for help and view in module
background help options

There are lots of ways you can make your background section stand out (as per the image below).

background options in module

Background Colour

You can have a solid colour, where you just pick a colour of choice, preferably one that is congruent with your brand. 

Background Gradient

You can also have a gradient of two colours, but the fun doesn’t end there, as you can do a ton of things with the gradient, such as have it linear or radial and stretch the gradient direction, among other things, which you can see in the image below…

Background Image 

Even the image background has several options to choose from, such as toggling the “Use Parallax Effect” to on, which will allow the background image to stay fixed when you scroll the page to what position you want the image to be.

The image below shows you the options and the great thing with the “Visual Builder” is, you get to see in real time, all the changes you’re making, in all views as well (desktop, tablet or phone). 

While we’re on the subject of the visual builder, let’s look at this quickly in a bit more detail.

Visual Builder 

When we’re creating our pages, we’re in what’s known as the “Visual Builder” and you can exit this at any time by clicking on the “Exit Visual Builder” button at the top of the screen. 

There are also options at the bottom within the purple circle with 3 white dots on and this is how you save and publish what you do (I’ll talk more about these options later as there’s a few things on this translucent bar).

When you work on a “live” site, you always want to “Save Draft” and not “Publish” until you’re completely sure it’s ready to go and you want the world to see it.

Posts need lots doing to them before they go live for all on the Internet, including editing, adding any images you want and SEO to name but a few…

Wowzers, I keep going off track because there’s lots of things which crop up as we’re going along…

Back to the background element within the Settings Section…

The image below will show you the image options and you’ll be able to see it changing in real time!

options when adding images in divi builder

Background Video

The video element even has different options for you.

It also advises you to add not only an MP4 version of the video, but  .WEBM format too, so that you get maximum compatibility across all browsers.  

There are other options, such as the video's exact width and height measurements, so that they can be sized correctly, plus an option to decide whether you want to allow your videos to be paused when another video plays and paused when it’s not in view for the reader.

background video options in divi builder

Admin Label

This is where you can add in a custom admin label, which helps you better understand what that module/section etc is.

In the image below, you can see that it says “section” in the admin label, because this is the “Section Settings” area we’re amending.

Handy Tip: Another handy tip I want to quickly share with you, is that there's always a little “help” section at the bottom of the modules, where you can click and a “Divi Builder Helper” pop-up appears with helpful videos, which you can watch right there and then within the builder. There’s also a tab for “Keyboard Shortcuts” which shows you all the shortcuts you can use.

help and keyboard shortcuts in divi modules

Design

The next tab I want to show you is the “Design” tab…

divi sections design tab

Here’s where a lot of things can be customized for your section…

There are 9 different elements that we can look at:

Layout

Here you can choose whether to have an inner shadow or not (as seen in the image below)…

Dividers

Next up is the Dividers element, where you can add really cool dividers at the top and bottom of the section…

I use these a lot in my pages, as you can see in the 3 images below…

my blog divider example 1

You have all kinds of customization's within the Divider tab:

  • Divider Style
  • Divider Colour
  • Divider Height
  • Divider Horizontal Repeat
  • Divider Flip
  • Divider Arrangement

divider options

You can have exactly the same options for a “Top” and “Bottom” divider!

dividers top and bottom options

Sizing

Here is where you can set the width, height and alignment for your section.

Width 

By default, any elements will extend to the full width of their parent element. 

Using this “Width” field, you can set a custom static width.

custom static width for section

Max Width

Here, you can set a “maximum width” so that your element will never exceed the defined width value. 

section max width option

Section Alignment

You can align the section to the right, left or centre…

Min Height

Setting a minimum height means that your element will always have a height of at least the amount which is defined and it overrides any smaller static height values. 

Content overflow will not happen (unlike in the height element) and the element will remain dynamic.

section minimum height

Height

This option sets a “static height value” for your element and once it’s been set, the height of the element will no longer be determined by the inner content. 

If any content exceeds the static height of the element, it will overflow out of the element. 

You can see in the image below the difference between using the “Min Height” and the “Height” elements. 

section height and min height option

Max Height

If you set a maximum height, it will prevent your element from going over the defined height value. 

As you increase your module and it surpasses the maximum height, it will overflow the element.

In the image below, you can see it overflows into the content.

section max height option

Spacing

The spacing element allows you to change the margins and padding for the section.

Margin

You can change the left and right margins, as well as the top and bottom margins. 

The margins add extra space to the outside of your element, causing an increase to the distance between the element and the other items on the page. 

sections margin options

Padding 

By adding padding, you’ll get extra space inside the element, increasing the distance between the edge of the element and the inside content. 

sections padding options

Border

Borders can add a really nice and unique look to your sections, modules and rows…

Rounded Corners

You change the corner radius of the element and you either have the option to use the “link” icon to control all four corners, or un-link it to have more control, with custom corners. 

Border Styles

Borders can be added to any element you like!

You have so much control over the customization's you can make, either having the whole border customized, or just a side or two…

Check out the image below to see what you can do and you can let your imagination run wild…

sections border styles options

Box Shadow

Next up is the “Box Shadow”.

This is great to make sections stand out and again, you have full control over how you want your borders to look.

section border shadow styles

Filters 

The filters have several options you can play around with and change:

  • Hue
  • Saturation
  • Brightness
  • Contrast
  • Invert
  • Sepia
  • Opacity
  • Blur
  • Blend Mode

You can really create some different looks with these filters…

section filters options

Transform

There are several options you can play with in the “Transform” tab.

section transform options

Using the “Transform” element allows you to transform the “performance visual adjustments” to any element, using the different options, such as Scale, Translation, Rotation etc…

The amazing thing with this feature, is that you can create advanced design effects, without having to use an added graphic design program – much better all round!!!

First up is the “Transform Scale”…

Transform Scale

This pulls the content in and out, either with the “link” button on, so that it scales all of the elements, or you can click the link off and just scale it individually…

section transform scale option

Transform Translate

Again, you can manoeuvre the content around and this can be done with all of the content moved equally (with the link element clicked on) or with it clicked off, so that you can move it individually and have further control.

section transform translate option

Transform Rotate

This element gives you even more flexibility and control over the look and feel of the section…

I think this one can make the section look a little crazy and eye boggling if I’m honest, but it’s pretty cool all the same…

section transform rotate option

Transform Skew

The Skew element is used to create compelling depth effects. You can either lock in the aspect ratio, or unlock and adjust each side independently.

If you combine both the Skew and the Rotation elements, you can create some awesome 3D effects.

transform skew

Transform Origin

This element affects all the transforms added to any element at once. 

You can change the position of transformed elements. 2D transformations can be adjusted across the “x” and “y” axis.

Animation

The final tab within the Design section is the “Animation” element.

The Animation element gives you a lot of great functions for your section.

Animation Style

The first thing to do is choose the “Animation Style” you want to have your section do, so when your reader scrolls to this section on your page, the chosen element comes to life…

The style options are as follows: 

  • None
  • Fade
  • Slide
  • Bounce
  • Zoom
  • Flip
  • Fold
  • Roll

Let’s check out what they look like in action…

section animation styles options

As well as the above options, for each of those options comes all the inner elements you can adjust to make it even more unique and awesome!

Animation Direction

Here you can adjust the start and end position of the element, by using one of the five different animation directions on offer.

section animation direction option

Animation Duration

Here is where you set how long you want the animation to last.

You can speed it up, or slow it down…

section animation duration option

Animation Delay

You can even add a “delay” to your animation, before it starts!

If you’re using multiple animations modules, this is a great option to use…

The delay is run in milliseconds.

section animation delay option

This element affects how subtle or aggressive your animation is.

Animation Intensity

If you want a smoother, subtler animation, then you’ll need a lower intensity.

Are you wanting a more aggressive animation, then increase the intensity to see a snappier animation. 

section animation intensity option

Animation Starting Opacity

This option allows you to start your animation with an increased opacity. 

This causes the element's fade effect to be reduced or removed, for all of the animation styles.

Animation Speed Curve

If you want to create a smoother effect for your animation, you can adjust the easing method here.

There are five options to choose from:

  • Ease-In-Out
  • Ease
  • Ease-In
  • Ease-Out
  • Linear

section speed curve animation option

Animation Repeat

The animations are set to only play once, however, you also have the option to play it on a loop continuously!

section animation loop option

Woohoo! That’s the “Design” tab finished and we’re onto the final part of the “Sections” module – the “Advanced” elements…. 


Advanced

Within the “Advanced” elements, there are six items which can be changed:

  • CSS ID & Classes
  • Custom CSS
  • Visibility
  • Transitions
  • Position
  • Scroll Effects

Let’s see what they all do…

CSS ID & Classes & Custom CSS

Usually left to the developers of the blogging and website world, CSS is something I never touch.

However, it’s a great way to have more control over your design & customization's (if you know what you’re doing) and if the “Design” tab doesn’t have the options you need, even after the huge offerings it serves up.

You can add in your own CSS (cascading style sheets) for each individual module, rather than customizing CSS for the whole theme’s style.css file.

This gives you more leeway for creativity and uniqueness.

As I said above, this is something I never touch, because it tends to be for more advanced users or people such as developers, who write their own code. 

Elegant Themes who created the Divi theme share more on this within this article, if you want to share more on this within this article learn more about it.

Visibility

With this element, you even get to decide if you want certain modules disabled from selected devices.

You may want a module to show on desktop, but not phone and tablet.

Also, it allows you to set the CSS overflow property of an element, to one of the five options available within the settings, which is great for more diverse design layouts.

Transitions

This is an added bonus for when you’re using the “hover” options within a module and can make things much more fun and interactive for your readers.

You can adjust the transition timing, delay and speed curve for each hover animation. 

Position

This section allows you to position elements by clicking a location point. 

Once you have chosen a point, there are then four types of positioning available:

 

  • Default – static 
  • Relative – sit statically in their parent container
  • Absolute – float inside their parent container
  • Fixed – float within the browser viewport

Choosing the default option means nothing actually changes. You’re just choosing the position to be static.

After you’ve chosen a position, you then get even more options on how you can style that position. 

Offset Origin – Here you can choose which corner to offset, plus you also have a “Vertical” and “Horizontal” offset option as well to play around with.

Advanced tab in module positions element

The “Absolute” option allows you to move the position around (as in the image below).

Advanced section in module absolute position option

You do have to be careful with the positioning element, as it can cause the elements to become less responsive on mobile devices, causing them to break out of the document flow.

The final element within the Advanced tab is the “Scroll Effects”.

Scroll Effects

This element allows you to create advanced animations and transitions when your readers scroll up and down the page. 

Scroll effects work in line with your readers scrolling behaviour.

The speed and direction of the animation is based on which direction the reader is scrolling alongside the speed they’re scrolling. 

The animation timeline is based on the element’s position within the browser viewport.

There are six items within the “Scroll Effects” element:

  1. Vertical Motion
  2. Horizontal Motion
  3. Fading In & Out 
  4. Scaling Up & Down
  5. Rotating
  6. Blur

Every one of these elements has a “Set” bar, where you can change the offset setting at the start, middle and end, to whichever percentage looks best…

advanced setting set options

They also each have a “Motion Effect Trigger”, where you can choose when the effect comes into view for the reader (either middle, top or bottom).

motion effect trigger option in divi module

Enabling the Vertical Motion allows the element to move faster or slower than the others around it, as the reader scrolls through the page.

Enabling the Horizontal Motion does exactly the same as the vertical motion, except in a horizontal direction.

using the horizontal motion element in divi modules

Enabling the Fading In & Out option changes the opacity effect, so that as and when the reader scrolls the page, the element fades in and out.

Enabling the Scaling Up & Down option, gives the element the effect of growing and shrinking as the readers scrolls through the page.

Enabling the Rotating option allows the element to rotate, so that it spins when the reader scrolls the page. 

divi module rotating gif

The final element within the Scrolling Effects is the Blur. This causes it to blur out when the reader scrolls through the page.

divi module blur element

That’s it, we’ve finished with the “Sections” module and now we’re onto the “Rows”…

Quick Note…

I've  gone over the “Content” and “Design” tabs for the “Rows” because although there are similarities, there are many differences too!

For the “Advanced” tab however, I’ve linked back to where this is previously explained in the “Sections” part, so as not to repeat exactly the same information.


Rows

Before we get right in and look at the row options, let’s take a look at the actual row elements.

They’re very similar to the “Section” elements, where you control the settings for the whole row.

You can see in the image below all the options available…

divi row elements

First, you have the “cross” where you’re able to move the row up and down on the page, to wherever you want it to be applied.

Second, there’s the “settings” where you can amend the column structure and the design of the whole row (background colour, border, box shadow etc). 

how to use the row elements options

Thirdly, you have the “duplicate row” where you can duplicate the whole row you’ve designed. 

Next up is the little “gate” symbol, where you can change the column structure to show however many columns you want in the row.

The “downward arrow” symbol is the next element and this is where you can save the row to the Divi library.

The final symbol is the little “bin” and this is for deleting the entire row.

The three little dots at the end are other options, such as split testing, which is great if you want to test different designs of the same rows, reset row styles, make styles default and many more you can check out.

So, let’s start looking at the Row Options…

adding a new row in divi builder

There are loads of different options here as to how you can have your row. 

We’ll choose the first option for one row, but you can have whatever you want and need!

I tend to use two rows a lot when I have images side by side.

Once you’ve clicked on the one row, you need to decide what module you want to add!

how to add a new module

They’re in alphabetical order and you can also type in the search bar what you’re looking for. 

how to search for a module in divi builder

I’m choosing the “Text” module for this example.

divi builder text module

Every module has a Content section, a Design section and an Advanced section. 

Pretty much all of the elements within these are the same for every module, with one or two exceptions, where there may be a couple of added extras. 

I’m not going to go through every single element, breaking each of them down as that would take forever and isn’t needed, because once you’ve worked with one or two modules and elements, they’re so simple and easy to get to grips with and generate. 

divi module content section

The Content section is where you add the actual content (text, an image, an audio file etc).

Whatever the actual content is, this is where you add it.


Content

Text

The text module has a simple editor, where you can add bullet points, change the text from paragraph to the different header elements, add links and media (images) etc…

divi builder text module text element

You also have the option to work on the “text” side, where JavaScript etc can be added as well.

divi builder text module visual or text option

There is a text element to almost all of the modules, but some just have a “Title” or something else relating to the module it is (as per the image of the audio module below). 

They’re all pretty uniform and it isn’t difficult to figure out what needs to be added, as Divi is clear with everything and gives you help options (a little question mark) everywhere. 

Link

This is where you can add a link within this module and if anywhere is clicked within that module, it will link to it.

For this example, I’ve used a link to the test site “About Me” page.

I’ve entered this About Me page URL link into the “Text” modules “Link” section…

You can see in the image below, that when you click anywhere on the text module, it opens up the link to the About me page.

You also have the option for any links to either open in the same window, or in a new tab.

I tend to use the new tab more often than not because I don’t want my readers to be taken away completely from the content they’re already reading!

Background

Again, exactly the same options are present here that we went through in the “sections” part of this post, so I’m not going to go through it all again here! 


Design

Text

This part of the module controls all of the text for that particular module you’re working on.

Within the text element comes:

  • The Text itself (which is the body text)
  • The Link text (for any links you have)
  • Unordered List font – this is for HTML list styling which you can check out more on the Elegant Themes website
  • Ordered List font (this is for HTML list styling)
  • Blockquote font (is for any blockquote styling you use)

how to use the blockquote in text module

Each of these subsections have the same elements within them (except the wording may be slightly different, depending on what it’s for, for example Link Font, Link Font Weight, instead of Text font, Text Font Weight etc…

  • Text Font you want to use
  • Text Font Weight (bold, regular, light etc)
  • Text Font Style (italic, all capitals, underlined etc)
  • Text Colour
  • Text Size
  • Text Letter Spacing
  • Text Line Height
  • Text Shadow
  • Text Alignment
  • Text Colour (light or dark, depending on what colour background you're working with)

I’m not going into every single part of each element, because they’re all very straightforward and the same or similar.

If you click on each item and have a play around with them, you’ll soon get a feel for what everything does.

I’ve done a quick demonstration of what you can do with all of the individual elements below…

how to use divi text elements

I do just want to point out as well, that when you’re working on a particular module, if you scroll over the text or whatever you have on the page, it will highlight what area you’re currently working on (as per the image below).

Most elements which you can make changes to, have the four little icons next to the element title as well…

Question Mark Icon

Click on this if you need help knowing what the element is.

Phone Screen Icon

This is where you can click on each item (Desktop, Tablet & Phone) and see what it looks like on each device.

Arrow Icon

This undoes an action you’ve just taken. 

Three Dot Icon

This is where you have some options to copy, reset, make style default etc.

Next up is the Heading Text, which is similar to the body text, but there are a few different elements.

Heading Text

When you want a header, you need to first select a heading style from within the “Content” text, where you actually write your content for your page.

heading element within content settings

Then back in the “Design” area, under the “Heading Text” element, you can set your styles for each header text!

You have the following header texts you can use:

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6

Using different header styles throughout your content will not only make it stand out more, it will break it up for your readers.

I use Header 1 for my blog post titles and then usually Headers 2 & 3 for headings and subheadings within my posts.

Each element within each of those heading styles is exactly the same as within the “Text” element, so therefore, I’m not going to duplicate the information here.

Sizing

This is where you can set custom changes to the size of the width, height and alignment for the content within this module. 

You can see how this works in the image below…

custom sizing in modules

Spacing

This section has two elements you can change:

  • Margin
  • Padding

The margin is where you can add extra space to the “outside” of the element itself.

You can do this by either changing the size of the pixels, or by adding in a percentage figure. 

The Padding is similar, except it adds padding to the “inside” of the element.

Border

This is where you can change the look of the corner radius of this element.

If you click on the “link” icon in the centre, this controls all corners of the border, however, if you want to control each corner individually, then you can click the link icon off.

You can also control the style and colour of the border.

Box Shadow

You can add a box shadow to your module here and there’s many different style choices.

Filters

This is where you can add different filters to your text, such as different contrasts, saturation and brightness etc…

divi module filters options

Transform

This element allows you to make visual transformations to your module, freehand, which would normally be done within special design programs.

Some of them are pretty crazy to look at, I have to say and made my eyes boggle a bit. 

There are five different options you can transform:

  1. Scale
  2. Translate
  3. Rotate
  4. Skew
  5. Origin

I’ve given a demonstration of how they work below, but you can delve deeper into how they work.

divi module transformation element

Animation

This is where you can add an animation to this element.

Each animation also has its own settings as well you can play around with.

You can really create some awesome and unique styles for your content.

divi module animations element

So that’s all the design elements. The final section within this module is the “Advanced” one.

Before we get into that though, I want to show you the different ways you can have the “settings box” on your screen, as everyone likes to work differently.

The box itself can be moved around to wherever you want it, but there are a couple of tabs you can use to move it.

how to move the settings box to where you want it to suit you working

Advanced

This section is exactly the same for all the “Advanced” sections, whether it be in the Sections, Row or Module areas, so I'm not going to go through it all again here now.


Divi Modules

 

So we’ve now gone through all of the elements under the Content, Design & Advanced tabs.

These elements are almost identical in each and everyone of the Divi modules available, give or take a few differences.

I’ve listed all 38 of the Divi Modules below, with a brief explanation as to what they’re for, however, I won’t be going through each and every one of them in depth.

I've actually used the “Toggle” module to minimize the amount of text open, so just click on each one and they'll open up and have all the information for you inside…

So let’s get into the modules…

Divi's 38 Modules

Accordion Module

This module is a fab way to amalgamate information together within a single system. 

Using this module presents the information in a vertical list format and when a new list item is opened, the previous one closes.

divi builder accordion module

There are three additional elements within the Design tab of the Accordion module:

  1. Icon
  2. Toggle 
  3. Closed Title Text

Accordion module settings

Icon

Within this element, you can change the colour and size of the little icon which opens and closes the list item, as seen in the image below…

how to use the accordion module

Toggle

This is where you can change the background colour of the list item when it’s open and closed.

accordion module toggle background

Closed Title Text

This extra text option allows you to change everything as you would in the other text elements, but for the title text on the closed list tab for this module.

accordion module toggle title text

Back to Top

Audio

This module is used if you want to add audio into your content.

This is great for podcaster's or musicians showcasing their latest tracks, as it embeds a file and a custom audio file. 

There are three elements within the Content tab, which are different to the other modules…

  1. Text
  2. Audio
  3. Image

Text

The text is where you add in details about the audio you’re uploading.

divi audio module

Audio

This is where you upload the audio file you want to use, either by uploading to the media files or inserting a URL…

how to add the divi audio module

Image

You can also add an image to the section as well.

how to add an image to divi audio module

Back to Top

Bar Counter

The Bar Counter module is a fun way to show statistics to your readers, as it uses an animated, fun feature.

how to use the bar counter divi module

This module has the main bar counter element, where you can enter a title + you can add additional bar counters if required, within the Content tab.

You also have the choice whether to show a percentage or not.

divi module bar counter elements

In the Design tab, there are two extra elements…

Bar

This is where you can change the actual bar colour.

divi module changing the bar counter colour

Percentage Text

This is where you can customize the text for the percentage.

customizing the bar counter module text

Back to Top

Blog

The blog module is awesome to have, because it means you can place your blog anywhere you want on your website, in a number of combinations. 

This module has slightly more differences, because it is for the actual layout of your blog page…

First of all, in the Content tab, there’s two sections we need to look at:

  1. Content
  2. Elements

Within the Content tab, are the following sections to customize:

Post Type 

The content section is where we customize how and where you want your blog posts to appear.

You firstly need to specify what post type you want, as there’s a few options you can choose from.

blog module post type options

Then there’s a whole host of other things you can customize…

blog module content settings

Post Count

Then if you don’t want the defaulted post count of 10, you can change this here.

Included Categories

You can also decide what categories you’d like to include within your blog post feed.

Date Format

There’s the option to change the date format if you wish.

Content Length

The content length is where you can decide whether you just want to show excerpts of your posts, or the full content ( I recommend excerpts). 

Use Post Excerpts

If you want to ignore manually defined excerpts and always generate them automatically, then disable this option here.

Excerpt Length

This is where you define the length of automatically generated excerpts.

If you want it set to the default 270, leave this blank.

Post Offset Number

If you want to skip some posts within your feed, you can define how many here.

Next up is the Elements section  and this section includes:

Show Featured Image

Here is where you can choose whether you want to show the featured image thumbnails or not. 

Toggle the switch off and they won’t show. 

blog module show whether you want a featured image

Show Read More Button

Here you can decide whether you want to add the “Read More” link at the bottom of the excerpts.

Show Author/Show Date/Show Categories/Show Comment Count/Show Excerpt/Show Pagination

These can all be toggled on or off, depending on what you want to show under your post title .

blog module show author comments and other options

Under the Design tab, there’s a couple of extra elements I want to run through with you.

Layout

Here is where you can choose whether to have your posts full width or in a grid format, as seen in the image below…

 

blog module layout options

 

Overlay

You can choose to have an overlay colour and an Icon over the featured image, when readers hover over it.

There are many things such as icon colour, background and the actual icon which you can change here…

blog module overlay options

Back to Top

Blurb

The blurb module is a mixture of text and images and is a great module to use when you want to showcase small pieces of information.

Within the Content tab, you have the option to use an image with the blurb text or an icon (of which there’s tons to choose from) if you turn the icon button on.

blurb module

If you head on over into the Design tab, you can choose different colours and styles for your icon, as in the example below…

blurb module icon style

Back to Top

Button

This module allows you to add a button wherever you want on a page.

You can use it for all kinds of things, including on Landing Pages as Call to Actions.

Within the Content tab, you can add the text for what you want your button to say!

button module

Plus, you can choose where you want the button aligned.

how to use the button module

The button can also be customized to your heart's content, as there really are a lot of customization options, which you can access from the Design tab.

button module customization options

Back to Top

Call To Action

The Call to Action module is great for adding in call to actions, wherever you want on a page…

call to action module button link

This is great for getting people to sign up for your freebies, or if you want to share something amazing (where they can click to learn more etc)…

Most elements are the same, you can customize the actual button within the button tab, but you have to make sure you add a link into the link section, otherwise your button won’t show up!

call to action module button link options

Back to Top

Circle Counter

This module can help you show a single statistic, in a beautiful way.

how to use the circle counter module

 

When you scroll the page, the number counts up until it reaches the circle percentage. 

call to action module circle counter in action

Back to Top

Code

This is a simple module, where you can add code.

I’ve never used this one, as I don’t tend to touch anything “code” related, for fear I’m going to cause my whole site to go down lol… but it’s there if you’re techie or need to add custom coding of any kind.

code module

Back to Top

Comments

This module I do have, at the bottom of all my blog posts, although with this comments module, you can place the comments section wherever you fancy!

The comments module is a great way to get interactive with your readers and ask them for their opinions and comments on the things you write about.

Within the Content tab, there is an “Elements” section, where you can choose whether to show the author avatar, the reply button and the comment count.

All these buttons can be toggled on or off, depending on what you want to show…

comments module elements

Within the Design tab, there’s a few things that can be customized in here, which are different to the other modules.

Fields

You have the “Fields” element, where you can customize pretty much everything, from the background colour of the comments box, to the border styles.

comments module comments field section

I always love playing around with these and seeing what looks great and you can too. 

Image

This is for the “avatar” image, if you’ve chosen show this in the Content tab.

You can choose how you want it to look, with lots of different customizations available for you to work with.

You can also customize all the texts involved for this module, including the comment count text, the form title text and the actual comment text.

comments module text and button options

You’re even able to fully customize the “Submit Comment” button too.

Making the comments module fun and interesting, will entice more readers to leave their comments.

Back to Top

Contact Form

This module includes a fully customizable contact form (which I use on my contact page) which you can place anywhere on your blog!

You definitely want to add a contact form somewhere, as you want to make sure your readers always feel like they can reach out to you.

This builds trust and lets your readers know you’re there for them when they need it.

There are quite a few added extras within this module, which we’ll look at now…

Under the Content tab, you start by having the options for what “fields” you want to add.

Usually, you just want to have a name, email address and the message box itself (which are defaulted when you add this module) but you can add whatever you feel is necessary here for your blog!

Text

Next up is the text section, where you can personalise it more and make it stand out, by adding a title and customizing the success message and submit button.

contact form module content text options

Email

You also need to complete the email section, as this is where the emails are going to be sent. 

Divi recommends you use an email delivery service (I use ConvertKit) so that you make sure the emails are delivered efficiently.

contact form module email address options

Redirect

Here you can add a URL if you want to redirect your readers after they’ve successfully completed the form.

Just toggle it to on and input the URL. 

contact form module redirect options

Spam Protection

You either have the option to use the basic captcha form, or toggle the button on, if you want to use your own third party spam protection.

contact form module spam protection options

 

You can also toggle the basic captcha off as well, if you don’t want any spam protection to be used. 

Within the Design tab, you can change all the usual text sections (plus there’s the captcha text in this module) and fully customize them all, but you also have the “Fields” section here, where you can fully customize the fields.

contact form module design fields options

You really can customize everything to fit you and your blog brand.

 Back to Top

Countdown Timer

This module lets you create a visual countdown timer, which counts down to a particular date.

This would be great to use for a “Coming Soon” page for your new blog!

If you know you want to launch your blog by a specific date (it’s alway great to work to deadlines) then this countdown timer module would work great for that.

It’s also great for things like countdowns to new products being launched etc…

The Content tab is where you’ll need to set the date and time for your timer.

You can see in the image below, that you need to set the hours and minutes…

countdown timer module content text

Again, under the Design tab, there’s a ton of different text sections you can customize.

I’m not going to go through all of these, as I think you get the idea now, but you can see you can customize the numbers and the separators text.

countdown timer module design of the text

Back to Top

Divider

The divider is a really simple module to use.

It adds in a divider to break up your text and your content and really helps to structure the layout of your blog.

You can make a few customizations to the divider itself, within the Design tab, under “Line” and “Sizing” sections, such as change the colour, weight of the divider and the alignment etc…

divider module

Back to Top

Email Opt-In

Another module which is going to come in very handy, is the Email Opt-In.

You’re going to need this one when you start building your email list (which you’re gonna want to start doing straight away)…

email opt in divi module

 

The Content tab is where you’ll want to add in your amazing title and let your readers know about the awesome freebie you’re giving away (or whatever it may be).

Then there’s some other tabs which we’ve seen before in other modules, so I’m not going to go through these.

email opt in module content fields options

The fields section however, allows you to choose what you want your readers to fill in (first name, last name etc)… 

email opt in module opt in fields

Back to Top

Filterable Portfolio

The Filterable Portfolio module is where you can display your most recent projects, either in a Grid or Standard layout. 

It loads the new projects which you add, using an Ajax request (an Ajaz request is where data is exchanged with the server, however, it updates part of the web document without reloading the web page). 

It filters the project list via categories, so when a particular category is selected, the list of projects regenerates with a new list of projects from the selected category…

It basically gives your readers a way to view specific groups of projects.

Within the Content tab, you have the option to define the number of projects which can be displayed (leave it at it’s default if you want it as standard). 

You also get to decide what categories (if any) you include and whether to show pagination.

What is Pagination: It basically stops all your posts loading at once, when a visitor comes to your blog/site.

If it didn’t paginate, then your blog would take such a long time to render and you’d probably lose a lot of readers.

Divi has this element built in and usually each module has it defaulted to show…

filtered portfolio module content options

Within the Design tab, you can decide what layout you want (full width or grid) whether you want an overlay on the icon and/or the hover + many more of the usual suspects that can be customized.

filtered portfolio module design options

Back to Top

Login Settings

This is a fab module to use if you’re planning on having a membership site attached to your blog.

It’s a prettier and easier way to add a login form to any page on your site.

The Content tab has one section which is unique to this module and that’s the “Redirect” section.

Here is where you can toggle it on or off, to determine whether the user remains on that current page, once they've logged in.

login module settings

The Design tab has all the usual sections you can customize, such as the fields, button and text…

login module design settings

Back to Top

Map

This module allows you to add a Map onto any page on your blog.

map divi module

You simply add in an address that you want and click on “Find” and it will bring up the Map..

I’ve never needed to use the Maps module, so can’t show you how it looks because it needs to be set up, but Elegant Themes has full instructions on this here!

Back to Top

 

Number Counter

If you want to add a fun number counter to display any kind of stats, then this module is for you…

Use it for all kinds of things including showing the number of Facebook followers, or number of people who have subscribed to your YouTube channel etc!

number counter module

Back to Top

Person

 

person divi module

 

If you want to make your “About Me” page pop, then you can use this module to create a personal profile.

It’s also awesome for a “Team” page, if you have a team you want to showcase with their bio information and links to their social media platforms etc…

person module styling

Back to Top

Portfolio

Here is where you can show off your work in a column structure, wherever you fancy placing the module on your blog.

I designed a few quick images for this example, using Canva which I use for most of my design work (pin images etc)…

canva

This works exactly the same as the “Filtered Portfolio” module, with all the same options, so I’m not going to go through this one again here.

Back to Top

Post Navigation

Keeping your readers engaged and getting them to read more of your content, is what it’s all about…

Having navigation links at the bottom of your blog posts, to click on the next post, or the previous post, is a great way to do this.

You can even change it so that it doesn’t just say “Next Post” or “Previous Post”.

Simply type – %title into the “Previous Link” and “Next Link” areas within the Content tab.

navigation post module how to show previous link

The “Categories” element lets you define whether the previous/next post must be within the same classification as the current post, which is fab if you want to keep them reading posts on the same topic. 

The “Navigation” element is where you can actually toggle which ones you want to show, as you may only want to show the “Next Post Link”…

post navigation module navigation options

The Design tab is the same as the other modules, where you can customize the text etc…

You can see how this module looks in action below:

post navigation in use example

Back to Top

Post Slider

This module can showcase your posts in a “Slider” fashion (as per the image below)…

post slider module in action

The Content tab allows you to customize a few options for how you want the slider to show your posts…

The first option is the “Post Count” which shows how many posts you’d like to display within the slider.

The second option is the “Included Categories” where you can also pick and choose what categories of posts you want to add.

The third option is “Order By” and you can adjust the order in which your posts are displayed in the slider.

The fourth option is the “Button” and you can change the text on here, if you don’t want it to show the default “Read More”…

The fifth option is the “Content Display” of which you can show just an excerpt of your blog post, or the full content.

I think just the excerpt looks nicer and cleaner, but it depends on what look you’re going for with your blog and how you’re laying it out for you and your brand.

The sixth option is the “Use Post Excerpts” which if disabled, will ignore the manually defined excerpt length!

The seventh option is related to the sixth option, in that if you decide to enable the “Use Post Excerpts”  you can define the length of the automatically generated excerpts here. 

The eighth and final option within this module's Content tab is the “Offset number” where you choose how many posts you would like to skip and not show.

This is useful if you want to have more than one slider and you don’t want to show the same posts twice.

You can see in the image below I’ve selected post number 1 to be skipped.

post slider module offset number option

Then in the following image, you can see only posts 2, 3 and 4 are coming up in the slider…

post slider module example

Back to Top

Post Title

This module displays the title of your current post and the featured image and metadata (if you want them too).

post title module

It gives you more of a variety with the look of your titles.

You’re able to toggle on and off which ones you want to show.

post title module options

Back to Top

Pricing Table

pricing table module

 

Got a product or service – then the Pricing Table module is for you…

This is really versatile because you can create a table which is unique to you and your products, adding different features and even creating pricing plans for your customers.

Within the Content tab you can enter as many tables as you like, depending on what you’re creating your pricing table for.

pricing table module adding a new table

You also get to amend the title and subtitle, along with the currency you want the pricing to show in.

pricing table module adding a new content tab

These changes are done separately for each table and each of the new pricing tables added, has individual Content and Design options for each of them you can customize.

Within the Layout tab, you can even make a table “featured” so that it stands out from the rest, great if you have a certain plan you want your customers to buy!

pricing table module how to make a table featured

This is what it looks like when it’s set up…

making the second table featured

The “Link” element for each table is for the button text which will be clicked on when someone decides to purchase. 

Here is where you input the destination URL for after they’ve signed up. 

pricing table button link option

Once you’ve customized each of the tables individually, you can then come back to the main Content and Design tabs.

Within the Content tab, if you click on the “Elements” section, you can have your content laid out in bullet point style.

pricing table show bullet points option

And in the Design tab, you can click on the “Layout” section and set the layout background colours and show a drop shadow effect…

pricing table layout background options

You can also change the colour of the bullet points (if used) and the colour of the actual featured bullet points (if you turned the “make tables featured” on). 

Other than those extra elements, the rest is the usual with the text customizations you can make.

Back to Top

Search

This is a simple, nice module to use, if you want to feature a search bar on your blog.

There are three sections within the Content tab which are unique to this module and the first one up is the “Text” section.

You can add text into the “Input Placeholder” if you want to tell people what they can search for etc…

search module search input placeholder option

The second section includes the “Elements” tab, where you can toggle this on or off, depending on whether you want to show the search button for readers to click on.

search button how to show it

The final section within the Content tab I want to show you is the “Exceptions” as this is where you can decide where you want to show the search bar, either on posts or pages…

search bar module exceptions

The only item in the Design tab that I’m showing is the “Fields” item, where you can customize the fields of the search bar, as in the image below…

search bar module customization options

Back to Top

Shop

This next module I’m going to talk about won’t be in a lot of detail because I don’t have a shop on my blog and this module is for exactly that.

It also needs the WooCommerce plugin installed, which again I haven’t used personally.

I can give you a run through of the module itself, but nothing will show up as I haven’t got the WooCommerce plugin installed, or a shop setup!

So let’s get into it…

Within the Content tab, the first item we come across is the “Product View Type” and as you can see from the image below, you have a lot of options to choose from.

Product View Type 

  • Recent Products 
  • Featured Products
  • Sale Products
  • Best Selling Products
  • Top Rated Products
  • Product Category

 

shop module view type options

Product Count 

Here is where you can define how many products you want to be displayed per page.

 

shop module product count options

 

Column Layout

You can also choose how many columns you want to display.

shop module shop column layout options

Order

Finally, you can choose how you want your products to be ordered. 

 

shop module order options

 

Within the Design tab, there are many things you can customize, however, the unique ones to this module are shown in the image below.

They are again just changing fonts, colours, size etc…

shop module design options

Elegant Themes cover more on the “Shop” module within this article.

Back to Top

Quick check in lovely, as I want to see how you’re getting on!

You’re probably finding now you’re getting more familiar with how the visual builder works and the layouts of the modules.

It really is quite simple once you get to grips with it and you’re doing awesome.

Divi has such a lot to it, but soon enough, you won’t even be thinking about it and you’ll be bashing out pages quicker than anything.

Anyway, let’s crack on as only a few more modules left to go through…

Slider

This slider module is a great way for you to showcase any features and benefits your products or services may have. 

When you first open up the module, you’ll see the “Your Title Goes Here” section and this is where you can add as many, or as little slides as you want.

If you click on the little cog on the left hand side of each of them, you can customize each one individually.

slider module cog setting options

You’ll have the title, button and main text box to complete + there’s an “Image & Video” tab where you can add – yep, you guessed it, an image or a video…

Once uploaded, it will appear on the left side of the slider, as in the image below…

slider module to the left example

You have the “Link” tab which again needs the destination URL link for the button. 

Within the Design tab, you have the “Overlay” section, where you can add overlays to the background and to the text background as well, as in the image below…

slider module overlay options

… and you have the “Navigation” section, where you can change the colours of the arrows and dots within the slider – for some added customization fun!

slider module navigation settings

Back to Top

Social Media Follow

We all need social media in our lives, especially when it comes to blogging, as it’s a great way to reach out and help more people!

To add some social media icons to your page, simply click on the “Add New Social Media Network” and add in all the platforms you want to have.

social media follow module

The next thing to look at in the Content tab is the “Icon” element.

Here you can select whether you want the link to open in a new tab, or new window when clicked + you can choose whether to have the follow button on.

social media follow button on or off

The Design tab has all the usual elements for customizing, so go and have a play around.

Back to Top

Tabs

This module is great for organizing your content and sharing awesome features of your products and services. 

Using this module can give your readers a better experience, as you can have different tabs for different things, for example:

Tab 1 – Description of your product/service

Tab 2 – Features of your product/service

Tab 3 – Benefits of your product/service

You can see in the image below how you “Add New Tabs” and customize them…

tabs module

The Design tab is just a case of customizing the text as you want it.

Back to Top

Testimonial

This module is exactly what it says on the tin – a module for creating and showcasing amazing testimonials.

You just add in the details for your testimonial (as per the image below) and away you go!

testimonial module settings

If you choose to keep the icon, then in the Design tab you can customize this.

This is also the same for the image too…

Back to Top

Text

text divi module

 

This is the most basic of all the modules (and the one you’ll probably use the most…

There really isn’t much to say or show on it, because it’s literally just the text content you want to generate and customize.

Back to Top

Toggle

The toggle module (which is this exact one I'm using right now)  is great for things like FAQ pages, as you can create content in sections, making it easy for your readers to pick out the things they want or need!

The Content tab has a new element we’ve not seen before and that’s the “State” element.

This is used to determine whether you want the toggle to start in an open or closed state…

toggle module open or closed options

If you add a few of them (you can use the “copy” button to save time ) and customize each one, you’ll soon have a cool looking set of FAQs, or whatever it is you want to create…

toggle module how to use example

Back to Top

Video

This module is used to upload a video file (MP4 or WEBM file are the formats you can upload in).

Once you’ve uploaded a video, you have the “Overlay” element, which is pretty cool as there are two options available to you:

  1. Overlay Image
  2. Generate From Video

For the “Overlay Image” you’ll need to upload your own image. 

Usually this is a Thumbnail you create to go with your video (like they do for the YouTube videos).

video module overlay image option

For the “Generate From Video” you simply just click the button and it automatically generates an overlay for you.

video module how to generate the overlay

Within the Design tab, you can customize the Play Icon to whatever colour and size you want and you can also customize the colour of the overlay which you generated in the Content tab (the video generated one that is)…

video module play icon options

 

That’s it for this module, as all the other elements within the Design tab are standard. 

Back to Top

Video Slider

The same as with the other slider modules, you need to add in the right amount of “Add New Video” sections (depending on how many videos you want to show) and then click on the “cog” icon on each of them, to go in and customize all the elements (Content & Design tabs for each).

video slider module

After you’ve done this, there’s the “Elements” and “Overlay” sections at the bottom of the Content area to customize, before moving onto the Design tab, which has all the standard things we’ve covered in all the modules before this.

And that’s it – you can see what one looks like below…

video slider module finished video example

Back to Top

OMG, you’re done!!!

You’ve made it to the end of all 38 Modules and have done AMAZING sticking with me…

I know this module section of the post hasn’t been the most exciting, but I wanted to make sure I showed you as much as I could with Divi, so you can use it to its full potential.

You’ve learnt all the different modules you can use when creating your pages for your blog!

There's going to be some amazing creations coming out of you for sure!

I’m super proud of you for sticking with it and getting this learning curve done!

Once you know how it all works, it makes building your blog a lot simpler and quicker for you.

Time for a very well deserved break, a cup of coffee and maybe a piece of cake – yum! 


Global Default Settings

The next thing I want to share with you, which is a game changer, is the “Global Default Settings”

This makes designing your blog so much easier and saves you a ton of time!

This “global” setting gives you the option to manage your whole blog design, right inside the builder.

You won’t need to apply colours, fonts etc to every single page, as you’ll be able to change their default design.

This then means that whenever you apply that module to a page, you won’t need to manually go through and make all the changes each and every time!

If you want to set certain header styles (H1, H2, H3 etc) or a default button to use for call to actions, by saving it as a “global setting”, you’ll be updating this module for your entire blog. 

This in turn means that if and when you want to make a design change to your whole blog, by simply altering the default design settings, the changes will take effect everywhere, saving you so much time and effort.

Of course, if you want certain modules to be different and unique, this isn't a problem, as you can still change individual modules as and where you like…

Take a look at what I mean below:

how to use the global default settings

You can change the global settings for any module and if you have pages which you want to be congruent and branded, I highly recommend you do so, to save yourself much needed time for other blogging things on the agenda.

Another thing with Divi I wanted to bring to your attention, is how simple and easy it is to use Divi alongside the built in and standard Gutenberg Editor.

divi layout block for global settings

When creating posts and pages, it’s easy to switch between the two when using the block editor, because you can add in a “Divi Layout” block, as per the image below.

divi global options using divi and gutenberg together

This allows you to use all the Divi modules anywhere on your posts and pages, in amongst the standard editor, creating more unique and amazing posts and pages!

bottom bar on divi pages with all settings on

You have a few options here:

  • Load from Library where you can load a premade layout, a saved layout, or an existing page
  • Add to Library where you can save the current page to the Divi library, for use again
  • Clear Layout where you can clear the whole page and you’ll lose everything you’ve created and designed.
  • The big cross button where you can minimize this whole bar
  • Page Settings where you can change the title, excerpt, featured image, background colour etc…
  • Editing History where you can see all the edits you’ve made to the page.
  • Portability where you can import and export layouts to the page.

bottom page bar setting options example

I think that’s it…

I feel I’ve mentioned everything important within the Divi theme, for you to be able to use it and create an amazing looking blog, however, if you come across anything I haven’t talked about, or you get stuck, just reach out to me and I’ll help where I can!

With anything mammoth, I’m bound to have missed something out along the way.

Get the Divi Theme checklist now!

Use it alongside this blog post and get Divi installed simply to create a beautiful blog…

divi theme checklist



This was a mighty huge post and before we leave the world of Divi, I want to say again how truly amazing and wonderful this blog theme is…

I’ve honestly never used anything so versatile, robust and enjoyable when it comes to creating on my blog!

Blogging is about helping people and providing a great user experience for when readers visit your blog.

Using Divi gives those readers that great user experience, but it also provides you with a fantastic design experience too, making blogging fun and exciting (which is what it should be)…

Let me know in the comments below: What’s your fave thing about Divi? I’d love to hear from you…


0 Comments

Submit a Comment

Your email address will not be published.

6 Shares
Pin6
Share