Hur man lägger till bild i text i Elementor

Behöver du ta reda på hur du lägger till bild i text i Elementor?

Elementor gjorde det möjligt för alla att bli webbdesigner utan att behöva ha avancerade CSS-färdigheter. Dess visuella redigerare låter dig skapa en vacker webbsida utan att skriva en enda rad CSS-kod. Du kan bara lägga till alla designelement (widgets) du vill och anpassa dem i inställningspanelen.

Ändå skulle det vara en bra bonus att ha CSS-färdigheter när man använder Elementor. Du kommer att kunna använda unika stilar på din webbsida med Elementors anpassade CSS-funktion. I den här artikeln ska vi visa dig hur du lägger till bild i text i Elementor med Elementors anpassade CSS-funktion.

I vissa designverktyg som GIMP och Photoshop behöver du vanligtvis lägga till ett lagermärke för att lägga till en bild i text. I Elementor kan du åstadkomma samma genom att lägga till CSS-kod som titelwidget och textwidget i Elementor inte har något inställningsalternativ för att lägga till bild som bakgrund.

Lägg till en bild i en Elementor-text

Innan du börjar, se till att du har uppgraderat din version av Elementor till proversionen om du inte har gjort det sedan anpassad CSS-funktionalitet endast är tillgänglig på Elementor Pro. När du är klar skapar du en ny sida eller mall och redigerar den med Elementor. Naturligtvis kan du också redigera en befintlig sida eller mall.

Lägg till titelwidgeten i redigeringsrutan.

Gå till inställningspanelen för att ersätta standardtexten under fliken Innehåll.

Gå till fliken Stil för att anpassa texten. Du kan ställa in textstorlek, typsnitt osv ... genom att klicka på pennikonen i Typografi alternativ under blocket Titel. Eftersom du vill använda en bild som bakgrund för din text behöver du inte ställa in textfärg.

Gå sedan till fliken advanced och öppna blocket anpassad CSS och klistra in följande CSS-kod. Ersätt bildens URL med din egen bild-URL.

väljare .elementor-rubrik-titel {bakgrund: url ("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") grön upprepa 30% 70% ; -webkit-bakgrund-klipp: text; -webkit-text-fill-color: transparent; }

Här är exemplet.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du lägger till bild i text i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.