The Edlio CMS Page Editor features a responsive multi-column layout engine that lets you structure web pages for desktop, tablet, and mobile viewing without writing code. You can switch layouts at any time while preserving your existing content blocks.
đĄ Best-Practice Adoption Tips for Page Layouts
Top Column Zone for Banners: Every multi-column layout includes a full-width Top Column Zone above the columns. Place hero photos, urgent announcements, or introductory text here to span the entire screen width.
Sidebar for Navigation: Choose Right Sidebar or Left Sidebar for departmental landing pages so your Section Menu sub-navigation sits neatly beside your main text.
Mobile Responsive Stacking: On mobile phones, multi-column layouts automatically stack into a clean vertical stream (left/main column first, followed by sidebar columns) ensuring seamless readability on any smartphone.
Choosing a Layout Template
Open any page in the Page Editor.
In the upper right toolbar, click the Layout dropdown button.
Select from the 5 wireframe wireframe templates:
Full Width: Single full-width column ideal for articles, newsletters, and long-form announcements.
Left Sidebar: Narrow navigation/link column on the left with wider main content area on the right.
Right Sidebar: Wider main content area on the left with secondary sidebar on the right.
Two Equal Columns (50/50): Balanced two-column grid for side-by-side comparisons or twin media highlights.
Three Columns (33/33/33): Three-column display ideal for resource directories, button grids, and photo showcases.
The active layout is outlined in green with a Selected badge. Click outside the menu to apply.
Related Guides