วิธีการออกแบบพื้นที่วิดเจ็ตโพสต์ล่าสุดที่เลื่อนได้ใน Divi

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

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

แอบมอง

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

ดาวน์โหลดเค้าโครงโพสต์ล่าสุดแบบเลื่อนได้ ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

การสร้างพื้นที่วิดเจ็ตโพสต์ล่าสุด

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

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

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

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

ตอนนี้เรามีพื้นที่วิดเจ็ตแล้ว เรามาเริ่มการออกแบบ Divi กันเลย

การสร้างส่วน "จากบล็อกของเรา" พร้อมพื้นที่วิดเจ็ตโพสต์ล่าสุดที่เลื่อนได้

การออกแบบส่วนหัวเรื่อง

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

ก่อนเพิ่มโมดูล ให้อัปเดตส่วนดังต่อไปนี้:

สีพื้นหลัง: #333333
ช่องว่างภายในที่กำหนดเอง: 0px ด้านล่าง

จากนั้นนำช่องว่างภายในด้านล่างของแถวออกด้วยโดยอัปเดตการตั้งค่าแถว:

ช่องว่างภายในที่กำหนดเอง: 0px ด้านล่าง

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

จากนั้นอัปเดตการตั้งค่าข้อความต่อไปนี้:

สำหรับเนื้อหา ให้เพิ่ม html ส่วนหัว h2 ต่อไปนี้:

<h2>From our Blog</h2>

จากนั้นอัปเดตการตั้งค่าข้อความต่อไปนี้:

หัวข้อ 2 แบบอักษร: Roboto
ส่วนหัว 2 รูปแบบตัวอักษร: TT
หัวเรื่อง 2 สีข้อความ: #ffffff
หัวเรื่อง 2 ขนาดข้อความ: 40px
หัวเรื่อง 2 ระยะห่างตัวอักษร: 2px

ที่ดูแลส่วนหัวของเลย์เอาต์ของเรา ตอนนี้ได้เวลาสร้างเค้าโครงที่เหลือโดยใช้ส่วนพิเศษ

การสร้างแผนกพิเศษ

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

ไปข้างหน้าและเพิ่มส่วนพิเศษด้วยเค้าโครงคอลัมน์แถบด้านขวาดังนี้:

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

ก่อนเพิ่มโมดูล มาอัปเดตการตั้งค่าส่วนและแถวของเราก่อน

การปรับแต่งการตั้งค่ามาตรา

เปิดการตั้งค่าสำหรับส่วนพิเศษและอัปเดตสิ่งต่อไปนี้:

สีพื้นหลัง: #333333
ความกว้างของรางน้ำ: 2
ช่องว่างภายในที่กำหนดเอง: 0px ด้านบน
คอลัมน์ที่ 2 Custom Padding: 0px บน, 0px bottom

ปรับแต่งการตั้งค่าแถว

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

ความสูง: 640px
ความกว้างขอบด้านบน: 8px
สีขอบบน: #444444
ความกว้างขอบล่าง: 8px
สีขอบล่าง: #444444

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

การเพิ่มโมดูลบล็อก

ในแถวหนึ่งคอลัมน์ทางด้านซ้าย ให้เพิ่มโมดูลบล็อก

จากนั้นอัปเดตการตั้งค่าโมดูลบล็อกดังนี้:

กระทู้จำนวน: 2

เค้าโครง: Grid
แบบอักษรของชื่อเรื่อง: Roboto
แบบอักษร Meta: Roboto
น้ำหนักแบบอักษร Meta: เบา
รูปแบบตัวอักษร Meta: TT
แบบอักษรเลขหน้า: Roboto
รูปแบบตัวอักษรการแบ่งหน้า: TT
สีข้อความการแบ่งหน้า: #ffffff
ขนาดข้อความการแบ่งหน้า: 18px
ระยะห่างของตัวอักษรแบ่งหน้า: 2px

การเพิ่มพื้นที่วิดเจ็ตโพสต์ล่าสุดที่เลื่อนได้

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

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

จากนั้นอัปเดตการออกแบบข้อความชื่อและเนื้อหาดังนี้:

แบบอักษรของชื่อเรื่อง: Roboto
รูปแบบตัวอักษรของชื่อเรื่อง: TT
สีข้อความของชื่อเรื่อง: #ffffff
ระยะห่างของตัวอักษรชื่อเรื่อง: 2px
แบบอักษรของร่างกาย: Roboto
รูปแบบตัวอักษรของร่างกาย: ขีดเส้นใต้

ถัดไป ซ่อนตัวคั่นเส้นขอบดังนี้:

แสดงตัวคั่นชายแดน: NO

จากนั้นให้โมดูลแถบด้านข้างมีความสูงสูงสุดและช่องว่างภายในแบบกำหนดเองดังนี้:

ความสูงสูงสุด: 640px
ช่องว่างภายในแบบกำหนดเอง: บน 30px ล่าง 30px ขวา 5%

ความสูงสูงสุด 640px ตรงกับความสูงที่กำหนดเอง 640px ที่กำหนดให้กับแถวที่อยู่ติดกัน

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

ล้นแนวตั้ง: เลื่อน

ผลสุดท้าย

แค่นั้นแหละ! ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

ตัวเลือกโบนัส: การเพิ่ม CSS แบบกำหนดเองลงในแถบเลื่อนการออกแบบ (ไม่รองรับเบราว์เซอร์ทั้งหมด)

การใส่สไตล์แถบเลื่อนใน WordPress เป็นเรื่องที่ลำบากหากคุณต้องการการสนับสนุนข้ามเบราว์เซอร์ ดังนั้น ในกรณีส่วนใหญ่ คุณจะต้องปล่อยให้มันเป็นสไตล์เริ่มต้นของเบราว์เซอร์และเรียกมันว่าวัน แต่ถ้าคุณต้องการปรับแต่งแถบเลื่อนให้ตรงกับการออกแบบหน้าเว็บของคุณ คุณสามารถเพิ่ม CSS แบบกำหนดเองได้ ขออภัย การสนับสนุนเบราว์เซอร์จำกัดเฉพาะเบราว์เซอร์ที่รองรับคุณสมบัติ CSS นำหน้า ::webkit เท่านั้น (โดยทั่วไปคือ Safari และ Chrome) นี่คือวิธีการทำ

เปิดการตั้งค่าของส่วนพิเศษและเพิ่มคลาส CSS ต่อไปนี้:

CSS คลาส: cust-scroll

จากนั้นเปิดโมดอลการตั้งค่าเพจและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในเพจ

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

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

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

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

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

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

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

ไชโย!