domicile - Conseils de concepteur
Modèles d'e-mails HTML. Modèles et éditeurs de modèles pour les newsletters par e-mail

Je n'ai pas encore compris s'il est nécessaire d'indiquer la taille des images, il y a donc du chaos à cet égard. Quelque part - je mets, quelque part - non. Je corrigerai après les tests. Soit je le supprimerai complètement pour raccourcir le code, soit je devrai le rajouter partout s'il s'affiche mal dans un des mailers.

Avec ce code, j'ajoute une ligne avec une colonne au tableau "contenu" et y mets une image, avec l'inscription "Smartlanding":

Maintenant, la lettre ressemble à ceci :



Tout cela est fait pour qu'il y ait des retraits entre le contenu. Code HTML le contenu ressemble à ceci :

Maintenant, vous devez mettre en œuvre l'annonce de l'article, cela se fait tout simplement. 1 ligne, 1 colonne et texte dedans :

Je fais exactement le même balisage pour le texte, les en-têtes :

Et maintenant il reste la dernière étape, faire le pied de page. Je n'ai pas créé de nouveau tableau pour cela, mais je l'ai placé dans le contenu, en ajoutant simplement une nouvelle ligne et une nouvelle colonne :

Voici la lettre. Maintenant, il y a beaucoup de tests. Je prévois de tester la mise en page dans les services et programmes de messagerie suivants :

  • Gmail
  • yandex
  • randonneur
  • Mozilla Thunderbird
  • Perspectives 2007
  • Perspectives 2013
  • la chauve-souris

Au cours du test, je vais ajouter des styles aux titres et aux textes, réinitialiser les propriétés et faire d'autres ajustements. Et puis, j'écrirai un autre article détaillé sur ce sujet. Peut-être que quelque chose changera pour le prochain article, alors abonnez-vous aux mises à jour si vous êtes intéressé. ce sujet et vous ne voulez pas manquer de nouveautés.

Si vous avez de l'expérience dans la création d'e-mails HTML, veuillez écrire votre commentaire et signaler toute erreur. Je vous serai très reconnaissant. Et pour aujourd'hui, c'est tout. Jusqu'à !

(Découvrez les tests préliminaires des lettres html dans différents moteurs de recherche)

Le marketing par e-mail continue de prendre de l'ampleur chaque année, parallèlement à l'augmentation du nombre d'internautes. Les bases de données des entreprises se multiplient, envoyer manuellement des lettres à chaque client devient un travail écrasant. Le marketing par e-mail aide à rendre le processus d'envoi d'e-mails plus pratique, plus rapide et crée la base de la créativité. Pour la distribution, des modèles de courrier électronique HTML et standard sont utilisés.

Si parler langage clair, le marketing par e-mail est un système bien pensé pour envoyer des lettres aux adresses e-mail de la base de données.

Ce type de marketing est basé sur des modèles de lettres et de pages qui sont intégrés dans des lettres.

Il existe 2 types de modèles d'e-mail :

  • Les e-mails réguliers ne sont qu'un e-mail texte de quelques phrases avec ou sans pièces jointes, rarement avec un formatage créatif. Ces modèles de courrier électronique sont couramment utilisés dans la correspondance commerciale.

  • Les modèles d'e-mails HTML sont brillants, conçus pour attirer l'attention et susciter l'intérêt de la page Web intégrée à la lettre.

Quels sont les avantages et les inconvénients?

Commençons par des modèles réguliers.

Un grand nombre de "plus" est un bon indicateur. Mais il est peu probable qu'ils soient en mesure de vendre de telles lettres lors de la première communication avec un client, en particulier un client ordinaire. Contrairement aux e-mails HTML.

Créer soi-même des e-mails HTML sans préparation suffisante est difficile, même si ce sont précisément de tels messages, beaux, semblables à des cartes postales, qui attirent beaucoup plus l'attention que les simples en noir et blanc. Les modèles de lettres HTML et de courriers électroniques peuvent être créés directement sur les sites de services de messagerie, qui intègrent depuis longtemps cette fonctionnalité comme un must pour organiser les lettres de publipostage aux utilisateurs.

Services de base

Lors de la description des principaux sites d'email marketing, il est logique de les comparer en fonction des caractéristiques les plus importantes.

Offres Stripo large sélection modèles gratuits de newsletter par e-mail. Ils sont regroupés par domaines d'activité et catégories telles que les événements spéciaux, les vacances, etc. Nos modèles sont pré-conçus pour tous les types de messages déclencheurs, pour les services juridiques et de conseil, pour les messages promotionnels et autres types de messages.

Vous trouverez ici des modèles de marketing par e-mail adaptés à vos besoins et à vos goûts.

Pourquoi en sommes-nous si sûrs :

    Site Web adaptatif

    Tous les modèles Stripo sont entièrement réactifs. Cela signifie que tous les appareils mobiles et la plupart des clients de messagerie les affichent correctement.
    Cependant, vous pouvez sélectionner n'importe quelle image, bloc ou structure et la rendre non réactive si vous souhaitez que certains éléments de vos modèles d'e-mail restent inchangés.
    De plus, grâce au code HTML ouvert de nos modèles d'e-mails gratuits, vous pouvez choisir quelles images et quels blocs seront affichés sur les appareils mobiles, et lesquels uniquement sur les appareils de bureau.
    Utilisez nos modèles de messages HTML pour une variété de campagnes marketing.

    Deux éditeurs en un

    Notre outil de nouvelle génération combine un code HTML/CSS ouvert et un éditeur par glisser-déposer.
    Cette fonctionnalité vous donne la possibilité de concevoir des visuels et du texte par glisser-déposer dans la partie glisser-déposer de l'outil. Grâce au code HTML, vous pouvez intégrer des vidéos et des éléments interactifs dans votre modèle de newsletter et revenir à la conception des éléments visuels sans quitter l'éditeur.

    Créer des bannières

    Avec Stripo, vous pouvez facilement créer des bannières, les modifier dans l'éditeur et placer du texte au-dessus de la bannière. Grâce à cette fonctionnalité, vous avez la possibilité d'utiliser plusieurs fois des bannières. Désormais, vous n'avez plus besoin d'outils supplémentaires (tels que des éditeurs de photos) pour rendre votre modèle HTML réactif créatif et personnalisé selon vos souhaits.
    Il est bien connu que les expéditeurs remplacent les polices décoratives par des polices sécurisées pour le Web. Dans ce cas, le design de votre e-mail perd son charme particulier. Mais Stripo vous permet d'appliquer n'importe quelle police disponible dans notre éditeur. Comment faire? Placez simplement le texte au-dessus de la bannière, sélectionnez-le couleur appropriée et appliquez votre police décorative préférée au texte.
    Les clients de messagerie traitent le texte ajouté au-dessus de n'importe quelle image comme faisant partie de l'image elle-même. Ainsi, les abonnés verront votre texte ajouté au modèle HTML gratuit exactement comme prévu.

    Automatisation du travail - nos éléments intelligents uniques

    La création de fiches produits est un processus assez fastidieux. Mais Stripo fait tout pour vous faciliter la tâche. Après quelques ajustements des éléments intelligents, il vous suffit de coller le lien dans la ligne souhaitée. La description, le coût, l'échantillon de produit seront automatiquement insérés dans les champs appropriés. Pour votre commodité, nous avons déjà ajouté des éléments intelligents à certains des modèles de message HTML. Stripo vous fait gagner du temps !

    Bibliothèque personnelle de modules dans Stripo

    Créez, modifiez et enregistrez des blocs/structures/bandes/conteneurs de contenu dans votre bibliothèque personnelle. Vous pouvez les utiliser chaque fois que vous démarrez une nouvelle campagne d'e-mails.
    Nos modèles gratuits existants sont automatiquement divisés en modules déjà disponibles dans votre bibliothèque personnelle.

    Exportation simplifiée

    Les modèles d'e-mail réactifs de Stripo sont facilement exportables vers la plupart des fournisseurs de messagerie et des clients de messagerie populaires tels que Gmail et Outlook.
    Bonne nouvelle : nos modèles d'e-mails sont modifiables même après l'exportation. Grâce à l'intégration avancée, vous pouvez apporter toutes sortes de modifications au code HTML, au texte et aux éléments visuels. Cette option rend les modèles HTML réactifs de Stripo conviviaux pour les clients et les fournisseurs de messagerie.
    Pour votre commodité, vous pouvez également trier vos modèles d'e-mails dans des dossiers.

    Le marketing par e-mail est notre passion et c'est pourquoi Stripo conçoit des modèles d'e-mails professionnels avec un véritable amour.

Montre plus

Une bonne campagne par e-mail commence par la conception d'un e-mail. Aujourd'hui, alors que la plupart des clients et plates-formes de messagerie E-mail prennent en charge les nouvelles normes Web, nous pouvons envoyer des e-mails réactifs à tous les abonnés utilisant des appareils de bureau et mobiles. Modèles HTML réactifs Les e-mails garantissent que notre newsletter est perçue de la même manière par les abonnés, quel que soit l'appareil sur lequel elle est lue.

Pour vous aider à faire bon choix, nous proposons une sélection des modèles d'e-mail marketing les plus populaires. Dans ce document, nous considérons non seulement les modèles, mais également les cadres adaptatifs que vous pouvez utiliser pour créer vos propres modèles.

Cerbère

Créer un modèle d'e-mail de newsletter à partir de zéro peut être une tâche intimidante en soi. Et quand nous parlons sur la création d'une mise en page réactive, il y a plus plus de nuances qu'il faut prendre en compte. C'est pourquoi un framework comme Cerberus peut vous être utile.

Cette bibliothèque compacte est conçue pour aider les utilisateurs avec quelques modèles HTML à créer un e-mail qui offrira une expérience de navigation par e-mail inoubliable à vos abonnés. Petits modèles créés avec en utilisant HTML, ils ne sont pas destinés à être utilisés comme résultat final. Les développeurs de Cerberus recommandent d'expérimenter le code HTML pour créer vos propres variantes.

Tournesol


C'est marque célèbre parmi ceux qui aiment tester et analyser les performances publicité par e-mail campagnes. L'équipe Litmus est réputée pour fournir régulièrement diverses ressources gratuites à la communauté, dont l'une est un ensemble de modèles d'e-mails réactifs.

Les cinq modèles de l'ensemble appartiennent à différentes catégories. Ceux-ci incluent : un modèle d'e-mail de newsletter HTML, un modèle d'annonce de nouveau produit, un modèle de reçu pour les avis financiers, des annonces de messages courts et même un modèle d'e-mail standard. C'est idéal pour les utilisateurs qui veulent que leurs e-mails soient simples mais réactifs.

Cadre de messagerie HTML réactif


Il s'agit d'une solution complète pour créer des e-mails réactifs. Le framework fournit aux développeurs un ensemble de grilles, de modules, de blocs et de lignes pour le contenu, une fonction pour définir la distance entre les éléments, les boutons, les lignes d'image et d'autres éléments pouvant être utilisés pour développer un modèle d'e-mail impeccable. Il a été testé dans tous les clients de messagerie populaires.

Fondation pour les e-mails


Il s'agit d'une collection de divers cadres et plates-formes pour optimiser le développement Web. Foundation fournit aux développeurs et aux concepteurs un cadre CSS facile à utiliser qui vous permet de créer rapidement des e-mails réactifs efficaces.

Chaque éditeur de modèle d'email HTML utilise nativement le système de grille fourni par la Fondation. Ensuite, il peut être complété par divers éléments souvent utilisés à de telles fins. Que vous travailliez dans le commerce électronique ou l'image de marque, Foundation peut vous aider à créer des modèles réactifs e-mails.

Répondre


Antwort ne se positionne pas comme un cadre, ils s'appellent eux-mêmes une ressource de modèles d'e-mails prêts à l'emploi qui peuvent s'adapter au bureau et appareils mobiles. Il fonctionne parfaitement sur iOS et Android, ainsi que sur les principaux clients de messagerie tels que Yahoo!, Gmail et Outlook.

Même avec certaines des versions les plus anciennes d'Outlook. Les mises en page sont conçues avec l'ajout de contenu dynamique à l'esprit. Dans le même temps, le style de conception des e-mails est minimaliste.

Aire de jeux par ZURB


Il s'agit d'une société de développement. Cadre HTML5 de base, ainsi qu'un opérateur de service appelé Ink . Aujourd'hui, il est mieux connu sous le nom de Foundation Email.

Le terrain de jeu de ZURB propose cinq modèles d'e-mails différents parmi lesquels choisir qui s'adaptent de manière transparente à n'importe quelle taille d'écran et n'importe quel appareil. Tous les modèles sont fournis avec des feuilles de style et des documents HTML distincts. Ces modèles seront compatibles avec toutes les principales plateformes de messagerie. Vous pouvez facilement trouver un service en combinaison avec lequel vous pouvez utiliser ces modèles.

Mosaïque


Une plate-forme qui permet à quiconque de créer de beaux modèles d'e-mails HTML réactifs. Mosaico fournit des outils pour gérer les éléments personnalisés et conception réactive. Avec eux, vous pouvez personnaliser toutes les mises en page en un clic.

Le système de gestion intégré vous permet d'annuler et de rétablir toutes les modifications apportées. Vous pouvez même télécharger vos propres modèles d'e-mails et les personnaliser avec Mosaico. La plateforme est open source et encourage chacun à participer au développement du projet.

Modèles d'e-mails open source


Une plate-forme de marketing par e-mail bien connue qui offre aux spécialistes du marketing et aux blogueurs la possibilité de créer et de commercialiser leurs modèles dans un environnement facile à utiliser. En guise de remerciement à la communauté marketing, SendWithUs fournit aux utilisateurs une bibliothèque de dix modèles réactifs.

Tous les modèles sont open source, ce qui vous permet d'apporter des modifications et des ajustements à votre discrétion. Bien que ces modèles soient gratuits, ils ne conviennent que pour la facturation et les notifications aux clients.

Modèles d'e-mails réactifs


Brian Graves a jeté des bases solides pour créer et travailler avec des e-mails réactifs. Son projet Responsive Email Patterns est un ensemble de modèles de plug-ins qui vous permettent de créer rapidement des e-mails réactifs à utiliser avec votre plateforme de messagerie préférée ou directement dans votre client de messagerie. Les modèles incluent des éléments tels que des listes, des médias, la navigation et des grilles.

Modèles d'e-mails HTML


Un service de marketing par e-mail faisant autorité qui aide des centaines de milliers de spécialistes du marketing en ligne à obtenir des résultats optimaux avec les e-mails. Campaign Monitor fournit des fonctionnalités pour tester les campagnes par e-mail, ainsi qu'un générateur d'e-mails et une collection de modèles d'e-mails HTML. Il contient plus de 20 modèles uniques qui conviennent à presque toutes les situations. Modèles pour établir des partenariats, des négociations commerciales, des modèles de newsletter traditionnels et des modèles d'annonce d'événement.

Email Design Inspiration par HTML Email Designs


Il s'agit d'un référentiel des meilleurs modèles d'e-mails utilisés par certaines des plus grandes entreprises technologiques : Dropbox, Udemy, Moo, DigitalOcean et bien d'autres. L'avantage de ces exemples de modèles est qu'ils ont été envoyés à de vrais utilisateurs. Grâce à cela, vous pouvez facilement analyser la structure des modèles afin de mieux comprendre les fonctionnalités d'implémentation qui les fournissent. haute efficacité. Des centaines de modèles d'e-mails parmi lesquels choisir.

MJML - Le cadre de messagerie réactif


Il s'agit d'un cadre et d'un langage de balisage personnalisé intégré conçu pour aider les développeurs à créer rapidement des modèles réactifs. L'objectif de MJML est de simplifier la conception d'e-mails réactifs. Le balisage que vous créez avec MJML est ensuite automatiquement converti en code entièrement compatible HTML5. Vous pouvez l'utiliser dans n'importe quel client de messagerie. Plusieurs modèles prédéfinis sont également disponibles.

Respmail


Pour ceux qui ne veulent pas s'embarrasser de frameworks complexes, il existe Respmail, une solution de marketing par e-mail simple et réactive. Il vous fournit un modèle unique que vous pouvez modifier à votre guise. Depuis sa création, le modèle d'e-mail HTML a été amélioré et affiné pour être compatible avec tous les principaux clients de messagerie.

la passion


Il s'agit d'un modèle d'e-mail sophistiqué qui utilise des concepts de conception Web modernes. L'extensibilité de ce modèle est tellement impressionnante. Divers éléments les modèles sont des composants distincts et vous pouvez simplement choisir ce que vous pensez être nécessaire pour envoyer des lettres.

Modèle de newsletter gratuit


Modèle de newsletter gratuit. Il s'agit d'une solution élégante et minimaliste pour ceux qui souhaitent une mise en page simple des e-mails. À notre avis, ce modèle peut être utile pour les blogueurs, les artistes, les écrivains qui souhaitent faire passer leur message sans avoir à surcharger la lettre avec des éléments complexes modernes.

MailPortefeuille


MailPortfolio suit la même philosophie que le modèle d'e-mail HTML décrit ci-dessus. La seule différence est que MailPortfolio se concentre davantage sur les couleurs rouges de base. Mais tout le reste semble être exactement le même. Dans le pied de page, vous pouvez spécifier les informations nécessaires sur l'entreprise, qui sont obligatoires pour la plupart des plateformes d'email marketing.


La Saint Valentin approche à grands pas ! C'est pourquoi nous avons décidé d'inclure dans l'examen un très beau motif Modèle d'e-mail de la Saint-Valentin, qui peut être utilisé ce jour-là pour promouvoir vos offres, nouveautés. Avec de nombreuses fonctionnalités, vous pouvez personnaliser ce modèle pour différents cas d'utilisation.

EDMDESIGNER


Cette entreprise a passé beaucoup de temps à s'adapter pleinement aux exigences de la communauté. Le résultat est une plateforme de création d'e-mails fonctionnelle. L'interface glisser-déposer aide les développeurs à créer de belles mises en page. Ne perdez plus de temps à recréer le même contenu encore et encore. En utilisant EDMDESIGNER, vous pouvez enregistrer non seulement des modèles de lettre, mais également des éléments individuels. À l'avenir, vous pourrez les réutiliser dans l'une des futures campagnes.

E-mail HTML moderne


Nous aimerions terminer notre liste de modèles gratuits avec un livre. C'est La meilleure voie Découvrez comment créer des modèles d'e-mail réactifs. L'auteur de l'un d'eux est Jason Rodríguez. Ce livre vous aidera à créer des modèles d'e-mail HTML modernes et beaux qui fonctionnent parfaitement sur tous les appareils, avec tous les clients et dans tous les navigateurs. Le livre couvre les bases de la création d'e-mails, ainsi que la façon de tester les campagnes d'e-mails et de les optimiser avec des outils d'analyse et des rapports.

Modèles d'e-mails HTML réactifs Premium

Nous aimerions vous parler des modèles d'e-mails HTML réactifs du segment premium. Leurs prix sont vraiment très bas. par rapport à combien vous paieriez un designer pour ce travail). Et nous avons trouvé de très bons modèles.

des idées


Un modèle fonctionnel qui fournit tous les éléments disponibles éléments modernes HTML5 , qui peut être intégré dans le modèle lui-même. Vous pouvez facilement communiquer vos prix, les caractéristiques du produit avec des éléments intégrés qui simplifient l'ensemble du processus. Le modèle contient un module de glisser-déposer intégré qui vous aidera à créer des e-mails incroyables. Il est également entièrement compatible avec les principaux fournisseurs de marketing par e-mail.

Vibgyor


Vibgyor peut être décrit comme un modèle polyvalent pour diverses industries. Professionnel apparence rend Vibgyor attrayant pour ces secteurs d'activité. Il contient un générateur de glisser-déposer qui facilite la modification et l'optimisation de n'importe quelle partie du modèle à votre guise.

Bonjour. L'autre jour, j'ai décidé de comprendre comment les lettres html sont composées. J'ai passé plusieurs heures sur Internet, j'ai lu des dizaines d'articles sur ce sujet et j'en suis venu à la conclusion qu'il s'agit d'une tâche très difficile.

Mais l'envie est là, alors j'ai commencé à creuser davantage. Peut-être que sur le blog, je remplacerai bientôt l'abonnement par e-mail de feedburner (sous les articles) par un autre où je pourrai le rendre plus joli. L'essentiel est de prendre en compte toutes les nuances de mise en page des clients de messagerie, et croyez-moi, il y en a plusieurs.

La pertinence de créer des lettres html pour les listes de diffusion

liste de diffusion est l'une des plus moyens efficaces vendre des marchandises, transmettre des nouvelles aux clients, parler des promotions et des services supplémentaires. De plus, une fois que vous avez une clientèle, vous pouvez ramener d'anciens clients et faire une autre vente.

Vous pouvez envoyer des informations sur les services supplémentaires susceptibles d'intéresser vos clients après le premier achat.

Et bien sûr, la théorie des grands nombres fonctionne ici. Si vous envoyez une offre pour vendre quelque chose à 20 000 abonnés, 1 000 d'entre eux ont lu l'offre et au moins 10 l'achèteront, mais le coût est de 0. Vous venez d'envoyer une lettre !

Mais quelqu'un n'a pas ouvert la lettre, quelqu'un l'a ouverte et ne l'a pas lue, parce qu'il y avait un peu de texte, quelqu'un n'a pas ouvert les images et quelqu'un s'est trompé. Ça arrive. En raison du fait que les programmes de messagerie ne prennent pas en charge CSS ainsi que les navigateurs. Et à propos de javascript - je me tais généralement.

Et il y a beaucoup de problèmes pour les maquettistes qui créent des lettres html.

Mais aujourd'hui, je vais essayer de vous dire comment créer une lettre html qui s'ouvrirait aussi bien dans tous les navigateurs (y compris les mobiles) et les programmes de messagerie, afin que vos lettres soient attrayantes et que vous ne perdiez pas de clients. Ce n'est pas le dernier message, s'il y a des problèmes d'affichage, alors plus tard je corrigerai celui-ci ou j'écrirai une suite. Je serais également reconnaissant à tous ceux qui aident à tester et à identifier les problèmes.

Problèmes avec la mise en page des lettres html

Du fait que les services postaux n'ont pas règles générales affichant des lettres html, le maquettiste doit utiliser les règles de mise en page des années 90. Certaines personnes n'ont pas besoin de s'y habituer, mais je dois admettre que je n'ai jamais écrit de styles dans un document html, et pas seulement dans un document html en utilisant, à savoir en ligne, pour chaque élément séparément.

Certains développeurs de messagerie ont désactivé la prise en charge des feuilles de style et des feuilles de style, de la manière décrite ci-dessus. Arguant cela par le fait que les lettres sont nécessaires spécifiquement pour le texte. Vous devez donc écrire des styles pour chaque élément séparément.

Une autre surprise a été que peu de services de messagerie ne prennent pas en charge les flottants, les marges et le rembourrage. Comment ca va? Imaginez que vous ayez créé une lettre html sympa à trois colonnes basée sur div (s), et que l'utilisateur ait tellement de déchets qu'il l'a immédiatement supprimé, sans comprendre ce qu'il attend de lui.

Oui oui. Vous avez bien compris ! Vous devrez utiliser des tables si vous n'êtes pas prêt à sacrifier des milliers d'utilisateurs pour qui votre lettre ne s'ouvrira pas correctement. Il s'avère que les tableaux sont le seul moyen, pour aujourd'hui, d'assurer la compatibilité entre navigateurs.

Comme ils l'ont écrit sur l'un des sites :

Vous devrez vous souvenir de choses aussi terribles que : Cellpadding, cellpacing, colspan

Dans mon cas, il faudra les apprendre, puisque je n'ai jamais utilisé de tableaux. Peut-être que je ne l'aurais jamais eu si je n'avais pas décidé de m'occuper du design des lettres :)

Si vous n'avez pas l'habitude de prescrire alt pour les images, vous devrez vous en sortir pour la mise en page des lettres, car certains clients de messagerie, par défaut, affichent des images, et si vous en avez beaucoup dans une lettre, le l'utilisateur verra des cadres vides, et donc il y aura du texte.

De plus, c'est devenu un problème pour moi que je doive constamment réinitialiser de nombreuses valeurs, par exemple, la bordure des images, si elle est définie comme un lien.

Pour l'instant, c'est tout ! S'il y a autre chose, je le posterai au fur et à mesure. Pour l'instant, je veux vous montrer ce que j'ai fait jusqu'à présent, sans ajouter de style, comme la police, la couleur, la taille du texte, etc. C'est juste les éléments aux bons endroits. Dans le prochain article, je décrirai le processus de test dans différents services de messagerie et les modifications que j'ai dû apporter.

Comme vous pouvez le voir, il y a du travail à faire. Permettez-moi de décrire un peu le processus de mise en page. Cela n'a aucun sens de s'y plonger, beaucoup de choses changeront d'ici le prochain article. En fait, tout semble simple, mais d'un autre côté, cette leçon m'a pris beaucoup de temps.

Comment créer une lettre html

Tout d'abord, j'ai créé un tableau filaire pour tout le contenu de l'e-mail, avec une largeur de 100 % et un fond bleu. En elle placé deux tables d'enfants. Un pour l'en-tête (id="header"), le second pour le contenu (id="content") :

Newsletter du site



Comme vous l'avez déjà remarqué, j'ai défini cellpadding="40" pour la table wrapper. Il s'agit du rembourrage externe. Le rembourrage de 20px définit la table responsable de l'en-tête. Et j'ai ajouté le rembourrage interne à la table dans laquelle le contenu seront localisés. En outre, toutes les tables sont alignées au centre. Passons à autre chose...

Maintenant, vous devez diviser l'en-tête en 2 parties. A un endroit le logo, et à l'autre je crée une autre plaque avec 3 colonnes et y mets des liens vers les réseaux sociaux.

Png" alt="(!LANG:logo" width="84" height="84"/> !}

Comment bloquer l'indexation des liens externes

Salut les gars. Aujourd'hui, nous allons parler de la façon de fermer en toute sécurité les liens externes sur votre page de destination afin que le poids ne soit pas transféré à partir de celle-ci, mais reste sur votre page. Comme vous le savez probablement maintenant, même si vous avez fermé le lien avec l'attribut , le poids statique est toujours transmis et diminue donc à partir de votre page.

Maintenant, nous devons créer une structure avec 3 colonnes. Comme nous ne pouvons pas utiliser de float(s), nous devrons faire 5 colonnes. 3 pour le contenu avec des images (150px) et 2 pour définir le retrait entre elles (60px).

PNG" />

Comment créer des balises UTM et à quoi elles servent Mises à jour du blog et mini rapport d'optimisation Script pour les tests AB

Terre intelligente | 2014

Nombre de modèles

Qualité du modèle

Excellent

Excellent

Excellent

Excellent

Thèmes disponibles

Vacances

- Affaires

Boutique en ligne

- Tourisme

– Général, etc.

-Vacances

- Le restaurant

- Tourisme

- Affaires

Boutique en ligne, etc...

- Général

Vacances

- Tourisme

- Affaires

Boutique en ligne

-Boutique en ligne

- Beauté et santé

- Tourisme

- Vacances

Boutique en ligne

- Tourisme

Adaptation de la lettre pour différents écrans

Oui (jusqu'à 1 500 e-mails pour 100 adresses)

Oui (jusqu'à 15 000 e-mails pour 2 000 adresses)

Oui (jusqu'à 6 000 e-mails pour 5 000 adresses)

Utilisation gratuite des modèles

Possibilité d'utiliser des modèles précédemment utilisés

  1. UniSender.

L'un des services russifiés les plus populaires pour la création de newsletters par e-mail. 3 éditeurs sont disponibles : pour les modèles de bloc (le contenu textuel et visuel peut être modifié à votre discrétion), pour les modèles de base et HTML prêts à l'emploi, pour travailler avec votre propre modèle d'e-mail HTML. Comprendre les éditeurs n'est pas difficile, le système donne des indices, et c'est tout. outils nécessaires situé en haut de la page de travail.

  1. EnvoyerPulse

Un site non moins populaire, compréhensible et pratique pour créer des modèles de lettres HTML et travailler avec des modèles prêts à l'emploi. Parmi ceux considérés, il possède le plus grand package gratuit et suffisamment de modèles pour créer une newsletter réussie.

Le site vous permet de créer vos propres modèles dans un éditeur HTML simplifié, un constructeur ou en téléchargeant votre propre modèle à partir d'un ordinateur. Le constructeur est facile à comprendre, vous pouvez créer une belle lettre à partir de rien en choisissant des images, des polices et en plaçant le tout au bon endroit.

  1. Rumailer

Un site modeste en termes de design avec de bons templates et un package gratuit relativement important. La fonctionnalité de travailler avec nombre limité templates n'est pas aussi large que le souhaiteraient des utilisateurs expérimentés. Il n'y a pas du tout d'éditeur de blocs pratique.

L'avantage du service est la disponibilité de grandes opportunités pour les abonnés à l'exportation. Ils peuvent être téléchargés par activité, par fiches, ainsi que par login ou domaine dans l'adresse e-mail.

  1. Avoir une réponse

Le service est réputé pour grande quantité modèles disponibles dans 24 catégories. L'interface agréable du site lui-même est complétée par un éditeur de blocs convivial de modèles HTML prêts à l'emploi et personnalisés pour les lettres aux clients.

L'éditeur est facile à utiliser. Les blocs peuvent être facilement déplacés, échangés, supprimés ou ajoutés. Lorsque vous cliquez sur le bloc, un menu de travail apparaît avec des boutons pour effectuer des actions de base avec des images et du contenu textuel.

Pour afficher les modèles, vous devez commencer à travailler avec le publipostage en saisissant les données de l'expéditeur et l'objet de la lettre, puis sélectionner le bouton "Bloquer le constructeur d'e-mails". Si l'utilisateur souhaite travailler avec son propre modèle, vous devez sélectionner "Editeur de code HTML".

  1. Mailerlite

Le site d'envoi d'e-mails, que de nombreux utilisateurs appellent le plus simple. Dans le même temps, la fonctionnalité de travail avec des modèles est assez limitée, mais les actions principales sont réalisables. Même un novice le comprendra dans l'éditeur, car. c'est simple et compréhensible. Comme sur d'autres plates-formes, vous pouvez télécharger vos propres modèles HTML pour les newsletters par e-mail, les modifier et les utiliser.

Comment choisir le bon modèle d'email html ?

Le choix d'un service et d'un modèle pour la distribution d'e-mails par e-mail est une question responsable, qui doit être abordée avec sagesse, car. le succès ultérieur du travail d'une organisation commerciale ou d'un entrepreneur en dépend en partie. Lors du choix d'un service, vous pouvez vous fier aux caractéristiques ci-dessus, aux avis d'amis ou d'utilisateurs sur Internet, à des exemples de travail sur le site, ainsi qu'à vos propres sentiments en travaillant avec un service particulier.

Une réponse complémentaire à la question "comment savoir quel template choisir ?" des statistiques sur les services les plus populaires pourraient servir. Ça pourrait, mais avouons-le, % d'ouverture, transitions, clics, désabonnements du service ne dépendent pratiquement pas. La seule chose que nous avons remarquée est que, par exemple, sur SendPulse (limites luxueuses sur les logiciels gratuits), un pourcentage légèrement plus élevé d'e-mails se retrouve dans le dossier spam, et non dans la boîte de réception. Et le pourcentage d'erreurs publiées par les services eux-mêmes ne peut être contrôlé par personne d'autre qu'eux, sauf peut-être empiriquement dans des cas isolés.

Nous avons écrit en détail sur les fonctionnalités gratuites des services de messagerie.

Comment savoir quel modèle d'e-mail adapté à chaque cas spécifique ? Cela ne peut être fait qu'en travaillant avec différents modèles, en choisissant le meilleur design et le meilleur contenu. De nombreuses entreprises utilisent d'abord modèles prêts à l'emploi, en les modifiant, puis en créant les leurs. C'est un bon choix si compétences rédactionnelles lettres et pages html Non, et le mailing est considéré comme un outil utile.

Services Internet pour les entreprises.
Un lien vers le matériel est requis !


Bonjour chers lecteurs - site!

Aujourd'hui je vais vous montrer comment faire une belle campagne email.

Ce n'est depuis longtemps un secret pour personne que toute l'activité sur Internet repose sur le marketing par e-mail.

Chaque jour, à l'aide de newsletters, d'info-entrepreneurs, de blogueurs et de contact avec leurs abonnés, leur proposant divers produits et services.

Mais pour qu'une telle offre soit remarquée et non immédiatement envoyée dans le dossier spam, vous devez attirer l'attention dessus.

Pour ce faire, il serait approprié de créer un modèle d'e-mail HTML magnifiquement conçu.

Spécialement pour vous, j'ai choisi un modèle de test, qui sera une aide visuelle.

Que ferons-nous et comment ?

Nous allons créer le modèle d'e-mail HTML le plus simple (), qui consistera en une boîte de dialogue principale et deux colonnes secondaires.

Création d'un squelette et d'une table conteneur

Tout d'abord, nous devons créer un cadre HTML pour notre e-mail. Il ressemblera à ceci:

Modèle d'e-mail HTML

Modèle d'e-mail HTML



Veuillez noter que j'ai défini la largeur du tableau sur 99% , en laissant un peu d'espace autour. Ce n'est pas mon souhait personnel, mais une exigence de certains clients de messagerie Web tels que Gmail et Yahoo. Le reste de notre e-mail sera dans cette seule cellule du tableau, qui est centrée.

L'étape suivante consiste à créer un wrapper de table pour le contenu réel de l'e-mail. Ne dépassez pas 600 pixels pour la taille maximale du design :

Modèle d'e-mail HTML



Avec l'ombre claire sur le fond blanc, notre modèle d'e-mail a été étiré à 640 pixels, mais il zone de travail restait toujours à 600px .

Création d'un en-tête

Maintenant que le tableau principal a été créé, il est temps de commencer à le remplir avec le contenu nécessaire. Je vais commencer tout en haut du modèle de lettre et progresser lentement vers le bas.

Ligne supérieure

A partir de maintenant, j'exclurai le code précédemment écrit (bords de table).

Ainsi, la première ligne de la feuille de calcul a un fond bleu avec une police blanche et un lien vers la version Web de l'e-mail. Il est très important d'équiper votre lettre d'un tel lien, car tous les clients de messagerie n'affichent pas son contenu de la même manière.

Et le style CSS est responsable de son apparence :

/* Polices et typographie */ .footer ( font-family : Arial,Helvetica,sans-serif ; font-size : 11px ; color : #fff ; padding-right : 20px ; )

Logo et icônes des médias sociaux

En descendant, on voit le logo et qui se situent au même niveau.

Le code suivant est responsable de leur sortie :

De plus, les styles suivants sont ajoutés à toutes nos images dans le modèle d'e-mail HTML :

)

Ainsi, les icônes sociales s'assoient à leur place dans leurs propres cellules de tableau imbriquées et ne sont pas liées à d'autres sections de la lettre. Cela permet de les changer au fur et à mesure des besoins.

Ajout de contenu

Tout d'abord, nous allons commencer par ajouter la première image, qui dans cette conception fait 560 pixels sur 210 pixels . Vous pouvez également voir la belle ombre déformée sous l'image, qui a été réalisée séparément, vous permettant de changer rapidement d'image sans perdre l'ombre. Passons au code :

Ici, nous avons créé une nouvelle ligne pour afficher de grandes images en définissant la largeur sur 560 pixels avec un rembourrage de 20 pixels des deux côtés. Nous avons fait la même chose avec l'ombre.

Ajout de titre et de contenu

En dessous, nous voyons le titre du matériel principal et le contenu lui-même. Voici le code pour afficher le contenu :

Ceci est votre histoire en vedette

Il y a une opinion que Pattaya est devenue une station balnéaire populaire en raison du fait que les marins américains se sont souvent reposés ici, qui, cependant, sont en grand nombre ici et maintenant et ils sont toujours entourés de plusieurs taikas. Naturellement, parmi nos compatriotes, il est moins populaire que l'Egypte et la Turquie. Mais la langue maternelle est entendue partout ici)) et dans les centres commerciaux pendant les achats et dans de nombreux bars locaux)). Pattaya est principalement célèbre pour sa vie nocturne, sa mer et ses textiles. Bien sûr, entre autres choses, vous pouvez trouver beaucoup d'autres choses intéressantes ici. Ici, vous pouvez louer n'importe quel véhicule, y compris des jeeps et des scooters. Pour les fans de motos, c'est généralement un paradis. Pour louer une moto, vous n'avez peut-être même pas besoin d'un permis, pour seulement 100 à 500 bahts (plus une caution de 2 000 bahts), vous pouvez louer un scooter décent et conduire pour votre propre plaisir !

Pour modifier l'apparence de l'en-tête et du texte d'un modèle d'e-mail, utilisez simplement les styles suivants :

H1 ( color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; ) .content ( padding: 0; margin: 0 ; ) p ( famille de polices : Arial, Helvetica, sans-serif ; taille de police : 13 px ; hauteur de ligne : 20 px ; )

Contenu additionnel

Passons maintenant au contenu supplémentaire de notre modèle. Comme vous l'avez déjà remarqué, il est divisé en deux colonnes. Dans chacune des colonnes il y a une photo, un titre et un petit aperçu. Tout cela est créé à l'aide du code suivant :

Ceci est un titre secondaire

Ceci est un titre secondaire

Malgré la réputation ruinée de Pattaya, vous pouvez apprendre ici que le célèbre massage thaïlandais n'est pas seulement une façade pour les bordels. En Thaïlande, on fait vraiment un bon massage, et les maîtres aveugles sont considérés comme les meilleurs spécialistes de cet art. Leur secret réside dans la sensibilité accrue des doigts.

La rue centrale et le cœur de Pattaya, qui ne laisse personne indifférent. Arbat local, Times Square et Sodome avec Gomorrhe dans un verre, Walking Street est une véritable source d'amour et de haine pour les habitants et les visiteurs. Nous disons "Pattaya", nous voulons dire Walking Street.

Ici, nous devons encore ajouter un style supplémentaire. Le voilà:

H2 ( color: #e95f03; font-family: Futura, Verdana, Sans-Serif; rembourrage: 0; margin: 0; font-size: 18px; font-weight: normal; )

Clôture du modèle d'e-mail HTML

Nous approchons donc de la fin de notre modèle. Ici, nous devons fermer la fenêtre principale en utilisant une image et le code suivant :

Un des plus aspects importants, est l'ajout d'un lien à la fin du modèle de lettre pour se désabonner de la réception de telles lettres (). Oui, oui, je sais que vous ne voulez pas perdre d'abonnés. Mais vous ne pouvez pas les ennuyer non plus. Vous devez donner aux clients la possibilité de refuser de recevoir des listes de diffusion qui les dérangent depuis longtemps. Eh bien, en même temps pour rappeler qui est l'auteur.

Ici, vous avez besoin du code suivant :

Bulletin de: Ivanov Ivan
Auteur du blog : Ivan.ru

Vous souhaitez vous désabonner ? cliquez ici

Conclusion

Chers amis, pour afficher tous éléments graphiques dans le modèle de lettre, elles doivent être téléchargées sur n'importe quel serveur en ligne, et dans les lignes de code correspondantes, vous devez spécifier un chemin unique vers ces images.

Un modèle d'e-mail HTML de test a été fourni à titre indicatif que vous pouvez modifier à tout moment selon vos goûts et vos couleurs.

C'est tout pour aujourd'hui. J'espère que tu l'a aimé.

En attendant de nouveaux articles...

Cordialement, Denis Chernikov!



 


Lis:



Signes de ponctuation dans une phrase composée : règles, exemples

Signes de ponctuation dans une phrase composée : règles, exemples

1. Les phrases simples qui font partie d'une phrase composée (CSP) sont séparées les unes des autres par des virgules. Exemples : Windows en tout...

Ai-je besoin d'une virgule avant "comment" ?

Ai-je besoin d'une virgule avant

Une virgule devant l'union COMMENT est placée dans trois cas : 1. Si cette union est incluse dans des spires dont le rôle dans la phrase est proche des mots d'introduction, par exemple : ...

Conjugaisons de verbes. Conjugaison. Règle de conjugaison des verbes

Conjugaisons de verbes.  Conjugaison.  Règle de conjugaison des verbes

- peut-être l'un des sujets les plus difficiles du cours de russe. Cependant, il faut bien le maîtriser : pas un seul ne peut se passer de verbes...

Que signifient deux deux-points en PHP ?

Que signifient deux deux-points en PHP ?

Ainsi, les deux-points sont un séparateur de ponctuation. Contrairement au point, au point d'exclamation, au point d'interrogation et aux points de suspension, il n'a pas...

flux d'images RSS