Here’s How To Make Divi Builder And Your Genesis Child Theme Rock Together

Divi-builder-with-genesis

Just a few days back you’d find people comparing the Genesis Framework and the Divi Theme. And now that the Divi Builder is born, it will soon be history. With the launch of Divi drag and drop page builder, the difference between the two platforms is no more a difference. You have the best of both the worlds at your disposal — the robustness of Genesis Framework and the power of the Divi builder in your toolkit 🙂

The Divi builder is making way for creative possibilities — choose any WordPress theme and you are all set to unlock the potential of your theme by adding the “Divi” magic. Similarly, pick any Genesis child theme and you will be good to go with setting up content pages without putting extra effort on coding each page according to its purpose.

The builder enables you to get creative with unlimited options. You can pick and combine 20+ layout options with 40+ content modules. This makes building home page, service pages, about page, contact page, portfolio pages a breeze — with each page being a high converting landing page in true sense.

Getting started with the “Divi Builder”

It is overwhelming to see so many layout options and content modules. And that is just the beginning. Each layout has its own set of options and each content module features its own set of basic and advanced settings.

Anyone will end up saying that Divi builder is a powerful website builder. It enables you to create beautiful websites with great ease. When you install the plugin, it power-packs your WordPress dashboard with the following items:

  1. Divi Admin Menu: Divi admin menu hosts Plugin options (for newsletter integration options), Divi Library (the layouts library which enables you to view all your saved layouts at one place and also allows you to import and export the layouts from one site to another) and Divi Role Editor (allows you to set permissions of the users with various roles for using the Divi builder).
    Divi Role Editor
  2. Projects Post Type: If you want to showcase your work, go on creating projects and organize them into project categories. These projects are used by the Divi builder for showcasing your portfolio.
  3. The Divi Builder: This is the most important component — the actual builder. The plugins adds the feature for using the Divi builder on per page, per post basis. You can turn any post and any page into a marvelous landing page when you choose “Use the Divi Builder“.

Here’s a step-by-step guide for using the Divi Builder:

  1. Start with choosing the layout (section, columns, rows)Divi Builder Layout
  2. Go ahead with inserting the modules (slider, portfolio, contact form, blurbs, posts, opt-in form, testimonials, circle counters, woocommerce shop, etc).Content-modules
  3. Configure the options for each module (basic and advanced settings)Content-module-options
  4. Review and take control of layout spacing like a web design pro (Divi builder allows you to specify margin and padding for each component)Layout-settings
  5. Add the finishing touches with custom CSS (without touching your stylesheet).Custom-css

With Divi builder, you get the power of building every single page with a perfect finish. That is why Steven Snell says “Divi builder belongs in your design toolbox”.

Using the Divi Builder with Genesis Child themes

The Divi builder with Genesis child themes is an interesting equation. You can beautifully extend the power of your favorite Genesis child theme with the Divi builder. The Genesis child theme acts as a strong base and the Divi builder offers the building blocks to let your creative juices flowing.

Be it a website design project for a client or your own business website built on Genesis, the Divi builder helps you in taking it to the next level with great ease. You will end up being more productive with all your focus on designing and developing the site without having to touch the code for most basic things like showcasing portfolio, adding contact form, integrating opt-in form, showing the posts from specific categories, video / audio integration and so on.

I was pretty excited to try Divi builder with Lander Genesis child themes — Femme Flora: Feminine WordPress theme and Captivate: A WordPress Landing Page theme. And this is how the Divi builder fares with Femme Flora and Captivate:

Landing Page in Femme Flora built with the Divi Builder

Divi Page Builder With Femme Flora Genesis Child Theme

The landing page settings of Lander Genesis child themes (Femme Flora and Captivate) and the power of the Divi builder together make for a superb combo. While the Divi builder takes care of the page content, the landing page settings offered by Lander Genesis child themes enable you to remove the extra clutter from your pages (header, page title, menus, breadcrumbs, footer, footer widgets, after entry widget area and so on). The end result is the landing pages that convert (period).

Landing Page Experience

Is Divi builder and Genesis child themes a good option for your next project?

The Divi builder and Genesis child theme of your choice is a good option for building a website with highly customized webpages. You will be able to build page content with great ease but the Divi builder is not an out-of-the-box kind of solution for Genesis child theme, like Genesis Dambuster.

But you can make that happen with your smart design skills.

One area where the Divi builder fails is full-width (edge to edge) set-up for page content. The Divi builder is built to work across all WordPress themes and is not a specialized solution for Genesis child themes. For this very reason, you will have to take care of some design issues, like making the site-inner (or site-inner wrap) to full width with max-width: 100% so that Divi content modules can go full width in true sense.

Being a page builder, it obviously does not allow the kind of flexibility you get with coding the solution from ground up. But nonetheless, it is an excellent option for churning out beautifully functional websites. It does involves a learning curve, but once you make it a part of your toolkit you will become an addict of the “Divi Builder”.

You can check out a complete list of features offered by the Divi builder here.

What are your thoughts on using the Divi builder with Genesis child theme?

Posted In:

UX UI Front-end Development, Genesis WordPress Theme Framework Child-Theme

1 Comment

  1. Hello, thanks for this article. I am currently using Divi Builder on a Genesis Theme called Outreach to build a few pages that don’t quite adhere to the theme. And I mainly work with Divi anyway.

    I’m experiencing some issues with 2 column rows pushing content down. It’s like the column is not wide enough. I am playing with the various containers and their width settings – no avail. I also posted this issue in a Divi FB group – and another dev noticed tags were getting thrown in around the columns and perhaps causing the break.

    Have any idea what could be causing it? I also tried your suggesting of making site-inner & site-inner-wrap 100%.

    http://accountingromance.source-studio.com/home-2/

    Reply

Comment on Here’s How To Make Divi Builder And Your Genesis Child Theme Rock Together

Your email address will not be published. Required fields are marked *