วิธีเปลี่ยนเป็น Dark Layout ใน 5 ขั้นตอนโดยใช้ฟีเจอร์ประสิทธิภาพของ Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ใน 5 ขั้นตอนเท่านั้น เราจะเปลี่ยนหน้า Landing Page แบบไลท์ไลท์ของ Web Freelancer Layout Pack ให้เป็นหน้ามืด

อัปโหลดหน้า Landing Page ของ Freelancer

เพิ่มหน้าใหม่และเปิดใช้งาน Visual Builder

เริ่มต้นด้วยการเพิ่มหน้าใหม่ ตั้งชื่อหน้าของคุณและเปลี่ยนไปใช้ Visual Builder

อัปโหลด Web Freelancer Layout Pack

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

ค้นหาแลนดิ้งเพจของ Web Freelancer Layout Pack ในรายการชุดเลย์เอาต์ฟรี และอัปโหลดโดยคลิกที่ปุ่มสีเขียวที่ระบุว่า 'ใช้เลย์เอาต์นี้'

ขั้นตอนที่ 1: เปลี่ยนสีพื้นหลังโดยรวม

เปลี่ยนสีพื้นหลังของส่วนแรก

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

ขยายสไตล์ไปยังทุกส่วน

ทันทีที่คุณเพิ่มสีพื้นหลัง ให้คลิกขวาที่สีนั้นแล้วคลิกตัวเลือก 'ขยายสีพื้นหลัง'

เมื่อคุณทำเสร็จแล้ว ให้เลือกขยายสีพื้นหลังไปยังทุกส่วนในหน้า

ขั้นตอนที่ 2: เปลี่ยนสีข้อความ

เปิดโมดูลส่วนหัวแบบเต็มความกว้าง & เปลี่ยนสีข้อความ

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

ขยายสไตล์ไปยังทุกโมดูล

จากนั้น ขยายสีข้อความอ่อนนี้โดยคลิกขวาแล้วเลือกตัวเลือก 'ขยายสีข้อความ'

ขยายสีใหม่นี้ไปยังโมดูลทั้งหมดทั่วทั้งหน้า

เปลี่ยนสีที่กำหนดเองโดยใช้คุณสมบัติการเลือกหลายรายการ

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

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

ขั้นตอนที่ 3: เปลี่ยนปุ่ม

เปิดการตั้งค่าปุ่มเดียวของส่วนหัวแบบเต็ม

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

ขยายรูปแบบของปุ่มไปยังปุ่มทั้งหมดบนหน้า

จากนั้น คลิกขวาที่การตั้งค่าปุ่มหนึ่งแล้วเลือกตัวเลือก 'ขยายรูปแบบปุ่มหนึ่ง'

ขยายลักษณะปุ่มไปยังปุ่มทั้งหมดทั่วทั้งหน้า

เปลี่ยนสีข้อความของปุ่ม 2 ในส่วนฮีโร่

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

ขยายสไตล์ไปยังส่วนหัวแบบเต็มความกว้างทั้งหมดบนหน้า

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

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

ขั้นตอนที่ 4: ลบ Custom Margin & แทนที่ด้วย Custom Padding

ลบ Custom Margin

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

ใช้ช่องว่างภายในแบบกำหนดเองแทน

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

ขั้นตอนที่ 5: ค้นหา & เปลี่ยนการตั้งค่าการออกแบบพิเศษ

กำหนดการตั้งค่าการออกแบบพิเศษ

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

• กล่องเงา
• พื้นหลังคอลัมน์
• ไอคอนสี
• ตัวแบ่งสี
• …

ใช้ค้นหาและแทนที่บน Row Box Shadow Color

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

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

เปลี่ยนการตั้งค่าที่เกิดขึ้นครั้งเดียวด้วยตนเอง

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

ดูตัวอย่าง

มาดูผลลัพธ์สุดท้ายหลังจากผ่านห้าขั้นตอนกัน

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

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