Vil du finne ut hvordan du zoomer inn på et profilkort med sidebygger-plugin Elementor ?
I denne nye opplæringen Elementor, viser vi deg hvordan du bruker en Zoom-effekt på et profilkort, mens du avslører navnet på profilen så vel som dens sosiale nettverksikoner.
Hvis du ikke aner hva vi vil snakke om i dag, inviterer vi deg til å se følgende video:
Så la oss gå tilbake til hvorfor vi er her.
For å fullføre denne opplæringen trenger du Pro-versjonen av Elementor, fordi vi kommer til å bruke tilpasset CSS-kode som kun støttes av denne versjonen avElementor.
La oss lage en ny seksjon med en struktur på 3 kolonner, og deretter i panelet, la oss definere Høyde på Min Høyde, og deretter Minimum høyde la oss klikke videre VH og sett glidebryteren til 100.
La oss legge til en widget Innvendig seksjon i den midterste kolonnen. Internseksjonswidgeten er som standard konfigurert med 2 kolonner, la oss slette en av dem. La oss konfigurere resten i panelet ved å endre det Høyde på Min Høyde og Minimum høyde la oss sette markøren til 400.
I fanen Stil, la oss endre Bakgrunnsoverlegg. Klikk på klassisk på typen bakgrunn, og velg et bilde fra biblioteket og velg i bildeinnstillingene Sentrert Sentrert på posisjon Dekke på størrelse. opasitet på 1 og
I avsnittet grenser klikk på % og gå inn 4 for alle kantsteinsradier.
Sett glidebryteren til i antall bokser 0 på Horisontal, På 70 på Vertikal, På 63 på Utydelig, På -60 på diffusor. Du bør se en vakker skyggeeffekt under bildet ditt.
På innvendig seksjon skyv Tittel-widget. Som tittel skriv inn Steve Jobs, i Style-fanen, velg fargen hvit # FFFFFF. I typografien velger du Størrelse 20.
Velg deretter kolonnen til Internal Section Widget og i Style-fanen, velg type kant ved å klikke på Solid, alle breddene på 1, og fargene på #FFFFFF.
I fanen avansert, endre margene til 15 og interne marginer på 20.
Sett nå inn ikonene for sosiale medier ved å dra widgeten for ikoner for sosiale medier inn i den interne delen.
Rediger lenker til sosiale medier i fanen Innhold ved å klikke på Hvert sosialt nettverk. Hvis du vil legge til andre sosiale nettverk, klikker du på Legg til-knappener et element
I ikonfeltet klikker du på ikonbibliotek og i søkefeltet skriver du inn de første bokstavene i det sosiale nettverket ditt, så snart du finner det, velg det og klikk på Sett inn-knappen.
Gå deretter til fanen Stil, i seksjonen icon, endre fargen til personnalisé.
Les også vår guide om; Hvordan legge til paginering med Elementor
Sur Hovedfarge, sett gjennomsiktighet til minimum.
Sur Sekundær farge, velg fargen # FFFFFF. På Størrelse, skriv inn 20, Intern margin på 0.4.
Klikk nå på fanen avansert, og i delen posisjoneringKlikk på personnalisé. Sikker tilpasset bredde, Tast inn 0.
Oppdag også Slik bruker du fargevelger med Elementor
Sur Stilling, velg absolutte, på Shift 15På Vertikal orientering choisir Lavog Offset på 20.
Velg igjen Innvendig seksjon og i fanen avansert, i seksjonen Custom CSS (Hvis du ikke har denne delen, oppgrader raskt til pro-versjonen av Elementor for å fortsette)
Kopier og lim inn følgende kode i denne delen:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori bør du ikke se mye, men hvis du holder musepekeren over bildet bør du se en zoom brukt på bildet.
Kopier og lim inn følgende kode etter forrige kode for å vise eller skjule visse elementer i kolonnen:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Så snart du holder musepekeren over bildet, gjelder zoomen for bildet, og navnene og ikonene til sosiale nettverk vises.
La oss duplisere denne kolonnen 2 ganger og slette de to andre kolonnene.
Endre bakgrunnsbildet til interne seksjoner, samt navn og koblinger til sosiale nettverk.
Der du går, du har nettopp gjort denne oppgaven enkelt. Bare forhåndsvis nettbrettet og smarttelefonen, og prøv å endre marginene for å matche hver enhet.
Få Elementor Pro nå!
konklusjonen
Så! Det er det for denne artikkelen som viser deg hvordan du bruker en Zoom-effekt på et profilkort. 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.
...
