Divi: วิธีเปลี่ยนการไล่ระดับสีของพื้นหลังบนโฮเวอร์

คุณต้องการให้มีการไล่ระดับสีพื้นหลังใน Divi ที่เปลี่ยนไปเมื่อโฉบ?

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

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

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

Let 's go!

การสำรวจ

ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์สุดท้ายกันดีกว่า

มาเริ่มออกแบบกับ Divi

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างตัวเลื่อนหีบเพลงที่ตอบสนอง

เพิ่มหัวข้อ # 1

การเว้นวรรค

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

• ช่องว่างภายใน (บนและล่าง): 100px

เพิ่มบรรทัด 1

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

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

สีพื้นหลังเริ่มต้น (เดสก์ท็อป) ของคอลัมน์ 1

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

• พื้นหลัง (เดสก์ท็อป): #e7ffa0

สีพื้นหลังของคอลัมน์ 1 บนโฮเวอร์

เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์

• ความเป็นมา: #00020c

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

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

• สี 1 (20%): rgba(255,255,255,0)
• สี 2 (100%): rgba(16,0,201,0.8)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 50 องศา

สีพื้นหลังของคอลัมน์ 2

เพิ่มสีพื้นหลังให้กับคอลัมน์ 2 ด้วย

• ความเป็นมา: #ffffff

ปรับขนาด

จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนการตั้งค่าการปรับขนาดในตัวเลือก การกำหนดขนาด.

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง : 2000px

การเว้นวรรค

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

• ช่องว่างภายใน (บนและล่าง): 0px

ระยะห่าง (คอลัมน์ 2)

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

กล่องเงา

และยังให้เงาของกล่องที่บอบบางแก่แถว

• ความแรงของกล่องเงาเบลอ: 100px
• ความแรงของการกระจายเงาของกล่อง: -10px

การเปลี่ยน

สุดท้าย เราจะสร้างการเปลี่ยนพื้นหลังการไล่ระดับสีที่ราบรื่นโดยการเพิ่มระยะเวลาการเปลี่ยนแปลงในแท็บ ระดับสูง.

• ระยะเวลาการเปลี่ยนภาพ: 1100ms

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลรูปภาพในคอลัมน์แรก

พื้นหลังไล่ระดับสี

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

• สี 1(57%): rgba(50,217,255,0.66)
• สี 2(100%): rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: วงกลม
• ตำแหน่งไล่ระดับ: ด้านบน

การเว้นวรรค

ถัดไป เพิ่มการเติมด้านบนแบบกำหนดเองให้กับโมดูล

• Padding (บน): 14vw

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

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

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

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

ถัดไป ไปที่การตั้งค่าข้อความส่วนหัวและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษร: Abril Fatface
• สีข้อความ: #000000
• ขนาดตัวอักษร: 4 vw (เดสก์ท็อป), 60 px (แท็บเล็ต), 40 px (โทรศัพท์)

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

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

โมดูลที่สองที่เราจะต้องมีคือโมดูลข้อความอื่น เพิ่มบางส่วน เนื้อหา ทางเลือก

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

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

• การจัดตำแหน่งข้อความ: Justified

ปรับขนาด

ปรับความกว้างในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 73% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

การเว้นวรรค

สุดท้าย เพิ่มระยะขอบบนและล่างแบบกำหนดเองให้กับโมดูลเพื่อสร้างช่องว่าง

• Margin (บนและล่าง): 2,5 vw (เดสก์ท็อป), 50 px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลปุ่มในคอลัมน์ 2

เพิ่มคำอธิบาย

โมดูลที่สามและสุดท้ายที่เราต้องการในคอลัมน์ที่สองคือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

จากนั้นเปลี่ยนการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1,2 vw (เดสก์ท็อป), 14 px (แท็บเล็ตและโทรศัพท์)
• สีข้อความของปุ่ม: #ffffff

• Gradient Stops 1 (0%): #9ea6ff
• หยุดการไล่ระดับสี 2 (100%): rgba(16,0,201,0.8)
• การบังคับเลี้ยว: 78deg

• ความกว้างของขอบปุ่ม: 0 พิกเซล
• รัศมีเส้นขอบ: 30px
• ระยะห่างระหว่างตัวอักษร: -1px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: TT -(ตัวพิมพ์ใหญ่)

การเว้นวรรค

เพิ่มค่าการเติมที่กำหนดเองด้วย

• ช่องว่างภายใน (บนและล่าง): 10px
• ช่องว่างภายใน (ซ้ายและขวา): 40px

กล่องเงา

และใช้เงากล่องที่ละเอียดอ่อนกับปุ่ม

• ความชัดเจนของกล่องเงาเบลอ: 40px

อ่าน: วิธีปรับแต่งโมดูล "จับเวลาถอยหลัง" ด้วย GIF

เพิ่มหัวข้อ # 2

การเว้นวรรค

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

• ช่องว่างภายใน (บนและล่าง): 100px

เพิ่มแถวเป็นสองคอลัมน์

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

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

คอลัมน์ 1 พื้นหลัง

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

• ความเป็นมา: #ffffff

พื้นหลังคอลัมน์ 2 (เดสก์ท็อป)

เพิ่มสีพื้นหลังต่อไปนี้ในคอลัมน์ 2

• พื้นหลัง (เดสก์ท็อป): #ffffff

สีพื้นหลังของคอลัมน์ 2 บนโฮเวอร์

และเปลี่ยนสีพื้นหลังนี้เมื่อวางเมาส์ไว้

• พื้นหลัง (โฮเวอร์): #3d02ff

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

เพิ่มพื้นหลังไล่ระดับให้กับคอลัมน์ด้วย

• หยุดไล่ระดับ 1 (20%): rgba(255,255,255,0)
• Gradient Stops 2 (100%): #ff7700

ปรับขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 2000px

ระยะห่าง (เส้น)

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

• ช่องว่างภายใน (บนและล่าง): 0px

ระยะห่าง (คอลัมน์ 1)

เปลี่ยนการตั้งค่าระยะห่างคอลัมน์ 1

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

กล่องเงา

และยังเพิ่มเงาของกล่องที่ละเอียดอ่อนให้กับแถวนี้

• ความชัดเจนของกล่องเงาเบลอ: 100px
• ความแรงของการกระจายเงาของกล่อง: -10px

การเปลี่ยน

สุดท้าย สร้างการเปลี่ยนแปลงที่ราบรื่นโดยการเพิ่มระยะเวลาการเปลี่ยนแปลงในแท็บ ระดับสูง.

• ระยะเวลาการเปลี่ยนภาพ: 1100 ms

โมดูลบรรทัดที่ 1 ซ้ำ

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

วางรายการที่ซ้ำกันในแถวที่ 2 คอลัมน์

และวางรายการที่ซ้ำกันในบรรทัดใหม่ดังนี้:

แก้ไขเนื้อหา

อย่าลืมเปลี่ยน. เนื้อหา ของโมดูลของคุณ

เปลี่ยนพื้นหลังการไล่ระดับสีของปุ่ม

เปลี่ยนการไล่ระดับสีพื้นหลังของปุ่มด้วย

• ไล่ระดับ 0%: #ff653f
• ไล่ระดับหยุด 100%: #0066ff
• การบังคับเลี้ยว: 39deg

เปลี่ยนภาพ

แทนที่รูปภาพ

เปลี่ยนการไล่ระดับสีพื้นหลัง

สุดท้าย แก้ไขการไล่ระดับสีพื้นหลังของโมดูลรูปภาพ

• หยุดไล่ระดับ 0%: rgba(0,2,12,0.66)
• หยุดไล่ระดับ 57%: rgba(255,255,255,0)

การสำรวจ

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

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

สรุป

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

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

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

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

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

...