ดาวน์โหลดส่วนฮีโร่แอนิเมชั่นสาดน้ำสีสันสดใสฟรีสำหรับ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนฮีโร่แอนิเมชั่นโปรยลงมาฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

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

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

• สี 1: #070a49
• สี 2: #6f00f7
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 148deg

ขนาด

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

• ความสูงขั้นต่ำ: 100vh

ระยะห่าง

เรากำลังนำช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดออกในลำดับถัดไป

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

ทัศนวิสัย

และเพื่อให้แน่ใจว่าไม่มีแถบเลื่อนแนวนอนปรากฏในการออกแบบของเรา เราจะซ่อนส่วนที่เกินมาของส่วน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถว #1

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

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

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

องค์ประกอบหลัก CSS

และเพื่อให้แน่ใจว่าโมดูลต่างๆ จะปรากฏติดกันในหน้าจอขนาดเล็ก เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดในองค์ประกอบหลักของแถว

display: flex;

แอนิเมชั่นคอลัมน์ 1

เมื่อตั้งค่าแถวทั่วไปแล้ว ให้เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มภาพเคลื่อนไหว

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

คอลัมน์ 2 นิเมชั่น

เพิ่มภาพเคลื่อนไหวในคอลัมน์ที่สองถัดไป

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 250ms
• ความเข้มของแอนิเมชั่น: 100%

แอนิเมชั่นคอลัมน์ 3

และเรากำลังใช้แอนิเมชั่นสำหรับคอลัมน์ที่สามด้วย

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ความเข้มของแอนิเมชั่น: 100%

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

อัพโหลดภาพโปรยลงมา

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

ขนาด

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

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

ตัวกรอง

จากนั้น เปลี่ยนสีของโมดูลโดยใช้การตั้งค่าตัวกรอง

• ฮิว: 303deg
• ความอิ่มตัว: 200%

แปลงมาตราส่วน

เรากำลังปรับขนาดรูปภาพในการตั้งค่าการแปลงด้วย

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

เอฟเฟกต์การเคลื่อนไหวในแนวตั้ง

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 0
• ออฟเซ็ตกลาง:
  • เดสก์ท็อป: 0 (ที่ 50%)
  • แท็บเล็ต: 0 (ที่ 70%)
  • โทรศัพท์: 0 (ที่ 85%)
• ออฟเซ็ตสิ้นสุด: 2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ด้านล่างขององค์ประกอบ

เอฟเฟกต์การเลื่อนแนวนอน

เรากำลังใช้การเคลื่อนไหวในแนวนอนเช่นกัน

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: -10
  • แท็บเล็ตและโทรศัพท์: 0
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: 4
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ด้านล่างขององค์ประกอบ

เอฟเฟกต์เลื่อนขึ้นและลง

พร้อมเอฟเฟกต์การปรับขนาดขึ้นและลง

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• ระดับเริ่มต้น: 100%
• ระดับกลาง: 150%
• สเกลสิ้นสุด: 200%
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ด้านล่างขององค์ประกอบ

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

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

เปลี่ยนโมดูลรูปภาพในคอลัมน์ 2

ระยะห่าง

เปิด Image Module ในคอลัมน์ 2 และเพิ่มระยะขอบบนบนแท็บเล็ตและโทรศัพท์

• อัตรากำไรขั้นต้น: 50% (แท็บเล็ตและโทรศัพท์เท่านั้น)

ตัวกรอง

เปลี่ยนสีในการตั้งค่าตัวกรองด้วย

• ฮิว: 55deg

เปลี่ยนโมดูลรูปภาพในคอลัมน์ 3

ตัวกรอง

จากนั้น เปิด Image Module ในคอลัมน์ที่สาม และเปลี่ยนการตั้งค่าตัวกรองตามนั้น:

• ฮิว: 309deg
• ความสว่าง: 0%

เพิ่มแถว #2

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

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

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center

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

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

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความที่มีเนื้อหา H1 ที่คุณเลือก

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

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

• แบบอักษรของหัวข้อ: Rubik
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 35px (โทรศัพท์)

• หัวเรื่อง ข้อความ เงา ความยาวแนวตั้ง: 0.08em
• หัวเรื่อง ความชัดเจนของเงา ความเบลอ: 0em
• สีของหัวเรื่องข้อความเงา: #1a005b

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

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

จากนั้น เพิ่มโมดูลข้อความอื่นที่มีเนื้อหาคำอธิบาย

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

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

• แบบอักษรของข้อความ: Muli
• สีข้อความ: #dddddd
• ขนาดตัวอักษร: 15px (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.1em

• ข้อความเงาสี: #1a005b

ขนาด

แก้ไขความกว้างของโมดูลต่อไป

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

ระยะห่าง

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

• ขอบบน: 6% (เดสก์ท็อป), 10% (แท็บเล็ต), 14% (โทรศัพท์)
• ขอบล่าง: 6% (เดสก์ท็อป), 10% (แท็บเล็ต), 14% (โทรศัพท์)

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

เพิ่มสำเนา

โมดูลสุดท้ายที่เราต้องการในคอลัมน์ของเราคือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

จากนั้น ไปที่แท็บออกแบบและจัดรูปแบบปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 17px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #ea01a6
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

• แบบอักษรของปุ่ม: Rubik
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

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

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

กล่องเงา

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

• ตำแหน่งแนวนอนของกล่องเงา: 5px
• ตำแหน่งแนวตั้งเงาของกล่อง: 5px
• สีเงา: #30005b

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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