Come creare una navigazione fissa a 4 angoli con Divi

Un design di navigazione unico può dare un po' di vantaggio a qualsiasi sito web. La navigazione fissa a 4 angoli, ad esempio, è un buon modo per offrire agli spettatori più opzioni per interagire con il design del tuo sito web. In effetti, aggiunge un altro livello al tuo design UX in tutto il sito.

In questo post, ti mostreremo come creare la tua navigazione fissa a 4 angoli. Spiegheremo come creare due stili leggermente diversi, ma questi sono solo la punta dell'iceberg. Poiché la navigazione è creata con gli elementi integrati di Divi, le possibilità di personalizzazione sono infinite.

Speriamo che questa idea ti ispiri a creare fantastici design di navigazione fissa a 4 angoli per i tuoi prossimi progetti Divi.

Iniziamo.

Anteprime

Diamo una rapida occhiata alla navigazione a 4 angoli che creeremo oggi. Il primo stile posiziona i pulsanti sul bordo dello schermo e l'altro ha un float interno.

Stile #1

Stile #2

Iscriviti al nostro canale Youtube

Crea una nuova pagina vuota

Apri una nuova pagina e prima di modificare con Divi, seleziona "Pagina vuota" negli attributi di pagina. Fatto ciò, abilita Divi Builder.

Carica il layout della pagina di destinazione della criptovaluta

Una volta in Divi Visual Builder, carica la pagina di destinazione del pacchetto di layout di criptovaluta dalla scheda Layout predefiniti.

2. Crea una nuova sezione con una riga a 4 colonne

Aggiungi una nuova sezione regolare con riga a 4 colonne

Per creare i 4 elementi di navigazione, abbiamo bisogno di una nuova sezione con una riga di 4 colonne. Scorri fino in fondo alla pagina e aggiungi una nuova sezione normale. Quindi, scegli una riga con 4 colonne di uguali dimensioni.

Rimuovi il riempimento predefinito della sezione

Prima di aggiungere moduli, assicurati di rimuovere il riempimento della sezione aggiungendo "0px" in alto e in basso. Inoltre, ricontrolla che la sezione non abbia un colore di sfondo o uno sfondo sfumato.

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

Aumenta l'indice Z

Vogliamo che questa sezione sia al di sopra di tutte le altre mentre scorriamo. Ecco perché dobbiamo aumentare il valore Z Index della sezione. Per farlo, apri la scheda Avanzate e vai alle impostazioni di visibilità e aumenta l'indice Z.

• Indice Z: 10

3. Regola il dimensionamento della riga

Successivamente, dobbiamo regolare le impostazioni di dimensionamento della riga. Apri la scheda Progettazione e regola le impostazioni di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: No
• Larghezza: 100%
• Larghezza massima: 100%

Rimuovi il riempimento predefinito della riga

Per assicurarti che non rimanga spazio nella parte inferiore della nostra pagina, rimuovi il riempimento predefinito della riga. Nella scheda Design, cambia gli input di Spaziatura su "0px" sia per il padding superiore che per quello inferiore.

Aggiungi moduli alle colonne.

Ora è il momento di aggiungere alcuni moduli a ciascuna colonna, partendo da sinistra verso destra.

• Colonna #1: Immagine
• Colonna n. 2: pulsante
• Colonna n. 3: Segui i social media
• Colonna n. 4: pulsante

4. Stile ogni colonna

Colonna n. 1 – Modulo immagine

Aggiungi un logo aziendale

Apri il modulo immagine nella colonna n. 1. Carica il tuo logo (larghezza di 220 px e altezza di 100 px). Assicurati che sia un'immagine trasparente in cui il logo è centrato.

Allinea il modulo

Vogliamo che il logo sia posizionato nell'angolo in alto a sinistra della nostra pagina, quindi dobbiamo allineare il modulo a sinistra. Apri la scheda Progettazione nel Modulo immagine e seleziona Allineamento immagine a sinistra.

• Allineamento: sinistra

Aggiungi CSS personalizzato per correggere la posizione del modulo

Per assicurarti che la posizione del modulo rimanga fissa, vai alla scheda Avanzate e aggiungi CSS personalizzato all'elemento principale.

position: fixed;
top: 0;
left: 0;

Colonna #2 – Pulsante

Aggiungi un pulsante

Ora, nella colonna n. 2, aggiungi un modulo pulsante.

Stile il pulsante

Nella scheda Contenuto, aggiungi il testo per il tuo pulsante.

• Contenuto-testo: il mio per Bitcoin

Quindi, nella scheda Progettazione, scegli Allineamento pulsante sinistro.

• Allineamento: sinistra

Successivamente, fai scorrere gli stili dei pulsanti personalizzati su sì e regola i valori di conseguenza:

• Stili pulsanti personalizzati: Sì
  • Dimensione del testo del pulsante: desktop; 25px, Tablet: 20px, Telefono:20px
  • Colore del testo del pulsante: bianco, #ffffff
  • Colore di sfondo del pulsante: gradiente
    • Colore superiore: # 1c076d, Colore inferiore: # 185475
    • Tipo di gradiente: lineare
  • Raggio bordo pulsante: 7 px
  • Carattere pulsante: Tantillium Web (lo stesso del layout)
  • Mostra icona pulsante: Sì
  • Icona del pulsante: cono stradale
  • Colore icona pulsante: bianco, #ffffff
  • Posizionamento dell'icona del pulsante: a destra

Aggiungi CSS personalizzato per correggere la posizione del modulo

Infine, apri la scheda Avanzate e aggiungi CSS personalizzato per fissare la posizione del modulo nell'angolo in basso a sinistra della pagina.

position: fixed;
bottom: 0;
left: 0;

Colonna n. 3 – Segui i social media

Aggiungi un modulo di follow sui social media

Alla terza colonna. Questa volta, avremo bisogno di un modulo di follow sui social media. Aggiungi tre social network a tua scelta.

Quindi, nella scheda Progettazione, scegli Allineamento modulo corretto.

• Allineamento: Destra

Stile le icone dei social media

Apri le impostazioni individuali del primo social network, vai alla scheda design e modifica le impostazioni dell'icona di conseguenza:

• Colore icona: bianco #ffffff
• Usa dimensione icona personalizzata: Sì
  • Dimensione carattere icona: desktop; 25px, Tablet: 20px, Telefono:20px
• Sfondo: nessuno

Copia e incolla gli stili degli oggetti

Torna alla finestra principale Segui social media, fai clic con il pulsante destro del mouse sul primo elemento e seleziona "Copia stili elemento". Quindi fai clic con il pulsante destro del mouse sui due social network rimanenti e incolla gli stili.

Aggiungi CSS personalizzato al modulo

Infine, nella scheda Avanzate, aggiungi il seguente codice CSS per far aderire il modulo all'angolo in alto a destra della pagina:

position: fixed; 
top: 0; 
right: 0;

Colonna #4 – Pulsante

Copia gli stili del modulo dal modulo n. 2 e regola

Per fare in modo che il pulsante nel Modulo #4 abbia lo stesso aspetto del pulsante nel Modulo #2, utilizzeremo l'opzione 'Copia Stili Modulo'. Innanzitutto, fai clic con il pulsante destro del mouse sul modulo pulsante nella colonna 2, fai clic su "Copia stili modulo" e quindi incollalo nel modulo pulsante nella colonna 4.

Ora è il momento di modificare le impostazioni nella scheda Contenuto. Innanzitutto, cambia il contenuto del testo.

• Testo: da “Mine for Bitcoin” a “Leggi il nostro blog”

Quindi, cambia l'allineamento dei pulsanti.

• Allineamento: da sinistra a destra

Infine, modifica il codice CSS personalizzato nella scheda Avanzate:

• Cambia il codice in:

position: fixed; 
bottom: 0; 
right: 0;

Risultato

5. Modifica il CSS personalizzato per ottenere il secondo esempio di stile

Nel primo esempio di stile, gli angoli sono attaccati agli angoli. Per ottenere il secondo stile, devi solo regolare il codice CSS per far fluttuare un po' i moduli angolari verso l'interno.

Regola semplicemente il CSS personalizzato nella scheda Avanzate di tutti e quattro i moduli

Modulo 1

position: fixed; 
top: 1vw; 
left: 1vw;

Modulo n. 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Modulo n. 3

position: fixed; 
top: 3vw; 
left: 2vw;

Modulo #4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Risultato finale

Conclusione

Questo tutorial sfiora solo la superficie di ciò che puoi fare con la navigazione fissa a 4 angoli utilizzando Divi. In definitiva, puoi scegliere qualsiasi modulo per ogni colonna, purché tu mantenga il CSS personalizzato che abbiamo fornito. Speriamo che questo tutorial creativo ti ispiri a creare la tua navigazione fissa a 4 angoli. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!