วิธีปรับแต่ง Divi Slider ของคุณเพื่อเปลี่ยนองค์ประกอบเฉพาะในแต่ละสไลด์

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

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

Divi Slider แอบดู

ฟังคือตัวอย่างการออกแบบและฟังก์ชันการทำงานของตัวเลื่อน Divi ที่เราจะสร้างในบทช่วยสอนของวันนี้

สังเกตว่าการเปลี่ยนแปลงนี้เปลี่ยนแปลงเพียงคำเดียวในข้อความเนื้อหาในแต่ละสไลด์อย่างไร

สังเกตว่าในตัวอย่างนี้ ทั้งข้อความเนื้อหาและสีของปุ่มและจุดจะเปลี่ยนไปในแต่ละสไลด์อย่างไร

อธิบายแนวคิดพื้นฐาน

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

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

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

เริ่มต้น

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

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

ในการเริ่มต้น ให้สร้างเพจใหม่และตั้งชื่อเพจของคุณ จากนั้นคลิกเพื่อใช้ Divi Builder และเลือกตัวเลือกเพื่อ "สร้างตั้งแต่เริ่มต้น" จากนั้นคลิกปุ่มเพื่อ "สร้างที่ส่วนหน้า"

ตอนนี้คุณพร้อมที่จะเริ่มต้นกับการออกแบบแล้ว

การตั้งค่าเนื้อหา Divi Slider

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

เพื่อให้เราสามารถเห็นการเปลี่ยนแปลงของเนื้อหาในแถบเลื่อนของเรา ให้เพิ่มสีพื้นหลังสีเข้มชั่วคราวในส่วนเต็มความกว้างก่อน เปิดการตั้งค่าส่วนและกำหนดสีพื้นหลังเป็นสีดำ (#222222)

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

ตอนนี้ ไปที่การตั้งค่า Fullwidth Slider และลบสไลด์เริ่มต้นตัวใดตัวหนึ่ง เหลือไว้เพียงสไลด์เดียว จากนั้นเปิดการตั้งค่าสไลด์

อัปเดตการตั้งค่าสไลด์ดังนี้:

หัวข้อ: “เว็บไซต์ที่ให้คุณมากกว่า…”
ข้อความปุ่ม: “เริ่มต้นใช้งาน”

ภายใต้เนื้อหาเพิ่ม html ต่อไปนี้:

Business<span style="color: #EE164D;">.</span>

(ซึ่งเป็นการเพิ่มสีที่กำหนดเองให้กับจุด (หรือจุด) หลังคำ)

สีพื้นหลัง: rgba(255,255,255,0)

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

ตอนนี้ทำสำเนาสไลด์สองครั้งเพื่อให้คุณมีทั้งหมดสามสไลด์

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

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

ทุกอย่างเสร็จเรียบร้อย! ที่ดูแลเนื้อหาตัวเลื่อนของเรา

การเพิ่มประสิทธิภาพแอนิเมชั่นข้อความคำอธิบาย

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

animation-name: none;

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

แอนิเมชั่นอัตโนมัติ: ON
ความเร็วแอนิเมชั่นอัตโนมัติ (เป็นมิลลิวินาที): 3000

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

การออกแบบตัวเลื่อน

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

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

การวางแนวข้อความ: ซ้าย
แบบอักษรของชื่อเรื่อง: Lato
น้ำหนักแบบอักษรของชื่อเรื่อง: เบา
ขนาดข้อความชื่อเรื่อง: 32px
เงาข้อความชื่อเรื่อง: ดูภาพหน้าจอ
ความแรงของเงาข้อความของหัวเรื่อง: 0em (โดยพื้นฐานแล้วจะใช้เงาข้อความเริ่มต้น)

แบบอักษรของร่างกาย: Lato
ขนาดข้อความ: 5vw (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (สมาร์ทโฟน)
ความสูงของเส้นร่างกาย: 1.6em
เงาข้อความ: ดูภาพหน้าจอ
Body Text Shadow Blur Strength: 0em (โดยพื้นฐานแล้วจะใช้เงาข้อความเริ่มต้น)

ขนาดข้อความของปุ่ม: 16px
สีพื้นหลังของปุ่ม: #ee164d
ความกว้างของขอบปุ่ม: 8px
สีเส้นขอบของปุ่ม: #ee164d
รัศมีเส้นขอบของปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
แบบอักษรของปุ่ม: Lato
การจัดตำแหน่งปุ่ม: ขวา

ความกว้าง: 70% (เดสก์ท็อป), 100% (แท็บเล็ต), 100% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ศูนย์

Custom Padding (เดสก์ท็อป): 19vw บน, 8vw ด้านล่าง
Custom Padding (แท็บเล็ต): 19vw บน, 4vw ด้านล่าง ซ้าย 0px, 0px ขวา
Custom Padding (สมาร์ทโฟน): 30vw บน, 4vw ล่าง, 0px ซ้าย, 0px ขวา

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -190px
ตำแหน่งแนวตั้งเงาของกล่อง: 60px
กล่องสีเงา: rgba(0,16,17,0.7)

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

ที่ดูแลการออกแบบตัวเลื่อน Divi ของเรา!

การปรับแต่งรูปแบบมาตรา

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

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

ภาพพื้นหลัง: [แทรกรูปภาพประมาณ 1920px x 800px]
พื้นหลังไล่ระดับสีซ้าย: rgba(0,16,17,0.45)
พื้นหลังไล่ระดับสีขวา: rgba(0,16,17,0.92)
ตำแหน่งเริ่มต้น: 34%
ตำแหน่งสุดท้าย: 0%
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ถัดไป กำหนดเส้นขอบให้ส่วนของคุณดังนี้:

ความกว้างขอบขวา: 5vw
สีขอบขวา: #001011

และสุดท้าย ให้ส่วนเงาของกล่องเพื่อช่วยปรับสมดุลกรอบงานการออกแบบ

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -200px
ตำแหน่งแนวตั้งเงาของกล่อง: -150px
กล่องสีเงา: rgba(0,16,17,0.74)

แค่นั้นแหละ!

การออกแบบขั้นสุดท้ายของ Divi Slider

นี่คือการออกแบบขั้นสุดท้ายของตัวเลื่อน Divi แบบกำหนดเอง

และนี่คือฟังก์ชันของสไลด์ สังเกตว่าคำเดียวเปลี่ยนไปในแต่ละสไลด์

การออกแบบขั้นสุดท้ายบนมือถือ

ยาเม็ด

สมาร์ทโฟน

ทดลองเปลี่ยนองค์ประกอบอื่นๆ

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

นี่คือสิ่งที่จะมีลักษณะ

คุณยังสามารถสำรวจการเปลี่ยนแปลงของสีเงากล่องสไลด์หรือองค์ประกอบการออกแบบอื่นๆ ได้อีกด้วย มีความเป็นไปได้มากมาย!

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

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

แจ้งให้เราทราบว่าคุณคิดอย่างไรในความคิดเห็นด้านล่าง

ไชโย!