So erstellen Sie eine feste 4-Ecken-Navigation mit Divi

Ein einzigartiges Navigationsdesign kann jeder Website einen kleinen Vorteil verleihen. Die feste 4-Ecken-Navigation ist beispielsweise eine gute Möglichkeit, den Zuschauern mehr Möglichkeiten zu geben, mit dem Design Ihrer Website zu interagieren. Tatsächlich fügt es Ihrem UX-Design auf der gesamten Website eine weitere Ebene hinzu.

In diesem Beitrag zeigen wir Ihnen, wie Sie Ihre eigene feste 4-Ecken-Navigation erstellen. Wir erklären, wie Sie zwei leicht unterschiedliche Stile erstellen, aber dies sind nur die Spitze des Eisbergs. Da die Navigation mit den integrierten Elementen von Divi erstellt wird, sind die Anpassungsmöglichkeiten endlos.

Wir hoffen, dass diese Idee Sie dazu inspirieren wird, erstaunliche 4-Ecken-Navigationsdesigns für Ihre bevorstehenden Divi-Projekte zu erstellen.

Lass uns anfangen.

Vorschauen

Werfen wir einen kurzen Blick auf die 4-Eck-Navigation, die wir heute erstellen werden. Der erste Stil platziert die Schaltflächen am Rand des Bildschirms und der andere hat einen inneren Schwebekörper.

Stil #1

Stil #2

Abonnieren Sie unseren Youtube-Kanal

Erstellen Sie eine neue leere Seite

Öffnen Sie eine neue Seite und wählen Sie vor der Bearbeitung mit Divi 'Leere Seite' in den Seitenattributen. Danach aktivieren Sie den Divi Builder.

Landingpage-Layout für Kryptowährung hochladen

Laden Sie im Divi Visual Builder die Landingpage des Cryptocurrency Layout Packs von der Registerkarte Premade Layouts hoch.

2. Erstellen Sie einen neuen Abschnitt mit einer 4-Spalten-Zeile

Hinzufügen eines neuen regulären Abschnitts mit 4-Spalten-Zeile

Um die 4 Navigationselemente zu erstellen, benötigen wir einen neuen Abschnitt mit einer 4-spaltigen Zeile. Scrollen Sie ganz zum Ende der Seite und fügen Sie einen neuen regulären Abschnitt hinzu. Wählen Sie dann eine Zeile mit 4 gleich großen Spalten aus.

Entfernen Sie die Standardfüllung des Abschnitts

Stellen Sie vor dem Hinzufügen von Modulen sicher, dass Sie die Auffüllung des Abschnitts entfernen, indem Sie '0px' oben und unten hinzufügen. Überprüfen Sie auch, ob der Abschnitt keine Hintergrundfarbe oder keinen Verlaufshintergrund hat.

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

Erhöhen Sie den Z-Index

Wir möchten, dass dieser Abschnitt beim Scrollen über allen anderen steht. Deshalb müssen wir den Z-Index-Wert des Abschnitts erhöhen. Öffnen Sie dazu die Registerkarte Erweitert, gehen Sie zu den Sichtbarkeitseinstellungen und erhöhen Sie den Z-Index.

• Z-Index: 10

3. Passen Sie die Größe der Reihe an

Als Nächstes müssen wir die Größeneinstellungen der Zeile anpassen. Öffnen Sie die Registerkarte Design und passen Sie die Einstellungen entsprechend an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Nein
• Breite: 100%
• Maximale Breite: 100%

Entfernen Sie die Standardfüllung der Zeile

Entfernen Sie den Standardabstand der Zeile, um sicherzustellen, dass am unteren Rand unserer Seite kein Platz verbleibt. Ändern Sie auf der Registerkarte Design die Eingaben für den Abstand auf '0px' für den oberen und unteren Abstand.

Module zu den Spalten hinzufügen.

Jetzt ist es an der Zeit, jeder Spalte einige Module hinzuzufügen, beginnend von links nach rechts.

• Spalte 1: Bild
• Spalte 2: Schaltfläche
• Spalte 3: Social Media Follow
• Spalte 4: Schaltfläche

4. Stylen Sie jede Spalte

Spalte #1 – Bildmodul

Firmenlogo hinzufügen

Öffnen Sie das Bildmodul in Spalte #1. Laden Sie Ihr Logo hoch (Breite 220 Pixel und Höhe 100 Pixel). Stellen Sie sicher, dass es sich um ein transparentes Bild handelt, bei dem das Logo zentriert ist.

Ausrichten des Moduls

Wir möchten, dass das Logo in der oberen linken Ecke unserer Seite platziert wird, daher müssen wir das Modul nach links ausrichten. Öffnen Sie die Registerkarte Design im Bildmodul und wählen Sie linke Bildausrichtung.

• Ausrichtung: links

Fügen Sie benutzerdefiniertes CSS hinzu, um die Position des Moduls zu korrigieren

Um sicherzustellen, dass die Position des Moduls fest bleibt, gehen Sie zur Registerkarte Erweitert und fügen Sie benutzerdefiniertes CSS zum Hauptelement hinzu.

position: fixed;
top: 0;
left: 0;

Spalte #2 – Schaltfläche

Schaltfläche hinzufügen

Fügen Sie nun in Spalte 2 ein Schaltflächenmodul hinzu.

Style den Button

Fügen Sie auf der Registerkarte Inhalt Text für Ihre Schaltfläche hinzu.

• Inhaltstext: Mine für Bitcoin

Wählen Sie als Nächstes auf der Registerkarte Design die linke Tastenausrichtung aus.

• Ausrichtung: links

Schieben Sie danach die benutzerdefinierten Schaltflächenstile auf Ja und passen Sie die Werte entsprechend an:

• Benutzerdefinierte Schaltflächenstile: Ja
  • Schaltflächentextgröße: Desktop; 25px, Tablet: 20px, Telefon:20px
  • Schaltflächentextfarbe: Weiß, #ffffff
  • Schaltflächenhintergrundfarbe: Farbverlauf
    • Obere Farbe: # 1c076d, Untere Farbe: # 185475
    • Verlaufstyp: Linear
  • Schaltflächenrandradius: 7 px
  • Button-Schriftart: Tantillium Web (entspricht dem Layout)
  • Schaltflächensymbol anzeigen: Ja
  • Schaltflächensymbol: Verkehrskegel
  • Farbe des Schaltflächensymbols: Weiß, #ffffff
  • Platzierung der Schaltflächensymbole: Rechts

Fügen Sie benutzerdefiniertes CSS hinzu, um die Position des Moduls zu korrigieren

Öffnen Sie schließlich die Registerkarte Erweitert und fügen Sie benutzerdefiniertes CSS hinzu, um die Position des Moduls in der unteren linken Ecke der Seite festzulegen.

position: fixed;
bottom: 0;
left: 0;

Spalte #3 – Social Media Follow

Fügen Sie ein Social Media Follow-Modul hinzu

Weiter zur dritten Spalte. Dieses Mal benötigen wir ein Social Media Follow-Modul. Fügen Sie drei soziale Netzwerke Ihrer Wahl hinzu.

Wählen Sie als Nächstes auf der Registerkarte Design die richtige Modulausrichtung.

• Ausrichtung: Rechts

Style die Social Media Icons

Öffnen Sie die individuellen Einstellungen des ersten sozialen Netzwerks, gehen Sie zum Design-Tab und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: Weiß #ffffff
• Benutzerdefinierte Symbolgröße verwenden: Ja
  • Symbolschriftgröße: Desktop; 25px, Tablet: 20px, Telefon:20px
• Hintergrund: Keine

Kopieren Sie die Artikelstile und fügen Sie sie ein

Gehen Sie zurück zum Hauptfenster von Social Media Follow, klicken Sie mit der rechten Maustaste auf das erste Element und wählen Sie "Elementstile kopieren". Klicken Sie dann mit der rechten Maustaste auf die beiden verbleibenden sozialen Netzwerke und fügen Sie die Stile ein.

Benutzerdefiniertes CSS zum Modul hinzufügen

Fügen Sie schließlich auf der Registerkarte Erweitert den folgenden CSS-Code hinzu, damit das Modul in der oberen rechten Ecke der Seite angezeigt wird:

position: fixed; 
top: 0; 
right: 0;

Spalte #4 – Schaltfläche

Kopieren Sie die Modulstile aus Modul #2 und passen Sie sie an

Damit die Schaltfläche in Modul #4 genauso aussieht wie die Schaltfläche in Modul #2, verwenden wir die Option 'Modulstile kopieren'. Klicken Sie zuerst mit der rechten Maustaste auf das Schaltflächenmodul in Spalte 2, klicken Sie auf "Modulstile kopieren" und fügen Sie es dann in das Schaltflächenmodul in Spalte 4 ein.

Jetzt ist es an der Zeit, die Einstellungen auf der Registerkarte Inhalt zu ändern. Ändern Sie zunächst den Textinhalt.

• Text: von „Mine for Bitcoin“ bis „Lesen Sie unseren Blog“

Ändern Sie dann die Tastenausrichtung.

• Ausrichtung: Von links nach rechts

Ändern Sie schließlich den benutzerdefinierten CSS-Code auf der Registerkarte Erweitert:

• Ändern Sie den Code in:

position: fixed; 
bottom: 0; 
right: 0;

Ergebnis

5. Ändern Sie das benutzerdefinierte CSS, um das zweite Stilbeispiel zu erreichen

Im ersten Stilbeispiel werden die Ecken an die Ecken geklebt. Um den zweiten Stil zu erhalten, müssen Sie nur den CSS-Code so anpassen, dass die Eckmodule ein wenig nach innen schweben.

Passen Sie einfach das benutzerdefinierte CSS auf der Registerkarte "Erweitert" aller vier Module an

Modul 1

position: fixed; 
top: 1vw; 
left: 1vw;

Modul#2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Modul#3

position: fixed; 
top: 3vw; 
left: 2vw;

Modul#4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Endergebnis

Abschluss

Dieses Tutorial streift nur die Oberfläche dessen, was Sie mit der festen 4-Ecken-Navigation mit Divi tun können. Letztendlich können Sie für jede Spalte ein beliebiges Modul auswählen, solange Sie das von uns bereitgestellte benutzerdefinierte CSS beibehalten. Wir hoffen, dass dieses kreative Tutorial Sie dazu inspiriert, Ihre eigene feste 4-Ecken-Navigation zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!