Jaarlijks brengt Automattic, het bedrijf achter WordPress, een nieuw thema uit. Voor 2017 is dat het thema met de naam Twenty Seventeen. Dit thema is vanaf WordPress 4.7 standaard aanwezig en actief in nieuwe WordPress installaties (en wordt dus behandeld in de WordPress Cursus). In onderstaande post duik ik in de details van het thema.
Op het eerste gezicht
Direct vallen een aantal zaken op in de demo versie: er wordt video als achtergrond gebruikt en het thema doet aan parallax scrolling. Niet verkeerd. Wat mij verder opviel, was dat blogberichten gelijktijdig met andere secties op de homepage kunnen worden getoond. Eerder moest je kiezen tussen blogberichten óf een statische pagina op je startpagina. Je kon ze niet combineren. Met dit nieuwe thema kun je dus eenvoudig een single page website bouwen.
Customizer
De meeste instellingen voor het thema vind je terug in de Customizer van WordPress. De Customizer is te openen via Weergave > Customizer of direct vanuit je admin bar. Hieronder nemen we de verschillende onderdelen stap voor stap door.
Site Identiteit
Eigenlijk is hier niets veranderd. Je kunt nog steeds afbeeldingen uploaden voor je logo en favicon en ook kun je hier, net als op de pagina Instellingen: algemeen, de titel en subtitel van je website aanpassen.
Wel nieuw is dat je de verschillende instellingen snel vanuit het preview venster kunt benaderen via de potlood icoontjes. Dat is een nieuwe feature van WordPress 4.7, dus deze icoontjes zul je ook bij andere thema’s terug zien. In de toekomst zullen dit soort zaken waarschijnlijk direct in de pagina kunnen aanpassen zoals sommige thema’s nu al bieden.
Kleuren
Anders dan bij Twenty Sixteen heb je in Twenty Seventeen minder grip op de kleuren van je thema. Je kunt kiezen voor licht, donker of aangepast. De eerste twee hebben invloed op de achtergrond van je thema. Gebruik je ‘donker’, dan word de achtergrond van je website zwart. Ideaal bijvoorbeeld voor fotografie websites.
De optie aangepast heeft geen invloed op de achtergrondkleur. Deze instelling veranderd de kleur van bepaalde typen teksten (zoals de publicatie datum en quotes) en onderdelen van bepaalde Widgets. Via de schuifbalk kun je deze kleurinstelling aanpassen.
Met de Headertekstkleur instelling verander je de kleur van de website titel en subtitel.
Header media
De mogelijkheid om een video header in te stellen vind je hier terug. Je kunt videobestanden uploaden, maar het is ook mogelijk om YouTube video´s te gebruiken. Omdat de teksteditor voor Pagina’s en Berichten naast YouTube- ook Vimeo links begrijpt, is het logisch om dat ook hier te verwachten. Vimeo werkt echter niet in de header. Je kunt alleen YouTube linkjes gebruiken.
In plaats van video kun je ook gewoon header afbeeldingen gebruiken. Leuk is dat je meerdere afbeeldingen kunt uploaden zodat deze willekeurig in je header worden getoond. Het alternatief is om gebruik te maken van de meegeleverde, aangeraden header.
Menu’s
Vergelijkbaar met Weergave > Menu’s kun je jouw hoofdmenu en de bijbehorende menu items hier instellen. De nieuwe Preview editor werkt echter wat fijner voor beginners.
Als je een menu hebt ingesteld voor de locatie Bovenste Menu zie je het menu in je website in eerste instantie onderaan je scherm (of viewport). Zodra je naar beneden scrolt verplaatst het menu zich naar de bovenkant van je scherm waar het vervolgens gefixeerd in beeld blijft staan.
De verschillende menu items kun je herschikken door ze naar de juiste positie te slepen. Zie je geen menu in je website? Selecteer dan onder Locatie tonen de optie Bovenste menu.
Net als in Twenty Sixteen is de locatie Socialelinksmenu weer beschikbaar. Als je je menu aan deze locatie toewijst probeert het thema de afzonderlijke menu items te linken aan één van de sociale netwerken (Instagram, Facebook, Twitter, etc.) en toont het de bijbehorende iconen in plaats van tekst links.
Widgets
Je hebt in Twenty Seventeen drie locaties beschikbaar waar je widgets kunt tonen: Sidebar, Footer 1 en Footer 2. Zoals je mag verwachten komen de widgets die je in de footers plaatst helemaal onderaan je website te staan. Respectievelijk links en rechts.
De Sidebar locatie is – in tegenstelling tot voorgaande thema’s niet – beschikbaar voor Pagina’s en verschijnt alleen bij (blog) Berichten. Persoonlijk vind ik dit jammer, liever had ik de optie gezien om de sidebar voor deze posttypen afzonderlijk te (de)activeren. De footer locaties zijn wel overal in je site beschikbaar.
[box] Widgets en menu’s niet helemaal niet duidelijk? Kijk eens naar de WordPress Cursus[/box]
Statische startpagina
Met de komst van WordPress 4.7 hoef je niet langer handmatig een statische pagina als startpagina in te stellen. Deze staat standaard al ingesteld op Home. Ook de placeholder voor je berichtenpagina (of blog pagina) is al aangemaakt (Blog) en je kunt onder dit kopje kiezen om je Berichtenpagina als startpagina in te stellen.
Onder dit kopje heb je ook de mogelijkheid om nieuwe pagina´s toe te voegen, als je liever een andere pagina als start- of berichtenpagina gebruikt. Als je op de ingestelde pagina een uitgelichte afbeelding instelt, dan wordt deze afbeelding met het parallax effect in de achtergrond van de eerste ´sectie´ van je startpagina getoond.
Persoonlijk vind ik het mooier om in deze eerste sectie geen gebruik te maken van de achtergrond afbeelding omdat het er onrustig uit ziet in combinatie met de afbeelding/video in de header (het bovenste deel van je voorpagina). In de andere secties (zie hieronder) ziet dit er beter uit.
Thema Opties
Let op: deze optie is alleen beschikbaar als je een statische startpagina hebt ingesteld.
Je parallax pagina is ingedeeld in secties die bestaan uit een afbeelding (optioneel) en tekst. Onder Thema Opties kun je instellen wat er in de verschillende secties moet worden getoond. Dat kunnen zowel pagina’s als berichten zijn. Je bent niet verplicht alle secties te vullen.
De eerste sectie heb je onder Statische startpagina al ingesteld. Verwarrend onder dit kopje is dat Voorpagina sectie 1 inhoud door de Statische startpagina instelling eigenlijk verwijst naar de tweede sectie. En de tweede naar de derde, etc.
Wel consequent is dat je ook hier voor iedere sectie vanuit de Customizer nieuwe pagina´s kunt aanmaken en instellen. Wederom geldt dat de Uitgelichte afbeelding van een pagina als parallax achtergrond wordt gebruikt als je de pagina in een sectie gebruikt.
De Pagina layout instelling geeft je de optie om iedere sectie in twee kolommen in te delen. De positie van de tekst en de titel wordt gesplitst als je twee kolommen gebruikt. Afhankelijk van het type (Bericht of Pagina) wordt de tekst links of rechts geplaatst.
Extra CSS
Onder Extra CSS kun website specifieke CSS code opgeven om het uiterlijk van je pagina aan te passen.
Conclusie
Het parallax effect werkt erg goed. De nummering van de secties is door de startpagina instelling wel verwarrend . Het was handig geweest als de uitgelichte afbeelding ook vanuit de Customizer ingesteld kon worden. Nu is het nodig om voor elke sectie de bijbehorende pagina op te snorren om daar de uitgelichte afbeelding in te stellen.
De mogelijkheid voor videoheaders is een geweldige toevoeging. Kleine kanttekening is dat Vimeo video’s hier niet kunnen worden gebruikt, terwijl Vimeo in Berichten en Pagina’s wel wordt ondersteund. Er wordt ook nergens beweerd dat dit kan. WordPress bevat echter meer van dit soort inconsequente eigenschappen en ik zou graag zien dat het er minder werden in plaats van meer.
Jammer is dat de widget sidebar niet op Pagina’s getoond kan worden en alleen op Berichtpagina’s zichtbaar is. Ook de mogelijkheden voor kleurgebruik zijn erg beperkt.
Al met al verwacht ik dat Twenty Seventeen in de behoeften van veel WordPress starters kan voorzien. Tegelijk vind ik dat het thema veel verwarrende en verstopte instellingen heeft. Daarom denk ik dat dit thema de drempel voor de startende WordPress’er onnodig verhoogd. Ik loop daar ook tegenaan in de WordPress Cursus en ik hoop met dit bericht wat helderheid te scheppen.
Reacties
47 reacties op “Twenty Seventeen – Het WordPress thema voor 2017”
Beste Louis,
Ik heb een site gebouwd met dit thema en vind over het algemeen de indeling in twee kolommen (titel links, content rechts) erg mooi. Er is alleen één pagina waarop ik slechts één kolom zou willen hebben. Op deze pagina staat namelijk een photo gallery van 10web en ik wil het mozaïek met afbeeldingen meer ruimte geven.
Mijn vraag is dus: is het mogelijk om voor één pagina een indeling met één kolom inde stellen, en de rest op twee kolommen te laten staan?
Nee, helaas. Al dit soort aanpassingen moeten via een child-theme met een extra pagina template.
Beste Louis
Ik probeer in dit theme de social button toe te voegen van facebook. In het menu heb ik de link toegevoegd, maar wanneer ik dan de pagina bekijk staat er de in het hoofdmenu de tekst ‘ facebook’ en aan de bottum een link afbeelding maar geen facebook icoontje.
Ik heb geen idee hoe ik dit moet aanpassen….
Ik ben niet handig met html codes. Wanneer ik Google zie ik allerlei filmpjes met een instructie. Deze volg ik, maar in tegenstelling tot hun eindresultaat, blijft het logo bij mij ontbreken.
Kun jij me helpen? Zie de website hoharunners.nl
Hoi Cyril,
In Twenty Seventeen heb je twee plaatsen waar een menu ondergebracht kan worden: ‘Bovenste menu’ en ‘Socialelinksmenu’. Alleen die laatste positie zorgt ervoor dat links naar sociale media als icoon worden getoond. De Facebook link die je nu hebt toegevoegd zit in het menu dat binnen het thema op de positie ‘Bovenste menu’ is ondergebracht. Daardoor krijg je hier geen social media icoon te zien. Het is ook niet zo dat je één link een icoon kunt laten zijn en de rest niet. Het is alles of niets. Ook aan de plek in het thema kun je niets veranderen, als je gebruik maakt van het sociale media menu, dan zit dat altijd onderaan de pagina.
Hopelijk is het zo iets helderder?
Hoi,
Ik ben aan het werk op johanvangogh.nl en ik krijg de volgende melding bij de video header in het twenty seventeen thema.
Dit thema ondersteunt geen video-headers op deze pagina. Ga naar de homepagina of een andere pagina die video-headers ondersteunt.
De video deed het eerst wel waarschijnlijk heb ik iets veranderd in de pagina instellingen, maar ik heb geen idee hoe krijg ik de video optie in de header terug? kunnen jullie mij helpen
Alvast bedankt
groetjes Bregje
Dit zou gewoon moeten werken, maar je krijgt dit inderdaad te zien als je in je customizer naar een andere pagina dan Home navigeert. Als je in de customizer naar de homepage navigeert (dus rechts op Home klikken in het menu), wordt de optie dan wel actief?
ja! het is gelukt! tx 🙂
Hallo Louis. Ik heb je instructie gevolgd en het werkt allemaal goed totdat ik bij de inhoud van de footer aankom. Die is bij twentyseventeen wezenlijk anders dan bij twentyfifteen. Weet niet wat ik nu moet kopieren om de regel van WordPress in de footer aan te passen
Zie mijn reactie in WordPress thema’s aanpassen via een child theme.
Hallo,
Is het ook mogelijk de regel ‘ondersteund door WordPress’ uit te schakelen. Zou simpel moeten zijn, maar ik vind het nergens helaas. Ben ook nog niet zo’n ervaren ‘woorddrukker’!
Voor Twenty Fifteen heb ik het verwijderen van de footer hier beschreven.
Hallo, ik heb een beetje het zelfde probleem als Hester. Op mijn blog staat nu het heel bericht getoond. Maar ik wil graag een foto met een kleine tekst. Kan dit?
Of kan dit wel met een page builder?
Groet, Laura
Hoi Laura. Nee, dat kan in Twenty Seventeen niet zonder thema aanpassingen. Misschien dat je met een pagebuilder je blog pagina zou kunnen herbouwen, maar dan moet alsnog de mogelijkheid inzitten om blog berichten deels te tonen. Ik durf zo niet te zeggen of een/welke pagebuilder dat kan. Maar als je deze weg inslaat ben je eigenlijk al op een ander thema aan het overstappen.
Bij het plaatsen van berichten op mijn blog worden standaard alleen de uitgelichte afbeelding en de titel getoond. Ik wil graag ook de eerste zinnen van de tekst met een ‘lees verder’ mogelijkheid. Is dit mogelijk zonder een plugin te gebruiken?
Goeie vraag. Dit kan in Twenty Seventeen niet zonder extra kunst-en-vliegwerk. Je zou verwachten dat je daar het samenvatting-veld voor kunt gebruiken, of dat dit met behulp van de lees-meer-tag werkt, maar helaas…
Dag Louis,
de aanhouder wint; ik heb het gelukkig eindelijk gefixed :))
Dag Louis,
Ik ben aan het rommelen in mn twentyseventeen website (door iemand ander opgemaakt).
Ik heb een pagina verwijderd maar nu staat de tekst van mijn eerste (voor)pagina er twee keer in.
Wanneer ik de dubbele tekst selecteer/verwijder verdwijnt de hele pagina
Heb al de hele pagina verwijderd en opnieuw gemaakt, maar dit blijft zo.
Wat doe ik verkeerd?
Ik weet niet zeker of ik je probleem helemaal snap, maar als ik het zo lees zou ik beginnen met een kijkje naar je sections (Weergave > Customizer > Thema Opties). Als je daar in de één van de secties dezelfde pagina gebruikt die je onder Weergave > Customizer > Homepage-instellingen als Homepagina hebt ingesteld, zie je dezelfde content 2x op je Homepagina.
Op dezelfde manier kun je teksten twee keer in je website te zien krijgen als je een ‘gewone’ pagina uit je website ook als sectie op de voorpagina gebruikt.
Is dat het antwoord op je vraag?
Mooie heldere omschrijving. Mogelijk is dit thema wat voor mij toch krijg ik (nog) niet wat ik wil. In feite een heel simpele site FullWide een header (alleen maar BG color en tekst, daaronder een NAV (mogelijk een uitklap menu), content en een footer. Is dat te maken eventueel aan te passen met dit thema?
Ja hoor, dat kan. Als we tenminste hetzelfde voor ogen hebben. Stel onder Instellingen > Algemeen een andere statische pagina in dan ‘Home’ en je bent er.
Daar staat dan inderdaad nu een andere pagina. Toch begrijp ik dan niet hoe hier te kunnen maken wat ik wil. Ik zal eerst nog eens wat verder zoeken naar de mogelijkheden. Tot nu toe bedankt
Dag Louis,
eerder stelde ik je eens de vraag of je foto’s die op je homepagina verschijnen kunt weglaten op je gelinkte pagina’s. Mij lukte dat niet met een plugin.
Wat wél kan is via customizer een nieuwe pagina aan te maken welke dan verder op je website niet te zien is. En dus alleen gebruikt wordt op je homepagina inclusief uit te lichten foto.
Zo krijg ik niet dat ik op alle pagina’s een grote uitgelichte foto voorbij moet scrollen en toch een homepagina inclusief grote foto’s en parallax scrolling.
Voor mij is dit een prima oplossing! Ik dacht, ik deel het even…
Bedankt voor de update!
Hi,
ik zou graag een reactie velt onder een pagina willen, maar ik kan het niet vinden.
Is dat mogelijk, laat me zo snel mogelijk weten!
Groetjes,
Juno Sibeijn
Bedoel je de instelling “Sta toe dat bezoekers kunnen reageren op nieuwe artikelen” onder Instellingen > Reacties?
Al een tijdje ben ik aan het spelen met dit thema. En ik loop nu aan tegen de “uitgelichte afbeelding”. Ik vind het op de home met het parallax scrollen geweldig maar ik wil niet zo’n grote foto op de betreffende pagina waardoor men eerst die foto voorbij moet scrollen tot de nuttige content.
is er een manier om de foto op de pagina ‘uit te zetten’ maar wel als uitgelichte afbeelding op de voorpagina/home/statische pagina te gebruiken?
Ik heb een ‘hide featured image’ plugin al geprobeerd en dat werkte niet helaas.
Ik hoop dat je me kunt helpen.
Jammer dat die plug-in niet werkt. Je kunt met de volgende code de featured image op (alle) pagina’s verbergen:
.page .single-featured-image-header {
display: none;
}
Deze code kun je toevoegen aan het style.css bestand van twenty seventeen (Weergave > Editor > style.css), maar beter is het om via een kind-thema te werken. Let op, je kunt je thema en dus je website hiermee kapot maken als je hier fouten maakt! Zorg dus voor een goede backup als je deze aanpassing gaat doen.
Eventueel kan ik je helpen met het aanpassen van je thema, neem dan even contact op via het contactformulier.
Mooie uitleg! Dank. Weet jij toevallig hoe je het woord ‘bericht’ bovenaan de frontpage van het thema weg krijgt?
Dankjewel! Hoe je een titel kunt verbergen heb ik hier uitgelegd. Als je onder Instellingen > Lezen geen blogpagina hebt ingesteld, moet je dat eerst even doen (eerst een nieuwe pagina aanmaken).
Volgens mij is dit niet wat Roy bedoeld, ik loop er ook tegenaan en heb geen idee hoe ik het woord “bericht” boven een bericht weg moet krijgen en waar dat in de CSS terug te vinden is.
Ah, je hebt denk ik gelijk. Toch zul je hiervoor het thema moeten aanpassen met iets als:
.blog .page-title { display: none; }
Hi Louis,
Fijn je uitleg, ook ik ben een “starter”, is het mogelijk om nog een extra “voorpagina sectie 5 inhoud” aan te maken. Zoja, hoe doe ik dit het beste? Ik heb 6 kopjes en die zou ik het liefste allemaal in mijn layout hebben.
Bedankt voor je complimenten. Je vraag wordt beantwoord in een post op WP Colt. De oplossing komt in feite weer neer op het maken van een Child Thema.
Als ik bij theme twentyseventeen een child theme wil maken en exact jouw beschrijving daarvan volg, krijg ik na het activeren van het child theme niet exact mijn website weergave, terwijl ik nog niets heb veranderd. Enig idee wat er fout is gegaan?
Zonder wat meer details kan ik daar weinig over zeggen. Hoe ziet “niet exact mijn website weergave” er bijvoorbeeld uit? Zijn de oorspronkelijk thema instellingen terug naar default gezet na activatie van het child theme?
Hi ik heb een vraagje Wanner je in je pagina layout kiest voor twee kolommen heb ik links de titel staan en ver niets. Ik wil onder de titel in de eerste kolom ook een image kunnen plaatsen. Hoe doe je dat? iemand enig idee?
Sorry voor de late reactie. Wat je zegt klopt. Het aanpassen daarvan kan wederom alleen door aanpassingen te maken in de code van het thema. Dat wil zeggen, ik ben nog geen plugins tegengekomen die dit voor je doen, iets wat in principe ook zou kunnen.
Hoi Louis,
Dank je wel voor je info daar kan ik wat mee het is helder 🙂
Heb nog wel een vraagje, ik zou graag de witte pagina’s een andere achtergrond of kleur willen geven echter kan dat nergens vinden. Heb je voor mij tips hierom trent.
Mijn dank is groot 🙂
Happy groet,
Ook dit is denk ik een gevalletje Child Theme met een CSS background-color. Twenty Seventeen heeft zelf niet de mogelijkheid om een achtergrondkleur in te stellen.
Hi, ik heb een header beeld gemaakt op 2000×1200 px las ik deze upload en in de header customizer plak is het beeld veel te groot. Hoe kan ik dit aanpassen?
Dat hangt een beetje af van wat je bedoelt met ’te groot’. 2000 bij 1200 pixels zou goed moeten zijn, dat is ook de afmeting van de standaard header.
Als ik klik op een menu-item dan springt het beeld wel naar naar beneden (dus de juiste plek), maar zie ik alleen de ingestelde afbeelding en niet de tekst…kan ik ingesteld krijgen dat je naast een deel van de afbeelding ook een deel van de tekst ziet?
Ja, dat kan. Maar een mooi scroll effect is nog wel wat (programmeer)werk. Met anchors kun je een menu link maken. Nadeel daarvan is dat die de hele pagina herlaadt:
Voer in je bericht of pagina, in de tekst tab, de volgende HTML in:
<a name=”test”></a>
Bovenstaande is een anchor. Je kunt meteen naar de locatie van het anchor in je pagina springen door #test achter je URL te zetten. Stel ik had dit Anchor in mijn website, dan zou ik het kunnen gebruiken door een link https://wpress-cursus.nl/#test in mijn menu op te nemen.
Hi Louis, ik ben zo’n ‘starter’ en het was idd even zoeken hoe dat werkt, die parallax pagina. Ik vind het er leuk uitzien, ben benieuwd of bezoekers ook uit zichzelf naar onder scrollen. Is het ook mogelijk van een tweede pagina een parallax te maken?
Met Twenty Seventeen kun je alleen de voorpagina parallax maken. Als je ook andere pagina’s parallax wilt maken moet je eens kijken naar een pagebuilder als Divi of Visual Composer. Sommige andere thema’s hebben natuurlijk ook parallax, je kunt er bijvoorbeeld op zoeken in de WordPress Theme Directory.
inderdaad een mooi thema. Hoewel ik een probleem heb met het lettertype. Bij de bold versie wordt de i een l en dit leest zeer vervelend. Kan het lettertype ergens gewijzigd worden?
En kan ik in een blok tekst twee kolommen maken? Dit is namelijk nodig op de tarievenpagina. De prijzen moeten in 1 lijn staan
Het lettertype kun je het beste aanpassen via een child theme, maar bij mij ziet ook de vet gedrukte tekst op jouw website er goed uit.
De tekst in twee kolommen kun je het beste oplossen in HTML met een gestyled div element of, nog makkelijker, een tabel.