โมดูล "ตัวเลื่อนบทความ" หรือโมดูลตัวเลื่อนโพสต์บน ธีม 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=”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 อื่น ๆ

• เว็บไซต์ 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