/ / วิธีสร้างอีเมล HTML: คำแนะนำทีละขั้นตอน

วิธีสร้างอีเมล HTML: คำแนะนำทีละขั้นตอน

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

ตัวอักษร HTML

คุณสมบัติของการสร้าง

คนสมัยใหม่ได้รับโดยเฉลี่ยทุกวัน5-6 และบางครั้งมากถึง 10 อีเมล ซึ่งหมายความว่าคุณมีเวลาเพียงไม่ถึงวินาทีในการดึงดูดความสนใจของผู้รับก่อนที่เขาจะเดินไปอ่านจดหมายฉบับต่อไป มิฉะนั้นการส่งอีเมล HTML ของคุณจะไม่ได้ผลอย่างสมบูรณ์และคุณจะเสียเวลาโดยเปล่าประโยชน์

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

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

เทมเพลตอีเมลควรเป็นอย่างไร

เมื่อจัดเรียงเอกสารที่มีไว้สำหรับส่งไปยังผู้ติดต่อควรปฏิบัติตามข้อกำหนดต่อไปนี้:

  • ควรทำให้แคบพอกล่าวคือไม่ควรเกินช่วงขนาด 500-600 พิกเซลซึ่งจะช่วยให้มั่นใจได้ว่าการแสดงข้อความและเนื้อหาอื่น ๆ บนอุปกรณ์ทุกประเภทจะถูกต้อง
  • คุณต้องใช้แบบอักษรที่ใหญ่พอสำหรับข้อมูลข้อความทั้งหมดเช่นเดียวกับบนอุปกรณ์ iOS ตัวอักษร HTML จะอ่านไม่สะดวกหากขนาดตัวอักษรน้อยกว่า 13 พิกเซล
  • องค์ประกอบที่สามารถคลิกได้ควรมีขนาดใหญ่เพียงพอและแยกออกจากลิงก์ที่ใกล้ที่สุด ในกรณีนี้ผู้รับสามารถเปิดใช้งานได้อย่างง่ายดายในการลองครั้งแรก

ส่งอีเมล HTML

การเตรียม

ก่อนที่จะพัฒนาอีเมล HTML คุณควรสร้างโฟลเดอร์ใหม่ในไดรฟ์ใดไดรฟ์หนึ่งและตั้งชื่อเช่น "Mailings" คุณต้องดาวน์โหลดและติดตั้ง Dreamweaver CS3 ผลิตภัณฑ์จาก Adobe นี้เป็นหนึ่งในเครื่องมือออกแบบเว็บไซต์ที่ง่ายกว่าและเหมาะอย่างยิ่งสำหรับการพัฒนารายชื่ออีเมล HTML

สร้างและบันทึกเอกสาร

ก่อนที่จะเขียนส่วนข้อความของจดหมายคุณต้อง:

  • เปิดโปรแกรมสร้าง HTML Dreamweaver CS3 (DW) ยอดนิยม
  • สร้างเอกสารโดยเลือก "Transitional HTML 4.01" เป็นประเภท
  • บันทึกไฟล์ด้วยนามสกุล ".html";
  • ค้นหาคำสั่งแก้ไขในเมนูด้านบน
  • ยกเลิกการเลือกช่องทำเครื่องหมาย "ใช้ CSS แทนแท็ก HTML"

คำแนะนำทีละขั้นตอน

ตอนนี้เรามาดูวิธีสร้างอีเมล HTML กัน สำหรับสิ่งนี้:

  • เปิดแท็บตามลำดับในเมนู"แทรก" และ "ตาราง" และตั้งค่าพารามิเตอร์ที่ต้องการของตาราง ตัวอย่างเช่น Rows - 2, Columns - 1, Width - 700, Heading - Top สามารถตั้งค่าเส้นขอบได้หรือคุณสามารถทำได้โดยไม่ต้องระบุเส้นขอบโดยระบุ 0
  • สร้างส่วนหัวของจดหมาย เนื่องจากข้อความ HTML มีไว้สำหรับผู้รับจำนวนมากดังนั้นให้ใช้โอเปอเรเตอร์ [first_name] แทนชื่อผู้รับที่ต้องการ
  • ในหน้าต่างด้านล่าง "Properties" ตั้งค่าพารามิเตอร์ที่ต้องการสำหรับแบบอักษรขนาดและสีของข้อความชื่อเรื่องและสีพื้นหลัง
  • "ออก" จากพื้นที่ชื่อเรื่อง ที่ด้านล่างของหน้าจอให้ตั้งค่าพารามิเตอร์สำหรับเคอร์เซอร์ "Center" และ "Middle"
  • เราแทรกข้อความสำเร็จรูปของตัวอักษรหรือ "เขียน" ลงในโปรแกรม DW โดยตรงโดยเลือกประเภทและขนาดของแบบอักษรที่ต้องการตลอดจนตำแหน่งของข้อความบนหน้า

การสร้างลิงค์ไฮเปอร์เท็กซ์

มาลองสร้างอีเมล HTML ให้มากขึ้นมืออาชีพและขั้นสูง เพื่อจุดประสงค์นี้เราจะซ่อนลิงก์ไฮเปอร์เท็กซ์ในเนื้อหา ในการดำเนินการนี้คุณต้องเลือกสถานที่ในข้อความที่คุณเลือกเป็นลิงก์ไฮเปอร์เท็กซ์ ที่มุมซ้ายที่ด้านบนของหน้าจอคุณควร "เปิด" ไอคอนที่เกี่ยวข้องและแทรกลิงก์ของคุณลงในหน้าต่างป๊อปอัป ในกรณีนี้อย่าลืมใส่เครื่องหมายในช่องทำเครื่องหมาย "_blank" เพื่อให้ลิงก์เปิดขึ้นในหน้าต่างใหม่และผู้รับหลังจากดูแล้วจะไม่สูญเสียสิทธิ์ในการเข้าถึงตัวอักษรหลัก

วิธีส่งอีเมล HTML

วิธีการแทรกรูปภาพ

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

เพื่อที่จะจัดการตอนจบที่ดีเช่นนี้:

  • แทรกที่ด้านล่างของตัวอักษรภายในตารางหลักอีกอันที่มี 3 คอลัมน์และพารามิเตอร์สำหรับเส้นขอบ 0 พิกเซล
  • วางเคอร์เซอร์ไว้ในตำแหน่งของตารางที่พวกเขาต้องการดูภาพ
  • ทำเครื่องหมายในหน้าต่างด้านล่าง "ตรงกลาง" และ "ตามขอบด้านบน" สำหรับแต่ละส่วน
  • เลือกแท็บ "แทรก" ในเมนูด้านบน
  • เราคลิกที่คำจารึก "รูปภาพ" และในเมนูแบบเลื่อนลงเราวางที่อยู่ที่เราคัดลอก
  • กด "ตกลง" 2 ครั้ง

ส่งอีเมล HTML

ดู

ตอนนี้คุณรู้วิธีสร้างอีเมล HTML แล้วคุณควรตรวจสอบให้แน่ใจว่าผู้รับเห็นในรูปแบบที่ถูกต้อง ในการดำเนินการนี้คุณต้องดูตัวอย่างงานศิลปะของคุณใน Dreamweaver CS3 ก่อนที่จะส่ง ในการดำเนินการนี้คุณต้องคลิกที่ไอคอนลูกโลกในเมนูตรงกลางด้านบน หากคำพูดพล่อยๆปรากฏบนหน้าจอแทนตัวอักษรคุณควรตั้งค่าการเข้ารหัสอัตโนมัติในการตั้งค่าเบราว์เซอร์ของคุณ

การเข้ารหัส

จากส่วน "โครงการ" และไปที่ส่วนรหัส - "รหัส" ในหน้าต่างที่เปิดขึ้นให้เลือกและคัดลอกทุกอย่างระหว่างแท็ก <body> และ </body> เราบันทึกไฟล์ จากนั้นวางโค้ด HTML

วิธีแทรก HTML ลงในอีเมล

การส่งอีเมล HTML

เพื่อให้จดหมายข่าวเปิด "Smartresponder" (SR) จากนั้น:

  • เลือกหรือสร้างจดหมายใหม่โดยกรอกบรรทัด "ชื่อ" และ "ที่อยู่ของผู้ส่ง"
  • กรอกบรรทัด "Subject of the letter";
  • ทำเครื่องหมายรหัส HTML ในเมนูด้านซ้ายบน
  • วางรหัสที่คัดลอกในโปรแกรมรหัส DW ลงในฟิลด์ "Source" ขนาดใหญ่
  • ตรวจสอบความถูกต้องของการแสดงผลโดยใช้เครื่องมือ "Preview"
  • ลบเวอร์ชันข้อความของจดหมาย
  • ทดสอบสแปมโดยใช้ปุ่มที่มีชื่อเดียวกันซึ่งอยู่ถัดจากปุ่ม "ส่ง"

เทมเพลตยอดนิยมหลายรายการ

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

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

อีเมล HTML

วิธีแทรก HTML ลงในอีเมล

ตอนนี้ให้เราพิจารณาปัญหาที่แตกต่างกันเล็กน้อย ในการแทรกโค้ด HTML ลงในอีเมลเช่น gmail โดยใช้เบราว์เซอร์ Google Chrome ดังตัวอย่างด้านล่างคุณจะต้อง:

  • กดปุ่ม "F12" หรือเลือกลำดับคำสั่งที่เหมาะสมในเมนู
  • ในหน้าต่างที่เปิดขึ้นพร้อมรหัสของหน้าไคลเอนต์ gmail ปัจจุบันค้นหาตำแหน่งที่ควรแทรกตัวอักษร HTML คลิกขวาและเลือก "แก้ไขเป็น HTML"
  • วางโค้ด HTML ที่คัดลอก
  • กดปุ่มสองปุ่ม "Ctrl" และ "Enter" ร่วมกัน

เพื่อจุดประสงค์เดียวกันคุณสามารถดาวน์โหลดไฟล์ง่ายๆได้ในรูปแบบโดยใช้โปรแกรม Mozilla thunderbird ด้วยความช่วยเหลือคุณสามารถสร้างจดหมายจากนั้นเลือกรายการ "แทรก" ก่อนแล้วเลือก "HTML" จากนั้นใส่รหัสไปรษณีย์ของคุณที่นั่น

เครื่องมือ

ปลั๊กอิน e-Newsletter WordPress ช่วยให้เพื่อจัดการการส่งจดหมายและสมาชิกอย่างมืออาชีพ ยิ่งไปกว่านั้นทั้งสองอย่างจะทำผ่านแผงผู้ดูแลระบบ WordPress สถานการณ์นี้ให้การควบคุมที่สมบูรณ์และไม่มีค่าใช้จ่ายใด ๆ ซึ่งเป็นข่าวดี

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

ตัวสร้างอีเมล HTML

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

ชอบ:
0
บทความยอดนิยม
การพัฒนาทางจิตวิญญาณ
อาหาร
Y