Divi: วิธีสร้างเมนูลอยและโปร่งใส

ความต้องการ เพื่อสร้างเมนูลอยแบบโปร่งใสใน Divi ?

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

เราจะสร้างส่วนหัวส่วนกลางที่น่าทึ่งตั้งแต่เริ่มต้น (โดยใช้ตัวสร้างของ ธีม de Divi) และเราจะใช้เอฟเฟกต์ลอยตัวกับแถบเมนู

Let 's go

การสำรวจ

ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพธ์ที่เราต้องการบรรลุโดยเร็วกันก่อน

ไปที่ตัวสร้างธีมของ Divi และเพิ่มเทมเพลตใหม่

Allez บน Divi > ตัวสร้างธีม

สร้างส่วนหัวส่วนกลาง ด้วยตัวสร้างธีม Divi

คลิก 'เพิ่มส่วนหัวส่วนกลาง' และดำเนินการต่อโดยเลือก 'สร้างส่วนหัวส่วนกลาง'

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

สีพื้นหลัง

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

• พื้นหลัง: rgba(0,0,0,0)

ปรับขนาด

จากนั้นไปที่แท็บ ลักษณะส่วน และเปลี่ยนความกว้างสูงสุด

• ความกว้างสูงสุด (ดูภาพหน้าจอ): 100%

การเว้นวรรค

ลบระยะขอบภายในบนและล่างเริ่มต้นทั้งหมดออกด้วย

• ระยะขอบภายใน จุดยอด: 0px
• ระยะขอบภายในด้านล่าง: 0px

ดัชนี Z

และเพื่อให้แน่ใจว่าส่วนนี้อยู่เหนือทุกสิ่ง เนื้อหา จากส่วนฮีโร่ เราจะต้องเพิ่มดัชนี z ในการตั้งค่าการมองเห็น

• ดัชนี Z: 99999

เพิ่มบรรทัดใหม่

โครงสร้างของคอลัมน์

เมื่อคุณตั้งค่าส่วนเสร็จแล้ว คุณสามารถเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ปรับขนาด

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

• ประสานความสูงของคอลัมน์: ใช่
• ความกว้างสูงสุด: 100%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

จากนั้นเพิ่มระยะขอบภายในที่กำหนดเอง (บนและล่าง)

• ระยะขอบภายในสูงสุด: 2vw
• ขอบด้านในด้านล่าง: 0vw

องค์ประกอบหลัก

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

display: flex;

คอลัมน์ 2

สีพื้นหลัง

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ 2 และเปลี่ยนสีพื้นหลังเป็นสีกึ่งโปร่งใส

• สีพื้นหลัง: rgba (255,255,255,0.71)

ชายแดน

เพิ่มเส้นขอบด้านล่างให้กับคอลัมน์ด้วย

• ความกว้างขอบด้านล่าง: 2px
• ปุ่มและสีขอบล่าง: #f4583f

กล่องเงา

และสร้างเอฟเฟกต์ลอยตัวด้วยการเพิ่มเงาของกล่องที่ละเอียดอ่อน

• กล่องเงา: [ดูภาพ]
• ตำแหน่งเริ่มต้น: 20px
• ความแรงเงาของโบว์เงา: 50px
• ความแรงของการกระจายเงาของกล่อง: -20px
• สีแบบอักษรของคำบรรยาย: rgba(0,0,0,0.23)

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

โลโก้ดาวน์โหลด

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

การวางแนว

สลับไปที่แท็บสไตล์โมดูลและเปลี่ยนการจัดตำแหน่ง

• การจัดตำแหน่งภาพ: กึ่งกลาง

ปรับขนาด

เปลี่ยนความกว้างของโมดูลในการตั้งค่าการปรับขนาดด้วย

• ความกว้างสูงสุด: 8 vw (เดสก์ท็อป), 14 vw (แท็บเล็ต), 21 vw (โทรศัพท์)

เพิ่มโมดูลเมนูไปที่คอลัมน์ 2

เลือกเมนู

ไปที่คอลัมน์ถัดไป โมดูลเดียวที่เราต้องการคือโมดูลเมนู เลือกเมนูที่ต้องการ

ลบสีพื้นหลัง

จากนั้นไปที่การตั้งค่าพื้นหลังและลบสีพื้นหลัง

อารมณ์

สลับไปที่แท็บสไตล์โมดูลและเปลี่ยนเค้าโครง

• สไตล์: กึ่งกลาง
• เมนูแบบเลื่อนลง: ลง

ข้อความเมนู

จัดรูปแบบการตั้งค่าข้อความเมนูด้วย

• แบบอักษรของเมนู: Mulish
• สีข้อความของเมนู: #6f6666

• เมนูขนาดข้อความ: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

เมนูแบบเลื่อนลง

จากนั้นเปลี่ยนการตั้งค่าจากเมนูแบบเลื่อนลง

• สีของแถวแบบเลื่อนลง: #f4583f

ไอคอน

ใช้สีเดียวกันนี้สำหรับสีไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน

• ไอคอนเมนูแฮมเบอร์เกอร์ สี: #f4583f

การเว้นวรรค

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

• ระยะขอบภายในสูงสุด: 1,5 vw
• ระยะขอบภายในด้านล่าง: 1,5 vw

เพิ่มโมดูลปุ่มในคอลัมน์ 3

เพิ่มข้อความไปที่ปุ่ม

ไปที่คอลัมน์ถัดไปและคอลัมน์สุดท้ายกัน เพิ่มโมดูลปุ่มพร้อมข้อความที่คุณเลือก

การวางแนว

จากนั้นเปลี่ยนการจัดตำแหน่งของโมดูล

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ดำเนินการต่อโดยปรับแต่งปุ่มให้เหมาะสม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0,9 vw (เดสก์ท็อป), 1,5 vw (แท็บเล็ต), 2,5 vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ปุ่มพื้นหลัง: #f4583f

• ความกว้างของขอบปุ่ม: 0 พิกเซล
• สีเส้นขอบของปุ่ม: #f4583f
• ปุ่มรัศมีเส้นขอบ: 0 พิกเซล

• แบบอักษรของปุ่ม: Mulish
• ปุ่มไฟสลัว: ข้อความตัวหนา

การเว้นวรรค

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

• ระยะขอบภายในบนและล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะขอบภายในซ้ายและขวา: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)

พารามิเตอร์ส่วนเพิ่มเติม

องค์ประกอบหลักเริ่มต้น

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

position: absolute;
top: 0;

องค์ประกอบหลักบนโฮเวอร์

อย่าลืมเพิ่มโค้ด CSS บรรทัดเดียวกันลงในตัวเลือกโฮเวอร์ขององค์ประกอบหลัก วิธีนี้จะป้องกันไม่ให้ส่วนนั้นกะพริบเมื่อคุณวางเมาส์เหนือส่วนนั้น

position: absolute;
top: 0;

บันทึกการเปลี่ยนแปลงตัวสร้างและดูผลลัพธ์

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

การสำรวจ

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ครั้งสุดท้ายกัน

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

เพื่อทำความคุ้นเคยกับตัวสร้างธีมของ Divi คุณสามารถอ่านบทความของเราได้ที่ วิธีสร้างส่วนหัวส่วนกลางด้วยตัวสร้างธีมของ Divi

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...