Vil du lære hvordan du lager et kort med effekten av en portefølje? I denne nye opplæringen vil vi vise deg hvordan du gjør det med Elementor.
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.
Les også: Hvordan vise tekst over et bilde med Elementor
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 velge den midterste kolonnen, og slippe i denne kolonnen Intern seksjonswidget. Intern seksjon-widgeten er konfigurert med 2 kolonner som standard. La oss slippe widgeten under de to kolonnene Tittel med tittelen Restaurant, plukke ut H4 for HTML-taggen, og Senter for justering.
I fanen avansert av Tittel-widgeten, la oss gå inn 30 for Toppmargin
La oss igjen velge vår interne seksjon. La oss endre den i panelet Høyde på Min Høyde og Minimum høyde la oss sette markøren til 380. La oss deretter slette høyre eller venstre kolonne i den interne delen
La oss slippe det Bilde-widget i den interne delen og sett inn et bilde fra biblioteket vårt. la oss velge Hel for Bildestørrelse et Senter for Justering.
NB: Hvis du vil ha komplette sider som vår, inviterer vi deg til å fange sidene ved hjelp av Chrome-utvidelsen GoFullPage, men du kan bruke en annen også.
Oppdag også: Hvordan lage et bildegalleri med Elementor
Så i fanen Stil, klikk på PX de Bredde, la oss sette glidebryteren til 260 et les grensestråler på 10
La oss deretter endre Box Shadow ved å endre Blur til 40 og Diffuse til -10.
I Avansert-fanen, i delen posisjonering, plukke ut absolutte for Stilling, Horisontal orientering på venstreden décalage på 0, L 'Vertikal orientering på Lav.
La oss duplisere bildewidgeten vår to ganger. Uunngåelig vil de alle bli lagt over hverandre. La oss hente frem Navigator slik at vi kan få tilgang til de andre widgetene som er skjult av den første.
La oss erstatte bildet av den andre widgeten og i dens fane avansert, la oss endre dem bunnmarger et venstre ved å gå inn 30 for hver. Du vil nå se en liten forsinkelse,
Gjør det samme for den tredje bildewidgeten, men bruk marger på 60 for nederste og venstre marg. Du bør nå ha en oversikt over alle 3 bildewidgetene.
La oss velge vår Internal Section-widget, gå til fanen avansert og i seksjonen Custom CSS, kopier og lim inn følgende kodebit:
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 delen så har du ikke Pro-versjonen, hvis du vil fortsette må du oppgradere din versjon)
Hvis du nå holder musepekeren over kartet vårt, vil du ha en zoom-animasjon
La oss velge vår første bildewidget (den laveste) og i dens fane avansert, la oss gå inn front-img for CSS-klasser.
For den andre bildewidgeten, la oss skrive mid img for CSS-klasser.
For den tredje bildewidgeten, la oss skrive siste bilde for CSS-klasser.
Se også: Hvordan lage et fanegalleri med bilder med Elementor
Holder vi musepekeren over kolonnen vår nå vil vi se en fantastisk animasjon av innhold av vår interne seksjon.
La oss vise siden vår i nettbrettmodus. Vi vil se at bildene ikke vises riktig.
Velg den første bilde-widgeten, i stil-fanen, la oss endre bredden ved å klikke på PC og deretter skrive inn 150 som bredde. La oss gjøre det samme med de to andre bildemodulene.
La oss velge vår interne seksjon, i dens seksjon Innhold, la oss endre Minimum høyde på 225.
La oss også vise siden vår i smarttelefonmodus, på forhånd gir det ikke noe problem. Men hvis den presenterer noen, la oss velge vår interne seksjon, i dens seksjon Innhold, la oss endre minimumshøyden.
La oss nå duplisere midtkolonnen 2 ganger, og deretter slette de 2 andre tomme kolonnene.
La oss endre titlene til disse kolonnene og deretter endre bildene
Du må ha en fantastisk del som her er resultatene:
Der du går, du har nettopp gjort denne oppgaven enkelt.
Få Elementor Pro nå!
konklusjonen
Der er den! Det er det for denne artikkelen som viser deg hvordan du lager et kort med porteføljeeffekt. 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.
...
