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
If Elementor isn’t installed, follow these steps:
- Loggen Sie sich in das WordPress-Dashboard ein.
- Navigieren Sie zu Plugins > Neu hinzufügen Plugins.
- Geben Sie in der Suchleiste ein Elementorund klicken Sie dann auf Installieren Sie.
- Klicken Sie nach der Installation auf Aktivieren Sie.
Dieser Leitfaden verwendet Elementor Pro, die auch die Schieberegler widget. If Elementor Pro isn’t available, a third-party plugin like 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:
- Gehen Sie zu Seiten > Neu hinzufügen Seite für eine neue Seite, oder wählen Sie eine bestehende Seite zur Bearbeitung aus.
- 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:
- Klicken Sie auf die Neuen Container hinzufügen Taste und wählen Sie eine einspaltiges Layout.
- 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:
- 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.
- Beispiel: A travel blog could showcase popular destinations with a “Mehr erfahren" oder "Erkunden Sie” button.
- 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.
- Schaltfläche Links: Link each slide’s button to relevant pages, such as product pages or blog posts.
Schritt 5: Legen Sie das Layout in voller Breite fest
Um den Schieberegler in voller Breite anzuzeigen:
- Wählen Sie den Bereich mit dem Schieberegler-Widget und klicken Sie auf Container bearbeiten.
- In der Layout Registerkarte, setzen Inhalt Breite zu Volle Breite.
- Setzen Sie Lücke in der Spalte zu Keine Lücke damit der Schieberegler die gesamte Bildschirmbreite abdeckt.
- 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.
- Ein Fotoportfolio könnte für Bilder im Querformat Schieberegler in voller Breite verwenden, die den gesamten Bildschirm ohne Ränder bedecken.
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- 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.
- 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.
- Typografie: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- 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:
- Klicken Sie auf veröffentlichen oder Update.
- 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. Why isn’t the slider displaying in full width?
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.