Project

General

Profile

Modèle de newsletter » History » Version 3

Simon, 06/17/2020 09:58 PM

1 1 Simon
h1. Modèle de newsletter
2
3 2 Simon
4 3 Simon
Le template de la newsletter est situé dans `/newsletter/input/template.html`.
5 2 Simon
6
Il est très fortement inspiré des templates ZURB : https://get.foundation/emails/email-templates.html
7
8
h2. Personnaliser la newsletter
9
10
Pour assurer la compatibilité des clients, le mieux est de définir les styles en dur, depuis l'éditeur de texte HTML.
11 3 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.
12 2 Simon
13 3 Simon
A placer dans le champ texte lors de la création de l'email.
14 1 Simon
15
16 2 Simon
h2. Les modèles à disposition
17
18
h3. Modèle Châlons Agglo 
19 1 Simon
20
!newsletter-template-chalons.png!
21
22
<pre><code class="html">
23
<!-- 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##" />
24
<title></title>
25
<link href="##CSSPATH##newsletter.css" rel="stylesheet" type="text/css" /><!-- HEADER -->
26
<table bgcolor="#FCAD35" class="head-wrap">
27
	<tbody>
28
		<tr>
29
			<td>&nbsp;</td>
30
			<td class="header container">
31
			<div class="content">
32
			<table bgcolor="#FCAD35">
33
				<tbody>
34
					<tr>
35
						<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>
36
						<td align="right">
37
						<h6 class="collapse">##SITENAME##</h6>
38
						</td>
39
					</tr>
40
				</tbody>
41
			</table>
42
			</div>
43
			</td>
44
			<td>&nbsp;</td>
45
		</tr>
46
	</tbody>
47
</table>
48
<!-- /HEADER -->
49
50
<p>&nbsp;</p>
51
<!-- BODY -->
52
53
<table class="body-wrap">
54
	<tbody>
55
		<tr>
56
			<td>&nbsp;</td>
57
			<td bgcolor="#FFFFFF" class="container">
58
			<div class="content">
59
			<table>
60
				<tbody>
61
					<tr>
62
						<td>
63
						<h1 style="color: #d7087a; margin-bottom: 1em; font-weight: 700;font-size:26px">##TITLE##</h1>
64
						<!-- !!!! WARNING !!!!!
65
							keep at least the main div on your template -->
66
67
						<div id="main">
68
						<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>
69
70
						<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>
71
72
						<p>Code fiche action&nbsp;: date de l’étape réalisée, description des avancées, suite des opérations</p>
73
74
						<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>
75
76
						<p>Délibération X&nbsp;: contenu / s’inscrit dans tel objectif du Plan Climat</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">Initiatives</h2>
79
80
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
81
							<tbody>
82
								<tr>
83
									<td style="width:50%;vertical-align:top;" width="50%">
84
									<p style="text-align: center;"><strong>D’ici </strong></p>
85
86
									<p>Portrait d’un acteur local, description d’un projet sur l’Agglo</p>
87
									</td>
88
									<td style="width:50%;vertical-align:top;" width="50%">
89
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
90
91
									<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>
92
									</td>
93
								</tr>
94
							</tbody>
95
						</table>
96
97
						<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>
98
99
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
100
							<tbody>
101
								<tr>
102
									<td style="width:50%;vertical-align:top;" width="50%">
103
									<p style="text-align: center;"><strong>D’ici </strong></p>
104
105
									<p>Les derniers articles de l'Union en lien avec une thmétique de Plan Climat</p>
106
									</td>
107
									<td style="width:50%;vertical-align:top;" width="50%">
108
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
109
110
									<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>
111
									</td>
112
								</tr>
113
							</tbody>
114
						</table>
115
116
						<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>
117
118
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
119
							<tbody>
120
								<tr>
121
									<td style="width:50%;vertical-align:top;" width="50%">
122
									<p style="text-align: center;"><strong>D’ici</strong></p>
123
124
									<p>► Au Mess des entrepreneurs (10 minutes à vélo depuis l’Agglomération, temps pour se garer compris&nbsp;!)</p>
125
									</td>
126
									<td style="width:50%;vertical-align:top;" width="50%">
127
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>
128
129
									<p>► A Orléans (3h30 en train en passant par Paris)</p>
130
									</td>
131
								</tr>
132
							</tbody>
133
						</table>
134
135
						<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>
136
137
						<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>
138
139
						<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>
140
141
						<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>
142
143
						<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>
144
145
						<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>
146
						</div>
147
						</td>
148
					</tr>
149
				</tbody>
150
			</table>
151
			</div>
152
			<!-- /content --></td>
153
			<td>&nbsp;</td>
154
		</tr>
155
	</tbody>
156
</table>
157
<!-- /BODY --><!-- FOOTER -->
158
159
<table class="footer-wrap">
160
	<tbody>
161
		<tr>
162
			<td>&nbsp;</td>
163
			<td class="container"><!-- content -->
164
			<div class="content">
165
			<table>
166
				<tbody>
167
					<tr>
168
						<td align="center">
169
						<p style="font-size:10px">##SITENAME##<br />
170
						<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>
171
						</td>
172
					</tr>
173
					<tr>
174
						<td align="center">
175
						<p style="font-size:10px">##UNSUBSCRIBE_LINK##</p>
176
						</td>
177
					</tr>
178
				</tbody>
179
			</table>
180
			</div>
181
			<!-- /content --></td>
182
			<td>&nbsp;</td>
183
		</tr>
184
	</tbody>
185
</table>
186
<!-- /FOOTER -->
187
</code></pre>