การใช้ภาพเคลื่อนไหวของ Divi เพื่อเปิดเผยเนื้อหาด้วยรูปภาพแบบเลื่อน

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

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

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

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

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

มาตรา 3

มาตรา 4

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

เตรียมภาพของคุณให้พร้อม

สำหรับส่วนที่สาม คุณจะต้องมีภาพสองภาพ อันแรกต้องมีขนาดประมาณ 880×600 และอันที่สองประมาณ 790×880 ขนาดภาพเหล่านี้ไม่จำเป็นต้องแม่นยำเสมอไป ฉันแค่รวมมิติเหล่านี้เพื่อให้คุณมีความคิด

เมื่อสร้างส่วนที่สี่ คุณยังจะมีภาพสองภาพที่มีขนาดประมาณ 600×400

ใช้ตัวสร้างภาพ

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

การใช้ภาพเคลื่อนไหวของ Divi เพื่อเปิดเผยเนื้อหาด้วยรูปภาพแบบเลื่อน

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

อาคารส่วนที่ 3 ของการสาธิต

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

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

ใช้ Visual Builder เพิ่มส่วนปกติด้วยแถวสองคอลัมน์ ในคอลัมน์ด้านซ้าย เพิ่มโมดูลรูปภาพ

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

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

URL รูปภาพ: [ใส่รูปภาพขนาด 880×600 ของคุณ]

ภายใต้แท็บออกแบบ...
บังคับเต็มความกว้าง: ใช่
สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ซ้าย
ความเข้มของแอนิเมชั่น: 20%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

เพิ่มโมดูลตัวแบ่ง

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

เพิ่มโมดูลตัวแบ่งที่คอลัมน์ด้านขวา

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

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

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

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

สี: #e4ca77
น้ำหนักตัวแบ่ง: 4px
ความกว้าง: 80px (คุณต้องพิมพ์ค่านี้เนื่องจากค่าเริ่มต้นคือเปอร์เซ็นต์)
การจัดตำแหน่งโมดูล: ค่าเริ่มต้น (ซ้าย)
ระยะขอบที่กำหนดเอง: ด้านบน 60px, ด้านล่าง 0px

สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขวา
ระยะเวลาของแอนิเมชั่น: 1200ms
ภาพเคลื่อนไหวล่าช้า: 50ms
ความเข้มของแอนิเมชั่น: 70%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

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

เพิ่มโมดูลการเรียกร้องให้ดำเนินการ

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

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

ชื่อเรื่อง: “มุมมองที่สมบูรณ์แบบ”
ข้อความปุ่ม: “เรียนรู้เพิ่มเติม”
เนื้อหา: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, ประสิทธิภาพ nisl Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, ประสิทธิผล nisi”
ลิงค์: #
ใช้สีพื้นหลัง: NO

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

สีข้อความ: Dark
การวางแนวข้อความ: ซ้าย
แบบอักษรของส่วนหัว: Lato, ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของส่วนหัว: 38px
สีข้อความส่วนหัว: #0c0c0c
ระยะห่างระหว่างหัวกระดาษ: 0.2em
ความสูงของบรรทัดส่วนหัว: 1.4em

แบบอักษรของร่างกาย: Lato
ขนาดตัวอักษรของร่างกาย: 18px
สีข้อความ: #9e9e9e
ความสูงของเส้นร่างกาย: 1.8em

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 15px
สีข้อความของปุ่ม: #000000
ปุ่มสีพื้นหลัง: rgba(225,225,225,0)
ความกว้างของขอบปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
แบบอักษรของปุ่ม: Lato, Bold (B), ตัวพิมพ์ใหญ่ (TT)
ไอคอนปุ่ม: ลูกศรขวา
แสดงเฉพาะไอคอนบนโฮเวอร์สำหรับปุ่ม: NO
ปุ่มโฮเวอร์ตัวอักษรระยะห่าง: 0px

สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขวา
ระยะเวลาของแอนิเมชั่น: 1200ms
ภาพเคลื่อนไหวล่าช้า: 50ms
ความเข้มของแอนิเมชั่น: 70%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

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

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

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

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

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

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

z-index: 999;

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

ทำซ้ำแถวของคุณและอัปเดต

นั่นคือสำหรับแถวแรก เพื่อประหยัดเวลาในการสร้างแถวที่สอง ให้ทำซ้ำแถวที่คุณเพิ่งสร้างขึ้น

แก้ไขการตั้งค่าแถวที่ซ้ำกันดังนี้:

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

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

z-index: 999;

เนื่องจากรูปภาพของเราจะอยู่ที่คอลัมน์ทางขวา เราจึงต้องให้คอลัมน์นั้นอยู่ด้านบนของข้อความที่เคลื่อนไหวทางด้านซ้าย

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

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

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

ส่วนนี้จะมีโครงสร้างคอลัมน์ที่แตกต่างกันเล็กน้อย คลิกไอคอนแถวเปลี่ยนโครงสร้างคอลัมน์ (ถัดจากไอคอนแถวที่ซ้ำกัน) และเลือกเค้าโครงคอลัมน์สองในสามหนึ่งในสาม

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

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

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

การจัดตำแหน่งโมดูล: ขวา
ทิศทางของแอนิเมชั่น: ซ้าย

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

ถัดไปอัปเดตการตั้งค่าโมดูลการเรียกร้องให้ดำเนินการดังนี้:

ชื่อเรื่อง: “พูดเพื่อตัวเอง”
การวางแนวข้อความ: ขวา
การจัดแนวข้อความส่วนหัว: ขวา
ความกว้าง: 700px (พิมพ์สิ่งนี้ใน)
ทิศทางของแอนิเมชั่น: ซ้าย

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

ถัดไป อัปเดต Image Module ในคอลัมน์ด้านขวาด้วยรูปภาพ 790 × 880 ใหม่ของคุณ

แค่นี้แหละสำหรับภาค 3!

ตรวจสอบผลลัพธ์ของคุณ

อาคารส่วนที่ 4 ของการสาธิต

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

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

ใต้แท็บเนื้อหา เลือกแท็บสีพื้นหลังและป้อนสี #262938

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

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

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

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

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

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

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

สีข้อความ: เบา
แบบอักษรของส่วนหัว: Playfair Display ตัวหนา (B)
ขนาดตัวอักษรของส่วนหัว: 38px
ความสูงของบรรทัดส่วนหัว: 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, ประสิทธิภาพ nisl Sed nec purus tempus, sagittis mi id, ประสิทธิภาพ nisl”

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

สีข้อความ: เบา
ขนาดตัวอักษรของข้อความ: 18px
สีข้อความ: rgba(255,255,255,0.66)
ความสูงของบรรทัดข้อความ: 1.9em
ระยะขอบที่กำหนดเอง: 40px ด้านล่าง
สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ลง
ภาพเคลื่อนไหวล่าช้า: 150ms

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

เพิ่มโมดูลปุ่ม

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

ข้อความปุ่ม: เรียนรู้เพิ่มเติม
URL ปุ่ม: #

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

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

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

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

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

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

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

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

URL รูปภาพ: [ใส่รูปภาพขนาด 600×400 ของคุณ]

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

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

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

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

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

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

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

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

ช่องว่างภายในที่กำหนดเอง: 27px บน, 0px ขวา, 170px ด้านล่าง, 0px ซ้าย
คอลัมน์ 1 Custom Padding: 6% Top

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

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

z-index: 999;

css เพิ่มนี้ช่วยให้แน่ใจว่าข้อความจะอยู่ด้านบนของรูปภาพระหว่างการเคลื่อนไหว

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

transform: scale(1.3);
transform-origin: top right;

CSS นี้เพิ่มการออกแบบที่ชาญฉลาดเพื่อขยาย (เพิ่ม) ขนาดของทุกอย่างในคอลัมน์ 2 (รูปภาพ) คุณสมบัติต้นทางของการแปลงบอกให้คอลัมน์ปรับมาตราส่วนจากด้านบนขวาของแถว ซึ่งจะทำให้ข้อความทางด้านซ้ายและรูปภาพซ้อนทับกันเล็กน้อย

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

ทำซ้ำและอัปเดตแถวของคุณ

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

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

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

ช่องว่างภายในที่กำหนดเอง: ด้านบน 40px, ด้านขวา 0px, ด้านล่าง 40px, 0px ด้านซ้าย
คอลัมน์ 1 Custom Padding: [เรียกคืนค่าเริ่มต้น; ลบ 6% ด้านบน]
คอลัมน์ที่ 2 ช่องว่างภายในแบบกำหนดเอง: 6% ด้านบน

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

ลบ CSS ที่กำหนดเองออกจากช่ององค์ประกอบหลักของคอลัมน์ 1 และช่ององค์ประกอบหลักของคอลัมน์ 2 สิ่งนี้ถูกยกมาจากการทำซ้ำ และเราไม่ต้องการมันอีกต่อไป

อัปเดตโมดูลรูปภาพ

ถัดไป อัปเดต Image Module (ตอนนี้อยู่ที่คอลัมน์ด้านซ้าย) ดังต่อไปนี้:

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

URL รูปภาพ: [ใส่รูปภาพ 600×400 ใหม่ของคุณ]

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

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

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

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

filter: blur(5px) opacity(.6);

นอกจากเอฟเฟกต์เบลอแล้ว CSS นี้ยังทำให้ภาพกึ่งโปร่งใสด้วยความทึบแสง 60%

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

อัปเดตโมดูลข้อความในคอลัมน์ขวา

ย้ายไปยังคอลัมน์ด้านขวา อัปเดตเนื้อหาโมดูลข้อความด้านบนด้วยส่วนหัว h1 ที่สั้นลง:

<h1>Consectetur adipiscing elit</h1>

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

และโว้ว! เราเสร็จสิ้นในส่วนที่ 4 แล้ว มาดูผลลัพธ์สุดท้ายของเรากัน

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

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

สนุก!

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

ห่อ

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

กำลังมา

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

ตั้งตารอ.

อย่าลืมติดต่อในความคิดเห็นด้านล่าง!