Hexágono Modelos HTML

Modelos HTML hexagonais criativos para páginas geométricas altamente estruturadas

Um modelo HTML hexagonal é uma página pronta com secções em favo de mel já incorporadas na estrutura de código, preparada para receber os seus serviços, projetos ou perfis de equipa. Pode personalizá-lo no Nicepage, exportar os ficheiros e continuar a editar o código-fonte manualmente. As molduras chamam a atenção numa pré-visualização, mas é a marcação estrutural interna que determina a rapidez com que adapta o modelo às suas necessidades.

Estrutura de código dentro de cada célula hexagonal

Num bom modelo, o hexágono é apenas uma moldura em redor de um conteúdo que faria sentido mesmo sem ela. Um cabeçalho identifica o item e uma breve descrição contextualiza-o, enquanto a ligação ou o botão permanece como um elemento independente. Os níveis de cabeçalho também devem ignorar o tamanho visual, permitindo que seis serviços reunidos no mesmo grupo partilhem o mesmo nível hierárquico, mesmo que a célula central pareça maior.

O modelo mais adequado para si depende do tipo de conteúdo que as células irão alojar:

• itens de portfólio, nos quais o título do projeto e a ligação permanecem separados de uma imagem acompanhada pelo devido texto alternativo;
• itens de serviços ou características com um cabeçalho, uma descrição sucinta e, por vezes, um ícone;
• células de equipa que mantêm o nome e o cargo como texto editável junto ao retrato, sem nunca os incorporar na imagem.

Clonar itens sem contentores vazios

Após a exportação, a maior parte das edições baseia-se na repetição. Num modelo organizado, cada serviço ou projeto repete o mesmo bloco reduzido com as mesmas classes, pelo que adicionar um novo item requer apenas um bloco copiado e novo texto. Remover um item deve ser igualmente limpo, sem deixar contentores poligonais vazios ou aninhamentos desnecessários. As legendas e os botões devem poder ser alterados sem interferir nas molduras, e uma nova fotografia deve integrar-se diretamente no bloco de multimédia existente.

No editor, o Shape Element do Nicepage mantém a decoração e o conteúdo separados, garantindo que o texto ou os botões inseridos dentro de uma forma continuem a ser elementos distintos.

Ordem do código-fonte e ficheiros exportados

A ordem do código-fonte nunca é visível numa pré-visualização, mas determina como as células são lidas num telemóvel, onde o favo de mel costuma transformar-se numa pilha vertical simples. Um grupo lido no sentido dos ponteiros do relógio num computador portátil pode surgir desordenado num dispositivo móvel. Se a oferta principal surge em primeiro lugar visualmente, mas ocupa a quarta posição na estrutura de código, os visitantes em dispositivos móveis só a verão após três outros itens. Um teste rápido consiste em imaginar o layout sem as molduras para verificar se tudo continua a ser lido numa ordem lógica.

Os ficheiros exportados podem ser publicados no seu próprio servidor ou entregues a um programador, que deverá identificar os blocos de conteúdo e a sua sequência de imediato. Após qualquer alteração de posição, verifique novamente as ligações, as descrições das imagens e a ordem dos itens. Se os seus projetos, serviços ou perfis reais se encaixarem na estrutura repetida de um modelo apenas com alterações de texto, encontrou o modelo HTML hexagonal certo.