Bento Grids - Big WordPress Design Trend for 2024 🔥

Поделиться
HTML-код
  • Опубликовано: 16 янв 2025

Комментарии • 74

  • @Hebhansen
    @Hebhansen Год назад

    Is there a way to magically query fx products into the grid. Such as new arrival or maybe random from a category?

    • @jamiewp
      @jamiewp  Год назад

      Hi, you could do it if you use the query loop block and a little css grid code , or you could use my Gutenberg Pro plugin :) www.pootlepress.com/2023/10/gutenberg-pro-gets-fancy-post-grids/

    • @Hebhansen
      @Hebhansen Год назад

      Ok thx.
      So query inside their respective cover block, and then css each cover for size/float. And then no columns/rows

  • @GokhanDamgaci
    @GokhanDamgaci 19 дней назад

    It's a great looking layout. I will definitely use it. Thanks for this helpful tutorial, Jamie! 🙏

  • @AdamWeeks610
    @AdamWeeks610 Год назад +2

    You are a machine! Another great video Jamie. Well done.

    • @jamiewp
      @jamiewp  Год назад

      Thanks Adam 🙏

  • @jamiewp
    @jamiewp  Год назад +6

    Hi Everyone....fyi I'm publishing a website recreation video this Thursday for procreate.com/

  • @JohnHelyar
    @JohnHelyar Год назад

    Well done Jamie great video as per normal I love yor videos they are quick and straight to the point thank you.

    • @jamiewp
      @jamiewp  Год назад

      Thanks John 😊

  • @MeaganHanes
    @MeaganHanes Год назад

    Another edutaitional WordPress vid! Thanks for continuing to be a thought leader and inspiration source in this space 💖

    • @jamiewp
      @jamiewp  Год назад

      thanks Meagan 😀

  • @mivibzzz
    @mivibzzz 5 месяцев назад

    What a great simple video... I wish it wasn't shown to me 2 hours into serching for it :)

    • @jamiewp
      @jamiewp  5 месяцев назад

      thank you :) Glad it was helpful

  • @ManassehElBey
    @ManassehElBey Год назад

    Beautiful! I love the look. Great tutorial!

  • @SingaporeMathsAcademyUK
    @SingaporeMathsAcademyUK Год назад

    So glad you've done this, thank you!

  • @cromrin
    @cromrin 7 месяцев назад

    Just learn css lol, but really was forced bcs of my clients to learn how to use Wordpress and your videos help a lot thanks!

    • @jamiewp
      @jamiewp  7 месяцев назад

      That's great to hear :)

  • @wordpress-dt7xt
    @wordpress-dt7xt Год назад

    I love that design

  • @montyksycki4092
    @montyksycki4092 8 месяцев назад

    THANK YOU!!! :) HAVE A GREAT DAY!!! ENJOY ~ PEACE :)

  • @visualmodo
    @visualmodo Год назад

    Really good content! =D

  • @19mad92
    @19mad92 6 месяцев назад

    amazing! Thank you! It would be cool if you could cover 5 design trends of 2024 and recreate them in a video. One big trend is the off canvas menu with entry animation, another one is fixed floating navigation bars on the bottom or right side.

    • @jamiewp
      @jamiewp  5 месяцев назад

      Great idea

  • @oliverreese272
    @oliverreese272 8 месяцев назад

    Hi Jamie. Thanks for all your very good Tipps. How can I get more control like the size by cover blocks on mobile?

  • @FrancescoCecchetti
    @FrancescoCecchetti 4 месяца назад

    This is great!
    The only problem I find at the moment is related to the radius of the tile: I don't get the option to change it, and I'm sure it's something simple I'm missing, but even looking around on the web, I can't solve the puzzle!
    I don't know if anyone else had this problem

  • @peternilsson2372
    @peternilsson2372 Год назад +1

    A really cool and visual idea! I wonder! Is it possible to make the blocks clickable?

    • @jamiewp
      @jamiewp  Год назад +2

      Good question- theres no out of the box way to do this , but i will do some digging

    • @peternilsson2372
      @peternilsson2372 Год назад

      I think this would be great for example photographers to direct the customer to different services. Like having one box for wedding and one for portraits, one for prices etc. It would be pleasing for the eyes and an easy way for the customer to click on the boxes and be directed to the service they are most interested in. There are of course the nav menu but this is more direct and connected to what you see in front of you.@@jamiewp

    • @Stewie4238
      @Stewie4238 11 месяцев назад

      @@jamiewp news?

    • @susannalarsdotter1915
      @susannalarsdotter1915 10 месяцев назад

      @@jamiewp This is an often wished for feature in issues as well as in support but no PR has gotten there yet. A few css tricks have been provided but they lack easily made hover-effects (so for your example the ".full-link" css trick would work nicely.

    • @jamiewp
      @jamiewp  10 месяцев назад

      @@susannalarsdotter1915 i found this recently which solves the problem ruclips.net/video/yBA8x3qL32M/видео.htmlsi=zwFs5hPSf1Yz1Mj2 :)

  • @maxziebell4013
    @maxziebell4013 Год назад

    Nice, one.

  • @tamamomumae
    @tamamomumae 6 месяцев назад

    Good

  • @lisastangroom67
    @lisastangroom67 Год назад +1

    As I already said below, many thanks for this video. I've already started trying it out on my site. However, I can't see how to create a link from a cover to another page, only from the text or a button within the cover. Any suggestions about the best way to make the whole cover a link?

    • @jamiewp
      @jamiewp  Год назад

      Yes at the moment this would need a little custom dev

  • @RediscoveredTruths
    @RediscoveredTruths 11 месяцев назад

    Great video! I have made the switch from Elementor to Gutenberg for my site and future client sites after watching your videos. Once I wrapped my head around Gutenberg, I can build the same style of site in less time and with less bloat. The only question I have is in Twenty Twenty-four, where do I change the accent color for hover on the navigation menu in the header? I've looked everywhere but I don't think it's there..

    • @jamiewp
      @jamiewp  11 месяцев назад +1

      Thank you 🙏Check out this video about a free plugin that makes accent colours easy for the navigation block with the twenty twenty four theme (and lots of other cool stuff) ruclips.net/video/yBA8x3qL32M/видео.htmlsi=BX4ZsTgJiuvdAbnN

    • @RediscoveredTruths
      @RediscoveredTruths 11 месяцев назад

      Thank you for leading me to that video. I watched it and I clicked the link to your demo and found the issue. It was the style I picked that didn't have the accent color as an option. Why doesn't every style include accent color? Strange.@@jamiewp

  • @imeshkoff
    @imeshkoff 6 месяцев назад

    Hi Jamie! I'm working on a portfolio now and I have a question - can I somehow build a bento block so that pictures and titles are automatically pulled from my works (posts or pages)? I will be grateful for your help😎

    • @jamiewp
      @jamiewp  6 месяцев назад

      Check out my Gutenberg pro plugin or you can also do with some fancy css grid magic 😉

  • @iktech117
    @iktech117 Год назад

    Can we put single post per rid section ?

  • @oliverreese272
    @oliverreese272 Год назад

    Hi Jamie.
    I've been following you for a long time and always love your tips. I have two questions that you could perhaps show in a video. In relation to twenty twenty four.
    1) how do you get 4 columns on the mobile phone to 2 columns?
    2.) How can you customise the mobile menu? E.g. full screen, centred, button
    I look forward to your answer.
    Best regards
    Oliver

    • @jamiewp
      @jamiewp  Год назад +1

      great ideas 👍here's an article i wrote about question. 1) www.pootlepress.com/2023/05/wordpress-gutenberg-responsive-columns/

    • @oliverreese272
      @oliverreese272 Год назад

      thanks@@jamiewp but how do you get 4 columns on desktop into 2x2 columns on mobile?

  • @antware
    @antware Год назад

    Nice. Gutenberg coming along nicely (slowly) but nicely. If I wanted to add some custom CSS what would you recommend? I don't want a child theme.

    • @jamiewp
      @jamiewp  Год назад

      A few options - but maybe just add in the. normal custom place for css in global styles (if using a block theme)

    • @lisastangroom67
      @lisastangroom67 Год назад

      Hi Jamie @jamiewp, Thank you for yet another concise and useful video. With regards to this particular question, can you confirm that by "normal custom place for css in global styles" you mean the "ADDITIONAL CSS CLASS(ES)" box that is provided in the "Advanced" section of each individual block we add to a page? Or can we only add custom CSS in the Global Styles part of the site in order to avoid having to create a child theme? I've been avoiding adding any custom CSS to my site out of fear that everything will be reset when my theme updates! Thank you, Lisa

  • @wordpress-dt7xt
    @wordpress-dt7xt Год назад

    please do a full ecommerce store design

    • @jamiewp
      @jamiewp  Год назад

      any specific ideas?

    • @wordpress-dt7xt
      @wordpress-dt7xt Год назад

      actually I want to learn more about the e commerce plugins and how to setup them correctly....anyway now adays many people are launching course playlist that how to start web design agency from scratch..I think it will be good for you since your design skills are out of this world you will get more viewers and subscribers @@jamiewp

  • @franciscojmorales2446
    @franciscojmorales2446 Год назад

    Could you put a template for download? a child for example

  • @PaulShadwell
    @PaulShadwell Год назад

    How do I get the Border option to show up under Cover block style? I only see Dimensions and under there is only the Minimum height of cover.

    • @jamiewp
      @jamiewp  Год назад

      What theme are you using? That might be the issue.

    • @jamiewp
      @jamiewp  Год назад

      ps you can turn on settings in theme.json file - here's a quick primer www.pootlepress.com/2023/11/understanding-the-theme-json-file-in-a-wordpress-gutenberg-theme/

    • @PaulShadwell
      @PaulShadwell Год назад

      Ok, I see the problem. It is very much theme-dependent. Running 2024 works perfectly but change to anything else, and it's very hit or miss as to what you can do.

    • @jamiewp
      @jamiewp  Год назад

      it's a core setting, but the theme just needs to turn on the setting in theme.json - be interested to know which themes aren't doing this for you?@@PaulShadwell

    • @PaulShadwell
      @PaulShadwell Год назад

      Thanks @@jamiewp the information on your website is very useful. It's actually a theme I had been working on that is using the classic theme method. I have been working on a Block Theme equivalent and after reading your blog I see where the problem is. The classic theme, of course, is not using theme.json but the new one is and was missing the relevant entries. I have now added them. I clearly need to study new block theme development.

  • @mobad_life
    @mobad_life 7 месяцев назад

    what kind of builder is that?

    • @jamiewp
      @jamiewp  7 месяцев назад

      Its just WordPress

    • @mobad_life
      @mobad_life 7 месяцев назад

      @@jamiewp of course it is , but what is the best drag and drop builder inside wordpress it is kinda confusing for a beginner like me , thanks for the reply😊

    • @jamiewp
      @jamiewp  7 месяцев назад

      @@mobad_life 👍

  • @thelongarmmarine
    @thelongarmmarine Год назад +2

    Interesting & nice concept, but cell phones reduce it to one column view…still nice tho…might be useful for an e-commerce store too…

    • @jamiewp
      @jamiewp  Год назад +1

      Yup good point 👍 Gutenberg uses Flexbox for the columns block, so you could maintain the columns on mobile (but it's probably better if they stack)

  • @dwkillo
    @dwkillo 7 месяцев назад

    You help us, we help you. Liked and suscribed

    • @jamiewp
      @jamiewp  7 месяцев назад

      wonderful - thank you 🙏

  • @StefanoFerro
    @StefanoFerro Год назад

    Amazing look and easy work Jamie. Great inspiration