Guide complet des blocs de construction de site web
Les blocs de construction sont le fondement du Website Builder d'Odoo. Ces modules de contenu preconçus et personnalisables vous permettent de construire des pages web professionnelles sans ecrire de code. Avec plus de 60 blocs differents disponibles, vous pouvez creer pratiquement n'importe quel type de page web.
Pour commencer : Accedez aux blocs de construction en cliquant sur Edit sur n'importe quelle page, puis selectionnez l'onglet Blocks dans la barre laterale gauche.
Comprendre les categories de blocs
Les blocs de construction sont organises en quatre categories principales, chacune servant un objectif specifique :
| Categorie | Objectif | Exemples |
|---|---|---|
| Structure | Fournissent la mise en page et le cadre de base de vos pages. Ils creent l'architecture globale de la page. | Bannieres, Sections de couverture, Colonnes, Blocs de contenu, Sections parallaxe, Conteneurs pleine largeur |
| Fonctionnalites | Mettent en valeur les produits, services, membres de l'equipe ou competences. Ideaux pour le contenu marketing. | Listes de fonctionnalites, Tableaux comparatifs, Cartes de tarification, Sections equipe, Temoignages, Compteurs de statistiques |
| Contenu dynamique | Elements interactifs qui se connectent a vos donnees backend ou a des services externes. | Formulaires, Affichages de produits, Articles de blog, Evenements, Codes d'integration (YouTube, Maps, Reseaux sociaux) |
| Contenu interne | Elements plus petits conçus pour etre places a l'interieur d'autres blocs. Ne peuvent pas fonctionner seuls. | Boutons, Icones, Images, Zones de texte, Separateurs, Espaceurs, Cartes |
Ajouter des blocs de construction a votre page
- Passer en mode edition : Naviguez vers votre page et cliquez sur le bouton Edit dans la barre d'outils superieure
- Ouvrir le panneau des blocs : Cliquez sur l'onglet Blocks dans la barre laterale gauche pour voir tous les blocs disponibles
- Parcourir les categories : Faites defiler les sections Structure, Fonctionnalites, Contenu dynamique ou Contenu interne
- Glisser-deposer : Cliquez et faites glisser n'importe quel bloc sur votre page. Un indicateur bleu montre ou il sera place
- Selectionner des modeles : Pour les blocs de categorie, une fenetre contextuelle apparait vous permettant de choisir parmi plusieurs modeles preconçus
- Personnaliser : Cliquez sur le bloc pour acceder aux options de personnalisation dans le panneau de droite
Blocs de structure en detail
Les blocs de structure forment le squelette de votre page. Voici les plus couramment utilises :
Blocs Banniere / Couverture
- Bannieres plein ecran avec images ou videos d'arriere-plan
- Effets parallaxe qui creent de la profondeur lors du defilement
- Superpositions en degrade pour la lisibilite du texte
- Boutons d'appel a l'action affiches de maniere proeminente
Mises en page en colonnes
- Dispositions a 2, 3, 4 ou 6 colonnes avec des largeurs flexibles
- Colonnes asymetriques (par ex. repartition 1/3 + 2/3)
- Comportement adaptatif - les colonnes s'empilent sur mobile
- Controles d'espacement pour l'espace entre les colonnes
Sections de contenu
- Blocs de texte avec titres et paragraphes
- Combinaisons image + texte
- Sections de citation pour les temoignages
- Sections accordeon pour les FAQ
Blocs de contenu dynamique
Ces blocs puissants se connectent a votre backend Odoo ou a des services externes :
Bloc Formulaire
Creez des formulaires qui collectent les informations des visiteurs et creent automatiquement des enregistrements dans votre base de donnees.
- Options d'action : Envoyer un e-mail, Creer un prospect, Creer une opportunite, Creer un ticket, S'abonner a la newsletter
- Types de champs : Texte, E-mail, Telephone, Liste deroulante, Case a cocher, Date, Telechargement de fichier
- Validation : Champs obligatoires, validation du format e-mail, modeles personnalises
- Actions de succes : Afficher un message, rediriger vers une page, afficher une fenetre contextuelle
- Protection anti-spam : Integration reCAPTCHA integree
Bloc Produits (e-commerce)
Affichez les produits de votre boutique avec differentes mises en page :
- Modes d'affichage : Les plus recents, Meilleures ventes, En vedette, Par categorie
- Options de mise en page : Grille (2-6 colonnes), Carrousel, Vue en liste
- Informations produit : Afficher/masquer les prix, les notes, les boutons d'ajout au panier
- Filtrage : Par categorie, fourchette de prix, attributs
Bloc Code d'integration
Integrez du contenu tiers de maniere transparente :
- Videos : Integrations YouTube, Vimeo, Wistia
- Cartes : Google Maps, OpenStreetMap
- Reseaux sociaux : Publications Instagram, flux Twitter, widgets Facebook
- Autres : Calendly, TypeForm, iframes personnalises
Bloc Articles de blog
- Affichez automatiquement les articles de blog recents
- Filtrez par categorie ou etiquette
- Choisissez une mise en page en grille ou en liste
- Controlez le nombre d'articles affiches
Personnaliser les arriere-plans des blocs
Chaque bloc prend en charge une personnalisation etendue de l'arriere-plan :
| Option | Description |
|---|---|
| Couleurs unies | Choisissez parmi les couleurs du theme ou des valeurs hexadecimales personnalisees |
| Degrades | Degrades lineaires ou radiaux avec plusieurs points de couleur |
| Images | Telechargez des images ou selectionnez dans la bibliotheque Unsplash (gratuites, libres de droits) |
| Videos | Videos d'arriere-plan en boucle (MP4, WebM) |
| Motifs | Motifs et textures repetitifs |
| Formes | Formes SVG decoratives (vagues, courbes, angles) |
| Filtres | Flou, luminosite, contraste, niveaux de gris, sepia |
| Superpositions | Superpositions de couleur avec controle de l'opacite |
Controles de mise en page et d'espacement
Systeme de grille
Le Website Builder utilise un systeme de grille a 12 colonnes base sur Bootstrap :
- Faites glisser les bordures des colonnes pour les redimensionner (les colonnes s'alignent sur la grille)
- Utilisez les controles de decalage pour ajouter de l'espace avant les colonnes
- Definissez differentes largeurs de colonnes pour ordinateur, tablette et mobile
Marges internes et externes
- Marge interne verticale : Utilisez les poignees en haut/bas des blocs pour ajuster
- Valeurs de marge interne : Incrementes de 8px (0, 8, 16, 24, 32... jusqu'a 256px)
- Preselections rapides : Petit, Moyen, Grand, Tres grand
Gerer les blocs de construction
Deplacer les blocs
- Faites glisser les blocs a l'aide de la poignee de deplacement (apparait au survol)
- Les blocs peuvent etre deplaces au sein des sections ou entre les sections
- Utilisez les fleches du clavier pour un positionnement precis
Dupliquer les blocs
- Cliquez sur le bloc et selectionnez Duplicate dans la barre d'outils
- La copie apparait directement sous l'original
- Tout le contenu et le style sont preserves
Enregistrer des blocs personnalises
Creez des modeles de blocs reutilisables :
- Personnalisez un bloc exactement comme vous le souhaitez
- Cliquez sur le bloc pour le selectionner
- Cliquez sur Save dans la barre d'outils du bloc
- Nommez votre bloc personnalise
- Retrouvez-le plus tard dans la section Custom du panneau des blocs
Supprimer les blocs
- Selectionnez le bloc et appuyez sur Delete ou cliquez sur l'icone de la corbeille
- Utilisez Ctrl+Z pour annuler si necessaire
Creer des liens d'ancrage
Activez le defilement fluide vers des sections specifiques :
- Selectionnez le bloc cible (ou vous souhaitez faire defiler)
- Dans les options du bloc, trouvez Anchor
- Entrez un nom d'ancrage unique (par ex. « contact-section »)
- Creez un lien ou un bouton avec l'URL
#contact-section - Cliquer sur le lien fait defiler en douceur jusqu'a cette section
Bonnes pratiques
Conseils de design
- Coherence : Utilisez les memes styles de blocs sur l'ensemble de votre site
- Espaces blancs : Ne surchargez pas les pages ; utilisez les marges internes genereusement
- Hierarchie : Utilisez des blocs plus grands pour le contenu important
- Mobile en priorite : Testez chaque page sur les appareils mobiles
- Performance : Optimisez les images avant de les telecharger
Erreurs courantes a eviter
- Imbriquer des blocs de structure dans d'autres blocs de structure
- Utiliser trop de styles de blocs differents sur une seule page
- Ignorer l'aperçu mobile avant de publier
- Telecharger des images tres volumineuses sans optimisation
- Oublier d'enregistrer les blocs personnalises que vous souhaitez reutiliser
Raccourcis clavier
| Ctrl+Z | Annuler la derniere action |
| Ctrl+Y | Retablir |
| Ctrl+S | Enregistrer les modifications |
| Delete | Supprimer le bloc selectionne |
| Ctrl+D | Dupliquer le bloc selectionne |
| Escape | Deselectionner / Quitter le mode edition |