Create Pro WordPress Page Layouts in Just 10 Minutes
Vložit
- čas přidán 30. 07. 2024
- Mastering WordPress Page Layouts with the Gutenberg Columns Block.
👉 One Day Websites: www.pootlepress.com/our-wordp...
👉 Instant Websites 🔥 www.pootlepress.com/instant-w...
👉 My WordPress Gutenberg plugins: www.pootlepress.com/wordpress... 🔥
👉 Sign up for my newsletter: www.pootlepress.com/sign-up-t...
👉 My courses: www.pootlepress.com/our-wordp...
👉 Become a member: clubpootle.com/
👉 Contact me at: jamie@pootlepress.com
Links for CSS
Reverse Columns on Mobile -gist.github.com/jamiemarsland...
Add BackGround Images to Columns - gist.github.com/jamiemarsland...
Timeline
0:00 - Intro
0:30 - The CSS Box Model
3:26 - Working with the Columns Block
6:00 - How to reverse Columns for Mobile or Responsive
7:35 - How to add background images to the Columns Block
8:26 - Putting it all together
11:15 Cats Cameo - Věda a technologie
Thank you, Jamie, I have discovered some of this through trying. However, your tutorial is very useful. One is in an embarrassing situation, where one never knows what one still has to discover.
Lots of learning here THANKS!
thanks Martin
my favourite part is when the kitty gets the treats. i look forward to it each time 🙂 but seriously though, thanks for tutorials like this. i learn a bit more each time and i like the way you compared the layouts models and explained where all of the controls were. keep the great work up. cheers!
Another really useful tutorial for a beginner. I stopped working with WP just around the time when Gutenberg was launched, and your videos are helping me discover what a powerful tool the Gutenberg editor is.
I just wanted to say that I really appreciate the innovative tutorials you put together in WordPress. It's clear that you put a lot of effort into creating valuable resources for the community. Keep up the great work!
Jamie, you always make these operations look so easy. And they are easy, given the right mindset. You exemplify and communicate that mindset better than any other Gutenberg tutor I follow (and that includes several other good ones). Thanks especially for explaining the CSS block model and showing how it lives inside the block editor. You are truly helping us get the hang of this thing!
Thanks so much for taking the time to write such kind words Gary 😀
I have looked for this for a long time. Thanx a lot.
Hi Jamie....very concise and informative....loved it! More like this...😇
Thank you Jamie! I'm learning something..
Thanks a lot Jamie, you inspired me to use WP.
that's so great to hear Christian 😀
I built a copy of an old school website with left & right sidebars and used a the "order" css property as I don't know diddly about flex. Might help those who see this video and aren't using a theme with flexbox. The "order" property takes out any guesswork because you number them 1, 2, 3 etc.I simply switched it from (left sidebar > content > right sidebar > footer) to (content > left sidebar > right sidebar > footer).but I could have targeted individual sidebar widgets/blocks to have visitors see the top widgets from each sidebar first. I could have also had one of the footer widgets/blocks show up between any of the sidebar widgets/blocks.
James, Thank you for sharing, you're an inspiration!
Tks Jack
Hey, Jamie! Thank you for another wonderful tutorial. It seems every time I watch you in action something else "clicks" for me. Thank you so much for sharing so much of your knowledge so freely. You are definitely making me feel more and more confident.
thanks Tina - that's so great to hear :)
Jamie, you are simply the best! You can turn everything very simple! I pray to God that you have a very strong and healthy heart! Thank you, God bless you!
thank you so much Joao 🙏
Jamie - just another awesome video from you - Its so good to see your channel - it helps the worldwide community: Appreciate all the efforts you put in to make this awesome channel.🙏😊👍🏻😳♥♥♥
Thank you so much for your kind words Martin 😀
The CSS Box Model illustration is a a great way to wrap one's head around the padding/margin/border process in Gutenberg. Another wonderful video. Thanks Jamie.
Cheers John -
Very useful. I have a client now and she owns an agency and opted to use Gutenberg. Thanks for this ❤❤❤
Amazing 🤩
Very cool, great delivery, thanks...!
Thanks 🙏
The core blocks are finally becoming usable!
Didn't think that would ever happen.
I have actually removed Spectra and GenerateBlocks about a week ago.
Thanks for the helpful video!
Why would you remove GB ? No extra CSS needed - but I agree, it is really nice to see things moving along with the Block Editor
@@DavePerth I just feel a certain unease with every plugin that adds something to the frontend. I doubt that Tom Usborne would do this, but I've had plugins change their html and break my design. So, the more I can do with native tools, the better, even if it means adding some custom code
So helpful, Jamie!
Thanks Kristin 😀
Great video.
Thank you
Jamie! Thanks for your nice content. Can you please suggest me some best and user friendly classified themes or plugins.
"This may vary depending on your theme..." is a really important statement. Many WP users follow tutorials and then wonder why what they see is not what they have. It would be really interesting to learn if there is a way to add those features to existing classic themes. I have not yet experimented with theme.json in classic themes...🤔
that's a great idea Peter -
@@jamiewp During Brian Gardner's "Build Mode" call, I asked about this. Nick Diego mentioned that the ability to turn dimension features on in classic themes was planned for 6.1 and now moved (hopefully) to 6.2. I'm not sure how (I can't find it in the current Gutenberg version) - and I'm still very interested in what theme.json does for classic themes.
Great and clear video as always. I think I will get back to this video a lot! But in the end you use the cover block to put images in it. Why didn't you do it wit the example where you had to put a hard coded link to the image (I hate those links, they are not flexible)? And will the reverse option still work in the last example?
Hi Jouke, as used the Cover Block as another example of what's possible - and yes the reverse option will work 👍
I was lost there for a bit, here's why:
You start to explain the CSS box model with marging and padding using a Heading block, which would be the content part. Are you using the latest Gutenberg plugin or the "standard" Gutenberg? Because in my website when I use the standard gutenberg editor, only the margin option appears. Which makes sense, because margin is around the object, whereas padding is inside the object. A heading doesn't have an inside. A column has both an outside and inside, so from there it makes sense.
I'm also curious as to why you explained how to set a background image in the column with CSS rather than just jumping straight to the cover block? The cover block seems much easier to use here. Is there a certain reason why you would go the CSS road here?
Thank you Jamie for this informing video.👌👌 Is it possible to make the columns "clickable" at current version of Gutenberg?
Yes with a bit of css - can I ask what you would use it for ?
@@jamiewp I was just thinking; both clicking a button (such as learn more) and/or clicking the image where that "learn mode" button located; you can able to reach the same location. Not just by clcicking the "learn more" button.
#Jamie👌.
Appreciated It 🙏 ,Thanks
👍
Mr. Marsland, how about a video relating to how to create or add a free great carousel slider or slideshow plugin with Wordpress.
Hey Jamie, great video. However, in the example with the two portraits (when I add padding in the text column) are displayed somewhat offset from each other. I have the feeling that padding shifts the respective image next to it by the padding value. I use the Bricksy theme. Do you have a solution for my problem?
Sounds like a theme issue to me - i'd reach out to the team at blocksy as a first step - it might be worth spinning up a test site at instawp to test it out on the 2023 theme. That why you can isolate it as a theme issue ;)
@@jamiewp Hi Jamie. I have the same problem when I test the 2023 theme on instawp. However, it works when I enter a padding value for the individual blocks (heading and paragraph). When I enter a padding value for the column containing the heading and paragraph, the image is shifted and is no longer 50% wide but less and the column containing text is wider than 50%. I have no idea why the solution from the video does not work for me. 🤷♂
Kind regards.
Can you do a post on post grids please and how to vary them on mobile too? Thanks
Will do Paul - how do you want to vary them on mobile?
Most of the column settings mentioned aren't supported by 18tags which is a PootlePress theme (so kind of surprising). Is there anyway to enable those?
Brilliant stuff Sir. What theme are you using for this demo?
Bricksy
@@jamiewp hello, I installed and activated Bricksy theme, however there is no padding cursor in Dimensions...nor cursor availability for the margin either...what did I do wrong ?
@@mistertgmistertg hmm not sure, i would check with ana over at bricksy :)
I am trying to switch the columns as you've done at 5:22, but I noticed instead of 2 columns I have (mistakenly) built sections. How can I easily correct them to be columns?
Hi , what block are you using for sections?
Hey Jamie, is Block spacing available in TT3. I don’t think I saw it...
Hi, yes it is, but not for all blocks - which blocks are you trying to use it with?
@@jamiewp I used Columns and I dont Think I Saw it as you have it here… I also miss it in a number of Gutentor Blocks
Can I create a WooCommerce loop like a post loop with Gutenberg?
Yes there's a few ways
1) Use the in built query loop block (and select products instead of posts)
2) Use the WooCommerce 'All Products Block'
3) Use a third party plugin like my Storefront Blocks plugin www.pootlepress.com/storefront-blocks/
You know Jamie, one of these days, I'm gonna be a good designer, and it's going to be your fault... oops, I mean it's going to be because of your guidance. Thanks for more great techniques and ideas, as always.
I'll take that 😉 tks Tim, have a lovely weekend (it's almost wine time here in England)
Why Columns instead of Row ?
The Row is a good block, but the columns block gives you more layout options e.g back ground column colors,