Springe zum Hauptinhalt

So erstellen Sie einen nahtlosen Übergang mit Bildlaufeffekten auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie Ihre Serviceseite gestalten, möchten Sie sicherstellen, dass Ihre Besucher alle von Ihnen angebotenen Services bemerken. In vielen Fällen handelt es sich nur um einen bestimmten Service, nach dem sie suchen. Wenn Sie jedoch eine optimierte Methode in Ihrer Servicestruktur bereitstellen, werden Ihre Besucher diese mit größerer Wahrscheinlichkeit alle behandeln. 

In diesem Tutorial zeigen wir Ihnen, wie Sie mit den Scroll-Effekten von Divi kreativ werden und einen nahtlosen Serviceübergang erstellen können. 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 den gewünschten H2-Inhalt ein.

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

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

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • 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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • 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 H3-Inhalt.

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

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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • 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 Bildlaufeffekten von Divi einen schönen Serviceübergang erstellen. Noch bevor ein Aufschlag verschwindet, erscheint der andere und gibt dem Auge einen schönen Übergang. Dieser Ansatz hilft Ihnen dabei, jeden Dienst auf einer individuellen Ebene hervorzuheben. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben