วิธีสร้าง Mockup แกลเลอรีเลื่อนด้วยตัวเลือกโอเวอร์โฟลว์ใหม่ของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด Scroll Gallery Mockup Design ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

เพิ่มมาตราใหม่

ขนาด

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

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

ระยะห่าง

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

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

ชายแดน

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

กล่องเงา

เพิ่มเงาของกล่องที่ละเอียดอ่อนเพื่อให้รูปร่างผ่านเข้ามา

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

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวแรกในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

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

• สีพื้นหลัง: #ffffff

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและอนุญาตให้แถวใช้ความกว้างทั้งหมดของส่วน

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นถัดไป

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

กล่องเงา

และเพิ่มเงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.92)

ดัชนี Z

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

• ดัชนี Z: 99

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H2

โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลข้อความที่มีเนื้อหา H2 บางส่วน

การตั้งค่าข้อความ H2

เมื่อคุณเพิ่มสำเนา H2 แล้ว ให้ไปที่การตั้งค่าข้อความ H2 และทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของหัวเรื่อง 2: Abril Fatface
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดตัวอักษร: 1.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองต่อไป

• ขอบบน: 1.5vw (เดสก์ท็อปและแท็บเล็ต), 3.5vw (โทรศัพท์)
• ขอบล่าง: 1.5vw (เดสก์ท็อปและแท็บเล็ต), 3.5vw (โทรศัพท์)

เพิ่มแถว #2

โครงสร้างคอลัมน์

ต่อแถวสอง! ที่นี่ เราใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ความสูง: 38vw (เดสก์ท็อป), 100vw (แท็บเล็ต), 120vw (โทรศัพท์)
• ความสูงสูงสุด: 38vw (เดสก์ท็อป), 100vw (แท็บเล็ต), 120vw (โทรศัพท์)

ระยะห่าง

จากนั้นไปที่การตั้งค่าระยะห่างและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

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

ล้นแนวตั้ง

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

• ล้นแนวตั้ง: เลื่อน

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพ

ไปข้างหน้าและเพิ่ม Image Module แรกในแถวและอัปโหลดภาพที่คุณเลือก คุณสามารถดาวน์โหลดรูปภาพที่เราใช้ตลอดบทช่วยสอนนี้ได้โดยไปที่โพสต์ Wedding Planner Layout Pack

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

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

• ระยะขอบล่าง: 1vw

โคลนโมดูลภาพได้มากเท่าที่คุณต้องการ

เมื่อคุณแก้ไข Image Module แรกเสร็จแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ

อัพโหลดรูปภาพต่างๆ

แน่นอน คุณจะต้องการเปลี่ยนรูปภาพในแต่ละภาพที่ซ้ำกัน

เพิ่มแถว #3

โครงสร้างคอลัมน์

ต่อแถวที่สามและสุดท้าย! เรากำลังใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

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

• สีพื้นหลัง: #ffffff

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและอนุญาตให้แถวใช้ความกว้างทั้งหมดของส่วน

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

เพิ่มค่าช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

• ด้านบน: 2.1vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 2.1vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)

กล่องเงา

และเพิ่มเงากล่องเพื่อสร้างความลึก

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.92)

ดัชนี Z

เพื่อให้แน่ใจว่าแถวนี้ (และโดยเฉพาะอย่างยิ่งเงาของกล่อง) ทับซ้อนกับแถวก่อนหน้า เราจะเพิ่มดัชนี Z

• ดัชนี Z: 99

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

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

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

แก้ไขการตั้งค่าปุ่มด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 1px
• แบบอักษรของปุ่ม: Abril Fatface

ระยะห่าง

และสร้างรูปร่างที่คุณต้องการโดยใช้ค่าการเติมที่กำหนดเอง

• ด้านบน: 0.5vw (เดสก์ท็อป), 1vw (แท็บเล็ต), 2vw (โทรศัพท์)
• ช่วงล่าง: 0.5vw (เดสก์ท็อป), 1vw (แท็บเล็ต), 2vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)

แถบเลื่อนสไตล์

เพิ่ม CSS ID ไปที่แถว #2

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

• คลาส CSS: แถบเลื่อนรูปภาพ

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

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

แถบเลื่อนสไตล์โดยใช้ CSS

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

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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