การเปลี่ยนจำนวนคอลัมน์ในโมดูล Divi Gallery ที่จุดพักต่างๆ

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

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

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

แอบมอง

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

การเตรียมองค์ประกอบการออกแบบของคุณ

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

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

การใช้ Custom Spacing สำหรับ Divi Gallery Module

ตั้งเพจใหม่

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

การสร้างแกลเลอรี่ภาพ

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

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

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

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

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

ปรับการตั้งค่าแถวเพื่อสร้างแกลเลอรีเต็มความกว้างโดยไม่มีความกว้างของรางน้ำ

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

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

หากคุณต้องการเพิ่มระยะห่างระหว่างรูปภาพในแกลเลอรี ฉันขอแนะนำให้ใช้วิธีนี้ เนื่องจากเราต้องตั้งค่าความกว้างของรางน้ำเป็น 1

วิธีที่แกลเลอรีตอบสนองต่อความกว้างเบราว์เซอร์ที่แตกต่างกันโดยค่าเริ่มต้น

ตามค่าเริ่มต้น โมดูลแกลเลอรี Divi จะแสดงแกลเลอรีรูปภาพของคุณเป็นสี่คอลัมน์บนเดสก์ท็อป จากนั้นแบ่งเป็นสามคอลัมน์บนแท็บเล็ต สองคอลัมน์บนแท็บเล็ตขนาดเล็ก (และโทรศัพท์ขนาดใหญ่) และหนึ่งคอลัมน์บนโทรศัพท์

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

การตั้งค่าจำนวนคอลัมน์เฉพาะสำหรับเบราว์เซอร์ทุกขนาด

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

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

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

ตอนนี้แกลเลอรีของคุณจะคงโครงสร้างสามคอลัมน์ไว้ในเบราว์เซอร์ทุกขนาด

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

หากคุณต้องการเค้าโครง 1 คอลัมน์ เพียงอัปเดตความกว้างเป็น 100%

แค่นั้นแหละ.

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

การเปลี่ยนจำนวนคอลัมน์สำหรับเบรกพอยต์เฉพาะ

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

เพิ่มคลาส CSS ให้กับ Divi Gallery Module

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

คลาส CSS: col-width

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

หลังจากนั้น บันทึกการตั้งค่าของคุณ

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

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

จากนั้นเพิ่ม Custom CSS ต่อไปนี้ภายใต้แท็บขั้นสูง

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

CSS นี้จะเพิ่มจำนวนคอลัมน์ที่กำหนดเองให้กับเบรกพอยต์ดังต่อไปนี้:

เดสก์ท็อป: 6 คอลัมน์
แท็บเล็ต: 4 คอลัมน์
แท็บเล็ตขนาดเล็กและโทรศัพท์ขนาดใหญ่: 3 คอลัมน์
โทรศัพท์: 2 คอลัมน์

การทำความเข้าใจและการปรับ CSS

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

ภายในแบบสอบถามสื่อแต่ละรายการ CSS ที่สำคัญที่สุดที่ไม่ควรมองข้ามคือคุณสมบัติความกว้าง ซึ่งจะกำหนดขนาดของแต่ละรายการในแกลเลอรีและกำหนดความกว้างของคอลัมน์สำหรับแกลเลอรีด้วย

ตัวอย่างเช่น คิวรี่สื่อบนสุดสำหรับเดสก์ท็อปกำหนดความกว้างของรายการแกลเลอรีเป็น 16.66%

ซึ่งเท่ากับหนึ่งในหกของความกว้างทั้งหมดของคอนเทนเนอร์ (หรือแถว) ดังนั้น แกลเลอรีจะแสดงเค้าโครงหกคอลัมน์บนเดสก์ท็อป

ในการปรับจำนวนคอลัมน์สำหรับเดสก์ท็อป สิ่งที่คุณต้องทำคือเปลี่ยนคุณสมบัติ width เป็นค่าอื่น นี่คือรายการเปอร์เซ็นต์ความกว้างที่คุณสามารถลองได้

12 คอลัมน์: 8.33%
10 คอลัมน์: 10%
8 คอลัมน์: 12.5%
6 คอลัมน์: 16.66%
5 คอลัมน์: 20%
4 คอลัมน์: 25%
3 คอลัมน์: 33.33%
2 คอลัมน์: 50%
1 คอลัมน์: 100%

ผลสุดท้าย

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

เดสก์ท็อป (6 คอลัมน์)

แท็บเล็ต (4 คอลัมน์)

แท็บเล็ตขนาดเล็กและโทรศัพท์ขนาดใหญ่ (3 คอลัมน์)

โทรศัพท์ (2 คอลัมน์)

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

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

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

จนกว่าจะถึงครั้งต่อไปฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!