ปลดปล่อยพลังของโมดูลข้อความของ Divi สำหรับการออกแบบรายการสร้างสรรค์

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

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

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

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

แอบมอง

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

แรงบันดาลใจจากการตั้งค่าโมดูลข้อความ

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

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

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

คุณยังสามารถกำหนดเป้าหมายรูปแบบของระดับหัวเรื่องต่างๆ (หรือแท็ก) ใต้แต่ละแท็บภายใต้ตัวเลือกรูปแบบหัวเรื่อง

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

สำหรับข้อมูลเพิ่มเติม โปรดดูการอัปเดตฟีเจอร์ที่อธิบายตัวเลือกข้อความที่ยอดเยี่ยมเหล่านี้

การสร้างรายการ HTML ของคุณ

รายการ html สามารถ "เรียงลำดับ" (ด้วยตัวเลข เลขโรมัน ฯลฯ) หรือ "ไม่เรียงลำดับ" (ด้วยไอคอนสี่เหลี่ยม ไอคอนวงกลม ฯลฯ) สำหรับรายการที่ไม่เรียงลำดับ รายการจะถูกห่อด้วยแท็ก “ul” (“ul” ย่อมาจาก “unordered list”) สำหรับรายการสั่งซื้อ รายการจะถูกห่อด้วยแท็ก "ol" ("ol" หมายถึง "รายการที่สั่งซื้อ") แต่ละรายการจะถูกห่อด้วยแท็ก "li" ("li" สำหรับ "list item")

นี่คือโครงสร้างพื้นฐานของรายการสั่งซื้อ:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

ซึ่งโดยค่าเริ่มต้นจะมีลักษณะดังนี้:

1. รายการสินค้า
2. รายการสินค้า
3. รายการสินค้า

คุณสามารถสร้างรายการ HTML ได้จริงโดยใช้ตัวแก้ไข wysiwyg ภายใน Divi Text Module ตรวจสอบให้แน่ใจว่าคุณกำลังแก้ไขในแท็บภาพ และเพียงพิมพ์รายการของคุณเพื่อให้แน่ใจว่ามีตัวแบ่งบรรทัด (กด Enter) หลังจากแต่ละรายการ จากนั้นไฮไลต์เนื้อหาและคลิกไอคอนรายการที่ด้านบนของตัวแก้ไข

ไปที่แท็บข้อความเพื่อดูว่า HTML มีลักษณะอย่างไร:

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

นี่คือโครงสร้างพื้นฐานของรายการที่ซ้อนกันซึ่งมีรายการที่เรียงลำดับโดยแต่ละรายการมีรายการที่ไม่เรียงลำดับที่ซ้อนกัน

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

โดยค่าเริ่มต้น รายการ html ที่ซ้อนกันนี้จะมีลักษณะดังนี้:

1. รายการสั่งซื้อ
   • รายการที่ไม่เรียงลำดับ
2. รายการสั่งซื้อ
   • รายการที่ไม่เรียงลำดับ
3. รายการสั่งซื้อ
   • รายการที่ไม่เรียงลำดับ

คุณยังสามารถเพิ่มแท็ก html อื่นๆ ในรายการได้เช่นกัน ตัวอย่างเช่น เราสามารถห่อรายการสั่งซื้อในแท็ก h5 ผลลัพธ์จะมีลักษณะดังนี้:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

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

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

การสร้างส่วนและแถวสำหรับรายการ

สร้างหน้าใหม่และปรับใช้ Visual Builder จากนั้นเลือกตัวเลือกเพื่อสร้างหน้าตั้งแต่เริ่มต้น จากนั้นสร้างส่วนปกติที่มีแถวสองคอลัมน์

การสร้างรายการ HTML ในโมดูลข้อความ

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

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

โครงสร้างนี้ควรดูคุ้นเคยจากก่อนหน้านี้ ข้อความส่วนหัว h5 จะเป็นรายการที่เรียงลำดับ และข้อความจำลอง "lorem ipsum" จะเป็นรายการที่ไม่เรียงลำดับที่ซ้อนกัน

โดยค่าเริ่มต้นจะมีลักษณะดังนี้:

ฉันรู้ แต่ด้วยเนื้อหานี้ ตอนนี้เราสามารถเริ่มส่วนสนุก ๆ ในการออกแบบรายการของเราด้วย Divi!

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

การออกแบบรายการ #1

สำหรับผู้เริ่มต้น ให้โมดูลข้อความของเรามีพื้นหลังแบบไล่ระดับสีดังนี้:

พื้นหลังไล่ระดับสีซ้าย: rgba(0,0,0,0.04)
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0)
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 25%
ตำแหน่งสุดท้าย: 0%

การจัดรูปแบบรายการสั่งซื้อ

ไปที่แท็บออกแบบแล้วเลือกแท็บรายการสั่งซื้อภายใต้การสลับข้อความ

จากนั้นอัปเดตสิ่งต่อไปนี้:

แบบอักษรของรายการสั่งซื้อ: Abril Fatface
น้ำหนักแบบอักษรของรายการสั่งซื้อ: Bold
รายการสั่งซื้อ สีข้อความ: #559cad
ขนาดรายการสั่งซื้อ: 45px
รายการที่สั่งซื้อ ความสูงของบรรทัด: 1.6em
ประเภทรายการสั่งซื้อ: decimal-leading-zero
ตำแหน่งสไตล์รายการที่สั่งซื้อ: ภายนอก
เยื้องรายการสั่งซื้อ: 2vw

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

การจัดรูปแบบรายการที่ไม่เรียงลำดับ

ตอนนี้คลิกแท็บรายการสั่งซื้อเพื่อเปลี่ยนการตั้งค่าต่อไปนี้:

แบบอักษรของรายการที่ไม่เรียงลำดับ: มอนต์เซอร์รัต
น้ำหนักแบบอักษรของรายการที่ไม่เรียงลำดับ: เบา
สีข้อความของรายการที่ไม่เรียงลำดับ:
ขนาดข้อความรายการที่ไม่เรียงลำดับ: 18px
Unordered List Style Type: ไม่มี
เยื้องรายการที่ไม่เรียงลำดับ: 0.01px

จัดแต่งทรงผม H5 Header

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

หัวข้อ 5 แบบอักษร: มอนต์เซอร์รัต
หัวข้อ 5 น้ำหนักแบบอักษร: เบา
หัวข้อ 5 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่ (TT)
หัวเรื่อง 5 สีข้อความ: #4f6d7a
หัวเรื่อง 5 ขนาดข้อความ: 5vw (เดสก์ท็อป), 70px (แท็บเล็ต), 40px (สมาร์ทโฟน)

หากต้องการปิดการออกแบบโมดูลข้อความของเรา ให้เพิ่มช่องว่างภายในแบบกำหนดเองต่อไปนี้:

Custom Padding (เดสก์ท็อป): 3vw บน, 3vw ล่าง
Custom Padding (แท็บเล็ต): 2vw Left
Custom Padding (สมาร์ทโฟน): 50px ซ้าย

บันทึกการตั้งค่า.

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

<ol start="4">

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

การออกแบบรายการ #2

สำหรับการออกแบบรายการตัวอย่างที่สองนี้ ฉันจะทำซ้ำส่วนแรกที่เราสร้างขึ้นเพื่อให้เราเริ่มต้นได้ ฉันจะแนะนำพื้นหลังสุดเจ๋งสำหรับการออกแบบรายการโดยใช้การไล่ระดับสีพื้นหลัง

การสร้างการออกแบบไล่ระดับพื้นหลังแบบกำหนดเอง

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

ไล่สีพื้นหลังซ้ายสี: #ffffff
พื้นหลังไล่ระดับสีขวา: rgba(155,29,32,0.08)
ทิศทางการไล่ระดับสี: 45deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%

บันทึกการตั้งค่า.

ตอนนี้อัปเดตการตั้งค่าแถวของคุณด้วยการไล่ระดับสีพื้นหลังต่อไปนี้:

พื้นหลังไล่ระดับสีซ้าย: rgba(155,29,32,0.08)
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0)
ทิศทางการไล่ระดับสี: 45deg
ตำแหน่งเริ่มต้น: 25%
ตำแหน่งสุดท้าย: 0%

คอลัมน์ 2 พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
คอลัมน์ 2 พื้นหลังไล่ระดับสีขวา: #ffffff
คอลัมน์ 2 ทิศทางการไล่ระดับสี: 45deg
คอลัมน์ 2 ตำแหน่งเริ่มต้น: 65%
คอลัมน์ 2 ตำแหน่งสิ้นสุด: 0%

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

การตั้งค่าสไตล์สำหรับการออกแบบรายการ #2

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

ขั้นแรกให้ลบการไล่ระดับสีพื้นหลัง
น้ำหนักแบบอักษรของรายการที่ไม่เรียงลำดับ: ปานกลาง
สีข้อความของรายการที่ไม่เรียงลำดับ: rgba(0,0,0,0.5)
น้ำหนักแบบอักษรของรายการสั่งซื้อ: ปกติ
สีข้อความของรายการสั่งซื้อ: #9b1d20
หัวข้อที่ 5 น้ำหนักแบบอักษร: บาง
หัวเรื่อง 5 สีข้อความ: rgba(0,0,0,0.8)
หัวเรื่อง 5 ขนาดข้อความ: 5vw (เดสก์ท็อป)

ตอนนี้คัดลอกสไตล์โมดูลไปยังโมดูลข้อความในคอลัมน์ด้านขวา

นี่คือการออกแบบขั้นสุดท้ายของตัวอย่างที่สองของเรา

การออกแบบรายการ #3

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

อัปเดตการ ตั้งค่าส่วน ด้วยสีพื้นหลังแบบไล่ระดับสีใหม่:

ไล่สีพื้นหลังซ้ายสี: #559CAD
พื้นหลังไล่ระดับสีขวา: #4f6d7a

อัปเดตการ ตั้งค่าแถว ด้วยสีพื้นหลังไล่ระดับด้านซ้ายใหม่:

พื้นหลังไล่ระดับสีซ้าย: #4f6d7a

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

พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
ไล่สีพื้นหลังขวาสี: #559cad
ทิศทางการไล่ระดับสี: 45deg
ตำแหน่งเริ่มต้น: 75%
ตำแหน่งสุดท้าย: 0%

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

การตั้งค่าสไตล์สำหรับการออกแบบรายการ #3

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

ไปที่การตั้งค่าโมดูลข้อความและอัปเดตสิ่งต่อไปนี้:

แบบอักษรของรายการสั่งซื้อ: Poppins
น้ำหนักแบบอักษรของรายการสั่งซื้อ: หนัก
การจัดตำแหน่งข้อความรายการสั่งซื้อ: Center
ขนาดข้อความรายการสั่งซื้อ: 4vw (เดสก์ท็อป), 50px (แท็บเล็ต)
สีข้อความของรายการสั่งซื้อ: #f4f1bb
ประเภทรายการที่ได้รับคำสั่ง: ทศนิยม
ตำแหน่งสไตล์รายการที่สั่ง: ภายใน
สั่งซื้อรายการเยื้อง: 0vw

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

น้ำหนักแบบอักษรของรายการที่ไม่เรียงลำดับ: เบา
สีข้อความของรายการที่ไม่เรียงลำดับ: #ffffff

หัวข้อที่ 5 แบบอักษร: Lato
หัวข้อที่ 5 น้ำหนักแบบอักษร: บาง
หัวเรื่อง 5 ระยะห่างตัวอักษร: 6vw (เดสก์ท็อป), 70px (แท็บเล็ต), 40px (สมาร์ทโฟน)
หัวเรื่อง 5 สีข้อความ: #ffffff
หัวเรื่อง 5 ขนาดตัวอักษร: 6vw

Custom Padding (เดสก์ท็อป): 15% ซ้าย, 15% ขวา
Custom Padding (แท็บเล็ต): 5% ซ้าย, 5% ขวา

นอกจากนี้ คุณควรนำช่องว่างด้านซ้ายขนาด 50px แบบกำหนดเองบนสมาร์ทโฟนออกสำหรับการออกแบบนี้

นี่คือการออกแบบขั้นสุดท้าย

การออกแบบรายการ #4

สำหรับตัวอย่างที่สี่นี้ ฉันจะใช้การออกแบบ "รายการ" ขั้นต่ำ (ดูสิ่งที่ฉันทำที่นั่น) สำหรับรายการเรียงลำดับ ฉันจะใช้ตัวเลขโรมันตัวพิมพ์ใหญ่ขนาดใหญ่ในแบบอักษร Lato ฉันจะจัดกรอบรายการด้วยการเพิ่มเงากล่องให้กับแต่ละโมดูล

การตั้งค่าสไตล์สำหรับการออกแบบรายการ #4

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

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

แบบอักษรของรายการสั่งซื้อ: Lato
น้ำหนักแบบอักษรของรายการสั่งซื้อ: เบา
สีข้อความของรายการสั่งซื้อ: #000000
ขนาดรายการสั่งซื้อ: 6vw
ประเภทรายการที่ได้รับคำสั่ง: upper-roman
สั่งซื้อรายการเยื้อง: 0vw

หัวข้อที่ 5 แบบอักษร: Lato
หัวข้อที่ 5 น้ำหนักแบบอักษร: ตัวหนา
รูปแบบตัวอักษรของหัวเรื่อง: ขีดเส้นใต้
หัวเรื่อง 5 ขีดเส้นใต้สี: rgba(0,0,0,0.14)
หัวข้อที่ 5 รูปแบบการขีดเส้นใต้: double
หัวเรื่อง 5 สีข้อความ: #000000
หัวเรื่อง 5 ขนาดข้อความ: 40px

แพ็ดดิ้งที่กำหนดเอง: 3vw ซ้าย 3vw ขวา

ลบ padding ด้านซ้ายแบบกำหนดเองสำหรับแท็บเล็ตและสมาร์ทโฟนที่ยกมาจากการออกแบบก่อนหน้า

ตำแหน่งแนวนอนของกล่องเงา: 6px
ตำแหน่งแนวตั้งเงาของกล่อง: 6px
ความแรงของการกระจายเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ: 0px
เงาสี: #000000
ตำแหน่งเงาของกล่อง: เงาภายใน

คัดลอกลักษณะโมดูลไปที่คอลัมน์ที่สอง จากนั้นอัปเดตตำแหน่งเงาของกล่องเป็นเงาภายนอก

นี่คือผลลัพธ์สุดท้าย

แค่นั้นแหละ!

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

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

ฉันชอบที่จะดูตัวอย่างจากคุณ ดังนั้นโปรดแบ่งปันในความคิดเห็น

ไชโย!