Voici quelques trucs et astuces avancés pour l'utilisation de variables de modèle.
Quels types de police puis-je utiliser ?
Pour des raisons de sécurité, seules les Polices Google sont pour l'instant compatibles. Nous avons prévu de rendre d'autres polices compatibles lors de prochaines releases.
Comment remplacer des polices ?
Afin de remplacer des polices dans un modèle, créez d'abord une nouvelle variable de type Sélectionnable, par exemple : globalfonts.
Toutes les Valeurs d'article doivent contenir la règle !important.
Si vous voulez pouvoir désactiver le remplacement, vous devez aussi définir une Valeur d'article comme valeur initiale et la sélectionner par défaut (n'ajoutez pas la règle !important ).
A la prochaine étape, ouvrez l' Editeur de style et ajoutez la propriété suivante (et la variable) à la balise font :
font {font-family: {variables.globalfonts}}
Dans le modèle ci-dessus les polices sont déclarées avec la balise font. La déclaration est les remplacement de polices peuvent être différents dans d'autres modèles.
Comment ajouter une image d'arrière-plan à mon modèle ?
Vous pouvez ajouter une image variable en arrière-plan, ce qui vous permet d'utiliser différentes images d'arrière-plan dans vos campagnes email sans avoir à modifier le modèle.
Ajouter une image d'arrière-plan à des blocs particuliers
Tout d'abord, créez une variable Image.
Notes
- Vous devez sélectionner ici une image d'arrière-plan par défaut comme valeur de variable par défaut. Vous pourrez en changer plus tard dans l'éditeur de campagne.
- Vous pouvez utiliser des images issues d'URLs externes ainsi que de la base de données média, et que vous avez chargées auparavant. Lorsque vous utilisez des URLs externes, vous devez vous assurer que les images restent disponibles pendant la durée de vie entière de vos campagnes.
Voici un exemple de code HTML pour une cellule de tableur contenant tout le nécessaire pour l'utilisation de l'image d'arrière-plan. Vous pouvez l'adapter au code de votre modèle et l'ajouter au code HTML du bloc dans lequel vous souhaitez utiliser l'image d'arrière-plan :
<td height="245" valign="middle" background="{variables.BgImage}" style="background-repeat:no-repeat;" bgcolor="{variables.BgImageFallbackColor}" class="cntbg"> <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:245px;"><v:fill type="frame" src="{variables.BgImage}" color="{variables.BgImageFallbackColor}" /><v:textbox inset="0,0,0,0"><div><![endif]--> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody><tr> <td>Your content</td> </tr> </tbody></table> <!--[if gte mso 9]></div></v:textbox></v:rect><![endif]--> </td>Notes
- BgImage est le nom de la variable pour l'image d'arrière-plan.
- BgImageFallbackColor est le nom de la variable pour la couleur d'arrière-plan de secours. Il est recommandé de définir une couleur de secours dans la mesure où certains services de messagerie sont susceptibles de ne pouvoir rendre correctement l'image d'arrière-plan.
- Le commentaire
[if gte mso 9]dans le code HTML est nécessaire pour assurer que l'image est correctement rendue dans Microsoft Outlook. - N'oubliez pas de remplacer les dimensions d'image données dans l'exemple de code par celles de l'image effective.
Une fois que vous avez terminé, vous pouvez ensuite choisir la variable d'image comme image d'arrière-plan dans les Paramètres de style des emails créés avec ce modèle.
Ajouter une image d'arrière-plan à l'email
Tout d'abord, créez une variable Image.
Notes
- Vous devez sélectionner ici une image d'arrière-plan par défaut comme valeur de variable par défaut. Vous pourrez en changer plus tard dans l'éditeur de campagne.
- Vous pouvez utiliser des images issues d'URLs externes ainsi que de la base de données média, et que vous avez chargées auparavant. Lorsque vous utilisez des URLs externes, vous devez vous assurer que les images restent disponibles pendant la durée de vie entière de vos campagnes.
Configurez l'arrière-plan du corps de message en ajoutant le code suivant au modèle CSS dans l' Éditeur de style:
body { background:{variables.fullBgFallbackColor} url('{variables.fullBgImage}'); -webkit-text-size-adjust:none; -ms-text-size-adjust:none; margin:0; padding:0; }Intégrez ensuite le code HTML suivant à la première balise table du modèle dans l' Éditeur de cadre:
<table cellspacing="0" cellpadding="0" border="0" width="100%" background="{variables.fullBgImage}" style="background-repeat:repeat; background-position:top left;" class="gwfw">Où fullBgImage est le nom de variable pour l'image d'arrière-plan et fullBgFallbackColor est le nom de variable pour la couleur de secours.
Ne configurez pas de couleur d'arrière-plan dans le premier tableur car elle ne sera pas rendue correctement et recouvrira l'image d'arrière-plan dans Microsoft Outlook.
Une fois que vous avez terminé, vous pouvez ensuite choisir la variable d'image comme image d'arrière-plan dans les Paramètres de style des emails créés avec ce modèle.
Si vous ne voulez pas utiliser l'image d'arrière-plan dans une campagne, remplacez-la simplement par une image transparente dans les Paramètres de style.
Comment ajouter des marges personnalisées ?
La manière la plus facile de créer des marges est d'utiliser une structure de tableur et de configurer la valeur de hauteur des cellules. Vous pouvez aussi utiliser des images transparentes et configurer la caractéristique de hauteur et de largeur.
Créez d'abord une variable de type Nombre - Entier, par exemple : headlinemargintop.
Ajoutez le code suivant au bloc du modèle :
{variables.headlinemargintop}
Pour la vue sur mobile il se peut que vos espacements soit trop grands, donc dans ce cas les marges peuvent être configurées via des classes de mobile définies dans les règles de requête media.