Benutzerderdefinierter Mauszeiger mit Elementor
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:
*Affiliate Link
