วิธีสร้างแถบเลื่อนด้านข้างแบบเลื่อนใน Divi

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

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

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

ไปกันเถอะ!

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

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

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "เลือกเค้าโครงที่สร้างไว้ล่วงหน้า"
   
4. เลือก Event Layout Pack และคลิกเพื่อใช้เลย์เอาต์ Event Home Page
   

วิธีสร้างแถบเลื่อนด้านข้างแบบเลื่อนใน Divi

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

การสร้างมาตรา

ขั้นแรก ให้เพิ่มส่วนปกติใหม่ลงในเพจ

จากนั้นย้ายส่วนที่ด้านบนสุดของหน้า

การตั้งค่ามาตรา

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

• ตำแหน่ง: คงที่
• ดัชนี Z: 9999

ใต้แท็บออกแบบ ให้อัปเดตขนาดและระยะห่างดังนี้:

• ความกว้าง: 350px (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)
• ส่วนสูง: 100%
• ช่องว่างภายใน: บน 100px ด้านล่าง 0px

ช่องว่างภายในคือเพื่อให้มีที่ว่างสำหรับส่วนหัวที่ด้านบนของหน้า

ถัดไป ภายใต้แท็บขั้นสูง ให้ส่วน CSS Class:

• CSS Class: et-push-sidebar

เมื่อคลาส css เข้าที่ ให้ส่วนสีพื้นหลัง:

• สีพื้นหลัง: #1a1e36

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

• ความกว้างของเส้นขอบขวา: 2px
• สีขอบขวา: #eeeeee

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

การสร้างปุ่มสลับแถบด้านข้าง

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

ไปกันเถอะ

การสร้างแถวสำหรับปุ่ม

สร้างแถวหนึ่งคอลัมน์ใหม่ภายในส่วน/แถบด้านข้าง

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ภายใต้แท็บ ขั้นสูง ให้อัปเดตตัวเลือกตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ดัชนี Z: 1

การสร้างไอคอนปิด "X"

ในการสร้างไอคอนปิด "X" ให้เพิ่มโมดูลการนำเสนอลงในแถว การเพิ่มโมดูลใหม่โดยใช้ Modal ของ Layers อาจทำได้ง่ายกว่า เนื่องจากสิ่งต่างๆ จะคลิกได้ยากเล็กน้อย

เนื้อหา

จากนั้นเปิดการตั้งค่าการนำเสนอ ใต้แท็บเนื้อหา นำชื่อเรื่องและเนื้อหาออก แล้วเพิ่มไอคอน X ลงในประกาศ

• ใช้ไอคอน: ใช่
• ไอคอน: x (ดูภาพหน้าจอ)

ออกแบบ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สีไอคอน: #eeeeee
• ตำแหน่งไอคอนรูปภาพ: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40px
• ความกว้าง: 50px

ถัดไป นำไอคอนลงมาเล็กน้อยโดยเพิ่มคุณสมบัติการแปลการแปลงต่อไปนี้:

• แปลงแปล X: 100px
• แปลงแปล Y : -10px

ขั้นสูง

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

• ปิดการใช้งานบน: แท็บเล็ตและเดสก์ท็อป

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

• CSS คลาส: et-slide-push-close
• ตำแหน่ง: คงที่
• ตำแหน่ง: บนขวา

ที่ดูแลปุ่มไอคอนปิด "X"

การสร้างปุ่มสลับแถบด้านข้างหลัก

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

เนื้อหา

ให้อัพเดต Title และคลิกเพื่อใช้ไอคอนลูกศรลง

• ชื่อเรื่อง: Event Info
• ใช้ไอคอน: ใช่
• ไอคอน: ลูกศรลง (ดูภาพหน้าจอ)

ถัดไป เพิ่มสีพื้นหลังให้กับการนำเสนอ

• สีพื้นหลัง: #eeeeee

ออกแบบ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สีไอคอน: #1a1e36
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 25px
• แบบอักษรของชื่อเรื่อง: สะพานลอย
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: TT
• สีข้อความของชื่อเรื่อง: #1a1e36
• ระยะห่างของตัวอักษรชื่อเรื่อง: 2px
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em
• ช่องว่างภายใน: 0.6em บน, 1em ซ้าย, 1em right
• มุมโค้งมน: 5px ที่มุมทั้งสองด้านล่าง

ในการวางตำแหน่งและหมุนการนำเสนอนอกส่วน ให้ใช้ตัวเลือกการแปลงดังนี้:

• แปลงแปล Y : 100px
• แปลงร่างหมุน Z : -90deg
• กำเนิดการแปลง: บนขวา

ขั้นสูง

ภายใต้แท็บขั้นสูง ให้อัปเดตสิ่งต่อไปนี้:

• CSS คลาส: et-slide-push-toggle
• ตำแหน่ง: Absolute
• ตำแหน่ง: Right Center

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

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

หากต้องการเพิ่มโค้ด ขั้นแรกให้เพิ่มโมดูลโค้ดลงในคอลัมน์เดียวกัน

จากนั้นวางโค้ดต่อไปนี้ลงในโมดูลโค้ด

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

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

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

ในการสร้างแถวเนื้อหาของแถบด้านข้าง ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ใต้แถวแรกในแถบด้านข้าง/ส่วน

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

เปิดการตั้งค่าของแถวใหม่และอัปเดตข้อมูลต่อไปนี้:

• ความกว้าง: 100%
• ส่วนสูง: 100%
• Padding: 5% บน, 5% ด้านล่าง, 5% ซ้าย, 5% ขวา

ภายใต้แท็บ ขั้นสูง ให้อัปเดตตัวเลือกโอเวอร์โฟลว์ดังนี้:

• แนวนอนล้น: เลื่อน (เดสก์ท็อปและแท็บเล็ต), อัตโนมัติ (โทรศัพท์)
• ล้นแนวตั้ง: เลื่อน (เดสก์ท็อปและแท็บเล็ต), อัตโนมัติ (โทรศัพท์)

การเติมแถบด้านข้างด้วยเนื้อหา/โมดูล

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

ผลสุดท้าย

ตรวจสอบผลสุดท้ายในหน้าสด

การเพิ่มแถบเลื่อนด้านข้างแบบเลื่อนไปยังเทมเพลตหน้า

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

บันทึกเค้าโครงส่วนไปยังห้องสมุด Divi

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

สร้างเทมเพลตหน้าใหม่

ถัดไป ไปที่ตัวสร้างธีม และสร้างเทมเพลตใหม่และกำหนดเทมเพลตนั้นให้กับทุกหน้า

การเพิ่มแถบเลื่อนด้านข้างไปยังเทมเพลตหน้า

ถัดไป คลิกเพื่อแก้ไขเทมเพลตของเพจ

ภายในตัวแก้ไขเค้าโครงเทมเพลต ให้เพิ่มส่วนเต็มความกว้างใหม่

จากนั้นแทรกโมดูลเนื้อหาแบบเต็มความกว้างลงในส่วน

คลิกถัดไปเพื่อ สร้างส่วนใหม่เหนือส่วนเต็มความกว้าง จากนั้นคลิกแท็บ เพิ่มจากไลบรารี และเลือกเลย์เอาต์ส่วน Slide Push Sidebar จากไลบรารี

เมื่อเสร็จแล้ว คุณสามารถแก้ไขแถบด้านข้างได้ตามต้องการโดยใช้ตัวแก้ไขโครงร่าง

บันทึกการตั้งค่าตัวสร้างธีม

ตรวจสอบให้แน่ใจว่าได้บันทึกการเปลี่ยนแปลงไปยังตัวสร้างธีม

ตอนนี้ทุกหน้าของคุณจะมีแถบด้านข้าง

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

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

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

ไชโย!