Come aggiungere il mascheramento dell'immagine in Divi

Può sembrare un cliché, che un'immagine vale più di mille parole. Tuttavia, abbiamo ammesso che l'immagine ha così tanto potere. Ci sono tanti modi per creare un'immagine più interessante. Il mascheramento è uno dei metodi che possiamo utilizzare per far risaltare l'immagine.

In breve, il mascheramento dell'immagine utilizza una forma o un oggetto per tagliare o nascondere porzioni dell'immagine. Puoi regolare una parte specifica della tua immagine lasciando inalterato il resto. Questo articolo ti mostrerà come aggiungere una maschera immagine in Divi.

Passaggi per aggiungere una maschera immagine in Divi

Passaggio 1: aggiungi una nuova sezione

Vai all'editor Divi Builder e quindi crea una riga con tre colonne. Vogliamo aggiungere il modulo Codice per ogni colonna in questo esempio. Prepariamo la prima colonna per l'immagine principale e per altre due colonne le useremo per le forme.

Passaggio 2: modifica e modella la prima colonna

Bene, iniziamo con la prima colonna. Aggiungi un modulo Codice. Nel pannello delle impostazioni, vai al blocco Sfondo e quindi aggiungi un'immagine di sfondo come preferisci.

Dopo aver aggiunto un'immagine di sfondo, vai al blocco Etichetta amministratore , quindi assegnagli un nome per questo modulo. L'abbiamo chiamato "1°" per questo modulo. L'applicazione dell'etichetta amministratore renderà più facile accedervi dal menu Livelli.

Sempre nel pannello delle impostazioni del modulo Codice, vai alla scheda Design -> Opzioni di ridimensionamento . Imposta la Larghezza e l' Altezza a 450px .

Ora è il momento di mascherare l'immagine. Vai alla scheda Avanzate -> CSS personalizzato . Successivamente, incolla lo snippet CSS di seguito nel campo Elemento principale .

 -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+==");
-webkit-mask-repeat: no-repeat; 

Passaggio 3: modifica e modella la seconda colonna

Successivamente, passiamo alla seconda colonna. Aggiungi il modulo Codice, quindi vai a pannello delle impostazioni. Successivamente, vai al blocco Sfondo e aggiungi un colore di sfondo di tua preferenza.

Dopo aver aggiunto un colore di sfondo, vai su Admin Label , quindi dai un nome a questo modulo. L'abbiamo chiamato "2°" per questo modulo.

Successivamente, vogliamo modificare la dimensione di questo modulo. Vai alla scheda Design -> Opzioni di ridimensionamento . Imposta la Larghezza e l' Altezza a 145px .

Se vuoi ruotare la forma, puoi andare su Trasforma e scegliere Trasforma Ruota . In questo esempio, impostiamo 15deg solo al primo campo.

Ora è il momento di mascherare la forma. Vai alla scheda Avanzate -> CSS personalizzato . Successivamente, incolla lo snippet CSS di seguito nel campo Elemento principale .

 -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwL jU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==");
-webkit-mask-repeat: ripetere;
-dimensione maschera-webkit: 5px; 

Puoi regolare la posizione della forma sull'immagine principale in base alle tue preferenze. Vai a Posizione . Impostare su Assoluto , modificare l' offset verticale, l'offset orizzontale e l'indice Z.

Passaggio 4: modifica e modella la terza colonna

Bene, ora modificheremo e stilizzeremo la terza colonna. Aggiungi il modulo Codice, quindi vai al pannello delle impostazioni. Successivamente, vai al blocco Sfondo e aggiungi un colore di sfondo di tua preferenza.

Dopo aver aggiunto un colore di sfondo, vai su Admin Label , quindi dai un nome a questo modulo. L'abbiamo chiamato "3°" per questo modulo.

Successivamente, vogliamo modificare la dimensione di questo modulo. Vai alla scheda Design -> Opzioni di ridimensionamento . Imposta la Larghezza e l' Altezza a 45px .

Se vuoi ruotare la forma, puoi andare su Trasforma e scegliere Trasforma Ruota . In questo esempio, impostiamo 315deg solo al primo campo.

Ora è il momento di mascherare la forma. Vai alla scheda Avanzate -> CSS personalizzato . Successivamente, incolla lo snippet CSS di seguito nel campo Elemento principale .

 CLIP-PATH: poligono(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50% , 100% 20%, 80% 0%, 50% 30%); 

Puoi regolare la posizione della forma sull'immagine principale in base alle tue preferenze. Vai a Posizione . Impostare su Assoluto , modificare l' offset verticale, l'offset orizzontale e l'indice Z.

Se vuoi impostare la posizione della mascheratura dell'immagine al centro della pagina, vai su Impostazioni riga -> scheda Design -> Spaziatura . Imposta 400px di margine sinistro.

Questo è tutto. Non dimenticare di fare clic sul pulsante Salva bozza o sul pulsante Pubblica se desideri salvare o pubblicare il tuo progetto.

La linea di fondo

Questo articolo mostra come aggiungere il mascheramento delle immagini in Divi senza l'aiuto di componenti aggiuntivi. Il mascheramento delle immagini è impressionante; renderà la tua immagine sbalorditiva. Ma tieni presente che non tutte le immagini sono adatte per il mascheramento. In alcuni casi, l'immagine di base è molto migliore.

In realtà esiste una soluzione più semplice per aggiungere il mascheramento delle immagini in Divi: utilizzare il plug-in Divi Pixel. Il plugin offre diverse forme di mascheratura. Puoi applicare una determinata forma di mascheratura con un solo clic. Non c'è bisogno di gestire il codice CSS. Ecco alcune forme di mascheratura offerte da Divi Pixel.

Dove trovare Divi Pixel?

Puoi ottenerlo su Divi Marketplace.