Os últimos cabeçalhos restantes chegaram! Agora podemos finalizá-los e ter todos os nossos cabeçalhos personalizados prontos. Neste screencast, trabalharemos nos cabeçalhos personalizados para a seção Demo feita por John Neiner.
Curiosamente, John foi o único ilustrador que forneceu a arte no Illustrator. Isso é bom para nós neste caso, porque podemos dimensioná-lo para qualquer tamanho que precisarmos com qualidade total. Em retrospecto, provavelmente deveríamos ter deixado o vetor (como SVG) e talvez usado um fallback raster. Mas neste screencast exploramos as diferentes opções de salvamento de raster e acabamos optando por JPG.webp.
Houve alguma confusão ao salvar, onde não consegui encontrar o arquivo salvo porque estava procurando o nome errado. Situação DUH do mundo real.
Em seguida, pulamos para o WordPress e repetimos nosso processo para preparar os modelos para o estilo. Certificamo-nos de que as páginas de demonstração carregam um arquivo CSS especial apenas para elas. Isso significa adicionar lógica ao nosso arquivo header.php ( is_page_template()). Encontramos o modelo correto para a área de demos (usando um teste clássico onde fazemos uma mudança óbvia no modelo e o vemos refletido no site real.
Tiramos todo o lixo antigo desse modelo e o trazemos para o nosso novo estilo. Nós escrevemos um pouco de marcação necessária para que a página esteja em uma grade e tenha uma área de cabeçalho apenas para este novo cabeçalho personalizado e tudo mais.
Por fim, aplicamos nosso gráfico de cabeçalho personalizado como uma imagem de fundo a um elemento de invólucro com preenchimento suficiente na parte superior (com base em porcentagem) para ajustar o gráfico na parte superior (dimensionado para caber). Nós até colocamos um gradiente atrás da imagem que vai do verde profundo para o preto, então meio que parece que você está se aprofundando no oceano conforme você rola para baixo.
Mais trabalho a fazer nesta página, mas concluímos o cabeçalho e o modelo em bom estado!