Hoe een afbeelding aan tekst toe te voegen in Elementor

Wilt u weten hoe u een afbeelding aan tekst kunt toevoegen in Elementor ?

Elementor maakte het voor iedereen mogelijk om een ​​webdesigner te worden zonder geavanceerde CSS-vaardigheden. Met de visuele editor kunt u een prachtige webpagina maken zonder een enkele regel CSS-code te schrijven. U kunt gewoon alle gewenste ontwerpelementen (widgets) toevoegen en deze aanpassen in het instellingenpaneel.

Toch zou het hebben van wat CSS-vaardigheden een geweldige bonus zijn bij het gebruikElementor. U kunt unieke stijlen toepassen op uw webpagina met behulp van de functie Aangepaste CSS d 'Elementor. In dit artikel laten we u zien hoe u een afbeelding aan tekst in Elementor kunt toevoegen met behulp van de aangepaste CSS-functie van Elementor.

In bepaalde outils ontwerpen zoals GIMP en Photoshop, moet u meestal een laagmarkering toevoegen om een ​​afbeelding in tekst toe te voegen. In Elementor kunt u hetzelfde bereiken door CSS-code toe te voegen. Elementor Title-widget en Text-widget hebben geen instellingsoptie om afbeelding als achtergrond toe te voegen.

Een afbeelding toevoegen aan een Elementor-tekst

Voordat je begint, moet je ervoor zorgen dat je je versie van Elementor hebt geüpgraded naar de pro-versie als je dat nog niet hebt gedaan, aangezien aangepaste CSS-functionaliteit alleen beschikbaar is op Elementor Pro. Als je klaar bent, maak je een nieuwe pagina of sjabloon en bewerk je deze met Elementor. U kunt natuurlijk ook een bestaande pagina of sjabloon bewerken.

Zie ook: Elementor: een inhoudsopgave toevoegen

Voeg de titelwidget toe aan het bewerkingsvak.

Ga naar het instellingenpaneel om de standaardtekst onder het tabblad te vervangen Inhoud.

Lees ook onze gids over: Elementor: Hoe de kleurenkiezer te gebruiken

Ga naar het tabblad Style om de tekst te personaliseren. U kunt de tekstgrootte, letterstijl, enz ... instellen door op het potloodpictogram in . te klikken Typografie optie onder het blok Titel. Aangezien u een afbeelding als achtergrond voor uw tekst wilt gebruiken, hoeft u de tekstkleur niet in te stellen.

Ga dan naar het tabblad vergevorderd en open het blok Eigen CSS en plak de volgende CSS-code. Vervang de afbeeldings-URL door uw eigen afbeeldings-URL.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Hier is het voorbeeld.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een afbeelding aan tekst toevoegt in Elementor. Als u zich zorgen maakt over hoe er te komen flaat het ons weten in de 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.

...