Wenn es darum geht, eine Website genau so aussehen zu lassen, wie Sie es möchten, ist die schiere Anzahl der verfügbaren WordPress-Themes ein wahrer Segen! Und wenn Sie genug Zeit mit der Suche verbringen, können Sie möglicherweise ein Thema finden, das für Ihre Website absolut perfekt ist. Es besteht jedoch die Möglichkeit, dass Sie, obwohl Sie sich dem nähern, was Sie wollen, wahrscheinlich immer noch ein wenig außer Kontakt sind. Kann ein vorgefertigtes Thema wirklich den Bedürfnissen eines Einzelnen bis zu einem T entsprechen? …
Was tun, wenn Sie ein Thema gefunden haben, das Ihren Wünschen entspricht, aber noch einige Änderungen vornehmen müssen? Nun, wenn Sie die erforderlichen Fähigkeiten haben, natürlich kein Problem – Sie können es ändern, wie Sie möchten. Aber was ist, wenn Sie nicht das Vertrauen haben, die erforderlichen Dateien selbst zu ändern?
Heute möchte ich Ihnen ein sehr nützliches Plugin vorstellen: CSS Hero, ein Plugin, mit dem Sie kleine oder sogar relativ große visuelle Anpassungen selbst vornehmen können: ohne eine einzige Codezeile berühren zu müssen!
Was ist CSS Hero?
CSS Hero ist ein Plugin zur Anpassung von Themen (siehe Funktionen)
Daher nimmt es ähnlich wie Drag & Drop-Plugins für den Seitenersteller Speicherplatz ein. Wenn Sie jedoch von Seitenerstellern dazu ermutigt werden, ein benutzerdefiniertes Layout von Grund auf neu zu erstellen, können Sie mit CSS Hero Ihr vorhandenes WordPress-Thema nach Ihren Wünschen anpassen.
Auf diese Weise können Sie als Entwickler spielen, ohne über die allgemein erforderlichen Entwicklerfähigkeiten zu verfügen. Er verwendet weiterhin sein professionell gestaltetes WordPress-Thema, das von einem Experten erstellt wurde, und nicht von jemandem, der zufällige Module und Plugins zum Erstellen von Seiten startet und kleinere Änderungen an Ihren Anforderungen vornimmt.
Kein Artikel auf der Website ist verboten – Sie können alles und jeden anpassen. CSS Hero konvertiert Ihre Anpassungen in den entsprechenden CSS-Code, der dann auf ein neues CSS-Stylesheet angewendet wird (das ursprüngliche Stylesheet bleibt erhalten, um zukünftige Probleme zu vermeiden).
CSS Hero funktioniert auch mit jedem WordPress-Theme. Diejenigen, die ausgiebig auf Kompatibilität getestet wurden, werden benannt, während nicht getestete Themen weiterhin unterstützt werden.
Preise
CSS Hero ist ein erschwingliches Premium-Plugin. Um Ihre Konkurrenz widerzuspiegeln, ist es Carillo auf Augenhöhe mit den beliebtesten Page Builder-Plugins.
Eine Basislizenz kostet nur 29 US-Dollar und bietet Ihnen Zugriff auf das vollständige CSS Hero-Plugin (obwohl Sie es nur auf einer einzigen Website verwenden dürfen).
Wenn Sie CSS Hero auf mehr als einer Website verwenden möchten, haben Sie folgende Möglichkeiten:
Wie Sie sich vorstellen können, richtet sich die Lizenz an Kreativagenturen und professionelle Entwickler. Sowohl die Lizenz als auch die Lizenz enthalten auch Zugriff auf das Premium-Plugin Inspector Pro. Wir werden dies später auf dieser Seite ausführlicher behandeln.
Alle drei CSS Hero-Lizenzen sind ein Jahr gültig, gewähren ein Jahr lang Zugriff auf Updates und Support und werden mit einer 30-tägigen Geld-zurück-Garantie geliefert.
Starten
Nach dem Kauf werden Sie zum CSS Hero-Kontrollfeld weitergeleitet. Von dort aus können Sie neben der beeindruckenden CSS Hero Academy auf die umfangreiche Dokumentation des Plugins zugreifen. Die Akademie ist eine nette Geste, mit einer Reihe von Tutorial-Videos für Anfänger, die Ihnen helfen sollen, das Beste aus Ihrem neuen Plugin herauszuholen (ich würde gerne andere erweiterte Plugins sehen, die diesem Beispiel folgen).
Das Panel erfüllt eine weitere wichtige Funktion: Hier laden Sie den CSS Hero und je nach Lizenzstufe die Inspector Pro-Plugins herunter.
Melden Sie sich bei vollständigen Downloads in Ihrem WordPress-Dashboard an. Navigieren Sie zu >> und befolgen Sie die Anweisungen, um die ZIP-Dateien des Plugins zu laden und das Plugin zu aktivieren. Wenn Sie schon einmal ein WordPress-Plugin installiert haben, ist Ihnen dies alles sehr vertraut.
Die Installation von CSS Hero erfordert jedoch einen zusätzlichen Schritt: die Überprüfung. Klicken Sie auf die blaue Schaltfläche und befolgen Sie die Anweisungen, während Sie eine Ihrer Lizenzen registrieren. So weit so gut.
CSS Hero ist jetzt ein Tool und als solches erfolgt die Bearbeitung auf der Vorderseite, wo Sie die Änderungen in Echtzeit sehen können. Wenn Sie auf das Front-End Ihrer Site zugreifen, wird in der oberen rechten Ecke des Bildschirms ein neues blaues Symbol angezeigt. Klicken Sie hier, um Ihr neues Plugin zu verwenden.
CSS Hero Editor
Nachdem Sie auf das blaue Symbol geklickt haben, müssen Sie einige Sekunden warten, bis sich CSS Hero einschaltet. Wenn das Plugin aktiviert ist, können Sie jetzt mit dem Entwerfen und Anpassen Ihrer Website beginnen.
Klicken Sie zunächst auf das blaue Symbol oben im Optionsfeld. Wenn Sie sich nicht sicher sind, wie Sie vorgehen sollen, bietet Ihnen das Plugin hilfreiche Links zu allen Grundlagen. Wenn Sie jedoch bereit sind, direkt einzutauchen, können Sie mit der Ausrichtung und Bearbeitung aller Elemente auf Ihrer Seite beginnen.
Scrollen Sie über das Element, das Sie bearbeiten möchten, und klicken Sie dann auf (beginnen wir mit einem relativ einfachen Inhaltsabsatz, wie im folgenden Screenshot gezeigt). Nach dem Klicken sperrt CSS Hero Ihr Element, sodass Sie mit dem Anpassen beginnen können.
Um den Vorgang so einfach wie möglich zu gestalten, bietet Ihnen CSS Hero eine Liste mit Anpassungsoptionen, die von der Art des ausgewählten Elements abhängen. Nach der Auswahl eines Absatzes können Sie Schriftarten, Hintergründe und Rahmen ändern und die Füllung um den Text herum festlegen.
Das Bearbeiten der Elemente ist einfach, da alles über die Menüleiste rechts gesteuert wird und die Änderungen in Echtzeit in der Vorschau angezeigt werden. Zunächst habe ich beschlossen, mich auf die Eigenschaften des Textes zu konzentrieren. Wenn diese Option ausgewählt ist, zeigt CSS Hero alle verfügbaren Optionen zum Konfigurieren des Texts an, einschließlich:
- Schriftart: Mit jeder verfügbaren Google-Schriftart zur Auswahl
- Schriftfarbe
- Schriftgröße
- Schriftgewicht
- Textausrichtung
- Texttransformation – zB Großbuchstaben
- Zwischenraum zwischen Wörtern
- Linienhöhe
Nehmen Sie die gewünschten Änderungen vor und sehen Sie, wie sie einen Bruchteil einer Sekunde später auf den Text angewendet werden.
Dann können Sie zurückgehen und einen Hintergrund für Ihren Absatz festlegen. Auch hier gibt Ihnen CSS Hero die volle Kontrolle. Sie können ein benutzerdefiniertes Bild hochladen, eine Farbe auswählen oder einen Verlauf festlegen, der als Hintergrund angezeigt werden soll.
Sie haben auch die gleichen Optionen für Absatzränder mit vollständiger Flexibilität in Bezug auf Rahmenstil, -breite und -farbe.
Es gibt sogar einige coole vorkonfigurierte Stile, zum Beispiel das Verwandeln von Text in eine Schaltfläche oder das Anzeigen eines fertigen Hintergrunds in verschiedenen coolen Layouts.
Wenn Sie nicht mit Änderungen an einem Abschnitt gleichzeitig arbeiten möchten, können Sie auch die Option auswählen, in der alle Anpassungsoptionen auf einem praktischen Bildschirm aufgelistet sind.
Änderungen rückgängig machen
Wenn Sie Änderungen am Text vornehmen, wendet CSS Hero diese auf die Live-Version Ihrer Website an. Machen Sie sich an dieser Stelle jedoch keine Gedanken über dauerhafte Änderungen: Bevor Sie die Änderungen übernehmen, haben Sie die Möglichkeit, sie zu löschen, indem Sie darauf klicken oder sie durch Drücken der Schaltfläche festschreiben.
Selbst nach dem Schlagen bleiben Sie jedoch nicht bei unerwünschten Änderungen hängen. Um zum Original zurückzukehren, kehren Sie zur obersten Ebene des CSS Hero-Menüs zurück, navigieren Sie zum Abschnitt und wählen Sie die Option aus.
Es ist auch möglich, ein einzelnes Element auf die werkseitigen Standardeinstellungen zurückzusetzen: Klicken Sie einfach auf das Element, das Sie wiederherstellen möchten, und klicken Sie dann auf das kleine Symbol "Zurücksetzen" rechts im Menü. Drücken Sie auf Bestätigen, und Ihr rebellisches Element wird in seinem früheren Glanz wiederhergestellt.
Wie bereits erwähnt, werden alle Anpassungen auf ein Stylesheet angewendet. Im schlimmsten Fall bleibt das ursprüngliche Stylesheet für Ihr Thema erhalten. Dies bedeutet, dass unabhängig davon, welche Änderungen Sie mit CSS Hero vornehmen, kein langfristiger Schaden angerichtet werden kann. Wenn alle anderen Wiederherstellungsoptionen fehlschlagen, können Sie Ihr Standarddesign wiederherstellen und problemlos schlafen.
Bearbeiten Sie ein Element
Eine der Stärken von CSS Hero ist, dass Sie jedes Element auf Ihrer Seite bearbeiten können, egal wie groß oder klein es ist.
Wenn Sie sich das Gesamtbild ansehen, können Sie das Hintergrundbild, den Seitenleistenstil und den Fußzeilenbereich Ihrer Website bearbeiten.
Dies wird mit demselben Verfahren erreicht, mit dem wir unseren Absatz bearbeitet haben. Es zeigt jedoch, dass CSS Hero verwendet werden kann, um grundlegende Änderungen an der Ästhetik Ihrer Website vorzunehmen. Schauen Sie sich den Screenshot unten an, in dem ich den Hintergrund meiner Seitenleiste geändert, die Widget-Header-Stile geändert und den Bereich neu konfiguriert habe. Hier ist die Grundaufnahme:
Und hier ist meine Passform: Ich bin kein Designer, ich gebe es zu, aber das hat nur ein paar Sekunden gedauert.
Sie können auch kleine Inhaltselemente wie Bilder, Linkfarben und Listenstile anpassen. Listenstile sind besonders interessant, da Sie im entsprechenden Abschnitt benutzerdefinierte Aufzählungszeichen auswählen können. Es werden sechs coole vorgefertigte Aufzählungszeichen unterstützt, darunter Quadrate, Dezimalstellen und römische Ziffern. Sie können auch Ihre eigenen benutzerdefinierten Symbole hochladen, um eine persönlichere Note zu erhalten.
Hoffentlich erhalten Sie dadurch eine Vorstellung davon, wie Sie das Design Ihrer Website überprüfen können. Ihr WordPress-Theme bildet die Grundlage, aber dank CSS Hero können Sie jedes Pixel auf Ihrer Website nach Ihren Wünschen anpassen, ohne eine Codezeile zu berühren.
Weitere Funktionen
CSS Hero hat einige andere coole Funktionen, auf die ich Sie aufmerksam machen möchte.
Erstens ist die. Mit zunehmendem Schwerpunkt auf reaktionsschnellem Design ist es wichtig, dass Ihre Website auf Geräten aller Formen und Größen reibungslos funktioniert. CSS Hero verfügt über eine integrierte Funktion, mit der Sie Ihre Website auf Desktop-, Tablet- und Mobilansichten anzeigen können.
Wählen Sie einfach Ihre bevorzugte Ansicht in der Symbolleiste aus (dies ist die zweite Option nach unten) und lassen Sie CSS Hero Ihren Bildschirm auf die entsprechende Größe umwandeln. Dies ist eine großartige Möglichkeit, um die Änderungen zu testen, die Sie an kleineren Geräten vorgenommen haben.
Als nächstes haben wir das wichtige Merkmal. Jedes Mal, wenn Sie die Taste drücken, speichert CSS Hero einen Schnappschuss Ihrer Website. Diese Schnappschüsse können auf Knopfdruck angezeigt und wiederhergestellt werden, was bedeutet, dass Ihre harte Arbeit niemals verschwendet wird. Sie können einfach rechtzeitig hin und her springen.
Schließlich haben wir die Option, die im Abschnitt verfügbar ist. Dies gibt Ihnen die Möglichkeit, Ihr bearbeitetes CSS zur Verwendung auf einer anderen Website zu exportieren oder es einfach auf den Bildschirm hochzuladen, um die von Ihnen vorgenommenen Änderungen zu untersuchen (eine der besten Möglichkeiten, CSS zu lernen).
Inspector Pro Plugin
Diejenigen unter Ihnen, die ein Upgrade auf die Pläne durchgeführt haben oder auch das CSS Hero Inspector Pro-Plugin in Ihrer Lizenz enthalten haben.
Inspector Pro wurde im Mai 2015 angekündigt und ist kürzlich aus dem Beta-Modus ausgeschieden. Es richtet sich an fortgeschrittene CSS-Benutzer. Während CSS Hero ein Tool ist, das absolut keine CSS-Kenntnisse erfordert, wurde Inspector Pro für diejenigen entwickelt, die ihre Website durch direktes Anpassen des CSS anpassen möchten.
Inspector Pro zeigt das CSS Ihres Themas unterhalb der Live-Vorschau an. Sie können diesen Code nach Belieben bearbeiten und Ihre Änderungen werden in der Vorschau angezeigt. Durch die Möglichkeit, das CSS direkt zu bearbeiten, haben Sie mit diesem Plugin die absolute Kontrolle über Ihre Anpassungen, Pixel für Pixel.
Inspector Pro bietet jedoch auch einige nützliche Funktionen, sodass Sie nie allein sind. Sie können beispielsweise mit der praktischen Suchfunktion zu einer bestimmten Zeile springen oder bestimmte Stilzeilen deaktivieren, damit sich überlappende Elemente nicht stören.
Wenn Sie Ihr CSS von Grund auf neu schreiben, werden Sie dieses Plugin lieben, da Sie nicht mehr von einem Fenster zum anderen wechseln müssen – Sie können alle Ihre Änderungen auf einem Bildschirm vornehmen und anzeigen. Praktisch!
CSS Hero Support
Ab dem Moment, in dem Sie sich beim CSS Hero-Dashboard anmelden, können Sie sehen, wie die Entwickler sich bemühen, Ihnen dabei zu helfen, das Beste aus Ihrem Plugin herauszuholen.
Ich habe bereits die umfangreiche Dokumentation und die CSS Hero Academy erwähnt (die Akademie steckt noch in den Kinderschuhen, aber es gibt konkrete Pläne, ihre Expansion fortzusetzen).
Diese beiden Abschnitte sind unglaublich umfassend und die Akademie enthält hilfreiche Tutorial-Videos. CSS Hero scheint auf den ersten Blick schwierig zu sein, daher waren diese kurzen Video-Tutorials hilfreich, um meine Füße zu finden. Danach fühlte sich das Plugin relativ einfach an.
Es gibt auch einen erweiterten Dokumentationsabschnitt, bekannt als. Dies richtet sich an Plugin- / Theme-Entwickler, die die erforderlichen Schritte unternehmen, um sicherzustellen, dass ihre Produkte vollständig CSS Hero-kompatibel, d. H. Heldenbereit sind.
Für diejenigen, die ihre Probleme trotz detaillierter Dokumentation immer noch nicht lösen können, gibt es auch ein Support-Forum. Die Mitarbeiter des CSS Hero-Supports stehen für Fragen in der Regel innerhalb weniger Stunden zur Verfügung. Mit einer Lizenz erhalten Sie ein Jahr lang Zugriff auf das Forum und das Support-Team.
Insgesamt kann CSS Hero nicht an seinen Unterstützungsbemühungen schuld sein. Die vorab geschriebenen und aufgezeichneten Tutorials sind sehr hilfreich und werden während der gesamten Benutzererfahrung an den Stellen verteilt, an denen sie am wahrscheinlichsten benötigt werden.
Da WordPress-Plugins immer ausgefeilter werden, würde ich mir wünschen, dass mehr Entwickler dem Beispiel von CSS Hero folgen und sofort erweiterte Unterstützung bieten, damit sich unerfahrene Benutzer nie außer Reichweite fühlen.
Letzte Gedanken
Insgesamt war ich sehr beeindruckt von CSS Hero. Mit uneingeschränktem Anpassungspotential hätte dieses Plugin leicht überwältigen können. Aufgrund der intelligenten und intuitiven Benutzeroberfläche (und nützlicher Tutorials) war es jedoch jederzeit einfach zu bedienen.
Die Anpassungsmöglichkeiten sind endlos und ermöglichen es Ihnen, Ihr Thema auf jede erdenkliche Weise zu ändern. Auf diese Weise können Sie einige coole und originelle Designs erstellen, die die Grundlagen Ihres Themas und alles verwenden, ohne sich mit dem Code die Hände schmutzig zu machen.
CSS Hero ist jedoch nichts für Hobby-Programmierer. Inspector Pro ist ein aufregendes Tool für erfahrene Entwickler, die eine Website von Grund auf neu erstellen möchten.
Das Plugin macht es durchaus möglich, dass Sie eine Site von Grund auf neu erstellen und dabei zusehen können, wie Ihre Kreation Zeile für Zeile zum Leben erweckt wird. Realistischer ist es jedoch, das Rätselraten bei der Anpassung von Themen zu vereinfachen und Entwicklern, die Kundenarbeit leisten, viel Zeit zu sparen.
Insgesamt ist CSS Hero ein überlegenes Plugin, das WordPress-Benutzer aller Schwierigkeitsgrade wirklich ansprechen sollte. Wenn Sie es noch nicht getan haben, probieren Sie es aus!
(Update – 16. März – Seit dem Schreiben dieses Beitrags hat CSS Hero uns freundlicherweise ein Special zur Verfügung gestellt Rabatt-Gutscheincode Autorisierung von WinningWP-Lesern zu 40% Rabatt – Siehe Gutschein).
