Modifier le contenu de la page dans une zone glisser-déposer

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, un modèle de thème HubSpot par défaut ou un modèle codé avec une zone glisser-déposer.

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 sur votre site web.

Fonctionnement de la modification glisser-déposer

Les zones glisser-déposer sont composées de 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.

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. 
• styles Styliser : gérez les styles disponibles sur ce module dans le panneau Style à gauche. La plupart des styles de module 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.
  • 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, 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 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

• Si vous utilisez un modèle de démarrage, 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, vous verrez les options de style incluses dans votre modèle par votre développeur.
• Si vous utilisez un modèle de thème, vous pouvez accéder aux paramètres de votre thème et les modifier.