การสร้าง Inline Scroll เปิดเผยด้วย Divi

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

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

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลด Inline Scroll เปิดเผยเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

สร้างหน้าใหม่โดยใช้โฮมเพจของ DJ Layout Pack

เพิ่มหน้าใหม่

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

อัพโหลดโฮมเพจดีเจ

ดำเนินการต่อโดยอัปโหลดเค้าโครงหน้าแรกของ DJ ไปยังหน้าของคุณ

เพิ่มค่าดัชนี Z ที่สูงขึ้นในแต่ละส่วนในหน้า

เพิ่มดัชนี Z ที่สูงขึ้นไปยังหมวดฮีโร่

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

• ดัชนี Z: 2

คัดลอก Z ดัชนี

เมื่อคุณเพิ่มดัชนี z แล้ว คุณสามารถคัดลอกได้

วางไปยังส่วนอื่นๆ ในหน้า ยกเว้นส่วนที่ #2

และวางลงในส่วนอื่นๆ ทั้งหมดบนหน้า ยกเว้นส่วน #2 (ส่วนที่มีคอลัมน์ที่เราจะแปลงเป็นการเลื่อนแบบอินไลน์จะเปิดเผย)

เปลี่ยนมาตรา #2

วางเนื้อหาคอลัมน์ในแถวที่แยกจากกัน

เปลี่ยนโครงสร้างคอลัมน์แถว

มาเริ่มแก้ไขส่วนที่สองกัน โดยเริ่มจากโครงสร้างคอลัมน์ของแถว

แถวที่ซ้ำกัน

ดำเนินการต่อด้วยการโคลนแถว

ลบโมดูลในแถว

ลบโมดูลข้อความและปุ่มในแถวแรกและโมดูลเสียงในแถวที่สอง

แก้ไขแถว #1 ในส่วน #2

ลบโมดูลเสียงบางส่วน (เพื่อให้พอดีกับขนาดหน้าจอที่เล็กลง)

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

เพิ่มขอบล่างให้กับแถว

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

• ขอบล่าง: 700px

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

ได้เวลาเริ่มแปลงคอลัมน์เป็นการเปิดเผยการเลื่อนแบบอินไลน์แล้ว! เปิดการตั้งค่าคอลัมน์

เงากล่องเลื่อน

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

• ความชัดเจนของเงากล่อง: 150px
• เงาสี: rgba(0,0,0,0.55)

โฮเวอร์แปลงมาตราส่วน

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

• ด้านล่าง: 110%
• ขวา: 110%

องค์ประกอบหลักเริ่มต้น

ในการทำให้คอลัมน์คงที่ เราจะเพิ่มโค้ด CSS สองสามบรรทัดลงในองค์ประกอบหลักของคอลัมน์

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

เลื่อนองค์ประกอบหลัก

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

position: fixed;

ดัชนี Z เริ่มต้น

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

• ดัชนี Z: 0

ดัชนีโฮเวอร์ Z

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

• ดัชนี Z: 10

แก้ไขแถว #2 ในส่วน #2

เพิ่มการเติมด้านบนให้กับคอลัมน์

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

• ช่องว่างภายในด้านบน: 80px

เพิ่มขอบล่างแบบกำหนดเองไปยังส่วนต่างๆ ทั่วทั้งหน้า

ค้นหาส่วน

เปิดการตั้งค่าส่วน

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

เพิ่มขอบล่าง

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

• ขอบล่าง: 700px

ค้นหาส่วน

เปิดการตั้งค่าส่วน

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

เพิ่มขอบล่าง

และเพิ่มระยะขอบด้านล่างด้วย

• ขอบล่าง: 700px

ลบส่วนที่เกินออก

นำส่วนที่ #2 ด้านล่างออก

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

• ด้านล่าง: 0px

ค้นหาส่วน

เปิดการตั้งค่าส่วน

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

ลบช่องว่างภายในและเพิ่มช่องว่างภายใน

เพิ่มช่องว่างภายในบางส่วนและลบช่องว่างภายในด้านล่าง

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 0px

ค้นหาส่วน

เปิดการตั้งค่าส่วน

ไปยังส่วนสุดท้าย เปิดการตั้งค่าส่วน

ลบช่องว่างภายใน

ถอดแผ่นรองด้านบนออก เสร็จแล้ว!

• ช่องว่างภายในด้านบน: 0px

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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