สุดยอดคู่มือการใช้รูปภาพใน Divi

เผยแพร่แล้ว: 2017-04-21

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

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

ภาพใหญ่

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

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

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

แนวทางการเพิ่มประสิทธิภาพภาพ Divi

ใช้อัตราส่วนภาพของ Divi (16:9, 4:3, 3:4)

อัตราส่วนภาพแสดงขนาดตามสัดส่วนของความกว้างและความสูงของรูปภาพหรือหน้าจอ ตัวเลขทางด้านซ้ายของโคลอนแสดงถึงความกว้าง (แกน x) และตัวเลขทางด้านขวาของโคลอนคือความสูง (แกน y) อัตราส่วนภาพที่ได้รับความนิยมสูงสุด 2 แบบคือ 4:3 และ 16:9 สิ่งเหล่านี้น่าจะคุ้นเคยสำหรับคุณหากเคยปรับการตั้งค่าหน้าจอทีวีหรือจอภาพของคุณมาก่อน สัดส่วนภาพแบบ 4:3 คือขนาดหน้าจอมาตรฐานสำหรับทีวีและจอภาพรุ่นเก่า และมีจอแสดงผลแบบกล่องมากกว่า โทรทัศน์และจอภาพความละเอียดสูงรุ่นใหม่กว่าในปัจจุบันมีอัตราส่วนภาพ 16:9 ซึ่งมีหน้าจอกว้างขึ้น อัตราส่วนภาพ 3:4 มีประโยชน์ใน Divi สำหรับการแสดงภาพบุคคล

Divi สร้างขึ้นโดยคำนึงถึงอัตราส่วนภาพสามแบบคือ 16:9, 4:3 และ 3:4 สำหรับโพสต์นี้ ฉันจะใช้ขนาดรูปภาพที่แนะนำทั้งหมดตามอัตราส่วนกว้างยาวเหล่านี้ หากคุณยังไม่ได้ดำเนินการดังกล่าว คุณสามารถตรวจสอบเทมเพลตรูปภาพของ Divi เพื่อดูขนาดมาตรฐานและอัตราส่วนภาพที่แนะนำสำหรับรูปภาพของคุณ

หมายเหตุ: มีเครื่องคำนวณอัตราส่วนกว้างยาวที่เป็นประโยชน์ซึ่งอาจช่วยให้คุณค้นหาขนาดภาพที่เหมาะสมได้เช่นกัน

ปรับรูปภาพให้เหมาะสมก่อนอัปโหลด

เป็นการดีที่สุดเสมอที่จะเพิ่มประสิทธิภาพ (ปรับขนาด บีบอัด ครอบตัด ฯลฯ...) รูปภาพของคุณก่อนที่จะอัปโหลดไปยัง WordPress พยายามอย่างดีที่สุดที่จะรักษาขนาดไฟล์ภาพทั้งหมดของคุณให้อยู่ระหว่าง 60kb ถึง 200kb ด้วยวิธีนี้คุณจะไม่ทำให้เวลาในการโหลดหน้าเว็บของคุณช้าลงมากเกินไป สำหรับคำแนะนำฉบับสมบูรณ์เกี่ยวกับวิธีการปรับแต่งภาพของคุณ ไปที่นี่

อย่าลืม SEO

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

นอกจากนี้ Divi Builder ยังให้คุณเพิ่มข้อความ 'alt' และข้อความชื่อจากภายในบางโมดูลได้ จับตาดูสิ่งเหล่านี้เมื่อใช้โมดูล Divi บางตัว

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

รูปแบบไฟล์

โดยทั่วไป รูปภาพส่วนใหญ่บนเว็บจะอยู่ในรูปแบบ JPEG, PNG หรือ GIF JPEG นั้นดีสำหรับสถานการณ์ส่วนใหญ่เนื่องจากความเข้ากันได้ การใช้สี และขนาดไฟล์ที่เล็ก

ควรใช้ JPEG สำหรับภาพถ่ายสีทั้งหมดของคุณ เช่น รูปภาพเด่นและภาพพื้นหลัง

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

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

แนวทางขนาดรูปภาพตามเค้าโครงคอลัมน์ของ Divi

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

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

สิ่งนี้ไม่ได้กล่าวถึงความสูงของรูปภาพของคุณ นี่คือรายการขนาดตามอัตราส่วน 4:3 และ 16:9 วิธีนี้มีประโยชน์ในการรักษารูปภาพของคุณให้มีความกว้างและความสูงที่เหมาะสมกับอุปกรณ์เคลื่อนที่

ขนาดภาพต่อไปนี้เป็นไปตามมาตรฐานอัตราส่วนภาพ 16:9

1 คอลัมน์: 1080 x 608
3/4 คอลัมน์: 795 x 447
⅔ คอลัมน์: 700 x 394
1/2 คอลัมน์: 510 x 287
⅓ คอลัมน์: 320 x 181
1/4 คอลัมน์: 225 x 128

ขนาดภาพต่อไปนี้เป็นไปตามมาตรฐานอัตราส่วนภาพ 4:3

1 คอลัมน์: 1080 x 810
3/4 คอลัมน์: 795 x 597
⅔ คอลัมน์: 700 x 526
1/2 คอลัมน์: 510 x 384
⅓ คอลัมน์: 320 x 241
1/4 คอลัมน์: 225 x 170

ขนาดภาพสำหรับโมดูล Divi ต่างๆ

โมดูลรูปภาพ

เมื่อใช้โมดูลรูปภาพ คุณสามารถทำตามเค้าโครง 16:9 และ 4:3 เพื่อเลือกขนาดรูปภาพที่คุณต้องการสำหรับเค้าโครงคอลัมน์แต่ละคอลัมน์

ตัวอย่างเช่น หากคุณใช้เค้าโครง 4 คอลัมน์ที่มีอัตราส่วนกว้างยาว 4:3 คุณจะต้องแทรกรูปภาพที่มีขนาด 225 x 170 พิกเซลสำหรับแต่ละคอลัมน์

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

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

นี่คือสิ่งที่เลย์เอาต์ 4 คอลัมน์ที่มีรูปภาพขนาด 225px x 170px ดูเหมือนบนจอแสดงผลแท็บเล็ต 2 คอลัมน์:

มันดูค่อนข้างดี แต่ถ้าคุณเริ่มต้นด้วยภาพที่กว้าง 370px คุณจะได้ภาพที่เติมความกว้างของคอลัมน์บนจอแสดงผลแท็บเล็ต 2 คอลัมน์ดังนี้:

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

สำหรับอัตราส่วนภาพ 4:3:

1 คอลัมน์: 1080 x 810
⅔ คอลัมน์: 770 x 578
3/4 คอลัมน์: 770 x 578
1/2 คอลัมน์: 770 x 578
⅓ คอลัมน์: 770 x 578
1/4 คอลัมน์: 370 x 278

สำหรับอัตราส่วนภาพ 16:9:

1 คอลัมน์: 1080 x 608
⅔ คอลัมน์: 770 x 433
3/4 คอลัมน์: 770 x 433
1/2 คอลัมน์: 770 x 433
⅓ คอลัมน์: 770 x 433
1/4 คอลัมน์: 370 x 208

ภาพพื้นหลังตัวเลื่อนและโพสต์ตัวเลื่อน

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

ความสูงของภาพพื้นหลังของตัวเลื่อนจะขึ้นอยู่กับเนื้อหาของตัวเลื่อน ดังนั้นคุณอาจต้องปรับความสูงของภาพพื้นหลัง

ขนาดภาพต่อไปนี้เป็นไปตามมาตรฐานอัตราส่วนภาพ 16:9:

ขนาดภาพต่อไปนี้เป็นไปตามมาตรฐานอัตราส่วนภาพ 4:3:

และถ้าคุณต้องการให้แถบเลื่อนขยายความกว้างของคอลัมน์บนอุปกรณ์มือถือ ให้ใช้หลักเกณฑ์เหล่านี้:

สำหรับอัตราส่วนภาพ 4:3:

สำหรับอัตราส่วนภาพ 16:9:

ภาพพื้นหลังตัวเลื่อนแบบเต็มความกว้าง

ความกว้างขั้นต่ำที่แนะนำ: 1920px

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

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

Slider และ Post Slider ภาพเด่น

รูปภาพเด่นของสไลด์จะปรากฏเฉพาะในแถบเลื่อนที่อยู่ในคอลัมน์ ⅔, 3/4 คอลัมน์ หรือความกว้าง 1 คอลัมน์ เราขอแนะนำว่าภาพสไลด์ของคุณควรมีความกว้างอย่างน้อยขนาดนี้เพื่อปรับสำหรับเดสก์ท็อปและอุปกรณ์เคลื่อนที่

1 คอลัมน์: 450
3/4 คอลัมน์: 330
⅔ คอลัมน์: 320

หมายเหตุ: ความกว้างของเบราว์เซอร์ที่น้อยกว่า 768px จะซ่อนรูปภาพและแสดงเฉพาะข้อความที่ตัดตอนมา

รูปภาพในการแสดงไลท์บ็อกซ์

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

ภาพหน้าปกโมดูลเสียง

ความกว้าง: อย่างน้อย 780px

แม้ว่ารูปภาพจะเริ่มต้นด้วยขนาดเล็ก (230 x 130) แต่จะขยายความกว้างทั้งหมดของส่วนเนื้อหาบนหน้าจอที่มีขนาดน้อยกว่า 780px

บล็อกโมดูลรูปภาพเด่นที่มีเค้าโครงเต็มความกว้าง

ความกว้างของรูปภาพ: เท่ากับขนาดของความกว้างของคอลัมน์

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

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

1 คอลัมน์: 1080
3/4 คอลัมน์: 795
⅔ คอลัมน์: 700
1/2 คอลัมน์: 510
⅓ คอลัมน์: 320
1/4 คอลัมน์: 225

ภาพเด่นของโมดูลบล็อกพร้อมเค้าโครงกริด

ความกว้าง: เท่ากับขนาดของความกว้างของคอลัมน์เสาเดียว (ค่าเริ่มต้น 795px)

และเช่นเดียวกับเลย์เอาต์ Blog Module Fullwidth รูปภาพเด่นจะต้องมีขนาดใหญ่สำหรับการแสดงโพสต์เดียวของคุณ สิ่งที่ยอดเยี่ยมเกี่ยวกับเค้าโครง Blog Grid คือ Divi ใช้รูปภาพเด่นเวอร์ชันเล็กที่อัปโหลดไปยังแกลเลอรีสื่อ (ด้วยความกว้าง 400px) เนื่องจากรูปภาพขนาดเล็กนี้ถูกสร้างขึ้นและแสดงโดยอัตโนมัติ คุณจึงไม่ต้องกังวลว่าหน้าเว็บของคุณจะโหลดขนาดไฟล์รูปภาพที่ใหญ่เกินไปสำหรับคอลัมน์กริด

ภาพเด่นของโมดูล Porfolio (เค้าโครงแบบเต็มความกว้างและกริด แบบมาตรฐานและแบบกรองได้)

ความกว้าง: เท่ากับความกว้างของคอลัมน์โพสต์เดียว (ค่าเริ่มต้น: 795px)

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

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

รูปภาพโมดูล Blurb

ความกว้างสูงสุด: 550px

รูปภาพนำเสนอเป็นไปตามกฎเดียวกันในการจับคู่ความกว้างของรูปภาพกับความกว้างของคอลัมน์ ยกเว้นคอลัมน์ 1 ซึ่งมีความกว้างสูงสุด 550px แทนที่จะเป็น 1080px ปกติ ดังนั้น ทางออกที่ปลอดภัยคือการแทรกรูปภาพที่มีความกว้างสูงสุด 550px นี่คือความกว้างของรูปภาพสำหรับ Blurb Module ในแต่ละรูปแบบคอลัมน์

1 คอลัมน์: 550px
1/2 คอลัมน์: 510px
⅓ คอลัมน์: 320px
1/4 คอลัมน์: 225px

แกลลอรี่รูปภาพโมดูล (ตัวเลื่อนและเค้าโครงตาราง)

ขนาดที่แนะนำ: 1500 x 844

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

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

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

ภาพโมดูลบุคคล

ขนาดที่แนะนำ

ความกว้าง: 600px

สำหรับโมดูลบุคคล ได้เวลาแนะนำอัตราส่วนภาพ 3:4 ซึ่งเป็นขนาดที่ยอดเยี่ยมสำหรับการถ่ายภาพบุคคล ต่อไปนี้คือขนาดรูปภาพโมดูลบุคคลที่แนะนำสำหรับอัตราส่วนแต่ละขนาด:

3:4 – 600 x 800 (แนะนำสำหรับภาพบุคคล)
16:9 – 600 x 338
4:3 – 600 x 400

ฟังก์ชั่นตอบสนอง

รูปภาพโมดูลบุคคลในเลย์เอาต์ 1 คอลัมน์จะแสดงที่ด้านซ้ายของเนื้อหาที่ 320px

เมื่อขนาดหน้าจอน้อยกว่า 767px รูปภาพจะขยายความกว้างของพื้นที่เนื้อหาที่ความกว้างสูงสุด 600px

gif ต่อไปนี้แสดงโมดูลบุคคลโดยใช้รูปภาพขนาด 600 x 800 (โดยใช้อัตราส่วนภาพ 3:4) บนหน้าจอขนาดต่างๆ

ชื่อบทความ โมดูล ภาพเด่น

ความกว้าง: เท่ากับความกว้างของคอลัมน์

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

โมดูลร้านค้า รูปภาพสินค้า

คำแนะนำ

ความกว้างที่แนะนำ: 330px
จำนวนคอลัมน์ที่แนะนำ: 3 หรือมากกว่า

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

6 คอลัมน์: 150px
5 คอลัมน์: 183px
4 คอลัมน์: 240px
3 คอลัมน์: 332px
2 คอลัมน์: 520px
1 คอลัมน์: 1080px

ฟังก์ชั่น

Divi สร้างรูปภาพผลิตภัณฑ์เวอร์ชันที่เล็กกว่า (ด้วยความกว้างสูงสุด 400px) เนื่องจาก Shop Module สร้างขึ้นเพื่อแสดงผลิตภัณฑ์ในคอลัมน์ ⅓ หรือเล็กกว่า ซึ่งหมายความว่าเลย์เอาต์สองคอลัมน์และหนึ่งคอลัมน์ของคุณอาจแสดงรูปภาพผลิตภัณฑ์ของคุณในเวอร์ชันที่ไม่ชัด

นอกจากนี้ เมื่อคุณคลิกที่ผลิตภัณฑ์ในโมดูลร้านค้า หน้าผลิตภัณฑ์เดียวจะแสดงรูปภาพผลิตภัณฑ์ของคุณที่ 300px

เพื่อรองรับการจัดวางแบบ 3 คอลัมน์และหน้าผลิตภัณฑ์เดียว ขอแนะนำให้ใช้ขนาดรูปภาพผลิตภัณฑ์ที่มีความกว้างอย่างน้อย 330px

ภาพบุคคลรับรอง

ขนาดภาพตามการตั้งค่าโมดูล

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

คุณสามารถปรับแต่งขนาดและรัศมีขอบของรูปภาพแนวตั้งได้จากการตั้งค่าขั้นสูงของ Testimonial Module

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

หลักเกณฑ์ทั่วไปสำหรับภาพพื้นหลัง

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

1 คอลัมน์: 1080
3/4 คอลัมน์: 795
⅔ คอลัมน์: 700
1/2 คอลัมน์: 510
⅓ คอลัมน์: 320
1/4 คอลัมน์: 225

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

โมดูลผลงาน
โมดูลผลงานที่กรองได้
โมดูลเรียกร้องให้ดำเนินการ
โพสต์ Slider โมดูล
โมดูลหัวเรื่อง
โมดูลตัวเลื่อน
โมดูลข้อความ

หลักเกณฑ์ทั่วไปสำหรับภาพพื้นหลังแบบเต็มความกว้าง

หากใช้ภาพพื้นหลังของส่วนขนาดเต็มความกว้าง รูปภาพเหล่านี้จะขยายเต็มความกว้างของเบราว์เซอร์ของคุณ นั่นหมายความว่าคุณควรสร้างภาพเหล่านี้ให้กว้างอย่างน้อยเท่ากับจอภาพขนาดใหญ่ที่สุดซึ่งมีขนาดประมาณ 1920px

โมดูลต่อไปนี้ต้องการภาพพื้นหลังที่มีความกว้าง 1920px:

ส่วนหัวเต็มความกว้าง
ผลงานเต็มความกว้าง
แถบเลื่อนเต็มความกว้าง
ชื่อบทความแบบเต็มความกว้าง
ตัวเลื่อนโพสต์แบบเต็มความกว้าง
ภาพเต็มความกว้าง

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

โมดูลส่วนหัวแบบเต็มความกว้าง

ภาพพื้นหลังแบบเต็มหน้าจอ

เพื่อไม่ให้สับสนกับภาพพื้นหลังแบบเต็มความกว้าง ภาพพื้นหลังแบบเต็มหน้าจอหมายถึงการตั้งค่าในโมดูลส่วนหัวแบบเต็มความกว้าง ซึ่งช่วยให้ส่วนหัวขยายขนาดเต็ม (ทั้งความกว้างและความสูง) ของหน้าต่างเบราว์เซอร์ได้

เนื่องจากจอภาพส่วนใหญ่ใช้อัตราส่วนภาพ 4:3 และ 16:9 และจะกว้างเพียง 1280px หรือ 1920px ฉันขอแนะนำขนาดต่อไปนี้สำหรับภาพพื้นหลังแบบเต็มหน้าจอ:

4:3 – 1280 x 960 (แนะนำสำหรับภาพบุคคล)
16:9 – 1920 x 1080

ภาพโลโก้โมดูลส่วนหัวแบบเต็มความกว้าง

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

ไม่มีขนาดภาพมาตรฐานสำหรับโลโก้ ตามหลักเกณฑ์ทั่วไป ฉันขอแนะนำให้รักษาโลโก้ให้ใหญ่พอที่จะมองเห็นได้ชัดเจนบนเดสก์ท็อปขนาดใหญ่ แต่มีขนาดเล็กพอที่จะใส่อุปกรณ์ขนาดเล็กเช่นสมาร์ทโฟนได้

โลโก้ธีมของ Divi คือ 93 x 43 ซึ่งช่วยให้คุณมีความคิดที่ดี

รูปภาพส่วนหัวแบบเต็มความกว้าง

ขนาดที่แนะนำ: 510 x 288

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

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

คุณยังสามารถปรับการจัดแนวตั้งให้อยู่ด้านล่างสุดได้หากต้องการให้รูปภาพของคุณแนบชิดด้านล่างของส่วนหัว

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

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

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

ไชโย!