วิธีสร้างแถบเลื่อนแกลเลอรีรูปภาพที่กำหนดเองใน Divi

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

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของแถบเลื่อนแกลเลอรีรูปภาพที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลด Custom Photo Gallery Slider Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

เปิดใช้งานตัวเลือก Divi Gallery ในตัวเลือกธีม Divi

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

หากต้องการเปลี่ยนการตั้งค่า ให้ไปที่ Divi > ตัวเลือกธีม จากนั้นภายใต้แท็บทั่วไป คลิกเพื่อเปิดใช้งานตัวเลือก Divi Gallery

แค่นั้นแหละ! ตอนนี้รหัสย่อของแกลเลอรี WordPress เริ่มต้นจะแสดงแกลเลอรีรูปภาพสไตล์ Divi

การสร้างแถบเลื่อน Custom Photo Gallery ใน Divi

ส่วนและแถว

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

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

• ความกว้าง: 100% (ดังนั้นตัวเลื่อนจะเต็มความกว้างบนมือถือ)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• มุมโค้งมน: 20px

การสร้างเนื้อหา Slider

ถัดไป เพิ่มโมดูลตัวเลื่อนในแถว

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

จากนั้นอัปเดตเนื้อหาสไลด์ดังต่อไปนี้:

• Title: แกลลอรี่ของเรา
• ปุ่ม: ดูทั้งหมด
• ร่างกาย: นี่คือแกลเลอรี่ของเรา ตรวจสอบออก

ใต้พื้นที่เนื้อหา ให้คลิกปุ่มเพิ่มสื่อ

ในป๊อปอัป Media Library เลือกแท็บ Create Gallery ที่ด้านบนซ้าย จากนั้นเลือกรูปภาพ 6 รูปที่คุณต้องการใช้สำหรับแกลเลอรีแล้วคลิกปุ่ม "สร้างแกลเลอรีใหม่" ที่ด้านล่างขวา

ซึ่งจะนำคุณไปยังหน้าแก้ไขหมวดหมู่ภายในป๊อปอัป ละเว้นการตั้งค่าแกลเลอรีที่ด้านบนขวาเนื่องจากรูปแบบ Divi Gallery จะแทนที่การตั้งค่าแกลเลอรี WordPress เหล่านี้

จากนั้นคลิกปุ่ม "แทรกแกลเลอรี"

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

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

มาอัปเดตเนื้อหาสไลด์ของเราต่อโดยเพิ่มภาพสไลด์หลัก

ตอนนี้เรามีเนื้อหาตัวเลื่อนพร้อมแล้ว ให้บันทึกการตั้งค่าของคุณสำหรับสไลด์ 1

การตั้งค่าตัวเลื่อน

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

เส้นขอบรูปภาพและเงากล่อง

• มุมโค้งมนของรูปภาพ: 20px
• ความกว้างของเส้นขอบรูปภาพ: 40px (เดสก์ท็อป), 0px (แท็บเล็ต)
• สีของเส้นขอบรูปภาพ: rgba(0,0,0,0)

• Image Box Shadow: ดูภาพหน้าจอ
• ตำแหน่งแนวนอนของกล่องเงา: -170px
• ตำแหน่งแนวตั้งเงาของกล่อง: -220px
• ความแรงของการกระจายเงาของกล่อง: -60px
• เงาสี: rgba(255,255,255,0.2)

ชื่อเรื่องและเนื้อหา

• แบบอักษรของชื่อเรื่อง: Karla
• การจัดตำแหน่งข้อความชื่อเรื่อง: right
• ขนาดข้อความชื่อเรื่อง: 48px
• ความสูงของบรรทัดหัวเรื่อง: 1.3em
• ขนาดข้อความเนื้อหา: 16px
• ระยะห่างระหว่างตัวอักษร: 2px
• ความสูงของเส้นร่างกาย: 2em

ลักษณะปุ่ม

• ขนาดข้อความของปุ่ม: 16px
• สีพื้นหลังของปุ่ม: #333333
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 20px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: Karla
• แบบอักษรของปุ่ม น้ำหนัก: ตัวหนา
• ไอคอนปุ่ม: ดูภาพหน้าจอ
• การจัดตำแหน่งปุ่ม: ขวา
• ระยะขอบของปุ่ม: -5em right
• ปุ่ม Padding (เดสก์ท็อป): 3em ซ้าย 5em right
• ปุ่ม Padding (โทรศัพท์): 2em ซ้าย 6em right

• ปุ่มกล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของการกระจายเงาของกล่อง: 20px (เดสก์ท็อป), 10px (โทรศัพท์)
• สีเงา: #ffffff

Slider Padding

• เบาะ: 10% บน 10% ล่าง

การเพิ่มการไล่ระดับสีพื้นหลังให้กับสไลด์ 1

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

• พื้นหลังไล่ระดับสีซ้าย: #6d0066
• ไล่สีพื้นหลังด้านขวา: #000000
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนซ้าย

การสร้างสไลด์ 2

ในการสร้างสไลด์ที่สอง เราสามารถทำซ้ำสไลด์ 1 โดยใช้ไอคอนที่ซ้ำกัน จากนั้นเปิดการตั้งค่าสไลด์ที่ซ้ำกัน (สไลด์ 2)

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

จากนั้นอัปเดตการไล่ระดับสีพื้นหลังดังนี้:

• พื้นหลังไล่ระดับสีซ้าย: #0c71c3

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

และนี่คือลักษณะแถบเลื่อนบนแท็บเล็ตและโทรศัพท์

และนี่คือตัวเลื่อนหากคุณนำภาพสไลด์ออกเพื่อให้แสดงเฉพาะเนื้อหาสไลด์และแกลเลอรี

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

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

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

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

ไชโย!