ไฮไลท์ปลั๊กอิน Divi: เอฟเฟกต์รูปภาพถัดไป Pro

Next Image Effect Pro เป็นปลั๊กอินของบุคคลที่สามสำหรับ Divi ที่เพิ่มเอฟเฟกต์โฮเวอร์รูปภาพจำนวนมากที่ช่วยดึงดูดความสนใจไปที่รูปภาพและลิงก์ของคุณ ปลั๊กอินเพิ่ม 7 โมดูลให้กับ Divi Builder โดยแต่ละโมดูลมีชุดการออกแบบและเอฟเฟกต์ของตัวเอง ในบทความนี้ เราจะมาดู Next Image Effect Pro และดูว่าสามารถทำอะไรได้บ้าง

การติดตั้ง Image Effect Pro ถัดไป

ซื้อและดาวน์โหลดปลั๊กอินจาก Divi Marketplace ทำตามขั้นตอนเหล่านี้เพื่อติดตั้ง:

1. ในแดชบอร์ด WordPress ให้ไปที่ Plugins > Add New
2. อัปโหลดปลั๊กอินจากคอมพิวเตอร์ของคุณ
3. คลิก ติดตั้งทันที
4. เมื่อติดตั้งปลั๊กอินแล้ว ให้คลิก เปิดใช้งาน

ถัดไป คุณจะต้องเปิดใช้งานใบอนุญาต ไปที่ Plugins > Image Effect Pro License ป้อนรหัสใบอนุญาตของคุณและบันทึกการเปลี่ยนแปลง

โมดูล Effect Pro ของรูปภาพถัดไป

Image Effect Pro เพิ่มชุดโมดูลลงใน Divi Builder ที่รวมรูปภาพและข้อความที่มีสไตล์เข้าด้วยกัน พวกมันเพิ่มเอฟเฟกต์โฮเวอร์และทิศทางรวมกันหลายร้อยแบบ ตัวเลือกการจัดรูปแบบข้อความประกอบด้วยตัวควบคุมอิสระสำหรับหัวเรื่อง โฟกัสข้อความ เนื้อหา และพื้นหลัง

โมดูลรวมถึง:

• โฮเวอร์รูปภาพแบบวงกลม
• กล่องโฮเวอร์รูปภาพ
• เอฟเฟกต์ไอคอนรูปภาพ
• เอฟเฟกต์ภาพเมก้า
• โฮเวอร์รูปภาพขั้นต่ำ
• เลื่อนภาพถัดไป
• สุดยอดภาพโฮเวอร์

โฮเวอร์รูปภาพแบบวงกลม

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

การตั้งค่าการออกแบบสำหรับรูปภาพรวมถึงตำแหน่งเงาของกล่อง ความแรง และสี

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

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

มีเอฟเฟกต์โฮเวอร์ 19 แบบพร้อมตัวเลือกทิศทาง 4 ทิศทางสำหรับแต่ละเอฟเฟกต์ นี่คือเอฟเฟกต์ 1 เอฟเฟกต์มีหลายวิธีในการเปลี่ยนภาพออกและเปลี่ยนเนื้อหา รวมถึงการซูม พลิก สไลด์ และอื่นๆ อีกมากมาย

กล่องโฮเวอร์รูปภาพ

กล่องโฮเวอร์รูปภาพยังรวมรูปภาพที่มีเนื้อหาโฮเวอร์ไว้ด้วย มันไม่เปลี่ยนรูปร่างของภาพ

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

มันมีเอฟเฟกต์โฮเวอร์ที่แตกต่างกัน 13 แบบรวมถึงการพลิก, สไลด์, จาง, ซูม ฯลฯ เอฟเฟกต์หลายรายการเพิ่มตัวเลือกสำหรับเส้นทาง นี่คือเอฟเฟกต์ 1

เอฟเฟกต์ไอคอนรูปภาพ

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

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

การตั้งค่าไอคอนประกอบด้วยสี ขนาด ระยะห่าง ความสูงของเส้น สีพื้นหลัง เงา เส้นขอบ ฯลฯ ในตัวอย่างนี้ ฉันได้เพิ่มสีพื้นหลังและลดความสูงของเส้นเพื่อสร้างเส้น ฉันยังเพิ่มเงา นี่คือเอฟเฟกต์โฮเวอร์เฮร่า

นี่คือเอฟเฟกต์โฮเวอร์เทอร์รี่ ฉันได้เปลี่ยนสีของชื่อเรื่องและข้อความโฟกัส และใช้การตั้งค่าสำหรับขนาดแบบอักษรและไอคอนจากตัวอย่างก่อนหน้านี้

เอฟเฟกต์ภาพเมก้า

Mega Image Effect เป็นการ์ด 2 ด้านที่มีรูปภาพอยู่ด้านหนึ่งและมีเนื้อหาอยู่อีกด้านหนึ่ง ด้านหน้าแสดงภาพได้ตามปกติ

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

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

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

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

ตัวอย่างนี้ การวางเมาส์เหนือรูปภาพแบบขนาน เอฟเฟกต์ข้อความซูมเข้า และการหน่วงเวลาข้อความเล็กน้อย

โฮเวอร์รูปภาพขั้นต่ำ

Minimal Image Effect เป็นโมดูลที่ง่ายที่สุดในชุด จะแสดงรูปภาพพร้อมเอฟเฟกต์โฮเวอร์

การตั้งค่าที่กำหนดเองเพียงอย่างเดียวคือเอฟเฟกต์โฮเวอร์ ประกอบด้วยเอฟเฟกต์ 10 แบบให้เลือก เราจะดูบางส่วน

ตัวอย่างนี้คือ Scale Out Rotate รูปภาพถูกปรับขนาดออกและหมุนเพียงเล็กน้อยในสถานะปกติ เมื่อวางเมาส์เหนือ รูปภาพจะซูมเข้าและหมุนเป็นสถานะปกติ

นี่คือเบลอ ภาพจะเบลอจนกว่าคุณจะวางเมาส์เหนือ จากนั้นค่อยๆ ยกเลิกการเบลอจนคมชัด

นี่คือการกระพริบ แสงสีขาววาบเหนือภาพและจางหายไปเมื่อคุณวางเมาส์เหนือ

เลื่อนภาพถัดไป

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

คุณยังสามารถปรับการวางซ้อนได้ ตั้งค่าสีทึบหรือการไล่ระดับสี นอกจากนี้ยังมีประเภทการไล่ระดับสีและการควบคุมมาตรฐานอีกด้วย

ตำแหน่งพื้นหลังช่วยให้คุณแสดงด้านบนหรือด้านล่างของภาพได้

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

สุดยอดภาพโฮเวอร์

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

เมื่อวางเมาส์เหนือ ภาพซ้อนทับจะสว่างขึ้นและข้อความจะถูกเปิดเผย

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

โมดูลนี้มีเอฟเฟกต์โฮเวอร์ 24 แบบ โดยจะแสดงรูปภาพในขนาดต่างๆ ระดับความทึบ ตำแหน่งของข้อความ และเพิ่มเส้นขอบ

นี่คือเอฟเฟกต์ 4 มันแสดงรูปภาพในสี่เหลี่ยมและเพิ่มเส้นขอบรอบ ๆ ด้านในที่ทับซ้อนกันที่ปลาย

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

เอฟเฟกต์ 6 วางหัวเรื่องและข้อความโฟกัสไว้ที่ด้านบนสุดโดยมีบรรทัดอยู่ข้างใต้ และเนื้อหาอยู่ที่ด้านล่าง

เอฟเฟกต์ 8 รักษาขนาดสี่เหลี่ยมขนาดใหญ่และเพิ่มเส้นขอบบาง ๆ

นี่คือเอฟเฟกต์ 10 เมื่อโฮเวอร์ รูปภาพจะซูม เส้นจะกลายเป็น x และการไล่ระดับสีจะปรากฏขึ้น

ตัวอย่างเอฟเฟกต์รูปภาพถัดไป

ตัวอย่างง่ายๆ ต่อไปนี้คือรูปลักษณ์ของ Divi Home Renovation ที่มีการเพิ่มโมดูล Ultimate Image Hover เพื่อสร้าง CTA ฉันได้เพิ่มไว้ทางด้านซ้ายของรูปภาพและใช้สีจากเลย์เอาต์

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

ซื้อ Next Image Effect Pro

Next Image Effect Pro มีวางจำหน่ายใน Divi Marketplace ในราคา $49 รวมถึงการใช้งานเว็บไซต์ไม่จำกัด การรับประกันคืนเงินภายใน 30 วัน และการสนับสนุนและอัปเดต 1 ปี

จบความคิด

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

เราต้องการได้ยินจากคุณ คุณลอง Next Image Effect Pro แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

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