Inhaltsverzeichnis
Wenn Sie zu den vielen Anfängern gehören, die das Design Ihrer WordPress-Website anpassen möchten, ohne CSS zu berühren, dann haben Sie Glück. Mit dem CSS Hero-Plugin für WordPress können Sie das Design anpassen, ohne eine einzige Zeile Code zu berühren. In dieser aktualisierten CSS Hero-Überprüfung zeigen wir Ihnen, wie Sie CSS Hero verwenden können, um Ihre Website anzupassen, und warum wir glauben, dass es eines der Plugins ist, die jeder WordPressAnfänger sollten es versuchen.
Unser CSS-Held Rezension
CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme gestalten können, ohne eine einzige Zeile Code zu schreiben (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 Gedanken über den Verlust der Änderungen zu machen.
Wenn Sie ein Designer oder Entwickler sind, werden Sie CSS Hero ebenso gut finden. Es funktioniert mit allen gängigen WordPress-Themes und -Frameworks. Sie können schnell Änderungen an einem Child-Theme vornehmen und es dann exportieren, um es auf der Website eines Kunden zu verwenden.
CSS Hero kann Ihnen viel Zeit und Frustration ersparen, wenn es darum geht, Designanpassungen vorzunehmen.
Normalerweise sind wir sehr skeptisch gegenüber Plug-ins zur Designanpassung per Mausklick, da sie sehr umfangreich sind. CSS Hero hat uns jedoch von Anfang an beeindruckt.
Wenn Sie uns um eine ehrliche CSS Hero-Bewertung bitten würden, würden wir ihm 5 von 5 Sternen geben.
Wie Sie CSS Hero verwenden, um Ihr WordPress-Theme anzupassen
Zuerst müssen Sie das CSS Hero Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Es handelt sich um ein Premium-WordPress-Plugin mit Preisen ab $29 für eine einzelne Website (die Investition lohnt sich auf jeden Fall, wenn man bedenkt, wie viel Zeit und Ärger Sie damit sparen).
Verwenden Sie den CSS Hero-Gutscheincode: um einen Sonderrabatt von 34 % zu erhalten. Wenn Sie den PRO-Plan kaufen, erhalten Sie mit demselben Code einen satten Rabatt von 40 %.
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) für die Bearbeitung Ihres Themes zur Verfügung zu stellen. Besuchen Sie einfach Ihre Website, während Sie eingeloggt sind, und Sie werden die CSS Hero-Schaltfläche in der WordPress-Verwaltungsleiste sehen.
Wenn Sie auf die Schaltfläche klicken, wird Ihre Website in die Live-Vorschau umgewandelt. Sie können nun 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 von Ihrem Theme für dieses bestimmte Element verwendet werden.
Diese enthalten gängige CSS-Eigenschaften für das ausgewählte Element wie Hintergrund, Typografie, Rahmen, Abstände usw. 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 die benutzerdefinierten CSS auf magische Weise unten erscheinen. Wenn Sie CSS lernen, werden Sie es nützlich finden, zu sehen, wie verschiedene CSS-Änderungen mit dem 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 zu durchsuchen und für das Design Ihrer Website zu verwenden.
CSS Hero enthält auch einige vorgefertigte Snippets, die Sie auf verschiedene Elemente Ihrer Website anwenden können. Wechseln Sie einfach zur Registerkarte Snippets in der linken Spalte.
Wenn Sie Änderungen an Ihrer Website vornehmen, speichert CSS Hero diese Änderungen automatisch, veröffentlicht sie aber nicht. Um diese Änderungen auf Ihre Live-Website anzuwenden, müssen Sie auf die Schaltfläche "Speichern und veröffentlichen" klicken.
Wie man Änderungen in CSS Hero rückgängig macht
Eine der besten Funktionen von CSS Hero ist die Möglichkeit, alle Änderungen, die Sie vorgenommen haben, jederzeit rückgängig zu machen. CSS Hero speichert eine Historie aller Änderungen, die Sie an Ihrem Thema vorgenommen haben. Klicken Sie einfach auf die Schaltfläche "Historie" 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 Website zu diesem Zeitpunkt aussah. Wenn Sie zu diesem Zustand zurückkehren möchten, speichern Sie einfach oder setzen Sie die Bearbeitung an diesem Punkt fort.
Das bedeutet nicht, dass Änderungen, die Sie nach diesem Zeitpunkt vorgenommen haben, verschwinden würden. Sie würden immer noch gespeichert werden, und Sie können auch zu diesem Zeitpunkt zurückkehren. Einfacher geht es nicht mehr.
Was aber, wenn Sie nur Änderungen an einem bestimmten Element rückgängig machen wollen?
In diesem Fall brauchen Sie das Verlaufswerkzeug nicht zu verwenden. Klicken Sie einfach auf das Element, das Sie zurücksetzen möchten, und dann auf die Schaltfläche "Zurücksetzen".
Dadurch wird das Element auf die Standardeinstellungen zurückgesetzt, die in Ihrem WordPress-Theme definiert sind.
Anpassen Ihrer Website für mobile Gerä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 gleich gut aussieht. Webdesigner verwenden eine Vielzahl von Tools, um die Browser- und Gerätekompatibilität zu testen. Zum Glück verfügt CSS Hero über ein eingebautes Vorschau-Tool.
Klicken Sie einfach auf das Desktop-Symbol in der CSS Hero-Symbolleiste und dann auf einen Gerätetyp. Sie können zwischen Mobil-, Tablet- und Desktop-Geräten wählen. Der Vorschaubereich ändert sich in das ausgewählte Gerät.
Sie können jetzt Ihre Website 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 bietet eine ständig wachsende Liste kompatibler Themes. Diese Liste enthält viele der besten kostenlosen WordPress-Themes sowie die beliebtesten Premium-Themes von Shops wie CSSIgniter, Themify, StudioPress und anderen.
Was ist mit Themen, die nicht auf der Themenkompatibilitätsliste stehen?
Wenn Sie ein Theme verwenden, das nicht in der Theme-Kompatibilitätsliste enthalten ist, wird CSS Hero automatisch den Raketenmodus verwenden.
Rocket Mode versucht, die CSS-Selektoren Ihres Themes selbst zu erraten. Das funktioniert in den meisten Fällen einwandfrei. 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 zu gewährleisten.
Welche Plugins sind mit CSS Hero kompatibel?
CSS Hero wird regelmäßig mit den wichtigsten WordPress-Plugins auf Kompatibilität getestet, z. B. mit Kontaktformular-Plugins, beliebten Page Buildern, WooCommerce und anderen.
Wenn Sie ein WordPress-Plugin verwenden, das eine Ausgabe erzeugt, die von CSS Hero nicht bearbeitet werden kann, können Sie den Plugin-Autor bitten, dies zu beheben. Er muss nicht viel tun, um die Kompatibilität mit CSS Hero zu gewährleisten.
Wir hoffen, dass Sie unseren CSS Hero Testbericht hilfreich fanden. Vielleicht interessiert Sie auch unser ultimativer Leitfaden zur Verbesserung der Geschwindigkeit und Leistung von WordPress für Anfänger.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
