Help center layout

The public help center isn’t a fixed template — it’s a small site you compose. The layout builder gives you a canvas for each of three pages (homepage, category page, article page), a chrome strip for the header, sidebar, and footer, and a palette of blocks you drag onto the canvas. The output is your customers’ help center.

You don’t need to use every block. Most help centers do well with five or six on the homepage and a clean article page. The builder is forgiving — drag, save, see it live, adjust.

The three pages

• Homepage — The landing page when someone visits your help center. — Hero search, category grid, featured article, recent articles, contact CTA
• Category page — The page when a customer clicks into a category. — Category-aware article list, related sections, sidebar navigation
• Article page — The page for a single article. — Article body, table of contents, “see also” related articles, contact CTA

Each page has its own block stack. The category page might be sparse on the homepage but rich on the category template — that’s the point.

Three layout shells

Before you place blocks, you pick a shell. The shell decides whether the page is full-width, has a left sidebar, or is centered with constrained width.

• Full-width — Edge-to-edge content, no sidebar — Modern, marketing-style help centers
• Left sidebar — Persistent navigation rail on the left, content on the right — Classic documentation feel — useful for technical help centers
• Centered — Constrained-width column, lots of margin — Reading-focused, low-density help centers

Pick one shell for the whole site. You can change it later, but it shifts every page at once.

Blocks

A block is a unit of content the layout renders. Atender ships 17 blocks that cover the patterns most help centers need:

• Search blocks — Hero search, Compact search, Quick links.
• Listing blocks — Category grid, Category list, Recent articles, Featured article.
• Section blocks — Section grid, Section list, Section bar.
• Role blocks — Role grid, Role bar (for browsing-by-role help centers).
• Communication blocks — Announcement, Contact CTA, System status.
• Layout blocks — Spacer, Video embed.

Every block has its own settings: a heading, a description, an image, and block-specific config (a Section block points at a section; a Featured Article block points at an article). The full list is in the Portal blocks reference.

Branding and theme

The layout builder also owns branding:

• Logo and favicon — uploaded once, used everywhere.
• Primary color — used for buttons, links, accents.
• Light and dark themes — both shipped automatically. Customers see the one their browser prefers, with an override toggle.
• Header, sidebar, footer — configured separately from page blocks.

See Configure branding and theme for the details.

How the live site relates to the editor

The layout builder is the same component tree as the live public site — just wrapped with edit affordances. What you see in the builder is what customers see, modulo a few preview-only chrome bits. The “Preview” button drops the affordances and shows the live site exactly.

The config is versioned. The builder writes a single config blob (the V3 layout config) when you save. Older configs are migrated forward automatically — if you set up your help center two years ago, the builder still understands the old shape.

Where to go next

• Build it: Customize the public portal
• Block-by-block reference: Portal blocks reference
• Make it yours visually: Configure branding and theme
• Put it on your own domain: Set up a custom domain