3 วิธีที่เป็นประโยชน์ในการใช้ตัวเลือกล้นใน Divi

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

มาเริ่มกันเลย.

ทำความเข้าใจกับตัวเลือกโอเวอร์โฟลว์ของ Divi

ตัวเลือกโอเวอร์โฟลว์ของ Divi ช่วยให้คุณสามารถตั้งค่าคุณสมบัติโอเวอร์โฟลว์ css ขององค์ประกอบเป็นค่าใดค่าหนึ่งต่อไปนี้:

1. ค่าเริ่มต้น – ค่าเริ่มต้นจะมองเห็นได้ (ดูด้านล่าง)
2. มองเห็นได้ – เนื้อหาที่ล้นจะยังคงมองเห็นได้และไม่ถูกตัดออกเมื่อขยายออกนอกกรอบ เนื่องจากนี่เป็นการตั้งค่าเริ่มต้นใน Divi คุณแทบจะไม่ต้องเลือกเลย
3. เลื่อน – เนื้อหาที่ล้นจะถูกซ่อน แต่ผู้ใช้สามารถเลื่อนดูเนื้อหาที่ซ่อนอยู่ทั้งในแนวตั้งหรือแนวนอน
4. ซ่อน - เนื้อหาที่ล้นนอกกรอบจะถูกซ่อน (ไม่สามารถเลื่อนได้)
5. อัตโนมัติ – ตัวเลือกนี้จะใช้งานฟังก์ชันการเลื่อนเมื่อจำเป็น (เช่น เนื้อหาขยายออกไปนอกกรอบ) สิ่งนี้จะมีประโยชน์สำหรับการออกแบบที่มีความสูงหรือความกว้างที่กำหนดซึ่งจำเป็นต้องมีความสามารถในการเลื่อนบนเบราว์เซอร์ขนาดเล็ก

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

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

มองเห็นได้ล้น (ค่าเริ่มต้น)

ในตัวอย่างนี้ เนื้อหาที่วางตำแหน่งภายนอกคอนเทนเนอร์แถวยังคงมองเห็นได้ ซึ่งเป็นการตั้งค่าเริ่มต้นสำหรับองค์ประกอบทั้งหมดใน Divi

ล้นซ่อน

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

เลื่อนล้น

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

ตัวอย่างเช่น นี่คือโมดูลข้อความที่มีความสูง 400px เนื้อหาของโมดูลข้อความขยายเกินกว่าโมดูลข้อความ แต่ยังคงมองเห็นได้ตามค่าเริ่มต้น

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

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

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

3 วิธีที่เป็นประโยชน์ในการใช้ตัวเลือกการล้นของ Divi ใน Divi

#1 ใช้โอเวอร์โฟลว์ซ่อนเพื่อคลิปเนื้อหาที่ล้นเพื่อการออกแบบที่ไม่เหมือนใคร

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

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

Custom Padding: บน 12vw, 12vw ด้านล่าง

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

ความกว้าง: 80vw
ความกว้างสูงสุด: 80vw
ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
กล่องเงา: ดูภาพหน้าจอ
ความแรงของกล่องเงาเบลอ: 80px

จากนั้นเพิ่มโมดูลข้อความในแถวและอัปเดตการตั้งค่าโมดูลข้อความต่อไปนี้:

ขั้นแรกให้เพิ่มหัวข้อ h2 ในกล่องเนื้อหาดังนี้:

<h2>Overflow</h2>

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

หัวข้อ 2 แบบอักษร: Lato
ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
ส่วนหัว 2 รูปแบบตัวอักษร: TT
การจัดตำแหน่งข้อความหัวเรื่อง 2: center
หัวเรื่อง 2 สีข้อความ: #dddddd
หัวเรื่อง 2 ขนาดข้อความ: 15vw
หัวเรื่อง 2 ระยะห่างตัวอักษร: 0.1em
หัวเรื่อง 2 ข้อความเงา: ดูภาพหน้าจอ
หัวเรื่อง 2 สีเงาข้อความ: rgba(0,0,0,0.05)

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

ระยะขอบ: -6vw บน, -10vw ซ้าย, -10vw ขวา

ถัดไป เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลที่คุณเพิ่งสร้างและอัปเดตสิ่งต่อไปนี้:

เนื้อหา:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(อีกอย่าง ข้อมูลโค้ดแบบนี้เป็นวิธีที่ดีในการใช้ประโยชน์จากตัวเลือกการเลื่อนโอเวอร์โฟลว์)

แบบอักษรของข้อความ: Lato
การจัดตำแหน่งข้อความ: right
ขนาดข้อความ: 24px (เดสก์ท็อป), 16px (โทรศัพท์)
ความสูงของบรรทัดข้อความ: 1.3em
ความกว้างสูงสุด: 50%
การจัดตำแหน่งโมดูล: right
Padding: 4vw ขวา

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

จากนั้นอัปเดตการตั้งค่ารูปภาพดังนี้:

ความกว้างสูงสุด: 35vw
ระยะขอบ: -12vw บน -8vw ล่าง -5vw ซ้าย
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -40px
ตำแหน่งแนวตั้งเงาของกล่อง: -50px
เงาสี: rgba(0,0,0,0.17)

การออกแบบโดยตั้งค่า Row เป็น Overflow Visible (ค่าเริ่มต้น)

ตอนนี้ มาดูการออกแบบที่ทำให้แถวล้นของเราตั้งค่าให้มองเห็นได้ (ค่าเริ่มต้น)

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

ออกแบบโดยตั้งค่า Row เป็น Overflow Hidden

ตอนนี้เรามาดูกันว่าจะเกิดอะไรขึ้นเมื่อเราใช้คุณสมบัติ Overflow Hidden สำหรับแถว เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

แนวนอนล้น: ซ่อน
ล้นแนวตั้ง: ซ่อน

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

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

#2 การใช้ Overflow Scroll เพื่อให้ผู้ใช้สามารถเลื่อนดูเนื้อหาในแนวตั้ง

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

สร้างส่วนปกติด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลข้อความที่มีเนื้อหาต่อไปนี้:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

จากนั้นอัปเดตการตั้งค่าการออกแบบโมดูลข้อความดังนี้:

แบบอักษรของข้อความ: Lato

ลิงค์สีข้อความ: #333333
ขนาดข้อความลิงก์: 18px

สีข้อความของรายการสั่งซื้อ:
ขนาดรายการสั่งซื้อ: 20px
รายการที่สั่งซื้อ ความสูงของบรรทัด: 1.8em
ประเภทรายการสั่งซื้อ: decimal-leading-zero

หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
หัวเรื่อง 3 ขนาดข้อความ: 50px
ความกว้างสูงสุด: 500px
เบาะ: 3% บน, 3% ล่าง, 8% ซ้าย, 8% ขวา

นี่คือลักษณะของโมดูลข้อความก่อนที่เราจะให้เลื่อนความสูงและล้น

ตอนนี้ อัปเดตโมดูลข้อความด้วยความสูงสูงสุด 400px เนื่องจากมองเห็นค่าโอเวอร์โฟลว์เริ่มต้นสำหรับโมดูลข้อความ คุณจะสังเกตเห็นข้อความล้นด้านล่างโมดูล

สิ่งที่เราต้องทำตอนนี้คือตั้งค่าโอเวอร์โฟลว์แนวตั้งให้เลื่อนดังนี้:

ล้นแนวตั้ง: scroll

นี่คือการออกแบบขั้นสุดท้าย

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

• วิธีสร้าง Mockup แกลเลอรีเลื่อนด้วยตัวเลือกโอเวอร์โฟลว์ใหม่ของ Divi
• วิธีการออกแบบพื้นที่วิดเจ็ตโพสต์ล่าสุดที่เลื่อนได้ใน Divi

#3 การใช้ Overflow Scroll เพื่อให้ผู้ใช้สามารถเลื่อนดูเนื้อหาในแนวนอน

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

เพื่อแสดงให้คุณเห็นว่าต้องทำอย่างไร เราจะสร้างตัวอย่างสั้นๆ ร่วมกัน

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

จากนั้นเพิ่มโมดูลการนำเสนอลงในแถว

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

การจัดตำแหน่งข้อความ: center
แบบอักษรของชื่อเรื่อง: Lato
น้ำหนักแบบอักษรของชื่อเรื่อง: หนัก
ช่องว่างภายใน: 3% ซ้าย 3% ขวา

ทำซ้ำโมดูลการนำเสนอ 5 ครั้งเพื่อให้คุณมีข้อความแจ้งทั้งหมด 6 รายการในคอลัมน์แถวของคุณ

จากนั้นอัปเดตการตั้งค่าแถวด้วย CSS ที่กำหนดเองต่อไปนี้เป็นองค์ประกอบหลักของคอลัมน์

display: grid;
grid-template-columns: repeat(6, 50%);

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

ล้นแนวนอน: เลื่อน

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

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

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์แบบเต็มเกี่ยวกับการสร้างการ์ดรูดแนวนอน

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

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

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

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

ไชโย!