Fase 1 — Execução Detalhada · Comodare Móveis
Guia de Execução

Fase 1 — Design & Estrutura

Passo a passo completo · Do zero ao layout aprovado pelo cliente · 30 dias corridos

📅 D01 até Marco F1 WordPress + HostGator Elementor Pro WooCommerce Identidade Comodare
1
Ambiente
D01–D05
2
ID Visual
D05–D15
3
Home
D10–D25
4
Marco F1
D30
1
Configuração do Ambiente
Instalar e configurar toda a stack técnica antes de colocar a mão no design
D01 – D05
WordPress Instalar WordPress no HostGator ~30 min
Acessar cPanel da HostGator e usar o instalador automático para subir o WordPress no domínio do cliente.
Acessar cPanel → seção WordPress → Instalar
Definir: idioma Português (Brasil), usuário admin e senha forte
Apontar instalação para o domínio do cliente (raiz, sem subpasta)
Logar no painel: seudominio.com.br/wp-admin
Configurações gerais → Timezone: America/Manaus
Configurações → Leitura → desmarcar "Incentive mecanismos de busca a não indexar este site"
Permalinks → Estrutura personalizada: /%postname%/ → Salvar
Deletar posts, páginas e plugins padrão que vieram na instalação (Hello World, Sample Page, Akismet, Hello Dolly)
Elementor Pro Instalar tema Hello Elementor + Elementor Pro ~45 min
O Hello Elementor é o tema mais leve para usar com Elementor — sem bloat, sem CSS extra desnecessário.
Aparência → Temas → Adicionar novo → buscar "Hello Elementor" → Instalar → Ativar
Plugins → Adicionar novo → Upload → subir o arquivo .zip do Elementor (versão free, da biblioteca WordPress) → Ativar
Plugins → Adicionar novo → Upload → subir o arquivo .zip do Elementor Pro (licença comprada) → Ativar
Ativar licença do Elementor Pro: Elementor → Licença → colar a chave de ativação
Elementor → Configurações → Experimental → ativar Flexbox Container (layout moderno)
Elementor → Configurações → Integrações → confirmar que o WooCommerce está detectado
WooCommerce Configurar WooCommerce (modo catálogo) ~30 min
O WooCommerce já vem pré-instalado no Plano Turbo. Configurar só o essencial — sem gateway de pagamento nesta fase.
Ativar WooCommerce (se não estiver ativo) → rodar o assistente de configuração inicial
País: Brasil · Moeda: Real Brasileiro (R$) · Separador decimal: ,
WooCommerce → Configurações → Produtos → desativar avaliações de produtos (não usar ainda)
WooCommerce → Configurações → Contas e Privacidade → desmarcar "habilitar registro"
WooCommerce → Configurações → Pagamentos → não ativar nenhum gateway nesta fase
Criar as 22 categorias de produtos (Aparador, Armário de Cozinha, Closet… etc.) — só estrutura, sem produtos ainda
Modo catálogo O WooCommerce funciona como vitrine — o "checkout" vai ser o WhatsApp. Não precisa configurar frete, impostos ou pagamento online agora.
Plugins Instalar e configurar todos os plugins da stack ~1h 30min
Instalar cada plugin, ativar e fazer a configuração inicial. Não precisa configurar tudo agora — só o essencial para não travar o desenvolvimento.
💬
Cart to WhatsApp
Gratuito · Carrinho → WhatsApp
⚡
WP Rocket
Pago · Cache e performance
🔍
RankMath SEO
Gratuito · SEO completo
🖼️
ShortPixel
Gratuito · Compressão WebP
🛡️
Wordfence
Gratuito · Segurança
💾
UpdraftPlus
Gratuito · Backup automático
📊
PixelYourSite
Gratuito · Meta Pixel
📈
MonsterInsights Lite
Gratuito · Google Analytics 4
Cart to WhatsApp: instalar → ativar → colocar o número do WhatsApp do showroom (configurar atendentes depois na Fase 2)
WP Rocket: instalar .zip → ativar licença → manter configurações padrão por enquanto (configurar performance na Fase 3)
RankMath: instalar → rodar assistente → selecionar tipo de site "Loja online" → conectar Google Search Console (se já disponível)
ShortPixel: instalar → inserir chave de API gratuita → ativar compressão WebP automática
Wordfence: instalar → ativar → aceitar os termos → ativar proteção básica (scan pode rodar depois)
UpdraftPlus: instalar → configurar backup automático semanal → conectar Google Drive do cliente
PixelYourSite + MonsterInsights: instalar ambos → deixar para configurar com os IDs reais do cliente na Fase 2
Cloudflare Configurar Cloudflare + SSL ~45 min
Cloudflare fica entre o visitante e a hospedagem, entregando o site mais rápido e protegendo contra ataques.
Criar conta em cloudflare.com → Adicionar site → digitar o domínio do cliente
Selecionar plano Free → Cloudflare vai varrer os registros DNS automaticamente
Apontar os nameservers do domínio para os servidores do Cloudflare (fazer no painel do Registro.br ou onde estiver o domínio)
Aguardar propagação DNS (normalmente 15 min a 2 horas)
Cloudflare → SSL/TLS → modo Full (strict)
Confirmar que o site abre com https:// sem erros de certificado
WordPress → Configurações → Geral → atualizar URL do site para https://
Atenção: Se o modo SSL estiver em "Flexible" no Cloudflare mas o servidor já tem certificado, pode gerar loop de redirecionamento. Use sempre Full (strict) com a HostGator.
2
Identidade Visual Aplicada no Elementor
Configurar cores globais, tipografia, logo, favicon e padrão visual da marca Comodare
D05 – D15
Elementor Configurar cores globais do Kit de Site ~30 min
O Kit de Site é o "design system" do Elementor — tudo que configurar aqui afeta todo o site automaticamente.
Azul Principal
#1484B6
Azul Escuro
#0C5E85
Azul Claro
#78B8D4
Cinza Grafite
#5D5D5D
Preto Texto
#14202B
Fundo Suave
#F4F8FB
Elementor → hamburger menu (≡) → Kit de Site → Configurações globais → Cores
Renomear as cores padrão e inserir os hex da Comodare conforme a paleta acima
Definir Cor de Destaque (Accent): #1484B6
Definir Cor de Texto primário: #14202B
Definir Cor Secundária: #0C5E85
Confirmar que as cores aparecem na paleta rápida ao editar qualquer elemento
Elementor Configurar tipografia global (DM Sans) ~20 min
DM Sans é a fonte oficial do manual de identidade visual da Comodare — humanista, moderna e legível em telas.
Kit de Site → Tipografia → editar cada estilo tipográfico
Fonte primária (corpo): DM Sans · Peso: 400 · Tamanho: 15–16px
Título H1: DM Sans · Peso: 800 · Tamanho: 42–48px · Letter-spacing: -0.5px
Título H2: DM Sans · Peso: 700 · Tamanho: 30–36px
Título H3: DM Sans · Peso: 700 · Tamanho: 20–24px
Botões: DM Sans · Peso: 700 · Tamanho: 14px · Maiúsculas: Nenhuma
DM Sans já vem disponível no Google Fonts dentro do Elementor — não precisa instalar manualmente
WordPress Configurar logo, favicon e identidade do site ~20 min
Solicitar ao cliente o logo em SVG ou PNG com fundo transparente antes desta etapa.
Elementor → Kit de Site → Configurações do Site → Logo do Site → subir o arquivo do logo (SVG preferencial)
Favicon: Personalização → Identidade do Site → Ícone do Site → subir versão quadrada do ícone Comodare (512×512px)
Título do site: "Comodare Móveis em MDF – Manaus"
Slogan: "Escolha os móveis para sua residência com um clique"
Material necessário do cliente: Logo em SVG ou PNG com fundo transparente (tamanho mínimo: 400px de largura). Se o cliente não tiver, você precisará criar ou solicitar com o designer antes de avançar.
Elementor Configurar estilos globais de botões e formulários ~25 min
Os botões da Comodare têm border-radius 32px (pílula arredondada) conforme o manual de identidade visual.
Kit de Site → Botões → Cor de fundo: #1484B6 · Cor do texto: #FFFFFF
Border-radius: 32px em todos os cantos (pílula arredondada)
Padding: 12px 28px (vertical / horizontal)
Hover: escurecer levemente — #0C5E85 (Azul Escuro)
Kit de Site → Formulários → campos com border-radius: 32px · borda cor: #D4EDF7
Criar uma página de teste → adicionar botão → confirmar que está com o estilo correto
3
Layout da Home + Header / Menu / Rodapé
Construir todas as seções da página principal e estrutura global do site
D10 – D25
Theme Builder Top Bar animada (acima do header) ~45 min
Faixa fina no topo com mensagens rotativas — "Entrega e Montagem Grátis · Showroom Manaus · Parcele em 12x" etc.
Elementor → Theme Builder → Adicionar novo → tipo: Header
Criar seção com fundo #0a4f70 (azul profundo) · altura: 36px · texto branco · fonte 12px
Usar widget HTML do Elementor para fazer o scroll horizontal com CSS animation (marquee)
Mensagens: "📍 Showroom em Manaus-AM" · "🚚 Entrega e Montagem Grátis" · "💳 Parcele em até 12x" · "⚡ Pronta Entrega"
Theme Builder Header: Logo + Busca + Menu + WhatsApp + Carrinho ~2h
Header fixo (sticky) que acompanha o scroll. Em mobile vira menu hambúrguer.
Fundo branco · sombra suave (box-shadow: 0 2px 8px rgba(0,0,0,0.08)) · sticky no topo
Coluna 1: Logo do site (widget Site Logo do Elementor Pro) · largura máx: 140px
Coluna 2 (centro/flex): campo de busca (widget Search do WooCommerce) · border-radius 32px · fundo #F4F8FB
Coluna 3 (direita): botão WhatsApp (verde #25D366 · ícone + texto "WhatsApp" · border-radius 32px)
Coluna 3: botão Carrinho (azul #1484B6 · ícone + badge com contador · border-radius 32px)
Nav (abaixo do header principal): links de categoria horizontais com scroll em mobile
Configurar menu no WordPress: Aparência → Menus → criar menu com links para categorias principais
Responsivo mobile: ocultar busca e texto dos botões · exibir ícones apenas + menu hambúrguer
Definir exibição: Exibir em Todo o Site → Publicar
Home Page Hero — Carrossel com CTAs ~1h 30min
Banner principal com slides rotativos, título, descrição e botões de ação. Primeira coisa que o visitante vê.
Criar página Home (WordPress → Páginas → Adicionar Nova → "Home") → Editar com Elementor
Definir como página inicial: Configurações → Leitura → Página inicial estática → selecionar "Home"
Seção hero: fundo gradiente #0a4f70 → #0C5E85 → #1484B6 · altura mínima: 520px
Grid 2 colunas: esquerda = texto + CTAs · direita = imagens decorativas empilhadas com rotação
Título: "Móveis planejados em MDF para o seu lar" · destaque em azul claro
CTA 1: "Ver Catálogo Completo" → fundo branco, texto azul escuro · CTA 2: "Falar pelo WhatsApp" → borda branca
Stats abaixo dos CTAs: "128+ produtos · 22 categorias · 8 anos de fabricação"
Mobile: colapsar para 1 coluna · imagens acima do texto · CTAs full-width
Home Page Grid de Produtos + Filtro de Categorias ~2h
A seção mais importante da home. Usar Elementor Pro + WooCommerce para montar o grid com filtros.
Strip de categorias (chips clicáveis): linha horizontal com scroll → usar widget Elementor + CSS para o scroll
Usar widget Products do Elementor Pro (WooCommerce Builder) → 4 colunas desktop · 2 colunas mobile
Personalizar o card de produto via Elementor: imagem, nome, preço, parcelas, botão "Adicionar" + botão WhatsApp
Adicionar plugin AJAX Product Filter for WooCommerce (gratuito) para filtro em tempo real por categoria
Paginação: 16 produtos por página · botões Anterior / Próximo
Botão "Adicionar ao Carrinho": border-radius 32px · azul · ícone de carrinho
Botão WhatsApp individual por produto: círculo verde · ícone WhatsApp
Home Page Seções: Categorias · Diferenciais · Sobre · Depoimentos ~3h
Seções secundárias da home — importantes para SEO e para construir confiança com o visitante.
Categorias por ambiente: 4 cards (Quarto, Cozinha, Escritório, Sala) · ícone + nome + lista de tipos · fundo #F4F8FB
Diferenciais: 4 cards em grid · ícone azul + título + descrição: Fabricação Própria · Entrega Grátis · Garantia · Atendimento
Seção Sobre: grid 2 colunas (imagem da fábrica + texto + lista de diferenciais + CTA WhatsApp)
Banner CTA: faixa full-width gradiente azul escuro · "Pronto para renovar sua casa? Faça um orçamento pelo WhatsApp"
Depoimentos: 3 cards · foto/avatar + nome + cidade + texto + estrelas · fundo #F4F8FB
FAQ (acordeão): 6 perguntas · usar widget Accordion do Elementor · borda azul quando aberto
Perguntas do FAQ: prazo de entrega · entrega grátis · medidas personalizadas · formas de pagamento · garantia · showroom
Theme Builder Rodapé completo ~1h
Rodapé global que aparece em todas as páginas — informações, links, contato e redes sociais.
Theme Builder → Footer → Novo → fundo: #0a4f70 (azul profundo)
Grid 4 colunas: Logo + Descrição + Redes Sociais · Categorias · Institucional · Contato
Coluna contato: endereço do showroom, telefone/WhatsApp, horário de funcionamento
Barra inferior: copyright · CNPJ · @comodaremoveismanaus · separada por borda sutil
Mobile: colapsar para 1 coluna · manter só o essencial · logo + links + copyright
Definir exibição: Todo o Site → Publicar
Theme Builder Botão flutuante do WhatsApp ~20 min
Botão fixo no canto inferior direito em todas as páginas — com opção de escolher atendente (Jéssica, Vilma, Geovana ou Showroom).
Configurar via Cart to WhatsApp ou widget HTML fixo no Theme Builder
Círculo verde (#25D366) · ícone WhatsApp · position: fixed · bottom: 20px · right: 20px · z-index: 999
Tooltip ao hover: "Fale com a gente!" → abre submenu com os 4 atendentes
Testar no celular — botão não deve sobrepor conteúdo importante
Revisão Responsividade e revisão geral da home ~2h
Testar em mobile, tablet e desktop antes de apresentar ao cliente. A maior parte dos acessos virá do celular.
Revisar no modo responsivo do Elementor: Desktop → Tablet (768px) → Mobile (375px)
Verificar que nenhum elemento ultrapassa a largura da tela (sem scroll horizontal)
Verificar espaçamentos, tamanhos de fonte e alinhamentos em cada breakpoint
Abrir no Chrome DevTools → simular iPhone 12/13 (390px) e Samsung Galaxy (360px)
Testar todos os links do menu e botões de WhatsApp
Verificar se o logo, favicon e título do site estão corretos na aba do navegador
Rodar uma verificação visual em mobile real (testar no próprio celular)
4
✅ Marco F1 — Aprovação do Design pelo Cliente
Apresentar o layout completo, coletar feedback e formalizar a aprovação antes de avançar para a Fase 2
D30 · Marco F1
Preparar a apresentação do layout
Antes de chamar o cliente, garantir que tudo está no ar e funcionando corretamente.
Confirmar que o site está acessível pelo domínio do cliente (sem avisos de segurança)
Testar a home completa em mobile e desktop uma última vez
Cadastrar pelo menos 5–8 produtos de exemplo para o grid ter conteúdo real na apresentação
Simular o fluxo de compra: adicionar produto ao carrinho → abrir drawer → clicar "Finalizar pelo WhatsApp"
Verificar se a página de produto individual está minimamente configurada (template Elementor)
Apresentar ao cliente (Meet ou presencial)
Mostrar o site navegando ao vivo — não por print. O cliente precisa sentir o produto funcionando.
Começar pelo celular — a maioria dos clientes da Comodare acessa pelo mobile
Navegar pela home completa de cima a baixo · mostrar todas as seções
Demonstrar o fluxo completo: escolher produto → adicionar carrinho → finalizar pelo WhatsApp
Mostrar o painel admin do WordPress — enfatizar a simplicidade de uso
Coletar feedback por escrito (WhatsApp ou e-mail) — máximo 48h para resposta
Aplicar ajustes e coletar aprovação formal
Máximo 2 rodadas de ajuste. Após a aprovação registrada (por escrito), a Fase 2 começa.
Aplicar ajustes de cores, textos ou layout conforme feedback do cliente
Apresentar versão revisada ao cliente — aguardar aprovação
Obter aprovação por escrito (mensagem de WhatsApp ou e-mail é suficiente)
Registrar a data de aprovação — esta é a data de início formal da Fase 2
Limite de revisões: O contrato prevê até 2 ciclos de ajuste por etapa. A partir da 3ª rodada de revisão de design, cobrar serviço adicional ou aplicar o Termo Aditivo.

🏁 Marco F1 concluído — Fase 1 entregue

Com o design aprovado pelo cliente, a Fase 1 está formalmente encerrada. A Fase 2 começa imediatamente, focando no cadastro de produtos, integração completa do WhatsApp e SEO técnico.

WordPress + WooCommerce no ar
Todos os plugins instalados e ativos
Cloudflare + SSL configurados
Identidade visual Comodare aplicada
Home completa e responsiva
Header + Menu + Rodapé globais
Carrinho → WhatsApp funcionando
Aprovação formal do cliente ✅
Guia de execução interno · Comodare Móveis · Fase 1 — Design & Estrutura · Pietro Agência · 2025