Presenta i tuoi ultimi post del blog in uno straordinario design mobile con Divi

Il modo in cui mostri i post del blog sul tuo sito Web ha una grande influenza sul comportamento dei tuoi visitatori quando li incontrano durante la navigazione sul tuo sito Web. Per aiutarti a essere creativo ed efficace, ti mostreremo come presentare i tuoi ultimi post del blog in un modo sorprendente.

L'esempio che ricreeremo avrà un aspetto particolarmente bello su schermi di dimensioni più piccole, pur mantenendo un aspetto e una sensazione eccezionali anche su desktop e tablet. Ci auguriamo che questo tutorial ti ispiri a creare i tuoi ultimi progetti personalizzati per i post del blog.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Iniziamo a ricreare!

Aggiungi nuova sezione

Sfondo sfumato

Crea una nuova pagina o aprine una esistente e aggiungi una sezione normale. Apri le impostazioni e aggiungi uno sfondo sfumato successivamente.

• Colore 1: #2e1b8f
• Colore 2: #ffffff
• Direzione gradiente: 90 gradi
• Posizione di partenza: 53,3%
• Posizione finale: 53,3%

Spaziatura

Quindi, vai alle impostazioni di spaziatura. Qui, ridurremo le dimensioni del contenuto della sezione sul desktop e gradualmente elimineremo quello spazio su schermi di dimensioni più piccole.

• Margine superiore: 100 px
• Margine inferiore: 100 px
• Imbottitura sinistra: 26vw (Desktop), 13vw (Tablet), 0vw (Telefono)
• Imbottitura destra: 22.8vw (desktop), 11.4vw (tablet), 0vw (telefono)

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo della colonna 2

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo alla seconda colonna.

• Colore di sfondo della colonna 2: #f7f7f7

Colore di sfondo della colonna 3

Aggiungi lo stesso colore anche allo sfondo della colonna 3. Stiamo usando lo stesso colore per entrambe queste colonne per collegarle e farle sembrare un pezzo unico. Più avanti nel post, lo useremo per manipolare le larghezze delle colonne su schermi di dimensioni più piccole.

• Colore di sfondo della colonna 3: #f7f7f7

Dimensionamento

Vai alla scheda Design e apri le impostazioni di dimensionamento. Qui, rimuoveremo tutto lo spazio predefinito tra le colonne.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Schermo

Ora, per assicurarci che tutte e tre le colonne appaiano una accanto all'altra su schermi di dimensioni inferiori, dobbiamo aggiungere una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Seleziona icona

È ora di iniziare ad aggiungere moduli! Inizia con un modulo Blurb nella colonna 1 e seleziona un'icona a tua scelta.

Sfondo sfumato

Vai alle impostazioni di sfondo del modulo e aggiungi uno sfondo sfumato radiale.

• Colore 1: #5000ff
• Colore 2: RGB (41,196,169,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 28%
• Posizione finale: 28%

Impostazioni icona

Continua andando alla scheda Design e modificando le impostazioni dell'icona.

• Colore icona: #ffffff
• Posizionamento immagine/icona: in alto
• Usa carattere icona: Sì
• Dimensione carattere icona: 22 px

Spaziatura

Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 10px

Frontiera

E aggiungi un sottile bordo inferiore per completare il design del modulo Blurb.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #ffffff
• Stile bordo inferiore: tratteggiato

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Il modulo successivo e ultimo di cui abbiamo bisogno nella prima colonna è un modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

Quindi, vai alla scheda Progettazione e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Didact Gothic
• Peso del carattere del testo: grassetto
• Colore del testo: #ffffff

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Alla seconda colonna! Qui, l'unico modulo di cui avremo bisogno è un modulo di testo. Inserisci alcuni contenuti a tua scelta.

Colore di sfondo

Passa alle impostazioni dello sfondo e aggiungi un colore di sfondo completamente bianco.

• Colore di sfondo: #ffffff

Impostazioni testo

Stiamo anche cambiando l'aspetto dei nostri contenuti modificando le impostazioni del testo nella scheda Design.

• Carattere del testo: Source Serif Pro
• Peso del carattere del testo: grassetto
• Colore del testo: #000000
• Dimensione del testo: 13px
• Orientamento del testo: al centro

Dimensionamento

Come accennato in precedenza, stiamo manipolando le strutture delle colonne per creare un design personalizzato su schermi di dimensioni più piccole. Per fare ciò, dovrai ridurre la larghezza del modulo di testo e assicurarti che sia allineato al lato sinistro della colonna.

• Larghezza: 60%
• Allineamento del modulo: a sinistra

Spaziatura

Successivamente stiamo aggiungendo alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 57px
• Imbottitura inferiore: 57px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.23)

Aggiungi modulo di testo alla colonna 3

Aggiungi contenuto

Alla prossima e ultima colonna. Aggiungi un modulo di testo con il titolo H3 del tuo post sul blog e un link. Aggiungi i dettagli del post nello stile di testo del paragrafo proprio sotto il titolo.

Impostazioni testo

Vai alla scheda design del modulo di testo e modifica le impostazioni del testo.

• Carattere del testo: Source Serif Pro
• Colore del testo: #a8a8a8
• Dimensione del testo: 12px

Impostazioni testo H3

Continua modificando anche le impostazioni del testo H3.

• Intestazione 3 Font: Didact Gothic
• Intestazione 2 Peso del carattere: grassetto
• Intestazione 3 Dimensione del testo: 17 px

Spaziatura

Infine, dovremo aggiungere alcuni valori di spaziatura personalizzati. Noterai che stiamo anche aggiungendo un margine sinistro negativo al modulo. Questo è l'ultimo passo verso la creazione di un diverso tipo di struttura a colonne su schermi di dimensioni più piccole. Quindi, sebbene la struttura delle colonne sia tecnicamente la stessa, abbiamo combinato sfondi delle colonne, larghezze dei moduli e margine sinistro negativo per creare un risultato dall'aspetto diverso.

• Margine superiore: 35px
• Margine sinistro: -80px (desktop), -50px (tablet e telefono)
• Imbottitura destra: 20px

Clona riga due volte

Una volta che hai finito di modificare la riga e tutti i suoi moduli, puoi andare avanti e clonare l'intera riga fino a tutte le volte che vuoi, a seconda di quanti ultimi post del blog vuoi mostrare.

Cambia icone

Cambia l'icona di ogni duplicato.

Modifica contenuto e collegamenti

Insieme ai contenuti e ai link che sono coinvolti e il gioco è fatto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come creare uno straordinario design mobile che mostri i tuoi ultimi post sul blog. Il design che abbiamo ricreato passo dopo passo è realizzato principalmente per schermi di dimensioni più piccole, ma ha un bell'aspetto anche su tablet e desktop. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!