So erstellen Sie eine vollständig horizontale Swipe-Seite mit Divi

Haben Sie jemals daran gedacht, eine vollständig horizontale Seite zu erstellen, die zum Navigieren Wischen und Ankerlinks verwendet? Nun, wenn Sie haben und nicht genau wussten, wie Sie es angehen sollen, ist dies der ideale Beitrag für Sie. Wir zeigen Ihnen, wie Sie mit Divi eine vollständig horizontale Wischseite erstellen. Diese Technik hilft Ihnen wirklich dabei, Ihre Website von anderen abzuheben und entspricht den Webdesign-Trends von 2019. Das Ergebnis, das wir erstellen, wird auf allen Bildschirmgrößen großartig aussehen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Sich nähern

• Wir erstellen die gesamte Seite mit nur einem Abschnitt
• Wir verwandeln diesen Abschnitt mit ein paar CSS-Codezeilen am Ende des Tutorials in ein horizontales Raster
• Das horizontale Raster platziert jede der Zeilen in einer horizontal platzierten Spalte
• Sie entscheiden, wie viele horizontale Spalten ein Abschnitt enthält
• In diesem Fall verwenden wir 4 verschiedene Spalten, die jeweils aus 2 Zeilen bestehen
• Sie können die Anzahl der erstellten horizontalen Spalten ändern und bestimmen, wie viele Zeilen jede der Abschnittsspalten enthält
• Wir verwenden auch Ankerlinks, um den Leuten zu helfen, durch die verschiedenen Abschnittsspalten zu navigieren
• Darüber hinaus fügen wir einen sanften Scroll- und einen Abschnitts-Scroll-Snap-Effekt hinzu, der die Navigation für Ihre Besucher erleichtert

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Auffüllungen für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 10.5vw (Desktop), 15vw (Tablet), 10vw (Telefon)
• Untere Polsterung: 3vw (Desktop & Tablet), 10vw (Telefon)

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

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

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und nehmen Sie einige Änderungen für alle verschiedenen Bildschirmgrößen vor.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 6vw (Tablet & Telefon)
• Rechte Polsterung: 6vw (Tablet & Telefon)
• Spalte 1 untere Polsterung: 15vw (Tablet & Telefon)
• Spalte 2 linke Polsterung: 4vw (Desktop), 0vw (Tablet & Telefon)

CSS-ID

Wir müssen der ersten Zeile jeder der von uns erstellten Abschnittsspalten eine CSS-ID zuweisen. Dies wird uns später in diesem Beitrag helfen, die Ankerpfeile zu erstellen.

• CSS-ID: swip-1

Benutzerdefinierte CSS

Wie im Abschnitt "Ansatz" dieses Beitrags erwähnt, wenden wir auch einen sanften Scroll- und Schnappeffekt auf den Mechanismus an. Dazu müssen wir der ersten Zeile jeder der von uns erstellten horizontalen Spalten eine einzelne Zeile CSS-Code hinzufügen.

scroll-snap-align: start;

Blurb-Modul zu Spalte 1 hinzufügen

Symbol auswählen

Wir können jetzt mit dem Hinzufügen von Modulen beginnen! Beginnen Sie mit einem Blurb-Modul in Spalte 1. Öffnen Sie die Moduleinstellungen und wählen Sie ein Pfeilsymbol nach links.

Symboleinstellungen

Gehen Sie dann zur Registerkarte Design und nehmen Sie einige Änderungen am Erscheinungsbild des Symbols vor.

• Symbolfarbe: rgba(255,255,255,0)
• Bild-/Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 5vw (Desktop), 13vw (Tablet), 21vw (Telefon)

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Obere Marge: 14vw (Desktop), -11vw (Tablet), -17vw (Telefon)
• Linker Rand: 60vw (Tablet & Telefon)

Sichtweite

Wir verstecken das Modul auch auf kleineren Bildschirmgrößen.

Textmodul zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein Textmodul in Spalte 2. Fügen Sie H2-Inhalte hinzu.

H2-Texteinstellungen

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

• Überschrift 2 Schriftart: Source Serif Pro
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textgröße: 3vw (Desktop), 7vw (Tablet & Telefon)

Größe

Ändern Sie als nächstes die Breite in den Größeneinstellungen.

• Breite: 77%

Abstand

Und fügen Sie für kleinere Bildschirmgrößen einen unteren Rand hinzu.

• Unterer Rand: 15vw (Tablet & Telefon)

Schaltflächenmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fahren Sie direkt unter dem hinzugefügten Textmodul fort und fügen Sie ein Schaltflächenmodul hinzu. Geben Sie eine Kopie ein.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 0,9 vw (Desktop), 2 vw (Tablet), 3,5 vw (Telefon)
• Schaltflächentextfarbe: #000000
• Breite des Tastenrahmens: 1px

• Farbe des Knopfrahmens: #000000
• Schaltflächenrandradius: 0px
• Knopfschrift: Mukta
• Schriftdicke: fett
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie als nächstes einen benutzerdefinierten Rand und eine Auffüllung hinzu.

• Obere Marge: 6vw (Desktop), 4vw (Tablet & Telefon)
• Obere Polsterung: 15px
• Untere Polsterung: 15px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Blurb-Modul zu Spalte 3 hinzufügen

Symbol auswählen

Das nächste und letzte Modul, das wir in dieser Zeile benötigen, ist ein weiteres Blurb-Modul in Spalte 3. Wählen Sie ein Symbol Ihrer Wahl.

Verknüpfung

Gehen Sie dann zu den Linkeinstellungen und fügen Sie einen Link hinzu, der Besucher zur zweiten horizontalen Spalte des Abschnitts führt.

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-2

Symboleinstellungen

Fahren Sie fort und ändern Sie auch die Symboleinstellungen.

• Symbolfarbe: #333333
• Platzierung des Bildsymbols: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 5vw (Desktop), 13vw (Tablet), 21vw (Telefon)

Abstand

Fahren Sie fort, indem Sie benutzerdefinierten oberen und linken Rand für verschiedene Bildschirmgrößen hinzufügen.

• Obere Marge: 14vw (Desktop), -11vw (Tablet), -17vw (Telefon)
• Linker Rand: 60vw (Tablet & Telefon)

Zeile 2 hinzufügen

Spaltenstruktur

Die zweite Zeile, die wir benötigen, verwendet die folgende Spaltenstruktur:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f7f7f7

Größe

Ändern Sie als nächstes die Größeneinstellungen.

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

Abstand

Zusammen mit den benutzerdefinierten Abstands- und Randwerten in den Abstandseinstellungen.

• Obere Marge: -3,5 vw (Desktop), -10 vw (Tablet), -17 vw (Telefon)
• Obere Polsterung: 8vw (Desktop), 15vw (Tablet), 20vw (Telefon)
• Untere Polsterung: 8vw (Desktop), 15vw (Tablet), 20vw (Telefon)
• Linke Polsterung: 24vw (Desktop), 5vw (Tablet & Telefon)
• Rechte Polsterung: 24vw (Desktop), 5vw (Tablet & Telefon)
• Spalte 1 Rechte Polsterung: 2vw (Desktop), 0vw (Tablet & Telefon)
• Spalte 2 linke Polsterung: 2vw (Desktop), 0vw (Tablet & Telefon)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort und fügen Sie der ersten Spalte ein Textmodul hinzu. Geben Sie eine Kopie Ihrer Wahl ein (einschließlich eines H3-Titels).

Texteinstellungen

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

• Textschriftart: Open Sans
• Textgröße: 0,65 vw (Desktop), 1,8 vw (Tablet), 2,7 vw (Telefon)
• Textzeilenhöhe: 1.8em

H3-Texteinstellungen

Zusammen mit den H3-Texteinstellungen.

• Überschrift 3 Schriftart: Mukta
• Überschrift 2 Schriftstärke: Fett
• Überschrift 3 Schriftstil: Großbuchstaben
• Überschrift 3 Textgröße: 0.8vw (Desktop), 3vw (Tablet), 4vw (Telefon)
• Überschrift 3 Zeilenhöhe: 1.8em

Abstand

Fügen Sie auch bei kleineren Bildschirmgrößen etwas unteren Rand hinzu.

• Unterer Rand: 5vw (Tablet & Telefon)

Textmodul klonen und in Spalte 2 platzieren

Nachdem Sie das Textmodul in Spalte 1 geändert haben, können Sie es klonen und das Duplikat in die zweite Spalte einfügen.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt ändern.

Zeile 1 dreimal klonen

Sobald Ihre beiden Zeilen fertig sind, können Sie die erste Zeile dreimal klonen.

Duplikat Nr. 1 ändern

Zeilen-CSS-ID ändern

Wir müssen die CSS-ID des ersten Duplikats ändern.

• CSS-ID: swip-2

Symbolfarbe des Blurb-Moduls (Spalte 1) ändern

Zusammen mit der Farbe des ersten Blurb-Moduls.

• Symbolfarbe: #333333

Ändern Sie die Links der beiden Blurb-Module

Damit die Ankerlinks funktionieren, müssen Sie den Link jedes einzelnen Pfeils entsprechend ändern:

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-1

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-3

Duplikat Nr. 2 ändern

Zeilen-CSS-ID ändern

Ändern Sie die CSS-ID des zweiten Duplikats.

• CSS-ID: swip-3

Symbolfarbe des Blurb-Moduls (Spalte 1) ändern

Zusammen mit der Symbolfarbe des ersten Blurb-Moduls.

• Symbolfarbe: #333333

Ändern Sie die Links der beiden Blurb-Module

Ändern Sie auch hier die Links jedes Blurb-Moduls entsprechend:

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-2

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-4

Duplikat Nr. 3 ändern

CSS-ID ändern

Ändern Sie auch die CSS-ID des Duplikats der dritten Zeile.

• CSS-ID: Wischen-4

Symbol des Blurb-Moduls (Spalte 2) ändern

Und wählen Sie in Spalte 3 ein anderes Symbol für das Blurb-Modul.

Link des Blurb-Moduls (Spalte 2) ändern

Stellen Sie sicher, dass der Besucher beim Klicken zur ersten Abschnittsspalte weitergeleitet wird, indem Sie die Modul-Link-URL entsprechend ändern:

• Modul-Link-URL: https://www.yourwebsite.com/page/#swipe-1

Zeile 2 dreimal klonen

Auf in die nächste Reihe. Klonen Sie auch diese Zeile dreimal.

Zeilenhintergrundfarbe von Duplikat Nr. 1 ändern

Ändern Sie die Hintergrundfarbe des ersten Duplikats.

• Hintergrundfarbe: #dcdced

Zeilenhintergrundfarbe des Duplikats Nr. 2 ändern

Das zweite Duplikat verwendet die folgende Hintergrundfarbe:

• Hintergrundfarbe: #ffeed1

Zeilenhintergrundfarbe von Duplikat Nr. 3 ändern

Ändern Sie auch die Hintergrundfarbe des Duplikats der dritten Zeile.

• Hintergrundfarbe: #d6ffe5

CSS-ID und CSS-Code zum Abschnitt hinzufügen

Jetzt, da wir alle Zeilen haben, die wir brauchen, können wir die Magie verwirklichen. Fügen Sie dem gesamten Abschnitt eine CSS-ID hinzu. Später in diesem Beitrag verwenden wir diese CSS-ID, um die Bildlaufleiste auszublenden.

• CSS-ID: Abschnitt-Bildlaufleiste

Gehen Sie dann zu den benutzerdefinierten CSS-Optionen und fügen Sie dem Hauptelement einige Zeilen CSS-Code hinzu.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Je mehr Abschnittsspalten Sie erstellen möchten, desto mehr Spalten müssen Sie im CSS-Code hinzufügen. Angenommen, Sie möchten zum Beispiel die gleiche Struktur haben, aber 7 statt 4 Wischbewegungen zulassen, müssen Sie die CSS-Codezeile der Rastervorlagenspalten entsprechend ändern:

grid-template-columns: repeat(7, 100%);

Beachten Sie jedoch, dass Sie mehr Zeilen hinzufügen müssen, wenn Sie die Spaltennummer erhöhen. Wenn also in diesem Fall zwei Zeilen pro Abschnittsspalte angezeigt werden sollen, benötigen Sie 14 Zeilen.

Bildlaufleiste ausblenden

Sie können die Bildlaufleiste auch ausblenden, indem Sie den Abschnitt CSS-ID verwenden und die folgenden Zeilen CSS-Code zu den Seiteneinstellungen hinzufügen:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

Bei der Gestaltung von Websites mit Divi ist es am einfachsten, nach unten zu bauen. Aber nur weil es am einfachsten ist, heißt das nicht, dass Sie auf diese Option beschränkt sind. Sie können auch eine vollständig horizontale Wischseite erstellen. In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit Divi ein atemberaubendes horizontales Wisch-Webdesign erzielen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!