# Site Fort Fort Lointain 2026 - Guide d'intégration Elementor Objectif unique : **convertir le grand public et les familles en acheteurs de billets.** Tout le reste est au service de ça. Deux livrables : - `Site_FFL_2026.html` : la page complète, autonome, responsive (à héberger telle quelle ou à montrer). - Ce guide : pour reconstruire la même page dans WordPress/Elementor. --- ## 0. À faire en priorité (le point bloquant) Ta billetterie Billetweb existe mais n'est visible nulle part. C'est LE frein à la conversion. Dans le HTML, une seule ligne pilote tous les boutons (en bas du fichier) : ```js var BILLETTERIE = "https://www.billetweb.fr/fort-fort-lointain"; ``` Remplace cette URL par le lien Billetweb **de l'édition 2026** (le slug `fort-fort-lointain` actuel renvoie « événement terminé »). Tous les boutons « Réserver » se mettront à jour d'un coup. Sur Elementor : crée le bouton une fois, puis duplique-le partout en pointant vers cette même URL. --- ## 1. Réglages globaux (Elementor > Réglages du site) ### Couleurs (reprises de l'affiche) | Rôle | Hex | |------|-----| | Navy (texte titres, fonds sombres) | `#1c2350` | | Teal / fjord | `#2aa6b8` | | Vert | `#5aa544` / foncé `#356a35` | | Or (bandeaux, accent) | `#f2c230` | | Orange (BOUTONS / CTA) | `#e8722c` | | Crème (fond clair) | `#f5ecd9` | | Bois (footer) | `#3f2c1b` | Règle d'or conversion : **les boutons d'action sont toujours en orange** (`#e8722c`). Ne dilue pas cette couleur ailleurs, c'est le signal « clique ici ». ### Polices (Google Fonts) - Titres : **Cinzel** (600/700/800) - aspect épique/fantasy. - Texte : **Mulish** (400/600/700/800). --- ## 2. Structure de la page, section par section L'ordre est pensé pour la conversion : on accroche, on rassure, on donne envie, on lève les freins, on fait acheter. ### En-tête fixe (sticky) Logo à gauche · menu (Découvrir, Programme, En famille, Infos) · **bouton orange « Réserver » toujours visible** · « 5-6 sept · Lyon ». Sur Elementor : header sticky + bouton CTA. Sur mobile, garde une **barre CTA fixe en bas** (« Réserver mes billets »). ### 1. Hero (plein écran) Fond dégradé ciel→collines (palette affiche). Idéalement, mets l'**affiche** ou un visuel HD en fond. - Badge or : « Nouveauté 2026 · Le village Vikings & Dragons » - Titre : **Fort Fort Lointain** - Sous-titre : « Le festival qui transforme un week-end en aventure... aux portes de Lyon. » - Puce date/lieu : 5 & 6 septembre 2026 · Hippodrome de Parilly, Lyon - 2 boutons : **Réserver mes billets** (orange) + Découvrir (transparent) - Ligne de réassurance : 11e édition · +15 000 visiteurs · 150 créateurs & 40 troupes · à 10 min de Lyon en tram ### 2. « Jamais venu ? Voici l'idée » Le paragraphe qui explique le festival à un non-initié (comparaison « petit Puy du Fou lyonnais »). Puis 4 cartes : Spectaculaire / Pour toute la famille / Facile d'accès / Une sortie unique. ### 3. Bandeau chiffres (fond or) 2 jours · 15 000+ visiteurs · 150 créateurs · 40+ troupes · 11e édition. Réassurance immédiate. ### 4. Drakenfjord (fond navy) La grande nouveauté. Texte à gauche + visuel à droite (drakkar, dragon). 3 points clés (drakkar échelle 1, 40 dragons, Vikings pompiers). Bouton or « Réserver ». ### 5. Programme - les temps forts 4 cartes colorées : Les concerts (Naheulband...) · Arthur Pestel (invité) · Spectacles (rapaces, chevaux, magie) · Le bal mousse familial. ### 6. En famille (fond vert) 6 cartes : chasse aux clés, monnaie Ygg, chasse aux personnages, nourrir les dragons, grand défilé, manger sur place. C'est la section qui parle directement aux familles ciblées. ### 7. Univers (fond crème) 6 pastilles : Moyen Âge, Fantasy, Steampunk, Créateurs, Spectacles, Animations (repris de l'affiche). ### 8. TCG Yggdrasil Coliséum (fond navy) Mention courte de la 2e nouveauté. ### 9. Infos pratiques & accès 6 cartes : dates/horaires, lieu, transports (tram T2 / bus C15E, arrêt Parilly Université Hippodrome), voiture, billetterie (avec bouton), bon à savoir (costumes bienvenus). ### 10. FAQ (accordéon) 6 questions qui lèvent les freins du grand public : pour qui ? faut-il se costumer ? adapté aux enfants ? comment venir ? manger sur place ? où acheter ? Chaque réponse pousse vers l'achat. ### 11. CTA final (fond navy) « Prêt à passer de l'autre côté du réel ? » + gros bouton orange « Réserver mes billets » + rappel « 2 jours seulement ». ### 12. Footer (fond bois) Présentation courte · liens internes · liens Participer (exposant / troupes / bénévole, déjà fonctionnels sur ton site actuel) · bouton billetterie. --- ## 3. Les 7 règles de conversion appliquées 1. **CTA partout** : 9 boutons « Réserver » répartis sur la page (header, hero, Drakenfjord, infos, FAQ, CTA final, footer, barre mobile). 2. **CTA toujours visible** : header sticky + barre fixe mobile. 3. **Une seule couleur d'action** (orange) pour guider l'œil. 4. **Réassurance chiffrée** très tôt (15 000 visiteurs, 11e édition). 5. **Message « pour tous / familles »** répété, car la cible est le grand public, pas les habitués. 6. **FAQ anti-friction** juste avant le dernier CTA. 7. **Légère urgence** : « 2 jours seulement, les 5 & 6 septembre ». --- ## 4. À compléter / confirmer - URL Billetweb 2026 exacte (remplacer dans le HTML). - Horaires d'ouverture (mis « 10h-19h, à confirmer »). - Stationnement (mention générique pour l'instant). - Affiche / photos HD en fond de hero et en illustrations (les visuels SVG actuels sont des silhouettes décoratives de remplacement). - Tarifs : aucun affiché pour l'instant (par ton choix) ; la billetterie s'en charge. --- ## 5. SEO express (pour capter le grand public qui cherche « que faire à Lyon ») - Title : *Fort Fort Lointain 2026 · Fête médiévale & fantastique aux portes de Lyon* (déjà dans le HTML). - Meta description orientée sortie famille + Lyon (déjà dans le HTML). - Ajoute des mots-clés « sortie famille Lyon septembre », « festival médiéval fantastique Lyon » dans les textes. - Renseigne un balisage Event (date, lieu, billetterie) pour apparaître dans Google.