Een aangepaste HTML-e-mail maken en verzenden

Een interactieve HTML-e-mail is een krachtig hulpmiddel. Bedrijven kunnen ze gebruiken voor promo-deals, freelancers kunnen ze gebruiken om hun diensten aan te pitchen potentiële klanten en kleinkinderen kunnen een glimlach op het gezicht van hun grootouders toveren met een schattige gewoonte ontwerp. De enige twee technologieën die je nodig hebt om helemaal opnieuw een aangepaste e-mail te maken, zijn HTML en inline CSS. Het enige wat u hoeft te doen is een ontwerp in gedachten te krijgen, het te analyseren in de vorm van tabelrijen en kolommen, en u bent klaar om te beginnen met bouwen. In dit artikel leert u een stapsgewijze methode om een ​​aangepaste HTML-e-mail te maken en te verzenden.

Bouw de e-mailsjabloon met HTML

De e-mailsjabloon is gebaseerd op traditionele HTML-technieken. Je gaat werken met tabellen en het stapelen van tabelrijen en tabelgegevens de hele tijd. De standaard HTML-e-mailsjabloon ziet er als volgt uit:

...
...
...
...
...
...
...




...

Uitgang:

Je kunt het beste een ontwerp maken, zodat je in kaart kunt brengen waar en hoe je het ontwerp gaat opdelen. Bovendien ben je mentaal voorbereid om er een tafelstructuur van te maken.

Hier begint u met het DOCTYPE voor het document. Vervolgens stelt u de tekenset, het inhoudstype, de metatags en de titel in de label. Het essentiële deel begint met de tag waar je een ouder plaatst en voeg meerdere tabelrijen toe in het. Nadat de inhoud in een juist aantal rijen is verdeeld, is het tijd om de tabelgegevens in te voeren binnen hen.

Zoals gezegd, je hoeft alleen maar met tabellen te werken. Daarom, voor het invoeren van verschillende gegevens in de tag, moet u een gedefinieerde route volgen. Laten we bijvoorbeeld een e-mailsjabloon maken met een logo en datum in een label.

 Logo en datum binnen 
 tag 

















05 dec, 2021

Nu weet u hoe u HTML-tags plaatst en een goede structuur voor uw e-mailsjabloon opbouwt. Laten we verder gaan om e-mailstyling beter te begrijpen.

Stijl uw HTML-e-mail

Het opmaken van een HTML-e-mail is een omslachtige taak, aangezien u alleen inline CSS kunt gebruiken. Je moet ook de stijl voor elk element herhalen als het een vergelijkbare stijl heeft. Als u niet bekend bent met Cascading Style Sheets, verken dan aan de slag met CSS.

Voorbeeld:

 05 dec, 2021 






































Hoi John Doe



Bedankt voor het bezoeken van onze site. We hopen dat je vandaag iets nieuws hebt geleerd.





 Uw mening is belangrijk voor ons! 

 Beoordeel hier onze artikelen. 


012345678910

Uitgang::

Als je wilt, kan dat toegang tot de volledige code op GitHub en kloon de repository om deze te gebruiken.

De e-mail verzenden

Kopieer en plak nu de volledige code van GitHub. Als u VS Code gebruikt, opent u het HTML-bestand met behulp van de live server-extensie en kopieert u de inhoud door te klikken op Ctrl + A>Ctrl + C. Open Gmail en stel een nieuwe e-mail op. Plak de inhoud en voer de e-mail-ID van de ontvanger in. Stuur de e-mail en je krijgt de resultaten zoals hieronder weergegeven:

Test de code op verschillende apparaten om te zien hoe deze eruitziet en zich gedraagt. Pas uw HTML-e-mail aan en maak deze overzichtelijk, eenvoudig en responsief.

Bestaande e-mailsjablonen wijzigen

Het maken van een geheel nieuwe HTML-e-mail vereist een stevige grip op HTML en inline CSS. U kunt ook een bestaand e-mailsjabloon wijzigen en aanpassen aan uw behoeften. Houd er rekening mee dat HTML-e-mails een paar seconden nodig hebben om te laden. Plan, ontwerp, codeer en voer grondige tests uit om inconsistenties bij de eindgebruiker te voorkomen. U kunt meer leren over semantische HTML en CSS om betere, toegankelijkere code te schrijven.

Naincy Mourya (17 artikelen gepubliceerd)

Naincy is gespecialiseerd in het bouwen van zeer responsieve websites en een efficiënte inhoudsstrategie, samen met webkopieën. Ze is een freelance tech-schrijver die trending technologieën scherp in de gaten houdt.

Meer van Naincy Mourya