Skal finde ud af, hvordan man tilføjer et billede i en tekst i Elementor ?
Elementor gjort det muligt for alle at blive webdesigner uden at skulle have avancerede CSS-færdigheder. Dens visuelle editor giver dig mulighed for at oprette en smuk webside uden at skrive en enkelt linje med CSS-kode. Du kan bare tilføje de ønskede designelementer (widgets) og tilpasse dem i indstillingspanelet.
Alligevel ville det være en stor bonus at have nogle CSS-færdighederElementor. Du vil være i stand til at anvende unikke stilarter på din webside ved hjælp af funktionen Brugerdefineret CSS tilElementor. I denne artikel vil vi vise dig, hvordan du tilføjer et billede til tekst i Elementor ved hjælp af Elementors brugerdefinerede CSS-funktion.
I nogle OUTILS designs som GIMP og Photoshop, skal du normalt tilføje en lagmarkør for at tilføje et billede i tekst. I Elementor kan du opnå det samme ved at tilføje CSS-kode, som Elementor Title-widget og Text-widget ikke har nogen indstillingsmulighed for at tilføje billede som baggrund.
Tilføjelse af et billede til Elementor-tekst
Før du starter, skal du sørge for at have opgraderet din version af Elementor til pro-versionen, hvis du ikke har gjort det, siden tilpasset CSS-funktionalitet kun er tilgængelig på Elementor Pro. Når du er klar, skal du oprette en ny side eller skabelon og redigere den med Elementor. Selvfølgelig kan du også redigere en eksisterende side eller skabelon.
Se også: Elementor: Sådan tilføjer du en indholdsfortegnelse
Føj titelwidgeten til redigeringsfeltet.
Gå til indstillingspanelet for at erstatte standardteksten under fanen Indhold.
Læs også vores vejledning om: Elementor: Sådan bruger du farvevælgeren
Gå til fanen stil for at personalisere teksten. Du kan indstille tekststørrelse, skrifttypestil osv ... ved at klikke på blyantikonet i Mulighed for typografi under blokken Titel. Da du vil bruge et billede som baggrund for din tekst, er det ikke nødvendigt at indstille tekstfarven.
Gå derefter til fanen avanceret og åbn blokken Tilpasset CSS og indsæt følgende CSS-kode. Erstat billedets URL med din egen billed-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;
}Her er eksemplet.
Hent Elementor Pro nu!
Konklusion
Her er ! Det er det for denne artikel, der viser dig, hvordan du tilføjer billede til tekst i Elementor. Hvis du er bekymret for, hvordan du kommer dertil flad os vide det i 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.
...
