Enhanced Drag and Drop with Auto-Hierarchical Layout in Funnel & Website Builder

Modified on: Wed, 23 Jul, 2025 at 1:10 PM

HighLevel’s Funnel and Website Builder includes a streamlined drag-and-drop functionality that improves design speed and reduces complexity. With automated layout hierarchy, you can place elements directly on the canvas without setting up Sections, Rows, or Columns first—simplifying the entire page-building process.

TABLE OF CONTENTS

What is Enhanced Drag and Drop with Auto-Hierarchical Layout?
Key Benefits of Enhanced Drag and Drop
Quick Examples of the Enhanced Drag and Drop Experience
How To Use the Enhanced Drag and Drop Feature
Frequently Asked Questions

What is Enhanced Drag and Drop with Auto-Hierarchical Layout?

Enhanced drag-and-drop functionality in the builder allows users to add elements to the canvas without needing to manually configure layout structures in advance. The system automatically wraps each element within the appropriate layout containers, such as Sections, Rows, and Columns. This reduces setup time and helps maintain a clean, consistent structure.

Auto-hierarchy logic and visual drop cues support a smoother and more intuitive building experience.

Key Benefits of Enhanced Drag and Drop

This functionality significantly improves the speed and usability of page building in HighLevel:

True Drag-and-Drop Freedom: Place any element directly on the canvas—no need to prep the layout.
Auto-Wrap Logic: Builder auto-generates the correct structure (Section > Row > Column) behind the scenes.
Smart Placement Detection: Automatically detects valid drop targets and fits elements accordingly.
Inline Column Controls: Add new columns to existing rows directly from the canvas.
Improved Visual Feedback: Clear ghost outlines and drop zones help you preview where items will go.

Quick Examples of the Enhanced Drag and Drop Experience

These examples show how the builder handles layout creation dynamically:

Dragging a Text Element onto a Blank Canvas
- Builder auto-creates: Section > Row > Column > Text
Dragging a Row onto a Blank Canvas
- Builder auto-creates: Section > Row (with default columns)
Adding Columns to an Existing Row
- Simply click the “+ Add Column” button inline on the canvas to expand the layout

How To Use the Enhanced Drag and Drop Feature

This experience is fully integrated and requires no manual configuration.

Steps to Try It Out:

Open any funnel or website page in the HighLevel builder.
Drag an element (e.g., Text, Button, Image) from the sidebar onto an empty area of the canvas.
Watch as the builder automatically wraps the element with the correct layout containers.
Add new columns by hovering over a Row and clicking “+ Add Column.”
Use visual cues like ghost outlines to align your elements with precision.

Frequently Asked Questions

Q: Do I still need to manually add Sections or Rows?

A: No, the builder creates them automatically based on what you drag and where you drop it.

Q: Can I disable the auto-wrap behavior?

A: Currently, this behavior is automatic and cannot be disabled.

Q: What if I want to customize the layout structure manually?

A: You can still add Sections, Rows, and Columns the traditional way if you prefer full control.

Q: Does this feature work in both Funnels and Websites?

A: Yes, the drag-and-drop enhancements apply to both Funnels and Websites.

Q: Will this affect my existing pages?

A: No, this only impacts the experience when creating or editing new elements going forward.