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

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

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

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

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

ผลลัพธ์ที่เป็นไปได้

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

1. กำหนดค่า WooCommerce และหน้าผลิตภัณฑ์

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

2. สร้างหน้าใหม่และดาวน์โหลดเค้าโครงหน้าสเตชันเนอรี

สร้างหน้าใหม่

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

ดาวน์โหลดเค้าโครงหน้า Landing Page

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

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

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

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

การตั้งค่าสาย

การปรับขนาดที่ตอบสนอง

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

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

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

ความชัดเจน

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

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

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

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

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

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

• จำนวนผลิตภัณฑ์: 8
• เค้าโครงคอลัมน์: 4 คอลัมน์

การปรับขนาดที่ตอบสนอง

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

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

ชั้น CSS

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

• คลาส CSS: รูดบัตรผลิตภัณฑ์

ปฏิกิริยาล้น

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

• ล้นแนวนอน: ซ่อน (โต๊ะทำงาน) เลื่อน (แท็บเล็ตและโทรศัพท์)
• แนวตั้งล้น: ซ่อน

เพิ่มโมดูลรหัสภายใต้โมดูลร้านค้า

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

เพิ่มรหัส CSS ในโมดูล

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

<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 (หมายเลขเดียวกับจำนวนผลิตภัณฑ์ของเรา) นอกจากนี้เรายังเพิ่มขนาดเปอร์เซ็นต์ที่ผลิตภัณฑ์เหล่านี้ครอบครองในแผ่นผลิตภัณฑ์ของเรา (ยิ่งมีผลิตภัณฑ์มากเท่าใดก็ยิ่งมีพื้นที่น้อยลง)

ตารางเทมเพลตคอลัมน์: ทำซ้ำ (4, 14%) สำคัญ!

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

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

width: 150%!important;

เพิ่มสแน็ปอินไปยังการเลื่อน

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

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

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

เลื่อน-snap-align: เริ่มต้น

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

scroll-snap-type: x บังคับ

ใช้โมดูลเวิร์กชอปซ้ำเพื่อแสดงหมวดหมู่อื่น ๆ

โคลนทั้งบรรทัดหนึ่งครั้ง

เมื่อคุณทำการ์ดแม่เหล็กชุดแรกเสร็จแล้วคุณสามารถโคลนทั้งบรรทัดได้หนึ่งครั้ง

ลบโมดูลรหัสในบรรทัดที่ซ้ำกัน

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

โคลนบรรทัดที่ซ้ำกันมากที่สุดเท่าที่คุณต้องการ

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

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

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

การสำรวจ

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ

คิดสุดท้าย

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

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

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

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

หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง