วิธีออกแบบพื้นหลังข้อความ CSS ใน Divi โดยใช้ background-clip

การสร้างการออกแบบพื้นหลังข้อความด้วย CSS เป็นวิธีที่ยอดเยี่ยมในการเพิ่มองค์ประกอบการออกแบบที่สวยงามให้กับเว็บไซต์ใดๆ กุญแจสำคัญในการสร้างพื้นหลังข้อความแบบกำหนดเองเหล่านี้คือการใช้คุณสมบัติ CSS แบบคลิปพื้นหลังพร้อมค่าข้อความ เนื่องจากวิธีนี้เพิ่งได้รับความนิยมและรองรับเบราว์เซอร์ เราจะแสดงวิธีใช้งานใน Divi นี่เป็นการเปิดชั้นการออกแบบเพิ่มเติมที่กำหนดเป้าหมายองค์ประกอบข้อความ (เช่น H1, H2, p ฯลฯ...) นอกเหนือจากความสามารถการออกแบบที่ยอดเยี่ยมอื่นๆ ทั้งหมดของ Divi

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ต่อไปนี้คือตัวอย่างพื้นหลังการไล่ระดับสีเชิงเส้นที่เพิ่มลงในข้อความส่วนหัวโดยใช้ background-clip

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

และนี่คือ codepen ที่แสดงให้เห็นถึงแนวคิดนี้เช่นกัน

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

วิธีใช้คลิปพื้นหลังกับข้อความ

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

สมมติว่าเรามีองค์ประกอบส่วนหัว H2 ที่มีลักษณะดังนี้

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

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);


}

ต่อไป เราเพิ่ม background-clip:text พร้อมกับคำนำหน้า "-webkit" ที่จำเป็นเพื่อแสดงพื้นหลังขององค์ประกอบเฉพาะด้านหลังข้อความเท่านั้น

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;

}

จากนั้น เราเพิ่ม -webkit-text-fill-color: transparent เพื่อแทนที่สีของข้อความและทำให้โปร่งใส

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

h2 {
  background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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

สำหรับข้อมูลเพิ่มเติม โปรดดูเอกสารเกี่ยวกับฟังก์ชันการไล่ระดับสีเชิงเส้น คุณยังสามารถสำรวจ CSS Text Gradient Generator เพื่อสำรวจตัวเลือกสนุก ๆ

และหากไม่ต้องการใช้การไล่ระดับสี คุณสามารถใช้พื้นหลังของรูปภาพจริงได้ รหัสจะมีลักษณะดังนี้:

h2 {
  background: center / cover url("add image URL");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ตอนนี้เรามีความเข้าใจที่ดีขึ้นเกี่ยวกับ CSS แล้ว มาดำดิ่งในบทช่วยสอนกัน

การออกแบบพื้นหลังข้อความพร้อมคลิปพื้นหลังใน Divi

ส่วนที่ 1: การใช้คลิปพื้นหลังเพื่อเพิ่มพื้นหลังไล่ระดับให้กับหัวเรื่อง H1

สำหรับตัวอย่างแรกของเรา เราจะเพิ่มพื้นหลังแบบไล่ระดับให้กับส่วนหัว H1

ส่วน แถว และคอลัมน์

ขั้นแรก เปิดการตั้งค่าสำหรับส่วนและเพิ่มสีพื้นหลัง:

• สีพื้นหลัง: #153243

ภายในส่วน ให้เพิ่มแถวหนึ่งคอลัมน์

โมดูลข้อความที่มีส่วนหัว H1

ในการเพิ่มส่วนหัว H1 ให้เพิ่มโมดูลข้อความใหม่ลงในคอลัมน์ของแถว

เปิดการตั้งค่าข้อความและวาง HTML ส่วนหัว H2 ต่อไปนี้ใต้แท็บข้อความของเนื้อหา

<h1>Creating CSS Text Backgrounds in Divi</h1>

ภายใต้แท็บการออกแบบ ให้อัปเดตการตั้งค่าการออกแบบ H1 ดังนี้:

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของหัวเรื่อง: TT
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 100px (เดสก์ท็อป), 55px (แท็บเล็ต), 28px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

หมายเหตุ: สีข้อความหัวเรื่องจะถูกแทนที่โดย CSS ที่กำหนดเอง แต่ควรเลือกหนึ่งสีเป็นทางเลือกสำรองไว้เผื่อกรณีนี้

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: text-background-clip

เราจะใช้คลาสนี้เป็นตัวเลือกในโค้ด CSS ที่กำหนดเองในภายหลัง

โค้ด CSS

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

จากนั้นวาง CSS ต่อไปนี้ในกล่องโค้ดเพื่อให้แน่ใจว่าได้ใส่โค้ดในแท็ก รูปแบบที่ จำเป็นแล้ว:

.text-background-clip h1 {
  background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

ผลลัพธ์

นี่คือผลลัพธ์ อย่างที่คุณเห็น พื้นหลังการไล่ระดับสีถูกตัดออกเพื่อให้แสดงผ่านองค์ประกอบส่วนหัว H1 เท่านั้น

ส่วนที่ 1: การใช้คลิปพื้นหลังเพื่อเพิ่มพื้นหลังรูปภาพในส่วนหัว H2

เราไม่ จำกัด เฉพาะพื้นหลังแบบไล่ระดับสีเพื่อจัดรูปแบบพื้นหลังข้อความของเรา นอกจากนี้เรายังสามารถจัดรูปแบบพื้นหลังข้อความด้วยภาพพื้นหลัง

ในตัวอย่างนี้ เราจะใช้วิธีการเดียวกัน (โดยใช้ "คลิปพื้นหลัง") เพื่อเพิ่มพื้นหลังรูปภาพในส่วนหัว H2

ส่วน แถว และคอลัมน์

ในการเริ่มต้น ให้สร้างส่วนปกติใหม่ด้านล่างส่วนที่มีอยู่ของตัวอย่างแรกของเรา

จากนั้นเพิ่มแถวหนึ่งคอลัมน์ในส่วน

เปิดการตั้งค่าส่วนและเพิ่มภาพพื้นหลังสีเข้มในส่วน

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

เปิดการตั้งค่าข้อความสำหรับโมดูลข้อความที่ซ้ำกันและเปลี่ยนส่วนหัว H1 เป็นส่วนหัว H2 โดยอัปเดต HTML:

<h2>Creating CSS Text Backgrounds in Divi</h2>

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

โค้ด CSS

ในการเพิ่มโค้ด CSS ที่ต้องการให้ H2 เป็นพื้นหลังของรูปภาพ ให้เปิดโมดูลโค้ดที่เราสร้างไว้ก่อนหน้านี้แล้ววาง CSS ต่อไปนี้ไว้ใต้ข้อมูลโค้ด CSS แรก:

.text-background-clip h2 {
  background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

สิ่งนี้จะเพิ่มภาพพื้นหลังด้านหลังองค์ประกอบ H2 CSS ชวเลขพื้นหลังประกอบด้วย "ศูนย์" สำหรับตำแหน่งพื้นหลัง "ปก" สำหรับขนาดพื้นหลังและ URL ของภาพจริง

หากต้องการค้นหา URL ของรูปภาพในไซต์ของคุณเอง คุณสามารถเปิดแกลเลอรีสื่อ WordPress เลือกรูปภาพ และคัดลอก URL ของไฟล์ได้อย่างง่ายดาย

ผลลัพธ์

ส่วนที่ 3: การใช้คลิปพื้นหลังเพื่อเพิ่มพื้นหลังไล่ระดับให้กับข้อความย่อหน้า

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

เพิ่มโมดูลข้อความ

เพิ่มโมดูลข้อความใหม่ภายใต้โมดูลข้อความก่อนหน้าในส่วนเดียวกับที่เราออกแบบในส่วนที่ 2

อัปเดตเนื้อหาเนื้อหาด้วยข้อความย่อหน้าต่อไปนี้ HTML:

<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p>

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

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความต่อไปนี้:

• สีข้อความ: #ffffff
• ขนาดข้อความ: 16px
• ความสูงของบรรทัดข้อความ: 2em
• ความกว้างสูงสุด: 500px
• การจัดตำแหน่งโมดูล: ศูนย์

ใต้แท็บขั้นสูง เพิ่มคลาส CSS เดียวกับที่ใช้ก่อนหน้านี้:

• CSS Class: text-background-clip

โค้ด CSS

สุดท้าย วางโค้ด CSS ที่กำหนดเป้าหมายแท็ก p และเพิ่มพื้นหลังแบบไล่ระดับให้กับข้อความโดยใช้ background-clip:text

.text-background-clip p {
  background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ผลลัพธ์

นี่คือผลลัพธ์ของการออกแบบพื้นหลังข้อความของย่อหน้า

ผลลัพธ์สุดท้าย

ตอนนี้ มาดูผลลัพธ์สุดท้ายของการออกแบบของเรากัน!

ต่อไปนี้คือตัวอย่างพื้นหลังการไล่ระดับสีเชิงเส้นที่เพิ่มลงในข้อความส่วนหัวโดยใช้ background-clip

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

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

ความสามารถในการเพิ่มพื้นหลังข้อความที่กำหนดเองลงในไซต์ของคุณอาจเป็นเครื่องมือออกแบบที่มีประโยชน์ และหากคุณเข้าใจวิธีใช้คุณสมบัติ CSS พื้นหลัง ร่วมกับ background-clip:text มากขึ้น ความเป็นไปได้ก็ไม่มีที่สิ้นสุด หากคุณต้องการความช่วยเหลือเล็กน้อยในการสร้าง CSS ของคุณเอง คุณยังสามารถสำรวจ CSS Text Gradient Generator เพื่อช่วยเริ่มต้นกระบวนการอย่างรวดเร็ว

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!