Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save melchoyce/d7de1c80b515a77fd69c467d147cff2d to your computer and use it in GitHub Desktop.
Save melchoyce/d7de1c80b515a77fd69c467d147cff2d to your computer and use it in GitHub Desktop.
WordPress Pattern: Two columns with full-width backgrounds
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420162-jpeg-scaled.jpg","id":3080,"dimRatio":40,"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-3080" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420162-jpeg-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"72px"}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>Flowers</strong></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color"><strong>SHOP NOW</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420225-jpeg-scaled.jpg","id":3081,"dimRatio":40,"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-3081" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-420225-jpeg-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"72px"}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>Seaweed</strong></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color"><strong>SHOP NOW</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment