Divi tutorial & Review-How to Build a WordPress website 2020 ( 20% off)

Aug 27, 2020

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-

DIvi is the world popular theme.
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Let’s explore Divi

Divi Review

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.

Pre-made Layouts

Divi comes with hundreds of beautifully designed layout packs that you can use to jump-start just about any type of website.

Updates

Divi keeps on updating their products time-to time, so that they become compatible with latest version of WordPress.

Premium Support

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)

Unlimited Websites

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

Plugins

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

Migration

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.

Divi pricing
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

Divi pricing on discount
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

Download the divi theme, bloom and monarch from divi member area.
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Now, Let’s Install these in WordPress.

Install Divi theme

Add new theme in WordPress
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Appearance 🡺 Themes 🡺 Add New 🡺 Upload theme 🡺 Upload Divi .zip file 🡺 Install and Activate.

Install plugins

Upload plugins in WordPress
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

Divi Theme Builder
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

Hackblogging Header
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

While the posts Header looks like this-

Hackblogging posts page
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

Add New templates in Divi theme Builder
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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

Build Header

Now, Click on Add Custom Header 🡺 Build Custom Header. Three options will appear

Start building custom header in divi
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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)

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Now, there are many rows options. So, I will select a option with two columns.

Image Module in Divi
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Now , I want that the menu to appear at the right side of the column. See, How to do it.

Spacing option in menu settings ( Divi)
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

If you want the row to appear forwards then Go to Design🡺 Box Shadow 🡺 Select the shadow that you like.

Blog header
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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

Post content module in Divi builder
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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-

post content in blog posts
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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.

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

But Content looks too much wide. No worry, Just decrease the width.

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Explore more and design it in your own way.

Build Footer

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)

Writing posts using Divi Builder in WordPress
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

If you select Default editor, What you can do is add Divi layout between writing in Default Editor ( It’s great)

Insert Divi Layout in WordPress Default Editor
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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" />
Enable pinch zoom on mobile from Divi theme options.
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

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)
  • Go to Divi theme options > General > Enable Minify and combine javascript and CSS files.

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. 

Grab the Deal Now

If still any questions are stealing your mind power, Feel free to ask. Comment and Share this post with your friends.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!