Skip to content

Wireframe View

A stripped-down structural editing mode that displays every element as a labeled block, making it easy to organize complex page layouts.

Quick Reference

What it does: Replaces visual styling with labeled, color-coded blocks showing page structure only. Where to find it: Left sidebar → Wireframe icon, or bottom toolbar Wireframe icon. Key features:

  • Color-coded blocks with type labels and nesting indentation
  • Drag-and-drop reordering without visual overlap interference
  • Plus icons between elements for precise insertion
  • Double-click labels to rename elements

ET Docs: Divi Wireframe View

Overview

Wireframe View removes all visual styling from the canvas and presents your page as a series of labeled, color-coded blocks representing sections, rows, columns, and modules. This decluttered perspective makes it much easier to locate, rearrange, and rename elements -- especially on pages with overlapping layers, negative margins, or complex transform effects that can make clicking the right element difficult in the normal visual view. For the official Elegant Themes reference, see Divi Wireframe View.

How to Access Wireframe View

There are two ways to enter Wireframe View:

  1. Left Sidebar: Click the Wireframe icon in the left sidebar. Click it again to return to the visual canvas.
  2. Bottom Toolbar (if visible): Click the Wireframe View icon in the left portion of the bottom toolbar.

The transition between visual and wireframe modes is nearly instantaneous.

What Wireframe View Shows

In Wireframe View, every element on the page is displayed as a horizontal block with:

  • A label showing the element type and name (e.g., "Section", "Row", "Text Module", "Button Module").
  • Color coding that distinguishes sections, rows, columns, and modules at a glance.
  • Nesting indentation that makes the parent-child hierarchy visually clear.
  • Action icons on each block for settings, duplicate, and delete -- the same icons available on hover in the visual canvas.
  • Plus icons between blocks for adding new elements at precise positions.

All visual design (colors, backgrounds, fonts, images, spacing) is hidden so you can focus entirely on content structure and element order.

Key Features

Drag-and-Drop Reordering

Drag any block to a new position in the layout. Because elements are displayed as simple labeled rectangles, it is much easier to target the exact element you want to move -- there are no overlapping layers or transform offsets to contend with.

Precise Element Insertion

Plus icons appear between every pair of sibling elements. Click a plus icon to add a new section, row, or module at that exact position. This is especially useful when you need to insert an element between two that overlap in the visual view.

Renaming Elements

Double-click an element's label in Wireframe View to rename it. Custom names carry over to the Layers View panel and make complex pages much easier to navigate.

Right-Click Menus

All right-click menu operations are available in Wireframe View, so you can copy, paste, extend, lock, and delete elements without switching back to the visual canvas.

When to Use Wireframe View

Scenario Why Wireframe Helps
Building initial page structure Focus on content hierarchy and section order before adding design.
Reorganizing a complex layout No overlapping elements or hidden layers to fight with.
Debugging layout issues Immediately see the nesting hierarchy and identify misplaced elements.
Working with transform-heavy designs Elements with negative margins or 3D transforms are easy to select as simple blocks.
Bulk element management Quickly duplicate, delete, or move multiple elements in sequence.

Best Practices

  • Start in Wireframe, finish in Visual. Use Wireframe View during the initial stages of page building to establish your content structure, then switch to the visual canvas for design refinement.
  • Name your sections and rows. Custom names in Wireframe View make it dramatically easier to navigate long pages. Names sync with the Layers View panel.
  • Combine with Layers View. For maximum structural control, open the Layers View panel while in Wireframe View. The two tools complement each other -- Wireframe shows the full-page layout while Layers provides a collapsible tree.

Version Notes

Divi 5 Only

This page documents the Divi 5 Wireframe View. While Divi 4 also had a wireframe mode, the Divi 5 version integrates with the new left sidebar and supports the updated right-click context menus.