Vil du opprette en teammedlemsseksjon med Elementor ?
Vel, du har kommet til rett sted. I dag vil vi vise deg hvordan du lager en vakker teammedlemsseksjon med Builder side Elementor.
For å fullføre denne opplæringen trenger du en pro-versjon av Elementor, fordi vi bruk tilpasset CSS-kode som kun er mulig med pro-versjonen avElementor. Hvis du ikke har gjort det ennå, oppdater den.
Og for å forstå hva vi snakker om i denne opplæringen, inviterer vi deg til å se følgende video:
For å komme i gang, lag en side og rediger den med Elementor.
Sett deretter inn en struktur med 3 kolonner i sistnevnte, deretter i panelet, under fanen Innhold, sett Høyde til Min Høyde og velg VH Min Høyde og sett deretter glidebryteren til 100.
La oss velge midtkolonnen for å endre den og gå til Avansert-fanen. La oss sette alle interne marginer til 30.
La oss sette inn en Inner Section-widget i denne kolonnen, deretter slette en av kolonnene i Inner Section, og deretter i panelet under fanen Innhold, la oss også sette høyden til Min høyde og glidebryteren til 450px.
PåVertikal justering velg Lav og overløp velg Maske.
I fanen Stil Endre bakgrunnen til klassisk og velg et bilde fra biblioteket ditt.
Les guiden vår om: Hvordan lage et produktkort med Elementor
Sur Stilling Velg Superior Sentrert, Filvedlegg på rulle, Si igjen på Ikke-gjentatt et Størrelse på Dekke
I grenser definerer grenser på 12.
La oss legge til skyggeeffekter. La oss endre i Box Shadow Vertikal på 22, Utydelig på 40 et Diffuser på -10.
La oss legge til en Tittel-widget i Intern delen og gi et navn til vårt medlem og senter widgeten.
Les også: Hvordan endre overskrift på siderulling med Elementor
I fanen Stil, La oss endre tekstfarge og typografi velge 22 for skriftstørrelse og 500 for fett, Transformation på store bokstaver et avstand mellom bokstavene på 1.2
Dupliser deretter tittel widget og endre tittelen på den andre widgeten og velg i typografi 15 for skriftstørrelse og 500 for bredden, transformasjon på défaut og bokstavavstand på 1.2
La oss gå til fanen avansert og definere Toppmargin på -15. La oss legge til widgeten Social Media Icons i vår indre del.
La oss gå til fanen Stil, endre fargen til Custom, gjør primærfargen gjennomsiktig og sett de indre margene til 0.30
I fanen avansert, Angi margene Høy på -15 og lav på 20
Velg deretter kolonnen i Inner Section for å endre den og i fanen Stil velg type klassisk og på farge la oss gripe #FFFFFF28.
Les også: Hvordan bla gjennom et langt bilde av en portefølje med Elementor
Velg deretter kolonnen i Inner Section for å endre den og i fanen avansert i felten CSS-klasser, la oss gå inn medlemsinfo
Velg deretter den indre seksjonen deretter i fanen avansert i felten Custom CSS, lim inn følgende kode:
/* CSS-glasseffekt */
velger {
--høyde: 150px;
--bunn: -150px;
overløp: skjult! viktig;
}
selector .member-info{
høyde: var(–høyde);
posisjon: absolutt;
bakgrunnsfilter: blur(15px);
bunn: 0;
overgang: .5s lett inn-ut;
}
Etter den første CSS-koden limer du inn følgende:
/* CSS for å skjule eller vise ved peker */
selector .member-info{
bunn: var(–bunn);
}
selector:hover.member-info{
bunn: 0px;
}
Nå når du holder musepekeren over bildet, vises medlemsinformasjon.
Dupliser kolonnen 2 ganger og slett de andre tomme kolonnene
Velg deretter Inner Section og endre bakgrunnsbildet til bildet av et annet teammedlem, endre navn og yrke, gjør det samme med den andre kolonnen.
Forhåndsvis arbeidet ditt på nettbrett og mobil mens du forbedrer marginer og slikt for bedre visning.
Og det er hvordan du kan lage en vakker Team Members-seksjon
Få Elementor Pro nå!
konklusjonen
Så! Det er det for denne opplæringen som viser deg hvordan du oppretter en gruppemedlemsseksjon. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
