Como Criar uma Barra Flutuante “Fixa” no WordPress

Quer chamar a atenção dos seus visitantes usando uma barra flutuante fixa no WordPress?

Com um banner ou barra flutuante fixa, você pode exibir uma mensagem na parte superior ou inferior do seu site sem perturbar a experiência do usuário. Isso permite que você promova inscrições em e-mails, produtos, promoções relâmpago, contas de mídia social e exiba qualquer mensagem personalizada. Por exemplo, você pode querer exibir configurações de cookies para pedir permissão ao visitante para rastrear seus dados enquanto ele navega em seu site.

Neste guia passo a passo, mostraremos a maneira mais fácil de criar um banner flutuante no WordPress. Antes de começarmos o tutorial, vamos esclarecer o que exatamente é uma barra flutuante fixa.

O que é uma Barra Flutuante Fixa?

Um banner flutuante fixo permanece na parte superior ou inferior da sua página da web enquanto seus visitantes rolam a página. 

Essas barras estão sempre visíveis para o usuário e ele pode interagir com sua mensagem a qualquer momento durante sua jornada de navegação.

As barras fixas são projetadas para serem flexíveis e servir a múltiplos propósitos. Assim, você pode adaptá-las para mostrar qualquer mensagem que desejar. Para dar alguns exemplos, você pode adicionar descontos de boas-vindas para novos visitantes ou promover um produto recém-adicionado para maximizar a visibilidade.

Quando usadas da maneira certa, você pode usar barras flutuantes para:

• Melhorar suas vendas e receita através de promoções relâmpago, descontos e ofertas
• Direcionar tráfego para seu conteúdo online (podcasts, artigos, guias, vídeos e mais)
• Aumentar o engajamento e as conversões do site
• Gere leads e assinantes para expandir sua lista de e-mail marketing 
• Aumente o engajamento e o número de seguidores nas redes sociais
• Aumente o reconhecimento da marca

Existem muitas maneiras de usar barras fixas a seu favor. Com isso, vamos aprender como criar um banner flutuante envolvente para o seu site no WordPress.

Criando um Banner Flutuante Fixo para WordPress

Existem alguns plugins de barra flutuante para WordPress, mas nem todos oferecem os recursos que você precisa para criar e personalizar um com facilidade.

Vamos mostrar como criar um em menos de 5 minutos sem tocar em uma única linha de código usando nossa ferramenta de banner flutuante favorita chamada OptinMonster.

OptinMonster é a ferramenta de geração de leads nº 1 que permite criar campanhas de marketing atraentes para converter seus visitantes em clientes. Estas incluem barras flutuantes, pop-ups, slide-ins, formulários inline e muito mais.

O OptinMonster vem com uma biblioteca de mais de 50 modelos de barras flutuantes pré-projetados para que você não precise começar do zero.

Você encontrará designs para anúncios, descontos, ofertas populares de feriados, assinaturas de newsletter e muito mais.

Você pode visualizar e selecionar um modelo de sua escolha. Em seguida, há um construtor de arrastar e soltar que é muito fácil de usar. Você pode personalizar seu texto, design de imagem, cores e muito mais, tudo com cliques do mouse.

Além disso, o OptinMonster permite definir regras de segmentação para que você possa exibir seus banners flutuantes para as pessoas certas no momento e local certos. Por exemplo, você pode configurar sua campanha para aparecer apenas para novos usuários ou para aqueles que estão prestes a sair do seu site. Ele também permite que você retarget e acompanhe seus leads para melhorar o engajamento. 

Além disso, o OptinMonster rastreia e exibe todas as estatísticas importantes de que você precisa diretamente em seu painel. Você pode ver o número de visitantes que visualizaram e clicaram em seu banner flutuante do WordPress, e até mesmo quanto dinheiro você ganha com a campanha. 

Para lhe dar uma ideia do que você pode fazer com o OptinMonster, aqui estão alguns exemplos de campanhas:

A melhor coisa sobre o OptinMonster é que ele lhe dá a flexibilidade de criar e gerenciar todas as suas campanhas, incluindo barras flutuantes, diretamente do seu painel do WordPress. 

Agora, vamos logo começar a criar nosso banner flutuante do WordPress com o OptinMonster.

Etapa 1: Instalar e Ativar o Plugin OptinMonster

Primeiro, você precisa assinar uma conta OptinMonster. O plugin começa em US$ 9 por mês com garantia de devolução do dinheiro em 30 dias.

Em seguida, você precisará instalar o plugin OptinMonster para conectar a conta ao seu site. 

O plugin conector está disponível gratuitamente, então você pode baixá-lo facilmente do seu painel do WordPress. Para mais detalhes, você pode conferir nosso guia sobre como instalar um plugin do WordPress.

Ao instalar e ativar o plugin OptinMonster em seu site, ele iniciará um assistente de configuração. Você terá a opção de conectar sua conta recém-criada.

Lembre-se que se você estiver logado na sua conta OptinMonster em outra aba, o plugin a detectará automaticamente e sincronizará seu site.

Agora, você pode começar a criar seu primeiro banner flutuante do WordPress com o OptinMonster.

Etapa 2: Criar Nova Campanha de Barra Flutuante

O OptinMonster permite que você crie e personalize banners flutuantes dentro do seu painel de administração do WordPress. 

Para isso, vá para a aba OptinMonster e você verá diferentes tipos de campanhas de geração de leads, como popup, barra flutuante, tela cheia, inline e muito mais. 

Para criar uma campanha de barra fixa do WordPress, escolheremos a opção Barra Flutuante. 

Isso abrirá a biblioteca de modelos, composta por impressionantes modelos de banners flutuantes que você pode escolher. 

Aqui, você pode passar o mouse sobre qualquer modelo para pré-visualizar a barra flutuante fixa na mesma página. Quando encontrar o melhor design para sua campanha, clique no botão Usar Modelo para criar seu banner flutuante.

Isso abrirá uma janela pop-up onde você pode dar um nome à sua campanha de barra flutuante. 

Em seguida, clique no botão Começar a Construir para iniciar o construtor de campanhas do OptinMonster. 

Etapa 3: Personalize seu Banner Flutuante do WordPress

No construtor de campanhas, você verá todos os blocos de elementos à esquerda e a prévia da sua barra fixa à direita. Aqui, você pode facilmente arrastar e soltar os blocos necessários em seu banner.

Você encontrará os 12 blocos que pode usar para tornar seu banner mais envolvente e interativo. 

Alguns dos blocos de elementos úteis são: 

• Contagem regressiva
• ChatBot
• Ícones Sociais
• Campos de Captura
• Botão Sim/Não

1. Editar Blocos de Conteúdo

Se você quiser personalizar qualquer bloco de conteúdo, basta clicar nele e você verá o editor de blocos abrir na barra de tarefas esquerda.

Por exemplo, você pode substituir a imagem carregando a sua própria ou escolhendo uma da biblioteca de mídia existente. Você também pode alterar as configurações da imagem, como opacidade, largura, texto alternativo e muito mais.

Além disso, o OptinMonster permite adicionar links às suas imagens para que os usuários possam clicar nelas e serem redirecionados para a página de sua escolha. Há uma opção para fazer o URL do link abrir em uma nova janela e você pode habilitar o rastreamento de cliques para ver quantas pessoas clicam na imagem.

Da mesma forma, você pode alterar o texto do conteúdo em seus banners flutuantes e editar o botão de optin também. Tudo o que você precisa fazer é selecionar o elemento em sua prévia e inserir seu texto personalizado.

Quando terminar de personalizar seus blocos de conteúdo, clique no botão Salvar.

2. Configurar Configurações da Campanha

O OptinMonster permite editar as configurações da campanha dentro do construtor. Para isso, você precisará clicar no ícone Configurações no canto inferior esquerdo do construtor de campanha.

Em seguida, você verá as 4 configurações principais no lado esquerdo e a prévia ao vivo da barra flutuante no lado direito da página. As configurações incluem:

• Detalhes da Campanha: Permite editar o nome da campanha, descrição e outras informações sobre sua barra flutuante.
• Estilo da Visualização: Oferece muitas configurações de design e estilo para combinar com a marca do seu site.
• Configurações de Exibição: Escolha o número de vezes que sua campanha será exibida aos visitantes.
• Configurações da Barra Flutuante: Altere a posição da sua barra flutuante de cima para baixo e vice-versa.

Como os modelos do OptinMonster têm uma aparência e funcionam bem prontos para uso, você não precisará personalizá-los muito, exceto para alterar alguns detalhes para corresponder aos seus objetivos de campanha. Mas você pode facilmente fazer alterações no design e no estilo, se precisar.

Na opção Estilo da Visualização, você pode alterar a opção geral de estilo e design. As configurações básicas permitem editar o estilo, cor de fundo, imagem, botão de fechar e muito mais.

As configurações avançadas permitem personalizar até os mínimos detalhes, como borda, espaçamento, sombra e muito mais.

Por padrão, o OptinMonster exibe banners flutuantes na parte inferior do seu site, mas você pode alterar isso e movê-lo para o topo.

Para isso, vá para Configurações Flutuantes e ative a opção Carregar Barra Flutuante no Topo da Página lá. 

Não se esqueça de salvar suas configurações depois de terminar.

Agora, vamos aprender sobre as regras de exibição que você pode definir para sua campanha de banner flutuante para segmentar visitantes. 

Etapa 4: Defina Regras de Segmentação para Exibir Seu Banner Flutuante

O Optinmonster oferece recursos poderosos de segmentação de público para otimizar conversões e gerar leads a partir de suas campanhas.

Para adicionar novas regras de segmentação, você precisará navegar até a aba Regras de Exibição na parte superior do editor.

Em seguida, você verá o conjunto de regras padrão que exibe seu banner se um visitante permanecer em qualquer página do seu site por 5 segundos. 

Se você quiser alterar a regra de exibição, pode clicar no botão Editar ou clicar na regra existente, e você verá a lista de regras de exibição predefinidas oferecidas pelo OptinMonster. 

Todas as regras são organizadas em diferentes abas para que você possa encontrar facilmente a regra de segmentação para sua campanha. Alguns destaques incluem:

• Distância de Rolagem: Exibir apenas uma vez que um visitante rolou uma certa profundidade na página
• Hora e Data: Segmente feriados específicos, dias da semana e períodos para realizar vendas relâmpago ou ofertas por tempo limitado
• Localização Física: Engaje com usuários com base em sua área geográfica para localizar a oferta da campanha
• Dispositivo do Visitante: Mostrar/Não mostrar campanhas com base se um usuário está em desktop ou mobile

Para adicionar uma regra, tudo o que você precisa fazer é clicar nela. É simples assim!

Você nunca precisará adicionar código ou trabalhar com configurações complexas para segmentar seu público. Em seguida, mostraremos como conectar sua campanha à sua conta de e-mail para que todos os seus novos leads sejam adicionados automaticamente à sua lista de contatos.

Etapa 5: Conectar ao seu provedor de e-mail

O OptinMonster integra-se com todos os principais serviços de marketing por e-mail, como Constant Contact, Aweber, ActiveCampaign e ConvertKit.

Ao sincronizar sua conta de e-mail, você pode coletar endereços de e-mail e enviar e-mails automatizados para seus novos assinantes. O OptinMonster também vem com opções integradas para segmentar seus leads, para que sua lista permaneça organizada e você possa enviar e-mails relevantes com base no que eles se inscreveram.

Para se conectar ao seu provedor de e-mail, abra a guia Integrações no editor de campanha. 

Aqui, você pode escolher seu provedor de e-mail e fazer login na sua conta. Alguns provedores precisam de uma API para funcionar, que você pode encontrar nas configurações da sua conta de e-mail.

Não se esqueça de salvar suas configurações após configurar sua integração.

Agora você está pronto para publicar sua campanha de banner flutuante fixo em seu site WordPress

Etapa 6: Publicar seu banner flutuante do WordPress

Vá para a guia Publicar no editor e você verá opções para ver uma prévia ao vivo da sua campanha. Quando estiver pronto, tudo o que você precisa fazer é alterar o status para Publicar.

Após clicar no botão Publicar, você verá o status da campanha mudar para 'Publicado'. 

Vá para o seu painel do WordPress e abra a guia OptinMonster » Campanhas. Certifique-se de que o status também esteja definido como Publicar aqui.

Agora, ao visitar seu site, você deverá ver sua campanha de barra flutuante aparecer de acordo com as regras de exibição que você definiu.

E é isso por hoje! Esperamos que este artigo tenha ajudado você a aprender facilmente como criar um banner flutuante fixo para seu site WordPress.

Agora que você sabe como usar o OptinMonster, pode prosseguir e criar mais campanhas de alta conversão em seu site, como pop-ups, slide-ins, jogos de roleta de cupons e muito mais. 

Em seguida, para gerar mais leads e conversões em seu site, você definitivamente vai querer ler estes artigos:

• Como Criar uma Página de Captura de Leads no WordPress
• Como Criar um Popup no WordPress (Passo a Passo)
• Crie uma Página de Captura de Alta Conversão

Estas postagens mostram mais oportunidades para segmentar seus usuários e fazê-los interagir e assinar sua marca.