วิธีเพิ่มการออกแบบพื้นหลังที่สร้างสรรค์ให้กับแถบด้านล่างสุดของ Divi

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

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

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

แอบมอง

นี่คือตัวอย่างการออกแบบบางส่วนที่คุณสามารถสร้างได้ด้วยบทช่วยสอนนี้

การปรับแต่งแถบส่วนท้ายด้านล่างในตัวปรับแต่งธีม

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

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

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

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

การสร้างการออกแบบพื้นหลังส่วนสำหรับแถบด้านล่าง

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

หากคุณยังไม่ได้สร้าง ให้สร้างหน้าใหม่และเลือก "สร้างจากศูนย์" จากนั้นแทรกเค้าโครงหนึ่งคอลัมน์สำหรับแถวของส่วน

ไม่จำเป็นต้องเพิ่มโมดูลในแถว เนื่องจากเราต้องการเฉพาะส่วนและแถวสำหรับการออกแบบพื้นหลังเท่านั้น

จากนั้นไปที่การตั้งค่าแถวและเพิ่มระยะห่างดังนี้:

มาร์จิ้นที่กำหนดเอง: 0px บน, 0px ล่าง
Custom Padding (เดสก์ท็อป): 80px บน, 80px ด้านล่าง
Custom Padding (แท็บเล็ต): 100px บน, 100px ด้านล่าง

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

ตอนนี้ ไปที่การตั้งค่าส่วนและอัปเดตการเว้นวรรคดังนี้:

มาร์จิ้นที่กำหนดเอง (เดสก์ท็อป): -55px ด้านล่าง
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -94px Bottom
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

ระยะขอบด้านล่าง -55px ดึงแถบด้านล่างลงในพื้นที่ส่วนเพื่อให้การออกแบบใดก็ตามที่เราเพิ่มในส่วนของเราจะอยู่ด้านหลังแถบด้านล่างของเรา แถบด้านล่างโดยค่าเริ่มต้นจะสูง 54px บนเดสก์ท็อปและสูงประมาณ 94px บนแท็บเล็ต ดังนั้นคุณจึงต้องมีระยะขอบติดลบมากขึ้นสำหรับแท็บเล็ต

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

การเพิ่มตัวแบ่งด้านล่าง

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

สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
สีของตัวแบ่ง: #121212
ความสูงของตัวแบ่ง: 120px (เดสก์ท็อป), 150px (แท็บเล็ต), 150px (สมาร์ทโฟน)
ตัวแบ่งแนวนอนซ้ำ: 0.9x (เดสก์ท็อป), 0.5x (แท็บเล็ต), 0.5x (สมาร์ทโฟน)
ตัวคั่นพลิก: แนวตั้ง

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

ใต้แท็บขั้นสูง ให้เพิ่มข้อมูลโค้ด CSS ที่กำหนดเองในองค์ประกอบหลัก:

z-index: 0;

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

และมันจะปรับอย่างสวยงามบนมือถือเช่นกัน

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

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

นี่คือตัวอย่างบางส่วน

การใช้ตัวแบ่งด้านบนพร้อมการไล่ระดับสีพื้นหลังแบบกำหนดเอง

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

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

ตอนนี้คุณสามารถเพิ่มรูปแบบตัวแบ่งด้านบนให้กับส่วนของคุณเพื่อสร้างรูปลักษณ์ใหม่

ต่อไปนี้คือตัวอย่างการออกแบบบางส่วนที่เป็นไปได้โดยการเปลี่ยนพื้นหลังการไล่ระดับสีและลักษณะตัวแบ่ง

การรวมตัวแบ่งกับการไล่ระดับสีพื้นหลังสำหรับการออกแบบกรอบเส้นขอบหลากสี

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

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

เมื่อเพิ่มส่วนลงในหน้าแล้ว เราก็พร้อมที่จะปรับแต่ง

สำหรับผู้เริ่มต้น ให้ไปที่การตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

พื้นหลังไล่ระดับสีซ้าย: #29c4a9
พื้นหลังไล่ระดับสีซ้าย: #2b87da

ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสิ้นสุด: 0%

ตอนนี้เพิ่มตัวแบ่งด้านบนดังนี้:

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสี: #ffffff
ความสูงของตัวแบ่ง: 120px (เดสก์ท็อป), 150px (แท็บเล็ต), 150px (สมาร์ทโฟน)
ตัวแบ่งแนวนอนซ้ำ: 0.9x (เดสก์ท็อป), 0.5x (แท็บเล็ต), 0.5x (สมาร์ทโฟน)
ตัวคั่นพลิก: แนวตั้ง

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

ไปที่การตั้งค่าแถวและเพิ่มการไล่ระดับสีพื้นหลังดังนี้:

พื้นหลังไล่ระดับสีซ้าย: #df52ff
พื้นหลังไล่ระดับสีซ้าย: #2b87da

ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสิ้นสุด: 0%

หากต้องการปรับความกว้างของแต่ละส่วนสีสำหรับพื้นหลังให้เท่ากัน ให้กำหนดความกว้างที่กำหนดเองของแถวเป็น 50%

นี่คือการออกแบบขั้นสุดท้าย!

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

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

นอกจากนี้ คุณอาจสนใจจัดกรอบเมนูการนำทางโดยใช้เทคนิคที่คล้ายคลึงกัน

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

ไชโย!