No último screencast, pegamos aquela foto do iStockPhoto da cabana com neve e da floresta. Nós o colocamos no fundo, atrás da área de conteúdo principal e da barra lateral do nosso documento do Photoshop e ele se encaixou bem ali, no estilo dos cabeçalhos das outras áreas do site. Entre os screencasts, escrevi algumas cópias para a página também. Eu gostaria de fazer um screencast, mas escrever uma cópia é uma daquelas coisas que leva muito tempo e é ainda mais meticuloso do que ajustes de design. Nós conversamos um pouco sobre isso.
No Photoshop, “escondi” o texto “The Lodge” atrás das árvores com um pouco de zoom na máscara de imagem. Eu não fiz um trabalho superdetalhado, mas você realmente não precisa quando você aumenta o zoom e a imagem será reduzida na web também.
Fazemos um modelo de página exclusivo apenas para esta página (page-lodge.php). Usando a convenção de comentários do PHP /* Template Name: The Lodge */, esse modelo é exibido em nossa página suspensa Modelo de página ao criar uma nova página no WordPress. Isso nos dá todo o controle de que precisamos. Podemos editar o HTML neste modelo e, se precisarmos de CSS exclusivo para esta página, podemos usar a lógica condicional e vinculá-la ao arquivo header.php. Em retrospecto, faz mais sentido usar o arquivo functions.php para vincular CSS exclusivo para manter a “visão” (header.php) mais limpa, mas isso é algo para a próxima vez.
O gráfico de plano de fundo para este cabeçalho seria chamado de “Gráfico Hero” - ou seja, um gráfico grande (literalmente e em tamanho) que é importante para a aparência / sensação / conteúdo da página. Como estamos tentando ser responsáveis com o desempenho (queremos que o site carregue rápido), realmente não deveríamos servir esse gráfico gigantesco para telas minúsculas. Isso é muito mais fácil em CSS do que em HTML. Usamos nossas consultas de mídia “reverso” (em min-widthvez de max-width) para dizer “quando a tela for tão larga ou mais larga, use este gráfico ... quando for ainda mais largo, use este gráfico” e assim por diante. Dessa forma, por padrão, apenas a menor imagem é usada, mas ela é substituída quando um navegador mais amplo solicita a página. Um pouco de pensamento móvel primeiro.
No final, temos uma bela tela (se você quiser) para trabalhar em todas as páginas do The Lodge.