Personnalisation

Adaptez l'apparence de votre Ad Sentinelle à votre identité visuelle.

Logo

Télécharger un logo

1. Dans le Wall Builder, cliquez sur "Logo"
2. Cliquez sur "Télécharger" ou glissez-déposez
3. Formats acceptés : PNG, JPG, SVG, WebP
4. Taille recommandée : 200x60 px (ou ratio similaire)

Position du logo

Position	Aperçu
Top	Centré en haut du modal
Left	Aligné à gauche du titre
Right	Aligné à droite du titre
Center	Centré au-dessus du titre

Taille du logo

Taille	Dimensions
Small	40px de hauteur
Medium	60px de hauteur
Large	80px de hauteur
Custom	Personnalisable (px)

// Configuration
logoUrl: 'https://votresite.com/logo.png'
logoPosition: 'top'
logoSize: 'medium'
// ou
logoSizeCustom: 70  // en pixels

Couleurs

Palette de couleurs

Configurez les couleurs principales :

// Configuration des couleurs
primaryColor: '#8b5cf6'     // Violet - boutons, liens
backgroundColor: '#ffffff'   // Blanc - fond du modal
textColor: '#1f2937'        // Gris foncé - texte

Couleur primaire

Utilisée pour :

• Bouton CTA principal
• Liens
• Éléments d'accentuation
• Bordure du modal (optionnel)

Exemples :

• #8b5cf6 - Violet (défaut)
• #3b82f6 - Bleu
• #10b981 - Vert
• #f59e0b - Orange
• #ef4444 - Rouge

Couleur de fond

Arrière-plan du modal :

• #ffffff - Blanc (light mode)
• #1f2937 - Gris foncé (dark mode)
• Couleur personnalisée de votre charte

Couleur du texte

Pour le titre et les paragraphes :

• #1f2937 - Gris foncé (sur fond clair)
• #f9fafb - Blanc cassé (sur fond foncé)

Opacité de l'overlay

L'overlay est le fond semi-transparent derrière le modal :

overlayOpacity: 0.8  // 80% d'opacité

Valeur	Effet
0.5	Semi-transparent (contenu visible)
0.7	Assez opaque
0.8	Opaque (recommandé pour Hard)
0.9	Très opaque
1.0	Totalement noir

Typographie

Tailles disponibles

Taille	Pixels	Usage
xs	12px	Notes, mentions
sm	14px	Texte secondaire
md	16px	Texte normal
lg	18px	Texte mis en avant
xl	20px	Sous-titres
2xl	24px	Titres

Titre

title: '🛡️ Bloqueur de publicité détecté'
titleSize: 'xl'  // Grande taille

Blocs de contenu

contentBlocks: [
  {
    text: 'Votre bloqueur empêche notre financement.',
    size: 'md',
    bold: false,
    italic: false
  },
  {
    text: 'Désactivez-le pour continuer.',
    size: 'lg',
    bold: true,
    italic: false
  }
]

Boutons

Style du bouton principal

Style	Apparence
Filled	Fond coloré, texte blanc
Outline	Bordure colorée, fond transparent
Ghost	Pas de bordure, survol coloré

buttonText: "J'ai désactivé mon bloqueur"
buttonStyle: 'filled'

Bouton secondaire

secondaryButtonText: 'En savoir plus'
// Apparaît sous le bouton principal

Bouton d'aide

showHelpButton: true
helpButtonText: 'Comment désactiver ?'

Animation

Types d'animation

Animation	Description
fade	Apparition en fondu (défaut)
slide	Glissement depuis le bas
scale	Zoom depuis le centre
bounce	Effet de rebond
none	Pas d'animation

animation: 'fade'

Durée de l'animation

L'animation dure 300ms par défaut. Non configurable via le dashboard (modification CSS requise).

Bordures

Rayon des coins

Valeur	Pixels	Effet
none	0px	Coins droits
sm	4px	Légèrement arrondis
md	8px	Arrondis (défaut)
lg	12px	Bien arrondis
xl	16px	Très arrondis
full	9999px	Complètement arrondis

borderRadius: 'lg'

CSS personnalisé

Pour une personnalisation avancée, ajoutez du CSS personnalisé :

/* Dans le champ "CSS personnalisé" du Wall Builder */

/* Changer la police */
#adwall-overlay {
  font-family: 'Votre Police', sans-serif;
}

/* Ajouter une ombre */
#adwall-overlay .adwall-modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Personnaliser le bouton */
#adwall-overlay .adwall-cta-btn {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animation personnalisée */
#adwall-overlay .adwall-modal {
  animation: customSlide 0.4s ease-out;
}

@keyframes customSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Classes CSS disponibles

Classe	Élément
#adwall-overlay	Container principal
.adwall-modal	Modal central
.adwall-logo	Image du logo
.adwall-title	Titre
.adwall-content	Zone de contenu
.adwall-cta-btn	Bouton principal
.adwall-secondary-btn	Bouton secondaire
.adwall-help-btn	Bouton d'aide
.adwall-close-btn	Bouton fermer (mode Soft)

Exemples de configurations

Style Média/Journal

{
  logoPosition: 'top',
  primaryColor: '#1e40af',     // Bleu foncé
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  overlayOpacity: 0.9,
  buttonStyle: 'filled',
  borderRadius: 'md',
  animation: 'fade'
}

Style Tech/Moderne

{
  logoPosition: 'left',
  primaryColor: '#8b5cf6',     // Violet
  backgroundColor: '#0f172a',  // Fond sombre
  textColor: '#f8fafc',
  overlayOpacity: 0.85,
  buttonStyle: 'outline',
  borderRadius: 'xl',
  animation: 'scale'
}

Style Minimal

{
  logoPosition: 'center',
  primaryColor: '#171717',     // Noir
  backgroundColor: '#fafafa',
  textColor: '#171717',
  overlayOpacity: 0.7,
  buttonStyle: 'ghost',
  borderRadius: 'none',
  animation: 'none'
}

Conseil

Utilisez des couleurs cohérentes avec votre charte graphique pour une intégration naturelle.