So erstellen Sie mobile Walkthroughs mit dem Slider-Modul von Divi (kostenloser Download!)

Slider waren im Webdesign schon immer sehr beliebt. Einer ihrer größten Vorteile ist die Tatsache, dass Besucher sie auf mobilen Geräten durchblättern können. Heutzutage ist Wischen das neue Klicken, daher versteht es sich von selbst, dass das Einfügen von Schiebereglern dazu beitragen kann, die mobile Benutzererfahrung der Besucher auf Ihrer Website zu verbessern. Beim Erstellen einer Website mit Divi können Sie das Slider-Modul ganz einfach zu jeder Zeile oder jedem Abschnitt hinzufügen, an dem Sie arbeiten. Und mit ein wenig Kreativität und Experimentieren können Sie atemberaubende Webdesigns erzielen.

Sie können unter anderem mit dem Slider-Modul eine mobile exemplarische Vorgehensweise erstellen. Sie können so viele Folien hinzufügen, wie Sie möchten, und die exemplarische Vorgehensweise sieht auf Desktops und Tablets gleich gut aus, obwohl sie ursprünglich für mobile Geräte konzipiert wurde. In diesem Beitrag erstellen wir ein beeindruckendes Beispiel von Grund auf neu und bieten den Abschnitt am Ende zum Download an.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das wir auf verschiedenen Bildschirmgrößen nachbilden werden.

Statisch

GIF

Beginnen wir mit der Neuerstellung!

So erstellen Sie mobile Walkthroughs mit dem Slider-Modul von Divi

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Abstand

Beginnen wir mit dem Erstellen! Fügen Sie eine neue Seite hinzu oder öffnen Sie eine vorhandene und fügen Sie einen neuen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu, die den verschiedenen Bildschirmgrößen entsprechen.

• Obere Polsterung: 4vw (Desktop), 5vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 4vw (Desktop), 5vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 30vw (Desktop), 18vw (Tablet), 3vw (Telefon)
• Rechte Polsterung: 30vw (Desktop), 18vw (Tablet), 3vw (Telefon)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Hintergrund mit radialem Farbverlauf hinzu.

• Farbe 1: #f9f9f9
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 40%
• Endposition: 40%

Größe

Fahren Sie fort, indem Sie zu den Größeneinstellungen der Zeile gehen und den gesamten Abstand zwischen den Spalten entfernen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Wir fügen der Reihe auch eine untere Polsterung hinzu.

• Untere Polsterung: 30px

Grenze

Als nächstes fügen Sie '20px' zu jeder der Ecken in den Rahmeneinstellungen hinzu.

Box Schatten

Zu guter Letzt fügen Sie der Reihe einen subtilen Kastenschatten hinzu, um der Seite etwas Tiefe zu verleihen.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.07)

Slider-Modul hinzufügen

Hintergrundfarbe ändern

Nachdem Sie die Zeileneinstellungen geändert haben, können Sie ein Slider-Modul hinzufügen. Öffnen Sie die Einstellungen des Moduls und ändern Sie die Hintergrundfarbe. Alle Änderungen, die Sie auf der Registerkarte „Design“ vornehmen, werden automatisch auf alle Folien angewendet, die Sie später hinzufügen.

• Hintergrundfarbe: rgba(255,255,255,0)

Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textausrichtung: Mitte
• Schattenfarbe: rgba(0,0,0,0)

Textkörpereinstellungen

Ändern Sie als Nächstes die Textkörpereinstellungen.

• Körperschriftart: Standard (Open Sans)
• Textgröße: 0,6 vw (Desktop), 1,5 vw (Tablet), 2,4 vw (Telefon)
• Körperlinienhöhe: 2,2 em (Desktop), 2,3 em (Tablet), 2,4 em (Telefon)

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 2vw
• Untere Polsterung: 2vw

Schaltfläche Benutzerdefiniertes CSS

Wir müssen insbesondere auch der Schaltfläche des Slider-Moduls einige benutzerdefinierte Polster- und Randwerte hinzufügen. Da dieses Element auf jeder Folie mit verschiedenen Elementen kombiniert wird, müssen Sie den Abstand und den Rand manuell mithilfe von CSS-Code auf der Registerkarte „Erweitert“ hinzufügen.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Aktive Schieberegler entfernen

Nachdem Sie alle allgemeinen Folieneinstellungen geändert haben, können Sie die bereits vorhandenen aktiven Folien entfernen. Anstatt diese zu verwenden, werden wir im nächsten Teil des Beitrags eine von Grund auf neu erstellen. Dies wird uns helfen, alles schneller zu ändern und anzupassen.

Erste Folie anpassen

Inhalt im Inhaltsfeld anpassen

Fügen Sie dem Slider-Modul eine neue Folie hinzu und beginnen Sie mit der Anpassung des Inhalts im Inhaltsfeld. In den folgenden Druckbildschirmen werden Sie feststellen, dass wir das Bild zum Inhaltsfeld statt zu den Bildeinstellungen hinzufügen. Dadurch können wir das Bild über dem geschriebenen Inhalt platzieren. Sie finden die Illustrationen, die wir verwendet haben, indem Sie zum Beitrag Graphic Illustrator Layout Pack gehen und die Bilder am Ende herunterladen. Wir fügen auch einen H3-Titel in das Inhaltsfeld anstelle des Titelfelds ein und gestalten ihn so, dass er genau dort angezeigt wird, wo wir möchten.

Schaltflächenlink

Fahren Sie fort, indem Sie zu den Linkeinstellungen gehen und einen Link zur Schaltfläche hinzufügen, der die Besucher auf eine detailliertere Seite über die betreffende Folie umleitet.

Hintergrund mit Farbverlauf

Fügen Sie dann einen Verlaufshintergrund mit den folgenden Einstellungen hinzu:

• Farbe 1: #aaacff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 30%
• Endposition: 30%

Navigation

Ändern Sie als nächstes die Texteinstellungen.

• Pfeile benutzerdefinierte Farbe: #f4f4f4
• Punktnavigation benutzerdefinierte Farbe: #000000

Texteinstellungen

Und ändern Sie die Textfarbe in den Texteinstellungen der Folie.

• Textfarbe: Dunkel

Taste

Zu guter Letzt ändern Sie die Schaltfläche so, dass sie genau so aussieht, wie Sie es möchten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Hintergrundfarbe der Schaltfläche: #aaacff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 10px

Folie so oft wie nötig klonen

Nachdem Sie die erste Folie erstellt und angepasst haben, können Sie die Folie beliebig oft klonen. Sie müssen an jedem der Duplikate einige manuelle Änderungen vornehmen.

Inhalt im Inhaltsfeld ändern

Als erstes müssen Sie den Inhalt des Inhaltsfelds ändern. Dies schließt das verwendete Bild/die verwendete Illustration ein. Sie finden beide Illustrationen, die in diesem Tutorial verwendet wurden, indem Sie zum Beitrag Graphic Illustrator Layout Pack gehen und die Bilder am Ende herunterladen.

Link ändern

Ändern Sie auch den Button-Link.

Hintergrund mit Farbverlauf ändern

Sie können auch die Farbpalette jeder duplizierten Folie anpassen, indem Sie die erste Verlaufsfarbe ändern.

• Farbe 1: #ffccaa

Hintergrundfarbe der Schaltfläche ändern

Verwenden Sie dieselbe Farbe, um die Hintergrundfarbe der Schaltfläche zu ändern. Wiederholen Sie diese Schritte für jedes der Duplikate, die Sie erstellen, und Sie sind fertig!

• Hintergrundfarbe der Schaltfläche: #ffccaa

Laden Sie den Mobile Walkthrough Abschnitt KOSTENLOS herunter

Um den kostenlosen mobilen Walkthrough-Bereich in die Hände zu bekommen, müssen Sie ihn 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.

Laden Sie die Dateien herunter

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.

HERUNTERLADEN

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!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das wir auf verschiedenen Bildschirmgrößen nachbilden werden.

Statisch

GIF

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem Slider-Modul von Divi eine wunderschöne mobile Komplettlösung erstellen. Obwohl es ursprünglich für mobile Bildschirmgrößen entwickelt wurde, sieht es auf Tablets und Desktops gleichermaßen gut aus. Sie können diesen Ansatz verwenden, um alle Arten von Folienabschnitten auf Ihrer Website zu erstellen und nahtlos mit Ihren Besuchern zu interagieren. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, mit Divis Slider-Modul kreativ zu werden. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!