- 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?
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.
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.
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:
If you want to know more about a specific setting, click on the question mark (i.e. help) to the right of that setting.
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.
In each column, you can create “Modules”.
Modules are pre-built layouts that serve a specific purpose. Some examples of Modulesare:
- Other website elements you want to add to a page.
See the video below:
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
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.
You can also edit text in blog posts and text modules:
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.
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”.
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.
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!