Using Drag and Drop with Automatic Layout Creation

What is Drag and Drop with Automatic Layout Creation?

The drag and drop functionality in your CRM's builder allows you to add elements to your page canvas without needing to manually set up layout structures beforehand. You can simply drag any element onto the canvas, and the builder will automatically create the appropriate layout hierarchy for you. This means the system wraps your elements in the correct containers—Sections, Rows, and Columns—behind the scenes, reducing setup time and maintaining a clean, consistent structure.

Key Benefits

This feature enhances your page building experience with several advantages:

• True Drag-and-Drop Freedom: Place elements directly on the canvas without pre-configuring layouts.
• Automatic Structure Generation: The builder creates the necessary Section, Row, and Column containers automatically.
• Smart Placement Detection: The system detects valid drop targets and fits elements appropriately.
• Inline Column Controls: Add new columns to existing rows directly from the canvas.
• Improved Visual Feedback: Clear outlines and drop zones help you preview where items will be placed.

How to Use the Drag and Drop Feature

This feature must be enabled via the Labs section in Agency View to be available for use. Once enabled, you can drag new elements onto the canvas and reposition existing ones by grabbing anywhere on the element.

Steps to Get Started

1. Open any funnel or website page in the builder.
2. Drag an element (such as Text, Button, or Image) from the sidebar onto an empty area of the canvas.
3. Observe as the builder automatically wraps the element with the correct layout containers.
4. Grab any part of the element and drag it to a new location—no move handle is required.
5. Add new columns by hovering over a Row and clicking the + Add Column option.
6. Use visual cues like ghost outlines to align your elements precisely.

Reordering Columns Within a Row

You can reorder columns within the same row to adjust layout and content flow without rebuilding the entire section.

• Hover over the row to reveal column boundaries and drop zones.
• Grab the column and drag it left or right within the same row.
• Use the drop indicator to place it in the new position, then release.

Note: Column reordering is currently limited to the same row. Reordering may affect responsive stacking, so always check tablet and mobile views after making changes.

Tips for Precision Placement

• Use zoom for easier small placement adjustments.
• Utilize rulers or guides (when available) for consistent alignment.
• Use Undo/Redo to experiment safely and quickly correct any placement errors.

Frequently Asked Questions

Do I still need to manually add Sections or Rows?

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

Can I disable the automatic layout behavior?

Currently, this behavior is automatic and cannot be disabled.

What if I want to customize the layout structure manually?

You can still add Sections, Rows, and Columns manually if you prefer full control.

Does this feature work in both Funnels and Websites?

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

Will this affect my existing pages?

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

Do I still need the move handle?

No. You can grab any part of the element to move it.

Does this work in mobile view?

Yes. Always re-check responsive order after reordering columns to confirm tablet and mobile layouts.