Wil je leren hoe je een zweefeffect toevoegt aan items in de berichtenwidgetElementor?
Als u een WordPress-gebruiker bent die Elementor om je te maken Site web, moet u bekend zijn met de zweefeffectfunctie. Je vindt deze functie voornamelijk in elke widget-instelling Elementor.
Het zweefeffect kan uw elementen aantrekkelijk maken, dus het is een effectieve manier om de gebruikerservaring op uw website.
Over het hover-effect gesproken: dit artikel laat je zien hoe je dit laatste kunt toevoegen aan individuele berichtelementen in de widget Elementor Berichten gebruiken de aangepaste CSS van Elementor, met name het inzoom-zweefeffect.
Er zijn twee redenen waarom we deze tutorial voor je maken:
- Standaard kun je een zweefeffect aan een bericht toevoegen vanuit de Elementor-berichtenwidget. Maar het hover-effect zal erg basic/standaard zijn.
- Standaard kun je met Elementor een ritseffect toevoegen aan de Berichten-widget (tab vergevorderd -> transformator –> échelle). Maar het hover-effect heeft invloed op alle (niet individuele) widget-elementen voor posts.
Stappen om een ​​hover-effect toe te voegen aan individuele berichten vanuit de berichtenwidget van Elementor
Voordat we met de tutorial beginnen, willen we je laten weten dat deze tutorial gebruik maakt van Elementor's Custom CSS-functie. Deze functie is alleen beschikbaar op Elementor Pro; zorg ervoor dat u uw versie hebt bijgewerkt.
Stap 1: Berichtenwidget toevoegen
Ga naar je Elementor-editor en we beginnen alles opnieuw, dus maak een sectie met een enkele kolom.
Lees ook: Hoe MailChimp te integreren met Elementor
Selecteer vervolgens de widget Berichten in het widgetpaneel en sleep deze vervolgens naar het bewerkingsgebied. Nadat u de widget Berichten heeft toegevoegd, kunt u de widget bewerken en opmaken volgens uw voorkeuren.
Opmerking: Zorg ervoor dat u al artikelen op uw heeft gepubliceerd website.
Stap 2: Voeg het CSS-fragment toe
Nadat je de Berichten-widget hebt bewerkt en gestyled, voegen we vervolgens een zweefeffect toe aan een afzonderlijk bericht door het eenvoudige CSS-fragment toe te voegen. Ga in de instellingen van de widget Berichten naar Tab vergevorderd -> Aangepaste CSS. Kopieer het onderstaande CSS-fragment en plak het in het veld Aangepaste CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
De bovenstaande code selecteert het individuele postelement op de Posts-widget met behulp van de selector .élémentor-post en pas de CSS-transformatie toe.
Als u tevreden bent met het gebruikte hover-effect, kunt u dit zo houden en uw project opslaan als u dat wilt. Maar als u de overgangssnelheid en transformatieschaalwaarde wilt aanpassen, kunt u de waarde in het CSS-fragment wijzigen.
Opmerking: Transformeren/inzoomen is een veelvoorkomend en populair effect dat op websites wordt gebruikt. Als je meer wilt weten over andere methoden om hover-effecten te transformeren, kun je dit bezoeken pagina.
Ontdek ook: alle Elementor-widgetkiezers in het volgende artikel
Koop Elementor Pro nu!!!
Conclusie
Dit artikel laat zien hoe eenvoudig het is om een ​​hover-effect toe te voegen aan afzonderlijke berichtelementen in de berichtenwidget van Elementor met behulp van aangepaste CSS.
De techniek die we voor dit effect hebben gebruikt, is (inzoomen), waarbij 2D en enkele pseudo-getransformeerde elementen betrokken zijn. Pas alle soorten zweefeffecten aan en speel ermee totdat u het beste zweefeffect voor uw website vindt.
Alstublieft! We hebben u zojuist kennis laten maken met de beste tools voor marketing via e-mail voor Elementor. Als u zich zorgen maakt over het gebruik ervan, 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.
...
