Har du nogensinde ønsket, at du vidste, hvordan man viser tekst over et billede med Elementor ?

I denne nye tutorial viser vi dig, hvordan du gør det.

Hvis du ikke aner, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:

Lad os derefter vende tilbage til, hvorfor vi er her.

For at fuldføre denne tutorial skal du bruge Pro-versionen af ​​Elementor, da vi vil bruge tilpasset CSS-kode, som kun understøttes af denne version afElementor.

Find også vores guide til: Sådan oprettes et billedgalleri med Elementor

Lad os oprette en ny sektion med en 3-søjlestruktur, så lad os i panelet definere Højde ud af Min Højdeog så Minimum højde lad os klikke videre VH og sæt skyderen til 100.

Lad os vælge den midterste kolonne og i fanen stil, i sektionen Baggrund lad os klikke videre klassisk for Baggrundstype, og vælg derefter en mørk farve.

Lad os sætte i denne kolonne Intern sektionswidget. Den interne sektions widget er som standard konfigureret med 2 kolonner, lad os slette en af ​​dem. Lad os konfigurere resten i panelet ved at ændre det Højde ud af Min Højde og Minimum højde lad os sætte markøren til 400.

Læs også: Elementor: Sådan zoomer du et profilkort

Så videre Lodret justering lad os vælge Milieu.

Slip derefter Titel-widget i indre sektion lad os gå ind som titelfotografi, og lad os vælge på Justering Centrum.

I fanen stil lad os ændre farven på titlen, så den er synlig, hvis den ikke er det,

Lad os droppe en Teksteditor-widget under Titel-widget. Derefter i fanen stil, på Alignment vælg Centrum. Lad os også ændre farven på teksten, så den er synlig.

Se også: Elementor: Sådan tilføjer du en skillelinje for at oprette en sektion

Lad os vælge midterste kolonne og i dens fane stil, nulstil baggrundsfarven og indlæs derefter et billede Position lad os vælge Centreret Centreret, gentagelse ud af Ikke-gentagelse, Dække over ud af Størrelse.

I afsnittet grænse lad os ændre alle grænseradier ud af 12. I kasse skygge, indstil skyderen til 0 for Vandret, at 0 for Lodret, til 40 på Blur, til -10 på udsendelse. Du bør se en smuk skyggeeffekt under dit billede.

Om Baggrundsoverlejring, Vælg klassisk for Baggrundstype og farve Vælg en sort farve, på Opacity, lad os indstille skyderen til 0.55

I fanen avanceret, lad os tage fat 20 for alle Marginer.

Lad os vælge vores Internt afsnit og gå til dens fane avanceret Kopier og indsæt følgende kodestykke i afsnittet Custom CSS:

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

(Hvis du ikke har denne sektion, så har du ikke Pro-versionen, hvis du vil fortsætte skal du opgradere din version).

Lad os igen vælge den midterste kolonne i vores sektion, i dens fane stil, og i afsnittet Baggrundsoverlejring, tjek at vi er på fanen NORMAL, lad os sænke Gennemsigtighed à 0.

Klik derefter på fanen OVERSIGTSå på klassisk for baggrundstype og farve, vælg en mørk farve, derefteropacitet ud af 0.55Og for Overgangsvarighed lad os sætte skyderen til 0.5.

Her er det endelige resultat af vores manipulation.

Lad os duplikere vores kolonne 2 gange og slette de andre 2 tomme kolonner. Tilbage er blot at ændre baggrundsbilledet samt indhold teksteditorer til de 2 nye kolonner.

Se et eksempel på dit arbejde på tablet og smartphone for at se, hvordan det ser ud. Gem eller opdater det derefter.

Så. Du har lige vist en tekst over et billede med Side Builder Elementor.

Hent Elementor Pro nu!

Konklusion

Så! Det er det for denne artikel, der viser dig, hvordan du viser tekst over et billede. Hvis du har nogen bekymringer om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...