Startseite / Projekte / Hauptmenü-Link als Button anzeigen

Hauptmenü-Link als Button anzeigen

Schritt 1: Füge dem Link, der als Button angezeigt werden soll unter Design > Menüs zuerst die Klasse dt-menu-cta hinzu.

Tipp: Falls du das Feld „CSS-Klassen (optional)“ nicht sehen solltest, kannst du oben rechts unterhalb der Werkzeugleiste deine Ansicht anpassen. Setze im Dropdown Menü unter „Erweiterte Menüeigenschaften anzeigen“ einfach das Häkchen bei „CSS-Klassen“. Dann solltest du das Feld sehen.

Schritt 2: Füge nun folgenden Code in das Stylesheet deines Child-Themes oder in den Custom-CSS Bereich im Divi Theme Customizer ein. Du kannst nun deinen Button sowie deine Menühöhe individuell im CSS anpassen.

/* Button Styling */
.dt-menu-cta a, .et-fixed-header #top-menu .dt-menu-cta a {
    background: #2ACCB3; /* Button Hintergrundfarbe hier austauschen */
    border-radius:25px 25px 25px 25px; /* Radius hier anpassen, oder Zeile komplett entfernen für eckigen Button */
    color:#fff !important;
    padding:12px 20px !important; /* Innenabstand des Buttons hier anpassen */
    opacity:1;
}

@media (min-width:981px) {
    /* Setzt den oberen und unteren Abstand des Hauptmenüs zurück */
    .et_header_style_left #et-top-navigation nav > ul > li > a, 
    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a,
    .et_header_style_split #et-top-navigation nav > ul > li > a {
        padding-bottom:0;
    }
    /* Korrigiert die Position des Suchicons */
    #et_search_icon:before {
        top:-10px;
    }
    /* Positioniert die Menülinks vertikal mittig */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        display: flex;
        align-items: center;
    }
    /* Hier Menühöhe anpassen */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        padding:25px 0 !important;
    }
    /* Hier Menühöhe für fixiertes Navgationsmenü anpassen (Menühöhe beim scrollen) */
    .et_header_style_left .et-fixed-header #et-top-navigation {
        padding:15px 0 !important;
    }
}

Endecke weitere Divi Codeschnipsel

Text vertikal in der Spalte zentrieren

Text vertikal in der Spalte zentrieren

Mit diesem Codeschnipsel kannst du Texte (oder auch andere Elemente) vertikal in der Spalte zentrieren. Das macht z.B. Sinn, wenn du links ein Bild hast und rechts davon einen Text vertikal zentriert anzeigen möchtest. Der Vorteil bei diesem Codeschnipsel gegenüber...

Chevron Divider einfügen

Chevron Divider einfügen

Mit diesem Codeschnipsel kannst du deiner Sektion als kleines optisches Detail einen Chevron-Divider hinzufügen. Der Chevron-Divider ist eine kleine Kerbe am oberen Rand einer Sektion, der den Besucher der Website visuell zur nächsten Sektion leiten soll. Insbesondere...

4 Kommentare

  1. Arndt Kollarczik

    Hi, super, würde mich über eine Ergänzung freuen … und eine Mail ebenso!

    Grüße, Arndt

    Antworten
    • Tobias

      Hallo Arndt,

      ich habe das Codeschnipsel nun korrigiert und getestet. Sollte funktionieren.
      Lass mich gerne wissen, ob es dir weitergeholfen hat.

      Viele Grüße,
      Tobias

      Antworten
  2. Arndt

    Guten Morgen.

    Ich bin erst heute auf Deine Seite aufmerksam geworden und finde Deine Idee toll! Hoffe sie wird weiter fortgeführt!

    Ich arbeite ähnlich wie Du und bin ebenfalls selbstständiger Webdesigner und (leider) erst vor kurzem auf DIVI aufmerksam geworden. Nun aber ein riesengroßer Fan!

    Vielleicht hättest Du Interesse daran, mal unsere Arbeiten untereinander auszutauschen um zu sehen, was der Andere so macht und ggf. wertvolle Tips und Tricks zu erfahren?

    Ach ja, fehlt zu diesem Code-Schnippsel nicht noch ein teil?

    Würde mich freuen!

    Viele Grüße aus dem Rheinland,
    Arndt

    Antworten
    • Tobias

      Hallo Arndt,

      vielen Dank für deinen Kommentar! Das freut mich, dass dir meine Tipps gefallen.

      Es ist nicht immer einfach, neben meinem Webdesigner Job den Blog regelmäßig mit neuen Tipps zu füttern,
      aber ich gebe mein Bestes und bin fest entschlossen, das ganze noch weiter auszubauen 🙂

      Besonders die Codeschnipsel sind sehr gefragt… dazu sollen demnächst auch noch weitere folgen.

      Ich finde es toll, dass du als selbstständiger Webdesigner ebenfalls Divi für deine Projekte nutzt.
      Gerne können wir uns dazu mal austauschen. Ich schreibe dir dazu mal eine PN.

      Und ja, du hast Recht. Das Codeschnipsel ist nicht vollständig.
      Ich korrigiere das schnellstmöglich.

      Danke für den Hinweis!

      Viele Grüße,
      Tobias

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hey, ich bin Tobias!

Portraitfoto von Tobias Both

Ich bin selbstständiger Webdesigner und der Gründer von Divitorials.

Seit rund einem Jahr veröffentliche ich auf diesem Blog Tutorials, Tipps und Tricks rund um das beliebte Divi Theme von Elegant Themes und teile meine Erfahrungen, die ich während meiner Arbeit als selbstständiger Webdesigner mit Divi sammeln konnte.

Mehr über mich erfahren