06/07/2024

Adicionar CSS Personalizado a um Widget Específico no Elementor

add_action('elementor/frontend/after_enqueue_styles', function() {
    if (ElementorPlugin::$instance->preview->is_preview_mode()) {
        return;
    }

    echo '<style>
        .elementor-widget-text-editor {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 5px;
        }
    </style>';
});

Como funciona:

1. Ação de Estilos do Elementor:
   • add_action('elementor/frontend/after_enqueue_styles', function() { ... });: Adiciona uma função anônima ao gancho elementor/frontend/after_enqueue_styles, que é acionado após o carregamento dos estilos do Elementor no front-end.
     
2. Verificação do Modo de Pré-visualização:
   • 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 os estilos personalizados não são aplicados. Isso evita a aplicação dos estilos durante a edição no Elementor.
     
3. Estilos Personalizados:
   • echo '<style> ... </style>';: Adiciona os estilos CSS diretamente no front-end.
     • .elementor-widget-text-editor { ... }: Aplica estilos aos widgets de editor de texto do Elementor.
       • background-color: #f0f0f0;: Define a cor de fundo para #f0f0f0.
       • padding: 20px;: Define um padding de 20 pixels.
       • border-radius: 5px;: Define bordas arredondadas com um raio de 5 pixels.

Instruções de Uso

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.

Conclusão

Este snippet permite que você adicione estilos personalizados aos widgets de editor de texto do Elementor no front-end do seu site, melhorando a aparência desses widgets. Ele também inclui uma verificação para garantir que os estilos não sejam aplicados durante a pré-visualização no editor do Elementor, garantindo uma melhor experiência de edição.