Jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad

Pokud jste závislí na e-mailech, zejména pro podnikání, z tohoto tutoriálu se krok za krokem naučíte, jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad.

HTML podpis obchodního e-mailu by měl obsahovat: vaše jméno, pozici v organizaci, název společnosti, logo společnosti, vaše a firemní kontaktní údaje (telefon, e-mail, webová adresa).

Ve většině e-mailových aplikací, jako je Outlook, HTML podpisy se přidávají vložením kódu HTML v poli podpisu. Pro iPhone nebo iPad je trochu jiný, ale v obou případech potřebujete podpis HTML.

Jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad

Jak jsem řekl výše, nejprve musíte vytvořit HTML podpis (pokud jej již máte, můžete tuto část tutoriálu přeskočit).

Vytvořte podpis HTML

V mém příkladu jsem udělal a HTML podpis e-mailu pro iPhone něco jednoduššího, kam patří: obrázek (nebo logo firmy), ikony sociální sítě s odkazem, jméno a příjmení, funkce, telefonní číslo, emailová adresa a webová adresa.

HTML podpis e-mailu pro iPhone
HTML podpis

Pokud chcete začít od tohoto model podpisu je HTML kód následující:

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

Nejjednodušší je vytvořit složku pro podpis. Tento kód zkopírujete do textového nebo HTML editoru a poté jej upravíte svými daty. Nakonec jej uložíte s příponou .html.

Vedle souboru HTML vytvořte složku img do kterého zahrnete grafické prvky. Obrázek a ikony. Tyto prvky identifikujete ve svém HTML kódu. Příklad: <img src="img/icon-email-10.png".../>.

Po přizpůsobení podpisu otevřete soubor HTML v prohlížeči. Výsledek by měl být podobný obrázku na začátku tutoriálu.

Jak přidat HTML podpis pro iPhone nebo iPad

Aby byl podpis otevřený a čitelný pro příjemce, musí být umístěn na webovém serveru nebo službě cloud který vám umožňuje nahrávat soubory HTML a grafiku.

Dal jsem svůj podpis Webová adresa.

E-mailový podpis na webu
E-mailový podpis na webu

Poté, co byl podpis HTML vytvořen a je dostupný online, je dalším krokem přidání podpisu HTML do vašich e-mailových účtů na vašich zařízeních. iPhone nebo iPad.

Výukový program je pro e-mailové účty přidané do aplikace Mail přítomen na všech zařízeních iPhoneiPad Mac.

1. Otevřít "Settings"potom přejděte na"Mail".

2. V možnostech "Mail"OTEVŘENO"Signature".

Jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad
Jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad

2. Otevřete webový odkaz, na který máte podpis, a zkopírujte veškerý obsah. Můžete to udělat z Safari zařízení iPhone nebo iPad. S funkcí Handoff (Universal Clipboard), můžete zkopírovat HTML podpis z vašeho počítače Mac nebo MacRezervovat.

Zkopírujte HTML podpis
Zkopírujte HTML podpis

3. Vraťte se na „Signature“ a vložte (paste) zkopírovaný obsah.

iPhone HTML podpis
iPhone HTML podpis

Po tomto kroku můžete říci, že jste se naučili vytvářet a přidávat HTML e-mailový podpis pro iPhone nebo iPad.

HTML podpis v iPhone e-mail
HTML podpis

Související: Jak vytvořit HTML podpis s obrázkem pro Outlook

Nebojte se, pokud si všimnete, že v bodě 3 není text čitelný. Barva pozadí bude zkopírována ze zdroje podpisu HTML. Pokud má tedy příjemce e-mailové rozhraní nastaveno na „tmavé“ téma, vaše zpráva mu dorazí s bílým pozadím.

Věnovaný technologiím, s radostí píši na StealthSettings.com od roku 2006. Mám bohaté zkušenosti s operačními systémy: macOS, Windows a Linux, stejně jako s programovacími jazyky a platformami pro blogování (WordPress) a pro online obchody (WooCommerce, Magento, PrestaShop).

jak na to » iHowTo » iHowTo - iOS » Jak vytvořit HTML e-mailový podpis pro iPhone nebo iPad
Zanechat komentář