Divi: come creare un'intestazione globale appiccicosa

Vorresti creare un'intestazione appiccicosa con Divi ?

La creazione di intestazioni adesive procede senza intoppi dall'arrivo del temi, ma scopriamo che molte persone non sanno come crearli senza utilizzare codice aggiuntivo. Tuttavia, è abbastanza facile farlo anche grazie alle opzioni appiccicose di Divi.

In effetti, non solo è più semplice, ma questo metodo offre più possibilità di personalizzare il design.

Quindi ci prenderemo il tempo in questo tutorial per mostrarti come creare un'intestazione adesiva ultra personalizzata utilizzando le impostazioni Divi.

Panoramica

Prima di immergerci in questo tutorial, diamo un'occhiata al risultato che vogliamo ottenere.

crea un'intestazione appiccicosa in DIVI

Costruisci la struttura dell'elemento dell'intestazione

Crea un nuovo modello di intestazione globale

Accedi a Divi Theme Builder e inizia a creare una nuova intestazione globale o personalizzata.

Sezione 1 Parametri

Sfondo sfumato

Una volta nell'editor dei modelli, inizieremo costruendo la struttura dei nostri elementi di intestazione. Nella seconda parte di questo tutorial, ci concentreremo sull'applicazione delle varie impostazioni permanenti per completare il design dell'intestazione adesiva.

Nell'editor dei modelli, noterai una sezione. Apri questa sezione e applica uno sfondo sfumato.

Colore 1: #ffba60
Colore 2: #ffd6a0
Direzione del gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 50%

spaziatura

Quindi rimuovere tutti i margini interni (superiore e inferiore) per impostazione predefinita.

Vertice del margine interno: 0px
Margine interno inferiore: 0px

Aggiungi una nuova linea

Struttura della colonna

Per creare la nostra barra di intestazione superiore, aggiungeremo una nuova riga alla nostra sezione 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ì
Spaziatura delle colonne: 1
Larghezza massima: 95%
Larghezza massima: 2 pixel

spaziatura

Aggiungi anche margini interni personalizzati (in alto e in basso).

Vertice del margine interno: 15px
Margine interno inferiore: 15px

Elemento principale CSS

E per assicurarci che le colonne rimangano una accanto all'altra su schermi di dimensioni inferiori, aggiungeremo una riga di codice CSS all'elemento della riga principale nella scheda avanzata.

display: flex;

Aggiungi il modulo "Seguici sui social media" alla colonna 1

Aggiungi i social network preferiti

È ora di aggiungere moduli, iniziando con un modulo "Seguici sui social media" nella colonna 1. Aggiungi i social network di tua scelta insieme ai link corrispondenti.

Rimuovi il colore di sfondo da ogni social network

Continua rimuovendo ciascuno dei colori di sfondo dal social network individualmente.

Impostazioni delle icone

Quindi torna alle impostazioni generali del modulo e cambia il colore dell'icona nella scheda del design.

Colore dell'icona: #26333a

spaziatura

Aggiungi anche un margine superiore.

Margine superiore: 5 px

Aggiungi il modulo Button alla colonna 2

Aggiungi testo al pulsante

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo Button. Aggiungi un testo a tua scelta.

Aggiungi un collegamento

Quindi aggiungi un collegamento.

Allineamento dei pulsanti

Quindi, passa alla scheda Stile e modifica l'allineamento dei pulsanti.

Allineamento pulsanti: a destra

Impostazioni dei pulsanti

Personalizziamo anche il pulsante.

Usa stili personalizzati per Button: Sì
Dimensione testo pulsante: 14px
Colore testo pulsante: #26333a
Larghezza bordo pulsante: 2px
Colore bordo pulsante: #26333a
Raggio bordo pulsante: 0 pixel

Pulsanti spaziatura lettere: 4px
Pulsante Luce soffusa: testo in grassetto
Pulsante stile copia: maiuscolo
Pulsante Mostra: sì

spaziatura

E completeremo le impostazioni del modulo aggiungendo i margini interni (in alto e in basso) alle impostazioni di spaziatura.

Vertice del margine interno: 10px
Margine interno inferiore: 10px