Webflow ‐ 101 - thePFLy/Advenci GitHub Wiki

Box model

Fondamental:

  1. Everything can be expressed in boxes
  2. Boxes flow like a text docmuent
  3. Full controlle Box can be changed (size, padding, margin etc..)

HTML

-- (basic, inspect)

CSS - Cascading style sheet

-- (properties, Selectors, classes)

Webflow

preview -> Play icon Help icon -> CSS preview

Hero section

Assets: Drag and drop images.
Section - Container - Div - Content Css properties - parents Classes automatically created on element edit (if different) Grid -> flex adapt. Alt text to img: image settings icon

Element in div: Cmd + drag and drop in div.

Form

Responsive

@media equivalent image

Export

export code section <>

Interaction

Can change on hover.. (selector).
Don't forget to add animation to hover.
Can add an animation from interactions.
Page load animation: Page trigger.

Link

Settings -> Link settings.
Can choose section: Click on section then add an id.
Mail: Can make subject and open mail app.

SEO - opengraph

Pages - Settings - SEO Settings/Open Graph Settings

Publish the site / Set default

Project Settings - Publishing - Add a custom Domain.
Able to edit SEO settings from this point.
Click on make default if u want.
To publish: Publish - select sites - Publish to selected

Quick stack

Structure content in website.
quick stack element. Preset of cells (div).
when use ? one dimensionnel layout.
Elements take next place.
V Flex & H Flex: vertical and horizontal box (for child elements)