Criar mesas bonitas <\/strong> Depois de instalar os plug-ins em seu site, siga o tutorial abaixo.<\/p>\n\n\n\n Adicione o Bloco Tableberg<\/strong> para o editor.<\/p>\n\n\n\n Defina o n\u00famero de linhas e colunas de seu site de acordo com o n\u00famero de caixas de recursos que voc\u00ea deseja criar.<\/p>\n\n\n\n Como criaremos tr\u00eas caixas de recursos, selecionamos o n\u00famero de colunas e linhas 2*2.<\/p>\n\n\n\n O n\u00famero definido de linhas e colunas foi adicionado.<\/p>\n\n\n\n Uma caixa de recursos n\u00e3o tem sentido sem uma imagem do respectivo produto. Adicione a Bloco de imagens<\/strong> para uma c\u00e9lula adequada.<\/p>\n\n\n\n Adicione uma imagem a uma c\u00e9lula adequada. Voc\u00ea pode redimensionar a imagem arrastando o \u00edcone circular. <\/p>\n\n\n\n A classifica\u00e7\u00e3o por estrelas \u00e9 uma forma intuitiva de expressar a qualidade e a popularidade de um produto. Ela tamb\u00e9m ajuda no envolvimento do cliente. Portanto, adicione a Bloco de classifica\u00e7\u00e3o por estrelas<\/strong> para a mesa.<\/p>\n\n\n\n Por baixo do Guia Configura\u00e7\u00f5es<\/strong> na barra lateral direita, defina valores para o bloco Star Rating. Voc\u00ea pode at\u00e9 mesmo redimensionar o bloco, se necess\u00e1rio.<\/p>\n\n\n\n Com um bot\u00e3o de CTA, voc\u00ea pode motivar os usu\u00e1rios a comprar ou visitar a p\u00e1gina do produto. Portanto, adicione o bot\u00e3o Bloco de bot\u00f5es<\/strong> sob a classifica\u00e7\u00e3o.<\/p>\n\n\n\n Ir para o Guia Estilos<\/strong>mantendo o bloco de bot\u00f5es selecionado. <\/p>\n\n\n\n A partir da\u00ed, voc\u00ea pode alterar o bot\u00e3o\u00a0cor do texto, cor do plano de fundo, tamanho, preenchimento,\u00a0<\/strong>e<\/span>d conforme necess\u00e1rio.<\/p>\n\n\n\n Como voc\u00ea precisa de mais espa\u00e7o para adicionar a lista de recursos e a descri\u00e7\u00e3o, \u00e9 melhor mesclar duas c\u00e9lulas. Selecionar c\u00e9lulas<\/strong> com seu cursor por segurando a tecla Shift<\/strong>.<\/p>\n\n\n\n Clique em Edit Table (Editar tabela)<\/strong> na barra de ferramentas. Pressione o bot\u00e3o Op\u00e7\u00e3o de mesclagem<\/strong> na lista.<\/p>\n\n\n\n Adicione o Bloco de par\u00e1grafos<\/strong> para escrever texto na caixa de recursos.<\/p>\n\n\n\n \u00c9 melhor mostrar os recursos do produto em uma lista. Portanto, adicione o Bloco de lista com estilo<\/strong>.<\/p>\n\n\n\n Espero que voc\u00ea possa listar os recursos de seu produto como na imagem abaixo. Voc\u00ea pode alterar o \u00edcone da lista, aumentar seu tamanho,<\/strong> e modificar sua cor<\/strong>.<\/p>\n\n\n\n Por fim, adicione uma breve descri\u00e7\u00e3o de seu produto usando o bloco Par\u00e1grafo abaixo da lista de recursos.<\/p>\n\n\n\n Portanto, o conte\u00fado de sua caixa de recursos est\u00e1 pronto. Agora, vamos personalizar um pouco mais as caixas.<\/p>\n\n\n\n O Tableberg permite personalizar tanto o externo<\/strong> e bordas internas<\/strong>. <\/p>\n\n\n\n Ir para o Guia Estilos<\/strong>. Role a tela um pouco para baixo. Voc\u00ea ter\u00e1 estas op\u00e7\u00f5es. Defina as cores desejadas<\/strong> e espessura das bordas<\/strong>.<\/p>\n\n\n\n Uma fita \u00e9 uma pequena etiqueta ou faixa decorativa que ajuda a destacar informa\u00e7\u00f5es importantes, como descontos, novidades, etc. Adicione a Bloco de fitas<\/strong> para a c\u00e9lula mais pr\u00f3xima.<\/p>\n\n\n\n Indo para o Guia Configura\u00e7\u00f5es<\/strong>, escreva um c\u00f3pia de fita<\/strong> e consertar sua posi\u00e7\u00e3o<\/strong> na caixa de recursos.<\/p>\n\n\n\n Por fim, v\u00e1 para a se\u00e7\u00e3o Guia Estilos<\/strong>. <\/p>\n\n\n\n Selecione o texto<\/strong> e cor de fundo<\/strong> para a fita.<\/p>\n\n\n\n V\u00e1 para a p\u00e1gina de visualiza\u00e7\u00e3o. Voc\u00ea ver\u00e1 que o recurso est\u00e1 funcionando bem.<\/p>\n\n\n\n Espero que voc\u00ea tenha gostado deste artigo. Voc\u00ea pode fazer mais designs com o plug-in Tableberg. Por exemplo, explore mais duas postagens antes de sair. Essas postagens s\u00e3o:<\/p>\n\n\n\n Se voc\u00ea tiver alguma d\u00favida sobre o plug-in, informe-nos por meio da caixa de coment\u00e1rios. Entraremos em contato com voc\u00ea em breve com uma resposta satisfat\u00f3ria.<\/p>","protected":false},"excerpt":{"rendered":" A feature box is a designed area on a web page that draws attention to specific content, products, and services. Feature boxes are designed with elements like images, icons, concise text, and buttons. Tableberg is a multipurpose table-builder plugin. It can help you create wonderful layouts for your feature boxes. In this tutorial post, we’ll […]<\/p>\n","protected":false},"author":1,"featured_media":3189,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[10,109,102],"class_list":["post-3138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-customize-table","tag-customize-web-pages","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/How-to-Add-Feature-Boxes-in-WordPress-website.webp","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\/3138","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=3138"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/3138\/revisions"}],"predecessor-version":[{"id":9030,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/3138\/revisions\/9030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/3189"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=3138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=3138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=3138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Com o Block Editor<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\")
<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nEtapa 01: Adicionar o bloco Tableberg ao Editor<\/h2>\n\n\n\n
![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\")
<\/figure>\n\n\n\n![\"Definir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\")
<\/figure>\n\n\n\n![\"Linhas](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-are-added.webp\")
<\/figure>\n\n\n\nEtapa 02: Adicionar uma imagem do produto \u00e0 caixa<\/h2>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-Product-Image-to-the-Box-1.webp\")
<\/figure>\n\n\n\n![\"Redimensionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Resize-image-into-the-feature-box.webp\")
<\/figure>\n\n\n\nEtapa 03: Adicionar uma classifica\u00e7\u00e3o por estrelas<\/h2>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-star-rating-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Definir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-value-for-the-Star-Rating-block.webp\")
<\/figure>\n\n\n\nEtapa 04: Adicionar um bot\u00e3o de CTA<\/h2>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-CTA-Button-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"Personalize](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-button-on-the-feature-box.webp\")
<\/figure>\n\n\n\nEtapa 05: Adicionar a lista de recursos e a descri\u00e7\u00e3o<\/h2>\n\n\n\n
![\"Mesclar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Merge-cells-for-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-Paragraph-block-to-the-feature-box-to-add-text.webp\")
<\/figure>\n\n\n\n![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-feature-list-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Liste](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/List-your-product-features.webp\")
<\/figure>\n\n\n\n![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-short-description-about-your-product.webp\")
<\/figure>\n\n\n\nEtapa 06: Personalizar as bordas da caixa de recursos<\/h2>\n\n\n\n
![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-Feature-Box-Borders.webp\")
<\/figure>\n\n\n\nEtapa 07: Adicionar faixa de op\u00e7\u00f5es \u00e0 caixa de recursos<\/h2>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-Ribbon-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"Defina](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-the-ribbon-text-and-its-position-on-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Escolha](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Choose-color-the-ribbon.webp\")
<\/figure>\n\n\n\nEtapa 08: Visualizar a caixa de recursos<\/h2>\n\n\n\n
![\"Visualizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Preview-the-Feature-Box.webp\")
<\/figure>\n\n\n\nConclus\u00e3o<\/h2>\n\n\n\n
\n