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.

Download assets

Clone this project

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.

Image

Download assets

Clone this project

Learn more

Image file types

Download assets

Clone this project

Learn more

Image resolution

Download assets

Clone this project

Learn more

Assets panel

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

Add background video

Forms

Download assets

Clone this project

Learn more

Style Forms

Download assets

Clone this project

Learn more

Navbar

Download assets

Clone this project

Learn more

Slider

Download assets

Clone this project

Learn more

Tabs

Download assets

Clone this project

Learn more

Lightbox

Download assets

Clone this project

Learn more

Map

Download assets

Clone this project

Learn more

Dropdown

Download assets

Clone this project

Learn more

Social media

Download assets

Clone this project

Learn more

Custom code

Download assets

Clone this project

Learn more

Symbols

Style panel overview

Download assets

Clone this project

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.

Learn more

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.

Download assets

Clone this project

Learn more

Classes

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.

Download assets

Clone this project

Chances are, if you see a modern layout on the web, it’s styled using classes. Because back in the days of the early internet, developers had to manually style things in HTML. Right when you’d get 53 paragraphs styled just right? You’d want to make a change to the style. Then change it 52 more times.

But the W3 Consortium said “no more.” And born was CSS. (Cascading style sheets. The greatest invention since the rotary telephone.) And it works like this: we USE a class to set styling ONCE, and we APPLY that class to everything we want. The result? Of course we have consistency in STYLING, but even more important: continuity. That is...if we make a CHANGE on the class...every OTHER element with that class...gets the update, too.

And over the past three decades, CSS has grown to include SO much more — it’s now become a superpower on par with telekinesis or x-ray vision, but without the moral and ethical complications associated with the latter.

We’ll start HERE with creating and applying classes, we’ll talk about editing classes (that’s CHANGING styles), we’ll do removing and duplicating classes, then we’ll end by covering two ACTUAL superpowers on the web: combo classes...and global classes.

So. To create a class? Select a thing...click in to the selector...and name your class. When you hit Return? You’ve created a class.

Why is this important? It’s not. Because we haven’t actually DONE anything with it yet. And here’s why that’s important to demonstrate: if we change something super basic (let’s change the background color to make it a bit darker). The moment we’ve done that on the class we just created? The label turns blue. That means on THIS class, this background color property has been set.

So check this out. Let’s just grab another button (by default, elements don’t COME with classes applied). And instead of clicking in to NAME a class? Let’s just start typing out the one we made before. When we select it? Darker background color.

That’s how classes work: you can use them on different elements, and when you add or change style properties, every element that USES that class is affected.

That’s creating and applying classes. What about editing classes? Well let’s go further (let’s apply that same class to the other buttons here) — and even if we copy and paste our button (just make a copy)? The class is brought along WITH that element (it still has that class applied). And to EDIT this class, do we have to go back to the ORIGINAL button? No. Because like we did before, we can just select ANY element that has our Main button class applied, and we edit the styling. (Again, the KEY with classes is this: you’re NOT editing styles on the ELEMENT; you’re editing the class that’s APPLIED to all these elements.)

And if we want to rename (we’re talking about RENAMING a class)? We can click into the thing, rename, hit Return.

That’s editing classes. Next let’s remove a class. Here’s a paragraph. Let’s select it, and of course, apply the Main button class. Terrible. So. Click the dropdown thing next to the name of the class? Remove. Class removed.

Let’s do it again. Select the Section, go over, apply the Main button class. Again. Terrible. But this time, let’s click to the RIGHT of the class label. Blinking cursor (we’ll get into THAT in a second). Delete (or Backspace depending on your keyboard). Class removed.

Stanford University. Log in as an administrator, Fall semester, delete and confirm?

That’s removing classes. What about duplicating? This is a two-parter, because MOST of the time, duplicating can be better served by OTHER stuff. But let’s suppose we have a div block here (a box that holds some other stuff inside...this is sort of a CARD design). If we open our Navigator, we see there’s an image, a heading, and a paragraph. OR, if we’re feeling adventurous, we can look on the canvas... and see the SAME... exact... thing.

The key here is the div block is STYLED (our card is styled) USING a class. The class is called Basic card. And it’s been applied to all three of these things. This third one? (The card on the right?) If we change ANY styling on it, it affects the other two as well (we KNOW

that’s how classes work.)

But what if we want the third one to be different? Again, this is going to be ONE way to do it. With our THIRD card selected, let’s go into the down arrow dropdown thing, and duplicate. And we’ll name this “Other card design.” (Of course, you can name yours whatever makes sense.) But when we hit Return, we’ve now created this NEW class which BROUGHT OVER all the stuff from the original one. From afar it looks the same, and that’s of course because it’s stylistically identical. But we can change ANY properties (and reuse this NEW class anywhere else).

But here’s the sad part: BECAUSE it’s fully duplicated, it is in no way whatsoever...associated with the original class. (Sometimes that’s what we WANT; that’s why we’re covering class duplication.)

But other times we want something DIFFERENT. Enter: 301 redirects. Except, no, that’s a separate lesson. Enter: combo classes. Just like duplicating a class, but actually not at all.

That’s because a combo class still REFERENCES the original class (the base class). All these buttons on this page use the same class (“Main button”). But here’s an example of when that doesn’t WORK so well: THIS section...is darker, so there’s not too much contrast between the button and the background. So what do we do? We LEAVE the class as-is. We keep that BASE class (the class we already added) ...we KEEP it.

And what we can DO...is click to the RIGHT of the class label and type to create a COMBO class (“Lighter”). Press return? And here’s the magic: this COMBO class is built UPON the base class. And we can prove it by clicking the AMBER color label (amber on a label means it’s grabbing styles from somewhere else) — and it shows that the color is being BROUGHT in from the Main button class. So what if we change it? Well, because it’s a COMBO class (because it’s more SPECIFIC than our original, base class), that change didn’t affect our Main button class (those stay the same). We can change the font color, too. (We’re making changes ONLY on buttons that have Main button AND Lighter applied.)

But here’s where this is different from duplicating: if we go back to our base class and change the padding? (Really if we style almost ANYTHING on the base class?) The combo class is affected, too. That’s because all the combo class does is OVERRIDE (it adds more specific STYLES, but it BUILDS on our base class). So when we’re styling that new combo class, it’s helpful to look at our indicators. (Where are styles coming from?) And if we want to override a style? We make that change.

Now. Combo classes work JUST like classes in that you can take a brand new element (here’s a blank button we’re just dragging in), and we can add our combo class by adding the base class? Hit return, then clicking in one more time to add our combo class. Hit return again? We’ve now applied the combo class.

Now. This is a LOT. And if you’re already super familiar with HTML and CSS, great — this’ll speed things up. But if this is all NEW to you (if you’re new to classes, and combo classes, and references to hacking a world-class university?) That’s okay. We’re going to recap all of this and we have highly-specific, practical examples to really REENFORCE these concepts throughout Webflow University — including TAGS, which are like SUPER classes...but completely different).

One note we’ll make here is that the DIFFERENCE between DUPLICATING a class and just using a COMBO class is that DUPLICATING is something that ENDS the relationship with the original class. (When a class is duplicated, it BRINGS all the styles from the ORIGINAL class, but that’s IT.) The relationship stops there. These are now two TOTALLY different classes that don’t talk to each other at all.

With a COMBO class, you’re still able to BRING IN styles from that base class. (It’s a commensalistic relationship where styles are still passed from the BASE class ONE WAY, and those styles can AFFECT the combo class, but all you’re really doing is building ON TOP of the original. And so while you can OVERRIDE styles on the COMBO class changes only go one way. (If you go back and change something on the base class?) That’s going to update in the Combo class as well — even though we can OVERRIDE that style in the combo class.

Now. We’ll summarize (we’ll recap all of this) as we move forward, but before we do, let’s complete our goals and talk about the concept of global classes.

A global class is great when you’re trying to apply SPECIFIC styles to a wide range of elements. First we’ll DEMONSTRATE this, then we’ll clarify EXACTLY what’s going on behind the scenes.

And we’ll start...with Rob Lowe. This is not Rob Lowe. It’s a div block. With nothing applied to it — no classes (it hasn’t been styled in any way). But we’re going to create a normal class on it — we’ll type Rob Lowe and hit Return. And here’s where it gets intense: let’s set the background (we’ll add a background IMAGE to the Rob Lowe class here), and we’ll choose from our many images of Rob Lowe.

And just like that, we’ve applied a Rob Lowe background image to the Rob Lowe class. (So far, it’s just like styling any OTHER class.) But here’s how it’s used GLOBALLY. Suppose we have all these different kinds of elements. A div block that’s used as a card, our navigation (a navbar), these buttons here — in fact, if we click into ANY of these elements, they already HAVE classes. Even if we click this HEADING here. Let’s name this “Example heading” — and when we do, let’s make a styling change HERE, too — let’s change the font size. And...of course...we can also mess with the line height.

So EACH of these has a Base class. And the point is this: what we’re ABOUT to do? Using our Rob Lowe class globally (a global class) will apply those SPECIFIC properties (specific styles) to something that ALREADY has a class.

And it works like this: we’ll click in to the right and start typing Rob Lowe. When we add it (notice how it’s listed as a Global class)? When we add it, that BACKGROUND image and all its styling is NOW applied to the card. But here’s why this is a big deal: suppose we do the same thing here on the navbar — with the navbar selected, we can ADD our Rob Lowe class globally. Same thing with these buttons — but notice here how we have to add it to EACH of them — adding a global class is done element-by-element; it doesn’t go over and mess with OTHER things that happen to have our Button class applied; so we have to apply Global classes to EACH instance of an element we want showing Rob Lowe.

And that heading? We can do the same thing here. (We can add Rob Lowe to the heading.)

And if we go back to the ORIGINAL div block? (With just our Rob Lowe class applied?) We can go in and tweak that background image. Maybe we want it NOT only to cover; but we want Rob Lowe’s eyes positioned perfectly. (Notice how it’s updating on ALL different kinds of elements.)

And that’s the big advantage here: if we added Rob Lowe as a background to ALL these different classes (if we went in and set the background image, and Cover, and position) — if we did that on ALL these classes, we’d develop significant wrist injuries and spend even MORE time if we wanted to make a change.

So. Let’s take a look at how this works technically. The Global class (Rob Lowe) has styling properties applied to it. And by adding that on TOP of (or more literally NEXT to any other class), we’re able to apply the styling properties that come from the GLOBAL class...to other classes.

And that really sets us up with an existential dilemma: how do we balance the fact that we can use COMBO classes or GLOBAL classes at any time? And also, what’s the meaning of life?

We’ll cover all of it, and the best way to do that is by breaking it down into three:

Base classes, combo classes, and global classes. We already KNOW base classes (it’s just the class that we create and use for basically all styling — a plain base class like Button). A combo class is built on TOP of a base class — in other words, it lets us COMBINE the base class with some more specific styling — like a dark version of the button, or a green one, or one that’s larger, pink, and upside down.

But a Global class? This is a separate thing entirely. A Global class is created on its OWN. And you can add whatever style properties you want. (Like a background image. Of Rob Lowe.) And you can append a Global class (you can ADD it) to really anything you want — a BASE class like a styled Button, a COMBO class like the dark button — it doesn’t matter.

The only thing that matters with Global classes is this: they’ll BRING their styling to ANY element with ANY class or combo class applied...AS LONG AS a more SPECIFIC property on those classes is NOT already applied.

Put more clearly? If we have a class named Zoe Saldana and a background is ALREADY set on that class, adding the global class of Rob Lowe? Won’t do a single thing. And that’s because Global classes will ONLY apply styles that AREN’T already set (we can click the label and see that the background image is being set on the Zoe Saldana class).

And a really practical way to think about it is this: say we’re starting to build a massive marketing site. And we want an ASSORTMENT of elements to ALL have a specific and CONSISTENT drop shadow. (This card, this button, this image...)

Let’s create a new class (a lot of times, to create something we’re using as a Global class, it makes sense to just use a temporary element like a div block) — and we’ll add a name: Perfect shadow. So we’ve CREATED this class (this’ll be our Global class) and we can shadow it very briefly right now — in fact, we’re not going to put much care into this ON PURPOSE to prove a point (because we’ll come back to it).

And all we have to do? Is add this as a Global class to all that other stuff. We can add it to the CARD as a Global class, we can add it to the BUTTON as a global class — that’ll add the shadow there, too...we can EVEN add the PERFECT shadow...to this image EVEN THOUGH it already has a COMBO class applied. (We can EVEN add Global classes on top of Combo classes.) And now they all have the same shadow.

And if we want to change the styling on our Global class? We’ll just select that sample div block from before (again, we’re just using this as a temporary THING so we can STYLE the Perfect shadow class)...and when we do, we’re able to perfect the shadow (all properties we’re changing here are affecting the box shadow on ALL of these different kinds of elements).

Now. Does that mean we should use Global classes all the time? Does it mean everything’s a complicated mess of Base classes, and Combo classes, and Global classes, and MasterClasses? Probably not so much. They’re a TOOL we can use if we plan on making Global changes that affect a bunch of elements in similar ways. In MOST cases, using Base classes on commonly styled elements? This is a pretty good deal. Using COMBO classes on some of those: also a pretty good deal. And in the event that we want to apply a specific type of styling (some properties we want applied to classes of ALL kinds), we can use Global classes.

But that’s the basic approach to styling for the modern web: we can CREATE classes and apply them wherever we want to keep styling unified and organized, we can EDIT styles on those classes which will affect ALL elements with that class applied, we can remove classes, we can duplicate classes if we want a starting point for a NEW kind of styling, we can use COMBO classes to make more specific versions or VARIANTS like dark modes with lighter text — and we can always create Global classes. When it’s called for, we can apply a GLOBAL class to pass specific styling to classes of DIFFERENT types.

Now, if it seems like a lot...that’s because it is. Classes and TAGS (which we cover in a SEPARATE lesson)...these are POWERFUL tools, and with them, you can style pretty much anything out there.

Remember: most of the internet is built USING classes. And because we don’t have to style everything one-by-one, we can USE classes to build almost any design we can dream up.

Learn more

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:

From the body tag
‍From Webflow's section element
‍From Webflow's link block

Download assets

Clone this project

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.

Learn more

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.

Download assets

Clone this project

Learn more

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:

None
‍Hover
‍Pressed
‍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.

Download assets

Clone this project

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.

Learn more

Transitions

Download assets

Clone this project

Learn more

Color picker

Download assets

Clone this project

Learn more

Color values

Layout settings

Download assets

Clone this project

Learn more

Display settings

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

Size

Download assets

Clone this project

Learn more

Position

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

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.

‍

Download assets

Clone this project

Learn more

Center elements with flexbox

Download assets

Clone this project

Learn more

Equal height layouts with flexbox

Download assets

Clone this project

Learn more

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.

Enable relative position

Download assets

Clone this project

Learn more

Absolute Positioning

Download assets

Clone this project

Learn more

Apply a z-index value

In this lesson:

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

Download assets

Clone this project

Learn more

Hide overflowing content

Set a default line height

Download assets

Clone this project

Learn more

Typography

Format your text with search engines and accessibility in mind.

‍

Download assets

Clone this project

Learn more

Add Google Fonts

Download assets

Clone this project

Learn more

Upload custom fonts

Download assets

Clone this project

Learn more

Text shadow

Backgrounds

Download assets

Clone this project

Learn more

Set background images

Download assets

Clone this project

Learn more

Create gradient backgrounds

Download assets

Clone this project

Learn more

Borders

Download assets

Clone this project

Learn more

Box shadow

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.

Download assets

Clone this project

Learn more

3D Perspective

Download assets

Clone this project

Learn more

Transforms

Opacity

Download assets

Clone this project

Learn more

Filters

Download assets

Clone this project

Learn more

Override the default cursor for elements

Intro to responsive design

Download assets

Clone this project

Learn more

Breakpoints

Download assets

Clone this project

Learn more

Style across breakpoints

Intro to Interactions

Download assets

Clone this project

Learn more

Triggers and animations

Download assets

Clone this project

Learn more

Interpolation, easing, and smoothing

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.

Download assets

Clone this project

Learn more

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:

‍Structuring content
‍Referencing content
‍Editing content

Download assets

Clone this project

Learn more

Collection items overview

Download assets

Clone this project

Learn more

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:

Upload a CSV to a Collection
Configure fields and preview Collection items
‍Import data

Download assets

Clone this project

Learn more

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:

Create a Collection Page
Add and connect content
Preview Collection Pages
Link to a Collection Page

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

Download assets

Clone this project

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.

Learn more

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:

Editing Collection settings
Editing individual Collection items
Bulk-editing Collection items

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

YouTube video

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

Link field

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

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

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.”

Download assets

Clone this project

Learn more

Option field overview

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

‍

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

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

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project

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.

Download assets

Clone this project

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.

Learn more

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.

Download assets

Clone this project

Learn more

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.

Download assets

Clone this project