Payment Block Cover 2

[onuro]

Preview →

Cover block bottom right vertical alignment with white group block background.

@ianstewart @olaolusoga @alaczek @iamtakashi

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/03/baby-bed.jpg","id":4580,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom left","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-left" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-4580" alt="" src="https://dotcompatterns.files.wordpress.com/2022/03/baby-bed.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"},"blockGap":"0px"},"color":{"text":"#0a0a0a","background":"#fefefe"},"border":{"radius":"15px"}},"layout":{"contentSize":"450px"}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fefefe;border-radius:15px;color:#0a0a0a;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading {"style":{"typography":{"fontSize":"55px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"40px"}},"color":{"text":"#0a0a0a"}}} -->
<h2 class="has-text-color" id="find-your-happy-place" style="color:#0a0a0a;font-size:55px;font-style:normal;font-weight:700;margin-bottom:40px">Find your happy place</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px","lineHeight":"1.6"},"color":{"text":"#545454"}}} -->
<p class="has-text-color" style="color:#545454;font-size:17px;line-height:1.6">Transformation happens on many fronts: in the way you treat your body through fitness and food, in the quality of the relationships with yourself or others you cultivate, and the quality of the choices you make.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/recurring-payments {"shouldDisplayFrontendBanner":false} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"Buy Now","customTextColor":"#fefefe","customBackgroundColor":"#0a0a0a","borderRadius":10,"width":"100%","className":"is-style-fill"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[alaczek]

With this image, I was actually wondering if it would make sense to put the rectangle in the bottom or top right corner because as it is, it obscures the baby a bit too much. I think the text would need to be better aligned with the image as well.

[iamtakashi]

I hate to say this, but I'm not sure if the image works for something like this fullscreen pattern. The image is busy with all the patterns, textures, and shadows in it, and the colours are also a bit dull in my opinion.

[onuro]

I've revisited the design with slight layout tests for the box. The following button positioning and radius seems to be achievable with the editor, however not with the payments button but buttons block(payments block doesn't have radius on each corner editable but unified).

For that, I have another version without the radius

What do you think?

[iamtakashi]

Hmm, the image with the backpack isn't so great. I know the pain to find a product-oriented image. I mentioned this one of the issues as well, but if it's really hard to find a product image, you can consider using one of those free product PSD templates to make a fake but realistic :) product shot.

[onuro]

Updated with alternate ones. Let me know what you guys think.

There're also some custom design injection to the coffee packs I've made maybe we can use?

[iamtakashi]

I think my favourite is the second one as it feels most natural between them. Can we crop it differently so that the position of the mag would be a little more bottom of the image? Do you have a link for the image?

[onuro]

@iamtakashi original photo is like this:

Unsplash link →

I've edited the photo to make room for corner positioning and make it a bit more square per your feedback and cleaned up a bit:

Latest status:

[iamtakashi]

Thanks for the update. Nice photoshop work! I wouldn't be able to tell if anything was there :)

How do you feel about the colour of the button? I'm not too keen on the orange, to be honest...

Can you also paste the copy of the markup?