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:not(.dt-menu-cta) > a, 
    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a,
    .et_header_style_split #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a {
        padding-bottom:0 !important;
    }
    /* 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

Offenes mobiles Menü Icon ändern

Offenes mobiles Menü Icon ändern

Standardmäßig wird das mobile Divi Menü Icon, das sogenannte Burger-Icon, sowohl bei geschlossenem als auch geöffnetem Menü angezeigt. Mit diesem Codeschnipsel kannst du das Icon für das geöffnete Menü ganz einfach ändern. Hier ein Live-Beispiel: [video width="326"...

Logo beim Scrollen ändern

Logo beim Scrollen ändern

Mit diesem Codeschnipsel kannst du dein Logo beim Scrollen ändern. /* Ändert das Logo beim Scrollen */ .et-fixed-header #logo { content: url(hier neue Bild-URL eintragen); } Das kann z.B. sinnvoll sein, wenn dein Hauptmenü transparent und dein Logo weiß ist und sich...

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.

Du nutzt noch kein Divi Child-Theme?

Dann hol dir mein fertiges Divi Basis-Child Theme als perfekte Basis für deine Divi Website!

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