A navegação é um aspecto essencial de um bom site WordPress com ótimo design. Como tal, vale a pena pensar um pouco sobre como os visitantes do seu site interagem com suas páginas através da sua navegação. Uma maneira de você fazer isso é usando um sticky header.
Aqui é onde a seção de cabeçalho do seu site se mantém na parte superior da tela enquanto o usuário rola. Isto fornece inúmeros benefícios, mas um dos principais pontos positivos é que seus elementos de navegação ficam dentro da visão do usuário, independentemente de onde eles estão na página. Somente por esta razão, um sticky header é um elemento de interface de usuário (UI) bem-vindo.
Neste tutorial, vamos mostrar a você como criar um sticky header dentro do WordPress. Ele vai cobrir muitos aspectos, tais como exemplos através da web, plugins WordPress que podem ajudá-lo, e um guia sobre como desenvolver seu próprio sticky header. Primeiro, no entanto, vamos discutir o que é um sticky header em mais detalhes.
O que é um sticky header?
A parte de cabeçalho do seu site é como o balcão de informações do seu site. Vai ser algo que a maioria dos usuários vai identificar primeiro, e será sempre em algum lugar que eles vão verificar para descobrir algumas informações importantes e executar certas ações:
- Por exemplo, seu logotipo ou nome do site estará aqui, o que serve como um ponto de apoio para seus usuários. Eles poderão voltar para a página inicial clicando no logotipo na maioria dos casos.
- Se você executar contas de usuário em seu site, o cabeçalho normalmente oferecerá um link para entrar nessas páginas de conta e perfil.
- Pode haver funcionalidade de pesquisa aqui, especialmente se você tiver um site grande com muito conteúdo em diferentes áreas.
- Naturalmente, a navegação do seu site também é uma parte integrante do cabeçalho.
No geral, seu cabeçalho é um ponto de contato para os usuários. Você descobrirá que muitas vezes é a ‘barra’ para padrões de leitura em forma de F, então ele chama a atenção de seus usuários em um nível intuitivo.
Você provavelmente já saberá o que é um sticky header, mesmo em um sentido intuitivo. É onde a seção de cabeçalho do seu site ‘fixa’ no topo da tela enquanto você rola ao longo do site. Em contraste com um cabeçalho estático, que permanece no lugar e desaparece enquanto você rola, o sticky header é um elemento sempre visível.
Enquanto a abordagem típica para um sticky header é colocar uma versão estática dele no topo da sua tela, existem algumas maneiras diferentes de tornar isto mais utilizável, eficiente e dinâmico. A seguir, vamos dar uma olhada em alguns exemplos do mundo real.
Exemplos de sticky headers na web
Você encontrará sticky headers por toda a web, e é uma boa ideia verificar alguns para ver o escopo do que você pode alcançar. Um dos exemplos mais básicos ao redor é do Hammerhead. Este site usa um ‘flyout menu’ e um sticky header, e é simples: Ele está comprometido em se ater ao topo da página em seu layout estático:
Outra implementação simples é da Kin. Isto usa um sticky header típico, mas desta vez com alguns elementos legais de design.
Você notará que o contraste muda com base na parte do site que você percorre, e há alguns efeitos de transição agradáveis também:
Nós não podemos terminar esta seção sem mencionar o sticky header da Kinsta. Isto também mantém as coisas simples com relação aos elementos do cabeçalho, mas inclui um toque de usabilidade limpo que oferece valor ao visitante:
Desta vez, você verá o cabeçalho desaparecer quando você rolar a página para baixo. No entanto, ele reaparecerá quando você rolar para cima – você pode se referir a ele como um “cabeçalho parcialmente persistente”
A premissa aqui é que a rolagem para baixo significa que você está investindo seu tempo na própria página, então provavelmente não precisará de navegação, páginas de login, ou para ir para outro lugar. Entretanto, no momento em que você rolar para cima, é mais provável que você queira ir para outra página do site. Aqui, o sticky header vai aparecer para salvar o dia.
São esses pequenos toques de experiência de usuário (UX) que fazem com que os visitantes de um site queiram voltar a ele. Para seus próprios desenhos de sticky header, você vai querer considerar o que você pode fazer para fazer um UX e um UI que foca nas necessidades do visitante.
Por que você deve usar um sticky header para o seu site?
Muitos sites usam sticky headers, e há muitas boas razões para que isso aconteça. Eles podem ser partes cruciais da sua experiência geral no site e ter muita influência sobre a sua UX e UI.
Como os elementos que você incluirá em um cabeçalho são aqueles que o usuário sempre vai querer acessar, faz sentido tê-los sempre em exibição. Isto é especialmente verdadeiro para dispositivos e formatos de telas menores.
Embora possa parecer contraintuitivo ter um cabeçalho “sempre ligado” quando o espaço de visualização do porto está em um prêmio, este é apenas um pequeno sacrifício. O verdadeiro benefício é dar a um usuário móvel menos razão para se deslocar – uma necessidade em dispositivos menores. Se você pode fornecer a navegação do seu site sem a necessidade de rolagem, o usuário pode se mover pelo seu site com maior facilidade.
Os prós e contras do sticky header
Vamos cobrir alguns dos pontos positivos do sticky header, então vamos resumi-los rapidamente:
- Você pode oferecer navegação que o usuário pode sempre acessar, o que ajuda a preservar o padrão natural de leitura em seu site.
- Você é capaz de adaptar o cabeçalho a diferentes necessidades, tais como contrastes, esquemas de cores, ou até mesmo intenções do usuário.
- Há a oportunidade de oferecer valor ao usuário, tanto para a área de trabalho quanto para telas menores.
No entanto, um sticky header não é uma panaceia para aumentar o UX, e há algumas desvantagens em usá-los:
- Cobrimos isso em um resumo, mas para telas de todos os tamanhos, você precisará alocar espaço para seu cabeçalho.
- Um sticky header naturalmente tirará o resto do seu conteúdo porque seus próprios elementos afastarão o olho do corpo da página.
- Há mais trabalho de desenvolvimento que vai para um bom sticky header porque você precisa implementá-lo, certificar-se de que ele funciona dentro de diferentes navegadores e verificá-lo em busca de bugs em telas menores.
Entretanto, se você pensar em suas escolhas de design, necessidades do usuário e objetivos do site, você pode mitigar ou remover todos esses inconvenientes, enquanto você mantém os pontos positivos. Uma maneira de você fazer isso é através de plugins do WordPress.
3 Plugins para ajudar você a criar sticky headers
Nas próximas seções, mostraremos alguns dos principais plugins de sticky header para WordPress. Mais tarde, falaremos sobre se este tipo de solução é adequado para você. Independentemente disso, um plugin pode ajudá-lo a implementar funcionalidades sem a necessidade de código, o que é valioso se o seu tema não o incluir.
Além disso, você pode aproveitar a experiência de design e desenvolvimento de um especialista através do plugin. Os desenvolvedores farão algumas das escolhas técnicas mais importantes para você, e o envolverão em uma interface intuitiva e fácil de usar.
1. Sticky Menu & Sticky Header
O Sticky Menu & Sticky Header plugin da Webfactory é uma boa primeira escolha, devido à sua riqueza de recursos, flexibilidade útil e preço acessível.
O sorteio aqui é que você pode fazer qualquer elemento do seu site grudar na tela. Isto pode ser útil de várias maneiras, mas significa que implementar um sticky header é uma esquiva.
O plugin também vem com uma série de opções poderosas para ajudar você a implementar um sticky header:
- Você pode definir seu nível desejado de posicionamento ‘top’. Isto significa que você pode adicionar espaço na área acima do cabeçalho para se adequar aos seus objetivos de design.
- Há também outras opções de posicionamento, tais como usar a propriedade CSS do índice z para projetar seu site ‘de frente para trás’
- Você pode habilitar o sticky header somente nas páginas que você selecionar, o que pode ser útil se você tiver páginas de destino ou outro conteúdo impróprio.
O Sticky Menu & Sticky Header também inclui um modo de depuração, para ajudá-lo a corrigir qualquer elemento ‘não adesivo’. O Modo Dinâmico também ajudará a resolver problemas com designs responsivos.
A melhor notícia é que o Sticky Menu & Sticky Header é gratuito para download e uso. Além disso, há uma versão premium que retira mais do know-how técnico que você precisa.
Com a versão gratuita do plugin, você precisará conhecer o seletor de elementos a fim de especificá-lo nas opções. No entanto, a versão premium ($49-199 por ano) oferece um seletor de elementos visuais para contornar isto.
2. Options for Twenty Twenty-One
Embora nós não recomendaríamos um tema padrão do WordPress para a maioria dos sites focados no cliente, eles têm o suficiente na bolsa para blogs e tipos similares de sites.
Twenty Twenty-One é um dos temas padrão mais destacados em nossa opinião, mas falta funcionalidade de sticky header. Se você quiser adicionar esta funcionalidade, o plugin Options for Twenty Twenty-One pode alcançar o que você precisa.
Esta edição do plugin é uma das muitas. Cada tema padrão recente tem uma versão, mas ainda não existe uma para o Twenty Twenty-Two. Independentemente disso, a funcionalidade central do plugin fornece muitos extras:
- Há uma ferramenta de edição completa do site (FSE), pronta para sua implementação completa.
- Você é capaz de mudar o tamanho da fonte do corpo, remover hyperlink sublinhado e outras personalizações simples.
- Você pode trabalhar com as larguras máximas de recipientes e elementos, sem a necessidade de código.
Existem muitas outras opções para sua navegação, conteúdo, rodapé e cabeçalho. Para este último, você pode escondê-lo da vista, torná-lo totalmente largo, adicionar uma imagem de fundo e cor, e muitas outras alterações.
Enquanto o plugin principal é gratuito, você precisa de uma atualização premium ($25-50) para acessar as opções de sticky header. Isto permite que você ajuste as configurações para ambos os cabeçalhos móveis e desktop do WordPress Customizer:
Dado o nome, você não deve esperar que este plugin funcione com qualquer outro tema além do Twenty Twenty-One (ou qualquer ‘sabor’ que você escolher.) Entretanto, se você usar este tema padrão e não quiser codificar, será ideal para ajudá-lo a adicionar um sticky header ao seu site.
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu
Aqui está um plugin que coloca suas cartas em cima da mesa. O plugin myStickymenu do Prêmio oferece quase tudo que você vai querer incluir em seu próprio sticky header, e embala em uma grande quantidade de funcionalidade.
Tem um número surpreendente de revisões positivas no Diretório de Plugins do WordPress – 799 revisões cinco estrelas para uma média de 4,9. Parte disto se deve ao abrangente conjunto de recursos à sua disposição:
- Ele oferece flexibilidade de uso. Por exemplo, você pode criar uma barra de boas-vindas, bem como um menu fixo e um cabeçalho.
- O plugin se adapta ao quão responsivo é o seu site. Isto significa que você não precisará implementar mais nenhuma funcionalidade usando código.
- Na verdade, o plugin não precisa que você saiba codificar para poder usá-lo em sua totalidade.
- O plugin myStickymenu tem compatibilidade com uma série de plugins líderes de construção de páginas, tais como Elementor, Beaver Builder, o Block Editor nativo, o Divi Builder, e muitos outros.
Você também tem uma série de opções de customização para fazer com que seu sticky header funcione como você gostaria. Por exemplo, você pode escolher fazer um cabeçalho parcialmente persistente, mudar aspectos simples como cores de fundo, escolhas tipográficas, e mais.
Além disso, por causa das diferentes maneiras que você pode apresentar seu sticky header (como o menu e opções de barras de boas-vindas), você pode escolher como eles são exibidos, e onde, em seu site.
Mesmo que a versão gratuita do myStickymenu possa ser suficiente para suas necessidades, há também uma versão premium ($25-99 por ano.) Isto oferece mais maneiras de desativar seu sticky header dadas as condições específicas, os temporizadores de contagem regressiva, a capacidade de adicionar várias barras de boas-vindas e mais algumas opções de personalização.
Como criar um sticky header no WordPress
Para o resto deste tutorial, vamos mostrar a você como criar um sticky header no WordPress. Há algumas abordagens que você pode fazer aqui, e nós vamos cobrir ambas. No entanto, nosso primeiro passo irá ajudá-lo a tomar essa decisão.
A partir daí, você trabalhará em seu próprio sticky header usando seu método preferido e então aplicará algumas de nossas dicas para tornar o seu mais eficiente e utilizável no futuro.
1. Decida como você vai criar o seu sticky header
Uma razão pela qual o WordPress é tão flexível para todos os tipos de usuários é devido ao seu ecossistema de plugins e extensibilidade de código aberto. Como tal, você pode escolher uma solução pronta para uso ou ‘enrolar a sua própria solução’
Sua primeira tarefa é decidir se você quer usar um plugin ou cavar em código para implementar seu sticky header. Vamos quebrar as duas soluções:
- Plugins. Este vai ser um método aprovado pelo WordPress-approved, especialmente se você não tiver o conhecimento técnico para entregar. Ele oferecerá flexibilidade, mas você está à mercê do que o desenvolvedor pensa ser importante, e sua habilidade de codificar.
- Codificação. Se você tem uma visão clara em mente, você pode querer codificar um sticky header para o seu site. É claro, você precisará da experiência técnica para conseguir isso (principalmente CSS), mas os resultados serão exatamente o que você quer. Entretanto, você terá mais manutenção em potencial para realizar, e seu sucesso dependerá de suas próprias habilidades de codificar.
Nós dizemos que para a maioria dos usuários de WordPress, um plugin será a solução ideal para criar um sticky header. Ele vai jogar bem com a plataforma e é mais fácil de solucionar problemas se você tiver problemas. Entretanto, em passos futuros, nós cobriremos uma solução de codificação, bem como a opção de plugin.
2. Escolha se você vai modificar seu tema atual ou selecione um tema dedicado
O próximo aspecto que você vai querer considerar é se você modifica seu tema atual, ou escolhe um que já tenha a funcionalidade de sticky header dentro de seu conjunto de recursos. Isto será importante se o seu tema não tiver a funcionalidade de lidar com um sticky header.
Muitos temas e plugins de construção de páginas incluirão uma opção de sticky header, por causa dos benefícios e para oferecer a você flexibilidade de design. Você verá que alguns dos maiores temas e plugins de uso geral fornecem isso como padrão, tais como Elementor, Astra, Divi, Avada, e inúmeros outros.
Para tomar esta decisão, você vai querer considerar algumas coisas sobre o seu tema e site atuais:
- O seu site já tem a aparência que você deseja ou ele precisa de uma atualização?
- Seu tema atual é fácil de customizar sob o capô? A documentação do desenvolvedor deve lhe dizer isso.
- Você quer uma implementação de cabeçalho rígido complexa preferida ou uma que seja mais direta?
Com base nas respostas que você der aqui, você escolherá uma ou outra. Se você precisar de um novo tema, você também pode escolher um que ofereça uma implementação de sticky header. Entretanto, se você quiser ficar com seu tema atual, e ele ainda não tem a funcionalidade sticky header, você vai querer arregaçar suas mangas e seguir um dos seguintes sub-passos.
2a. Use um plugin com um tema específico
Se você não tem experiência em desenvolvimento, nós recomendaríamos que você escolhesse um plugin para adicionar a funcionalidade sticky header ao seu site. Há muitas variáveis que você precisa considerar, construir e manter. Em contraste, um plugin já terá uma base de código que dá um aceno a esses elementos, então ele oferecerá uma opção quase ideal para a maioria das circunstâncias.
Para esta parte do tutorial, nós vamos usar o plugin myStickymenu, já que este oferece um conjunto de recursos bem completo e rico para a maioria dos casos de uso. Entretanto, o uso geral será o mesmo para a maioria dos plugins que você vai usar.
Assim que você instalar e ativar seu plugin, você precisará ir para onde quer que as opções do tema estejam. Para alguns plugins, isto estará dentro do WordPress Customizer; para outros, um painel de administração dedicado. Aqui, você usará um painel de administração personalizado em myStickymenu > Dashboard no WordPress:
No entanto, a tela padrão mostra as configurações para a barra de boas-vindas, que para este tutorial, nós não queremos. Como tal, clique no botão de alternância para desligar a barra, e clique na tela de configurações do menu Sticky:
Embora haja muitas opções aqui, você só precisa do painel Sticky Class. Uma vez que você mude o cabeçalho sticky para “On”, digite a tag HTML relevante para seu cabeçalho no campo relevante que coincide com o menu suspenso Outra Classe ou ID:
Uma vez que você salvar suas mudanças, isto se aplicará ao seu site. A partir daí, você pode olhar para algumas das funcionalidades de estilo. Por exemplo, você define um efeito de transição de fade ou slide, define o índice z, trabalha com opacidades, cores e tempos de transição – juntamente com toda uma série de outras opções.
2b. Escreva o código para criar o seu sticky header
É quase desnecessário dizer que esta seção é para aqueles com experiência em desenvolvimento. Você verá mais tarde que o código em si é tão simples que é difícil de acreditar. Entretanto, dado o trabalho adicional, a manutenção e a manutenção geral para criar um cabeçalho personalizado e fixo, você precisará se basear em outros aspectos da sua experiência também.
Entretanto, pouco antes de você começar, você precisará do seguinte:
- Um editor de código decente, embora neste caso (e dependendo da implementação) você poderia usar um editor de texto padrão do sistema operacional (SO).
- Você precisará ter acesso aos arquivos do seu site, os quais você deve fazer backup e depois baixar para um ambiente local de desenvolvimento WordPress.
É preciso repetir que você não quer trabalhar nos arquivos do seu site ao vivo. Ao invés disso, trabalhe dentro de um ambiente de encenação ou configuração local, então carregue os arquivos de volta para o seu servidor ao vivo depois de testar as coisas.
Você também vai querer usar um child theme para isso, já que você está fazendo mudanças personalizadas no tema de seus pais. Isto ajuda você a organizar seu código, e garantir que qualquer mudança (literalmente) fique por aqui se o tema receber uma atualização.
Implementando um sticky header usando código: Encontrando as tags de cabeçalho corretas
Com tudo isso em mente, você pode começar. O primeiro trabalho é descobrir as tags HTML certas para a sua navegação. O resultado aqui vai depender do tema que você usar, embora a tag de header seja uma aposta segura para a maioria dos casos. A melhor maneira de descobrir é usar as ferramentas de desenvolvimento do seu navegador e selecionar o cabeçalho:
Você provavelmente descobrirá que não é tão simples quanto uma tag, então sugerimos que você dê uma olhada na documentação do seu tema (ou fale diretamente com o desenvolvedor) a fim de descobrir as tags que você precisa se você lutar.
Implementando um sticky header usando código: Trabalhando com sua style sheets
A seguir, você deve criar ou abrir um arquivo style.css dentro do diretório para o seu child theme. Isso anexará seu CSS ao da instalação principal, e onde as tags se repetem, sobreponha-o.
Dentro deste arquivo, adicione os metadados típicos que você precisa para registrar o tema da criança:
A seguir, você vai querer adicionar código para habilitar seu sticky header. Isto vai precisar de algum conhecimento sobre herança CSS e, dependendo do tema que você usar, pode ser uma experiência desagradável.
Por exemplo, o tema Vinte e Dois usa duas tags de cabeçalho, e pode ser difícil encontrar a mistura certa de CSS para fazer o seu código funcionar no elemento certo. Isto é mesmo com o diálogo da classe template dentro do Block Editor (se você usar a funcionalidade FSE):
Independentemente disso, o código que você precisa será o mesmo:
Akhil Arjun oferece uma solução de duas linhas para isso:
header {
position: sticky; top: 0;
}
Entretanto, você também pode querer considerar o uso do position: propriedade fixed, que usa mais algumas linhas de código:
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
Isto usa o z-index para trazer o cabeçalho para a frente da pilha, depois um atributo fixo para que ele fique no topo da tela.
Note que você pode precisar adicionar uma nova classe aqui, a fim de aplicar o sticky header. De qualquer forma, isto deve implementar os ossos do seu sticky header. Uma vez que você pregar isso, você vai querer trabalhar mais no design para que ele funcione com o resto do seu site.
Dicas para tornar seus sticky headers mais efetivos
Assim que você tiver um método para criar um sticky header, você vai querer descobrir como você pode aperfeiçoá-lo. Há muitas maneiras de melhorar o design básico e garantir que ele atenda às necessidades dos visitantes do seu site.
Uma boa analogia para sua própria sticky header é ter certeza de que é como um bom árbitro esportivo. Na maioria das vezes, você não vai saber que eles estão lá. Entretanto, quando um jogador ou treinador precisar deles, eles farão uma chamada e se tornarão presentes.
Sua sticky header deve fazer o mesmo – ficar na sombra ou fora de si até que o usuário precise dela. Você pode conseguir isso com algumas regras básicas que (como sempre) você pode escolher quebrar se o design o exigir:
- Mantenha-o compacto. O espaço na tela vai estar em um espaço premium, então olhe para manter o cabeçalho pequeno. Você poderia implementar uma solução onde seu cabeçalho escalasse de forma dinâmica, baseado na área do site em que ele é apresentado.
- Use cabeçalhos e menus ocultos em telas pequenas. Por extensão, você poderia escolher esconder um menu, muito parecido com o exemplo anterior do Hammerhead. Isto ajuda a manter o cabeçalho compacto, e se relaciona com o próximo ponto.
- Certifique-se de que você não introduza distrações. Quanto maior for o número de elementos na tela, mais eles se esforçam para chamar a atenção. Se o sticky header não precisa mostrar um elemento, remova-o – seu conteúdo corporal irá apreciá-lo, assim como suas métricas.
- Ofereça contraste. Este é um truque do livro de jogo Call to Action (CTA). Se você usar contraste para o sticky header como um todo, e seus elementos individuais, você pode atrair o olho para onde você precisa dele – ou empurrá-lo para outro lugar.
No geral, seu sticky header só fará o que você precisa, e não mais. Algumas vezes você precisará manter as coisas no mínimo, outras vezes você irá empacotá-lo com links, logos e formulários de inscrição. De qualquer forma, se você manter o UX e o UI em mente, você sempre tomará uma decisão focada no usuário.
Resumo
A usabilidade e o UX do seu site são tão importantes que devem ser a primeira, segunda e terceira coisas que você prega quando você o projeta e constrói. A navegação do seu site é apenas um aspecto disso, mas você precisa descobrir a melhor maneira de fazer com que um usuário se movimente pelo seu site sem alarde. Um sticky header é uma boa maneira de consegui-la.
Se você prender o cabeçalho no topo da tela, o usuário sempre terá elementos de navegação à mão. Isto é especialmente útil em dispositivos que requerem rolagem para se moverem pelo conteúdo corporal, mas oferece benefícios independentemente do fator forma. Se você é um usuário WordPress, você pode escolher um plugin ou código para implementar um sticky header. Entretanto, você pode identificar a funcionalidade em seu tema favorito, e nesse caso, você pode usar isso e ter flexibilidade.
Você acha que um sticky header é um elemento essencial de UX e UI de um site, e se não for, o que é? Nos informe na seção de comentários abaixo!
Deixe um comentário