Courses
Lessons
Blog
Forum
Contact
More
Search icon open
Try Webflow — it's free

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

All courses

Web elements

Intermediate
1hr 53min

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Enroll for free
Trailer: What you’ll learn

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.

Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits
Download course assets
Enroll for free

Lessons in this course

Element Hierarchy
3:57
Element Hierarchy
3:57
Coming soon

Navigator panel
2:45
Navigator panel
2:45
Coming soon

Section
4:14
Section
4:14
Coming soon

Container
2:44
Container
2:44
Coming soon

Columns
2:22
Columns
2:22
Coming soon

Div block
3:37
Div block
3:37
Coming soon

Advanced button styling
5:43
Advanced button styling
5:43
Coming soon

Link block
1:23
Link block
1:23
Coming soon

Text Link
1:16
Text Link
1:16
Coming soon

Heading
2:02
Heading
2:02
Coming soon

Paragraph
4:42
Paragraph
4:42
Coming soon

Rich text element overview
3:52
Rich text element overview
3:52
Coming soon

Use text blocks in Webflow
0:56
Use text blocks in Webflow
0:56
Coming soon

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

List
2:31
List
2:31
Coming soon

Image
3:39
Image
3:39
Coming soon

Image file types
2:22
Image file types
2:22
Coming soon

Image resolution
3:28
Image resolution
3:28
Coming soon

Assets panel
3:08
Assets panel
3:08
Coming soon

Video
1:20
Video
1:20
Coming soon

Add background video
3:15
Add background video
3:15
Coming soon

Lightbox
3:44
Lightbox
3:44
Coming soon

Forms
4:55
Forms
4:55
Coming soon

Style Forms
2:55
Style Forms
2:55
Coming soon

Navbar
9:38
Navbar
9:38
Coming soon

Navbar menu button
4:51
Navbar menu button
4:51
Coming soon

Dropdown
4:38
Dropdown
4:38
Coming soon

Slider
4:56
Slider
4:56
Coming soon

Tabs
4:38
Tabs
4:38
Coming soon

Map
2:58
Map
2:58
Coming soon

Social media
2:49
Social media
2:49
Coming soon

Custom code
1:24
Custom code
1:24
Coming soon

Symbols
6:09
Symbols
6:09
Coming soon

Similar courses

Moving your business online

Beginner
20min

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Full site build

Intermediate
4hr 17min

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Webflow Ecommerce

Beginner - Intermediate
20Min

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

SEO fundamentals

Beginner
8min

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

All courses
Overview

Web elements

35
Lessons
Element Hierarchy
3:57

Element Hierarchy
3:57
Coming soon
Navigator panel
2:45

Navigator panel
2:45
Coming soon
Section
4:14

Section
4:14
Coming soon
Container
2:44

Container
2:44
Coming soon
Columns
2:22

Columns
2:22
Coming soon
Div block
3:37

Div block
3:37
Coming soon
Advanced button styling
5:43

Advanced button styling
5:43
Coming soon
Link block
1:23

Link block
1:23
Coming soon
Text Link
1:16

Text Link
1:16
Coming soon
Heading
2:02

Heading
2:02
Coming soon
Paragraph
4:42

Paragraph
4:42
Coming soon
Rich text element overview
3:52

Rich text element overview
3:52
Coming soon
Use text blocks in Webflow
0:56

Use text blocks in Webflow
0:56
Coming soon
Add a block quote to your page
0:42

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

List
2:31
Coming soon
Image
3:39

Image
3:39
Coming soon
Image file types
2:22

Image file types
2:22
Coming soon
Image resolution
3:28

Image resolution
3:28
Coming soon
Assets panel
3:08

Assets panel
3:08
Coming soon
Video
1:20

Video
1:20
Coming soon
Add background video
3:15

Add background video
3:15
Coming soon
Lightbox
3:44

Lightbox
3:44
Coming soon
Forms
4:55

Forms
4:55
Coming soon
Style Forms
2:55

Style Forms
2:55
Coming soon
Navbar
9:38

Navbar
9:38
Coming soon
Navbar menu button
4:51

Navbar menu button
4:51
Coming soon
Dropdown
4:38

Dropdown
4:38
Coming soon
Slider
4:56

Slider
4:56
Coming soon
Tabs
4:38

Tabs
4:38
Coming soon
Map
2:58

Map
2:58
Coming soon
Social media
2:49

Social media
2:49
Coming soon
Custom code
1:24

Custom code
1:24
Coming soon
Symbols
6:09

Symbols
6:09
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!
About this lesson
Course discussion
Production

Element Hierarchy

Download assets
Clone this project
Transcript
Learn more

Navigator panel

Download assets
Clone this project
Transcript
Learn more

Section

Download assets
Clone this project
Transcript
Learn more

Container

Download assets
Clone this project
Transcript
Learn more

Columns

Download assets
Clone this project
Transcript
Learn more

Div block

Download assets
Clone this project
Transcript
Learn more

Advanced button styling

Download assets
Clone this project
Transcript
Learn more

Link block

Download assets
Clone this project
Transcript
Learn more

Text Link

Download assets
Clone this project
Transcript
Learn more

Heading

Download assets
Clone this project
Transcript
Learn more

Paragraph

Download assets
Clone this project
Transcript
Learn more

Rich text element overview

Download assets
Clone this project
Transcript
Learn more

Use text blocks in Webflow

Download assets
Clone this project
Transcript
Learn more

Add a block quote to your page

Download assets
Clone this project
Transcript
Learn more

List

Download assets
Clone this project
Transcript
Learn more

Image

Download assets
Clone this project
Transcript
Learn more

Image file types

Download assets
Clone this project
Transcript
Learn more

Image resolution

Download assets
Clone this project
Transcript
Learn more

Assets panel

Download assets
Clone this project
Transcript
Learn more

Video

Download assets
Clone this project
Transcript
Learn more

Add background video

Download assets
Clone this project
Transcript
Learn more

Lightbox

Download assets
Clone this project
Transcript
Learn more

Forms

Download assets
Clone this project
Transcript
Learn more

Style Forms

Download assets
Clone this project
Transcript
Learn more

Navbar

Download assets
Clone this project
Transcript
Learn more

Navbar menu button

Download assets
Clone this project
Transcript
Learn more

Dropdown

Download assets
Clone this project
Transcript
Learn more

Slider

Download assets
Clone this project
Transcript
Learn more

Tabs

Download assets
Clone this project
Transcript
Learn more

Map

Download assets
Clone this project
Transcript
Learn more

Social media

Download assets
Clone this project
Transcript
Learn more

Custom code

Download assets
Clone this project
Transcript
Learn more

Symbols

Download assets
Clone this project
Transcript
Learn more

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits
Download course assets

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

McGuire Brannon

Director of Education

Designs by

-

Related courses

Beginner
20min

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Intermediate
4hr 17min

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Beginner - Intermediate
20Min

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Beginner
8min

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Thank you!
Shoot, something didn't work. Try again later, bud.

Community forum

Share and get help from our active community.
© 2020 Webflow, Inc.
All rights reserved.

Product

DesignerInteractionsCMSEcommerceEditorHostingPricingEnterpriseTemplatesFeature Index

Company

About
Jobs
We're hiring!
Terms of ServicePrivacy PolicyCookie PolicySitemapBecome an Affiliate

Learn & Get help

LessonsCoursesWebflow 101BlogEbooksForumCommunityStatusSupportWishlist

Social

YouTubeTwitterFacebookInstagram