How to create a stylish full width 2-Column text left & gallery right pattern in WordPress 6.3

Welcome to my first video where I'll guide you through crafting chic WordPress patterns using Gutenberg from scratch. In this episode, I'm designing an appealing layout featuring text on the left and a captivating image gallery on the right. Watch as I walk you through the entire process step by step, offering valuable insights along the way. Learn how to overlay visuals for precision, adjust columns, fine-tune alignment, and even access a remarkable image library for your projects. If you're interested in mastering WordPress patterns and enhancing your design skills, don't forget to hit the thumbs up button, leave your questions in the comments, and consider subscribing for more exciting pattern-building tutorials. Thanks for joining me, and I'll catch you in the next video!

[@kausalyakalyanasundaram6122]

Very nice. Exactly what I was looking for. Thank you.

[@elliottrichmondwp]

You're welcome! Glad it was helpful :)

[@gads_guy]

Cool

[@elliottrichmondwp]

Thanks 👍

[@jimnech5066]

I like your professional approach to design.👍 It is a very important to have an extremely clear blueprint of what you are going to creste. It is much easier to change your mind when everything exists only on a scratch pad.

[@elliottrichmondwp]

Thank you very much!

[@WasifAhmed91]

Amazing video. You explained many things nicely. One question, what about responsiveness, it's getting weird on tablet and mobile.

[@elliottrichmondwp]

Thank you for the feedback 🙏
If you have followed the video accurately and used the Columns block, there is a setting to toggle "Stack on mobile." This should resolve any odd layout issues. If you are using the Gallery block on the right, unfortunately, there isn't currently any support for responsiveness. That said, rather than using a Gallery, I guess you could use another nested Columns block and then ensure the settings area is also toggled to "Stack on mobile" - that's not something I've tested for, though.

[@WasifAhmed91]

@@elliottrichmondwp thank you so much for comprehensive reply. I take care of this strategy. Also, please make a video on creating a transparent header pattern. Thanks

[@royby]

Thank you for this valuable tutorial Elliot. I certainly learnt a few things from following along with it. However, as Core now stands this pattern is not gracefully responsive and the gallery lacks Lightbox which really sucks. The Lightbox issue can be fixed with another plugin, but that's not ideal for portability of the pattern and the responsiveness???? I'm still trying to figure out the best approach to that issue. 😞 Cheers

[@elliottrichmondwp]

Sure I hear ya! You can extend blocks to resolve that but it’s more developer centric that way, I think core are going in the direction of “intrinsic” design rather than “responsive” design unfortunately 🤷‍♂️

[@forchettinastaff2626]

Sorry for my question, my first video on you... Is there a way to insert margin and padding globally for the section and either the with of the 2 columns inside it? Thanks

[@elliottrichmondwp]

Yes you can! But not on the individual block via the classic editor, you can only access the global settings via full site editing mode, you can also set them individually via the theme.json file if you are familiar with that? styles.blocks.core/group or styles.blocks.core/buttons etc
I cover the global settings in another video > Create a WordPress Website in Under 30 Minutes Without Any Coding Knowledge! czcams.com/video/ig4scppqrDc/video.htmlsi=gz7e2iBlhmaAmERt

[@androidetube]

In my case the aspect ratio setting is not present for the images when inside a gallery block, I couldn't find reason, anyone knows why?

[@elliottrichmondwp]

I think the aspect ratio is only applicable to the "image" block and not the "gallery" block :)