--- title: Modifier le contenu de la page dans une zone glisser-déposer description: Découvrez comment modifier le contenu dans une page à l'aide d'un modèle disposant de la fonctionnalité de glisser-déposer. Il peut s'agir d'un modèle de démarrage, d'un modèle thématique et d'un modèle codé disposant d'une zone glisser-déposer. --- # [Modifier le contenu de la page dans une zone glisser-déposer](https://knowledgeqa.hs-sites.com/fr/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor) Rédigé par [HubSpot Support](https://knowledgeqa.hs-sites.com/fr/author/hubspot-support) | 7 Jul 2020 à 4:00:00 Grâce à la modification glisser-déposer, vous pouvez facilement réorganiser votre mise en page et appliquer des styles d'arrière-plan personnalisés à différentes sections de votre page. La modification glisser-déposer est disponible pour les pages créées avec un [modèle de démarrage](https://knowledgeqa.hs-sites.com/fr/landing-pages/edit-a-page-using-a-starter-template), un [modèle de thème](https://knowledgeqa.hs-sites.com/fr/website-pages/create-website-content-using-a-theme) HubSpot par défaut ou un modèle codé avec une [zone glisser-déposer](https://designers.hubspot.com/docs/hubl/hubl-supported-tags/dnd-areas). Cet article explique comment modifier le contenu et la mise en page de votre page grâce aux fonctionnalités de modification glisser-déposer. Découvrez [comment modifier les paramètres de votre page et publier une page](https://knowledgeqa.hs-sites.com/fr/cos-pages-editor/create-and-edit-pages-in-hubspot) sur votre site web. ## Fonctionnement de la modification glisser-déposer Les zones glisser-déposer sont composées de [modules](https://knowledgeqa.hs-sites.com/fr/website-pages/guide-to-common-modules), qui sont des blocs de contenu de site web. Ces modules peuvent être organisés en lignes horizontales ou en colonnes verticales. Ces lignes ou colonnes peuvent être regroupées en sections d'éléments. En regroupant ces éléments, vous pouvez appliquer des styles d'arrière-plan à une zone entière de votre page. Vous pouvez également glisser et déposer l'intégralité des lignes, des colonnes ou des sections pour réorganiser la mise en page de votre page de destination. 1. **Module :** bloc de contenu de site web individuel. Vous pouvez modifier le texte et les images de votre page dans un module individuel. 2. **Colonnes : **fenêtre verticale de plusieurs modules ou lignes. Vous pouvez déplacer ou réorganiser des colonnes sur votre page et appliquer une couleur d'arrière-plan ou un style à une colonne entière. 3. **Ligne : **ligne horizontale de modules ou de colonnes. Vous pouvez déplacer ou réorganiser des lignes sur votre page et appliquer une couleur d'arrière-plan ou un style à une ligne entière. 4. **Section : **groupe de plusieurs lignes ou colonnes. Vous pouvez déplacer une section entière ou appliquer une couleur d'arrière-plan ou un style à une section entière. ## **Modifier le contenu du module** Pour personnaliser le contenu dans un module, passez le curseur de la souris sur l'icône de l'action souhaitée et cliquez dessus : - edit ** Modifier :** modifiez le contenu de votre module en ligne directement sur la page ou dans le panneau de gauche. Pour une expérience de modification plus immersive, vous pouvez - styles **Styliser :** gérez les styles disponibles sur ce module dans le panneau *Style* à gauche. La plupart des [styles de module](https://knowledgeqa.hs-sites.com/fr/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor?hs_amp=true#manage-styles) peuvent être gérés dans l'onglet *Style*, mais certaines options de style spécifiques à votre thème peuvent être disponibles dans l'onglet *Options*. - clonduplicate **Copier :** copiez ce module sur votre page. - delete **Supprimer :** supprimez ce module de votre page. ## Modifier des lignes, colonnes ou sections Vous pouvez modifier les styles d'une ligne, d'une colonne ou d'une section d'éléments entière. Par exemple, vous pouvez centrer votre contenu, appliquer une image en arrière-plan ou modifier l'espacement autour des éléments de votre page. Pour modifier les styles pour une ligne, une colonne ou une section : - Dans l'éditeur de page, passez le curseur de la souris sur la ligne, la colonne ou la section, puis cliquez sur la **flèche déroulante** et sélectionnez styles **Style de [ligne/colonne/section]**. - Dans le panneau de gauche, cliquez sur **Alignement et espacement** pour personnaliser le remplissage et la marge autour de la ligne, de la colonne ou de la section. - Cliquez sur **Arrière-plan **pour développer les options de style pour l'arrière-plan de cette section : - **Aucun : **sélectionnez cette option pour supprimer les couleurs ou les images d'arrière-plan. - **Couleur :** sélectionnez cette option pour configurer une couleur unie en tant qu'arrière-plan. Saisissez une valeur de couleur ou un taux de transparence pour votre arrière-plan. - **Image : sélectionnez cette option pour configurer une image en tant qu'arrière-plan. Si une image est présente dans le modèle par défaut, cliquez sur Remplacer pour la changer. Pour ajouter une nouvelle image, cliquez sur** **Charger** pour ajouter une image à partir de votre ordinateur ou cliquez sur **Parcourir les images** pour sélectionner une image à partir de vos [fichiers](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/cos-general/organize-edit-and-delete-files). - **Dégradé : sélectionnez cette option pour définir deux couleurs de dégradé pour votre arrière-plan. Définissez d'abord l'orientation du dégradé. Saisissez ensuite une valeur hex et configurez la transparence pour chaque couleur.** - Pour créer une copie d'un élément existant, passez le curseur de la souris sur l'élément et cliquez sur** l'icône flèche**, puis sélectionnez duplicate **Copier [ligne/colonne/section]**. - Pour supprimer un élément de votre page, placez le curseur sur l'élément et cliquez sur **l'icône flèche**, puis sélectionnez delete **Supprimer [ligne/colonne/section]**. Pendant l'édition de la page, vos modifications seront enregistrées automatiquement. Pour [accéder aux brouillons enregistrés précédemment de votre page non publiée](https://knowledgeqa.hs-sites.com/fr/cos-pages-editor/can-i-roll-back-the-changes-i-made-to-my-landing-page), passez le curseur de la souris sur *Enregistré automatiquement* dans l'angle supérieur gauche et cliquez sur **Révisions**. ## Ajouter des modules à votre page Vous pouvez glisser et déposer un [nouveau module](https://knowledgeqa.hs-sites.com/fr/website-pages/guide-to-common-modules) pour ajouter un autre élément à votre page. Cela permet d'ajuster la conception d'une page à votre contenu. ## **Modifier la mise en page de votre page** Tout comme vous pouvez ajouter et modifier des modules sur la mise en page, vous pouvez ajuster la largeur des éléments de votre page en cliquant sur le séparateur vertical et en le faisant glisser entre les colonnes. Modifier les styles de page Pour modifier les couleurs, les polices ou les espacements sur votre page, cliquez sur l'onglet **Conception**. - Si vous utilisez un [modèle de démarrage](https://knowledgeqa.hs-sites.com/fr/landing-pages/edit-a-page-using-a-starter-template), vous pouvez modifier les polices, les styles et les couleurs appliqués à votre texte, aux formulaires et aux boutons dans l'onglet *Conception* sur le panneau de gauche. - Si vous utilisez un modèle codé créé par un développeur avec une [zone glisser-déposer](https://designers.hubspot.com/docs/hubl/hubl-supported-tags/dnd-areas), vous verrez les [options de style](https://knowledgeqa.hs-sites.com/fr/website-pages/edit-your-global-theme-settings) incluses dans votre modèle par votre développeur. - Si vous utilisez un [modèle de thème](https://knowledgeqa.hs-sites.com/fr/website-pages/create-website-content-using-a-theme) (***Hub CMS*** uniquement), vous pouvez accéder aux [paramètres de votre thème](https://knowledgeqa.hs-sites.com/fr/website-pages/edit-your-global-theme-settings) et les modifier. [Voir l'article complet](https://knowledgeqa.hs-sites.com/fr/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "HubSpot Support" }, "dateModified" : "2020-07-08T15:26:26.575Z", "datePublished" : "2020-07-07T04:00:00Z", "headline" : "Modifier le contenu de la page dans une zone glisser-déposer", "image" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "mainEntityOfPage" : "https://knowledgeqa.hs-sites.com/fr/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "FR | Knowledge Quick Answers" } } ```