CSS Hero Review (2022): #1 Live WordPress Theme Editor Plugin

Eine Website ist das wichtigste Marketinginstrument für ein Unternehmen. Es ist der erste Eindruck, den potenzielle Kunden von Ihrem Unternehmen haben. Eine gut gestaltete Website kann Ihnen helfen, neue Kunden zu gewinnen und sie dazu zu bringen, wiederzukommen

Wenn Sie also nach einer großartigen Möglichkeit suchen, die Benutzererfahrung Ihrer Website zu verbessern, sollten Sie die Verwendung von CSS Hero in Betracht ziehen.

Es ist leicht zu verstehen, dass eine einzige Zeile mit falschem Code oder ein fehlendes Komma Ihre Website ruinieren kann. Mit den meisten Seitenerstellern können Sie Ihre Website also ganz einfach visuell anpassen.

Doch nicht jeder mag Elementor oder WP Bakery. Für sie bereitet CSS Kopfschmerzen, da das WordPress-Theme möglicherweise nicht über die erforderlichen Bearbeitungsfunktionen verfügt.

Um diese Schwierigkeiten zu überwinden, können Sie das WordPress-Plugin CSS Hero verwenden. Es generiert automatisch den CSS-Code für Ihre WordPress-Site, ohne dass Sie eine Codierungszeile berühren müssen.

Ich teile hier meine Gedanken zu diesem großartigen Tool. Auch, wie man das Beste daraus macht.

Sie können CSS Hero Vs Yellow Pencil: The Best im Vergleich lesen

CSS Hero Review: Eine schnelle Einführung

CSS Hero ist ein visueller CSS-Editor, mit dem Sie das Erscheinungsbild Ihres Website-Designs verwalten und anpassen können. Es bietet eine Reihe von Tools, mit denen Sie benutzerdefinierte Stile erstellen und auf bestimmte Elemente auf Ihrer Seite anwenden und deren Effekte in Echtzeit in einer Vorschau anzeigen können.

Die bereitgestellten Tools sind CSS-Klassen, mit denen Sie allgemeine und benutzerdefinierte Stile hinzufügen können, ohne CSS-Code schreiben zu müssen. Mit CSS Hero können Sie sie trotzdem optimieren, im Gegensatz zu einem Seitenersteller, bei dem Sie Elemente von Grund auf neu erstellen oder bearbeiten.

Die Funktion zum Rückgängigmachen und Wiederherstellen hilft Anfängern, jedes WordPress-Theme zu aktualisieren, ohne es zu beschädigen. Mit dem visuellen Editor können Sie auf Elemente klicken und die Änderungen in einer Live-Vorschau sehen.

CSS Hero fügt alle Codes in einer separaten Datei hinzu, sodass Sie sich keine Gedanken über den Verlust der CSS-Eigenschaften machen müssen, wenn Sie etwas ändern.

Außerdem können Sie die benutzerdefinierten CSS-Eigenschaftsänderungen in einem untergeordneten Design hinzufügen und diese jederzeit oder auf jeder anderen Website übertragen.

Schnellansicht der wichtigsten Funktionen von CSS Hero

CSS Hero ist ein visueller CSS-Editor ohne Codierung. Sowohl Anfänger als auch erfahrene CSS-Entwickler können davon profitieren. Um es für beide nutzbar zu machen, haben sie viele Funktionen hinzugefügt. Hier ist eine Liste davon.

• Einfache Benutzeroberfläche
• Viele Anpassungsmöglichkeiten
• Fertige Styles
• CSS Hero Inspector
• Komplexer CSS-Stil
• Eingebauter Farbwähler
• Animator
• Generiertes CSS
• Leichter Fußabdruck
• Fügen Sie Hintergrundbilder hinzu
• Mobile Live-Vorschau mit Tablet-Modus
• Mehr als 600 Schriftarten
• Videohintergrund für jeden Abschnitt
• Visual JS-Editor
• Live-Vorschau
• Eingebautes Snippet
• Farbpalettenbibliothek
• Freigeben für die Bearbeitung eines beliebigen Teils der Website
• Anmeldeseite gestalten
• WorkFlow-Verlauf

Neben all diesen hervorragenden Funktionen erhalten Sie auch einige Boni mit Premium-Abonnements.

• Media Query Manager: Damit können Sie verschiedene Medien für verschiedene Geräte einstellen.
• CSS-Code-Exporter: Exportieren Sie Codes von der Stage-Site auf die Live-Site.
• Hover-Modus: Die neue Version enthält eine Vorschau des Hover-Modus.

Wie verwende ich das CSS Hero-Plugin?

CSS Hero ist ein Premium-Plugin, das Sie manuell auf der WordPress-Site installieren müssen. Es funktioniert wie der Seitenersteller von Elementor. Sie müssen die Seite öffnen, die Sie bearbeiten möchten, und auf die Schaltfläche „CSS Hero“ klicken.

Nach dem Klicken auf die Schaltfläche erscheint eine linke Seitenleiste mit Dokumentation. Sie können die Dokumentation lesen, die die Grundlagen von CSS hero erklärt.

Es besagt im Grunde, dass CSS Hero ein erweitertes WYSIWYG-CSS-Editor-WordPress-Plugin ist , das Ihnen bei der erweiterten Designanpassung hilft.

Klicken Sie auf ein beliebiges Element, und Sie sehen anpassbare Optionen auf der linken Seite und am unteren Rand des Bildschirms. Dann können Sie den Hintergrund, die Schriftarten, die Polsterung, die Animation, den Verlauf und alles nach Belieben ändern.

Wenn Sie einen Hero-Button für einen beliebigen Link erstellen möchten, können Sie auch dessen Snippet-Funktion verwenden. Sie können Schlagschatten, Trennlinien, Schaltflächensymbole und nicht nur eine Schaltfläche hinzufügen.

Wenn Sie möchten, können Sie Elementen auch Animationen hinzufügen. Das Hinzufügen von Animationen ist mit dem visuellen CSS-Editor super einfach; Klicken Sie auf Elemente, navigieren Sie zur linken Seitenleiste und fügen Sie eine Animation hinzu.

Ein grundlegender Blick auf die Benutzeroberfläche:

CSS Hero hat keinen eigenen Einstellungsbereich. Stattdessen verwendet es eine einfache Frontend-Schnittstelle. Die Benutzeroberfläche ist hauptsächlich die Live-Vorschau der Website.

Nachdem Sie auf den „ CSS Hero-Button “ geklickt haben, sehen Sie auf der linken Seite das Menü- und Inspektor-Tool . Sie erhalten alle Responsive-View-Tools in der oberen Mitte, und oben rechts finden Sie unter anderem Rückgängigmachen, Wiederherstellen, Verlauf und Tools.

Unten finden Sie den JS-Editor und die Videointegration mit anderen Funktionen. Wenn Sie den Mauszeiger über ein Element bewegen, wird der Inhaltsbereich angezeigt, und entweder ein Rechtsklick oder ein Linksklick öffnet die Registerkarten mit den Einstellungen.

Alles in allem ist die Benutzeroberfläche sehr anfängerfreundlich und nicht zu überwältigend, um sich in Einstellungen zu verlieren.

CSS Hero Review: Funktionsübersicht

Anpassungsoptionen/CSS Hero Editor:

Sie erhalten 3 Anpassungseinstellungen im CSS Hero-Menü: Eigenschaften, Snippets und Animation. Die Eigenschaften enthalten die meisten Bearbeitungsfunktionen. Sie können die Hintergrundfarbe, den Schriftstil, die Hintergrundfarbe und die Transformation ändern.

Das Hinzufügen von Polsterung, Rahmen, Abstand, Anzeigen oder Ausblenden von Elementen, Positionierung und Messungen all diese Bearbeitungen befinden sich auf der Registerkarte Eigenschaften.

Das Snippet enthält vorgefertigte Schaltflächen und Schlagschatten, Trennlinien, Hintergrundgrafiken usw. Sie können einem einzelnen Element mehrere Designs hinzufügen.

Wenn Sie verschiedene Einstellungen kombinieren, können Sie auch neue Designs entwickeln. Auf der Registerkarte Animation können Sie verschiedene Animationen wie Einblenden, Ausblenden usw. hinzufügen.

Responsive Vorschau:

CSS Hero hat 4 Arten von Responsive-Design-Einstellungen . Sie können Ihre Website für alle Geräte wie Desktop, Tablet und mobile Responsive-Einstellungen responsive machen.

Nicht nur das, Sie können sogar im Quer- und Hochformat für Mobilgeräte und Tablets bearbeiten. Sie können auch einen bestimmten Abschnitt für jedes Gerät ausblenden.

Zum Beispiel können Sie das Video im Heldenbereich ausblenden, um es auf Mobilgeräten schnell zu laden. Blenden Sie dagegen die Anrufschaltfläche auf dem Desktop aus.

Medienabfrage-Manager:

CSS Hero macht den gesamten Code für verschiedene Geräte reaktionsfähig. Es bietet jedoch auch einen Media Query Manager für die manuelle Bearbeitung.

Wenn Sie beispielsweise möchten, dass ein Bild auf dem Desktop angezeigt wird, aber nicht auf Mobilgeräten, können Sie dies von hier aus tun. Sie können auch die Größe des Bildes oder Abschnitts für Mobilgeräte ändern.

CSS Hero Inspector-Tool:

Das CSS Hero Inspector Tool ist eine Bereicherung für Webentwickler. Hier können Sie Ihre CSS-Codes verfeinern. Wenn Sie nicht einer der guten CSS-Selektoren sind, funktioniert dies möglicherweise nicht so gut.

Diese Funktion ist jedoch nur im Pro-Plan und höher verfügbar. Wenn Sie nicht besonders darauf bedacht sind, den CSS-Code sauber zu halten, werden Sie ihn nicht brauchen.

CSS-Code-Exporteur:

Dies ist eine großartige Funktion für Website-Entwickler. Sie können die Demo- oder Staging-Website bearbeiten und den gesamten Code in eine Datei exportieren. Fügen Sie diese Datei hinzu, die Sie auf die Live-Website importieren können, und das gesamte CSS ist repariert, ohne dass die Website gewartet wird.

Revisionsverlauf rückgängig machen/wiederherstellen:

Während Sie die Website bearbeiten, werden Sie zunächst Designs finden, die Ihnen nicht gefallen, die Sie jedoch nach einigen Änderungen wiederherstellen möchten. Dort ist die Schaltfläche „Rückgängig“ und „Wiederherstellen“ praktisch.

Wenn Sie zufällig einen Fehler machen, behebt ein Klick auf das Rückgängigmachen des CSS-Hero-Buttons alles. Wenn Sie Änderungen gerne vergleichen möchten, funktioniert die Funktion zum Wiederherstellen und Rückgängigmachen im Live-CSS-Editor wie ein Zauber.

Am besten gefällt mir der History-Button. Angenommen, Sie möchten zu einem beliebigen Teil der Bearbeitung gehen, während Sie die Verbesserung überprüfen. Sie können also auf einen beliebigen Teil der CSS-Selektoren klicken und die von Ihnen vorgenommenen Änderungen bis zum Ende anzeigen.

CSS Hero-Integrationen:

Nach den neuen Updates in Version 5 ist CSS Hero nun mehr als ein WordPress-CSS-Editor-Plugin. Sie können mit JS-Code umgehen und ihn in viele JS-Bibliotheken integrieren. Sie können auch die Page Inspector-Funktion überprüfen, die Ihnen den HTML-Code hinter den Kulissen zeigt.

Einschließlich dieser verfügt es über eine integrierte Unsplash- und Coverr-Integration. Unsplash bietet unbegrenzt lizenzfreie Bilder, während Coverr Videos bereitstellt.

CSS-Heldenleistung:

Bei der Verbesserung des Suchmaschinenrankings kann die Ladegeschwindigkeit ein großes Problem darstellen. Aber ich kann Ihnen aus Erfahrung sagen, dass es die Website nicht schlecht verlangsamt.

Da CSS Hero eine einzige statische CSS-Datei verwendet, nimmt es keinen Platz ein. Tatsächlich enthält es diese Codes in Ihrer vorhandenen CSS-Tabellendatei.

Insgesamt wird CSS Hero die Ladegeschwindigkeit Ihrer Website nicht wie jedes andere Seitenerstellungs-Plugin verringern. Sie können dies also bedenkenlos verwenden.

CSS Hero Review: Vor- und Nachteile

Wir alle wissen, dass CSS eines der besten WordPress-CSS-Editor-Plugins ist. Allerdings hat alles einige gute und nicht so gute Eigenschaften.

Zum Beispiel ist das Erlernen von CSS-Code mit dem CSS Hero-Editor nicht mehr zwingend erforderlich. Hier ist, was ich mag und mit CSS Hero nicht sehr zufrieden bin.

Vorteile

• Einfaches Klicken und Bearbeiten von Elementen aus dem Seitenleisten-Popup
• Funktioniert mit fast jedem WordPress-Theme zur Anpassung
• Unterstützt Multisite für WP
• Macht keinen CSS-Fehler
• Fügen Sie einen zusätzlichen benutzerdefinierten Live-CSS-Editor hinzu
• Keine Notwendigkeit, CSS-Code zu lernen
• Vorgefertigte Stylesheets für schnelleres Arbeiten
• Einsteigerfreundliches Heldenmenü und Dokumentation

Nachteile

• Fehlender Live-Support
• Keine Funktion zum Hinzufügen oder Erstellen einer neuen CSS-Ebene

CSS Hero Support & Dokumentation

Sie können den Live-Support für dieses großartige WordPress-CSS-Editor-Plugin verpassen, aber die Dokumentation ist sehr detailliert.

Sie können alles in gut organisierten Abschnitten erhalten. Das „ Erste Schritte“ hilft Ihnen, das Plugin richtig zu verstehen und zu installieren, und „ Feature Highlight Videos “ halten sich zusammen mit den Einstellungen auf dem Laufenden.

Jeder Artikel enthält auch ein Tutorial, auf das Sie auf kostenlose Videos auf ihrem YouTube-Kanal zugreifen können.

Wie viel kostet CSS Hero?

CSS Hero WordPress-Plugin gibt es zu 4 Preisen. Es beginnt bei einem Starterpaket von 29 $ pro Jahr bis zu einem lebenslangen Angebot von 599 $. Für ein einzelnes Unternehmen können Sie mit 29 $/Jahr auskommen und für Agenturen sind 99 $/Jahr ein ausgezeichnetes Angebot.

Hinweis : Während des Schreibens der Bewertung wurde ein Rabattangebot durchgeführt.

CSS Hero-Alternativen

CSS Hero ist ein Premium-WordPress-Plugin für das Genesis-Framework und eines der besten. Wenn Sie jedoch mit ihnen konkurrieren möchten, wird es nur sehr wenige Alternativen geben.

Die besten CSS Hero-Alternativen sind:

• Gelber Bleistift
• Siteorigin-CSS
• Mikrothema

Das sind seine direkten Konkurrenten. CSS Hero bietet jedoch im Vergleich zu anderen ein etwas besseres Angebot.

CSS Hero Review: Abschließende Gedanken

Die meisten Benutzer dieses Plugins haben ihre großartigen Bewertungen darüber geteilt. Ich mag es auch für den Preis und die Funktionen, die es bietet. Als Einsteiger, der nicht viel Ahnung von CSS-Codierung hat, erleichtert CSS hero das Bearbeiten und Gestalten meiner Website.

Sie brauchen keinen erfahrenen Entwickler, um das Tool zu verwenden, da es fast selbsterklärend ist – das einzige, was an Live-Chat-Unterstützung fehlt. Dennoch, wenn Sie jemand sind, der jetzt eine Website hat und alles alleine macht, ist CSS Hero eine gute Investition.

Zusammenfassung

Autorenbewertung

Gesamtbewertung

5 basierend auf 2 Stimmen

Markenname

CSS-Held

Produktname

CSS Hero WordPress-Plugin

Preis

29 USD

Produktverfügbarkeit

Auf Lager