The Horizontal Box and Vertical Box are fundamental layout elements used in the LanderLab.io Visual Editor to arrange content horizontally (side-by-side) and vertically (stacked) within a section.
Using the Horizontal Box (Flexible Side-by-Side Layout)
The Horizontal Box acts as a flexible row container. It arranges elements side-by-side (horizontally) and provides controls for how they align and distribute space.
1. Inserting the Horizontal Box
- Click the Elements panel (left sidebar).
- Find and drag the Horizontal Box element into your page section.
- This element is ideal for placing two or more elements (like an image, text, and a button) in a single row.
2. Controlling Element Distribution and Sizing
When you select the Horizontal Box container, the right-hand Properties Panel gives you control over the horizontal axis (the main axis of flex):
Distribution (justify-content): This defines how elements are spaced horizontally within the box:
Space Between: Pushes the first element to the left and the last to the right, with equal spacing between others.
Center: Groups all elements together in the middle of the box.
Space Around / Space Evenly: Distributes equal space between all elements.
3. Controlling Vertical Alignment within the Row
This controls how elements align vertically (the cross-axis of flex), which is especially useful when elements inside the Horizontal Box have different heights.
- Top: Aligns all elements to the top edge of the box.
- Center: Vertically centers all elements within the box.
- Bottom: Aligns all elements to the bottom edge of the box.
4. Managing Responsiveness
The horizontal arrangement automatically adapts to smaller screens, but you can customize how it stacks or reverses for mobile devices.
- Stacking: On mobile view, the layout usually switches to vertical stacking (one element on top of the next). You can set this in the properties panel on the right side.
That’s it! The Horizontal Box gives you complete flexibility to arrange and align elements horizontally, making your layouts cleaner, more adaptive, and visually balanced across all devices.
Using the Vertical Box (For Stacked Content Alignment)
The Vertical Box acts as a flexible column container. It holds multiple elements and controls their stacked vertical alignment and consistent spacing as a single unit.
1. Inserting and Placing Content
- From the Elements panel, drag and drop the Vertical Box element onto the canvas.
- Drag and drop elements (like an Image, Headline, and Text) directly into the Vertical Box.
2. Controlling Alignment and Spacing
Select the Vertical Box container to access layout settings. In the right-hand Properties Panel, use the LAYOUT section to fine-tune content alignment and spacing.
- Align (align-items): Controls the horizontal alignment of all stacked elements within the box. Choose between Left, Center, or Right to define how content aligns across the column.
- Spacing / Gap: Defines the vertical distance between elements. Set this value (in px) to create consistent space between items inside the box.
💡 Pro Tip: Use the Vertical Box to group elements — for example, a testimonial photo, name, and quote — and center them as one block. This makes your layout cleaner and easier to manage across devices.
That’s it! The Vertical Box simplifies stacked content alignment and ensures consistent spacing, making your layouts flexible, organized, and fully responsive.