Comment créer et envoyer des courriels Abonnez-vous gratuitement
Il existe de nombreuses options payées fournies par de nombreux fournisseurs de bulletin électronique, mais si vous pouvez envoyer un de vos comptes Gmail, Yahoo, Hotmail et tout autre compte de courrier électronique gratuit, vous pouvez réserver plus de votre budget sur d'autres éléments.
Si vous êtes à la recherche d'une meilleure gestion des services de bulletin avec des outils pour surveiller votre campagne e-mail, rendez-vous avec le service payant, mais si vous êtes à la recherche d'envoyer simplement un bulletin d'information à quelques amis, vous allez adorer ce tutoriel.
Nous allons vous guider sur la façon d'enregistrer votre propre modèle de bulletin d'information comme un modèle HTML et commencer à les envoyer, avec l'aide de CampaignMonitor.
Commencez par Email Template dans Photoshop
Si vous avez une idée sur ce que vous voulez que votre modèle de bulletin pour ressembler, vous pouvez commencer à travailler avec Photoshop. Sinon, vous pouvez télécharger un modèle à partir de nombreux fournisseurs de modèles de courrier électronique gratuit. Il n'y a pas de largeur et la hauteur d'un modèle de courrier électronique, mais assurez-vous qu'il est compatible et lisible sur tout courrier électronique sans pauses, nous vous suggérons de définir la taille de la largeur à pas plus de 650px. Il n'y a cependant pas de limitations sur les hauteurs, de sorte que le paramètre est à vous.
Modèle Email
Vous pouvez être aussi créatifs que vous le souhaitez avec votre modèle de courrier électronique, mais garder à l'esprit, avec plus d'éléments créatifs inclus, il y aura plus de travail à trancher chaque élément. Le modèle que nous utiliserons a seulement quelques éléments simples: un en-tête, photo, lignes et texte, au profit de ce guide.
sélection des polices
Vous pouvez certainement utiliser tout type de police disponible sur votre Photoshop. Mais si vous créez un bulletin d'information, il est conseillé d'utiliser des polices Web telles que Times New Roman, Arial et la Géorgie. Dans le cas contraire, utilisez vos polices spéciales, mais les enregistrer sous forme d'images, plutôt que sous forme de texte.
Essayez de limiter avoir à sauver trop d'images dans votre modèle, car cela ne fera que rendre plus grand et donc plus de temps à charger.
1. Trancher votre gabarit e-mail
Dans ce guide, nous allons utiliser une version modifiée du modèle de courrier électronique gratuit par CampaignMonitor. Téléchargez ici pour suivre ce tutoriel.
Maintenant que vous êtes prêt avec votre modèle de courrier électronique, ouvrez-le avec Photoshop, sélectionnez l'outil Slice et commencer à trancher tous les éléments du modèle.
Dans ce processus, vous devez découper chaque espace, texte, ligne et de l'image.
Lorsque vous coupez un texte, assurez-vous de sélectionner la taille exacte, ne laissez pas d'espace supplémentaire dans la zone de texte. Pour les espaces vides, les couper en tranches dans une grande tranche, mais les séparer en carrés.
L'outil suivant vous devez utiliser avec Photoshop est l'outil Sélection de tranche. Utilisez cet outil pour fixer chaque élément coupé en tranches dans votre modèle. Assurez-vous que chaque ligne est connecté, ne laissez pas une zone vide sans les trancher.
Avec l'outil Sélection de tranche, zoomez votre modèle et vérifier chaque tranche unique que vous avez fait. Assurez-vous que chaque ligne est connecté et fixe.
Le résultat se présente comme suit.
2. Enregistrer comme modèle HTML
Lorsque vous êtes prêt avec votre modèle en tranches, allez dans Fichier et sélectionnez Enregistrer pour le Web - Périphériques.
Une fenêtre avec les options d'enregistrement s'affiche. Tout d'abord, double-cliquez sur votre élément d'image et nommez-le afin que vous puissiez reconnaître facilement le fichier d'image lorsqu'il est enregistré. Cliquez sur OK une fois que vous les avez nommés.
Suivant dans le coin supérieur droit de la fenêtre pop-up, définissez le type d'image JPEG dans le menu déroulant. La qualité peut être réglée sur 60 ou 80. Si vous réglez la qualité à 100, la qualité d'image sera maximale, mais il fera de votre modèle lourd.
Maintenant, cliquez sur le bouton Enregistrer en bas de la fenêtre.
Une nouvelle fenêtre apparaît. Ici, sélectionnez la destination où vous voulez que le fichier soit enregistré à, puis modifiez le format HTML et les images et définir les tranches à toutes les tranches.
Ensuite, sous le menu déroulant Paramètres, sélectionnez Autre.
Une autre fenêtre apparaît, dans la section HTML, assurez-vous que les choix sous la rubrique « Mise en forme » sont comme ci-dessous; faire la même chose pour la section « codage ».
Maintenant, dans le menu déroulant HTML, sélectionnez tranches. et sélectionner la sortie tranche pour générer ensemble table et les colonnes comme suit.
Maintenant, à partir de tranches. aller à enregistrer des fichiers dans le menu déroulant, descendez à la section «fichiers optimisés et de vérifier dans le dossier Placer les images et définir le nom du dossier d'image. Le dossier d'image par défaut sera « images ». Cliquez ensuite sur « OK ».
En cliquant sur OK vous ramènera à la fenêtre précédente, cliquez sur Enregistrer maintenant.
Une fois que vous appuyez sur le bouton d'enregistrement, ouvrez le dossier de l'emplacement où vous avez enregistré le fichier, et vous verrez le code html et des images dossier contenant des images découpées déjà enregistrées pour votre modèle de courrier électronique.
Ouvrez le fichier « .html » dans votre navigateur, et vous verrez que votre bulletin d'information a été transformé en un modèle HTML.
3. fixe HTML, Modifier l'image du texte aux polices web
A la fin des étapes suivantes, vous obtiendrez le modèle de courrier électronique finalisé au format HTML.
Tous les éléments du bulletin HTML sont enregistrées dans les images, qui incluent tous les textes. Maintenant, vous devez convertir les images de texte aux polices Web. Pour ce faire, ouvrez le fichier « .html » avec l'éditeur HTML. Dans cet exemple, j'utilise Dreamweaver.
Cliquez sur l'en-tête et vérifier le code HTML mis en surbrillance.
Le code HTML sera quelque chose comme ça;
Maintenant supprimer chaque ligne qui est en surbrillance, alternativement, cliquez sur l'image d'en-tête et appuyez sur supprimer. Une fois supprimé, vous verrez la zone remplie avec la couleur d'arrière-plan par défaut.
Maintenant, retournez à Photoshop, vérifiez les détails de police de l'en-tête. Vous devez obtenir le type de police, la couleur et la taille.
Une fois que vous obtenez les détails de la police, entrez le texte d'en-tête dans la zone d'en-tête du modèle, et inclure les détails de police aussi. Dans mon exemple, mon texte en-tête HTML est comme suit:
La ligne HTML ci-dessus a « style » inclus. C'est là que vous définissez votre couleur de fond, la famille police, taille de la police, ainsi que l'espacement des lettres. Essayez de remplir l'espace texte avec l'espacement des lettres approprié et taille de la police; assurez-vous qu'il ne casse pas votre modèle.
Maintenant, vous devez répéter le même processus pour tous les textes dans votre modèle. Assurez-vous que toutes les images de texte sont transformées en polices web et éviter les images inutiles en HTML.
Suivant est facultative, mais vous pouvez définir la lettre d'information du centre, ajoutez l'alignement dans la
