“When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.”
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”.
- What you’ll learn today…
- What is Divi?
- So what’s the difference between the Divi Theme and Page Builder?
- How to install the Theme or Page Builder Plugin
- Divi Customization's
- Header and Navigation
- Buttons Style
- Mobile Styles
- Colour Schemes
- Homepage Settings
- Additional CSS
- Theme Options
- So what can you do with the built in Divi Page Builder?
- Divi Modules
- Global Default Settings
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.
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:
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.
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
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.
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.
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
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):
> 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.
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:
>Choose File (upload the Divi Plugin zip folder and install and activate)
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…
The Divi Theme has a ton of things you can customize and we’re going to get into these right now!
We’re going to be looking into the “General Settings” tab to start with and this includes:
- Site Identity
- Layout Settings
First up is the site identity option, which you get to as per the below instructions:
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”.
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.
To get to it, go to:
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?
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.
To get to it, go to:
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…
To get to it, go to:
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.
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…
To get to it, go to:
>Header and Navigation
This section changes the way your header looks.
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…
Primary Menu Bar
To get to it, go to:
>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.
Secondary Menu Bar
To get to it, go to:
>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.
Fixed Navigation Settings
To get to it, go to:
>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…
In the image below, you can see how to customize this and how it looks when you do…
To get to it, go to:
>Header and Navigation
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
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.
The next big section we’re going to look at is the Footer.
This section includes:
- 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…
First up is the layout…
To get to it, go to:
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.
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:
To get to it, go to:
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)…
The image below shows how you can change the elements within the widgets section, including the bullet point colour, header colour and link colour.
To get to it, go to:
There isn’t much to do in this section – just showing or not showing your social sharing icons…
To get to it, go to:
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!
To get to it, go to:
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.
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:
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!
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…
To get to it, go to:
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.
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:
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.
Buttons Hover Style
To get to it, go to:
>Buttons Hover Style
This is basically where you can customize the button to look different when someone hovers over the top of it.
I think this can make things visually nicer for your readers, so have a play with it and see what you like.
To get to it, go to:
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…
Up next is the “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:
- Mobile Menu
To get to it, go to:
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.
To get to it, go to:
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…
To get to it, go to:
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.
The next few sections don’t have a lot of tabs within them, so we’ll run through them really quickly…
To get to it, go to:
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…
To get to it, go to:
Within the customizer area, you don’t really need to fiddle around with the Menus.
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).
To get to it, go to:
This section is very similar to the menus one, in that you can make all the changes in the “Widgets” tab…
OR, within the live, real time customizer…
To get to it, go to:
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.
The final element within the theme customization's is the Additional CSS…
To get to it, go to:
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.
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.
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.
To get to it, go to:
Under the “Theme Options” there’s eight sub-sections which can be customized:
We’re now going to work through them all to see what they are and what they can do…
This is the largest section for customization's that can be done.
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.
When the navigation bar is enabled, it remains on the page when scrolling takes place, as per the example below:
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.
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:
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.
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.
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.
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.
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.
When you enable the “Blog Style Mode”, this then shows your posts in full, as per the example below…
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!
Shop Page and Category Page Layout for WooCommerce
You’ll be able to decide what layout you would like on each of your product pages.
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.
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.
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.
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)…
Number of posts displayed on Category/Archive/Search and Tag Pages and Number of Products displayed on WooCommerce archive pages
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.
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
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.
Shortcodes are a small piece of code that perform a certain function.
They are shown in brackets [shortcode here].
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:
This enables smooth mouse scrolling and is great when there are anchor links, linking readers to different sections of a post!
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.
These options are defaulted to “enabled”…
They are options which speed up page loading, so keep them toggled on.
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
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…
- General Settings
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.
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:
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 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.
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
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.
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:
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.
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.
Single Post Layout
Choose which items to display in the post info section
Here you can toggle which items you want to appear below your post title, as in the image below.
You can choose between:
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
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.
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).
Show Thumbs on Index pages
This option is enabled by default and is to show thumbnail images on Index pages.
Manage Un-Widgetized Advertisements
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:
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).
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.
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.
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.
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
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.
Index Page 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.
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
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…
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:
>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!
You won’t be able to receive product updates until this information has been added.
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”…
You then get 3 options:
- Build from Scratch
- Choose a Premade Layout
- Clone Existing Page
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:
BEFORE STARTING, MAKE SURE THAT EVERY TIME YOU AMEND AND CHANGE A SECTION, MODULE, ELEMENT ETC, YOU SAVE IT…
ALSO, ALWAYS REMEMBER TO SAVE EVERYTHING BY CLICKING THE BIG GREEN “SAVE” BUTTON IN THE BOTTOM RIGHT HAND CORNER TOO AS YOU DON’T WANT TO LOSE ALL YOUR HARD WORK!
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. .
As well as the “Green tick and Save” buttons, you also have 3 other buttons at the bottom of each module.
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…
We’ll start now with the “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.
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.
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!
The regular option tends to be for your everyday content.
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.
You’ll know when you’re using this kind of section, as it has a bright orange colour frame.
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.
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…
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.
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.
- Move Section
- Settings Section
- Duplicate Section
- Save Section To Library
- Delete Section
- Other Section Settings
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.
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:
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…
Under the content tab, you'll find the Link, Background and Admin Label options.
This is where you can add a link and when anywhere is clicked within that section, it will take you to that link…
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.
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…
There are lots of ways you can make your background section stand out (as per the image below).
You can have a solid colour, where you just pick a colour of choice, preferably one that is congruent with your brand.
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…
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.
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!
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.
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.
The next tab I want to show you is the “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:
Here you can choose whether to have an inner shadow or not (as seen in the image below)…
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…
You have all kinds of customization's within the Divider tab:
- Divider Style
- Divider Colour
- Divider Height
- Divider Horizontal Repeat
- Divider Flip
- Divider Arrangement
You can have exactly the same options for a “Top” and “Bottom” divider!
Here is where you can set the width, height and alignment for your section.
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.
Here, you can set a “maximum width” so that your element will never exceed the defined width value.
You can align the section to the right, left or centre…
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.
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.
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.
The spacing element allows you to change the margins and padding for the section.
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.
By adding padding, you’ll get extra space inside the element, increasing the distance between the edge of the element and the inside content.
Borders can add a really nice and unique look to your sections, modules and rows…
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.
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…
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.
The filters have several options you can play around with and change:
- Blend Mode
You can really create some different looks with these filters…
There are several options you can play with in the “Transform” tab.
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”…
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…
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.
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…
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.
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.
The final tab within the Design section is the “Animation” element.
The Animation element gives you a lot of great functions for your section.
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:
Let’s check out what they look like in action…
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!
Here you can adjust the start and end position of the element, by using one of the five different animation directions on offer.
Here is where you set how long you want the animation to last.
You can speed it up, or slow it down…
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.
This element affects how subtle or aggressive your animation is.
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.
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:
The animations are set to only play once, however, you also have the option to play it on a loop continuously!
Woohoo! That’s the “Design” tab finished and we’re onto the final part of the “Sections” module – the “Advanced” elements….
Within the “Advanced” elements, there are six items which can be changed:
- CSS ID & Classes
- Custom CSS
- 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.
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.
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.
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.
The “Absolute” option allows you to move the position around (as in the image below).
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”.
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:
- Vertical Motion
- Horizontal Motion
- Fading In & Out
- Scaling Up & Down
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…
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).
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.
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.
The final element within the Scrolling Effects is the Blur. This causes it to blur out when the reader scrolls through the page.
That’s it, we’ve finished with the “Sections” module and now we’re onto the “Rows”…
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.
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…
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).
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…
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!
They’re in alphabetical order and you can also type in the search bar what you’re looking for.
I’m choosing the “Text” module for this example.
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.
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.
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…
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.
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!
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!
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)
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…
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.
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.
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.
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:
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.
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…
This section has two elements you can change:
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.
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.
You can add a box shadow to your module here and there’s many different style choices.
This is where you can add different filters to your text, such as different contrasts, saturation and brightness etc…
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:
I’ve given a demonstration of how they work below, but you can delve deeper into how they work.
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.
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.
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.
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…
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:
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.
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.
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!
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.
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…
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)…