หนึ่งในหน้า Landing Page สุดพิเศษที่เรามอบให้คุณในฐานะสมาชิกตลอดชีพและลูกค้าใหม่ในวัน Black Friday คือหน้า Landing Page ของ Software Sale ที่น่าทึ่ง หน้า Landing Page นี้จะทำให้คุณประหลาดใจด้วยตัวแบ่งส่วนที่เป็นเอกลักษณ์และแบบจำลองคุณภาพสูง ในบทความนี้เราจะแสดงวิธีใช้คุณลักษณะเนื้อหาแบบไดนามิกของ Divi เพื่อเพิ่มตารางการกำหนดราคาแบบไดนามิกลงไป

หากคุณเป็นลูกค้าตลอดชีพในปัจจุบัน หรือหากคุณซื้อบัญชีใหม่หรืออัปเกรดในช่วงลดราคา Black Friday คุณสามารถดาวน์โหลดเค้าโครงนี้ได้ทันที

รับหน้า Landing Page สำหรับการขายซอฟต์แวร์ Black Friday สุดพิเศษ

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

เรียกร้องข้อตกลงก่อนที่มันจะหายไป!

การใช้วิธีการสร้างตารางการกำหนดราคาแบบไดนามิกด้วย Divi

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

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

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

ดูตัวอย่าง

ก่อนที่เราจะเจาะลึกลงไป เรามาดูผลลัพธ์สุดท้ายกันอย่างรวดเร็ว

มาเริ่มกันเลย!

ติดตั้งปลั๊กอินฟิลด์กำหนดเองขั้นสูง

สิ่งแรกที่คุณต้องทำคือติดตั้งปลั๊กอิน Advanced Custom Fields บนเว็บไซต์ WordPress โดยไปที่ Plugins > Add New > ค้นหาปลั๊กอินและติดตั้ง

สร้างกลุ่มฟิลด์ใหม่

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว คุณสามารถเริ่มต้นได้ เพิ่มกลุ่มฟิลด์ใหม่

ชื่อ+ที่ตั้ง

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

เพิ่มฟิลด์ระดับสมาชิก

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

• ป้ายกำกับ: ระดับสมาชิก 1
• ชื่อช่อง: members_level_1
• ประเภทฟิลด์: Select
• ตัวเลือก: เพิ่มเนื้อหาที่เลือก

เพิ่มรายละเอียดการเป็นสมาชิก ฟิลด์

ดำเนินการต่อโดยเพิ่มฟิลด์คำอธิบายการเป็นสมาชิก

• ป้ายกำกับ: คำอธิบายการเป็นสมาชิก 1
• ชื่อช่อง: members_description_1
• ประเภทฟิลด์: Text

เพิ่มช่องราคา

ช่องสุดท้ายที่คุณต้องมีคือช่องราคา

• ป้ายชื่อสนาม: ราคา 1
• ชื่อช่อง: price_1
• ประเภทฟิลด์: Text

กลุ่มฟิลด์ที่ซ้ำกันสองครั้ง & ปรับชื่อและฟิลด์เป็นหมายเลขตารางราคา

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

เปลี่ยนจำนวนฟิลด์ทั้งหมดภายใน Group

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

สร้างหน้าใหม่โดยใช้หน้า Landing Page สำหรับการขายซอฟต์แวร์ของ Divi

ในส่วนถัดไปของบทช่วยสอนนี้ เราจะเพิ่มตารางราคาแบบไดนามิกลงในหน้า Landing Page ของการขายซอฟต์แวร์ สร้างหน้าใหม่โดยใช้เค้าโครงนี้

เพิ่มเนื้อหาแบบไดนามิกไปยังเพจ

สลับกลับไปที่ส่วนหลังของหน้านี้และเพิ่มเนื้อหาแบบไดนามิกลงในตารางราคาแต่ละตาราง

เพิ่มแถวใหม่ใต้ตารางราคาบนเพจ

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเปิดใช้งาน Visual Builder และเพิ่มแถวใหม่ที่นี่:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาด

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

จากนั้นไปที่การตั้งค่าการเว้นวรรคและเพิ่มระยะขอบที่กำหนดเอง

• ขอบบน: 100px
• ขอบล่าง: 100px

เพิ่มโมดูล CTA ลงในคอลัมน์ 1

เชื่อมต่อฟิลด์ชื่อเรื่องกับเนื้อหาไดนามิกระดับ 1 ระดับสมาชิก

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

เชื่อมต่อกล่องเนื้อหากับคำอธิบายการเป็นสมาชิก 1 เนื้อหาแบบไดนามิก

ในทำนองเดียวกัน เชื่อมต่อกล่องเนื้อหากับคำอธิบายสมาชิก 1

สีพื้นหลัง

จากนั้นไปที่การตั้งค่าพื้นหลังและเปลี่ยนสีพื้นหลังของโมดูล CTA

• สีพื้นหลัง: #ffffff

ภาพพื้นหลัง

เพิ่มภาพพื้นหลังที่ละเอียดอ่อนเช่นกัน คุณจะพบภาพพื้นหลังต่อไปนี้ใน Media Library ของคุณหลังจากอัปโหลด Software Sale Landing Page:

• ภาพพื้นหลัง: software-sale-13.png

การตั้งค่าข้อความ

ดำเนินการต่อโดยไปที่การตั้งค่าข้อความและเปลี่ยนการวางแนวข้อความของโมดูล

• การวางแนวข้อความ: ซ้าย

การตั้งค่าข้อความชื่อเรื่อง

เพื่อให้เข้ากับสไตล์การออกแบบของหน้า Landing Page ให้ทำการเปลี่ยนแปลงการตั้งค่าข้อความชื่อเรื่องด้วย

• แบบอักษรของชื่อเรื่อง: Rubik
• น้ำหนักแบบอักษรของชื่อเรื่อง: เบา
• ชื่อข้อความสี: #4258ff
• ขนาดข้อความชื่อเรื่อง: 40px
• ความสูงของบรรทัดหัวเรื่อง: 1.3em

การตั้งค่าข้อความเนื้อหา

เช่นเดียวกับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: Rubik
• น้ำหนักแบบอักษรของร่างกาย: ปานกลาง
• สีข้อความเนื้อหา: rgba(0,0,0,0.34)
• ขนาดข้อความเนื้อหา: 15px
• ความสูงของเส้นร่างกาย: 1.8em

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนต่อไป

• ช่องว่างภายในด้านบน: 60px

ชายแดน

และเพิ่ม '8px' ที่มุมบนของโมดูลแต่ละอัน

กล่องเงา

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

• ตำแหน่งแนวตั้งเงาของกล่อง: 50px
• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(66,88,255,0.2)

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เชื่อมต่อ Content Box กับ Price 1 Dynamic Content

ไปข้างหน้าและเพิ่มโมดูลข้อความด้านล่างโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1 เชื่อมโยงกล่องเนื้อหาของโมดูลนี้กับเนื้อหาแบบไดนามิกราคา 1

สีพื้นหลัง

ดำเนินการต่อโดยเปลี่ยนสีพื้นหลังของโมดูลนี้

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความ

แก้ไขการตั้งค่าข้อความด้วย

• แบบอักษรของข้อความ: Rubik
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #4258ff
• ขนาดตัวอักษร: 70px
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านล่าง: 60px
• ช่องว่างภายในด้านซ้าย: 40px

ชายแดน

ดำเนินการต่อโดยไปที่การตั้งค่าเส้นขอบและเพิ่ม '8px' ที่มุมด้านล่างทั้งสอง

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้โมดูลข้อความนี้เป็นเงาของกล่องด้วย

• ตำแหน่งแนวตั้งเงาของกล่อง: 80px
• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(66,88,255,0.2)

ลากโมดูลปุ่มไปที่คอลัมน์ 1

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

เปลี่ยนระยะห่าง

เปิดการตั้งค่าโมดูลปุ่มและเพิ่มระยะขอบที่กำหนดเอง

• ขอบบน: 30px
• มารีนด้านล่าง: 50px

โคลนโมดูลทั้งหมดในคอลัมน์ 1 & วางในคอลัมน์ที่เหลือ

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

แก้ไขโมดูลในคอลัมน์ 2

โมดูล CTA

เชื่อมต่อฟิลด์ชื่อเรื่องกับเนื้อหาไดนามิกระดับ 2 ระดับสมาชิก

เราจะต้องแก้ไขรายการที่ซ้ำกัน โดยเริ่มจากโมดูล CTA ในคอลัมน์ที่สอง เชื่อมต่อช่องชื่อกับเนื้อหาไดนามิกระดับสมาชิกระดับ 2

เชื่อมต่อกล่องเนื้อหากับคำอธิบายการเป็นสมาชิก 2 เนื้อหาแบบไดนามิก

ทำสิ่งเดียวกันกับกล่องเนื้อหา

เพิ่มพื้นหลังไล่ระดับสี

เพิ่มพื้นหลังไล่ระดับสีให้กับโมดูลถัดไป

• สี 1: #6959ff
• สี 2: #c1bfff
• ทิศทางการไล่ระดับสี: 15deg
• ตำแหน่งเริ่มต้น: 22%
• ตำแหน่งสุดท้าย: 95%

เปลี่ยนสีข้อความชื่อเรื่อง

เปลี่ยนสีข้อความชื่อเรื่องด้วย

• สีข้อความของชื่อเรื่อง: #ffffff

เปลี่ยนสีข้อความเนื้อหา

เช่นเดียวกับสีข้อความเนื้อหา

• สีข้อความ: #ffffff

เปลี่ยนระยะห่าง

เพื่อให้ตารางราคาเฉพาะนี้เป็นจุดสนใจ เราจะลองใช้ค่าการเว้นวรรคด้วยเช่นกัน

• ขอบบน: -50px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 100px

โมดูลข้อความ

เชื่อมต่อ Content Box กับ Price 2 Dynamic Content

ดำเนินการต่อโดยเปิดโมดูลข้อความในคอลัมน์ 2 และเชื่อมโยงกล่องเนื้อหากับเนื้อหาแบบไดนามิกราคา 2

เปลี่ยนสีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลนี้ต่อไป

• สีพื้นหลัง: #6959ff

เปลี่ยนสีข้อความ

และเปลี่ยนสีข้อความเป็นสีขาว

• สีข้อความ: #ffffff

เปลี่ยนระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค

• ช่องว่างภายในด้านล่าง: 120px
• ช่องว่างภายในด้านซ้าย: 40px

แก้ไขโมดูลในคอลัมน์ 3

โมดูล CTA

เชื่อมต่อฟิลด์ชื่อเรื่องกับเนื้อหาไดนามิกระดับ 3 ของสมาชิก

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

เชื่อมต่อกล่องเนื้อหากับคำอธิบายการเป็นสมาชิก 3 เนื้อหาแบบไดนามิก

กันไปสำหรับกล่องเนื้อหา

เพิ่มพื้นหลังไล่ระดับสี

จากนั้น เพิ่มพื้นหลังแบบไล่ระดับให้กับโมดูล

• สี 1: #c87cff
• สี 2: #ffbcf8
• ทิศทางการไล่ระดับสี: 18deg
• ตำแหน่งเริ่มต้น: 22%
• ตำแหน่งสุดท้าย: 95%

เปลี่ยนสีข้อความชื่อเรื่อง

เปลี่ยนสีข้อความชื่อเรื่องเป็นสีขาว

• สีข้อความของชื่อเรื่อง: #ffffff

เปลี่ยนสีข้อความเนื้อหา

ทำสิ่งเดียวกันกับสีข้อความเนื้อหา

• สีข้อความ: #ffffff

โมดูลข้อความ

เชื่อมต่อ Content Box กับ Price 3 Dynamic Content

ดำเนินการต่อโดยเปิดโมดูลข้อความในคอลัมน์ 3 และเปลี่ยนเนื้อหาแบบไดนามิกที่นี่ด้วย

เปลี่ยนสีพื้นหลัง

เพิ่มสีพื้นหลังอื่นต่อไป

• สีพื้นหลัง: #c87cff

เปลี่ยนสีข้อความ

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

• สีข้อความ: #ffffff

ความคิดสุดท้าย

กรณีการใช้งานนี้เป็นส่วนหนึ่งของดีล Black Friday ที่เราแชร์หน้า Landing Page รุ่นจำกัดจำนวน 6 หน้าฟรีกับลูกค้า Black Friday และสมาชิกตลอดชีพ เมื่อเข้าร่วมชุมชนที่มีอำนาจของเราในช่วงเวลาเหล่านี้และเป็นสมาชิก คุณจะได้รับ:

• ลด 25% ทุกอย่าง
• ฟรีแลนดิ้งเพจทั้ง 6 หน้า
• เข้าถึงธีมและปลั๊กอินที่ยอดเยี่ยมของเรา
• รางวัลโบนัส

คว้าโอกาสและเป็นสมาชิกวันนี้!