Pattern Submission: Colorful "About Me" Columns

[justintadlock]

I don't know why this pattern should be included other than I think it might be a cool candidate.

Built with Twenty Twenty-One and Gutenberg 10.7.4.

---

Pattern Title

Colorful About Me Columns

Pattern Categories

Columns, Text(?)

Screenshots

Image Credits

Public Domain / CC0 Images:

• https://www.rawpixel.com/image/3282329/free-photo-image-paint-colors-colour-brush-brush-paint-brushes
• https://www.rawpixel.com/image/560235/colorful-artistic-wall-painting
• https://www.rawpixel.com/image/3322362/free-photo-image-blue-cc0-color

Block Markup

https://github.com/justintadlock/wporg-patterns/blob/master/columns-about-me-colorful/pattern.html

[melchoyce]

Love the pastels!

What would you think about writing some fake content to replace the lorem ipsum, and maybe trying out some related icons instead of those images? I can also hop in if you don't have the time, just let me know.

[justintadlock]

I can definitely rewrite the text. I'll probably need some help finding icons.

In my original mockup, I had used "My Instagram" instead of "My Social". Do you think a return to something more specific like that might help? I had changed it to the generic "Social" for submission.

[melchoyce]

I think keeping "social" makes sense, though it might be good to drop the "my"s, which start feeling repetitive?

[melchoyce]

Some potential icon ideas:

https://ionic.io/ionicons

https://jam-icons.com/

Or, if we wanted something specific, I could design some icons.

[melchoyce]

Took some time to tinker with this, and ended up taking it in kind of a different direction. I cut down on some of the copy, tried some less complex images, and added a stark black background for contrast.

<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}},"backgroundColor":"white"} -->
<div class="wp-block-columns alignwide has-white-background-color has-background" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:column {"backgroundColor":"black"} -->
<div class="wp-block-column has-black-background-color has-background"><!-- wp:image {"align":"full","id":3334,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
<figure class="wp-block-image alignfull size-large is-style-default"><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-8-1024x802.png" alt="" class="wp-image-3334"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"32px","left":"32px","bottom":"48px"}}}} -->
<div class="wp-block-group" style="padding-right:32px;padding-bottom:48px;padding-left:32px"><!-- wp:heading {"textAlign":"left","level":3,"style":{"typography":{"lineHeight":"1"}}} -->
<h3 class="has-text-align-left" style="line-height:1">My Story</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size">Learn how I became an artist, and how I developed this particular style.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">Read my story →</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"black"} -->
<div class="wp-block-column has-black-background-color has-background"><!-- wp:image {"align":"full","id":3335,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
<figure class="wp-block-image alignfull size-large is-style-default"><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-9-1024x792.png" alt="" class="wp-image-3335"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"32px","left":"32px","bottom":"48px"}}}} -->
<div class="wp-block-group" style="padding-right:32px;padding-bottom:48px;padding-left:32px"><!-- wp:heading {"textAlign":"left","level":3,"style":{"typography":{"lineHeight":"1"}}} -->
<h3 class="has-text-align-left" style="line-height:1">Get in Touch</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size">Want to show my art in your gallery? Send me an email and we'll chat.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><meta charset="utf-8"><a href="#">Get in touch →</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"black"} -->
<div class="wp-block-column has-black-background-color has-background"><!-- wp:image {"align":"center","id":3332,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
<div class="wp-block-image is-style-default"><figure class="aligncenter size-large"><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-6-1024x796.png" alt="" class="wp-image-3332"/></figure></div>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"32px","left":"32px","bottom":"48px"}}}} -->
<div class="wp-block-group" style="padding-right:32px;padding-bottom:48px;padding-left:32px"><!-- wp:heading {"textAlign":"left","level":3,"style":{"typography":{"lineHeight":"1"}}} -->
<h3 class="has-text-align-left" style="line-height:1">Follow Me</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size">Love my work? Follow me online to see new paintings first.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><meta charset="utf-8"><a href="#">Follow me →</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

https://www.rawpixel.com/image/461096/free-illustration-image-beach-beach-barei-japanese-art
https://www.rawpixel.com/image/459455/free-illustration-image-watercolor-landscape-japanese-art-japanese
https://www.rawpixel.com/image/459357/free-illustration-image-water-bairei-japan

@justintadlock, would love your thoughts on this pivot.

[justintadlock]

Sorry for looping back to this so late. I've been a little sick in the past week.

I absolutely love where you've taken this. I think it'd make a great pattern to include in the directory.

---

I'd still like to add my original pattern with updated copy in place of the lorem ipsum text. The rounded images with the repetitive "MY ABC" (a bit of a rhetorical device that I think would draw more attention to the sections) is something I can submit when we open things up a bit more.

[beafialho]

Alright, seems like this pattern is ready to be added to the directory. 🚢

[beafialho]

Added here!