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.
CMS-General

Utilisez l'inspecteur pour styliser votre modèle

Dernière mise à jour: November 21, 2018

Disponible avec :

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basique
HubSpot CMS

Une fois que vous avez structuré un contenu par défaut, il est temps de penser à la présentation esthétique de votre site. 

L'inspecteur est placé à droite du gestionnaire de conception. Il est possible de modifier les propriétés d'une mise en page, d'un module ou d'un groupe, ainsi que d'ajouter des modules à une mise en page glisser-déposer. En ce qui concerne le style de votre modèle, vous pouvez utiliser l'inspecteur pour :

  • Joindre des feuilles de style ou des fichiers JavaScript à votre modèle
  • Ajouter un balisage HTML de l'en-tête ou du pied de page à votre modèle
  • Ajouter des classes CSS personnalisées et des styles en ligne à un module ou groupe spécifique

Personnaliser les options du titre et du corps de votre modèle

Lorsque vous accédez à votre modèle dans le gestionnaire de conception, l'inspecteur de la mise en page apparaîtra à droite si vous n'avez aucun module sélectionné. Les modifications apportées à l'inspecteur de la mise en page affecteront le modèle entier. Vous pouvez y personnaliser les options du titre et du corps du modèle.

Joindre des feuilles de style et des fichiers JavaScript

Dans les feuilles de style liées et les fichiers JavaScript liés, cliquez sur Ajouter pour sélectionner une feuille de style ou un fichier JavaScript à joindre au modèle. Vous pouvez également choisir d'inclure, d'exclure ou d'utiliser des feuilles de style par défaut du domaine dans le menu déroulant des feuilles de domaine.

Pour en savoir plus sur la création et la modification des fichiers CSS pour styliser votre site, cliquez ici.

Ajouter un balisage HTML de l'en-tête ou du pied de page

Dans les champs de balisage et de balisage supplémentaire avant , vous pouvez ajouter un balisage HTML d'en-tête ou de pied de page qui s'appliquera au modèle.

Ajouter une classe ou un style en ligne au corps du modèle

Dans le champ des classes de corps, vous pouvez ajouter un attribut de classe de corps au modèle. Vous pouvez également ajouter un style en ligne au code HTML du modèle dans le champ stylisation en ligne.

Personnaliser les options de style du module ou du groupe

Lorsque vous sélectionnez un module spécifique dans votre modèle, l'inspecteur du module apparaîtra. Lorsque vous sélectionnez un groupe de modules dans votre modèle, l'inspecteur du groupe apparaîtra. L'inspecteur vous permet de personnaliser les options de style du module ou du groupe.

En fonction de la question de savoir si vous personnalisez un module de modèle d'e-mail, un module de page ou un groupe de modules, les options de style qui vous sont présentées varieront. L'exemple ci-dessous montre les options de style disponibles pour un module de texte riche dans un modèle de page.

Ajouter une classe CSS

L'attribut classe HTML permet d'attribuer des classes aux modules dans les modèles afin qu'ils puissent être stylisés à l'aide du CSS. Bien que le modèle contienne déjà de nombreuses catégories par défaut, les classes personnalisées donnent plus de contrôle aux concepteurs sur l'apparence d'un modèle, tout en préservant la flexibilité de l'éditeur de mise en page glisser-déposer.  

Dans l'exemple ci-dessus, la "biographie" est ajoutée au champ Classe CSS dans le module de texte riche. Cette mention ajoute l’attribut HTML classe="bio" à la balise du conteneur div du module (balise HTML désignant une zone ou section d'une page), La classe bio ou les éléments de cette classe peuvent désormais être ciblés dans la feuille de style de modèle.

Note : cette option n'est pas recommandée pour les modèles d'e-mails car les balises de style ne sont pas prises en charge par certains clients de messagerie.

In your template stylesheet, you can target the container div to style by selecting your custom class and applying various CSS properties. For example, to add a background color to the module with the bio class, you could write CSS like the example below:

biographie { 
background: #CCCC;
}

Au-delà du conteneur div, il est également possible de cibler d’autres éléments du module. Pour ce faire, utilisez des sélecteurs inconnus ou directs. Par exemple, pour cibler l'ensemble du texte du paragraphe dans le module avec la classe bio, vous pouvez rédiger un sélecteur CSS imbriqué comme dans l'exemple ci-dessous:


.bio p {
color: #000000;
}

Ajouter un style en ligne

Le style en ligne est un CSS qui est écrit dans vos balises HTML. L'ajout des propriétés CSS et des valeurs dans le champ de style en ligne pour un module ou un groupe appliquera votre code au conteneur du module ou du groupe div.

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. Cela ajoutera l'attribut HTML style="margin-top:30px; color: #00349e;" à la balise du conteneur du module.

Si cette option peut être utile pour fixer rapidement un modèle d'une page spécifique, elle est moins flexible que l'utilisation du champ de la classe CSS, car vous devez réaliser des modifications de code dans les modules individuels plutôt que dans un modèle global de feuille de style.

Les clients de messagerie sont plus limités dans leurs capacités HTML et CSS que les navigateurs web modernes. En tant que tel, le style en ligne est le meilleur moyen de styliser vos e-mails et qu'ils soient supportés par les clients de messagerie. Les modules de modèles d'e-mails ont des options plus intuitives pour ajouter des styles en ligne, affichées ci-dessous.

Ajouter HTML

Bien que l'éditeur de mise en page glisser-déposer ne fournisse pas un accès complet à un balisage HTML d'un modèle, vous pouvez ajouter du code HTML supplémentaire à certains modules. Cette option est destinée aux concepteurs qui ont besoin d'un contrôle supplémentaire sur un modèle HTML, mais qui veulent toujours conserver la flexibilité de l'éditeur de mise en page glisser-déposer sur un modèle HTML brut.

Pour mettre en œuvre cette fonctionnalité, ajoutez le balisage HTML et le token HTML HubL (lorsque le code du module sera affiché) dans le champ HTML de l'écran. L'exemple précédent montre une balise HTML5