วิธีใช้โมดูลสลับของ Divi อย่างสร้างสรรค์เพื่อแสดงแผนราคา

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

เพิ่มโมดูลข้อความ

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

ไม่จำเป็นต้องเปลี่ยนแปลงแถว ดังนั้นให้เพิ่มโมดูลข้อความทันที ป้อนเนื้อหา H2 ที่เลือกในกล่องเนื้อหาของโมดูล

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

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

• แบบอักษรหัวเรื่อง 2: Didact Gothic
• หัวข้อ 2 น้ำหนักแบบอักษร: ปกติ
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ: 40px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -1px

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

สี

ดำเนินการต่อโดยไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่ง

• สี: #000000

ขนาด

เปลี่ยนความกว้างของโมดูลในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 39%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

เพิ่มระยะขอบด้านล่างแบบกำหนดเองด้วย

• ขอบล่าง: 50px

เพิ่มแถว #2

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

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

พื้นหลังไล่ระดับคอลัมน์ 1

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

• สี 1: #00fff2
• สี 2: rgba (255,255,255,0)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ทิศทางเรเดียล: ล่างขวา
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 30%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 30%

พื้นหลังไล่ระดับคอลัมน์ 2

ทำเช่นเดียวกันสำหรับคอลัมน์ที่สองด้วย

• สี 1: #fce96f
• สี 2: rgba (255,255,255,0)
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 2 ทิศทางเรเดียล: บนขวา
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 40%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 40%

พื้นหลังไล่ระดับคอลัมน์ 3

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

• สี 1: #a659ff
• สี 2: rgba (255,255,255,0)
• คอลัมน์ 3 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 3 ทิศทางเรเดียล: ด้านล่าง
• คอลัมน์ 3 ตำแหน่งเริ่มต้น: 30%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 30%

ขนาด

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

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

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

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

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

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

สถานะ

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

สีพื้นหลัง

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

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

การตั้งค่าไอคอน

เปลี่ยนสีไอคอนในแท็บการออกแบบถัดไป

• ไอคอนสี: #000000

สลับการตั้งค่า

และปรับเปลี่ยน Open Toggle Background Color ในการตั้งค่าการสลับด้วย

• เปิดสลับสีพื้นหลัง: rgba(255,255,255,0)

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

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความชื่อเรื่อง

• แบบอักษรของชื่อเรื่อง: Didact Gothic
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง: 3.5vw (เดสก์ท็อป), 60px (แท็บเล็ต), 40px (โทรศัพท์)

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

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

• แบบอักษรของร่างกาย: Didact Gothic
• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• สีข้อความ: #000000
• ขนาดข้อความเนื้อหา: 18px
• ความสูงของเส้นร่างกาย: 1.5em

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

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

เปลี่ยนสำเนา

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

ดูตัวอย่าง

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

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

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