Componente Imagem
O bloco Imagem foi pensado para destacar uma imagem isolada com controlo de apresentação dentro da página. Permite definir versões para desktop e mobile, escolher dimensão, alinhamento, comportamento de zoom e link de destino, mantendo ALT e TÍTULO associados ao próprio bloco.
Informações gerais
O bloco Imagem é uma solução direta para inserir uma única peça visual com controlo sobre a forma como ocupa o layout. É indicado para banners simples, destaques editoriais, imagens institucionais, assets de campanha ou momentos em que um visual precisa de ganhar protagonismo sem lógica de repetição.
Cada bloco pode incluir:
- imagem principal para desktop
- imagem especifica para mobile
- campos ALT e TÍTULO em cada versão
- controlo de tamanho através do campo Type
- alinhamento do bloco dentro da composição
- link, target e opção de zoom
Utilize este componente quando a imagem tem peso próprio e precisa de ser apresentada como unidade isolada, sem a complexidade de um slideshow, galeria ou estrutura de vários items.
Exemplos visuais do bloco
Variações de layout e composição
O bloco Imagem pode assumir leituras visuais diferentes consoante a combinação de Type, Align, Full Width, Zoom e Link. O slideshow abaixo mantém a mesma lógica do modelo e usa capturas reais do backoffice para mostrar diferentes formas de configurar este componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para dar foco a uma imagem isolada com relevância editorial
- Para criar um destaque visual simples sem vários items
- Para inserir um asset clicável que encaminha o utilizador para outra página
- Para trabalhar versões desktop e mobile de forma separada
Quando evitar
- Quando precisas de varias imagens em sequencia ou rotacao
- Quando a mensagem depende mais de texto do que da imagem
- Quando a imagem é apenas decorativa e não precisa de um bloco próprio
Como usar na prática
Estrutura de trabalho recomendada
Preparar os assets
- Escolher a imagem principal com qualidade suficiente
- Preparar uma versão mobile se o corte ou a composição mudarem
- Confirmar se o ficheiro está otimizado e coerente com o contexto
Preencher o bloco
- Carregar Imagem e Image Mobile
- Preencher ALT e TÍTULO em cada versão
- Definir o link apenas se houver um destino claro
Ajustar a apresentação
- Escolher o Type mais adequado: Small, Medium ou Full
- Definir o Align de acordo com a composição da página
- Usar Full Width apenas quando a imagem deve ocupar mais protagonismo
Validar no preview
- Testar o corte e a leitura em desktop e mobile
- Verificar se o zoom acrescenta valor real
- Confirmar que o target e o comportamento do clique fazem sentido
Boas práticas de conteúdo
Foco, contexto e legibilidade
Escolha da imagem
- Uma imagem por bloco deve corresponder a uma intenção editorial clara
- Evita imagens com demasiado texto embutido ou informação ilegível
- Escolhe uma escala coerente com a importância do conteúdo
- Se a imagem não tiver força própria, talvez não precise deste bloco
Acessibilidade e contexto
- O ALT deve descrever o que a imagem mostra ou o papel que cumpre
- O TÍTULO ajuda como reforço contextual, mas não substitui um bom ALT
- Se a versão mobile muda bastante, adapta o ALT e o TÍTULO a essa realidade
- Se o bloco tem link, o destino deve ser coerente com a expectativa visual criada
Configurações avançadas do componente Imagem
Imagem + resumo das opções
Estas opções controlam a estrutura base do bloco, a largura ocupada, a animação e os espaçamentos gerais.
Configuração estrutural
- Skin escolhe uma variante visual do bloco
- Disabled block desativa o bloco sem o apagar
- Full Width faz a imagem ocupar toda a largura disponível
- Block ID define um ID único para âncora ou navegação interna
- Extra Class acrescenta uma classe específica para ajustes adicionais
Animação
- Animation on/off ativa ou desativa a animação de entrada
- Scroll animation type define o tipo de animação aplicado ao bloco
- Use animação apenas quando ela reforça a leitura e não desvia da imagem
Espaçamentos
- Margin controla o espaço exterior do bloco
- Padding controla o espaço interior do bloco
- Estes campos ajudam a encaixar a imagem no ritmo geral da página
Configuração do conteúdo principal
Imagem desktop, imagem mobile e metadata
Na configuração principal do bloco, defines os dois assets base e os respetivos campos de contexto.
Imagem e Image Mobile
- Imagem recebe o asset principal usado no desktop
- Image Mobile permite carregar uma versão específica para ecrãs pequenos
- Se o enquadramento muda muito entre formatos, vale a pena preparar dois assets diferentes
ALT e TÍTULO
- Os campos ALT e TÍTULO existem em cada versão da imagem
- O ALT deve descrever a imagem ou o seu papel no contexto da página
- O TÍTULO pode funcionar como reforço contextual, sem cair em repetição artificial
Configurações de apresentação e interação
Tamanho, alinhamento, zoom e link
Depois de definires os assets, ajustas a escala visual, o alinhamento e a camada de interação do bloco.
Type
- Small para uso mais contido
- Medium para equilibrio entre destaque e ritmo
- Full quando a imagem deve ganhar mais presença
Align
- O screenshot mostra opções como Center e Right
- Escolhe o alinhamento de acordo com o corte da imagem e a composição da página
Enable Zoom
- Ativa a ampliação quando a imagem tem detalhe que justifica leitura aproximada
- Evita usar zoom em imagens puramente decorativas ou de impacto rápido
Link e Target
- Link define o destino do clique
- Target controla a forma de abertura, como Self ou New Page
- Se a imagem não tiver um destino claro, é preferível não forçar ligação
Demo e downloads
Exemplos e configurações