The Eventure Website Builder

The website builder turns an organization on Eventure into a real public website: its own address, its own look, its own pages. Not a profile page inside Eventure. An actual website, of the kind you would otherwise pay an agency to make.

This manual is for the person who builds those sites. It assumes you have never opened the builder before. It does not assume you can write code, and it will never ask you to.

You will find the builder on an organization at Website Builder. Everything in this manual happens on that one screen.

Before any control makes sense, this does. Every website the builder makes has exactly three parts.

The header is drawn at the top of every single page. The footer is drawn at the bottom of every single page. You build each of them once, and they follow the visitor everywhere.

Between them sits the part that changes. On the front door, that is the homepage. Everywhere else, it is a page. And whichever it is, it is built the same way: out of sections, stacked one under another, top to bottom, in the order you put them.

A section is a horizontal band across the page: a hero, a photo gallery, a list of events, a contact form. You pick which ones, you drag them into order, you fill in their settings. That is the whole job.

Read this before you touch anything. It is the difference between experimenting freely and being afraid of the tool.

An organization can hold several versions of its website. These are called variants. Exactly one of them is live - the one the public sees. The rest are drafts, visible only to you.

When you edit a draft, nothing you do reaches the public. You can delete every section, choose colors that clash, and reorder the whole site. The live website carries on unchanged. It only changes when you deliberately activate a draft, which swaps it into place.

This is also why the builder can save automatically without it being reckless. It is saving your draft.

Every one of the automatic builders in chapter 13 obeys this rule. They all produce a draft and hand it to you to review. None of them can overwrite a live site behind your back.

The tabs are already in the right order. Study them left to right. That is not a coincidence, and the reasons are worth knowing, because they are also the reasons a site goes wrong when you work out of order.

1. Appearance first, because it sets rules the other five inherit. Your colors, your fonts, your corner roundness. Choose them here and every section obeys them automatically. Skip this and you will hand-tune forty sections that could have followed one setting.
2. Header and Footer next, because they are the frame drawn on every page. They are also finite: build each once and you are done with it for the whole site.
3. Homepage third, because it is where you learn sections. Everything you learn here works identically on pages, so learn it once on the page that matters most.
4. Pages fourth, because it is the same skill again, applied more times.
5. Menu last, and this one is not a preference. The menu links to pages. If the pages do not exist yet, there is nothing to link to. Build the rooms, then hang the signs.

If you only have an hour, spend it on Appearance and Homepage. Those two carry most of what a visitor actually experiences.

The preview is a map, not a picture

The large preview on the right is not just a rendering to admire. It is the fastest way to reach a control: click anything in it and the panel on the left jumps straight to the form that owns it. The right tab opens, the matching row expands, and the exact field flashes so you cannot miss it. Once you know this, you stop scrolling the left panel hunting for the right accordion and just point at the thing on the page instead.

Nearly every part of the page answers a click:

• A section - opens that section's form on the Homepage or Pages tab.
• A single item inside a section - one gallery photo, one menu entry, one pricing card - opens the section and highlights that item's row, not just the section as a whole.
• The header, the brand or logo, and the menu - each lands on its own tab and setting.
• A section's background - opens that section's background editor.
• The footer and its individual blocks - opening hours, social links, the newsletter box, the copyright line - each jumps to the setting that controls it.

To make it obvious what a click will do, the preview draws a dashed outline as you work, in two colors:

• Green is a light touch: the block you are hovering, or the row your cursor is over in the left panel. It says "this is what a click would affect".
• Red is where your edits land right now: the section whose form is currently open. It has a gentle pulse so your eye keeps finding it.

You can have more than one section's form open at a time, and the red outline always follows the one you are actually working in - the section you last clicked in the preview, or the form you last clicked into to type. So if two forms are open and the red outline looks like it is on the wrong block, click the block you mean (or click into its form) and it moves there at once.

Hovering a block also shows a small label naming what a click will open, so you can check before you commit to it. Everything here works the same in the community builder.

The look and feel of the whole site. Nothing here belongs to a single page. Every setting on this tab is a rule that every page, every section and both frame pieces will follow unless something overrides it locally.

This is the highest-leverage tab in the builder. A good ten minutes here saves an hour of fiddling later.

The cards on this tab

Each card holds one family of settings. Hover a card to reveal its own Reset button, which undoes that card alone and leaves the rest of your work untouched.

Live or Coming Soon

The single most consequential switch in the builder sits in the General card. Coming Soon shows visitors a holding page instead of your site. Live opens it to the world. A half-built site should sit on Coming Soon; there is no prize for publishing early.

Your two colors

You choose a primary and a secondary color, and the entire site is built from them. Buttons, links, section backgrounds set to Primary, divider fills, hover states: all of them read these two values. Change the primary color and the whole site shifts at once. This is why choosing them properly here beats choosing them forty times later.

Design themes

A design theme is a whole-site personality. It sets the spacing rhythm and, more importantly, changes the default layout each kind of section reaches for. The same content under a different theme genuinely looks like a different website.

Style presets

Where a design theme sets rhythm and layout, a style sets palette, fonts and chrome together as one coordinated choice. They are offered while building a new site and are the fastest way to a look that does not feel accidental.

Fonts, layout and type

The Fonts card assigns typefaces by role: headings, body, the brand name, the menu, the tagline. Roles, not places. Set the heading font once and every heading on the site follows.

The Layout and Type card holds the quiet controls with the loudest effect: corner roundness, card shadow depth, button weight, whether buttons shout in capitals, base text size, how much heading sizes escalate, how much air sits between sections, and default text alignment. If a site feels wrong but you cannot name why, the answer is usually on this card.

Section Animations

The Section Animations card sets the default entrance animation - how sections ease into view as a visitor scrolls down the page. It is the site-wide answer; a section can still override it individually (see Entrance animation in the shared controls).

The default is set per scope, because a home page and an inner page want different pacing. On an organization site you get two rows: Homepage sections and Other pages. On a community landing there is a single Landing sections row. Each row offers the same choices - None, Fade, Fade up, Zoom in, Slide left, Slide right - plus a Delay slider that holds the motion back a beat so sections do not all fire at once.

Every section left on Inherit follows the row for its scope. Change the row and the whole scope re-animates at once. This is the point of it: you tune the feel of the site from one place instead of section by section.

Two extras deserve care. The Random choice is live: sections set to it re-roll a different animation on every page load, so the site never arrives the same way twice. The Randomize button is different - it is a one-off. It bakes a fixed, different animation onto every section in the scope right now, so each section moves its own way but always the same way. Baking makes the scope Custom: the card lights up a Custom marker to tell you the sections no longer follow a single choice. Picking any card again re-applies it to the whole scope and clears Custom - the general choice always wins.

Both of the random paths let you narrow the deck. Choosing Random reveals a short list of switches below the cards - the pool the live re-roll draws from. Leave them all on for the full set, or turn some off to keep, say, only the two fades in rotation. The Randomize button opens the same kind of chooser before it bakes, so a one-off shuffle can be limited to the animations you actually want. On Other pages that chooser also lists your pages, so you can shuffle just the ones you name; and a single section's Apply to all pages button lets you tick which pages receive its animation. Both offer quick Select all / none / invert links.

The bar at the very top of every page. Your logo, your navigation, your buttons. It is the most-seen part of the entire website, so it is worth more than the two minutes people usually give it.

Strips and zones

A header is made of strips stacked on top of each other, up to six. Most sites need one. A site with an announcement bar above a normal header needs two.

Each strip has three zones: left, center and right. You drop components into zones. That is the entire model, and it is why headers you have seen everywhere on the web can all be described by it: logo left, menu right, is simply two components in two zones.

Start from a template

Rather than assemble a header component by component, start from one of the eight templates and adjust. Each is a known-good arrangement, and they are grouped by how much they carry: simple headers are one clean row, top bar headers add a strip above, and rich headers carry search and cart.

The components

These are the pieces you can place in a zone, grouped by what they are for. You do not need most of them. A logo, a menu and one button is a complete, professional header.

Brand

Menu

Action

Account

Contact

Marketing

Info chips

Utility

Overlay: the effect worth understanding

Overlay makes the header float transparently over your hero image, gaining a solid background only once the visitor scrolls. It looks expensive and costs nothing. It has exactly one requirement: a hero with a background image dark enough, or light enough, for your header text to read against. That is what the overlay text setting is for, and getting it wrong is the most common way a beautiful header becomes invisible.

The hover tint gently colors the header band when the mouse is over it. Small, and rather nice.

The front door. This tab is a single vertical stack of sections, in the exact order a visitor will scroll through them. What you see in this list, top to bottom, is what they get, top to bottom.

The four things you do here

• Add a section, from the picker described in chapter 12.
• Reorder by dragging. The list is the page.
• Hide without deleting, which is how you park a section you are unsure about.
• Open a section to configure it: its own content, its layout, and the shared knobs from chapter 11.

A rhythm that works

Sections are not equal citizens. A page that is all cards is exhausting; a page that alternates a wide visual band with a tighter grid gives the eye somewhere to rest. The reliable shape is: open strong, prove yourself, show the work, ask once.

Everything that is not the front door. This is also the tab where the single most common confusion lives, so we will deal with that first.

Two kinds of page

When you create a page you choose how it is built, and this decides which editor you get.

Choose simple for pages that are mostly words: terms, privacy, a long story. Choose section-built for pages that need to look designed: a landing page, a services page. When unsure, choose simple. Prose does not benefit from being chopped into bands.

Layout

Layout controls the page's chrome and width.

Nesting

A page can sit under a parent, one level deep. This groups related pages under one menu entry rather than spilling ten items across your header.

Starter pages

Rather than start from nothing, add one of the ready-made pages and edit it. Each arrives with sections already chosen and placeholder text written for the purpose.

The signposts. This tab decides what appears in your header navigation and in what order.

Build this last. The menu points at pages, so the pages have to exist first. Working the other way round means pointing at rooms you have not built.

What you can point at

• Your pages, the ones from the Pages tab.
• Built-in routes: your events listing, your shop, your blog. These are real working pages Eventure provides for you. You never build them, you simply decide whether to link to them.
• Any address, including somewhere off your site entirely.

The bar at the bottom of every page. Visitors who reach it are looking for something specific: your address, your hours, your terms, a way to get in touch. The footer is a directory, not a design showcase.

Columns you switch on

The footer is assembled from toggles. Switch on a newsletter box, your contact details, opening hours, upcoming events, recent news, social links, a sitemap, legal links, an about paragraph, a back-to-top button. Each is a column that appears when you enable it.

Colors

The footer gets its own background, heading, link, hover, border and text colors, independent of the rest of the site. This is deliberate: a dark footer under a light site is a classic, and it needs its own palette to be legible.

These controls appear on every section in the catalog. They are explained here once, in full, so the catalog can stay about what each section is for.

Reach for these when a section is right but does not sit right.

Background

The background is the single biggest lever on how a section feels, and it is how you build rhythm down a page. Alternating light and dark bands is what stops a long page from reading as one undifferentiated wall.

Light, Dark, Primary and Secondary are solid fills, the last two drawn from your brand colors in Appearance. Gradient, Mesh and Image are richer, and each unlocks its own set of variations.

Image backgrounds and overlays

An image background almost always needs an overlay: a wash of darkness, lightness or brand color laid between the photo and the text. Without one, your text sits on whatever the photo happens to be doing at that spot, and photos are rarely uniform. If text over an image is hard to read, the overlay is your fix, not a different font color.

OverlaysNone Darken Lighten Tint Primary Tint Secondary

Entrance animation

Every section can ease into view as the visitor scrolls down to it, instead of simply being there. The choices are Fade, Fade up, Zoom in, Slide left and Slide right - or None, which is a deliberate stillness, not a missing setting. A Delay holds the motion back a beat, useful when you want one section to settle before the next begins.

Two choices are special. Inherit - the default for a new section - means the section follows the site-wide default set on the Appearance tab (see Appearance), so you tune the whole site from one place. Random is live: the section re-rolls a different animation on every page load, so the page never arrives the same way twice.

Keep it subtle. A single gentle motion reads as polished; a different animation on every section reads as busy. When in doubt, leave sections on Inherit and set the tone once for the whole site.

Animation

Animation is seasoning. Ken Burns on a hero is lovely. Ken Burns on six sections is a fairground.

Dividers

A divider is a shaped edge between one section and the next: a wave, a slant, a curve instead of a straight line. There are twenty-eight shapes. The fill decides which color the shape is drawn in, so it can carry the color of the section it points into.

The 28 divider shapesNone Wave Slant Curve Triangle Arrow Zigzag Mountains Clouds Right Wave Left Wave Rounded Waves Dunes Liquid Tilt Ellipse Semi Ellipse Inverted Ellipse Peaks Layered Ellipse Hills Grass Flames Petals Canopy Blob Swell Custom

Divider fillPrimary Secondary Light Dark White

Use one shape family across a site. A wave here and a zigzag there reads as indecision.

Delimiters

A delimiter is the small flourish under a section heading: a short bar, a line, a row of dots. Tiny, and one of the cheapest ways to make a site look considered rather than assembled.

Delimiter stylesNone Bar Line Double Dashed Dotted Gradient Dots

Width and spacing

Two controls decide how much room a section takes.

Section Width is either Full Width, where the content runs edge to edge, or Contained, where it sits inside the same centered column as the rest of the site. Backgrounds always span the full width either way; this only moves the content on top of them. Full width suits heroes, images and maps. Contained suits anything with a line of text in it, because text that runs the whole width of a monitor is genuinely hard to read.

Vertical Spacing is the air above and below the section. Left on Default it inherits the rhythm set by your design theme, which is what you want almost always: it is what keeps the page feeling like one page. Override it when a specific section needs to breathe more, or when two sections belong tight together. You can set both sides at once, or split them and set the top and bottom independently.

Every section you can add, grouped by the job it does. Each entry says what it puts on the page, when it earns its place, and which layouts it offers. The little diagram shows the shape it takes.

Two things are true of all of them, so they are not repeated below: every section carries the shared knobs from chapter 11, and any section can be hidden without being deleted.

Six more, if you are building a community

Six further sections exist only in the community builder: organizations, a map of them, a shared calendar, discussions, giveaways, and other communities to discover. You will not see them in the picker on an organization site. They are covered in the appendix, chapter 15.

You do not have to start from an empty page. Three tools will build a whole site for you, and then hand it over as a draft for you to review and adjust.

They differ only in how much they ask you first.

One-Click Page

Asks nothing. It builds a five-section one-page site from what your organization already has: your logo, your story, your cover photo. It needs those three things, and if any are missing it collects them in the dialog before building.

The result is always the same shape: a hero, an about section, two sections chosen from whatever you actually have content for, and a contact section. Same organization, same page, every time.

Site Wizard

Asks seven short questions: structure, look, style, fonts, header, footer, and a review of what it is about to do. It is the middle path, and the one to reach for most of the time.

Guided Setup

Asks about your organization in plain language rather than about design, and infers the site from your answers. Good for someone who knows their organization but not what a hero section is.

Site structures

Wizard and Guided Setup both start by choosing how big the site is.

The same control, named in both languages, so an English-configured builder and a Slovenian one can be discussed in the same conversation.

Communities have a builder of their own, and it is the same tool wearing a slightly different hat. If you have read this manual, you can already use it. This appendix covers only what differs.

What is the same

Nearly everything. The Appearance tab, the Header, the Menu, the Footer, the sections, the shared knobs, drafts and activation, the launchers: identical. Chapters 1 to 7 and 9 to 14 describe the community builder as accurately as they describe the organization one.

The section catalog in chapter 12 applies in full. A community builder is offered every one of those 39 sections, plus six more of its own, covered below.

What is different

Two things, and only two.

Six sections you will not see on an organization site

These exist only in the community builder, because they describe things only a community has: member organizations, a shared calendar, a shared conversation. They behave like every other section, including the shared knobs from chapter 11.