Utilisez l'inspecteur pour styliser votre modèle

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èleDans 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

http://www.w3schools.com/tags/att_global_class.asp

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.  

http://www.campaignmonitor.com/css/

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.

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.

http://www.campaignmonitor.com/css/

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 dans le module.

Ajouter un identifiant CSS (groupes de modules uniquement)

http://www.w3schools.com/tags/att_global_id.asp

L’attribut HTML ID est disponible en option pour tous les groupes de modules. Les identifiants sont semblables des classes car ils vous permettent d'attribuer des zones de votre modèle à cibler dans la feuille de style. Toutefois, contrairement aux classes, les identifiants doivent être uniques (voir uniquement une fois par modèle) et sont plus lourds que les classes en termes de spécificité CSS.  

Par exemple, pour ajouter une bordure rouge au groupe avec l'identifiant sidebar,vous pouvez écrire le CSS comme l'exemple ci-dessous :

#sidebar { border: 1px solid red; }

Par exemple, pour ajouter une bordure rouge au groupe avec l'identifiant sidebar, vous pouvez écrire le CSS comme l'exemple ci-dessous :

#sidebar {
border: 1px solid red;
}