Avada 4.0 – die neuen Einstellungen.

Nach der großen Resonanz auf meinen vorherigen Beitrag über die Avada Themenoptionen, habe ich mich entschlossen, natürlich auch über das neue Update des Themes auf Version 4 einen Beitrag zu schreiben. Aufgrund der vielen Einstellungen, unterteile ich den Beitrag in 2 Teile.

Ich möchte den Anwendern und denen, die sich vor dem Kauf des Themes einen Überblick über die Möglichkeiten des Avada Themes verschaffen wollen, einen Einblick in die Backend Optionen geben.

Mit dem Update des Avada Themes auf die Version 4 haben die Entwickler des Themes (TeamFusion) einige Neuerungen einfliessen lassen. So ist die Optik des Theme-Options Bereichs komplett überarbeitet worden und erscheint jetzt in einem reduzierten Flat-Design. Aber nicht nur äußerlich sondern auch Inhaltlich haben die Entwickler einige Veränderungen eingeführt.

Avada Theme 4 – Das ist neu

Bedingte Theme Optionen

Die Einstellungen, die angezeigt werden sind bedingte Optionen. Das bedeutet das wenn an anderer Stelle ggf. schon globale Voreinstellungen gemacht wurden, sieht der Benutzer auch nur noch die zur Verfügung stehenden restlichen Einstellungen. Gestützt auf der aktuellen Konfiguration werden unbenutzte Optionen außer Sicht gelassen.

Benutzerdefinierte Wiederholungs Felder

Das Wiederholungs-Feld, erleichtert es, unbegrenzte soziale Netzwerke, Icons oder eigene Schrifttypen hinzuzufügen.

Kombinierte Schrift Einstellungen

Alle Typografie Optionen sind in einer einfachen Übersicht dargestellt, um Einstellung und Änderungen in einer sofortigen Vorschau zu sehen.

Ein neuer Color Picker

Das neu gestaltete Farbaufnahme Dialogfeld oder Color Picker, integriert Farb- und Opazitäts Schieber in einem. So kann jetzt auch die Transparenz jeder Farbe definiert werden.

Intuitive Suchoption

Das neue globale Suchfeld ermöglicht es, sehr schnell eine Option anhand von Schlüsselwörtern aufzufinden.

Externe Plugins Dialogfeld

Je nach aktivierten mitgelieferten Plugin, werden weitere Einstellungen in den Theme Options angezeigt.

Neues minimal Header Layout Element

Ein neues minimalistisches Flyout Header Layout (Hamburger Menü) mit Suchfunktion ist neu hinzugekommen.

Die neuen Einstellungen der Avada 4 Theme Options im Detail

Tab1 – Layout

In den Layout Optionen lassen sich die globalen Einstellungen des Seitendesigns einstellen.
Wahlweise lässt sich die Seite im „Boxed“ oder „Wide“ Modus einstellen, ebenso die Seitenbreite in Pixel definieren. Ebenso lassen sich hier Paddings und Margins des Seitendesigns hier einstellen. Darüber hinaus können weiter unten die prozentualen Breiten der Sidebars eingestellt werden.

Tab2 – Menü

Unter Main Menu können jetzt mit einem Schieberegler Breiten, Höhen und Abstände (Padding) sowie die Typografie und Farben der Hauptnavigation festgelegt werden. Genaue Einstellungen für Untermenüpunkte (Dropdown) sind ebenso möglich.

Das bezieht sich auf den neu hinzugekommenen Header Nr. 6 (Minimal Menü). Die Einstellungen erscheinen auch nur, wenn in den Header-Optionen der entsprechende Header ausgewählt wurde.

Im (Zweite Navigation im Headerbereich oben rechts) können ebenfalls Farben, Hintergründe und Schriftarten festgelegt werden. Auch diese Einstellungen erscheinen nur, wenn in den Header-Optionen das entsprechende Headerlayout ausgewählt wurde.

Unter kann das mobile Design des Menüs eingestellt werden. Auch hier lassen sich Farben, Abstände und Schriftgrößen einstellen.

Für das können die maximale Breite des Menüs, Schriftgröße, Menütrenner und Abstände eingestellt werden.

Tab 3 - Responsive

Die Responsiven Einstellung erlauben es, auf die mobile Ansicht der Webseite Einfluss zu nehmen. Generell kann das Responsive Design an oder aus gestellt werden (durchaus noch gewünscht), die Breakpoints in Pixel angegeben werden (ab wann das Design in die mobile Ansicht wechselt), sowie das Zoomen auf Mobilen Endgeräten aktivieren oder deaktivieren.

Tab 4 – Colors

Im Dialogfeld für Farben können hier die generellen Farben für die gesamte Seite festgelegt werden. In den einzelnen Unterpunkten oder Tabs können aber abweichend von dieser generellen Farbgebung, spezielle weitere Farbauszeichnungen vorgenommen werden.

Tab 5 - Header

Im ersten Tab – Header Content – werden die generellen Einstellungen für den Header vorgenommen. Die Header Position definiert, wo der Header Content (Logo, Menü) erscheinen soll (Top, Left, Right). Wählt man hier z.B. „Left“, so erscheint das Logo und die Menüleiste links von der Seite. Belässt man die Einstellung auf „Top“, so hat man die Auswahl zwischen 6 verschieden Header-Designs. Je nach Auswahl des Header-Layouts, können weiter unten Einstellung bezüglich der zusätzlichen Inhalte (Social Links, Kontakt Infos, weitere Navigation und Banner) bestimmt werden.

Unter Header Background Image lässt sich ein Hintergrundbild für den Headerbereich definieren.

Im Unterpunkt Header Styling können Padding Abstände, Ränder, Hintergrundfarbe sowie Schriftgrößen und Farben definiert werden.

Der Bereich Sticky Header hält Einstellungen für das verhalten des Headers beim scrollen nach unten bereit. Ist die Option Sticky Header aktiviert, so bleibt das Logo und die Navigation beim scrollen nach unten am oberen Browserrand stehen.

Tab 6 – Logo

In denLogo-Optionen können neben dem Upload und der Platzierung des Standard-Logos (links, mittig, rechts) auch die Abstände (Logo Margins) festgelegt werden. Zusätzlich können Logos für Retina-Displays (doppelt Bildauflösung), dem Sticky-Header und das Mobile Logo hochgeladen werden.

Im Unterpunkt Favicon kann das Standardlogo (16×16 Pixel) sowie für iPhone und iPad hochgeladen werden.

Tab 7 – Page Titel Bar

Die Page Titelbar steht bei Aktivierung immer oben Anfang des Seiteninhalts und zeigt den jeweiligen Seitentitel und eine kleine Breadcrump-Navigation. Die Anzeige lässt sich aber auch individuell in Page-Options aktivieren oder deaktivieren. In den Optionen lassen sich Anzeigeoptionen (Titelbar und Inhalt, nur Inhalt), Höhenangaben, Hintergrundfarben und Schriftgrößen und Farben definieren. Ebenso lässt sich auch ein Hintergrundbild einfügen.

Im Unterpunkt Breadcrumps können Einstellungen bezüglich der Breadcrumb-Navigation festgelegt werden, wie Separator, Schriftgröße und Farben.

Tab 8 – Sliding Bar

Die Sliding Bar – gekennzeichnet durch ein kleines Plus-Zeichen oben rechts auf der Webseite – ist ein weiterer Bereich für Widgets, die nur durch klick auf das Pluszeichen nach unten aufklappen. In den Einstellungen lässt sich dieses Feature generell an oder ausschalten, aktivieren oder deaktivieren in den mobilen Ansichten, sowie den automatisch geöffneten Zustand beim Seitenaufruf an oder ausschalten. Weiterhin können bis zu 6 Spalten für Widgets eingestellt werden.
Das Design lässt sich anpassen mittels Auswahl der Hintergrundfarbe, Farbe für vertikale Trenner, Iconfarbe, Schriftgrößen- und farben, Linkfarben und Linienfarben.

Tab 9 - Footer

In den Footer Einstellungen lässt sich einstellen ob Footer Widgets angezeigt werden sollen und die Anzahl der Spalten (bis zu 6). Neu ist das sich die Widgets jetzt zentrieren lassen und weitere Effekte wie Parallax Background möglich sind. Die Copyright Bar kann an oder ausgeschaltet werden und der Inhalt lässt sich jetzt per on/off zentrieren. Darunter ist dann das Feld für den Copyright Inhalt.

Im Untermenü Footer Background Image lässt sich ein Hintergrundbild für den Footerbereich laden.

Im letzten Untermenü Footer Styling kann definiert werden ob der Footer 100% Seitenbreite einnehmen soll per on/off.
Neu ist auch hier die individuelle Padding Einstellungen für den gesamten Footer Bereich. Weiterhin lassen sich Hintergrundfarbe und Trennlinien (Borders) konfigurieren. Neben weiteren Einstellungen können hier auch Schriften und deren Farben eingestellt werden.