A estrutura começa com um bloco de texto sobre imagem que combina o título «Spa & Massagem», uma imagem grande e um painel com borda sobreposto. Essa abertura é seguida por um bloco de destaques para a ampla seleção de serviços de spa, no qual o conteúdo de tratamentos corporais e uma chamada para ação estabelecem o primeiro grupo informativo. O bloco dividido seguinte direciona o foco para a massagem de reflexologia e posiciona duas imagens de tratamentos ao lado do rótulo do serviço.
Um segundo bloco de destaques altera o padrão de conteúdo ao introduzir três cartões alinhados de cuidados com a pele. Tratamentos faciais personalizados, Produtos selecionados e Orientação especializada funcionam como itens equivalentes dentro de um único grupo de serviços, em vez de seções desconectadas. O bloco de galeria a seguir combina um painel de texto com borda e tema de natureza com seis imagens repetidas de cuidados com a pele. Três perfis de terapeutas formam outro grupo distinto, combinando retratos circulares com textos em estilo de depoimento e nomes exibidos.
A hierarquia retorna a um bloco visual para cuidados diários com a pele antes de chegar ao bloco do formulário de contato. Nele, um painel de mapa fica ao lado de campos de consulta empilhados, conferindo à página uma área final de interação bem definida. O bloco social e o rodapé escuro fornecem a região compartilhada final com texto de apoio, espaço para logotipo e quatro links sociais. Essa sequência permite inspecionar a organização da página como blocos conectados, áreas de conteúdo aninhadas e grupos de itens repetidos.
Ao usar o HTML5 Template Builder, você poderá ajustar cores, fontes, cabeçalho e base, layout, colunas e outros elementos de design, bem como conteúdo e imagens.
Personalize este modelo HTML5 pronto visualmente no editor Nicepage, mantendo a organização da página fácil de entender. Use o painel Camadas para visualizar a hierarquia do Cabeçalho, Blocos, Contêineres, Elementos e Rodapé, navegar entre diferentes partes da página e selecionar itens rapidamente dentro do layout.
O painel Camadas também oferece controles práticos para trabalhar com páginas mais complexas. Blocos, Contêineres e Elementos podem ser renomeados para facilitar a identificação, ocultados temporariamente durante a edição ou bloqueados para evitar alterações acidentais. A estrutura de tópicos também pode expor a estrutura interna de elementos como Menus e Formulários de Contato.
Os blocos dividem a página em seções de conteúdo principais, enquanto os Contêineres e Elementos organizam o conteúdo dentro deles. Manter essa hierarquia visível facilita a compreensão de como as partes individuais da página se relacionam entre si, especialmente quando um layout contém muitos elementos aninhados. Você pode usar o painel Camadas para navegar por essa estrutura em vez de selecionar tudo diretamente na tela, facilitando a inspeção e o gerenciamento de layouts complexos como uma hierarquia de páginas organizada.
Após personalizar a página visualmente, o HTML resultante pode ser revisado e adaptado quando forem necessárias alterações no código. Se um projeto precisar de marcação ou funcionalidades adicionais além dos elementos padrão da página, use o Elemento HTML para adicionar HTML personalizado onde necessário.
Esse fluxo de trabalho combina a edição visual com uma visão clara da hierarquia da página, tornando o modelo útil tanto como um design pronto quanto como um projeto HTML5 cuja estrutura pode ser inspecionada, gerenciada, adaptada e estendida.