So fügen Sie dem Slider-Modul von Divi vertikale Slider-Elemente für ein einzigartiges Header-Design hinzu
Veröffentlicht: 2019-06-28Das Slider-Modul von Divi ist vollgepackt mit Designoptionen, die es einfach machen, über den Tellerrand hinaus zu denken und atemberaubende Slider-Designs zu erstellen. Heute werden wir also einige Dinge (buchstäblich) umdrehen. Im folgenden Beitrag werden wir dem Slider-Modul von Divi vertikale Slider-Elemente hinzufügen. Mit einem Schieberegler mit vertikalen Elementen (wie Titeltext und Foliensteuerelementen) können Besucher mehr Folieninhalte und Hintergrundbilder in schmaleren Spalten sehen (insbesondere auf Mobilgeräten). Und die vertikalen Elemente verleihen dem Gesamtdesign eine erfrischende Note.
Dazu verwenden wir Divis Transformationsdrehoption, um den gesamten Schieberegler zu drehen und dann andere Elemente innerhalb jeder Folie nach Bedarf gegenzudrehen, um ein modernes vertikales Schieberegler-Design zu erstellen. Wir beginnen mit der grundlegenden Technik. Dann erstellen wir mit diesem vertikalen Schieberegler ein völlig einzigartiges Header-Design.
Tauchen wir ein!
Vorgeschmack
Laden Sie das Divi Vertical Slider Elements Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
https://youtu.be/Nmuy9VAYo4M
Abonnieren Sie unseren Youtube-Kanal
Was Sie brauchen, um loszulegen
Um zu beginnen, benötigen Sie Folgendes:
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
- Zwei Bilder, die um 90 Grad gegen den Uhrzeigersinn gedreht wurden. Dies kann ganz einfach über die integrierten Optionen Ihres Betriebssystems oder über eine einfache Fotobearbeitungsanwendung erfolgen. Sie können ein Bild auch direkt in WordPress drehen, indem Sie das Medienelement bearbeiten.
Danach können Sie Ihr Meisterwerk in Divi erstellen.
Die Grundidee
Die Grundidee hinter dem Hinzufügen von vertikalen Slider-Elementen besteht darin, die Transformationsoptionen von Divi zu verwenden, um das Slider-Modul um 90 Grad (im oder gegen den Uhrzeigersinn) zu drehen, damit es vertikal auf der Seite angezeigt wird. Für die Hintergrundbilder des Schiebereglers (oder der Folie) solltest du das Bild vorher drehen (oder den WordPress-Bildeditor verwenden), damit das Bild immer aufrecht angezeigt wird, wenn du den Schieberegler drehst. Dadurch werden die Schieberegler, Pfeile und der Text wie erwartet vertikal angezeigt. Der schwierige Teil besteht darin, die Höhe und Breite des Schiebereglers anzupassen, da die Dinge buchstäblich umgedreht werden. Dieses Slider-Design funktioniert am besten in einem Layout mit zwei oder mehr Spalten.
Hier ist ein kurzes Beispiel dafür.
Fügen Sie in einem regulären Abschnitt mit einer zweispaltigen Zeile ein Schiebereglermodul zur linken Spalte hinzu.
Fügen Sie dann ein paar Folien mit jeweils einem Titel, einem Satz des Hauptinhalts und einem Hintergrundbild hinzu, das zuvor um 90 Grad gegen den Uhrzeigersinn gedreht wurde.
Drehen Sie dann das Schiebemodul um 90 Grad entlang der Z-Achse mit den Transformationsoptionen von Divi.
Fügen Sie dann dem Schieberegler einen Abstand (unterer Abstand) hinzu, um zusätzliche Breite zu erzielen und den Text rechts von jeder Folie auszurichten.
Hier ist das Ergebnis.
Wie Sie sehen, ist das Konzept einfach, aber diese vertikalen Schieberegler können sich wirklich als nützlich erweisen, um einzigartige Designs zu erstellen.
Im Folgenden werden wir gemeinsam eines dieser einzigartigen Slider-Designs erstellen.
Hinzufügen von vertikalen Slider-Elementen zum Slider-Modul von Divi für ein einzigartiges Header-Design
Abschnitt und Zeile erstellen
Abschnitt Hintergrund
Beginnen Sie damit, einen regulären Abschnitt mit einer zweispaltigen Zeile zu erstellen.
Bevor Sie der Zeile ein Modul hinzufügen, aktualisieren Sie zuerst den Abschnitt mit der folgenden Hintergrundfarbe:
Hintergrundfarbe: #24272a
Zeileneinstellungen
Dann müssen wir unserer Reihe eine benutzerdefinierte Bundstegbreite von 1 zuweisen und dann die Breite mit der vw-Längeneinheit festlegen. Die Verwendung der Längeneinheit vw ist wichtig, damit unser vertikaler Schieberegler später reaktionsfähig wird.
Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Dachrinnenbreite: 1
Breite: 80vw (Desktop und Tablet), 95vw (Telefon)
Max. Breite: 80vw (Desktop und Tablet), 95vw (Telefon)
Dann fügen wir zu Designzwecken einen Boxschatten hinzu.
Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: -10px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: rgba(255,255,255,0.03)
Überschrifteninhalt mit einem Textmodul hinzufügen
Wir werden schließlich den Schieberegler in Spalte 2 hinzufügen, aber jetzt fügen wir den Kopfzeilentitel mit etwas zusätzlichem Text in Spalte 1 hinzu. Dazu fügen wir zwei Textmodule in Spalte 1 hinzu.
Fügen Sie das Textmodul für den Titel hinzu
Um unseren Kopfzeilentitel hinzuzufügen, fügen Sie ein Textmodul zu Spalte 1 hinzu.
Aktualisieren Sie den Hauptteilinhalt mit der folgenden h2-Überschrift:
<h2>My Work</h2>
Aktualisieren Sie dann Folgendes:
Überschrift 2 Schriftart: Karla
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 5vw (Desktop), 60px (Tablet), 50px (Telefon)
Polsterung: 15 % oben, 20 % unten, 5 % links, 5 % rechts
Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 60px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: #9a2508
Textmodul für Hauptinhalt hinzufügen
Als nächstes fügen Sie unter dem ersten Textbaustein in Spalte 1 einen neuen Textbaustein hinzu. Wir können den Standardinhalt vorerst belassen.
Aktualisieren Sie dann Folgendes:
Text Textfarbe: #cccccc
Breite: 70%
Modulausrichtung: rechts
Marge: -5% oben
Polsterung: 5 % unten, 10 % links, 5 % rechts
Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Vertikale Position des Kastenschattens: 10px
Schattenfarbe: rgba(255,255,255,0.03)
Erstellen des vertikalen Schiebereglers
Jetzt können wir den Slider mit den vertikalen Slider-Elementen erstellen.
Fügen Sie dazu in Spalte 2 ein Slider-Modul hinzu.
Öffnen Sie die Folieneinstellungen der ersten der beiden Standardfolien.
Reduzieren Sie den Standardtextkörper, um eine einzelne Textzeile einzuschließen. Fügen Sie dann ein Hintergrundbild hinzu, das zuvor um 90 Grad gegen den Uhrzeigersinn gedreht wurde.
Machen Sie dann dasselbe für die zweite Standardfolie und geben Sie ihr ein anderes Hintergrundbild.
Drehen Sie den Schieberegler
Drehen Sie als Nächstes den Schieberegler mit der Option zum Drehen der Transformation:
Transformieren Z-Achse drehen: 90deg
Schieberhöhe
Um die Breite des Schiebereglers müssen wir uns keine Gedanken machen, da er automatisch 100 % der Spalte umfasst. Die Spalte beträgt 50% von 80vw (der Zeilenbreite), daher beträgt die Breite standardmäßig 40vw. Jetzt müssen wir dem Schieberegler eine passende Höhe von 40vw auf dem Desktop zuweisen und dann die Höhe auf 80vw auf dem Tablet und 95vw auf dem Telefon anpassen.
Aktualisieren Sie Folgendes:
Höhe: 40vw (Desktop), 80vw (Tablet), 95vw (Telefon)
Passen Sie dann den Abstand an, um den Text rechts vom vertikalen Schieberegler auszurichten.
Padding (Desktop): 0px oben, 21vw unten, 0px links, 0px rechts
Polsterung (Tablet): 42vw unten
Polsterung (Telefon): 50vw unten
Texteinstellungen aktualisieren
Passen Sie Titel und Text wie folgt an:
Textausrichtung: links
Titelschriftart: Karla
Titeltextgröße: 32px
Höhe der Titelzeile: 1,3 em
Abstand des Hauptbuchstabens: 3px
Körperlinienhöhe: 1.8em
Den Button gestalten
Um die Schaltfläche zu stylen und zu positionieren, aktualisieren Sie Folgendes:
Schaltflächentextgröße: 16px
Schaltflächenhintergrundfarbe: #9a2508
Breite des Tastenrahmens: 0px
Tastenabstand der Buchstaben: 2px
Tastenschriftstärke: halbfett
Schaltflächensymbol: Pluszeichen (siehe Screenshot)
Tastenausrichtung: rechts
Button-Marge: 10 % oben, 10 % unten
Hintergrundverlauf
Um einen Hintergrund für unseren vertikalen Slider-Titeltext zu erstellen, können wir dem Slider wie folgt einen Hintergrundverlauf hinzufügen:
Hintergrundfarbverlauf links: #9a2508
Hintergrundfarbe rechts: rgba(0,0,0,0)
Startposition: 12%
Endposition: 0%
Farbverlauf über dem Hintergrundbild platzieren: JA
Hinweis: Wenn Sie möchten, können Sie die Deckkraft der rechten Farbe des Hintergrundverlaufs anpassen, um eine Überlagerung für Ihre Folienbilder zu erstellen.
Drehen der Schaltflächen- und Schieberpfeile mit benutzerdefiniertem CSS
Da unsere Schaltfläche immer noch vertikal ist, müssen wir sie mit einem CSS-Schnipsel an ihre vorherige Position zurückdrehen. Fügen Sie der Folienschaltfläche das folgende CSS hinzu:
transform: rotate(-90deg);
Für die Schieberpfeile können Sie denselben CSS-Schnipsel hinzufügen, sodass sie nach rechts und links statt nach oben und unten zeigen. Und während wir dort sind, können wir auch die Größe der Pfeile erhöhen. Fügen Sie das folgende CSS zu dem hinzu
transform: rotate(-90deg); font-size: 80px;
Das ist es!
Schauen wir uns das Endergebnis an.
Endergebnis
Und hier ist es auf Tablet und Handy.
Fühlen Sie sich frei, neue Designs zu entdecken, indem Sie die vertikalen Elemente optimieren. Hier ist ein Beispiel für das gleiche Design mit links positionierter Schaltfläche und einem Text-Overlay.
Abschließende Gedanken
Das Slider-Modul von Divi zu drehen ist eine schnelle und effektive Möglichkeit, Ihrem Slider vertikale Designelemente hinzuzufügen. Wirklich, die einzige Herausforderung besteht darin, die Größe und den Abstand so zu gestalten, dass sie schön und reaktionsschnell sind. Aber zum Glück hat Divi genug eingebaute Optionen, die es einfach machen, das Design so zu optimieren, dass es auf allen Geräten gut aussieht.
Dieses vertikale Slider-Design funktioniert neben einem Header auch in anderen Bereichen Ihrer Website hervorragend. Ich kann mir vorstellen, dass dies verwendet wird, um vorgestellte Produkte oder Testimonials in schmaleren Spaltenlayouts zu präsentieren.
Hoffentlich gibt Ihnen das ein wenig Inspiration für Ihr nächstes Projekt.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!