Nascondere elegantemente la tua copia sotto i divisori di sezione in un design straordinario con Divi

Le opzioni integrate di Divi ti consentono di utilizzare una particolare impostazione di progettazione per più scopi, il che a sua volta aiuta a stimolare la creatività. Oggi utilizzeremo i divisori di sezione in un modo unico per nascondere elegantemente la copia del tuo sito web. Questo è un ottimo modo per aggiungere ulteriore interazione alla tua pagina senza la necessità di codice personalizzato. Ricreeremo un bellissimo esempio da zero e potrai anche scaricare gratuitamente il file JSON dell'esempio.

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 GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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 i 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!

Iniziamo a ricreare!

Aggiungi la sezione n. 1

La prima cosa che devi fare è aggiungere una nuova sezione normale alla pagina su cui stai lavorando.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Il primo modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti H2.

Impostazioni testo H2

Passa alla scheda Design e modifica le impostazioni del testo H2.

• Intestazione 2 Carattere: Display Playfair
• Intestazione 2 Peso del carattere: normale
• Intestazione 2 Allineamento del testo: Centro
• Titolo 2: Dimensione testo: 70 px (desktop), 40 px (tablet), 30 px (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il secondo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Stiamo anche cambiando il colore della linea nella scheda Design.

• Colore linea: #000000

Dimensionamento

Passa alle impostazioni di dimensionamento e applica le seguenti impostazioni:

• Peso del divisore: 5px
• Larghezza: 27%
• Allineamento del modulo: Centro

Aggiungi sezione #2

Colore di sfondo

Aggiungi la seconda sezione normale alla tua pagina, apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #f7f7f7

traboccamento

Assicurati di nascondere anche l'overflow della sezione nella scheda Avanzate. Ciò assicurerà che nulla superi il contenitore della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

transizioni

Più avanti in questo post, creeremo una transizione al passaggio del mouse. Per assicurarci che funzioni senza problemi, aumenteremo la durata della transizione nella scheda Avanzate.

• Durata della transizione: 800 ms

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione applicando le seguenti impostazioni:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H3

È ora di iniziare ad aggiungere moduli, iniziando con un modulo di testo. Inserisci alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Passa alla scheda Design e modifica le impostazioni del testo H3.

• Intestazione 3 Carattere: Display Playfair
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #000000
• Intestazione 3 Dimensioni testo: 3vw (desktop), 6vw (tablet), 7vw (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il secondo modulo di cui abbiamo bisogno in questa riga è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Cambia anche il colore del divisorio.

• Colore linea: #000000

Spaziatura

E aggiungi un margine superiore e inferiore personalizzato per creare spazio.

• Margine superiore: 2vw
• Margine inferiore: 2vw

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno è un altro modulo di testo. Aggiungi del contenuto del paragrafo a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Allineamento del testo: Centro
• Colore del testo: #777777
• Dimensione del testo: 0.8vw (desktop), 1.7vw (tablet), 2.2vw (telefono)
• Altezza riga di testo: 1,8 em

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine sinistro: 3vw (desktop), 7vw (tablet), 10vw (telefono)
• Margine destro: 3vw (desktop), 7vw (tablet e telefono)

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

Modificare l'allineamento del pulsante nella scheda Progettazione.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua applicando uno stile alle impostazioni del pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #000000
• Larghezza bordo pulsante: 1px
• Raggio bordo pulsante: 0px
• Carattere pulsante: display Playfair

Spaziatura

E aggiungi anche alcuni valori di spaziatura personalizzati.

• Margine superiore: 2vw
• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw
• Imbottitura sinistra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)

Impostazioni della sezione aggiuntiva

Divisore superiore predefinito

Una volta che hai finito di aggiungere tutti i moduli alla sezione, è il momento di passare attraverso alcune impostazioni aggiuntive della sezione. Apri le impostazioni della sezione, vai alla scheda Design e aggiungi il seguente divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisore: #e8e8e8
• Altezza divisore: 7000 px
• Capovolgimento divisore: verticale
• Disposizione dei divisori: in cima al contenuto della sezione

Divisore superiore sospeso

Modificare l'altezza del divisore al passaggio del mouse.

• Altezza divisore: 0px

Divisore inferiore

Aggiungi anche un divisore inferiore.

• Stile divisore: trova nell'elenco
• Colore divisore: #5c26ff
• Altezza divisore: 600 px
• Disposizione dei divisori: in cima al contenuto della sezione

Divisore inferiore al passaggio del mouse

E rimuovi l'altezza del divisore al passaggio del mouse.

• Altezza divisore: 0px

Spaziatura

Come puoi notare nell'anteprima di questo post, stiamo trasformando questa sezione in un cerchio. Per fare ciò, dovremo prima aggiungere alcuni margini personalizzati e valori di riempimento su diverse dimensioni dello schermo:

• Margine sinistro: 10vw (desktop), 11vw (tablet), 0vw (telefono)
• Margine destro: 47vw (desktop), 11vw (tablet), 0vw (telefono)
• Imbottitura superiore: 8vw (desktop), 15vw (tablet), 16vw (telefono)
• Imbottitura inferiore: 8vw (desktop), 15vw (tablet), 16vw (telefono)

Frontiera

Continua aggiungendo "50vw" a ciascuno degli angoli per trasformare la sezione in un cerchio. Stiamo anche aggiungendo un bordo utilizzando le seguenti impostazioni:

• Larghezza bordo: 1px
• Colore del bordo: rgba (255,255,255,0)

Confine al passaggio del mouse

Cambia il colore del bordo al passaggio del mouse.

• Colore bordo: #000000

Clona sezione due volte

Una volta completate tutte le impostazioni della sezione, puoi andare avanti e clonare la sezione due volte.

Modifica duplicato #1

Cambia colore divisore superiore

Modificheremo entrambi i duplicati di sezione, iniziando dal primo. Apri le impostazioni della sezione e cambia il colore del divisore superiore.

• Colore divisore: #5c26ff

Cambia colore divisore inferiore

Modifica anche il colore del divisore inferiore.

• Colore divisore: #ff3a5e

Cambia spaziatura

Quindi, vai alle impostazioni di spaziatura e assicurati che si applichino i seguenti valori:

• Margine superiore: -20vw (desktop), 0vw (tablet e telefono)
• Margine sinistro: 47vw (desktop), 11vw (tablet), 0vw (telefono)
• Margine destro: 10vw (desktop), 11vw (tablet), 0vw (telefono)

Modifica duplicato #2

Cambia colore divisore superiore

Apri le impostazioni del secondo duplicato e cambia il colore del divisore superiore.

• Colore divisore: #ff3a5e

Cambia colore divisore inferiore

Cambia anche il colore del divisore inferiore.

• Colore divisore: #e8e8e8

Cambia spaziatura

E modifica anche qui i valori di spaziatura.

• Margine superiore: -20vw (desktop), 0vw (tablet e telefono)
• Margine inferiore: 7vw
• Margine sinistro: 10vw (desktop), 11vw (tablet), 0vw (telefono)
• Margine destro: 47vw (desktop), 11vw (tablet), 0vw (telefono)

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 nascondere elegantemente la tua copia sotto i divisori delle sezioni. Questo è un ottimo modo per utilizzare alcune delle intuitive opzioni integrate di Divi in ​​un modo diverso da quello a cui sei abituato. Speriamo che questo tutorial ti ispiri a creare i tuoi design alternativi usando anche questa tecnica. 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.