So fügen Sie Ihrer Divi-Seite einen formatierten und invertierten Cursor hinzu

Eine der schnellsten Möglichkeiten, mit Besuchern auf Ihrer Website zu interagieren, ist der Cursor. Hier beginnt normalerweise alles. Die Benutzerinteraktion auf dem Desktop basiert fast ausschließlich auf der Art und Weise, wie Besucher ihren Cursor verwenden, um durch Ihre Seiten zu navigieren. Es ist auch die einzige Sache, die es ihnen ermöglicht, Ereignisse auszulösen, sei es ein Hover-Effekt oder ein Klick. Aus diesem Grund werden Sie auf eine Vielzahl von Websites stoßen, die den Cursor mit einem bestimmten Ziel im Hinterkopf anpassen. Das Styling Ihres Cursors ist hilfreich, wenn Sie beispielsweise einen Call-to-Action hervorheben möchten. Heute zeigen wir Ihnen, wie das in Divi geht. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Neue Seite erstellen/bestehende öffnen

Neue Seite erstellen oder bestehende öffnen

Beginnen Sie damit, eine neue Seite zu erstellen oder eine vorhandene zu öffnen.

Laden Sie ein Layout Ihrer Wahl hoch

Um uns auf das Wesentliche dieses Tutorials zu konzentrieren, werden wir das Bike Repair Layout Pack verwenden, aber Sie können auch jedes andere Layout Ihrer Wahl verwenden.

Neuen Abschnitt am Ende der Seite hinzufügen

Nachdem Ihr Layout hochgeladen wurde, navigieren Sie zum Ende Ihrer Seite und fügen Sie einen neuen Abschnitt hinzu. Wir werden diesen Abschnitt verwenden, um unseren Cursor zu erstellen.

Abstand

Um einen benutzerdefinierten Cursor zu erstellen, fügen wir später im Tutorial ein Textmodul hinzu. Dieses Modul wird innerhalb des Abschnitts platziert, aber wir möchten nicht, dass der eigentliche Abschnittscontainer in unserem Design angezeigt wird. Um zu verhindern, dass der Abschnitt angezeigt wird, entfernen wir die standardmäßige obere und untere Auffüllung in den Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und entfernen Sie alle benutzerdefinierten Bundstegbreiten in den Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul hinzufügen (Cursor)

Inhaltsbox leer lassen

Zeit, ein Textmodul hinzuzufügen, das wir später als Cursor verwenden werden! Lassen Sie das Inhaltsfeld leer.

Größe

Wechseln Sie zur Registerkarte Design und formen Sie das Modul mit einer benutzerdefinierten Breite und Höhe für verschiedene Bildschirmgrößen:

• Breite:
  • Desktop: 100px
  • Tablet: 60px
  • Telefon: 40px
• Höhe:
  • Desktop: 100px
  • Tablet: 60px
  • Telefon: 40px

Grenze

Um den Cursor in einen Kreis zu verwandeln, wie Sie in der Vorschau dieses Beitrags sehen konnten, verwenden wir abgerundete Ecken und einen Rand.

• Alle Ecken: 100%
• Rahmenbreite: 3px
• Rahmenfarbe: #ffffff

Mischmodus

In der Vorschau dieses Beitrags konnten Sie einen invertierten Effekt des Cursors feststellen, insbesondere wenn Sie mit der Maus über ein Button-Modul fahren. Um diesen Effekt zu erzielen, verwenden wir einen Mischmodus für unser Textmodul.

• Mischmodus: Unterschied

Hauptelement-CSS

Indem wir die folgenden CSS-Codezeilen zum Hauptelement des Moduls hinzufügen, helfen wir, das Modul für die zukünftige Verwendung als Cursor vorzubereiten:

transition: all .1s linear;
pointer-events: none;

Position

Wir werden auch eine feste Position für das Modul verwenden.

• Position: Behoben
• Ort: Oben links
• Z-Index: 2

CSS-Klasse

Und wir vervollständigen die Moduleinstellungen, indem wir auf der Registerkarte "Erweitert" eine benutzerdefinierte CSS-Klasse zuweisen.

• CSS-Klasse: Cursor

2. Funktionalität hinzufügen

Codemodul unterhalb des Cursor-Textmoduls hinzufügen

Jetzt, da wir das Cursor-Textmodul an Ort und Stelle haben, ist es an der Zeit, sich auf die Funktionalität zu konzentrieren! Fügen Sie ein Codemodul direkt unter dem Cursor-Textmodul Ihres neuen Abschnitts hinzu.

Stil- und Skript-Tags hinzufügen

Wir werden ein bisschen CSS und JQuery-Code kombinieren, also fahren Sie fort und fügen Sie Ihrem Code-Modul Stil- und Skript-Tags hinzu.

Öffnen des JQuery-Codes

Kopieren Sie als Nächstes die folgenden JQuery-Codeöffnungszeilen zwischen den script-Tags:

jQuery(document).ready(function($){
});

Textmodul Cursor neu positionieren

Nachdem nun die Grundlage in unserem Code-Modul geschaffen wurde, gehen wir Schritt für Schritt vor. Als erstes platzieren wir das von uns erstellte Textmodul hinter dem inneren Inhalt des Builders. Dadurch können wir den Cursor seitenweit verwenden.

$('.cursor').insertAfter('.et_builder_inner_content');

Standardcursor der Seite entfernen

Als Nächstes entfernen wir den Standardcursor der Seite mithilfe eines benutzerdefinierten CSS-Codes, den wir zwischen den style-Tags platzieren.

body {
cursor: none;
}

Cursor-Textmodul als Cursor festlegen

Als Nächstes erlauben wir dem Cursor, den Bewegungen der Besucher zu folgen, indem wir die folgenden Zeilen des JQuery-Codes verwenden:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

Toggle-Effekt beim Bewegen der Maus über ein bestimmtes Modul

CSS-Klasse erhöhen hinzufügen

Wie Sie in der Vorschau dieses Beitrags feststellen konnten, ändern sich die Cursorstile, sobald ein Schaltflächenmodul mit der Maus bewegt wird. Um dies zu erreichen, fügen wir zwischen unseren style-Tags eine neue CSS-Klasse hinzu.

.increase-size {
transform: scale(5);
background-color: white;
}

Alle Tastenmodule

Wir schalten diese CSS-Klasse mit etwas JQuery-Code um. Der folgende Code zielt nacheinander auf alle Schaltflächenmodule innerhalb Ihrer Divi-Seite ab.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Ein spezielles Tastenmodul

Soll der Effekt speziell auf ein Modul angewendet werden, ist ein anderer Ansatz erforderlich. Öffnen Sie zunächst das Schaltflächenmodul, auf das Sie den Effekt anwenden möchten, und fügen Sie eine benutzerdefinierte CSS-Klasse ein.

• CSS-Klasse: Cursor-Button

Ersetzen Sie dann die CSS-Klasse in dem Code, den Sie im vorherigen Schritt verwendet haben. Das ist es!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie einen benutzerdefinierten Cursor für Ihre Divi-Seite erstellen. Wir haben Ihnen auch gezeigt, wie Sie mit diesem benutzerdefinierten Cursor einen Hover-Effekt auslösen, wenn jemand über einen Call-to-Action auf Ihrer Seite fährt. Sobald Sie den Ansatz zum Erstellen eines benutzerdefinierten Cursors kennen, können Sie jede Art von Design oder Effekt erstellen! Sie konnten die JSON-Datei auch kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.