Vuoi creare uno sfondo unico e sorprendente con maschere e motivi di sfondo da Divi ?
La nuova funzione di maschere e modelli di sfondo di Divi è più comunemente usato per le sezioni di una pagina. Ma possiamo anche aggiungerli alle intestazioni!
In questo tutorial ti mostreremo come aggiungere maschere e motivi di sfondo a un modello di intestazione Divi utilizzando il costruttore temi.
È un ottimo modo per creare design di intestazione completamente unici per il tuo sito web.
Cominciamo.
Panoramica
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Vai al generatore di temi di Divi e inizia a creare un'intestazione globale
Dalla dashboard di WordPress, vai a Divi > Generatore di temi
Fare clic "Aggiungi intestazione globale"
selezionare "Crea intestazione globale".
Successivamente, puoi iniziare a progettare una nuova intestazione utilizzando Divi Builder.
Come aggiungere maschere e motivi di sfondo a un'intestazione Divi
Creazione dello sfondo della sezione con un colore e un motivo di sfondo
Leggi anche: Divi: come creare una sezione Testimonianze sotto forma di griglia
Per iniziare, apri le impostazioni della sezione esistente.
Sotto la scheda Contenuti, aggiorna le opzioni di sfondo con le seguenti impostazioni:
Colore di sfondo:
- Sfondo: #262d3f
Motivo di sfondo:
- Modello: Pillole
- Colore del modello: rgba (255,255,255,0.1)
- Dimensione del modello: dimensione personalizzata.
- Larghezza del motivo: 1px
Imbottitura
Sotto la scheda Design, aggiorna il riempimento della sezione come segue:
- Imbottitura (superiore e inferiore): 0px
Ciò ridurrà leggermente lo spazio verticale dell'intestazione.
Aggiungi una riga con il seguente layout di colonna
Aggiunto contenuto dell'intestazione del segnaposto (un menu e un pulsante)
Nella colonna di sinistra della riga, aggiungi un nuovo menu.
Seleziona un menu.
Quindi aggiungi un logo e utilizza le impostazioni per personalizzare il menu e il logo come desideri.
Nella colonna di destra, aggiungi un modulo pulsante e personalizzalo anche a tuo piacimento.
Creazione dello sfondo della linea con gradiente, maschera e motivo
Il gradiente
Apri le impostazioni della riga che contengono il menu e il pulsante. Quindi aggiorna le opzioni di sfondo con le seguenti impostazioni di sfondo:
Gradiente di sfondo:
- Gradient Stops 1 (50%): Clear
- Gradient Stops 2 (75%): #ff4c00
- Sterzo: 90 gradi
Cartamodello
- Modello: Pillole
- Colore del modello: rgba (38,45,63,0.48)
- Dimensione del modello: 1 pixel
- Spostamento verticale: 20px
Nota: l'offset verticale del motivo è impostato su 20 px perché nella sezione sopra la linea è presente un'imbottitura superiore di 20 px. Ciò garantisce che il motivo della sezione sia allineato con il motivo della riga.
Maschera di sfondo
- Maschera: Spina di pesce
- Colore maschera: #262d3f
NOTA: per le intestazioni, è meglio mantenere la dimensione della maschera impostata su "Estendi per riempire" in modo che copra lo spazio orizzontale senza compromettere il design della maschera.
Ultimi ritocchi alla linea
Guarda anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Per completare il design, aggiungeremo un raggio del bordo e alcune altre modifiche alla linea.
Il raggio, il confine e la spaziatura del confine
Sotto la scheda Design, aggiorna il riempimento come segue:
- Imbottitura (superiore e inferiore): 5px
Quindi dai alla riga un bel angolo arrotondato per un elemento di design in più.
- Angoli arrotondati: 50px
- Larghezza bordo sinistro: 50px
- Colore bordo sinistro: #262d3f
Dobbiamo dare un bordo al lato sinistro della riga perché il bordo quadrato della maschera traboccherà dalla riga nonostante gli angoli arrotondati.
Risultato finale
Vediamo il risultato finale.
Il gradiente è un po' sottile, quindi ecco come appare.
Ed ecco il design dell'intestazione desktop e mobile.
Scarica DIVI ora!!!
Conclusione
Il design dello sfondo dell'intestazione è solo la punta dell'iceberg. C'è molto da esplorare da fare con le opzioni di sfondo disponibili in Divi.
Ci auguriamo che questo tutorial ti abbia aiutato a capire come le maschere e i modelli di sfondo di Divi possono lavorare insieme per creare un design di sfondo unico per le tue intestazioni.
Sentiti libero di sperimentare più combinazioni di design di sfondo per adattarle al tuo design. sito web o il tuo prossimo progetto.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
