Create Pro WordPress Page Layouts in Just 10 Minutes

Mastering WordPress Page Layouts with the Gutenberg Columns Block.

Links for CSS

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

[uateva]

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.

[paulroos]

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.

[gps]

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!

[GaryMatthews]

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!

[wizdude]

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!

[jdccool]

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.

[tinathaw]

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.

[rale]

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!

[jokerdesigner]

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!

[NorlynCodes]

Very useful. I have a client now and she owns an agency and opted to use Gutenberg. Thanks for this ❤❤❤

[jobecker]

I have looked for this for a long time. Thanx a lot.

[martinkaspar]

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.🙏😊👍🏻😳♥♥♥

[chrioll]

Thanks a lot Jamie, you inspired me to use WP.

[jhnpldng]

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.

[jackkennard]

James, Thank you for sharing, you're an inspiration!

[PeterIngersoll]

"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...🤔

[powerliterature]

Thank you Jamie! I'm learning something..

[martynpage]

Hi Jamie....very concise and informative....loved it! More like this...😇

[DiegoPereyra]

Very cool, great delivery, thanks...!

[maliksaqibmushtaq]

Jamie! Thanks for your nice content. Can you please suggest me some best and user friendly classified themes or plugins.