คุณต้องการที่จะให้มิติอื่นของคุณ เว็บไซต์ ด้วยมาสก์พื้นหลัง Divi เหนียว?
ตัวเลือกเหนียวของ Divi ให้คุณสร้างการออกแบบที่แตกต่างกันมากมายสำหรับเว็บไซต์ของคุณ บทแนะนำวันนี้จะเพิ่มรายการสิ่งที่คุณทำได้ หวังว่านี่จะช่วยจุดประกายความคิดสร้างสรรค์ของคุณ
เราจะแสดงวิธีสร้างมาสก์พื้นหลังแบบเหนียว
บทช่วยสอนนี้รวมตัวเลือกที่เหนียวของ Divi ด้วยโหมดการผสมฟิลเตอร์
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
สำนัก
โทรศัพท์มือถือ
สร้างการออกแบบใน Divi
เพิ่มหัวข้อใหม่
ภาพพื้นหลัง
เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่
- อัปโหลดภาพพื้นหลังที่คุณเลือก
- ขนาดภาพพื้นหลัง : ปก
การเว้นวรรค
สลับไปที่แท็บ การออกแบบส่วน และลบการตั้งค่าระยะห่างเริ่มต้นด้านล่าง:
- ช่องว่างภายใน (บนและล่าง): 0px
ล้น
จากนั้นซ่อนส่วนที่เกินในแท็บ ระดับสูง.
- แนวนอนล้น: ซ่อน
- ล้นแนวตั้ง: ซ่อน
แอดไลน์ #1
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าการปรับขนาดตามนั้น:
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
การเว้นวรรค
ลบระยะขอบเริ่มต้นทั้งหมดด้วย
- ช่องว่างภายใน (บนและล่าง): 0px
ฟิลเตอร์
นอกจากนี้เรายังเพิ่มโหมดการผสมให้กับบรรทัดนี้ โหมดการผสมนี้จะช่วยเราสร้างมาสก์ในภายหลังในบทช่วยสอน
- โหมดผสมผสาน: หน้าจอ
ดัชนี Z
เพื่อให้แน่ใจว่าแถวนี้จะอยู่ใต้แถวที่สองที่เราจะเพิ่มในส่วนนั้น เราเปลี่ยนดัชนี z ในแท็บ ระดับสูง.
- ดัชนี Z: 9
พารามิเตอร์คอลัมน์
ต่อไปเราจะเปิดการตั้งค่าคอลัมน์
สีพื้นหลัง
เราใช้สีพื้นหลังสีขาวล้วน
- สีพื้นหลัง: #ffffff
องค์ประกอบหลัก CSS
นอกจากนี้เรายังเพิ่มค่าความสูงให้กับองค์ประกอบหลักในแท็บ ระดับสูง.
height: 100vh;
เพิ่มโมดูล "ข้อความ" ลงในบรรทัด
เว้นพื้นที่เนื้อหาว่างไว้
เมื่อคุณตั้งค่าแถวเสร็จแล้ว ให้เพิ่มโมดูลข้อความลงในคอลัมน์
ออกจากพื้นที่ เนื้อหา ว่างเปล่า. แต่เราใช้โมดูลนี้เพื่อสร้างรูปร่างที่เผยให้เห็นส่วนหนึ่งของภาพพื้นหลังของส่วนนั้นแทน
สีพื้นหลัง
เราจะใช้สีพื้นหลังที่เข้มกว่าสำหรับโมดูลนี้
- สีพื้นหลัง: #0b3835
ปรับขนาด
ต่อไปเราจะเข้าสู่แท็บ ออกแบบ และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:
- ความกว้าง:
- เดสก์ท็อป: 20vw
- แท็บเล็ตและโทรศัพท์: 70 vw
- ความสูง:
- เดสก์ท็อป: 30vh
- แท็บเล็ตและโทรศัพท์: 10vh
การเว้นวรรค
นอกจากนี้เรายังเพิ่มอัตรากำไรขั้นต้น
- มาร์จิ้น (บน): 3vh
ชายแดน
และเราจะรวมมุมโค้งมน
- มุมโค้งมน: 15px
เพิ่มบรรทัด 2
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
เปิดการตั้งค่าบรรทัดและทำการเปลี่ยนแปลงต่อไปนี้ในตัวเลือก การกำหนดขนาด กำลังติดตาม:
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
ดัชนี Z
เพิ่มดัชนี z ของแถวด้วย ซึ่งจะช่วยให้แน่ใจว่า เนื้อหา ของบรรทัดยังคงอยู่เหนือบรรทัดก่อนหน้า
- ดัชนี Z: 12
เพิ่มโมดูล "ข้อความ" ลงในบรรทัด
เพิ่มเนื้อหา H2
ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกที่มี เนื้อหา H2 ที่คุณเลือก
การตั้งค่าข้อความ H2
ปรับแต่งการตั้งค่าข้อความ H2 ดังนี้:
- แบบอักษร: Playfair Display
- การจัดตำแหน่งข้อความ: กึ่งกลาง
- สีข้อความ: #0b3835
- ขนาด:
- เดสก์ท็อป: 150px
- แท็บเล็ตและโทรศัพท์: 45px
- ความสูงของสาย: 1,2 em
ปรับขนาด
ถัดไป ไปที่การตั้งค่าการปรับขนาดและใช้การตั้งค่าต่อไปนี้:
- ความกว้างสูงสุด: 980px
- โมดูลการจัดตำแหน่ง: Center
การเว้นวรรค
รวมถึงขอบบนติดลบด้วย
เพิ่มโมดูล "ปุ่ม" ลงในบรรทัด
เพิ่มเนื้อหาไปที่ปุ่ม
โมดูลถัดไปและสุดท้ายที่เราต้องการในแถวนี้คือโมดูลปุ่ม เพิ่มเนื้อหาที่คุณเลือก
การจัดตำแหน่งปุ่ม
เปลี่ยนเป็นแท็บ ออกแบบ ของโมดูลและแก้ไขการจัดตำแหน่งของปุ่ม
- การจัดตำแหน่งปุ่ม: กึ่งกลาง
การตั้งค่าปุ่ม
จากนั้นไปที่การตั้งค่าปุ่มและใช้รูปแบบต่อไปนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 15px
- สีข้อความของปุ่ม: #ffffff
- สีพื้นหลังของปุ่ม: #000000
- ความกว้างของเส้นขอบของปุ่ม: 0 พิกเซล
- รัศมีเส้นขอบของปุ่ม: 100px
- แบบอักษรของปุ่ม: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
- รูปแบบตัวอักษร: TT
การเว้นวรรค
นอกจากนี้เรายังเพิ่มค่าระยะขอบและช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค
- มาร์จิ้น (ล่าง): 60vh
- ช่องว่างภายใน (บนและล่าง): 15px
- ช่องว่างภายใน (ซ้ายและขวา): 40px
ใช้เอฟเฟกต์เหนียว
เปิดสาย #1
เมื่อเราได้สร้างพื้นฐานของการออกแบบแล้ว ก็ถึงเวลาปรับใช้สไตล์ที่ติดหนึบ เปิดการตั้งค่าบรรทัดแรก
ใช้ตัวเลือกติดหนึบ
ไปที่แท็บ ระดับสูง และใช้การตั้งค่าถาวรต่อไปนี้:
- ตำแหน่งที่เหนียว: Stick To Top
- ขีด จำกัด ติดหนึบด้านล่าง: Section
- ออฟเซ็ตจากองค์ประกอบที่ติดหนึบโดยรอบ: ใช่
- รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบที่ติดหนึบ: ใช่
ตัวเลือก Sticky โมดูลข้อความ
ตอนนี้เส้นเป็นแบบ Sticky เราสามารถใช้สไตล์กับโมดูลข้อความภายในบรรทัดได้ เปิดการตั้งค่าโมดูล
ขนาดเหนียว
ถัดไป ไปที่การตั้งค่าการปรับขนาด และใช้ค่าการปรับขนาดต่อไปนี้:
- ความกว้าง(เหนียว): 80 vw
- ส่วนสูง (เหนียว): 90vh
เวลาเปลี่ยน
สุดท้าย ไปที่ tab ระดับสูง และเพิ่มระยะเวลาของการเปลี่ยนแปลง
- ระยะเวลาการเปลี่ยนภาพ: 500ms
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
สำนัก
ดาวน์โหลด DIVI ทันที!!!
โทรศัพท์มือถือ
ดาวน์โหลด DIVI ทันที!!!
สรุป
ในบทความนี้ เราได้แสดงให้คุณเห็นอีกครั้งถึงวิธีการสร้างสรรค์ด้วยตัวเลือกเหนียวของ Divi
โดยเฉพาะอย่างยิ่ง เราได้แสดงวิธีรวมการตั้งค่าตัวกรองของ Divi และตัวเลือกแบบติดหนึบ
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
