โมดูล Blurb เชิงโต้ตอบที่สร้างสรรค์โดยใช้ตัวเลือกการแปลงและโฮเวอร์ของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ กันก่อน

ขั้นตอนทั่วไป

เพิ่มมาตราใหม่

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

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาดในแท็บการออกแบบเพื่อให้แถวนั้นใช้ความกว้างทั้งหมดของหน้าจอ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 150px
• ช่องว่างภายในด้านล่าง: 150px

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

เลือกไอคอน

ดำเนินการต่อโดยเลือกไอคอน

สีพื้นหลัง

เพิ่มพื้นหลังสีขาวทั้งหมดต่อไป

• สีพื้นหลัง: #ffffff

การตั้งค่าไอคอนเริ่มต้น

จากนั้น เปลี่ยนการตั้งค่าไอคอนในแท็บการออกแบบ

• สีไอคอน: #7a69e6
• ไอคอนวงกลม: ใช่
• วงกลมสี: rgba(122,105,230,0.3)
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: 32px

การตั้งค่าไอคอนโฮเวอร์

แก้ไขทั้งไอคอนและสีวงกลมเมื่อวางเมาส์เหนือ

• ไอคอนสี: #ff758e
• วงกลมสี: rgba(255,117,142,0.29)

การตั้งค่าข้อความชื่อเรื่อง

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของชื่อเรื่อง: Roboto
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 18px
• ความสูงของบรรทัดหัวเรื่อง: 1.7em

การตั้งค่าข้อความเนื้อหา

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

• แบบอักษรของร่างกาย: เปิด Sans
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• ขนาดข้อความเนื้อหา: 14px
• ความสูงของเส้นร่างกาย: 1.8em

ขนาด

เรายังลดขนาดโมดูลลงเล็กน้อยตามขนาดหน้าจอต่างๆ

• ความกว้าง: 74% (เดสก์ท็อป), 85% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเราจะเพิ่มช่องว่างภายในแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 40px
• ช่องว่างภายในด้านซ้าย: 20px
• ช่องว่างภายในด้านขวา: 20px

ชายแดน

ดำเนินการต่อโดยเพิ่ม '10px' ในแต่ละมุมของโมดูล Blurb

ค่าเริ่มต้นกล่องเงา

และเพิ่มเงากล่องที่ละเอียดอ่อน

• ความชัดเจนของเงากล่อง: 70px
• เงาสี: rgba(122,105,230,0.3)

เงากล่องเลื่อน

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

• เงาสี: rgba(255,117,142,0.29)

โคลนโมดูล Blurb สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เพิ่มแถว #2

โครงสร้างคอลัมน์

สำหรับตัวอย่างสุดท้าย เราจะต้องแยกแถว เลือกโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาดในแท็บออกแบบ

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 1440px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

Clone Blurb Module ในแถวก่อนหน้า & วางในคอลัมน์ 1

จากนั้น ให้โคลนโมดูล Blurb อันใดอันหนึ่งในแถวก่อนหน้า และวางสำเนาที่ซ้ำกันในคอลัมน์แรกของแถวที่สอง

เปลี่ยนขนาด

แก้ไขความกว้างในการตั้งค่าการกำหนดขนาดของ Blurb Module ใหม่ของคุณ และเมื่อคุณทำเสร็จแล้ว คุณจะทำขั้นตอนทั่วไปให้เสร็จสิ้น!

• ความกว้าง: 100% (เดสก์ท็อป), 85% (แท็บเล็ตและโทรศัพท์)

สร้างตัวอย่างใหม่ #1

มาตราส่วนการแปลงเริ่มต้น

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

• ด้านล่าง: 100% (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)
• ขวา: 100% (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)

โฮเวอร์แปลงมาตราส่วน

แก้ไขค่ามาตราส่วนการแปลงบนโฮเวอร์เพื่อสร้างเอฟเฟกต์ขยาย

• ด้านล่าง: 132%
• ขวา: 132%

สร้างตัวอย่างใหม่ #2

เริ่มต้นการแปลงหมุน

สู่ตัวอย่างที่สอง! เราจะสร้างเอฟเฟกต์การพลิกแนวนอนตามที่คุณเห็นใน GIF ด้านบน ในการทำเช่นนั้น เราจะต้องเล่นกับค่าการหมุนการแปลง เรากำลังใช้ค่า 'สูงสุด' ก่อนที่การหมุนจะเปลี่ยนเป็น 0 องศา ซึ่งจะทำให้เอฟเฟกต์การพลิกเกิดขึ้นได้

• ขวา: 359.9deg

โฮเวอร์ แปลงร่าง หมุน

เปิดใช้งานตัวเลือกโฮเวอร์สำหรับตัวเลือกการหมุนการแปลงและเพิ่ม '0deg' สิ่งที่เราทำโดยทั่วไปคือการอนุญาตให้โมดูลทำการพลิก 360 องศา (ในทางเทคนิค 359.9)

• ขวา: 0deg

การเปลี่ยนผ่าน

นอกจากนี้ เราจะเพิ่มระยะเวลาการเปลี่ยนแท็บขั้นสูงเพื่อสร้างการเปลี่ยนแปลงที่ราบรื่น

• ระยะเวลาการเปลี่ยนภาพ: 1000ms

สร้างตัวอย่างใหม่ #3

เริ่มต้นการแปลงหมุน

สำหรับตัวอย่างที่สาม เรากำลังจะทำสิ่งเดียวกับที่เราทำในตัวอย่างก่อนหน้า แต่แทนที่จะพลิกกลับในแนวนอน เรากำลังสร้างภาพแนวตั้ง

• ศูนย์: 359.9deg

โฮเวอร์ แปลงร่าง หมุน

ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนค่าที่คุณได้แก้ไขกลับไปเป็น '0deg' เมื่อวางเมาส์เหนือ

• ศูนย์: 0deg

การเปลี่ยนผ่าน

และเพิ่มระยะเวลาการเปลี่ยนอีกครั้งในการตั้งค่าการเปลี่ยน

• ระยะเวลาการเปลี่ยนภาพ: 1000ms

สร้างตัวอย่างใหม่ #4

มาตราส่วนการแปลงเริ่มต้น

สู่ตัวอย่างต่อไปและสุดท้าย! เริ่มต้นด้วยการเปลี่ยนมาตราส่วนของโมดูล แต่ตรวจสอบให้แน่ใจว่าโมดูลยังคงไม่เสียหายในขนาดหน้าจอที่เล็กกว่า

• ด้านล่าง: 150% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ขวา: 150% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

โฮเวอร์แปลงมาตราส่วน

เปลี่ยนมาตราส่วนการแปลงบนโฮเวอร์เพื่อให้โมดูลสามารถถอยกลับเข้าที่บนเดสก์ท็อป

• ด้านล่าง: 100%
• ขวา: 100%

เริ่มต้นการแปลงหมุน

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

• ซ้าย: 322deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)
• ขวา: 59deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)

โฮเวอร์ แปลงร่าง หมุน

อนุญาตให้โมดูลวางบนโฮเวอร์โดยแทนที่ค่าที่คุณเพิ่มด้วย '0deg'

• ซ้าย: 0deg
• ขวา: 0deg

Default Transform Skew

แก้ไขค่าความเอียงของการแปลงด้วย

• ด้านล่าง: 22deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)
• ขวา: 22deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)

Hover Transform Skew

นำค่าเริ่มต้นกลับมาเมื่อโฮเวอร์

• ด้านล่าง: 0deg
• ขวา: 0deg

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด เพิ่มระยะเวลาการเปลี่ยนในการตั้งค่าการเปลี่ยน

• ระยะเวลาการเปลี่ยนภาพ: 500ms

Clone Blurb Module ในคอลัมน์ 1 สี่ครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

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

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