หากคุณติดอีเมล โดยเฉพาะอย่างยิ่งสำหรับธุรกิจ จากบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างลายเซ็นอีเมล HTML ทีละขั้นตอนสำหรับ iPhone หรือไอแพด
ลายเซ็นอีเมลธุรกิจ HTML ควรประกอบด้วย: ชื่อของคุณ ตำแหน่งภายในองค์กร ชื่อบริษัท โลโก้บริษัท รายละเอียดการติดต่อของคุณและบริษัท (โทรศัพท์ อีเมล ที่อยู่เว็บ)
ในแอปพลิเคชันอีเมลส่วนใหญ่เช่น Outlook, ลายเซ็น HTML ถูกเพิ่มโดยการใส่รหัส HTML ในช่องลายเซ็น สำหรับ iPhone หรือ iPad แตกต่างออกไปเล็กน้อย แต่ในทั้งสองกรณี คุณต้องมีลายเซ็น HTML
เนื้อหา
วิธีสร้างลายเซ็นอีเมล HTML สำหรับ iPhone หรือ iPad
ดังที่ฉันได้กล่าวไว้ข้างต้น ก่อนอื่นคุณต้องสร้างลายเซ็น HTML (หากคุณมีอยู่แล้ว คุณสามารถข้ามส่วนนี้ของบทช่วยสอนได้)
สร้างลายเซ็น HTML
ในตัวอย่างของฉัน ฉันทำ a ลายเซ็นอีเมล HTML สำหรับ iPhone สิ่งที่ง่ายกว่า ได้แก่ รูปภาพ (หรือโลโก้บริษัท) ไอคอนโซเชียลเน็ตเวิร์กพร้อมลิงก์ ชื่อและนามสกุล ฟังก์ชัน หมายเลขโทรศัพท์ ที่อยู่อีเมล และที่อยู่เว็บ
หากคุณต้องการเริ่มต้นจากสิ่งนี้ model ของลายเซ็น รหัส HTML เป็นดังนี้:
<!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>วิธีที่ง่ายที่สุดคือสร้างโฟลเดอร์สำหรับลายเซ็น คุณคัดลอกโค้ดนี้ลงในโปรแกรมแก้ไขข้อความหรือ HTML แล้วแก้ไขด้วยข้อมูลของคุณ ในตอนท้ายคุณบันทึกด้วยส่วนขยาย .html.
ถัดจากไฟล์ HTML คุณสร้างโฟลเดอร์ img ที่คุณรวมองค์ประกอบกราฟิก รูปภาพและไอคอน คุณระบุองค์ประกอบเหล่านี้ในรหัส HTML ของคุณ ตัวอย่าง: <img src="img/icon-email-10.png".../>.
หลังจากปรับแต่งลายเซ็นแล้ว ให้เปิดไฟล์ HTML ในเบราว์เซอร์ ผลลัพธ์ควรคล้ายกับภาพที่จุดเริ่มต้นของบทช่วยสอน
วิธีเพิ่มลายเซ็น HTML สำหรับ iPhone หรือ iPad
เพื่อให้ผู้รับสามารถเปิดและอ่านลายเซ็นได้ จะต้องโฮสต์บนเว็บเซิร์ฟเวอร์หรือบริการ cloud ซึ่งอนุญาตให้คุณอัปโหลดไฟล์ HTML และกราฟิก
ฉันใส่ลายเซ็นของฉัน ที่อยู่เว็บ.
หลังจากสร้างลายเซ็น HTML และพร้อมใช้งานออนไลน์แล้ว ขั้นตอนต่อไปคือการเพิ่มลายเซ็น HTML ให้กับบัญชีอีเมลของคุณบนอุปกรณ์ของคุณ iPhone หรือไอแพด
บทช่วยสอนนี้มีไว้สำหรับบัญชีอีเมลที่เพิ่มลงในแอป Mail มีอยู่ในอุปกรณ์ทั้งหมด iPhone, iPad, Mac.
1. เปิด "Settings" แล้วเลื่อนไปที่ "Mail"
2. ในตัวเลือก "Mail"เปิด"Signature"
2. เปิดเว็บลิงค์ที่คุณมีลายเซ็นและคัดลอกเนื้อหาทั้งหมด คุณสามารถทำได้จาก Safari อุปกรณ์ iPhone หรือไอแพด ด้วยฟังก์ชั่น Handoff (Universal Clipboard) เปิดใช้งาน คุณสามารถคัดลอกลายเซ็น HTML จากคอมพิวเตอร์ของคุณ Mac หรือ Macหนังสือ.
3. กลับไปที่ “Signature” และวาง (paste) เนื้อหาที่คัดลอก
หลังจากขั้นตอนนี้ คุณสามารถพูดได้ว่าคุณได้เรียนรู้วิธีสร้างและเพิ่มลายเซ็นอีเมล HTML สำหรับ iPhone หรือไอแพด
ที่เกี่ยวข้อง วิธีสร้างลายเซ็น HTML พร้อมรูปภาพสำหรับ Outlook
ไม่ต้องกังวลหากคุณสังเกตว่าในข้อ 3 ข้อความนั้นอ่านไม่ออก สีพื้นหลังจะถูกคัดลอกจากแหล่งที่มาของลายเซ็น HTML ดังนั้น หากผู้รับตั้งค่าส่วนต่อประสานอีเมลเป็นธีม "มืด" ข้อความของคุณจะมาพร้อมกับพื้นหลังสีขาว
