Four-Column Info Boxes
A colorful four-column layout with headings and supporting text. Ideal for showcasing features, FAQs, services, or highlights in a visually engaging way. Each column uses a different background color to create contrast and improve readability.
set 14, 2025
Criado
set 14, 2025
Atualizado
0
Tempos usados
Why do we use it? |
Where can I get? |
Where is it? |
What is this discussion? |
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. |
There are many variations of passages of are available, but the majority have suffered alteration in some form. |
Contrary to popular belief, this is not simply random text. It has roots in a piece of classical Latin literature from 45 BC. |
This is simply dummy text of the printing and typesetting industry. This has been the industry’s standard dummy text. |
Código do padrão
<!-- wp:tableberg/table {"version":"0.5.1","cols":4,"cells":8,"colStyles":{"0":{"background":"#3c82f6","borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"},"border":{"width":"0px","style":"none"}},"1":{"background":"#d5b89c","borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"}},"2":{"background":"#cde7c5","borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"}},"3":{"background":"#f3dce5","border":{"width":"0px","style":"none"},"borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"}},".":[]},"cellPadding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"},"cellSpacing":{"left":"8px","right":"8px"},"enableInnerBorder":false,"responsive":{"last":"stack","breakpoints":{"mobile":{"enabled":true,"headerAsCol":false,"maxWidth":700,"mode":"stack","direction":"col","stackCount":1}}},"innerBorderType":"col"} -->
<table class="wp-block-tableberg-table"><!-- wp:tableberg/cell {"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-0"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<p class="has-text-align-center has-base-color has-text-color has-link-color"><strong>Why do we use it?</strong></p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"col":1,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-2"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>Where can I get?</strong></p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"col":2,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-4"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>Where is it?</strong></p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"col":3,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-6"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>What is this discussion?</strong></p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-1"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<p class="has-text-align-center has-base-color has-text-color has-link-color">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"col":1,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-3"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">There are many variations of passages of are available, but the majority have suffered alteration in some form.</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"col":2,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-5"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Contrary to popular belief, this is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"col":3,"responsiveTarget":"#tableberg-18a6ade7-5bcf-4855-ada9-4d995c4363ce-7"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">This is simply dummy text of the printing and typesetting industry. This has been the industry's standard dummy text.</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell --></table>
<!-- /wp:tableberg/table -->Instruções de uso
Copy and paste this pattern into your WordPress block editor. Replace the headings, colors, and text with your own content. You can also adjust the number of columns (2–4) depending on your needs.
Padrões relacionados
Exibir todos os padrões 