Weiter zum Hauptinhalt

So fügst du deiner Website einen benutzerdefinierten Cursor hinzu

Bring deine Marke einen Schritt voran und ergänze deine Unternehmenswebsite um einen benutzerdefinierten Cursor. Hier erfährst du alles, was du dazu wissen musst.

Das Hinzufügen eines benutzerdefinierten Cursors zu deiner Website ist eine einfache Möglichkeit, um deine Website hervorzuheben. Meistens bemerken Benutzer den Cursor nicht einmal. Es ist nur eine blinkende Linie, die anzeigt, wohin die Maus zeigt. Aber ein kreativer, benutzerdefinierter Cursor kann das Engagement steigern, indem er die Interaktion mit den Kund*innen fördert.

Das Hinzufügen eines benutzerdefinierten Cursors ist eine großartige Möglichkeit, deiner Website ein Branding hinzuzufügen und sie zu etwas Besonderem zu machen. Mit anderen Worten: Der richtige Mauszeiger kann zu längerem Verweilen auf deiner Website führen. Und das bedeutet, dass Kunden eher einen Kauf tätigen oder sich für deine Mailingliste registrieren.

Wenn du ein Unternehmen gründest, brauchst du eine Website, die Kunden dazu bringt, mit deiner Ausstattung zu interagieren. Ein benutzerdefinierter Cursor macht die Interaktion mit deiner Website unterhaltsamer. Gleichzeitig möchtest du nicht, dass ein benutzerdefinierter Cursor ablenkend oder nervig ist. Vor mehr als zwei Jahrzehnten stellte Microsoft Office 97 der Welt eine Büroklammer mit den besten Absichten vor. Stattdessen wurde Karl Klammer schnell zum Verursacher der meisten Supportanrufe und folglich zum Witz der Branche.

Das richtige Gleichgewicht zu finden, kann ein paar Versuche kosten, aber das Hinzufügen eines benutzerdefinierten Mauszeigers zu deiner Website kann ein großes Plus für Konversionen und Kundenengagement sein.

Was ist ein benutzerdefinierter Cursor?

Ein benutzerdefinierter Cursor ist eine absichtliche Änderung des Standardsymbols, das aufblinkt, um anzuzeigen, wohin deine Maus zeigt oder wo du Text tippen kannst. Anstatt einer langweiligen blinkenden Linie kannst du Farben, Animationen oder Klickeffekte hinzufügen. Auf einem Computer kannst den Standardcursor über die Einstellungen ändern. Für eine Webseite brauchst du ein wenig HTML, CSS und JavaScript. Lass dich dadurch nicht einschüchtern.

Was ist der Zweck eines benutzerdefinierten Cursors?

Ein benutzerdefinierter Cursor macht deine Website einzigartig. Benutzerdefinierte Cursor leiten deine Besucherinnen durch deine Webseite, um mit Pfeilen, Hilfenachrichten, Anleitungen, Fortschrittsbalken usw. zu interagieren. Ein benutzerdefinierter Cursor ersetzt den Standardcursor, der vom Browser deiner Besucherinnen verwendet wird, um die Seite interessanter zu machen und Benutzer*innen zu helfen, zu verstehen, was passieren wird, wenn sie auf einen Link klicken oder ein Objekt ziehen.

Ja. Ein benutzerdefinierter Cursor ist sicher. Aber nur weil ein CSS-Cursor sicher ist, bedeutet das nicht, dass deine Besucherinnen das wissen. Es ist möglich, dass zu viel Kreativität Benutzerinnen zögern lässt.

Wenn du zum Beispiel zu viel Animation verwendest oder Blinken, wenn Besucherinnen ihre Maus bewegen, kann dies dazu führen, dass sie denken, dass etwas nicht stimmt. Denke daran, dass der Zweck eines benutzerdefinierten Cursors darin besteht, deine Benutzerinnen zu führen und mit ihnen zu kommunizieren. Wenn Webanalysen zeigen, dass Kund*innen deine Website häufig schließen, nachdem du Anpassungen hinzugefügt hast, solltest du vielleicht einige der Änderungen rückgängig machen.

Obwohl benutzerdefinierte Cursor sicher sind, musst du beim Herunterladen von Cursorn von verschiedenen Websites sehr vorsichtig sein. Im Allgemeinen ist es niemals sicher, Code oder Dateien von Websites herunterzuladen, die du nicht kennst. Bevor du einen benutzerdefinierten Cursor von einer Website herunterlädst, die kostenlose Downloads anbietet, recherchiere, um sicherzustellen, dass diese Seite einen guten Ruf hat. Oder noch besser: Lies hier weiter, um zu erfahren, wie du selbst einen CSS-Cursor, der deinen Bedürfnissen entspricht, erstellen kannst. Es sind nur ein paar Codezeilen, die du auch dann schreiben kannst, wenn du eine völliger Anfänger*in bist.

Wie passe ich den Cursor auf meiner Website an?

Es gibt zwei Möglichkeiten, einen benutzerdefinierten Mauscursor zu erstellen. Du kannst CSS oder JavaScript verwenden. Bevor du CSS oder JavaScript hinzufügst, musst du zum CSS-Skript navigieren, das du ändern möchtest. Wenn du den Mailchimp-Webseiten-Builder verwendest, gehe zum Abschnitt „Add and Edit Web Page Sections“ (Webseitenabschnitte hinzufügen und bearbeiten) im Mailchimp-Webseiten-Builder.

Lass dich nicht einschüchtern. Es ist eine einfache Änderung. Hier erfährst du, wie einfach das geht.

  1. Klicke in deinem Website-Dashboard auf „Edit Site“ (Website bearbeiten).
  2. Bewege den Cursor auf die Seite, die du bearbeiten möchtest, und klicke auf „Edit Page“ (Seite bearbeiten).
  3. Klicke im Mailchimp-Site-Builder auf den Bereich „Sections“ (Abschnitte). Der Bereich wird erweitert und zeigt dir nun die Abschnitte in deiner Webseite.
  4. Bewege den Cursor auf einen beliebigen Abschnitt im Bereich, um den entsprechenden Bereich der Seite anzuzeigen.
  5. Klicke auf den Abschnitt, in dem du deinen Cursor anpassen möchtest, um die Stiloptionen anzuzeigen.
  6. Klicke auf „Edit“ (Bearbeiten), um den Abschnitt zu öffnen und deine Änderungen am CSS-Code vorzunehmen.

So erstellst du einen benutzerdefinierten Cursor mit CSS

CSS verfügt über die Fähigkeit, Cursor anzupassen. Du kannst die Cursor-Eigenschaft im Textbereich von CSS verwenden, um deinen Mauszeiger interessanter zu machen. Du benötigst ein Bild im PNG-, JPEG- oder SVG-Format. Verwende dann den folgenden Code-Snippet im CSS des Abschnitts, den du anpassen möchtest, um den Zeiger in eine Grafik deiner Wahl zu ändern:

body { cursor: url(‘YourCursorImage.png'), auto; }

Mit der Cursoreigenschaft kannst du festlegen, welcher von diversen Cursorn angezeigt wird. Der Standard „auto“ sollte zuletzt aufgeführt sein. So kann der Browser der Benutzer*innen den Standardcursor anzeigen, wenn nichts anderes funktioniert.

Unten findest du eine Tabelle mit einigen deiner Optionen, die mit CSS verfügbar sind. Verwende die Syntax:

cursor: value, auto;

Wenn du zum Beispiel den Mauszeiger zu einem blauen Kreis machen möchtest, der den Benutzer*innen anzeigt, dass sie warten sollen, verwende die folgende Aussage. Das Hinzufügen von „auto“ am Ende der Aussage bietet dem Browser eine Rückfalloption, falls er nicht weiß, wie er diesen bestimmten Wert interpretieren soll.

cursor: progress, auto;

Dies sind nur einige der Hunderten von Werten, die du mit der CSS-Cursor-Eigenschaft verwenden kannst. Eine vollständigere Liste findest du auf der Mozilla-Entwicklerseite.

Die Anpassung von Farben ist auch eine großartige Möglichkeit, deinen CSS-Cursor interessant zu machen, insbesondere wenn die Farben mit deinen Branding-Richtlinien übereinstimmen. Du kannst die Farbe oder die Größe im CSS-Skript ändern. Achte nur darauf, dass du deinen Mauszeiger nicht zu groß machst oder er vor dem Hintergrund deiner Website schwer zu erkennen ist.

So erstellst du einen benutzerdefinierten Cursor mit JavaScript

Du musst das DOM ändern, um den Cursor in JavaScript anzupassen. Der erste Schritt besteht darin, eine Unterteilung im HTML-Code zu erstellen:

<div class="cursor pointed"></div>

Sobald du den Abschnitt festgelegt hast, kannst du JavaScript-Anweisungen verwenden, damit dein benutzerdefinierter Cursor bei einem Mausbewegungsereignis das tut, was du willst. (Das ist nur eine elegante Art, um zu sagen, wenn der Benutzer die Maus bewegt oder irgendwo auf deine Website klickt.) Du brauchst CSS, um den Standardcursor auszublenden und sowohl die X- als auch die Y-Koordinaten festzulegen. Hier ist ein Beispiel für die Syntax, die du brauchst.

body{ background-color: #1E1C44; cursor: none; }

.pointed{ width: 12px; height: 12px; background-color: red; border-radius: 25%; }

window.addEventListener('mousemove', moveCursor)

Hinweis: Verwende den Wert „none“ für die Cursor-Eigenschaft, um den Standardcursor auszublenden und stattdessen deinen anzuzeigen. Der Event-Listener reagiert immer dann, wenn eine Besucherin deiner Website den Mauszeiger bewegt.

Benutzerdefinierter Cursor für Chrome

Chrome ist der beliebteste Webbrowser. Beginnen wir also mit den benutzerdefinierten Cursor-Plug-ins von Chrome. Es gibt etwa hundert kostenlose Optionen, darunter Minecraft, Lightsaber und Cartoons.

Wenn du möchtest, kannst du sogar dein eigenes Bild als Cursor verwenden, solange es die Größenrichtlinien erfüllt. Optimalerweise solltest du eine Grafik mit 16 x 16 oder 32 x 32 Pixeln verwenden. Es ist möglich, Bilder mit einer Größe von bis zu 128 x 128 Pixeln zu verwenden, aber probiere zuerst die kleineren Größen aus. Für eine optimale Anzeige empfiehlt Chrome ein Bild mit einem klaren Hintergrund. (Wenn der Hintergrund nicht klar ist, wird er einen Teil deiner Website abdecken.) Die Erweiterung ist im Google Chrome Web Store kostenlos verfügbar. Nachdem du die Erweiterung installiert hast, musst du deine Website aktualisieren.

Der benutzerdefinierte Cursor für Chrome hat einige wesentliche Einschränkungen. Erstens funktioniert es auf den meisten Store-Seiten nicht. Zweitens ist er auf Chrome-Browsing beschränkt. Die Chrome-Erweiterung ist also nicht ideal für Webdesignende, aber sie ist eine schnelle Möglichkeit, um zu sehen, wie verschiedene Mauszeiger auf deiner Website aussehen würden.

Welche Browser unterstützen CSS-Cursor und benutzerdefinierte Mauscursor?

Alle modernen Browser wissen, wie man einen benutzerdefinierten CSS-Cursor unterstützt. Wenn eine Benutzerin einen älteren Browser verwendet, zeigt das „Auto“ am Ende der Syntax den Standardcursor für diesen Browser an.

CSS-Cursor-Property-kompatible Browser:

  • Apple Safari 1.2 und neuere Versionen
  • Firefox – alle Versionen
  • Google Chrome – alle Versionen
  • Internet Explorer 4.0 und neuere Versionen
  • Opera 7 neuere Versionen

Eine Website mit einem benutzerdefinierten Cursor einzigartig gestalten. Die Anpassung des Cursors ist nur eine von vielen Möglichkeiten, um deine Website interaktiver und interessanter zu gestalten. Indem du deine Website freundlich und intuitiv gestaltest, wirst du Besucher*innen anziehen und binden. Scheue dich nicht davor, zu experimentieren und deiner Kreativität freien Lauf zu lassen!

Artikel teilen