ใช้ Divi's Fold Animation เพื่อสร้าง Blurbs Bloom

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

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

วันนี้ เรากำลังจะสร้างส่วนที่ 6 ของหน้าสาธิตแอนิเมชั่นของเรา ส่วนนี้แสดงการออกแบบและแอนิเมชั่นที่ยอดเยี่ยมสำหรับการแสดงผลิตภัณฑ์เด่นหรือการดาวน์โหลด การใช้สีและเอฟเฟกต์เบ่งบานของแอนิเมชั่นบนโมดูลการนำเสนอเหล่านั้นทำให้ส่วนนี้โดดเด่น

มาดำน้ำกันเถอะ!

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่เราจะสร้างในโพสต์ของวันนี้

ใช้ Divi's Fold Animation เพื่อสร้าง Blurbs Bloom

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

อาคารมาตรา 6

เพิ่มและปรับแต่งส่วนของคุณ

ใช้ Visual Builder เริ่มต้นด้วยการเพิ่มส่วนปกติอื่นในเลย์เอาต์ของเรา จากนั้นเพิ่มแถวสามคอลัมน์ (ครึ่งหนึ่งหนึ่งในสี่หนึ่งในสี่) ในส่วนของคุณ

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

ภายใต้แท็บเนื้อหา…

สีพื้นหลัง: #00252d

ภายใต้แท็บออกแบบ...

ช่องว่างภายในที่กำหนดเอง: 80px บน, 80px ด้านล่าง

บันทึกการตั้งค่า

เพิ่มส่วนหัวโดยใช้โมดูลข้อความ

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

ภายใต้แท็บเนื้อหา…

เพิ่มส่วนหัว h1 ต่อไปนี้ในแท็บข้อความของกล่องเนื้อหา:

<h1>Build Like You Mean It</h1>

ภายใต้แท็บออกแบบ...

แบบอักษรของส่วนหัว: Lato, Bold (B)
ขนาดตัวอักษรของส่วนหัว: 38px
สีข้อความส่วนหัว: #ffffff
ความสูงของบรรทัดส่วนหัว: 1.3em

มาร์จิ้นที่กำหนดเอง: 20px ล่างสุด

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

บันทึกการตั้งค่า

เพิ่มข้อความโดยใช้โมดูลข้อความอื่น

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

ภายใต้แท็บเนื้อหา…

เนื้อหา: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, ประสิทธิภาพ nisl Sed nec purus tempus, sagittis mi id, ประสิทธิภาพ nisl”

ภายใต้แท็บออกแบบ...

สีข้อความ: เบา
ขนาดตัวอักษรของข้อความ: 18px
สีข้อความ: rgba(255,255,255,0.66)
ความสูงของบรรทัดข้อความ: 1.9em
ระยะขอบที่กำหนดเอง: 40px ด้านล่าง

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

บันทึกการตั้งค่า

เพิ่มปุ่ม

ตอนนี้ มาเพิ่มโมดูลปุ่มด้านล่างโมดูลข้อความสองโมดูลในคอลัมน์ด้านซ้าย จากนั้นอัปเดตการตั้งค่าดังนี้:

ภายใต้แท็บเนื้อหา…

ข้อความปุ่ม: ดาวน์โหลดทั้งหมด
URL ของปุ่ม [ป้อน url]

ภายใต้แท็บออกแบบ...

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่

ขนาดข้อความของปุ่ม: 15px
สีข้อความของปุ่ม: #01254c
สีพื้นหลังของปุ่ม: #ffcd1c
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 65px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
แบบอักษรของปุ่ม: ตัวหนา (B), ตัวพิมพ์ใหญ่ (TT)

ช่องว่างภายในที่กำหนดเอง: ด้านบน 10px, ด้านขวา 30px, ด้านล่าง 10px, ด้านซ้าย 30px

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

อย่าลืมเพิ่มเอฟเฟกต์การเรืองแสงที่ยอดเยี่ยมโดยใช้คุณสมบัติ box shadow css ค้นหากล่ององค์ประกอบหลักภายใต้ CSS ที่กำหนดเองและเพิ่มสิ่งต่อไปนี้:

box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

บันทึกการตั้งค่า

เพิ่มโมดูล Blurb แรกของคุณ

นั่นคือสำหรับคอลัมน์ด้านซ้ายของเรา ตอนนี้ ให้เพิ่ม Blurb Module ที่คอลัมน์กลาง (ซึ่งเป็นคอลัมน์หนึ่งในสี่แรก)

อัปเดตการตั้งค่าดังนี้:

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Divi
ใช้ไอคอน: ใช่
ไอคอน: [เลือกไอคอน]

สีไล่ระดับพื้นหลัง: #8b56ff, #5d3dff
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 140deg

ภายใต้แท็บออกแบบ...

สีไอคอน: #ffffff
สีข้อความ: เบา
การวางแนวข้อความ: ศูนย์
แบบอักษรของส่วนหัว: ตัวหนา (B), ตัวพิมพ์ใหญ่ (TT)
ระยะห่างของตัวอักษรส่วนหัว: 10px

มาร์จิ้นที่กำหนดเอง: 12% ล่างสุด
ช่องว่างภายในที่กำหนดเอง: ด้านบน 40px, ด้านขวา 30px, ด้านล่าง 30px, ด้านซ้าย 30px

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

ภายใต้แท็บขั้นสูง…

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

เพิ่ม CSS ต่อไปนี้ลงในกล่ององค์ประกอบหลัก:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

เพิ่ม CSS ต่อไปนี้ลงในกล่อง Blurb Title:

text-indent: 10px;

บันทึกการตั้งค่า

ทำซ้ำโมดูล Blurb เพื่อสร้าง Blurbs สามรายการถัดไป

ตอนนี้เราออกแบบและเคลื่อนไหวโมดูล Blurb โมดูลแรกแล้ว เราสามารถทำซ้ำโมดูลเพื่อสร้างข้อความแจ้งที่เหลือได้

วางเมาส์เหนือโมดูล Blurb แล้วคลิกไอคอนโมดูลที่ซ้ำกัน ในโมดูลที่ซ้ำกันใหม่ที่ปรากฏด้านล่างให้อัปเดตการตั้งค่าดังนี้:

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Bloom
ไอคอน: [เลือกไอคอนใหม่]
สีไล่ระดับพื้นหลัง: #ff56f9, #c43dff

ภายใต้แท็บออกแบบ...

ทิศทางของแอนิเมชั่น: ลง

ภายใต้แท็บขั้นสูง…

แทนที่ CSS ในกล่ององค์ประกอบหลักดังต่อไปนี้:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

บันทึกการตั้งค่า

ทำสำเนาโมดูลการนำเสนออีกชุดหนึ่งแล้วลากที่ซ้ำไปที่คอลัมน์ขวาสุด จากนั้นอัปเดต Blurb Module ด้วยการตั้งค่าต่อไปนี้:

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Extra
ไอคอน: [เลือกไอคอนใหม่]
สีไล่ระดับพื้นหลัง: #56ffda, #38d5ea

ภายใต้แท็บออกแบบ...

ทิศทางของแอนิเมชั่น: ขึ้น

ภายใต้แท็บขั้นสูง…

แทนที่ CSS ในกล่ององค์ประกอบหลักดังต่อไปนี้:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

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

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Monarch
ไอคอน: [เลือกไอคอนใหม่]
สีไล่ระดับพื้นหลัง: #f2743a, #ff5656

ภายใต้แท็บออกแบบ...

ทิศทางของแอนิเมชั่น: ขวา

ภายใต้แท็บขั้นสูง…

แทนที่ CSS ในกล่ององค์ประกอบหลักดังต่อไปนี้:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);

บันทึกการตั้งค่า

ตอนนี้ มาปรับระยะห่างกันโดยอัปเดตการตั้งค่าแถวของคุณดังนี้:

ภายใต้แท็บออกแบบ...

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

ช่องว่างภายในที่กำหนดเอง: 80px บน, 0px ขวา, 160px ด้านล่าง, 0px ซ้าย
Coumn 1 Custom Padding: 140px ด้านบน

สร้างแถวที่สอง

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

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

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

บันทึกการตั้งค่า

ถัดไป คัดลอกโมดูลข้อความแรกในแถวแรกที่คุณสร้างซึ่งมีชื่อ h1 จากนั้นอัปเดตการตั้งค่าดังนี้:

ภายใต้แท็บเนื้อหา…

แทนที่แท็ก h1 ปัจจุบันด้วยสิ่งต่อไปนี้:

<h1>Don't Settle for Less</h1>

ภายใต้แท็บออกแบบ...

การวางแนวข้อความ: ศูนย์
สไตล์แอนิเมชั่น: Flip
ความเข้มของแอนิเมชั่น: 70%

บันทึกการตั้งค่า

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

ภายใต้แท็บเนื้อหา…

ข้อความปุ่ม: เข้าร่วมวันนี้

ภายใต้แท็บออกแบบ...

การจัดตำแหน่งปุ่ม: กึ่งกลาง

สไตล์แอนิเมชั่น: Flip
ความเข้มของแอนิเมชั่น: 70%

บันทึกการตั้งค่า

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

ภายใต้แท็บออกแบบ...

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

บันทึกการตั้งค่า

ถัดไป คัดลอกโมดูล "Divi" Blurb สีม่วงจากแถวก่อนหน้า และวางลงในคอลัมน์ด้านซ้ายของแถวใหม่ จากนั้นอัปเดตการตั้งค่าต่อไปนี้:

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Builder
ไอคอน: [เลือกไอคอนใหม่]
สีไล่ระดับพื้นหลัง: #ff568e, #ff3d5d

ภายใต้แท็บขั้นสูง…

แทนที่ CSS ในกล่ององค์ประกอบหลักดังต่อไปนี้:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

บันทึกการตั้งค่า

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

จากนั้นอัปเดตการตั้งค่าการนำเสนอดังนี้:

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: Serene
ไอคอน: [เลือกไอคอนใหม่]
สีไล่ระดับพื้นหลัง: #3da4ff, #385eea

ภายใต้แท็บขั้นสูง…

แทนที่ CSS ในกล่ององค์ประกอบหลักดังต่อไปนี้:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

บันทึกการตั้งค่า

แค่นั้นแหละ.

โบนัส: ดาวน์โหลดส่วนเหล่านี้เพื่อการนำเข้าที่ง่ายดาย

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

สนุก!

ดาวน์โหลด The Layout Pack

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

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

ดาวน์โหลด

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

หากต้องการใช้การดาวน์โหลดเหล่านี้ ให้เริ่มต้นด้วยการค้นหาไฟล์ซิปชื่อ Animation_Effects_Part_4.zip ในโฟลเดอร์ดาวน์โหลดของเรา เปิดเครื่องรูดเพื่อเปิดเผยการนำเข้าต่อไปนี้

เอฟเฟกต์ภาพเคลื่อนไหว ตอนที่ 4 (ตอนที่ 1).json

เอฟเฟกต์ภาพเคลื่อนไหว ตอนที่ 4 (ตอนที่ 2).json

นำทางในผู้ดูแลระบบ WordPress ของคุณไปที่ Divi > Divi Library > Import & Export เมื่อโมดอลพกพาปรากฏขึ้น ให้คลิกแท็บนำเข้าและปุ่มที่มีป้ายกำกับว่าเลือกไฟล์

เลือกไฟล์ json ที่คุณต้องการแล้วคลิก "นำเข้า Divi Builder Layouts" เมื่อการนำเข้าเสร็จสมบูรณ์ ไปที่โพสต์หรือเพจที่คุณต้องการเพิ่มส่วนใดส่วนหนึ่งด้านบน

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

ห่อ

ฉันหวังว่าคุณจะสนุกกับการสร้างส่วนที่น่าทึ่งนี้ด้วยกัน การผสมผสานของสี เงาเรืองแสง และแอนิเมชั่นที่สร้างสรรค์ทำให้เลย์เอาต์นี้เป็นเลย์เอาต์ที่โดดเด่นสำหรับแสดงการดาวน์โหลดหรือผลิตภัณฑ์ของคุณเอง

กำลังมา

ในส่วนที่ 5 ฉันจะแสดงให้คุณเห็นถึงวิธีการรวมสไตล์แอนิเมชั่น Roll เข้ากับโทรศัพท์มือถือภายในส่วนของคุณ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็นด้านล่าง

ไชโย!