Ehrlich gesagt, Leute: An diesem Trick hab› ich meine helle Freude. Der Slider des Divi-Themes lässt sich nämlich ganz hervorragend mit Testimonials bestücken, welche dann eins ums andere eingeblendet werden. Klingt kompliziert – isses aber nicht.
Womöglich kennen Sie bereits das Testimonial-Modul des Divi-Themes. So wie nebenan sieht es aus:
Nachteil: Die Testimonials werden zwar adrett angezeigt, sie sind aber nicht animiert. Sie bleiben einfach statisch da stehen.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Bild: © Konstantin Gastmann/pixelio.de
Und das Slider-Modul (siehe nebenan) werden Sie vermutlich auch kennen:
Diese beiden Module verbinden wir nun. Sprich: Wir bauen das Slider-Modul so um, dass es zum Testimonial-Slider wird.
Zunächst benötigen Sie einen CSS-Code – Sie finden ihn in der Folge. Fügen Sie diesen Block in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
/* Die Bild-URLs manuell zum Slide-Controller hinzufügen */
.testimonial-slider .et-pb-controllers a:nth-child(1) {
content: url('https://dr-code.ch/wp-content/uploads/647333_original_R_K_B_by_Tim-Reckmann_pixelio.de_.jpg');
}
.testimonial-slider .et-pb-controllers a:nth-child(2) {
content: url('https://dr-code.ch/wp-content/uploads/618159_original_R_K_B_by_Corinna-Dumat_pixelio.de_-scaled.jpg');
}
.testimonial-slider .et-pb-controllers a:nth-child(3) {
content: url('https://dr-code.ch/wp-content/uploads/490009_original_R_by_Konstantin-Gastmann_pixelio.de_.jpg');
}
.testimonial-slider .et-pb-controllers a:nth-child(4) {
content: url('https://dr-code.ch/wp-content/uploads/489966_original_R_by_Konstantin-Gastmann_pixelio.de_-scaled.jpg');
}
/* Grösse und Position der Bilder */
.testimonial-slider .et-pb-controllers a {
width: 90px;
height: 90px;
border-radius: 100%;
margin: 0 15px;
}
/* Deckkraft beim Hovern ändern */
.testimonial-slider .et-pb-controllers a:hover {
opacity: 1;
}
/* Die aktive Slide etwas grösser darstellen */
.testimonial-slider .et-pb-controllers .et-pb-active-control {
width: 100px;
height: 100px;
margin-bottom: -5px;
}
/* Die Textschatten ausschalten */
.testimonial-slider .et_pb_slide_description {
text-shadow: none!important;
margin-bottom: 20px!important;
}
/* Die Animation der Folienbeschreibung ändern */
.testimonial-slider .et-pb-active-slide .et_pb_slide_description {
animation-name: fadeIn;
}
@media (max-width: 980px) {
/* Grösse und Position der Bilder - mobil */
.testimonial-slider .et-pb-controllers a {
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 10px;
}
/* Die aktive Slide etwas grösser darstellen - mobil */
.testimonial-slider .et-pb-controllers .et-pb-active-control {
width: 60px;
height: 60px;
margin-bottom: -5px;
}
/* Bildposition anpassen - mobil */
.testimonial-slider .et-pb-controllers {
bottom: 10%;
}
}
/* Positionierung der Bilder - mobil */
@media (max-width: 767px) {
.testimonial-slider .et-pb-controllers {
bottom: 20%;
}
/* Positionierung der Bilder - mobil */
.testimonial-slider .et_pb_slide_description {
margin-bottom: 50px!important;
}
}Nun sind noch einige Dinge nötig, die Sie im Divi-Builder vornehmen müssen:
- Fügen Sie ein Slider-Modul hinzu.
- Vergeben Sie dem Modul eine CSS-Klasse: «testimonial-slider». Tun Sie dies in den Moduleinstellungen im Tab «Erweitert», dann unter «CSS-ID & Klassen» und fügen Sie «testimonial-slider» ins Textfeld «CSS-Klassen» ein.
- Fügen Sie dem Modul eine erste Slide hinzu und geben im Feld «Body» Ihren Testimonial-Text ein. Lassen Sie die Felder für den Titel und Button leer.
- Fügen Sie auch den Namen der Person, ihre Funktion und die Ortschaft ein. Gestalten Sie die Darstellung dieses Textes nach Ihrem Gusto.
- Duplizieren Sie die erstellte Folie und wiederholen Sie die beiden letzten Schritte für weitere Folien.
- Laden Sie quadratische Bilder der Testimonial-Personen in Ihre WordPress-Mediathek hoch.
- Wechseln Sie in das CSS-Stylesheet Ihrer Website (DEsign/Customizer/Zusätzliches CSS) und ändern Sie die Bilder am Anfang des CSS-Snippets. Kopieren Sie dafür die URL Ihrer soeben hochgeladenen Bilder und ersetzen Sie auf den Zeilen 3, 6, 9 und 12 die gesamte URL. Beachten Sie dabei den roten Block:
content: url('URL-IHRES-BILDES'); - Duplizieren oder löschen Sie im Code nach Bedarf einzelne Zeilen, je nachdem, wie viele Folien Sie benötigen. Behalten Sie das gleiche Format wie unser Snippet bei, indem Sie das Format
a:nth-child(NR-DER-FOLIE)verwenden, um die Anzahl Ihrer Folien anzupassen.
Wenn alles richtig funktioniert hat, sollte Ihr Slider nun so aussehen:
Bilder: Folie 1: © Tim Reckmann/pixelio.de, Folie 2: © Corinna Dumat/pixelio.de, Folie 3: © Konstantin Gastmann/pixelio.de, Folie 4: © Konstantin Gastmann/pixelio.de
Ein cooler Trick. Oder?
Werbung
Werbung
