Como fazer um botão flutuante no Elementor

Rifat Element. Jul 29, 2022

Deseja saber como fazer um botão flutuante com o construtor de páginas Elementor ? Um botão flutuante é aquele que aparece na frente de todas as outras informações da tela. A maioria dos proprietários de sites inclui um botão flutuante acionável que direciona o usuário para um objetivo específico, como assinar uma lista de e-mail ou navegar em uma página de loja. redes sociais, entre outras coisas

Você pode criar rapidamente um botão flutuante para o seu site com o Elementor de várias maneiras. Neste tutorial, mostraremos como fazer isso da maneira mais simples possível, utilizando o construtor de páginas Elementor .

Faça um botão flutuante no Elementor

Aqui vamos configurar o z-index para construir nosso botão flutuante. Usando a versão gratuita do Elementor, você pode criar um botão flutuante para uma página específica seguindo este procedimento. Se você deseja adicionar o botão flutuante a todo o site, deve adicionar manualmente o botão a cada página se estiver usando a versão gratuita do Elementor.

Agora, abra o editor Elementor e navegue até a página onde deseja adicionar o botão flutuante. Você tem a opção de criar uma nova página ou editar uma existente. Para adicionar uma seção, clique no ícone "+" e selecione o layout de coluna única.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Adicione o widget de botão à sua coluna recém-criada no painel de widget.

Agora você deve escolher a ação do botão. Nesse caso, estamos usando o botão para navegar até a URL da página da loja. Para fazer isso, vá para o campo de link e adicione o link à página. A localização do botão pode ser alterada usando a opção de alinhamento. Faça o botão o menor possível.

Nosso botão agora está pronto para flutuar quando um usuário rolar a página para baixo. Para isso, vá para a guia Avançado e selecione a opção Layout. Defina a largura e a posição para Inline (Auto). Você também deve configurar as orientações Horizontal e Vertical, bem como o deslocamento.

Agora você deve especificar o z-index para tornar o botão sempre flutuante. Preencha o slot z-index com 800. Isso sempre fará o botão flutuar.

Visualização Final

Aqui está o nosso design final.

Empacotando

O recurso Floating Elementor Elements despertou nosso interesse. Ele ajuda na resolução rápida de problemas de design. Acreditamos que terá o mesmo efeito em você. Se sim, por favor, compartilhe seu design na área de comentários. Queremos divulgar o seu trabalho em todo o mundo. Confira nossos outros tutoriais do elementor também.

Divi WordPress Theme