Möchten Sie erfahren, wie Sie Elementen im Beitrags-Widget einen Hover-Effekt hinzufügenElementor?
Wenn Sie ein WordPress-Benutzer sind und verwenden Elementor um Ihre zu erstellen Website, sollten Sie mit der Hover-Effekt-Funktion vertraut sein. Sie finden diese Funktion hauptsächlich in jeder Widget-Einstellung Elementor.
Der Hover-Effekt kann Ihre Elemente attraktiv machen und ist daher eine effektive Möglichkeit, die Benutzererfahrung auf Ihrem zu verbessern Webseite.
Apropos Hover-Effekt: In diesem Artikel erfahren Sie, wie Sie letzteren zu einzelnen Beitragselementen im Widget hinzufügen Elementor Beiträge, die das benutzerdefinierte CSS von Elementor verwenden, insbesondere den Hover-Effekt zum Vergrößern.
Es gibt zwei Gründe, warum wir dieses Tutorial für Sie erstellen:
- Standardmäßig können Sie einem Beitrag aus dem Elementor-Posts-Widget einen Hover-Effekt hinzufügen. Aber der Hover-Effekt wird sehr einfach/Standard sein.
- Standardmäßig können Sie mit Elementor dem Posts-Widget (Tab fortgeschritten -> Transformator –> Échelle). Der Hover-Effekt wirkt sich jedoch auf alle (nicht einzelne) Post-Widget-Elemente aus.
Schritte zum Hinzufügen des Hover-Effekts zu einzelnen Posts aus dem Posts-Widget von Elementor
Bevor Sie mit dem Tutorial beginnen, möchten wir Sie darüber informieren, dass dieses Tutorial die benutzerdefinierte CSS-Funktion von Elementor verwendet. Diese Funktion ist nur auf verfügbar Elementor Pro; Stellen Sie sicher, dass Sie Ihre Version aktualisiert haben.
Schritt 1: Beitrags-Widget hinzufügen
Gehen Sie zu Ihrem Elementor-Editor und wir beginnen alles von vorne, also erstellen Sie einen Abschnitt mit einer einzigen Spalte.
Lesen Sie auch: So integrieren Sie MailChimp in Elementor
Wählen Sie als Nächstes das Posts-Widget aus dem Widget-Bereich aus und ziehen Sie es per Drag-and-Drop in den Bearbeitungsbereich. Nachdem Sie das Posts-Widget hinzugefügt haben, können Sie das Widget nach Ihren Wünschen bearbeiten und gestalten.
Remarque: Bitte stellen Sie sicher, dass Sie bereits Artikel auf Ihrem veröffentlicht haben Webseite.
Schritt 2: Fügen Sie das CSS-Snippet hinzu
Nachdem Sie das Posts-Widget bearbeitet und gestaltet haben, fügen wir als Nächstes einen Hover-Effekt innerhalb eines einzelnen Posts hinzu, indem wir das einfache CSS-Snippet hinzufügen. Gehen Sie in den Posts-Widget-Einstellungen zu Tab fortgeschritten -> Benutzerdefiniertes CSS. Bitte kopieren Sie das CSS-Snippet unten und fügen Sie es dann in das Feld ein Benutzerdefiniertes CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Der obige Code wählt das einzelne Post-Element im Posts-Widget mithilfe des Selektors aus .élémentor-post und wenden Sie die CSS-Transformation an.
Wenn Sie mit dem verwendeten Hover-Effekt zufrieden sind, können Sie ihn so beibehalten und Ihr Projekt speichern, wenn Sie möchten. Wenn Sie jedoch die Übergangsgeschwindigkeit und den Transformationsskalierungswert anpassen möchten, können Sie den Wert im CSS-Snippet ändern.
Remarque: Verwandeln/Vergrößern ist ein häufiger und beliebter Effekt, der auf Websites verwendet wird. Wenn Sie mehr über andere Methoden zum Transformieren von Hover-Effekten erfahren möchten, können Sie dies besuchen Seite.
Entdecken Sie auch: alle Elementor-Widget-Selektoren im folgenden Artikel
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
Dieser Artikel zeigt Ihnen, wie einfach es ist, einzelnen Post-Elementen im Posts-Widget von Elementor mit benutzerdefiniertem CSS einen Hover-Effekt hinzuzufügen.
Die Technik, die wir für diesen Effekt verwendet haben, ist (Zoom-In), die 2D und einige pseudotransformierte Elemente beinhaltet. Passen Sie alle Arten von Hover-Effekten an und spielen Sie mit ihnen, bis Sie den besten Hover-Effekt für Ihre Website gefunden haben.
Hier ist! Wir haben Ihnen gerade die besten Tools für vorgestellt Marketing per E-Mail für Elementor. Wenn Sie Bedenken haben, wie Sie sie verwenden können, teilen Sie uns dies bitte mit commentaires.
Sie können sich aber auch beraten 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.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
