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

Übersichtsbereich Avada Layout Builder

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

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

Avada 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 Layoutsections im 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

Beispiel eines Headerlayouts im Frontend

Beispielaufbau eines Headers im Frontend

Beispiel Header Section Layout im Backend

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

Beispiel einer Page Titel Bar

Eine Page Titel Bar im Frontend

Beispiel Page Titel Bar Avada Theme

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

aufbau eines Content Section Layouts

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

Content Section Beispiel im Frontend

4. Footer Section

Bespiel Footer Section Layout Avada Layout Builder - Seitenvorlagen selbst erstellen JF Mediendesign

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 Layout

Ein eigenes Footer Section Layout im Frontend

Layout Conditions (Bedingungen)

Layout Conditions Avada Layout Builder - Seitenvorlagen selbst erstellen JF Mediendesign

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

Prebuild Header Auswahl Avada Layout Builder - Seitenvorlagen selbst erstellen JF Mediendesign

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

Avada Studio Header Varianten

Für Header-Vorlagen bietet jetzt das Avada Studio viele Header-Varianten

Prebuild Pages

Vorlagen für Prebuild Pages im Avada Theme

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.

Verpasse nicht meinen Newsletter

Abonniere meinen Newsletter mit nützlichen Tipps, Trends & Insights zu SEO, Onlinemarketing und Webdesign. Für mehr Besucher auf Deiner Website.

Jörg Fiedler-Newsletter JF Mediendesign