Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

So verwandeln Sie den Cursor in eine kreative Schaltfläche, während Sie mit Divi . auf einem Element schweben

Rifat Divi Tutorials Jul 8, 2021

Was ist, wenn Sie mit der Maus über ein Element fahren und es zu einer Schaltfläche wird, und wenn Sie darauf klicken, werden Sie zu einer anderen Seite weitergeleitet? Wir setzen oft eine Schaltfläche am unteren oder seitlichen Rand der Bildergalerie oder der Artikel-/Produktkacheln, um zur Detailseite dieses Elements zu gelangen. Was ist, wenn die Schaltfläche nicht visuell gesetzt ist? Wir stellen es mit dem Schwebeeffekt der Maus so ein, dass die Maus zu einer Schaltfläche wird, sobald sie auf den Bild- oder Artikelkacheln landet und irgendwo in den bestimmten Bereich klickt, der uns auf die gewünschte Seite führt. Ja! Mit Divi haben wir viele Möglichkeiten, unsere Website anzupassen, und das heutige Tutorial dreht sich alles darum, wie man einen Cursor in eine kreative Schaltfläche verwandelt, während man mit der Maus über das Element fährt. Ist das nicht aufregend?

Warten wir also nicht weiter und springen wir in das Tutorial.

Schleichspitze

Bevor wir weitermachen, so wird unser heutiges Design aussehen.

Teil 1: Struktur der Gebäudeelemente

Fügen Sie eine Seite aus Ihrem WordPress-Dashboard hinzu und öffnen Sie sie mit Divi Builder. Gehen Sie mit "Build from Scratch" voran.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Hinzufügen: Neuer Abschnitt

Hintergrundfarbe

Wir werden unserem ersten Abschnitt Weiß als Hintergrundfarbe hinzufügen.

  • Hintergrundfarbe: #ffffff

Abstand

Fügen Sie nun auf der Registerkarte Entwurf etwas Abstand zum Abschnitt hinzu.

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

Hinzufügen: Neue Zeile

Spaltenstruktur

Jetzt fügen wir unserem Abschnitt eine zweispaltige Zeile hinzu.

Größe

Bevor Sie weitere Module hinzufügen, können Sie nun die Größeneinstellungen dieser zweispaltigen Zeile ändern.

  • Maximale Breite: 2580px

Abstand

Nehmen Sie nun einige Änderungen im Abstand vor.

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

Hinzufügen: Bildmodul zu Spalte 1

Bild hinzufügen

Fügen Sie nun in Spalte 1 ein Bildmodul hinzu und fügen Sie ein Bild Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie nun einen Link zu diesem Bild hinzu.

Hover-Skala

Wechseln Sie nun zur Registerkarte Design und ändern Sie die Einstellungen für die Hover-Skalierung dieses Bildmoduls.

  • Beides: 90%

CSS-Klasse

Fügen Sie auf der Registerkarte "Erweitert" eine CSS-Klasse hinzu.

  • CSS-Klasse: image-cursor

Hinzufügen: Textmodul 1 zu Spalte 1

H3-Inhalt

Wir fügen ein Textmodul zu Spalte 1 hinzu und fügen nach Bedarf einige H3-Inhalte hinzu.

H3-Inhaltseinstellungen

Ändern Sie die H3-Inhaltseinstellungen auf der Registerkarte Design.

  • Überschrift 3 Schriftart: Schauspieler
  • Überschrift 3 Textfarbe: #000000
  • Überschrift 3 Textgröße: Desktop: 35px, Tablet: 28px und Telefon: 22px
  • Überschrift 3 Zeilenhöhe: 1,4 em

Abstand

Fügen Sie dem Textmodul einen Abstand hinzu.

  • Unterer Rand: 15px

Hinzufügen: Textmodul 2 zu Spalte 1

Textinhalt

Fügen Sie direkt unter dem vorherigen Textmodul ein weiteres Textmodul hinzu und fügen Sie diesem Modul beschreibenden Inhalt hinzu.

Einstellungen für Textinhalt

Ändern Sie die Textinhaltseinstellungen auf der Registerkarte Design.

  • Überschrift 3 Schriftart: Schauspieler
  • Überschrift 3 Textfarbe: #75BAFF
  • Überschrift 3 Textgröße: Desktop: 22px, Tablet: 18px und Telefon: 15px
  • Text Buchstabenabstand: 0.5px
  • Überschrift 3 Zeilenhöhe: 1,4 em

Hinzufügen: Schaltflächenmodul zu Spalte 1

Schaltflächentext

Fügen Sie abschließend in Spalte 1 ein Schaltflächenmodul hinzu und fügen Sie eine entsprechende Kopie hinzu.

Einstellungen für Schaltflächentext

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Schaltflächeneinstellungen entsprechend:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja:
  • Schaltflächentextfarbe: #000000
  • Breite des Tastenrahmens: 0px
  • Schaltflächenrandradius: 1pxp
  • Schaltflächenschriftart: Schauspieler
  • Schaltflächensymbol anzeigen: Ja
  • Platzierung der Schaltflächensymbole: Links
  • Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Abstand

Passen Sie die Abstandswerte an.

  • Unterer Rand: 80px
  • Untere Polsterung: 20px
  • Rechte Polsterung: 30px

Box Schatten

Beenden Sie die Moduleinstellungen, indem Sie die folgenden Boxschatteneinstellungen anwenden:

  • Horizontale Position des Boxschattens: 0px
  • Vertikale Position des Kastenschattens: 2px
  • Schattenfarbe: #000000

Duplizieren des Inhalts

Hier werden wir ein paar Dinge tun. Zuerst löschen wir die zweite Spalte.

Jetzt klonen wir die erste Spalte.

Duplizieren Sie nun die gesamte Zeile und ändern Sie den Inhalt.

Teil 2: Cursor hinzufügen

Neue Zeile hinzufügen

Spaltenstruktur

Da wir mit der Designstruktur fertig sind, machen wir das Cursordesign. Fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu.

Abstand

Öffnen Sie die Zeileneinstellungen und nehmen Sie einige Änderungen vor, wie unten beschrieben.

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

Hinzufügen: Textmodul für Cursor

Kopie hinzufügen

Fügen Sie nun der neu erstellten Zeile ein Textmodul hinzu und fügen Sie eine Kopie Ihrer Wahl hinzu.

Hintergrundfarbe

Fügen Sie dann eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #47669b

Texteinstellungen

Ändern Sie auf der Registerkarte Design den Textstil.

  • Textschriftart: Schauspieler
  • Schriftstärke des Textes: Fett
  • Textschriftart: Großbuchstaben
  • Textfarbe: #ffffff
  • Text Buchstabenabstand: 2px
  • Textausrichtung: Mitte

Größe

Nehmen Sie einige Anpassungen im Größenbereich vor.

  • Breite: 150px
  • Höhe: 150px

Rand

Wir ändern die Rahmeneinstellungen, um diesen Kreis zu erstellen.

  • Alle Ecken: 100px

Box Schatten

Wir werden auch einen Leuchtkasten-Schatten hinzufügen.

  • Stärke der Box-Schattenunschärfe: 0px
  • Stärke der Box-Schattenausbreitung: 20px
  • Schattenfarbe: rgba (7,213,255,0,14)

CSS-Klasse

Dann geben wir unserem Modul eine CSS-Klasse.

  • CSS-Klasse: Cursor

CSS-Hauptelement

Fügen Sie nun den CSS-Code zur Hauptelementbox hinzu.

transition: all .1s linear;
pointer-events: none;
 
display: flex;
justify-content: center;
align-items: center;

Position

Nun beenden wir dieses Modul, indem wir einige Änderungen am Positionsbereich auf der Registerkarte "Erweitert" vornehmen.

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

Hinzufügen: Codemodul

Fügen Sie nun unterhalb des letzten Textbausteins ein Codemodul hinzu. Fügen Sie Style- und Scripts- Tags innerhalb des Codemoduls hinzu.

CSS-Code hinzufügen

Fügen Sie den folgenden CSS-Code in die Style .

.hide-cursor {
cursor: none;
}
 
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
 
visibility: hidden;
opacity: 0;
}
 
.show-cursor {
visibility: visible !important;
opacity: 1;
}

JQuery-Code hinzufügen

Fügen Sie den folgenden CSS-Code in das Skript ein.

jQuery(document).ready(function($){
 
var cursor = $('.cursor');
 
$('.image-cursor').mousemove(function(e){
 
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
 
});
 
$('.image-cursor').mouseleave(function() {
 
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
 
});
 
});

Endergebnis

So sieht unser endgültiges Design aus: Atemberaubend!

Fazit

Das heutige Tutorial basierte darauf, wie Sie interaktiveres Design auf Ihre Website bringen können. Divi bietet Ihnen eine große Chance, mehr Besucher auf Ihre Website aufmerksam zu machen, indem Sie das Design sauber und schön gestalten. Ich hoffe, Ihnen gefällt das heutige Tutorial, und wenn ja, wird ein Teil FANTASTISCH sein!