Comment utiliser le contenu par défaut et les options avancées de façon à optimiser les modèles pour la création de contenu ?

Dernière mise à jour: March 5, 2018

Disponible avec :

Produit: HubSpot Marketing
Abonnement: Basique, Pro et Entreprise

Un atout majeur du COS de HubSpot est la possibilité d'optimiser les modèles de façon à ce que les équipes marketing puissent concentrer leur attention sur la création de contenu. Le temps investi dans la structuration du contenu et de l'apparence des modèles est du temps gagné pour l'équipe marketing, mais les créateurs de contenu restent libres de modifier de nombreux éléments de mise en forme dans l'éditeur de contenu.  

Cette section explique comment utiliser le contenu par défaut et les options CSS de façon à produire des modèles optimisés pour la création de contenu.

Ajouter du contenu par défaut à un module

HubSpot Academy

Meilleures pratiques

Lorsque vous créez un modèle dans le gestionnaire de conception, veuillez garder à l'esprit que ce modèle servira à construire des pages ou des e-mails.

Les sections précédentes de ce guide expliquent comment structurer les modèles, et décrivent les différents modules disponibles dans le gestionnaire de contenu. Une fois que les modules souhaités ont été intégrés au modèle, il faut les remplir avec du contenu par défaut.

En savoir plus

Le contenu par défaut ajouté à un module peut, par la suite, être remplacé par d'autres attributs de texte, d'images, etc. Insérer du contenu par défaut permet de configurer l'apparence et les options d'un module.

Pour créer une page ou un e-mail à partir du modèle sélectionné, il suffit ensuite de remplacer le contenu par défaut par le contenu final.

Pour ajouter du contenu par défaut à un module, cliquez sur l'icône d'engrenage du module à personnaliser, puis sur Modifier les options.

Edit options

N'hésitez pas à utiliser des libellés internes pour organiser les modèles.  Les libellés ne modifient pas le code HTML des modèles, mais permettent de les organiser en interne. Dans l'exemple ci-dessous, les libellés Barre latérale et Biographie ont été attribués à un groupe de modules et à un module de texte enrichi.  

Label

La fenêtre contextuelle Modifier les options d'un module présente les options par défaut disponibles pour ce module. Par exemple, un module de formulaire permet de sélectionner le formulaire à afficher dans le modèle par défaut, tandis qu'un module de texte enrichi permet d'ajouter votre propre texte.

Default content

Une fois le contenu et les paramètres par défaut configurés dans les options du module, vous pouvez cliquer sur Aperçu pour afficher un aperçu du modèle (et du contenu) par défaut. Grâce au contenu par défaut inclus dans le gestionnaire de conception, vous pouvez ainsi vérifier l'apparence finale d'une page sans quitter l'outil.

Une fois les modifications terminées, cliquez sur Publier pour mettre à jour le modèle.

Verrouiller un module

Il est parfois souhaitable d'empêcher les créateurs de contenu d'accéder à certains éléments d'un modèle faisant l'objet d'une personnalisation avancée ou intégrant du code HTML brut. Par exemple, si un modèle de page de destination contient une galerie d'images dont le code HTML a été personnalisé, vous pouvez empêcher les utilisateurs internes d'accéder au code dans l'éditeur de contenu. Pour empêcher les équipes marketing de modifier un module dans l'éditeur de contenu, verrouillez ce module en cliquant sur l'icône d'engrenage > Verrouiller le module.  Si le module est déjà verrouillé, la mention Déverrouiller le module s'affiche.

Dans l'exemple ci-dessous, le code d'intégration d'un flux Twitter a été ajouté à un module HTML personnalisé. Les créateurs de contenu n'ayant aucun besoin de modifier ce flux, le module a donc été verrouillé.

Lock module

Lorsqu'un module est verrouillé, une icône de cadenas s'affiche. Veuillez noter que tous les modules des modèles de blog sont verrouillés par défaut, mais que vous pouvez les déverrouiller pour permettre la modification de différentes sections au niveau d'un article. Veuillez également noter que lorsque le contenu d'un module a été personnalisé pour une page ou un article donné, les éventuelles modifications apportées au contenu par défaut ne s'appliqueront pas à cette page ou à cet article.

Lock symbol

Personnaliser les options CSS d'un modèle

Une fois qu'un modèle est structuré et qu'il contient du contenu par défaut, il faut configurer son apparence esthétique. L'utilisation de fichiers CSS est abordée dans une autre section de ce guide. Toutefois, si le site web est complexe, il peut être utile d'approfondir la personnalisation des modèles avant de rédiger les déclarations CSS.

Comme mentionné précédemment, la structure et le contenu d'un modèle HubSpot sont assemblés en un site web HTML. L'outil de création de modèle ne permet pas d'accéder au balisage HTML complet des modules. Cependant, la fonctionnalité Modifier les déclarations CSS permet d'ajouter des attributs classe, style, et id, ainsi qu'un balisage d'habillage supplémentaire, permettant d'identifier les différentes sections du modèle.

Sélectionnez un module à personnaliser et cliquez sur l'icône d'engrenage, puis sur Modifier les déclarations CSS.

Edit CSS

Les options présentées varient en fonction du type de module sélectionné (e-mail, page, groupe, etc.).

Classe CSS personnalisée

L'attribut classe HTML permet de donner un nom aux modules d'un modèle afin de pouvoir les cibler dans les déclarations CSS. Le modèle contient un certain nombre de classes par défaut, mais les classes personnalisées permettent aux concepteurs de peaufiner l'apparence d'un modèle, tout en préservant sa flexibilité.  

Dans l'exemple ci-dessous, la classe Bio a été attribuée au module de texte enrichi. Cette mention ajoute l'attribut HTML class="bio" au conteneur div du module (balise HTML désignant une zone ou section de la page), ce qui revient à donner un nom au module. Cette classe ou des éléments de cette classe pourront ainsi être ciblés dans le fichier CSS. Il est préférable de ne pas utiliser cette procédure dans les modèles d'e-mail, car certains clients de messagerie ne prennent pas en charge les balises de style.  

Custom class

Pour appliquer un style à un conteneur div, ciblez la classe personnalisée attribuée à ce conteneur dans le fichier CSS principal ou le fichier CSS personnalisé. Le fonctionnement des feuilles de style CSS n'est pas détaillé dans ce guide, mais voici cependant quelques exemples d'utilisation de classes personnalisées. Par exemple, pour colorier l'arrière-plan d'un module avec une classe personnalisée Bio, la déclaration CSS suivante peut être appliquée :

.bio{
background: #CCCCCC;
}
Au-delà du conteneur div, il est également possible de cibler d'autres éléments du module. Pour cela, veuillez utiliser des sélecteurs combinés ou de descendance directe. Par exemple, pour cibler tout le paragraphe de texte intégré au module Bio, le sélecteur CSS combiné suivant peut-être appliqué :

.bio p{
color: #000000;
}

Style personnalisé inline

Un style CSS inline est inséré directement entre les balises HTML. Les propriétés et valeurs CSS saisies dans ce champ s'appliquent au conteneur div du module.

Dans l'exemple ci-dessous, les propriétés de marge et de couleur ont été utilisées pour ajuster l'espacement et la couleur du module. L'attribut HTML style="margin-top:30px; color: #00349e;" est ici ajouté à la balise de conteneur div du module.

Cette option est utile pour modifier rapidement un modèle, mais elle est moins pratique que les classes personnalisées décrites ci-dessus. En effet, les modifications futures ne pourront être appliquées via une feuille de style globale et chaque module devra être modifié séparément.

Inline styling

Les fonctionnalités HTML et CSS des clients de messagerie étant beaucoup plus limitées que celles des navigateurs web récents, les déclarations CSS inline peuvent favoriser la compatibilité des e-mails. Les modules d'e-mail disposent d'options supplémentaires simples à utiliser pour l'ajout de déclarations CSS inline, tel qu'illustré dans l'exemple ci-dessous.

Email CSS

Habillage HTML personnalisé

Même si l'outil de création de modèle ne permet pas d'accéder au balisage HTML complet d'une page, il est possible d'ajouter un habillage HTML personnalisé autour de certains modules.  Cette option est destinée aux utilisateurs avancés et aux développeurs qui souhaitent personnaliser finement le code HTML d'un modèle, tout en continuant à bénéficier de la flexibilité de l'outil de création de modèle.

Pour utiliser cette fonctionnalité, rédigez un balisage HTML, puis insérez le jeton HubL html à l'emplacement souhaité. Dans l'exemple ci-dessous, une balise HTML5 aside est appliquée à l'habillage du module.

Wrapping HTML

ID CSS personnalisé

L'attribut HTML ID est disponible comme option pour tous les groupes de modules. Les attributs ID ressemblent aux classes en ce qu'ils permettent de libeller certaines zones d'un modèle afin d'y appliquer des styles CSS.  Néanmoins, contrairement aux classes, les attributs ID sont uniques (une seule utilisation par modèle), et permettent donc d'appliquer un style CSS avec plus de précision.  

Dans l'exemple ci-dessous, l'ID sidebar est attribué à un groupe de modules.  L'attribut id="sidebar" est ajouté à la balise de conteneur div du groupe, ce qui revient à attribuer un nom à ce groupe de modules. Cette classe personnalisée ou ses éléments peuvent maintenant être ciblés dans le fichier CSS.

Custom ID

Pour cibler le groupe entier à l'aide d'un attribut ID personnalisé et ajouter une bordure, la déclaration CSS suivante peut être appliquée :

Cette déclaration peut être ajoutée au ficher CSS principal ou aux fichiers CSS personnalisés.

#sidebar{
border: 1px solid red;
}

Modifier les déclarations CSS appliquées au corps

Enfin, il est possible d'ajouter un attribut de classe ou une déclaration CSS inline à la balise HTML body. Vous pouvez également ajouter des fichiers CSS supplémentaires, des scripts ou d'autres éléments de code à la balise d'en-tête du modèle. Pour accéder à ces options, cliquez sur le menu Modifier situé en haut du gestionnaire de conception.

Body CSS

Article précédent:

Create Effective Inbound Content in Classroom Training Click Here

Article suivant: