Project

General

Profile

Modèle de newsletter » History » Version 4

Simon, 08/10/2022 11:18 AM

1 1 Simon
h1. Modèle de newsletter
2
3 2 Simon
4 4 Simon
Le template de la newsletter est situé dans `/newsletter/input/template.html`. La source au format HEML est également disponible dans le même dossier.
5 2 Simon
6 4 Simon
Depuis la version v2.6, Linea21 propose un template basé sur le format HEML : https://heml.io/
7 1 Simon
8 4 Simon
Le code résultant assure une excellente compatibilité avec la plupart des clients mail. Il est généré via l'éditeur en ligne : https://heml.io/editor/
9
10 1 Simon
h2. Personnaliser la newsletter
11
12 4 Simon
Nous vous conseillons fortement d'utiliser le format HEML et son éditeur associé pour définir vos propres templates - voir plus haut.
13
14
Copier-coller le template existant dans l'éditeur (https://heml.io/editor/) afin d'avoir une base et de tester vos rendus. 
15
Vous trouverez également la documentation associé au langage HEML à l'adresse suivante : https://heml.io/docs/
16
17
Nous vous conseillons fortement de conserver la source au format HEML.
18
19 2 Simon
Une fois le style défini, le conserver à l'état brouillon comme modèle dans le but de le copier-coller lors de chaque ajout de newsletter.
20 3 Simon
21 1 Simon
A placer dans le champ texte lors de la création de l'email.
22
23
24 2 Simon
h2. Les modèles à disposition
25
26 4 Simon
h3. Modèle Châlons Agglo (non généré avec HEML - compatibilité restreinte)
27 1 Simon
28
!newsletter-template-chalons.png!
29
30
<pre><code class="html">
31
<!-- If you delete this meta tag, Half Life 3 will never be released. --><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=##CHARSET##" />
32
<title></title>
33
<link href="##CSSPATH##newsletter.css" rel="stylesheet" type="text/css" /><!-- HEADER -->
34
<table bgcolor="#FCAD35" class="head-wrap">
35
	<tbody>
36
		<tr>
37
			<td>&nbsp;</td>
38
			<td class="header container">
39
			<div class="content">
40
			<table bgcolor="#FCAD35">
41
				<tbody>
42
					<tr>
43
						<td><img height="58" src="https://planclimat.chalons-agglo.fr/templates/public/chalons-agglo2019/images/logo-blanc.png" style="margin: 0; border: 0; padding: 0; display: block;" width="180" /></td>
44
						<td align="right">
45
						<h6 class="collapse">##SITENAME##</h6>
46
						</td>
47
					</tr>
48
				</tbody>
49
			</table>
50
			</div>
51
			</td>
52
			<td>&nbsp;</td>
53
		</tr>
54
	</tbody>
55
</table>
56
<!-- /HEADER -->
57
58
<p>&nbsp;</p>
59
<!-- BODY -->
60
61
<table class="body-wrap">
62
	<tbody>
63
		<tr>
64
			<td>&nbsp;</td>
65
			<td bgcolor="#FFFFFF" class="container">
66
			<div class="content">
67
			<table>
68
				<tbody>
69
					<tr>
70
						<td>
71
						<h1 style="color: #d7087a; margin-bottom: 1em; font-weight: 700;font-size:26px">##TITLE##</h1>
72
						<!-- !!!! WARNING !!!!!
73
							keep at least the main div on your template -->
74
75
						<div id="main">
76
						<p>Tandis que le COVID-19 semble faiblir, la bataille contre un autre fléau continue.&nbsp; Tout aussi imperceptible, mais tout aussi vulnérable aux changements de comportements&nbsp;: j’ai nommé, le changement climatique.</p>
77
78
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff; margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Les actions avancent</h2>
79
80
						<p>Code fiche action&nbsp;: date de l’étape réalisée, description des avancées, suite des opérations</p>
81
82
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">L'agglo délibère</h2>
83
84
						<p>Délibération X&nbsp;: contenu / s’inscrit dans tel objectif du Plan Climat</p>
85
86
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Initiatives</h2>
87
88
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
89
							<tbody>
90
								<tr>
91
									<td style="width:50%;vertical-align:top;" width="50%">
92
									<p style="text-align: center;"><strong>D’ici </strong></p>
93
94
									<p>Portrait d’un acteur local, description d’un projet sur l’Agglo</p>
95
									</td>
96
									<td style="width:50%;vertical-align:top;" width="50%">
97
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
98
99
									<p>Mettre en avant une bonne pratique qui s’inscrit dans l’actualité (locale ou nationale), issue du recueil Cit’ergie ou d’autres sources comme le CEREMA</p>
100
									</td>
101
								</tr>
102
							</tbody>
103
						</table>
104
105
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Actualités</h2>
106
107
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
108
							<tbody>
109
								<tr>
110
									<td style="width:50%;vertical-align:top;" width="50%">
111
									<p style="text-align: center;"><strong>D’ici </strong></p>
112
113
									<p>Les derniers articles de l'Union en lien avec une thmétique de Plan Climat</p>
114
									</td>
115
									<td style="width:50%;vertical-align:top;" width="50%">
116
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
117
118
									<p>Les informations concernant les nouveaux textes de loi ou les nouveaux dispostifs nationaux (voir dans Localtis). Occasionnellement des tribunes issues de la newsletter Energy Cities ?</p>
119
									</td>
120
								</tr>
121
							</tbody>
122
						</table>
123
124
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Evénements</h2>
125
126
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
127
							<tbody>
128
								<tr>
129
									<td style="width:50%;vertical-align:top;" width="50%">
130
									<p style="text-align: center;"><strong>D’ici</strong></p>
131
132
									<p>► Au Mess des entrepreneurs (10 minutes à vélo depuis l’Agglomération, temps pour se garer compris&nbsp;!)</p>
133
									</td>
134
									<td style="width:50%;vertical-align:top;" width="50%">
135
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
136
137
									<p>► A Orléans (3h30 en train en passant par Paris)</p>
138
									</td>
139
								</tr>
140
							</tbody>
141
						</table>
142
143
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Appels à projets</h2>
144
145
						<p>Les appels à projets reçus : porteur de l'AAP / structures éligibles / projets éligibles / date butoir de réponse / lien vers le cahier des charges ou site.</p>
146
147
						<h2 align="center" style="background-color: #FCAD35; color:#ffffff;  margin-top: 2em; font-weight: bold;font-size:16px;text-transform: uppercase;border-bottom:2px solid #FCAD35">Ressources</h2>
148
149
						<p>Les derniers guides méthodologiques, outils, sites internet... A introduire par thématique (ex: EnR: nouveau guide du CEREMA pour l'installation de panneaux PV sur toiture).</p>
150
151
						<p align="center" style="text-align:center; margin:0cm 0cm 8pt"><span style="font-size:11pt"><span style="line-height:normal"><span style="font-family:&quot;Calibri&quot;,sans-serif"><span style="font-size:12.0pt"><span style="font-family:&quot;Times New Roman&quot;,serif"><a href="https://planclimat.chalons-agglo.fr/"><img src="https://planclimat.chalons-agglo.fr/library/userfiles/autosave/newsletter-CGpGAoyDX59i.png" style="width:252px; height:240px" /></a></span></span><span style="font-size:12.0pt"><span style="font-family:&quot;Times New Roman&quot;,serif"></span></span></span></span></span></p>
152
153
						<p align="right" style="text-align:right; margin:0cm 0cm 8pt"><span style="font-size:11pt"><span style="line-height:normal"><span style="font-family:&quot;Calibri&quot;,sans-serif"><i>N'hésitez pas à faire remonter vos informations en vue des prochaines lettres, à <u><span style="color:#4472c4">c.beucher@chalons-agglo.fr</span></u></i><span style="font-size:12.0pt"><span style="font-family:&quot;Times New Roman&quot;,serif"></span></span></span></span></span></p>
154
						</div>
155
						</td>
156
					</tr>
157
				</tbody>
158
			</table>
159
			</div>
160
			<!-- /content --></td>
161
			<td>&nbsp;</td>
162
		</tr>
163
	</tbody>
164
</table>
165
<!-- /BODY --><!-- FOOTER -->
166
167
<table class="footer-wrap">
168
	<tbody>
169
		<tr>
170
			<td>&nbsp;</td>
171
			<td class="container"><!-- content -->
172
			<div class="content">
173
			<table>
174
				<tbody>
175
					<tr>
176
						<td align="center">
177
						<p style="font-size:10px">##SITENAME##<br />
178
						<a href="https://planclimat.chalons-agglo.fr/" style="font-size:10px">https://planclimat.chalons-agglo.fr/</a> - <a href="mailto:##SITEMAIL##" style="font-size:10px">##SITEMAIL##</a></p>
179
						</td>
180
					</tr>
181
					<tr>
182
						<td align="center">
183
						<p style="font-size:10px">##UNSUBSCRIBE_LINK##</p>
184
						</td>
185
					</tr>
186
				</tbody>
187
			</table>
188
			</div>
189
			<!-- /content --></td>
190
			<td>&nbsp;</td>
191
		</tr>
192
	</tbody>
193
</table>
194
<!-- /FOOTER -->
195
</code></pre>