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
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere il testo su un prodotto WooCommerce su Divi
- Come cambiare il colore del menu tra le pagine su Divi
- Funzionalità che non conosci su Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente su 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:
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
In CSS personalizzato, inserisci "gridcard" nella casella di testo ID CSS. Sarà un modo per noi di personalizzare solo questo modulo del blog.
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:
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:
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:
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:
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.
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.
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:
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:
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
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
Buongiorno ! Sapete se è possibile modificare il numero di colonne di questo oggetto Blog?
Vorrei che ogni carta fosse visualizzata a tutta larghezza. Grazie !
Buongiorno,
Ho provato a visualizzare i post del blog in "griglia" con l'ID "gridcard" ma non funziona. Mi potete aiutare ?
Buonasera,
Ci scusiamo per il ritardo di risposta.
Puoi riformulare la tua richiesta per favore?
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 🙂
Prego. Grazie per averci letto.
Buonasera,
il blog DIVI, accanto al nome dell'autore, pone la preposizione "da" (es. da Stefano). Vorrei sapere se è possibile cambiarlo in "de"
Buongiorno,
Sì, è possibile modificare questo elemento con Divi.
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
Buongiorno,
Si è possibile.
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?
Buongiorno,
Purtroppo no.
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
Ciao 🙂 Per modificare il testo del pulsante "leggi di più", avviene in Impostazioni blog > Stile > Leggi altro testo. Puoi modificare la tipografia e il testo del "leggi di più". Tuttavia, non so come farne un bottone. Buona configurazione!
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
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.
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:
Ciao,
70 altre lingue.
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
Buonasera,
Spiacenti, ma il nostro supporto diviene limitato ai nostri tutorial. Si prega di contattare Eleganthemes SVP.
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
Ciao Julian,
Ti consiglio di contattare il team DIVI. È più conveniente in questo caso.
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