Ignorer et passer au contenu principal
Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Landing Pages

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

Dernière mise à jour: avril 30, 2021

Disponible avec :

Tous les produits et les abonnements

Dans l'éditeur de page glisser-déposer, les utilisateurs peuvent réorganiser et appliquer les styles d'arrière-plan personnalisés à différentes sections d'une page. Glissez et déposez la modification de la modification disponible dans les pages créées avec des modèles starter, des modèles de thèmes HubSpot par défaut ou 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 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 un ensemble de styles d'arrière-plan à une section d'une 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 : un blog individuel de contenu de site web. Certains modules, comme le module de texte enrichi, peuvent contenir plusieurs types de contenu. 
  2. Colonnes : fenêtre verticale de plusieurs modules ou lignes. Vous pouvez déplacer ou réorganiser des colonnes sur votre page ou 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 ou 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.

overview-of-drag-and-drop

Modifier le contenu du module

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 : modifier le contenu de votre module dans l'éditeur de contenu ou dans le panneau de gauche. 
  • styles Style du module : gérer le style de ce module dans l'éditeur de barre latérale. La plupart des styles de module peuvent être gérés sur l'onglet Style, mais certaines Options de style spécifiques à votre thème peuvent être disponibles sur l'onglet Options.
  • clonduplicate Module de clonage : effectuez une copie de ce module sur votre page.
  • delete Supprimer le module : supprimer ce module de votre page.

edit-module

Modifier des lignes, colonnes ou sections

Vous pouvez modifier les styles d'une ligne entière, d'une colonne ou d'une section d'éléments. 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 l'icône flèche et sélectionnez les styles Style [ligne/colonne/section].
  • Pour personnaliser le remplissage et la marge 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 section, cliquez sur Arrière-plan dans l'éditeur de barre et sélectionnez une option de style :
    • Aucun : supprimer les couleurs ou les 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, puis saisissez 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 de vos fichiers
    • Vidéo : deux couleurs sont regroupées ensemble comme 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 sélectionnez une couleur, puis saisissez une valeur de transparence. 
  • 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].

remove-a-column

Ajouter des modules à votre page

Pour ajouter un module à votre page, cliquez sur le module dans l'éditeur de barre latérale, puis faites glisser le module sur votre page et le déposer en position. 

add%20a%20common%20module%20to%20a%20page

Ajustez la mise en page de votre page

Vous pouvez ajuster la largeur des éléments de votre page en cliquant dessus et en faisant glisser le séparateur vertical entre les colonnes.

edit%20column%20width%20in%20page

Modifier les styles de page

Pour modifier les couleurs, les polices ou les espaces sur votre page, cliquez sur l'onglet Conception dans l'éditeur de barre latérale

design-tab-options