วิธีลบแถบด้านข้างจาก Divi

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

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

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

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

การลบแถบด้านข้างบนหน้าโดยใช้การตั้งค่าหน้า Divi

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

สำหรับหน้าหรือโพสต์ที่ไม่ได้ใช้ Divi Builder เค้าโครงหน้าเริ่มต้นจะมีแถบด้านข้างทางขวาซึ่งมีลักษณะดังนี้:

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

การดำเนินการนี้จะนำแถบด้านข้างของโพสต์หรือเพจนั้นออก

การลบแถบด้านข้างในหน้าร้านค้า WooCommerce หน้าหมวดหมู่และหน้าผลิตภัณฑ์โดยใช้ตัวเลือกธีม Divi

หากคุณติดตั้ง WooCommerce ไว้ คุณจะพบตัวเลือกสองสามตัวเลือกภายในตัวเลือกธีม Divi เพื่อเปลี่ยนเลย์เอาต์ของหน้า WC Shop, Category และ Product

หากต้องการลบแถบด้านข้างในหน้าร้านค้าและหมวดหมู่ ให้ไปที่ Divi > ตัวเลือกธีม ใต้แท็บทั่วไป ให้ค้นหาตัวเลือกที่มีข้อความว่า "เค้าโครงหน้าร้านค้าและหมวดหมู่สำหรับ WooCommerce" และเปลี่ยนเค้าโครงเป็น "ไม่มีแถบด้านข้าง" หรือ "เต็มความกว้าง"

หากต้องการลบแถบด้านข้างสำหรับหน้าสินค้า ให้ไปที่ Divi > ตัวเลือกธีม เลือกแท็บตัวสร้าง ภายใต้ Post Type Integration ให้เลือก "No Sidebar" Product Layout จากดรอปดาวน์

การลบแถบด้านข้างโดยการสร้างเทมเพลตที่กำหนดเองโดยใช้ตัวสร้างธีม

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

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

การสร้างเทมเพลตการโพสต์บล็อกแบบเต็มความกว้างโดยใช้ Divi Builder

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

ต่อไปนี้คือตัวอย่างโดยย่อของวิธีดำเนินการนี้:

ขั้นแรก สร้างเทมเพลตใหม่และกำหนดเทมเพลตให้กับโพสต์ทั้งหมด

จากนั้นเพิ่มเนื้อหาที่กำหนดเองลงในเทมเพลต

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

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

คุณสามารถใช้โมดูลรูปภาพเพื่อดึงรูปภาพเด่นเป็นเนื้อหาแบบไดนามิก

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

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

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

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์ของเราเกี่ยวกับวิธีออกแบบเทมเพลตบล็อกโพสต์ด้วย Divi's Theme Builder

การสร้างเทมเพลตหน้าผลิตภัณฑ์ WooCommerce แบบเต็มความกว้างโดยใช้ Divi Builder

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

ในการดำเนินการนี้ เพียงสร้างเทมเพลตใหม่และกำหนดเทมเพลตให้กับ "ผลิตภัณฑ์ทั้งหมด"

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

จากนั้นใช้ Divi Builder เพื่อรวมโมดูล Woo แบบไดนามิกเพื่อออกแบบเทมเพลตหน้าผลิตภัณฑ์

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

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์ของเราเกี่ยวกับวิธีสร้างเทมเพลตหน้าผลิตภัณฑ์ Woo ทั่วทั้งไซต์

การสร้างเทมเพลตหน้าเก็บถาวรแบบเต็มโดยใช้ Divi Builder

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

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

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

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

การสร้างเทมเพลตหน้าแบบเต็มความกว้าง 404 โดยใช้ Divi Builder

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

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

การสร้างเทมเพลตหน้าการค้นหาแบบเต็มความกว้างโดยใช้ Divi Builder

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

1: ชื่อโพสต์/ที่เก็บถาวรเป็นเนื้อหาแบบไดนามิก

2: โมดูลบล็อกเพื่อแสดงโพสต์สำหรับหน้าปัจจุบัน

3: โมดูลการค้นหาเพื่อให้ผู้ใช้สามารถค้นหาต่อได้ตามต้องการ

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

อย่าสร้างเทมเพลตเนื้อหาแบบเต็มความกว้างสำหรับทุกหน้า เว้นแต่คุณจะมีเหตุผลเฉพาะ

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

สำหรับข้อมูลเพิ่มเติม โปรดดูเอกสารประกอบเกี่ยวกับการสร้างเทมเพลตเนื้อหาส่วนกลาง

นำแถบด้านข้างเริ่มต้นออกด้วย Custom CSS

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

ไปที่ Divi > ตัวเลือกธีม ใต้แท็บทั่วไป ให้วางโค้ดต่อไปนี้ในกล่อง CSS แบบกำหนดเองที่ด้านล่างของหน้า:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

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

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

ฉันหวังว่าคุณจะพบว่าสิ่งนี้มีประโยชน์สำหรับไซต์ของคุณและโครงการในอนาคต

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

ไชโย!