WordPress + Elementor (Core do Negócio)

1) Padrão de arquitetura: tema base + plugin de widgets

Regra principal: layout base no tema, funcionalidade no plugin.

• Tema base (ex.: Hello Elementor): estrutura visual geral, compatibilidade e estilo global leve.
• Plugin custom (ex.: Ridolfi Builder): widgets Elementor, integrações, lógica e componentes reutilizáveis.

Estrutura sugerida

ridolfi-builder/
├─ ridolfi-builder.php
├─ includes/
│  ├─ Plugin.php
│  └─ Elementor/
│     ├─ Elementor.php
│     └─ Widgets/
│        ├─ Hero.php
│        ├─ FAQ.php
│        ├─ Testimonials.php
│        └─ Pricing.php
├─ assets/
│  ├─ css/
│  └─ js/
└─ readme.md

2) Como criar widgets com repeater (FAQ, depoimentos, pricing)

Use Repeater Controls do Elementor para itens dinâmicos (listas de perguntas, cards de preço, depoimentos).

Padrão de implementação

• Definir campos do repeater (título, descrição, imagem, ícone, botão, etc.).
• Adicionar repeater ao controle principal do widget.
• No render(), iterar os itens e aplicar escaping.
• CSS escopado por classe prefixada (rb-).

Exemplo conceitual (FAQ)

$repeater = new \Elementor\Repeater();
$repeater->add_control('question', [...]);
$repeater->add_control('answer', [...]);

$this->add_control('faq_items', [
  'type' => \Elementor\Controls_Manager::REPEATER,
  'fields' => $repeater->get_controls(),
]);

// render()
foreach ($settings['faq_items'] as $item) {
  echo '<h3>' . esc_html($item['question']) . '</h3>';
  echo '<p>' . wp_kses_post($item['answer']) . '</p>';
}

3) Performance no Elementor (CLS, LCP, lazy load, CSS crítico)

Foco em Core Web Vitals

• CLS: reserve espaço para imagens/banners (width/height), evitar mudança de layout tardia.
• LCP: otimizar imagem principal (formato moderno, tamanho correto), evitar JS bloqueante no topo.
• INP/TBT: reduzir scripts desnecessários e bibliotecas pesadas.

Ações práticas

• Ativar lazy load para imagens não críticas.
• Usar CSS crítico no above-the-fold.
• Remover widgets/plugins não usados.
• Minificar CSS/JS e habilitar cache de página + object cache.
• Carregar assets de widget via get_style_depends() e get_script_depends().

4) Estrutura de projeto para agências (starter kit reutilizável)

Crie um “pacote-base” para todo novo cliente.

ridolfi-wordpress-stack/
├─ docker-compose.yml
├─ Caddyfile (ou nginx.conf)
├─ install.sh
├─ deploy.sh
├─ wordpress/
│  ├─ wp-content/
│  │  ├─ plugins/
│  │  │  └─ ridolfi-builder/
│  │  └─ themes/
│  │     └─ hello-elementor-child/
└─ docs/
   └─ runbook.md

Inclua no starter:

• WordPress + Elementor + tema base
• Plugin Ridolfi Builder pré-instalado
• Páginas-modelo e templates essenciais
• Script WP-CLI para provisionamento

5) Boas práticas para templates globais e design system

• Definir tokens: cores, tipografia, espaçamento, raio, sombra.
• Criar componentes padrão: botão, card, hero, seção CTA, FAQ.
• Usar templates globais no Elementor para cabeçalho/rodapé/blocos recorrentes.
• Padronizar nomenclatura de classes e widgets.
• Documentar tudo em um README operacional para o time.

6) Checklist de implementação (curto)

• ☑ Tema base definido (Hello Elementor + child opcional)
• ☑ Plugin Ridolfi Builder ativo
• ☑ Widgets base: Hero, FAQ, Testimonials, Pricing
• ☑ Repeater funcionando com escaping
• ☑ Assets por widget (sem carga global desnecessária)
• ☑ Métricas CWV revisadas (LCP/CLS)
• ☑ Starter kit versionado no Git