Beim Entwerfen Ihrer Serviceseite möchten Sie sicherstellen, dass Ihre Besucher Beachten Sie all die verschiedenen Dienstleistungen, die Sie anbieten. In vielen Fällen wird es nur ein bestimmter Service sein, nach dem sie suchen, aber wenn Sie einen optimierten Weg in Ihrer Servicestruktur bieten, ist es wahrscheinlicher, dass Ihr Besucher mit ihnen allen umgehen. 

In diesem Tutorial zeigen wir Ihnen, wie Sie mit den Bildlaufeffekten von kreativ werden können Divi und schaffen Sie einen nahtlosen Serviceübergang. Sie können die JSON-Datei auch kostenlos herunterladen!

Gehen wir.

Mögliches Ergebnis

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Übergang zwischen Abschnitt divi

1, erstellen Sie die Struktur der Elemente neu

Fügen Sie Abschnitt 1 hinzu

Abstand

Fügen Sie zunächst der Seite, an der Sie arbeiten, einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Füllwerte auf verschiedenen Bildschirmgrößen.

  • Obere Polsterung: 80px (Desktop und Tablet), 0px (Telefon)
  • Polsterung unten: 80px
Divi-Parameterabschnitt

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Sizing

Öffnen Sie die Linienparameter, ohne noch Module hinzuzufügen, und übernehmen Sie die folgenden Änderungen an den Bemaßungsparametern:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Breite: 90%
  • Maximale Breite: 1580px
Divi-Abstandskonfiguration

Abstand

Fügen Sie dann einen benutzerdefinierten oberen und unteren Rand hinzu.

  • Oberer Rand: 200px
  • Unterer Rand: 200px
Konfiguration des Divi-Zeilenabstands

Fügen Sie der 1-Spalte einen Textbaustein hinzu

Fügen Sie H2-Inhalte hinzu

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Geben Sie das ein Inhalt H2 Ihrer Wahl.

Unsere Dienstleistungen werden von den Experten des Augenblicks angeboten

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H2-Texteinstellungen wie folgt:

  • Titel 2 Polizei: Vierteljährlich
  • Header 2 Textgröße: 80px (Desktop), 50px (Tablet), 40px (Telefon)
  • Höhe der Linie 2 des Kopfes: 1.2em
Leiter der Divi-Polizei

Abstand

Fügen Sie dann einen unteren Rand auf dem Tablet und dem Telefon hinzu.

  • Unterer Rand: 50 Pixel (nur Tablet und Telefon)
Konfiguration des Divi-Textabstands

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Kommen wir zur zweiten Spalte. Da ist das erste Modul, das wir brauchen, ein Textmodul mit einem bestimmten Inhalt Beschreibung.

Textfeld für Inhaltsunterteilungen

Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:

  • Textschrift: Kabine
  • Textschriftstil: Großbuchstaben
  • Textfarbe: # 000000
  • Textgröße: 18px (Desktop), 15px (Tablet), 13px (Telefon)
  • Textbuchstabenabstand: 3px (Desktop), 1px (Tablet und Telefon)
  • Höhe der Textzeile: 3em
Divi-Textparameter

Fügen Sie Spalte 2 ein Trennmodul hinzu

Sichtbarkeit

Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist ein Trennungsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja
Sichtbarer Teiler

Linie

Ändern Sie dann die Linienfarbe des Moduls.

  • Linienfarbe: # 000000
Teilerfarbhintergrund

Sizing

Nehmen Sie dann einige Änderungen an den Größenparametern vor.

  • Teilergewicht: 3px
  • Breite: 28%
Divi Separator Dimensionierung

Abstand

Wir fügen auch einen oberen Rand hinzu.

  • Oberer Rand: 10px
Abstand der Divi-Trennmodule

Fügen Sie Abschnitt 2 hinzu

Abstand

Fahren wir mit dem nächsten regulären Abschnitt fort. Entfernen Sie die standardmäßige obere Polsterung aus dem Abschnitt.

  • Obere Polsterung: 0px
Abschnitt 2 Teilungsabstand

Überlauf

Verstecken Sie auch die Überläufe.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Überläufe des Divi-Moduls ausblenden

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie eine erste Zeile mit der folgenden Spaltenstruktur hinzu:

Wählen Sie ein Divi-Layout

Sizing

Öffnen Sie die Zeilenparameter, ohne weitere Module hinzuzufügen, greifen Sie auf die Bemaßungsparameter zu und nehmen Sie die folgenden Änderungen vor:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 90%
  • Maximale Breite: 1580px
Dachrinnenkonfiguration Divi Abschnitt

Abstand

Entfernen Sie dann alle standardmäßigen oberen und unteren Polster.

  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Abstandseinstellungen des Divi 1-Leitungsmoduls

Einstellungen für Spalte 1

Hintergrundfarbe

Öffnen Sie dann die Einstellungen für Spalte 1 und ändern Sie die Hintergrundfarbe.

  • Hintergrundfarbe: # f7f7f7
Hintergrundkonfiguration des Divi Line Moduls

Abstand

Vervollständigen Sie die Spalteneinstellungen, indem Sie benutzerdefinierte Füllwerte auf verschiedenen Bildschirmgrößen hinzufügen.

  • Obere Polsterung: 200px (Schreibtisch), 100px (Tablet und Telefon)
  • Bodenpolsterung: 200px (Schreibtisch), 100px (Tablet und Telefon)
  • Linke Polsterung: 8%
  • Rechte Polsterung: 8%
Spalteneinstellungen für Zeilenmodule

Einstellungen für Spalte 2

Abstand

Öffnen Sie anschließend die Einstellungen in Spalte 2. Wechseln Sie zur Registerkarte Erweitert und fügen Sie benutzerdefinierte Füllwerte für verschiedene Bildschirmgrößen hinzu.

  • Top-Polsterung: 100px (Desktop), 50px (Tablet und Telefon)
  • Polsterung unten: 200px
  • Linke Polsterung: 150 px (Schreibtisch), 0 px (Tablet und Telefon)
Abstandseinstellungen des Divi-Moduls

Fügen Sie Spalte 1 ein Trennmodul hinzu

Sichtbarkeit

In der ersten Spalte ist das erste Modul, das wir benötigen, ein Trennmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja
Divi 1 Trennzeichen anzeigen

Linie

Ändern Sie dann die Linienfarbe des Moduls.

  • Linienfarbe: # 000000
Divi Separator Einstellungen

Sizing

Nehmen Sie auch Änderungen an den Größenparametern vor.

  • Teilergewicht: 3px
  • Breite: 50%
Divi Separator Dimensionierung

Fügen Sie der 1-Spalte einen Textbaustein hinzu

Fügen Sie H3-Inhalte hinzu

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Textmodul mit Inhalt H3.

Einstellung des Divi-Inhaltsbereichs

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H3-Texteinstellungen:

  • Titel 3 Polizei: Vierteljährlich
  • Textfarbe von Punkt 3: # 000000
  • Punkt 3 Textgröße: 50px (Desktop), 40px (Tablet), 35px (Telefon)
  • Höhe der Linie 3 des Kopfes: 1.1em
Divi Design-Nagelfassung

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

In der zweiten Spalte ist das erste Modul, das wir benötigen, ein Textmodul mit einigen Beschreibungsinhalten.

Einstellung des Divi-Textmoduls

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

  • Textschrift: Kabine
  • Textschriftstil: Großbuchstaben
  • Textgröße: 18px (Desktop), 15px (Tablet), 13px (Telefon)
  • Textbuchstabenabstand: 3px (Desktop), 1px (Tablet und Telefon)
  • Höhe der Textzeile: 3em
Anpassung der Divi-Textform-Schriftart

Fügen Sie der 2-Spalte ein Schaltflächenmodul hinzu

Kopie hinzufügen

Das nächste und letzte Modul, das wir benötigen, ist ein Tastenmodul. Geben Sie eine Kopie Ihrer Wahl ein.

Inhaltseinstellung des Textmoduls

Tasteneinstellungen

Dann stylen Sie die Schaltfläche.

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Textgröße der Schaltfläche: 20 Pixel
  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: # 000000
  • Schaltflächenrandbreite: 0px
Einstellung des Divi-Tastenstils
  • Button Font: Vierteljährlich
  • Schriftgröße der Schaltfläche: fett
Farbeinstellungen der Divi-Schaltfläche

Abstand

Fügen Sie auch benutzerdefinierte Polster hinzu.

  • Obere Polsterung: 50px
  • Polsterung unten: 50px
  • Linke Auffüllung: 100px
  • Rechte Polsterung: 100px
Einstellungen für den Tastenabstand des Divi-Moduls

Position

Und positionieren Sie den Knopf entsprechend neu:

  • Position: Absolut
  • Ort: unten links
Positionseinstellung des Divi-Tastenmoduls

Klonen Sie die Linie so oft wie nötig

Sobald Sie die gesamte Zeile und alle Module fertiggestellt haben, können Sie die gesamte Zeile dreimal klonen.

Divi-Modul klonen

Ändern Sie den gesamten Inhalt

Stellen Sie sicher, dass Sie den gesamten Inhalt in doppelten Zeilen bearbeiten.

Bearbeiten Sie den Inhalt des Divi-Abschnitts

2. Wenden Sie Bildlaufeffekte an

Bildlaufeffekte in der ersten Zeile

Horizontale Bewegung

Sobald Sie alle Zeilen in Ihrem Abschnitt abgeschlossen haben, können Sie die Bildlaufeffekte hinzufügen. Öffnen Sie die erste Zeile des Abschnitts und fügen Sie eine horizontale Bewegung hinzu.

  • Horizontale Bewegung aktivieren: Ja
  • Startoffset: -5
  • Durchschnittlicher Offset: 0 (bei 26%)
  • Endversatz: 0
  • Bewegungseffekt auslösen: Mitte des Elements
Wenden Sie Divi-Scrolling-Effekte an

Ein- und Ausblenden

Verwenden Sie auch einen eingehenden und ausgehenden Fade-Effekt.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 100%
  • Durchschnittliche Deckkraft: 100% (bei 50%)
  • Endopazität: 0% (bis 53%)
  • Bewegungseffekt auslösen: Mitte des Elements
Konfigurieren Sie den Divi-Bereich für Überblendungsanimationen

Bildlaufeffekte in der mittleren Reihe

Vertikale Bewegung

Als Nächstes fügen wir allen Zeilen zwischen der ersten und der letzten Zeile des Abschnitts Bildlaufeffekte hinzu. Verwenden Sie zuerst eine vertikale Bewegung:

  • Vertikale Bewegung aktivieren: Ja
  • Startoffset: -4
  • Durchschnittlicher Offset: 0 (bei 26%)
  • Endversatz: 0
  • Bewegungsauslöseeffekt: Mitte des Elements
Divi Scrolling Aniation Konfiguration

Ein- und Ausblenden

Aktivieren Sie auch einen Ein- und Ausblendeffekt.

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 0%
  • Durchschnittliche Deckkraft: 100% (von 27% bis 50%)
  • Endversatz: 0 (bei 53%)
  • Bewegungseffekt auslösen: Mitte des Elements
Divi Line Fade Animation

Scroll-Effekte für die letzte Zeile

Vertikale Bewegung

Öffnen Sie dann die letzte Zeile des Abschnitts und fügen Sie die folgende vertikale Bewegung hinzu:

  • Vertikale Bewegung aktivieren: Ja
  • Startoffset: -4
  • Durchschnittlicher Offset: 0 (bei 26%)
  • Endversatz: 0
  • Bewegungseffekt auslösen: Mitte des Elements
Animation Scrolling Divi Line Modul

Ein- und Ausblenden

Mit einem eingehenden und ausgehenden Fade-Effekt sind Sie fertig!

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 0%
  • Durchschnittliche Deckkraft: 100% (von 27% bis 50%)
  • Endopazität: 100% (bis 53%)
  • Bewegungseffekt auslösen: Mitte des Elements
Animationseinstellungen für das Erscheinungsbild des Divi-Linienmoduls

Endgültiges Ergebnis

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Letzte Demo

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit den Scroll-Effekten von einen schönen Aufschlag-Übergang erstellen Divi. Noch bevor ein Aufschlag verschwindet, beginnt der andere zu erscheinen, was einen schönen Übergang ergibt, der das Auge schont. Dieser Ansatz hilft Ihnen, jeden Service auf individueller Ebene hervorzuheben. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.