Maak vandaag nog eenvoudig uw website!

ELEMENTOR is 's werelds gemakkelijkste Blog Builder!

Stop met het verspillen van tijd en veel geld om een ​​ontwikkelaar te betalen wanneer je kunt Maak eenvoudig uw WordPress-website of blog met een professioneel ontwerp slechts enkele minuten ! Er is geen technische kennis vereist.

Heb je ooit gewenst dat je wist hoe je tekst boven een afbeelding kunt weergeven met? Elementor ?

In deze nieuwe tutorial laten we je zien hoe je dit doet.

Als je geen idee hebt waar we het vandaag over willen hebben, nodigen we je uit om de volgende video te bekijken:

Laten we dan teruggaan naar waarom we hier zijn.

Om deze tutorial te voltooien, heb je nodig: de Pro-versie van Elementor, omdat we aangepaste CSS-code zullen gebruiken die alleen wordt ondersteund door deze versie vanElementor.

Ontdek ook onze gids over: Hoe maak je een afbeeldingengalerij met Elementor

Laten we een nieuwe sectie maken met een structuur met 3 kolommen en vervolgens in het paneel de . definiëren hoogmoed op Minimale hoogte, en dan Minimale hoogte laten we klikken op VH en zet de schuifregelaar op 100.

3 kolom sectie

Laten we de middelste kolom selecteren, en in het tabblad stijl, in de sectie achtergrond laten we klikken op klassiek voor Achtergrondtypeen selecteer vervolgens een donkere kleur.

Laten we in deze kolom de Interne sectie-widget. De widget Interne sectie is standaard geconfigureerd met 2 kolommen, laten we er een verwijderen. Laten we de rest in het paneel configureren door zijn . te wijzigen hoogmoed op Minimale hoogte en Minimale hoogte laten we de cursor op . zetten 400.

Lees ook: Elementor: Hoe een profielkaart te zoomen

Dan, op Verticale uitlijning selecteer Milieu.

Laat dan de vallen Titelwidget in de binnenste gedeelte laten we invoeren als Titel Foto, en bij Uitlijning, laten we Kiezen Centrum.

tekst boven een afbeelding weergeven met Elementor

In het tabblad stijl laten we de kleur van de titel aanpassen zodat deze zichtbaar is als dat niet het geval is,

Laten we een laten vallen Teksteditor-widget onder de Titelwidget. Dan, in het tabblad stijl, op Uitlijning kiezen Centrum. Laten we ook de kleur van de tekst wijzigen zodat deze zichtbaar is.

Zie ook: Elementor: Hoe een scheidingslijn toe te voegen om een ​​sectie te maken

Laten we de . selecteren middelste kolom en in zijn tabblad stijl, reset de achtergrondkleur en laad een afbeelding, dan Positie selecteer Gecentreerd Gecentreerd, herhaling op Niet herhalen, Bedekken op Maat.

tekst boven een afbeelding weergeven met Elementor

In de sectie grens laten we alles aanpassen grensradii van 12. In doos schaduw, zet de schuifregelaar op 0 voor HorizontaalBij 0 voor verticaal, om 40 op Blur, om -10 op uitzending. Je zou een prachtig schaduweffect onder je afbeelding moeten zien.

tekst boven een afbeelding weergeven met Elementor

Sur Achtergrondoverlay, selecteer klassiek voor Achtergrondtype en couleur kies er een zwarte kleur, op Dekking, laten we de schuifregelaar instellen op 0.55

In het tabblad vergevorderd, laten we grijpen 20 voor alle marges.

Laten we onze . selecteren Interne sectie en ga naar het tabblad vergevorderd kopieer en plak in de sectie Aangepaste CSS het volgende codefragment:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}
tekst boven een afbeelding weergeven met Elementor

(Als je deze sectie niet hebt, heb je de Pro-versie niet, als je door wilt gaan, moet je je versie upgraden).

Laten we nogmaals de middelste kolom van onze sectie selecteren, In zijn tabblad stijl, en in de sectie Achtergrondoverlay, controleer of we op de tab staan NORMAAL, laten we verlagen dekking à 0.

Klik dan op het tabblad OVERZICHT, dan verder klassiek voor achtergrondtype en couleur, Selecteer een donkere kleur, dan deondoorzichtigheid op 0.55en voor Overgangsduur laten we de schuifregelaar op . zetten 0.5.

Hier is het eindresultaat van onze manipulatie.

tekst boven een afbeelding weergeven met Elementor

Laten we onze kolom 2 keer dupliceren en de 2 andere lege kolommen verwijderen. Het enige dat overblijft is om de achtergrondafbeelding te wijzigen, evenals de inhoud van de teksteditors van de 2 nieuwe kolommen.

tekst boven een afbeelding weergeven met Elementor

Bekijk een voorbeeld van uw werk op tablet en smartphone om te zien hoe het eruitziet. Sla het vervolgens op of werk het bij.

Alstublieft. Je hebt zojuist een tekst weergegeven boven een afbeelding met de Pagina Builder Elementor.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u tekst boven een afbeelding kunt weergeven. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...

%d bloggers zoals deze pagina: