Vorige les
Volgende les
webflow-blueprint
Geen vorige les
Geen volgende les
De Webflow Blueprint is de ultieme shortcut voor ondernemers die hun funnel of website niet alleen goed ontworpen, maar ook direct live willen zetten. Dit is het enige Nederlandstalige Webflow-template dat speciaal is ontworpen om in korte tijd een volledig werkende, geoptimaliseerde funnel neer te zetten, zonder te hoeven coderen.
Download de Webflow Blueprint hier.
Met de Webflow Blueprint kun je:
🚀 Direct een kant-en-klare funnel implementeren, zonder alles vanaf nul te bouwen.
🎨 Gebruik maken van bewezen designs die getest zijn op conversie.
🖥️ Webflow’s flexibiliteit benutten om zelf eenvoudig aanpassingen te doen.
⚡ Snel online gaan met een professionele uitstraling, zonder technische kennis.
Waar de Figma Blueprint je helpt met het plannen van je funnel, zorgt de Webflow Blueprint ervoor dat je die funnel binnen no-time functionerend en live hebt staan. Een perfecte combinatie voor iedereen die niet alleen wil ontwerpen, maar ook wil lanceren.
Klik hier om het Figma Template te dupliceren
Klik hier om het Webflow Template te dupliceren
Je hoeft tegenwoordig geen webdesigner of -bouwer meer te zijn om een website op te zetten. Maar, het is niet eenvoudig een succesvolle website op te zetten zonder de juiste handvatten.
In deze stap voor stap handleiding leren we je je website te maken zonder programmeerkennis met behulp van Webflow. We beginnen met een korte introductie, voordat we verder gaan met de stappen.
Webflow is een websitebouwplatform dat gebruikers in staat stelt om volledig functionele, aangepaste websites te creëren zonder te hoeven coderen. Het biedt ook de mogelijkheid om complexe interactiviteit, animaties en micro-interacties toe te voegen zonder dat er code geschreven hoeft te worden.
Een van de redenen waarom Webflow een opkomende website bouwer is, is omdat het de creatieve controle biedt die vaak ontbreekt bij andere websitebouwers. Met Webflow kunnen gebruikers hun ontwerpen volledig aanpassen zonder beperkt te worden door sjablonen. Bovendien biedt het responsieve ontwerptools, wat betekent dat websites er goed uitzien en functioneren op alle apparaten. Het biedt ook een krachtige CMS (content management systeem) dat naadloos integreert met de websitebuilder.
Meer over Webflow: Wat is Webflow: alles wat je moet weten
Dit is absoluut niet bedoeld als vervanging voor de Webflow University. We zouden hier niet zijn zonder de meest geweldige cursussen en gidsen van Webflow.
Ons template en gids is gemaakt voor:
Laten we erin duiken!
Ga naar de volgende link webflow.com/made-in-webflow/website/de-website-blauwdruk.
En klik op ‘Clone in Webflow’. Je hebt nu een gedupliceerde kopie van ons website template.
No-code websitebouwers zijn programma's waarmee je een website kunt maken zonder dat je hoeft te kunnen programmeren. In plaats van code te schrijven, gebruik je een visuele interface om de pagina's van je website te ontwerpen en te bouwen. Het is alsof je een puzzel maakt door verschillende stukjes op hun plaats te slepen. Met no-code kun je dus gemakkelijk en snel een mooie en functionele website maken zonder dat je allerlei technische termen hoeft te kennen of te begrijpen.
Bekijk het op deze manier - als je een ontwerper bent, is Webflow een stap vooruit in je carrière. Je kunt nu hetgene dat je ontwerpt, daadwerkelijk live maken en niet alleen als prototype. En het is echt zo simpel. Natuurlijk moet je een paar dingen leren, maar in het algemeen is dit de toekomst. Van het idee van de klant - onderzoek - ontwerp - tot een daadwerkelijk werkend project. Allemaal door jou - de ontwerper.
Zo verandert het gebruik van Webflow je ontwerpproces:
Het online leerplatform genaamd Webflow University is de perfecte startplek voor het leren van het ontwerpen en coderen van websites. Het is geen gewone videohandleiding voor het product, maar een verzameling korte, leuke en informatieve tutorials die je stap voor stap door het hele proces leiden. Ikzelf heb alles geleerd via deze video's, dus ik kan het ten zeerste aanbevelen.
Een van de eerste uitdagingen die je zult tegenkomen bij het ontwerpen in Webflow is het begrijpen van het box model, een CSS-regel die bepaalt hoe blokken op een website worden geplaatst. In tegenstelling tot bijvoorbeeld Sketch, Figma of Adobe XD, waar je elementen vrij op een canvas kunt plaatsen, werk je in Webflow met gestapelde blokken. Het box model kan wat lastig zijn, maar Webflow heeft een geweldige uitleg van deze CSS-regel voor beginners in hun webdesigntutorial.
Maar genoeg over de theorie gepraat, laten we kijken waar we het grootste deel van onze tijd zullen doorbrengen.
Dus dit is het, dit is de plek waar de website gemaakt gaat worden. Ja, er gebeurt duidelijk heel veel, dus laten we kijken naar de belangrijkste onderdelen voor jou.
01 — De Navigator — Dit is de structuur van elke pagina weergegeven als een overzicht van alle elementen zoals divs, afbeeldingen of tekstblokken. Je kunt erover nadenken als lagen in Sketch of Figma.
02 — Pagina's — Hier vind je een overzicht van al je pagina's.
03 — Pagina- en SEO-instellingen — Nadat het Pagina's paneel is geopend, zweef je over de bepaalde pagina en klik je op het instellingenpictogram om verschillende SEO-instellingen toe te voegen. Dit is ook een plaats om je aangepaste code toe te voegen, pagina's te dupliceren of ze te verwijderen.
Ga met je muis over een pagina in het Pagina's paneel, klik op de instellingen om het tweede paneel te openen.
04 — Assets Manager — Dit is een plaats waar je al je afbeeldingen kunt bekijken die binnen je project worden gebruikt.
05 — Style Panel — Het hoofdpaneel om te werken met je elementen binnen het project. Voeg marges, kleuren of tekengroottes toe en positioneer ze goed in je ontwerpen.
06 — Elementinstellingen — Tweede tabblad in het rechterpaneel, alle instellingen van het geselecteerde element. Instellingen zoals waar de specifieke knop naartoe moet linken, welke afbeelding is ingesteld, enz.
07 — Breakpoints - 4 hoofdbreakpoints en een nieuw paneel met de huidige resolutie. Dit zijn 4 tabbladen om te bekijken hoe je website eruitziet op verschillende apparaten.
Breakpoints - Desktop, Tablet, Mobile Landscape, Mobile Portrait
Een laatste ding - zie je het dingetje rechts dat je kunt slepen? Dat is voor jou om verschillende apparaten te testen en ervoor te zorgen dat je website er geweldig uitziet op allemaal.
Test altijd je site op alle viewportformaten om verrassingen op verschillende apparaten te voorkomen.
En dat is alles over de belangrijkste dingen. Hieronder heb ik een paar plaatsen voor je opgesomd die handig zijn om te weten voor de toekomst. Je hebt deze nodig wanneer je bekend raakt met de bovenstaande lijst.
08 — Projectinstellingen - De projectinstellingen is een plek met alle aanvullende instellingen en dingen zoals favicon, aangepaste lettertype-instellingen, hosting-instellingen, enz.
09 — CMS - Het CMS is een iets geavanceerder maar superkrachtige functie die je veel tijd kan gaan besparen, dus het is goed om ervan op de hoogte te zijn. Met het CMS kun je "Collections" maken, waarin je verschillende soorten content kunt opslaan, zoals blogberichten, producten of klantrecensies. Vervolgens kun je deze Collections gebruiken om dynamische content op je website te creëren, zoals lijsten met blogberichten of carrousels met productafbeeldingen.
10 — Acties bovenaan de balk - Ongedaan maken en opnieuw doen, status of je project is opgeslagen op Webflow-servers. Het 4e pictogram is om je project via de Designer te delen (voor ondersteuning of hulp van welke aard dan ook) en het 5e is waar je je site gaat publiceren!
En dat is alles over de interface. Hierna zullen we alle elementen zoals div of link block behandelen om daadwerkelijk te beginnen met het maken!