Are your WordPress Gutenberg designs too boxy? Here's how to fix them.

Подписаться 59 тыс.

Просмотров 3,2 тыс.

50% 1

5 tips to make your WordPress Gutenberg designs less boxy.
Add beautiful shapes into pages
Create stylish galleries
Add seamless Photo cut outs
Improve readability with snazzy sticky backgrounds
Mirror text with shape design
Links
Caxton shape divider block and plugin - wordpress.org/plugins/caxton/
SVG WordPress plugin - wordpress.org/plugins/svg-sup...
Wave app - haikei.app/
👉 Sign up for my newsletter www.pootlepress.com/sign-up-t...
👉 Contact me at: jamie@pootlepress.com
👉 My Free Gutenberg Tutorials www.pootlepress.com/wordpress...
👉 My Gutenberg WordPress plugins, including WooBuilder Blocks www.pootlepress.com/wordpress... 🔥
👉 Test out Full Site Editing and our WooCommerce Gutenberg Plugins, pre-installed app.instawp.io/launch?t=woobu...
👉 Join my WordPress club (and help support this channel) clubpootle.com/
Timeline
0:00 - Intro
0:20 - The 5 examples we will build
1:15 - SVG wave pattern
3:00 - Add shapes to the Gutenberg Gallery Block
4:10 - Photograph cut out
6:35 - Add shape backgrounds to headings and content
9:55 - Mirror text with shapes

Наука

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

3 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

So creative. I have no idea how one is supposed to keep track of what you can do with what element like the "football" heading example you showed. Knowing what you can and can't do with what element and what you need to nestle into what other is mind boggling.

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

Thanks - yes its tricky to keep up with all that’s possible, but that’s what this channel is all about 😉

@tjsayers5428 2 года назад

Great stuff! Will be trying these techniques today. Thanks Jamie!

@jdccool 2 года назад

As always, excellent Jamie. Thanks!

@jamiewp 2 года назад

Tks John 👍

@kimcesarettiart 2 года назад

As an artist, I love this! Thanks so much for this video! I'm excited to try these out on my own site as I definitely have pages that could benefit from some of these tips.

@jamiewp 2 года назад

Fab, tks Kim - i'd love to see the finished result if you are happy to share 😀

@DaJungleDred 2 года назад

Awesome - Thank you for sharing!!

@jamiewp 2 года назад

Thanks Simon

@timmcreynolds2734 2 года назад

WOW! A mention from the Big Man Himself. That says a lot about your ability for forward think. That is awesome. Thanks once again for the great information, fantastic.

@jamiewp 2 года назад

Thanks Tim 👍

@visualmodo 2 года назад

Awesome video!!!

@jamiewp 2 года назад

Thank you 🙏

@geraldheagney6038 2 года назад

Terrific tips.

@jamiewp 2 года назад

thanks Gerald 😀

@giovcaria6440 Год назад

I'm excited to experiment with these ! I'm wondering if I can use the blob pattern (from the SVG wave) to make a continuous background connecting the header and a sidebar

@andrewferguson7859 2 года назад

I am intrigued by the items covered in the video, and am looking forward to trying them out. Odd thing about the SVG is that if you look at the content generated by themes like Bricksy, or possibly WP itself, you see a bunch of SVG elements. I wonder if you could add these to a page using the custom html block. Something I need to explore, of course, I could just use the SVG Support plugin. Thank you for the great ideas, and inspiration.

@jamiewp 2 года назад

Hi Andrew - yes that's a great point you make about the HTML block 👍

@Debbidoomarketing 2 года назад

Thanks for another very useful and interesting video - I always look forward to receiving your emails saying another new video is ready to watch :)

@jamiewp 2 года назад

thank you 🙏

@I_Mackenzie 2 года назад

Good video. We all need to make less boxy sites. Thanks for the vid. I've noticed when anyone demonstrates using shapes as dividers, it's only horizontal dividers. Is it possible to have vertical dividers?

@Leemshop Год назад

Hi Jamie, thanks for your video. Is is possible to use the caxton shape dividers in a header also? I would like to make the transition from header to pagecontent less “blocky”. Kind regards. Geert

@jaimegutierrez4788 2 года назад

I've noticed the new image block doesn't have the border radius property enabled

@jamiewp 2 года назад

What theme are you using ?

@KaiBuskirk 2 года назад

Morning Brother!

@jamiewp 2 года назад

Morning Kai

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

Is there a way to do element transition effects like Elementor? Things like fade in, fade out, zoom, etc...?

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

Here's a nice simple way wordpress.org/plugins/blocks-animation/

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

@@jamiewp Thanks so much. I actually found your other video going over this. Love the videos. I don't know how you keep coming up with all these ideas.

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

@@tomcha75 thank you :) lots of walking works for me for idea generation :)

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

@@jamiewp Is there a way to do negative margin to overlap two things together?