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

  • @Webflow
    @Webflow4 ай бұрын

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

  • @yzz983

    @yzz983

    3 ай бұрын

    Where is the style manager now? Cant find it

  • @benhenry321

    @benhenry321

    3 ай бұрын

    I hope that you hire the same cast. They're so much fun.

  • @JoshJetStream
    @JoshJetStream8 ай бұрын

    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

    @nickserrano2793

    7 ай бұрын

    i was searching right now, thank you :)

  • @yeevang124

    @yeevang124

    7 ай бұрын

    Thank you so much! I was struggling with that thinking, what am I doing wrong.

  • @EJ-yn5eu

    @EJ-yn5eu

    6 ай бұрын

    Thank you! I was trying to understand the same issue!

  • @yzz983

    @yzz983

    3 ай бұрын

    Thank you so much!!!! I was stuggling for a long while!!!! God bless you

  • @wifiwarlord

    @wifiwarlord

    Ай бұрын

    Thank you. I knew the comments on YT would have the answer. Cheers

  • @raswonders
    @raswonders8 ай бұрын

    They have such a great personalities I cannot stop watching and the production's amazing.

  • @CuddyLife
    @CuddyLife Жыл бұрын

    Best tutorials ever, you guys have the perfect mix of teaching while being humorous and engaging. Keep it up!

  • @amireljayli

    @amireljayli

    6 ай бұрын

    Facts

  • @adepojuquadri8280
    @adepojuquadri8280 Жыл бұрын

    This is really amazing. I love the fact that you guys are humorous, it keeps the lecture interesting

  • @olivermusic8774
    @olivermusic8774 Жыл бұрын

    By far the best tutorials in this part of the milky way ..

  • @Chaves.B.
    @Chaves.B. Жыл бұрын

    Such marvellous course, interesting, fun and innovator!

  • @learnwithmijan
    @learnwithmijan6 ай бұрын

    woo amazing, the best tutor.

  • @younesshaida6369
    @younesshaida63694 ай бұрын

    Thank you for help ☺️

  • @electricphoto
    @electricphoto3 ай бұрын

    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

    @siatkapomaranczy6047

    3 ай бұрын

    Thank you! It works!

  • @user-sj9ne2ru1y

    @user-sj9ne2ru1y

    3 ай бұрын

    Amazing, was literally just stuck on the same thing!

  • @Slampty
    @Slampty5 ай бұрын

    Thanks

  • @darlingtonsabali5371
    @darlingtonsabali53718 ай бұрын

    i just designed something beautiful following these tut

  • @amireljayli

    @amireljayli

    6 ай бұрын

    Awesome. What did you make?

  • @egisr
    @egisr9 ай бұрын

    how to make card manual? i can't use drag + ctrl

  • @bungus3335
    @bungus3335 Жыл бұрын

    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

    @Webflow

    Жыл бұрын

    You can rename the class to say "Grid". Alternatively you can drag in a grid element into the container. Hope this helps :)

  • @zorzmorz

    @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

    @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

  • @rafkrm
    @rafkrm Жыл бұрын

    i love you

  • @user-ww2hd7gk7f
    @user-ww2hd7gk7f Жыл бұрын

    i finshed it and so nice and enjoyable course . what i can study after it?

  • @Webflow

    @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

  • @adelamincea
    @adelamincea7 ай бұрын

    Is there a way to have 2 cards in a card?

  • @unknowntraveler6406
    @unknowntraveler64065 ай бұрын

    how you did Magical Post Production that change text and headings automatically

  • @matakjackson5751

    @matakjackson5751

    4 ай бұрын

    I am looking for the answer too

  • @MichelleGasparovic
    @MichelleGasparovic9 ай бұрын

    Hey guys. I've tried a bunch to CMD and move the elements into one card, but they are going nowhere. Any thoughts?

  • @benhenry321

    @benhenry321

    3 ай бұрын

    Have you tried a different browser? I was having problems with CMD and move. A different browser worked for me.

  • @zainn24
    @zainn24 Жыл бұрын

    Where can I find the text used in the grids?@Webflow

  • @Webflow

    @Webflow

    Жыл бұрын

    You can find it from the cloneable project here: webflow.com/made-in-webflow/website/calendar-8-interactions

  • @DigitalhubAgency
    @DigitalhubAgencyАй бұрын

    the copy and paste seems to be not working anymore, whats the alternative?

  • @JoWhKeJo
    @JoWhKeJo8 ай бұрын

    Why did they get rid of style editor?

  • @BlinkslowMarketing
    @BlinkslowMarketing Жыл бұрын

    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

    @BlinkslowMarketing

    Жыл бұрын

    I figured it out! This is what happens when you don't listen fokes!

  • @LeahKleindesign

    @LeahKleindesign

    9 ай бұрын

    Do you mind telling me what I'm doing wrong?? @@BlinkslowMarketing

  • @wayynovu

    @wayynovu

    9 ай бұрын

    how ? bc even we use command + drag it doesn't work@@BlinkslowMarketing

  • @JoshJetStream

    @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. :)

  • @beloveddigital
    @beloveddigital9 ай бұрын

    ❤❤❤❤i will like to work as your designer

  • @SaadEla09
    @SaadEla098 ай бұрын

    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.

  • @chartamad6595
    @chartamad65959 ай бұрын

    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.

  • @ikemkrueger
    @ikemkrueger10 ай бұрын

    4:39 The constant talk in is not cute, is not funny, it's annoying. I really have to concentrate to follow you.

  • @Webflow

    @Webflow

    10 ай бұрын

    Thanks for the feedback. 🙏

  • @LeahKleindesign

    @LeahKleindesign

    9 ай бұрын

    @@Webflow I, for one, think it is cute! The tutorial is SO informative I'm fine with a little chit chat!

  • @chandlerrezac3654

    @chandlerrezac3654

    8 ай бұрын

    I am sure you are fun at parties

  • @adriaanswanepoel9320

    @adriaanswanepoel9320

    6 ай бұрын

    @@chandlerrezac3654I was thinking the exact same thing :)

  • @mxvzn

    @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 😓

Келесі