Update 2019

4 Jahr ist mein Beitrag zum „WordPress Avada Theme – Alle Einstellungen“ mittlerweile alt – Zeit für ein Update. Im April 2019 feierte das Entwickler-Team Theme Fusion 500.000 Verkäufe des Avada Themes weltweit. Damit zeigt sich, das das Theme sich großer Beliebtheit erfreut, es aber ebenso kritische Gegenstimmen erhält. Beliebt sicher wegen der Vielzahl der Einstellungen. Vom einfachen Kreativ Portfolio bis zum komplexen Onlineshop, bietet das Avada Theme freie Gestaltungsmöglichkeiten. Unbeliebt sicherlich aufgrund der vielen Recourcen die das Theme beansprucht. Aber auch dazu haben die Entwickler des Themes Optimierungen integriert, um die Performance zu steigern.

Das Entwicklerteam Theme Fusion bietet zu dem Avada Theme eine sehr ausführliche englische Online Dokumentation: (https://theme-fusion.com/support/documentation/avada-documentation/). Zusätzlich stehen viele Video-Tutorials mit Anleitungen zur Verfügung. Ein englisches Community Forum mit sehr aktuellen Beiträgen, kann bei aufkommenden Problemen sehr hilfreiche sein. Hilfe von den Entwicklern selbst bekommt man mit einem Support-Ticket.

In den folgenden Abschnitten zeige ich alle Einstellungen des Avada Themes in der Version 5.9.1.

Welcome to Avada

Nach der Installation des Themes gelangst Du im WordPress Dashboard mit einem klick auf „Avada“ zum Welcome Screen, dem Willkommens Bereich des Avada Themes. Unter den Tabs für die Registrierung, Support, Fragen, Demos, Plugins und dem System Status kannst Du verschiedene Informationen und Installationen vornehmen.

Der Willkommens-Screen zum Avada Theme. Gleich zu Anfang kannst Du Dir ein Einführungs Video für einen Gesamtüberblick des Themes ansehen.

Avada-Welcome-Screen
Unter dem Tab Registration kannst Du das Avada Theme via Token-Key registrieren. Die Registrierung solltest Du unbedingt vornehmen um weitere Updates des Themes zu bekommen – kurz ohne Registrierung keine Updates. Eine Kurzanleitung für den Vorgang der Registrierung ist unter den Instructions auf englisch zu finden. Weiter unten ebenfalls ein Link für eine ausführliche Anleitung zum Registrierungsprozesses.

Registierung des Avada Themes
Im Tab „FAQ“ stehen die meisten Fragen und Antworten zur Verfügung für eine schnelle Hilfe auf offene Fragen.

FAQ-Avada

Im Tab „Demos“ stehen alle Demos des Avada Theme zur Installation bereit – sofern das Theme registriert ist. Es erscheint bei einem klick auf Import ein Auswahlmenü, um das komplette Demo oder auch nur partielle Bereiche zu importieren. Ebenfalls können unter „Remove content“ die Demo-Inhalte auch wieder deinstalliert werden.

Avada-Demos

Im Tab „Plugins“ stehen mitgelieferten Plugins zu Installation – bereit sofern das Theme registriert ist. Neben den Premium Plugin Slider Revolution, Layer Slider, White Label Branding, ACF-Pro und Convert-Pro, stehen auch diverse kostenlose Plugin wie z.B. Contact Form7 oder WooCommerce zur Verfügung.
Die Plugins „Fusion Core“ und „Fusion Builder“ müssen zur Funktionalität des Themes installiert werden. Nach einem Theme Update müssen diese beiden Plugins ebenfalls aktualisiert werden.

Avada-Plug-ins
Unter dem Tab „System Status“ befinden sich aktuelle Information zur Versionshistorie des Themes, der WordPress Umgebung und der Server Umgebung. Im Bereich Server Umgebung stehen empfohlene Werte für die PHP- und MySQL Konfiguration. Sollten hier einige Werte in rot angezeigt werden, so sollten diese auf vorgeschlagenen Werte angepasst werden um eine optimale Performance des Themes zu gewährleisten.

Avada-System-Status

Avada Theme Options

Die Avada Theme Options ist die Schaltzentrale des Themes. Von der Gestaltung des gesamten Layouts bis zu den Optionen für den Blog, Portfolio & Performance lassen sich in den Theme Options des Avada Themes sehr viele Einstellungen vornehmen. Die einzelnen Optionen mit ihren Einstellungen, habe ich hier der Reihe nach in Tabs aufgelistet.

Unter Layout kann das allgemeine Erscheinungsbild der Webseite in Bezug auf die Seitenbreite eingestellt werden. Die Auswahl zwischen Boxed (eingerahmt) und Wide (volle Seitenbreite) bestimmt die allgemeine Darstellung der Webseite. Page Content Padding bestimmt den Abstand der Inhalte zwischen Header und Footer. Ebenso lassen sich hier Einstellung zu den Breiten der Sidebars definieren.

Layout-Avada-Theme-Options
Unter Responsive kannst Du das Verhalten für mobile Endgeräte bestimmen. Der Responsive Mode kann zum einen aktiviert- oder deaktiviert werden.
Die Responsive Breakpoint Einstellungen bestimmen ab welchen Wert die Webseite in die mobile Anischt wechseln soll. Die Angaben zur Responsive Typography bestimmen die Sensivität der Schriftgrößen in der mobilen Ansicht.

Responsive-Avada-Theme-Options
Unter Colors stellst Du die allgemeine Farbgebung der Webseite ein. Predefined Theme Skin unterscheidet zwischen einem allgemeinen hellen und dunklen Layout. Unter Predefined Color Scheme kannst Du vorgegebene Farbstile auswählen die sich auf verschiedene Element (z.B. Buttonfarben) auswirken. Unter Primary Color kannst Du die Highlight Farbe der Webseite bestimmen (Farbe von Links, Linien etc.).

Colors-Avada-Theme-Options
Header Content
Im Header Content Bereich bestimmt Du das Layout und aussehen für Logoplatzierung, Navigation und zusätzliche Informationen. Unter Header Position legst Du die Position des Header fest (Top, Left oder Right). Für das Erscheinungsbild des Headers stehen 7 Header Varianten. Je nach ausgewählter Header-Variante erscheinen weitere Einstellungsmöglichkeiten für Kontakt Infos oder Platzierung von Social Link Buttons.

Header-Content-Avada-Theme-Options
Header Background Image
Im Bereich Background Image for Header Area kannst Du ein Hintergrundbild zum Header hinzu fügen. Wenn ein Hintergrundbild verwendet werden soll, solltest Du darauf achten, das die Deckkraft der Hintergrundfarbe des Headers angepasst werden sollte (Transparenz).

Header-Background-Image-Avada-Theme-Options

Header Styling
Im Bereich Header Styling kannst Du Abstände (Header Padding), Farben und Begrenzungslinen (Borders) einstellen.

Header-Styling-Avada-Theme-Options

Sticky Header
Unter Sticky Header (feststehender Header) versteht man das Verhalten des Headers wenn der Benutzer auf der Seite herunterscrollt. Ist der Sticky Header aktiviert, so bleibt der Header im oberen Bereich stehen und der Inhalt wird beim scrollen darunter geschoben. Sehr praktisch, den die Navigatonselemente bleiben so beim scrollen immer sichtbar. Auch lässt sich das Verhalten für Tablets oder Smartphones einstellen, sowie ein Animationsverhalten (Shrinking Header). Hintergrundfarben, Größen und eigene Farbgebung für die Menüschriften können ebenfalls definiert werden.

Header-Sticky-Header-Avada-Theme-Options
Main Menu
Im Main Menu kannst Du das Aussehen Deines Menüs einstellen. Unter Main Menu Height stellst Du den Wert für die Höhe des Menüs ein (steht in Abhängigkeit zur Höhe des Logos). Main Menu Highlight Style bestimmt die Hervorhebung des Menüpunktes beim hover oder aktiv. Auch die Abstände zwischen den Menüpunkten lassen sich bestimmen (Main Menu Item Padding). Das Aussehen der Subnavigation lässt sich ebenso wie Schriftarten und Farbe des Menüs bestimmen. Für ein optimales Ergebnis solltest Du in diesem Bereich Feinabstimmungen vornehmen.

Main-Menu-Avada-Theme-Options
Flyout Menu
Das Flyout Menu kommt erst zum tragen, wenn unter dem Bereich Header Layout Nr. 6 oder unter Mobile Menu „Flyout“ ausgewählt wurde.

Flyout-Menu-Avada-Theme-Options

Secondary Top Menu
Unter Secondary Top Menu kommt zum tragen wenn unter Header Content die Version 2, 3, 4 oder 5 ausgewählt wurde. Hier bestimmst Du ebenfalls die Einstellungen für Abstände, Farben und Typografie des Secondary Top Menüs.

Secondary-Top-Menu-Avada-Theme-Options

Mobil Menu
Unter Mobil Menu hast Du die Möglichkeit das Aussehen des Mobilen Menüs zu bestimmen. Unter Mobile Menu Style hast Du die Auswahl zwischen Classic, Modern oder Flyout. Abstände, Verhalten, Farben und Typografie lassen sich auch in diesem Bereich bestimmen.

Mobil-Menu-Avada-Theme-Options

Mega Menu
Die Einstellungen für das integrierte Mega Menu erscheinen, wenn in den Theme Options unter dem Bereich „Advanced ->Theme Features das Mega Menu aktiviert ist. Unter Mega Menu Max Width kannst Du wählen, ob das Mega Menu sich auf die Seitenbreite,volle Bildschirmbreite oder selbst definiert Breite erstrecken soll. Des weiteren kannst Du Einstellungen zur Größe der Spaltenüberschriften, Abstände und Trennlinien festlegen.

Mega-Menu-Avada-Theme-Options
Main Menu Icons
Möchtest Du in Deinem Menü Icons statt Beschriftungen zeigen, kannst Du hier die Einstellungen dafür vornehmen. (Position, Farbe & Größe)

Main-Menu-Icons-Avada-Theme-Options

Logo
In diesem Bereich hinterlegst Du Dein Logo. Für die Positionierung des Logos kannst Du wählen zwischen Links, Mittig oder Rechts.
Mit den Logo Margins bestimmst Du die Abstände des Logos. Benutzt Du ein Transparentes Logo (PNG-Datei) kannst Du unter Logo Background noch eine Hintergrundfarbe bestimmen. Unter Custom Link URL kannst Du eine benutzerdefinierte URL für den klick auf das Logo bestimmen. Wenn hier nichts eingetragen ist, so ist ein klick auf das Logo mit der Startseite verbunden. Für den Upload des Logos kannst Du zusätzlich Retina Versionen (Doppelte Größe) hinzu laden. Auch das Mobile Logo kann hier hochgeladen werden.

Logo-Avada-Theme-Options

Favicon
Unter Favicon kannst Du Dein Favicon für die Webseite hochladen. Standartgrößen sind 16x16px oder 32x32px. Für Apple iPhone und iPad lassen sich auch zusätzlichg Größere Versionen hochladen.

Favicon-Avada-Theme-Options

Page Titel Bar
Die Page Titel Bar dient in erster Linie als Orientierungshilfe für den Besucher auf Deiner Webseite. Sie erscheint, wenn aktiviert, direkt unter dem Header und vor dem Seiteninhalt mit Seitentitel und Mininavigationspfad, sog. Breadcrumbs. Auch hier lassen sich viele Einstellungen zum Aussehen der Page Titel Bar vornehmen, wie z.B. Hintergrundfarben, Hintergrundbild, Schriftgrößen und Farben.

Page-Titel-Bar-Avada-Theme-Options

Breadcrumbs / Search Bar
Im Bereich Breadcrumbs / Search Bar legst Du fest, wie die Brotkrumen Navigation in Erscheinung treten soll oder ob statt dessen ein Suchfeld angezeigt werden soll. So kannst Du z.B. unter Breadcrumbs Prefix einen kurzen Text festlegen, der vor der Mininavigation erscheinen soll (z.B. Du befindest dich hier:). Des weiteren lassen sich auch hier wieder Schriftgrößen und Farben bestimmen.

Breadcrumbs-Search-Bar-Avada-Theme-Options
Sliding Bar
Die Sliding Bar ist eine Art Sidebar die auf klick ausgeklappt werden kann. Symbolisiert wird die Sliding Bar durch ein kleines Pluszeichen im oberen oder rechten Bereich der Webseite. Wie in einer Sidebar können hier zusätzlich Informationen wie z.B. Kontakt-Infos oder besondere Aktionen eingesetzt werden. In den Einstellungen zur Sliding Bar kann u.a. die Position, Breite, Hintergrundfarbe, Spaltenaufteilung, Schriftgröße, Platzierung der Inhalte (nebeneinander oder untereinander) sowie das Icon festgelegt werden. Auch eine Verlinkung über das Menü ist möglich.

Sliding-Bar-Avada-Theme-Options
Footer Content
Im Bereich Footer Content können entsprechende Einstellungen für die Gestaltung des Footers vorgenommen werden. Footer Widgets können generell aktiviert oder deaktiviert werden. Die Anzahl der Spalten für Widgets können per Schieberegler definiert werden. In der Copyright Bar können zusätzliche Informationstexte oder Verlinkungen eingesetzt werden. Unter Footer Special Effects können 4 unterschiedliche Effekte zusätzlich aktiviert werden.

Footer-Content-Avada-Theme-Options

Footer Background Image
Wie der Name schon sagt kann in diesem Bereich ein Hintergrundbild für den Footer festgelegt werden.

Footer-Background-Image-Avada-Theme-Options

Footer Styling
In diesem Bereich kannst Du das komplette Design des Footers mit Abständen, Farben, Typografie, Begrenzungslinien gestalten.

Footer-Styling-Avada-Theme-Options
Sidebar Styling
Im Sidebar Styling Bereich kannst Du zusätzliche Einstellung zum Design der Sidebar vornehmen. Mit Responsive Order legst Du die Reihenfolge der Sidebars auf mobilen Geräten fest. Sticky Sidebars ermöglichen es, eine Sidebar beim scrollen fest zu positionieren.

Sidebar-Styling-Avada-Theme-Options

Pages
In diesem Bereich kannst Du eine Sidebar auch auf Seiten anzeigen lassen.

Sidebars-Pages-Avada-Theme-Options

Portfolio Posts
In diesem Bereich legst Du fest, welche Sidebar bei Portfolio Einzelbeiträgen angezeigt werden sollen.

Sidebars-Portfolio-Posts-Avada-Theme-Options

Portfolio Archive
In diesem Bereich legst Du fest, welche Sidebar im Portfolio Archiv angezeigt werden soll.

Sidebars-Portfolio-Archive-Avada-Theme-Options

Blog Posts
In diesem Bereich legst Du fest, welche Sidebar im Blog Einzelbeitrag angezeigt werden soll.

Sidebars-Blog-Posts-Avada-Theme-Options

Blog Archive
In diesem Bereich legst Du fest, welche Sidebar im Blog Archiv angezeigt werden soll.

Sidebars-Blog-Archive-Avada-Theme-Options

Search Page
In diesem Bereich legst Du fest, welche Sidebar bei einem Aufruf der Suche angezeigt werden soll.

Sidebars-Search-Page-Avada-Theme-Options
Page Background
Unter Page Background kannst Du ein Bild oder eine Hintergrundfarbe für Seiten festlegen. Unter Background Pattern stehen verschiedene Hintergrund Kacheln zur Auswahl.

Page-Background-Avada-Theme-Options

Main Content Background
Unter Main Content Background kannst Du ein Bild oder eine Hintergrundfarbe festlegen, um generell einen Hintergrund auf der Webseite anzuzeigen.

Main-Content-Background-Avada-Theme-Options
Body Typography
Unter Body Typography kannst Du die Optionen für den Fließtext auf Deiner Webseite festlegen. Zur Auswahl stehen Google Fonts oder Standart System Fonts. Du kannst Einstellungen zur Schriftfamilie, Farbe, Abstände und Größe festlegen. Unter Link Color legst Du die Farbe für Textlinks fest.

Body-Typo-Avada-Theme-Options

Headers Typography
Im Bereich Headers Typography legst Du ebenso die Schriftfamilien, Farben, Abstände und Größen für die Überschriften von H1 bis H6 fest. Weiter unten kannst Du auch die Schriftoptionen für Beitragstitel Überschriften und Beitrags Extras festlegen (Kommentare, Autor, Ähnliche Beiträge).

Headers-Typo-Avada-Theme-Options

Custom Fonts
Unter Custom Fonts kannst Du eigene Schriftarten hochladen um sie auf Deiner Seite zu verwenden. Zu beachten ist hierbei, das die jeweilige Schriftfamilie in den Dateiformaten „WOFF“, WOFF2″, „TTF“, „SVG“ und „EOT“ hochgeladen werden muß.

Custom-Fonts-Avada-Theme-Options
General Blog
Die Einstellungen unter General Blog beziehen sich auf die Darstellung Deiner Blog Seite, die Du in den WordPress Einstellungen->Lesen festgelegt hast. Du kannst festlegen, ob Du generell eine Page Titel Bar anzeigen möchtest und welches Layout Du zur Darstellung Deines Blogs verwenden möchtest. Du kannst die Länge des Auszugs definieren und u.a. auch das Format der Datumsanzeige einstellen.

Blog-General-Blog-Avada-Theme-Options

Blog Single Post
Unter Blog Single Post kannst Du Einstellungen zur Darstellung der einzelnen Blog Beiträge festlegen.

Blog-Single-Post-Avada-Theme-Options

Blog Meta
Unter Blog Meta legst Du fest, welche zusätzlichen Meta Informationen Du in Deinen Blogbeiträgen zeigen möchtest (Kategorie, Datum, Autor etc.). Ebenso kannst Du die Schriftgröße und das Datumsformat einstellen.

Blog-Meta-Avada-Theme-Options
General Portfolio
Die Einstellungen unter General Portfolio legen fest, wie Deine Portfolio Übersichtsseite dargestellt werden soll. Du hast die Auswahl zwischen Grid und Masonry zur Darstellung des Portfolio Archivs. Masonry kann unterschiedliche Bildgrößen harmonisch aufteilen. Witerhin kannst Du die Anzahl der Spaltenaufteilung und deren Abstände festlegen.

General-Portfolio-Avada-Theme-Options

Portfolio Single Post
Unter Portfolio Single Post kannst Du die Darstellung der einzelnen Portfolio Beiträge festlegen. Ebenso kannst Du auswählen, welche zusätzlichen Details zu dem Portfolio Post angezeigt werden sollen (Autor, Social Sharing Box, Ähnlich Portfolio Beiträge etc.)

Portfolio-Single-Post-Avada-Theme-Options

Social Media Icons
Unter Social Media Icons kannst Du Deine Kanäle Deiner genutzen Sozialen Medien wie Facebook, Twitter etc. festlegen. Die Auswahlbox enthält bereits die beliebtesten Kanäle.

Social-Media-Icons-Avada-Theme-Options

Header Social Icons Styling
Hier legst Du fest an welcher Postition und in welchen Farben Deine Social Media Icons im Header dargestellt werden sollen.

Header-Social-Icons-Avada-Theme-Options

Footer Social Icons Styling
Wie schon für den Header legst Du hier fest wie Deine Social Media Icons im Footer dargestellt werden sollen.

Footer-Social-Icons-Avada-Theme-Options

Social Sharing Box
Die Social Sharing Box bietet Deinen Lesern die Möglichkeit, Deine Blogbeiträge in den gängigen Sozialen Medien zu teilen. Du kannst eine Überschrift über der Box eingeben, Schriftgröße und Farben festlegen und auswählen in welchen Kanälen Dein Beitrag geteilt werden soll. Da diese Funktion nicht den DSGVO Vorgaben entspricht, würde ich dazu ein Plugin nutzen, z.B. Shariff Wrapper.

Social-Sharing-Box-Avada-Theme-Options
Slideshows
In den Slideshows Einstellungen kannst Du Einstellungen zum Erscheinungsbild von Slideshows festlegen. Bei mehreren Vorschaubildern in Blog- oder Portfolio Beiträgen oder dem einfachen Slider Element wird hier die Anzeige und das Verhalten festgelegt.

Slideshows-Avada-Theme-Options
Elastic Slider
Der Elastic Slider ist ein einfacher Slider der nur über die Page/Blog Options auf einer Seite oder Blogbeitrag eingefügt werden kann. Die Einstellungen für den Elastic Slider legen generell die Breite und Höhe des Slider fest. Des weiteren kannst Du die Vorschaubildgröße, Schriftgrößen und Farben festlegen. Allerdings bietet der Fusion Slider wesentlich bessere Einstellungsmöglichkeiten. Wenn Du diesen Slider nicht unbedingt benötigst, kannst Du ihn in den Theme Options unter Advanced->Theme Features deaktivieren.

Elastic-Slider-Avada-Theme-Options
Lightbox
Unter dem Bereich Lightbox kannst Du Einstellungen zur Lightbox vornhemen. Du kannst die Lightbox Funktion generell aktivieren oder deaktivieren und zusätzlich für die Vorschaubilder von Blogbeiträgen aktivieren. Du hast u.a. die Möglichkeit eine helle oder dunkle Version der Lightbox Darstellung einzustellen.

Lightbox-Avada-Theme-Options
Contact Form
Die Einstellungen für Contact Form beziehen sich auf das Avada Seiten Template „Contact“. Erstellst Du also eine Seite mit dem Template „Contact“ greifen die Einstellungen die in diesem Bereich einstellst. Neben Deiner E-Mail Adresse kannst Du u.a. auch eine Privacy Checkbox mit Datenschutz Hinweis aktivieren. Für Spamschutz kannst Du hier auch das Google Recaptcha mit hinterlegten Keys aktivieren. Generell würde ich aber für Kontaktformulare auf das Plugin Contactform7 oder andere zurückgreifen, da die Einstellungen für weitere Felder oder ein shortcode nicht vorgesehen sind.

Contact-Form-Avada-Theme-Options

Google Map
Wenn Du Google Maps nutzen möchtest, kannst Du hier Deinen Google Maps API Key eintragen und generelle Einstellungen zur Dartstellung der Google Maps auf Deiner Seite vornehmen.

Google-Maps-Avada-Theme-Options

Google Map Styling
Im Bereich Google Map Styling kannst Du noch Styling Optionen für die Google Maps vornehmen. Mit Map Overlay Color kannst Du z.B. eine Farbe als Farbübleger definieren. Unter Info Box Content kannst Du mehrere Adressen und Informationen hinzufügen.

Google-Map-Styling-Avada-Theme-Options
Search Form
In dem Bereich für Search Form kannst Du individuelle oder globale Einstellungen zur internen Suchfunktion des Avada Themes vornehmen. Dadurch kannst Du die Suchergebnisse z.B. nur auf Seiten, Blogbeiträge oder Portfolio Beiträge begrenzen. Du kannst zwischen einem Classic oder Clean Design wählen.

Search-Form-Avada-Theme-Options

Search Page
In den Search Page Einstellungen kannst Du die Darstellung der Suchergebnis-Seite einstellen. Du kannst u.a. die Anzahl der Suchergebnisse festlegen, die Anzahl der Spalten und die Anzeige für Auszüge und Länge bestimmen.

Search-Page-Avada-Theme-Options
Privacy
Im Rahmen der DSGVO in den Europäischen Ländern, gibt es unter Privacy in den Theme Options Einstellungen zum Schutz der Privatsphäre Deiner Besucher. Die 1. Option „Google & FontAwesome Fonts Mode“ ermöglicht es, das Google-Schriftarten entweder über die Google-Schriftarten-API (CDN) abgerufen oder lokal auf Deinem Server gehostet werden sollen (Local). Unter Privay Consent kannst Du bestimmen, das nur unter Zustimmung des Benutzers Scripte geladen werden sollen. Die Privacy Bar ist gleich zu setzen mit einer Cookie Notice, wie sie auf den meisten Webseiten zu finden ist. Diese kannst Du individuell gestalten und den Datenschutz Hinweistext einsetzen. Ausführliche Informationen zu den Einstellungen findest Du auch in der Dokumentation unter: https://theme-fusion.com/documentation/avada/noticeboard/gdpr-and-avada-privacy-tools/

Privacy-Avada-Theme-Options
Miscellaneous
Unter dem Bereich Miscellaneous findest Du verschiedene Einstellung für Verhalten und Anzeigen innerhalb Deiner Website. So kannst Du z.B. bestimmen, ob die Länge von Beitragsauzügen in Wörter oder Buchstaben gezählt werden sollen. Du kannst hier Kommentare und Vorschaubilder für Seiten aktivieren, ob Social Icons in einem neuen Browserfenster geöffnet werden sollen, sowie Einstellungen zum ToTop Button.

Miscellaneous-Avada-Theme-Options

Related Posts / Projects
In diesem Bereich bestimmst Du Anzeige und Verhalten von ähnlichen Beiträgen für Deinen Blog oder Portfolio.

Related-Posts-Avada-Theme-Options

Featured Image Rollover
Für die Vorschaubilder von Beiträgen kannst Du in diesem Bereich das Verhalten und das Design festlegen.

Featured-Image-Rollover-Avada-Theme-Options

Pagination
Unter dem Bereich Pagination kannst Du das Aussehen und die Anzeige von Paginierungen verändern.

Pagination-Avada-Theme-Options

Forms Styling
Unter Forms Styling kannst Designanpassungen für Formulare inkl. Drittanbieter Plugins wie ContactForm7 vornehmen.

Forms-Styling-Avada-Theme-Options

Grid / Masonry
Unter Grid / Masonry nimmst Du Einstellungen zum Design von Blog-Grid und Timeline, Portfolio & WooCommerce boxed Layouts vor sowie Einstellungen zur Darstellung von Masonry Layouts.

Grid-Masonry-Avada-Theme-Options
Code Fields (Tracking etc.)
Unter dem Bereich Code Fields (Tracking etc.) kannst Du externe Script-Codes wie z.B. von Google Analytics oder Google Ads unterbringen.

Code-Fields-Tracking-Avada-Theme-Options

Theme Features
Der Bereich Theme Features stellt einen der wichtigsten Bereich des Avada Themes dar. Hier kannst Du verschieden Funktionen aktivieren oder deaktivieren um die Performance des Themes zu steigern. Die Avada’s Option Network Dependencies steuern die Abhängigkeiten der Einstellungsmöglichkeiten von einzelnen Features im Theme: Deaktivierst Du z.B. in den Theme Features das Mega Menü, wirst Du im Bereich Menu keine Einstellungen zum Mega Menu mehr finden. Aktivierst Du sie wieder kannst Du sie wieder bearbeiten. Um die Ladezeiten zu reduzieren, kannst Du z.B. verschieden Scripte wie für YouTube, Google Maps oder Vimeo deaktivieren wenn Du sie nicht benötigst.
CSS Animationen, z.B. für Mobile Endgeräte, kannst Du ebenfalls optional an- oder ausschalten.

Theme-Features-Avada-Theme-Options
Performance
Die Einstellungen im Bereich Performance bieten Dir die Möglichkeit, die Ladezeiten des Avada Themes zu beschleunigen. Durch deaktivieren von verschiedenen Scripten oder das zusammenfassen von CSS oder JavaScript Dateien, kann dies für schnellere Ladezeiten sorgen.

Performance-Avada-Theme-Options
Custom CSS
Der Bereich Custom CSS ermöglicht Dir, eigene CSS-Code Anweisungen einzufügen oder zu ergänzen. Einige Anweisungen benötigen ggf. die zusätzliche Anweisung !important am Ende um die regulären Regeln zu überschreiben. Die Anweisungen bleiben auch nach eine Update des Themes erhalten.

Custom-CSS-Avada-Theme-Options
Fusion Builder Elements
Im Bereich Fusion Builder Elements kannst Du alle zur Verfügungung stehende Elemente aus dem Fusion Builder anpassen, um die Standarts zu verändern. So kannst Du hier z.B. dem Button Element Deine gewünschte Farbe, Schriftfamilie und Form als Standart vergeben. Die Fusion Builder Elements sind sehr hilfreich um auf Deiner Seite für alle Elemente ein einheitliches Design zu erzielen.

Fusion-Builder-Elements-Avada-Theme-Options
Import Options
Um alle Einstellungen die Du in den Avada Theme Options gemacht hast zu speichern, kannst Du diese im Bereich Import/Export lokal speichern und bei Bedarf auch wieder importieren.

Import-Export-Avada-Theme-Options

Avada Fusion Builder

Der Avada Fusion Builder ist der integrierte Page Builder – oder Seitengestaltungs Editor – des Avada Themes. Mit dem Fusion Builder kannst Du fast jedes erdenkliche Layout realisieren ohne umständliche Code-Anweisungen in Html oder CSS zu schreiben.

NEU: Avada 6 Live bietet jetzt das Bearbeiten im Frontend.
Hier findest Du mein Video-Überblick zum Fusion Builder Live.

Natürlich ist es aber von Vorteil, gewisse Kenntnisse in Html oder CSS zu besitzen. Viele Elemente und Container zur Seitengestaltung haben Eingabefelder um z.B. Padding oder Margin Angaben zu machen. Zusätzlich bietet der Fusion Builder eine integrierte Library, um ganze Seitenlayouts, Container oder einzelne Element zentral in der Library abzuspeichern und nach belieben wieder zu verwenden. Auch ein einfaches copy and paste per rechter Maustaste ist möglich. Am Ende dieses Beitrags findest Du u.a. verschiedene Tipps und Tutorials zum Fusion Builder von mir.

Da der Avada Fusion Builder als Plugin mit dem Theme installiert werden sollte, gibt es dafür auch einen eigenen Bereich im WordPress Dashboard. Dieser unterteilt sich in die Bereich „Welcome“ mit einem Einführungs Video, „Support“, „FAQ“, „Settings“, „Library“ und „Add-ons“.

Welcome-to-Fusion-Builder
Support
Unter Support findest du Links zu einem Starter Guide, der Dokumentation zum Fusion Builder und einem Link zum Support.

Support-Avada
FAQ
Hier findest Du im FAQ-Bereich des Fusion Builders, die häufig gestellten Fragen und Antworten zum Fusion Builder.

FAQ-Fusion Builder
Settings
In den Settings kannst Du im ersten Bereich bestimmen, ob der Fusion Builder generell für die Bearbeitung von Seiten und Beiträgen genutzt werden soll. Im ausgeschalteten Zustand hast Du die Auswahl auch den Standart WordPress Editor oder auch Gutenberg Editor zu verwenden.
Darunter befindet sich eine Reihe von Checkboxen für die benutzbaren Fusion Builder Elemente & Post Types. Bei Bedarf kannst Du hier einige Elemente deaktivieren. Darunter stehen Dir Optionen zur Verfügung um Vorlagen aus der internen Library zu im- und exportieren. Der Bereich Sticky Preview / Publish Button steht Dir zum sichern, zur Vorschau und zum publizieren auf jeder Seite/Beitrag unten rechts zur Verfügung.
Dies erspart Dir bei sehr langen Seiteninhalten das hochscrollen zum Bereich für das WordPress interne Aktualisieren oder Sichern.

Fusion-Builder-Settings
Library
Im Bereich Library des Fusion Builder findest Du alle von Dir gepeicherten Vorlagen, Container und Elemente. Du hast im Fusion Builder auch die Möglichkeit, Elemente als „Global“ abzuspeichern. Setzt Du Global abgespeicherte Vorlagen mehrfach auf Deiner Webseite ein, so brauchst Du nur einmal die Globale Vorlage zu ändern und alle Instanzen des globalen Elements werden automatisch überall aktualisiert. Siehe hierzu auch gern auf mein Tutorial Global Save Funktion des Fusion Builders.

Fusion-Builder-Library-Ueberblick
Add-ons
Im letzten Bereich unter Add-ons des Fusion Builders findest Du eine Reihe von zusätzlichen Add-ons von Drittanbietern zur Funktionserweiterung.

Fusion-Builder-Add-Ons

Fusion Builder Elemente & Container

In diesem Abschnitt zeige ich Dir die wichtigsten Elemente, Container & Einstellungen wenn Du mit dem Fusion Builder Seiten oder Beiträge erstellst. Jeder Container, Columns (Spalten) und jedes Element hat beim aufruf zum editieren noch einige weitere Einstellungen zum Design oder für das Verhalten für mobile Ansichten auf die ich aber hier nicht näher eingegangen bin. Für Tipps und Tutorials schaue einfach am Ende dieses Beitrags für mehr Informationen.

Startbildschirm Fusion Builder
Legst Du einen neue Seite oder Beitrag an und aktivierst den Fusion Builder, so erscheint ein Startbildschirm mit verschieden Optionen.
Du kannst direkt starten und einen neuen Container hinzufügen oder eine Vorlage aus der Library importieren. Um Gestaltungslemente hinzuzufügen, bedarf es immer zu Anfang eines Containers, in dem diese Elemente als Inhalt zu platzieren.

Startbildschirm Fusion-Builder
Container im Fusion Builder
Inhaltscontainer bilden die Basis um im Fusion Builder die Seitengestaltung zu starten. Wenn Du auf „Insert Container“ klickst, öffnet sich ein Dialogfeld mit Auswahl von verschieden vorgefertigte Spaltenlayouts zur Gestaltung Deiner Seite. Sind bereits Container in der Library abgespeichert, erreichst Du diese im Dialogfeld unter „Library Containers“. Unter „Special“ findest Du ein spezielles Element um Seiten in mehrere Seiten aufzuteilen und eine automatische Paginierung „Next Page“ wird eingefügt.

Container-Fusion-Builder-Avada-Theme
Container Optionen
Ist ein Container eingefügt, so kannst Du über das kleine Stiftsymbol zu den Optionen eines Containers gelangen. Hier findest Du generelle Einstellungsmöglichkeiten, Hintergrund Optionen und Einstellungen zum Design des Containers.

Container-Options-Fusion-Builder-Avada-Theme
Columns Layouts (Spaltenlayouts)
Jeder Container kann zusätzlich mit weiteren Spaltenlayouts gestaltet und erweitert werden – den sog. Columns. Die Columns basieren auf einem Grid-Layout aus 1/1, 1/2, 1/3, 1/4, 1/5 bis zu 1/6 Aufteilungen. Mit klick auf z.B. das Symbol 1/1 kannst Du dieses auch in ein 1/2 oder andere Aufteilung ändern. Wie auch die Container, kann jede Column mit einem klick auf das Stiftsymbol individuell gestaltet werden. Daneben findest Du ein Symbol um den die Spalte zu duplizieren. Das kleine Festplatten Symbol daneben ermöglicht Dir die Column in der Library zu speichern. Und schließlich ein Trash-Symbol zum löschen der Column.

Column-Layouts-Fusion-Builder-Avada-Theme

Column Optionen
Mit einem klick auf das Stift-Symbol einer Column öffnet sich ein Dialogfeld für weitere generelle Einstellungen, Design und Animation.

Column-Options-Fusion-Builder-Avada-Theme
Die Gestaltungselemente
Mit einem klick auf den Button „+ Element“ öffnet sich die Dialogbox mit allen zur Verfügung stehenden Gestaltungselementen des Avada Themes.
Wählst Du z.B. das Button-Element aus, so öffnet sich ein neues Dialogfeld mit den Gestaltungsoptionen zum Button-Element. Mit einem klick auf SAVE fügst Du da Element ein.

Elements-Fusion-Builder-Avada-Theme

Fusion Page Options

Die Fusion Page Options erscheinen auf jeder Seite oder Beitrag jeweils am unteren Ende. In diesen Optionen hast Du Möglichkeit für jede Seite oder Beitrag individuelle Einstellungen vorzunehmen und ggf. auch als Standart zu speichern.

Slider in den Fusion Page Options
Im Bereich Sliders kannst Du einen Slidertyp (Layer Slider, Fusion Slider, Slider Revolution, Elastic Slider, No Slider) in Deine Seite einfügen. Für die Position kannst Du hier den Slider entweder am Anfang der Seite (vor dem eigentlichen Inhalt) oder am Ende des Inhalts einfügen. Für mobile Ansichten hast Du die Möglichkeit ein sog. Fallback Image einzufügen, um auf einem Smartphone zu schnelleren laden der Seite nur ein Bild anstelle eines Sliders anzuzeigen.

Sliders-Fusion-Page-Options
Seitenmerkmale in den Fusion Page Options
Unter dem Tab Page kannst Du für Deine Seite noch individuelle Paddings definieren und für Beiträge z.B das Featured Image (Vorschaubild) aktivieren oder deaktivieren.

Page-Fusion-Page-Options
Der Header in den Fusion Page Options
Stelle hier bei Bedarf individuelle Einstellung für den Header oder Kopfbereich ein. So kannst Du hier z.B. den kompletten Header deaktivieren um diesen komplett auszublenden – nur für diese Seite. Unter „Main Navigation Menu“ kannst Du eine komplett andere Navigationsleiste auswählen.

Header-Fusion-Page-Options
Der Footer in den Fusion Page Options
Wie für den Header kannst Du auch für den Footer individuelle Einstellungen vornehmen.

Footer-Fusion-Page-Options
Sidebars in den Fusion Page Options
In den Einstellungen für Sidebars kannst Du auswählen, welche Sidebar Du speziell für diese Seite oder Beitrag anzeigen möchtest und wie sie positioniert werden soll.

Sidebars-Fusion-Page-Options
Background in den Fusion Page Options
Für jede Seite oder Beitrag kannst Du hier einen individuellen Hintergrund einstellen. Du kannst ein Hintergrundbild oder eine Hintergrundfarbe verwenden.

Background-Fusion-Page-Options
Page Titel Bar in den Fusion Page Options
Nehme hier Einstellungen vor, wenn Du eine individuelle Page Titel Bar vor Deinem eigentlichen Seiteninhalt anzeigen möchtest.

Page-Titel-Bar-Fusion-Page-Options
Import und Export der Fusion Page Options
Möchtest Du alle Einstellungen für die Fusion Page Options nicht jedesmal wieder von neuen einstellen, hast Du unter dem Tab Import/Export die Möglichkeit die gesamten Einstellungen abzuspeichern und zu importieren.

Import-Export-Fusion-Page-Options

Der Avada Fusion Slider

Mit dem integrierten Fusion Slider des Avada Themes, kannst Du relativ unkompliziert ansprechende Slider erstellen und auf Deiner Seite einsetzen. Er bietet zwar nicht so umfangreiche Optionen wie der Revolution- oder Layerslider, aber Du kannst Headlines und Texte verwenden sowie max. 2 Buttons als Call-to-Action Elemente verwenden.

Die Einstellungen des Fusion Sliders
Um einen neuen Slider zu erstellen gehe zuerst unter Fusion Slider -> Add or Edit Sliders. Dort kannst Du einen neuen Slider anlegen und entsprechend konfigurieren.

Fusion-Slider-Einstellungen
Slides im Fusion Slider
Vergebe am Anfang einen Namen für das Slide. Die eigentlichen Slide-Inhalte legst Du unter Fusion Slider -> Add or Edit Slides fest. Unter Background Typ kannst auswählen zwichen Image, Self-Hosted-Video, YouTube oder Vimeo. Auf der rechten Seite ordnest Du Dein Slide einem vorher erstellten Slider zu. Wenn Du ein Bild als Slide verwenden möchtest, lädst Du diese unter Beitragsbild auf der rechten Seite hoch. In den Slider Content Settings kannst Du Überschriften und Zusatztext mit, Farben, Positionierung und Schriftgrößen festlegen. Unter Slide Link Settings hast Du die Auswahl zwischen Full Slide oder max. 2 Buttons. Letztere werden allerdings als Html shortcode dargestellt.
Kleiner Tipp: Wenn Du mehrere Slides in einem Slider verwenden möchtest, erstelle für die richtige Reihenfolge den Slide der als erstes erscheinen sein soll, als letztes.

Fusion-Slider-Slides
Anzeige Raidboxes