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> </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> </td> |
||
45 | </tr> |
||
46 | </tbody> |
||
47 | </table> |
||
48 | <!-- /HEADER --> |
||
49 | |||
50 | <p> </p> |
||
51 | <!-- BODY --> |
||
52 | |||
53 | <table class="body-wrap"> |
||
54 | <tbody> |
||
55 | <tr> |
||
56 | <td> </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. Tout aussi imperceptible, mais tout aussi vulnérable aux changements de comportements : 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 : 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 : 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 !)</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:"Calibri",sans-serif"><span style="font-size:12.0pt"><span style="font-family:"Times New Roman",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:"Times New Roman",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:"Calibri",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:"Times New Roman",serif"></span></span></span></span></span></p> |
||
146 | </div> |
||
147 | </td> |
||
148 | </tr> |
||
149 | </tbody> |
||
150 | </table> |
||
151 | </div> |
||
152 | <!-- /content --></td> |
||
153 | <td> </td> |
||
154 | </tr> |
||
155 | </tbody> |
||
156 | </table> |
||
157 | <!-- /BODY --><!-- FOOTER --> |
||
158 | |||
159 | <table class="footer-wrap"> |
||
160 | <tbody> |
||
161 | <tr> |
||
162 | <td> </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> </td> |
||
183 | </tr> |
||
184 | </tbody> |
||
185 | </table> |
||
186 | <!-- /FOOTER --> |
||
187 | </code></pre> |