วิธีสร้างแถบท้ายกระดาษคงที่ด้วย Divi

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

เช่นเดียวกับ 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

เพิ่มวันที่ปัจจุบันแบบไดนามิกด้วยข้อความก่อนและหลัง

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

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

ในหน้าต่างป๊อปอัพวันที่ปัจจุบันอัพเดตต่อไปนี้:

• ก่อน:
• 01Copyright ©

• หลังจากที่:
• 01| Tous Droits Reservés

• รูปแบบวันที่ : กำหนดเอง
• รูปแบบวันที่กำหนดเอง : 20 ปี

การจัดรูปแบบข้อความ

อัพเดตการออกแบบข้อความและระยะขอบดังนี้:

• แบบอักษรของข้อความ: สะพานลอย
• สีข้อความ: # b59c61
• การจัดตำแหน่งของข้อความ: ศูนย์
• ระยะขอบ (โทรศัพท์เท่านั้น): 10 พิกเซลที่ด้านบนสุด 10 พิกเซลที่ด้านล่าง

สิ่งนี้รองรับข้อความลิขสิทธิ์

เพิ่มไอคอนติดตามโซเชียลมีเดียในคอลัมน์ 3

ในคอลัมน์ 3 เพิ่มโมดูลติดตามสื่อสังคมออนไลน์

เพิ่มเครือข่ายสังคม

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

การตั้งค่าการติดตามสื่อโซเชียล

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

• การจัดแนวโมดูล: ตรง (เดสก์ท็อปและแท็บเล็ต), กึ่งกลาง (โทรศัพท์)
• ไอคอนสี: # 1a1e36
• ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
• ขนาดแบบอักษรของไอคอน: 16px (เดสก์ท็อปและแท็บเล็ต), 14px (โทรศัพท์)

อัพเดตการตั้งค่าโซเชียลมีเดีย

หากต้องการอัปเดตการออกแบบของไอคอนเครือข่ายสังคมแต่ละไอคอนให้เปิดการตั้งค่าสำหรับเครือข่ายแรกและอัปเดตสิ่งต่อไปนี้

• สีพื้นหลัง: #ffffff
• การขยาย: 8 พิกเซลทางด้านขวา 8 พิกเซลทางด้านซ้าย
• มุมโค้งมน: 8px

ขยายการตั้งค่าโซเชียลมีเดียให้กับทุกคน

จากนั้นเปิดเมนูการตั้งค่าเพิ่มเติมสำหรับเครือข่ายแรกและเลือก " ขยายลักษณะรายการ "ในรายการ ในหน้าต่างป๊อปอัปขยายสไตล์ให้เลือกขยายสไตล์ใน " คอลัมน์นี้ "และคลิก ต่ออายุ .

สิ่งนี้จะเป็นการขยายการออกแบบไปยังไอคอนที่เหลือในคอลัมน์

คิดสุดท้าย

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

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

แหล่งข้อมูลอื่น ๆ

นี่คือรายการของ บริการสารสนเทศ เพิ่มเติมที่สามารถช่วยคุณสร้างในการออกแบบเว็บไซต์ของคุณด้วย Divi

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