วิธีสร้างตัวเลื่อนแบบเต็มหน้าจอที่กำหนดเองพร้อม Divi 5 (ดาวน์โหลดฟรี)

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

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

ทำความเข้าใจโมดูลม้าหมุนกลุ่ม

โมดูลม้าหมุนกลุ่มเป็นส่วนเสริมที่หลากหลายของ Divi 5 ช่วยให้คุณสามารถสร้างแถบเลื่อนแบบไดนามิกและม้าหมุน

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

คุณสมบัติที่สำคัญของโมดูลม้าหมุนกลุ่ม

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

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

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

วิธีสร้างแถบเลื่อนแบบเต็มหน้าจอด้วยโมดูล Carousel กลุ่มของ Divi 5

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

ขั้นตอนที่ 1: การตั้งค่าหน้าใหม่

สร้างหน้าใหม่เพิ่มชื่อและคลิก ใช้ Divi Builder เพื่อเริ่มต้นใช้งาน

เมื่อผู้สร้างภาพเปิดขึ้นให้เลือก สร้างจากศูนย์ภาย ใต้ตัวเลือก การสร้างหน้าของคุณ

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

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

ต่อไปเราจะปรับการตั้งค่าระยะห่างสำหรับส่วน ขยายเมนูดรอปดาวน์ ระยะห่าง ตั้ง ค่ามาร์จิ้น เป็น 0PX ด้านบนและด้านล่าง ภายใต้ ช่องว่าง ภายในให้ตั้งค่าด้านบนและด้านล่างเป็น 0px

ด้วยการตั้งค่าส่วนของส่วนให้คลิก ไอคอนสีเขียว + เพื่อเพิ่มแถวใหม่

เลือก แถวคอลัมน์เดียว ภายใต้ คอลัมน์ที่เท่ากัน

จากนั้นเพิ่ม โมดูลม้าหมุนกลุ่ม ลงในแถว

ก่อนที่จะเพิ่มเนื้อหาเราต้องตั้งค่าโมดูล ROW และกลุ่มม้าหมุนด้วย FlexBox และการควบคุมระยะห่าง

ขั้นตอนที่ 2: กำหนดค่าการตั้งค่าแถว

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

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

นอกจากนี้ตั้งค่า การจัดเรียงรายการ ให้เป็น ศูนย์กลาง สำหรับแถว

ตั้งค่าความกว้างและความกว้างสูงสุดในแท็บการปรับขนาดเป็น 100%

ในแท็บ ระยะ ห่างให้ตั้งค่าขอบด้านบนและด้านล่างและช่องว่างภายในเป็น 0px

ขั้นตอนที่ 3: กำหนดค่าการตั้งค่าแบบม้าหมุนกลุ่ม

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

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

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

ขยาย แท็บพื้นหลัง และกำหนด #000000 เป็น สีพื้นหลัง

ขั้นตอนที่ 4: จัดสไตล์กลุ่มแรก

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

ขยายเมนูดรอปดาวน์ พื้นหลัง และเลือกแท็บการ ไล่ระดับสี

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

ถัดไปคลิกที่ ตัวเลื่อนการไล่ระดับสีที่ 2 และกำหนด #F28F52 เป็นสี

ในฟิลด์ ประเภทการไล่ระดับสี เลือก วงกลม

ถัดไปนำทางไปยัง แท็บการออกแบบ ขยาย แท็บระยะห่าง และกำหนด ช่องว่างภายใน 5% ไปด้านบนและด้านล่างของกลุ่ม

ขั้นตอนที่ 5: เพิ่มเนื้อหาในกลุ่มแรก

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

เมื่อกล่องโต้ตอบแทรกโมดูลหรือแถวปรากฏขึ้นให้คลิกแท็บ แถวใหม่ ภายใต้ส่วน คอลัมน์ที่เท่าเทียมกัน เลือก แถวคอลัมน์เดียว

เพิ่มโมดูลหัวเรื่อง

เลือกและแทรกโมดูล หัวเรื่อง

ขยายเมนู แบบเลื่อนลงข้อความ และป้อน น้ำส้ม เป็น ชื่อ

นำทางไปยัง แท็บการออกแบบ ขยายเมนู ดรอปดาวน์ข้อความหัวเรื่อง เลือก H1 เป็น ระดับหัวเรื่อง ให้ใช้ bebas neue เป็น ตัวอักษรหัวเรื่อง ตั้งค่า สไตล์ตัวอักษรหัวเรื่อง เป็น ตัวพิมพ์ใหญ่ การจัดตำแหน่งข้อความหัวเรื่อง ไปยัง ศูนย์ สีข้อความหัวเรื่อง เป็น #FFFFFF และ ขนาดข้อความหัวเรื่อง ถึง 20EM

ใช้การควบคุมการตอบสนองของ Divi 5 เพื่อปรับ ขนาดข้อความหัวเรื่อง เป็น 15EM บนแท็บเล็ตและ 8EM บนมือถือ

เพิ่มแถวใหม่

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

คลิกแท็บ แถวใหม่ ภายใต้ คอลัมน์ออฟเซ็ต เลือกตัวเลือก 1/4 + 1/2 + 1/4

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

เพิ่มโมดูลหัวเรื่อง

เลือกโมดูล หัวเรื่อง และเพิ่มลงใน คอลัมน์แรก

ให้หัวเรื่อง ชื่อ และมุ่งหน้าไปยัง แท็บการออกแบบ ขยายเมนู ดรอปดาวน์ข้อความหัวเรื่อง เลือก H2 สำหรับ ระดับหัวเรื่อง , bebas neue เป็น ตัวอักษรหัวเรื่อง , ตัวพิมพ์ใหญ่ เป็น รูปแบบตัวอักษรหัวเรื่อง , #ffffff เป็น สีข้อความหัว และ 6em เป็น ขนาดข้อความหัว

ใช้การควบคุมการตอบสนองของ Divi เพื่อปรับ ขนาดข้อความหัวเรื่อง เป็น 4EM

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

เพิ่ม โมดูลข้อความ ภายใต้หัวข้อในคอลัมน์แรก ป้อนข้อความร่างกายและสลับไปที่ แท็บการออกแบบ เลือก poppins เป็น ตัวอักษรข้อความ ตั้งค่า สีข้อความ เป็น #FFFFFF และ ขนาดข้อความ เป็น 16px

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

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

ใช้การควบคุมโฮเวอร์ของ Divi 5 เพื่อกำหนด #6A7C9D เป็นสีโฮเวอร์สำหรับปุ่ม

สลับกลับไปที่มุมมองเดสก์ท็อป ขยายแท็บ Dropdown Button Border เพิ่ม 100px ภายใต้ รัศมีเส้นขอบปุ่ม และตั้งค่า ความกว้างของปุ่มปุ่ม เป็น 0px

ขยายเมนู แบบเลื่อนลงข้อความ กำหนด poppins เป็น ตัวอักษรปุ่ม #FFFFFF เป็น สีข้อความปุ่ม และ 16px เป็น ขนาดข้อความปุ่ม

ขยายการตั้งค่า ไอคอนปุ่ม และปิดใช้งานการสลับ ไอคอนปุ่มแสดง

ในที่สุดขยายเมนู ดรอปดาวน์ระยะห่าง เพิ่มช่องว่าง 15px ไปด้านบนและด้านล่างและ 35px ไปทางซ้ายและขวา

เพิ่มโมดูลรูปภาพ

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

ต่อไปเราจะเพิ่มการโต้ตอบกับภาพเพื่อสร้างเอฟเฟกต์เมาส์ นำทางไปยังแท็บ ขั้นสูง ขยาย เมนูการโต้ตอบ เพื่อเปิดเผยการตั้งค่า คลิกปุ่ม +เพิ่มการโต้ตอบ

เลือก Mouse Enter เมื่อตัวเลือกปรากฏขึ้น

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

เพิ่มโมดูลเคาน์เตอร์บาร์

คลิกเพื่อเพิ่มโมดูลเคาน์เตอร์แท่งในคอลัมน์ที่ 3 ในแท็บเนื้อหา ในแท็บ องค์ประกอบ ปิดการใช้ งานเปอร์เซ็นต์การแสดง

ถัดไปขยายแท็บพื้นหลัง เพิ่ม #FFFFFF เป็นสีพื้นหลัง

สลับไปที่ แท็บการออกแบบ และขยาย เมนูดรอปดาวน์บาร์ ในสนาม สีพื้นหลังของแท่ง เพิ่ม #528BF2 เป็นสี

ขยายเมนู แบบเลื่อนลงข้อความชื่อเรื่อง ใน ฟิลด์ฟิลด์ชื่อ ให้เลือก bebas neue เลือก #FFFFFF เป็น สีข้อความชื่อ และ 22px เป็น ขนาดข้อความชื่อ

สลับกลับไปที่แท็บเนื้อหา เวลานี้คลิกที่ไอคอนการตั้งค่าสำหรับรายการเคาน์เตอร์แถบแรก

ป้อนข้อความลงในฟิลด์ ชื่อเรื่อง และตั้งค่าฟิลด์ เปอร์เซ็นต์ เป็น 75

คลิกเพื่อกลับไปที่แท็บเนื้อหาหลักสำหรับโมดูลเคาน์เตอร์บาร์

ตอนนี้การตั้งค่าการออกแบบของเราได้รับการตั้งค่าแล้วคุณสามารถคัดลอกรายการเคาน์เตอร์แถบแรกเพื่อรักษาการตั้งค่าได้อย่างง่ายดาย

ทำซ้ำรายการเคาน์เตอร์บาร์และเปลี่ยนชื่อและเปอร์เซ็นต์เป็นการตั้งค่าที่คุณต้องการ

ขั้นตอนที่ 6: เพิ่มภาพเคลื่อนไหว

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

ถัดไปคลิกเพื่อขยายแถวที่ 2 (แถวสามคอลัมน์) คลิกในการตั้งค่าคอลัมน์แรก

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

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

ขั้นตอนที่ 7: แถวที่ทับซ้อนกัน

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

ต่อไปเราจะใช้ค่าดัชนี Z เพื่อวางแถวที่ 2 เหนือ 1st นำทางไปยังแท็บขั้นสูงขยายการตั้งค่าตำแหน่งและใช้ 999999 กับฟิลด์ดัชนี Z

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

ขั้นตอนที่ 8: ทดสอบการตอบสนอง

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

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

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

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

ขั้นตอนที่ 9: กลุ่มซ้ำกัน

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

ก่อนที่จะคัดลอกให้กำหนดป้ายกำกับผู้ดูแลระบบให้กับกลุ่มเพื่อระบุว่าง่ายขึ้น

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

นอกจากนี้คุณยังต้องการเปลี่ยนปุ่มเคาน์เตอร์และแท่งเป็น #3DFCCA และ #C52F00 บน Hover

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

ทำเช่นเดียวกันสำหรับแถว 3 คอลัมน์ ในคอลัมน์ ที่หนึ่ง และ สาม ตั้งค่า ความล่าช้าของแอนิเมชั่น เป็น 2000ms

การเปลี่ยนแปลงกลุ่มที่สาม

สำหรับกลุ่มที่ 3 ให้ใช้ #71B953 และ #617A56 สำหรับ การไล่ระดับสีพื้นหลัง

สำหรับโมดูล ปุ่ม และ แท่งแท่ง ให้ใช้ #BA54B3 และ #654F64 สำหรับสีโฮเวอร์

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

เปลี่ยนเป็นกลุ่มที่สี่

สำหรับ การไล่ระดับสีพื้นหลัง ให้ใช้ #ad52b7 และ #ad52b7

ใช้ #83B853 และ #83B853 สำหรับโมดูลเคาน์เตอร์บาร์และปุ่ม

ในที่สุดตั้งค่าความล่าช้าของแอนิเมชั่นเป็น 6000ms บนหัวเรื่องหลักในกลุ่มพร้อมกับคอลัมน์แรกและสามของแถว 3 คอลัมน์

ขั้นตอนที่ 10: ดูตัวอย่างและบันทึกแถบเลื่อน

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

คลิกปุ่มดูตัวอย่างเพื่อเปิดเค้าโครงในแท็บใหม่

เมื่อเสร็จแล้วตัวเลื่อนของคุณควรมีลักษณะเช่นนี้:

แค่ไหน! โมดูล Carousel กลุ่มเป็นส่วนเสริมใหม่ที่หลากหลายสำหรับ Divi 5 มันช่วยให้คุณสร้างสไลเดอร์และม้าหมุนสำหรับโครงการใด ๆ และเสนอตัวเลือกการปรับแต่งไม่ จำกัด

ดาวน์โหลดเค้าโครงแบบเต็มหน้าจอ

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

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

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

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

การดาวน์โหลด

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

สร้างม้าหมุนตัวแรกของคุณใน Divi 5 วันนี้

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

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