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

คุณต้องการสร้างส่วนหัวติดหนึบด้วย Divi ?

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

อันที่จริง ไม่เพียงแต่จะง่ายกว่าเท่านั้น แต่วิธีนี้ยังมีโอกาสเพิ่มเติมในการปรับแต่งการออกแบบอีกด้วย

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

การสำรวจ

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

สร้างโครงสร้างองค์ประกอบส่วนหัว

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

เข้าถึงตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลางหรือส่วนหัวที่กำหนดเองใหม่

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

พื้นหลังไล่ระดับสี

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

อ่าน: วิธีสร้างเมนูเลื่อนและกดใน DIVI

ในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนี้และใช้พื้นหลังแบบไล่ระดับสี

สี 1: #ffba60
สี 2: #ffd6a0
ทิศทางการไล่ระดับสี: 90 องศา
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 50%

การเว้นวรรค

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

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

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

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

display: flex;

เพิ่มโมดูล 'ติดตามเราบนโซเชียลมีเดีย' ลงในคอลัมน์ 1

เพิ่มเครือข่ายโซเชียลที่คุณเลือก

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูล 'ติดตามเราบนโซเชียลมีเดีย' ในคอลัมน์ 1 เพิ่มเครือข่ายโซเชียลที่คุณเลือกพร้อมกับลิงก์ที่เกี่ยวข้อง

ลบสีพื้นหลังออกจากแต่ละเครือข่ายโซเชียล

ดำเนินการต่อโดยลบสีพื้นหลังแต่ละสีออกจากโซเชียลเน็ตเวิร์กทีละรายการ

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

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

ไอคอนสี: #26333a

การเว้นวรรค

เพิ่มขอบด้านบนด้วย

ขอบบน: 5 px

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

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

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

เพิ่มการเชื่อมโยง

จากนั้นเพิ่มลิงค์

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

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

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

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

นอกจากนี้เรายังปรับแต่งปุ่ม

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 14px
สีข้อความของปุ่ม: #26333a
ความกว้างของขอบปุ่ม: 2px
สีเส้นขอบของปุ่ม: #26333a
รัศมีเส้นขอบของปุ่ม: 0 พิกเซล

ปุ่มเว้นวรรคตัวอักษร: 4px
ปุ่ม Soft Light: ข้อความตัวหนา
ปุ่มรูปแบบการคัดลอก: ตัวพิมพ์ใหญ่
ปุ่มแสดง: ใช่

การเว้นวรรค

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

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