Besoin d'aide pour rédiger un email avec hyperliens
Soso
Anonyme
Envoyé le 01/12/2022 à 12:21
Bonjour,
J'ai créé une newsletter, comportant des hyperliens, avec le logiciel Canva.
Le problème, c'est que le seul moyen que j'ai de conserver les hyperliens dans ma newsletter, c'est de l'exporter en PDF et de la mettre en fichier joint, or, je veux que la newsletter s'affiche directement dans le mail, et non la joindre.
Donc la solution que j'ai trouvée, c'est d'exporter les images, et de les coller dans le corps du mail en créant des hyperliens à différents endroits de l'email.
Seulement, je n'ai trouvé aucune messagerie qui permet de faire quelque chose de propre. Je m'explique :
Ma newsletter est divisée en 2 lignes : image 1 et image 2 ci dessous,
et 2 colonnes, mais uniquement pour la partie inférieure (en gros colonne de gauche = image 2, et colonne de droite = image 3, 4 et 5)
Comme ceci :
_______________
image 1
_______________
image3
image 2 image 4
image 5
Sauf que, dans TOUS les logiciels que j'utilise, je n'ai pas de liberté pour pouvoir positionner exactement où je veux les images, notamment la 3, 4 et 5.
Par exemple, dans le logiciel Outlook, je peux créer un tableau et mettre les images 3 et 4 et 5 dans une même colonne, mais ça ne sera pas nickel, il y aura une ligne blanche, alors que j'aimerais que tout soit parfaitement uni et collé, sans espace.
Sans parler des bugs multiples que je rencontre avec ce logiciel.
Auriez-vous une solution à me proposer svp ?
J'ai pensé à exporter le code html que canva me propose et à l'intégrer quelque part, mais je ne m'y connais pas du tout dans tout ce qui est HTML.
Merci beaucoup pour votre aide.
J'ai créé une newsletter, comportant des hyperliens, avec le logiciel Canva.
Le problème, c'est que le seul moyen que j'ai de conserver les hyperliens dans ma newsletter, c'est de l'exporter en PDF et de la mettre en fichier joint, or, je veux que la newsletter s'affiche directement dans le mail, et non la joindre.
Donc la solution que j'ai trouvée, c'est d'exporter les images, et de les coller dans le corps du mail en créant des hyperliens à différents endroits de l'email.
Seulement, je n'ai trouvé aucune messagerie qui permet de faire quelque chose de propre. Je m'explique :
Ma newsletter est divisée en 2 lignes : image 1 et image 2 ci dessous,
et 2 colonnes, mais uniquement pour la partie inférieure (en gros colonne de gauche = image 2, et colonne de droite = image 3, 4 et 5)
Comme ceci :
_______________
image 1
_______________
image3
image 2 image 4
image 5
Sauf que, dans TOUS les logiciels que j'utilise, je n'ai pas de liberté pour pouvoir positionner exactement où je veux les images, notamment la 3, 4 et 5.
Par exemple, dans le logiciel Outlook, je peux créer un tableau et mettre les images 3 et 4 et 5 dans une même colonne, mais ça ne sera pas nickel, il y aura une ligne blanche, alors que j'aimerais que tout soit parfaitement uni et collé, sans espace.
Sans parler des bugs multiples que je rencontre avec ce logiciel.
Auriez-vous une solution à me proposer svp ?
J'ai pensé à exporter le code html que canva me propose et à l'intégrer quelque part, mais je ne m'y connais pas du tout dans tout ce qui est HTML.
Merci beaucoup pour votre aide.
Bipbipcoyote
4 195 contributions
Membre depuis le 06/03/2001
Envoyé le 01/12/2022 à 19:06 Modifié par Bipbipcoyote
Bonjour,
Faire une newsletter est une chose, mais sa distribution est plus qu'essentielle, on n'expédie pas un newsletter via son logiciel de messagerie personnelle à moins que de n'avoir que quelques abonnés
tu dois donc recourir à une plateforme comme Substack , sur ce lien
Autre lien en vidéo qui explique toute la mécanique de A à Z
Pour le html, il suffit de l'apprendre, c'est un langage facile Sur ce site, tu peux apprendre, fais un clic droit sur la page et demande à ton navigateur de la traduire en français
mais tu peux aussi Suivre des cours en vidéo sur Youtube
Comme tu vas le constater une newsletter ressemble très fort à un mini-site web
une page html est pourvue de commande comprise entre les caractères <> mais de nos jours pour en modifier l'aspect on doit utiliser des styles
Ces styles sont soit inclus dans la page ou dans un fichier à part que l'on inclus dans la page (pourquoi ? parce que l'on fait un site web, on utilise ce fichier dans plusieurs pages, et on ne va pas tout réécrire à chaque fois)
un code simple pour ce que tu veux faire, tu peux le copier dans ton bloc-note et le sauver par exemple sous le nom manewsletter.html, j'ai mis des couleurs dans les zones, toi tu dois remplir les lignes img src= avec le chemin et le nom des images que tu veux utiliser
Tu peux modifier le code, lorsque la page est affichée dans le navigateur, tu fais un clic droit et tu choisis la commande "inspecter" tu auras alors une colonne sur la droite de l'image et dans cette colonne, tu vas retrouver le CSS (=le style) de différents éléments, tu les modifies là et tu peux alors observer ce que donne les changements que tu effectues, si par hasard cela devient incontrôlable, tu peux simplement rafraîchir la page et les réglages originels reprennent leur place
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma NewsLetter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div style="float:left;width:49%;background-color:blue;min-height:600px; margin:-8px;"> </div>
<div style="float:left;width:49%;min-height:600px;margin:-8px;text-align:center;">
<div style="background-color:green;min-height:200px;"><a href="https://bipbipcoyote2000.be" target="New"><img src="https://bipbipcoyote2000.be/wp-content/uploads/2019/07/Coyote-1.gif"></a> </div>
<div style="background-color:orange;min-height:200px;"><img src=""> </div>
<div style="background-color:yellow;min-height:200px";><img src=""> </div>
</div>
<div style=" float: left;
text-align: center;
margin-top: 6px;
margin-left: -8px;
background-color: violet;
width: 1295px;">
<a href="mailto:email@example.com">Se désincrire</a>
</div>
</div>
</body>
et une dernière chose, il faut tester ce que cela va donner sur un petit affichage comme un smartphone, ainsi le code ci dessus ne pourra pas convenir, parce que les mesures sont données en dur, il faut aussi se pencher sur le "responsive", c'est à dire que la page s'adapte suivant la largeur de l'écran mais c'est une autre histoire, je ne peux pas résumer plusieurs heures d'études du langage sur une réponse dans mémoclic,
Faire une newsletter est une chose, mais sa distribution est plus qu'essentielle, on n'expédie pas un newsletter via son logiciel de messagerie personnelle à moins que de n'avoir que quelques abonnés
tu dois donc recourir à une plateforme comme Substack , sur ce lien
Autre lien en vidéo qui explique toute la mécanique de A à Z
Pour le html, il suffit de l'apprendre, c'est un langage facile Sur ce site, tu peux apprendre, fais un clic droit sur la page et demande à ton navigateur de la traduire en français
mais tu peux aussi Suivre des cours en vidéo sur Youtube
Comme tu vas le constater une newsletter ressemble très fort à un mini-site web
une page html est pourvue de commande comprise entre les caractères <> mais de nos jours pour en modifier l'aspect on doit utiliser des styles
Ces styles sont soit inclus dans la page ou dans un fichier à part que l'on inclus dans la page (pourquoi ? parce que l'on fait un site web, on utilise ce fichier dans plusieurs pages, et on ne va pas tout réécrire à chaque fois)
un code simple pour ce que tu veux faire, tu peux le copier dans ton bloc-note et le sauver par exemple sous le nom manewsletter.html, j'ai mis des couleurs dans les zones, toi tu dois remplir les lignes img src= avec le chemin et le nom des images que tu veux utiliser
Tu peux modifier le code, lorsque la page est affichée dans le navigateur, tu fais un clic droit et tu choisis la commande "inspecter" tu auras alors une colonne sur la droite de l'image et dans cette colonne, tu vas retrouver le CSS (=le style) de différents éléments, tu les modifies là et tu peux alors observer ce que donne les changements que tu effectues, si par hasard cela devient incontrôlable, tu peux simplement rafraîchir la page et les réglages originels reprennent leur place
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma NewsLetter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div style="float:left;width:49%;background-color:blue;min-height:600px; margin:-8px;"> </div>
<div style="float:left;width:49%;min-height:600px;margin:-8px;text-align:center;">
<div style="background-color:green;min-height:200px;"><a href="https://bipbipcoyote2000.be" target="New"><img src="https://bipbipcoyote2000.be/wp-content/uploads/2019/07/Coyote-1.gif"></a> </div>
<div style="background-color:orange;min-height:200px;"><img src=""> </div>
<div style="background-color:yellow;min-height:200px";><img src=""> </div>
</div>
<div style=" float: left;
text-align: center;
margin-top: 6px;
margin-left: -8px;
background-color: violet;
width: 1295px;">
<a href="mailto:email@example.com">Se désincrire</a>
</div>
</div>
</body>
et une dernière chose, il faut tester ce que cela va donner sur un petit affichage comme un smartphone, ainsi le code ci dessus ne pourra pas convenir, parce que les mesures sont données en dur, il faut aussi se pencher sur le "responsive", c'est à dire que la page s'adapte suivant la largeur de l'écran mais c'est une autre histoire, je ne peux pas résumer plusieurs heures d'études du langage sur une réponse dans mémoclic,
Visitez mon Site Google est mon ami, il répond mieux que moi, posez lui d'abord vos questions
Discussion trop ancienne
Cette discussion a été automatiquement fermée car elle n'a plus reçue de nouveau message depuis trop longtemps.
Nous vous suggérons de créer un nouveau message
2 enregistrements - Page 1/1
« Retour sur la liste des messages de ce forum