Come creare un titolo della modalità di fusione divisa con Divi

Non è un segreto che le modalità di fusione possono aiutarti a prestare maggiore attenzione all'estetica del design su cui stai lavorando. In passato, abbiamo trattato suggerimenti e trucchi sulla modalità di fusione che ti aiutano a creare alcuni design unici e meravigliosi. Ora, da quando è uscito l'aggiornamento della colonna, ci sono alcune cose extra che puoi fare con queste modalità di fusione. Una di queste cose è creare un titolo della modalità di fusione divisa. In questo post, ti mostreremo come ottenere un risultato straordinario combinando modalità di fusione di moduli e colonne, colori di sfondo delle colonne e margini negativi. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Scarica GRATUITAMENTE la sezione Eroe della modalità Split Blend

Per mettere le mani sulla sezione degli eroi della modalità di fusione gratuita, dovrai prima scaricarla 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!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare!

Aggiungi nuova sezione

Spaziatura

Aggiungi una nuova sezione normale alla pagina su cui stai lavorando e rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Scatola ombra

Passa alle opzioni dell'ombra della scatola e aggiungi un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra della scatola: 70 px
• Colore ombra: rgba(0,0,0,0.07)

Aggiungi nuova riga

Struttura della colonna

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

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica uno sfondo sfumato. Nel passaggio successivo di questo post, uniremo lo sfondo sfumato con un'immagine di sfondo utilizzando una modalità di fusione.

• Colore 1: #00cbff
• Colore 2: #bf35ff
• Direzione del gradiente: 96 gradi

Immagine di sfondo

Aggiungi un'immagine di sfondo alla riga e usala in combinazione con le seguenti impostazioni dell'immagine di sfondo:

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: schermo

Dimensionamento

Vai alle impostazioni di dimensionamento successivo e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi tutto il riempimento superiore e inferiore predefinito della riga successiva. Ciò assicurerà che il colore di sfondo della colonna 2, che aggiungeremo più avanti in questo post, tocchi il bordo superiore e inferiore dei contenitori di righe e sezioni.

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

Schermo

Per assicurarci che entrambe le colonne appaiano una accanto all'altra su schermi di dimensioni inferiori, aggiungeremo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Impostazioni colonna 2

Colore di sfondo

Una volta completate le impostazioni generali della riga, vai avanti e apri le impostazioni della seconda colonna. Inizia aggiungendo un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Filtri

Passa alla scheda Progettazione e aggiungi una modalità di fusione all'intera colonna.

• Modalità di fusione: schermo

Aggiungi modulo divisore alla colonna 1

Visibilità

È ora di iniziare ad aggiungere moduli! L'unico modulo di cui abbiamo bisogno nella prima colonna è un modulo divisore. Questo modulo ci aiuterà a creare spazio nella prima colonna senza che venga visualizzato un modulo. Assicurati che l'opzione "Mostra divisore" del divisore sia disabilitata.

• Mostra divisore: No

Spaziatura

Passa alle impostazioni di spaziatura e aggiungi un margine inferiore per creare spazio nella prima colonna.

• Margine inferiore: 50vw

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi titolo H1

Alla seconda colonna! Qui, inizieremo con il modulo di testo del titolo. Inserisci alcuni contenuti H1 a tua scelta.

Impostazioni testo H1

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

• Carattere dell'intestazione: Poppins
• Peso del carattere dell'intestazione: grassetto
• Colore del testo dell'intestazione: #FFFFFF
• Dimensione del testo dell'intestazione: 12vw
• Spaziatura delle lettere dell'intestazione: -0.2vw

Spaziatura

Stiamo anche creando dello spazio attorno al modulo e lo spostiamo a sinistra applicando alcuni valori di margine personalizzati. Il margine sinistro negativo gioca un ruolo importante nella creazione della modalità di fusione divisa. Consente a una parte della copia di apparire sotto la prima colonna che non contiene alcun colore di sfondo.

• Margine superiore: 18vw
• Margine inferiore: 2vw
• Margine sinistro: -27.3vw

Filtri

Ora, in questo passaggio successivo, la magia accadrà! Stiamo combinando una modalità di fusione modulo e colonna per consentire la visualizzazione dello sfondo della riga. Assicurati di selezionare la seguente modalità di fusione per il modulo di testo:

• Modalità di fusione: differenza

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Al secondo modulo! Aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

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

• Carattere del testo: Poppins
• Allineamento del testo: giustifica
• Colore del testo: #000000
• Dimensione del testo: 0.8vw (desktop), 1.5vw (tablet), 2.3vw (telefono)
• Altezza riga di testo: 2,5 em (desktop e tablet), 2,2 em (telefono)

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine inferiore: 1vw
• Margine sinistro: 5vw
• Margine destro: 14vw (desktop), 4vw (tablet), 5vw (telefono)

Aggiungi modulo divisore alla colonna 2

Visibilità

Al modulo successivo, che è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda Progettazione e modifica le impostazioni della linea di conseguenza:

• Colore linea: #FFFFFF
• Stile linea: solido
• Posizione della linea: in alto

Dimensionamento

Modifica anche le impostazioni di dimensionamento del divisore.

• Peso del divisore: 0.7vw
• Larghezza: 9%
• Altezza: 0px

Spaziatura

E aggiungi alcuni valori di spaziatura personalizzati.

• Margine superiore: 2vw (desktop), 5vw (tablet e telefono)
• Margine inferiore: 3vw (desktop), 6vw (tablet e telefono)
• Margine sinistro: 5vw

Filtri

Ultimo ma non meno importante, applica una modalità di fusione per consentire la visualizzazione dell'immagine di sfondo della riga e del gradiente.

• Modalità di fusione: differenza

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Passa al modulo successivo e ultimo, che è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

Passa alla scheda Progettazione e assicurati che l'allineamento del pulsante sia impostato a sinistra.

• Allineamento dei pulsanti: a sinistra

Impostazioni dei pulsanti

Modifica anche le impostazioni dei pulsanti.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #000000
• Raggio bordo pulsante: 0px
• Carattere pulsante: Poppins

Spaziatura

E infine, aggiungi alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura.

• Margine inferiore: 10vw (desktop), 15vw (tablet e telefono)
• Margine sinistro: 5vw
• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw
• Imbottitura sinistra: 3vw
• Imbottitura destra: 3vw

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 utilizzare le nuove opzioni di colonna di Divi per creare fantastici titoli in modalità di fusione divisa. Questo tutorial mostra solo quanto siano versatili le opzioni integrate di Divi e come con ogni aggiornamento Divi, il software di progettazione di terze parti diventa superfluo. 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.