วิธีเปลี่ยนเบรกพอยต์คอลัมน์มือถือของโมดูล Divi Shop

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

ไปกันเถอะ

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

ดาวน์โหลดเทมเพลตหน้าร้านค้าฟรี

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

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

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

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

ดาวน์โหลด

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

1. ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

เริ่มต้นด้วยการไปที่ Theme Builder ของ DIvi และเพิ่มเทมเพลตใหม่

ใช้เทมเพลตในหน้าร้านค้า

ใช้เทมเพลตใหม่นี้ในหน้าร้านค้าของเว็บไซต์ของคุณ

• ใช้บน: ร้านค้า

เริ่มสร้างเทมเพลต Body

และเริ่มสร้างร่างกายของเทมเพลตร้านค้า

2. เริ่มสร้างตัวแม่แบบ

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

พื้นหลังไล่โทนสี

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

• สี 1: #32ff3d
• สี 2: #29c4a9
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 109deg

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: พอดี

ระยะห่าง

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

• ขอบบน: 50px
• ระยะขอบซ้าย: 50px
• ระยะขอบขวา: 50px
• ช่องว่างภายในด้านล่าง: 150px

ชายแดน

ตั้งค่าส่วนให้สมบูรณ์โดยเพิ่มรัศมีเส้นขอบ

• ทุกมุม: 20px

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

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

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

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวด้วยเนื้อหา H1 ที่คุณเลือก

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

เปลี่ยนการตั้งค่าข้อความ H1 ของโมดูลตามลำดับ:

• แบบอักษรของหัวเรื่อง: Prata
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 80px (เดสก์ท็อป), 60px (แท็บเล็ต), 40px (โทรศัพท์)

เพิ่มส่วน #2

ดัชนี Z

เพิ่มส่วนอื่นด้านล่างส่วนก่อนหน้า เปิดการตั้งค่าส่วนและเพิ่มดัชนี z

• ดัชนี Z: 2

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

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

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

สีพื้นหลัง

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

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

ขนาด

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 1380px

ระยะห่าง

จากนั้น เพิ่มค่าการเว้นวรรคแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ขอบบน: 200px
• ช่องว่างภายในด้านบน: 50px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 50px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)

ชายแดน

เรายังเพิ่มรัศมีเส้นขอบบางส่วนให้กับทั้งแถว

• ทุกมุม: 25px

กล่องเงา

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

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

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

เนื้อหา

ตอนนี้ ได้เวลาใส่โมดูลร้านค้าของเราแล้ว เรากำลังใช้เค้าโครง 4 คอลัมน์

• เค้าโครงคอลัมน์: 4 คอลัมน์

โอเวอร์เลย์

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนสีโอเวอร์เลย์

• สีไอคอนซ้อนทับ: #29c6a6
• สีพื้นหลังซ้อนทับ: rgba(255,255,255,0.75)

ภาพ

เปลี่ยนการตั้งค่าภาพด้วย

• ทุกมุม: 10px

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

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

ดำเนินการต่อโดยแก้ไขการตั้งค่าข้อความชื่อเรื่องตามลำดับ:

• แบบอักษรของชื่อเรื่อง: Prata
• ขนาดข้อความชื่อเรื่อง: 30px (เดสก์ท็อป), 25px (แท็บเล็ต), 20px (โทรศัพท์)

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

ถัดไป ทำการเปลี่ยนแปลงการตั้งค่าข้อความราคา

• แบบอักษรราคา: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรราคา: ปานกลาง
• ขนาดข้อความราคา: 18px (เดสก์ท็อป), 16px (แท็บเล็ต), 14px (โทรศัพท์)

ระยะห่าง

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มการเติมด้านบน

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

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

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

ใส่โค้ด CSS

เรากำลังลดจุดพักมือถือหนึ่งคอลัมน์เป็นความกว้าง 300px ซึ่งหมายความว่าสมาร์ทโฟนรุ่นใหม่ส่วนใหญ่จะแสดงผลิตภัณฑ์สองรายการติดกันแทนที่จะเป็นหนึ่งรายการ เพื่อให้สิ่งนี้เกิดขึ้น เราจะเพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ใน Code Module:

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. บันทึกการเปลี่ยนแปลงตัวสร้างธีมทั้งหมด & ดูตัวอย่างผล

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

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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

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