ไฮไลท์ปลั๊กอิน Divi: Divi Sensei ก่อนหลัง Slider

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

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

Divi Sensei ก่อนและหลังโมดูล Slider

อัปโหลดและติดตั้งปลั๊กอิน Divi Sensei Before and After ตามปกติ สามไม่มีการตั้งค่าที่ต้องทำ เมื่อคุณอัปโหลดและเปิดใช้งานปลั๊กอิน คุณจะเห็นโมดูลใหม่ที่เพิ่มลงใน Divi Builder ชื่อ Sensei Before and After Slider

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

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

แท็บเนื้อหา

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

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

แท็บออกแบบ

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

ตัวเลื่อน

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

ป้าย

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

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

โอเวอร์เลย์

โอเวอร์เลย์ถูกเปิดใช้งานโดยค่าเริ่มต้น คุณสามารถปิดใช้งาน ปรับสี และปรับความทึบได้ สีเริ่มต้นคือสีดำที่มีความทึบ 50%

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

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

Divi Sensei ก่อนและหลัง Slider Examples

มาดูตัวอย่างวิธีการใช้แถบเลื่อนและลักษณะที่ปรากฏภายในเค้าโครง Divi ฉันใช้รูปภาพจาก Unsplash และรูปภาพที่มีอยู่ในเลย์เอาต์ Divi ฟรีที่สร้างไว้ใน Divi ฉันจะระบุเลย์เอาต์ Divi ที่ฉันใช้อยู่

การเปรียบเทียบกราฟิก

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

นี่คือลักษณะที่ปรากฏภายในเค้าโครง มันยอดเยี่ยมมากสำหรับการเปรียบเทียบเช่นการจำลองกราฟิกของเครื่องเกมสองเครื่อง

บริการก่อนและหลัง Portfolio

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

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

นี่คือลักษณะที่ปรากฏเมื่อวางซ้อน ฉันได้เลื่อนแถบเลื่อนไปด้านหนึ่งเพื่อแสดงรูปภาพก่อนหน้ามากขึ้น

สำหรับการอ้างอิง ต่อไปนี้คือรูปภาพที่ย้ายที่จับเพื่อแสดงรูปภาพหลังเพิ่มเติม

เปรียบเทียบสินค้า

สำหรับตัวอย่างนี้ ฉันกำลังแทนที่รูปภาพชาสามรูปในเลย์เอาต์ Tea Shop ด้วยแถบเลื่อน 3 DS B&A ฉันใช้สีจากเค้าโครงสำหรับปุ่มและตัวควบคุมตัวเลื่อน แถบเลื่อนตรงกลางถูกตั้งค่าเป็นแนวตั้งเพื่อให้แตกต่างออกไป โอเวอร์เลย์ใช้สีจากเลย์เอาต์ที่มีความทึบลดลง

นี่คือลักษณะที่ปรากฏภายในเลย์เอาต์ เหมาะอย่างยิ่งสำหรับการเปรียบเทียบรายละเอียดภาพของผลิตภัณฑ์หลายรายการ หลายตำแหน่ง หลายสี สำหรับผลิตภัณฑ์ที่มีหลายตัวเลือกให้แสดงทั้งแบบมีและไม่มีตัวเลือก ฯลฯ

เปรียบเทียบสถานที่

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

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

ซื้อ

คุณสามารถซื้อ Divi Sensei Before and After Slider ได้ใน Divi Marketplace ค่าใช้จ่ายคือ $5 สำหรับการใช้งานเว็บไซต์ไม่จำกัด และการสนับสนุนและอัปเดต 1 ปี ราคานี้รวมการรับประกันคืนเงินภายใน 30 วัน

จบความคิด

Divi Sensei Before and After Slider เป็นโมดูลที่เรียบง่าย ตัวอย่างเช่น แถบเลื่อนไม่มีตัวควบคุมความกว้างและป้ายกำกับไม่มีเส้นขอบ เงากล่อง การไล่ระดับสี ฯลฯ แต่การตั้งค่าทำให้ง่ายต่อการใส่สไตล์ของเค้าโครงทุกแบบที่ฉันเพิ่มเข้าไป สำหรับราคาและสิ่งที่สามารถทำได้ ระดับของการตั้งค่านั้นสมเหตุสมผล และฉันก็สามารถออกแบบที่ต้องการได้อย่างง่ายดาย

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

เราต้องการได้ยินจากคุณ คุณเคยลอง Divi Sensei ก่อนและหลัง Slider หรือไม่? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็นด้านล่าง

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