HEY

Neem deel aan de volgende Webflow uitdaging!

Webflow Positionering: klik en beweeg eenvoudig elementen

Bijna alle functionaliteiten van Webflow zijn ontworpen voor webdesign, inclusief webflow positionering. Waar gaat het over?

Bijgewerkt op

9/1/2021

Webflow Positionering: klik en beweeg eenvoudig elementen

Er bestaat momenteel een heel scala aan systemen voor het maken van websites op de markt. Zoals u weet, is mijn favoriete hulpmiddel Webflow. En als webdesigner houden we van de visuele kant van de dingen. We willen geen regels code schrijven en blijven steken in complex te begrijpen functies, en toch hebben we een overvolle creativiteit die maar één ding verwacht: "vrijheid". Dus vandaag ga ik het over één ervan hebben: de positionering van elementen op Webflow.

Je creatieve vrijheid...

SURVEY

De beste methode om een element te plaatsen of te verplaatsen is volgens u

Het gebruik van html, css, javascript-code
Slepen en neerzetten
Nog iets anders?

Of u nu code gebruikt of niet, u zult de woning moeten gebruiken positie.

Het definieert hoe een element op een pagina wordt geplaatst. U zult ook numerieke waarden moeten invoeren(boven, rechts, onder, links) voor deze eigenschap.

In deze gids ontdekt u de begrippen over de positie van de woning (en andere gerelateerde eigenschappen). Na het lezen en wat oefening kunt u eindelijk een website ontwerpen zoals u dat wilt op Webflow, door elk element van een webpagina op de juiste plaats te plaatsen.

In feite is het precies om deze reden dat ik heb besloten om Webflow te gebruiken, en niet andere systemen voor het maken van sites. Ik wilde een mooie en schone code.

INHOUD

Webflow, code en eigenschappen

Verschillende soorten posities

Instellen van de vlotter

Eigendom duidelijk op Webflow

Conclusie

Webflow, code en eigenschappen

Je zou me kunnen vertellen dat alle andere websitemakers je toestaan om elementen van een webpagina te verplaatsen, omdat de functies die ik je later zal uitleggen universeel zijn. Het is CSS-code die webontwikkelaars en sommige webdesigners kunnen manipuleren.

Maar waarom dan Webflow?

Ik moet bekennen dat toen ik begon, ik niets wist over de code. Ik heb veel webdesign-systemen geprobeerd, maar ik kon niet degene vinden die echt bij mij paste. Het is waar dat ik websites kon maken op deze andere systemen, maar toen ik verder wilde gaan, ontdekte ik dat ik zelfs de HTML- en CSS-bases onder de knie moest krijgen. Dus ik kon geen aangepaste website maken, precies zoals ik wilde.

Toen werd ik me bewust van het bestaan van Webflow, de software voor het maken van websites voor webdesigners! Om een website te bouwen, hoef je alleen maar gebruik te maken van de drag and drop functie. In geen geval werd ik ertoe gebracht om code te gebruiken of zelfs maar te begrijpen. Aanpassingen worden visueel gedaan. Ik dacht: waarom niet? En hier ben ik dan, een paar jaar later.

Met Webflow ligt het dus voor de hand dat u ten volle gebruik kunt maken van de verschillende eigenschappen die ik in dit artikel zal bespreken. Ze zijn nog makkelijker op Webflow.

Webflow positionering: welke?

In totaal worden 5 soorten posities gebruikt om een website te ontwerpen:

  1. Statisch
  2. Relatief
  3. Absoluut
  4. Vaste
  5. Kleverig

Statische positie

Dit is de standaardpositie van een item. Elk element dat u op een webpagina invoegt, zal automatisch deze positie hebben. In meer technische termen kunnen we zeggen dat het element in kwestie de normale paginastroom volgt.

Relatieve positie

Om u te helpen herinneren, kan een eenvoudige definitie van het woord "relatief" volstaan. We zeggen dat iets relatief is als het van iets anders afhangt.

Op dezelfde manier heeft een element een relatieve positie wanneer het (of preciezer gezegd, zijn positie) een functie is van iets anders (en dus van zijn normale positie). Laat ik het uitleggen: het element in kwestie kan worden verschoven, maar dan wel ten opzichte van het oorspronkelijke standpunt . Om het te verschuiven, verander je gewoon de waarden van boven, links, onder en rechts.

Dit type positie wordt meestal gebruikt wanneer u iets wilt aanpassen.

Als het betreffende artikel eenmaal is verplaatst, verliest het zijn oorspronkelijke plaats nog niet. Het is nog steeds van hem. Wat betreft de andere elementen die er omheen liggen, deze worden niet beïnvloed door deze verplaatsing. Dit is de reden waarom de verschillende elementen elkaar kunnen tegenwerken.

Absolute positie

Wanneer je een element naar een webpagina sleept, neemt het onmiddellijk een statische positie in (de standaardpositie, zoals ik eerder heb uitgelegd). Deze positie past echter niet noodzakelijkerwijs bij het ontwerp van uw site. Je moet het element verplaatsen. Hier komt de absolute positie in het spel.

Met deze functie kunt u een item overal op een pagina plaatsen (of het nu rechtsboven, linksboven, onder of in het midden is). Verander ook hier weer de waarden van boven, onder, rechts en links . U moet weten dat de verhuizing niet noodzakelijkerwijs in verhouding staat tot het hele scherm. Als het element zich in een blok bevindt, zal dit blok zijn referentie zijn tijdens de verplaatsing (wat ook geldt als dit blok in een vaste, relatieve of absolute positie is geplaatst).

Wat gebeurt er als 2 elementen tegelijkertijd in het absoluut worden geplaatst? Ze kunnen elkaar overlappen, tenzij je de z-index eigenschap gebruikt (ik leg het later uit).

Vaste positie

De vaste positie lijkt op de absolute positie. Het element kan worden geplaatst waar u maar wilt. Alleen blijft het zichtbaar, zelfs als u naar beneden scrollt (hier is een voorbeeld dat u waarschijnlijk vaak tegenkomt: de menubalk die zichtbaar blijft als u naar beneden scrollt).

Kleverige positie

Deze positie is een mengeling van relatieve positie en vaste positie. Inderdaad, het element blijft op een positie ten opzichte van de documentenstroom tot een bepaald punt. Het neemt dan het gedrag van een vast element over, d.w.z. het blijft zichtbaar, zelfs als u verder naar beneden scrollt. Wanneer het de voettekst bereikt (een punt dat u ook hebt gedefinieerd), stopt het scrollen van het element.

Om te kunnen werken, moet u aangeven wanneer dit element de kleverige positie inneemt (de waarden boven, links, onder en rechts).

Aangezien dit standpunt vrij recent is (het is het laatste van alle genoemde), is het nog niet compatibel met sommige browsers. Dus, als u ooit een probleem met uw site op dit punt tegenkomt, controleer dan eerst de andere browsers.

webflowpositionering

Webflow-positionering parametrisering

Laten we nu tot de kern van de zaak komen: hoe kunnen we deze posities op Webflow configureren?

De statische positie staat hier niet centraal. Zoals ik eerder al heel goed heb uitgelegd, is dit de standaardpositie van een element. Degenen waar we in geïnteresseerd zijn, lijken er meer op:

  • vaste webflowpositionering
  • absolute webflowpositionering
  • kleverige webflow positionering

Voor elk van hen heeft u de beschikking:

  • Webflow-positioneringscontrole
  • de relativiteitsindicator
  • Z-index

Positiecontrole

Wat ik zo leuk vind aan Webflow is dat alles al (bijna) klaar is. U ziet bijvoorbeeld voorgedefinieerde posities voor absolute en vaste posities (linksboven, rechtsboven, linksonder, rechtsonder, linksonder, vol). Het is zo eenvoudig als het klikken op de gewenste positie.

Anders kunt u het altijd op aangepaste waarden (voor elke zijde) instellen. Deze tips kunnen u ook helpen:

  • Omhoog: door de waarde te verhogen, duwt u het element naar beneden (vanaf de bovenkant; hetzelfde voor de onderkant).
  • Links: door de waarde te verhogen, duw je het element naar rechts (van links; idem voor rechts)

Opmerking: Negatieve waarden zijn toegestaan. Het element zal dan in de tegenovergestelde richting bewegen.

Relativiteitsindicator

Dit is een marker die u helpt om te weten ten opzichte van welk element het betreffende element is gepositioneerd. Een booster schot doet nooit pijn:

  • Relatieve positie: het element wordt ten opzichte van zichzelf gepositioneerd.
  • Absolute positie : het element wordt gepositioneerd ten opzichte van een bovenliggend element, dat een andere positie moet hebben dan statisch.
  • Vaste positie: het element is gepositioneerd ten opzichte van het lichaam van de pagina en blijft zichtbaar.
  • Kleverige positie: het element is gepositioneerd ten opzichte van een bovenliggend element (het lichaam van de pagina in de meeste gevallen).

Z-index

Z-index is de positie van een element op de denkbeeldige Z-as. Ik heb er in de vorige paragrafen al wat over gezegd.

Elk item op uw webpagina heeft een standaard Z-waarde. Door het te wijzigen, kunt u de volgorde van de weergave wijzigen. Het geaccepteerde getal is een geheel getal van 1 tot en met 2147483647. Hoezit het met negatieve getallen? Ze zijn ook geldig. Het is echter mogelijk dat u de zichtbaarheid van het betreffende item verliest.

In feite zijn de items die als eerste zijn toegevoegd logischerwijs lager dan de recente items. Die onderaan de pagina stapelen zich dus op boven die bovenaan. Op dezelfde manier stapelen die aan de rechterkant zich op boven die aan de linkerkant.

Dan liggen de elementen met statische positionering altijd onder de gepositioneerde elementen (relatief, absoluut, vast en kleverig).

Instellen van de vlotter

Deze parameter kan worden gewijzigd in het stijlpaneel. Waaruit bestaat het precies? Het dichtstbijzijnde voorbeeld dat in gedachten komt is het beeld dat rechts van een tekst zweeft. Dit beeld wordt ook omringd door deze tekst.

Bovendien wordt deze techniek gebruikt voor enkele vooraf gedefinieerde Webflow-componenten: kolom, collectielijst, enz.

Kortom, de drijver maakt het mogelijk om een element uit de normale flow van een pagina te halen (of simpeler, om het te laten zweven zoals de naam al aangeeft). Deze manipulatie is delicaat omdat ze een impact heeft op de andere omringende elementen. Ga naar het stijlpaneelom toegang te krijgen.

Wees echter voorzichtig, de drijver werkt niet op een element met een absolute positie.

Er zijn 3 soorten drijvers:

  • geen enkele
  • linker drijver
  • rechter drijver

Drijven geen

Het is de standaardinstelling. Het element zweeft dus niet.

Zweven aan de linkerkant

Het element zal uiteraard links van de container drijven. Anders wordt het naar links verschoven tot het een ander element in de drijver linksraakt.

Drijvend recht

U kent het refrein: het element drijft rechts van de container of wordt rechtsgedeclareerd tot het een ander element in de drijver rechtsraakt.

Eigendom duidelijk op Webflow

Om nog meer controle te hebben over het ontwerp van een website, blijkt de duidelijke eigenschap van het grootste belang. Zo kunt u voorkomen dat een element automatisch naast een zwevend element komt te staan; het gaat dan meteen naar de bodem. Als u het correct hebt gevolgd, weet u dat deze eigenschap net na de drijverseigendomwordt gebruikt.

Het is duidelijk dat de duidelijke instelling niet van toepassing is op het drijvende element zelf. Dit zou tegenstrijdig zijn.

Net als de drijverinstelling is deze gecategoriseerd als :

  • duidelijk geen
  • duidelijk links
  • duidelijk recht
  • beide vrijmaken

Duidelijk geen

Dit is de standaardwaarde. Als u het inschakelt, zal er geen invloed zijn op het item. Het blijft naast de drijvende elementen staan.

Duidelijk links

Dit voorkomt dat een element in de buurt van elementen met drijver wordt geplaatst : linkse eigenschap. Hetzelfde geldt voor het duidelijke recht.

Duidelijk rechts

Dit voorkomt dat een element in de buurt van elementen met vlotterwordt geplaatst : juisteeigenschap.

Wis beide

Dit voorkomt dat een element in de buurt van elementen wordt geplaatst met de 2 eigenschappen zweven: links en zweven: rechts.

Merk hier op dat de duidelijke eigenschap zich iets anders zal gedragen, afhankelijk van het feit of deze wordt toegepast op niet-zwevende elementen of op elementen die al drijvend zijn.

Conclusie

Kortom, ik kan begrijpen dat de positioneringsmodus op het eerste gezicht complex is en oefening vereist. Daarom nodig ik je uit om met deze eigenschappen te spelen en te kijken of je door te oefenen het nut ervan beter kunt begrijpen.

Aarzel niet om uw creaties te delen in commentaren of op aankomende evenementen!

Opmerkingen

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Schrijf je hier in om de gratis Discovery Training te ontvangen
.

Begin met de Discovery Training, waar u de basis van Webflow leert en een voorproefje krijgt van wat u kunt verwachten in de Start Weblow training.

Start de gratis training