Thème

💡 Note importante : Cet article détaille la configuration en Mode Classique. Si vous avez activé le nouveau moteur d'affichage pour votre site, veuillez vous référer à l'article dédié : Thème - Configuration du Mode Moderne.

Le module de configuration du Thème vous permet de personnaliser l'identité visuelle et l'apparence du site internet de votre association.

⚙ Le Moteur de thème

En haut de la page, un encart dédié vous permet de choisir le moteur d'affichage de votre site :

• Mode Classique (présenté ci-dessous) : Conserve votre configuration actuelle à l'identique avec l'organisation habituelle en 4 onglets.
• Mode Moderne : Vous donne accès à de toutes nouvelles options de personnalisation avancées (polices, presets, styles de boutons, cartes, etc.). Un bouton bleu "Activer le mode moderne" vous permet d'ouvrir et prévisualiser ce rendu dans un nouvel onglet, visible par vous seul, sans modifier le site de vos visiteurs tant que vous n'avez pas enregistré. Les options de ce mode font l'objet d'un tutoriel à part.

Pour simplifier la configuration en mode classique, l'interface est organisée en 4 onglets thématiques :

1. Onglet : Identité

Cet onglet centralise les éléments graphiques et textuels indispensables à la reconnaissance de votre club :

• Le logo : Chargez votre logo officiel (format recommandé : 400x400 px).
• La bannière :

  C'est l'image panoramique en haut de votre site (largeur recommandée : 2000 px). Vous avez deux méthodes pour la mettre en place :

  Méthode 1 : Import d'une image existante
  Glissez-déposez ou chargez votre fichier directement (Largeur de 1000 px pour le style "largeur fixe" ou 2000 px pour le style "pleine largeur").

  Méthode 2 : Création via le Générateur
  Si vous n'avez pas de visuel prêt, cliquez sur le bouton orange "Générateur de bannière" pour lancer l'assistant en 3 étapes :

  1. Informations : Renseignez le nom de l'association et ajoutez votre logo si vous le souhaitez.
  2. Design : Choisissez votre fond via l'onglet "Couleurs" (dégradés thématiques) ou l'onglet "Images" (photos libres de droits).
  3. Finalisation : Ajustez la couleur du texte pour assurer sa lisibilité, vérifiez l'aperçu puis cliquez sur "Exporter".
• Titre du site (Options d'affichage) :
  • Vous pouvez choisir d'afficher ou non votre logo ou un titre textuel personnalisé par-dessus votre bannière.
  • Saisissez le titre spécifique qui s'affichera sur la version mobile (smartphone) afin de préserver l'ergonomie.
  • Définissez l'alignement du titre de votre club (Droite, Centré, Gauche) pour ajuster sa position sur les écrans.
• Le favicon : Chargez l'icône symbolisant votre site internet (format requis : .png, taille minimale : 228x228 px). Il est utilisé par les navigateurs dans la barre d'adresse et les onglets.
• Image de fond : Importez ici l'image globale destinée à habiller l'arrière-plan de votre site internet (taille recommandée : 2000x1300 px).

2. Onglet : Apparence

Définissez l'ambiance colorimétrique globale de vos pages :

• Les couleurs du thème : Choisissez précisément la couleur principale et la couleur secondaire de votre site internet.
• Personnalisation avancée des couleurs : Déployez ce menu pour ajuster la couleur des liens hypertextes présents au cœur de vos articles ainsi que la couleur et la transparence de vos différentes zones de contenu (carrousel, message d'accueil, articles, colonne).

3. Onglet : Structure du site (À partir du pack Pro)

Structurez l'agencement visuel et l'organisation de vos blocs :

• Style du modèle : Choisissez d'un simple clic entre une mise en page globale en "pleine largeur" ou en "largeur fixe".
• Disposition des zones de contenu : Sélectionnez le gabarit d'agencement qui vous convient le mieux pour organiser l'emplacement de la colonne latérale et des flux de contenus au centre de l'écran.

4. Onglet : Avancé (À partir du pack Pro)

Pour pousser la personnalisation technique à son maximum :

• Fichier CSS personnalisé : Si vous maîtrisez l'intégration web et le langage CSS, vous pouvez glisser-déposer votre propre feuille de style (fichier .css) pour écraser les styles graphiques par défaut.
• Générateur de CSS : Cliquez sur le bouton orange "Générateur de css" pour vous aider à concevoir vos lignes de code personnalisées (voir l'article dédié "Fichier CSS").