การติดฉลากมุมรูปภาพในตารางแกลเลอรีอันน่าทึ่งด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ดาวน์โหลดเค้าโครงส่วนแกลลอรี่ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

ระยะห่าง

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

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

เพิ่มแถวใหม่

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

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

สีพื้นหลัง

เพิ่มสีพื้นหลังสีขาวต่อไป

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

ขนาด

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

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

ระยะห่าง

ดำเนินการต่อโดยลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

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

คอลัมน์ 1, 2, 3 และ 4 องค์ประกอบหลัก

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

width: 25% !important;

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

อัพโหลด 1:1 รูปภาพ

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

ไลท์บ็อกซ์

เปิดใช้งานตัวเลือกไลท์บ็อกซ์ในการตั้งค่าลิงก์ถัดไป

• เปิดในไลท์บ็อกซ์: ใช่

ขนาด

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

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

ตัวกรองเริ่มต้น

เรากำลังเปลี่ยนความสว่างด้วย

• ความสว่าง: 50%

โฮเวอร์ฟิลเตอร์

และเราจะนำกลับมาที่ '100%' เมื่อวางเมาส์เหนือ

• ความสว่าง: 100%

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

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

• ดัชนี Z: 0

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

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

• ดัชนี Z: 100

Clone Image Module 3 ครั้ง & วางในคอลัมน์ที่เหลือ

เมื่อคุณสร้าง Image Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนได้สามครั้ง วางรายการที่ซ้ำกันในสามคอลัมน์ที่เหลือของแถว

เปลี่ยนรูปภาพ

เปลี่ยนภาพที่ซ้ำกัน

เพิ่มระยะขอบบนให้กับโมดูลรูปภาพในคอลัมน์ 2

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

• มาร์จิ้นสูงสุด: 24.7vw

เพิ่มโมดูลข้อความด้านล่างโมดูลรูปภาพ #1

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

โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความ เพิ่มตัวเลขลงในกล่องเนื้อหา

สีพื้นหลัง

เปลี่ยนสีพื้นหลังต่อไป สีนี้ต้องตรงกับสีพื้นหลังที่คุณกำหนดให้กับแถว

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

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

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของข้อความ: Lora
• การจัดตำแหน่งข้อความ: ขวา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 3vw
• ความสูงของบรรทัดข้อความ: 3vw

ขนาด

เรากำลังลดความกว้างของโมดูลด้วย

• ความกว้าง: 7vw

ระยะห่าง

สร้างพื้นที่บางส่วนสำหรับโมดูลในการตั้งค่าระยะห่างถัดไป

• ช่องว่างภายในด้านบน: 0.5vw
• แผ่นรองด้านล่าง: 2.5vw
• ช่องว่างภายในด้านขวา: 0.9vw

ดัชนี Z

และเพิ่มดัชนี Z

• ดัชนี Z: 99

โคลนโมดูลข้อความ 3 ครั้ง

เมื่อคุณทำตามขั้นตอนทั่วไปสำหรับโมดูลข้อความเสร็จแล้ว คุณสามารถโคลนได้สามครั้ง

การวางตำแหน่ง

วางตำแหน่งที่ซ้ำกันตามลำดับ:

ปรับแต่งโมดูลข้อความ

โมดูลข้อความ #1

มาร์จิ้นติดลบ

ถึงเวลาเริ่มปรับแต่งโมดูลข้อความต่างๆ ตามตำแหน่งแล้ว! เปิดโมดูลข้อความในคอลัมน์ 1 และเพิ่มระยะขอบบนที่เป็นค่าลบ

• ขอบบน: -5.9vw

กล่องเงา

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

• กล่องเงาตำแหน่งแนวนอน: 7vw
• กล่องเงาตำแหน่งแนวตั้ง: 5.9vw
• ความแรงของการกระจายเงาของกล่อง: 0px
• เงาสี: rgba(35,50,255,0.94)

โมดูลข้อความ #2

เปลี่ยนเลข

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

การจัดตำแหน่งข้อความ

แก้ไขการจัดตำแหน่งข้อความด้วย

• การจัดตำแหน่งข้อความ: ซ้าย

การจัดตำแหน่งโมดูล

และเปลี่ยนการจัดตำแหน่งโมดูลในการตั้งค่าการปรับขนาด

• การจัดตำแหน่งโมดูล: ขวา

ระยะห่าง

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

• อัตรากำไรขั้นต้น: -6vw
• ช่องว่างภายในด้านซ้าย: 0.9vw

กล่องเงา

เสร็จสิ้นการออกแบบโมดูลข้อความโดยเพิ่มเงาของกล่อง

• กล่องเงาตำแหน่งแนวนอน: 7vw
• กล่องเงาตำแหน่งแนวตั้ง: -6vw
• ความแรงของการกระจายเงาของกล่อง: 0px
• สีเงา: #ededed

โมดูลข้อความ #3

เปลี่ยนเลข

ไปยังโมดูลข้อความในคอลัมน์ 3! เปลี่ยนหมายเลขในกล่องเนื้อหา

มาร์จิ้นติดลบ

ไปที่แท็บการออกแบบและเพิ่มระยะขอบบนที่เป็นค่าลบ

• อัตรากำไรขั้นต้น: -6vw

กล่องเงา

ใช้เงากล่องด้วย

• กล่องเงาตำแหน่งแนวนอน: -7vw
• กล่องเงาตำแหน่งแนวตั้ง: -6vw
• ความแรงของการกระจายเงาของกล่อง: 0px
• Shadow Color: #ff2323

โมดูลข้อความ #4

เปลี่ยนเลข

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

การจัดตำแหน่งข้อความ

จากนั้น เปลี่ยนการจัดแนวข้อความ

• การจัดตำแหน่งข้อความ: ซ้าย

การจัดตำแหน่งโมดูล

แก้ไขการจัดตำแหน่งโมดูลในการตั้งค่าการปรับขนาดด้วย

• การจัดตำแหน่งโมดูล: ขวา

เปลี่ยนระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

• มาร์จิ้นสูงสุด: 24.7vw
• ระยะขอบล่าง: -6vw
• ช่องว่างภายในด้านซ้าย: 0.9vw

กล่องเงา

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

• กล่องเงาตำแหน่งแนวนอน: -7vw
• กล่องเงาตำแหน่งแนวตั้ง: -5.9vw
• ความแรงของการกระจายเงาของกล่อง: 0px
• เงาสี: #000000

โคลนทั้งแถว

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

เปลี่ยนหมายเลขและรูปภาพ

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนรูปภาพและตัวเลขทั้งหมดแล้วเสร็จ!

ดูตัวอย่าง

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

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

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

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