CSS Hero, der Live-WordPress-Theme-Editor

Stellen Sie sich vor, Sie erstellen Ihre WordPress-Site und stoßen auf ein Element, das Sie optimieren möchten. Die Antwort könnte darin bestehen, etwas CSS zu schreiben, um das Element anzupassen. Das einzige Problem ist, dass Sie nicht genug CSS kennen, um es zu ändern, und Sie haben bereits Stunden damit verbracht, nach dem richtigen Code zu suchen.

Sie können sich eine Menge Zeit – und eine ausgewachsene Migräne – ersparen, indem Sie ein Tool verwenden, das das Schreiben von CSS von Grund auf überflüssig macht. Vergessen Sie die Suche nach dem richtigen Element im Inspektor. Sie brauchen sich keine Gedanken mehr darüber zu machen, sich an das richtige CSS zu erinnern – und wo Sie es verwenden.

Das CSS Hero-Plugin ist eine 100 % No-Code-Lösung, mit der Sie Ihre WordPress-Seite schnell und einfach anpassen können. Lass es uns überprüfen!

Passen Sie Ihre Website mit CSS Hero an

CSS Hero ist ein Plugin für WordPress, mit dem Sie das Aussehen Ihrer Website ganz einfach anpassen können. Es hat eine wunderschön gestaltete und intuitive Point-and-Click-Oberfläche.

Unabhängig davon, welches WordPress-Theme Sie verwenden, haben Sie die volle Kontrolle über die Anpassung Ihrer Website. Es ist so einfach wie das Klicken auf ein Element auf Ihrer Website, das Vornehmen einer Änderung und das Live-Sehen. Mit CSS Hero können Sie steuern:

• Farbe
• Typografie und Schriftstile
• Mittel
• …und mehr!

CSS Hero reagiert auch nativ, sodass Sie steuern können, wie Ihre Website sowohl auf Desktop- als auch auf Mobilgeräten aussieht. Sie müssen sich auch keine Sorgen machen, dass Ihre Website beschädigt wird. Zusätzlich zur Live-Vorschaufunktion enthält CSS Hero eine lebensrettende Desktop-Funktion, sodass Sie Änderungen nur auf den Desktop beschränken können.

Sie können im CSS Hero-Designeditor beliebig viele Änderungen vornehmen, ohne eine Ihrer vorhandenen Designdateien zu ändern. Wenn Sie das CSS Hero-Plugin deaktivieren, wird Ihre Website einfach wieder so, wie sie war.

Wie ein erfahrener WordPress-Designer weiß, kann das Hinzufügen von zu viel CSS zu Ihrer Website die Leistung erheblich beeinträchtigen. Allerdings stapelt CSS Hero nicht tonnenweise CSS-Code; vielmehr generiert es ein einzelnes, statisches, zusätzliches Stylesheet, das das Stylesheet Ihres Themes überschreibt.

Wenn Sie bereits Erfahrung mit dem Schreiben von CSS haben, können Sie im Code-Editor von CSS Hero auch Ihren eigenen Code hinzufügen. Es bietet Ihnen die gleiche Live-Vorschaufunktion wie die Point-and-Click-Oberfläche – und überprüft Ihren Code im Handumdrehen auf Fehler. Darüber hinaus können Sie Ihre eigenen Medienabfragen hinzufügen. Sie können Ihren CSS-Code auch exportieren, um ihn anderweitig zu verwenden.

CSS Hero funktioniert gut mit:

• Elementar
• Biber Baumeister
• Presse erzeugen
• WooCommerce
• Gutenberg
• Themifizieren
• TutorLMS
• bbPress
• Kontaktformular 7
• …und mehr!

Sie können in jedem beliebigen Thema arbeiten und jedes Element auf Ihrer Website anpassen.

So verwenden Sie CSS Hero zum Anpassen Ihrer Website

Während die Verwendung von CSS Hero zufriedenstellend und intuitiv ist, führe ich Sie durch die Einrichtung und die Verwendung einiger der Hauptfunktionen des Plugins.

Schritt 1: Installieren Sie das CSS Hero-Plugin

Sie finden das CSS Hero-Plugin auf ihrer Website. Es gibt mehrere Pläne zum Kauf, und ich werde die Preise etwas später behandeln. Sie bieten eine 30-tägige Geld-zurück-Garantie, sodass es kein Risiko gibt, es auszuprobieren.

Sobald Sie ein Konto erstellt haben, laden Sie einfach die neueste Version des Plugins von Ihrem Konto-Dashboard herunter.

Sobald Sie die .zip-Datei auf Ihrem Computer gespeichert haben, gehen Sie zu Ihrer WordPress-Site und navigieren Sie zu Plugins→Add New . Suchen Sie nach der Plugin-Zip-Datei, laden Sie sie hoch und aktivieren Sie sie.

Schritt 2: Verbinden Sie Ihr Konto

Sofort sehen Sie eine Benachrichtigung in Ihrem WordPress-Admin-Dashboard, in der Sie aufgefordert werden, Ihre Lizenz zu aktivieren. Klicken Sie auf die große blaue Schaltfläche und folgen Sie den Anweisungen, um Ihre Lizenz zu Ihrer Website hinzuzufügen.

Jetzt sehen Sie eine Registerkarte für CSS Hero in Ihrer oberen Menüleiste. Klicken Sie darauf, um die Bearbeitungsumgebung aufzurufen.

Schritt 3: Bearbeiten Ihrer Website

Wenn Sie in CSS Hero in den Bearbeitungsmodus wechseln, sehen Sie ein Vorschaufenster der aktuellen Seite, ähnlich dem Customizer. Allerdings haben Sie jetzt eine Fülle von Bearbeitungsmöglichkeiten.

Der Editor

Wenn Sie Ihren Cursor im Vorschaufenster bewegen, sehen Sie Seitenelemente, die für Sie aufgerufen werden, wie Sie es im Inspektor Ihres Browsers sehen würden – aber mit mehr Details und Klarheit.

Im Menü auf der linken Seite haben Sie eine Reihe von Bearbeitungswerkzeugen, mit denen Sie das ausgewählte Element ändern können. In meinem Beispiel habe ich einfach das Element .site-title ausgewählt und Änderungen an Farbe, Schriftgröße, Schriftstärke und Buchstabenabstand vorgenommen und einen Schatten hinzugefügt. Dies alles wurde mithilfe des intuitiven Menüs mit Schiebereglern und Pickern erledigt, die sich wie ein vollwertiger Website-Builder anfühlen. So fragwürdig meine Designentscheidungen auch waren, der Editor ist extrem einfach zu bedienen. Dies ist eine echte visuelle Bearbeitung von Website-Elementen, ohne dass Sie einen Code schreiben müssen.

Unterhalb des visuellen Editorfensters befindet sich ein Code-Editor, in dem Sie den richtigen CSS-Code sehen können, während Sie das Element ändern. Wenn Sie CSS kennen und Spaß daran haben, den Code selbst zu optimieren, werden Sie beide Optionen genießen. Wenn Sie mit CSS noch nicht vertraut sind, fungiert es als hilfreiches Lernwerkzeug.

Sie können Änderungen oder Ergänzungen direkt am Code im Code-Editor vornehmen und sehen die Live-Vorschau genau so, als würden Sie den visuellen Editor verwenden. CSS Hero macht Sie während der Arbeit auch auf Codierungsfehler aufmerksam. Wenn ich zum Beispiel eines der Argumente in der Farbauswahl eliminiere, aber das Komma weglasse, tauchte sofort eine Warnung auf, die mir mitteilte, wo ich einen Fehler gemacht habe.

Durch die Korrektur des Fehlers verschwindet die Warnung automatisch.

Mehrere Gerätevorschauen

In der oberen Leiste des CSS Hero-Editors finden Sie eine Reihe von Symbolen für verschiedene Geräte. Der Standard ist der Desktop-Modus. Wenn Sie auf ein beliebiges Gerätesymbol klicken, wird eine Vorschau angezeigt, wie sie auf diesem Gerät und in dieser Ausrichtung erscheinen würde. Zusätzlich können Sie die Größe des Vorschaufensters über Anfasser anpassen oder die Pixelbreite in das Feld unten eingeben.

Außerdem finden Sie im Menü der oberen Leiste einen Schalter, mit dem Sie durch die Website navigieren können, anstatt Elemente zur Bearbeitung auszuwählen.

Sie können auf die Symbole „Rückgängig“ und „Wiederherstellen“ klicken und einen vollständigen Bearbeitungsverlauf anzeigen.

Mehr Funktionen

Das sind die Hauptmerkmale der CSS Hero-Oberfläche. Mit diesem Editor können Sie noch viel mehr tun. Wenn Sie auf das Dropdown-Menü Projekt in der oberen Menüleiste klicken, erhalten Sie noch mehr Optionen.

Variablen

Es gibt zwei Arten von Variablen, die Sie in CSS Hero verwenden können: LESS-Variablen und CSS-Variablen. Sie können häufig verwendete Variablen unter WENIGER Variablen hinzufügen und sie über ein einziges Menü verwalten. Unter CSS-Variablen können Sie nach beliebigen Variablen suchen und den Namen und Wert bearbeiten.

Medienabfrageeinstellungen

Dieses Menü bietet Ihnen einen zentralen Ort, an dem Sie alle Ihre vorhandenen Medienabfragen verwalten und bei Bedarf benutzerdefinierte Abfragen hinzufügen können.

Kontrollpunkte

Angenommen, Sie möchten einige Änderungen an Ihrer Website in der Vorschau anzeigen, sind aber noch nicht bereit, die Live-Website zu aktualisieren. Hier können Checkpoints Ihnen helfen. Nehmen Sie alle gewünschten Änderungen vor und erstellen Sie dann einen Prüfpunkt. Sie können Ihre Änderungen verwerfen, damit sie sich nicht auf die Live-Site auswirken, aber Sie können jederzeit zurückgehen und diese Änderungen aktivieren, ohne all Ihre harte Arbeit wiederholen zu müssen.

Benutzerdefinierte Schriftarten

Sie können beliebige benutzerdefinierte Schriftarten in den Formaten .ttf, otf und woff hochladen.

Videohintergründe

Möchten Sie eine dieser eleganten und kompakten Videoschleifen als Hintergrund hinzufügen? Erstaunlicherweise können Sie dies direkt im Editor tun. CSS Hero bietet Ihnen eine große Menge vorgefertigter Videos zur Auswahl, die von coverr bereitgestellt werden. Wählen Sie einfach ein Element aus, wählen Sie ein Video aus und passen Sie es an. So einfach ist das.

Vor CSS Hero und danach

Derzeit können Sie alle gewünschten CSS im Customizer hinzufügen. WordPress zeigt Ihnen auch eine Vorschau.

Das funktioniert gut, aber bedenke ein paar Dinge:

1. Sie kennen vielleicht nicht viel – oder gar kein – CSS.
2. Die Suche nach etwas, das Sie zuvor codiert haben, kann viel Zeit in Anspruch nehmen.
3. All das CSS im Customizer kann Ihre Website dramatisch verlangsamen.

Nachdem Sie mit der Verwendung des CSS Hero-Editors begonnen haben, können Änderungen schnell mit einem visuellen Editor vorgenommen werden – keine Programmierung erforderlich. Sie können leicht finden, was Sie geändert haben, indem Sie auf das Element klicken. Der CSS-Code wird Ihre Website nicht verlangsamen, da er in einem eigenen, ordentlich organisierten Stylesheet enthalten ist.

Preisgestaltung

CSS Hero bietet drei Stufen von jährlichen Preisplänen und einen lebenslangen Plan. Wie ich bereits erwähnt habe, gibt es innerhalb von 30 Tagen nach dem Kauf eines Plans eine 100%ige Geld-zurück-Garantie. Es besteht praktisch kein Risiko, es auszuprobieren.

Anlasser

Dieser Plan eignet sich am besten, wenn Sie nur eine Site anpassen müssen. Für nur 29 $ pro Jahr erhalten Sie alle Produktaktualisierungen und grundlegenden Support.

persönlich

Wenn Sie Freiberufler sind oder eine kleine Agentur leiten, ist die nächste Stufe möglicherweise die beste für Sie. Sie können CSS Hero auf bis zu fünf Websites installieren und erhalten alle Produktaktualisierungen und grundlegenden Support. Der Preis beträgt 59 $ pro Jahr.

Profi

Wie es sich anhört, ist dieser Plan am besten für professionelle Publisher und größere Agenturen geeignet. Für 199 US-Dollar pro Jahr erhalten Sie satte 999 Installationen mit Unterstützung für WordPress Multisite.

Lebenslang Pro

Dies ist ein One-and-Done-Plan, der Ihnen 999 Site-Installationen, vorrangigen Support und lebenslange Produkt-Updates verschafft … für immer. Mit einer einmaligen Zahlung von 599 $ sind Sie ein Leben lang abgesichert.

Intuitive und einfache CSS-Anpassung

Für jeden WordPress-Designer hat CSS Hero einen enormen Wert. Selbst wenn Sie CSS wie Ihre Westentasche kennen, wird die Verwendung des CSS Hero-Editors die Bearbeitung Ihrer Website erstaunlich effizient machen.