Create dynamic portfolio pages using the Webflow CMS - Build a custom portfolio in Webflow, Day 7

Now's the time - the time to go into more detail with your projects in your portfolio. We're going to use CMS Collections to generate all of our pages by building one page. With magic.
00:00 - Day 7, begin
01:31 - Hero section
07:59 - Project details
11:58 - Project descriptions
18:01 - Multi-image CSS grid
20:39 - Other project links
25:40 - Add symbols
26:59 - Recap
Get early access, plus downloadable assets and cloneable project for every lesson: wfl.io/2021-portfolio
#21dayportfolio
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@nguyenbui90]

Never found any authentic turorial from the dev that is so informative and humorous. Thank you guys, Good job

[@Josipteklic]

You are the Bob Ross of web design! Love these videos!

[@youstubers5722]

Three seconds in, I start smiling. Four seconds in, I click Thumbs Up!

[@RohitSingh-yo2yl]

I LOVE YOU WEBFLOW

[@ylli.brahja]

Guys you are all amazing, i'm loving the sense of humour. Great work.

[@drmindriot]

Simply amazing.

[@Trazynn]

Great to see Webflow embrace Figma though. As a business they can of course pretend something that overlaps with their niche doesn't exist, but Figma greatly complements the workflow.

[@tiffcow924]

Would love to know more about this as I'm considering either doing my mockups in Adobe XD or picking up Figma.

[@dankemp6701]

@@tiffcow924 would love to know which you decided to go with and how it has fit in to your workflow with webflow? :)

[@soundsgate5068]

This is GOLD

[@Lawson_Akinsola]

I just love Grimur's sense of humor 😂. Thanks so much guys!

[@paulmaad]

u guys are da best.

[@rhythmagarwal21]

I can relate so much to that 'FOLLOW THE DESIGN' part and the way she does it is even more hilarious lmao

[@kevnn6443]

Hey Webflow! Just a quick question in regards to the multi-image grid @20:22. I noticed that the function for pagination wasn't available for it. Is there a reason why it's not showing in the settings cog? I'm assuming it's because all the images uploaded for the project are being shown in the grid and that there's no overflow. Would pagination show if you set the limit to 3?

[@timothysolly7863]

You guys are the best!!! I don't suppose you can show us how to create a gallery of more than five images, can you? It's really crippling my project. Thanks!

[@yulliana2804]

15:35 when unlinking all contents in the rich text just disappeared. My padding and margins of the rich text is already zero but I still can't get rid of the padding on to of the rich text block :/

[@user-rn9lh3ei5x]

I have a question, for Webflow. When I selected as at 14:39 and forth was said Heading style and linked it to my project-description, my Heading's font has been changed to. In the video, it didn't.

[@thejaysehansen]

Been working through all these. So amazingly great. BUT, these dynamic pages seem VERY limiting for doing a portfolio, I'm hoping there is a solution. I want to have many items unique to each project breakdown (sliders, grids, lightboxes etc.) that are 'static' and ONLY on that project, while also having all the dynamic parts. Is it possible to add elements and set them to 'non-dynamic' so that they don't repeat on every single project page? Asking for the best of both worlds here because, both worlds are great. Please tell me it's possible!? And, if not, is my best course of action then to create a master portfolio page using as many symbols as possible and manually duplicate that? Thanks guys! Just bought, and Webflow has been insanely amazing so far.

[@Paul-vm5hy]

That was the first question I had as well! I am still not sure if it’s possible how you would imagine, but if you google for the webflow workshop „ Episode # 147 - May 14, 2019“ I think they are explaining exactly what we are looking for. But it’s an hour long and i didn’t have time to look into it yet. Maybe it helps.

[@thejaysehansen]

@@Paul-vm5hy Thanks for the reply! On weblow forums today I asked there, and the WF support said it was NOT possible. (very sad) But I'll check this workshop! Maybe there's a hack! Thanks!

[@thejaysehansen]

Ah just checked. Yeah this workshop shows conditional things to show - not quite what we need. (helpful - just super limited.) Instead, I will be foregoing the CMS altogether, and building a master page with lots of symbols to keep it repeatable. 20+ projects so... the CMS would have been excellent. Maybe a future version of Webflow will allow it!

[@stej1110]

@@thejaysehansen I was thinking the same thing. Duplicating one of the project pages and just replacing the text and images with your new project would work as well, no? It's also important to note that the CMS plan is more expensive than the basic one.

[@omarmiz]

@@stej1110 damn they're slick!

[@joshuajia722]

Oh, My God! I laugh so hard... I love you guys!

[@danielveragarcia1106]

is there an option to only show the previous and the next project in the cms list in 20:40?

[@Wordsm1th]

Great series, love the videos and the humor is fab. Is there a Figma file download to complement these videos?

[@Webflow]

Hi there! Great question! At this time we have downloadable course assets available here: university.webflow.com/courses/2021-portfolio-course However we don't have a matching Figma file for this course. I'll connect with the team to see if we can provide those in the future. Thank you so much!

[@renatahelm2961]

Help please :) Hey all, could you help me with an issue? Around minute 15:05, when we link the CRM project description to the Rich Text, I don't see it on the dropdown list, just appears "No fields to connect to" Works everywhere else. Anyone had this issue? Culdnt find any similar problem elsewhere! Would be soooo grateful. Love this course btw!!

[@Webflow]

Try double checking that your Project Description field is a Rich text field in the Collection structure settings. Then double check to see if you've dragged in a Rich text element rather than a text or paragraph element. Hope this helps :)

[@mikepapahotel]

Thanks again guys - yours are the best training vids on the net by a country mile! 👌🏻 I do have a question though: At 17 minutes in, you add a link block under the project description which you said "links to the project". That confused me a little because I thought we were actually designing the (single) project. Where would that link take us? Did I miss something? 😊

[@Webflow]

Hi Michael, the link would take you to the URL you put in your Project link field. In our example, we put Google.com for all our Project links in our CMS items, so clicking that link (that is getting the URL from the Project link) would take you to Google.com. Let us know if that helps clarify!

[@marionicolini958]

Great course btw.. I'm loving it!

[@omarmiz]

@@Webflow I agree with Michael. It's not a criticism of your tutorial or UI design. Just a weird UX decision to take user to the Project page, then have only half the info there, so that they need to click the link to go the Actual project page. I guess you did it because designing the full page would've been redundant, pedagogically speaking. Great videos anyway 😍 Really enjoying webflow. Thanks!

[@sueholder175]

It means "View live site" which is what the project pages are about - a summary of the project itself.

[@nubreakz1]

It's very bad UX decision and also useless for this course. And it is official Webfow course...I was surprised that almost nobody noticed it in the comments section.

[@aideh]

Lol I get a little too excited for these.

[@sam-45632]

Well the cms is sooooo good saves so much work

[@phoebe_sg]

How would we be able to edit single project page? e.g: adding additional section just one project

[@MikeyDLuffy]

Any change you make in a project page applies to all of the project pages. Is there anyway to make a change to a project, or add a picture or something without it also applying to the other project pages?

[@Webflow]

Yes. With dynamic rich text fields, you can add pictures, videos or even custom code to certain CMS items without it affecting other CMS items. For more information, view this article: university.webflow.com/lesson/rich-text-field Hope this helps 😀

[@MikeyDLuffy]

@@Webflow Thanks a lot, i'll check out the article. Love this series!

[@alyu6351]

How tf should I connect a project collection to the rich text in 2024? Doesn't work, nothing changes

[@tochidioka6019]

Great tutorials although I'm finding it hard to connect my CMS link to other pages of the same project. I didn't create CMS page so it's really difficult. Is there another way around this @webflow

[@Webflow]

Can you please create a post on our forum so we can look this? discourse.webflow.com Make sure to also put your project's read-only link in the post: university.webflow.com/lesson/share-your-site

[@mmirenaa]

14:56 when I link the project description to the "project details", H2 is automatically gone. The only that appears is text paragraph.

[@PFunkMasterFresh]

I have the same issue, did you manage to resolve it?

[@fararmedia2189]

Hi! Go back into the CMS project and highlight the heading, and change it to H2

[@Alina-um6we]

@@fararmedia2189 Thank you!

[@petermckinnon386]

it's April 2024. Other project links 25.15, can anyone let me know how to get the blue line off under the links please.

[@louislowstress]

Minute 3: When selecting the element settings of the heading, I simply have no option of selecting CMS content, despite having created the projects CMS.

[@renatahelm2961]

I have the same issue :((((

[@salvatoreragusa-official]

Hey guys I am experiencing some issues. Although I followed along the "other projects grid goes out of the container". I am sure you can help me

[@Webflow]

Hi Salvatore, we'd love to help you solve this. Can you describe what exactly you are experiencing and provide which browser you are using?

[@marcpoinson9300]

Is anyone else not seeing the filter options for the collection elements ? Its just not there and im feeling like i missed a crucial step. Help please!

Is there an option to use the whole block as a link instead of having to vreate a button or a text element to asign the link function? Can't we use the whole container that retrieves the content as a button?

[@Webflow]

You can use a link block if that is what you're looking for: university.webflow.com/lesson/link-block

[@abdulmohammad8595]

I NEED HELP!!! I have a lot of information on my portfolio. I don’t think 30 customizable fields are enough if I need one for every single thing (titles, paragraphs, photos, etc) how can I add in static information that’s only applied to each project?

[@arhiiso]

What are the other 999 ways to build that? :))

[@mcleung63]

Im having an issue with the Multi-image grid images overflowing into my other projects section. the images are overflowing onto my other projects heading. Anyone else having the same issue or have a solution? Thanks!

[@mcleung63]

Figured it out myself, I accidentally set values to 100 the size width and 400 to height, when I changed both Width and height to auto this fixed the problem of the images overflowing into the next section

[@ShoSho-cq7ct]

So what's the diff between combo class and rich text? When to use either?

[@Webflow]

A combo class is made up of multiple classes (or styles). A rich text is a type of element. Here is more information on both: university.webflow.com/lesson/web-styling-using-classes university.webflow.com/lesson/rich-text hope this helps :)

[@petermckinnon3104]

Now in April 2024 & at 15mins 33 sec you unlink the project details to remove the 20px margin. Unfortunaly the UI has change and can no longer unlink from the project description cog. Can anyone help please. Thank you.

[@MrBsattas]

What’s plan should I use for this course?

[@Paul-vm5hy]

The free plan works great so far :)

[@ryangivens251]

Love the tutorials! Also, not gonna lie, but the narrator sounds a bit like Ryan Reynolds.....

[@NayaabKhan]

Great video! The title should be "Day 7", right?

[@Webflow]

We definitely got overly excited and ahead of ourselves! It's been corrected to Day 7 - thank you! 😆

[@musictrader8990]

Why am I not able to edit the rich text document?

[@Piotr.AMS.Studio]

When I add video to one of the projects in CMS it shows on all project pages. How can I fix this?

[@Webflow]

Make sure that you are binding the source of your video element to the video field from your Collection. For more information about data binding, check out this article: university.webflow.com/lesson/structure-and-style-collection-pages

[@eastonthekidd]

Quick question if anyone can help. When I select project details for the rich text block it removes the header 2. It just shows the descriptive text. Does anyone know how to fix this? Thank you!

[@alessandras2872]

Just saw this comment: Go back into the CMS project and highlight the heading, and change it to H2. I tried it and it changes all the text to H2. Did you manage to figure it out?

[@chahrah.5209]

@@alessandras2872 Thank you !! I didn't realize I could switch it to H2 in the CMS !

[@tanphucho1615]

@@alessandras2872thanks you 😊😊

[@Navible]

I fixed the Project description from "Plain Text" to "Rich Text". It took me quite a while ;__;

[@Navible]

the .csv has an error

[@michaeljosephschmitz5380]

how do you do that? i think this is my error too.

[@NoahShreve]

That no look catch was too clean

[@Cowbowbebop312]

does anybody know why my project type label won't appear?

[@Webflow]

Hi Joshua! Make sure your text block is getting the text from the Project type field (you can click the cog icon next to the element label to achieve this). If that still doesn’t work, please let us know and we can investigate further!

[@Cowbowbebop312]

@@Webflow hi guys! It’s still doing this and I thought it was because I may have imported the CSV the wrong way but everything looks exactly the same. How should I show you my website?

[@Webflow]

Can you please email us at [e-mail] with your portfolio's read-only link? We'd love to figure out what you're experiencing and help you solve this.

[@_eugenechia]

I faced this issue too. Tried creating 2 different CMS and still had same result.

[@vittobrata76]

why now we can't add thing on rich text???????????????????/

[@ihajo]

Did they replaced command + E with command+ K

[@Webflow]

Both Command + E and Command + K will bring up Quick find. Learn more about our keyboard shortcuts here: university.webflow.com/lesson/keyboard-shortcuts

[@klokkerholm1993]

Hi webflow great video and production my only feedback is the images choice are a bit wierd for a portfolio

[@jose_reyes1111]

They are just examples of the structure, the text is lorem ipsum! is just to understand how to build it, the designer is a fictional person, duh!!!

[@rayanesaada5080]

Grimur tho😂😂

[@JokeBrianRodriguez]

#21daysportafolio

[@ea3805]

This is is cool but I geto ZERO CMS and i pay for webflow. This is confusing becaue the free webflow accounts get 50 CMS items. Maybe i will cancel my paid account for a free one so i can try this out.

[@FrancisMejia]

Shouldn’t the video title be Day 7? Lol

[@Webflow]

Great catch, thank you for catching that! Fixed!