วิธีใช้โมดูล Toggle บน Divi Builder: บทช่วยสอน

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

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

ค้นหาโมดูลสลับในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์ "toggle" จากนั้นกด Enter เพื่อค้นหาและเพิ่มโมดูลสลับโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .

ตัวอย่างกรณีการใช้งาน: หน้าคำถามที่พบบ่อย

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

ใช้ Visual Builder เพิ่มส่วนใหม่ด้วยแถวเต็มความกว้าง (1 คอลัมน์) จากนั้นเพิ่มโมดูล Divider ในแถว ภายใต้แท็บเนื้อหาของการตั้งค่าโมดูลตัวแบ่งให้เลือกตัวเลือก“ แสดงตัวแบ่ง”

บนแท็บออกแบบให้ป้อนตัวเลือกต่อไปนี้:

สี: # 000000 (สีดำ)
สไตล์ของผู้จัดจำหน่าย: ของแข็ง
ตำแหน่งคั่น:
ตัวแบ่งกึ่งกลางแนวตั้งน้ำหนัก: 4px
ความสูง: 1

จากนั้นเพิ่มโมดูลสลับใต้ตัวแบ่งที่ฉันเพิ่งสร้างในแถวเดียวกัน ในการตั้งค่าโมดูลสลับให้อัปเดตสิ่งต่อไปนี้:

แท็บเนื้อหา

ชื่อเรื่อง: [ป้อนชื่อของคุณ]
เนื้อหา: [ป้อนเนื้อหาของคุณ]
สถานะ: ปิด
เปิดสีพื้นหลัง: #ffffff
ปิดสลับสีพื้นหลัง: #ffffff
สีพื้นหลัง: #ffffff

แท็บการออกแบบ

ไอคอนสี: # 000000
เปิด Toggle Text Color: # 000000
ปิดสีข้อความสลับ: # 000000
แบบอักษรชื่อเรื่อง: Open Sans, Bold
ขนาดแบบอักษร: 24px
สีข้อความชื่อเรื่อง: # 000000
Body Font: เปิด Sans
ขนาดตัวอักษร: 18px
สีตัวอักษร: # 666666
ความสูงของเส้นร่างกาย: 1.6em
ใช้เส้นขอบ: YES
ความกว้างของเส้นขอบ: 0px
การเติมเต็มที่กำหนดเอง: 2px ยอดนิยม, 2px ด้านล่าง

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

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

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

พารามิเตอร์เนื้อหาของโมดูลสลับ

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

ตำรา

นี่คือที่ที่คุณสามารถเพิ่มชื่อและสลับเนื้อหาได้

Etat

คุณสามารถเลือกว่าต้องการให้ปุ่มของคุณปรากฏขึ้นเป็นเปิดหรือปิดโดยค่าเริ่มต้นด้วยการตั้งค่านี้

สิ่งแวดล้อม

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

ป้ายกำกับผู้ดูแลระบบ

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

พารามิเตอร์การออกแบบของโมดูลโยก

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

ไอคอน

ซึ่งเป็นที่ที่คุณสามารถเปลี่ยนสีของไอคอนสลับได้

ตำรา

ที่นี่คุณสามารถตั้งค่าสีสำหรับข้อความสลับเปิดและปิด

ข้อความชื่อ

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

ข้อความของร่างกาย

ที่นี่คุณสามารถปรับแบบอักษรน้ำหนักขนาดสีระยะห่างความสูงของแถวและอื่น ๆ

พรมแดน

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

การเว้นวรรค

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

การตั้งค่าขั้นสูงของโมดูลสลับ

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

นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะช่วยให้คุณใช้โมดูล Divi Toggle ได้ดีขึ้น

[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

วิธีการใช้โมดูล Divi Builder Flip