Come modellare le icone Blurb come accenti di design per i contenuti in Divi

L'uso di icone blurb come accenti di design può dare al layout della tua pagina un design unico a cui potresti non aver mai pensato prima. Oltre a posizionare l'icona di un modulo blurb in modo che si sovrapponga a un modulo di testo, puoi utilizzare lo sfondo e il bordo del modulo di testo per definire lo stile dell'icona. Questo crea un bel accento di design che incornicia il contenuto dando alle tue icone un design completamente unico.

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

Immergiamoci!

Sbirciata

Ecco alcuni esempi del design che costruiremo in questo tutorial.

Scarica i layout di esempio per questo tutorial

Per mettere le mani sul layout dei disegni accentati del modulo blurb gratuito, devi 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 "riabbonato" o riceverai email extra.

Scarica il file

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.

SCARICA

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!

Iniziare con la creazione del design da zero

Per iniziare, crea una nuova pagina e assegna un titolo alla tua pagina. Quindi distribuire il generatore Divi sul front-end. Aggiungi una sezione regolare con una riga a una colonna. Prima di aggiungere il tuo primo modulo, aggiorna le impostazioni della riga con quanto segue:

Usa larghezza 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:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

Disegnare il modulo di testo

Ora aggiorna il resto dell'impostazione del modulo Testo come segue:

Colore di sfondo: #ffffff

• Intestazione 2 Carattere: Nunito
• Intestazione 2 Peso del carattere: grassetto
• Stile carattere titolo 2: TT
• Colore testo titolo 2: #f24a5b
• Titolo 2: Dimensione testo: 42 pixel (desktop), 32 pixel (tablet), 22 pixel (telefono)
• Intestazione 2 lettere Sp[acing: 16px
• Altezza riga intestazione 2: 1,3 em

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

Poiché sovrapporremo il modulo di testo con le icone blurb, dobbiamo assicurarci che il modulo di testo si trovi sopra le icone nell'ordine z-space. Per fare ciò, dobbiamo prima aggiungere il seguente frammento di CSS alla casella CSS dell'elemento principale del modulo di testo:

position: relative;

Quindi imposta il valore z-index su 1.

Ora questo modulo di testo siederà sopra qualsiasi altro modulo sovrapposto che è importante per il design.

Creazione dell'icona Blurb

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

Quindi aggiorna le seguenti impostazioni di progettazione:

• Colore icona: #2ea3f2
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 100 px
• Margine personalizzato: 0px in basso (questo elimina il margine inferiore predefinito tra i moduli; non necessario se si utilizza una larghezza della riga di margine di 1)

Successivamente, poiché non stiamo utilizzando alcun testo con il modulo (solo l'icona), possiamo eliminare il margine inferiore predefinito sotto l'icona blurb. Per fare ciò, aggiungi il seguente CSS personalizzato alla casella CSS Blurb Image:

Blurb immagine CSS:

margin-bottom: 0px

Duplica l'icona Blurb

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

Posizionamento delle icone Blurb utilizzando Transform Translate

Per posizionare le icone blurb, utilizzeremo le opzioni di trasformazione di Divi che ci consentono di posizionare il modulo blurb con l'icona ovunque vogliamo sulla pagina.

Posizionamento dell'icona Blurb #1

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

• Trasforma Trasla asse X (desktop): -242px
• Trasforma Trasla asse Y (desktop): 50 px
• Trasforma Traduci asse X (telefono): -170px

Posizionamento dell'icona Blurb #2

Prima di posizionare questa icona blurb, rendiamola un po' più grande. Per fare ciò, apri le impostazioni del modulo blurb e modifica la dimensione del carattere dell'icona a 150 px.

Quindi posiziona l'icona blurb aggiornando le seguenti opzioni di trasformazione:

• Trasforma Trasla asse X (desktop): 242px
• Trasforma Trasla asse Y (desktop): -100px
• Trasforma Traduci asse X (telefono): 190px

Creazione della riga a due colonne

Per creare la colonna successiva, duplica la riga esistente e modifica il layout di colonna della riga in un layout a due colonne (1/2 1/2).

Quindi, usa la funzione di selezione multipla di Divi per selezionare tutti e tre i moduli nella colonna di sinistra, quindi copiali e incollali nella seconda colonna.

Quindi, elimina l'icona blurb in basso nella colonna uno.

Allineamento delle icone Blurb nella colonna 2

Per le icone Blurb nella colonna 2, dobbiamo spostare l'icona in alto a sinistra e l'icona in basso a destra. Possiamo farlo semplicemente modificando il valore dell'asse X di Transform Translate.

Apri le impostazioni del modulo blurb per il modulo blurb superiore nella colonna 2 e aggiorna quanto segue:

• Trasforma Trasla asse X (desktop): 242px
• Trasforma Traduci asse X (telefono): 170px

Fondamentalmente tutto ciò che stai facendo è cambiare questi valori da un negativo a un positivo per spostarlo nella direzione opposta lungo l'asse x.

Quindi, aggiorna il valore di traduzione della trasformazione per il modulo blurb inferiore nella colonna 2 come segue:

• Trasforma Trasla asse X (desktop): -242px
• Trasforma Traduci asse X (telefono): -190px

Aggiorna gli stili del modulo di testo nella seconda riga

La seconda riga di contenuti funge da sottoinsieme dei servizi in primo piano. Pertanto, vogliamo che la dimensione del carattere del titolo sia diversa e più piccola della nostra intestazione. Per aggiornare i due moduli di testo contemporaneamente, usa la selezione multipla per selezionare entrambi i moduli di testo. Quindi aggiorna quanto segue:

Modificare il contenuto dell'intestazione h2 per leggere "Servizio".

• Titolo 2: Dimensione testo: 28 px (desktop), 22 px (tablet), 18 px (telefono)

Salva le impostazioni.

Ora apri le impostazioni modali per il modulo di testo nella colonna 2 e aggiorna quanto segue:

• Orientamento del testo: a destra

Regolazione della spaziatura del layout

In questo momento probabilmente c'è un po' troppo spazio bianco (o negativo) tra le due righe di contenuto. Per togliere parte di quello spazio, possiamo aggiungere un margine inferiore negativo al modulo blurb inferiore nella riga superiore come segue:

• Margine personalizzato: -100 px in basso

Risultato finale

Ora diamo un'occhiata al risultato finale.

Provare altre icone

Per provare diverse icone per il tuo layout, puoi utilizzare la funzione Trova e sostituisci. Apri le impostazioni del blurb per uno dei blurb che contengono la tua icona. Quindi fare clic con il pulsante destro del mouse sull'icona nella modale delle impostazioni e selezionare Trova e sostituisci.

Nel popup Trova e sostituisci, aggiorna quanto segue:

• All'interno: questa sezione
• Sostituisci con: [seleziona nuova icona]

Successivamente, fai clic sul pulsante Sostituisci.

Questo cambierà tutti i blurb nella tua sezione con uno nuovo.

Ecco alcuni esempi di layout che utilizzano icone diverse.

Pensieri finali

L'aggiunta di icone blurb come accenti di design ai tuoi contenuti è 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 sovrapposizione parziale per le icone circostanti. Il risultato è unico e apre la porta all'esplorazione di più varianti di design. Sentiti libero di esplorare diverse icone e combinazioni di colori per creare qualcosa per le tue esigenze.

Non vedo l'ora di sentirti nei commenti.

Saluti!