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 individuare e applicare più di uno stile alle carte che compongono la griglia. il tuo blog utilizzando CSS personalizzati. Ti mostrerò come applicare uno stile diverso a ciascuna carta, per creare un effetto a scacchiera. Ti mostrerò anche come modellare ciascuna carta in modo diverso per riga e ti mostrerò come scegliere come target ogni singola carta.

Quindi questi sono 4 esempi su come personalizzare il tuo blog, inclusi alcuni effetti al passaggio del mouse che puoi utilizzare. Alla fine di questo tutorial sarai in grado di creare fantastici design 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.

Griglia 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

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 prende di mira tutti gli elementi di testo nelle schede dei moduli del blog (inclusi titolo, meta meta dei post, meta link dei post e contenuto dell'articolo) e dà loro il colore bianco.

Ecco il risultato:

Personalizzazione della griglia dispari

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:

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Altri tutorial di Divi