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

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

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

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

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

คอยติดตามอ่านเพิ่มเติมเกี่ยวกับ:

• การเพิ่มตัวเลื่อนก่อนและหลังด้วย Qi Addons สำหรับ Elementor
• สำรวจตัวเลือกขั้นสูง

การเพิ่มตัวเลื่อนก่อนและหลังด้วย Qi Addons สำหรับ Elementor

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

ขั้นตอนการติดตั้ง QI Addons สำหรับ Elementor นั้นไม่แตกต่างจากการติดตั้งปลั๊กอินอื่นๆ หากคุณมีคำถามใดๆ เกี่ยวกับเรื่องนี้ โปรดตรวจสอบลิงก์ที่เราให้ไว้ด้านบน และคุณสามารถเขียนถึงเราในส่วนความคิดเห็น

เนื่องจากนี่คือปลั๊กอิน Elementor ตรวจสอบให้แน่ใจว่าได้ เปลี่ยนไปใช้ตัวแก้ไข Elementor เมื่อสร้างโพสต์ใหม่ วิดเจ็ต Qi Addons ทั้งหมดจะ แสดงอย่างเรียบร้อยในเมนูองค์ประกอบด้านซ้ายมือ เพียงเลื่อนลงเมนูเพื่อค้นหา

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

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

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

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

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

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

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

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

คุณยังสามารถ คลิกที่ Nabdle Text Color เพื่อสร้างเฉดสีให้กับข้อความในวงกลม และ เลือกแบบอักษรของข้อความด้วยวิธีเดียวกัน สุดท้ายนี้ คุณยังสามารถ ปรับแต่งสีวงกลม ได้ด้วยวิธีเดียวกัน

สำรวจตัวเลือกขั้นสูง

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

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

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

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

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

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

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

ให้ความสนใจเป็นพิเศษกับ แท็บ Responsive เนื่องจากคุณสามารถ เลือกแถบเลื่อนที่จะไม่แสดงบนอุปกรณ์ที่เลือก ได้

นี่คือลักษณะของตัวเลื่อนในหน้าหลังจากที่เราปรับเปลี่ยนตามความต้องการของเรา:

สรุปแล้ว

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

เราหวังว่าบทความนี้จะเป็นประโยชน์ หากคุณชอบ โปรดอ่านบทความเหล่านี้ด้วย!

• วิธีปรับแต่งแบบฟอร์มการติดต่อของคุณ 7 สไตล์ง่ายๆ
• วิธีเน้นข้อความใน WordPress อย่างง่าย
• วิธีสร้างขั้นตอนขั้นตอนโดยใช้วิดเจ็ต Elementor Process