Come essere creativi con lo sfondo dell'icona Blurb in Divi
Pubblicato: 2019-09-05I moduli Blurb sono alcuni degli elementi più versatili che puoi trovare in Divi. In questo post, ti mostreremo come fare un ulteriore passo avanti e diventare creativo con lo sfondo dell'icona blurb. Utilizzeremo una combinazione di moduli blurb, moduli di testo e moduli di invito all'azione. Questi design unici sono perfetti per le pagine dei servizi e le pagine delle categorie di prodotti. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato di tutti e tre gli esempi su schermi di diverse dimensioni.
Esempio 1
Desktop
Mobile
Esempio #2
Desktop
Mobile
Esempio #3
Desktop
Mobile
Scarica GRATUITAMENTE gli esempi di sfondo dell'icona Blurb
Per mettere le mani sugli esempi di sfondo dell'icona blurb gratuiti, devi prima scaricarli 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 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!
Iscriviti al nostro canale Youtube
Passaggi generali
Aggiungi nuova sezione
Sfondo
Per ricreare questi design di sfondo blurb creativi, apri una nuova pagina o aggiungi una nuova sezione a una pagina esistente. Prima di aggiungere una riga, aggiungi un colore di sfondo alla tua sezione.
- Colore di sfondo: #f7f7f7
Spaziatura
Aggiungi anche un'imbottitura personalizzata superiore e inferiore alla sezione.
- Imbottitura superiore e inferiore: 120 px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Prima di aggiungere qualsiasi modulo, regolare il dimensionamento della riga.
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Quindi, regola l'imbottitura nelle impostazioni di spaziatura.
- Imbottitura superiore: 8vw
- Imbottitura inferiore: 15vw
- Imbottitura sinistra e destra: 12vw
Colonna 1
Dopo aver modificato le impostazioni della riga, apporta alcune modifiche alla prima colonna.
Sfondo
Per prima cosa, aggiungi uno sfondo bianco.
- Colore di sfondo: bianco #ffffff
Frontiera
Quindi, aggiungi un raggio di bordo.
- Angoli arrotondati: 2vw tutti e quattro gli angoli
Scatola ombra
Infine, aggiungi un'ombra di scatola.
- Box-Shadow: prima opzione
- Intensità sfocatura box-ombra: 47px
Clona riga due volte
Manca un ultimo passaggio prima di iniziare ad aggiungere moduli. Clona la riga due volte.
Ricrea l'esempio n. 1
Aggiungi modulo Blurb alla colonna 1
Cancella contenuto predefinito
Ora che abbiamo impostato le nostre righe e colonne, possiamo iniziare ad aggiungere moduli alla colonna 1 della prima riga. Innanzitutto, aggiungi un modulo blurb e cancella tutto il titolo predefinito e il testo del corpo.
Scegli icona
Quindi, scegli un'icona invece di un'immagine.
- Icona: collegamento
Sfondo
Aggiungi un colore di sfondo nero al modulo blurb.
- Colore di sfondo: nero #000000
Impostazioni icona
Quindi, modifica le impostazioni dell'icona.
- Colore icona: giallo #edf000
- Posizionamento delle icone: in alto
- Dimensione carattere icona:
- Desktop: 3vw
- Tablet: 11vw
- Telefono: 13vw
Dimensionamento
Continuare regolando il dimensionamento del modulo.
- Larghezza contenuto: 100%
- Larghezza:
- Desktop: 11vw
- Tablet: 19vw
- Telefono: 22vw
Spaziatura
Aggiungi anche alcuni valori di spaziatura.
- Margine superiore: -5vw
- Margine inferiore: 0vw
- Margine sinistro: -1vw
- Imbottitura superiore e inferiore: 4vw
Frontiera
Per dare all'icona una forma unica, aggiungi un raggio di bordo a ciascuno degli angoli tranne quello in basso a sinistra.
- Angoli arrotondati: 50vw, 0vw nell'angolo in basso a sinistra.
Scatola ombra
Infine, aggiungi un'ombra di scatola.
- Box-Shadow: prima opzione
- Intensità sfocatura box-ombra: 50px
CSS personalizzato
L'icona ha, per impostazione predefinita, un margine inferiore ad essa collegato. Per sbarazzarcene, aggiungeremo una singola riga di codice CSS alla casella CSS personalizzata dell'immagine blurb.
- Immagine sfocata: margin-bottom: 0px;
margin-bottom: 0px;
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto H3
Sotto l'icona, aggiungi un modulo di testo con alcuni contenuti H3 a tua scelta.
Sfondo
Vai alle impostazioni dello sfondo e aggiungi uno sfondo sfumato.
- Sfondo: gradiente
- Colore uno: trasparente
- Colore due: giallo #edf000
- Direzione del gradiente: 180 gradi
- Posizione iniziale e finale: 74%
Testo del titolo
Quindi, modella il testo H3.
- Livello intestazione del testo del titolo: H3
- Carattere H3: Josefin Sans
- Allineamento H3: Centro
- Colore carattere H3: nero #oooooo
- Dimensione del testo H3:
- Desktop: 2.4vw
- Tablet: 3.4vw
- Telefono: 4.8vw
- Spaziatura lettere H3: 0em
Dimensionamento
Nelle impostazioni di dimensionamento, regola la larghezza per tablet e telefono.
- Larghezza:
- Compressa: 50%
- Telefono: 60%
Spaziatura
Continua andando alle impostazioni di spaziatura e regolando i valori dei margini.
- Margine sinistro e destro: 5vw
- Imbottitura superiore: 1vw
Trasformare
Infine, ruota il modulo con le opzioni di trasformazione.
- Trasforma Traduci:
- asse x: -20vw
- asse y: 13vw
- Trasforma Ruota: prima opzione, 280 gradi
Aggiungi il modulo di invito all'azione alla colonna 1
Rimuovi contenuto titolo predefinito, aggiungi pulsante e contenuto testo
Il prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di invito all'azione. Aggiungi del contenuto a tua scelta e rimuovi la copia del titolo.
Aggiungi collegamento
Aggiungi un collegamento pertinente al pulsante.
Sfondo
Assicurati che lo sfondo non abbia colore.
Corpo del testo
Quindi, vai alla scheda Design e modifica le impostazioni del testo del corpo.
- Carattere del corpo: testo cremisi
- Allineamento del corpo del testo: a sinistra
- Colore del corpo del testo: grigio scuro #666666
- Dimensione del testo del corpo:
- Desktop: 1.2vw
- Tablet: 2.6vw
- Telefono: 3.1vw
- Altezza della linea del corpo: 1,8 em
Pulsante
Modifica anche gli stili dei pulsanti.
- Dimensione del testo del pulsante:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw
- Colore del testo del pulsante: grigio molto scuro #3f3f3f
- Colore bordo pulsante: grigio molto scuro #3f3f3f
- Carattere pulsante: Josefin Sans
- Margine pulsante: 3vw
- Bottone Imbottitura Superiore e Inferiore: 1vw
- Imbottitura pulsante sinistra e destra: 3vw
Spaziatura
Completa le impostazioni del modulo aggiungendo del padding sinistro e destro.
- Imbottitura sinistra e destra: 7vw
Elimina colonna due e clona colonna 1
Regola le impostazioni nella colonna 2
Ora torna alle impostazioni della riga ed elimina la seconda colonna. Subito dopo, clona la prima colonna. Nei prossimi passaggi, regoleremo alcune impostazioni nella colonna dei duplicati.
Modulo Blurb
Inizia cambiando il colore dell'icona del modulo blurb.
- Colore icona: Acqua #00ffd4
Modulo di testo
Cambia lo sfondo sfumato e copia il modulo di testo successivo.
- Colore di sfondo: Acqua #00ffd4
- Modifica contenuto
Ricrea l'esempio n. 2
Aggiungi modulo Blurb alla colonna 1
Elimina contenuto predefinito
Al secondo esempio! Aggiungi un modulo blurb alla colonna 1 ed elimina tutto il contenuto predefinito.
Scegli icona
Quindi, scegli un'icona.
Sfondo
Ora aggiungi un colore di sfondo giallo.
- Colore di sfondo: giallo #edf000
Icona
Continua modificando le impostazioni dell'icona nella scheda Design.
- Colore icona: bianco #ffffff
- Posizionamento delle icone: in alto
- Dimensione carattere icona:
- Desktop: 3vw
- Tablet: 11vw
- Telefono: 12vw
Dimensionamento
Una volta che il colore e lo sfondo sono stati stilizzati, regola le dimensioni del modulo.
- Larghezza contenuto: 100%
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine inferiore: 0vw
- Margine sinistro e destro: 3vw
- Imbottitura superiore e inferiore: 2vw
Frontiera
Aggiungi un raggio di bordo a ciascun angolo successivo.
- Angoli arrotondati: 2vw tutti e quattro gli angoli
Scatola ombra
Completa il design del modulo aggiungendo un'ombra sottile.
- Box-Shadow: prima opzione
Rimuovi l'ombra del riquadro e il colore di sfondo della colonna 1
Apri quindi le impostazioni della colonna 1 e rimuovi il colore di sfondo e l'ombra della casella.
CSS personalizzato
Rimuovi il margine inferiore predefinito applicato all'icona blurb aggiungendo una singola riga di codice CSS alla scheda Avanzate.
- Immagine sfocata: margin-bottom: 0px;
margin-bottom: 0px;
Aggiungi il modulo di invito all'azione alla colonna 1
Aggiungi contenuto del titolo, contenuto del corpo e contenuto del pulsante
Sotto il modulo blurb, aggiungi un modulo di invito all'azione e inserisci alcuni contenuti a tua scelta.
Aggiungi collegamento
Aggiungi un collegamento al pulsante successivo.
Sfondo
Continua aggiungendo uno sfondo bianco.
- Colore di sfondo: bianco #ffffff
Testo del titolo
Nella scheda Design, modella il testo del titolo H3.
- Livello titolo titolo: H3
- Carattere H3: Josefin Sans
- Colore carattere H3: grigio molto scuro #3f3f3f
- Dimensione H3:
- Desktop: 2vw
- Tablet: 4vw
- Telefono: 6vw
- Altezza della linea H3: 2,3 em
Corpo del testo
Quindi, modella il corpo del testo.
- Carattere del corpo: testo cremisi
- Allineamento del corpo del testo: a sinistra
- Colore del corpo del testo: grigio scuro #666666
- Dimensione del testo del corpo:
- Desktop: 1.1vw
- Tablet: 2.2vw
- Telefono: 3.1vw
- Altezza della linea del corpo: 1,8 em
Pulsante
Passa alle impostazioni del pulsante e modifica lo stile del pulsante come segue:
- Dimensione del testo del pulsante:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw
- Colore del testo del pulsante: grigio molto scuro #3f3f3f
- Carattere pulsante: Josefin Sans
- Larghezza bordo pulsante: 2-x
- Colore bordo pulsante: grigio molto scuro #3f3f3f
- Pulsante Margine superiore e inferiore: 3vw
- Bottone Imbottitura Superiore e Inferiore: 1vw
- Imbottitura pulsante sinistra e destra: 3vw
Spaziatura
Ora, regola la spaziatura.
- Margine inferiore: -1vw
- Imbottitura superiore: 6vw
- Imbottitura sinistra e destra: 7vw
Frontiera
Quindi, arrotonda gli angoli nelle impostazioni del bordo.
- Angoli arrotondati: 2vw
Scatola ombra
Infine, aggiungi un'ombra di scatola.
- Box-Shadow: prima opzione
- Intensità sfocatura box-ombra: 50px
Elimina colonna due e clona colonna 1
Regola le impostazioni nella colonna 2
Simile all'esempio precedente, vai alle impostazioni della riga ed elimina la seconda colonna. Duplica la prima colonna e regola alcune impostazioni.
Modulo Blurb
Cambia lo sfondo del modulo blurb da giallo ad acqua.
- Colore dell'icona di sfondo: Aqua #00ffd4
Modulo di invito all'azione
Modifica anche il contenuto e il collegamento del modulo di invito all'azione.
- Cambia il contenuto del titolo
- Cambia collegamento
Ricrea l'esempio n. 3
Aggiungi modulo Blurb alla colonna 1
Elimina contenuto predefinito
Al prossimo e ultimo esempio! Aggiungi un modulo blurb alla colonna 1 e cancella il contenuto predefinito.
Scegli icona
Scegli un'icona.
Sfondo
Aggiungi uno sfondo giallo brillante al modulo.
- Colore di sfondo: giallo #f7f426
Icona
Rendi l'icona nera e regola la sua posizione
- Colore icona: nero #000000
- Posizionamento dell'icona: a sinistra
- Dimensione carattere icona:
- Desktop: 3vw
- Tablet + Telefono: 8vw
Dimensionamento
Continua modificando la larghezza e l'altezza del modulo.
- Larghezza contenuto: 100%
- Altezza: 23vw
Spaziatura
Inoltre, regolare le impostazioni di spaziatura.
- Margine sinistro: 3vw
- Margine destro: 25vw
- Imbottitura superiore: 2vw
- Imbottitura sinistra: 1vw
Frontiera
Aggiungi anche un raggio di bordo.
- Angoli arrotondati: 2vw su tutti gli angoli
Scatola ombra
Quindi, aggiungi un'ombra di scatola.
- Box-Shadow: prima opzione
Trasformare
Infine, riposiziona il modulo utilizzando i valori di traduzione della trasformazione personalizzata.
- asse x: -6vw
- asse y: 1vw
Rimuovi il colore di sfondo e l'ombra della casella dalla colonna 1
Vai alle impostazioni della colonna 1 e rimuovi il colore di sfondo e l'ombra della casella.
Aggiungi il modulo di invito all'azione alla colonna 1
Aggiungi titolo, corpo e contenuto del pulsante
Sotto il modulo blurb, aggiungi un modulo di invito all'azione. Aggiungi alcuni contenuti a tua scelta.
Aggiungi collegamento
Quindi, aggiungi un collegamento al pulsante.
Sfondo
Per definire lo stile del modulo di invito all'azione, inizia aggiungendo un colore di sfondo nero.
- Colore di sfondo: nero #oooooo
Testo del titolo
Regola le impostazioni del testo H3 in seguito.
- Livello titolo titolo: H3
- Carattere H3: Josefin Sans
- Colore carattere H3: giallo brillante # f7f426
- Dimensione carattere H3:
- Desktop: 2vw
- Tablet: 4vw
- Telefono: 6vw
- Altezza della linea H3: 2,3 em
Corpo del testo
Modifica anche le impostazioni del testo del corpo.
- Carattere del corpo: testo cremisi
- Allineamento del corpo del testo: a sinistra
- Colore del corpo del testo: bianco # 000000
- Dimensione del testo del corpo:
- Desktop: 1.2vw
- Tablet: 2.2vw
- Telefono: 3.1vw
- Altezza della linea del corpo: 1,8 em
Pulsante
Quindi, modella il pulsante come segue.
- Dimensione del testo del pulsante:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw
- Colore del testo del pulsante: Aqua #00ffd4
- Colore bordo pulsante: Aqua #00ffd4
- Carattere pulsante: Josefin Sans
- Pulsante Margine superiore e inferiore: 3vw
- Bottone Imbottitura Superiore e Inferiore: 1vw
- Imbottitura pulsante sinistra e destra: 3vw
Dimensionamento
Passa alle impostazioni di dimensionamento e apporta alcune modifiche.
- Larghezza: 90%
- Allineamento del modulo: Centro
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine superiore: -9vw
- Imbottitura superiore: 5vw
- Imbottitura sinistra e destra: 7vw
Frontiera
Successivamente apri le impostazioni del bordo e aggiungi un raggio di bordo a ciascuno degli angoli.
- Angoli arrotondati: 2vw
Scatola ombra
Stiamo usando anche un'ombra sottile della scatola.
- Ombra scatola: prima opzione
Trasforma Traduci
Infine, riposiziona il modulo di invito all'azione modificando le impostazioni di traduzione della trasformazione.
- asse y: -18vw
Elimina colonna due e clona colonna 1
Regola le impostazioni nella colonna 2
Ora che la prima colonna è pronta, elimineremo la seconda e duplichiamo la prima. Successivamente, regoleremo alcuni dei dettagli del contenuto e del colore.
Modulo Blurb
Nelle impostazioni del modulo blurb, cambia lo sfondo da giallo ad acqua.
- Colore dell'icona di sfondo: Aqua #00ffd4
Modulo di invito all'azione
Nelle impostazioni del modulo di invito all'azione, modifica il contenuto del titolo, il colore del titolo e il colore del pulsante. Non dimenticare di cambiare anche il link del pulsante e il gioco è fatto!
- Colore del testo del titolo: Aqua #00ffd4
- Contenuto
- Colore pulsante: #00ffd4
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Esempio 1
Desktop
Mobile
Esempio #2
Desktop
Mobile
Esempio #3
Desktop
Mobile
Conclusione
Come hai visto in questo post, gli sfondi delle icone blurb possono rendere i tuoi progetti blurb molto più interessanti. Utilizzando moduli blurb abbinati a un invito all'azione e moduli di testo, ci sono molte possibilità creative. Questi stili di design sono perfetti per vetrine di servizi o sezioni di prodotti. Cosa ne pensi? Diteci nei commenti.