คุณต้องการสร้างตัวเลื่อนหีบเพลง Divi ตอบสนอง?
แถบเลื่อนหีบเพลงเป็นวิธีที่สนุกและน่าดึงดูดในการแสดง เนื้อหา ในพื้นที่ขนาดเล็ก
แถบเลื่อนหีบเพลงโดยทั่วไปประกอบด้วยองค์ประกอบหลายอย่าง (หรือแผง) เรียงซ้อนกันในแนวนอนเหมือนกับรอยพับของผ้าม่าน และเมื่อคุณวางเมาส์เหนือแผงใดแผงหนึ่ง แผงจะขยายเพื่อแสดง เนื้อหา ในขณะที่แผงหีบเพลงอื่นๆ หดตัว นี่คือจุดที่เราได้รับเอฟเฟกต์แบบหีบเพลงจากการขยายและการหดตัว
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างตัวเลื่อนหีบเพลงที่ตอบสนองใน Divi ใช้ CSS เท่านั้น ในการดำเนินการนี้ เราจะใช้หลายโมดูล Divi เพื่อทำหน้าที่เป็นแผงหีบเพลง
การสำรวจ
นี่คือภาพรวมโดยย่อของสิ่งที่เราจะทำได้ในบทช่วยสอนนี้
ดาวน์โหลด DIVI ทันที!!!
การสร้างหน้าใหม่ด้วย Divi Builder
ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:
- จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
- ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder
- จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
การสร้างตัวเลื่อนหีบเพลงตอบสนองใน Divi
การสร้างเส้น
ในการเริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนปกติ
จากนั้นเปิดการตั้งค่าบรรทัดและอัปเดตสิ่งต่อไปนี้:
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 100%
- ความกว้างสูงสุด: 800px
- ความสูง: 400px (เดสก์ท็อป); 700px (แท็บเล็ตและโทรศัพท์)
ค่าความกว้างและความกว้างสูงสุดสามารถเปลี่ยนแปลงได้ตามความต้องการ หีบเพลงจะพอดีและทำงานในความกว้างของเส้นใดก็ได้
พารามิเตอร์คอลัมน์
ตอนนี้เราได้กำหนดความสูงสำหรับแถวแล้ว ให้เปิดการตั้งค่าคอลัมน์และเพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:
เดสก์ทอป
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
ยาเม็ด
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
การสร้างแผงหีบเพลงด้วยโมดูล Blurb
ตัวเลื่อนหีบเพลงสามารถสร้างได้โดยใช้โมดูลประเภทใดก็ได้ หากเราต้องการ เราสามารถใช้โมดูลต่างๆ ร่วมกันเพื่อทำหน้าที่เป็นแผงหีบเพลงได้ แต่สำหรับการออกแบบนี้ เราจะใช้โมดูล Blurb
เริ่มต้นด้วยการเพิ่มโมดูล Blurb ลงในบรรทัด
การออกแบบ Blurb Mod
เปิดการตั้งค่าโมดูลการนำเสนอและอัปเดตสิ่งต่อไปนี้:
คงชื่อเรื่องสมมติไว้และ เนื้อหา จากร่างกาย เราสามารถเปลี่ยนสิ่งนี้ได้ในภายหลัง
ถัดไป อัปเดตไอคอนการนำเสนอดังนี้:
- ไอคอน (เดสก์ท็อป): ไอคอนเส้นลูกศรแนวนอน (ดูภาพหน้าจอ)
- ไอคอน (โฮเวอร์): (ดูภาพหน้าจอ)
- ไอคอน (แท็บเล็ตและโทรศัพท์): (ดูภาพหน้าจอ)
พื้นหลัง
จากนั้นให้ประกาศเป็นภาพพื้นหลังและการซ้อนทับแบบไล่ระดับบนโฮเวอร์ดังนี้:
- เพิ่มภาพพื้นหลังอย่างน้อย 1000px กว้าง
- ตำแหน่งภาพพื้นหลัง: กลางซ้าย
จากนั้นเพิ่มการซ้อนทับพื้นหลังแบบไล่ระดับสี
โฉบ
- ไล่ระดับพื้นหลังไปทางซ้าย (โฮเวอร์): #3e215b
- ขวา (โฮเวอร์) การไล่ระดับสีพื้นหลัง: rgba(0,0,0,0)
- ทิศทางการไล่ระดับสี: 90 องศา
- สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่
ไอคอน
- สีไอคอน: #ffffff
- ตำแหน่งรูปภาพ/ไอคอน: ขวา
ถัดไป สลับไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:
ชื่อเรื่องและเนื้อหาของข้อความ
- แบบอักษรของชื่อเรื่อง: Poppins
- น้ำหนักแบบอักษร: กึ่งหนา
- สีข้อความของชื่อเรื่อง: โปร่งใส (เดสก์ท็อป), #ffffff (โฮเวอร์)
- ขนาดข้อความชื่อเรื่อง: 22px
- สีข้อความ: โปร่งใส (เดสก์ท็อป), #ffffff (โฮเวอร์)
ความสูงของกล่องและเงา
เมื่อปรับแต่งข้อความแล้ว ให้โมดูลมีความสูง 100% และเงาของกล่องดังนี้:
- ส่วนสูง: 100%
- กล่องเงา: ดูภาพหน้าจอ
- ตำแหน่งแนวนอน: -12px
- ตำแหน่งแนวตั้ง: 0px
CSS ที่กำหนดเอง
เพื่อให้แผงหีบเพลงของเรา (หรือโมดูล Blurb) เติบโตและหดตัวกับโมดูลที่เหลือ เราจำเป็นต้องเพิ่ม CSS ที่กำหนดเองเพื่อเปลี่ยนขนาดของโมดูลด้วย flex-grow
เนื่องจากเราจะมีโมดูลทั้งหมด 5 โมดูลที่ประกอบเป็นหีบเพลง เราจึงเพิ่ม "flex:1" สำหรับสถานะเริ่มต้น แล้วเปลี่ยนเป็น "flex:5" ในสถานะโฮเวอร์
ภายใต้แท็บ Advanced ให้เพิ่ม CSS แบบกำหนดเองต่อไปนี้ไปยังองค์ประกอบ Blurb หลัก:
สำนัก
flex:1;
position: relative !important;
transition: flex 800ms !important;
เมื่อโฮเวอร์
flex:5;
position: relative !important;
transition: flex 800ms !important;
จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ใน CSS เนื้อหา Blurb:
สำนัก
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
ยาเม็ด
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
ล้นและการเปลี่ยนแปลง
- แนวนอนล้น: ซ่อน
- ล้นแนวตั้ง: ซ่อน
- ระยะเวลาการเปลี่ยนภาพ: 400ms
- เส้นโค้งความเร็วการเปลี่ยน: เชิงเส้น
ดีมาก! เป็นการปรับแต่งโมดูล Blurb อย่างจริงจัง แต่ข่าวดีก็คือ สิ่งที่เราต้องทำคือทำซ้ำเพื่อสร้างแผงหีบเพลงที่เหลืออยู่
เค้าโครงที่ซ้ำกันสำหรับแผงหีบเพลงเพิ่มเติม
วางเมาส์เหนือโมดูลการนำเสนอแล้วคลิกไอคอนที่ซ้ำกันสี่ครั้งเพื่อสร้างแผงหีบเพลงทั้งหมดห้าแผง (หรือโมดูล)
ถัดไป อัปเดตภาพพื้นหลังสำหรับคำประกาศใหม่แต่ละรายการที่คุณทำซ้ำ
ผลสุดท้าย
เมื่อเราได้ผ่านขั้นตอนทั้งหมดแล้ว เรามาดูผลลัพธ์สุดท้ายกัน
ดาวน์โหลด DIVI ทันที!!!
สรุป
ตัวเลื่อนหีบเพลงที่ตอบสนองนี้มีองค์ประกอบที่เป็นเอกลักษณ์บางอย่างที่ทำให้ใช้งานได้สนุก แผงหีบเพลงขยายและหดตัวอย่างแนบเนียนเมื่อวางเมาส์เหนือโดยไม่มีข้อผิดพลาดที่ไม่คาดคิด
และไอคอนการนำเสนอจะเปลี่ยนเมื่อวางเมาส์เหนือและบนอุปกรณ์เคลื่อนที่เพื่อเพิ่ม UX เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
