วิธีใช้เอฟเฟกต์แอนิเมชั่นใหม่ของ Divi

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

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

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

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

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

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

ตอนที่ 1 ของซีรีส์

ส่วนที่ 1

มาตรา 2

ตอนที่ 2 ของซีรีส์

มาตรา 3

มาตรา 4

ตอนที่ 3 ของซีรีส์

มาตรา 5

ตอนที่ 4 ของซีรีส์

มาตรา 6

ตอนที่ 5 ของซีรีส์

มาตรา 7

ตอนที่ 6 ของซีรีส์

มาตรา 8

มาตรา 9

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

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

ภาพที่สองเป็นภาพที่แก้ไขแล้วของภาพเดียวกันที่พลิกในแนวตั้งและค่อยๆ จางลงด้านล่าง รูปภาพที่ 2 นี้จะใช้เป็นพื้นหลังสำหรับพาดหัวหลักของคุณ และควรมีขนาดประมาณ 800×400

ในการสร้างภาพกลับหัว ให้เปิดภาพใน Preview แล้วเลือก Tools > Flip Vertical หรือเปิดภาพใน Photoshop เลือก Image > Image Rotation > Flip Canvas Vertical ในการเพิ่มเอฟเฟกต์เฟดเอาท์ที่ด้านล่างของรูปภาพ ฉันใช้เครื่องมือยางลบในโหมดแปรงที่มีขนาด 800px และความแข็ง 0% จากนั้นฉันก็กด shift ค้างไว้แล้วลากแปรงไปตามขอบด้านล่าง

อย่าลืมส่งออกเป็นไฟล์ png

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

สำหรับส่วนที่สอง คุณจะต้องมีภาพสองภาพ อันแรกน่าจะประมาณ 730×490 แบบนี้

และอันที่สองควรอยู่ที่ประมาณ 525×660 เช่นเดียวกับด้านล่าง

ทำความเข้าใจคำศัพท์เกี่ยวกับแอนิเมชั่น

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

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

วิธีใช้เอฟเฟกต์แอนิเมชั่นใหม่ของ Divi

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

เพิ่มการตั้งค่าหน้าใหม่ของคุณ

จากแดชบอร์ด WordPress ให้ไปที่หน้า > เพิ่มใหม่ จากนั้นเพิ่มชื่อให้กับเพจของคุณ ถัดไป ค้นหาการตั้งค่าหน้า Divi ในช่องที่ด้านบนขวาของหน้าและเลือก Dot Navigation “ON” ในกล่องคุณสมบัติของหน้า เลือกหน้าเปล่าสำหรับแม่แบบหน้าของคุณ สุดท้าย ให้คลิกปุ่ม "ใช้ Divi Builder" และปรับใช้ Visual Builder เพื่อเริ่มสร้างเค้าโครงของคุณ

ส่วนของอาคาร 1: การออกแบบและแอนิเมชั่นส่วนหัวแบบเต็มหน้าจอ

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

ใช้ Visual Builder คลิกเพื่อแก้ไขการตั้งค่าส่วนของส่วนมาตรฐานที่แสดงอยู่แล้วโดยค่าเริ่มต้นเมื่อเปิดใช้ตัวสร้าง อัปเดตสิ่งต่อไปนี้:

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

ภาพพื้นหลัง: [ป้อนภาพพื้นหลัง 1280×800 ของคุณ]
ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
วิธีพารัลแลกซ์: ทรูพารัลแลกซ์

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

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

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

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

min-height: 100vh

css บรรทัดนี้บอกให้ส่วนแสดงความสูงของวิวพอร์ต 100%

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

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

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

เพียงเพิ่มคำว่า “Divi” ในกล่องเนื้อหา

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

แบบอักษรของข้อความ: Oswald ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของข้อความ: 14px
สีข้อความ: #08408e
Text Letter Spacing: 1.5em (คุณจะต้องพิมพ์สิ่งนี้)
การวางแนวข้อความ: ศูนย์
มาร์จิ้นที่กำหนดเอง: 2%
สไตล์แอนิเมชั่น: Flip
ภาพเคลื่อนไหวซ้ำ: Once
ทิศทางของแอนิเมชั่น: ขวา
ระยะเวลาของแอนิเมชั่น: 2000ms
ภาพเคลื่อนไหวล่าช้า: 1100ms
ความเข้มของแอนิเมชั่น: 100%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%
ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

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

นี่คือ html ที่มีสไตล์อินไลน์ที่จำเป็นสำหรับแอนิเมชั่น:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

และนี่คือ CSS ที่จำเป็นสำหรับแอนิเมชั่น:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

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

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

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

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

text-indent: 1.5em

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

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

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

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

<p><span>Believing</span><br />is  Seeing</p>

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

สีข้อความ: เบา
แบบอักษรของข้อความ: Oswald ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรข้อความ: 8vw (คุณต้องพิมพ์สิ่งนี้ทำให้ขนาดตัวอักษร 8% ของความกว้างวิวพอร์ต)
สีข้อความ: rgba(255,255,255,0.79)
ความสูงของบรรทัดข้อความ: 1.4em
การวางแนวข้อความ: center
สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาของแอนิเมชั่น: 1800ms
ภาพเคลื่อนไหวล่าช้า: 0ms
ความเข้มของแอนิเมชั่น: 60%

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

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

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

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

ภาพพื้นหลัง: [ใส่ภาพขนาด 800×440 ของคุณ]
ขนาดภาพพื้นหลัง: พอดี
ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน
เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

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

ใช้ความกว้างที่กำหนดเอง: ใช่
หน่วย: %
ความกว้างที่กำหนดเอง: 50%
ช่องว่างภายในแบบกำหนดเอง: บน 12% ขวา 0% ล่าง 5% ซ้าย 0%
สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ภาพเคลื่อนไหวล่าช้า: 300ms
ความเข้มของแอนิเมชั่น: 20%

เอฟเฟกต์แอนิเมชั่นนี้จะเลื่อนรูปภาพขึ้น ราวกับว่ามันลอยขึ้นมาจากด้านหลังภูเขา

เพียงเท่านี้สำหรับภาคแรก มาดูการออกแบบและแอนิเมชั่นขั้นสุดท้ายของเรากัน

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

อาคารส่วน2

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

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

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

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

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

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

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

สีข้อความ: เบา
แบบอักษรของข้อความ: มอนต์เซอร์รัต
ขนาดตัวอักษรของข้อความ: 18px
ความสูงของบรรทัดข้อความ: 1.8em
แบบอักษรของส่วนหัว: มอนต์เซอร์รัต ตัวหนา (B) ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของส่วนหัว: 39px (เดสก์ท็อป)
ความสูงของบรรทัดส่วนหัว: 2.2em
ขอบล่าง: 50px
สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ความเข้มของแอนิเมชั่น: 10%

เอฟเฟกต์แอนิเมชั่นนี้จะเปิดเผยบล็อกข้อความโดยเลื่อนขึ้นในมุมมอง

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

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

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

ข้อความปุ่ม: เรียนรู้เพิ่มเติม
URL ของปุ่ม: # (หรืออะไรก็ได้ที่คุณต้องการ)

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

การจัดตำแหน่งปุ่ม: ซ้าย
สีข้อความ: เบา
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 15px
รัศมีเส้นขอบของปุ่ม: 0
ระยะห่างระหว่างตัวอักษรของปุ่ม: 3px
แบบอักษรของปุ่ม: มอนต์เซอร์รัต ตัวหนา (B) ตัวพิมพ์ใหญ่ (TT)
แสดงไอคอนปุ่ม: ใช่
ช่องว่างภายในที่กำหนดเอง: ด้านบน 10px, ด้านขวา 30px, ด้านล่าง 10px, ด้านซ้าย 30px
สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ลง
ภาพเคลื่อนไหวล่าช้า: 100ms
ความเข้มของแอนิเมชั่น: 10%

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

คุณยังไม่เห็นข้อความและปุ่มของคุณ เนื่องจากขณะนี้เป็นข้อความสีขาวบนพื้นหลังสีขาว ไม่เป็นไร. เราจะเพิ่มพื้นหลังของเราในไม่ช้า

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

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

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

ส่วนสูง: 260px

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

ปิดการมองเห็นบนเดสก์ท็อป

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

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

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

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

คอลัมน์ 1 สีไล่ระดับพื้นหลัง: #fe8840, rgba(238,78,78,0.9)
คอลัมน์ 1 ทิศทางการไล่ระดับสี: 135deg
ภาพพื้นหลังของคอลัมน์ 2: [ป้อนรูปภาพขนาด 730×490 ของคุณ]
คอลัมน์ 2 ตำแหน่งภาพพื้นหลัง: บนซ้าย
ทำซ้ำภาพพื้นหลังของคอลัมน์ 2: ไม่เล่นซ้ำ

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

ใช้ความกว้างที่กำหนดเอง: ใช่
กำหนดความกว้าง: 1366px
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ขวา, 0px ล่าง, 0px ซ้าย
คอลัมน์ที่ 1 Custom Padding: 5% บน, 7% ขวา, 5% ล่าง, 7% ซ้าย
สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาแอนิเมชั่น: 800ms

เอฟเฟกต์แอนิเมชั่นนี้จะเปิดเผยทั้งแถวโดยการพับ (หรือยืน) ขึ้นไปในมุมมอง

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

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

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

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

ถัดไป เพิ่มแถวสองคอลัมน์ (หนึ่งในสามของสองในสาม) ใต้แถวที่คุณเพิ่งสร้างเสร็จ

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

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

ความสูง: 400px

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

ปิดการมองเห็นบนเดสก์ท็อป

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

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

เพื่อประหยัดเวลา ให้คลิกขวาและคัดลอกโมดูลข้อความในคอลัมน์ด้านซ้ายของแถวด้านบนที่มีข้อความ "Time is Money" จากนั้นวางลงในคอลัมน์ด้านขวา (สองในสาม) ของแถวด้านล่าง

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

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

เปลี่ยนข้อความส่วนหัว h1 เป็น "เดินทางอย่างมืออาชีพ" ในกล่องเนื้อหา

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

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

เอฟเฟกต์แอนิเมชั่นนี้เผยให้เห็นบล็อกของข้อความโดยเลื่อนลงมาในมุมมอง

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

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

สีข้อความของปุ่ม: #ff4823
สีเส้นขอบของปุ่ม: #ff4823
สีข้อความโฮเวอร์ของปุ่ม: #ff2323

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

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

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

สีพื้นหลัง: #ffffff
คอลัมน์ 1 ภาพพื้นหลัง: [ใส่ภาพขนาด 525×660 ของคุณ]
คอลัมน์ 1 ตำแหน่งภาพพื้นหลัง: ซ้ายบน
คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ
คอลัมน์ 2 สีไล่ระดับสีพื้นหลัง: rgba(255,255,255,0.91), #ffffff
คอลัมน์ 2 ทิศทางการไล่ระดับสี: 135deg

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

ใช้ความกว้างที่กำหนดเอง: ใช่
กำหนดความกว้าง: 1040px
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ขวา, 0px ล่าง, 0px ซ้าย
คอลัมน์ที่ 2 Custom Padding: 5% บน, 7% ขวา, 5% ล่าง, 7% ซ้าย
สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ลง
ระยะเวลาแอนิเมชั่น: 800ms

เอฟเฟกต์แอนิเมชั่นนี้จะแสดงทั้งแถวโดยพับลงมาในมุมมอง

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

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

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

แค่นั้นแหละสำหรับส่วนนี้ ตรวจสอบผลลัพธ์ของคุณ

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

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

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

สนุก!

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

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

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

ดาวน์โหลด

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

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

เอฟเฟกต์แอนิเมชั่นตอนที่ 1 (ตอนที่ 1).json

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

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

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

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

ห่อ

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

กำลังมา

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

นี่คือสิ่งที่คุณสามารถคาดหวังที่จะสร้าง

ส่วนที่ 3:

ส่วนที่ 4:

กรุณาแสดงความคิดเห็นใด ๆ ที่คุณมีด้านล่าง

ไชโย!