Divi Builder: Backend vs Frontend and the Advantages of Each

Divi Builder: Backend vs Frontend and the Advantages of Each

Divi started as a backend builder. This is known as the Divi Builder and includes modules that you drag and drop where you want them, but you can’t see what the page will look like as you build it. Many other building platforms let you create your layout from the frontend, allowing you to easily see what your layout looks like as you build.

Rather than converting the Divi Builder from a backend builder to a frontend builder Elegant Themes added a frontend builder to Divi, called the Visual Builder, making Divi both a backend and a frontend building platform so you have your choice. Both are excellent for building websites. So, how do you choose between the two? In this article, we’ll help you decide by discussing the backend vs frontend and the advantages of each.

Divi Builder: Backend

  • Google+
  • Facebook
  • Twitter

This is the Divi Builder creating a new Page. The Divi Builder backend gives you access to the normal (until Gutenberg completely takes over) backend elements such as excerpts, custom fields, publishing, page attributes (choose a parent page, choose a standard template or blank template, and set the page order), and featured image. You can add discussion, slug, and author options in the screen options. It also gives you a few Divi page settings such as dot navigation and hide nav before scroll.

You can save to library, load from library, clear your layout, and perform all of the Divi Builder functions to add standard sections, fullwidth sections, specialty sections, adding from the library, and all of the customizations with sections, rows, and modules.

  • Google+
  • Facebook
  • Twitter

You can adjust all of the settings within the sections, rows, and modules, save them to the library, and preview them before saving the page.

  • Google+
  • Facebook
  • Twitter

Right-click on any section, row, or module to see more options.

  • Google+
  • Facebook
  • Twitter

We have access to the portability tool where you can import or export layouts.

  • Google+
  • Facebook
  • Twitter

Divi Builder settings let you enable split testing, add custom CSS to the page, select a page background color, set the gutter width, choose the light and dark text colors, set the content area background color, the section background color, and enable static CSS file generation.

  • Google+
  • Facebook
  • Twitter

Here’s the Divi Builder creating a new Post. It includes the Divi page settings with layout options (choose from right sidebar, left sidebar, no sidebar, or fullwidth), dot navigation, hide navigation before scroll, and show or hide the post title. It also includes publish options, categories, tags, and featured image.

Divi Builder: Frontend

  • Google+
  • Facebook
  • Twitter

The Divi Visual builder lets you see the page design as it fits within your website’s design, including the header, footer, and sidebars, and on the screen. Make your customizations and see them live. All of the section, row, and module customizations are here.

  • Google+
  • Facebook
  • Twitter

A list of tools across the bottom in the center provides many of the tools you’d find in the backend builder. Load or save to the library, clear the layout, adjust the page settings, see the revision history, and use the portability tool. You can also save the page if it’s been published already, or save the draft or publish the post if it hasn’t been published.

  • Google+
  • Facebook
  • Twitter

Page settings let you edit the title, excerpt, featured image, add a background, perform split testing, adjust the color palette, spacing, and text, add custom CSS, and enable static CSS file generation. It does not include dot nav, hide nav before scroll, keywords, and page attributes.

  • Google+
  • Facebook
  • Twitter

You can change the size of the settings window, move it around, or lock it in place.

  • Google+
  • Facebook
  • Twitter

You can see it in three screen sizes: desktop, tablet, and phone. Here’s the tablet view.

  • Google+
  • Facebook
  • Twitter

As you mouse over the section options, the elements on the page that those options correspond to are highlighted. In this example, my mouse is hovering over Title Text (the mouse doesn’t show in the screen capture). The design options are organized in tabs so you can open and see only the options you want.

  • Google+
  • Facebook
  • Twitter

If you click on the brush that appears over the element, the module’s settings will open to that element’s options. In this example, I clicked on the Body Text, which opened the Body Text customizations.

  • Google+
  • Facebook
  • Twitter

Add padding by dragging the edge of a section, row, or module.

  • Google+
  • Facebook
  • Twitter

Adjust text by selecting it and then make your customizations from the text-tool.

  • Google+
  • Facebook
  • Twitter

The Visual Builder adds a feature to search the options and filter them. In this example, I searched for Link. It opened every option for this module that customizes links. The filter lets me choose the type of style I’m looking for.

  • Google+
  • Facebook
  • Twitter

Fluid styling makes it easy to copy and paste, find and replace, and extend styles. This means you can customize one module and quickly extend the styling to the entire page.

  • Google+
  • Facebook
  • Twitter

When you create a new page or post with the backend builder, you can load any layout you want or just start creating the layout manually. The frontend has creation workflows which present you with three options to help you get started. One of the best advantages here is you can clone an existing page.

  • Google+
  • Facebook
  • Twitter

When you’re adding new modules to your layout, you can search for them instead of scrolling and hunting.

  • Google+
  • Facebook
  • Twitter

Builder Settings let you choose the features you see and how you interact with them. Add new tools to the view options, choose the interaction mode, history state interval, the default location for the settings modal, page creation flow, interface animations, the opacity of disabled modules, grouping settings into closed modules, and to add placeholder content.

  • Google+
  • Facebook
  • Twitter

The Post settings include categories and tags. It does not allow you to hide the title or choose sidebar options.

  • Google+
  • Facebook
  • Twitter

View the layout in a wireframe mode that mimics the backend builder. All of the Divi Builder tools are here. Open or close the sections, rows, and modules. Drag and drop, add elements, etc., but they have the advanced features of the Visual Builder.

Ending Thoughts

I like the approach that Elegant Themes took with the Divi Builder. Rather than staying with just a backend builder, or changing from a backend builder to a frontend builder, they gave us both. Having both the backend and frontend building options lets us design the way we want to, and both have their advantages.

Divi Builder Advantages – perhaps the main advantage of the backend builder is that all of the main settings are visible at the same time. All of the elements are visible so you can easily drag and drop, clone, open the settings, etc., from the intuitive builder. The page or post settings are also visible. It’s a great choice for working within the WordPress environment.

Divi Visual Builder Advantages – probably the greatest advantage of the frontend builder is you can see your layout as you build and customize it. It has most of the features you’d find in the backend builder. The publishing options, such as changing the date or scheduling the post, are not available. Some design choices, such as hiding the title or selecting the sidebar layout, will have to be selected from the backend. It has more styling options and it’s powered by React, so it’s crazy fast.

Elegant Themes has put a lot of work into the Visual Builder. There used to be more advantages to the backend builder, but that gap has continued to close as Elegant Themes continues to add new features to the frontend builder.

For example, at first the Visual Builder wasn’t compatible with third-party plugins, so we were forced to use the backend builder when we used them within a layout. Now, the Visual Builder works with them just fine. Also, it didn’t have a wireframe view, but now we can see the modules within the rows and sections just like we do from the backend. It’s now possible to do practically all of the work from the frontend.

Choosing between them really comes down to how you like to see the work as you create it. If you want to see the WordPress-based design area with the Divi Builder within it, then choose the Divi Builder. If you want to see the Divi-based layout and see the design in real time, then choose the Visual Builder. The most recent improvements are for the Visual Builder only, giving it the edge and speeding up your design-time.

Which Divi Builder do you prefer between the backend and frontend? Let us know in the comments.

Randy Brown

Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar.