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

[@Webflow]

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

[@reymundoalvarez380]

Can you link the new UI here?

[@maxie6990]

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

[@zyn3ria714]

Your instructions are so nice and friendly. As a novice web designer it’s really putting my anxiety at ease. Kinda waiting for the updated tutorials!!

[@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!

[@Lawson_Akinsola]

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

[@ylli.brahja]

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

[@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 :/

[@RohitSingh-yo2yl]

I LOVE YOU WEBFLOW

[@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? :)

[@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!

[@phoebe_sg]

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

[@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 :)

[@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?

[@MikeA99]

What I tell myself when it comes to combo classes is that it is very similar to changing things like font sizes on smaller devices. If you make a change on desktop view, it changes it on tablet and on mobile view, but if you make a change on mobile view, it won't change tablet or desktop. In this case, mobile view is a combo class.

[@soundsgate5068]

This is GOLD

[@ТимофейФедорец-н3д]

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.

[@PittsburghHomeGarden]

where is the "Limit items" button, without this the following sections and footer all collide with the grid

[@danielveragarcia1106]

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

[@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 :((((

[@alyu6351]

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

[@ProfeRo9]

Hey there, I got the same issue, the problem was I didn't nest the rich text properly into the grid

[@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!

[@drmindriot]

Simply amazing.

[@torichitty2049]

Is there a way to have a projects page (with all the case studies) where the user can filter by category? E.g. 'branding', 'UX', etc? And is it possible to assign more than one category to an individual project?

[@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 😊😊

[@michaelpe8514]

@webflow I would like to know why animations don't work on CMS collection pages. Is this a bug, or why doesn't it work? Help!

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

[@paulmaad]

u guys are da best.

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

[@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!

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

[@musictrader8990]

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

[@vittobrata76]

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

[@ryangivens251]

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

[@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!

[@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?

[@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 :)

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

[@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!

[@MooChimp]

Hi, I can't see the "Limit images" option. Has this changed?

[@Webflow]

Hello, you can find the Limit items option with the Collection list (or Collection list Wrapper) selected in "Settings" panel (which you can on the right, next to "Style").

[@amymy1088]

@@Webflow Hi! I can't find the "Limit images" either. Yours is in Settings > Collection list settings > underneath Layout section in the video. But mine is nothing showing up underneath that. And I also checked your demo site, there's no "Limit images" section either. Either in the layer of Collection List Wrapper, or Image grid, or Collection item🥲

[@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

[@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!

[@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

[@MrBsattas]

What’s plan should I use for this course?

[@Paul-vm5hy]

The free plan works great so far :)

[@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

[@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?

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

[@Am_ro12]

Maguire - I miss you!

[@arhiiso]

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

[@FoxyMemo]

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

[@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

[@aideh]

Lol I get a little too excited for these.

[@sam-45632]

Well the cms is sooooo good saves so much work

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

[@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! 😆

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

[@NoahShreve]

That no look catch was too clean

[@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

[@FrancisMejia]

Shouldn’t the video title be Day 7? Lol

[@Webflow]

Great catch, thank you for catching that! Fixed!