Come creare design adesivi personalizzati "Back to Top" con Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di design Divi in ​​corso, ti mostreremo come creare design personalizzati appiccicosi back to top con Divi e il Green Energy Layout Pack. Questa tecnica ti aiuterà a migliorare l'esperienza dell'utente sulle tue pagine sfruttando le opzioni integrate di Divi sul lato del design delle cose. Speriamo che questo tutorial ti ispiri a creare la tua alternativa per tornare ai migliori design e usarli sul tuo prossimo sito web!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato di questo tutorial.

GIF

Esempio 1

Esempio #2

Esempio #3

1. Aggiungi scorrimento uniforme all'HTML della pagina

Carica la pagina di destinazione di Green Energy in una nuova pagina

La prima cosa che devi fare è creare una nuova pagina e caricare la pagina di destinazione di Green Energy Layout Pack.

Apri le impostazioni della pagina

Aprire le impostazioni della pagina facendo clic sull'icona contrassegnata nella schermata di stampa di seguito:

Aggiungi scorrimento uniforme alla casella CSS personalizzata

Passa alla scheda Avanzate e aggiungi un comportamento di scorrimento uniforme all'intera pagina aggiungendo il seguente codice CSS alla casella CSS personalizzato:

html {
scroll-behavior: smooth;
}

2. Aggiungi l'ID CSS alla sezione Hero

Apri la sezione degli eroi

Il design back to top reindirizzerà i visitatori alla sezione degli eroi. Per riuscirci, dovrai prima aprire le impostazioni della sezione degli eroi.

Aggiungi ID CSS

Quindi, vai alla scheda Avanzate e aggiungi un ID CSS alla sezione. Più avanti in questo post, aggiungeremo un link di ancoraggio che condurrà i visitatori a questa sezione.

• ID CSS: sezione-1

3. Aggiungi una nuova sezione in fondo alla pagina con il design "Torna all'inizio"

Passaggi generali

Aggiungi una nuova sezione normale in fondo alla pagina

Come puoi notare nell'anteprima di questo post, ricreeremo tre diversi esempi di design. Per semplificare il processo, inizieremo prima con alcuni passaggi generali e ci concentreremo su ogni esempio di design individualmente più avanti nel post. Aggiungi una nuova sezione normale in fondo alla pagina.

Spaziatura

Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Aggiungi link di ancoraggio

Non appena qualcuno fa clic sull'intera riga, vogliamo che venga reindirizzato alla parte superiore della pagina. Per fare ciò, aggiungeremo un collegamento che reindirizza alla sezione dell'eroe della pagina.

• URL collegamento riga: tuositoweb.com/page/#section-1

Allineamento delle righe

Stiamo anche posizionando la riga sul lato destro del contenitore della sezione.

• Allineamento riga: a destra

Posizione fissa

Successivamente, risolviamo l'intera riga andando alla scheda Avanzate della riga e aggiornando le seguenti opzioni di posizione:

• Posizione: fissa
• Offset verticale: 30px
• Offset orizzontale: 30px
• Indice Z: 99

Oltre a fissare la riga, ci assicuriamo che la riga si sovrapponga a tutto il contenuto della pagina aumentando l'indice z.

Ricrea l'esempio di progettazione n. 1

Impostazioni riga

Cambia la struttura della colonna

Ora che abbiamo seguito tutti i passaggi generali, ricreeremo i tre diversi esempi che hai potuto vedere all'inizio di questo post. Cominciamo dal primo! Modificare la struttura della colonna della riga:

Colore di sfondo

Continua aprendo le impostazioni della riga e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Dimensionamento

Passa alla scheda Design e modifica le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: 1
• Larghezza: 9vw (desktop), 23vw (tablet), 35vw (telefono)

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 2.5vw (desktop), 6vw (tablet), 10vw (telefono)
• Imbottitura inferiore: 2.5vw (desktop), 6vw (tablet), 10vw (telefono)
• Imbottitura sinistra: 1vw (Desktop), 2vw (Tablet), 4vw (Telefono)
• Imbottitura destra: 1vw (Desktop), 2vw (Tablet), 4vw (Telefono)

Frontiera

Continua aggiungendo "10 px" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

E aggiungi un'ombra di scatola usando le seguenti impostazioni:

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Schermo

Per assicurarci che le colonne rimangano l'una accanto all'altra su tutte le dimensioni dello schermo, aggiungeremo un'ulteriore riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo di testo alla prima colonna con un contenuto a tua scelta.

Impostazioni testo

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

• Carattere del testo: Arial
• Peso del carattere del testo: grassetto
• Allineamento del testo: a destra
• Colore del testo: #000000
• Dimensione del testo: 1.1vw (desktop), 3vw (tablet), 4.4vw (telefono)
• Spaziatura delle lettere del testo: -1px
• Altezza riga di testo: 1em

Aggiungi modulo di testo alla colonna 2

Aggiungi simbolo

Passa alla seconda colonna e aggiungi anche lì un modulo di testo. Aggiungi il simbolo '▲' alla casella del contenuto.

Impostazioni testo

Ultimo ma non meno importante, vai alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Allineamento del testo: Centro
• Colore del testo: #000000
• Dimensione del testo: 3vw (desktop), 8vw (tablet), 12vw (telefono)
• Altezza riga di testo: 0,6 em

Ricrea l'esempio di progettazione n. 2

Impostazioni riga

Dimensionamento

Al secondo esempio! Apri le impostazioni della riga e modifica la larghezza della riga.

• Larghezza: 7%

Spaziatura

Passa alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo di testo alla colonna

Aggiungi simbolo

Continua aggiungendo un modulo di testo alla riga e inserisci il simbolo '↑'.

Impostazioni testo

Vai alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Allineamento del testo: Centro
• Colore del testo: #000000
• Dimensione del testo: 56px
• Altezza riga di testo: 1em

Spaziatura

Successivamente, aggiungeremo un'imbottitura personalizzata superiore e inferiore.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 50 px

Frontiera

Passa alla scheda design e aggiungi "50vw" a ciascuno degli angoli. Aggiungi anche un bordo utilizzando le seguenti impostazioni:

• Larghezza bordo: 3px
• Colore bordo: #000000

Ricrea l'esempio di progettazione n. 3

Impostazioni riga

Dimensionamento

Al prossimo e ultimo esempio! Apri le impostazioni della riga e modifica la larghezza.

• Larghezza: 4% (Desktop), 10% (Tablet), 15% (Telefono)

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Scatola ombra

Aggiungi un'ombra personalizzata alla riga utilizzando le seguenti impostazioni:

• Forza di diffusione dell'ombra della scatola: 4px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo di testo alla colonna

Aggiungi simbolo

L'unico modulo di cui abbiamo bisogno per questo esempio di progettazione è un modulo di testo. Aggiungi '^' alla casella del contenuto.

Impostazioni testo

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

• Carattere del testo: Open Sans
• Peso del carattere del testo: Ultra grassetto
• Allineamento del testo: Centro
• Colore del testo: #4359e9
• Dimensione del testo: 56px
• Altezza riga di testo: 1em

• Colore ombra del testo: #35d764

Spaziatura

Continua andando alle impostazioni di spaziatura e aggiungendo un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 20px

Frontiera

Ultimo ma non meno importante, aggiungi un bordo al modulo di testo e il gioco è fatto!

• Larghezza bordo: 3px
• Colore del bordo: #4359e9

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.

GIF

Esempio 1

Esempio #2

Esempio #3

Pensieri finali

In questo tutorial sui casi d'uso, ti abbiamo mostrato come creare design personalizzati back to top con Divi. Abbiamo aggiunto uno scorrimento fluido alle nostre pagine, assegnato un ID di sezione alla sezione dell'eroe e collegato una riga fissa alla sezione dell'eroe. Questo tutorial fa parte della nostra iniziativa di progettazione Divi in ​​corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. 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.