Scarica 9 sovrapposizioni di immagini sagomate GRATUITE per Divi
Pubblicato: 2019-01-10Il modo in cui mostri le immagini sul tuo sito web può davvero fare la differenza nel design generale che stai creando. Con le opzioni integrate di Divi, puoi già applicare varie impostazioni di progettazione che ti aiuteranno a visualizzare le immagini in modo straordinario, ad esempio, pensa ai bordi e alle ombre della scatola. Ma se stai cercando di dare alle tue immagini una forma più unica, questo post ti aiuterà. Condivideremo 9 sovrapposizioni di immagini sagomate GRATUITE che puoi scaricare e utilizzare su qualsiasi sito web che crei. Dopo aver condiviso queste sovrapposizioni di immagini sagomate, ti mostreremo anche come sfruttarle durante la creazione di un sito Web con Divi. Speriamo che questo tutorial ti ispiri a creare anche il tuo tipo di sovrapposizioni di immagini sagomate.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial e scaricarlo, diamo una rapida occhiata al risultato che puoi aspettarti su schermi di diverse dimensioni.
Desktop
Telefono
Scarica le sovrapposizioni di immagini sagomate GRATUITAMENTE
Per mettere le mani sulle sovrapposizioni di immagini sagomate, 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ì e venerdì! 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 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!
Approccio
- Le sovrapposizioni di immagini sagomate che puoi trovare nella cartella di download sono pronte per l'uso se le stai combinando con una riga bianca e/o un colore di sfondo della sezione
- Se desideri regolare le sovrapposizioni di immagini sagomate in base a un altro colore di sfondo, dovrai esportare le sovrapposizioni di immagini sagomate in un altro colore utilizzando il file Illustrator incluso nel download sopra
- Ti mostreremo come cambiare il colore della sovrapposizione dell'immagine sagomata nella prima parte del tutorial (usando Adobe Illustrator)
- Quindi, passeremo a Divi e caricheremo una delle sovrapposizioni di immagini sagomate su un modulo immagine
- Aggiungeremo anche un'immagine di sfondo e uno sfondo sfumato al modulo immagine che verrà mostrato attraverso la sovrapposizione dell'immagine sagomata
Modifica delle sovrapposizioni di immagini sagomate al colore di sfondo della sezione con Adobe Illustrator
Apri il file Illustrator nella cartella Download
Come accennato nella sezione di approccio di questo post, se desideri utilizzare le sovrapposizioni a forma di immagine su uno sfondo bianco, sei pronto per iniziare semplicemente utilizzando i file PNG che puoi trovare nella cartella di download. Tuttavia, se si desidera utilizzare le sovrapposizioni di immagini sagomate su un diverso colore di sfondo di riga e/o sezione, sarà necessario modificare manualmente il colore utilizzando il file Adobe Illustrator incluso anche nella cartella di download. La modifica del colore richiede poco o nessun tempo e ti consente di utilizzare le sovrapposizioni di immagini sagomate letteralmente su qualsiasi sito web che crei, quindi passiamo attraverso i passaggi. Prima di tutto, dovrai aprire il file Adobe Illustrator.
Seleziona la sovrapposizione della forma dell'immagine a scelta
Una volta aperto il file, troverai 9 diverse tavole da disegno con le sovrapposizioni di immagini sagomate che sei libero di utilizzare per qualsiasi tipo di scopo. Seleziona quello che vuoi modificare.
Cambia colore in modo che corrisponda al colore di sfondo della sezione
Continua cambiando il colore della forma nello stesso colore di sfondo che intendi utilizzare per la riga e/o la sezione.
Seleziona tavola da disegno
Una volta modificato il colore, puoi selezionare l'intera tavola da disegno contenente la sovrapposizione dell'immagine sagomata.
Salva sovrapposizione immagine a forma di PNG per il Web
E salvalo come file immagine PNG per il Web andando su File> Esporta> Salva per Web .
Iniziamo a creare!
Iscriviti al nostro canale Youtube
Aggiungi nuova sezione
È ora di passare a Divi e creare il risultato! Crea una nuova pagina o aprine una esistente e aggiungi una nuova sezione regolare.
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Aggiungi modulo immagine alla colonna 1
Carica sovrapposizione immagine sagomata
L'unico modulo di cui avremo bisogno nella colonna 1 è un modulo immagine. Qui è dove accadrà tutta la magia. Inizieremo caricando la sovrapposizione dell'immagine sagomata. Noterai che una parte dell'immagine è completamente trasparente. Ciò consentirà all'immagine di sfondo e allo sfondo sfumato di essere visualizzati nei passaggi successivi.
Sfondo sfumato
Vai avanti e aggiungi uno sfondo sfumato a tua scelta successivamente.
- Colore 1: #aa2bff
- Colore 2: #09f7eb
Immagine di sfondo
E carica un'immagine di sfondo PNG, o solo una normale se non vuoi che lo sfondo sfumato venga visualizzato. Puoi anche scaricare le illustrazioni che stiamo usando andando al seguente post che abbiamo creato su come cambiare uno sfondo sfumato al passaggio del mouse.
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: in basso al centro
- Ripetizione immagine di sfondo: nessuna ripetizione
Dimensionamento
Un altro passo importante per far funzionare questo tutorial è abilitare l'opzione 'Forza Fullwidth' nelle impostazioni di dimensionamento del modulo immagine. Ciò assicurerà che lo sfondo sfumato e l'immagine di sfondo vengano visualizzati solo attraverso l'area trasparente della sovrapposizione dell'immagine sagomata.
- Forza intera larghezza: Sì
Aggiungi il modulo di testo del titolo alla colonna 2
Aggiungi contenuto
Passiamo alla seconda colonna. Qui, il primo modulo di cui avremo bisogno è un modulo di testo del titolo. Aggiungi alcuni contenuti a tua scelta.
Impostazioni testo
Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche.
- Carattere titolo 2: Antic Didone
- Intestazione 2 Peso del carattere: grassetto
- Intestazione 2 Dimensioni del testo: 45 px
- Intestazione 2 Spaziatura lettere: -2px
Spaziatura
Aggiungi anche un margine superiore personalizzato.
- Margine superiore: 100 px
Aggiungi il modulo di testo descrittivo alla colonna 2
Aggiungi contenuto
Il secondo modulo di cui avremo bisogno è un modulo di testo descrittivo. Inserisci alcuni contenuti a tua scelta.
Impostazioni testo
Quindi, vai alle impostazioni del testo e modifica l'orientamento del testo del modulo.
- Orientamento del testo: giustifica
Dimensionamento
Modifica anche la larghezza nelle impostazioni di dimensionamento.
- Larghezza: 63%
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
Il prossimo e ultimo modulo di cui avremo bisogno è un modulo pulsante. Inserisci alcuni contenuti a tua scelta.
Impostazioni dei pulsanti
Continua andando alle impostazioni del pulsante e modificando l'aspetto del pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 17 px
- Colore del testo del pulsante: #ffffff
- Colore sfumatura 1: #aa2bff
- Colore sfumatura 2: #09f7eb
- Direzione del gradiente: 111°
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Spaziatura lettere pulsante: -2px
- Peso del carattere: Ultra grassetto
- Stile carattere: maiuscolo
Spaziatura
Aggiungi anche un'imbottitura extra personalizzata al pulsante.
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 50px
Scatola ombra
Ultimo ma non meno importante, completa il design aggiungendo una sottile ombra di fiocco al bottone.
- Forza sfocatura ombra scatola: 50 px
- Forza di diffusione dell'ombra della scatola: -5px
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Telefono
Pensieri finali
In questo post, abbiamo condiviso 9 sovrapposizioni di immagini sagomate GRATUITE per Divi che puoi utilizzare per qualsiasi tipo di sito Web che stai costruendo. Speriamo che questo tutorial ti abbia ispirato a creare le tue sovrapposizioni di immagini dalla forma unica che puoi riutilizzare costantemente. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!