Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Chceli by ste vytvoriť sekciu členov tímu pomocou Elementor?

Tak ste na správnom mieste. Dnes vám ukážeme, ako vytvoriť skvelú sekciu pre členov tímu s Stránka Elementor Builder.

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 verziou Elementor. 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 do nej vložte 3 stĺpcovú štruktúru, potom na paneli na karte 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.

Vložme do tohto stĺpca miniaplikáciu Vnútorná sekcia, potom odstráňte jeden zo stĺpcov obsiahnutých vo Vnútornej sekcii, potom na paneli pod kartou Obsah tiež nastavte výšku na Minimálnu výšku a posúvač na 450 pixelov.

vytvorte sekciu členov tímu pomocou Elementor

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

vytvorte sekciu členov tímu pomocou Elementor

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

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

vytvorte sekciu členov tímu pomocou Elementor

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

vytvorte sekciu členov tímu pomocou Elementor

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é.

vytvorte sekciu členov tímu pomocou Elementor

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

vytvorte sekciu členov tímu pomocou Elementor

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

vytvorte sekciu členov tímu pomocou Elementor

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;

}

vytvorte sekciu členov tímu pomocou Elementor

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.

...

0 akcie
podiel
tweet
Registrovať