So führen Sie Sticky-Optionen mit Scroll-Effekten in Divi . effizient zusammen

Rifat Divi Tutorials Jul 27, 2021

Die integrierten Optionen von Divi Builder können verwendet werden, um all die schönen Designs zu erstellen. Sticky-Optionen und Scroll-Effekte sind zwei dieser großartigen integrierten Funktionen von Divi , und indem wir diese miteinander harmonisieren, können wir einige sehr schöne Designs ausführen. Im heutigen Tutorial erfahren Sie, wie Sie ganz einfach eine Seite gestalten können, indem Sie Sticky-Optionen und Scroll-Effekte zusammenführen, was das Surferlebnis der Besucher zweifellos noch einen Schritt weiter bringt. Wir werden einen Seitenabschnitt entwerfen, in dem ein Bild von links eingleitet und davor ein Text von der rechten Seite eingeschoben wird. Es mag komplex klingen, aber bevor wir direkt in unser Tutorial einsteigen, sehen Sie sich den Design-Sneak-Peek an.

Vorgeschmack

Hier ist das Design-Layout, das wir heute erstellen werden. Dies ist ein responsives Design, sodass es auch auf Tablets und Mobilgeräten funktioniert.

Gebäudeentwurfsstruktur

Entwurf des ersten Abschnitts

Hintergrund mit Farbverlauf

Zuerst legen wir die Struktur fest und später werden wir alle Einstellungen anwenden, um sie festzuhalten und ein reibungsloses Scrollen zu ermöglichen. Öffnen Sie die anfänglichen Abschnittseinstellungen und fügen Sie eine Hintergrundfarbe mit Farbverlauf hinzu.

  • Farbe 1: #854466
  • Farbe 2: #DABFCD
  • Verlaufstyp: Linear
  • Verlaufsrichtung: 90deg
  • Startposition: 10%
  • Endposition: 10%

Sichtweite

Wechseln Sie zur Registerkarte Erweitert und blenden Sie die Überlaufsichtbarkeit aus.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Horizontaler Überlauf: Versteckt
  • Vertikaler Überlauf: Versteckt

Zeilen hinzufügen

Spaltenstruktur

Wir fügen eine neue Zeile mit der folgenden Spaltenstruktur hinzu.

Größenbestimmung

Öffnen Sie die Größeneinstellungen für die neu hinzugefügte Zeile und ändern Sie die Einstellungen wie erwähnt.

  • Breite: 100%
  • Maximale Breite: 2580px

Abstand

Außerdem müssen wir unserer Zeile einen unteren Rand hinzufügen.

  • Unterer Rand: 50px

Spalte 2 Abstand

Jetzt gehen wir zu den Einstellungen von Spalte 2 und ändern die Padding-Werte.

  • Obere Polsterung: 5vh
  • Untere Polsterung: 5vh
  • Linke Polsterung: 8%
  • Rechte Polsterung: 8%

Spalte 1: Textmodul

H3-Inhalt hinzufügen

Fügen Sie der ersten Spalte ein Textmodul hinzu und fügen Sie einige Kopien Ihrer Wahl hinzu.

Hintergrund mit Farbverlauf

Fügen Sie als nächstes den folgenden Verlaufshintergrund ein:

  • Farbe 1: rgba(107,45,18,0.52)
  • Farbe 2: rgba(255,255,255,0)
  • Verlaufstyp: Linear
  • Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Fügen Sie ein Bild Ihrer Wahl hinzu und stellen Sie es entsprechend ein.

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbilds: Mitte

H3-Texteinstellungen

Auf der Registerkarte Design ändern wir jetzt die H3-Einstellungen.

  • Überschrift 3 Schriftart: Prata
  • Überschrift 3 Schriftstil: Großbuchstaben
  • Überschrift 3 Textausrichtung: Mitte
  • Überschrift 3 Textfarbe: #ffffff
  • Überschrift 3 Textgröße: 42px
  • Überschrift 3 Zeilenhöhe: 1,2em

Abstand

Ändern Sie nun die Abstandswerte für das Modul.

  • Obere Marge: 20vh
  • Unterer Rand: 20vh
  • Obere Polsterung: 48vh
  • Untere Polsterung: 48vh

1. Textmodul zu Spalte 2 hinzufügen

H4-Inhalt hinzufügen

Wir werden Spalte 2 mehrere Textmodule hinzufügen. Fügen wir das erste Textmodul hinzu und fügen wir eine H4-Überschriftskopie hinzu.

H4-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H4-Texteinstellungen wie folgt:

  • Überschrift 4 Schriftart: Prata
  • Überschrift 4 Schriftstil: Großbuchstaben
  • Überschrift 4 Textfarbe: #854466
  • Überschrift 4 Textgröße: Desktop: 45px, Tablet: 40px und Telefon: 35px
  • Überschrift 4 Zeilenhöhe: 1,3em

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Jetzt fügen wir direkt unter dem Textmodul ein Trennmodul hinzu und aktivieren die Trennliniensichtbarkeit.

  • Teiler anzeigen: Ja

Linie

Ändern Sie auf der Registerkarte Design die Linienfarbe.

  • Linienfarbe: #854466

Größenbestimmung

Es ist Zeit, die Größeneinstellungen zu ändern.

  • Teilergewicht: 5px
  • Höhe: 5px

2. Textmodul zu Spalte 2 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie in Spalte 2 ein weiteres Textmodul hinzu. Es befindet sich direkt unter dem Trennmodul. Fügen Sie auch einige Beschreibungsinhalte Ihrer Wahl hinzu.

Texteinstellungen

Nachdem wir die Beschreibung hinzugefügt haben, ändern wir die Stileinstellungen für dieses Modul.

  • Textschriftart: Lato
  • Textfarbe: #854466
  • Textgröße: Desktop: 20px, Tablet und Telefon: 16px
  • Text Buchstabenabstand: -0.5px
  • Textzeilenhöhe: 1.8em

Größenbestimmung

Ändern Sie die Größeneinstellungen.

  • Breite: Desktop: 72 % , Tablet und Telefon: 100 %

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in Spalte 2 hinzufügen werden, ist ein Schaltflächenmodul. Lassen Sie uns es hinzufügen und auch eine Kopie hinzufügen.

Tasteneinstellungen

Und zuletzt ändern Sie die Tasteneinstellungen entsprechend.

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja:
  • Schaltflächentextgröße: 20px
  • Schaltflächentextfarbe: #854466
  • Schaltfläche Hintergrund mit Farbverlauf
    • Farbe 1: rgba(43,135,218,0)
    • Farbe 2: rgba(188,128,160,0.95)
    • Startposition: 50%
    • Endposition: 50%
  • Breite des Schaltflächenrahmens: 0px
  • Schaltflächenrandradius: 0px
  • Schaltflächenschrift: Prata
  • Schaltflächenschriftart: Großbuchstaben

Und wir haben erfolgreich die Struktur für das heutige Design gebaut.

Klebrige Effekte

Spalte 2

Da wir alles an Ort und Stelle haben, beginnen wir mit dem Hinzufügen von Sticky-Einstellungen, indem wir die Einstellungen von Spalte 2 öffnen. Übernehmen Sie auf der Registerkarte "Erweitert" die folgenden Einstellungen.

  • Klebrige Position: Bleiben Sie oben
  • Sticky Top Offset: Desktop: 50px. Tablet und Telefon: 80px
  • Unteres Sticky-Limit: Reihe
  • Versatz von umgebenden klebrigen Elementen: Ja
  • Übergangsstandard- und Sticky-Stile: Ja

Sticky-Einstellungen für Spalte 2

Klebriger Rand

Wir haben die Spalte erfolgreich klebrig gemacht. Jetzt fügen wir in Spalte 2 einen Rahmen hinzu. Gehen wir dazu zu den Rahmeneinstellungen.

  • Breite des klebrigen linken Rands: 2px
  • Farbe des linken Rands: #854466

Transformieren Übersetzen

Passen Sie die Transformationswerte der Transformation im standardmäßigen Sticky-Status an.

  • Unten: 10vw
  • Klebriger Boden: 0vw

Sticky Opazität für Textmodule und Schaltflächenmodule

Wir ändern auch die Deckkraft im Standard- und Sticky-Zustand.

  • Opazität des normalen Zustands: 0%
  • Deckkraft des klebrigen Zustands: 100%

Sticky-Einstellungen für das Teilermodul

Größenbestimmung

Lassen Sie uns nun einige Sticky-Einstellungen für das Teilermodul vornehmen.

  • Breite: 0px
  • Klebrige Breite: 21%

Übergang

Erhöhen Sie auf der Registerkarte "Erweitert" die Übergangszeit.

  • Übergangsdauer: 800ms

Scroll-Effekte

Spalte 1 Textbausteine

Als nächstes fügen wir die Scroll-Effekte hinzu. Beginnen wir damit, es auf das Textmodul von Spalte 1 anzuwenden. Öffnen Sie die Textmoduleinstellungen. Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie eine horizontale Bewegung hinzu.

  • Horizontale Bewegung aktivieren: Ja
  • Startversatz: -5
  • Mittlerer Offset: 0 (bei 72 %)
  • End-Offset: 0

Hinzufügen eines Ein- und Ausblenden-Scroll-Effekts

Beenden Sie die Einstellungen für die Bildlaufeffekte, indem Sie die Ein- und Ausblendkonfiguration auf dasselbe Modul anwenden.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsdeckkraft: 0%
  • Mittlere Deckkraft: 0% (bei 46%)
  • Endopazität: 100 % (bei 52 %)

Endgültige Ansicht

Wie Sie sehen, haben wir erfolgreich ein Design erstellt, bei dem wir Scroll-Effekte und Sticky-Optionen zusammengeführt haben. Es reagiert vollständig und sieht auf jedem Gerät hervorragend aus.

Abschluss

Divi ist mit seinen Kernfunktionen mächtig und kann hervorragende Layouts erstellen. Dieses Tutorial zeigt, wie wir mit Sticky-Effekten und Scroll-Optionen kreativ werden und atemberaubende Seiten gestalten können. Wenn Sie ein Entwickler sind, sollten Sie diese Art von Design verwenden, um Ihren Kunden zu beeindrucken. Teilen Sie dieses Tutorial auch mit Ihren Freunden und teilen Sie uns mit, welches Tutorial Sie als nächstes wünschen. Vielen Dank.

Divi WordPress Theme