Stap-voor-stap handleiding: eigen Webflow website maken in 2023

Introductie

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.

Wat is Webflow?

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

Voor wie is onze gids bedoeld? 

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:

• Ons interne team: Terwijl we groeien zorgen we er op deze manier voor dat iedereen van ons team de op dezelfde pagina zit en begrijpt hoe we websites opbouwen.
• HappyDigital-klanten: We willen een enkele plek hebben waar onze klanten kunnen komen en ontdekken hoe hun website werkt en hoe ze deze kunnen bijwerken.
• Beginner Webflowers: Dit zal een geweldig startpunt zijn om je eerste workflow te ontwikkelen bij het bouwen in Webflow als je net begint.
• Webflow-agency's en experts: We weten dat als je op expertniveau zit, je al een eigen workflow hebt. Maar dit kan een geweldige manier zijn om te zien of er trucs zijn die je in je eigen workflow kunt implementeren en deze nog verder kunt optimaliseren.

Laten we erin duiken!

Dupliceer het gratis template

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.

Inleiding tot No-Code

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.

Waarom kies je voor een no-code oplossing?

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:

De makkelijkste handleiding voor beginners voor Webflow

0. Waar het allemaal begint

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.

1. Het box model - Het enige technische ding dat je moet weten.

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.

2. De designer - De kernfuncties van Webflow

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!