Erstellen endloser horizontaler Swipe-Karten für Mobilgeräte mit Divi

Das Wischen durch Inhalte ist etwas, was fast jeder täglich tut. Es ist im Grunde zur zweiten Natur geworden, daher ist es selbstverständlich, dass das Hinzufügen zu Ihrer Website dazu beitragen kann, die allgemeine Benutzererfahrung zu verbessern. In diesem Beitrag zeigen wir Ihnen, wie Sie endlose horizontale Wischkarten erstellen können, die sich hauptsächlich auf Mobil- und Tablet-Geräte konzentrieren, bei denen es um Berührungen geht. Obwohl dies ein Mobile-First-Tutorial ist, funktioniert das Ergebnis auch auf dem Desktop hervorragend. Benutzer können die eingefügte Bildlaufleiste verwenden oder mit ihrem Touchpad nach links und rechts streichen.

Lasst uns anfangen!

Vorschau

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

Beispiel 1: Einspaltige Zeile

Desktop

Handy, Mobiltelefon

Beispiel 2: Zweispaltige Zeile + mehrere Module in 'Swipe Column'

Desktop

Handy, Mobiltelefon

Sich nähern

• Um diesen schönen Effekt zu erzielen, müssen wir mit nur wenigen CSS-Codezeilen eine ganze vertikale Spalte in einen horizontalen Wisch-/Scroll-Gittermechanismus umwandeln
• Wenn Sie für diesen Mechanismus eine vertikale Spalte verwenden (und in ein horizontales Raster verwandeln), können Sie so viele Wischkarten hinzufügen, wie Sie möchten
• Mit anderen Worten; Sie fügen Module nach unten hinzu und der Wisch- / Scroll-Mechanismus platziert den Saum in einer horizontalen Spalte
• Für das erste Beispiel verwenden wir eine einspaltige Zeile
• Dadurch nimmt der Wischmechanismus die gesamte Breite des Bildschirms ein
• Das zweite Beispiel hingegen verwandelt nur eine von zwei Spalten in einen Wisch-/Scroll-Mechanismus und belässt die andere Spalte in ihrem statischen Zustand
• Wir zeigen Ihnen auch, wie Sie mehrere Module zu einer 'Spalte' des Wisch-/Scroll-Mechanismus hinzufügen
• Sobald Sie den Ansatz verstanden haben, können Sie buchstäblich jede Art von Design erstellen, das Sie möchten, und es Teil des Wisch- / Scroll-Mechanismus sein, den Sie in den obigen GIFs sehen können
• Sie können alle flüssigen Hintergrundbilder finden, die wir verwenden werden, indem Sie auf den Beitrag "10 KOSTENLOSE Hintergrundbilder für flüssige Abschnitte für Divi herunterladen" gehen

Abonnieren Sie unseren Youtube-Kanal

Beispiel 1 neu erstellen

Neuen Abschnitt hinzufügen

Beginnen wir mit der Erstellung des ersten Beispiels! Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann eine Zeile mit einer Spalte hinzu. Wir werden diese gesamte Spalte in einen Wisch-/Scroll-Mechanismus verwandeln.

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und gehen Sie zu den Größeneinstellungen. Hier entfernen wir den gesamten Abstand zwischen Abschnitt, Zeile und Spalte. Mit anderen Worten, die Spalte nimmt die gesamte Breite des Bildschirms ein.

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

Spalten-CSS-Code

Wie bereits erwähnt, verwandeln wir die Spalte selbst in einen Wisch-/Scroll-Grid-Mechanismus. Dazu benötigen wir drei Zeilen benutzerdefinierten CSS-Code, den Sie unten finden. Fahren Sie fort und fügen Sie diese dem Spaltenhauptelement auf der Registerkarte "Erweitert" der Zeile hinzu.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

Die erste Zeile des CSS-Codes ermöglicht das Scrollen/Wischen. Die zweite Zeile verwandelt die Spalte in ein horizontales Raster. Und die dritte Zeile CSS-Code definiert das Raster. Wir sagen im Grunde, dass wir 6 Spalten haben wollen, die jeweils eine Breite von 70 % haben. Abhängig von der Anzahl der Wischkarten, die im Wisch-/Scroll-Mechanismus angezeigt werden sollen, müssen Sie die Werte ändern. Angenommen, Sie möchten beispielsweise, dass 10 verschiedene Swipe-Karten Teil des Mechanismus sein und die Breite jeder Spalte auf 90% erhöht werden sollen, müssen Sie stattdessen die folgende Zeile CSS-Code verwenden:

grid-template-columns: repeat(10, 90%);

CTA-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Nachdem Sie die Zeileneinstellungen geändert haben, fügen Sie der Spalte ein CTA-Modul hinzu. Fügen Sie Inhalte Ihrer Wahl hinzu.

Verknüpfung

Sie müssen auch eine Link-URL für die Schaltfläche hinzufügen, damit die Schaltfläche im Modul angezeigt wird.

Hintergrund mit Farbverlauf

Fahren Sie fort, indem Sie einen Hintergrund mit Farbverlauf hinzufügen.

• Farbe 1: #802bff
• Farbe 2: #001519

Hintergrundbild

Im Ansatzabschnitt dieses Beitrags haben wir erwähnt, dass wir die flüssigen Hintergrundbilder verwenden, die Sie in diesem Beitrag kostenlos herunterladen können. Nachdem Sie die flüssigen Hintergrundbilder heruntergeladen haben, suchen Sie nach der Bilddatei „ fluid-style-2.png “ und laden Sie sie auf die Registerkarte „Hintergrundbild“ hoch . Ändern Sie die Hintergrundbildeinstellungen entsprechend:

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Texteinstellungen

Wechseln Sie zur Registerkarte Design und stellen Sie sicher, dass die folgenden Texteinstellungen gelten:

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelschrift: Didact Gothic
• Schriftstärke des Titels: Fett
• Titeltextgröße: 1vw (Desktop), 2.5vw (Tablet), 4vw (Telefon)
• Höhe der Titelzeile: 1.9em

Textkörpereinstellungen

Zusammen mit den Textkörpereinstellungen.

• Körperschriftart: Open Sans
• Textgröße: 0.6vw (Desktop), 1.3vw (Tablet), 2.5vw (Telefon)
• Körperlinienhöhe: 2.6em (Desktop & Tablet), 2.1em (Telefon)

Tasteneinstellungen

Wir ändern auch das Aussehen der Schaltfläche in diesem Modul.

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

Größe

Es ist auch wichtig, die Breite des CTA-Moduls in den Größeneinstellungen leicht zu verringern. Dadurch wird sichergestellt, dass zwischen diesem Modul und dem nächsten Modul im Wisch-/Scroll-Mechanismus immer eine Lücke bleibt.

• Breite: 95%
• Modulausrichtung: Mitte

Abstand

Natürlich möchten wir, dass alles auf allen verschiedenen Bildschirmgrößen gut aussieht. Aus diesem Grund fügen wir in den Abstandseinstellungen verschiedene benutzerdefinierte Abstandswerte hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px
• Obere Polsterung: 12vw (Desktop), 5vw (Tablet), 14vw (Telefon)
• Untere Polsterung: 12vw (Desktop), 5vw (Tablet), 14vw (Telefon)
• Linke Polsterung: 20vw (Desktop), 3vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 20vw (Desktop), 3vw (Tablet), 8vw (Telefon)

Grenze

Zu guter Letzt fügen wir an jeder Ecke des Moduls '20px' hinzu.

CTA-Modul so oft klonen, wie Sie möchten

Sobald Sie mit der Anpassung des CTA-Moduls fertig sind, können Sie das Modul beliebig oft klonen.

Ändern Sie den Verlaufshintergrund und das Hintergrundbild von Duplikat 1

Ändern Sie den Farbverlaufshintergrund des ersten Duplikats.

• Farbe 1: #7a010d
• Farbe 2: #001519

Verwenden Sie stattdessen das Hintergrundbild „ fluid-style-9.png “.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Ändern Sie den Verlaufshintergrund und das Hintergrundbild von Duplicate 2

Ändern Sie als nächstes den Farbverlaufshintergrund des zweiten Duplikats.

• Farbe 1: #26ccff
• Farbe 2: #001519

Laden Sie die Bilddatei 'fluid-style-10a.png' als Hintergrundbild hoch.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Oben links
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Ändern Sie den Verlaufshintergrund und das Hintergrundbild von Duplicate 3

Ändern Sie den Farbverlaufshintergrund des dritten Duplikats.

• Farbe 1: #ff21b8
• Farbe 2: #001519

Laden Sie das Hintergrundbild „ fluid-style-6.png “ hoch .

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Ändern Sie den Verlaufshintergrund und das Hintergrundbild von Duplicate 4

Ändern Sie den Farbverlaufshintergrund des vierten Duplikats.

• Farbe 1: #4400aa
• Farbe 2: #001519

Verwenden Sie ' fluid-style-4.png ' als Hintergrundbild.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Ändern Sie den Verlaufshintergrund und das Hintergrundbild von Duplicate 5

Ändern Sie den Farbverlaufshintergrund des letzten Duplikats.

• Farbe 1: #ff2626
• Farbe 2: #001519

Verwenden Sie ' fluid-style-7.png ' als Hintergrundbild.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Oben rechts
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Spalten-CSS an die Anzahl der Module anpassen

Wir haben dies bereits erwähnt, aber stellen Sie noch einmal sicher, dass der CSS-Code mit der Anzahl der Module in Ihrer Spalte übereinstimmt.

Die Bildlaufleiste gestalten

CSS-Klasse zur Spalte hinzufügen

Sie können auch die Bildlaufleiste, die mit diesem Wisch-/Bildlaufrastermechanismus geliefert wird, gestalten. Fügen Sie Ihrer Spalte die folgende CSS-Klasse hinzu:

• Spalten-CSS-Klasse: swipe-scrollbar

Benutzerdefiniertes CSS zu den Seiteneinstellungen hinzufügen

Öffnen Sie dann die Seiteneinstellungen, gehen Sie zur Registerkarte Erweitert und fügen Sie den folgenden benutzerdefinierten CSS-Code hinzu:

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

Beispiel 2 neu erstellen

Vorherigen Abschnitt klonen

Auf zum nächsten Beispiel! Klonen Sie den Abschnitt, den Sie im vorherigen Teil dieses Beitrags erstellt haben.

CTA-Abstandseinstellungen ändern

Ändern Sie dann die Abstandseinstellungen des ersten CTA-Moduls.

• Oberer Rand: 50px
• Unterer Rand: 50px
• Obere Polsterung: 5vw (Desktop & Tablet), 14vw (Telefon)
• Untere Polsterung: 5vw (Desktop & Tablet), 14vw (Telefon)
• Linke Polsterung: 4vw (Desktop), 3vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 4vw (Desktop), 3vw (Tablet), 8vw (Telefon)

Abstandseinstellungen auf alle Module in Spalte erweitern

Erweitern Sie diese neuen Abstandseinstellungen, indem Sie mit der rechten Maustaste klicken und auf „Abstandsstile erweitern“ klicken.

• An: Alle Call-to-Aktionen
• Durchgehend: Diese Kolumne

Spaltenstruktur ändern

Fahren Sie fort, indem Sie die Spaltenstruktur der Zeile ändern.

Module in die zweite Spalte verschieben

Und platzieren Sie stattdessen jedes der Module in der zweiten Spalte.

CSS in die zweite Spalte verschieben und Werte ändern

Da wir die Module von einer Spalte in die andere verschoben haben, müssen wir auch für den CSS-Code dasselbe tun. Fügen Sie stattdessen die CSS-Klasse zu Spalte 2 hinzu.

• Spalte 2 CSS-Klasse: swipe-scrollbar

Platzieren Sie die CSS-Codezeilen in Spalte 2 Hauptelement. Wir ändern auch die Breite jeder Spalte in '80%'.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

Titeltextmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein neues Textmodul hinzufügen. Fügen Sie H2-Gehalt Ihrer Wahl hinzu.

Überschriftstexteinstellungen

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

• Überschrift 2 Schriftart: Didact Gothic
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 2.5vw (Desktop), 5vw (Tablet), 6vw (Telefon)

Abstand

Fügen Sie auch einen benutzerdefinierten oberen Rand hinzu.

• Oberer Rand: 100px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Ändern Sie als nächstes die Teilerfarbe.

• Farbe: #333333

Größe

Zusammen mit den Größeneinstellungen.

• Teilergewicht: 7px
• Höhe: 0px
• Breite: 10%
• Modulausrichtung: Mitte

Abstand

Vervollständigen Sie das Trennmodul, indem Sie einen benutzerdefinierten oberen Rand für verschiedene Bildschirmgrößen hinzufügen.

• Obere Marge: 1,8 vw (Desktop), 2,5 vw (Tablet), 4 vw (Telefon)

Fließtextmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in der ersten Spalte benötigen, ist ein Beschreibungstextmodul. Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Fahren Sie fort, indem Sie die Texteinstellungen im Design-Tab ändern.

• Textschriftart: Open Sans
• Textgröße: 0.7vw (Desktop), 1.6vw (Tablet), 2.3vw (Telefon)

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 43 % (Desktop), 68 % (Tablet), 70 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Und fügen Sie einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px

Wechseln Sie zur Drahtmodellansicht

Sobald Sie alle Module in Spalte 1 geändert haben, fahren Sie fort und wechseln Sie zur Drahtmodellansicht.

Textmodul oben in Spalte 2 hinzufügen

Hier fügen wir oben in der zweiten Spalte ein Textmodul hinzu. Der hinzugefügte CSS-Code hat uns geholfen, 6 verschiedene Spalten zu erstellen. Das heißt, wenn Sie möchten, dass in jeder dieser 6 Spalten zwei verschiedene Module erscheinen, müssen Sie insgesamt 12 Module haben. Die Modulplatzierung erfolgt horizontal, sodass die ersten 5 Module, die Sie in Spalte 2 haben, nebeneinander erscheinen. Dann wechselt der Mechanismus zu einer anderen Reihe und fügt die verbleibenden 6 Module hinzu.

Inhalt hinzufügen

Öffnen Sie das neue Textmodul, das Sie oben in der zweiten Spalte hinzugefügt haben, und fügen Sie einen beliebigen Inhalt hinzu.

Texteinstellungen

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

• Textschriftart: Didact Gothic
• Schriftstärke des Textes: Fett
• Textfarbe: #000000
• Textgröße: 1.1vw (Desktop), 3vw (Tablet), 3.5vw (Telefon)

Textmodul klonen 5x

Machen Sie weiter und klonen Sie dieses Textmodul 5 Mal. Jetzt haben Sie 6 verschiedene Textmodule, dies entspricht der Anzahl der CTA-Module, die wir ebenfalls haben. Wenn Sie stattdessen 10 CTA-Module verwenden, müssen Sie 10 Textmodule (oder andere Module) hinzufügen, um die Spaltenstruktur auszugleichen.

Inhalt von Duplikaten ändern

Ändern Sie den Inhalt jedes der Duplikate so, dass er mit dem CTA-Modul übereinstimmt, das darunter angezeigt wird, und fertig!

Vorschau

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

Beispiel 1: Einspaltige Zeile

Desktop

Handy, Mobiltelefon

Beispiel 1: Zweispaltige Zeile + mehrere Module in 'Swipe Column'

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi endlose horizontale Wischkarten erstellen können. Durch das Erstellen dieser Wischkarten können Sie Ihrer Website nicht nur eine zusätzliche Dimension verleihen, sondern Besuchern auch dabei helfen, nahtlos durch alle Inhalte Ihrer Website zu navigieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!