Kunne du tænke dig at oprette en teammedlemssektion med Elementor ?
Nå, du er kommet til det rigtige sted. I dag vil vi vise dig, hvordan du opretter en vidunderlig teammedlemssektion med Builder side Elementor.
For at fuldføre denne tutorial skal du bruge en Elementor pro version, fordi vi brug tilpasset CSS-kode hvilket kun er muligt med pro-versionen afElementor. Hvis du ikke har gjort det endnu, så opdater det.
Og for at forstå, hvad vi taler om i denne tutorial, inviterer vi dig til at se følgende video:
For at komme i gang skal du oprette en side og redigere den med Elementor.
Indsæt derefter en struktur med 3 kolonner i sidstnævnte, derefter i panelet under fanen Indhold, indstil Højde til Min Højde og vælg VH Min Højde og indstil derefter skyderen til 100.
Lad os vælge den midterste kolonne for at redigere den og gå til fanen Avanceret. Lad os sætte alle interne marginer til 30.
Lad os indsætte en indre sektion-widget i denne kolonne, derefter slette en af kolonnerne i den indre sektion og derefter i panelet under fanen Indhold, lad os også indstille højden til Min højde og skyderen til 450px.
På denLodret justering vælg Bas og overløb vælg Maske.
I fanen stil Skift baggrunden til klassisk og vælg et billede fra dit bibliotek.
Læs vores guide om: Sådan opretter du et produktkort med Elementor
Om Position Vælg Superior centreret, Vedhæftet fil ud af rulning, Sig det igen ud af Ikke-gentaget et Størrelse ud af Dække over
I grænser definere grænser ud af 12.
Lad os tilføje skyggeeffekter. Lad os ændre i Shade of box Lodret ud af 22, sløret ud af 40 et Diffuser ud af -10.
Lad os tilføje en Titel-widget i den Interne sektion og giv et navn til vores medlem og centre widgetten.
Læs også: Sådan ændrer du sidehoved på sidescrollning med Elementor
I fanen stil, Lad os ændre det tekst farve og typografi vælge 22 for skriftstørrelsen og 500 til at fedt, Transformation ud af store bogstaver et bogstavmellemrum ud af 1.2
Så lad os duplikere titel-widget og ændre titlen på den anden widget og i typografi vælge 15 for skriftstørrelsen og 500 for bredden, transformation på Defect og bogstavmellemrum på 1.2
Lad os gå til fanen avanceret og definere Topmargin ud af -15. Lad os tilføje widgetten Social Media Icons til vores indre sektion.
Lad os gå til fanen stil, skift farven til Brugerdefineret, gør den primære farve gennemsigtig og indstil de indre margener til 0.30
I fanen avanceret, Definer margenerne Høj på -15 og lav på 20
Vælg derefter kolonnen i den indre sektion for at ændre den og på fanen stil vælg type klassisk og på farve lad os gribe # FFFFFF28.
Læs også: Sådan ruller du gennem et langt billede af en portefølje med Elementor
Vælg derefter kolonnen i den indre sektion for at ændre den og på fanen avanceret i marken CSS klasser, lad os tage fat medlemsinfo
Vælg derefter Indre Sektion derefter på fanen avanceret i marken Brugerdefineret CSS, indsæt følgende kode:
/ * CSS glaseffekt * /
vælger {
– Højde: 150px;
–Bund: -150px;
overløb: skjult! vigtigt;
}
selector .member-info {
højde: var (–højde);
position: absolut;
baggrundsfilter: sløring (15px);
bund: 0;
overgang: .5s let ind-ud;
}
Efter den første CSS-kode skal du indsætte følgende:
/ * CSS for at skjule eller vise ved svæv * /
selector .member-info {
bund: var (–bund);
}
vælger: hover .member-info {
bund: 0 px;
}
Når du nu holder markøren over billedet, vises medlemsoplysninger.
Dupliker kolonnen 2 gange, og slet de andre tomme kolonner
Vælg derefter den indre sektion og skift baggrundsbilledet til billedet af et andet teammedlem, skift deres navn og erhverv, gør det samme med den anden kolonne.
Se et eksempel på dit arbejde på tablet og mobil, mens du forbedrer marginer og mere for bedre visning.
Og det er sådan, du kan oprette en vidunderlig Team Members-sektion
Hent Elementor Pro nu!
Konklusion
Så! Det var det for denne øvelse, der viser dig, hvordan du opretter en gruppemedlemssektion. Hvis du har nogen bekymringer om, hvordan du kommer dertil, så lad os det vide i kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
