ลิ้นชักด้านล่างเป็นส่วนเสริมที่มีประโยชน์สำหรับทุกๆ เว็บไซต์เว็บเนื่องจากจัดเก็บเนื้อหาเพิ่มเติมที่ผู้ใช้เข้าถึงได้ง่าย ลิ้นชักส่วนท้ายคือที่เก็บเนื้อหาเว็บ (เช่น ส่วน Divi) ที่สามารถเปิดและปิดได้ด้วยการคลิกปุ่มหรือวางเมาส์เหนือ มันเหมือนกับมีเนื้อหาเล็กน้อยสำหรับเนื้อหาระดับพรีเมียม
ในบทช่วยสอนนี้ เราจะออกแบบลิ้นชักส่วนท้ายแบบลอยใน Divi เราจะเพิ่มลิ้นชักส่วนท้ายลงในพื้นที่ส่วนท้ายส่วนกลางของ เทมเพลตเว็บไซต์ เพื่อให้ลิ้นชักส่วนท้ายสามารถเข้าถึงได้ทั่วทั้งไซต์ด้วยเนื้อหาส่วนท้ายปกติ
ด้วยกระบวนการที่เรากำลังจะใช้ส่วน Divi ใด ๆ (และเนื้อหา) สามารถแปลงเป็นลิ้นชักส่วนท้ายได้ในเวลาไม่กี่นาที
วิธีการเพิ่มเทมเพลตลิ้นชักท้ายกระดาษลงในไซต์ Divi ของคุณ
การเพิ่มโมเดลนี้จะแทนที่ เทมเพลตเว็บไซต์ ตามค่าเริ่มต้น (ถ้าคุณมี) บนไซต์ Divi ของคุณ เราแนะนำให้เพิ่มลงในไซต์ทดสอบ เพื่อไม่ให้เกิดความยุ่งเหยิงในไซต์สด
ในการนำเข้าเทมเพลตลิ้นชักส่วนท้ายคงที่ด้วยตัวคุณเอง เว็บไซต์เว็บให้คลายซิปไฟล์ zip ที่ดาวน์โหลดเพื่อเข้าถึงไฟล์ JSON
จากนั้นไปที่แดชบอร์ด WordPress และไปที่ Divi> Theme Builder
จากนั้นคลิกที่ไอคอนการพกพาที่ด้านบนขวาของหน้า
ในหน้าต่างการพกพา ให้เลือกไฟล์ JSON ที่คุณเพิ่งคลายซิปแล้วเลือกตัวเลือก “ดาวน์โหลดข้อมูลสำรองก่อนนำเข้า” ในกรณีที่ก่อนหน้านี้คุณมีบางอย่างใน เทมเพลตเว็บไซต์ ค่าเริ่มต้นที่คุณไม่ต้องการแทนที่
จากนั้นคลิกที่ปุ่มนำเข้า
สุดท้ายให้บันทึกการเปลี่ยนแปลงของตัวสร้างธีมและแสดงเพจสดเพื่อดูแถบท้ายกระดาษคงที่
ตอนนี้ไปที่บทช่วยสอนโอเคไหม
ส่วนที่ 1: การเพิ่มส่วนท้ายส่วนกลาง
เครื่องมือสร้างชุดรูปแบบ Divi ช่วยให้คุณสามารถแทนที่ส่วนท้ายเริ่มต้นด้วยอันใหม่โดยการอัพเดทเทมเพลตเว็บไซต์เริ่มต้น
ในการสร้างส่วนท้ายส่วนกลางให้ไปที่แดชบอร์ด WordPress แล้วไปที่ Divi> Theme Builder จากนั้นคลิกที่ช่องว่าง "Add Global Footer" ภายในเทมเพลตเว็บไซต์เริ่มต้น
จากนั้นเลือกตัวเลือก“ สร้างส่วนท้ายส่วนกลาง” จากรายการแบบเลื่อนลง
เพิ่มเค้าโครงที่กำหนดไว้ล่วงหน้าไปยังเค้าโครงท้ายกระดาษส่วนกลาง
การดำเนินการนี้จะปรับใช้ตัวแก้ไขโครงร่างแบบจำลองซึ่งคุณจะได้รับแจ้งทันทีพร้อมตัวเลือกสามทางสำหรับวิธีที่คุณต้องการเริ่มสร้าง เลือกตัวเลือก "เลือกรูปแบบที่กำหนดไว้ล่วงหน้า"
ในหน้าต่างป๊อปอัปโหลดจากไลบรารีให้ค้นหาเค้าโครงหน้า Landing Page ของเครื่องเขียน จากนั้นคลิกที่ "ใช้เค้าโครงนี้"
ลบเนื้อหาที่ไม่ต้องการออกจากการจัดวางล่วงหน้า
เมื่อโหลดเค้าโครงลงในตัวแก้ไขแล้วให้ขยายกล่องป๊อปอัปเลเยอร์โดยคลิกที่ไอคอนเลเยอร์ในเมนูการตั้งค่า จากนั้นลบส่วนทั้งหมดของเค้าโครงยกเว้นสองส่วนสุดท้าย
ย้ายและติดป้ายทั้งสองส่วน
เมื่อนำส่วนต่างๆออกแล้วคุณควรมีสองส่วนหัวข้อหนึ่งชื่อ "ส่วนท้าย" และอีกส่วนหนึ่งชื่อ "วิธีการทำงาน" ย้ายส่วน "ส่วนท้าย" ไปที่ด้านบนสุดของเค้าโครง
เปลี่ยนข้อความในส่วนล่างเพื่ออ่าน“ Footer Drawer” นี่คือส่วนที่เราจะใช้เป็นเนื้อหาของลิ้นชักส่วนท้ายของเรา
ส่วนที่ 2: การสร้างลิ้นชักท้ายกระดาษคงที่
ตอนนี้เราได้กำหนดส่วนใดส่วนหนึ่งเป็นส่วนท้ายและอีกส่วนหนึ่งเป็นลิ้นชักส่วนท้ายแล้วเราก็พร้อมที่จะเริ่มสร้างลิ้นชักส่วนท้ายคงที่ของเรา เริ่มต้นด้วยการสร้างไอคอนแจ้งเตือนที่เราจะใช้เพื่อสลับลิ้นชักส่วนท้าย
การสร้างปุ่มลิ้นชักท้ายกระดาษ
เพิ่มบรรทัดใหม่
ในส่วนท้ายกระดาษด้านล่างเพิ่มแถวใหม่ไปยังคอลัมน์
ติดป้ายกำกับแถวใหม่ "Drawer Button" เนื่องจากเป็นแถวที่จะมีปุ่มที่ใช้ในการสลับเปิดและปิดลิ้นชัก จากนั้นย้ายเส้นไปที่ด้านบนสุดของส่วน
การขยายแถว
ก่อนเพิ่มโมดูลให้เปิดการตั้งค่าแถวและอัปเดตการขยายดังต่อไปนี้:
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
มาตราช่องว่างภายใน
จากนั้นเปิดการตั้งค่าในส่วน "ส่วนท้ายของลิ้นชัก" และอัปเดตช่องว่างภายในดังนี้:
ในการสร้างปุ่มที่คลิกได้ซึ่งสลับลิ้นชักส่วนท้ายเราจะใช้โมดูลการแจ้งเตือนที่มีไอคอน และเราจะทำให้มันมีรูปทรงหยดน้ำที่ไม่เหมือนใครโดยการรวมรูปทรงสี่เหลี่ยมของ Blurb pod container เข้ากับไอคอนวงกลม
นี่คือวิธี
เพิ่มโมดูล Blurb
เพิ่มโมดูลข้อความนำเสนอไปยังบรรทัด "ปุ่มลิ้นชัก" ที่ด้านบนของส่วน
ประกาศเนื้อหา / ไอคอน
จากนั้นลบชื่อเริ่มต้นและเนื้อหาเนื้อหาแล้วเลือกไอคอนลูกศรที่ชี้ไปที่มุมบนซ้าย (ดูภาพหน้าจอ) เรากำลังใช้ไอคอนหมุนบางส่วนเพราะเราจะหมุนในภายหลัง
การออกแบบการประกาศแจ้ง
จากนั้นให้ข้อความนำเสนอดังต่อไปนี้:
- สีพื้นหลัง: # 081540
จากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:
- ไอคอนสี: #eeeeee
- ไอคอนวงกลม: ใช่
- สีวงกลม: # 081540
- ใช้ขนาดตัวอักษรของไอคอน: ใช่
- ขนาดตัวอักษรของไอคอน: 17 พิกเซล
ขนาดตัวอักษรนำเสนอ
ตอนนี้ให้โมดูลมีความสูงและความกว้างดังนี้
- ความกว้าง: 30px
- ความสูง: 30px
ซึ่งจะทำให้ไอคอนวงกลมล้นเข้าไปในที่เก็บข้อความเพื่อสร้างรูปหยดน้ำ
ประกาศตำแหน่ง
จากนั้นให้ข้อความนำเสนอตำแหน่งที่แน่นอนที่กึ่งกลางด้านบนของส่วน
- ตำแหน่ง: สัมบูรณ์
- สถานที่: Top Center
ประกาศการตั้งค่าการแปลง
ตอนนี้เราสามารถใช้ตัวเลือกการแปลงเพื่อหมุนการแจ้งเตือน / ไอคอนขึ้นและวางตำแหน่งไว้เหนือคอนเทนเนอร์ของส่วน ตอนนี้เมื่อเราซ่อนส่วนใต้หน้าต่างเบราว์เซอร์ไอคอนจะยังคงมองเห็นได้ / คลิกได้
อัปเดตรายการต่อไปนี้:
- แปลงแกน X แปล: -50%
- แปลงการแปลแกน Y: -250%
- เปลี่ยนการหมุนแกน Z: -45 องศา
จากนั้นลบภาพเคลื่อนไหวไอคอนเริ่มต้น:
- ภาพเคลื่อนไหว / ไอคอนภาพเคลื่อนไหว: ไม่มีภาพเคลื่อนไหว
เราจะใช้ JQuery เพื่อสลับลิ้นชักดังนั้นเราต้องกำหนดเป้าหมายข้อความ / ไอคอนเป็นองค์ประกอบที่คลิกได้ด้วยคลาส CSS ที่เราจะใช้ในโค้ดในภายหลัง เพิ่มคลาส CSS ต่อไปนี้:
- คลาส CSS: ลิ้นชักเป้าหมาย
การตั้งค่าส่วนท้ายลิ้นชัก
ตอนนี้เราจะซ่อนส่วน "ลิ้นชักส่วนท้าย" โดยใช้ตัวเลือกการแปลงการแปล เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:
- แปลงแปลแกน Y: 100%
ความสวยงามของการใช้การแปลงที่นี่คือค่าเปอร์เซ็นต์จะขึ้นอยู่กับขนาดจริงของรายการ ดังนั้น 100% บนแกน Y จะสัมพันธ์โดยตรงกับความสูงของส่วน (ระบุว่ามันคืออะไรในเวลาใดก็ตาม) กล่าวอีกนัยหนึ่งองค์ประกอบจะถูกเคลื่อนลงตามระยะทางที่แน่นอนตามความสูงของมันเอง
เพื่อที่จะนำ "ลิ้นชักส่วนท้าย" กลับมาดูใหม่เราจำเป็นต้องย้อนกลับการแปลการแปลงที่เราเพิ่งเพิ่มเข้าไปในส่วนนี้ ในการดำเนินการนี้เราจะต้องกำหนดเป้าหมายองค์ประกอบด้วยคลาส CSS และปิดใช้งานการแปลงการแปลโดยคลิกที่ไอคอน (นำส่วนทั้งหมดกลับสู่ตำแหน่งเดิม)
เพิ่มคลาส CSS ไปยังส่วนท้ายกระดาษ
ภายใต้แท็บขั้นสูงเพิ่มคลาส CSS ต่อไปนี้:
- CSS คลาส: มีการแปลง
ส่วนท้ายกระดาษลิ้นชักตำแหน่งคงที่
ในขั้นตอนสุดท้ายเราต้องแก้ไขลิ้นชักส่วนท้ายเพื่อให้ (พร้อมไอคอน) ลอยอยู่ที่ด้านล่างของหน้าต่างเบราว์เซอร์
อัปเดตตำแหน่งของส่วน "ท้ายกระดาษ" ดังต่อไปนี้:
- ตำแหน่ง: แก้ไขแล้ว
- ที่ตั้ง: ด้านล่างซ้าย
- ดัชนี Z: 13
ปิดเนื้อหามือถือ
เนื่องจากคุณจะมีเนื้อหาลิ้นชักส่วนท้ายจำนวน จำกัด ซึ่งจะพอดีกับทั้งแท็บเล็ตและโทรศัพท์ (เนื่องจากความสูงของหน้าจอ จำกัด ) คุณจึงต้องปิด / ซ่อนรายการที่ไม่จำเป็นจากจอแสดงผล ในตัวอย่างนี้เราจะซ่อนแถวกลางของเค้าโครงส่วน
เปิดการตั้งค่าจากแถวที่สองถึงแถวสุดท้ายในส่วน "ลิ้นชักส่วนท้าย" ภายใต้แท็บขั้นสูงอัปเดตตัวเลือกการเปิดเผยเพื่อปิดสายบนโทรศัพท์และแท็บเล็ต
การเพิ่มรหัสที่กำหนดเอง
ในการเพิ่มฟังก์ชันการคลิกและการสลับในลิ้นชักส่วนท้ายเราจำเป็นต้องเพิ่ม CSS และ JQuery ที่กำหนดเองในหน้า ในการดำเนินการนี้ให้สร้างโมดูลโค้ดใหม่ภายใต้โมดูล Blurb ที่ใช้สำหรับปุ่ม
จากนั้นวางรหัสต่อไปนี้ในพื้นที่รหัส:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
บันทึกการเปลี่ยนแปลง
อย่าลืมบันทึกเค้าโครงก่อนออกจากโปรแกรมแก้ไข
บันทึกการเปลี่ยนแปลงในตัวสร้างธีมด้วย
ผลสุดท้าย
ตอนนี้เราสามารถไปที่หน้าใดก็ได้ของคุณ เว็บไซต์เว็บ เพื่อดูผลลัพธ์สุดท้าย
คิดสุดท้าย
หวังว่าลิ้นชักส่วนท้ายแบบลอยจะช่วยคุณได้ ส่งเสริม เนื้อหาอย่างสนุกสนานและเข้าถึงได้ เช่นเดียวกับลิ้นชักอื่นๆ คุณสามารถเติมอะไรก็ได้ที่คุณนึกออก
ทรัพยากรอื่น ๆ
นี่คือรายการบทช่วยสอนที่สามารถช่วยให้คุณประสบความสำเร็จมากขึ้นด้วยฟีเจอร์ภายในของ Divi
- วิธีสร้างกล่องเครื่องมือชุดรูปแบบบน Divi
- วิธีการสร้างมาตราการส่งเสริมการขายแบบเคลื่อนไหวใน Divi
- วิธีปรับแต่งกริดบน Divi
แปลจาก: ธีมที่สง่างาม