So erstellen Sie eine Navigations-Homepage mit Divi

Veröffentlicht: 2017-11-12

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

Ergebnis auf dem Handy

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

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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%“.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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

Navigationsseite

Navigationsseite

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.

Navigationsseite

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

Navigationsseite

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'.

Navigationsseite

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.

Navigationsseite

Größe

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

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

Navigationsseite

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.

Navigationsseite

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%

Navigationsseite

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

Navigationsseite

Navigationsseite

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

Navigationsseite

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.

Navigationsseite

Textmodul für Menüpunkt ändern

Link ändern

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

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

Sichtweite

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

Navigationsseite

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

Navigationsseite

Navigationsseite

Größe

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

Navigationsseite

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.

v

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.

Navigationsseite

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%

Navigationsseite

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

Navigationsseite

Navigationsseite

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

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.

Navigationsseite

Bildmodul ändern

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

Navigationsseite

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

Navigationsseite

Ergebnis auf dem Handy

Navigationsseite

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