Happy 2016 to everyone! Hope you all had happy holidays with lots of joy and good food. I’m still trying to recover, so I’m taking it easy. 🙂 This gave me some time to re-check how the admin UI of the “new” Divi can be improved.
A lot has changed since February 2015, when I posted the first article on this topic, which was still done pre Divi 2.4. Since then we have a more enhanced Divi with more options, more user-friendlyness and more of everything, thanks to the dedication of ET. And we also have the amazing Divi Builder plugin which you can use with any theme you want, and we have the Extra theme, which is also based on the Divi Builder. (Thanks guys! You are the best!!!)
And this brings us to the first big improvement of this trick: it WORKS WITH ALL THREE: the Divi Builder, the Divi theme and the Extra theme. Updated to Divi 2.6.x.
The UI of the Divi Builder also has changed dramatically to its advantage. But for me there was still some “room for improvement”. 🙂 I’m always looking for ways to optimize things that make work (or fun) easier whether it’s less clicks, less scrolling or more data on the screen. So read on to find out how you can have a Divi user interface that makes your work faster.
To follow up last weeks post about using Font Awesome icons for a blurb instead of the built in Elegant Font icons, and as promised, here is what you can do to make it easier, faster and using less code and clicking to use them in blurbs all over your site.
Please note, this article and instructions are for Font Awesome version 4.x.
For the instructions for Font Awesome 5 click here.
Note 1: This post is not about using more than 1 icon in one blurb! Why would you anyway, right? 🙂
Note 2, to set the expectations: This solution needs some very minor technical experience (basically search and copy-paste). The solution IS simple, however it does not provide a super-simple click-and-drag-and-it-works solution. (I’m thinking about one, but it’s a tad bit difficult.)
Divi makes it pretty easy to insert videos from almost any source in any page with the Video module. This is really great and saves a lot of hassle to developers.
The videos can be made even nicer looking if they have a frame around them. Some like a chalkboard, some a window of a house or a monitor. This can not be done out of the box, but a bit of CSS tweaking can produce a very nice result. To show you an example…
Divi includes a very nice icon set, the Elegant Icon Font. It has a stunning 360 icons, however that was not good enough for me. 🙂 So I checked around a bit.
There are couple of free icon font sets on the web. My personal favourite is Font Awesome, which I believe is becoming the non-plus-ultra in this area and it’s totally free! The collection (version 4.3.0) currently packs 519 amazing icons for different categories like web applications, gender icons, file types, and so on. Even some Star Wars related ones!!! Click to see how to integrate it in your Divi powered WordPress site and get some tips on formatting.
First, what do I mean by a clickable section divider?
It is an icon usually in a circle which is positioned between two clearly distinguishable horizontal sections on a page. Most of the time the user can click the icon and as a result the page will automatically scroll to a predefined section fo the page. It is used for making navigation on longer pages easier and for decorative purposes as well.
This is a feature which I was missing from Divi, so I decided to create it. Read on to find out how it can be done.
Since version 3.5 WordPress has a new color picker, the HiDPI-ready, CSS gradient-based color picker called Iris.
Recently when I was developing custom sites for some clients I needed to use their corporate identity colors and I got tired of copy-pasting the different hex codes in the color picker all the time. So I started to look for a way to add custom colors to the color picker. At the end I succeeded. Read on to see how you can do it as well.
I realized some code was not working in some browsers, so I updated it and now it’s totally browser independent.
The Divi theme is full of wonderful moduls which allow you to do basically anything. The one that I was looking forward to test the most was the slider module.
It didn’t disappoint me: it’s easy to use with lots of options and gives an amazing result. Still, I was wondering how it can be further enhanced, let’s say, with having the slides run within an iPad frame. So I started to do it and here I’m sharing the result with you.
Besides Divi I’m using the Divi Children plugin (developed by Luis Alejandre who runs divi4u.com). It’s a great plugin to help you create a child theme for Divi and adds some extra functionality as well.
I recently updated to Divi 2.3 where the offset function was introduced in the blog module. However, it didn’t want to work. Click on Read more to learn about the “bug” and the fix.
When I first saw the Divi theme from Elegant Themes (ET) I immediately fell in love with it. The theme is flexible enough to create ANY type of website with a drag and drop interface and loads of different modules for any purpose you can think of.
I started using Divi immediately as I had to develop the new website of the company where I was working at the time. Development was fun and fast. And although I have a 24″ monitor I was still a bit annoyed of the unused or not effectively used space by the Page Builder. So I decided to tweak it a bit. Some of it has already been implemented by ET in v2.0, but there are still some tweaks which make better use of the screen space.