Confused about investing in Divi or How to use it?
Then this Divi tutorial is for you. In this article I will show you How to build a WordPress website with Divi.
My best decision when I started Blogging was to invest in Divi ( I arranged money and invest). If you are still thinking to invest, then my dear friend ‘Don’t think Just Act’
Why I should invest in Divi? Becuase, Divi is the “World’s popular theme”. Don’t believe, just see the proof-
Let’s explore Divi
I invested in Divi when I started Blogging and I am loving it. The great thing that I liked about Divi is their support. Let’s talk about it’s Pros and Cons.
What we like about Divi
Drag and Drop Builder
You don’t have to be a designer, you can design effectively and easily with Divi Drag and Drop Builder. Divi Builder makes the complete pack value for money.
Divi comes with hundreds of beautifully designed layout packs that you can use to jump-start just about any type of website.
Divi keeps on updating their products time-to time, so that they become compatible with latest version of WordPress.
I am a lover of their support. Whenever I face issue, I just start a conversation with them and I got my problem solved within 2 minutes ( available 24/7)
I see many other theme companies charging more for more websites, But you can use Divi theme and it’s plugins on unlimited websites. ( No extra License Required).
Money Back Guarantee
If you don’t love Divi themes and plugins then you can ask them for a refund within 30 days after payment ( No questions asked).
You don’t require to invest money in any social share plugin and e-mail capturing plugin. Because, you get access to Bloom and Monarch when you buy their Pack.
What we don’t Like
Not that Easy
For Beginners, it’s hard to understand “How to use” in starting. ( But, this complete tutorial will help you, read till the end).
It’s difficult to migrate to another WordPress theme. When you switch, you have to design your website again ( I am loving it, I will never migrate).
Install in WordPress
Before installing, first we have to buy this theme. Now, you have two options.
First is Yearly access and second is Lifetime Access.
Buy any one pack according to your budget. This price is when you signup directly from the Elegant themes, But if you signup from my affiliate link you will get 20% discount.
After signing up to Elegant themes membership, you will receive a e-mail.
Login to the Elegant themes member’s area.
After that downlaod these three .zip files.
Now, Let’s Install these in WordPress.
Install Divi theme
Appearance 🡺 Themes 🡺 Add New 🡺 Upload theme 🡺 Upload Divi .zip file 🡺 Install and Activate.
Plugins 🢂 Add New 🢂 Upload Plugin 🢂 Upload Monarch and Bloom .zip file 🢂 Install and Activate.
Divi Tutorial for Beginners
Let’s design the blog.
Divi builder tutorial
Go to Divi Theme builder option from the WordPress Dashboard.
As you can see above I have designed different header and body for Homepage, All posts, All Pages and for specific category pages.
See, the difference in Header of homepage and posts.
While the posts Header looks like this-
So, you can build different headers, body and footers for different pages and posts.
See- How to start a blog?
Now, Let’s Build a template.
When you click on it different options will appear. From those select options.
Let’s say I select All Posts option
Now, click on Create template
Now, Click on Add Custom Header 🡺 Build Custom Header. Three options will appear
Select Build from the Scratch option. Click on Start Building. ( if you are building homepage or landing page then you can choose a premade layout)
Now, there are many rows options. So, I will select a option with two columns.
If you wan’t to explore all the modules then See- The Complete list of divi module.
Select Image option and add your Logo Here.
After uploading the image (logo)
The logo uploaded will be larger in size (width). Go to design option 🡺 Max. Width and decrease the width.
Let’s design right column
Now, for navigation I would like to add menu in right column. For that, you have to firstly create Menu.
Go to Appearance 🡺 Menus 🡺 Add categories, posts or pages 🡺 Create Menu ( I have already created). Now Click on Menu option from Module in the right column.
Now , I want that the menu to appear at the right side of the column. See, How to do it.
Something is missing. Hmm, Yeah it’s search icon. Go to Content Section 🡺 Elements 🡺 Enable Search Icon
If you want to add the background then just Select the Row Settings 🡺 Background 🡺 Add Background Color or Gradient.
If you want the row to appear forwards then Go to Design🡺 Box Shadow 🡺 Select the shadow that you like.
My Purpose is to give you direction. Explore all the options and make its look better. ( Design your own way).
When your header gets complete-
Click on three dots ( purple color)🡺 Save to library option ( download icon).
After saving to library, Click on Save button on the right ( Green Color) and exit.
Build Custom Body
Now, it’s time to build custom Body. The Process is same
Click on Add Custom Body🡺 Start Building🡺 Click on plus sign 🡺 Add single column🡺 Add Post Content module
Why we selected this Module? Because we want the content that you write in the “WordPress posts” to appear in the Body section.
But I want the content to appear different in mobile and desktop. But How we do that?
Do you want your post content to appear in a box like this-
Let’s do it-
Firstly we will optimize the post content for desktop. Before that, if you want to change the Text font Just,; Go to design option🡺Text option 🡺 Select text font ( Similarly change all heading text font if you want)
It’s simple to make the post content appear in a box.
Go to Post Content Module Settings 🡺 Design 🡺 Box Shadow 🡺 Select first shadow.
But Content looks too much wide. No worry, Just decrease the width.
The best option that I like in Divi is that you can optimize sizing and other options differently for desktop, tablet and phone.
It’s done. Now, Let’s optimize the post content for mobile.
What if you want the box shadow to appear in desktop but not in phone. ( Box shadow looks good only in desktop).
For that Design🡺 Box Shadow 🡺 Box Shadow Spread Strength 🡺 Select Phone option🡺 Decrease
Explore more and design it in your own way.
I think you have got an idea of how to design your blog with divi bulder.
Similarly, Build Footer ( I think now it’s not a big deal).
Similarly Build Homepage header, body, and footer. Keep in mind that in Body section ” Select Blog module not post content module”
Writing Posts using Divi Builder in WordPress
Go to Posts section in WordPress dashboard🡺 Click on Add New 🡺 Select Either Divi builder or default editor. ( I generally write posts in default editor)
If you select Default editor, What you can do is add Divi layout between writing in Default Editor ( It’s great)
The Attractive buttons that you saw above in posts are build using Divi builder ( Divi layout 🡺 Build New Layout🡺 Start Building🡺 Fullwidth🡺Button Module).
Now, it’s time for the Bonus Hack that you should know.
Bonus # Mobile-Zooming Hack
Everything was going right, But one day I open one of my posts on my smartphone. I start reading the post.
Now, I notice that I was unable to see the image (screenshot). I tried to Zoom the image but it was not zooming.
Then I contacted Elegant themes support and ask ” How i enable zoom feature in my posts”. They replied-
Theme Options 🡺 Integration🡺 Add code to the < head > of your blog ( Paste the code below)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />
Do you love this hack? Comment
One Request- After Buying Divi, give one day and fully explore it. I have already done the work easy for you. If still you found any difficulty while using Divi, Just contact Elegant themes support.
Divi is full of features, it takes time to master it. I am still learning new things in Divi daily. Keep Exploring and learning.
if you are still in the thinking state that “ I should buy Divi or not” then my dear friend I have already said Don’t think Just Act. I am not recommending you any product that I haven’t used.
Discount is for Limited Time- Grab it or Lose it.
FAQs related to Divi tutorial
Is Divi good for SEO?
Divi is an SEO friendly theme plus it has many features that make it better for your SEO.
You can Customize titles, meta descriptions, URLs, and much more.
How to boost Divi Speed?
- Host on Good Hosting ( I recommend Greengeeks powerful hosting)
- Optimize Images
- Use CDN
- Use Cache plugin ( You can use WP rocket)
Does Divi work good with Woocommerce?
Divi has been designed to be Woocommerce compatible. It rocks.
Is Divi good for Blogs?
Yeah, you can see I am using it on my own blog and I am loving it.
You can easily customize anything ( drag and drop) if you are not tech-savvy
Is Divi Worth the money?
Yes, after using it regularly for 3 months, I can say that it’s a value for money deal.
If still any questions are stealing your mind power, Feel free to ask. Comment and Share this post with your friends.