Maison - Conseils de concepteur
Modèles de courrier électronique HTML. Modèles et éditeurs de modèles pour newsletters électroniques

Je n’ai pas encore compris s’il est nécessaire d’indiquer la taille des images, donc à cet égard c’est toujours le chaos. Quelque part je le mets, quelque part je ne le mets pas. Après les tests, je mettrai les choses en ordre. Soit je le supprime complètement pour raccourcir le code, soit je dois l'ajouter partout s'il ne s'affiche pas correctement dans l'un des mailers.

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

Maintenant, la lettre ressemble à ceci :



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

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

Je fais exactement le même balisage pour le texte et les titres :

Et maintenant il reste la dernière étape : créer 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 :

C’est ainsi que s’est avérée la lettre. De nombreux tests nous attendent maintenant. 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

Pendant les tests, j'ajouterai des styles aux titres et aux textes, réinitialiserai les propriétés et effectuerai d'autres ajustements. Et puis j'écrirai un autre article détaillé sur ce sujet. Peut-être que quelque chose changera d'ici le prochain article, alors abonnez-vous aux mises à jour si vous êtes intéressé ce sujet et vous ne voulez pas manquer de nouveau matériel.

Si vous avez de l'expérience dans la création de lettres HTML, veuillez rédiger votre commentaire et signaler les erreurs. Je vous en serai très reconnaissant. Et c'est tout pour aujourd'hui. Au revoir!

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

L’email marketing 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, l'envoi manuel de lettres à chaque client devient un travail écrasant. Le marketing par e-mail contribue à rendre le processus d’envoi d’e-mails plus pratique, plus rapide et crée la base de la créativité. Des modèles HTML et d'e-mails classiques sont utilisés pour le mailing.

Si nous parlons dans un langage simple, le marketing par e-mail est un système bien pensé d'envoi de lettres à des adresses e-mail situées dans la base de données.

Ce type de marketing est basé sur des modèles de lettres et de pages intégrées aux lettres.

Les modèles d'e-mails sont de 2 types :

  • Les e-mails simples ne contiennent que quelques phrases avec ou sans pièces jointes, rarement avec un formatage créatif. Ces modèles d'e-mails sont couramment utilisés dans la correspondance commerciale.

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

Quels sont les avantages et les inconvénients ?

Commençons par les modèles habituels.

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, surtout ordinaire. Contrairement aux e-mails HTML.

Il est difficile de créer soi-même des e-mails HTML sans préparation suffisante, même si ce sont précisément ces messages, beaux, semblables à des cartes postales, qui attirent bien plus l'attention que les simples « en noir et blanc ». Des modèles de lettres et d'e-mails HTML peuvent être créés directement sur les sites de services de messagerie qui incluent depuis longtemps cette fonctionnalité comme obligatoire pour organiser les lettres d'envoi aux utilisateurs.

Services de base

Lors de la description des principaux sites de newsletters par courrier électronique, il est logique de les comparer selon les caractéristiques les plus importantes.

Offres Stripo large choix modèles gratuits newsletters par courrier électronique. Ils sont regroupés par domaine d'activité et par catégorie, comme les événements spéciaux, les jours fériés, 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 :

    Conception Web réactive

    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 le rendre non réactif si vous souhaitez que certains éléments de vos modèles d'e-mails restent inchangés.
    De plus, grâce au code HTML ouvert de nos modèles d'e-mails gratuits, il est possible de 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 grande variété de campagnes marketing.

    Deux éditeurs en un

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

    Création de bannière

    Avec Stripo, vous pouvez facilement créer des bannières, les traiter dans l'éditeur et placer du texte au-dessus de la bannière. Grâce à cette fonctionnalité, vous avez la possibilité d'utiliser les bannières plusieurs fois. Désormais, vous n'avez plus besoin d'outils supplémentaires (comme 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 fournisseurs de messagerie remplacent les polices décoratives par des polices sécurisées pour le Web. Dans le même temps, le design de votre email perd son charme particulier. Mais Stripo vous permet d'utiliser n'importe quelle police de votre choix parmi celles disponibles dans notre éditeur. Comment faire cela ? 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 un élément de l’image elle-même. De cette façon, vos abonnés verront votre texte ajouté à votre modèle HTML gratuit exactement comme prévu.

    Automatisation du travail - nos éléments intelligents uniques

    Créer des fiches produits est un processus plutôt fastidieux. Mais Stripo fait tout pour vous faciliter la tâche. Après quelques personnalisations des éléments intelligents, il vous suffira simplement 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 modèles de messages HTML. Stripo vous fait gagner du temps !

    Bibliothèque de modules personnels 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 lancez une nouvelle campagne par e-mail.
    Nos modèles gratuits existants sont automatiquement divisés en modules déjà disponibles dans votre bibliothèque personnelle.

    Exportation facile

    Les modèles de messages réactifs de Stripo s'exportent facilement 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 à une 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 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 une réelle passion.

Afficher plus

Une bonne campagne email commence par la conception de l’e-mail. Aujourd'hui, alors que la plupart des clients et plateformes de messagerie e-mail prenant 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. Adaptatif Modèle HTML s Les lettres garantissent que notre newsletter est perçue de manière égale par les abonnés, quel que soit l'appareil sur lequel elle est lue.

Pour vous aider à faire bon choix, nous vous présentons une sélection des modèles de lettres les plus populaires pour le marketing par e-mail. Nous y examinons 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 un défi en soi. pas une tâche facile. Et quand nous parlons de sur la création d'une mise en page réactive, il y a aussi plus de nuances dont il faut tenir compte. C'est pourquoi un framework comme Cerberus peut vous être utile.

Cette bibliothèque compacte est conçue pour aider les utilisateurs à utiliser quelques modèles HTML pour créer un e-mail qui offrira une expérience de visualisation d'e-mails 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


Ce marque célèbre parmi ceux qui aiment tester et analyser l’efficacité marketing par courrier électronique campagnes. L'équipe Litmus est réputée pour fournir régulièrement à la communauté une variété de ressources gratuites, dont 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. Il est parfait pour les utilisateurs qui souhaitent 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 newsletters par e-mail réactives. Le framework fournit aux développeurs un ensemble de grilles, de modules, de blocs et de lignes pour le contenu, une fonction permettant de définir la distance entre les éléments, les boutons, les lignes d'image et d'autres éléments qui peuvent être utilisés pour développer un modèle d'e-mail parfait. Il a été testé sur tous les clients de messagerie populaires.

Fondation pour les e-mails


Il s'agit d'un ensemble de divers frameworks et plates-formes permettant d'optimiser le développement Web. Foundation fournit aux développeurs et aux concepteurs un framework CSS facile à utiliser qui leur permet de créer rapidement des e-mails efficaces et réactifs.

Chaque éditeur de modèles de courrier électronique HTML utilise nativement le système de grille fourni par la Fondation. Il peut alors être complété par divers éléments couramment utilisés à de telles fins. Que vous travailliez dans le domaine du commerce électronique ou du branding d'entreprise, Foundation peut vous aider à créer des modèles réactifs. e-mails.

Réponse


Antwort ne se positionne pas comme un framework, ils se présentent comme une ressource de modèles d'e-mails prêts à l'emploi qui peuvent s'adapter aux lignes fixes 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 pour permettre l'ajout dynamique de contenu. Dans le même temps, le style de conception des lettres est minimaliste.

Aire de jeux de ZURB


Ceci est une société de développement Fondation du framework HTML5, ainsi que l'opérateur d'un service appelé Ink. Aujourd’hui, il est mieux connu sous le nom de Foundation Email.

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

Mosaïque


Une plate-forme qui permet à tout utilisateur de créer de superbes modèles d'e-mails HTML adaptatifs. Mosaico fournit des outils pour gérer les éléments personnalisés et conception adaptative. Ils vous permettent de personnaliser toutes vos mises en page d’un simple clic.

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

Modèles d'e-mails open source


Une plateforme de marketing par e-mail renommée 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 propose 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 émettre des factures et des notifications aux clients.

Modèles d'e-mails réactifs


Brian Graves a établi une base solide pour créer et travailler avec des e-mails réactifs. Son projet Responsive Email Patterns est un ensemble de modèles enfichables que vous pouvez utiliser pour 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, de la navigation et des grilles.

Modèles d'e-mails HTML


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

Inspiration pour la conception d'e-mails grâce aux conceptions d'e-mails HTML


Il s'agit d'un référentiel des meilleurs modèles d'e-mails utilisés dans les newsletters de 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. Cela vous permet d'analyser facilement la structure des modèles pour mieux comprendre les fonctionnalités d'implémentation qui les fournissent. haute efficacité. Des centaines de modèles d'e-mails pour commencer.

MJML - Le framework de messagerie réactif


Il s'agit d'un framework 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 faciliter la conception d'e-mails réactifs. Le balisage que vous créez à l'aide de 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 gérer des cadres complexes, Respmail est une solution de marketing par e-mail simple et réactive. Il vous fournit un modèle unique que vous pouvez personnaliser à votre guise. Depuis sa création, le modèle de courrier électronique HTML a été amélioré et affiné pour garantir la compatibilité avec tous les principaux clients de messagerie.

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 vos e-mails de newsletter.

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 aux blogueurs, artistes, écrivains qui souhaitent faire passer leur message sans avoir à surcharger la lettre avec des éléments complexes et modernes.

Portefeuille de courrier


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 pareil. Dans le pied de page, vous pouvez spécifier les informations nécessaires sur l'entreprise, qui sont obligatoires pour la plupart des plateformes de marketing par e-mail.


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

CONCEPTEUR EDM


Cette entreprise a passé beaucoup de temps à s'adapter pleinement aux besoins de la communauté. Le résultat est une plateforme fonctionnelle de création d’e-mails. L'interface glisser-déposer aide les développeurs à créer de superbes mises en page. Ne perdez plus de temps à recréer encore et encore le même contenu. Avec EDMDESIGNER, vous pouvez enregistrer non seulement des modèles de lettres, mais également des éléments individuels. Vous pourrez ensuite les réutiliser dans n’importe quelle campagne future.

E-mail HTML moderne


Nous aimerions compléter notre liste de modèles gratuits avec un livre. Ce meilleure façon découvrez comment créer des modèles d'e-mails réactifs. L'auteur de l'un d'eux est Jason Rodríguez. Le livre vous aidera à créer des modèles de courrier électronique HTML modernes et esthétiques qui fonctionneront 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 par e-mail et de les optimiser à l'aide d'outils et de rapports d'analyse.

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

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

Idée


Modèle fonctionnel fournissant tous les éléments disponibles éléments modernes HTML5, qui peut être intégré au modèle lui-même. Vous pouvez facilement communiquer vos prix et les caractéristiques de vos produits avec des éléments intégrés qui simplifient l’ensemble du processus. Le modèle contient un module 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 courrier électronique.

Vibgyor


Vibgyor peut être décrit comme un modèle polyvalent pour diverses industries. Professionnel apparence rend Vibgyor attractif 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 discrétion.

Salut tout le monde. L'autre jour, j'ai décidé de comprendre comment les lettres HTML sont tapées. J'ai passé plusieurs heures sur Internet, lu des dizaines d'articles sur ce sujet et suis arrivé à la conclusion qu'il s'agissait 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 email de feedburner (sous les articles) par autre chose pour le rendre plus attractif. 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 pas mal.

La pertinence de créer des lettres html pour le mailing

Le mailing est l'un des plus moyens efficaces vendre des marchandises, transmettre des nouvelles aux clients, parler des promotions et services supplémentaires. De plus, une fois que vous avez une clientèle, vous pouvez faire revenir les « anciens » clients et réaliser une autre vente.

Vous pouvez envoyer du matériel sur des services supplémentaires qui pourraient intéresser vos clients après leur premier achat.

Et bien sûr, la théorie des grands nombres fonctionne ici. Si vous envoyez une offre de vente de quelque chose à 20 000 abonnés, 1 000 d’entre eux liront l’offre et au moins 10 achèteront, et le coût sera 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 que le texte était en désordre, pour quelqu’un les images ne s’ouvraient pas et pour quelqu’un la mise en page était foirée. Cela arrive. En raison du fait que les programmes de messagerie ne prennent pas en charge CSS ainsi que les navigateurs. Quant au javascript, je suis généralement silencieux.

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 expliquer comment créer une lettre HTML qui s'ouvrirait aussi bien dans tous les navigateurs (y compris mobiles) et programmes de messagerie, afin que vos lettres soient attrayantes et que vous ne perdiez pas de clients. Ce n'est pas le dernier post, s'il y a des problèmes d'affichage, alors plus tard je corrigerai celui-ci ou j'écrirai une suite. Je serai également reconnaissant à tous ceux qui peuvent aider à tester et identifier les problèmes.

Problèmes avec la mise en page des e-mails HTML

Étant donné que les services postaux ne disposent 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 programmes de messagerie ont complètement désactivé la prise en charge des feuilles de style et des feuilles de style en tant que telles, de la manière décrite ci-dessus. Argumenter cela en disant que les lettres sont nécessaires spécifiquement pour le texte. Vous devrez donc écrire des styles pour chaque élément séparément.

Une autre surprise était que peu de services de messagerie ne prennent pas en charge le flottant, les marges et le remplissage. Comment l'aimez-vous? Imaginez que vous ayez créé une superbe lettre HTML à trois colonnes basée sur des div(s), et que l'utilisateur ait trouvé de telles bêtises qu'il l'a immédiatement supprimée, sans comprendre ce qu'il attendait de lui.

Oui, oui. Vous avez bien entendu ! Vous devrez utiliser des tableaux si vous n'êtes pas prêt à sacrifier des milliers d'utilisateurs qui n'ouvriront pas correctement votre courrier électronique. Il s’avère que les tableaux sont aujourd’hui le seul moyen d’obtenir une 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, je devrai les apprendre, puisque je n'ai jamais utilisé de tables. Peut-être que je n'aurais jamais eu à le faire si je n'avais pas décidé de comprendre comment formater les lettres :)

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

Un autre problème pour moi est que je dois constamment réinitialiser de nombreuses valeurs, par exemple la bordure des images si elle est définie comme lien.

C'est tout pour l'instant ! Si quelque chose d’autre arrive, je le décrirai au fur et à mesure. Et maintenant, je veux vous montrer ce que j'ai fait jusqu'à présent, sans ajouter de styles de conception tels que la police, la couleur, la taille du texte, etc. Ce ne sont que les éléments placés aux bons endroits. Dans le prochain article, je décrirai le processus de test dans différents services de messagerie et les modifications qui ont dû être apportées.

Comme vous pouvez le constater, il y a quelque chose à travailler. Permettez-moi de décrire un peu le processus de mise en page. Il ne sert à rien d’approfondir ce sujet ; beaucoup de choses changeront d’ici le prochain article. En fait, tout semble simple, mais d'un autre côté, cette activité m'a pris beaucoup de temps.

Comment créer une lettre HTML

Pour commencer, j'ai créé un tableau filaire pour l'ensemble du contenu de l'email, avec une largeur de 100% et un fond bleu. Il contient deux tables 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 remplissage externe. J'ai défini un remplissage de 20 pixels sur la table qui est responsable de l'en-tête. le contenu sera localisé. De plus, j'ai aligné tous les tableaux par centre.

Vous devez maintenant diviser le chapeau en 2 parties. Dans l'un je place le logo, et dans l'autre je crée une autre plaque avec 3 colonnes et j'y place des liens vers les réseaux sociaux.

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

Comment bloquer l'indexation des liens externes

Bonjour 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 n'en soit pas transféré, mais reste sur votre page. Comme vous le savez probablement déjà, même si vous fermez le lien avec le , le poids statique est toujours transféré et donc supprimé de votre page.

Vous devez maintenant créer une structure de 3 colonnes. Comme nous ne pouvons pas utiliser de float(s), nous devrons créer 5 colonnes. 3 pour le contenu avec des images (150 px) et 2 pour définir l'espace entre elles (60 px).

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

Atterrissage intelligent | 2014

Nombre de modèles

Qualité du modèle

Excellent

Excellent

Excellent

Excellent

Sujets disponibles

Vacances

- Entreprise

Boutique en ligne

– Tourisme

– Général, etc.

-Vacances

- Restaurant

– Tourisme

- Entreprise

Boutique en ligne, etc.

- Général

Vacances

– Tourisme

- Entreprise

Boutique en ligne

-Boutique en ligne

– Beauté et santé

– Tourisme

- Vacances

Boutique en ligne

– Tourisme

Adaptation de l'écriture pour différents écrans

Oui (jusqu'à 1 500 lettres à 100 adresses)

Oui (jusqu'à 15 000 lettres à 2 000 adresses)

Oui (jusqu'à 6 000 lettres à 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 courrier électronique. 3 éditeurs sont disponibles : pour les modèles de blocs (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. Ce n'est pas difficile de comprendre les éditeurs, le système donne des indices, et c'est tout outils nécessaires sont situés en haut de la page de travail.

  1. EnvoyerPulse

Un site tout aussi populaire, clair et pratique pour créer des modèles de lettres HTML et travailler avec des modèles prêts à l'emploi. Parmi ceux examinés, il propose le plus grand package gratuit et de nombreux 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 concepteur ou en téléchargeant votre propre modèle depuis votre ordinateur. Le concepteur est facile à comprendre ; vous pouvez créer une belle lettre « à partir de zéro » en choisissant indépendamment les images, les polices et en disposant le tout à l'emplacement souhaité.

  1. Rumailer

Un site modeste en termes de conception avec de bons modèles et un package gratuit relativement important. Fonctionnalité pour travailler avec quantité limitée les modèles ne sont pas aussi larges que les utilisateurs expérimentés le souhaiteraient. Il n'existe aucun éditeur de blocs pratique.

L'avantage du service est qu'il offre de grandes opportunités d'exportation d'abonnés. Ils peuvent être téléchargés par activité, par fiche, ainsi que par login ou domaine dans une adresse email.

  1. Obtenir la réponse

Le service est célèbre pour son un grand nombre 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 glissés, réorganisés, supprimés ou ajoutés. Lorsque vous cliquez sur le bloc, un menu de travail apparaît avec des boutons permettant d'effectuer des actions de base avec des images et du contenu textuel.

Pour afficher les modèles, vous devez commencer à travailler avec la liste de diffusion en saisissant les informations de l'expéditeur et l'objet de la lettre, puis sélectionner le bouton « Bloquer le générateur d'e-mails ». Si l'utilisateur souhaite travailler avec son propre modèle, il doit alors sélectionner « HTML Code Editor ».

  1. Mailerlite

Un site de distribution de courrier électronique que de nombreux utilisateurs appellent le plus simple. La fonctionnalité de travail avec des modèles est assez limitée, mais les actions de base sont réalisables. Même un débutant peut comprendre l'éditeur, car... c'est simple et clair. Tout comme sur d'autres plateformes, vous pouvez télécharger vos modèles HTML pour les newsletters par e-mail, les modifier et les utiliser.

Comment choisir un modèle de lettre HTML adapté ?

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

Une réponse supplémentaire à la question « comment savoir quel modèle choisir ? » Des statistiques sur les services les plus populaires pourraient être utiles. C’est possible, mais avouons-le, le pourcentage d’ouvertures, de transitions, de clics et de désabonnements ne dépend pratiquement pas du service. La seule chose que nous avons remarquée est que, par exemple, sur SandPulse (limites gratuites luxueuses), un pourcentage légèrement plus élevé d'e-mails finissent dans le dossier « spam » plutôt que dans la boîte de réception. Et personne d’autre ne peut contrôler le pourcentage d’erreurs publiées par les services eux-mêmes, sauf de manière empirique dans des cas isolés.

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

Comment savoir lequel modèle d'e-mail Est-ce adapté à chaque cas spécifique ? Cela ne peut être fait qu'en travaillant avec différents modèles, en choisissant meilleure conception et le contenu. De nombreuses entreprises utilisent d'abord modèles prêts à l'emploi, en les modifiant, puis en créant les leurs. Ce bonne option si compétences rédactionnelles HTML des lettres et des pages non, mais la newsletter semble être 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 en créer une belle pour votre newsletter par e-mail.

Ce n'est un secret pour personne depuis longtemps que l'ensemble du secteur Internet repose sur le marketing par courrier électronique.

Chaque jour, à l'aide de newsletters, des info-entrepreneurs et des blogueurs contactent leurs abonnés et leur proposent divers biens et services.

Mais pour qu'une telle proposition soit remarquée et ne soit pas immédiatement envoyée dans le dossier spam, vous devez y prêter attention.

Pour ce faire, il conviendrait de créer un modèle de lettre HTML magnifiquement conçu.

Spécialement pour vous, j'ai sélectionné 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 sera composé d'une boîte de dialogue principale et de deux colonnes secondaires.

Création d'une table filaire et conteneur

Tout d’abord, nous devons créer un cadre HTML pour notre lettre. Cela ressemblera à ceci :

Modèle de lettre HTML

Modèle de lettre HTML



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

L'étape suivante consiste à créer un wrapper de table pour le contenu réel de la lettre. Limitez la taille maximale du design à 600 pixels :

Modèle de lettre HTML



Avec l'ombre claire sur le fond blanc, notre modèle d'e-mail était étiré à 640 px, mais il zone de travail reste toujours égal à 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 par le haut du modèle de lettre et descendre lentement.

Ligne supérieure

À partir de maintenant, j'exclurai le code précédemment écrit (frames 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 ( famille de polices : Arial, Helvetica, sans-serif ; taille de police : 11 px ; couleur : #fff ; padding-right : 20 px ; )

Logo et icônes des médias sociaux

En descendant, on voit le logo et , qui sont situés 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 :

/* Arrière-plans */ .email_background ( largeur : 640px ; arrière-plan : url("email_images/email_bg.jpg") répétition-y ; ) /* Images */ img ( affichage : bloc ; bordure : aucune ; )

De cette façon, les icônes sociales sont à leur place dans leurs propres cellules de tableau imbriquées et n'ont aucun rapport avec les autres sections de la lettre. Cela permet de les modifier selon les besoins.

Ajout de contenu

Nous allons d’abord commencer par ajouter la première image, qui dans cette conception mesure 560 px sur 210 px. Vous pouvez également voir la jolie 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 px et en ajoutant un remplissage de 20 px des deux côtés. Nous avons fait les mêmes actions avec l'ombre.

Ajouter un titre et du contenu

En bas, nous voyons le titre du matériel principal et le contenu lui-même. Ici, le code suivant est chargé d'afficher le contenu :

Ceci est votre histoire vedette

Il existe une opinion selon laquelle Pattaya est devenue une station balnéaire populaire en raison du fait que les marins américains y passaient souvent leurs vacances ; cependant, il y en a encore un grand nombre ici et ils sont toujours entourés de plusieurs Thaïlandais. Naturellement, il est moins populaire parmi nos compatriotes que l’Égypte et la Turquie. Mais le discours natif peut être entendu partout ici)) à la fois dans les centres commerciaux lors des 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, vous pouvez trouver ici, entre autres choses, bien d’autres choses intéressantes. Ici, vous pouvez louer n'importe quel véhicule, y compris des jeeps et des scooters. Pour les amateurs de moto, c'est un paradis. Pour louer une moto, vous n'aurez peut-être même pas besoin de permis ; pour seulement 100 à 500 bahts (plus une caution de 2 000 bahts), vous pouvez louer un scooter décent et rouler pour votre propre plaisir !

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

H1 ( couleur : #e95f03 ; famille de polices : Futura, Verdana, Sans-Serif ; remplissage : 0 ; marge : 0 ; taille de police : 24px ; poids de police : normal ; ) .content ( remplissage : 0 ; marge : 0 ; ) p (famille de polices : Arial, Helvetica, sans-serif ; taille de police : 13 px ; hauteur de ligne : 20 px ; )

Contenu supplémentaire

Passons maintenant au contenu supplémentaire de notre modèle. Comme vous l'avez déjà remarqué, il est divisé en deux colonnes. Chaque colonne contient 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 découvrirez ici que le fameux massage thaïlandais n'est pas seulement une couverture pour les bordels. En Thaïlande, ils donnent vraiment de bons massages, et les meilleurs spécialistes Dans cet art, les maîtres aveugles sont considérés. Leur secret réside dans la sensibilité accrue des doigts.

La rue principale et le cœur de Pattaya, qui ne laisse personne indifférent. Arbat local, Times Square et Sodome et Gomorrhe dans un seul verre, Walking Street est une véritable source d'amour et de haine tant pour les locaux que pour les visiteurs. Quand nous disons Pattaya, nous parlons de Walking Street.

Ici, nous devons encore ajouter un style supplémentaire. C'est ici:

H2 ( couleur : #e95f03 ; famille de polices : Futura, Verdana, Sans-Serif ; remplissage : 0 ; marge : 0 ; taille de police : 18px ; poids de police : normal ; )

Fermer un 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 l'image et le code suivant :

L'un des plus aspects importants, est l'ajout à la fin du modèle de lettre d'un lien pour se désabonner de la réception de telles lettres (). Oui, oui, je sais, vous ne voulez pas perdre des abonnés. Mais vous ne pouvez pas non plus les irriter. Vous devez offrir aux clients la possibilité de refuser de recevoir des mailings qui les ont peut-être ennuyés pendant longtemps. Eh bien, en même temps, rappelez-vous qui est l'auteur.

Ici, vous avez besoin du code suivant :

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

Vous souhaitez vous désinscrire ? 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 écrire un chemin unique vers ces images.

Le modèle de lettre HTML de test a été donné à 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 vous l'avez aimé.

En attendant de nouveaux articles...

Cordialement, Denis Chernikov!



 


Lire:



Éléments transuraniens Pourquoi les métaux de transition sont mauvais

Éléments transuraniens Pourquoi les métaux de transition sont mauvais

Il existe également des restrictions sur l'existence de noyaux atomiques issus d'éléments super-lourds. Les éléments avec Z > 92 n'ont pas été trouvés dans des conditions naturelles....

Ascenseur spatial et nanotechnologie Ascenseur orbital

Ascenseur spatial et nanotechnologie Ascenseur orbital

L'idée de créer un ascenseur spatial a été évoquée dans les œuvres de science-fiction de l'écrivain britannique Arthur Charles Clarke en 1979. Il...

Comment calculer le couple

Comment calculer le couple

Après avoir considéré les mouvements de translation et de rotation, nous pouvons établir une analogie entre eux. Dans la cinématique du mouvement de translation, le chemin s...

Méthodes de purification des sols : dialyse, électrodialyse, ultrafiltration

Méthodes de purification des sols : dialyse, électrodialyse, ultrafiltration

Fondamentalement, 2 méthodes sont utilisées : Méthode de dispersion - utilisant le broyage d'une substance solide en particules d'une taille correspondant aux colloïdes....

image de flux RSS