Modèle de newsletter¶

Le template de la newsletter est situé dans `/newsletter/input/template.html`.

Il est très fortement inspiré des templates ZURB : https://get.foundation/emails/email-templates.html

Personnaliser la newsletter¶

Pour assurer la compatibilité des clients, le mieux est de définir les styles en dur, depuis l'éditeur de texte HTML.
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.

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

Les modèles à disposition¶

Modèle Châlons Agglo¶

<!-- 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##" />
<title></title>
<link href="##CSSPATH##newsletter.css" rel="stylesheet" type="text/css" /><!-- HEADER -->
<table bgcolor="#FCAD35" class="head-wrap">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td class="header container">
            <div class="content">
            <table bgcolor="#FCAD35">
                <tbody>
                    <tr>
                        <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>
                        <td align="right">
                        <h6 class="collapse">##SITENAME##</h6>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
<!-- /HEADER -->

<p>&nbsp;</p>
<!-- BODY -->

<table class="body-wrap">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td bgcolor="#FFFFFF" class="container">
            <div class="content">
            <table>
                <tbody>
                    <tr>
                        <td>
                        <h1 style="color: #d7087a; margin-bottom: 1em; font-weight: 700;font-size:26px">##TITLE##</h1>
                        <!-- !!!! WARNING !!!!!
                            keep at least the main div on your template -->

                        <div id="main">
                        <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>

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

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

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

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

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

                        <table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
                            <tbody>
                                <tr>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ici </strong></p>

                                    <p>Portrait d’un acteur local, description d’un projet sur l’Agglo</p>
                                    </td>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ailleurs</strong></p>

                                    <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>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

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

                        <table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
                            <tbody>
                                <tr>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ici </strong></p>

                                    <p>Les derniers articles de l'Union en lien avec une thmétique de Plan Climat</p>
                                    </td>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ailleurs</strong></p>

                                    <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>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

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

                        <table cellpadding="5" cellspacing="5" style="width:100%;" width="100%">
                            <tbody>
                                <tr>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ici</strong></p>

                                    <p>► Au Mess des entrepreneurs (10 minutes à vélo depuis l’Agglomération, temps pour se garer compris&nbsp;!)</p>
                                    </td>
                                    <td style="width:50%;vertical-align:top;" width="50%">
                                    <p style="text-align: center;"><strong>D’ailleurs</strong></p>

                                    <p>► A Orléans (3h30 en train en passant par Paris)</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

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

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

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

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

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

                        <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>
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!-- /content --></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
<!-- /BODY --><!-- FOOTER -->

<table class="footer-wrap">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td class="container"><!-- content -->
            <div class="content">
            <table>
                <tbody>
                    <tr>
                        <td align="center">
                        <p style="font-size:10px">##SITENAME##<br />
                        <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>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                        <p style="font-size:10px">##UNSUBSCRIBE_LINK##</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!-- /content --></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
<!-- /FOOTER -->