Come creare caselle di contenuto con stile in Divi per suggerimenti, informazioni, avvisi e altro (download GRATUITO)
Pubblicato: 2021-06-20Le caselle di contenuto in stile per cose come suggerimenti, avvisi e altre informazioni importanti sono risorse utili per qualsiasi sito Web o blog. Sono un modo efficace e conveniente per mostrare contenuti importanti con un design coerente che gli utenti apprezzeranno. Ad esempio, potrebbe essere necessario un design della casella di contenuto per evidenziare un suggerimento chiave in un tutorial o per avvisare gli utenti di un potenziale problema.
In questo tutorial, ti mostreremo come creare 3 design di caselle di contenuto in Divi. Questi design di caselle di contenuto possono essere facilmente modificati con nuove icone, combinazioni di colori e/o contenuti per soddisfare qualsiasi esigenza. Dopo averti mostrato come progettare le scatole, ti mostreremo come utilizzare i preset globali di Divi per semplificare la distribuzione di una nuova casella di contenuto pre-progettata con pochi clic. Non è necessario alcun plug-in!
Iniziamo!
Sbirciata
Oggi costruiremo questi 3 design di scatole di contenuti principali in Divi.
Con questi 3 design di caselle di contenuto principali, sarai in grado di effettuare facilmente personalizzazioni (come icona, colore e testo) per creare infiniti design di caselle di contenuto per ogni occasione.
Ecco 36 esempi che includiamo nel nostro download GRATUITO di seguito.
Scarica il layout GRATUITAMENTE
Per mettere le mani su tutti i 36 design delle caselle di contenuto, devi prima scaricare il layout 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!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo 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).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione dei design delle caselle di contenuto in Divi
Prima di iniziare a progettare le nostre caselle di contenuto, aggiungiamo una nuova riga a una colonna alla sezione predefinita in Divi Builder.
Design della scatola dei contenuti n. 1
Per creare la prima casella di contenuto, aggiungi un modulo blurb alla colonna.
Nella scheda contenuto, aggiorna quanto segue:
- Usa l'icona: S
- Icona: vedi screenshot
- Colore di sfondo: #ffffff
- Colore sfondo sfumato sinistro: #00529b
- Colore di sfondo sfumato a destra: # bde5f8
- Direzione gradiente: 90 gradi
- Posizione di partenza: 3em
- Posizione finale: 0%
Nella scheda Design, aggiorna lo stile dell'icona come segue:
- Colore icona: #ffffff
- Allineamento immagine/icona: a sinistra
- Usa la dimensione del carattere dell'icona: S
- Dimensione carattere icona: 2em
Successivamente, aggiorna gli stili di testo come segue:
- Colore del testo del titolo: #00529b
- Dimensione del testo del titolo: 1,5 em
- Altezza della riga del titolo: 2em
- Colore del corpo del testo: #bde5f8
- Dimensione del testo del corpo: 1em
- Altezza della linea del corpo: 2em
Una volta che gli stili di testo sono a posto, aggiorna le dimensioni e il riempimento come segue:
- Larghezza contenuto: 100%
- Larghezza massima: 700 px
- Allineamento del modulo: Centro
- Imbottitura: 2em in alto, 2em in basso, 5em a sinistra, 2em a destra
Quindi aggiungi una sottile ombra di scatola al blurb come segue:
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Intensità sfocatura ombra scatola: 88 px
- Forza di diffusione dell'ombra della scatola: -10px
- Colore ombra: rgba(0,0,0,0.17)
Nella scheda Avanzate, daremo all'icona del blurb uno stile personalizzato in modo che abbia una forma circolare con colori di sfondo e bordo che corrispondano al colore del gradiente di sfondo sinistro utilizzato in precedenza. Inoltre, posizioneremo l'icona con una posizione assoluta in modo da poterla posizionare esattamente dove vogliamo senza occupare spazio effettivo nel documento.
Per aggiungere lo stile personalizzato, incolla il seguente codice CSS nella casella Blurb Image CSS:
position:absolute; margin-bottom: 0px; border: 0.5em solid #00529b !important; border-radius:50%; background: #00529b; transform: translateX(-3.75em);
NOTA: Quando si cambia lo schema dei colori della casella del contenuto (o del modulo blurb), sarà necessario aggiornare anche i colori utilizzati nel CSS dell'immagine Blurb per il bordo e lo sfondo dell'icona.
Diamo un'occhiata al risultato finale.
Design della scatola dei contenuti n. 2
Per creare il nostro secondo design della casella di contenuto, duplica il modulo blurb precedente per avviare il design in modo da poter apportare alcune modifiche.
Per questo design, centrate verticalmente l'icona sul lato sinistro del blurb usando la proprietà della griglia CSS.
Nella scheda Design, sostituisci Blurb Image CSS con quanto segue:
margin-bottom: 0px;
Quindi aggiungi il seguente CSS alla casella CSS del contenuto di Blurb:
display: grid; align-items: center; justify-content: center; grid-template-columns: 5em auto; grid-gap: 2em;
La larghezza della colonna di sinistra nella griglia (quella che contiene l'icona) è impostata su 5em e la colonna di destra contenente il titolo e il corpo del testo è impostata su auto . Dobbiamo far corrispondere la larghezza del colore del gradiente sinistro alla colonna della griglia della larghezza di 5 em che contiene l'icona. Per farlo, aggiorna quanto segue:
- Posizione di partenza: 5em
Nella scheda Design, aggiorna l'allineamento e le dimensioni dell'icona:
- Allineamento immagine/icona: centro
- Dimensione carattere icona: 3em
Ora non abbiamo bisogno dell'imbottitura sinistra, quindi toglila.
Ora tutto dovrebbe essere allineato bene. Controlla il risultato finale.
Design della scatola dei contenuti n. 3
Per creare il terzo design della casella di contenuto, duplica il secondo modulo blurb (casella di contenuto) che abbiamo appena finito.
Una volta che il secondo blurb è stato duplicato, apri le impostazioni del blurb duplicato.
Nella scheda Design, cambia il colore dell'icona:
- Colore icona: rgba (255,255,255,0.3)
Successivamente, aggiungeremo il testo dell'etichetta verticale sull'icona aggiungendo CSS personalizzati allo pseudo-elemento prima (che in pratica ti consente di allegare design e/o contenuto aggiuntivi prima dell'elemento del modulo blurb).
Per aggiungere l'etichetta, incolla il seguente CSS nella casella Prima di CSS:
content: 'key tip'; bottom:50%; font-size: 1em; line-height: 1em; letter-spacing: 0.4em; position:absolute; transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important; transform-origin: bottom left; color: #fff; font-family: inherit; font-weight: bold; text-transform: uppercase; z-index:1;
Ruoteremo anche l'icona in modo che corrisponda al testo verticale ruotato. Per fare ciò, aggiungi il seguente CSS alla casella CSS di Blurb Image:
margin-bottom: 0px; transform: rotateZ(-90deg);
Questo è il risultato finale.
Aggiornamento del design
Aggiorna la dimensione degli elementi della casella di contenuto modificando la dimensione del testo del corpo
Ciascuna delle caselle di contenuto è costruito utilizzando principalmente l'unità di lunghezza em (em è relativa alla dimensione del font corpo principale dell'elemento). Per questo motivo, le caselle di contenuto si ridimensionano perfettamente quando si regola la dimensione del testo del corpo nelle impostazioni di progettazione integrate di Divi.
Aggiorna i colori CSS personalizzati
Per il design della casella di contenuto n. 1, abbiamo aggiunto uno sfondo personalizzato e un colore del bordo all'icona con CSS personalizzato. Assicurati di aggiornare i colori utilizzati per la proprietà del bordo e dello sfondo in modo che corrispondano allo schema di colori del tuo design.
Aggiornamento del testo dell'etichetta
Per il design della casella di contenuto n. 3, abbiamo aggiunto un'etichetta con CSS personalizzato sullo pseudo elemento prima . Per aggiornare il testo, cambia semplicemente il valore della proprietà del contenuto nella casella Prima di CSS.
Rendere riutilizzabili le caselle di contenuto in Divi
Salva il modulo nella libreria Divi
Esistono due modi principali per rendere i moduli riutilizzabili in Divi. Il primo modo è salvare il modulo (o qualsiasi elemento) nella libreria Divi.
Una volta che l'elemento è stato salvato nella libreria, puoi trovarlo nella libreria Divi quando aggiungi un nuovo elemento a una pagina.
Usa i preset globali
Il secondo modo principale per rendere riutilizzabile un modulo in Divi è creare un preset globale per quel modulo. Una volta salvato il design di un modulo come preset globale, puoi facilmente aggiungere quel preset globale a qualsiasi altra istanza dello stesso modulo.
In questo caso, possiamo aprire le impostazioni per ciascuna delle nostre caselle di contenuto (o moduli blurb) e creare un nuovo preset globale per ognuna. Per farlo, apri le impostazioni del modulo Blurb e fai clic sull'opzione preimpostata in alto. Quindi trasforma le impostazioni del modulo in un nuovo preset da stili personalizzati.
Dai un nome al nuovo preset come vuoi e salvalo.
Ripeti questi passaggi per ogni preimpostazione del modulo blurb che desideri creare.
Per creare più caselle di contenuto in futuro, aggiungi semplicemente un nuovo modulo blurb e seleziona l'icona che desideri utilizzare. Quindi attiva uno dei preset caricati facendo clic sul menu a discesa dei preset in alto e selezionando un preset di tua scelta.
Risultati finali
Ecco un'ultima occhiata ai 3 design principali delle caselle di contenuto che abbiamo creato.
Ed ecco 36 design che potrai realizzare con alcune semplici personalizzazioni che includiamo nel nostro download GRATUITO sopra.
Pensieri finali
Le caselle di contenuto in stile che abbiamo creato possono essere una risorsa di progettazione utile per qualsiasi sito Web o blog. Puoi sfruttare le potenti opzioni di design in Divi per modificare le caselle di contenuto per adattarle a qualsiasi design. Inoltre, con la possibilità di salvarli e caricarli nella libreria Divi e/o creare preset globali, sarai in grado di distribuire queste caselle di contenuto ogni volta che vuoi con pochi clic. Speriamo che questi tornino utili.
Non vedo l'ora di sentirti nei commenti.
Saluti!