Priali ste si niekedy vedieť, ako zobraziť text nad obrázkom pomocou Elementor ?

V tomto novom návode vám ukážeme, ako na to.

Ak neviete, o čom dnes chceme hovoriť, pozývame vás pozrieť si nasledujúce video:

Potom sa vráťme k tomu, prečo sme tu.

Na dokončenie tohto návodu budete potrebovať verzia Elementor Pro, pretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verziaElementor.

Objavte aj nášho sprievodcu: Ako vytvoriť galériu obrázkov s Elementorom

Vytvorme novú sekciu s 3 stĺpcovou štruktúrou, potom v paneli definujme Výška sur Min. výška, a potom Minimálna výška kliknime ďalej VH a nastavte posúvač na 100.

Vyberieme stredný stĺpec a na karte Štýl, v časti pozadia kliknime ďalej klasický pre Typ pozadiaa potom vyberte tmavú farbu.

Dajme do tohto stĺpca Widget vnútornej sekcie. Widget Interná sekcia je štandardne nakonfigurovaný s 2 stĺpcami, vymažme jeden z nich. Nakonfigurujme zvyšok v paneli jeho úpravou Výška sur Min. výška a Minimálna výška nastavíme kurzor na 400.

Čítajte tiež: Elementor: Ako priblížiť kartu profilu

Potom, na Vertikálne zarovnanie vyberme si Milieu.

Potom zahoďte Miniaplikácia názvu v vnútorná časť zadáme ako Titulnú fotografiu a na Zarovnaní vyberieme centrum.

Na karte Štýl upravme farbu nadpisu tak, aby bola viditeľná, ak nie je,

Pustíme a Miniaplikácia Textový editor pod Miniaplikácia názvu. Potom na karte Štýl, na Zarovnanie vyberte Stred. Zmeňme aj farbu textu, aby bola viditeľná.

Pozri tiež: Elementor: Ako pridať oddeľovač na vytvorenie sekcie

Vyberme si stredný stĺpec a v jeho záložke Štýl, resetujte farbu pozadia a načítajte obrázok poloha vyberme si Centered Centered, opakovať sur Neopakovať sa, Kryt sur veľkosť.

V sekcii hraničné poďme všetko upraviť hraničné polomery z 12, V krabicový tieň, nastavte posúvač na 0 pre HorizontálneNa 0 pre Vertikálne, do 40 na Blur, do -10 vo vysielaní. Pod obrázkom by ste mali vidieť krásny tieňový efekt.

O Prekrytie pozadia, vyberte klasický pre Typ pozadia a farba zvoľte jedno čierna farba, na Nepriehľadnosti nastavme posuvník na 0.55

Na karte pokročilý, chytíme sa 20 pre všetky marže.

Vyberme si naše Vnútorná časť a prejdite na jeho kartu pokročilý v sekcii Custom CSS skopírujte a prilepte nasledujúci útržok kódu:

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

(Ak túto sekciu nemáte, nemáte verziu Pro, ak chcete pokračovať, musíte aktualizovať svoju verziu).

Vyberme ešte raz stredný stĺpec našej sekcie V jej záložke Štýla v sekcii Prekrytie pozadia, skontrolujte, či sme na karte NORMAL, poďme nižšie Nepriehľadnosť à 0.

Potom kliknite na kartu PREHĽAD, potom ďalej klasický pre typ pozadia a farba, vyberte a tmavá farba, potomNepriehľadnosť sur 0.55, a pre Trvanie prechodu nastavíme posúvač na 0.5.

Tu je konečný výsledok našej manipulácie.

Zduplikujme náš stĺpec 2-krát a vymažme ďalšie 2 prázdne stĺpce. Zostáva len zmeniť obrázok na pozadí, ako aj obsah textové editory pre 2 nové stĺpce.

Ukážte svoju prácu na tablete a smartfóne, aby ste videli, ako vyzerá. Potom ho uložte alebo aktualizujte.

Takže. Práve ste zobrazili text nad obrázkom s Page Builder Elementor.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako zobraziť text nad obrázkom. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...