So erstellen Sie eine Navigations-Homepage mit Divi

Es gibt eine Vielzahl von Ansätzen, die Sie auf Ihrer Homepage anwenden können, aber wenn Sie Ihrer Website das gewisse Extra verleihen möchten, ist die Entscheidung für eine Navigationsseite als Ihre Homepage möglicherweise der richtige Weg. Sie werden es nicht oft sehen und es gibt Ihren Besuchern einen klaren Überblick darüber, was sie von Ihrer Website erwarten können. Außerdem wird es Ihren Besuchern auch helfen, visuell durch die verschiedenen Seiten zu navigieren, die voller großartiger Inhalte sind, die Sie bereitstellen.

Um Ihnen zu zeigen, wie Sie es mit Divi stilvoll und elegant machen können, haben wir ein Design erstellt, das wir Ihnen in diesem Beitrag zeigen, wie Sie es nachbauen können. Es wird zwei Versionen geben; die Desktop-Version und die für Tablet und Telefon geeignete. Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis.

Ergebnis auf dem Desktop

Das Ergebnis, das wir neu erstellen werden, sieht auf dem Desktop wie folgt aus:

Ergebnis auf dem Handy

Das Ergebnis auf dem Handy ist etwas anders und sieht so aus:

So erstellen Sie eine Navigations-Homepage mit Divi

Abonnieren Sie unseren Youtube-Kanal

Desktop-Version neu erstellen

Wir werden zwei Versionen der Navigationsseite erstellen; eine Desktop-Version und eine Version für Tablet und Telefon. Auf diese Weise stellen wir sicher, dass die Navigationsseite auf allen Geräten gut aussieht. Wie üblich beginnen wir mit der Erstellung der Desktop-Version.

Neuen Abschnitt hinzufügen

Erstellen Sie zunächst eine neue Seite und fügen Sie ihr einen regulären Abschnitt hinzu. Für dieses Tutorial verwenden wir nur einen Abschnitt, der alle Zeilen mit Inhalten enthält, die wir benötigen (sowohl für die Desktop- als auch die mobile Version). Sie können sich jedoch auch dafür entscheiden, die Desktop- und die mobile Version in zwei Abschnitte zu unterteilen.

Erste Navigationszeile neu erstellen

Wie Sie in der Ergebnisvorschau oben sehen können, hat jedes der Navigationselemente mehr oder weniger das gleiche Design mit einigen unterschiedlichen Details. Die meisten Einstellungen für jedes der Navigationselemente, die Sie erstellen möchten, sind gleich. Aus diesem Grund zeigen wir Ihnen, wie Sie die erste Zeile im Detail erstellen, und zeigen Ihnen dann, wie Sie die Änderungen auch für die anderen Navigationselemente vornehmen können, die Sie der Seite hinzufügen möchten.

Spaltenstruktur

Wählen Sie zunächst eine Spalte mit voller Breite für die gerade hinzugefügte Zeile aus. Bevor wir Module hinzufügen, stellen wir sicher, dass die Zeileneinstellungen vorhanden sind. Öffnen Sie also die Zeileneinstellungen.

Hintergrundbild

Auf der Registerkarte Inhalt fügen wir als Erstes Ihrer Zeile ein Hintergrundbild hinzu. Wir empfehlen, ein Bild mit einer Breite von '1400px' und einer Höhe von '934px' zu verwenden, da dies zu den besten Ergebnissen führt. Stellen Sie außerdem sicher, dass Sie das Bild auf "keine Wiederholung" setzen.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und fügen Sie Ihrer Zeile eine rechte Ausrichtung hinzu. Auf diese Weise schaffen Sie auf der linken Seite Ihres Bildschirms genügend Platz, um die Beschreibung und den Link hinzuzufügen.

Größe

Öffnen Sie als Nächstes die Unterkategorie Größenanpassung, aktivieren Sie die Option „Benutzerdefinierte Breite verwenden“ und verwenden Sie eine prozentuale Breite von „100%“.

Abstand

Im weiteren Verlauf möchten wir zwischen jedem Navigationselement ein wenig Leerraum hinzufügen, deshalb werden wir der Zeile einen oberen und unteren Rand von '5px' hinzufügen.

Sichtweite

Zu guter Letzt möchten wir diese Zeile auf Telefon und Tablet deaktivieren, da wir später in diesem Beitrag eine weitere Zeile erstellen werden, die Tablet und Telefon entspricht.

Textbaustein für Seitenbeschreibung

Texteinstellungen

Nachdem die Zeileneinstellungen vorgenommen wurden, können Sie der Spalte der Zeile ein erstes Textmodul hinzufügen und die folgenden Einstellungen für die Unterkategorie Text auf der Registerkarte Design verwenden:

• Textschriftart: Andika
• Schriftstärke des Textes: Regular
• Textgröße: 13px
• Textfarbe: #000000
• Textzeilenhöhe: 1.1em
• Textausrichtung: Links

Größe

Scrollen Sie nach unten, öffnen Sie die Unterkategorie Größenanpassung und fügen Sie eine Breite von „18 %“ hinzu. Diese Breite stellt sicher, dass unser Textmodul das Hintergrundbild unserer Zeile nicht überquert, sobald wir den negativen linken Rand hinzufügen.

Abstand

Wie im vorherigen Schritt erwähnt, möchten wir, dass das Textmodul auf der linken Seite unserer Zeile steht, ohne den Zeilenhintergrund zu überlappen. Wir möchten auch etwas Abstand zwischen dem oberen Rand des Zeilenbilds und dem Anfang des Textmoduls haben, deshalb verwenden wir auch einen oberen Rand.

• Oberer Rand: 150px
• Linker Rand: -20px
• Obere Polsterung: 10px
• Untere Polsterung: 10px

Teilermodul

Sichtweite

Als nächstes fügen Sie ein Divider-Modul direkt unter dem Textmodul hinzu. Aktivieren Sie in der Unterkategorie Sichtbarkeit die Option 'Teiler anzeigen'.

Farbe

Wechseln Sie dann zur Registerkarte Design und fügen Sie '#FFFFFF' als Teilerfarbe hinzu.

Stile

Wählen Sie im weiteren Verlauf „Solid“ als Teilerstil und „Oben“ als Teilerposition.

Größe

Nehmen Sie abschließend die folgenden Einstellungen für die Unterkategorie Dimensionierung vor:

• Teilergewicht: 5px
• Höhe: 23px
• Breite: 47%
• Modulausrichtung: Links

Textbaustein für Menüpunkt

Linktext im Inhaltsfeld

Wenn Sie mit dem Trennmodul fertig sind, fahren Sie fort und fügen Sie ein weiteres Textmodul direkt darunter hinzu. Dieses Textmodul wird unser Navigationselement sein. Öffnen Sie die Einstellungen, geben Sie den Text ein und fügen Sie einen Link hinzu.

Hintergrundfarbe mit Farbverlauf

Verwenden Sie, während Sie sich noch auf der Registerkarte Inhalt befinden, die folgenden Einstellungen für den Verlaufshintergrund:

• Erste Farbe: #FFFFFF
• Zweite Farbe: rgba(12,113,195,0.62)
• Verlaufstyp: Linear
• Verlaufsrichtung: 108deg
• Startposition: 31%
• Endposition: 21%

Linktext-Einstellungen

Gehen Sie dann auf die Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Registerkarte Link der Unterkategorie Text gelten:

• Link-Schriftart: Andika
• Link-Schriftstärke: Fett
• Link-Schriftart: Großbuchstaben & Unterstrichen
• Link-Unterstreichungsstil: Solid
• Linktextgröße: 100px
• Linktextfarbe: #000000
• Höhe der Verbindungslinie: 1em

Abstand

Dieses Textmodul muss auch auf der linken Seite des Bildschirms erscheinen, deshalb fügen wir den linken Rand hinzu. Wir möchten auch, dass der Abstand zwischen dem Divider-Modul und diesem Textmodul kleiner ist, wo der negative obere Rand eintritt. Um diese zentrale horizontale Ausrichtung zu erstellen, fügen wir auch einen unteren Rand hinzu. Und schließlich möchten wir, dass der Hintergrund mit Farbverlauf größer ist, deshalb verwenden wir die obere und untere Auffüllung.

• Oberer Rand: -33px
• Unterer Rand: 250px
• Linker Rand: -20px
• Obere Polsterung: 80px
• Untere Polsterung: 80px

Klonen Sie die erste Navigationszeile so oft wie nötig

Die verschiedenen Navigationselemente auf Ihrer Navigationsseite haben mehr oder weniger die gleichen Einstellungen. Aus diesem Grund empfehlen wir, die Zeile so oft wie nötig zu klonen und anschließend die Detailänderungen vorzunehmen. Es gibt drei Dinge, die Sie ändern müssen, werfen wir einen Blick darauf.

Zeilenhintergrund ändern

Als erstes müssen Sie die Hintergrundbilder der Duplikate Ihrer Zeile ändern. Stellen Sie auch hier sicher, dass Sie ein Bild mit einer Breite von '1400px' und einer Höhe von '943px' verwenden, um das beste Ergebnis zu erzielen.

Textmodul für Menüpunkt ändern

Link ändern

Öffnen Sie dann den Navigationspunkt Textbaustein und ändern Sie den Text zusammen mit dem Link.

Hintergrund mit Farbverlauf je nach Textlänge ändern

Schließlich müssen Sie auch den Verlaufshintergrund dieses Textmoduls ändern. Ändern Sie die zweite Verlaufsfarbe in 'rgba(224,43,32,0.62)' und ändern Sie den Wert der Startposition entsprechend der Länge Ihres neuen Navigationselements. Wenn Sie ein recht langes Navigationselement haben, sollten Sie den Prozentsatz der Startposition auf einen höheren Wert ändern, bis Sie sehen, dass es richtig sitzt.

Mobile Version neu erstellen

Nachdem wir nun die Desktop-Version erstellt haben, werden wir auch die Tablet- und die mobile Version erstellen. Der Stil der verschiedenen Module ist ziemlich ähnlich wie bei der Desktop-Version, aber hinter den Kulissen ist die Struktur unserer Reihen völlig anders. Aufgrund der vielen Änderungen, die Sie an jedem Modul vornehmen müssten, wenn Sie es klonen möchten, zeige ich Ihnen einfach, wie Sie es von Grund auf neu erstellen, ohne ein Modul aus der Desktop-Version zu klonen.

Erste Navigationszeile neu erstellen

Beginnen Sie, indem Sie dem Abschnitt, den wir am Anfang dieses Beitrags erstellt haben, eine weitere Zeile hinzufügen.

Spaltenstruktur

Auch diese Spalte benötigt wie die Desktop-Version nur eine Spalte.

Größe

Die Größe dieser Zeile ist wie folgt:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Diese Einstellungen stellen sicher, dass unsere Zeile die gesamte Breite des Bildschirms einnimmt.

Sichtweite

Und schließlich deaktivieren Sie diese Zeile auf dem Desktop, da wir andere Zeilen haben, die stattdessen auf dem Desktop angezeigt werden.

Textbaustein für Seitenbeschreibung

Texteinstellungen

Fahren Sie fort und fügen Sie der Zeile das erste Textmodul hinzu. Nehmen Sie folgende Einstellungen vor, die für die Unterkategorie Text gelten:

• Textschriftart: Andika
• Schriftstärke des Textes: Regular
• Textgröße: 13px
• Textfarbe: #000000
• Textzeilenhöhe: 1.1em
• Textausrichtung: Mitte

Größe

Öffnen Sie dann die Unterkategorie Dimensionierung und verwenden Sie eine Breite von '71%' und eine mittlere Modulausrichtung.

Abstand

Schließlich benötigt dieses Textmodul eine obere und untere Auffüllung von '10px'. Wie Sie sehen, sind Margin-Werte in der Tablet- und Mobile-Version nicht erforderlich, da wir uns stattdessen für eine zentrierte Ausrichtung entscheiden.

Textbaustein für Menüpunkt

Linktext im Inhaltsfeld

Für die mobile Version benötigen wir kein Trennmodul, daher überspringen wir diesen Schritt. Stattdessen fügen wir sofort das Navigationselement Textmodul direkt unter dem zuvor erstellten Textmodul hinzu. Fügen Sie anschließend den Text mit dem Link zum Inhaltsfeld auf der Registerkarte Inhalt hinzu.

Hintergrundfarbe mit Farbverlauf

Der Verlaufshintergrund, den wir für dieses Textmodul verwenden werden, ist der gleiche wie in der Desktop-Version:

• Erste Farbe: #FFFFFF
• Zweite Farbe: rgba(12,113,195,0.62)
• Verlaufstyp: Linear
• Verlaufsrichtung: 108deg
• Startposition: 31%
• Endposition: 21%

Linktext-Einstellungen

Verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Link-Schriftart: Andika
• Link-Schriftstärke: Fett
• Textgröße: 65px
• Textfarbe: #000000
• Textzeilenhöhe: 1em
• Textausrichtung: Links

Abstand

Wie die Desktop-Version benötigt dieses Navigationselement Textmodul eine obere und untere Auffüllung von '80px', um den Hintergrund mit Farbverlauf zu vergrößern.

Bildmodul

Bild hochladen

Fügen Sie zum Schluss ein Bildmodul als letztes Modul in Ihrer Reihe hinzu und laden Sie ein Bild Ihrer Wahl hoch.

Klonen Sie die erste Navigationszeile so oft wie nötig

Das gleiche gilt für die mobile Version; Sie können die gerade erstellte Zeile so oft wie nötig klonen, um auch die anderen Navigationselemente hinzuzufügen. Es gibt drei Dinge, die Sie jedes Mal ändern müssen, wenn Sie ein neues Navigationselement hinzufügen. Werfen wir einen Blick darauf.

Textmodul für Menüpunkt ändern

Link ändern

Als erstes müssen Sie den Text und den Link im Inhaltsfeld der Registerkarte Inhalt Ihres Navigationselement-Textmoduls ändern.

Hintergrund mit Farbverlauf je nach Textlänge ändern

Dann können Sie auch die zweite Verlaufsfarbe in 'rgba(224,43,32,0.62)' ändern und den Startpositionswert entsprechend der Länge Ihres Textes ändern.

Bildmodul ändern

Schließlich können Sie auch das Bild des Bildmoduls innerhalb dieser Zeile ändern.

Ergebnis

Sobald Sie sowohl die Desktop- als auch die mobile Version erstellt haben, haben Sie eine beeindruckende Navigationsseite, die auf Desktop, Tablet und Telefon gut aussieht. Werfen wir einen letzten Blick auf das Ergebnis.

Ergebnis auf dem Desktop

Ergebnis auf dem Handy

Abschließende Gedanken

Das Erstellen einer Navigationsseite als Ihre Startseite wird definitiv Spuren bei Ihren Besuchern hinterlassen. Es hilft Ihren Besuchern nicht nur visueller zu navigieren, sondern ermöglicht ihnen auch einen detaillierteren Einblick in das Angebot Ihrer Website. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von LanKogal / shutterstock.com