คู่มือที่มีประโยชน์เกี่ยวกับวิธีการจัดรูปแบบการแบ่งหน้าใน Divi

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

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

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีจัดรูปแบบการแบ่งหน้าใน Divi นี่คือสิ่งที่เราจะไปมากกว่า:

• สิ่งที่ต้องพิจารณาเมื่อจัดรูปแบบการแบ่งหน้าใน Divi
• การจัดรูปแบบโมดูลแกลเลอรี Divi และการแบ่งหน้าโมดูลผลงานที่กรองได้
• รูปแบบการแบ่งหน้าขั้นสูงสำหรับโมดูลแกลเลอรีและโมดูลผลงานที่กรองได้
• การจัดรูปแบบโมดูลบล็อกและการแบ่งหน้าโมดูลผลงาน
• การเพิ่มการแบ่งหน้าที่ซับซ้อนให้กับ Divi โดยใช้ปลั๊กอิน WP-PageNavi
• การจัดรูปแบบการแบ่งหน้า WP-PageNavi ด้วย CSS ที่กำหนดเอง

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

แอบมอง

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

เริ่มต้น

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

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi ที่ติดตั้งและใช้งานอยู่
• ในการทดสอบการออกแบบการแบ่งหน้าของโมดูลต่างๆ คุณจะต้องมีเนื้อหาจำลอง ตัวอย่างเช่น สำหรับการออกแบบการแบ่งหน้าโมดูลพอร์ตโฟลิโอ (หรือพอร์ตโฟลิโอที่กรองได้) คุณจะต้องเพิ่มโครงการประมาณ 12-16 โครงการในธีมของคุณ เพื่อให้คุณมีเนื้อหาเพียงพอเพื่อให้การแบ่งหน้ามีผล สำหรับโมดูลแกลเลอรี คุณจะต้องใช้รูปภาพประมาณ 12-16 รูปเพื่อเติมแกลเลอรี
• หากคุณต้องการใช้ปลั๊กอิน WP-PageNavi คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน นี่คือปลั๊กอินฟรีที่สามารถดาวน์โหลดได้จากไดเรกทอรี WordPress จากภายในแดชบอร์ด WordPress ของเว็บไซต์ของคุณ เพียงไปที่ Plugin > Add New แล้วค้นหา WP-PageNavi
  

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

ตอนนี้คุณพร้อมที่จะเริ่มทดสอบการออกแบบการแบ่งหน้าแล้ว

สิ่งที่ต้องพิจารณาเมื่อจัดรูปแบบการแบ่งหน้าใน Divi

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

แบบอักษรเลขหน้า

การแบ่งหน้าเป็นสถานที่ที่ดีในการแยกตัวออกจากแบบอักษรหลักที่คุณใช้สำหรับไซต์ของคุณ คุณต้องการเลือกแบบอักษรที่ดีที่สุดสำหรับอินเทอร์เฟซผู้ใช้และการนำทาง และเนื่องจากการแบ่งหน้าประกอบด้วยตัวเลขเป็นส่วนใหญ่ คุณจึงต้องแน่ใจว่าแบบอักษรแสดงตัวเลขทั้งหมดที่มีความสูงและความกว้างเท่ากัน (สิ่งที่ผู้เชี่ยวชาญด้านการพิมพ์เรียกว่าซับในและแบบตาราง) รายการโปรดแบบอนุรักษ์นิยมบางส่วนของฉัน ได้แก่ Oxygen, Nunito Sans และ Source Sans Pro และถ้าคุณมีหน้าจำนวนมากในการแบ่งหน้า คุณอาจต้องเพิ่มพื้นที่ว่างด้วยการใช้แบบอักษรย่อ เช่น Fjalla One หรือ Roboto Condensed

รูปแบบตัวอักษรการแบ่งหน้า

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

การเว้นวรรคตัวอักษรการแบ่งหน้า

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

การจัดตำแหน่งข้อความการแบ่งหน้า

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

พื้นที่คลิกได้

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

ขนาดข้อความการแบ่งหน้า

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

ความสูงของเส้นแบ่งหน้า

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

เงาข้อความแบ่งหน้า

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

เพจที่ใช้งานการแบ่งหน้า

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

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

แต่สำหรับการแบ่งหน้าในระดับธีม คุณสามารถรับโซลูชันที่ซับซ้อนได้โดยใช้ปลั๊กอิน WP-PageNavi พร้อม CSS ที่กำหนดเอง (เพิ่มเติมในภายหลัง)

มาเริ่มกันที่วิธีจัดรูปแบบการแบ่งหน้าใน Divi Modules กันก่อน

การจัดรูปแบบโมดูลแกลเลอรี Divi และการแบ่งหน้าโมดูลผลงานที่กรองได้

เมื่อ Divi Builder ทำงานบนหน้าใหม่ ให้สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลพอร์ตโฟลิโอที่กรองได้ลงในแถว ดังที่กล่าวไว้ก่อนหน้านี้ ตรวจสอบให้แน่ใจว่าคุณได้สร้างโปรเจ็กต์ 12-16 โปรเจ็กต์ เพื่อให้คุณเห็นการแบ่งหน้า

ในการตั้งค่าพอร์ตโฟลิโอที่กรองได้ ให้อัปเดตสิ่งต่อไปนี้:

โพสต์จำนวน: 4 (เพื่อให้คุณสามารถดูลิงก์หน้าเพิ่มเติมในการแบ่งหน้า)

แสดงชื่อ: NO
แสดงหมวดหมู่: ไม่

ตามค่าเริ่มต้น Divi จะแสดงการแบ่งหน้า ดังนั้นปล่อยให้ตัวเลือกนั้นตั้งค่าเป็น YES

คุณควรเห็นการแบ่งหน้าที่ด้านล่างขวาของพอร์ตโฟลิโอ

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

เค้าโครง: Grid
แบบอักษรการแบ่งหน้า: Source Sans Pro
รูปแบบตัวอักษรการแบ่งหน้า: TT
การจัดตำแหน่งข้อความการแบ่งหน้า: Center
สีข้อความการแบ่งหน้า: #cccccc
ขนาดตัวอักษรแบ่งหน้า: 4vw (เดสก์ท็อป), 38px (แท็บเล็ตและโทรศัพท์)
การแบ่งหน้าตัวอักษรระยะห่าง: 1vw
ความสูงของเส้นแบ่งหน้า: 2em

จากนั้นคลิกแท็บขั้นสูงและเพิ่มตัวอย่าง CSS ต่อไปนี้ภายใต้ Pagination Active Page :

color: #0096eb !important;

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

ตัวอย่าง CSS ด่วนอื่นๆ

ต่อไปนี้คือข้อมูลโค้ด CSS ที่ง่ายและรวดเร็วบางส่วนในการเปลี่ยนการออกแบบการแบ่งหน้า

หากต้องการลบเส้นขอบเริ่มต้นที่อยู่เหนือการแบ่งหน้า คุณสามารถป้อน CSS ต่อไปนี้ภายใต้ Portfolio Pagination:

border: none;

เพื่อให้การแบ่งหน้าของคุณมีเส้นขอบที่สมบูรณ์ คุณสามารถป้อน CSS ต่อไปนี้ภายใต้ Portfolio Pagination:

border: 2px solid #dddddd;

เพื่อให้การแบ่งหน้าเป็นสีพื้นหลัง คุณสามารถป้อน CSS ต่อไปนี้ภายใต้ Portfolio Pagination:

background: #333333;

ใช้ได้กับ Gallery Module ด้วย

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

รูปแบบการแบ่งหน้าขั้นสูงสำหรับโมดูลแกลเลอรีและโมดูลผลงานที่กรองได้

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

เพื่อแสดงให้เห็น ลองใช้พอร์ตโฟลิโอที่กรองได้อีกครั้ง คราวนี้ อัปเดตตัวเลือกการออกแบบดังต่อไปนี้:

เค้าโครง: Grid
ขนาดข้อความการแบ่งหน้า: 16px
ความสูงของเส้นแบ่งหน้า: 2.5em

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:

CSS Class: pagi-space

ซึ่งจะทำให้ใช้ CSS ของเรากับโมดูลนี้เท่านั้น

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

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

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

โค้ดนี้จะกำหนดรูปแบบการแบ่งหน้าสำหรับทั้งโมดูลพอร์ตโฟลิโอที่กรองได้และโมดูลแกลเลอรี เพียงให้แน่ใจว่าคุณเพิ่มคลาส CSS “pagi-space” ลงในโมดูลเพื่อให้มีผล

นี่คือผลลัพธ์ของโมดูลพอร์ตโฟลิโอที่กรองได้

การจัดรูปแบบโมดูลบล็อกและการแบ่งหน้าโมดูลผลงาน

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

นี่คือลักษณะการแบ่งหน้าเริ่มต้นในหน้าบล็อกถาวรในธีม Divi:

การแบ่งหน้าเดียวกันนี้ถูกใช้โดยโมดูลบล็อกและโมดูลพอร์ตโฟลิโอ

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

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

การเพิ่มการแบ่งหน้าที่ซับซ้อนให้กับ Divi โดยใช้ปลั๊กอิน WP-PageNavi

หากคุณต้องการการแบ่งหน้าขั้นสูงสำหรับธีม Divi ทั้งหมดของคุณ รวมถึงโมดูลบล็อกและโมดูลพอร์ตโฟลิโอ คุณสามารถแทนที่การแบ่งหน้า WordPress เริ่มต้นเป็นชุดอื่นได้โดยใช้ปลั๊กอินยอดนิยมที่เรียกว่า WP-PageNavi ปลั๊กอินนี้ทำงานได้ดีกับ Divi การออกแบบเป็นพื้นฐาน แต่สามารถปรับแต่งได้อย่างง่ายดายโดยใช้ CSS

การเพิ่มปลั๊กอินไปยัง Divi

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

นอกจากนี้ยังจะส่งผลต่อโมดูลบล็อกและโมดูลพอร์ตด้วย

การตั้งค่าปลั๊กอิน

คุณสามารถค้นหาการตั้งค่าปลั๊กอินได้จากแดชบอร์ด WordPress โดยไปที่การตั้งค่า > WP-PageNavi

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

การจัดรูปแบบการแบ่งหน้า WP-PageNavi ด้วย CSS ที่กำหนดเอง

เนื่องจากคุณอาจต้องการจัดรูปแบบการแบ่งหน้าสำหรับธีมทั้งหมด คุณควรเพิ่ม CSS ลงในเครื่องมือปรับแต่งธีมหรือไฟล์ style.css ธีมลูกของคุณ ไปข้างหน้าและวาง CSS ต่อไปนี้ลงในกล่อง CSS เพิ่มเติมของ Theme Customizer:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

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

การจัดรูปแบบ WP-PageNavi ในบล็อกโมดูลและโมดูลพอร์ตโฟลิโอ

ดังที่ได้กล่าวไว้ก่อนหน้านี้ โมดูลบล็อกและโมดูลพอร์ตโฟลิโอจะสืบทอดการนำทางหน้า WordPress เริ่มต้น เนื่องจากสิ่งนี้ถูกแทนที่ด้วยการแบ่งหน้าที่ซับซ้อนใหม่ของ WP-PageNavi โมดูลจะแสดงการแบ่งหน้าใหม่นี้เช่นกัน

คุณสามารถใช้ตัวเลือกการออกแบบข้อความการแบ่งหน้าในตัวเพื่อเพิ่มสไตล์เพิ่มเติมให้กับการแบ่งหน้า

โปรดทราบว่าตัวเลือกบางตัวอาจไม่ทำงานตามที่คาดไว้เมื่อใช้ CSS แบบกำหนดเองภายนอก

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

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

ตัวอย่างการออกแบบในโพสต์นี้มีจุดมุ่งหมายง่ายๆ

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

ไชโย!