So ändern Sie den Stil mehrerer Elemente beim Hover oder Klicken in Divi

Schließlich werden in der Welt des Webdesigns sowohl Programmierer als auch Nicht-Programmierer versuchen, ihren Divi-Websites erweiterte Anpassungen und Funktionen hinzuzufügen. Normalerweise beinhaltet dies die Verwendung von Javascript/JQuery, um den Stil von Elementen auf der Seite aus verschiedenen Gründen zu ändern. Möglicherweise möchten Sie ein Kontaktformular anzeigen, wenn Sie auf eine Schaltfläche klicken. Oder Sie möchten ein Bild ändern, wenn Sie mit der Maus über einen Link fahren.

In diesem Tutorial zeigen wir Ihnen, wie Sie den Stil mehrerer Elemente beim Schweben oder Klicken in Divi ändern. Zunächst werden wir die integrierten Designoptionen von Divi nutzen, um ein Abschnittslayout zu entwerfen. Dann stellen wir einen einfachen Ausschnitt von jQuery vor, den Sie in Kombination mit benutzerdefiniertem CSS verwenden können, um den Stil jedes Elements in diesem Abschnitt anzupassen, wenn Sie mit der Maus darüber fahren oder auf eine Schaltfläche klicken. Das mag kompliziert klingen (insbesondere für Anfänger), aber Sie werden überrascht sein, wie einfach es ist.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Hier ist das Design des Abschnittslayouts, das geändert wird, wenn Sie mit der Maus über die Schaltfläche fahren.

Und hier ist das gleiche Abschnittslayout-Design, das durch Klicken auf die Schaltfläche geändert wird. Beachten Sie, dass sich der Schaltflächentext auch beim Klicken ändert.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Entwerfen des Abschnittslayouts

Erstellen Sie zunächst eine neue zweispaltige Zeile.

Abschnittseinstellungen

Öffnen Sie vor dem Hinzufügen von Modulen die Einstellungen für den Abschnitt und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #ffffff

• Top Divider Style: siehe Screenshot
• Farbe des oberen Teilers: #ffffff
• Höhe des oberen Teilers: 5vw

• Unterteiler-Stil: gleich
• Farbe des unteren Teilers: #ffffff
• Höhe des unteren Teilers: 5vw

• Polsterung: 6vw oben, 6vw unten

Vorher Bild

Fügen Sie in der linken Spalte der zweispaltigen Zeile ein neues Bildmodul hinzu.

Laden Sie dann das Bild hoch, das Sie präsentieren möchten. Für dieses Tutorial verwenden wir ein Bild aus dem Learning Management (LMS) Layout Pack, das ungefähr 800 x 550 Pixel groß ist.

Aktualisieren Sie auf der Registerkarte "Design" die Ausrichtung und aktivieren Sie die Option "Vollbreite erzwingen".

• Bildausrichtung: Mitte
• Volle Breite erzwingen: JA

Nach Bild

Als Nächstes erstellen wir ein weiteres Bild, das wir anzeigen, wenn wir mit der Maus darüber fahren/auf eine Schaltfläche klicken.

Um das Image zu erstellen, duplizieren Sie das vorherige Image-Modul.

Dann laden Sie ein neues Bild hoch. Das Bild sollte die gleiche Größe wie das andere Bild haben, da es das andere Bild beim Bewegen/Klicken ersetzt.

Für dieses Bild geben wir ihm eine absolute Position. Dadurch wird das Bild direkt über dem anderen Bild platziert, ohne tatsächlich Platz auf der Seite einzunehmen.

• Position: Absolut

Ändern Sie auf der Registerkarte Design die Deckkraft unter den Filteroptionen, sodass das Bild vollständig unsichtbar ist.

• Deckkraft: 0%

Textüberschrift hinzufügen

Fügen Sie in der rechten Spalte einen neuen Textbaustein hinzu.

Fügen Sie dann den folgenden HTML-Code in den Textkörperinhaltsbereich ein:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Beachten Sie, dass einige der Wörter im Text mit span-Tags umschlossen sind. Auf diese Weise können wir diese Wörter später mit benutzerdefiniertem CSS gezielt ansprechen und formatieren.

Aktualisieren Sie auf der Registerkarte "Design" die H3-Stiloptionen wie folgt:

• Überschrift 3 Schriftart: Montserrat
• Überschrift 3 Schriftstärke: Ultra Bold
• Überschrift 3 Schriftstil: TT
• Überschrift 3 Textgröße: 65px (Desktop und Tablet), 40px (Telefon)
• Überschrift 3 Buchstabenabstand: 0.8em
• Überschrift 3 Zeilenhöhe: 1,3em

Das kümmert sich um das Abschnittslayout, das die Designelemente enthält, die wir ändern, wenn Sie mit der Maus über eine Schaltfläche fahren/klicken. In diesem nächsten Abschnitt werden wir die Schaltfläche hinzufügen, mit der wir die Stiländerungen initiieren.

Abschnitt für Schaltfläche erstellen

Erstellen Sie unterhalb des aktuellen Abschnitts einen neuen regulären Abschnitt.

Fügen Sie dann dem Abschnitt eine einspaltige Zeile hinzu.

Schaltfläche hinzufügen

Fügen Sie in der Spalte ein neues Tastenmodul hinzu.

Ändern Sie den Text der Schaltfläche in "Siehe nach".

Wechseln Sie zur Registerkarte Design und aktualisieren Sie das Design der Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrund: #4b4baf
• Schaltflächenhintergrund (Hover): #67ddc1
• Breite des Tastenrahmens: 0px
• Tastenabstand: 4px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Halbfett
• Schaltflächenschriftart: TT

Teil 2: Hinzufügen von CSS-Klassen zu den Elementen

Nachdem unser Design nun an Ort und Stelle ist, werden wir den Rest der Designänderungen mit benutzerdefiniertem Code (CSS und JQuery) durchführen. Bevor wir jedoch mit dem Hinzufügen unseres benutzerdefinierten Codes beginnen, müssen wir allen Elementen, die wir ändern möchten, CSS-Klassen hinzufügen, wenn wir mit der Maus darüber fahren oder auf die Schaltfläche klicken.

CSS-Klasse zum Abschnitt hinzufügen

Um dem Abschnitt eine CSS-Klasse hinzuzufügen, öffnen Sie die Abschnittseinstellungen und klicken Sie auf die Registerkarte Erweitert. Geben Sie dann die folgende CSS-Klasse ein:

• CSS-Klasse: et-change-style_section

CSS-Klasse zu Bildern hinzufügen

Öffnen Sie als nächstes die Einstellungen für das erste Bild in der linken Spalte und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-before-image

Dies ist das Bild, das „vor“ dem Schweben/Klicken der Schaltfläche angezeigt wird.

Öffnen Sie mit dem Ebenen-Modal die Einstellungen für das zweite Bild (das mit dem Deckkraftfilter ausgeblendet wird) und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-after-image

Dies ist das Bild, das „nach“ dem Schweben/Klicken der Schaltfläche angezeigt wird.

CSS-Klasse zu Text hinzufügen

Als nächstes fügen Sie dem Textmodul in der rechten Spalte die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-style-text

CSS-Klasse zum Button hinzufügen

Schließlich fügen Sie eine benutzerdefinierte CSS-Klasse hinzu, die Schaltfläche im unteren Abschnitt wie folgt:

• CSS-Klasse: et-toggle-button

Wir benötigen diese Klasse, um später im Code auf die Schaltfläche für die Hover-/Klick-Funktionalität abzuzielen.

Teil 3: Benutzerdefinierten Code hinzufügen, um Stile beim Hover oder Klicken zu ändern

Jetzt, da alle unsere CSS-Klassen vorhanden sind, können wir jetzt den Code hinzufügen, der erforderlich ist, um den Stil all dieser Elemente zu ändern, wenn Sie mit der Maus über die Schaltfläche fahren oder auf die Schaltfläche klicken.

Codemodul hinzufügen

Um den Code hinzuzufügen, fügen Sie unter der Schaltfläche im unteren Bereich ein Codemodul hinzu.

jQuery-Code einfügen

Fügen Sie dann die folgende JQuery ein. Stellen Sie sicher, dass Sie den Code in Skript-Tags einschließen, da wir den Code zu einem HTML-Dokument hinzufügen (nicht zu einer JS-Datei).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

Wenn Sie sich den Code ansehen, sollten Sie die CSS-Klassen erkennen, die wir der Schaltfläche und dem Abschnitt hinzugefügt haben.

Die Button-Klasse („.et-toggle-button“) wird verwendet, um auf das Element zu zielen, das beim Schweben eine Funktion auslöst.

Beim Hover findet die Funktion das Element mit der Abschnittsklasse „.et-change-style_section“ und schaltet/hinzufügen eine neue Klasse („.et-change-style-active“), wenn sich der Cursor über der Schaltfläche befindet.

Der Button wird auch anvisiert (über „$this“), um eine neue Klasse („.et-toggle-button_active“) im Hover-Zustand umzuschalten.

Der Schlüssel zum Ändern der Stile dieser Elemente beim Hover ist das Hinzufügen/Umschalten dieser zusätzlichen neuen CSS-Klassen zum Abschnitt und zur Schaltfläche.

Wenn beispielsweise dem Abschnitt mit der Klasse „.et-change-style_section“ diese zusätzliche Klasse („.et-change-style_active“) zugewiesen wurde, können wir mit Custom CSS den Stil des ursprünglich zugewiesenen Abschnitts ändern über die integrierten Divi-Optionen.

Ändern des Stils von Elementen mit benutzerdefiniertem CSS

Öffnen Sie das Codemodul und fügen Sie das folgende benutzerdefinierte CSS über dem JQuery-Skript ein. Stellen Sie sicher, dass es in die erforderlichen Style-Tags eingeschlossen ist.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Beachten Sie, dass die anfängliche Abschnittsklasse mit der neuen Klasse als Selektor kombiniert wird. Das folgende CSS gilt nur für den Abschnitt, wenn diese neue Klasse angehängt ist. Wenn es nicht angebracht ist, wird das Originaldesign angezeigt. In diesem Beispiel ändert sich die Hintergrundfarbe des Abschnitts, wenn Sie mit der Maus über die Schaltfläche fahren.

Fügen Sie als Nächstes das folgende zusätzliche CSS in die style-Tags ein.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Da dem übergeordneten Abschnitt beim Hover eine Klasse zugewiesen wird, können Sie mit derselben CSS-Klasse auf die untergeordneten Elemente des Abschnitts (wie die Bilder) abzielen. Da es sich jedoch um eine Klasse in einem übergeordneten Container/Abschnitt handelt, sollte die CSS-Klasse der Klasse des Elements vorangehen, das Sie ändern möchten. In diesem Beispiel steht die CSS-Klasse („.et-change-style_active“), die dem übergeordneten Abschnitt übergeben wird, vor der Klasse, die den untergeordneten Bildern („.et-after-image“ und „.et-before-image“) übergeben wird.

Das CSS für das Nachbild zeigt das Bild beim Überfahren der Schaltfläche an. Und das CSS für das Vorher-Bild blendet das Bild beim Überfahren der Schaltfläche aus. Das Ergebnis ist, dass das anfängliche Bild beim Schweben der Schaltfläche in ein neues geändert wird.

Als nächstes fügen Sie den Rest des CSS in die style-Tags ein:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

Diese CSS-Schnipsel verwenden das gleiche Konzept, um den Stil des Elements zu ändern, wenn der Abschnitt (oder die Schaltfläche) die neue Klasse hat.

Endergebnis (Hover)

Nachdem der Code hinzugefügt wurde, speichern Sie die Änderungen und öffnen Sie die Seite, um das Ergebnis anzuzeigen. Beachten Sie, wie die von uns ausgewählten Elemente geändert werden, wenn Sie mit der Maus über die Schaltfläche fahren.

Ändern von Stilen beim Klicken statt beim Schweben

Wenn Sie den Stil derselben Elemente ändern möchten, wenn Sie auf die Schaltfläche klicken (anstatt den Mauszeiger zu bewegen), müssen Sie lediglich einige Änderungen an der JQuery vornehmen. Der Großteil des Codes bleibt gleich. Der Hauptunterschied besteht darin, dass die „Hover“-Methode durch „Click“ ersetzt wird. Und wir haben ein hilfreiches Code-Snippet hinzugefügt, das den Text der Schaltfläche beim Klicken ändert.

Um die Klickfunktionalität hinzuzufügen, ersetzen Sie die aktuelle JQuery durch Folgendes (stellen Sie erneut sicher, dass sie in die Skript-Tags eingeschlossen ist):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Hier ist das Endergebnis.

Abschließende Gedanken

In der Lage zu sein, den Stil mehrerer Elemente auf einer Seite beim Bewegen der Maus oder beim Klicken auf etwas gezielt zu ändern und zu ändern, ist eine hilfreiche Fähigkeit im Webdesign. Sie können diese Technik für eine Vielzahl von Anwendungsfällen verwenden (vorher und nachher, CTAs usw.). Sicher, es hilft ein wenig CSS und JS/JQuery zu kennen. Aber wie Sie in diesem Tutorial gesehen haben, müssen Sie keinen Code kennen, um überraschende Ergebnisse zu erzielen!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!