Avada Theme: Mobile Ansichten bearbeiten & optimieren

Das Avada Theme bietet zur Optimierung von mobilen Ansichten einige Stellschrauben sowohl in den Theme Optionen aber vor allem im Fusion Builder. In diesem Beitrag zeige ich Dir 3 Avada Tipps um mobile Ansichten zu bearbeiten und zu optimieren.

Avada Tipp Nr. 1: Die Responsive Breakpoints festlegen

Unter den Theme Options im Bereich Responsive legst Du zunächst die grundlegenden Einstellungen zum Verhalten auf mobilen Geräten fest.

Dort findest Du zunächst die Responsive Breakpoints. Diese Werte legen fest, ab welcher Displaygröße die gesamte Seite in die mobile Ansicht wechseln soll. Du kannst hier die Werte für Grids (Blog oder Portfolio), Header, Seiteninhalte, Sidebars und Elementen festlegen.

Die Responsive Breakpoints festlegen

Responsive Typography Einstellungen

Im unteren Bereich der Responsive Einstellungen findest Du die interessantesten Einstellungen für Typografie. Unter Responsive Typography Sensitivity legst Du einen Wert fest, wie stark sich die Schriftgrößen auf der Seite auf mobilen Geräten verändern sollen.

Lese auch die Dokumentation des Avada Theme zu den allgemeinen Responsive Options

Responsive Typography Einstellungen

Mit dem Wert 0 wird die reaktionsfähige Typografie deaktiviert, während der Wert 1 die maximale Reaktionsfähigkeit darstellt. Der Minimum Font Size Factor darunter wird dabei verwendet, um den Multiplikationsfaktor für die Mindestschriftgröße zu bestimmen.

Die Werte beziehen sich auf die Schriftgröße der Body Font Size die unter den Theme Optionen Typography festgelegt hast.

Beispiel:
Wenn die Body Font Size auf 18px eingestellt ist und mit dem Minimum font size factor 1,5 multipliziert wird, ergibt sich:

1,5 * 18 = 27

Headlines, die kleiner als 27px sind, reagieren dann nicht responsiv.
Somit musst Du entweder die Schriftgröße des Body Fonts oder den Faktor für die Mindestschriftgröße erhöhen oder die Schriftgröße der Headlines auf einen höheren Wert als 27px einstellen. Mit den Werten musst Du also etwas spielen und im Frontend die mobile Ansicht aktivieren um die Veränderungen zu sehen.

Zu bemerken sie noch, das der Avada Slider eigene Einstellungen zu dem responsiven Verhalten von Schriften hat.

Lese auch hier die offizielle englische Dokumentation von Theme Fusion zu Responisve Typography

Avada Tipp Nr. 2: Container und Column Visibility

Für jeden Container und jede Column steht in der jeweiligen General Einstellungen ein Bereich zu Sichtbarkeit zu Verfügung.
Damit kannst Du unterschiedliche Sichtbarkeitsregeln festlegen:

  • Small Screen
  • Medium Screen
  • und Large Screen

Per default sind alle 3 Buttons blau hinterlegt was anzeigt, das dieser Container oder Column auf allen Geräten sichtbar ist. Du kannst nun zum Beispiel einen Container nur für „Large Screens“ festlegen in dem du die Buttons für Small Screen und Medium Screen deaktivierst.
Das ist eine sehr praktische Funktion um bestimmte Container auf mobilen Geräten einfach auszublenden.

Sichtbarkeit von Container einstellen im Avada Theme

Sichtbarkeit von Container einstellen im Avada Theme

Avada Tipp Nr. 3: Reihenfolgen von Containern, Columns und Elementen festlegen

Oben rechts in den jeweiligen Einstellungen von Containern, Columns oder Elementen sind 3 Icons für Smartphone, Tablet und Desktop sichtbar. In der linken Leiste zum bearbeiten von Columns findest Du im Tab Design einen Wert mit der Bezeichnung Order. Hier kannst Du nun für die aktuell ausgewählte Spalte einen Wert eingeben um die Reihenfolge (Order) zu bestimmen.
Die Reihenfolge legt sich wie folgt fest:

  • Wert 0 = 1. Stelle
  • Wert 1 = 2. Stelle

Wert 0 steht dann an oberster Stelle, Wert 1 reiht sich dann darunter. Hast Du z.B. in der Desktop Ansicht 2 Spalten – links Text – rechts Bild, würde in der mobilen Ansicht als erstes der Text erscheinen und darunter das Bild. Mit Hilfe der Order-Reihenfolge kannst Du das für die mobile Ansicht umdrehen.

Avada Theme -Reihenfolgen von Containern, Columns und Elementen

Avada Theme – Reihenfolgen von Containern, Columns und Elementen festlegen

Die mobilen Icons Funktion sind ebenso sehr praktisch um z.B. unterschiedliche Einstellungen für ein Headline Element festzulegen. Am besten kannst Du mit den Einstellungen im Live Editor arbeiten, da Du das Ergebnis dort sofort sehen kannst. Bearbeite Deine Seite im Live Editor und schalte oben in der Menüleiste des Live Editors die Ansicht des Desktop Icons einmal auf Smartphone um.

Nun kannst Du unabhängig von der Desktop Ansicht andere Werte z.b. für Alignment, Paddings oder Margins festlegen. In der Seitenleiste im Live Editor wird Dir zur Hilfe auch noch ein kleines graues Icon der gewählten Ansicht angezeigt.

Fazit

Um im Avada Theme die mobilen Ansichten zu bearbeiten und zu optimieren gibt es einge Stellschrauben. In den Theme Options legst du im Bereich Responsive die Grundeinstellungen fest. Diese bestimmen dann das gesamte Verhalten Deiner Seite im responsiven Modus. Der Bereich Responsive Typography Sensitivity steht im engen Zusammenhang mit den gewählten Schriftgrößen in den Typografie Einstellungen.

Der Live Editor des Avada Themes hilft sehr gut dabei, nach dem Aufbau einer Seite noch weitere Optimierungen für die mobilen Ansichten Deiner Seite vorzunehmen. Ich selbst arbeite zum Aufbau von Seiteninhalten immer noch zunächst im klassischen Fusion Editor um das Grundgerüst aus Container und Spalten aufzubauen. Für Korrekturen und Feineinstellungen ist der Live Editor aber für mich unverzichtbar geworden.

Wenn Dir der Beitrag gefallen hat, hinterlasse gern einen Kommentar. Wenn Du noch Anregungen hast, wie Du Deine Webseite im Avada Theme für mobilen Ansichten bearbeitest und optimierst schreibe mir gern.

Titelbild: Souvik Banerjee / unsplash.com