Erstellen eines beeindruckenden Navigations-Dashboards mit den neuen Spaltenstrukturen von Divi

Suchen Sie nach einer neuen und einzigartigen Möglichkeit, Ihre Homepage zu strukturieren? Das Erstellen eines Navigations-Dashboards könnte der richtige Weg sein. In diesem Tutorial zeigen wir Ihnen, wie Sie eine beeindruckende Dashboard-Seite erstellen, die Sie für viele Zwecke verwenden können.

Egal, ob Sie die Art und Weise ändern möchten, wie Nutzer auf Ihrer Seite navigieren, oder die Dienste Ihres Unternehmens hervorheben möchten, die Erstellung eines Dashboards hilft Ihnen dabei, genau das zu erreichen, was Sie sich vorgestellt haben. Wir verwenden nur die integrierten Optionen von Divi und darüber hinaus haben wir Ihnen sowohl eine helle als auch eine dunkle Farbpalette zur Verfügung gestellt, die Sie verwenden können. Dieses Tutorial ist von einem Design von Edoardo Mercati inspiriert.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen:

Farbpaletten

Bevor Sie beginnen, können Sie wählen, ob Sie ein helles oder dunkles Dashboard erstellen möchten. Die Farben, die Sie für jede Farbpalette benötigen, sind unten aufgeführt. Stellen Sie sicher, dass Sie diese Farbcodes in der Nähe haben, damit Sie sie verwenden können, sobald Sie das Tutorial durchgearbeitet haben. Wenn Sie eine Farbe verwenden, die für die Farbpalette spezifisch ist, beziehen wir uns auf die Farbnummer.

Hell

• Farbe #1: #f6f6f6 (Abschnittshintergrund)
• Farbe #2: #ffffff (Spaltenhintergrund)
• Farbe #3: #333333 (Titeltextfarbe)
• Farbe #4: #000000 (Teilerfarbe)
• Farbe #5: #6F6B68 (Körpertext-Farbtext)
• Farbe #6: #e5e5e5 (Spaltenhintergrund 2)
• Farbe #7: #ffffff (Hintergrundfarbe des Hintergrunds)

Dunkel

• Farbe #1: #141414
• Farbe #2: #212121
• Farbe #3: #ffffff
• Farbe #4: #ffffff
• Farbe #5: #dddddd
• Farbe #6: #212121
• Farbe #7: #333333

Gegenseitige Farben

• Farbe #7: #0457ff
• Farbe #8: #cc0432
• Farbe #9: #839e00
• Farbe #10: #c68e00

Beginnen wir mit dem Erstellen

Neuen Standardabschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, Ihrer Seite einen neuen Abschnitt hinzuzufügen. Öffnen Sie dann die Abschnittseinstellungen und fügen Sie eine Hintergrundfarbe hinzu:

• Hintergrundfarbe: Farbe #1 (In der Farbpalette finden)

Abstand

Um oben und unten zusätzlichen Platz zu schaffen, wenden wir auch einige benutzerdefinierte Auffüllungen an:

• Obere Polsterung: 100px
• Untere Polsterung: 100px

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem wir die Abschnittseinstellungen geändert haben, können wir mit dem Hinzufügen von Zeilen beginnen. Wählen Sie für Ihre erste Zeile die folgende Spaltenstruktur:

Spalte 1 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine Hintergrundfarbe für Spalte 1 hinzu:

• Spalte 1 Hintergrundfarbe: Farbe #2 (In der Farbpalette finden)

Größe

Gehen Sie als nächstes zum Tab Design und ändern Sie die Größeneinstellungen Ihrer Zeile:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Spaltenhöhen ausgleichen: Ja

Abstand

Schließlich fügen Sie der Zeile und der ersten Spalte etwas Auffüllung hinzu:

• Untere Polsterung: 100px
• Spalte 1 obere Polsterung: 100px
• Spalte 1 untere Polsterung: 100px
• Spalte 1 linker Abstand: 50px
• Spalte 1 rechts auffüllen: 50px

Titeltextmodul zu Spalte 1 hinzufügen

H1-Texteinstellungen

Zeit, Module hinzuzufügen! Wir beginnen mit dem Hinzufügen eines Titel-Textmoduls. Nachdem Sie Ihre H1-Kopie hinzugefügt haben, ändern Sie die Überschriftentexteinstellungen Ihres Moduls:

• Schriftstärke der Überschrift: Fett
• Ausrichtung des Überschriftentextes: Links
• Überschriftstextfarbe: Farbe #3 (In der Farbpalette finden)
• Überschriftstextgröße: 75px (Desktop), 55px (Tablet), 36px (Telefon)

Trennmodul zu Spalte 1 hinzufügen

Teilerfarbe

Fahren Sie direkt unter dem Titel-Textmodul fort und fügen Sie ein Trennmodul mit der folgenden Farbe hinzu:

• Teilerfarbe: Farbe #4 (In der Farbpalette finden)

Größe

Öffnen Sie als nächstes die Größeneinstellungen und passen Sie die Breite Ihres Teilers an:

• Breite: 27%

Abstand

Fügen Sie auch oben auf Ihrem Teiler etwas Platz hinzu:

• Oberer Rand: 50px

Beschreibungstextmodul zu Spalte 1 hinzufügen

Texteinstellungen

Das nächste und letzte Modul in dieser Zeile ist ein Beschreibungstextmodul. Nachdem Sie Ihren Inhalt hinzugefügt haben, ändern Sie die Textausrichtung in den Texteinstellungen:

• Textausrichtung: Begründen

Größe

Ändern Sie auch die Größeneinstellungen dieses Moduls:

• Breite: 80 % (Desktop), 100 % (Tablet & Telefon)

Abstand

Fügen Sie oben in Ihrem Modul mit benutzerdefiniertem Rand etwas Platz hinzu:

• Oberer Rand: 50px

Blurb-Modul zu Spalte 2 hinzufügen

Symbol

Wir können nun zur zweiten Spalte übergehen. Wir beginnen mit der Erstellung eines der Blurb-Module. Danach können wir dieses Modul klonen und entsprechend ändern. Nachdem Sie das Blurb-Modul hinzugefügt und den Inhalt geändert haben, wählen Sie ein Symbol Ihrer Wahl aus.

Hintergrundfarbe

Fahren Sie fort, indem Sie Ihrem Blurb-Modul eine Hintergrundfarbe hinzufügen:

• Hintergrundfarbe: Farbe #7 (In der Farbpalette finden)

Hintergrundmuster

Speichern Sie das folgende kleine Muster auf Ihrem Computer:

Laden Sie es zusammen mit den folgenden Einstellungen als Hintergrundbild hoch:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Wiederholen

Symboleinstellungen

Wechseln Sie zur Registerkarte Design, öffnen Sie die Bild- und Symboleinstellungen und ändern Sie die Einstellungen entsprechend:

• Symbolfarbe: Farbe #7 (In der Farbpalette finden)
• Kreissymbol: Ja
• Kreisfarbe: #FFFFFF
• Symbolschriftgröße verwenden: 33px

Texteinstellungen

Öffnen Sie dann die Texteinstellungen und nehmen Sie einige Änderungen vor:

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Der Titel unseres Blurb-Moduls erfordert ebenfalls einige zusätzliche Änderungen:

• Schriftstärke des Titels: Ultra Bold
• Titelschriftart: Großbuchstaben

Abstand

Fügen Sie zu guter Letzt einige benutzerdefinierte Polster hinzu, um Ihrem Blurb-Modul das gewünschte Aussehen und Gefühl zu verleihen:

• Obere Polsterung: 75px
• Untere Polsterung: 75px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Klonen Sie das Blurb-Modul dreimal und platzieren Sie 2 in der verbleibenden Spalte

Nachdem wir mit dem ersten Blurb-Modul fertig sind, können Sie es dreimal klonen. Lassen Sie eines der Duplikate in der ersten Spalte und fügen Sie die anderen beiden in die verbleibende Spalte der Zeile ein.

Neue Blurb-Module ändern

Icon ändern

Für jedes der Duplikate müssen Sie das verwendete Symbol ändern.

Hintergrundfarbe ändern

Ebenso müssen Sie die Hintergrundfarbe in eine Farbe Ihrer Wahl oder eine der Farben in der Farbpalette ändern (Farbe #8, #9 oder #10).

Symbolfarbe ändern

Ändern Sie die Symbolfarbe in dieselbe Farbe, die Sie für den Hintergrund verwenden.

Zeile 2 hinzufügen

Spaltenstruktur

Die zweite Zeile benötigt die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, gehen Sie zu den Größeneinstellungen und erhöhen Sie die Breite Ihrer Zeile:

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

Abstand

Öffnen Sie als nächstes die Abstandseinstellungen und fügen Sie am oberen und unteren Rand Ihrer Zeile benutzerdefinierten Abstand hinzu:

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

Textmodul hinzufügen

H2-Texteinstellungen

Das erste Modul, das Sie in der Spalte der Zeile benötigen, ist ein Titel-Textmodul. Ändern Sie nach dem Hinzufügen des H2-Inhalts die H2-Texteinstellungen:

• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textfarbe: Farbe #3 (in der Farbpalette finden)
• Überschriftstextgröße: 32px

Trennmodul hinzufügen

Teilerfarbe

Fügen Sie direkt unter dem Titel-Textmodul ein Trennmodul mit der folgenden Farbe hinzu:

• Farbe: Farbe #4 (In der Farbpalette finden)

Größe

Ändern Sie als nächstes die Breite des Teilers:

• Breite: 9%

Abstand

Fügen Sie zuletzt etwas Platz am oberen Rand Ihres Teilers hinzu:

• Obere Polsterung: 20px

Zeile 3 hinzufügen

Spaltenstruktur

Um die hervorgehobenen Funktionen zu teilen, wählen Sie die folgende Spaltenstruktur für Ihre neue Zeile:

Spaltenhintergrundfarbe

Öffnen Sie die Zeileneinstellungen und fügen Sie jeder Ihrer Spalten die folgende Hintergrundfarbe hinzu:

• Spaltenhintergrundfarbe: Farbe #6 (In der Farbpalette finden)

Größe

Erhöhen Sie als nächstes die Breite Ihrer Reihe:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Spaltenhöhen ausgleichen: Ja

Abstand

Und fügen Sie auch etwas Polsterung hinzu:

• Obere Polsterung: 100px
• Untere Polsterung: 100px

Blurb-Modul zu Spalte 1 hinzufügen

Symbol

Wir können jetzt mit dem Hinzufügen der verschiedenen Module beginnen. Wir beginnen mit einem Blurb-Modul in der ersten Spalte. Wählen Sie nach dem Hinzufügen des Inhalts ein Symbol Ihrer Wahl aus.

Hintergrundfarbe

Geben Sie Ihrem Blurb-Modul als nächstes eine Hintergrundfarbe:

• Hintergrundfarbe: Farbe #7 (In der Farbpalette finden)

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen:

• Symbolfarbe: #ffffff
• Kreissymbol: Ja
• Kreisfarbe: Farbe #7 (In der Farbpalette finden)
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 33px

Texteinstellungen

Ändern Sie auch die Textausrichtung Ihres Blurb-Moduls:

• Textausrichtung: Mitte

Einstellungen für Titeltext

Gehen Sie als nächstes zu den Titeltexteinstellungen und nehmen Sie einige Änderungen vor:

• Schriftstärke des Titels: Ultra Bold
• Titelschriftart: Großbuchstaben
• Titeltextfarbe: Farbe #3 (In der Farbpalette finden)

Textkörpereinstellungen

Der Fließtext des Blurb-Moduls benötigt ebenfalls eine andere Farbe:

• Textkörperfarbe: Farbe #5 (in der Farbpalette finden)

Abstand

Schließlich fügen Sie Ihrem Blurb-Modul einige benutzerdefinierte Abstandseinstellungen hinzu:

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

Schaltflächenmodul zu Spalte 1 hinzufügen

Tastenausrichtung

Fahren Sie direkt unter dem Blurb-Modul fort und fügen Sie ein Button-Modul hinzu. Öffnen Sie die Einstellungen und ändern Sie die Tastenausrichtung:

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändere als nächstes das Aussehen deiner Schaltfläche:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 15px
• Schaltflächentextfarbe: Farbe #3
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie auch unten in Ihrem Button-Modul etwas Rand hinzu:

• Unterer Rand: 30px

Blurb- und Button-Modul dreimal klonen und in verbleibende Spalten platzieren

Klone beide Module in der ersten Spalte dreimal und platziere sie in den restlichen Spalten deiner Reihe.

Neue Blurb-Module ändern

Icon ändern

Ändern Sie das Symbol jedes duplizierten Blurb-Moduls in ein neues Symbol Ihrer Wahl.

Symbolfarbe ändern

Ändern Sie auch die Symbolfarbe. Zögern Sie nicht, die Nummern #8, #9 und #10 der Farbpalette zu verwenden.

Zeile klonen

Zeile lokalisieren und klonen

Um alle Funktionen anzuzeigen, anstatt nur die hervorgehobenen, klonen wir die Zeile mit dem Titel.

Reihe platzieren

Dann platzieren wir es direkt unter der letzten Zeile, die wir erstellt haben.

Zeile klonen

Zeile lokalisieren und klonen

Machen Sie dasselbe mit der Zeile, die die markierten Blurb-Module enthält.

Reihe platzieren

Und platzieren Sie es unter Ihrem neuen Titel.

Spaltenstruktur ändern

Damit in dieser Zeile mehr Funktionen angezeigt werden, ändern wir die Spaltenstruktur in 5 statt 4 Spalten:

Hintergrundfarbe für Spalte 5 hinzufügen

Fügen Sie auch die Hintergrundfarbe der Spalte zu Ihrer neuen Spalte hinzu:

• Spaltenhintergrundfarbe: Farbe #6 (In der Farbpalette finden)

Blurb- und Button-Module klonen und in Spalte 5 platzieren

Klonen Sie eines der Blurb-Module in Ihrer Reihe und füllen Sie den Platz aus, indem Sie das Duplikat in Spalte 5 platzieren. Ändern Sie auch das Symbol und die Symbolfarbe.

5-Spalten-Zeile klonen

Zu guter Letzt klonen Sie diese 5-Spalten-Zeile, um zwei Zeilen mit allen Funktionen zu erstellen, die Sie anbieten möchten, und fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

Dashboards sehen gut aus und erleichtern Ihnen die Benutzerführung auf Ihrer Website. In diesem Beitrag haben wir ein atemberaubendes Dashboard-Design mit zwei Farbpaletten geteilt, das Sie nur mit den integrierten Optionen von Divi von Grund auf neu erstellen können. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!