วิธีแสดงภาพก่อนและหลังด้วยเอฟเฟกต์ตัวเลื่อนใน WordPress

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

รอ! ตัวเลื่อนภาพก่อนและหลังคืออะไร?

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

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

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

เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันเลยดีกว่า

สมัครสมาชิกช่อง Youtube ของเรา

วิธีเพิ่มแถบเลื่อนภาพก่อนหลัง

มีปลั๊กอินฟรีและพรีเมียมมากมายให้คุณเพิ่มตัวเลื่อนภาพก่อนและหลังบนหน้าเว็บ

อย่างไรก็ตาม เราจะใช้ปลั๊กอิน Twenty20 Image Before After ในบทความนี้ ต่อมา ฉันจะพูดถึงทางเลือกฟรีและพรีเมียมยอดนิยมบางรายการด้วย

ติดตั้ง Twenty20 Image ก่อนหลัง Plugin

Twenty20 เป็นปลั๊กอินฟรีและมีอยู่ในที่เก็บปลั๊กอินของ WordPress ช่วยให้คุณเพิ่มแถบเลื่อนรูปภาพก่อน-หลังในโพสต์ หน้า และแถบด้านข้างได้ นอกจากนี้ยังรองรับตัวสร้างเพจยอดนิยม เช่น Elementor และ WPBakery

ในการติดตั้งปลั๊กอินนี้ ให้ไปที่ Plugins -> Add New และค้นหา Twenty20 Image Before-After เมื่อคุณพบปลั๊กอินแล้ว เพียงติดตั้งและเปิดใช้งาน:

เพิ่มภาพก่อน-หลังในโพสต์หรือหน้าของคุณ

ปลั๊กอิน Twenty20 ไม่ได้มาพร้อมกับหน้าการตั้งค่าใดๆ ดังนั้นคุณสามารถเริ่มทำงานสกปรกหลังจากติดตั้งปลั๊กอิน

หลังจากอัปเดต WordPress 5.0 คุณอาจใช้ตัวแก้ไขแบบคลาสสิกหรือตัวแก้ไข Gutenberg ให้ฉันแสดงให้คุณเห็นว่าปลั๊กอินนี้ทำงานอย่างไรกับตัวแก้ไขทั้งสอง

Gutenberg Editor

ปลั๊กอิน Twenty20 ยังไม่มีบล็อก แต่คุณสามารถใช้ฟังก์ชันรหัสย่อและเพิ่มรหัสในบล็อกรหัสย่อได้

มาดูตัวอย่างรหัสย่อกัน:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After” hover=”false”]

ให้ฉันอธิบายแต่ละพารามิเตอร์:

• img1 – คุณต้องเพิ่ม ID รูปภาพ (ไม่ใช่ URL รูปภาพ) ของรูปภาพแรก
• img2 – เพิ่ม ID (ไม่ใช่ URL รูปภาพ) ของรูปภาพที่สอง
• ทิศทาง – สิ่งนี้ช่วยให้คุณตัดสินใจว่าคุณต้องการให้ตัวเลื่อนอยู่ในทิศทางแนวนอนหรือแนวตั้ง ดังนั้น ค่าจะเป็นแนวนอนหรือแนวตั้งก็ได้
• ออฟเซ็ต – ค่าออฟเซ็ตควรอยู่ระหว่าง 0.1 ถึง 1
• align – กำหนดการจัดตำแหน่งของภาพก่อน-หลัง ค่าสามารถเป็นไม่มี ซ้าย หรือขวา
• ความกว้าง – ความกว้างของรูปภาพสามารถเป็นเปอร์เซ็นต์หรือพิกเซล
• before – คุณสามารถเพิ่มคำบรรยายของรูปภาพ before ได้ที่นี่
• หลัง – เพิ่มคำบรรยายของภาพหลัง
• โฮเวอร์ – พารามิเตอร์นี้กำหนดว่าคุณต้องการเลื่อนตัวเลื่อนเมื่อเลื่อนเมาส์หรือไม่ ยอมรับค่าจริงหรือเท็จ

ไม่ทราบวิธีการค้นหา ID ของภาพ? ไปที่ Media -> Library จากแถบด้านข้างด้านซ้ายของแดชบอร์ด WordPress และคลิกที่รูปภาพ ตอนนี้ตรวจสอบแถบที่อยู่ของเว็บเบราว์เซอร์ของคุณ:

ในตัวอย่างข้างต้น คุณสามารถดูรายการ = 50 ใน URL ดังนั้น 50 คือ ID ของรูปภาพนั้น

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

คัดลอกรหัสที่ฉันใช้ในตัวอย่างด้านบน วางลงในช่องรหัสย่อและปรับแต่งตามความต้องการของคุณ:

แค่นั้นแหละ. ตอนนี้คุณสามารถดูตัวอย่างโพสต์ (หรือหน้า) และตรวจสอบว่าโพสต์นั้นทำงานอย่างถูกต้องหรือไม่

บรรณาธิการคลาสสิก

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

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

เมื่อคุณตั้งค่าเสร็จแล้ว คุณสามารถคลิกที่ปุ่ม แทรกรหัสย่อ

คุณยังสามารถเปลี่ยนแปลงรหัสย่อนี้ได้ในภายหลัง – เพียงทำตามตัวอย่างในส่วน Gutenberg Editor

เพิ่มภาพก่อน-หลังในแถบด้านข้างของคุณ

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

ตรงไปที่ ลักษณะที่ปรากฏ -> วิดเจ็ต ตอนนี้หาวิดเจ็ต Twenty20 แล้วลากไปยังพื้นที่แถบด้านข้าง การตั้งค่าของวิดเจ็ตนี้คล้ายกับส่วนก่อนหน้านี้ เพียงคุณมีปุ่มพิเศษสองปุ่มสำหรับเลือก (หรืออัปโหลด) ภาพก่อนและหลัง

เมื่อเสร็จแล้วให้บันทึกการตั้งค่าวิดเจ็ตแล้วตรวจสอบเว็บไซต์ของคุณ ง่ายใช่มั้ย?

ปลั๊กอินทางเลือกบางตัว

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

1. ภาพก่อน + หลังสำหรับ Divi

หากคุณเป็นผู้ใช้ Divi ปลั๊กอิน Before + After Images สำหรับ Divi จะดีที่สุดสำหรับความต้องการของคุณ มีน้ำหนักเบา ตอบสนองได้ดี และรองรับการโหลดแบบ Lazy Loading มันสร้างโมดูลใหม่ที่ช่วยให้คุณเพิ่มภาพก่อนและหลังในเว็บไซต์ของคุณ ปลั๊กอินฟรีนี้จะทำงานร่วมกับปลั๊กอิน Divi Builder, ธีม Divi และธีมอื่นๆ โดย Elegant Themes

ราคา – ฟรี | ข้อมูลมากกว่านี้

2. เอนกประสงค์ ก่อน หลัง สไลเดอร์

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

ราคา – $18 | ข้อมูลมากกว่านี้

3. สมาร์ทก่อนหลังดู

Smart Before After Viewer เป็นปลั๊กอินพรีเมียมที่ตอบสนองและสัมผัสได้อย่างเต็มที่ ช่วยให้คุณเพิ่มข้อความป้ายกำกับที่กำหนดเองบนภาพก่อนและหลัง และคุณสามารถเปลี่ยนตำแหน่งและสีของฉลากได้โดยไม่ยุ่งยาก ปลั๊กอินนี้ยังช่วยให้คุณเพิ่มรูปภาพหลายภาพในหน้าเดียว

ราคา – $18 | ข้อมูลมากกว่านี้

Endnote

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

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

ภาพเด่นผ่าน __ / shutterstock.com