Cabeçalho página com imagem

Nome técnico: getquick/page-hero-static

Use este bloco no topo de uma página quando precisa de um herói fixo com título, subtítulo, imagem e chamada para ação.

Bloco Nomia

Cabeçalho página com imagem

Exemplo visual aproximado do bloco como aparece no frontend Nomia.

Como usar

Insira o bloco no editor Gutenberg e preencha os campos de conteúdo.
O subtítulo funciona como uma descrição curta e pode ter vários parágrafos: prima Enter para começar um novo parágrafo. No editor os parágrafos aparecem em linhas seguidas; no site ficam separados.
Pode escolher ou substituir a imagem tanto na barra lateral como na barra de ferramentas do bloco. Na secção Content, a imagem escolhida aparece como miniatura: clique nela para abrir a biblioteca de media.
Ainda na secção Content, os interruptores Show subtitle e Show CTA button escondem o subtítulo ou o botão sem apagar o texto.
Na secção Typography da barra lateral, ajuste separadamente o tamanho e a cor do título e do subtítulo; as mesmas escolhas aparecem no frontend Astro. O alinhamento do texto (esquerda, centro ou direita) move o título, o subtítulo e o botão em conjunto. A Altura da linha do subtítulo escolhe um dos valores do design system; Predefinido mantém a altura habitual (40px).
Na secção Disposição, além da altura do cabeçalho, Espaço superior e Espaço inferior ajustam o espaço acima e abaixo do texto (Nenhum, Pequeno, Médio ou Grande). Predefinido (da altura) mantém o espaço que a altura escolhida já dá. As mesmas escolhas aparecem no frontend Astro.
Quando adicionar imagens, preencha sempre o texto alternativo para manter a página acessível.
Pode ocultar o botão de chamada para ação na barra lateral. Se o botão estiver ativo, confirme que a etiqueta e a ligação estão completas antes de publicar.

Campos principais

title
subtitle
imageId
imageUrl
imageSrc
imageAlt
cta
ctaLabel
showCta
ctaHref
ctaUrl
titleTextFontSize / subtitleTextFontSize
titleTextColor / subtitleTextColor
height
subtitleLineHeight
paddingTop / paddingBottom

Exemplo de conteúdo

{
  "schemaVersion": 1,
  "blockId": "page-hero-static",
  "title": "Valor de exemplo para title",
  "subtitle": "Valor de exemplo para subtitle",
  "imageId": 1,
  "imageUrl": "Valor de exemplo para imageUrl",
  "imageSrc": "Valor de exemplo para imageSrc",
  "showCta": true,
  "ctaLabel": "Saber mais",
  "ctaHref": "/pagina-de-destino/",
  "titleTextFontSize": 64,
  "subtitleTextFontSize": 28,
  "titleTextColor": "#ffffff",
  "subtitleTextColor": "#e5faf9",
  "height": "xl"
}

Antes de publicar

Pré-visualize a página no WordPress e no frontend Astro.
Confirme que títulos, imagens, listas e ligações estão completos.
Se o bloco apresentar dados, valide a fonte e a unidade dos valores.