Come creare un design di intestazione elegante con parallelogrammi in Divi

Aggiungere un nuovo ed elegante design di intestazione alla tua pagina è un modo efficace per stupire i tuoi visitatori. E progettare uno sfondo unico per la tua intestazione è un ottimo punto di partenza. In questo tutorial, ti mostrerò come utilizzare Divi per aggiungere parallelogrammi al design dell'intestazione utilizzando sfondi sfumati in modi creativi. Questo aggiunge un bel elemento materico al design che si discosta dal tradizionale layout della scatola.

Iniziamo.

Sbirciata

Ecco uno sguardo al design che costruiremo.

Cosa ti servirà

Per creare questo design, dovrai fare le cose principali:

1. Il tema Divi
2. The Interior Design Company Informazioni sul layout di pagina (disponibile all'interno di Divi Builder)

Imposta la pagina

Per questo tutorial, userò l'Interior Design Company About Page Layout su una nuova pagina. Vai alla dashboard di WordPress e vai su Pagine > Aggiungi nuovo. Quindi dai un titolo alla tua pagina e fai clic per utilizzare Divi Builder. Quindi fare clic sul pulsante per distribuire il generatore visivo. Seleziona l'opzione "Scegli un layout predefinito". Quindi trova e seleziona il pacchetto di layout di interior design. Scegli il layout di pagina Informazioni e infine fai clic su "Usa questo layout".

Una volta che la pagina è stata caricata nella pagina, sei pronto per iniziare la modifica.

Rimuovi l'imbottitura superiore della sezione e sostituisci l'immagine di sfondo

Questo è un primo passo facile. Tutto quello che devi fare è passare il mouse sopra la parte superiore della sezione dell'intestazione superiore della pagina. Vedrai che l'attuale imbottitura superiore è impostata al 10%. Trascina semplicemente l'imbottitura fino allo 0%. Oppure puoi sempre accedere alle impostazioni della pagina e impostare anche l'imbottitura superiore personalizzata su 0%.

A questo punto puoi anche cambiare l'immagine di sfondo, ma non è necessario. Per farlo, vai alle impostazioni della sezione e cambia l'immagine di sfondo nella scheda contenuto. Quindi elimina il gradiente di sfondo. Ciò contribuirà a rendere il testo (che sarà bianco) più leggibile sui dispositivi mobili poiché ci sarà del testo che si sovrappone all'immagine di sfondo.

Regola le dimensioni e l'imbottitura della riga

Quindi, vai alle impostazioni della riga e nella scheda Progettazione, aggiorna quanto segue:

Usa larghezza personalizzata: S
Larghezza personalizzata: 100%
Imbottitura personalizzata: 0px in alto, 10vw in basso

Aggiungi sfondo sfumato a riga e colonna

Per creare questo design elegante, sovrapporremo sfondi sfumati con diverse posizioni di inizio e fine. Per prima cosa dobbiamo aggiungere uno sfondo sfumato alla riga e poi alla colonna.

Vai alle impostazioni della riga nella scheda contenuto e aggiorna quanto segue:

Colore sfondo sfumato sinistro: #1a1a1a
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Direzione del gradiente: 45 gradi
Posizione di partenza: 60%
Posizione finale: 0%

Colonna 1 Gradiente di sfondo a sinistra Colore: rgba (244,88,63,0.83)
Colonna 1 Gradiente di sfondo a destra Colore: rgba (255,255,255,0)
Direzione del gradiente della colonna: 45deg
Posizione di partenza della colonna: 66%
Posizione di fine colonna: 0%

Il gradiente arancione che abbiamo aggiunto alla colonna verrà utilizzato per il primo parallelogramma nel nostro design dell'intestazione. Per creare il parallelogramma dobbiamo accorciare il gradiente arancione con un lato sinistro che è angolato a 45 gradi in modo che corrisponda al lato destro. Lo faremo aggiungendo un gradiente al modulo di invito all'azione.

Regolazione della dimensione del testo e della spaziatura del modulo di invito all'azione

Prima di aggiungere il nostro gradiente di sfondo al modulo di invito all'azione, impostiamo prima la spaziatura e gli stili di testo.

Vai alle impostazioni del modulo di invito all'azione e aggiorna quanto segue nella scheda Progettazione:

Orientamento del testo: a sinistra
Colore del testo: chiaro
Dimensione del testo del titolo: 4.5vw (desktop), 42px (tablet)
Colore del testo del pulsante: #1a1a1a
Colore di sfondo del pulsante: #ffffff
Larghezza: 100%
Ripristina margini
Imbottitura personalizzata (desktop): 10vw in alto, 5% a sinistra, 45% a destra
Imbottitura personalizzata (tablet): 38% a destra
Imbottitura personalizzata (smartphone): 5% a destra

Ora possiamo aggiungere il nostro gradiente di sfondo al nostro modulo. Per accelerare questo processo, vai alle impostazioni della riga e fai clic con il pulsante destro del mouse e copia il gradiente di sfondo della riga.

Quindi vai alle impostazioni del modulo di invito all'azione, nella scheda contenuto, fai clic con il pulsante destro del mouse e incolla il gradiente di sfondo nel modulo. Quindi regolare la posizione di partenza al 47%.

Come puoi vedere, questo crea l'effetto di un lungo rettangolo angolato che si sovrappone allo sfondo sfumato scuro per un elemento di design unico.

Questo sarebbe un ottimo design così com'è ora, ma andiamo avanti e diventiamo ancora più creativi aggiungendo un parallelogramma aggiuntivo che si sovrappone alla parte inferiore della nostra riga.

Creazione di un parallelogramma aggiuntivo utilizzando moduli di testo vuoti

Il concetto per questa fase finale del design dell'intestazione prevede la creazione di due moduli di testo affiancati ciascuno con un gradiente personalizzato che, se combinati, mostrano una singola "scatola" con i lati ugualmente angolati a destra e a sinistra. Per fare ciò dobbiamo prima creare una riga a una colonna per contenere i nostri moduli di testo. Quindi possiamo dimensionare e posizionare i nostri moduli per stare fianco a fianco.

Aggiungi una riga a una colonna direttamente sotto la sezione contenente il nostro modulo di invito all'azione all'interno della stessa sezione.

Quindi aggiungi un modulo di testo alla colonna di sinistra e aggiorna il modulo di testo come segue:

Cancella tutto il contenuto nella casella del contenuto (utilizzeremo un modulo di testo vuoto)
Colore sfondo sfumato sinistro: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: rgba (58,80,107,0.83)
Direzione del gradiente: 45 gradi
Posizione di partenza: 50%
Posizione finale: 0%

Ora salta sopra la scheda di progettazione e aggiorna quanto segue:

Altezza riga di testo: 0em (questo eliminerà qualsiasi spaziatura indesiderata)
Larghezza: 50%
Margine personalizzato: -8vw in alto, 0px in basso
Imbottitura personalizzata: 8vw in alto, 8vw in basso

Salva le impostazioni.

Dal visual builder, duplica il modulo e aggiorna le impostazioni del modulo di testo per il nuovo modulo come segue:

Passa il mouse sull'anteprima del gradiente di sfondo e fai clic sull'icona "Cambia gradiente" per cambiare i colori del gradiente da sinistra a destra.

Allineamento del modulo: a destra
Margine personalizzato: -16vw in alto, 0px in basso

Salva le impostazioni.

Ora che abbiamo allineato i nostri moduli, possiamo regolare le impostazioni delle righe per posizionare i nostri moduli e ridimensionarli per adattarli al design. Apri le impostazioni della riga e aggiorna quanto segue:

Allineamento riga: a sinistra
Usa larghezza personalizzata: S
Larghezza personalizzata: 45%
Margine personalizzato: 30% rimasto
Imbottitura personalizzata: 0px in alto, 0px in basso

Questo lo fa! Scopri i risultati finali.

Eccolo su tablet e smartphone.

Pensieri finali

Spero che questa tecnica di progettazione ti dia una piccola ispirazione su come puoi utilizzare le opzioni di sfondo sfumato di Divi per incorporare alcuni parallelogrammi eleganti nel tuo design di intestazione. E, naturalmente, questo design non si limita alle intestazioni. Sentiti libero di esplorare nuove aree in cui questo design funzionerà per te. Per ulteriore ispirazione, dai un'occhiata ad alcuni segreti di progettazione della griglia spezzata che potrebbero aiutarti lungo la strada.

Non vedo l'ora di sentirti nei commenti.

Saluti!