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. https://creativecommons.org/licenses/by/4.0/

Artist: http://audionautix.com/

source

2 Comments

  1. 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.

  2. 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.

Leave A Reply

Please enter your comment!
Please enter your name here