Kako napraviti HTML potpis za e-poštu iPhone ili iPad

Ako ste ovisni o e-pošti, posebno poslovnoj, iz ovog vodiča naučit ćete korak po korak kako stvoriti HTML potpis e-pošte za iPhone ili iPad.

HTML potpis poslovne e-pošte trebao bi sadržavati: vaše ime, položaj u organizaciji, naziv tvrtke, logo tvrtke, vaše i kontakt podatke tvrtke (telefon, e-mail, web adresa).

U većini aplikacija za e-poštu poput Outlook, HTML potpisi dodaju se umetanjem koda HTML u polje za potpis. Za iPhone ili iPad malo je drugačiji, međutim, u oba slučaja potreban vam je HTML potpis.

Kako napraviti HTML potpis za e-poštu iPhone ili iPad

Kao što sam rekao gore, prvo morate napraviti HTML potpis (ako ga već imate, možete preskočiti ovaj dio tutoriala).

Stvorite HTML potpis

U mom primjeru učinio sam a HTML potpis e-pošte za iPhone nešto jednostavnije, što uključuje: sliku (ili logo tvrtke), ikone društvenih mreža s linkom, imenom i prezimenom, funkcijom, telefonskim brojem, e-mail i web adresom.

HTML potpis e-pošte za iPhone
HTML potpis

Ako želite krenuti od ovoga model potpisa, HTML kôd je sljedeći:

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

Najjednostavnije je napraviti mapu za potpis. Ovaj kôd kopirate u uređivač teksta ili HTML-a, a zatim ga modificirate svojim podacima. Na kraju ga spremite s ekstenzijom .html.

Pored HTML datoteke kreirate mapu img u koje uključujete grafičke elemente. Slika i ikone. Ove elemente identificirate u svom HTML kodu. Primjer: <img src="img/icon-email-10.png".../>.

Nakon što ste prilagodili svoj potpis, otvorite HTML datoteku u svom pregledniku. Rezultat bi trebao biti sličan slici na početku vodiča.

Kako dodati HTML potpis za iPhone ili iPad

Kako bi potpis bio otvoren i čitljiv od strane primatelja, mora biti smješten na web poslužitelju ili usluzi cloud koji vam omogućuje učitavanje HTML datoteka i grafike.

Ja sam stavio svoj potpis Web adresa.

Potpis e-pošte na webu
Potpis e-pošte na webu

Nakon što je HTML potpis izrađen i dostupan na mreži, sljedeći korak je dodavanje HTML potpisa vašim računima e-pošte na vašim uređajima iPhone ili iPad.

Vodič je za račune e-pošte dodane u aplikaciju Mail prisutan na svim uređajima iPhone, iPad, Mac.

1. Otvori "Settings" zatim dođite do "Mail".

2. U opcijama "Mail"otvoren"Signature".

Kako napraviti HTML potpis za e-poštu iPhone ili iPad
Kako napraviti HTML potpis za e-poštu iPhone ili iPad

2. Otvorite web poveznicu na koju imate potpis i kopirajte sav sadržaj. To možete učiniti iz Safari Uređaji iPhone ili iPad. Uz funkciju Handoff (Universal Clipboard) omogućeno, možete kopirati HTML potpis sa svog računala Mac ili MacKnjiga.

Kopiraj HTML potpis
Kopiraj HTML potpis

3. Vratite se na "Signature” i zalijepi (paste) kopirani sadržaj.

iPhone HTML potpis
iPhone HTML potpis

Nakon ovog koraka možete reći da ste naučili kako stvoriti i dodati HTML potpis e-pošte za iPhone ili iPad.

HTML potpis u iPhone e-mail
HTML potpis

Povezano: Kako napraviti HTML potpis sa slikom za Outlook

Ne brinite ako primijetite da u točki 3 tekst nije čitljiv. Boja pozadine bit će kopirana iz izvora HTML potpisa. Dakle, ako primatelj ima sučelje e-pošte postavljeno na "tamnu" temu, vaša će poruka stići s bijelom pozadinom.

Strastveni zaljubljenik u tehnologiju, s veseljem pišem na StealthSettings.com od 2006. godine. Imam bogato iskustvo s operativnim sustavima: macOS, Windows i Linux, kao i s programskim jezicima i platformama za bloganje (WordPress) i za internetske trgovine (WooCommerce, Magento, PrestaShop).

kako » iHowTo » iHowTo - iOS » Kako napraviti HTML potpis za e-poštu iPhone ili iPad
Ostavite komentar