Webflow basiscursus: Content aanpassen en CMS beheren 💻

Ik leg uit hoe je content kan toevoegen, kan editen en hoe de CMS werkt.

Dus als je kleine details vindt op de website die niet helemaal correct staan, kan je die helemaal gemakkelijk aanpassen.

Het belangrijkste concept om te weten, is dat je twee verschillende soorten content hebt.

Statische content, dat is content dat als je het op één plek aanpast, het ook echt alleen daarvoor aangepast wordt.

Of dynamische content, en als je dan iets aanpast, dan wordt dat overal op de site waar dat voorkomt, wordt dat ook direct aangepast.

Dat noemen we ook wel CMS content.

En dat is eigenlijk gelinkt aan een database.

Gaan we zo direct even direct doorheen.

Voordat we beginnen, wat we altijd doen, klik hier op het logootje van Webflow, dan Preview Role en dan gaan we naar Marketer of Content Editor.

In dit geval doe ik Marketer, bij dat hebben ze net een iets andere permission role.

Eigenlijk zorgt dit ervoor dat je wel dingen kan aanpassen op de website, maar niet zo snel per ongeluk iets kapot kan maken.

Laten we eerst beginnen met hoe je direct hier in je scherm teksten en afbeeldingen aanpast.

Als ik hier met mijn muis overheen hol, zie je al dat daar een kader omheen komt.

Het is een teken dat dat hier gemakkelijk aan te passen is.

Het kan op twee manieren.

Eén, je klikt hier, je dubbelklikt en dan begin je direct te typen.

Begin met typen.

En dan heb je je tekst al aangepast, als je er tevreden mee bent ga je hier naar publish dan kan je hem eerst even op het staging domein neerzetten dan kan je het dan helemaal live zien in je browser en als je tevreden bent ga je hier naar productie, klik je die aan en dan zit je net live maar in dit geval willen we nog wat meer editen ik doe even command z om het weer terug te zetten want misschien wil je ook wel buttons aanpassen hier in de rechterkant en die kan je op verschillende manieren aanpassen.

Wat ik zelf altijd aanraad is gewoon één keer klikken en dan krijg je hier, het zal er waarschijnlijk meer zo uitzien bij jullie, krijg je hier aan de rechterkant allemaal opties.

Het voordeel hiervan is, als je gewoon dingen direct hier aanpast, kan je alleen dingen aanpassen die ook echt direct zichtbaar zijn.

Maar in sommige gevallen heb je content die niet hier direct zichtbaar is.

En die komt wel tevoorschijn en wordt wel editable op het moment dat je het doet via deze rechterpaneel.

Dit kan er bij jullie, denk ik, ongeveer zo uitzien.

Ik vind dat het fijn om die even dicht te klappen, zodat ik wat meer overzicht heb.

En dan zie je hier dat je de tekst kan aanpassen van de titel.

van de button kan je de tekst aanpassen en de link dus dan kan je kiezen of die naar een specifieke url gaat maar in de meeste gevallen wil je die gewoon op page houden en dan kan je hier je pagina's kiezen van je website het geldt ook voor button 2 hier kan je ook zelfs die weghalen kan je hem hier op hidden zetten en in dit geval kan je de visual hier aanpassen dan klik je hier op replace En dan kan je hem hier met een andere visual invullen.

Dit is een beetje een uniek geval, omdat hij daar precies goed in moet passen.

Dus deze is misschien net wat lastiger.

Maar deze laat ook, vooral nu even zo.

Omdat hij er op deze manier mooi in past.

Goed om te weten is dat de meeste dingen die je hier direct in je canvas, noemen ze dat, hier in je canvas ziet, die zien er ook echt zo uit zoals ze op de website komen.

Maar niet in alle gevallen.

Het is 10% dat echt alleen met code visueel wordt op het moment dat die op de live website staat.

en niet alle soorten code worden direct gerenderd hier in Webflow.

Dus soms kan het er net een beetje iets anders uitzien.

Daarom raad ik aan als je twijfelt, even naar klikken op het staging domein en dan hier op het pijltje ga je dan naar toe en dan kan je het echt in je browser zien.

Dat is altijd wel zo handig.

Als we hier naar beneden scrollen, dan hebben we eigenlijk hetzelfde principe.

Je ziet hier komt het dingetje naar boven en dan kan je hem hier aanpassen.

En verder heb je dingen aan de rechterkant.

Voor een later stadium wil je misschien zelf pagina's gaan bouwen en de styling veranderen.

Dan heb je dus opties om bijvoorbeeld een heading weg te halen of een paragraaf, omdat je die simpelweg niet meer nodig hebt.

Er zitten wat limitaties aan, dus binnen het framework dat ik heb opgezet, maar je kan dus wel daar een klein beetje mee spelen.

Hier heb je onze diensten, die kan je aanpassen op deze manier.

Dan scrollen we hier naar beneden.

Waar we hier op komen is eigenlijk al het stukje CMS content.

Dus wat hier anders aan is, is dat op het moment dat ik hier iets zou aanpassen, dan verandert dat op meerdere plekken op de website.

Ik raad dat het daarom dat niet hier direct in de canvas te doen.

Vaak, ook als je hier dus op klikt, zie je ook niet hier aan de rechterkant daar textuele opties of aanpasopties voor komen.

Want dit gaat namelijk hier over de bovenkant.

En als dat niet direct opspringt, dan kan je ervan uitgaan dat dat CMS-content is.

komt dat die gelinkt is aan de database.

Dus daar gaan we direct even naartoe.

We gaan hier naar links boven CMS en dan kan je hier de databases zien.

Dus we hebben hier de FAQ's, de clients, de services.

de nieuwsartikel in de voeten, teammembers en de bijzondere audits.

In dit geval gaan we hier naar services toe.

Dan hebben we de bijzondere audit, timmeting en de duurzaamheidsverificatie.

Dan zegt het dat we de timmeting willen aanpassen.

Dan zie je hier de naam, het laatste stukje van de URL, de titel, subtitel, de kleur voor de achtergrond, die wordt ook overal meegenomen, de order of appearance, dus als alle drie naast elkaar komen, komt die dan in het midden te staan of vooraan.

Let erop dat dit geen positienummer is, dus je kan hier zelf getalletjes invullen en dan pakt u hem gewoon van klein naar groot.

Dus daar moet je dan mee spelen.

Dan kan je de image toevoegen en ook de fetch sheet die gedaan kan worden op de pagina.

En op deze manier, als je hier dus iets zou aanpassen, terug naar de homepage, dan wordt dat ook hier direct doorgevoerd.

Dat geldt dus voor hier direct, maar ook als ik dan naar de TimMating pagina ga.

Overigens, hier kan je door je pagina's heen, dat kan je ook hierboven doen.

Dan gaan we even naar TimMating, en dan zie je hier dus dat die kleur weer terugkomt, diezelfde teksten.

Als ik hier klik, ja hier heb je ook wat opties, maar dat zijn eigenlijk wat meer technische dingen.

Dus dat is vaak hier, als je op je settings zit, is dat vaak wat technischer.

Hier heb je wat kleurvarianten, maar daar kan je het eigenlijk het beste ook niet aan zitten.

Dat is ook meer een development technisch dingetje.

En hier heb je dan eigenlijk gewoon weer dezelfde textuele aanpassingen als je gewend bent op de homepagina.

Dus dat is eigenlijk het aanpassen van bestaande content.

Maar wil je misschien in de toekomst ook graag dingen toevoegen?

Bijvoorbeeld, je hebt hier drie blokjes staan, dan wil je misschien graag een vierde aan toevoegen.

In dit geval kunnen we even de navigator openen en dan zie je eigenlijk hoe je pagina in elkaar zit.

Dus hier heb je alle secties, dus eigenlijk alle contentblokken en die staan allemaal hier onder elkaar.

En soms zie je dat er hier een klein pijltje voor staat en dat betekent dat je daar ook extra elementen bovenop kan toevoegen.

Dus niet alleen wijzigen wat je hebt, maar lijsten langer maken in dit geval.

dus dan zie je hier, dat noemen ze een slot en daar kan je dan zelf elementen aan toevoegen hier staat dan een service info element zit erin en met command D, dus waarschijnlijk ctrl D op Windows of command C, command V, dus copy paste dan kan je hem hier Dupliceren en dan kan je hier nieuw tekst toevoegen.

Dan kan ik dat ook weer weghalen.

En in dit geval kan ik ook daarvan de volgorde aanpassen.

Dat kan je ook hier op deze manier doen.

Dat geldt overigens ook voor alle contentblokken.

Die kan je dus op deze manier van volgorde veranderen.

Ik zou dat niet aanraden.

maar mocht dat nou ooit een keertje denk je van hey waarom staat die nou andersom dan heb je hem misschien per ongeluk op een andere plek geschoven dan kan je hem op die manier weer terugzetten dus dan weet je dat hier hebben we ook weer de heading blok 1, 2, 3 en 4 de logo's die gelinkt zijn aan de CMS en dan heb je hier de factsheet.

Dus de factsheet die hadden we net gezien hier bij Services.

Dan kan je hier je factsheet PDF downloaden en als iemand daar dan...

Ik zie meteen meteen waarom.

Als iemand die dan download om het even te laten zien hoe dat er dan uitziet.

Dan zet ik hem even terug naar mijn versie.

Dan komt hij zo, bedankt voor je submission, download hier de factsheet.

Dan klikt hij erop en dan wordt automatisch de PDF gedownload.

Deze tekst staat nu in het Engels, die kan je ook gewoon in het Nederlands zetten.

Die kan je ook gewoon handmatig aanpassen.

Laten we dat even terugzetten.

Met gewoon een content, met een blokje aan de rechterkant, hoe we dat hadden.

Hier heb je de succesmessage.

Die staat dan nu in het Nederlands ingevuld.

Daarvoor is overigens die zijkant handig.

Als je bijvoorbeeld een succesmessage, die kan je niet hier direct zien, maar die kan je wel hier aan de rechterkant zien.

en je kunt dus ook je visual weer aanpassen en die wordt dan automatisch weer uitgesneden in dit vak hier hebben we de verschillende stappen dus hier is het aantal stappen is gecapt op 6 dus hier kan je niet oneindig dingen blijven toevoegen daarom werkt het een beetje anders dan op deze manier hier zou je er 100 kunnen toevoegen als je dat graag zou willen maar hier kunnen er maar 6 en daarom gaat het hier via een nummer met een minimaal van drie.

Op het moment dat je er maar twee hebt, dan is dit eigenlijk niet het juiste blok om dat verhaal in te vertellen, want dan zijn het niet echt stappen meer.

Dus kan je die op deze manier toevoegen, dan kan je ze hier weer allemaal aanpassen.

Eens even kijken.

Ik ga een losse video maken voor het toevoegen van klanten en rapporten.

Dat zit op een hele specifieke manier in elkaar en dat wil ik namelijk even goed en uitgebreid uitleggen.

Dus daar ga ik in een losse video over heen.

heb je over ons, deze quote is gelinkt aan dit team member, vandaar dat je die niet hier direct kan aanpassen, maar die pas je hier aan bij teams en dan ga je in Lex en dan kan je dus hier die quote aanpassen, zorg er ook alle gegevens goed in, als je daar dus dan weer mensen over ons zou toevoegen dan komt die hier bij het grid erbij dus in CMS heb je teammembers kan je hier wijzigen maar je kan ook een nieuw teammember toevoegen doen we hier een team en dan geven we hem hier een naam dit wordt automatisch ingevuld voer je hier alles in en dan ga je op create draft op create draft dan zie je hem nog niet in Webflow zelf verschijnen Je moet hem dan eerst zetten op Queue for Next Site Publish.

Op die manier wordt hij dus gerenderd hier in Webflow.

Wordt hij hier in Webflow gerenderd, staat hij nog niet direct live, maar wordt hij wel hier gerenderd en dan kan je zien hoe het eruit ziet.

Wil je hem echt direct live zetten, dan kan je gewoon op Publish Now klikken en dan wordt hij direct live gezet.

eens even kijken.

Hebben we nog contact?

Dat staat er allemaal ingevuld.

Dit gaat nu gewoon naar jullie e-mailadres toe, contactformulier.

Wat hebben we nog verder?

Oh, de FAQ's is nog een hele belangrijke.

Die kan je hier invullen.

Hier kan je alle FAQ's invullen.

En die heb ik dan gelinkt aan alle pagina's die we hebben.

en als je dat doet dan heb je hier een FAQ en dan kan je hier zeggen van ja die moet op de homepage komen bijvoorbeeld of op de contactpagina dan kan je die zo op verschillende plekken hier kan je ze een nummer geven voor de ordersortering maar omdat je omdat je die dus op verschillende pagina's hebt zal dat misschien niet altijd een op een overgenomen worden omdat je dan omdat je niet precies weet waar je ook de nummers van de anderen hebt op de pagina.

Dat is wat een beetje complex.

Dus het is in dit geval meer een indicatie van of die heel vroeg of heel laat getoond moet worden.

Dus hou daar rekening mee.

Als je tevreden bent, publish now.

En dat is de Ook de overview van Webflow, hoe je dus content aanpast en wijzigt, hoe de CMS een beetje werkt.

Dus ook nog aanvullende documentatie van Webflow zelf, die heb ik ook meegestuurd.

Dit kan je nog altijd op een later moment terugkijken.

Voor nu, heel veel succes.

Als je vragen hebt, kan je altijd even bij me terecht.