Vai al contenuto principale

Come personalizzare le griglie di un blog con Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Il modulo Blog Divi ha un'opzione di layout sotto forma di una griglia utile per i tuoi post sul blog. Il modello di griglia organizza i post del tuo blog in riquadri o mappe che semplificano la visibilità degli elementi su uno schermo rispetto alla visualizzazione standard.

Le impostazioni del modulo Blog ti consentono di personalizzare il design generale della tua rete. Puoi facilmente fare in modo che tutte le tue carte abbiano lo stesso colore di sfondo, carattere, margini, ecc. Tuttavia, le opzioni di stile sono limitate al design della griglia nel suo insieme, il che rende difficile applicare più o diversi disegni alle mappe all'interno della griglia.

Oggi ti mostrerò come indirizzare e applicare più di uno stile alle carte che compongono la griglia del tuo blog utilizzando CSS personalizzati. Ti mostrerò come applicare uno stile diverso tra loro per creare un effetto a scacchi. Ti mostrerò anche come modellare ogni carta in modo diverso per riga e ti mostrerò come scegliere come target ogni singola carta.

Quindi questi sono esempi di 4 su come personalizzare il tuo blog, inclusi alcuni effetti hover che puoi usare. Alla fine di questo tutorial, sarai in grado di creare fantastici disegni per il tuo blog.

Altri tutorial sul tema Divi

Cominciamo.

Configurazione layout a griglia per il tuo blog

Prima di iniziare con la progettazione delle schede dei moduli del blog, assicurati di avere almeno articoli 12 già creati con un'immagine nella confezione.

Una volta creati i tuoi messaggi, crea una nuova pagina. Nella tua nuova pagina, distribuisci il modulo blog su una colonna a larghezza intera in una parte standard:

Configurazione del layout di un blog divi

Fare clic per modificare le impostazioni del modulo Blog. In Impostazioni generali, modifica le seguenti impostazioni:

  • Disposizione: Griglia (Grid)
  • Numero di articoli: 12
  • Mostra immagine in evidenza: YES
  • Pulsante Per saperne di più: ON

Configurazione della griglia Divi

In CSS personalizzato, inserisci "gridcard" nella casella di testo ID CSS. Sarà un modo per noi di personalizzare solo questo modulo del blog.

Gridcard css divi

Salvare le modifiche

Come capire il layout "Grid" per il blog

Ora che avete la vostra rete di blog in luogo, è importante capire la struttura del layout della griglia in modo che è possibile individuare le mappe del modulo blog che si desidera personalizzare.

La griglia del blog è configurata con un layout a tre colonne. Di seguito è illustrata la griglia del blog con gli articoli del blog 12 suddivisi in tre colonne:

Presentazione del layout grid divi

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Le schede dei biglietti del blog sono ordinate dall'alto verso il basso in ciascuna delle colonne. Quindi, se vuoi dare loro un numero, dovrai contare da 1 a 4 su ogni lunghezza dall'alto verso il basso:

Conta gli articoli divi

Poiché conosci l'ordine numerico di ogni scheda del blog sotto ogni colonna, puoi anche identificare ciascuna scheda come numero pari o dispari come segue:

Numero pari e dispari divi

Disegni cancello Esempio

Esempio n ° 1: Progetto di una griglia "a scacchi"

Per questo primo esempio, sceglierò come target tutte le carte dispari nel modulo blog (carte 1 e 3) nella prima colonna dando loro un colore di sfondo grigio scuro. Per fare ciò, vai su "Divi → Opzioni tema" e aggiungi il seguente CSS nella casella di testo CSS personalizzata:

#gridcard .column: first-child articolo: nth-child (dispari) {background: #333; }

Ecco una ripartizione di ciò che fa questo codice:

#gridcard = l'id dell'intero modulo del blog

.column: first-child = seleziona la prima colonna nel modulo blog

post: nth-child (dispari) = seleziona tutti gli oggetti dispari (o carte) nella colonna

Mettendo tutto insieme, questo seleziona le carte dispari nella prima colonna del modulo blog con l'ID "gridcard".

Quindi aggiungere il testo bianco che andrà sul fondo scuro aggiungendo il seguente CSS:

#gridcard .column: first-child articolo: nth-child (dispari) .entry-titolo, #gridcard .column: first-child articolo: nth-child (dispari) .post-meta, #gridcard .column: first-child Articolo: nth-child (dispari) .post-meta una, #gridcard .column: first-child articolo: nth-child (dispari) .post-contenuti p {color: #ffffff; }

Questo codice si rivolge a tutti gli elementi di testo nelle schede del modulo del blog (inclusi titolo, metas dell'articolo, meta link dell'articolo e contenuto dell'articolo) e assegna loro il colore bianco.

Ecco il risultato:

Personalizzazione della griglia dispari

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Il prossimo passo nella creazione del nostro layout a scacchiera è scegliere come target le carte dispari sulla terza colonna e applicare lo sfondo grigio scuro e il testo bianco proprio come hai fatto nella prima colonna. Aggiungi il seguente CSS nella casella di testo CSS personalizzato:

#gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) {background: # 333; } #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) .entry-title, #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) .post-meta, #gridcard .column: last- articolo figlio: nth-child (dispari) .post-meta a, #gridcard .column: last-child articolo: nth-child (dispari) .post-content p {color: #ffffff; }

Questo codice ha come target la colonna "ultima" (in questo caso, la terza colonna è l'ultima colonna) con l'elemento nickname "last-child".

Per la seconda colonna (o medio), scegli come bersaglio anche le carte per completare l'effetto scacchiera. Per fare ciò dobbiamo aggiungere il seguente CSS:

#gridcard .column: nth-child (2) articolo: nth-child (pari) {background: # 333; } #gridcard .column: nth-child (2) articolo: nth-child (even) .entry-title, #gridcard .column: nth-child (2) articolo: nth-child (even) .post-meta, # gridcard .column: nth-child (2) articolo: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) articolo: nth-child (even) .post-content p {color : #F F F; }

Ora andare a controllare la pagina del blog per vedere la disposizione a scacchiera delle schede ad innesto Blog.

Layout divi della griglia a scacchiera

Esempio # 2: aggiunta di effetti al passaggio del mouse con il layout a scacchi

Una volta che sai come scegliere come target le schede del modulo del blog, puoi modificare creativamente qualsiasi elemento all'interno della scheda.

Per questo esempio, userò il layout a scacchiera e questa volta cambierò le immagini in primo piano da mappe grigio scuro a bianco e nero quando si passa con il mouse sulla mappa. Inoltre, renderò più luminose le immagini in prima pagina delle carte bianche quando passerò il mouse sopra la carta. Per fare ciò, aggiungi il seguente CSS nell'area CSS personalizzato (assicurati di disabilitare o tagliare l'altro codice in modo che non sia incompatibile con quello nuovo):

#gridcard .column: articolo del primo figlio: nth-child (dispari), #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari), #gridcard .column: nth-child (2) articolo: nth-child (pari) {background: # 333; } #gridcard .column: articolo del primo figlio: nth-child (dispari) .entry-title, #gridcard .column: articolo del primo figlio: nth-child (dispari) .post-meta, #gridcard .column: first- articolo figlio: nth-child (dispari) .post-meta a, #gridcard .column: articolo del primo figlio: nth-child (dispari) .post-content p, #gridcard .column: last-child articolo: nth-child (dispari) .entry-title, #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) .post-meta, #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) .post-meta a , #gridcard .column: articolo dell'ultimo figlio: nth-child (dispari) .post-content p, #gridcard .column: nth-child (2) articolo: nth-child (pari) .entry-title, #gridcard. colonna: nth-child (2) articolo: nth-child (pari) .post-meta, #gridcard .column: nth-child (2) articolo: nth-child (pari) .post-meta a, #gridcard .column : nth-child (2) articolo: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) articolo: nth-child (pari): hover img, #gridcard .column: first-child articolo: nth-child (dispari): hover img, #gridcard .column: last -articolo bambino: nth-child (dispari): hover img {-webkit-filter: grayscale (1); filtro: scala di grigi (1); } #gridcard .column: nth-child (2) articolo: nth-child (dispari): hover img, #gridcard .column: first-child articolo: nth-child (pari): hover img, #gridcard .column: last -articolo bambino: nth-child (pari): hover img {-webkit-filter: luminosità (1.5); filtro: luminosità (1.5); }

Puoi anche aggiungere un effetto di inversione sulle carte in modo che quando passi il mouse sulle carte bianche diventino grigio scuro e quando passi il mouse sopra le carte grigio scuro diventino bianche.

Aggiungere il seguente CSS e più CSS sopra:

#gridcard .column articolo, #gridcard .column articolo img {-webkit-Transition: all 0.8s; -moz-transizione: tutti gli 0.8; transizione: tutti gli 0.8; } #gridcard .column: articolo del primo figlio: nth-child (dispari): hover, #gridcard .column: last-child articolo: nth-child (dispari): hover, #gridcard .column: nth-child (2) articolo: nth-child (pari): hover {background: #fff; } #gridcard .column: articolo del primo figlio: nth-child (dispari): hover .entry-title, #gridcard .column: articolo del primo figlio: nth-child (dispari): hover .post-meta, #gridcard. colonna: articolo del primo figlio: nth-child (dispari): hover .post-meta a, #gridcard .column: articolo del primo figlio: nth-child (dispari): hover .post-content p, #gridcard .column: articolo last-child: nth-child (dispari): hover .entry-title, #gridcard .column: articolo last-child: nth-child (odd): hover .post-meta, #gridcard .column: articolo last-child : nth-child (odd): hover .post-meta a, #gridcard .column: last-child articolo: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) articolo: nth-child (pari): hover .entry-title, #gridcard .column: nth-child (2) articolo: nth-child (pari): hover .post-meta, #gridcard .column: nth-child ( 2) articolo: nth-child (pari): hover .post-meta a, #gridcard .column: nth-child (2) articolo: nth-child (pari): hover .post-content p {color: # 333; } #gridcard .column: articolo del primo figlio: nth-child (pari): hover, #gridcard .column: articolo dell'ultimo figlio: nth-child (pari): hover, #gridcard .column: nth-child (2) articolo: nth-child (dispari): hover {background: # 333; } #gridcard .column: articolo del primo figlio: nth-child (pari): hover .entry-title, #gridcard .column: articolo del primo figlio: nth-child (pari): hover .post-meta, #gridcard. colonna: articolo del primo figlio: nth-child (pari): hover .post-meta a, #gridcard .column: articolo del primo figlio: nth-child (pari): hover .post-content p, #gridcard .column: articolo last-child: nth-child (pari): hover .entry-title, #gridcard .column: articolo last-child: nth-child (even): hover .post-meta, #gridcard .column: articolo last-child : nth-child (even): hover .post-meta a, #gridcard .column: last-child articolo: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) articolo: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) articolo: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) articolo: nth-child (dispari): hover .post-meta a, #gridcard .column: nth-child (2) articolo: nth-child (dispari): hover .post-content p {color: #fff; }

Ora vai a vedere l'effetto sul tuo blog.

Personalizzazione delle griglie quando si passa in bilico su divi

Esempio # 3: Personalizzare le mappe di linee

Per il terzo esempio, applicherò lo stesso sfondo scuro e il testo bianco alle carte in ogni altra riga (non colonna). Per fare ciò, devi scegliere come target tutte le carte pari in ciascuna delle colonne. Vai a "Divi → Opzioni" del tema e assicurati di disabilitare o rimuovere qualsiasi codice CSS precedente che hai aggiunto dall'inizio di questo tutorial. Quindi aggiungi il seguente CSS:

#gridcard articolo: nth-child (even) {background-color: # 333; } #gridcard articolo: nth-child (even) .entry-title, #gridcard articolo: nth-child (even) .post-meta, #gridcard articolo: nth-child (even) .post-meta a, #gridcard articolo : nth-child (even) .post-content p {color: #fff; }

Ecco il risultato:

Risultato della configurazione per linea divi

Esempio # 4: progettazione di una mappa della griglia specifica

Alcuni di voi potrebbero voler scegliere una carta specifica. Per fare ciò, devi trovare l'ID oggetto univoco che viene assegnato automaticamente a ciascuna delle tue carte. Per questo esempio, sto utilizzando il browser Chrome.

Vai alla pagina che mostra il modulo del tuo blog e fai clic con il tasto destro su una delle tue carte. Nella casella delle opzioni visualizzata, seleziona "Ispeziona" (alcuni browser potrebbero avere "Ispeziona elemento" o qualcosa di simile. In questo modo verrà distribuita la finestra Strumenti per sviluppatori che mostra sia il codice HTML che il pagina web. Trova il tag dell'articolo che racchiude il tuo articolo e annota l'ID dell'articolo assegnato. Questo è il selettore da utilizzare per scegliere come target la tua scheda individuale. Per il mio esempio, ho cliccato con il tasto destro e cliccato su ispezionato per trovare l'id "post-3466".

Come sotto:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Modifica di un singolo articolo

Per individuare questa scheda CSS per dargli uno sfondo grigio con un carattere bianco, è necessario utilizzare il seguente CSS:

# post-3466 {background: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Ora la mappa ha applicato quello stile specifico.

È tutto!

Considerazioni finali

Questi sono solo alcuni esempi dei molti stili diversi che puoi realizzare utilizzando questo tipo di targeting CSS delle schede modulo Blog. Non devi più mantenere lo stesso stile per ogni carta. Puoi progettarli come preferisci.

Se avete domande o suggerimenti sentitevi liberi di offrire a me.

Altri tutorial di Divi

Questo articolo contiene i commenti 20

  1. Buongiorno,
    Sono davvero alle prime armi ma, grazie ai tutorial online, riesco a costruire un bel blog.
    Davvero, grazie per questo perché dovevo solo copiare i codici e tutto è andato alla perfezione, sono felicissimo del risultato.
    Grazie ancora, buona giornata 🙂

  2. Buonasera,
    il blog DIVI, accanto al nome dell'autore, pone la preposizione "da" (es. da Stefano). Vorrei sapere se è possibile cambiarlo in "de"

  3. Ciao Thierry
    Super tutorial
    Vorrei sapere se è possibile aumentare le dimensioni dell'immagine in primo piano
    Mi piacerebbe applicare questo stile al mio blog
    grazie

  4. Buongiorno,
    Come posso ottimizzare questo layout per dispositivi mobili (tablet)? Non ho uno Schabrettmuster ma colori diversi per ogni post del blog, in un ordine specifico. Ovviamente, ciò cambia quando passi al cellulare ei colori non sono più associati ai post giusti ...
    Qualcuno ha un'idea qui?

  5. Buongiorno,

    Grazie per questo articolo! Vorrei anche modificare il "leggi di più" in fondo agli articoli.
    Potresti darci esempi di codice CSS per cambiare il testo e metterlo in un bel pulsante centrato, per esempio?

    En vous remerciant.
    Sophie

  6. Cuándo lo pones nel CSS personalizado, por ejemplo:
    #gridcard. Colonna: arte del primo figlio: nth-child (impar) {background: #333; }

    da error como el seigue: Previsto FUNZIONE o IDENT dopo i due punti nella riga 1, col 18

    saluti

    1. Buonasera,

      Il nostro blog è tradotto automaticamente dal francese. Ti invito quindi a scegliere la lingua francese nel widget della lingua situato nella barra in alto del nostro blog e verrà visualizzato il codice CSS corretto.

    2. usted escribió an artículo evil escrito, debería ser: artículo del primer hijo: no arte del primer hijo:

      Hai scritto un articolo errato, dovrebbe essere: articolo del primo figlio: non arte del primo figlio:

  7. Ciao
    Grazie per l'articolo. Ho una presentazione a griglia (Tema Divi) Ho le miniature (foto) per la presentazione degli articoli, d'altra parte quando clicco per accedere all'articolo, l'immagine viene visualizzata in grande all'inizio del 'articolo. C'è un modo per renderlo della stessa dimensione della miniatura o rimuoverlo dalla visualizzazione del post.
    grazie
    Patrick

    1. Buonasera,

      Spiacenti, ma il nostro supporto diviene limitato ai nostri tutorial. Si prega di contattare Eleganthemes SVP.

  8. Bonjourn, articolo super
    Tento la fortuna qui, a volte abbiamo girato un argomento per settimane senza trovare la risposta quando lo stesso argomento ha senso per gli altri.

    Sto quindi cercando la soluzione per impostare una griglia di post, composta solo da immagini ma di diverse altezze, per essere più esplicita, che una visuale su due abbia il doppio dell'altezza della visuale accanto.

    Un'idea?

    giuliano

  9. Grande tutorial! I metterà alla prova ca in questo fine settimana per il mio sito.
    avete una soluzione per rimuovere gli estratti nelle griglie?
    Merci à vous
    Sofhy

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
20 azioni
quota7
Tweet2
Enregistrer11