These three are containers you add from the Add panel like a widget (Add > Layout). Unlike the basic Tabs and Accordion widgets, each tab, item or cell can hold any widgets you drag in: pictures, buttons, forms, even inner columns. For text-only tabs or an FAQ with schema, the basic widgets are simpler: see Accordion, Tabs and List widgets.
How to add one
- Open Add in the left rail and go to Layout.
- Drag Advanced Tabs, Advanced Accordion or Advanced Grid into a section, column or inner column (or click it to add it to the selected container).
- Tabs and Accordion start with three panels, each holding a starter title and paragraph. Advanced Grid starts empty with 2 columns (1 on phones).
- Select it and click Design to set it up.
How to fill a tab or item
- Select the Advanced Tabs or Accordion and open Design.
- Under Tabs (or Items), click the tab you want. "Pick a tab to show it on the canvas, then drag widgets into it."
- Drag widgets from the Add panel into the panel showing on the canvas.
Advanced Tabs
Tabs
- The list of tabs, in order. Click one to show it on the canvas.
- Rename: double-click the name, or click Aa. Press Enter to save, Esc to cancel. An empty name becomes "Tab 1", "Tab 2" and so on.
- Move up / Move down reorder. Duplicate copies the tab and everything in it. Delete removes it (you can't delete the last one).
- Add tab adds a new one at the end.
Layout
- Open on page load: which tab shows first. Default the first tab.
- Tab alignment: Left, Center (default), Right or Fill (the tabs share the full width).
- Tabs right to left: off by default. Puts the first tab on the right.
- Tab position: Top (default), Left side or Right side. "Phones show the tabs on top."
- Tab strip width (left or right side only): 120–420px, default 220.
- Show as an accordion on phones: off by default. On, phones see the tabs as expandable items instead.
- Label heading type: H2, H3, H4 (default), H5, H6 or Text. Pick what fits your page's heading order for search engines.
Tab Default State
How every tab label looks:
- Text style: Font, Size (8–48, default 20), Text color, Format (Bold on by default, Italic) and Alignment. See Design panel basics.
- Background color: default white.
- Border: 0–6px, default 0. Border color appears once it's above 0.
- Corner radius: 0–30px, default 0.
- Tab padding: 0–40px, default 12.
- Space between tabs: 0–40px, default 4.
- Line under the tabs: on by default, with Line color (light gray).
Tab Hover & Selected State
How a tab looks when hovered and when it's the open one:
- Text color and Bold.
- Background color: default light gray.
- Border color (only when the tabs have a border).
- Underline the selected tab: on by default, with Underline color (your theme's main color).
Advanced Accordion
Items
Works like the Tabs list: click to show an item on the canvas, Aa or double-click to rename, Move up, Move down, Duplicate, Delete (not the last one) and Add item.
Layout
- Show one expanded item at a time: on by default. Opening one closes the others.
- Show first item expanded: off by default.
- Right to left text: off by default.
- Space between items: 0–80px, default 24.
- Title heading type: H2, H3 (default), H4, H5, H6 or Text.
Title Text
The item titles' text style: Font, Size (8–60, default 24), Text color, Format (Bold on by default) and Alignment.
Toggle Icon
- Color and Background color.
- Size: 10–64px, default 24.
- Padding: 0–24px, default 2.
- Corner radius: 0–40px, default 0.
- Position: Left or Right (default).
Header
The bar each title sits in:
- Background color: default light gray.
- Border: 0–6px, default 0, with Border color above 0.
- Padding: 0–60px, default 20.
- Corner radius: 0–30px, default 0.
Advanced Grid
Layout
- Rearrange layout: one-click presets 1x1, 2x1, 3x1, 4x1, 2x2 and 3x2 (columns × rows). They set the desktop grid.
- Customize layout:
- Columns: 1–12, default 2 (1 on phones). Per screen size.
- Rows: 1–12, default 1. Per screen size. More rows are added automatically when items need them.
- Column gap and Row gap: 0–120px, default 16. Per screen size.
- Minimum row height: 0–800px, default 120. Rows grow taller when their content needs it. Per screen size.
- "Drag widgets onto a cell to place them — they can overlap. Select an item to set its cell, span, pin and front-to-back order. Phones stack items unless you place them on phones too."
Grid Position (on each item inside)
Select a widget or box inside the grid and Grid Position appears at the top of its Design panel. Everything here is per screen size.
- Column and Row: the cell its top-left corner sits in.
- Columns wide and Rows tall: how many cells it spans.
- Pin inside its area: a 3×3 grid placing the item top-left, center, bottom-right and so on inside its cells. Stretch across and Stretch top to bottom make it fill its cells instead (both on by default).
- Arrange (for overlapping items): Bring to front, Bring forward, Send backward, Send to back.
- Flow automatically instead (desktop): clears the placement so the item takes the next free cell. On Tablet or Mobile the link reads "Use the desktop position (or flow) on …" and clears just that screen size.
- An item with no placement says "Flowing into the next free cell…".
On the canvas
- Drag a widget onto a cell to place it there. Items can share cells and overlap.
- Select an item and drag the handles on its right edge, bottom edge or corner to span more or fewer cells. With a handle focused, the arrow keys grow or shrink the span one cell at a time.
- With an item selected, the arrow keys nudge it by its outer spacing (1px, 10px with Shift). Ctrl/Cmd+] and Ctrl/Cmd+[ bring it forward or send it backward; add Shift for front or back.
The frame
Under each one's own settings is the usual container panel: background, border, corners, shadow, glass, spacing, size and animations. See Section and column design.
Examples
- A salon's price list by service: Advanced Tabs with tabs Hair, Nails and Brows, Tab position Left side, each tab holding a Pricing Cards widget. Turn on Show as an accordion on phones.
- A builder's project FAQ with photos: Advanced Accordion, one item per question, each holding a text widget and a before-and-after picture.
- A café's mosaic: Advanced Grid 3x2, a big photo set to Columns wide 2 and Rows tall 2, two small photos on the right, and a text box overlapping the big photo with Bring to front.
Limits and what it can't do
- Grid columns and rows go up to 12 in the panel. Gaps go up to 120px and Minimum row height up to 800px.
- Tabs and items are added in the Design panel, not from the toolbar's Add menu. You need at least one.
- Inside a grid, a tab or an accordion item, a box held by its Max width stays centered.
- No FAQ schema for Advanced Accordion. Use the basic Accordion widget for that.
- On phones, side tabs always sit on top.
- For free pixel positions rather than cells, use Free Layout.
Who can use it
Anyone with the Mount Olympus tool. Client people (see Client permissions) need Editor to add these, change tabs or items, or move things in the grid. Widget content only lets them change what the widgets inside say. Nothing inside a section or column locked for clients can be changed.
Troubleshooting
- I dropped a widget but it went into the wrong tab: pick the tab in the Tabs list first, so it's the one on the canvas, then drag.
- Delete is grayed out: it's the only tab or item left. Add another first, or delete the whole container.
- My grid looks different on phones: phones use 1 column and stack items in order unless you place them on the Mobile view. Switch to Mobile and set Grid Position there.
- An item is hidden behind another: select it and click Bring to front, or press Ctrl/Cmd+Shift+].
- The tab strip width slider is missing: it shows only with Tab position Left side or Right side.