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> </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> </td> |
||
| 53 | </tr> |
||
| 54 | </tbody> |
||
| 55 | </table> |
||
| 56 | <!-- /HEADER --> |
||
| 57 | |||
| 58 | <p> </p> |
||
| 59 | <!-- BODY --> |
||
| 60 | |||
| 61 | <table class="body-wrap"> |
||
| 62 | <tbody> |
||
| 63 | <tr> |
||
| 64 | <td> </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. Tout aussi imperceptible, mais tout aussi vulnérable aux changements de comportements : 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 : 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 : 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 !)</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:"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> |
||
| 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:"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> |
||
| 154 | </div> |
||
| 155 | </td> |
||
| 156 | </tr> |
||
| 157 | </tbody> |
||
| 158 | </table> |
||
| 159 | </div> |
||
| 160 | <!-- /content --></td> |
||
| 161 | <td> </td> |
||
| 162 | </tr> |
||
| 163 | </tbody> |
||
| 164 | </table> |
||
| 165 | <!-- /BODY --><!-- FOOTER --> |
||
| 166 | |||
| 167 | <table class="footer-wrap"> |
||
| 168 | <tbody> |
||
| 169 | <tr> |
||
| 170 | <td> </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> </td> |
||
| 191 | </tr> |
||
| 192 | </tbody> |
||
| 193 | </table> |
||
| 194 | <!-- /FOOTER --> |
||
| 195 | </code></pre> |