Layout aufbauen
Das Layout des TheOne-Elements ist ein verschachtelter Baum: Rows → Cols → Items.
| Ebene | Was es ist |
|---|---|
| Row | Äußere Reihe, enthält eine oder mehrere Spalten |
| Col | Responsive Spalte innerhalb einer Reihe |
| Item | Inhaltselement (Text, Bild, Überschrift, Button, …) |
Reihen und Spalten
- Klicke auf Reihe hinzufügen, um eine neue äußere Reihe anzulegen.
- Im Dialog Reihe hinzufügen wählst du die Spaltenanzahl (1–4). Jede Spalte erhält eine Standardbreite, die du anschließend pro Viewport (Mobil, Tablet, Desktop) anpassen kannst.
- Über Breakpoints synchronisieren überträgst du das Spaltenlayout eines Viewports auf alle anderen.
Inhalt einfügen
Klicke innerhalb einer Spalte auf Element hinzufügen und wähle den Inhaltstyp:
| Typ | Bezeichnung im Editor |
|---|---|
| Überschrift | Headline |
| Fließtext | Text Editor |
| Bild | Image |
| Link | Link |
Verschachtelung
Innerhalb einer Spalte kann eine innere Reihe eingefügt werden:
- Klicke auf Innere Reihe hinzufügen.
- Wähle 1 oder 2 Spalten für die innere Reihe.
- Maximale Verschachtelungstiefe: 2 Ebenen. Innere Reihen haben maximal 2 Spalten.
Knoten gestalten
Jede Row, Col und jedes Item trägt ein vollständiges Styling-Panel. Klicke auf einen Knoten und wechsle zum jeweiligen Tab:
| Tab | Optionen |
|---|---|
| Größen | Breite pro Viewport, Mindesthöhe (Desktop/Tablet/Mobil), maximale Höhe, maximale Breite |
| Abstände | Padding und Margin (je 4 Seiten, responsiv) |
| Farben | Textfarbe, Hintergrundfarbe, Rahmenfarbe, Rahmenbreite, Radius |
| Ausrichtungen | Flex-Ausrichtung horizontal und vertikal, responsiv |
| Masken | CSS clip-path: Kreis, Ellipse, Raute, Hexagon, Welle, Blob oder eigenes SVG |
| Attribute | Benutzerdefinierte Klassen (Bootstrap/Tailwind), Inline-CSS, beliebige HTML-Attribute |
Slider-Modus
Aktiviere Als Slider darstellen im Element-Header. Jede äußere Reihe wird zur Folie, gerendert von DmfSplideSlider. Im Tab Slider Einstellungen konfigurierst du:
| Einstellung | Beschreibung |
|---|---|
| Automatisches Sliden | Folien wechseln automatisch |
| Übergangsdauer | Dauer der Wechselanimation in Millisekunden |
| Anzeigedauer der Folien | Pausenzeit je Folie in Millisekunden |
| Endlosschleife | Unendlich durch die Slides scrollen |
| An den Anfang springen | Am Ende zur ersten Folie zurückspringen |
| Sichtbare Slides pro Gerät | Anzahl gleichzeitig sichtbarer Folien je Viewport |
Im Tab Navigation steuerst du Pfeile, Navigationspunkte, Drag-Unterstützung und die Anzahl der Slides pro Klick.
Voraussetzung
Der Slider-Modus erfordert ein aktives DmfSplideSlider-Plugin.