A page is a stack of sections. Each section holds columns, columns can hold inner columns (boxes or cards), and widgets sit inside them. This article covers building that structure. Every option in a section's or column's Design panel is in Section and column design.
Add a section
- Hover between two sections and click Add Section, or select a section and choose Add > Blank Section in its toolbar.
- What type of section? asks you to pick:
- Layouts: an empty section in one of 10 column layouts (1 Column, 2 Columns, 1/3 + 2/3, 2/3 + 1/3, 3 Columns, 4 Columns, 1 Above 2, 2 Above 1, 2×2 Grid, 3 Rows).
- Designed Sections: ready-made sections. The Designed tab holds the platform library. The Custom tab holds sections your agency saved. Filter by category, or click Manage Categories.
- Zeus-generated (agency team only): Zeus writes the words for a chosen layout. Free. You can also pick Add > Zeus-generated section in the toolbar, and More > Redo this section with Zeus on an existing section (also free). See Zeus in the editor.
- The new section goes below the one you started from.
Delete a saved custom section
In Add Section > Designed Sections > Custom, hover the card and click the bin icon. Delete this template? asks you to confirm with Delete or Cancel. Only owners and admins of the agency see the bin, and only on Custom cards. Platform Designed sections can't be deleted.
Save a section to reuse it
Agency people only.
- Select a section, then More > Save as Section (or right-click the section > Save as Section).
- Choose what to save:
- This Section Only opens the save window straight away.
- Multiple Sections turns on select mode: a bar says Select sections to save and counts how many you've ticked. Tick the sections, then click Create Section. Cancel or Esc leaves select mode.
- Entire Page saves every section on the page, with the category set to Full Page.
- In the Save as Section window fill in Name (required, for example "Hero with CTA") and Category (optional). ContentForge staff with the Platform templates permission also see Visibility: Agency template — your agency only or Platform template — every agency. Everyone else saves for their agency only.
- Click Save. It appears under Designed Sections > Custom on every site in your agency.
A designed or saved section you add yourself looks exactly as it was designed, with its own colors, whatever this site's theme is. A Zeus-generated section built from a designed section takes this site's colors instead, and Zeus makes sure its text, buttons and icons still read on their backgrounds.
Copy a section (no Duplicate)
Sections can't be duplicated: Duplicate and Ctrl/Cmd+D are grayed out for a whole section. Select it, choose More > Copy (or Ctrl/Cmd+C), select the section it should follow and pick More > Paste Below (or Ctrl/Cmd+V). Columns, inner columns and widgets can be duplicated as normal.
Delete a section
Select the section and click Delete in its toolbar, or press Delete or Backspace. A note says the section was deleted, with an Undo button for a few seconds. The header and footer can't be deleted this way.
Columns and inner columns
Select a section or column and use Add > Column or Inner Column. An inner column is a box inside a column. Use it to group a heading, text and button into one card. Each container's Design panel sets direction, alignment, gap, padding, background (color, image, video or a slideshow), border, shadow and size: see Section and column design. For gradient angles, layered gradients, exact picture sizes, overlay blends and a pattern over a video, see gradients and text effects. Sections can also have a shaped top or bottom edge: see shape dividers. Reset to Theme Spacing (right-click) goes back to the theme's spacing.
Corners, borders, opacity and rotation
Select a section, column or inner column and open Design > Style. Under the background are Corner radius (with Each corner), Border (style, Sides, Each side), Opacity, Rotation, Shadow and, on columns and boxes, Glass morphism. Opacity and Rotation can differ per screen size; corners and borders are the same everywhere. Every option and its range is in Section and column design. Zeus can set all of these when you ask in the editor chat, and an imported site keeps them.
Width and max width
Select a column, inner column or container and open Design > Size:
- Width: Fill (share the space), a % of the space inside the parent's padding, or a fixed px width.
- Max width: None, or a cap in px or %. The box never gets wider than this, whatever Width says. A Fill box with a Max width fills up to the cap.
- Switching the unit (for example Fill to %, or % to px) keeps the size the box shows now and writes it in the new unit, so nothing jumps.
- Position (boxes inside a stacked column or section): Left, Center or Right places this box when it's narrower than its parent. The line under it says why it sits where it does: its own position or its parent's Horizontal alignment. The reset icon (or Reset) goes back to the default.
- The gray box underneath shows the width it really appears at on the canvas and what's holding it, for example "Shows at 820px wide. Held by Max width (820px)."
A section's width comes from its Full width switch (Design > Layout). Off, it's held to the theme's page width (Theme > Width & Spacing). The same gray box shows the section's width and the room left for content inside its padding.
On Mobile, a column or box that sits in a stack and has a % width (for example 50% on Desktop) fills the phone's width, unless you give it its own Mobile width. Px widths stay as set.
Width and max width can be set separately on Tablet and Mobile. Fill on Tablet or Mobile fills the space there even when Desktop has a width (for example 50% on Desktop, full width on Tablet). On Mobile, columns that sit side by side stack to full width unless you give them a Mobile width (Fill keeps them side by side). On Mobile, the row's Direction shows what you see: a stacked row reads Vertical. Click Horizontal there to keep its columns side by side on phones, or Vertical to stack them again. This changes phones only. The header and the phone menu don't stack this way, because their Mobile layout is already the phone design.
How a box is placed, in one rule: the parent's alignment places its children, and a box's own Position overrides it for that box. This works the same in a section, a column, an inner column or a box: set a column's Horizontal to Left and the inner columns and boxes inside it go to the left. A box fills its parent's width only when its Width is Fill and it has no Max width. A box with its own Width, a Max width or Fit content is placed by its parent's Horizontal (or its own Position). Inside a grid, tabs or an accordion, a box held by its Max width stays centered.
Box alignment and text alignment are separate. A column's Horizontal places the boxes and widgets inside it. A text widget is as wide as its column, and its words follow its own Text alignment. So a column set to Left can still show centered words. The panel says so under Horizontal and tells you how many text widgets inside use a different Text alignment.
A section's Vertical alignment moves the boxes inside it up or down when the section is taller than its content. A column's or box's Vertical set to Middle, Bottom or a spread does the same for the boxes inside it. At Top, a box inside a column still fills the column's height, so cards in a row stay the same height. The boxes keep their own height. In a section with columns side by side, the columns stay the same height as each other and move as one row. When the content already fills the section (for example a big top and bottom padding), there's no room to move it, and the panel says so under Vertical. Raise the section's height or lower its padding to make room.
Drag to resize: select a container and drag its left or right edge.
- In a row of columns, the edge changes the column's Width (in % or px, whichever it already uses). It stops at its content, at the room left in the row and at its Max width.
- In a stacked layout, the edge changes the box's Width (px stays px, Fill becomes %), and the box stays where its Position puts it. A box on the left gets a handle on its right edge, a box on the right gets one on its left edge, and a centered box gets both and grows on both sides. It stops at its content, its Max width and its parent.
- Inside a grid, tabs or an accordion, a box centered by its Max width keeps the old behavior: its edges change the Max width and it grows or shrinks on both sides.
- A tip shows the new value and the width it appears at, and what stops it. One Undo (Ctrl+Z / Cmd+Z) puts the whole drag back. Dragging on Tablet or Mobile changes only that screen size.
In Spacing, the outer box is the margin and the inner box is the padding. Click a number to type a new value. The link button on the padding box's top edge sets all four sides at once.
Link a whole card
Select a column or inner column and click Link in its toolbar. Pick a page, address, popup or anything else the link picker offers. The whole box becomes clickable. Buttons and links inside it keep their own targets. Use Edit Link to change or remove it.
Advanced Tabs, Accordion and Grid
Find these in Add > Layout. Unlike the basic Tabs and Accordion widgets, their panels can hold any widgets you drag in. Advanced Grid places items in cells and lets them overlap. Every setting, plus Grid Position for items inside a grid, is in Advanced Tabs, Accordion and Grid. For free pixel positions, use Free Layout. To repeat a card for every item in a collection, use a Dynamic Repeater.
Anchors
Right-click a section or container > Set as Anchor so links and menu items can scroll to it, from any page.
Use Layers to see the whole structure and drag items to reorder.
A different layout or picture in another language
On a site with more than one language, layout and design are shared: a section looks the same in every language, only the words change.
- Own layout in one language: while editing that language (the language switcher in the top bar), hover the section and click Unlink for Spanish (or click Unlink on the message you get when you try to change the layout). From then on that section can be changed freely in Spanish, and changes to it in the main language no longer reach the Spanish version. Adding, moving or deleting whole sections of the page still happens in the main language.
- Back to the shared layout: click Relink on the section and confirm. The Spanish copy and the changes made in it are removed. The section shows the main layout again with the Spanish words it had before.
- A different picture in one language: select an image while editing that language and click Replace for Spanish only. Use the English image puts the shared picture back. Galleries, sliders, hero sliders and card carousels have Pictures in Spanish in their toolbar.
- Right-to-left languages (Arabic, Urdu …) mirror every section automatically. To keep one section's layout as it is, turn off Mirror for right-to-left under Layout in the section's design panel (shown when the site has a right-to-left language; changed in the main language).
Who can use it
Anyone with the Mount Olympus tool. Client people (see Client permissions) need Editor to add, move, copy, delete or design sections and columns. They never see Save as Section, Zeus-generated or Redo this section with Zeus. Agency people can right-click a section or column and choose Lock Editing for Client (or More > Lock for client editing): client people then can't select or change it or anything inside. Unlock for Clients undoes it.
Troubleshooting
- Duplicate is grayed out: you've selected a whole section. Copy it and paste it instead.
- "No sections to save": the page has no sections that can be saved (for example a page with only a header and footer). Add a section first.
- "Name is required": give the saved section a name in the Save as Section window.
- "One or more selected sections is no longer available — please try again": a ticked section was deleted or changed while the window was open. Close it and save again.
- "Inserted 2 of 3 sections — the rest failed" (the numbers vary): a multi-section design was only partly added. Delete the part that was added and add the design again.
- "Couldn't insert section": the section couldn't be added. Try again; if it keeps happening, reload the editor.
- I can't see the bin on a custom section: only agency owners and admins can delete saved sections.
- Save as Section is missing from the menu: it's only on whole sections, and only for agency people. Select the section itself (badge Section), not a column inside it.