• Flexbox-Containermodus aktivieren
  • Theme Builder → Header → Hinzufügen 
  • Über + einen vertikalen Container hinzufüge
  • Den Container stylen
  • Layout: Volle Breite
  • Breite in px, Höhe 100 vh
  •  und positioniere den Header fixiert mit einer hohen Z-Ebene.
  • Ich füge das Website-Logo und das Menü zum Header hinzu.
  • Ich bearbeite das Menü, um den Text vertikal anzuzeigen, und ändere das Styling des Menüs und des Logos.
  • Für die responsive Ansicht passe ich den Header an die Tablet- und Mobilgeräte an.
  • Ich füge benutzerdefiniertes CSS hinzu, um den Header für die mobile Ansicht anzupassen.
  • Ich füge auch benutzerdefiniertes CSS hinzu, um den Seitenrand für die linke Seite zu erhöhen.
  • Schließlich aktualisiere ich die Website und überprüfe, ob der Header korrekt angezeigt wird.
  • Wenn euch das Tutorial geholfen hat, freue ich mich über einen Daumen nach oben und euer Abonnement meines Kanals.
  • Wenn ihr an einem WordPress-Projekt mit mir arbeiten möchtet, könnt ihr mich über meine Website kontaktieren.
https://farjana-rashid.com/create-simple-vertical-header-in-elementor/#css_code

CSS-Schnipsel:

  • Für responsive Ansicht: 


@media all and (max-width: 767px){

    selector{

    writing-mode: horizontal-tb;

    transform: scale(1);

}

}

Ich werde dir zeigen, wie du diesen vertikalen Menübereich mit der Elementor Pro-Version für diese Website erstellen kannst. Standardmäßig wurde ein Header wie dieser angezeigt, der horizontal angeordnet war. Hier zeige ich dir, wie du einen benutzerdefinierten Header vertikal wie diesen erstellen kannst. Für dieses Tutorial verwende ich die Elementor Pro-Version und ein wenig CSS-Code. Wenn dir das gefällt und du mehr wertvolle Tutorials sehen möchtest, gib diesem Video einen Daumen hoch. Andernfalls wirst du das nächste Mal kein solches wertvolles Tutorial finden. Wenn du neu hier bist und mehr meiner zukünftigen Videos sehen möchtest, vergiss nicht, meinen Kanal zu abonnieren. Jetzt wollen wir loslegen.

Zuerst gehe ich zum Dashboard und dann zu Elementor und Einstellungen. Von dort aus aktiviere ich den Flexbox-Container-Modus in den Experimenten. Anschließend erstelle ich unseren benutzerdefinierten Header, indem ich zu „Templates“ und „Theme Builder“ gehe. Ich füge einen neuen Header hinzu und wähle eine vertikale Ausrichtung aus. Ich ändere die Höhe auf die volle Bildschirmhöhe und die Breite auf 100 Pixel. Dann ändere ich die Hintergrundfarbe in eine dunkle Farbe.

Als nächstes füge ich die Elemente (Logo und Menü) in den Header ein. Ich füge das Website-Logo und das Menü hinzu. Für das Menü wähle ich das gewünschte Menü aus. Ich richte die Elemente im Header mit Abstand dazwischen aus und füge etwas Padding oben und unten hinzu.

Für das Menü ändere ich die Textausrichtung vertikal und zentriere es. Ich ändere die Textfarbe, Hintergrundfarbe und füge einige Anpassungen hinzu. Für das Logo ändere ich die Breite.

Zum Schluss passe ich den Header für die Ansicht auf Mobilgeräten an. Für Tablets bleibt die Ansicht unverändert, während ich für Mobilgeräte die Höhe des Containers ändere und das Logo links und das Menü rechts ausrichte. Ich ändere auch die Hintergrund- und Textfarben für das Dropdown-Menü.

Abschließend veröffentliche ich die Änderungen und überprüfe die Website, um sicherzustellen, dass der Header ordnungsgemäß funktioniert.

Nachdem wir die Anpassungen vorgenommen haben, können wir sehen, dass der Header auf der linken Seite der Website angezeigt wird und beim Scrollen fixiert bleibt. Es gibt jedoch noch ein Problem: Der Inhalt der Seite wird auf der linken Seite verdeckt. Um das zu beheben, gehen wir zur Bearbeitung der Seite mit Elementor.

In den Seiteneinstellungen wählen wir den Reiter „Erweitert“ aus. Da es keine Option für Padding oder Margin gibt, müssen wir hier benutzerdefinierten CSS-Code verwenden. Wir fügen den CSS-Selektor hinzu und geben die gewünschten linken Abstandswerte an, basierend auf der Breite unseres Headers.

Nachdem wir die Änderungen gespeichert haben, können wir die Seite neu laden und den vollen Inhalt der Seite sehen.