Allgemein

Nestbar ist ein bisschen lustig übersetzt. Tatsächlich würde “verschachtelt” besser passen.

Mit diesem Element kannst du deine Navigation bauen. Und zwar auch mit allen Elementen die Bricks und mögliche Erweiterungen mit sich bringen.

Es bringt jede Menge Einstellungsmöglichkeiten mit sich.
Angefangen vom HTML Tag und Aria-Label über Stil Einstellungen der Menü Punkte der obersten Ebene (Top Level), der Dropdowns für Menü Unterpunkte bis hin zum Aussehen und verhalten des mobilen Menüs.

Das Dropdown Element gehört quasi zum Navigations Element.
Es kann dort eingefügt werden um Sub-Menüs (auch mehrere Unterlevel) zu erstellen.

Neben den Linkoptionen (Linktext und Linkziel) kannst du hier das Icon, Caret, Stile des Inhaltes, Mega Menü und Mehrstufige Einstellungen individualisieren.

Offcanvas bedeutet etwa “Außerhalb der Leinwand”.
Es ist ein Element, das sich nach Klick auf z.B. einen Button (Toggle), vom Bildschirmrand einblenden lässt. Perfekt zum Erstellen von Mobilen Menüs beispielsweise.

Du kannst das Element bei stylen offen lassen um es im Editor zu sehen.
Du kannst aktivieren, dass sich die eigentliche Seite nicht mehr scrollen lässt und den Autofokus deaktivieren.

Des weiteren kannst du Höhe und Breite einstellen, sowie von wo und wie sich das Offcanvas einblenden soll.

Unterhalb des Elementes kannst du beliebige Elemente verschachteln um das Offcanvas so mit Leben zu füllen.

Das Toggle Element ist quasi der Schalter für das Offcanvas Element.
Du kannst hier eine Animation des Standard Icons wählen, oder ein anderes Icon festlegen.

Im mittleren Abschnitt gibst du durch Eingabe des CCS-Selektors an, welches Element du toggeln möchtest.

Im Abschnitt Balken, kannst du das Standard Icon noch nach deinen Wünschen anpassen.

Die Trennlinie ist ein visuelles Element zum trennen von beispielsweise Absätzen oder Sektionen.

Du kannst die Höhe, Breite, den Stil, die Richtung und Ausrichtung, sowie die Farbe definieren.

Auch kannst du der Trennlinie ein Icon, entweder am Anfang, in der Mitte oder am Ende hinzufügen.

Die Icon Box kombiniert ein Icon mit Text.
Du bist in der Gestaltung völlig frei.
Neben der Wahl ob das Icon vor dem Text oder über ihm angezeigt wird, hast du in den Reitern Icon und Inhalt alle möglichen Optionen zum Gestalten.
Unter Inhalt kannst du auch den gewünschten Text eingeben.

Mit der Icon Liste kannst du schöne Listen, versehen mit Icons, erstellen.
Neben der Auswahl des Icons je Listenpunkt, kannst du auch den zum Icon angezeigten Text frei vergeben (Etikett). Natürlich kannst du jedes Icon frei und individuell stylen.

Im unteren Bereich bestimmst du noch die Ausrichtung der gesamten Liste und die Abstände der einzelnen Listenpunkte.

Das Listen Element ist unglaublich anpassbar und eignet sich perfekt für Preislisten, Speisekarten etc.

Im oberen Bereich fügst du beliebig viele Listenpunkte hinzu.
Dabei kannst du jedem Listenpunkt ein eigenes Icon vergeben, den Titel, ein eventuelles Linkziel, Meta (wie zum Beispiel der Preis) und eine Beschreibung hinzufügen. Dann kannst du noch auswählen ob dieser Listenpunkt hervorgehoben werden soll.

Im unteren Bereich kannst du dann jeden Bereich deiner Liste beliebig stylen.

Das Akkordeon ist ein beliebtes Element für zum Beispiel häufig gestellte Fragen.
Zuerst definierst du die einzelnen Absätze deines Akkordeons. Dafür kannst du Titel, ID, Untertitel und Inhalt vergeben. 
Die ID dient dazu das du bestimmte Absätze des Akkordons durch einen Link beim Laden der Seite direkt öffnen lassen kannst.

Beispiel: https://beispiel.de/faq/#dritter-absatz
Hast du einem Abschnitt die ID dritter-absatz vergeben. Wird dieser direkt geöffnet wenn der Beispiel Link angeklickt wird.

Weiter kannst du festlegen ob das Akkordeon durch eine Abfrageschleife gefüllt werden soll, der erste Punkt beim Laden der Seite automatisch geöffnet wird, oder ob die einzelnen Abschitte unabhängig voneinander aufklappbar sind. Normalerweise schließt sich ein Absatz wenn ein andere ausgewählt wird, so dass immer nur ein Absatz geöffnet ist. Mit “Unabhängiger Toggle” verhinderst du dieses Verhalten.

Unter Titel und Inhalt kannst du beides unabhängig voneinander Stylen.

Das nestbare Akkordeon ist die erweiterte Version des normalen Akkordeons.

Hier kannst du (wie bei allen “nestbaren” Elementen) beliebige andere Elemente in den Titel und Inhaltsbereich einfügen und somit dein Akkordeon zu etwas ganz besonderem gestalten.

Das Tabs Element ist im Prinzip genauso zu erstellen wie das Akkordeon.

Neben der Darstellung auf der Webseite, gibt es nur zwei Unterschiede.
Es lässt sich nicht per Abfrageschleife befüllen und es gibt zusätzlich die Einstellung “Layout” und “Registerkarte öffnet auf”.

Unter Layout stellst du ein, ob die Tabs horizontal (über dem Inhalt9 oder vertikal (neben dem Inhalt) angezeigt werden sollen.

Im zweiten Punkt bestimmst du ob der Inhalt bei Klick auf einen Tab, oder gleich wenn die Maus drüber fährt, gewechselt werden soll.

Auch hier gilt wieder…das Element Tabs (Nestbar) verhält sich genauso wie das Tabs Element, mit dem Unterschied, dass wieder beliebe Elemente für den Titel und den Inhalt verwendet werden können.

Ein Formular Element darf natürlich nicht fehlen.
Es ersetzt in vielen Fällen ein eigenständiges Formular Plugin.

Zuerst fügst du die Formularfelder hinzu. Zur Auswahl stehen:

• Text
• Textbereich
• Tel (Telefonnummer)
• Nummer
• URL
• Checkbox
• Auswählen
• Radio
• Dateien
• Datumsauswahl
• Passwort
• Angemeldet bleiben
• HTML
• Verborgen (hidden field)

Darunter definierst du ob ein Sternchen für erforderliche Felder angezeigt werden soll, ob das Feld-Etikett (Label) angezeigt werden soll und wie Schrift der Platzhalter formatiert sein soll.

Die Formularfelder selbst haben jede Menge Konfigurationsmöglichkeiten.

Lege den Typ (siehe oben), den Text des Etikettes “Label” und den Standardwert des Feldes fest.
Danach kannst den Wert des Namens Attribute vergeben und festlegen ob das Feld in der Browser Autovervollständigung mit ausgefüllt werden soll oder der Browser die Eingabe der Rechtschreibprüfung unterziehen soll.

Du kannst eine Fehlermeldung vergeben, für erforderliche Felder die nicht ausgefüllt werden. Diese erscheint sofort beim Verlassen des leeren Feldes.

Zu guter Letzt lege die Feldbreite fest und ob das Feld erforderlich ist.

Ganz unten siehst du die automatisch generierte Feld ID. Diese kannst du auch ändern, sofern sie nur einmalig im Formular vergeben wird.

Nachfolgend hast du umfassende Möglichkeiten, das Aussehen deiner Felder festzulegen.

Auch den Senden Button kannst du nach deinen Wünschen gestalten. 

Im Feld Text, kannst du auch die Beschriftung des Buttons ändern.

Dem Formular muss natürlich auch beigebracht werden was es nach dem Klick auf Senden machen soll. Das kannst du hier im Bereich Aktionen.

Zur Auswahl stehen folgende Aktionen (Submit Actions):

• Benutzerdefiniert (erfordert Programmierkenntnisse)
• E-Mail
• Umleitung
• Mailchimp
• SendGrid
• Benutzer Login
• Benutzer Registrierung
• Passwort vergessen
• Passwort zurücksetzen

Du kannst die Aktionen auch kombinieren.

Lege unter Erfolgsmeldung den Text fest, der nach dem erfolgreichen Absenden des Formulares erscheinen soll.

Hast du in den Einstellungen ensprechende API-Schlüssel hinterlegt kannst du hier zum Spamschutz dann noch Google reCaptcha, Cloudflare Turnstile und oder hCaptcha Einstellungen vornehmen.

Beachte bitte die DSGVO.

Mit dem Karten Element kannst du eine Google Maps Karte einfügen. Hast du keinen Maps API Key in den Einstellungen festgelegt, wird die Karte über die Google Maps Embed API ausgeliefert.

Du kannst die anzuzeigende Adresse, die Höhe und das Zoom Level der Karte festlegen.

Zusätzlich kannst du den Kartentyp auswählen:

• Roadmap
• Satellit
• Hybrid
• Gelände

Beachte bitte die DSGVO.

Das Alarm Element gibt einen kleinen Kasten mit Text und bestimmer Hintergrundfarbe aus.

Du kannst den Typ (Farbschema) festlegen und ob man den Kasten schließen kann.

Dieses Element ist eine kleine optische Spielerei.
Mit dem Animierten Tippen kannst du einen Text “animiert Tippen lassen”.

Du kannst das gewünschte HTML Tag auswählen und einen Prefix und Suffix festlegen. Prefix ist ein statischer Text der vorangestellt wird und Suffix ein statischer Text der angehangen wird.

Unter Zeichen gibst du dann Zeichen oder Wörter ein die zwischen dem Prefix und Suffix wechseln animiert getippt werden.

In den Einstellungen gibt es diverse Möglichkeiten das Animationsverhalten anzupassen.

Wie der Name schon sagt, ein einfacher Countdown.

Gebe das Enddatum, die Zeitzone deiner Zielgruppe und was passieren soll wenn der Coundown abgelaufen ist, an.

Coundown lässt einfach den runtergelaufenen Countdown stehen, Verstecken versteckt ihn und benutzerdefinierter Text lässt dich einen selbst festgelegten Text ausgeben.

Mit hinzufügen der Felder bestimmst du welche Einheiten im Countdown ausgegeben werden sollen.

Danach kannst du wieder mit der Ausrichtung des Elementes das Aussehen bestimmen.

Der Zähler zählt animiert von “Zähle von” bis “Zähle bis” hoch.

Bestimme die Animationsdauer (wie lange soll das Hochzählen dauern).

Du kannst auch einen Prefix und Suffix Text festlegen und ob ein (wenn ja welches) Tausender- Trennzeichen ausgegeben werden soll.

Das Element Preistabellen ist ein sehr mächtiges Element und ermöglicht dir es vollumfängliche Preistabellen für deine angebotenen Leistungen auf deiner Webseite auszugeben.

Zusätzlich kannst du die geschnürten Pakete in zwei Tabs anzeigen lassen, zum Beispiel mit monatlicher und jährlicher Zahlweise, oder als Basis und Premium.

Jedes Feld und jede Angabe ist vollumfänglich im Aussehen konfigurierbar.

Die Fortschrittsbalken lassen dich visuell den Fortschritt von bestimmten Themen darstellen.

Definiere das Etikett (den Titel), den Fortschritt in Prozent und das ganze Aussehen der einzelnen Balken.

Das, recht einfache, Kreisdiagramm Element, lässt dich den anzuzeigenden Prozentsatz, die Größe des Diagrammes, Linienbreite, das aussehen der Linienenden und den Inhalt des Kreises (Prozentsatz, Icon oder Text) bestimmen.

Natürlich kannst du auch die Farben anpassen.

Leider ist das Kreisdiagramm, eines der wenigen Elemente, die sich nicht dynamisch “füttern” lassen.

Präsentiere schnell und einfach deine Teammitglieder.
Mit Bild, Titel, Untertitel und Beschreibung.

Passe Layout, Bild und Inhalt an.

Mit dem Testimonials Element können schnell und einfach Kundenstimmen zu deiner Dienstleitung oder deinen Produkten ausgegeben werden.

Pro Kundenstimme kannst du den Inhalt, den Namen des Kunden und ggf. seine Position, sowie ein Bild und einen Link hinzufügen.

Die Kundenstimmen werden als Slider / Karussell ausgegeben.

In den Einstellungen kannst du festlegen wie der Übergang animiert werden soll. Darüber hinaus, kannst du noch die Navigationspfeile einblenden und stylen.

Das Code Element ist multifnuktional.

Zum einen kannst du damit PHP, HTML, CSS oder JavaScript Code dargestellt auf der auf der Seite ausgeben. 

Unter Theme kannst du dazu auch bestimmen wie das ganze aussehen soll.

Zum anderen kannst du mit dem Code Element aber auch Code auf der Seite ausführen. Dazu gibt es den Schalter Code ausführen.

Beachte dazu auch die Einstellungen Benutzerdefinierter Code

Kleines Element mit großer Wirkung.

Du möchtest einen Bereich auf deiner Webseite mehrfach verwenden?
Gestalte den Bereich als Template und füge ihn mit dem Template überall ein, wo du ihn brauchst.

Änderst du das Template, wird es überall wo es eingefügt wurde, geändert.

Mit diesem Element kannst du einfach dein Logo, zum Beispiel in den Header, einfügen und verlinken.

Das Facebook Element bindet das Facebook Seiten Plugin ein.

Du kannst einstellen, welche Seite du einbinden möchtest, die Abmessungen, welche Tabs angezeigt werden sollen und was eingeblendet werden soll.

Bitte beachte die DSGVO.

Mit Hilfe diesen Elementes kannst du eine Brotkrümelnavigation in deine Seite einbauen.