Möchten Sie den Stil mehrerer Elemente ändern? Divi beim Hover oder nach dem Klick?
In diesem Tutorial zeigen wir Ihnen, wie Sie den Stil mehrerer Elemente beim Hovern oder Klicken ändern können Divi.
Zunächst werden wir die integrierten Designoptionen von nutzen Divi um ein Abschnittslayout zu entwerfen.
Als Nächstes stellen wir ein einfaches jQuery-Snippet vor, das Sie in Kombination mit benutzerdefiniertem CSS verwenden können, um den Stil jedes Elements in diesem Abschnitt anzupassen, wenn Sie mit der Maus über eine Schaltfläche fahren oder darauf klicken.
Das mag kompliziert klingen (insbesondere für Anfänger), aber Sie werden überrascht sein, wie einfach es ist.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Überblick über das Design, das wir in diesem Tutorial erreichen werden.
Ändern von Elementen auf Knopfdruck
Änderung der Elemente nach Klick auf die Schaltfläche
Beginnen wir mit der Erstellung einer Seite mit Divi Builder
Siehe auch: Divi: So erstellen Sie ein sich drehendes Radmenü beim Hover
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Teil 1: Abschnittslayout-Design
Erstellen Sie zunächst eine neue Zeile mit zwei Spalten.
Abschnittseinstellungen
Öffnen Sie vor dem Hinzufügen von Modulen die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- Hintergrund: #ffffff
Lassen Sie uns ein Abschnittstrennzeichen hinzufügen
- Teiler (oben)
- Stil: siehe Screenshot
- Farbe: #ffffff
- Höhe: 5vw
- Teiler (unten)
- Stil: siehe Aufnahme
- Farbe: #ffffff
- Höhe: 5vw
- Polsterung (oben und unten): 6vw
Bild (vor Hover)
Fügen Sie in der linken Spalte der zweispaltigen Zeile ein neues Bildmodul hinzu.
Laden Sie als Nächstes das Bild hoch, das Sie hervorheben möchten.
Unter der Registerkarte Design, aktualisieren Sie die Ausrichtung und aktivieren Sie die Option Stärke Volle Breite.
- Bildausrichtung: zentriert
- Stärke Volle Breite: JA
Bild (Bei Hover oder nach Klick)
Als Nächstes erstellen wir ein weiteres Bild, das wir anzeigen, wenn wir mit der Maus auf eine Schaltfläche zeigen/klicken.
Um das Bild zu erstellen, duplizieren Sie das vorherige Bildmodul.
Laden Sie dann ein neues Bild hoch. Das Bild muss 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 wirklich Platz auf der Seite einzunehmen.
- Position: Absolut
Unter der Registerkarte Design, ändern Sie die Deckkraft unter den Filteroptionen so, dass das Bild vollständig unsichtbar ist.
- Deckkraft: 0 %
Fügen Sie ein Textmodul hinzu
Fügen Sie in der rechten Spalte einen neuen Textbaustein hinzu.
Fügen Sie dann den folgenden HTML-Code in das Feld ein Inhalt aus dem Körper:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Beachten Sie, dass einige Wörter im Text von Tags umgeben sind Spannweite. So können wir diese Wörter später mit benutzerdefiniertem CSS gezielt ansprechen und anpassen.
Unter der Registerkarte Design, aktualisieren Sie die H3-Stiloptionen wie folgt:
- Überschrift 3:
- Schrift: Montserrat
- Schriftstärke Schriftstärke: Ultra Bold
- Stil: TT
- Textgröße: 60 px (Computer und Tablet), 40 px (Telefon)
- Buchstabenabstand: 0,06 em
- Zeilenhöhe: 2 cm
Im nächsten Abschnitt fügen wir die Schaltfläche hinzu, mit der wir Stiländerungen einleiten.
Erstellen Sie einen Abschnitt für die Schaltfläche
Zuerst müssen wir einen neuen regulären Abschnitt unterhalb des aktuellen Abschnitts erstellen.
Fügen Sie dann dem Abschnitt eine Zeile zu einer Spalte hinzu.
Fügen Sie eine Schaltfläche
Fügen Sie in der Spalte ein neues Modul hinzu Taste.
Ändern Sie den Text der Schaltfläche in "Fortfahren...".
Wechseln Sie zur Registerkarte Design und aktualisieren Sie das Schaltflächendesign wie folgt:
- Benutzerdefinierte Stile für Schaltfläche verwenden: JA
- Textgröße: 16px
- Textfarbe: #ffffff
- Schaltflächenhintergrund (Desktop): #4b4baf
- Button Hintergrund (Hover): #67ddc1
- Randbreite: 0 Pixel
Lesen Sie auch: Divi: So fügen Sie dem Menümodul ein Hamburger-Symbol hinzu
- Buchstabenabstand der Schaltfläche: 4px
- Schrift: Montserrat
- Schriftstärke: Semi Bold
- Schaltflächen-Schriftstil: TT
- Rand (unten): 0px
- Polsterung (oben und unten): 1.5 cm
- Polsterung (links und rechts): 4em
Teil 2: CSS-Klassen zu Elementen hinzufügen
Nachdem unser Design nun vorhanden ist, werden wir die restlichen Designänderungen mit benutzerdefiniertem Code (CSS und JQuery) vornehmen.
Aber bevor wir mit dem Hinzufügen unseres benutzerdefinierten Codes beginnen, müssen wir CSS-Klassen zu allen Elementen hinzufügen, die wir ändern möchten, wenn wir mit der Maus auf die Schaltfläche zeigen/klicken.
Fügen Sie dem Abschnitt eine CSS-Klasse hinzu
Um dem Abschnitt eine CSS-Klasse hinzuzufügen, öffnen Sie die Abschnittseinstellungen und klicken Sie auf die Registerkarte Fortgeschrittener. Geben Sie dann die folgende CSS-Klasse ein:
- CSS-Klasse: et-change-style_section
Fügen Sie Image-Modulen eine CSS-Klasse hinzu
Ö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 Hover/Klick auf die Schaltfläche angezeigt wird.
Öffnen Sie mit dem Ebenenmodal die Einstellungen für das zweite Bild (das mit dem Deckkraftfilter ausgeblendete) und fügen Sie die folgende CSS-Klasse hinzu:
- CSS-Klasse: et-after-image
Dies ist das Bild, das „nach“ dem Bewegen/Klicken auf die Schaltfläche angezeigt wird.
Fügen Sie dem Textmodul eine CSS-Klasse hinzu
Als nächstes fügen Sie dem Textbaustein in der rechten Spalte die folgende CSS-Klasse hinzu:
- CSS-Klasse: et-style-text
Fügen Sie dem Button-Modul eine CSS-Klasse hinzu
Fügen Sie schließlich eine benutzerdefinierte CSS-Klasse zur Schaltfläche im unteren Abschnitt wie folgt hinzu:
- CSS-Klasse: et-toggle-button
Wir benötigen diese Klasse, um die Schaltfläche später für die Hover/Click-Funktionalität im Code anzusprechen.
Teil 3: Fügen Sie benutzerdefinierten Code hinzu, um Stile beim Bewegen oder Klicken zu ändern
Jetzt, da alle unsere CSS-Klassen vorhanden sind, können wir den erforderlichen Code hinzufügen, um den Stil all dieser Elemente zu ändern, wenn Sie mit der Maus über die Schaltfläche fahren/klicken.
Fügen Sie ein Codemodul hinzu
Um den Code hinzuzufügen, fügen Sie ein Code-Modul unterhalb der Schaltfläche im unteren Abschnitt hinzu.
Fügen Sie den jQuery-Code ein
Fügen Sie dann die folgende JQuery ein. Achten Sie darauf, den Code in Skript-Tags einzuschließen, wenn wir den Code einem HTML-Dokument (nicht einer JS-Datei) hinzufügen.
(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 );
Ändern Sie den Stil von Elementen mit benutzerdefiniertem CSS
Öffnen Sie das Code-Modul und fügen Sie das folgende benutzerdefinierte CSS über dem JQuery-Skript ein, wobei Sie darauf achten müssen, es in die erforderlichen Stil-Tags einzuschließen.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Fügen Sie dann 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%);
} 
Fügen Sie dann 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-Snippets verwenden dasselbe Konzept, um den Stil des Elements zu ändern, wenn der Abschnitt (oder die Schaltfläche) die neue Klasse hat.
Endergebnis (Übersicht)
Nachdem der Code hinzugefügt wurde, speichern Sie die Änderungen und öffnen Sie die Seite, um das Ergebnis anzuzeigen. Beachten Sie, wie sich die von uns ausgewählten Elemente ändern, wenn Sie den Mauszeiger über die Schaltfläche bewegen.
Ändern Sie Stile per Klick
Um die Klickfunktion hinzuzufügen, ersetzen Sie die aktuelle JQuery durch Folgendes (stellen Sie auch hier sicher, dass sie in 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('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Hier ist das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In der Lage zu sein, mehrere Elemente auf einer Seite anzuvisieren und zu stylen, wenn Sie den Mauszeiger über etwas bewegen oder darauf klicken, ist eine nützliche Fähigkeit im Webdesign.
Sie können diese Technik für eine Vielzahl von Anwendungsfällen verwenden (vorher und nachher, CTA usw.)
Natürlich hilft es, ein wenig CSS und JS/JQuery zu kennen. Aber wie Sie in diesem Tutorial gesehen haben, benötigen Sie keine tiefen Programmierkenntnisse, um erstaunliche Ergebnisse zu erzielen!
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
