--- title: "Imagens com bloco de texto" slug: "image-and-text" description: "Add text and an image to the home page using the Image and text block. This is similar to the Text block but also includes an image. For example, you want to showcase a feature and its description" tags: ["Customization", "Body blocks"] updated: 2026-06-22T08:58:37Z published: 2026-06-22T08:58:37Z canonical: "docs.document360.com/image-and-text" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Imagens com bloco de texto O bloco Imagem com texto permite que você coloque uma imagem junto a um título e um parágrafo na página inicial da sua base de conhecimento. Enquanto o [bloco de texto enriquecido](https://docs.document360.com/docs/pt/text-block) é puramente baseado em texto, esse bloco traz uma dimensão visual, combinando uma imagem com texto estruturado para que os leitores tenham contexto e imagens juntos em um único layout. Isso o torna bem adequado para conteúdos onde uma captura de tela, ilustração ou miniatura adiciona significados que o texto sozinho não consegue transmitir. ![Knowledge base site showing an Image with text block with an image, heading, and paragraph displayed side by side](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-Image_with_text_knowlegde_base_site_view.png) --- ## Quando usar a Imagem com bloco de texto - **Destaques de recursos** - Destaque um produto específico com uma captura de tela ou ilustração junto com uma breve descrição. - **Anúncios de lançamento** - Combine uma nova imagem de recurso com um breve parágrafo descrevendo o que há de novo e onde encontrá-lo. - **Introduções visuais** - Use uma imagem para definir o tom de uma seção da sua base de conhecimento, com texto de apoio para orientar os leitores. - **Conteúdo promocional** - Destaque um guia, tutorial em vídeo ou artigo principal com uma miniatura e um breve chamado à ação. Quando o conteúdo for apenas texto, use o [bloco de texto enriquecido](https://docs.document360.com/docs/pt/text-block) . --- ## Como adicionar uma imagem com bloco de texto 1. Navegue até Configurações () na barra de navegação da esquerda do portal da Base de Conhecimento. 2. No painel de navegação esquerdo, navegue até Site da base de conhecimento > **Personalização do site**. 3. Clique no **botão Personalizar site** . ![Site customization page showing the Customize site button](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png) 1. No menu suspenso à esquerda, selecione Página **inicial** . A **seção Corpo** exibe a lista de blocos corporais. 2. Clique **em Adicionar seção** e selecione **Imagem com texto**. O bloco é adicionado à lista. 3. Use o ícone **de Reordenar** () para reorganizar o bloco. Os ícones de Reordenar e **Esconder** () aparecem quando você passa o mouse sobre qualquer bloco do corpo. 4. Expanda a **Imagem com um menu suspenso de texto** para acessar os **elementos Imagem**, **Cabeçalho** e **Parágrafo** . ![Home page builder showing an Image with text block expanded with Image, Heading, and Paragraph elements](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684325265.png) --- ## Como configurar os elementos ### Imagem 1. Clique **em Imagem** para abrir o painel Imagem. 2. Clique **em Alterar** para enviar ou atualizar a imagem. 3. Na **aba Imagem** , insira a URL da imagem ou envie uma do seu Drive. 4. Na **seção Alinhamento** , escolha **Esquerda**, **Centro** ou **Direita** para posicionar a imagem dentro do bloco. ![Image panel showing alignment options and image upload controls](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684343844.png) ### Rumo 1. Clique **em Cabeçalho** para abrir o painel de Títulos. 2. Insira o texto desejado no campo **de texto Cabeçalho** . 3. Use a paleta **de cores do texto** para escolher a cor do título. 4. Na seção **Alinhamento** , escolha **Esquerda**, **Centro** ou **Direita**. 5. Clique **em Excluir** para remover apenas o elemento Cabeçalho deste bloco. ![Heading panel showing text input, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684356968.png) ### Parágrafo 1. Clique **em Parágrafo** para abrir o painel Parágrafo. 2. Insira seu conteúdo no campo **de texto Parágrafo** . 3. Formate o texto usando as seguintes opções: | Opção | O que ele faz | | --- | --- | | **Negrito** () | Aplica formato em negrito | | **Itálico** () | Aplica formatação em itálico | | **URL/Link** () | Adiciona um hiperlink | | **Lista não ordenada** () | Cria uma lista com tópicos | | **Lista ordenada** () | Cria uma lista numerada | NOTA A sintaxe Markdown é suportada no campo de texto Parágrafo. 1. Use a paleta **de cores do texto** para definir a cor do texto do parágrafo. 2. Na seção **Alinhamento** , escolha **Esquerda**, **Centro** ou **Direita**. 3. Clique **em Excluir** para remover apenas o elemento Parágrafo deste bloco. ![Paragraph panel showing text formatting toolbar, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684373203.png) --- ## Como salvar e publicar - Use a opção **de pré-visualização** à direita para revisar suas alterações. - Clique **em Salvar** para salvar suas alterações. - Clique **em Publicar** para fazer alterações ao vivo. --- ## Melhores práticas - **Mantenha imagem e texto equilibrados** – uma imagem grande ao lado de uma frase curta parece descompatoare. Procure um peso visual aproximadamente igual entre a imagem e o texto ao lado. - **Use o alinhamento à esquerda para a imagem** quando a direção da leitura for da esquerda para a direita; É o layout mais natural para a maioria dos leitores. - **Use o título para ancorar o bloco** – mesmo que o título seja curto, ele dá aos leitores uma etiqueta rápida do que a imagem e o parágrafo tratam. - **Evite enviar imagens sobredimensionadas** – imagens grandes demoram a carregar as páginas. Redimensione as imagens antes de enviar, mantendo-as otimizadas para web (normalmente abaixo de 200KB para visuais da página inicial). - **Use dimensões de imagem consistentes** – se você tem várias imagens com blocos de texto na mesma página, mantenha tamanhos de imagem consistentes para um layout mais limpo. --- ## FAQ **Como faço para excluir uma imagem com bloco de texto da página inicial?** Navegue até {{variable. Settings}} () > {{variable. Base de conhecimento site}} > **Personalização do site** e clique **em Personalizar site**. No menu suspenso à esquerda, selecione Página **inicial** . Clique na **imagem desejada com o bloco de texto** . Clique **em Excluir** e confirme clicando **em Sim** no prompt de confirmação de Exclusão. Clique **em Salvar** e **depois em Publicar** para aplicar as alterações.