วิธีการสร้างแถบเลื่อนที่ตอบสนองต่อการตอบสนองใน Divi

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

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

ตรวจสอบออก!

การสำรวจ

นี่คือภาพรวมของสิ่งที่เราจะสร้างในบทช่วยสอนนี้

มาเริ่มบทเรียนกันก่อน

สิ่งที่คุณต้องเริ่มต้น

ในการเริ่มต้นคุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งาน ธีม Divi ติดตั้ง (หรือปลั๊กอิน Divi Builder หากคุณไม่ได้ใช้ ธีม Divi).
2. สร้างหน้าใหม่ใน WordPress และใช้เครื่องมือสร้าง Divi เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. ดาวน์โหลดเกี่ยวกับภาพต่าง ๆ ของ 5 ในไลบรารีเพื่อใช้เป็นภาพพื้นหลังที่จำเป็นสำหรับการสอน

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

สร้างแถบเลื่อนด้วยหีบเพลงที่ตอบสนองบน Divi

การสร้างเส้น

ในการเริ่มต้นเพิ่มแถวของคอลัมน์ไปยังส่วนปกติ

จากนั้นเปิดการตั้งค่าสำหรับบรรทัดและอัพเดตต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 800px
• ความสูง: 400px (เดสก์ท็อป); 700px (แท็บเล็ตและโทรศัพท์)

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

พารามิเตอร์คอลัมน์

เมื่อตั้งค่าความสูงของแถวแล้วให้เปิดการตั้งค่าคอลัมน์และเพิ่มโค้ด CSS ต่อไปนี้ในองค์ประกอบหลัก:
สำนัก

display:flex;flex-direction: row;align-items:center;height: 100%;

ยาเม็ด

flex-direction: column;

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

การสร้างแผงหีบเพลงด้วยโมดูลบทสรุป

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

เริ่มต้นด้วยการเพิ่มโมดูลการนำเสนอในบรรทัด

การออกแบบโมดูลนามธรรม

เปิดการตั้งค่าโมดูลสรุปและอัพเดตสิ่งต่อไปนี้:

ให้ชื่อเรื่องสมมติและ เนื้อหา จากร่างกาย เราสามารถเปลี่ยนสิ่งนี้ได้ในภายหลัง

จากนั้นอัปเดตไอคอนงานนำเสนอดังนี้:

• ไอคอน (เดสก์ท็อป): ไอคอนแสดงเส้นลูกศรแนวนอน (ดูภาพหน้าจอ)

• ไอคอน (โฮเวอร์): ไอคอนตรวจสอบ (ดูภาพหน้าจอ)

• ไอคอน (แท็บเล็ตและโทรศัพท์): ไอคอนแสดงเส้นลูกศรแนวตั้ง (ดูภาพหน้าจอ)

สิ่งแวดล้อม

จากนั้นให้ภาพพื้นหลังและภาพซ้อนทับมีการไล่ระดับสีดังนี้:

• เพิ่มภาพพื้นหลังที่มีความกว้างอย่างน้อย 1000 พิกเซล
• ตำแหน่งของภาพพื้นหลัง: ตรงกลางซ้าย

จากนั้นเพิ่มการซ้อนทับพื้นหลังแบบไล่ระดับสี

ลอย

• พื้นหลังไล่ระดับสีด้านซ้าย (โฮเวอร์): # 3e215b
• ไล่สีพื้นหลังเป็นสีขวา (โฮเวอร์): rgba (0,0,0,0)
• ทิศทางการไล่ระดับสี: 90deg
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ไอคอน

• ไอคอนสี: #ffffff
• ภาพ / ตำแหน่งของไอคอน: ด้านซ้าย

จากนั้นไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:

ชื่อเรื่องและเนื้อหาของข้อความ

• แบบอักษรของชื่อเรื่อง: Poppins
• ชื่อตัวอักษร: Semi Bold
• ข้อความชื่อสี: โปร่งใส (เดสก์ท็อป), #ffffff (โฮเวอร์)
• ขนาดหัวเรื่องข้อความ: 23px
• สีข้อความ: โปร่งใส (เดสก์ท็อป), #ffffff (โฮเวอร์)

ความสูงและเงากล่อง

เมื่อข้อความมีสไตล์แล้วให้กำหนดโมดูลความสูง 100% และกล่องเงาดังต่อไปนี้:

• ความสูง: 100%
• Box Shadow: ดูภาพหน้าจอ
• เงาของกล่องตำแหน่งแนวนอน: -12px
• เงาของกล่องตำแหน่งแนวตั้ง: 0px

ประกาศแจ้ง CSS ที่กำหนดเอง

เพื่อให้แผงหีบเพลงของเรา (หรือโมดูลการนำเสนอ) ขยายและทำสัญญากับส่วนที่เหลือของโมดูลเราจำเป็นต้องเพิ่ม CSS ที่กำหนดเองเพื่อเปลี่ยนขนาดของโมดูลด้วยการเติบโตแบบยืดหยุ่น เนื่องจากเราจะมีโมดูลทั้งหมด 5 โมดูลที่ประกอบกันเป็นหีบเพลงเราจึงเพิ่ม "flex: 1" สำหรับสถานะเริ่มต้นจากนั้นเราจึงเปลี่ยนเป็น "flex: 5" ในสถานะโฮเวอร์

ภายใต้แท็บขั้นสูงให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ซึ่งเป็นองค์ประกอบ Blurb หลัก:

สำนัก

flex:1;position: relative !important;transition: flex 800ms !important;

ยาเม็ด

flex:5;

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงใน CSS Blurb Content:

สำนัก

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

ยาเม็ด

width: 100%;height: 100%;position: relative !important;

ล้นและการเปลี่ยนแปลง

• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน
• ระยะเวลาของการเปลี่ยนแปลง: 400ms
• กราฟความเร็วการเปลี่ยน: เชิงเส้น

ดี! เป็นการปรับแต่งโมดูลการนำเสนออย่างจริงจัง แต่ข่าวดีก็คือสิ่งที่เราต้องทำคือทำซ้ำเพื่อสร้างแผงหีบเพลงที่เหลือ

ทำซ้ำ Blurbs สำหรับแผงหีบเพลงเพิ่มเติม

วางเมาส์เหนือโมดูลการนำเสนอแล้วคลิกไอคอนที่ซ้ำกันสี่ครั้งเพื่อสร้างแผงหีบเพลง (หรือโมดูล) ทั้งหมดห้าแผง

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

ผลสุดท้าย

คิดสุดท้าย

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