Přáli jste si někdy, abyste věděli, jak zobrazit text nad obrázkem pomocí Elementor ?

V tomto novém návodu vám ukážeme, jak na to.

Pokud nevíte, o čem chceme dnes mluvit, zveme vás ke shlédnutí následujícího videa:

Pak se vraťme k tomu, proč jsme tady.

K dokončení tohoto tutoriálu budete potřebovat Pro verzi Elementor, protože budeme používat vlastní kód CSS, který je podporován pouze touto verzíElementor.

Objevte také našeho průvodce: Jak vytvořit galerii obrázků s Elementorem

Vytvořme novou sekci se 3 sloupcovou strukturou, pak v panelu definujme výška z Min. výška, a pak Minimální výška klikneme na VH a nastavte posuvník na 100.

Vyberme prostřední sloupec a v záložce Styl, v sekci pozadí klikneme na klasický pro Typ pozadía poté vyberte tmavou barvu.

Vložme do tohoto sloupce Widget vnitřní sekce. Widget Vnitřní sekce je standardně nakonfigurován se 2 sloupci, pojďme jeden z nich odstranit. Pojďme nakonfigurovat zbytek v panelu úpravou jeho výška z Min. výška a Minimální výška nastavíme kurzor na 400.

Čtěte také: Elementor: Jak zvětšit profilovou kartu

Pak dál Vertikální zarovnání pojďme vybrat Milieu.

Poté zahoďte Titulkový widget v vnitřní sekce zadáme jako Titulní fotografii a na Zarovnání zvolíme Centrum.

Na kartě Styl upravme barvu nadpisu tak, aby byla viditelná, pokud není,

Necháme a Widget textového editoru pod Titulkový widget. Poté v záložce Styl, na Zarovnání vyberte Centrum. Změňme také barvu textu, aby byl vidět.

Viz také: Elementor: Jak přidat oddělovač pro vytvoření sekce

Vyberme střední sloupec a v jeho záložce Styl, resetujte barvu pozadí a načtěte obrázek Pozice pojďme vybrat Vystředěno Vystředěno, opakovat z Neopakovat se, Pokrýt z velikost.

V sekci Hranice pojďme vše upravit hraniční poloměry z 12, v krabicový stín, nastavte posuvník na 0 pro Horizontální, Chcete-li 0 pro Vertikální, do 40 na Blur, to -10 ve vysílání. Pod obrázkem byste měli vidět krásný stínový efekt.

na Překrytí pozadí, vyberte klasický pro Typ pozadí a barva vyber jeden Černá barva, na Neprůhlednosti nastavme posuvník na 0.55

Na kartě pokročilý, chytneme se 20 pro všechny marže.

Vyberme naše Vnitřní část a přejděte na jeho kartu pokročilý v části Vlastní CSS zkopírujte a vložte následující fragment kódu:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(Pokud tuto sekci nemáte, nemáte verzi Pro, pokud chcete pokračovat, musíte svou verzi upgradovat).

Vyberme ještě jednou prostřední sloupec naší sekce V její záložce Styla v sekci Překrytí pozadí, zkontrolujte, zda jsme na kartě NORMÁLNÍ, pojďme snížit Neprůhlednost à 0.

Poté klikněte na záložku PŘEHLED, pak dál klasický pro typ pozadí a barva, vybrat tmavá barva, poténeprůhlednost z 0.55, a pro Doba trvání přechodu nastavíme posuvník na 0.5.

Zde je konečný výsledek naší manipulace.

Zduplikujme náš sloupec 2x a zbylé 2 prázdné sloupce smažte. Zbývá pouze změnit obrázek na pozadí a také obsah textové editory pro 2 nové sloupce.

Prohlédněte si svou práci na tabletu a smartphonu, abyste viděli, jak vypadá. Poté jej uložte nebo aktualizujte.

Tak. Právě jste zobrazili text nad obrázkem s Page Builder Elementor.

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Tak ! To je vše pro tento článek, který vám ukáže, jak zobrazit text nad obrázkem. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět 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.

...