Aug 25, 2017
How to Build Your Own Wix-style Website Builder with WordPress
Website builders like Wix or SquareSpace can get you started quickly, but they are quite limited in customizability. You can’t hire a software developer to build more advanced features when your company wants to scale, most cloud-based website builders won’t let you under the hood. More flexible Content Management Systems, like WordPress, have more features, but can be hard for the non-technical person to wrangle. Divi changes all of that.
What is Divi?
Divi is a WordPress theme published by ElegantThemes.com. It has the basics, nice font, an easily extendable, simple design, and a handy customizer (in which you can customize almost anything you can think of). But Divi’s major feature is it’s page builder. Divi’s page builder allows you to build nearly any website layout you can think of, complete with it’s own advanced drag-and-drop widget system.
You can build a professional-looking hero slider, or a completely customized contact form — all without a line of code. This allows you to get your website up and running immediately, but then leaves the option to hire a developer later when you have the money to take your site to the next level.
Idiot-proof Design
You’re an expert in your industry, you may even be a great writer, but chances are, if you’re like most of us, you don’t have as much design-sense as a full-time designer. If you’re a small business owner, hiring a full-time designer can easily be cost-prohibitive.
With Divi’s page builder, you can build pages yourself, and each component is designed by some of the best, so your content looks great out of the gate. It’s also remarkably hard to shoot yourself in the foot. Everything is responsive by default, and they offer great color suggestions. And with the wide variety of powerful widgets and flexible layouts, you don’t need to worry about looking cliché any time soon.
Extensible
We mentioned Divi’s advanced module system, right? It turns out, it’s possible to code new modules for it. When it’s time to add that custom product configurator, or social network integration, you can hire a developer to focus on the functionality that matters most for you to set your brand apart, while you get full control over your site’s content.
Live Mock-ups
Because Divi makes websites so easy to tweak, instead of spending extra time to draw up detailed compositions in Photoshop or Illustrator before getting started, you can jump right in and build your designs directly into the site. In fact, if you don’t already know Photoshop or Illustrator, Divi is probably easier to learn. However, if you want to use Photoshop, you can download Divi’s PSDs when you purchase the theme.
Where to Start?
The first step is to get WordPress hosting. We can help with this, but if you know what you’re doing, Dreamhost is a great place to start. Once you have WordPress, you need to install the Divi theme. You can purchase it from Elegant Themes directly for $89/year or $249 for lifetime access. Don’t forget to activate Divi once it’s installed, and register it with your API key. Once it’s installed, create a page. Click “Use The Divi Builder,” to start dragging and dropping advanced components into your page. You can check out the introductory tutorial for more details on each feature.
If you’ve built something amazing with Divi, want to tell us about your favorite theme, or need help getting started, leave a comment, or drop us a note.
Originally published at Snowball Development.
