วิธีโน้มน้าวผู้เข้าชมเพจด้วยการตั้งค่าแอนิเมชั่นในตัวของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

มาเริ่มสร้างกันเลย!

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มมาตรา #1

สีพื้นหลัง

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

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

ตัวแบ่งด้านล่าง

ดำเนินการต่อโดยเพิ่มตัวแบ่งด้านล่างในส่วน

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 30px
• ตัวแบ่งแนวนอนซ้ำ: 10x (เดสก์ท็อป), 4x (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

• ช่องว่างภายในด้านบน: 269px (เดสก์ท็อป), 100px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 674px (เดสก์ท็อป), 200px (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่

เพิ่มโมดูลข้อความ

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

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

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

เปลี่ยนการตั้งค่าข้อความหัวข้อถัดไป

• แบบอักษรของหัวเรื่อง: Didact Gothic
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความของหัวเรื่อง: 170px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 0.8em

• หัวเรื่อง ข้อความ เงา ความยาวแนวตั้ง: 1.5em
• หัวเรื่องสีเงาข้อความ: rgba(0,0,0,0.11)

เพิ่มส่วน #2

สีพื้นหลัง

ดำเนินการต่อโดยเพิ่มส่วนที่สองลงในหน้า เปลี่ยนสีพื้นหลังในการตั้งค่าส่วน

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

ตัวแบ่งด้านบน

เพิ่มตัวแบ่งด้านบนให้กับส่วนด้วย

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 30px
• ตัวแบ่งแนวนอนซ้ำ: 10x (เดสก์ท็อป), 4x (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

และเพิ่มค่าระยะห่างในการตั้งค่าระยะห่าง

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

เพิ่มแถว

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

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

ขนาด

เปิดการตั้งค่าแถว ไปที่การตั้งค่าการปรับขนาด และทำการเปลี่ยนแปลงบางอย่าง

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

เพิ่มโมดูล Blurb

เลือกไอคอน

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

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

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

• สีไอคอน: #4ffcff
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 150px

ระยะห่าง

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

• ขอบบน: -550px
• ช่องว่างภายในด้านบน: 550px

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มแอนิเมชั่นไปยังโมดูล Blurb โดยใช้การตั้งค่าต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 3000ms
• ภาพเคลื่อนไหวล่าช้า: 1200ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

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

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

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

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

• แบบอักษรของข้อความ: Didact Gothic
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: rgba(255,255,255,0.03)
• ขนาดตัวอักษร: 350px
• การวางแนวข้อความ: ศูนย์

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

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

เพิ่มโมดูลข้อความที่สองในคอลัมน์แรกด้วยเนื้อหา H3 ที่เลือก

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

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

• หัวข้อ 3 แบบอักษร: Didact Gothic
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 40px (เดสก์ท็อป), 30px (แท็บเล็ตและโทรศัพท์)
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -1px

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ทัศนวิสัย

โมดูลถัดไปที่จำเป็นในคอลัมน์แรกคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

สี

ดำเนินการต่อโดยเปลี่ยนสีตัวแบ่งในแท็บออกแบบ

• สี: #ffffff

ขนาด

ทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 59%
• การจัดตำแหน่งโมดูล: ศูนย์

แอนิเมชั่น

และเพิ่มแอนิเมชั่นให้กับโมดูลด้วย

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ความเข้มของแอนิเมชั่น: 10%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

เพิ่มโมดูลข้อความ #3 ลงในคอลัมน์ 1

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

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

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

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

• แบบอักษรข้อความ น้ำหนัก: เบา
• สีข้อความ: #b7b7b7
• ขนาดตัวอักษร: 18px
• ความสูงของบรรทัดข้อความ: 1.8em
• การวางแนวข้อความ: ศูนย์

แอนิเมชั่น

และเพิ่มแอนิเมชั่นให้กับโมดูล

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ความเข้มของแอนิเมชั่น: 20%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

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

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

เปลี่ยนเนื้อหาโมดูล

เปลี่ยนเนื้อหาของรายการที่ซ้ำกัน

เพิ่มการหน่วงเวลาแอนิเมชันให้กับโมดูลตัวแบ่งของรายการที่ซ้ำกัน

เพิ่มการดีเลย์ของแอนิเมชั่นให้กับแต่ละโมดูลของ Divider ที่ซ้ำกันเช่นกัน

• โมดูลตัวแบ่งในคอลัมน์ 2: 400ms
• โมดูลตัวแบ่งในคอลัมน์ 3: 800ms
• โมดูลตัวแบ่งในคอลัมน์ 4: 1200ms

เพิ่มการหน่วงเวลาภาพเคลื่อนไหวลงในโมดูลข้อความ #3 ซ้ำ

ทำสิ่งเดียวกันกับโมดูลข้อความสุดท้ายในแต่ละคอลัมน์

• โมดูลข้อความสุดท้ายในคอลัมน์ 2: 400ms
• โมดูลข้อความสุดท้ายในคอลัมน์ 3: 800ms
• โมดูลข้อความสุดท้ายในคอลัมน์ 4: 1200ms

ปรับแต่งไอคอน Blurb #2

ไอคอนสี

เรากำลังแก้ไขสีและภาพเคลื่อนไหวของไอคอนประกาศสำหรับแต่ละรายการที่ซ้ำกัน เปิด Blurb Module ในคอลัมน์ 2 และเปลี่ยนสีไอคอน

• ไอคอนสี: #ff6b86

แอนิเมชั่น

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

• ประเภทแอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ภาพเคลื่อนไหวล่าช้า: 800ms
• ความเข้มของแอนิเมชั่น: 62%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

ปรับแต่งไอคอน Blurb #3

ไอคอนสี

ดำเนินการต่อโดยเปิดโมดูล Blurb ในคอลัมน์ 3 และเปลี่ยนสีไอคอน

• สีไอคอน: #ffe500

แอนิเมชั่น

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

• ประเภทแอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1000ms
• ภาพเคลื่อนไหวล่าช้า: 600ms
• ความเข้มของแอนิเมชั่น: 69%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

ปรับแต่งไอคอน Blurb #4

ไอคอนสี

เปิดโมดูล Blurb สุดท้ายในคอลัมน์ 4 และเปลี่ยนสีไอคอน

• ไอคอนสี: #00ff9d

แอนิเมชั่น

และจบการออกแบบโดยเปลี่ยนการตั้งค่าแอนิเมชั่นในแท็บออกแบบ

• ประเภทแอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 3000ms
• ภาพเคลื่อนไหวล่าช้า: 400ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

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

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