Pinterest Grid With Webflow
HTML-код
- Опубликовано: 29 июл 2019
- Learn how to build Custom designed websites with Webflow:
zpr.io/g4WCp
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj
3 years later and this video just saved me a ton of time and frustration. Thanks for the video🙏
Gosh, I was just working on my first project that required this grid for a CMS page. You're the best for posting this tutorial Ran, I would have never figured out I can do that from type settings...
Thanks so much! I spent lots of time trying to figure out the gallery but this works 10 times better!
Always nice to see how things are done!
amazing workaround! was looking all over for this thank you
Awesome pro hack with the CMS and text layout adjustment. All your hard work is greatly appreciated!! Also, I'm loving the class. You're last marketing push paid off!
Thanks Tommy!
Wow! thanks so much for the power tips, Ran!!!
can't believe how simple this was. You saved me so much time :D
Now THAT is dope! Hey hanks for the share Ran 😎🔥👌
Amazing! I was trying to use grid for my portfolio site. But this saved a ton of my time.
The simplicity is magnifique 🙌🏽
Oooh, cool! I didn't know this can be done so easily! Thanks man!
this video is absolutely awesome. thank you so much
Great hack Ran! Very Useful.
That’s so smooth.
Thank you for making this video!
Wow thank you so much! Exactly what I needed!
Great tutorial! Thanks!
Very helpful Ran.. thanks!!!!!!!!
OMG THANK YOU! I've been struggeling to get this done with javascript and it was buggy as hell: this is SOOO much better!! Thank you Thank you!
Oh that's useful! I'm gonna try this right away :)
Really Helpful, Thank you
Really...REALLY...helpful video. Thanks a lot!
Thanks for sharing - brilliant!
That's ridiculous. I spent a whole morning trying on my own. I'm speechless!!!
It's a great Webflow hack! Btw, If someone here is wondering, you need to add the typography column display to the collection list for dynamic images/projects ect..
I forgot how fast you are using webflow, i remember one video of you showing webflow to Travis Neilson that video was the eyeopener for me. Great tip, i was struggling to get the masonry js on my project.
Oh man, this one I really love👌💪
Thank you, this is amazing.
Thanks Ran
You're a god damn magician. God bless you.
Wow!! Thank you!
hey flux! nice video! How can i have a horizontal order through the columns if I use a collection list? Also, Is it possible to have pictures with different heights even when using a collection list? cheers!!!
What camera are you using? It looks amazing, also great content :)
Thank you !!
That was crazy! You weren't joking about two minutes.
Holy Shit. You just blew my mind! Thank you soooo much!
Ahh I was searching for exactly this for hours, and here we are 3 minutes in and I have exactly what I needed. This was a lifesaver and the easiest hack ever- not sure how you came up with it but thank you so, so much!!!
Ran I don't know how to say this but.... I love you man. Thank you so much for this haha!
I am warming up to him too.
AWESOME
Hi! Really love your content and wanted ask if you made a tutorial on a grid like this but horizontal. Also as this 3 column grid occupies 100vw, in coding it would be easy but I just don't manage to add the logic here : So I want to have the grid take 100vw in a div and a hidden sticky div that takes 30vw and that appears on click, when it appears it pushes the content, so squeezes it. would you know how to proceed? thanks in advance!
ohh, nice hack! Thanks for sharing Ran!
I was struggling with this grid this very morning. What a good coincidence. Thanks for the video as always Ran
Really appreciate ❤🎉
hey flux, I'd really like to be able to achieve this effect with light boxes, but for some reason the light boxes don’t seem to lay the same way that regular photos do, could you explain how to do this same exact thing, but make the photos clickable?
Thank you @ransegall for this tutorial, it has helped me a whole lot!
Webflow Newbie question: Was wondering if it's possible to have the images be sorted from left to right as opposed to top to bottom? Any help would be great!
Did you figure it out?
@@shivamshetty5558 Unfortunately not, any tips?
@@ianjeimz
This solves it for me, check it out
ruclips.net/video/T0aBQ0tEfZ8/видео.html
did you figure it out now? i have the same question
Hello Ran, I got a bit confused when you named the second container, the first container you named it "imagegrid" and the second named it "pinterestgrid." When did you add the second container? I watched several times and don't see the second container being added.
Is there a way to do this and incorporate the lightbox feature?
Great Video! Would this work with a multi image field from a collection item? :)
do these stack one on top of the other in phone view?
I'm adding photos and they keep moving down even when replacing an image. Is there any way to keep them fixed?
Unfortunately this feature is totally busted when you try to use them for blog style boxes. The boxes don't act anywhere near the images and they get cut off at random intervals. anyone have a solution to this?
Same here. Haha here looking for the answer
Oh I figured it out. If you style the internal boxes with an inline-block as oppose to a block then they stick together.
@@holidaaays Your comment just saved me! Thank you for sharing!
Thaaaaaank youuu!! this comment is AS IMPORTANT as the whole tutorial@@holidaaays you rock!
Hi Ran! Love those videos. Do you know a simple way to create a slider from CMS content where I can show for example 3 elements and let the user slide through the rest using arrows? I have an idea for showcasing the products this way (separated by category, so dropping a few sliders one under another). Can we add some kind of animation also? I mean: if you scroll the page to the view, the items will slide from the side one after another? Pretty deep question but I guess it will take you a few minutes only to explain that, rather than a few hours to find the solution online or figure out myself ;)
I also want to do something similar to that too
can i add text above every image in the grid? (without cms)
Sir to manage this grid with CMS??? please guide me
Hi flux, very impressed with the content you provide so regularly, will you be doing a video on getting proposals and contracts in place?
I think I already have some!
how to get the direction for the images from left to right...
how can i get all the images to be level at the bottom??
Hey Ran, I set up a grid on Webflow but when I upload images they do not fit the grid. Is there a trick or setting I can use to get photos to fit the entire column?
Same issue here. The images are cut off at the top and continues at the next column.
.img {
width: 200px;
height: 400px;
object-fit: cover;
} - try this and modify it with the desired image size in px. ".img" is the class name your photos have, so replace it.
Well, i think it is not like pinterest. maybe i am wrong. if it was like pinterest, when you change the columns from 1 to 3, the first photo of the second column should be this one with the colorful window.
Never even seen those bits.
Any way to make the images pulled from the CMS to mantain the Pinterest effect height wise?
Of course
BANG BANG BANG!
Webflow is amazing but why on earth is it so expensive ? I need a subscription for my workspace and then i need a subscription for every site which adds up quickly... few sites done and you notice that you have to pay thousands / year., the plan system feels very off but i would love to use webflow for many projects
My f'n hero. I was about to throw the cat across my office.
If I have lots of images and they are set to lazy load, then as I scroll the grid keeps reshuffling the photos and moving them around since they're different sizes. How can I fix this from happening??? Help.
yeah that's a problem I don't think you can solve using this method..
@@FluxAcademy good to know. thanks!
It seems like the downside of this hack is that you'll only get three columns when you have five items or more. Less than five items will result in two columns only.
Any workarounds?
In other words, the direction is from top to bottom and not from left to right, like it should be.
flexboxes inside grids i guess
the images are stretched for me
dam hax
I HATE the pinterist grid with a passion. It is the worst thing ever designed when you are a person who appreciates visual order.
haha, hate is bad for your health kris.. just don't use it!
@@FluxAcademy hold on I gtg laugh..
To be honest quite a useless grid, as it looks ugly and as a designer you wont use it )