Twenty Seventeen Header auf Seiten und Beiträgen

von

am

|

geschätzte Lesezeit:

4 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Seit WordPress Version 4.7 gibt es nun auch das neue Standardtheme Twenty Seventeen, und das kann sich durchaus sehen lassen. Das WordPress Team betont, dass sich Twenty Seventeen vor allem für Unternehmenswebsites eigne. Denn das Theme bietet zum Beispiel eine Startseite, die bis zu vier einzelne Seiten in den Fokus rückt. Deren Beitragsbilder stellt die Startseite dabei genauso wie das Headerbild (oder Headervideo) in voller Fenstergröße dar. Das wirkt sehr repräsentativ, erfordert aber natürlich auch Bilder von entsprechender Qualität. Auf allen weiteren Seiten hingegen bleibt von dem Headerbild nur noch ein sehr schmaler Ausschnitt übrig. Tatsächlich zeigt der dann kaum noch etwas von dem Bildinhalt. Ganz übel wird es, sofern es einer wagt, mit dem Internet Explorer darauf zu schauen. Der zeigt dann nur den untersten Bildausschnitt. Statt Blumentopf gibt es nur Tisch zu sehen. Wie also lässt sich der Twenty Seventeen Header auf Seiten und Beiträgen ausblenden oder anpassen?

Twenty Seventeen Header auf Seiten und Beiträgen ausblenden

Wenn wir den Header auf Seiten und Beiträgen ausblenden, soll die Startseite davon natürlich unberührt bleiben. Twenty Seventeen unterscheidet in der Tat bereits aus sich selbst heraus unterschiedliche Darstellungsweisen. So hat es zum Beispiel Definitionen, die sich auf den Fall beziehen, dass Sie ganz auf ein Headerbild verzichten, dieses also gar nicht im Rahmen des Customizers hinterlegen. Dann zeigt das Theme nur den Seitentitel und die Seitenbeschreibung in einem entsprechend schmalen Bereich auf weißem Grund an. Für den Unterschied zwischen den Zuständen hat einen Header und hat keinen Header gibt es also schon eine passende Klasse: .has-header-image. Da der Header statt eines Bildes auch ein Video zeigen kann, existiert auch die Klasse .has-header-video. Geht es um das große Kopfzeilenbild auf der Startseite, dann heißt es .twentyseventeen-front-page.has-header-image. Im Gegensatz dazu spricht die Definition .has-header-image:not(.twentyseventeen-front-page):not(.home) alle weiteren Seiten an.

CSS-Angaben

Wollen Sie nun also den Twenty Seventeen Header auf Seiten und Beiträgen ausblenden, braucht es nur eine Definition, die Sie im Rahmen des benutzerdefinierten CSS des Themes eingeben:

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
display: none;
}

Zudem brauchen Sie nun noch eine Definition für die Schriftfarbe des Seitentitels und der Seitenbeschreibung. Bisher waren Titel und Beschreibung weiß. Auf weißem Grund jedoch braucht es nun eine andere Farbe. Ich schlage ich einen Grauton vor, aber es wäre natürlich auch jede Farbe des Regenbogens möglich.

body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-title, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-title, body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-title a, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-title a, body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-description, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-description {
color: #a2a2a2;
}

Das Ergebnis ist dann eine sehr schlichte Seite:

Twenty Seventeen ohne Header auf Seiten und Beiträgen
Twenty Seventeen ohne Header

Twenty Seventeen Header auf Seiten und Beiträgen mit 50 Prozent Fensterhöhe

Überdies besteht natürlich auch die Möglichkeit, den Twenty Seventeen Header auf Seiten und Beiträgen anzupassen. Sagen wir also, das Bild soll 50 Prozent der Fensterhöhe ausmachen. Dann bleibt immer noch genug Bildinformation übrig. Andererseits müssen Besucher der Website nicht auf jeder Seite so weit nach unten scrollen, um überhaupt einen Eindruck vom Content zu erhalten.

Der übliche Verdächtige: Internet Explorer

Dieser Eingriff ist allerdings um einiges umfangreicher. Vor allem, wenn man möchte, dass das Ganze auch noch einigermaßen gut mit dem aktuellen Internet Explorer aussieht. Weil der (mal wieder) eine sehr wesentliche Eigenschaft nicht versteht, die bei anderen Browsern für die Größenanpassung des tatsächlichen Bildes sorgt, braucht er eine Extrawurst. Statt object-fit lautet das Vorgehen nun transform: translate. Wegen der Änderungen in Hinblick auf den neuen 50 Prozent Header sind auch ein paar Anpassungen in Sachen Startseite nötig. Somit ist das schon ein relativ weitgehender Eingriff, den man sich nicht mal eben so erschließt. Letztlich gestaltet sich das Ganze derart komplex, sodass man meines Erachtens nicht mehr von einem Theme für Einsteiger sprechen kann.

CSS-Angaben

/* Setzt den Header für Archive, Beiträge und Seiten, die nicht Startseite sind, auf 50 Prozent Fensterhöhe (Desktop) */
@media screen and (min-width: 48em) {
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
height: 1200px;
height: 50vh;
max-height: 50%;
overflow: hidden;
}
} 

/* Sorgt dafür, dass der IE auf Seiten und Beiträgen den passenden Bildausschnitt zeigt*/
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
max-width: 100%;
top: 0;
left: 0;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

/* Lösung für Browser, zum Beispiel den Internet Explorer, die kein object-fit verstehen */
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
bottom: auto;
position: absolute;
top: 40%;
left:0;
-moz-transform: translate(0, -40%);
-webkit-transform: translate(0, -40%);
transform: translate(0, -40%);
}

/* Sorgt dafür, dass der IE das Startseiten-Headerbild nicht verzerrt */
.twentyseventeen-front-page.has-header-image .custom-header-media img,
.twentyseventeen-front-page.has-header-video .custom-header-media video,
.twentyseventeen-front-page.has-header-video .custom-header-media iframe {
position: fixed;
left: 50%;
max-width: 250%;
min-height: 100%;
min-width: 100%;
min-width: 100vw; 
width: auto;
top: 50%;
padding-bottom: 1px; 
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

Wenn Google Chrome oder Internet Explorer 11 darauf schauen, sieht das Ganze dann so aus:

Twenty Seventeen Header Video

Wenn Sie als Header ein mp4-Video hochladen oder ein Youtube-Video einbinden, zeigt Twenty Seventeen diese sowieso nur auf der Startseite. Auf allen allen Seiten nutzt das Theme entweder das gewählte Bild oder – sofern Sie keins hinterlegt haben – die Variante ohne Bild, sprich: nur Seitentitel und Seitenbeschreibung. Ähnliches gilt für die Mobilansicht: Sofern Sie ein Video als Header nutzen und ein Bild hinterlegt haben, zeigt das Smartphone auf der Startseite das Bild. Ohne hinterlegtes Bild bleibt die mobile Ansicht schlicht.


Beitragbilder: Britta Kretschmer

27 Antworten zu „Twenty Seventeen Header auf Seiten und Beiträgen“

  1. AndreasL.

    Hallo Britta,
    ein sehr interessanter Artikel. Besten Dank !

    Ich würde gerne die Eigenschaften der Startseite (FullScreen oder Video und 4 einzelne Seiten anhängen) auch auf weitere Seiten des Internetauftritts ausweiten.

    Hälst Du das für realisierbar ?
    Über eine Rückinfo würde ich mich freuen

  2. Hallo Andreas,

    spontan halte ich es durchaus für machbar, andere Seiten wie die Startseite aussehen zu lassen. Das bräuchte zuerst einmal ein eigenes Template, das sich an dem orientiert, das für die Startseite zuständig ist. Und das findest du im Unterordner /pages. Im Detail sind da aber sicher einige Anpassungen nötig, damit das Ganze in deinem Sinne funktioniert.

    LG, bk

  3. Hallo Britta,

    ein sehr guter Artikel. Vielen Dank für die vielen Tipps.
    Eine Frage hätte ich noch. Ich möchte beim Twenty Seventeen die Breite der Texte vergrößern (also breiter machen) und die Breite der Überschrift deutlich reduzieren.

    Mir geht es darum, dass der Platz der Überschrift (links) viel zu groß ist und der ganze Text rechts daneben sehr gequestscht wird.

    Haben Sie hier einen Tipp, wie ich das am besten bearbeiten kann?

    Vielen Dank und beste Grüße
    Peter S.

  4. Hallo Peter,

    wie es der Zufall so will, habe ich über die Gestaltung von Seiten des neuen Standardthemes jüngst geschrieben: https://www.internetkurse-koeln.de/twenty-seventeen-sidebar-auf-seiten-einrichten/ Da geht es auch um die Definition der Breiten von Contentbereich und Sidebar. Zu breit sollte der Contentbereich übrigens nicht sein, sonst ist der Text nicht mehr gut lesbar.

    LG, bk

  5. Tim

    Hallo,
    sehr schöner und hilfreicher Beitrag. Ist es auch möglich, auf allen „Nicht-Startseiten“ die oberen 50% des headers anzuzeigen? (möglichst bei allen Browsern)

    (habe gar keine Erfahrung mit CSS …)

    Vielen Dank und beste Grüße
    Tim

  6. Hallo Britta,

    sehr gut und verständlich geschrieben. Hat mir sehr geholfen! Ich wollte, bis auf der statischen Startseite nämlich komplett auf das Headerbild verzichten. Hat gut geklappt.

    Nur habe ich nun, nachdem ich den Code entsprechend geändert habe, wohl das Problem, dass das benutzerdefinierte Logo auf der Startseite beim scrollen innerhalb des Headerbildes nicht mehr „mitläuft“, sondern fixiert ist. Wie kann ich das denn wieder entsprechend der ursprünglichen Logo-Positionierung der Startseite anpassen?

    Herzlichen Dank für die Hilfe!
    Kristin

  7. Hallo Tim,

    selbst mit ein bisschen CSS-Erfahrung ist dieser Twenty Seventeen Header echt mal eine Herausforderung… Bitte nicht fragen, warum – aber mit folgender Angabe zusätzlich zu den im Beitrag genannten CSS-Definitionen sollte es funktionieren (getestet mit Chrome und IE 11):

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media
    {
    max-width: 100%;
    left: 0;
    top:-100%;
    -ms-transform: translate(0, 50%);
    -moz-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    }

    LG, bk

  8. Hallo Kristin,

    hm, das Problem bekomme ich gar nicht dargestellt. An sich sollte alles gut sein mit dem Logo.

    LG, bk

  9. buriii

    ist es denn auch möglich auf mobile version auch das ganze bild zu zeigen im header weil das schneidet ja immer die seiten ab kann man das nicht anpassen ?

  10. Hallo,

    wie es der Zufall so will, plane ich gerade für kommenden Donnerstag einen Beitrag, der sich weitgehend mit der Frage beschäftigt :-)

    LG, bk

  11. hallo britta,
    ich habe auch eine frage zur header-darstellung bei Twenty Thirteen, die ist immer völlig verzerrt, vielleicht hast du ja die zeit, dir das anzusehen und hast eine antwort und kannst mir helfen:

    1. theme: Twenty Thirteen
    — auch wenn ich das theme „Eins“,ein neues childtheme von Twenty Thirteen benutze ,habe ich die gleichen probleme
    – aktuell bin ich wieder beim theme „Eins“, aber bei twenty thirteen ist es das gleiche problem

    2. themevorgabe beim header unter design/headerbild:
    …Dein Theme empfiehlt jedoch eine Größe von 1600 × 230 Pixel für den Header.
    3.
    hab meine header grafik umgebaut auf diese groesse (1600 × 230 px) : der header zoomt sich total hoch und wird verzerrt dargestellt
    4. wenn ich in der vorgabe von dem der style.css bleibe
    .site-header .home-link {
    color: #555555;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }

    und eine grafik mit 1080 x 230 px einstelle, wird die auch verzerrt dargestellt,

    wenn ich die grafik über die funktion des themas „zurechtschneiden“ bearbeite, wird diese bearbeitete grafik auch gezoomt, verzerrt

    jetzt sitze ich schon 5 stunden an diesem problem,
    was mach ich falsch ( und wie soll das, da das ja ein responsive theme ist erst bei darstellungen auf dem i-phone, kl. labtop usw. aussehen?,

    beste gruesse, karsten

  12. Hallo Karsten,

    Header können einen schon ganz schön beschäftigen. Deshalb schau doch einfach mal hier: https://www.internetkurse-koeln.de/wordpress-header-groesse-aendern-wie-sie-den-header-an-ihr-bild-anpassen/
    Dort gibt es auch konkret eine Anleitung für Twenty Thirteen. An den CSS Angaben, die ich dort nenne, wirst du bei deinem Bild aber wohl noch arbeiten müssen. So wirst du dir überlegen müssen, worauf du für die Mobilansicht den Fokus legen willst.

    LG, bk

  13. Philipp Kiewel

    Hallo Britta,

    super Beitrag!
    Zusätzlich hätte ich allerdings noch eine Frage:
    Ist es auch möglich das Headerbild der Startseite auf 1/4 der Seite zu beschränken?
    Dies würde lästiges Scrollen auf meiner Startseite verhindern.

    Viele Grüße
    Philipp

  14. Hallo Philipp,

    in dem Fall kann ich nur empfehlen, auf den vorhandenen Header zu verzichten und einen eigenen, passend zum eigenen Bild, zu erstellen. Das erfordert zwar das Anlegen eines Child Themes, ist in der Folge aber wesentlich leichter an die eigenen Bedürfnisse anzupassen.
    Siehe hierzu: https://www.internetkurse-koeln.de/wordpress-header-groesse-aendern-wie-sie-den-header-an-ihr-bild-anpassen/
    Für ein Bild, das die volle Breite nutzen soll und sagen wir 300 px hoch ist, lautet es für die Desktopansicht dann width: 100% und height: 300px.

    LG, bk

  15. Hallo Britta,
    ein wirklich sehr hilfreicher und interessanter Artikel.
    Danke schon mal dafür :)

    Ich würde gerne den Header auf nur einer bestimmten/einzelnen Seiten ausblenden.
    Bei allen anderen Seiten und Beiträgen soll der Header erhalten bleiben.
    Habe schon einiges versucht, aber leider ohne Erfolg.
    Hast du vielleicht einen Tipp wie das gehen könnte?

    Über eine Antwort würde ich mich freuen
    Liebe Grüße
    Fabio

  16. Hallo Fabio,

    jede Seite hat eine ID, über die sie sich ansprechen lässt. Hat die Seite, die keinen Header anzeigen soll, zum Beispiel die ID 1234, sollte
    .page-id-1234 .custom-header {display:none;}
    funktionieren.

    LG, bk

  17. Vielen Dank :) Hat super funktioniert.

  18. Karl

    Hallo Britta,
    der Artikel hat mir echt geholfen meine Seite optisch besser anzupassen – Danke!

    Das Foto auf Seiten und Beiträgen ist weg und ich habe nur noch die Headline und Subline in der gewünschten Farbe. Allerdings ist es jetzt so dass ich leider keinen schlichten weißen Hintergrund habe sonder jetzt hinter dem Headertext eine hellblaue Farbe auftaucht. Kannst Du mir einen Tip geben wie ich einen schlichten weißen Hintergrund bekomme?

    Danke im Voraus!
    Karl

  19. T-B

    Hallo zusammen,
    ich habe ein Problem. Ich will den Header von Twenty Seventeen ändern, aber das Bild mit der Vase lässt sich nicht durch mein Bild austauschen. Ich kann mir nicht vorstellen, dass das so schwierig sein kann und ich will nicht an iegendwelchen Quellcods rumdoktorn.
    Unter Design -> Header ist es geändert worden, aber auf meiner HP ist davon nichts zu sehen. Kann mir da jemand helfen ?

  20. Hallo,
    dazu lässt sich ohne weitere Info leider gar nichts Hilfreiches sagen, sorry!
    Design -> Header ist zum Austauschen des Bildes jedenfalls der richtige Weg.
    LG, bk

  21. T-B

    Welche Infos müsste ich liefern?

  22. Normalerweise wäre mindestens mal die Domain eine solch wesentliche Info. Interessanter scheint aber: Sehen Sie im Customizer Ihre zuvor hochgeladenen Bilder? Welches Bild wird Ihnen dort als aktuelles Header-Bild angezeigt? Endete der Vorgang im Customizer tatsächlich mit Klick auf Veröffentlichen? Wie groß war das Bild – ist die Dateigröße vielleicht zu groß? Hat es das richtige Dateiformat (jpg oder png)? Oder hat doch schon mal einer im Code herumgedoktert? Wie sieht es mit einem anderen Theme aus, funktioniert es da? Oder könnte ein Plugin für die Probleme sorgen?
    Fragen über Fragen! Wenn ich noch länger darüber nachdenke, fallen mir bestimmt noch mehr ein…

  23. T-B

    Vielen Dank für die ganzen Informationen. Ich werde das alles prüfen.

  24. Moin, und vielen Dank für den einen oder anderen Tip.
    Habe ein spezielles Problem:
    Gibt es in WP Twenty Seventeen eine Möglichkeit da obere Menü, direkt unter dem Header mit einem farblich anderen Hintergrund zu versehen?
    Im Fooder ist das ohne Probleme möglich.
    Ich hätte nur oben gern die gleiche Farbe wie unten (Rahmen).
    Vielen Dank für einen weiteren Tip.

  25. Moin zurück,

    wie sich das Menü von Twenty Seventeen neu positionieren lässt, wäre sicherlich mal einen Beitrag wert. Allerdings war ich zuletzt eher in Sachen Twenty Nineteen unterwegs und werde mich demnächst wahrscheinlich Twenty Twenty widmen. Jedenfalls ist das nichts, das sich hier im Kommentar eben mal so beantworten lässt. Sorry!

    LG, bk

  26. Sandra Gehrke

    Header mit zwei Spalten
    Hallo Britta,
    ich würde gerne im Header von Twenty Seventeen neben der Bezeichnung der Seite und des Logos noch zwei weitere Textspalten einfügen, um dort die Adressen von zwei Standorten zu hinterlassen. Wie mache ich das?
    Derzeit ist das Header-Bild ausgeblendet und wird nicht benötigt. Die auf allen sichtbare (Header-Spalte) würde ich eben nur gerne umgestalten.
    Über deine Hilfe würde ich mich sehr freuen!
    Beste Grüße
    Sandra

  27. Hallo Sandra,

    der Tipp lautet: In den Template-Part header-image.php einen Spaltenblock einfügen. 3 Spalten: die erste für das Site Branding, die weiteren für die Adressen. Für die saubere Auszeichnung am besten auf einer Seite vorbereiten und den Code dann in den Template-Part einfügen.
    Das Vorgehen braucht natürlich ein Child-Theme.
    Wenn du dazu Hilfe brauchst: anrufen und Kurstermin machen.

    LG, bk

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

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