Kunne du tænke dig at lære at lave et kort med effekten af ​​en portfolio? I denne nye tutorial vil vi vise dig, hvordan du gør det med Elementor.

Hvis du ikke aner, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:

lav et kort med porteføljeeffekt

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.

Læs også: Sådan viser du tekst over et billede med Elementor

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.

3 kolonne sektion

Lad os vælge den midterste kolonne og slippe den i denne kolonne Intern sektionswidget. Den interne sektions widget er som standard konfigureret med 2 kolonner. Lad os slippe widgetten under de 2 kolonner titel med titlen Restaurant, Vælg H4 for HTML-tagget, og Centrum til justering.

I fanen avanceret af titel-widgetten, lad os gå ind 30 til at Topmargin

lav et kort med porteføljeeffekt

Lad os igen vælge vores interne sektion. Lad os i panelet ændre den Højde ud af Min Højde og Minimum højde lad os sætte markøren til 380. Lad os derefter slette højre eller venstre kolonne i den interne sektion

lav et kort med porteføljeeffekt

Lad os droppe det Billed-widget i den interne sektion og indsæt et billede fra vores bibliotek. lad os vælge Hel for Billedestørrelse et Centrum for Justering.

lav et kort med porteføljeeffekt

NB: Hvis du vil have komplette sider som vores, inviterer vi dig til at fange siderne ved hjælp af Chrome-udvidelsen GoFullPage, men du kan også bruge en anden.

Opdag også: Sådan oprettes et billedgalleri med Elementor

Derefter i fanen stil, Klik på PX de Bredde, lad os indstille skyderen til 260 et les grænsestråler ud af 10

Lad os derefter ændre Box Shadow ved at ændre Blur til 40 og Diffuse til -10.

lav et kort med porteføljeeffekt

På fanen Avanceret i afsnittet positionering, Vælg absolutte til at Position, Horisontal orientering ud af venstre, décalage ud af 0, L 'Lodret orientering ud af Bas.

Lad os duplikere vores billedwidget to gange. De vil uundgåeligt alle blive overlejret. Lad os hente Navigator, så vi kan få adgang til de andre widgets, der er skjult af den første.

lav et kort med porteføljeeffekt

Lad os erstatte billedet af den anden widget og i dens faneblad avanceret, lad os ændre dem bundmargener et venstre ved at komme ind 30 for hver. Du vil nu se en lille forsinkelse, 

Gør det samme for den tredje billedwidget, men anvend margener på 60 for nederste og venstre margin. Du skulle nu have en oversigt over alle 3 billedwidgets.

lav et kort med porteføljeeffekt

Lad os vælge vores interne sektions-widget, gå til dens fane avanceret og i afsnittet Brugerdefineret CSS, kopier og indsæt følgende kodestykke:

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

(Hvis du ikke har denne sektion, så har du ikke Pro-versionen, hvis du vil fortsætte skal du opgradere din version)

Hvis du nu svæver over vores kort, får du en zoom-animation

lav et kort med porteføljeeffekt

Lad os vælge vores første billedwidget (den laveste) og i dens fane avanceret, lad os tage fat front-img for CSS klasser.

For den anden Image Widget, lad os skrive midt img til CSS-klasser.

For den tredje billedwidget, lad os skrive sidste billede til CSS-klasser.

Se også: Sådan opretter du et fanebladsgalleri med billeder med Elementor

Holder vi markøren over vores kolonne nu vil vi se en storslået animation af indhold af vores interne afdeling.

lav et kort med porteføljeeffekt

Lad os vise vores side i tablet-tilstand. Vi vil se, at billederne ikke vil blive vist korrekt.

lav et kort med porteføljeeffekt

Vælg den første Billed-widget, i dens Style-fane, lad os ændre bredden ved at klikke på pc og derefter indtaste 150 som bredde. Lad os gøre det samme med de to andre billedwidgets.

Lad os vælge vores interne sektion i dens sektion Indhold, lad os ændre Minimum højde ud af 225.

lav et kort med porteføljeeffekt

Lad os også vise vores side i smartphone-tilstand, på forhånd giver det ikke noget problem. Men hvis den præsenterer nogen, så lad os vælge vores interne sektion i dens sektion Indhold, lad os ændre minimumshøjden.

Lad os nu duplikere vores midterste kolonne 2 gange, og derefter slette de 2 andre tomme kolonner.

lav et kort med porteføljeeffekt

Lad os ændre titlerne på disse kolonner og derefter ændre billederne

Du bliver nødt til at have en storslået sektion, som her er resultaterne:

lav et kort med porteføljeeffekt

Der går du, du har lige gjort denne opgave nemt.

Hent Elementor Pro nu!

Konklusion

Der er det ! Det er det for denne artikel, der viser dig, hvordan du opretter et kort med effekten af ​​en portefølje. 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.

...