New Semantics

Deutsch

English

Deutsch

English

Theme

Widgets platzieren und konfigurieren ​

Widgets in Columns einfuegen, Inhalte bearbeiten und mit Kopieren, Einfuegen, Duplizieren und Drag umsortieren.

Voraussetzung: Du hast eine Seite im Pagebuilder offen, die mindestens eine Row und eine Column enthaelt. Falls nicht, starte mit Erste Seite anlegen.

Widget hinzufuegen ​

In jeder Column klickst du auf das +-Icon, um den Widget-Picker zu oeffnen. Waehl ein Widget aus einer der Kategorien:

  • Text — Text, Ueberschrift, Rich Text, Zitat.
  • Medien — Bild, Galerie, Video, Slider.
  • Struktur — Accordion, Tabs, Columns, Trenner.
  • Formulare — Kontaktformular, Newsletter-Anmeldung.
  • Commerce — Produktliste, Produktdetail, Warenkorb, Checkout, Suchleiste.
  • E-Learning — Kursliste, Kursdetail.
  • Integration — Blog-Vorschau, A/B-Test-Gate.

Der Picker hat eine Suche — tipp einen Begriff, um quer ueber alle Kategorien zu filtern.

Widget-Picker mit Suchbegriff im Filter
Die Suche filtert Widgets ueber alle Kategorien hinweg.

Widget-Inhalt bearbeiten ​

Sobald du ein Widget im Struktur-Baum oder in der Live-Vorschau anklickst, oeffnen sich seine Einstellungen im rechten Properties-Panel.

Properties-Panel mit Einstellungen- und Animationen-Tabs
Das Properties-Panel hat die Tabs Einstellungen und Animationen.

Jedes Widget hat eigene Felder:

  • Textfelder — einzeilig oder mehrzeilig fuer Titel und Untertitel.
  • Rich Text (CKEditor) — formatierter Text mit Ueberschriften, Listen, Links.
  • Bild- / Medienfeld — oeffnet den Media Manager beim Anklicken.
  • Select — Dropdown-Optionen (z.B. Kategorie oder Layout-Variante).
  • Items (Repeater) — Liste von Unter-Eintraegen (z.B. Accordion-Panels, Slider-Slides).
  • Custom CSS — CodeMirror-Editor mit Syntax-Highlighting (nur fuer Erfahrene).

Nach jeder Aenderung klickst du im Properties-Panel oben auf Speichern. Ungespeicherte Aenderungen werden mit einem Punkt am Tab-Titel markiert.

Ungespeicherte Aenderungen gehen verloren

Wenn du zu einem anderen Widget wechselst, ohne zu speichern, gehen deine Aenderungen verloren. Wenn der Tab einen Punkt zeigt, speichere zuerst.

Widgets umsortieren ​

Du hast zwei Optionen:

  • Drag im Struktur-Baum: Pack eine Widget-Zeile und lass sie an der neuen Position fallen. Du kannst sie innerhalb derselben Column, in eine andere Column oder in eine andere Row verschieben.
  • Hoch-/Runter-Icons auf der Widget-Karte — fuer kleine Verschiebungen innerhalb derselben Column.
Struktur-Baum mit einem Widget, das an eine neue Position gezogen wird
Zieh eine Widget-Zeile, um sie irgendwohin im Baum zu verschieben.

Duplizieren, Kopieren, Einfuegen, Loeschen ​

Rechtsklick auf ein Widget im Struktur-Baum oeffnet das Kontextmenue. Verfuegbare Aktionen:

  • Duplizieren — klont das Widget mit allen Einstellungen und Items an Ort und Stelle.
  • Kopieren — legt das Widget in die Zwischenablage (ueber Seiten hinweg).
  • Einfuegen — fuegt ein zuvor kopiertes Widget oder eine Column ein.
  • Löschen — entfernt das Widget. Ein Bestaetigungsdialog fragt einmal nach.

Die Zwischenablage ueberlebt Seitenwechsel — Widget auf Seite A kopieren, zu Seite B navigieren, dort einfuegen.

Tastaturkuerzel

Widget auswaehlen und Strg+C / Cmd+C zum Kopieren, Strg+V / Cmd+V zum Einfuegen. Strg+Z / Cmd+Z macht die letzte Aktion rueckgaengig.

Sichtbarkeit pro Breakpoint steuern ​

Im Widget-Einstellungen-Tab klappst du den Abschnitt Sichtbarkeit auf. Haek Desktop, Laptop, Tablet, Mobile ab oder weg, um das Widget auf bestimmten Bildschirmgroessen zu verbergen.

Verborgene Widgets bleiben im Struktur-Baum (mit durchgestrichenem Augen-Icon), werden aber auf der Live-Seite bei diesem Breakpoint nicht gerendert.

Widget-Items hinzufuegen (Repeater-Felder) ​

Manche Widgets haben eine Items-Liste — z.B. Accordion-Panels, Slider-Slides, Feature-List-Eintraege.

Klick unten in der Items-Liste auf Eintrag hinzufügen. Ein neuer leerer Eintrag erscheint. Fuell die Felder aus und klick auf Speichern.

Items lassen sich mit Drag-Handles umsortieren und ueber das Kontextmenue duplizieren.

Accordion-Widget mit 3 Panel-Items unten aufgelistet
Repeater-Items stapeln sich unter den Widget-Einstellungen.

Custom CSS pro Widget ​

Jedes Widget hat ein Custom CSS-Feld. Nutz CSS Nesting, um Kind-Elemente zu stylen:

css
.widget_123 {
  background: var(--color-primary);
  padding: 2rem;

  h3 {
    color: white;
  }
}

Die Wrapper-Klasse .widget_{id} wird automatisch gesetzt. Wenn du einen bestehenden minifizierten CSS-Wert laedst, wird er im Editor zur Lesbarkeit automatisch formatiert.

Fortgeschrittenes Feature

Custom CSS kann Layouts brechen, wenn unachtsam eingesetzt. Wenn du mit CSS nicht vertraut bist, lass das Feld leer und nutz die Spacing-, Flex- und Animations-Steuerung.

Siehe auch ​