โมดูลเมนูแบบเต็มความกว้างของ Divi ช่วยให้คุณสามารถวางเมนูการนำทางที่ใดก็ได้บนหน้า สามารถใช้เพื่อเพิ่มเมนูหน้าที่สองในเพจหรืออาจใช้ร่วมกับฟีเจอร์ Blank Page เพื่อย้ายการนำทางหลักไปที่ด้านล่างของเพจ ตัวอย่างเช่นคุณสามารถย้ายเมนูของคุณไปด้านล่างส่วนแรกเพื่อรองรับผู้ที่มีภาพเริ่มต้นขนาดใหญ่ โดยพื้นฐานแล้วสิ่งนี้จะช่วยให้การนำทางส่วนหัวของคุณเลื่อนไปรอบ ๆ หน้าโดยใช้ตัวสร้าง!
วิธีเพิ่มโมดูลเมนูแบบเต็มหน้าจอในหน้าของคุณ
ก่อนที่คุณจะเพิ่มโมดูลเมนูเต็มความกว้างลงในเพจได้ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบน .ของคุณ เว็บไซต์เว็บ, คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม เปิดใช้ Visual Builder เมื่อคุณเรียกดู .ของคุณ เว็บไซต์เว็บ ในเบื้องหน้าหากคุณลงชื่อเข้าใช้แดชบอร์ด WordPress
เมื่อคุณเข้าสู่ Visual Builder แล้วคุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ในเพจของคุณ โมดูลเต็มความกว้างใหม่สามารถเพิ่มได้เฉพาะในส่วนเต็มความกว้างเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มส่วนเต็มความกว้างให้กับเพจของคุณก่อน เรามีบทเรียนที่ยอดเยี่ยมเกี่ยวกับการใช้องค์ประกอบส่วน Divi
ค้นหาโมดูลเมนูแบบเต็มความกว้างในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "Fullwith menu" หรือ "full width menu" (ขึ้นอยู่กับรุ่นของคุณ) จากนั้นคลิก Enter เพื่อค้นหาโดยอัตโนมัติและเพิ่มโมดูลเมนูแบบเต็มความกว้าง ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ตัวอย่างการใช้งาน: การเพิ่มเมนูแบบเต็มความกว้างใต้ส่วนหัวของหน้า
สำหรับตัวอย่างนี้ฉันจะแสดงวิธีเพิ่มเมนูแบบเต็มความกว้างใต้ส่วนหัวของหน้า
นี่คือตัวอย่าง:
เนื่องจากเมนูแบบเต็มหน้าใหม่นี้จะแทนที่เมนูนำทางหลักเริ่มต้นจึงจำเป็นต้องเลือกเทมเพลตหน้าว่างเพื่อไม่ให้เมนูการนำทางเริ่มต้นปรากฏที่ด้านบนของหน้านอกเหนือจากเมนูแบบเต็มความกว้าง ที่ฉันจะเพิ่ม
ในการแก้ไขเทมเพลตเพจของคุณไปที่ตัวแก้ไขเพจของคุณแล้วเลือกเทมเพลต "เพจว่าง" ในพื้นที่คุณสมบัติของเพจของแถบด้านข้างทางขวา
เนื่องจากโมดูลนี้จะแสดงเมนูที่มีอยู่แล้วจึงเป็นสิ่งสำคัญที่คุณต้องสร้างเมนูนี้ก่อนที่จะเพิ่มลงในโมดูลเมนูแบบเต็มความกว้าง
เมื่อคุณสร้างเมนูของคุณแล้วให้ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนเต็มความกว้างที่ด้านล่างส่วนหัวของหน้า จากนั้นเพิ่มโมดูลเมนูแบบเต็มความกว้างในส่วน
อัพเดตการตั้งค่าเมนู Fullwidth ดังนี้:
ตัวเลือกเนื้อหา
เมนู: [เลือกเมนูที่ควรใช้ในโมดูล] บริบท: # 333333
ตัวเลือกการออกแบบ
สีข้อความ: การวางแนวข้อความเบา: เมนูกลางแบบอักษร: เมนู Roboto ขนาดตัวอักษร: 20px
ว่ามัน!
เคล็ดลับ : คุณสามารถใช้ตัวเลือกมุมมองใต้แท็บขั้นสูงเพื่อซ่อนเมนูนี้บนมือถือและแสดงเมนูอื่นเหนือส่วนหัวเพื่อให้ผู้ใช้มือถือสามารถดูเมนูได้โดยไม่ต้องเลื่อนหน้าลง .
ตัวเลือกเนื้อหาเมนูแบบเต็มตัว
ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทั้งหมดที่ควบคุม สิ่งที่ ปรากฏในโมดูลของคุณจะพบได้ในแท็บนี้เสมอ
เมนู
เลือกเมนูที่จะใช้ในโมดูล คุณสามารถสร้างเมนูใหม่โดยใช้หน้า ลักษณะ> เมนู จากแดชบอร์ด WordPress ของคุณ ทุกครั้งที่คุณสร้างเมนูใหม่เมนูจะสามารถเลือกได้จากเมนูแบบเลื่อนลงนี้
สีพื้นหลัง
ตามค่าเริ่มต้นโมดูลเมนูจะมีสีพื้นหลังสีขาว หากคุณต้องการใช้สีอื่นสำหรับพื้นหลังเมนูของคุณคุณสามารถเลือกได้ที่นี่โดยใช้ตัวเลือกสี
สีพื้นหลังของเมนูแบบเลื่อนลง
ตามค่าเริ่มต้นเมนูแบบเลื่อนลงในโมดูลเมนูจะสืบทอดสีพื้นหลังที่กำหนดไว้ในการตั้งค่าก่อนหน้านี้ หากคุณต้องการให้เมนูแบบเลื่อนลงมีสีของตัวเองคุณสามารถเลือกสีที่กำหนดเองได้โดยใช้การตั้งค่านี้
สีพื้นหลังเมนูมือถือ
โมดูลเมนูบนอุปกรณ์เคลื่อนที่จะเปลี่ยนเป็นการออกแบบที่แตกต่างและปรับให้เข้ากับอุปกรณ์เคลื่อนที่มากขึ้น คุณสามารถควบคุมสีพื้นหลังของเมนูแบบเลื่อนลงของอุปกรณ์เคลื่อนที่โดยไม่ขึ้นกับเดสก์ท็อป
ป้ายกำกับการดูแลระบบ
สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder
ตัวเลือกการออกแบบเมนูแบบเต็มความกว้าง
ในแท็บออกแบบคุณจะพบตัวเลือกรูปแบบโมดูลทั้งหมดเช่นแบบอักษรสีการปรับขนาดและระยะห่าง นี่คือแท็บที่คุณจะใช้เพื่อเปลี่ยนรูปลักษณ์ของโมดูลของคุณ โมดูล Divi แต่ละโมดูลมีรายการการตั้งค่าการออกแบบมากมายที่คุณสามารถใช้เพื่อเปลี่ยนแปลงอะไรก็ได้
เปิดเมนูยอย
ตามค่าเริ่มต้นเมนูย่อยทั้งหมดจะเปิดเป็นเมนูแบบเลื่อนลงด้านล่างแถบเมนูหลัก หากคุณวางเมนูไว้ใกล้ด้านล่างสุดของหน้าและเมนูของคุณมีเมนูแบบเลื่อนลงแบบยาวคุณอาจต้องการเปิดเมนูเหล่านั้นเหนือโมดูลเมนูเพื่อไม่ให้เมนูขยายออกไปนอกหน้าต่างเบราว์เซอร์
สร้างการเชื่อมโยงเมนูแบบเต็มความกว้าง
โดยค่าเริ่มต้นลิงก์ระดับบนสุดพร้อมโมดูลเมนูจะอยู่ในความกว้างของเนื้อหาเริ่มต้นของคุณ หากคุณต้องการลบข้อ จำกัด นี้และให้ลิงก์ของคุณทำงานเต็มความกว้างของหน้าโดยเริ่มจากด้านซ้ายสุดของหน้าจอคุณสามารถเปิดใช้งานตัวเลือกนี้ได้
สีของบรรทัดเมนูแบบเลื่อนลง
ในเมนูแบบเลื่อนลงลิงก์จะคั่นด้วยเส้น 1 พิกเซล หากคุณต้องการกำหนดสีของแถวนี้เองคุณสามารถเลือกสีที่กำหนดเองโดยใช้ตัวเลือกสีในการตั้งค่านี้
สีข้อความ
คุณสามารถเลือกค่าของข้อความได้ที่นี่ หากคุณกำลังทำงานบนพื้นหลังสีเข้มข้อความของคุณควรเปิดอยู่ หากคุณใช้พื้นหลังสีอ่อนข้อความของคุณควรเป็นสีเข้ม
การวางแนวข้อความ
สิ่งนี้ควบคุมวิธีจัดแนวข้อความของคุณในโมดูล คุณสามารถเลือกระหว่างซ้ายขวาและกึ่งกลาง
สีลิงก์ที่ใช้งานอยู่
สีของลิงก์ที่ใช้งานอยู่จะถูกเน้นในโมดูลเมนูเพื่อแสดงตำแหน่งปัจจุบันของผู้ใช้ คุณสามารถเปลี่ยนสีไฮไลต์ที่ใช้สำหรับลิงก์ที่ใช้งานอยู่เหล่านี้ได้โดยใช้การตั้งค่านี้
สีของข้อความของเมนูแบบเลื่อนลง
ตามค่าเริ่มต้นข้อความในเมนูแบบเลื่อนลงของโมดูลจะสืบทอดสีของข้อความเมนูหลัก อย่างไรก็ตามคุณอาจต้องการเปลี่ยนสีนี้หากคุณกำหนดสีพื้นหลังของเมนูแบบเลื่อนลงที่กำหนดเอง
สีของข้อความเมนูมือถือ
ตามค่าเริ่มต้นข้อความในเมนูแบบเลื่อนลงของโมดูลจะสืบทอดสีของข้อความเมนูหลัก อย่างไรก็ตามคุณอาจต้องการเปลี่ยนสีนี้หากคุณตั้งค่าสีพื้นหลังเมนูมือถือแบบกำหนดเอง
แบบอักษรเมนู
คุณสามารถเปลี่ยนแบบอักษรของแบบอักษรเมนูของคุณได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับฟอนต์ดีๆมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้
เมนูขนาดแบบอักษร
คุณสามารถปรับขนาดของแบบอักษรเมนูได้ที่นี่ คุณสามารถลากแถบเลื่อนช่วงเพื่อเพิ่มหรือลดขนาดข้อความของคุณหรือป้อนค่าขนาดข้อความที่ต้องการโดยตรงในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "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