Events8 min read

Event Website Builder

Build a full multi-page event website with drag-and-drop blocks. Covers pages, the editor, all 16 blocks, site settings, header, footer, colors, and fonts.

Overview

The event website builder lets you create a multi-page public site for your event using drag-and-drop blocks — no code required. Each page is fully customizable. You control the layout, content, header, footer, and color scheme independently of your organization website.

The website builder is a Pro planfeature. Go to your event's Overview page and click Event Website to open the website dashboard.

Pages

Your site is made up of individual pages — Home, Program, Sponsors, and so on. Each page has its own canvas of drag-and-drop blocks.

Creating a page

  1. In the Website dashboard, click Add page.
  2. Choose a template. Templates pre-fill the page with a starting set of blocks suited to the event type:
    • Conference — Hero, Program, Speakers, Sponsors, Pricing, Countdown
    • Gala — Hero, image + text section, ticket pricing, hotel info
    • Workshop — Hero, rich text overview, pricing, contact
    • Fundraiser — Hero, stats row, CTA banner, sponsors
    • Trade Show — Hero, sponsors grid, hotel blocks, contact
    • Blank — empty canvas, build from scratch
  3. Give the page a name and a URL slug. The slug is the path after your event URL — for example, /program or /sponsors.

After the page is created you land directly in the editor for that page.

AI first draft

On any new page, click Generate with AI before opening the editor. The AI reads your event data — title, description, sessions, speakers, sponsors, hotel blocks, and ticket tiers — and fills in a complete set of blocks with real content. You can edit everything after generation. This saves most of the initial copy work for standard event types.

Managing pages

  • Pages appear in the Website dashboard list. Toggle a page on or off to control whether it shows in your site navigation.
  • Disabled pages are not accessible to attendees and do not appear in the header nav.
  • The Home page is always the first item in your navigation. Other pages appear in the order they were created.
  • Delete a page permanently from the page row. This cannot be undone.

Per-page SEO

Each page has its own SEO settings — title, description, and social share image — which override the defaults that search engines and social networks pick up from your event data. To edit a page's SEO:

  1. In the Website dashboard, find the page row and click the SEO button.
  2. Set the SEO title, SEO description, and optionally an OG image URL (the image shown in link previews on social networks and messaging apps).
  3. Click Save.

If left blank, the page falls back to your event title and description for search engine and social previews.

The Editor

Clicking Edit page opens the Puck editor in a full-screen overlay.

  • Left sidebar — the block library. Click any block to add it to the bottom of the page, or drag it to a specific position.
  • Canvas — a live preview of your page. Click any block on the canvas to select it and see its settings in the right panel.
  • Right panel— appears when a block is selected. Edit that block's text, images, layout options, and other settings here.
  • Drag the handle on a block's left edge to reorder blocks on the canvas.
  • Click the trash icon on a selected block to remove it.
  • Section background — most blocks have a background color option in their settings panel: White, Light gray, Dark, or Accent. Use alternating backgrounds to visually separate sections without adding dividers.

Undo, redo, and viewport preview

  • Use the ↩ / ↪ buttons in the editor toolbar to undo or redo changes. Undo history is per editing session.
  • Use the viewport switcher (phone / tablet / desktop icons) to preview how your page renders at different screen widths without leaving the editor.

Draft and Publish

Changes in the editor are not immediately live. There are two states:

  • Draft — your working copy. The editor autosaves drafts every few seconds. You can also click Save draft manually. Drafts are not visible to attendees.
  • Published — the live version attendees see. Click Publish to push your current draft live. Publishing also saves the draft first automatically.

The status badge in the editor header shows Draft, Unsaved, or Published so you always know the current state of the page.

Publish history

Every time you click Publish, CompleteEvent saves a snapshot of that version. To view or restore a previous version:

  1. In the Website dashboard, click the History button on any page row.
  2. The history panel shows the last 10 published versions with timestamps.
  3. Click Restore on any version to load it as your current draft. It does not go live until you publish again.

Draft preview

To share a preview of your draft before publishing it:

  1. In the Website dashboard, click the Preview button on any page row.
  2. A preview URL is generated. Anyone with the link can see the current draft. The page shows a “Draft preview” banner at the top and is not indexed by search engines.
  3. The preview always reflects the latest saved draft, so you can share one link and update the draft as you work.

Available Blocks

Content blocks

  • Hero — full-width banner with headline, subheadline, CTA button, and optional background image. The image field has a focal point picker so you can control which part of the image stays visible on mobile. Add alt text for accessibility.
  • Rich Text — a free-text block that supports Markdown. Use for overviews, descriptions, or anything narrative.
  • Image + Text — image on one side, text on the other. Choose left or right image alignment.
  • Stats Row — a horizontal row of labeled numbers. Use for attendee counts, years of history, speakers, and similar figures.
  • CTA Banner — a full-width banner with headline and a single call to action button.
  • Video Embed — paste a YouTube or Vimeo URL. The video renders inline with an optional caption.
  • Image Gallery — a responsive photo grid. Add image URLs and optional captions. Good for showcasing past events or the venue.
  • FAQ — a collapsible question-and-answer list. Add as many entries as you need. Each entry expands on click. Good for pre-registration questions about parking, schedules, refunds, and similar topics.
  • Testimonials — 2–4 quote cards with name, optional role/org, and photo URL. Use for past attendee feedback or speaker endorsements.
  • Venue Map— auto-populates from your event's venue address with an embedded map preview and the address text. No configuration needed if you have a venue set on your event.
  • Divider — a horizontal separator. Useful for visual spacing between sections.

Data-driven blocks

These blocks pull live data from your event. They update automatically as you add sessions, speakers, sponsors, and other content in your event dashboard.

  • Program — your session schedule grouped by day. Pulls from published sessions. Add sessions under Program → Sessions first.
  • Speakers Grid — a photo grid of session presenters with name and title. Choose 2, 3, or 4 columns.
  • Pricing — your ticket tiers with name, description, and price. Includes a Register button linking to your event registration page.
  • Sponsors — sponsor logos and names from your Sponsors list.
  • Hotel — hotel blocks with name, group rate, cutoff date, and booking link. Add hotel blocks under Logistics → Hotel Blocks.
  • Committee — a list of organizing committee members with photo, name, role, and optional bio. Enter members directly in the block settings.
  • Countdown — a live countdown to your event start date. Disappears automatically when the event begins.
  • Contact — a contact section with email address and optional map embed URL.
  • Contact Form — a name/email/message form that sends submissions to your contact email. Set your contact email in Website → Settings → Footer → Contact email. Good for sponsor inquiries, speaker questions, or general attendee questions before registration opens.

Themes

Go to Website → Settings → Theme to choose a visual style for your site. Themes control font pairings, button and card corner radius, and the neutral color palette. They do not override your accent color — that stays as you set it.

Available themes:

  • Modern — clean sans-serif typefaces, rounded corners
  • Editorial — serif heading font paired with a neutral sans-serif body
  • Bold — high-contrast, heavier weight, sharper corners
  • Classic — traditional proportions, subtle borders
  • Minimal — maximum whitespace, thin typography

You can preview each theme in the editor before saving. Changing the theme applies to all pages on your site immediately.

Site Settings

Go to Website → Settings to configure the global appearance of your site. These settings apply to every page — they are not per-page.

Enabling the site

The Site enabledtoggle controls whether your site is publicly accessible. While disabled, your event's registration page still works — only the custom site pages are hidden. Turn the site on when you're ready for attendees to see it.

Branding

  • Site title — text shown in the header when no logo is set, and in the footer copyright line. Defaults to your event name if left blank.
  • Logo — upload a logo file directly using the Upload button, or paste a URL into the logo field. Accepted formats: JPEG, PNG, WebP, GIF. The logo appears in the header and footer. Recommended: PNG on a transparent background, at least 200 px tall. The footer automatically inverts the logo to white, so a dark logo on a transparent background works best.
  • Accent color — the primary color used across your site. It controls:
    • The header CTA button
    • CTA buttons in the Hero block and CTA Banner block
    • Other block-level accent elements
    Use the color picker or type a hex code directly (e.g., #e85d04). The value must be a valid hex color.
  • Header button label— the text on the registration call-to-action button in the header. Defaults to “Register Now”. Change it to match your event — for example, “Buy Tickets”, “Apply Now”, or “Join Us”.
  • Tagline — a short phrase shown in the hero area or used by blocks that display a site-level tagline.
  • Theme — see the Themes section above.

Header

The header is generated automatically from your Site Settings. You do not build it with blocks — it appears on every page of your site.

  • Logo or title — if you set a Logo URL, the logo image appears. If not, the Site Title text appears instead. Both link back to your home page.
  • Navigation links — one link per enabled page, in the order they appear in your pages list. The current page is highlighted.
  • Register Now button— always present. Links to your event's registration page. The button color is your accent color.
  • The header is sticky — it stays at the top of the screen as attendees scroll.
  • On mobile, the navigation links collapse into a menu. The Register Now button stays visible.

To change what appears in the header: update your Logo, Site Title, Accent Color, or Header button label in Website → Settings. To change the navigation order or labels, enable, disable, or rename pages in the Website dashboard.

Footer

The footer appears at the bottom of every page. Its background is always dark (#111 near black) with white text — it does not pick up your accent color.

  • Logo / title — same as the header. The logo is rendered in white (inverted). If there is no logo, the Site Title is shown.
  • Footer tagline — a short line of text under the logo. Set in Website → Settings → Footer → Footer tagline. Good for a mission statement or event description.
  • Contact email — set in Website → Settings → Footer → Contact email. Renders as a mailto: link in the footer.
  • Copyright line — auto-generated from the Site Title (or event name) and current year.
  • A Powered by CompleteEvent attribution link appears at the bottom of every footer.

Public URL

Your event site is accessible at:

https://completeevent.app/[org-slug]/[event-slug]

Each additional page lives at its slug:

https://completeevent.app/[org-slug]/[event-slug]/program

If you have a custom domain configured, the site is served from your domain instead. See the Custom Domain Setup article for details.

Tips

  • Data-driven blocks (Program, Speakers, Pricing, Sponsors) show placeholder content in the editor if your event has no data yet. Fill in your sessions, tiers, and sponsors first, then add those blocks.
  • Use the AI first draft on a template page, then edit the generated content rather than building from scratch. It saves the most time on the Hero copy and FAQ blocks.
  • The editor autosaves every few seconds. You can still use Save draft manually before closing the browser tab.
  • Disable a page instead of deleting it if you want to hide it temporarily — for example, while building out a Sponsors page before your sponsorship packages are finalized.
  • The accent color affects interactive elements across all your pages. Pick a color with enough contrast against white — a dark or saturated color works best for the Register Now button to be readable.
  • The footer logo is automatically inverted to white. Use a dark logo (black or dark colored) on a transparent background for the best result. A white logo will become invisible in the footer.
  • Use publish history to restore a previous version if an edit goes wrong. Publish a checkpoint version before making large structural changes.

Need more help?

Contact us at support@completeevent.app and we'll get back to you within one business day.

← Back to Help Center