4 ปุ่มเลื่อนแบบเคลื่อนไหวสำหรับส่วนฮีโร่ของไซต์ Divi ของคุณ (และวิธีการสร้าง)

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของการออกแบบที่เราจะสร้างร่วมกัน

ดาวน์โหลดเค้าโครงปุ่มเลื่อนเคลื่อนไหวได้ฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

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

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

ดาวน์โหลด

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

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างส่วนหัว

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

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

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

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

พื้นหลังสีเข้มจะใช้ได้

เพิ่มข้อความส่วนหัว

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

จากนั้นอัปเดตเนื้อหาเนื้อหาด้วยส่วนหัว h1 เหนือข้อความย่อหน้าเริ่มต้น

<h1>scroll button animation</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

แบบอักษรของข้อความ: Karla
การจัดตำแหน่งข้อความ: ศูนย์
หัวเรื่อง ขนาดข้อความ: 5vw
สีข้อความ: เบา

นี่จะเป็นการออกแบบส่วนพื้นฐานที่เราจะใช้สำหรับปุ่มเลื่อนแบบเคลื่อนไหวต่างๆ ของเรา

การออกแบบปุ่มเลื่อนแบบเคลื่อนไหว #1: ข้อความแนวตั้งพร้อมแอนิเมชั่นตีกลับช้า

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

นี่คือวิธีการทำ

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

จากนั้นเพิ่มโมดูลการนำเสนอลงในแถว

ภายใต้การตั้งค่าการนำเสนอ ให้ลบเนื้อหาเริ่มต้นของเนื้อหาและเพิ่มสิ่งต่อไปนี้:

ชื่อเรื่อง: scroll
ใช้ไอคอน: ใช่
ไอคอน: ลูกศรขวา (ดูภาพหน้าจอ)

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

สีไอคอน: #ffffff
ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
ใช้ขนาดตัวอักษรของไอคอน: ใช่
ขนาดตัวอักษรของไอคอน: 50px
รูปแบบตัวอักษรของชื่อเรื่อง: TT
สีข้อความของชื่อเรื่อง: #ffffff
ขนาดข้อความชื่อเรื่อง: 14px
ระยะห่างของตัวอักษรชื่อเรื่อง: 3px
ความสูงของบรรทัดหัวเรื่อง: 50px (เหมือนกับขนาดตัวอักษรของไอคอน)

ต่อไป เราต้องกำหนดความกว้างที่กำหนดไว้แล้วหมุนตามแนวตั้งดังนี้:

ความกว้าง: 132px
การจัดตำแหน่งโมดูล: ศูนย์
เปลี่ยนแกนหมุน Z: 90deg

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

direction: rtl;

การเพิ่มแอนิเมชั่นจังหวะช้า

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

สไตล์แอนิเมชั่น: Bounce
ทิศทางของแอนิเมชั่น: ลง
ระยะเวลาแอนิเมชั่น: 5000ms
ภาพเคลื่อนไหวล่าช้า: 400ms
ภาพเคลื่อนไหว/ไอคอน: จากซ้ายไปขวา

ผลสุดท้าย

ตอนนี้ มาดูผลลัพธ์สุดท้ายสำหรับการออกแบบ #1

การออกแบบปุ่มเลื่อนแบบเคลื่อนไหว #2: แอนิเมชั่นข้อความ Marquee แนวตั้ง

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

นี่คือวิธีการทำ

ขั้นแรกให้ทำซ้ำทั้งส่วนของการออกแบบ #1

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

ถัดไป อัปเดตแถวของส่วนที่มีโมดูลประกาศ/ปุ่มเลื่อนดังต่อไปนี้:

แนวนอนล้น: ซ่อน
ล้นแนวตั้ง: ซ่อน

อัปเดตการตั้งค่าโมดูล Blurb

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

แปลงแกนแปล Y: 115px

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

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ลง
ระยะเวลาแอนิเมชั่น: 4000ms
ความเข้มของแอนิเมชั่น: 195%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น
ภาพเคลื่อนไหวซ้ำ: Loop

ผลสุดท้าย

ตอนนี้ มาดูผลลัพธ์สุดท้ายสำหรับการออกแบบ #3

การออกแบบปุ่มเลื่อนแบบเคลื่อนไหว #3: แท็บลูกศรพร้อมภาพเคลื่อนไหวสไลด์ลงล่าช้า

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

สำหรับการออกแบบนี้ เราจะเริ่มด้วยการออกแบบส่วนหัวพื้นฐาน ดังนั้นคุณจึงสามารถทำซ้ำการออกแบบที่ซ้ำกันส่วน #3 แล้วลบโมดูลการนำเสนอในแถวที่ 2

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

จากนั้นอัปเดตเนื้อหาเนื้อหาด้วยคำว่า "เลื่อน"

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

สีพื้นหลัง: #ffffff
สีข้อความ: #222222
การจัดตำแหน่งข้อความ: center
ความกว้าง: 50px
การจัดตำแหน่งโมดูล: ศูนย์
ระยะขอบ: 0px ด้านล่าง
ช่องว่างภายใน: บน 20px ด้านล่าง 20px
มุมโค้งมน 5px ล่างซ้าย, 5px ล่างขวา

เพิ่มไอคอน Blurb

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

จากนั้นลบชื่อเริ่มต้นและข้อความเนื้อหา จากนั้นเพิ่มการปรับปรุงต่อไปนี้:

ใช้ไอคอน: ใช่
ไอคอน: สามเหลี่ยมลูกศรล่าง (ดูภาพหน้าจอ)

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

สีไอคอน: #ffffff
ขอบ: -36px บน, 0px ล่าง

ระยะขอบเชิงลบนี้จะแนบลูกศรเข้ากับโมดูลข้อความเพื่อการออกแบบแท็บลูกศรที่สวยงาม

จากนั้นเพิ่ม css ต่อไปนี้ในรูปภาพประกาศเพื่อลบระยะขอบที่ไม่จำเป็นด้านล่างไอคอน

CSS รูปภาพนำเสนอ:

margin-bottom: 0px;

แถวที่ 2 การตั้งค่าและภาพเคลื่อนไหว

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

ความกว้างสูงสุด: 100px
ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ลง
ระยะเวลาของแอนิเมชั่น: 1200ms

แถวที่ 1 สีพื้นหลังและเงากล่อง

สัมผัสสุดท้ายของการออกแบบนี้เกี่ยวข้องกับการเพิ่มสีพื้นหลังให้กับแถวแรกเหนือแถวปุ่มเลื่อนโดยตรง และด้วยการอัปเดตดัชนี Z ของแถวนั้น เราจะอนุญาตให้แอนิเมชั่นปุ่มเลื่อนปรากฏราวกับว่ามันแตกออกจากส่วนหัว

เปิดการตั้งค่าสำหรับแถวที่ 1 ดังนี้:

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

ดัชนี Z: 10

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 80px
ความแรงของกล่องเงาเบลอ: 22px
ความแรงของการกระจายเงาของกล่อง: -70px
สีเงา: #222222 (ตรวจสอบให้แน่ใจว่าสีนี้ตรงกับสีพื้นหลัง)

ผลสุดท้าย

ตอนนี้ตรวจสอบผลลัพธ์สุดท้าย

การออกแบบปุ่มเลื่อนแบบเคลื่อนไหว #4: ภาพเคลื่อนไหวการเลื่อนเมาส์

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

นี่คือวิธีการทำ

ในการเริ่มต้น คุณสามารถใช้ส่วนหัวพื้นฐานได้ จากนั้นเพิ่มแถวใหม่ภายใต้แถวที่ 1

เพิ่มโมดูล Blurb

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

หลังจากนั้นให้อัปเดตไอคอนดังนี้:

ใช้ไอคอน: ใช่
ไอคอน: วงกลม (ดูภาพหน้าจอ)

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

สีไอคอน: #ffffff
ใช้ขนาดตัวอักษรของไอคอน: ใช่
ขนาดตัวอักษรของไอคอน: 15px
สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ลง
ระยะเวลาของแอนิเมชั่น: 1200ms
ภาพเคลื่อนไหวซ้ำ: Loop
แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ใน Blurb Image:

margin-bottom: 0px;

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

ถัดไป เพิ่มโมดูลข้อความใหม่โดยตรงภายใต้โมดูลประกาศ จากนั้นอัปเดตข้อความเนื้อหาด้วยคำว่า "เลื่อน"

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

สีข้อความ: #ffffff
การจัดตำแหน่งข้อความ: center
ความกว้าง: 90px
ระยะขอบ: ด้านบน 10px, เหลือ -30px

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

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

ความกว้าง: 30px
ส่วนสูง: 60px
มุมโค้งมน: 16px
ความกว้างของเส้นขอบ: 1px
สีเส้นขอบ: #ffffff
สไตล์เส้นขอบ: ของแข็ง
แนวนอนล้น: มองเห็นได้
ล้นแนวตั้ง: มองเห็นได้

ผลสุดท้าย

ทีนี้มาดูผลลัพธ์สุดท้ายกัน:

การเพิ่มฟังก์ชัน Anchor Link

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

1. คุณต้องเพิ่ม CSS ID ในส่วนหรือแถวที่คุณต้องการข้ามไป
2. คุณต้องเพิ่มลิงก์สมอที่มีรหัส CSS เดียวกันกับปุ่มเลื่อนของคุณ

นี่คือวิธีการทำงาน ขั้นแรก ให้สร้างส่วนใหม่ภายใต้ส่วนหัวที่มีปุ่มเลื่อน จากนั้นให้รหัส CSS แก่ส่วนใหม่ภายใต้แท็บขั้นสูง

จากนั้นให้หาปุ่มองค์ประกอบ/ปุ่มเลื่อนที่คุณต้องการเปลี่ยนเป็นลิงก์ Anchor และเพิ่ม URL ที่ขึ้นต้นด้วยแฮชแท็ก (หรือสัญลักษณ์ปอนด์) และตามด้วย CSS ID ขององค์ประกอบที่คุณกำลังข้ามไปทันที

ตัวอย่างเช่น หาก CSS ID ของส่วนคือ "section-2" คุณจะต้องเพิ่ม "#section-2" เป็น URL ของลิงก์

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

สำหรับข้อมูลเพิ่มเติม โปรดดูสิ่งเจ๋งๆ ที่คุณสามารถทำได้ด้วยลิงก์สมอ

สร้างสรรค์!

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

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

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

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

ไชโย!