Wenn auf Ihrer Seite mehrere Handlungsaufforderungen angezeigt werden, kann es hilfreich sein, einen interaktiven Bildlaufeffekt zu erstellen, der verschiedene Elemente vereint. Eine Lösung besteht darin, die Module in feste Elemente umzuwandeln, während sie sich in ihrem Spaltencontainer bewegen. Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein schönes Design erstellen, das mit dieser Technik umgeht. Sie können die JSON-Datei auch kostenlos herunterladen!
Gehen wir.
Übersicht
Bevor wir uns mit dem Tutorial befassen, werfen wir einen letzten Blick darauf, wie es mit verschiedenen Bildschirmgrößen funktioniert hat.
Beginnen wir mit der Neuerstellung!
Einen neuen Abschnitt hinzufügen
Fügen Sie der Seite, an der Sie arbeiten, zunächst einen neuen regulären Abschnitt hinzu.
Abstand
Öffnen Sie die Abschnittseinstellungen und ändern Sie den unteren und oberen Rand für verschiedene Bildschirmgrößen.
- Polsterplatte: 7vw (Desktop), 10vw (Tablet), 15vw (Telefon)
- Polsterung unten: 20vw (Desktop), 7vw (Tablet), 10vw (Telefon)
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie sie die gesamte Breite des Abschnitts einnehmen. er ist auch sehr wichtig Aktivieren Sie die Option 'Spaltenhöhen ausgleichen'. Auf diese Weise erstellen Sie in den Spalten einen leeren Bereich, in dem sich die stationären Module beim Scrollen der Seite frei bewegen können.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
- Breite: 100%
- Maximale Breite: 100%
Spalte 2 obere Polsterung
Öffnen Sie dann die Einstellungen für die 2-Spalte und fügen Sie auf dem Desktop einen oberen Füllstoff hinzu.
- Obere Polsterung: 20vw (Desktop), 0vw (Tablet und Telefon)
Spalte 3 obere Polsterung
Fügen Sie außerdem der dritten Spalte einen benutzerdefinierten Wert für die obere Füllung hinzu.
- Beste Polsterung: 40vw (Desktop), 0vw (Tablet und Telefon)
Spalte 4 obere Polsterung
Vervollständigen Sie die Parameter der Zeile, indem Sie der 4-Spalte auch einen höheren Füllwert hinzufügen.
- Obere Polsterung: 60vw (Desktop), 0vw (Tablet und Telefon)
Fügen Sie der 1-Spalte CTA hinzu
Inhalt hinzufügen
Es ist Zeit, mit dem Hinzufügen von Modulen zu beginnen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein CTA-Modul (Call to Action). Einfügen Inhalt Ihrer Wahl.
Pfandrecht
Fügen Sie der Schaltfläche auch einen Link hinzu. Dadurch kann die Schaltfläche im Design angezeigt werden.
- URL des Links der Schaltfläche: #
Hintergrundfarbe
Ändern Sie anschließend die Hintergrundfarbe des Moduls.
- Hintergrundfarbe: #ffffff
Texteinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die allgemeinen Texteinstellungen.
- Textausrichtung: Mitte
- Textfarbe: dunkel
Einstellungen für den Titeltext
Ändern Sie auch die Texteinstellungen des Titels.
- Titel Titelstufe: H3
- Texttitel: Spectral
- Farbtexttitel: # 000000
- Text Titelgröße: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
Body-Text-Einstellungen
Mit den Parametern des Textkörpers.
- Body-Schriftart: Fira Sans
- Gewicht der Schrift: Light
- Text in Körperfarbe: # 000000
- Körpertextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Körpergröße: 1.8em
Tasteneinstellungen
Vergessen Sie nicht, auch Ihre CTA-Modulschaltfläche zu gestalten.
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Knopftextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: #444eff
- Breite des Schaltflächenrandes: 0px
- Randradius der Schaltfläche: 50vw
- Button Schriftart: Fira Sans
- Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Polsterung unten: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Linke Polsterung: 3vw (Desktop), 7vw (Tablet), 13vw (Telefon)
- Polsterung rechts: 3vw (Desktop), 7vw (Tablet), 13vw (Telefon)
Abstand
Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte innere und untere Ränder hinzu.
- Spitzenauffüllen: 8vw
- Polsterung unten: 8vw
Grenze
Fügen Sie dem Modul auch abgerundete Winkel hinzu.
- Runde Ecken: 1vw (alle Ecken)
Schattenkiste
Beenden Sie das Modul-Design, indem Sie einen subtilen Box-Schatten hinzufügen.
- Schatten der Box Horizontale Position: 10px
- Box Shadow Blur Force: 50px
- Schattenfarbe: rgba (0,0,0,0,08)
CSS-Klasse
Damit der Sticky-Scroll-Effekt funktioniert, müssen wir am Ende dieses Tutorials einige Zeilen CSS-Code hinzufügen. Zur Vorbereitung fügen wir dem CTA-Modul eine CSS-Klasse hinzu.
- CSS-Klasse: sticky-cta
Fügen Sie Spalte 1 ein Bildmodul hinzu
Bild hochladen
Fahren wir mit dem nächsten und letzten Mod fort, den wir in Spalte 1 benötigen. Dies ist ein Bild-Mod. Laden Sie ein PNG-Bild Ihrer Wahl hoch.
Ausrichtung
Ändern Sie als nächstes die Bildausrichtung.
- Bildausrichtung: Mitte
Sizing
Stellen Sie sicher, dass Sie dem Modul auch die volle Breite aufzwingen.
- Volle Breite erzwingen: Ja
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie zu den Abstandseinstellungen gehen und benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.
- Oberer Rand: -5vw (Tablet und Telefon)
- Unterer Rand: -12vw (Desktop), 5vw (Tablet und Telefon)
- Linke Polsterung: 3vw (Desktop), 10vw (Tablet), 25vw (Telefon)
- Polsterung rechts: 3vw (Desktop), 10vw (Tablet), 25vw (Telefon)
Klonen Sie die beiden Module dreimal und platzieren Sie die verbleibenden Spalten
Nachdem Sie beide Module in der 1-Spalte ausgefüllt haben, können Sie sie dreimal duplizieren und die Duplikate in die verbleibenden Spalten der Zeile einfügen.
Bilder ändern
Stellen Sie sicher, dass Sie das Bild in jedem doppelten Bildmodul ändern.
Ändern Sie den Inhalt des CTA und die Hintergrundfarben der Schaltflächen
Ändern Sie auch die Inhalt CTA mit Schaltflächenhintergrundfarben.
- CTA-Modul #2: #89ffb4
- CTA-Modul #3: #ff89f1
- CTA-Modul #4: #ffd389
Fügen Sie den Bildmodulen in den Spalten 1, 2 und 3 eine CSS-Klasse hinzu
Um sicherzustellen, dass der Sticky-Effekt auch bei Bildern funktioniert, müssen wir den Bildmodulen in den Spalten 1, 2 und 3 eine CSS-Klasse hinzufügen.
- CSS-Klasse: Sticky-Image
Fügen Sie die 2-Zeile hinzu
Spaltenstruktur
Sie müssen lediglich den CSS-Code hinzufügen. Fügen Sie dazu eine neue Zeile hinzu.
Fügen Sie ein Codemodul mit CSS-Code hinzu
Fügen Sie der Zeile ein Codemodul hinzu, fügen Sie den folgenden CSS-Code ein und fertig!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
Übersicht
Nachdem alle Schritte ausgeführt wurden, werfen wir einen letzten Blick darauf, was mit verschiedenen Bildschirmgrößen passiert ist.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie Module in ihrem Spaltencontainer fixieren. Mit dieser Technik können beeindruckende Bildlaufeffekte erzielt werden, mit denen Sie die verschiedenen Handlungsaufforderungen auf Ihrer Seite hervorheben können. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
