Mosaico Modelos HTML

Modelos HTML de Mosaico Responsivos

Um modelo HTML de mosaico é fornecido como arquivos que você pode abrir em um editor: uma página, uma folha de estilo e imagens que já estão dispostas em seções de diferentes larguras. A captura de tela da demonstração mostra um arranjo desses mosaicos. Tudo o que você fizer depois disso acontece no código subjacente, portanto, vale a pena abrir o código-fonte antes da pré-visualização.

A maior parte desse trabalho permanece no nível do conteúdo. As fotos são substituídas, as legendas são reescritas e um cartão é duplicado quando a galeria cresce além da demonstração.

Marcação por Trás de Blocos de Imagem Irregulares

As composições de mosaico são construídas de maneiras muito diferentes, e a diferença aparece no momento em que você adiciona mais um item. Uma grade mantida unida por colunas e linhas continua funcionando quando um cartão é copiado. Um layout fixado com deslocamentos fixos exige reparo manual sempre que necessário.

Seções como estas geralmente são as mais importantes em uma página de mosaico:

• uma imagem ampla com um título curto sobreposto
• um cartão que se repete em uma galeria ou feed de categorias
• um bloco de texto para um serviço, uma nota ou uma citação
• um bloco de chamada para ação que fecha o agrupamento visual

Nenhum modelo inclui todos esses elementos por padrão, então é útil abrir a demonstração, contar o que é realmente reutilizável e ignorar o resto.

Ordem do conteúdo em telas estreitas

Um celular exibe a composição em uma única coluna, e essa coluna segue a ordem do seu arquivo. Um bloco no canto superior direito de um laptop pode ocupar a quarta posição em um celular, mesmo exibindo o projeto principal.

Há uma maneira rápida de ver isso. Desative os estilos no navegador e leia a página como texto simples. O resultado é próximo à sequência em que um visitante rola a página com o polegar. Se algo importante estiver oculto ali, mova a seção para dentro do HTML. Uma media query a mais apenas a esconderia.

Editando o código de exemplo sem quebrar os blocos

Trate o conteúdo de demonstração como peças sobressalentes. Copie um bloco que já se comporte da maneira que você precisa, cole-o onde a galeria continua e, em seguida, altere a imagem e o texto dentro dele. Os nomes das classes permanecem como o autor os escolheu, e discutir com essa convenção no meio do projeto custa mais caro do que segui-la.

Em seguida, reduza a janela do navegador até que o mosaico se reduza a uma única coluna e veja qual projeto o visitante encontra primeiro. Se for aquele que você mostraria a um cliente, o modelo está pronto para o seu conteúdo.