This guide explains how to insert, adjust, and configure multi-column layouts using the LanderLab visual editor. Columns let you structure content within sections and place text, images, or buttons side by side for better visual balance.
Here’s how to get started:
- Select a Section. Click on any existing section where you want to add the columns.
- Add the Column Element. Click the Insert Element button (often a ‘+’ icon) within the section.
- Drag and Drop. Select the ‘Container’ or ‘Columns’ element from the list and drag it into your desired location within the section.
- Result: A default column structure (usually two columns) will appear, ready for you to drop content into.
Adjusting Column Count and Ratios
Once the Column element is on the page, you can change the number of columns and their widths to get the layout you want.
- Select the column container to edit it.
- Open the Settings Panel on the right side of the editor.
- Change the Column Count or choose a predefined layout (2, 3, or 4 columns).
- Adjust width ratios using either:
- Visual Drag: Drag the divider line between columns on the canvas.
Placing Content into Columns
Each column can hold any type of content—text, images, buttons, or forms. Drag and drop elements into each column to start designing.
- Open the Elements panel in the sidebar.
- Drag an element (like Text, Image, or Button) and drop it into the column space.
Ensuring Mobile Responsiveness
LanderLab automatically adapts columns for smaller screens, but you can fine-tune the mobile view to improve readability and layout flow.
- Switch to Mobile View using the device icons at the top of the editor.
- Confirm that columns stack vertically (Column 1 on top of Column 2, etc.).
- Optionally reverse stacking using the right panel.
- Adjust Padding and Margins to control spacing between stacked columns.
That’s it! You can now create flexible, responsive multi-column layouts to organize your content effectively and make your pages visually appealing on all devices.