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

วิธีการเพิ่มโมดูล Diapo ความกว้างเต็มรูปแบบจาก Divi

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

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

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

ใช้กรณีตัวอย่าง: การเพิ่มส่วน Hero Slider แบบเต็มความกว้างในโฮมเพจของคุณ

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

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

ใช้ Visual Builder เพิ่มส่วนเต็มความกว้างที่ด้านบนของหน้าเว็บของคุณ จากนั้นใส่โมดูล Fullwidth Slider ลงในส่วนใหม่ของคุณ บนแท็บเนื้อหาของการตั้งค่าสไลด์ความกว้างเต็มคลิก + เพิ่มรายการใหม่ เพื่อสร้างสไลด์แรกของคุณ

ในการตั้งค่าสไลด์ของสไลด์แรกของคุณอัพเดตตัวเลือกต่อไปนี้:

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

En-หัว : [ป้อนชื่อเรื่องภาพนิ่ง]
ข้อความปุ่ม : [ป้อนข้อความปุ่ม]
เนื้อหา : [ป้อนเนื้อหาข้อความของภาพนิ่ง]
URL ของปุ่ม : [ป้อน URL ปลายทางของปุ่มสไลด์]
ภาพพื้นหลัง : [ป้อนรูปภาพที่จะใช้เป็นฉากหลังของสไลด์]

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

ใช้การซ้อนทับพื้นหลัง : ใช่
สีซ้อนทับพื้นหลัง : rgba (0,0,0,0.2) การซ้อนทับนี้จะทำให้ภาพพื้นหลังมืดลงเล็กน้อยเพื่อให้อ่านข้อความได้ง่ายขึ้น

บันทึกการตั้งค่าสไลด์

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

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

ตัวเลือกเนื้อหาแบบสไลด์เต็มรูปแบบ

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

ลูกศร

เลือกว่าคุณต้องการแสดงลูกศรนำทางซ้ายหรือขวา

การควบคุม

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

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

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

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

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

ลบเงาด้านใน

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

ผลของ parallax

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

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

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

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

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

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

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

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

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

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

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

ตำรวจร่างกาย

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

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

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

สีตัวอักษร

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

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

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

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

ความสูงของเส้นมีผลต่อช่องว่างระหว่างข้อความแต่ละบรรทัดในเนื้อหาของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่คุณต้องการในช่องป้อนข้อมูล ที่อยู่ทางขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "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 มีไอคอนต่างๆให้เลือก

ปุ่มไอคอนสี

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

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

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

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

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

เลื่อนสีข้อความของปุ่ม

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

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

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

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

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

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

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

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

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

ตัวเลือกขั้นสูงโมดูลสไลด์แบบเต็มความกว้าง

ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ 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 บนอุปกรณ์เคลื่อนที่

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

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

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

ความชัดเจน

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

ตัวเลือกเนื้อหาสำหรับองค์ประกอบโมดูลสไลด์แบบเต็มความกว้าง

ชื่อเรื่อง

ตั้งค่าข้อความของชื่อเคอร์เซอร์ของคุณที่นี่

ข้อความปุ่ม

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

เนื้อหา

ป้อนเนื้อหาของเคอร์เซอร์ที่นี่ โปรดทราบว่าจำนวนข้อความที่คุณป้อนที่นี่จะกำหนดความสูงของสไลด์ของคุณ

URL ของปุ่ม

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

ลากรูปภาพ

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

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

สไลด์วิดีโอ

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

หยุดวิดีโอชั่วคราว

อนุญาตให้ผู้เล่นคนอื่นหยุดวิดีโอชั่วคราวเมื่อเริ่มเล่น

ภาพพื้นหลัง

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

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

ความกว้างของเคอร์เซอร์ของคุณถูกกำหนดโดยความกว้างของเบราว์เซอร์ ตามขนาดหน้าจอมาตรฐานเราขอแนะนำให้รูปภาพของคุณมีขนาดอย่างน้อย 1280px x 768px

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

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

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

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

สีพื้นหลัง

หากคุณต้องการใช้พื้นหลังสีทึบสำหรับสไลด์ของคุณให้ใช้ตัวเลือกสีเพื่อกำหนดสีพื้นหลัง

วิดีโอพื้นหลัง MP4

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

วิดีโอพื้นหลัง WEBM

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

ความกว้างของวิดีโอพื้นหลัง

เพื่อให้วิดีโอมีขนาดที่เหมาะสมคุณต้องป้อนความกว้างที่แน่นอน (เป็นพิกเซล) ของวิดีโอของคุณที่นี่

พื้นหลังความสูงวิดีโอ

เพื่อให้วิดีโอมีขนาดที่เหมาะสมคุณต้องป้อนความสูงที่แน่นอน (เป็นพิกเซล) ของวิดีโอของคุณที่นี่

ตัวเลือกการออกแบบองค์ประกอบองค์ประกอบสไลด์

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

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

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

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

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

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

สีการวางซ้อนข้อความ

ใช้ตัวเลือกสีเพื่อเลือกสีสำหรับการซ้อนทับข้อความ

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

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

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

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

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

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

การจัดแนวภาพสไลด์ในแนวตั้ง

การตั้งค่านี้กำหนดการจัดแนวแนวตั้งของภาพสไลด์ของคุณ รูปภาพของคุณสามารถจัดกึ่งกลางในแนวตั้งหรือจัดแนวที่ด้านล่างของสไลด์

สีข้อความ

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

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

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

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

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

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

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

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

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

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

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

Body Font

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

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

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

สีตัวอักษร

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แบบอักษรปุ่ม

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

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

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

ไอคอนปุ่ม

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

ปุ่มไอคอนสี

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

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

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

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

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

เลื่อนสีข้อความของปุ่ม

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

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

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

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

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

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

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

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

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

ตัวเลือกเคอร์เซอร์ขั้นสูงเต็มความกว้าง

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

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

ข้อความรูปภาพทางเลือก

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

[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