Wil je leren hoe je een kaart maakt met het effect van een portfolio? In deze nieuwe tutorial laten we je zien hoe je dit doet met Elementor.
Als je geen idee hebt waar we het vandaag over willen hebben, nodigen we je uit om de volgende video te bekijken:
Laten we dan teruggaan naar waarom we hier zijn.
Om deze tutorial te voltooien, heb je nodig: de Pro-versie van Elementor, omdat we aangepaste CSS-code zullen gebruiken die alleen wordt ondersteund door deze versie vanElementor.
Lees ook: Tekst boven een afbeelding weergeven met Elementor
Laten we een nieuwe sectie maken met een structuur met 3 kolommen en vervolgens in het paneel de . definiëren hoogmoed op Minimale hoogte, en dan Minimale hoogte laten we klikken op VH en zet de schuifregelaar op 100.
Laten we de middelste kolom selecteren en in deze kolom de Interne sectiewidget. De widget Interne sectie is standaard geconfigureerd met 2 kolommen. Laten we de widget onder de 2 kolommen neerzetten Titel met de titel Restaurant, selecteer H4 voor de HTML-tag, en Centrum voor uitlijning.
In het tabblad vergevorderd van de titelwidget, laten we invoeren 30 voor Bovenmarge
Laten we nogmaals onze interne sectie selecteren. Laten we in het paneel zijn . wijzigen hoogmoed op Minimale hoogte en Minimale hoogte laten we de cursor op . zetten 380. Laten we dan de rechter- of linkerkolom van de sectie Intern verwijderen
Laten we het laten vallen Afbeeldingswidget in de interne sectie en voeg een afbeelding uit onze bibliotheek in. laten we selecteren Geheel voor Afbeeldingsgrootte et Centrum voor Uitlijning.
NB: Als u volledige pagina's zoals de onze wilt hebben, nodigen we u uit om de pagina's vast te leggen met behulp van de Chrome-extensie GoFullPage, maar u kunt ook een andere gebruiken.
Ontdek ook: Hoe maak je een afbeeldingengalerij met Elementor
Dan in de Tab Style , Klik op PX de Breedte, laten we de schuifregelaar op . zetten 260 en grens stralen op 10
Laten we vervolgens de Box Shadow aanpassen door de Blur te wijzigen in 40 en Diffuse in -10.
Op het tabblad Geavanceerd, in de sectie positionering, selecteer Absolu voor Positie, Horizontale oriëntatie op Onhandigde Tijdsverschil op 0,Verticale oriëntatie op Bas.
Laten we onze afbeeldingswidget twee keer dupliceren. Het is onvermijdelijk dat ze allemaal over elkaar heen worden gelegd. Laten we de Navigator openen, zodat we toegang hebben tot de andere widgets die door de eerste zijn verborgen.
Laten we de afbeelding van de tweede Widget vervangen en in zijn Tab vergevorderd, laten we ze aanpassen onderste marges et Onhandig door binnen te komen 30 voor elk. Je ziet nu een kleine vertraging,
Doe hetzelfde voor de derde afbeeldingswidget, maar pas marges toe van 60 voor de onder- en linkermarge. U zou nu een overzicht moeten hebben van alle 3 afbeeldingswidgets.
Laten we onze interne sectie-widget selecteren, ga naar zijn Tab vergevorderd en in de sectie Aangepaste CSS, kopieer en plak het volgende codefragment:
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;
}(Als je deze sectie niet hebt, heb je de Pro-versie niet, als je door wilt gaan, moet je je versie upgraden)
Als u nu over onze kaart zweeft, krijgt u een zoomanimatie
Laten we onze eerste afbeeldingswidget selecteren (de laagste) en in zijn Tab vergevorderd, laten we grijpen voorkant-img voor CSS-klassen.
Laten we voor de tweede afbeeldingswidget typen midden afbeelding voor CSS-klassen.
Laten we voor de derde afbeeldingswidget typen laatste-img voor CSS-klassen.
Zie ook: Een galerij met afbeeldingen met tabbladen maken met Elementor
Als we nu over onze kolom zweven, zien we een prachtige animatie van de inhoud van onze interne afdeling.
Laten we onze pagina in tabletmodus weergeven. We zullen zien dat de afbeeldingen niet correct worden weergegeven.
Selecteer de eerste afbeeldingswidget, in het tabblad Stijl, laten we de breedte wijzigen door op pc te klikken en vervolgens 150 als breedte in te voeren. Laten we hetzelfde doen met de andere 2 afbeeldingswidgets.
Laten we onze interne sectie in zijn sectie selecteren Inhoud, laten we de . aanpassen Minimale hoogte op 225.
Laten we onze pagina ook in de smartphonemodus weergeven, a priori levert dit geen enkel probleem op. Maar als het er een is, laten we dan onze interne sectie in zijn sectie selecteren Inhoud, laten we de minimale hoogte aanpassen.
Laten we nu onze middelste kolom twee keer dupliceren en vervolgens de andere twee lege kolommen verwijderen.
Laten we de titels van deze kolommen wijzigen en vervolgens de afbeeldingen wijzigen
Je zult een prachtige sectie moeten hebben waarvan hier de resultaten zijn:
Daar ga je, je hebt deze taak zojuist gemakkelijk gedaan.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat was het voor dit artikel dat je laat zien hoe je een kaart maakt met het effect van een portfolio. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
