Kategorien
WordPress

Startseitenbilder von Theme 2017 ändern

Twenty Seventeen
Theme Twenty Seventeen

Du hast das edle WordPress-Theme 2017 installiert und möchtest das Headerbild und die Startseitenbilder ändern? Los geht es mit dem Auswechseln des Headerbilds, das Bild mit dem Kaktus auf dem Tisch.

Headerbild erstellen

Header ändernZunächst änderst du das Headerbild ganz oben. Die Größe:

  • Breite 2000 Pixel
  • Höhe 1200 Pixel

Erstelle deinen eigenen Header mit einem externen Grafikprogramm wie Photoshop, Gimp oder Photo Filtre (mein Geheimtipp).

Klicke dann in WordPress-Backend auf  Design > Customizer und wähle den Menüpunkt Header-Medien.

Headerbild hochladen

Header hinzufügen
Jetzt lädst du über Neues Bild hinzufügen deinen neuen Header hoch. Soweit alles kein Problem, allerdings gibt es da ja noch die anderen Bilder auf der Startseite. Die müssen auch ausgewechselt werden, damit die Optik zu deinem Unternehmen oder Projekt passt.

Übrige Startseitenbilder auswechseln

Startseitenbilder
Die anderen Bilder passen wahrscheinlich nicht in dein Projekt, wenn du nicht gerade eine Espressobar betreibst. Lade deine neuen Bilder in die Mediathek.

Bilder in Mediathek laden

Mediathek
Gehe in die Mediathek und lade die neuen Bilder über Datei hinzufügen hoch. Achte darauf, dass die Maße nicht zu knapp sind, denn WordPress skaliert die Bilder sonst hoch, und sie werden unscharf. Am besten ist die Bildergröße 2000 x 1200.

Seite bearbeiten und Featured Image zuordnen

Startseitenbild
Jedem Startseitenabschnitt ist eine passende Seite zugeordnet. Bearbeite nun diese zugeordnete Seite in der Seitenverwaltung! Rechts unten hast du die Möglichkeit, ein Featured Image zuzuordnen. Hier kommt das neue Bild für die Startseite rein! Das Featured Image wird dann auf der Startseite angezeigt.

Startseite kontrollieren

Neues Startseitenbild
Das neue Bild ist auf der Startseite angekommen. Bildertausch gelungen. 😉 Nun kannst du das für jeden Startseitenabschnitt wiederholen, oder auf ein Beitragsbild verzichten, wenn du die Startseite etwas übersichtlicher halten möchtest.

6 Antworten auf „Startseitenbilder von Theme 2017 ändern“

Hallo Oliver,
ja, mit einer Anpassung des Stylesheets, also der CSS-Datei. Erledige das über die CSS-Eingabebox im Customizer.
Die Eingabebox öffnest du über Design > Customizer > Zusätzliches CSS. Im Beispiel habe ich den Header in der Höhe halbiert:
Headerbild verkleinern
Dort gib diesen Code für Computer Screen, Mobile Screen und Computer screen with logged in user and admin bar showing on front end ein, also die unterschiedlichen Ansichten für Computer und mobile Geräte:

/*Computer screen */
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-image.home.blog .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 50vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 50vh;
/*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: calc(100vh - 32px);*/
height: calc(50vh - 32px);
}
}

Quelle
Statt den in meinem Beispiel angegebenen 50vH kannst du auch mit anderen Werten experimentieren, je nachdem, welche Höhe der Header haben soll. Mit 30vH erhältst du oben nur noch einen relativ Schmalen Streifen.

Grüße,
Bernd Schmitt

Kommentar verfassen