M27 — Text Image

Módulo editorial em duas colunas que combina um bloco de texto com uma imagem lado a lado. Apresenta um rótulo opcional, um título em destaque, um corpo de texto e um botão, sempre emparelhados com uma imagem quadrada. É um dos módulos mais versáteis para páginas de conteúdo do hotel (alojamento, restaurantes, spa, experiências).

Campo	Valor
Módulo	M27 — Text Image
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Zoho Task	P894-T431
Criada	2026-04-23
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →

Variantes por hotel

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Text Image é um módulo editorial em duas colunas, pensado para páginas de conteúdo do hotel onde texto e imagem trabalham em conjunto. Numa coluna, o editor coloca um pequeno rótulo, um título em destaque, um corpo de texto e, opcionalmente, um botão. Na outra coluna, uma imagem quadrada — geralmente de uma zona do hotel, de uma experiência ou de um ambiente — equilibra a composição.

O editor pode decidir se a imagem aparece à direita ou à esquerda do texto, escolher um fundo claro ou intermédio (cor suave do tema) e selecionar o formato da imagem — cada hotel tem três formatos próprios definidos no design (um mais clássico, um arredondado e um assimétrico/dome), garantindo que o módulo se integra na identidade visual do hotel.

O módulo suporta imagens nos formatos JPEG, PNG, WEBP, SVG e GIF animado (reproduzidos automaticamente em loop). A imagem tem dimensão fixa de 588×588px no desktop (proporção 1:1).

Ao entrar no campo de visão durante o scroll, o módulo tem uma animação de entrada: o texto surge com um efeito de “slide up com máscara” e a imagem entra do lado com o mesmo efeito. Referência: https://www.mellem.ca/ Para utilizadores com prefers-reduced-motion ativo, os elementos aparecem instantaneamente.

É um módulo tipicamente usado em páginas de alojamento, restaurantes, spa, experiências, “sobre o hotel”, destaques de zona, ou qualquer página de conteúdo onde se quer apresentar informação acompanhada de uma imagem de apoio. Pode ser repetido várias vezes numa mesma página, alternando a posição da imagem (direita/esquerda) para criar um ritmo visual.

Variantes

Variante 1 — Imagem à direita, fundo cor A

Como visitante, quero ler informação sobre uma zona do hotel ao lado de uma imagem que ilustre essa zona, para compreender melhor o que me está a ser apresentado.

Elementos visíveis:

Fundo cor A (conforme o tema do hotel)
Coluna de texto à esquerda: rótulo opcional, título, corpo de texto e botão opcional
Imagem quadrada à direita, alinhada com a coluna de texto
Formato da imagem segue o tema (cada hotel tem 3 formatos possiveis, um default do tema, outros dois especiais)

Critérios de Aceitação:

A imagem aparece à direita do texto em ecrã grande
O fundo do módulo é cor A
O rótulo (quando preenchido) aparece por cima do título
O título está em destaque e alinhado com o topo da imagem
O corpo de texto aparece por baixo do título, ligeiramente recuado para a direita
O botão (quando preenchido) aparece por baixo do corpo de texto
Em ecrã pequeno, o texto aparece primeiro e a imagem surge por baixo
Quando não há botão, o espaço não aparece vazio

Variante 2 — Imagem à esquerda, fundo cor A

Como visitante, quero alternar a posição da imagem em relação ao texto ao longo da página, para criar um ritmo visual e não ter sempre o mesmo tipo de composição.

Elementos visíveis:

Fundo cor A
Imagem quadrada à esquerda, alinhada com o topo do texto
Coluna de texto à direita: rótulo, título, corpo e botão opcionais
Mesma estrutura e tipografia da Variante 1, apenas com posições invertidas

Critérios de Aceitação:

A imagem aparece à esquerda do texto em ecrã grande
A coluna de texto aparece à direita
O fundo do módulo é cor A
Em ecrã pequeno, o texto aparece primeiro e a imagem surge por baixo (a ordem de leitura é a mesma em qualquer tamanho de ecrã)

Variante 3 — Fundo cor B

Como visitante, quero perceber que um bloco de conteúdo é uma secção distinta da anterior, através de uma cor de fundo ligeiramente diferente, para facilitar a orientação visual na página.

Elementos visíveis:

Fundo em cor B do tema do hotel (tom creme quente, verde suave, azul claro, navy escuro ou outro, consoante o hotel)
Mesma estrutura da Variante 1 ou 2 (imagem à direita ou à esquerda)
Texto e botão ajustados para manter contraste sobre o novo fundo

Critérios de Aceitação:

O fundo do módulo usa a cor B definida pelo tema do hotel
O texto mantém legibilidade clara sobre o fundo intermédio
O botão mantém-se visível e legível sobre o novo fundo
O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual

Variante 4 — Formatos da imagem (por tema)

Como editor, quero escolher entre três formatos de imagem diferentes (definidos pelo design de cada hotel), para variar o ritmo visual da página sem sair da identidade do hotel.

O que varia:

Cada tema de hotel define três formatos de imagem próprios — tipicamente um mais clássico (quadrado ou ligeiramente arredondado), um arredondado (círculo ou quadrado com cantos bem arredondados) e um assimétrico/dome (um lado reto e outro em arco)
Exemplos observados:
- Savoy Palace — quadrado · assimétrico (três cantos arredondados, um reto) · dome (topo em arco)
- Saccharum — quadrado · formato “folha” (um canto reto, outros arredondados) · dome suave
- Calheta Beach — quadrado com cantos ligeiramente arredondados · círculo completo · quadrado com cantos médios
- Hotel Next — quadrado com cantos arredondados · círculo completo · quadrado com cantos médios
- Savoy Signature — sempre quadrado puro (sem cantos arredondados)
O formato padrão é o definido pelo tema do hotel. O editor pode optar por um dos três formatos específicos (quadrado, arredondado, assimétrico) caso queira sobrepor o padrão

Critérios de Aceitação:

Por defeito, o formato da imagem segue o estilo visual do tema do hotel ativo
O editor pode escolher explicitamente um formato alternativo (quadrado, arredondado ou assimétrico)
O formato escolhido é aplicado à imagem em todos os tamanhos de ecrã
Cada tema apresenta um conjunto de formatos coerente com a sua identidade visual

Interações do Utilizador

Este módulo apresenta apenas conteúdo estático gerido pelo backoffice. Não contém interações dinâmicas.

As únicas ações possíveis para o visitante são:

Ação	O que acontece
Clicar no botão	O visitante é encaminhado para a página indicada pelo editor
Clicar numa ligação dentro do corpo de texto	O visitante é encaminhado para a página ou recurso indicado pela ligação

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Rótulo	Título	Não	Texto curto em maiúsculas, tipicamente uma categoria ou secção (ex: “Alojamento”, “Restaurantes”). O editor escolhe o nível de cabeçalho.
Título principal	Título	Não	Título em destaque do módulo. Suporta RTE simplificado. O editor escolhe o nível de cabeçalho (por exemplo, H2 para secções principais de uma página).
Corpo de texto	Texto com formatação rica	Não	Texto descritivo com parágrafos, negritos, sublinhado, itálicos, ligações e listas. Pensado para descrições breves a médias (tipicamente um a três parágrafos).
Imagem	Imagem	Sim	Imagem em proporção 1:1 (588×588px). Suporta JPEG, PNG, WEBP, SVG e GIF animado. Pode ser configurada como decorativa (sem alt text) ou informativa (com alt text obrigatório).
Descrição da imagem	Texto	Sim (quando informativa)	Alt text da imagem. Obrigatório quando a imagem tem papel informativo. Omitido quando marcada como decorativa.
Botão 1	Botão	Não	Label (obrigatório), URL (obrigatório), Tipo (primary / secondary / tertiary).
Botão 2	Botão	Não	Segundo botão opcional. Label (obrigatório), URL (obrigatório), Tipo (primary / secondary / tertiary). Máximo 2 botões por módulo.

Nota: A imagem e pelo menos um campo de texto ou CTA são obrigatórios para publicar o módulo. Todos os outros campos são opcionais. O módulo adapta-se automaticamente à ausência de campos opcionais — os espaços ajustam-se sem deixar áreas vazias.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar/Desativar	Ativo / Inativo	Ativo	Permite ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida.
Posição da imagem	Direita / Esquerda	Direita	Define de que lado do texto aparece a imagem em ecrã grande. Em ecrã pequeno, o texto aparece sempre primeiro e a imagem por baixo.
Tipo de fundo	A / B	A	Escolhe entre o fundo A ou B definido pelo tema do hotel.
Padding do bodycopy e CTA	Com padding / Sem padding	Com padding	Quando ativo, o corpo de texto e o(s) botão(ões) têm uma indentação à esquerda em relação ao título. Quando inativo, o corpo alinha com o topo do título.
Formato da imagem	Opção 1 (padrão do tema) / Opção 2 / Opção 3	Opção 1	Cada hotel tem três formatos de imagem definidos no design. A Opção 1 é o formato padrão do tema.

O restante aspeto visual (cores, tipografia dos títulos e do corpo, cor e formato do botão, espaçamentos internos) é controlado automaticamente pelo tema do hotel e não precisa de configuração no módulo.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Duas colunas lado a lado (texto + imagem)	Uma coluna empilhada: texto por cima, imagem por baixo
Posição da imagem	Direita ou esquerda, conforme escolha do editor	Sempre por baixo do texto (a opção de posição não afeta ecrãs pequenos)
Imagem	Quadrada, ocupa a metade do módulo	Quadrada, ocupa toda a largura útil do ecrã
Rótulo e título	Alinhados com o topo da imagem	Alinhados com a margem esquerda do ecrã
Corpo de texto	Recuado ligeiramente para a direita, largura confortável para leitura	Sem recuo; ocupa toda a largura útil
Botão	Alinhado com o corpo de texto, largura ajustada ao seu conteúdo	Largura total ou quase total, alinhado com o corpo de texto
Espaçamentos internos	Generosos entre elementos	Reduzidos para aproveitar o espaço do ecrã

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com os dois blocos (texto e imagem) lado a lado, conforme a configuração escolhida.
Ao passar o rato no botão	O botão destaca-se visualmente (muda ligeiramente de cor ou de fundo) para indicar que é clicável.
Ao passar o rato numa ligação do texto	A ligação muda de aparência (normalmente sublinhado ou alteração de cor) para indicar que é clicável.
Imagem com ponto focal definido	Se o editor definiu um ponto focal na imagem no backoffice, o enquadramento respeita esse ponto em ambos os tamanhos de ecrã.
Textos opcionais	Pelo menos um dos textos ou CTA é obrigatório, nunca ficando a imagem sozinha.
Sem botão	A área de botão é omitida; o módulo termina no fim do corpo de texto.
Sem rótulo ou título	Os blocos omitidos não aparecem — o módulo adapta-se para não deixar espaço vazio.
Corpo de texto muito longo	O texto estende-se verticalmente conforme necessário. A imagem mantém-se quadrada e alinha com o topo.
Enquanto a imagem carrega	É apresentado um espaço reservado (placeholder) com as mesmas dimensões da imagem, para evitar saltos de layout.

Animação de Entrada

O módulo tem uma animação de entrada em duas partes:

Texto (rótulo, título, corpo, botão): efeito de “slide up com máscara” — o texto surge de baixo para cima ao entrar no campo de visão

Imagem: entra do lado (direita ou esquerda, conforme a posição configurada) com o mesmo efeito de slide up com máscara

Referência: https://www.mellem.ca/ — ver “Bienvenue à l’ère des locataires.” e “Des histoires à partager”

Para utilizadores com prefers-reduced-motion ativo, todos os elementos aparecem instantaneamente sem animação.

Acessibilidade

O conteúdo pode ser lido por leitores de ecrã com a estrutura correta — o rótulo e o título usam os níveis de cabeçalho escolhidos pelo editor (ex: H2 para título principal, H3 para subsecções).
A imagem tem uma descrição textual (obrigatória sempre que exista imagem) que é lida por leitores de ecrã e aparece caso a imagem não carregue.
Os botões e as ligações dentro do corpo de texto são totalmente navegáveis por teclado (tecla Tab) e ativáveis com Enter.
Todos os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
Os botões têm texto legível por leitores de ecrã.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em ambas as cores de fundo (claro e intermédio) e em todos os temas de hotel.
A ordem de leitura em ecrãs pequenos é sempre texto → imagem, independentemente da posição escolhida para ecrã grande, para garantir consistência na leitura por leitores de ecrã.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo (claro e intermédio), cores do texto, tipografia dos títulos e do corpo de texto, cor e formato dos botões, e especialmente o formato da imagem seguem a identidade visual de cada hotel.

Os 8 sites suportados:
• Savoy Palace
• Saccharum
• Calheta Beach
• Hotel Next
• Savoy Signature (site do grupo)
• Gardens (por desenvolver)
• The Reserve (por desenvolver)
• Royal Savoy (por desenvolver)

Diferenças visíveis entre temas (exemplos observados no Figma):

Savoy Palace — tipografia serifada clássica, cor de destaque dourada/ocre nos botões, fundo intermédio em tom creme quente; formatos de imagem: quadrado, assimétrico e dome arqueado
Saccharum — paleta em tons naturais, tipografia sóbria, fundo intermédio em verde pálido; formatos de imagem: quadrado, formato “folha” e dome suave
Calheta Beach — paleta inspirada no mar, botões em tom vermelho, fundo intermédio em azul-claro/aqua; formatos de imagem: quadrado arredondado, círculo e quadrado de cantos médios
Hotel Next — paleta contemporânea, botões em tom escuro, fundo intermédio em azul céu; formatos de imagem: quadrado arredondado, círculo e quadrado de cantos médios
Savoy Signature — paleta institucional, tipografia elegante, fundo intermédio em navy escuro com texto claro; formatos de imagem: sempre quadrado puro

A estrutura do módulo (disposição em duas colunas, hierarquia do texto, comportamento responsivo) mantém-se igual em todos os temas para garantir uma experiência consistente.

Formatos de Imagem Aceites

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

JPG — preferencial para fotografias e imagens com tratamento fotográfico.
SVG — preferencial para imagens vetoriais (logótipos, ícones, símbolos, ilustrações simples).
WEBP — alternativa otimizada para fotografia/gráficos quando se procura melhor performance.
PNG — para imagens com transparência ou detalhe gráfico que não seja vetorial.
GIF — apenas quando é necessária animação simples.

Este módulo permite a inserção de imagens em formato GIF. Atenção: dado que estes ficheiros podem ter um peso elevado, é essencial uma gestão cuidada no backoffice — caso contrário, a performance do website poderá ser seriamente comprometida.

Changelog

Data	Estado	Descrição
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-23	Rascunho	Versão inicial criada a partir do Figma