Dernière mise à jour: septembre 21, 2022
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.
- Module : bloc de contenu de site web individuel. Certains modules, tels que les modules de texte enrichi, peuvent contenir plusieurs types de contenu.
- Ligne : ligne horizontale de modules. Vous pouvez appliquer un style à une ligne entière ou modifier sa position sur une page.
- Colonne : une pile verticale de plusieurs modules. Vous pouvez appliquer un style à une colonne entière ou modifier sa position sur une page.
- 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.
Organisez votre contenu
Dans l'éditeur de barre latérale, vous pouvez afficher une vue d'ensemble des sections, des lignes, des colonnes et des modules de votre contenu. Vous pouvez ensuite les renommer, les modifier, les cloner, les supprimer ou les masquer :
-
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 barre latérale, cliquez sur l'onglet Contenu.
- Vous pouvez contrôler quels éléments de page sont visibles dans l'éditeur de barre latérale :
- Pour afficher uniquement les sections de votre page, cliquez sur Réduire tout. Cela réduira toutes les lignes, colonnes et modules de sorte que seules les sections soient visibles dans l'éditeur de barre latérale (Sidebar Editor).
- Pour afficher tout le contenu de votre page, cliquez sur Développer tout. Cela affichera toutes les sections, lignes, colonnes et modules dans l'éditeur de barre latérale.
- Pour afficher un élément de page ou un conteneur individuel, cliquez sur le signe + plus à côté de son nom.
- Pour masquer un élément ou un conteneur,
- Vous pouvez également modifier, renommer, cloner, supprimer et masquer des éléments de page :
- Pour modifier un élément, cliquez sur son nom.
- Pour renommer un élément, cliquez sur les points d' côté de son nom, puis sélectionnez Renommer [élément]. Dans la boîte de dialogue, saisissez un nom pour l'élément, puis cliquez sur Enregistrer.
- Pour cloner un élément, cliquez sur les trois points de l' côté de son nom, puis sélectionnez Clone (Cloner) (Cloner). Cela créera une copie exacte de l'élément original adjacent.
- Pour supprimer un élément, cliquez sur les trois points de l' côté de son nom, puis sélectionnez Supprimer.
- Pour masquer un module, cliquez sur les trois points à côté de son nom, puis sélectionnez Masquer ce module. Cela masquera le module dans l'aperçu de la page, mais pas dans l'éditeur de barre latérale. Pour afficher un module masqué sur la page, cliquez sur les trois points de l' côté de son nom, puis sélectionnez Afficher ce module.
Utiliser des sections
Dans l'éditeur en glisser-déposer, vous pouvez créer des sections de page réutilisables en faisant glisser les modules sur une mise en page de section vierge. Les développeurs peuvent également créer ces sections à l'aide de notre documentation pour les développeurs. Une fois créées, les sections peuvent être utilisées sur n'importe quelle page qui prend en charge la modification en glisser-déposer. Les sections enregistrées qui contiennent des règles intelligentes utiliseront ces règles lorsqu'elles seront ajoutées à une page.
Remarque : pas plus de 50 sections réutilisables ne peuvent être enregistrées à partir de l'éditeur en glisser-déposer à la fois. 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 en 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 cette opération pour chaque module.
- Passez le curseur de la souris sur la section et Down, puis sélectionnez Enregistrer la section.
Remarque : les sections de page existantes et celles créées sans mise en page peuvent également être enregistrées en tant que sections réutilisables.
- Dans le panneau de droite, saisissez un nom et une description pour votre section, puis cliquez sur Enregistrer.
Ajouter ou supprimer 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, passez le curseur de la souris sur une section et cliquez sur Sélectionner. Les sections enregistrées à partir de l'éditeur en glisser-déposer apparaîtront sous Sections enregistrées, tandis que celles créées par les développeurs apparaîtront sous Sections thématiques.
- L'ajout d'une section enregistrée contenant des règles intelligentes appliquera ces règles à la section nouvellement ajoutée. Ces sections seront étiquetées comme intelligentes.
- Pour supprimer une section, cliquez sur l'icône + plus pour ajouter une section, puis placez le curseur au-dessus de la section et cliquez sur l'icône Supprimer Supprimer Supprimer (delete) (delete) (delete) (delete) (delete) (delete) (delete) ( delete) (delete) (delete Dans la boîte de dialogue, cliquez sur Supprimer.
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 .
- 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 .
- Pour supprimer un élément de la page, placez le curseur sur l'élément et cliquez sur l'icône Supprimer .
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 :
-
- Modifier le module : modifiez le contenu du module.
- Cloner le module : effectuez une copie de ce module sur la page.
- Supprimer le module : supprimez ce module de la page.
