Skip to main content

Documentation

No results found.
Guides

Adding Rows from the Design Library

Build pages by inserting pre-designed sections from the design library, then rearrange, duplicate, or remove them as your page takes shape.

Every row in the Design Library is fully editable after you insert it — text, images, buttons, colors, and spacing all open in the standard editor sidebar.

Insert a row

  1. Open the page in the editor (Dashboard → Pages, click the page).
  2. Click Add row. A drawer opens with three tabs:
    • Library — pre-designed sections grouped by category (hero, features, pricing, testimonials, FAQs, contact, footer, and more), each with a live preview thumbnail.
    • Blank — start-from-scratch building blocks (section, block, panel, container) with optional starter items like a heading or button.
    • Shared — rows you have saved for reuse across pages. See Shared Rows.
  3. Use the category chips at the top to narrow the list, or the search box to match by name.
  4. Click a row to insert it at the position you opened the drawer from.

Thumbnails render with your actual brand colors, so what you see in the picker matches what lands on the page.

Browse categories

Common categories include heroes, features grids, pricing tables, calls-to-action, testimonials, social proof, FAQs, galleries, sliders, general content rows, blog listings, page-title banners, contact sections, and footers. The picker only offers categories that make sense for where you're inserting — for example, site headers don't appear in the middle of a page body.

Rearrange rows

Every row card in the sidebar has a Move icon:

  1. Click the Move icon to "pick up" the row.
  2. Click any other row to drop it there. A colored line previews the drop position as you move.
  3. Press Esc (or click Cancel in the banner) to abort.

This works for any distance — one step or straight to the top — with the same two clicks. There is no drag-and-drop to fight with.

You can also select multiple rows (Cmd/Ctrl+click to toggle, Shift+click for a range) and use keyboard shortcuts:

  • Cmd/Ctrl+C — copy
  • Cmd/Ctrl+X — cut
  • Cmd/Ctrl+V — paste (rows paste at the end of the page)

The clipboard survives across pages in the same browser, so you can copy rows from one page and paste them onto another with their content intact.

Duplicate a row

Copy and paste is the quickest duplicate: select the row, press Cmd/Ctrl+C then Cmd/Ctrl+V. The pasted copy is independent — editing it never affects the original.

Swap a row for a different design

If you like a row's content position but want a different look, you don't have to delete and rebuild:

  1. Open the row's design panel and click Browse alternates.
  2. Cycle through every row in the same category (or switch category mid-browse) — the preview updates live.
  3. Confirm to commit the swap.

Your section-level styling — background, padding, width, custom IDs — carries over to the new design. The new template's default text and images take the place of the old ones.

Delete a row

Use the delete action on the row card. If you change your mind right away, Undo brings it back; the editor keeps up to 50 undo steps per page.

Section color presets

Every row can switch its whole color story in one click. Open the row's paintbrush panel and use the Color Preset dropdown (with previous/next arrows for quick cycling) to flip a section between light, dark, primary, and other brand-tuned looks — background, text color, link colors, and heading colors all change together, so contrast stays readable without any manual color picking. Alternating presets (white → light gray → dark) is the easiest way to give a long page visual rhythm. Presets are managed centrally under Dashboard → Design → Sections; see Section Color Presets for details.

Next steps