# 175: 7 dingen die u moet weten over Webflow - CSS-trucs

Anonim

(Dit is een gesponsorde video waar ik aan heb gewerkt tussen ons bij CSS-Tricks en Webflow. Ik denk dat Webflow een fascinerend product is voor het bouwen van websites dat naar mijn mening momenteel in een categorie helemaal op zichzelf valt. Het duurt even om je hoofd erbij te houden, dus ik hoop dat deze video je daarbij kan helpen.)

1) Webflow is gebouwd voor professionele ontwerpen en ontwikkelaars

Weet u al hoe u websites met code bouwt? Dat is geweldig. Het betekent niet dat Webflow onder uw vermogen ligt. Webflow is allemaal dezelfde abstracties als HTML en CSS, maar toont die interfaces op een visueel canvas.

2) Herbruikbare stijlen vormen de kern van Webflow

De CSS-ontwikkelaar in jou verlangt er waarschijnlijk naar om van alles klassen te maken. Een klasse is de ultieme tool van CSS voor herbruikbaarheid. Goed nieuws, alles wat je in Webflow opmaakt, gaat letterlijk via een selector die een klasse is. Zelfs een klas niet "leuk" vinden. Het is een echte klasse onder de motorkap. Webflow vervalst het web niet, het is het web.

3) Webflow heeft functies zoals Flexbox en CSS Grid

Werken met flexbox en grid op een visueel canvas zonder na te hoeven denken over de syntaxis geeft veel voldoening. In plaats van de namen en waarden van de eigenschappen te onthouden, klikt u op knoppen om de afstand en uitlijning af te handelen, of gebruikt u gereedschappen rechtstreeks op het canvas zelf.

Bezorgd over responsief ontwerp? Webflow heeft dit volledig gedekt. Als u het formaat van de breekpunten wijzigt en wijzigt, verandert het canvas zelf van formaat en lopen de stijlen die u instelt omlaag van groot naar klein.

4) Publiceer sneller, maak u geen zorgen

Als u klaar bent met het ontwerpen van de site in Webflow, geeft u deze niet aan iemand anders over om elders te bouwen. Je bent al klaar, je hebt de site gebouwd. U kunt op de publicatieknop drukken en deze binnen enkele seconden live op een URL hebben. U kunt er vervolgens een ander domein aan toewijzen en uw hosting- en implementatiesituatie is opgelost. Geen SFTP. geen beveiligingsproblemen. Geen software-updates die u zelf hoeft te doen.

5) Het Webflow CMS is buitengewoon krachtig en gebouwd met klanten en marketeers in gedachten

Webflow heeft een ingebouwd CMS dat net zo krachtig is als elk ander. Je configureert precies het soort contentmodel dat je nodig hebt (uiteraard geen codering vereist) en je hebt het. In zekere zin als een formulierbouwer. Dan worden die velden net zo gemakkelijk bruikbaar in uw sjablonen als statische inhoud.

Misschien is het beste deel dat het maken en bewerken van die gegevens mogelijk wordt via een minimale interface direct op de site zelf. Elk veld dat zich in het CMS bevindt (en dat u hebt toegestaan) kan rechtstreeks op de front-end van de live site worden bewerkt. Er is ook een balk aan de onderkant voor het maken en bewerken van inhoud via een admin-interface. Het is het beste van twee werelden: bewerken op de pagina en bewerken in formulierstijl.

6) De animatietools van Webflow zijn van het volgende niveau

Het is mogelijk dat de eerste keer dat u van Webflow hoorde, was door naar sites te kijken die het had gebouwd met een ongelooflijk interactieontwerp. Leuk feit, alle eigen marketingpagina's van Webflow zijn gebouwd met Webflow. Bekijk de designerpagina voor een voorproefje.

Op scrollen gebaseerde animaties zoals parallax, animaties op gebeurtenissen zoals klikken en zweven, allemaal mogelijk gemaakt via een interactiepaneel waar je ze kunt koppelen aan veranderingen in zaken als ondoorzichtigheid, bewegingen en rotaties. Er zijn stijlvolle presets om je op weg te helpen, evenals dingen van een hoger niveau, zoals het integreren van geestverruimende Lottie-animaties.

7) Er is een hoop leerinhoud en community voor jou

Webflow leren is geen geluk. Ik hoop dat je wat blogposts of YouTube-video's vindt. Webflow University is volledig gratis en zit vol met alles wat je ooit zou willen weten over het bouwen van websites met Webflow. Dit zou je bootcamp kunnen zijn.

Probeer Webflow