Kunne du tænke dig at finde ud af, hvordan du zoomer ind på et profilkort med sidebygger-plugin'et Elementor ?
I denne nye tutorial Elementor, viser vi dig, hvordan du anvender en Zoom-effekt på et profilkort, mens vi afslører navnet på profilen samt dens sociale netværksikoner.
Hvis du ikke aner, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:
Lad os derefter vende tilbage til, hvorfor vi er her.
For at fuldføre denne tutorial skal du bruge Pro-versionen af Elementor, da vi vil bruge tilpasset CSS-kode, som kun understøttes af denne version afElementor.
Lad os oprette en ny sektion med en 3-søjlestruktur, så lad os i panelet definere Højde ud af Min Højdeog så Minimum højde lad os klikke videre VH og sæt skyderen til 100.
Lad os tilføje en widget Internt afsnit i den midterste kolonne. Den interne sektions widget er som standard konfigureret med 2 kolonner, lad os slette en af dem. Lad os konfigurere resten i panelet ved at ændre det Højde ud af Min Højde og Minimum højde lad os sætte markøren til 400.
I fanen stil, lad os ændre Baggrundsoverlejring. Klik på klassisk på baggrundstypen, og vælg et billede fra biblioteket, og vælg i billedindstillingerne Centreret Centreret på stilling Dække over på størrelse. opacitet på 1 og
I afsnittet grænser klik % og gå ind 4 for alle kantstensradier.
Indstil skyderen til i antal felter 0 ud af Vandret, at 70 ud af Lodret, at 63 ud af sløret, at -60 ud af diffusor. Du bør se en smuk skyggeeffekt under dit billede.
I indre sektion glide Titel-widget. Indtast Steve Jobs som titel, og vælg farven hvid på fanen Stil #FFFFFF. Vælg Størrelse i typografien 20.
Vælg derefter kolonnen for den interne sektions-widget, og vælg kantens type på fanen Stil ved at klikke på Solid, alle bredderne på 1 og farverne på #FFFFFF.
I fanen avanceret, skift margenerne til 15 og interne marginer på 20.
Indsæt nu ikonerne for sociale medier ved at trække widgetten Ikoner til sociale medier ind i den interne sektion.
Rediger links til sociale medier på fanen Indhold ved at klikke på Hvert socialt netværk. Hvis du vil tilføje andre sociale netværk, skal du klikke på knappen Tilføjer et element
I ikonfeltet skal du klikke på Ikonbibliotek og i søgefeltet skriv de første bogstaver i dit sociale netværk, så snart du finder det, vælg det og klik på knappen Indsæt.
Gå derefter til fanen stil, i sektionen ikon, skift farven til Personnalisé.
Læs også vores guide om; Sådan tilføjes paginering med Elementor
Om Hovedfarve, indstil gennemsigtighed til minimum.
Om Sekundær farve, vælg farven #FFFFFF. Indtast på Størrelse 20, Intern margen på 0.4.
Klik nu på fanen avanceret, og i afsnittet positioneringKlik på Personnalisé. på tilpasset bredde, gå ind 0.
Opdag også Sådan bruges farvevælgeren med Elementor
Om Position, vælg absolutte, på Skift 15på Lodret orientering choisir BasOg skift ud af 20.
Vælg igen Internt afsnit og i fanen avanceret, i sektionen Brugerdefineret CSS (Hvis du ikke har denne sektion, så opgrader hurtigt til pro-versionen af Elementor for at fortsætte)
Kopiér og indsæt følgende kode i dette afsnit:
/*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 meget, men hvis du svæver over billedet, bør du se en zoom på billedet.
Kopier og indsæt nu følgende kode efter den forrige kode for at 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 markøren over billedet, gælder zoomen for billedet, og navnene og ikonerne på sociale netværk vises.
Lad os duplikere denne kolonne 2 gange og slette de andre 2 kolonner.
Skift baggrundsbilledet af interne sektioner, samt navn og links på sociale netværk.
Der går du, du har lige gjort denne opgave nemt. Bare se en forhåndsvisning af din tablets og smartphones arbejde, og prøv at ændre margener, så de passer til hver enhed.
Hent Elementor Pro nu!
Konklusion
Så! Det er det for denne artikel, der viser dig, hvordan du anvender en Zoom-effekt på et profilkort. Hvis du har nogen bekymringer om, hvordan du kommer dertil, så lad os det vide inden for 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.
...
