M24 — Full Image
Módulo de imagem de fundo a toda a largura e altura do ecrã, com conteúdo de texto e botões sobrepostos. Serve como secção de destaque visual forte — tipicamente usada para apresentar um hotel, um restaurante, uma experiência ou uma área do site.
| Campo | Valor |
|---|---|
| Módulo | M24 — Full Image |
| Estado | Rascunho |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Zoho Task | P894-T620 |
| Criada | 2026-04-21 |
| Aprovada | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot em tamanho real</a>
Descrição Geral
Section titled “Descrição Geral”O Full Image é um módulo de grande impacto visual: uma imagem ocupa toda a largura e pelo menos toda a altura do ecrã, com conteúdo de texto e botões sobrepostos numa zona definida pelo editor.
O módulo apresenta tipicamente:
- Uma pequena etiqueta no topo (por exemplo, o nome do hotel, categoria ou secção)
- Um título grande em destaque (com possibilidade de usar negrito parcial)
- Um parágrafo de descrição (opcional)
- Até dois botões lado a lado (por exemplo, um principal e um secundário)
Aparece em páginas como: página inicial dos hotéis, páginas de apresentação de restaurantes, spa, quartos, experiências, ou sempre que o objetivo é dar uma entrada visual forte a uma secção da página.
Variantes
Section titled “Variantes”Variante 1 — Texto sobre imagem (configuração padrão)
Section titled “Variante 1 — Texto sobre imagem (configuração padrão)”Como utilizador, quero ver uma imagem em tela cheia com um título e uma descrição sobrepostos, para compreender imediatamente o tema daquela secção e ter acesso rápido à ação sugerida.
Elementos visíveis:
- Imagem de fundo a toda a largura e altura do ecrã
- Camada de proteção subtil (escurece a imagem por baixo do texto para melhor leitura)
- Etiqueta pequena em maiúsculas
- Título de grande dimensão (com parte do texto em negrito se o editor assim definir)
- Parágrafo curto de descrição
- Dois botões: um principal (preenchido) e um secundário (apenas texto)
Critérios de Aceitação:
- A imagem ocupa toda a largura do ecrã e, no mínimo, toda a altura
- O texto é legível sobre a imagem em qualquer hotel/tema
- Os botões redirecionam para as páginas indicadas
- O título aparece em destaque, acima da descrição
- A etiqueta aparece acima do título, em texto menor
Variante 2 — Apenas imagem (sem texto)
Section titled “Variante 2 — Apenas imagem (sem texto)”Como utilizador, quero ver apenas a imagem, sem qualquer texto sobreposto, para que a fotografia fale por si quando o contexto da secção anterior já é suficiente.
Elementos visíveis:
- Imagem de fundo a toda a largura e altura do ecrã
- Nenhum texto, etiqueta ou botão
Critérios de Aceitação:
- Quando nenhum campo de texto ou botão está preenchido, apresenta-se apenas a imagem limpa
- Não aparecem espaços vazios nem caixas sem conteúdo
- A camada de proteção só é aplicada se o editor escolher uma — caso contrário, a imagem é vista sem filtro
Variante 3 — Texto com camada de proteção em gradiente
Section titled “Variante 3 — Texto com camada de proteção em gradiente”Como utilizador, quero ver o texto sobreposto a uma imagem com um escurecimento gradual vindo de um dos lados, para que o fundo se funda suavemente com a imagem sem perder detalhe nas zonas claras.
Elementos visíveis:
- Imagem de fundo
- Camada de escurecimento/aclaramento com efeito gradual (a partir da esquerda ou da direita)
- Texto e botões alinhados do lado onde o gradiente é mais forte
Critérios de Aceitação:
- O gradiente tem maior intensidade no lado onde o texto está posicionado
- O texto mantém-se legível sobre a zona escurecida/clareada
- A imagem continua visível do lado oposto, sem filtro
Variante 4 — Texto centrado
Section titled “Variante 4 — Texto centrado”Como utilizador, quero ver o título e os botões centrados horizontalmente na imagem, para criar uma composição simétrica e formal.
Elementos visíveis:
- Imagem de fundo
- Conteúdo (etiqueta, título, descrição, botões) centrado no ecrã
- Os botões ficam lado a lado, também centrados
Critérios de Aceitação:
- Todo o conteúdo está centrado horizontalmente
- Os dois botões aparecem alinhados ao centro, lado a lado
- O texto mantém-se legível sobre a imagem (com a camada de proteção escolhida)
Interações do Utilizador
Section titled “Interações do Utilizador”Este módulo apresenta conteúdo maioritariamente estático. A única interação disponível é com os botões:
| Interação | Descrição |
|---|---|
| Clicar no botão principal | Navega para a página indicada pelo editor (por exemplo, página de reserva, de quartos, ou de informação) |
| Clicar no botão secundário | Navega para uma página alternativa (por exemplo, ver galeria, saber mais, ler artigo) |
| Passar o rato por cima dos botões | Os botões mudam ligeiramente de aparência (escurecem ou clareiam consoante o tema) |
Elementos
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo:
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Imagem de fundo (computador) | Imagem | Sim | Imagem mostrada em ecrãs grandes. Dimensões recomendadas: ~1440×900 px, formato horizontal |
| Imagem de fundo (telemóvel) | Imagem | Não | Imagem mostrada em ecrãs pequenos. Se não for fornecida, é usada a versão para computador adaptada. Dimensões recomendadas: ~375×812 px, formato vertical |
| Etiqueta | Título | Não | Texto curto acima do título principal, tipicamente em maiúsculas (ex: o nome do hotel, “Gastronomia”, “Bem-vindo”) |
| Título principal | Título | Não | Texto em destaque. O editor escolhe o nível de cabeçalho e pode marcar partes do texto a negrito |
| Descrição | Texto | Não | Parágrafo curto abaixo do título. Pode conter formatação básica (negrito, itálico) |
| Botão principal | Botão | Não | Botão preenchido com texto e ligação a outra página |
| Botão secundário | Botão | Não | Botão secundário (apenas texto com sublinhado) com texto e ligação a outra página |
Nota: Todos os elementos de conteúdo (etiqueta, título, descrição, botões) são opcionais. Se o editor não preencher nenhum, o módulo apresenta apenas a imagem. A imagem para computador é o único campo obrigatório — sem ela, o módulo não é mostrado.
Opções de Configuração
Section titled “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 |
|---|---|---|---|
| Cor do texto | Claro / Escuro | Claro | Controla se o texto (etiqueta, título, descrição) é apresentado em tons claros (sobre imagem escura) ou escuros (sobre imagem clara) |
| Alinhamento horizontal | Esquerda / Centro / Direita | Esquerda | Posição horizontal do conteúdo (etiqueta, título, descrição, botões) sobre a imagem |
| Alinhamento vertical | Topo / Centro / Base | Base | Posição vertical do conteúdo sobre a imagem |
| Camada de proteção | Nenhuma / Escura 20% / Escura 40% / Escura 60% / Clara 20% / Clara 40% / Gradiente escuro (esquerda) / Gradiente escuro (direita) / Gradiente claro (esquerda) / Gradiente claro (direita) | Nenhuma | Aplica uma camada semitransparente por cima da imagem, para melhorar a leitura do texto. As opções “Gradiente” criam um escurecimento gradual a partir de um dos lados |
| Ativar/Desativar | Ativo / Inativo | Ativo | Permite esconder o módulo sem o apagar |
Nota: As opções de alinhamento (horizontal e vertical) e a cor do texto só têm efeito visível quando há conteúdo de texto preenchido. Nos módulos usados apenas como imagem, estas opções são ignoradas.
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Imagem de fundo | Carrega a versão para computador; ocupa toda a largura e altura do ecrã | Carrega a versão para telemóvel (se fornecida); ocupa toda a largura e altura do ecrã |
| Conteúdo (texto + botões) | Ocupa no máximo metade da largura do ecrã, posicionado conforme o alinhamento escolhido | Ocupa a largura total disponível, com margens laterais |
| Título | Tamanho grande, pode ter várias linhas | Tamanho ligeiramente reduzido, adaptado à largura do telemóvel |
| Botões | Lado a lado, dimensão normal | Passam a ocupar toda a largura disponível e ficam empilhados um por cima do outro |
| Alinhamento vertical | Topo / Centro / Base conforme escolhido | O mesmo — mantém o posicionamento escolhido |
Estados Visuais
Section titled “Estados Visuais”| Estado | Descrição |
|---|---|
| Inicial | Imagem carregada em destaque máximo (prioridade de carregamento) com o conteúdo sobreposto |
| Carregamento da imagem | A imagem é marcada como prioritária para carregar rapidamente (é o primeiro elemento visível) |
| Ao passar o rato sobre os botões | Os botões mudam ligeiramente de aparência (escurecem ou clareiam) |
| Sem camada de proteção e texto escuro sobre imagem clara | Leitura depende da imagem — o editor deve escolher uma camada de proteção clara se a imagem for muito variada |
| Sem conteúdo de texto | Apresenta apenas a imagem limpa, sem caixas ou espaços vazios |
| Conteúdo extenso | O título e a descrição podem ocupar várias linhas; o contentor expande-se para dentro da imagem, mantendo a altura mínima de um ecrã |
| Sem imagem para telemóvel | Usa a imagem para computador em telemóvel, ajustando-se ao formato vertical do ecrã |
Acessibilidade
Section titled “Acessibilidade”- A imagem de fundo é marcada como decorativa para leitores de ecrã (o contexto é dado pelo texto sobreposto)
- O título é apresentado com o nível semântico escolhido pelo editor (H2, H3, etc.) — os leitores de ecrã entendem a importância do texto no contexto da página
- Os botões têm texto legível para leitores de ecrã — nunca são apenas ícones
- Pode ser navegado com o teclado (tecla Tab para saltar entre os botões, Enter para ativar)
- Os botões têm indicação visual clara quando estão selecionados pelo teclado
- O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual quando é escolhida uma camada de proteção adequada à imagem
- Quando o editor configura “Cor do texto: Claro” deve também escolher uma camada de proteção escura (ou um gradiente escuro) se a imagem tiver zonas claras, para garantir legibilidade
O módulo adapta-se visualmente a cada hotel: as cores dos botões (preenchido e secundário), a tipografia do título, a etiqueta e o corpo de texto seguem a identidade visual de cada hotel.
Os 8 hotéis suportados:
- Savoy Signature
- Savoy Palace
- Royal Savoy
- Saccharum
- The Reserve
- Calheta Beach
- Gardens
- Hotel Next
Diferenças visuais observadas entre temas (Figma):
Savoy Palace
Section titled “Savoy Palace”
Tipografia serifada clássica; botão principal em roxo escuro, botão secundário com sublinhado em tom dourado. Etiqueta em pequeno capitular.
Saccharum
Section titled “Saccharum”
Tipografia serifada com caráter quente; botão principal em tom terra/castanho, botão secundário em sublinhado.
Calheta Beach
Section titled “Calheta Beach”
Tipografia sem serifa, visual mais descontraído e contemporâneo; botões em tons verde-azulados.
Hotel Next
Section titled “Hotel Next”
Tipografia sem serifa moderna; botões com aspeto minimalista, cores neutras.
Savoy Signature
Section titled “Savoy Signature”
Tipografia serifada elegante com forte contraste; botões em cor escura, etiqueta em destaque.
Em todos os temas, a estrutura do módulo, o posicionamento do conteúdo e as opções de configuração funcionam da mesma maneira — apenas mudam as cores, a tipografia e o acabamento visual dos botões.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-04-21 | Rascunho | Versão inicial criada a partir do Figma e do código já implementado |
| 2026-04-21 | Publicada | Publicada no Docmost (nova página) |