Wie man ein Divi Carousel ohne Plugin erstellt – kostenlos

Ich bin zurück mit einem weiteren großartigen Divi-Tutorial! In diesem Tutorial zeige ich Ihnen, wie Sie ein Divi Carousel erstellen, ohne ein zusätzliches Plugin zu verwenden! 😍

Nicht nur, dass Sie kein Plugin kaufen müssen, dieses Carousel Tutorial ist auch extrem leichtgewichtig.

Alle Karussell-Ressourcen sind vollständig auf der Seite enthalten, auf der Sie es platzieren, und es wird Ihre Website nicht verlangsamen!

Karussells sind derzeit sehr beliebt im Webdesign, allerdings können sie recht ressourcenintensiv sein. Und die meisten der heute verfügbaren Divi Theme Carousel Plugin laden ALLE Ressourcen des Plugins auf ALLEN Seiten Ihrer Website, egal ob diese benötigt werden oder nicht.

Ich habe dies auf die harte Tour herausgefunden, als ich meine neue Divi Popup-Demoseite für Divi Overlays erstellte.

Also habe ich das ursprünglich verwendete Divi Plugin verworfen und die Karussells manuell mit dem Slick.JS Slider Carousel Framework gebaut.

Es ist erwähnenswert, dass fast jedes Karussell-Modul oder Plugin auf dem Markt entweder Slick oder Swiper verwendet, um die Karussells anzutreiben.

Mit der Methode in diesem Tutorial (Hinzufügen des Karussell-Frameworks zu nur einer eigenständigen Seite) erhalten Sie die gleiche Funktionalität, aber ohne die Belastung der gesamten Website!

Okay, schauen wir uns an, was wir heute erstellen werden!

Das Divi Carousel Layout, das wir erstellen werden

Ziemlich cool, oder? 😉 Okay, tauchen wir jetzt ins Tutorial ein. Es gibt wirklich nur drei Hauptschritte, um das Karussell zu erstellen:

1. Erstellen Sie eine einspaltige Reihe mit den gewünschten Karussell-Elementen (Module)
2. Fügen Sie die CSS-Klasse der Spalte und den Modulen hinzu (um das Karussell und die Karussell-Elemente zu definieren)
3. Fügen Sie den Karussell-CSS/JS-Code in einem Code-Modul zur Seite hinzu

Gar nicht so schwer, oder? Fangen wir an!

Schritt Eins: Erstellen Sie eine einspaltige Reihe mit den gewünschten Karussell-Elementen (Modulen)

Wir werden das Karussell innerhalb des Digital Marketing Layouts von Elegant Themes erstellen und die wunderschönen Service-Blurbs als Karussell-Elemente verwenden.

Aber ob Sie nun genau diesem Layout folgen oder die Reihe und Module von Grund auf neu erstellen, denken Sie an Folgendes:

– Die Reihe darf nur eine Spalte haben
– Alle Module, die Sie im Karussell haben möchten, müssen sich in derselben Spalte befinden

Für das Digital Marketing Layout habe ich eine neue Reihe erstellt und alle Service-Blurbs in eine neue einspaltige Reihe verschoben, sodass sie jetzt so aussehen:

Wenn Sie Ihr eigenes Karussell erstellen, fügen Sie Ihre gewünschten Module einfach zur einspaltigen Reihe hinzu, wie oben gezeigt.

Schritt Zwei: Hinzufügen der CSS-Klassen zur Spalte und zu den Modulen

Dieser Schritt besteht aus zwei Teilen:

1. Hinzufügen einer CSS-Klasse zur Spalte (nur einmal, um festzulegen, wo sich unser Karussell befindet).
2. Hinzufügen einer CSS-Klasse zu jedem Modul im Karussell (muss für jedes Modul in der Spalte gemacht werden).

Kopieren Sie einfach die unten stehende CSS-Klasse und fügen Sie sie im Feld „CSS-Klasse“ innerhalb des Erweitert-Tabs der Spalte hinzu (nicht mit der Reihe verwechseln):

trabolda-3-col-feature-blurb-slider

Es sollte dann so aussehen:

Nun fügen Sie die folgende CSS-Klasse zu jedem Modul in Ihrer Spalte hinzu, das zu einem Karussell-Element werden soll:

trabolda-3-col-feature-blurb

Es sollte dann so aussehen:

Schritt Drei: Hinzufügen des Karussell-CSS/JS-Codes zur Seite in einem Code-Modul

Ich habe diesen Schritt SEHR einfach für Sie gemacht, indem ich den gesamten CSS/JS-Code in ein einziges Code-Modul gepackt habe.

Es ist nicht nur einfach einzurichten, sondern auch leicht zu warten. Und es ist auch die beste Methode im Hinblick auf Performance.

Andere ähnliche Tutorials, die ich gesehen habe, lassen Sie den Slick.js-Code[1] zu den Divi-Theme-Optionen im Integrationstab hinzufügen.

Der Nachteil dieser Methode ist, dass das gesamte Javascript-Framework auf jeder Seite Ihrer Website geladen wird, was nicht ideal oder notwendig ist.

Der Code unten besteht im Wesentlichen aus drei Teilen:

1. Das Slick.js Javascript-Framework (wird von einem CDN geladen)
2. Das CSS für unser Karussell
3. Das Skript, das die Einstellungen für unser Karussell steuert (Schaltflächen, Paginierung-Punkte, Anzahl der aktiven Elemente usw.)

Kopieren Sie nun den unten stehenden Code und fügen Sie ihn in ein Code-Modul in einer separaten einspaltigen Reihe ein:

Fügen Sie diesen Code in ein Code-Modul in einer neuen einspaltigen Reihe ein.

<style>
.slick-slider {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow-x: hidden;
  margin: 0;
  padding: 0 0 0px;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: '';
}
.slick-slide {
  position: relative;
  float: left;
  height: 100%;
  min-height: 1px;
}
.trabolda-3-col-feature-blurb-slider .slick-arrow, .trabolda-3-col-feature-blurb-slider .slick-arrow:hover, .trabolda-3-col-feature-blurb-slider .slick-arrow:focus {
  position: absolute;
  font-size: 0;
  line-height: 0;
  padding: 0;
  color: transparent;
  outline: none;
  background: rgba(122,105,230,0.3);
  border: none;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  height: 50px;
  vertical-align: middle;
  border-radius: 50%;
  width: 50px;
}
.trabolda-3-col-feature-blurb-slider .slick-prev { left: -50px; }
.trabolda-3-col-feature-blurb-slider .slick-next { right: -50px; }
.trabolda-3-col-feature-blurb-slider .slick-arrow:before {
  font-family: ETmodules;
  color: #000;
  background: transparent;
  opacity: 1;
  font-size: 46px;
  vertical-align: middle;
  color: #7a69e6;
  text-align: center;
}
.trabolda-3-col-feature-blurb-slider .slick-arrow:hover:before { opacity: 0.8; }
.trabolda-3-col-feature-blurb-slider .slick-prev:before { content: '\34'; }
.trabolda-3-col-feature-blurb-slider .slick-next:before { content: '\35'; } 
.entry-content ul.slick-dots {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background-color: #B7B7B7;
  border-radius: 10px;
}
.slick-dots li.slick-active button { background-color: #f7828e; }
@media(max-width: 980px) {
  .trabolda-3-col-feature-blurb-slider .slick-prev { left: -32px; }
  .trabolda-3-col-feature-blurb-slider .slick-next { right: -30px; }
}
@media(max-width: 499px) {
  .trabolda-3-col-feature-blurb-slider .slick-prev { left: -26px; }
  .trabolda-3-col-feature-blurb-slider .slick-next { right: -24px; }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script>
jQuery(document).ready(function() {
  jQuery('.trabolda-3-col-feature-blurb-slider').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 980,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  }); 
});
</script>

Es sollte ungefähr wie im Bild unten aussehen (wenn Sie bis hierhin genau alles mitgemacht haben).

Keine Sorge, ich weiß, dass es bis jetzt nicht schön aussieht.

Wir werden einige Anpassungen an den Modulen vornehmen, um den Abstand und die Schatten zu korrigieren.

Nun lassen Sie uns einige Anpassungen vornehmen, damit es hübscher aussieht.

Wenn Sie Ihre eigenen Karussell-Elemente erstellen (und nicht genau mitmachen), können Ihre Anpassungen abweichen.

Die folgenden Anpassungen können Ihnen jedoch helfen, herauszufinden, was Sie ändern müssen, um dem gewünschten Ergebnis näherzukommen.

In den Spaltendesign-Einstellungen im Divi Builder:

– Stellen Sie die Breite auf 90%
– Stellen Sie die maximale Breite auf 1220px

In den Blurb/Modul-Design-Einstellungen:

– Stellen Sie die Inhaltsbreite auf 100%
– Stellen Sie den oberen/unten Rand auf 50px
– Stellen Sie den linken/rechten Rand auf 25px
– Reduzieren Sie die Weichzeichnungsstärke des Schattens auf 20px und verringern Sie die Deckkraft der Schattenfarbe auf 0,10

Denken Sie daran, die Moduleinstellungen auf ALLE Module innerhalb Ihrer Spalte zu duplizieren!

Fertig! Es sollte wie das unten stehende Bild oder das Live-Karussell oben in diesem Beitrag aussehen (wenn Sie genau mitgemacht haben).

Fazit

Mit diesem Tutorial können Sie kostenlos ein Divi-Karussell erstellen, ohne ein Plugin zu verwenden.

Durch das Hinzufügen spezifischer CSS-Klassen und das Einfügen von CSS/JS-Code in ein Code-Modul bleibt das Karussell leichtgewichtig und leistungsfähig.

Passen Sie die Design-Einstellungen entsprechend an, um das Karussell optisch ansprechend zu gestalten. Wenn Sie den Schritten folgen, erhalten Sie ein schönes, funktionales Karussell, das Ihre Website nicht verlangsamt. Viel Erfolg beim Erstellen Ihres Divi-Karussells!