--- title: "Seção de código personalizado" slug: "html-block" updated: 2026-06-22T08:58:37Z published: 2026-06-22T08:58:37Z canonical: "docs.document360.com/html-block" --- > ## 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. # Seção de código personalizado A seção de Código Personalizado permite que você incorpore seu próprio HTML e CSS diretamente na página inicial da base de conhecimento. Existe para situações em que os blocos padrão do corpo, como texto enriquecido, cartões multicolunas, imagem com texto - não oferecem o layout ou funcionalidade que você precisa. Com esse bloco, você tem controle total sobre o que renderiza e como ele fica, tornando-o a escolha certa para conteúdo dinâmico, embeds de terceiros ou tratamentos visuais personalizados que não são possíveis com os outros blocos. ![Knowledge base site showing a custom code section with a promotional banner rendered from HTML and CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Knowledge_base_site_output.png) --- ## Quando usar a seção de código personalizado - **Banners dinâmicos** - Exiba uma promoção sazonal, anúncio de lançamento de produto ou aviso de manutenção usando HTML personalizado que você pode atualizar independentemente do layout da página. - **Temporizadores de contagem regressiva** - Incorpore uma contagem regressiva com JavaScript para eventos, lançamentos ou ofertas por tempo limitado. - **Widgets de terceiros incorporados** - Adicione embeds de serviços externos como players de vídeo, construtores de formulários, widgets de chat ou badges de página de status, que não possuem um bloco dedicado. - **Conteúdo personalizado** - Quando você precisar de um layout ou tratamento visual específico que não seja alcançável com o Rich text ou blocos de cartões Multicolumn, escreva seu próprio HTML e CSS para isso. IMPORTANTE! Seções de código personalizadas executam HTML e CSS no contexto do seu site de base de conhecimento. Teste seu código cuidadosamente antes de publicar. HTML mal estruturado pode afetar o layout dos elementos da página ao redor. --- ## Como adicionar uma seção de código personalizado 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 **na seção Adicionar** e selecione **a seção Código Personalizado**. O bloco é adicionado à lista. ![Add section dropdown showing Custom code section option in the home page builder](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843220715.png) 1. Use o ícone **de Reordenar** () para reorganizar o bloco. Os ícones de Reordenar e **Esconder** () aparecem quando você passa o mouse sobre qualquer bloco de corpo na seção Corpo. --- ## Como configurar a seção de código personalizado 1. Clique no **bloco de seção Código Personalizado** para abrir o editor. 2. Na aba **HTML** , adicione ou edite seu código HTML. 3. Na aba **CSS** , adicione ou edite seu código CSS. 4. Clique **em Salvar** para salvar suas alterações como rascunho. 5. Clique **em Pré-visualização** para ver como o código é renderizado no site da base de conhecimento. 6. Clique **em Publicar** para deixar as mudanças ativas. ![Custom code section editor showing the HTML and CSS tabs with code input areas](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843242926.png) --- ## Melhores práticas - **Sempre faça uma pré-visualização antes de publicar** – diferenças de renderização entre o editor e o site ao vivo podem ser sutis. Use a opção Pré-visualização para verificar o layout e o estilo antes de fazer o compromisso. - **Mantenha o HTML autônomo** – evite referenciar folhas de estilo externas ou scripts que possam bloquear o carregamento da página ou entrar em conflito com os estilos do próprio Document360. - **Defina o escopo do seu CSS** - use nomes específicos de classes para seus elementos personalizados para evitar sobrescrever os estilos padrão do site. - **Use a aba CSS para todos os estilos** – manter os estilos separados da marcação facilita a manutenção e atualização do código. - **Teste entre modos claro e escuro** - se sua base de conhecimento suporta modo escuro, verifique se seu código personalizado renderiza corretamente em ambos. --- ## FAQ **Como faço para excluir uma seção de código personalizado da página inicial?** Navegue até {{variable. Configurações}} () > {{variável. Base de conhecimento site}} > **Personalização do site** e clique **em Personalizar site**. No menu suspenso à esquerda, selecione Página **inicial** . Na seção Corpo, selecione a **seção de código personalizado** desejada. Clique **em Excluir** () abaixo da barra de navegação, depois clique **em Sim** no prompt de confirmação Excluir. Clique **em Salvar** e **depois em Publicar** para aplicar as alterações.