Precisa adicionar efeito de foco no Elementor via CSS personalizado?

O Elementor possui um recurso integrado para adicionar um efeito de foco a um elemento (cobrimos isso em um de nossos artigos. Embora o recurso seja útil o suficiente, ele tem uma desvantagem. Você só pode adicionar um efeito de foco a ele. Uma seção, uma coluna, um widget de imagem, um widget de botão e um widget de Postagens.

Leia também: Como instalar o Elementor no WordPress

O recurso de efeito de foco embutido do Elementor não permite adicionar efeito de foco a outros widgets, como o widget Editor de Texto, widget de Título, etc. Outra desvantagem é que você só pode adicionar um efeito de foco muito básico.

Existe alguma outra opção para adicionar efeito de foco no Elementor?

Sim existe. Você pode adicionar efeito de foco no Elementor via CSS customizado. Mas para adicionar CSS personalizado, você precisa usar o Elementor Pro, pois o CSS personalizado está disponível apenas no Elementor Pro.

Adicionando um efeito de foco no Elementor via CSS personalizado

Antes de começar, vamos dar uma olhada no exemplo de efeitos de foco criados por meio de CSS customizado.

Ao contrário do efeito de foco embutido do Elementor, você pode usar este método para adicionar um efeito de foco a qualquer elemento no Elementor. Seja uma seção, coluna ou widget (todos os widgets).

Neste exemplo, mostraremos como adicionar um efeito de ponto a uma coluna.

Primeiro, clique na alça da coluna para alternar para o painel de configurações da coluna. Uma vez lá, vá para a guia avançado e abra o bloco Personalizadas APF e cole o seguinte código CSS.

seletor: hover {transição: all .2s easy-in-out; transformar: escala (1.1); cursor: ponto; índice z: 1; }

Voilà.

No código acima, estamos usando a propriedade CSS transform () para adicionar o efeito de foco. O tipo de transformação que estamos usando neste exemplo é a escala, com uma duração de 1,1 segundos.

Existem 4 outros tipos de transformação que você pode usar com:transform

  • Matriz
  • traduzir
  • Rodar
  • enviesado

Se você quiser usar um estilo de transformação diferente, basta substituir o valor de transformar no código CSS acima.

Você pode ler esta página para saber mais sobre a transformação CSS.

Você pode seguir a mesma rota para adicionar um efeito de foco a outros elementos.

Para adicionar um efeito de ponto a uma seção, você pode clicar na alça da seção e ir para a guia avançado e abra o bloco CSS customizado.

adicionar efeito de foco no Elementor via CSS personalizado

Para adicionar um efeito de foco a um widget, você pode clicar na alça do widget e ir para a guia novamente. Avançado, então abra o bloco CSS customizado.

Outros plug-ins premium adicionais do WordPress 

Descubra também outros WordPress plugins premium que otimizam o desempenho do seu blog ou site WordPress.

1. Popup de vendas ao vivo

Pop-up de vendas ao vivo é outro WordPress Plugin notificação com várias guloseimas que você pode transformar em vantagem. Em primeiro lugar, ele tem a possibilidade exibir uma janela pop-up quando alguém conclui um pedido. Plug-in de pop-up de vendas ao vivo wordpress

Em segundo lugar, a janela pop-up de vendas em tempo real também pode exibir uma notificação quando uma pessoa simplesmente adiciona um item ao carrinho. E em terceiro lugar, você pode usar a ferramenta para aumentar o entusiasmo de um produto, mostrando quantos visitantes visualizaram o artigo.

Com as últimas tendências da web, você pode esperar que o Live Sales Popup seja exibido com beleza em todos os dispositivos e navegadores. Quanto ao layout pop-up, você pode personalizá-lo nos mínimos detalhes.

Leia: Como corrigir um alerta de segurança em seu blog WordPress

Os outros recursos do Live Sales Popup são mais de trinta animações, sons, contagens regressivas e posicionamento personalizado. Ele também funciona para notificações falsas e permite que você o configure apenas para páginas específicas onde deseja que a notificação execute sua tarefa.

Descarregar | Demo | hospedagem na web

2. Foodify

Alimentar é a maneira mais rápida e fácil para os clientes pedirem comida em uma loja. É inteiramente responsivo e inclui recursos adicionais como imagem, opção de busca, informações do produto. Menu de comida do restaurante Foodlify para comércio de woocommerce

Também adiciona botões à cesta para melhorar a experiência do usuário. Esta extensão WooCommerce é uma solução de pedidos rápida e abrangente que pode ser adicionada a qualquer site WooCommerce.

Aqui para você 5 WordPress plugins para otimizar descrições de categorias e rótulos

Tem a vantagem de ser muito flexível e compatível com muitos plug-ins existentes no diretório do WordPress.

Descarregar | Demo | hospedagem na web

3. Visualizador de imagens panorâmicas e Mega Zoom

O plug-in Mega Zoom & Pan Image Viewer é um ótimo visualizador de imagens e navegador com um layout totalmente responsivo para exibir imagens grandes em seu blog WordPress.

Mega zoom pan wordpress plugin para zoom

É uma poderosa ferramenta desenhada para apresentar produtos (imagens de produtos em alta resolução. Ex: Roupas, automóveis, diagramas técnicos, etc.), visualizar mapas e todas as outras imagens, graças ao seu zoom, à sua função panorâmica, seus controles de navegação, sua barra de rolageme marcadores / pontos de acesso altamente personalizáveis.

Estes são 5 aplicativos de smartphone para proteger suas imagens e vídeos

Este plugin funciona muito bem no iOS (iPad, iPhone), Android e Windows mobile, etc. Ele também funciona em todos os navegadores modernos e navegadores mais antigos, como o IE7 ou IE8.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Aqui está ! É isso para este guia. Esperamos que este artigo tenha ajudado a adicionar o efeito de foco no Elementor por meio de CSS customizado. Você também pode ler nosso artigo sobre Como corrigir o bloqueio de renderização de JavaScript e CSS no WordPress.

No entanto, você também poderá consultar nossos Ressources, 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.

Se você tem um amigo ou um comentário, por favor, deixe na seção comentário. Na maioria das vezes compartilhe este artigo em suas diferentes redes sociais.

...