So erstellen Sie ein vertikales Bildkarussell auf WordPress mit Elementor

Muneeb WordPress-Tutorials Jan 21, 2022

Eine Diashow mit Fotos oder Informationen, die Zuschauer durch Drücken einer Schaltfläche auswählen können, die sie in der Diashow vorwärts oder rückwärts bewegt, wird als Bilderkarussell bezeichnet. Es hellt das allgemeine Erscheinungsbild Ihrer Website auf und hilft bei der Förderung wesentlicher Dienste.

Attraktive Fotos können neue Besucher auf Ihre Website locken, indem sie sofort ihre Aufmerksamkeit erregen. Dieses Tutorial zeigt Ihnen, wie Sie Elementor verwenden, um ein vertikales Bildkarussell in WordPress zu erstellen.

So erstellen Sie ein vertikales Elementor-Bildkarussell

Erstellen Sie zunächst ein passendes Bild für Ihr Elementor Vertical Smooth Carousel. Sie benötigen ein Bild, das bereits alle Ihre Fotos enthält. Mit Crello , einem Canva-ähnlichen Programm, können Sie eine erstellen, aber jede Bildbearbeitungssoftware sollte ausreichen.

Dies hat natürlich den Nachteil, dass es nicht dynamisch ist, und es kann unpraktisch sein, wenn nur einige der Fotos geändert werden müssen. Es bietet jedoch mehrere Vorteile. Es erzeugt ein reines CSS-Karussell ohne JS-Anforderungen. Die Animation ist sehr flüssig, mit sehr geringer CPU-Auslastung. Kurz gesagt, es ist unglaublich effektiv, wenn auch etwas unbequem.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Geben Sie Ihrer Spalte dann die vertikale Namensspalte als Klasse.
Stellen Sie den Widgets-Abstand für diese Spalte in den Spalten- und Layouteinstellungen auf 0 ein.

Add an image element to that column and choose the picture you made. Fügen Sie dieser Spalte ein Bildelement hinzu und wählen Sie das von Ihnen erstellte Bild aus. Assign the class carousel vertical to the picture element . Weisen Sie dem Bildelement das Klassenkarussell vertikal zu.

Machen Sie alles genau so, wie Sie es wollen, und replizieren Sie es dann. In dieser Spalte benötigen Sie zwei davon mit jeweils identischen Parametern. Und dann können Sie mit dem unten angegebenen CSS-Code fortfahren. Sie können diesen Code überall verwenden, um die Änderungen vorzunehmen.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Es gibt umfangreiche Kommentare zum Code, damit Sie genug verstehen und die Änderungen vornehmen können, wo immer Sie möchten. Mit diesem Code können Sie erfolgreich ein vertikales Elementor -Karussell erstellen.

Die 5 besten Bildkarussell-Plugins

1. Postkarussell für Elementor

Post Carousel For Elementor von iThemelandCo ist ein Elementor-Addon-Plugin, mit dem Sie mit seinen vorgefertigten Karussell-Layouts erstaunlich kreative Medienkarusselle erstellen können. Das Plugin lässt sich perfekt in Elementor integrieren und bietet 19 vorgefertigte Layouts. Diese Layouts sind vollständig anpassbar und können mithilfe des Drag-and-Drop-Mechanismus von Elementor ganz einfach an Ihre Bedürfnisse angepasst werden.

Produktkarussell für Elementor

Product Carousel For Elementor ist ein weiteres Elementor-Addon-Plugin, das speziell für E-Commerce-Shops entwickelt wurde, um ihre Produkte in einem Karussell zu präsentieren. Das Plugin bietet 12+-Karussellsteuerungen wie Autoplay, Slide to Scroll, Pause on Hover usw. Das Plugin ist auf allen Arten von Geräten sehr reaktionsschnell und Sie können so viele Karussells erstellen, wie Sie möchten. Darüber hinaus ist es ein 100% mehrsprachiges Plugin, was bedeutet, dass es auch dann funktioniert, wenn Ihre Website in eine andere Sprache übersetzt wird.

3. Schnelles Karussell für Elementor

Fast Carousel For Elementor ist ein Elementor-Addon-Plugin, das behauptet, schnell genug zu sein, um in einer Minute ein Karussell für Sie zu bauen. So beeindruckend es klingt, es bietet auch verschiedene Arten von Galerien sowie über zehn einzigartige Stile. Das Plugin ist mit mehr als fünf Karussellsteuerungen ausgestattet und bietet außerdem benutzerdefinierte Farboptionen für jedes Karussell. Für eine schnelle Lösung ist dies möglicherweise die beste Wahl für ein Bildkarussell.

Wir hoffen, Sie fanden dieses Tutorial hilfreich, um Ihre Website zu verbessern. Folgen Sie uns auf Facebook und Twitter , um weiterhin Tutorials zu erhalten, die Ihre WordPress-Reise unterhaltsam und einfach machen.

Divi WordPress Theme