Guide complet du créateur de sites Web Odoo : concevoir, publier et optimiser

Le créateur de site Web d'Odoo transforme votre ERP en une plateforme Web complète. Contrairement aux créateurs de sites Web autonomes qui nécessitent des intégrations distinctes pour le commerce électronique, les formulaires CRM et les inscriptions à des événements, le créateur d'Odoo fonctionne directement avec les données de votre entreprise. Les pages de produits sont extraites de votre inventaire. Les formulaires de contact alimentent votre CRM. Les pages d'événements se connectent à votre module de gestion d'événements. Ce guide couvre tous les aspects de la création, de la gestion et de l'optimisation de sites Web avec Odoo.

Points clés à retenir

• Odoo Website Builder utilise un éditeur basé sur des blocs glisser-déposer avec plus de 150 blocs de contenu prédéfinis
• Les thèmes fournissent une base de conception de départ qui peut être personnalisée à tous les niveaux, y compris les couleurs, les polices, l'espacement et la mise en page.
• Les outils de référencement sont intégrés à l'éditeur de page avec gestion des balises méta en temps réel, contrôle de la structure des URL et génération de plan de site
• L'intégration du commerce électronique est native, extrayant les données sur les produits, les prix et l'inventaire directement à partir de votre base de données Odoo
• Le moteur de blog prend en charge la publication multi-auteurs avec des catégories, des balises et des structures d'URL optimisées pour le référencement.

Premiers pas avec le site Odoo

Activation du module de site Web

Installez le module Site Web depuis Applications > Site Web. Lors de la première installation, Odoo présente un assistant de configuration :

1. Choisissez un thème : faites votre choix parmi des thèmes gratuits et premium qui déterminent le langage de conception global
2. Configurer les informations sur l'entreprise : le nom de l'entreprise, le logo et les coordonnées remplissent automatiquement l'en-tête et le pied de page.
3. Sélectionnez les fonctionnalités : activez ou désactivez les blogs, le commerce électronique, les forums, les événements et d'autres fonctionnalités du site Web.
4. Définir le domaine : configurez votre nom de domaine personnalisé pour une utilisation en production

Après la configuration, accédez à Site > Tableau de bord pour accéder au hub de gestion du site Web affichant les pages, les analyses de trafic et les statistiques de commerce électronique.

L'éditeur de pages

L'éditeur glisser-déposer s'active lorsque vous cliquez sur Modifier sur n'importe quelle page. L'interface de l'éditeur se compose de :

Panneau de blocs (barre latérale gauche) : parcourez et faites glisser les blocs de contenu sur la page. Les blocs sont organisés par catégorie : en-têtes, fonctionnalités, texte, images, témoignages, prix, appels à l'action et pieds de page.

Panneau Propriétés (barre latérale droite) : configurez les propriétés de l'élément sélectionné, notamment l'espacement, les couleurs, les animations, les conditions de visibilité et le comportement réactif.

Édition en ligne : cliquez sur n'importe quel texte pour le modifier directement sur la page. Les outils de formatage de texte apparaissent dans une barre d'outils flottante.

Outils de mise en page : contrôles de grille et de colonnes pour une gestion précise de la mise en page. Chaque section prend en charge un nombre de colonnes configurable (1 à 6) avec des ratios de largeur personnalisés.

Conception et contenu des pages

Blocs de contenu

Odoo 19 comprend plus de 150 blocs de contenu organisés dans ces catégories :

Contenu dynamique

Les blocs de contenu dynamique extraient les données de votre base de données Odoo :

• Vitrine de produits : affiche les produits de votre catalogue avec les prix et la disponibilité en temps réel
• Articles de blog : affiche les entrées de blog récentes ou en vedette avec des extraits et des images
• Événements : répertorie les événements à venir avec des boutons d'inscription
• Offres d'emploi : affiche les postes ouverts à partir du module de recrutement
• Témoignages clients : extraits d'une base de données de témoignages gérée

Les blocs dynamiques se mettent à jour automatiquement lorsque les données sous-jacentes changent. L'ajout d'un nouvel article de blog se reflète immédiatement sur les pages utilisant le bloc blog.

HTML/CSS personnalisé

Pour une personnalisation avancée au-delà de l'éditeur visuel, Odoo propose :

• Bloc HTML : Insérez du HTML personnalisé n'importe où sur une page
• CSS personnalisé : ajoutez du CSS spécifique à une page ou à l'ensemble du site dans Site Web > Configuration > Paramètres > CSS personnalisé
• JavaScript personnalisé : ajoutez des scripts de suivi, des widgets ou des éléments interactifs

Accédez à l'éditeur de code en sélectionnant un bloc et en cliquant sur le bouton d'affichage du code. Le code personnalisé persiste malgré les modifications du thème, bien que les mises à jour du thème puissent nécessiter des ajustements CSS.

Personnalisation du thème

Paramètres du thème

Personnalisez le thème actif dans Site Web > Configuration > Thème :

Couleurs : définissez les couleurs primaires, secondaires, d'accentuation et d'arrière-plan. Le thème applique ces couleurs de manière cohérente sur tous les blocs et éléments de l'interface utilisateur. Odoo génère une palette de couleurs complète à partir de vos sélections, y compris les états de survol, les couleurs du texte et les couleurs des bordures.

Typographie : choisissez des familles de polices pour les titres et le corps du texte à partir de Google Fonts ou téléchargez des polices personnalisées. Définissez les tailles de base, les hauteurs de ligne et l’espacement des lettres.

Mise en page : configurez la largeur du contenu, l'espacement des sections, le rayon des bordures et les styles d'ombre qui s'appliquent globalement.

Boutons : stylisez les boutons principaux et secondaires avec des couleurs personnalisées, un rayon de bordure, un remplissage et des effets de survol.

Conception réactive

Chaque bloc dans Odoo est réactif par défaut. L'éditeur propose trois modes de prévisualisation :

• Bureau : vue pleine largeur pour les écrans de plus de 1 200 px
• Tablette : vue moyenne pour les écrans 768-1 199 px
• Mobile : vue étroite pour les écrans inférieurs à 768 px

Les éléments peuvent être masqués sur des points d'arrêt spécifiques à l'aide de la bascule de visibilité dans le panneau des propriétés. Les dispositions de colonnes s'empilent automatiquement verticalement sur mobile, sauf si elles sont remplacées.

Configuration du référencement

SEO au niveau de la page

Chaque page dispose de contrôles SEO accessibles via l'onglet Promouvoir de l'éditeur de page :

• Meta title : balise de titre affichée dans les résultats de recherche (50 à 60 caractères recommandés)
• Méta description : la description affichée dans les résultats de recherche (150 à 160 caractères recommandés)
• URL slug : Le chemin de l'URL de la page (généré automatiquement à partir du titre, modifiable)
• URL canonique : spécifiez la version canonique pour les pages avec plusieurs URL
• Indexation : indiquez si la page doit apparaître dans les index des moteurs de recherche

Référencement technique

Odoo gère automatiquement plusieurs exigences techniques en matière de référencement :

• Sitemap.xml : généré automatiquement à /sitemap.xml avec toutes les pages indexées
• Robots.txt : le fichier robots.txt par défaut autorise tous les robots ; personnaliser sur Site Web > Configuration > SEO
• Données structurées : les pages produits incluent automatiquement le balisage de schéma JSON-LD
• URL propres : structure d'URL optimisée pour le référencement avec des slugs configurables
• Redirections 301 : configurez les redirections sur Site Web > Configuration > Redirections
• Balises Hreflang : générées automatiquement pour les sites Web multilingues

Optimisation des images

Odoo 19 optimise automatiquement les images :

• Conversion WebP : les images téléchargées sont diffusées en tant que WebP sur les navigateurs pris en charge
• Images réactives : l'attribut srcset fournit des images de taille appropriée par appareil
• Chargement paresseux : les images sous la ligne de flottaison se chargent lors du défilement
• Texte alternatif : le panneau des propriétés de l'image comprend des champs de texte alternatif pour l'accessibilité et le référencement.

Intégration du commerce électronique

Pages produits

Les pages de produits du site Web Odoo extraient les données directement de votre catalogue de produits. Principales caractéristiques :

• Variantes de produits : sélecteurs de couleurs, de tailles et autres variantes avec images et prix spécifiques aux variantes
• Affichage de l'inventaire : État du stock en temps réel (en stock, stock faible, en rupture de stock)
• Tarif dynamique : mise à jour des prix en fonction des listes de prix, des promotions et des groupes de clients
• Comparaison de produits : comparaison côte à côte de quatre produits maximum
• Avis et notes : système d'avis clients avec modération

Panier et paiement

Le flux de paiement s'intègre aux modules de vente, de comptabilité et d'expédition d'Odoo :

1. Panier : ajout au panier alimenté par Ajax avec liste déroulante du mini-panier
2. Expédition : calcul des tarifs d'expédition en temps réel à partir des transporteurs configurés
3. Paiement : Plusieurs fournisseurs de paiement (Stripe, PayPal, Authorize.net, virement bancaire)
4. Confirmation de commande : Création automatique de commande dans le module Ventes
5. Facture : Génération automatique de facture dans le module Comptabilité

Gestion du catalogue

Gérez votre catalogue en ligne sur Site Web > Commerce électronique > Produits :

• Publié/non publié : Contrôlez quels produits apparaissent sur le site Web
• Catégories : organisez les produits en catégories hiérarchiques pour la navigation
• Attributs et filtres : activer le filtrage à facettes par attributs de produit
• Options de tri : Configurez le tri par défaut (prix, nom, plus récent, plus vendu)
• Modèles de produits : disposition des contrôles et affichage des informations par catégorie de produits

Gestion des blogs

Création d'articles de blog

Le moteur de blog sur Site > Blog prend en charge la publication multi-auteur :

1. Créez un nouvel article à partir de la page d'index du blog ou du backend
2. Rédigez du contenu en utilisant le même éditeur glisser-déposer que les pages standards
3. Définir les métadonnées : auteur, catégorie, balises, date de publication
4. Prévisualisez et publiez

Référencement des blogs

Les articles de blog incluent des contrôles SEO supplémentaires :

• Marquage d'auteur : balisage de personne Schema.org pour les pages d'auteur
• Schéma de l'article : données structurées BlogPosting avec datePublished, dateModified et author
• Balises Open Graph : métadonnées de partage social pour Facebook, Twitter et LinkedIn
• Contrôle d'extrait : Définissez l'extrait affiché dans les résultats de recherche et les partages sociaux

Stratégie de contenu

Le blog d'Odoo prend en charge les workflows de marketing de contenu :

• Statut brouillon/publié : rédigez et révisez les articles avant de les publier.
• Publication programmée : définissez les dates de publication futures
• Catégories et balises : organisez le contenu pour la navigation et le référencement
• Articles associés : suggérez automatiquement du contenu associé en fonction des balises et des catégories

Sites Web multilingues

Configuration de la langue

Configurez les langues du site Web dans Site Web > Configuration > Langues :

1. Installez les langues souhaitées à partir de la liste des langues
2. Activer les langues pour l'interface du site Web
3. Définissez la langue par défaut
4. Configurez la stratégie URL (sous-répertoire /fr/ ou sous-domaine fr.example.com)

Flux de travail de traduction

Traduisez le contenu du site Web via l'éditeur frontend :

1. Passez à la langue cible à l'aide du sélecteur de langue
2. Cliquez sur Traduire pour passer en mode traduction
3. Les blocs de texte traduisibles sont surlignés en jaune
4. Cliquez sur chaque bloc et entrez la traduction
5. Enregistrez les traductions par page

Le backend fournit une fonction d'exportation/importation de traduction pour les flux de travail de traduction groupée dans Paramètres > Traductions.

Optimisation des performances

Optimisations intégrées

Odoo 19 comprend plusieurs fonctionnalités de performances :

• Prise en charge du CDN : configurez un CDN sur Site Web > Configuration > Paramètres pour la livraison d'actifs statiques
• Minification des actifs : CSS et JavaScript sont automatiquement minifiés en production
• Mise en cache de page : mise en cache de page complète pour les visiteurs anonymes
• Optimisation des requêtes de base de données : les pages du site Web génèrent des requêtes optimisées via l'ORM

Meilleures pratiques en matière de performances

• Optimiser les images avant de les télécharger (moins de 200 Ko pour la plupart des images de contenu)
• Limiter le JavaScript personnalisé aux fonctionnalités essentielles
• Utilisez les blocs intégrés d'Odoo plutôt que le HTML personnalisé lorsque cela est possible
• Activer le CDN pour les sites avec un trafic international
• Surveillez les temps de chargement des pages via Site Web > Rapports > Analytics

Services du site Web ECOSIRE

Construire un site Web efficace dans Odoo nécessite à la fois une expertise en conception et des connaissances ERP. Les services de personnalisation Odoo d'ECOSIRE incluent le développement de thèmes personnalisés, la création de blocs et l'optimisation du commerce électronique. Notre équipe de mise en œuvre gère la configuration complète du site Web, de la conception au lancement, garantissant ainsi que votre site Web s'intègre parfaitement à vos opérations commerciales.

Lecture connexe

• Guide de référencement du site Web et du commerce électronique Odoo
• Odoo eCommerce pour la mode et l'habillement
• Vente multicanal avec Odoo
• Gestion des retours Odoo pour le commerce électronique
• Guide d'intégration Odoo Shopify

Puis-je utiliser un domaine personnalisé avec le créateur de site Web d'Odoo ?

Oui. Configurez votre domaine personnalisé dans Site Web > Configuration > Paramètres. Pointez les enregistrements DNS de votre domaine vers votre serveur Odoo (un enregistrement pour les auto-hébergés, CNAME pour Odoo.sh). Les certificats SSL sont gérés automatiquement sur Odoo.sh ou peuvent être configurés manuellement pour les déploiements auto-hébergés.

Le créateur de site Web Odoo prend-il en charge l'adhésion ou le contenu sécurisé ?

Odoo prend en charge le contenu sécurisé via le système d'accès au portail. Les pages peuvent être limitées aux utilisateurs connectés et des blocs de contenu spécifiques peuvent être affichés de manière conditionnelle en fonction des groupes d'utilisateurs. Pour les fonctionnalités complètes du site d'adhésion (accès payant, contenu à plusieurs niveaux), des modules de développement personnalisés ou de communauté étendent la fonctionnalité de base.

Comment les performances du site Web Odoo se comparent-elles à celles des constructeurs autonomes comme WordPress ?

Les sites Web Odoo se chargent de manière comparable aux sites WordPress avec une complexité de contenu similaire. L'avantage est qu'Odoo sert des données commerciales dynamiques (produits, inventaire, prix) sans appels API externes puisque tout réside dans la même base de données. Pour les sites riches en contenu, la configuration CDN et l'optimisation des images sont essentielles pour des temps de chargement compétitifs.