วิธีสร้างภาพหมุนแนวตั้งบน WordPress โดยใช้ Elementor

Muneeb บทช่วยสอน WordPress Jan 21, 2022

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

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

วิธีสร้างภาพหมุนภาพแนวตั้งของ Elementor

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

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

จากนั้น กำหนดคอลัมน์ชื่อแนวตั้งให้กับ คอลัมน์ ของคุณเป็นคลาส
ตั้งค่า Widgets Space สำหรับคอลัมน์นั้นเป็น 0 ในการ ตั้งค่า คอลัมน์ และเลย์เอาต์

Add an image element to that column and choose the picture you made. เพิ่มองค์ประกอบรูปภาพลงใน คอลัมน์ นั้นแล้วเลือกรูปภาพที่คุณสร้าง Assign the class carousel vertical to the picture element . กำหนด แนวตั้งของคลาสม้าหมุน ให้กับ องค์ประกอบรูปภาพ

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

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

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

5 ปลั๊กอินภาพหมุนที่ดีที่สุด

1. โพสต์ Carousel สำหรับ Elementor

Post Carousel For Elementor โดย iThemelandCo เป็นปลั๊กอินเสริม Elementor ที่ให้คุณสร้าง Media Carousels ที่สร้างสรรค์อย่างน่าอัศจรรย์ด้วยเลย์เอาต์ภาพหมุนสำเร็จรูป ปลั๊กอินนี้ทำงานร่วมกับ Elementor ได้อย่างสมบูรณ์แบบและมีเค้าโครงที่สร้างไว้ล่วงหน้า 19 แบบ เลย์เอาต์เหล่านี้ปรับแต่งได้อย่างเต็มที่และปรับแต่งได้ง่ายตามความต้องการของคุณโดยใช้กลไกการลากและวางของ Elementor

สินค้า Carousel สำหรับ Elementor

Product Carousel For Elementor เป็นปลั๊กอินเสริม Elementor อื่นที่ออกแบบมาอย่างชัดเจนสำหรับร้านค้าอีคอมเมิร์ซเพื่อแสดงผลิตภัณฑ์ของตนในแบบหมุน ปลั๊กอินมีตัวควบคุมแบบหมุน 12+ เช่น เล่นอัตโนมัติ เลื่อนเพื่อเลื่อน หยุดชั่วคราวเมื่อวางเมาส์เหนือ ฯลฯ ปลั๊กอินนี้ตอบสนองได้ดีในอุปกรณ์ทุกประเภท และคุณสามารถสร้างภาพหมุนได้มากเท่าที่คุณต้องการ นอกจากนี้ยังเป็นปลั๊กอินหลายภาษา 100% ซึ่งหมายความว่าจะใช้งานได้แม้ว่าเว็บไซต์ของคุณจะได้รับการแปลเป็นภาษาอื่น

3. Fast Carousel สำหรับ Elementor

Fast Carousel For Elementor เป็นปลั๊กอินเสริมของ Elementor ที่อ้างว่าเร็วพอที่จะสร้างภาพหมุนสำหรับคุณภายในหนึ่งนาที น่าประทับใจราวกับเสียง มันยังมีแกลเลอรี่ประเภทต่าง ๆ รวมถึงสไตล์ที่เป็นเอกลักษณ์มากกว่าสิบแบบ ปลั๊กอินนี้มีตัวควบคุมแบบวงล้อมากกว่าห้าตัว นอกเหนือจากการเสนอตัวเลือกสีแบบกำหนดเองกับแต่ละวงล้อ สำหรับวิธีแก้ปัญหาอย่างรวดเร็ว นี่อาจเป็นทางออกที่ดีที่สุดของคุณสำหรับภาพหมุน

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

Divi WordPress Theme