Sovrapposizione della tipografia per creare 5 design di intestazione unici in Divi

La tipografia impilata è una tecnica semplice ed efficace per creare bellissimi disegni di titoli in Divi. La tipografia viene spesso utilizzata rigorosamente come elemento di design astratto in modi che non contribuiscono realmente al contenuto letto dai motori di ricerca. Ma puoi anche essere creativo con la progettazione di intestazioni reali (h1, h2, ecc.) Con alcune tecniche Divi.

In questo tutorial, userò Divi per creare 5 diversi design di intestazioni con caratteri sovrapposti. Si spera che sarai in grado di utilizzare questi disegni come ispirazione per i tuoi progetti di intestazione.

Iniziamo.

Sbirciata

Ecco uno sguardo ai 5 modelli.

Design #1

Disegno #2

Disegno #3

Disegno #4

Disegno #5

Iniziare

Stiamo per costruire questi progetti da zero. Quindi, per iniziare, crea una nuova pagina, assegna un titolo alla tua pagina e distribuisci Visual Builder. Seleziona l'opzione "Costruisci da zero" e sei pronto per iniziare a costruire.

Al fine di semplificare il processo di creazione di ciascuno dei 5 design, duplicherò le sezioni per ottenere un vantaggio sul prossimo design. Quindi sarebbe meglio creare questi disegni in ordine iniziando dal primo.

Design titolo n. 1

Per questo primo disegno, ti mostrerò come impilare verticalmente il testo dell'intestazione e centrarlo al centro della riga. Aggiungerò anche due livelli di gradiente (uno sulla sezione e uno sulla riga) sopra l'immagine di sfondo per dare una sovrapposizione bianca semitrasparente equilibrata che si fonde perfettamente con gli sfondi delle pagine bianche. Il risultato è sottile ma molto unico e pulito.

Prima di aggiungere il nostro modulo di testo, prendiamoci cura delle impostazioni della sezione e della riga. Ciò renderà la regolazione del modulo molto più semplice in seguito.

Vai alle impostazioni della sezione e aggiorna quanto segue:

Aggiungi un'immagine di sfondo (larga almeno 1920 px)
Colore sfondo sfumato sinistro: #ffffff
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Posiziona il gradiente sopra l'immagine di sfondo: S

Successivamente, aggiorna le impostazioni della riga come segue:

Colore sfondo sfumato sinistro: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: #ffffff
Larghezza personalizzata: 100%
Imbottitura personalizzata: 0px in alto, 0px in basso

Ora possiamo aggiungere il nostro modulo di testo alla colonna centrale della nostra riga di tre colonne. Quindi aggiorna le impostazioni del modulo di testo come segue:

Sostituisci il contenuto fittizio nella casella del contenuto con un'intestazione h2 che recita "design" in questo modo:

<h2>design</h2>

Quindi aggiorna il resto delle impostazioni come segue:

Titolo 2: Il Cairo
Intestazione 2 Peso del carattere: normale
Stile carattere titolo 2: maiuscolo (TT)
Intestazione 2 Dimensione testo: 8vw
Larghezza: 58% (desktop), 16% (tablet), 18% (smartphone)
Allineamento del modulo: Centro
Margine personalizzato: -10vw in alto, -10vw in basso

I valori di larghezza personalizzati combinati con la dimensione del testo dell'intestazione 8vw sono la chiave per realizzare questo design. La larghezza personalizzata comprime il testo in modo che ogni lettera si sovrapponga l'una sull'altra. Il valore percentuale della larghezza cambia drasticamente sul tablet perché la dimensione della colonna che contiene il modulo di testo passa da 1/3 a larghezza intera. L'impostazione del testo dell'intestazione su un'unità di lunghezza vw (larghezza della finestra) consentirà al testo di adattarsi perfettamente alle dimensioni della finestra del browser.

Infine, finiamo il disegno con un bordo sul lato destro e sinistro.

Larghezza bordo destro: 4px
Larghezza bordo sinistro: 4px

Questo è il risultato finale.

Design titolo #2

Per questo prossimo esempio, modificherò leggermente il design in modo che il testo dell'intestazione sia spezzato a metà e impilato invece che ogni lettera venga impilata individualmente. Aggiungerò anche un sottotitolo sotto il titolo principale per dare un'altra occhiata.

Nella casella del contenuto aggiungi la seguente intestazione h3:

<h3>our process</h3>

Quindi aggiungi uno sfondo bianco al modulo:

Colore di sfondo: #ffffff

Nella scheda Progettazione, aggiorna quanto segue:

Intestazione 2 Dimensione del testo: 10vw
Larghezza: 100% (desktop), 32% (tablet), 33% (smartphone)
Intestazione 3 Font: Ubuntu Condensed
Intestazione 3 Allineamento del testo: Centro
Titolo 3 Dimensioni testo: 32 pixel (desktop), 20 pixel (tablet), 16 pixel (smartphone)

Quindi aggiorna la spaziatura per il modulo di testo per renderlo più reattivo sui dispositivi mobili:

Margine personalizzato (tablet): -5vw superiore, -10vw
Margine personalizzato (smartphone): -5vw Superiore, -12vw

Ora elimina il gradiente di sfondo nella sezione e nella riga.

Quindi aggiungi un po' di riempimento alla tua riga aggiornando la seguente impostazione di riga:

Imbottitura personalizzata (desktop): 5vw in alto, 5vw in basso
Imbottitura personalizzata (tablet): 0vw in alto, 0vw in basso

Questo è il risultato finale.

Design titolo n. 3

Questa volta sposteremo l'intestazione a sinistra e torneremo ad impilare ogni lettera verticalmente. Quindi cambierò il carattere e darò alla riga un bordo corrispondente per completare i bordi del modulo.

Duplica la seconda sezione del disegno e quindi aggiorna le impostazioni del modulo come segue:

Eliminare prima l'intestazione h3 nella casella del contenuto.

Intestazione 2 Font: Ubuntu Condensed
Intestazione 2 Dimensione testo: 6vw
Larghezza: 54% (desktop), 16,4% (tablet), 17,5% (smartphone)
Allineamento del modulo: Sinistra (predefinito)

Per regolare per i dispositivi mobili, aggiorna la seguente spaziatura:

Margine personalizzato (tablet): -15vw inferiore
Margine personalizzato (smartphone): -17vw in basso

Ora vai alle impostazioni della riga e aggiorna quanto segue per ottenere la spaziatura corretta.

Imbottitura personalizzata: 2vw in alto, 2vw in basso, 10vw a sinistra

Quindi aggiungi un bordo alla riga per completare il bordo del modulo.

Larghezza bordo superiore: 4px
Larghezza bordo inferiore: 4px

Ora tutto ciò che resta da fare è trascinare il nostro modulo nella colonna di sinistra della riga.

controlla il risultato finale.

Design titolo #4

Per l'ultimo disegno di intestazione, renderò l'intestazione impilata completamente allineata a sinistra e quindi aggiungerò un po' di colore e un effetto ombra cool box.

Innanzitutto aggiorna le impostazioni della riga per eliminare il padding sinistro.

Quindi aggiorna le impostazioni del modulo di testo per includere quanto segue:

Colore di sfondo: #5b7796
Colore del testo: chiaro
Titolo 2: Il Cairo
Intestazione 2 Stile carattere: predefinito
Intestazione 2 Dimensione del testo: 10vw

Dimensione del testo del testo: 5vw
Imbottitura personalizzata: 2vw in alto, 2vw in basso, 4vw a sinistra, 4vw a destra

Ripristina gli stili di bordo predefiniti, quindi aggiorna le nuove impostazioni del bordo come segue:

Larghezza bordo destro: 0,2 em
Colore bordo destro: #ffffff

Larghezza bordo inferiore: 0,2 em
Colore bordo destro: #ffffff

Ora, come puoi notare, il valore 0.2em per il bordo può sembrare piccolo. Questo perché il valore em si basa sul valore del carattere del corpo, che abbiamo modificato in 5vw appositamente per questo motivo. Poiché vogliamo che la larghezza del bordo si adatti alla dimensione della nostra intestazione, dobbiamo dare al nostro testo del corpo un valore di unità di lunghezza vw che scalerà con le dimensioni del browser.

Ora diamo un'ombra a scatola per un bell'effetto griglia spezzata.

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 20 px
Posizione verticale dell'ombra del riquadro: 20 px
Colore ombra: #5b7796
Posizione ombra scatola: Ombra esterna

Quindi aggiorna le dimensioni del modulo per dispositivi mobili.

Larghezza: 50% (desktop), 13% (tablet), 16% (smartphone)

Per un ultimo passaggio, togli l'imbottitura e il bordo della tua riga.

Quindi controlla il risultato finale.

Design titolo n. 5

Per quest'ultimo design dell'intestazione, modificheremo semplicemente la spaziatura per allargare il modulo di testo. Questo creerà un design simile a quello del disegno dell'intestazione n.

Innanzitutto, apri il modulo di testo e aggiungi il seguente testo sotto l'intestazione h2:

<h3>our process</h3>

Quindi aggiorna le impostazioni di progettazione come segue:

Stile carattere titolo 2: maiuscolo (TT)
Larghezza: 94% (desktop), 29% (tablet), 29% (smartphone)

Quindi aggiorna la spaziatura come segue:

Margine personalizzato: -8vw in alto, -5vw in basso
Imbottitura personalizzata: 4vw superiore, 4vw inferiore

Questo è il risultato finale.

Reattivo

Il trucco per far sì che questi design abbiano un bell'aspetto sui dispositivi mobili è regolare le dimensioni e i margini del modulo di testo per ridimensionarlo con la finestra del browser che si restringe. Quindi, se qualcosa non si ridimensiona correttamente, potrebbe essere necessario regolare queste proprietà per i propri scopi. Ecco come appariranno i design sui dispositivi mobili.

Pensieri finali

Spero che i 5 design delle intestazioni in questo tutorial offrano almeno alcuni ottimi punti di partenza per i tuoi progetti. Come ci si potrebbe aspettare, il design funziona meglio per titoli più brevi (una parola) poiché il testo verrà impilato verticalmente. Ma ci sono tonnellate di elementi di design che possono essere aggiunti per rendere questi design davvero unici. Sentiti libero di esplorare diversi tipi di carattere, colori e bordi per personalizzarlo.

Per ulteriore ispirazione, dai un'occhiata a questo layout di testo verticale. E potresti anche imparare a creare testo laterale e verticale con un approccio CSS più personalizzato.

Non vedo l'ora di sentirti nei commenti.

Saluti!