Você gostaria de criar um botão flutuante com o índice Z em Elementor ?
Temos certeza de que você está familiarizado com o botão que aparece na frente de todo o conteúdo da tela e geralmente com uma forma circular e um ícone no centro. Bem, esse é o botão de ação flutuante.
O botão de ação flutuante pode desencadear uma ação ou enviar você para algum lugar. Como gatilhos para e-mails, redes sociais, orientação de visitantes para se inscrever em um canal e muitos outros.
Em Elementor, existem dois métodos para criar um botão de ação flutuante, eles são os seguintes:
- Ao definir Z-Index
- Ao criar uma janela pop-up -Popup-
Neste tutorial, mostraremos apenas como criar um botão de ação flutuante definindo o índice Z. E usaremos a versão pro para fazer isso acontecer.
Mas primeiro, descubra: Como instalar o Elementor no WordPress
Como criar o botão de ação flutuante no Elementor
Você pode usar a versão gratuita doElementor para criar o botão de ação flutuante com este método. Porém, você precisa colar o botão que criou em cada página onde deseja que o botão seja exibido em seu site.
Com Elementor Pro, você também pode acessar o recurso CSS customizado, que usaremos neste tutorial.
Vá para o seu editor Elementor; você pode modificar seu conteúdo existente (páginas, artigos, etc...) ou criar um novo. Neste tutorial, vamos modificar uma página.
Primeiro, crie uma nova seção com uma única coluna. Selecione o widget de botão e arraste e solte na área de edição do painel de widgets. Em seguida, altere o botão texto e o link.
Neste tutorial, usaremos o botão como um gatilho para pressionar o visitantes para navegar no site da Web Elementor. Em seguida, na opção alignement, defina-o para direito et, Por fim, altere o Tamanho do botão Ligar Muito grande.
Como você pode ver no GIF acima, este botão está estacionário na seção. Em seguida, faremos com que ele se mova enquanto rolamos, mantendo-o na mesma posição.
Vá para a guia avançado. No parâmetro Layout, defina a largura em linha (carro), Defina a posição em Fixo, definir orientação horizontal em direito e ajustá-lo décalage como desejado.
Em seguida, vamos definir o essencial neste método. No campo Z-Index, digite o número 9999 ; fará com que o botão fique sempre na frente (flutuante).
Agora é hora de girar o botão de ação flutuante. Sempre sob a guia avançado, Acesso aulas de css do bloco Layout, então escreva rotate dentro.
Veja também: Elementor: Apresentando o melhor construtor de páginas do WordPress
Depois disso vá para o bloco CSS customizado , cole o seguinte código no campo:
.rotate.rotate
{transform: rotate(90deg);}Você pode ver que o botão acabou de girar, mas há uma lacuna estranha entre a lateral da tela. Então, vamos corrigi-lo ajustando o décalage em -92
Finalmente, vamos fazer um último pequeno toque para este botão de ação flutuante. Acesse o bloco transformador, selecione-o VISÃO GERAL, acesse a opção mudança e defina cada opção para 7.
Existem várias opções para alcançar uma determinada coisa no Elementor. Quando se trata do botão flutuante, existem duas opções que você pode usar. Aqui nós cobrimos apenas um método, o outro método será outro tutorial.
Leia também: Elementor: Como migrar um site WordPress
Se você deseja ter mais opções de estilo, criar um botão de ação flutuante usando o construtor de Popup será uma alternativa melhor, pois você terá opções para personalizar o botão, bem como o comportamento, como tempo de fechamento do botão, duração, animação de entrada ou saída, etc. .
Você acabou de concluir esta tarefa facilmente. Basta visualizar o trabalho do seu tablet e smartphone, tentando alterar as margens para corresponder a cada dispositivo.
Obtenha o Elementor Pro agora!
Conclusão
Assim ! É isso neste artigo que mostra como aplicar um efeito Zoom em um cartão de perfil. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
