จุดเด่นของปลั๊กอิน Divi – Tilt Blurb Divi Module

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

Tilt Blurb Module คืออะไร?

Tilt Blurb Module เป็นปลั๊กอินของบุคคลที่สามจาก Hadworm ที่เพิ่มโมดูล Blurb ใหม่ให้กับ Divi Builder (สำหรับทั้ง Divi และ Extra) ที่เพิ่มเอฟเฟกต์การเอียงที่น่าสนใจ สร้างรูปลักษณ์ 3 มิติ ในไฮไลต์ของปลั๊กอินนี้ เราจะดูที่โมดูลและดูว่าสามารถทำอะไรได้บ้าง ฉันแสดง gif มาบ้างแล้ว แต่ส่วนใหญ่จะเป็นรูปภาพเนื่องจากขนาดไฟล์ของ gif รูปภาพสำหรับตัวอย่างนำมาจาก Unsplash.com และจาก WordPress.org

การติดตั้ง Tilt Blurb Divi Module

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

เพิ่มโมดูลใหม่ลงใน Divi Builder ชื่อ Tilt Blurb เป็นสีม่วงภายใน Divi Builder ดังนั้นจึงพลาดไม่ได้ ฉันชอบเวลาที่นักพัฒนาใช้สีต่างๆ สำหรับโมดูลของตน เพื่อให้พวกเขาโดดเด่นจากโมดูลมาตรฐาน (สำหรับสิ่งที่คุ้มค่า)

โมดูลประกอบด้วยแท็บมาตรฐานและแท็บใหม่:

• เนื้อหา – ข้อความ ลิงค์ รูปภาพและไอคอน พื้นหลัง ป้ายผู้ดูแลระบบ
• การตั้งค่าการเอียง – การตั้งค่าการเอียง พื้นหลังการเอียง เลเยอร์การเอียง
• การออกแบบ – รูปภาพและไอคอน, ข้อความ, ข้อความส่วนหัว, ข้อความเนื้อหา, เส้นขอบ, การปรับขนาด, ระยะห่าง
• ขั้นสูง – CSS ID และคลาส, CSS ที่กำหนดเอง, แอนิเมชั่น, การมองเห็น

การตั้งค่าการเอียง

สำหรับตัวอย่างเหล่านี้ ฉันเพิ่มพื้นหลังแล้ววางรูปภาพขนาดเล็กลงเป็นพื้นหน้าเพื่อสร้างเอฟเฟกต์ 3 มิติ แล้วก็ทำกาแฟ กาแฟจำนวนมาก

ตัวอย่างด้วยการตั้งค่าเริ่มต้น

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

ขนาดพร้อมรูปภาพ

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

ขนาด Blurb แบบเอียงพร้อม 2 รูปภาพพร้อมเนื้อหาแบบลอย

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

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

จำนวนเอียง

แถบเลื่อนปริมาณการเอียงช่วยให้คุณควบคุมว่าจะเอียงภาพได้มากเพียงใด ค่าเริ่มต้นคือ 20 ค่านี้ใช้ 100

มุมมองเอียง

Tilt Perspective ช่วยเพิ่มมุมมองให้ลึกซึ้งยิ่งขึ้น ยิ่งตัวเลขต่ำเท่าไหร่ มุมมองก็จะยิ่งลึกมากขึ้นเท่านั้น ค่าเริ่มต้นคือ 1000 ตัวอย่างนี้คือ 200

มาตราส่วนเอียง

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

ความเร็วเอียง

Tilt Speed ​​ควบคุมความเร็วที่ภาพจะเคลื่อนที่เมื่อคุณวางเมาส์เหนือ ยิ่งตัวเลขน้อยเท่าไหร่ก็ยิ่งเคลื่อนที่เร็วขึ้นเท่านั้น ค่าเริ่มต้นคือ 100 ค่านี้คือ 5000 ฉันเป็นส่วนหนึ่งของเอฟเฟกต์ที่ช้า

เอียงย้อนกลับ

Tilt Reverse เปลี่ยนทิศทางของการเอียง โดยปกติการเอียงจะเคลื่อนออกจากเมาส์ ย้อนกลับเอียงภาพไปทางเมาส์

เอียงแสงสะท้อน

Tilt Glare เพิ่มเอฟเฟกต์แสงสะท้อนตามเมาส์ ปริมาณแสงสะท้อนสามารถปรับได้ ภาพด้านบนใช้ .8 ซึ่งเป็นการตั้งค่าเริ่มต้น เหมาะอย่างยิ่งสำหรับการสร้างเอฟเฟกต์แสง

รัศมีชายแดน

รัศมีเส้นขอบเปลี่ยนรูปร่างของเส้นขอบ ค่าเริ่มต้นคือ 40 ซึ่งตั้งไว้ที่ 100 ซึ่งเป็นจำนวนสูงสุด

เอียงพื้นหลัง

Tilt Background ให้คุณตั้งค่าสีพื้นหลังและเอฟเฟกต์เส้นขอบ

เอียงพื้นหลัง

ผลข้างเคียงอย่างหนึ่งของสีพื้นหลังแบบเอียงคือทำให้ภาพมีแสงเรืองแสงสวยงาม

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

ระยะพื้นหลังเอียง

Tilt Background Distance ปรับระยะห่างของเงา มันถูกตั้งค่าเป็น -50 โดยค่าเริ่มต้น ตัวอย่างนี้ใช้ -25

ตัวอย่างนี้ใช้ระยะพื้นหลังเอียงที่ 0 และความทึบที่ .3 ซึ่งจะสร้างภาพซ้อนทับบนพื้นหลัง

ขนาด/มาตราส่วนพื้นหลังเอียง

ขนาดพื้นหลังเอียง/มาตราส่วนเปลี่ยนระยะห่างของพื้นหลังเอียง ค่าเริ่มต้นคือ 1.04 อันนี้ 1.2

Tilt Layers

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

รูปภาพที่ฉันใช้ถูกมองว่าเป็นเส้นขอบ ฉันได้ปรับความเอียงเพื่อให้มองเห็นได้ง่ายขึ้น

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

อันนี้ใช้ความลึกของเลเยอร์ 10

ตัวอย่างนี้ใช้ทั้งพื้นหลังเอียงและเลเยอร์เอียง

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

นี่คือโลโก้ที่ไม่มีสีเลเยอร์ ด้านข้างมองเห็นยากขึ้น

ใบอนุญาต การสนับสนุน และเอกสารประกอบ

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

ความคิดสุดท้าย

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

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

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