Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Subscription 2 Columns #264

Open onuro opened 2 years ago

onuro commented 2 years ago

Screenshot:

image
<!-- wp:media-text {"align":"full","mediaId":6042,"mediaLink":"https://dotcompatterns.wordpress.com/?attachment_id=6042","mediaType":"image"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://dotcompatterns.files.wordpress.com/2022/08/redspot.jpg?w=607" alt="" class="wp-image-6042 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"30px","padding":{"bottom":"50px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group" style="padding-bottom:50px"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"3.5rem"},"spacing":{"margin":{"top":"40px"}}},"fontFamily":"chivo"} -->
<h2 class="has-chivo-font-family has-custom-font" style="margin-top:40px;font-size:3.5rem;font-style:normal;font-weight:700;font-family:chivo">Don’t miss a thing.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Subscribe to our newsletter for cool tips, campaigns and new things.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"background"} -->
<div class="wp-block-group has-background-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:jetpack/subscriptions {"buttonWidth":"","submitButtonText":"\u003cstrong\u003eSubscribe\u003c/strong\u003e","customButtonBackgroundColor":"#dd4d43","borderRadius":5,"borderWeight":0,"customBorderColor":"#dd4d43","padding":15,"spacing":10,"className":"is-style-compact"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-compact">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" submit_button_text="&lt;strong&gt;Subscribe&lt;/strong&gt;" custom_background_button_color="#dd4d43" custom_font_size="16px" custom_border_radius="5" custom_border_weight="1" custom_border_color="#dd4d43" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text -->

Preview: https://dotcompatterns.wordpress.com/?p=6040&preview=true

alaczek commented 2 years ago

This one needs adjustment on mobile - the image is too close to the heading.

onuro commented 2 years ago

Nice catch, thanks @alaczek. Updated with some spacing added to the heading

image
iamtakashi commented 2 years ago

I'm not sure I understand the relationship between the image and the copy. I'm curious what thought was behind the image choice.

alaczek commented 2 years ago

I think this was supposed to be for a personal newsletter, in which case the copy could maybe reflect that a little bit better.

iamtakashi commented 2 years ago

Ok, but I still think there should be a better image for that context. Maybe just me, but the impression of the image is in a range of hidden, undisclosed personal information, anonymous, and endangered.

onuro commented 2 years ago

I hear your thoughts, I've updated as follows. Let me know what you think:

image
iamtakashi commented 2 years ago

Thanks for the update. I think the relation between the image and the copy is much stronger. I like the confident-looking subject with the copy, but it's quite dark. I wonder if there is a well-lit image of a woman who smiles confidently.

onuro commented 2 years ago

Thanks @iamtakashi. I have 2 more options with female imagery. I think I'm personally leaning towards the woman w the orange suit but she's not smiling much :)

image image
iamtakashi commented 2 years ago

Hmm, I don't like very much either of them. Those are very much stock images :) Yes, of course, they are, but I think we should choose something different, less "stocky" images. Sorry for not being able to put this clearly, and I hope you get what I'm trying to say.

onuro commented 2 years ago

Thanks @iamtakashi. How about those?

image