The editor's canvas is your primary work area where you design and build your website. It operates on the box model and allows for complex, nested layouts using intuitive selection, movement, and styling tools.
Selecting and Navigating Elements
Element Selection and Hierarchy
To select any element, simply hover over it until a blue outline appears, and then click. Once selected, the editor provides several tools to understand the element's position:
-
Breadcrumb Navigation: Located in the top-left corner, this shows the element's hierarchical relationship (e.g., Section > Column 1 > Button), making it easy to see and navigate its nested position.
-
Design Panel: Selecting an element updates the design panel to show its specific properties and hierarchy.
-
Layers Panel: This panel offers a detailed, tree-like view of the site's HTML structure, making it easy to locate and adjust deeply nested or overlapping elements.
Moving Elements
Elements can be repositioned using two main methods:
-
Drag and Drop: Click and hold an element on the canvas or within the Layers Panel to move it.
-
Floating Design Panel: Click an arrow in the floating panel that appears upon selection to quickly shift the element's position.
Visual Indicators will guide your placement:
-
A blue indicator shows the position relative to sibling elements (elements at the same hierarchical level).
-
A section fill indicator highlights the parent element you are moving it into.
The final placement is determined by the element's internal display settings and properties for precise layout control.
The Box Model and Nesting
The Box Model
The canvas is built upon the box model, the fundamental concept in CSS, a styling language used to control the visual appearances of web pages. Every element is treated as a rectangular box composed of four layers:
-
Content: The actual text, image, or media.
-
Padding: Space inside the box, between the content and the border.
-
Border: The line surrounding the content and padding.
-
Margin: Space outside the box, separating it from other elements.
This model is essential for responsive design, as it allows elements to consistently adapt and size correctly across different screen resolutions.
Creating Layouts with Nesting
Nesting is the practice of placing containers within other containers to create flexible and complex layouts.
-
Containers: Elements like Sections, Columns, Inner Columns, and Advanced Grids are designed to hold and organize other elements.
-
Cohesive Movement: When you move a parent container, all nested elements move with it, ensuring your complex layout remains cohesive.
-
Example: A Section may contain two Columns. Each column might then hold a mix of text, images, and buttons, with further nesting possible inside Inner Columns for even finer control.
Styling and Layout Control
Styling with the Design Panel
The Design Panel is where you apply CSS properties to both containers and individual elements:
-
Dimensions: Control height, width, minimum, and maximum sizes.
-
Spacing: Use margins (outer space) and padding (inner space) to control distances.
-
Appearance: Set backgrounds, borders, colors, typography, and positioning.
Click Here to view our article that tours the elements of the Design Panel.
Changing Element Layouts
To control the flow and arrangement of child elements within a container, use the layout widgets from the Widgets Panel:
-
Columns/Inner Columns: These use Flexbox technology, which is optimized for one-dimensional layouts (arranging elements primarily in a horizontal row or vertical column).
-
Advanced Grid: This uses Grid Layout technology, which is optimized for two-dimensional layouts (arranging elements simultaneously across defined rows and columns).