- \n
- Modifica la famiglia del carattere, la dimensione del carattere e il colore di qualsiasi testo<\/li>\n
- Cambia i colori e le immagini di sfondo<\/li>\n
- Regola la spaziatura tra gli elementi<\/li>\n<\/ul>\n
E questo \u00e8 solo un esempio delle fantastiche personalizzazioni possibili.<\/p>\n
Cosa non \u00e8 CSS Hero?<\/h2>\n
Non puoi creare nuovi modelli o layout completamente nuovi con CSS Hero. Ecco a cosa servono i page builder come Elementor<\/a>.<\/p>\n
In generale, se vuoi apportare una modifica al tuo sito che richiede l’aggiunta di nuovi contenuti, CSS Hero non \u00e8 lo strumento giusto. Se vuoi apportare una modifica puramente visiva come cambiare il colore o la dimensione di un elemento, CSS Hero \u00e8 perfetto.<\/p>\n
Come usare CSS Hero<\/h2>\n
Sebbene abbia un sacco di opzioni, l’uso di CSS Hero<\/a> \u00e8 in realt\u00e0 molto semplice.<\/p>\n
Clicca qui per provare CSS Hero per te<\/a><\/p>\n
Installazione<\/h3>\n
CSS Hero viene caricato tramite il menu Plugin proprio come qualsiasi altro plugin. Una volta installato, apparir\u00e0 un pulsante che ti chieder\u00e0 di ottenere una chiave di licenza.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nFacendo clic su questo pulsante si accede a una pagina del sito con un altro pulsante su cui fare clic, quindi viene attivata la licenza.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nNon potrebbe essere pi\u00f9 semplice.<\/p>\n
L’interfaccia<\/h3>\n
Una volta attivato CSS Hero, il tuo sito avr\u00e0 un nuovo elemento Modifica con CSS Hero aggiunto alla barra degli strumenti di amministrazione.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nFare clic su questo ti porter\u00e0 all’interfaccia di progettazione CSS Hero.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nSto mostrando CSS Hero con il nostro tema Ignite<\/a> gratuito<\/p>\n
L’interfaccia \u00e8 simile al Customizer (trattato nella nostra guida alla personalizzazione di base<\/a> ). C’\u00e8 un pannello a sinistra con gli strumenti di personalizzazione e un’anteprima a destra che si aggiorna in tempo reale mentre apporti modifiche. Come il Customizer, nessuna di queste modifiche \u00e8 visibile ai tuoi visitatori finch\u00e9 non fai clic sul pulsante Salva e pubblica.<\/p>\n
Seleziona un elemento<\/h3>\n
Il processo di personalizzazione con CSS Hero inizia selezionando un elemento.<\/p>\n
Spostando il mouse sull’anteprima del sito, vedrai un contorno blu che definisce gli elementi selezionabili. Facendo clic su qualsiasi elemento potrai modificarlo. Ecco come selezionerei l’intestazione del tema Ignite:<\/p>\n
Personalizzazione degli elementi del sito<\/h3>\n
Una volta selezionato un elemento, le propriet\u00e0 personalizzabili vengono aggiunte al pannello di sinistra.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nQueste stesse propriet\u00e0 sono disponibili per tutti gli elementi<\/p>\n
Queste sono tutte le diverse personalizzazioni che puoi apportare a qualsiasi elemento utilizzando CSS Hero.<\/p>\n
Diamo un’occhiata pi\u00f9 da vicino ad alcune di queste propriet\u00e0 in modo che tu possa avere un’idea di come pu\u00f2 essere utilizzato per personalizzare il tuo sito.<\/p>\n
Cambia font<\/h4>\n
Con l’intestazione selezionata, posso scegliere l’opzione Tipografia e quindi selezionare un nuovo carattere. Il carattere selezionato verr\u00e0 applicato automaticamente a tutto il testo trovato nell’intestazione. Questo \u00e8 molto pi\u00f9 veloce del tentativo di assegnare un carattere al menu o al titolo del sito individualmente.<\/p>\n
CSS Hero ti d\u00e0 accesso a una serie di caratteri di sistema (caratteri installati sul tuo sistema operativo) e ad alcuni dei caratteri pi\u00f9 popolari di Google Fonts<\/a>. C’\u00e8 anche un "gestore dei caratteri" che ti consente di aggiungere qualsiasi carattere da Google Fonts al tuo sito con il clic di un pulsante.<\/p>\n
Cambia i colori del testo<\/h4>\n
Un’altra personalizzazione comune che CSS Hero pu\u00f2 gestire \u00e8 cambiare il colore del testo sul sito.<\/p>\n
Per modificare il colore del testo di qualsiasi elemento del sito, selezionalo, scegli l’opzione Tipografia e fai clic sull’impostazione del colore. CSS Hero ti offre un semplice selettore di colori che puoi usare per cambiare rapidamente il colore.<\/p>\n
Personalizza i bordi<\/h4>\n
Il tema Ignite ha un bordo arancione lungo la parte superiore del sito. Questo \u00e8 facile da cambiare come qualsiasi colore del testo con CSS Hero<\/a>.<\/p>\n
Posso selezionare l’intestazione, scegliere l’opzione Bordi, quindi selezionare l’icona del bordo superiore per modificare solo il bordo superiore. Il colore pu\u00f2 essere modificato utilizzando la stessa opzione di selezione colore disponibile per la modifica dei colori del testo.<\/p>\n
Aggiungi un’immagine di sfondo<\/h4>\n
Puoi cambiare il colore di sfondo di qualsiasi elemento o applicare un’immagine di sfondo.<\/p>\n
Se vuoi un aspetto strutturato, puoi aggiungere una piccola immagine di sfondo e farla ripetere verticalmente e orizzontalmente. Puoi anche creare un’immagine di sfondo statica che riempia l’intero sfondo del sito. CSS Hero ti offre tutti i controlli necessari per aggiungere un’immagine di sfondo con qualsiasi tipo di posizionamento e dimensione desideri.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nMentre puoi caricare qualsiasi immagine tu voglia, CSS Hero ha anche un’integrazione con Unsplash<\/a> che ti d\u00e0 accesso a migliaia di fotografie gratuite ad alta risoluzione che \u00e8 estremamente conveniente.<\/p>\n
Regola la spaziatura<\/h4>\n
L’ultima caratteristica di personalizzazione in CSS Hero che tratter\u00f2 sono le propriet\u00e0 di spaziatura.<\/p>\n
Il margine viene utilizzato per creare spazio tra gli elementi. Ad esempio, posso ridurre lo spazio sopra questo pulsante e aumentare lo spazio sottostante utilizzando la propriet\u00e0 CSS margin.<\/p>\n
D’altra parte, l’imbottitura viene utilizzata per creare spazio all’interno degli elementi. Posso aumentare l’imbottitura su tutti e quattro i lati del pulsante per renderlo pi\u00f9 grande e pi\u00f9 facile da cliccare.<\/p>\n
E sai cosa \u00e8 ancora pi\u00f9 impressionante?<\/p>\n
Queste modifiche vengono applicate automaticamente a tutti i pulsanti "Leggi di pi\u00f9" sul sito, quindi devo apportare questa regolazione solo una volta.<\/p>\n
Opzioni aggiuntive<\/h2>\n
CSS Hero ha anche sezioni per modificare il raggio del bordo (angoli arrotondati) e gli stili di elenco, ma non li utilizzerai cos\u00ec spesso.<\/p>\n
C’\u00e8 anche una sezione Extra che include alcune propriet\u00e0 casuali come opacit\u00e0, ombre della scatola e visibilit\u00e0 (nascondi qualsiasi elemento) per citarne alcune.<\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nDovresti usare CSS Hero?<\/h2>\n
Se hai solo una manciata di modifiche da apportare, potrebbe essere difficile giustificare l’acquisto di un nuovo plugin. Ad esempio, se desideri solo modificare la dimensione del titolo del tuo sito, potresti probabilmente inviare un’e-mail allo sviluppatore del tuo tema per uno snippet CSS per farlo.<\/p>\n
Detto questo, CSS Hero costa solo $ 29, il che lo rende molto conveniente. L’alternativa \u00e8 capire le cose da soli che potrebbero richiedere ore. Non sarai in grado di assumere uno sviluppatore per lavorare sul tuo sito per $ 29.<\/p>\n
Clicca qui per dare un’occhiata a CSS Hero ora<\/a><\/p>\n
Se ti ritrovi spesso a voler apportare personalizzazioni al tuo sito, penso che una licenza multi-sito sia ben garantita per assicurarti di poter sempre apportare le modifiche che desideri al design del tuo sito.<\/p>\n
In conclusione, CSS Hero<\/a> \u00e8 un ottimo strumento per la personalizzazione del sito e riempie una nicchia importante. Per personalizzazioni drastiche del sito, ti consigliamo di selezionare un nuovo tema<\/a> o imparare a utilizzare un generatore di pagine<\/a>.<\/p>\n
Clicca qui per trovare altri modi per personalizzare il tuo sito<\/a>.<\/p>\n