CSS zu erlernen und die eigene Website anzupassen ist nicht schwer. Für Einsteiger war es aber bisher sehr umständlich, die CSS-Anpassungen in WordPress selbst vorzunehmen. Mit dem neuen Plug-in „Advanced CSS Editor“ ist dieses Problem Geschichte, denn Sie nehmen die Anpassungen direkt in einer Vorschau vor. So können Sie die Veränderungen direkt mitverfolgen und sichern. Und das für getrennt für alle Gerätegrößen. Lesen Sie in diesem Beitrag, wie einfach Sie künftig Ihr Webdesign grenzenlos individualisieren können.

Worum geht es?

Bereits vor ca. eineinhalb Jahren haben wir einen Beitrag darüber geschrieben „wie Sie das Design Ihres WordPress Themes anpassen“ und dabei auch ein wenig CSS mit einbezogen. Für die, denen CSS nichts sagt: CSS bedeutet nicht weniger als „Cascading Style Sheets“ (zu Deutsch: gestufte Stilvorlagen) und ermöglicht es, das Aussehen (Farbe, Schriftgröße, Hintergrundfarbe usw.) ausgewählter Elemente einer Website zu verändern. Das ist immer dann hilfreich, wenn das eigene Theme nur bedingte Anpassungen zulässt.
Für gewöhnlich nutzen wir von Elbnetz für diese Anpassungen das Plug-in Simple Custom CSS, denn es sammelt unsere Anpassungen leicht erreichbar im WordPress-Backend und lässt die Style.css des Themes in seinem Originalzustand. Doch vor knapp einem Monat wurde ein neues Plug-in veröffentlicht, welches unsere Aufmerksamkeit im Sturm erobert hat.

Arbeitserleichterung mit Advanced CSS Editor

Die Rede ist von dem Advanced CSS Editor, ein sehr praktisches Plug-in, welches das Anpassen von CSS-Code innerhalb von WordPress zeitsparender und übersichtlicher macht. Dieses Plug-in ermöglicht es nämlich, alle die Änderungen am CSS zeitgleich im Bereich Anpassen anzuzeigen. Das beschleunigt das Arbeiten mit CSS deutlich, denn zuvor musste erst im Frontend das Element gefunden, dann im Backend der CSS-Code eingetragen und zuletzt die Änderung wieder im Frontend überprüft werden. Advanced CSS Editor erspart einem somit das zeitaufwändige hin und herspringen zwischen dem Font- und Backend.

Was macht den Advanced CSS Editor aus?

Hier sehen Sie, wie der Advanced CSS Editor im Anpassen-Bereich aussieht:

Links im Bild der Advanced CSS Editor

Wie Sie sehen können ist es möglich, verschiedene „Screen Sizes“, also Bildschirmgrößen auszuwählen. die Weltkugel bedeutet, alle Änderungen am CSS-Code werden global, also auf allen Bildschirmgrößen angewendet. Das Computer-Symbol bedeutet dementsprechend, dass Code in diesem Bereich nur auf  Computer- und Laptop-Bildschirmen verwendet wird. Mit dem Tablett- und Smartphone-Symbol erreicht man, dass der Code nur für diese Geräte angewendet wird. So erhält man eine übersichtliche Unterteilung.
Damit Sie genau verstehen, was das Plug-in so praktisch macht, haben wir ein kurzes Beispiel für Sie vorbereitet.

Die mobile Ansicht der Website

Hier können Sie unsere Test-Website sehen, auf der wir eine Starseite mit einigen Bildern und Texten, sowie Überschriften eingefügt haben. Die Überschriften sind nun allerdings auf dem Smartphone deutlich zu groß dargestellt und unser Theme lässt ein entsprechende Anpassung in den Theme-Optionen nicht zu. Praktischer Weise zeigt der Advanced CSS Editor Ihnen die Website in der gewählten Bildschirmgröße an, wodurch Sie Probleme wie diese ziemlich schnell erkennen können.

Mit wenig Code übersichtlich anpassen

Wenn Sie nun in dem Feld Phone CSS die Schriftgröße der Überschrift H3 ändern (font-size = Schriftgröße), wird diese Änderung im rechten Fenster wie gewohnt als Vorschau angezeigt. Sie können also in Ruhe ausprobieren, welche Größe auf dem Smartphone am besten passt, in unserem Fall waren es 18px. Erst wenn Sie Speichern und Publizieren klicken, wird Ihre Änderung schlussendlich übernommen.

Welche Bildschirmgrößen decken die einzelnen Optionen ab?

Der Übersicht halber haben wir Ihnen notiert, für welche Bildschirmgrößen welcher Bereich genutzt werden sollte. Global wirkt wie erwähnt für alle Bildschirmgrößen und wird deshalb außer Acht gelassen:

Die Bildschirme im Überblick

Fazit

Für all diejenigen, die sich bereits mit CSS auseinandergesetzt haben, ist dieses Plug-in wirklich ein Zeitersparnis. Für alle anderen lohnt es sich zum einen, CSS zu lernen, zumal es eine wirklich einfache und selbst erklärende Codesprache ist. Zum anderen können Sie mit dem Plug-in zusätzlich ganz einfach die mobilen Ansichten Ihrer Website überprüfen.

Quelle Bilder: Eigene Screenshots