Come personalizzare il modulo blurb per concentrarsi sui contenuti di Divi

L'uso delle icone di presentazione come tocchi estetici può dare al tuo layout un design unico a cui potresti non aver mai pensato. Oltre a posizionare l'icona di un modulo di presentazione per coprire un modulo di testo, è possibile utilizzare lo sfondo e il bordo del modulo di testo per modellare l'icona. Questo crea un bel accento di design che incornicia il contenuto dando alle tue icone un design totalmente unico.

In questo tutorial, ti mostrerò come stilizzare le icone di presentazione come accenti di design per i tuoi contenuti in Divi.

Panoramica

Ecco alcuni esempi del design che costruiremo in questo tutorial.

Scarica i layout di esempio per questo tutorial

Per mettere le mani sul layout degli accenti del modulo blurb gratis, devi prima scaricarlo utilizzando il pulsante qui sotto. Per accedere al download, devi iscriverti alla nostra mailing list Divi Daily utilizzando il file forma sotto. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout ogni lunedì gratis ! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su Scarica. Non verrai "iscritto nuovamente" né riceverai email aggiuntive.

Download

Inizia con il design da zero

Per iniziare, crea una nuova pagina e dai un titolo alla tua pagina. Quindi, distribuisci il generatore Divi sul sistema di parti pubbliche. Aggiungi una sezione regolare con una riga di una colonna. Prima di aggiungere il primo modulo, aggiorna le impostazioni della riga con quanto segue:

Utilizzare la larghezza della grondaia personalizzata: SÌ
Larghezza grondaia personalizzata: 1

Ciò eliminerà eventuali margini personalizzati tra i moduli.

Creazione del modulo di testo

Quindi aggiungi un modulo di testo all'interno della riga.

Aggiorna il modulo di testo con il seguente testo di riempimento:

Stilizzare il modulo di testo

Ora aggiorna il resto del parametro del modulo di testo come segue:

• Colore di sfondo: #ffffff
• Intestazione carattere 2: Nunito
• Titolo 2 Peso carattere: grassetto
• Titolo 2 Stile carattere: TT
• Titolo 2 Colore del testo: #f24a5b
• Titolo 2 Dimensione testo: 42 pixel (desktop), 32 pixel (tablet), 22 pixel (telefono)
• Titolo 2 Letter Spacing: 16px
• Titolo 2 Altezza linea: 1.3em

• Larghezza: 500px (desktop), 490px (tablet)
• Allineamento del modulo: centro
• Imbottitura personalizzata (desktop): 40px in alto, 40px in basso, 50px a sinistra, 50px a destra
• Imbottitura personalizzata (telefono): 20px a sinistra, 20px a destra
• Larghezza del bordo: 10px
• Colore del bordo: #ffffff

Dato che andremo a sovrapporre il modulo di testo con le icone di presentazione, dobbiamo assicurarci che il modulo di testo si trovi sopra le icone nell'ordine z-spazio. Per fare ciò, dobbiamo prima aggiungere il seguente frammento CSS nell'area CSS dell'elemento principale del modulo Testo:

posizione: relativa;

Quindi impostare il valore z-index su 1.

Ora, questo modulo di testo verrà posizionato sopra tutti gli altri moduli che si sovrappongono, il che è importante per la progettazione.

Crea l'icona Blurb

Ora siamo pronti per creare la prima icona di blurb. Per fare ciò, dobbiamo prima aggiungere un modulo Blurb e trascinarlo nella parte superiore del modulo di testo. Quindi elimina il contenuto segnaposto (il testo del titolo e il corpo del testo) e fai clic per utilizzare un'icona invece di un'immagine per il testo della descrizione.

Quindi aggiornare i seguenti parametri di progettazione:

• Colore icona: # 2ea3f2
• Usa dimensione carattere icona: SÌ
• Dimensione carattere icona: 100px
• Margine personalizzato: 0px nella parte inferiore (rimuove il margine inferiore predefinito tra i moduli, non necessario se si utilizza la larghezza della grondaia 1)

Quindi, poiché non usiamo alcun testo con il modulo (solo l'icona), possiamo rimuovere il margine inferiore predefinito sotto l'icona del layout. Per fare ciò, aggiungi il seguente codice CSS personalizzato all'area CSS dell'immagine di Blurb:

Blurb Image CSS:

margin-bottom: 0px

Duplica l'icona Blurb

Prima di iniziare a posizionare il blurb, andiamo avanti, duplichiamo il modulo blurb e trascinalo sotto il modulo di testo. Ora dovresti avere un'icona di presentazione sopra e sotto il modulo di testo.

Posizionamento delle icone di presentazione utilizzando Transform Translate

Per posizionare le icone di presentazione, utilizzeremo le opzioni di trasformazione Divi, che ci consentono di posizionare il modulo di presentazione con l'icona in qualsiasi punto della pagina.

Posizionamento Icona Blurb #1

Per posizionare l'icona del blurb superiore, apri le impostazioni del modulo blurb e aggiorna quanto segue:

• Trasforma traslazione asse X (desktop): -242px
• Trasforma trasla asse Y (desktop): 50px
• Trasforma tradurre asse X (telefono): -170px

Tuttavia, puoi aggiungerlo in base alle impostazioni che hai effettuato.

Posizionamento Icona Blurb # 2

Prima di posizionare questa icona di presentazione, ingrandiamola. Per fare ciò, apri le impostazioni del modulo Blurb e modifica la dimensione del carattere dell'icona a 150px.

Quindi posizionare l'icona della presentazione aggiornando le seguenti opzioni di trasformazione:

• Trasforma traslazione asse X (desktop): 242px
• Trasforma trasla asse Y (desktop): -100px
• Trasforma tradurre asse X (telefono): 190px

Creazione di un'altra sezione

D'ora in poi, possiamo prendere spunto da quello che abbiamo fatto, per creare un'altra zona con una diversa disposizione. Tutto quello che devi fare è creare una nuova colonna e copiare i moduli precedenti. Per eseguire una copia multipla, passa con il mouse su ciascun modulo tenendo premuto il tasto CTRL sulla tastiera.

Risultato finale

Ora vediamo il risultato finale.

Considerazioni finali

Aggiunta di icone di presentazione come accenti di design al tuo contenuto è un esempio di come due moduli possono essere combinati per creare un design completamente unico. In questo caso lo sfondo e il bordo del modulo di testo fungono da copertura parziale per le icone circostanti. Il risultato è unico e apre la porta all’esplorazione di diverse varianti di design. Sentiti libero di esplorare diverse icone e combinazioni di colori per creare qualcosa per le tue esigenze.

Spero di sentirti nei commenti.