Guia de Utilização

01Conhecendo o painel

Tudo se configura em um só lugar: Addons › Aurora Themes.

No topo fica o quadro Licença, com a situação atual e o botão Verificar agora. Abaixo dele, quatro abas:

Como as alterações entram no ar

• Cada aba tem o seu botão de salvar. Nada é aplicado antes de salvar.
• Salvar atualiza o site na hora. Se não aparecer, limpe o cache do navegador ou do CDN.
• Um campo com erro (ex.: cor em formato errado) volta destacado com a explicação, e os outros campos são salvos normalmente.
• A prévia ao vivo nas abas é aproximada. Para ver o resultado real, use Visualizar tema ou Visualizar rascunho.

02Temas visuais

Seis identidades completas. O tema vale para toda a área do cliente: cabeçalho, menus, painel, tabelas, faturas, tickets, formulários, login, página inicial e carrinho.

Nos temas Moderno, Developer, Industrial e Agências, a página inicial ganha identidade própria: cabeçalho com a cor do tema (translúcido no topo e sólido ao rolar), hero com composição marcante, seções alternando tons da marca e rodapé na cor do tema. Clara e Escuro seguem um visual mais neutro.

Escolher e aplicar um tema

1. Abra a aba TemasCada card mostra uma mini prévia, a paleta, a descrição e se o tema tem base clara ou escura. O tema atual tem o selo Em uso.
2. Visualize antes de aplicarClique em Visualizar tema. A sua área do cliente abre numa nova aba com esse tema. Só você vê (é preciso estar logado no admin no mesmo navegador); os clientes continuam vendo o tema salvo. Uma barra no rodapé da página deixa trocar de tema ou sair da visualização.
3. SelecioneDe volta ao painel, clique em Selecionar no card escolhido.
4. SalveClique em Salvar tema. O novo visual entra no ar para todos.

Troca entre claro e escuro pelo cliente

A opção Permitir que o cliente alterne entre claro e escuro decide se aparece um botão de tema na área do cliente:

• Ligada: o botão alterna entre o tema escolhido e a versão clara/escura dele. A escolha fica gravada no navegador do cliente.
• Desligada: todos veem exatamente o tema escolhido, sem botão. Boa opção quando a identidade visual precisa ser sempre a mesma.

03Personalização avançada

Coloque as cores e fontes da sua marca por cima do tema escolhido. Campo vazio usa o valor do tema, mostrado como referência em cada campo.

As cores são digitadas no formato #RRGGBB (ex.: #7c3aed) ou escolhidas no seletor ao lado do campo.

Quadro “Legibilidade”

Enquanto você escolhe as cores, o quadro Legibilidade avisa quando um texto fica difícil de ler: abaixo da razão 4,5:1 da norma de acessibilidade WCAG AA. Exemplos: texto sobre o fundo da página, texto sobre os cards, texto do botão sobre a cor de hover. Com aviso, escolha um tom mais claro ou mais escuro.

Voltar ao tema original

Restaurar padrões do tema limpa toda a personalização avançada. O tema escolhido continua.

04Página inicial: o construtor

A aba Página inicial monta a homepage com seções empilhadas, como blocos.

Na primeira vez, a lista mostra o layout padrão do tema (hero, benefícios, planos, busca de domínio, depoimentos, perguntas frequentes, chamada final e rodapé), com textos traduzidos. A partir daí, tudo pode ser mudado.

Ações em cada seção

Textos: “Padrão” ou seus

Campos marcados com Padrão usam o texto do tema no idioma de cada visitante (inglês, português ou espanhol). Ao editar um campo, o seu texto passa a valer para todos os idiomas. Restaurar texto padrão volta os textos e cards da seção ao padrão traduzido.

Cards

Seções com vários itens (planos, benefícios, depoimentos, perguntas, estatísticas…) têm a área Cards: Adicionar card, remover, reordenar e editar cada um. Enquanto você não mexer, a seção mostra os cards padrão do tema, traduzidos; ao editar, eles passam a ser seus.

Links, ícones e imagens

• Links aceitam um endereço completo (https://…), uma âncora da própria página (#planos) ou uma página do WHMCS (cart.php, submitticket.php, index.php?rp=/store/hospedagem). Endereços javascript: e similares são recusados por segurança.
• Ícones usam as classes do Font Awesome 5, que já vem com o WHMCS: fas fa-server, fas fa-shield-alt, fab fa-whatsapp. Consulte a lista em fontawesome.com/v5/search.
• Imagens: botão Enviar (PNG, JPG, WebP ou GIF, até 2 MB) ou um endereço https://. Prefira WebP, que é mais leve.

05Tipos de seção

Dezesseis tipos, combináveis em qualquer ordem.

Planos com produtos reais

Na seção Planos, escolha um grupo de produtos para mostrar os produtos cadastrados no WHMCS no lugar dos cards de exemplo:

• o preço aparece na moeda ativa do visitante;
• produtos ocultos ou retirados de venda não aparecem;
• o produto marcado como destaque no WHMCS ganha o selo; sem nenhum marcado, o do meio é destacado;
• a lista de recursos de cada plano vem da descrição do produto (uma linha por recurso);
• o botão leva direto ao pedido do produto.

O rodapé

O rodapé é fixo no fim da página e não pode ser duplicado nem movido. As opções dele:

• Mostrar na página: desligado, a página inicial mostra só a linha de copyright e idioma. O editor avisa isso dentro da seção.
• Mostrar redes sociais: usa as redes da aba Área do cliente ou, se estiverem vazias, as das Configurações Gerais do WHMCS.
• Mostrar a coluna Suporte e Mostrar a coluna Empresa: colunas de links úteis do WHMCS.
• Coluna de links: título e até 8 links próprios. A coluna só aparece com pelo menos um link cadastrado.

06Estilo das seções

Cada seção tem a área Estilo, que muda a aparência sem mexer no conteúdo.

Fundo

Outras opções

• Espaçamento: compacto, normal ou amplo (altura da seção).
• Alinhamento do título: centralizado ou à esquerda.
• Cor dos botões da seção, quando quiser destacar uma oferta.
• Âncora: um nome curto, sem espaços (ex.: planos). Com ele, um link #planos no menu ou num botão rola a página até a seção.

07Rascunho e publicação

Confira antes de publicar. Nada muda para os visitantes até você salvar.

O construtor precisa de JavaScript ativado no navegador. Funciona em telas estreitas, mas é mais confortável num computador.

08Aba Área do cliente

Marca, login e redes sociais.

Logos

• Logo para fundos claros e logo para fundos escuros. O tema usa o certo em cada lugar: cabeçalho escuro, modo escuro, painel de login.
• PNG, JPG, WebP ou GIF, até 1 MB. SVG não é aceito, por segurança.
• Use imagem com fundo transparente e altura de pelo menos 80 px, para ficar nítida em telas de alta resolução.
• Remover este logo volta ao nome da empresa em texto.
• Tamanho da logo: Pequeno (32 px de altura), Médio (40 px, padrão) ou Grande (48 px). Vale para o menu lateral, o cabeçalho da página inicial e o login. A largura acompanha a proporção da imagem.

Páginas de login e cadastro

O login, o cadastro, a recuperação de senha e a verificação em duas etapas mostram um painel de marca ao lado do formulário.

• Título do painel de marca e Texto do painel de marca: vazios usam o texto padrão traduzido.
• Itens do painel de marca: até 5 itens, cada um com ícone e texto, exibidos abaixo do texto.
  • Com todas as linhas vazias, aparecem os 3 itens padrão, traduzidos para o idioma do visitante.
  • Com itens preenchidos, eles valem para todos os idiomas. Linhas sem texto são ignoradas.
  • O ícone é uma classe do Font Awesome 5 (ex.: fas fa-bolt). Vazio usa um “check”.
  • Mostrar os itens desligado esconde a lista.

Redes sociais

Endereços completos com https:// dos seus perfis. Aparecem no rodapé da página inicial. Com todos os campos vazios, valem as redes sociais das Configurações Gerais do WHMCS.

09Aba Painel admin

A skin reestiliza o painel administrativo (template Blend) sem substituí-lo.

No canto inferior do admin há um botão redondo, Trocar tema, que alterna claro/escuro só neste navegador.

10O que o cliente vê

Um resumo da área do cliente com a Aurora, para você orientar a sua equipe de suporte.

As páginas que a Aurora não redesenha (algumas páginas de módulos de terceiros, por exemplo) vêm do Nexus e recebem as cores, fontes e componentes da Aurora automaticamente. Módulos de terceiros continuam funcionando: Bootstrap 4, jQuery e Font Awesome do WHMCS são mantidos.

11Carrinho e planos

O carrinho segue o tema visual escolhido, sem configuração própria.

• Lista de planos com troca de ciclo (mensal, trimestral, anual…): os preços mudam na hora e o botão já leva o ciclo escolhido para o pedido. Ciclos sem preço cadastrado não aparecem.
• Plano em destaque: o produto marcado como destaque no WHMCS; sem nenhum, o do meio.
• Etapas visuais (escolha, configuração, carrinho, pagamento) mostram ao cliente em que ponto ele está.
• Resumo fixo ao lado, com cupom de desconto aplicado ali mesmo.
• Formas de pagamento em cards, fáceis de tocar no celular.
• Busca e transferência de domínios com sugestões e preços em destaque.

O conteúdo dos produtos (nome, descrição, preços, ciclos, opções configuráveis, addons) continua sendo cadastrado normalmente em Configurações do sistema › Produtos/Serviços.

Como escrever a descrição do produto

• Escreva um item por linha começando com - (ou •, ✓, . ): essas linhas viram uma lista com marcadores no card.
• Linhas sem marcador viram parágrafos; uma linha em branco separa blocos.
• Pode usar HTML simples: negrito (<strong>), itálico, listas (<ul><li>), parágrafos e links. Estilos, cores e fontes colados de editores (style="…") são ignorados, para o texto seguir o tema em claro e escuro. Scripts, imagens e formulários são removidos por segurança.
• Descrições longas aparecem recolhidas, com o botão Ver mais.

12Textos e CSS próprio

Para quem quer ir além do painel.

Textos

• Os textos do WHMCS (menus, botões, mensagens) continuam nos arquivos de idioma do WHMCS. Para trocar um texto, use lang/overrides/, como sempre.
• Os textos próprios da Aurora ficam em templates/aurorathemes/lang/ (english, portuguese-br, spanish). Prefira mudar pelo painel: alterações nesses arquivos são substituídas na atualização.

CSS próprio

Para ajustes finos, crie o arquivo templates/aurorathemes/css/custom.css. Ele é carregado por último e não é substituído nas atualizações. Prefira mudar as variáveis do tema, que se propagam por tudo:

/* templates/aurorathemes/css/custom.css */
:root {
  --au-radius-lg: 0.5rem;   /* cantos dos cards */
}

Modelos de e-mail

Para trocar a cor dos botões dos e-mails, substitua #1e3a5f pela cor da sua marca nos arquivos (dois lugares por botão: bgcolor e background-color). O passo a passo de importação está no Guia de Instalação.

13Boas práticas

Recomendações para um resultado profissional.

• Comece pelo tema, depois ajuste só a cor da marca e o logo. Menos personalização mantém a harmonia e o contraste que o tema já garante.
• Respeite o quadro Legibilidade. Texto difícil de ler espanta clientes e prejudica a acessibilidade.
• Página inicial enxuta: de 6 a 9 seções costumam bastar. Hero, benefícios, planos, prova social (depoimentos ou estatísticas), perguntas frequentes e chamada final.
• Um objetivo por seção e um botão principal claro em cada uma.
• Use planos reais (grupo de produtos) para que os preços da página inicial nunca fiquem desatualizados.
• Imagens leves: WebP, com largura de até 1600 px.
• Sempre confira no rascunho e no celular antes de publicar.
• Mantenha os textos padrão onde servirem, para os visitantes de outros idiomas.

14Perguntas frequentes

Dúvidas comuns no uso diário.