HEY

Neem deel aan de volgende Webflow uitdaging

Webflow nesting model: hoe werkt het?

Als ons principe is om een website te maken zonder code, moet u weten dat dit ons niet toestaat om af te wijken van de regel van de Webflow syr nesting.

Bijgewerkt op

14/8/2020

webstroomnest
Foto door Brina Blum op Unsplash

Na het lezen van dit artikel weet u hoe u een website beter kunt ontwerpen. Zelfs als ons principe is om een website zonder code te maken, weet dan dat dit ons niet toestaat om af te wijken van de regel. Inderdaad, het is zeer belangrijk in termen van HTML en CSS nesting. Maar waar gaat het echt om? En hoe ga je een webpagina correct structureren?

Wat is er aan de hand?

Ik stel voor dat u naar een site van uw keuze gaat. Als je me al een tijdje volgt, weet je dat ik de Apple-site weer ga nemen. Niet alleen is hun ontwerp goed gedaan, maar hun site wordt ook voortdurend geüpdatet. Hun team is altijd op zoek naar het laatste nieuws.

Er is een YouTube-video waarin ik dit beschrijven aan de onderkant van het artikel. Steun me door subscting aan het kanaal van YouTube "Happy Desk design"

webstroomnest
Foto door Sarah C op Unsplash

Hun in elkaar grijpende patroon is zeker correct. Maar hoe kunnen we dat verifiëren?

In mijn video leg ik het duidelijker uit. Bent u bekend met Chrome's "inspect" gereedschap? Wanneer u op de betreffende site bent, klikt u met de rechtermuisknop en inspecteert u deze. Er verschijnt direct een balk aan de rechterkant. Er wordt een hele reeks codes weergegeven. Elk item dat op het scherm wordt geselecteerd, komt overeen met een reeks codes aan de rechterkant (een nesting waarin een titel, enkele ondertitels, afbeeldingen of andere elementen kunnen voorkomen).

In principe werkt Firefox op dezelfde manier. Maar voor het geval dat u een probleem ondervindt (hetzelfde voor degenen die op Safari werken), waarom installeert u dan geen Chrome (alleen deze ene keer)?

Je doel moet zijn om te begrijpen hoe het nesten op een webpagina gebeurt. Zoals je ziet in mijn video, in een doos, kun je verschillende andere sub-boxen hebben. En in deze, sub-sub-boxen, en zo verder.

Als je het eenmaal begrepen hebt (of bijna), is het tijd om te zien hoe deze nesten werken op Webflow.

webstroomnest
Foto door Louis Hansel Shotsoflouis op Unsplash

Het principe van nestelen op Webflow

Heb je het aantal codes op een webpagina gezien? Het zijn er zoveel! Gelukkig voor ons bespaart het nestelen van de Webflow ons dat allemaal. Zelfs bij het ontwerpen van de nesten op dit platform hoeven we de codes niet te begrijpen.

Maar als je wat meer wilt leren (HTML of Javascript), bekijk dan mijn andere video's en artikelen ;)

Laten we teruggaan naar ons hoofdonderwerp:

Ik ben al eens eerder van een blanco pagina gegaan om je de Webflow nesteling uit te leggen. Ik heb de block div gebruikt. Naarmate de jaren verstrijken, zul je beter begrijpen wanneer je de verschillende tags moet gebruiken. Maar vandaag stel ik voor dat je genoegen neemt met dit ene label. Het is als een soort Zwitsers legermes, het kan in elke context worden gebruikt.

Vervolgens moet u in dit eerste vakje andere vakjes toevoegen, vooraleer u elementen zoals titels, afbeeldingen, paragrafen... invoegt. Het is trouwens het principe zelf van het nestelen op Webflow (en in het ontwerp van een website in het algemeen). Alles wordt in dozen gedaan; elk element hoort bij zijn eigen doos.

Als je wilt dat de dozen vorm krijgen, gebruik dan gewoon CSS. Ik laat je in een andere van mijn video's zien hoe je CSS kunt leren met Webflow.

webstroomnest
Foto door Lettuce Grow op Unsplash

Conclusie

Vanaf nu, wanneer u een webpagina ontwerpt, adviseer ik u om interlocks te gebruiken. U hebt dan een schonere en correctere structuur. Zoals u waarschijnlijk weet, houdt Google van goed ontworpen sites :) Daarom is het belangrijk om niet af te wijken van de Webflow-nestregel.

Kom terug naar deze pagina wanneer je maar wilt. Heb je nog ideeën bedacht die ik misschien vergeten ben? Zo ja, wat zijn dat dan? Laat hieronder een reactie achter of stuur een e-mail naar hello@happydesk.be.
Kevin Palombo, manager van Happydesk.

VRIJE TRAINING

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Begin gratis

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Registreer hier voor toegang tot
de gratis training

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Start de gratis training