Website Builder

What is the website builder?

The website builder is a visual editor that lets you customize every page on your job board without writing code. Add sections, reorder content, adjust settings, and preview changes in real-time before publishing.

The builder gives you control over how each page looks while keeping layouts consistent and professional.

Our approach to customization

Many website builders offer unlimited flexibility: drag anything anywhere, style every pixel. This freedom often leads to inconsistent designs, broken layouts, and hours of frustration.

We designed the website builder around a different principle: falling into the pit of success. The easiest path should lead to good results.

Here's how that works in practice:

• Section-based editing - Instead of positioning elements pixel-by-pixel, you add pre-designed sections that are guaranteed to look professional. Reorder them, customize their content, but the underlying layout stays solid.
• Constrained choices - Each section exposes only the properties that matter. You won't find options that could break your design.
• Design tokens - Colors, fonts, and spacing come from your design system. Change your brand color once, and it updates everywhere consistently.
• Responsive by default - Every section adapts to mobile, tablet, and desktop. You don't need to design three versions of your site.

The goal: you focus on your content and brand. The builder handles the details that make websites look professional.

Accessing the editor

1. Go to Website in the sidebar
2. Click on any page type to start editing
3. The editor opens with a live preview of your page

Editor interface

The editor adapts to your screen size for a comfortable editing experience.

Desktop (1536px and wider)

On large screens, you'll see a three-panel layout:

• Left panel - Page sections tree and component library
• Center - Live preview with viewport simulation
• Right panel - Section settings, design system, and SEO configuration

Tablet (768px to 1535px)

On medium screens, you'll see a two-panel layout:

• Left panel - Toggles between sections list and settings views
• Center - Live preview

Use the sidebar toggle to switch between viewing sections and editing settings.

Mobile (below 768px)

On small screens, the preview takes the full screen:

• Main view - Full-screen preview
• Bottom sheet - Slides up to show sections and settings
• Navigation - Sheet-based navigation between views

Viewport preview modes

Test how your pages look on different devices:

1. Click the viewport icons in the toolbar
2. Choose from desktop, tablet, or mobile preview
3. The preview area simulates the selected device size

Use this to verify layouts work on mobile, tablet, and desktop before publishing.

Working with sections

Add a section

1. Click the + button in the left panel or the "Add section" button
2. Browse available sections for this page type
3. Click a section to add it to your page

Reorder sections

1. Click and drag a section in the left panel
2. Move it to your desired position
3. Release to drop it in place

Remove a section

1. Select the section you want to remove
2. Press Delete or Backspace on your keyboard
3. Or click the delete icon in the section toolbar

Some sections are required and cannot be removed (like the hero section on the home page).

Duplicate a section

1. Select the section you want to duplicate
2. Click the duplicate icon in the section toolbar
3. A copy appears below the original

Editing section properties

1. Click on any section in the preview or left panel
2. The right panel shows editable properties for that section
3. Make your changes. The preview updates in real-time

Each section type has different customizable properties. For example:

• Hero sections - Title, subtitle, background settings
• Job listings - Number of items, layout style
• Content blocks - Text, images, links

Saving your changes

Changes are not automatically saved. To save your work:

1. Click the Save button in the top toolbar
2. Wait for confirmation that changes were saved

Unsaved changes warning

If you try to leave the editor with unsaved changes, you'll see a warning. Either save your changes or confirm you want to discard them.

Keyboard shortcuts

Editable page types

The website builder supports multiple page types. Each has its own available sections and SEO tokens.

Home page

URL: /

Your job board's main landing page.

Available sections: Hero (required), Jobs preview, Companies preview, Blog preview, Layout components, Typography, Interactive elements, Ad slots

SEO tokens: {{board_name}}

Jobs pages

Jobs list (/jobs) - Main jobs listing with search and filters

Job detail (/companies/[company]/jobs/[job]) - Individual job posting pages

Job category pages (/jobs/[category]) - Auto-generated pages per category

Job location pages (/jobs/locations/[location]) - Auto-generated pages per location

Job combination pages (/jobs/locations/[location]/[category]) - Combined location and category

Company pages

Companies list (/companies) - Browse all employers

Company detail (/companies/[company]) - Individual company profiles

Company market pages (/companies/markets/[market]) - Auto-generated pages per market/industry

Blog pages

Blog index (/blog) - Your blog's main page

Blog post (/blog/[post]) - Individual article pages

Author page (/blog/author/[author]) - Author profiles and their posts

Tag page (/blog/tag/[tag]) - Articles grouped by tag

Employer pages

Post a job (/post) - Job submission form for employers

SEO tokens reference

Use these tokens in your SEO templates for dynamic content:

Common components

These components are available on most page types:

• Layout: Grid layout, Flex layout
• Typography: Headings, Text blocks
• Interactive: Accordion, Button links, Cards, Tables, Ad slots