Adicionou um acordeão no Elementor, preencheu a secção de FAQ, guardou a página e reparou que o primeiro item aparece expandido. Não foi você que o abriu. Mas o Elementor decidiu por si. Este comportamento está programado no widget e não pode ser alterado nas definições. Para uma landing page com uma estrutura limpa, isto parece desleixado e, se o primeiro bloco for pesado, quebra o ritmo visual de toda a página.

Este problema existe há anos. A documentação oficial afirma diretamente: «The first item of the Accordion widget is expanded on page load.» É assim. Mas não tem de ficar a olhar para um acordeão forçosamente expandido. Existem quatro soluções e cada uma inclui instruções abaixo.

Abaixo estão métodos para fechar o acordeão do Elementor por defeito: desde um snippet de 30 segundos até alternativas nativas e addons com uma caixa de verificação na interface. Estes métodos foram testados no Elementor 3.27-4.2 (Free e Pro) e funcionam em desktop e mobile.

💡 Visão geral rápida:

• Insira um snippet de JavaScript num widget HTML ou em Código Personalizado e o acordeão fechará 100 ms após o carregamento
• Substitua o Acordeão pelo Toggle, um widget nativo do Elementor onde todos os separadores estão fechados de raiz
• Para minimalistas: uma regra CSS esconde o primeiro elemento sem uma única linha de JavaScript
• Instale The Plus Addons ou Essential Addons e obtenha uma opção nativa «First tab open» diretamente nas definições do widget

Método 1: snippet JavaScript, universal

O método mais fiável. O Elementor adiciona a classe elementor-active ao primeiro item do acordeão no carregamento. Só precisa de esperar pela renderização e remover esta classe.

Um snippet em JavaScript puro, sem jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

O atraso de 100 milissegundos do setTimeout é crítico. Sem ele, o script é executado antes de o Elementor terminar de inicializar o acordeão e as classes simplesmente não serão removidas. Em fornecedores de alojamento lentos ou páginas com uma dúzia de widgets, aumente para 300-500 ms. Os utilizadores do Elementor confirmam no fórum: o método é estável até à versão 4.2.

Onde inserir. Duas opções. Primeira, widget HTML: arraste-o diretamente para cima do acordeão no editor e cole o snippet. O código só será executado nessa página específica e não carregará onde não houver acordeão. Segunda, Elementor → Código Personalizado no painel de administração do WordPress: crie uma entrada, selecione Localização body e publique. O código aplicar-se-á globalmente, o que é conveniente quando os acordeões estão espalhados por uma dúzia de páginas.

Se tiver vários acordeões e precisar de os fechar a todos, substitua querySelector por querySelectorAll e itere pela coleção:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Não funcionou à primeira? Quase sempre é um problema de temporização: aumente o atraso para 1000 ms.

Método 2: widget Toggle em vez de Acordeão

O método nativo mais simples é não lutar contra o acordeão, mas usar um widget diferente. O Elementor inclui duas ferramentas que parecem semelhantes, mas comportam-se de forma diferente: Acordeão e Toggle.

A diferença principal:

O Toggle é visualmente indistinguível do Acordeão: os mesmos títulos, os mesmos ícones de seta, a mesma animação. Mas todos os separadores estão fechados de raiz, sem necessidade de código. Abra o painel de widgets, encontre o Toggle, arraste-o para a página e adicione itens tal como no Acordeão. Pronto.

A única nuance: o Toggle permite expandir vários separadores ao mesmo tempo. Se a lógica de «um aberto, os restantes fechados» for importante, volte ao Método 1.

Método 3: CSS, minimalista

JavaScript parece excessivo? Feche o primeiro elemento com CSS puro:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

O primeiro seletor esconde o conteúdo do primeiro separador. O segundo remove a borda inferior do título, que parece um corte abrupto sem o conteúdo. Coloque o código na secção «Avançado → CSS Personalizado» do widget específico (para um acordeão em particular) ou em Aparência → Personalizar → CSS Adicional (globalmente).

Nota: o CSS não remove a classe elementor-active, apenas esconde visualmente o conteúdo. Na árvore DOM, o separador permanece «ativo». Isto não afeta a funcionalidade do site, mas se usar análises personalizadas para cliques no acordeão ou scripts de terceiros ligados à classe, o comportamento pode surpreendê-lo. Para a maioria dos cenários, este método funciona e é o mais leve.

Se o seu tema substituir os estilos do Elementor, aumente a especificidade:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Ainda não funcionou? O tema provavelmente usa o seu próprio JavaScript para forçar a expansão. Volte ao Método 1: o snippet JS é executado mais tarde e substitui qualquer comportamento do tema.

Método 4: addons com uma opção nativa

Alguns addons do Elementor adicionam uma opção «First tab open» ao Acordeão, um clique em vez de código. Duas opções comprovadas:

The Plus Addons for Elementor. Expande o Acordeão padrão com a opção Default Open Tab → None, mantendo todos os separadores fechados. A versão gratuita é suficiente. Como bónus, obtém acordeões aninhados, ícones da biblioteca, shortcodes e modelos do Elementor dentro dos separadores. Página no WordPress.org.

Essential Addons for Elementor. Dois milhões de instalações ativas. O Acordeão deste addon também começa com os separadores fechados: as opções Accordion State e Enable FAQ Schema estão diretamente nas definições do widget. Se o Essential Addons já estiver instalado para outros widgets (Advanced Data Table, Filterable Gallery), não é necessária instalação adicional. Página no WordPress.org.

A desvantagem é óbvia: arrastar um plugin com mais de 100 widgets para uma opção é um exagero. Mas se o addon já estiver na sua configuração, obtém uma solução com um clique.

⁉️🤔 Perguntas frequentes

Porque é que o Elementor não adiciona uma opção ao Acordeão padrão?

Os developers não deram uma razão exata. Com base nas discussões no repositório GitHub do Elementor, a equipa considera o comportamento de «primeiro separador aberto» correto para acessibilidade. Os pedidos de funcionalidade estão pendentes desde 2018. A prioridade de desenvolvimento mudou para funcionalidades de IA, contentores Flexbox e desempenho. Até que uma opção apareça, vote na issue no GitHub e use o snippet do Método 1.

O script não funciona em mobile. O que devo fazer?

Em telemóveis e tablets, o Elementor usa a mesma marcação, mas a renderização é mais lenta: processadores mais fracos, mais pedidos assíncronos. Aumente o atraso do setTimeout para 500-1000 ms. Mover o snippet para o footer através do hook wp_footer também ajuda: o script é executado em último lugar, depois de todos os estilos e marcação do Elementor. Em desktop não há diferença, mas em mobile é notório.

Posso usar uma versão jQuery?

Sim, mas não recomendamos. Desde a versão 3.0, o Elementor mudou para JavaScript nativo no frontend. O snippet vanilla do Método 1 pesa cerca de 200 bytes, comparado com 87 KB do jQuery (minificado) e não depende do carregamento da biblioteca. Se o seu tema ou outros plugins já carregarem jQuery, não há diferença. Mas para temas modernos em JavaScript puro, como o Hello Elementor, a opção nativa é melhor: menos dependências, maior velocidade.

O método CSS não funciona; o primeiro item ainda está visível.

O seu tema substitui os estilos do Elementor com prioridade mais alta ou usa JS para forçar a expansão. O CSS é impotente neste cenário: o script do tema é executado mais tarde e reabre o separador. Apenas o snippet JS do Método 1 resolve o conflito cronologicamente: é executado em último lugar e assume o controlo.

O snippet funciona com temas personalizados e temas filho?

Sim. O snippet opera sobre as classes do próprio Elementor: .elementor-accordion-item, .elementor-tab-title e .elementor-tab-content. Estas não dependem do tema. Testámos no Hello Elementor, Astra, GeneratePress e Kadence: funciona de forma idêntica em todos. A exceção são temas que substituem completamente a marcação dos widgets do Elementor através de filtros (raro, principalmente em pacotes premium como o Avada).

Acordeão ou Toggle: qual escolher

O Toggle resolve o problema sem código, mas permite que os utilizadores expandam várias secções ao mesmo tempo. Para uma página de FAQ ou secção de referência, isto é até uma vantagem: os visitantes veem todas as respostas em simultâneo. O Toggle é nativo, rápido e não requer a manutenção de um snippet quando o Elementor é atualizado.

Se a lógica de «um aberto, os restantes fechados» for essencial, use o Acordeão e o JavaScript do Método 1. O snippet de quatro linhas funciona de forma fiável, não depende da versão do Elementor e resolve o problema por completo.

Comece pela opção mais simples: abra o editor, substitua o Acordeão pelo Toggle e verifique se o comportamento lhe convém. Se não, volte ao snippet. Cinco minutos e o acordeão fica exatamente como pretendia.