ฉันจะสร้างภาพหมุนบน WordPress ได้อย่างไร

เผยแพร่แล้ว: 2021-12-06
Image Carousel

ปรับปรุงล่าสุด - 8 มีนาคม 2022

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

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

สร้างภาพหมุนใน WordPress

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

เราจะอธิบายขั้นตอนการติดตั้งปลั๊กอิน Smart Slider 3 ใน word press มีเครื่องมืออื่นๆ อีกหลายอย่างสำหรับงาน และขั้นตอนการติดตั้งอาจคล้ายกับ Smart Slider 3

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

เริ่มต้นด้วยการเลือกขนาดภาพ

Smart slide 3 จะปรับขนาดรูปภาพใน wordpress ตามรูปแบบการนำเสนอที่เลือก ดังนั้น หากรูปภาพมีขนาดใหญ่ เครื่องมือจะลดขนาดลงและในทางกลับกัน และคุณอาจทราบดีว่าเมื่อซูมภาพขนาดเล็ก คุณภาพจะเริ่มลดลง ดังนั้น พยายามอย่ารวมภาพที่เล็กกว่าขนาดของภาพหมุน

ยิ่งไปกว่านั้น รูปภาพขนาดใหญ่จะดูดีกว่าใน Carousel แต่ยังมีเวลาดาวน์โหลดที่สูงกว่าด้วย ดังนั้น คุณต้องสร้างสมดุลระหว่างคุณภาพและขนาด ดังนั้นมันจึงยังดูดีใน Slider

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

การติดตั้ง Smart Slider 3

กำลังติดตั้ง Smart Slider 3.png

กระบวนการติดตั้ง Smart Slider 3 ค่อนข้างเหมือนกันสำหรับเครื่องมืออื่นๆ ในตลาด ในการเริ่มต้น ขั้นแรก ให้เข้าสู่ระบบ word กด admin dashboard ทางด้านซ้ายมือ คุณจะเห็นแผงการนำทางที่มีตัวเลือกต่างๆ ให้เลือกมากมาย จากตัวเลือก ให้เลือกปลั๊กอินและคลิกลิงก์ "เพิ่มใหม่"

แถบค้นหาจะปรากฏขึ้นต่อหน้าคุณ ค้นหา Smart Slider 3 ในนั้น เมื่อติดตั้งปลั๊กอินแล้ว โปรดคลิกที่ตัวเลือกเปิดใช้งาน

การเดินทางของภาพหมุนเริ่มต้น

Smart Slider 3 ใช้รูปภาพจากไลบรารีสื่อ ดังนั้นอย่าลืมอัปโหลดรูปภาพบางรูปก่อนที่คุณจะเริ่มสร้าง Slider คุณสามารถดูวิดีโอแนะนำการใช้งานเพื่อรับข้อมูลเชิงลึกเกี่ยวกับวิธีเริ่มเลือกรูปภาพและเพิ่มลงในรูปแบบการนำเสนอของคุณได้ดียิ่งขึ้น กดที่ Smart Slider 3 และรับวิดีโอแนะนำ “Learn Smart Slider 3” ที่ให้ความรู้เชิงลึกเกี่ยวกับวิธีการใช้งานเครื่องมือ

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

เลือกตัวเลือกพื้นฐานจากเมนู

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

หลังจากปรับภาพให้เหมาะสมแล้วให้กด "สร้าง"

การเพิ่มรูปภาพไปยัง Slider

การเพิ่มรูปภาพใน Slider.png
แหล่งที่มา

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

  • คลิกที่เพิ่มภาพสไลด์ใน Smart Slider 3
  • คุณจะได้รับตัวเลือกให้เลือกรูปภาพสำหรับ Slider ของคุณ คลิกที่ตัวเลือกนั้น
  • เลือกรูปภาพจากไลบรารีของเวิร์ดเพรส
  • ภาพหมุนจะนำเสนอภาพที่เลือก เมื่อคุณพอใจกับภาพที่เลือกแล้ว ให้คลิกที่ส่วน "เผยแพร่"

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

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

ม้าหมุนจะส่งต่อหรือลิงก์ย้อนกลับที่แถบเลื่อนทั้งสองด้านเพื่อเลื่อนดูรูปภาพด้วยตนเอง

ตามค่าเริ่มต้น ภาพหมุนจะไม่เลื่อนโดยอัตโนมัติ แต่คุณสามารถเปลี่ยนได้

วงจรอัตโนมัติสำหรับภาพหมุน

ในแดชบอร์ดผู้ดูแลระบบ WordPress ให้คลิกที่ลิงก์ Smart Slider 3 แล้วเลือกตัวเลือกแก้ไข เลือกรูปแบบ "เล่นอัตโนมัติ" และกด "เปิดใช้งาน" เวลาเริ่มต้นระหว่างสวิตช์คือแปดวินาที ตอนนี้ให้บันทึกการตั้งค่าที่อัปเดตจากปุ่มบันทึกที่ด้านขวามือของแผง

ใช้ Carousel เป็น Widget

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

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

รูปภาพหรือไม่มีรูปภาพเป็นคำถามใหญ่

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

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

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

อ่านเพิ่มเติม

  • จะปรับขนาดภาพผลิตภัณฑ์ให้เหมาะสมได้อย่างไร
  • ปลั๊กอิน Image Zoom ที่ดีที่สุดสำหรับ WooCommerce
  • เคล็ดลับอันชาญฉลาดในการปรับปรุงรูปภาพ