Wat is een FSE full site editing thema?
Omdat Greenshift een van de beste, zo niet het beste, FSE thema is dat we meegemaakt hebben, volgt hier een uitleg over full site editing waarbij we regelmatig refereren aan het Greenshift FSE thema. De uitleg bevat zowel de verschillen met een klassiek block thema, als uitleg hoe je een FSE thema gebruikt.
Het verschil tussen een klassiek thema en een FSE thema (full site editing)
Templates
Een klassiek thema bevat een min of meer voorgeprogrammeerd aantal manieren om de pagina’s en posts te tonen aan de bezoeker. De manier waarop dit is bepaald, heet een ‘template’. Er is een template voor een pagina, een post, een archief pagina, etc. Het naar je eigen wensen aanpassen hiervan vereist redelijk veel technische kennis. Dat is ook een van de redenen dat veel websites qua pagina-indeling best veel op elkaar lijken. Een FSE thema heet niet voor niets zo: het staat voor ‘full site editing‘: je kunt de hele site middels blocks bewerken, alsof het pagina’s zijn. Een FSE thema heeft ook templates. Deze zijn echter heel eenvoudig aan te passen en zelfs zelf te creëren.
Verschil templates klassiek en FSE
Verschil templates klassiek en FSE
Het technische verschil is dat een template van een klassiek (block) thema geschreven is in een speciale programmataal, namelijk PHP. Een template van een FSE thema heeft een veel eenvoudiger manier van schijven, in HTML.
Elke pagina die qua ontwerp leuk vindt, kun je in WordPress bekijken in HTML-code. Die code kun je met copy en paste in een FSE-template zetten en bewaren; en je hebt de template aangepast!
De originele template wordt ook bewaard
Een FSE thema bewaart altijd de originele templare; de wijzigingen die je zelf aanbrengt worden bewaard in de WordPress database. Daardoor kun je in geval van nood altijd terug naar de originele versie van een template.
Elke pagina die qua ontwerp leuk vindt, kun je in WordPress bekijken in HTML-code. Die code kun je met copy en paste in een FSE-template zetten en bewaren; en je hebt de template aangepast!
De originele template wordt ook bewaard
Een FSE thema bewaart altijd de originele templare; de wijzigingen die je zelf aanbrengt worden bewaard in de WordPress database. Daardoor kun je in geval van nood altijd terug naar de originele versie van een template.
Snelheid en geen crashes
Omdat een klassiek thema veel meer ‘voorgeprogrammeerde’ templates en andere PHP-bestanden bevat, en rekeing moet houden met allerlei toepassingen, is een FSE thema veel lichter en over het algemeen aanzienlijk sneller. Sneller voor de webbouwer, maar ook voor de bezoeker.
Greenshift FSE heeft daarnaast als voordeel dat het niet alleen een FSE thema is, maar dat elk onderdeel pas geladen wordt als het daadwerkelijk nodig is. Het basisthema dat geladen wordt is slechts 2 KB; dat is onvoorstelbaar weinig. Als ontwerper/webbouwer betekent dit dat het bewaren van een pagina niet meerdere seconden of zelfs een halve minuut duurt, maar maximaal een seconde. Een klassiek thema kent een heel vervelende eigenschap die elke gebruiker wel een meegemaakt heeft; je bewaard een pagina, en in een ander browservenster ververs je de inhoud om de gewijzigde pagina te bekijken. Als je dit verversen iets te snel doet, crashed in veel gevallen de boel… je moet de browser vensters afsluiten en alles opnieuw openen om verder te kunnen gaan. Als je pech hebt, zijn zelfs de laatste wijzigingen niet goed bewaard. Dit is mij sinds het in gebruik nemen van het Greenshift FSE thema niet meer overkomen.
Greenshift FSE heeft daarnaast als voordeel dat het niet alleen een FSE thema is, maar dat elk onderdeel pas geladen wordt als het daadwerkelijk nodig is. Het basisthema dat geladen wordt is slechts 2 KB; dat is onvoorstelbaar weinig. Als ontwerper/webbouwer betekent dit dat het bewaren van een pagina niet meerdere seconden of zelfs een halve minuut duurt, maar maximaal een seconde. Een klassiek thema kent een heel vervelende eigenschap die elke gebruiker wel een meegemaakt heeft; je bewaard een pagina, en in een ander browservenster ververs je de inhoud om de gewijzigde pagina te bekijken. Als je dit verversen iets te snel doet, crashed in veel gevallen de boel… je moet de browser vensters afsluiten en alles opnieuw openen om verder te kunnen gaan. Als je pech hebt, zijn zelfs de laatste wijzigingen niet goed bewaard. Dit is mij sinds het in gebruik nemen van het Greenshift FSE thema niet meer overkomen.
Je customizer is verdwenen
Ja, het is waar. Een FSE thema heeft geen customizer meer zoals je dat misschien gewend bent. Dat heeft een reden. De customizer van het klassieke thema geeft voornamelijk voorgeprogrammeerde keuzes weer, die je dan kunt aanklikken. Een FSE thema biedt je veel meer mogelijkheden, dus dat is niet van toepassing. Daarvoor in de plaats is het Stylebook (ofwel Stijlboek) gekomen. Bij Greenshift bereik je het Stijlboek door de Homepage te openen in de Bewerkmodus, en rechtsboven op ‘Stijlen’ te klikken (het icoon lijkt op het yin/yang teken) en vervolgens op het Oog icoon (Stijlboek). In het Stijlboek zie je alle huidige instellingen, en kun je deze direct aanpassen bij instellingen. Je kunt hier echt onvoorstelbaar veel instellen. De tabs bovenaan zijn afhankelijk van de geïnstalleerde plug-ins: als je alleen het Greenshift thema gebruikt, zul je minder tabs te zien krijgen, dan als je ook de Greenshift plug-ins geïnstalleerd hebt. Hou er rekening mee dat elke verandering betrekking heeft op de hele website.
Hiernaast zie de customizer van klassieke thema’s. Deze is in een FSE thema geheel overbodig geworden.
Alle pagina opties en widgets zijn weg
Een FSE thema heeft geen van beide meer. Althans, niet in die vorm.
Een degelijk FSE thema heeft van sommige templates een variatie. Greenshift heeft bijvoorbeeld een pagina template en een pagina template zonder titel. Als je de titel wilt laten afwijken van de andere pagina’s, kun je die gebruiken. Daarnaast is het heel eenvoudig om een extra unieke variatie te maken in een FSE thema.
De widgets zijn helemaal verdwenen. Dat is terecht; ik gebruik ze al vanaf 2016 niet meer. Ze zijn onhandig, het combineren van widgets in één kolom is soms lastig en als je er een aanpast, beïnvloedt dat veelal meerdere pagina’s. Bijna elke website ontwerper/bouwer maakt vandaag de dag gebruik van kolommen, en daar kun je letterlijk alles inzetten.
Een degelijk FSE thema heeft van sommige templates een variatie. Greenshift heeft bijvoorbeeld een pagina template en een pagina template zonder titel. Als je de titel wilt laten afwijken van de andere pagina’s, kun je die gebruiken. Daarnaast is het heel eenvoudig om een extra unieke variatie te maken in een FSE thema.
De widgets zijn helemaal verdwenen. Dat is terecht; ik gebruik ze al vanaf 2016 niet meer. Ze zijn onhandig, het combineren van widgets in één kolom is soms lastig en als je er een aanpast, beïnvloedt dat veelal meerdere pagina’s. Bijna elke website ontwerper/bouwer maakt vandaag de dag gebruik van kolommen, en daar kun je letterlijk alles inzetten.
De pagina opties van een klassiek thema zijn geheel overbodig in een FSE (Full site editing) thema. FSE biedt namelijk niet alleen deze opties, maar een oneindige hoeveelheid opties. En je kunt zoveel templates, of variaties daarop, maken als je wilt.
FSE is in ontwikkeling en dat merk je
De gebruikersinterface van de WordPress FSE thema’s is niet slecht, maar de structuur kan verbetering gebruiken. Dat merk je het beste als je het thema aan het instellen bent. Een aantal instellingen wijzig je elders.
Headings
Alhoewel de wijzigingen in de soorten headings (H1, H2, etc.) meteen zichtbaar zijn in het stijlboek, kun je nog niet alles daar aanpassen. Dat doe je bij Admin, weergave, theme options, stylebook.
Kleuren (global)
Een FSE thema gebruikt globale kleuren. Dat heeft twee voordelen; je kunt bij het kiezen van een kleur de juiste kleur aanklikken zonder op te zoeken en als je besluit de stijl van de site aan te passen, doe je dat bij het stylebook en overal waar je die kleurkeuze gemaakt had, wordt de kleur aangepast. Hierna hebben we het ook nog over welke prioriteit elke instelling heeft.
Basiskleuren en nightmode
Hou in de gaten dat een FSE thema, zoals Greenshift FSE, twee belangrijke kleuren kent: Basiskleur inhoud en Contrastkleur inhoud. De eerste is de tekst en de tweede de achtergrond. In de nightmode worden deze omgedraaid!
Kleuren per
Fonts
Standaard zijn over het algemeen alle Google fonts beschikbaar in elk block. Je kunt echter ook kiezen om een local font te uploaden, bijvoorbeeld omdat je zakendoet in Duitsland en de privacy wetgeving. Uploaden doe je bij Admin, weergave, theme options, global settings. Instellen doe je bij Admin, weergave, theme options.
Breakpoints
Je kunt de overgang van het ene device naar het andere, de breakpoints, zelf instellen. Dat doe je bij Admin, weergave, theme options, global settings.
Meer instellingen
Bij sommige FSE thema’s, zoals Greenshift, kun je ook andere zaken instellen. Zoals het uitschakelen van kolom padding in het Row block, de standaard waardes zoals px, en nog meer. Dat doe je bij Admin, weergave, theme options, global settings.
Headings
Alhoewel de wijzigingen in de soorten headings (H1, H2, etc.) meteen zichtbaar zijn in het stijlboek, kun je nog niet alles daar aanpassen. Dat doe je bij Admin, weergave, theme options, stylebook.
Kleuren (global)
Een FSE thema gebruikt globale kleuren. Dat heeft twee voordelen; je kunt bij het kiezen van een kleur de juiste kleur aanklikken zonder op te zoeken en als je besluit de stijl van de site aan te passen, doe je dat bij het stylebook en overal waar je die kleurkeuze gemaakt had, wordt de kleur aangepast. Hierna hebben we het ook nog over welke prioriteit elke instelling heeft.
Basiskleuren en nightmode
Hou in de gaten dat een FSE thema, zoals Greenshift FSE, twee belangrijke kleuren kent: Basiskleur inhoud en Contrastkleur inhoud. De eerste is de tekst en de tweede de achtergrond. In de nightmode worden deze omgedraaid!
Kleuren per
Fonts
Standaard zijn over het algemeen alle Google fonts beschikbaar in elk block. Je kunt echter ook kiezen om een local font te uploaden, bijvoorbeeld omdat je zakendoet in Duitsland en de privacy wetgeving. Uploaden doe je bij Admin, weergave, theme options, global settings. Instellen doe je bij Admin, weergave, theme options.
Breakpoints
Je kunt de overgang van het ene device naar het andere, de breakpoints, zelf instellen. Dat doe je bij Admin, weergave, theme options, global settings.
Meer instellingen
Bij sommige FSE thema’s, zoals Greenshift, kun je ook andere zaken instellen. Zoals het uitschakelen van kolom padding in het Row block, de standaard waardes zoals px, en nog meer. Dat doe je bij Admin, weergave, theme options, global settings.
Prioriteit
Een goed thema heeft een prioriteitschema.
Dat klinkt ingewikkeld, maar dat is het niet en het ss belangrijk te weten welke instelling prioriteit heeft boven een andere.
Bij bewerken site heb je rechtsboven het Stijlen icoon. Als je daarop klikt, krijg je een overzicht te zien van Typografie, kleuren, schaduwen en lay-out.
Als je bijvoorbeeld op Kleuren klikt en dan palet, krijg je alle ingestelde kleuren te zien. Als je de muis stilhoudt boven een kleur krijg je een pop-up te zien met de toepassing van die kleur. Elke kleur kun je hier aanpassen.
Ook bij Kleuren is het kopje Elementen. Hier kun je per element een kleur aangeven. Ook bij de kop Blokken kun je zaken instellen zoals de kleur,
Let op: de kleuren die je bij elk block instelt hebben prioriteit boven de kleuren van de Elementen. Als er bij een block geen instelling wordt gevonden, kijkt het systeem welke kleur ingesteld is bij Elementen en gebruikt die.
Bij Typegrafie werkt dit exact zo. Bij Typegrafie stel je in per element. Bij de Blokken kun je ook Typegrafie instellingen ingeven., Deze hebben prioriteit boven de Element instellingen.
Ook belangrijk: bij Lay-out stel je de breedte van de content inhoud en de hele breedte in, evenals de padding van de pagina lay-out en de blokafstand (afstand bijvoorbeeld tussen blokken van een query).
Dat klinkt ingewikkeld, maar dat is het niet en het ss belangrijk te weten welke instelling prioriteit heeft boven een andere.
Bij bewerken site heb je rechtsboven het Stijlen icoon. Als je daarop klikt, krijg je een overzicht te zien van Typografie, kleuren, schaduwen en lay-out.
Als je bijvoorbeeld op Kleuren klikt en dan palet, krijg je alle ingestelde kleuren te zien. Als je de muis stilhoudt boven een kleur krijg je een pop-up te zien met de toepassing van die kleur. Elke kleur kun je hier aanpassen.
Ook bij Kleuren is het kopje Elementen. Hier kun je per element een kleur aangeven. Ook bij de kop Blokken kun je zaken instellen zoals de kleur,
Let op: de kleuren die je bij elk block instelt hebben prioriteit boven de kleuren van de Elementen. Als er bij een block geen instelling wordt gevonden, kijkt het systeem welke kleur ingesteld is bij Elementen en gebruikt die.
Bij Typegrafie werkt dit exact zo. Bij Typegrafie stel je in per element. Bij de Blokken kun je ook Typegrafie instellingen ingeven., Deze hebben prioriteit boven de Element instellingen.
Ook belangrijk: bij Lay-out stel je de breedte van de content inhoud en de hele breedte in, evenals de padding van de pagina lay-out en de blokafstand (afstand bijvoorbeeld tussen blokken van een query).
Header, content en footer werken net anders
In principe is elke pagina of post gebaseerd op een template, welke bestaat uit een header (met het logo en navigatie menu), de content (het deel waar alle informatie van de webpagina staat) en de footer (het deel waarop je vaak wat bedrijfsdetails en copyright e.d. zet). Dit geldt voor zowel een klassiek als een FSE thema. De manier waarop dit gebeurt, is echter totaal verschillend.
Reusable templates
Het Greenshift thema kent een functie die heet ‘Reusable templates’ ofwel herbruikbare templates (ik gebruik hier wel het Engelse woord, omdat dit gelijk is de term in het menu).
Dit wordt voornamelijk gebruikt om headers en footers te maken. Je kunt dus, geheel naar je eigen idee en smaak, een header maken met je eigen kleuren, logo, het soort menu naar wens zoals een gewoon of megamenu, socials of wat je maar wilt. Datzelfde betreft de footer. Vervolgens kun je deze koppelen aan een of meerdere templates, maar ook een bijvoorbeeld één specifieke pagina waar je een andere header wilt toepassen. Dit is ook mogelijk in thema’s als Divi en Kadence, maar moeilijker en vaak heb je de duurste versie nodig van het thema om dit mogelijk te maken. In bijvoorbeeld Divi is dit wel weer eenvoudig te realiseren, maar Divi zit echt letterlijk vol bugs en problemen, en is tergend langzaam, zowel voor de bouwer als de bezoeker. Greenshift FSE heeft dit gewoon standaard ingebouwd.
Dit wordt voornamelijk gebruikt om headers en footers te maken. Je kunt dus, geheel naar je eigen idee en smaak, een header maken met je eigen kleuren, logo, het soort menu naar wens zoals een gewoon of megamenu, socials of wat je maar wilt. Datzelfde betreft de footer. Vervolgens kun je deze koppelen aan een of meerdere templates, maar ook een bijvoorbeeld één specifieke pagina waar je een andere header wilt toepassen. Dit is ook mogelijk in thema’s als Divi en Kadence, maar moeilijker en vaak heb je de duurste versie nodig van het thema om dit mogelijk te maken. In bijvoorbeeld Divi is dit wel weer eenvoudig te realiseren, maar Divi zit echt letterlijk vol bugs en problemen, en is tergend langzaam, zowel voor de bouwer als de bezoeker. Greenshift FSE heeft dit gewoon standaard ingebouwd.
Hoe wijzig je een header of footer in FSE (Greenshift)?
Dat kun je op meerdere manieren doen. Ik ga ervan uit dat je al een pagina hebt, met een header en footer.
- Ga naar een willekeurige pagina.
- klik op ‘Site bewerken’.
- Dit opent de totale opbouw van de template van de huidige pagina, met de header, het content deel (waar je de informatie in plaatst) en de footer.
- Je activeert met je muis het element dat je wilt bewerken; er komt een paarse rand omheen.
- Bovenin klik je op ‘Origineel bewerken’.
Header
- De header opent nu in de bewerkmodus.
- Als je linksboven de lijstweergave opent, zie je de opbouw van de header.
- Dat is in principe altijd een Group bovenaan. Als je die opent, zie je een rij met een Site logo block, soms een Heading block (voor de naam van je site) en een Navigatie block.
- Het navigatiemenu kun je ook openen, waarna je alle delen ziet waar het navigatiemenu uit bestaat.
Elk deel kun je naar wens aanpassen, kleur, lettertype, breedte of hoogte, marge en padding. Zodra je dit na het aanpassen bewaard hebt, worden de veranderingen op alle pagina’s doorgevoerd waar je deze header toegepast hebt.
Sticky header
- Maak de Groep actief.
- Klik in de rechterkolom op advanced.
- Kies Sticky to head on scroll
- Je kunt ook een sticky kleur kiezen: dan krijgt de header een andere achtergrond kleur, zodra deze sticky is.
- Ook kun je daar een transparante header instellen.
Content
Dit is het middeldeel van de template. Hier staat bij elke aangemaakte pagina de tekst die je plaatst voor de bezoeker. Eén blok is daar verplicht: het ‘Inhoud’ blok. Hou er rekeing mee dat je vrij bent om elk ander blok te plaatsen in het content deel, maar dat die zich gedagen als statisch blok; allen het Inhoud blok is dynamisch in die zin dat het zich aanpast aan de teksten en illustraties die je later gaat plaatsen op een pagina. Maar als het juist de bedoeling is dat elke pagina een leuk logo of een vaste tekst bevat, dan kun je die vast in de template plaatsen.
Footer
Ook hier kun je alles naar wens aanpassen. kleuren, lettertype, marge en padding. Ook deze veranderingen worden op alle pagina’s doorgevoerd waar je de footer toegepast hebt.
Let op: Ik denk dat het een schoonheidsfoutje is van WordPress FSE thema’s, maar bij de header wordt soms gevraagd of je het origineel wilt bewerken, bij de footer niet. In beide gevallen bewerk je wel degelijk het origineel.
Nieuwe pagina template maken
Je kunt op eenvoudige wijze een geheel ‘verse’ template maken.
Open een bestaande pagina, en klik op Bewerken. In de rechterklolom klik je op de naam van de template achter het woord “template’. In de pop-up die nu opent kun je de template bewerken, van template wisselen of een nieuwe template maken.
- Als je kiest voor nieuwe template maken, kies je een naam en klikt op Maken.
- Je ziet een geheel nieuwe, blanco template. Kies een header *, een footer*, plaats op de template wat je wilt en bewaar.
- Daarna moet je op die pagina nog wel middels ‘template wisselen’ de nieuwe template kiezen.
* Je kunt ervoor kiezen om hier een andere header en footer te kiezen of te maken dan de andere pagina template. Die zijn dan alleen zichtbaar op pagina’s met deze (nieuwe) template.
- Je kunt alle soorten templates maken door in het Admin menu te klikken op Weergave, Editor en dan Templates.
- Rechtsboven klik je op Nieuwe template maken.
- Vervolgens krijg je een uitgebreide keuze te zien, van het soort template die je gaat maken; pagina, archief, index of product, etc.
Importeren van Greenshift templates
Als je de juiste plugins van Greenshift hebt aangeschaft en geïnstalleerd, kun je rechtboven bij het Greenshift helpers’ icoon extra templates installeren, bijvoorbeeld voor WooCommerce. Reeds gemaakte en bewaarde templates of elementen kun je daar ook downloaden.
Stijlen
