ใช้ภาพเคลื่อนไหวของ Divi เพื่อลอยและตีกลับภาพ

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

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

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

มาเริ่มกันเลย.

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

การเตรียมองค์ประกอบการออกแบบ

คุณจะต้องมีสี่ภาพสำหรับบทช่วยสอนนี้ คุณจะต้องมีภาพพื้นหลังที่กำหนดเองและภาพการ์ดสูตรอาหารสามภาพ ภาพพื้นหลังมีขนาด 1280 × 936 และมีพื้นหลังสีเหลืองพร้อมสี่เหลี่ยมสีขาวกึ่งโปร่งใส 6 อันพร้อมการเพิ่มเงาเพื่อความลึก เมื่อใช้พื้นหลังในส่วนที่มีพารัลแลกซ์แล้ว จะให้ความรู้สึกเหมือนการ์ดสูตรอาหารลอยอยู่ในพื้นหลัง ภาพการ์ดสูตรอาหารมีขนาด 375×667 นี่คือภาพที่ใช้ในบทช่วยสอนนี้

ภาพพื้นหลัง

ภาพการ์ดสูตรอาหาร #1

รูปการ์ดสูตรอาหาร #2

รูปการ์ดสูตรอาหาร #3

ใช้ภาพเคลื่อนไหวของ Divi เพื่อลอยและตีกลับภาพ

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

อาคารมาตรา 8

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

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

อัปเดตการตั้งค่าแถว

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

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

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

คอลัมน์ 1 Custom Padding: 6% Right
คอลัมน์ 3 ช่องว่างภายในแบบกำหนดเอง: เหลือ 8%

เพิ่มพื้นหลังให้กับส่วนของคุณ

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

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

ภาพพื้นหลัง: [ใส่ภาพ 1280×936]
ใช้วิธีพารัลแลกซ์: ใช่
วิธีพารัลแลกซ์: ทรูพารัลแลกซ์

เพิ่มรูปภาพ #1

ตอนนี้เรากำลังอ่านเพื่อเพิ่มโมดูลของเราในแถวของเรา ในคอลัมน์แรก (ซ้าย) ให้เพิ่มโมดูลรูปภาพ

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

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

URL รูปภาพ: [ป้อนรูปภาพการ์ดสูตรอาหาร #1]

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

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

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

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

ในที่นี้เราจะเพิ่ม CSS ที่กำหนดเองเพื่อให้รูปภาพการ์ดมีขอบมน กล่องเงา และฟิลเตอร์เบลอ ป้อน CSS ต่อไปนี้ในกล่ององค์ประกอบหลัก:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(2px) opacity(.75);

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

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

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

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

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

<h1>The Best Recipes for Success</h1>

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

แบบอักษรของส่วนหัว: Playfair Display ตัวหนา (B)
ขนาดตัวอักษรของส่วนหัว: 60px
ความสูงของบรรทัดส่วนหัว: 1.3em

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

สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขึ้น

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

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

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

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

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

ขนาดตัวอักษรของข้อความ: 18px
สีข้อความ: rgba(0,0,0,0.56)
ความสูงของบรรทัดข้อความ: 1.9em
มาร์จิ้นที่กำหนดเอง: 40px

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

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

เพิ่มรูปภาพ #2

เพิ่มโมดูลรูปภาพภายใต้โมดูลข้อความสองโมดูลที่คุณเพิ่งสร้างขึ้น

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

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

URL รูปภาพ: [ป้อนรูปภาพการ์ด #2]

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

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

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

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

ที่นี่เราจะเพิ่ม CSS ที่กำหนดเอง (คล้ายกับภาพการ์ดแรกยกเว้นไม่มีเอฟเฟกต์เบลอ) เพื่อให้ภาพการ์ดมีขอบมนและเงาของกล่อง ป้อน CSS ต่อไปนี้ในกล่ององค์ประกอบหลัก:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);

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

เพิ่มรูปภาพ #3

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

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

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

URL รูปภาพ: [ป้อนรูปภาพการ์ด #3]

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

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

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

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

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

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

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

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(8px) opacity(.4);

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

ยอดเยี่ยม! ที่สรุปส่วนที่ 8 ของหน้าสาธิตของเรา ตรวจสอบผลลัพธ์สุดท้าย

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

อาคารส่วน 9 ของสาธิต

ในส่วนสุดท้ายของเรา เราจะสร้างส่วน "ทีมของเรา" แบบง่ายๆ พร้อมด้วยแอนิเมชั่นเล็กๆ ที่ "ปรากฏ" อย่างแท้จริง นี่คือสิ่งที่เรากำลังจะสร้าง:

นี่คือภาพรวมของเลย์เอาต์จากมุมมองโครงร่าง

เพิ่มส่วนหัวของส่วน

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

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

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

เนื้อหา: ทีมงานของเรา

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

แบบอักษรข้อความ: Raleway ตัวหนา (B) ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของข้อความ: 15px
สีข้อความ: rgba(0,0,0,0.32)
ระยะห่างของตัวอักษรข้อความ: 5px
ความสูงของบรรทัดข้อความ: 1.9em

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

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาของแอนิเมชั่น: 500ms
ภาพเคลื่อนไหวล่าช้า: 1000ms

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

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

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

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

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

<h1>Highly Skilled Ninjas</h1>

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

แบบอักษรของส่วนหัว: Raleway Light
การจัดตำแหน่งข้อความส่วนหัว: Center
ขนาดตัวอักษรของส่วนหัว: 48px
สีข้อความส่วนหัว: #3a3830
ความสูงของบรรทัดส่วนหัว: 1.3em

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

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

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

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

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

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

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

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

สี: #7cda24

น้ำหนักตัวแบ่ง: 3px
ส่วนสูง: 3px
ความกว้าง: 60px (พิมพ์สิ่งนี้ใน)
การจัดตำแหน่งโมดูล: ศูนย์

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

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

เพิ่มภาพสี่ทีม

หากต้องการเพิ่มรูปภาพสมาชิกในทีม ให้เพิ่มแถวสี่คอลัมน์ใต้แถวที่มีส่วนหัวที่เราเพิ่งสร้างขึ้น

เพิ่มโมดูลบุคคลในคอลัมน์แรกและอัปเดตการตั้งค่าดังนี้:

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

ชื่อ : นิก
URL รูปภาพ: [ป้อนรูปภาพ 150×150 ของคุณ]

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

แบบอักษรของส่วนหัว: Raleway Light, Bold (B), ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของส่วนหัว: 13px
สีข้อความส่วนหัว: rgba(0,0,0,0.71)
ระยะห่างของตัวอักษรส่วนหัว: 3px

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

เพิ่ม CSS ต่อไปนี้ในกล่องภาพสมาชิก:

border-radius: 100%;
overflow: hidden;
width: 180px;
margin: auto auto 20px auto;

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

เพิ่ม CSS แบบกำหนดเองต่อไปนี้ในคำอธิบายสมาชิก:

text-align: center;
display: block;

สิ่งนี้เป็นศูนย์กลางของชื่อ

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

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

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

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

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

ช่องว่างภายในแบบกำหนดเอง: 60px Top

สไตล์แอนิเมชั่น: Bounce
ระยะเวลาของแอนิเมชั่น: 700ms
ภาพเคลื่อนไหวล่าช้า: 1000ms

นั่นคือการสรุปส่วนที่ 9 ของหน้าสาธิตแอนิเมชั่นของเรา และยังปิดท้ายซีรีส์ 6 ส่วนเรื่องการใช้แอนิเมชั่นกับ Divi

บทสรุปของซีรีส์

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

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

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

สนุก!

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

ไชโย!