Twenty Seventeen Startseite anpassen

WordPress Twenty Seventeen Theme: Wie du die Startseite anpasst

Mรถchtest du mehr zum Thema Twenty Seventeen erfahren?

Twenty Seventeen (2017) ist das neue Standard-Theme, welches ab WordPress 4.7 mitkommt. Dieses eher Business-orientierte Theme unterscheidet sich stark von den bisherigen Blog-optimierten Standard-Themes in der WordPress-Vergangenheit. Damit steht Twenty Seventeen fรผr die Weiterentwicklung von WordPress von einer simplen Blogger-Plattform zu einer Grundlage fรผr alle Arten von Webseiten.

Einfรผhrung in das Twenty Seventeen Theme

Die Nutzung einer Landing-Page als Startseite von Business-Webseiten ist auf dem Vormarsch. Das Twenty Seventeen Theme macht es dir einfach, eine ansprechende Business-Landing-Page aufzubauen.

Im Internet kursiert schon seit einiger Zeit die offizielle Twenty Seventeen Demo, die dir einen Einblick in die zahlreichen Mรถglichkeiten des neuen Themes gibt. Sofort wird dir der Video Header auffallen. Beim Herunterscrollen zeigt sich ein Design, das in verschiedenen Abschnitten (Sections) aufgebaut ist, wobei jede Sektion einen Parallax-Scrolling-Effekt aufweist. Das heiรŸt, einzelne Ebenen bewegen sich unterschiedlich schnell, sodass der Eindruck von physischer Tiefe entsteht.

Die Navigation wird dir dank der Navigationsleiste nicht schwer fallen. Das Theme nutzt durchweg den Font Libre Frankling, der nur durch SchriftgrรถรŸe, Farben und andere Variablen variiert wird. Im Gesamten prรคsentiert sich das Theme, nachdem es angepasst wurde, in einem modernen, professionellen und รผbersichtlichen sowie gut navigierbaren Look.

2017 Theme

Sobald du das neue Theme siehst, wird dir auffallen, wie sehr es sich von all seinen Vorgรคngern unterscheidet. Wรคhrend bisherige WordPress-Themes nur geringfรผgigen Aufwand fรผr das Set-up erforderten, ist Twenty Seventeen mehr als ein direkt einsetzbares funktionales Blog-Thema. Zwar kann auch das neue Theme als Grundlage fรผr ein Blog genutzt werden. Eingefรผhrt wurde Twenty Seventeen jedoch fรผr die Gestaltung voll umfรคnglicher Business- oder eCommerce-Webseiten. Landing-Pages mit verschiedenen Sections sind die Stรคrke des neuen Themes.

Damit verbunden ist ein hรถherer Aufwand bei der Einrichtung einer Seite mit dem neuen Theme, verglichen mit den vorherigen Standard-Themes, die WordPress bis dato angeboten hat. Dies wirft die Frage auf, was das neue Theme im Einzelnen zu bieten hat, wie du damit eine Seite erstellen kannst und wie du im Allgemeinen von den neuen Mรถglichkeiten profitieren kannst.

Homepage-Abschnitte im Twenty Seventeen Theme erstellen

Ein groรŸer Teil des Twenty Seventeen Setups geschieht รผber den WordPress-Theme Customizer. Zusรคtzlich zu den Standard-Features (zu denen etwa die Gestaltung der Menรผs oder der Widgets gehรถren), kannst du mit dem Customizer ein Header Video oder Header Image erstellen, das Farbschema wechseln und Inhalte zu den Rubriken der Startseite hinzufรผgen.

Mit WordPress 4.7 kommt zudem ein neues Feature mit Shortcuts, wodurch sich ein Customizer-Menรผ an der Stelle รถffnet, an der Teile der Seite angepasst werden kรถnnen. Auf diese Weise macht es dir WordPress noch leichter, zahlreiche Komponenten im Theme zu editieren, etwa das Header Image oder die Inhalte aller Seitenabschnitte.

WordPress 4.7 kommt zudem mit einem neuen Kern-Feature namens Additional CSS. Dieses findet sich in der Menรผoption des Customizers und bezieht sich auf die neue WordPress Version im Allgemeinen und nicht nur auf das Twenty Seventeen Theme.

Die Anpassung des neuen Themes an deine individuellen Bedรผrfnisse an deine Webseite kann in sechs Schritten durchgefรผhrt werden.

Schritt 1: Seiten fรผr jeden Abschnitt auf der Webseite erstellen

Fรผr jede Sektion eine Seite erstellen
Fรผr jede Sektion eine Seite erstellen


Zunรคchst erstellst du die Seiten, die auf der Startseite in den verschiedenen Abschnitten angezeigt werden sollen. Diese Abschnitte werden auch Sektionen oder Sections genannt.

Hierbei empfiehlt es sich, mit gewissen Standard-Seiten zu beginnen.

Eine Seite sollte als Startseite beziehungsweise statische Landing-Page erstellt werden. Eine weitere Seite sollte fรผr Blogeintrรคge oder Posts angelegt werden. Bis zu vier weitere Seiten empfehlen sich fรผr zusรคtzliche Inhalte, die in den Abschnitten der Homepage angezeigt werden. Diese Seiten kรถnnen etwa eine „รœber mich“-Seite, eine „Kontakt“-Kategorie, ein Impressum oder eine Datenschutzerklรคrung beinhalten.

Schritt 2: fรผge ein Bild zu jeder Seite hinzu

Beitragsbild fรผr jede Sektion
Beitragsbild fรผr jede Sektion einfรผgen

Um den angesprochenen Parallex Scrolling Effekt zu erhalten, muss zu jeder Seite, die zu den Abschnitten der Startseite gehรถrt, ein groรŸes Beitragsbild (Featured Image) hinzugefรผgt werden. Auch wenn du kein entsprechendes Bild auf der Homepage willst, die im vorherigen Schritt erstellt wurde, mรถchtest du vielleicht jede andere erstellte Seite mit Featured Images versehen.

In der Demo zum Twenty Seventeen Theme werden zu diesem Zwecke Bilder eingesetzt, die Abmessungen von 2000 Pixeln in der Breite und 1200 Pixeln in der Hรถhe aufweisen. Daher funktionieren solche Bilder am besten, die eine gleiche GrรถรŸe haben oder dieser GrรถรŸe nahe kommen. Deutlich kleinere Bilder solltest du nicht verwenden, da die Ergebnisse dann nicht zufriedenstellend wรคren.

Falls keine entsprechenden Bilder zur Hand sind, findet sich eine erste Lรถsung darin, Bilder รคhnlicher GrรถรŸe via Online-Bildersuche zu finden und sie an die GrรถรŸe von 2000 mal 1200 Pixeln anzupassen. Ich kaufe die Bilder auf DepositPhotos, da finde ich die Auswahl am besten.

Schritt 3: lege eine statische Seite und eine Blogpost-Seite fest

Statische Startseite festlegen
Statische Startseite festlegen

Hier wird zunรคchst die Option einer statischen Seite ausgewรคhlt, bevor du den Customizer startest. Dieser findet sich unter dem Navigationspunkt Design > Customize im Administrationsbereich.

Wรคhle die statische Startseite aus dem Menรผbereich und nimm die wichtigen Einstellungen vor. Neben der Anzeige der Startseite wรคhlst du das Optionsfeld fรผr eine statische Seite aus. Im Dropdown-Menรผ der Startseite wird die Startseite festgelegt. Im Dropdown-Menรผ der Blogpost-Seite wรคhlst du die Blog-Seite aus. Vergiss nicht, auf Speichern und Verรถffentlichen zu klicken, bevor du mit dem nรคchsten Schritt fortfรคhrst.

Schritt 4: Seiten zu jedem Abschnitt der Startseite zuordnen

Jeder Sektion eine Seite zuweisen
Jeder Sektion eine Seite zuweisen

Hier wรคhlst Du die anwendbaren Seiten aus, die fรผr jeden Abschnitt der Startseite zur Verfรผgung stehen.

Um die verschiedenen Seiten, die du in den vorherigen Schritten erstellt hast, den Sections der Startseite zuzuordnen, wรคhle im Customizer das Theme Options Menรผ aus.

Es erscheinen Dropdown-Menรผs, mit denen es mรถglich ist, jede erstellte Seite dem Bereich der Startseite zuzuordnen, wo sie erscheinen sollen.

Schritt 5: erstelle ein Haupt-Navigationsmenรผ

Navigation - Das obere Menรผ festlegen
Das obere Menรผ festlegen

Navigationsmenรผs kรถnnen auf verschiedene Weise ausgewรคhlt und erstellt werden. Entweder wird im Customizer-Menรผ die Option Menรผ ausgewรคhlt oder du nutzt den Weg รผber die Navigationspunkte Design > Menรผs im Administrationsbereich.

In beiden Fรคllen unterscheidet sich die Erstellung von Navigationsmenรผs in WordPress 4.7 nicht von den Vorgรคngerversionen. Das Menรผ kann also wie gewohnt erstellt werden und anschlieรŸend dem gewรผnschten Ort zugewiesen werden.

Schritt 6: Optional fรผge einen Video Header hinzu

WordPress bietet in der Version 4.7 ein vollstรคndiges Widget zur Erstellung eines Video Headers. Innerhalb kurzer Zeit kann der Header also mit einem beliebigen Video gefรผllt werden. Der dafรผr relevante Bereich des Customizers kann via Shortcut erreicht werden, oder indem der Menรผpunkt Header Media im Customizer aufgerufen wird.

Neues Headervideo oder Headerbild festlegen
Neues Headervideo oder Headerbild festlegen

Zur Erstellung des Headers musst du nun ein Video auswรคhlen, das du nutzen mรถchtest. Alternativ dazu kann auch eine URL zu einem Video ausgewรคhlt werden, das dann im Header erscheinen soll. Somit kรถnnen etwa Videos von YouTube im Header eingebunden werden. Beim Upload eines Videos solltest Du berรผcksichtigen, dass hier bestimmte VideogrรถรŸen empfohlen werden. Diese entspricht in Pixeln auch den Abmessungen empfohlener Bilder bei der Seitenerstellung und betrรคgt damit 2000 mal 1200 Pixeln. Wird diese empfohlene GrรถรŸe nur geringfรผgig unterschritten, kรถnnen sich die Ergebnisse dennoch sehen lassen. Deutlich kleiner sollte das Video im Header dennoch nicht sein.

Nachdem du diese sechs Schritte umgesetzt hast, steht die Grundstruktur der neuen Webseite im WordPress Twenty Seventeen Theme. Eine statische Homepage mit Startseite und verschiedenen Abschnitten und Unterseiten sowie Video Header kann also auf einfache Weise professionell gestaltet werden.

Zusรคtzlicher Punkt: dynamische On-Page-Navigation erstellen

Ein Feature, das dem Twenty Seventeen Theme fehlt, ist ein eingebauter Support fรผr die Navigation zwischen den Bereichen der Startseite. Wรผnschenswert wรคre es, wenn die Navigation es ermรถglichen wรผrde, zwischen den verschiedenen Rubriken und Abschnitten hin und her zu navigieren. Fรผr diese fehlende Option findet sich jedoch eine Lรถsung.

Um die On-Page-Navigation zu ermรถglichen, solltest du zunรคchst ein Menรผ erstellen, welches zu den Sprungmarken aka name Anchors linkt und nicht zu verschiedenen Seiten. Sรคmtliche Beitrรคge und Seiten innerhalb von WordPress besitzen eine ID. Anhand dieser ID werden sie in der Datenbank identifiziert. Mit IDs kรถnnen Menรผ-Links angepasst werden.

Sprungmarken
Sprungmarken – oder name anchors nutzen

Zur Erstellung von IDs kannst du die Titel der Seiten รผbernehmen, die in den Bereichen der Startseite angezeigt werden. Die Titel sind dabei in Kleinbuchstaben zu schreiben und sรคmtliche im Titel vorkommenden Leerzeichen sind durch Gedankenstriche zu ersetzen.

Wenn du WordPress in einem Unterverzeichnis (Subdirectory) installiert hast, muss das Unterverzeichnis im Link enthalten sein. Die Installation in einem Unterverzeichnis ist gรคngige Praxis fรผr Seiten, die in einer lokalen Entwicklungsumgebung entworfen wurden. Damit Links funktionieren und die Navigation zwischen den Links mรถglich ist, muss der Titel des Unterverzeichnisses in der URL enthalten sein. Falls du WordPress nicht in einem solchen Subdirectory installiert haben solltest, kannst du die Angabe des Verzeichnisses auslassen.

Im Sinne der Navigation musst du nun IDs in jede Section der Startseite hinzufรผgen. Es gibt zwei Arten, auf die du das tun kannst. Die einfachste Variante besteht darin, die IDs direkt zu den Seitentiteln hinzuzufรผgen, indem du den WordPress Seiten-Editor benutzt.

id im Seitentitel hinterlegen
id im Seitentitel hinterlegen

Du kannst auch den HTML-Code direkt in die Titelzeile des Seiten-Editors eingeben. Diese Methode ist jedoch nicht optimal. Die ID entspricht den Seitennamen in Kleinbuchstaben und mit Bindestrichen an Stelle von Leerzeichen. Die ID wird in span-Elemente eingefasst.

<span id="ueber-uns" style="padding-top: 96px">รœber Uns</span>

Dies sind HTML-Elemente, die Text und andere Bestandteile beinhalten kรถnnen, dabei jedoch keine semantische Bedeutung aufweisen und damit auch nichts bewirken. Aber auf diese Weise entsprechen die IDs den anderen IDs, die zu den angepassten Navigationsmenรผ-Links hinzugefรผgt wurden. Wird zusรคtzlich ein Innenabstand oben hinzugefรผgt (etwa ein Abstand von 96 Pixeln) bewirkt dieser Wert, dass der Inhalt unterhalb der Navigationsleiste erscheint. Diese Vorgehensweise erfordert gewisse Kenntnisse und ist fehleranfรคllig. Unproblematischer ist es, die span-Elemente, IDs und den Innenabstand unter Nutzung von jQuery hinzuzufรผgen.

jQuery( "h2.entry-title" ).each( function() {
	var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-");
	jQuery( this ).wrapInner(function() {
		return "";
	})
})

Der sich hierbei ergebende Code lokalisiert den Titel jedes Abschnitts auf der Startseite, fรผgt ihn in span-Elemente ein und weist sie den erforderlichen Eigenschaften und Abstรคnden zu. Zusรคtzlich errichtet dieser Code einen ID-Wert, indem er den Titel des Abschnitts in Kleinbuchstaben konvertiert und die Leerzeilen durch Bindestriche ersetzt. Wenn du eine Section auf der WordPress Seite hast, die Mein Blog heiรŸt, dann wird der Code den ID-Wert id=“ueber-uns“ erstellen. Dieses ID-Format weist die gleiche Syntax auf, die du auch fรผr die Links im angepassten Navigationsmenรผ verwendest.

Um diesen Code auf deiner Seite zu laden, kannst du ihn an zwei unterschiedlichen Orten hinzufรผgen. Entweder in eine JavaScript Datei, die Teil eines aktivierten Twenty Seventeen Child-Themes ist oder in ein Plugin, das JavaScript laden kann. Mit einem CSS und JavaScript Plugin kann der Code auf einfachste Weise geladen werden. Hier kann auch ein Plugin wie Simple Custom CSS and JS verwendet werden, um mit jQuery zu laden.

Hiermit ist das Twenty Seventeen Theme als Landing-Page eingerichtet und die Hauptnavigation funktioniert nun auch in Form einer On-Page-Navigation zwischen den Sections der Seite.

Weitere Gestaltungsmerkmale

Wenn du die Seite noch eleganter gestalten mรถchtest, bieten sich als weitere Schritte noch mehrere Erweiterungen an. Es empfiehlt sich, Umleitungen oder Redirects einzurichten. Auf diese Weise werden Besucher, die auf einer der Seiten landen, sofort auf die fรผr sie relevanten Bereiche der Webseite umgeleitet.

Wenn du dich fรผr jQuery entschieden hast, um die Navigation zwischen den Sections der Startseite zu ermรถglichen, solltest du so genannte Conditional Tags nutzen. Conditional Tags haben die Eigenschaft, Bedingungen (Conditions) abzufragen. Bei der Nutzung von jQuery kรถnnen Codes verwendet werden, um nur den reinen Code auf der Webseite zu laden.

Deine Seite wird auch zusรคtzlichen Unterseiten beinhalten, die nicht zu den Sections gehรถren. Diese solltest du zum Navigationsmenรผ hinzufรผgen und zudem alle Links zu den Sections in einem Dropdown-Menรผ anordnen.

Fazit

Mit dem Twenty Seventeen Theme bietet dir WordPress eine vollkommen neue Art von Theme, die sich in vielen Punkten signifikant von vorherigen Themes unterscheidet. Zumindest, so lange die Standard-Themes betrachtet werden. Die Nutzung einer statischen Startseite ist auf einfachere und elegantere Methode mรถglich.

Es finden sich im Customizer sichtbare Icons, mit denen die Webseite bearbeitet und angepasst werden kann und im Header kรถnnen nun auch Videos statt nur Bilder platziert werden. Es wird deutlich, dass WordPress mit dem neuen Theme beabsichtigt, sein Angebot vom reinen Bloggen auszuweiten auf die Geschรคftswelt. Webseiten fรผr das Business und fรผr eCommerce-Zwecke kรถnnen auch mit WordPress erstellt werden.

Zwar kostet die Erstellung einer Webseite unter Nutzung des neuen Themes etwas mehr Zeit und Aufwand als bei den bisherigen Standard-Themes. Dafรผr bietet WordPress nun eine moderne, ansprechende und mit groรŸer Funktionsvielfalt ausgestattete Umgebung, die nicht nur fรผr Blogger interessant ist.

via wpmudev

Offenlegung Werbelinks: Mit einem Stern (*) gekennzeichnete Links und Buttons sind sogenannte Affiliate-Links. BloggerPilot bekommt bei einem Kauf eine Provision, die sich jedoch nicht auf den Endpreis auswirkt. Es ist uns wichtig zu betonen, dass dies keinen Einfluss auf unsere Bewertung oder Meinung hat.

ร„hnliche Beitrรคge

Schreibe einen Kommentar

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

 

12 Kommentare

  1. Was ich nicht verstehe ist: Wenn ich im Customiser auf Theme Optionen gehe, dann sind doch Blog, Kontakt, รœbermich voreingestellt, klicke ich auf speichern erscheinen die Bereiche und das Menรผ dazu automatisch auf der Seite … aber es werden garkeine Seiten angelegt .. .wo kommen diese Inhalte denn nun her und woher die Bilder (die ja eigentlich Seitenbilder sein sollten) … irgendwie etwas komisch .. es gibt nach dem Speichern auch kein zurรผck mehr (รผberall „- Auswรคhlen -“ auswรคhlen setzt die Seite auch nicht zurรผck, also muss man jetzt plรถtzlich Seiten anlegen .. sonst bleiben die vorgegebenen :(
    Habt ihr ne Idee?

  2. Hallo und danke fรผr das Tutorial!

    Ich wรผrde gern auf der Startseite auf die untere Navigation verzichten, so wie auf deinem Screenshot, also nur den Scroll-Down-Pfeil. Wie mache ich das? Wenn ich das Theme installiere, ist die Navigation schon eingefรผgt.

    GruรŸ, Andreas

  3. Hallo Andreas,
    wenn du nur die Startseite verรคndern mรถchtest, kannst du die index.php kopieren und in home.php umbenennen.

    Die home.php kannst du dann nach deinen wรผnschen anpassen.

    lg
    Jochen

  4. ist es mรถglich vershiedenste SEiten mit anderen Videos, bzw. Bilder an zu legen?
    Ich habe versucht Dynamische Seiten mit unterschiedliche Videos und statische SEiten mit unterschiedliche Bilder an zu legen, geht jedoch nicht. Es erescheinen immer die gleichen Bilder auf alle seiten, bzw. alle die gleiche Videos…Kann ich dieses Thema kaufen, um dann eine erweiterte Einstellmรถglichkeit zu bekommen?

  5. Auf der Startseite wird mein Blog nicht richtig angezeigt. Er macht keine Aufzรคhlungspunkte, die aber auf der Blogseite sichtbar sind. Die Verlinkung der Emailadresse fehlt auch…..
    Kennt jemand Abhilfe ?

  6. Hallo,
    melde mich sehr spรคt, versuche aber seit lรคngerem die Hintergrundfarbe in den einzelnen Sections auf der Startseite verschiedenfarbig darzustellen:

    finde nicht den sauberen link dazu, immer nur zu der gesamten Startseite oder zur jeweiligen Stamm-Seite!!

    Startseite
    .page-id-2380 .site-content-contain {
    background-color:#aaaaaa;
    }
    die Seite die in der Section dargestellt wird
    .page-id-1719 .site-content-contain {
    background-color:#dddddd ;
    }

    4 Sections
    โ€ž4 themenโ€œ bearbeiten

    Wir sind die Experten, wenn es um Fliesen, Mosaik und Naturstein geht. Wir entwickeln mit Ihnen individuelle Konzepte fรผr Bad, Kรผche, Wohnrรคume, Bรผrorรคume und Gewerbebauten und setzen sie fachgemรครŸ um. Profitieren Sie von unserer Erfahrung, unserem Wissen und unserer Leidenschaft…….und weiter bla bla….

    Naherholungsgebiet: Ihr Bad


    wie spreche ich die einzelnen Sections an, um innerhalb Customizer/ Zusรคtzliches CSS auf die einzelnen Seiten zuzufassen

    Vielen Dank fรผr Tipps und Hilfe

    Axel

  7. Danke dir, das ist die erste Anleitung die das Theme gut bescvhreibt. Die anderen sind unter aller kanone. ABER mal ehrlich wer will den diesen primitiven Editor noch wirklich. Das Theme ist sowas von schlecht aufgebaut, da lohnt sich jedes Kommerzeรฎelle Theme ab 19 Euro.
    Die Gestaltungsmรถglichkeiten und die Features sind eher fรผr absolute Einsteiger gedacht. Ich muss jetzt leider fรผr eine Kundin mit diesem Ding arbeiten. Bin froh wenn ich damit durch bin.

    Aber der Artikel hat mir geholfen.

    THX

  8. Hallo!
    Ich weiss, ist schon eine Weile her dein Tutorial (hat mir sehr geholfen), aber ich habe dennoch eine Frage dazu: Wieso geht das mit den Scroll-Bildern vertikal nicht auf der Mobile-Ansicht? Bei der Desktop-Version funktioniert es bestens. Muss ich hierfรผr noch zusรคtzlich etwas einstellen?

    Vielen Dank fรผr deine Hilfe schon im Voraus!
    Gruss
    Isabelle

  9. Hallo Jochen.
    Darf ich Dich bitte etwas fragen?
    Ich bin dabei, mittels WP und Twenty Seventeen ein kleine, private Freundes-Homepage zu erstellen.
    Ich bin kein Entwickler/Programmierer.
    Mir ist aufgefallen, dass auf der (statischen) Beitrรคge-Seite lediglich die letzten 3 Beitrรคge angezeigt werden.
    Ich wรผrde aber gern ALLE Beitrรคge anzeigen
    (wahlweise eine Link auf die restlichen Beitrรคge).

    Kรถnntest Du mir bitte einen Tipp geben, ohne in die Tiefen der Programmierung einzusteigen?

    Die Option „Anzahl Beitrรคge pro Seite“ bringt keinerlei ร„nderung.

    GANZ HERZLICHEN DANK!

    Mit freundlichen GrรผรŸen

    Volker

    PS: Ich habe jetzt 3 Tage sรคmtliche Turtorials und Hinweise gelesen, leider keine diesbezรผglichen Hilfestellungen

    1. Hallo Volker,
      ich weiรŸ nicht recht was du genau meinst.
      Hast du einen Link, wo ich mir das anschauen kann?

      Jochen