Fazer com que os visitantes do seu site notem mensagens importantes pode ser complicado.
Você quer compartilhar ofertas valiosas, mas encontrar o equilíbrio certo entre visibilidade e experiência do usuário nem sempre é fácil. Muito sutil, e as pessoas perdem. Muito agressivo, e parece intrusivo.
Barras de rodapé flutuantes oferecem o meio-termo perfeito.
Elas permanecem visíveis enquanto as pessoas navegam pelo seu conteúdo, fornecendo uma maneira consistente, mas sutil, de compartilhar sua mensagem.
Achamos que elas são super eficazes para promover descontos e exibir newsletters em nossos sites – elas chamam a atenção sem interromper a experiência de navegação.
Neste guia, vamos guiá-lo por todo o processo, desde a escolha do método certo até a personalização da sua barra de rodapé flutuante para obter o máximo impacto.
O que é uma Barra de Rodapé Flutuante no WordPress?
Uma barra de rodapé flutuante e fixa permite que você exiba prominentemente conteúdo e notícias importantes para os usuários.
Esta barra permanece visível para os visitantes o tempo todo, então eles são mais propensos a clicar nela e descobrir mais conteúdo útil.
Você pode usar a barra de rodapé flutuante para:
- Gerar mais cliques para outros posts do blog.
- Gerar leads e construir sua lista de e-mails.
- Chamar a atenção para cupons especiais ou ofertas/promoções de desconto.
- Promover suas contas de mídia social.
- Construir reconhecimento de marca.
- Fornecer acesso a recursos importantes em seu site WordPress.
Dito isso, vamos ver como criar facilmente uma barra de rodapé flutuante e fixa no WordPress. Mostraremos dois métodos neste tutorial, e você pode usar os links abaixo para pular para o método de sua escolha:
- Método 1: Crie uma Barra de Rodapé Flutuante Fixa com OptinMonster (Recomendado)
- Método 2: Crie uma Barra de Rodapé Flutuante Fixa com um Plugin Gratuito
- Bônus: Crie um Menu de Navegação Flutuante Fixo no WordPress
- Perguntas Frequentes Sobre Barras de Rodapé Flutuantes
Método 1: Crie uma Barra de Rodapé Flutuante Fixa com OptinMonster (Recomendado)
Você pode facilmente criar uma barra de rodapé flutuante e fixa com o OptinMonster. É a melhor ferramenta de geração de leads e otimização de conversão do mercado, e torna super fácil converter seus visitantes do site em assinantes.
No WPBeginner, nós o usamos para criar banners e pop-ups que promovem nossos serviços profissionais ou newsletter. Se você gostaria de saber mais sobre nossa experiência com a ferramenta, pode ver nossa avaliação completa do OptinMonster.
O plugin vem com um construtor de arrastar e soltar e modelos pré-fabricados que permitem criar uma barra de rodapé flutuante, pop-ups de slide-in e banners sem usar nenhum código.
Recomendamos este método porque o OptinMonster é super fácil de usar e oferece mais opções de personalização do que o método do plugin gratuito.
Etapa 1: Instale o OptinMonster no Seu Site
Primeiro, você precisará se inscrever no site do OptinMonster clicando no botão 'Get OptinMonster Now'.
Em seguida, você deve instalar e ativar o plugin conector gratuito do OptinMonster em seu site. Para mais instruções, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Após a ativação, o assistente de configuração do OptinMonster será aberto em sua tela, onde você terá que clicar no botão ‘Conectar Sua Conta Existente’. Isso conectará seu site WordPress à sua conta OptinMonster.
Assim que fizer isso, uma nova janela será aberta em sua tela.
Aqui, clique no botão ‘Conectar ao WordPress’ para prosseguir.
Etapa 2: Crie e personalize a barra flutuante fixa no rodapé
Agora que você conectou o OptinMonster ao seu site, é hora de criar uma barra flutuante fixa no rodapé.
Para fazer isso, você precisa visitar a página OptinMonster » Templates na barra lateral de administração do WordPress e selecionar 'Barra Flutuante' como o tipo de campanha.
Assim que fizer isso, todos os modelos pré-fabricados para a barra flutuante serão carregados na tela. A partir daqui, você pode clicar no botão 'Usar Modelo' no que você deseja usar.
Isso abrirá o prompt 'Criar Campanha' na tela, onde você pode adicionar um nome para a barra flutuante no rodapé que você está prestes a criar. Pode ser qualquer coisa que você goste, pois o nome não será exibido aos seus visitantes.
Depois disso, basta clicar no botão 'Iniciar Construção'.
O construtor de arrastar e soltar do OptinMonster será iniciado na sua tela, onde você poderá começar a personalizar sua barra flutuante no rodapé. Aqui, você notará uma prévia da barra flutuante à direita com blocos na coluna da esquerda.
Por exemplo, você pode usar um bloco de contador regressivo se sua barra flutuante no rodapé estiver promovendo uma oferta de desconto. Isso ajudará a criar um senso de urgência entre os usuários e incentivá-los a agir.
Você também pode adicionar um bloco de CTA, vídeo ou mídia social à barra do rodapé. Para instruções detalhadas, você pode ver nosso tutorial sobre como criar uma barra de alerta no WordPress.
Você também pode editar o texto na barra do rodapé clicando nele. Isso abrirá as configurações do bloco na coluna da esquerda, onde você poderá ajustá-las de acordo com seu gosto.
Por exemplo, se você quiser alterar a oferta de desconto no modelo, então você pode alterar o texto do botão. Depois disso, você pode selecionar a opção ‘Redirecionar para uma URL’ e adicionar o link da página para onde você deseja que os usuários sejam direcionados ao clicar no botão.
Etapa 3: Configure as Regras de Exibição para sua Barra de Rodapé Flutuante
Assim que estiver satisfeito com a personalização da sua barra de rodapé, basta mudar para a aba ‘Regras de Exibição’ no topo.
Aqui, você pode configurar quando exibir a barra em sua página. Se você quiser exibir a barra de rodapé flutuante o tempo todo, então você deve selecionar a opção ‘tempo na página’ no menu suspenso da esquerda.
Depois disso, escolha a opção ‘é imediato’ no menu suspenso da direita.
No entanto, para exibir a barra de rodapé flutuante em uma página específica, você deve selecionar a opção ‘Segmentação de Página’ no menu suspenso da direita.
Depois disso, escolha a opção ‘corresponde exatamente’ no menu suspenso do meio e, em seguida, adicione uma URL de página. Depois de fazer isso, a barra de rodapé flutuante só será exibida na página que você escolheu.
Além disso, você pode selecionar a opção ‘Intenção de Saída’ para mostrar a barra de rodapé flutuante fixa quando o usuário estiver prestes a sair do seu site. Você pode então configurar a sensibilidade da intenção de saída e escolher os dispositivos onde a barra de rodapé será exibida. Isso pode ser útil se você quiser reduzir sua taxa de rejeição.
Você pode até selecionar a opção ‘Dispositivo do Visitante’ se quiser exibir a barra de rodapé flutuante apenas para visitantes de desktop.
Você também pode configurar as regras de exibição de acordo com a data, hora ou distância de rolagem selecionando a opção ‘Quando’ na coluna da esquerda.
Para uma explicação de mais opções de regras de exibição, você pode ver nossa análise completa do OptinMonster.
Etapa 4: Publique sua Barra de Rodapé Flutuante
Depois de definir as condições de exibição para sua barra de rodapé, mude para a aba ‘Publicar’ no topo.
Aqui, basta clicar no botão ‘Publicar’.
Depois disso, não se esqueça de clicar em ‘Salvar’ para que suas alterações entrem em vigor.
Agora, você pode visitar seu blog WordPress para ver a barra de rodapé flutuante fixa em ação.
Alternativa: Você também pode usar o Thrive Ultimatum para exibir uma barra de rodapé flutuante com contador regressivo em seu site. Para mais detalhes, veja nossa análise completa do Thrive Themes Suite.
Método 2: Crie uma Barra de Rodapé Flutuante Fixa com um Plugin Gratuito
Se você está procurando uma maneira gratuita de criar uma barra de rodapé flutuante fixa, então este método é para você. No entanto, lembre-se de que você terá opções de personalização limitadas em comparação com o uso do OptinMonster.
Primeiro, você precisa instalar e ativar o plugin Firebox Popup Builder. Para instruções detalhadas, consulte nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Firebox » Campanhas no painel do WordPress e clique no botão ‘+ Nova Campanha’.
Isso abrirá a biblioteca de campanhas do Firebox, onde você pode pesquisar por modelos pré-fabricados de barra flutuante fixa.
Em seguida, basta clicar no link ‘Inserir’ abaixo da barra de rodapé flutuante que você gostar. Lembre-se que se você selecionar uma barra de cabeçalho, não poderá alterar sua posição. Você deve garantir que o modelo selecionado seja para uma barra de rodapé.
O editor de blocos será aberto em sua tela, onde você pode começar adicionando um nome para sua barra flutuante.
Depois disso, você pode editar o texto no rodapé clicando nele e adicionar novos blocos clicando no botão ‘+’. Isso abrirá o menu de blocos, onde você pode adicionar imagens, títulos, parágrafos, vídeos, citações ou blocos de lista.
Por exemplo, se você quiser adicionar ícones de redes sociais, pode escolher o bloco Ícones Sociais. Depois disso, você pode adicionar contas e links de redes sociais usando o painel de blocos.
Para mais detalhes, consulte nosso tutorial sobre como adicionar ícones de redes sociais em menus do WordPress.
Você também pode alterar o texto no bloco do botão e adicionar um link para a página para onde deseja direcionar os usuários clicando no ícone de link na barra de ferramentas do bloco.
Depois disso, digite a URL de sua preferência e pressione 'Enter'.
Em seguida, você pode rolar para baixo até a seção 'Configurações do Firebox'.
Aqui, você pode alterar a cor de fundo, a cor do texto, o alinhamento, o tamanho, o preenchimento e a margem da barra de rodapé flutuante.
Depois disso, mude para a aba 'Comportamento' na coluna da esquerda e selecione 'Carregamento da Página' como ponto de gatilho da barra flutuante.
Em seguida, use o controle deslizante 'Atraso' para escolher um tempo de atraso para a barra flutuante. Por exemplo, se você arrastar o controle deslizante para 15 segundos, a barra de rodapé flutuante será exibida assim que o usuário passar 15 segundos em seu site.
Se você quiser que a barra de rodapé flutuante fixa seja exibida imediatamente, você pode manter o controle deslizante em 0.
Em seguida, você pode deixar outras configurações como estão ou configurá-las de acordo com sua preferência.
Quando terminar, não se esqueça de clicar no botão ‘Publicar’ no topo.
Agora visite seu site WordPress para ver a barra de rodapé flutuante fixa em ação.
É assim que ficou em nosso site de demonstração.
Bônus: Crie um Menu de Navegação Flutuante Fixo no WordPress
Além de adicionar uma barra de rodapé fixa, você também pode gostar de criar um menu de navegação flutuante fixo em seu site WordPress.
Um menu de navegação contém links para as páginas mais importantes do seu blog WordPress e atua como uma estrutura organizacional para o seu site.
Se você tornar este menu fixo, ele permanecerá visível em sua página o tempo todo, mesmo quando o usuário rolar a tela. Isso pode aumentar o engajamento e tornar seu site mais fácil de navegar.
Para criar um menu de navegação flutuante fixo, basta instalar e ativar o plugin Sticky Menu & Sticky Header. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Configurações » Menu Fixo no painel do WordPress e digite #main-navigation ao lado da opção ‘Elemento Fixo (obrigatório)’.
Depois disso, clique no botão ‘Salvar Alterações’ para armazenar suas configurações. Agora você criou com sucesso um menu de navegação flutuante fixo.
Para instruções detalhadas, consulte nosso tutorial sobre como criar um menu de navegação flutuante fixo no WordPress.
Perguntas Frequentes Sobre Barras de Rodapé Flutuantes
Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre barras de rodapé flutuantes:
A barra de rodapé flutuante funcionará em dispositivos móveis também?
Sim, a maioria das barras de rodapé flutuantes funciona bem em dispositivos móveis. Mas é uma boa ideia testá-la em diferentes tamanhos de tela para garantir que tudo fique bom e se encaixe corretamente.
Alguns plugins permitem até que você mostre a barra apenas em dispositivos móveis ou de desktop, dependendo das suas necessidades. Dessa forma, você pode personalizar a experiência para cada usuário.
Posso controlar quando a barra de rodapé flutuante aparece?
Sim! Muitos plugins, como o OptinMonster, permitem que você defina regras para quando a barra aparece. Por exemplo:
- Mostrar após alguns segundos na página
- Mostrar quando o usuário rolar a página para baixo
- Mostrar apenas em páginas específicas
Isso ajuda você a chamar a atenção do usuário no momento certo, sem ser muito insistente.
O que devo evitar ao usar uma barra de rodapé fixa?
Aqui estão algumas dicas:
- Não faça a barra muito alta – ela deve ser útil, não uma distração.
- Certifique-se de que ela não cubra outro conteúdo importante.
- Mantenha a mensagem curta e clara.
Além disso, não use muitas animações ou cores chamativas. Um design limpo e simples geralmente funciona melhor.
Esperamos que este artigo tenha ajudado você a aprender como criar facilmente uma barra de rodapé fixa flutuante no WordPress. Você também pode querer ver nosso guia para iniciantes sobre como adicionar código de cabeçalho e rodapé no WordPress e nossa lista de verificação de coisas para adicionar ao rodapé do seu site WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Greg
Como posso posicionar esta barra fixa no topo da página? Usando CSS ou alguma configuração que estou perdendo? Desculpas se isso já foi respondido. Obrigado!!
WPBeginner Support
For that you would want to use the header option instead of footer for most of these and that would place it at the top of the page
Admin
Moinuddin Waheed
Ter uma barra de rodapé flutuante é muito eficaz para marketing e geração de leads.
Isso dá uma tentação constante na mente dos usuários sobre as promoções e ofertas em andamento.
Eu já fiz compras no passado por causa desse lembrete constante e do medo de que essa oferta acabasse logo.
Obrigado pela análise passo a passo de como podemos criar uma para nossos sites.
WPBeginner Support
De nada, ficamos felizes que nosso guia tenha sido útil!
Admin
Hajjalah
Eu uso o plugin OptinMonster para adicionar uma barra de rodapé flutuante com meus links sociais, o que aumentou drasticamente meu público nas redes sociais, graças a este artigo detalhado passo a passo.
Mas, se me permitem perguntar. É possível adicionar algum código para que a barra de rodapé do plugin OptinMonster não apareça ou apareça depois que um anúncio de rodapé, como os anúncios de rodapé do Google AdSense, estiver disponível?
WPBeginner Support
You would want to reach out to OptinMonster’s support and they can help you look into and/or set up something like that
Admin
Ahmed Omar
Um excelente tutorial sobre como criar uma barra de rodapé flutuante "fixa" no WordPress
Seu guia passo a passo, especialmente o primeiro método, é claro e eficaz.
Eu uso o primeiro método para este rodapé flutuante
Obrigado por esta solução prática
WPBeginner Support
De nada!
Admin
Steve Alvi
Por favor, quero um botão de fechar com esta barra flutuante no rodapé.
WPBeginner Support
OptinMonster seria o método que permite ter um botão de fechar com mais facilidade.
Admin
Jiří Vaněk
Eu uso o Optin Monster onde posso configurar o fechamento e até medir o fechamento. Dessa forma, sei quantas pessoas usaram a barra flutuante e quantas a fecharam porque não estavam interessadas.
Trendy Avinash
Funcionou perfeitamente, sem nenhum plugin.
Obrigado
WPBeginner Support
Glad our guide was helpful
Admin
Alejandro Ferguson
O código do rodapé flutuante realmente funciona. Obrigado
WPBeginner Support
Glad our guide could help set it up
Admin
John SMith
Como adicionar um botão de compartilhamento no Facebook em uma barra flutuante apenas no celular, não para desktop.
WPBeginner Support
Você gostaria de dar uma olhada na opção 2 em nossos plugins de mídia social aqui: https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
wlepcha
Como adicionar menus no rodapé fixo em vez de anúncios aleatórios.
WPBeginner Support
Você gostaria de dar uma olhada em nosso artigo aqui: https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/
Admin
Marius
Tutorial muito bom. Implementei o código manual e funcionou perfeitamente. Só preciso de mais um recurso... podemos ter também um X ou botão de fechar para fechar a barra flutuante e mantê-la assim pelo resto da visita? Eu sei que cookies estão envolvidos, mas talvez você possa nos dar uma solução simples. Obrigado!
Greg Guz
Tutorial muito claro e fácil de seguir.
A barra flutuante parece funcionar perfeitamente, mas estou recebendo o seguinte erro no console do Chrome:
Falha ao carregar recurso: o servidor respondeu com um status de 404 ()
Alguma ideia?
Ankush jain
Seu site muito útil
muito obrigado
Mark Rowles
Apenas uma observação rápida: CSS não funcionará para isso.
Você tem `fixedBar` no HTML como nome de classe (B maiúsculo) e você tem `fixedbar` no CSS (b minúsculo), então o CSS não se aplica.
Alguém pode corrigir o código, por favor, para ajudar outras pessoas que descobrirem esta postagem?
WPBeginner Support
Olá Mark,
Obrigado por apontar isso. Atualizamos o código.
Admin
Robi
Queridos WPBeginner e Amigos
Se eu tenho uma seção específica que criei usando o Elementor Page Builder, como posso usá-la como um rodapé fixo personalizado? (Ela contém mais de uma coluna, alguns botões e texto). Eu quero este tipo de rodapé fixo, em vez de texto simples como explicado neste tutorial.
Obrigado..
Daniel
1) Adicionei o código pouco antes da tag `` no arquivo footer.php do meu tema /wp-content/themes/mytheme/
2) Adicionei o código ao meu tema /wp-content/themes//mytheme/style.css, não funcionou, deletei e então tentei adicionar pela opção do tema no menu de CSS personalizado, mesmo problema, não funcionou
3) Adicionei floatingbar.js com o código dentro em /wp-content/themes/mytheme/js
4) Adicionei o código ao functions.php primeiro, não funcionou... tentei com um plugin específico para o site também, mesma coisa
Tentei em dois sites diferentes com temas diferentes, mesmo problema, não funciona, apenas fica lá, não está flutuando
Qualquer ajuda será bem-vinda… Eu realmente preciso disso
WPBeginner Support
Olá Daniel, tente usar a ferramenta Inspecionar para solucionar qualquer problema com CSS.
Admin
Daniel
Obrigado pela resposta, mas para mim mexer com CSS e JS é como construir uma nave espacial… vou tentar descobrir o que está errado
Atenciosamente
Daniel
Daniel
Usei as ferramentas de inspetor e não vejo nenhuma linha vermelha lá….
Dueadla Framin
Eu tenho o mesmo problema! O código que você postou nem está funcionando no tema padrão twenty sixteen. Ele não está flutuando, apenas fica preso na parte inferior da página depois que você rola até o final.
Igor
há um erro na referência fixedBar no código css (está referenciando como “.fixedbar” quando deveria ser “.fixedBar”. Mude isso e veja se funciona.
henrykene
WpBeginner, por favor, eu gostaria de usá-lo para exibir meus anúncios do Adsense em visualizações móveis. Como devo proceder e quais são os códigos para fazê-lo mostrar um rodapé fixo do Adsense para espectadores móveis?
Nawaf
Incrível.
Mas há um bug. Quando você abre no celular. A faixa fica cortada. E você só vê metade dela
Dica
No meu novo tema, tenho a opção de usar um recurso de rolagem infinita. Isso é ótimo, exceto que o leitor teria que rolar muito para chegar ao meu antigo rodapé, que é onde coloco as divulgações legais, etc.
Com esta barra de rodapé flutuante, consegui colocar os links lá de forma agradável e agora posso usar o recurso de rolagem infinita sem ter que reposicionar um monte de links obrigatórios.
Obrigado por este tutorial. Aprendi um pouco mais de PHP e CSS também!
Sarah Noah
Tenho um cliente que quer ter um link para SOLICITAR UM ORÇAMENTO em todas as páginas, então quando vi este rodapé fixo, pareceu perfeito até que li que alguns usuários se incomodam com ele. Vocês acham que SOLICITAR UM ORÇAMENTO fixo na parte inferior de cada página é irritante? Claro, é a coisa mais importante que a empresa quer que o usuário faça.
Roy E
A barra do rodapé aparece bem no FireFox, mas não fica fixa no IE11, onde tive que rolar para baixo para ver “Sobre o WPBeginner”, “Links do Site” e “Sites que Gostamos”??
Roy E
Claro, quando pressionei Enter no comentário anterior (problema do IE), a barra do rodapé fixo apareceu. Não tenho certeza do que aconteceu, mas o problema desapareceu. Por favor, desconsidere este comentário e o anterior.
yugishtha
existe também um plugin de menu de barra superior flutuante para WP?
Hutzel
Tentei tudo, mas não me mostra o rodapé fixo. Alguém pode me ajudar ou me dar assistência, por favor? obrigado
Devendra Meena
Existe algum plugin que possa ter alguns scripts em uma caixa flutuante, e com um botão x para fechá-la?
Khushal Rao
isso também pode ser usado para mostrar anúncios..
Dick Sijtsma
Diminuir a opacidade para, por exemplo, 0,60, dá ao visitante uma prévia do conteúdo subjacente. Acho que seria um efeito agradável. Mas mudar a opacidade da barra também muda a opacidade do texto. E isso 'dilui' a mensagem. Algum truque para evitar isso?
Obrigado.
Jan dB
Como mencionado anteriormente, este é um tutorial muito fácil e funciona perfeitamente na maioria dos computadores.
No entanto, também tenho problemas em relação aos navegadores móveis.
Você já encontrou uma solução para isso?
Obrigado e continue o bom trabalho!
Equipe Editorial
Para navegadores móveis, se você tiver um design responsivo, poderá simplesmente usar media queries e exibir: none em toda a barra de rodapé.
Admin
Theresa @DearCreatives
Nice. I am actually looking for a tutorial for adding script to top of post that is there every time I post for disclosure purposes. If you have one like that or know of a plugin can you send me an @DearCreatives on twitter or email me
thanks!!
Dick Sijtsma
Oi, parece bom, mas eu entendo as razões pelas quais algumas pessoas não gostam muito desses tipos de rodapés. No entanto, estou tentando realizar esse efeito também.
No código-fonte desta página, vi que você externalizou o JavaScript. Você o colocou no arquivo JavaScript main.js e vinculou este arquivo principal à página no cabeçalho.
Até agora, tudo bem, consigo gerenciar isso. Mas não consigo encontrar o local onde a função 'randomtip' é chamada.
Em resumo, minha pergunta é: como eu externalizo o javascript? Espero ouvir de você.
Matthew
Ótimo tutorial. Um problema que outros também podem encontrar – eu tenho apenas um link de rodapé (em vez de vários em rotação) e esta barra de rodapé aparece mesmo na página para a qual eu linko no rodapé. Você conhece alguma maneira rápida de não mostrar este rodapé em páginas específicas? Ou, talvez, mostrá-lo apenas na página inicial?
Equipe Editorial
Claro, basta envolver o texto com a declaração condicional is_front_page().
Admin
Antonio
Here a true beginner. How do I actually do that? I totally new to WP and PHP. As far as I understand I have to put somewhere in the footer.php but I really have no idea where. Great article though. It managed to add it to my blog as well
Caio
Eu gosto, mas é um pouco distrativo demais. Talvez torná-lo agradável e leve diminuindo a opacidade e, em seguida, adicionando uma declaração de estilo ao passar o mouse para aumentar a opacidade de volta para 0,9.
Sopheak
Uau! Foi um ótimo tutorial.
Pawan
Ótimo, eu estava procurando o mesmo.
Sai Kumar
Olá, esta barra de rodapé flutuante e fixa é realmente incrível! Vou adicioná-la ao meu blog com certeza. Muito obrigado por compartilhar!!
Max Manroe
Uau, ótimo tutorial e acho que isso é ótimo, vou tentar no meu blog. Obrigado
Zseller Istvan
Pessoal, esta é a única coisa que eu realmente odeio sobre o WpBeginner. Quando leio seus artigos no meu tablet, com o Opera, essa barra de rodapé fica no meio da página por segundos ao rolar. É um tablet novo e potente o suficiente. A barra de rodapé cobre o conteúdo, o que é realmente irritante. Depois de um tempo, ela se move para o lugar.
Equipe Editorial
Estamos trabalhando em uma versão para celular/tablet. Isso não será um problema em breve.
Admin
Salman Ahmad
Uau! Isso é incrível, obrigado por compartilhar
Peter
Muito obrigado por nos fornecer este ótimo tutorial. Definitivamente será útil para mim.
Amitabha Chakraborty
Olá
Bom tutorial. Pensei que um botão "X" para fechá-lo se incomodasse alguém teria sido ótimo.
Atenciosamente
Amitabha
David
Eu gosto de uma barra de rodapé. Acho que é um ótimo lugar para colocar botões de compartilhamento social. Eu fiz o meu em um site de um cliente, mas ele tem a opção de poder ser fechado. Ele também contém o botão para ir ao topo. Bem legal. No entanto, como a barra de rodapé que fiz, no meu HTC EVO 4G, sua barra de rodapé não fica fixa na parte inferior como deveria. Ela fica presa no meio de um artigo e é realmente irritante porque cobre um pouco do texto. A barra que fiz pode ser fechada, então é apenas um incômodo rápido. Sua barra não pode, então eu nunca consigo ler esse texto. Novamente, isso é no meu telefone. Se você puder descobrir a solução alternativa, por favor, me avise.
Cheguei a este artigo através da sua newsletter, que é ótima. Obrigado por isso.
Michael
Goste ou odeie esses tipos de barras, há um grande valor em ver como o código é escrito para implementar algo assim, pelo menos. Eu uso o Hello Bar e o Wibya Bar em vários dos meus sites e, embora eu ache que algumas pessoas se tornaram cegas para eles, incluindo eu mesmo, e algumas os odeiam, eles ainda funcionam para ajudar a converter e compartilhar conteúdo na maioria das vezes.
Eu aprecio o que vejo como uma pequena e útil lição de código. Ótimo site!
Taryn Fox
Eu pessoalmente sinto que a barra de rodapé flutuante é um recurso extremamente hostil ao usuário, especialmente uma como a sua, que é a) impossível de ocultar e b) se expande para o dobro do seu tamanho pretendido (ou mais) quando visualizada enquanto o tamanho da fonte é aumentado.
Falando nisso, mesmo com o zoom do nosquint no restante do texto deste site, o texto no campo de comentários é minúsculo e difícil de ler se você tiver problemas de acessibilidade visual.
Falando em outras questões de acessibilidade, pedir o "Nome Real" de uma pessoa é hostil para qualquer um que use um pseudônimo. Isso inclui mulheres trans, pessoas que estão sendo perseguidas, pessoas que estão escondendo suas atividades online de outras pessoas capazes de machucá-las, e pessoas que simplesmente preferem e são mais conhecidas por seus pseudônimos do que por seus nomes legais ou de nascimento (ambos são termos mais inclusivos e precisos para o que você chama de "nome real").
Além disso, você escreveu "meaningful" incorretamente na notificação "Add a comment".
Eu não ia deixar um longo comentário divagante de crítica, mas sinto que a maioria das pessoas tem cegueira de banner para barras de rodapé, e são ambivalentes em relação a elas na melhor das hipóteses e incomodadas com elas na pior. A maioria das pessoas que não são designers de sites, de qualquer forma. Pensei que talvez alguém devesse falar em nome das pessoas que são realmente afetadas por elas. Então, encontrei os outros problemas quando fui ao seu site pelo Google Reader e tentei deixar um comentário.
Obrigado pelos seus tutoriais, e espero que tudo corra bem para você.
Equipe Editorial
Oi Taryn,
Agradecemos muito seu feedback valioso. Existem definitivamente prós e contras em ter uma barra de rodapé flutuante como esta. Os contras você já apontou. Pensamos em ter uma opção de rastreamento por cookie onde usuários regulares podem fechar a barra e nunca mais vê-la. Mas mesmo os usuários regulares às vezes perdem ótimas ofertas por causa disso. Além disso, se eles limparem o cache do navegador ou usarem um computador diferente, a barra aparece novamente. Mais uma desvantagem do rastreamento por cookie. Demos pensamentos extensivos sobre ter registro de usuário e personalização de ofertas no site.
Quanto aos comentários, o texto do nome real no campo existe para um propósito: parar spammers. Se você ler a política de comentários, diz: “Não permitimos palavras-chave recheadas no campo de nome. Você deve usar seu nome ou apelido para comentar.” Frequentemente, as pessoas usam seus apelidos, e nós estamos completamente de acordo com isso. Mas se o seu apelido for “melhor empresa de seguros” ou algo assim… então marcamos como spam.
Obrigado por apontar o erro de digitação. Nós o corrigimos.
Admin
Partha Bhattacharya
Isto é em relação ao comentário de Taryn acima:
“… Sinto que a maioria das pessoas tem cegueira de banner para barras de rodapé, e são ambivalentes em relação a elas, na melhor das hipóteses, e incomodadas com elas, na pior.”
Como você continua usando-as, não há dúvida de que obtém benefícios delas, e as pessoas clicam nelas para se manterem atualizadas, assim como eu fiz agora… vindo de outra página.
Você se importaria de compartilhar algumas estatísticas / insights sobre a eficácia da barra de rodapé para você, e também sobre sua eficácia em comparação com o uso de uma barra de cabeçalho?
staion
Obrigado por estes pequenos tutoriais fáceis e incríveis! Já o implementei no meu site, mas sem a coisa do jquery, apenas usando-o como anúncios.
FreedomJackson
Incrível, obrigado por compartilhar isso, cara. Estou fazendo algumas atualizações e estava tentando encontrar uma boa maneira de adicionar esta barra de rodapé.
mucho grande gracias senior