O que \u00e9 um sticky header?<\/h2>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/header-section.png\")
Uma se\u00e7\u00e3o de cabe\u00e7alho do site da Kotaku<\/figcaption><\/figure>\nA parte de cabe\u00e7alho do seu site \u00e9 como o balc\u00e3o de informa\u00e7\u00f5es do seu site. Vai ser algo que a maioria dos usu\u00e1rios vai identificar primeiro, e ser\u00e1 sempre em algum lugar que eles v\u00e3o verificar para descobrir algumas informa\u00e7\u00f5es importantes e executar certas a\u00e7\u00f5es:<\/p>\n
\n- Por exemplo, seu logotipo ou nome do site estar\u00e1 aqui, o que serve como um ponto de apoio para seus usu\u00e1rios. Eles poder\u00e3o voltar para a p\u00e1gina inicial clicando no logotipo na maioria dos casos.<\/li>\n
- Se voc\u00ea executar contas de usu\u00e1rio<\/a> em seu site, o cabe\u00e7alho normalmente oferecer\u00e1 um link para entrar nessas p\u00e1ginas de conta e perfil.<\/li>\n
- Pode haver funcionalidade de pesquisa<\/a> aqui, especialmente se voc\u00ea tiver um site grande com muito conte\u00fado em diferentes \u00e1reas.<\/li>\n
- Naturalmente, a navega\u00e7\u00e3o do seu site<\/a> tamb\u00e9m \u00e9 uma parte integrante do cabe\u00e7alho.<\/li>\n<\/ul>\n
No geral, seu cabe\u00e7alho \u00e9 um ponto de contato para os usu\u00e1rios. Voc\u00ea descobrir\u00e1 que muitas vezes \u00e9 a ‘barra’ para padr\u00f5es de leitura em forma de F<\/a>, ent\u00e3o ele chama a aten\u00e7\u00e3o de seus usu\u00e1rios em um n\u00edvel intuitivo.<\/p>\nVoc\u00ea provavelmente j\u00e1 saber\u00e1 o que \u00e9 um sticky header, mesmo em um sentido intuitivo. \u00c9 onde a se\u00e7\u00e3o de cabe\u00e7alho do seu site ‘fixa’ no topo da tela enquanto voc\u00ea rola ao longo do site. Em contraste com um cabe\u00e7alho est\u00e1tico, que permanece no lugar e desaparece enquanto voc\u00ea rola, o sticky header \u00e9 um elemento sempre vis\u00edvel.<\/p>\n
Enquanto a abordagem t\u00edpica para um sticky header \u00e9 colocar uma vers\u00e3o est\u00e1tica dele no topo da sua tela, existem algumas maneiras diferentes de tornar isto mais utiliz\u00e1vel, eficiente e din\u00e2mico. A seguir, vamos dar uma olhada em alguns exemplos do mundo real.<\/p>\n\n
Exemplos de sticky headers na web<\/h2>\n
Voc\u00ea encontrar\u00e1 sticky headers por toda a web, e \u00e9 uma boa ideia verificar alguns para ver o escopo do que voc\u00ea pode alcan\u00e7ar. Um dos exemplos mais b\u00e1sicos ao redor \u00e9 do Hammerhead<\/a>. Este site usa um ‘flyout menu’ e um sticky header, e \u00e9 simples: Ele est\u00e1 comprometido em se ater ao topo da p\u00e1gina em seu layout est\u00e1tico:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/hammerhead-site-gif.gif\")
O sticky header no site Hammerhead<\/figcaption><\/figure>\nOutra implementa\u00e7\u00e3o simples \u00e9 da Kin<\/a>. Isto usa um sticky header t\u00edpico, mas desta vez com alguns elementos legais de design.<\/p>\nVoc\u00ea notar\u00e1 que o contraste muda com base na parte do site que voc\u00ea percorre, e h\u00e1 alguns efeitos de transi\u00e7\u00e3o agrad\u00e1veis tamb\u00e9m:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kin-site-gif.gif\")
O sticky header no site da Kin.<\/figcaption><\/figure>\nN\u00f3s n\u00e3o podemos terminar esta se\u00e7\u00e3o sem mencionar o sticky header da Kinsta<\/a>. Isto tamb\u00e9m mant\u00e9m as coisas simples com rela\u00e7\u00e3o aos elementos do cabe\u00e7alho, mas inclui um toque de usabilidade limpo que oferece valor ao visitante:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kinsta-site-gif.gif\")
O sticky header no site da Kinsta.<\/figcaption><\/figure>\nDesta vez, voc\u00ea ver\u00e1 o cabe\u00e7alho desaparecer quando voc\u00ea rolar a p\u00e1gina para baixo. No entanto, ele reaparecer\u00e1 quando voc\u00ea rolar para cima – voc\u00ea pode se referir a ele como um “cabe\u00e7alho parcialmente persistente”<\/p>\n
A premissa aqui \u00e9 que a rolagem para baixo significa que voc\u00ea est\u00e1 investindo seu tempo na pr\u00f3pria p\u00e1gina, ent\u00e3o provavelmente n\u00e3o precisar\u00e1 de navega\u00e7\u00e3o, p\u00e1ginas de login, ou para ir para outro lugar. Entretanto, no momento em que voc\u00ea rolar para cima, \u00e9 mais prov\u00e1vel que voc\u00ea queira ir para outra p\u00e1gina do site. Aqui, o sticky header vai aparecer para salvar o dia.<\/p>\n
S\u00e3o esses pequenos toques de experi\u00eancia de usu\u00e1rio (UX) que fazem com que os visitantes de um site queiram voltar a ele. Para seus pr\u00f3prios desenhos de sticky header, voc\u00ea vai querer considerar o que voc\u00ea pode fazer para fazer um UX e um UI que foca nas necessidades do visitante.<\/p>\n
Por que voc\u00ea deve usar um sticky header para o seu site?<\/h2>\n
Muitos sites usam sticky headers, e h\u00e1 muitas boas raz\u00f5es para que isso aconte\u00e7a. Eles podem ser partes cruciais da sua experi\u00eancia geral no site e ter muita influ\u00eancia sobre a sua UX e UI.<\/p>\n
Como os elementos que voc\u00ea incluir\u00e1 em um cabe\u00e7alho s\u00e3o aqueles que o usu\u00e1rio sempre vai querer acessar, faz sentido t\u00ea-los sempre em exibi\u00e7\u00e3o. Isto \u00e9 especialmente verdadeiro para dispositivos e formatos de telas menores<\/a>.<\/p>\nEmbora possa parecer contraintuitivo ter um cabe\u00e7alho “sempre ligado” quando o espa\u00e7o de visualiza\u00e7\u00e3o do porto est\u00e1 em um pr\u00eamio, este \u00e9 apenas um pequeno sacrif\u00edcio. O verdadeiro benef\u00edcio \u00e9 dar a um usu\u00e1rio m\u00f3vel menos raz\u00e3o para se deslocar – uma necessidade em dispositivos menores. Se voc\u00ea pode fornecer a navega\u00e7\u00e3o do seu site sem a necessidade de rolagem, o usu\u00e1rio pode se mover pelo seu site com maior facilidade.<\/p>\n
Os pr\u00f3s e contras do\u00a0sticky header<\/h3>\n
Vamos cobrir alguns dos pontos positivos do sticky header, ent\u00e3o vamos resumi-los rapidamente:<\/p>\n
\n- Voc\u00ea pode oferecer navega\u00e7\u00e3o que o usu\u00e1rio pode sempre acessar, o que ajuda a preservar o padr\u00e3o natural de leitura em seu site.<\/li>\n
- Voc\u00ea \u00e9 capaz de adaptar o cabe\u00e7alho a diferentes necessidades<\/a>, tais como contrastes, esquemas de cores, ou at\u00e9 mesmo inten\u00e7\u00f5es do usu\u00e1rio.<\/li>\n
- H\u00e1 a oportunidade de oferecer valor ao usu\u00e1rio, tanto para a \u00e1rea de trabalho quanto para telas menores.<\/li>\n<\/ul>\n
No entanto, um sticky header n\u00e3o \u00e9 uma panaceia para aumentar o UX, e h\u00e1 algumas desvantagens em us\u00e1-los:<\/p>\n
\n- Cobrimos isso em um resumo, mas para telas de todos os tamanhos, voc\u00ea precisar\u00e1 alocar espa\u00e7o para seu cabe\u00e7alho.<\/li>\n
- Um sticky header naturalmente tirar\u00e1 o resto do seu conte\u00fado porque seus pr\u00f3prios elementos afastar\u00e3o o olho do corpo da p\u00e1gina.<\/li>\n
- H\u00e1 mais trabalho de desenvolvimento que vai para um bom sticky header porque voc\u00ea precisa implement\u00e1-lo, certificar-se de que ele funciona dentro de diferentes navegadores e verific\u00e1-lo em busca de bugs em telas menores.<\/li>\n<\/ul>\n
Entretanto, se voc\u00ea pensar em suas escolhas de design, necessidades do usu\u00e1rio e objetivos do site, voc\u00ea pode mitigar ou remover todos esses inconvenientes, enquanto voc\u00ea mant\u00e9m os pontos positivos. Uma maneira de voc\u00ea fazer isso \u00e9 atrav\u00e9s de plugins do WordPress.<\/p>\n
3 Plugins para ajudar voc\u00ea a criar sticky headers<\/h2>\n
Nas pr\u00f3ximas se\u00e7\u00f5es, mostraremos alguns dos principais plugins de sticky header para WordPress. Mais tarde, falaremos sobre se este tipo de solu\u00e7\u00e3o \u00e9 adequado para voc\u00ea. Independentemente disso, um plugin pode ajud\u00e1-lo a implementar funcionalidades sem a necessidade de c\u00f3digo, o que \u00e9 valioso se o seu tema<\/a> n\u00e3o o incluir.<\/p>\nAl\u00e9m disso, voc\u00ea pode aproveitar a experi\u00eancia de design e desenvolvimento de um especialista atrav\u00e9s do plugin. Os desenvolvedores far\u00e3o algumas das escolhas t\u00e9cnicas mais importantes para voc\u00ea, e o envolver\u00e3o em uma interface intuitiva e f\u00e1cil de usar.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
O Sticky Menu & Sticky Header<\/a> plugin da Webfactory \u00e9 uma boa primeira escolha, devido \u00e0 sua riqueza de recursos, flexibilidade \u00fatil e pre\u00e7o acess\u00edvel.<\/p>\n![\"Sticky](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-sticky-header-plugin.png\")
Sticky Menu & Sticky Header.<\/figcaption><\/figure>\nO sorteio aqui \u00e9 que voc\u00ea pode fazer qualquer elemento do seu site grudar na tela. Isto pode ser \u00fatil de v\u00e1rias maneiras, mas significa que implementar um sticky header \u00e9 uma esquiva.<\/p>\n
O plugin tamb\u00e9m vem com uma s\u00e9rie de op\u00e7\u00f5es poderosas para ajudar voc\u00ea a implementar um sticky header:<\/p>\n
\n- Voc\u00ea pode definir seu n\u00edvel desejado de posicionamento ‘top’. Isto significa que voc\u00ea pode adicionar espa\u00e7o na \u00e1rea acima do cabe\u00e7alho para se adequar aos seus objetivos de design.<\/li>\n
- H\u00e1 tamb\u00e9m outras op\u00e7\u00f5es de posicionamento, tais como usar a propriedade CSS do \u00edndice z<\/a> para projetar seu site ‘de frente para tr\u00e1s’<\/li>\n
- Voc\u00ea pode habilitar o sticky header somente nas p\u00e1ginas que voc\u00ea selecionar, o que pode ser \u00fatil se voc\u00ea tiver p\u00e1ginas de destino<\/a> ou outro conte\u00fado impr\u00f3prio.<\/li>\n<\/ul>\n
O Sticky Menu & Sticky Header tamb\u00e9m inclui um modo de depura\u00e7\u00e3o, para ajud\u00e1-lo a corrigir qualquer elemento ‘n\u00e3o adesivo’. O Modo Din\u00e2mico tamb\u00e9m ajudar\u00e1 a resolver problemas com designs responsivos.<\/p>\n
A melhor not\u00edcia \u00e9 que o Sticky Menu & Sticky Header \u00e9 gratuito para download e uso. Al\u00e9m disso, h\u00e1 uma vers\u00e3o premium<\/a> que retira mais do know-how t\u00e9cnico que voc\u00ea precisa.<\/p>\nCom a vers\u00e3o gratuita do plugin, voc\u00ea precisar\u00e1 conhecer o seletor de elementos a fim de especific\u00e1-lo nas op\u00e7\u00f5es. No entanto, a vers\u00e3o premium ($49-199 por ano) oferece um seletor de elementos visuais para contornar isto.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
Embora n\u00f3s n\u00e3o recomendar\u00edamos um tema padr\u00e3o do WordPress para a maioria dos sites focados no cliente, eles t\u00eam o suficiente na bolsa para blogs e tipos similares de sites.<\/p>\n
Twenty Twenty-One<\/a> \u00e9 um dos temas padr\u00e3o mais destacados em nossa opini\u00e3o, mas falta funcionalidade de sticky header. Se voc\u00ea quiser adicionar esta funcionalidade, o plugin Options for Twenty Twenty-One<\/a> pode alcan\u00e7ar o que voc\u00ea precisa.<\/p>\n![\"Options](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/options-twenty-twenty-one.png\")
Options for Twenty Twenty-One<\/figcaption><\/figure>\nEsta edi\u00e7\u00e3o do plugin \u00e9 uma das muitas. Cada tema padr\u00e3o recente tem uma vers\u00e3o, mas ainda n\u00e3o existe uma para o Twenty Twenty-Two<\/a>. Independentemente disso, a funcionalidade central do plugin fornece muitos extras:<\/p>\n\n- H\u00e1 uma ferramenta de edi\u00e7\u00e3o completa do site (FSE)<\/a>, pronta para sua implementa\u00e7\u00e3o completa.<\/li>\n
- Voc\u00ea \u00e9 capaz de mudar o tamanho da fonte do corpo, remover hyperlink sublinhado e outras personaliza\u00e7\u00f5es simples.<\/li>\n
- Voc\u00ea pode trabalhar com as larguras m\u00e1ximas de recipientes e elementos, sem a necessidade de c\u00f3digo.<\/li>\n<\/ul>\n
Existem muitas outras op\u00e7\u00f5es para sua navega\u00e7\u00e3o, conte\u00fado, rodap\u00e9 e cabe\u00e7alho. Para este \u00faltimo, voc\u00ea pode escond\u00ea-lo da vista, torn\u00e1-lo totalmente largo, adicionar uma imagem de fundo<\/a> e cor, e muitas outras altera\u00e7\u00f5es.<\/p>\nEnquanto o plugin principal \u00e9 gratuito<\/a>, voc\u00ea precisa de uma atualiza\u00e7\u00e3o premium ($25-50)<\/a> para acessar as op\u00e7\u00f5es de sticky header. Isto permite que voc\u00ea ajuste as configura\u00e7\u00f5es para ambos os cabe\u00e7alhos m\u00f3veis e desktop do WordPress Customizer:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-header-customizer.png\")
O WordPress Customizer, mostrando op\u00e7\u00f5es de sticky headers<\/figcaption><\/figure>\nDado o nome, voc\u00ea n\u00e3o deve esperar que este plugin funcione com qualquer outro tema al\u00e9m do Twenty Twenty-One (ou qualquer ‘sabor’ que voc\u00ea escolher.) Entretanto, se voc\u00ea usar este tema padr\u00e3o e n\u00e3o quiser codificar, ser\u00e1 ideal para ajud\u00e1-lo a adicionar um sticky header ao seu site.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme \u2013 myStickymenu<\/h3>\n
Aqui est\u00e1 um plugin que coloca suas cartas em cima da mesa. O plugin myStickymenu<\/a> do Pr\u00eamio oferece quase tudo que voc\u00ea vai querer incluir em seu pr\u00f3prio sticky header, e embala em uma grande quantidade de funcionalidade.<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mystickymenu-plugin.png\")
O plugin myStickymenu.<\/figcaption><\/figure>\nTem um n\u00famero surpreendente de revis\u00f5es positivas no Diret\u00f3rio de Plugins do WordPress<\/a> – 799 revis\u00f5es cinco estrelas para uma m\u00e9dia de 4,9. Parte disto se deve ao abrangente conjunto de recursos \u00e0 sua disposi\u00e7\u00e3o:<\/p>\n\n- Ele oferece flexibilidade de uso. Por exemplo, voc\u00ea pode criar uma barra de boas-vindas, bem como um menu fixo e um cabe\u00e7alho.<\/li>\n
- O plugin se adapta ao qu\u00e3o responsivo \u00e9 o seu site. Isto significa que voc\u00ea n\u00e3o precisar\u00e1 implementar mais nenhuma funcionalidade usando c\u00f3digo.<\/li>\n
- Na verdade, o plugin n\u00e3o precisa que voc\u00ea saiba codificar para poder us\u00e1-lo em sua totalidade.<\/li>\n
- O plugin myStickymenu tem compatibilidade com uma s\u00e9rie de plugins l\u00edderes de constru\u00e7\u00e3o de p\u00e1ginas, tais como Elementor<\/a>, Beaver Builder<\/a>, o Block Editor nativo<\/a>, o Divi Builder<\/a>, e muitos outros.<\/li>\n<\/ul>\n
Voc\u00ea tamb\u00e9m tem uma s\u00e9rie de op\u00e7\u00f5es de customiza\u00e7\u00e3o para fazer com que seu sticky header funcione como voc\u00ea gostaria. Por exemplo, voc\u00ea pode escolher fazer um cabe\u00e7alho parcialmente persistente, mudar aspectos simples como cores de fundo, escolhas tipogr\u00e1ficas, e mais.<\/p>\n
Al\u00e9m disso, por causa das diferentes maneiras que voc\u00ea pode apresentar seu sticky header (como o menu e op\u00e7\u00f5es de barras de boas-vindas), voc\u00ea pode escolher como eles s\u00e3o exibidos, e onde, em seu site.<\/p>\n
Mesmo que a vers\u00e3o gratuita do myStickymenu possa ser suficiente para suas necessidades, h\u00e1 tamb\u00e9m uma vers\u00e3o premium ($25-99 por ano.) Isto oferece mais maneiras de desativar seu sticky header dadas as condi\u00e7\u00f5es espec\u00edficas, os temporizadores de contagem regressiva, a capacidade de adicionar v\u00e1rias barras de boas-vindas e mais algumas op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/p>\n
Como criar um sticky header no WordPress<\/h2>\n
Para o resto deste tutorial, vamos mostrar a voc\u00ea como criar um sticky header no WordPress. H\u00e1 algumas abordagens que voc\u00ea pode fazer aqui, e n\u00f3s vamos cobrir ambas. No entanto, nosso primeiro passo ir\u00e1 ajud\u00e1-lo a tomar essa decis\u00e3o.<\/p>\n
A partir da\u00ed, voc\u00ea trabalhar\u00e1 em seu pr\u00f3prio sticky header usando seu m\u00e9todo preferido e ent\u00e3o aplicar\u00e1 algumas de nossas dicas para tornar o seu mais eficiente e utiliz\u00e1vel no futuro.<\/p>\n
1. Decida como voc\u00ea vai criar o seu sticky header<\/h3>\n
Uma raz\u00e3o pela qual o WordPress \u00e9 t\u00e3o flex\u00edvel<\/a> para todos os tipos de usu\u00e1rios \u00e9 devido ao seu ecossistema de plugins e extensibilidade de c\u00f3digo aberto. Como tal, voc\u00ea pode escolher uma solu\u00e7\u00e3o pronta para uso ou ‘enrolar a sua pr\u00f3pria solu\u00e7\u00e3o’<\/p>\nSua primeira tarefa \u00e9 decidir se voc\u00ea quer usar um plugin ou cavar em c\u00f3digo para implementar seu sticky header. Vamos quebrar as duas solu\u00e7\u00f5es:<\/p>\n
\n- Plugins.<\/strong> Este vai ser um m\u00e9todo aprovado pelo WordPress-approved<\/a>, especialmente se voc\u00ea n\u00e3o tiver o conhecimento t\u00e9cnico para entregar. Ele oferecer\u00e1 flexibilidade, mas voc\u00ea est\u00e1 \u00e0 merc\u00ea do que o desenvolvedor pensa ser importante, e sua habilidade de codificar.<\/li>\n
- Codifica\u00e7\u00e3o.<\/strong> Se voc\u00ea tem uma vis\u00e3o clara em mente, voc\u00ea pode querer codificar um sticky header para o seu site. \u00c9 claro, voc\u00ea precisar\u00e1 da experi\u00eancia t\u00e9cnica<\/a> para conseguir isso (principalmente CSS<\/a>), mas os resultados ser\u00e3o exatamente o que voc\u00ea quer. Entretanto, voc\u00ea ter\u00e1 mais manuten\u00e7\u00e3o em potencial para realizar, e seu sucesso depender\u00e1 de suas pr\u00f3prias habilidades de codificar.<\/li>\n<\/ul>\n
N\u00f3s dizemos que para a maioria dos usu\u00e1rios de WordPress, um plugin ser\u00e1 a solu\u00e7\u00e3o ideal para criar um sticky header. Ele vai jogar bem com a plataforma e \u00e9 mais f\u00e1cil de solucionar problemas se voc\u00ea tiver problemas. Entretanto, em passos futuros, n\u00f3s cobriremos uma solu\u00e7\u00e3o de codifica\u00e7\u00e3o, bem como a op\u00e7\u00e3o de plugin.<\/p>\n
2. Escolha se voc\u00ea vai modificar seu tema atual ou selecione um tema dedicado<\/h3>\n
O pr\u00f3ximo aspecto que voc\u00ea vai querer considerar \u00e9 se voc\u00ea modifica seu tema atual<\/a>, ou escolhe um que j\u00e1 tenha a funcionalidade de sticky header dentro de seu conjunto de recursos. Isto ser\u00e1 importante se o seu tema n\u00e3o tiver a funcionalidade de lidar com um sticky header.<\/p>\nMuitos temas e plugins de constru\u00e7\u00e3o de p\u00e1ginas incluir\u00e3o uma op\u00e7\u00e3o de sticky header, por causa dos benef\u00edcios e para oferecer a voc\u00ea flexibilidade de design. Voc\u00ea ver\u00e1 que alguns dos maiores temas e plugins de uso geral fornecem isso como padr\u00e3o, tais como Elementor<\/a>, Astra<\/a>, Divi, Avada, e in\u00fameros outros.<\/p>\n![\"TheA](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/wordpress-theme-sticky.png\")
A op\u00e7\u00e3o de sticky header dentro do Elementor.<\/figcaption><\/figure>\nPara tomar esta decis\u00e3o, voc\u00ea vai querer considerar algumas coisas sobre o seu tema e site atuais:<\/p>\n
\n- O seu site j\u00e1 tem a apar\u00eancia que voc\u00ea deseja ou ele precisa de uma atualiza\u00e7\u00e3o?<\/em><\/li>\n
- Seu tema atual \u00e9 f\u00e1cil de customizar sob o cap\u00f4?<\/em> A documenta\u00e7\u00e3o do desenvolvedor deve lhe dizer isso.<\/li>\n
- Voc\u00ea quer uma implementa\u00e7\u00e3o de cabe\u00e7alho r\u00edgido complexa preferida ou uma que seja mais direta?<\/em><\/li>\n<\/ul>\n
Com base nas respostas que voc\u00ea der aqui, voc\u00ea escolher\u00e1 uma ou outra. Se voc\u00ea precisar de um novo tema, voc\u00ea tamb\u00e9m pode escolher um que ofere\u00e7a uma implementa\u00e7\u00e3o de sticky header. Entretanto, se voc\u00ea quiser ficar com seu tema atual, e ele ainda n\u00e3o tem a funcionalidade sticky header, voc\u00ea vai querer arrega\u00e7ar suas mangas e seguir um dos seguintes sub-passos.<\/p>\n
2a. Use um plugin com um tema espec\u00edfico<\/h4>\n
Se voc\u00ea n\u00e3o tem experi\u00eancia em desenvolvimento, n\u00f3s recomendar\u00edamos que voc\u00ea escolhesse um plugin para adicionar a funcionalidade sticky header ao seu site. H\u00e1 muitas vari\u00e1veis que voc\u00ea precisa considerar, construir e manter. Em contraste, um plugin j\u00e1 ter\u00e1 uma base de c\u00f3digo que d\u00e1 um aceno a esses elementos, ent\u00e3o ele oferecer\u00e1 uma op\u00e7\u00e3o quase ideal para a maioria das circunst\u00e2ncias.<\/p>\n
Para esta parte do tutorial, n\u00f3s vamos usar o plugin myStickymenu, j\u00e1 que este oferece um conjunto de recursos bem completo e rico para a maioria dos casos de uso. Entretanto, o uso geral ser\u00e1 o mesmo para a maioria dos plugins que voc\u00ea vai usar.<\/p>\n
Assim que voc\u00ea instalar e ativar seu plugin<\/a>, voc\u00ea precisar\u00e1 ir para onde quer que as op\u00e7\u00f5es do tema estejam. Para alguns plugins, isto estar\u00e1 dentro do WordPress Customizer; para outros, um painel de administra\u00e7\u00e3o dedicado. Aqui, voc\u00ea usar\u00e1 um painel de administra\u00e7\u00e3o personalizado em myStickymenu > Dashboard<\/strong> no WordPress:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/plugin-admin-panel.png\")
O painel de administra\u00e7\u00e3o do myStickymenu dentro do WordPress.<\/figcaption><\/figure>\nNo entanto, a tela padr\u00e3o mostra as configura\u00e7\u00f5es para a barra de boas-vindas, que para este tutorial, n\u00f3s n\u00e3o queremos. Como tal, clique no bot\u00e3o de altern\u00e2ncia para desligar a barra, e clique na tela de configura\u00e7\u00f5es do menu Sticky<\/strong>:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-settings.png\")
A tela de configura\u00e7\u00f5es do menu Sticky<\/figcaption><\/figure>\nEmbora haja muitas op\u00e7\u00f5es aqui, voc\u00ea s\u00f3 precisa do painel Sticky Class<\/strong>. Uma vez que voc\u00ea mude o cabe\u00e7alho sticky para “On”, digite a tag HTML relevante para seu cabe\u00e7alho no campo relevante que coincide com o menu suspenso Outra Classe ou ID<\/strong>:<\/p>\n![\"Mudando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-class-dropdown.png\")
Mudando a tag seletora de HTML dentro do plugin myStickymenu.<\/figcaption><\/figure>\nUma vez que voc\u00ea salvar suas mudan\u00e7as, isto se aplicar\u00e1 ao seu site. A partir da\u00ed, voc\u00ea pode olhar para algumas das funcionalidades de estilo. Por exemplo, voc\u00ea define um efeito de transi\u00e7\u00e3o de fade ou slide, define o \u00edndice z<\/strong>, trabalha com opacidades, cores e tempos de transi\u00e7\u00e3o – juntamente com toda uma s\u00e9rie de outras op\u00e7\u00f5es.<\/p>\n2b. Escreva o c\u00f3digo para criar o seu sticky header<\/h4>\n
\u00c9 quase desnecess\u00e1rio dizer que esta se\u00e7\u00e3o \u00e9 para aqueles com experi\u00eancia em desenvolvimento. Voc\u00ea ver\u00e1 mais tarde que o c\u00f3digo em si \u00e9 t\u00e3o simples que \u00e9 dif\u00edcil de acreditar. Entretanto, dado o trabalho adicional, a manuten\u00e7\u00e3o e a manuten\u00e7\u00e3o geral para criar um cabe\u00e7alho personalizado e fixo, voc\u00ea precisar\u00e1 se basear em outros aspectos da sua experi\u00eancia tamb\u00e9m.<\/p>\n
Entretanto, pouco antes de voc\u00ea come\u00e7ar, voc\u00ea precisar\u00e1 do seguinte:<\/p>\n
\n- Um editor de c\u00f3digo decente<\/a>, embora neste caso (e dependendo da implementa\u00e7\u00e3o) voc\u00ea poderia usar um editor de texto padr\u00e3o do sistema operacional (SO).<\/li>\n
- Voc\u00ea precisar\u00e1 ter acesso aos arquivos do seu site<\/a>, os quais voc\u00ea deve fazer backup<\/a> e depois baixar para um ambiente local de desenvolvimento WordPress<\/a>.<\/li>\n<\/ul>\n
\u00c9 preciso repetir que voc\u00ea n\u00e3o quer trabalhar nos arquivos do seu site ao vivo. Ao inv\u00e9s disso, trabalhe dentro de um ambiente de encena\u00e7\u00e3o<\/a> ou configura\u00e7\u00e3o local<\/a>, ent\u00e3o carregue os arquivos de volta para o seu servidor ao vivo depois de testar as coisas.<\/p>\nVoc\u00ea tamb\u00e9m vai querer usar um child theme<\/a> para isso, j\u00e1 que voc\u00ea est\u00e1 fazendo mudan\u00e7as personalizadas no tema de seus pais. Isto ajuda voc\u00ea a organizar seu c\u00f3digo, e garantir que qualquer mudan\u00e7a (literalmente) fique por aqui se o tema receber uma atualiza\u00e7\u00e3o.<\/p>\nImplementando um sticky header usando c\u00f3digo: Encontrando as tags de cabe\u00e7alho corretas<\/h4>\n
Com tudo isso em mente, voc\u00ea pode come\u00e7ar. O primeiro trabalho \u00e9 descobrir as tags HTML certas para a sua navega\u00e7\u00e3o. O resultado aqui vai depender do tema que voc\u00ea usar, embora a tag de header <\/strong>seja uma aposta segura para a maioria dos casos. A melhor maneira de descobrir \u00e9 usar as ferramentas de desenvolvimento<\/a> do seu navegador<\/a> e selecionar o cabe\u00e7alho:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/inspect-element.png\")
A ferramenta Inspect Element mostrando o site Kinsta e a tag<\/figcaption><\/figure>\nVoc\u00ea provavelmente descobrir\u00e1 que n\u00e3o \u00e9 t\u00e3o simples quanto uma tag, ent\u00e3o sugerimos que voc\u00ea d\u00ea uma olhada na documenta\u00e7\u00e3o do seu tema (ou fale diretamente com o desenvolvedor) a fim de descobrir as tags<\/a> que voc\u00ea precisa se voc\u00ea lutar.<\/p>\nImplementando um sticky header usando c\u00f3digo: Trabalhando com sua style sheets<\/strong><\/h4>\nA seguir, voc\u00ea deve criar ou abrir um arquivo style.css<\/strong> dentro do diret\u00f3rio para o seu child theme. Isso anexar\u00e1 seu CSS ao da instala\u00e7\u00e3o principal, e onde as tags se repetem, sobreponha-o.<\/p>\nDentro deste arquivo, adicione os metadados t\u00edpicos<\/a> que voc\u00ea precisa para registrar o tema da crian\u00e7a:<\/p>\n![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/style-css-child.png\")
Criando um tema infantil usando Onivim2.<\/figcaption><\/figure>\nA seguir, voc\u00ea vai querer adicionar c\u00f3digo para habilitar seu sticky header. Isto vai precisar de algum conhecimento sobre heran\u00e7a CSS e, dependendo do tema que voc\u00ea usar, pode ser uma experi\u00eancia desagrad\u00e1vel.<\/p>\n
Por exemplo, o tema Vinte e Dois usa duas tags de cabe\u00e7alho, e pode ser dif\u00edcil encontrar a mistura certa de CSS para fazer o seu c\u00f3digo funcionar no elemento certo. Isto \u00e9 mesmo com o di\u00e1logo da classe template dentro do Block Editor (se voc\u00ea usar a funcionalidade FSE<\/a>):<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/supersticky.png\")
O Inspetor Corajoso mostrando m\u00faltiplas tags de cabe\u00e7alho para o tema Twenty Twenty-Two<\/figcaption><\/figure>\nIndependentemente disso, o c\u00f3digo que voc\u00ea precisa ser\u00e1 o mesmo:<\/p>\n
Akhil Arjun<\/a> oferece uma solu\u00e7\u00e3o de duas linhas para isso:<\/p>\n\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nEntretanto, voc\u00ea tamb\u00e9m pode querer considerar o uso do position:<\/strong> propriedade fixed<\/strong>, que usa mais algumas linhas de c\u00f3digo:<\/p>\n\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nIsto usa o z-index<\/strong> para trazer o cabe\u00e7alho para a frente da pilha, depois um atributo fixo para que ele fique no topo da tela.<\/p>\nNote que voc\u00ea 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\u00ea pregar isso, voc\u00ea vai querer trabalhar mais no design para que ele funcione com o resto do seu site.<\/p>\n
Dicas para tornar seus sticky headers mais efetivos<\/h2>\n
Assim que voc\u00ea tiver um m\u00e9todo para criar um sticky header, voc\u00ea vai querer descobrir como voc\u00ea pode aperfei\u00e7o\u00e1-lo. H\u00e1 muitas maneiras de melhorar o design b\u00e1sico e garantir que ele atenda \u00e0s necessidades dos visitantes do seu site.<\/p>\n
Uma boa analogia para sua pr\u00f3pria sticky header \u00e9 ter certeza de que \u00e9 como um bom \u00e1rbitro esportivo. Na maioria das vezes, voc\u00ea n\u00e3o vai saber que eles est\u00e3o l\u00e1. Entretanto, quando um jogador ou treinador precisar deles, eles far\u00e3o uma chamada e se tornar\u00e3o presentes.<\/p>\n
Sua sticky header deve fazer o mesmo – ficar na sombra ou fora de si at\u00e9 que o usu\u00e1rio precise dela. Voc\u00ea pode conseguir isso com algumas regras b\u00e1sicas que (como sempre) voc\u00ea pode escolher quebrar se o design o exigir:<\/p>\n
\n- Mantenha-o compacto. <\/strong>O espa\u00e7o na tela vai estar em um espa\u00e7o premium, ent\u00e3o olhe para manter o cabe\u00e7alho pequeno. Voc\u00ea poderia implementar uma solu\u00e7\u00e3o onde seu cabe\u00e7alho escalasse de forma din\u00e2mica, baseado na \u00e1rea do site em que ele \u00e9 apresentado.<\/li>\n
- Use cabe\u00e7alhos e menus ocultos em telas pequenas.<\/strong> Por extens\u00e3o, voc\u00ea poderia escolher esconder um menu, muito parecido com o exemplo anterior do Hammerhead. Isto ajuda a manter o cabe\u00e7alho compacto, e se relaciona com o pr\u00f3ximo ponto.<\/li>\n
- Certifique-se de que voc\u00ea n\u00e3o introduza distra\u00e7\u00f5es.<\/strong> Quanto maior for o n\u00famero de elementos na tela, mais eles se esfor\u00e7am para chamar a aten\u00e7\u00e3o. Se o sticky header n\u00e3o precisa mostrar um elemento, remova-o – seu conte\u00fado corporal ir\u00e1 apreci\u00e1-lo, assim como suas m\u00e9tricas.<\/li>\n
- Ofere\u00e7a contraste. <\/strong>Este \u00e9 um truque do livro de jogo Call to Action (CTA). Se voc\u00ea usar contraste para o sticky header como um todo, e seus elementos individuais, voc\u00ea pode atrair o olho para onde voc\u00ea precisa dele – ou empurr\u00e1-lo para outro lugar.<\/li>\n<\/ul>\n
No geral, seu sticky header s\u00f3 far\u00e1 o que voc\u00ea precisa, e n\u00e3o mais. Algumas vezes voc\u00ea precisar\u00e1 manter as coisas no m\u00ednimo, outras vezes voc\u00ea ir\u00e1 empacot\u00e1-lo com links, logos e formul\u00e1rios de inscri\u00e7\u00e3o<\/a>. De qualquer forma, se voc\u00ea manter o UX e o UI em mente, voc\u00ea sempre tomar\u00e1 uma decis\u00e3o focada no usu\u00e1rio.<\/p>\n\nResumo<\/h2>\n
A usabilidade e o UX do seu site s\u00e3o t\u00e3o importantes que devem ser a primeira, segunda e terceira coisas que voc\u00ea prega quando voc\u00ea o projeta e constr\u00f3i. A navega\u00e7\u00e3o do seu site \u00e9 apenas um aspecto disso, mas voc\u00ea precisa descobrir a melhor maneira de fazer com que um usu\u00e1rio se movimente pelo seu site sem alarde. Um sticky header \u00e9 uma boa maneira de consegui-la.<\/p>\n
A parte de cabe\u00e7alho do seu site \u00e9 como o balc\u00e3o de informa\u00e7\u00f5es do seu site. Vai ser algo que a maioria dos usu\u00e1rios vai identificar primeiro, e ser\u00e1 sempre em algum lugar que eles v\u00e3o verificar para descobrir algumas informa\u00e7\u00f5es importantes e executar certas a\u00e7\u00f5es:<\/p>\n
- \n
- Por exemplo, seu logotipo ou nome do site estar\u00e1 aqui, o que serve como um ponto de apoio para seus usu\u00e1rios. Eles poder\u00e3o voltar para a p\u00e1gina inicial clicando no logotipo na maioria dos casos.<\/li>\n
- Se voc\u00ea executar contas de usu\u00e1rio<\/a> em seu site, o cabe\u00e7alho normalmente oferecer\u00e1 um link para entrar nessas p\u00e1ginas de conta e perfil.<\/li>\n
- Pode haver funcionalidade de pesquisa<\/a> aqui, especialmente se voc\u00ea tiver um site grande com muito conte\u00fado em diferentes \u00e1reas.<\/li>\n
- Naturalmente, a navega\u00e7\u00e3o do seu site<\/a> tamb\u00e9m \u00e9 uma parte integrante do cabe\u00e7alho.<\/li>\n<\/ul>\n
No geral, seu cabe\u00e7alho \u00e9 um ponto de contato para os usu\u00e1rios. Voc\u00ea descobrir\u00e1 que muitas vezes \u00e9 a ‘barra’ para padr\u00f5es de leitura em forma de F<\/a>, ent\u00e3o ele chama a aten\u00e7\u00e3o de seus usu\u00e1rios em um n\u00edvel intuitivo.<\/p>\n
Voc\u00ea provavelmente j\u00e1 saber\u00e1 o que \u00e9 um sticky header, mesmo em um sentido intuitivo. \u00c9 onde a se\u00e7\u00e3o de cabe\u00e7alho do seu site ‘fixa’ no topo da tela enquanto voc\u00ea rola ao longo do site. Em contraste com um cabe\u00e7alho est\u00e1tico, que permanece no lugar e desaparece enquanto voc\u00ea rola, o sticky header \u00e9 um elemento sempre vis\u00edvel.<\/p>\n
Enquanto a abordagem t\u00edpica para um sticky header \u00e9 colocar uma vers\u00e3o est\u00e1tica dele no topo da sua tela, existem algumas maneiras diferentes de tornar isto mais utiliz\u00e1vel, eficiente e din\u00e2mico. A seguir, vamos dar uma olhada em alguns exemplos do mundo real.<\/p>\n\n
Exemplos de sticky headers na web<\/h2>\n
Voc\u00ea encontrar\u00e1 sticky headers por toda a web, e \u00e9 uma boa ideia verificar alguns para ver o escopo do que voc\u00ea pode alcan\u00e7ar. Um dos exemplos mais b\u00e1sicos ao redor \u00e9 do Hammerhead<\/a>. Este site usa um ‘flyout menu’ e um sticky header, e \u00e9 simples: Ele est\u00e1 comprometido em se ater ao topo da p\u00e1gina em seu layout est\u00e1tico:<\/p>\n
O sticky header no site Hammerhead<\/figcaption><\/figure>\n Outra implementa\u00e7\u00e3o simples \u00e9 da Kin<\/a>. Isto usa um sticky header t\u00edpico, mas desta vez com alguns elementos legais de design.<\/p>\n
Voc\u00ea notar\u00e1 que o contraste muda com base na parte do site que voc\u00ea percorre, e h\u00e1 alguns efeitos de transi\u00e7\u00e3o agrad\u00e1veis tamb\u00e9m:<\/p>\n
O sticky header no site da Kin.<\/figcaption><\/figure>\n N\u00f3s n\u00e3o podemos terminar esta se\u00e7\u00e3o sem mencionar o sticky header da Kinsta<\/a>. Isto tamb\u00e9m mant\u00e9m as coisas simples com rela\u00e7\u00e3o aos elementos do cabe\u00e7alho, mas inclui um toque de usabilidade limpo que oferece valor ao visitante:<\/p>\n
O sticky header no site da Kinsta.<\/figcaption><\/figure>\n Desta vez, voc\u00ea ver\u00e1 o cabe\u00e7alho desaparecer quando voc\u00ea rolar a p\u00e1gina para baixo. No entanto, ele reaparecer\u00e1 quando voc\u00ea rolar para cima – voc\u00ea pode se referir a ele como um “cabe\u00e7alho parcialmente persistente”<\/p>\n
A premissa aqui \u00e9 que a rolagem para baixo significa que voc\u00ea est\u00e1 investindo seu tempo na pr\u00f3pria p\u00e1gina, ent\u00e3o provavelmente n\u00e3o precisar\u00e1 de navega\u00e7\u00e3o, p\u00e1ginas de login, ou para ir para outro lugar. Entretanto, no momento em que voc\u00ea rolar para cima, \u00e9 mais prov\u00e1vel que voc\u00ea queira ir para outra p\u00e1gina do site. Aqui, o sticky header vai aparecer para salvar o dia.<\/p>\n
S\u00e3o esses pequenos toques de experi\u00eancia de usu\u00e1rio (UX) que fazem com que os visitantes de um site queiram voltar a ele. Para seus pr\u00f3prios desenhos de sticky header, voc\u00ea vai querer considerar o que voc\u00ea pode fazer para fazer um UX e um UI que foca nas necessidades do visitante.<\/p>\n
Por que voc\u00ea deve usar um sticky header para o seu site?<\/h2>\n
Muitos sites usam sticky headers, e h\u00e1 muitas boas raz\u00f5es para que isso aconte\u00e7a. Eles podem ser partes cruciais da sua experi\u00eancia geral no site e ter muita influ\u00eancia sobre a sua UX e UI.<\/p>\n
Como os elementos que voc\u00ea incluir\u00e1 em um cabe\u00e7alho s\u00e3o aqueles que o usu\u00e1rio sempre vai querer acessar, faz sentido t\u00ea-los sempre em exibi\u00e7\u00e3o. Isto \u00e9 especialmente verdadeiro para dispositivos e formatos de telas menores<\/a>.<\/p>\n
Embora possa parecer contraintuitivo ter um cabe\u00e7alho “sempre ligado” quando o espa\u00e7o de visualiza\u00e7\u00e3o do porto est\u00e1 em um pr\u00eamio, este \u00e9 apenas um pequeno sacrif\u00edcio. O verdadeiro benef\u00edcio \u00e9 dar a um usu\u00e1rio m\u00f3vel menos raz\u00e3o para se deslocar – uma necessidade em dispositivos menores. Se voc\u00ea pode fornecer a navega\u00e7\u00e3o do seu site sem a necessidade de rolagem, o usu\u00e1rio pode se mover pelo seu site com maior facilidade.<\/p>\n
Os pr\u00f3s e contras do\u00a0sticky header<\/h3>\n
Vamos cobrir alguns dos pontos positivos do sticky header, ent\u00e3o vamos resumi-los rapidamente:<\/p>\n
- \n
- Voc\u00ea pode oferecer navega\u00e7\u00e3o que o usu\u00e1rio pode sempre acessar, o que ajuda a preservar o padr\u00e3o natural de leitura em seu site.<\/li>\n
- Voc\u00ea \u00e9 capaz de adaptar o cabe\u00e7alho a diferentes necessidades<\/a>, tais como contrastes, esquemas de cores, ou at\u00e9 mesmo inten\u00e7\u00f5es do usu\u00e1rio.<\/li>\n
- H\u00e1 a oportunidade de oferecer valor ao usu\u00e1rio, tanto para a \u00e1rea de trabalho quanto para telas menores.<\/li>\n<\/ul>\n
No entanto, um sticky header n\u00e3o \u00e9 uma panaceia para aumentar o UX, e h\u00e1 algumas desvantagens em us\u00e1-los:<\/p>\n
- \n
- Cobrimos isso em um resumo, mas para telas de todos os tamanhos, voc\u00ea precisar\u00e1 alocar espa\u00e7o para seu cabe\u00e7alho.<\/li>\n
- Um sticky header naturalmente tirar\u00e1 o resto do seu conte\u00fado porque seus pr\u00f3prios elementos afastar\u00e3o o olho do corpo da p\u00e1gina.<\/li>\n
- H\u00e1 mais trabalho de desenvolvimento que vai para um bom sticky header porque voc\u00ea precisa implement\u00e1-lo, certificar-se de que ele funciona dentro de diferentes navegadores e verific\u00e1-lo em busca de bugs em telas menores.<\/li>\n<\/ul>\n
Entretanto, se voc\u00ea pensar em suas escolhas de design, necessidades do usu\u00e1rio e objetivos do site, voc\u00ea pode mitigar ou remover todos esses inconvenientes, enquanto voc\u00ea mant\u00e9m os pontos positivos. Uma maneira de voc\u00ea fazer isso \u00e9 atrav\u00e9s de plugins do WordPress.<\/p>\n
3 Plugins para ajudar voc\u00ea a criar sticky headers<\/h2>\n
Nas pr\u00f3ximas se\u00e7\u00f5es, mostraremos alguns dos principais plugins de sticky header para WordPress. Mais tarde, falaremos sobre se este tipo de solu\u00e7\u00e3o \u00e9 adequado para voc\u00ea. Independentemente disso, um plugin pode ajud\u00e1-lo a implementar funcionalidades sem a necessidade de c\u00f3digo, o que \u00e9 valioso se o seu tema<\/a> n\u00e3o o incluir.<\/p>\n
Al\u00e9m disso, voc\u00ea pode aproveitar a experi\u00eancia de design e desenvolvimento de um especialista atrav\u00e9s do plugin. Os desenvolvedores far\u00e3o algumas das escolhas t\u00e9cnicas mais importantes para voc\u00ea, e o envolver\u00e3o em uma interface intuitiva e f\u00e1cil de usar.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
O Sticky Menu & Sticky Header<\/a> plugin da Webfactory \u00e9 uma boa primeira escolha, devido \u00e0 sua riqueza de recursos, flexibilidade \u00fatil e pre\u00e7o acess\u00edvel.<\/p>\n
Sticky Menu & Sticky Header.<\/figcaption><\/figure>\n O sorteio aqui \u00e9 que voc\u00ea pode fazer qualquer elemento do seu site grudar na tela. Isto pode ser \u00fatil de v\u00e1rias maneiras, mas significa que implementar um sticky header \u00e9 uma esquiva.<\/p>\n
O plugin tamb\u00e9m vem com uma s\u00e9rie de op\u00e7\u00f5es poderosas para ajudar voc\u00ea a implementar um sticky header:<\/p>\n
- \n
- Voc\u00ea pode definir seu n\u00edvel desejado de posicionamento ‘top’. Isto significa que voc\u00ea pode adicionar espa\u00e7o na \u00e1rea acima do cabe\u00e7alho para se adequar aos seus objetivos de design.<\/li>\n
- H\u00e1 tamb\u00e9m outras op\u00e7\u00f5es de posicionamento, tais como usar a propriedade CSS do \u00edndice z<\/a> para projetar seu site ‘de frente para tr\u00e1s’<\/li>\n
- Voc\u00ea pode habilitar o sticky header somente nas p\u00e1ginas que voc\u00ea selecionar, o que pode ser \u00fatil se voc\u00ea tiver p\u00e1ginas de destino<\/a> ou outro conte\u00fado impr\u00f3prio.<\/li>\n<\/ul>\n
O Sticky Menu & Sticky Header tamb\u00e9m inclui um modo de depura\u00e7\u00e3o, para ajud\u00e1-lo a corrigir qualquer elemento ‘n\u00e3o adesivo’. O Modo Din\u00e2mico tamb\u00e9m ajudar\u00e1 a resolver problemas com designs responsivos.<\/p>\n
A melhor not\u00edcia \u00e9 que o Sticky Menu & Sticky Header \u00e9 gratuito para download e uso. Al\u00e9m disso, h\u00e1 uma vers\u00e3o premium<\/a> que retira mais do know-how t\u00e9cnico que voc\u00ea precisa.<\/p>\n
Com a vers\u00e3o gratuita do plugin, voc\u00ea precisar\u00e1 conhecer o seletor de elementos a fim de especific\u00e1-lo nas op\u00e7\u00f5es. No entanto, a vers\u00e3o premium ($49-199 por ano) oferece um seletor de elementos visuais para contornar isto.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
Embora n\u00f3s n\u00e3o recomendar\u00edamos um tema padr\u00e3o do WordPress para a maioria dos sites focados no cliente, eles t\u00eam o suficiente na bolsa para blogs e tipos similares de sites.<\/p>\n
Twenty Twenty-One<\/a> \u00e9 um dos temas padr\u00e3o mais destacados em nossa opini\u00e3o, mas falta funcionalidade de sticky header. Se voc\u00ea quiser adicionar esta funcionalidade, o plugin Options for Twenty Twenty-One<\/a> pode alcan\u00e7ar o que voc\u00ea precisa.<\/p>\n
Options for Twenty Twenty-One<\/figcaption><\/figure>\n Esta edi\u00e7\u00e3o do plugin \u00e9 uma das muitas. Cada tema padr\u00e3o recente tem uma vers\u00e3o, mas ainda n\u00e3o existe uma para o Twenty Twenty-Two<\/a>. Independentemente disso, a funcionalidade central do plugin fornece muitos extras:<\/p>\n
- \n
- H\u00e1 uma ferramenta de edi\u00e7\u00e3o completa do site (FSE)<\/a>, pronta para sua implementa\u00e7\u00e3o completa.<\/li>\n
- Voc\u00ea \u00e9 capaz de mudar o tamanho da fonte do corpo, remover hyperlink sublinhado e outras personaliza\u00e7\u00f5es simples.<\/li>\n
- Voc\u00ea pode trabalhar com as larguras m\u00e1ximas de recipientes e elementos, sem a necessidade de c\u00f3digo.<\/li>\n<\/ul>\n
Existem muitas outras op\u00e7\u00f5es para sua navega\u00e7\u00e3o, conte\u00fado, rodap\u00e9 e cabe\u00e7alho. Para este \u00faltimo, voc\u00ea pode escond\u00ea-lo da vista, torn\u00e1-lo totalmente largo, adicionar uma imagem de fundo<\/a> e cor, e muitas outras altera\u00e7\u00f5es.<\/p>\n
Enquanto o plugin principal \u00e9 gratuito<\/a>, voc\u00ea precisa de uma atualiza\u00e7\u00e3o premium ($25-50)<\/a> para acessar as op\u00e7\u00f5es de sticky header. Isto permite que voc\u00ea ajuste as configura\u00e7\u00f5es para ambos os cabe\u00e7alhos m\u00f3veis e desktop do WordPress Customizer:<\/p>\n
O WordPress Customizer, mostrando op\u00e7\u00f5es de sticky headers<\/figcaption><\/figure>\n Dado o nome, voc\u00ea n\u00e3o deve esperar que este plugin funcione com qualquer outro tema al\u00e9m do Twenty Twenty-One (ou qualquer ‘sabor’ que voc\u00ea escolher.) Entretanto, se voc\u00ea usar este tema padr\u00e3o e n\u00e3o quiser codificar, ser\u00e1 ideal para ajud\u00e1-lo a adicionar um sticky header ao seu site.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme \u2013 myStickymenu<\/h3>\n
Aqui est\u00e1 um plugin que coloca suas cartas em cima da mesa. O plugin myStickymenu<\/a> do Pr\u00eamio oferece quase tudo que voc\u00ea vai querer incluir em seu pr\u00f3prio sticky header, e embala em uma grande quantidade de funcionalidade.<\/p>\n
O plugin myStickymenu.<\/figcaption><\/figure>\n Tem um n\u00famero surpreendente de revis\u00f5es positivas no Diret\u00f3rio de Plugins do WordPress<\/a> – 799 revis\u00f5es cinco estrelas para uma m\u00e9dia de 4,9. Parte disto se deve ao abrangente conjunto de recursos \u00e0 sua disposi\u00e7\u00e3o:<\/p>\n
- \n
- Ele oferece flexibilidade de uso. Por exemplo, voc\u00ea pode criar uma barra de boas-vindas, bem como um menu fixo e um cabe\u00e7alho.<\/li>\n
- O plugin se adapta ao qu\u00e3o responsivo \u00e9 o seu site. Isto significa que voc\u00ea n\u00e3o precisar\u00e1 implementar mais nenhuma funcionalidade usando c\u00f3digo.<\/li>\n
- Na verdade, o plugin n\u00e3o precisa que voc\u00ea saiba codificar para poder us\u00e1-lo em sua totalidade.<\/li>\n
- O plugin myStickymenu tem compatibilidade com uma s\u00e9rie de plugins l\u00edderes de constru\u00e7\u00e3o de p\u00e1ginas, tais como Elementor<\/a>, Beaver Builder<\/a>, o Block Editor nativo<\/a>, o Divi Builder<\/a>, e muitos outros.<\/li>\n<\/ul>\n
Voc\u00ea tamb\u00e9m tem uma s\u00e9rie de op\u00e7\u00f5es de customiza\u00e7\u00e3o para fazer com que seu sticky header funcione como voc\u00ea gostaria. Por exemplo, voc\u00ea pode escolher fazer um cabe\u00e7alho parcialmente persistente, mudar aspectos simples como cores de fundo, escolhas tipogr\u00e1ficas, e mais.<\/p>\n
Al\u00e9m disso, por causa das diferentes maneiras que voc\u00ea pode apresentar seu sticky header (como o menu e op\u00e7\u00f5es de barras de boas-vindas), voc\u00ea pode escolher como eles s\u00e3o exibidos, e onde, em seu site.<\/p>\n
Mesmo que a vers\u00e3o gratuita do myStickymenu possa ser suficiente para suas necessidades, h\u00e1 tamb\u00e9m uma vers\u00e3o premium ($25-99 por ano.) Isto oferece mais maneiras de desativar seu sticky header dadas as condi\u00e7\u00f5es espec\u00edficas, os temporizadores de contagem regressiva, a capacidade de adicionar v\u00e1rias barras de boas-vindas e mais algumas op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/p>\n
Como criar um sticky header no WordPress<\/h2>\n
Para o resto deste tutorial, vamos mostrar a voc\u00ea como criar um sticky header no WordPress. H\u00e1 algumas abordagens que voc\u00ea pode fazer aqui, e n\u00f3s vamos cobrir ambas. No entanto, nosso primeiro passo ir\u00e1 ajud\u00e1-lo a tomar essa decis\u00e3o.<\/p>\n
A partir da\u00ed, voc\u00ea trabalhar\u00e1 em seu pr\u00f3prio sticky header usando seu m\u00e9todo preferido e ent\u00e3o aplicar\u00e1 algumas de nossas dicas para tornar o seu mais eficiente e utiliz\u00e1vel no futuro.<\/p>\n
1. Decida como voc\u00ea vai criar o seu sticky header<\/h3>\n
Uma raz\u00e3o pela qual o WordPress \u00e9 t\u00e3o flex\u00edvel<\/a> para todos os tipos de usu\u00e1rios \u00e9 devido ao seu ecossistema de plugins e extensibilidade de c\u00f3digo aberto. Como tal, voc\u00ea pode escolher uma solu\u00e7\u00e3o pronta para uso ou ‘enrolar a sua pr\u00f3pria solu\u00e7\u00e3o’<\/p>\n
Sua primeira tarefa \u00e9 decidir se voc\u00ea quer usar um plugin ou cavar em c\u00f3digo para implementar seu sticky header. Vamos quebrar as duas solu\u00e7\u00f5es:<\/p>\n
- \n
- Plugins.<\/strong> Este vai ser um m\u00e9todo aprovado pelo WordPress-approved<\/a>, especialmente se voc\u00ea n\u00e3o tiver o conhecimento t\u00e9cnico para entregar. Ele oferecer\u00e1 flexibilidade, mas voc\u00ea est\u00e1 \u00e0 merc\u00ea do que o desenvolvedor pensa ser importante, e sua habilidade de codificar.<\/li>\n
- Codifica\u00e7\u00e3o.<\/strong> Se voc\u00ea tem uma vis\u00e3o clara em mente, voc\u00ea pode querer codificar um sticky header para o seu site. \u00c9 claro, voc\u00ea precisar\u00e1 da experi\u00eancia t\u00e9cnica<\/a> para conseguir isso (principalmente CSS<\/a>), mas os resultados ser\u00e3o exatamente o que voc\u00ea quer. Entretanto, voc\u00ea ter\u00e1 mais manuten\u00e7\u00e3o em potencial para realizar, e seu sucesso depender\u00e1 de suas pr\u00f3prias habilidades de codificar.<\/li>\n<\/ul>\n
N\u00f3s dizemos que para a maioria dos usu\u00e1rios de WordPress, um plugin ser\u00e1 a solu\u00e7\u00e3o ideal para criar um sticky header. Ele vai jogar bem com a plataforma e \u00e9 mais f\u00e1cil de solucionar problemas se voc\u00ea tiver problemas. Entretanto, em passos futuros, n\u00f3s cobriremos uma solu\u00e7\u00e3o de codifica\u00e7\u00e3o, bem como a op\u00e7\u00e3o de plugin.<\/p>\n
2. Escolha se voc\u00ea vai modificar seu tema atual ou selecione um tema dedicado<\/h3>\n
O pr\u00f3ximo aspecto que voc\u00ea vai querer considerar \u00e9 se voc\u00ea modifica seu tema atual<\/a>, ou escolhe um que j\u00e1 tenha a funcionalidade de sticky header dentro de seu conjunto de recursos. Isto ser\u00e1 importante se o seu tema n\u00e3o tiver a funcionalidade de lidar com um sticky header.<\/p>\n
Muitos temas e plugins de constru\u00e7\u00e3o de p\u00e1ginas incluir\u00e3o uma op\u00e7\u00e3o de sticky header, por causa dos benef\u00edcios e para oferecer a voc\u00ea flexibilidade de design. Voc\u00ea ver\u00e1 que alguns dos maiores temas e plugins de uso geral fornecem isso como padr\u00e3o, tais como Elementor<\/a>, Astra<\/a>, Divi, Avada, e in\u00fameros outros.<\/p>\n
A op\u00e7\u00e3o de sticky header dentro do Elementor.<\/figcaption><\/figure>\n Para tomar esta decis\u00e3o, voc\u00ea vai querer considerar algumas coisas sobre o seu tema e site atuais:<\/p>\n
- \n
- O seu site j\u00e1 tem a apar\u00eancia que voc\u00ea deseja ou ele precisa de uma atualiza\u00e7\u00e3o?<\/em><\/li>\n
- Seu tema atual \u00e9 f\u00e1cil de customizar sob o cap\u00f4?<\/em> A documenta\u00e7\u00e3o do desenvolvedor deve lhe dizer isso.<\/li>\n
- Voc\u00ea quer uma implementa\u00e7\u00e3o de cabe\u00e7alho r\u00edgido complexa preferida ou uma que seja mais direta?<\/em><\/li>\n<\/ul>\n
Com base nas respostas que voc\u00ea der aqui, voc\u00ea escolher\u00e1 uma ou outra. Se voc\u00ea precisar de um novo tema, voc\u00ea tamb\u00e9m pode escolher um que ofere\u00e7a uma implementa\u00e7\u00e3o de sticky header. Entretanto, se voc\u00ea quiser ficar com seu tema atual, e ele ainda n\u00e3o tem a funcionalidade sticky header, voc\u00ea vai querer arrega\u00e7ar suas mangas e seguir um dos seguintes sub-passos.<\/p>\n
2a. Use um plugin com um tema espec\u00edfico<\/h4>\n
Se voc\u00ea n\u00e3o tem experi\u00eancia em desenvolvimento, n\u00f3s recomendar\u00edamos que voc\u00ea escolhesse um plugin para adicionar a funcionalidade sticky header ao seu site. H\u00e1 muitas vari\u00e1veis que voc\u00ea precisa considerar, construir e manter. Em contraste, um plugin j\u00e1 ter\u00e1 uma base de c\u00f3digo que d\u00e1 um aceno a esses elementos, ent\u00e3o ele oferecer\u00e1 uma op\u00e7\u00e3o quase ideal para a maioria das circunst\u00e2ncias.<\/p>\n
Para esta parte do tutorial, n\u00f3s vamos usar o plugin myStickymenu, j\u00e1 que este oferece um conjunto de recursos bem completo e rico para a maioria dos casos de uso. Entretanto, o uso geral ser\u00e1 o mesmo para a maioria dos plugins que voc\u00ea vai usar.<\/p>\n
Assim que voc\u00ea instalar e ativar seu plugin<\/a>, voc\u00ea precisar\u00e1 ir para onde quer que as op\u00e7\u00f5es do tema estejam. Para alguns plugins, isto estar\u00e1 dentro do WordPress Customizer; para outros, um painel de administra\u00e7\u00e3o dedicado. Aqui, voc\u00ea usar\u00e1 um painel de administra\u00e7\u00e3o personalizado em myStickymenu > Dashboard<\/strong> no WordPress:<\/p>\n
O painel de administra\u00e7\u00e3o do myStickymenu dentro do WordPress.<\/figcaption><\/figure>\n No entanto, a tela padr\u00e3o mostra as configura\u00e7\u00f5es para a barra de boas-vindas, que para este tutorial, n\u00f3s n\u00e3o queremos. Como tal, clique no bot\u00e3o de altern\u00e2ncia para desligar a barra, e clique na tela de configura\u00e7\u00f5es do menu Sticky<\/strong>:<\/p>\n
A tela de configura\u00e7\u00f5es do menu Sticky<\/figcaption><\/figure>\n Embora haja muitas op\u00e7\u00f5es aqui, voc\u00ea s\u00f3 precisa do painel Sticky Class<\/strong>. Uma vez que voc\u00ea mude o cabe\u00e7alho sticky para “On”, digite a tag HTML relevante para seu cabe\u00e7alho no campo relevante que coincide com o menu suspenso Outra Classe ou ID<\/strong>:<\/p>\n
Mudando a tag seletora de HTML dentro do plugin myStickymenu.<\/figcaption><\/figure>\n Uma vez que voc\u00ea salvar suas mudan\u00e7as, isto se aplicar\u00e1 ao seu site. A partir da\u00ed, voc\u00ea pode olhar para algumas das funcionalidades de estilo. Por exemplo, voc\u00ea define um efeito de transi\u00e7\u00e3o de fade ou slide, define o \u00edndice z<\/strong>, trabalha com opacidades, cores e tempos de transi\u00e7\u00e3o – juntamente com toda uma s\u00e9rie de outras op\u00e7\u00f5es.<\/p>\n
2b. Escreva o c\u00f3digo para criar o seu sticky header<\/h4>\n
\u00c9 quase desnecess\u00e1rio dizer que esta se\u00e7\u00e3o \u00e9 para aqueles com experi\u00eancia em desenvolvimento. Voc\u00ea ver\u00e1 mais tarde que o c\u00f3digo em si \u00e9 t\u00e3o simples que \u00e9 dif\u00edcil de acreditar. Entretanto, dado o trabalho adicional, a manuten\u00e7\u00e3o e a manuten\u00e7\u00e3o geral para criar um cabe\u00e7alho personalizado e fixo, voc\u00ea precisar\u00e1 se basear em outros aspectos da sua experi\u00eancia tamb\u00e9m.<\/p>\n
Entretanto, pouco antes de voc\u00ea come\u00e7ar, voc\u00ea precisar\u00e1 do seguinte:<\/p>\n
- \n
- Um editor de c\u00f3digo decente<\/a>, embora neste caso (e dependendo da implementa\u00e7\u00e3o) voc\u00ea poderia usar um editor de texto padr\u00e3o do sistema operacional (SO).<\/li>\n
- Voc\u00ea precisar\u00e1 ter acesso aos arquivos do seu site<\/a>, os quais voc\u00ea deve fazer backup<\/a> e depois baixar para um ambiente local de desenvolvimento WordPress<\/a>.<\/li>\n<\/ul>\n
\u00c9 preciso repetir que voc\u00ea n\u00e3o quer trabalhar nos arquivos do seu site ao vivo. Ao inv\u00e9s disso, trabalhe dentro de um ambiente de encena\u00e7\u00e3o<\/a> ou configura\u00e7\u00e3o local<\/a>, ent\u00e3o carregue os arquivos de volta para o seu servidor ao vivo depois de testar as coisas.<\/p>\n
Voc\u00ea tamb\u00e9m vai querer usar um child theme<\/a> para isso, j\u00e1 que voc\u00ea est\u00e1 fazendo mudan\u00e7as personalizadas no tema de seus pais. Isto ajuda voc\u00ea a organizar seu c\u00f3digo, e garantir que qualquer mudan\u00e7a (literalmente) fique por aqui se o tema receber uma atualiza\u00e7\u00e3o.<\/p>\n
Implementando um sticky header usando c\u00f3digo: Encontrando as tags de cabe\u00e7alho corretas<\/h4>\n
Com tudo isso em mente, voc\u00ea pode come\u00e7ar. O primeiro trabalho \u00e9 descobrir as tags HTML certas para a sua navega\u00e7\u00e3o. O resultado aqui vai depender do tema que voc\u00ea usar, embora a tag de header <\/strong>seja uma aposta segura para a maioria dos casos. A melhor maneira de descobrir \u00e9 usar as ferramentas de desenvolvimento<\/a> do seu navegador<\/a> e selecionar o cabe\u00e7alho:<\/p>\n
A ferramenta Inspect Element mostrando o site Kinsta e a tag<\/figcaption><\/figure>\n Voc\u00ea provavelmente descobrir\u00e1 que n\u00e3o \u00e9 t\u00e3o simples quanto uma tag, ent\u00e3o sugerimos que voc\u00ea d\u00ea uma olhada na documenta\u00e7\u00e3o do seu tema (ou fale diretamente com o desenvolvedor) a fim de descobrir as tags<\/a> que voc\u00ea precisa se voc\u00ea lutar.<\/p>\n
Implementando um sticky header usando c\u00f3digo: Trabalhando com sua style sheets<\/strong><\/h4>\n
A seguir, voc\u00ea deve criar ou abrir um arquivo style.css<\/strong> dentro do diret\u00f3rio para o seu child theme. Isso anexar\u00e1 seu CSS ao da instala\u00e7\u00e3o principal, e onde as tags se repetem, sobreponha-o.<\/p>\n
Dentro deste arquivo, adicione os metadados t\u00edpicos<\/a> que voc\u00ea precisa para registrar o tema da crian\u00e7a:<\/p>\n
Criando um tema infantil usando Onivim2.<\/figcaption><\/figure>\n A seguir, voc\u00ea vai querer adicionar c\u00f3digo para habilitar seu sticky header. Isto vai precisar de algum conhecimento sobre heran\u00e7a CSS e, dependendo do tema que voc\u00ea usar, pode ser uma experi\u00eancia desagrad\u00e1vel.<\/p>\n
Por exemplo, o tema Vinte e Dois usa duas tags de cabe\u00e7alho, e pode ser dif\u00edcil encontrar a mistura certa de CSS para fazer o seu c\u00f3digo funcionar no elemento certo. Isto \u00e9 mesmo com o di\u00e1logo da classe template dentro do Block Editor (se voc\u00ea usar a funcionalidade FSE<\/a>):<\/p>\n
O Inspetor Corajoso mostrando m\u00faltiplas tags de cabe\u00e7alho para o tema Twenty Twenty-Two<\/figcaption><\/figure>\n Independentemente disso, o c\u00f3digo que voc\u00ea precisa ser\u00e1 o mesmo:<\/p>\n
Akhil Arjun<\/a> oferece uma solu\u00e7\u00e3o de duas linhas para isso:<\/p>\n
\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nEntretanto, voc\u00ea tamb\u00e9m pode querer considerar o uso do position:<\/strong> propriedade fixed<\/strong>, que usa mais algumas linhas de c\u00f3digo:<\/p>\n
\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nIsto usa o z-index<\/strong> para trazer o cabe\u00e7alho para a frente da pilha, depois um atributo fixo para que ele fique no topo da tela.<\/p>\n
Note que voc\u00ea 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\u00ea pregar isso, voc\u00ea vai querer trabalhar mais no design para que ele funcione com o resto do seu site.<\/p>\n
Dicas para tornar seus sticky headers mais efetivos<\/h2>\n
Assim que voc\u00ea tiver um m\u00e9todo para criar um sticky header, voc\u00ea vai querer descobrir como voc\u00ea pode aperfei\u00e7o\u00e1-lo. H\u00e1 muitas maneiras de melhorar o design b\u00e1sico e garantir que ele atenda \u00e0s necessidades dos visitantes do seu site.<\/p>\n
Uma boa analogia para sua pr\u00f3pria sticky header \u00e9 ter certeza de que \u00e9 como um bom \u00e1rbitro esportivo. Na maioria das vezes, voc\u00ea n\u00e3o vai saber que eles est\u00e3o l\u00e1. Entretanto, quando um jogador ou treinador precisar deles, eles far\u00e3o uma chamada e se tornar\u00e3o presentes.<\/p>\n
Sua sticky header deve fazer o mesmo – ficar na sombra ou fora de si at\u00e9 que o usu\u00e1rio precise dela. Voc\u00ea pode conseguir isso com algumas regras b\u00e1sicas que (como sempre) voc\u00ea pode escolher quebrar se o design o exigir:<\/p>\n
- \n
- Mantenha-o compacto. <\/strong>O espa\u00e7o na tela vai estar em um espa\u00e7o premium, ent\u00e3o olhe para manter o cabe\u00e7alho pequeno. Voc\u00ea poderia implementar uma solu\u00e7\u00e3o onde seu cabe\u00e7alho escalasse de forma din\u00e2mica, baseado na \u00e1rea do site em que ele \u00e9 apresentado.<\/li>\n
- Use cabe\u00e7alhos e menus ocultos em telas pequenas.<\/strong> Por extens\u00e3o, voc\u00ea poderia escolher esconder um menu, muito parecido com o exemplo anterior do Hammerhead. Isto ajuda a manter o cabe\u00e7alho compacto, e se relaciona com o pr\u00f3ximo ponto.<\/li>\n
- Certifique-se de que voc\u00ea n\u00e3o introduza distra\u00e7\u00f5es.<\/strong> Quanto maior for o n\u00famero de elementos na tela, mais eles se esfor\u00e7am para chamar a aten\u00e7\u00e3o. Se o sticky header n\u00e3o precisa mostrar um elemento, remova-o – seu conte\u00fado corporal ir\u00e1 apreci\u00e1-lo, assim como suas m\u00e9tricas.<\/li>\n
- Ofere\u00e7a contraste. <\/strong>Este \u00e9 um truque do livro de jogo Call to Action (CTA). Se voc\u00ea usar contraste para o sticky header como um todo, e seus elementos individuais, voc\u00ea pode atrair o olho para onde voc\u00ea precisa dele – ou empurr\u00e1-lo para outro lugar.<\/li>\n<\/ul>\n
No geral, seu sticky header s\u00f3 far\u00e1 o que voc\u00ea precisa, e n\u00e3o mais. Algumas vezes voc\u00ea precisar\u00e1 manter as coisas no m\u00ednimo, outras vezes voc\u00ea ir\u00e1 empacot\u00e1-lo com links, logos e formul\u00e1rios de inscri\u00e7\u00e3o<\/a>. De qualquer forma, se voc\u00ea manter o UX e o UI em mente, voc\u00ea sempre tomar\u00e1 uma decis\u00e3o focada no usu\u00e1rio.<\/p>\n\n
Resumo<\/h2>\n
A usabilidade e o UX do seu site s\u00e3o t\u00e3o importantes que devem ser a primeira, segunda e terceira coisas que voc\u00ea prega quando voc\u00ea o projeta e constr\u00f3i. A navega\u00e7\u00e3o do seu site \u00e9 apenas um aspecto disso, mas voc\u00ea precisa descobrir a melhor maneira de fazer com que um usu\u00e1rio se movimente pelo seu site sem alarde. Um sticky header \u00e9 uma boa maneira de consegui-la.<\/p>\n
- Use cabe\u00e7alhos e menus ocultos em telas pequenas.<\/strong> Por extens\u00e3o, voc\u00ea poderia escolher esconder um menu, muito parecido com o exemplo anterior do Hammerhead. Isto ajuda a manter o cabe\u00e7alho compacto, e se relaciona com o pr\u00f3ximo ponto.<\/li>\n
- Voc\u00ea precisar\u00e1 ter acesso aos arquivos do seu site<\/a>, os quais voc\u00ea deve fazer backup<\/a> e depois baixar para um ambiente local de desenvolvimento WordPress<\/a>.<\/li>\n<\/ul>\n
- Seu tema atual \u00e9 f\u00e1cil de customizar sob o cap\u00f4?<\/em> A documenta\u00e7\u00e3o do desenvolvedor deve lhe dizer isso.<\/li>\n
- Codifica\u00e7\u00e3o.<\/strong> Se voc\u00ea tem uma vis\u00e3o clara em mente, voc\u00ea pode querer codificar um sticky header para o seu site. \u00c9 claro, voc\u00ea precisar\u00e1 da experi\u00eancia t\u00e9cnica<\/a> para conseguir isso (principalmente CSS<\/a>), mas os resultados ser\u00e3o exatamente o que voc\u00ea quer. Entretanto, voc\u00ea ter\u00e1 mais manuten\u00e7\u00e3o em potencial para realizar, e seu sucesso depender\u00e1 de suas pr\u00f3prias habilidades de codificar.<\/li>\n<\/ul>\n
- Plugins.<\/strong> Este vai ser um m\u00e9todo aprovado pelo WordPress-approved<\/a>, especialmente se voc\u00ea n\u00e3o tiver o conhecimento t\u00e9cnico para entregar. Ele oferecer\u00e1 flexibilidade, mas voc\u00ea est\u00e1 \u00e0 merc\u00ea do que o desenvolvedor pensa ser importante, e sua habilidade de codificar.<\/li>\n
- Voc\u00ea pode habilitar o sticky header somente nas p\u00e1ginas que voc\u00ea selecionar, o que pode ser \u00fatil se voc\u00ea tiver p\u00e1ginas de destino<\/a> ou outro conte\u00fado impr\u00f3prio.<\/li>\n<\/ul>\n
- H\u00e1 a oportunidade de oferecer valor ao usu\u00e1rio, tanto para a \u00e1rea de trabalho quanto para telas menores.<\/li>\n<\/ul>\n
- Pode haver funcionalidade de pesquisa<\/a> aqui, especialmente se voc\u00ea tiver um site grande com muito conte\u00fado em diferentes \u00e1reas.<\/li>\n