Divi ช่วยให้คุณสร้างพื้นที่พร้อมใช้งานได้ไม่จำกัดจำนวนในทันที จากนั้นสามารถเพิ่มแถบด้านข้างลงในหน้าใดก็ได้ ทำให้คุณสามารถสร้างแถบด้านข้างที่ไม่ซ้ำกันสำหรับส่วนต่างๆ ของคุณ เว็บไซต์เว็บ.
วิธีเพิ่มวิดเจ็ต Zonde จาก Divi
ก่อนที่คุณจะเพิ่มโมดูลแถบด้านข้างลงในเพจได้ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบน .ของคุณ เว็บไซต์เว็บ, คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดู .ของคุณ เว็บไซต์เว็บ ในเบื้องหน้าหากคุณลงชื่อเข้าใช้แดชบอร์ด WordPress
เมื่อคุณใช้ Visual Builder คุณสามารถคลิกปุ่ม (+) สีเทาเพื่อเพิ่มโมดูลใหม่ในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาโมดูลแถบด้านข้างในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "แถบด้านข้าง" จากนั้นคลิก "Enter" เพื่อค้นหาและเพิ่มโมดูลแถบด้านข้างโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ตัวอย่างการใช้งาน: การเพิ่มแถบด้านข้างในหน้าบล็อกของคุณ
โมดูลแถบด้านข้างช่วยให้คุณสามารถแทรกแถบด้านข้าง (และวิดเจ็ตในตัวทั้งหมด) ที่ใดก็ได้บนหน้าของคุณ จริงๆแล้วคุณสามารถเพิ่มพื้นที่วิดเจ็ตใดก็ได้โดยใช้โมดูลแถบด้านข้าง สำหรับตัวอย่างนี้ฉันจะแสดงวิธีแทรกแถบด้านข้างที่กำหนดเองลงในหน้าบล็อกของคุณโดยใช้ส่วนพิเศษเพื่อแสดงวิดเจ็ตการค้นหาและโพสต์ล่าสุดบน WordPress
หน้าบล็อกนี้มีส่วนหัวแบบเต็มความกว้างเพื่อแสดงชื่อบล็อกที่ด้านบนสุดของหน้า ด้านล่างโมดูลส่วนหัวแบบเต็มความกว้างเป็นรูปแบบพิเศษที่มีโมดูลบล็อกทางด้านซ้ายและพื้นที่แถบด้านข้างแนวตั้งด้านขวาทางด้านขวา
การใช้ส่วนพิเศษช่วยให้คุณสามารถเพิ่มรูปแบบคอลัมน์ที่ซับซ้อนถัดจากแถบด้านข้างแนวตั้งโดยไม่ต้องเพิ่มตัวแบ่งที่ไม่ต้องการลงในหน้า เหมาะสำหรับบล็อกที่มีแถบด้านข้าง
ก่อนอื่นคุณต้องแน่ใจว่าคุณได้ตั้งค่าวิดเจ็ตไว้ในหน้าวิดเจ็ตของแดชบอร์ด WordPress ของคุณ สำหรับตัวอย่างนี้ฉันกำลังเพิ่มวิดเจ็ต Search และวิดเจ็ตบทความล่าสุดในวิดเจ็ต Sidebar
จากนั้นปรับใช้ Visual Builder เพื่อแก้ไขหน้าบล็อก เพิ่มส่วนพิเศษลงในเพจของคุณ (ด้านล่างส่วนหัวของคุณ) ด้วยเค้าโครงต่อไปนี้
เมื่อคุณเพิ่มส่วนพิเศษลงในหน้าแล้วคุณจะสังเกตเห็นว่าพื้นที่ (ทางด้านซ้าย) มีปุ่ม "เพิ่มโมดูล" สำหรับตัวอย่างนี้เป็นส่วนที่เพิ่มโมดูลบล็อกที่มีเค้าโครงตารางเพื่อแสดงบทความในบล็อก
อีกอัน (ทางด้านขวา) มีปุ่ม "แทรกแถว" พื้นที่ "แทรกโมดูล" แสดงถึงแถบด้านข้างแนวตั้งของคุณ นี่คือที่ที่คุณจะเข้าสู่โมดูลแถบด้านข้าง คุณสามารถเพิ่มโมดูลได้มากที่นี่ในแถวเดียวและโมดูลเหล่านี้จะขยายความกว้างแนวตั้งของส่วนซึ่งอยู่ติดกับโครงสร้างคอลัมน์ที่คุณสร้างถัดจากนั้น ในความเป็นจริงสำหรับตัวอย่างนี้หน้าบล็อกมีโมดูล Email Optin และโมดูล Person อยู่แล้วในส่วนของแถบด้านข้างแนวตั้งของเค้าโครงแบบพิเศษ
ตอนนี้เพิ่มโมดูลแถบด้านข้างไปด้านบนของโมดูลอื่น ๆ ในพื้นที่แถบด้านข้างแนวตั้งของคุณ
ในการตั้งค่าโมดูลของแถบด้านข้างให้ปรับปรุงสิ่งต่อไปนี้:
แท็บเนื้อหา
พื้นที่วิดเจ็ต: เลือกแถบด้านข้าง
แท็บการออกแบบ
การวางแนว: ด้านขวา (เนื่องจากแถบด้านข้างอยู่ด้านขวา)
ลบตัวคั่นเส้นขอบ: ใช่
สีข้อความ:
ขนาดตัวอักษรส่วนหัวสีเข้ม: 26px
ระยะห่างของตัวอักษร
ส่วนหัว: 3px ความสูงของแถวส่วนหัว: 1.1em
แท็บขั้นสูง
ในส่วน Custom CSS ให้เพิ่ม CSS ต่อไปนี้ในกล่องข้อความ Widget สิ่งนี้จะทำให้การออกแบบของวิดเจ็ตแถบด้านข้างตรงกับการออกแบบของไซต์:
พื้นหลัง: #fff; การขยาย: 20px; -basket-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); กล่องเงา: 0 1px 5px rgba (0, 0, 0, 0.1);
บันทึกการตั้งค่า
ตอนนี้คุณจะเห็นว่าโมดูลแถบด้านข้างแสดงองค์ประกอบของวิดเจ็ต Sidebar (ค้นหาและบทความล่าสุด) และแสดงไว้ในพื้นที่แถบด้านข้างแนวตั้งของส่วนพิเศษของคุณ
ตัวเลือกเนื้อหาสำหรับแถบด้านข้าง
ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทุกสิ่งที่ควบคุมสิ่งที่ปรากฏในโมดูลของคุณจะอยู่ในแท็บนี้เสมอ
พื้นที่วิดเจ็ต
โมดูลแถบด้านข้างใช้พื้นที่การสร้างวิดเจ็ตที่คุณสามารถสร้างได้ในแท็บลักษณะที่ปรากฏ> วิดเจ็ต คุณสามารถเลือกพื้นที่วิดเจ็ตแบบกำหนดเองได้จากเมนูแบบเลื่อนลงนี้
ป้ายกำกับผู้ดูแลระบบ
สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder
ตัวเลือกการออกแบบแถบด้านข้าง
ในแท็บออกแบบคุณจะพบตัวเลือกรูปแบบโมดูลทั้งหมดเช่นแบบอักษรสีการปรับขนาดและระยะห่าง นี่คือแท็บที่คุณจะใช้เพื่อเปลี่ยนรูปลักษณ์ของโมดูลของคุณ โมดูล Divi แต่ละโมดูลมีรายการการตั้งค่าการออกแบบมากมายที่คุณสามารถใช้เพื่อเปลี่ยนแปลงอะไรก็ได้
ปฐมนิเทศ
ที่นี่คุณสามารถเลือกได้ว่าจะให้แถบด้านข้างของคุณแสดงด้านใด พารามิเตอร์นี้ควบคุมการวางแนวของข้อความและตำแหน่งของเส้นขอบ
ลบตัวคั่นเส้นขอบ
ที่นี่คุณสามารถลบเส้นขอบสีเทาบาง ๆ ที่แยกแถบด้านข้างออกจากเนื้อหาของหน้าเว็บของคุณ
สีข้อความ
ที่นี่คุณสามารถเลือกได้ว่าจะให้ข้อความของคุณสว่างหรือมืด หากคุณทำงานบนพื้นหลังสีเข้มข้อความของคุณควรเป็นสีอ่อน หากพื้นหลังของคุณเป็นสีอ่อนข้อความของคุณควรมืด
แบบอักษรส่วนหัว
คุณสามารถเปลี่ยนแบบอักษรของข้อความส่วนหัวได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับแบบอักษรที่ยอดเยี่ยมมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และตัวเลือกขีดเส้นใต้
ขนาดตัวอักษรส่วนหัว
คุณสามารถปรับขนาดของข้อความส่วนหัวได้ที่นี่ คุณสามารถลากแถบเลื่อนช่วงเพื่อเพิ่มหรือลดขนาดข้อความของคุณหรือป้อนค่าขนาดข้อความที่ต้องการโดยตรงในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
สีข้อความส่วนหัว
โดยค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือสีเทาเข้ม หากคุณต้องการเปลี่ยนสีของข้อความส่วนหัวให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้
ระยะห่างของตัวอักษรส่วนหัว
ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความส่วนหัวของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
ความสูงของแถวส่วนหัว
ความสูงของเส้นมีผลต่อช่องว่างระหว่างแต่ละบรรทัดของข้อความส่วนหัวของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในฟิลด์ รายการที่อยู่ทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
แบบอักษร Body
คุณสามารถเปลี่ยนแบบอักษรของร่างกายได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับแบบอักษรที่ยอดเยี่ยมมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้
ขนาดแบบอักษร Body
คุณสามารถปรับขนาดตัวอักษรได้ที่นี่ คุณสามารถลากแถบเลื่อนเพื่อเพิ่มหรือลดขนาดข้อความของคุณหรือป้อนค่าของขนาดข้อความที่ต้องการโดยตรงในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยการวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
สีตัวอักษร
โดยค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือสีเทาเข้ม หากคุณต้องการเปลี่ยนสีของข้อความให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้
ระยะห่างของตัวอักษร
ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
ความสูงของเส้นร่างกาย
ความสูงของเส้นมีผลต่อช่องว่างระหว่างข้อความแต่ละบรรทัดในเนื้อหาของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่คุณต้องการในช่องป้อนข้อมูล ที่อยู่ทางขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย
ตัวเลือกแถบด้านข้างขั้นสูง
ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ
รหัส CSS
ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ
ชั้น CSS
ป้อนคลาส CSS ที่เป็นทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้คลาส CSS เพื่อสร้างสไตล์ CSS ที่กำหนดเองได้ คุณสามารถเพิ่มหลายชั้นเรียนโดยคั่นด้วยช่องว่าง สามารถใช้คลาสเหล่านี้ในธีมลูก Divi ของคุณหรือในสไตล์ชีต CSS แบบกำหนดเองที่คุณเพิ่มลงในเพจหรือในเว็บไซต์ของคุณโดยใช้ตัวเลือกธีม Divi หรือการตั้งค่าในหน้า Divi Builder
CSS ที่กำหนดเอง
CSS ที่กำหนดเองยังสามารถนำไปใช้กับโมดูลและภายในของโมดูลได้ ในส่วน CSS ที่กำหนดเองคุณจะพบช่องข้อความที่คุณสามารถเพิ่มสไตล์ชีต CSS ที่กำหนดเองให้กับแต่ละองค์ประกอบได้โดยตรง รายการ CSS ในการตั้งค่าเหล่านี้รวมอยู่ในแท็กสไตล์แล้ว ดังนั้นเพียงป้อนกฎ CSS โดยคั่นด้วยอัฒภาค
ความชัดเจน
ตัวเลือกนี้ช่วยให้คุณควบคุมอุปกรณ์ที่โมดูลของคุณปรากฏ คุณสามารถเลือกที่จะปิดใช้งานโมดูลของคุณบนแท็บเล็ตสมาร์ทโฟนหรือเดสก์ท็อปทีละเครื่อง สิ่งนี้มีประโยชน์หากคุณต้องการใช้ม็อดต่างๆบนอุปกรณ์ต่าง ๆ หรือหากคุณต้องการลดความซับซ้อนของการออกแบบอุปกรณ์เคลื่อนที่โดยการลบองค์ประกอบบางอย่างออกจากหน้า
[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
บทแนะนำ Divi อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
Bonjour
ไม่เหมือนคุณฉันกำลังพยายามลบแถบด้านข้างในหน้าบทความบล็อกของฉันและฉันไม่รู้ว่าจะทำอย่างไรในเวอร์ชัน Divi 4 ใหม่
คุณมีเคล็ดลับหรือไม่?
Merci
Aurélie
สวัสดีและขอขอบคุณสำหรับบทเรียนเหล่านี้
ในตัวอย่างนี้คุณเริ่มต้นด้วยหน้าแบบเต็มความกว้างหรือด้วยเทมเพลตที่มีแถบด้านข้างดั้งเดิม
สวัสดีเซสฉันจำไม่ได้จริงๆ