Editor 2.0 - Layouts Elements & Layers Panel

April 9, 2025

Editor 2.0 - Layout Elements & Layers Panel

Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.

Layout Elements (Containers)

Key Takeaways

  • What Are Widgets?
  • Widgets are pre-designed elements you can add to your site
  • Examples include:
  • Button
  • Icon
  • Text block
  • Contact form
  • Map
  • Where to Find Layout Elements
  • Open the Widgets Panel
  • Scroll halfway down to find the "Layout Element" category
  • Layout elements include tools like columns and grids
  • What Makes Layout Elements Different
  • Layout elements act as containers or wrappers
  • They can hold:
  • Basic widgets
  • Other layout elements
  • This makes them useful for:
  • Structuring your site
  • Grouping content
  • Creating responsive designs
  • Why Layout Elements Matter
  • Help build more complex, flexible designs
  • Let you organize widgets and keep structure clear
  • Control how elements behave and align at different breakpoints
  • Key Concept
  • Think of widgets as the content
  • Think of layout elements as the containers that hold and organize that content
  • Editing Rules
  • Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
  • Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
  • Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Layers Panel

Key Takeaways

  • What It Is
  • Click the stack icon on the upper left to open the Layers Panel
  • It gives a visual overview of your site's structure
  • Useful for understanding how widgets and layout elements are organized
  • What It Shows
  • Not a one-to-one match with actual HTML
  • It's a high-level view of how elements are grouped and nested in the editor
  • Great for navigating complex designs with many sections and widgets
  • Features and Functions
  • Click any item in the panel to highlight it in the editor
  • Rename any element by double-clicking its name
  • Helps clarify relationships, like:
  • A section is the parent of a column
  • A column can be the parent of multiple widgets inside it
  • Why It Matters
  • Understanding parent-child relationships helps with layout and design decisions
  • Knowing how elements nest improves control over styling and structure
  • This is key when using columns or grids to build responsive pages
  • Other Ways to Navigate
  • Hover over the element name above the floating bar to open a breadcrumb trail
  • You can also use the breadcrumb at the top of the Design Panel to jump between layout levels
  • Editing Rules
  • Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
  • Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
  • Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Editor 2.0 - Size and Units

By Hibu Sections • April 9, 2025
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.

Editor 2.0 - Flexbox: Columns and Inner Columns

April 9, 2025
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.

Editor 2.0 - Breakpoints

By Hibu Sections • April 8, 2025
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.

Getting Started With Editor 2.0

By Hibu Sections • April 7, 2025
Editor 2.0 gives you powerful tools to build and manage your website with more control, flexibility, and ease. Before you dive into editing, it helps to understand how the interface is structured and what each part of the editor does.
Show More →