Showcase a consistent layout of your client projects with the help of a CMS Collection.
We’ve made significant progress in our portfolio build so far, but this is where things start to accelerate, because when we say visual CMS, what do we mean?
[Sara] Yeah, what do you mean?
[McGuire] Great question, Sara.
A content management system lets us set up a database, a Collection of information like client projects, or blog posts, or menu items, but after we get all that information into a database we can design with it, visually. That means we can link parts of our design, we can connect placeholders to that data.
[Sara] Those data.
[McGuire] Those data.
But this means we’re able to design faster, and we can add new items that adhere to the designs we build out. And, we’ll do this in five parts: we’ll set up the basic structure, we’ll create our CMS Collection (this is the database of project), we’ll add content to that Collection, we’ll show how we can use the CSV to more quickly import that data --
[Sara] Those data
[McGuire] Those data.
And finally we’ll build out our design referencing the items in that Collection, which really does feel like magic. Let’s start with the structure. Same basic concept as before, with the top section, let’s grab a section element. We'll use the navigator this time to place it at the bottom, we’ll put it right here, underneath our existing section, and with this section we’ll use the same class. We’ll go over to the selector field here, and we’ll type in section. And when we do, we bring along all those style values from before. We’ve got the sixty pixels on the top, and the sixty pixels on the bottom. This is padding, space inside that element. And we want to do something else here. We want to add a heading. Let’s drag in a heading. We can drag it right into that section. This time we want it to be an H2, our top level heading on the page. I elevate user experiences using telekinesis, that’s our H1, our top level heading. This one will be an H2. And, let’s double-click and edit that to say, Selected Projects, and a few things we can change here. First off, let’s change our styling. Of course, we could use our heading style from down below. We can also duplicate that class, so this can be secondary heading, and decrease the font size since it’s an H2, twenty-eight pixels. And if you notice over here on the left side, the H2 goes all the way up to the section. And that’s because we haven’t yet added our container. So the other part of our structure is going to be the container element. Let’s go up and add a container. We want to add this inside the section, and of course if we grab our secondary heading, and put it inside, we have our container, keeping everything neatly bound. Now, notice how it does not match the container in the nav bar, or the container in here. That’s because those are using the container class. With our container down here selected, let’s go up and make sure the container class is applied. Now it matches. Again, at any time, we can change something like the maximum width, and it affects all containers using that class. We’re fine with twelve hundred. One more text element to add here. Let’s add a paragraph. This paragraph can be basic, lorem ipsum, we can use placeholder paragraph text. Maybe get rid of some of it. Let’s stop here. And we can even set a maximum width. Over here we set a maximum width of four fifty, so maybe on this paragraph here we can set another maximum width of four fifty, like that. Now there’s a ton of space here, our secondary heading has that sixty pixels that we used on this heading. So for our secondary heading let’s decrease that maybe to twenty pixels or even ten pixels might be okay, fifteen. And, with that paragraph selected, we might want to drop down that color. Just decrease it’s opacity maybe to, let’s see, so we’re using our contrast ratio checker here. If it’s this low, it's a little low, let’s put it up to maybe sixty percent looks pretty good on this paragraph. That’s looking okay, at least while there’s a black background. If we change this later, for instance if we change this section’s background color, or we change all our section’s background color to red, of course that contrast won’t be high enough now. If we go in to edit that text color, we can see it’s failing. We’d have to increase that white color, even at full it’s failing. Also, this is hideous and it sears the retinas. Let’s change it back. Command Z, undo, very quickly, very quickly, very quickly.
Well, we built it once. Let’s build it again, but faster. Command Shift Z to redo. And we’re back. But, there’s one more thing to notice here. We created spacing here, we created padding of sixty pixels on the top here, we created sixty pixels underneath this heading, between the heading and the image, between here and the end of this section is another sixty pixels. But, if you look at this section, sixty pixels doesn’t go all the way down to that heading. If we click our secondary heading here, we can see there’s twenty pixels of margin. Let’s remove that. So it’s even and matched. But we can always change this stuff later.
But for right now, let’ s move into creating our CMS Collection, and this is the part we describe as magic. So, let’s go over here to CMS on the left side, and let’s create our Collection. And our Collection name is going to be Projects. And we want to add some fields. First off, this name will be the project name. Each of these Collection fields will hold the data for each project. So we want to make sure we’re listing out fields for every type of data we want to track. So, for clients, we’re going to want a brief description. Let’s go to plain text. And we’ll say this is a brief project description. If we want to add an image, maybe an image for each project, let’s go to image, and let’s say project image. Let’s add another field. Maybe for each project we want a different color. So let’s say project color. We can design with this color. It could be unique, it could be matched to each project. Let’s add another field. This time with an option dropdown, this can be the type of project, or project type. And, let’s add a few options. Maybe we do illustration; let’s add another option for web design. These are all the types of projects Megan wants to feature. Maybe prototyping. And finally let’s add one more for general UX design. So four options, let’s save that and add another field. We want to add the year, let’s do a plain text field for project year. Another plain text field for the name of let’s say, client name, the name of the client on that project. Let’s add another one for the project details, rich text, project details. We can show these on each project page. And just two more. Let’s add a field which is a link. We want a link to the project, so we’ll call it project link. And one more, final field, let’s add multiple images. So for each client project, we want to be able to add multiple images. Let’s say project images. And here’s what happens: when we press, Create Collection, suddenly we have this blank database and we can add a new project. That’s taking the name new project, that’s the project Collection we just added, let’s press New Project. And suddenly, we can add one of Megan’s projects.
Now, for Megan’s first project let’s type, investment-app. Slug is okay. Brief project description, we have something on our clipboard already. Let’s drag in an image here, so we have this investment app, we can just add the Bluerock.jpg here, we’ll just drag it right in. We can paste in a project color. The type of project is a UX design project. The project year is 2021. The client name is NewStar Dollars, and the project details, we can type these or just paste them in from something like GoogleDocs. Let’s paste that right in. And for the project link, let’s make it Google.com for right now. Finally, for project images, let’s go back and add the other ones we didn’t add. So let’s deselect Bluerock, drag these four right in, and that’s it. We’ve added four images to this multi-image field. And that’s it. We can press Create, and now we’ve created that investment app client.
Now, there’s a faster way to do this. If we have all the data in something like a CSV or any type of spreadsheet, let’s move over to Google Sheets here, we can say hey, maybe we have the project names and these descriptions, we have them all written out in a spreadsheet. So, we can say, let’s remove the investment app right here, maybe reorganize them, although we can do it right inside of Webflow if we want, but the important part is that we export the data, we save it as a CSV, a comma separated values sheet. Go to File, go to Download, Comma Separated Values. And, back in Webflow, we can import this, right into our Collection. We can just drag that CSV we just downloaded right in. And, the reason we deleted the one we already typed in is because we don’t want duplicate projects. We had four, all of them listed in the CSV, but we typed out the first one together. So now we’re importing three in that CSV. We’re going to indicate that top row is indeed the header, and we’ll hit Continue, and we’re just going to match each of these field types. Most of them already lined up. If we have a few brief descriptions, which we want to map to a field, sometimes this happens if it's not named exactly how we named it when we made the Collection. Let’s make sure this goes to brief project description. And then project color, that's correct. Project type, let’s map that too. And finally let’s link that link to project, let’s map the link to project to the project link field. When we’re ready, we can import those three projects, and we’ve imported all our CMS content. Press Close, we have all four right here. Now, up on the top right here, we can click this little pin icon, and we can add the project color, we can do the project year, we could do the project link, well they’re all Google right now. Let’s do project description, and we can preview all the data in our database inside our Collection right here. Now we’re ready for the magic part.
So, let’s close out of the CMS, and we’re back in our main page. Let’s go and add a Collection list. Now, a Collection list references a Collection. It’s just a list of things from that Collection. So let’s put it under the paragraph. You can see we have three kind of placeholder Collection items, but we need to link this to our projects. This is the list of CMS Collections, we have one, our projects Collection. Let’s click that. Suddenly you can see right here, we have a list of each of the four projects. Each project we added to that database, to that Collection. Here’s the impressive part. We can go ahead and drag in something like a heading, let’s drag that into any of these fields, doesn’t matter which ones. Put in architectural website, since it’s in the H2 category, since this is the H2 and we’re still in the same section, let’s make these H3s. And, nothing really impressive right now. It just says heading four times. But, if we click this little cog, and we actually get the text from, we go to get text from, we can link this to the project name. And suddenly, we have a list of each of these. Let’s go ahead and add in a paragraph. Let’s go in, drag in a paragraph element, again we’re placing this in the Collection item. So, any of them we can put in, social network, this one in this Collection item right underneath, social network, again by default it’s just a paragraph but we can get that text for that paragraph from the brief project description. Again, creating a link between these headings and these paragraphs, and the data in our Collection. Let’s add another one. Let’s add a text element, this time text block right above the heading. Let’s make this the project type. And, one more text block, let’s add a text block at the bottom here. Again, inside each of these Collection items we have a text block on the top, we have a heading, we have a paragraph, let’s put that at the bottom, and let’s call this one, let’s just name it view project. Notice how as we’re doing this on any one line it’s affecting all of them, and that's because when you make a change in any one Collection item, it affects all other Collection items. So it affects the architectural, the social network, the meditation app website, and the investment app.
So, let’s do a couple things to design this the way we want to design it. First, let’s make sure our Collection item is selected and what we’ll do here is do a couple things. Let’s first make sure we have a Div block inside that Collection item. A Div block is just a rectangle. It does what we tell it to do. We can put things inside that rectangle. We can put things outside that rectangle. It doesn’t matter. Let’s drag those four things. The Div block is going to contain our text block. Let’s put in our heading, let’s put in our paragraph. We’re just putting that paragraph right inside the Div block, and the text block we can put that in too. So the Div block now has all four of our elements. Here’s why this is important. We can select the Div block, and set its background color. We can go to element settings, and get its background color from our projects, from that particular project color. We can see, we’re now styling these things. It doesn’t look great yet, but we’re now styling these things based on each Collection item's data, like the background color. So maybe with our Collection items selected, go back to element settings, let’s just add some margin at the bottom, maybe thirty pixels. Let’s collapse this Div block because we want to do one more thing. We want to add an image. So let’s get an image element, let’s drag it not in the Div block but under the Div block, and let’s get that image from our project image field. Now, it’s kind of taking up all the space available right now. It’s not very good looking. So, what we can use is CSS grid. We can select our Collection item, this is the parent element that contains that Div block that has all of those data inside, and it has the image. It has the image element inside. So with our Collection items selected, let’s change our display to grid. And, by default, we have four cells. Let’s remove that bottom row, right-click, and Delete Row. Let’s increase the spacing to maybe thirty pixels here, let’s press Done. Now we have this kind of side-by-side design. In fact, we might even want to get rid of that. Let’s actually remove this spacing altogether. Looks good. We have this kind of side-by-side design, so we can select our Div block here, maybe add some padding, let’s do thirty pixels on all sides. That looks pretty good. Maybe we want View Project to be at the bottom, so with this Div block selected, let’s name it. Instead of using the Div block default class name, let’s call this Project Details. And, we can add flex box to this. Flex box lets us sort things in any one of two directions. So if we want to sort things vertically or horizontally, we can click flex box. This is horizontal, but we can switch this to vertical. And, what flex box allows us to do since we set it on the project details, the Div block that parent, we can select any children of that parent,. So let’s open this up, click that text block, and we can set it’s top margin to auto. And that pushes it all the way down to the bottom.
So, couple more things. Let’s select our Heading 3, and you can do this on any of them our Heading 3, let’s add a class, let’s call it Project Name Preview. And we can set a different font on this, let’s set the font to DM Serif, let’s do a weight of four hundred, let’s decrease the font size to twenty. Twenty looks pretty good. And for these top text blocks, let’s decrease the opacity. Let’s drop these a little bit. That looks pretty good. Same thing here. We can apply a lower opacity. And, for organization’s sake, let’s make sure as we’re making these new classes, as we’re changing each of these items, we’re keeping things organized. So let’s say this is, Project Type Preview. And we might want to change this parent element. Let’s go into the Collection item, let’s hit Edit Grid, or we can just go up to the top here, and hit Edit Grid, and maybe we want to move this over. So let’s change this, these fraction units, actually point seven five is pretty good. We can always click in, and point eight. That looks okay. Let’s hit Done. And so we’ve kind of offset our design here. So we have a description on the left, with the view project button, which we’ll add in a moment. Again we should say this is button text. And we have all four projects added right here.
Now, we’ve set up a visual hierarchy here. Where our H1 is clearly the big headline, the H2 is on a second level, and each of these H3s is on a third level. And the nature of our Collection list, the way we have each client project following the same structure, that lends itself to visual repetition. Repetition establishes rhythm in our design, and it makes scanning through our projects clear and easy to preview. And like we said, the great thing about building it this way, is not only can we change the design down the road, but as we change stuff in our database, in our Collection, the design is going to update to reflect those changes. Now, we’re making huge progress, and we’re even nearing the end of the work on the homepage. In fact, after this we’re just adding two more parts. The contact form, and the footer. And then we’ll go through the entire homepage to make sure it’s responsive on different devices like tablets and mobile phones.
[Grimur] Hang on. I’m texting. I mean I’m reviewing some of the hero sections and navorgations on Tweet-hir. And Insta. Using the hashtag #21DayPortfolio. But I actually mistyped the hashtag, which is profoundly embarrassing. But yeah. Let me know when we’re filming.
Add dynamic content to your homepage by displaying a list of client projects from your CMS Collection data, which you can easily update in the future. Give your visitors a pleasant viewing experience through uniform structure, visual repetition, and rhythm in your design — and set yourself up for success by establishing Heading hierarchy.
In this lesson, you’ll learn how to add a CMS Collection to your project and pull its data into your visual design using the following:
Follow along and download the assets for this lesson.
Let’s add a Section to showcase client projects on the homepage:
Let’s reuse the “Section” class on our new Section to bring along the 60 pixels of top and bottom padding we had styled before:
Let’s add a Heading to our new Section and set it to be an H2 since we already have our first, top-level Heading set as an H1:
Double click the H2 to change the default heading text (e.g., “Selected projects”)
Let’s duplicate the “Heading” class on the H2 to create a new secondary heading class with new styles:
Read more about how to duplicate classes.
Because the H2 should be smaller than your H1 in your page’s visual hierarchy, let’s decrease the font size on the new “Secondary heading” class:
To keep your H2 neatly bound inside your new Section, let’s add a Container to the new Section and place the H2 inside the Container:
Note: When you add a class to an element, all styling adjustments made on this element are saved in this class. You can reuse the class on new elements to automatically apply the styles saved in the class you created.
Let’s add a Paragraph to the Container and give it a smaller maximum width:
Let’s reduce the space between the “Secondary heading” and the Paragraph:
Let’s also change the opacity of the Paragraph:
Good to know: You can build accessibility right into your design workflow by using the color contrast analyzer to make more accessible color choices.
Let’s also remove the 20 pixels of top margin on our “Secondary heading” to make sure spacing between elements matches:
A CMS, a content management system, lets us set up a database to manage a collection of information so we can design with it visually. That collection of information — that data — could be client projects, blog posts, or menu items (among other things).
When we link parts of our design to our data (via placeholders), we can design faster when we add new data to our Collection that adhere to the designs we build out.
Let’s add a CMS Collection to our project and create the framework to hold our data:
Because each Collection field holds the data for each client project you’ll showcase, you’ll want to create fields for every type of data you want to track.
Let’s add our first Collection field to the Collection:
We’ll add 8 more custom Collection fields, which will eventually contain unique data for:
Let’s add the “Clients” Collection field, which includes a brief description of the client:
Add the “Project image” Collection field:
Add the “Project color” Collection field (you can design with this color — it can be unique and matched to each project):
Add a “Project type” Collection field as well as some options to choose from:
Repeat step 4 above to add 3 additional options — project types — you want to feature:
Save the Option field.
Add the “Project year” Collection field:
Add the “Client name” Collection field:
Add the “Project details” Collection field:
Add the “Project link” Collection field:
Add the “Project year” Collection field:
Press “Create collection” to create and save this collection.
After you press “Create collection” you have a blank database to which you can add a new project:
Let’s add some information into the Collection fields we created, which populates into the respective project in our Collection:
You can continue to enter this information manually for each new project you’d like to create, but there is a faster way to do this.
If you have all the data you’d like to add to your CMS Collection in CSV (comma separated value) format, you can import that data directly into your Collection. To avoid creating duplicate projects, let’s prepare the CSV file and remove the “Investment app” project you manually added in previous steps:
Now that the CSV file is ready to go, let’s import its data:
Indicate that the top row in the CSV is the header and press “Continue.”
Match each of the field types to the content in your CSV:
Note: Sometimes fields may not automatically match your imported CSV content if the CSV field isn’t worded exactly as it is in your Collection. If this is the case, you can still manually match your fields. Read more about importing Collection items.
Repeat the above 2 steps to match the remaining “Project type” and “Link to project” fields.
Once all fields have been matched, press “Import 3 projects” to import all your CMS content and press “Close” once it’s finished.
Note: Click the “pin” icon in the upper right of your Collection to preview specific fields you’ve set up for your Collection data.
Close the Collection to return to your homepage and begin designing with the data you’ve added.
We’ll use a Collection list to contain that data, and we’ll set it to reference the “Projects” Collection you just created. Let’s add a Collection list to your page:
Once you add a Collection list to your page, placeholder Collection items automatically appear. To add your data to the placeholder Collection items, you first need to link the Collection list to your Collection:
Let’s add elements to our Collection list and start with a Heading:
We’ll see “Heading” on our page 4 times — one heading per each Collection item. Let’s link the Heading to the data in our Collection and watch as our unique information appears:
Add a Paragraph into the Collection list and link it to our Collection data:
Add a Text block into the Collection list and link it to our Collection data:
Add another Text block into the Collection list — but this time we won’t link it to our Collection data:
Note: When you make a change in any one Collection item, it affects all other Collection items in the same Collection list. Read more about Collections.
Let’s make the design look more appealing and add a Div block to hold the 4 elements we added previously:
Let’s style our Collection items based on each item’s data from our Collection. In this example, we’ll set the background color on the Div block to use the color from our Collection:
Let’s create space between each Collection item and add some margin:
Add an Image to the Collection item:
Let’s use CSS grid on our Collection item to arrange them in a more visually pleasing way:
By default, the Grid shows 4 cells — 2 columns and 2 rows. Let’s remove the bottom row to create a 2-by-2 grid:
Let’s remove the space between the grid cells to create a side-by-side design:
Note: With your Grid selected, you can also set the gap between grid cells by clicking Edit grid under Layout in the Style panel.
Let’s push our text away from the edges of our Div block and add some padding:
Note: You can quickly add margin or padding to all sides of an element by holding down Shift, and dragging one of the margin or padding controls.
Select the Div block and give it a specific class instead of its default “Div block” class (e.g., “Project details”)
Let’s apply Flexbox to our newly named “Project details” Div block to allow us to sort our content horizontally or vertically — in our example we’ll choose vertically:
Let’s also use Flexbox to help us align the “View project” Text block to the very bottom of the “Project details” Div block (its parent element):
Select the H3 Heading and give it a class along with some styling:
Let’s decrease the opacity of the top Text blocks:
Select the Paragraph in your Collection item and repeat the above 2 steps to also decrease its opacity to 63.
Click into the Selector field and rename the Paragraph’s default class (e.g., “Project type preview”).
Let’s also adjust the appearance of our Grid to offset the design:
Note: You can precisely adjust the FR units of your Grid by clicking into the grid cell’s row or column heading and typing in your specific FR.
Lastly, maintain class organization and click the bottom Text block to give it a class (e.g., “Button text”).
Nicely done — promote those projects of yours!
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback