Este snippet de código adiciona um script JavaScript personalizado que altera a cor de fundo dos widgets de editor de texto do Elementor quando o usuário passa o mouse sobre eles.
add_action('elementor/frontend/after_enqueue_scripts', function() {
if (ElementorPlugin::$instance->preview->is_preview_mode()) {
return;
}
echo '
jQuery(document).ready(function($) {
$(".elementor-widget-text-editor").hover(
function() {
$(this).css("background-color", "#e0e0e0");
},
function() {
$(this).css("background-color", "#f0f0f0");
}
);
});
';
});
add_action('elementor/frontend/after_enqueue_scripts', function() { ... });: Adiciona uma função anônima ao gancho elementor/frontend/after_enqueue_scripts, que é acionado após o carregamento dos scripts do Elementor no front-end.if (ElementorPlugin::$instance->preview->is_preview_mode()) { return; }: Verifica se o Elementor está no modo de pré-visualização. Se estiver, a função retorna e o script personalizado não é aplicado. Isso evita a execução do script durante a edição no Elementor.echo '<script> ... </script>';: Adiciona o script JavaScript diretamente no front-end.
jQuery(document).ready(function($) { ... });: Espera até que o documento esteja pronto para executar o script.$(".elementor-widget-text-editor").hover(function() { ... }, function() { ... });: Adiciona um manipulador de eventos hover aos widgets de editor de texto do Elementor.
$(this).css("background-color", "#e0e0e0");: Altera a cor de fundo para #e0e0e0 quando o mouse está sobre o widget.$(this).css("background-color", "#f0f0f0");: Altera a cor de fundo de volta para #f0f0f0 quando o mouse sai do widget.Primeiro, substitua .elementor-widget-text-editor pelo seletor do widget que você deseja adicionar a funcionalidade JavaScript personalizada.
Esse código pode ser usado adicionando-o ao arquivo functions.php do seu tema ou, preferencialmente, em um plugin específico para o site. Utilizar um plugin para essas customizações mantém o código organizado e seguro contra atualizações do tema.
Este snippet permite que você adicione um efeito de mudança de cor de fundo aos widgets de editor de texto do Elementor quando o usuário passa o mouse sobre eles. Ele também inclui uma verificação para garantir que o script não seja executado durante a pré-visualização no editor do Elementor, garantindo uma melhor experiência de edição.
Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes!
Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!
