--- title: "Section sur le code personnalisé" slug: "html-block" updated: 2026-07-09T12:50:12Z published: 2026-07-09T12:50:12Z canonical: "docs.document360.com/html-block" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Section sur le code personnalisé La section Code personnalisé vous permet d’intégrer directement votre propre HTML et CSS sur la page d’accueil de la base de connaissances. Il existe pour des situations où les blocs de corps standards comme le texte enrichi, les cartes multicolonnes, l’image avec texte – ne vous offrent pas la mise en page ou la fonctionnalité dont vous avez besoin. Avec ce bloc, vous avez un contrôle total sur ce qui se rend et son apparence, ce qui en fait le bon choix pour le contenu dynamique, les embeds tiers ou les traitements visuels personnalisés impossibles à utiliser par les autres blocs. ![Knowledge base site showing a custom code section with a promotional banner rendered from HTML and CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/custom%20code%20-%20kb%20site%20preview.png) --- ## Quand utiliser la section Code personnalisé - **Bannières dynamiques** - affichez une promotion saisonnière, une annonce de lancement de produit ou un avis de maintenance en utilisant du HTML personnalisé que vous pouvez mettre à jour indépendamment de la mise en page. - **Minuteurs de compte à rebours** - Intégrez un compte à rebours alimenté par JavaScript pour des événements, lancements ou offres à durée limitée. - **Widgets tiers intégrés** - Ajoutez des insertions provenant de services externes comme des lecteurs vidéo, des constructeurs de formulaires, des widgets de chat ou des badges de page de statut, qui n’ont pas de bloc dédié. - **Contenu personnalisé** - Lorsque vous avez besoin d’une mise en page ou d’un traitement visuel spécifique qui n’est pas possible avec le texte enrichi ou les blocs de cartes multicolonnes, écrivez votre propre HTML et CSS pour y parvenir. IMPORTANT ! Les sections de code personnalisé exécutent du HTML et du CSS dans le contexte de votre site de base de connaissances. Testez votre code avec soin avant de publier. Un HTML mal structuré peut affecter la mise en page des éléments de page environnants. --- ## Comment ajouter une section de code personnalisé 1. Naviguez dans () dans la barre de navigation de gauche du portail de la base de connaissances. 2. Dans le panneau de navigation de gauche, naviguez vers **Knowledge base site** > **personnalisation du site**. 3. Cliquez sur le **bouton Personnaliser le site** . ![Site customization page showing the Customize site button](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site%20customization%20-%201st%20page.png) 1. Dans le menu déroulant de gauche, sélectionnez Page **d’accueil** . La section Corps affiche la liste des blocs corporels. 2. Cliquez **sur Ajouter la section** et sélectionnez **la section Code personnalisé**. Le bloc est ajouté à la liste. 3. Utilisez l’icône **Réordre** () pour réarranger le bloc. Les icônes de Réordre et **de Masquer** () apparaissent lorsque vous survolez un bloc de corps dans la section Corps. --- ## Comment configurer la section Code personnalisé 1. Cliquez sur le **bloc de section Code personnalisé** pour ouvrir l’éditeur. 2. Dans l’onglet **HTML** , ajoutez ou modifiez votre code HTML. 3. Dans l’onglet **CSS** , ajoutez ou modifiez votre code CSS. 4. Cliquez sur **Enregistrer** pour sauvegarder vos modifications en tant que brouillon. 5. **Cliquez sur Aperçu** pour voir comment le code se rend sur le site de la base de connaissances. 6. **Cliquez sur Publier** pour afficher les changements. ![Custom code section editor showing the HTML and CSS tabs with code input areas](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20code%20section.png) --- ## Meilleures pratiques - **Faites toujours un aperçu avant de publier** – les différences de rendu entre l’éditeur et le site en ligne peuvent être subtiles. Utilisez l’option Aperçu pour vérifier la mise en page et le style avant de vous engager. - **Gardez le HTML autonome** – évitez de référencer des feuilles de style ou scripts externes qui pourraient bloquer le chargement des pages ou entrer en conflit avec les styles propres de Document360. - **Définissez votre CSS** – utilisez des noms de classes spécifiques pour vos éléments personnalisés afin d’éviter de remplacer les styles par défaut du site. - **Utilisez l’onglet CSS pour tous les styles** – garder les styles séparés du balisage facilite la maintenance et la mise à jour du code. - **Testez entre le mode clair et le mode sombre** – si votre base de connaissances supporte le mode sombre, vérifiez que votre code personnalisé se rend correctement dans les deux. --- ## FAQ **Comment supprimer une section de code personnalisé de la page d’accueil ?** Naviguez vers {{variable. Settings}} () > {{variable. Site de la base de connaissances}} > **Personnalisation du site** et cliquez **sur Personnaliser le site**. Dans le menu déroulant de gauche, sélectionnez Page **d’accueil** . Dans la section Corps, sélectionnez la **section Code personnalisé** souhaitée. **Cliquez sur Supprimer** () sous la barre de navigation, puis cliquez sur **Oui** dans l’invite de confirmation Supprimer. Cliquez **sur Enregistrer** puis **sur Publier** pour appliquer les modifications.