Junte o design em HTML feito com IA com os recursos prontos do WordPress: formulário, blog e avaliações do Google.
Passo 1
+
Você não começa do zero. Use o template que montamos no módulo anterior ou um dos três que você já tem salvos. Escolha o que mais combina com o cliente da aula.
Abra o HTML do template no seu editor de código para ter o arquivo em mãos antes de pedir as alterações para a IA.
Passo 2
+
Cole o código do template na IA, peça as alterações que o cliente precisa e mande a IA devolver o resultado dividido em quatro blocos: cabeçalho, rodapé e duas partes de conteúdo.
Prompt para alterar e dividir em 4
+
Prompt: Site híbrido em 4 blocos
Atue como um desenvolvedor web front-end sênior, especialista em Elementor e WordPress.
Vou te enviar o código HTML completo de um template de site. Faça o que eu pedir e me devolva o resultado dividido em 4 blocos separados, prontos para colar no Elementor.
1. Alterações que eu quero: [descreva as mudanças de texto, cores, imagens e seções]
2. Divida o código final em 4 partes, cada uma em seu próprio bloco de código:
Bloco 1 - CABEÇALHO (logo e menu), para o template de Cabeçalho do Elementor.
Bloco 2 - RODAPÉ, para o template de Rodapé do Elementor.
Bloco 3 - CONTEÚDO PARTE 1 (as primeiras seções da página), para um widget HTML.
Bloco 4 - CONTEÚDO PARTE 2 (as seções seguintes), para outro widget HTML.
3. NÃO gere as seções de formulário de contato, blog e avaliações. No lugar de cada uma, deixe só um comentário indicando onde ela entra, porque essas partes vou montar com os widgets prontos do WordPress.
4. Regras técnicas de cada bloco para funcionar dentro do Elementor:
- Cada bloco independente, com o CSS dele junto.
- Prefixo único de classe em cada bloco para o estilo não vazar.
- Sem !important e sem reset universal de margin e padding. Use só box-sizing.
- Wrapper externo transparente, sem background nem border-radius.
- Nada de tags details, summary ou nav. Use div com classe alternada por JavaScript.
- SVG sempre inline, nunca em base64.
- type="button" em todos os botões.
- Todo o JavaScript dentro de uma IIFE com uma trava para não rodar duas vezes.
Me devolva os 4 blocos separados e identificados.
O motivo de dividir em quatro: o cabeçalho e o rodapé vão para os templates de Cabeçalho e Rodapé do Elementor, que se repetem em todas as páginas. As duas partes de conteúdo entram em widgets HTML dentro da página. Assim cada pedaço fica no lugar certo e fácil de editar depois.
Passo 3
+
Agora é hora de colar cada bloco no lugar certo dentro do Elementor. Cada parte tem um destino.
Bloco 1 (cabeçalho): cole no template de Cabeçalho, no Construtor de Temas do Elementor.
Bloco 2 (rodapé): cole no template de Rodapé, no Construtor de Temas do Elementor.
Bloco 3 (conteúdo parte 1): cole em um widget HTML dentro da página.
Bloco 4 (conteúdo parte 2): cole em outro widget HTML dentro da página.
Passo 4
+
Aqui está o pulo do gato do site híbrido. Onde o WordPress já resolve, você usa o que está pronto, em vez de montar tudo na mão em HTML.
Formulário: use o widget de Formulário do Elementor. Ele envia e-mail de verdade e conecta com suas ferramentas, sem você programar o envio.
Blog: use o widget de Posts. Ele puxa os artigos do WordPress e se atualiza sozinho a cada publicação nova.
Avaliações do Google: use um plugin ou widget de avaliações. As estrelas e os comentários vêm direto do Google e se atualizam sem você mexer.
Essa é a ideia do site híbrido. O design bonito e único fica no HTML feito com a IA, e as partes que precisam funcionar de verdade e se atualizar sozinhas ficam com os widgets prontos do WordPress. Você entrega mais rápido e com menos manutenção.
Passo 5
+
Template escolhido e baixado.
IA fez as alterações e devolveu o HTML dividido em 4 blocos.
Cabeçalho e rodapé montados no Construtor de Temas.
As duas partes de conteúdo coladas nos widgets HTML.
Formulário, blog e avaliações do Google resolvidos com os widgets prontos.
Passo 6
+
Para deixar o site completo e no ar com qualidade, ainda faltam alguns acabamentos. Cada um tem um vídeo dedicado.