Come creare titoli di sezioni permanenti con Divi

Il modo in cui progetti le tue pagine è un riflesso diretto del tuo marchio. Ecco perché a un certo punto del tuo brainstorming di progettazione, potresti voler trovare e aggiungere elementi di design unici al tuo sito web che ti aiuteranno a generare uno schema in tutte le pagine. Un modo unico per evidenziare l'identità del tuo sito Web è utilizzare titoli di sezione appiccicosi. Questi titoli di sezioni permanenti seguiranno il comportamento di navigazione dei tuoi visitatori rimanendo nella parte superiore del browser. In questo tutorial, ti mostreremo come creare titoli di sezioni permanenti utilizzando le opzioni permanenti di Divi. I titoli delle sezioni permanenti saranno meno enfatizzati una volta che i tuoi visitatori scorreranno, ma saranno abbastanza visibili da consentire loro di riconoscere la sezione in cui si trovano. Potrai anche scaricare gratuitamente il file JSON!

Andiamo 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 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 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!

Iscriviti al nostro canale Youtube

1. Crea un progetto di sezione

Aggiungi nuova sezione

Spaziatura

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica il riempimento superiore e inferiore.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Aggiungi riga n. 1

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 modifica le impostazioni di dimensionamento come segue:

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Ora aggiungi un modulo di testo alla colonna della riga e inserisci del contenuto H2 a tua scelta.

Impostazioni testo H2

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:

• Intestazione 2 Carattere: Poppins
• Peso carattere titolo 2: semi grassetto
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #000000
• Intestazione 2 Dimensione del testo:
  • Desktop: 20vw
  • Tablet e telefono: 28vw

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga subito sotto la precedente utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

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

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Quindi, aggiungi un primo modulo di testo alla colonna 2 con alcuni contenuti descrittivi a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Colore del testo: #000000
• Dimensione del testo:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefono: 5vw
• Spaziatura delle lettere del testo: -0.1vw
• Altezza riga di testo: 1,6 em

Dimensionamento

Modifica anche le impostazioni di dimensionamento su schermi di diverse dimensioni.

• Larghezza:
  • Desktop: 70%
  • Tablet e telefono: 90%
• Allineamento del modulo: Centro

Aggiungi modulo immagine alla colonna 2

Carica immagine

Al modulo successivo, che è un modulo immagine. Carica un'immagine a tua scelta.

Dimensionamento

Passa alla scheda di progettazione del modulo e forza l'intera larghezza sull'immagine.

• Forza intera larghezza: Sì

Spaziatura

Aggiungi anche un margine superiore.

• Margine superiore: 100 px

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Successivamente, abbiamo un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Modifica di conseguenza le impostazioni dei pulsanti del modulo:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante:
  • Desktop: 1.5vw
  • Tablet: 2.5vw
  • Telefono: 3.5vw
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #f6223e
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px

• Carattere pulsante: Poppins
• Mostra icona pulsante: Sì
• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No

Spaziatura

E completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore:
  • Desktop e tablet: 3%
  • Telefono: 5%
• Imbottitura inferiore:
  • Desktop e tablet: 3%
  • Telefono: 5%
• Imbottitura sinistra:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefono: 12vw
• Imbottitura destra:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefono: 12vw

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto elenco puntato

Il prossimo e ultimo modulo che aggiungeremo a questa colonna è un altro modulo di testo. Aggiungi gli elementi dell'elenco di tua scelta alla casella del contenuto.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Colore del testo: #000000
• Dimensione del testo:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefono: 5vw
• Spaziatura delle lettere del testo: -0.1vw
• Altezza riga di testo: 1,6 em

Impostazioni testo elenco ordinato

Apportare anche alcune modifiche alle impostazioni del testo dell'elenco ordinato.

• Colore testo elenco ordinato: #ff2340
• Altezza della riga dell'elenco ordinato: 1,6 em
• Tipo di stile elenco ordinato: alto-romano
• Stile elenco ordinato Posizione: esterno

Aggiungi il colore del testo nero agli elementi dell'elenco singolarmente nella casella del contenuto

Quindi, riporteremo gli elementi in nero navigando nella casella del contenuto e aggiungendo manualmente un colore di testo nero a ciascuno degli elementi dell'elenco.

Dimensionamento

Successivamente, modificheremo le impostazioni di dimensionamento su diverse dimensioni dello schermo.

• Larghezza:
  • Desktop: 70%
  • Tablet e telefono: 90%
• Allineamento del modulo: Centro

Spaziatura

Applicheremo anche alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura del modulo.

• Margine superiore: 50 px
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

2. Applicare l'effetto adesivo al titolo della sezione

Aggiungi un effetto appiccicoso alla riga

Ora che abbiamo creato le basi del nostro design, è il momento di realizzare l'effetto che hai potuto vedere nell'anteprima di questo post. Per fare ciò, trasformeremo tutta la nostra prima riga appiccicosa aprendo le impostazioni della riga, andando alla scheda Avanzate e applicando le seguenti impostazioni:

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: sezione
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti

Modifica indice riga Z

Per assicurarci che la riga adesiva rimanga al di sotto della seconda riga nel nostro progetto, assegneremo un indice az di "1" alla nostra riga adesiva. Durante lo scorrimento, vedrai la riga adesiva e il suo modulo di testo andare sotto i moduli della seconda riga.

• Indice Z: 1

Aggiungi modalità di fusione colonna 2 (riga n. 2)

Tuttavia, come puoi notare nell'anteprima di questo post, il titolo della sezione adesiva è sempre visibile. Per ottenere quell'effetto, aggiungeremo un modulo di fusione alla seconda colonna della nostra seconda riga. Ciò aiuterà a fondere la riga adesiva e i moduli nella seconda riga, pur mantenendo un indice z basso per la riga adesiva.

• Modalità di fusione: Moltiplica

Modifica le impostazioni del testo appiccicoso H2

Applicheremo anche alcuni stili appiccicosi al nostro modulo di testo nella riga n. 1. Inizia cambiando il colore del testo H2 in uno stato appiccicoso e applica anche un'ombra di testo personalizzata.

• Colore del testo appiccicoso H2: #ffffff
• Intestazione 2 Ombra del testo: seconda opzione (vedere la schermata di stampa sotto)
• Colore ombra testo titolo 2:
  • Predefinito: rgba(0,0,0,0)
  • Appiccicoso: rgba(0,0,0,0.08)

Cambia la spaziatura del modulo di testo appiccicoso

Cambieremo anche la posizione del modulo usando un margine sinistro adesivo negativo nelle impostazioni di spaziatura

• Margine sinistro permanente: -35%

Aumenta la durata della transizione del modulo di testo

E per assicurare una transizione fluida, aumenteremo la durata della transizione nella scheda Avanzate.

• Durata della transizione: 500 ms

3. Sezione Riutilizzo

Clona sezione

Ora che abbiamo una sezione completata, incluso il titolo della sezione permanente, possiamo riutilizzare l'intera sezione tutte le volte che vogliamo clonandola.

Cambia il contenuto del titolo

Assicurati di modificare il contenuto del titolo nella prima riga.

Abbina la dimensione del testo alla lunghezza del carattere

A seconda di quanti caratteri ha il tuo nuovo titolo H2, potresti voler regolare la dimensione del testo dell'intestazione 2.

Cambia tutti gli altri contenuti e immagini

E, naturalmente, dovrai modificare anche tutti gli altri contenuti nella sezione dei duplicati. Questo è tutto!

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 essere creativo con le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come creare titoli di sezioni permanenti che seguono i tuoi visitatori durante il design che stai creando. Questo effetto conferisce al tuo design una dimensione extra e una transizione senza soluzione di continuità. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a 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.