{"id":1612,"date":"2025-03-29T15:46:45","date_gmt":"2025-03-29T15:46:45","guid":{"rendered":"https:\/\/tableberg.com\/?p=1612"},"modified":"2025-03-29T15:46:48","modified_gmt":"2025-03-29T15:46:48","slug":"como-criar-caixas-de-conteudo-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-create-content-boxes-in-wordpress\/","title":{"rendered":"Como criar caixas de conte\u00fado no WordPress"},"content":{"rendered":"<p>Uma caixa de conte\u00fado \u00e9 um cont\u00eainer visualmente distinto por meio do qual voc\u00ea pode enquadrar um conte\u00fado espec\u00edfico que o destaca dos demais. Ela ajuda a destacar as principais informa\u00e7\u00f5es sobre recursos ou an\u00fancios especiais, chamando a aten\u00e7\u00e3o dos usu\u00e1rios para detalhes importantes.<\/p>\n\n\n\n<p>As caixas de conte\u00fado s\u00e3o adequadas para mostrar se\u00e7\u00f5es de call-to-action, depoimentos, avalia\u00e7\u00f5es e os principais recursos de produtos ou servi\u00e7os. H\u00e1 v\u00e1rias maneiras de criar caixas de conte\u00fado em sites do WordPress.<\/p>\n\n\n\n<p>Na pr\u00f3xima se\u00e7\u00e3o deste artigo, mostraremos tr\u00eas m\u00e9todos pr\u00e1ticos de como criar caixas de conte\u00fado no WordPress. Fique conosco at\u00e9 o fim.<\/p>\n\n\n<div class=\"wp-block-tableberg-wrapper wp-block-tableberg-table\" >\n\t\t\t<div class=\"tableberg-table-wrapper\" style=\"border-color: #abb8c3; \">\n\t\t\t\t<table class = \"has-inner-border\" style=\"border-spacing: 0 0; --tableberg-inner-border-top: none; --tableberg-inner-border-right: 1px solid #abb8c3; --tableberg-inner-border-bottom: 1px solid #abb8c3; --tableberg-inner-border-left: none; --tableberg-inner-border-top-first: 1px solid #abb8c3; --tableberg-inner-border-left-first: 1px solid #abb8c3; \" data-tableberg-header=\"converted\" data-tableberg-footer=\"\" data-tableberg-responsive data-tableberg-rows=\"4\" data-tableberg-cols=\"3\" data-tableberg-mobile-width=\"700\" data-tableberg-mobile-mode=\"stack\" data-tableberg-mobile-direction=\"row\" data-tableberg-mobile-count=\"1\" data-tableberg-mobile-header=\"1\" ><colgroup><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><\/colgroup><tbody><tr class=\"tableberg-header\" style=\"\">\n<th data-tableberg-row=\"0\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>M\u00e9todo<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Plug-in<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Pr\u00e9via<\/p>\n<\/div><\/th>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"1\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-e6a8e2ba9683099d6dff8d7bf30e4e6f\" style=\"color:#671feb\"><a href=\"#Using-the-Columns-Block\">Usando o bloco Columns<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">N\u00e3o \u00e9 necess\u00e1rio<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Columns-Block.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"2\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-86045b5d02e709189188f7a38d01267f\" style=\"color:#671feb\"><a href=\"#Using-the-Tableberg-Block\">Uso do bloco Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-320d99aea727b6d31c1ea1b4e8be13e5\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Tableberg-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"3\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-c14ddc11fcd1d98d761080ec059ae1db\" style=\"color:#671feb\"><a href=\"#Using-the-Styled-List-Block\">Uso do bloco de lista com estilo<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-d58cb3b3f80d24b68f17ea7a536e0e5d\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocos definitivos<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Boxes-using-the-Ultimate-Blocks-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><\/tbody><\/table>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-using-the-columns-block\">M\u00e9todo 1: Usando o bloco Columns<\/h2>\n\n\n\n<p>Voc\u00ea pode criar e projetar uma caixa de conte\u00fado de n\u00edvel b\u00e1sico usando o bloco Columns padr\u00e3o do WordPress. Siga as etapas explicadas abaixo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-01-add-the-columns-block-to-the-editor\">Etapa 01: Adicionar o bloco Columns ao Editor<\/h3>\n\n\n\n<p>Encontre o <strong>Bloco de colunas<\/strong> da biblioteca de blocos do Gutenberg pressionando o bot\u00e3o <strong>bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong> e adicione-o ao seu editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp\" alt=\"Adicione o bloco Columns ao seu editor\" class=\"wp-image-435\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Selecione a coluna de uma c\u00e9lula entre as op\u00e7\u00f5es dispon\u00edveis.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png\" alt=\"Selecione o layout de coluna de c\u00e9lula \u00fanica\" class=\"wp-image-1629\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-02-add-content-blocks-to-the-column\">Etapa 02: Adicionar blocos de conte\u00fado \u00e0 coluna<\/h3>\n\n\n\n<p>O bloco Columns permitir\u00e1 que voc\u00ea adicione outros blocos dentro dele. Voc\u00ea pode adicionar qualquer bloco que desejar para selecionar seu conte\u00fado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png\" alt=\"Adicionar blocos de conte\u00fado \u00e0 coluna\" class=\"wp-image-1630\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Clique no bot\u00e3o <strong>\u00edcone de mais (+)<\/strong> no bloco da coluna. Isso abrir\u00e1 a biblioteca de blocos do Gutenberg, da qual voc\u00ea pode escolher e adicionar o bloco <strong>bloco de par\u00e1grafos<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png\" alt=\"Adicionar o bloco Paragraph ao bloco de colunas\" class=\"wp-image-1631\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Podemos ver que j\u00e1 adicionamos conte\u00fado de texto ao bloco da coluna. Depois disso, voc\u00ea pode adicionar mais blocos \u00e0s colunas, conforme desejar. Suponha que adicionaremos o bloco Image.<\/p>\n\n\n\n<p>Clique no bot\u00e3o <strong>\u00cdcone de colunas<\/strong> na barra de ferramentas. Pressione o bot\u00e3o <strong>\u00edcone de mais (+)<\/strong>. Localize e selecione o <strong>Bloco de imagens<\/strong> da biblioteca.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png\" alt=\"Adicionar o bloco de imagens ao bloco de colunas\" class=\"wp-image-1632\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode ver que adicionamos uma imagem ao bloco de colunas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png\" alt=\"Imagem adicionada ao bloco de colunas\" class=\"wp-image-1633\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-03-customize-the-entire-columns-block\">Etapa 03: Personalizar todo o bloco de colunas<\/h3>\n\n\n\n<p><strong>Selecione a se\u00e7\u00e3o inteira da coluna<\/strong> clicando no \u00edcone de coluna na barra de ferramentas. V\u00e1 para a se\u00e7\u00e3o <strong>Guia Configura\u00e7\u00f5es<\/strong>. Voc\u00ea pode ajustar o <strong>Largura<\/strong> da coluna da respectiva op\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png\" alt=\"Personalizar todo o bloco de colunas\" class=\"wp-image-1634\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Em seguida, v\u00e1 at\u00e9 o <strong>Guia Estilos<\/strong>. Voc\u00ea ter\u00e1 op\u00e7\u00f5es para modificar a cor do texto, a cor do plano de fundo, a tipografia e as dimens\u00f5es do bloco.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png\" alt=\"Estilizar o bloco de colunas\" class=\"wp-image-1635\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Rolando a se\u00e7\u00e3o para baixo, voc\u00ea ter\u00e1 mais op\u00e7\u00f5es para adicionar <strong>espa\u00e7amento entre blocos<\/strong> e <strong>fronteira<\/strong> para o bloco de colunas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png\" alt=\"Adicionar espa\u00e7amento de bloco e borda ao bloco de colunas\" class=\"wp-image-1636\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_7ef4228f-ed3e-4329-8d24-eec03fe9aa6e\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-method-2-using-the-tableberg-plugin\">M\u00e9todo 2: Usando o plug-in TableBerg<\/h2>\n\n\n\n<p>O TableBerg \u00e9 um poderoso plug-in de cria\u00e7\u00e3o de tabelas que pode potencializar a solu\u00e7\u00e3o padr\u00e3o de cria\u00e7\u00e3o de tabelas do WordPress. Voc\u00ea tamb\u00e9m pode criar caixas de conte\u00fado atraentes com o plug-in. Vamos ver como fazer isso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-01-install-and-activate-the-tableberg-plugin\">Etapa 01: Instalar e ativar o plug-in TableBerg<\/h3>\n\n\n\n<p>Como no m\u00e9todo acima, v\u00e1 para <strong>Plug-ins &gt; Adicionar novo plug-in<\/strong>. Encontre o <strong>Plug-in TableBerg<\/strong> digitando seu nome na caixa de pesquisa. <strong>Instalar<\/strong> e <strong>ativar<\/strong> isso.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin.png\" alt=\"Instale e ative o plug-in TableBerg\" class=\"wp-image-156\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-1024x523.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-step-02-add-the-tableberg-block-to-the-editor\">Etapa 02: Adicionar o bloco TableBerg ao Editor<\/h3>\n\n\n\n<p>O plug-in vem com um bloco chamado TableBerg. Adicione-o ao editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"Encontre e adicione o bloco TableBerg ao seu editor Gutenberg\" class=\"wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Se voc\u00ea pensar em criar uma tabela, poder\u00e1 definir o n\u00famero de linhas e colunas aqui, como o bloco de tabela padr\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp\" alt=\"Definir coluna e linha da tabela\" class=\"wp-image-1031\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Mas selecione a linha 1 e a coluna 0 enquanto criamos uma caixa de conte\u00fado. Voc\u00ea pode ver que o layout foi criado instantaneamente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png\" alt=\"Adicionar conte\u00fado \u00e0 caixa TableBerg\" class=\"wp-image-1645\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-03-add-content-to-the-tableberg-box\">Etapa 03: Adicionar conte\u00fado \u00e0 caixa TableBerg<\/h3>\n\n\n\n<p>O TableBerg permite que voc\u00ea adicione diferentes tipos de conte\u00fado \u00e0s suas linhas e colunas, adicionando blocos de conte\u00fado.<\/p>\n\n\n\n<p>Depois de posicionar o cursor na caixa, voc\u00ea ver\u00e1 a op\u00e7\u00e3o de bloqueio aparecer no canto inferior direito.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png\" alt=\"Adicionar conte\u00fado \u00e0 caixa TableBerg\" class=\"wp-image-1646\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Selecione um a um os blocos que deseja adicionar \u00e0 caixa para selecionar o conte\u00fado desejado. Primeiro, adicionaremos o bloco de imagem.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png\" alt=\"Adicionar o bloco de imagem\" class=\"wp-image-1647\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Em seguida, voc\u00ea pode ver que adicionamos um texto descritivo sobre o produto. Adicionamos e usamos a tag <strong>Bloco de par\u00e1grafos<\/strong> para isso.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png\" alt=\"Adicionar par\u00e1grafo ao bloco\" class=\"wp-image-1648\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Por fim, adicionamos um bot\u00e3o de CTA.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png\" alt=\"Adicionar um bot\u00e3o de CTA \u00e0 caixa do TableBerg\" class=\"wp-image-1649\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-04-customize-the-tableberg-box\">Etapa 04: Personalizar a caixa TableBerg<\/h3>\n\n\n\n<p>Voc\u00ea pode personalizar cada bloco individualmente que adicionou \u00e0 caixa TableBerg. Depois disso, voc\u00ea pode personalizar e estilizar toda a caixa TableBerg.<\/p>\n\n\n\n<p>N\u00e3o estamos mostrando como personalizar o bloco individual, pois isso tornar\u00e1 o tutorial muito longo. Voc\u00ea pode ver isso em nossa p\u00e1gina de documenta\u00e7\u00e3o.<\/p>\n\n\n\n<p>Selecione a caixa inteira clicando no \u00edcone TableBerg na barra de ferramentas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png\" alt=\"Personalizar configura\u00e7\u00f5es da caixa TableBerg\" class=\"wp-image-1650\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Na guia Settings (Configura\u00e7\u00f5es), voc\u00ea pode definir a largura desejada para a caixa.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png\" alt=\"Personalizar a largura da tabela\" class=\"wp-image-1651\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Do <strong>Guia Estilos<\/strong>Se voc\u00ea quiser personalizar a cor do plano de fundo, o preenchimento, a margem e o espa\u00e7o da caixa, poder\u00e1 faz\u00ea-lo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box.webp\" alt=\"Personalizar a caixa de conte\u00fado\" class=\"wp-image-1652\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Assim, voc\u00ea pode criar uma caixa de contexto com o plug-in TableBerg.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_2e72e3e8-3320-48be-b190-44b2a8e835a7\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"9-method-3-using-the-ultimate-blocks-plugin\">M\u00e9todo 3: Usando o plug-in Ultimate Blocks<\/h2>\n\n\n\n<p>O Ultimate Blocks \u00e9 um plugin de marketing de conte\u00fado promissor com mais de 25 blocos personalizados para potencializar seu editor Gutenberg. Ele tem v\u00e1rios blocos impressionantes com os quais voc\u00ea pode criar mais caixas de conte\u00fado de boa apar\u00eancia em seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-01-install-and-activate-the-ultimate-blocks-plugin\">Etapa 01: Instale e ative o plug-in Ultimate Blocks<\/h3>\n\n\n\n<p>Ir para <strong>Plug-ins &gt; Adicionar novo plug-in<\/strong>. Encontre o <strong>Plug-in Ultimate Blocks<\/strong> digitando seu nome na caixa de pesquisa. <strong>Instalar<\/strong> e <strong>ativar<\/strong> assim que o plug-in for exibido abaixo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp\" alt=\"Instale e ative o plug-in Ultimate Blocks\" class=\"wp-image-456\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-02-add-the-styled-box-block-of-the-plugin-to-your-gutenberg-editor\">Etapa 02: Adicione o bloco de caixa estilizada do plug-in ao seu editor Gutenberg<\/h3>\n\n\n\n<p>O plug-in Ultimate Blocks inclui um bloco dedicado chamado <strong>Caixa com estilo<\/strong> para criar caixas de conte\u00fado. Localize e adicione-a ao editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png\" alt=\"Adicionar o bloco estilizado do plug-in ao seu editor do Gutenberg\" class=\"wp-image-1637\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>O bloco oferece quatro tipos de caixas. Escolha a que preferir para exibir sua mensagem. Cada uma delas tem um conjunto exclusivo de funcionalidades.<\/p>\n\n\n\n<p>Para o tutorial, selecionaremos a op\u00e7\u00e3o <strong>Caixa de recursos<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png\" alt=\"Caixas com estilo\" class=\"wp-image-1638\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A caixa de recursos permite que voc\u00ea adicione uma imagem, um t\u00edtulo e uma descri\u00e7\u00e3o. Espero que voc\u00ea possa fazer isso sozinho.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png\" alt=\"Coisas que voc\u00ea pode adicionar \u00e0 caixa de recursos\" class=\"wp-image-1639\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-step-03-add-content-to-the-block\">Etapa 03: Adicionar conte\u00fado ao bloco<\/h3>\n\n\n\n<p>Por padr\u00e3o, o bloco permite que voc\u00ea exiba um produto e descreva seus recursos. Mas voc\u00ea pode adicionar e exibir v\u00e1rios produtos com o bloco. <strong>Selecione o tipo de coluna<\/strong> voc\u00ea deseja definir quantos produtos deseja exibir.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png\" alt=\"Selecione o tipo de coluna\" class=\"wp-image-1640\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-768x391.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Agora, adicione conte\u00fado \u00e0s op\u00e7\u00f5es que voc\u00ea v\u00ea na se\u00e7\u00e3o <strong>Bloco Styled Box<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png\" alt=\"Adicionar conte\u00fado ao bloco da caixa estilizada\" class=\"wp-image-1641\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode ver que adicionamos conte\u00fado ao bloco.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block.png\" alt=\"Conte\u00fado adicionado ao bloco da caixa estilizada\" class=\"wp-image-1642\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-step-04-customize-and-stylize-the-styled-box-block\">Etapa 04: Personalizar e estilizar o bloco Styled Box<\/h3>\n\n\n\n<p>Venha para o <strong>Guia Configura\u00e7\u00f5es<\/strong>. A partir do <strong>Selecione a op\u00e7\u00e3o Modo<\/strong>Se voc\u00ea n\u00e3o tiver uma caixa de texto, poder\u00e1 alterar a caixa Feature para outras caixas estilizadas, conforme mostrado acima, como a caixa de notifica\u00e7\u00e3o, a caixa com borda e a caixa de n\u00famero.<\/p>\n\n\n\n<p>Depois disso, a partir do <strong>Op\u00e7\u00e3o de controle responsivo<\/strong>Se voc\u00ea quiser, pode ocultar o bloqueio de qualquer tipo de dispositivo espec\u00edfico.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png\" alt=\"Personalizar o bloco Styled Box\" class=\"wp-image-1643\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Em seguida, v\u00e1 at\u00e9 o <strong>Guia Estilos<\/strong>. Voc\u00ea pode modificar o <strong>Acolchoamento<\/strong> e <strong>Margem<\/strong> do bloco a partir dessa guia.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png\" alt=\"Estilizar o bloco Styled box\" class=\"wp-image-1644\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Assim, voc\u00ea pode criar uma caixa de conte\u00fado usando o plug-in Ultimate Blocks.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_61102040-edd2-4f4b-9e13-dd2f6cb65bdb\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"14-finishing-notes\">Notas de finaliza\u00e7\u00e3o!<\/h3>\n\n\n\n<p>Ultimate Blocks e TableBerg s\u00e3o dois plug-ins multifuncionais que visam revolucionar o sistema Gutenberg, permitindo que os usu\u00e1rios criem conte\u00fado sofisticado com facilidade. <\/p>\n\n\n\n<p>O TableBerg ainda est\u00e1 em processo de desenvolvimento e promete apresentar muitos recursos avan\u00e7ados em breve. Por outro lado, o Ultimate Blocks j\u00e1 \u00e9 um plugin popular usado por mais de 60 mil sites em todo o mundo.<\/p>\n\n\n\n<p>Se tiver alguma d\u00favida sobre eles, fique \u00e0 vontade para nos fazer perguntas a qualquer momento por meio da caixa de coment\u00e1rios.<\/p>\n\n\n\n<p><strong>Leia tamb\u00e9m: <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/tableberg.com\/pt\/melhores-plugins-de-caixa-do-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Melhores plug-ins de caixa do WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/pt\/como-criar-caixas-de-texto-no-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como criar caixas de texto no WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/pt\/como-criar-caixas-de-informacoes-no-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como criar caixas de informa\u00e7\u00f5es impressionantes no WordPress<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>A content box is a visually distinct container by which you can frame specific content that makes it stand out from the rest. It helps you highlight key feature information or special announcements, drawing users\u2019 attention to important details. Content boxes are suitable to showcase call-to-action sections, testimonials, reviews, and key features of products or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8203,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[87,38],"class_list":["post-1612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-box","tag-content-presentation"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/How-to-Create-Content-Boxes-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/pt\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=1612"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"predecessor-version":[{"id":8206,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1612\/revisions\/8206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/8203"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}