Project

General

Profile

Edit History

Modèle de newsletter » History » Version 6

Simon, 11/15/2023 06:28 PM

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
    6
    Simon
    
*Erratum : le projet HEML semble abandonné bien que fonctionnel. MJML (https://mjml.io/templates) semble une très bonne alternative. Des templates sont disponibles (https://mjml.io/templates) et un éditeur en ligne est accessible (https://mjml.io/try-it-live/)*. 





    11
    
    
    





    12
    1
    Simon
    
h2. Personnaliser la newsletter





    13
    
    
    





    14
    4
    Simon
    
Nous vous conseillons fortement d'utiliser le format HEML et son éditeur associé pour définir vos propres templates - voir plus haut.





    15
    
    
    





    16
    
    
    
Copier-coller le template existant dans l'éditeur (https://heml.io/editor/) afin d'avoir une base et de tester vos rendus. 





    17
    
    
    
Vous trouverez également la documentation associé au langage HEML à l'adresse suivante : https://heml.io/docs/





    18
    
    
    





    19
    
    
    
Nous vous conseillons fortement de conserver la source au format HEML.





    20
    
    
    





    21
    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.





    22
    3
    Simon
    





    23
    1
    Simon
    
A placer dans le champ texte lors de la création de l'email.





    24
    5
    Simon
    





    25
    
    
    





    26
    1
    Simon
    





    27
    2
    Simon
    
h2. Les modèles à disposition





    28
    
    
    





    29
    4
    Simon
    
h3. Modèle Châlons Agglo (non généré avec HEML - compatibilité restreinte)





    30
    1
    Simon
    





    31
    
    
    
!newsletter-template-chalons.png!





    32
    
    
    





    33
    
    
    
<pre><code class="html">





    34
    
    
    
<!-- 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##" />





    35
    
    
    
<title></title>





    36
    
    
    
<link href="##CSSPATH##newsletter.css" rel="stylesheet" type="text/css" /><!-- HEADER -->





    37
    
    
    
<table bgcolor="#FCAD35" class="head-wrap">





    38
    
    
    
	<tbody>





    39
    
    
    
		<tr>





    40
    
    
    
			<td>&nbsp;</td>





    41
    
    
    
			<td class="header container">





    42
    
    
    
			<div class="content">





    43
    
    
    
			<table bgcolor="#FCAD35">





    44
    
    
    
				<tbody>





    45
    
    
    
					<tr>





    46
    
    
    
						<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>





    47
    
    
    
						<td align="right">





    48
    
    
    
						<h6 class="collapse">##SITENAME##</h6>





    49
    
    
    
						</td>





    50
    
    
    
					</tr>





    51
    
    
    
				</tbody>





    52
    
    
    
			</table>





    53
    
    
    
			</div>





    54
    
    
    
			</td>





    55
    
    
    
			<td>&nbsp;</td>





    56
    
    
    
		</tr>





    57
    
    
    
	</tbody>





    58
    
    
    
</table>





    59
    
    
    
<!-- /HEADER -->





    60
    
    
    





    61
    
    
    
<p>&nbsp;</p>





    62
    
    
    
<!-- BODY -->





    63
    
    
    





    64
    
    
    
<table class="body-wrap">





    65
    
    
    
	<tbody>





    66
    
    
    
		<tr>





    67
    
    
    
			<td>&nbsp;</td>





    68
    
    
    
			<td bgcolor="#FFFFFF" class="container">





    69
    
    
    
			<div class="content">





    70
    
    
    
			<table>





    71
    
    
    
				<tbody>





    72
    
    
    
					<tr>





    73
    
    
    
						<td>





    74
    
    
    
						<h1 style="color: #d7087a; margin-bottom: 1em; font-weight: 700;font-size:26px">##TITLE##</h1>





    75
    
    
    
						<!-- !!!! WARNING !!!!!





    76
    
    
    
							keep at least the main div on your template -->





    77
    
    
    





    78
    
    
    
						<div id="main">





    79
    
    
    
						<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>





    80
    
    
    





    81
    
    
    
						<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>





    82
    
    
    





    83
    
    
    
						<p>Code fiche action&nbsp;: date de l’étape réalisée, description des avancées, suite des opérations</p>





    84
    
    
    





    85
    
    
    
						<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>





    86
    
    
    





    87
    
    
    
						<p>Délibération X&nbsp;: contenu / s’inscrit dans tel objectif du Plan Climat</p>





    88
    
    
    





    89
    
    
    
						<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>





    90
    
    
    





    91
    
    
    
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">





    92
    
    
    
							<tbody>





    93
    
    
    
								<tr>





    94
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    95
    
    
    
									<p style="text-align: center;"><strong>D’ici </strong></p>





    96
    
    
    





    97
    
    
    
									<p>Portrait d’un acteur local, description d’un projet sur l’Agglo</p>





    98
    
    
    
									</td>





    99
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    100
    
    
    
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>





    101
    
    
    





    102
    
    
    
									<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>





    103
    
    
    
									</td>





    104
    
    
    
								</tr>





    105
    
    
    
							</tbody>





    106
    
    
    
						</table>





    107
    
    
    





    108
    
    
    
						<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>





    109
    
    
    





    110
    
    
    
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">





    111
    
    
    
							<tbody>





    112
    
    
    
								<tr>





    113
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    114
    
    
    
									<p style="text-align: center;"><strong>D’ici </strong></p>





    115
    
    
    





    116
    
    
    
									<p>Les derniers articles de l'Union en lien avec une thmétique de Plan Climat</p>





    117
    
    
    
									</td>





    118
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    119
    
    
    
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>





    120
    
    
    





    121
    
    
    
									<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>





    122
    
    
    
									</td>





    123
    
    
    
								</tr>





    124
    
    
    
							</tbody>





    125
    
    
    
						</table>





    126
    
    
    





    127
    
    
    
						<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>





    128
    
    
    





    129
    
    
    
						<table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">





    130
    
    
    
							<tbody>





    131
    
    
    
								<tr>





    132
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    133
    
    
    
									<p style="text-align: center;"><strong>D’ici</strong></p>





    134
    
    
    





    135
    
    
    
									<p>► Au Mess des entrepreneurs (10 minutes à vélo depuis l’Agglomération, temps pour se garer compris&nbsp;!)</p>





    136
    
    
    
									</td>





    137
    
    
    
									<td style="width:50%;vertical-align:top;" width="50%">





    138
    
    
    
									<p style="text-align: center;"><strong>D’ailleurs</strong></p>





    139
    
    
    





    140
    
    
    
									<p>► A Orléans (3h30 en train en passant par Paris)</p>





    141
    
    
    
									</td>





    142
    
    
    
								</tr>





    143
    
    
    
							</tbody>





    144
    
    
    
						</table>





    145
    
    
    





    146
    
    
    
						<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>





    147
    
    
    





    148
    
    
    
						<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>





    149
    
    
    





    150
    
    
    
						<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>





    151
    
    
    





    152
    
    
    
						<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>





    153
    
    
    





    154
    
    
    
						<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>





    155
    
    
    





    156
    
    
    
						<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>





    157
    
    
    
						</div>





    158
    
    
    
						</td>





    159
    
    
    
					</tr>





    160
    
    
    
				</tbody>





    161
    
    
    
			</table>





    162
    
    
    
			</div>





    163
    
    
    
			<!-- /content --></td>





    164
    
    
    
			<td>&nbsp;</td>





    165
    
    
    
		</tr>





    166
    
    
    
	</tbody>





    167
    
    
    
</table>





    168
    
    
    
<!-- /BODY --><!-- FOOTER -->





    169
    
    
    





    170
    
    
    
<table class="footer-wrap">





    171
    
    
    
	<tbody>





    172
    
    
    
		<tr>





    173
    
    
    
			<td>&nbsp;</td>





    174
    
    
    
			<td class="container"><!-- content -->





    175
    
    
    
			<div class="content">





    176
    
    
    
			<table>





    177
    
    
    
				<tbody>





    178
    
    
    
					<tr>





    179
    
    
    
						<td align="center">





    180
    
    
    
						<p style="font-size:10px">##SITENAME##<br />





    181
    
    
    
						<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>





    182
    
    
    
						</td>





    183
    
    
    
					</tr>





    184
    
    
    
					<tr>





    185
    
    
    
						<td align="center">





    186
    
    
    
						<p style="font-size:10px">##UNSUBSCRIBE_LINK##</p>





    187
    
    
    
						</td>





    188
    
    
    
					</tr>





    189
    
    
    
				</tbody>





    190
    
    
    
			</table>





    191
    
    
    
			</div>





    192
    
    
    
			<!-- /content --></td>





    193
    
    
    
			<td>&nbsp;</td>





    194
    
    
    
		</tr>





    195
    
    
    
	</tbody>





    196
    
    
    
</table>





    197
    
    
    
<!-- /FOOTER -->





    198
    
    
    
</code></pre>