> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Remplir les éléments avec le contenu du système de gestion de contenu (CMS) # Pour commencer Vous pouvez remplir des éléments dans le constructeur de site web ; par exemple, des éléments tels que **Image, Titre, Ongletset Bouton peuvent** être alimentés par le contenu des messages du CMS. Cet article vous montrera, étape par étape, comment vous pouvez remplir différents éléments à l'aide des contenus CMS. --- # Ajout d'un contenu dynamique à un élément d'image Après vous être connecté à la base de données de votre CMS, vous verrez des sections vides dans votre page web comme dans l'image ci-dessous ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1pzwh4s.png) ⬇️ Cliquez sur Ajouter un élément et sélectionnez ensuite l'option Image élément ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1oeb4m2.png) ⬇️ Vous pouvez ajouter le **Bannière/image miniature** de votre poste CMS après avoir cliqué sur **Ajouter des champs CMS** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1sze8l6.png) || 💡 L'option Alt Text ne fonctionne que si aucune image n'est ajoutée en tant que vignette ou bannière de l'article. # Ajout d'un texte dynamique à l'en-tête/titre ⬇️ Cliquez sur Ajouter un élément et sélectionnez En-tête/titre ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_bmmm4a.png) ⬇️ En cliquant sur le bouton Ajouter des champs CMS vous aurez la possibilité d'ajouter tous les éléments indiqués sous le bouton carré rouge dans l'image ci-dessus ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_f3nix5.png) # Ajout d'un contenu dynamique à l'élément Tab ⬇️ Ajouter le Onglet à votre CMSRow ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1wlu98m.png) ||| ⬇️ Reportez-vous à la liste ci-dessous et aux numéros figurant sur l'image. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_11a9wun.png) 1. **Ajouter des champs CMS**: Pour ajouter des champs CMS, cliquez sur ce bouton. Vous pouvez ajouter plusieurs éléments, comme vous pouvez le voir dans la liste. 2. **Titre de l'article**: Ajoutez le titre de votre article à l'élément Tab. 3. **Text field**: Your CMS Field will appear in double curly braces like this on the text editor; in this case, it is `{{title}}` || 💡 Le champ CMS apparaîtra comme ceci (avec des doubles accolades curly braces_ sur le constructeur, mais si vous visitez votre site web publié, il montrera le contenu. ||| 💡 Vous pouvez également ajouter différents contenus CMS sur plusieurs onglets ; voir la vidéo ci-dessous. ${youtube}[Populating elements with CMS content](viNCIsEhLuc) # Ajout de champs CMS sur l'élément Bouton Sélectionnez l'option **Bouton ordinaire** de l'élément **Élément** pour l'ajouter à votre CMS Row. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1fdve1r.png) ⬇️ Vous pouvez ajouter **Champs CMS** et les afficher sur le site **Bouton** élément. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_mno94k.png) ⬇️ Par exemple, le champ CMS **Titre du poste** a été ajoutée à la **Bouton** élément. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_16vlnqo.png) --- # Ajout de champs CMS dans l'élément Custom Code Sélectionnez l'option **Code personnalisé** de l'élément **Élément** pour l'ajouter à votre CMS Row. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_tmt26l.png) ⬇️ Vous pouvez ajouter Champs CMS et les afficher sur le site Code personnalisé élément. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-06-04-at-11_1dci1za.gif) ⬇️ Par exemple, le champ CMS Titre du poste a été ajoutée à la Code personnalisé élément. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-1-a8ac6afa40_v3cqyx.gif) --- --- # Articles connexes [Difference between Classic & CMS](/en/article/difference-between-classic-cms-qoxnsz/) [Populating elements with CMS content](/en/article/populating-elements-with-cms-content-11uco9w/)