Structurer et personnaliser les modèles à l’aide du gestionnaire de mise en page

Utilisez l’éditeur de mise en page du gestionnaire de conception pour structurer et personnaliser les modèles de glisser-déposer. En organisant les modules, les groupes et les colonnes, vous pouvez contrôler la structure du contenu sur les pages. Cela donne également aux créateurs de contenu plus de contrôle dans l’éditeur de page.

Avant de commencer

Avant de structurer et de personnaliser vos pages à l’aide de l’éditeur de mise en page du gestionnaire de conception, examinez les exigences et les considérations. 

Compréhension des limites et des considérations

• Les modifications apportées à un modèle s’appliquent à tous les contenus utilisant ce modèle. 
• Certaines fonctionnalités, telles que les colonnes flexibles, ne sont disponibles que pour les modèles de page.

Structurer un modèle

Utilisez le gestionnaire de mise en page pour structurer l’organisation du contenu dans un modèle.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur un modèle pour l’ouvrir dans l’éditeur de mise en page. 

Ajouter et organiser les modules

Les modules sont les composants de base de la mise en page d’un modèle. Faire glisser un module à côté d’un autre module crée des colonnes. Faire glisser un module au-dessus d’un autre regroupe les modules.

1. Dans l’inspecteur, cliquez sur + Ajouter.
2. Saisissez du texte pour rechercher un module, puis cliquez sur ce dernier. 
3. Faites glisser le module dans l’éditeur de mise en page.

Modifier les largeurs de colonne

Pour modifier la largeur d’une colonne :

1. Dans l’éditeur de mise en page, passez le curseur entre deux modules.
2. Cliquez et faites glisser horizontalement pour ajuster la largeur de la colonne. 

Regrouper les modules

Regroupez des modules pour organiser les sections d’un modèle.

Pour regrouper des modules :

1. Dans l’éditeur de mise en page, sélectionnez un module.
2. Appuyez sur la touche Ctrl (Windows) ou Commande (Mac) et maintenez-la enfoncée et sélectionnez des modules supplémentaires. 
3. Dans l’inspecteur, cliquez sur l’icône Regrouper les groupModule modules.

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 :

1. Dans l’éditeur de mise en page, cliquez sur un module

2. Dans l’inspecteur, cliquez sur l’icône Diviser le splitModule module . 

Centrer les modules

Utilisez des espacements horizontaux pour centrer les modules et les groupes sur la page, ou ajoutez un espace vide de chaque côté de ceux-ci. 

Pour ajouter une entretoise horizontale :

1. Dans l’inspecteur, cliquez sur + Ajouter.

2. Saisissez l’espacement horizontal dans le champ Rechercher . Ensuite, faites glisser le module d’espacement horizontal en position sur le modèle dans l’éditeur de mise en page.

3. Pour modifier la taille d’un entretoise horizontal, modifiez la largeur de la colonne qui le sépare des autres modules.

4. Pour centrer un module ou un groupe, ajoutez des modulesd’espacement H orizontal de chaque côté.

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.

1. Dans l’inspecteur, cliquez sur + Ajouter.

2. Saisissez la colonne flexible dans le champ Rechercher . Ensuite, faites glisser le module Colonne flexible en position sur le modèle dans l’éditeur de mise en page.

Personnaliser votre modèle

Une fois que vous avez structuré la mise en page de votre modèle, vous pouvez remplacer des modules et effectuer d’autres personnalisations de modèle.

Modifier les options d'un module

Les options de modification d’un module comprennent le style, le contenu par défaut et peuvent différer en fonction du type de module. Découvrez-en davantage sur la modification du module, du CSS et du contenu et des paramètres par défaut.

1. Dans l’éditeur de mise en page, cliquez sur un module. 
2. Dans l’inspecteur, personnalisez les options du module. 

Changer de module

Après avoir ajouté un module à votre modèle, vous pouvez le remplacer pour un autre module.

1. Dans l’éditeur de mise en page, cliquez avec le bouton droit sur le module, puis sélectionnez Changer de module.

2. Dans la fenêtre contextuelle, sélectionnez le module par lequel remplacer le module d’origine.

Convertir en module global

Convertissez un module de votre modèle en un module global qui peut être utilisé dans plusieurs modèles. Utilisez cette fonction lorsque vous avez stylisé le module d’une certaine manière ou que vous avez un contenu par défaut dans le module que vous souhaitez réutiliser dans d’autres modèles.

1. Dans l’éditeur de mise en page, cliquez sur un module.
2. Dans l’inspecteur, cliquez sur le menu déroulant Plus et sélectionnez Convertir en module global.
3. Dans la boîte de dialogue, saisissez le nom du module global, puis cliquez sur Créer.

Supprimer un module

1. Dans l’éditeur de mise en page, cliquez sur un module.

2. Dans l’inspecteur, cliquez sur l’icône Corbeilledelete . 

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.

1. Dans l’outil de recherche, cliquez sur le nom d’un modèle.
2. Cliquez sur le menu déroulant Actions et sélectionnez une option : 
   • Copier sur un autre compte : copiez le modèle sur un autre compte sur lequel vous êtes également un utilisateur. Les modèles achetés sur le Marketplace ne pourront 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 : cette option crée une version HTML distincte de votre modèle de glisser-déposer. 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 sur HTML, cela ne crée pas de version HTML distincte de votre modèle.
   • Renommer le modèle : modifiez le nom interne de votre 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éez un e-mail ou une page directement à partir du modèle.
   • Supprimer le modèle : cette opération supprime le modèle. Une fois le modèle supprimé, il restera disponible pendant 30 jours, après quoi il sera définitivement supprimé. Pour restaurer le modèle, vous devez contacter le support client.