Möchten Sie einen Vollbild-Slider mit erstellen Divi ?
Ein Vollbild-Slider kann sehr gut als Kopfzeile Ihrer Homepage funktionieren. Website.
Der Vollbildaspekt behält das System systematisch bei Inhalt wichtig oberhalb der Falte. Und die Slider-Funktionalität ermöglicht es Benutzern, zu sehen Inhalt zusätzlich, ohne die Seite scrollen zu müssen.
Erstellen Sie einen Vollbild-Slider mit Divi ist überraschend einfach zu machen. Der Schlüssel besteht darin, Ihrem Schieberegler eine Höhe relativ zur Höhe des Browsers zu geben und dann alle zusätzlichen Rand- und Breitenbeschränkungen für die übergeordnete Zeile oder den übergeordneten Abschnitt zu beseitigen.
In nur wenigen Minuten können Sie einen Vollbild-Schieberegler erstellen, der beim Laden der Seite den gesamten Bildschirm ausfüllt und auf allen Geräten gut aussieht.
Lassen Sie uns beginnen.
Übersicht
Hier ist eine kurze Übersicht über den Schieberegler, den wir in diesem Tutorial erstellen werden.
Erstellen Sie eine neue Seite mit Divi Builder
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen
Geben Sie einen für Sie relevanten Titel ein und klicken Sie auf 'Verwenden Sie die Divi Baumeister'
Klicken Sie abschließend auf 'Baubeginn'
Danach haben Sie eine leere Seite, um mit dem Entwerfen in Divi zu beginnen.
Erstellen Sie einen Vollbild-Slider in Divi
Schnitt- und Linienkonfiguration
Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.
Abschnitt Rand
Bevor Sie ein Modul hinzufügen, öffnen Sie die Abschnittseinstellungen und gehen Sie zur Registerkarte Design, ziehen Sie die Option herunter Abstand und ändern Sie die Einstellungen wie folgt:
- Polsterung (oben und unten): 0px
Leitungseinstellungen
Öffnen Sie als Nächstes die Leitungseinstellungen und aktualisieren Sie Folgendes auf der Registerkarte Design :
- Breite: 100 %
- Maximale Breite: 100 %
- Polsterung (oben und unten): 0px
Mit all diesen Einstellungen können wir nun mit der Erstellung des eigentlichen Sliders fortfahren.
Erstellung des Vollbild-Sliders
Um den Vollbild-Slider zu erstellen, fügen Sie der Zeile ein neues Slider-Modul hinzu.
Fügen Sie jeder Folie Bilder hinzu
Öffnen Sie vor dem Aktualisieren der allgemeinen Folieneinstellungen die Standardeinstellungen für die erste Folie
Fügen Sie der Folie ein Bild und ein Hintergrundbild hinzu. In diesem Beispiel verwenden wir dasselbe Bild für das Folienbild und das Hintergrundbild (ca. 1920 x 1500 Pixel).
Öffnen Sie dann die Einstellungen für die zweite Folie
Fügen Sie der Folie ein anderes Bild und Hintergrundbild als das vorherige hinzu.
Beachten Sie, dass Sie beliebig viele Folien hinzufügen können.
Schiebereglereinstellungen aktualisieren
Jetzt, da jede einzelne Folie ein einzigartiges Bild und Hintergrundbild hat, sind wir bereit, die Schiebereglereinstellungen im Allgemeinen zu aktualisieren.
Gehen Sie zurück zu den Slider-Einstellungen und aktualisieren Sie Folgendes unter der Registerkarte Design :
Auflage
- Hintergrundüberlagerung verwenden: JA
- Farbe der Hintergrundüberlagerung: rgba(27,18,38,0.74)
Box Schatten
- Box Shadow Style: Siehe Capture (1)
- Box Shadow (horizontal und vertikal) Position: -8vw
- Box Shadow Spread-Stärke: -6,5 vw
- Schattenfarbe: #cf1259
Titeltext
Titeleinstellungen bearbeiten
- Titelschrift: Montserrat
- Schriftstärke des Titels: Ultra Bold
- Textgröße: 5vw (Desktop), 40px (Tablet und Telefon)
Hauptteil
Bearbeiten Sie die Einstellungen für den Beschreibungstext wie folgt:
- Körperschriftstärke: Semi Bold
- Körpertextgröße: 16px
- Zeilenhöhe: 1.8 cm
Schaltflächenstile
- Benutzerdefinierte Stile für Schaltfläche verwenden: JA
- Schaltflächentextgröße: 16px
- Hintergrund: #cf1259
- Randbreite: 0px
- Randradius: 0px
- Schriftdicke: fett
- Schriftstil: TT
- Polsterung (oben und unten): 15px
- Polsterung (links und rechts): 30px
Slider-Höhe und Inhaltsbreite
- Maximale Inhaltsbreite: 90 %
- Mindesthöhe: 100 vh
Wenn Sie dem Schieberegler eine Mindesthöhe von 100 vh zuweisen, wird sichergestellt, dass der Schieberegler die volle Höhe des Browserfensters umfasst. Dies ist der Schlüssel zum Erstellen eines Vollbild-Sliders.
Der Slider erstreckt sich bereits über die volle Breite des Browserfensters, da die Linienbreite 100% beträgt.
Schieberegler-Pfeile
Aktualisieren Sie auf der Registerkarte „Erweitert“ die Größe und Position der Schieberegler-Pfeile, indem Sie das folgende benutzerdefinierte CSS zum CSS-Bereich hinzufügen Schiebepfeile :
font-size: 8vw !important;
margin-top: -4vw;
Dadurch werden die Slider-Pfeile auf großen Bildschirmen vergrößert und auf Mobilgeräten auf eine kleinere Größe verkleinert.
Subtrahieren Sie die Header-Höhe von der Slider-Höhe
Wenn Sie eine Kopfzeile auf der Seite haben, erstreckt sich der Vollbild-Schieberegler tatsächlich etwas unterhalb des Browserfensters.
Dies liegt daran, dass die Header-Höhe den Slider senkt, der derzeit eine Höhe von 100vh (100% der Fenster-/Browserhöhe) hat. Um zu verhindern, dass der Slider unter den Browser-Viewport geschoben wird, können Sie eine CSS-Funktion hinzufügen calc () um die Höhe der Kopfzeile von der Höhe des Schiebereglers zu subtrahieren.
Sie müssen die Höhe der Kopfzeile (Desktop und Mobil) kennen, damit dies funktioniert. Wenn Sie den Standard-Divi-Header verwenden, beträgt die Header-Höhe 80 Pixel. Die Höhe des Sliders muss also 100vh – 80px betragen.
Um die benutzerdefinierte Höhe hinzuzufügen, öffnen Sie die Slider-Einstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Slider-Hauptelement und auch für jede Folie hinzu:
min-height: calc(100vh - 80px)!important;
Endergebnis
Hier ist das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Und so sieht das Design auf Tablet und Handy aus.
Zusammenfassung
Die wichtigsten Schritte zum Erstellen eines Vollbild-Schiebereglers in Divi bestehen darin, den Abschnitt und die Zeile so zu konfigurieren, dass sie die gesamte Breite des Browsers umfassen, und dem Schieberegler dann eine Mindesthöhe von 100 vh zu geben.
Wenn Sie einen Header verwenden, können Sie ein benutzerdefiniertes CSS-Snippet hinzufügen, das die Höhe des Headers subtrahiert, um sicherzustellen, dass der Vollbild-Schieberegler nicht über den unteren Rand des Browsers hinausragt.
Mit diesen wichtigen Schritten können Sie den Schieberegler (und die Folien) weiter anpassen, wie Sie möchten, indem Sie alle leistungsstarken Funktionen von Divi Builder verwenden.
Verwenden Sie es, um schöne und effektive Schieberegler zu erstellen, die jeden Bildschirm auf jedem Gerät ausfüllen.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
