Divi Theme: Linie zum Header und zur Sidebar entfernen

von | Tutorial

Auch wenn man das Design des Divi Themes gut anpassen kann, so gibt es doch einige Elemente, die sich nicht über die Einstellungen anpassen lassen. Das gilt auch für die Trennlinie zur Sidebar und die Linie unter dem Header.

WordPress Divi Theme: Sidebar und Header Linie entfernen

Wer eine dieser Linien oder auch beide entfernen will, muss das CSS-Stylesheet verändern. Das ist im Grunde kein Hexenwerk, aber vorher sollte man ein Child Theme des Divi Themes angelegt haben.

Linie zur Sidebar entfernen

Das geht recht einfach. Man muss dabei berücksichtigen, dass die Sidebar und damit auch die Trennlinie in unterschiedlichen Fällen eingeblendet wird. Zunächst einmal kann die Sidebar rechts oder links oder auch beidseitig angezeigt werden. Darüber hinaus lässt sich auch eine extra Sidebar über den Divi Builder einblenden.

Um das zu unterbinden, muss man nur in die style.css des angelegten Child Themes folgenden Code einfügen:

.container:before { background-color:transparent !important; }
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Linie unter dem Header entfernen

Die Linie unter dem Header lässt sich ähnlich leicht entfernen. Im Grunde handelt es sich hierbei um keine echte Linie, sondern um einen Schatten. Auch hierbei gilt es wieder mehrere Varianten zu berücksichtigen: einmal den Standard Header des Divi Themes und einmal den nach dem Scrollen angepassten Header. In den Standardeinstellungen wird der Header beim Scrollen etwas schmaler und das angezeigte Logo etwas kleiner. Das genaue Verhalten lässt sich in den Designmodifikationen im Bereich „Header & Footer“ in den Optionen „Primäre Menüleiste“ und „Festgelegte Navigationseinstellungen“ bestimmten.

Um die Linie bzw. den Schatten vom Standardheader zu entfernen, fügt man folgenden Code in die style.css des Divi Child Themes ein:

#main-header{
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

Damit beim angepassten Header beim Scrollen nicht plötzlich wieder ein Schatten erscheint, muss zusätzlich noch folgenden Code in die style.css eingefügt werden:

#main-header.et-fixed-header {
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

Andere Möglichkeiten: Plugins

Wer sich scheut diese Anpassungen in der style.css selbst vorzunehmen oder es lieber etwas bequemer hat, kann beide Optionen mit Hilfe des Divi Booster Plugins einfach für das Divi Theme nachrüsten.

6 Kommentare

  1. Eva

    Hi, ich habe gerade eine Dankeseite entworfen, für alle die sich in den Newsletter eintragen. Aber jetzt erscheint die Überschrift oben in der Leiste neben dem Homebutten als „normale“ Seite, praktisch da, wo bei Euch die Sample Page steht. Wie kann ich das ändern?

    Antworten
    • Nils

      Hi Eva,

      das kannst du in den Menüeinstellungen verändern. Diese findest du im Admin unter

      „Design“ > „Menüs“

      Oder im Designmodifikator ebenfalls unter „Menüs“.

      Antworten
      • Eva

        Hi Nils, ja danke. Dein Tip war hilfreich, habe es in der Navigationsleiste abschalten können. Merci!

        Antworten
  2. Vize

    Hallo Nils,
    alles sehr gut und ausführlich erklärt, Danke dafür!
    Ist es möglich das Logo größer zu machen als der Header hoch ist?
    Ich sehe bei Webseiten oft, dass das Logo nach unter größer ist und die nächste Sektion etwas überlagert. Kann man das mit Divi auch machen?

    Grüße aus Niederbayern
    Vize

    Antworten
  3. MO

    ganz lieben Dank, genau danach habe ich gesucht und ich habe es alleine hinbekommen. Ganz stolzbin*

    Antworten

Einen Kommentar abschicken

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