Probably the best unexpected perk about webflow is that you are turning into a front-end developer without even knowing it.
@pixelgeek5 жыл бұрын
yup! Helping graphic designers not be afraid of building for the web is one of the main benefits of the "No Code" revolution :)
@peter.dimitrov5 жыл бұрын
Nelson...you da men! Why I forgot about this..big thanks!
@juniocesar22123 жыл бұрын
thank you always Nelson. God bless you
@razzle-dazzle4 жыл бұрын
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!
@pixelgeek4 жыл бұрын
You already can! :)
@faynore8062 жыл бұрын
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 ...
@mattkeefer11074 жыл бұрын
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.
@mattkeefer11074 жыл бұрын
I actually figured it out. lol. .collection-item-2:nth-child(1n+3) {flex: 0 100%;}
@pixelgeek4 жыл бұрын
@@mattkeefer1107 great job! 😁👏
@mattkeefer11074 жыл бұрын
@@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??
@Bonakaren3 жыл бұрын
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?
@crooker25 жыл бұрын
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.
@pixelgeek5 жыл бұрын
Good point. I'll make a video on that soon 😁
@crooker25 жыл бұрын
@@pixelgeek Awesome! Thanks for your great material. Webflow keeps getting better and better.
@ryemon134 жыл бұрын
Can anyone point me to this video please!!!!!!!!! I can't find it. Thank you!
@crooker24 жыл бұрын
@@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.
@ryemon133 жыл бұрын
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
@austinjames74765 жыл бұрын
Would you be able to dynamically apply a featured class to an item in the list and do it based on that?
@pixelgeek5 жыл бұрын
Yes, but with jQuery
@obrothaz2 жыл бұрын
Can this be used to display products for my ecommerce shop?
@mikesellrTV5 жыл бұрын
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.
@raynalreyes49074 жыл бұрын
I don't think you can do that with a Collection list Grid
@herediandesign4 жыл бұрын
@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?
@NateFenimore3 жыл бұрын
Did you ever solve this?
@herediandesign3 жыл бұрын
@@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!
@herediandesign3 жыл бұрын
@@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.
@mattsymonds96525 жыл бұрын
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?
@pixelgeek5 жыл бұрын
Yup. That's another way. I'll make a video about it soon 😁👍
@chimaokehie73305 жыл бұрын
Absolutely! This is what I've always used. I helps that you don't have to use any custom code.
@vain3d9734 жыл бұрын
5:58 row row row your boat
@catherinemcclure24864 жыл бұрын
I'm trying to get my cms list to alternate. Tried everything the forum suggested but it doesn't work! I need help pixelgeek.
@pixelgeek4 жыл бұрын
Can you post your question on my chat board? chat.pixelgeek.community/c/project-help
@catherinemcclure24864 жыл бұрын
@@pixelgeek I posted my question to the chat board. Thanks!
@SeanKearney4 жыл бұрын
We should always "Let the children rap!"
@alzibaba4 жыл бұрын
Ha ha I heard it exactly this way too 🤣👍
@Rocadamis4 жыл бұрын
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.
@pixelgeek4 жыл бұрын
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
@Rocadamis4 жыл бұрын
@@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.