Building your event page — block guide

This is a guide for building event pages in the editor. You build a page by dragging blocks from the left-hand panel onto the page, then adjusting their settings on the right.

For an overview of the editor itself, see How to use the new event site.

Blocks are grouped into four sets:

• Sections — the big pieces of an event page (header, video area, speakers, schedule, footer).
• Layout — containers that hold other blocks side by side or in columns.
• Text — headings and paragraphs.
• Elements — smaller pieces like buttons, images, tabs and dividers.

A few things that apply to every block

Visibility — show a block only in certain stages. Every block has a Visibility setting. You can show or hide it for each stage of the event — for example, hide the chat during registration, or show a “thank you” message only after the event. If a block looks missing, check its visibility for the current stage.

Page padding — line things up with the rest of the page. Most blocks automatically sit within the page’s content width (with comfortable side spacing). Layout blocks (Grid and Flex) have a Page padding switch: leave it on to line up with everything else, or turn it off to let the block stretch edge-to-edge across the screen.

Putting blocks inside other blocks. Layout blocks (Grid, Flex, Card) have a drop area inside them. Drag other blocks into that area to nest them.

Sections (connected to your event data)

Section blocks are pre-built and filled in automatically from your event’s data — you usually don’t type their content by hand. Change the data (event title, speakers, schedule, etc.) and these blocks update to match. This is the main difference from the building blocks (Layout / Text / Elements), which you fill in yourself.

• Header — automatically shows your event title (and logo). It’s also a proper page header (correct for accessibility and search engines).
• Speakers — shows the speakers you’ve added in the event’s speaker settings. Add or edit a speaker there and the block updates.
• Schedule — shows your event’s agenda / chapters from the schedule data.
• Footer — comes with default footer text already filled in, and is a proper page footer.
• Text content — a ready-made content block with a few built-in options (e.g. text next to an image). It’s a convenience: technically you could build the same thing yourself with a Grid or Flex plus Text and Image blocks if you want more control over the layout.

So: reach for Sections to surface event data quickly; reach for the building blocks below when you want to design something custom.

Layout

Grid

Arranges content in equal-width columns.

• Columns — add or remove columns; each column has its own drop area.
• Gap — space between columns.
• Stack on mobile — stack the columns on top of each other on phones.

Use it for things like two pieces of content side by side (e.g. agenda next to chat).

Flex

A flexible row or column of items that wrap onto the next line when they run out of room.

• Direction — lay items in a row or a column.
• Justify / Align — push items left/center/right and align them.
• Gap, Wrap, Stack on mobile.

Use it for a row of buttons or small items.

Card

A styled box you drop content into — with padding, rounded corners, a border and a background colour.

• Padding / Corner radius / Border / Background.
• Content direction / align / gap — arrange the things inside the card.

You can add headings, text, buttons, images and dividers inside a card.

Text

Heading

A single title line. Choose the level (H1–H6, which also sets the size) and the alignment.

Text

A block of text that supports basic Markdown formatting. Choose its alignment.

Rich text

A visual text editor — type and format directly (bold, lists, links) without Markdown.

Elements

Button

A clickable button that links somewhere (register, join, download, an external site).

• Label, Link URL, Open in new tab.
• Style (primary, outline, ghost, link, destructive), Size, Alignment.

Image

Pick an image to show.

• Image, Alt text (a short description for screen readers — leave empty if the image is purely decorative), Width.
• While editing, an empty image shows a placeholder box so you can still see and select it; it won’t show on the live page until you choose an image.

Separator

A thin dividing line between sections. Choose orientation (horizontal or vertical) and spacing around it.

Tabs

Group content into tabs the viewer can switch between.

• Add tabs, give each a label, and drop content into each tab’s area.
• Tip: while editing, click a tab’s label to open it, then drop content in.

Accordion

Collapsible sections the viewer can expand and close.

• Add sections, give each a title, and drop content into each.
• Open mode — allow only one open at a time, or several at once.
• While editing, all sections are shown open so you can fill them in.

Styling with custom CSS (advanced)

If you need finer control over appearance, the Custom CSS editor lets you style any block. Each block has a class name starting with es- (for example .es-card, .es-button, .es-grid). The CSS editor lists the available class names to target. This is optional — most styling is handled by the settings above.

---

Did we miss something? Just email our support team at support@videosync.fi ✌️