Lesefortschritt:

    Divi: Linie unter dem Header und bei der Sidebar entfernen

    3. Januar 2021 | CSS-Stylesheet, Divi-Theme

    Trick # 3 | Dieser Beitrag beinhaltet 454 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

    Divi zeigt in der Grundinstallation unter dem Header und am Rand der Sidebar eine feine Linie an. Das mag bei der Webentwicklung noch hilfreich sein, weil man immer gut sieht, welcher Teil der Website wie viel Platz beansprucht. Im Alltag möchte man aber auf die Trennlinien meist verzichten. Eine Einstellung im Divi-Theme sucht man allerdings vergeblich. Dennoch lassen sich die Linien ganz einfach ausblenden.

    Linie zur Sidebar entfernen

    Den folgenden Code fügen Sie in ihr CSS-Stylesheet ein. Sie können es aufrufen über Design/Customizer/Zusätzliches CSS.

    .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

    Wahrscheinlich möchten Sie auch die Linie unter dem Header loswerden. Nach gleichem Muster wie oben fügen Sie folgenden Code in Ihr CSS-Stylesheet ein:

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

    Beim Scrollen kann es vorkommen, dass plötzlich wieder ein Schatten beim Header erscheint. Wenn Sie dies nicht möchten, ergänzen Sie Ihr CSS-Stylesheet mit folgenden Zeilen.

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

    Simpel. Oder?

    Werbung

    Mit dem hr-Element Akzente setzen

    Das hr-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler hr lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This
    Überblick über den Datenschutz

    Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.