Der Avada Layout Builder
Seit der Version 7.2 des Avada Themes ist es möglich, das Design einer Webseite komplett selbst zu gestalten – Also einen eigenen Header, eigene Inhaltbereiche oder einen eigenen Footer zu erstellen. Mit dem Avada Layout Builder kannst Du anhand von angepassten Sektionen den Header, die Page Titel Bar, den Content und den Footer nach Deinen eigenen Vorstellungen aufbauen und gestalten. Damit hat der Begriff und die praktische Umsetzung des Full Site Editing, kurz FSE, bereits seit über 1 Jahr im Avada Theme Einzug gehalten.
Inhalt
Den Avada Layout Builder verstehen
Der Übersichtsbereich des Avada Layout Builders
Den Avada Layout Builder findest Du im Übersichtsbereich des Avada Themes unter dem Menüpunkt Layouts. In den ersten beiden Spalten befindet sich links eine Kurzanleitung in 3 Punkten. Rechts daneben kannst Du Deinem neuen Layout einen Namen geben und einen neuen Layoutbereich erstellen.
Im unteren Bereich befinden sich Deine bereits erstellten Layouts und das standardmäßig vorhandene globale Layout (schwarz Kopfzeile „Global Layouts). Das globale Layout ist standardmäßig leer, was bedeutet, dass keine eigenen Layoutabschnitte einen der Standard Layoutabschnitte überschreibt. Der gesamte Inhalt des Global Layouts wird aus den Avada-Optionen, Seitenoptionen und dem tatsächlichen Seiteninhalt generiert. Fügst Du hier ein eigenes Layout hinzu, z.B. für den Header, wird dieses eigene Layout global auf der gesamten Seite angezeigt und überschreibt die Einstellungen aus den Theme Options.
Layouts und Sections im Avada Layout Builder
Jedes neu erstellte Layout kannst Du oben umbenennen, tippe dazu oben einfach in das Feld für die Bezeichnung. Wenn Du auf das Zahnradsymbol klickst, kannst Du Bedingungen für das Layout festlegen. Du kannst das Layout wieder löschen, indem Du auf das Papierkorbsymbol klickst. Am unteren Rand aller Layouts mit Ausnahme des globalen Layouts kannst Du Deinen Layouts Bedingungen anzeigen und zuweisen.
Die Vorteile des Avada Layout Builder
Der große Vorteil von eigenen Layouts besteht darin, dass Du alle Designfunktionen des Avada Themes nutzen kannst. Somit kannst z.B. für Deinen Header ein komplett eigenes Design entwerfen mit frei wählbaren Platzierungen aller Designelemente, Farben und Schriften. Hinzu kommt, dass viele Elemente auf dynamische Funktionen zurückgreifen können.
Der Layout Section Builder
Der Avada Section Builder
Der Layout Section Builder ist ebenfalls über das Menü Layouts als Unterpunkt zu erreichen. Auch hier befinden sich oben zwei Spalten – links wieder eine Kurzanleitung und rechts daneben die Spalte zum Erstellen von neuen Sections. Hier kannst Du zunächst per Dropdown den Section-Typ auswählen: Kopfzeile, Page Titel Bar, Content oder Footer.
Daneben vergib einen individuellen Namen zu Deiner neuen Section z.B. „Mein neuer Header“. Ist die neue Section erstellt, ist diese zunächst noch keinem Layout zugeordnet. Die hier erstellten Layout-Sections können aber auf der Seite des Layout Builders zugeordnet werden. Im unteren Bereich des Layout Section Builders siehst Du alle bereits erstellten Sections.
4 Layout Sections des Avada Layout Builder
Die 4 Layout Section im Avada Layout Builder
Wie schon oben erwähnt, unterteilen sich Layouts in 2 Hauptkomponenten: Layouts und Section Layouts. Um den Unterschied zwischen Layout und Section Layouts zu verstehen, stell dir einen Container vor, der den Seiteninhalt enthält (Layouts) . Der jeweilige Inhalt stammt jedoch aus den Section Layouts. Strukturell stellt das Avada Theme Dir 4 Layout Sections zur Verfügung: Header, Page Titel Bar, Content und Footer.
1. Header Section
Beispielaufbau eines Headers im Frontend
Beispielaufbau eines Header Section Layouts
Möchtest Du ein eigenes Header Layout erstellen, hast Du Zugriff auf alle Designelemente die zu einem Header Layout gehören. Das wichtigste ist hier sicherlich das „Menu Element“. Zusätzlich kannst Du ein „Image Element“ für Dein Logo verwenden und dies dynamisch abrufen über „Site Logo“. Hinzu kommen können dann z.B. Symbole für Social Media, Textblöcke, Breadcrumbs etc.
2. Page Titel Bar (PTB) Section
Eine Page Titel Bar im Frontend
Mit der Section Page Titel Bar können eigene Abschnitte erstellt werden, die z.B. über dem Inhalt von Blog Posts oder Portfolios erscheinen. Als ein oft genutztes Element wird hier eine Breadcrumb Navigation benutzt, um den Besucher anzuzeigen, wo er sich gerade auf der Seite oder Kategorie befindet.
3. Content Section
Ein Beispiel für eine Content Section
Der Inhaltsbereich oder die Content Section ist der flexibelste Bereich einer Webseite wenn es um Inhalte geht. Der Inhalt kann hier statisch, dynamisch oder aus einer Mischung von beiden erzeugt werden. Mit den Design Elementen des Avada Fusion Builders steht Dir hier die volle Gestaltungsfreiheit zur Verfügung.
Typische Beispiele für ein Content Section Layout wären z.B. die Darstellung von Blogbeiträgen, benutzerdefinierten Suchergebnisseiten oder das Design von Produktseiten eines Woocommerce Onlineshops.
Content Section Beispiel im Frontend
4. Footer Section
Ein Beispiel für ein Footer Section Layout
Der Inhalt der Footer Section kann ebenfalls mit allen Layout Elementen aus dem Avada Fusion Builder gestaltet werden. Ist man in WordPress bisher daran gehalten, den Footer mit Widgets aufzubauen, kannst Du in einem Footer Section Layout sehr viel gezielter Deine gewünschten Elemente gestalten.
Ein eigenes Footer Section Layout im Frontend
Layout Conditions (Bedingungen)
Ein Beispiel für ein Footer Section Layout
In jedem von Dir erstellten Layout kannst so genannte Conditions festlegen, also Bedingungen. Mit diesen Bedingungen kannst Du Deine Layouts auf ganz bestimmte Seiten, Beiträge, Kategorien oder sogar Produktseiten aus einem Onlineshop festlegen. Deine Layout wird bei ausgewählten Conditions (Bedingungen) dann auch nur auf den ausgewählten Seiten, Beiträgen etc. angezeigt.
Das ermöglicht Dir z.B. Dein neues Layout zunächst nur auf einer bestimmten Seite oder Beitrag anzuzeigen um Dein neues Design zu testen und zu optimieren.
Vorgefertigte Templates nutzen
Auswahl Dialogfeld für Prebuild Header
Bei der Neuerstellung einer Layout-Section kannst Du auch auf vorgefertigte Templates zurückgreifen. Je nach Art der gewählten Section (Header-Section oder Content-Section), klicke bei der Erstellung auf „Prebuild Header“ oder „Prebuild Page“ aus.
Prebuild Headers
Für Header-Vorlagen bietet jetzt das Avada Studio viele Header-Varianten
Prebuild Pages
Vorlagen für Prebuild Pages im Avada Theme
Auf für Inhalte stehen Dir diverse Layoutvorlagen zur Verfügung. Du kannst hier auswählen zwischen Blog-Layouts, Portfolio-Layouts oder Woocommerce Produktseiten. Viele der Inhaltselemente sind dynamisch geregelt. So kannst Du z.B. für ein Image-Element die dynamische Funktion „Featured Image“ wähen. Oder für ein Titel-Element die Option „Page-Titel“ um für einen Blogbeitrag den Beitragstitel anzuzeigen. Sehr viel mehr Optionen stehen Dir be der Gestaltung einer Woocommerce Produktseite zur Verfügung.
Seit der Version 7.0 sind viele neue Funktionen im Avada Theme hinzu gekommen. Was alles neu ist kannst Du hier lesen…
Fazit zum Avada Layout Builder
Mit dem Avada Layout Builder hast Du alle Freiheiten Deine Webseite individuell zu gestalten. Jedes Element das Du verwenden kannst hat diverse zusätzliche Einstellungen die Du zum Teil dynamisch erzeugen lassen kannst. Besonders das Element „Menu“ bietet Dir sehr viele Optionen um Dein Menü individuell zu gestalten. Alle Section Layouts kannst Du natürlich auch in dem Fusion Live Builder gestalten. Was ich als sehr praktisch gesehen habe, ist die Möglichkeit Produktseiten jetzt endlich so zu gestalten wie ich sie gerne hätte. Das starr vorgegebene Layout der Woocommerce Produktseiten kann nun endlich dynamisch gestylt werden da Dir im Fusion Builder dazu alle nötigen Designelemente zur Verfügung stehen.
Es lohnt sich die offizielle Dokumentation und die vielen Videos der Entwickler zu dem Avada Layout Builder anzuschauen. Besonders in den Videos werden der Aufbau und die Funktionalität der einzelnen Layouts und Section Layouts anschaulich dokumentiert.
Dokumentation zum Avada Layout Builder:
https://theme-fusion.com/documentation/avada/layouts/introducing-avada-layouts/
Offizieller YouTube Kanal Theme Fusion mit vielen Tutorials:
https://www.youtube.com/channel/UC_C7uAOAH9RMzZs-CKCZ62w
Ein paar Tipps zur besseren Performance des Avada Themes findest Du hier:
https://jfmediendesign.de/avada-theme-ladezeiten-verbessern/
November 2021 Update meines Beitrags: WordPress Avada Theme- Alle Einstellungen mit ca. 3 Stunden Videomaterial.
Hallo!
Und vielen Dank für diesen ausführlichen und tollen Beitrag.
Ich benutze Avada 7.5 aber die 16 Pre-Built-Header stehen mir nicht zur Verfügung. Stattdessen andere Header aus Avada Studio. Ich bräuchte allerdings die ganz normalen Avada Header. Woran könnte das liegen?
Hallo Patricia,
du müsstest das Avada Theme aktualisieren. Aktuell ist die Version 7.6.1
Ok, und vielen Dank!
Ich hatte in einem englischen Forum gelesen, dass andere das selbe Problem hatten. Allerdings nach dem Aktualisieren von der Version 6 auf 7. Könnte es eventuell noch an was anderem liegen?
Ich habe schon Avada Studio deaktiviert um zu schauen, ob es eventuell daran liegt. Hatte aber nichts bewirkt.
Hallo Patricia,
schau einmal im Avada Layout Builder ob dort unter „Global Layout“ ein spezieller Header zum tragen kommt. Um die normalen Header-Varianten aus den Theme Options zu nutzen, sollte im Layout Builder kein Eintrag stehen (Select Header).
Erst dann stehen wieder die Header-Varianten in den Theme Options zur Verfügung.
Hallo Jörg,
vielen Dank für deine Nachricht!
Es ist am entsprechenden Ort kein Header ausgewählt.
Kann es vielleicht sein, dass ab Version 7.5 diese Header gar nicht mehr verfügbar sind, da neu Avada Studio? Diese ersetzt wurden hierdurch?
Hallo Patricia,
du hast recht, bei der Erstellung eines eigenen Header-Layouts, stehen die 16 Pre-Build Header nicht mehr zur Verfügung. Diesen Part hat jetzt das Avada Studio übernommen wo Du aus einer größen Auswahl eine Header-Variante auswählen kannst. Meinen Beitrag dazu habe ich aktualisiert.
Hallo Jörg,
vielen, vielen Dank. Jetzt habe ich meinen Denkfehler begriffen, man muß also über das Studio gehen und kann nicht direkt in einen über Avada/Option/Kopfzeile eingefügten Header zugreifen.
Da habe ich lange an der falschen Stelle gesucht 😂
Hallo Klaus,
genau, die Header-Beispiele in den Avada-Optionen lassen sich so nicht anders gestalten, ausser über zusätzlich PHP-Programmierung. Daher gibt es den Layout-Builder um eigene Header-Layouts zu realisieren.
Hallo Jörg,
danke für die schnelle Antwort, aber das ist es nicht, was ich meine.
Ich will den unter Avada/Option/Kopfzeile untersten Header verwenden, das ist der mit dem Logo zwischen den Links und diesem Header will ich noch eine zusätzliche sticky Zeile verpassen.
Diese Zeile habe ich als Layout section für Header auch angelegt, finde jetzt aber keine Möglichkeit beides zusammenzufügen?
Hallo Klaus,
das kannst Du mit dem Layout Builder realisieren. Im Avada Studio gibt es einige Center Header-Vorlagen.
Hallo Jörg,
ebenfalls danke für Diesen Beitrag.
Ich knobele gerade an einem Problem, von dem ich nicht weiß, ob es überhaupt geht.
Also, ich möchte einem prebuilt Header ein zusätzliches Element geben.
Das Element habe ich mit Avada-Section erstellt habe aber keine Ahnung, wie ich das dann mit einem prebuilt Header kombinieren kann, falls das überhaupt geht?
Hallo Klaus,
meinst Du das „Section Separator“ Element? Einzelne Elemente, Spalten und Container können in der Library gespeichert werden und an beliebieger Stelle wieder importiert werden.
Hallo Jörg,
vielen Dank, für diesen tollen Beitrag.
Ich verstehe jetzt nur noch nicht ganz, wo der genaue Unterschied zwischen einem Template und einem Layout ist.
Und wenn ich bspw. ein Layout für ein Blogbeitrag erstelle, dann gehe ich auf Beiträge und erstelle einen neuen Beitrag, aber wie bekomme ich dann dort das Layout rein und kann es bearbeiten? Bspw. wenn ich Texte für den Blogbeitrag schreibe, wie bekomme ich diese Texte in das Layout rein?
VG Julia
Hallo Julia,
Templates oder Layouts sind im Prinzip das selbe. Mit den Layouts oder Templates bestimmst Du das Erscheinungsbild und den Aufbau von z.B. Blogbeiträgen. Du kannst in einem neuen Layout z.b. die Position des Featured Images in Deinen Blogbeitrag bestimmen. Genau so wählst Du für den eigentlichen Inhaltstext der Beitäge das „Content“ Element. Zusätzlich wählst Du im Section-Editor unten unter „Layout Section Options“ den Post-Type (Beiträge) und darunter ob das Layout für alle Beiträge oder nur bestimmte Beiträge gelten soll. Wenn Du das Layout für die Ansicht aller Beiträge gespeichert hast, werden alle Beiträge nach Deinem voreingestellten Layout dargestellt.
Die Inhalte Deiner Blogbeiträge schreibst Du dann ganz normal unter Beiträge. Das erstellte Layout formatiert dann nur die Darstellung Deiner erstellten Beiträge.
Hier ist das auch noch einmal in der Avada Dokumentation beschrieben: https://theme-fusion.com/documentation/avada/blog/creating-custom-blog-layouts-with-avada-layouts/
Vielen Dank, für deine schnelle Rückmeldung. Das hat mir schon mal sehr weiter geholfen.
Aber den Part mit den Beiträgen schreiben…da hab ich glaub ich noch einen Denkfehler.
Wenn ich jetzt einen Beitrag erstelle, schreibe ich den dann im Builder oder im Default Editor? Und woher weiß das Layout dann, wo es den Text, das Bild oder ein anderes Element, welches ich im Layout habe, hinpacken soll?
Bspw. habe ich jetzt ein Layout, wo im Content-Part direkt zu Anfang ein Text Block ist.
Wenn ich jetzt den Beitrag erstelle, muss ich dann auch direkt zu Anfang einen Text Block einfügen, hier meinen Text reinschreiben, aber brauche ihn nicht mehr zu formatieren?
Oder wenn ich im Layout ein Tab-Element habe, gehe ich jetzt in meinen Beitrag und füge dort auch ein Tab-Element ein, gebe dort meine Daten ein und er packt das dann aufgrund des Layouts an die richtige Stelle im Beitrag?
Den Inhalt Deines Beitrags schreibst ganz normal im Default Editor oder Fusion Builder. Wenn Du in Deinem Layout aus dem Layoutbuilder für Blog-Posts das „Content“ Element verwendest, dann wird dort drinnen automatisch der Inhalt Deines Blogbeitrags angezeigt. Du kannst also in Deinen Blogbeiträgen ganz normal schreiben oder alle anderen Elemente benutzen. Wie gesagt – das Content Element aus dem Layout Builder gibt autom. den Inhalt wieder. Der Layout Buuilder ermöglicht es Dir, das Erscheinungsbild Deiner Blogbeiträge global zu stylen – alle Beiträge richten sich dann nach diesem Layout.