Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscription Stacked #268

Open
onuro opened this issue Aug 22, 2022 · 4 comments
Open

Subscription Stacked #268

onuro opened this issue Aug 22, 2022 · 4 comments
Milestone

Comments

@onuro
Copy link

onuro commented Aug 22, 2022

Screenshot:
image

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"blockGap":"100px"}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"1.25"}},"fontSize":"x-large"} -->
<h2 class="has-x-large-font-size" style="font-style:normal;font-weight:700;line-height:1.25">Thousands of people have joined our newsletter. Enter your mail to get the latest to your inbox.</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- 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\u003e Subscribe\u003c/strong\u003e","borderRadius":0,"borderWeight":0,"padding":15,"spacing":10,"className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" submit_button_text="&lt;strong&gt; Subscribe&lt;/strong&gt;" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="no-border-radius" email_field_classes="no-border-radius" 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:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":6024,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/08/coverimg-1.jpg" alt="" class="wp-image-6024"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

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

@onuro onuro added this to the Subscription milestone Aug 22, 2022
@alaczek
Copy link
Contributor

alaczek commented Aug 25, 2022

I noticed a few things about this one.

  • The amount of text on the left feels excessive. I would limit it to one sentence.
  • I feel like it's not opinionated enough. Did you experiment with different images?
  • We need to optimize on mobile - the spacing between elements is all over the place and there's no space around the pattern. Also, the image gets tiny.

image

  • The spacing is also off on desktop - elements are too close to the image, lack breathing space.

@iamtakashi
Copy link
Contributor

Let's make sure to have side paddings so that it avoids this situation.

Screenshot 2022-09-01 at 12 24 41

@onuro
Copy link
Author

onuro commented Sep 28, 2022

Thanks folks. I've updated as follows:

image

My thinking is using a crowd of smiling people to reflect the heading into the image used in the pattern.

@iamtakashi
Copy link
Contributor

Thanks for the update. I like your thinking, but I'm not too sure about this one generally. As Ola said, I feel the amount of text in this pattern seems a lot and almost redundant. Do we need both "enter your mail to get [...]" and "Subscribe to our newsletter [...]"?

There seems to be a lot of space between the image and the columns block?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants