Želite li stvoriti odjeljak za članove tima s Elementor ?
Pa došli ste na pravo mjesto. Danas ćemo vam pokazati kako stvoriti prekrasan odjeljak za članove tima s Stranica graditelja Elementor.
Da biste dovršili ovaj vodič, trebat će vam a pro verzija Elementora, zato što mi koristite prilagođeni CSS kod što je moguće samo s pro verzijomElementor. Ako to još niste učinili, ažurirajte ga.
A da biste razumjeli o čemu govorimo u ovom vodiču, pozivamo vas da pogledate sljedeći video:
Za početak stvorite stranicu i uredite je pomoću Elementora.
Zatim umetnite strukturu s 3 stupca u potonji, zatim u ploču, ispod kartice Sadržaj, postavite Height na Min Height i odaberite VH Min Height zatim postavite klizač na 100.
Odaberimo srednji stupac da ga izmijenimo i idemo na karticu Napredno. Postavimo sve interne margine na 30.
Umetnimo widget unutarnjeg odjeljka u ovaj stupac, zatim izbrišite jedan od stupaca sadržanih u unutarnjem odjeljku, a zatim na ploči pod karticom Sadržaj, također postavimo visinu na Min Height i klizač na 450px.
NaVertikalno poravnanje odabrati Bas i prelijevanje odabrati Maska.
U kartici Stil Promijenite pozadinu u klasična i odaberite sliku iz svoje biblioteke.
Pročitajte naš vodič na: Kako napraviti karticu proizvoda s Elementorom
na Položaj odabrati Superior Centered, Privitak sur pomicanje, Reci opet sur Neponovljeno et Veličina sur Pokriti
U granicama definirajte granice sur 12.
Dodajmo efekte sjene. U sjeni Box izmijenimo vertikala sur 22, Nejasno sur 40 et Difuzor sur -10.
Dodajmo a Widget naslova u Internom dijelu i dajte ime našem članu i centar widget.
Pročitajte također: Kako promijeniti zaglavlje na pomicanju stranice pomoću Elementora
U kartici Stil, Izmijenimo boja teksta i tipografija izabrati 22 za veličinu fonta i 500 za mast, transformacija sur velikim slovima et razmak između slova sur 1.2
Zatim duplicirajte naslovni widget i izmijenite naslov drugog widgeta i u tipografiji odaberite 15 za veličinu fonta i 500 za širinu, transformacija na greška i razmak između slova na 1.2
Idemo na karticu napredan i definirati Gornja marža sur -15. Dodajmo widget Ikone društvenih medija u naš unutarnji odjeljak.
Idemo na karticu Stil, promijenite boju u Custom, učinite primarnu boju prozirnom i postavite unutarnje margine na 0.30
U kartici napredan, Postavite margine Visoko na -15, a nisko na 20
Zatim odaberite stupac unutarnjeg odjeljka da ga izmijenite i na kartici Stil odaberite vrstu klasična a na boju zagrabimo #FFFFFF28.
Pročitajte također: Kako se pomicati kroz dugu sliku portfelja pomoću Elementora
Zatim odaberite stupac unutarnjeg odjeljka da ga izmijenite i na kartici napredan u polju CSS klase, uđimo informacije o članu
Zatim odaberite Unutarnji dio zatim u kartici napredan u polju Prilagođena CSS, zalijepite sljedeći kod:
/* CSS efekt stakla */
selektor {
--visina: 150px;
--dolje: -150px;
prelijevanje: skriveno!važno;
}
selektor .member-info{
visina: var(–visina);
položaj: apsolutni;
pozadina-filter: zamućenje (15px);
dolje: 0;
prijelaz: .5s jednostavnost ulaska;
}
Nakon prvog CSS koda, zalijepite sljedeće:
/* CSS za sakrivanje ili prikaz pri pokazivaču miša */
selektor .member-info{
dno: var(–dno);
}
selektor: lebdite .member-info{
dno: 0px;
}
Sada kada zadržite pokazivač iznad slike, pojavljuju se podaci o članovima.
Duplicirajte stupac 2 puta i izbrišite ostale prazne stupce
Zatim odaberite Inner Section i promijenite pozadinu u sliku drugog člana tima, promijenite njegovo ime i zanimanje, učinite isto s drugim stupcem.
Pregledajte svoj rad na tabletu i mobilnom uređaju uz poboljšanje margina i slično za bolji pregled.
I tako možete stvoriti prekrasan odjeljak Članovi tima
Nabavite Elementor Pro odmah!
Zaključak
Dakle ! To je to za ovaj vodič koji vam pokazuje kako stvoriti odjeljak za članove tima. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
