Creazione di "Note adesive" con contenuto espandibile con Divi
Pubblicato: 2019-06-08Con le opzioni integrate di Divi ci sono molti modi per presentare servizi e/o eseguire passaggi sul tuo sito web. Per aiutarti a trarre ispirazione, ti mostreremo come creare note adesive con contenuti espandibili utilizzando solo le opzioni integrate di Divi. Questo è un modo divertente per condividere contenuti aggiuntivi non appena il visitatore attiva l'interazione. Puoi utilizzare questo design per qualsiasi sito Web su cui stai lavorando e potrai anche scaricare il file JSON gratuitamente!
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica il layout delle note adesive GRATUITAMENTE
Per mettere le mani sul layout delle note adesive gratuite, dovrai 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 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!
Iniziamo a ricreare!
Iscriviti al nostro canale Youtube
Aggiungi una nuova sezione regolare
La prima cosa che devi fare è aggiungere una nuova sezione regolare alla pagina su cui stai lavorando.
Aggiungi una nuova riga
Struttura della colonna
Continua aggiungendo anche una nuova riga, utilizzando la seguente struttura di colonne:
Durata della transizione
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga. Stiamo creando una transizione istantanea modificando la durata della transizione nella scheda Avanzate.
- Durata della transizione: 0 ms
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto
È ora di iniziare ad aggiungere moduli! Aggiungi un nuovo modulo di testo alla prima colonna della riga e inserisci il contenuto H2 che desideri visualizzare nel design della nota adesiva.
Colore di sfondo
Quindi, vai alle impostazioni dello sfondo e cambia il colore di sfondo di conseguenza:
- Colore di sfondo: #ffd800
Impostazioni testo H2
Passa alle impostazioni del testo H2 e apporta alcune modifiche anche lì:
- Carattere titolo 2: Indie Flower
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #3a0cf2
- Intestazione 2 Dimensioni del testo: 40 px
Spaziatura
Per creare l'aspetto di una nota adesiva, aggiungeremo alcuni valori di riempimento personalizzati al modulo:
- Imbottitura superiore: 150 px
- Imbottitura inferiore: 150 px
- Imbottitura sinistra: 20px
- Imbottitura destra: 20px
Frontiera
Stiamo anche aggiungendo un bordo superiore utilizzando le seguenti impostazioni:
- Larghezza bordo superiore: 20 px
- Colore bordo superiore: #ffc300
Aggiungi modulo divisore alla colonna 1
Visibilità
Il modulo successivo di cui abbiamo bisogno nella prima colonna è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Colore
Quindi, vai alla scheda Design e cambia il colore del divisore.
- Colore: #ffc300
Stili
Modifica anche le impostazioni degli stili del divisore.
- Stile divisore: tratteggiato
Dimensionamento
E cambia anche le impostazioni di dimensionamento.
- Peso del divisore: 5px
- Altezza: 0px
Spaziatura
Per creare uno spazio tra il modulo precedente e questo, aggiungiamo un margine superiore.
- Margine superiore: 150 px
Trasforma Ruota
Come puoi notare nell'anteprima di questo post, stiamo cercando di creare un divisore verticale anziché orizzontale. Per fare ciò, cambieremo il valore sinistro nelle impostazioni di rotazione della trasformazione del modulo Divisore:
- Sinistra: 270°
Visibilità
Vogliamo anche assicurarci che il modulo divisore appaia sotto il modulo testo. Per fare ciò, ridurremo l'indice z del divisore nella scheda Avanzate.
- Indice Z: -99
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi simbolo alla casella del contenuto
Il prossimo e ultimo modulo di cui abbiamo bisogno nella prima colonna è un altro modulo di testo. Aggiungi il carattere '●' alla casella del contenuto.
Impostazioni testo
Quindi, passa alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Open Sans
- Colore del testo: #3a0cf2
- Dimensione del testo: 100 px
- Altezza riga di testo: 1em
- Orientamento del testo: al centro
Spaziatura
Crea la sovrapposizione desiderata aggiungendo successivamente un margine superiore negativo.
- Margine superiore: -50 px
Aggiungi il modulo di testo n. 3 alla colonna 2
Aggiungi contenuto H3
Passiamo alla seconda colonna. Qui, il primo modulo di cui abbiamo bisogno è un modulo di testo. Inserisci alcuni contenuti H3 a tua scelta.
Impostazioni testo H3
Vai alla scheda Design e modifica le impostazioni del testo H3 di conseguenza:
- Titolo 3: Indie Flower
- Colore testo titolo 3: #3a0cf2
- Intestazione 3 Dimensioni del testo: 30 px
Spaziatura
Aggiungi un margine superiore personalizzato dopo:
- Margine superiore: 400 px (desktop), 200 px (tablet), 150 px (telefono)
Aggiungi il modulo di testo n. 4 alla colonna 2
Aggiungi contenuto
Al modulo successivo, che è un altro modulo di testo. Inserisci un contenuto del paragrafo a tua scelta.
Impostazioni testo
Quindi, vai alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Open Sans
- Dimensione del testo: 13px
- Altezza riga di testo: 2em
Dimensionamento
Modificare successivamente la larghezza del modulo.
- Larghezza: 78%
Spaziatura
E aggiungi un margine superiore e inferiore.
- Margine superiore: 10px
- Margine inferiore: 50 px
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
L'ultimo modulo di cui abbiamo bisogno nella seconda colonna è un modulo pulsante. Inserisci una copia a tua scelta.
Impostazioni dei pulsanti
Quindi, vai alla scheda Design e modella il pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 20 px
- Colore del testo del pulsante: # 3a0cf2
- Colore di sfondo del pulsante: #ffd800
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Abhaya Libre
Spaziatura
Aggiungi anche alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 60px
- Imbottitura destra: 60px
Clona riga due volte
Una volta che hai finito di aggiungere tutti i moduli, puoi andare avanti e clonare la riga due volte.
Modifica riga duplicata n. 1
Cambia il colore di sfondo del modulo di testo n. 1
Stiamo cambiando la tavolozza dei colori di entrambi i duplicati, iniziando dal primo. Apri il primo modulo di testo nella colonna 1 e cambia il colore di sfondo.
- Colore di sfondo: #00ffee
Cambia il colore del bordo superiore del modulo di testo n. 1
Modifica anche il colore del bordo superiore.
- Colore bordo superiore: #00e0c2
Cambia colore divisore
Quindi, usa il seguente codice colore per il divisore:
- Colore divisore: #00e0c2
Cambia il colore di sfondo del modulo del pulsante
E cambia il colore di sfondo del pulsante.
- Colore di sfondo del pulsante: #00ffee
Modifica riga duplicata #2
Cambia il colore di sfondo del modulo di testo n. 1
Passa alla seconda riga duplicata, apri il primo modulo di testo nella colonna 1 e cambia il colore di sfondo.
- Colore di sfondo: # 42ff21
Cambia il colore del bordo superiore del modulo di testo n. 1
Modifica anche il colore del bordo superiore.
- Colore bordo superiore: #1de524
Cambia colore divisore
Quindi, apri il modulo divisore e usa il seguente colore divisore:
- Colore divisore: #1de524
Cambia il colore di sfondo del modulo del pulsante
E, ultimo ma non meno importante, cambia il colore di sfondo del pulsante:
- Colore di sfondo del pulsante: # 42ff21
Crea contenuto espandibile
Aggiungi il dimensionamento di riga predefinito a tutte le righe
Ora che abbiamo personalizzato tutte le righe della nostra sezione, è il momento di rendere il contenuto espandibile. Per fare ciò, apri ciascuna delle righe e applica la seguente altezza massima:
- Altezza massima: 397 px
Aggiungi il ridimensionamento della riga al passaggio del mouse a tutte le righe
Modifica l'altezza massima al passaggio del mouse in "100%". Ciò consentirà alla riga di riprendere le sue dimensioni iniziali.
- Altezza massima: 100%
Modifica overflow per tutte le righe
Assicurati di nascondere anche gli overflow di ciascuna delle righe e il gioco è fatto!
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come creare note adesive con note espandibili utilizzando solo le opzioni integrate di Divi. Questo è un modo creativo e giocoso per mostrare i servizi sul tuo sito web. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.