Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Vil du opprette en gruppemedlemsseksjon med Elementor?

Vel, du har kommet til rett sted. I dag vil vi vise deg hvordan du lager en vakker teammedlemsseksjon med PageBuilderElementor.

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 av Elementor. 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 Innhold-fanen, sett Høyde til Min Høyde og velg VH Minimum 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, deretter i panelet under Innhold-fanen, sett også høyden til Min Høyde og glidebryteren til 450px.

opprette en gruppemedlemsseksjon med Elementor

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 rulle, Si igjen Ikke-gjentatt et Størrelse Dekke

opprette en gruppemedlemsseksjon med Elementor

I grenser definerer grenser 12.

La oss legge til skyggeeffekter. La oss endre i Box Shadow Vertikal 22, Utydelig 40 et Diffuser -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 store bokstaver et avstand mellom bokstavene1.2

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

opprette en gruppemedlemsseksjon med Elementor

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

opprette en gruppemedlemsseksjon med Elementor

La oss gå til fanen avansert og definere Toppmargin-15. La oss legge til widgeten Social Media Icons i vår indre del.

opprette en gruppemedlemsseksjon med Elementor

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

opprette en gruppemedlemsseksjon med Elementor

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

opprette en gruppemedlemsseksjon med Elementor

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;

}

opprette en gruppemedlemsseksjon med Elementor

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.

...

0 aksjer
del
tweet
Enregistrer