Pensando em aprimorar a experiência do usuário e a acessibilidade das informações, desenvolvemos o Seox Float Button, um bloco exclusivo que permite adicionar botões flutuantes em páginas de um site através do editor Gutenberg. Esses botões permanecem fixos, normalmente no rodapé direito da tela, proporcionando uma maneira prática de destacar e facilitar o acesso a links importantes.
O que é o Seox Float Button?
O Seox Float Button é um bloco que pode ser adicionado em qualquer conteúdo Gutenberg ou em Widgets. Ele é ideal para promover ações específicas, como redirecionar os usuários para uma página de contato, uma oferta especial, ou qualquer outro link importante. O botão flutuante garante que essas informações ou chamadas para ação estejam sempre visíveis, melhorando significativamente a experiência do usuário.
Como Inserir o Seox Float Button
1. Usando o botão em uma página ou post específico:
- No editor Gutenberg de uma página ou post, digite
/seguido do nome do bloco (“Seox Float Button”). - Selecione o bloco da lista exibida.
- Após adicionar o bloco, configure-o conforme suas necessidades na barra lateral direita.
2. Usando o botão em todo o site:
Para inserir o botão em todo o site, você precisa adicioná-lo a um widget que esteja presente em todas as páginas. As posições de widgets mais comuns são header-left, header-right, footer-left ou footer-right. A escolha da posição dependerá do layout de cabeçalho e rodapé do seu tema (Flash).
Passos para adicionar o botão em um widget:
- Acesse Aparência > Widgets no painel do WordPress.
- Encontre a posição desejada para o widget (recomendamos “Footer Left”).
- Clique em Adicionar Bloco e pesquise por “Seox Float Button”.
- Realize as configurações necessárias na barra lateral à direita.
- Clique em Atualizar no canto superior direito para salvar as alterações.
Configurando o Seox Float Button
A configuração do Seox Float Button é feita na barra lateral direita do editor Gutenberg, onde você encontrará quatro menus principais: Configurações, Visual, Cores, e Avançado. O bloco na área de edição serve apenas como uma referência visual.
1. Configurações:
Neste menu, você pode:
- Definir o link de destino do botão.
- Escolher se o link abrirá em uma nova aba.
- Definir um rótulo para o botão.
- Selecionar se o botão estará visível ou não em ambos os estados (ativo/inativo).
2. Visual:
O menu Visual é dividido em duas abas: Geral e Posicionamento.
- Geral: Aqui você ajusta o visual do botão:
- Ícone: Selecione um ícone de uma lista predefinida ou envie um ícone personalizado.
- Dimensão: Ajusta a altura do botão.
- Padding Y: Define o espaço interno entre a extremidade superior/inferior e o ícone.
- Padding X: Define o espaço interno entre a extremidade esquerda/direita e o ícone (efetivo apenas quando há um rótulo).
- Radius: Controla o arredondamento do botão. Use 0 para um botão quadrado.
- Posicionamento: Permite ajustar o espaço entre o ícone e as extremidades da tela. Essas alterações só podem ser visualizadas na parte frontal do site.
3. Cores:
Neste menu, você pode ajustar as cores do botão em seus estados normal e hover utilizando seletores de cores. As opções incluem cores de fundo, ícone e rótulo.
Com essas instruções, você poderá facilmente adicionar e configurar o Seox Float Button em seu site, melhorando a visibilidade de links importantes e a experiência geral de navegação dos usuários.
