Aller au contenu principal

Thème du site

Pour :Administrateur
Vue de la page « theme du site »

La page Thème du site (/app/web/theme) est l'interface moderne de personnalisation visuelle du site public Unisoft. Tout ce qui touche à l'apparence (couleurs, polices, hero, bannières, sections d'accueil) se gère ici, dans six onglets organisés du plus général au plus fin.

L'interface est conçue pour permettre des ajustements rapides, sans connaissance technique : pas de CSS, pas de code, juste des sélecteurs, des champs de texte et un drag-and-drop pour réorganiser les blocs.

Accéder à la page​

Dans le backoffice, déployez Site Web dans la barre latérale gauche, puis cliquez sur Thème du site.

L'URL directe est /app/web/theme.

Vue d'ensemble — les 6 onglets​

OngletÀ quoi ça sert
ApparenceChoix du thème graphique, couleurs primaire/secondaire, polices d'écriture
MenuBoutons d'action affichés à droite du header (max 2 boutons, ex : Don, Shabbat)
HeroSlides du carrousel d'accueil affiché en haut de la page d'accueil
BannièresEncarts de relance affichables entre les sections de l'accueil ou en pré-footer
Sections accueilBlocs visibles sur la page d'accueil (Événements, Soutenir, Horaires, Galerie…)
Sections globales (pré-footer)Blocs visibles sur toutes les pages, juste avant le footer

Onglet 1 — Apparence​

C'est l'onglet le plus important : il définit l'identité visuelle du site.

Thème actif​

Un sélecteur propose deux valeurs :

  • 2026 (nouveau) — le thème moderne recommandé. Design clair, hero immersif, sections modulaires.
  • Ancien thème — version historique conservée pour rétrocompatibilité. À éviter pour les nouvelles configurations.

Si vous démarrez, choisissez 2026.

Couleurs​

Deux couleurs principales définissent l'ensemble du palette :

  • Couleur primaire — couleur dominante, utilisée pour les boutons, liens importants et titres. Par défaut, un bleu marine profond.
  • Couleur secondaire — couleur d'accent, utilisée pour les éléments visuels d'appui (encarts, illustrations). Par défaut, un doré chaud.

Un sélecteur de couleur s'ouvre au clic, avec la possibilité de saisir une valeur hexadécimale précise (ex : #1B2A4E).

Typographie​

Deux polices à choisir, parmi une sélection éditoriale optimisée pour la lecture :

  • Police des titres (display) — utilisée pour les titres, headings, hero. Par défaut : Fraunces (serif éditorial moderne). Alternatives proposées : Playfair Display, Cormorant Garamond, DM Serif Display (serifs élégants) ; Inter, Manrope, Space Grotesk, Plus Jakarta Sans, Outfit (sans-serifs modernes).
  • Police du corps (body) — utilisée pour les paragraphes et le contenu. Par défaut : Inter. Alternatives : Manrope, Nunito Sans, Work Sans, DM Sans, Lora, Georgia.

Toutes les polices sont chargées dynamiquement depuis Google Fonts ; aucune installation n'est nécessaire.

Cliquez sur Valider en bas du formulaire pour enregistrer.

Onglet 2 — Menu​

Configure les boutons d'action affichés à droite de la barre de navigation du site (header). Maximum 2 boutons.

Chaque bouton comporte :

  • Texte — libellé visible (multilingue). Ex : Don, Shabbat, S'inscrire.
  • Lien — URL interne (ex : /don, /horaires) ou externe (ex : https://…).
  • Icône — sélecteur visuel d'icône (cœur, calendrier, étoile…).

Si aucun bouton n'est configuré, un bouton "Don" pointant vers /don s'affiche par défaut — vous n'avez donc jamais un header vide.

Onglet 3 — Hero​

Le Hero est le grand bloc d'image et de texte affiché en haut de la page d'accueil. C'est ce que vos visiteurs voient en premier — la première impression.

Slides du carrousel​

Vous pouvez créer plusieurs slides qui défileront en carrousel automatique. Cliquez sur Ajouter un slide pour ouvrir l'éditeur.

Chaque slide comporte :

  • Image — visuel de fond (paysage de préférence, format large).
  • Sur-titre (eyebrow) — texte court au-dessus du titre (ex : Bienvenue).
  • Titre — le grand titre principal (ex : Beth David, votre communauté).
  • Sous-titre — phrase d'accroche secondaire.
  • Description — paragraphe descriptif.
  • Bouton 1 et Bouton 2 — actions optionnelles, avec texte, lien et icône.

Tous les textes sont multilingues (FR / EN / HE selon ce qui est activé).

Réordonner les slides​

La liste des slides supporte le drag-and-drop : saisissez une ligne et glissez-la vers le haut ou le bas pour changer l'ordre d'apparition.

Si aucun slide n'est défini​

Pas de panique : si vous n'avez pas créé de slide, le thème 2026 affiche automatiquement un hero compact avec le nom et la description de votre organisation (renseignés dans Mon compte → Infos). Vous n'avez donc jamais une page d'accueil vide.

Onglet 4 — Bannières​

Les bannières sont des encarts visuels (image + texte + boutons) empilés horizontalement — utiles pour des appels à l'action ponctuels : "Don exceptionnel pour Pessah", "Inscription au camp d'été", "Rejoignez le cours du jeudi soir"…

Structure identique au Hero​

Une bannière a exactement la même structure qu'un slide hero (image, sur-titre, titre, sous-titre, description, deux boutons d'action). Seul leur affichage diffère :

  • Un slide hero occupe toute la largeur de l'écran, en grand.
  • Une bannière est plus compacte, présentée dans une vignette d'environ 260 px de haut.

Activer une bannière sur une page​

Créer une bannière ici ne suffit pas à la faire apparaître. Il faut ensuite insérer une section de type "Bannières" dans l'onglet Sections accueil ou Sections globales (pré-footer), qui se chargera de les afficher.

C'est ce mécanisme qui vous permet de créer plusieurs bannières et de choisir où elles s'affichent.

Onglet 5 — Sections accueil​

C'est l'onglet qui définit l'ordre et la composition de votre page d'accueil. Une page d'accueil moderne est une succession de sections (blocs) verticales — chaque section affiche un type de contenu différent.

Sections proposées par défaut​

À l'ouverture, la page d'accueil contient sept sections universelles, prêtes à l'emploi :

TypeAffiche…
Aperçu événements (EVENTS_PREVIEW)Les prochains événements à venir
Aperçu cagnottes (CAISSES_PREVIEW)Les cagnottes actives à soutenir
Aperçu horaires (HORAIRES_PREVIEW)Les horaires liturgiques de la semaine
Aperçu articles (ARTICLES_PREVIEW)Les derniers articles ou actualités
Aperçu galerie (GALLERY_PREVIEW)Un échantillon de la galerie photo
Bannières (BANNERS)Les bannières créées dans l'onglet Bannières
Page principale (MAIN_CONTENT)Le contenu de la page d'accueil système (si vous en avez une)

Actions disponibles sur chaque section​

Chaque ligne du tableau propose :

  • Switch Affichée — bascule visible/masquée. Une section masquée reste enregistrée mais n'apparaît plus sur le site.
  • Bouton Personnaliser (icône réglages) — ouvre une modale pour ajuster les textes d'en-tête de la section (sur-titre, titre, sous-titre) et certains réglages (nombre d'éléments à afficher, etc.) selon le type.
  • Bouton Modifier (icône crayon) — change le type ou le libellé interne.
  • Bouton Supprimer (icône poubelle) — retire définitivement la section de la liste.

Drag-and-drop pour réordonner​

Saisissez une ligne et glissez-la vers le haut ou le bas pour changer l'ordre des sections sur la page d'accueil. La modification est sauvegardée automatiquement.

Ajouter une nouvelle section​

Cliquez sur Ajouter une section en haut à droite pour ouvrir une modale. Choisissez parmi ces types supplémentaires :

TypeÀ quoi ça sert
Bandeau de don (DONATION_STRIP)Bandeau horizontal coloré avec un titre, une accroche et un bouton "Faire un don"
Bloc contact (CONTACT_BLOCK)Bloc avec coordonnées + appel à contact
Newsletter (NEWSLETTER)Formulaire d'inscription à la newsletter
Contenu personnalisé (CUSTOM_CONTENT)Bloc libre, avec contenu éditable au choix : Éditeur classique (WYSIWYG) ou Bloc IA (généré par intelligence artificielle)
Page principale (MAIN_CONTENT)Rend la page d'accueil système éditable comme une page CMS

Pour un Contenu personnalisé, après création, un bouton Éditer le contenu apparaît sur la ligne et ouvre l'éditeur correspondant.

Personnaliser les textes d'en-tête d'une section "Aperçu"​

Les sections de type "Aperçu" (Événements, Cagnottes, Horaires, Articles, Galerie) acceptent des textes d'en-tête personnalisés via le bouton Personnaliser :

  • Sur-titre — petit texte au-dessus du titre (ex : À venir).
  • Titre — grand titre de la section (ex : Nos prochains événements).
  • Sous-titre — phrase d'accroche.
  • Nombre à afficher — pour les Aperçus avec liste, nombre d'éléments à montrer (1 à 12, valeur typique 3 à 4).

Onglet 6 — Sections globales (pré-footer)​

Ces sections s'affichent sur toutes les pages du site, pas seulement l'accueil — juste avant le footer.

Pourquoi un onglet séparé ?​

Pour pouvoir mettre en avant partout un appel à l'action important — la newsletter, par exemple, doit être visible que le visiteur soit sur la page d'accueil, sur une fiche événement ou sur les mentions légales.

Sections proposées par défaut​

À l'ouverture, une seule section est présente par défaut :

  • Newsletter — formulaire d'inscription à la newsletter, visible sur toutes les pages.

Ajouter d'autres sections globales​

Tous les types proposés dans l'onglet Sections accueil sont disponibles aussi ici. En pratique, on y met souvent :

  • Un Bandeau de don (DONATION_STRIP) — pour rappeler la possibilité de soutenir, à la fin de chaque page.
  • Un Bloc contact (CONTACT_BLOCK) — pour ne jamais perdre un visiteur qui voudrait poser une question.

Voir et tester votre site​

À tout moment, vous pouvez ouvrir votre site public dans un nouvel onglet pour voir l'effet de vos modifications. L'URL est https://[votre-organisation].unisoft.world. Pensez à rafraîchir la page (Ctrl+F5 ou Cmd+Shift+R) pour forcer le chargement de la dernière version.

Cas particulier — Sites virtuels​

Si votre organisation gère plusieurs sites virtuels, chaque site a son propre thème. Pour configurer un site virtuel, l'URL devient /app/web/theme?virtualId=… — l'équipe Unisoft vous fournit la valeur de virtualId à utiliser.

Points piégeux​

Voir aussi​

  • Configuration du site — réseaux sociaux et seuil de frais bancaires.
  • Mes pages — pages CMS personnalisées à lier dans le menu ou via une section "Contenu personnalisé".
  • Menu du site — liens du menu de navigation principal.