Müssen Sie den Hover-Effekt in Elementor über benutzerdefiniertes CSS hinzufügen?
Elementor verfügt über eine integrierte Funktion, um einem Element einen Hover-Effekt hinzuzufügen (Wir haben dies in einem unserer Artikel behandelt. Obwohl die Funktion nützlich genug ist, hat sie einen Nachteil. Sie können nur einen Hover-Effekt hinzufügen. eine Spalte, ein Bild-Widget, ein Schaltflächen-Widget und ein Posts-Widget.
Lesen Sie auch: So installieren Sie Elementor auf WordPress
Mit der integrierten Hover-Effekt-Funktion von Elementor können Sie keinen Hover-Effekt zu anderen Widgets wie dem Texteditor-Widget, dem Titel-Widget usw. hinzufügen. Ein weiterer Nachteil ist, dass Sie nur einen sehr einfachen Hover-Effekt hinzufügen können.
Gibt es eine andere Option zum Hinzufügen des Hover-Effekts in Elementor?
Ja da ist. Sie können den Hover-Effekt in Elementor über benutzerdefiniertes CSS hinzufügen. Um jedoch benutzerdefiniertes CSS hinzuzufügen, müssen Sie Elementor Pro verwenden, da benutzerdefiniertes CSS nur auf Elementor Pro verfügbar ist.
Hinzufügen eines Hover-Effekts in Elementor über benutzerdefiniertes CSS
Bevor wir beginnen, werfen wir einen Blick auf das Beispiel von Hover-Effekten, die mit benutzerdefiniertem CSS erstellt wurden.
Im Gegensatz zum integrierten Hover-Effekt von Elementor können Sie diese Methode verwenden, um jedem Element in Elementor einen Punkteffekt hinzuzufügen. Ob Abschnitt, Spalte oder Widget (alle Widgets).
In diesem Beispiel zeigen wir Ihnen, wie Sie einer Spalte einen Punkteffekt hinzufügen.
Klicken Sie zuerst auf den Spaltenziehpunkt, um zum Spalteneinstellungsfenster zu wechseln. Dort angekommen, gehen Sie auf die Registerkarte fortgeschritten und öffne den Block Maßgeschneidert CSS und fügen Sie den folgenden CSS-Code ein.
Selektor: Hover {Übergang: alle .2s Ease-In-Out; transformieren: Skala (1.1); Cursor: Punkt; z-Index: 1; }
Voilà.
Im obigen Code verwenden wir die CSS-Eigenschaft verwandeln() um den Hover-Effekt hinzuzufügen. Der Transformationstyp, den wir in diesem Beispiel verwenden, ist skaliert mit einer Dauer von 1,1 Sekunden.
Es gibt 4 weitere Arten von Transformationen, die Sie verwenden können:transform
- Matrix
- Übersetzen
- Drehen
- Schiefe
Wenn Sie einen anderen Transformationsstil verwenden möchten, können Sie einfach den Wert von replace ersetzen transformieren auf dem CSS-Code oben.
Sie können lesen, seite aufrufen um mehr über die CSS-Transformation zu erfahren.
Sie können der gleichen Route folgen, um anderen Elementen einen Hover-Effekt hinzuzufügen.
Um einem Abschnitt einen Punkteffekt hinzuzufügen, klicken Sie auf den Abschnittsgriff und gehen Sie zur Registerkarte fortgeschritten und öffne den Block Benutzerdefinierte CSS.
Um einem Widget einen Hover-Effekt hinzuzufügen, können Sie auf den Griff des Widgets klicken und erneut zur Registerkarte wechseln. Fortgeschrittene, dann öffne den Block Benutzerdefinierte CSS.
Weitere zusätzliche Premium-WordPress-Plugins
Entdecken Sie auch andere Wordpress-Plugins Premium, die die Leistung Ihres WordPress-Blogs oder Ihrer Website optimieren.
1. Live-Verkaufs-Popup
Live Sales Popup ist ein weiteres WordPress Plugin Benachrichtigung mit mehreren Goodies, die Sie in einen Vorteil verwandeln können. Zunächst einmal hat er die Möglichkeit ein Popup-Fenster anzeigen wenn jemand eine Bestellung abschließt. 
Zweitens kann das Popup-Fenster für Verkäufe in Echtzeit auch eine Benachrichtigung anzeigen, wenn eine Person einfach einen Artikel in den Warenkorb legt. Und drittens können Sie das Tool verwenden, um den Hype für ein Produkt zu steigern, indem Sie anzeigen, wie viele Besucher den Artikel angesehen haben.
Mit den neuesten Webtrends können Sie erwarten, dass Live Sales Popup auf allen Geräten und Browsern hervorragend angezeigt wird. Das Popup-Layout kann bis ins kleinste Detail angepasst werden.
lesen Sie: Wie eine Sicherheitswarnung auf Ihrem Wordpress-Blog zu beheben
Die anderen Funktionen von Live Sales Popup sind mehr als dreißig Animationen, Sounds, Countdowns und personalisierte Positionierung. Es funktioniert auch für gefälschte Benachrichtigungen und lässt Sie nur für bestimmte Seiten festlegen, auf denen die Benachrichtigung ihre Aufgabe ausführen soll.
Herunterladen | Demo | Web-Hosting
2. Foodify
Foodify ist die schnellste und einfachste Möglichkeit für Kunden, Lebensmittel in einem Geschäft zu bestellen. Es ist ganz ansprechbar und enthält zusätzliche Funktionen wie Bild, SuchoptionProduktinformationen. 
Außerdem werden dem Warenkorb Schaltflächen hinzugefügt, um diese zu verbessern die Benutzererfahrung. Diese WooCommerce-Erweiterung ist eine schnelle und umfassende Bestelllösung, die zu jeder WooCommerce-Website hinzugefügt werden kann.
Hier für dich 5 WordPress-Plugins zur Optimierung von Kategoriebeschreibungen und Beschriftungen
Es hat den Vorteil, dass es sehr flexibel und kompatibel mit vielen vorhandenen Plugins im WordPress-Verzeichnis ist.
Herunterladen | Demo | Web-Hosting
3. Mega Zoom & Pan Image Viewer
Das Mega Zoom & Pan Image Viewer-Plugin ist ein großartiger Bildbetrachter und Browser mit einem vollständig ansprechenden Layout zum Anzeigen großer Bilder auf Ihrem Wordpress-Blog.
Es ist ein leistungsstarkes Tool, das dank seines Zooms und seiner Funktion Produkte (hochauflösende Produktbilder, z. B. Kleidung, Autos, technische Diagramme usw.), Karten und alle anderen Bilder präsentiert Panorama, seine Navigationssteuerung, seine Bildlaufleisteund hochgradig anpassbare Markierungen / Zugangspunkte.
Hier sind 5 Smartphone-Apps zum Schutz Ihrer Bilder und Videos
Dieses Plugin funktioniert hervorragend auf iOS (iPad, iPhone), Android und Windows Mobile usw. Es funktioniert auch auf allen modernen Browsern und älteren Browsern wie IE7 oder IE8.
Andere empfohlene Ressourcen
Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.
- So löschen Sie alle ausstehenden Kommentare in WordPress
- Wann und wie Wordpress in einem Unterverzeichnis installieren
- 5 WordPress-Plugins, um Ihrer Website die Freude an Weihnachten zu verleihen
- 10 WordPress Plugins zur Verbesserung der visuellen Darstellung Ihrer Website
Zusammenfassung
Hier ist ! Das war's für diese Anleitung. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, den Hover-Effekt in Elementor über benutzerdefiniertes CSS hinzuzufügen. Sie können auch unseren Artikel über lesen So beheben Sie das Blockieren von JavaScript und CSS-Rendering in WordPress.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Wenn Sie einen Freund oder einen Kommentar haben, hinterlassen Sie ihn bitte im Abschnitt Kommentar. Meistens Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
