Como adicionar botões aderentes no site WordPress

Você deseja adicionar botões aderentes ao seu site WordPress? Usando botões de ação aderentes, o usuário pode obter facilmente informações relacionadas ao site. Essas informações podem ser seu endereço de e-mail, número de telefone, localização em um mapa do Google, links para redes sociais, etc. Neste artigo, vou mostrar como adicionar botões aderentes ao seu site WordPress.

Os botões de ação aderentes funcionarão como um widget flutuante. Esses botões serão bloqueados mesmo se o usuário rolar para cima ou para baixo. Ele terá uma ótima aparência no site e será mais amigável. Adicionar botões aderentes ajuda a melhorar as conversões e o envolvimento do visitante.

Começo

Existem 2 maneiras de adicionar botões aderentes no WordPress. Uma maneira é construir o código do zero e a outra é usar um plugin. Para este tutorial, vou usar um plugin. A razão é óbvia, se podemos obter um bom plugin que pode fazer nossa pequena tarefa, então por que perder tempo construindo-o do zero.

Faz sentido codificar se você deseja criar funcionalidades grandes e complexas. Nesses casos, os plug-ins podem não ser apropriados para sua finalidade e é melhor não confiar neles, pois suas atualizações podem interromper a funcionalidade. Mas para tarefas menores como esta (botões aderentes), você pode contar com plug-ins.

WP Sticky é um dos plug-ins mais eficazes para adicionar elementos aderentes ao seu site. É um pequeno plug-in bacana que permite adicionar um número ilimitado de elementos fixos, compatível com todos os temas, plug-ins e construtores de página, e todo o procedimento pode ser feito em apenas alguns minutos. Ele enfatiza a simplicidade do processo, portanto, todo o procedimento consiste em:

• Dê um nome ao seu elemento
• Mova e clique no botão Selecionar Item
• Selecionando o elemento desejado que você deseja tornar aderente
• Clicar em "Salvar alterações"

E é basicamente isso – o item selecionado agora está anexado ao seu site. Existem algumas configurações incluídas, então você pode brincar com a opacidade do elemento aderente, escolher um efeito Fade-in ou Deslizar para baixo, definir o intervalo de rolagem e muito mais. Além disso, você pode definir preferências diferentes de acordo com os requisitos do seu site, idealmente – você pode adicionar uma restrição com base em um critério específico, o que significa que o elemento não aparecerá como aderente no selecionado:

• Páginas
• Postagens
• Categorias
• Tag
• Ou tipos de mensagem

Claro, você pode ajustá-lo em qualquer lugar ou evitá-lo em um dos mencionados para obter controle total sobre o plug-in. Preocupado com a forma como eles serão exibidos em dispositivos diferentes? Isso também pode ser configurado na guia Dispositivos, onde você pode escolher o tamanho exato da tela em que seus itens aparecerão como fixos. Você pode escolher quase qualquer elemento de sua preferência, seja um cabeçalho, menu, widget, navegação, vídeo … tudo pode ser configurado em poucos minutos e você pode criar quantos quiser. Eficaz, elegante e o mais simples possível.

Além disso, existem outras ferramentas para ajudá-lo a criar elementos fixos em seu site. Ao mesmo tempo, instale e ative os botões de ação flutuantes inteligentes – plugin do Buttonizer. Na próxima seção, veremos como usar este plugin.

Adicione botões aderentes ao seu site WordPress

Depois de instalar o plugin, vá para o menu "Buttonizer" no painel de controle. Este plugin não possui uma página de configurações de backend. Em vez disso, ele fornece uma interface para que você possa ver o impacto das mudanças imediatamente.

O plugin oferece mais de 25 ações com um clique. Digamos que, em uma lista, você queira adicionar um e-mail, um telefone e um mapa do Google aos seus botões aderentes em um site.

Clique no botão Adicionar e nomeie o botão. Dou ao botão o nome de "Telefone". Depois disso, você verá um botão no front-end, conforme mostrado abaixo.

Como este botão é para um "número de telefone", precisamos configurá-lo. Clique no ícone Configurações ao lado de TELEFONE. O painel de opções para personalizar o botão é aberto.

Na lista suspensa Ação do botão, selecione Ação de chamada (número de telefone). Adicione seu número de telefone à caixa de texto.

Em seguida, quero definir um ícone de telefone para este botão. Isso pode ser feito nas seções ESTILO >> ÍCONE. Sob o ícone ICON, clique em SELECIONAR ÍCONE, uma janela pop-up será aberta na qual você seleciona um ícone da biblioteca Font Awesome.

Seguindo o mesmo processo, podemos adicionar tantos botões ao site. Para cada botão, selecione a ação do botão correspondente e você terá diferentes opções para o botão.

Finalmente, queremos definir a posição dos botões aderentes. Para fazer isso, clique no ícone "Configurações" ao lado de "NOVO GRUPO".

Na seção Posição, você pode obter os parâmetros para definir a posição dos botões. Eu quero que seja certo e centralizado. Portanto, defino "0%" em "HORIZONTAL" e a parte do meio em "VERTICAL".

Os plug-ins do Buttonizer fornecem muitos outros recursos com os quais você deve experimentar e se familiarizar. O plugin fornece opções para a cor do botão, animação do botão, plano de fundo, classes personalizadas, visibilidade do dispositivo e mais.

Com as configurações acima aplicadas, os botões aderentes aparecerão no site conforme mostrado na captura de tela abaixo.

Espero que você tenha descoberto como adicionar botões aderentes ao seu site WordPress. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.

Artigos relacionados

• FooGallery – belo plugin de galeria de imagens WordPress
• Como aumentar o número de assinantes de e-mail em seu site WordPress
• Como adicionar código após tag body no WordPress

Fonte de gravação: artisansweb.net