Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come stilizzare le singole categorie in modo diverso in WordPress

Hai mai voluto far risaltare le tue categorie di WordPress? Forse vuoi che la tua sezione 'Notizie' sia diversa dalle tue categorie 'Tutorial' o 'Recensioni' 🎨

Ad essere sinceri, stilizzare le categorie in modo diverso non è un problema urgente per la maggior parte dei blog. Noi stessi di WPBeginner non lo facciamo.

Ma capiamo che ogni blog ha esigenze uniche e quanto sia importante coinvolgere i tuoi lettori. E per alcuni siti, avere stili e funzionalità distinti per ogni pagina di categoria può davvero aiutare i lettori a trovare i contenuti più facilmente.

La buona notizia è che stilizzare le pagine di categoria individualmente è in realtà abbastanza facile. Abbiamo trovato diversi modi per farlo senza codice: con l'editor del sito completo, un page builder e un editor CSS visivo.

Come stilizzare le singole categorie in modo diverso in WordPress

È così importante stilizzare le tue pagine di categoria di WordPress in modo diverso? 🧐

Sebbene non sia necessario per ogni sito WordPress, ci sono alcune situazioni in cui le categorie personalizzate possono davvero migliorare l'esperienza dei tuoi lettori.

Se gli argomenti dei tuoi post di WordPress variano molto, potresti voler stilizzare le singole categorie in modo univoco.

Ad esempio, se il tuo blog WordPress copre sia notizie che tutorial, allora potresti stilizzare queste categorie in modo diverso. Questo aiuta i lettori a capire subito che tipo di contenuto stanno guardando.

Oppure, prendi un sito di recensioni. Potresti stilizzare una singola categoria per le recensioni di prodotti in modo diverso dalla tua categoria di confronto. Questo rende più facile per i visitatori trovare ciò che desiderano sul tuo sito WordPress.

Alcuni siti potrebbero anche voler stilizzare determinate categorie per farle risaltare maggiormente, per enfatizzarne l'importanza. Su un sito di notizie, potresti voler dare alla tua categoria 'Ultime Notizie' uno stile più accattivante rispetto alle tue categorie di notizie regolari in WordPress.

Ricorda, il motivo principale per stilizzare diversamente le categorie in WordPress è rendere il tuo sito più facile da usare. Se pensi che possa aiutare i tuoi lettori a trovare ciò che desiderano più velocemente, allora implementare questo consiglio di design di WordPress potrebbe essere una buona idea.

Tenendo presente questo, diamo un'occhiata a 3 modi per stilizzare singole categorie in WordPress. Puoi usare i collegamenti rapidi qui sotto per passare al tuo metodo preferito:

Metodo 1: Usa un Page Builder per stilizzare le pagine di categoria (Temi personalizzati)

Se sei disposto a cambiare tema o a creare un tema WordPress personalizzato da zero, allora usare un page builder può essere un ottimo modo per stilizzare le categorie in WordPress.

Questo metodo è ideale per coloro che desiderano un maggiore controllo sul design del proprio sito e si sentono a proprio agio nell'utilizzare strumenti di terze parti.

Dopo aver testato varie opzioni, abbiamo scoperto che Thrive Architect è uno dei migliori page builder per lo styling delle singole categorie.

Offre un'interfaccia drag-and-drop intuitiva, che ti consente di creare categorie personalizzate e stilizzarle in modo univoco senza conoscenze di codifica. Puoi saperne di più sul plugin nella nostra recensione di Thrive Architect.

Tuttavia, è importante notare che questo approccio non è adatto a tutti.

Se sei soddisfatto del tuo tema WordPress attuale e non vuoi cambiarlo, potresti voler considerare il Metodo 2 con l'editor del sito completo o il Metodo 3 con l'editor CSS visuale (che tratteremo più avanti).

Ma se stai cercando di cambiare tema, ti consigliamo di leggere la nostra guida su come cambiare correttamente i temi di WordPress.

Un'altra cosa da notare è che Thrive Architect non ha una versione gratuita. Ma puoi usare il nostro codice coupon Thrive Themes per ottenere fino al 50% di sconto sul tuo primo acquisto.

Passaggio 1: Installa Thrive Architect

Iniziamo configurando Thrive Architect. Dopo aver acquistato un piano, puoi accedere al sito web di Thrive Themes.

Lì troverai il plugin Thrive Product Manager. Scarica semplicemente il file e installalo nella tua bacheca di WordPress. Se non sei sicuro di come fare, consulta la nostra guida su come installare plugin WordPress per principianti.

Installa Thrive Product Manager

Una volta attivato il plugin, apri la voce di menu Product Manager nella tua bacheca di WordPress.

Fai clic su 'Accedi al mio account' per collegare il tuo sito WordPress al tuo account Thrive Themes.

Accedi al tuo account Thrive Themes

Ora dovresti vedere un elenco dei prodotti Thrive Themes che puoi utilizzare.

Trova 'Thrive Architect' e seleziona la casella accanto a 'Installa Prodotto'.

Installazione di Thrive Architect

Scorri verso il basso finché non vedi ‘Thrive Theme Builder’ e scegli l’opzione ‘Install Theme’.

Quindi, fai clic su ‘Install selected products’. Dobbiamo farlo perché Thrive Architect funziona insieme a Thrive Theme Builder.

Installazione di Thrive Theme Builder

La pagina successiva mostrerà il Thrive Product Manager che imposta Thrive Architect e Thrive Theme Builder.

Al termine, fai clic sul pulsante ‘Go to the Theme Builder Dashboard’.

Attivazione di Thrive Architect e Thrive Theme Builder

Ora è il momento di scegliere un design iniziale per il tuo sito dalla collezione di temi di Thrive.

Se non sei sicuro di quale scegliere, usa semplicemente il pulsante ‘Preview’ per vedere come appare ogni tema. Quando ne hai trovato uno che ti piace, fai clic su ‘Choose’.

Scelta di un tema di Thrive Theme Builder

Successivamente, avvierai la procedura guidata di Theme Builder. Questa procedura guidata ti aiuterà ad aggiungere il tuo logo, scegliere i colori del tuo marchio e impostare diverse parti del tuo tema.

Assicurati di completare la procedura guidata di configurazione prima di passare al passaggio successivo.

Procedura guidata di configurazione di Thrive Theme Builder

Passaggio 2: Crea un modello di archivio categorie

Con il tuo tema impostato, passiamo alla scheda ‘Templates’. Qui vedrai i modelli predefiniti utilizzati dal tuo tema per progettare le tue pagine web. In questo caso, il modello utilizzato per gli archivi delle categorie si chiama ‘All Archives’.

Poiché vogliamo stilizzare singole categorie di WordPress, dobbiamo prima creare un nuovo modello di archivio categorie. Per fare ciò, fai clic su ‘+ Add New’.

Aggiungere un nuovo modello in Thrive Architect

Apparirà una nuova finestra popup. Innanzitutto, inserisci il nome del tuo nuovo modello di categoria. Puoi usare qualcosa di semplice e includere il nome della categoria.

Sotto, seleziona ‘List’ perché vogliamo creare una pagina che elenchi tutti i post di una categoria specifica.

Nel Tipo di Elenco, seleziona ‘Archivi’ e scegli ‘Categorie’ nel campo ‘Tipo di Archivio’.

Nel campo Definito per, scegli il nome della categoria per cui stai creando il modello. Ai fini dell'esempio, abbiamo scelto ‘Blogging’.

Alla fine, puoi scegliere ‘Inizia da zero’ o ‘Scegli modello’.

Creare un nuovo modello di categoria in Thrive Architect

Andremo con la seconda opzione perché molti dei modelli pronti all'uso di Thrive Themes hanno già un aspetto ben progettato.

Nel popup successivo, puoi scegliere uno dei modelli disponibili. A scopo illustrativo, sceglieremo ‘Layout a griglia – Post in evidenza’.

Una volta fatta la tua scelta, fai clic sul pulsante ‘Crea modello’.

Scegliere un layout di modello in Thrive Architect

Ora dovresti vedere il tuo nuovo modello aggiunto all'elenco dei modelli.

Passaci sopra il mouse e fai clic su ‘Modifica’ per iniziare a personalizzarlo.

Modifica di un modello di categoria in Thrive Architect

Passaggio 3: Personalizza la tua pagina modello di categoria

Thrive Architect offre molti modi per personalizzare la tua pagina.

Funziona in modo simile all'editor a blocchi, nel senso che puoi trascinare e rilasciare elementi sulla tua pagina, selezionarne uno per personalizzarlo e il gioco è fatto. La differenza è che ci sono molte più opzioni di personalizzazione con cui giocare.

Il page builder Thrive Architect

Diamo un'occhiata a un esempio. Nel nostro modello di archivio di categoria, c'è un enorme post in primo piano in alto, con il resto dei post della stessa categoria sotto di esso. Per impostazione predefinita, il post in primo piano è il post più recente pubblicato in quella categoria.

Se desideri modificare il layout di questo elemento, fai clic sull'elemento ‘Featured List 01’. Quindi, fai clic sul pulsante dell'icona esterna nella parte superiore della barra laterale sinistra.

Modifica del design del post in primo piano in Thrive Architect

Apparirà un popup che ti chiederà di scegliere un diverso design per il post in primo piano.

Ce ne sono diversi tra cui scegliere e puoi sempre cambiarlo di nuovo se non sei soddisfatto della tua scelta attuale. Basta fare clic sul layout desiderato e Thrive Architect lo implementerà automaticamente nel tuo modello di pagina.

Scelta di un design per il post in primo piano in Thrive Architect

Puoi fare la stessa cosa anche con l'elenco dei post sottostanti.

Seleziona semplicemente l'elemento ‘Blog List’. Successivamente, fai clic sull'icona esterna nella parte superiore della barra laterale sinistra e troverai altri modelli per visualizzare il tuo elenco di post come prima.

Scelta di un design per l'elenco delle categorie in Thrive Architect

Se desideri modificare ulteriormente il design dell'elenco delle categorie, scorri verso il basso la barra laterale.

Lì troverai le impostazioni per modificare il tipo di visualizzazione (come trasformarlo in un carosello), disabilitare il post in primo piano, cambiare il tipo di paginazione (ad esempio da numerica a ‘Carica altro’), aumentare/diminuire il numero di post visualizzati e molto altro.

Configurazione del blocco elenco blog in Thrive Architect

Puoi anche aggiungere altri elementi, come un titolo grande per indicare ai visitatori su quale pagina di categoria si trovano e una descrizione insieme ad esso.

Per fare ciò, puoi fare clic sul pulsante '+' sul lato destro del builder. Quindi, seleziona l'elemento 'Testo' e trascinalo ovunque si adatti meglio alla pagina.

Aggiunta di un blocco di testo in Thrive Architect

Sull'elemento di testo, fai clic sull'icona del testo dinamico sul lato destro della barra degli strumenti del testo. Una volta fatto, seleziona 'Archivio' nel campo Testo dinamico e quindi scegli 'Nome archivio' nel campo sottostante.

Ora, fai clic su 'Inserisci'. Thrive Architect aggiungerà quindi il nome della tua categoria. Poiché questa funzionalità aggiunge contenuti dinamici, il nome della categoria verrà regolato automaticamente se lo modifichi in futuro.

Da qui, puoi modificare lo stile, il formato, l'allineamento e altro ancora del testo.

Aggiunta di testo dinamico in Thrive Architect

Per aggiungere la descrizione della categoria, fai semplicemente clic di nuovo sul pulsante '+'.

Successivamente, seleziona l'elemento 'Descrizione termine tassonomia'.

Aggiunta di una descrizione del termine di tassonomia in Thrive Architect

Se hai aggiunto una descrizione alla tua categoria in WordPress admin » Post » Categorie, la descrizione dovrebbe apparire automaticamente qui.

Altrimenti, potresti tornare a quella pagina e aggiornarla in seguito. Puoi seguire il nostro tutorial su come visualizzare le descrizioni delle categorie in WordPress per maggiori informazioni.

Esempio di blocco descrizione termine di tassonomia in Thrive Architect

Una cosa interessante dello stile diverso delle tue categorie in WordPress è che puoi aggiungere vari elementi specificamente personalizzati per ogni categoria.

Ad esempio, se hai un lead magnet o un modulo di iscrizione adatto solo a un argomento specifico, aggiungerlo a questa pagina di categoria è un ottimo modo per raggiungere i lettori interessati.

Fortunatamente, Thrive Architect dispone di blocchi specifici per questo scopo.

Ad esempio, potresti fare clic sul pulsante '+' e aggiungere l'elemento 'Call to Action' ovunque nella tua pagina. È un'ottima tattica per spezzare un lungo elenco di post in una pagina di categoria.

Aggiunta di un elemento di call-to-action in Thrive Architect

Da qui, potresti scegliere un modello di call-to-action.

Se non ti piacciono nessuno dei design esistenti, potresti scegliere quello che preferisci e cambiare lo stile in seguito.

Scelta di un elemento di call-to-action in Thrive Architect

Ora puoi cambiare il testo degli elementi di call-to-action.

Per aggiungere l'URL di destinazione per il pulsante di call-to-action, fai semplicemente clic sul pulsante stesso. Quindi, inserisci l'URL e scegli se farlo aprire in una nuova scheda e nofollow.

Aggiunta di un URL di destinazione all'elemento di call-to-action in Thrive Architect

Dopodiché, sentiti libero di modificare ulteriormente l'elemento call-to-action modificando la sua tipografia, aggiungendo un colore di sfondo, inserendo animazioni, e così via.

Una volta soddisfatto dell'aspetto della pagina di categoria, fai clic su 'Salva lavoro'.

Salvare il lavoro in Thrive Architect

Con la tua pagina di categoria completata, puoi ora visualizzare in anteprima il tuo sito web su dispositivi mobili, desktop o tablet per assicurarti che tutto abbia un bell'aspetto.

Quindi, puoi ripetere gli stessi passaggi precedenti per creare pagine di categoria individuali con i propri stili. Oppure, semplicemente applica uno stile alle tue categorie principali e lascia che le altre utilizzino il modello di archivio categorie predefinito di Thrive Themes.

Ecco come appare il nostro sul nostro sito demo:

Esempio di pagina categoria blog in Thrive Architect

Metodo 2: Usa l'Editor del Sito Completo per stilizzare le pagine di categoria (Temi a blocchi)

Questo secondo metodo è per gli utenti di temi a blocchi. L'editor completo del sito offre un modo semplice per creare un modello personalizzato di WordPress per le pagine di archivio categorie e stilizzare le singole categorie in modo diverso.

Il bello di questo metodo è che non necessita di plugin. Detto questo, assicurati di essere soddisfatto delle opzioni di personalizzazione fornite dal tuo tema WordPress e dall'editor completo del sito, perché è tutto ciò con cui lavorerai.

Innanzitutto, apriamo l'editor completo del sito andando su Aspetto » Editor nella tua bacheca di WordPress.

Selezionare l'Editor del sito completo dal pannello di amministrazione di WordPress

Ora vedrai le impostazioni principali per personalizzare il tuo tema a blocchi.

Per creare un modello di categoria personalizzato, fai clic su 'Modelli'.

Scegliere il menu Modelli in FSE

Ora vedrai diversi modelli predefiniti che il tuo tema offre. Questo varierà a seconda del tema di WordPress, ma in genere, un tema includerà un modello utilizzato per tutte le tue pagine di archivio categorie. Lo sviluppatore del tema specificherebbe quale sia nella descrizione.

Nel nostro caso, il modello predefinito per le pagine di archivio delle categorie si chiama ‘Tutti gli archivi’. Oltre alle categorie, questo modello viene utilizzato anche per altri tipi di archivi come tag, tassonomie personalizzate, tipi di post personalizzati e così via.

Per creare un nuovo modello per le tue pagine di archivio delle categorie, fai clic su ‘Aggiungi nuovo modello’ nell'angolo in alto a destra.

Aggiungere un nuovo modello in FSE

Ora apparirà una finestra popup che ti chiederà di scegliere quale tipo di modello creare.

Qui, scegli semplicemente ‘Archivi categorie’.

Scegliere un tipo di archivio per creare un modello in FSE

A questo punto, puoi scegliere se creare un nuovo modello di archivio categorie personalizzato per tutte le categorie o solo per una categoria specifica.

Poiché stiamo cercando di stilizzare le singole categorie in modo diverso, sceglieremo ‘Categoria per un elemento specifico’.

Scegliere una categoria specifica per creare un modello in FSE

Tutto quello che devi fare ora è scegliere la categoria per la quale vuoi creare un modello.

In questo caso, sceglieremo la categoria ‘Blogging’.

Scegliere un nome di categoria per creare un modello in FSE

Ora entrerai nell'editor completo del sito. Dovrebbe apparire una finestra popup che ti chiede di scegliere un pattern di blocchi da utilizzare per la pagina di archivio della categoria.

Puoi scegliere un pattern o saltare questo passaggio se vuoi iniziare da zero.

Scegliere uno schema di blocchi per il modello di categoria in FSE

Ai fini dell'esempio, inizieremo da zero e ti forniremo esempi su come stilizzare diversamente la tua pagina di categoria in WordPress.

Ora, se non vuoi iniziare completamente da zero e trovare altri pattern da usare, ecco cosa puoi fare.

Puoi fare clic sul segno ‘+’ nero nell'angolo in alto a sinistra per aggiungere un blocco. Quindi, passa alla scheda ‘Pattern’ e scorri verso il basso fino all'opzione ‘Post’. Dovresti ora vedere alcuni pattern per visualizzare più post di WordPress.

Scelta di un pattern di blocco in FSE

Se non sei soddisfatto delle opzioni predefinite, puoi creare il tuo design. Il processo è semplice con l'editor completo del sito, poiché stai semplicemente trascinando e rilasciando blocchi come al solito nell'editor a blocchi.

Detto questo, ti consigliamo di utilizzare prima il blocco Gruppo in modo da poter gestire parti del modello come un unico blocco. Fai clic sul pulsante '+' ovunque nella pagina e scegli 'Gruppo'.

Aggiungere un blocco gruppo in FSE

Ora, seleziona un layout per il blocco gruppo.

Ci sono quattro opzioni tra cui scegliere, e puoi scegliere quella che funziona meglio per il tuo sito WordPress.

Scegliere un layout per un blocco gruppo in FSE

Ti suggeriamo di aggiungere prima il blocco Titolo Archivio al blocco gruppo. Questo visualizzerà automaticamente il titolo della tua categoria.

Quindi, se in futuro cambierai il nome della categoria, anche il titolo verrà automaticamente modificato. Puoi trovarlo facendo clic sul pulsante '+' in qualsiasi punto della pagina e selezionando 'Titolo archivio'.

Scegliere il blocco titolo archivio in FSE

Per impostazione predefinita, questo blocco mostrerà il titolo nel formato 'Tipo archivio: Titolo archivio'.

Ma puoi disabilitare il tipo di archivio nel titolo andando nella barra laterale delle impostazioni del blocco e disattivando il pulsante 'Mostra tipo archivio nel titolo'.

Mostrare il titolo del tipo di archivio in FSE

Un'altra cosa che dovresti aggiungere è un blocco che visualizza tutti i post della categoria.

Per fare ciò, fai clic sul pulsante '+' e scegli 'Elenco post'.

Scegliere il blocco elenco post in FSE

Ora puoi scegliere se utilizzare un design predefinito o iniziare da zero.

Per illustrare, utilizzeremo l'opzione 'Inizia da zero'.

Scegliere il layout dell'elenco post in FSE

A questo punto, puoi scegliere un layout per visualizzare i post.

Ci sono 4 opzioni: Titolo e data; Titolo ed estratto; Titolo, data ed estratto; e Immagine, data e titolo.

Scegliere un layout per visualizzare l'elenco dei post in FSE

Una volta scelto un layout, dovresti ora vedere l'elenco di tutti i tuoi post.

Ora dovresti filtrare i post in base alla categoria. Per fare ciò, passa alla scheda 'Blocco' nella barra laterale delle impostazioni del blocco. Quindi, scorri verso il basso fino alla sezione 'Filtri' e fai clic sul menu a tre punti.

Qui, scegli 'Tassonomie'.

Filtrare i post in una tassonomia specifica in FSE

Inserisci semplicemente il nome della categoria per filtrare l'elenco dei post nel campo appropriato.

Assicurati di premere il tasto 'Invio' dopo.

Filtrare i post in una categoria specifica in FSE

Per modificare il numero di post visualizzati, puoi fare clic sul blocco 'Elenco post' e selezionare l'icona 'Impostazioni'.

Ora puoi modificare il numero nel campo 'Elementi per pagina'.

Modificare il numero di post visualizzati in FSE

Per modificare l'aspetto della pagina, puoi scegliere uno dei blocchi presenti nella pagina. Quindi, passa alla scheda 'Blocco' nella barra laterale delle impostazioni e naviga alla scheda 'Stile'.

Ora vedrai le opzioni di stile disponibili per quel blocco specifico. Sentiti libero di cambiare il colore del testo o il colore dei link, cambiare i font, regolare il padding e il margine, e così via.

La barra laterale delle impostazioni degli stili del blocco in FSE

A questo punto, puoi scorrere verso il basso la pagina e individuare il blocco che dice: 'Aggiungi testo o blocchi che verranno visualizzati quando una query non restituisce risultati.'

Qui puoi digitare del testo o aggiungere blocchi che appariranno nel caso in cui la categoria non contenga ancora alcun post.

Aggiungere testo quando non ci sono risultati nella categoria in FSE

E questo è tutto per le basi della modifica di una pagina di categoria nell'editor completo del sito. Ora puoi aggiungere altri blocchi per renderla più distintiva dalle altre pagine di archivio delle categorie.

Quindi, fai semplicemente clic su 'Salva'.

Dopodiché, puoi ripetere gli stessi passaggi precedenti per creare pagine WordPress personalizzate per tutte le tue categorie. Puoi anche semplicemente modificare le tue categorie principali e le altre utilizzeranno il modello di archivio predefinito del tuo tema.

Salvare le modifiche in FSE

Se desideri altri suggerimenti e trucchi sull'utilizzo dell'editor completo del sito, consulta la nostra guida completa per principianti all'editing completo del sito di WordPress.

Ti consigliamo inoltre di consultare il nostro elenco dei migliori plugin di blocchi Gutenberg in modo da poter aggiungere molti più elementi alla tua pagina di categoria.

Ecco come appare la nostra semplice pagina di categoria:

Esempio di una pagina categoria creata con FSE

Metodo 3: Usa CSS Hero per stilizzare le pagine di categoria (tutti i temi)

Questo terzo metodo è consigliato per gli utenti di temi classici di WordPress, anche se gli utenti di temi a blocchi possono farlo comunque.

Il motivo è che non molti temi classici offrono l'opzione per stilizzare individualmente le tue pagine di archivio di categoria. E se non vuoi usare il Metodo 1, allora l'alternativa è usare CSS personalizzato.

Il trucco con il CSS è che devi sapere come codificare. Se sei un principiante assoluto senza background tecnico, la codifica potrebbe non essere l'opzione più user-friendly per te.

Fortunatamente, abbiamo trovato un modo semplice per personalizzare il tuo tema usando il CSS senza alcuna codifica, che è usare CSS Hero.

CSS Hero è un plugin che ti consente di personalizzare il tuo tema esistente con un editor CSS visuale. Tutto quello che devi fare è selezionare un elemento sul tuo sito, cambiarne lo stile e CSS Hero cambierà il codice CSS di quell'elemento.

Detto questo, rispetto ai metodi precedenti, consigliamo di utilizzare CSS solo se si desidera apportare piccole modifiche alle pagine di archivio delle categorie. Sebbene sia possibile un rifacimento completo, potrebbe richiedere più tempo.

Inoltre, il plugin non è disponibile in versione gratuita, anche se puoi utilizzare il nostro codice coupon CSS Hero per ottenere uno sconto del 40%.

Per maggiori informazioni, puoi consultare la nostra recensione completa di CSS Hero.

Una volta acquistato e scaricato CSS Hero, puoi installarlo e attivarlo nella tua bacheca di WordPress. Per istruzioni passo passo, consulta la nostra guida per principianti all'installazione di plugin WordPress.

Quindi, dovresti vedere un pulsante CSS Hero nella parte superiore della barra di amministrazione. Fai clic su di esso per iniziare a modificare il tuo sito.

Apertura di CSS Hero in WordPress

Lo screenshot qui sotto mostra come dovrebbe apparire la tua pagina ora.

Sul lato sinistro c'è una barra laterale dove puoi modificare i singoli elementi della tua pagina. In alto, troverai pulsanti per visualizzare la tua pagina su diversi dispositivi, passare alla modalità di navigazione e annullare le modifiche.

In basso, puoi salvare il tuo lavoro.

L'interfaccia di CSS Hero

Per impostazione predefinita, vedrai la tua homepage.

Per personalizzare una pagina di archivio di categoria, passa dalla modalità ‘Modifica’ alla modalità ‘Naviga’ nell'angolo in alto a destra della pagina. Quindi, vai alla categoria che desideri personalizzare.

Attivare la modalità Naviga in CSS Hero

Una volta che sei sulla pagina giusta, puoi tornare alla modalità ‘Modifica’.

Per assicurarti che le tue modifiche interessino solo questa specifica pagina di categoria e non le altre, cambia l'impostazione ‘Modalità di selezione’ in ‘Categoria’.

Passaggio alla modalità di selezione della categoria in CSS Hero

Ora puoi procedere e selezionare un elemento da modificare.

In questo esempio, abbiamo fatto clic sul gruppo di blocchi che visualizzano il titolo e la descrizione della categoria. La barra laterale sinistra ora contiene le impostazioni per modificare quell'elemento.

Selezione di un blocco in CSS Hero

Proviamo un esempio. Se desideri cambiare il colore di sfondo, fai clic sull'opzione ‘Sfondo’.

Quindi, puoi fare clic sull'icona del selettore di colori e scegliere il colore che più ti piace. È anche possibile aggiungere una sfumatura o un'immagine come sfondo.

Le impostazioni dello sfondo in CSS Hero

Poiché abbiamo scelto un colore piuttosto scuro, il testo ora non è leggibile. Fortunatamente, CSS ti consente di fare clic sui singoli elementi di testo all'interno di questo gruppo di blocchi.

Per cambiare il colore del testo, puoi passare all'impostazione ‘Tipografia’ e selezionare il colore desiderato. Puoi anche personalizzare la dimensione del carattere, l'altezza della linea e persino il tipo di carattere.

Le impostazioni della tipografia in CSS Hero

Un'altra cosa interessante che puoi fare è aggiungere un'ombra a scatola ai tuoi elementi in modo che risaltino ancora di più.

Per fare ciò, fai clic su qualsiasi elemento a cui desideri aggiungere un'ombra. Quindi, vai alla scheda 'Extra' e fai clic su 'Crea ombra'.

Le impostazioni extra in CSS Hero

Ora, inizia a trascinare il punto dove vuoi che appaia l'ombra. Vedrai automaticamente un'ombra sotto l'elemento.

Una volta terminato, puoi regolare la sfocatura, la diffusione, la posizione e il colore dell'ombra.

Regolazione delle impostazioni dell'ombra di un blocco in CSS Hero

Se ritieni che gli elementi siano troppo vicini tra loro (come se dovessi aggiungere interruzioni di riga) o troppo distanti, puoi regolarli nelle impostazioni 'Spaziatura'.

Qui, puoi modificare il padding e il margine di ogni elemento in modo che appaiano più proporzionali.

Regolare il padding e il margine di un blocco in CSS Hero

In realtà, c'è molto di più che puoi fare con CSS Hero. Se vuoi saperne di più, consulta queste guide:

Una volta soddisfatto dell'aspetto della pagina della categoria, fai semplicemente clic su 'Salva'.

Salvare il lavoro in CSS Hero

Fatto. Ora puoi ripetere gli stessi passaggi con le altre pagine di categoria in modo che appaiano più uniche.

Ecco il risultato finale della nostra pagina di categoria, creata con CSS Hero:

Un esempio di pagina archivio categoria creata con CSS Hero

Suggerimento bonus: usa un tema diverso per pagine di categoria specifiche

Vuoi apportare una grande modifica all'aspetto di alcune delle tue categorie? Potresti prendere in considerazione l'utilizzo di un tema completamente diverso per determinate categorie.

Questo può essere ottimo se desideri che un gruppo di pagine di categoria abbia lo stesso aspetto, ma diverso da tutto il resto.

Tieni presente, tuttavia, che non puoi stilizzare ogni singola categoria. Invece, stai creando due look distinti per il tuo sito.

Sebbene ciò ti offra molta libertà di cambiare le cose, ricorda che è comunque importante mantenere il tuo sito dall'aspetto abbastanza coerente. Anche se alcune categorie hanno un aspetto diverso, cerca di mantenere alcuni elementi comuni.

Questo aiuta i visitatori a sentirsi a proprio agio mentre navigano nel tuo sito. Puoi mantenere il tuo sito WordPress coinvolgente e facile da usare trovando un equilibrio tra design unici e coerenza.

Per maggiori dettagli su come fare ciò, consulta la nostra guida su come utilizzare più temi sul tuo sito web WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come stilizzare singole categorie in modo diverso in WordPress. Potresti anche voler dare un'occhiata alle nostre scelte esperte dei migliori costruttori di temi WordPress e alla nostra guida definitiva su come modificare un sito web WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

10 CommentsLeave a Reply

  1. Ho sperimentato con lo stile delle categorie personalizzate e vorrei aggiungere che è fondamentale mantenere un equilibrio tra unicità e coerenza.
    Sebbene sia allettante rendere ogni categoria drasticamente diversa, è importante conservare alcuni elementi comuni per garantire un'esperienza utente coesa in tutto il sito.

  2. è possibile cambiare lo stile di tutti i post sotto la categoria e non solo della pagina archivio della categoria, con l'opzione css?

    voglio fare display:none di un elemento solo su pagine di categorie specifiche

    • È possibile ma dovresti aggiungere del codice per aggiungere il target della categoria ai post, poiché non è un'aggiunta predefinita di WordPress.

      Amministratore

  3. Grazie per il tuo articolo!

    Diciamo che voglio stilizzare tutti i post nella categoria "Recensioni" ma solo le sottocategorie in recensioni sono selezionate per il post.

    Come posso stilizzare tutte le sottocategorie nella categoria Recensione?

    • Per quello che sembra tu voglia, dovresti puntare alle singole sottocategorie.

      Amministratore

        • Ci scusiamo per la confusione su cosa intendessimo, intendevamo seguire questa guida per ciascuna delle sottocategorie e se volessi raggruppare le sottocategorie puoi aggiungere una virgola affinché il CSS influenzi un target aggiuntivo.

  4. Salve,

    grazie per l'articolo.
    Cosa succede se un articolo appartiene a due o più categorie?

    Carosch

    • La domanda è come assegnare un layout di modello di categoria personalizzato dalla dashboard di amministrazione a più altre categorie.

      ad esempio ho creato un modello chiamato Category-grid.php. come lo assegno a più categorie nel mio wordpress?

  5. Articolo fantastico!

    Sono un principiante di Wordpress e ho cercato di capire come fare esattamente questo. Ho riscontrato alcuni problemi seguendo i tuoi passaggi. Il nostro sito Wp è configurato su un server Windows che esegue iis 7, quindi non so se questo stia causando il mio problema, ma sono sicuro che il problema sia da parte mia, non con le tue istruzioni.

    Ho provato entrambi i metodi; copiare category.php in un nuovo file php chiamato con il nome di una delle mie categorie, e CSS. Il CSS ha funzionato a meraviglia, ma con il primo metodo, ho ricevuto un errore che mi diceva che una chiamata a una certa funzione nel file php category originale era duplicata nel mio file category personalizzato. Ho creato il nuovo file php nella directory del mio child theme (sto usando Avada). Anche il category.php originale non è stato trovato nella posizione che menzioni, ma nella cartella wp-includes. La mia pagina del blog ha funzionato bene, così come le mie categorie. Non sono sicuro di come affrontare questo problema poiché c'erano TANTE righe di codice nel file php category originale; non ho idea di cosa, se qualcosa, avrei dovuto eliminare dal mio file php category personalizzato.

    Molte informazioni, lo so. Molte grazie per aver risposto se hai ulteriori suggerimenti.

    Adoro questo sito!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.