WOW this WordPress Layout is Awesome 🔥

Ғылым және технология

👉 FREE THEMES www.pootlepress.com/free-word...
👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Get WordPress help : www.pootlepress.com/get-wordp...
👉 Sponsor my KZread channel www.pootlepress.com/youtube-v...
👉 Download the Card as a WordPress Block Pattern - app.instawp.io/launch?t=card-...
A big thank you to Justin Tadlock for helping me work out this one 🙏
Learn how to create a stunning card layout using only WordPress Gutenberg blocks, no CSS needed.
- This video tutorial will guide you through using group, row, and stack blocks effectively, starting with setting up your columns and adjusting backgrounds and curves for an elegant look.
- Discover the practical application of these blocks to structure your content beautifully and understand the differences between group, row, and stack blocks for better layout decisions. - I'll also share tips on content enhancement and layout fine-tuning.
- By the end of this tutorial, you'll have mastered a sophisticated card layout design, available as a block pattern for easy implementation on your site.

Пікірлер: 79

  • @BjrnErikSandbakk
    @BjrnErikSandbakk3 ай бұрын

    Gorgeous. And I also got, within a few seconds, a good explanation of what Stack and Row are and how I can use them more easily, together with Group. Thank you very much. Greetings from Norway. 😄

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Bjørn, I want to travel to Norway one day 🚀

  • @Sandrocottus-nr3cv
    @Sandrocottus-nr3cv3 ай бұрын

    Please make a video on the easiest way to implement interactivity api.

  • @richmaniow
    @richmaniow3 ай бұрын

    Great demo, I may need to watch it a few times but it's a useful reference point. It's all starting to sink in now, I was working on a page the other day and thought I'm quite enjoying this lol.. I also was pleased to see you had to move the padding slider along then back to zero to remove the padding, I thought it might be a bug my end, I couldn't figure out why it shows no padding when there's padding etc. cheers again.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Richard - yup that slider trick is not so intuitive, hopefully it will be improved soon 👍

  • @sofiapaladino5172

    @sofiapaladino5172

    Ай бұрын

    yes this confusedme a lot! im new to gutenberg ive always used elementor

  • @gashumba888
    @gashumba8883 ай бұрын

    Hi Jamie. I promise this is the last time I complain about anything. Why not use the full screen instead of leaving the wasted space showing the desktop? I know a lot of people that watch tutorials on their smartphones or tablets because that's all they have access to. Remember, I am critical because you are my number one source of Gutenberg tutorials. Again I apologize for criticizing too much. PS. This card design is MAD! I will be using it in my next project.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Noted - and thank you 🙏

  • @ziofonta
    @ziofonta3 ай бұрын

    Thank you Jamie, all your tutorials are very helpful for Wordpress webdesigners!

  • @kaysha
    @kaysha3 ай бұрын

    Great tut and design. I need a video just about groups, stacks & rows

  • @jamiewp

    @jamiewp

    3 ай бұрын

    👍

  • @SweXperts
    @SweXperts3 ай бұрын

    Things get so easy when you touch your keyboard 🙂 Thank you for this quick video tutorial!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thank you for watching 🙏

  • @nailakhalid956
    @nailakhalid9563 ай бұрын

    That's helpful Jamie... It would be great if you make a playlist of block theme (2024) videos

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Great idea 👍

  • @PhilipAllison
    @PhilipAllison3 ай бұрын

    Really great explanation of how the group, row and stack functions work.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Phillip

  • @visualmodo
    @visualmodo3 ай бұрын

    Really good work!!!

  • @JuriBinturong
    @JuriBinturong3 ай бұрын

    That was fun, thank you.

  • @gunnar9542
    @gunnar95423 ай бұрын

    Thank you for this very interesting video. Once the handling of groups, stacks and rows is clear, it opens up so many more possibilities for design!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Gunnar , glad it was helpful 👍

  • @MartijnReintjes
    @MartijnReintjes3 ай бұрын

    It's gorgeous indeed @Jamie Well done with combining the different elements. It's incredible educational to me on how to use Blocks. Thanks.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thank you 🙏

  • @tim78723
    @tim787233 ай бұрын

    This was a great clarification of using Groups too. Great stuff as always, Jamie.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Tim 👍

  • @jimjuris
    @jimjuris3 ай бұрын

    WOW! Great design. Thank you for showing how to create the design.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Jim, I really love this one too 😀

  • @Verlf
    @Verlf3 ай бұрын

    amazing, yet again!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thank you 🙏

  • @yannickmichel2566
    @yannickmichel25663 ай бұрын

    awesomeness!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thanks Yannick 🙏

  • @webdoze
    @webdoze3 ай бұрын

    Nice presentationJamie!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thank you 🙏

  • @newunderthesun7353
    @newunderthesun73533 ай бұрын

    As a design it is very niche, but the video was worth it for the other aspects of the tutorial.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thanks 🙏

  • @user-jt1qy9ix6l
    @user-jt1qy9ix6l3 ай бұрын

    Jamie, What would you say is the easiest theme to setup a website? Is there anything easier than blocksy that allows email subscription and the blog grid?

  • @gmilanisan
    @gmilanisan3 ай бұрын

    I love all of your vids. Qq: someone set up a template for me but I notice I can’t get to any of the padding and block spacing controls on the rhs that you use. Is there a smart piece of code that needs to be added to the theme or somewhere to make that essential set of controls to appear??? (Without it I can’t do >half the amazing things you suggest)

  • @rookiesmarts
    @rookiesmarts3 ай бұрын

    Nice

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thanks 🙏

  • @imraan_alam
    @imraan_alam3 ай бұрын

    As a UI designer, I believe there are opportunities to enhance the aesthetics of the card layout. The proportions seem off, and the grid could be improved.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Feel free to share a screenshot 👍

  • @nusapixelweb
    @nusapixelweb3 ай бұрын

    The Row and Stack blocks are indeed a bit confusing. But thanks for making them clear!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Glad it helped 👍

  • @jburns47
    @jburns473 ай бұрын

    This looks like a possible way to make that border template I’ve been interested in for a while.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    👍

  • @latifnizamani6192
    @latifnizamani61922 ай бұрын

    Can you do a video about Query Loop please!

  • @jamiewp

    @jamiewp

    2 ай бұрын

    This ones a couple of years old but hopefully will help kzread.info/dash/bejne/e6Kul6twhdjbdZc.htmlsi=PlOvoB6QgAK6Ttzt

  • @anthonyrude
    @anthonyrude3 ай бұрын

    How do you zoom around the page like that? It's very smooth. What are you using to record your screen are you editing the moves after?

  • @jamiewp

    @jamiewp

    3 ай бұрын

    that's a program called screen studio :)

  • @dinorossi6611
    @dinorossi66113 ай бұрын

    Would you make a full site build tutorial ?

  • @jamiewp

    @jamiewp

    3 ай бұрын

    What kind of site would you like to see? (there are many)

  • @rag7628
    @rag76283 ай бұрын

    Thank you Jamie I love your videos.! I have a little challenge maybe you can help me 🙂 I'm just starting with the WordPress Twenty Twenty-Four theme and I'm looking for where to set the background image instead of the background color (like in styles) but I can't find where to set this. Do you know where or how to set the background image instead of a background color ?

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thank you 🙏 What are you trying to see the back ground image for ? Ie a block? Page? Site ?

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

    Another great tutorial! I'm not sure you read comments from older video, but I'm coming back to this tutorial of yours because I'm trying to do something similar. I want the home page to have a carousel at the center, and at the very bottom the toolbar. The problem is, the height of the stack should be 100% of the available screen space based on the user's device, and so far no luck. I even tried nesting the Stack in a Cover block, but still nothing, the page is never 100% full height. Any help? 🙏

  • @jamiewp

    @jamiewp

    Ай бұрын

    You could give the stack a custom class and then set it at 100vh. If you don't know CSS then ask chatgpt to write it for you 😉

  • @perseuslegend8580

    @perseuslegend8580

    Ай бұрын

    @@jamiewp Splendid! Thank you so much, Jamie. I could have added the custom CSS. It turned out, I was able to specify the 100vh directly from the block editor. Thanks for pointing me in the right direction!

  • @jamiewp

    @jamiewp

    Ай бұрын

    @@perseuslegend8580 Ah yes - great find 👍

  • @SingaporeMathsAcademyUK
    @SingaporeMathsAcademyUK3 ай бұрын

    The most beautiful you've seen? Hmmm...Jamie I know you are working with Wordpress nowadays but please don't go all American Hyperbbolic on us!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    It is though 🔥

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Show me a better one to try to recreate 👍🚀

  • @SingaporeMathsAcademyUK

    @SingaporeMathsAcademyUK

    3 ай бұрын

    @@jamiewp I suppose it comes back to our opinion, which I generally agree with when it comes to you.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    @@SingaporeMathsAcademyUK tks, but seriously if you see anything better out there do send it to me - i love a challenge 👍 I fell in love with this one when i saw it, but I would love to find something more elegant.

  • @SmallBizGeekUK
    @SmallBizGeekUK3 ай бұрын

    Jamie - look mate, I’ve been watching your videos for a while now, and I’ve seen you are generally “all in” on blocks, but for me, they are just way way way way too complicated and just too difficult to change. If you have 30 odd pages with this same layout and the client decides they want me to change the padding, how in the hell are we supposed to do that en Masse? It can’t be done. It’s all horrible in-line CSS that lives in the database. These blocks totally defeat what CSS is for which is to make the same change across certain design features in one go. I know what patterns are and that’s the closest we can get to being able to make one change across the whole site, but I don’t see how patterns can factor in here. No one seems to be talking about this. Everyone is obsessing over how things “look” but not the reality of doing these blocks at scale in a way that can edited all at the same time with one or two tweaks.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    A few options - 1) use classes 2) use reusable blocks 3) use generate blocks new class based functionality 4) use pattern overrides when WordPress 6.6 comes out

  • @CarlMadsen
    @CarlMadsen3 ай бұрын

    Simple elegant thank you Jamie!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Cheers Carl 🙏

  • @dinorossi6611

    @dinorossi6611

    3 ай бұрын

    @@jamiewp What theme is this? This is a plain new WP ? These things change hourly.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    @@dinorossi6611 this is 2024 default theme, but i've tested with other themes eg spectra one and it works great

  • @dinorossi6611

    @dinorossi6611

    3 ай бұрын

    @@jamiewp The theme is called "Default Theme" ? These micro segments do look interesting but a full build tutorial would be much better. You tested new WP with other themes? Spectra is a theme I gather? Ok.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    @@dinorossi6611 what theme is called the default theme? Full Site Build is a broad term, what kind of site do you want to see? Portfolio, Ecommerce, Blog, Business, Membership, Brochure?

  • @NorthTonawanda1
    @NorthTonawanda13 ай бұрын

    Remember last year's April Fools' prank? It's time to top it, Jamie! Unleash "Purrfect WebWeaver" - the AI so smart, it builds insanely awesome cat-obsessed websites while you pet your furry friend! Think sites about psychic felines, time-traveling catnip deliveries, and everything your cat-loving heart desires. Let's create an April Fools' prank that'll make last year's look like a kitten playing with yarn!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    🤩🐈🐱

Келесі