Ihre Seite mit Custom CSS anpassen

Mit LanderLab gestalten Sie Quizze visuell. Wenn Sie mehr Kontrolle brauchen, können Sie Ihr Quiz mit Custom CSS über die eingebauten Einstellungen hinaus gestalten. Das ist nützlich, wenn Sie das Erscheinungsbild von Quiz-Elementen feinjustieren oder Stile anwenden möchten, die im Editor nicht verfügbar sind.

So funktioniert es

LanderLab bindet Ihr eigenes CSS in Ihren Ablauf ein. Ihr CSS wird automatisch auf den Wurzelcontainer .ll-quiz begrenzt, sodass die Stile nur Ihr Quiz betreffen und nie auf den Rest der Seite übergreifen.

Wo Sie CSS einfügen

Das Custom-CSS-Panel unter „Settings“ im LanderLab-Quiz-Editor

Öffnen Sie in Ihrem LanderLab-Editor Settings → Custom CSS und fügen Sie dort Ihre Regeln ein. Jeder Selektor, den Sie schreiben, liegt bereits innerhalb von .ll-quiz – Sie müssen nichts voranstellen.

Das Wurzelelement .ll-quiz selbst können Sie nicht gestalten (z. B. background, font-family). Diese Eigenschaften steuert die Theme-Engine. Sprechen Sie stattdessen die untergeordneten Elemente an.

Regeln zur Begrenzung

Ihr gesamtes CSS liegt innerhalb von .ll-quiz. Theme-Variablen (etwa --colorPrimary) sind schreibgeschützt – sie werden von der Theme-Engine gesetzt und lassen sich nicht überschreiben. Um das Aussehen zu ändern, schreiben Sie normale CSS-Regeln für die in diesem Leitfaden beschriebenen Selektoren. ✓ So geht es

.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}

✗ So nicht – Variablen sind schreibgeschützt

/* Das funktioniert NICHT */
.ll-quiz {
  --colorPrimary: #ff6600;
}

Selektor-Referenz

Nutzen Sie diese Selektoren, um die gewünschten Elemente anzusprechen. Alle liegen automatisch innerhalb von .ll-quiz.

Layout und Struktur

.ll-quiz-step Alle Schritte (sichtbar und ausgeblendet) .ll-quiz-step[data-active-step=“true”] Nur der aktuell sichtbare Schritt .ll-quiz-header Fixierter Kopfbereich .ll-quiz-footer Fixierter Fußbereich .ll-quiz-block Jeder Block, unabhängig vom Typ .ll-quiz-block—[type] Ein bestimmter Blocktyp (z. B. --text-field)

Eingabefelder

.ll-quiz-block__input Alle Texteingaben und Auswahlfelder .ll-quiz-block__input-wrapper Umschließendes div um Eingaben .ll-quiz-block__label Feldbeschriftungen .ll-quiz-block__decorator Präfix-/Suffix-Symbole oder -Texte

Schaltflächen

.ll-quiz-continue-button Continue-Schaltfläche .ll-quiz-previous-button Zurück-Schaltfläche .ll-quiz-submit-button Submit-Schaltfläche .ll-quiz-default-button Allgemeine Aktionsschaltfläche .ll-quiz-button-text Beschriftung innerhalb einer Schaltfläche .ll-quiz-button-description Unterzeile innerhalb einer Schaltfläche

Auswahl-Blöcke

.ll-choice-option Eine einzelne Multiple-Choice-Option .ll-choice-option:has(input:checked) Eine ausgewählte Option .ll-choice-option__text Textbeschriftung innerhalb einer Option .ll-img-choice-option Eine Karte der Bildauswahl .ll-img-choice-option:has(input:checked) Ausgewählte Bildauswahl-Karte .ll-choice-label Gruppenbeschriftung des Auswahl-Blocks

Fortschritt und Rückmeldung

.ll-quiz-progress__fill Der gefüllte Teil des Balkens .ll-quiz-header__progress-fill Füllung des Fortschrittsbalkens im Kopfbereich .ll-quiz-block—has-error Ein Block, dessen Validierung fehlgeschlagen ist .ll-quiz-block-error Der Text der Fehlermeldung .ll-quiz-variable Dynamische Variablen im Text (z. B. Vorname)

Eingabefelder

Alle Texteingaben, Auswahlfelder, Textareas und ähnliche Felder teilen dieselbe Klassenstruktur. Sprechen Sie .ll-quiz-block__input an, um sie alle auf einmal zu gestalten, oder grenzen Sie nach Blocktyp ein.

Alle Eingabefelder gestalten

CSS

.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

Einen bestimmten Block über die ID ansprechen

Die Block-ID finden Sie in der URL, wenn Sie einen Block in LanderLab bearbeiten (z. B. text-field-abc123).

#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}

Präfix-/Suffix-Decorators gestalten

.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}

Beschriftungen

.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}

Schaltflächen

Schaltflächen werden in LanderLab als <a>-Elemente gerendert, nicht als <button>. Nutzen Sie den passenden Selektor je Schaltflächentyp oder sprechen Sie alle auf einmal über eine gemeinsame Klasse an.

Continue-Schaltfläche

.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}

Zurück-Schaltfläche

.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}

Submit-Schaltfläche

.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}

Alle Schaltflächen auf einmal gestalten

.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Unterzeile der Schaltfläche (Beschreibung)

.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

Auswahl-Blöcke

Multiple-Choice- und Bildauswahl-Optionen lassen sich in ihrem Standard-, Hover- und Auswahlzustand gestalten.

Optionen gestalten

.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Ausgewählter Zustand */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}

Karten der Bildauswahl

.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}

Das Radio-/Checkbox-Symbol ausblenden

.ll-choice-option__custom-input {
  display: none;
}

Fortschrittsbalken

Es gibt zwei Positionen für Fortschrittsbalken – einen inline in den Schritten und einen im Kopfbereich. Gestalten Sie sie unabhängig voneinander oder gemeinsam.

Inline-Fortschrittsbalken

/* Spur */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Füllung */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}

Fortschrittsbalken im Kopfbereich

.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}

Responsives Design

LanderLab nutzt CSS-Container-Queries, keine Media-Queries. Verwenden Sie immer die unten gezeigte Container-Syntax – herkömmliche @media-Queries funktionieren innerhalb des Quiz-Containers nicht wie erwartet. Der Breakpoint liegt bei 490 px: Alles Breitere gilt als Desktop, alles Schmalere als Mobil. Syntax der Container-Query

/* Desktop (breiter als 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Mobil (490px und schmaler) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Einen Block auf Mobilgeräten ausblenden */
  #my-block-id {
    display: none;
  }
}

Keine @media-Queries verwenden Nutzen Sie @container quiz-container (...) statt @media (...). Das Quiz ist eine Container-Komponente, und Media-Queries spiegeln seine tatsächliche Breite nicht wider.

Zustände und Validierung

Schlägt die Validierung eines Feldes fehl, erhält es die Klasse .ll-quiz-block--has-error. Nutzen Sie sie, um Fehlerzustände passend zu Ihrem Design zu gestalten.

Gestaltung von Fehlern

/* Den Eingabe-Wrapper hervorheben */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Das Eingabefeld selbst gestalten */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Den Text der Fehlermeldung gestalten */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}

Dynamische Textvariablen

Textblöcke können Live-Variablen wie {{firstName}} enthalten, die sich während der Eingabe aktualisieren. Sie werden als .ll-quiz-variable-Spans gerendert.

.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}

Vollständige Beispiele

Fügen Sie eines dieser Beispiele in Ihr Custom-CSS-Panel ein, um schnell zu starten.

Beispiel 1 – Klares, minimalistisches Theme

/* Eingabefelder */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Continue-Schaltfläche */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Auswahloptionen */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}

Beispiel 2 – Rundes, farbenfrohes Theme

/* Eingabefelder */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Continue- und Submit-Schaltflächen */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Fortschritt */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ausgewählte Option */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}

Beispiel 3 – Mobile-First-Layout-Anpassungen

@container quiz-container (inline-size <= 490px) {
  /* Schaltflächen über die volle Breite auf Mobilgeräten */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Größere Tippflächen für Auswahloptionen */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Etwas größerer Eingabetext */
  .ll-quiz-block__input {
    font-size: 16px; /* verhindert das Zoomen unter iOS beim Fokussieren */
  }
}

Klassenliste der Blocktypen

Nutzen Sie diese Modifikatoren an .ll-quiz-block, um einzelne Blocktypen anzusprechen.

Modifikator-Klasse	Blocktyp
`.ll-quiz-block--text-field`	Texteingabe
`.ll-quiz-block--email-field`	E-Mail-Eingabe
`.ll-quiz-block--phone-number-field`	Telefoneingabe
`.ll-quiz-block--number-field`	Zahleneingabe
`.ll-quiz-block--textarea-field`	Textarea
`.ll-quiz-block--select-field`	Dropdown-Auswahl
`.ll-quiz-block--date-field`	Datumsauswahl
`.ll-quiz-block--checkbox-field`	Checkbox
`.ll-quiz-block--range-slider`	Range Slider
`.ll-quiz-block--multiple-choice`	Multiple Choice
`.ll-quiz-block--image-choice`	Bildauswahl
`.ll-quiz-block--continue`	Continue-Schaltfläche
`.ll-quiz-block--submit`	Submit-Schaltfläche
`.ll-quiz-block--headline`	Überschriftentext
`.ll-quiz-block--paragraph`	Absatztext
`.ll-quiz-block--progress`	Fortschrittsbalken
`.ll-quiz-block--accordion`	Accordion
`.ll-quiz-block--countdown`	Countdown-Timer

​So funktioniert es

​Wo Sie CSS einfügen

​Regeln zur Begrenzung

​Selektor-Referenz

​Layout und Struktur

​Eingabefelder

​Schaltflächen

​Auswahl-Blöcke

​Fortschritt und Rückmeldung

​Eingabefelder

​Alle Eingabefelder gestalten

​Einen bestimmten Block über die ID ansprechen

​Präfix-/Suffix-Decorators gestalten

​Beschriftungen

​Schaltflächen

​Continue-Schaltfläche

​Zurück-Schaltfläche

​Submit-Schaltfläche

​Alle Schaltflächen auf einmal gestalten

​Unterzeile der Schaltfläche (Beschreibung)

​Auswahl-Blöcke

​Optionen gestalten

​Karten der Bildauswahl

​Das Radio-/Checkbox-Symbol ausblenden

​Fortschrittsbalken

​Inline-Fortschrittsbalken

​Fortschrittsbalken im Kopfbereich

​Responsives Design

​Zustände und Validierung

​Gestaltung von Fehlern

​Dynamische Textvariablen

​Vollständige Beispiele

​Beispiel 1 – Klares, minimalistisches Theme

​Beispiel 2 – Rundes, farbenfrohes Theme

​Beispiel 3 – Mobile-First-Layout-Anpassungen

​Klassenliste der Blocktypen

So funktioniert es

Wo Sie CSS einfügen

Regeln zur Begrenzung

Selektor-Referenz

Layout und Struktur

Eingabefelder

Schaltflächen

Auswahl-Blöcke

Fortschritt und Rückmeldung

Eingabefelder

Alle Eingabefelder gestalten

Einen bestimmten Block über die ID ansprechen

Präfix-/Suffix-Decorators gestalten

Beschriftungen

Schaltflächen

Continue-Schaltfläche

Zurück-Schaltfläche

Submit-Schaltfläche

Alle Schaltflächen auf einmal gestalten

Unterzeile der Schaltfläche (Beschreibung)

Auswahl-Blöcke

Optionen gestalten

Karten der Bildauswahl

Das Radio-/Checkbox-Symbol ausblenden

Fortschrittsbalken

Inline-Fortschrittsbalken

Fortschrittsbalken im Kopfbereich

Responsives Design

Zustände und Validierung

Gestaltung von Fehlern

Dynamische Textvariablen

Vollständige Beispiele

Beispiel 1 – Klares, minimalistisches Theme

Beispiel 2 – Rundes, farbenfrohes Theme

Beispiel 3 – Mobile-First-Layout-Anpassungen

Klassenliste der Blocktypen