Heute wagen wir uns an einen der cooleren Tricks aus der Praxis von Dr. Code: Wir bauen einen Schalter, mit dem sich zwischen zwei Modulen (oder Zeilen) hin und her schalten lässt. Egal ob ein Bild-, Formular- oder Textmodul (oder ganz was anderes) und jede beliebige Mischung daraus.
Nun gut: Die Sache lässt sich nicht so leicht in Worten erklären. Gucken Sie doch mal hier. Da haben wir ein Beispiel parat.
Um einen solchen Contentschalter einzurichten, benötigen Sie ein paar Codeblöcke. Zunächst ein Script. Dieses fügen Sie in den <head>-Bereich Ihrer Website (im Backend unter Divi/Theme-Optionen/Integration) hinzu:
<script>
jQuery(document).ready(function ($) {
$(document.body).on('change', '.toggle__switch_checkbox', function() {
var isChecked = $(this).prop('checked');
$('.toggle__content_1').toggleClass('toggle__inactive', isChecked);
$('.toggle__content_2').toggleClass('toggle__inactive', !isChecked);
})
})
</script>Als nächstes folgt ein gutes Stück CSS-Code – diesen platzieren Sie im CSS-Stylesheet Ihrer Website. Sie finden es unter Design/Customizer/Zusätzliches CSS:
/* Hintergrundfarbe des Schalters */
.toggle__switch > input:checked + label {
background : #59B14B;
}
.toggle__switch label {
background : #293280;
}
/* Schalterfarbe */
.toggle__switch label::after {
background : #ffffff;
}
.toggle__switch_wrapper {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
align-items : center;
justify-content : center;
margin-bottom : 20px;
}
.toggle__switch_wrapper_inner {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
align-items : center;
}
.toggle__switch {
position : relative;
display : inline-block;
vertical-align : middle;
margin : 0 30px;
cursor : pointer;
}
.toggle__switch input[type="checkbox"] {
position : relative;
width : 100%;
height : 100%;
padding : 0;
margin : 0;
opacity : 0;
z-index : 3;
display : none;
-webkit-appearance : none;
}
.toggle__label {
line-height : 1.7em;
}
.toggle__switch {
width : 50px;
height : 30px;
}
.toggle__switch label {
cursor : pointer;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
position : absolute;
-webkit-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
transition : all 0.3s ease;
border-radius : 20px;
}
.toggle__switch label::after {
position : absolute;
-webkit-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
transition : all 0.3s ease;
top : 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
content : "";
height : 20px;
width : 20px;
left : 5px;
bottom : 5px;
border-width : 0;
border-radius : 50%;
}
.toggle__switch > input:checked + label::after {
-webkit-transform : translate(20px, -50%);
transform : translate(20px, -50%);
}
.toggle__inactive { display: none !important; }Empfehlenswerte Anpassungen: Auf den Zeilen 3 und 7 können Sie die Schalter-Hintergrundfarbe festlegen. Die Farbe des Schalters selber wird auf Zeile 12 definiert.
Zu guter Letzt benötigen Sie noch ein Stück HTML-Code, welches den Schalter erzeugt. Diesen Code können Sie auf Ihrer Divi-Website am besten an gewünschter Position in ein Code-Modul füllen:
<div class="toggle__switch_wrapper">
<div class="toggle__switch_wrapper_inner">
<div class="toggle__label toggle__label_primary">
mach es blau
</div>
<div class="toggle__switch">
<input type="checkbox" name="toggle" id="toggle" class="toggle__switch_checkbox">
<label for="toggle"></label>
</div>
<div class="toggle__label toggle__label_secondary">
mach es grün
</div>
</div>
</div>Die Beschriftungen «mach es blau, bzw. grün» sind in Ihrem Fall vermutlich blanker Unsinn. Sie sollten die Zeilen 4 und 9 darum mit sinnvollerem Inhalt ersetzen.
Nun müssen Sie noch den zunächst sichtbaren sowie den versteckten Inhalt vorbereiten. Das können zwei Text-Module sein. Oder ein Bild- und ein Textmodul, oder ein Text- und ein Formularmodul … und, und und. Sogar Divi-Rows (Zeilen) sind möglich.
Platzieren Sie die beiden Elemente direkt im Anschluss an das Code-Modul, in welches Sie den HTML-Code eingefügt haben.
Haben Sie die beiden Module parat? Dann müssen Sie nun beiden noch CSS-Klassen zuweisen:
- Das zunächst sichtbare Modul erhält die Klasse «toggle__content_1».
- Das zunächst versteckte Modul erhält die Klassen «toggle__content_2 toggle__inactive».
Die CSS-Klassen fügen Sie dem jeweiligen Modul im Tab «Erweitert», unter «CSS-ID und Klassen» hinzu. Fügen Sie den/die zutreffenden Klassennamen ins Feld «CSS-Klasse» ein.
Wenn alles geklappt hat, sollte Ihr Contentschalter nun ungefähr so aussehen:
blau
Dies ist der Text mit blauem Hintergrund. Das sieht man ja deutlich. Klickt man auf den Button oben, dann wird der Hintergrund grün.
Versprochen!
grün
Nun ja. Jetzt ist der Hintergrund grün. Das kommt davon, wenn man oben auf den Button klickt. Möchten Sie lieber wieder blau als Hintergrund?
Dann müssen Sie noch einmal klicken.
Cooles Goodie. Oder?
Werbung
Werbung
