Divi: วิธีสร้างแถบเลื่อนคำรับรองขนาดกะทัดรัดสำหรับส่วนหัว

คุณต้องการแทรกแถบเลื่อนข้อความรับรองขนาดกะทัดรัดสำหรับส่วนหัวของ Divi หรือไม่?

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

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

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

เพื่อทำเช่นนี้ เราจะปรับเปลี่ยน Divi Slider Module ด้วยวิธีที่สนุกสนานและไม่เหมือนใคร

เริ่มกันเลย!

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

การสำรวจ

นี่คือตัวเลื่อนคำรับรองขนาดกะทัดรัดที่เราจะสร้างโดยใช้โมดูลตัวเลื่อนของ Divi

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

และนี่คือสิ่งที่ดูเหมือนบนมือถือ

สร้างหน้าใหม่ด้วย Divi Builder

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

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

วิธีสร้างแถบเลื่อนคำรับรองขนาดกะทัดรัดใน Divi

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

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

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

แก้ไขสไลด์

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

เนื้อหาสไลด์

ใต้แท็บ คอนเทนต์ จากการตั้งค่าสไลด์ ให้อัปเดตสิ่งต่อไปนี้:

• ชื่อเรื่อง: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• ปุ่ม: อ่านทั้งหมด
• ร่างกาย: — Tatiana Gagelman

เมื่อเสร็จแล้ว ให้บันทึกการตั้งค่าสไลด์

อ่าน: Divi: วิธีใช้การตั้งค่ามาสก์พื้นหลังและตัวเลือกการแปลงรูปแบบ

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

สไลด์ซ้ำและซ่อนตัวควบคุม

หลังจากอัพเดตสไลด์แรกด้วย เนื้อหาให้ทำซ้ำสไลด์นี้เพื่อสร้างสไลด์เพิ่มเติมอย่างน้อยหนึ่งสไลด์

จากนั้นภายใต้กลุ่มตัวเลือก องค์ประกอบซ่อนตัวควบคุมตัวเลื่อนโดยอัปเดตสิ่งต่อไปนี้:

• แสดงการควบคุม: NO

อัปเดตพื้นหลังของสไลด์ทั้งหมด

ต่อไป เราจะเพิ่มพื้นหลังที่จะใช้กับสไลด์ทั้งหมด

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

• พื้นหลังไล่ระดับ:
  • ไล่ระดับหยุด 0%: #000000
  • ไล่ระดับหยุด 100%: #000000

• ภาพพื้นหลัง :
  • ขนาด: Fit
  • ตำแหน่ง: กลางซ้าย
  • ผสมผสาน: ความส่องสว่าง

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

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

ปก

• ใช้การซ้อนทับพื้นหลัง: ใช่
• พื้นหลังซ้อนทับสี: rgba(0,0,0,0.7)

ข้อความชื่อ

• หัวข้อ:
  • ระดับหัวเรื่อง: H4
  • แบบอักษร: Josefin Sans
  • น้ำหนักแบบอักษร: ปานกลาง
  • การจัดตำแหน่งข้อความ: ซ้าย
  • ขนาดตัวอักษร: 16px (เดสก์ท็อปและแท็บเล็ต), 14px (โทรศัพท์)
  • ความสูงของสาย: 1,5em

ข้อความของร่างกาย

• ร่างกาย :
  • แบบอักษร: Josefin Sans
  • การจัดตำแหน่งข้อความ: ซ้าย
  • สีข้อความ: #aaaaaa
  • ระยะห่างระหว่างตัวอักษร: 0,05em

ปุ่ม

• ใช้ขนาดที่กำหนดเองสำหรับปุ่ม: ใช่
• ปุ่ม:
  • ขนาดตัวอักษร: 1em
  • สีข้อความ: ค่าเริ่มต้น (เดสก์ท็อป), #000 (โฮเวอร์)
  • สีพื้นหลัง (เดสก์ท็อป): rgba(255,255,255,0.19)
  • สีพื้นหลัง (โฮเวอร์): #ffffff
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • ระยะห่างระหว่างตัวอักษร: 0,05em
  • แบบอักษร: Josefin Sans
  • ระยะขอบ: 0px (บนและล่าง)
  • ช่องว่างภายใน: 0px (บนและล่าง), 0,6em (ซ้ายและขวา)

เติมอัตโนมัติและแอนิเมชั่น

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

• ระยะขอบ: 0px (บนและล่าง)
• ช่องว่างภายใน: 1em (บนและล่าง), 5% (ซ้ายและขวา)
• แอนิเมชั่นอัตโนมัติ: ON
• ความเร็วแอนิเมชั่นอัตโนมัติ: 3500

CSS ที่กำหนดเอง

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

ชื่อสไลด์

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

เพื่อให้แน่ใจว่าชื่อสไลด์จะไม่สร้างตัวแบ่งบรรทัดบนหน้าจอขนาดเล็ก

ปุ่มสไลด์

position:absolute;
bottom: 1em;
right: 6%;

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

ลากลูกศร

font-size: 30px;
margin-top: -15px;

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

เคล็ดลับ: เพิ่มสีพื้นหลังเดียวกันลงในคอลัมน์เพื่อให้การเปลี่ยนสไลด์ราบรื่นขึ้น

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

• พื้นหลัง: #000000

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

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

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

ผล

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

การเพิ่มแถบเลื่อนข้อความรับรองแบบกะทัดรัดลงในเทมเพลตส่วนหัว

บันทึกโมดูลในไลบรารี Divi

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

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

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

แก้ไขส่วนหัวที่กำหนดเอง

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

การเข้าถึง Divi > ตัวสร้างธีมจากนั้นคลิกที่ไอคอนที่ให้คุณแก้ไข " ส่วนหัวที่กำหนดเอง".

แทรกโมดูลตัวเลื่อนคำรับรองที่บันทึกไว้จากไลบรารี

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

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

เมื่อโหลดแล้ว ให้บันทึกการเปลี่ยนแปลง

ดูสิ่งนี้ด้วย: Divi: วิธีแสดงโมดูลส่วนหัวแบบเต็มหน้าจอแบบเต็มหน้าจอ

ผลสุดท้าย

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

ที่นี่เรามีแถบเลื่อนข้อความรับรองโดยไม่มีภาพพื้นหลังของผู้เขียน

และนี่คือสิ่งที่ดูเหมือนบนมือถือ

ดาวน์โหลด DIVI ทันที !!!

สรุป

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

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

หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...