Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save melchoyce/10b15cda10dea0c800b248d4c914832b to your computer and use it in GitHub Desktop.
Save melchoyce/10b15cda10dea0c800b248d4c914832b to your computer and use it in GitHub Desktop.
WordPress Pattern: Two columns with impressionist image
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"250px"} -->
<div class="wp-block-column" style="flex-basis:250px"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:paragraph -->
<p>Paul Signac was a 19th century French Neo-Impressionist painter who helped develop the Pointillist style.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"10%"} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:paragraph -->
<p>In 1886, he painted a number of works focused on the harbor in Les Andelys, a village on the Seine River.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"10%"} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"250px"} -->
<div class="wp-block-column" style="flex-basis:250px"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:image {"align":"full","id":3036,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2922804-jpeg-1-1024x669.jpg" alt="" class="wp-image-3036"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment