Tópico 8 — Elementor no WordPress

1. O que é o Elementor

O Elementor é um editor visual para WordPress que permite criar páginas com arrastar e soltar, sem necessidade de escrever código manualmente. Ele gera a estrutura visual de forma rápida, mas ainda depende do tema e das regras CSS globais do site.

2. Estrutura de Página no Elementor

O Elementor organiza o layout em três níveis hierárquicos:

3. Widgets mais utilizados

O Elementor inclui dezenas de widgets, mas os mais importantes para páginas institucionais e blogs são:

• Heading (títulos)
• Text Editor (blocos de texto)
• Image (imagens e banners)
• Button (botões)
• Icon List (listas com ícones)
• Spacer / Divider (espaçamentos)
• Form (formulários de contato)
• Posts / Loop Grid (listas automáticas de posts)

4. Relação entre Tema e Elementor

O Elementor não substitui o tema — ele funciona dentro dele. O tema controla o cabeçalho, rodapé, estilos globais e a hierarquia de templates, enquanto o Elementor cuida do corpo da página.

<?php
// functions.php
add_action('after_setup_theme', function(){
  add_theme_support('elementor');
});
?>

5. Templates e Modelos

O Elementor permite salvar estruturas de página como “Modelos” e reutilizá-las em outros locais. Isso é útil para padronizar blocos de chamadas, seções de contato e banners.

Modelos de Página → Layouts completos (Landing Pages)
Seções Salvas → Partes específicas (rodapés, heros, etc.)
Blocos Globais → Áreas dinâmicas usadas em várias páginas

6. Desempenho e Otimização

O uso excessivo de widgets e efeitos visuais pode gerar páginas pesadas. Algumas recomendações para manter o desempenho:

• Evite empilhar muitas seções e colunas desnecessárias.
• Compacte imagens antes do upload.
• Desative widgets que não estão em uso (em Elementor → Configurações → Experimentos).
• Habilite a opção “Carregar CSS e JS de forma otimizada”.
• Use cache de página e plugins de otimização como WP Rocket ou LiteSpeed Cache.

7. Integração com Código Personalizado

Mesmo com o editor visual, é possível inserir código HTML e CSS personalizados quando necessário.

<div class="banner-destaque">
  <h2>Promoção Especial</h2>
  <p>Descontos em todos os produtos desta semana.</p>
</div>

<style>
.banner-destaque {
  background:#10151d;
  padding:30px;
  border-radius:10px;
  color:#fff;
  text-align:center;
}
.banner-destaque h2 {
  margin:0 0 10px;
}
</style>

8. Elementor e Redux

Para projetos que usam Redux Framework, é possível criar painéis personalizados no admin e integrá-los ao Elementor através de shortcodes ou widgets customizados.

<?php
// functions.php
function matilha_chamada_redux(){
  $titulo = get_option('redux_demo')['titulo_banner'];
  return '<h2>'.$titulo.'</h2>';
}
add_shortcode('matilha_banner', 'matilha_chamada_redux');
?>

9. Boas Práticas Gerais

• Centralize cores e fontes no tema, não no Elementor.
• Reaproveite seções salvas para consistência visual.
• Limite o uso de animações — priorize carregamento rápido.
• Verifique a responsividade sempre no modo tablet e mobile.
• Evite CSS inline; use classes globais no tema.