Summary

Every website starts with content — so be sure to get familiar with the building blocks at your disposal before starting a new project. This course walks through all the elements available in Webflow, pointing out common examples and making suggestions to get the most out of each elements.

Lessons in this course

Getting started

Coming soon

Learn 3 ways hierarchy is used in Webflow projects.

Element Hierarchy
3:57
Coming soon

Use the Navigator panel to manage element hierarchy and position.

Navigator panel
2:45
Coming soon

Structure Elements

Coming soon

Use sections to create separate blocks of content and divide the page into meaningful segments.

Section
4:14
Coming soon

Use containers to keep your content centered and legible.

Container
2:44
Coming soon

Use columns to place and organize content side-by-side horizontally. In Webflow, you can add columns, change their layout, and create responsive layouts.

Columns
2:22
Coming soon

An overview of the Div block — the most basic and versatile element in site building.

Div block
3:37
Coming soon

Buttons & Links

Coming soon

An overview of the button element.

Button
14.07
Coming soon

Style your website buttons with advanced styling.

Advanced button styling
5:43
Coming soon

Learn how to use Link blocks to turn any element, like an image, or any layout, like a banner, into a link.

Link block
1:23
Coming soon

Add, nest, and style text links.

Text Link
1:16
Coming soon

Typography

Coming soon

Use Headings to guide people and search engines through your content.

Heading
2:02
Coming soon

Use the Paragraph element to add, style, and format inline text.

Paragraph
4:42
Coming soon

Use a Rich Text Element (RTE) to create long-form content.

Rich text element overview
3:52
Coming soon

Add generic text using text blocks.

Use text blocks in Webflow
0:56
Coming soon

Add and style a block quote, which lets you use quotations such as excerpts from books or articles in your website.

Add a block quote to your page
0:42
Coming soon

Use the List element to create numbered or bulleted lists of content.

List
2:31
Coming soon

Media

Coming soon

Use an Image element to add, edit, and style images in Webflow.

Image
3:39
Coming soon

Learn about bitmap, GIF, PNG, JPEG, and SVG.

Image file types
2:22
Coming soon

Discover how image resolution can affect the speed of your website and how you can optimize your images for better user experience.

Image resolution
3:28
Coming soon

Upload and manage all your website’s assets in the Webflow Designer.

Assets panel
3:08
Coming soon

Use Webflow’s Video element to embed videos hosted on third-party sites like YouTube or Vimeo.

Video
1:20
Coming soon

Learn how to add, replace, and style a background video.

Add background video
3:15
Coming soon

Display images or videos inside a modal that presents the media in a full-screen view using the lightbox component.

Lightbox
3:44
Coming soon

Forms

Coming soon

Add and configure Webflow Forms and Form notifications, and manage Form submissions.

Forms
4:55
Coming soon

Style and position form elements in unique ways.

Style Forms
2:55
Coming soon

Navbar

Coming soon

Add, customize, and reuse a Navbar.

Navbar
9:38
Coming soon

Use the navbar menu button to organize menu links on mobile devices.

Navbar menu button
4:51
Coming soon

Use the built-in Webflow dropdown component to add, style, and set up dropdown menus and links.

Dropdown
4:38
Coming soon

Pre-built Components

Coming soon

Add and style a slider to your project — one of the simplest and most powerful components in the Webflow Designer.

Slider
4:56
Coming soon

Use the Tabs element to add responsive, tabbed content to your Webflow project.

Tabs
4:38
Coming soon

Combine the power of Google Maps and Webflow's map component to embed an interactive map on your site.

Map
2:58
Coming soon

Add Facebook and Twitter buttons to your Webflow site.

Social media
2:49
Coming soon

Add custom blocks of HTML code to your site using the Embed element to unlock all kinds of custom functionality.

Custom code
1:24
Coming soon

Check out how to use Symbols to turn any element and its children into a reusable component.

Symbols
3:47
Coming soon

Web elements

35
Lessons
Getting started
Getting started

Coming soon
Coming soon
Coming soon
Structure Elements
Structure Elements

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Buttons & Links
Buttons & Links

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Typography
Typography

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Media
Media

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Forms
Forms

Coming soon
Coming soon
Coming soon
Navbar
Navbar

Coming soon
Coming soon
Coming soon
Coming soon
Pre-built Components
Pre-built Components

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Element Hierarchy

Learn more

Transcript

Navigator panel

Learn more

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Advanced button styling

Learn more

Transcript

Transcript

Transcript

Transcript

Transcript

Rich text element overview

Learn more

Transcript

Use text blocks in Webflow

Learn more

Transcript

Add a block quote to your page

Learn more

Transcript

Transcript

Transcript

Image file types

Learn more

Transcript

Image resolution

Learn more

Transcript

Transcript

Transcript

Add background video

Learn more

Transcript

Transcript

Transcript

Transcript

Transcript

Navbar menu button

Learn more

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer