Templates

Sistema de templates HTML com versionamento, fork, tradução, componentes e preview em tempo real.

Visão Geral

O sistema de Templates controla toda a estrutura visual dos sites da plataforma. Cada template define o HTML do header, body e footer, além de CSS e JavaScript customizados.

Existem dois níveis de gestão:

Master
Templates globais criados pelo administrador da plataforma. Disponíveis para todos os tenants como base.
Tenant
Cópias personalizadas (forks) que cada site pode editar independentemente, com versionamento e rollback.
Quando um tenant seleciona um template global, o sistema cria automaticamente uma cópia (fork) para ele. A partir daí, o tenant edita sua cópia sem afetar o original.

Estrutura do Template

Cada template é composto por 5 partes editáveis:

ParteDescrição
Header HTML Cabeçalho do site — navbar, logo, menus de navegação, busca, carrinho. Aparece em todas as páginas.
Body HTML Estrutura do conteúdo principal. Deve conter o placeholder [[CONTENT]] que será substituído pelo conteúdo real de cada página.
Footer HTML Rodapé do site — links, newsletter, redes sociais, copyright. Aparece em todas as páginas.
CSS Estilos customizados do template. Aceita variáveis Blade (ex: {{ $primaryColor }}), compiladas com os dados reais do tenant.
JavaScript Scripts customizados para interatividade (menus, animações, etc.).

Placeholder de Conteúdo

O [[CONTENT]] no Body é obrigatório. Quando o site é renderizado, esse placeholder é substituído pelo HTML real da página (vindo do Page Builder ou do editor WYSIWYG).

<main class="container py-4">
    [[CONTENT]]
</main>

{{-- Após renderização, vira: --}}
<main class="container py-4">
    <div class="hero-block">...</div>
    <div class="features-block">...</div>
</main>
O placeholder usa colchetes duplos [[ e ]] propositalmente — para evitar conflitos com a sintaxe Blade {{ }} e com componentes <x-front.*>.

Variáveis Blade

O HTML e CSS do template são compilados pelo Blade com dados reais do tenant. Mais de 60 variáveis estão disponíveis, organizadas por grupo:

Identidade

@{{ $siteName }}Nome do site
{{ $siteTagline }}Slogan / tagline
{{ $siteLogo }}URL do logo principal
{{ $siteLogoDark }}URL do logo para fundo escuro
{{ $siteLogoSmall }}URL do logo reduzido / ícone
{{ $siteFavicon }}URL do favicon

Contato

{{ $siteEmail }}E-mail principal
{{ $sitePhone }}Telefone principal
{{ $sitePhoneSecondary }}Telefone secundário
{{ $siteWhatsapp }}Número do WhatsApp
{{ $siteWhatsappLink }}Link completo wa.me

Localização

{{ $siteFullAddress }}Endereço completo (montado automaticamente)
{{ $siteAddress }}Logradouro
{{ $siteAddressNumber }}Número
{{ $siteCity }}Cidade
{{ $siteState }}Estado
{{ $siteZipCode }}CEP
{{ $siteBusinessHours }}Horário de funcionamento
{{ $siteGoogleMapsEmbed }}URL embed do Google Maps
{{ $siteGoogleMapsLink }}Link direto do Google Maps

Redes Sociais

{{ $siteFacebook }}Facebook
{{ $siteInstagram }}Instagram
{{ $siteYoutube }}YouTube
{{ $siteLinkedin }}LinkedIn
{{ $siteTwitter }}Twitter/X
{{ $siteTiktok }}TikTok
{{ $sitePinterest }}Pinterest
{{ $siteTelegram }}Telegram

Cores & Layout

{{ $primaryColor }}Cor primária (#hex)
{{ $secondaryColor }}Cor secundária
{{ $accentColor }}Cor de destaque
{{ $textColor }}Cor do texto
{{ $headingColor }}Cor dos títulos
{{ $backgroundColor }}Cor de fundo do site
{{ $headerBackground }}Cor de fundo do header
{{ $footerBackground }}Cor de fundo do footer
{{ $fontFamily }}Fonte principal
{{ $headingFontFamily }}Fonte dos títulos
{{ $fontSize }}Tamanho base da fonte

Rodapé

{{ $footerAbout }}Texto "sobre" do footer
{{ $footerCopyright }}Texto de copyright
{{ $footerCredits }}Texto de créditos
{{ $footerCreditsUrl }}URL dos créditos
{{ $footerShowSocial }}Exibir redes sociais no footer (boolean)
{{ $footerShowContact }}Exibir contato no footer (boolean)

SEO & Legal

{{ $seoTitle }}Título SEO padrão
{{ $seoDescription }}Meta description padrão
{{ $seoKeywords }}Meta keywords
{{ $lgpdEnabled }}LGPD ativa (boolean)
{{ $lgpdMessage }}Mensagem do cookie banner
{{ $privacyPolicyUrl }}URL da política de privacidade

Empresa

{{ $companyName }}Razão social
{{ $companyTradeName }}Nome fantasia
{{ $companyCnpj }}CNPJ
{{ $companyStateReg }}Inscrição estadual
Todas as variáveis são alimentadas pelas Configurações do site (menu Geral no painel). As cores e fontes vêm da seção Cores & Layout. No editor, o painel lateral "Variáveis Disponíveis" lista todas com link direto para a tela de configuração correspondente.

Componentes do Site

Componentes são blocos funcionais Blade inseridos no HTML do template. Cada um renderiza automaticamente dados reais do tenant (menus, formulários, links, etc.).

Catálogo Completo

GrupoComponenteTag BladeRequer
Menus de Módulos
Dropdowns com categorias		 Blog<x-front.category-menu type="blog" />Módulo Blog
Produtos<x-front.category-menu type="products" />Módulo Produtos
Imóveis<x-front.category-menu type="imoveis" />Módulo Imóveis
Veículos<x-front.category-menu type="vehicles" />Módulo Veículos
Portfólio<x-front.category-menu type="portfolio" />Módulo Portfólio
FAQ<x-front.category-menu type="faq" />Módulo FAQ
Downloads<x-front.category-menu type="downloads" />Módulo Downloads
Links de Módulos
Links diretos		 Equipe<li><a href="/equipe">Equipe</a></li>Módulo Equipe
Depoimentos<li><a href="/depoimentos">...</a></li>Módulo Depoimentos
Páginas
Links para páginas		 Sobre Nós<li><a href="/sobre">Sobre</a></li>Página /sobre
Contato<li><a href="/contato">Contato</a></li>Página /contato
Utilitários
Funcionalidades		 Busca<x-front.search-box />—
Carrinho/Orçamento<x-front.mini-cart />Módulo Orçamento
Seletor de Idioma<x-front.language-switcher />i18n ativo
Rodapé Newsletter<x-front.newsletter-form />Módulo Newsletter

Inserção Automática

Na criação do template, componentes selecionados são inseridos automaticamente na posição correta:

Inserção no Editor

No painel lateral do editor, cada componente tem botão "Inserir" com posicionamento inteligente:

Detecção e Remoção

O editor detecta componentes presentes em tempo real via regex conforme o HTML é editado:

A nível de tenant, o catálogo de componentes é filtrado automaticamente — só aparecem componentes cujo módulo está ativo para aquele tenant. O master vê todos.

Editor Master

O editor de templates a nível master (/panel/master/templates/{id}/editor) é a ferramenta principal para criar e manter templates globais.

Layout

O editor é dividido em três áreas:

Barra de Ações

No nível master, não há sistema de draft/publish. Ao salvar, a versão publicada é atualizada diretamente. Isso simplifica a gestão já que templates globais servem apenas como base para forks.

Editor Tenant

O editor a nível de tenant (/panel/templates/editor) permite que cada site personalize sua cópia do template, com controle de versões completo.

Diferenças em Relação ao Master

FuncionalidadeMasterTenant
Versionamento Versão única (sempre publicada) Múltiplas versões (draft + publish)
Configurações Nome, kit, status, padrão Não editável (herdado do fork)
Abas CSS/JS Sempre visíveis Ocultas em modo tradução
Tradução Não disponível Seletor de idioma (se i18n ativo)
Rollback Reset para starter Publicar versão anterior
Componentes Catálogo completo Filtrado por módulos ativos do tenant

Sidebar de Versões

À direita do editor, a sidebar de versões exibe o histórico completo:

Fluxo de Trabalho

  1. O tenant abre o editor → vê a versão publicada atual
  2. Faz alterações no código → escolhe "Salvar rascunho" ou "Salvar e publicar"
  3. Salvar rascunho cria uma nova versão sem afetar o site
  4. Publicar ativa a versão imediatamente no site
  5. Se precisar desfazer, basta publicar uma versão anterior (rollback)
A versão 1 (v1) é sempre preservada como backup do template original. Não pode ser excluída nem despublicada manualmente — funciona como ponto de restauração garantido.

Versionamento

O sistema de versionamento permite rastrear cada alteração no template do tenant, com capacidade de voltar a qualquer ponto anterior.

Regras

Página de Histórico

A tela /panel/templates/versions mostra o histórico completo de todas as versões, com:

Publicar uma versão afeta o site imediatamente. A alteração também invalida o cache FPC de todas as páginas do tenant.

Fork de Templates

O fork é o mecanismo que permite a cada tenant ter sua cópia independente de um template global.

Quando o Fork Acontece

O fork é criado automaticamente em dois momentos:

  1. Quando o tenant seleciona um template global (via "Ativar" na tela de seleção)
  2. Quando o tenant abre o editor enquanto usa um template global

O Que Acontece no Fork

Restaurar Base

O tenant pode voltar ao template global original a qualquer momento via "Restaurar Base". Isso:

Tradução de Templates

Quando o sistema de i18n está ativo, templates podem ter traduções independentes para cada idioma.

O Que é Traduzido

Apenas o conteúdo HTML é traduzível:

CSS e JavaScript não são traduzíveis (são compartilhados entre idiomas).

Como Funciona

  1. No editor, um seletor de idioma aparece ao lado das abas
  2. Ao selecionar um idioma diferente do padrão, o editor entra em modo tradução
  3. O HTML traduzido é carregado (ou o original se ainda não traduzido)
  4. Ao salvar, a tradução é armazenada separadamente na tabela content_translations
Traduções não criam novas versões. Elas são uma camada sobre a versão publicada. Ao criar uma nova versão, as traduções continuam associadas à versão original — você pode traduzir a nova versão separadamente.

Seleção de Template

O tenant pode trocar de template a qualquer momento via a tela de seleção (/panel/templates/select).

Templates Disponíveis

A tela exibe um grid de templates em cards com:

Filtragem por Kit

Se o tenant pertence a um Starter Kit, a seleção mostra apenas:

Se o tenant não tiver kit, todos os templates ativos são exibidos.

Ao Ativar

  1. Se já existe fork para esse template → reutiliza o fork existente
  2. Se não existe fork → cria automaticamente (copia versão publicada para v1)
  3. Atualiza SiteTemplate do tenant
  4. Redireciona para o editor

Preview

O sistema de preview permite visualizar o template renderizado com dados reais antes de publicar.

Preview do Tenant

Acessível via botão "Preview" no editor. Renderiza o template com:

Preview do Master

No editor master, o preview tem controles adicionais:

Mock de Componentes

No preview master, componentes Blade são substituídos por mocks visuais estáticos:

Starters (Modelos Base)

Starters são modelos base de HTML/CSS/JS usados como ponto de partida ao criar um novo template global. Cada starter oferece um layout diferente.

Starters Disponíveis

StarterCaracterísticas
InstitucionalNavbar fixa, hero com imagem, seções em grid. Ideal para empresas e serviços.
E-commerceTopbar de contato, busca centralizada, mini-cart integrado.
MagazineLogo centralizado, data e redes sociais no topo. Para portais de notícias.
Landing PageHeader transparente com efeito scroll, focado em conversão.
MinimalistaLayout limpo com muito espaço branco. Elegante e leve.
Com TopbarBarra profissional superior + menu principal. Para sites corporativos.
Dark EleganteTema escuro com acentos dourados. Para marcas premium.
GlassmorphismEfeito vidro fosco moderno com transparências.
Gradient HeroHeader com gradientes vibrantes. Chamativo e moderno.
Sidebar FixaSidebar lateral fixa à esquerda, conteúdo à direita.
O starter é apenas o ponto de partida. Após a criação, o HTML é totalmente editável. O botão "Reset" no editor permite restaurar ao HTML original do starter a qualquer momento.

Gestão Master

O administrador da plataforma gerencia os templates globais em /panel/master/templates.

Listagem

DataTable com colunas:

Criar Template

  1. Escolher um Starter (modelo base)
  2. Preencher nome, selecionar Kit e componentes
  3. Os componentes selecionados são inseridos automaticamente no HTML do starter
  4. Redireciona para o editor

Duplicar Template

Cria uma cópia completa do template com novo slug (sufixo -copia-XXXX). Útil para criar variações a partir de um template existente.

Excluir Template

Só é possível excluir se:

Página do Tenant

A tela principal de templates do tenant (/panel/templates) oferece uma visão geral rápida:

Template Atual

Versões Recentes

Lista das últimas 5 versões com status, data e autor. Link para histórico completo.

Ações Rápidas

Cache e Performance

O sistema de templates está integrado com o FPC (Full Page Cache) da plataforma.

Invalidação Automática

Ao publicar uma nova versão de template, o cache FPC de todas as páginas do tenant é invalidado automaticamente. Isso garante que as alterações apareçam imediatamente.

Renderização

O template é compilado uma vez pelo Blade e o HTML resultante é cacheado pelo FPC. Na próxima requisição, o HTML é servido diretamente do cache sem recompilação.

Quando o i18n está ativo, o cache FPC inclui o locale na chave — cada idioma tem seu próprio cache.