วิธีสร้างการเปิดเผยส่วนท้ายด้วย Divi

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

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

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

วิธีสร้างการเปิดเผยส่วนท้ายด้วย Divi

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มโค้ด CSS ที่จำเป็น

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

สองสิ่งสำคัญที่เราต้องการในโค้ดของเราคือ z-index และ margin bottom สำหรับเนื้อหาหลัก เพื่อให้แน่ใจว่าส่วนท้ายจะพอดี เราจำเป็นต้องทราบความสูงของส่วนท้าย ตามปกติ ส่วนท้ายที่ใช้มีค่า 53px แต่อาจเป็นไปได้ว่าคุณได้เปลี่ยนความสูงตามความต้องการของคุณ หลังจากแสดงวิธีเพิ่มส่วนท้ายให้เปิดเผยตามมาตรฐานแล้ว เราจะแสดงวิธีเพิ่มส่วนท้ายให้พอดีกับความสูงของส่วนท้าย

เพิ่มโค้ด CSS ที่จำเป็นผ่านตัวเลือกธีม

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

หากต้องการเพิ่มโค้ด ให้ไปที่ แดชบอร์ด WordPress > Divi > ตัวเลือกธีม > และคัดลอกและวางโค้ด CSS ต่อไปนี้ลงในฟิลด์ Custom CSS ที่ด้านล่างของแท็บ:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

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

เพิ่มโค้ด CSS ที่จำเป็นผ่านเครื่องมือปรับแต่งธีม

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

ในการเพิ่มโค้ดลงในเครื่องมือปรับแต่งธีม ให้ไปที่ แดชบอร์ด WordPress > ลักษณะที่ปรากฏ > ปรับแต่ง > เลื่อนลงไปที่ ' CSS เพิ่มเติม' > และเพิ่มโค้ด CSS ต่อไปนี้:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

เพิ่มโค้ด CSS ที่จำเป็นลงในหน้าเดียวเท่านั้น

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

หากต้องการเพิ่มโค้ด CSS ในหน้าใดหน้าหนึ่งโดยเฉพาะ ให้เปิดหน้านั้นขึ้นมา ที่มุมบนขวาของ Divi Builder ในหน้านั้น คุณจะเห็นไอคอนต่อไปนี้

คลิกที่ไอคอนและวางโค้ดต่อไปนี้ลงในฟิลด์ CSS ที่กำหนดเอง:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

เมื่อคุณบันทึกการตั้งค่าแล้ว คุณจะเห็นส่วนท้ายปรากฏบนหน้านั้นโดยเฉพาะ

เปลี่ยนความสูงของส่วนท้าย

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

คุณสามารถเลือกความสูงที่คุณต้องการกำหนดให้กับส่วนท้ายได้ทุกเมื่อ เราต้องตั้งค่าความสูงสำหรับ CSS ID สองรายการ: ส่วนท้ายหลักและส่วนท้ายด้านล่าง โดยการปรับความสูงในสองตำแหน่งนี้ ส่วนท้ายจะเข้าที่ แน่นอน เมื่อคุณทำเสร็จแล้ว คุณต้องเปลี่ยนระยะขอบด้านล่างของเนื้อหาหลักของคุณด้วย ตัวอย่างเช่น หากคุณต้องการส่วนท้ายที่มีความสูง 60px คุณจะต้องมีโค้ดบรรทัดต่อไปนี้:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

คุณจะเห็นว่ามีสามตำแหน่งที่เราต้องการค่า '60px' หากคุณมีค่าความสูงอื่นที่คุณต้องการกำหนดให้กับส่วนท้ายของคุณ ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนค่าดังกล่าวทั้งสามตำแหน่ง เนื้อหาหลัก ส่วนท้ายหลัก และส่วนท้ายของส่วนท้าย

เพิ่ม CSS Box Shadow

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

หากต้องการเพิ่มเงาของกล่องในส่วนท้ายของคุณให้ใช้โค้ดต่อไปนี้:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

แค่นั้นแหละ! การเปิดเผยส่วนท้ายของคุณควรทำงานได้ดี

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย Demja / shutterstock.com