Block Pattern

Non aliquam magna consectetur

Dictumst posuere mi risus erat ligula commodo porttitor lorem, neque libero dolor semper massa magnis vehicula. Conubia sagittis vestibulum at dui ipsum, rutrum lacus elementum taciti, blandit


  • Nulla eget parturient congue leo massa sollicitudin
  • Platea mattis ullamcorper etiam et venenatis nullam
  • Cubilia curabitur est amet iaculis cras platea

$39.00

Non aliquam magna consectetur

Dictumst posuere mi risus erat ligula commodo porttitor lorem, neque libero dolor semper massa magnis vehicula. Conubia sagittis vestibulum at dui ipsum, rutrum lacus elementum taciti, blandit


  • Nulla eget parturient congue leo massa sollicitudin
  • Platea mattis ullamcorper etiam et venenatis nullam
  • Cubilia curabitur est amet iaculis cras platea

$39.00

Code

ソースコード右上のボタンをクリックするとソースコードをクリップボードにコピーすることができます。

そして、Shift + ⌘ + Vスタイルを合わせてあなたのWordPress編集画面にペーストすることで同じものを用意することができます。

					<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"backgroundColor":"vivid-red","textColor":"white"} -->
<div class="wp-block-column has-white-color has-vivid-red-background-color has-text-color has-background">
<!-- wp:image {"id":76,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="https://wpblockpatterns.jp/wp-content/uploads/2021/10/lunch_in_Barcelona-1024x686.jpg" alt="" class="wp-image-76"/>
</figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Non aliquam magna consectetur</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Dictumst posuere mi risus erat ligula commodo porttitor lorem, neque libero dolor semper massa magnis vehicula. Conubia sagittis vestibulum at dui ipsum, rutrum lacus elementum taciti, blandit </p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:list -->
<ul>
<li>Nulla eget parturient congue leo massa sollicitudin</li>
<li>Platea mattis ullamcorper etiam et venenatis nullam</li>
<li>Cubilia curabitur est amet iaculis cras platea</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"40px"}}} -->
<p class="has-text-align-center" style="font-size:40px">
<strong>$39.00</strong>
</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"white","textColor":"vivid-red","width":100,"style":{"border":{"radius":0}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100">
<a class="wp-block-button__link has-vivid-red-color has-white-background-color has-text-color has-background no-border-radius">Order</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
<div class="wp-block-column has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">
<!-- wp:image {"id":76,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="https://wpblockpatterns.jp/wp-content/uploads/2021/10/lunch_in_Barcelona-1024x686.jpg" alt="" class="wp-image-76"/>
</figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Non aliquam magna consectetur</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Dictumst posuere mi risus erat ligula commodo porttitor lorem, neque libero dolor semper massa magnis vehicula. Conubia sagittis vestibulum at dui ipsum, rutrum lacus elementum taciti, blandit </p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:list -->
<ul>
<li>Nulla eget parturient congue leo massa sollicitudin</li>
<li>Platea mattis ullamcorper etiam et venenatis nullam</li>
<li>Cubilia curabitur est amet iaculis cras platea</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"40px"}}} -->
<p class="has-text-align-center" style="font-size:40px">
<strong>$39.00</strong>
</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"white","textColor":"vivid-red","width":100,"style":{"border":{"radius":0}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100">
<a class="wp-block-button__link has-vivid-red-color has-white-background-color has-text-color has-background no-border-radius">Order</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
				

You can copy the code by clicking on the button in the top right corner.
Then Paste and Match Style with Shift + ⌘ + V in your WordPress editor.