ข้ามไปยังเนื้อหาหลัก

วิธีการสร้างลิ้นชักเคลื่อนไหวใน Divi

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

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

ด้วยกระบวนการที่เรากำลังจะใช้ส่วน Divi ใด ๆ (และเนื้อหา) สามารถแปลงเป็นลิ้นชักส่วนท้ายได้ในเวลาไม่กี่นาที

วิธีการเพิ่มเทมเพลตลิ้นชักท้ายกระดาษลงในไซต์ Divi ของคุณ

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

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

จากนั้นไปที่แดชบอร์ด WordPress และไปที่ Divi> Theme Builder

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

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

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

นำเข้ารูปแบบ Divi

สุดท้ายให้บันทึกการเปลี่ยนแปลงของตัวสร้างธีมและแสดงเพจสดเพื่อดูแถบท้ายกระดาษคงที่

บันทึกการเปลี่ยนแปลงเค้าโครง Divi

ตอนนี้ไปที่บทช่วยสอนโอเคไหม

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

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

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

การเลือกบรรณาธิการ Divi

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

เพิ่มส่วนท้ายของโมเดล Divi

เพิ่มเค้าโครงที่กำหนดไว้ล่วงหน้าไปยังเค้าโครงท้ายกระดาษส่วนกลาง

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

เลือกโมเดล Divi ที่สร้างไว้ล่วงหน้า

ในหน้าต่างป๊อปอัปโหลดจากไลบรารีให้ค้นหาเค้าโครงหน้า Landing Page ของเครื่องเขียน จากนั้นคลิกที่ "ใช้เค้าโครงนี้"

ใช้แบบจำลอง Divi

ลบเนื้อหาที่ไม่ต้องการออกจากการจัดวางล่วงหน้า

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

ลบส่วนที่ไม่จำเป็น

ย้ายและติดป้ายทั้งสองส่วน

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

ส่วนท้าย Divi

เปลี่ยนข้อความในส่วนล่างเพื่ออ่าน“ Footer Drawer” นี่คือส่วนที่เราจะใช้เป็นเนื้อหาของลิ้นชักส่วนท้ายของเรา

แก้ไขป้ายกำกับส่วนท้าย Divi

ส่วนที่ 2: การสร้างลิ้นชักท้ายกระดาษคงที่

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

การสร้างปุ่มลิ้นชักท้ายกระดาษ

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

ในส่วนท้ายกระดาษด้านล่างเพิ่มแถวใหม่ไปยังคอลัมน์

ลิ้นชักเท้าคงที่

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

Divi เค้าโครงการเลือก

การขยายแถว

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

  • ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
ระยะห่างระหว่างตัวหาร Confiuration

มาตราช่องว่างภายใน

จากนั้นเปิดการตั้งค่าในส่วน "ส่วนท้ายของลิ้นชัก" และอัปเดตช่องว่างภายในดังนี้:

การกำหนดค่าระยะห่างของส่วน Divi

ในการสร้างปุ่มที่คลิกได้ซึ่งสลับลิ้นชักส่วนท้ายเราจะใช้โมดูลการแจ้งเตือนที่มีไอคอน และเราจะทำให้มันมีรูปทรงหยดน้ำที่ไม่เหมือนใครโดยการรวมรูปทรงสี่เหลี่ยมของ Blurb pod container เข้ากับไอคอนวงกลม

นี่คือวิธี

เพิ่มโมดูล Blurb

เพิ่มโมดูลข้อความนำเสนอไปยังบรรทัด "ปุ่มลิ้นชัก" ที่ด้านบนของส่วน

Divi ลิ้นชักส่วนท้าย
ประกาศเนื้อหา / ไอคอน

จากนั้นลบชื่อเริ่มต้นและเนื้อหาเนื้อหาแล้วเลือกไอคอนลูกศรที่ชี้ไปที่มุมบนซ้าย (ดูภาพหน้าจอ) เรากำลังใช้ไอคอนหมุนบางส่วนเพราะเราจะหมุนในภายหลัง

เลือกไอคอนส่วนท้ายลิ้นชัก divi
การออกแบบการประกาศแจ้ง

จากนั้นให้ข้อความนำเสนอดังต่อไปนี้:

  • สีพื้นหลัง: # 081540
ปรับเปลี่ยนพื้นหลัง Divi

จากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:

  • ไอคอนสี: #eeeeee
  • ไอคอนวงกลม: ใช่
  • สีวงกลม: # 081540
  • ใช้ขนาดตัวอักษรของไอคอน: ใช่
  • ขนาดตัวอักษรของไอคอน: 17 พิกเซล
ปรับแต่งปุ่ม blurb divi
ขนาดตัวอักษรนำเสนอ

ตอนนี้ให้โมดูลมีความสูงและความกว้างดังนี้

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • ความกว้าง: 30px
  • ความสูง: 30px

ซึ่งจะทำให้ไอคอนวงกลมล้นเข้าไปในที่เก็บข้อความเพื่อสร้างรูปหยดน้ำ

แก้ไขการออกแบบปุ่ม Divi
ประกาศตำแหน่ง

จากนั้นให้ข้อความนำเสนอตำแหน่งที่แน่นอนที่กึ่งกลางด้านบนของส่วน

  • ตำแหน่ง: สัมบูรณ์
  • สถานที่: Top Center
ปรับเปลี่ยนตำแหน่งปุ่ม Divi
ประกาศการตั้งค่าการแปลง

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

อัปเดตรายการต่อไปนี้:

  • แปลงแกน X แปล: -50%
  • แปลงการแปลแกน Y: -250%
  • เปลี่ยนการหมุนแกน Z: -45 องศา

จากนั้นลบภาพเคลื่อนไหวไอคอนเริ่มต้น:

  • ภาพเคลื่อนไหว / ไอคอนภาพเคลื่อนไหว: ไม่มีภาพเคลื่อนไหว
ปุ่ม Return Divi

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

  • คลาส CSS: ลิ้นชักเป้าหมาย
กำหนดตัวเลือก Divi

การตั้งค่าส่วนท้ายลิ้นชัก

ตอนนี้เราจะซ่อนส่วน "ลิ้นชักส่วนท้าย" โดยใช้ตัวเลือกการแปลงการแปล เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

  • แปลงแปลแกน Y: 100%

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

แปลงส่วน divi

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

เพิ่มคลาส CSS ไปยังส่วนท้ายกระดาษ

ภายใต้แท็บขั้นสูงเพิ่มคลาส CSS ต่อไปนี้:

  • CSS คลาส: มีการแปลง
เพิ่มชั้นเรียนมี Divi การเปลี่ยนแปลง

ส่วนท้ายกระดาษลิ้นชักตำแหน่งคงที่

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

อัปเดตตำแหน่งของส่วน "ท้ายกระดาษ" ดังต่อไปนี้:

  • ตำแหน่ง: แก้ไขแล้ว
  • ที่ตั้ง: ด้านล่างซ้าย
  • ดัชนี Z: 13
ปรับเปลี่ยนตำแหน่งบนมุม Divi

ปิดเนื้อหามือถือ

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

ซ่อนส่วนบนมือถือ

เปิดการตั้งค่าจากแถวที่สองถึงแถวสุดท้ายในส่วน "ลิ้นชักส่วนท้าย" ภายใต้แท็บขั้นสูงอัปเดตตัวเลือกการเปิดเผยเพื่อปิดสายบนโทรศัพท์และแท็บเล็ต

ควบคุมส่วน Divi การมองเห็น

การเพิ่มรหัสที่กำหนดเอง

ในการเพิ่มฟังก์ชันการคลิกและการสลับในลิ้นชักส่วนท้ายเราจำเป็นต้องเพิ่ม CSS และ JQuery ที่กำหนดเองในหน้า ในการดำเนินการนี้ให้สร้างโมดูลโค้ดใหม่ภายใต้โมดูล Blurb ที่ใช้สำหรับปุ่ม

เพิ่มรหัสโมดูล

จากนั้นวางรหัสต่อไปนี้ในพื้นที่รหัส:

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

.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

แปลจาก: ธีมที่สง่างาม

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน
0 หุ้น
หุ้น
ทวีต
Enregistrer