Come progettare un post recente in base al layout della categoria con fantastici effetti al passaggio del mouse in Divi
Pubblicato: 2019-12-18Siamo tutti abituati a vedere i post recenti visualizzati su un sito web. Di solito vengono generati utilizzando il widget Post recenti di WordPress o un plug-in per mostrare gli articoli pubblicati più di recente sul blog. E di solito vengono visualizzati nella pagina del blog, nella parte inferiore dei post, nelle barre laterali o come sezione in primo piano di una pagina di destinazione (qualcosa del genere).
Per questo tutorial, ti mostreremo come visualizzare i post recenti per categoria. Usando solo Divi Builder (e alcuni moduli del blog), creeremo una sezione che mostra gli ultimi post di quattro diverse categorie. Questa sezione di post recenti per categoria includerà tag di categoria unici, animazioni ed effetti al passaggio del mouse, il tutto senza un plug-in.
Controlla!
Sbirciata
Ecco una rapida occhiata al design e alla funzionalità dei Post recenti per layout di categoria che costruiremo insieme.
Scarica GRATUITAMENTE i post recenti per layout di categoria
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai iresubscribei o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Inoltre, la funzionalità della sezione dei post recenti dipende dalla presenza di post di blog effettivi sul tuo sito con categorie assegnate. Quindi assicurati di avere alcuni post di blog fittizi se stai utilizzando un sito di prova.
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione dei post recenti per sezione categoria in Divi
Crea una riga di 4 colonne
Per iniziare con Divi Builder, crea una riga di 4 colonne.
Creazione del blog Modulo 1
Ognuna delle quattro colonne conterrà un modulo blog separato. Aggiungi il primo modulo del blog alla colonna 1.
Ciascuno dei moduli del blog visualizzerà il post più recente dal tuo sito per impostazione predefinita. Tutto quello che faremo è selezionare una categoria specifica da includere per quel modulo specifico del blog. Quindi limiteremo il conteggio dei post a 1 in modo che venga visualizzato solo un post. Questo ci darà l'ultimo post sul blog per quella categoria in modo dinamico.
Contenuto del blog
Aggiorna le opzioni del contenuto del blog come segue:
- Tipo di messaggio: Post
- Conteggio post: 1
- Categorie incluse: Notizie (o una tua)
- Usa gli estratti dei post: NO
- Lunghezza dell'estratto: 120
Opzioni elemento
Quindi aggiorna le opzioni degli elementi come segue:
- Mostra categorie: NO
- Mostra estratto: NO (desktop), YES (Hover e tablet)
- Mostra impaginazione: NO
Design del blog
Quindi aggiorna il design come segue:
- Colore di sfondo (desktop): #ffffff
- Colore di sfondo (al passaggio del mouse): #8ac829
- Peso del carattere del titolo: semi grassetto
- Stile carattere titolo: TT
- Dimensione del testo del titolo: 24px
- Spaziatura tra lettere del titolo: 1px
- Altezza della riga del titolo: 1.4em
- Colore del corpo del testo: #ffffff
- Peso del carattere meta: leggero
- Spaziatura meta-lettera: 3px
- Altezza minima: 450 px (desktop), automatico (tablet)
- Imbottitura: 5% sopra, 5% sotto, 5% sinistra, 5% destra
- Box Shadow: vedi screenshot
- Stile di animazione: Zoom
Questo si occupa del design del nostro primo modulo del blog. Ora dobbiamo creare il nostro tag di categoria personalizzato.
Creazione del tag di categoria 1
Per creare il tag, aggiungi un nuovo modulo di testo sotto il modulo blog e trascinalo sopra il modulo blog.
Contenuto del testo
Aggiorna il contenuto del corpo con il nome della categoria che hai scelto per il modulo blog. Nel mio esempio, sto visualizzando il post recente dalla categoria Notizie, quindi aggiungerò la parola "Notizie" al contenuto del corpo.
Progettazione del tag di categoria
Sotto le impostazioni di progettazione del testo, aggiorna quanto segue:
- Colore di sfondo: #8ac829
- Peso del carattere del testo: Ultra grassetto
- Colore del testo del testo: #ffffff
- Allineamento del testo: centro
- Larghezza: 120 px
- Margine: 80px in alto, -80px in basso
- Imbottitura: 10px in alto, 10px in basso
- Stile di animazione: dissolvenza
- Ritardo animazione: 1000 ms
- Indice Z: 1
Poiché stiamo utilizzando il margine negativo per rilasciare il tag sulla scheda del blog, dovremo impostare l'indice z su 1 in modo che il tag rimanga sopra il modulo del blog.
Ora che abbiamo completato un post, possiamo distribuire la modalità di visualizzazione wireframe e copiare quei moduli nelle altre colonne.
Copia il modulo testo e blog nella colonna 1 e incollali nelle colonne 2, 3 e 4 in modo da avere esattamente gli stessi moduli in ogni colonna.
Per ogni modulo del blog duplicato, dobbiamo assegnargli una nuova categoria di blog e un colore di sfondo al passaggio del mouse. E per ogni tag di categoria duplicato, dobbiamo aggiornare il nome della categoria in modo che corrisponda alla categoria selezionata per il modulo blog e quindi aggiornare il colore di sfondo in modo che corrisponda al colore di sfondo al passaggio del mouse del modulo blog.
Aggiorna moduli nella colonna 2
Rimanendo nella visualizzazione wireframe, apri le impostazioni per il modulo blog nella colonna 2 e aggiorna quanto segue:
- Categorie incluse: Business (o la tua)
- Colore di sfondo (al passaggio del mouse): #f64937
Quindi aggiorna le impostazioni per il modulo di testo nella colonna 2 come segue:
- Corpo: "Affari"
- Colore di sfondo: #f64937
Aggiorna moduli nella colonna 3
Quindi apri le impostazioni per il modulo blog nella colonna 3 e aggiorna quanto segue:
- Categorie incluse: Denaro (o il tuo)
- Colore di sfondo (al passaggio del mouse): #6529c7
Quindi aggiorna le impostazioni per il modulo di testo nella colonna 3 come segue:
- Corpo: "Soldi"
- Colore di sfondo: #6529c7
Aggiorna moduli nella colonna 4
Quindi apri le impostazioni per il modulo blog nella colonna 4 e aggiorna quanto segue:
- Categorie incluse: Coaching (o il tuo)
- Colore di sfondo (al passaggio del mouse): #f17809
Quindi aggiorna le impostazioni per il modulo di testo nella colonna 4 come segue:
- Corpo: "Coaching"
- Colore di sfondo: #f17809
Aggiornamento delle impostazioni della riga
Ci sono alcune modifiche che dobbiamo apportare alla nostra riga, tra cui un'altezza impostata e una larghezza della grondaia personalizzata. Aggiorna le seguenti impostazioni di riga:
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 2
- Larghezza: 94%
- Larghezza massima: 1400 px
- Altezza: 540 px (desktop), automatico (tablet)
- Imbottitura: 0px in alto, 0px in basso
Stiamo impostando l'altezza della riga su 540 px sul desktop per evitare che la riga si espanda e sposti altri contenuti sulla pagina quando passi con il mouse su una scheda del blog. Assicurati di impostare l'altezza su automatico sul tablet in modo da non nascondere alcun contenuto.
Aggiornamento delle impostazioni per ogni colonna
Per dare ai post del blog recenti un effetto al passaggio del mouse che viene applicato a entrambi i moduli contemporaneamente, possiamo aggiungere l'effetto al passaggio del mouse alla colonna che contiene i due moduli che compongono il post del blog. Apri le impostazioni per ciascuna delle colonne e aggiorna quanto segue:
- Scala di trasformazione (Hover): 115%
Quindi aggiungi il seguente CSS personalizzato all'elemento principale solo sul display del tablet:
transform: none !important
Questo piccolo frammento disabiliterà l'effetto hover scala di trasformazione per dispositivi mobili.
Ora ogni volta che i post recenti sono tutti impostati con un tag di categoria corrispondente e un colore di sfondo corrispondente che viene visualizzato quando si passa con il mouse sopra la carta. Inoltre, la carta diventerà più grande e mostrerà anche l'estratto al passaggio del mouse.
Aggiornamento delle impostazioni della sezione
Per la sezione, diamo un nuovo gradiente di sfondo e un po' di riempimento. Apri le impostazioni della sezione e aggiorna quanto segue:
- Colore sfondo sfumato sinistro: #6529c7
- Colore di sfondo sfumato a destra: #f64937
- Direzione del gradiente: 270 gradi
- Imbottitura: 10vw superiore, 10vw inferiore
Risultato finale
Questo è tutto! Diamo un'occhiata al risultato finale. Questa immagine include un titolo che può essere facilmente aggiunto per completare il design.
Ed ecco l'animazione e gli effetti al passaggio del mouse.
Pensieri finali
Creare un post recente per layout di categoria è davvero un processo facile una volta che pensi un po' fuori dagli schemi. Tutto ciò che devi fare è creare un modulo blog per ogni categoria che desideri visualizzare. Quindi limita quel modulo alla visualizzazione solo del post più recente per una determinata categoria. Dopodiché, hai il potere di Divi al tuo fianco per occuparti del design.
Questo layout può essere utilizzato ovunque sul tuo sito, inclusi i modelli di Theme Builder. Quindi sentiti libero di importarli ovunque tu ne abbia bisogno utilizzando le opzioni di portabilità. Spero che sia utile per il tuo prossimo progetto o almeno ti dia un po' di ispirazione per far girare quelle ruote per progetti Divi ancora migliori.
Non vedo l'ora di sentirti nei commenti.
Saluti!