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.

Structurer et personnaliser la disposition du modèle

Dernière mise à jour: juin 28, 2023

Disponible avec le ou les abonnements suivants, sauf mention contraire :

Marketing Hub Pro, Entreprise
CMS Hub Pro, Entreprise
Ancienne version Marketing Hub Basique

Apprenez à configurer et à personnaliser votre modèle drag and drop existant, et à travailler avec des modules, des groupes et des colonnes en tant qu'éléments constitutifs de votre modèle.

Structurer le modèle

L'éditeur de mise en page du gestionnaire de conception vous permet de créer rapidement la mise en page de votre contenu sans avoir à écrire de code HTML.

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, cliquez sur un modèle pour le modifier.

Ajouter et faire glisser des modules

Pour ajouter un module à une mise en page, cliquez sur + Ajouter au sommet de l'inspecteur de la mise en page. Recherchez ou sélectionnez un module, puis faites-le glisser vers l'emplacement souhaité sur la page. Si vous faites glisser un module au-dessus d'un autre, des colonnes ou des groupes de modules seront créés.

Modifier les largeurs de colonne

Pour modifier la largeur d'une colonne, placez le curseur de la souris entre les modules, cliquez et faites glisser horizontalement.

Regrouper les modules

Les groupes de modules sont des unités de modules qui constituent différentes sections d'une page.

Pour regrouper deux modules, cliquez sur le premier module, puis, tout en appuyant sur la touche Ctrl/Cmd, sélectionnez le deuxième module. Répéter cette étape si vous regroupez plus de deux modules. Cliquez ensuite sur l'icône Groupe groupModule dans l'inspecteur du module.

Remarque : Les groupes de modules ne peuvent pas dépasser un séparateur de section ou contenir un groupe partiellement sélectionné de modules.

Diviser les modules horizontalement

La division d'un module le sépare en deux moitiés, créant ainsi deux modules. Pour diviser un module, cliquez dessus, puis cliquez sur l'icône Diviser le module splitModule dans l'inspecteur du module. Vous pouvez également faire un clic droit sur le module dans la mise en page et sélectionner Diviser le module.

Centrer les modules

Grâce aux espacements horizontaux, vous pouvez centrer les modules et les groupes sur la page ou ajouter un espace vide à côté. Pour ajouter un espacement horizontal, cliquez sur + Ajouter en haut de l'inspecteur de mise en page. Localisez Espacement horizontal, puis faites-le glisser dans le modèle.

Pour modifier la taille d'un espaceur horizontal, modifiez la largeur de la colonne qui le sépare des autres modules. Pour centrer un module ou un groupe, ajoutez des espacements horizontaux de chaque côté. 

add-horizontal-spacer

Ajouter une colonne flexible

Les colonnes flexibles sont conçues pour faciliter la gestion du contenu au niveau de la page pour les créateurs de contenu. Lorsqu'une colonne flexible est ajoutée à un modèle de page HubSpot, les utilisateurs ont la possibilité d'ajouter, de supprimer et de réorganiser les modules dans l'éditeur de page individuel. Cette fonctionnalité permet aux concepteurs de créer moins de modèles, tout en permettant aux équipes marketing de personnaliser chaque page en fonction de leurs besoins.

Pour ajouter une colonne flexible, cliquez sur + Ajouter au sommet de l'inspecteur de mise en page. Recherchez une colonne Flexible, puis faites-la glisser dans le modèle.

Remarque :
  • Les colonnes flexibles ne peuvent être ajoutées qu'aux modèles de page et ne peuvent pas être ajoutées aux modèles d'e-mail ou de blog.
  • Les modules ajoutés aux colonnes flexibles ne peuvent pas être associés à des classes CSS, à des styles en ligne ou à du HTML d'habillage. Les options de style doivent être ajoutées à la colonne flexible elle-même.

 


Personnaliser votre modèle

Une fois que vous avez structuré la mise en page générale de votre modèle, vous pouvez échanger des modules et effectuer d'autres personnalisations.

Modifier les options d'un module

Vous pouvez modifier les options d'un module en cliquant sur ce module dans l'éditeur de mise en page. L'inspecteur de module situé à droite affiche les options modifiables du module. Ces options comprennent généralement le style, le contenu par défaut et les options d'éditeur, et peuvent varier selon le type spécifique de module. En savoir plus sur la modification des feuilles de style CSS des modules et sur le contenu et les paramètres par défaut.

Options de modification

Changer de module

Après avoir ajouté un module à votre modèle, vous pouvez le remplacer pour un autre module. Cliquez sur le module dans l'éditeur de mise en page, puis cliquez sur Changer de module. Dans le menu déroulant qui s'affiche, sélectionnez le module qui doit remplacer le module d'origine.

Convertir en module global

Vous pouvez convertir un module de votre modèle en un module global, qui peut être utilisé dans plusieurs modèles. Cette option est utile lorsque vous avez agencé le module d'une manière donnée et/ou que vous souhaitez réutiliser le contenu par défaut du module dans d'autres modèles.

  • Cliquez sur le module dans l'éditeur de mise en page.
  • Dans l'inspecteur de module, cliquez sur le menu déroulant Plus et sélectionnez Convertir en module global.
  • Dans la boîte de dialogue, saisissez le nom du module global, puis cliquez sur Créer.

Supprimer un module

Pour supprimer un module, cliquez sur le module dans l'éditeur de mise en page, puis sur l'icône Corbeille delete dans l'inspecteur du module. Vous pouvez également faire un clic droit sur le module et sélectionner Supprimer le module.

Gérer le modèle dans l'outil de recherche

Outre les options de module, vous pouvez mettre en place différentes actions pour votre modèle.

  • Dans l'angle supérieur droit du modèle, cliquez sur l'icône Dossier folder.
  • Faites un clic droit sur le nom du modèle. Dans le menu déroulant, vous pouvez personnaliser les options suivantes :
    • Copier dans les portails : copie le modèle dans un autre portail dont vous êtes également utilisateur. Les modèles achetés auprès du Marketplace ne peuvent pas être copiés dans d'autres portails.
    • Cloner un modèle : crée un double de votre modèle, ce qui est utile pour créer une variante d'un modèle existant.
    • Cloner en HTML : crée une version HTML distincte de votre modèle. Cette option est utile si vous avez besoin de gérer plus avant le balisage ou si vous souhaitez en savoir plus sur l'encodage des modèles.
    • Afficher la source du modèle : affiche le code HTML source du modèle. Contrairement à l'option Cloner en HTML, cette option ne crée pas de version HTML distincte du modèle.
    • Renommer le modèle : modifie le nom interne du modèle.
    • Afficher les dépendances : affiche l'ensemble des pages, e-mails ou blogs utilisant actuellement le modèle.
    • Afficher l'historique des révisions : affiche l'historique des révisions du modèle et vous permet de revenir à une précédente version publiée du modèle.
    • Créer un e-mail/une page : créer un e-mail ou une page de destination/page web directement depuis le modèle.
    • Supprimer le modèle : supprime le modèle. Une fois supprimé, un modèle sera conservé pendant 30 jours, après lesquels il sera définitivement supprimé. Pour restaurer le modèle, veuillez contacter le support client
  • Ces options sont également accessibles à partir des menus déroulants Fichier et Actions ci-dessus.

Cet article vous a-t-il été utile ?
Ce formulaire n'est utilisé que pour recueillir du feedback sur la documentation. Découvrez comment obtenir de l'aide sur HubSpot.