Hübsche Testimonial-Slideshows mit dem Slider-Modul des Divi-Themes bauen

30. Oktober 2022 | CSS-Stylesheet, Divi-Theme |

Geschätzte Lesezeit für diesen Beitrag: ca. 10 Minuten.

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.

Jane Doe

Managerin, Zürich

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.

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

At vero eos

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Stet clita

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

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:

«Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.»

John Doe
Programmierer, Genf

«Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.»

Jane Doe
Architektin, Lugano

«Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.»

Jack Mustermann
Lehrer, Bern

«Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.»

Franziska Musterfrau
Ärztin, Chur

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This