วิธีลบ Divi Sidebar Border

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

แถบด้านข้าง Divi เริ่มต้น

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

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

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

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

การลบหรือจัดรูปแบบขอบแถบด้านข้างของ Divi ด้วย Code

ขั้นแรก มาดูวิธีการลบหรือจัดรูปแบบเส้นขอบของแถบด้านข้างของธีม Divi โดยเพิ่มโค้ดลงใน Divi

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

นี่คือ CSS ที่คุณต้องการ:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

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

วางโค้ดลงในฟิลด์ CSS ที่กำหนดเอง และบันทึกการเปลี่ยนแปลง

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

วิธีใช้ตัวสร้างธีมของ Divi เพื่อลบ Divi Sidebar Border โดยไม่ต้องใช้โค้ด

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

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

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

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

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

โมดูลแถบด้านข้าง Divi

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

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

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

ใช้การตั้งค่านี้หากคุณต้องการให้แสดงเส้นขอบของแถบด้านข้าง การจัดตำแหน่งไม่สำคัญว่าคุณต้องการปิดใช้งานเส้นขอบหรือไม่ ฉันแน่ใจว่าคุณสังเกตเห็นการสลับภายใต้กล่องดรอปดาวน์ Alignment

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

สุดท้าย เลือก บันทึกการเปลี่ยนแปลง ก่อนออกจาก Divi Theme Builder ตอนนี้จะแสดงเนื้อหาที่กำหนดเองสำหรับหน้าบล็อก

หน้าบล็อกของฉันแสดงแถบด้านข้างโดยไม่มีเส้นขอบ แน่นอนว่ายังมีอีกสองสามสิ่งที่คุณทำได้หากต้องการออกแบบให้ดีขึ้น

การสร้างขอบแถบด้านข้าง Divi แบบกำหนดเอง

หากคุณไม่ต้องการใช้ธีม Divi เพื่อลบเส้นขอบของแถบด้านข้าง แต่ไม่ต้องการเส้นขอบ WordPress มาตรฐาน คุณสามารถสร้างเส้นขอบของแถบด้านข้างแบบกำหนดเองได้โดยใช้โมดูลแถบด้านข้างของ Divi

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

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

หน้าบล็อกของฉันจะแสดงเส้นขอบของแถบด้านข้าง Divi ที่กำหนดเองแล้ว

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

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

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

บทสรุป

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

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

ภาพเด่นโดย Andrew Rybalko / shutterstock.com