Springe zum Hauptinhalt

So fügen Sie einen Hover-Effekt in Elementor über benutzerdefiniertes CSS hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • 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.

Hover-Effekt in Elementor über benutzerdefiniertes CSS hinzufügen

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 Premium-WordPress-Plugins, die die Leistung Ihres WordPress-Blogs oder Ihrer Website optimieren.

1. Live-Verkaufs-Popup

Live Sales Popup ist ein weiteres WordPress-Benachrichtigungs-Plugin mit mehreren Extras, die Sie in einen Vorteil verwandeln können. Zuallererst hat er die Möglichkeit ein Popup-Fenster anzeigen wenn jemand eine Bestellung abschließt. Live Sales Popup Plugin WordPress

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

Download | 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. Foodlify Restaurant Food-Menü für Woocommerce

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.

Download | 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 für die Anzeige großer Bilder in Ihrem WordPress-Blog.

Mega Zoom Pan WordPress Plugin für Zoom

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.

Download | Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Fazit

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.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren