Comment structurer et personnaliser la mise en page de vos modèles

Dernière mise à jour: August 8, 2018

L'article précédent explique comment créer une nouvelle mise en page de modèle, et il est maintenant temps de découvrir comment la modifier après sa création.

Structurer un modèle

En utilisant l'interface de l'outil de création de modèle dans le Gestionnaire de conception, vous pouvez concevoir rapidement la mise en page de votre contenu, et ce sans code HTML. Avant de modifier la structure d'un modèle, vous devez tout d'abord sélectionner le modèle voulu.
Choose teplate

Ajouter et faire glisser des modules

Plusieurs méthodes permettent d'ajouter un module à une mise en page, mais la plus rapide consiste à cliquer sur Ajouter une ligne. Faites ensuite glisser le module jusqu'à l'emplacement voulu dans la mise en page de votre modèle. Si vous placez un module au-dessus d'un autre, des colonnes ou des groupes de modules seront créés.
Drag and drop

Modifier la largeur des colonnes

Pour modifier la largeur d'une colonne, cliquez sur le séparateur présent entre deux modules et faites-le glisser horizontalement, comme illustré ci-dessous. 

HubSpot Help article screenshot

Regrouper des modules

b

Informations avancées

L'outil de création de modèle utilise une grille adaptative de 12 colonnes qui s'appuie sur un fichier CSS afin de calculer automatiquement la largeur de chaque module pour différents types d'appareils. Si vous faites glisser la largeur d'une colonne, l'attribut de classe HTML est ajusté pour le module concerné et HubSpot modifie la largeur en conséquence. Cette fonctionnalité permet aux designers de gagner beaucoup de temps car elle leur évite de devoir modifier la largeur de plusieurs modules, à l'exception de la largeur maximale d'un conteneur. Les colonnes sont ajustées automatiquement sur les appareils mobiles, sans que votre designer n'ait à écrire de code. Des informations supplémentaires sur l'emplacement des fichiers CSS sont disponibles dans une autre section de ce guide..

D'un point de vue technique, le regroupement de modules ajoute un balisage d'habillage supplémentaire à l'ensemble des modules. Ce balisage peut se voir attribuer des identifiants ou des classes servant à cibler et styliser cette zone et son contenu.

En savoir plus

Les groupes de modules sont des unités de modules qui constituent différentes sections d'une page. Pour regrouper des modules, cliquez sur Regrouper

Sélectionnez ensuite les modules que vous souhaitez regrouper. Dès que vous avez effectué une sélection valide, cliquez sur Créer un groupe.

Dans l'exemple ci-dessous, plusieurs modules sont regroupés dans une bannière de page. Dans une autre section de ce guide, vous découvrirez comment les groupes peuvent être transformés en groupes globaux et utilisés dans différents modèles.  

 

Group modules

Diviser horizontalement

Le module Diviser horizontalement divise le module en deux, créant ainsi deux modules.

Split Horizontally

Vous pouvez diviser un module avec l'option disponible sous l'icône d'engrenage, mais aussi en plaçant le curseur de la souris sur le module et en cliquant sur Diviser , comme indiqué ci-dessous.

Split

Ajouter un module en dessous

L'option Ajouter un module en dessous permet d'ajouter un module supplémentaire sous le module choisi et de les regrouper. Les groupes sont des unités de modules qui sont entourés d'un balisage supplémentaire et qui peuvent être stylisés en conséquence.  

Add module below

Personnaliser le modèle

Dès que vous avez structuré la mise en page générale de votre modèle, vous pouvez échanger des modules et entreprendre d'autres actions de personnalisation afin que la présentation du modèle soit plus facile.

Modifier les options

La fonctionnalité Modifier les options permet de modifier la configuration basique d'un module. Ces paramètres incluent généralement le contenu par défaut, son libellé dans l'écran de modification du contenu et d'autres préférences liées au module. En fonction du type de module choisi, vous pouvez configurer différentes options avec cette fonctionnalité. Des informations supplémentaires sur le contenu par défaut et les paramètres sont disponibles dans une autre section de ce guide.

Edit options

Modifier les déclarations CSS

L'option Modifier les déclarations CSS facilite la personnalisation du balisage HTML de votre modèle. Des informations supplémentaires sur l'ajout de classes, d'identifiants, de style en ligne et de balisage d'habillage sont disponibles dans une autre section de ce guide.

Edit CSS

Changer de module

L'option Changer de module vous permet de sélectionner le type de module que vous souhaitez afficher dans cette section du modèle. Vous découvrirez une liste détaillée des modules dans une autre section de ce guide.

Swap module

Transformer un module en module global

L'option Transformer en module global vous permet de transformer un module en module global pouvant être utilisé dans d'autres modèles. Des informations supplémentaires sur l'utilisation du contenu global sont disponibles dans une autre section de ce guide.

Make global module

Supprimer un module

Pour ce faire, sélectionnez l'option Supprimer un module. Lorsque vous supprimez un module, un message s'affiche pour vous informer du nombre de pages et/ou d'e-mails qui utilisent ce modèle. Le contenu de ce module sera lui aussi supprimé. Cliquez sur Tout supprimer pour supprimer le module et effacer tout le contenu utilisé dans celui-ci. Vous pouvez cliquer sur les dépendances pour consulter le contenu qui sera supprimé sur les différentes pages utilisant ce module.  

Si vous souhaitez retrouver du contenu supprimé par erreur, vous pouvez revenir à la version précédente du module (Actions > Voir les révisions).

Delete module

Actions supplémentaires

Outre les options de module, d'autres actions sont également disponibles  dans le menu Actions lorsque vous travaillez sur des modèles :

  • Sauvegarder : cette option permet d'enregistrer le brouillon du modèle sur lequel vous travaillez, sans toutefois publier les modifications effectuées sur le contenu déjà disponible en ligne avec ce modèle.
  • Déplacer ou renommer le modèle : cette option permet de renommer un modèle ou de le déplacer dans un autre dossier.
  • Cloner : vous pouvez créer un double de votre modèle.  Cette option permet de gagner du temps lorsque vous voulez créer une variation d'un modèle existant.
  • Cloner sur fichier : cette option permet de créer une version HTML séparée de votre modèle. Cela est utile si vous souhaitez disposer d'un plus grand contrôle sur le balisage que celui offert par l'outil de création de modèle, ou si vous souhaitez approfondir vos connaissances en matière de codage des modèles. Toutefois, n'oubliez pas que les modèles HTML sont moins flexibles pour vos utilisateurs internes.
  • Créer une page à partir d'un modèle : avec cette option, vous pouvez créer une page de destination directement depuis le Gestionnaire de conception.
  • Voir révisions : cette option vous donne l'historique des révisions apportées à un modèle, vous permettant ainsi de retrouver une ancienne version publiée. Les révisions des modèles sont indépendantes des révisions des pages, et sont enregistrées à chaque fois que vous publiez un modèle. Notez ici que l'enregistrement automatique ne crée pas de révisions.
  • Pages utilisant le modèle : cette option affiche la liste des pages qui utilisent le modèle.
  • Supprimer : cette option permet de supprimer un modèle. À ce jour, il est impossible de retrouver un modèle supprimé.
  • Rendre basique / Rendre adaptatif (e-mail uniquement) : cette option permet à un modèle d'e-mail de devenir basique (largeur fixe déterminée dans vos Paramètres du contenu > E-mails) ou adaptatif (largeur flexible pour s'adapter à différentes tailles d'écran). Cette option est uniquement disponible pour les modèles d'e-mails.
Actions

Table des matières

    Article précédent:

    Article suivant: