home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> อีเมล

สร้างเทมเพลตอีเมล HTML ที่ตอบสนอง:คู่มือเริ่มต้นทีละขั้นตอน

สร้างเทมเพลตอีเมล HTML ที่ตอบสนอง:คู่มือเริ่มต้นทีละขั้นตอน

ในคู่มือที่เหมาะสำหรับผู้เริ่มต้นนี้ คุณจะได้เรียนรู้วิธีสร้างเทมเพลตอีเมลแบบโต้ตอบ คุณจะปฏิบัติตามคำแนะนำทีละขั้นตอนพร้อมข้อมูลโค้ดเพื่อออกแบบเทมเพลตอีเมลที่ดูดีบนอุปกรณ์ทุกชนิด

โปรเจ็กต์นี้เหมาะสำหรับผู้มาใหม่ที่กระตือรือร้นที่จะเชี่ยวชาญพื้นฐานการออกแบบอีเมล!

ขั้นตอนที่ 1:ตั้งค่าโครงสร้างพื้นฐาน

หากต้องการสร้างเทมเพลตอีเมล คุณสามารถเริ่มต้นด้วยโครงสร้าง HTML พื้นฐาน ซึ่งรวมถึง 06 ประกาศสำหรับอีเมล ซึ่งกำหนด 11 และ 25 และใช้เมตาแท็กใน 38 ส่วนเพื่อให้แน่ใจว่ามีการเรนเดอร์และซูมมือถืออย่างเหมาะสม

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Responsive Email Template</title>
</head>
<body>
 <!-- Email content goes here -->
</body>
</html>

ขั้นตอนที่ 2:สร้างโครงสร้างอีเมล

ใช้ตารางเพื่อสร้างโครงสร้างพื้นฐานของอีเมลของคุณ สิ่งนี้จะช่วยให้มั่นใจถึงความเข้ากันได้กับไคลเอนต์อีเมลที่แตกต่างกัน

<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="center">
 <table width="600" cellpadding="0" cellspacing="0" border="0">
 <!-- Email content goes here -->
 </table>
 </td>
 </tr>
</table>

ขั้นตอนที่ 3:เพิ่มเนื้อหาและสไตล์อินไลน์

โปรแกรมรับส่งอีเมลจะแตกต่างกันไปตามวิธีแสดงผล CSS ดังนั้นจึงปลอดภัยกว่าหากใช้สไตล์อินไลน์ นี่คือตัวอย่างเนื้อหาอีเมลแบบง่าย:

<body style="font-family: 'Poppins', Arial, sans-serif">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td align="center" style="padding: 20px;">
 <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
 <!-- Header -->
 <tr>
 <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
 Responsive Email Template
 </td>
 </tr>
 <!-- Body -->
 <tr>
 <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
 Hello, All! <br>
 Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
 <br><br>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis. 
 </td>
 </tr>
 <!-- Call to action Button -->
 <tr>
 <td style="padding: 0px 40px 0px 40px; text-align: center;">
 <!-- CTA Button -->
 <table cellspacing="0" cellpadding="0" style="margin: auto;">
 <tr>
 <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
 <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. 
 </td>
 </tr>
 <!-- Footer -->
 <tr>
 <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
 Copyright &copy; 2024 | Your brand name
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
</body>

ต่อไปนี้เป็นรายละเอียดองค์ประกอบหลักและฟังก์ชัน:

การตั้งค่าแท็กเนื้อหาและแบบอักษร

<body style="font-family: 'Poppins', Arial, sans-serif">

นี่เป็นการตั้งค่าแบบอักษรเริ่มต้นสำหรับอีเมลเป็น 'Poppins' โดยจะใช้ทางเลือก Arial และ sans-serif หากไม่มี 'Poppins'

โครงสร้างตาราง

<table width="100%" border="0" cellspacing="0" cellpadding="0">

นี่คือตารางด้านนอกสุดที่ใช้พื้นที่ 100% ของความกว้างของอีเมล 40 , 57 และ 60 ถูกตั้งค่าเป็น 0 เพื่อลบสไตล์และการเว้นวรรคเริ่มต้น

ซ้อนอยู่ภายในตารางนี้มีอีก 77 ด้วยความกว้างคงที่ 600px โดยมีศูนย์กลางเป็นพาเรนต์ด้วย 88 .

ตารางด้านในนี้มีเส้นขอบและสไตล์เฉพาะ โดยกำหนดให้เป็นพื้นที่เนื้อหาหลัก

ส่วนหัวได้รับการออกแบบด้วยพื้นหลังสีน้ำเงินเข้มโดยใช้ CSS แบบอินไลน์ (#345C72) สีข้อความสีขาว และขนาดตัวอักษรที่ใหญ่ขึ้น (24px) ได้รับการออกแบบมาเพื่อดึงดูดความสนใจตั้งแต่ต้นอีเมล

หมายเหตุ : คุณสามารถปรับแต่งส่วนนี้ด้วยชื่อแบรนด์หรือโลโก้ของคุณแทนได้

เนื้อหาเนื้อหา

ส่วนเนื้อหาประกอบด้วยข้อความหลักของอีเมล กำหนดขนาดตัวอักษร 16px และความสูงของบรรทัด 1.6 เพื่อให้อ่านง่ายขึ้น เนื้อหาจัดชิดซ้ายและใช้ 93 แท็กช่วยในการเว้นระยะห่างบรรทัด

ปุ่มกระตุ้นการตัดสินใจ (CTA)

<!-- Call to action Button -->
 <tr>
 <td style="padding: 0px 40px 0px 40px; text-align: center;">
 <!-- CTA Button -->
 <table cellspacing="0" cellpadding="0" style="margin: auto;">
 <tr>
 <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
 <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>

ปุ่ม CTA ที่นี่ออกแบบให้โดดเด่นด้วยสีพื้นหลังที่ตรงกับส่วนหัว มุมโค้งมน (101 ) และข้อความตัวหนาสีขาว

110 แท็กภายในปุ่มได้รับการออกแบบเพื่อลบการขีดเส้นใต้เริ่มต้น (129 ) และเชื่อมโยงกับหน้าเว็บที่ผู้รับสามารถ "จองคำปรึกษาฟรี"

ส่วนท้ายทำซ้ำแนวทางการจัดสไตล์ของส่วนหัว แต่ใช้พื้นหลังที่เข้มกว่า (#333333) และขนาดตัวอักษรที่เล็กกว่า (14px) อาจมีข้อมูลลิขสิทธิ์และลิงก์หรือรายละเอียดการติดต่ออื่น ๆ

ภาพประกอบ

สร้างเทมเพลตอีเมล HTML ที่ตอบสนอง:คู่มือเริ่มต้นทีละขั้นตอน ภาพประกอบส่วนต่างๆ ของเทมเพลต:ส่วนหัว ปุ่ม CTA และส่วนท้าย

ขั้นตอนที่ 4:ทำให้ตอบสนอง

เพื่อให้แน่ใจว่าอีเมลจะดูดีบนอุปกรณ์เคลื่อนที่ คุณสามารถใช้คำสั่งสื่อ CSS ได้ แม้ว่าสไตล์ส่วนใหญ่จะเป็นแบบอินไลน์ แต่สำหรับพฤติกรรมแบบตอบสนอง คุณจะต้องเพิ่ม 133 บล็อกใน 142 .

ข้อความค้นหาสื่อจะปรับสไตล์ตามความกว้างของอุปกรณ์

<style>
 @media screen and (max-width: 600px) {
 .content {
 width: 100% !important;
 display: block !important;
 padding: 10px !important;
 }
 .header, .body, .footer {
 padding: 20px !important;
 }
 }
</style>

ต่อไปนี้คือรายละเอียดของโค้ด CSS เฉพาะนี้:

@media screen and (max-width: 600px) { ... }

คิวรีสื่อนี้กำหนดเป้าหมายหน้าจอที่มีความกว้างสูงสุด 600 พิกเซล โดยจะใช้สไตล์ต่อไปนี้เฉพาะเมื่อมีการดูอีเมลบนอุปกรณ์ที่มีความกว้างหน้าจอ 600px หรือน้อยกว่า ซึ่งโดยทั่วไปจะรวมถึงสมาร์ทโฟนและแท็บเล็ตขนาดเล็กบางรุ่น

สไตล์ภายในคลาสคิวรีสื่อ:

.เนื้อหา

  • 157 :สไตล์นี้เปลี่ยนความกว้างของ 161 ตารางเพื่อใช้ความกว้างเต็มของหน้าจอแทน 600px ที่ระบุใน HTML 175 กฎใช้เพื่อแทนที่รูปแบบอื่นๆ ที่ขัดแย้งกัน
  • 187 :แม้ว่า 196 องค์ประกอบเป็นองค์ประกอบระดับบล็อกโดยธรรมชาติ การตั้งค่า 208 สามารถช่วยไคลเอ็นต์อีเมลบางตัวได้อย่างชัดเจนเพื่อให้แน่ใจว่าองค์ประกอบทำงานตามที่คาดไว้
  • 219 :เพิ่มช่องว่างภายในเนื้อหาภายใน 222 ตาราง ซึ่งลดขนาดจากเดิม 40px ใน HTML เพื่อใช้ประโยชน์จากพื้นที่หน้าจอที่ลดลงบนอุปกรณ์ขนาดเล็กได้ดีขึ้น

.header, .body, .footer

  • 236 :สไตล์นี้จะตั้งค่าช่องว่างภายในของ ส่วนหัว เนื้อหา และส่วนท้าย อย่างสม่ำเสมอ ส่วนเป็น 20px ทุกด้าน เพิ่มประสิทธิภาพระยะห่างสำหรับหน้าจอขนาดเล็ก โดยจะแทนที่การตั้งค่าช่องว่างภายในต่างๆ ที่กำหนดไว้ใน HTML ซึ่งรวมถึงค่าที่มากกว่าในบางกรณี

ในบริบทของการออกแบบอีเมล การใช้ !important เป็นเรื่องปกติในการตรวจสอบให้แน่ใจว่ามีการใช้สไตล์ตามที่ตั้งใจไว้ โดยแทนที่ทั้งสไตล์เริ่มต้นและสไตล์อื่นๆ ที่อาจขัดแย้งกันซึ่งอาจใช้โดยโปรแกรมรับส่งเมลเอง

ขั้นตอนที่ 5:ทดสอบกับไคลเอนต์อีเมล

การทดสอบเทมเพลตอีเมลของคุณกับไคลเอนต์อีเมลต่างๆ (เช่น Gmail, Outlook และ Apple Mail) และอุปกรณ์ต่างๆ ถือเป็นสิ่งสำคัญ เพื่อให้มั่นใจถึงความเข้ากันได้และการตอบสนอง เครื่องมืออย่าง Litmus หรือ Email on Acid สามารถช่วยได้

ขั้นตอนที่ 6:การเพิ่มแบบอักษร Google

การรวม Google Fonts เข้ากับเทมเพลตอีเมล HTML สามารถปรับปรุงรูปลักษณ์ที่น่าดึงดูดได้อย่างมาก

อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือไม่ใช่ทุกโปรแกรมรับส่งเมลที่รองรับแบบอักษรบนเว็บ บางตัวเช่น Apple Mail รองรับ Google Fonts แต่บางตัวเช่น Gmail ไม่รองรับ เพื่อให้แน่ใจว่าอีเมลของคุณดูดีสำหรับผู้รับทุกคน โปรดเตรียมแบบอักษรสำรองไว้เสมอ

ต่อไปนี้คือวิธีที่คุณสามารถเพิ่มแบบอักษร Google ลงในเทมเพลตอีเมลของคุณ พร้อมด้วยตัวเลือกทางเลือกสำหรับลูกค้าที่ไม่สนับสนุน:

เลือกแบบอักษร Google ของคุณ

ขั้นแรก ให้ไปที่เว็บไซต์ Google Fonts และเลือกแบบอักษร สำหรับตัวอย่างนี้ ให้ใช้ "Poppins"

เพิ่มลิงก์แบบอักษรไปที่ส่วนหัวอีเมลของคุณ

รวมลิงก์ไปยังแบบอักษรของ Google ไว้ใน 246 ของเอกสาร HTML ของคุณ เนื่องจากสิ่งนี้อาจไม่ได้รับการสนับสนุนในไคลเอนต์อีเมลทั้งหมด ตรวจสอบให้แน่ใจว่าคุณมีแบบอักษรทางเลือกที่เหมาะสมในสไตล์ของคุณ

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

ใช้แบบอักษรในสไตล์ของคุณ

ใช้ CSS แบบอินไลน์เพื่อใช้แบบอักษรของ Google กับองค์ประกอบ HTML ของคุณและรวมแบบอักษรสำรองทั่วไปไว้ด้วยเสมอ ในเทมเพลตอีเมล การใช้สไตล์แบบอินไลน์จะปลอดภัยกว่าเนื่องจากมีการรองรับ 258 ที่แตกต่างกัน แท็กในไคลเอนต์อีเมล

ต่อไปนี้คือวิธีการใช้แบบอักษรกับ 260 ของอีเมลของคุณและใส่ทางเลือก:

<body style="font-family: 'Poppins', Arial, sans-serif;">
 <table width="100%" cellspacing="0" cellpadding="0">
 <!-- Email content -->
 </table>
</body>

สิ่งที่เราสร้างขึ้น

ด้านล่างนี้คือภาพหน้าจอของเทมเพลตอีเมลที่เราออกแบบ มันมีเค้าโครงแบบมืออาชีพพร้อมส่วนหัวที่มีตัวยึดโลโก้ ส่วนเนื้อหาหลักสำหรับข้อความของคุณ และส่วนท้ายสีเข้มพร้อมลิงก์การจัดการผู้ติดต่อและการสมัครรับข้อมูล

สร้างเทมเพลตอีเมล HTML ที่ตอบสนอง:คู่มือเริ่มต้นทีละขั้นตอน ภาพหน้าจอของเทมเพลตอีเมล

เคล็ดลับเพิ่มเติม:

  • เก็บ CSS ของคุณไว้ในบรรทัดให้มากที่สุดเท่าที่จะเป็นไปได้ เนื่องจากโปรแกรมรับส่งเมลจำนวนมากไม่รองรับ 279 แท็ก
  • ใช้แบบอักษรที่ปลอดภัยบนเว็บเพื่อให้แน่ใจว่าข้อความของคุณปรากฏอย่างถูกต้องในไคลเอนต์อีเมลทั้งหมด
  • จัดเตรียมอีเมลในรูปแบบข้อความธรรมดาเสมอสำหรับลูกค้าที่ไม่สนับสนุน HTML หรือปิดใช้งาน HTML

ฉันหวังว่าคู่มือนี้จะช่วยให้คุณมีกรอบพื้นฐานสำหรับการสร้างเทมเพลตอีเมลที่ตอบสนองได้ เมื่อคุณคุ้นเคยกับการออกแบบอีเมลมากขึ้นแล้ว คุณสามารถทดลองใช้เค้าโครงและสไตล์ที่ซับซ้อนมากขึ้นได้

ขอให้สนุกกับการเขียนโค้ด!

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น