Vill du lära dig hur man skapar ett kort med effekten av en portfölj? I den här nya handledningen kommer vi att visa dig hur du gör det med Elementor.
Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:
Låt oss sedan gå tillbaka till varför vi är här.
För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.
Läs också: Hur man visar text ovanför en bild med Elementor
Låt oss skapa en ny sektion med en struktur med tre kolumner, och sedan i panelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.
Låt oss välja mellankolumnen och släppa i den här kolumnen Intern sektionswidget. Widgeten Internal Section är konfigurerad med 2 kolumner som standard. Låt oss släppa widgeten under de två kolumnerna Titel med titeln Restaurang, Välj H4 för HTML-taggen och Centrum för inriktning.
På fliken advanced av titelwidgeten, låt oss gå in 30 för Toppmarginal
Låt oss återigen välja vår interna sektion. Låt oss ändra den i panelen HÖGMOD sur Min höjd och Minsta höjd låt oss ställa in markören på 380. Låt oss sedan ta bort den högra eller vänstra kolumnen i den interna sektionen
Låt oss släppa det Bildwidget i den interna sektionen och infoga en bild från vårt bibliotek. låt oss välja Hela för Bildstorlek et Centrum för Inriktning.
OBS: Om du vill ha kompletta sidor som vår, inbjuder vi dig att fånga sidorna med hjälp av Chrome-tillägget GoFullPage men du kan använda en annan också.
Upptäck också: Hur man skapar ett bildgalleri med Elementor
Sedan i fliken Stil, Klicka på PX de Bredd, låt oss ställa in reglaget på 260 och gränsstrålar sur 10
Låt oss sedan ändra Box Shadow genom att ändra Blur till 40 och Diffuse till -10.
På fliken Avancerat, i avsnittet positionering, Välj absolut för Placera, Horisontell orientering sur Gauche, den decalage sur 0, L 'Vertikal orientering sur Bas.
Låt oss duplicera vår bildwidget två gånger. Oundvikligen kommer de alla att läggas över varandra. Låt oss ta fram Navigatorn så att vi kan komma åt de andra widgetarna som är dolda av den första.
Låt oss byta ut bilden av den andra widgeten och i dess flik advanced, låt oss ändra dem bottenmarginaler et Gauche genom att komma in 30 för varje. Du kommer nu att se en liten fördröjning,
Gör samma sak för den tredje bildwidgeten, men använd marginaler på 60 för den nedre och vänstra marginalen. Du bör nu ha en översikt över alla tre bildwidgets.
Låt oss välja vår Internal Section-widget, gå till dess flik advanced och i avsnittet Anpassad CSS, kopiera och klistra in följande kodavsnitt:
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;
}(Om du inte har det här avsnittet så har du inte Pro-versionen, om du vill fortsätta måste du uppgradera din version)
Om du nu håller muspekaren över vår karta får du en zoomanimation
Låt oss välja vår första bildwidget (den lägsta) och i dess flik advanced, låt oss ta tag front-img för CSS klasser.
För den andra bildwidgeten, låt oss skriva mitten av bild för CSS-klasser.
För den tredje bildwidgeten, låt oss skriva sista bilden för CSS-klasser.
Se även: Hur man skapar ett flikgalleri med bilder med Elementor
Håller vi muspekaren över vår kolumn nu kommer vi att se en magnifik animation av innehåll av vår interna sektion.
Låt oss visa vår sida i surfplatta-läge. Vi kommer att se att bilderna inte kommer att visas korrekt.
Välj den första bildwidgeten, på fliken Stil, låt oss ändra bredden genom att klicka på PC och sedan ange 150 som bredd. Låt oss göra samma sak med de andra 2 bildwidgetarna.
Låt oss välja vår interna sektion, i dess sektion Innehåll, låt oss ändra Minsta höjd sur 225.
Låt oss också visa vår sida i smartphone-läge, a priori är det inga problem. Men om den presenterar någon, låt oss välja vår interna sektion, i dess sektion Innehåll, låt oss ändra minimihöjden.
Låt oss nu duplicera vår mittkolumn två gånger och sedan ta bort de andra två tomma kolumnerna.
Låt oss ändra rubrikerna för dessa kolumner och sedan ändra bilderna
Du måste ha en magnifik sektion som här är resultaten:
Där har du, du har precis gjort den här uppgiften enkelt.
Skaffa Elementor Pro nu!
Slutsats
Där är det ! Det var allt för den här artikeln som visar hur du skapar ett kort med portföljeffekt. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
