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 :)

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 😀

I love watching your videos for creative tips, thanks!

@jamiewp

3 ай бұрын

You are so welcome!🙏

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.

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 :)

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

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

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

2 ай бұрын

Thank you so much 👍🙏

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

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

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

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

@jamiewp

Жыл бұрын

thanks Tim

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

Wonderful tips! Thank you.

@jamiewp

Жыл бұрын

Glad it was helpful!

Truly good work!

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

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 😀

Brilliant approach with few options in Gutenberg 🙏

@jamiewp

Жыл бұрын

thank you for watching :)

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.

Genius.

Kudos and thanks, yet again!!

Very clever indeed. Looks really good.

Great tip, thank you :)

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

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.

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

Brilliant!

awesome

@jamiewp

Жыл бұрын

Thank you 🙏

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

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

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 🤔

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 😢

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

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!

Clever

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

What if it is a photo background?

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

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?

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

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.

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

4 ай бұрын

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

@Simulacra001

4 ай бұрын

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

4 ай бұрын

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

@jamiewp

4 ай бұрын

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