Hoe maak je een HTML -e -mailhandtekening voor iPhone of iPad

Als u verslaafd bent aan e -mails, vooral voor het bedrijfsleven, leert u uit deze tutorial stap voor stap hoe u HTML -e -mail maakt voor iPhone of iPad.

Een e -mail HTML -handtekening voor het bedrijfsleven moet zijn: uw naam, functie binnen de organisatie, bedrijfsnaam, bedrijfslogo, contactgegevens en bedrijf (telefoon, e -mail, webadres).

In de meeste e -mailtoepassingen het geslacht Outlook, HTML -handtekeningen worden toegevoegd door de code in te voegen HTML in het veld gewijd aan handtekening. Voor iPhone of iPad is het een beetje anders, maar in de geambele cases heb je de HTML -handtekening nodig.

Hoe maak je een HTML -e -mailhandtekening voor iPhone of iPad

Zoals ik hierboven zei, moet je eerst de HTML -handtekening ondertekenen (als je het al hebt, kun je dit deel van de tutorial overslaan).

U maakt HTML -handtekening

In mijn voorbeeld heb ik een Signature HTML -e -mail voor iPhone Iets eenvoudiger, dat omvat: afbeelding (of bedrijfslogo), sociale netwerken met link, eerste en achternaam, functie, telefoonnummer, e -mailadres en webadres.

Signature HTML -e -mail voor iPhone
HTML -handtekening

Als u van dit handtekeningmodel wilt beginnen, is de HTML -code als volgt:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Email Signature</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat">
<style type="text/css">
	img { outline: none; text-decoration: none; border: none; }
	p { margin: 0px !important; }
	a { color: #000 !important; text-decoration:none !important; }

	@media only screen and (max-width: 480px) {
		.heading-one {
			font-size:16px !important;
			line-height:18px !important;
		}
		
		.heading-two {
			font-size:12px !important;
			line-height:14px !important;
		}
		
		.paragraph {
			font-size:10px !important;
			line-height:11px !important;
		}
	}

	href>a { color:#000; text-decoration: none !important; text-decoration: none; }
</style>
</head>

<body>
<!-- EDIT BELOW IF YOU AREN'T OUTLOOK USER -->
<!--[if !mso]><!-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td valign="top" style="display:inline-block; min-width:100px; max-width:100px; padding-right: 20px; padding-bottom: 10px;"><table width="80" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="display: block; height: 100px; text-align: center;"><img src="img/model.jpg" width="100" height="100" alt=""/></td>
					</tr>
					<tr>
						<td style="background: #305dbf; padding-top: 10px; padding-bottom: 10px; text-align: center;"><table border="0" align="center" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td style="padding-right: 15px;"><a href="http://www.facebook.com/" target="_blank"><img src="img/icon-facebook-0.png" width="12" height="12" alt=""/></a></td>
									<td style="padding-right: 15px;"><a href="http://www.twitter.com/" target="_blank"><img src="img/icon-twitter-0.png" width="12" height="12" alt=""/></a></td>
									<td><a href="http://www.linkedin.com/" target="_blank"><img src="img/icon-linkedin-0.png" width="12" height="12" alt=""/></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
			<td valign="top" style="display:inline-block; min-width:300px; max-width:400px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="padding-bottom: 10px;"><span class="heading-one" style="font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:18px; font-weight:600; color:#000; text-transform:uppercase;">John Doe</span><br><span class="heading-two" style="font-family:'Montserrat', Arial, sans-serif; font-size:14px; line-height:16px; font-weight:500; color:#000; text-transform:capitalize;">Creative Director</span></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-phone-10.png" width="16" height="16" alt=""/></td>
									<td><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">858-272-3400</span></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-email-10.png" width="16" height="16" alt=""/></td>
									<td><a href="mailto:youremail@domain.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">hi@website.com</span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-website-10.png" width="16" height="16" alt=""/></td>
									<td><a href="http://www.yourwebsite.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">www.website.com</span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
		</tr>
	</tbody>
</table>
<!--<![endif]-->

<!-- EDIT BELOW IF YOU ARE OUTLOOK USER -->
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td width="100" valign="top" style="padding-right: 20px; padding-bottom: 10px;"><table width="80" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="display: block; height: 100px; text-align: center;"><img src="img/model.jpg" width="100" height="100" alt=""/></td>
					</tr>
					<tr>
						<td style="background: #305dbf; padding-top: 10px; padding-bottom: 10px; text-align: center;"><table border="0" align="center" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td style="padding-right: 15px;"><a href="http://www.facebook.com/" target="_blank"><img src="img/icon-facebook-0.png" width="12" height="12" alt=""/></a></td>
									<td style="padding-right: 15px;"><a href="http://www.twitter.com/" target="_blank"><img src="img/icon-twitter-0.png" width="12" height="12" alt=""/></a></td>
									<td><a href="http://www.linkedin.com/" target="_blank"><img src="img/icon-linkedin-0.png" width="12" height="12" alt=""/></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
			<td width="400" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="padding-bottom: 10px;"><span class="heading-one" style="font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:18px; font-weight:600; color:#000; text-transform:uppercase;"><font face="'Montserrat', Arial, sans-serif !important;">John Doe</font></span><br><span class="heading-two" style="font-family:'Montserrat', Arial, sans-serif; font-size:14px; line-height:16px; font-weight:500; color:#000; text-transform:capitalize;"><font face="'Montserrat', Arial, sans-serif !important;">Creative Director</font></span></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-phone-10.png" width="16" height="16" alt=""/></td>
									<td><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">858-272-3400</font></span></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-email-10.png" width="16" height="16" alt=""/></td>
									<td><a href="mailto:youremail@domain.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">hi@website.com</font></span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-website-10.png" width="16" height="16" alt=""/></td>
									<td><a href="http://www.yourwebsite.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">www.website.com</font></span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
		</tr>
	</tbody>
</table>
<![endif]-->
</body>
</html>

Het gemakkelijkste is om een ​​handtekeningmap te maken. Kopieer deze code in een teksteditor of HTML en wijzig deze vervolgens met uw gegevens. Uiteindelijk bewaart u het met de extensie .html.

Dichtbij het HTML -bestand maakt u de map img waarin u grafische elementen opneemt. Foto en pictogrammen. Identificeer deze elementen in de HTML -code. Voorbeeld: <img src="img/icon-email-10.png".../>.

Nadat u de handtekening hebt aangepast, opent u het HTML -bestand in de browser. Het resultaat moet vergelijkbaar zijn met de afbeelding vanaf het begin van de tutorial.

Hoe voeg je HTML -handtekening toe voor iPhone of iPad

Om de handtekening open en leesbaar voor ontvangers te laten zijn, moet deze worden gehost op een webserver of in een service cloud waarmee u HTML -bestandsupload en grafische elementen kunt gebruiken.

Ik heb de handtekening ingeschakeld Webadres.

E -mailhandtekening op web
E -mailhandtekening op web

Nadat de HTML -handtekening is gemaakt en online beschikbaar is, is de volgende stap om HTML -handtekening toe te voegen aan de e -mailaccounts op iPhone of iPad.

De tutorial is voor de e -mailaccounts die in de app zijn toegevoegd Mail Aanwezig op alle iPhone, iPad, MAC -apparaten.

1. Open “Settings“, rol dan naar boven “Mail“.

2. In de opties “Mail“, open “Signature“.

Hoe maak je een HTML -e -mailhandtekening voor iPhone of iPad
Hoe maak je een HTML -e -mailhandtekening voor iPhone of iPad

2. Open de weblink waarmee u de handtekening hebt en kopieert alle inhoud. U kunt dit doen vanuit Safari op iPhone- of iPad -apparaten. Met de functie Handoff ((Universeel klembord) Geactiveerd, kunt u de HTML -handtekening kopiëren van de Mac- of MacBook -computer.

Kopieer HTML -handtekening
Kopieer HTML -handtekening

3. Bewegen naar “Signature” en lipești (paste) Gekopieerde inhoud.

iPhone HTML -handtekening
iPhone HTML -handtekening

Na deze stap kun je zeggen dat je hebt geleerd om HTML -e -mail te maken en toe te voegen voor iPhone of iPad.

HTML -handtekening in iPhone -e -mail
HTML -handtekening

Verwant: Hoe doe je een HTML -handtekening met foto voor Outlook

Maak je geen zorgen als je merkt dat in punt 3 de tekst niet leesbaar is. De achtergrondkleur wordt gekopieerd uit de bron van de HTML -handtekening. Dus als de ontvanger de e -mailinterface op een thema heeft ingesteld “donker”, Uw bericht komt aan met een witte achtergrond.

Gepassioneerd over technologie schrijf ik met plezier op StealthSetts.com beginnend met 2006. Ik heb een rijke ervaring in besturingssystemen: macOS, Windows en Linux, maar ook in programmeertalen en blogplatforms (WordPress) en voor online winkels (WooCommerce, Magento, Presashop).

Home Uw bron van IT -tutorials, nuttige tips en nieuws. Hoe maak je een HTML -e -mailhandtekening voor iPhone of iPad
Laat een reactie achter