Behöver du lägga till en hovringseffekt i Elementor via anpassad CSS?
Elementor har en inbyggd funktion för att lägga till en svävningseffekt till ett element (vi behandlade det i en av våra artiklar. Även om funktionen är användbar nog har den en nackdel. Du kan bara lägga till en svävningseffekt till en sektion, kolumn, bildwidget, knappwidget och inläggswidget.
Läs också: Hur man installerar Elementor på WordPress
Elementors inbyggda hovringseffektfunktion tillåter dig inte att lägga till hovringseffekt till andra widgets som Text Editor-widget, Titelwidget, etc. En annan nackdel är att du bara kan lägga till väldigt grundläggande hovringseffekter.
Finns det något annat alternativ för att lägga till hovringseffekt i Elementor?
Ja det finns. Du kan lägga till hovringseffekt i Elementor genom anpassad CSS. Men för att kunna lägga till anpassad CSS måste du använda Elementor Pro eftersom anpassad CSS endast är tillgänglig på Elementor Pro.
Lägger till hovringseffekt i Elementor via anpassad CSS
Innan vi börjar, låt oss ta en titt på exemplet med hovringseffekter skapade genom anpassad CSS.
Till skillnad från Elementors inbyggda hovringseffekt kan du använda den här metoden för att lägga till en hovringseffekt till vilket element som helst i Elementor. Oavsett om det är en sektion, en kolumn eller en widget (alla widgets).
I det här exemplet visar vi dig hur du lägger till en hovringseffekt i en kolumn.
Klicka först på kolumnhandtaget för att växla till panelen för kolumninställningar. Väl där, gå till fliken advanced och öppna blocket Custom CSS och klistra in följande CSS-kod.
väljare: sväva {övergång: alla .2s lätthet-in-ut; transform: skala (1.1); markör: punkt; z-index: 1; }
Där.
I koden ovan använder vi CSS-egenskapen förvandla () för att lägga till hovringseffekten. Den typ av transformation vi använder i det här exemplet är skala, med en varaktighet på 1,1 sekunder.
Det finns fyra andra transformationstyper du kan använda med:transform
- Matris
- översätta
- Rotera
- skew
Om du vill använda en annan transformeringsstil kan du helt enkelt åsidosätta värdet på transformera på CSS-koden ovan.
Du kan läsa denna sida för att lära dig mer om CSS-transformation.
Du kan följa samma rutt för att lägga till en hovringseffekt till andra element.
För att lägga till en pekeffekt till en sektion kan du klicka på sektionshandtaget och gå till fliken advanced och öppna blocket Anpassad CSS.
För att lägga till en svävningseffekt till en widget kan du klicka på handtaget på widgeten och navigera till fliken igen Avancerad, öppna sedan blocket Anpassad CSS.
Andra ytterligare premium WordPress-plugins
Upptäck också andra Wordpress plugins premium som optimerar prestandan för din WordPress-blogg eller webbplats.
1. Live Sales Popup
Live Sales Popup är en annan Wordpress plugin avisering med flera godbitar som du kan förvandla till en fördel. Först och främst har han möjligheten visa ett popup-fönster när någon slutför en beställning. 
För det andra kan pop-up-fönstret i realtid också visa en avisering när en person helt enkelt lägger till en vara i kundvagnen. Och för det tredje kan du använda verktyget för att öka hype för en produkt genom att visa hur många besökare som tittade på artikeln.
Med de senaste webbtrenderna kan du förvänta dig att Live Sales Popup visas vackert på alla enheter och webbläsare. När det gäller popup-layouten kan du anpassa den till minsta detalj.
Att läsa: Hur fixar en säkerhetsvarning på din Wordpress blogg
De andra funktionerna i Live Sales Popup är mer än trettio animationer, ljud, nedräkningar och personlig positionering. Det fungerar också för falska meddelanden och låter dig bara ställa in det för specifika sidor där du vill att meddelandet ska utföra sin uppgift.
Ladda ner | demo | webbhotell
2. Foodify
Foodify är det snabbaste och lättaste sättet för kunder att beställa mat från en butik. Det är helt mottaglig och innehåller ytterligare funktioner som bild, sökalternativ, produktinformation. 
Det lägger också till knappar i korgen för att förbättra användarupplevelsen. Denna WooCommerce-förlängning är en snabb och omfattande beställningslösning som kan läggas till på vilken WooCommerce-webbplats som helst.
Här för dig 5 WordPress plugins för att optimera kategoribeskrivningar och etiketter
Det har fördelen att det är mycket flexibelt och kompatibelt med många befintliga plugins i WordPress-katalogen.
Ladda ner | demo | webbhotell
3. Mega Zoom & Pan Image Viewer
Mega Zoom & Pan Image Viewer-plugin är en fantastisk bildvisare och webbläsare med en fullt responsiv layout för att visa stora bilder på din Wordpress blogg.
Det är ett kraftfullt verktyg utformat för att presentera produkter (högupplösta produktbilder. Ex: kläder, bilar, tekniska diagram etc.), visa kartor och alla andra bilder, tack vare dess zoom, dess funktion panorama, dess navigeringskontroller, dess rullningsfältoch mycket anpassningsbara markörer / åtkomstpunkter.
här är Fem smartphone-appar för att skydda dina bilder och videor
Detta plugin fungerar bra på iOS (iPad, iPhone), Android och Windows Mobile, etc. Det fungerar också på alla moderna webbläsare och äldre webbläsare som IE7 eller IE8.
Ladda ner | demo | webbhotell
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.
- Hur man tar bort alla väntande kommentarer i WordPress
- När och hur man installerar Wordpress på en underkatalog
- 5 WordPress-plugins för att ge julglädjen till din webbplats
- 10 WordPress plugins för att förbättra visuellt av din webbplats
Slutsats
Så ! Det var allt för den här guiden. Vi hoppas att den här artikeln hjälpte dig att lägga till hovringseffekt i Elementor via anpassad CSS. Du kan också läsa vår artikel om Hur du fixar blockering av JavaScript och CSS-rendering i WordPress.
Du kommer dock också att kunna konsultera vår medel, 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.
Om du har en vän eller en kommentar, vänligen lämna den i sektionen kommentar. Till största del dela den här artikeln på dina olika sociala nätverk.
.
