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

วิธีเพิ่มโมดูลตัวเลื่อนบทความบน Divi Builder

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

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

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

ตัวอย่างการใช้งาน: โพสต์แถบเลื่อน (บทความ) เพื่อแสดงรายการล่าสุด

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

ใช้ Visual Builder เพิ่มส่วนมาตรฐานใหม่ที่ด้านบนของหน้าบล็อกด้วยแถวเต็มความกว้าง (1 คอลัมน์) จากนั้นใส่โมดูล Post Slider ในบรรทัดใหม่ของคุณ

ภายใต้การตั้งค่าเคอร์เซอร์ให้อัปเดตตัวเลือกต่อไปนี้:

ตัวเลือกเนื้อหา

จำนวนข้อความ: 3

ตัวเลือกการออกแบบ

แบบอักษรส่วนหัว: Roboto (ตัวพิมพ์ใหญ่) ส่วนหัวขนาดตัวอักษร: 50px สีข้อความส่วนหัว: # edef5d ส่วนหัวของตัวอักษรระยะห่าง: 1px ขนาดตัวอักษร: 16 Body Letter-Space: 1px ความสูงของเส้นเนื้อหา: 1.4em แบบอักษร Meta: Open Sans, ตัวเอียงตัวพิมพ์ใหญ่ขนาดตัวอักษร Meta: 18px สีข้อความเมตา: #cccccc ความสูงของเส้นเมตา: 2em ใช้รูปแบบที่กำหนดเองสำหรับปุ่ม: ใช่ขนาดตัวอักษร: 26px สีข้อความของปุ่ม: # edef5d ความกว้างของปุ่ม: ไอคอนปุ่ม 0px:> แสดงเฉพาะไอคอน

บันทึกการตั้งค่า

ว่ามัน!

โมดูลตัวเลื่อนบทความตัวเลือกเนื้อหา

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

จำนวนรายการ (จำนวนโพสต์)

เลือกจำนวนรายการที่คุณต้องการแสดงในแถบเลื่อน

รวมหมวดหมู่

เลือกหมวดหมู่ที่คุณต้องการรวมไว้ในแถบเลื่อน

สั่งซื้อโดย

คุณสามารถปรับลำดับการแสดงบทความได้ที่นี่

ข้อความปุ่ม

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

การแสดงผลเนื้อหา

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

ใช้ข้อความที่ตัดตอนมาจากบทความหากกำหนดไว้

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

ความยาวแยกอัตโนมัติ

กำหนดความยาวของสารสกัดที่สร้างขึ้นโดยอัตโนมัติ เว้นว่างไว้สำหรับค่าเริ่มต้น (270)

แสดงลูกศร

การตั้งค่านี้จะเปิดใช้งานและปิดใช้งานลูกศรนำทาง

แสดงการควบคุม

การตั้งค่านี้จะเปิดใช้งานและปิดการใช้งานปุ่มวงกลมที่ด้านล่างของเคอร์เซอร์

แสดงปุ่มอ่านเพิ่มเติม

การตั้งค่านี้จะเปิดใช้งานและปิดใช้งานปุ่มอ่านเพิ่มเติม

แสดงข้อความ Meta

การตั้งค่านี้จะเปิดใช้งานและปิดใช้งานส่วนเมตา

แสดงภาพเด่น

การตั้งค่านี้จะเปิดและปิดภาพที่เลือกในแถบเลื่อน

ภาพตำแหน่ง

เลือกวิธีที่คุณต้องการแสดงภาพที่เลือกในสไลด์

สีพื้นหลัง

ใช้ตัวเลือกสีเพื่อเลือกสีพื้นหลังสำหรับโมดูลนี้

ภาพพื้นหลัง

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

ตำแหน่งของภาพพื้นหลัง

เลือกตำแหน่ง CSS ของภาพพื้นหลังสำหรับแต่ละสไลด์

ขนาดภาพพื้นหลัง

เลือกขนาดภาพพื้นหลัง CSS ที่ใช้สำหรับแต่ละสไลด์

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

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

ตัวเลือกการออกแบบโมดูลสไลด์

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

ลบเงาด้านใน

การดำเนินการนี้จะลบเงาภายใน CSS ที่ใช้กับสไลด์ทั้งหมดตามค่าเริ่มต้น

ใช้การซ้อนทับพื้นหลัง

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

สีพื้นหลังของภาพซ้อนทับ

ใช้ตัวเลือกสีเพื่อเลือกสีสำหรับพื้นหลัง

ใช้การวางซ้อนข้อความ

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

รัศมีขอบการวางซ้อนข้อความ

รัศมีของเส้นขอบมีผลต่อความกลมของมุมของพื้นที่วางซ้อนข้อความ ตามค่าเริ่มต้นมุมจะมีขอบโค้งมนเล็กน้อย 3 พิกเซล คุณสามารถลดค่านี้เป็น 0 เพื่อสร้างกล่องสี่เหลี่ยมหรือเพิ่มค่าเพื่อให้มุมกลมมากยิ่งขึ้น

ใช้เอฟเฟกต์พารัลแลกซ์

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

วิธีการ Parallax

คุณสามารถตั้งค่าวิธีที่ใช้สำหรับเอฟเฟกต์พารัลแลกซ์ - CSS หรือ True Parallax ได้ที่นี่

ลูกศรสีที่กำหนดเอง

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

Dot Nav กำหนดสีเอง

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

สีข้อความ

ที่นี่คุณสามารถเลือกได้ว่าจะให้ข้อความของคุณสว่างหรือมืด หากคุณมีสไลด์ที่มีพื้นหลังสีเข้มให้เลือกข้อความสีอ่อน ถ้าคุณ
มีพื้นหลังชัดเจนใช้ข้อความสีเข้ม

แบบอักษรส่วนหัว

คุณสามารถเปลี่ยนแบบอักษรของข้อความส่วนหัวได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับแบบอักษรที่ยอดเยี่ยมมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และตัวเลือกขีดเส้นใต้

ขนาดตัวอักษรส่วนหัว

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

สีข้อความส่วนหัว

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

ระยะห่างของตัวอักษรส่วนหัว

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความส่วนหัวของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของแถวส่วนหัว

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

แบบอักษร Body

คุณสามารถเปลี่ยนแบบอักษรของร่างกายได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับแบบอักษรที่ยอดเยี่ยมมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

ขนาดแบบอักษร Body

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

สีตัวอักษร

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

ระยะห่างของตัวอักษร

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของเส้นร่างกาย

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

ตำรวจเมตาดาต้า

คุณสามารถเปลี่ยนแบบอักษรของข้อความเมตาของคุณได้โดยเลือกแบบอักษรที่คุณต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับแบบอักษรที่ยอดเยี่ยมมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

ขนาดแบบอักษร Meta

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

สีข้อความ Meta

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

ระยะห่างของ Meta Letter

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวของข้อความเมตาของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของ Meta Line

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

ช่องว่างภายใน

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

ช่องว่างภายในด้านล่าง

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

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม

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

ขนาดข้อความของปุ่มข้อความ

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

สีของข้อความปุ่ม

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

สีพื้นหลังของปุ่ม

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

ความกว้างของเส้นขอบปุ่ม

ปุ่ม Divi ทั้งหมดมีขอบ 2px ตามค่าเริ่มต้น เส้นขอบนี้สามารถเพิ่มหรือลดได้โดยใช้การตั้งค่านี้ สามารถลบเส้นขอบได้โดยป้อนค่าเป็น 0

สีเส้นขอบของปุ่ม

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

รัศมีขอบของปุ่ม

รัศมีของเส้นขอบมีผลต่อความกลมของมุมปุ่มของคุณ ตามค่าเริ่มต้นปุ่มต่างๆใน Divi จะมีรัศมีขอบเล็ก ๆ ที่ล้อมรอบมุม 3 พิกเซล คุณสามารถลดค่านี้เป็น 0 เพื่อสร้างปุ่มสี่เหลี่ยมหรือเพิ่มขึ้นอย่างมากเพื่อสร้างปุ่มที่มีขอบวงกลม

การเว้นวรรคของตัวอักษรของปุ่ม

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความปุ่มของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ปุ่มตำรวจ

คุณสามารถเปลี่ยนแบบอักษรของข้อความปุ่มได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับฟอนต์ดีๆมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

เพิ่มไอคอนปุ่ม

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

ไอคอนปุ่ม

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

ปุ่มไอคอนสี

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

ไอคอนตำแหน่งปุ่ม

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

แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม

โดยค่าเริ่มต้นไอคอนปุ่มจะแสดงเฉพาะเมื่อวางเมาส์เหนือ หากคุณต้องการให้ไอคอนปรากฏอยู่เสมอให้ปิดการตั้งค่านี้

สีของปุ่มวางเมาส์

เมื่อปุ่มถูกเมาส์ของผู้เข้าชมวางเมาส์เหนือปุ่มสีนี้จะถูกใช้ สีจะเปลี่ยนไปจากสีพื้นฐานที่กำหนดไว้ในการตั้งค่าก่อนหน้านี้

สีพื้นหลังของปุ่มวางเมาส์

เมื่อปุ่มถูกเมาส์ของผู้เข้าชมวางเมาส์เหนือปุ่มสีนี้จะถูกใช้ สีจะเปลี่ยนไปจากสีพื้นฐานที่กำหนดไว้ในการตั้งค่าก่อนหน้านี้

ปุ่มปักหมุดสี

เมื่อปุ่มถูกเมาส์ของผู้เข้าชมวางเมาส์เหนือปุ่มสีนี้จะถูกใช้ สีจะเปลี่ยนไปจากสีพื้นฐานที่กำหนดไว้ในการตั้งค่าก่อนหน้านี้

ปุ่มรัศมีขอบเลื่อน

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

ปุ่มเว้นวรรคบันทึกย่อ

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

ตัวเลือกขั้นสูงของ Post Slider

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

รหัส CSS

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

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ภาพเคลื่อนไหวอัตโนมัติ

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

ความเร็วในการเคลื่อนไหวอัตโนมัติ (เป็นมิลลิวินาที)

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

ดำเนินการสไลด์อัตโนมัติบน Hover

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

ซ่อนเนื้อหาบนมือถือ

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

ซ่อน CTA บนมือถือ

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

ดูภาพ / วิดีโอบนมือถือ

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

ยกเลิกการใช้งาน

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

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "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] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" 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 "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ

• เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
• วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
• วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
• วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
• วิธีการใช้ Divi Builder ใน WordPress
• วิธีใช้โมดูลเลื่อนภาพ Divi
• วิธีการใช้โมดูล Divi Builder Flip
• วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
• วิธีใช้โมดูลข้อความ Divi
• วิธีสร้างแถบเลื่อนบน Divi
• วิธีแก้ไขบทบาทผู้ใช้ Divi
• วิธีใช้โมดูล Divi Social Media
• วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
• วิธีใช้โมดูลด้านข้าง Divi
• วิธีการใช้โมดูลตารางราคา Divi
• วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
• วิธีเพิ่มโมดูลวิดีโอของ Divi
• วิธีใช้โมดูลการนำทางบทความ
• วิธีการใช้โมดูลค้นหา Divi
• วิธีใช้โมดูลกระเป๋าสตางค์ Divi
• วิธีการใช้โมดูลคนบน Divi Builder
• วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
• วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
• วิธีใช้โมดูล Divi Builder Image
• วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
• วิธีการใช้โมดูลคลังภาพ
• วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
• วิธีใช้โมดูล Divi Full Width Portfolio
• วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
• วิธีใช้โมดูล Divi Counter
• วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
• วิธีใช้โมดูล Divi Email Optin