This is a great theme with amazing features and customization options. It makes it really easy for beginners with no coding knowledge to start a webpage. Highly Recommended.
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.
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.
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.
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.
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'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.
In each column, you can create "Modules".
Other website elements you want to add to a page.
Each Module has a settings page where you can customize the design, add background images, change text styles, and so on.
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 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.
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.
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.
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".
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.
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.
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!
Beaver Builder vs. Thrive Content Builder vs. Visual Composer: Which one is the best?
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.
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.
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.
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.
I can see the effort that you have put in creating this post. You have presented clear coding and instructions. Keep it up!!
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.
Yes, the A/B testing feature can save you money. Thanks for the feedback!
you nicely explained it. I'm thinking to give this theme a try on my next website.
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.
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.
That's awesome, Ugyen. Hope you find the theme easier to use.
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.
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.
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/?
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!