Volete apportare modifiche al design che il personalizzatore integrato di WordPress o i builder delle pagine non offrono? Il plugin CSS Hero vi permette di personalizzare questi elementi difficili da raggiungere senza toccare il codice.
Spesso usiamo CSS Hero quando dobbiamo regolare elementi di design specifici, come effetti al passaggio del mouse, spaziature complesse o sottili animazioni, che di solito richiedono CSS personalizzati. È perfetto per quelle regolazioni visive che sembrano semplici ma che in genere richiedono conoscenze di codifica.
In questa recensione di CSS Hero, vi mostreremo come usare CSS Hero per personalizzare facilmente l’aspetto del vostro sito web. Che si tratti di modificare gli stili dei pulsanti o di adattare layout complessi, questo strumento rende la personalizzazione avanzata accessibile a tutti.
Ecco una panoramica degli argomenti in copertina:
Che cos’è CSS Hero?
CSS Hero è un plugin premium per WordPress che consente di progettare il proprio tema WordPress senza scrivere una sola riga di codice (non sono richiesti HTML o CSS).
È possibile annullare rapidamente le modifiche al design di WordPress, il che lo rende estremamente utile per i principianti. Tutte le modifiche vengono salvate come foglio di stile aggiuntivo, in modo da poter aggiornare il tema WordPress senza preoccuparsi di perdere le modifiche.
Troverete CSS Hero altrettanto valido se siete designer o sviluppatori. Funziona bene con tutti i temi e i framework WordPress più diffusi. Potete modificare rapidamente un tema o un tema figlio ed esportarlo sul sito web di un cliente.
Come abbiamo usato e testato CSS Hero
Abbiamo già utilizzato CSS Hero in molti dei nostri tutorial su WordPress. È diventata la nostra soluzione quando i lettori hanno bisogno di apportare modifiche specifiche al design senza ricorrere alla codifica.
Ecco alcuni esempi:
- Come aggiungere stili personalizzati ai widget di WordPress
- Come abbellire i menu di navigazione di WordPress (aggiornato)
- Come dare uno stile diverso alle singole categorie in WordPress
Per questa recensione, abbiamo fatto un passo in più e abbiamo installato CSS Hero su un sito di prova. Abbiamo analizzato ogni caratteristica e applicato vari personalizzazioni. Questo test approfondito ci aiuta a individuare eventuali nuove capacità o limitazioni che potrebbero esserci sfuggite nell’uso quotidiano.
Perché fidarsi di WPBeginner? 📣
Seguiamo gli strumenti di personalizzazione di WordPress dal 2009, testando ogni soluzione importante che si inserisce nel mercato. Con così tanti plugin disponibili, capiamo quanto possa essere opprimente scegliere quello giusto per il vostro sito web.
I nostri consigli derivano da test reali e dall’esperienza diretta. E, cosa più importante, aggiorniamo costantemente le nostre conoscenze con l’evoluzione di WordPress. Quando strumenti come CSS Hero rilasciano nuove caratteristiche o aggiornamenti, li valuteremo e condivideremo con voi le nostre scoperte.
Per maggiori informazioni, potete consultare le nostre linee guida editoriali.
CSS Hero è un builder per pagine di WordPress?
No, CSS Hero e i builder di pagina hanno scopi diversi. CSS Hero è progettato specificamente per apportare modifiche di stile agli elementi del tema esistenti, mentre i builder di pagina servono a creare layout di pagina completamente nuovi.
Considerate CSS Hero come uno strumento di personalizzazione del design. Permette di modificare schemi di colore, spaziatura, tipografia e altri elementi visivi senza toccare il codice, ma non aiuta a costruire nuove pagine da zero.
Per creare layout personalizzati, landing page o pagine di vendita, è necessario un builder di pagine come SeedProd. È la soluzione da noi consigliata che consente di creare qualsiasi tipo di pagina utilizzando blocchi trascina e rilascia, template predefiniti e potenti controlli di progettazione.
Per ulteriori informazioni, potete selezionare la nostra recensione di SeedProd.
Come utilizzare CSS Hero per personalizzare il vostro tema WordPress
Per prima cosa, è necessario installare e attivare il plugin CSS Hero. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Poiché CSS Hero è un plugin premium per WordPress, è necessario pagare 29 dollari per un singolo sito. Detto questo, pensiamo che il prezzo valga assolutamente l’investimento, considerando il tempo e le seccature che vi salverà.
Potete usare il codice coupon CSS Hero WPBeginner per ottenere uno sconto speciale del 34% off. Se acquistate il piano PRO, lo stesso codice vi farà ottenere uno sconto del 40%.
Dopo l’attivazione, sarete reindirizzati per ottenere la chiave di licenza di CSS Hero. Seguite le istruzioni sullo schermo e sarete reindirizzati al vostro sito in pochi clic.
CSS Hero ha l’obiettivo di fornire un’interfaccia WYSIWYG (what you see is what you get) per la modifica del tema.
È sufficiente visitare il proprio sito web WordPress con il login per notare il pulsante CSS Hero nella barra di amministrazione di WordPress.
Facendo clic sul pulsante, il sito viene convertito in un’anteprima dal vivo.
A questo punto sarà possibile vedere l’editor CSS Hero. È dotato di una barra degli strumenti superiore e inferiore, di una colonna di sinistra e di un’anteprima in tempo reale del sito web.
Quindi, spostate il mouse su un elemento che desiderate modificare e CSS Hero lo evidenzierà per indicare la posizione in cui vi trovate.
Facendo clic su di esso, l’elemento viene selezionato e le sue proprietà vengono visualizzate nella colonna di sinistra.
Queste includono le proprietà CSS comuni per l’elemento selezionato, come lo sfondo, la tipografia, i bordi, la spaziatura e altro ancora.
È possibile fare clic su qualsiasi elemento per espanderlo e quindi modificare le proprietà CSS utilizzando una semplice interfaccia utente.
Man mano che si apportano le modifiche, il CSS personalizzato appare magicamente in basso.
Se state imparando i CSS, vi sarà utile vedere come vengono applicate le diverse modifiche CSS e il risultato nell’anteprima dal vivo.
Avete problemi a trovare immagini royalty-free per il vostro sito web?
CSS Hero dispone anche di un’integrazione Unsplash integrata, che consente di sfogliare, cercare e utilizzare splendide fotografie nel design del sito web.
CSS Hero è dotato anche di alcuni snippet già pronti che potete applicare a diversi elementi del vostro sito web.
Passate alla scheda “Snippets” nella colonna di sinistra e vedrete una serie di elementi comuni elencati.
È possibile fare clic per selezionare un elemento e CSS Hero mostrerà diverse varianti di stile.
Fare clic sul pulsante “Imposta parametri” per modificare lo stile desiderato, quindi fare clic sul pulsante “Applica” per aggiungerlo al tema.
Un’altra cosa interessante che CSS Hero può fare è personalizzare un elemento specifico su singoli post / tipi di contenuto. Per farlo, si deve navigare nell’impostazione ‘Modalità di selezione’ in alto a sinistra della schermata. Questo determina l’ampiezza dell’applicazione dei personalizzati:
- Normale: le modifiche apportate hanno effetto su ogni istanza di quell’elemento nel sito.
- Solo questo: Le modifiche si applicano solo all’elemento specifico che si sta modificando.
- Tipi di template/archivio: Le modifiche si applicano a tutte le pagine che utilizzano quel template (come le pagine delle categorie).
Questa flessibilità consente di apportare modifiche mirate al design esattamente dove è necessario, senza influire su altre parti del sito.
Quando si apportano modifiche al sito web, CSS Hero salva automaticamente le modifiche, ma non le pubblica.
Per applicare le modifiche al sito web in uso, fare clic sul pulsante “Salva e pubblica” nell’angolo in basso a destra della schermata.
Come annullare le modifiche in CSS Hero
Una delle caratteristiche migliori di CSS Hero è la possibilità di annullare le modifiche apportate in qualsiasi momento.
CSS Hero conserva una cronologia di tutte le modifiche apportate al tema. È sufficiente fare clic sul pulsante della cronologia nella barra degli strumenti di CSS Hero per visualizzare l’elenco delle modifiche. Questo pulsante ha l’aspetto di un piccolo orologio.
È possibile fare clic su una data e un’ora per vedere come si presentava il sito in quel momento. Se si desidera tornare a quello stato, salvare o riprendere la modifica da quel punto.
Questo non significa che le modifiche apportate dopo tale momento spariranno. Saranno ancora memorizzate; è anche possibile tornare a quel momento. Non c’è niente di più semplice.
Ma cosa succede se si desidera ripristinare solo le modifiche apportate a un particolare elemento?
In questo caso, non è necessario utilizzare lo strumento Storia. Fare clic sull’elemento che si desidera riportare a una versione precedente e quindi fare clic sul pulsante ‘Ripristina’.
In questo modo l’elemento verrà riportato alle impostazioni predefinite definite dal tema di WordPress.
Personalizzazione del sito per i dispositivi mobili con CSS Hero
L’aspetto più impegnativo del web design è la compatibilità con i dispositivi. Dovete assicurarvi che il vostro sito abbia lo stesso impatto su tutti i dispositivi e le dimensioni delle schermate.
I web designer usano vari strumenti per verificare la compatibilità con i browser e i dispositivi. Fortunatamente, CSS Hero è dotato di uno strumento di anteprima integrato.
Selezionare un dispositivo mobile, tablet o desktop nella barra degli strumenti in alto. L’area di anteprima verrà modificata in base al dispositivo. È anche possibile attivare/disattivare le modalità “Modifica” e “Navigazione” per nascondere le altre barre degli strumenti.
Passando alla modalità “Modifica” è possibile modificare il sito mentre si visualizza l’anteprima per i dispositivi mobili. Questo strumento è utile per modificare il design del tema per i dispositivi mobili e i tablet.
CSS Hero è compatibile con tutti i temi di WordPress?
Il sito ufficiale di CSS Hero ha un elenco sempre crescente di temi compatibili. Questo elenco comprende molti dei migliori temi gratuiti per WordPress.
Inoltre, ha i temi premium più popolari di negozi come Divi, CSSIgniter, Themify, StudioPress, Astra e altri ancora.
E i temi non presenti nell’elenco di compatibilità dei temi?
CSS Hero è dotato di una funzione chiamata Rocket Mode Auto-detection. Se si utilizza un tema non incluso nell’elenco di compatibilità dei temi, CSS Hero inizierà automaticamente a utilizzare la modalità Rocket.
Rocket Mode cerca di indovinare i selettori CSS del tema. Nella maggior parte dei casi funziona perfettamente. Se il vostro tema segue gli standard di codifica di WordPress, sarete in grado di modificare quasi tutto.
Si può anche contattare lo sviluppatore del tema e chiedergli di fornire la compatibilità con CSS Hero.
💡 Avete bisogno di aiuto per la progettazione del vostro sito web? Date un’occhiata al nostro servizio di progettazione di siti web WordPress. Per una piccola somma, il nostro team di esperti sviluppatori WordPress realizzerà un design professionale adatto ai vostri requisiti.
Quali plugin sono compatibili con CSS Hero?
CSS Hero è regolarmente testato con i migliori plugin di WordPress per verificarne la compatibilità.
Tra questi, i plugin per i moduli di contatto, i più diffusi page builder, WooCommerce e altri.
Se si utilizza un plugin di WordPress che genera un output non modificabile da CSS Hero, si può chiedere all’autore del plugin di risolvere il problema. Non hanno bisogno di fare molto per fornire la compatibilità con CSS Hero.
Per maggiori dettagli, consultate la nostra guida su come richiedere correttamente l’assistenza WordPress e ottenerla.
Ci auguriamo che la nostra recensione di CSS Hero vi sia stata utile. Potreste anche voler consultare la nostra guida definitiva su come migliorare la velocità e le prestazioni di WordPress per i principianti e il nostro confronto tra i migliori builder di temi per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
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.
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
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
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
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
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.
WPBeginner Support
Hi Michael,
At WPBeginner, we only recommend products that we have used and tested. Please see our disclaimer page to learn more about how we make money on this website.
Admin
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?
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.
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
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
Louis
Can’t find CSS HERO in the plugins
WPBeginner Support
Hey Louis,
CSS Hero is a paid plugin available from its own website.
Admin
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 …
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
WPBeginner Support
Hi Enn,
No, it is a WordPress plugin and would work on any WordPress installation.
Admin
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.
WPBeginner Support
Hi Jerry,
Thank you for kind words. Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
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
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
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
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 ???
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?
Phermiki Phawa
How to make my blog become friendly with mobiles?
Bhaskar Dhiman
sir how we can compress the theme coding manually ? i am using newspaper 7.
Darshan Gajara
Wow! It’s a real hero.
Andy V.
Can CSS Hero be used with premium themes purchased on WordPress.com?
WPBeginner Support
No it cannot be used on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Admin
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.
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 ?
WPBeginner Support
Please contact CSS Hero support.
Admin
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?
WPBeginner Support
It can do both. For example you can create a custom class for h2 tags on a particular page.
Admin
Juliette
Amazing! It’s really what I need.
Working like a charm with DIVI and GENESIS!
Monnie
Hi, the discount code doesn’t seem to be working.
Editorial Staff
I just tried it, and it seems to be loading just fine. Can you please try again
Admin
Louise Findlay
Yes. I have been looking for something like this for a while.
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