การเปรียบเทียบประเภทการไล่ระดับสีในตัวสร้างการไล่ระดับสีของ Divi

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

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

ประเภทการไล่ระดับสี Divi คืออะไร?

ตัวสร้างไล่ระดับสีใหม่ของ Divi เพิ่มคุณสมบัติการไล่ระดับสีใหม่หลายอย่างซึ่งรวมถึงประเภทการไล่ระดับสี มีสี่ประเภทการไล่ระดับสีให้เลือก:

• เชิงเส้น
• หนังสือเวียน
• วงรี
• ทรงกรวย

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

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

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

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

ตัวอย่างประเภทการไล่ระดับสี

สำหรับตัวอย่างประเภทการไล่ระดับสี ฉันใช้ส่วนฮีโร่จากหน้า Landing Page ของ Bed and Breakfast Layout Pack ฟรีที่มีอยู่ใน Divi ส่วนนี้มีการไล่ระดับสีอยู่แล้ว แต่เราจะแทนที่มันและทำการทดลองบางอย่าง เราสามารถลบการไล่ระดับสีพื้นหลังดั้งเดิมหรือแก้ไขได้ ผลลัพธ์ก็เหมือนกัน เพื่อความง่าย ฉันจะแก้ไข

ฉันปรับแต่งข้อความชื่อเรื่องโดยเปลี่ยนจากสีดำเป็นสีขาว

ประเภทการไล่ระดับสีเชิงเส้น

การไล่ระดับสีเชิงเส้นแสดงการไล่ระดับสีราวกับว่ามันกระจายไปทั่วหน้า

ตัวอย่างการไล่ระดับสีเชิงเส้นแรก

มาดูตัวอย่างแรกของเรา โดยจะแสดงสีอ่อนกว่าทางด้านซ้ายของหน้าจอและสีเข้มขึ้นทางด้านขวา โดยมีการเปลี่ยนสีระหว่างกันอย่างราบรื่น

ในการสร้างตัวอย่างนี้ ให้เพิ่มสองสี อันดับแรก คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 0% ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 97%

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 0%)
• สี 2: rgba(0,10,4,0.76) (ที่ตำแหน่ง 97%)

จากนั้น เปลี่ยน Gradient Type เป็น Linear และตั้งค่า Direction เป็น 131deg ห้ามทำซ้ำ ตั้งค่า หน่วย เป็นเปอร์เซ็นต์ วางการไล่ระดับสีเหนือภาพพื้นหลัง

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

ตัวอย่างการไล่ระดับสีเชิงเส้นที่สอง

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

หากต้องการสร้างสิ่งนี้ ให้เพิ่ม Gradient Stops สามตัว อันดับแรก คือ rgba(18,76,41,0.76) ที่ตำแหน่ง 13% ที่ สอง คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 13% สี 3 คือ rgba (18,76,41,0.76) ที่ตำแหน่ง 34%

• สี 1: rgba (18,76,41,0.76) (ที่ตำแหน่ง 13%)
• สี 2: rgba(92,158,82,0.76) (ที่ตำแหน่ง 13%)
• สี 3: rgba (18,76,41,0.76) (ที่ตำแหน่ง 34%)

จากนั้นตั้งค่า Gradient Type เป็น Linear และตั้งค่า Direction เป็น 90deg ห้ามทำซ้ำ เปลี่ยน หน่วย เป็นเปอร์เซ็นต์ วางไว้เหนือภาพพื้นหลัง

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

ตัวอย่างการไล่ระดับสีเชิงเส้นที่สาม

ตัวอย่างที่สามของเราวางเส้นสีอ่อนในแนวทแยงมุมที่มุมขวาบนโดยแตะเส้นสีเข้มกว่า

ตัวนี้มีสามสี สี 1 คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 13% สี 2 คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 23% สีที่สาม คือ rgba (18,76,41,0.76) ที่ตำแหน่ง 32%

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 13%)
• สี 2: rgba(92,158,82,0.76) (ที่ตำแหน่ง 23%)
• สี 3: rgba (18,76,41,0.76) (ที่ตำแหน่ง 32%)

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

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

ประเภทการไล่ระดับสีแบบวงกลม

ประเภทการไล่ระดับสีแบบวงกลมจะสร้างวงกลมที่มีสีต่างๆ

ตัวอย่างการไล่ระดับสีแบบวงกลมแรก

ตัวอย่างการไล่ระดับสีแบบวงกลมแรกของเราวางสีอ่อนไว้ตรงกลางและสีเข้มขึ้นรอบขอบ

ตัวนี้มี 2 สี อันดับแรก คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 0% ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 62%

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 0%)
• สี 2: rgba(0,10,4,0.76) (ที่ตำแหน่ง 62%)

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

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

ตัวอย่างการไล่ระดับสีแบบวงกลมที่สอง

การไล่ระดับสีนี้จะวางขอบวงกลมที่ชัดเจนไว้ตรงกลางหน้าจอ

มันมีสี่สี สองสีซ้อนกัน อันดับแรก คือ rgba(18,76,41,0.76) ที่ตำแหน่ง 13% ที่ สอง คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 33% สี 3 คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 51% สี 4 คือ rgba (18,76,41,0.76) โดยวางไว้ที่ตำแหน่ง 51% เหนือสี 3

• สี 1: rgba (18,76,41,0.76) (ที่ตำแหน่ง 13%)
• สี 2: rgba(92,158,82,0.76) (ที่ตำแหน่ง 33%)
• สี 3: rgba(92,158,82,0.76) (ที่ตำแหน่ง 51%)
• สี 4: rgba (18,76,41,0.76) (ที่ตำแหน่ง 51%)

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

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

ตัวอย่างการไล่ระดับสีแบบวงกลมที่สาม

ตัวอย่างนี้วางวงกลมสีอ่อนหลายวงไว้ในสีเข้ม โดยเริ่มจากตรงกลางวงกลม

หนึ่งนี้ยังซ้อนสองสีในลำดับที่แน่นอนเพื่อให้ได้การออกแบบนี้ สี แรก คือ rgba(18,76,41,0.76) ที่ตำแหน่ง 13% สี 2 คือ rgba (18,76,41,0.76) ที่ตำแหน่ง 44% สี ที่สาม ซ้อนทับสีที่สอง มันคือ rgba(92,158,82,0.76) ที่ตำแหน่ง 44% สี 4 คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 51%

• สี 1: rgba (18,76,41,0.76) (ที่ตำแหน่ง 13%)
• สี 2: rgba (18,76,41,0.76) (ที่ตำแหน่ง 44%)
• สี 3: rgba(92,158,82,0.76) (ที่ตำแหน่ง 44%)
• สี 4: rgba (92,158,82,0.76) (ที่ตำแหน่ง 51%)

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

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

ประเภทการไล่ระดับสีวงรี

การไล่ระดับสีแบบวงรีจะทำให้สีต่างๆ เป็นรูปทรงวงรี

ตัวอย่างการไล่สีแบบวงรีแรก

ตัวอย่างวงรีแรกของเราวางวงรีที่มีสีอ่อนไว้ตรงกลางหน้าจอโดยมีสีเข้มขึ้นรอบๆ

ตัวนี้มีสองสี อันดับแรก คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 0% ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 50%

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 0%)
• สี 2: rgba(0,10,4,0.76) (ที่ตำแหน่ง 50%)

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

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

ตัวอย่างการไล่ระดับสีวงรีที่สอง

ตัวอย่างที่สองของเราใส่เส้นวงกลมละเอียดจำนวนมากตลอดการไล่ระดับสี

มันมีสองสี อันดับแรก คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 34pt ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 39pt

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 34pt)
• สี 2: rgba(0,10,4,0.76) (ที่ตำแหน่ง 39pt)

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

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

ตัวอย่างการไล่ระดับสีวงรีที่สาม

ตัวอย่างที่สามของเราใส่ครึ่งวงกลมจำนวนมากภายในการไล่ระดับสี

ตัวนี้มีสองสี อันดับแรก คือ rgba(32,68,35,0.73) ที่ตำแหน่ง 34vmin ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 39vmin

• สี 1: rgba (32,68,35,0.73) (ที่ตำแหน่ง 34vmin)
• สี 2: rgba (0,10,4,0.76) (ที่ตำแหน่ง 39vmin)

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

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

ประเภทการไล่ระดับสีทรงกรวย

ประเภทการไล่ระดับสีรูปกรวยแสดงการไล่ระดับสีในรูปทรงกรวยราวกับว่าเห็นกรวยจากด้านบน

ตัวอย่างการไล่ระดับสีรูปกรวยแรก

ตัวอย่างนี้วางเส้นทแยงมุมจากจุดกึ่งกลางของการไล่ระดับสีไปทางซ้ายด้วยสีอ่อนที่ด้านหนึ่งและสีเข้มอีกด้านหนึ่ง

มันมีสองสี อันดับแรก คือ rgba(92,158,82,0.76) ที่ตำแหน่ง 0% ที่ สอง คือ rgba(0,10,4,0.76) ที่ตำแหน่ง 50%

• สี 1: rgba(92,158,82,0.76) (ที่ตำแหน่ง 0%)
• สี 2: rgba(0,10,4,0.76) (ที่ตำแหน่ง 50%)

เปลี่ยน ประเภทการไล่ระดับสี เป็นทรงกรวย ตั้งค่า ทิศทาง เป็น 221deg จัด ตำแหน่ง ให้อยู่ตรงกลางและ อย่าให้เกิดซ้ำ วางการไล่ระดับสีเหนือภาพ

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

ตัวอย่างการไล่ระดับสีรูปกรวยที่สอง

ตัวอย่างนี้คล้ายกับตัวอย่างก่อนหน้า แต่วางเส้นจากกึ่งกลางขึ้นด้านบน

ตัวนี้มีสี่สี อันดับแรก คือ rgba(20,40,20,0.76) ที่ตำแหน่ง 7% สี 2 คือ rgba(30,73,25,0.68) ที่ตำแหน่ง 24% สี 3 คือ rgba(103,132,30,0.68) ที่ตำแหน่ง 65% สี ที่สี่ คือ rgba(38,86,26,0.68) ที่ตำแหน่ง 85%

• สี 1: rgba(20,40,20,0.76) (ที่ตำแหน่ง 7%)
• สี 2: rgba(30,73,25,0.68) (ที่ตำแหน่ง 24%)
• สี 3: rgba (103,132,30,0.68) (ที่ตำแหน่ง 65%)
• สี 4: rgba (38,86,26,0.68) (ที่ตำแหน่ง 85%)

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

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

ตัวอย่างการไล่ระดับสีรูปกรวยที่สาม

ตัวอย่างสุดท้ายของเราวางระเบิดของเส้นจากจุดกึ่งกลางด้านบนของการไล่ระดับสีออกไปในทุกทิศทาง

ตัวนี้มีสองสี อันดับแรก คือ rgba(30,73,25,0.68) ที่ตำแหน่ง 5deg ที่ สอง คือ rgba(20,40,20,0.76) ที่ตำแหน่ง 7deg

• สี 1: rgba(30,73,25,0.68) (ที่ตำแหน่ง 5deg)
• สี 2: rgba (20,40,20,0.76) (ที่ตำแหน่ง 7deg)

ตั้งค่า eth Gradient Type เป็น Conical และ Direction เป็น 221deg วางตำแหน่ง ที่ด้านบน ให้ ทำซ้ำ และวางไว้เหนือภาพพื้นหลัง

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

จบความคิด

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

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