Benutzerderdefinierter Mauszeiger mit Elementor

May 2, 2022
Marc Heine Webdesign Profil Foto
deine website selbst erstellen? titelbild

In diesem Blogpost erfährst du, wie du in wenigen Sekunden einen benutzerdefinierten Mauszeiger in Elementor erstellen kannst. Du kannst dieses Vorgehen auf ganze Sections oder für einzelne Elemente anwenden.

CSS Klasse definieren

Wenn du eigenen CSS-Code hinzufügen möchtest, musst du zuerst eine CSS-Klasse definieren. Diese Klasse kann dann mittels CSS-Code angesprochen werden. Unter dem Menüpunkt - Erweitert kannst du deine CSS Klasse vergeben. Wie du die CSS Klasse benennst ist eigentlich egal aber je sinnvoller dein Klassenname desto eher kannst du dir diese merken.

CSS Klasse ansteuern

Damit dein CSS Code funktioniert, musst du zuerst deine CSS Klasse ansteuern. CSS Klassen werden angesteuert, indem du .cssklasse am anfang deines Codes vergibst. In dem Besipiel ist die CSS-Klass hero und wird so angesteuert: .hero

Code für benutzerdefinierten Mauszeiger

Um einen benutzerdefinierten Mauszeiger zu erstellen, musst du zuerst ein Bild/SVG Datei in die Wordpress Mediathek hochladen, die anstelle deines Mauszeigers gezeigt werden soll. Wenn du das erledigt hast, kopierst du dir die URL.

Jetzt musst du nur noch https://yourcursorimageurl durch deine kopierte URL ersetzen. Wenn du jetzt die richtige CSS Klasse angesteuert hast und deine URL auf das zu verwendene Bild verweist, erscheint dein Custom Mauszeiger.

Zusammenfassung in Videoform

Code zum kopieren

Benutzerdefinierter Mauszeiger:

.classname { cursor: url(https://yourcursorimageurl), auto; }

Weitere Mauszeiger Zustände:

.classname { cursor: pointer}

.classname { cursor: grabbing}

.classname {cursor:move}

.classname {cursor:no-drop}

..classname {cursor:zoom-in}

uvm.

Elementor kannst du hier kostenlos ausprobieren:

https://bit.ly/3HGELga *

*Affiliate Link

Das könnte dich auch interessieren:
Blog Übersicht