Erstellen benutzerdefinierter Spalten-Seitennavigation für One-Pager mit Divi

Wenn Sie sich entscheiden, einen One-Pager zu erstellen, wird die Benutzererfahrung der Navigation völlig anders. Obwohl die Leute nicht dazu bestimmt sind, die Seite zu verlassen, möchten Sie ihren Aufenthalt benutzerfreundlich gestalten. Aus diesem Grund verwenden die meisten One-Pager In-Page-Ankerlinks. Sie können diese Ankerlinks in einem traditionellen oberen Menü platzieren oder stattdessen die seitliche Navigation wählen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit den neuen Spaltenoptionen von Divi ein schönes Seitennavigationsdesign für Spalten für Ihre Seite erstellen. Wir passen alle Elemente in eine Ansichtsfensterhöhe von 100 an, um ein Vollbilderlebnis zu schaffen. Sie können die JSON-Datei auch kostenlos herunterladen!

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 Seitennavigationslayout der Spalte KOSTENLOS herunter

Um das kostenlose Seitennavigationslayout in den Händen zu halten, 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!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neue leere Seite erstellen

Als erstes müssen Sie eine neue leere Seite erstellen. Wechseln Sie anschließend zu Visual Builder.

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Wir werden unseren gesamten Seiteninhalt in einen Abschnitt, eine Zeile und zwei Spalten unterbringen. Fügen Sie Ihrer Seite einen neuen regulären Abschnitt mit weißer Hintergrundfarbe hinzu.

• Hintergrundfarbe: #FFFFFF

Abstand

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

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen entsprechend:

• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%
• Höhe: 100vh

Abstand

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

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

Spalte 1 Einstellungen

Nachdem Sie die allgemeinen Zeileneinstellungen abgeschlossen haben, öffnen Sie die Einstellungen für Spalte 1.

Hintergrundfarbe

Fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #FFFFFF

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Horizontale Position des Kastenschattens: 80px
• Stärke der Box-Schattenunschärfe: 75px
• Schattenfarbe: rgba(0,0,0,0.07)

Maßstab transformieren

Wir verkleinern auch die Größe der Spalte auf dem Desktop.

• Unten: 75 % (Desktop), 100 % (Tablet und Telefon)
• Rechts: 75 % (Desktop), 100 % (Tablet und Telefon)

Transformieren Übersetzen

Ändern Sie als Nächstes die Position der Spalte mit einigen benutzerdefinierten Transformationsübersetzungseinstellungen.

• Unten: -5vw (Desktop), 0px (Tablet & Telefon)
• Rechts: 0px

Spalte 2 Einstellungen

Fahren Sie fort, indem Sie die Einstellungen von Spalte 2 öffnen.

Abstand

Wechseln Sie zur Registerkarte Design und fügen Sie die folgenden linken und rechten Abstandswerte für verschiedene Bildschirmgrößen hinzu:

• Linke Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

CSS-Klasse

Später im Beitrag werden wir einen sanften Bildlauf hinzufügen und die Bildlaufleiste ausblenden. Dazu müssen wir der Spalte eine benutzerdefinierte CSS-Klasse hinzufügen.

• CSS-Klasse: scroll-column

Sichtweite

Die Module, die wir in der zweiten Spalte hinzufügen, repräsentieren unseren Seiteninhalt. Um das Scrollen zu ermöglichen, ändern wir die Überlaufeinstellungen.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Scrollen

Menüelement-Textmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Beginnen wir mit dem Hinzufügen von Modulen! Fügen Sie der Spalte 1 einen ersten Menüpunkt Textbaustein mit einem Inhalt Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie dem Menüelement einen Ankerlink hinzu.

• Modul-Link-URL: www.yourwebsite.com/yourpage/#home

Texteinstellungen

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

• Textschriftart: Montserrat
• Textausrichtung: Mitte
• Textfarbe: #383838
• Textgröße: 3vw
• Text Buchstabenabstand: -3px (Desktop), -2px (Tablet), -1px (Telefon)

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Werte für den oberen und unteren Rand hinzu.

• Obere Marge: 23vw (Desktop), 3vw (Tablet & Telefon)
• Unterer Rand: 3vw (Desktop), 2vw (Tablet), 1vw (Telefon)

Menüpunkt zweimal klonen

Sobald Sie den ersten Menüpunkt abgeschlossen haben, klonen Sie ihn zweimal.

Inhalt beider Duplikate ändern

Ändern Sie den Menüpunktinhalt beider Duplikate.

Links beider Duplikate ändern

Zusammen mit den Ankerlinks.

• Duplikat 1: /#about
• Duplikat 2: /#services

Abstand beider Duplikate ändern

Vervollständigen Sie die Duplikate, indem Sie die Abstandswerte entsprechend ändern:

• Obere Marge: 3vw (Desktop), 2vw (Tablet), 1vw (Telefon)
• Unterer Rand: 3vw (Desktop), 2vw (Tablet), 1vw (Telefon)

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Fügen Sie ein Trennmodul direkt zwischen dem ersten und zweiten Textmodul in Spalte 1 hinzu. Stellen Sie sicher, dass die Option „Trennzeichen anzeigen“ aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe.

• Linienfarbe: #ffebc9

Größe

Zusammen mit den Größeneinstellungen.

• Teilergewicht: 1vw
• Höhe: 0px

Teilermodul klonen

Klonen Sie das Trennmodul und platzieren Sie das Duplikat unter dem zweiten Textmodul.

Fügen Sie das Social Media Follow-Modul zu Spalte 1 hinzu

Soziale Netzwerke hinzufügen

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Social Media Follow Module. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Modulausrichtung.

• Modulausrichtung: Mitte

Abstand

Ändern Sie als nächstes die Randwerte.

• Obere Marge: 12vw (Desktop), 5vw (Tablet & Telefon)
• Unterer Rand: 3vw (Tablet & Telefon)

Grenze

Und fügen Sie '50vw' zu jeder der Ecken hinzu, um eine kreisförmige Form zu erstellen.

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Auf zur zweiten Spalte! Fügen Sie alle gewünschten Module hinzu, aber vergessen Sie nicht, jedem Modul, auf das ein Ankerlink verweisen soll, eine CSS-ID hinzuzufügen. Wenn Sie genau das Design, das in der Vorschau dieses Beitrags gezeigt wurde, nachbilden möchten, fügen Sie zunächst ein Bildmodul hinzu und laden Sie ein Bild Ihrer Wahl hoch.

Ausrichtung

Wechseln Sie zur Registerkarte Design und wählen Sie die linke Bildausrichtung.

• Bildausrichtung: Links

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Volle Breite erzwingen: Ja

Abstand

Und fügen Sie etwas richtige Polsterung hinzu.

• Rechte Polsterung: 20vw

CSS-ID

Gehen Sie schließlich zum Tab "Erweitert" und fügen Sie die erste CSS-ID hinzu. Stellen Sie sicher, dass dies mit dem Ankerlink des ersten Menüelements übereinstimmt.

• CSS-ID: Startseite

Titeltextmodul zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

Weiter zum nächsten Modul, das ein Textmodul ist. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

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

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textfarbe: #383838
• Überschrift 2 Textgröße: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Überschrift 2 Buchstabenabstand: -1px

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Obere Marge: 6vw (Desktop), 10vw (Tablet), 12vw (Telefon)
• Unterer Rand: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie die Linienfarbe.

• Linienfarbe: #ffebc9

Größe

Und ändern Sie die Größeneinstellungen entsprechend:

• Teilergewicht: 15px
• Breite: 16%
• Modulausrichtung: Links

Fließtextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie der zweiten Spalte ein weiteres Textmodul mit einem beliebigen Absatzinhalt hinzu.

Texteinstellungen

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

• Textschriftart: Roboto
• Textausrichtung: Ausrichten
• Textfarbe: #a8a8a8
• Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Text Buchstabenabstand: 1px
• Textzeilenhöhe: 2vw (Desktop), 3,5vw (Tablet), 4,5vw (Telefon)

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Marge: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Unterer Rand: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Rechter Rand: 20vw (Desktop & Tablet), 5vw (Telefon)

Schaltflächenmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie ein Button-Modul mit einer Kopie Ihrer Wahl hinzufügen.

Ausrichtung

Wählen Sie im Design-Tab die Ausrichtung der linken Taste.

• Tastenausrichtung: Links

Taste

Ändern Sie die Tasteneinstellungen entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Hintergrundfarbe der Schaltfläche: #0072ff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Halbfett

Abstand

Und spielen Sie auch mit den Abstandswerten herum.

• Obere Marge: 4vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Unterer Rand: 4vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Obere Polsterung: 1,5 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• Untere Polsterung: 1,5 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)

Alle Module in Spalte 2 zweimal klonen und in derselben Reihenfolge platzieren

Wenn Sie alle Module in Spalte 2 abgeschlossen haben, können Sie sie zweimal klonen und in die richtige Reihenfolge bringen.

Ändern Sie die CSS-ID des doppelten Bildmoduls Nr. 1

Ändern Sie die CSS-ID des ersten doppelten Bildmoduls.

• CSS-ID: über

Ändern Sie die CSS-ID des doppelten Bildmoduls Nr. 2

Machen Sie dasselbe für das zweite duplizierte Image Module.

• CSS-ID: Dienste

Bildlaufleiste ausblenden & Smooth Scroll hinzufügen

Seiteneinstellungen öffnen

Um nun einen glatten Bildlaufeffekt zu erzeugen und die Bildlaufleiste von Spalte 2 auszublenden, fügen wir ein paar Zeilen CSS-Code hinzu. Öffnen Sie die Seiteneinstellungen.

Benutzerdefiniertes CSS hinzufügen

Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie CSS-Code hinzu. Sobald Sie diesen Schritt abgeschlossen haben, sind Sie fertig!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

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 mit den neuen Spaltenoptionen von Divi eine schöne Spaltennavigation für Ihren One-Pager erstellen. Dies ist eine großartige Möglichkeit, Ihrer Seite Ankerlinks hinzuzufügen, die dazu beitragen, die Benutzererfahrung Ihrer Website zu verbessern. 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.