Create a CMS Collections layout - Build a portfolio site in Webflow, Day 3

[@Webflow]

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

[@somirulislam6287]

I can not fix view project. I am trying many time, but no result . Can you give me any video link or any information about this ?

[@mania.k6302]

Hi I can't add images of my projects. When I want to click on 'get BG image from my projects', It says 'This overrides all background images and gradients.

[@kazuli2067]

@@mania.k6302 Hi did you fix that?

[@JesseMoffett]

If all education was like this, I could learn anything!

[@akashchoudhary5736]

damn true !!

[@emmanueladegbe720]

I know

[@philipposadamou6445]

I thought exactly the same!

[@cristitimbota-belin5785]

let's do it 🤩

[@0815michik]

These tutorials are so good! I've really not seen any tutorials like these. Sometimes you are so funny that I start laughing out loud in front of my screen. And this is combined with such user-friendly and well-done tutorials. Exceptionally! Congrats, and thank you! PS: These tutorials are a major motivation for me why I try to learn Webflow. Even though the tool has a steeper learning curve than something like EditorX, the tutorials are far superior!

[@Pancake-dj4vp]

As a designer I am so happy to find these tutorials, I have been struggling to build a website and hate using code even though I know the basic concept of coding, I am gonna give a go and try out myself to build my portfolio

[@drmindriot]

Welp, I'm a convert. Webflow is awesome. The amount of time it took to create this vs something like WordPress is remarkable.

[@adesinaoluwasanmi5793]

So much joy watching with jokes and all. I so understand every single video. Thanks team webflow

[@loganbenjamin8922]

I am loving this course!! Would love to see more of these (some advanced) in the future.

[@amarantomotors8074]

The best course everrrr!!! Im not a designer ( a month ago i didn’t know what a div was lol) but im designing my own website and i can say webflow is the best platform for this.

[@lynnduong7525]

10:24 If you're confused how to link the text to the CMS text click the purple icon (when hovering it is a plus symbol) and then you'll be able to see the dropdown.

[@tomslator209]

You are a legend. I was losing my mind!

[@charliemcquade7071]

Thank you!

[@fatselim]

You saved my life ❤

[@ayferylmz1892]

thank you so much!

[@saumyakesurvala1589]

Thank you Bless you!

[@DalienErgo]

I can't believe how engaging this is

[@jonsenva]

I love this video ! I mean... THOSE videos

[@Michelle-it2nl]

wait these are low-key a masterpiece

[@Chatshigetbangd]

What an amazing way to learn. I really believe in that magic!

[@zyn3ria714]

Hi I’m not seeing the option for “ get the text from project at timestamp 10:24

[@zyn3ria714]

This is just a ui change. Click the tiny purple thing on the corner instead

[@collinhadley4119]

Huh, for some reason, when I go to add the Collection List Wrapper below the Paragraph, and after selecting Projects from for the Source from the context menu, the list does not populate with the 4 horizontal purple rows. It's empty, looking like a 2px purple line that holds no content. Can't seem to fix this. Anyone have advice?

[@cmdqqq]

same here, very frustrating. did you find a way to fix the problem?

[@tomslator209]

Did you fix this?

[@PjStekhovenSmith]

Having the same issue. Anyone resolve this?

[@PjStekhovenSmith]

... for those that come after me, hunting for a solution to this issue - a simple refresh of your browser may resolve it (it did for me). If the above simple refresh doesn't work try the following: 1. Logging out of Webflow 2. Clearing your browser cache 3. Logging back in.

[@benjiwillm]

@@PjStekhovenSmith

[@andreiconx]

@Webflow just release the whole series in one go and spare us the agony of having to wait! #21dayportfolio

[@sashakuridza3945]

hahahaha totally agree!! :D

[@Webflow]

We’re getting it out as fast as we can make it! Thank you for your enthusiasm - can’t wait to share the rest of the course with you as it comes out! ❤️

[@ventsiboy]

Webflow not only teach us web design, they teach patience too

[@MooChimp]

The "Projects type" one isn't working for me. It says its not compatible with that field.. Any idea why? I went back and made sure the spread sheet matched all the fields perfectly but the list one just won't do it.

[@rarhs]

Why each div blocks get bottom spacing when you add bottom margin only to the 'Collection item' at 12:31. I don't get it.

[@TheValecto]

great work on this introduction course . . . got me hooked!

[@jeffmcbride7000]

I just see a purple line when I add the Collection List to the page, there are no boxes before or after linking the CMS. Others have commented with this issue in the comments and on the forums but I don't see an answer anywhere. Thoughts?

[@jeroenbroxterman2267]

@jeffmcbride7000 try to remove the caching of your browser and history. Then refresh the page, login to webflow again and you should be able to see the collection items.

[@PjStekhovenSmith]

@@jeroenbroxterman2267 was just facing this same issue and this suggestion resolved my problem. Cheers!

[@MrJustin8912]

Great content, a great help. So well thought out and easy to follow. Thank you!

[@notsean8471]

Where did you get the text for the client project?

[@novak.olen66]

Around 11:00 minutes in when you insert a text block into the collection item --> once connected the text block randomly jumps to the top of the page....?? No other settings have been changed.

[@Webflow]

Sorry for the confusion. There is a noticeable jump cut (or edit in the video) to slightly zoom into the Webflow designer interface. However, the order of the text blocks do no change. Hope this helps 😁

[@grantswanson2547]

I never saw a way to add the link block to direct to the CMS project, or am I missing something?

[@clarkbeggs5629]

Anyone else having an issue with Project Type not mapping to the option field on import? It's grayed out for me.

[@Webflow]

If you open the CSV in a spreadsheet program (like Google Sheets, Excel, or Numbers), check the "Project type" column to see if the options exactly match with the options in your CMS collection for that same field, "Project type." If that still doesn’t work, please let us know and we can investigate further!

[@clarkbeggs5629]

@@Webflow Thank you! Will check that out.

[@mcleung63]

@@Webflow I have the same issue for all imported projects. Unable to select "project type" for all 4 projects. I even copy and pasted the project type from the csv file in google sheets.

[@themuegge]

"+create new field" and choose options instead of "Map to existing field" worked for me

[@HarshVerma.Growth]

I Like It. THOSE DATA!!!

[@nikachuchu]

this makes me feel so powerful!!!

[@sebarothmann]

Hi! I have a problem. I download the CSV file to create a CMS collection but when I open the file the data appears messy. The data is not arranged in columns as seen in video. Help me

[@pixelgeek]

Are you opening the CSV file with Excel or Google Sheets? If not, try importing your CSV file into one of those programs. This may help.

[@noah.blackwood]

Does anyone know how to place an image under the DIV Block at 12:42? I've tried but all it says is "Element cannot be placed in a Collection List Wrapper."

[@Webflow]

First drag the image underneath the Collection List Item and then move it below the div block. Hope that helps.

[@ezehelizabeth1382]

I’m curious. Did it work for you?? It still hasn’t worked for me 😭

[@Vanishaway30]

It works!!

[@raducosminpugna7222]

More, please! Mooooooore!

[@lunar1427]

Holy day 3 is difficult to understand the logic of how parent-child relationships are and when to edit what styles. Took me an hour to go through this vid with constant pauses and speed reduced to 0.75x. I think I will save this video and have it on repeat in the future to understand it more.

[@tiffanyta8382]

At 14:12, why does setting the text block top margin to 'auto' force it down to the bottom?

[@Webflow]

Hi Tiffany, great question. Adding auto margin pushes flex children elements to specific sides. In this example, setting the top margin to auto will add enough margin on the top to push the "View project" text block to the bottom of its parent element. Learn more about spacing here: university.webflow.com/lesson/spacing-margin-and-padding

[@onlysomethingsmatter]

Amazing stuff! Please stop burning my retina :))

[@kshitijroodkee8151]

At 12:45 when adding image to the bottom it attaches itself to the bottom not to the top text can anyone tell how to solve that?

[@kshitijroodkee8151]

turns out I was using margin as 30px instead of padding lol

[@the-secrettutorials]

8:00 I couldn‘t change the excel file, so I had to import the unchanged one and from there on everything went horribly wrong. Could you upload a ready to use csv please 🥺?

[@Webflow]

Hi there! Thank you so much for reporting this experience. Each of the Collection field names are case sensitive, can you please double check that the sentence case structure matches that of the collection in your site? If you're having any trouble, please contact our Support Team right away: university.webflow.com/support

[@najishaban5518]

How can we reorder the records in a CMS so that we can choose what to show at top on a page? This is really important and extremely practical.

[@camd6725]

I was wondering the same thing!

[@AngeloRecaman]

I double checked for case sensitivity and even changed the name of the columns according to the CSV file which some are different than what you are told to you in the video. Really weird and I do still get an error after importing. Such error is "Upload failed. Add a closing quotation mark to row 2, column 155." I even checked at row 2 but there is too much text and I am not sure what to do. However important to make clear I was following each step at time with the video course.

[@luxuz1]

Add a new column filled with an character. Space for example.

[@syedosamahussain2801]

I'm struggling with one question: how do I tap on these projects and go to their respective page? I've tried adding a linkDiv but that applies one page to all the projects. It's really picking my brain. Please help, thanks.

[@Webflow]

This video may help you with this: kzbin.info/www/bejne/nKS7aphmer1qmKM

[@santoshogilvy9359]

Bro ... you're very handsome and your British accent is fantabulous....Good narration skill

[@JuliaViray]

These are amazing! But may I ask, where can I locate the excel file? Thank you.

[@StanOwden]

How do I change the order of the projects in the project list?

[@TaylorAlthiser]

Did you ever get it ?

[@AnAn-uu6sp]

Got some problem. Fixed it. Let's go !!! I could build a real website !

[@JagritiSachdeva]

I love the way it was explained, but he mentioned that you can rearrange projects inside webflow. How do I do that? I tried looking. Couldn’t find a solution.

[@Webflow]

Hi Penny! Great question, here is a guide on how to organize your Webflow projects within the Dashboard: university.webflow.com/lesson/dashboard

[@JagritiSachdeva]

@@Webflow Thank you so much for responding. I was actually looking to sort and organize projects under the CMS. I am making a portfolio. I figured how to add a number to each project and then add the sorting order into the container. However, my container for the projects on the homepage is sorting vertically and in the projects page itself, it’s doing it horizontally. I have no idea how to make them both have the same order.

[@jessesaunders3584]

The project type option is greyed out when trying to map to existing field.

[@MikeyDLuffy]

Is there a way to reorder the projects? For example when you linked the "Get Text From Projects" it automatically put "Architectural Website" as your first project. Can you move it down if you wanted the Meditiation App to be shown first for example?

[@Webflow]

The only way to order CMS items is by using the Sort Order feature in a Collection list: university.webflow.com/lesson/sort-collection-lists Try using that with a number field. Hope this helps 😀

[@kaleb-oldaccount]

Why does "auto" push text to the bottom in the flex box??

[@Webflow]

Great question! Sam Provenza wrote a great article that explains this over on Hacker Noon. "If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied." Source: hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

[@0815michik]

Very good tutorial! Just one thing. I didn't really get why the "View project" text gets pushed to the bottom in a flexbox when the margin is on auto. I could not use this myself as I don't understand why it is happening.

[@amagoba]

I had problems with auto option too, didn't happen anything

[@amagoba]

You need to apply flexbox vertically before to putting auto. I did it and work.

[@amymy1088]

@@amagoba Awesome thank you!!!

[@robertvogel226]

i think the tutorial is great. in the fourth part with the grid everything worked, only the picture is in the mobilephone view next to the text and does not change underneath? what is wrong with me?

[@smalinskas]

Hi guys, loving this series. I hit a brick wall - when trying to connect an image to the collection it says "no fields to connect to". All the fields are connected correctly I tripled checked.. What did I do wrong?

[@Webflow]

Hi Marius, Double check that you have an image property in your CMS collection that you're trying to connect to. 💙

[@conchabelo]

I don't see the logic of why setting the text block to AUTO on 14:11 puts that block to the bottom. Could someone please explain please? @Webflow #21dayportfolio

[@dhananjayapasan]

Don't try to understand it, just press all things until you get right alignment

[@Webflow]

When the parent is set to flex (vertical), a child will automatically create room above it to create blank space (between the other child elements and the selected element).

[@Webflow]

This also works extremely well if you have different grid cells with content that takes up different space (sometimes paragraphs don't always have the same height) - top-margin: auto will push something to the bottom regardless of the height of children above it.

[@conchabelo]

@@Webflow Thanks for the explanation! I'm loving the course.

[@annyhola3839]

hi, in the part of project edit page, i just wanna know the meaning of project images---why you add the rest images into the project images but you don't use them?

[@tristanvilliers9696]

When I add the additional "Section" under the image in the nav section, it says "section elements cannot be nested inside of each other". Any idea on what I am doing wrong?

[@5214428]

Drag in down further, it's a new section

[@shuangchen89]

Hellow Webflow! I am still not too sure about how can I change my project sequence once everything is finished.

[@jasonlee4296]

Lets say I decide that after i have all the projects listed i want to rearrange them? How do i do that? Having technical difficulties

[@Webflow]

What you can try is adding a number field in your Collection structure. Then add a number for each portfolio project. Then, in the Collection list sorting, use your number field: university.webflow.com/lesson/sort-collection-lists Hope this helps :)

[@jasonlee4296]

@@Webflow thank you for the response, I also wanted to ask where I can find the social media icons to put in my footer? As well where can I make a brand image like there is in this project? ([Name’s Portfolio])

[@christopherthomas2990]

I'm finding it impossible to create a project thumbnail on my webflow portfolio site with text over the image on hover if I've used CMS for each of the project pages. Is there a way?

[@islandheehee]

how do you make some element linkable? like the picture and the "view project"?

[@Webflow]

Any elements that you want to make linkable, add a link block to the page then move those elements into the link block. From there adjust the link block's setting for the target destination.

[@wooloomoodoo]

Hi Webflow, do you have any tips or details to stock images with a webflow urls on a gsheet file (7"57) ? Thanks again for those amazing tutorials :)

[@christopherthomas2990]

Question! If my project type applies to a few different filters, is there a way to have it apply to multiple?

[@Webflow]

Try using the Multi-reference field instead of the single reference field. Here is an article to help you with this: university.webflow.com/lesson/multi-reference-field Hope this helps :)

[@christopherthomas2990]

@@Webflow thank you! :)

[@choongching]

CMD + Shft + C, and we are back!

[@jmm1620]

having trouble getting images to be the right size and match up with the project card.... is there a specific size theyre supposed to be?

[@Webflow]

Hi John! 👋 Are you using the images from the downloadable project assets from the course? Additionally, if you'd like, please post a thread with your issue and a share-only link to your project at forum.webflow.com, so our community can take a closer look.

[@marcelo-ex8zl]

I tried to install the course packages twice, and both times the csv file came completely wrong. The rows and columns were not separated correctly. So, I went into VS code and saw that the problem was that some "," and ";" were swapped, and so I fixed it. However, it seems that the links to the images are wrong, and when I try to put them in the browser an error message appears saying that access has been denied. Has anyone else had this kind of problem? (I used google translate, sorry for grammatical errors)

[@petaryakimov9386]

Have the same issue, can't link images, also when I try to upload all the images from the course it uploads only one

[@erikheuna4151]

Hello, My Project Type property doesn't show up when I try to map it in the text block. I've tried with all the other properties and it worked. Please help me thank you.

[@zarrowthehorse]

That happened to me too, I'm sure its just for this tutorial though

[@paulinenguyen6755]

@@zarrowthehorse Happened to me. Spelling was correct so I had no idea what was wrong. I went back to the CMS and hit "enter" when I named the "UX Design" and "Illustration" fields, etc. It worked when I did that. So silly.

[@ezehelizabeth1382]

@webflow I have tried adding an image under DIV block. But it’s not working. Rather the image stays inside the block. Please help.

[@Webflow]

Another option you can try is adding the image under the div block in your navigator panel. For more information about the navigator panel, check out this article: university.webflow.com/lesson/navigator Hope this helps 😀

[@abdullahalmamun8264]

Hello guys! I'm stuck here. How do you link between the projects list and the in detail project page? Please help[.

[@Webflow]

You can add a link block or a text link into your Collection. Then choose the purple pages icon, then choose the detail page. university.webflow.com/lesson/link-block Hope this helps :)

[@devsanvii]

For instance, what if I want every 2 lines the picture goes to the other side, so its like text-image then image-text and so on. is it possible doing this?

[@Webflow]

Hi Ghassan! Great question! Within collection lists, using Flexbox styles it's possible to set odd/even styling: webflow.com/feature/style-first-last-even-and-odd-items-in-collection-lists If you're having any trouble, please let our team know: university.webflow.com/support We're here to help!

[@mkrieger917]

Where are the photos linked to? I see there is a webflow address. Where can I find that? Also Having issues with the colors linking? What am I doing wrong

[@Webflow]

Project assets can be found here, wfl.io/2021-portfolio. For colors, check out this article. university.webflow.com/lesson/color-picker-overview

[@bvnger]

🗣THOSE data!

[@relaxingsleepsounds3266]

When trying to add the image below the div I am getting an error that reads "Element can not be placed in a collection list wrapper"

[@Webflow]

You'll want to drag the image in the Collection item; not the Collection list wrapper - it might help to use the Navigator on the left to more precisely place the image. 👍

[@blyskk]

Got the same issue, click on 'collection item', press ctrl+k and add image. Dragging does'nt work for me.

[@imharishmadaan]

does anyone have course link how can I learn from scratch.

[@suphisarapanmai1221]

My image isn't aligned with text boxes.. I think I did something wrong somewhere ^^;;

[@Webflow]

We'd be happy to help look into this. Can you please post a new thread about it on our Community forum? discourse.webflow.com

[@小笼包-m3o]

All images in my project turned out to be of different height, so I had to set the height for them in the settings. Was it made automatically in their project, or were their images already prepared to be the same size, before moving them to the project? Would really appreciate the answer 🙈 Great video.

[@Webflow]

If you want more control of your images width and height in your design, try using object fit. For more information, check out this article: university.webflow.com/lesson/size-settings-width-height#object-fit Hope this helps 😀

[@ellanapata267]

how do you add the cms pages into the nav bar??

[@Webflow]

First add a collection list and connect it to the projects collection. Then add your navigation links inside the collection list items. university.webflow.com/lesson/structure-and-style-collection-pages#linking-to-collection-pages

[@dilraj8842]

Anyone know how to make the "View Project" button functional?

[@Webflow]

Replace it with a text link element then you can bind the link to go to that project's page. Check out this for more details. university.webflow.com/lesson/structure-and-style-collection-pages#linking-to-collection-pages

[@ihajo]

What web browser are you using for the tutorial, it's very responsive, i have tried Safari, Firefox and Chrome and they all have some bugs that annoys me, chrome being the least one

[@هاديمحمد-و8ظ]

What is the tutorial name and how can I get it

[@Webflow]

The name of the course is "2021 design portfolio course" and you can find it here. wfl.io/2021-portfolio

[@SnowFlakes45406]

este video quedo lamentablemente viejo sirve solo hasta la importacion de archivos CSV luego cambio toda la ui del programa de edicion y las opci0ones no son las mismas ojala actrualizen info

[@zarrowthehorse]

for some reason the very first image used in the tutorial keeps randomly shrinking and growing in the designer even when I'm not editing anything at all

[@zarrowthehorse]

I think I might have fixed this by resizing the image so that it's smaller and then reuploading it to the site. Weird

[@Steve-hi1db]

Do I need excel?

[@Webflow]

No. You can use any spreadsheet app to help you stay organized.

[@yeaabuddy8929]

boy the cms part was alot to take in a day

[@lifegpt]

if your updating traing could do with not getting billy Whizz need a few more seconds on anything taking forever to follow

[@NonTwinBrothers]

Imagine meeting this guy in real life, lol

[@kmibrlnd]

*THOSE* data

[@djryanashton]

Why am I only seeing one project in the list? How do I see all projects from the CMS?

[@djryanashton]

Oh - because 3 of the items were in draft on the CMS tab. I hope this helps someone like me. :0

[@romareotaphouse1485]

😂😂

[@evergreenerin]

this is hideous and it sears the retinas 🤣

[@muhammadabdulwadood7013]

TEACH SLOWLY AND GIVE ALL NECESSARY DETAILS ESPECIALLY FOR CMS. TELL US FIRST WHAT IS CMS. I SAW YOUR CMS COURSE AND IT WAS EVEN FASTER AND DIFFICULT TO UNDERSTAND.

[@Webflow]

Thanks for the feedback. We'll work on it. 🙏

[@EwaLewicka-Leniow]

When I click on the "Heading" text, I cannot see "Get the text from..." on the settings button, so I cannot change it. Did that Webflow interface changed since 2021?

[@charliemcquade7071]

Same problem here

[@jessesaunders3584]

If you click the settings button, a purple dot will appear at the top left of whatever field you're in (heading, paragraph etc.). That is where you can choose what to link it to from the CMS files.

[@beanho8614]

@@jessesaunders3584 thanks you very much! I love you

[@BenginurHajjaj]

@@jessesaunders3584 i was gonna ask same question. thanks a lot!😊