- \n
- \u00c4ndern Sie die Schriftfamilie, Schriftgr\u00f6\u00dfe und Farbe eines beliebigen Textes<\/li>\n
- Hintergrundfarben und Bilder \u00e4ndern<\/li>\n
- Passen Sie den Abstand zwischen allen Elementen an<\/li>\n<\/ul>\n
Und das ist nur ein Beispiel f\u00fcr die gro\u00dfartigen Anpassungen, die m\u00f6glich sind.<\/p>\n
Was ist nicht CSS Hero?<\/h2>\n
Sie k\u00f6nnen mit CSS Hero keine neuen Vorlagen oder v\u00f6llig neue Layouts erstellen. Daf\u00fcr<\/a> sind Page Builder wie Elementor da<\/a>.<\/p>\n
Im Allgemeinen ist CSS Hero nicht das richtige Werkzeug, wenn Sie eine \u00c4nderung an Ihrer Website vornehmen m\u00f6chten, die das Hinzuf\u00fcgen neuer Inhalte erfordert. Wenn Sie eine rein visuelle \u00c4nderung vornehmen m\u00f6chten, z. B. die Farbe oder Gr\u00f6\u00dfe eines Elements \u00e4ndern, ist CSS Hero perfekt.<\/p>\n
So verwenden Sie CSS Hero<\/h2>\n
Obwohl es eine Menge Optionen bietet, ist die Verwendung von CSS Hero<\/a> eigentlich sehr einfach.<\/p>\n
Klicken Sie hier, um CSS Hero selbst auszuprobieren<\/a><\/p>\n
Installation<\/h3>\n
CSS Hero wird wie jedes andere Plugin \u00fcber das Plugins-Men\u00fc hochgeladen. Nach der Installation erscheint eine Schaltfl\u00e4che, die Sie auffordert, einen Lizenzschl\u00fcssel zu erhalten.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nWenn Sie auf diese Schaltfl\u00e4che klicken, gelangen Sie zu einer Seite ihrer Site, auf die Sie auf eine weitere Schaltfl\u00e4che klicken m\u00fcssen, und dann wird die Lizenz aktiviert.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nEs k\u00f6nnte nicht einfacher sein.<\/p>\n
Die Schnittstelle<\/h3>\n
Sobald CSS Hero aktiviert ist, wird Ihrer Site ein neues Element "Mit CSS Hero bearbeiten" zur Admin-Symbolleiste hinzugef\u00fcgt.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nWenn Sie darauf klicken, gelangen Sie zur Designoberfl\u00e4che von CSS Hero.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nIch zeige CSS Hero mit unserem kostenlosen Ignite-<\/a> Theme<\/p>\n
Die Benutzeroberfl\u00e4che \u00e4hnelt dem Customizer (in unserem grundlegenden Anpassungsleitfaden behandelt<\/a> ). Auf der linken Seite befindet sich ein Bedienfeld mit den Anpassungswerkzeugen und auf der rechten Seite eine Vorschau, die live aktualisiert wird, w\u00e4hrend Sie \u00c4nderungen vornehmen. Wie beim Customizer ist keine dieser \u00c4nderungen f\u00fcr Ihre Besucher sichtbar, bis Sie auf die Schaltfl\u00e4che Speichern & ver\u00f6ffentlichen klicken.<\/p>\n
W\u00e4hlen Sie ein Element aus<\/h3>\n
Der Anpassungsprozess mit CSS Hero beginnt mit der Auswahl eines Elements.<\/p>\n
Wenn Sie Ihre Maus in der Site-Vorschau bewegen, sehen Sie einen blauen Umriss, der alle ausw\u00e4hlbaren Elemente definiert. Wenn Sie auf ein Element klicken, k\u00f6nnen Sie es bearbeiten. So w\u00fcrde ich den Header des Ignite-Themas ausw\u00e4hlen:<\/p>\n
Anpassen von Site-Elementen<\/h3>\n
Sobald ein Element ausgew\u00e4hlt ist, werden die anpassbaren Eigenschaften zum linken Bereich hinzugef\u00fcgt.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nDieselben Eigenschaften sind f\u00fcr alle Elemente verf\u00fcgbar<\/p>\n
Dies sind all die verschiedenen Anpassungen, die Sie mit CSS Hero an jedem Element vornehmen k\u00f6nnen.<\/p>\n
Sehen wir uns einige dieser Eigenschaften genauer an, damit Sie eine Vorstellung davon bekommen, wie sie zur Anpassung Ihrer Website verwendet werden k\u00f6nnen.<\/p>\n
Schriftarten wechseln<\/h4>\n
Wenn die Kopfzeile ausgew\u00e4hlt ist, kann ich die Option Typografie ausw\u00e4hlen und dann eine neue Schriftart ausw\u00e4hlen. Die ausgew\u00e4hlte Schriftart wird automatisch auf den gesamten Text in der Kopfzeile angewendet. Dies ist viel schneller als zu versuchen, dem Men\u00fc- oder Site-Titel einzeln eine Schriftart zuzuweisen.<\/p>\n
CSS Hero bietet Ihnen Zugriff auf eine Reihe von Systemschriftarten (auf Ihrem Betriebssystem installierte Schriftarten) und einige der beliebtesten Schriftarten von Google Fonts<\/a>. Es gibt auch einen \u201eSchriftenmanager“, mit dem Sie mit einem Klick eine beliebige Schriftart von Google Fonts zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen.<\/p>\n
Textfarben \u00e4ndern<\/h4>\n
Eine weitere h\u00e4ufige Anpassung, die CSS Hero verarbeiten kann, ist das \u00c4ndern der Textfarbe auf der Website.<\/p>\n
Um die Textfarbe eines Elements auf der Site zu \u00e4ndern, w\u00e4hlen Sie es aus, w\u00e4hlen Sie die Option Typografie und klicken Sie auf die Farbeinstellung. CSS Hero bietet Ihnen einen einfachen Farbw\u00e4hler, mit dem Sie die Farbe schnell \u00e4ndern k\u00f6nnen.<\/p>\n
Rahmen anpassen<\/h4>\n
Das Ignite-Theme hat einen orangefarbenen Rand am oberen Rand der Site. Diese l\u00e4sst sich mit CSS Hero<\/a> so einfach wie jede Textfarbe \u00e4ndern .<\/p>\n
Ich kann die Kopfzeile ausw\u00e4hlen, die Option Rahmen ausw\u00e4hlen und dann das Symbol f\u00fcr den oberen Rahmen ausw\u00e4hlen, um nur den oberen Rahmen zu bearbeiten. Die Farbe kann mit derselben Farbauswahloption ge\u00e4ndert werden, die zum \u00c4ndern der Textfarben verf\u00fcgbar ist.<\/p>\n
Hintergrundbild hinzuf\u00fcgen<\/h4>\n
Sie k\u00f6nnen die Hintergrundfarbe jedes Elements \u00e4ndern oder ein Hintergrundbild anwenden.<\/p>\n
Wenn Sie einen strukturierten Look w\u00fcnschen, k\u00f6nnen Sie ein kleines Hintergrundbild hinzuf\u00fcgen und es vertikal und horizontal wiederholen. Sie k\u00f6nnen auch ein statisches Hintergrundbild erstellen, das den gesamten Hintergrund der Site ausf\u00fcllt. CSS Hero bietet Ihnen alle Steuerelemente, die Sie ben\u00f6tigen, um ein Hintergrundbild mit jeder gew\u00fcnschten Positionierung und Gr\u00f6\u00dfe hinzuzuf\u00fcgen.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nW\u00e4hrend Sie jedes gew\u00fcnschte Bild hochladen k\u00f6nnen, verf\u00fcgt CSS Hero auch \u00fcber eine Integration mit Unsplash<\/a>, die Ihnen Zugriff auf Tausende von kostenlosen, hochaufl\u00f6senden Fotos bietet, was \u00e4u\u00dferst praktisch ist.<\/p>\n
Abstand anpassen<\/h4>\n
Die letzte Anpassungsfunktion in CSS Hero, die ich behandeln werde, sind die Abstandseigenschaften.<\/p>\n
Rand wird verwendet, um Raum zwischen Elementen zu schaffen. Zum Beispiel kann ich den Abstand \u00fcber dieser Schaltfl\u00e4che verringern und den Abstand darunter mithilfe der CSS-Eigenschaft margin vergr\u00f6\u00dfern.<\/p>\n
Auf der anderen Seite wird Polsterung verwendet, um innerhalb von Elementen Platz zu schaffen. Ich kann den Abstand auf allen vier Seiten der Schaltfl\u00e4che erh\u00f6hen, um sie gr\u00f6\u00dfer und einfacher zu klicken.<\/p>\n
Und wissen Sie, was noch beeindruckender ist?<\/p>\n
Diese \u00c4nderungen werden automatisch auf alle \u201eWeiterlesen“-Schaltfl\u00e4chen auf der Website angewendet, sodass ich diese Anpassung nur einmal vornehmen muss.<\/p>\n
Zusatzoptionen<\/h2>\n
CSS Hero hat auch Abschnitte zum \u00c4ndern des Randradius (abgerundete Ecken) und Listenstile, aber Sie werden diese nicht ann\u00e4hernd so oft verwenden.<\/p>\n
Es gibt auch einen Extras-Bereich, der einige zuf\u00e4llige Eigenschaften wie Deckkraft, Boxschatten und Sichtbarkeit (beliebiges Element ausblenden) enth\u00e4lt, um nur einige zu nennen.<\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nSollten Sie CSS Hero verwenden?<\/h2>\n
Wenn Sie nur eine Handvoll Optimierungen vornehmen m\u00fcssen, kann es schwierig sein, den Kauf eines neuen Plugins zu rechtfertigen. Wenn Sie beispielsweise nur die Gr\u00f6\u00dfe Ihres Site-Titels \u00e4ndern m\u00f6chten, k\u00f6nnen Sie den Entwickler Ihres Themes wahrscheinlich per E-Mail um ein CSS-Snippet bitten, um dies zu tun.<\/p>\n
CSS Hero kostet jedoch nur 29 US-Dollar, was es sehr erschwinglich macht. Die Alternative besteht darin, Dinge selbst herauszufinden, was Stunden dauern kann. F\u00fcr 29 US-Dollar k\u00f6nnen Sie keinen Entwickler f\u00fcr die Arbeit an Ihrer Website einstellen.<\/p>\n
Klicken Sie hier, um CSS Hero jetzt zu testen<\/a><\/p>\n
Wenn Sie h\u00e4ufig Anpassungen an Ihrer Site vornehmen m\u00f6chten, ist eine Multi-Site-Lizenz meiner Meinung nach gerechtfertigt, um sicherzustellen, dass Sie immer die gew\u00fcnschten \u00c4nderungen am Design Ihrer Site vornehmen k\u00f6nnen.<\/p>\n
Zusammenfassend l\u00e4sst sich sagen, dass CSS Hero<\/a> ein hervorragendes Tool zur Website-Anpassung ist und eine wichtige Nische f\u00fcllt. F\u00fcr drastische Site-Anpassungen sollten Sie ein neues Design ausw\u00e4hlen<\/a> oder lernen, wie Sie einen Page Builder verwenden<\/a>.<\/p>\n
Klicken Sie hier, um weitere M\u00f6glichkeiten zum Anpassen Ihrer Website zu finden<\/a>.<\/p>\n