Divi: วิธีใช้ตัวเลือก "Gradient Repeat" เพื่อสร้างรูปแบบพื้นหลังที่กำหนดเอง

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

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

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

ขอเริ่มต้น

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างแบบฟอร์มการติดต่อที่ปรากฏขึ้นหลังจากคลิกที่ปุ่ม

การไล่ระดับสีซ้ำคืออะไร

ตัวเลือก Gradient Repeat สร้างรูปแบบตาม Gradient Stops เกรเดียนต์สต็อปคือการวัดที่กำหนดว่าสีจะปรากฏที่ใดและหยุดในการไล่ระดับสี Divi และตัวสร้างไล่ระดับสีจะใช้จุดหยุดเหล่านี้เพื่อสร้างรูปแบบ

สีสุดท้ายบอกการไล่ระดับสีที่จุดพักอยู่ในการไล่ระดับสี คุณสามารถมีสีได้มากเท่าที่คุณต้องการก่อนเบรกพอยต์นี้

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

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

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

เลื่อนไปที่ พื้นหลัง . เลือกแท็บ พื้นหลังไล่ระดับสี และคลิก เพิ่มการไล่ระดับสีพื้นหลัง.

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

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

หน่วยไล่ระดับ

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

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

เปอร์เซ็นต์ (เปอร์เซ็นต์)

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

พิกเซล (px)

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

ความสูงของหน้าต่าง (vh)

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

ความกว้างของหน้าต่าง (vw)

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

ตัวอย่างการใช้ตัวเลือก "Gradient Repeat"

อ่าน: Divi: วิธีสร้างแท็บเล็ตที่มีเนื้อหาทีเซอร์แบบเลื่อนได้

สำหรับตัวอย่างของเรา เราใช้ส่วนคำกระตุ้นการตัดสินใจของหน้าแรกของ ฟรีแพ็ครูปแบบการฝังเข็ม มีอยู่ใน Divi

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

จากนั้นเลือก ไอคอนรูปเฟือง สำหรับคอลัมน์แรก

คอลัมน์หนึ่งการไล่ระดับสี

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

• ไล่ระดับหยุด:
  • 0px: #f4d5b8
  • 100px: rgba(244,213,184,0)

การตั้งค่าการไล่ระดับสี

• ประเภทการไล่ระดับสี: เชิงเส้น
• ตำแหน่งไล่ระดับ: 180 องศา
• ทำซ้ำการไล่ระดับสี: NO
• หน่วยไล่ระดับ: เปอร์เซ็นต์
• การไล่ระดับสีสี่เหลี่ยมเหนือภาพพื้นหลัง: NO

การเว้นวรรค

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

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

• การขยายความ
  • ด้านบน: 180px
  • ซ้าย: 5%
  • ซ้าย: 80px

ตัวอย่างหนึ่ง

ตัวอย่างแรกของเราสร้างรูปแบบการทำซ้ำในแนวทแยงที่มีเส้นบางๆ

อันนี้มีการไล่ระดับสีสามสต็อป

• ไล่ระดับหยุด:
  • 4px: #fff6ee
  • 9px: #ede3dc
  • 14px: #e8ded7

ใช้การตั้งค่าต่อไปนี้

• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 156 องศา
• ทำซ้ำการไล่ระดับสี: ใช่
• หน่วยไล่ระดับ: พิกเซล
• Square Gradient เหนือภาพพื้นหลัง: no

ตัวอย่างที่สอง

ตัวอย่างที่สองของเราสร้างรูปแบบการทำซ้ำในแนวทแยงที่มีเส้นใหญ่ขึ้น

อันนี้มีการไล่ระดับสีสามสต็อป

• ไล่ระดับหยุด:
  • 4px: #fff6ee
  • 43px: #ede3dc
  • 50px: #e8ded7

สำหรับการตั้งค่าการไล่ระดับสี

• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 156 องศา
• ทำซ้ำการไล่ระดับสี: ใช่
• หน่วยไล่ระดับ: พิกเซล
• การไล่ระดับสีสี่เหลี่ยมเหนือภาพพื้นหลัง: NO

ตัวอย่างที่สาม

ตัวอย่างที่สามของเราสร้างรูปแบบวงกลมที่มีวงกลมขนาดกลางซ้ำ

อันนี้มีการไล่ระดับสีสามสต็อป

• ไล่ระดับหยุด
  • 4px: #fff6ee
  • 7px: #e8ded7
  • 8px: #ede3dc

ใช้การตั้งค่าการไล่ระดับสีต่อไปนี้

• ประเภทการไล่ระดับสี: วงกลม
• ตำแหน่งไล่ระดับ: ด้านล่าง
• ทำซ้ำการไล่ระดับสี: ใช่
• หน่วยไล่ระดับ: เปอร์เซ็นต์
• การไล่ระดับสีสี่เหลี่ยมเหนือภาพพื้นหลัง: NO

ตัวอย่าง 4

ตัวอย่างที่สี่ของเราสร้างรูปแบบวงกลมที่มีวงกลมขนาดใหญ่

อันนี้มีการไล่ระดับสีสามสต็อป

• ไล่ระดับหยุด:
  • 4px: #fff6ee
  • 23px: #e8ded7
  • 31px: #ede3dc

สำหรับการตั้งค่าการไล่ระดับสี ให้เปลี่ยนแปลงดังนี้:

• ประเภทการไล่ระดับสี: วงกลม
• ตำแหน่งไล่ระดับ: กึ่งกลาง
• ทำซ้ำการไล่ระดับสี: ใช่
• หน่วยไล่ระดับ: เปอร์เซ็นต์
• Square Gradient เหนือภาพพื้นหลัง: no

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

Gradient Repeat ทำงานได้ดีกับการปรับแต่งทั้งหมดเหล่านี้เพื่อสร้างรูปแบบพื้นหลังที่กำหนดเองที่น่าสนใจได้อย่างง่ายดาย

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

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...