Divi: วิธีสร้างส่วนหัวส่วนกลางที่โปร่งใสและเหนียว

คุณต้องการสร้างส่วนหัวที่โปร่งใสและเหนียวแน่นด้วย Divi หรือไม่?

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

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

Let 's go

การสำรวจ

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

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

ไปที่ Divi > ตัวสร้างธีม

ส่วนที่ #1 การตั้งค่า

สีพื้นหลัง

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

• ความเป็นมา: #000000

การเว้นวรรค

สลับไปที่แท็บ ลักษณะส่วน และลบระยะขอบด้านในทั้งหมด (บนและล่าง) ตามค่าเริ่มต้น

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

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

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์

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

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Oswald
• รูปแบบการคัดลอกข้อความ: TT
• สีข้อความ Text: #ffffff
• ขนาดข้อความ:
  • เดสก์ท็อป: 19px
  • แท็บเล็ต: 18px
  • โทรศัพท์: 16px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มหัวข้อ # 2

การเว้นวรรค

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

เปิดการตั้งค่าส่วนและลบระยะขอบภายในทั้งหมด (บนและล่าง) ตามค่าเริ่มต้นในแท็บรูปแบบ

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

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

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

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

สีพื้นหลังโปร่งใส

เปิดการตั้งค่าเส้นและใช้สีพื้นหลังแบบโปร่งใสทั้งหมดกับเส้น

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

ปรับขนาด

สลับไปที่แท็บ Line Style และเปลี่ยนการตั้งค่าการปรับขนาด

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ระยะห่างคอลัมน์: 1
• ความกว้างสูงสุด: 100%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

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

• ขอบด้านในด้านซ้าย: 10%
• กฎหมายมาร์จิ้นภายใน: 10%

กล่องเงา

ถัดไป ใช้เงากล่องโปร่งใส ต่อมาในบทช่วยสอน เราจะใช้เงากล่องนี้ในสถานะเหนียวด้วยสีเงาที่ต่างกัน

• ความแรงของกล่องเงาเบลอ: 50px
• คำบรรยายสีแบบอักษร: rgba (0,0,0,0)

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

การมองเห็นคอลัมน์ 2

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

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

เลือกเมนู

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

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

จากนั้นอัพโหลดโลโก้

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

ลบสีพื้นหลังออกจากโมดูลด้วย

การตั้งค่าข้อความเมนู

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

• เมนูแบบอักษร: Oswald
• เมนูแสงอ่อน: ตัวหนา
• คัดลอกสไตล์เมนู: TT
• สีข้อความของเมนู: #efefef
• ขนาดข้อความของเมนู: 18px
• การจัดตำแหน่งข้อความ: right

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

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

• สีแถวแบบเลื่อนลง: rgba(0,0,0,0)
• เมนูมือถือ สีพื้นหลัง: rgba (0,0,0,0,95)

การตั้งค่าไอคอน

ถัดไป เปลี่ยนสีไอคอนในการตั้งค่าไอคอน

• สีไอคอนรถเข็น: #ffffff
• ค้นหาไอคอนสี: #ffffff
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #ffffff

การตั้งค่าโลโก้

นอกจากนี้เรายังเปลี่ยนสีโลโก้ของเราในการตั้งค่าโลโก้ด้วยการเปลี่ยนตัวกรองการกลับภาพ

• กลับภาพ: 90%

ปรับขนาด

ต่อไป เราจะกำหนดความสูงสูงสุดให้กับโลโก้ของเรา

• โลโก้ความกว้างสูงสุด: 40 พิกเซล

การเว้นวรรค

ต่อไป เราจะเพิ่มการเติมด้านบนและด้านล่างในขนาดหน้าจอขนาดเล็ก

• ระยะขอบภายในสูงสุด:
  • แท็บเล็ตและโทรศัพท์: 10px
• ระยะขอบภายในด้านล่าง:
  • แท็บเล็ตและโทรศัพท์: 10px

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

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

ในคอลัมน์ 2 โมดูลเดียวที่เราต้องการคือโมดูลปุ่ม เพิ่มข้อความที่คุณเลือก

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

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

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

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

ปรับแต่งปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #ffffff
• ปุ่มพื้นหลัง: #ed4441
• สีเส้นขอบของปุ่ม: #ed4441

• ปุ่มรัศมีเส้นขอบ: 0 พิกเซล
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษรของปุ่ม: Oswald
• ปุ่ม Soft Light: ข้อความตัวหนา
• ปุ่มรูปแบบการคัดลอก: TT
• แสดงไอคอนปุ่ม: ใช่

• ปุ่มไอคอนสี: #1a1a1a

การเว้นวรรค

และกรอกพารามิเตอร์ของโมดูลโดยเพิ่มค่าระยะห่างที่กำหนดเอง

• ขอบบน: -70px
• ระยะขอบภายในด้านบนและด้านล่าง: 25 px

ใช้เอฟเฟกต์เหนียวที่กำหนดเอง

ทำให้ส่วน #2 เหนียว

ตอนนี้เราได้วางรากฐานสำหรับส่วนหัวของเราแล้ว ก็ถึงเวลาที่จะใช้เอฟเฟกต์เหนียว! ในการดำเนินการนี้ ให้เริ่มต้นด้วยการเปิดการตั้งค่าในส่วนที่สอง และใช้การตั้งค่าแบบติดหนึบต่อไปนี้กับแท็บขั้นสูง:

• ตำแหน่งติดหนึบ: Stick to Top
• ออฟเซ็ตบนสุด: 0px
• ตัวเหนียวหนึบล่าง: ไม่มี
• ออฟเซ็ตจากองค์ประกอบที่ติดหนึบโดยรอบ: ใช่
• ค่าเริ่มต้นของการเปลี่ยนและรูปแบบที่ติดหนึบ: ใช่

สีพื้นหลังเส้นติด

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

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

ระยะห่างระหว่างแถวเหนียว

ต่อไป เราจะปรับเปลี่ยนค่าระยะห่างของฟังก์ชันเหนียวของบรรทัด

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

กล่องเงาแถวเหนียว

เรากำลังเปลี่ยนสีของเงากล่องในสถานะติดหนึบ

• คำบรรยายสีแบบอักษร: rgba(0,0,0,0.08)

การวางตำแหน่งเส้นเหนียว

ต่อไป เราจะคืนตำแหน่งแถวให้สัมพันธ์กันในสถานะติดหนึบ

• ตำแหน่ง: ญาติ
• แหล่งกำเนิดออฟเซ็ต: บนซ้าย

การตั้งค่าข้อความเมนูสถานะติดหนึบ

ต่อไป เราจะเปลี่ยนสีข้อความของเมนูเป็นสถานะติดหนึบ

• สีข้อความของเมนู: #000000

การตั้งค่าเมนูแบบเลื่อนลงในสถานะติดหนึบ

ด้วยสีพื้นหลังเมนูมือถือในการตั้งค่าเมนูแบบเลื่อนลง

• เมนูมือถือ, สีพื้นหลัง: #ffffff

สีไอคอนเมนูในสถานะติดหนึบ

เปลี่ยนสีไอคอนด้วยสถานะติดหนึบ

• สีไอคอนรถเข็น: #000000
• ค้นหาไอคอนสี: #000000
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000

ตัวกรองโลโก้ในสถานะติดหนึบ

ถัดไป ให้เอาฟิลเตอร์กลับด้านออกจากรูปภาพโลโก้ในสถานะติดหนึบ

• การผกผันของภาพ: 0%

ระยะห่างปุ่มในสถานะติดหนึบ

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

• อัตรากำไรขั้นต้น: 0px

การสำรวจ

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

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

สรุป

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

วิธีนี้ทำให้คุณสามารถผสานการออกแบบเพจกับเมนูของคุณในขณะที่ยังคงรักษาส่วนหัวที่ดีไว้ได้เมื่อเลื่อน

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

หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

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

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

...