So erstellen Sie mit Divi . benutzerdefinierte Sticky-Designs „Back to Top“

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divi und dem Green Energy Layout Pack benutzerdefinierte Sticky-Back-to-Top-Designs erstellen können. Diese Technik hilft Ihnen, die Benutzererfahrung auf Ihren Seiten zu verbessern und gleichzeitig die integrierten Optionen von Divi auf der Designseite zu nutzen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen alternativen Back-to-Top-Designs zu erstellen und sie auf Ihrer nächsten Website zu verwenden!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis dieses Tutorials.

GIF

Beispiel 1

Beispiel #2

Beispiel #3

1. Glattes Scrollen zu Seiten-HTML hinzufügen

Green Energy Landing Page auf neue Seite hochladen

Als erstes müssen Sie eine neue Seite erstellen und die Landingpage des Green Energy Layout Packs hochladen.

Seiteneinstellungen öffnen

Öffnen Sie die Seiteneinstellungen, indem Sie auf das im Druckbildschirm unten markierte Symbol klicken:

Smooth Scroll zum benutzerdefinierten CSS-Feld hinzufügen

Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie der gesamten Seite ein reibungsloses Scrollverhalten hinzu, indem Sie den folgenden CSS-Code zum Feld "Benutzerdefiniertes CSS" hinzufügen:

html {
scroll-behavior: smooth;
}

2. CSS-ID zum Hero-Bereich hinzufügen

Heldenbereich öffnen

Das Back-to-Top-Design leitet die Besucher zum Heldenbereich weiter. Um es durchzuziehen, müssen Sie zuerst die Einstellungen des Heldenbereichs öffnen.

CSS-ID hinzufügen

Gehen Sie dann zum Tab "Erweitert" und fügen Sie dem Abschnitt eine CSS-ID hinzu. Später in diesem Beitrag werden wir einen Ankerlink hinzufügen, der Besucher zu diesem Abschnitt führt.

• CSS-ID: Abschnitt-1

3. Fügen Sie einen neuen Abschnitt am Ende der Seite mit dem Design „Zurück nach oben“ hinzu

Allgemeine Schritte

Neuen regulären Abschnitt am Ende der Seite hinzufügen

Wie Sie in der Vorschau dieses Beitrags feststellen konnten, werden wir drei verschiedene Designbeispiele neu erstellen. Um den Prozess zu rationalisieren, beginnen wir zunächst mit einigen allgemeinen Schritten und konzentrieren uns später im Beitrag auf jedes Designbeispiel einzeln. Fügen Sie unten auf Ihrer Seite einen neuen regulären Abschnitt hinzu.

Abstand

Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Ankerlink hinzufügen

Sobald jemand auf die gesamte Zeile klickt, möchten wir, dass er an den Anfang der Seite weitergeleitet wird. Dazu fügen wir einen Link hinzu, der zum Heldenbereich der Seite weiterleitet.

• Zeilenlink-URL: yourwebsite.com/page/#section-1

Zeilenausrichtung

Wir platzieren die Zeile auch auf der rechten Seite des Abschnittscontainers.

• Zeilenausrichtung: Rechts

Fixierte Position

Als Nächstes fixieren wir die gesamte Zeile, indem wir zum erweiterten Tab der Zeile gehen und die folgenden Positionsoptionen aktualisieren:

• Position: Behoben
• Vertikaler Versatz: 30px
• Horizontaler Versatz: 30px
• Z-Index: 99

Zusätzlich zur Fixierung der Zeile stellen wir sicher, dass die Zeile den gesamten Seiteninhalt überlappt, indem wir den Z-Index erhöhen.

Designbeispiel 1 neu erstellen

Zeileneinstellungen

Spaltenstruktur ändern

Nachdem wir nun alle allgemeinen Schritte durchgegangen sind, werden wir die drei verschiedenen Beispiele, die Sie zu Beginn dieses Beitrags sehen konnten, neu erstellen. Beginnen wir mit dem ersten! Ändern Sie die Zeilenspaltenstruktur:

Hintergrundfarbe

Fahren Sie fort, indem Sie die Zeileneinstellungen öffnen und eine weiße Hintergrundfarbe hinzufügen.

• Hintergrundfarbe: #ffffff

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: 1
• Breite: 9vw (Desktop), 23vw (Tablet), 35vw (Telefon)

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 2.5vw (Desktop), 6vw (Tablet), 10vw (Telefon)
• Untere Polsterung: 2.5vw (Desktop), 6vw (Tablet), 10vw (Telefon)
• Linke Polsterung: 1vw (Desktop), 2vw (Tablet), 4vw (Telefon)
• Rechte Polsterung: 1vw (Desktop), 2vw (Tablet), 4vw (Telefon)

Grenze

Fahren Sie fort, indem Sie '10px' zu jeder der Ecken in den Rahmeneinstellungen hinzufügen.

Box Schatten

Und fügen Sie einen Boxschatten mit den folgenden Einstellungen hinzu:

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)

Anzeige

Um sicherzustellen, dass die Spalten über alle Bildschirmgrößen hinweg nebeneinander bleiben, fügen wir dem Hauptelement der Zeile eine zusätzliche Zeile CSS-Code hinzu.

display: flex;

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschriftart: Arial
• Schriftstärke des Textes: Fett
• Textausrichtung: Rechts
• Textfarbe: #000000
• Textgröße: 1.1vw (Desktop), 3vw (Tablet), 4.4vw (Telefon)
• Text Buchstabenabstand: -1px
• Textzeilenhöhe: 1em

Textmodul zu Spalte 2 hinzufügen

Symbol hinzufügen

Gehen Sie in die zweite Spalte und fügen Sie dort ebenfalls ein Textmodul hinzu. Fügen Sie das '▲'-Symbol zum Inhaltsfeld hinzu.

Texteinstellungen

Zu guter Letzt gehen Sie auf die Registerkarte Design und ändern die Texteinstellungen.

• Textschriftart: Open Sans
• Textausrichtung: Mitte
• Textfarbe: #000000
• Textgröße: 3vw (Desktop), 8vw (Tablet), 12vw (Telefon)
• Textzeilenhöhe: 0.6em

Designbeispiel 2 neu erstellen

Zeileneinstellungen

Größe

Auf zum zweiten Beispiel! Öffnen Sie die Zeileneinstellungen und ändern Sie die Breite der Zeile.

• Breite: 7%

Abstand

Gehen Sie zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul zur Spalte hinzufügen

Symbol hinzufügen

Fahren Sie fort, indem Sie der Zeile ein Textmodul hinzufügen und das '↑'-Symbol eingeben.

Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textausrichtung: Mitte
• Textfarbe: #000000
• Textgröße: 56px
• Textzeilenhöhe: 1em

Abstand

Als nächstes werden wir einige benutzerdefinierte obere und untere Polsterung hinzufügen.

• Obere Polsterung: 30px
• Untere Polsterung: 50px

Grenze

Gehen Sie zur Registerkarte Design und fügen Sie '50vw' zu jeder der Ecken hinzu. Fügen Sie auch einen Rahmen mit den folgenden Einstellungen hinzu:

• Rahmenbreite: 3px
• Randfarbe: #000000

Designbeispiel 3 neu erstellen

Zeileneinstellungen

Größe

Auf zum nächsten und letzten Beispiel! Öffnen Sie die Zeileneinstellungen und ändern Sie die Breite.

• Breite: 4 % (Desktop), 10 % (Tablet), 15 % (Telefon)

Abstand

Entfernen Sie als nächstes die standardmäßige obere und untere Polsterung.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Box Schatten

Fügen Sie der Zeile mit den folgenden Einstellungen einen benutzerdefinierten Boxschatten hinzu:

• Stärke der Box-Schattenausbreitung: 4px
• Schattenfarbe: rgba(0,0,0,0.3)

Textmodul zur Spalte hinzufügen

Symbol hinzufügen

Das einzige Modul, das wir für dieses Designbeispiel benötigen, ist ein Textmodul. Fügen Sie '^' zum Inhaltsfeld hinzu.

Texteinstellungen

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

• Textschriftart: Open Sans
• Schriftstärke des Textes: Ultra Bold
• Textausrichtung: Mitte
• Textfarbe: #4359e9
• Textgröße: 56px
• Textzeilenhöhe: 1em

• Textschattenfarbe: #35d764

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und einige benutzerdefinierte obere und untere Abstände hinzufügen.

• Obere Polsterung: 30px
• Untere Polsterung: 20px

Grenze

Zu guter Letzt fügen Sie dem Textmodul einen Rahmen hinzu und Sie sind fertig!

• Rahmenbreite: 3px
• Randfarbe: #4359e9

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis.

GIF

Beispiel 1

Beispiel #2

Beispiel #3

Abschließende Gedanken

In diesem Anwendungsfall-Tutorial haben wir Ihnen gezeigt, wie Sie mit Divi benutzerdefinierte Back-to-Top-Designs erstellen. Wir haben unseren Seiten ein flüssiges Scrollen hinzugefügt, dem Heldenbereich eine Abschnitts-ID zugewiesen und eine feste Zeile mit dem Heldenbereich verknüpft. Dieses Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie 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.