Precisa de uma maneira de criar um efeito de rolagem de imagem em Elementor ? Neste artigo, iremos orientá-lo na criação de um efeito de rolagem de imagem usando Elementor em suas páginas da web.
O efeito de rolagem da imagem permitirá que você revele a imagem completa quando o usuário passar o mouse sobre as imagens. Ao visitar um site que vende modelos de site, você pode ver a visualização completa dos modelos com recursos de efeito de rolagem de imagem.
Com esses recursos, você pode mostrar facilmente aos seus usuários a visão completa do site em um pequeno espaço. Normalmente, se você deseja exibir uma imagem completa de um site, isso ocupará muito espaço em suas páginas da web. Além disso, afeta o design do seu site.
Mas com o efeito de rolagem de imagem, você pode adicionar mais imagens de uma forma atraente que pode facilmente atrair a atenção do público.
Criar efeito de rolagem de imagem no Elementor
Elementor não fornece um widget para adicionar efeito de rolagem de imagem. Portanto, você precisa adicionar o efeito usando CSS personalizado. O recurso CSS personalizado está disponível apenas com Elementor Pró. Portanto, certifique-se de ter atualizado para Elementor Pro.
Agora, abra uma página com o editor Elementor e clique no ícone de adição para adicionar uma seção.
Agora você precisa selecionar a coluna para sua seção. Aqui, selecionamos a seção de coluna única.
Agora clique no ícone de edição de seção e na guia de layout defina a altura mínima para 500.
Agora, no widget de bloco, adicione o bloco de seção interna à seção criada e remova a coluna padrão. Clique com o botão direito do mouse no ícone de edição da coluna e clique na opção Excluir para excluir a coluna principal.
Vá para a opção de edição da seção interna novamente e na guia layout defina a altura mínima para 500 como mostramos anteriormente.
Agora mude para a guia de estilo da seção interna e defina o plano de fundo como clássico na opção de plano de fundo. Em seguida, você precisa adicionar sua imagem de fundo. Na opção de posição da imagem, defina a posição da imagem Centro Superior. Na opção de repetição, defina a opção não repetir e o tamanho como cobrir.
Agora mude para a guia avançado para adicionar CSS personalizado. No campo CSS personalizado, adicione o seguinte código:
seletor{ -webkit-transition: facilidade de entrada e saída 3s !importante; transição: 3s de fácil entrada e saída !importante; } selector:hover{ background-position: center bottom !important; }
Você pode alterar o valor de transição para alterar o efeito de rolagem das imagens. Se você deseja adicionar várias imagens com o mesmo efeito, pode duplicar a coluna e alterar a imagem de fundo.
Conclusão
Seguindo o processo, você poderá adicionar um efeito de rolagem de imagem ao seu site usando o construtor de páginas Elementor. Você pode conferir nossos outros artigos para aprender:
- Como usar blocos Elementor no editor Gutenberg?
- Elementor vs Divi vs SeedProd – Qual é o melhor?
- Como usar o histórico para desfazer e refazer ações no Elementor
- Como fazer um site Elementor super rápido
- Como criar um círculo interativo no Elementor
Esperamos que este artigo seja útil para você. Se você gostou deste artigo, curta nossa página no Facebook para ficar conectado.
