Chcete vytvoriť sekciu členov tímu s Elementor ?
Tak ste na správnom mieste. Dnes vám ukážeme, ako vytvoriť skvelú sekciu pre členov tímu s Stránka Builder Elementor.
Na dokončenie tohto návodu budete potrebovať a Verzia Elementor Pro, pretože my použite vlastný kód CSS čo je možné len s profesionálnou verziouElementor. Ak ste tak ešte neurobili, aktualizujte ho.
A aby ste pochopili, o čom hovoríme v tomto návode, pozývame vás pozrieť si nasledujúce video:
Ak chcete začať, vytvorte stránku a upravte ju pomocou Elementor.
Potom vložte štruktúru s 3 stĺpcami do druhého, potom do panela pod záložku Obsah, nastavte Výška na Minimálnu výšku a vyberte Minimálnu výšku VH a potom nastavte posuvník na 100.
Vyberieme stredný stĺpec, ktorý ho upravíme, a prejdeme na kartu Rozšírené. Nastavme všetky vnútorné okraje na 30.
Do tohto stĺpca vložíme miniaplikáciu Vnútorná sekcia, potom vymažeme jeden zo stĺpcov vo vnútornej sekcii a potom na panel pod kartou Obsah, nastavíme aj výšku na Min. výšku a posuvník na 450px.
NaVertikálne zarovnanie vybrať bas a pretekať vybrať Maska.
Na karte Štýl Zmeňte pozadie na klasický a vyberte obrázok z knižnice.
Prečítajte si nášho sprievodcu: Ako vytvoriť kartu produktu pomocou Elementor
O poloha vybrať Superior Centered, Súbor prílohy sur rolovanie, Zopakuj sur Neopakované et veľkosť sur Kryt
V hraniciach definujte hranice sur 12.
Pridajme tieňové efekty. V Shade of box poďme upraviť Vertikálne sur 22, rozmazané sur 40 et Difúzor sur -10.
Pridajme a Miniaplikácia názvu v sekcii Interné a uveďte meno nášho člena a stred widget.
Čítajte tiež: Ako zmeniť hlavičku pri rolovaní stránky pomocou Elementor
Na karte Štýl, Upravme to farba textu a typografie vybrať 22 pre veľkosť písma a 500 pre tuk, Premena sur Veľké písmená et medzery medzi písmenami sur 1.2
Potom duplikujme titulný widget a upravte názov druhého widgetu a v typografii vyberte 15 pre veľkosť písma a 500 pre šírku, transformácia zapnutá défaut a medzery medzi písmenami 1.2
Poďme na kartu pokročilý a definovať Horný okraj sur -15. Pridajme widget Ikony sociálnych médií do našej sekcie Vnútorné.
Poďme na kartu Štýl, zmeňte farbu na Vlastnú, urobte základnú farbu priehľadnou a nastavte vnútorné okraje na 0.30
Na karte pokročilý, Definujte okraje Vysoká na -15 a nízka na 20
Potom vyberte stĺpec vnútornej sekcie a upravte ho na karte Štýl vyberte typ klasický a na farbe poďme zabaviť # FFFFFF28.
Prečítajte si tiež: Ako prechádzať dlhým obrázkom portfólia pomocou Elementor
Potom vyberte stĺpec vnútornej sekcie a upravte ho na karte pokročilý v teréne CSS triedy, chytíme sa člen-info
Potom vyberte Vnútorná časť potom v záložke pokročilý v teréne Vlastné CSS, prilepte nasledujúci kód:
/ * CSS efekt skla * /
selektor {
– Výška: 150px;
–Spodok: -150px;
pretečenie: skryté!
}
selektor .member-info {
výška: var (–výška);
pozícia: absolútna;
filter pozadia: rozostrenie (15px);
spodná časť: 0;
prechod: 5 s ľahký-in-out;
}
Za prvý kód CSS prilepte nasledovné:
/ * CSS na skrytie alebo zobrazenie pri umiestnení kurzora myši * /
selektor .member-info {
spodok: var (–dole);
}
selektor: hover .member-info {
dole: 0px;
}
Keď teraz umiestnite kurzor myši na obrázok, zobrazia sa informácie o členovi.
2-krát duplikujte stĺpec a odstráňte ostatné prázdne stĺpce
Potom vyberte Vnútornú sekciu a zmeňte obrázok na pozadí na obrázok iného člena tímu, zmeňte jeho meno a povolanie, urobte to isté s druhým stĺpcom.
Ukážte svoju prácu na tablete a mobilnom zariadení a zároveň zlepšite okraje a ešte viac pre lepšie zobrazenie.
A tak môžete vytvoriť skvelú sekciu Členovia tímu
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento tutoriál, ktorý vám ukáže, ako vytvoriť sekciu členov tímu. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť v 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.
...
