แถบส่วนท้ายคงที่เป็นวิธีที่สะดวกในการเก็บข้อมูลสำคัญของคุณ เว็บไซต์เว็บ ในเบื้องหน้าเมื่อผู้ใช้โต้ตอบกับเนื้อหาของเพจบนอุปกรณ์ใดๆ
เช่นเดียวกับ Divi แถบส่วนท้ายมักจะเป็นองค์ประกอบคงที่ที่ด้านล่างสุดของหน้าหลังเนื้อหาส่วนท้ายหลัก รวมถึงสิ่งต่างๆเช่นข้อความลิขสิทธิ์และไอคอนโซเชียลมีเดีย
แต่ถ้าคุณไม่ซ่อนเนื้อหาแถบส่วนท้ายที่ด้านล่างของหน้าคุณสามารถสร้างแถบส่วนท้ายแบบกำหนดเองที่ลอยอยู่ที่ด้านล่างของหน้าจอในขณะที่ผู้ใช้เลื่อน
ในบทช่วยสอนนี้เราจะออกแบบแถบส่วนท้ายคงที่ในแบบของคุณโดยใช้ตัวสร้างธีม Divi สิ่งนี้จะเป็นประโยชน์สำหรับคุณในการเก็บเนื้อหาชิ้นเล็ก ๆ แต่สำคัญเหล่านั้นไว้ในสายตาตลอดเวลา
ผลลัพธ์ที่เป็นไปได้
นี่คือภาพรวมของแถบส่วนท้ายคงที่ที่เราจะออกแบบ
วิธีการเพิ่มเทมเพลตบาร์คงที่เพื่อดาวน์โหลดในเว็บไซต์ Divi ของคุณ
คำเตือน!: การเพิ่มโมเดลนี้จะแทนที่ เทมเพลตเว็บไซต์ ตามค่าเริ่มต้น (ถ้าคุณมี) บนไซต์ Divi ของคุณ เราแนะนำให้เพิ่มลงในไซต์ทดสอบ เพื่อไม่ให้เกิดความยุ่งเหยิงในไซต์สด
ในการนำเข้าเทมเพลตแถบส่วนท้ายคงที่ด้วยตัวคุณเอง เว็บไซต์เว็บให้คลายซิปไฟล์ zip ที่ดาวน์โหลดเพื่อเข้าถึงไฟล์ JSON
จากนั้นไปที่แดชบอร์ด WordPress และไปที่ Divi> Theme Builder
จากนั้นคลิกที่ไอคอนการพกพาที่ด้านบนขวาของหน้า
ในหน้าต่างการพกพา ให้เลือกไฟล์ JSON ที่คุณเพิ่งคลายซิปแล้วเลือกตัวเลือก “ดาวน์โหลดข้อมูลสำรองก่อนนำเข้า” ในกรณีที่ก่อนหน้านี้คุณมีบางอย่างใน เทมเพลตเว็บไซต์ ค่าเริ่มต้นที่คุณไม่ต้องการแทนที่
จากนั้นคลิกที่ปุ่มนำเข้า
สุดท้ายให้บันทึกการเปลี่ยนแปลงของตัวสร้างธีมและแสดงเพจสดเพื่อดูแถบท้ายกระดาษคงที่
ตอนนี้ไปที่บทช่วยสอนโอเคไหม
ส่วนที่ 1: การเพิ่มส่วนท้ายส่วนกลาง
เครื่องมือสร้างธีมของ Divi ช่วยให้คุณสามารถแทนที่ส่วนท้ายเริ่มต้นด้วยอันใหม่โดยการอัปเดต เทมเพลตเว็บไซต์ ผิดนัด
ในการสร้างส่วนท้ายส่วนกลางให้ไปที่แดชบอร์ด WordPress แล้วไปที่ Divi> Theme Builder จากนั้นคลิกที่ช่องว่าง "Add Global Footer" ภายในเทมเพลตเว็บไซต์เริ่มต้น
จากนั้นเลือกตัวเลือก "สร้างส่วนท้ายที่กำหนดเอง" จากรายการแบบเลื่อนลง
การดำเนินการนี้จะปรับใช้ตัวแก้ไขโครงร่างโมเดลซึ่งคุณจะได้รับแจ้งทันทีพร้อมตัวเลือกสามตัวเลือกสำหรับวิธีที่คุณต้องการเริ่มสร้าง เลือก "สร้างจาก Scratch"
ส่วนที่ 2: การสร้างแถบท้ายกระดาษคงที่
ตอนนี้เรากำลังแก้ไขจากตัวแก้ไขเค้าโครงเทมเพลตเราสามารถเริ่มออกแบบแถบส่วนท้ายแบบตายตัวได้ เมื่อเสร็จแล้วคุณจะมีแถบส่วนท้ายที่คงที่ซึ่งมีสามคอลัมน์ที่พร้อมสำหรับเนื้อหา
เพิ่มโครงร่างสามคอลัมน์ในบรรทัด
ขั้นแรกให้เพิ่มเค้าโครงสามคอลัมน์ในแถว
ส่วนสูง
เมื่อเพิ่มสามคอลัมน์แล้วให้กำหนดความสูงให้กับส่วน นี่เป็นสิ่งสำคัญในการสร้างช่องว่างที่ด้านล่างของหน้าซึ่งในที่สุดโทรศัพท์พื้นฐานจะสิ้นสุดลง เราจะลบช่องว่างด้านบนและด้านล่างที่เป็นค่าเริ่มต้นด้วย
ในการตั้งค่าความสูงและช่องว่างภายในให้เปิดการตั้งค่าส่วนและอัปเดตข้อมูลต่อไปนี้:
- ความสูง: 85px
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
การตั้งค่าสาย
ตอนนี้ส่วนของเราพร้อมแล้วเราก็พร้อมที่จะปรับแต่งแถวเพื่อใช้เป็นแถบส่วนท้ายคงที่ เปิดการตั้งค่าแถวจากนั้นอัปเดตสิ่งต่อไปนี้:
สิ่งแวดล้อม
- สีพื้นหลัง: # 1a1e36
ขนาดและระยะห่าง
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
- การขยาย: 0px ขึ้น, 0px ลง, 3% ซ้าย, 3% ที่ถูกต้อง
CSS ที่กำหนดเอง
แม้ว่าแถวจะได้รับการแก้ไข แต่เราต้องการให้ความสูงของแถวตรงกับความสูงของส่วนหลักเพื่อให้ช่องว่างด้านล่างของหน้ามีแถวอย่างถูกต้อง และเราต้องการให้แน่ใจว่าเนื้อหาของแถวอยู่ในแนวตั้ง ในการดำเนินการนี้ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลักของแถว:
สำนัก
ความสูง: สืบทอด! สำคัญจอแสดงผล: ยืดหยุ่นจัดรายการ: ศูนย์;
โทรศัพท์
ความสูง: สืบทอด! สำคัญจอแสดงผล: บล็อก;
ตำแหน่งคงที่
ในการทำให้เส้นคงที่เพื่อให้ลอยอยู่ที่ด้านล่างของหน้าจอ เราต้องกำหนดตำแหน่งคงที่ที่ตำแหน่งกึ่งกลางด้านล่างดังนี้:
- ตำแหน่ง: แก้ไขแล้ว
- สถานที่ตั้ง: ใจกลางตอนล่าง
ส่วนที่ 2: การสร้างเนื้อหาของแถบท้ายกระดาษคงที่
ณ จุดนี้เรามีแถบส่วนท้ายที่มีตำแหน่งคงที่พร้อมสำหรับเนื้อหา เราสามารถเพิ่มเนื้อหาใดก็ได้ที่เราต้องการในแต่ละคอลัมน์ทั้งสามคอลัมน์ แต่เนื่องจากนี่เป็น "แถบ" ส่วนท้ายที่จำกัดความสูง 85 พิกเซลเราจึงจำเป็นต้อง จำกัด ปริมาณเนื้อหา ด้วยเหตุนี้เราจะเพิ่มเมนูเล็ก ๆ ที่มีโลโก้แบบไดนามิกและ 4 รายการเมนูในคอลัมน์ 1 ในคอลัมน์ 2 เราจะเพิ่มข้อความลิขสิทธิ์พร้อมกับปีปัจจุบันแบบไดนามิก ในคอลัมน์ 3 เราจะเพิ่มไอคอนติดตามโซเชียลมีเดียสามไอคอน
เพิ่มเมนูลงในคอลัมน์ 1
ในคอลัมน์ 1 เพิ่มโมดูลเมนู
เลือกเมนู
จากนั้นเลือกเมนูใดเมนูหนึ่งที่คุณสร้างไว้แล้ว เว็บไซต์เว็บ. ตรวจสอบให้แน่ใจว่ารายการเมนูอยู่ที่ 4 หรือน้อยกว่า
เพิ่มโลโก้ไซต์เป็นเนื้อหาแบบไดนามิก
สำหรับเมนูโลโก้เราจะเพิ่มโลโก้ไซต์แบบไดนามิก คลิกไอคอน "ใช้เนื้อหาไดนามิก" ขณะวางเมาส์เหนือพื้นที่แสดงตัวอย่างโลโก้ จากนั้นเลือกโลโก้ไซต์จากรายการแบบเลื่อนลง
ลบพื้นหลัง
จากนั้นลบพื้นหลังเมนูเริ่มต้นเพื่อให้โปร่งใส
ออกแบบเมนู
ณ จุดนี้เราพร้อมที่จะเพิ่มการออกแบบบางอย่างลงในเมนู สำหรับการออกแบบนี้เราจะทำให้เรียบง่ายและมีขนาดเล็ก อัปเดตพารามิเตอร์การออกแบบต่อไปนี้:
- เมนูแบบอักษร: สะพานลอย
- สีข้อความของเมนู: # b59c61
- ภาพสีซีเปีย: 100%
- ความสูงของโลโก้สูงสุด: 50px
เพิ่มข้อความลิขสิทธิ์ลงในคอลัมน์ 2
เมื่อเมนูเข้าที่แล้วให้ไปที่คอลัมน์ 2 เพื่อเพิ่มข้อความลิขสิทธิ์
เพิ่มโมดูลข้อความ
เพิ่มโมดูลข้อความใหม่ลงในคอลัมน์ 2
เพิ่มวันที่ปัจจุบันแบบไดนามิกด้วยข้อความก่อนและหลัง
ที่นี่เราจะสร้างสรรค์เนื้อหาแบบไดนามิกเพื่อแสดงปีปัจจุบันในข้อความลิขสิทธิ์ เพื่อให้แน่ใจว่าปีจะได้รับการอัปเดตโดยอัตโนมัติตลอดอายุการใช้งานของไซต์
ในการดำเนินการนี้ให้คลิกไอคอน "ใช้เนื้อหาไดนามิก" และเลือก "วันที่ปัจจุบัน" จากรายการ
ในหน้าต่างป๊อปอัพวันที่ปัจจุบันอัพเดตต่อไปนี้:
- ก่อน:
- 01
Copyright ©
- หลังจากที่:
- 01
| Tous Droits Reservés
- รูปแบบวันที่ : กำหนดเอง
- รูปแบบวันที่กำหนดเอง : 20 ปี
การจัดรูปแบบข้อความ
อัพเดตการออกแบบข้อความและระยะขอบดังนี้:
- แบบอักษรของข้อความ: สะพานลอย
- สีข้อความ: # b59c61
- การจัดตำแหน่งของข้อความ: ศูนย์
- ระยะขอบ (โทรศัพท์เท่านั้น): 10 พิกเซลที่ด้านบนสุด 10 พิกเซลที่ด้านล่าง
สิ่งนี้รองรับข้อความลิขสิทธิ์
เพิ่มไอคอนติดตามโซเชียลมีเดียในคอลัมน์ 3
ในคอลัมน์ 3 เพิ่มโมดูลติดตามสื่อสังคมออนไลน์
เพิ่มเครือข่ายสังคม
บนแท็บเนื้อหาเพิ่มเครือข่ายสังคมที่จำเป็นลงในไซต์ สำหรับการออกแบบนี้เราใช้สามตัว
การตั้งค่าการติดตามสื่อโซเชียล
ถัดไปอัพเดตการตั้งค่าการออกแบบสำหรับไอคอนการติดตามสื่อโซเชียลทั้งหมดดังนี้:
- การจัดแนวโมดูล: ตรง (เดสก์ท็อปและแท็บเล็ต), กึ่งกลาง (โทรศัพท์)
- ไอคอนสี: # 1a1e36
- ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
- ขนาดแบบอักษรของไอคอน: 16px (เดสก์ท็อปและแท็บเล็ต), 14px (โทรศัพท์)
อัพเดตการตั้งค่าโซเชียลมีเดีย
หากต้องการอัปเดตการออกแบบของไอคอนเครือข่ายสังคมแต่ละไอคอนให้เปิดการตั้งค่าสำหรับเครือข่ายแรกและอัปเดตสิ่งต่อไปนี้
- สีพื้นหลัง: #ffffff
- การขยาย: 8 พิกเซลทางด้านขวา 8 พิกเซลทางด้านซ้าย
- มุมโค้งมน: 8px
ขยายการตั้งค่าโซเชียลมีเดียให้กับทุกคน
จากนั้นเปิดเมนูการตั้งค่าเพิ่มเติมสำหรับเครือข่ายแรกและเลือก " ขยายลักษณะรายการ "ในรายการ ในหน้าต่างป๊อปอัปขยายสไตล์ให้เลือกขยายสไตล์ใน " คอลัมน์นี้ "และคลิก ต่ออายุ .
สิ่งนี้จะเป็นการขยายการออกแบบไปยังไอคอนที่เหลือในคอลัมน์
คิดสุดท้าย
การเพิ่มแถบส่วนท้ายคงที่มีเหตุผลในบางกรณี ความสูงของบาร์มีขนาดเล็กพอที่จะไม่ทำให้เสียสมาธิหรือใช้พื้นที่บนมือถือมากเกินไป และช่วยให้คุณสามารถเพิ่ม CTA ที่สำคัญเพื่อการแปลงที่ดีขึ้นและประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น
สำหรับการออกแบบนี้ช่องว่างที่ด้านล่างของหน้าถูกสร้างขึ้นโดยการตั้งค่าความสูงคงที่สำหรับส่วนจากนั้นปล่อยให้เส้นคงที่สืบทอดความสูงของส่วน (แม้ว่าจะได้รับการแก้ไขแล้วก็ตาม)
แหล่งข้อมูลอื่น ๆ
นี่คือรายการของ บริการสารสนเทศ เพิ่มเติมที่สามารถช่วยคุณสร้างในการออกแบบเว็บไซต์ของคุณด้วย Divi