Projeto: evolua-suas-financas. Design system: DS-1-evolua-suas-financas-V2. 31 componentes do catálogo de 2026-10-22. Textos e imagens são de exemplo, neutros.
cabecalhoLogo do projeto (como imagem), menu e botão de ação. No celular o menu vira gaveta com botão, Esc e clique fora para fechar.
Elementor: Cabeçalho do Theme Builder com Menu de Navegação (Nav Menu) JS: sim README
gradeColunas responsivas (2, 3, 4, automáticas ou assimétricas) que viram uma coluna no celular.
Elementor: Seção interna / Grade do Contêiner (Inner Section, Grid) JS: não README
Texto curto da primeira coluna.
Texto curto da segunda coluna.
Texto curto da terceira coluna.
Grade de duas colunas com alinhamento vertical ao centro, comum em seções de explicação.
rodapeLogo do projeto, frase curta, até três colunas de links e linha final com dados legais. Fundo claro ou fundo da marca.
Elementor: Rodapé do Theme Builder (Footer) JS: não README
secaoBloco de página com o respiro vertical do DS e conteúdo centralizado na largura máxima. Variações de fundo (página, superfície, marca e modos do DS).
Elementor: Seção / Contêiner (Section, Container) JS: não README
Texto de exemplo da seção. A seção só cuida do espaço e do fundo: o conteúdo pode ser uma grade, um cartão, um formulário ou texto corrido.
Use para quebrar o ritmo da página ou destacar uma chamada. As cores de texto e de botão se ajustam sozinhas.
Botão na seção de marcabotaoBotão de ação em quatro estilos (primário, secundário, contorno e link), com tamanhos e grupo de botões.
Elementor: Botão (Button) JS: não README
caixa-iconeÍcone com título e texto curto, solto ou em cartão, vertical ou horizontal. Também serve de cartão simples.
Elementor: Caixa de Ícone (Icon Box) JS: não README
divisorLinha de separação (inteira ou curta de destaque) e espaço vazio em três tamanhos do DS.
Elementor: Divisor (Divider) e Espaçador (Spacer) JS: não README
Texto antes do divisor padrão.
Texto antes do divisor curto de destaque.
Texto antes de um espaçador grande (sem linha).
Texto depois do espaçador.
imagemImagem responsiva com proporção fixa opcional, cantos e sombra do DS e legenda.
Elementor: Imagem (Image) JS: não README
lista-iconesLista com ícone como marcador, alinhado à primeira linha, em uma ou duas colunas.
Elementor: Lista de Ícones (Icon List) JS: não README
titulo-secaoCabeça de seção com sobretítulo, título (com uma palavra opcional na fonte de destaque) e subtítulo.
Elementor: Título (Heading) + Texto (Text Editor) JS: não README
Sobretítulo da seção
Subtítulo que explica em uma frase o que a pessoa vai encontrar nesta parte da página.
Variação centralizada
Bom para seções de depoimentos, preços e perguntas.
heroAbertura da página com o h1, promessa, um ou dois botões, nota de apoio e imagem ao lado, centralizada ou de fundo.
Elementor: Seção de topo com Título, Texto, Botão e Imagem (ou template Hero) JS: não README
Para quem quer um resultado claro
Subtítulo que explica como a promessa acontece e o que a pessoa recebe ao seguir em frente.
Nota de apoio curta, como a garantia ou o número de alunos.
hero-videoAbertura com vídeo mudo em loop atrás do texto, camada da cor da marca para contraste e botão de pausa. No celular, com economia de dados ou com movimento reduzido, mostra só a imagem de capa.
Elementor: Seção com Fundo de Vídeo (Background Video) JS: sim README
Subtítulo curto. O vídeo é ambiente: a mensagem precisa funcionar sem ele.
abasConteúdo dividido em abas com teclado completo (setas, Home, End). Linha, pílulas ou vertical no computador. Sem JS, mostra todos os painéis.
Elementor: Abas (Tabs) JS: sim README
Texto da primeira aba. Cada painel pode ter qualquer conteúdo: texto, lista, imagem ou cartões.
Texto da segunda aba.
Texto da terceira aba.
alternadorChave de dois estados com rótulos clicáveis que mostra um conteúdo e esconde outro em qualquer lugar da página (preço mensal ou anual, turma presencial ou on-line).
Elementor: Alternador de Conteúdo (Content Switcher) / chave de preço mensal e anual JS: sim README
R$ 00,00 por mês, sem fidelidade. R$ 00,00 por ano, com desconto.
carrosselFaixa de slides com botões, pontos, setas do teclado e arraste nativo. Um ou vários por vista, passagem automática opcional com pausa. Também é o motor dos slides de depoimentos.
Elementor: Carrossel de Imagens (Image Carousel) e Slides JS: sim README
contadorNúmeros grandes com rótulo que sobem até o valor quando aparecem na tela. Formato brasileiro, prefixo, sufixo e casas decimais.
Elementor: Contador (Counter) JS: sim README
contagem-regressivaDias, horas, minutos e segundos até um prazo real, com texto para leitor de tela e mensagem de encerramento automática.
Elementor: Contagem Regressiva (Countdown) JS: sim README
As inscrições fecham em
As inscrições fecham em 31 de dezembro de 2026, às 23h59.
As inscrições desta turma estão encerradas.
modalJanela sobre a página com <dialog> nativo: abre por botão ou sozinha depois de alguns segundos (uma vez por visita), fecha por botão, Esc ou clique fora.
Elementor: Pop-up (Popup Builder) JS: sim README
sanfonaItens com título que abrem e fecham deslizando. Um aberto por vez (sanfona) ou vários (alternância do Elementor). Funciona sem JS.
Elementor: Sanfona (Accordion) e Alternância (Toggle) JS: sim README
Conteúdo do primeiro item. Pode ter parágrafos, listas, imagens e links.
Conteúdo do segundo item.
Conteúdo do terceiro item.
depoimentos-slidesDepoimentos em faixa deslizante: um por vista no celular, dois no tablet e três no computador.
Elementor: Carrossel de Depoimentos (Testimonial Carousel) JS: não README
Primeiro depoimento de exemplo, curto e direto, contando um resultado.
Cliente umProfissão ou cidade
Segundo depoimento de exemplo, um pouco mais longo para mostrar que os cartões ficam com a mesma altura na faixa.
Cliente doisProfissão ou cidade
Terceiro depoimento de exemplo.
Cliente trêsProfissão ou cidade
Quarto depoimento de exemplo, para haver o que passar no computador.
Cliente quatroProfissão ou cidade
botao-whatsappBotão fixo no canto da tela que abre a conversa no WhatsApp com mensagem inicial. Com texto no computador, só ícone no celular. Sem JS.
Elementor: Botão flutuante / Botão de Chat (Floating Buttons, Click to Chat) JS: não README
precoCartões de plano com nome, descrição, preço (com "de/por" opcional), parcelas, itens inclusos e não inclusos, botão e selo de destaque. Um cartão sozinho ou vários lado a lado.
Elementor: Tabela de Preços (Price Table) JS: não README
Para quem quer começar com o básico.
De R$ 000 por
R$00/mês
ou R$ 000 à vista
Mais escolhido
Para quem quer o acompanhamento inteiro.
R$00/mês
ou 12x de R$ 00,00
ctaFaixa ou cartão com título, frase e botão. Fundo da marca, fundo da página ou cartão com barra de destaque.
Elementor: Chamada para Ação (Call to Action) JS: não README
Uma frase curta que lembra o resultado e tira a última dúvida antes do clique.
depoimentoCartão com a fala do cliente, nota opcional, foto, nome e contexto. Serve solto, em grade ou dentro dos slides de depoimentos.
Elementor: Depoimento (Testimonial) JS: não README
Texto do depoimento de exemplo. Aqui entra a fala do cliente contando o que mudou depois de participar, com as palavras dele.
Nome do clienteProfissão ou cidade
Variação em destaque, com a barra da cor de acento. Use em um depoimento só por seção.
Outro clienteProfissão ou cidade
formularioFormulário em HTML puro com rótulos visíveis, validação em português, aceite de privacidade, armadilha contra robôs e trava: não envia nada até ganhar um destino (mailto, serviço de formulário ou script PHP da hospedagem).
Elementor: Formulário (Form) JS: sim README
garantiaBloco com selo desenhado em CSS (escudo + número de dias), título e condição da garantia. Sem imagem de selo pronta.
Elementor: Caixa de Ícone ou Imagem com selo de garantia (montagem manual) JS: não README
faqTítulo da seção ao lado (ou acima) das perguntas em sanfona, com dados estruturados FAQPage opcionais gerados das próprias perguntas.
Elementor: Sanfona com Schema de FAQ (Accordion com FAQ Schema) JS: sim README
Não achou sua dúvida? Fale com a gente.
Resposta curta e direta para a primeira pergunta.
Resposta para a segunda pergunta, que pode ter mais de um parágrafo.
Segundo parágrafo da resposta.
Resposta para a terceira pergunta.
prova-socialGrade de logos de clientes, parceiros ou imprensa, como imagens, com frase curta acima. Opção de logos em cinza que ganham cor no passar do mouse.
Elementor: Carrossel de Logos / Galeria de Imagens com logos (Logo Grid) JS: não README
galeriaGrade de miniaturas quadradas; clique abre a foto grande numa caixa escura com legenda, contagem, setas e teclado.
Elementor: Galeria (Gallery / Basic Gallery) com Lightbox JS: sim README
mapaEndereço em texto, link para abrir no Google Maps e mapa incorporado que só carrega no clique.
Elementor: Google Maps JS: sim README
videoCapa do projeto com botão de play; o player do YouTube (sem cookies) ou do Vimeo só carrega no clique. Página fica leve e o visitante não é rastreado antes de querer ver.
Elementor: Vídeo (Video) com Sobreposição de Imagem (Image Overlay) JS: sim README