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

Подписаться 1,9 тыс.

Просмотров 1,1 тыс.

50% 1

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!

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 15

@kausalyakalyanasundaram6122 3 месяца назад

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

@elliottrichmondwp 3 месяца назад

You're welcome! Glad it was helpful :)

@forchettinastaff2626 10 месяцев назад

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 10 месяцев назад

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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ig4scppqrDc.htmlsi=gz7e2iBlhmaAmERt

@royby 7 месяцев назад

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 2 месяца назад

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 🤷‍♂️

@androidetube 7 месяцев назад

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 6 месяцев назад

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

@WasifAhmed91 2 месяца назад

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

@elliottrichmondwp 2 месяца назад

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 2 месяца назад

@@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

@gads_guy 11 месяцев назад

Cool

@elliottrichmondwp 10 месяцев назад

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!

16:48

Create a pixel perfect single column text & gallery design pattern in WordPress 6.3