Come utilizzare in modo creativo i bordi delle righe di Divi per creare un design straordinario per la sezione dell'eroe

La sezione degli eroi della tua pagina di solito imposta la barra per il resto della pagina. Svolge anche un ruolo importante nella prima impressione dei tuoi visitatori. Con Divi, puoi creare fantastiche sezioni di eroi utilizzando solo le opzioni integrate. Ora, se stai cercando un modo per far risaltare la tua prossima sezione degli eroi, adorerai questo post. Ti mostreremo come creare un design della sezione eroe efficace e bello mentre giochi con i bordi delle righe di Divi. Potrai anche scaricare gratuitamente il file JSON di progettazione!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Scarica GRATUITAMENTE il layout della sezione Hero

Per mettere le mani sul layout della sezione eroe GRATUITO, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Sfondo sfumato

Vai avanti e crea una nuova pagina o aprine una esistente. Aggiungi una nuova sezione normale, apri le impostazioni della sezione e aggiungi il seguente sfondo sfumato:

• Colore 1: #7e2dff
• Colore 2: #ffffff
• Posizione di partenza: 63%
• Posizione finale: 63%

Spaziatura

Passa alla scheda Design e aggiungi un'imbottitura superiore e inferiore personalizzata su diverse dimensioni dello schermo.

• Imbottitura superiore: 6vw (desktop), 13vw (tablet), 32vw (telefono)
• Imbottitura inferiore: 6vw (desktop), 10vw (tablet), 20vw (telefono)

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza massima.

• Larghezza massima: 100%

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo immagine alla colonna

Carica immagine

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo immagine. Carica l'immagine che trovi nella cartella zippata che hai potuto scaricare all'inizio di questo tutorial. Se preferisci utilizzare un'altra immagine, assicurati di utilizzare una larghezza di 1160 px e un'altezza di 1385 px.

Dimensionamento

Passa alla scheda di progettazione del modulo immagine e abilita l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Spaziatura

Modificare le impostazioni di spaziatura successiva.

• Mostra spazio sotto l'immagine: No
• Imbottitura sinistra: 17vw

Frontiera

E aggiungi "50vw" nell'angolo in alto a destra del modulo immagine.

Filtri

Stiamo anche cambiando i colori della nostra immagine in modo che corrispondano alla nostra tavolozza di colori. Apri le impostazioni dei filtri e applica le seguenti impostazioni:

• Tonalità: 211°
• Saturazione: 600%
• Luminosità: 67%
• Contrasto: 112%
• Inverti: 18%

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H1

Il secondo modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti H1.

Impostazioni testo H1

Passa alla scheda Design e modifica le impostazioni del testo H1 di conseguenza:

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: semi grassetto
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 5vw
• Spaziatura delle lettere dell'intestazione: -2px

Dimensionamento

Modificare successivamente la larghezza del modulo.

• Larghezza: 70%

Spaziatura

E crea una sovrapposizione tra questo e il modulo precedente usando un margine superiore negativo.

• Margine superiore: -57vw (desktop), -75vw (tablet), -91vw (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Cambia il colore della linea dopo.

• Colore linea: #00dcff

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 0.8vw
• Larghezza: 27%

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto paragrafo

Continua aggiungendo un nuovo modulo di testo con il contenuto del paragrafo di tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Open Sans
• Colore del testo: #ffffff
• Dimensione del testo: 1vw (desktop), 2vw (tablet), 2.5vw (telefono)
• Altezza riga di testo: 1,8 em

Dimensionamento

Modifica anche la larghezza del modulo.

• Larghezza: 53% (Desktop), 65% (Tablet), 100% (Telefono)

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Vai alle impostazioni del pulsante successivo e modifica lo stile del pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px
• Carattere pulsante: Open Sans

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw
• Imbottitura sinistra: 4vw
• Imbottitura destra: 4vw

Aggiungi riga #2

Struttura della colonna

Alla prossima riga! Scegli la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga. Cambia il colore di sfondo in bianco.

• Colore di sfondo: #ffffff

Dimensionamento

Passa alla scheda Design e aumenta la larghezza massima.

• Larghezza massima: 100%

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 3vw
• Imbottitura inferiore: 8vw
• Imbottitura sinistra: 7vw
• Imbottitura destra: 7vw

Frontiera

Continueremo aggiungendo "20vw" negli angoli in basso a sinistra e in alto a destra della riga. Aggiungeremo anche un bordo superiore utilizzando le seguenti impostazioni:

• Larghezza bordo superiore: 1.2vw
• Colore bordo superiore: #00dcff

Scatola ombra

Stiamo anche aggiungendo un'ombra sottile per creare profondità sulla pagina.

• Intensità sfocatura ombra scatola: 120 px

Indice Z

Per assicurarci che la riga appaia sopra il modulo immagine, aumenteremo l'indice Z della riga nelle impostazioni di visibilità.

• Indice Z: 10

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Una volta completate le impostazioni della riga, puoi aggiungere un modulo Blurb alla prima colonna della riga. Inserisci alcuni contenuti a tua scelta.

Seleziona icona

Seleziona un'icona a tua scelta successivamente.

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona.

• Colore icona: #000000
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 5vw

Impostazioni del testo del titolo

Modifica anche le impostazioni del titolo.

• Carattere del titolo: Montserrat
• Peso del carattere del titolo: grassetto
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 1.1vw (desktop), 2.5vw (tablet), 3vw (telefono)
• Spaziatura delle lettere del titolo: -1px

Impostazioni del corpo del testo

Insieme alle impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Allineamento del corpo del testo: Centro
• Dimensioni del corpo del testo: 0.8vw (desktop), 1.6vw (tablet), 2vw (telefono)
• Altezza della linea del corpo: 1.5vw (desktop), 3vw (tablet e telefono)

Clona il modulo Blurb due volte e posiziona i duplicati nelle colonne rimanenti

Una volta completato il modulo Blurb nella colonna 1, puoi clonarlo due volte e posizionare i duplicati nelle due colonne rimanenti della riga.

Modifica contenuto

Assicurati di modificare il contenuto di entrambi i duplicati e il gioco è fatto!

Anteprima

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

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con i bordi di riga incorporati di Divi per creare una straordinaria sezione di eroi che puoi utilizzare per il tuo prossimo progetto Divi. Abbiamo ricreato un bellissimo esempio da zero e sei stato anche in grado di scaricare il file JSON gratuitamente. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.