The power of Genesis and the Divi Builder plugin
I’ve created this page on a Genesis child theme website, using the Divi Builder plugin by Elegant Themes.
The Divi Builder is a WordPress plugin that allows you to build feature rich pages and posts using a simple drag and drop interface… with absolutely no coding.
This is a simple Text Module
It may be a simple Text Module, but a Divi Builder Text Module is a powerful thing. You can drag it into any column of any width, type in your content, play around with the font settings and add a background colour or image.
At the top of the page I’ve used a Fullwidth Header Module with a background image and a black semi transparent overlay, all done using the Module’s settings. Below I’d like to introduce you to four Blurb Modules sitting nicely in a four Column Row. Blurb Modules look good, they are super easy to set up and customise and they come with lots and lots of Blurb graphics… like the ones below.
No Coding Required
To use the Divi Builder to create stunning pages and posts you don’t need to touch a single line of code.
You can build just about anything, the only limitation… is your own imagination.
Use On Any Theme
The Divi Builder was once exclusive to Divi theme users but now it is available as a plugin and works with any WordPress theme.
Supercharge your WordPress website with the Divi Builder plugin.
40+ Content Modules
Modules are the building blocks of the Divi Builder and they allow you to add both content and functionality to your website.
With 40+ to choose from, you can add just about anything.
20+ Premade Layouts
Choose from the Divi Builder’s 20+ premade layouts to get up and running with just a few mouse clicks.
You can also save your own layouts to the Divi Library for future use and reuse.
Simple text with a few clever touches
This area of content uses a Section containing a single Row with two one-half Columns.
For the Section I’ve added the poppies as a background image and set the padding to zero.
For the Row I’ve used Custom Gutter Widths and set them to zero so that the two Columns touch.
For the left hand Column I’ve dragged in a Text Module, added text and set it to right justified. I’ve also added a semi transparent background colour and given the text a little padding to bring it in from the Column edges.
The right hand column is empty so all you see is the Section’s background image.
Please put your hands together for the Bar Counter Module
I think that bar counters look cool. They grab attention and can be used to illustrate lots of information in a dramatic, easy to understand and visually pleasing format.
The Bar Counter Module interface lets you play around with titles, percentages and colours as well as font and spacing information, all with just a few mouse clicks. For my counters I’ve chosen the same colour as the rollover colour of my social icons over to the left.
- <p>Pricing and value for money</p> 90% 90%
- <p>Coding skills required</p> 25% 25%
- <p>Fluid grid / mobile responsive</p> 85% 85%
- <p>Just great fun to work with</p> 100% 100%
And what about images… we need images
The Divi Builder lets you do just about anything you want with your images.
From displaying images in rows of any width, using the ultra versatile Image Module, to displaying images in grids or sliders using the Image Gallery Module. And all of them can be set to open in a lightbox.
The first example uses the super simple Image Module set to open in a lightbox,
The Image Gallery Module: grid layout
If you have plenty of room you can display your images as a grid layout. I’ve only used one row of images in the example below, but you can use as many rows as you like.
You can also open your images in a lightbox, add a semi transparent overlay and choose a hover icon image.
The Image Gallery Module: slider layout
If space is limited you can still display all your images using the slider format.
As with the grid layout you can open your images in a lightbox, which is what I’ve done below.
I’ve setup three sliders just to demonstrate how versatile the slider format is and how it fits precisely to the column width you choose.
And if you’re feeling animated, you can use the Video Module
With the Video Module you can upload your own video or just add the URL to a YouTube video. You can add an image overlay or let the Divi Builder choose one from the video and you can choose a custom colour for the play icon.
And as with all the Divi Builder Modules, the video fits precisely into the column width and is 100% responsive.
This short video is an introduction to the Divi Builder plugin by Nick Roach and his team over at Elegant Themes.
The video shows how easy it is to build a page by dragging and dropping content blocks into Columns. It also points out that the Builder’s grid is 100% responsive, which means that your pages and posts will look great on any device.
With 40+ Content Modules to choose from… we could be here all day!
With over 40+ Content Modules to choose from I could keep adding different types of Modules, but I’m guessing that you’ve probably got the message by now.
So I’m going to be boring and predictable by finishing with the Call-To-Action Module. Just like all the other Modules, all you have to do is drag it into a column, add your content and hit save… absolutely no coding skills required.
And to finish... the Call To Action Module
The point of building this page on a Genesis website is to show just how well Genesis and the Divi Builder plugin work together to produce great looking content.
Genesis is a fabulous theme framework, the Divi Builder is a state-of-the-art drag and drop page builder plugin and when you add them together, you have a combination that is hard to beat.