Como configurar uma faixa de boas vindas sem perder a cabeca
A faixa de boas vindas é aquela barra que aparece no topo do site, geralmente com uma mensagem promocional, um aviso ou simplesmente um cumprimento aos visitantes. Muita gente acha que colocar isso é coisa de cinco minutos. Na pratica, é onde os sites quebram mais feio se voce nao pensar no layout responsivo antes. A maioria dos temas WordPress modernos ja vem com essa funcionalidade embutida. Basta ir em Apariencia > Personalizar > Faixa de Anuncio ou Opcoes do Tema, dependendo do tema que voce usa. Se o tema nao tiver essa opcao, instale um plugin como Hello Dolly ou algum plugin especifico de notification bar. A configuracao basica e trivial: digitar o texto, escolher a cor de fundo e pronto.
Ja passei por um caso especifico que merece atencao. Criei uma faixa de boas vindas para um site de e-commerce que usava um header fixo com altura de 80px. Quando ativei a faixa, ela empurrou todo o conteudo para baixo, mas o header fixo NAO descia junto. O resultado foi sobreposicao: o menu de navegacao ficava por tras da faixa, impossibilitando o clique nos links. A solucao que encontrei foi adicionar um padding-top de 45px no body via CSS personalizado, com media query para mobile tambem, senao o usuario de celular ficava com um espaco branco enorme no topo. Isso leva dois minutos se voce souber onde aplicar.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O que todo mundo erra na faixa de boas vindas
O erro numero um é deixar a faixa muito alta. Uma faixa de 60px de altura parece inofensiva quando voce esta editando no desktop, mas em telas de celular ela consome quase 15% da area visivel. Use no maximo 40px de altura. O segundo erro é nao colocar um botao de fechar. Simplesmente nao funciona sem ele. Se voce for fazer uma faixa informativa mesmo sem CTA, coloque um X discreto no canto direito para o usuario descartar. Ha uma nuance que poucas pessoas consideram: acessibilidade. A faixa precisa ter contraste suficiente entre texto e fundo. Se voce usar fundo escuro com texto claro, o contraste minimo ser 4.5:1 conforme WCAG. Um erro comum é colocar texto branco (#FFFFFF) sobre um fundo cinza medio (#888888) — o contraste cai para algo em torno de 2.2:1, o que é ilegivel para grande parte dos usuarios. Use uma paleta pre-definida ou teste com uma calculadora de contraste antes de publicar.
Outro ponto pratico: se voce quer que a faixa desapareça apos um clique ou tempo determinado, nao use apenas CSS display:none. Isso esconde o elemento mas o conteúdo continua carregado na pagina, aumentando o tamanho da pagina sem necessidade. Use JavaScript para remover o elemento do DOM completamente, ou pelo menos addClass('hidden') com visibility:hidden e position:absolute fora da viewport. Para quem quer algo mais robusto e não quer depender de plugins que podem conflitar com atualizações, existe a opção de codar a faixa diretamente no header do tema. Baixe o tema filho, adicione o HTML da faixa no functions.php usando wp_head, e estilize no style.css do tema filho. Isso elimina a dependencia de plugins de terceiros que frequentemente param de funcionar após atualizações do WordPress.
A faixa de boas vindas é uma ferramenta simples mas mal utilizada. Se você quer implementá-la, teste em dispositivos reais, verifique o contraste, e sempre inclua a opção de fechar. O resto é ajuste fino de tamanho e cor.
