วิธีการใช้แอนิเมชั่นการชนกับองค์ประกอบการออกแบบด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ตัวอย่าง #1: ข้อความที่ชนกัน

ตัวอย่าง #2: ตัวแบ่งการชน

ตัวอย่าง #3: ชนกริด

โฮเวอร์

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

สร้างตัวอย่าง # 1: ข้อความที่ชนกัน

เพิ่มแผนกพิเศษ

โครงสร้าง

มาเริ่มกันที่ตัวอย่างแรกกันเลย! เปิดหน้าใหม่หรือหน้าที่มีอยู่และเพิ่มส่วนพิเศษใหม่โดยใช้โครงสร้างต่อไปนี้:

ขนาด

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

เพิ่มแถว #1

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

ดำเนินการต่อโดยเพิ่มแถวในส่วนพิเศษ:

ขนาด

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

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

ระยะห่าง

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

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

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

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

ดำเนินการต่อโดยเพิ่มโมดูลข้อความลงในคอลัมน์แรกของแถวและเพิ่มเนื้อหาบางส่วน

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

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: เบา
• ขนาดข้อความของหัวเรื่อง: 4.4vw (เดสก์ท็อป), 8.2vw (แท็บเล็ต), 40px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 0.7em

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

ทัศนวิสัย

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

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

สี

ไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่ง

• สี: #000000

ขนาด

ลดความกว้างของตัวแบ่งด้วย

• ความกว้าง: 91%

ระยะห่าง

และเพิ่มระยะขอบด้านบนเพื่อสร้างช่องว่างระหว่างโมดูลตัวแบ่งและโมดูลข้อความ

• ขอบบน: 30px

แอนิเมชั่น

สุดท้าย เพิ่มแอนิเมชั่นเล็กๆ น้อยๆ ให้กับ Divider Module

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: เบา
• หัวเรื่องข้อความสี: #3f46ff
• ขนาดข้อความหัวเรื่อง: 3.8vw (เดสก์ท็อป), 6.5vw (แท็บเล็ต), 40px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 0.8em

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 600ms
• ความเข้มของแอนิเมชั่น: 10%

เพิ่มแถว #2

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

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

เพิ่มโมดูลที่เหลือ

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

สร้างตัวอย่างใหม่ #2: วงเวียนชนกัน

เพิ่มแผนกพิเศษ

โครงสร้าง

สู่ตัวอย่างต่อไป! เพิ่มส่วนพิเศษใหม่โดยใช้โครงสร้างต่อไปนี้:

ขนาด

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

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

เพิ่มแถว #1

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

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

ระยะห่าง

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: เบา
• ขนาดข้อความของหัวเรื่อง: 70px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 0.8em

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 53% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

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

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

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

ทัศนวิสัย

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

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

สี

เปลี่ยนสีตัวแบ่งถัดไป

• ตัวแบ่งสี: #3f46ff

สไตล์

และเปลี่ยนรูปแบบตัวแบ่งในการตั้งค่าสไตล์

• รูปแบบตัวแบ่ง: Double

ขนาด

เพิ่มน้ำหนักตัวแบ่งในการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 8px

แอนิเมชั่น

สุดท้าย เพิ่มแอนิเมชั่นไปยังโมดูลตัวแบ่ง

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา

โมดูลตัวแบ่งโคลน & วางในคอลัมน์ 2

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

เปลี่ยนแอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย

เพิ่มแถว #3

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

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

เพิ่มโมดูลที่เหลือ

และเพิ่มโมดูลได้มากเท่าที่คุณต้องการเพื่อให้การออกแบบส่วนเสร็จสมบูรณ์

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัปโหลดการวางซ้อนรูปภาพที่มีรูปทรง

บันทึกภาพซ้อนทับที่มีรูปทรงต่อไปนี้ไปยังเดสก์ท็อปของคุณโดยคลิกขวา:

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

พื้นหลังไล่โทนสี

ถัดไป เพิ่มพื้นหลังแบบไล่ระดับสีให้กับโมดูล

• สี 1: #aa2bff
• สี 2: #09f7eb

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งภาพด้วย

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

และเปิดใช้งานตัวเลือก 'บังคับเต็มความกว้าง' ในการตั้งค่าขนาด

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

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

• ระยะขอบซ้าย: 200px
• ระยะขอบขวา: 200px

แอนิเมชั่น

สุดท้าย เพิ่มแอนิเมชั่นให้กับโมดูล

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 3000ms
• ความเข้มของแอนิเมชั่น: 100%

เพิ่มแถว #2

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

ต่อแถวที่สอง ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

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

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

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

ไอคอน

เลือกไอคอนถัดไป

สีพื้นหลัง

และเพิ่มสีพื้นหลังให้กับโมดูลด้วย

• สีพื้นหลัง: rgba(255,255,255,0.83)

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

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

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

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

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

• แบบอักษรของชื่อเรื่อง: Open Sans
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 15px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px
• ความสูงของบรรทัดชื่อเรื่อง: 1.8em

ขนาด

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

• ความกว้างของเนื้อหา: 183px

ระยะห่าง

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

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

กล่องเงา

ดำเนินการต่อโดยให้โมดูล Blurb เป็นเงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

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

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

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

Clone Blurb Module 8 ครั้ง & วาง 3 ซ้ำในแต่ละคอลัมน์ที่เหลือ

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

แก้ไขโมดูล Blurb #1

ระยะห่าง

เปิดโมดูล Blurb แรกและเพิ่มระยะขอบบนที่เป็นลบ

• ขอบบน: -340px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

โฮเวอร์ระยะห่าง

เปลี่ยนค่ามาร์จิ้นเมื่อโฮเวอร์

• ขอบบน: -380px
• ขอบล่าง: 40px
• ระยะขอบซ้าย: -40px
• ระยะขอบขวา: 40px

มุมโค้งมน

ดำเนินการต่อโดยเพิ่ม '30px' ที่มุมซ้ายบนของโมดูล

แอนิเมชั่น

และเพิ่มแอนิเมชั่น

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 200ms

แก้ไขโมดูล Blurb #2

สีพื้นหลัง

เปิดโมดูล Blurb ที่สองและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: rgba(255,255,255,0.93)

ระยะห่าง

ดำเนินการต่อโดยเพิ่มระยะขอบบนสุดติดลบให้กับโมดูล

• ขอบบน: -340px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

โฮเวอร์ระยะห่าง

เปลี่ยนค่ามาร์จิ้นเหล่านี้เมื่อโฮเวอร์

• ขอบบน: -380px
• ขอบล่าง: 40px

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 400ms

แก้ไข Blurb Module #3

ระยะห่าง

ไปยังโมดูล Blurb ที่สาม เพิ่มระยะขอบบนที่เป็นลบ

• ขอบบน: -340px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

โฮเวอร์ระยะห่าง

แก้ไขค่ามาร์จิ้นเมื่อโฮเวอร์

• ขอบบน: -380px
• ขอบล่าง: 40px
• ระยะขอบซ้าย: 40px
• ระยะขอบขวา: -40px

มุมโค้งมน

เพิ่ม '30px' ที่มุมบนขวาของโมดูลด้วย

แอนิเมชั่น

และเพิ่มแอนิเมชั่น

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 600ms

แก้ไขโมดูล Blurb #4

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(255,255,255,0.93)

โฮเวอร์ระยะห่าง

เพิ่มค่าระยะขอบของโฮเวอร์บางส่วนต่อไป

• ระยะขอบซ้าย: -40px
• ระยะขอบขวา: 40px

แอนิเมชั่น

และเพิ่มแอนิเมชั่นด้วย

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 800ms

แก้ไขโมดูล Blurb #5

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 1000ms

แก้ไขโมดูล Blurb #6

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(255,255,255,0.93)

โฮเวอร์ระยะห่าง

เปลี่ยนค่าระยะห่างบนโฮเวอร์เช่นกัน

• ระยะขอบซ้าย: 40px
• ระยะขอบขวา: -40px

แอนิเมชั่น

และเพิ่มแอนิเมชั่น

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 1200ms

แก้ไขโมดูล Blurb #7

โฮเวอร์ระยะห่าง

เข้าสู่โมดูลที่เจ็ด เพิ่มค่าระยะขอบของโฮเวอร์ในการตั้งค่าการเว้นวรรค

• ขอบบน: 40px
• ระยะขอบซ้าย: -40px
• ระยะขอบขวา: 40px

มุมโค้งมน

ดำเนินการต่อโดยเพิ่มรัศมีเส้นขอบ '30px' ที่มุมล่างซ้ายของโมดูล

แอนิเมชั่น

และเพิ่มแอนิเมชั่น

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวล่าช้า: 1400ms

แก้ไขโมดูล Blurb #8

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(255,255,255,0.93)

โฮเวอร์ระยะห่าง

เพิ่มระยะขอบที่กำหนดเองเมื่อวางเมาส์เหนือโมดูลถัดไป

• ขอบบน: 40px

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวล่าช้า: 1600ms

แก้ไข Blurb Module #9

โฮเวอร์ระยะห่าง

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

• ขอบบน: 40px
• ระยะขอบซ้าย: 40px
• ระยะขอบขวา: -40px

มุมโค้งมน

เพิ่มรัศมีเส้นขอบ '30px' ที่มุมล่างขวาด้วย

แอนิเมชั่น

และเพิ่มแอนิเมชั่น

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวล่าช้า: 1800ms

เพิ่มขอบด้านล่างเชิงลบให้กับโมดูลรูปภาพในแถว #1

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

• ขอบล่าง: -520px

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ที่เราทำได้ในขั้นสุดท้ายกัน

ตัวอย่าง #1: ตัวแบ่งการชน

ตัวอย่าง #2: ข้อความชนกัน

ตัวอย่าง #3: ชนกริด

โฮเวอร์

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

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