{"id":984,"date":"2025-01-26T09:35:32","date_gmt":"2025-01-26T09:35:32","guid":{"rendered":"https:\/\/tableberg.com\/?p=984"},"modified":"2025-01-26T09:35:35","modified_gmt":"2025-01-26T09:35:35","slug":"como-criar-caixas-de-texto-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-create-text-boxes-in-wordpress\/","title":{"rendered":"Como criar caixas de texto no WordPress (3 tipos)"},"content":{"rendered":"

Uma caixa de texto \u00e9 uma \u00e1rea designada no editor do Gutenberg onde voc\u00ea pode criar e publicar textos com diferentes op\u00e7\u00f5es de tipografia, fonte, cor, estiliza\u00e7\u00e3o e outras op\u00e7\u00f5es de formata\u00e7\u00e3o.<\/p>\n\n\n\n

Quando voc\u00ea deseja destacar um an\u00fancio importante, um depoimento ou uma breve descri\u00e7\u00e3o de produto, as caixas de texto permitem que voc\u00ea fa\u00e7a isso. Neste artigo, mostraremos a voc\u00ea v\u00e1rias maneiras de criar caixas de texto no WordPress.<\/p>\n\n\n\n

\n
\"\"
Tipo 1:<\/mark> Caixa de texto com fundo colorido \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Tipo 2:<\/mark> Caixa de texto com borda \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Tipo 3:<\/mark> Caixas de texto na tabela \u21b4<\/a><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n\n

Tipo 1: Adicionar uma caixa de texto com um plano de fundo colorido<\/h2>\n\n\n\n

Esse \u00e9 um processo simples e direto. Voc\u00ea s\u00f3 precisa adicionar uma cor ao plano de fundo do bloco de par\u00e1grafo espec\u00edfico.<\/p>\n\n\n\n

Etapa 1: Selecione um texto em sua postagem\/p\u00e1gina<\/h3>\n\n\n\n

Abra o post\/p\u00e1gina onde voc\u00ea deseja adicionar a caixa de texto. Selecione o texto desejado<\/strong> colocando o cursor sobre o par\u00e1grafo espec\u00edfico. <\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

Etapa 2: Adicionar uma cor ao plano de fundo do bloco<\/h3>\n\n\n\n

Ir para o Guia Estilos,<\/strong> conforme indicado na imagem abaixo. Clique no bot\u00e3o Op\u00e7\u00e3o de plano de fundo<\/strong> e selecione uma cor. A cor ser\u00e1 aplicada instantaneamente ao bloco, que voc\u00ea poder\u00e1 ver em tempo real.<\/p>\n\n\n\n

Quando a cor for aplicada ao redor e dentro de todo o bloco, parecer\u00e1 que uma caixa foi criada ao redor dele, criando uma caixa de texto.<\/p>\n\n\n\n

\"Adicione<\/figure>\n\n\n\n

Assim, voc\u00ea pode criar uma caixa de texto com um fundo colorido.<\/p>\n\n\n\n

\n\n\n\n

Tipo 2: Adicionar um texto com bordas<\/h2>\n\n\n\n

Adicionar bordas ao redor do bloco \u00e9 outra maneira f\u00e1cil de criar uma caixa de texto. Siga as etapas explicadas abaixo.<\/p>\n\n\n\n

Etapa 1: Selecione o texto no Editor<\/h3>\n\n\n\n

Selecione um texto novamente clicando no bloco de par\u00e1grafo desejado, como mostramos no m\u00e9todo acima.<\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

Etapa 2: convert\u00ea-lo em um bloco de grupo<\/h3>\n\n\n\n

Por padr\u00e3o, o bloco de par\u00e1grafo n\u00e3o permite que voc\u00ea adicione uma borda ao redor dele. Portanto, converta-o no bloco Bloco de grupos<\/strong>. <\/p>\n\n\n\n

Clique no bot\u00e3o \u00cdcone de par\u00e1grafo<\/strong> na barra de ferramentas do Gutenberg. Aparecer\u00e1 uma lista com a op\u00e7\u00e3o Group no final. Clique no bot\u00e3o Op\u00e7\u00e3o de grupo<\/strong> na lista.<\/p>\n\n\n\n

O bloco ser\u00e1 convertido em um bloco de grupo.<\/p>\n\n\n\n

\"Converter<\/figure>\n\n\n\n

Etapa 3: Adicionar borda e raio ao bloco<\/h3>\n\n\n\n

Ir para o Guia Estilos<\/strong> do bloco selecionado. Role a guia um pouco para baixo.<\/p>\n\n\n\n

\"V\u00e1<\/figure>\n\n\n\n

Voc\u00ea ver\u00e1 o Op\u00e7\u00e3o de borda<\/strong>. Coloque um valor de pixel para definir a largura da borda. Voc\u00ea tamb\u00e9m pode adicionar raio e preenchimento ao bloco, se desejar. <\/p>\n\n\n\n

Portanto, sua caixa de texto est\u00e1 pronta. A adi\u00e7\u00e3o de raio e preenchimento pode tornar a caixa de texto mais apresent\u00e1vel. Por isso, voc\u00ea pode considerar adicion\u00e1-los.<\/p>\n\n\n\n

\"Adicione<\/figure>\n\n\n\n
\n\n\n\n

Tipo 3: Adicionar caixas de texto na tabela<\/h2>\n\n\n\n

Muitas vezes, voc\u00ea pode querer criar v\u00e1rias caixas de texto na mesma linha. Mas isso n\u00e3o \u00e9 poss\u00edvel com o bloco de par\u00e1grafos padr\u00e3o. Entretanto, voc\u00ea pode fazer isso facilmente criando uma tabela. <\/p>\n\n\n\n

Tableberg<\/strong><\/a> \u00e9 um plug-in de cria\u00e7\u00e3o de tabelas para fazer isso. Instalar<\/strong> e ativar<\/strong> o plug-in e siga as etapas mostradas abaixo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Etapa 01: Adicionar o bloco TableBerg ao seu site<\/h3>\n\n\n\n

Basta encontrar o Bloco TableBerg<\/strong> na biblioteca de blocos do Gutenberg e adicione-o ao seu editor de postagem\/p\u00e1gina.<\/p>\n\n\n\n

\"Adicione<\/figure>\n\n\n\n

Etapa 02: Criar colunas conforme necess\u00e1rio<\/h3>\n\n\n\n

Como a tabela padr\u00e3o do Gutenberg, criar quantas colunas forem necess\u00e1rias<\/strong> sobre a mesa.<\/p>\n\n\n\n

\"Crie<\/figure>\n\n\n\n

Etapa 03: Adicionar conte\u00fado \u00e0s colunas da tabela<\/h3>\n\n\n\n

Embora o TableBerg permita que voc\u00ea adicione listas, bot\u00f5es de CTA e imagens \u00e0 tabela, adicionamos texto simples apenas para explicar o tutorial.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Etapa 04: Adicionar cores \u00e0s colunas da tabela<\/h3>\n\n\n\n

Selecione uma coluna<\/strong> na mesa, colocando o cursor sobre ela. V\u00e1 para a se\u00e7\u00e3o Guia Estilos<\/strong>. Clique no bot\u00e3o Op\u00e7\u00e3o de plano de fundo<\/strong> e selecione uma cor. Voc\u00ea ver\u00e1 que a cor foi aplicada \u00e0 coluna.<\/p>\n\n\n\n

\"Colorir<\/figure>\n\n\n\n

Seguindo o mesmo m\u00e9todo, aplique diferentes tipos de cores a outras colunas da tabela. Voc\u00ea pode ver que aplicamos quatro cores diferentes \u00e0s colunas da tabela. <\/p>\n\n\n\n

Portanto, suas caixas de texto est\u00e3o prontas. Mas se voc\u00ea quiser remover a borda da tabela, siga a pr\u00f3xima etapa.<\/p>\n\n\n\n

\"Aplicar<\/figure>\n\n\n\n

Etapa 05: Remover a borda da tabela<\/h3>\n\n\n\n

Selecione a tabela inteira clicando duas vezes no \u00edcone TableBerg na barra de ferramentas. V\u00e1 para a se\u00e7\u00e3o Guia Estilos<\/strong> na barra lateral direita. Role a tela um pouco para baixo. Desative a op\u00e7\u00e3o Ativar borda interna<\/strong>. As bordas da tabela ficar\u00e3o invis\u00edveis.<\/p>\n\n\n\n

\"Remova<\/figure>\n\n\n\n
\n\n\n\n

Conclus\u00e3o<\/h2>\n\n\n\n

Assim, voc\u00ea pode criar caixas de texto no WordPress de v\u00e1rias maneiras. Mas antes de concluir, queremos dizer uma coisa: cada um desses m\u00e9todos pode n\u00e3o ser eficaz em todos os casos. <\/p>\n\n\n\n

Dependendo do seu tipo de conte\u00fado, voc\u00ea deve usar um m\u00e9todo adequado que mantenha a legibilidade. Se gostou desta postagem, compartilhe seu feedback na caixa de coment\u00e1rios abaixo. <\/p>\n\n\n\n

Explore nossa arquivo do blog<\/a> para conhecer mais artigos interessantes sobre o WordPress.<\/p>","protected":false},"excerpt":{"rendered":"

A text box is a designated area within the Gutenberg editor where you can craft and publish texts with different typography, font, color, stylization, and other formatting options. When you want to highlight an important announcement, testimonial, or a brief product description, text boxes allow you to do so. In this article, we’ll show you […]<\/p>\n","protected":false},"author":1,"featured_media":7081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[38,9,39],"class_list":["post-984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-presentation","tag-tableberg","tag-text-boxes"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Create-Text-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\/984","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=984"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":7083,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/984\/revisions\/7083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/7081"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}