Tap to unmute

How to Webflow: Creating unique collection list layouts - Tutorial (2019)

  Рет қаралды 11,001

pixelgeek

pixelgeek

Күн бұрын

Пікірлер: 41
@vaniar.1583
@vaniar.1583 5 жыл бұрын
🤯🤯🤯 this opens a HUGE 🚪 🙏🏻🙏🏻🙏🏻
@RalucaM
@RalucaM 5 жыл бұрын
Probably the best unexpected perk about webflow is that you are turning into a front-end developer without even knowing it.
@pixelgeek
@pixelgeek 5 жыл бұрын
yup! Helping graphic designers not be afraid of building for the web is one of the main benefits of the "No Code" revolution :)
@peter.dimitrov
@peter.dimitrov 5 жыл бұрын
Nelson...you da men! Why I forgot about this..big thanks!
@juniocesar2212
@juniocesar2212 3 жыл бұрын
thank you always Nelson. God bless you
@razzle-dazzle
@razzle-dazzle 4 жыл бұрын
Awesome info. Would be cool to be able to edit the grid as you would a non collection list, but ya can’t have everything now!
@pixelgeek
@pixelgeek 4 жыл бұрын
You already can! :)
@faynore806
@faynore806 2 жыл бұрын
Great video, thanks! Question, would it be possible to have like a 3 - 2 - 3 - 2 .. etc, layout, instead of a 1 - 2 ? I tried it the way you showed here, but since its 'every third item', this didn't really work for me ...
@mattkeefer1107
@mattkeefer1107 4 жыл бұрын
This was extremely helpful! I'm trying to do this same application but have the first row with two equal columns and the third row take up the whole width at 100%... Sorry if this is a stupid question but I'm still learning custom coding.
@mattkeefer1107
@mattkeefer1107 4 жыл бұрын
I actually figured it out. lol. .collection-item-2:nth-child(1n+3) {flex: 0 100%;}
@pixelgeek
@pixelgeek 4 жыл бұрын
@@mattkeefer1107 great job! 😁👏
@mattkeefer1107
@mattkeefer1107 4 жыл бұрын
@@pixelgeek The only problem is it doesn't repeat that when I add more item lists. Your code: .collection-item-2:nth-child(3n+1) {flex: 0 100%;} Works when I add more items but when changed it to this code: .collection-item-2:nth-child(1n+3) {flex: 0 100%;} It goes back to 100%... maybe I don't understand the code??
@Bonakaren
@Bonakaren 3 жыл бұрын
I saw the same blog layout in Saasly template. It looks like they have a different approach. They added a collection list wrapper with layout Full Width, Item Limit - Show 1. Then they added another collection list (same source, same layout, Item limit show 2, start at 2), and the next element (collection list) is a grid. Isn't it another way around?
@crooker2
@crooker2 5 жыл бұрын
This is not what he asked for. He wants to span two columns on 'featured' posts, not every third post. There needs to be a way to set simple conditional statements in webflow (if, then, else). This kind of functionality would add complexity to WF, but also would open up a world of new design possibilities as well. I. E. In a collection... If 'featured post' equals true, set class to 'featured'... And if 'body text', truncate output to 150 characters with an ellipsis.
@pixelgeek
@pixelgeek 5 жыл бұрын
Good point. I'll make a video on that soon 😁
@crooker2
@crooker2 5 жыл бұрын
@@pixelgeek Awesome! Thanks for your great material. Webflow keeps getting better and better.
@ryemon13
@ryemon13 4 жыл бұрын
Can anyone point me to this video please!!!!!!!!! I can't find it. Thank you!
@crooker2
@crooker2 4 жыл бұрын
@@ryemon13 I agree. I would like to see this too. It would require setting a field in a collection for FEATURED, and when true, adding a specific class to that post. I don't believe you can affect classes with dynamic variables, but I could be wrong.
@ryemon13
@ryemon13 3 жыл бұрын
Dave Cruickshank yeah... I thought he had made one already since it’s been a year, but another fix I thought about is if Webflow could enable collection items to be positioned into the grid areas! No idea why it’s not a thing in the beginning because they advertise for the dynamic and intuitive grid
@austinjames7476
@austinjames7476 5 жыл бұрын
Would you be able to dynamically apply a featured class to an item in the list and do it based on that?
@pixelgeek
@pixelgeek 5 жыл бұрын
Yes, but with jQuery
@obrothaz
@obrothaz 2 жыл бұрын
Can this be used to display products for my ecommerce shop?
@mikesellrTV
@mikesellrTV 5 жыл бұрын
Unless I’m missing somrthing here I think you could do the same thing if you span the first element over two columns in a grid.
@raynalreyes4907
@raynalreyes4907 4 жыл бұрын
I don't think you can do that with a Collection list Grid
@herediandesign
@herediandesign 4 жыл бұрын
@pixelgeek how would you do this so that 1st row is 100%, 2nd is 50-50% 3rd is 75-25%, 4th is 50-25-25% and repeat in that order?
@NateFenimore
@NateFenimore 3 жыл бұрын
Did you ever solve this?
@herediandesign
@herediandesign 3 жыл бұрын
@@NateFenimore I did! It’s been a while, so I can’t recall exactly. I have virtually no experience using html but I tried my hand at it and got it working. I’ll look for the code and share very soon!
@herediandesign
@herediandesign 3 жыл бұрын
@@NateFenimore So the way I did it was I slightly modified his code, to fit my needs. Again, I have no experience with html, so I'm sure there is a more elegant code for this: .collection-item-4:nth-child(1n) {flex: 0 100%; height: 60vh;} .collection-item-4:nth-child(2n) {flex: 0 50%; height: 45vh;} .collection-item-4:nth-child(3n) {flex: 0 50%; height: 45vh;} .collection-item-4:nth-child(4n) {flex: 0 70%; height: 45vh;} .collection-item-4:nth-child(5n) {flex: 0 30%; height: 45vh;} .collection-item-4:nth-child(6n) {flex: 0 50%; height: 45vh;} .collection-item-4:nth-child(7n) {flex: 0 25%; height: 45vh;} .collection-item-4:nth-child(8n) {flex: 0 25%; height: 45vh;} I repeated this code twice, so that If I had more than 8 photos, it would just start the pattern over again i.e. 100% width, 50% and 50%, 70% and 30%, etc.
@mattsymonds9652
@mattsymonds9652 5 жыл бұрын
Hmm, couldn't you just add a collection list that pulls through a single featured item, and then add another collection list for all of the posts below?
@pixelgeek
@pixelgeek 5 жыл бұрын
Yup. That's another way. I'll make a video about it soon 😁👍
@chimaokehie7330
@chimaokehie7330 5 жыл бұрын
Absolutely! This is what I've always used. I helps that you don't have to use any custom code.
@vain3d973
@vain3d973 4 жыл бұрын
5:58 row row row your boat
@catherinemcclure2486
@catherinemcclure2486 4 жыл бұрын
I'm trying to get my cms list to alternate. Tried everything the forum suggested but it doesn't work! I need help pixelgeek.
@pixelgeek
@pixelgeek 4 жыл бұрын
Can you post your question on my chat board? chat.pixelgeek.community/c/project-help
@catherinemcclure2486
@catherinemcclure2486 4 жыл бұрын
@@pixelgeek I posted my question to the chat board. Thanks!
@SeanKearney
@SeanKearney 4 жыл бұрын
We should always "Let the children rap!"
@alzibaba
@alzibaba 4 жыл бұрын
Ha ha I heard it exactly this way too 🤣👍
@Rocadamis
@Rocadamis 4 жыл бұрын
Hmmm... that doesn't really answer his question. He wants a CMS file set with a featured switch to determine which blog gets a span across two columns. You've just made every other column a span regardless of the featured CMS switch.
@pixelgeek
@pixelgeek 4 жыл бұрын
Thanks for calling me out. I realized that after I made the video for him 😅 But this is still tip that may be useful for some
@Rocadamis
@Rocadamis 4 жыл бұрын
@@pixelgeek It is actually. I learn even when you make mistakes. Ha ha ha! All of your videos are extremely useful Nelson! I just started with webflow about a month ago (many years as a CSS coder), so I have a few years of videos to binge watch. Keep up the great work and thank you for all your help. P.S. I want the t-shirt that says “Design Responsively"! Love it.
How to Webflow: Page transitions - Tutorial (2019)
12:34
pixelgeek
Рет қаралды 15 М.
How to Webflow: Infinite marquee - Tutorial (2019)
10:37
pixelgeek
Рет қаралды 28 М.
Мен атып көрмегенмін ! | Qalam | 5 серия
25:41
Cat mode and a glass of water #family #humor #fun
00:22
Kotiki_Z
Рет қаралды 37 МЛН
Top 3 Tricks for Collection Lists in Webflow
15:43
Timothy Ricks
Рет қаралды 26 М.
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 667 М.
How to Webflow: Instant, on-page search - Tutorial (2019)
10:46
How To Set Up CMS Collection In Webflow (Full Tutorial)
14:39
Alex Leischow
Рет қаралды 6 М.
Responsive Typography 2020 (Font Size Scaling in Webflow)
9:27
Timothy Ricks
Рет қаралды 54 М.
The Best Method of Scroll Snapping! Easy Webflow Interactions
7:50
Anansi Creative
Рет қаралды 35 М.
Мен атып көрмегенмін ! | Qalam | 5 серия
25:41