Wie man einen Slider über die gesamte Breite in Elementor einfügt: Eine vollständige Anleitung mit Beispielen

Volle Breite Slider sind ein beliebtes Designelement, das die Aufmerksamkeit auf sich zieht und sich ideal für die Präsentation von Bildern, Werbeaktionen und wichtigen Botschaften eignet. Elementor ist es ganz einfach, einen Slider in voller Breite auf einer WordPress-Website zu erstellen. In dieser Anleitung finden Sie detaillierte Schritte und Beispiele für die Einrichtung und Anpassung eines Sliders über die gesamte Breite.

Schritt 1: Installieren und aktivieren Sie das Elementor Plugin

Wenn Elementor nicht installiert ist, folgen Sie diesen Schritten:

1. Loggen Sie sich in das WordPress-Dashboard ein.
2. Navigieren Sie zu Plugins > Neu hinzufügen Plugins.

3. Geben Sie in der Suchleiste ein Elementorund klicken Sie dann auf Installieren Sie.

4. Klicken Sie nach der Installation auf Aktivieren Sie.

Dieser Leitfaden verwendet Elementor Pro, die auch die Schieberegler Widget. Wenn Elementor Pro nicht verfügbar ist, kann ein Plugin eines Drittanbieters wie Unverzichtbare Addons für Elementor bietet auch eine Schiebereglerfunktion.

Schritt 2: Erstellen Sie eine neue Seite oder bearbeiten Sie eine vorhandene Seite

Um den Schieberegler hinzuzufügen, müssen Sie entweder eine neue Seite erstellen oder bearbeiten eine bestehende:

1. Gehen Sie zu Seiten > Neu hinzufügen Seite für eine neue Seite, oder wählen Sie eine bestehende Seite zur Bearbeitung aus.

2. Klicken Sie auf Mit Elementor bearbeiten um den Elementor-Editor zu öffnen.

Schritt 3: Fügen Sie das Schieberegler-Widget hinzu

Verwenden Sie in Elementor das Slider-Widget:

1. Klicken Sie auf die Neuen Container hinzufügen Taste und wählen Sie eine einspaltiges Layout.

2. Suchen Sie in der linken Leiste nach dem Schieberegler Widget und ziehen Sie es in den Bereich.

Schritt 4: Konfigurieren Sie die Slider-Einstellungen

Passen Sie den Inhalt des Sliders an:

1. Folieninhalt hinzufügen: Klicken Sie auf jede Folie, laden Sie Bilder hoch und fügen Sie eine Titel, Beschreibung, und eine Aufruf zum Handeln Taste.

2. Beispiel: Ein Reiseblog könnte beliebte Reiseziele mit einem "Mehr erfahren" oder "Erkunden SieSchaltfläche ".

3. Hintergrundbilder einstellen: Verwenden Sie hochauflösende Bilder (mindestens 1920 Pixel breit), um die Übersichtlichkeit zu wahren.
   • Beste Praxis: Optimieren Sie Bilder zwischen 100KB und 300KB für schnelleres Laden.
4. Schaltfläche Links: Verknüpfen Sie die Schaltflächen der einzelnen Folien mit den entsprechenden Seiten, z. B. mit Produktseiten oder Blogbeiträgen.

Schritt 5: Legen Sie das Layout in voller Breite fest

Um den Schieberegler in voller Breite anzuzeigen:

1. Wählen Sie den Bereich mit dem Schieberegler-Widget und klicken Sie auf Container bearbeiten.

2. In der Layout Registerkarte, setzen Inhalt Breite zu Volle Breite.

3. Setzen Sie Lücke in der Spalte zu Keine Lücke damit der Schieberegler die gesamte Bildschirmbreite abdeckt.

4. Gehen Sie zum Fortgeschrittene und setzen Sie Marge und Polsterung auf Null und stellen Sie sicher, dass der Schieberegler an den Bildschirmrändern ausgerichtet ist.

5. Ein Fotoportfolio könnte für Bilder im Querformat Schieberegler in voller Breite verwenden, die den gesamten Bildschirm ohne Ränder bedecken.

Schritt 6: Anpassen des Erscheinungsbildes des Sliders

So passen Sie den Stil des Schiebereglers an:

1. Höhe Einstellungen: In der Inhalt passen Sie die Höhe an das Design an. Optionen wie An den Bildschirm anpassen oder benutzerdefinierte Höheneinstellungen (z.B. 600px) sind verfügbar.

2. Hintergrund-Overlay: Fügen Sie auf der Registerkarte Stil ein halbtransparentes Hintergrund-Overlay hinzu, um die Lesbarkeit des Textes zu verbessern.
   • Verwenden Sie ein dunkles Overlay für helle Bilder oder ein helles Overlay für dunkle Bilder.

3. Typografie: Sie können Schriftarten, Stile und Farben an das Branding der Website anpassen. Mit Elementor können Sie die Typografie für Titel, Beschreibungen und Schaltflächen anpassen.

4. Animationseffekte: hinzufügen Eingangsanimationen oder Hover-Effekte im Fortgeschrittene Registerkarte für Interaktivität.

Schritt 7: Speichern und Vorschau

Nachdem Sie die Schiebereglereinstellungen abgeschlossen haben:

1. Klicken Sie auf veröffentlichen oder Update.
2. Verwenden Sie die Vorschau (Augensymbol), um zu sehen, wie der Schieberegler live aussehen wird.

Prüfen Sie, ob der Slider korrekt geladen und auf verschiedenen Geräten (Desktop, Tablet und Handy) gut angezeigt wird.

Fazit

Ein Slider über die gesamte Breite sorgt für visuellen Eindruck und hebt besondere Inhalte wie Werbeaktionen oder wichtige Nachrichten hervor. Elementor bietet eine Reihe von Anpassungsoptionen, mit denen Sie ganz einfach einen ansprechenden und ansprechenden Slider erstellen können.

Häufig gestellte Fragen

1. Warum wird der Schieberegler nicht in voller Breite angezeigt?

Prüfen Sie, ob die Abschnitt und Säule Layouts sind eingestellt auf Volle Breite und dass die Marge und Polsterung werden auf Null gesetzt.

2. Wie kann ich die Ladezeiten des Sliders beschleunigen?

Optimieren Sie Bilder, indem Sie sie in Formaten wie JPEG oder WebP speichern. Die Dateigröße sollte idealerweise zwischen 100 KB und 300 KB liegen.

3. Wie kann ich den Schieberegler interaktiver gestalten?

Verwendung von Eingangsanimationen und Hover-Effekte in Elementor's Fortgeschrittene können Sie eine dynamische Note hinzufügen.

Wenn Sie diese Schritte und Beispiele befolgen, können Sie einen Slider über die gesamte Breite erstellen, der das Layout der Website und die Benutzerfreundlichkeit verbessert.