Flip Box Block
Flip Box Block is a block plugin for the WordPress block editor that allows you to freely place blocks in front and behind.
Demos 1 SNS
WordPress
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
YouTube
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
※Activate the Flip Box Block plugin and paste it into the block editor.
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"32px","bottom":"32px"}},"elements":{"link":{"color":{"text":"var:preset|color|secondary"}}}}} -->
<div class="wp-block-group alignfull has-link-color" style="padding-top:32px;padding-bottom:32px"><!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="has-text-align-center" id="demos-1"><strong>Demos 1 SNS</strong></h3>
<!-- /wp:heading -->
<!-- wp:spacer {"height":16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"300px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:300px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group {"style":{"border":{"style":"dotted","width":"2px","radius":"10px"},"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"}}},"borderColor":"primary"} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-radius:10px;border-style:dotted;border-width:2px;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px"><!-- wp:social-links {"openInNewTab":true,"size":"has-huge-icon-size","align":"center","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}}} -->
<ul class="wp-block-social-links aligncenter has-huge-icon-size is-style-logos-only" style="margin-top:0px;margin-bottom:0px"><!-- wp:social-link {"url":"#","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->
<!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="wordpress">WordPress</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"16px","bottom":"0px","left":"16px"}},"border":{"radius":"10px"},"color":{"background":"#0073aa"}},"textColor":"background"} -->
<div class="wp-block-group has-background-color has-text-color has-background" style="background-color:#0073aa;border-radius:10px;padding-top:0px;padding-right:16px;padding-bottom:0px;padding-left:16px"><!-- wp:spacer {"height":55} -->
<div style="height:55px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"300px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:300px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group {"style":{"border":{"style":"dotted","width":"2px","radius":"10px"},"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"}}},"borderColor":"primary"} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-radius:10px;border-style:dotted;border-width:2px;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px"><!-- wp:social-links {"openInNewTab":true,"size":"has-huge-icon-size","align":"center","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}}} -->
<ul class="wp-block-social-links aligncenter has-huge-icon-size is-style-logos-only" style="margin-top:0px;margin-bottom:0px"><!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
<!-- /wp:social-links -->
<!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="wordpress">YouTube</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"16px","bottom":"0px","left":"16px"}},"border":{"radius":"10px"},"color":{"background":"#f20009"}},"textColor":"background"} -->
<div class="wp-block-group has-background-color has-text-color has-background" style="background-color:#f20009;border-radius:10px;padding-top:0px;padding-right:16px;padding-bottom:0px;padding-left:16px"><!-- wp:spacer {"height":55} -->
<div style="height:55px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"300px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:300px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group {"style":{"border":{"style":"dotted","width":"2px","radius":"10px"},"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"}}},"borderColor":"primary"} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-radius:10px;border-style:dotted;border-width:2px;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px"><!-- wp:social-links {"openInNewTab":true,"size":"has-huge-icon-size","align":"center","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}}} -->
<ul class="wp-block-social-links aligncenter has-huge-icon-size is-style-logos-only" style="margin-top:0px;margin-bottom:0px"><!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->
<!-- wp:heading {"textAlign":"center","level":3,"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="wordpress">Twitter</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"16px","bottom":"0px","left":"16px"}},"border":{"radius":"10px"},"color":{"background":"#1d9bf0"}},"textColor":"background"} -->
<div class="wp-block-group has-background-color has-text-color has-background" style="background-color:#1d9bf0;border-radius:10px;padding-top:0px;padding-right:16px;padding-bottom:0px;padding-left:16px"><!-- wp:spacer {"height":55} -->
<div style="height:55px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->Demos 2 Sports
Baseball
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
FootBall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Tennis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Bicycle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Volleyball
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Rugby
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
※Activate the Flip Box Block plugin and paste it into the block editor.
<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":167,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/baseball.png" alt="" class="wp-image-167"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="baseball" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>Baseball</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":165,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/football.png" alt="" class="wp-image-165"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="baseball" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>FootBall</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":166,"width":200,"height":200,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/tennis.png" alt="" class="wp-image-166" width="200" height="200"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="tennis" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>Tennis</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":168,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/bicycle.png" alt="" class="wp-image-168"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="baseball" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>Bicycle</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":278,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/volleyball.png" alt="" class="wp-image-278"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="baseball" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>Volleyball</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox {"flipboxHeight":"242px"} -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:242px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":277,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/rugby.png" alt="" class="wp-image-277"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"10px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"large"} -->
<h3 class="has-text-align-center has-large-font-size" id="tennis" style="margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px"><strong>Rugby</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","style":{"color":{"text":"#262626"},"border":{"radius":"100px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-background-background-color has-text-color has-background" href="#" style="border-radius:100px;color:#262626">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->Demos 3 Member
Lola
Designer
Jacob
Engineer
Noah
Designer
※Activate the Flip Box Block plugin and paste it into the block editor.
<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:500px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:image {"align":"center","id":291,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/06_smile.png" alt="" class="wp-image-291"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong><strong>Lola</strong></strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:image {"align":"center","id":290,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/06_Good.png" alt="" class="wp-image-290"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Designer</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:500px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:image {"align":"center","id":285,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/03_smile.png" alt="" class="wp-image-285"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Jacob</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:image {"align":"center","id":284,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/03_Good.png" alt="" class="wp-image-284"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Engineer</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:flipbox-block/flipbox -->
<div class="wp-block-flipbox-block-flipbox flip-box-block" style="height:500px"><div class="flip-box-block-innner"><!-- wp:flipbox-block/flipbox-front -->
<div class="wp-block-flipbox-block-flipbox-front flip-box-block-front"><div class="flip-box-block-front-inner"><!-- wp:image {"align":"center","id":293,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/07_smile.png" alt="" class="wp-image-293"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong><strong>Noah</strong></strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-front -->
<!-- wp:flipbox-block/flipbox-back -->
<div class="wp-block-flipbox-block-flipbox-back flip-box-block-back"><div class="flip-box-block-back-inner"><!-- wp:image {"align":"center","id":292,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://flip-box-block.shimomuratomoki.com/wp-content/uploads/2022/02/07_Good.png" alt="" class="wp-image-292"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Designer</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:flipbox-block/flipbox-back --></div></div>
<!-- /wp:flipbox-block/flipbox --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->Roadmap
Animation can be changed for each block.
Will be implemented once this pull request is merged…
Developed on Github
Pull requests welcome!