Build a website cards section - Webflow 101 (Part 4 of 10)
Websites often include card layouts to visually display different product features or pricing plans. Here we’ll build a CSS grid-based card design to display a feature image, heading, and paragraph, then style those using selectors and classes. And, along the way, learn about the Webflow Style Manager which gives you total control over managing classes and tags on your site.
00:00 - Introduction
00:29 - Structure
01:49 - Cards
03:57 - Styling
08:32 - Selectors
11:15 - Recap
11:39 - CTA: Share your card design using the #webflow101 on Twitter
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Go take the full course at Webflow University: wfl.io/webflow101
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
webflow
webflow
Пікірлер: 55
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
@yzz983
3 ай бұрын
Where is the style manager now? Cant find it
@benhenry321
3 ай бұрын
I hope that you hire the same cast. They're so much fun.
For anyone stuck with trying to nest multiple elements inside a grid cell, where cmd/ctrl + drag doesn't work, it's because you haven't added another div element into that cell first (in other words, a div inside a div). Once you've done that, cmd/ctrol + drag works fine. :)
@nickserrano2793
7 ай бұрын
i was searching right now, thank you :)
@yeevang124
7 ай бұрын
Thank you so much! I was struggling with that thinking, what am I doing wrong.
@EJ-yn5eu
6 ай бұрын
Thank you! I was trying to understand the same issue!
@yzz983
3 ай бұрын
Thank you so much!!!! I was stuggling for a long while!!!! God bless you
@wifiwarlord
Ай бұрын
Thank you. I knew the comments on YT would have the answer. Cheers
They have such a great personalities I cannot stop watching and the production's amazing.
Best tutorials ever, you guys have the perfect mix of teaching while being humorous and engaging. Keep it up!
@amireljayli
6 ай бұрын
Facts
This is really amazing. I love the fact that you guys are humorous, it keeps the lecture interesting
By far the best tutorials in this part of the milky way ..
Such marvellous course, interesting, fun and innovator!
woo amazing, the best tutor.
Thank you for help ☺️
Interface problem? March 2024 -- When adding a div to a cell with elements inside as in "Card" shown above, it will not copy and paste correctly. It copies and pastes to the next cell, then the next paste goes to the first cell....? If I make the div with elements (card) outside the grid, then copy - it will paste into each grid cell as shown above.
@siatkapomaranczy6047
3 ай бұрын
Thank you! It works!
@user-sj9ne2ru1y
3 ай бұрын
Amazing, was literally just stuck on the same thing!
Thanks
i just designed something beautiful following these tut
@amireljayli
6 ай бұрын
Awesome. What did you make?
how to make card manual? i can't use drag + ctrl
When adding a div block to the container, and then selecting grid, it stays named as "div block" in the navigator. It doesn't change to "grid" like in this video.
@Webflow
Жыл бұрын
You can rename the class to say "Grid". Alternatively you can drag in a grid element into the container. Hope this helps :)
@zorzmorz
Жыл бұрын
@@Webflow And when i change div' class name to 'Card' then the whole Grid' class changes to 'Card' and vice versa. I'd like my grid to have class 'Grid' and div cards to have class 'Card'. HOw would i fix that?
@Webflow
Жыл бұрын
Can you post this question and your project's read-only link on our forum? That way we can see exactly what you're talking about. discourse.webflow.com university.webflow.com/lesson/share-your-site
i love you
i finshed it and so nice and enjoyable course . what i can study after it?
@Webflow
Жыл бұрын
After you finish this course, you can learn even more by going through either the Figma to Webflow course or the Freelancer's Journey. university.webflow.com/courses/figma-to-webflow university.webflow.com/courses/the-freelancers-journey
Is there a way to have 2 cards in a card?
how you did Magical Post Production that change text and headings automatically
@matakjackson5751
4 ай бұрын
I am looking for the answer too
Hey guys. I've tried a bunch to CMD and move the elements into one card, but they are going nowhere. Any thoughts?
@benhenry321
3 ай бұрын
Have you tried a different browser? I was having problems with CMD and move. A different browser worked for me.
Where can I find the text used in the grids?@Webflow
@Webflow
Жыл бұрын
You can find it from the cloneable project here: webflow.com/made-in-webflow/website/calendar-8-interactions
the copy and paste seems to be not working anymore, whats the alternative?
Why did they get rid of style editor?
I'm trying to click command and drag my text into my grid that contains a photo, but nothing is happening. Did they switch the hotkey for this?
@BlinkslowMarketing
Жыл бұрын
I figured it out! This is what happens when you don't listen fokes!
@LeahKleindesign
9 ай бұрын
Do you mind telling me what I'm doing wrong?? @@BlinkslowMarketing
@wayynovu
9 ай бұрын
how ? bc even we use command + drag it doesn't work@@BlinkslowMarketing
@JoshJetStream
8 ай бұрын
Super weird why @BenOliveto didn't just say what the solution was, but for anyone stuck on this, it's not working for you because you haven't added another div element into that cell first (in other words, a div inside a div). Once you've done that, cmd/ctrol + drag works fine. :)
❤❤❤❤i will like to work as your designer
Is Sara exceptionally Pretty or am I simply overstating it? Her face seems like it's been expertly designed by top-notch professionals. Her beauty is so remarkable, it's almost like something out of a sci-fi movie.
The thing about humour is that it is not universal, not everyone will like it. I can see that the hosts are nice, warm people but it's a no for me. To me, this type of humour comes of as try-hard and annoying. I keep watching the tutorials because they are indeed informative but I CRINGE constantly. I whish you could make them more neutral. Again, the informative value is great, though.
4:39 The constant talk in is not cute, is not funny, it's annoying. I really have to concentrate to follow you.
@Webflow
10 ай бұрын
Thanks for the feedback. 🙏
@LeahKleindesign
9 ай бұрын
@@Webflow I, for one, think it is cute! The tutorial is SO informative I'm fine with a little chit chat!
@chandlerrezac3654
8 ай бұрын
I am sure you are fun at parties
@adriaanswanepoel9320
6 ай бұрын
@@chandlerrezac3654I was thinking the exact same thing :)
@mxvzn
6 ай бұрын
bro you are no fun, the talk is needed for those with short attention span, it's fun and funny and definitely does not bother most of the people 😓