Regardez notre cours accéléré sur l'utilisation des Skins dans Symplify (anglais seulement).
____________________________________________________
Grâce aux skins, les administrateurs de compte peuvent gérer le contenu et le style par défaut de tous vos modèles à partir des paramètres du compte.
Les skins sont principalement destinés aux informations de base, l'en-tête et le pied de page, mais peuvent également être personnalisés pour d'autres éléments de votre boilerplate.
Les skins vous aideront à mettre à jour rapidement le logo dans tous vos envois à l'aide d'une seule action. Toutes modifications de votre configuration entraînera une mise à jour immédiate de votre boilerplate, de tous vos brouillons et envois automatiques qui se trouvent dans le projet associé au skins mis à jour.
L'objectif des skins est de vous permettre de garder facilement votre boilerplate, vos messages et vos pages à jour. Et de donner aux administrateurs de compte un contrôle sur le contenu de base.
Pré-requis
Les skins sont applicables sur des boilerplates correspondant aux paramètres de configuration des skins. Tout les boilerplates par défaut de Symplify sont équipés de ces paramètres, mais des boilerplates personnalisés peuvent également correspondre aux paramètres. Contactez notre support si vous n'êtes pas sûr.
Pour les modèles de page web, vous devez utiliser le thème de la page Thème de la configuration des modèles afin d'utiliser la configuration des styles.
Seuls les administrateurs des comptes peuvent modifier les paramètres par défaut.
Comprendre les couches
Disons que vous créez un brouillon de courriel. Ce que vous voyez lorsque vous ouvrez l'éditeur de courrier électronique est basé sur votre boilerplate combiné avec vos paramètres de skins enregistrés au niveau du projet ou du compte.
Imaginons-le comme une structure d'immeuble.
La première couche - La base, la structure d'acier (qui est la même pour l'entièreté de l'immeuble) est le boilerplate. C'est la structure de vos communications dans votre compte.
La deuxième couche, qui peut être différente d'un étage à l'autre (par exemple la couleur des murs et l'emplacement des fenêtres), est le skin. Les skins peuvent être différents selon le projet. Ça ajoute de la liberté au modèle de base. Chaque étage est comme un projet différent qui peut avoir son propre skin avec ses spécificités (un logo différent par exemple).
Dans le schéma ci-dessous, la troisième couche (output) représente votre communication : un courriel par exemple.
Éditer les skins
Nous vous recommandons de commencer à vous concentrer sur la configuration de votre skin au niveau du compte, puis de continuer au niveau du projet si vous le souhaitez.
Lorsque vous souhaitez modifier l’apparence pour un projet spécifique, il vous suffit de choisir le projet dans la liste déroulante.
Le niveau projet est utile si vous voulez par exemple avoir différents logos pour différents pays ou marques, ou des textes par défaut dans différentes langues.
Notez que les projets sans skin spécifique utilisent les paramètres par défaut du compte.
Lorsque vous enregistrez votre configuration, les paramètres sont immédiatement appliqués à tous vos modèles, brouillons, envois automatiques et pages correspondantes.
À côté du bouton Enregistrer, vous trouverez un menu Options.
À partir de ce menu, vous pouvez:
Sauvegarder les paramètres en cours d'utilisation - Ceci vous fournira un fichier contenant les données brutes de votre dernier skin enregistré au niveau sélectionné (compte ou projet).
Les données brutes peuvent être collées au bas de la page de configuration du skin pour restaurer la version sauvegardée.
Utiliser les paramètres par défaut - cette option efface votre skin personnalisé et utilise à la place le skin par défaut Symplify.
Supprimer tous les paramètres - cette option laissera toutes les configurations de skin vides. (Uniquement disponible au niveau des paramètres du compte.)
Supprimer les remplacements de projet - cette option efface toutes les configurations de skin spécifiques au projet et utilise les paramètres définis au niveau du compte. (Uniquement disponible au niveau du projet.)
Contenu et style
Alors, quel type de contenu et de style peut être géré via Skins?
Logos
Vous pouvez télécharger ici votre logo pour l'en-tête et le pied de page. Lorsque vous cliquez, par exemple, sur Logo d'en-tête, vous pouvez ajouter l'URL de l'image (ou télécharger l'image), définir les dimensions de l'image, ajouter un titre à l'image, ajouter un lien URL et définir un alignement pour le logo.
| top |
Contenu
Les configurations de contenu sont adaptées aux informations d'en-tête et de pied de page, telles que la manière de vous contacter, les informations sur votre entreprise, le désabonnement, etc.
Company info
Les paramètres des informations sur l'entreprise ne sont inclus par défaut que dans les boilerplates du canal Print, mais peuvent bien sûr être inclus dans tous les autres canaux, il suffit de le rajouter.
Vous ajoutez ici l'URL de votre page d'accueil et votre numéro d'organisation.
Désinscription des courriels
Le texte de la clause de non-responsabilité de votre courriel qui doit décrire pourquoi vos destinataires reçoivent vos courriels.
Les paramètres du skin sont:
Texte - Texte d'information, c'est-à-dire pourquoi vos destinataires reçoivent vos courriels
Texte de lien - Texte du lien de désabonnement
Le texte correspondant dans vos e-mails* :
Désinscription des SMS
En ajoutant votre texte de désabonnement SMS à votre configuration, vous pouvez facilement l'ajouter à votre contenu SMS.
Les paramètres de configuration sont:
Texte - Modifiez votre texte d'exclusion par SMS avec votre mot-clé personnalisé et votre numéro de boîte de réception
Texte du lien - Si la désactivation des SMS est gérée depuis une page Web, ajoutez le texte du lien…
URL du lien - … et l'URL de votre page Web.
Ouvrir dans le navigateur
Ceci est le texte pour visualiser le courriel dans le navigateur.
Les paramètres de configuration sont:
Texte - paragraphe où vous pouvez, par exemple, décrire le problème.
Texte du lien - le texte lié pour ouvrir le message dans le navigateur (sera automatiquement lié à l'URL du lien)
URL du lien - handlebar qui crée le contenu du navigateur (se connecte automatiquement à votre texte de lien). Remarque: aucune modification n'est recommandée!
Le texte correspondant dans vos courriels* :
Contact
Les paramètres de configuration sont:
Titre- en-tête, contactez-nous, support client, etc.
Texte - paragraphe avec les informations de contact.
Texte de Lien - lien vers lequel vous pouvez guider vos destinataires vers votre site Web (sera automatiquement lié à l'URL du lien)
URL du lien - l'URL de votre site Web (se connectera automatiquement à votre texte de lien)
Le texte correspondant dans vos courriels* :
Le texte correspondant dans les pages web d'un microsite* :
À propos de nous
Les paramètres de configuration sont:
Titre - en-tête, à propos de nous, le nom de votre entreprise, etc.
Texte - paragraphe où vous décrivez, par exemple, votre entreprise et votre objectif.
Texte du lien - texte où vous pouvez guider vos destinataires vers votre site Web (sera automatiquement lié à l'URL du lien)
URL du lien - l'URL de votre site Web (se connectera automatiquement à votre texte de lien)
Le texte correspondant dans vos courriels* :
Le texte correspondant dans les pages web d'un microsite* :
Contenu
Parfois, vous devez avoir un en-tête/pied de page personnalisé avec du texte qui ne concerne pas l'entreprise, les données de contact, etc. Pour cela, les paramètres de contenu vous donnent la possibilité d'ajouter du texte à votre courrier électronique ou à votre site web dynamique par le biais de skins.
*Comme vous pouvez le voir, le courriel ne contient pas tout le texte de Skins. Cela est dû au fait que le modèle d'en-tête que nous utilisons, n'a pas de handlebar pour tout le texte du code. Selon le modèle d'en-tête et de pied de page que vous choisissez, vous avez la possibilité d'ajouter plus ou moins de texte à votre en-tête et à votre pied de page. Les paramètres utilisés dans le modèle d'en-tête et de pied de page que vous avez choisi (soit pour l'e-mail, soit pour le modèle de page web) ont une bordure autour du fichier d'entrée.
| top |
Style
Dans la section Style, vous pouvez définir le thème de votre boilerplate et télécharger des icônes pour les médias sociaux et d'autres icônes que vous pourriez vouloir avoir dans votre pied de page.
Theme
Personnalisez vos différents modèles en fonction de vos couleurs, polices, logos et icônes de réseaux sociaux. Remarque: les modifications peuvent ne pas s'appliquer à tous vos envois.
Le boilerplate a différentes sections : Corp (dans l'exemple ci-dessous bleu), Entête (gris), Contenu (blanc), Pied de page (violet).
Les différentes sections incluent différents types de configurations.
Corp
Ici, vous pouvez éditer votre couleur de fond et ajouter une feuille de style pour vos communications.
Si vous avez des ajustements CSS mineurs à vos modèles de page, vous pouvez les ajouter au CSS de la page.
Contenu
Ici, vous pouvez éditer la couleur d'arrière-plan de la section de contenu (la couleur derrière vos articles) et fixez la hauteur de ligne pour la section de contenu.
Vous pouvez également modifier la police, la taille du texte et tout autre style pour vos titres, paragraphes, liens et boutons.
Concernant les polices, nous vous recommandons d’utiliser des polices Websafe, ce sont des polices qui sont supportées sur tous les périphériques de courriel (en savoir plus sur w3schools).
Vous pouvez également utiliser d'autres polices, mais si c'est le cas, veillez à toujours inclure une police de secours, au cas où un périphérique de courriel ne soit pas en mesure d'afficher votre police d'origine. Si vous désirez avoir votre propre police, qui n'est pas sûre pour le web, dans vos e-mails, parlez à notre équipe de support ou à votre gestionnaire de compte.
Entête
Dans l'en-tête du thème, vous pouvez styliser la section d'en-tête de vos boilerplates. L'en-tête est la partie supérieure de vos modèles et l'endroit où vous placez normalement votre logo.
Vous pouvez définir la couleur de fond, la hauteur et la largeur des lignes, modifier la police, la taille du texte et tout autre style pour votre texte d'en-tête.
Pied de page
Dans le pied de page du thème, vous pouvez styliser le pied de page de vos boilerplates. Le pied de page est la partie inférieure de vos modèles et l'endroit où vous placez normalement le contenu de vos informations (voir plus haut).
Dans nos modèles de courriel par défaut, vous pouvez inclure des icônes (de réseaux sociaux) dans votre pied de page (Pour en savoir plus, voir ci-dessous).
Vous pouvez définir la couleur de fond, la hauteur et la largeur des lignes, modifier la police, la taille du texte et d'autres styles pour votre texte de bas de page.
Conseil : si vous souhaitez que l'en-tête et/ou le pied de page aient la même largeur que la section de contenu, vous pouvez modifier la largeur de 100 % en 640 px (si vous disposez d'un modèle personnalisé, la valeur peut être différente) :
Icônes
Vous pouvez ajouter des icônes de médias sociaux ou d'autres icônes dans votre pied de page.
Pour gérer les icônes de médias sociaux, vous pouvez utiliser ces paramètres:
- Icon Margin Left/Right - l'espace en pixel à gauche et à droite de chaque icône
- Icon Margin Top/Bottom - l'espace en pixel en haut et en bas de chaque icône
- Table Width - la largeur du tableau autour de l'icône. En général, cette valeur est la même que la largeur des autres blocs de bas de page et n'a pas besoin d'être modifiée.
- Copy all icons - au cas où vous auriez besoin d'ajouter les icônes ailleurs, vous pouvez copier le guidon pour le bloc d'icônes
- Titre - le titre de votre icône
- URL du lien - ajoutez l'URL à votre page de média social
- URL de l'icône - là où Simplify trouve l’image, téléchargez votre logo en cliquant sur l’icône nuage. Vous pouvez prévisualiser votre image actuelle en cliquant sur l'icône en forme d'œil.
- Dimensions de l'icône - Si vous souhaitez définir la largeur ou la hauteur de vos icônes, vous devez écrire les pixels souhaités dans les zones. Sinon, laissez-les vides.
Vous pouvez sélectionner un des exemples dans la liste déroulante et les modifier.
| top |
Mise en page
Vous pouvez choisir l'un de nos modèles pour l'en-tête et le pied de page de votre courriel.
Si vous n'êtes pas satisfait de notre sélection, vous pouvez en commander un sur mesure. Il vous suffit de contacter notre équipe de support ou votre gestionnaire de compte.
Vous pouvez également adapter ou ajouter votre propre code (à vos propres risques).
N'oubliez pas de sauvegarder les paramètres actuels avant de commencer à modifier le code - vous pourriez avoir besoin de la sauvegarde plus tard.
| top |
Scripts
Éléments de tête/Scripts
Les boilerplates de courriel comportent des corrections pour certaines bizarreries de différents périphérique de courriel, mais vous pouvez ajouter des éléments <lien>, par exemple lorsque vous utilisez une police personnalisée ou un autre CSS. Le contenu des éléments <head> sera placé en premier.
Ajoutez une feuille de style interne dans le champ de saisie CSS - mais sans <style type="text/css">, il suffit d'ajouter les classes.
Les pages ont toujours font-awesome 4, jquery 1.12+ et bootstrap 3 inclus par défaut. Le contenu de ce paramètre de configuration sera placé en dernier dans <head> l'élément. Vous pouvez inclure n’importe quel élément (méta, script, lien, style), mais assurez-vous que les bibliothèques incluses sont compatibles avec les bibliothèques existantes.
Données de configuration
Ici, vous pouvez voir et éditer les données brutes pour vos configurations.
Si vous souhaitez utiliser une sauvegarde d'une configuration précédente au lieu de votre configuration actuelle, vous pouvez coller les données brutes ici et cliquer sur Enregistrer.
Vous pouvez également personnaliser vos propres paramètres et les ajouter à la configuration.
N'oubliez pas de sauvegarder vos paramètres actuels avant de modifier les données de configuration - vous pourriez en avoir besoin.
| top |
Modification d'un modèle contenant des paramètres de configuration
Les blocs modèle contenant des configurations ne sont pas modifiables par défaut. S'ils sont correctement configurés, vous ne devriez pas du tout avoir besoin de modifier leur contenu lors de l’envoi d’un courriel.
Vous pouvez toutefois déverrouiller le bloc pour ajouter un autre contenu. Pour déverrouiller un bloc, survolez-le et cliquez sur la loupe en haut à gauche.
Puis décochez la case Verrouiller ce bloc dans l'inspecteur.
Lorsque vous déverrouillez, le handlebar de configuration de la section s'affichera, i.e.:
{{{config.data.templates.emailFooter}}}
Attention! Toute modification apportée à un handlebar peut désactiver la connexion à son contenu de configuration.
Vous pouvez supprimer des handlebar que vous ne souhaitez pas inclure dans votre section de pied de page. Ou bien sûr, déplacez-les dans le bloc. Si vous avez supprimé un handlebar et souhaitez le remplacer. Vous pouvez copier le handlebar depuis Paramètres du compte > Skins ou recommencer avec un nouveau bloc contenant la configuration par défaut (et supprimer votre ancien bloc).
Copier le handlebar depuis Paramètres du compte > Skins
Nous recommandons d'ajouter une troisième paire de {} autour du handlebar après l'avoir collé dans votre boilerplate, surtout si vous utilisez du code html (<br/>, <strong></strong>,<font...) dans votre champ de saisie. Sinon, vous verrez le code html dans vos emails, pages web dynamiques,...
Une fois que vous avez édité un bloc contenant des configurations, vous devez le verrouiller afin d’afficher le contenu avec les configurations.