Deseja aprender como adicionar um efeito de foco aos itens no widget de postagensElementor?
Se você é um usuário WordPress usando Elementor para criar o seu site da Web, você deve estar familiarizado com o recurso de efeito de foco. Você pode encontrar esse recurso principalmente em cada configuração do widget Elementor.
O efeito hover pode tornar seus elementos atraentes, por isso é uma maneira eficaz de melhorar a experiência do usuário em seu site.
Bem, falando sobre o efeito de foco, este artigo mostrará como adicionar o último a elementos de postagem individuais no widget Elementor Postagens usando CSS personalizado do Elementor, especificamente, o efeito de foco de zoom.
Há duas razões pelas quais estamos fazendo este tutorial para você:
- Por padrão, você pode adicionar um efeito de foco a uma postagem no widget de postagens Elementor. Mas, o efeito de foco será muito básico/padrão.
- Por padrão, o Elementor permite adicionar um efeito de zíper ao widget Posts (aba avançado -> Transformador -> Échelle). Mas o efeito de foco afetará todos os elementos do widget de postagens (não individuais).
Etapas para adicionar efeito de foco a postagens individuais do widget de postagens do Elementor
Antes de iniciar o tutorial, queremos informar que este tutorial usa o recurso CSS personalizado do Elementor. Este recurso está disponível apenas em Elementor Pro; certifique-se de ter atualizado sua versão.
Etapa 1: adicionar widget de postagens
Vá para o seu editor Elementor e começaremos tudo do zero, então crie uma seção com uma única coluna.
Leia também: Como integrar o MailChimp com o Elementor
Em seguida, selecione o widget Postagens no painel de widgets e arraste-o e solte-o na área de edição. Depois de adicionar o widget Posts, você pode editar e estilizar o widget de acordo com suas preferências.
Observação: Certifique-se de já ter publicado artigos em seu site.
Etapa 2: adicionar o trecho de CSS
Depois de editar e estilizar o widget Postagens, adicionaremos um efeito de foco em uma postagem individual adicionando o snippet de CSS simples. Nas configurações do widget Posts, vá para a guia avançado -> CSS personalizado. Copie o trecho de CSS abaixo e cole-o no campo CSS personalizado.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
O código acima selecionará o elemento post individual no widget Posts usando o seletor .élémentor-post e aplique a transformação CSS.
Se você está satisfeito com o efeito de foco usado, pode mantê-lo assim e salvar seu projeto, se desejar. Mas, se quiser personalizar a velocidade de transição e o valor da escala de transformação, você pode alterar o valor no snippet de CSS.
Observação: Transformar/ampliar é um efeito comum e popular usado em sites. Se você quiser saber mais sobre outros métodos de transformação de efeitos de foco, visite este página.
Descubra também: todos os seletores de widget Elementor no seguinte artigo
Obtenha o Elementor Pro agora !!!
Conclusão
Este artigo mostra como é fácil adicionar um efeito de foco a elementos de postagem individuais no widget de postagens do Elementor usando CSS personalizado.
A técnica que usamos para esse efeito é ( zoom-in ) que envolve 2D e alguns elementos pseudotransformados. Personalize e jogue com todos os estilos de efeitos de foco até encontrar o melhor efeito de foco para o seu site.
Aqui está! Acabamos de apresentar as melhores ferramentas para especialistas em Marketing via e-mail para Elementor. Se você tiver alguma dúvida sobre como usá-los, informe-nos dentro de 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.
...
