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 six sets:

• Page sections — the big pieces of an event page (header, presentation area, speakers, schedule, text section, footer).
• Templates — ready-made combinations of blocks (hero, call to action, card grid) that you edit like any other blocks.
• Layout — containers that hold other blocks: grid, flex and card.
• Text — headings and paragraphs.
• Content — smaller pieces like buttons, images, dividers, tabs and accordions.
• Presentation content — the pieces of the presentation area: video, slides, chat, countdown, hidden text and registration form.

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), Tabs and Accordion have a drop area inside them. Drag other blocks into that area to nest them. A block inside another block fills the space it is given and lines up with the blocks next to it; the spacing between them comes from the container’s Gap setting.

Page 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 / Content), 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 section — 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 Page sections to surface event data quickly; reach for the building blocks below when you want to design something custom.

Templates

Templates are ready-made combinations of blocks. When you drop one on the page it turns into ordinary blocks (a Grid or a Card with headings, text, images and buttons inside), so you can change, move or delete every part of it.

• Hero — a large page opener: a main heading, an introduction and a button on one side, an image on the other.
• Call to action — a centered card with a heading, a short text and a button.
• Card grid — three cards side by side, each with an image, a heading, a short text and a link. Good for a list of links or topics.

Remember to add a link to each button: a button without a link is not shown on the live page.

Layout

Grid

Arranges content in equal-width columns.

• Columns — add or remove columns; each column has its own drop area.
• Gap — space between columns, and between the blocks inside each column.
• Vertical align — place the content of each column at the top, middle or bottom of the row.
• 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 (up to Extra extra large for roomy bands) / 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.

Content

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.
• A button needs a Link URL to show on the live page. While editing, a button without a link has a small red i badge on its corner; hover it for a reminder.

Image

Pick an image to show.

• Image, Alt text (a short description for screen readers — leave empty if the image is purely decorative), Width.
• Shape — Wide (16:9), Square (1:1), Circle or Original. The first three crop the image to fit the shape (it is never stretched); Original keeps the image’s own proportions. Using the same shape for images side by side keeps them the same height.
• 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.

Divider

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.

Presentation content

These are the pieces of the presentation area — the part of the page with the video, slides and chat. They are already in place on a new page; the group is there so you can put one back if you remove it, or move it.

• Video, Slides, Chat, Countdown and Registration form (registration form only for events with registration).
• Hidden text — the text shown while the video is not playing. Its name follows the stage you are editing: Pre-live text, Paused text, Edit recording text (and the premiere texts for premieres). It is not offered when you edit the live or recording stage, where it never shows.

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 ✌️