Wenn ihr also einen eigenen Logo Slider haben wollt, dann könnt ihr den folgenden Code verwenden. Übrigens dieser Code funktioniert genauso auch in Divi 4.

Denkt daran, dass ihr alle Logo Bilder gleich gross macht – damit es am schönsten aussieht – ich habe hier alle Bilder in 500x500px verpackt.

Und jetzt könnt ihr loslegen

Video

Konfiguration

Öffnet die Seite wo ihr den Logo Slider gerne haben möchtet.

Erstellt jetzt als erstes eine neue Section (Sektion), darin fügt ihr eine einzelne Row (Zeile) ein.

Jetzt innerhalb dieser Row ein Bildmodul aktivieren. Jetzt könnt ihr dem Bildmodul ein Bild geben.

Im Bildmodul habe ich nun unter „Sizing“ die Width auf 200 px gesetzt und unter „Spacing“ das Margin Right auf 20 px (Abstand nach rechts) und ein Margin Bottom auf 0 (Abstand nach unten).

Jetzt habe ich das Bildmodul mehrfach kopiert und mit eigenen Logo-Bildern ersetzt.

Als nächstes habe ich unter Row die Bilderanordnung geändert, so dass sie nicht mehr untereinander, sondern nebeneinander liegen. Dafür ging ich unter Design → Layout. Habe das Layout Style auf Flex gestellt und Layout Direction auf Row gestellt.

Jetzt müsst ihr die Row noch so einstellen, dass die Breite sich an den Bildern anpasst, damit der Slider nicht irgenwo in der Mtte der Seite aufhört.

Geht in die Row rein und unter ≪Advanced≫ → ≪Free-Form CSS≫ gebt ihr den folgenden Code ein.

selector {
  max-width:max-content;
  width:max-content;
}

Nun könnt ihr die Row kopieren.

Beide Rows müssen nun nebeneinander liegen, also gehe ich in die Section rein und stelle es auf Flex (sollte ja schon so sein) und Layout Direction auf Row/Zeile.

Jetzt kann man unter Section reingehen und direkt unter ≪Advanced≫ → ≪Free-Form CSS≫ den folgenden Code eingeben.

Jetzt müsst ihr euch nur noch überlegen in welche Richtung der Slider gehen soll und wie schnell. Unten im Code seht ihr ja welchen was macht – lässt den 2. einfach weg.

/* animation starten*/
selector .et_pb_row {
animation: ticker 20s linear infinite;
}

/* ticker von rechts nach links */
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ticker von links nach rechts */
@keyframes ticker {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}


/* stoppt ticker bei mouse hover */
selector:hover .et_pb_row {
animation-play-state:paused;
}

Und damit habt ihr also den automatischen Logo Slider erstellt, der aufhört zu scrollen sobald man mit der Maus darüber geht.