Wie können wir Ihnen helfen?

Einfügen von Slidern für Ausstellungen und Event-Ankündigungen auf Ihrer Website: Loop Carousels und Slides

In dieser Schritt-für-Schritt-Anleitung erklären wir Ihnen, wie Sie entweder unsere vorgefertigten Loop Carousels für die automatische Anzeige von aktuellen und zukünftigen Ausstellungen verwenden oder ein "Slides"-Widget in Vollbild und Nicht-Vollbild für individuelle von Ihnen eingefügte Inhalte (nicht automatisch), einfügen können.

In diesem Artikel

Die Darstellung von aktuellen und zukünftigen Ausstellungen oder Ankündigungen auf der Startseite Ihrer Website ist entscheidend, um Besucher*innen über bevorstehende Veranstaltungen oder andere Neuigkeiten zu informieren. In dieser Schritt-für-Schritt-Anleitung erklären wir Ihnen, wie Sie entweder unsere vorgefertigten Loop Carousels für die automatische Anzeige von aktuellen und zukünftigen Ausstellungen verwenden oder ein „Slides“-Widget in Vollbild und Nicht-Vollbild für individuelle von Ihnen eingefügte Inhalte (nicht automatisch), einfügen können.

Tipp: Bevor Sie mit der Bearbeitung starten, stellen Sie sicher, dass dieses Element nicht eventuell schon auf Ihrer Homepage vorhanden ist z.B. als Kopfzeilen-Slider – damit Sie es nicht zweimal einfügen.

Automatische Ankündigung von aktuellen und zukünftigen Ausstellungen mit Loop Carousels

  1. Einloggen in den WordPress Account: Melden Sie sich in Ihrem WordPress-Admin-Bereich an.
  2. Navigieren Sie zur Startseite: Öffnen Sie die Startseite Ihrer Homepage.
  3. Elementor öffnen: Gehen Sie mit dem Mauszeiger auf „Mit Elementor bearbeiten“ und es öffnet sich ein Menü – hier klicken Sie nun auf „Home page“. Jetzt kann die Bearbeitung Ihrer Startseite losgehen.

Homepage bearbeiten

4. Scrollen Sie runter, an das Seitenende und klicken Sie im Elementor-Editor auf „Add Templates Symbol“ im gestrichelten Block.

Startseite Add Template

5. Navigieren Sie zu „My Templates“ (1.) und fügen Sie eines der Container-Templates mit dem Präfix „Carousel“ (2.) über „Insert“ ein (3.). Entscheide Sie je nach größe und Beschnitt, welches der vier Elemente Sie einsetzen wollen.

Insert Webtemplate

6. In dem eingefügten Block finden Sie ein Loop Carousel. Wählen Sie über „Choose a template“ das gleiche Template wie zuvor für den Container aus (z.B., „Exhibitions Small“).

Connect Template

7. Unter „Query“ wählen Sie unter „Artbutler Options“ entweder „Event Current“ oder „Event Current + Upcoming“ und setzen „Order by“ auf „Event Start Date“.

Query Einstellungen

8. Nehmen Sie unter „Settings“, „Navigation“ und „Pagination“ die gewünschten Einstellungen bezüglich des Erscheinungsbildes und Verhaltens Ihres Carousl-Containers vor.

Webtemplate Settings

9. Schieben Sie nun das Container Widget nach oben, an den Anfang Ihrer Homepage, sofern das die gewünschte Stelle ist. Greifen Sie den Container dafür an dem mittleren Punkte-Symbol und ziehen Sie den Container an die gewünschte Position (s. die folgenden zwei Abb.).

Hinweis: Es könnte sein, dass das Layout Ihrer Seite kaputt geht wenn Sie das Loop Carousel bzw. den Container nicht ganz an den Anfang Ihrer Seite schieben. Sollte hier etwas kaputt gegangen sein, finden Sie hier eine Anleitung zum rückgängig machen.

Container greifen zum Verschieben
Container verschieben

10. Speichern und Veröffentlichen: Nachdem Sie die gewünschten Informationen eingefügt und angepasst haben, speichern Sie die Seite und veröffentlichen Sie sie. Fertig!

Slider in Vollbild / Nicht-Vollbild mit manuell konfigurierbaren Inhalten

Der Unterschied zwischen einem Vollbild- und einem Nicht-Vollbild-Slider in Elementor liegt in der Darstellungsgröße auf der Webseite. Bei einem Vollbild-Slider nimmt das Bild den gesamten sichtbaren Bildschirm ein und erzeugt so eine immersive visuelle Erfahrung. Im Gegensatz dazu wird ein Nicht-Vollbild-Slider in einem vordefinierten Bereich der Seite platziert, wodurch er in ein spezifisches Layout integriert werden kann. Die Wahl zwischen beiden hängt von den gestalterischen Präferenzen und den Anforderungen des Webdesigns ab, wobei jeder Stil eine einzigartige ästhetische Wirkung erzielen kann. Sehen Sie den optischen Vergleich, in den folgenden zwei Abbildungen:

Nicht-Vollbild Slider

So konfigurieren Sie Vollbild-Slider mit manuell Inhalten

  1. Einloggen in den WordPress Account: Melden Sie sich in Ihrem WordPress-Admin-Bereich an.
  2. Navigieren Sie zur Startseite: Öffnen Sie die Startseite Ihrer Homepage.
  3. Elementor öffnen: Gehen Sie mit dem Mauszeiger auf „Mit Elementor bearbeiten“ und es öffnet sich ein Menü – hier klicken Sie nun auf „Home page“. Jetzt kann die Bearbeitung Ihrer Startseite losgehen.

Homepage bearbeiten

4. Scrollen Sie an runter, an das Seitenende und klicken Sie im Elementor-Editor auf „Add Templates“ im gestrichelten Block.

Startseite Add Template

5. Navigieren Sie zu „My Templates“ (1.) und fügen Sie eines der Container-Templates mit dem Präfix „Carousel“ (2.) über „Insert“ ein (3.). Entscheide Sie je nach größe und Beschnitt, welches der vier Elemente Sie einsetzen wollen.

Insert Webtemplate

6. Jetzt fügen Sie ein „Slides“-Widget ein, indem Sie im Elementor-Editor auf die Kacheln rechts oben klicken, runter scrollen bis zum „Slides“-Widgets. Ziehen Sie „Slides“ nun in den Carousel-Container im rechten Bildbereich.

Insert Slides in Carousel Container

7. Konfigurieren Sie unter den Content-Einstellungen die Höhe auf 100.

Slideshöhe einstellen

8. Konfigurieren Sie das „Slides“-Widget, wie in https://elementor.com/help/slides-widget-pro/ beschrieben. Speichern, fertig!

So konfigurieren Sie Nicht-Vollbild-Slider mit manuell Inhalten

Die Schritte 1.- 3. sind identisch, wie im oberen Beispile beschrieben.

4. Für einen nicht Fullscreen-Slider fügen Sie nun direkt das „Slides“-Widget, an der gewünschten Stelle auf der Homepage ein.

normales Slider Widget auf Startseite einsetzen

5. Konfigurieren Sie das „Slides“-Widget, wie in https://elementor.com/help/slides-widget-pro/ beschrieben. Speichern, fertig!