Project

General

Profile

Actions

Modèle de newsletter

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.

Depuis la version v2.6, Linea21 propose un template basé sur le format HEML : https://heml.io/

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/

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/).

Personnaliser la newsletter

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

Copier-coller le template existant dans l'éditeur (https://heml.io/editor/) afin d'avoir une base et de tester vos rendus.
Vous trouverez également la documentation associé au langage HEML à l'adresse suivante : https://heml.io/docs/

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

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 (non généré avec HEML - compatibilité restreinte)

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

Updated by Simon about 1 year ago · 6 revisions