เปลี่ยนโมดูลร้านค้าของ Divi ให้เป็นการ์ดรูดผลิตภัณฑ์แบบไดนามิกบนมือถือ

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

ดาวน์โหลดเค้าโครงบัตรรูดผลิตภัณฑ์ฟรี

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

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

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

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

ดาวน์โหลด

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

1. ตั้งค่า WooCommerce & หน้าผลิตภัณฑ์

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

2. สร้างหน้าใหม่ & อัปโหลดเค้าโครงหน้า Landing Page ของสเตชันเนอรี

สร้างเพจใหม่

เมื่อคุณมีผลิตภัณฑ์แล้ว ให้เพิ่มหน้าใหม่ภายในแบ็กเอนด์ WordPress ของคุณ ตั้งชื่อเพจของคุณ เผยแพร่เพจ และเปิดใช้งาน Visual Builder ของ Divi

อัปโหลดเค้าโครงหน้า Landing Page ของสเตชันเนอรี

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

3. แก้ไขส่วนร้านค้า

ค้นหาส่วนด้วยโมดูลร้านค้า

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

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

ขนาดตอบสนอง

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: 1
• ความกว้าง: 80% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ทัศนวิสัย

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

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

เลือกจำนวนผลิตภัณฑ์และโครงสร้างคอลัมน์เดสก์ท็อปที่เลือก

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

• จำนวนสินค้า: 8
• เค้าโครงคอลัมน์: 4 คอลัมน์

ขนาดตอบสนอง

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

• ความกว้าง: 100% (เดสก์ท็อป), 250% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 100% (เดสก์ท็อป), 250% (แท็บเล็ตและโทรศัพท์)

CSS Class

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

• CSS Class: ผลิตภัณฑ์รูดการ์ด

ล้นตอบสนอง

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

• แนวนอนล้น: ซ่อน (เดสก์ท็อป), เลื่อน (แท็บเล็ตและโทรศัพท์)
• ล้นแนวตั้ง: ซ่อน

เพิ่มโมดูลโค้ดด้านล่างโมดูลร้านค้า

เมื่อคุณแก้ไขโมดูลร้านค้าแล้ว คุณสามารถเพิ่มโมดูลโค้ดด้านล่างได้

เพิ่มโค้ด CSS ลงในโมดูล

โค้ด CSS ต่อไปนี้จะเปลี่ยน 8-product Shop Module ของเราให้เป็นการ์ดรูดผลิตภัณฑ์ที่ตอบสนองโดยอัตโนมัติ:

<style>

@media all and (max-width: 980px) {
   
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}

.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
  
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}

.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
  
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
  
.product-swipe-cards {
-ms-overflow-style: none;
}

}

</style>

จับคู่จำนวนสินค้าที่แตกต่างกัน

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

• จำนวนสินค้า: 4

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

grid-template-columns: repeat(4, 14%) !important;

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

width: 150% !important;

เพิ่มการเลื่อนสแนป

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

scroll-snap-align: start

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

scroll-snap-type: x mandatory

ใช้โมดูลร้านค้าซ้ำเพื่อแสดงหมวดหมู่อื่นๆ

โคลนทั้งแถวครั้งเดียว

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

ลบโค้ดโมดูลในแถวที่ซ้ำกัน

ตราบใดที่โมดูลร้านค้าของคุณมีคลาส CSS เดียวกันกับคลาสก่อนหน้านี้ โมดูลโค้ดหนึ่งโมดูลก็สามารถทำได้ ไปข้างหน้าและลบ Code Module ในแถวที่ซ้ำกันของคุณ

โคลนแถวที่ซ้ำกันมากเท่าที่ต้องการ

และโคลนแถวที่ซ้ำกันตอนนี้ได้มากเท่าที่ต้องการ ขึ้นอยู่กับจำนวนชุดการ์ดรูดผลิตภัณฑ์ที่คุณต้องการแสดงบนหน้า Landing Page ของคุณ!

4. บันทึกการเปลี่ยนแปลงหน้าและดูผลลัพธ์บนอุปกรณ์มือถือ

ตรวจสอบให้แน่ใจว่าเมื่อคุณเพิ่มการ์ดรูดผลิตภัณฑ์เสร็จแล้ว คุณต้องบันทึกเพจของคุณก่อนที่จะออกจาก Visual Builder และทำเสร็จแล้ว!

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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

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

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