Trasformare personaggi di grandi dimensioni in maschere di sfondo con Divi (download gratuito!)

Pubblicato: 2019-06-13

Quando si tratta di maschere di sfondo, le persone tendono a utilizzare software di modifica delle immagini al di fuori di Divi e quindi caricare l'immagine sul sito Web che stanno creando. Sebbene questo sia un modo solido per personalizzare e personalizzare il tuo sito web, non è necessariamente l'unico modo per andare. Puoi anche creare maschere di sfondo all'interno di Divi stesso, combinando in modo creativo i diversi elementi di design e le opzioni di filtri. Questo è esattamente quello che stiamo per fare in questo post! Trasformeremo i caratteri sovradimensionati in maschere di sfondo che hanno un bell'aspetto su schermi di diverse dimensioni. Speriamo che questo tutorial ti ispiri a creare i tuoi design utilizzando personaggi di grandi dimensioni e le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

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

Esempio 1

caratteri sovradimensionati

Esempio #2

caratteri sovradimensionati

Scarica le sezioni The Hero GRATUITAMENTE

Per mettere le mani sulle sezioni degli eroi gratuite, dovrai prima scaricarle 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.

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!

Ricrea l'esempio n. 1

Iscriviti al nostro canale Youtube

caratteri sovradimensionati

Aggiungi nuova sezione

Colore di sfondo

Partiamo dal primo esempio! Aggiungi una nuova sezione normale a una pagina nuova o esistente e aggiungi uno sfondo a quella sezione:

Colore di sfondo: #000000

caratteri sovradimensionati

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

Imbottitura superiore: 0px
Imbottitura inferiore: 0px

caratteri sovradimensionati

traboccamento

Passa alla scheda Avanzate e nascondi gli overflow della sezione. Questo diventerà importante più avanti in questo tutorial quando riposiamo il modulo di testo contenente il carattere sovradimensionato.

Overflow orizzontale: nascosto
Overflow verticale: nascosto

personaggi sovradimensionati

Aggiungi riga n. 1

Struttura della colonna

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

caratteri sovradimensionati

Colore di sfondo della colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo alla prima colonna.

Colore di sfondo della colonna 1: #848484

caratteri sovradimensionati

Immagine di sfondo della colonna 1

Aggiungi anche un colore di sfondo. Per combinare il colore di sfondo e l'immagine, applicheremo una modalità di fusione.

Miscela immagine di sfondo della colonna: Moltiplica

caratteri sovradimensionati

Dimensionamento

Passa alla scheda Design e consenti alla riga di occupare l'intera larghezza dello schermo applicando le seguenti impostazioni di dimensionamento:

Usa larghezza grondaia personalizzata: Sì
Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 100%

caratteri sovradimensionati

Spaziatura

Ci stiamo anche sbarazzando di tutte le imbottiture superiori e inferiori personalizzate della riga.

Imbottitura superiore: 0px
Imbottitura inferiore: 0px

caratteri sovradimensionati