Ein Webdesign-Trend, den man in letzter Zeit immer häufiger sieht: Einzigartige Cursor auf der Website. Dabei ist das ganz einfach umzusetzen, ich zeige dir, wie.
Du brauchst deinen neuen Cursor entweder als PNG oder auch als SVG-Datei. Die Grösse sollte maximal 100px betragen.
Wenn du mit WordPress arbeitest, lädst du diese Datei in die Mediathek. Dort kopierst du den Link der hochgeladenen Datei.

Dann braucht’s nur noch etwas CSS:
html {
cursor: url('/wp-content/uploads/2022/05/mein-cursor.svg'), auto;
}
Zwischen die Anführungszeichen setzt du den kopierten Link.
Und schon hat deine Website einen eigenen Cursor:

Über mich
Jeden Tag Menschen helfen, das zu sagen, was sie zu sagen haben. Mit Wirkung und Vision, trotzdem ressourcensparend. Ob es dabei um Websites, Webshops, Content Systeme, Texte oder auch Design geht, ist zweitrangig. Im Vordergrund stehst du und deine Vision. Mit massgeschneiderten und innovativen Ideen geben wir beim Familienunternehmen morntag unser Allerbestes, deine Message zu unterstützen.
5 Antworten
Liebe Simea, ich bin etwas dusselig, wo genau muss ich dasö CSS reinkopieren? Mit Dank und Gruss
Hi Toni
Klar, kein Problem! Es gibt immer verschiedene Orte, wo man CSS hinzufügen kann. Am einfachsten ist es wahrscheinlich unter Design > Customizer > CSS. Hilft das? 🙂
Liebe Grüsse Simea
Bitte bitte nicht. Websiten, die sich an meinem Cursor oder meiner Scrollbar zu schaffen machen werden asap geschlossen und geblockt. Das ist ein NoGo.
Soll ich ganz ehrlich sein? Auf diesen Kommentar habe ich gewartet! 😂 Eigentlich sollten solche Tutorials immer einen Disclaimer haben: “Wir übernehmen keine Haftung für etwaige Design-Unfälle”. Ich bin bei dir, das Feature muss man mit Vorsicht geniessen.
Cool 👍