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.
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
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
Abstand
Fügen Sie dann einen benutzerdefinierten oberen und unteren Rand hinzu.
- Oberer Rand: 200px
- Unterer Rand: 200px
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.
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
Abstand
Fügen Sie dann einen unteren Rand auf dem Tablet und dem Telefon hinzu.
- Unterer Rand: 50 Pixel (nur Tablet und Telefon)
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.
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
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
Linie
Ändern Sie dann die Linienfarbe des Moduls.
- Linienfarbe: # 000000
Sizing
Nehmen Sie dann einige Änderungen an den Größenparametern vor.
- Teilergewicht: 3px
- Breite: 28%
Abstand
Wir fügen auch einen oberen Rand hinzu.
- Oberer Rand: 10px
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
Überlauf
Verstecken Sie auch die Überläufe.
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie eine erste Zeile mit der folgenden Spaltenstruktur hinzu:
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
Abstand
Entfernen Sie dann alle standardmäßigen oberen und unteren Polster.
- Obere Polsterung: 0px
- Polsterung unten: 0px
Einstellungen für Spalte 1
Hintergrundfarbe
Öffnen Sie dann die Einstellungen für Spalte 1 und ändern Sie die Hintergrundfarbe.
- Hintergrundfarbe: # f7f7f7
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%
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)
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
Linie
Ändern Sie dann die Linienfarbe des Moduls.
- Linienfarbe: # 000000
Sizing
Nehmen Sie auch Änderungen an den Größenparametern vor.
- Teilergewicht: 3px
- Breite: 50%
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.
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.
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
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.
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
- Button Font: Vierteljährlich
- Schriftgröße der Schaltfläche: fett
Abstand
Fügen Sie auch benutzerdefinierte Polster hinzu.
- Obere Polsterung: 50px
- Polsterung unten: 50px
- Linke Auffüllung: 100px
- Rechte Polsterung: 100px
Position
Und positionieren Sie den Knopf entsprechend neu:
- Position: Absolut
- Ort: unten links
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.
Ändern Sie den gesamten Inhalt
Stellen Sie sicher, dass Sie den gesamten Inhalt in doppelten Zeilen bearbeiten.
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
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
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
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
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
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
Endgültiges Ergebnis
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
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.