วิธีการใช้รูปแบบการขีดเส้นใต้ข้อความทางเลือกใน Divi

สไตล์การขีดเส้นใต้ข้อความนั้นค่อนข้างจำกัดอยู่เสมอ วิธีที่ใช้บ่อยที่สุดในการขีดเส้นใต้ข้อความบนเว็บคือการใช้คุณสมบัติ CSS “text-decoration: underline” Divi ยังช่วยให้คุณปรับใช้และจัดรูปแบบการขีดเส้นใต้ประเภทนี้ภายในการตั้งค่า Divi Builder Module แต่วิธีการขีดเส้นใต้มาตรฐานนี้มาพร้อมกับข้อจำกัดในเรื่องของรูปแบบและการรองรับข้ามเบราว์เซอร์

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

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

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

การขีดเส้นใต้ข้อความด้วยการตกแต่งข้อความ (วิธีทั่วไป)

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

วิธีนี้ช่วยให้คุณมีสีขีดเส้นใต้ที่แตกต่างจากสีข้อความจริง

และคุณสามารถเลือกจากรูปแบบการขีดเส้นใต้ต่อไปนี้:

• แข็ง
• สองเท่า
• จุด
• ประ
• หยัก

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

การตกแต่งข้อความ ขีดเส้นใต้สไตล์ ข้อจำกัด

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

น่าเสียดายที่เมื่อเพิ่ม text-decoration: ขีดเส้นใต้คุณสมบัติ CSS โดยใช้การตั้งค่าในตัวของ Divi ไม่มีตัวเลือกในการปรับความกว้างของเส้นหรือตำแหน่งของเส้น ความกว้างของบรรทัดสัมพันธ์กับขนาดฟอนต์ ดังนั้นจะเพิ่มขึ้นเมื่อคุณเพิ่มขนาดฟอนต์ และเนื่องจากตำแหน่งของขีดเส้นใต้อยู่ที่เส้นฐาน ตัวย่อ (อักษรตัวพิมพ์เล็กที่อยู่ต่ำกว่าเส้นฐาน) จะเข้ามาขวางทางของเส้นทำให้เกิดความคลาดเคลื่อนโดยเฉพาะอย่างยิ่งกับคำที่มีผู้สืบทอดจำนวนมาก (เช่น "ตัวพิมพ์") .

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

ขาดการสนับสนุนเบราว์เซอร์

Internet Explorer ไม่สนับสนุนคุณสมบัติ text-decoration-style หรือ text-decoration-color ดังนั้นจึงไม่สามารถปรับแต่งรูปแบบการขีดเส้นใต้ (double, dotted, dashed, ฯลฯ ...) และสีที่ขีดเส้นใต้ได้ Safari ไม่รองรับคุณสมบัติสไตล์การตกแต่งข้อความ แต่คุณสามารถเปลี่ยนสีที่ขีดเส้นใต้ได้

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

การขีดเส้นใต้ข้อความโดยใช้ขอบด้านล่าง

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

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

ข้อจำกัดในการใช้เส้นขอบล่างสำหรับการขีดเส้นใต้

• จำกัดข้อความบรรทัดเดียวในองค์ประกอบบล็อก แต่มีวิธีแก้ไขปัญหานี้ (ดูด้านล่าง)
• อยู่ในตำแหน่งด้านล่างอย่างสมบูรณ์และยากที่จะได้ตำแหน่งที่ถูกต้อง (แต่ทำได้)

การทำความเข้าใจความแตกต่างระหว่างองค์ประกอบบล็อกและอินไลน์

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

บล็อกองค์ประกอบ

องค์ประกอบบล็อกจะขยายความกว้างทั้งหมดของคอนเทนเนอร์โดยอัตโนมัติ (เว้นแต่จะมีการตั้งค่าความกว้างที่กำหนดเอง) และเริ่มต้นในบรรทัดใหม่ เว็บไซต์ (รวมถึงเว็บไซต์ที่สร้างด้วย Divi) เต็มไปด้วยองค์ประกอบบล็อก

ตัวอย่างขององค์ประกอบบล็อกทั่วไป ได้แก่ :

• ส่วน Divi, แถว, โมดูล (div)
• ข้อความเนื้อหาหรือย่อหน้า (p)
• หัวเรื่อง (h1, h2, h3, h4, h5, h6)
• รายการ (เฒ่า, ul)

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

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

แม้ว่า css จะกำหนดเป้าหมายไปที่แท็ก h1 แต่บรรทัดนี้ใช้กับองค์ประกอบบล็อกเท่านั้น ดังนั้นเส้นจะถูกนำไปใช้กับด้านล่างสุดเท่านั้น ไม่ใช้กับแต่ละบรรทัดแยกกัน

องค์ประกอบแบบอินไลน์

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

นี่คือตัวอย่างลิงก์บางส่วน (ซึ่งเป็นองค์ประกอบแบบอินไลน์โดยค่าเริ่มต้น) ที่มีการขีดเส้นใต้เส้นขอบด้านล่าง

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

วิธีเพิ่มการขีดเส้นใต้เส้นขอบล่างให้กับข้อความบรรทัดเดียว (องค์ประกอบบล็อก)

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

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

Underlining Typography

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความดังนี้:

• ขนาดข้อความ: 46px (เดสก์ท็อป), 40px (แท็บเล็ต), 26px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em
• ความกว้าง: 517px (เดสก์ท็อป), 450px (แท็บเล็ต), 293px (โทรศัพท์)
• ความกว้างขอบล่าง: 2px
• สีขอบล่าง: #0c71c3
• รูปแบบเส้นขอบด้านล่าง: จุด

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

วิธีเพิ่มการขีดเส้นใต้เส้นขอบล่างบนองค์ประกอบบล็อก (เช่นส่วนหัว) ที่แยกข้ามบรรทัด

ดังที่กล่าวไว้ก่อนหน้านี้ องค์ประกอบบล็อก เช่น ส่วนหัว (h1, h2, h3, ฯลฯ…) ไม่อนุญาตให้ใช้เส้นขอบด้านล่างแบบอินไลน์ในการขึ้นบรรทัดใหม่แต่ละบรรทัด เพื่อแก้ไขปัญหานี้ เราสามารถตัดข้อความของเราด้วยแท็ก span ช่วงช่วยให้คุณจัดกลุ่มองค์ประกอบอินไลน์ (เช่น กลุ่มข้อความ) เข้าด้วยกันเพื่อเพิ่มสไตล์ให้กับองค์ประกอบเหล่านั้น ดังนั้น หากเราต้องการสร้างขอบด้านล่างของแท็ก h1 (องค์ประกอบบล็อก) เราสามารถตัดข้อความภายในแท็ก h1 ด้วยแท็ก span เพิ่มเติมได้ จากนั้นเราสามารถเพิ่มรูปแบบการขีดเส้นใต้เส้นขอบด้านล่างให้กับแท็ก span ซึ่งจะทำให้เราสามารถขีดเส้นใต้ข้อความแท็ก h1 (หรือบางส่วนของข้อความ) ได้ แม้ว่าจะแตกไปยังบรรทัดอื่นก็ตาม

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

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

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

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

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

CSS ID: border-ขีดเส้นใต้

ถัดไปเปิดโมดอลการตั้งค่าหน้าและเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

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

คุณสมบัติ border-bottom สามารถปรับแต่งได้ตามที่คุณต้องการ ค่าแรก (2px) กำหนดความหนา (หรือความกว้าง) ของเส้นขอบ ค่าที่สอง (ประ) กำหนดรูปแบบของเส้นขอบ อย่าลืมว่าคุณยังสามารถใช้รูปแบบเส้นขอบต่อไปนี้ได้: เส้นประ จุด เส้นคู่ ร่อง สัน ส่วนที่ใส่เข้าไป และจุดเริ่มต้น และค่าที่สาม (#0c71c3) กำหนดสีของเส้นขอบ คุณยังสามารถปรับแต่ง css padding แบบกำหนดเองร่วมกับค่าความสูงของบรรทัดข้อความในตัวเลือกในตัวโมดูลข้อความเพื่อให้ได้ระยะห่างที่เหมาะสมเช่นกัน

หากคุณไม่ต้องการแท็ก span และต้องการแปลงแท็ก h1 ทั้งหมดเป็นองค์ประกอบแบบอินไลน์ คุณสามารถใช้ CSS นี้ในการตั้งค่าหน้าแทน:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

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

การเพิ่มขีดเส้นใต้เส้นขอบล่างให้กับลิงก์แบบอินไลน์ใน Divi

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

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

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

CSS Class: border-underline

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

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

คุณสมบัติ border-bottom สามารถปรับแต่งได้ตามที่คุณต้องการ ค่าแรก (1px) กำหนดความหนา (หรือความกว้าง) ของเส้นขอบ ค่าที่สอง (ทึบ) กำหนดลักษณะของเส้นขอบ อย่าลืมว่าคุณยังสามารถใช้รูปแบบเส้นขอบต่อไปนี้ได้: เส้นประ จุด เส้นคู่ ร่อง สัน ส่วนที่ใส่เข้าไป และจุดเริ่มต้น และค่าที่สาม (#333333) กำหนดสีของเส้นขอบ

ดังนั้น หากคุณต้องการขีดเส้นใต้เส้นขอบด้านล่างที่มีขนาดกว้าง 2px โดยมีรูปแบบเป็นเส้นประและมีสีอื่น คุณสามารถแทนที่ค่าเหล่านั้นด้วยค่าต่างๆ ดังนี้:

border-bottom: 2px dashed #0c71c3;

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

padding: 0.3em 0;

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

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

แล้ววงเวียนล่ะ?

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

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

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

• พื้นหลังไล่ระดับสีซ้าย: #2b87da
• การไล่สีพื้นหลังด้านขวา: #29c4a9
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• สี: #ffffff
• น้ำหนักตัวแบ่ง: 2px
• ส่วนสูง: 2px
• ความกว้าง: 400px (จำเป็นต้องปรับตามความกว้างของข้อความด้านบน)
• ช่องว่างภายในแบบกำหนดเอง: บน 5px ล่าง 5px

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

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

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

ไชโย!