• Gelöst sirhannes

    (@sirhannes)


    Hi.

    Ich benutze das aktuellste WordPress und das aktuellste Make-Theme und bin soweit mit allem fertig und zufrieden. Als letztes möchte ich meine Startseite simpel halten und das Hauptmenü (Primary Navigation), das 2te Menü (Header Bar Navigation) und den Footer deaktivieren.
    Im Customizer von Make kann ich nur sagen: Startseite ja und welche.
    Im Page-Builder bzw. unter „Seiten“ habe ich nur Zugriff auf Widgets, die ich nicht brauche.
    Aus meiner Recherche hier im Forum weiß ich, dass ich mit dem .home Kommando eingreifen kann. Momentan konnte ich nur herum probieren, das hat nicht viel gebracht, daher bitte ich euch Experten um Rat.

    Freue mich auf Hilfe.

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Kennst du schon die Webentwickler-Tools deines Browsers?

    In jedem aktuellen Browser kannst du mit einem Rechtsklick und Klick auf Element untersuchen/Untersuchen/Element Informationen (die Browser verwenden einen unterschiedlichen Begriff) ein Fenster mit Informationen zur Programmierung deiner Webseite sehen. Im ersten Tab („Inspektor“ bei Firefox, „Elements“ bei Chrome und Safari) siehst du in der linken Spalte das HTML und rechts daneben das zugehörigen CSS.

    Im <body>-Tag findest du bei Aufruf der Startseite (und nur dort) die CSS-Klasse home, die du dann als Selektor (eine Art Auswahl-Kriterium) für CSS-Regeln verwenden kannst, die ausschließlich die Startseite betreffen sollen – also z.B. wenn auf der Startseite etwas verschwinden soll, auf anderen Seiten aber nicht.

    Als nächstes machst du dann einen Rechtsklick auf dein Header-Menü und klickst wieder „Element untersuchen“ and. Die siehst dann, dass das Menü in einem Container mit dem HTML-Tag <nav class="header-navigation" role="navigation"> steckt. Die CSS-Regel, um diese Navigation auszublenden heißt dann
    .home .header-navigation { display: none; }. Das kannst du übrigens auch in den Entwickler-Tools gleich testen, in dem du in der rechten Spalte das „+“ anklickst, den Selektor .home .header-navigation und in der geschwungenen Klammer die Regel display:none; einfügst.

    Möchtest du nun z.B. den ganzen Header ausblenden, musst du im HTML-Gerüst etwas weiter hoch steigen, bis du bei <header id="site-header" class="site-header header-layout-1" role="banner"> landest. Die CSS-Regel lautet also .home .site-header { display:none; }.

    Das ganze führst du dann für alle weiteren Elemente der Startseite fort. Da wir für verschiedene Elemente die gleiche CSS-Regel display:none; verwenden, können wir die Selektoren (.home .header-navigation, .home .site-navigation und .home .site-footer) mit einem Komma getrennt zusammenfassen. Das sieht dann so aus:

    .home .header-navigation,
    .home .site-navigation,
    .home .site-footer {
      display: none; 
    }

    Die CSS-Regeln trägst du im Customizer unter Zusätzliches CSS ein.

    Eine Einführung in CSS findest du z.B. beim Mozilla Developer Network.

    Durch die CSS-Regeln werden die Header- und Site-Navigation sowie der komplette Footer ausgeblendet, aber sie werden trotzdem in den Browser geladen, was unnötig das Datenvolumen erhöht. Besser wäre es deshalb, ein Child Theme zu erstellen und darin die Templates entsprechend anzupassen. Das setzt zusätzliche Kenntnisse in PHP voraus.

    Übrigens hat so ein Navigationsmenü auf der Startseite auch einen ganz praktischen Effekt: Besucher der Website können auch weitere Seiten aufrufen.

    Thread-Starter sirhannes

    (@sirhannes)

    Lieber Begio Mario Grande,

    ich danke Dir sehr für diese ausführliche Antwort. Mit den Infos und Links kann ich mir alles weitere selber aneignen. Die Menüs sind erfolgreich ausgeblendet – und darüber hinaus mehr, was ich dank Deiner Anleitung mit dem Inspektor in Safari selbst finden und ins CVV schreiben konnte.

    Beste Grüße
    Johannes

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Das Thema „Menüs und Footer von Startseite nehmen?“ ist für neue Antworten geschlossen.