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

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

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

มาดำน้ำกันเถอะ!

แอบมอง

ดาวน์โหลด Divi Vertical Slider Elements Layout ฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

https://youtu.be/Nmuy9VAYo4M

สมัครสมาชิกช่อง Youtube ของเรา

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. ภาพสองภาพที่หมุนทวนเข็มนาฬิกา 90 องศา ซึ่งสามารถทำได้ง่าย ๆ โดยใช้ตัวเลือกในตัวของระบบปฏิบัติการของคุณหรือผ่านแอพพลิเคชั่นแก้ไขรูปภาพทั่วไป คุณยังสามารถหมุนรูปภาพได้โดยตรงใน WordPress โดยแก้ไของค์ประกอบสื่อ
   

หลังจากนั้นคุณพร้อมที่จะสร้างผลงานชิ้นเอกของคุณใน Divi

แนวคิดพื้นฐาน

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

นี่คือตัวอย่างโดยย่อเกี่ยวกับวิธีการทำเช่นนี้

ในส่วนปกติที่มีแถวสองคอลัมน์ ให้เพิ่มโมดูลตัวเลื่อนที่คอลัมน์ด้านซ้าย

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

จากนั้นหมุนโมดูลตัวเลื่อน 90 องศาตามแนวแกน z โดยใช้ตัวเลือกการแปลงของ Divi

จากนั้นเพิ่มระยะห่าง (ช่องว่างภายในด้านล่าง) ให้กับตัวเลื่อนเพื่อสร้างความกว้างเพิ่มเติมและจัดแนวข้อความให้ชิดขวาของแต่ละสไลด์

นี่คือผลลัพธ์

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

ด้านล่างนี้ เราจะเจาะลึกการสร้างการออกแบบตัวเลื่อนที่เป็นเอกลักษณ์เหล่านี้ร่วมกัน

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

การสร้างส่วนและแถว

ภูมิหลังของมาตรา

เริ่มต้นด้วยการสร้างส่วนปกติที่มีแถวสองคอลัมน์

ก่อนเพิ่มโมดูลในแถว ให้อัปเดตส่วนด้วยสีพื้นหลังต่อไปนี้ก่อน:

สีพื้นหลัง: #24272a

การตั้งค่าแถว

จากนั้นเราต้องกำหนดความกว้างรางน้ำแบบกำหนดเองให้แถวของเราเป็น 1 แล้วตั้งค่าความกว้างโดยใช้หน่วยความยาว vw การใช้หน่วยความยาว vw เป็นสิ่งสำคัญสำหรับการทำให้ตัวเลื่อนแนวตั้งตอบสนองได้ในภายหลัง

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ความกว้างของรางน้ำ: 1
ความกว้าง: 80vw (เดสก์ท็อปและแท็บเล็ต), 95vw (โทรศัพท์)
ความกว้างสูงสุด: 80vw (เดสก์ท็อปและแท็บเล็ต), 95vw (โทรศัพท์)

จากนั้นเราจะเพิ่มเงากล่องเพื่อการออกแบบ

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -10px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
เงาสี: rgba(255,255,255,0.03)

เพิ่มเนื้อหาหัวเรื่องโดยใช้โมดูลข้อความ

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

เพิ่มโมดูลข้อความสำหรับชื่อ

หากต้องการเพิ่มชื่อส่วนหัว ให้เพิ่มโมดูลข้อความลงในคอลัมน์ 1

อัปเดตเนื้อหาเนื้อหาด้วยหัวข้อ h2 ต่อไปนี้:

<h2>My Work</h2>

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

หัวเรื่อง 2 แบบอักษร: Karla
หัวเรื่อง 2 สีข้อความ: #ffffff
หัวเรื่อง 2 ขนาดข้อความ: 5vw (เดสก์ท็อป), 60px (แท็บเล็ต), 50px (โทรศัพท์)
Padding: บน 15%, 20% ล่าง, 5% ซ้าย, 5% ขวา

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 60px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
สีเงา: #9a2508

เพิ่มโมดูลข้อความสำหรับเนื้อหาเนื้อหา

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

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

สีข้อความ: #cccccc
ความกว้าง: 70%
การจัดตำแหน่งโมดูล: right
มาร์จิ้น: -5% ด้านบน
ช่องว่างภายใน: 5% ด้านล่าง, 10% ซ้าย, 5% ขวา

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 10px
เงาสี: rgba(255,255,255,0.03)

การสร้างแถบเลื่อนแนวตั้ง

ตอนนี้เราพร้อมที่จะสร้างตัวเลื่อนด้วยองค์ประกอบตัวเลื่อนแนวตั้งแล้ว

เมื่อต้องการทำสิ่งนี้ ให้เพิ่ม Slider Module ในคอลัมน์ 2

เปิดการตั้งค่าสไลด์ของสไลด์เริ่มต้นสองสไลด์แรก

ตัดข้อความเนื้อหาเริ่มต้นเพื่อรวมข้อความบรรทัดเดียว จากนั้นเพิ่มภาพพื้นหลังที่หมุนทวนเข็มนาฬิกาไป 90 องศาก่อนหน้านี้

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

หมุนตัวเลื่อน

ถัดไป หมุนตัวเลื่อนโดยใช้ตัวเลือกหมุนเปลี่ยนรูป:

แปลง หมุนแกน z: 90deg

ความสูงของตัวเลื่อน

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

อัปเดตสิ่งต่อไปนี้:

ความสูง: 40vw (เดสก์ท็อป), 80vw (แท็บเล็ต), 95vw (โทรศัพท์)

จากนั้นปรับช่องว่างภายในเพื่อจัดแนวข้อความทางด้านขวาของแถบเลื่อนแนวตั้ง

Padding (เดสก์ท็อป): 0px บน, 21vw ล่าง, 0px ซ้าย, 0px ขวา
Padding (แท็บเล็ต): 42vw ด้านล่าง
Padding (โทรศัพท์): 50vw ด้านล่าง

อัปเดตการตั้งค่าข้อความ

ปรับหัวเรื่องและเนื้อหาดังนี้:

การจัดตำแหน่งข้อความ: ซ้าย
แบบอักษรของชื่อเรื่อง: Karla
ขนาดข้อความชื่อเรื่อง: 32px
ความสูงของบรรทัดหัวเรื่อง: 1.3em
ระยะห่างระหว่างตัวอักษร: 3px
ความสูงของเส้นร่างกาย: 1.8em

จัดแต่งทรงผมปุ่ม

หากต้องการจัดรูปแบบและจัดตำแหน่งปุ่ม ให้อัปเดตสิ่งต่อไปนี้:

ขนาดข้อความของปุ่ม: 16px
สีพื้นหลังของปุ่ม: #9a2508
ความกว้างของขอบปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
ไอคอนปุ่ม: เครื่องหมายบวก (ดูภาพหน้าจอ)
การจัดตำแหน่งปุ่ม: ขวา
ระยะขอบของปุ่ม: 10% บน 10% ด้านล่าง

พื้นหลังไล่โทนสี

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

ไล่ระดับพื้นหลังซ้ายสี: #9a2508
พื้นหลังไล่ระดับสีขวาสี: rgba(0,0,0,0)
ตำแหน่งเริ่มต้น: 12%
ตำแหน่งสุดท้าย: 0%
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

การหมุนปุ่มและลูกศรเลื่อนด้วย CSS ที่กำหนดเอง

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

transform: rotate(-90deg);

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

transform: rotate(-90deg);
font-size: 80px;

แค่นั้นแหละ!

มาดูผลสุดท้ายกัน

ผลสุดท้าย

และนี่คือบนแท็บเล็ตและโทรศัพท์

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

ความคิดสุดท้าย

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

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

หวังว่านี่จะเป็นแรงบันดาลใจให้คุณสำหรับโครงการต่อไปของคุณ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!