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.
Lorsque vous cliquez sur un bloc de catégorie, une fenêtre contextuelle apparaît, vous permettant de sélectionner parmi plusieurs modèles pour chaque catégorie.
Astuce
Rechercher également un bloc spécifique dans la fenêtre contextuelle Insérer un bloc en utilisant la barre de recherche.
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
L’accès à certains blocs nécessite l’installation de leur application ou module respectif (par exemple, 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.
Formulaire¶
Le bloc Formulaire est utilisé pour collecter des informations auprès des visiteurs du site web et créer des enregistrements dans votre base de données, le cas échéant. Pour ajouter un formulaire à une page de site web, glissez et déposez la catégorie Contact & Formulaires, puis sélectionnez le bloc 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 pouvant créer automatiquement des enregistrements peuvent devenir disponibles. Pour choisir une action différente, cliquer sur Modifier, cliquer sur le formulaire, accéder à l’onglet Personnaliser et sélectionner l”Action souhaitée :
Postuler à un emploi (Recrutement)
Créer un client (eCommerce)
Créer un ticket (Assistance)
Créer une opportunité (CRM)
S’abonner à la newsletter (E-mail Marketing)
Créer une tâche (Projet)
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, accédez à l’onglet Personnaliser et cliquez sur le bouton + Champ à côté de la section Formulaire ou Champ. Pour modifier le nouveau champ (ou tout autre champ) du formulaire, sélectionnez le champ, puis utilisez les options disponibles dans la section Champ de l’onglet Personnaliser. Par exemple, vous pouvez :
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.
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 une Description de champ. Cliquez 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 :
Préparer le formulaire Odoo : Créer un formulaire de contact sur une page dans le site web Odoo et supprimer le design de l’en-tête et le design du pied de page. S’assurer que seul le formulaire de contact reste sur la page.
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.
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 ajouté le bloc à une page, cliquez sur le bloc, puis accédez à l’onglet Personnaliser et cliquez sur Modifier. Remplacez le code par défaut par votre code d’intégration personnalisé.
Avertissement
Ne pas copier/coller du code que vous ne comprenez pas, car cela pourrait mettre vos données en danger.
Déplacer, changer 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 supprimer un bloc, cliquer sur (trash).
Astuce
Changez rapidement la catégorie du bloc en cliquant sur (échanger).
Modifier un bloc de construction¶
Pour modifier le contenu d’un bloc de construction, cliquez dessus et accédez à l’onglet Personnaliser. 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électionnez le bloc, accédez à l’onglet Personnaliser et cliquez sur le point de couleur ou une autre option Arrière-plan. Vous pouvez changer la couleur et/ou ajouter une image, une vidéo et/ou une forme. Une fois que vous avez sélectionné une forme, de nouveaux champs apparaissent pour vous permettre de 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.
Pour redimensionner un bloc, cliquer et faire glisser les points autour de ses bords pour l’ajuster selon les besoins.
Voir également
Disposition : grille et colonnes¶
Pour la plupart des blocs de construction, vous pouvez choisir entre deux styles de mise en page : grille ou colonnes (cols). Pour changer le style de mise en page par défaut, cliquez sur le bloc, accédez à l’onglet Personnaliser et définissez le champ Mise en page sur Grille 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.
Col.¶
Choisir la mise en page Cols vous permet de déterminer le nombre d’éléments par ligne dans le bloc. Pour ce faire, sélectionnez le bloc à modifier, cliquez sur le menu déroulant à côté du champ Cols et ajustez le nombre. Vous pouvez ensuite modifier les paramètres d’une colonne spécifique à l’aide des options de la section Colonne de l’onglet Personnaliser.
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.
Dupliquer un bloc de construction¶
Pour dupliquer un bloc de construction, cliquez sur l’icône (dupliquer) en haut de l’onglet Personnaliser. Une fois dupliqué, le nouveau bloc apparaît sur la page en dessous de l’original.
Enregistrer un bloc de construction personnalisé¶
Vous pouvez enregistrer un bloc de construction personnalisé pour le réutiliser ailleurs. Pour ce faire, sélectionnez-le, accédez à l’onglet Personnaliser et cliquez sur l’icône (disquette). Cliquez sur le bouton Enregistrer et recharger 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.
Créer un lien d’ancrage¶
Les liens d’ancrage sont des hyperliens qui dirigent les utilisateurs vers une section spécifique d’une page. Pour créer un lien d’ancrage pour un bloc, suivre ces étapes :
Cliquer sur Modifier et sélectionner le bloc vers lequel créer un lien.
Cliquez sur (lien) en haut de l’onglet Personnaliser.
Pour modifier le nom d’ancrage par défaut, cliquer sur Modifier dans le message contextuel vert qui s’ouvre.
Remplacer le nom d’ancrage et cliquer sur Enregistrer et copier.
Une fois l’ancrage enregistré, il est possible d”y créer un lien depuis n’importe quel endroit du site web.