Webflow introductie

No-code website builder

Webflow is een no-code website builder, via drag&drop kan je op een intuïtieve manier user interfaces bouwen

Alternatieven

Andere drag-and-drop-builders zijn

Charles Darwin Beagle

Okalpha

Goonies

Inspiratie

Getting started

Webflow.com

Registreer met je lang artevelde emailadres
Geef je emailadres door en Accepteer de ArteveldeUAS invite.

Registratie

Webflow.com

Registreer met je lang artevelde emailadres

Registratie

Surf naar Webflow - Apply for student discount
je zal tijdelijk credit card gegevens moeten ingeven maar die kan je ook weer wissen na registratie
Voeg gratis CMS plan toe aan je website

Eigen licentie - Portolio

Ga naar het ArteveldeUAS-team
Zoek de folder UXUX-2-ModernLife
Klik 'Create site' en met sitenaam : voornaam_familienaam_playground

Eerste project

Klik 'Create site' en met sitenaam : voornaam_familienaam_playground

Eerste project

Designer

3 grote delen

Designer

1

Tools

2

Canvas

3

Stylepanelen

Designer

1

2

3

Elementen paneel
Components paneel
Navigator Paneel
Pagina paneel
CMS collectie
Asset Paneel

Designer

1

Tools

Designer

2

Canvas

Alle inhoud van de webpagina
Interactie is mogelijk met de individuele elementen
Reageert op dezelfde manier als het HTML boxmodel

Designer

3

Stijl panelen

Manipuleren van CSS

Stijl paneel
Settings paneel

Navigator Paneel

Navigator

Pagina-inhoud en structuur

Alle elementen van de huidige pagina

Elementen selecteren
Elementen verplaatsen

Elementen

Elementen

Een breed gamma aan verschillende elementen

Elementen

Drag&Drop in canvas
Drag&Drop in navigator

Section & container

Section

Aparte betekenisvolle onderdelen om je webpagina op te delen.

Heeft een breedte van 100%

Container

Groepeert en centreert de inhoud van de pagina in het midden van het canvas

Heeft een standaard een maximale breedte van 940px
Op mobile nemen ze de volledige breedte in

Div

Div

Div

Een div-blok kan alles zijn en wordt voornamelijk gebruikt om elementen te groeperen.

Oefening

Maak binnen Webflow de volgende structuur na.
Naar opmaak hoef je nog niet te kijken.

Heading opbouw

paragraaf opbouw

Oefening - teksten

We empower advisors

Modern Life combines advanced technology with the advice of the country’s top life insurance experts. We’ll help you streamline your practice, so you can focus on building better connections, delivering better solutions, and helping your clients lead better lives.

Hïerarchie

Hïerarchie

Hiërarchie is begrijpen hoe elementen zich ten opzichte van elkaar gedragen

2 belangrijke onderdelen van hiërarchie zijn:

1

Nesting

2

Overerven van tekststijl

Hïerarchie

Elementen plaatsen binnen andere elementen.

Voorbeeld: Een heading die binnen een container ligt, die container ligt binnen een grid en dit grid ligt binnen een andere container en die ligt in een section

1

Nesting

Hïerarchie

Typografische opmaak wordt doorgegeven aan child-elementen

Voorbeeld: de font family die je instelt op een body element zal door alle andere elementen worden overgeërfd

2

Overerven van tekststijl

Styling

Stijl paneel

Individueel elementen stijlen maar ook stijl-groepen aanmaken (classes)

Classes

Classes

Ze geven ons het voordeel stijlen te hergebruiken.

Classes - toevoegen

Selecteer je element
Maak stijl wijzigingen

Er wordt automatisch een class aangemaakt

Classes - toevoegen

Deze klasse kan je hergebruiken

Classes - toevoegen

Je kan ook op een hoger niveau je stijl toekennen.

Elk child zal de tekst-opmaak overerven.

States

Interactiviteit toevoegen aan een element.

Het uitzicht aanpassen in verschillende states.

States: hover, pressed & focused

Oefening

Werk verder op je vorige oefening en maak het volgende layout na. Maak ook gebruik van klasses

Exo - Extra light

Lato - Normal

Exo - Bold

Lato - Normal

BG: #eef2e4

Oefening - teksten

We empower advisors

Modern Life combines advanced technology with the advice of the country’s top life insurance experts. We’ll help you streamline your practice, so you can focus on building better connections, delivering better solutions, and helping your clients lead better lives.

Fast, intuitive technology across the client lifecycle

Let our advanced, thoughtfully designed, end-to-end integrated technology make your days faster, simpler, and more streamlined than you ever thought possible.

Expert brokerage support for advanced client solutions

We’re here to support you through the client journey – from pre-sale risk assessment to in-force servicing. When you need guidance from case design, advanced sales, to underwriting, just say the word.

Typografie

Typography

tekst

Typography

Heading (titels) behandelen we zoals in HTML.
Hierbij is het belangrijk dat de outline van ons document klopt.

Typography

Er zijn verschillende elementen voor tekst mogelijk, kies zo correct mogelijk

Inline formatting

We kunnen in een tekst-element een span toevoegen en daar afwijkende opmaak aan toevoegen

Units

Ems
Rems (root ems)
Percentages
VW (viewport width)
CH (character unit)

Custom fonts

Surf naar fonts.adobe.com
klik op om een nieuw web project te maken

Fonts - kit maken

Genereer een API key op fonts.adobe.com
onder API tokens
Ga naar project settings binnen je
webflow-website
Geef de token in onder de fonts tab in je project settings in Webflow
Selecteer het aangemaakte adobe web project

Fonts - API

Layout

Layout

aka display settings

Block
Flexbox
Grid
Inline block
Inline
Display: none

Layout - flexbox

Flex-parent elk element dat andere elementen bevat kan een flex-container (flex-parent) zijn.

1. Selecteer je flex-parent

2. Klik op display flex

Dit zal invloed hebben op alle directe kinderen

Layout - flexbox

Layout - grid

Flexbox werkt met één dimensie

Grid werkt met twee dimensies

Oefening

Werk verder op je vorige structuur
Maak gebruik van flexbox om het onderstaande na te bouwen.

Oefening

Plaats je heading 2 + Paragraaf in een extra div. Ik heb deze div de klasse-naam introduction gegeven.
Selecteer de Div block die de 3 element bevat die je naast elkaar wilt plaatsen
Bij display klik je op flex en pas je de extra settings toe

Oefening

4. Geef elk child-element van je flex-parent introduction en card-technology de volgende setting

Responsive Design

Responsive Design - introductie

Introductie tot Responsive Design met Webflow University

Grid

Maken en configureren van een grid
Een afbeelding overzicht layout met auto position
Een hero sectie met manuele positionering
Herbruikbare grid template layouts
Responsive layout met grid

Grid - overview

Grid - een grid is een leidraad

Dit is het standaard gedrag van een CSS Grid

Grid - maken en configureren

Alles kan een grid zijn
- Een section
- Een div container
Je kan ook een grid elementen aanmaken

Gebruik shortcuts in Webflow:
- Mac: CMD + E
- Win: CTRL + E
Typ het element dat je wil en selecteer

Grid - maken en configureren

Sleep een element in één van de cellen
- Standaard zullen de cellen automatisch worden aangevuld
Willen we iets in de onderste cel plaatsen, los van de flow dan moeten we de cel manueel positioneren

Grid - maken en configureren

Het grid aanpassen, rijen en kolommen verwijderen, zal de inhoud niet verwijderen
- De inhoud zal verdeeld worden over de aanwezige cellen

Grid - maken en configureren

Je kan de ruimte tussen kolommen en rijen aanpassen

Grid - maken en configureren

Wat zijn FR units?
- 3 kolommen, allemaal 1FR --> alle kolommen nemen dezelfde ruimte in
- Kolommen met andere breedte?

Grid - maken en configureren

Bereken de breedte van een kolom

Grid - maken en configureren

Breedte kolom 2 = ((900px - 40px) / 4) * 2fr = 430px

Grid - maken en configureren

Vraag - de totale breedte is 800px, een gap is 20px, hoe groot is de kolom met breedte 4fr in pixels?

Grid - maken en configureren

De totale breedte = 800px

Breedte alle gaps = 4 * 20px = 80px

Som van fractional units = 9

Fractional units kolom = 4fr

Oplossing: ((800px - 80px) / 9) * 4 = 320px

Grid - maken en configureren

Om meerdere elementen in een grid cell toe te voegen en te werken volgens de normale flow plaatsen we een div container in de cell

Grid - afbeeldingen overzicht

Oefening
1. Maak een 4x4 grid binnen een container
2. Plaats de afbeeldingen in het grid
  - Kijk wat er gebeurt wanneer je kolommen en rijen verwijdert
3. Zet de hoogte van het grid op 800px
4. De afbeeldingen hebben andere afmetingen:
  - Maak een klasse Grid Image
  - Zet de breedte van een afbeelding op 100%
  - Zet de hoogte van een afbeelding op 100%
  - Zet de afbeelding op object-fit: cover en centreer
  - Maak de overflow onzichtbaar

Grid - afbeeldingen overzicht

Wat gebeurt er wanneer we de hoogte van het grid aanpassen naar 0px?
We kunnen kolommen en rijen overspannen

Grid - afbeeldingen overzicht

Grid - een hero sectie

Oefening (deel 1)
1. Maak een 2x2 grid binnen een section
2. Stel de hoogte van het grid in op 70vh
3. Voeg een afbeelding toe in de cel linksboven
4. Met dezelfde techniek uit vorige oefening maak je de afbeelding vullend met object-fit: cover
5. Overspan de afbeelding over de eerste twee rijen
6. Voeg een div container toe in de cel rechtsboven
7. Voeg een heading, paragraaf en button toe. Hou CMD of CTRL ingedrukt tijdens het toevoegen
  - Dit zorgt ervoor dat we de content toevoegen in de div block en niet in de grid cell
8. Centreer de content verticaal

Grid - een hero sectie

Grid - een hero sectie

Oefening (deel 2)
1. Stel de positionering van de afbeelding en de div container in op manueel
2. Overspan de hero afbeelding volledig
3. Overspan de content, nu enkel over de cell rechts onderaan
4. Geef de content een achtergrondkleur
5. De hoogte van de rijen staan ingesteld op auto
  - Wijzig elke rij in 1fr en kijk wat er gebeurt. Wat is het verschil?
6. Voeg padding toe aan de content

Grid - een hero sectie

In het grid kunnen we een naamgeving geven aan een grid area

Grid - herbruikbare layouts

Geef nu het grid een klasse naam en gebruik de layout d.m.v. deze klasse

Grid - herbruikbare layouts

Alle wijzigingen die je doorvoert met deze geselecteerde klasse zal overal worden toegepast

Grid - herbruikbare layouts

Grid - responsive design

Pas voor elk device het grid aan, verwijder of voeg kolommen en rijen toe.
Het grid zal zich aanpassen

Grid - responsive design

Cellen die manueel gepositioneerd zijn zal je dus moeten expliciet aanpassen aangezien ze niet door grid automatisch berekend kunnen worden

Grid - responsive design

Een grid functioneert als een leidraad
Een grid cell kan maar één element bevatten. Wil je meerdere elementen, plaats ze dan in een div container

Grid - belangrijk om te onthouden

Positioning

Welke soorten positioning zijn er?

Positioning

Static
Relative
Absolute
Fixed
Sticky
Float & Clear

Positioning

Positioning met Webflow University

Components

Herbruikbare componenten die je zelf vormgeeft maak je met components
Webflow heeft een aantal voorgedefinieerde componenten
- Forms
- Dropdown
- Navbar
- Slider
- Tabs
- ...

Components

Aanmaken via submenu of via components menu

Components - maken

Dubbelklik op een bestaande symbol en bewerk

Components - bewerken

Maak variabele content via overrides

Components - variabele content

Wanneer je een symbol aanpast, zal je alle andere instanties aanpassen
Een symbol kan je unlinken, daarmee verliest de symbol zijn referentie en wordt het terug uniek