How to create a stylish 2 Column Design Image Left & Text Right in WordPress 6.3 in less than 95.1s

Today, we're going to dive into creating a sleek and modern two-column design pattern. Specifically, we'll be setting up an eye-catching layout with an image on the left and text on the right.
To ensure pixel-perfect precision, we'll be using the Pixel Perfect Pro tool. I'll guide you through the process of dragging your design sketch into the editor and aligning everything perfectly. Once you're satisfied with the layout, we can disable Pixel Perfect Pro and move on to building the design using the Gutenberg editor.
Our first step is to add a group block, which we'll set to full width alignment. We'll also customize the content width to 850 pixels, giving us the ideal canvas for our design. I'll show you how to change the group block's background color to a stylish green and add a bit of padding to make everything visually pleasing.
Inside the group block, we'll create our two columns. In the left column, we'll insert an image. I'll demonstrate how to search for and add an image using the Openverse, and we'll make sure the aspect ratio is set to square for a balanced look.
Moving to the right column, we'll add a heading. We'll adjust its settings to make it an h1 tag and apply bold styling for added emphasis. Below the heading, we'll insert paragraph text. I'll guide you through setting the proper margin for the paragraph to ensure the content looks well-spaced.
To make the design even more appealing, we'll tweak some styles. We'll ensure the vertical alignment is set to the middle for both columns, and we'll adjust the block spacing to create a bit of separation between the elements.
As always, I'll emphasize the importance of reviewing your design, making sure it aligns perfectly with your sketch. Once you're satisfied, we'll save the design as a reusable block pattern for easy use across your website.
If you're looking to enhance your WordPress design skills and create stunning layouts, this tutorial is perfect for you.
Don't forget to hit that thumbs up button if you found this tutorial helpful, and consider subscribing for more WordPress design tips and tricks. If you have any questions or thoughts, feel free to share them in the comments section below. Thanks for joining me, and I'll catch you in the next tutorial!
Fast Talkin by Kevin MacLeod is licensed under a Creative Commons Attribution 4.0 license. creativecommons.org/licenses/...
Source: incompetech.com/music/royalty-...
Artist: incompetech.com/

[@MarkConstable]

Extremely condensed and fluff-free, well done, thank you, Elliot 🙂

[@elliottrichmondwp]

You're welcome, glad you enjoyed it and thank you so much for the positive feedback 👍

[@Sonya_Makepeace]

I tried to make a copy of a website yesterday, just for my own personal experience in getting to use Wordpress, but I could not make that Hamburger menu larger. I tried adding eextra CSS but I was at a dead end. I'm going to attempt the same using just HTML and CSS

[@elliottrichmondwp]

@Sonya_Makepeace I’ve got a new video coming out soon about how to extend core blocks and include additional CSS for individual blocks, stay tuned 👍

[@Sonya_Makepeace]

@@elliottrichmondwp Will look forward to it. Thanks for the heads up.