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

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

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

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

แอบมอง

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

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

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

ดาวน์โหลดเลย์เอาต์และเทมเพลตฟรี

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

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

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

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

ดาวน์โหลด

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

นำเข้าเค้าโครงไปยัง Divi Library

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ มันจะเป็นไฟล์ JSON ชื่อ “divi-short-testimonial-slider-module-layout.json”

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

นำเข้าเทมเพลตส่วนหัวไปยังตัวสร้างธีม Divi

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

จากนั้นใช้ไอคอนการพกพาที่ด้านบนขวาของหน้าเพื่อนำเข้าไฟล์ JSON มันจะเป็นไฟล์ชื่อ “divi-short-testimonial-slider-header-template.json”

ไปกวดวิชากันเถอะ

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

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

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

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

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

จากนั้นเพิ่มโมดูลตัวเลื่อนในแถว

แก้ไขสไลด์

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

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

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

• หัวข้อ: “Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget”
• ข้อความปุ่ม: อ่านทั้งหมด
• ร่างกาย: — Tatiana Gagelman

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

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

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

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

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

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

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

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

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

• พื้นหลังไล่ระดับสีซ้าย: #000000
• ไล่สีพื้นหลังด้านขวา: #000000
• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: กลางซ้าย
• การผสมผสานภาพพื้นหลัง: ความส่องสว่าง

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

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

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

โอเวอร์เลย์

• ใช้การซ้อนทับพื้นหลัง: ใช่
• พื้นหลังซ้อนทับสี: 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
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.05em
• แบบอักษรของปุ่ม: Josefin Sans
• ระยะขอบของปุ่ม: ด้านบน 0px, ด้านล่าง 0px
• ปุ่ม Padding: 0px บน, 0px ล่าง, 0.6em ซ้าย, 0.6em right

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

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

• ขอบ: 0px บน, 0px ล่าง
• Padding: บน 1em, 1em ล่าง, 5% ซ้าย, 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 Library ก่อน คุณสามารถทำได้โดยวางเมาส์เหนือโมดูลตัวเลื่อนแล้วคลิกไอคอน "บันทึกลงในไลบรารี" จากนั้นตั้งชื่อเลย์เอาต์และคลิกปุ่ม "บันทึกไปที่ห้องสมุด"

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

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

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

ไปที่ Divi > Theme Builder จากนั้นคลิกเพื่อแก้ไขส่วนหัวที่กำหนดเองสำหรับเทมเพลต

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

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

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

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

ผลสุดท้าย

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

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

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

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

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

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

ไชโย!