Como fazer um cabeçalho pegajoso no WordPress
Antes de entrar em como podemos criar um cabeçalho fixo no WordPress, vamos primeiro entender o que são e por que podemos querer usá-los. Elementos fixos, ou elementos fixos, são tipos especiais de elementos que sempre permanecem visíveis e não mudam de posição quando o usuário está rolando para cima ou para baixo. Esses elementos podem ser acessados a qualquer momento devido ao seu posicionamento e, portanto, são muito úteis para menus ou outras opções de navegação.
Você deseja oferecer a seus usuários o máximo de opções convenientes possível, para tornar seu conteúdo facilmente acessível e reduzir a frustração do usuário. Usando os elementos fixos, os usuários podem alternar rapidamente de uma página do seu site para outra e encontrar exatamente o que precisam. Todo esse conforto e facilidade de uso significa que sua experiência de usuário será muito melhor e você terá maior retenção de usuários.
Agora, abordaremos um dos principais tipos de elementos aderentes, o cabeçalho aderente e uma ferramenta incrível que pode nos ajudar a criar e personalizar facilmente esses elementos. A ferramenta em questão é chamada WP Sticky.
Existem muitas maneiras diferentes de criar cabeçalhos fixos além do WP Sticky. Você pode até criar esses elementos pegajosos usando código HTML e CSS puro, mas isso exige algum conhecimento técnico e é um processo demorado. Este plugin é uma solução muito mais simples para o problema e é extremamente amigável para iniciantes.
Antes de podermos começar a usar o WP Sticky, devemos primeiro baixá-lo e instalar o plugin. Como este é um processo muito simples, não vamos perder tempo com isso. Em vez disso, vamos direto para a criação do nosso primeiro cabeçalho fixo.
A primeira coisa que precisamos fazer é entrar na seção de plugins em nosso painel de administração do WordPress; a partir daí, selecione WP Sticky Pro e clique em Configurações.
Seremos recebidos com essas opções onde precisaremos selecionar Adicionar novo elemento pegajoso.
Depois disso, veremos uma nova entrada na guia Seus Elementos Fixos chamada Elemento Fixo #1. Parabéns, você criou seu primeiro elemento fixo, mas há muito mais a fazer antes de termos um cabeçalho fixo funcional. Como você pode ver, existem algumas categorias de configurações diferentes para o nosso elemento pegajoso.
Vamos verificá-los com mais detalhes.
É aqui que vamos nomear nosso elemento e escolher exatamente o que queremos tornar pegajoso.
Primeiramente, precisamos dar um nome ao nosso elemento pegajoso; neste caso, será Sticky Header.
Em seguida, precisamos localizar e selecionar um elemento que queremos tornar fixo. Existem duas maneiras de conseguirmos isso.
Seletor Visual
Esta é a opção mais conveniente e fácil. Basta entrar na seção Basic e selecionar a opção Pick Element.
Feito isso, seu site será aberto junto com o menu WP Sticky na parte superior, sinalizando que você entrou no seletor visual. Se você passar o ponteiro sobre alguns dos elementos, notará um retângulo de linha quebrada amarelada, visualizando a área que você selecionou. Clique nele com o botão esquerdo, para selecioná-lo.
Isso o levará de volta à página de configurações do WP Sticky, onde você verá o identificador exclusivo do elemento selecionado. No nosso caso, parece algo assim.
Depois, clique no botão Salvar alterações no canto superior direito e pronto.
Escrevendo o identificador exclusivo
Se você preferir e estiver familiarizado com o ID exclusivo do elemento que deseja tornar fixo, em vez de selecioná-lo visualmente, basta anotar seu ID exclusivo.
Opções visuais
Depois que terminarmos de nomear e selecionar nosso elemento, é hora de torná-lo um cabeçalho e personalizá-lo. O WP Sticky nos oferece muitas opções para fazer isso.
Como queremos fazer um cabeçalho, vamos deixar esta opção em seu estado padrão, que é Top. Caso mude de ideia ou os requisitos mudem, você também pode selecionar a opção Inferior.
Espaço entre o topo da página e o elemento adesivo
Às vezes, nossos elementos fixos podem ficar muito próximos do topo da página. Podemos corrigir isso manualmente digitando o número de pixels entre o topo da página e nosso elemento fixo designado.
Por padrão, esta opção não está definida, pois a maioria dos elementos será colocada corretamente automaticamente.
Verifique a barra de ferramentas do administrador
Se o seu site tiver uma barra de ferramentas de administração especializada, isso pode obstruir seu cabeçalho fixo. Se for esse o caso, basta marcar esta opção e o problema será resolvido. O WP Sticky reconhecerá automaticamente o tamanho da barra de ferramentas e reagirá de acordo.
Às vezes, você deseja ter comportamentos diferentes, dependendo do dispositivo que seus visitantes estão usando para visualizar seu site. Você pode não querer ter um cabeçalho fixo em dispositivos móveis. O WP Sticky oferece a opção de selecionar quais categorias de dispositivos terão o comportamento de aderência. No nosso caso, optaremos por dispositivos pequenos e médios.
Outro caso que pode exigir alguma personalização manual é se houver elementos que apareçam sobre seu cabeçalho fixo. Para evitar que isso aconteça, você precisará aumentar o Z-index do seu cabeçalho fixo.
Se você não tiver certeza sobre os valores do índice Z dos elementos que estão sobrepostos ao seu cabeçalho, digite o valor máximo, 99999, e isso resolverá o problema.
Existem duas configurações de efeito que você pode usar. Fade in e deslize para baixo. Agora, qual você vai acabar usando depende totalmente da sua preferência pessoal e da aparência desejada do site. Experimente até decidir.
Outra personalização visual do elemento pegajoso. Dependendo do resto do site, usando o controle deslizante, podemos tornar o elemento adesivo mais ou menos transparente.
O que acontece se você não quiser que certas partes do seu site tenham o cabeçalho fixo? Bem, este controle deslizante permite que você personalize o ponto inicial e o ponto final onde seu cabeçalho fixo será exibido em seu site enquanto você continua rolando.
Cor de fundo
E se nosso elemento pegajoso não for tão claramente visível? O plugin vem com a opção de destacá-lo, dando-lhe uma cor de fundo. Para fazer isso, clique no botão mostrado abaixo e escolha a cor de fundo desejada. É tão fácil.
Se você deseja fazer ainda mais alterações em seu elemento fixo que não são cobertos pelas opções mencionadas acima, há um campo onde você pode adicionar personalização através de CSS. Uma coisa importante a ter em mente, neste caso, é que não há necessidade de envolver estilos em seletores. Você não precisa escrever .classname{color:#FFF;}, em vez disso tudo que você precisa escrever é color:#FFF;
Vamos deixar isso em branco, pois não há mais necessidade de personalizar nosso cabeçalho de demonstração.
Após alterar todas as configurações desejadas, não se esqueça de salvar as alterações. Feito isso, podemos ir em frente e clicar no botão Preview Sticky no canto superior direito para visualizar as alterações que fizemos até agora.
Para concluir
O WP Sticky é um excelente complemento para qualquer site e facilita muito o trabalho do desenvolvedor. Tão simples de usar, mas oferecendo opções de personalização detalhadas e profundas, este plugin é garantido para ajudá-lo a criar o cabeçalho perfeito para o seu site. Esta é uma ótima notícia, pois um cabeçalho fixo pode aumentar significativamente as conversões do site.
O WP Sticky possui uma versão Pro, que inclui todas as opções mencionadas acima e custa US $ 5,99 por mês ou US $ 39 para uma licença vitalícia. Vários planos de preços diferentes também são oferecidos para equipes e agências.
Vallery Henings
Vallery Henings é redatora e redatora de conteúdo especializada em blogs fantasmas, campanhas de email marketing e páginas de vendas. Ela também é uma amante de viagens, biscoitos de manteiga de amendoim e um nome de cachorro Mimy.