Website Builder

The website builder is where you control how every page on your job board looks. You can add and rearrange sections, configure your color scheme and typography, set up navigation and footer links, and optimize SEO settings, all from a visual editor with a live preview.

Unlike typical page builders that give you pixel-level control (and pixel-level ways to break things), Cavuno's builder uses pre-designed sections that are guaranteed to look professional on every device. You choose which sections to include and configure their content. The builder handles responsive layout, spacing, and visual consistency through your design system.

Open the editor

1. Go to Board settings in the sidebar
2. Scroll to the Website builder section
3. Click Edit

The editor opens with a live preview of your homepage. If you're setting up a new board, you can also click Customize design in the onboarding checklist on your dashboard.

Use the page selector dropdown in the top bar to switch between page types. Pages are organized into groups: Home, Jobs, Companies, and Blog.

Editor layout

The editor has three main areas on desktop (1536px and wider): a left panel showing your page's section tree, a center live preview with device viewport controls, and a right panel for editing section properties, design settings, and SEO configuration.

On tablet-sized screens (768px–1535px), the layout collapses to two panels. The left panel toggles between sections and settings views. On mobile, the preview takes the full screen with a bottom sheet for sections and settings.

Page types

The builder supports 13 page types across four groups.

Home: Your board's main landing page at /. This is the first thing visitors see, so it has the most section options: hero, jobs preview, companies preview, blog preview, and various layout and content components.

Jobs: The job search page (/jobs), individual job detail pages, and the post-a-job form for employers. Category pages (/jobs/[category]), location pages (/jobs/locations/[location]), and combination pages (/jobs/[category]/[location]) are programmatic. They use templates rather than the visual section editor, but you can still configure their SEO settings.

Companies: The companies directory (/companies) and individual company profile pages. These pages help employers showcase their brand and give candidates a way to browse by company.

Blog: The blog index, individual post pages, author profile pages, and tag pages. A well-maintained blog builds topical authority that helps your board rank in search engines and gives you content to share in newsletters and social media.

Work with sections

Add a section

1. Click the + button in the left panel
2. Browse available sections for the current page type
3. Click a section to add it

Some sections are singletons, meaning you can only have one instance per page (for example, one jobs filter, one hero, one search section).

Reorder sections

Drag sections up or down in the left panel to change their order on the page. The preview updates in real time as you reorder.

Remove a section

Select a section and press Delete or Backspace, or click the delete icon in the section toolbar. Some sections are required and cannot be removed, for example the hero on the homepage, the job post section on job detail pages, and the search section on listing pages.

Edit section properties

1. Click any section in the preview or left panel
2. Edit properties in the right panel (titles, subtitles, layout options, content settings)

Changes appear instantly in the preview.

Design system

Click the Design system panel in the right sidebar to configure your board's visual identity. This is where you set your logo, color scheme, and typography. Changes here apply globally across every page.

Logo: Upload a square image (minimum 200×200px, PNG or JPG). A transparent PNG works best since your logo needs to look good in both light and dark mode.

Color schemes: Choose from seven professionally designed presets (Obsidian, Slate, Sand, Coral, Indigo, Emerald, Charcoal) or create a fully custom palette. Each preset includes balanced values for both light and dark mode. The editor includes built-in WCAG contrast checking so you can verify your color combinations meet accessibility standards.

Typography: Pick separate fonts for headings and body text. The preview shows how your choices look with real content.

For a detailed walkthrough of every design option, see Design system.

Header and footer

The header settings let you customize your navigation bar with up to five custom links alongside the default navigation. Each link needs a label and URL (relative paths like /about or absolute URLs like https://yoursite.com).

The footer settings include a description paragraph, contact email, company website, and social media links (X/Twitter, Facebook, LinkedIn). This information appears at the bottom of every page on your board.

SEO settings

Each page type has its own SEO configuration in the right panel: a title tag (max 70 characters) and meta description (max 220 characters). Use template tokens to generate dynamic content. For example, {{count}} {{job_label}} in {{category}} on category pages automatically generates titles like "142 Jobs in Engineering."

Available tokens vary by page type:

• All pages: {{board_name}}
• Job/company listing pages: {{count}}, {{job_label}}, {{company_label}}
• Category pages: {{category}}
• Location pages: {{location}}
• Blog tag pages: {{tag_name}}, {{tag_description}}

For more on optimizing your page metadata, see Page SEO settings.

Preview and save

Use the device viewport icons in the toolbar to preview your pages on mobile, tablet, and desktop. Always check your layouts on mobile before saving. Most job seekers browse on their phones.

Changes are not saved automatically. To publish your work:

1. Click Save in the toolbar (or press Cmd+S / Ctrl+S)
2. Wait for the confirmation message

If you try to leave with unsaved changes, the editor shows a warning so you don't lose work.