วิธีการจัดรูปแบบตารางราคาที่สวยงามใน Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน

เดสก์ทอป

มือถือ

ดาวน์โหลดรูปภาพฟรี

ในการวางมือบนรูปภาพที่ใช้ในบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

วิธีการจัดรูปแบบตารางราคาที่สวยงามใน Divi

สมัครสมาชิกช่อง Youtube ของเรา

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

เพิ่มมาตราใหม่

พื้นหลังไล่โทนสี

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

• สี 1: #ffffff
• สี 2: #353272
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ระยะห่าง

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

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

เพิ่มแถวใหม่

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

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

ขนาด

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 94px
• ช่องว่างภายในด้านล่าง: 177px
• ช่องว่างภายในด้านซ้าย: 150px (เดสก์ท็อป), 30px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 150px (เดสก์ท็อป), 30px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 1, 2 และ 3 ช่องว่างภายในด้านซ้าย: 10px
• คอลัมน์ 1, 2 และ 3 ช่องว่างภายในด้านขวา: 10px

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

เพิ่มเนื้อหา

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

สีพื้นหลัง

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

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

ภาพพื้นหลัง

สลับไปที่แท็บรูปภาพพื้นหลังและอัปโหลดไฟล์ ' Divi-beautiful-pricing-table-background-pattern-1.png ' ซึ่งคุณจะพบได้ในโฟลเดอร์ดาวน์โหลดที่แชร์ไว้ตอนต้นของโพสต์นี้

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

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

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

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 80px
• ระยะห่างของตัวอักษรข้อความ: -3px
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

และเพิ่มค่าระยะขอบและช่องว่างภายในที่กำหนดเอง

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

ชายแดน

ดำเนินการต่อโดยเพิ่ม '20px' ที่มุมบนซ้ายและขวา

กล่องเงา

ให้โมดูลข้อความเป็นเงาของกล่องที่ละเอียดอ่อน

• ตำแหน่งแนวตั้งเงาของกล่อง: -20px
• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.15)

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

โมดูลที่สองที่เราต้องการในคอลัมน์ 1 คือโมดูลปุ่ม เพิ่มสำเนาที่เลือก

การจัดตำแหน่งปุ่ม

จากนั้นไปที่การตั้งค่าการจัดตำแหน่งและเปลี่ยนการจัดตำแหน่งให้อยู่ตรงกลาง

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

เราจะดำเนินการต่อโดยทำการเปลี่ยนแปลงรูปลักษณ์ของปุ่มในการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• สี 1: #6932ff
• สี 2: #30acf4
• ทิศทางการไล่ระดับสี: 100deg

• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -2px
• น้ำหนักแบบอักษร: Ultra Bold

ระยะห่าง

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

• ขอบบน: -54px
• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 30px
• ช่องว่างภายในด้านขวา: 30px

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -14px
• เงาสี: rgba(0,0,0,0.3)

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มเนื้อหา

โมดูลถัดไปที่เราต้องการคือโมดูลข้อความอื่นที่มีราคาของประเภทการเป็นสมาชิก

สีพื้นหลัง

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

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

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: rgba(0,0,0,0.05)
• ขนาดตัวอักษร: 120px
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในด้านซ้าย: 80px

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและเพิ่ม '30px' ที่มุมล่างซ้ายและขวา

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้โมดูลเงากล่อง

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: 0px
• เงาสี: rgba(0,0,0,0.21)

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

เพิ่มเนื้อหา

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

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #000000
• ขนาดตัวอักษร: 50px
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

และสร้างการทับซ้อนกันระหว่างโมดูลนี้กับโมดูลก่อนหน้าโดยเล่นกับค่าระยะห่างที่กำหนดเอง

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

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

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

เปลี่ยนเนื้อหาของโมดูลในคอลัมน์

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

เปลี่ยนตารางราคาในคอลัมน์ 2

เปลี่ยนภาพพื้นหลังของโมดูลข้อความ #1

เรายังเน้นที่ตารางราคากลาง เปิดโมดูลข้อความแรกในคอลัมน์ 2 และเปลี่ยนภาพพื้นหลังเป็นไฟล์ ' Divi-beautiful-pricing-table-background-pattern-2.png ' ที่คุณพบได้ในโฟลเดอร์ดาวน์โหลด

ลบขอบด้านบนของโมดูลข้อความ #1

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

เปลี่ยนพื้นหลังการไล่ระดับสีของปุ่ม

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

• สี 1: #fb32ff
• สี 2: #ff304f
• ทิศทางการไล่ระดับสี: 100deg

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

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

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