วิธีสร้างรายการราคาใน WordPress ด้วย Elementor

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

รายการราคาที่ครอบคลุมเป็นสิ่งจำเป็นสำหรับเว็บไซต์ใดๆ ในปัจจุบันที่ขายสินค้าหรือบริการ ตัวอย่างเช่น อีคอมเมิร์ซ ร้านอาหาร บริษัทซอฟต์แวร์ เอเจนซี่ที่ให้บริการ ฯลฯ ในบทความนี้ เราจะกล่าวถึงคำแนะนำที่ชัดเจนเกี่ยวกับวิธีสร้างรายการราคาใน WordPress ด้วย Elementor

นอกจากนี้เรายังจะอธิบายคุณสมบัติหลักที่รายการราคาอัจฉริยะต้องมีเพื่อเพิ่ม Conversion เอาล่ะ เรามาเข้ากระทู้กันดีกว่า

คุณสมบัติหลักของรายการราคาที่มีการแปลงสูง

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

• ความชัดเจนและเรียบง่าย

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

• ค่าที่เน้น

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

• การสร้างแบรนด์ที่สอดคล้องกัน

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

• ความโปร่งใส

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

• องค์ประกอบภาพที่จับใจ

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

• การออกแบบที่เหมาะกับมือถือ

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

วิธีสร้างรายการราคาใน WordPress ด้วย Elementor

การสร้างรายการราคาตั้งแต่เริ่มต้นใน Elementor อาจใช้เวลานาน HappyAddons เป็นส่วนเสริมอันทรงพลังของ Elementor มีวิดเจ็ตเมนูราคาที่มีคุณสมบัติหลากหลายซึ่งคุณสามารถสร้างรายการราคาที่น่าทึ่งได้อย่างง่ายดายบนเว็บไซต์ WordPress ของคุณ

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

• เอเลเมนท์
• HappyAddons
• HappyAddons Pro

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

เริ่มต้น!

ขั้นตอนที่ 01: สร้างเค้าโครงด้วยคอลัมน์

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

ขั้นตอนที่ 02: ลากและวางวิดเจ็ตเมนูราคาไปที่ Elementor Canvas

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

รายการราคาเริ่มต้นจะปรากฏขึ้นพร้อมกับสองรายการ

ขั้นตอนที่ 03: เลือกรูปแบบรายการราคา

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

ดังนั้นสำรวจสไตล์ทั้งหมดและอยู่กับสไตล์ที่คุณรู้สึกว่าสมบูรณ์แบบในที่สุด

สำหรับบทช่วยสอนนี้ เราจะเลือก การออกแบบ 4

ขั้นตอนที่ 04: เพิ่มรายการเพิ่มเติมในรายการราคา

หากต้องการเพิ่มรายการลงในรายการราคา ให้ขยาย ส่วนเมนูราคา จากนั้นคลิก ปุ่ม + เพิ่มรายการ

# เพิ่มข้อมูลผลิตภัณฑ์

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

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

# เพิ่มราคาสินค้า

เลื่อนแท็บลงแล้วคุณจะเห็นตัวเลือกในการเพิ่มราคาผลิตภัณฑ์ กรอกทั้งสองช่อง (ราคาเก่าและราคาปัจจุบัน) หรือคุณอาจปล่อยให้ช่องราคาเก่าไม่ถูกแตะต้องก็ได้ แต่การกรอกช่องราคาเก่าสามารถเพิ่มมูลค่าทางการตลาดได้

# เพิ่มรูปภาพผลิตภัณฑ์ (ไม่บังคับ)

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

คุณจะเห็นว่าเราได้เพิ่มรูปภาพถัดจากรายการวิดเจ็ตเมนูราคาโดยใช้ตัวเลือก

ตอนนี้ ขยายแท็บอื่นๆ และเพิ่มรูปภาพที่เหมาะสมสำหรับรายการผลิตภัณฑ์ จะเห็นว่าเราได้เพิ่มรูปภาพลงในแท็บอื่นแล้ว

ในทำนองเดียวกัน คุณสามารถเพิ่มสินค้าได้มากเท่าที่คุณต้องการในราคาตลาด

ขั้นตอนที่ 05: กำหนดการตั้งค่าสำหรับวิดเจ็ตเมนูราคา

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

ดูสิ่งที่คุณสามารถทำได้ด้วยตัวเลือกเหล่านี้ในรายการราคา

• แท็ก Title HTML – ตั้งค่าประเภทส่วนหัว (h1, h2, h3, h4, h5 หรือ h6) สำหรับชื่อผลิตภัณฑ์
• ความละเอียดของภาพ – แสดงภาพสินค้าเป็นรูปขนาดย่อ กลาง ใหญ่ หรืออย่างอื่น
• ตำแหน่งรูปภาพ – แสดงรูปภาพทางด้านขวา ซ้าย หรือด้านบน
• ตำแหน่งราคา – อนุญาตให้คุณใส่ราคาผลิตภัณฑ์ข้างชื่อหรือที่ด้านล่าง
• การจัดแนวเนื้อหา – จัดเรียงเนื้อหาข้อความของคุณทางซ้าย ขวา หรือตรงกลาง
• ตัวคั่นราคาชื่อเรื่อง – เพิ่มรูปร่างตัวคั่นระหว่างชื่อผลิตผลและราคา
• ตัวนับรายการ – แสดงค่ารายการที่เป็นตัวเลขสำหรับแต่ละรายการในรายการ

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

ขั้นตอนที่ 06: สำรวจส่วนอื่น ๆ ใต้แท็บเนื้อหา

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

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

ต่อไปนี้เป็นคำแนะนำโดยละเอียดเกี่ยวกับวิธีเพิ่มเอฟเฟกต์เคอร์เซอร์โฮเวอร์ใน Elementor

ขั้นตอนที่ 07: จัดสไตล์วิดเจ็ตเมนูราคา

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

# ปรับแต่งระยะห่างรายการ

ขยาย ส่วนกล่องเมนู สองตัวเลือกแรกคือ Item Spacing หมายถึงระยะห่างระหว่างรายการในรายการ

ตามค่าเริ่มต้น ค่าของมันคือ 20 เราได้ลดลงเหลือ 10 เพื่อให้การออกแบบรายการดีขึ้น

ตัวเลือกถัดไปคือ Padding ช่วยให้คุณสามารถปรับช่องว่างระหว่างองค์ประกอบทุกด้าน (บน ขวา ล่าง และซ้าย) ภายในวิดเจ็ต หากไม่จำเป็น คุณสามารถปล่อยตัวเลือกช่องว่างภายในไว้เหมือนเดิมได้

# เพิ่มสีพื้นหลัง

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

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

กด ประเภทพื้นหลัง เพื่อเปิดใช้งานตัวเลือกสี สุดท้าย เลือกสี ที่คุณต้องการสำหรับส่วนนี้

หากต้องการเพิ่ม สีพื้นหลังวิดเจ็ต ให้เลือกวิดเจ็ตโดยคลิก ไอคอนดินสอ

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

# จัดสไตล์ชื่อเรื่องของรายการราคา

ขยาย ส่วนชื่อเรื่อง คุณจะได้รับตัวเลือกในการปรับแต่ง แบบอักษรของชื่อเรื่อง สี สีโฮเวอร์ ระยะขอบ ประเภทเส้นขอบ ช่องว่าง เงาของกล่อง และ ตัวคั่น

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

#ปรับราคาให้เหมาะสม

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

# ตกแต่งรูปภาพให้มีสไตล์

ในทำนองเดียวกัน ให้ขยาย ส่วนรูปภาพ คุณสามารถปรับแต่ง ความกว้าง ความสูง ช่องว่าง เงาของกล่อง ประเภทเส้นขอบ เส้นขอบ สีเส้นขอบ และ รัศมีของเส้นขอบได้

# ปรับแต่งคำอธิบาย

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

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

ดังนั้นคุณจึงสามารถจัดสไตล์วิดเจ็ตเมนูราคาทั้งหมดได้อย่างชัดเจน ซึ่งหมายถึงรายการราคาของคุณ

ขั้นตอนที่ 08: ทำให้รายการราคาตอบสนองบนมือถือ

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

คลิกตัวเลือก โหมดตอบสนอง ที่ด้านล่างของแผง Elementor คุณจะเห็นตัวเลือกขนาดต่างๆ ที่ด้านบนของผืนผ้าใบ Elementor

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

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

หมายเหตุ: ห้ามลบองค์ประกอบใดๆ เพราะหากคุณลบองค์ประกอบใดองค์ประกอบหนึ่ง องค์ประกอบนั้นจะถูกลบออกจากหน้าจอทั้งหมด ไม่ใช่แค่จากอุปกรณ์ใดอุปกรณ์หนึ่งเท่านั้น

ขั้นตอนที่ 09: ลดความกว้างของเค้าโครงรายการราคาให้แคบลง (ไม่บังคับ)

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

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

ดังนั้น ให้ทำเช่นเดียวกันกับหน้าจอขนาดอื่นๆ ดังที่แสดงในขั้นตอนข้างต้น

ขั้นตอนที่ 10: ดูตัวอย่างรายการราคาในส่วนหน้า

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

คุณสามารถเผยแพร่รายการราคาได้เมื่อการตั้งค่าและการปรับแต่งทั้งหมดเสร็จสิ้น

บทสรุป

ดังนั้น การสร้างรายการราคาใน WordPress ด้วย Elementor จึงเป็นวิธีที่ง่ายและเป็นมิตรต่อผู้ใช้ในการแสดงผลิตภัณฑ์และข้อเสนอของคุณในรูปแบบที่สะอาดตาและเป็นระเบียบ อย่างไรก็ตาม ก่อนที่เราจะสิ้นสุด เราต้องการชี้แจงสิ่งหนึ่งที่ผู้ใช้จำนวนมากยังคงสับสน – ความแตกต่างระหว่างรายการราคาและตารางราคา

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

• วิธีสร้างตารางราคาใน Elementor
• วิธีสร้างตารางเปรียบเทียบกับ Elementor