{"id":4045,"date":"2026-10-28T04:00:03","date_gmt":"2026-10-28T04:00:03","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/flip-box\/"},"modified":"2026-11-04T05:17:15","modified_gmt":"2026-11-04T05:17:15","password":"","slug":"flip-box","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/flip-box\/","title":{"rendered":"Flip Box"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Flip Box Block shows a box with a front and a back. When a visitor points at the box, or taps it on a touch screen, it turns over, slides, pushes, zooms, or fades to show the back. Each side can be typed on the box or built from a template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for services, team members, features, and pricing teasers where the back side gives more detail and a button.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create a Flip Box (Flip Card) in WordPress Gutenberg | ShapeBlock Pro Flip Box\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/nn_1qHAQ6mY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Flip Box Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Flip Box Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Flip Box Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Flip Box<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Flip Box Block into your page.<\/li>\n\n\n\n<li>Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n<li>Type the title and text of the front side on the box. Click <strong>Back<\/strong> in the block toolbar to type the back side and its button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"260\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-1.webp\" alt=\"Flip Box block in the block inserter\" class=\"wp-image-4160\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-1-300x223.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Flip Box Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Flip Box Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the flip effect, box size, and the content of the front and back.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the box, each side, and the button.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In the editor, the box turns when you point at it while it is not selected. While it is selected, use <strong>Front<\/strong> and <strong>Back<\/strong> in the block toolbar to switch sides.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"670\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2.webp\" alt=\"Flip Box block selected in the editor with its settings sidebar\" class=\"wp-image-4161\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2-600x279.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2-300x140.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2-1024x476.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-2-768x357.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Flip Effect<\/strong>, <strong>Front<\/strong>, and <strong>Back<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Flip Effect<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flip Effect:<\/strong> Choose how the back side appears: Flip, Slide, Push, Zoom In, Zoom Out, or Fade.<\/li>\n\n\n\n<li><strong>Flip Direction:<\/strong> Choose Left to Right, Right to Left, Top to Bottom, or Bottom to Top. This option appears with the Flip, Slide, and Push effects.<\/li>\n\n\n\n<li><strong>Speed (ms):<\/strong> Set how long the change takes.<\/li>\n\n\n\n<li><strong>Width:<\/strong> Set the box width. When empty, the box takes the full width of its place. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Height:<\/strong> Set the box height. When empty, the box is 320px. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Title Tag:<\/strong> Choose the HTML tag for the titles on both sides.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Front<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content:<\/strong> Choose <strong>Typed on the box<\/strong> to type a title and text, or <strong>A template<\/strong> to show a template built from any blocks under ShapeBlock &gt; Templates.<\/li>\n\n\n\n<li><strong>Template:<\/strong> Choose the template to show. A tall template needs a taller box, so increase Height in the Flip Effect panel. This option appears with A template.<\/li>\n\n\n\n<li><strong>Icon or Image:<\/strong> Show <strong>None<\/strong>, an <strong>Icon<\/strong>, or an <strong>Image<\/strong> above the title, then choose the icon or image.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set the side background color or gradient.<\/li>\n\n\n\n<li><strong>Background Image:<\/strong> Choose an image for the side background.<\/li>\n\n\n\n<li><strong>Colour Over the Image (%):<\/strong> Set how strongly the background color covers the image, so text stays readable. This option appears when a background image is set.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Back<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Back panel has the same options as the Front panel, plus a button.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button Link:<\/strong> Enter the URL for the button on the back side.<\/li>\n\n\n\n<li><strong>Open in a New Tab:<\/strong> Open the button link in a new browser tab. This option appears when a link is entered.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1005\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-3.webp\" alt=\"Flip Box block, Settings tab in the sidebar\" class=\"wp-image-4162\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-3.webp 584w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-3-174x300.webp 174w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Box<\/strong>, <strong>Front<\/strong>, <strong>Back<\/strong>, and <strong>Button<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Box<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Corner Radius:<\/strong> Round the box corners.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Set the box border width, style, and color.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Add a shadow around the box.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Front and Back<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each side has its own panel with these options. Options for typed content are hidden when the side uses a template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alignment:<\/strong> Align the content Center, Left, or Right.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the space inside the side. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Icon Colour, Icon Background, Icon Size:<\/strong> Style the icon. These options appear when the side shows an icon.<\/li>\n\n\n\n<li><strong>Icon Box Width and Icon Box Height:<\/strong> Set the size of the box around the icon. When empty, the box is twice the icon size.<\/li>\n\n\n\n<li><strong>Icon Border and Icon Border Radius:<\/strong> Add a border around the icon box and round its corners.<\/li>\n\n\n\n<li><strong>Image Width:<\/strong> Set the image width. This option appears when the side shows an image.<\/li>\n\n\n\n<li><strong>Icon Margin or Image Margin:<\/strong> Set the space around the icon or image.<\/li>\n\n\n\n<li><strong>Title Colour, Title Typography, Title Margin:<\/strong> Style the title.<\/li>\n\n\n\n<li><strong>Text Colour, Text Typography, Description Margin:<\/strong> Style the text under the title.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when the back side is typed on the box.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Colour and Background:<\/strong> Set the button colors.<\/li>\n\n\n\n<li><strong>Text Colour (hover) and Background (hover):<\/strong> Set the button colors when pointed at.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the space inside the button.<\/li>\n\n\n\n<li><strong>Corner Radius:<\/strong> Round the button corners.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the space around the button. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1192\" height=\"1908\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4.webp\" alt=\"Flip Box block, Style tab in the sidebar\" class=\"wp-image-4163\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4.webp 1192w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4-600x960.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4-187x300.webp 187w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4-640x1024.webp 640w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4-768x1229.webp 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-flip-box-4-960x1536.webp 960w\" sizes=\"auto, (max-width: 1192px) 100vw, 1192px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Flip Box Block. These settings apply to the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Flip Box Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Flip Box Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Customize the background of the entire Flip Box Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The background applies to the whole block area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Flip Box Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/flip-box\/\">Flip Box demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Flip Box Block shows a box with a front and a back. When a visitor points at the box, or taps it on a touch screen, it turns over, slides, pushes, zooms, or fades to show the back. Each side can be typed on the box or built from a template. Use it for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-4045","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":927,"total_views":"11","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4045"}],"version-history":[{"count":3,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4045\/revisions"}],"predecessor-version":[{"id":5490,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4045\/revisions\/5490"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4045"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4045"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}