Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

CSS Hero Überprüfung: WordPress-Design-Anpassung leicht gemacht

Wenn Sie zu den vielen Anfängern gehören, die das Design Ihrer WordPress-Website anpassen möchten, ohne CSS anzufassen, dann haben Sie Glück.

Mit dem CSS Hero-Plugin für WordPress können Sie das Design anpassen, ohne auch nur eine einzige Zeile Code anzufassen.

In dieser aktualisierten CSS Hero-Review zeigen wir Ihnen, wie Sie CSS Hero verwenden können, um Ihre Website anzupassen, und warum wir glauben, dass es eines der Plugins ist, die jeder WordPress-Anfänger ausprobieren sollte.

Reviewing CSS Hero, web design tool for WordPress

Unser CSS-Held Rezension

CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme gestalten können, ohne eine einzige Zeile Code zu schreiben (kein HTML oder CSS erforderlich).

Sie können Änderungen schnell rückgängig machen, was für Anfänger äußerst hilfreich ist. Alle Änderungen werden als zusätzliches Stylesheet gespeichert, sodass Sie Ihr WordPress-Theme aktualisieren können, ohne sich Gedanken über den Verlust der Änderungen zu machen.

Sie werden CSS Hero gleichermaßen gut finden, wenn Sie Designer oder Entwickler sind. Es funktioniert gut mit allen gängigen WordPress-Themes und -Frameworks. Sie können ein Theme oder Child-Theme schnell ändern und es auf die Website eines Kunden exportieren.

Mit CSS Hero können Sie Zeit und Frustration bei der Anpassung von Designs sparen.

CSS Hero vs. WordPress Page Builders

CSS Hero ist ein Design-Tool und keine ideale Lösung für die Erstellung von Landing Pages oder die Erstellung eines individuellen WordPress-Themes von Grund auf.

Es funktioniert mit Ihrem WordPress-Theme und ermöglicht Ihnen die Anpassung von CSS, ohne CSS-Code zu schreiben.

Andererseits können Sie mit einem WordPress Page Builder Plugin Landing Pages erstellen und Layouts anpassen, unabhängig davon, welches WordPress-Theme Sie verwenden.

Pro-Tipp: Wenn Sie Landing Pages, Verkaufsseiten, Produktseiten und mehr erstellen möchten, empfehlen wir SeedProd. Es ist das beste WordPress Page Builder-Plugin, mit dem Sie schnell hochkonvertierende und schöne Seiten für Ihre Website erstellen können.

Wie Sie CSS Hero verwenden, um Ihr WordPress-Theme anzupassen

Zunächst müssen Sie das CSS Hero-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Es handelt sich um ein Premium-WordPress-Plugin mit Preisen ab 29 $ für eine einzelne Website (die Investition lohnt sich auf jeden Fall, wenn man bedenkt, wie viel Zeit und Ärger Sie damit sparen).

Sie können den CSS Hero-Gutscheincode verwenden: WPBEGINNER, um einen Sonderrabatt von 34% zu erhalten. Wenn Sie den PRO-Plan kaufen, erhalten Sie mit demselben Code einen Rabatt von 40%.

Sie werden nach der Aktivierung weitergeleitet, um Ihren CSS Hero-Lizenzschlüssel zu erhalten. Folgen Sie den Anweisungen auf dem Bildschirm, und Sie werden mit wenigen Klicks zu Ihrer Website zurückgeleitet.

CSS Hero zielt darauf ab, Ihnen eine WYSIWYG-Schnittstelle (what you see is what you get) für die Bearbeitung Ihres Themas zu bieten.

Besuchen Sie einfach Ihre WordPress-Website, während Sie eingeloggt sind, und Sie werden die CSS Hero-Schaltfläche in der WordPress-Verwaltungsleiste sehen.

CSS Hero button in WordPress admin toolbar

Wenn Sie auf die Schaltfläche klicken, wird Ihre Website in eine Live-Vorschau umgewandelt.

Sie sehen nun den CSS Hero-Editor. Er hat eine obere und untere Symbolleiste, eine linke Spalte und eine Live-Vorschau Ihrer Website.

CSS Hero user interface

Wenn Sie nun mit der Maus auf ein Element zeigen, das Sie bearbeiten möchten, wird es von CSS Hero hervorgehoben, um anzuzeigen, wo Sie sich befinden.

Wenn Sie darauf klicken, wird dieses Element ausgewählt und seine Eigenschaften in der linken Spalte angezeigt.

Properties you can edit for an element

Dazu gehören allgemeine CSS-Eigenschaften für das ausgewählte Element, wie Hintergrund, Typografie, Rahmen, Abstände und mehr.

Sie können auf ein beliebiges Element klicken, um es zu erweitern und dann die CSS-Eigenschaften über eine einfache Benutzeroberfläche zu bearbeiten.

Background properties

Wenn Sie Änderungen vornehmen, erscheint das benutzerdefinierte CSS auf magische Weise darunter.

Wenn Sie CSS lernen, ist es hilfreich zu sehen, wie die verschiedenen CSS-Änderungen angewendet werden und wie das Ergebnis in der Live-Vorschau aussieht.

CSS code preview

Haben Sie Probleme, lizenzfreie Bilder für Ihre Website zu finden?

CSS Hero verfügt auch über eine integrierte Unsplash-Integration, die es Ihnen ermöglicht, schöne Fotos zu durchsuchen und für das Design Ihrer Website zu verwenden.

Unsplash integration

CSS Hero enthält auch einige vorgefertigte Snippets, die Sie auf verschiedene Elemente Ihrer Website anwenden können.

Wechseln Sie zur Registerkarte „Snippets“ in der linken Spalte, wo Sie eine Reihe gemeinsamer Elemente finden.

Use snippets

Sie können auf ein Element klicken, um es auszuwählen, und CSS Hero zeigt Ihnen verschiedene Stilvarianten an.

Klicken Sie auf die Schaltfläche „Parameter festlegen“, um einen Stil zu bearbeiten, der Ihnen gefällt, und klicken Sie dann auf die Schaltfläche „Übernehmen“, um ihn zu Ihrem Thema hinzuzufügen.

Apply a snippet style

Wenn Sie Änderungen an Ihrer Website vornehmen, speichert CSS Hero diese Änderungen automatisch, veröffentlicht sie aber nicht.

Um diese Änderungen auf Ihre Live-Website zu übertragen, klicken Sie auf die Schaltfläche „Speichern und veröffentlichen“ in der unteren rechten Ecke des Bildschirms.

Save and publish your changes

Wie man Änderungen in CSS Hero rückgängig macht

Eine der besten Funktionen von CSS Hero ist die Möglichkeit, alle Änderungen jederzeit rückgängig zu machen.

CSS Hero speichert einen Verlauf aller Ä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. Diese Schaltfläche sieht aus wie eine kleine Uhr.

History revisions

Sie können auf ein Datum und eine Uhrzeit klicken, um zu sehen, wie Ihre Website zu diesem Zeitpunkt aussah. Wenn Sie zu diesem Zustand zurückkehren möchten, speichern Sie oder setzen Sie die Bearbeitung an diesem Punkt fort.

Das bedeutet nicht, dass Änderungen, die Sie nach diesem Zeitpunkt vorgenommen haben, verschwinden. Sie werden weiterhin gespeichert; Sie können auch zu diesem Zeitpunkt zurückkehren. Einfacher geht’s nicht.

Was aber, wenn Sie nur Änderungen an einem bestimmten Element rückgängig machen wollen?

In diesem Fall brauchen Sie das Verlaufswerkzeug nicht zu verwenden. Klicken Sie auf das Element, das Sie auf eine frühere Version zurücksetzen möchten, und dann auf die Schaltfläche „Zurücksetzen“.

Reset edits for an element

Dadurch wird das Element auf die Standardeinstellungen zurückgesetzt, die in Ihrem WordPress-Theme definiert sind.

Anpassen Ihrer Website für mobile Geräte in CSS Hero

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 aussieht.

Webdesigner verwenden verschiedene Tools, um die Browser- und Gerätekompatibilität zu testen. Zum Glück verfügt CSS Hero über ein eingebautes Vorschau-Tool.

Wählen Sie einfach in der oberen Symbolleiste zwischen Mobil-, Tablet- und Desktop-Geräten. Der Vorschaubereich wird auf das ausgewählte Gerät umgestellt. Sie können auch zwischen den Modi „Bearbeiten“ und „Navigieren“ hin- und herschalten, um andere Symbolleisten auszublenden.

Preview on different devices

Wenn Sie in den Modus „Bearbeiten“ wechseln, können Sie Ihre Website bearbeiten und gleichzeitig eine Vorschau für mobile Geräte anzeigen. Dieses Tool ist praktisch, um das Design Ihres Themas für Mobilgeräte und Tablets zu optimieren.

CSS Hero Theme-Kompatibilität

Die offizielle CSS Hero-Website bietet eine ständig wachsende Liste kompatibler Themes. Diese Liste enthält viele der besten kostenlosen WordPress-Themes.

Es bietet auch die beliebtesten Premium-Themes von Shops wie Astra, Divi, CSSIgniter, Themify, StudioPress und anderen.

Was ist mit Themen, die nicht in der Themenkompatibilitätsliste aufgeführt sind?

CSS Hero verfügt über eine Funktion namens Rocket Mode Auto-Erkennung. Wenn Sie ein Thema verwenden, das nicht in der Themenkompatibilitätsliste enthalten ist, verwendet CSS Hero automatisch den Rocket-Modus.

Rocket Mode versucht, die CSS-Selektoren Ihres Themes zu erraten. Das funktioniert in den meisten Fällen perfekt. Wenn Ihr Theme den WordPress-Codierungsstandards entspricht, können Sie fast alles bearbeiten.

Sie können sich auch an Ihren Theme-Entwickler wenden und ihn bitten, die Kompatibilität mit CSS Hero zu gewährleisten.

Welche Plugins sind mit CSS Hero kompatibel?

CSS Hero wird regelmäßig mit den wichtigsten WordPress-Plugins auf Kompatibilität getestet.

Dazu gehören Plugins für Kontaktformulare, beliebte Seitenerstellungsprogramme, WooCommerce und andere.

Wenn Sie ein WordPress-Plugin verwenden, das eine Ausgabe erzeugt, die nicht mit CSS Hero bearbeitet werden kann, können Sie den Autor des Plugins bitten, dies zu beheben. Sie müssen nicht viel tun, um die Kompatibilität mit CSS Hero zu gewährleisten.

Weitere Einzelheiten finden Sie in unserem Leitfaden, wie Sie richtig nach WordPress-Support fragen und diesen auch erhalten.

Wir hoffen, dass Sie unseren CSS Hero Testbericht nützlich fanden. Vielleicht interessieren Sie sich auch für unseren ultimativen Leitfaden zur Verbesserung der WordPress-Geschwindigkeit und -Leistung für Anfänger und unseren Vergleich der besten WordPress-Seitenerstellungsprogramme, mit denen Sie Ihr Theme und Ihre Webseiten ohne CSS gestalten können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

47 KommentareEine Antwort hinterlassen

  1. THANKGOD JONATHAN

    Thank you the post. You have made it really simple with this plugin to customize Wordpress site. I will really try CSS Hero sometime.

  2. Ralph

    I had 3 websites for over 10 years on wordpress and I never touched CSS. I tried as I had to fix something that i couldn’t do in theme builder but that never turned around good. All tutorials were super complex and didn’t really help people who are not familiar with coding.

    Good to know there are alternatives now that can help less tech savy people to do what they just want to do, without learning new skill just to fix few small thing.

    • WPBeginner Support

      Glad we could share this plugin with you :)

      Admin

  3. Frank Biganski

    I have nearly ten years‘ experience with WordPress and somewhat knowledgabe with CSS. I cannot write it but I can implement it with help.

    I purchased the CSS Hero plugin as they state it will work with LearnPress LMS plugin. However, after giving it a go, I found the plugin does not work with the LMS.

    I spoke with my very experienced theme developer (WPExplorer) and he stated, in short terms, the LearnPress plugin is complexly and somewhat poorly written, which will make the CSS Hero plugin not function properly.

    CSS Hero states a 30 day money back guarantee however after contacting them twice, and two weeks later, I still have not heard back from anyone at CSS Hero.

    Just beware about the warranty as it seem I will have to try and contact my credit card company and try to cancel.

    • WPBeginner Support

      Thank you for sharing your experience, just to be safe please be sure that any messages they may have sent are not caught in your spam folder.

      Admin

  4. Claire Smith

    Hi there,

    Does CSS Hero work with the Simple Membership plugin do you know? Many thanks

    • WPBeginner Support

      You would want to check with CSS Hero for any questions about current conflicts.

      Admin

  5. Richard

    I just started up a new website and have been crazy frustrated with the inability to customize themes very much. A lot of the controls are locked behind paying for a theme, but I’m not even sure if I like the theme enough to risk paying for it because I can’t edit everything enough. Will CSS Hero let me sidestep buying themes and edit the free versions?

    • WPBeginner Support

      It would depend on the customizations you are looking for, CSS hero will certainly help you customize your site without the need for a paid theme. You may want to take a look at their demo page on their site to see what the plugin is able to do.

      Admin

  6. Michael

    Amazing how good this is in the review. Maybe it’s got something to do with all of the affiliate links that you’ve got peppered throughout it to make referral money from it?

    I’m not saying that the plugin isn’t good, but these sort of reviews are hard to take seriously. If it was really good you could say so, but saying that it’s good on the same page as trying to make money from selling it makes it seem like a very big paid editorial advertisement for this plugin.

  7. Art

    I’m a little confused as to why you would use CSS Hero with a theme builder like Elementor or Divi other than seeing the code that is use for a certain element. Am I missing something?

  8. Jon Seager

    Hi thanks for letting me be the first questiner. Still have broblems showing them w/o the image box on the main page but on the single product page I was able to ditch the image then sqoosh the placehold off the screen to the left. It didn’t really squoosh but it did allow the text to start at a more respectable starting point.

    I would still love to speak to someone that has enough free time to allow me to hire on a task based relationship. I could use some help making a better searchbar with to and from date and then some plus much more work to do and could use a partner to divie up the tasks and work together.

  9. Samuel Lin

    Hi, found wpbeginner is really helpful for beginner as I am.
    One of the subsite under my multisite had installed with Affinity theme which we love very much.
    But when we added Buddypress plugin, the display of buddypress group admins and mods is wasting a lot of space especially on mobile

    Can we modify the layout of BP under Affinity using CSS Hero?
    Thanks,
    Sam

    • WPBeginner Support

      Hi Samuel,

      We are not sure, please contact the plugin author to learn if someone has tried it with BuddyPress and Affinity.

      Admin

  10. Erik

    Hello there,

    is this plugin compatible with Slider revolution (5.4) and Visual Composer?
    It could be a faster way in working with this – than with the others… in some cases.

    Love to hear from you!
    Erik

  11. Louis

    Can’t find CSS HERO in the plugins

  12. AnnaD

    Hello
    I’ve perchased this plugin but can’t use it: CSS Hero isn’t active
    but I can’t finf the way where can I activate it …

  13. Enn

    Hi,
    Very nice overview and the plugin itself looks really useful. I have downloaded the CSS Hero, but not able to start it up on my computer. Is this plugin meant for Mack only?

    Regards,

    Enn

  14. Jerry

    I just recently discovered WPB. Though I have been a WP site maintainer for several years i find that I am learning something new every time i view one of your tutorials. Thanks. I appreciate your efforts.

  15. Al

    Will this plug in remove the menus on a Pavillioin theme, one of the standard Wordpress themes? I see how it is kind of like firebug in that you can identify the part of the code you want to change but this plug in will actually allow you to change it without knowing code, right? But will it remove the menu instead of changing color or location or whatever.

    Thanks

  16. Anthony

    Hi,

    I purchased a wordpress theme from theme forest and uploaded the theme to my wordpress builder. The site is being hosted by inmotion hosting. My question is, since i am using the wordpress site builder to work on my site, after I install the plug in for CSS Hero, will that button still appear on the top right of my site so i can edit the content when im using the wordpress web builder? or do i have to host my site to have that capability? i dont think it matters if someone else is hosting my site correct? as long as im using the wordpress builder? little ignorant to this and so im learning as I go. Thanks

    • WPBeginner Support

      Hi Anthony,

      If your theme follows the standard WordPress coding best practices then you will be able to use it with CSS Hero without any problems. If you cannot, then please contact your theme’s support.

      Admin

  17. Derek

    I have have just returned to a wordpress site to update but the CSSHERO plugin does not work even though it is visible on the page. Nothing happens when I hover over content even though CSSHero seems to be active. The plug in active (V 2.1) but I noticed that the current version is 2.3 but no notice to update?

    • WPBeginner Support

      Hi Derek,

      Please contact the plugin’s support team. For a quick work around, you can manually upload the plugin’s zip file.

      Admin

  18. THE VIP

    Isn’t it is same as Chrome Dev Tools….I didn’t found any considerable differences b/w CDT n CSS hero….

    BTW coupon code is not working for me too ???

  19. Jitka Hruzova

    I have Yuuta free theme. atm, I need this to be able to modify size, of my logo on the website ( using jetpack is terrible, it inserts the logo but it is a small and I can modify size or anything) is it going to work for me?

  20. Phermiki Phawa

    How to make my blog become friendly with mobiles?

  21. Bhaskar Dhiman

    sir how we can compress the theme coding manually ? i am using newspaper 7.

  22. Darshan Gajara

    Wow! It’s a real hero.

  23. Andy V.

    Can CSS Hero be used with premium themes purchased on WordPress.com?

  24. Juergen | webbeetle

    I followed the link and came to page with „Pricing Plans“… A big no-no for me! I understand that this is the most efficient way for any business to make money, but I have no plans to subscribe to any „plan“ – other than my website hosting (where I stopped to be a „loyal customer“ when the service and load times aren’t right).

    • CSS Hero

      There is no automatic subscription – you can renew every year if you want plugin updates – but the product WILL continue to work where it was installed – without paying each year.

  25. Tom

    Purchased your plugin, the first site i tried it on Wordpress Stella Magazine Theme……didn’t fly.
    I’m disappointed
    What can we do ?

  26. Tom Tortorici

    If you’re changing the properties of, say, h2, can you change it for just one instance or one page, or can it only change all the h2’s throughout the site?

  27. Juliette

    Amazing! It’s really what I need.
    Working like a charm with DIVI and GENESIS!

  28. Monnie

    Hi, the discount code doesn’t seem to be working.

  29. Louise Findlay

    Yes. I have been looking for something like this for a while.

  30. Saurabh Chatterjee

    Is it free ? if not, is there is any other visual css editor like this , which is free of cost ?

    • Editorial Staff

      This is not free as stated in the article. No you will not find any free visual editor like this one.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.