Patrick HuijsApr 27, 2026
Webflow Basics: Content aanpassen en beheren đ
Webflow Basics: Content aanpassen en beheren đ
Patrick Huijs
Leer de basis van Webflow: van het aanpassen van statische en dynamische content tot het beheren van je CMS en het live publiceren van wijzigingen. Deze video laat zien hoe je veilig en eenvoudig je website beheert.
Webflow Basics: Content aanpassen en beheren đ
Patrick Huijs
Leer de basis van Webflow: van het aanpassen van statische en dynamische content tot het beheren van je CMS en het live publiceren van wijzigingen. Deze video laat zien hoe je veilig en eenvoudig je website beheert.
Chapters
00:00
Introductie Webflow Basics
Een introductie tot de basisprincipes van Webflow voor contentbeheer.
00:12
Werken als Marketer
00:45
Statische vs Dynamische content
01:18
Content aanpassen en publiceren
03:38
Afbeeldingen beheren
04:52
Werken met het CMS
06:29
Geavanceerde instellingen
07:45
Interface en navigatie
Transcript
00:00
In deze video leg ik de Webflow Basics uit.
00:03
Hoe kan je content aanpassen en meer content toevoegen.
00:08
Nou, nadat je bent ingelogd ziet het ongeveer zo uit.
00:12
Het eerste wat je altijd doet, na iedere inlog zie je linksboven, klik je op het logo en het menu.
00:19
Ga naar Preview Role en daarna Marketer.
00:22
Je ziet dat direct de layout een klein beetje verandert.
00:28
Dit komt omdat nu ben je in een beschermde omgeving.
00:31
Je kan wel content toevoegen en aanpassen, maar niet de onderliggende structuur van een website veranderen.
00:37
Zo voorkom je dat je per ongeluk iets wijzigt of kapot maakt en het dan op een manier live zet.
00:45
Om te beginnen is het goed om uit te leggen dat twee typen content zijn.
00:51
Statische content, dat betekent dat als ik het hier aanpas, het ook hier alleen wordt aangepast.
00:58
En dynamische content, dat is content gelinkt aan de CMS database.
01:03
Dat is, als je het op ÊÊn plek aanpast, wordt het overal waar dat contentstuk voorkomt, wordt het ook direct aangepast.
01:11
Denk aan bijvoorbeeld testimonials, vacatures of teamleden.
01:18
Laten we eerst even beginnen met de standaard content.
01:21
Als je met je muis overheen gaat, zie je al direct dat een border omheen komt en dat betekent dat je het kan aanpassen.
01:29
Dubbel klik en eigenlijk kan je hier direct beginnen met typen.
01:38
Klik je buiten in het veld, wordt het automatisch opgeslagen.
01:42
Het staat nu nog niet live.
01:44
Op het moment dat je het live wilt zetten, ga je hier naar publish.
01:49
kan je het eerst even testen op de staging-domain.
01:52
En als je daarmee eenmaal tevreden bent, kan je op de productiedomain aanklikken.
01:57
Die komt daar te staan op het moment dat jullie al live zijn gegaan.
02:01
En dan klik je op Publish op Selected Domain.
02:08
Klik hier, duurt ongeveer 10 seconden en vanuit daar staat de website live.
02:14
Hier kan je ook weer andere blokken aanvullen.
02:18
Bijvoorbeeld de button hier beneden.
02:20
Als je hier eenmalig op klikt, zie je dat hier aan de zijkant wat opties vrijkomen.
02:25
Dat is vaak bij elementen waar iets meer opties zijn dan alleen het veranderen van de tekst.
02:31
In dit geval kan je hier een link kiezen naar welke pagina het wordt gelinkt, de tekst van de button aanpassen, maar ook het pijltje weer onzichtbaar maken.
02:47
zijn sommige functies waarvan je niet direct snapt wat het is, dan heb je die waarschijnlijk ook niet nodig en dan zijn die daar alleen voor development purposes.
02:56
Zo in dit geval voor buttons kan je het houden bij link en bij settings.
03:01
Hieronder heb je ook weer gewoon een stuk tekst waar je dingen kan aanpassen en als je het selecteert zie je dat je het ook bold of cursief kan maken.
03:12
Mijn advies is hou het vooral allemaal lekker simpel.
03:17
Scrollen we naar beneden, dan laat ik even zien hoe je afbeeldingen aanpast.
03:22
Als je hier eenmalig op klikt, zie je dat hier een klein icoontje komt.
03:26
En vanuit daar kan je eigenlijk uit je library je afbeeldingen kiezen.
03:33
Deze worden dan direct gekropt in het formaat dat het al had.
03:40
Als hier in de iSAT library niet de juiste afbeeldingen zitten, kan je nieuwe afbeeldingen hier toevoegen of direct erin slepen vanuit je laptop.
03:55
Als we dan hier naar beneden scrollen heb je hier meer tekstafbeeldingen of tekstelementen die je kan aanpassen.
04:07
In dit geval, als je erop klikt, heb je ook wat meer opties.
04:13
Je kan ze tekst hier aanpassen.
04:17
Maar je kan ook dingen aan en uit zetten.
04:20
In dit geval gaat het dan om de 3 metrics hier beneden.
04:25
Dan heb je dus iets meer flexibele opties dat je hier kan doen.
04:31
Scrollen we naar beneden.
04:32
Dit is een blok dat is gelinkt aan de CMS database.
04:37
Op het begin zul je nog niet direct zien wat wel en niet aan de CMS gelinkt is, dus dat gaan we nu even behandelen.
04:45
Als je hier klikt op CMS, dan zie je hier een lijst met alle verschillende databases.
04:51
Teammembers, FAQ's, testimonials, clientlogos, sectoren voor de filters en de vacatures.
05:02
In dit geval willen we de testimonials aanpassen.
05:06
Gaan we hier naartoe.
05:08
Ik heb hier eentje staan.
05:09
Hier kan je een naam geven voor eigen referentie.
05:13
En dan kan je hier de content wijzigen van de testimonial.
05:17
Hier kan je beginnen met typen.
05:21
Maar je kan hier ook andere content types toevoegen.
05:25
In het geval van een testimonial zal je deze niet nodig hebben.
05:29
Dus hou het lekker simpel met standaard tekst.
05:32
En wellicht wat bold gedrukt.
05:36
Hier voer je de naam in, het bedrijf en nog een foto.
05:41
Vanuit hier kan je hem direct publiceren.
05:44
Je kan hem ook offline halen of hier archiveren, verwijderen of dupliceren.
05:52
Je kan hem hier ook alvast klaarzetten, zodat op het moment dat je de website de volgende keer publiceert, dat deze direct wordt meegenomen.
06:08
Hier is nog een goed voorbeeld van wanneer je meerdere opties hebt aan de rechterkant.
06:13
Dus je kan hier de teksten gewoon aanpassen.
06:17
Je kan hier ook de afbeelding aanpassen zoals we dat net gedaan hebben.
06:22
Maar je hebt hier nog extra elementen waarvan je niet alle content direct kan zien.
06:28
En daarvoor zijn deze blokjes heel geschikt.
06:32
Dus als je hier eenmalig op klikt, dan kan je ook direct de tekst die hier normaal gesproken zichtbaar wordt wanneer je op klikt, die kan je dan hier aan de zijkant invullen.
06:43
Omdat je die niet direct hier op je scherm ziet, hebben we dat op deze manier opgelost.
06:54
Je ziet dat sommige animaties ook al zichtbaar zijn direct hier in Webflow, maar niet alle animaties.
07:02
Dat ligt net aan op welke manier deze gecodeerd zijn.
07:05
Dus als je een goede impressie wilt krijgen van hoe de website uitziet na je aanpassingen, dan kan je het beste hier even op staging publiceren.
07:16
Op deze met dit perretje naar de staging domein gaan.
07:19
Dan kan je het daar goed bekijken voordat je het live zet.
07:24
Ik zal nog even een klein beetje door de interface heen gaan.
07:27
Hier bovenin kan je switchen naar verschillende pagina's en dat kan je hier aan de linkerkant ook doen.
07:36
Even naar kandidaten gaan.
07:39
Verder hebben we hier nog de asset panel en later leg ik nog uit wat je met de componenten zou kunnen doen.
07:48
Je hebt hier de kandidatenpagina.
07:51
Het werkt op dezelfde manier.
07:53
Je kan hier zelf je elementen toevoegen.
07:58
Je kan op deze manier de blokjes hier aanpassen.
08:03
En uiteraard ook de afbeeldingen.
08:06
Hier en daar zijn wat opties om dingen weg te halen of juist toe te voegen.
08:14
En dat is hoe je content op je website aanpast en nieuwe content toevoegt.
Comments
Comments
No comments yet