ภาพหมุนของผลิตภัณฑ์โดยใช้ Elementor
เผยแพร่แล้ว: 2021-11-16คุณกำลังมองหาวิธีใช้ผลิตภัณฑ์แบบหมุนโดยใช้ Elementor ในเว็บไซต์ WooCommerce ของคุณหรือไม่? สำหรับร้านค้า WooCommerce ออนไลน์ ภาพหมุนผลิตภัณฑ์ช่วยแสดงผลิตภัณฑ์จำนวนมากภายในพื้นที่กะทัดรัด
เนื่องจากการมีส่วนร่วมของลูกค้าเป็นสิ่งสำคัญที่สุดในร้านค้าบนเว็บของคุณ ภาพหมุนของผลิตภัณฑ์เพื่อการตกแต่งจึงเป็นวิธีที่ดีที่สุดในการดึงดูดความสนใจของผู้คนอย่างรวดเร็ว
ดังนั้น หากคุณวางแผนที่จะเพิ่มรูปลักษณ์ของร้านค้าของคุณ การใช้ส่วนเสริม WC Carousel จะเป็นตัวเลือกที่สมบูรณ์แบบ ไม่เพียงแต่เครื่องมือจะมีประโยชน์สำหรับการจัดแสดงผลิตภัณฑ์จำนวนมากเท่านั้น แต่ยังมีเลย์เอาต์ที่ดูดีอีกด้วย
รู้สึกอยากรู้อยากเห็น? ให้ฉันพาคุณลึกลงไปในเรื่องนี้และแน่นอนว่าคุณจะไม่เสียใจ
ดึงดูดผู้ชมของคุณด้วย Product Carousel โดยใช้ Elementor
WooCommerce Product Carousel เป็นวิดเจ็ตประเภทตัวเลื่อนสำหรับ Elementor เป็นหลัก เป็นเครื่องมือที่สมบูรณ์แบบในการดึงดูดลูกค้าของคุณด้วยมุมมองแบบย่อของผลิตภัณฑ์ และให้พวกเขาเรียกดูสินค้าหลายร้อยรายการได้อย่างราบรื่น
Product Carousel มาพร้อมกับฟีเจอร์ “Add to Cart” ที่ช่วยเพิ่มยอดขายของคุณด้วยการมอบวิธีการซื้อสินค้าที่รวดเร็วขึ้น ช่วยให้ลูกค้าสามารถซื้ออะไรก็ได้ที่ต้องการเพียงแค่แตะปุ่มรถเข็นบนผลิตภัณฑ์
ยกตัวอย่างจากภาพด้านบน ซึ่งคุณจะเห็นปุ่มรถเข็นอยู่ใต้ภาพสินค้า ช่วยให้ผู้คนซื้อสินค้าได้เร็วขึ้น แทนที่จะไปที่หน้ารายละเอียดผลิตภัณฑ์แต่ละรายการทุกครั้งที่ต้องการเพิ่มสินค้าลงในรถเข็น
สิ่งที่ดีที่สุดเกี่ยวกับภาพหมุนของผลิตภัณฑ์ WooCommerce โดยใช้ Elementor คือ คุณสามารถสร้างการออกแบบที่น่าสนใจด้วยภาพหมุนที่ดึงดูดความสนใจของผู้คน แอนิเมชั่นภาพหมุนสามารถตั้งค่าได้อย่างเต็มตาเพื่อสร้างอินเทอร์เฟซที่ไม่ซ้ำกันหลายแบบในคราวเดียว
ด้วยเหตุนี้ ผู้คนจึงสนใจภาพหมุนของผลิตภัณฑ์อันน่าทึ่งทุกครั้งที่มีคนเข้ามาที่เว็บไซต์ของคุณและเห็นภาพหมุนแบบเคลื่อนไหว นั่นไม่ใช่ทั้งหมด! คุณยังสามารถใช้ภาพหมุนของผลิตภัณฑ์เพื่อแสดงผลิตภัณฑ์เด่นของคุณเป็นสิ่งแรกบนเว็บไซต์ของคุณ
WooCommerce Carousel Widget จาก Element Pack Pro นำขอบใหม่สำหรับ WoCommerce
หากคุณได้รับเครื่องมือดังกล่าวที่ไม่ต้องเขียนโค้ดขณะออกแบบม้าหมุนผลิตภัณฑ์ WooCommerce คุณจะยังเลือกใช้รหัสด้วยตนเองหรือไม่ แน่นอนคุณจะไม่ ไม่ใช่เมื่อคุณมีวิดเจ็ต WC Carousel โดย Element pack Pro (โดย Bdthemes) ตามที่คุณต้องการ
ด้วยลูกค้าที่มีความสุขกว่า 70,000 รายที่ใช้วิดเจ็ตจาก Element Pack Pro WC Carousel จึงเป็นดาวเด่นในบรรดาผลิตภัณฑ์อื่นๆ เป็นเพราะวิดเจ็ตช่วยให้คุณสร้างภาพหมุนของผลิตภัณฑ์แบบไดนามิกโดยใช้ Elementor โดยไม่ต้องมีการเตรียมการใดๆ หรือความรู้เกี่ยวกับโค้ดใดๆ
Elementor ใช้เทคนิคการลากและวางอย่างง่ายสำหรับการนำเข้าวิดเจ็ตที่เพิ่มคุณสมบัติและฟังก์ชันใหม่ให้กับเว็บไซต์ของคุณ WC Carousel เป็นเครื่องมือที่ใช้กับ Elementor ด้วยแอปนี้ คุณสามารถออกแบบภาพหมุนผลิตภัณฑ์อันน่าทึ่งสำหรับร้านค้าของคุณ เปลี่ยนเลย์เอาต์ เปลี่ยนสีและแบบอักษร และทุกอย่างที่คุณต้องการปรับแต่ง
มีหลายอย่างที่ต้องพูด มาดูวิธีการใช้ผลิตภัณฑ์ Carousel ของ WC โดยใช้ Elementor ในทางปฏิบัติ
สร้างม้าหมุนผลิตภัณฑ์ WooCommerce อันทรงพลังโดยใช้ Elementor
ขั้นตอนที่เรากำลังจะแสดงที่นี่จะช่วยให้คุณลุกขึ้นและทำงานได้อย่างมีประสิทธิภาพสูงสุด แต่สิ่งนี้ต้องการความรู้พื้นฐานของ Elementor เว้นแต่คุณจะรู้วิธีใช้งาน Elementor ในฐานะผู้เริ่มต้น สิ่งต่างๆ จะยากสำหรับคุณ
หากคุณต้องการความช่วยเหลือ โปรดไปที่วิดีโอบทแนะนำสำหรับผู้เริ่มต้นใช้งานเพื่อเรียนรู้พื้นฐาน
อย่างไรก็ตาม ไม่มีอะไรง่ายไปกว่าการสร้างผลิตภัณฑ์ Carousel โดยใช้ Elementor แต่ก่อนอื่น คุณต้องแน่ใจว่าข้อกำหนดเหล่านี้บนเว็บไซต์ WordPress ของคุณ-
- ติดตั้งและเปิดใช้งานปลั๊กอิน Elementor Page Builder
- ติดตั้งและเปิดใช้งานปลั๊กอิน WooCommerce
- ติดตั้งและเปิดใช้งานปลั๊กอิน Element Pack Pro (จำเป็นเพื่อใช้วิดเจ็ต WC Carousel)
เมื่อเสร็จแล้วก็ถึงเวลาเข้าสู่ขั้นตอนการสร้างภาพหมุนของผลิตภัณฑ์ WC โปรดทำตามขั้นตอนอย่างถูกต้อง
ขั้นตอนที่ 1: เปิดวิดเจ็ต WC Carousel จาก Dashboard
ขั้นตอนแรกคุณต้องเปิดใช้งานวิดเจ็ตจากแดชบอร์ด WordPress ของคุณ เมื่อคุณติดตั้งวิดเจ็ต Element Pack Pro คุณจะพบวิดเจ็ตดังกล่าวในแดชบอร์ด
ตอนนี้ ไปที่ Dashboard> Element Pack Pro> 3rd Party Widgets> และค้นหาวิดเจ็ต WooCommerce Carousel โดยเลื่อนไปที่หน้าต่าง คุณต้องคลิกที่ตัวสลับข้างชื่อวิดเจ็ตแล้วกดปุ่ม "บันทึกการเปลี่ยนแปลง"
ถัดไป คุณต้องเปิดหน้าเว็บที่คุณต้องการแสดงภาพหมุนของผลิตภัณฑ์ แน่นอน คุณต้องแตะที่ปุ่ม "แก้ไขด้วย Elementor" เพื่อเปิดหน้าภายใน Elementor
จากนั้น คุณสามารถค้นหาวิดเจ็ต WC Carousel ได้จากเมนูวิดเจ็ตทางด้านซ้ายของคุณ เมื่อคุณเห็นวิดเจ็ตในเมนูแล้ว ให้คลิกที่ไอคอนวิดเจ็ตค้างไว้แล้วลากเข้าไปภายในหน้าเว็บของคุณ
ดังที่คุณเห็นในภาพด้านบน ตรวจสอบให้แน่ใจว่าวิดเจ็ตมีโลโก้ Element Pack Pro อยู่
ขั้นตอนที่ 2: ปรับแต่งม้าหมุนผลิตภัณฑ์ WooCommerce โดยใช้ Elementor
ตามค่าเริ่มต้นที่ตั้งค่าจากตัวสร้างหน้า Elementor คุณจะพบการควบคุมเค้าโครงพื้นฐานทั้งหมดภายใต้แท็บ เนื้อหา สำหรับวิดเจ็ต WooCommerce Carousel คุณจะพบตัวเลือกการปรับแต่งเลย์เอาต์จำนวนมากที่นี่
ตัวอย่างเช่น คุณสามารถตั้งค่าหมายเลขคอลัมน์สำหรับรายการสินค้า การจับคู่ความสูงของผลิตภัณฑ์เป็นวิธีที่ดีในการแสดงอินเทอร์เฟซที่สะอาดตา
คุณสามารถใช้ส่วนคิวรีเพื่อเลือกแหล่งที่มาของตัวเลื่อนแบบหมุนได้ ช่วยได้ถ้าต้องแสดงสินค้าจะได้ลงรายละเอียดเยอะด้วยการโพสต์
อย่างไรก็ตาม คุณสามารถเลือกหรือแยกผลิตภัณฑ์เฉพาะออกจากภาพหมุนได้ ซึ่งช่วยให้ใช้งานฟังก์ชันไมโครได้ง่ายขึ้น
จากนั้น คุณสามารถเลือกการตั้งค่าภาพหมุนเพื่อเปลี่ยนภาพเคลื่อนไหวให้ตรงตามความต้องการของคุณมากขึ้น ตัวอย่างเช่น คุณสามารถเลือกระหว่างรูปแบบภาพหมุนและรูปแบบใบปะหน้าสำหรับภาพหมุนของผลิตภัณฑ์ได้โดยใช้ Elementor
ยิ่งไปกว่านั้น คุณสามารถเปลี่ยนความเร็วของแอนิเมชั่นของภาพหมุนได้ เช่นเดียวกับการตั้งค่าอื่นๆ เพื่อพัฒนาเลย์เอาต์ต่อไป
หมายเหตุ สินค้ามีป้ายแสดงสภาพสินค้าแต่ละชิ้น ป้ายจะแสดงสินค้าที่มีและสต็อกออกโดยอัตโนมัติ นอกจากนี้ คุณยังสามารถปรับแต่งรูปแบบของป้ายให้เข้ากับธีมไซต์ของคุณได้
ขั้นตอนที่ 3: ปรับแต่งลักษณะที่ปรากฏของภาพหมุนของผลิตภัณฑ์
สิ่งที่ดีที่สุดเกี่ยวกับการสร้างภาพหมุนของผลิตภัณฑ์โดยใช้ Elementor คือ คุณสามารถปรับแต่งอินเทอร์เฟซทั้งหมดโดยใช้สี เส้นขอบ ช่องว่างภายใน และอื่นๆ มากมาย เพื่อสร้างสิ่งที่ไม่เหมือนใครจากส่วนที่เหลือของตลาด
สำหรับวิดเจ็ต WooCommerce Carousel การตั้งค่าการปรับแต่งเหล่านี้จะอยู่ภายในแท็บ " สไตล์ " ที่นี่ คุณสามารถเปลี่ยนพื้นหลังของภาพหมุนให้โดดเด่นบนหน้าของคุณ
ตัวเลือกจะขยายไปยังทุกส่วนของภาพหมุน รวมทั้งชื่อ ตราสัญลักษณ์ ปุ่มหยิบใส่ตะกร้า คะแนน ราคา ฯลฯ มันจะน่าตื่นเต้นยิ่งขึ้นเมื่อคุณดำเนินการตามส่วนต่างๆ ทั้งหมดเพื่อเพิ่มสไตล์ให้กับเค้าโครงภาพหมุนของคุณ
เมื่อคุณมั่นใจในสไตล์แล้ว เพียงกดปุ่ม " เผยแพร่ " และเริ่มแสดงให้ลูกค้าเห็น
ฉันพนันได้เลยว่ามันง่ายกว่าที่คุณคิดไว้ก่อนหน้านี้ อย่าลืมทำตามขั้นตอน แล้วคุณจะสร้างภาพหมุนผลิตภัณฑ์ WooCommerce ที่น่าทึ่งโดยใช้ Elementor ในเวลาไม่นาน
บทสรุป
หวังว่าคุณจะสนุกกับบทความนี้ หากคุณมีคำถามใดๆ เกี่ยวกับหัวข้อนี้หรือสิ่งอื่นนอกเหนือจากนี้ โปรดติดต่อเราโดยใช้ตัวเลือกแชทสดหรือการสนับสนุน
อยู่อย่างปลอดภัยและเพลิดเพลินไปกับวิดเจ็ตภาพหมุนผลิตภัณฑ์ WooCommerce อย่างเต็มรูปแบบ