Blocs de construction

Vous pouvez concevoir votre site Web en faisant glisser et en déposant des blocs de construction, puis en les modifiant pour répondre à vos besoins de contenu et de mise en page.

Voir également

Tutoriel Odoo : concevoir son site web : texte et couleurs <https://www.odoo.com/slides/slide/design-your-website-text-and-colors-6930?fullscreen=1>

Ajouter un bloc de construction

Pour ajouter un bloc à une page de site web, accéder à la page, cliquer sur Modifier, puis glisser-déposer le bloc de construction souhaité à l’emplacement approprié. Deux types de blocs de construction sont disponibles : Catégories et Contenu interne. Les blocs de construction Contenu interne ne peuvent être ajoutés que dans les blocs de construction Catégories.

Lorsqu’on clique sur un bloc de catégorie, une fenêtre contextuelle apparaît, permettant de sélectionner entre plusieurs modèles pour chaque catégorie.

Astuce

Rechercher un bloc spécifique dans la fenêtre contextuelle Insérer un bloc à l’aide de la barre de recherche.

Fenêtre contextuelle de sélection de blocs

Une fois le bloc de catégorie placé, vous pouvez glisser-déposer des blocs Contenu interne à l’intérieur. Les blocs Contenu interne permettent d’ajouter des éléments, tels que des vidéos, des images, des boutons de réseaux sociaux, etc., dans des blocs de catégorie préexistants.

Note

  • Il est également possible d’ajouter un bloc de construction sur la page de connexion. Pour ce faire, naviguer vers la page d’accueil du site Web, ajouter /web/login à l’URL et appuyer sur Entrée.

  • L’accès à certains blocs nécessite l’installation de leur application ou module respectif (par ex., eCommerce pour le bloc Produits).

Example

Ajouter tous vos comptes de réseaux sociaux en un seul endroit avec le bloc de contenu interne Réseaux sociaux. Activer ou désactiver le bouton à côté de la plateforme souhaitée et copier-coller l’URL de votre compte.

Bloc de contenu interne Réseaux sociaux

Formulaire

Le bloc Formulaire sert à collecter des informations auprès des visiteurs du site Web et, le cas échéant, à créer des enregistrements dans votre base de données. Pour ajouter un formulaire à une page du site Web, glisser-déposer le bloc de catégorie Contact et formulaires, puis sélectionner un bloc dans la fenêtre contextuelle.

Exemple de bloc de formulaire

Action

Par défaut, lorsque le formulaire est soumis, un e-mail contenant les informations saisies par le visiteur est automatiquement envoyé. Selon les applications installées sur votre base de données, des actions supplémentaires permettant de créer automatiquement des enregistrements peuvent devenir disponibles. Pour choisir une autre action, cliquer sur Modifier, cliquer sur le formulaire, naviguer vers l’onglet Style et sélectionner l”Action souhaitée :

Par défaut, la soumission du formulaire redirige les visiteurs vers une page de remerciement. Utiliser le champ URL pour les envoyer vers une autre page. Vous pouvez également choisir de ne pas rediriger et de les garder sur la page du formulaire en sélectionnant Rien ou Afficher un message dans le champ En cas de succès.

Champs

Pour ajouter un nouveau champ au formulaire, naviguer vers l’onglet Style et cliquer sur le bouton + Champ à côté de la section Formulaire ou Champ. Pour modifier n’importe quel champ du formulaire, sélectionner le champ, puis utiliser les options disponibles dans la section Champ de l’onglet Style. Par exemple, il est possible de :

  • Modifier le champ Type.

    Astuce

    Il est également possible de sélectionner un Champ existant de la base de données et d’utiliser les données qu’il contient. Les champs disponibles dépendent de l’action sélectionnée. Les champs de propriété ajoutés à la base de données peuvent également être utilisés.

    Tous les types de champs de formulaire

    Certains champs sont visuellement similaires, mais les données saisies doivent suivre un format spécifique.

  • Modifier le champ Libellé et adapter sa Position.

  • Activer un champ Description. Activer le bouton à bascule et cliquer sur la description par défaut du formulaire pour la modifier.

  • Ajouter un Placeholder ou une Valeur par défaut.

  • Spécifier si le champ est Required.

  • Modifier les paramètres de visibilité du champ.

  • Ajouter une animation.

Une fois les modifications souhaitées effectuées, cliquer sur Save.

Ajouter un formulaire de contact Odoo sur un site web non Odoo

Vous pouvez afficher un formulaire de contact Odoo sur un autre site web en utilisant une iframe. Pour ce faire, suivre ces étapes :

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.

  2. Générer un code intégrable : Copier l’URL de la page du formulaire Odoo et la coller dans un générateur d’iframe, tel que La Digitale.dev ou iFrame Generator. Ajuster la largeur et la hauteur pour un affichage correct.

  3. Ajouter le code intégré au site web non Odoo : Ouvrir le HTML de la page concernée (dans l’éditeur de code ou le CMS) et insérer le code intégré à l’endroit où le formulaire doit être affiché.

Example

Exemple de code intégré :

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Embed code

Le code d’intégration permet d’intégrer du contenu provenant de services tiers dans une page, tels que des vidéos de YouTube, des cartes de Google Maps, des publications de réseaux sociaux d’Instagram, etc.

Après avoir glissé-déposé le bloc Embed Code de la section Inner Content dans une page, cliquer sur le bloc, puis aller dans l’onglet Style et cliquer sur Edit. Remplacer le code provisoire par votre code d’intégration personnalisé.

Ajouter le lien vers le code intégré que vous souhaitez pointer

Avertissement

Ne pas copier/coller du code que vous ne comprenez pas, car cela pourrait mettre vos données en danger.

Déplacer, échanger, dupliquer ou supprimer un bloc de construction

Tirer les bordures turquoise du bloc pour réduire ou augmenter l’espace en haut ou en bas de celui-ci.

Modifier l’ordre des blocs en cliquant sur (chevron up) ou (chevron down) et déplacer le bloc sur la page en cliquant sur (arrows). Lorsque vous avez plusieurs colonnes, déplacer une colonne vers la gauche ou la droite en cliquant sur (chevron left) ou (chevron right).

Pour dupliquer un bloc de construction, cliquer sur (duplicate). Une fois dupliqué, le nouveau bloc apparaît sur la page sous l’original.

Astuce

Alternativement, cliquer sur l’icône (duplicate) en haut de l’onglet Style pour dupliquer le bloc sélectionné.

Pour supprimer un bloc, cliquer sur (trash).

Étendre les marges d'un bloc de construction

Modifier un bloc de construction

Pour modifier le contenu d’un bloc de construction, cliquer dessus et aller dans l’onglet Style. Les options de personnalisation disponibles varient selon le type de bloc sélectionné.

Voir également

Arrière-plan

Pour modifier l’arrière-plan d’un bloc de construction, sélectionner le bloc, aller dans l’onglet Style, et cliquer sur le point de couleur ou une autre option Background. Vous pouvez modifier la couleur et/ou ajouter une image, une vidéo et/ou une forme. Une fois une forme sélectionnée, de nouveaux champs apparaissent pour personnaliser la forme.

Astuce

  • Positionner un élément (image, texte, etc.) derrière ou devant un autre en utilisant les icônes Send to back ou Bring to front.

    Modifier la position du bloc

  • Pour redimensionner un bloc, cliquer et faire glisser les points autour de ses bords pour l’ajuster selon les besoins.

    Adapter la taille du bloc

Voir également

Thème général

Disposition : grille et colonnes

Pour la plupart des blocs de construction, vous pouvez choisir entre deux styles de mise en page : grid ou columns (cols). Pour modifier le style de mise en page par défaut, cliquer sur le bloc, aller dans l’onglet Style, et définir le champ Layout sur Grid ou Cols.

Grille

La disposition Grille permet de repositionner et redimensionner des éléments, tels que des images ou du texte, par glisser-déposer. Lorsque Grille est sélectionnée, des options supplémentaires sont disponibles pour Ajouter des éléments en cliquant sur Image, Texte ou Bouton.

Lorsque la disposition en grille est sélectionnée, choisir une image et la glisser-déposer où nécessaire.

Col.

Choisir la mise en page Cols permet de déterminer le nombre d’éléments par ligne dans le bloc. Pour ce faire, sélectionner le bloc à modifier, cliquer sur le menu déroulant à côté du champ Cols, et ajuster le nombre. Vous pouvez ensuite modifier les paramètres d’une colonne spécifique en utilisant les options de la section Column de l’onglet Style.

Note

Par défaut, sur les appareils mobiles, un seul élément (colonne) est visible par ligne pour garantir que le contenu reste facilement lisible et accessible sur les petits écrans. Pour ajuster la valeur, cliquer sur (icône mobile) en haut de l’éditeur de site web et adapter le nombre de colonnes. Les formes sont masquées par défaut sur mobile.

Enregistrer un bloc de construction personnalisé

Vous pouvez enregistrer un bloc de construction personnalisé pour le réutiliser ailleurs. Pour ce faire, le sélectionner, aller dans l’onglet Style, et cliquer sur l’icône (floppy disk). Cliquer sur le bouton Save dans la fenêtre contextuelle pour confirmer l’enregistrement de votre bloc personnalisé.

Pour ajouter un bloc de construction enregistré à la page, accéder à l’onglet Blocs et glisser-déposer le bloc Personnalisé depuis la section Catégories. Dans la fenêtre qui s’ouvre, cliquer sur le bloc souhaité dans la catégorie Personnalisé.

Astuce

Dans la fenêtre Insérer un bloc, cliquer sur (modifier) pour renommer le bloc personnalisé ou sur (supprimer) pour le supprimer.