Wenn Sie einer von vielen Anfängern sind, die ihr WordPress-Site-Layout anpassen möchten, ohne CSS zu berühren, haben Sie Glück. Mit dem CSS Hero-Plugin für WordPress können Sie das Layout anpassen, ohne eine einzige Codezeile zu berühren. In diesem aktualisierten CSS Hero-Test zeigen wir Ihnen, wie Sie mit CSS Hero Ihre Website anpassen und warum wir glauben, dass dies eines der Plugins ist, die jeder WordPress-Anfänger ausprobieren sollte.
Unsere CSS Hero Bewertung
CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme erstellen können, ohne eine einzige Codezeile schreiben zu müssen (kein HTML oder CSS erforderlich).
Es hat die Fähigkeit, Änderungen rückgängig zu machen, was für Anfänger äußerst nützlich ist. Alle Änderungen werden als zusätzliches Stylesheet gespeichert. Dies bedeutet, dass Sie Ihr WordPress-Design aktualisieren können, ohne sich Gedanken über den Verlust der Änderungen machen zu müssen.
Wenn Sie Designer oder Entwickler sind, finden Sie CSS Hero genauso gut. Es funktioniert gut mit allen gängigen WordPress-Themes und Frames. Sie können schnell Änderungen an einem untergeordneten Thema vornehmen und es zur Verwendung auf der Website eines Kunden exportieren.
CSS Hero kann viel Zeit und Frust sparen, wenn es darum geht, Designanpassungen vorzunehmen.
Insgesamt sind wir sehr skeptisch gegenüber Plugins zur Anpassung des Point-and-Click-Designs aufgrund der überhöhten Größe. CSS Hero hat uns jedoch von Anfang an sehr beeindruckt.
Wenn Sie eine ehrliche Bewertung von CSS Hero anfordern, geben wir ihm eine Bewertung von 5 von 5 Sternen.
So verwenden Sie CSS Hero zum Anpassen Ihres WordPress-Themas
Sie müssen zuerst das CSS Hero-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Es ist ein Premium-WordPress-Plugin zum Preis von 29 US-Dollar für eine einzelne Website (es lohnt sich, Zeit und Mühe zu sparen).
Verwenden Sie den CSS-Code aus dem Hero-Gutschein: WPBeginner um einen Sonderrabatt von 34% zu erhalten. Wenn Sie den PRO-Plan kaufen, bietet derselbe Code einen Rabatt von 40%.
Nach der Aktivierung werden Sie umgeleitet, um Ihren CSS Hero-Lizenzschlüssel zu erhalten. Folgen Sie einfach den Anweisungen auf dem Bildschirm und Sie werden mit nur wenigen Klicks zu Ihrer Website weitergeleitet.
Der Zweck von CSS Hero besteht darin, eine WYSIWG-Oberfläche (was Sie sehen, ist das, was Sie erhalten) zum Bearbeiten Ihres Themas bereitzustellen. Besuchen Sie einfach Ihre Website, während Sie verbunden sind, und Sie sehen die Schaltfläche CSS Hero in der WordPress-Admin-Leiste.
Wenn Sie auf die Schaltfläche klicken, wird Ihre Website zur Live-Ansicht. Sie können jetzt die CSS Hero-Symbolleiste sehen.
Klicken Sie dann einfach auf ein Element auf Ihrer Website und CSS Hero zeigt die CSS-Eigenschaften an, die von Ihrem Thema für dieses bestimmte Element verwendet werden.
Dies umfasst allgemeine CSS-Eigenschaften für das ausgewählte Element, z. B. Hintergrund, Typografie, Rahmen, Abstand und mehr. Sie können auf ein beliebiges 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 angezeigt wird. Wenn Sie CSS lernen, ist es hilfreich zu sehen, wie die verschiedenen CSS-Änderungen mit dem Ergebnis in der Live-Anzeige angewendet werden.
Haben Sie Probleme, lizenzfreie Bilder für Ihre Website zu finden? CSS Hero verfügt über die integrierte Unsplash-Integration, mit der Sie schöne Fotos in Ihrem Website-Design durchsuchen, suchen und verwenden können.
CSS Hero enthält auch einige gebrauchsfertige 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 jedoch nicht. Um diese Änderungen auf Ihre aktive 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, Änderungen, die Sie vornehmen, jederzeit rückgängig zu machen. CSS Hero verfolgt alle Ä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 die Site zu der Zeit war. Wenn Sie in diesen Zustand zurückkehren möchten, speichern Sie die Bearbeitung einfach oder setzen Sie sie an diesem Punkt fort.
Dies bedeutet nicht, dass nach diesem Zeitpunkt vorgenommene Änderungen verschwinden. Sie würden immer noch gespeichert, und Sie können auch zu dieser Zeit zurückkehren. Einfacher geht es nicht.
Was aber, wenn Sie nur die an einem bestimmten Element vorgenommenen Änderungen rückgängig machen möchten?
In diesem Fall müssen Sie das Verlaufstool nicht verwenden. Klicken Sie einfach auf das Element, zu dem Sie zurückkehren möchten, und klicken Sie dann auf die Schaltfläche Zurücksetzen.
Dadurch wird das Element auf die Standardeinstellungen geändert, die von Ihrem WordPress-Design definiert wurden.
Passen Sie Ihre mobile Website in CSS Hero an
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 beeindruckend ist. Webdesigner verwenden eine Vielzahl von Tools, um die Kompatibilität von Browsern und Geräten zu testen. Zum Glück verfügt CSS Hero über ein integriertes Visualisierungstool.
Klicken Sie einfach auf das Desktop-Symbol in der CSS Hero-Symbolleiste und klicken Sie auf den Gerätetyp. Sie können zwischen mobilen Geräten, Tablets und Desktop-Computern wählen. Der Anzeigebereich ändert sich für das ausgewählte Gerät.
Sie können Ihre Site jetzt bearbeiten, während Sie sie für mobile Geräte anzeigen. Dieses Tool ist besonders nützlich, um das Design Ihres Themas für Mobil- und Tablet-Geräte zu ändern.
Unterstützung für CSS Hero Theme
Die offizielle CSS Hero-Website enthält eine wachsende Liste kompatibler Themen. Diese Liste enthält viele der besten kostenlosen WordPress-Themes. Es bietet auch die beliebtesten Premium-Themen aus Geschäften wie CSSIgniter, Themify, StudioPress und mehr.
Was ist mit Themen, die nicht auf der Themenkompatibilitätsliste stehen?
CSS Hero verfügt über eine Funktion namens Automatische Erkennung im Raketenmodus. Wenn Sie ein Thema verwenden, das nicht in der Themenkompatibilitätsliste enthalten ist, verwendet CSS Hero automatisch den Raketenmodus.
Der Raketenmodus versucht, die CSS-Selektoren Ihres Themas selbst zu erraten. Dies funktioniert die meiste Zeit perfekt. Wenn Ihr Thema den Codierungsstandards von WordPress entspricht, können Sie fast alles bearbeiten.
Sie können sich auch an den Theme-Entwickler wenden und ihn um Unterstützung für CSS Hero bitten.
Welche Plugins sind mit CSS Hero kompatibel?
CSS Hero wird regelmäßig mit den besten WordPress-Plugins auf Kompatibilität getestet. Dies umfasst Plugins für Kontaktformulare, beliebte Seitenersteller, WooCommerce und andere.
Wenn Sie ein WordPress-Plugin verwenden, das nicht bearbeitbare Ergebnisse für CSS Hero generiert, bitten Sie den Autor des Plugins, das Problem zu beheben. Sie müssen wirklich nicht viel tun, um CSS Hero-Kompatibilität bereitzustellen.
Wir hoffen, dass unser CSS Hero-Test hilfreich ist. Sie können auch unsere endgültige Anleitung lesen, wie Sie die Geschwindigkeit und Leistung von WordPress für Anfänger verbessern können.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
