Summary

The Ultimate web design course includes over 100 videos. It starts with everything you need to know to get started with Webflow and eases into more advanced design concepts. You'll learn the basics of HTML, how CSS classes and subclasses function, how to construct a page design with elements like containers, divs, flexboxes, and grids. And of course, we'll take you through how to use one of our most powerful features — Webflow CMS. By the time you finish this course, you'll be able to build some pretty amazing stuff.

Lessons in this course

Getting started

Coming soon

Learn your way around the Webflow Designer.

Intro to the Designer
2:48
Coming soon

HTML makes up the structure and content on a website, while CSS styles the content. Webflow generates this code while you design.

Intro to HTML & CSS
3:38
Coming soon

Use HTML (HyperText Markup Language) to render your website's content and settings.

HTML structure
1:55
Coming soon

Web structure

Coming soon

An overview of the box model — how it shapes web design and gives you more flexibility to build layouts in Webflow.

Intro to the box model
1:54
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

Elements

Coming soon

Use the Add Elements panel to get quick, visual access to various elements you can add to your Webflow project.

Add Elements panel
1:49
Coming soon

Set an Element ID and use it to create an anchor link that takes you to a section on a page.

Section link
0:46
Coming soon

Use containers to keep your content centered and legible.

Container
2:44
Coming soon

Create columnar text that applies to text elements and other elements, like forms that use the text columns property.

Use text columns in Webflow
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

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

Navbar menu button
4:51
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

Collection lists are one of two ways to add and design dynamic content from a CMS collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.

Collection lists are one of the two ways to add and design dynamic content from a Collection.

Collection list
3:33
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

The video field is a CMS field used in Collections. It allows you to add videos via a link from third-party online video hosts Vimeo and YouTube.

The video field is a Collection field which allows you to dynamically insert videos in your designs and template pages.

Dynamically insert videos
0:39
Coming soon

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

Add background video
3:15
Coming soon

Components

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

Add, customize, and reuse a Navbar.

Navbar
9:38
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

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

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

Map
2:58
Coming soon

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

Dropdown
4:38
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

Styling basics

Coming soon

Learn all about the Style panel and how to customize the layout and style of elements in Webflow.

Style panel overview
3:15
Coming soon

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Here’s what we’ll be covering:

  1. Accessing tags
  2. ‍Styling tags versus classes
  3. ‍Example 1: All H1 Headings tag
  4. ‍Example 2: All Links tag
  5. ‍Example 3: All Images tag

Use HTML element tags to control the default styling for a particular element type.

HTML tags
3:59
Coming soon

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

Here we’ll cover:

  1. ‍Creating classes
  2. ‍Applying classes
  3. ‍Editing classes
  4. ‍Creating class variants by duplicating classes or by adding combo classes

Use classes to save styling information that applies to as many elements as you want across your project.

Use classes to style elements
2:46
Coming soon

Lesson info

After you’ve applied a class to an element and added styling, sometimes you might want to make a small styling change on one instance of this class, without affecting other elements with that class. In such cases, instead of creating a new class and recreating the same styles, Webflow lets you create what we call a combo class, and apply style overrides to create a unique variation.

In this video, we'll walk you through:

  1. ‍Creating combo classes
  2. ‍Applying combo classes
  3. ‍Overriding styles
  4. ‍Understanding the differences between combo classes and duplicate classes

Make small styling changes on single instances of a class by creating combo classes.

Combo classes
4:05
Coming soon

In Webflow, as in code, elements pass their typographic style information down to their children. You can set text styles on parent elements, these styles will cascade down, and you can override these styles on their child elements.

It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside of sections, and to override default link block styles. In this article, we’ll cover three examples of how text style cascading works:

  1. From the body tag
  2. ‍From Webflow's section element
  3. ‍From Webflow's link block

Check out examples of how elements can pass text style information down to their children.

Text style inheritance overview
3:18
Coming soon

The Style Manager displays the complete list of classes, combo classes, and tags you've created or edited in your project. Here, you can quickly rename or clean up any styles you aren't using anymore.

You'll find the Style Manager in the right panel. Just click the tab or press G to open it. In this video, we'll cover the contents of the Style Manager, and show you how to delete individual styles, rename classes, and even clean out all your unused styles with a single click.

Use the Style Manager to rename and clean up classes and tags.

Style Manager
1:56
Coming soon

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Add interactivity to your elements by changing how they look and behave in different states.

States
2:47
Coming soon

Smooth animation between states with transitions

Transitions
2:40
Coming soon

Learn how to choose colors and create swatches using the color picker.

Color picker
3:51
Coming soon

An overview of the 3 common ways colors are represented on the web: Color names, Hex codes, and RGBA.

Color values
3:22
Coming soon

Layout basics

Coming soon

Webflow's Style Panel gives you several layout methods to help you position content in your project.

Layout settings
3:51
Coming soon

Adjust display settings to determine the fundamental layout behavior of an element.

Display settings
2:54
Coming soon

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Add space inside and outside an element's boundary using padding and margin.

Spacing
2:48
Coming soon

Define the size of an element, set minimum and maximum width and height values, and hide content that overflows element boundaries.

Size
3:59
Coming soon

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Customize the position of your elements relative to themselves, to parent or sibling elements, or to the viewport.

Position
1:48
Coming soon

Flexbox & grid

Coming soon

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Flexbox gives you precise alignment and stacking control for all the contents inside an element, solving many layout problems that designers struggle with.

Flexbox
2:27
Coming soon

Center elements vertically with flexbox.

Center elements with flexbox
1:20
Coming soon

Use flexbox to set equal heights for columns — even when each column has different content inside.

Equal height layouts with flexbox
1:47
Coming soon

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Use CSS grid to position content within a responsive layout.

Grid
6:04
Coming soon

Advanced layout

Coming soon

Use relative position to move elements relative to their normal position.

Enable relative position
1:43
Coming soon

Use absolute position to pin elements in a specific place inside the boundaries of a relative parent element.

Absolute Positioning
1:43
Coming soon

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements

Use z-index value to order stacked elements.

Apply a z-index value
1:49
Coming soon

Use the overflow property to hide or display overflowing content with or without scrollbars.

Hide overflowing content
1:49
Coming soon

Styling typography

Coming soon

Typography units
2:43
Coming soon

Use different units for line height to make it scale automatically with — or be independent of — font size.

Set a default line height
1:38
Coming soon

Define and configure your typography styles.

Advanced typography
3:01
Coming soon

Add Google Fonts to your project settings and use them in your Webflow project.

Add Google Fonts
1:18
Coming soon

Upload custom fonts in your Webflow projects.

Upload custom fonts
1:27
Coming soon

Add depth and create unique text styles by stacking text shadows.

Text shadow
2:36
Coming soon

Background & border styles

Coming soon

An overview of the background styles you can set on an element: color, background, gradients, and color overlays.

Background
2:20
Coming soon

Add and configure background images.

Set background images
2:04
Coming soon

Add a gradient background to help a section, button, or any element stand out.

Create gradient backgrounds
3:02
Coming soon

Use borders to define the radius of an element and create outlines on one or more sides of an element's boundary.

Border
3:06
Coming soon

Create circular shapes from rounded corners to perfect circles and everything in between using the Border Radius property.

Border radius
3:22
Coming soon

Use box shadows to add depth inside or outside of element boundaries.

Box shadow
3:34
Coming soon

3D styles

Coming soon

In this article we’ll cover some fundamental 3D concepts on the web. Check out the 2D & 3D transforms guide to learn how to put these concepts into practice on your Webflow project.

In this article we’ll cover some fundamental 3D concepts for the web.

3D movement & parallax
2:25
Coming soon

3D Perspective
4:01
Coming soon

Use 2D and 3D transforms to manipulate an element's appearance and position without affecting surrounding elements.

Transforms
4:53
Coming soon

Effects

Coming soon

Use opacity to change the transparency level of elements to create unique visual effects.

Opacity
1:44
Coming soon

Create hover effects using filters

Filters
2:59
Coming soon

Override the browser’s default cursor for an element by changing the cursor value.

Override the default cursor for elements
1:45
Coming soon

Responsive design

Coming soon

Learn how reflowing content, fixed sizing, relative sizing, and breakpoints (media queries) help to create responsive designs.

Intro to responsive design
2:21
Coming soon

Customize your designs for small and large screens using Webflow's 7 built-in responsive breakpoints.

Breakpoints
16:00
Coming soon

Add and change styles, determine style inheritance, and clear styles using breakpoints in the Designer.

Style across breakpoints
3:03
Coming soon

Interactions core concepts

Coming soon

A brief overview of triggers and animations.

Intro to Interactions
1:22
Coming soon

Triggers and animations make up the two primary aspects of any interaction: a trigger is what starts or continues an animation.

Triggers and animations
4:31
Coming soon

Learn about interpolation (creating motion between points), easing (for non-linear animation), and smoothing (creating a damping effect).

Interpolation, easing, and smoothing
2:58
Coming soon

CMS & dynamic content

Coming soon

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.

An explanation of static and dynamic content.

Overview dynamic content
1:36
Coming soon

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project—all without touching a line of code.

Intro to Webflow CMS
2:02
Coming soon

Collection items are database records in a Collection, like a single blog post, an author, or a product.

Collection items overview
Coming soon

Lesson info

When you create Collections in Webflow, you can enter your Collection items manually, or, import them directly into a Collection via a CSV. This allows you to import hundreds or even thousands of items from an external source.

In this video, we'll show you how to:

  1. Upload a CSV to a Collection
  2. Configure fields and preview Collection items
  3. ‍Import data

When you create Collections in Webflow, you can import Collection items via a CSV. This allows you to import hundreds or even thousands of items.

Import collection items
1:48
Coming soon

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item's page.

That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this video, we'll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we'll show you the settings you can adjust for Collection Pages.

Structure and style Collection pages that work like templates and automatically update your design.

Collection pages
3:03
Coming soon

Once you’ve created a Collection, you can go back and edit Collection items, fields, and other settings — even after the project has been published.

This video will cover:

  1. Editing Collection settings
  2. Editing individual Collection items
  3. Bulk-editing Collection items

Once you’ve created a Collection, you can go back and edit collection items, fields, and other settings—even after the project has been published.

Modify a collection
2:05
Coming soon

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

The Editor lets you update and add content in a simple interface, which is great for clients or teammates who don't need the complexity of the Designer.

Intro to the CMS Editor
2:22
Coming soon

CMS Collection fields

Coming soon

The plain text field is a CMS field you can use in your Collections. This field is best used for basic textual content that doesn't need special formatting like headings, inline styles, or inline media like images or video. In this video, we'll explain how to add and use plain text fields in your Webflow CMS Collections.

‍The plain text field is a Collection field that is best used for basic text that doesn't need formatting like headings, inline styles, or inline media.

Plain text field overview
0:52
Coming soon

The rich text field is a CMS field used in Collections. Us it to give collaborators all the text formatting options they expect from a writing tool, including bold, italics, inline images, links, and more. In this video, we'll explain how to add and use rich text fields in your Webflow CMS Collections.

Rich text fields are used for long-form content you can format from the CMS panel in the Designer or the Editor.

Rich text field
1:16
Coming soon

The image field is a CMS field used in Collections that allows you and your collaborators to upload an image to your Collection items and use it in your designs. In this video, we'll show you how to use the image field.

Use the image field to upload images in dynamic designs and template pages.

Image field
1:24
Coming soon

Use the YouTube video element to embed a video from a YouTube URL — gain access to display options offered by YouTube’s embed feature.

YouTube video
Coming soon

The email field is a CMS field used in Collections that lets you include an email address in a Collection item. You can use this email address to display the email as text or turn it into an active link so visitors can send an email with a click or a tap.

Use the email field to specify an email address for a Collection item.

Email field
0:47
Coming soon

The link field is a CMS field used in Collections to dynamically add links to your designs.

Use the link field to dynamically add links to your designs.

Link field
1:26
Coming soon

The number field is a CMS field used in Collections, handy for displaying numeric values like statistics, prices, page counts, file sizes, and more.

The Number field is a Collection field used when the input is meant to be a numeric value.

Number field overview
1:27
Coming soon

The date/time field is a CMS field used in Collections. This lets you and your Collaborators include a date and time in your Collections items, which is super handy for events of all kinds.

Use the Date/Time field to specify a date and time for Collection items.

Date/time field
1:38
Coming soon

The switch field is a CMS field used in Collections, usually as a filtering tool. Like any toggle, it has two values: Yes or No. Collaborators can toggle a switch on or off to specify, for example, if a blog post “is featured.”

The Switch field is a Collection field that is primarily used as a filtering tool. A switch is a field type which can have either of two values: Yes or No.

Switch field
0:58
Coming soon

The option field is a CMS field used in Collections. It gives collaborators a list of predefined values to choose from.

Use the option field in Collections to give collaborators a list of predefined values to choose from.

Option field overview
1:25
Coming soon

The color field is a CMS field used in Collections. It allows you and your Collaborators to specify a color for each Collection item using a color picker. This color can be used to style the background color, text color, and border color of elements within a Collection list or a Collection page.

The color field is a Collection field that allows you and your Collaborators to specify a color for each Collection item using a color picker.

Color field
0:38
Coming soon

The Reference field is a Collection field that you can add to any of your Collections. This powerful field allows you to link to an item in a different Collection. You can then use the referenced item’s content in Collection Lists and Collection Pages. In this video, we'll discuss some common uses of the Reference field, then show you how to make the most of it in your designs. To reference multiple items from a different Collection, use the Multi-reference field.

Use reference fields to connect items from different Collections.

Reference field
1:11
Coming soon

A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites.

A multi-reference field allows you to associate one item with multiple others from another Collection, which is great for tagging and categorization.

Multi-reference field
2:31
Coming soon

Advanced dynamic content

Coming soon

Learn how to filter and limit items in Collection lists.

Filter Collection lists
2:47
Coming soon

Conditional visibility is the most versatile way to show or hide elements, whether in a Collection list or on a Collection page, based on values in the Collection's fields. For example, you could use conditional visibility to make events that are now in the past no longer appear on your events page. In this video, we'll show you how to use conditional visibility on your Webflow sites, and introduce a couple more examples of conditional visibility in action.

Use conditional visibility to show or hide elements in a dynamic design and create unique designs for Collection items based on different criteria.

Conditional visibility
2:43
Coming soon

SEO

Coming soon

301 redirects allow you to permanently route traffic from an old to a new URL and avoid the dreaded 404.

Use 301 redirects to route traffic from an old to a new URL.

301 redirects
2:39
Coming soon

Verifying your site with Google is a key early step in your SEO efforts as it allows you to verify ownership of a website, so you can use the Google Search Console tools like indexing. In this video, we'll show you how to quickly verify your site with Google.

Verify ownership of your website and gain access to Google Search Console tools like indexing.

Google site verification
2:59
Coming soon

Google Analytics gives you valuable information about user behavior on and interaction with your website. It includes powerful metrics like how many users and pageviews a site is getting, where your traffic is coming from, how long people stay on the site, and how many of them are leaving the page without clicking other links (bounce rate).

This helps many businesses figure out where to invest marketing dollars and measure the effectiveness of marketing campaigns.

In this video, we'll show you how to set up Google Analytics for your Webflow sites so you can take advantage of these powerful tools.

Add Google Analytics to your Webflow project.

Google Analytics
1:56
Coming soon

For the vast majority of search engines, search engine results pages feature two different forms of results:

  1. Paid search results, or ads
  2. Organic search results, which are ranked by relevance and, to an extent, reputability

In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts.

An overview of the difference between paid search results or ads and organic search results ranked by reputability and relevance.

Paid vs. organic search
1:34
Coming soon

Ultimate web design course

118
Lessons
Getting started
Getting started

Coming soon
Coming soon
Coming soon
Coming soon
Web structure
Web structure

Coming soon
Coming soon
Coming soon
Coming soon
Elements
Elements

Coming soon
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
Components
Components

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Styling basics
Styling basics

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Layout basics
Layout basics

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Flexbox & grid
Flexbox & grid

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Advanced layout
Advanced layout

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Styling typography
Styling typography

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Background & border styles
Background & border styles

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
3D styles
3D styles

Coming soon
Coming soon
Coming soon
Coming soon
Effects
Effects

Coming soon
Coming soon
Coming soon
Coming soon
Responsive design
Responsive design

Coming soon
Coming soon
Coming soon
Coming soon
Interactions core concepts
Interactions core concepts

Coming soon
Coming soon
Coming soon
Coming soon
CMS & dynamic content
CMS & dynamic content

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
CMS Collection fields
CMS Collection fields

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Advanced dynamic content
Advanced dynamic content

Coming soon
Coming soon
Coming soon
SEO
SEO

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!

Intro to the Designer

Learn more

Transcript

Intro to HTML & CSS

Learn more

Transcript

HTML structure

Learn more

Transcript

Intro to the box model

Learn more

Transcript

Element Hierarchy

Learn more

Transcript

Navigator panel

Learn more

Transcript

Add Elements panel

Learn more

Transcript

Section link

Learn more

Transcript

Transcript

Use text columns in Webflow

Learn more

Transcript

Transcript

Navbar menu button

Learn more

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

Collection list

Collection lists are one of two ways to add and design dynamic content from a CMS collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.

Learn more

Transcript

Collection lists are one of the two main ways we can design and develop with content from a collection. Here's a sample collection we created for a group of team members. From any page in our project, we can access the Collection List right from the Elements panel, and drag it right onto the Canvas.

We want to quickly cover three aspects of a collection list: the basic layout, binding to a collection (this is super powerful), and collection list settings.

Let's do basic layout.

We're dragging the collection list and dropping it right on the Canvas. So we have a bunch of empty purple boxes. And though we're just getting started, we can choose our collection from the dropdown, and we can play around with layout options.

Regardless of the layout we choose, if we go to Preview, we'll see the current design: literally nothing's there. Let's go back out of Preview. There's nothing there because we haven't referenced any of our content.

Since our collection list gives us access to anything from a collection, we can drop an element right into any collection item in our collection list. Let's make this heading an H3, but it could be any text element.

And we can bind that element right to a specific field from our collection. This is just getting the name from our team members. And that's it. We're looking at the content — we have an H3 for each of our items in the collection list.

Let's keep going. We can drag in an image element. And when we're dropping these elements in, they're static. They're static until we bind them to something from a collection. And when we do? Each item in our collection list is referencing the relevant field.

All we're doing is dragging in normal elements (static elements) and binding them to specific fields in our collection.

We can, of course, add styles to any of these. And as we're adjusting here, we can see that changes in a collection list are done in lockstep. That is: changing anything in one collection item affects the others. That's by design. If we drag in a div block to wrap and style the content in each item? Those changes are happening in all our collection items.

There's still a major advantage to using classes — that is: while everything's done in lockstep in this collection list, we might want other collection lists on other pages throughout our project. Of course, classes will empower us make style changes project-wide.

And we're accelerating here (quite a bit) so you don't have to sit through each and every frame, but the idea here is that you can bind dynamic content to static elements in a collection list.

That's binding. Let's look at our settings.

We can select our Collection List Wrapper element (or our Collection List element) and adjust our layout at any time.

Our collection list settings also let us add filters. Filters empower us to show only the collection items we want — collection items that match one or more criteria.

We can also choose all sorts of options related to sort order — how we want the collection items to be sorted. Maybe based on when the collection item was updated: newest to oldest.

If we go back into the CMS and into our collection? And we go inside one of our items to make a change? Of course, we know that'll affect how recently this item has been updated.

Which means back in our collection list, we'll see that Dale is displayed first. We're sorting based on when the collection list was updated. Newest to oldest.

We can also put limits on the number of collection items displayed. This will only display the number of items specified here.

So. Collection lists. We can drop them in anywhere. They give us access to anything from a collection. We can choose our layout, we can bind collection content to elements inside the list, and we can, of course, configure our settings to tell the collection list how to sort and display the items in our design.

Transcript

Image file types

Learn more

Transcript

Image resolution

Learn more

Transcript

Transcript

Dynamically insert videos

The video field is a CMS field used in Collections. It allows you to add videos via a link from third-party online video hosts Vimeo and YouTube.

Learn more

Transcript

The Video field is straightforward: from here, we can paste in any link to a YouTube or Vimeo Video. This can be done, of course, in the CMS — or by a collaborator or client in the Editor.

So how do we implement? On the Canvas, we can drag in a Video element from the Elements panel into any Collection List or Collection Page. And when we do that, we can get the Video right from our collection — we can bind it right to the Video field.

Of course, we can format this just as we'd format the element if it was using a static YouTube link. In this case, the Video link that's used here is bound to the Video field in the item that's being referenced.

That's the Video field.

Add background video

Learn more

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Transcript

Style panel overview

Learn more

Transcript

This is it. This is the Style Panel. From here, we can control each and every aspect of styling. We can create classes which let us reuse our styles throughout the project.

And we’re going to cover some of the more powerful features and functions of the Style Panel. And this will give us extremely granular control over the way elements are styled throughout our project.

Three things we'll cover: the top section which includes our Selector field, the anatomy of the style sections, and the indicators we'll see when we're using the Style Panel.

Let's start at the top. When we select an element, we can see the element type right at the top of the Style Panel.

Under that is the Selector field. This is where we'll see the option to select a class or a tag which will apply to the selected element. When we're styling, we'll see that class or tag right inside the Selector field.

The other feature here is the target icon. This will give us a page and project count — how many times this class or tag is used.

We can even click on this to toggle a pink or magenta outline to identify these elements if they're visible.

For now, we'll move on to the various style sections.

Some of these have an Advanced toggle. When we activate or deactivate that option, the number of options we can see increases or decreases.

We can also collapse any of these style sections. We can click right on the label for each pane to collapse or expand.

And as we go through Layout, Typography, Background — we can see all the CSS properties we can visually manipulate. We've created instructional content on each of these, but something we want to highlight right now is the indicators we can already see on the screen.

In the Style Panel, orange indicators tell us that a value is being inherited from somewhere else. If we click that orange indicator, we can see exactly where the style is coming from.

If our current class or tag has its own value for something, that's indicated in blue.

So when we collapse these style sections — when these panes are collapsed, the blue and orange indicators are giving us a quick overview so we can glance and see what's affecting the current class or tag.

Now, we can also use the Inheritance Menu to quickly visualize and select from the different classes and tags affecting our current styling. We can make a change — in this case we're changing the font — then, at any time, go right back to where we were styling.

So. We have the top section which contains our Selector field: show's what we're styling.

We have our style sections, which can collapse or expand — these panes give us control over all our CSS properties — all our styling options.

And finally, we have orange and blue indicators. Orange means whatever we're styling is inheriting a value from something else, and blue means we've added or styled something on the current class or tag.

We'll cover all of this comprehensively — but this is a good overview of the layout and the anatomy of the Style Panel.

HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Here’s what we’ll be covering:

  1. Accessing tags
  2. ‍Styling tags versus classes
  3. ‍Example 1: All H1 Headings tag
  4. ‍Example 2: All Links tag
  5. ‍Example 3: All Images tag
Learn more

Transcript

Tags give us a great way to control the default styling for a particular element type. As we already know, we can set a lot of defaults for our project — like font settings — inside our Body (All Pages) Tag. This is a great starting point.

So we're going cover three examples for styling Tags: Headings, Links, and Images.

Let's do Headings. If we drag in a Heading from our Elements panel? Make it an H1? Of course, we're getting some style values here, like font, from our Body (All Pages) Tag.

But let's use our dropdown, and select All H1 Headings. And just like that, we have access to styling the Tag. All H1 Headings throughout our project. Let's make some changes to the margin to affect spacing, and we can go in and affect font size. Maybe we want all our H1s to have a thicker font weight so we can adjust the font weight.

And now whenever we drag an H1 into our project, we're starting with these defaults.

This doesn't stop us from using classes. In fact, we can create a class on any of our H1s — maybe this one is a major Heading — so we'll make some changes to affect that. These changes are using the All H1 Headings Tag as a starting point. Of course, not every H1 in our project needs to look identical. Or we can remove that class, and check our orange indicator to see that, once again, things are being inherited from our All H1 Headings Tag.

So, headings here can take a lot of styling cues from the Body. When we modify our All H1 Headings Tag, we're affecting the default styling for H1s. We can style further by adding a class, and we can even do variants of those using combo classes.

The combo class takes its styling cues from its base class, which takes its styling cues from the Tag, which takes its styling cues from the body, which takes its styling cues from GQ.

That's Headings.

Let's power through Links. Here's a paragraph. Let's go in (double-click) then select some text. And we'll make it a Link. Let's do the same thing for some more text, again, making this a Link. And with any of these selected, let's go up in our Style panel and hit the dropdown to select All Links.

From here, we can mess with text decoration. Or we can change our default Link color. Keep in mind that All Links also serves as the basis for other types of Links. So in Hover here, we can change the font color. But if we go over again to the Elements panel, then we drag in a button, on hover, we can see that our All Links style affects this, too. So that's something to keep in mind when styling.

That's the All Links Tag.

Let's end on Images.

From our Asset Manager, we'll drag an Image right onto the page. And with any Image selected (like this one), let's go to our All Images Tag. Actually, this is a great time to go back and show that we can do this even after we've added a class or combo class. Let's create a quick class and hit enter. And now, we can click in over here, and select our Tag right from the dropdown: the All Images Tag.

Say, by default, we want Image elements we add to our project to have rounded corners. We can set our rounding, and not only can we see it on the Canvas, but if we go into the Asset Manager and pick a new Image to drag in? It's carrying those defaults from the Tag (the All Images Tag).

That's Images.

So. Tags. Do you need them? Hanes might argue "no." Others, like Dale, will argue "yes."

The truth is, the real answer is somewhere in between: it's entirely up to you. If you're creating a quick one-page project with a Heading and a paragraph, do you need to go in and configure all your Tags? Probably not. But as you scale, Tags can save you a ton of time by giving certain element types a starting point. A basis for styles on particular kinds of elements.

But that's it. Those are some of our thoughts on Tags.

Use classes to style elements

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

Here we’ll cover:

  1. ‍Creating classes
  2. ‍Applying classes
  3. ‍Editing classes
  4. ‍Creating class variants by duplicating classes or by adding combo classes
Learn more

Transcript

Making manual style changes to each and every element is a pain. It takes a ton of time to enter repetitive values, and once you've done that, changes to those values can seem even more frustrating. Classes contain styling information, and you can apply these classes to as many elements as you want throughout your project.

We have three things to cover here — really straightforward: creating classes, applying classes, and editing classes. Let's create a class.

Now this page has a number of sections, and each section has a heading inside at the top. These headings have been dragged right in — nothing has been applied — nothing has been styled. So we're styling from scratch.

With our element selected, we can begin styling right away. We can make changes to our layout like margin. We can adjust typography — maybe choose a different font or adjust the font color. We can adjust all sorts of style values.

The big takeaway here is that the moment we began styling, a class was automatically created. And when we intend to reuse (or even just organize) this class, we can double click it to rename. Let's call this Best Heading Ever. And you can call it whatever you want.

As an alternative, you can select any element that doesn't have a class applied, and instead of styling first, you can actually start by clicking in and naming a new class.

That's creating classes.

Applying classes is where things start to get interesting. Now we can see inside our Selector field that this element — this heading — has the Best Heading Ever class applied. But right now, this is the only element that's using that class.

So let's go down to another heading and select that one. And if we click inside our Selector field, we can type in Best Heading Ever. Hit Enter. And the class has been applied.

Let's do it again to this heading. This time, we can see the class name appears as we start typing it out, so we can use the keyboard arrows or the mouse to select our class.

Now what if an element already has a class? Here's a heading which already seems to have a different class listed in the Selector field. If we hover over and click on the down arrow, we can remove that class. And just the like the others, we can click inside and apply our Best Heading Ever class.

That's applying classes.

Finally, let's edit our classes.

Once a class has been created, we can select any element that's using our Best Heading Ever class.

When we go in and make a change, that change affects all instances where that class is used throughout the project. No more manually changing each and every tiny detail. You do it once. Classes do the heavy lifting.

And if we want to rename our class? Maybe it deserves a promotion? Again, just double-click, and type the new name. This will change the name of the class throughout the project.

So, we can create classes which contain all our style information. We can apply classes to as many elements as we'd like. And of course, we can edit the styling on these classes, and those changes will affect the styling on each and every element that's using that class.

Combo classes

Lesson info

After you’ve applied a class to an element and added styling, sometimes you might want to make a small styling change on one instance of this class, without affecting other elements with that class. In such cases, instead of creating a new class and recreating the same styles, Webflow lets you create what we call a combo class, and apply style overrides to create a unique variation.

In this video, we'll walk you through:

  1. ‍Creating combo classes
  2. ‍Applying combo classes
  3. ‍Overriding styles
  4. ‍Understanding the differences between combo classes and duplicate classes
Learn more

Transcript

Sometimes it's impractical to create separate classes every time you want to make a change. If we've taken the time to create the most glorious heading on the planet, and we want to use that class as a starting point for a variation? If we want the same thing somewhere else but in light blue? We could create a new class and go through the entire process again. Or we can use a Combo Class.

We'll cover three aspects of Combo Classes: creating a Combo Class, overriding Styles, and selecting the Base Class. Let's create a Combo Class.

And we'll work with this button. There are a lot of buttons on this page, all of them completely unstyled. And what we'll do is click to type in and create a class (since we intend to reuse this styling).

And we can go in and make changes. Like setting a background color on this class. Or, going in under typography and setting a font color. And, we might want to change the default padding on the button, so we can make adjustments there, clicking and dragging while holding option or alt to affect opposing sides of the button at the same time. And finally, let's round things out by going down to the radius. Add some rounding on the corners.

Now, we already named this class, so we can go through and apply it to some of the other unstyled buttons on the page. We're simply selecting each of these buttons, and applying the class we just created to each of them.

But wait a second. This section, when we apply our class to the button, doesn't have the greatest contrast. We could remove the class and try and remember all those changes — creating a new class from scratch. Or, we can create a Combo Class. We're going to click in the blank space to the right of the Base Class (the one we created before), and type to create our Combo Class. And of course hit enter.

And it’s worth noting that a Combo Class, just like a regular class, is applying directly to the element. So if we check out any of the other buttons? Nothing's changed.

But with our button down here? Once we've created a Combo Class, we can add or override Styles without affecting the original class.

That leads us to the next step: overriding Styles.

Because our selector field has the Combo Class showing up here, any Styles we add or override will only affect the Combo Class.

Let's check out these indicators — we can see that our Background Color and our Font Color — all the Style values we added before, they're all coming from the Base Class we created earlier.

Let's change that. We'll adjust our Background color — we can go in and change that value. And we'll go in to do the same thing — this time making a change to the Font Color.

Of course, each of these changes has turned the orange indicator blue. We know that means the currently-selected class (our Combo Class) has its own Styles that are now being set.

Now, those pre-existing Style changes aren't necessary. You can add new Styles to a Combo Class that weren't explicitly set in our Base Class, like all-caps.

But that's how we override and add Styles on a Combo Class. Let's talk about the Base Class.

Again, because we're styling the Combo Class, these Style changes aren't affecting our Base Class. That's because the Combo Class is a more specific selection.

But let's select one of the original buttons and make a change to the font size. Notice how doing that affects the button that has the Combo Class applied. That's because we didn't override the font size. If we click in and take a look at our orange indicator, we can see that the font size, that change, is being inherited from our Base Class.

We can also select the Base Class from our Selector Field. Simply click the dropdown, and select the Base Class. Even though our newer button still has that Combo Class applied, we're currently styling the Base Class: changing the font here will affect our Base Class everywhere. We can switch back to styling our Combo Class by simply pressing Go back. And if we check our font here in the Combo Class, we can see it's being inherited right from the Base Class we just modified.

So, Combo Classes save us a ton of time. We can create Combo Classes (which inherit the styling from our Base Class), we can override or add our own Styles, but we can still go in and select the Base Class to make changes at any time.

Text style inheritance overview

In Webflow, as in code, elements pass their typographic style information down to their children. You can set text styles on parent elements, these styles will cascade down, and you can override these styles on their child elements.

It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside of sections, and to override default link block styles. In this article, we’ll cover three examples of how text style cascading works:

  1. From the body tag
  2. ‍From Webflow's section element
  3. ‍From Webflow's link block
Learn more

Transcript

As we know from both HTML element hierarchy and Louisiana Civil Code, elements can pass Text Style information down through to their children. We can set Text Styles on parent elements which pass styling down, and we can override these styles on their child elements.

We're going to show three examples to demo this. That's it. We'll start with the first one.

Let's look at this ultra-simple layout. We have our page body, then inside that we have our Section, then a container inside the Section. Let's drag in a paragraph to join our heading. Now we've applied no classes — no styling of any type to any of these elements.

By default, if we check our paragraph (press our orange indicator), we can see it's getting the font from the body. Let's select the body. And with the body selected, we'll change the font.

Now because this updates in real time, this part has already been spoiled. We know that our heading and our paragraph are inheriting this new font change from the body. We can override this, though. Make a change, now have a blue indicator which, of course, shows us that we've made a style change here. Or we can remove that. Again, if we click the indicator, it's inheriting from the body.

And keep in mind: while the body is the top level element, we'll have to apply that body class (which was automatically created when we changed the font) — we'll have to apply that to the body on other pages, too. A great alternative — and we'll remove this class right now — is to go in and select our Body (All Pages) tag. Changes here will set those defaults on all pages in the project.

That's example 1.

Example 2 is a Section.

And even though it's not a text element, we can apply font styling here, too. First, let's see where it’s coming from. Of course, it's coming from our body tag for all pages. With our Section selected, let's override this font, and while we're at it, let's change the font color, too. Notice how the heading and paragraph inside — both child elements of the Section — notice how these are affected by the changes. That's because this override broke the chain of inheritance.

Before, the Section's child elements (the heading and the paragraph) didn't have any indication from their direct parents (like the container or the Section) regarding font. The Section and the container weren't specifying anything, so the heading and paragraph looked all the way up the hierarchy to the body for that styling info. So it didn't matter.

But since we've added styling to the Section, that's overriding that styling. If we take a closer look at the inheritance, we can see the value is now coming from the Section.

Just like we overrode the body earlier, we can do the same thing here. Any child element can override text styling. We can see our blue indicator which means exactly that. Let's remove it, and again, we're inheriting from our Section.

That's example 2.

Example 3 is a Link Block. Same idea here.

Here's some text sitting inside a Link Block. We could style the text directly, or we could simply select the Link Block and change the styling here. Once we do that, we can go in and select our text.

Where is this style value coming from? Of course, it's coming from our Link Block.

We can override at any time, or we can remove that and check to see that, yet again, we're inheriting that style value from the Link Block.

So, regardless of the context or the element type, text styling passes down through the hierarchy unless it's been overridden.

Style Manager

The Style Manager displays the complete list of classes, combo classes, and tags you've created or edited in your project. Here, you can quickly rename or clean up any styles you aren't using anymore.

You'll find the Style Manager in the right panel. Just click the tab or press G to open it. In this video, we'll cover the contents of the Style Manager, and show you how to delete individual styles, rename classes, and even clean out all your unused styles with a single click.

Learn more

Transcript

The Style Manager displays a comprehensive list of classes or tags we've created or used in our current project. It's a good overview of these styles, and it's a quick way to rename or even clean up anything we're not using.

With that in mind, we'll cover Anatomy, Renaming, and Clean Up using the Style Manager.

Let's start with anatomy. From anywhere in our project, we can click the Style Manager on the top-right. Tags we've styled will appear at the top. And that, we have our classes and combo classes appear underneath with a plus sign to their left. This is a quick way to determine class inheritance (the relationship between base classes and combo classes).

Let's select a heading here — no class is currently applied. Let's click to create a new one and give it a name. Press enter. Back over in the Style Manager, if we scroll all the way to to the bottom, we can see the new class we just created.

Classes are listed in the order they were created.

Now let's move on to renaming.

We'll select the wrench icon and rename the class we just created. If we do that, and go back to the Style panel? We can see that the class name has been updated. Double-click there, rename again, and if we go back to the Style Manager all the way at the bottom, the name's been updated there, too.

Finally, let's cover clean up. And for many, this can induce euphoria. Because it does the work for you, and automatically cleans up classes we're not using.

Let's actually start by removing the class from our heading. Now it's no longer used in our project.

Go back to the Style Manager, and if we scroll down, it's still there all the way at the bottom. That's because classes aren't removed from our project in case we want to use them elsewhere. But up on the top-right, we can see Clean Up. And press Clean Up, and we get a confirmation showing us any unused styles (anything not currently associated with page elements). Let's press Remove. And we're free to continue styling.

So, the Style Manager is a great reference for tags and classes we have in our project. We can get a quick overview, rename, or clean up unused styles at any time.

States

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Learn more

Transcript

States. They're not just for links, but they're usually used for links. You can change the way elements look and behave by adding styling on different states. This adds interactivity to almost any kind of element.

And as we're styling, clicking the States dropdown lets you select between the various states you can access and style.

And there are four states we're going to cover: None (or normal), Hover, Pressed, and Focused.

Let's start with None: the normal state. This is the basis or the starting point for all other states.

And if we select this button, which has the Beautiful Button class applied, any styling changes we make are going to affect this state.

That's None. What about Hover?

If we select the States dropdown and press Hover? We're now styling the Hover state. And it's indicated in green.

We'll keep this simple, but you can make any number of styling choices. We'll choose to change our background color to green.

And we can switch back to None, and when we hover over with our pointer, the background color changes to green. Also, notice how the current state for the selected element is shown on the Canvas. As we're styling the Hover state, we see what the Hover state looks like on the Canvas. Whatever state we're in, the changes we make will be visible on the Canvas until we deselect or otherwise leave the state.

If we click the States dropdown, we now get a blue indicator to the right of Hover. That means there's a new value that's being set in the Hover state: in this case, we changed the background color to green.

We can switch between our Hover and None states any time to make changes to either.

That's Hover. Let's do Pressed.

And in CSS this is also called "Active" but it indicates what the styling will look like while the pointer is clicking down inside the boundary of our element.

And just like Hover inherited values from the None state, pressed will do that, too, but it'll also inherit values you've entered in the Hover state that override the None state. That's why the background color on Pressed is green.

We can change the background color again, this time selecting a darker green for this example. And let’s deselect our element. If we test this out? We see all three states: Normal, Hover, and Pressed.

That's the Pressed state.

And finally, let's cover Focused.

And this state is perfect for setting styles on elements that accept input — elements we can switch to by pressing Tab on the keyboard, like text fields.

If we're styling a class that's affecting each of the text fields here on the Canvas, any changes we make will show up when that text field is focused.

Now like any great artist, you might want a really, really bold, red glow on the text field when it's focused. We can make that adjustment to the Focused state, and when we go into Preview, that styling choice is really, almost painfully evident as we focus on each of our text fields.

So, those are the standard states we can style on elements throughout our projects.

Transcript

Transcript

Transcript

Layout settings

Learn more

Transcript

Display settings

Learn more

Transcript

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Learn more

Transcript

Transcript

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Learn more

Transcript

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Learn more

Transcript

Center elements with flexbox

Learn more

Transcript

Equal height layouts with flexbox

Learn more

Transcript

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Learn more

Transcript

Enable relative position

Learn more

Transcript

Absolute Positioning

Learn more

Transcript

Apply a z-index value

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements
Learn more

Transcript

Even for 2D elements, our third dimension, the z-axis, represents stacking order. In other words, what elements stack or overlap on top of other elements? Changes to z-index don't actually move our elements. This isn't controlling real depth. But z-index does help us position elements when we stack them.

Essentially, elements with a higher a z-index value show up on top of elements with a lower z-index value. There are some caveats:

If we have two elements (each of these elements has children), z-index will control stacking for those parent elements. But if element A has a higher z-index than element B? The children of element B can never overlap any part of element A. Even if the z-index is 700 billion.

Let's look at this in the Designer. Three div blocks, side-by-side. Our intention here is to have the middle div block overlap the outside div blocks. The normal stacking order here is that the first one is on the bottom; the second one is above that, and the third is above that.

Let's select the middle div block, which is set to relative positioning (keep in mind that z-index is only available on relative, absolute, and fixed positioning). And let's set the z-index to 1. Now it stacks on top! That's because the default z-index is zero. Keep in mind that setting the z-index to a negative value means we could lose element visibility because it'll get rendered underneath most elements.

Let's select the left one and set the z-index to 2. What's going to happen? Well, like we learned in AP Calc, 2 is greater than 1. So of course, it'll stack above. Let's select the right one. Set it to 2 as well. Or 3. Doesn't matter. It's greater than the middle div block which is set to a z-index of 1. If we set our middle guy to 4? You get the idea.

So, Z-index. We can control the stacking order of elements, with higher values stacking on top of lower values.

Hide overflowing content

Learn more

Transcript

Typography units

Learn more

Transcript

Set a default line height

Learn more

Transcript

Advanced typography

Learn more

Transcript

Add Google Fonts

Learn more

Transcript

Upload custom fonts

Learn more

Transcript

Transcript

Transcript

Set background images

Learn more

Transcript

Create gradient backgrounds

Learn more

Transcript

Transcript

Border radius

Learn more

Transcript

Transcript

3D movement & parallax

In this article we’ll cover some fundamental 3D concepts on the web. Check out the 2D & 3D transforms guide to learn how to put these concepts into practice on your Webflow project.

Learn more

Transcript

3D Perspective

Learn more

Transcript

Transcript

Transcript

Transcript

Override the default cursor for elements

Learn more

Transcript

Intro to responsive design

Learn more

Transcript

Transcript

Style across breakpoints

Learn more

Transcript

Intro to Interactions

Learn more

Transcript

Triggers and animations

Learn more

Transcript

Interpolation, easing, and smoothing

Learn more

Transcript

Overview dynamic content

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.

Learn more

Transcript

So many of our projects are all about content. And sometimes we have a lot of it. Back in the Stone Age, we'd have to configure all of this content by hand. That's what we mean by "static content." It stays just as we created it.

We'd get this perfectly-designed blog page exactly how we'd like it, and what do we do? We duplicate. And then we go in and change the content on our duplicated page. We just created another blog post.

But then what happens when we want to change part of our design? We want to add something new on each page? Well, that's fine. We just go back and change it on the other page, too. Except that's not how it works. Because this project has 400 blog post pages.

We've all been here. That's static content. We have to do everything by hand.

With dynamic content, the concept changes entirely. Dynamic content — whether it's a name or a color or a photo or a number or an email address — any content. It can be added or imported whenever to a database. And your design? No matter how perfect it is or how detailed you make it or how many pages you have? You just create it once. And you can pull anything from that database. So everything gets built out automatically. No more going back and updating everything one-by-one.

This works for anything you can imagine, because you can customize the database to have any kind of content you want. And you can get super granular with controlling and organizing your content. And with that, you can do blogs, and restaurant menus, and development projects, and team member pages, news sites, and fake news sites.

But that's the main difference. Static content: entering and tweaking things one-by-one. And dynamic content: you can reference your custom database. You get to control everything, but the content is built out automatically using your design.

Intro to Webflow CMS

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content
Learn more

Transcript

The CMS is how we control and work with our dynamic content. In the Webflow CMS, the data structure is very straightforward, and we'll build from the bottom up:

At the very bottom, we have our content fields. These fields let us capture or input content – whether we're doing this one-by-one, or by importing a CSV with a ton of data. All that content is put in fields.

Of course, we're usually dealing with multiple items, each of them made up of these fields, and those items are all grouped together into a collection. A collection is the top-level container for our content.

So: if we have a collection of team members, each team member is an item. Each item (or team member) has fields of content.

That's the structure of the Webflow CMS.

Ready to use that collection in a project? Two ways to do that: we can use a Collection List, which lets us drop in collection content anywhere. And, of course, we have Collection Pages. Design one Collection Page, and your other collection items will follow suit — Collection Pages are automatically created for each collection item.

When you’re using collection lists or collection pages, they can be designed in any way to fit your brand.

You can change or add more content to your collection at any time. You can do this from the Designer, or, you can use the Editor. The Editor lets collaborators log in and access these collections, which makes it quick to add blog posts, employees, news. All of this plugging into the fields you created. Or, collaborators can edit content right on the live website. Press Publish from the Editor? And that content is now live.

Now. We've created detailed content for each aspect of the Webflow CMS, but here we've covered the basics:

We have collections, which contain each item made up of fields. We can use any of the content from these collections in our project, whether it's the Collection List element or Collection Pages. And we have the Editor: a powerful way for site owners to add or change content, and publish to bring that content live.

Collection items overview

Learn more

Transcript

Import collection items

Lesson info

When you create Collections in Webflow, you can enter your Collection items manually, or, import them directly into a Collection via a CSV. This allows you to import hundreds or even thousands of items from an external source.

In this video, we'll show you how to:

  1. Upload a CSV to a Collection
  2. Configure fields and preview Collection items
  3. ‍Import data
Learn more

Transcript

A lot of times, we'll have access to huge amounts of data: items that we want to feed right into a collection without having to create them manually. Wouldn't it be great if would could simply configure and import a CSV right into a collection? In this video lesson, we're going to configure and import a CSV right into a collection.

Whether you've exported your CSV, or you're typing out your CSV manually, an optional first step is to configure the CSV for import. Here in Google Sheets, we have a pretty straightforward spreadsheet.

We've included a header row (which lets us specify the type of content contained in each column). In other words, each of these columns represents a field type. Each row? Represents an item.

Let's download this as a CSV — or if we're using Excel we can Save as... and choose from our File Format dropdown: CSV. Or if we're in Numbers, we can go to Export...CSV.

That's configuring a CSV. Most of the time, the Webflow CMS is going to be able to parse and import your content without manual configuration. But let's go in and drag the CSV right inside. We instantly get a good preview of what's happening with the content. First, we're making sure that the top row is a header. It doesn't need to be, maybe it's an item.

And once we continue, we can get even more specific regarding the following: not importing this content, creating a new field (if we want to create a field using this header...and choosing the field type from the dropdown), or mapping this content to an existing field (if we've already configured this field in our collection).

Over to the right, we have our item preview, and we can switch through the different items that we're importing. We can even click the dropdown and get super specific.

And when we're done? Just import...and that's it! We've imported these items right into our collection.

Collection pages

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item's page.

That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this video, we'll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we'll show you the settings you can adjust for Collection Pages.

Learn more

Transcript

While Collection Lists can go on any page and reference content from a Collection, we can also design and configure Collection pages. If we build a Collection page for one Collection item? Content automatically populates for every other item in the Collection. It's like magic in that it can save us hours and hours in the development process — and even more time as we add new content down the road.

Just like Collection Lists, we'll cover basic layout and binding content, but we're also going to cover linking to a Collection page from somewhere else in the project.

If we go to our Pages Panel and select our Collection page—

Actually, let's go back in time for a few moments. Before we made this video lesson. We went in and made a new Collection. We made a Blog Collection. And we filled it with dummy content. The point here is this: when we make a Collection, a Collection page...is automatically created.

Let's go back to the present. We're building this just as we'd build another page. Our navbar, our footer, sections, and headings and images, and paragraphs, and rich text elements. Now you might say "how did that get built so quickly?"

But the real question you should be asking is "how is this Collection page any different than a static page (a normal page in our project)" And the answer is: it isn't.

Just like a Collection List, elements dropped into a Collection page are static until we bind them to something else. So let's bind them to something else.

We can take any of our elements — like this one — and bind it to the relevant field. And it's not pulling from that field on one item. It's pulling from that field on all our items in that Collection. How do we prove that? The scientific method.

Or, we can — at any time — choose from our Collection items (in this case: blog posts) in the drop down. Visit any of those? And the content we just bound updates on all these pages.

But is this just for text? No. This is not just for text. This is for everything. We can get our background image from the Collection. We can select this button and get the URL from the Collection. And the text. We can get that, too.

And when we switch our Collection items using the dropdown? Each page has automatically been generated. Now 20 blog posts were created in the time it took us to design and develop one. We put Dale to the test to see how long it would take someone to duplicate and style each page one-by-one. Some say he's still working on it to this day.

Finally, let's talk about linking to these Collection pages.

Here's a static page. We have a Collection List we made for our featured blog posts. Let's drag a button right into our Collection List. And for fun, let's pull the button's background color from a color field we have in our Collection.

And now we'll simply go in under our Link Settings, and choose A Collection page. Which one? Current Blog Post. That'll link each button in these Collection items to the Collection page created for each Collection item. Or in English: these buttons will take you to the related blog post.

So. Collection pages? Automatically generated when you create a Collection. We covered the layout of a Collection page, we covered binding content to elements in that layout, and we covered linking to these Collection pages from elsewhere in our project.

Modify a collection

Once you’ve created a Collection, you can go back and edit Collection items, fields, and other settings — even after the project has been published.

This video will cover:

  1. Editing Collection settings
  2. Editing individual Collection items
  3. Bulk-editing Collection items
Learn more

Transcript

Once a collection has been created, or even down the road once your project has been completed and published, you can go in at any time and make a number of changes to a collection or any of the items inside.

We'll quickly cover modifying collection settings, making changes to individual items inside our collection, and even changing multiple items at once.

Let's do collection settings.

From the CMS, we can go into our collection. From our collection we can access Settings. We can change the name, do all the other stuff you'd expect here. But here's something that's really practical, especially if we're iterating on this while working with collaborators.

We can modify the label on each field — but we can also add or modify the help text to make everything really clear. Or we can re-sort our fields to change the order.

When we're done? We can save.

Let's go in and change collection items. We can do this from the Editor, too, but for now, let's go into our collection root, and click to select a specific item. Modify content? We can do this on each item individually. Just like before, when we're done? We can save.

That's modifying individual items. Finally, let's make changes on multiple items.

This is really practical when we're sorting the content we want displayed or featured in our project...or even in the CMS. We can show or hide our fields here using the pin icon.

We can even go in and select multiple items at once. We can mark these as Draft (maybe they're not ready for primetime). We could go back in and select other items. Of course, we can archive these (pull them from our project but keep them accessible from the CMS in the Designer and the Editor). Or, we can go back in one more time and select a couple of those items we just archived, and unarchive them so they publish again.

Want something more permanent? We can select a few of these and delete. Or, if you've just had it and want to start from scratch? Or maybe you've been using dummy content and you're ready to start with real content? You can delete everything.

So. We can go in at any time and modify our collection settings, we can change content for individual items, and we can select and modify multiple items at once.

Intro to the CMS Editor

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

Learn more

Transcript

The Editor is an interface we can use to access and edit the contents of a published site. It's what collaborators (like clients, customers) — it's where anyone can log in and get access.

If you're in a Webflow project, you can visit the Editor from the Designer over to the left, or from the Project Settings over to the right. Or, you (and any collaborators) can visit using the URL through your browser. Just add edit? Except, it's now become obvious: the question mark is at the beginning of edit. Let's try that again: just add question mark edit.

Back in our project, from our Project Settings, we can go right on over to Editor. We can add and configure permissions for our collaborators, and even control branding. We can add custom branding for our organization, or a client's organization. We can do that from Project Settings.

Three brief things to note about the Editor:

#1: You can literally manipulate content on the page. Want to change some text inside a heading? You can go in and change some text inside a heading. Want to replace this image used in the image element here? You can go in and replace the image.

This applies to content in your project (we're switching back over here to the Designer) in which, on any editable element, we've gone over to our Element Settings panel and checked "Collaborators can edit this element." What does it mean when that's checked? It means collaborators can edit this element. If it's unchecked, they'll still see it in the Editor but it won't be editable.

#2: second thing to note. If you've created one or more collections, collaborators can access them. They can go into any collection. And they can click to modify an existing collection item — like a blog post — or, let's cancel out of that, they can of course create a new item — in this case a new blog post.

On the top-right, if any collaborator wants to come back to this post later — if they don't want it to publish even if we publish other changes — they can check "Draft."

That's editing collections.

#3 — the final thing we want to mention here — is that changes in the Editor? These aren't updating in real-time. The content you're changing won't go live until you or a collaborator publish the project — whether through The Editor here, or through the Designer.

Speaking of the Designer, if we're visiting the Editor from our Project? We can get back to it at any time by switching right back over.

That's the Editor. Actually, this is the Designer. That's the Editor.

Plain text field overview

The plain text field is a CMS field you can use in your Collections. This field is best used for basic textual content that doesn't need special formatting like headings, inline styles, or inline media like images or video. In this video, we'll explain how to add and use plain text fields in your Webflow CMS Collections.

Learn more

Transcript

Plain Text is usually short-form text that you're planning to use or style in a project. It's important to note that Plain Text isn't an actual HTML element. Instead, this text is plain and un-styled: it will become bound to whatever element you specify. For instance:

A Plain Text field can have this text in it. We can use that text anywhere we want inside a Collection List or a Collection Page. Here's a heading: let's get the text from that Plain Text field. Hey, look: it worked perfectly. Here's a button: let's get the text from that same Plain Text field. Another success.

Plain Text can be bound — essentially it can feed into anything you want. This can include headings, and paragraphs, and links, and text blocks for things like category tags, and those little sale banners people like to put in the corners of product images.

Plain Text: any time you need a block of unformatted text to use in an element.

Rich text field

The rich text field is a CMS field used in Collections. Us it to give collaborators all the text formatting options they expect from a writing tool, including bold, italics, inline images, links, and more. In this video, we'll explain how to add and use rich text fields in your Webflow CMS Collections.

Learn more

Transcript

If a Plain Text field is for creating short-form, unformatted text, a Rich Text field is for long-form content that you can format from the CMS in the Designer, or from the Editor.

Rather than continue talking, let's continue talking while looking at how we can add and format rich content inside a Rich Text field.

Right now we're in the Editor. And we have an extraordinary amount of freedom here to create and format our content. When would we use this?

Blog posts. Articles. Anytime we need sectioned-off content. Biographies. Anything really. And we can control the styling for the rich text content — each kind of element (like headings, lists) — we can do this in the Designer using the Rich Text Element. That way collaborators can focus on content — and that content conforms to your design.

So the goal — or the question becomes this: how do we have a Rich Text Element in our project get the Rich Text content from our collection? Well, we drag a Rich Text Element into our project, and we get the Rich Text content from our collection. We cover the Rich Text Element itself in separate content we've created, so if you want a crash course on working with Rich Text inside the Designer, we highly recommend checking that out.

Rich Text field: Perfect for long-form text, or any time you want collaborators to have the ability to format this type of content.

Image field

The image field is a CMS field used in Collections that allows you and your collaborators to upload an image to your Collection items and use it in your designs. In this video, we'll show you how to use the image field.

Learn more

Transcript

The Image field. To say it's life-changing in the context of CMS is hyperbole. But not really. Here's why:

You might be thinking to yourself, "isn't this just a field that lets someone upload an Image? And to make it work, don't I choose an element and pull that Image to set it as a background Image?" Well, yes. That is one potential and frankly amazing use of the Image field.

But what about here? Fairly good-looking blog previews [Collection List]. Great content, meaningful words . The top div block here has a nice heading. Let's select that div and head over to the Element Settings Panel. And right here, we have access to this wonderful little checkbox: Get background Image. Bind it to the Image field? Now our div block is using those Images from our collection in the background.

But we can also bind directly to an Image element. Like a profile picture. Or an icon.

So the Image field can be used to bring in an Image for use in an Image element, like a profile picture or an icon, and we can use them as background Images just like we'd manually configure background Images on static content.

YouTube video

Learn more

Transcript

Email field

The email field is a CMS field used in Collections that lets you include an email address in a Collection item. You can use this email address to display the email as text or turn it into an active link so visitors can send an email with a click or a tap.

Learn more

Transcript

Email is one of those concepts rooted dramatic theory, going back to Aristotle's Poetics. Today, it's commonly used to contact team members, customer service, sales departments — you name it. And just like a Link field, an Email field can be used in elements that accept links.

If a collection contains an Email field, you can access it under the Link Settings on any link. Simply choose Get Email from the collection.

But check this out: we can type in a standard subject line, or we can even automatically pull text from a Plain Text field to appear in the Email subject.

Either way, our link will now trigger an Email using the Email address for the corresponding collection item.

But we're going to take this one step further. Some of our blog post authors here have emails listed, so obviously this works fine, but some of them don't. Let's add a condition. And we're using conditional visibility so that we only show this link block — if the email field has been set. (If the author has an email listed).

And just like that, the email link blocks for Claus and Astrid have disappeared. So we're only showing email links for those who have emails set. And that's the email field.

Link field

The link field is a CMS field used in Collections to dynamically add links to your designs.

Learn more

Transcript

A Link (from a Link field) can be used in any number of ways throughout a project. Obviously, we use it to enter Links. But we can bind this content — this Link from each Collection item — to any number of elements like: Normal Buttons, Link Blocks, 3D Buttons, Text Links, Animated Buttons, and of course...Impossible-to-select Buttons

With any of these kinds of elements selected (here's a button), we can simply get the URL right from our Collection. Of course, we also have the option to open the URL in a new tab.

The second Collection option here is to get the actual text for our Link (our button) from our Collection as well. This is a great opportunity to use the Plain Text field. And that plain text will replace the text inside the button if you'd like to use it.

But what's really great is how we can use the actual presence of a Link to show something specific. Let's say we have an organization and a good number of people in our organization have Facebook pages. A number of people don't. We'd only want to show the Facebook Link if they actually have a Facebook page.

We can add and configure a Facebook Link for everyone who has one — and bind that Link to the appropriate field. But here's the mind blowing moment: We can add a condition. We can say "Hey, the element is visible when...the Link (that Facebook Link) is set." So only team members who have a Link added will actually show up with the little Facebook icon. Super powerful.

So. Links: Great for buttons and text Links and Link blocks — they can Link you to any URL you enter.

Number field overview

The number field is a CMS field used in Collections, handy for displaying numeric values like statistics, prices, page counts, file sizes, and more.

Learn more

Transcript

The Number field is one of those magic fields that does way more than most people think. Yes, it's true: you can only put Numbers inside (integers, decimals...). But the magic isn't so much the field itself; it's how we can use these Numbers to accomplish a ton of work inside our projects.

What do we normally use Numbers for in a collection? Things like ratings, or rankings, or prices, or populations, quantities, season Numbers, episode Numbers, magic Numbers. We get the point.

Of course, we can bind any type of text inside a project to this field. But another really powerful way to use Numbers is in sorting.

If we've rated items on a scale from 1 to 5 and we want to show the highest-rated items first? We can sort that way.

But what about this? Filters? What if we only want to show items in a Collection List that have a rating of 4 or higher? If we're using integers, we can simply add a filter where we specify that the Number — our rating — is greater than 3. That means anything that's 4 or 5 on that rating will show up on our list. What about going back in and changing it to less than 4? Now only the items rated 3 and below are showing up. Or, maybe we only want to show the best-rated items. We could specify that we want the Number to equal 5. Now only items rated 5 show up.

So. Numbers can do a lot. Similar to a Plain Text field, we can enter Numbers and decimals. But we can also use these Numbers to sort. And create filters and sorting rules that let us organize and display selected content in our projects.

Date/time field

The date/time field is a CMS field used in Collections. This lets you and your Collaborators include a date and time in your Collections items, which is super handy for events of all kinds.

Learn more

Transcript

When we add a date and time field to a collection, there's an option when we're creating the field: and that's to include a time picker.

And of course, we can use the field to manually enter a date and time. Now once we grab that info, we can use it inside collection pages or collection lists.

Here's a collection page for a blog. Let's select this text block, click in, and bind the element to the date and time field we created. And get this: there are tons of options for formatting we can select from when we bind a date and time field to an element on the page.

You can also use multiple text elements to achieve some pretty cool effects here. For instance, you can bind one of them to the day (on top), and one of them to the month on the next one down (all we're doing is, under format, selecting the format that matches the type of date we want to display), and then you can bind another one — on the third text block — to the year — so this way we have three separate styles for day, month, and year. Let's close that out.  

Additionally, let's select one of the blog post collection items — and  we can head on over to the Element Settings panel, and use our date and time field to configure a filter. Right now, we're using our date and time field to show items released in the last 12 months.

Let's narrow that parameter a little bit, and we'll even exclude anything released today. Press save, and the collection list updates.

Of course, we can sort by date and time as well. Simply add — and our date and time field is selected — and we can select from the dropdown to sort from newest to oldest, so all our new content shows up first.

So. We can capture the date and time, and use this content for display, or for filtering and sorting items in Collection Lists.

Switch field

The switch field is a CMS field used in Collections, usually as a filtering tool. Like any toggle, it has two values: Yes or No. Collaborators can toggle a switch on or off to specify, for example, if a blog post “is featured.”

Learn more

Transcript

Switches are extremely useful when you're looking to filter elements based on something binary. An on or off or yes or no option.

Is this film black and white?

Is this company a non-profit?

Is this blog post featured?

This concept can be extended indefinitely. And when you add a filter? Simply select the Switch, and specify whether you're looking to display items that have the Switch on, or those that have the Switch off. The result of this filter is displaying only the results that fit this new Switch.

We can also create a Switch called "Show contact form" and go into our Collection Page? We can actually select an entire element inside — for our sign up div block — and set conditional visibility. We can go in and set a condition that shows this div block only if "Show contact form" is Switched on.

So. Switches. The word sounds odd the more you say it. The field is a powerful and straightforward way to work with dynamic content.

Option field overview

The option field is a CMS field used in Collections. It gives collaborators a list of predefined values to choose from.

Learn more

Transcript

The option field is built for any number of options you can select from a dropdown. Things like selecting from blog categories. Or choosing a preferred language. Setting a location — like what continent you're on. It's also great if you need to get info regarding gender, or maybe the department someone works in. Or something that contains fixed numbers. Or even number ranges like how many employees. And of course, we can do coffee sizes. And no, 31 ounces is not a typo.

A couple ways to practically use this. Number one: on the Canvas here, we can bind a text element to this field, getting the option text from the collection.

Of course, number two: we can also use a filter to display Collection List items based on the option we selected. In Filters, we'll add a filter. And when we select our option field from the dropdown, there are two approaches to doing this:

Equals or Does Not Equal will check against the Option field for a particular selection. And Is Set or Is Not Set simply looks for whether an option has been set in this field at all.

Now if we find ourselves adding options that like to stick together? Maybe we want to link a color to each blog category? We could just create a collection for blog categories. And instead of an option field, we could use a reference or multi-reference field.

But option fields are nice for giving us multiple, preset options which we can bind to text elements and use to filter content (or even create conditions) in a Collection List.

Color field

The color field is a CMS field used in Collections. It allows you and your Collaborators to specify a color for each Collection item using a color picker. This color can be used to style the background color, text color, and border color of elements within a Collection list or a Collection page.

Learn more

Transcript

Color is one of the most versatile fields on the planet. And it's not because you have over a billion options when you include color and opacity; it's because you can use this field for almost anything.

When you set a color in a collection item, we can pull that color in our project.

See this text? We can get the text color straight from our collection. Just select a color field, and that's it.

See this button? We can set its background color. Same method here. Pulls right from each collection item.

And the border color on all these different Collection Item buttons? That's just as simple: we can do the same exact thing border color. Oh look, they're unique and amazing.

With the color field, we can set a color on an item and use that color anywhere in a project.

Reference field

The Reference field is a Collection field that you can add to any of your Collections. This powerful field allows you to link to an item in a different Collection. You can then use the referenced item’s content in Collection Lists and Collection Pages. In this video, we'll discuss some common uses of the Reference field, then show you how to make the most of it in your designs. To reference multiple items from a different Collection, use the Multi-reference field.

Learn more

Transcript

A Reference field is really simple and enormously powerful. The simple part is that it lets us reference fields from an item in another collection.

Why is that important? If we have a blog collection, we already know that a collection list or collection page gives us access to the items in that collection. A reference field? This lets us grab content from another collection.

And here's the powerful part: We have two collections in our project (Blog Posts and Authors). When we write a blog post, we don't want to have to do the bio, and the picture, and the name for that matter — each and every time we write a new blog post. These are all fields which we could create and populate in our Authors collection.

Back in our Blog Posts collection? When we add a Reference field? We're simply granting access to the Authors collection. And when we're creating a blog post? The Reference field will let us select the author in that collection.

And how do we build with this? We still build using our Blog Posts collection, but because we're referencing the Authors collection, we can build with those fields as well.

So. Reference fields. With them, we can reference fields from items in another collection.

Multi-reference field

A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites.

Learn more

Transcript

A Multi-Reference field (which is short for multi-item reference field) does just that. Instead of a Reference field, which lets us pick one item from another collection, a Multi-Reference lets us pick multiple items.

So we have our blog posts. And we have our author at the top of each post. Now Helen is known throughout the industry for hogging the limelight. However, in a new initiative, we decided to credit other contributors to our blog posts.

So we have a little spot on the bottom for contributors. This is all static content right now — it's just the design. Nothing's been added yet from our collection.

Let's go into the CMS, into our Blog Posts collection, and, of course, Settings. All we have to do? Is click multi-reference. We can name the field Contributors, we can add some clarifying help text so anyone else using the CMS or the Editor knows what to do, but the important part here is that we point our multi-reference field to our Authors collection. Here's why:

If we save, and then go into our any of our items, like this blog post (by Helen), we can now see our multi-reference field. And all we have to do? Is choose from the list — the other authors who contributed to this post. Once we've done that, let's save.

Now we've only done this on one post so far, we can go back and fill the rest in later. So we're going to build this using the blog post we just configured.

Let's drag in a collection list so we can list the contributors. And from the Collection dropdown, we can see our brand-new field right there.

Notice how the authors already show up in the list. And from here, this is just like a normal collection list. Let's go over to our Elements panel and grab a heading. We can drag it right into any item, and of course, we'll get the text from our collection.

Our authors are showing up just fine. Warp speed. Actually we're just changing the velocity of the footage we captured so you don't have to watch us tweak every detail.

Alright Dale, let's take it down to normal. Dale. Dale! Okay, we're fast-forwarding through the entire— can we? Thank you, Dale.

So we just finished setting up our contributors in this collection list. And if we go back into the CMS? And we add contributors to another item in our collection? Another blog post? We have our multi-reference field from which we can select our contributors. We can add as many as we'd like.

And once we're done, let's save. And then go back to our collection page. And from the item dropdown, let's pick that blog post we just configured. And at the bottom? We have all our contributors showing up in the collection list.

And that's it! Multi-reference fields give us access to multiple items in another collection.

Filter Collection lists

Learn more

Transcript

Conditional visibility

Conditional visibility is the most versatile way to show or hide elements, whether in a Collection list or on a Collection page, based on values in the Collection's fields. For example, you could use conditional visibility to make events that are now in the past no longer appear on your events page. In this video, we'll show you how to use conditional visibility on your Webflow sites, and introduce a couple more examples of conditional visibility in action.

Learn more

Transcript

Despite the nine-syllable mouthful, conditional visibility is really straightforward, and it's a great way to show or hide entire elements (and their children), based upon an item’s content inside a collection.

Now, we all know that wasn't nine syllables. It was 47. We meant conditional visibility.

Here's a collection page. And here's a section element with content inside. And we love this section. But we only want this section to show up on certain pages.

Let's go on over and create a condition. The element (and its children) is only visible when...

And from the dropdown, we can make the selection.

We're only showing this section when the Work Category is Portraits. We don't want this section showing up to advertise portrait photography if the page is about shooting Landscape Architecture, Residential Interiors, Commercial Exteriors, or Dr. Who Cosplay. But we do want it showing up if someone's reading about portraits.

So by doing this — by setting up this condition — we've made it so the section only appears on pages that have the Portraits category set. We can see that the section won't show up if the category isn't set to Portraits. When we hit another page that has its category set to Portraits? The section displays perfectly.

This doesn't just apply to pages. Here in this collection list containing team members, we want to add an email link. That's fine. Let's go over and drag in a text link.

Let's double click to rename this "Email Me" so we can link this to each team member's email.

Of course, we can get our URL from the Email field in our collection. But we actually have a problem: some team members don't have emails listed.

Wouldn't it be great if we could only show this element on team members who have emails set?

We'll keep this text link selected and go over to do just that. Add a condition, stating that the element is visible when...an email...is set. We only want to show this element if we set an email on that team member.

And just like that, all the work was done for us. We didn't have to go manually hunting through every last team member.

Now Joan's the team leader here and she doesn't want people emailing her directly because she's putting out fires all day and email is a distraction. And Dan still uses AOL so we're not even listing that. So what can we do here?

Well, we can drag in a static text link. This time we can double-click to edit, and even change the text to "Contact our team" — and then go over to set the link to send an email. This way people can still click "Contact our team" instead of seeing blank space where the email should be.

The reason we're demoing this is to show that we can create a condition here on this static element — it's just a text link pointing to an email.

Let's go over and add a condition. This time, we'll make sure to show this text link when an email is not set.

And that's it! We've used conditional visibility to control the visibility of these elements (or in the case of that section, an element and its children) based on the conditions we specified.

301 redirects

301 redirects allow you to permanently route traffic from an old to a new URL and avoid the dreaded 404.

Learn more

Transcript

301s can change your life forever — if you’re setting up a new webpage or even a full website — especially if you have a different structure.

Maybe you’ve reorganized, or maybe you’re replacing the full site and it’s not practical to use the same URLs, or maybe you’ve moved domains completely — or locked up “typo” domains to make sure accidental misspellings and keystrokes still end up taking users to the right place.

301s are meant to more permanently route traffic to a new location. Not to be confused with 302s which can indicate a temporary relocation of a resource, or 511s™, which are a more modern, slim fit. Again, 301s are best used when you’re permanently routing incoming traffic to a newURL.

And there are three main considerations to make — three different areas to look at when we’re considering whether to use one or more 301 redirects for a website.

The first is Google, and really all modern search engines.

Let’s say we’re searching for your webpage, but you’ve recently replaced your old URL with a new one.

If you’ve changed this URL and you don’t have a redirect — a 301 set up — people who click that link are going to see a 404. Not a great user experience.

Instead, if we’ve set up a 301 redirect, when someone clicks that old link to the old URL, your server will automatically detect that attempt and route people to the new URL you specified. This is great because it gets everyone to the right spot. And it can indicate to Google that the page’s URL has changed.

Even without redirects, Google will eventually index your new site structure and these URLs will get updated. But 301 redirects are absolutely the best practice, especially if you’re looking to maintain a lot of the ranking power that the older URL had.

The second consideration to make is referral sources all over the internet. Maybe someone included the old path in a blog post or a forum. 301s — when we create them for these older links — will ensure that visitors clicking that link can get to the right path — the new URL — without any trouble.

And the third consideration is usage of that older path in URLs that people might have bookmarked—or URLs that they might type directly into their browser. Maybe business cards or other materials were printed or published using your old URL. A 301 is a really great way to go if you want to make sure that anyone who types in the older URL gets to the right place.

So. The concepts associated with these three considerations all involve the same thing: old URLs getting routed to new ones. 301 redirects are a great move whenever you’re making changes to an existing site’s paths or URL structure—or in any circumstances where you want to more permanently route traffic from one location to another.

Google site verification

Verifying your site with Google is a key early step in your SEO efforts as it allows you to verify ownership of a website, so you can use the Google Search Console tools like indexing. In this video, we'll show you how to quickly verify your site with Google.

Learn more

Transcript

Google Verification lets us verify ownership of a particular property (like a website or an app) with Google.

Once we're verified, we're able to submit our property to Google so it can get listed in their search index. This, of course, is the preferred way to do it, even though Google might stumble across your property from a link on another website.

Let’s do a quick search for the Google Search Console and bring that up.

You'll want to start here by logging in to your Google account, typing in the URL for the website you’re wanting to verify, and you’ll arrive at a page that looks like this.

What we're looking for here is the HTML Tag method. In this instance, it's found under Alternate methods, right under HTML Tag.

Click "Show me an example" and select the content between the quotes, so you can copy it right to your clipboard.

In our Webflow project, we can navigate over to Project Settings, and visit our SEO tab. Once there, we can scroll down to Google Site Verification, and paste our copied content. Save those changes we just made? And head on over to publish, so Google can recognize that we've added the verification.

Finally, back on Google? We can simply verify.

And that's it! We've successfully verified our website in Google.

Google Analytics

Google Analytics gives you valuable information about user behavior on and interaction with your website. It includes powerful metrics like how many users and pageviews a site is getting, where your traffic is coming from, how long people stay on the site, and how many of them are leaving the page without clicking other links (bounce rate).

This helps many businesses figure out where to invest marketing dollars and measure the effectiveness of marketing campaigns.

In this video, we'll show you how to set up Google Analytics for your Webflow sites so you can take advantage of these powerful tools.

Learn more

Transcript

Google Analytics gives us valuable information about user behavior and interaction. For websites, these include powerful metrics like how many users and pageviews we're getting, how long people are spending on the site...how many of them are leaving the page without clicking other links.

And it's interesting and sometimes really helpful to see where a lot of our traffic is coming from. What we're doing here is drilling down into specifics regarding location — where are these users coming from?

This example is for the Google Merchandise Store, so naturally we're getting tons of activity in the Bay Area.

There's so much to explore in Google Analytics, and these metrics can often give us additional clarity and insights into where our users are coming from. For a lot of businesses, this helps us to figure out where to put the right marketing dollars and it can even help us measure the effectiveness of a particular marketing campaign.

And you can integrate Google Analytics right into your Webflow project.

You can set it up right from your Project Settings under Integrations. To visit the Google Analytics site, all you have to do is press the link to the right. You'll need to be logged in to the Google account you want associated with Analytics.

If you're not already signed up with Analytics, you can do all of that...right here. And this page will prompt you to fill out all the relevant information including the URL of the website you're wanting to track with Analytics.

What we're after is our Tracking ID, so naturally, we'll press Get Tracking ID.

And this is it: just grab the full tracking ID including the letters U.A. and the hyphen so we can copy the ID to our clipboard, then go back over to our Integrations tab, and paste it in.

You can save changes, and then go up to Publish these changes, and then? You're ready to track.

And keep in mind: Analytics data takes some time to gather. And insights might not be available until a day or so after they're collected. But, once you're up and running, you can pick a date range and look at all sorts of valuable information.

In the meantime, you can check out the Google Analytics demo, and see how Google Merch is doing.

But that's how to get up and running inside Google Analytics with your Webflow project.

Paid vs. organic search

For the vast majority of search engines, search engine results pages feature two different forms of results:

  1. Paid search results, or ads
  2. Organic search results, which are ranked by relevance and, to an extent, reputability

In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts.

Learn more

Transcript

When it comes to search results today, we generally look at two categories:

Paid search results and organic search results.

Paid search results are essentially ads. With these, your placement is usually based on the amount you're willing to bid for the ad's placement, and other factors like the quality and impact of the ad.

You can do this through Google, you can do this through Bing, through Yahoo. There are a number of search providers with whom you can set up ads.

If you're a law firm in Albuquerque focusing on intellectual property, you can set up a targeted campaign to drive traffic to your website.

If you're a global distributor of kale and you're looking to corner that market, you can set up campaign for that.

If you're international arms broker, you're probably violating Google's Terms of Service and you'll get removed from search results entirely.

For legitimate websites, this strategy can work really well, and you can set up a highly-targeted campaign. Again, paid search results usually show up first. An ad indication off to the side.

That's paid search.

Organic search results are results that come up organically. These are unpaid results. When someone Googles you, for instance, Google's looking at that search query and determining which pages on the internet are reputable and...relevant to your search.

It then displays those results. It ranks them based on that relevance. The top result gets clicked most often. The result at the bottom or the one on page 47? Not so much.

Paid search usually shows up first, with an ad indicator; organic search is unpaid. Based on reputability, and relevance. That's the difference between paid search and organic search.

Requirements

  • Free (or premium) 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