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

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Image

Download assets

Clone this project

Read the full article

Image file types

Download assets

Clone this project

Read the full article

Image resolution

Download assets

Clone this project

Read the full article

Assets panel

Download assets

Clone this project

Read the full article

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

Read the full article

Add background video

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Forms

Download assets

Clone this project

Read the full article

Style Forms

Download assets

Clone this project

Read the full article

Navbar

Download assets

Clone this project

Read the full article

Slider

Download assets

Clone this project

Read the full article

Tabs

Download assets

Clone this project

Read the full article

Lightbox

Download assets

Clone this project

Read the full article

Map

Download assets

Clone this project

Read the full article

Dropdown

Download assets

Clone this project

Read the full article

Social media

Download assets

Clone this project

Read the full article

Custom code

Download assets

Clone this project

Read the full article

Symbols

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Style panel overview

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.

Download assets

Clone this project

Read the full article

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

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

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

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.

Download assets

Clone this project

Read the full article

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

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

Transitions

Download assets

Clone this project

Read the full article

Color picker

Download assets

Clone this project

Read the full article

Color values

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Layout settings

Download assets

Clone this project

Read the full article

Display settings

Download assets

Clone this project

Read the full article

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

Read the full article

Size

Download assets

Clone this project

Read the full article

Position

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

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

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

Read the full article

Center elements with flexbox

Download assets

Clone this project

Read the full article

Equal height layouts with flexbox

Download assets

Clone this project

Read the full article

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.

CSS grid is used by frontend developers and designers to build ALL kinds of modern web layouts and interfaces — in fact, it’s the layout structure for apps like Slack and the Webflow Style panel itself. But it can be used to create anything form basic structures to entire websites.

We’ll cover grid-based layouts in 6 parts: we’ll show how to create and configure grids, we’ll talk about the magical div block, we’ll use grid AUTO position to create an image grid layout, we’ll use MANUAL position and OVERLAPPING to create a four-quadrant hero section, we’ll go into reusable layouts using grid template areas, and then we’ll cover making grid layouts responsive to work on DIFFERENT devices.

Now. Before we begin — let’s clear up something. Grids are GUIDES. It’s no different than arranging apps and widgets on iOS. (You can push things around, but the things INSIDE the grid will be GUIDED by columns...and rows.)

And this is the DEFAULT behavior for CSS Grid (things are AUTOMATICALLY positioned...and they wrap to the next row when they run out of columns). But that’s just the BEGINNING. Because you can do SO much more.

So with that in mind, let’s start with the basics. ANYTHING can be a grid. Almost anything. Here’s a section. Click grid? Now you have a grid. Here’s a div block. Click grid? Now you have a grid. On the Add panel? There’s a grid you can just drag right in. Collection list filled with dynamic content from the CMS? Set its display setting to Grid? Now you have a grid. Working on a late-night project and accidentally spill coffee, causing your other hand to lean in just the perfect way on your macOS-compatible keyboard to press both the Command and E keys at the same time? Start typing Grid, press Enter. Now you have a grid.

Now. That’s on Mac. It’s different on Windows. Grimur?

Grimur: I’m working on a late-night project and accidentally spilled coffee, causing my other hand to lean in just the perfect way on my Windows-compatible keyboard to press both the CONTROL and E keys at the same time.

McGuire: Start typing Grid, press Enter. Now he has a grid.

And how do we use a grid? Well, we just put stuff inside. By default, things take up the available cells, and wrap to the next line automatically. In fact, new rows will be automatically created.

And at any time, to edit a grid...press edit grid. Now you’re editing the grid. When you’re editing, you can add columns or rows to your grid. And notice how the contents automatically wrap to fill up the space inside. Once we’re done editing the grid, let’s close out.

And here’s the first thing that might seem odd: if we want to drag an element to the bottom right cell? It just...doesn’t work. But that’s expected. That’s because elements added to a grid, by default, are AUTOMATICALLY positioned. If we want to manually position this? Just set it to manual. And we can now drag it wherever.

We’ll cover this later on when we talk about Manual position in more detail, but there’s one, really important point to make here.

This is a website we built in CSS grid. Except it’s not. It’s Microsoft Excel. And in spreadsheets or tables, deleting a row or column usually DESTROYS the content inside.

Grids on the web are different. BECAUSE they’re guides, deleting a column or row might push things around, but it’s not deleting actual content.

And that’s the main idea: there is NO wrong move you can make when creating a grid. Grids are non-destructive in that they’re just GUIDES for the content we’ll put inside.

Let’s edit our grid further. Lots of options here. And we can just click and drag so we can adjust that space (you can adjust the GAPS between the rows and columns).

But it gets better. Want to adjust the columns themselves? You can do this, too; you can adjust sizing on a column by clicking and dragging — you can do this right on the canvas when you’re editing a grid.

By the way, FRs (the FR unit on these columns)? These are fractional units. Because before grid came out, we’d manually calculate things like percentages, pixel values (and YOU can still use these)...but FRs replace everyone having to manage their own Cartesian coordinate systems in favor of something far more straightforward. And it goes like this:

Three columns? Each set to 1 FR? That means each will take up 1/3rd of the width. Four columns? 1 FR each? Now each takes up 1/4th. And the math is done FOR us, so if we want this column to be TWICE the width of the others, we just set it to 2 FR. Notice how everything else scales automatically. And one more thing to note here: we mentioned the GAPS between each cell. You can change these gaps and FRs will STILL compensate for that.

Are FRs magic? No; they’re science. And also magic.

When you’re DONE editing a grid, remember you can ALWAYS come back and change things, but for now, we can just PRESS Escape, or, press the button that says “done.”

So. Grids. We can make a grid, set some rows and columns, and start putting things inside. They’re automatically going to position themselves, but we can deviate from that by setting one or more elements to MANUAL positioning. (We can then move it wherever we want inside a grid.)

Let’s move to the magical Div block. Because if you haven’t noticed yet, there’s something odd going on. There aren’t many practical layouts that look like THIS. And we get the question a lot, “yeah, grid, but how do we USE it?” Syntax aside, there’s an important point there. Grid-based layouts often require NESTING things (headings, paragraphs, buttons, images — whatever) — grid layouts often require putting MULTIPLE things inside single cells.

So. Do we just set things to manual position and drag them into the same cell? Well...no. Now they’re all stacked on top of one another in a mess.

Enter: the magical div block. It’s a div block. But we’re calling it magical. And the idea is this: we can just drag in a div block that TAKES UP a cell...we can place it wherever...and now we can put stuff INSIDE the div block.

So if this is our grid, and we want these things inside, we put a DIV block in the cell. And we position the things we want...inside the div block. The most PRECISE way to make sure we’re placing our elements is to use the Navigator (but we’ll cover a shortcut for doing this on the canvas in just a bit).

But that’s the SECOND big idea (we covered how grids are guides for our content)...but the SECOND takeaway here is that grid CELLS aren’t actual containers (they’re NOT div blocks, and by default, they only hold one thing at a time).

So div blocks give us the power to put MULTIPLE elements inside a grid cell.

Those are our two takeaways: grids GUIDE our content, and div blocks let us NEST multiple things inside any CELL in our grid.

But let’s make this REAL and put all of it into REAL layouts. And to do that, let’s do auto position FIRST...by building this image grid.

And this one’s straightforward. For us, we have a blank section and a blank container...and we’re going to use a Grid (just dragging in a GRID from the Add panel and we’re placing it in the Container — this way we keep the grid and our images contained towards the center of our design).

But for now, let’s add our images. As we know, to add stuff to our grid? We just click and drag it in. (WE’RE using images, but this could be headings or links or div blocks or videos...).

Let’s edit our grid before we continue — let’s make it a 4x4 (remember: we can ALWAYS change this). When we’re done? Let’s stop editing.

And let’s CONTINUE dragging images inside. But notice how, like we covered earlier, no matter WHERE we let go, content is automatically placed. The children of the grid (the IMAGES inside) are just wrapping around and filling up the available cells inside our GRID. (It’s doing this automatically.)

In fact, if we go in and edit again? We can CHANGE, for instance, the number of columns. And again, in Excel or Numbers or Google Sheets or with ice cube trays — removing a column is HIGHLY destructive and destroys the stuff inside. But HERE...our images are fine. They’re now just taking up fewer columns (they WRAP automatically). Once we’re done, let’s head back out.

And something to note here about SIZE... is that these rows (the height of EACH row in our grid) — this is automatically sized. And since the Grid (and the Container and the Section) — since none of these have a height set to them, ONE option is to just set a height on our Grid. Let’s choose something like 800 pixels, but we can ALWAYS change this later.

But right now it’s a LITTLE inconsistent — these images have different aspect ratios; they’re all aligned to the top-left of each cell... let’s start to CONTROL that. With our GRID selected, let’s look at our options here. We can ALIGN... or justify any of the CHILDREN elements inside the Grid.

Now. With IMAGES specifically, sometimes designers want images like these to fit more consistently (to have the SAME row heights, and same aspect ratios).

And a great way to do that is fit (object fit). It’s 100% magic. And it WORKS (most of the time).

Now. Before filming, we pre-applied the same class to each of these images. You can TELL... because it literally says “Class we pre-applied” on each of the images. If we hadn’t done that, we could always add a class later. But we DID.

So. To fit the images EVENLY? We only have to do TWO things: (1) we set the dimensions (we set 100% width...and 100% height). And (2) we USE object-fit. (We’re doing all of this on the CLASS that’s been applied to the images). We’ll set our FIT... to Cover.

And just like that, all the objects FIT inside their cells. And notice how the row heights are perfectly even.

Now. HOW is this grid NOW being sized? Well let’s go back a moment, because we set the height to 800 pixels a minute ago. What happens if we REMOVE that height on the GRID? Does it go to zero?

Almost. In fact, if you look closely, it still has the GAP (the space between the rows). But because we DEFINED the height of EACH image as 100%, they’re only going to be as tall as the ROWS themselves. Which don’t have a height. Which is why this whole thing has collapsed. So. If we put back a number? (If we give the grid a height?) It sizes accordingly.

Of course, the blue property labels TURNED blue because we’ve changed something on this class. And, as we know, the AMBER property labels show that a value on this class is coming from somewhere ELSE. But what about PINK labels?

Let’s just pick ONE of these images and SPAN it (we’re grabbing the corner...clicking and dragging...to span). So instead of ONE cell in our grid, it spans MULTIPLE cells. And we can see it in the Style panel: we see HOW many columns and how many rows it spans. And THAT information is stored in the ELEMENT. That’s what pink labels mean — this does NOT apply to the whole class we pre-applied earlier called “class we pre-applied” — it JUST affects the SELECTED element.

That’s automatic positioning using an image grid. What about manual positioning and OVERLAP? To go over THAT, let’s build this hero section. But to GET there, let’s first make our hero section a side-by-side (we’ll talk about WHY in a moment).

For this, we’re just going to drag in a Section element (dragging it right into the page body). And we’ll set a height (let’s set the minimum height to 70vh — this way it’s 70% the height of the viewport).

And all we have to do to make it side-by-side? Just set the Section...to GRID. (Two columns...now we can build our side-by-side.)

So let’s start by putting an image on the left. Let’s go to the Assets panel and drag in the image we want on the left side (dropping it right into our Grid section). And by default (as we know), it goes in the FIRST available cell (top-left). And we want our image to take up the full space available.

Well, fortunately, we just brushed up on object FIT. And like we did before, we do TWO things to make this work perfectly. We can (1) add our dimensions (set both width and height of our image to 100%)...and (2) we can set our FIT to Cover. (And now our IMAGE...is COVERING the first cell.)

But that’s not what we said we’d build.

With our image selected, let’s span it. (We want to click and drag to SPAN this element across both cells in our left column.) That’s it. Again, spanning is THAT simple. Want to span the TOP two cells? Click and drag...and it’s spanned. Want to put it back? Span it back.

Span. The word sounds weirder the more you say it.

That’s our left side of the side-by-side. What about the right one? Well here’s where we go back to our magical Div block. We’ll drag a div block right into the grid, and it can be placed in the next available cell. To span it? We’ll just span it. And that’s the side-by-side.

If we want to put a heading inside? Let’s demonstrate the WRONG way to do this. Drag the heading...over to the right here? Let go? This...is NOT what we wanted. Remember: dragging something into a Grid is DIFFERENT than dragging something into a Div block INSIDE a grid.

So to make sure we get it right, let’s undo...and try that again, but this time let’s hold down Command on macOS or Control on Windows...and just drag the heading into the Div block. We can verify this in the Navigator. (The heading is in the div block...which is in the grid.)

Let’s do the same with a paragraph — this time we can drag the paragraph RIGHT into the Navigator ITSELF (right under the heading).

And finally, let’s add some buttons. This time (and because we’ve developed a habit of showing DIFFERENT ways to add things)...with our Paragraph still selected, we can add something RIGHT after it. We’ll use Quick Find.

Which we can do by pressing Command + E (or Control + E on Windows) and starting to type button. And it's not just elements (it's even other layouts we've designed and saved). Once we select it? It's placed right after the paragraph.

NOW. How do we vertically center this stuff? A couple ways. We can select the grid ITSELF. And if we want the children to align to the CENTER...we just...align to the center.

Or, if we want to undo that, we could use flexbox (we could apply flexbox to the Div block itself, and just make sure it’s set to Vertical, and we can mess with our alignment or justification controls to make it work how we want it to work).

And if we select our Grid again, and we go to EDIT? We can adjust or even REMOVE the gap (just set the gap there to ZERO) — so now it’s truly a 50/50 split with the image. And for our content on the right? We can USE our Div block (by the way, let’s name this something like “Hero content” to keep things organized).

But wait a moment. This section is called MANUAL position. And so far...everything uses AUTO positioning. (We’ve COVERED spans, but we haven’t used MANUAL position on this layout). So. What is our GOAL? Our goal... is to have our hero content on the bottom-right cell. How do we do that?

Well...we just set our image on the left to manual position...and we set our div block on the RIGHT to manual position. And now? We can select and SPAN our image to take up all FOUR cells. And if we want our magical flexbox Div block to position on the bottom right? We span it DOWN so it takes up the bottom right cell. So now we have a BASIC overlap.

Is it stunning? Not yet. A couple things here: (1) we need to make the background more not terrible. So in our Div block (the Hero content block), we can add a background color. But (2), we should go in and figure out what’s going on with the row height. Because you might notice that the HEIGHT of the second row is no longer HALF — because we have the height of the CONTENT added to the bottom row, too. Could we set each of the rows to 1 FR? Can we use fraction units on both? Well, yes. In fact, that’s going to still respect the content inside, but give us more even rows. But we could also make the BOTTOM row Auto. That’ll mean the SIZE of the bottom row is determined ONLY by the content inside. And when we do that, we can now add breathing room by adding PADDING (just add some padding to the Hero content block).

But that’s MANUAL positioning and overlapping. What about reusable layouts? This part goes pretty quick. Because, here’s a section. Let’s give it a height (let’s say 750 pixels). And let’s turn it into a grid. But THIS time, let’s set up our layout INSIDE a Grid. And no matter how we CONFIGURE our grid... we can define Grid areas (we just click the little plus to start defining a grid area). And this lets us define REGIONS of our grid that can hold content (in other words, we’re defining the individual PARTS of a layout). But the REASON this is important is because we can REUSE these entire layouts in other parts of our project.

But here’s the big thing. This layout? It’s part of the CLASS. In fact, we can rename this class “Example layout” (there are more clever options)...and we can apply it to ANOTHER element. So let’s add ANOTHER section underneath this one (of course, you could add this to ANY page in the project). And what do we notice? Well, nothing yet. We have to apply the Example layout class.

But NOW what do we notice? Its layout isn’t just following the same RULES, but also...it’s blank. So what if we add OTHER stuff to this layout? (These are ALL just div blocks with some stuff inside — again, we’re using plain old div blocks we sometimes call “magical” to serve as little CONTAINERS — containers that we put inside grid cells.) And what happens if we edit our grid? Is it unique? No. BECAUSE this is a reusable layout, we can define our areas and even REDEFINE our areas after the fact. And the layout throughout the project changes.

Put more practically? We can use AREAS to define entire layouts. That means a change on ANY ONE AREA will affect ALL Grids that are using that class. But THAT’S grid template areas.

Let’s finish up talking about responsive design. Grids are responsive by DEFAULT. BECAUSE the width of each column is usually sized with FRs, it’ll generally respect those proportions and the content inside. And as the browser gets narrower, everything will scale accordingly.

But if you want to change something in another view? Want to design for different devices? We can make that change. Even if we change the number of columns, and grid children set to auto? (If the children of a grid are automatically positioned?) They’ll wrap responsively just like you’d expect. Come back to desktop? Everything’s as it was.

That’s because changes cascade down FROM the base breakpoint, meaning when you change stuff on desktop, that affects tablet and mobile views. And things you add or change on tablet affect mobile. (There’s a pattern here.) Mobile landscape changes affect mobile portrait. And as we go down the different views, changes only affect smaller devices.

You will notice, though, that if you have something MANUAL? (If something’s set to manual position?) It can get stuck that way if you don’t TELL it what you want it to do on, for example, a smaller breakpoint. Even if you remove a column, if something was placed there manually, you have to either MANUALLY place it in a new column, or set its position to auto.

Now. One thing to note about manual position: if you’re repositioning an element VISUALLY on the canvas (if you’re moving it around in the Grid)? It has NO effect on the actual document order. Why is that important? Well, if you’re tabbing through or using a screen reader like VoiceOver, by default, it’s going to follow the order you see in the NAVIGATOR (the document order). With THIS element selected, notice how its position in the Navigator DOESN’T change, even though we’re moving it around using Manual position (by the way, this can apply to Grid Areas, too). And this is CRITICAL to keep in mind as you’re ORGANIZING content in a grid: make sure the ORDER (the way you want someone to INTERPRET your content) — make sure that’s set in the Navigator, THEN make visual adjustments as needed. Not only is this LOGICAL, and correct, and efficient, but it’s a step in the right direction for developing more accessible websites.

But that’s an overview of responsively designing with CSS grid.

So. Our two big takeaways: (1) grids serve as GUIDES (deleting a row or column doesn’t delete the stuff inside. And (2) grid cells usually only hold ONE thing at a time. So putting a DIV BLOCK inside a cell unlocks SUPERPOWERS...and lets us put other stuff inside that Div block.

So. Let’s do a quick recap of Grid. We can add a grid just like any other element. We can drop things in a grid and they’re automatically placed. They’ll fill up empty space... unless, of course, you set something to manual, in which case you can get that child to do anything you want. Like parenting. Except not at all.

We can span things and overlap things...we can create reusable layouts which, when we APPLY that class to other stuff, that layout carries OVER. And we can design responsively (taking a grid layout that might work GREAT on desktop, but maybe removing some columns on smaller views).

Now. We cover a lot more of this...like auto-fit, the dense setting in grids, designing for LARGER breakpoints, when to use flexbox versus when to use GRID — all of this is on Webflow University. So check that out if you haven’t already.

But that’s an overview of grid...in Webflow.

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Enable relative position

Download assets

Clone this project

Read the full article

Absolute Positioning

Download assets

Clone this project

Read the full article

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

Read the full article

Hide overflowing content

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Set a default line height

Download assets

Clone this project

Read the full article

Typography

Format your text with search engines and accessibility in mind.

‍

Download assets

Clone this project

Read the full article

Add Google Fonts

Download assets

Clone this project

Read the full article

Upload custom fonts

Download assets

Clone this project

Read the full article

Text shadow

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Backgrounds

Setting the background on an element gives you control over appearance and legibility. In the Backgrounds section of the Style panel, you can add a background image, gradient, or color to most elements (except media elements like video and image).

Download assets

Clone this project

Read the full article

Set background images

Download assets

Clone this project

Read the full article

Create gradient backgrounds

Download assets

Clone this project

Read the full article

Borders

Download assets

Clone this project

Read the full article

Box shadow

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

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

Read the full article

3D Perspective

Download assets

Clone this project

Read the full article

Transforms

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Opacity

Download assets

Clone this project

Read the full article

Filters

Download assets

Clone this project

Read the full article

Override the default cursor for elements

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Intro to responsive design

Download assets

Clone this project

Read the full article

Breakpoints

Download assets

Clone this project

Read the full article

Style across breakpoints

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Intro to Interactions

Download assets

Clone this project

Read the full article

Triggers and animations

Download assets

Clone this project

Read the full article

Interpolation, easing, and smoothing

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

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

Read the full article

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

Read the full article

Collection items overview

Download assets

Clone this project

Read the full article

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

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

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

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

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

Read the full article

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

Read the full article

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

Read the full article

YouTube video

Download assets

Clone this project

Read the full article

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

Read the full article

Link field

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

Download assets

Clone this project

Read the full article

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

Read the full article

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

Read the full article

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

Read the full article

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

Read the full article

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

Read the full article

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

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

Filter Collection lists

Download assets

Clone this project

Read the full article

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.

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.

Download assets

Clone this project

Read the full article

Download assets

Clone this project

Read the full article

301 redirects

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

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.

Download assets

Clone this project

Read the full article

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

Read the full article

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

Read the full article

Paid vs. organic search

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

Paid search results, or ads
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.

‍

Download assets

Clone this project

Read the full article

Requirements

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

Clone this project

Use this version to clone the completed project

Clone this project

Blank pages without hitting page limits

Download course assets

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

Article by

Anna Kelian

Learning & Development Coach

Edited by

Stacy Han

Video Producer

McGuire Brannon

Director of Education

Designs by

Related courses

Intermediate

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Beginner

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Intermediate

Web elements

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

Intermediate

Full site build

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

Ultimate web design course

Start off the year with a 21-day portfolio challenge

Yes, this course is from the future.

Lessons in this course

The challenge

Summary

Ready to get certified?

Course outline

Related courses

2021 design portfolio course

Moving your business online

Web elements

Webflow Ecommerce

Ultimate web design course

Intro to the Designer

Intro to HTML & CSS

HTML structure

Intro to the box model

Element Hierarchy

Navigator panel

Add Elements panel

Section link

Container

Use text columns in Webflow

Div block

Navbar menu button

Advanced button styling

Link block

Text Link

Heading

Paragraph

Rich text element overview

Use text blocks in Webflow

Add a block quote to your page

Collection list

Image

Image file types

Image resolution

Assets panel

Dynamically insert videos

Add background video

Forms

Style Forms

Navbar

Slider

Tabs

Lightbox

Map

Dropdown

Social media

Custom code

Symbols

Style panel overview

HTML tags

Classes

Text style inheritance overview

Style Manager

States

Transitions

Color picker

Color values

Layout settings

Display settings

Spacing

Size

Position

Flexbox

Center elements with flexbox

Equal height layouts with flexbox

Grid

Enable relative position

Absolute Positioning

Apply a z-index value

Hide overflowing content

Set a default line height

Typography

Add Google Fonts

Upload custom fonts

Text shadow

Backgrounds