Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

Wie man Logo Swap on Hover-Effekt mit Elementor hinzufügt

Muneeb WordPress-Tutorials May 9, 2021

Wir alle wissen, wie grenzenlos etenklose Anpassung mit Elementor Website Builder wird. Mit dieser Anpassung können wir die Benutzererfahrung verbessern und kreativ sein in dem, was wir erstellen.

Logo Swap on Hover-Effekt ist, wenn der Benutzer seinen Cursor auf dem Logo auf Ihrer Website platziert, ändert es automatisch seine Details, d. h. Farbe, Form oder Umriss. In diesem Tutorial werden wir verstehen, wie man einen Logo-Swap auf Hover-Effekt mit Elementor erstellt.

So erstellen Sie Logo Swap on Hover-Effekt mit Elementor

Sie wissen bereits, was der Effekt ist und haben Ideen im Kopf, was Sie erstellen möchten, lassen Sie uns vorankommen und sehen, wie.

Fügen Sie zunächst einen inneren Abschnitt für die Widgets hinzu.

Divi herunterladen Das beste WordPress-Thema

Das beliebteste WordPress-Thema der Welt und der ultimative Wordpress-Seite-Builder

Divi herunterladen.

Als Nächstes müssen Sie eine Spalte in dem ursprünglich erstellten Abschnitt hinzufügen. Für dieses Tutorial werden wir mit der zweispaltigen Struktur gehen.

Ziehen Sie dann das Bild-Widget in die von Ihnen erstellte Spalte.

Damit der Effekt funktioniert, werden Sie zwei Bilder benötigt. Eine wird normal angezeigt, während die andere angezeigt wird, wenn der Benutzer den Cursor platziert.

Sie können zwei Variationen des gleichen Logos oder zwei völlig unterschiedliche Bilder verwenden, die Möglichkeiten sind grenzenlos.

Fügen Sie nach der Bildauswahl im benutzerdefinierten CSS-Feld den folgenden CSS-Code ein, damit der Logoaustausch auf den Hovereffekt funktioniert.

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

Und fertig! Veröffentlichen Sie Ihre Seite, um eine Vorschau anzuzeigen und zu sehen, wie der Effekt auf Ihrer Website aussieht. Kommen Sie zurück, um Änderungen vorzunehmen, wenn Sie möchten.

So können Sie den Logo Swap On Hover-Effekt mit Elementor erstellen. Achten Sie darauf, uns auf unseren Facebook und Twitter zu begleiten, um über unsere Beiträge auf dem Laufenden zu bleiben.