This Secret WordPress Design Tip Will Make Your Designs Look Professional

Join ClubPootle for more tutorials, free versions of the GeneratePress and Storefront block themes, and member discounts on training and consultancy clubpootle.com/
👉 One Day Websites: www.pootlepres...
👉 Instant Websites 🔥 www.pootlepres...
👉 My WordPress Gutenberg plugins: www.pootlepres... 🔥
👉 Sign up for my newsletter: www.pootlepres...
👉 My courses: www.pootlepres...
👉 Become a member: clubpootle.com/
👉 Contact me at: [e-mail]
Timeline
0:00 - Intro
0:05 - The layouts we will build
0:30 - The theory behind the hack
1:40 - Building overlapping blocks
9:20 - Cats Cameo

[@nw10design]

I would not have remotely guessed that moving the gradient start point over the end point was the way you create a non-graduated gradient fill. When I saw your opening examples, I thought, "Oh lord, we're in for an absolute positioning nightmare!" This "sharp gradient" and child group block within a parent group block approach is a superb solution. Thanks, Jamie, that's one additional design IQ point tacked onto my lobes today.

[@jamiewp]

Thanks Paul :)

[@jdccool]

So very cool, Jamie. You always provide content I just don't see anyplace else. Thank you

[@WineGiftBoxMaker]

I love your use of OLD TECH for an overview. I really like your right-side end result, it helps see where you are going. And Geting multiple examples of the concept REALLY helps us BLOCKHEADS to comprehend.

[@jamiewp]

thank you 😀

[@MysticOblong]

I've been away from WordPress development for a while but must say it all looks pretty interesting with the full site editing and new Gutenberg features. I'll be using this approach for sure when doing the layout for a new site. The 2023 theme looks like a really clean and minimal starting point too. Thanks very much for sharing these approaches.

[@cathydouglas2930]

I love watching your videos for creative tips, thanks!

[@jamiewp]

You are so welcome!🙏

[@tomcha75]

This is absolutely brilliant! I just left a comment in one of your other videos asking about how to do overlaps because I couldn't use negative margins in Gutenberg like in Elementor. This is simply brilliant. I know I said that, but I needed to say it again. Thank you!

[@jamiewp]

Thank you so much 👍🙏

[@letterpool]

omg as a wordpress noob i've been trying to figure out this exact thing. even got frustrated enough to try and just do it with html and embed a page for the hero section lmao. Thank you muchly!!!!!!!!!!!!!!!

[@jamiewp]

Great to hear it was useful :)

[@visualmodo]

Truly good work!

[@RonNVids]

Great tip, thank you :)

[@sujitbiswasseo]

Good tutorial, thanks Jamie. Waiting for the Guttenberg page builder that you talked about the other day.

[@timmcreynolds2734]

You always make these look so easy. Thanks as always Jamie!

[@jamiewp]

thanks Tim

[@tubeymoto]

Brilliant approach with few options in Gutenberg 🙏

[@jamiewp]

thank you for watching :)

[@octopusfly]

What a clever use of gradient and coordinated columns. You show how to do much with very little. Thanks for sharing! ~an American in Korea 🇰🇷

[@jamiewp]

thanks Robert 😀

[@nw6091]

Yep. Great job as always. I always learn new tips from you! Gratitude.

[@aureliensooukian]

Wonderful tips! Thank you.

[@jamiewp]

Glad it was helpful!

[@fahadus]

Just reinstalled Vilaldi after watching this. I've been missing out on the tiling!

[@stuartmorley6338]

Very clever indeed. Looks really good.

[@MarkConstable]

Looking forward to a rundown of 6.1 and '23 theme 🙂

[@gps36]

Kudos and thanks, yet again!!

[@slk-320]

Tank you, very nice videos with kind atmosohere. My suggestion for you is to focus more on the mobile view hacks and tricks. Simply because most traffic now is mobile. Only we are as a designers and developers has desktop thinking. Today things must be mobile first.

[@jamiewp]

Thank you - yes more mobile videos on the way

[@ericnoden]

Brilliant!

[@MartijnBaltes]

Great tip, Jamie! Curious to know how this works out on mobile.

[@jamiewp]

Hi, well it works pretty well as all the blocks are responsive so they stack - i would probably add some custom css is some circumstances depending on the design.

[@andy.puempel]

Absolutely Great Tip, Jamie! Used it today on a site I'm developing. Thanks for sharing!

[@jamiewp]

Tks Andy - great to hear it was useful

[@walksfreely]

Very nice hack Jamie....useful to know!

[@jeffreyprice2982]

Genius.

[@GuntherGlesti]

I did that 20 years ago using html... Good to see nothing has changed!

[@XxQuidanxX]

Superponer ahora es mas facil, sin necesidad de plugins adicionales. Gran trabajo. Saludos

[@quickerthemes]

Very good, this is the way most designers do these type of tasks. The problem however is that you have to re-adjust all the backgrounds of the first group when you change your theme that has a different background color. The white background we are setting needs to change to match the one of the background of the new theme. The way I would do it - I do it, is place the 2 blocks vertically under each other, and add a negative top margin to the second container that contains the content. Of course the first container does not need to have a gradient background, but a solid one. Now, we can change themes without impunity, without worrying the new theme's background color.

[@jamiewp]

Hi Nick, great point 👍 Negative margins are coming to core gutenberg soonish hopefully - i like the method in the video because a) it doesn't require any custom css b) non techies can do it easily

[@quickerthemes]

@@jamiewp I see your point and agree. What's frustrating for theme and plugin developers like myself is the poor planning of Gutenberg. Some features like universal margins, paddings, etc... should have been developed from the beginning, like a normal page builder, and not 4 years later... that's FOUR YEARS later. Love your videos btw...

[@lydialutz]

Wow, okay, I learned I can put the gradient in a way that it doesn't actually look like a gradient. But I was expecting...a black container on top, a white container on bottom, and the images in the bottom container then set to a big bunch of negative top margin. Never would have thought of doing it this way.

[@stefaniehakulin9529]

awesome

[@jamiewp]

Thank you 🙏

[@mrjamestryon]

Clever

[@jeffbarnhart6441]

what equipment and software are you using for the overhead drawing part?

[@IainMacGillivray]

Hi Jamie, how about using padding in the outer group container to position the inner group, rather than adding other blocks to do that?

[@jamiewp]

That's a great idea - or top margin to the inner container should work as well 🤔

[@VijaiVirSinghNair]

Sir, the secret sauce is using the Group Block. Still looking forward to a video on the Group Block. Second reminder 😃

[@wd1534]

Hello Jamie. Is it responsive design? How does it displau on large screens, tablets and smartphones ? Thank you :)

[@Mikepfive]

Shame that there’s been no one able to answer this 😢

[@jeffbarnhart6441]

can you show how to do the same thing with css?

[@nonaldb6721]

ok but how does that look with different screen size ? it will throw your overlapping image/block all over depending on screen size? instead of margin top bottom?

[@Mikepfive]

I’d like to know the answer to this question too!

[@codeAlongwith]

What if it is a photo background?

[@JamesRiddett]

Would you now use negative margins instead?

[@jamiewp]

It depends on the layout, but in some cases yes 👍

[@VitaliKononov]

hi @jamiewp, thanks for the video. I've tried following along ... I am not seeing the same settings on my Group block as it shows in your tutorial. No content layout parameters. just color, typography and advanced ... Any clue why my block setting are different?

[@jamiewp]

It’s likely your theme - what theme are you using ?

[@VitaliKononov]

@@jamiewp oops, is this tutorial for Generate Press only? and Generate Blocks? I thought you can use any blocks plugin with most of the popular themes like Kadence f.e. which I am using on most websites

[@jamiewp]

@@VitaliKononov Hi, this isn't generatepress , this is any theme that supports the settings (all block themes and quite a few classic themes) . I expect kadence should turn them on soon (it might be worth asking them)

[@VitaliKononov]

ok. got it. thank you

[@Hebhansen]

Hey Jamie. I’m reversing out of Elementor and will design single product page in blocks. I could use advise how to do this. Is it easier in fx twentytwenty3. Which blocks would I need to manage?

[@jamiewp]

Actually i have a plugin that does this 😀 www.pootlepress.com/woobuilder-blocks/

[@Hebhansen]

@@jamiewp It lloks great Jamie. However, we are hobby and will not go for subscriptions for now. In other words a simple access to template inside Gutenberg and then build from there.

[@jamiewp]

@@Hebhansen hi, atm you can't build out single product pages with gutenberg without a plugin unfortunately (you need special blocks for the product page e.g add to cart block, product image block, price block, product title block, short description blocks, tabs block

[@Hebhansen]

@@jamiewp I have main blocks available from woo blocks, stackable, Gutentor etc. I also have php that enables blocks inside products. I just need control over template. Tbh I am puzzled / suprised and in fact annoyed with Woo that template access is not default and must have on a webshop engine. I was hoping for plugins to bridge blocks into commerce opensource style. Another thing Jamie. It appears you have contacts into development. In support of WP i would concider 1) WP Dashboard theme looks windows 1995. Website designers knows for a fact that prio 1 in userfriendliness is a nice clean design. I can't believe this is not fixed in 22. 2) WP Mess - Plugin API framework. If this is not met remove the plugin and support from official plugins: force plugins into a default WP menu and admin bar instead of making their own menu as well as prohibit adds and reminders. WP is noisy and a mess. Yes there is Ultimate Dash and ..... But for the sake of it... How can WP accept this branding of self??? WP is very much about content and production and blocks and design. Maybe step back from the parking lot and ask this; Are we the best looking car or are we falling apart. This is also becoming a huge issue inside Gutenberg. Banners at top edit in elementor - templates by extendify. But two things, very easy. Enforce a clean menu. The same in every WP install and remove ALL bling and neon adds from a working environment. Creat job you do by the way and very explanatory videos. Thx. But if possible, please forward my constructive critique above. This is reason #1 WP is loosing market share and everyone in the community are not getting younger.

[@jamiewp]

@@Hebhansen Hi, are you using a block theme?

[@Simulacra001]

Looks really great. Now show us how to have multiple colours in one line of text. Oh wait, this basic functionality is impossible using the block editor.. How such a basic task as highlighting a word then selecting a colour still requires the old editor is beyond me.

[@jamiewp]

Hi, here's how you can have multiple text colours within a block in Gutenberg 👉x.com/pootlepress/status/1767122641544941647?s=20

[@Simulacra001]

@@jamiewp Thank you, I’ll go and take a look after this comment but if it involves using the classic block or manually entering HTML, CSS and a hexadecimal number for the colour needed then I’m sure you’ll agree this is not good enough. We should be able to simply select any text entered then select a colour from the block editor.

[@Simulacra001]

@@jamiewp Well today I’ve learnt something new. It seems the word highlight is the new term for colour.. Many thanks

[@jamiewp]

@@Simulacra001 agree, it's not the most intuitive phrase, but you can add a background colour (which is quite nice especially if you add some padding) so it kinda makes sense.

[@DavePerth]

Nice techniques Jamie - its a shame that you have to use the spacer block - the block editor really need more flexible margin and padding settings that are in other tools!

[@jamiewp]

Hi Dave, well the group block now has margin and padding settings :)

[@DavePerth]

@@jamiewp thanks, I’ll check that out.