The Divi Guide for Beginners: Why This Is An Awesome Theme

I have a confession to make:

  • I don’t know how to write HTML or CSS codes.

I’ve set up my own blog with WordPress, but I didn’t write any lines of codes like some other web developers do.

So how did I do it?

I did it with the Divi theme from Elegant Themes.

I discovered Elegant Themes a few years back when I first set up my blog. Once I learned how the Divi Page Builder worked, I instantly decided that it was the perfect theme for me, the non-coding blogger.

If you’re just starting out with blogging and you want a theme with boundless design options, check out Divi. Divi will make web design a lot easier for you. This theme is great for designing your site however you want without making advanced tweaks to the theme’s code.

The Divi WordPress Theme Options Panel

Just like any modern theme, Divi comes with a “Theme Options” panel to take care of the basic settings.

To open this panel, go to Divi > Theme Options.

divi_theme_options_1
  • Save

The first thing you want to do after installing the theme is to change the site logo and favicon. The site logo is your website’s logo that should go in the header. The favicon is the small icon that appears beside your site’s name in browser tabs.

divi_theme_options
  • Save

Other settings you can change in the “General” tab are the following:

  • Enable/Disable Divi Gallery
  • Enable/Disable Blog Style Mode
  • MailChimp API Key
  • Google API Key
  • Show/Hide social media icons
  • Enable/Disable responsive shortcodes
  • Date Format
  • Custom CSS

In addition to that, you have tabs to change more settings for:

  • Navigation
  • Layout
  • Ads
  • SEO
  • Integration
  • Updates

If you want to know more about a specific setting, click on the question mark (i.e. help) to the right of that setting.

divi_help_icon
  • Save

Customizing Pages with Divi Page Builder

Divi’s Page Builder feature is the main function that lets you customize each page of your site. “Sections” are created from the Page Builder. This can be full width or any custom width you want.

Inside Sections, you can create rows with different column layouts. They can be a single column, two columns, three columns, and so on.

divi_builder
  • Save

In each column, you can create “Modules”.

Modules are pre-built layouts that serve a specific purpose. Some examples of Modules are:

  • Blog
  • Shop
  • Sidebar
  • Other website elements you want to add to a page.

See the video below:

https://youtu.be/dXXhpvvWOiE

Each Module has a settings page where you can customize the design, add background images, change text styles, and so on.

The settings interface is easy to use. Simply fill in the needed values, adjust the sliders, or click to toggle. There are generally three tabs in each settings page:

  • General Settings
  • Advanced Design Settings
  • CSS

divi_blog_module_settings
  • Save

If you want to preview how the module will look without leaving the editor, click on the Eye icon” on the bottom of the settings box. Once you’re done with configuring the settings, you can click Save & Exit” or Save & Add to Library” (if you want to use that same module in other parts of your site).

From this point, you can click the “Preview” button on the right panel to view the entire page on a new tab. If you’re happy with how it looks, you can hit “Publish” to add the page to your site.

The Divi Visual Builder

The latest update to the Divi theme added a new kind of builder: The Divi Visual Builder.

It’s a way of editing your site from the front-end. You can open any page or post from WordPress, then select “Use Visual Builder”.

When the page opens, it will look like the regular page you’ve created. However, when you put your mouse over the corners of some areas, it will show toolbars. These are the controls for sections, rows, and modules. From here, you can move, edit, duplicate, and/or delete modules by clicking the appropriate icons in these toolbars.

divi_visual_builder_toolbars
  • Save

You can also edit text in blog posts and text modules:

divi_visual_builder_text
  • Save

If you’ve made a few changes but would like to undo them, just put your mouse over the center of the page and a purple circle button should appear.

Clicking on this brings up the global settings for the page. The clock icon opens the “Editing History” box where you can see a list of all edits done. You can now select items from this box or revert to a previous page setting.

divi_visual_builder_edit_history
  • Save

Anything that you can do with the non-visual page builder, you can pretty much do with the Visual Builder. The same module, row, and section settings will still be available either way.

Adjusting Spaces Between Sections and Rows

The first time I used Divi, I wasn’t happy with how big the spaces were between sections. I didn’t know how to change that at first. Finally, I discovered how to adjust the spacing using the section and row settings.

To open the settings for a section or row, click on the three horizontal lines found on the top left corner of the said section or row.

In the “Settings” window, under “General Settings”, you’ll see an option for Custom Padding”.

divi_row_settings
  • Save

If you’re trying to make the spaces between two sections/rows smaller, then you need to set a value to the “Bottom Padding” of the first section/row and the “Top Padding” of the second section/row.

Try a value of 1px or 2px to see how it looks and adjust accordingly.

divi_custom_padding
  • Save

Conclusion

There are many other cool things you can do with the Divi theme, but these are just a few basics that you need to know to get started. Using Divi for the first time is not really that hard since there are lots of guides and tutorials for this theme.

Elegant Themes provides great how-to’s and videos for first-time Divi users. The Elegant Themes blog also features tips and tricks that are not usually seen in the Theme Documentation. In addition, there are many other sites that publish detailed tutorials for Divi.

Download Divi WordPress Theme

Most importantly, Divi makes it easy for non-coders like you & me to design a website with confidence, flexibility, and tons of customization options. If you’re not skilled with coding but want to create your own website from scratch, Divi is an excellent choice.

Have you used Divi before? Are you using it now? Let me know your experience with Divi in the comments below!

Like this review of the Divi theme? Tell your friends about it on Facebook, Twitter, and Google Plus!

Here are hand-picked articles that you shouldn’t miss:

Subscribe on YouTube

  • Save
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

18 thoughts on “The Divi Guide for Beginners: Why This Is An Awesome Theme”

  1. Munna Hossain

    Thanks Kim for your excellent article. The theme is really important for your blog. You must select perfect theme otherwise, you have to face a different problem. Theme is a factor of your blog loading time which is really important for any blogging success. I am using Thrive theme which is excellent. You have shared here about Divi theme which will be ok. Thanks for your article.

  2. Madhuri Mehra

    Thanks Kim, This theme is looking just awesome. It is easy to use and UI also looks good. Now i am thinking of using it for my blog.

  3. Hi Kim, I’m personally fan of divi theme and for most of my client i have build website using DIVI theme. They also have predefined layout in the layout library. With 50+ modules and their is no limitations with DIVI theme. You almost design any website mockup using simply divi builder.

    Also not to forgot about split testing feature for every page we design. This option is only available in divi apart from thrive themes if i’m not wrong.

    Currently i have project for one of the telecom company in usa. Where i have designed a website using divi theme. It was so complicated design, but divi made it easy for me.

    1. Thanks for sharing more useful features of Divi here, Dumaji. I may not have covered split testing and templates, but I’m glad you mentioned it.

  4. I can see the effort that you have put in creating this post. You have presented clear coding and instructions. Keep it up!!

  5. Great post Kim!

    I recently switched to Divi and it has really reduced the time it takes to create landing pages. Built-in A/B testing helps too and I don’t have to pay Optimizely anymore.

  6. Hey Kim,

    There are many theme frameworks for WordPress. And ElegantThemes has brought an amazing platform to use. Divi has many options to get configured.

    Its users can handle the design of the theme using Divi builder and many other options. I guess the custom CSS option would be a plus point.

    Great post indeed.
    ~Ravi

  7. Hi Kim,
    I am also a blogger with no coding background. But desperately want to design my blog professionally. About the Divi theme you have mentioned here, it does look very promising.
    Thanks for the share… I am testing the theme right away…. Without your post, I would have never heard about it…
    Have a nice day….

  8. Vineeth Mungath

    Divi is one of the best worpress theme available now, with frontend customization, very good for building different layouts easily and includes many inbuilt features that no other themes provide.

  9. Adithya Sreyaj

    I have heard so much about this theme on the internet, It really has a buzz around designers and bloggers. I always wanted to try this theme out. Now that i got an idea about the theme-Thanks to KIM BARLOSO for her amazing post, I’m going to give it a go.

  10. Thank you for the article. but the pricing is yearly.If we didnt renew after 1 year we will not get even the update.
    Will that create a problem/?

  11. Christopher Conlan

    Kim — this is a great article about DIVI. I recently stared building my first site with DIVI and I’m pretty impressed. I’m a coder by nature, but the DIVI theme is a great solution to get something done fast. The SPACING feature is fantastic for those little bitty fixes that normally could take a lot of trial and error to fix the old school way, especially given that each theme creator seems to do CSS their own way! Excellent article, as always. Thanks!

Leave a Comment

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

Scroll to Top
[i]
[i]
[i]
[i]
Share via
Copy link