Behöver ta reda på hur man lägger till en bild i texten 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.
Trots det skulle det vara en stor bonus att ha vissa CSS-kunskaperElementor. Du kommer att kunna tillämpa unika stilar på din webbsida med funktionen Anpassad CSS d 'Elementor. I den här artikeln kommer vi att visa dig hur du lägger till en bild till text i Elementor med hjälp av Elementors anpassade CSS-funktion.
I några outils mönster som GIMP och Photoshop behöver du vanligtvis lägga till en lagermarkör för att lägga till en bild i text. I Elementor kan du åstadkomma samma sak genom att lägga till CSS-kod som Elementor Title-widgeten och Text-widgeten 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.
Se även: Elementor: Hur man lägger till en innehållsförteckning
Lägg till titelwidgeten i redigeringsrutan.
Gå till inställningspanelen för att ersätta standardtexten under fliken Innehåll.
Läs också vår guide om: Elementor: Hur man använder färgväljaren
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 Custom CSS och klistra in följande CSS-kod. Ersätt bildens URL med din egen bild-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;
}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.
.
