How you can craft creative layouts using blocks with WordPress 6.3 in 216s

I'm going to show you how to build an eye-catching design featuring an image panel on the right side and vertically aligned text.
Our first step is to set up a grid block, acting as the foundation. Within the group, we'll establish a two-column layout, each element serving a specific purpose.
Aligning columns to full width and making sure vertical alignment is set to middle. Our first column, beautifully occupying 80% of the space, will host a captivating heading. We'll customise the font size, appearance, and even make it uppercase for that perfect touch.
Moving to the second column, we'll allocate 20% of the width, creating a balanced composition. Here, a cover block will take the spotlight with a captivating blue background. To enhance the aesthetics, we'll fine-tune the minimum height for an appealing look.
The real magic lies in the headings. Crafted with precision, these headings will steal the show. I'll walk you through customising font sizes, adjusting line heights, and creating a visually pleasing arrangement.
But that's not all! Flexibility is key. I'll demonstrate how to incorporate a client's request for an image within the background panel. We'll blend this image using the cover block settings, adjusting overlay opacity effect.
To achieve the final touch, we'll transform the text to white and enhance its weight. The result? A stunning creative layout, complete with an image panel on the right side and text aligned through the center.
Don't forget to hit that thumbs up button if you found this tutorial helpful, and make sure to subscribe for more WordPress design inspiration and tips. If you have any questions or thoughts, share them in the comments below.
Okey Dokey Smokey by Audionautix is licensed under a Creative Commons Attribution 4.0 license. creativecommons.org/licenses/...
Artist: audionautix.com/

[@MarkConstable]

Hey @elliottrichmondwp, a request for a tutorial. How about setting up a fresh TT3 site and add only the Create Block Theme plugin then "Create blank theme" and show us the fundamentals of setting up a site with Header, Footer patterns and Pages and Index templates etc? I've tried a couple of times, and it's not easy or intuitive.

[@elliottrichmondwp]

Watch this space 👍

[@wpmarkuk]

Why group the columns block? I think grouping content is something I find really confusing and I am sure others do to. I see some people grouping everything and some not. Interested to see why you grouped this column block.

[@elliottrichmondwp]

Thanks Mark, that's a great question, and it's a matter of personal preference. From a technical standpoint, it's not necessary; however, based on my own habits, I find two key reasons to do so:
A) I prefer visually grouping items together. This approach helps me clearly distinguish sections in my List View.
B) I value the flexibility and control over these sections. For example, if a decision is made to align columns widely but retain full-width background colors, achieving this within a group is possible.
Furthermore, I'm constructing all of these Design Patterns on the same page, making easy identification crucial for this playlist.
Moreover, if I later choose to export these patterns for others to utilize after this series, they too will benefit from the aforementioned flexibility. 👍
Interestingly, this method might even offer some future-proofing, considering an ongoing GitHub discussion about the potential inclusion of item naming or labeling in the List View. Given that a "group" essentially serves as an arbitrary container in my view, I don't mind renaming it in the future. The same approach could be applied to stacks or rows, although I would likely place them in a group initially. Personally, I'd find renaming or labeling a "columns," "row," or "stack" block more confusing, as it implies a specific functionality. In contrast, a group provides settings and flexibility but fundamentally represents a collection of items.

[@wpmarkuk]

What you have said makes sense, but as it is not serving any technical purpose here, I would probably opt not to group things that don't need to be as it adds extra markup and extra CSS on the page. But, thats the beauty of these things, we can all do them differently and they all still work 👍

[@elliottrichmondwp]

@@wpmarkuk Yup, flexibility is an option as is opting in or out 👍