Wilt u weten hoe u kunt zoomen op een profielkaart met de plug-in voor het maken van pagina's? Elementor ?
In deze nieuwe tutorial Elementor, laten we u zien hoe u een zoomeffect toepast op een profielkaart, terwijl u de naam van het profiel en de pictogrammen voor sociale netwerken onthult.
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.
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 een widget toevoegen Interne sectie in de middelste kolom. De widget Interne sectie is standaard geconfigureerd met 2 kolommen, laten we er een verwijderen. Laten we de rest in het paneel configureren door zijn . te wijzigen hoogmoed op Minimale hoogte en Minimale hoogte laten we de cursor op . zetten 400.
In het tabblad Style , laten we de . aanpassen Achtergrondoverlay. Cliquez sur klassiek op het type achtergrond en selecteer een afbeelding uit de bibliotheek en selecteer in de afbeeldingsinstellingen Gecentreerd Gecentreerd op positie Bedekken op Maat. ondoorzichtigheid op 1 en
In de sectie borders klikken % en ga naar binnen 4 voor alle stoepranden.
Stel in het aantal vakken de schuifregelaar in op 0 op HorizontaalIn 70 op VerticaalIn 63 op FlouIn -60 op verdeler. Je zou een prachtig schaduweffect onder je afbeelding moeten zien.
In de interne sectie schuif de Titelwidget. Voer als titel Steve Jobs in, selecteer in het tabblad Stijl de kleur wit # FFFFFF. Selecteer in de typografie de Grootte 20.
Selecteer vervolgens de kolom van de interne sectiewidget en selecteer in het tabblad Stijl het type rand door op Effen te klikken, alle breedtes op 1 en de kleuren op #FFFFFF.
In het tabblad vergevorderd, verander de marges in 15 en interne marges op 20.
Voeg nu de sociale-mediapictogrammen in door de widget Sociale-mediapictogrammen naar het gedeelte Intern te slepen.
Bewerk links naar sociale media op het tabblad Inhoud door op Elk sociaal netwerk te klikken. Als u andere sociale netwerken wilt toevoegen, klikt u op de knop Toevoegeneh een element
Klik in het Pictogramveld op Pictogrambibliotheek en typ in de zoekbalk de eerste letters van uw sociale netwerk, zodra u het vindt, selecteert u het en klikt u op de knop Invoegen.
Ga dan naar het tabblad Style , in de sectie icon, verander de kleur in personnalisé.
Lees ook onze gids over; Hoe paginering toe te voegen met Elementor
Op het zuiden Hoofdkleur, zet transparantie op minimaal.
Op het zuiden Secundaire kleur, selecteer de kleur # FFFFFF. Voer bij Grootte in 20, Interne marge aan 0.4.
Klik nu op het tabblad vergevorderd, en in de sectie positioneringKlik op personnalisé. Zeker aangepaste breedte, voer in 0.
Ontdek ook Kleurkiezer gebruiken met Elementor
Op het zuiden Positie, selecteer Absolu, aan het werk 15Op Verticale oriëntatie choisir Basen verschuiving op 20.
Selecteer opnieuw de Interne sectie en in het tabblad vergevorderd, in de sectie Aangepaste CSS (Als je deze sectie niet hebt, upgrade dan snel naar de pro-versie van Elementor om door te gaan)
Kopieer en plak de volgende code in deze sectie:
/*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 zou je niet veel moeten zien, maar als je over de afbeelding zweeft, zou je een zoom moeten zien die op de afbeelding is toegepast.
Kopieer en plak nu de volgende code na de vorige code om bepaalde elementen van de kolom te tonen of te verbergen:
/*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;
}Zodra u nu over de afbeelding beweegt, wordt de zoom toegepast op de afbeelding en verschijnen de namen en pictogrammen van sociale netwerken.
Laten we deze kolom 2 keer dupliceren en de andere 2 kolommen verwijderen.
Wijzig de achtergrondafbeelding van interne secties, evenals de naam en links van sociale netwerken.
Daar ga je, je hebt deze taak zojuist gemakkelijk gedaan. Bekijk een voorbeeld van uw tablet- en smartphonewerk en probeer de marges aan te passen aan elk apparaat.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat was het voor dit artikel dat u laat zien hoe u een zoomeffect op een profielkaart toepast. 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.
...
