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

Dans l'éditeur de page en glisser-déposer, les utilisateurs peuvent réorganiser et appliquer des styles personnalisés à différentes sections d'une page. La modification en glisser-déposer est disponible pour les pages créées avec des modèles de démarrage, certains modèles de thème et des modèles codés avec des zones de glisser-déposer. 

Comprendre l'éditeur 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, puis regroupés en sections. 

En créant des lignes, des colonnes et des sections, vous pouvez réorganiser ou appliquer un style à plusieurs modules à la fois. Découvrez-en davantage sur la personnalisation des styles pour le contenu glisser-déposer.  

1. Module : bloc de contenu de site web individuel. Certains modules, tels que les modules de texte enrichi, peuvent contenir plusieurs types de contenu. 
2. Ligne : ligne horizontale de modules. Vous pouvez appliquer un style à une ligne entière ou modifier sa position sur une page. 
3. Colonne : une pile verticale de plusieurs modules. Vous pouvez appliquer un style à une colonne entière ou modifier sa position sur une page. 
4. Section : un groupe de plusieurs lignes ou colonnes qui couvre toute la largeur de la page. Vous pouvez appliquer un style à une section entière ou modifier sa position sur une page. 

Ajouter des sections

Les développeurs peuvent créer des sections de page réutilisables disponibles dans l'éditeur en glisser-déposer. Découvrez-en davantage sur la création de sections réutilisables dans notre documentation pour les développeurs. L'éditeur en glisser-déposer contient également des mises en page vides pour les sections. 

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Dans votre portail HubSpot, naviguez vers Marketing > Pages de destination.
• Passez le curseur de la souris sur une page et cliquez sur Modifier.
• Dans l'éditeur de contenu, placez le curseur entre deux sections et cliquez sur l'icône Plus (+). 

• Pour ajouter une section personnalisée, dans le panneau de droite, sélectionnez la section. 

• Pour ajouter une présentation vide, dans le panneau de droite, cliquez sur l'onglet Mises en page et sélectionnez une mise en page. Vous pouvez ensuite ajouter des modules aux zones vierges de la mise en page. 

Modifier des lignes, colonnes ou sections

• Dans l'éditeur de page, placez le curseur sur la ligne, colonne ou section, puis cliquez sur l'icône Modifier edit. 
• Pour personnaliser le remplissage et les marges autour de la ligne, la colonne ou la section, cliquez sur Alignement et espacement dans l'éditeur de barre latérale.
• Pour modifier l'arrière-plan d'une zone, cliquez sur Arrière-plan dans l'éditeur de barre latérale et sélectionnez une option de style :  
  • Aucun : supprimez des couleurs ou des images d'arrière-plan.
  • Couleur : définissez une seule couleur comme arrière-plan. Saisissez une valeur hex ou cliquez sur le sélecteur de couleur et saisissez une couleur, puis une valeur de transparence. 
  • Image : définissez une image comme arrière-plan. 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 dans vos fichiers. 
  • Dégradé : définissez deux couleurs de dégradé pour votre arrière-plan. Cliquez sur le menu déroulant Direction et sélectionnez une direction de dégradé. Pour chaque couleur, saisissez une valeur hex ou cliquez sur le sélecteur de couleur et saisissez une couleur, puis une valeur de transparence. 

• Pour créer une copie d'un élément existant, placez le curseur sur l'élément et cliquez sur l'icône Cloner duplicate cc.
• Pour supprimer un élément de la page, placez le curseur sur l'élément et cliquez sur l'icône Supprimer delete. 

Ajouter et modifier des modules

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Dans votre portail HubSpot, naviguez vers Marketing > Pages de destination.
• Passez le curseur de la souris sur une page et cliquez sur Modifier.
• Dans l'éditeur de contenu, cliquez sur le module dans l'éditeur de barre latérale, puis faites-le glisser sur la page. 
• Pour ajuster la largeur d'un module, cliquez sur le séparateur vertical entre les colonnes et faites-le glisser jusqu'à la position souhaitée.

• Pour personnaliser le contenu dans un module, passez le curseur de la souris sur le module et cliquez sur une icône :

• • edit Modifier le module : modifiez le contenu du module.
  • clonduplicate Cloner le module : effectuez une copie de ce module sur la page.
  • delete Supprimer le module : supprimez ce module de la page.