Wie man schöne Fußzeilen-Scrolls erstellt, enthüllt sich unter den Abschnittstrennern von Divi

Bei allen Designtrends bleiben Fußzeilen unverzichtbar. Die Leute haben sich so daran gewöhnt, was sie wiederum sehr benutzerfreundlich macht. Sie helfen Besuchern, ihren Aufenthalt auf Ihrer Website zu organisieren und zu der genauen Seite zu navigieren, nach der sie suchen. Mit Divi können Sie ganz einfach jede Art von Fußzeile in einem einzigen Abschnitt erstellen.

Wenn Sie Ihrer Fußzeile eine zusätzliche Dimension und Interaktion verleihen möchten, werden Sie diesen Beitrag lieben. Wir kombinieren auf kreative Weise einen Fußzeilenabschnitt mit Abschnittstrennern, um eine Fußzeilen-Scroll-Anzeige zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

1. Erstellen Sie eine neue leere Seite und laden Sie das Layout Ihrer Wahl hoch

Neue leere Seite hinzufügen

Als erstes müssen Sie eine neue leere Seite erstellen.

Landing Page des SaaS-Unternehmenslayoutpakets hochladen

Wechseln Sie zum Visual Builder und laden Sie die Landingpage des SaaS Company Layout Packs hoch. Obwohl wir dieses spezielle Layout verwenden, können Sie die Technik auf jeder Art von Seite anwenden, an der Sie gerade arbeiten.

2. Fügen Sie jedem Abschnitt einen Z-Index hinzu und entfernen Sie Abschnittsanimationen

Z-Index zum Heldenabschnitt hinzufügen

Fahren Sie fort, indem Sie den Z-Index des Heldenabschnitts auf der Seite ändern.

• Z-Index: 3

Kopieren Sie den Z-Index und fügen Sie ihn in alle anderen Abschnitte auf der Seite ein

Kopieren Sie den z-Index und fügen Sie ihn in alle anderen Abschnitte auf der Seite ein. Das Erhöhen des Z-Index für jeden der Abschnitte ist ein entscheidender Schritt, damit das Tutorial funktioniert. Dadurch kann jeder der Abschnitte über dem Fußzeilenabschnitt angezeigt werden, den wir später im Beitrag hinzufügen.

Animation des Heldenabschnitts entfernen

Um sicherzustellen, dass die Fußzeile bis zum Ende der Seite ausgeblendet bleibt, werden wir auch alle Abschnittsanimationen entfernen. Öffnen Sie den Heldenbereich und entfernen Sie die Animation.

• Animationsstil: Keine

Animation auf alle Abschnitte auf der Seite erweitern

Erweitern Sie die Animationsstile auf alle Abschnitte der Seite.

3. Ändern Sie den letzten Abschnitt auf der Seite

Hintergrundfarbe ändern

Gehen Sie zum letzten Abschnitt auf der Seite und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f2f2f2

4. Fügen Sie den regulären Abschnitt Nr. 1 am Ende der Seite hinzu

Abschnittseinstellungen

Hintergrundfarbe

Wie Sie in der Vorschau dieses Beitrags sehen können, wird die Fußzeile unter einem Abschnittstrenner angezeigt. Wir werden diesem Abschnittsteiler einen neuen Abschnitt am Ende unserer Seite widmen. Öffnen Sie die Abschnittseinstellungen und verwenden Sie eine vollständig transparente Hintergrundfarbe. Dadurch kann die Fußzeile durch den Abschnittscontainer hindurchscheinen, auch wenn sie sich darunter befindet.

• Hintergrundfarbe: rgba(0,0,0,0)

Oberteiler

Gehen Sie zur Registerkarte Design des Abschnitts und fügen Sie einen oberen Teiler Ihrer Wahl hinzu.

• Teilerstil: In Liste suchen
• Teilerhöhe: 250px (Desktop), 150px (Tablet), 100px (Telefon)
• Teiler Horizontale Wiederholung: 2x

Z-Index

Auch dieser neue Abschnitt benötigt einen erhöhten Z-Index.

• Z-Index: 3

5. Fügen Sie den regulären Abschnitt Nr. 2 am Ende der Seite hinzu

Abschnittseinstellungen

Hintergrundfarbe

Zeit, den Footer-Bereich zu erstellen! Fügen Sie unten auf der Seite einen weiteren neuen regulären Abschnitt hinzu und wählen Sie eine Hintergrundfarbe Ihrer Wahl aus.

• Hintergrundfarbe: #202332

Größe

Gehen Sie zur Registerkarte Design und stellen Sie sicher, dass die Breite "100%" beträgt.

• Breite: 100%

Abstand

Wir müssen auch die obere Polsterung des Abschnitts erhöhen.

• Obere Polsterung: 500px

Z-Index

Der Z-Index, den wir diesem Abschnitt zuweisen, ist niedriger als der der anderen Abschnitte auf der Seite. Dies hilft uns, den Abschnitt auszublenden, bis wir am Ende der Seite sind.

• Z-Index: 2

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Spaltenabstand

Öffnen Sie als nächstes die Einstellungen von Spalte 1 und fügen Sie etwas linkes Padding hinzu.

• Linke Polsterung: 20px

Spalte rechter Rand

Fügen Sie der Spalte auch einen rechten Rahmen hinzu.

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #515151

Spaltenstile kopieren und einfügen

Wenden Sie die Änderungen auf alle Spalten an, indem Sie entweder die Stile erweitern oder die Option zum Kopieren und Einfügen verwenden.

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein neues Bildmodul hinzu und laden Sie Ihr Logo hoch.

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Breite über verschiedene Bildschirmgrößen.

• Breite: 35 % (Desktop), 30 % (Tablet), 25 % (Telefon)
• Modulausrichtung: Links

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Leerzeichen unter dem Bild anzeigen: Ja
• Unterer Rand: 50px

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zur zweiten Spalte! Fügen Sie ein erstes Textmodul mit Inhalten Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen.

• Textschriftart: Nunito Sans
• Schriftstärke des Textes: Halbfett
• Textfarbe: #ffffff
• Textgröße: 19px

Abstand

Und fügen Sie einen benutzerdefinierten oberen und unteren Rand für verschiedene Bildschirmgrößen hinzu.

• Oberer Rand: 15 Pixel (Desktop und Tablet), 10 Pixel (Telefon)
• Unterer Rand: 15 Pixel (Desktop und Tablet), 10 Pixel (Telefon)

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie in der zweiten Spalte ein zweites Textmodul hinzu und geben Sie einen Inhalt Ihrer Wahl ein.

Link hinzufügen

Fügen Sie einen Link hinzu, der dem Fußzeilenelement entspricht.

• Modul-Link-URL: #

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textschriftart: Nunito Sans
• Textfarbe: #dbdbdb
• Textgröße: 17px

Abstand

Und fügen Sie benutzerdefinierte obere und untere Polsterung für verschiedene Bildschirmgrößen hinzu.

• Oberer Rand: 15 Pixel (Desktop und Tablet), 10 Pixel (Telefon)
• Unterer Rand: 15 Pixel (Desktop und Tablet), 10 Pixel (Telefon)

Klonen Sie Textmodul #2 so oft wie nötig

Klonen Sie das zweite Textmodul in Spalte 2 so oft wie nötig.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt ändern.

Links ändern

Zusammen mit den Links.

• Modul-Link-URL: #

Module in Spalte 2 klonen und in verbleibende Spalten platzieren

Sobald Sie die zweite Spalte ausgefüllt haben, können Sie beide Module beliebig oft klonen und die Duplikate in die beiden verbleibenden Spalten der Zeile einfügen.

Inhalt ändern

Ändern Sie den Inhalt jedes Duplikats.

Links ändern

Zusammen mit dem Link.

• Modul-Link-URL: #

6. Stellen Sie Abschnitt 2 am unteren Rand der Seite fest

Benutzerdefiniertes CSS hinzufügen

Um nun die Scroll-Enthüllung zu erstellen, stellen wir sicher, dass der Fußzeilenabschnitt am unteren Rand unserer Seite haftet, indem wir dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.

position: fixed;
bottom: 0;

7. Fügen Sie den unteren Rand zu Abschnitt 1 hinzu, um einen Reveal-Effekt zu erzeugen

Fügen Sie den unteren Rand über verschiedene Bildschirmgrößen hinzu

Außerdem benötigen wir unten auf unserer Seite etwas Platz, damit die Fußzeile angezeigt werden kann. Öffnen Sie den Abschnitt mit dem Abschnittsteiler und fügen Sie einen unteren Rand für verschiedene Bildschirmgrößen hinzu und Sie sind fertig!

• Unterer Rand: 400 Pixel (Desktop), 700 Pixel (Tablet), 800 Pixel (Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie schöne Fußzeilen-Scroll-Enthüllungen unter Abschnittstrennern erstellen, um einen einzigartigen Effekt zu erzielen. Dies ist eine großartige Möglichkeit, jede Fußzeile interaktiv zu gestalten und die Aufmerksamkeit auf die Elemente zu lenken, die in der Fußzeile aufgeführt sind. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, auch Ihre eigenen Abschnittsteiler-Fußzeilen zu erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.