Créez un mail sur un modèle HTML

Créez un mail sur un modèle HTML

Curieux, aventurier,créatif, qui n’a jamais rêvé de savoir coder ?

MailKitchen vous propose une initiation au codage HTML.

Ci-dessous, un modèle simple que nous vous proposons d’adapter à votre projet.

 

1 – Entête avec Logo (138×22)

– Visuel de présentation (600×278)

 

2 – L’offre

 

 

3 – Texte Factuel

– Image décorative (300×202)

4 – Bas de page

 

Préparer le terrain

Pour commencer, préparez un dossier qui comprend un sous dossier avec les images que vous souhaitez utiliser (img). Assurez vous que vos images sont en png ou jpg.

Si vous souhaitez insérer un texte et/ou un faux bouton sur vos images, comme nous l’avons fait, nous vous conseillons de les modifier au préalable avec des outils comme Photoshop ou GIMP.

Ces derniers vous permettront également de sélectionner la taille adéquate pour vos photos (cet article propose des tailles adaptées à notre plateforme de routage emailing et qui seront les plus susceptibles d’afficher vos emails correctement dans la plupart des boîtes emails).

Nous vous invitons à télécharger le code html et les images du modèle ci-dessus.

Code Html : ,https://drive.google.com/file/d/1oLhafnL2nfiveUxhttps://drive.google.com/file/d/1YMP9OjyHDEJJxAlRTLuL0AzS4rRgQiNw/view?usp=sharingrkcUjiic0vEv3Vpvn/view?usp=sharing

Images : https://drive.google.com/drive/folders/1IAo_phFebNcxQUQSSRQjSPEUuQ477eRy?usp=sharing

(Il n’est pas obligatoire de télécharger les images, l’email laissera un espace vide que vous viendrez combler plus-tard avec vos propres photos)

Nous recommandons de travailler sur un bloc note et d’ouvrir en parallèle l’email sur une page internet afin d’avoir un visuel des modifications apportées (F5 : mise à jour de la page).

Personnaliser son email

Nous avons surligné en différentes couleurs les informations que vous pouvez changer pour personnaliser au maximum votre email (à noter : tout n’a pas été surligné).

Descriptif des couleurs :

Jaune : Informations relatives à votre entreprise
Vert : Couleurs de fond
Bleu : Images
Rose : Informations relatives aux textes

Chaque code Html commence par un Doctype (photo ci-dessous).

Il introduit le code, notamment en lui donnant un titre. Vous pouvez, par exemple, remplacer notre titre par « Votre nom d’entreprise, votre Baseline ».

 

 

 

 

 

 

 

 

Si vous le souhaitez, vous pouvez changer les couleurs des fonds en modifiant les codes couleurs relatifs aux backgrounds.

1 – L’entête

Une cellule est encerclée par les balises <tr> et </tr>.
L’image ci-dessous correspond à la cellule de l’entête.

Afin de rendre cliquable vos images la balise « <a href » introduit un possible hyperlien. A la suite vous trouverez les caractéristiques liées à la position de l’image, le source (dossier/nom.format) et une alternative à l’image dans le cas où celle-ci ne s’afficherait pas.

Pensez à remplacer nos liens par les vôtres (landing page, page web, plaquette commerciale…).

Il faut également que vous changiez la source des images pour que le code puisse remplacer nos images par les vôtres.

Si vous souhaitez modifier la police, le style ou l’emplacement de votre Baseline vous pouvez le faire en modifiant les caractéristiques surlignées en rose. Pour changer le texte en lui-même vous pouvez directement le modifier dans le code.

–  Visuel de présentation

De même que pour modifier l’image du logo, vous avez simplement à remplacer la dénomination que nous avons utilisé (img/visuel.png) par le nom de votre image. Et ensuite de modifier la balise « alt= » avec ce que vous souhaitez afficher, dans le cas où votre image ne serait pas lisible.

2 – L’offre

Libre cours à votre créativité, vous pouvez changer les couleurs, la police, le style, l’emplacement, créer des lignes, des carrés, à vous de choisir.

Toutefois, pensez bien à changer impérativement toutes les informations surlignées en jaune qui correspondent à notre entreprise.

3 – Texte factuel

– Et image décorative

Ici, il s’agit seulement de créer deux colonnes afin de pouvoir afficher côte à côte image et texte.  Les deux colonnes sont déjà créées, pour cela, nous avons simplement remplacé le width= « 600 » par width= « 300 ».

Pensez à changer le texte factuel, les liens et à mettre votre propre photo comme expliqué plus haut.

Si vous souhaitez transformer votre texte en bouton, vous pouvez ajouter la balise « text-transform:uppercase; » suivi de l’hyperlien et du texte en lui-même.

4 – Bas de page

Concernant notre bas de page nous avons opté pour un design simple et efficace.

Vous avez cependant la possibilité d’ajouter des images, de modifier les couleurs, de changer les formes comme mentionné précédemment.

Quelques indications, si vous souhaitez changer la taille de la bande, il faudra modifier la balise « padding », plus le chiffre sera élevé plus votre bande sera large.

Pensez à intervertir nos informations avec celles de votre entreprise.

Laissez-nous un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *