Hai mai desiderato di sapere come visualizzare il testo sopra un'immagine con Elementor ?

In questo nuovo tutorial, ti mostreremo come farlo.

Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:

Quindi torniamo al perché siamo qui.

Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.

Scopri anche la nostra guida su: Come creare una galleria di immagini con Elementor

Creiamo una nuova sezione con una struttura a 3 colonne, poi nel pannello definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.

Selezioniamo la colonna centrale e nella scheda Style, nella sezione sfondo clicchiamo su Classico per Tipo di sfondo, quindi seleziona un colore scuro.

Mettiamo in questa colonna il Widget Sezione Interna. Il widget Sezione Interna è configurato di default con 2 colonne, cancelliamone una. Configuriamo il resto nel pannello modificandolo Hauteur su Altezza minima e Altezza minima impostiamo il cursore su 400.

Leggi anche: Elementor: come ingrandire una scheda profilo

Allora, via Allineamento verticale Selezionare Mezzo.

Quindi rilascia il Widget del titolo in sezione interna entriamo come Fotografia del titolo e, su Allineamento, scegliamo Centro.

Nella scheda Style modifichiamo il colore del Titolo in modo che sia visibile se non lo è,

Lasciamo cadere un Widget Editor di testo sotto il Widget del titolo. Quindi, nella scheda Style, in Allineamento scegliere Centro. Cambiamo anche il colore del testo in modo che sia visibile.

Guarda anche: Elementor: come aggiungere un divisore per creare una sezione

Selezioniamo il colonna centrale e nella sua scheda Style, reimposta il colore di sfondo e carica un'immagine, quindi Posizione Selezionare Centrato Centrato, ripetizione su Non ripetere, Coperchio su Misura.

Nella sezione confine modifichiamo tutto raggi di confine su 12. In ombra della scatola, imposta il dispositivo di scorrimento su 0 per Orizzontale, per 0 per Verticale, a 40 su Sfocatura, a all'10 ottobre in onda. Dovresti vedere un bellissimo effetto ombra sotto la tua immagine.

Sur Sovrapposizione di sfondo, Selezionare Classico per Tipo di sfondo e colore scegline uno colore nero, su Opacità, impostiamo il cursore su 0.55

Nella scheda avanzato, prendiamo 20 per tutti i margini.

Selezioniamo il nostro Sezione interna e vai alla sua scheda avanzato nella sezione CSS personalizzato copia e incolla il seguente snippet di codice:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(Se non hai questa sezione allora non hai la versione Pro, se vuoi continuare devi aggiornare la tua versione).

Selezioniamo ancora una volta la colonna centrale della nostra sezione, Nella sua scheda Style, e nella sezione Sovrapposizione di sfondo, controlla di essere nella scheda NORMALE, abbassiamo Opacità à 0.

Quindi fare clic sulla scheda PANORAMICApoi su Classico per tipo di sfondo e colore, seleziona un colore scuro, poi ilopacità su 0.55e per Durata della transizione impostiamo il cursore su 0.5.

Ecco il risultato finale della nostra manipolazione.

Duplichiamo la nostra colonna 2 volte ed eliminiamo le altre 2 colonne vuote, non resta che cambiare l'immagine di sfondo e quella contenuto editor di testo per le 2 nuove colonne.

Visualizza in anteprima il tuo lavoro su Tablet e Smartphone per vedere come appare. Quindi salvalo o aggiornalo.

Ecco. Hai appena visualizzato un testo sopra un'immagine con il Page Builder Elementor.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come visualizzare il testo sopra un'immagine. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...