Com os botões flutuantes, é possível manter um botão sempre visível, mesmo quando o visitante rola a página. Use botões flutuantes para manter CTAs importantes sempre visíveis e clicáveis em todas as páginas do site.
Os casos de uso ideais incluem:
- Contate-nos
- ASSINAR
- FAÇA UMA COTAÇÃO
Para fazer um botão flutuar:
- Adicione um botão ao seu site. Para obter mais informações, consulte Adicionar widgets.
- Clique em Editar design com o botão direito do mouse.
- Na guia Estilo, role para baixo e clique na opção Flutuante. Se o atributo flutuante estiver desativado, o botão aparecerá automaticamente na primeira linha na parte superior da página.
- Selecione uma posição para o botão. Mude a visualização do dispositivo para alterar a posição em dispositivos diferentes.
- Para mostrar o botão flutuante somente na página atual, ative a opção Mostrar somente nesta página.
Botão fixo no Editor 2.0
No Editor 2.0, os botões flutuantes foram renomeados para os botões " fixos ".
Para ativar um botão fixo no editor 2.0:
No painel lateral, clique em widget. Procure o widget Button e, em seguida, clique e arraste-o para a tela.
Clique no botão para abrir o menu flutuante e selecione Edit Design. Isso abre o painel de design no lado direito da tela.
No painel de design, role para baixo até a seção Position (Posição ).
Clique para expandir o menu Position type (Tipo de posição ) e selecione Fixed (Fixo). Isso garante que o botão permaneça em uma posição fixa à medida que o usuário rola a tela do seu site. Essa alteração se aplica a todos os tamanhos de tela, mas o senhor pode substituí-la, se necessário.
Depois de selecionar a posição, o senhor não pode mudar de Fixed para Pinned. Isso ocorre porque, quando o usuário seleciona Fixed, o botão é removido de seu contêiner original para que possa permanecer visível na tela enquanto o usuário rola a tela. Se o senhor mudasse de Fixed para Pinned, o editor não saberia em qual contêiner colocar o botão. Se o senhor precisar mudar, primeiro terá que voltar para Default. O botão será movido para a primeira seção da janela de visualização.(Opcional) Ative a opção Mostrar somente nesta página. Caso contrário, o botão fixo aparecerá em todas as páginas por padrão.
No menu Spacing (Espaçamento ), use as configurações de Margin (Margem ) para definir onde o botão está localizado na janela de visualização. É especialmente importante configurar isso se o senhor tiver dois botões fixos na mesma posição de viewport.
Haverá um ícone de indicador fixo no menu flutuante do botão e no painel de design.
Considerações sobre dispositivos móveis
- No celular, sugerimos que você coloque o botão Flutuante no canto inferior da tela para que os visitantes possam clicar facilmente com uma mão.
- Você pode exibir um ícone em vez de texto no celular, escolhendo o layout que apresenta um ícone no celular.
- Se um botão flutuante não estiver sendo exibido no celular, você pode estar usando um layout antigo para celular. Para atualizar o layout, acesse o Editor de design e clique em Layout de site.