Divi: วิธีใช้ "Gradient Builder" เพื่อตกแต่งภาพของคุณ

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

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

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

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

ขอเริ่มต้น

การสำรวจ

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

ตัวอย่างแรก – รูปร่างของภาพวงกลม

คอมพิวเตอร์ตั้งโต๊ะ

กำหนดรูปร่างให้กับภาพของคุณโดยใช้เครื่องกำเนิดการไล่ระดับสีของ Divi

ยาเม็ด

โทรศัพท์

ตัวอย่างที่สอง – รูปร่างภาพเชิงเส้น

สำนัก

ยาเม็ด

โทรศัพท์

ตัวอย่างที่สาม – รูปร่างของภาพวงรี

คอมพิวเตอร์ตั้งโต๊ะ

ยาเม็ด

โทรศัพท์

ตัวอย่างที่สี่ – รูปร่างรูปกรวย

คอมพิวเตอร์ตั้งโต๊ะ

ยาเม็ด

โทรศัพท์

การออกแบบเลย์เอาต์ด้วย Divi

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

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

ปรับแต่งส่วน

ขั้นแรก สร้างหน้า Divi ใหม่และปรับแต่งส่วน เปิดการตั้งค่าส่วนและเปลี่ยน Couleur พื้นหลังเป็น #f0f3fb

พื้นหลัง: #f0f3fb

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

Padding (บนและล่าง): 10%

แอดไลน์

แล้วเติม สาย ด้วยโครงสร้างเสาด้านล่าง

เข้าถึงพารามิเตอร์บรรทัดในแท็บ ออกแบบ, นำทางไปยังตัวเลือก การกำหนดขนาด และแก้ไขพารามิเตอร์การปรับขนาด

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

การตั้งค่าคอลัมน์แรก

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

ช่องว่างภายใน (ซ้ายและขวา): 9% ซ้าย, ขวา

พารามิเตอร์ของโมดูลข้อความแรก

แล้วเติม โมดูลข้อความ ไปที่คอลัมน์ด้านซ้าย

เลือก หัวเรื่อง 4 สำหรับข้อความของ เนื้อหา และเพิ่ม เนื้อหา ของร่างกายของคุณ

ข้อความ: "ยินดีต้อนรับสู่ BlogPasCher"

จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนการตั้งค่าชื่อเรื่อง

แบบอักษร: มอนต์เซอร์รัต
น้ำหนักแบบอักษร: ตัวหนา
สไตล์: TT
สีข้อความ: #1d4eff

ขนาดข้อความ: เดสก์ท็อป 16px, แท็บเล็ต 14px, โทรศัพท์ 12px
ระยะห่างระหว่างตัวอักษร: 0,3em
ความสูงของสาย: 1,6 em

เลื่อนไปที่ การเว้นวรรค และเปลี่ยนระยะขอบล่าง

มาร์จิ้น (ล่าง): 0px

พารามิเตอร์ของโมดูลข้อความที่สอง

แล้วเติม โมดูลข้อความ ภายใต้แรก.

ตั้งค่าประเภทข้อความเป็น “หัวที่ 1” และเพิ่ม เนื้อหา ของร่างกายของคุณ

เนื้อหา: “วางแผนอนาคตทางการเงินของคุณ”

จากนั้นเลือก tab ออกแบบ และแก้ไขตัวเลือกของชื่อเรื่อง

แบบอักษร: มอนต์เซอร์รัต
น้ำหนักแบบอักษร: ตัวหนา
สีข้อความ: #0f1154

ขนาด: เดสก์ท็อป 80px, แท็บเล็ต 40px, โทรศัพท์ 24px
ความสูงของแถว: 110%

พารามิเตอร์ของโมดูลข้อความที่สาม

แล้วเติม โมดูลข้อความ ภายใต้ที่สอง

ปล่อยให้ประเภทข้อความอยู่ที่ "ย่อหน้า" และเพิ่มเนื้อหาในร่างกายของคุณ

เนื้อหา: เนื้อหา

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

แบบอักษรของข้อความ: Roboto
น้ำหนักแบบอักษร: ปานกลาง
สีข้อความ: #000000

ขนาดตัวอักษร: 18px (เดสก์ท็อปและแท็บเล็ต), 14px (โทรศัพท์)
ความสูงของเส้น: 180%

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

มาร์จิ้น (ล่าง): 0px

การตั้งค่าโมดูลรูปภาพ

ตอนนี้เพิ่ม โมดูลรูปภาพ ไปที่คอลัมน์ด้านขวา

ครั้งแรก ลบภาพจำลอง โดยคลิกที่ถังขยะหรือไอคอนรีเซ็ตเหนือรูปภาพ

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

จากนั้นเลือก tab สไตล์ และเลื่อนไปที่ การเว้นวรรค.

Margin (เดสก์ท็อป): -10% (บน), -30% (ซ้าย), 10% (ขวา)
ช่องว่างภายใน (บนและล่าง): 300px

Margin (แท็บเล็ต/โทรศัพท์): 0% (บน), 0% (ซ้ายและขวา)

Padding (โทรศัพท์): 150px (บนและล่าง)

ตัวอย่างภาพที่แต่งด้วย Gradient Builder ของ Divi

ตัวอย่างแรก – รูปร่างกลม

ตัวอย่างแรกของเราทำให้รูปภาพมีรูปร่างเป็นวงกลมโดยมีรูตรงกลาง

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

จุดแรก: 0%, #f0f3fb
วินาที: 45%, #f0f3fb
ที่สาม (เหนือวินาที): 45%, rgba(41,196,169,0)
ที่สี่: 69%, rgba(250,255,214,0)
ที่ห้า (เหนือสี่): 69%, #f0f3fb
ที่หก: 100%, #f0f3fb

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

ตัวอย่างที่สอง – รูปแบบเชิงเส้น

นี่คือตัวอย่างรูปร่างของภาพที่สอง ตัวอย่างนี้วางเส้นทแยงมุมขวางรูปภาพ

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

จุดแรก: 0%, #f0f3fb
วินาที: 5%, #f0f3fb
ที่สาม (เหนือวินาที): 5%, rgba(175,175,175,0)
ที่สี่: 13%, rgba(41,196,169,0)

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

ตัวอย่างที่สาม – รูปทรงวงรี

นี่คือตัวอย่างรูปร่างที่สามของเรา สิ่งนี้ใช้รูปทรงวงรี

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

จุดแรก: 0%, #f0f3fb
วินาที: 9%, #f0f3fb
ที่สาม (เหนือวินาที): 9%, rgba(175,175,175,0)
ที่สี่: 21%, rgba(41,196,169,0)

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

ตัวอย่างที่สี่ – รูปทรงกรวย

ตัวอย่างที่สี่ของเราใช้ "ทรงกรวย" เพื่อสร้างรูปทรงภาพเดียว

เปิดการตั้งค่าโมดูลรูปภาพ เลื่อนลงไปที่ พื้นหลัง แล้วเลือกแท็บ ภาพพื้นหลัง. อันนี้มี 5 Gradient Stops:

จุดแรก: 23%, #f0f3fb
วินาที: 35%, #f0f3fb
ที่สาม (เหนือวินาที): 35%, rgba(41,196,169,0)
ที่สี่: 65%, rgba(250,255,214,0)
ที่ห้า (เหนือสี่): 65%, #f0f3fb

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