Come sovrapporre orizzontalmente i bordi delle righe con Divi

Creare design di pagine che interagiscono non è sempre un compito facile. Oltre a concentrarti sull'esperienza dell'utente, sui principi del design e sulle tendenze del design, devi anche creare qualcosa che corrisponda al marchio della tua azienda e affascini i tuoi visitatori a prima vista.

Se cerchi nel nostro blog, troverai un sacco di modi creativi per avvicinarti al tuo web design utilizzando Divi e le versatili opzioni integrate di Divi. Oggi aggiungiamo un altro approccio creativo a quell'elenco. Ti mostreremo come sovrapporre creativamente i bordi delle righe per creare un design straordinario. Ci stiamo assicurando di avere lo stesso tipo di design su tutte le dimensioni dello schermo.

Arriviamo ad esso!

Iscriviti al nostro canale Youtube

Anteprima

Creeremo un esempio da zero, ma prima di approfondire, diamo un'occhiata al risultato finale su schermi di diverse dimensioni.

Scarica font Mighty gratis

La prima cosa che devi fare è scaricare il font gratuito Mighttype con lettere a mano di AF studio. Vai al seguente link e abilita il download gratuito via email.

Aggiungi nuova sezione

Spaziatura

Dopo aver scaricato il font gratuito menzionato nel passaggio precedente, puoi andare avanti e creare una nuova pagina. Dopo averlo fatto, abilita il Visual Builder, apri la prima sezione della tua nuova pagina e aggiungi del riempimento personalizzato:

• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px

Aggiungi nuova riga

Struttura della colonna

Avremo bisogno di due righe in totale. Inizieremo con il primo e lo cloneremo in seguito una volta terminato. Aggiungi una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Sfondo sfumato colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente sfondo sfumato della colonna 1:

• Colore 1: #ffffff
• Colore 2: RGBA (0,255,233,0,25)
• Tipo di gradiente di colonna: radiale
• Direzione radiale colonna: sinistra
• Posizione di partenza della colonna: 59%
• Posizione finale della colonna: 59%
• Colonna Posiziona gradiente sopra Immagine di sfondo: Sì

Motivo di sfondo della colonna 1

Continua salvando il seguente modello sul tuo computer e caricandolo come immagine di sfondo della colonna 1:

Una volta caricato il motivo, utilizza le seguenti impostazioni dell'immagine di sfondo:

• Dimensione immagine di sfondo della colonna: dimensione effettiva
• Ripetizione immagine di sfondo della colonna: spazio

Allineamento delle righe

Abilita anche l'allineamento delle righe a destra.

Dimensionamento

Utilizziamo anche alcune impostazioni di ridimensionamento personalizzate per questa riga:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 950 px

Spaziatura

Questi sono i valori di Spaziatura che devi aggiungere in seguito:

• Margine inferiore: 100 px
• Margine destro: -30px (tablet e telefono)
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Ultimo ma non meno importante, aggiungi un bordo nella parte superiore, sinistra e inferiore della riga:

• Larghezza bordo: 14px
• Colore bordo: #000000
• Stile bordo sinistro: doppio

Aggiungi il modulo di testo del titolo

Aggiungi copia H2

Ora possiamo iniziare ad aggiungere i nostri moduli! Aggiungi un modulo di testo del titolo e assicurati che la tua copia sia H2.

Colore di sfondo

Interromperemo il bordo sinistro della nostra riga aggiungendo un colore di sfondo bianco al modulo di testo.

Carica carattere Mighty

Individua quindi il carattere Mighttype sul tuo computer e caricalo nella tua libreria di caratteri facendo clic sul pulsante di caricamento nell'elenco dei caratteri.

Seleziona il file del font Mighttype, dai un nome al tuo font e caricalo nella tua libreria di font.

Impostazioni testo H2

Dopo aver aggiunto il nuovo carattere, vai avanti e apporta altre modifiche alle impostazioni del testo H2:

• Intestazione 2 Font: Mighttype
• Colore del testo dell'intestazione: #000000
• Titolo 2: Dimensione testo: 150 px (desktop), 100 px (tablet), 60 px (telefono)

Spaziatura

Per ognuno dei moduli che vuoi sovrapporre ai bordi delle righe, dovrai aggiungere un margine negativo. Questo margine negativo influirà solo sul modulo in questione, non sulla riga in cui è stato inserito. Il margine negativo che dovrai aggiungere dipende dal numero di caratteri utilizzati nella tua copia.

• Margine superiore: 200 px
• Margine inferiore: 100 px
• Margine sinistro: -35%
• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Modalità di fusione

E per assicurarti che il colore di sfondo del modulo di testo influisca solo sul bordo della riga e non sullo sfondo della colonna 1, abilita la modalità di fusione "Moltiplica" nelle impostazioni dei filtri.

Aggiungi il modulo di testo descrittivo

Colore di sfondo

Proprio sotto il titolo Modulo di testo, vai avanti e aggiungi una descrizione Modulo di testo con un colore di sfondo bianco.

Impostazioni testo

Vai alle impostazioni del testo e apporta alcune modifiche:

• Dimensioni del testo: 22 px (desktop), 18 px (tablet), 15 px (telefono)
• Altezza riga di testo: 1,8 em
• Orientamento del testo: al centro

Dimensionamento

Riduci il dimensionamento di questo modulo di testo a "96%" successivo.

Spaziatura

Aggiungi anche un po' di spazio:

• Margine inferiore: 200 px
• Margine sinistro: -50%
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Modalità di fusione

E usa anche qui la modalità di fusione "Moltiplica".

Clona riga

Abbiamo finito di modificare la prima riga! Creiamo lo stesso risultato ma dall'altra parte della pagina. Per risparmiare un po' di tempo, cloneremo la riga che abbiamo già e apporteremo alcune modifiche lungo il percorso.

Modifica impostazioni riga

Sfondo sfumato colonna 1

La prima cosa che devi cambiare è lo sfondo sfumato della colonna 1:

• Colore 2: RGB (255,187,0,0,33)
• Direzione radiale della colonna: destra

Allineamento delle righe

Vogliamo che la riga appaia dall'altra parte, ecco perché sceglieremo Allineamento riga a sinistra.

Spaziatura

Stiamo regolando anche le impostazioni di Spaziatura:

• Margine sinistro: -25% (tablet e telefono)

Frontiera

Rimuovi il bordo sinistro che è stato applicato alla tua riga e applicalo invece al lato destro:

• Larghezza bordo destro: 14px
• Colore bordo destro: #000000
• Stile bordo destro: doppio

Modifica le impostazioni del modulo di testo del titolo

Spaziatura

Modifica le impostazioni di Spaziatura del modulo di testo del titolo in seguito:

• Margine sinistro: 52% (desktop e tablet), 58% (telefono)
• Margine destro: -52% (desktop e tablet), 58% (telefono)

Modifica le impostazioni del testo della descrizione

Spaziatura

Ultimo ma non meno importante, il modulo di testo della descrizione necessita anche di altri valori di spaziatura:

• Margine sinistro: 50%
• Margine destro: -50%

Anteprima

Ora che abbiamo seguito tutti i diversi passaggi, diamo un'occhiata finale al risultato finale su schermi di diverse dimensioni.

Pensieri finali

La sovrapposizione dei bordi delle righe utilizzando le opzioni integrate di Divi può portare al tuo sito web la personalizzazione e la personalizzazione che stavi cercando. In questo post, ti abbiamo mostrato esattamente come farlo. Abbiamo ricreato un bellissimo esempio da zero. Questo esempio ha un bell'aspetto su tutte le dimensioni dello schermo e abbiamo utilizzato solo le opzioni integrate di Divi! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!