How to create a Magazine Layout for your website or blog with the WordPress Gutenberg Block Editor, full site editing, no plugins and no code!

In my tutorial I’m using the 2022 Theme and WordPress 5.9

Sign up for my newsletter https://www.pootlepress.com/sign-up-to-my-newsletter/
Email me: jamie@pootlepress.com 📧
Our lovely Gutenberg WordPress plugins 🔥 https://www.pootlepress.com/wordpress-plugins/

Timeline
0:00 – Intro
0:05 – The magazine layout we’ll build
0:50 – The Gutenberg Blocks we will need
1:00 – How the magazine layout is constructed
2:00 – How to create a page template
2:30 – Designing the magazine layout
3:00 – The Gutenberg List layout view
3:30 – Add the Columns Block
4:00 – Changing the Columns Block widths
4:45 – Adding the Query Loop Block
5:00 – Editing the Query Loop Block
5:00 – Choosing the quantity of Posts to display using the Query Loop
6:15 – Filtering the posts on the Query Loop Block
7:20 – Showing Post Titles using the Query Loop Block
8:20 – Choose the Query Loop categories
8:40 – What the Query Loop offset setting does
9:13 – Editing what Blocks to show in the Query Loop
9:35 – Adding text within the Query Loop Block
10:00 – Styling the Query Loop Block
10:20 – Duplicating Gutenberg Columns
12:00 – Use the Group Block to add a background colour to a Section
13:25 – How to display your Page Template

source

24 Comments

  4. This has to be one of the best WordPress blog post layout videos I've ever seen. So many other videos assume you need to use plugins or site builders to do this.
    One question which I don't think you explained in the video is the grid layout of the photos in the middle Sports section. The photos in this section seem to be fixed in size, square shaped, how would you make that responsive to a mix of portrait and landscape photos (masonry layout)? If I contrast the Sports section layout to the section above it, the size of the text is driving a masonry-style grid layout here, so it's responsive to the amount of text. The Sports section doesn't appear to be responsive to different image shapes. This might be an idea for another video altogether (fixed grid vs masonry responsive layouts)

  7. The ideal is to arrange a larger layout with just one or few query loops. Every time you use a query loop block it translates to a database request. The more you use increments significatively the load on the page and affects rather hard the performance

  8. Wonderful tutorial Jamie! If I wanted to add this layout on my existing home page below the fold should I just start adding the blocks directly to the home page? Or should I approach it differently? Thank you

  9. Great video. Puts the new 5.9 in plain understandable english. One question. If you wanted to make the page wider, how would you do that? I know how in the old wordpress but can't find it in 5.9 Trying to squeeze those three column into the default space given in the theme I am working on jut won't work. It ends of being vertical text! Need to give it more room somehow. How to? Must be simple!

  10. Nice video, thanks Jamie. I know it's for the sake of the demo, but just to be exact, if you offset by 1 or 4 in columns 2 and 3, then it will skip the 1st post, however, when the next first post is not in the "featured" category, it won't appear anywhere. Thanks again and hello to the cat

  13. Please make a video on how to create a single post template for a custom post type by using a full site editing theme.

    Also, how to make a custom archive page, would be very useful. (A catalog with filters, more like a shop than a homepage)
    So basically, the two main templates of a listing website.

    Thank you for the vids. Really enjoying the content

  19. Awesome video as usual Jamie!! I was wondering if you could do a video on unique ways to make the sidebar more useful or better with Gutenberg? Can You put recent posts into the sidebar with a Query block?

Leave A Reply

Please enter your comment!
Please enter your name here