Evenementen: Custom CSS met live elementselectie

Met de Custom CSS-editor in Voluit Suite style je je eventpagina’s met een live preview. Je klikt elementen in de preview aan om direct de juiste selector te pakken, gebruikt snelle stijl-presets voor veelvoorkomende aanpassingen en ziet wijzigingen meteen terug—zonder dat je de DOM hoeft te inspecteren.

Wat je leert

We hebben in Voluit Suite een Custom CSS-editor toegevoegd binnen Events. Daarmee pas je de styling van je openbare eventpagina’s aan vanuit Pages & Design → Custom CSS.

In dit artikel lees je:

wat de Custom CSS-editor is
welke functies erin zitten
hoe je elementen selecteert en CSS toevoegt
hoe de quick style presets werken
op welke openbare pagina’s de CSS wordt toegepast
hoe CSS wordt meegenomen bij dupliceren of kopiëren

Wat is de Custom CSS-editor?

De Custom CSS-editor is een live stylingtool in de Events-omgeving van Voluit Suite. Je schrijft en past custom CSS toe op je openbare eventpagina’s, zonder dat je de Pages & Design-omgeving hoeft te verlaten.

Eerder moest je vaak handmatig in je browser de HTML van een pagina inspecteren om de juiste CSS-selectors te vinden. De editor neemt dat werk grotendeels weg met klik-om-te-selecteren, een directe preview en vooraf ingevulde start-snippets voor veelvoorkomende aanpassingen.

De CSS die je toevoegt, wordt toegepast op je openbare eventpagina’s, waaronder:

Details
Schedule (Schema)
Checkout
Payment (Betaling)
Confirmation (Bevestiging)
Leave Checkout
Online Event

Belangrijkste functies

De Custom CSS-editor is gemaakt om het stylen van eventpagina’s makkelijker en sneller te maken.

Live CSS-editor — Voeg custom CSS toe met een directe preview van je wijzigingen.
Klik-om-te-selecteren — Klik een element in de preview aan om de CSS-selector te zien. Je kunt de selector kopiëren of meteen een starter-regel toevoegen.
Quick style presets — Genereer starter CSS voor veelgebruikte eigenschappen, zoals borders, achtergronden, tekstkleur, knoppen, border radius, spacing, schaduw en typografie.
Brede dekking — Custom CSS werkt op alle ondersteunde openbare eventpagina’s.
Ondersteuning voor kopiëren & dupliceren — Je custom CSS blijft bewaard als je een event dupliceert of instellingen kopieert.

Zo gebruik je de Custom CSS-editor

Volg de stappen hieronder om de Custom CSS-editor te openen en je eventpagina’s te stylen.

Stap 1: open de Custom CSS-editor

Open je event in Voluit Suite en ga naar Pages & Design → Custom CSS. Je ziet links het CSS-veld en rechts een live preview van je eventpagina.

Custom CSS editor interface showing the CSS input panel and live preview

Stap 2: selecteer een element

Klik een element in de preview aan. Je ziet dan een pop-up met de bijbehorende CSS-selector. Vanuit die pop-up kun je de selector kopiëren of een starter CSS-regel in de editor zetten.

Click-to-select interface showing an element's CSS selector with copy and insert options

Stap 3: schrijf of voeg CSS toe

Voeg je CSS-regels toe in de editor. Je kunt zelf CSS schrijven, of een quick style preset gebruiken om startcode te genereren voor een gekozen eigenschap. Je wijzigingen verschijnen direct in de preview.

Stap 4: preview en opslaan

Controleer je wijzigingen in de preview. Als het goed staat, sla je je custom CSS op. De styles worden daarna automatisch toegepast op de ondersteunde openbare eventpagina’s.

Tip

Met klik-om-te-selecteren vind je snel selectors voor complexere (geneste) elementen, zonder handmatig te hoeven inspecteren.

Quick style presets

Quick style presets maken het mogelijk om starter CSS te genereren voor veelvoorkomende styling, zonder dat je alles vanaf nul hoeft te schrijven. Nadat je een element hebt geselecteerd, kies je een preset om vooraf ingestelde CSS-regels toe te voegen.

Beschikbare presets:

Preset 1: Border — Pas border width, style en color aan voor het geselecteerde element.
Preset 2: Background — Verander de achtergrondkleur of voeg een achtergrondafbeelding toe.
Preset 3: Text Color — Pas de tekstkleur aan.
Preset 4: Button Color — Pas de achtergrond- en tekstkleur van knoppen aan.
Preset 5: Border Radius — Stel afronding van hoeken in.
Preset 6: Spacing — Pas padding en margin aan.
Preset 7: Shadow — Voeg een box shadow toe of pas die aan.
Preset 8: Typography — Pas font family, font size, weight en line-height aan.

Quick style presets menu showing options like border, background, text color, and typography

Pro tip

De presets zijn bedoeld als basis. Pas de waarden aan zodat ze aansluiten op je huisstijl.

Dekking van openbare pagina’s

Custom CSS wordt toegepast op de openbare eventpagina’s. Zo blijft je styling consistent voor deelnemers.

Ondersteunde paginatypes:

Details — De pagina met eventinformatie.
Schedule (Schema) — De pagina met planning en sessietijden.
Checkout — De pagina waar deelnemers zich inschrijven of tickets kopen.
Payment (Betaling) — De betaalpagina voor betaalde events.
Confirmation (Bevestiging) — De pagina na een succesvolle inschrijving of aankoop.
Leave Checkout — De pagina die verschijnt als iemand de checkout verlaat.
Online Event — De pagina voor online/virtuele events.

Custom CSS meenemen bij kopiëren en dupliceren

Als je een event dupliceert of instellingen van een ander event kopieert, wordt je custom CSS automatisch meegenomen. Zo kun je styling hergebruiken zonder de CSS opnieuw in te voeren.

Optie 1: een event dupliceren

Als je een event dupliceert, kopiëren we de custom CSS van het originele event mee naar het nieuwe event. Het gedupliceerde event start daardoor met dezelfde styling.

Optie 2: instellingen van een ander event kopiëren

Als je instellingen van het ene event naar het andere kopieert, nemen we de custom CSS ook mee. Daarmee kun je de design-instellingen van een bestaand event toepassen op een nieuw (of ander) event.

Tip

Na dupliceren of kopiëren kun je de custom CSS van het nieuwe event aanpassen, zonder dat dit het originele event verandert.

Veelgestelde vragen

V: Geldt custom CSS voor alle events in mijn account?

Antwoord: Nee. Custom CSS is per event. Elk event heeft eigen custom CSS-instellingen. Wil je dezelfde CSS op meerdere events gebruiken, dan kun je een event dupliceren of instellingen kopiëren.

V: Kan ik mijn wijzigingen previewen voordat ik opsla?

Antwoord: Ja. De editor heeft een live preview die direct bijwerkt terwijl je CSS schrijft. Zo zie je het effect voordat je opslaat.

V: Moet ik CSS kunnen om deze feature te gebruiken?

Antwoord: Basiskennis van CSS helpt, maar is niet verplicht. Met de quick style presets genereer je starter CSS. Je kunt ook elementen aanklikken om selectors te vinden en van daaruit verder aanpassen.

V: Wat als mijn custom CSS botst met de standaard styling van Voluit Suite?

Antwoord: Je custom CSS wordt toegepast ná de standaard styles. In veel gevallen overschrijven jouw regels de standaard. Werkt een style toch niet zoals verwacht, gebruik dan een specifiekere selector of voeg !important toe om de prioriteit te verhogen.

V: Kan ik custom CSS verwijderen of resetten?

Antwoord: Ja. Verwijder de CSS-code in de editor en sla op. Daarna vallen je eventpagina’s terug op de standaard styling.

V: Werken quick style presets voor alle elementen?

Antwoord: De presets genereren CSS op basis van het geselecteerde element. Sommige presets (zoals Typography) werken het best op tekst-elementen, terwijl bijvoorbeeld Border en Background meestal op de meeste container-elementen werken. Je kunt de gegenereerde CSS altijd aanpassen.

V: Heeft custom CSS ook effect op mobiele apparaten?

Antwoord: Ja. Custom CSS geldt voor alle schermformaten. Wil je mobiele styling apart regelen, gebruik dan media queries in je CSS (bijvoorbeeld @media (max-width: 768px) ).

V: Kan ik custom CSS delen tussen events zonder een event te dupliceren?

Antwoord: Custom CSS wordt automatisch meegenomen bij dupliceren of kopiëren van instellingen. Als je het handmatig wilt delen, kun je de CSS uit het ene event kopiëren en plakken in de Custom CSS-editor van een ander event.