Componente HTML
O bloco HTML foi pensado para inserir markup personalizado dentro da página quando o projeto precisa de uma camada técnica ou editorial que não existe noutro componente. Permite colar código HTML diretamente no campo principal e combinar essa saída com Skin, Full Width, Block ID, Extra Class, espaçamentos e animação.
Informações gerais
O bloco HTML é uma solução flexível para introduzir estruturas customizadas no frontend sem depender de um bloco mais fechado. Funciona bem para snippets controlados, embeds específicos, banners técnicos, wrappers de terceiros ou pequenas composições editoriais que precisam de liberdade total de marcação.
Este bloco pode incluir:
- um campo principal de HTML para colar markup personalizado
- controlo estrutural através de Skin, Disabled block e Full Width
- identificação do bloco com Block ID e Extra Class
- ajustes de Margin e Padding para encaixe na página
- controlo de Animation on/off e Scroll animation type
Utiliza este componente quando existe uma necessidade real de customização e a equipa sabe exatamente que HTML precisa de renderizar. É especialmente útil para integrações técnicas, mensagens promocionais especiais, widgets externos controlados ou micro-layouts que não justificam a criação imediata de um novo componente dedicado.
Exemplos visuais do bloco
3 cenários típicos de HTML embebido
O bloco HTML pode assumir leituras bastante diferentes porque a apresentação depende do markup inserido no campo principal. Os três exemplos abaixo mostram formas comuns de o usar sem sair da lógica base do componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para snippets promocionais, wrappers técnicos ou pequenas estruturas que não existem noutro bloco
- Para widgets externos, iframes, embeds especiais ou markup que depende de integração manual
- Quando a equipa sabe exatamente que HTML precisa de renderizar e consegue mantê-lo com segurança
- Para respostas rápidas a necessidades pontuais sem abrir já desenvolvimento de um novo componente
Quando evitar
- Quando um bloco nativo já resolve a necessidade com mais consistência editorial e menos risco técnico
- Quando o conteúdo vai ser repetido muitas vezes e merece transformar-se num componente próprio
- Quando o código depende de scripts frágeis, estilos excessivos ou manutenção difícil pela equipa de conteúdos
Como usar na prática
Sequência de trabalho recomendada
Definir a necessidade
- Confirmar se o projeto precisa mesmo de HTML custom e se não existe um bloco mais adequado
- Perceber se o objetivo é editorial, técnico ou uma integração de terceiros
Preparar o código
- Organizar o snippet antes de o colar no campo principal
- Evitar markup desnecessário, estilos caóticos ou dependências frágeis
Ajustar o bloco
- Definir Skin, Full Width, Block ID e Extra Class conforme o contexto
- Usar Margin e Padding para integrar o HTML no ritmo geral da página
Validar no preview
- Testar responsividade, quebras de linha, comportamento de scripts e impacto visual no frontend
- Confirmar se a animação reforça a leitura ou se o bloco funciona melhor de forma estática
Boas práticas de código
Clareza, manutenção e segurança
Estrutura e legibilidade
- Escreve HTML limpo, sem elementos redundantes nem classes confusas
- Se o bloco incluir texto, mantém hierarquia semântica clara para títulos, parágrafos e links
- Quando a solução crescer demasiado, isso é sinal de que talvez o projeto precise de um componente novo
Compatibilidade e controlo
- Valida sempre o comportamento em mobile, sobretudo se existirem iframes, tabelas ou colunas internas
- Tem atenção a scripts externos, estilos embutidos e conflitos com o resto da página
- Se o snippet vier de terceiros, testa com cuidado a performance, a acessibilidade e o impacto visual
Configurações avançadas do componente HTML
Estrutura, espaçamentos e animação
Estas opções controlam a forma como o bloco HTML entra no layout: variante visual, largura, identificação estrutural, espaçamentos e animação.
Estrutura do bloco
- Skin define a variante visual base do componente
- Disabled block permite desativar o bloco sem o remover
- Full Width faz o snippet ocupar mais largura dentro da composição
Identificação e encaixe
- Block ID ajuda em âncoras, navegação interna e referência técnica
- Extra Class permite acrescentar uma classe adicional para ajustes específicos
- Margin e Padding afinam a relação do bloco com o restante layout
Animação
- Animation on/off ativa ou desativa a entrada animada do bloco
- Scroll animation type define a linguagem de movimento aplicada no frontend
- Usa animação apenas quando ela reforça a leitura e não complica a perceção do HTML renderizado
Configuração do conteúdo principal
Campo HTML e lógica de implementação
Na configuração principal do bloco existe um campo único de HTML. É aqui que defines a marcação que o componente vai renderizar no frontend.
Campo HTML
- O campo HTML recebe o snippet completo que será renderizado no bloco
- Pode conter estruturas simples, wrappers, mensagens promocionais, iframes ou embeds controlados
- Quanto mais claro e contido for o código, mais estável será a manutenção futura
Revisão técnica
- Depois de colar o código, convém validar responsividade, estilos e dependências externas em preview
- Se o snippet incluir JavaScript, iframes ou integrações de terceiros, a revisão final deve ser especialmente cuidadosa
- Também é importante confirmar se a solução continua compatível com a estrutura global da página
Guias relacionados
Contexto complementar para este bloco