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

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เข้าใกล้

1. ทำความเข้าใจกับ Divi Blend Modes

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

• โหมดผสมผสานที่ใช้กับโมดูลจะผสมผสานโมดูล + คอลัมน์ด้านล่าง
• โหมดผสมผสานที่ใช้กับคอลัมน์จะผสมผสานคอลัมน์ + แถวด้านล่าง
• โหมดผสมผสานที่ใช้กับแถวจะผสมผสานแถว + ส่วนที่อยู่ด้านล่าง

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

2. การเลือกระหว่างจานสีเข้มหรือสีอ่อนทั้งหมด

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

3. การลบความกว้างรางน้ำทั้งหมดระหว่างคอลัมน์และโมดูล

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

4. การใช้ช่องว่างภายในแทนการเปลี่ยนความกว้างขององค์ประกอบ

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

มาเริ่มสร้างกันเลย!

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มมาตราใหม่

สีพื้นหลัง

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

• สีพื้นหลัง: #ffffff (เลย์เอาต์สีอ่อน), #000000 (เลย์เอาต์สีเข้ม)

ระยะห่าง

ดำเนินการต่อโดยเพิ่มช่องว่างภายในที่กำหนดเองในส่วน

• ช่องว่างภายในด้านบน: 215px
• ช่องว่างภายในด้านล่าง: 215px

เพิ่มแถว #1

โครงสร้างคอลัมน์

จากนั้น เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่ระดับคอลัมน์ 2

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

• สี 1: #c700ff
• สี 2: #32f1ff
• คอลัมน์ 2 ทิศทางการไล่ระดับสี: 150deg
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 20%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 60%

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดด้วย

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

และแก้ไขการตั้งค่าระยะห่าง

• ขอบบน: 50px
• ขอบล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

ตอนนี้ไปข้างหน้าและเพิ่มโมดูลข้อความในคอลัมน์ที่สองของแถวที่คุณได้เพิ่ม

สีพื้นหลัง

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

• สีพื้นหลัง: #ffffff (เลย์เอาต์สีอ่อน), #000000 (เลย์เอาต์สีเข้ม)

การตั้งค่าข้อความหัวเรื่อง

เปลี่ยนการตั้งค่าข้อความหัวข้อถัดไป

• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000 (เลย์เอาต์สีอ่อน), #ffffff (เลย์เอาต์สีเข้ม)
• ขนาดข้อความของหัวเรื่อง 2: 67px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -2px

ระยะห่าง

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

• ช่องว่างภายในด้านล่าง: 50px

โหมดผสมผสาน

หากต้องการให้พื้นหลังไล่ระดับสีของคอลัมน์มีผลกับโมดูลที่คุณเพิ่ม ให้ใช้โหมดผสมผสานในการตั้งค่าตัวกรอง

• Blend Mode: Lighten (Light Layout), Darken (เค้าโครงมืด)

เพิ่มโมดูลตัวแบ่งให้กับ Row

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

สีพื้นหลัง

เปลี่ยนสีพื้นหลังตามประเภทของเลย์เอาต์ที่คุณกำลังสร้างใหม่

• สีพื้นหลัง: #ffffff (เลย์เอาต์สีอ่อน), #000000 (เลย์เอาต์สีเข้ม)

ระยะห่าง

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

• ช่องว่างภายในด้านซ้าย: 250px
• ช่องว่างภายในด้านขวา: 250px

โหมดผสมผสาน

เพิ่มโหมดผสมผสานอีกครั้งเพื่อให้พื้นหลังการไล่ระดับสีของคอลัมน์แสดงขึ้น

• Blend Mode: Lighten (Light Layout), Darken (เค้าโครงมืด)

เพิ่มแถว #2

โครงสร้างคอลัมน์

ต่อแถวหน้า! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่ระดับคอลัมน์ 1

ดำเนินการต่อโดยเพิ่มพื้นหลังแบบไล่ระดับสีลงในคอลัมน์แรก

• สี 1: #c700ff
• สี 2: #32f1ff
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 1 ทิศทางการไล่ระดับสี: 105deg
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 20%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 50%

พื้นหลังไล่ระดับคอลัมน์ 2

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

• สี 1: #32f1ff
• สี 2: #c700ff
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 2 ทิศทางการไล่ระดับสี: 90deg
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 40%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 60%

พื้นหลังไล่ระดับคอลัมน์ 3

เช่นเดียวกับคอลัมน์ที่สาม

• สี 1: #c700ff
• สี 2: #32f1ff
• คอลัมน์ 3 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 3 ทิศทางการไล่ระดับสี: 85deg
• คอลัมน์ 3 ตำแหน่งเริ่มต้น: 20%
• คอลัมน์ 3 ตำแหน่งสิ้นสุด: 50%

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

และเพิ่มช่องว่างภายในด้านซ้ายและขวาแบบกำหนดเอง

• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่ม Blurb Module ลงในคอลัมน์ 1 พร้อมชื่อเรื่องที่เลือก ต่อมาในโพสต์ เราจะใช้โมดูลแยกต่างหากเพื่อเพิ่มเนื้อหาเนื้อหา

เลือกไอคอน

เลือกไอคอนที่ต้องการ

สีพื้นหลัง

และปรับเปลี่ยนสีพื้นหลังของ Blurb Module

• สีพื้นหลัง: #ffffff (เลย์เอาต์สีอ่อน), #000000 (เลย์เอาต์สีเข้ม)

การตั้งค่าไอคอน

ดำเนินการต่อโดยไปที่การตั้งค่าไอคอนและทำการเปลี่ยนแปลงที่นั่น

• สีไอคอน: #000000 (เลย์เอาต์สีอ่อน), #ffffff (เลย์เอาต์สีเข้ม)
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 51px

การตั้งค่าข้อความชื่อเรื่อง

เปลี่ยนการตั้งค่าข้อความชื่อเรื่องด้วย

• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• สีข้อความของหัวเรื่อง: #000000 (เลย์เอาต์สีอ่อน), #ffffff (เลย์เอาต์สีเข้ม)
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em

ระยะห่าง

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

• ขอบล่าง: 5px
• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

โหมดผสมผสาน

สุดท้ายแต่ไม่ท้ายสุด ใช้โหมดการผสมผสานที่ถูกต้อง

• Blend Mode: Lighten (Light Layout), Darken (เค้าโครงมืด)

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

สีพื้นหลัง

ถัดไป เพิ่มสีพื้นหลัง

• สีพื้นหลัง: #ffffff (เลย์เอาต์สีอ่อน), #0c0c0c (เลย์เอาต์สีเข้ม)

การตั้งค่าข้อความ

และเปลี่ยนการตั้งค่าข้อความ

• ระยะห่างของตัวอักษรข้อความ: 0.5px
• ความสูงของบรรทัดข้อความ: 2.3em
• การวางแนวข้อความ: Justify
• สีข้อความ: มืด (เลย์เอาต์สีอ่อน), สว่าง (เลย์เอาต์สีเข้ม)

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในด้านซ้าย: 70px
• ช่องว่างภายในด้านขวา: 70px

กล่องเงา

และปิดทับด้วยการเพิ่มเงาของกล่องที่ละเอียดอ่อนเช่นกัน

• ความชัดเจนของเงากล่อง: 56px
• ความแรงของการกระจายเงาของกล่อง: -12px
• เงาสี: rgba(0,0,0,0.3)

โคลนโมดูล Blurb & โมดูลข้อความสองครั้ง + วางในคอลัมน์ที่เหลือ

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายกัน

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

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