Divi ธีม WordPress ยอดนิยมมีชื่อเสียงในด้านโมดูลอเนกประสงค์ที่ช่วยให้นักออกแบบและนักพัฒนาเว็บไซต์สามารถสร้างเลย์เอาต์ที่น่าทึ่งได้อย่างง่ายดาย ในบรรดาคลังโมดูลที่น่าประทับใจ Divi Divider Module มีความโดดเด่นในฐานะเครื่องมือพิเศษที่ช่วยให้ผู้ใช้สามารถประดิษฐ์ตัวแบ่งที่น่าดึงดูดได้ ในบล็อกโพสต์นี้ เราจะเจาะลึกโลกอันน่าหลงใหลของตัวแบ่งการไล่ระดับสี และสำรวจว่าคุณจะสามารถใช้ประโยชน์จากโมดูล Divi Divider เพื่อปรับปรุงการออกแบบของคุณได้อย่างไร เราจะมาดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของตัวแบ่งการไล่ระดับสี และมอบตัวอย่างที่สร้างแรงบันดาลใจเพื่อจุดประกายความคิดสร้างสรรค์ของคุณ
ดูตัวอย่าง
นี่คือตัวอย่างว่าการออกแบบไล่ระดับสีของเราจะมีลักษณะอย่างไรในตอนท้าย
วิธีสร้างตัวแบ่งไล่ระดับสีด้วยโมดูลตัวแบ่งของ Divi
มีหลายวิธีในการสร้างตัวแบ่งโดยใช้โมดูลตัวแบ่งของ Divi ตามค่าเริ่มต้น โมดูลจะแสดงเส้นเป็นตัวแบ่ง อย่างไรก็ตาม คุณสามารถปิดใช้งานบรรทัดนี้และใช้การตั้งค่าพื้นหลังของโมดูลเพื่อสร้างตัวแบ่งที่สามารถปรับแต่งได้โดยใช้ตัวเลือกพื้นหลังต่างๆ เช่น สี การไล่ระดับสี รูปภาพ และอื่นๆ แทนที่จะแสดงตัวแบ่งตามจริง เราจะมุ่งเน้นไปที่การจัดสไตล์คอนเทนเนอร์ของตัวแบ่งเพื่อสร้างตัวแบ่งที่มีสไตล์ไม่ซ้ำใคร
ซ่อนตัวแบ่ง
ขั้นตอนนั้นง่าย เพิ่มโมดูลตัวแบ่งให้กับเค้าโครงของคุณก่อน จากนั้นจึงซ่อนตัวแบ่งไว้ใต้แท็บเนื้อหา
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลย
พื้นหลังตัวแบ่ง
จากนั้นเลือกประเภทพื้นหลังที่คุณต้องการใช้จากเมนูการตั้งค่าพื้นหลังบนแท็บเนื้อหา เราจะเน้นที่ตัวเลือกการไล่ระดับสีพื้นหลังในโพสต์นี้
เพิ่มขนาดและระยะห่าง
หากต้องการสร้างตัวแบ่งที่มีสไตล์ในขนาดหรือรูปร่างใดๆ ให้ใช้ตัวเลือกขนาดและระยะห่างบนแท็บออกแบบเพื่อปรับความสูงและความกว้างของคอนเทนเนอร์ของตัวแบ่ง หากต้องการสร้างขนาดที่ต้องการ ให้ใช้ความกว้างและความสูง ความกว้างสูงสุดและความสูงสูงสุด การจัดแนวโมดูล และการเสริมด้านบนและด้านล่าง
เพิ่มรัศมีเส้นขอบ
หากต้องการจัดสไตล์รูปร่างเพิ่มเติม ให้เพิ่มตัวเลือกเส้นขอบ เช่น รัศมีเส้นขอบ มุมสามารถปรับร่วมกันหรือแยกกันเพื่อให้ได้รูปทรงที่น่าหลงใหล สำหรับการออกแบบพิเศษ คุณสามารถเพิ่มความกว้างของเส้นขอบ ลักษณะ ฯลฯ เพิ่มเติมได้
ตัวแบ่งไล่ระดับสี
เราจะใช้แลนดิ้งเพจจาก Home Baker Layout Pack ฟรีที่รวมอยู่ใน Divi สำหรับตัวแบ่งการไล่ระดับสีตัวแรกของเรา อาร์ตเวิร์คของเลย์เอาต์แพ็กนี้มีการไล่ระดับสีน้ำตาลและโครงร่างสีเข้มที่ทรงพลัง เราจะจำลองสิ่งนี้ด้วยการไล่ระดับสีของเราโดยใช้ชุดสีของชุดเค้าโครง เราจะใช้โมดูลตัวแบ่งที่มีอยู่แล้วในส่วนฮีโร่สำหรับภาพประกอบแรกของเรา สิ่งนี้ตรงไปตรงมา แต่ก็สร้างผลกระทบต่อภาพอย่างมาก นี่คือเค้าโครงก่อนที่เราจะเพิ่มโมดูลตัวแบ่งเพื่อใช้อ้างอิง
ทัศนวิสัย
เลือกไม่สำหรับแสดงตัวแบ่งภายใต้ตัวเลือกการมองเห็นสำหรับโมดูลตัวแบ่ง
- แสดงตัวแบ่ง: ไม่ใช่
การไล่ระดับสี
เลือกแท็บการไล่ระดับสีพื้นหลังโดยเลื่อนลงไปที่พื้นหลัง เราจะเพิ่มการหยุดไล่ระดับห้าจุดสำหรับอันนี้ ค่าเริ่มต้นสำหรับพารามิเตอร์การไล่ระดับสีอื่นๆ จะถูกนำมาใช้ พารามิเตอร์สำหรับการหยุดไล่ระดับสีแต่ละรายการมีดังต่อไปนี้
- การหยุดไล่ระดับสีแรก: 0px, #dcc087
- หยุดการไล่ระดับสีที่สอง: 16px, #e6b060
- หยุดการไล่ระดับสีที่สาม: 22px, #f19d33
- หยุดไล่ระดับสีที่สี่: 31px, #f49826
- หยุดไล่ระดับสีที่ห้า: 48px, #3b261e
ควรใช้พิกเซลเป็นหน่วยการไล่ระดับสี เฉดสีที่เราตามหามีวางจำหน่ายแล้ว สิ่งที่เหลืออยู่ที่ต้องทำคือปรับขนาดให้เหมาะสม
- หน่วยไล่ระดับสี: พิกเซล
การปรับขนาด
จากนั้นเลือกแท็บออกแบบ ใส่ 100% สำหรับความกว้างใต้ขนาด อุปกรณ์ทั้งสามขนาดควรมีการตั้งค่าความสูงเป็น 40px การปิดแบบโมดูลาร์จะบันทึกการตั้งค่าของคุณ
- ความกว้าง: 100%
- ส่วนสูง: 40px
ตัวอย่างสุดท้าย
ตอนนี้เรามีตัวอย่างสุดท้ายของการออกแบบการไล่ระดับสีของเราที่ใช้งานจริง
สิ้นสุดความคิด
นั่นเป็นการสรุปการสนทนาของเราเกี่ยวกับการใช้โมดูลตัวแบ่งของ Divi เพื่อสร้างตัวแบ่งการไล่ระดับสี หากต้องการสร้างตัวแบ่งการไล่ระดับสีแบบกำหนดเอง ให้ใช้ตัวเลือกการไล่ระดับสีในโมดูลตัวแบ่ง เราสามารถสร้างตัวแบ่งการไล่ระดับสีในขนาดและรูปร่างต่างๆ ได้โดยใช้ตัวเลือกมุมเส้นขอบ ระยะห่าง และขนาด เราสามารถออกแบบตัวแบ่งการไล่ระดับสีที่โดดเด่นซึ่งจะโดดเด่นจากคนอื่นๆ ด้วยตัวเลือกพื้นฐานเพียงไม่กี่อย่าง
