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. 

Utiliser les sections

Dans l'éditeur glisser-déposer, vous pouvez créer des sections de page réutilisables en faisant glisser des modules sur une mise en page de section vierge. Les développeurs peuvent également créer ces sections en utilisant notre documentation pour développeurs. Une fois créées, les sections peuvent être utilisées sur n'importe quelle page prenant en charge l'édition par glisser-déposer. Les sections enregistrées qui contiennent des règles intelligentes utiliseront ces règles lorsqu'elles seront ajoutées à une page. 

Veuillez noter il n'est pas possible d'enregistrer plus de 25 sections réutilisables à la fois à partir de l'éditeur de glisser-déposer. Pour enregistrer une nouvelle section réutilisable, supprimez une section réutilisable existante

Créer une section

Vous pouvez enregistrer une section pour la rendre réutilisable sur d'autres pages utilisant le même thème.

• 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 (+). 

• Dans le panneau de droite, cliquez sur l'onglet Mises en page et sélectionnez une mise en page pour votre section. 

• Dans l'éditeur de contenu, faites glisser un module sur la mise en page et déposez-le en position. Répétez l'opération pour chaque module de votre section. 

• Passez la souris sur la section et cliquez sur l' icône en forme de carreau, puis sélectionnez Enregistrer la section. 

Veuillez noter que les sections de pages existantes et celles créées sans mise en page peuvent également être enregistrées comme sections réutilisables

• Dans le panneau de droite, saisissez un nom et une description pour votre section, puis cliquez sur Enregistrer. 

Ajouter une section

• 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 (+). 

• Dans le panneau de droite, survolez une section et cliquez sur Sélectionner. Les sections sauvegardées à partir de l'éditeur par glisser-déposer apparaîtront sous la rubrique Sections sauvegardées, tandis que celles créées par les développeurs apparaîtront sous la rubrique Sections de thème.  
• L'ajout d'une section sauvegardée qui contient des règles intelligentes appliquera ces règles à la section nouvellement ajoutée. Ces sections seront désignées par le terme " Smart"
• Pour supprimer une section, cliquez sur l'icône + plus pour ajouter une section, puis survolez la section et cliquez sur l' icônede suppression.  Dans la boîte de dialogue, cliquez sur Supprimer. 

Copie de section HubL

Dans l'éditeur de page, vous pouvez copier le balisage HubL d'une section afin de réutiliser le code si nécessaire. Cela peut être utile lorsqu'on veut recréer une section de glisser-déposer dans un fichier codé.

Apprenez à copier le balisage HubL d'une section.

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.