วิธีสร้างแถบส่วนท้ายคงที่สำหรับธีม Divi ของคุณ

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

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

มาเริ่มกันเลย.

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของแถบส่วนท้ายคงที่ที่เราจะออกแบบ

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

วิธีเพิ่มเทมเพลตแถบท้ายกระดาษที่ดาวน์โหลดไปยังไซต์ Divi ของคุณ

คำเตือน!: การเพิ่มเทมเพลตนี้จะแทนที่เทมเพลตเว็บไซต์เริ่มต้น (หากมี) บนไซต์ Divi ของคุณ เราขอแนะนำให้เพิ่มสิ่งนี้ลงในไซต์ทดสอบ เพื่อไม่ให้คุณทำอะไรผิดพลาดในไซต์ที่ใช้งานจริง

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

จากนั้นไปที่ WordPress Dashboard และไปที่ Divi > Theme Builder

จากนั้นคลิกไอคอนการพกพาที่ด้านบนขวาของหน้า

ภายในป๊อปอัปการพกพา ให้เลือกไฟล์ JSON ที่คุณเพิ่งคลายซิปแล้วเลือกตัวเลือก “ดาวน์โหลดข้อมูลสำรองก่อนนำเข้า” ในกรณีที่คุณมีบางอย่างในเทมเพลตเว็บไซต์เริ่มต้นก่อนหน้านี้ที่คุณไม่ต้องการแทนที่

จากนั้นคลิกปุ่มนำเข้า

สุดท้าย บันทึกการเปลี่ยนแปลง Theme Builder และดูหน้าสดเพื่อดูแถบส่วนท้ายคงที่

เอาล่ะ ไปที่บทช่วยสอนกันเลยดีกว่าไหม

ส่วนที่ 1: การเพิ่มส่วนท้ายส่วนกลาง

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

ในการสร้างส่วนท้ายส่วนกลาง ให้ไปที่ WordPress Dashboard และไปที่ Divi > Theme Builder จากนั้นคลิกพื้นที่ "เพิ่มส่วนท้ายส่วนกลาง" ภายในเทมเพลตเว็บไซต์เริ่มต้น

จากนั้นเลือกตัวเลือก “สร้างส่วนท้ายส่วนกลาง” จากดรอปดาวน์

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

ส่วนที่ 2: การสร้างแถบส่วนท้ายคงที่

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

เพิ่มเค้าโครงสามคอลัมน์ในแถว

ขั้นแรก เพิ่มเค้าโครงสามคอลัมน์ในแถว

ส่วนสูง

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

ในการตั้งค่าความสูงและช่องว่างภายใน ให้เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

• ส่วนสูง: 85px
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

การตั้งค่าแถว

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

พื้นหลัง

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

ขนาดและระยะห่าง

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ล่าง, 3% ซ้าย, 3% ขวา

CSS ที่กำหนดเอง

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

เดสก์ทอป

height: inherit !important;
display:flex;
align-items: center;

โทรศัพท์

height: inherit !important;
display:block;

ตำแหน่งคงที่

ในการทำให้แถวคงที่เพื่อให้ลอยอยู่ที่ด้านล่างของหน้าจอ เราต้องกำหนดตำแหน่งคงที่ที่ตำแหน่งกึ่งกลางด้านล่างดังนี้:

• ตำแหน่ง: คงที่
• ที่ตั้ง: ตรงกลางด้านล่าง

ส่วนที่ 2: การสร้างเนื้อหาแถบส่วนท้ายคงที่

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

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

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

เลือกเมนู

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

เพิ่มโลโก้เว็บไซต์เป็นเนื้อหาแบบไดนามิก

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

ลบพื้นหลัง

จากนั้นลบพื้นหลังเริ่มต้นออกจากเมนูเพื่อให้โปร่งใส

ออกแบบเมนู

ณ จุดนี้เราก็พร้อมที่จะเพิ่มการออกแบบให้กับเมนู สำหรับการออกแบบนี้ เราจะทำให้มันเรียบง่ายและเล็ก อัปเดตการตั้งค่าการออกแบบต่อไปนี้:

• แบบอักษรของเมนู: สะพานลอย
• สีข้อความของเมนู: #b59c61
• ภาพซีเปีย: 100%
• โลโก้ความสูงสูงสุด: 50px

เพิ่มข้อความลิขสิทธิ์ในคอลัมน์ 2

เมื่อเมนูเข้าที่แล้ว ให้ข้ามไปที่คอลัมน์ 2 เพื่อเพิ่มข้อความลิขสิทธิ์

เพิ่มโมดูลข้อความ

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

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

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

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

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

• ก่อน:

• Copyright ©

• หลังจาก:

•  | All Rights Reserved

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

การออกแบบข้อความ

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

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

ที่ดูแลข้อความลิขสิทธิ์

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

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

เพิ่มโซเชียลเน็ตเวิร์ก

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

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

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

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

อัปเดตการตั้งค่าเครือข่ายสังคม

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

• สีพื้นหลัง: #ffffff
• ช่องว่างภายใน: 8px ขวา, 8px ซ้าย
• มุมโค้งมน: 8px

ขยายการตั้งค่าเครือข่ายสังคมทั้งหมด

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

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

ปิดการใช้งานคอลัมน์ 1/เมนูบนแท็บเล็ตและโทรศัพท์

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

บันทึกผลลัพธ์

ตรวจสอบให้แน่ใจว่าได้บันทึกเค้าโครงก่อนที่จะออกจากตัวแก้ไขเค้าโครง

จากนั้นตรวจสอบให้แน่ใจว่าได้บันทึกการเปลี่ยนแปลงสำหรับ Divi Theme Builder

ผลสุดท้าย

หากต้องการดูผลลัพธ์ ให้ดึงหน้าสดบนเว็บไซต์ของคุณ นี่คือลักษณะที่ปรากฏบนหน้าที่ใช้ Event Layout Pack

ดูว่าส่วนท้ายคงที่อย่างไรจนกว่าจะมาพักในส่วนที่อยู่ด้านล่างสุดของหน้า

ความคิดสุดท้าย

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

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

ฉันหวังว่ามันจะมีประโยชน์

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!