Wenn Sie einer der vielen Anfänger sind, die Ihr WordPress-Site-Design anpassen möchten, ohne CSS zu berühren, dann haben Sie Glück. Mit dem CSS Hero-Plugin für WordPress können Sie Designanpassungen vornehmen, ohne eine einzige Codezeile zu berühren. In diesem aktualisierten CSS Hero-Test zeigen wir Ihnen, wie Sie CSS Hero verwenden, um Ihre Website anzupassen, und warum wir glauben, dass es eines der Plugins ist, die jeder WordPress-Anfänger ausprobieren sollte.
Unser CSS Hero Review
CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme entwerfen können, ohne eine einzige Codezeile schreiben zu müssen (kein HTML oder CSS erforderlich).
Sie haben die Möglichkeit, Änderungen rückgängig zu machen, was für Anfänger äußerst hilfreich ist. Alle Änderungen werden als zusätzliches Stylesheet gespeichert, was bedeutet, dass Sie Ihr WordPress-Theme aktualisieren können, ohne sich Sorgen machen zu müssen, dass die Änderungen verloren gehen.
Wenn Sie Designer oder Entwickler sind, werden Sie CSS Hero genauso gut finden. Es funktioniert gut mit allen gängigen WordPress-Themes und -Frameworks. Sie können schnell Änderungen an einem untergeordneten Thema vornehmen und es dann zur Verwendung auf der Website eines Kunden exportieren.
CSS Hero kann Ihnen bei Designanpassungen viel Zeit und Frust ersparen.
Normalerweise sind wir sehr skeptisch gegenüber Point-and-Click-Design-Anpassungs-Plugins aufgrund ihrer aufgeblähten Größe. CSS Hero hat uns jedoch von Anfang an wirklich beeindruckt.
Wenn Sie uns nach einer ehrlichen CSS Hero-Rezension fragen, geben wir 5 von 5 Sternen.
So verwenden Sie CSS Hero zum Anpassen Ihres WordPress-Themes
Zuerst müssen Sie das CSS Hero-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Es ist ein Premium-WordPress-Plugin mit Preisen ab 29 $ für eine einzelne Site (die Investition lohnt sich absolut, wenn man bedenkt, dass Sie Zeit und Mühe sparen).
Verwenden Sie den CSS Hero-Gutscheincode: WPAnfänger um einen Sonderrabatt von 34% zu erhalten. Wenn Sie den PRO-Plan kaufen, erhalten Sie mit demselben Code satte 40% Rabatt.
Nach der Aktivierung werden Sie weitergeleitet, um Ihren CSS Hero-Lizenzschlüssel zu erhalten. Folgen Sie einfach den Anweisungen auf dem Bildschirm, und Sie werden mit wenigen Klicks zu Ihrer Website zurückgeleitet.
Das Ziel von CSS Hero ist es, Ihnen eine WYSIWG-Schnittstelle (What You See Is What You Get) zum Bearbeiten Ihres Themes bereitzustellen. Besuchen Sie einfach Ihre Website, während Sie eingeloggt sind, und Sie werden den CSS Hero-Button in der WordPress-Admin-Leiste bemerken.
Wenn Sie auf die Schaltfläche klicken, wird Ihre Site in die Live-Vorschau umgewandelt. Sie können jetzt die CSS Hero-Symbolleiste sehen.
Als nächstes klicken Sie einfach auf ein beliebiges Element auf Ihrer Website und CSS Hero zeigt Ihnen die CSS-Eigenschaften an, die Ihr Theme für dieses bestimmte Element verwendet.
Dazu gehören allgemeine CSS-Eigenschaften für das ausgewählte Element wie Hintergrund, Typografie, Rahmen, Abstände und mehr. Sie können auf jedes Element klicken, um es zu erweitern, und dann die CSS-Eigenschaften über eine einfache Benutzeroberfläche bearbeiten.
Wenn Sie Änderungen vornehmen, werden Sie feststellen, dass das benutzerdefinierte CSS unten auf magische Weise erscheint. Wenn Sie CSS lernen, ist es hilfreich zu sehen, wie verschiedene CSS-Änderungen auf das Ergebnis in der Live-Vorschau angewendet werden.
Haben Sie Probleme, lizenzfreie Bilder für Ihre Website zu finden? CSS Hero verfügt über eine integrierte Unsplash-Integration, die es Ihnen ermöglicht, schöne Fotos im Design Ihrer Website zu durchsuchen, zu suchen und zu verwenden.
CSS Hero enthält auch einige vorgefertigte Snippets, die Sie auf verschiedene Elemente Ihrer Website anwenden können. Wechseln Sie einfach zum Tab Snippets in der linken Spalte.
Wenn Sie Änderungen an Ihrer Website vornehmen, speichert CSS Hero diese Änderungen automatisch, veröffentlicht sie jedoch nicht. Um diese Änderungen auf Ihre Live-Website anzuwenden, müssen Sie auf die Schaltfläche Speichern und veröffentlichen klicken.
So machen Sie Änderungen in CSS Hero rückgängig
Eine der besten Funktionen von CSS Hero ist die Möglichkeit, alle vorgenommenen Änderungen jederzeit rückgängig zu machen. CSS Hero führt einen Verlauf aller Änderungen, die Sie an Ihrem Thema vornehmen. Klicken Sie einfach auf die Schaltfläche Verlauf in der CSS Hero-Symbolleiste, um die Liste der Änderungen anzuzeigen.
Sie können auf ein Datum und eine Uhrzeit klicken, um zu sehen, wie Ihre Site zu diesem Zeitpunkt ausgesehen hat. Wenn Sie zu diesem Zustand zurückkehren möchten, speichern Sie einfach oder setzen Sie die Bearbeitung von diesem Punkt aus fort.
Dies bedeutet nicht, dass Änderungen, die Sie nach diesem Zeitpunkt vorgenommen haben, verschwinden würden. Sie würden weiterhin gespeichert und Sie können auch zu dieser Zeit zurückkehren. Einfacher geht es nicht.
Was aber, wenn Sie nur Änderungen an einem bestimmten Element rückgängig machen möchten?
In diesem Fall müssen Sie das Verlaufstool nicht verwenden. Klicken Sie einfach auf das Element, das Sie wiederherstellen möchten, und klicken Sie dann auf die Schaltfläche Zurücksetzen.
Dadurch wird das Element auf die Standardeinstellungen zurückgesetzt, die von Ihrem WordPress-Theme definiert sind.
Anpassen Ihrer Site für Mobilgeräte in CSS Hero
Der schwierigste Aspekt des Webdesigns ist die Gerätekompatibilität. Sie müssen sicherstellen, dass Ihre Website auf allen Geräten und Bildschirmgrößen gleichermaßen blendend aussieht. Webdesigner verwenden eine Vielzahl von Tools, um die Browser- und Gerätekompatibilität zu testen. Zum Glück kommt CSS Hero mit einem integrierten Vorschau-Tool.
Klicken Sie einfach auf das Desktop-Symbol in der CSS Hero-Symbolleiste und dann auf einen Gerätetyp. Sie können zwischen Mobilgeräten, Tablets und Desktop-Geräten wählen. Der Vorschaubereich ändert sich in Ihr ausgewähltes Gerät.
Sie können Ihre Site jetzt bearbeiten, während Sie sie für Mobilgeräte in der Vorschau anzeigen. Dieses Tool ist besonders nützlich, um das Design Ihres Themes für Mobilgeräte und Tablets zu optimieren.
CSS Hero Theme-Kompatibilität
Die offizielle CSS Hero-Website hat eine ständig wachsende Liste kompatibler Themes. Diese Liste enthält viele der besten kostenlosen WordPress-Themes. Es hat auch die beliebtesten Premium-Themes von Shops wie CSSIgniter, Themify, StudioPress und mehr.
Was ist mit Themes, die nicht auf der Theme-Kompatibilitätsliste stehen?
CSS Hero verfügt über eine Funktion namens Rocket Mode Auto-Detection. Wenn Sie ein Theme verwenden, das nicht in der Theme-Kompatibilitätsliste enthalten ist, startet CSS Hero automatisch mit dem Raketenmodus.
Rocket Mode versucht, die CSS-Selektoren Ihres Themes selbst zu erraten. Das klappt meistens perfekt. Wenn Ihr Theme den WordPress-Codierungsstandards entspricht, können Sie fast alles bearbeiten.
Sie können sich auch an Ihren Theme-Entwickler wenden und ihn bitten, die Kompatibilität mit CSS Hero anzugeben.
Welche Plugins sind mit CSS Hero kompatibel?
CSS Hero wird regelmäßig mit Top-WordPress-Plugins auf Kompatibilität getestet. Dazu gehören Kontaktformular-Plugins, beliebte Seitenersteller, WooCommerce und andere.
Wenn Sie ein WordPress-Plugin verwenden, das eine Ausgabe generiert, die von CSS Hero nicht bearbeitet werden kann, können Sie den Plugin-Autor bitten, dies zu beheben. Sie müssen wirklich nicht viel tun, um die Kompatibilität mit CSS Hero zu gewährleisten.
Wir hoffen, dass Sie unseren CSS Hero-Test hilfreich fanden. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zur Verbesserung der Geschwindigkeit und Leistung von WordPress für Anfänger lesen.