I've been developing software & websites since 1997, and I still have the imposter syndrome. Plus I don't consider myself a genius, I just enjoy what I do. More importantly, I seem to have some people skills not common amongst developers, and that often ends up with me being appointed the team lead, mentor, spokesperson or otherwise the person who's in the spotlight. I have to say I like that part even more than programming because I actually like people and I enjoy talking to them. I am not one of those devs who put on some headphones and start typing code, and refuse to interact with the real world cause they're "in the zone".
Why am I saying all this, why I do talk about myself when I was supposed to discuss Divi here? Bear with me for a sec, I'll get there right now.
So every now and then I get excited about some new framework or technology, and recently I discovered Divi. A friend of mine told me about it and he sent me a demo so I could play with it. I am going through a process where, if I can avoid coding, I avoid it. I don't reinvent the wheel anymore, and when customers want me to create a "nice looking website", I feel like I am doing the same things again and again. Divi seemed to be a tool that would accelerate the process of creating nice standard websites with everything everyone wants... the freaking same structure:
- Header (optionally sticky) with a logo and a hamburger menu for mobile. So original.
- A (parallax?) hero box/slider with some nice images (stock, obviously) and some marketing statement. Groundbreaking.
- Optional: some motto or famous quotes using huge font size, possibly italic style.
- A grid with products/portfolio items.
- Pictures of the people in their team.
- Contact information (with a map)
- A footer with legal links.
Does that ring a bell?
Well, I am sick and tired of coding that myself, so first I started buying & customizing commercial templates, and now I am into Divi.
Divi Builder by Elegant Themes is "one of the most popular Visual Builders for WordPress". I believe it because I am involved in the community and the number of resources is outstanding. Resources in terms of templates, layouts, tips, Facebook pages, etc etc. I did a demo project and I decided to give it a go. I bought the lifetime license right away! Then I built two websites with it, using pre-made layouts as an "inspiration", which I modified with my own color schemes, pictures, font choices, etc. But in the end, I was doing the same I was before, just... much faster. And without writing a line of code! Yay!
Soon after I started using Divi, they launched a new major version, Divi 4, with WooCommerce support. I was totally crazy with happiness because it happened just when I was starting building an e-commerce site with WooCommerce. Divi 4 includes customization options for some WooCommerce built-in features like the Product Page, Product Archive, etc. It doesn't cover some very important pages like Checkout, Cart, Profile/Account though. And it's not compatible with WooCommerce official themes and plugins.
This is where I started thinking... maybe I can create those modules myself? There are dozens of big websites selling modules for Divi, so it's actually good business and there's people doing it. I could too! First I would create modules for myself, but why not offering premium modules to others?
So I went to the Documentation section of the site and I read everything. It didn't take long. Maybe 20 minutes. Because there's not much there. And even worse: not everything I needed was covered there.
I went to check the tool they have on GitHub, a script called create-divi-extension. It's been abandoned for two years now except some bug fixes 7 months ago. Okay, not a good start.
Anyway, let's do this, I said!
Well, I ended up digging into the Divi Builder source code to find out how to debug my own module. In case you're wondering yourself, you need to do this:
https://github.com/elegantthemes/create-divi-extension/issues/5#issuecomment-383207300
And for that to work, you need to define this global variable in your module's loader file:
define( 'XXXX_DEBUG', true );`
Where XXXX is the prefix of your extension. You're welcome. I had to dig into the source code to get that.
Anyway, create-divi-extension is based on create-react-app, because the builder front-end is React (yay!). But bummer, it does not support SASS. And if you want to add support yourself, good look. Ejecting (yarn eject) totally destroys the project, so you don't have access to webpack's configuration. I ended up forking create-divi-extension on GitHub, then I updated a bunch of things but I just got it partially working and I gave up. Why? Because it's not right. I bought Divi to avoid coding, but I thought coding some custom modules would give me some competitive advantage. And it looked like fun, why not? But...
- I had to dig into code to find out how to set up my development/debug environment.
- I was hacking the provided tool to create a simple boilerplate.
- The prospect after that wasn't much promising because I already can create a module but the myriad possibilities available to native Modules aren't documented. Like dynamic values, how do I apply customizable styles to my modules... the basics!
- Modules are React in their "frontend builder" version, but after that, it's just plain Javascript with jQuery as your only tool. Why?
- They don't provide/suggest a templating utility in the PHP side, like, I don't know, string-template for example?
The only way to really learn how to write powerful modules is:
- Have a lot of free time to dig into the code, or...
- Buy a module pack and "reverse-engineer" those modules, but that would be the "production build" only... not all source code.
- Buy some course (starting prize 199$ at Udemy.com)
I think Elegant Themes should really improve their documentation, keep their tools updated, and help coders becoming Divi Developers. It'd be good for their business because that would create a stable and solid userbase, and it'd be good for those developers because they could extend Divi beyond the usual, standard stuff.
Top comments (0)