Enfold: Avia Layout Builder Einführung
Offizielle Enfold Dokumentation: https://kriesi.at/documentation/enfold/
Erweiterten Layout-Editor aktivieren
Der erweiterte Layout-Editor (Advanced Layout Builder, kurz ALB) ist ein visueller Editor, der mit dem Enfold-Theme mitgeliefert wird. Ähnlich wie beim hauseigenen Gutenberg-Editor von WordPress bietet er die Möglichkeit, vorgefertigte Elemente im Bearbeitungsmodus zu platzieren.
Beim Anlegen eines neuen Beitrags oder einer neuen Seite muss der Advanced Layout Editor zuerst aktiviert werden. Dies passiert über den entsprechenden Button am oberen Rand des Editors.
Layout Elemente
Mithilfe der Layout Elemente lassen sich Inhalt in Spalten und Zeilen anordnen. Auf diese Weise können sehr schnell variable Inhaltsbereiche angelegt werden.
Alle Spalten bieten verschiedene Einstellungsmöglichkeiten. Grundsätzlich sind die Einstellungen beim Hovern mit der Maus über das gewünschte Element in der linken oberen Ecke erreichbar (siehe Screenshot). Außerdem kann von hier aus schnell die Größe einer Spalte geändert werden. Das Duplizieren einer Spalte, das Speichern als Vorlage für die spätere Verwendung oder das Löschen ist von dort aus ebenfalls möglich.
Die verschiedenen Einstellungen einer Spalte sind jeweils mit kurzen Hilfetexten versehen. Im Regelfall handelt es sich dabei um Einstellungen bezüglich Layout (Höhe, Abstände, etc.) oder Stil (Hintergrundfarbe, -bilder, Animationen).
Alle Einstellungen, egal ob es sich um ein Layout-Element, ein Inhalts-Element oder um ein Medien-Element handelt, sind stets über diesen Menüpunkt am oberen Rand des Elements zu erreichen.
Farb-Sektion
Um Spalten mit Farben, Farbverläufen oder Hintergrundbildern auszustatten, eignet sich die Farb-Sektion. Diese Spalte erstreckt sich, im Gegensatz zu einfachen Sektionen, über die ganze Breite der Webseite. Sollte es auf der Seite bereits Farb-Sektionen geben, empfiehlt es sich für neue Abschnitte ebenfalls auf Farb-Sektionen zurückzugreifen, selbst wenn der Hintergrund keine spezielle Farbe besitzen soll. Dadurch werden bereits einige Darstellungsfehler vermieden.
Die Einstellungen der Farb-Sektion sind zum Großteil selbsterklärend. Erwähnenswert ist die Einstellung zum wählbaren Farbschema. Auf diese Weise können wechselnde Sektionen (beispielsweise Weiß - Grün - Weiß - Grün) schnell und konsistent angelegt werden, ohne für jede Farb-Sektion Hintergrund und Schriftfarben auswählen zu müssen. Dafür wird die erste Sektion mit der Einstellung "Main Content" angelegt, die nachfolgende mit "Alternate Content".
Das Farbschema wird in den Enfold-Einstellungen unter "Allgemeines Styling" definiert. Dabei werden Stile für Sektions-Hintergründe bereits vordefiniert und können in der Farb-Sektion ausgewählt werden. Während der Entwicklung Ihrer Webseite setzen wir die Farben in den Grundeinstellungen bereits dem Design entsprechend korrekt ein. Eine Änderung ist von Ihrer Seite somit nicht mehr nötig. Sollten Sie doch nach einiger Zeit Änderungen durchführen wollen, ändern Sie die Einstellungen bitte mit Bedacht und notieren Sie sich die vorhandenen Farbcodes.
Gitter-Reihe
Die Gitter-Reihe ermöglicht ein noch feineres Aufteilen des Inhalts in Spalten mit verschiedenen Größen. Die Zellengröße der Gitter-Reihe sowie die Anzahl der Zellen in ihr, lassen sich über die Einstellungen am unteren Rand festlegen. Allen nun vorhandenen Zellen der Gitter-Reihe können nun weitere Spalten hinzugefügt werden.
Tab-Sektion
Eine Tab-Sektion eignet sich sehr gut um Inhalte innerhalb von Tabs zu organisieren. Zu beachten ist, dass es sich bei der Tab-Sektion um ein Element handelt, das über die volle Breite der Webseite verläuft. Innerhalb eines Tabs können Spalten eingefügt und mit Inhaltselementen gefüllt werden. Die einzelnen Tabs können wahlweise mit einem Text oder einem Icon als Überschrift ausgestattet werden. Zudem lässt sich die Hintergrundfarbe individuell anpassen.
Bearbeiten von Inhalts-Elementen
Wie auch bereits die Layout-Elemente sind alle Inhalts-Elemente (egal von welchem Typ) über ihre Einstellungen konfigurierbar.
Einstellungen am Beispiel des Textblocks
Je nach Element stehen verschiedene Einstellungen zur Verfügung. Am Beispiel des Textblocks haben wir einen Inhaltsbereich, der einen vollständigen Texteditor und eine Vorschaufunktion bietet. Für den Inhaltsbereich ist außerdem die Schriftgröße separat wählbar. Die Einstellungen im Reiter "Farben" ermöglichen es den Text in einer eigenen Farbe darzustellen. Der Reiter "Anzeigeoptionen" behandelt für jedes Element die Darstellung auf mobilen Endgeräten.
Nachdem alle Einstellungen gesetzt sind, kann das Element gespeichert werden.
Wichtig: Damit die Änderungen auch auf der Webseite wirksam werden, muss ebenfalls die Seite gespeichert bzw. aktualisiert werden.
Einstellungen am Beispiel eines Bildes
Bilder sind das simpelste Element im Umgang mit Medien. Prinzipiell können Bilder über die Mediathek ausgewählt oder von den Elementeinstellungen aus hochgeladen werden.
Beim Einfügen des Bildes ist darauf zu achten, dass eine Bildgröße gewählt wird, die der relativen Elementgröße auf der Webseite entspricht. Sollte hier eine zu kleine Größe gewählt werden, wird das Bild unter Umständen stark verpixelt dargestellt.
Das Prinzip für die Auswahl eines oder mehrerer Bilder bleibt bei jedem im weiteren Verlauf erwähnten Medien-Element gleich. Bilder können aus der Mediathek ausgewählt oder direkt über die Einstellungen des Elementes hochgeladen werden. Letzteres fügt die Bilder im Anschluss automatisch der Mediathek hinzu. Sie sind danach also allerorts verfügbar. Sollen mehrere Bilder verwendet werden, beispielsweise in einem Slider-Element, können im "Bild einfügen"-Fenster einfach mehrere Bilder ausgewählt werden.
Elemente kopieren und als Vorlage einfügen
Alle Elemente und sogar ganze Sektionen können als Vorlage gespeichert und auf jeder beliebigen Seite wieder eingefügt werden. Diese Funktion ist äußerst nützlich, um ein Element nicht immer wieder konfigurieren zu müssen. Haben Sie beispielsweise eine Sektion mit einem Textblock, einem CTA-Button und einem Bild dazu, welches Sie nun ebenfalls auf einer anderen Unterseite nutzen möchten, können Sie eine Vorlage von der Sektion erstellen. Dazu hovern Sie über das gewünschte Element und wählen die Option "Element als Vorlage speichern".
Nachdem die Vorlage gespeichert wurde, kann sie über den Menüpunkt "Vorlagen" am oberen Ende des Inhaltsbereichs aufgerufen und ausgewählt werden. Nach dem Einfügen befindet sich das Vorlagen-Element am Ende der Seite und kann beliebig per Drag & Drop verschoben werden.
Alternativ zu einzelnen Elementen lässt sich auch der gesamte Seiteninhalt als Vorlage speichern und in eine andere Seite einfügen.
Portfolio-Einträge
Portfolio-Einträge ähneln einem regulären Beitrag, dienen aber eher, je nach Einzellfall, der Präsentation von Referenzen oder Produkten. Sollte Ihre Webseite über keine Portfolio-Einträge verfügen, ist es in Zukunft höchstwahrscheinlich auch nicht nötig welche anzulegen.
Megamenüs
Im Gegensatz zu einem Navigationsmenü, welches von Haus aus mit WordPress möglich ist, unterstützt das Enfold-Theme so genannte Megamenüs. Diese zeichnen sich durch die Darstellung mehrerer Menüpunkte aus, die innerhalb des Menüs in Sektionen eingeteilt sind.
Vorgehensweise zum Anlegen eines Megamenüs:
Gewünschten oberen Menüpunkt aufklappen und "Use as mega Menu" aktivieren.
Gewünschte Spalten per Drag & Drop eine Ebene nach rechts schieben.
Falls dieser Menüpunkt eine neue Reihe starten soll, die Option "This column should start a new row" aktivieren. Für einen leeren Titel kann ein "-" eingegeben werden.
Menüpunkte, die leer sein sollen oder nur als Titel fungieren sollen (für die also keine tatsächliche Seite existiert), müssen als individuelle Links hinzugefügt werden. Die URL kann hierbei einfach "#" lauten.
Verwandte Artikel