Se rendre au contenu

Créer un site vitrine professionnel avec Odoo 19

Saison 5 · Article 1/6 — Site Web, eCommerce & Engagement
26 avril 2026 par
Créer un site vitrine professionnel avec Odoo 19
B.Mustapha

Saison 5 · Article 1/6 — Site Web, eCommerce & Engagement

Créer un site vitrine professionnel avec Odoo 19

Plus besoin d'agence externe ni de WordPress séparé pour avoir un site web pro. Odoo 19 intègre nativement un CMS visuel — pages, menus, snippets, formulaires, SEO — couplé directement à votre CRM, vos produits et votre back-office. Voici comment InfoSphere a monté son site vitrine en moins d'une journée.

Ce que vous allez apprendre

Activer le module Site Web

Installer et configurer la marque, langues et thème de base.

Construire vos pages

Glisser-déposer des snippets pour bâtir Home, À propos, Services.

Organiser le menu

Gérer la navigation, les sous-menus et l'arborescence.

Activer le formulaire de contact

Capturer les leads directement dans le CRM Odoo.

L'architecture Website d'Odoo 19

Un site Odoo, c'est un assemblage de pages qui déclinent un thème, organisées par un menu, avec des snippets visuels et des formulaires connectés au back-office.

🎨 Thème global · couleurs · typographie · header/footer website.theme — appliqué à toutes les pages 📄 Home website.page #4 URL = / 📄 À propos website.page URL = /a-propos 📄 Services website.page URL = /services 📩 Contact + formulaire → CRM crm.lead créé auto 🧭 Menu — relie chaque page à une entrée navigable website.menu — drag & drop pour réordonner / hiérarchiser

InfoSphere se met en ligne

Jusqu'ici, InfoSphere n'avait qu'une fiche Google et un compte LinkedIn. Avec l'arrivée de deux nouveaux commerciaux (cf. Saison 4), la direction veut un site web vitrine pour :

  • Capter les leads entrants (formulaire contact → CRM)
  • Présenter les 3 pôles de services (intégration Odoo, IT, mobilier)
  • Renforcer la crédibilité face à des prospects internationaux
  • Préparer le terrain pour la boutique eCommerce (article 3/4)

Le module Site Web d'Odoo 19 répond à tous ces besoins, sans qu'il soit nécessaire d'apprendre HTML, CSS ou JavaScript.

Étape 1 — Activer le module Site Web

Le module website est l'un des plus puissants d'Odoo. Il installe automatiquement plusieurs dépendances : web_editor (éditeur visuel), portal (espace client) et un thème de base.

  1. Va dans Apps
  2. Recherche « Site Web » ou Website Builder
  3. Clique sur Installer

Une fois installé, un nouveau menu Site Web apparaît. La première fois que tu y accèdes, Odoo te propose un assistant de configuration qui te demande :

  • Le nom du site (ex : InfoSphere)
  • Le secteur d'activité (Odoo adapte les couleurs et exemples)
  • Les fonctionnalités attendues (boutique, blog, événements...)
Page d'accueil par défaut du site InfoSphere

La page d'accueil par défaut générée par Odoo — point de départ entièrement personnalisable.

Étape 2 — Découvrir le Website Builder

L'éditeur visuel est le cœur du module. On y accède en cliquant sur le bouton « Modifier » en haut à droite quand on visite une page. Il s'ouvre en plein écran avec :

📦 Panneau Snippets (gauche)

Bibliothèque de blocs réutilisables : bannières, témoignages, prix, FAQ, équipe, formulaires... À glisser dans la page.

🎨 Panneau Personnalisation (droite)

Quand on sélectionne un élément, on voit ses propriétés modifiables : couleurs, espacement, alignement, animation.

Vue du Website Builder avec snippets et panneau de personnalisation

Le Website Builder en action — édition WYSIWYG avec aperçu temps réel.

Étape 3 — Créer des pages personnalisées

Au-delà de la Home, InfoSphere a besoin de 2 pages clés : À propos et Services.

Menu : Site Web → Pages → Nouveau (ou bouton « + Nouveau » en haut à droite).

Au choix :

  • Page vide — démarrage from scratch, on assemble les snippets manuellement
  • Page depuis modèle — Odoo propose des templates par usage (À propos, Tarifs, Équipe...)

Pour InfoSphere, on a créé :

URLTitreSnippets utilisés
/a-proposÀ propos d'InfoSphereBannière + Texte + Liste valeurs
/servicesNos servicesBannière + 3 colonnes (cartes services)
/contactusContact Us (généré auto)Formulaire + carte Google
Page Services InfoSphere avec 3 colonnes services

La page Services en mode visiteur — 3 cartes pôles d'expertise.

Étape 4 — Organiser le menu de navigation

Le menu principal du site est géré dans Site Web → Configuration → Menus. Chaque entrée pointe vers une page interne (URL relative) ou un lien externe.

Trois opérations courantes :

  • Ajouter une entrée — bouton + Nouveau, choisir page cible et libellé
  • Réordonner — drag & drop des lignes (champ sequence)
  • Hiérarchiser — créer un sous-menu en imbriquant sous un parent
Configuration du menu principal InfoSphere

Le menu actuel : Home, À propos, Services, Jobs, Contact — ordre contrôlé par séquence.

Astuce : les pages générées par d'autres modules (Recrutement → /jobs, eCommerce → /shop) s'intègrent automatiquement dans le menu si tu les publies. Pas besoin de doublonner la config.

Étape 5 — Brancher le formulaire de contact au CRM

Le snippet Formulaire est l'un des plus puissants : il crée automatiquement un enregistrement dans le modèle de ton choix à chaque soumission. Pour InfoSphere, on l'a configuré pour générer un lead dans le CRM (cf. article #46 — Le CRM).

Configuration en 3 clics :

  1. Dans le builder, sélectionne le formulaire
  2. Dans le panneau de droite, change « Action » de « Send an email » à « Create a Lead »
  3. Mappe les champs (Nom, Email, Téléphone, Message) sur les champs CRM
Page Contact InfoSphere avec formulaire opérationnel

La page Contact — chaque soumission crée un lead dans le pipeline CRM.

Bonne pratique InfoSphere : le lead arrive avec une étiquette « Source: site web », ce qui permet au commercial Amina de prioriser les contacts entrants vs prospection.

Étape 6 — Vérifier le rendu mobile et le SEO

Tous les snippets Odoo sont responsive par défaut, mais il est essentiel de prévisualiser :

  • Dans le builder, bouton « Mobile » (icône smartphone) — bascule l'aperçu
  • Tester la navigation (menu burger, formulaires, boutons)
  • Vérifier les tailles d'images (Odoo génère automatiquement plusieurs résolutions)

Côté SEO, chaque page expose dans Options de la page → SEO :

  • Title — visible sur l'onglet et les SERP Google (60 caractères max)
  • Meta description — résumé sous le titre dans les SERP (160 caractères)
  • Slug URL — modifiable, composé de mots-clés ciblés
  • Sitemap auto-généré (/sitemap.xml) à soumettre à Google Search Console
Aperçu mobile du site InfoSphere

Aperçu mobile : menu burger, layout adapté, snippets stackés verticalement.

Étape 7 — Préparer le multilingue (optionnel)

InfoSphere vise le marché algérien (français), mais aussi l'export vers le Maghreb et l'Europe. Odoo gère le multilingue natif :

  1. Active les langues nécessaires dans Configuration → Langues
  2. Ouvre le builder, bouton traduire (icône globe)
  3. Saisie ou import de traductions par chaîne (.po)

Le sélecteur de langue apparaît automatiquement dans le header du site. Les URLs sont préfixées (/fr/services, /en/services).

Le résultat pour InfoSphere

En une demi-journée de travail, InfoSphere dispose désormais d'un site vitrine professionnel :

5

pages publiées (Home, À propos, Services, Jobs hérité, Contact)

100%

responsive — aperçu mobile / tablette / desktop intégré

CRM

connecté — chaque formulaire devient un lead exploitable par l'équipe

Plus besoin d'agence pour ajuster un texte ou changer un visuel : Mustapha (DG) ou un membre de l'équipe peut éditer en direct, en mode visuel, et publier en un clic.

Récapitulatif — Les bonnes pratiques

  • ✅ Démarre avec le thème par défaut, customise progressivement
  • ✅ Utilise des snippets natifs avant de coder du HTML custom
  • ✅ Mappe les formulaires sur tes modèles (CRM, événements...)
  • ✅ Renseigne le SEO (title + meta) sur chaque page importante
  • ✅ Teste le rendu mobile avant chaque publication
  • ✅ Soumets ton sitemap.xml à Google Search Console

En résumé

Le module Site Web d'Odoo 19 est un véritable CMS visuel intégré à l'ERP. Pour une PME comme InfoSphere, c'est la fin de la dépendance aux agences externes pour les changements éditoriaux courants. Et surtout, la connexion native au CRM, aux RH (Jobs) et bientôt à l'eCommerce fait converger toutes les sources de leads dans le même back-office.

Prochaine étape (S5·2/4) : enrichir le site avec un blog professionnel et un forum communautaire pour fidéliser audience et clients.

🛍 Approfondir — Site web & eCommerce

Autres articles du même domaine :

Blog & Forum

Site Web, eCommerce & Engagement

Boutique eCommerce

Site Web, eCommerce & Engagement

eLearning cours en ligne

Site Web, eCommerce & Engagement

Suite de la Saison 5 — Site Web, eCommerce & Engagement

Articles complémentaires

Sur les mêmes thématiques : #intermediaire#cas-pratique

Recrutement RH

👥 Ressources humaines · Saison 4

Congés & Présence RH

👥 Ressources humaines · Saison 4

Blog & Forum

🛍 Site web & eCommerce · Saison 5

Congés, absences et temps de présence dans Odoo 19
Saison 4 · Article 3/3 — Ressources Humaines