วิธีเพิ่มประสิทธิภาพแถบด้านข้างของคุณบนมือถือโดยใช้ Divi Theme Builder

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

ในบทช่วยสอนนี้ เราจะพูดถึงวิธีที่คุณสามารถใช้ Divi Theme Builder เพื่อเพิ่มประสิทธิภาพแถบด้านข้างของคุณบนหน้าจอมือถือ นี่คือบางสิ่งที่เราจะกล่าวถึงในบทความนี้:

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

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

แอบมอง

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

ดาวน์โหลดเทมเพลตฟรีพร้อมแถบด้านข้างที่ปรับให้เหมาะสมบนมือถือ

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

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

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

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

ดาวน์โหลด

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

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

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

Letis ได้รับการกวดวิชาเราจะ?

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

ในการเริ่มต้น คุณจะต้องติดตั้งและเปิดใช้งานธีม Divi ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด

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

หลังจากนั้นคุณก็พร้อมที่จะไป

วิธีเพิ่มประสิทธิภาพแถบด้านข้างของเทมเพลต Divi บนมือถือ

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

การสร้างเทมเพลตด้วยแถบด้านข้าง

การนำเข้า Divi Theme Builder Pack #3

ในการเริ่มต้นใช้งาน เราจะใช้ Divi Theme Builder Pack #3 เพื่อเริ่มต้นการออกแบบไซต์ของเราอย่างรวดเร็ว จากนั้น เราจะใช้เทมเพลตใดเทมเพลตหนึ่งเพื่อเพิ่มแถบด้านข้าง เราจะปรับให้เหมาะกับอุปกรณ์เคลื่อนที่

เมื่อคุณดาวน์โหลดแพ็คแล้ว ให้เปิดเครื่องรูดโฟลเดอร์

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Builder จากนั้นคลิกไอคอนการพกพาที่เมนูด้านบนขวาของหน้า จากโมดอลการพกพา ให้เลือกแท็บการนำเข้าและเลือกไฟล์ divi-theme-builder-pack-3-all.json จากโฟลเดอร์ที่คุณดาวน์โหลดมาก่อนหน้านี้ จากนั้นคลิกปุ่มนำเข้า

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

คุณจะเห็นว่าเทมเพลตทั้งหมดถูกนำเข้าไปยังตัวสร้างธีมแล้ว

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

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

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

ตอนนี้คุณจะมีพื้นที่ทางด้านขวาสำหรับแถบด้านข้างของคุณ

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

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

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

การตั้งค่าคอลัมน์แถบด้านข้าง

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

• สีพื้นหลัง: #f2f5f9
• ช่องว่างภายใน: บน 25px ล่าง 25px ซ้าย 25px ขวา 25px

การสร้างเนื้อหาแถบด้านข้างด้วยโมดูล Divi และวิดเจ็ต WordPress

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

• ข้อมูลผู้แต่ง (ชื่อ รูป ประวัติ)
• ปุ่มติดตามโซเชียลมีเดีย
• การเลือกรับอีเมล
• ลิงค์ไปยังสินค้าและ/หรือบริการ
• โฆษณา
• หมวดหมู่
• กระทู้ล่าสุด/ยอดนิยม

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

1. โมดูลการค้นหา – นี่จะทำหน้าที่เป็นแบบฟอร์มการค้นหา
2. โมดูล Optin อีเมล - จะทำหน้าที่เป็นแบบฟอร์มการเลือกอีเมล
3. โมดูลข้อความ - นี่จะเป็นชื่อของปุ่มติดตามโซเชียลมีเดีย
4. โมดูลติดตามโซเชียลมีเดีย - จะแสดงปุ่มติดตามโซเชียลมีเดีย
5. โมดูลข้อความ (พร้อมรูปภาพ bg) – จะทำหน้าที่เป็นตัวอย่างโฆษณาสำหรับแถบด้านข้าง
6. โมดูล Blurb (พร้อมเนื้อหาผู้เขียน) – จะทำหน้าที่เป็นพื้นที่ข้อมูลผู้แต่งของแถบด้านข้าง
7. โมดูลข้อความ – จะทำหน้าที่เป็นชื่อสำหรับโมดูลบล็อกด้านล่าง
8. โมดูลบล็อก – สิ่งนี้จะทำหน้าที่เป็นเนื้อหาโพสต์ล่าสุด/เด่นบนแถบด้านข้าง

การดึงวิดเจ็ต WordPress โดยใช้โมดูลแถบด้านข้าง

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

ลากโมดูลแถบด้านข้างจากแถวและวางไว้ด้านล่างโมดูล Optin อีเมล

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

การใช้พื้นที่วิดเจ็ตหลายรายการ

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

หากต้องการสร้างวิดเจ็ตหลายรายการ ให้เปิดแท็บใหม่และตรงไปที่แดชบอร์ดของ WordPress ไปที่ ลักษณะที่ปรากฏ > วิดเจ็ต

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

ทำซ้ำขั้นตอนเพื่อสร้างพื้นที่วิดเจ็ตใหม่ที่ชื่อว่า "คลังข้อมูล" จากนั้นลาก Widget คลังข้อมูลไปยังพื้นที่วิดเจ็ตคลังข้อมูล

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

ทำซ้ำโมดูลแถบด้านข้าง (เพื่อให้มีการออกแบบ)

อัปเดตโมดูลแถบด้านข้างที่ซ้ำกันเพื่อดึงในคลัง Widget Area

ควบคุมระยะห่างระหว่างโมดูลแถบด้านข้าง

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

• ขอบด้านล่าง: 0px (เดสก์ท็อป), 15px (แท็บเล็ต)

จากนั้นคลิกไอคอนการตั้งค่าเพิ่มเติม (หรือเมนูคลิกขวา) บนตัวเลือกระยะขอบ จากนั้นเลือก "ขยายระยะขอบ"

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

จากนั้นเราสามารถเพิ่มระยะห่างระหว่างโมดูลโดยใช้โมดูลตัวแบ่ง

การเพิ่มประสิทธิภาพแถบด้านข้างบนมือถือ

การซ่อนแถบด้านข้างบนมือถือ

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

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

• ปิดการใช้งานบน: แท็บเล็ต, โทรศัพท์

การดำเนินการนี้จะซ่อนแถบด้านข้างทั้งหมดบนแท็บเล็ตและจอแสดงผลมือถือ

การซ่อนเนื้อหาแถบด้านข้างบางส่วนบนมือถือ

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

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

• ปิดการใช้งานบน: โทรศัพท์, แท็บเล็ต

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

ดูตัวอย่างผลลัพธ์ในหน้าบล็อก

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

ตรวจสอบให้แน่ใจว่าคุณได้เลือกหน้าโพสต์ภายใต้ ลักษณะที่ปรากฏ > การอ่าน

ผลลัพธ์

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

หลีกเลี่ยงเนื้อหาจากแถบด้านข้างและส่วนท้ายที่ซ้ำกันบนมือถือ

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

การซ่อนองค์ประกอบภายในโมดูลเพื่อลดเนื้อหาบนมือถือ

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

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

ทำให้เนื้อหาในแถบด้านข้างตอบสนอง

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

ปรับขนาดข้อความบนมือถือ

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

ปรับระยะห่าง/ตัวแบ่งบนมือถือ

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

ตัวอย่างเช่น คุณสามารถเปลี่ยนระยะขอบด้านบนและด้านล่างของตัวแบ่งจาก 30px เป็น 15px บนแท็บเล็ตและโทรศัพท์

การเปลี่ยนลำดับการเรียงซ้อนของแถบด้านข้างบนมือถือ

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

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

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

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

order: 2;

หากคุณยังไม่ได้เดา ข้อมูลโค้ดเล็กๆ นี้จะเปลี่ยนลำดับจากค่าเริ่มต้น (“1”) เป็นค่า “2” ซึ่งทำให้ทั้งคอลัมน์/แถบด้านข้างซ้อนอยู่ใต้/หลังคอลัมน์ที่มีเนื้อหาหลัก

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

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

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

สำหรับข้อมูลเพิ่มเติม โปรดดูคู่มือการใช้แถบด้านข้างกับ Divi Theme Builder

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

ไชโย!