6 การออกแบบเส้นขอบที่ไม่ซ้ำกันสำหรับรูปภาพโมดูลแกลเลอรี Divi ของคุณ

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

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

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

แอบมอง

#1 แกลเลอรี่ภาพโพลารอยด์

เริ่มออกแบบอาคาร #1

#2 การออกแบบกริดที่สะอาด

เริ่มออกแบบอาคาร #2

#3 ภาพพื้นหลังที่กำหนดเองเบื้องหลังแกลเลอรีทั้งหมด

เริ่มออกแบบอาคาร #3

#4 ภาพพื้นหลังที่กำหนดเองด้านหลังแต่ละรายการในแกลเลอรี

เริ่มออกแบบอาคาร #4

#5 คอมโบกล่องเงาและเส้นขอบ

เริ่มออกแบบอาคาร #5

#6 การออกแบบขอบแถบฟิล์ม

เริ่มออกแบบอาคาร #6

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

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

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

การตั้งค่าเพจใหม่ของคุณ

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

การบันทึกเทมเพลตโมดูล Divi Gallery

เนื่องจากเราจะออกแบบเส้นขอบ 5 แบบสำหรับโมดูล Divi Gallery ควรมีการบันทึกเทมเพลตโมดูลแกลเลอรีพื้นฐานไว้ในไลบรารีของเรา เพื่อที่เราจะได้ไม่ต้องเริ่มต้นใหม่ทุกครั้งที่เราออกแบบแกลเลอรีใหม่ .

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

Divi จะเติมโมดูลแกลเลอรีด้วยรูปภาพบางส่วนจากแกลเลอรีสื่อของคุณในการแสดงตารางดังนี้:

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

จากนั้นอัปเดตการตั้งค่า Divi Gallery Module ดังนี้:

รูปภาพจำนวน: 12
แสดงชื่อและคำบรรยาย: NO
แสดงการแบ่งหน้า: NO

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

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

แค่นั้นแหละ. ทีนี้มาดูการออกแบบเส้นขอบกัน!

#1 แกลเลอรี่ภาพโพลารอยด์

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

นี่คือวิธีการทำ

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

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน) ก่อนแก้ไขโมดูลแกลเลอรี ให้เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลังสีเทาเพื่อให้ขอบสีขาวของเราปรากฏขึ้นเล็กน้อย

ความเป็นมา: #dddddd

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

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

ความกว้างของรางน้ำ: 1

การดำเนินการนี้จะกำจัดระยะห่างระยะขอบเริ่มต้นระหว่างรูปภาพ เราจะเพิ่มระยะห่างที่กำหนดเองของเราในภายหลัง

การตั้งค่าโมดูลแกลเลอรี

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

แสดงชื่อและคำบรรยาย: ใช่

น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
รูปแบบตัวอักษรของชื่อเรื่อง: TT
การจัดตำแหน่งข้อความชื่อเรื่อง: Center
ความสูงของบรรทัดหัวเรื่อง: 2em

ความกว้างเส้นขอบบนของรูปภาพ: 10px
สีของเส้นขอบบนของรูปภาพ: #ffffff
ความกว้างขอบด้านซ้ายของรูปภาพ: 10px
สีของเส้นขอบด้านซ้ายของรูปภาพ: #ffffff
ความกว้างของเส้นขอบด้านขวาของรูปภาพ: 10px
สีของเส้นขอบด้านขวาของรูปภาพ: #ffffff

ในการสร้างระยะห่างระหว่างรูปภาพของเรา ให้เพิ่มเส้นขอบต่อไปนี้ในรายการแกลเลอรี:

ความกว้างของเส้นขอบ: 10px
สีเส้นขอบ: #dddddd (ตรงกับสีของพื้นหลังส่วน)

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

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของการออกแบบขอบโพลารอยด์

#2 การออกแบบกริดที่สะอาด

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

นี่คือวิธีการทำ

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน)

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

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

ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px
ความกว้างของเส้นขอบ: 10px
สีเส้นขอบ: #dddddd

เส้นขอบแถวนี้จำเป็นในการจับคู่ระยะห่างด้านนอกของแกลเลอรีของเรากับระยะห่างระหว่างรูปภาพ

การตั้งค่าโมดูลแกลเลอรี

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

ความกว้างของเส้นขอบรูปภาพ: 20px
สีเส้นขอบรูปภาพ: #ffffff

ความกว้างของเส้นขอบ: 10px
สีเส้นขอบ: โปร่งใส (เป็นสิ่งสำคัญในการแสดงสีพื้นหลัง)

ตอนนี้เพิ่มสีพื้นหลังให้กับโมดูลแกลเลอรีเพื่อสิ้นสุดการออกแบบ

สีพื้นหลัง: #dddddd (ตรงกับสีเส้นขอบของแถว)

เนื่องจากเส้นขอบรายการแกลเลอรีของคุณเป็นแบบโปร่งใส จึงรับช่วงสีของพื้นหลัง

การออกแบบขั้นสุดท้าย

การเปลี่ยนสีเส้นขอบด้วยการเปลี่ยนสีพื้นหลัง

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

ช่องว่างภายในที่กำหนดเอง: บน 10px, ด้านล่าง 10px, ซ้าย 10px, 10px ขวา

ตอนนี้คุณสามารถปรับสีพื้นหลังตามที่คุณต้องการ:

#3 ภาพพื้นหลังที่กำหนดเองเบื้องหลังแกลเลอรีทั้งหมด

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

นี่คือวิธีการทำ

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน)

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

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

ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

การตั้งค่าโมดูลแกลเลอรี

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

ภาพพื้นหลัง: [เพิ่มภาพ] (คุณยังดูไม่ได้)
สีพื้นหลัง: #dddddd (แสดงเฉพาะเมื่อคุณใช้ภาพพื้นหลังแบบ png ที่มีความโปร่งใส)
ความกว้างของเส้นขอบรูปภาพ: 10px
สีของเส้นขอบรูปภาพ: #ffffff

ความกว้างของเส้นขอบ (สำหรับโมดูล): 10px
สีเส้นขอบ: #ffffff

จากนั้นเพิ่ม Custom CSS ต่อไปนี้ไปยังรายการแกลเลอรี:

padding: 3%;

ซึ่งจะสร้างการแยกระหว่างรายการในแกลเลอรีเพื่อให้การออกแบบสมบูรณ์

ผลสุดท้าย

#4 ภาพพื้นหลังที่กำหนดเองด้านหลังแต่ละรายการในแกลเลอรี

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

นี่คือวิธีการทำ

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน)

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

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

ทำให้แถวนี้เต็มความกว้าง: ใช่
ความกว้างของรางน้ำ: 2

การตั้งค่าโมดูลแกลเลอรี

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

ความกว้างของเส้นขอบรูปภาพ: 10px
สีของเส้นขอบรูปภาพ: #ffffff

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ไปยังรายการแกลเลอรี:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

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

ย้อนกลับไปและเปิดการตั้งค่าโมดูลแกลเลอรีแล้ววาง URL ใน CSS ที่กำหนดเองซึ่งมีข้อความว่า "แทรก URL รูปภาพที่นี่" ตรวจสอบให้แน่ใจว่าคุณเก็บ url ไว้ในใบเสนอราคา

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

#5 คอมโบกล่องเงาและเส้นขอบ

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

นี่คือวิธีการทำ

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน)

เพิ่มเส้นขอบรูปภาพและเงากล่อง

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

ความกว้างของเส้นขอบรูปภาพ: 10px
สีของเส้นขอบรูปภาพ: #ffffff

Image Box Shadow: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -30px
ตำแหน่งแนวตั้งเงาของกล่อง: -30px
ความแรงของการกระจายเงาของกล่อง: -10px
สีเงา: #e08474

เพิ่ม Gallery Item Border

การออกแบบเงากล่องดูดีเหมือนตอนนี้ แต่คุณยังสามารถเพิ่มเส้นขอบเพิ่มเติมสำหรับรายการแกลเลอรีของคุณได้โดยอัปเดตสิ่งต่อไปนี้:

ความกว้างของเส้นขอบขวา: 7px
สีขอบขวา: #dddddd
รูปแบบเส้นขอบขวา: จุด
ความกว้างขอบล่าง: 7px
สีขอบล่าง: #dddddd
รูปแบบเส้นขอบด้านล่าง: จุด

ฉันเพิ่มรูปแบบเส้นขอบประเพื่อเตือนคุณถึงสไตล์ต่างๆ ที่พร้อมใช้งาน คุณสามารถใช้สไตล์อื่นๆ ได้ตามสบาย (เช่น สีทึบหรือเส้นประ)

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

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

ทำให้แถวเต็มความกว้าง: ใช่

การออกแบบขั้นสุดท้าย

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

#6: การออกแบบขอบแถบฟิล์ม

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

นี่คือวิธีการทำ

สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มเทมเพลตโมดูล Divi Gallery Module ที่บันทึกไว้จากไลบรารี (อธิบายไว้ด้านบน)

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

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

ความกว้างของรางน้ำ: 1

การดำเนินการนี้จะกำจัดระยะขอบเริ่มต้นระหว่างรูปภาพของคุณ

การตั้งค่าโมดูลแกลเลอรี

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

เพิ่มเส้นขอบภาพประ

ความกว้างของเส้นขอบด้านขวาของรูปภาพ: 8px
สีของเส้นขอบด้านขวาของรูปภาพ: #dddddd
รูปแบบเส้นขอบด้านขวาของรูปภาพ: เส้นประ
ความกว้างของเส้นขอบด้านซ้ายของรูปภาพ: 8px
สีของเส้นขอบด้านซ้ายของรูปภาพ: #dddddd
รูปแบบเส้นขอบด้านซ้ายของรูปภาพ: เส้นประ

เพิ่ม Gallery Item Border สำหรับระยะห่าง

ความกว้างของเส้นขอบด้านซ้าย: 20px
สีขอบซ้าย: #ffffff
ความกว้างของเส้นขอบขวา: 20px
สีขอบขวา: #ffffff

เพิ่มเงากล่องภาพ

Image Box Shadow: ดูภาพหน้าจอ
ความแรงของกล่องเงาเบลอ: 0px
ความแรงของการกระจายเงาของกล่อง: -10px
สีเงา: #222222

เพิ่มสีพื้นหลัง

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

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ไปยังรายการแกลเลอรี:

padding: 5px 10px;

ผลสุดท้าย

ตอนนี้ตรวจสอบผลลัพธ์

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

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

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

ไชโย!