I really like WordPress Divi theme by elegant themes. It is so flexible, and customizable that it can be used for almost any purpose. In fact, today DIVI theme is my number one choice for new sites I’m setting up. The built-in module customizer and drag and drop builder makes it very easy to apply different layouts to different pages. You and even apply several layouts to the same page, resulting a lovely, professional looking, one page site. However, despite all the built in customization option, some customization like Changing DIVI slider image size, slider arrow key (previous or next) or blog featured image still require some coding skills. In this post I will demonstrate how to make these changes without coding.
CSS is basically the code that creates the visual layout of the site. By modifying existing CSS styles, and adding new ones to the style.css file of the theme we can modify the way its appearance. I will not go into the details of css coding as this post is about code-free modification of the DIVI theme. I will, however, emphasize that if you choose to modify a theme by editing the style.css, it is highly recommended tht you first create a child theme. A WordPress child theme acts as independent theme, but the original design is copied for the original “parent theme”. There are two major advantages for using a child theme
- If you accidentally break something while modifying the child theme it will not damage the parent theme, so you can always have a “base” for comparison and roll back.
- In case of theme update, the modifications to the style sheet are not overwritten. I think that this part needs a little extra care… When you update a WordPress theme, the new version overrides the old one, so if you modified the original theme style.css file and updated the theme without backing up the file, you changes are lost. However, if you use a child theme for modification, when you update the parent theme, the child theme files remain unchanged, so you don’t have to worry about loosing all your changes during the update.
Additional resources (before we go on to the coding free part)
- More information about Wordpess child themes at WordPress codex
- Great post at elegant theme’s blog about child themes
- Child theme configuration plugin – Great plugin for creating and customizing child themes easily.
Divi Booster – Advanced customization of Divi theme without CSS or coding
If you’ve read your way through this post to find the easiest way to customize Divi theme without coding, then this part is for you. The Divi Booster plugin is my own personal favorite, because it makes customizing Divi an easy, coding-free task. Here are just some of thing Divi booster can do (customize)
- Change the height of Divi slider
- Stop the header from shrinking
- Change the look of just one page
- Change the arrow left and arrow right color in Divi theme
- Change Divi featured image width
- Much much more..
In total Divi Booster adds more than 50 configuration options to Divi theme Below you can find some screen shots of Divi booster
Divi Booster and Divi 3.0
On September 2016 Elegant themes launched the 3rd version of Divi theme, featuring for the first time the brand new visual builder (see it in action here).
Divi Booster did not fall behind, and it is fully compatible with Divi 3.0 and it features, with more than 50 customization options available.
Note that Divi booster is not a free plugin. It costs $19 ($15 when you subscribe to push notifications from TheGeneralistIT.com), but you can use it on unlimited sites, and developers can even use it on clients sites. I think it is a great deal. Please also note that the above links to the plugin page are affiliate links. That means that if you decide to buy the plugin after clicking the link, I share some revenue from the sale. Whatever you decide to do, I hope you find that information in the post useful.