Potřebujete zjistit, jak přidat obrázek do textu Elementor ?

Elementor umožnilo každému, aby se stal webovým designérem, aniž by musel mít pokročilé dovednosti v CSS. Jeho vizuální editor vám umožňuje vytvořit krásnou webovou stránku bez psaní jediného řádku kódu CSS. Stačí přidat libovolné požadované konstrukční prvky (widgety) a přizpůsobit je na panelu nastavení.

Přesto by některé dovednosti CSS byly skvělým bonusem při používáníElementor. Pomocí této funkce budete moci na svou webovou stránku aplikovat jedinečné styly Vlastní CSS naElementor. V tomto článku vám ukážeme, jak přidat obrázek do textu v Elementoru pomocí vlastní CSS funkce Elementoru.

V některých nářadí návrhy, jako je GIMP a Photoshop, obvykle musíte přidat značku vrstvy, abyste přidali obrázek do textu. V Elementoru můžete dosáhnout toho samého přidáním kódu CSS, který widget Elementor Title a widget Text nemá možnost nastavení pro přidání obrázku jako pozadí.

Přidání obrázku do textu elementu

Než začnete, ujistěte se, že jste upgradovali svou verzi Elementoru na profesionální verzi, pokud jste to ještě neudělali, protože vlastní funkce CSS je k dispozici pouze na Elementor Pro. Jakmile budete připraveni, vytvořte novou stránku nebo šablonu a upravte ji pomocí Elementoru. Samozřejmě můžete také upravit existující stránku nebo šablonu.

Viz také: Elementor: Jak přidat obsah

Přidejte widget Název do editačního pole.

Jak přidat obrázek do textu v Elementoru

Přejděte na panel nastavení a nahraďte výchozí text pod kartou Obsah.

Přečtěte si také našeho průvodce: Elementor: Jak používat výběr barvy

Přejděte na kartu Styl přizpůsobit text. Velikost textu, styl písma atd. Můžete nastavit kliknutím na ikonu tužky v Možnost typografie pod blokem Titul. Protože chcete použít obrázek jako pozadí textu, není třeba nastavovat barvu textu.

Poté přejděte na kartu pokročilý a otevřete blok Zvyk CSS a vložte následující kód CSS. Nahraďte adresu URL obrázku vlastní adresou URL obrázku.

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;
}

Zde je příklad.

Jak přidat obrázek do textu v Elementoru

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Tady je ! To je pro tento článek, který vám ukáže, jak přidat obrázek do textu v Elementoru. Pokud máte nějaké obavy, jak se tam dostat fdejte nám vědět v commentaires.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...