Introductie tot Webflow - Webflow hulp
Leer je weg vinden in Webflow.
In Webflow kun je je site structureren, bouwen en ontwerpen over pagina's, takken en locaties. Webflow stelt je in staat om dynamische inhoud en gegevens effectief te creëren en beheren en biedt tools om de prestaties van de site te analyseren en optimaliseren. Je kunt ook je werk delen, feedback vragen en uiteindelijk je site publiceren naar speciale omgevingen (d.w.z. staging en productie).
Je kunt toegang krijgen tot Webflow vanaf het Dashboard door op je site-miniatuur te klikken of vanuit Site-instellingen door in de bovenste werkbalk op Site openen te klikken. De tools waartoe je toegang hebt in Webflow verschillen afhankelijk van je site rol (bijv. beoordelaar, inhoudsredacteur, enz.), zodat je snel toegang hebt tot de tools die je nodig hebt — en de tools die je niet nodig hebt kunt vergeten.
Voordat je begint
Controleer Webflow's ondersteunde browsers, apparaten en schermresoluties.
Samenwerking met meerdere gebruikers
Meerdere teamleden kunnen samenwerken aan een site in Webflow. Om het ontwerpproces soepel te houden, kun je het ontwerpbeheer overdragen tussen je teamleden en in realtime zien waar anderen binnen je site werken.
Overzicht van de Webflow-interface
Wanneer je je site opent in Webflow, is het hoofdscherm dat je site toont het canvas. Rondom het canvas bevinden zich de volgende werkbalken en panelen:
- De bovenste balk bevat tabnavigatie, de contextbalk en site-acties (bijv. samenwerking & publicatietools).
- De canvasbalk bevat ongedaan maken/opnieuw doen, broodkruimelnavigatie, uitgebreide breekpunten en canvasinstellingen.
- De linker werkbalk bevat het hoofdmenu, verschillende tool- en navigatiepanelen, instellingen, site-audit en tutorials.
- De rechter werkbalk bevat elementstijlen, instellingen en interacties.
Het canvas
Het grootste gebied in Webflow is het canvas. Hier kun je in real-time met de pagina interacteren en ontwerpen. Je kunt elementen selecteren, verplaatsen en inhoud direct op de pagina bewerken. Webflow slaat je werk automatisch op, maar je kunt je site handmatig opslaan door Command + S (op Mac) of Control + S (op Windows) te drukken.
De bovenste balk
De bovenste balk geeft je snelle toegang tot ontwerpmodi, de CMS, Analyze, Optimize, lokale instellingen, een paginaswitcher en site-acties.
De hoofdtabnavigatie bevat de Ontwerp-tab, CMS-tab en Inzichten-tab.
- Ontwerp-tab — Deze tab geeft de huidige modus aan (bijv. ontwerp, bouwen, enz.) en laat je schakelen tussen modi of een pagina-tak maken. De site rol van een lid bepaalt welke modi beschikbaar zijn. Bijvoorbeeld, site managers en ontwerpers hebben toegang tot de ontwerpmodus, terwijl marketeers alleen toegang hebben tot de bouwmodus.
- CMS-tab — Opent het CMS (Content Management System) paneel, waar je Collecties, Collectie-items en E-commerce producten en categorieën kunt maken en beheren.
- Inzichten-tab — Opent het Inzichtenpaneel, waar je toegang hebt tot Analyze en Optimize. Analyze biedt site-brede analyses met bruikbare inzichten. Optimize laat je experimenten uitvoeren op je site om verschillende stijlen, lay-outs, flows, teksten, afbeeldingen en meer te testen.
Contextbalk
De contextbalk laat je site-optimalisaties beheren met Optimize en schakelen tussen lokalisaties, pagina's, Collectiepagina's, en Collectie-items. Het geeft ook aan wanneer je het hoofd-component bewerkt (in plaats van een componentinstantie), evenals de ontwerpgoedkeuringsstatus.
Site-acties
Site-acties zijn gerelateerd aan de specifieke pagina waarop je je bevindt of de site zelf. Teamleden die in realtime aan de site samenwerken, worden hier ook vermeld met een avatar of aantal.
- Analysemode — Verkrijg pagina-analyse en inzichten (bijv. hoe ver bezoekers scrollen en waar ze klikken).
- Opmerkingen — Bekijk opmerkingen van andere teamleden of voeg je eigen feedback/notities toe.
- Voorbeeld — Schakel naar voorbeeldmodus.
- Delen — Genereer een alleen-lezen site-link.
- Publiceren — Publiceer je site.
De canvasbalk
De canvasbalk bevindt zich standaard boven de canvas, maar je kunt deze verplaatsen naar beneden in de canvasinstellingen.
- Ongedaan maken/opnieuw doen iconen — Snel wijzigingen terugdraaien of opnieuw toepassen.
- Breadcrumb-navigatie — Toont de elementenhiërarchie van het geselecteerde element.
- Canvasinstellingen — Verschillende opties (bijv. linialen, hulplijnen, tekstzoomvoorbeeld).
- Breakpoints — Voorbeeld en bewerken voor verschillende apparaatformaten.
De linker werkbalk
Bevat het hoofdmenu en panelen voor website-structurering.
Klik op het Webflow-logo om toegang te krijgen tot het hoofdmenu.
- Snel zoeken naar elementen, componenten, pagina's, enz.
- Ongedaan maken/opnieuw doen acties
- Code exporteren
- Toetsenbord sneltoetsen
- CSS-voorbeeld openen
- Hulp krijgen of feedback geven
Panelen en site-activiteitlogboek
- Toevoegen paneel — Sneltoets: A
- Pagina's paneel — Sneltoets: P
- Navigator paneel — Sneltoets: Z
- Componenten paneel — Sneltoets: Shift + A
- Variabelen paneel — Sneltoets: G
- Stijlselectoren paneel — Sneltoets: J
- Middelen paneel — Sneltoets: L
- Bibliotheken paneel — Sneltoets: L
- Apps paneel — Sneltoets: E
- Site-activiteitlogboek — Ontwerpwijzigingen aan je site
Instellingen, AI-leerassistent, audits, snel zoeken en tutorials
- Instellingen paneel — Interface, zoeken, back-up, lokalisatie.
- AI-leerassistent — AI-gestuurde hulp.
- Audit paneel — Sneltoets: U.
- Snel zoeken — Sneltoets: Command + E (Mac), Control + E (Windows).
- Videotutorials paneel — Gratis videocursussen.
De rechter werkbalk
Bevat panelen voor elementstijlen, instellingen en interacties.
- Stijl paneel — Sneltoets: S.
- Elementinstellingen paneel — Sneltoets: D.
- Interactie paneel — Sneltoets: H.
FAQ
Welke browsers ondersteunt Webflow?
Webflow ondersteunt officieel de laatste drie hoofdversies van alle moderne browsers: Chrome, Edge, Firefox en Safari. Dit geldt voor zowel het platform als gepubliceerde sites.
Voor functies met beperkte ondersteuning, zie gerelateerde artikelen:
Webflow ondersteunt niet Internet Explorer.
Welke schermresoluties/apparaten ondersteunt Webflow?
Webflow vereist een desktop/laptop computer met een schermbreedte van minimaal 1268px.
Waarom is Webflow een online/gehoste app — waarom niet een downloadbare app?
Webflow is online/gehost om ontwerp in de browser en snelle updates mogelijk te maken.
- WYSIWYG ontwerp — directe invloed op HTML/CSS.
- Snelle updates — Altijd de nieuwste versie, geen handmatige updates.