Home / Support / Building your Event Website / Website components explained
Building your Event Website

Website components explained

Last updated: July 2026 · ~8 min read
In short: Every page on your event website is built from components you drag in from the palette on the left of the editor. This guide explains what each component group does, then walks step-by-step through the three that need a little extra setup: Link Embed, HTML Inline, and a Ticket Tailor ticketing widget.

How components work

Open any page in the editor and you'll see the Components palette on the left, grouped into seven categories. To build a page you drag a component onto the canvas, then select it to open its settings in the right-hand panel, where you edit its content and style. The Outline (below the palette) lists everything currently on the page so you can jump to any block.

New to the editor? Start with Add & manage your event website pages for how to create a page and use the drag-and-drop builder.

Component groups at a glance

Here's every component, grouped exactly as it appears in the palette, with what each one is for.

Home / Landing

Big banner and page-framing blocks — usually the top of a landing page.

  • HeroSection — a full-width hero banner with a background image, event title, date, and a call-to-action button.
  • Hero Video — a hero banner that uses a video background or embedded video instead of a still image.
  • Hero Split Screen — a two-pane hero with your title and CTA on one side and an image on the other.
  • Contact Footer — a footer-style block with your contact details and links for the bottom of a page.

Venue Page

Blocks for presenting your venue and travel information.

  • Venue Block — a venue's name, address, image, and description in one card.
  • Split Venue Block — a two-column venue layout (details on one side, image/map on the other).
  • Hotel Partners — a grid of partner hotels for attendee accommodation.
  • Venue Directions — how-to-get-there and travel information for your venue.

Resource

Images, video, and downloadable files.

  • YouTube Video — embed a YouTube video by pasting its link.
  • Video Gallery — a gallery of several videos.
  • Image — a single image with alt text, size, fit, corner radius, and alignment.
  • Gallery — a grid gallery of multiple images.
  • PDF/Image Download — a downloadable file (e.g. programme, floor plan) attendees can save.

General Page

Everyday content: copy, tables, and FAQs.

  • Article — a rich-text block for headings, paragraphs, links, and formatting. Your main body-copy block.
  • Table — a structured data table.
  • FAQ Section — question-and-answer pairs shown in full.
  • FAQ Accordion — collapsible questions that expand when clicked.

Highlight

Event-specific, attention-grabbing blocks.

  • Organisation — feature an organisation, sponsor, or partner with logo and description.
  • Speaker Highlight — showcase a speaker (photo, name, title, bio).
  • Session Highlight — feature a session or agenda item.
  • Countdown Timer — a live countdown to your event (or a chosen date and time).
  • Progress Circle Stats — circular stat indicators (e.g. tickets sold, attendee numbers).
  • Registration CTA — a prominent call-to-action that drives attendees to register.

Content Block

The universal building blocks you'll use most — including the two advanced embeds covered below.

  • Heading — a section heading or title.
  • Text — a paragraph of text.
  • Button — a clickable button linking to a URL.
  • Divider — a horizontal line to separate sections.
  • Spacer — adjustable empty vertical space between blocks.
  • Link Embed — embeds another web page inside yours (an iframe). Setup below ↓
  • HTML Inline — paste your own raw HTML or embed code. Setup below ↓

Advanced Components

Richer, pre-built layouts.

  • Slider — a carousel of multiple slides (images or content).
  • Speaker Card — a single speaker card.
  • Speakers Section — a full speakers grid for many speakers at once.
  • About Section — a pre-styled "about the event" section (heading, text, media).
  • Two Column Content — a flexible two-column layout for arranging content side by side.
Tip: Not sure which block to use? Drop one in, select it, and check the settings on the right — you can always delete it if it's not what you needed. Nothing goes live until you Publish.

Link Embed embeds a whole other web page inside your page, using an iframe. Reach for it when you want to show live external content in place — a booking form, a Google Map, a survey, a scheduling page, or another site you control.

  1. Add the Link Embed block

    In the editor, open the Content Block group in the Components palette and drag Link Embed onto the canvas.

  2. Enter the Page URL

    Select the block and, in the right-hand settings, paste the full Page URL (starting with https://) of the page you want to embed.

  3. Set the size and style

    Give it an Accessible Title that describes the embedded page, then adjust Height (e.g. 800px or 100vh), Width, Border Radius, and whether to Show Border (and its colour).

    Page › Link Embed
    https://example.com/your-form
    Embedded page
    800px
    100%
    Medium
    YesNo

    The Link Embed settings panel: enter a URL, then size and style the frame.

  4. Save

    Click Save. The embedded page renders inline when you preview and publish.

example.com/your-form

On the published page, the external page appears inline — here, an embedded form.

If the embed shows up blank: some websites block being embedded in a frame (via X-Frame-Options or their content-security policy). That's set by the source site, not Eventira. If a page refuses to embed, link to it with a Button instead, or use HTML Inline with an official embed snippet the provider gives you (like the Ticket Tailor widget below).

Set up HTML Inline (custom code)

HTML Inline lets you paste your own raw HTML — including third-party embed snippets and scripts — straight onto the page. It's the right tool for widgets a provider gives you as a code snippet (ticketing, chat, forms, maps, custom markup).

  1. Add the HTML Inline block

    Open the Content Block group and drag HTML Inline onto the canvas.

  2. Open the HTML editor

    Select the block and click Edit HTML in the settings panel. A code editor opens.

  3. Paste your HTML and Apply

    Paste your HTML or embed code into the editor and click Apply. Then Save the page.

    </>  Edit HTML
    <div class="my-embed"> <!-- paste your embed code here --> </div>
    CancelApply

    The Edit HTML editor — paste code, then Apply.

Only paste code you trust. HTML Inline runs exactly what you give it, including scripts. Use snippets from official providers (your ticketing platform, analytics, etc.) and avoid pasting code from unknown sources.

Add a Ticket Tailor ticketing widget

There's no separate "Ticket Tailor" component — you add it as a Ticket Tailor embed snippet inside an HTML Inline block. This puts a live, inline ticket list (with a Buy Tickets action) right on your page.

  1. Copy your embed code from Ticket Tailor

    In your Ticket Tailor account, open your Box Office and find the widget / embed option for your event. Choose the Inline widget and copy the code it gives you. It looks like this (your box-office name replaces YOUR-BOX-OFFICE):

    <div class="tt-widget"> <div class="tt-widget-fallback"> <p><a href="https://www.tickettailor.com/all-tickets/YOUR-BOX-OFFICE/?ref=website_widget" target="_blank">Click here to buy tickets</a></p> </div> <script src="https://cdn.tickettailor.com/js/widgets/min/widget.js" data-url="https://www.tickettailor.com/all-tickets/YOUR-BOX-OFFICE/?ref=website_widget" data-type="inline" data-inline-minimal="true" data-inline-show-logo="false" data-inline-bg-fill="false" data-inline-ref="website_widget"></script> </div>

  2. Add an HTML Inline block in Eventira

    In your page editor, open the Content Block group and drag HTML Inline where you want the tickets to appear.

  3. Paste the snippet and Apply

    Click Edit HTML, paste the whole Ticket Tailor snippet (keep the <script> tag intact), and click Apply. In the editor the block shows a "Ticket Tailor Widget" placeholder — the live tickets render on the published page.

  4. Save and Publish

    Click Save, then Publish the site. Attendees now see the inline ticket list and can buy without leaving your page.

Buy tickets
General Admission
Full access · 3 days
€245
Buy
Student / Academic
Valid ID required
€95
Buy

On the published page, attendees see an inline ticket list and can buy without leaving your site.

What the options do: data-type="inline" lists the tickets on the page (rather than a pop-up button). data-inline-minimal, data-inline-show-logo, and data-inline-bg-fill control the widget's look. The fallback link inside tt-widget-fallback is what shows if scripts are blocked, so keep it.
Tip: To reuse the layout of your ticketing page later, Duplicate it from the Website pages list rather than rebuilding the embed from scratch.

Related articles

Was this article helpful?

Still need help? Reach our team and we'll get you sorted.

Contact support →