Onde configurar o design

Pode configurar o design do banner de cookies no painel do Consentio, na secção Designer do seu site. As alterações têm efeito imediato no seu site.

Layouts disponíveis

Escolha entre vários layouts predefinidos:

Caixa (modal)

Uma janela modal clássica no centro do ecrã. Adequada para sites que querem garantir que os utilizadores reparam no banner.

Barra (banner)

Uma barra horizontal na parte inferior ou superior do ecrã. Uma opção menos intrusiva que não bloqueia a navegação pelo conteúdo.

Nuvem (flutuante)

Uma janela flutuante compacta num canto do ecrã. Uma opção minimalista para sites que preferem um design discreto.

Posição

Consoante o layout escolhido, pode definir a posição:

Esquema de cores

Personalize as cores do banner para combinar com a sua marca:

Temas predefinidos

• Claro - Fundo claro, texto escuro
• Escuro - Fundo escuro, texto claro
• Automático - Baseado automaticamente na definição do sistema do utilizador

Cores personalizadas

Defina cores personalizadas para elementos individuais:

• Fundo - Cor de fundo do banner
• Texto - Cor do texto principal
• Botão primário - Cor do botão "Aceitar tudo"
• Botão secundário - Cor do botão "Rejeitar"
• Links - Cor dos links

Tipografia

Defina os tipos de letra para o texto do banner:

• Família de fontes - Escolha entre Google Fonts ou use uma fonte do sistema
• Tamanho do texto - Tamanho do texto principal
• Tamanho do título - Tamanho do título do banner

Animações

Defina a animação para mostrar e ocultar o banner:

• Fade - Desvanecimento gradual ao aparecer/desaparecer
• Slide - Deslizar a partir da margem do ecrã
• Nenhuma - Sem animação

Raio de arredondamento

Defina o raio de arredondamento do banner e dos botões:

• Nenhum - Cantos vivos (0px)
• Pequeno - Arredondamento ligeiro (4px)
• Médio - Arredondamento médio (8px)
• Grande - Arredondamento pronunciado (16px)
• Total - Arredondamento máximo (999px)

Limitações por plano

Algumas opções de personalização só estão disponíveis em planos pagos:

Texto do banner

Edite o texto apresentado no banner:

• Título - Título principal do banner
• Descrição - Texto explicativo sobre os cookies
• Botão aceitar - Texto do botão de aceitar todos os cookies
• Botão rejeitar - Texto do botão de rejeitar
• Link de definições - Texto para abrir as preferências

Pré-visualizar alterações

No designer, pode ver uma pré-visualização em tempo real do banner. Pode:

• Alternar entre as vistas de desktop e mobile
• Testar diferentes estados (primeira apresentação, centro de preferências)
• Verificar a aparência em modo claro/escuro

Personalização com CSS

Para personalização avançada, pode usar CSS personalizado. O widget usa variáveis CSS:

/* Exemplo de substituição de estilos */
.consentio-banner {
  --consentio-bg: #ffffff;
  --consentio-text: #1a1a1a;
  --consentio-primary: #10b981;
  --consentio-primary-hover: #059669;
  --consentio-border-radius: 12px;
}