สร้างหน้าแลนดิ้งเพจสำหรับขาย

บทนำ

เคยอยากออกแบบส่วนของหน้าแลนดิ้งเพจที่สวยงามและตอบสนองต่อทุกอุปกรณ์ — โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียวไหม? ด้วย Selldone Plugin ใน ChatGPT ความฝันนั้นทำได้จริงแล้ว

ในคู่มือนี้ คุณจะได้เรียนรู้ทีละขั้นตอนว่าจากภาพเป็นแรงบันดาลใจ จะนำไปสู่การสร้างส่วนหน้า (section) ที่ตอบสนองเต็มรูปแบบภายใน Selldone Page Builder ได้อย่างไร — ทั้งหมดขับเคลื่อนด้วย AI

เมื่อจบแล้ว คุณจะมีส่วนหน้าที่ออกแบบอย่างมืออาชีพพร้อมเผยแพร่บนเว็บไซต์ Selldone ของคุณได้ทันที

💡 หมายเหตุ: Selldone’s Page Builder สร้างบน Vuetify (Vue 3) — ดังนั้นทุกส่วนที่ปลั๊กอินสร้างจะเข้ากันได้ดีเยี่ยมกับเฟรมเวิร์กหน้าเว็บไซต์สมัยใหม่และตอบสนองของ Selldone

ขั้นตอนที่ 1 6 เตรียมแรงบันดาลใจของคุณ

เพื่อเริ่ม ให้ค้นหาการออกแบบส่วนที่เป็นแรงบันดาลใจสำหรับคุณ ในบทช่วยสอนนี้ เราใช้ส่วนจากหน้าหลักของ Shopee เป็นแบบอ้างอิง — เลย์เอาต์สะอาดทันสมัยที่โชว์สินค้าตัวเด่นด้วยภาพชัดเจนและปุ่มเรียกร้องให้ทำงาน (CTA) ที่ชัดเจน

จับภาพหน้าจอของส่วน Shopee นั้นไว้ เราจะใช้เป็นภาพอ้างอิงใน ChatGPT เมื่อต้องการให้ปลั๊กอิน Selldone สร้างการออกแบบแบบกำหนดเองให้เรา

💡 เคล็ดลับ: เลือกส่วนที่มีโครงสร้างและสมดุลทางสายตา ยิ่งการออกแบบชัดเจน ChatGPT จะยิ่งวิเคราะห์และทำซ้ำได้ดียิ่งขึ้น

⚠️ คำเตือนการใช้เพื่อการศึกษา: ภาพหน้าจอของ Shopee ที่ใช้ในที่นี้มีเพื่อการศึกษาและเป็นตัวอย่างเท่านั้น เครื่องหมายการค้า ภาพ และเลย์เอาต์เป็นของ Shopee และบทช่วยสอนนี้ไม่ได้มีความเกี่ยวข้องหรือได้รับการรับรองจาก Shopee

ขั้นตอนที่ 2 6 เปิด ChatGPT พร้อมปลั๊กอิน Selldone

ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งาน Selldone Plugin ใน ChatGPT แล้ว:

1. ไปที่ ChatGPT → Settings → Beta Features → Plugins แล้วเปิดใช้งาน plugins.
2. เข้าไปที่ Plugin Store แล้วติดตั้ง Selldone Plugin.
3. เริ่มแชทใหม่โดยเปิดใช้งานปลั๊กอิน

คุณควรเห็นโลโก้ Selldone ข้างช่องแชทของคุณ — นั่นหมายความว่าพร้อมใช้งานแล้ว

ขั้นตอนที่ 3 6 อัปโหลดภาพอ้างอิงของคุณ

อัปโหลดภาพหน้าจอของคุณและพิมพ์คำสั่งที่ชัดเจน ตัวอย่างเช่น:

จากเมนูด้านบน ให้แน่ใจว่าคุณใช้เวอร์ชันล่าสุดของ ChatGPT

“ฉันต้องการสร้างส่วนแบบภาพนี้ โดยให้มีขนาดฟอนต์ตอบสนองได้ ปรับฟอนต์และสีการ์ดได้ และการ์ดสามารถเป็นวงกลมหรือสี่เหลี่ยมมุมมนได้”

ChatGPT (พร้อม Selldone) จะวิเคราะห์ภาพและสร้างโค้ดที่อิง Vuetify (Vue 3) ซึ่งเข้ากันได้เต็มที่กับ Selldone’s Page Builder

สร้างหน้าแลนดิ้งเพจใหม่ใน Selldone

ก่อนจะเพิ่มส่วนที่กำหนดเอง ให้เราสร้างหน้าแลนดิ้งเพจเปล่าๆ ใน Selldone เพื่อใช้งานก่อน

1. จากเมนูด้านบนของสโตร์ ไปที่ Pages → Landing → Add New Landing.
   
2. บนหน้าจอนี้ คุณจะเห็นเทมเพลตหน้าแลนดิ้งเพจเริ่มต้นสามแบบ
3. คลิกเลือกหนึ่งในนั้นเพื่อเข้าสู่ Landing Page Designer. ภายในดีไซน์เนอร์ ให้เปิดพาเนลด้านซ้าย หาองค์ประกอบ “Code” แล้วลากมาวางบนพื้นที่ Page Builder องค์ประกอบ “Code” นี้คือที่ที่คุณจะวางหรืออิมพอร์ตส่วนที่ ChatGPT สร้างให้ผ่าน Selldone Plugin
4. คลิกภายในกล่อง Code เพื่อเปิดใช้ทูลบาร์— คุณจะเห็นทูลบาร์ด้านบนปรากฏขึ้น ซึ่งเราจะใช้บ่อย

-ไอคอนตัวแรก (<>) จะเปิด Code Editor ซึ่งคุณ สามารถวางหรือแก้ไขโค้ด HTML และโค้ดที่อิง Vue ที่ ChatGPT สร้างให้ได้-ไอคอนตัวที่สองจะเปิด Properties เพื่อให้คุณ ปรับเลย์เอาต์ ช่องว่าง และการตั้งค่าทางสายตาของส่วนได้

ขั้นตอนที่ 4 6 คัดลอกโค้ดเริ่มต้นจาก ChatGPT เข้าไปใน Editor

อาจเป็นเวอร์ชันที่ผิด

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

“ให้โฟกัสที่ภาพที่ฉันส่งข้างบน ฉันส่งอีกครั้งนะครับ/ค่ะ”

ตอนนี้ ChatGPT จะเริ่มใหม่และสร้างโค้ดเวอร์ชันใหม่ เวอร์ชันนี้ก็อาจยังไม่ใช่เวอร์ชันสุดท้าย เพราะคุณอาจยังต้องการขอแก้ไขเพิ่มเติมตอนนี้ คัดลอกโค้ด แล้ววางลงใน code editor แล้วกด Apply:

ข้อสำคัญ: โหมดเริ่มต้นของ code editor คือ HTML. คุณต้องเปลี่ยนเป็นตัวเลือก Vue — ถ้าไม่เปลี่ยน คุณจะได้ผลลัพธ์เป็นหน้าว่าง

ตอนนี้คุณจะเห็นเวอร์ชันแรกที่ถูกต้องของส่วนที่ ChatGPT สร้างให้แล้ว กดไอเทมที่สองในทูลบาร์ (ตามที่กล่าวก่อนหน้า) เพื่อเปิดเมนู Properties สำหรับปรับแต่ง. คุณจะเห็นการตั้งค่าหลายอย่างที่ช่วยให้คุณปรับแต่งส่วนนี้ให้เหมาะกับธุรกิจของคุณ

ตัวเลือก RESET TO DEFAULT:

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

ขั้นตอนที่ 5 6 ปรับแต่งส่วน

ChatGPT โดยเรียนรู้จากผู้ใช้คนอื่นๆ ที่ใช้วิธีนี้สร้างส่วนต่างๆ จะสร้างเลย์เอาต์ที่ครอบคลุมมากขึ้น — ดังนั้นคุณไม่จำเป็นต้องขอทุกองค์ประกอบทีละอย่าง นี่คือประโยชน์จริงของการคุยกับมันมากขึ้น: โค้ดที่สร้างขึ้นโดยเริ่มต้นตอบสนองได้ค่อนข้างดีแล้ว แต่คุณยังสามารถปรับรายละเอียด เช่น ขนาดฟอนต์ น้ำหนักฟอนต์ ความสูง/ความกว้างของ section หรือการ์ด และองค์ประกอบทางสายตาอื่นๆ ตามต้องการ
ตัวอย่างเช่น คุณสามารถตั้งค่าให้ Selldone แสดง 8 การ์ดต่อแถวบนหน้าจอเดสก์ท็อปขนาดใหญ่, 4 การ์ดบนแท็บเล็ต และ 2 การ์ดบนมือถือได้
มาดูกันว่า ChatGPT จะตีความและนำการปรับเหล่านี้ไปใช้ได้อย่างไร — เราอาจต้องแก้ไขหรือขอปรับเพิ่มเติมในขั้นตอนถัดไปในกรณีนี้ คุณควรเปลี่ยน Section Max Width เป็น 1400px เพื่อเลย์เอาต์ที่ดีกว่า คุณยังสามารถ ตั้งค่าจำนวนการ์ดต่อแถวเป็น 8, 4 และ 2 สำหรับเดสก์ท็อป แท็บเล็ต และมือถือ ตามลำดับ
เพื่อปรับช่องว่างให้ดีขึ้น ลองลด Cards Gap (Desktop) ลงมาที่ประมาณ 12px. นอกจากนี้ คุณอาจลดความสูงของการ์ดจาก 180px เป็น 160px หรือปรับขนาดรูปภาพให้เข้ากับการออกแบบ

ควรจำไว้ว่า คุณสามารถปรับรูปลักษณ์ได้ง่ายๆ โดยทดลองกับตัวเลขเหล่านี้ ลองเล่นจนเจอค่าที่เหมาะกับสไตล์ของคุณ

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

หลังจากอัปโหลดรูป แก้ไขข้อความ และจัดการทุกอย่างเรียบร้อยแล้ว ให้คลิกปุ่มบันทึก — หรือกด Ctrl + S บน Windows เพื่อบันทึกทันที
ถึงเวลาที่จะเปิดหน้า Live เพื่อดูส่วนของคุณทำงานจริงแล้ว
เพื่อดูแบบสด คุณสามารถใช้ตัวเลือก Live Preview หรือกดปุ่มข้างๆ ที่แสดงชื่อหน้าแลนดิ้งของคุณ — นี่จะเปิดหน้าในมุมมองผู้ซื้อ เหมือนที่ผู้เยี่ยมชมจะเห็น แต่ เราไม่แนะนำให้ใช้ Live Preview เพื่อตรวจสอบเวอร์ชันสุดท้ายเสมอไป เนื่องจากมันอาจไม่สะท้อนความตอบสนองบนอุปกรณ์ต่างๆ อย่างครบถ้วน — ซึ่งเราจะอธิบายเพิ่มเติมด้านล่าง

นี่คือผลลัพธ์ของโค้ด ตอนนี้เราต้องทดสอบในขนาดหน้าจอที่ต่างกันเพื่อให้แน่ใจว่าทุกอย่างทำงานถูกต้อง
เพื่อเปิด Web Developer Tools ในเบราว์เซอร์บน Windows ให้กด F12.
เครื่องมือนี้ช่วยให้คุณพรีวิวหน้าในหลายขนาดหน้าจอได้โดยไม่ต้องทดสอบแยกบนมือถือ แท็บเล็ต แลปท็อป หรืออุปกรณ์อื่นๆ

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

ในมุมมองแท็บเล็ต — โดยเฉพาะบน iPad Pro ขนาด 11 นิ้ว — การตั้งค่าของเรา (4 การ์ดต่อแถวบนแท็บเล็ต) ยังไม่ได้ถูกนำไปใช้ และแสดงเพียง 2 การ์ดต่อแถวเท่านั้น. เราจำเป็นต้องขอให้ ChatGPT แก้ไขปัญหานี้และเขียนโค้ดใหม่

ขั้นตอนที่ 6 6 ทำซ้ำและปรับแต่ง

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

• ทำให้ส่วนตอบสนองได้ในทุกขนาดหน้าจอ.
• เพิ่มเอฟเฟกต์เมื่อเลื่อนเมาส์ (hover animation).
• ใช้ปุ่มไล่เฉดสี (gradient buttons).

ทุกครั้งที่อัปเดต ส่วนของคุณจะอัปเดตทันที

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

ฉันเลือกให้แสดง 4 การ์ดต่อแถวในขนาดแท็บเล็ต แต่บน iPad Pro 11 นิ้วกลับแสดง 2 การ์ดต่อแถว ช่วยแก้ให้ด้วย ฉันตั้งไว้ให้แสดง 2 ต่อแถวบนมือถือ

เมื่อ ChatGPT ตอบคำขอของคุณ บางครั้งมันจะให้เฉพาะการแก้ไขโค้ดที่จำเป็นเท่านั้น ซึ่งคุณต้องคัดลอกไปแทนที่หรือเพิ่มเอง เช่นในภาพด้านล่าง

เพื่อความง่าย ให้คุณขอให้มัน “ส่งโค้ดเต็มทั้งหมด"

บ่อยครั้ง ตอนท้ายข้อความของมัน ChatGPT จะแนะนำการตั้งค่าเพิ่มเติมที่คุณอาจมองข้ามไป — เช่น ในกรณีนี้มันแนะนำให้เพิ่มลิงก์ให้กับการ์ด ซึ่งเป็นสิ่งสำคัญสำหรับส่วนของเรา

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

ขั้นตอนที่ 7 6 สรุปโค้ดและบันทึกส่วน

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

เพิ่มบล็อกคำอธิบายเชิงแนวคิดไว้ด้านบน