Der Style Customizer im YOOtheme Pro für Joomla und WordPress - Wie sich ein durchgängiges Erscheinungsbild positiv auf Ihre Webseite auswirkt
Veröffentlicht am 11.11.2024 von Elisa Foltyn
In der Welt des Webdesigns ist das Erscheinungsbild einer Webseite entscheidend für den ersten Eindruck. Anstatt immer neue Elemente zu entwerfen und Custom CSS hinzuzufügen, sollten Webdesigner sich für ein Projekt eine umfassend gepflegte „Bibliothek“ von Stilen und Komponenten anlegen. Mit einem durchgängigen Design stärkt man nicht nur die Markenidentität des Unternehmens, sondern verbessert auch die Nutzerführung, indem eine vertraute Umgebung für den Besucher geschaffen wird. Man fördert eine schnellere Orientierung der Nutzer auf der Webseite, hält sie länger auf der Seite und verwandelt sie in wiederkehrende Besucher.
Vielleicht kennen Sie ja schon die Möglichkeiten, die Variablen von CSS-Frameworks wie Bootstrap oder UIkit zu verändern und somit ein durchgängiges Design durch wiederverwendbare Komponenten und vordefinierte Stile zu erreichen. Diese Frameworks helfen Designern und Entwicklern, Webseiten schneller zu erstellen und dabei das Layout über verschiedene Seiten hinweg einheitlich zu halten. Meist enthalten diese Frameworks ein Paket an sogenannten Less-Dateien, welche dann in einer einzigen CSS-Datei kompiliert werden. In zentralen Less-Datei lassen sich Farbschemen, Schriften und mehr definieren, was eine solide Grundlage für das gesamte Projekt schafft.
In diesem Beitrag geht es darum, wie man mit YOOtheme Pro – einem Page Builder für Joomla und WordPress – diese Variablen ganz einfach über eine grafische Benutzeroberfläche anpassen kann.
Warum ein durchgängiges Design?
Die Herausforderung der Kreativität: Im ersten Moment mag die Nutzung vordefinierter Stile für einen kreativen Webdesigner schockierend wirken – verliert man dadurch nicht die Individualität? Doch Konsistenz sollte nicht mit mangelnder Kreativität verwechselt werden. Ein durchgehendes Design muss nicht gleich heißen, dass alles eintönig wird; es ermöglicht vielmehr, einen hochwertigen Stil zu erreichen, der bei den Webseiten-Besuchern gut ankommt. Denn ein ansprechendes, professionelles Erscheinungsbild erfordert genau diese Konsistenz.
Effizienz im Entwicklungsprozess: Obwohl Entwickler die Änderungen in der CSS-Datei gut in ihrer Entwicklungsumgebung verfolgen können, kann die Präsentation dieser Live-Änderungen eine Herausforderung darstellen. Viele Teams erstellen daher zunächst Prototypen in Tools wie Figma. Diese Prototypen werden dann an das Frontend-Team übergeben. Allerdings können kurzfristige Änderungen zusätzliche Abstimmungsschleifen erfordern und den Entwicklungsprozess verlangsamen. Wie schön wäre es doch, wenn der Prototyp schon gleich die Webseite wäre?
Und hier kommt ein professioneller Page Builder ins Spiel, welcher für Joomla und auch für WordPress erhältlich ist: YOOtheme Pro.
Was ist YOOtheme Pro und wie nutzt man den Style Customizer?
YOOtheme Pro ist ein Page Builder-System, welches speziell für Joomla und WordPress entwickelt wurde. Aber es ist noch viel mehr als das. Bisher richteten sich Page Builder vornehmlich an Anwender mit einer Vorliebe für DIY-Webdesign, doch mit der Einführung von YOOtheme Pro erweitert sich das Spektrum: Nicht zuletzt wegen der Möglichkeit von dynamischen Content, setzen nun auch professionelle Entwickler zunehmend auf dieses Tool. Dies markiert eine signifikante Erweiterung des Nutzerkreises und ein neues Kapitel in der Entwicklung von Page Buildern.
Mit seinem einzigartigen „Style Customizer“ bietet YOOtheme Pro eine intuitive Benutzeroberfläche, durch die Nutzer umfangreiche Einstellungen für das CSS-Framework einfach über eine Benutzeroberfläche vornehmen können. Mit nur wenigen Klicks lassen sich Farben, Schriften, Layouts und andere Designelemente anpassen, was ein konsistentes Erscheinungsbild über alle Seiten und Designelemente hinweg gewährleistet.
Schauen wir mal kurz rein, wie der Style Customizer funktioniert:
Hier sehen wir zunächst eine Auswahl aus mehreren vordefinierten „Themes“. YOOtheme verkauft keine einzelnen Templates, sondern vordefinierte „Theme Packages“. Kauft man eines, kauft man alle – man muss sich also nicht zuerst für ein bestimmtes Theme entscheiden. Hier sind die Stile bereits vordefiniert und bieten einen guten Startpunkt für Anfänger.
Ich empfehle immer das Paket „UIkit“ zu wählen, da dieses das „leichteste“ aller Pakete und ein guter Ausgangspunkt für eine schnelle Performance ist. Die anderen Pakete enthalten bereits zusätzliche Effekte und Mikroanimationen, was bei einem individuellen Design ja dann eher eine Entscheidung des Webdesigners bzw. Ihre ist.
In dieser Abbildung sehen Sie auch oben den Reiter „My Styles“ – hier können Sie Ihre eigenen Anpassungen in einer Bibliothek speichern, herunterladen und auch auf jeder Seite, die mit YOOtheme Pro läuft, wieder hochladen und nutzen. Ein weiterer Clou: Die exportierten Stile lassen sich zwischen Joomla und WordPress innerhalb von YOOtheme Pro teilen. So kann man ein Theme, welches ursprünglich in WordPress erstellt wurde, einfach zu Joomla migrieren, oder bestimmte Stilvorlieben als eigenen Initialstil schon mal abspeichern.
Der YOOtheme Pro Style Customizer: Auf der linken Seite sehen wir die Auswahl des Grundstils, in diesem Fall „UIkit“, darunter ein Radio-Feld zum Anzeigen einer Vorschau aller UI-Elemente und darunter eine gruppierte Auflistung von Elementen, in denen man die hinterlegten Variablen anpassen kann.
Tipp: Für alle Anpassungen, die nicht über den Customizer direkt vorgenommen werden können, kann entweder ein custom.less oder gar ein komplett eigenes Less-Theme in einem Childtemplate erstellt werden. Dies hätte dann den weiteren Vorteil, dass man nicht benötigte Komponenten weglassen kann und das sowieso schon schnelle und schlanke CSS-Framework (in Joomla 5.1 durchgängig 100 Punkte bei Google Pagespeed) noch performanter macht.
Aktiviert man das Feld „Vorschau aller UI Elemente“ bekommt man eine Komplettübersicht über das Aussehen aller Komponenten. Man kann sich aber auch stattdessen ganz normal auf der Live-Seite bewegen und den Stil „in Action“ sehen.
Hovert man mit der Maus über ein bestimmtes Element seiner Live-Site, gibt YOOtheme einen Hinweis darauf, welche Abschnitte für das Aussehen von diesem Element verantwortlich sind und wo dieser Wert geändert werden kann.
Sehen wir uns den Bereich „Global“ an. Hier werden die grundsätzlichen, zentralen Farben eingestellt. Die Komponenten und Abschnitte erben diese Farben dann automatisch, können aber auch in ihrem eigenen Abschnitt abweichende Werte erhalten.
Schon mit kleinen Anpassungen lässt sich ein gewisser Individualisierungsgrad herstellen.
Hovert man beispielsweise über die Bezeichnung eines bestimmten Stils, erfährt man dort die Variable, die man dann an anderen Stellen weiterverwenden kann. Beispiel: Ich stelle den Primary Background auf Grün und möchte, dass alle success Buttons auch den gleichen Grünton konsistent benutzen. Dann setze ich dort den Wert @global-primary-background ein und stelle sicher, dass immer diese globale Farbe verwendet wird.
Und wenn man mit der Maus über das Element fährt, sieht man dahinter ein A. Dies steht dafür, dass der Wert automatisch aus einer anderen Variable gezogen wird.
Die Anpassungen werden entweder über einen Farbwähler, einen Dropdown mit Schriftarten oder über genaue Angaben von Pixel, Prozent oder rem-Werten gemacht.
Nachdem man die globalen Einstellungen angepasst hat, kann man dann ins Detail gehen und zum Beispiel speziell den Stil der Navbar oder der Buttons anpassen.
Detailansicht Anpassungen der Buttons
Unten links zu sehen: Exportmöglichkeit der Less-Dateien und die Möglichkeit, alle Anpassungen zurückzusetzen.
Farben, Schriften und Formen sind nicht genug?
Um Individualität in ein bestehendes Design zu integrieren, besonders wenn man ein CSS-Framework verwendet, kann man verschiedene Design-Elemente und -techniken nutzen, die der Webseite ein unverwechselbares Aussehen verleihen. Dazu gehören Brand-Pattern, Mikro-Animationen und ein kreativer Umgang mit Typografie und Farben.
Übrigens: YOOtheme Pro bietet die Möglichkeit, bestimmte Webseiten-Elemente des Builders in einer Bibliothek zu speichern. Dieser Ansatz ist inspiriert von Design-Systems, die in der Entwicklung moderner Websites und Anwendungen immer mehr an Bedeutung gewinnen. Auch wenn es sich nicht um ein Design-System im eigentlichen Sinne handelt, bietet das Speichern von Elementen in einer Bibliothek doch einen ersten Schritt in diese Richtung. Durch das Speichern von Designelementen in einer Bibliothek können Entwickler und Designer Zeit sparen und die Konsistenz über verschiedene Projekte hinweg sicherstellen.
Fazit: Der Style Customizer im YOOtheme Pro
Der Style Customizer von YOOtheme Pro für Joomla und WordPress ist die Antwort für Webdesigner, die ein einheitliches und dennoch individuelles Design für ihre Seiten anstreben. Durch die einfache Handhabung eignet es sich sogar für das Erstellen von Prototypen. Durch die schnelle Anpassung von Stilen und die Möglichkeit, Elemente in einer Bibliothek zu speichern, wird die Erstellung hochwertiger und konsistenter Webseiten erleichtert, was letztendlich zu einer verbesserten Benutzererfahrung und einer stärkeren Markenidentität führt.
Der Autor:
