Site Builder

Use the SeroBook site builder to create a professional booking page without writing any code. Drag and drop sections, customize layouts, and preview changes before publishing.

Using the Site Builder

The site builder is a visual editor that lets you see exactly how your booking page will look as you make changes. Here's an overview of the interface:

• Left Panel – Available sections, blocks, and elements you can add to your page
• Center Canvas – A live preview of your booking page where you arrange and edit content
• Right Panel – Settings and properties for the currently selected element
• Top Bar – Undo/redo, device preview toggles, save, and publish buttons

Click on any element in the canvas to select it and reveal its settings in the right panel. Make changes and see them reflected immediately.

Drag-and-Drop Editing

Building your page is as simple as dragging elements from the left panel onto the canvas:

1. Browse available sections in the left panel
2. Click and drag a section onto the canvas
3. Drop it in the desired position (a blue indicator shows where it will be placed)
4. Click on the section to edit its content and settings
5. Drag sections up or down to reorder them

Editing Content

• Text – Click directly on text elements to edit inline. Change font size, weight, and color in the right panel
• Images – Click an image placeholder to upload your own or choose from the library
• Buttons – Edit button text, link destination, and styling
• Spacing – Adjust padding and margins using the right panel controls

Sections and Blocks

Your booking page is built from pre-designed sections that you can customize. Available section types include:

Header Sections

• Hero Banner – A large header area with your business name, tagline, and a call-to-action button
• Logo Header – A compact header featuring your logo and navigation
• Image Header – Full-width background image with overlay text

Content Sections

• About – Introduce your business with text and an optional image
• Services List – Automatically displays your services with prices and booking buttons
• Team – Showcase your staff members with photos and bios
• Testimonials – Display customer reviews and ratings
• Gallery – A photo gallery of your work or location
• FAQ – Frequently asked questions with expandable answers

Booking Sections

• Booking Widget – The interactive booking form where customers select services and times
• Availability Calendar – A visual calendar showing available slots
• Contact Form – A general inquiry form for non-booking questions

Footer Sections

• Simple Footer – Business name and copyright
• Detailed Footer – Contact info, social links, and business hours
• Map Footer – Embedded map with your business location

Previewing Your Changes

Before publishing, preview your page to make sure everything looks right:

• Desktop Preview – See how your page looks on a standard computer screen
• Tablet Preview – Check the layout on medium-sized screens
• Mobile Preview – Verify the mobile experience (this is how most customers will see your page)

Toggle between device sizes using the icons in the top bar. The canvas adjusts in real time to show how content reflows for each screen size.

Publishing Changes

Changes in the site builder are saved automatically as drafts, but they are not visible to customers until you publish:

1. Make your changes in the site builder
2. Preview across all device sizes
3. Click the Publish button in the top-right corner
4. Confirm the publish action
5. Your changes are live immediately

Version History

SeroBook keeps a history of your published versions:

• View previous versions under Site Builder → History
• Preview any past version before restoring
• Restore a previous version with one click if needed
• Up to 30 versions are saved

Responsive Design

All sections and blocks in SeroBook are responsive by default, meaning they automatically adapt to different screen sizes. However, you can fine-tune the responsive behavior:

• Column Layouts – Multi-column layouts stack vertically on mobile
• Image Sizing – Images scale proportionally to fit the screen
• Font Scaling – Headings and body text adjust for readability on smaller screens
• Hidden Elements – Optionally hide specific elements on mobile (e.g., decorative images)
• Mobile-First Spacing – Adjust padding and margins independently for each device size

Adding Custom Content

Beyond the pre-built sections, you can add custom content to make your booking page unique:

Custom HTML Block

Add custom HTML code for advanced integrations or unique design elements. Navigate to the left panel, find the Custom HTML block, and drag it onto your page.

Embed Block

Embed external content such as:

• YouTube or Vimeo videos
• Google Maps
• Social media feeds
• Third-party review widgets

Rich Text Block

Add formatted text content with a familiar editor that supports:

• Headings, paragraphs, and lists
• Bold, italic, and underline formatting
• Links to external pages
• Inline images

SEO Settings

Optimize your booking page for search engines to help customers find you online:

• Page Title – Set the title that appears in search results and browser tabs
• Meta Description – Write a short description for search engine results
• Social Image – Upload an image that appears when your page is shared on social media
• URL Slug – Customize the last part of your booking page URL

Access SEO settings from Site Builder → Page Settings → SEO.

Next Steps

Continue customizing your SeroBook experience:

• Branding and colors – Set your logo, color scheme, and fonts
• Custom domain – Use your own domain for your booking page
• Quick start guide – Complete your initial setup
• Create your first booking – Test the booking flow on your new page