WordPress hat mit der Version 4.7 den Customizer um eine Funktion erweitert, die es erlaubt, mittels kleineren CSS-Anpassungen das Webdesign an die eigenen Wünsche anzupassen. Benötigt man dann jetzt noch ein entsprechendes Plug-in? Wir meinen: Es kommt darauf an. Wir haben ein Plug-in getestet, welches sowohl für Anfänger wie Profis nach wie vor interessant sein kann. Der Plug-in-Test: Site-Origin CSS!

Was ist der CSS-Editor?

Zunächst eine kurze Erklärung: In einem CSS-Editor fügen Sie Ihren eigenen CSS-Code ein. Mit diesem können Sie das Design – sprich Schriftfarben, -größen, -arten, Hintergründe, Abstände und ähnliches – Ihrer Website beeinflussen.

Der Test: Das Plug-in SiteOrigin CSS

Heute geht es um das Plug-in SiteOrigin CSS. Es ist ein CSS-Editor-Plug-in des bekannten Plug-in Autors Greg Priday, welcher ebenfalls den beliebten „Page Builder by SiteOrigin“ entwickelt hat. Dieses kostenlose Plug-in macht durch einige interessante Funktionen auf sich aufmerksam, welche wir Ihnen nun einmal genauer beschreiben.

Was kann SiteOrigin CSS?

Nach der Installation des Plug-ins ist im Backend unter „Design“ der Menüpunkt „Custom CSS“ (Benutzerdefiniertes CSS) zu finden. Hier finden Sie zwei Bereiche:

1. Den Editor-Bereich
2. Die rechte Seitenleiste

SiteOrigin CSS besteht aus zwei Bereichen

In dem Editor-Bereich schreiben Sie den CSS-Code, der sich auf Ihr Webdesign auswirken soll. Als Beispiel: Der von uns eingetragene Code zwingt die ersten Buchstaben eines jeden Absatzes, größer und fetter zu sein, als der Rest.
Die rechte Seitenleiste ist in drei Bereiche aufgeteilt. Im ersten Bereich finden Sie die Möglichkeit, auf die SiteOrigin Premium zu wechseln (das erweitert dieses Plug-in lediglich um eine Google-Font-Auswahl und ist nicht wirklich nötig). Im zweiten Bereich finden Sie ein Video mit Tipps zum CSS-Einstieg. Der letzte und wahrscheinlich praktischste Bereich der Seitenleiste enthält Revisionen, mit denen Sie ältere Versionen Ihres Codes wiederherstellen können, sollten Sie einmal zu schnell falschen Code abgespeichert haben.
Kommen wir nun zurück zum Editor-Bereich und untersuchen ihn etwas genauer. Neben der Eingabefläche und dem Speichern-Button finden wir oben Links zwei weitere Button; einer gekennzeichnet durch ein Augen-Symbol (1) für den visuellen Modus, der andere durch ein Pfeil-Symbol (2) für den Experten-Modus („expanded mode“).

Mit den beiden Buttons in andere Modi wechseln

Der visuelle Modus

Im visuellen Modus erhalten Sie die Möglichkeit, CSS-Anpassungen vorzunehmen und die Änderungen direkt in Ihrer Website mitzuverfolgen. Werfen wir einen genaueren Blick auf den visuellen Modus, erinnert er stark an den Customizer, den Sie von WordPress kennen.
Dieser visuelle Modus besteht aus drei Bereichen:

Der visuelle Modus 

Im größten Bereich können Sie Ihre Website sehen. Hier werden alle Änderungen sofort angezeigt, die Sie per CSS vornehmen. Oberhalb der Website befindet sich außerdem ein Adressfeld. Über die Eingabe einer URL gelangen Sie so schnell zu einer gewünschten Unterseite.

Visueller Modus: Die Website

Unter diesem Bereich finden Sie ein hilfreiches Werkzeug, den Website-Inspektor. Klicken Sie in der Website auf ein bestimmtes Element, zum Beispiel eine Überschrift, so werden Ihnen hier alle Stile angezeigt, die bereits für dieses Element gelten. Haben Sie beispielsweise im CSS angegeben, dass alle Überschriften rot sein sollen, können Sie es hier erkennen.
 Auffällig ist zudem das Lupen-Symbol in der oberen linken Ecke. Durch dieses schalten Sie den Inspektor aus. Das ist zum Beispiel dann sinnvoll, wenn Sie einen Link in ihrer Website anklicken wollen, um zur Unterseite zu gelangen.

Visueller Modus: Der Website-Inspektor

Der letzte und wahrscheinlich interessantestes ist der linke Bereich. Hier sehen Sie eine Vielzahl an Optionen, mit denen Sie jedes Element Ihrer Website anpassen können.

Visueller Modus: Die Seitenleiste

Wie genau das funktioniert, erklären wir Ihnen gleich, es ist kinderleicht. Zuvor ist es wichtig anzumerken, dass sich in dieser Seitenleiste drei Reiter („Tabs“) befinden:

• Der Reiter „Text“ beeinflusst alles rund um die Schrift, ob Farbe, Größe, Schriftart, Ausrichtung, Abstand der Buchstaben etc.
• Im zweiten Reiter regeln die Dekoratives, wie das Einfügen eines Hintergrundbildes oder einer Umrandung.
• Der letzte Reiter „Layout“ lässt Sie sämtliche Abstände der Elemente anpassen.

Die unterschiedlichen Reiter der Seitenleiste

Nun wollen wir Ihnen zeigen, wie Sie dank dieser umfangreichen Optionen selbst ohne große CSS-Kenntnisse Elemente anpassen können. Wie bereits erwähnt, können Sie, sofern der Website-Inspektor aktiviert ist, in der Website Elemente per Klick auswählen. Überfliegt die Maus ein Element, wird dieses farbig markiert, damit Sie wissen, welchen Bereich Sie bearbeiten können.

Farbig dargestellt: mit der Maus wählen Sie das Element

Ein Beispiel: Sie möchten den Seitentitel „Startseite“ anpassen, denn er wirkt sehr klein und fällt nicht wirklich auf. Dafür klicken Sie den Seitentitel einfach in Ihrer Website an und schon wird er von dem Website-Inspektor ausgewählt. Um den Seitentitel Ihren Vorstellungen anzupassen, nutzen Sie danach die Optionen der linken Seitenleiste.

Mit einem Klick ist der Seitentitel ausgewählt

Das Speichern Ihrer Anpassungen ist nicht sehr intuitiv. Bitte befolgen Sie den beschriebenen Weg genau. Zunächst klicken Sie auf das Häkchen-Icon in der oberen rechten Ecke der Seitenleise. Dieses führt Sie dann in den Experten-Modus, der nun folgt.

Nach der Anpassung zurück zum Anfang

Experten-Modus

Den Experten-Modus erreichen Sie, wenn Sie zuvor im Editor-Bereich anstelle des Buttons mit dem Augen-Symbol den zweiten Button mit dem Pfeil-Symbol betätigen. Oder, wenn Sie – wie im vorherigen Absatz beschrieben – den Haken im visuellen Modus gesetzt haben.
Der Experten-Modus unterscheidet sich von dem „visuellen Modus“ in sofern, dass in der Seitenleiste keine klickbaren Optionen mehr zu sehen sind. Stattdessen wurde Ihre Anpassungen in CSS-Code umgewandelt. Erfahrene Programmierer nutzen gern direkt diesen Experten-Modus. Sie können hier Ihren Code per Hand eingeben und die Änderungen live mitverfolgen.
Zum Speichern Ihrer Eingaben müssen Sie auf den Button mit den Pfeilen (2) klicken. Der andere Button (1) führt Sie in den visuelle Modus.

Der erweiterte Modus: lediglich die Seitenleiste sieht anders aus

Sie werde sich nun im Editor-Bereich wiederfinden, wo Sie die Möglichkeit haben, Ihren CSS-Code zu überarbeiten und zu Speichern.

Der Code im Editor wurde aktualisiert, also speichern Sie lieber

Welche weitere Vorteile liefert das Plug-in?

• Der Editor zeigt beim Tippen des Codes Vorschläge zum Vervollständigen des Codes
• Die Revisionen sind hilfreiche Zwischenspeicherungen/Backups
• Das Plug-in soll laut Hersteller mit jedem Theme funktionieren
• Das Plug-in speichert den Code Theme-abhängig. Wechseln Sie zu einem neuen Theme, ist der CSS-Editor leer und Sie können frischen Code einfügen. Wechseln Sie zum alten Theme, ist der alte Code wieder vorhanden und funktionsfähig.

Welche Nachteile?

Für gewöhnlich erwähnen wir gerne auch die Nachteile eines Plug-ins. Bis auf die etwas sperrige Speicherung ist uns nicht wirklich etwas Nachteiliges aufgefallen. Der bisher einzig negative Kommentar auf der Plug-in-Seite von WordPress.org ist unbegründet. Auf den Support soll verlass sein.

Fazit:

Wir empfehlen dieses Plug-in jedem, der sich mit CSS beschäftigt, sei es Anfänger oder Profi. SiteOrigin CSS bietet für beide Gruppen die passenden Optionen. Zudem regt der visuelle Modus zum Experimentieren an. Ein guter Weg zu einem individuellen Webdesign.

Quelle Bilder: Eigene Screenshots