วิธีเพิ่มเอฟเฟกต์แอนิเมชั่นในส่วน/แถวใน Divi

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

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

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

ภาพเคลื่อนไหว Divi หรือ Wow.js & Animate.css?

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

เมื่อใดควรใช้ Divi Animations

มีเอฟเฟกต์แอนิเมชั่นห้าแบบใน Divi ที่คุณสามารถใช้ได้:

• เฟดอิน
• สไลด์ด้านล่าง
• สไลด์เข้าด้านซ้าย
• สไลด์เข้าที่เหมาะสม
• สไลด์ด้านบน

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

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

เมื่อใดควรใช้ Wow.js & Animate.css

การรวม wow.js & animate.css เข้ากับเว็บไซต์ของคุณเป็นสิ่งที่คุณอาจจะชอบเพราะมีตัวเลือกมากมายที่คุณมี มีหมวดหมู่เอฟเฟกต์แอนิเมชั่น 14 หมวดหมู่ที่มีเอฟเฟกต์ต่าง ๆ ที่เกี่ยวข้องกับหมวดหมู่นั้น หมวดหมู่ที่คุณสามารถเลือกได้มีดังต่อไปนี้:

• ผู้เรียกร้องความสนใจ
• ทางเข้าเด้ง
• เด้งออก
• ทางเข้าซีดจาง
• จางหายไป
• ตีนกบ
• ความเร็วแสง
• ทางเข้าหมุน
• ทางออกที่หมุนได้
• ทางเข้าเลื่อน
• เลื่อนออก
• ทางเข้าซูม
• ซูมออก
• พิเศษ

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

วิธีเพิ่มเอฟเฟกต์แอนิเมชั่นในส่วน/แถวใน Divi

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

ใช้เอฟเฟกต์แอนิเมชั่นในตัว

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

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

• คลาส CSS จางลง: et-waypoint et_pb_animation_fade_in
• คลาส CSS แบบสไลด์ด้านล่าง: et-waypoint et_pb_animation_bottom
• คลาส CSS สไลด์เข้าด้านซ้าย: et-waypoint et_pb_animation_left
• สไลด์เข้าทางขวา: คลาส CSS: et-waypoint et_pb_animation_right
• คลาส CSS สไลด์ชั้นนำ: et-waypoint et_pb_animation_top

เพิ่มเอฟเฟกต์แอนิเมชั่นให้กับ Row

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

เพิ่มเอฟเฟกต์แอนิเมชั่นไปที่ Section

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

ผลลัพธ์

เมื่อคุณเพิ่มเอฟเฟกต์ให้กับส่วนและแถวของคุณแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้:

เพิ่ม Wow.js & Animate.css ให้กับธีมลูกของคุณ

ในส่วนถัดไปนี้ เราจะแสดงวิธีเพิ่ม wow.js และ animate.css ให้กับเว็บไซต์ WordPress ของคุณและวิธีใช้งานในธีม Divi ของคุณ

ก่อนอื่น ฉันต้องการให้เครดิตกับ Jeremy Cookson สำหรับโพสต์นี้เกี่ยวกับวิธีผสานรวม wow.js และ animate.css เข้ากับ WordPress ในส่วนนี้ของโพสต์ เราจะแสดงให้คุณเห็นถึงวิธีการทำให้การผสานรวมเกิดขึ้นกับเว็บไซต์ WordPress ที่สร้างด้วยธีม Divi

หากต้องการเพิ่ม wow.js & animate.css ลงในหน้าเว็บ คุณจะต้องใช้ธีมย่อยในเว็บไซต์ของคุณ หากคุณสงสัยว่าจะสร้างธีมลูกได้อย่างไร ลองดูโพสต์นี้ หลังจากที่คุณสร้างไฟล์หลักของธีมลูกของคุณแล้ว คุณจะต้องเพิ่มไฟล์อื่นอีกสองไฟล์เพื่อทำให้ธีมลูกของคุณสมบูรณ์ด้วยเอฟเฟกต์แอนิเมชั่น

ดาวน์โหลดไฟล์ & เพิ่มลงในธีมลูกของคุณ

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

• animate.min.css
• wow.min.js

เมื่อคุณดาวน์โหลดไฟล์ทั้งสองแล้ว ให้สร้างโฟลเดอร์ย่อยภายในธีมย่อยของคุณ ตั้งชื่อหนึ่งในนั้น CSS และ JS อื่น หลังจากนั้น ให้วาง animate.min.css ลงในโฟลเดอร์ CSS และใส่ wow.min.js ในโฟลเดอร์ JS

อัปโหลดธีมลูก

สิ่งต่อไปที่คุณต้องทำคืออัปโหลดและเปิดใช้งานธีมลูกที่คุณเพิ่งเพิ่ม wow.js และ animate.css เข้าไป ไปที่ แดชบอร์ด WordPress ของคุณ > ลักษณะที่ปรากฏ > ธีม > และคลิกที่ 'เพิ่มใหม่' ที่ด้านบนของหน้า

เพิ่มโค้ด PHP ลงในไฟล์ Functions.php ของคุณ

เมื่อคุณอัปโหลดธีมลูกแล้ว ให้เพิ่มโค้ด PHP ต่อไปนี้ลงในไฟล์ functions.php ของธีมลูกของคุณ:

//* เข้าคิว Animate.CSS และ WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
ฟังก์ชัน sk_enqueue_scripts () {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, จริง );
}
//* เรียกใช้สคริปต์เพื่อเปิดใช้งาน WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
ฟังก์ชั่น sk_wow_init_in_footer () { add_action ( 'print_footer_scripts', 'wow_init' );}
//* เพิ่ม JavaScript ก่อน </body>function wow_init() { ?>
<script type=”text/javascript”>
ใหม่ WOW().init(); </script><?php }

เพิ่มแอนิเมชั่นให้กับแถวและส่วนต่างๆ

ระบบสำหรับเพิ่มเอฟเฟกต์ wow.js และ animate.css ให้กับแถวและส่วนต่างๆ จะเหมือนกับเอฟเฟกต์ภาพเคลื่อนไหว Divi คุณจะต้องเปิดการตั้งค่าของแถวหรือส่วนที่คุณต้องการเพิ่มเอฟเฟกต์ภาพเคลื่อนไหว ถัดไป คุณสามารถวางคลาส CSS ที่กำหนดให้กับแอนิเมชั่นลงในฟิลด์ CSS Class ของส่วนหรือแถวของคุณ

เพิ่มแอนิเมชั่นไปที่ Row

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

ผลลัพธ์

เมื่อคุณได้เพิ่มคลาส CSS และแสดงตัวอย่างเพจที่คุณกำลังทำงานอยู่ คุณควรได้รับผลลัพธ์ต่อไปนี้:

เพิ่มแอนิเมชั่นไปที่ Section

วิธีการเดียวกันนี้ใช้กับการเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวในส่วน ไปที่แท็บขั้นสูงและเพิ่มคลาส CSS 'wow bounceInDown' ลงในฟิลด์ CSS Class ในส่วนของคุณ

ผลลัพธ์

หากคุณทำตามขั้นตอนทั้งหมดอย่างถูกต้อง คุณควรบรรลุผลดังต่อไปนี้:

ตัวเลือกขั้นสูง

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

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

เปิดการตั้งค่าแถวและกลับไปที่แท็บขั้นสูง ภายในฟิลด์ CSS Class ให้เพิ่มคลาสอื่นที่เรียกว่า 'delay' คลาสนี้ยังไม่มี แต่เรากำลังจะเพิ่มในขั้นตอนต่อไป

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

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

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

ผลลัพธ์

เมื่อคุณเพิ่มเวลาหน่วงแล้ว ผลลัพธ์ควรมีลักษณะดังนี้:

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย Stocker top / shutterstock.com