วิธีจัดรูปแบบความคิดเห็นของ Divi ภายในเทมเพลตโพสต์บล็อก

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

ยาเม็ด

โทรศัพท์

เดสก์ทอป

ยาเม็ด

มือถือ

ดาวน์โหลดเทมเพลตโมดูลความคิดเห็นฟรี

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

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

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

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

ดาวน์โหลด

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

มาสร้างความคิดเห็นใหม่ การออกแบบโมดูล #1

สร้างการออกแบบพื้นหลัง

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

1. ใน Adobe Illustrator ให้สร้างอาร์ตบอร์ดเปล่าประมาณ 1920px สูง + 670px กว้าง
2. สร้างวงกลมสีดำภายในสี่เหลี่ยมสีขาวโดยมีระยะขอบประมาณครึ่งหนึ่งของวงกลม
3. เลือกรูปร่างทั้งสองและสร้างรูปแบบโดยคลิกที่วัตถุ > รูปแบบ > สร้าง
4. ในตัวสร้างแพทเทิร์น ให้เลือก 'brick by column' และบันทึกเป็นตัวอย่างแพทเทิร์น
5. สร้างรูปร่างขนาดของอาร์ตบอร์ดและปรับใช้รูปแบบ
6. สำหรับขนาดหน้าจอที่ตอบสนอง ให้ย่อขนาดรูปร่างให้เหลือครึ่งหนึ่ง กด shift เพื่อรักษาอัตราส่วนของวงกลม
7. คัดลอกและวางรูปร่างที่มีลวดลายถัดจากรูปแรก และตอนนี้ คุณมีรูปแบบเดียวกันกับวงกลมที่เล็กกว่า
8. ดาวน์โหลดทั้งคู่แยกกัน

เปิดตัวสร้างธีมและเพิ่มเทมเพลตใหม่

ตอนนี้ได้เวลาเปิดตัวสร้างธีมแล้ว เพิ่มเทมเพลตใหม่

เลือกเทมเพลตสำหรับโพสต์ทั้งหมด

ใช้เทมเพลตใหม่ในทุกโพสต์

เพิ่ม Custom Body และ Build From Scratch

สุดท้ายแต่ไม่ท้ายสุด ให้เริ่มสร้างเนื้อหาที่กำหนดเองของเทมเพลต

เพิ่มมาตราใหม่

พื้นหลัง

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

• พื้นหลัง: ไล่โทนสี
• สี 1: สีขาวกึ่งโปร่งใส rgba(255,255,255,0.96)
• สี 2: ขาว #ffffff
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
• ภาพ:
  • เดสก์ท็อป: Dots Pattern Image 1
  • แท็บเล็ตและโทรศัพท์: Dots Pattern Image 2

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ตอนนี้ เพิ่มแถวใหม่ที่มีสองคอลัมน์

ขนาด

จากนั้นปรับขนาดของแถว

• ความกว้างของรางน้ำแบบกำหนดเอง: 2
• ความกว้าง: 80%
• ความกว้างสูงสุด: 100%

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

ชายแดน

ในการตั้งค่าคอลัมน์ เพิ่มเส้นขอบบนคอลัมน์ที่สอง

• สไตล์: Top only
• ความกว้าง : 3px
• สี: ดำ #ffffff

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เนื้อหา

เพิ่มโมดูลข้อความแรกในคอลัมน์ 1 ด้วยเนื้อหา H3 ที่คุณเลือก

• ข้อความ: ย่อหน้า

ข้อความหัวเรื่อง

จากนั้นในแท็บออกแบบ ให้จัดรูปแบบข้อความหัวเรื่อง

• ระดับหัวเรื่อง: H3
• แบบอักษร: GFS Didot
• สี: Black #000000
• ขนาด:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต: 9vw
  • โทรศัพท์: 13vw

ระยะห่าง

ปรับระยะห่างด้วย

• แผ่นรองด้านล่าง
  • เดสก์ท็อป: 3vw
  • แท็บเล็ตและโทรศัพท์: 7vw

เพิ่มโมดูลข้อความรับรองในคอลัมน์ 1

เนื้อหา

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

• ผู้เขียน: Loyal Reader
• ตำแหน่งงาน: เจ้าหน้าที่การตลาดเนื้อหา
• บริษัท: Tiger Media Company
• เนื้อหา: ข้อความย่อหน้า
• ภาพ: ภาพถ่ายบุคคล

พื้นหลัง

ตรวจสอบให้แน่ใจว่าพื้นหลังโปร่งใส

• สีพื้นหลัง: โปร่งใส

องค์ประกอบ

ในแท็บองค์ประกอบ เลือกเพื่อแสดงไอคอนใบเสนอราคา

• แสดงไอคอนใบเสนอราคา: ใช่

ไอคอนใบเสนอราคา

จากนั้นกำหนดรูปแบบไอคอนใบเสนอราคาดังนี้

• สี: Black #000000
• พื้นหลัง: สีขาว #ffffff
• ขนาดตัวอักษรของไอคอน:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 5vw
  • โทรศัพท์: 9vw

ภาพ

เปลี่ยนการตั้งค่าภาพต่อไป

• ความกว้างและความสูง:
  • เดสก์ท็อป: 110px
  • แท็บเล็ตและโทรศัพท์: 90px
• มุมโค้งมน: 90px
• เส้นขอบสี: โปร่งใส

ข้อความ

เปลี่ยนการจัดตำแหน่งข้อความด้วย

• การจัดตำแหน่ง: ศูนย์

เนื้อความ

จากนั้น จัดรูปแบบข้อความเนื้อหา

• แบบอักษร: Verdana
• สีดำ
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ผู้เขียนข้อความ

ต่อด้วยการจัดรูปแบบข้อความของผู้เขียน

• แบบอักษร: GFS Didot
• น้ำหนัก: หนา
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 4vw
• ระยะห่างระหว่างตัวอักษร: 1px

ข้อความตำแหน่ง

จากนั้นข้อความตำแหน่ง

• แบบอักษร: GFS Didot
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ความสูงของสาย: 2em

ข้อความบริษัท

อีกทั้งข้อความของบริษัท

• แบบอักษร: GFS Didot
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ความสูงของสาย: 2em

ขนาด

ดำเนินการต่อโดยปรับขนาดของโมดูล

• ความกว้าง:
  • เดสก์ท็อป: 60%
  • แท็บเล็ต: 65%
  • โทรศัพท์: 75%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ปรับระยะห่างด้วย

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 1.5vw
  • แท็บเล็ต: 5vw
  • โทรศัพท์: 6vw

ชายแดน

สุดท้าย เพิ่มเส้นขอบบนให้กับโมดูล

• รูปแบบเส้นขอบ: ด้านบนเท่านั้น
• ความกว้าง: 2px
• สี: ดำ #ffffff

เพิ่มโมดูลความคิดเห็นในคอลัมน์ 2

องค์ประกอบ

ไปที่คอลัมน์ 2 เพิ่มโมดูลความคิดเห็น เปลี่ยนการตั้งค่าองค์ประกอบดังนี้

• แสดงผู้แต่ง อวตาร: ไม่
• แสดงปุ่มตอบกลับ: ใช่
• แสดงจำนวนความคิดเห็น: ไม่

ทุ่งนา

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

• สีข้อความ: ดำ #oooooo
• สีพื้นหลัง: Pale Grey #f7f7f7
• โฟกัสข้อความสี: ดำ #oooooo
• โฟกัสพื้นหลังสี: Pale Grey #f7f7f7
• แบบอักษร: GFS Didot
• ขนาดข้อความ:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 1.5vw
  • โทรศัพท์: 2.5vw
• ระยะห่างระหว่างตัวอักษร: 1px

แบบฟอร์มชื่อเรื่องข้อความ

แก้ไขการตั้งค่าข้อความชื่อแบบฟอร์มถัดไป

• แบบอักษร: GFS Didot
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2.5vw
  • แบบอักษร: 3.5vw

Meta Text

ดำเนินการต่อโดยกำหนดสไตล์ข้อความเมตา

• แบบอักษร: GFS Didot
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 1.3vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 4vw

ข้อความแสดงความคิดเห็น

อีกทั้งข้อความแสดงความคิดเห็น

• แบบอักษร: Verdana
• สี: ดำ #ffffff
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 1.7vw
  • โทรศัพท์: 2.7vw
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของสาย: 1.8em

ปุ่ม

ก้าวต่อไป กำหนดสไตล์ของปุ่ม

• ขนาดข้อความ:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3.5vw
• สีข้อความ: ขาว #000000
• พื้นหลัง: สีดำ #ffffff
• ระยะห่างระหว่างตัวอักษร: 1px
• แบบอักษร: GFS Didot

ขนาด

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

• ความกว้าง: 90%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

สุดท้ายเว้นวรรคด้วย

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 4vw
  • แท็บเล็ตและโทรศัพท์: 8vw
• ช่องว่างภายในซ้ายและขวา: 3vw

มาสร้างความคิดเห็นใหม่ การออกแบบโมดูล #2

สร้างการออกแบบพื้นหลัง

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

1. สร้างผ้าใบกว้าง 1800px และสูงประมาณ 1800px
2. เพิ่มวงกลมสองวง วงหนึ่งใหญ่กว่าอีกวงหนึ่ง
3. ระบายสีวงกลมและเพิ่มความโปร่งใส
4. วางวงกลมสองวงทับซ้อนกันเล็กน้อยที่ด้านบนซ้ายของผืนผ้าใบ
5. จัดกลุ่มวงกลมเป็นวัตถุเดียวและทำซ้ำ
6. พลิกวงกลมแล้ววางลงตามแนวทแยงมุมจากสองวงแรก
7. อย่าลืมเว้นที่ว่างไว้ด้านบนและด้านล่าง เมื่อมีความคิดเห็นจำนวนมาก รูปภาพจะซ้ำและเรียงต่อกันในแนวตั้ง

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

เปิดตัวสร้างธีมและเพิ่มเทมเพลตใหม่

ตอนนี้ได้เวลาเปิดตัวสร้างธีมแล้ว เพิ่มเทมเพลตใหม่

เลือกเทมเพลตสำหรับโพสต์ทั้งหมด

ใช้เทมเพลตกับโพสต์ทั้งหมด

เพิ่ม Custom Body และ Build From Scratch

และเริ่มสร้างเนื้อหาที่กำหนดเองของเทมเพลต

เพิ่มมาตราใหม่

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

พื้นหลัง

• พื้นหลัง: ไล่โทนสี
• ไล่ระดับสี 1: สีขาวใส rgba(255,255,255,0.55)
• ไล่ระดับสี 2: สีขาวใส rgba(255,255,255,0.55)
• ภาพ: พื้นหลังวงกลม

ระยะห่าง

นอกจากนี้ ให้ปรับระยะห่างของส่วนก่อนเพิ่มแถว

• ช่องว่างภายในด้านบนและด้านล่าง: 200px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ตอนนี้เพิ่มแถวที่มีสามคอลัมน์

ขนาด

ก่อนเพิ่มโมดูล ให้ปรับขนาดของแถว

• ความกว้างของรางน้ำแบบกำหนดเอง: 2
• ความกว้าง: 80%
• ความกว้างสูงสุด: 100%

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

พื้นหลัง

ตอนนี้ กำหนดสไตล์คอลัมน์ที่สองโดยเพิ่มพื้นหลังสีน้ำเงิน

• สีพื้นหลัง : ฟ้า #51a2ff

ชายแดน

ดำเนินการต่อโดยปัดเศษเส้นขอบ

• มุมโค้งมน: 1vw ทั้งสี่มุม

กล่องเงา

สุดท้ายเพิ่มเงากล่องด้วย

• เงา: ตัวเลือกที่สาม
• ความเบลอ: 80px
• สี: rgba(0,0,0,0.13)

เพิ่มโมดูลบุคคลในคอลัมน์ 1

เนื้อหา

ได้เวลาเพิ่มโมดูลแล้ว เริ่มต้นด้วยโมดูลบุคคลในคอลัมน์ 1 และเพิ่มเนื้อหา

• ชื่อ เจนนี่ แมคอาบี
• ตำแหน่ง: Regular Contributor
• เนื้อหา: ข้อความย่อหน้า
• ภาพ: ภาพถ่ายบุคคล

พื้นหลัง

เพิ่มพื้นหลังสีขาวให้กับโมดูล

• สีพื้นหลัง: ขาว #000000

ภาพ

ในแท็บออกแบบ กำหนดสไตล์เส้นขอบของรูปภาพดังนี้

• มุมโค้งมน: 0.5vw ที่ด้านบนซ้ายและด้านบนขวา
• รูปแบบเส้นขอบ: ขอบด้านล่าง
  • ความกว้าง: 5px
  • สี: ฟ้า #51a2ff

ข้อความชื่อเรื่อง

ดำเนินการต่อโดยกำหนดสไตล์ข้อความส่วนหัว

• ระดับหัวเรื่อง: H4
• แบบอักษร: Alegreya Sans SC
• สไตล์: TT
• สี: #021859
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 5vw
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของสาย: 1.6em

เนื้อความ

จากนั้นข้อความเนื้อหา

• แบบอักษร: Lato
• สี: ฟ้า #1a1f73
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ความสูงของสาย: 2em

ข้อความตำแหน่ง

ต่อด้วยข้อความตำแหน่ง

• แบบอักษร: Lato
• สไตล์: ตัวเอียง
• สี: #021859
• ขนาด:
  • เดสก์ท็อป: 0.8vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 3.5vw

ขนาด

จากนั้นปรับขนาด

• ความกว้าง:
  • เดสก์ท็อป: 100%
  • แท็บเล็ต: 50%
  • โทรศัพท์: 70%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

อีกทั้งการเว้นวรรค

• ช่องว่างบนและล่าง: 4vw

ชายแดน

จากนั้นเพิ่มมุมโค้งมน

• มุมโค้งมน: o.5vw ทั้งสี่มุม
• รูปแบบเส้นขอบ: 24 px ทั้งสี่ด้าน
  • สี: ขาว #ffffff

กล่องเงา

สุดท้ายเพิ่มเงาของกล่อง

• เงา: ตัวเลือกที่สาม
• ความเบลอ: 80px
• สี: rgba(0,0,0,0.13)

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

เครือข่าย

ด้านล่างโมดูลบุคคล เพิ่มโมดูลติดตามโซเชียลมีเดียด้วยเครือข่ายโซเชียลสามเครือข่าย

• Facebook
• Linkedin
• ทวิตเตอร์

การตั้งค่าเครือข่าย

ใช้สีพื้นหลังโปร่งใสกับแต่ละเครือข่ายโซเชียล คุณต้องทำทีละอย่าง

• พื้นหลัง: โปร่งใส

การจัดตำแหน่ง

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

• การจัดตำแหน่งโมดูล: ศูนย์

ไอคอน

สุดท้าย ให้สีไอคอนเป็นสีน้ำเงิน

• สี: ฟ้า #51a2ff
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ตและโทรศัพท์: 4vw

เพิ่มโมดูลข้อความในคอลัมน์ 2

เนื้อหา

ไปยังคอลัมน์ 2 เพิ่มโมดูลข้อความที่มีเนื้อหา h3 ที่คุณเลือก

• ข้อความ: แสดงความคิดเห็น

พื้นหลัง

เพิ่มพื้นหลังสีขาว

• สีพื้นหลัง: ขาว #ffffff

ข้อความหัวเรื่อง

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

• ระดับหัวเรื่อง: H3
• แบบอักษร: Alegreya Sans SC
• น้ำหนัก: หนา
• รูปแบบตัวอักษร: TT
• สี: ฟ้า #021859
• ขนาด:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ตและโทรศัพท์: 5.5vw

ระยะห่าง

สุดท้าย ปรับระยะห่าง

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 6vw
• แผ่นรองด้านล่าง
  • เดสก์ท็อปและแท็บเล็ต: 3vw
• ช่องว่างภายในซ้ายและขวา:
  • เดสก์ท็อปและแท็บเล็ต: 1vw

เพิ่มโมดูลความคิดเห็นในคอลัมน์ 2

องค์ประกอบ

ตอนนี้เพิ่มโมดูลความคิดเห็นในคอลัมน์ 2 เปิดใช้งานองค์ประกอบทั้งหมด

• แสดงผู้แต่ง อวตาร: ใช่
• แสดงปุ่มตอบกลับ: ใช่
• แสดงจำนวนความคิดเห็น: ใช่

พื้นหลัง

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

• สีพื้นหลัง: ขาว #ffffff

ทุ่งนา

จากนั้นเริ่มจัดรูปแบบโมดูลโดยปรับการตั้งค่าฟิลด์ดังนี้

• สีพื้นหลัง: ขาว #ffffff
• สีข้อความ: ฟ้า #1a1f73
• โฟกัสพื้นหลังสี: ขาว #ffffff
• โฟกัสข้อความสี: ฟ้า #1a1f73
• แบบอักษร: Alegreya Sans SC
• สไตล์: TT
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 4vw
• มุมโค้งมน: 5px ทุกมุม

ภาพ

เปลี่ยนการตั้งค่าภาพด้วย

• มุมโค้งมน: 5px
• รูปแบบเส้นขอบ: ทุกด้าน
• ความกว้าง: 3px
• สี: ฟ้า #1a1f73

ข้อความนับความคิดเห็น

จากนั้นความคิดเห็นนับข้อความ

• ระดับหัวเรื่อง: H3
• แบบอักษร: Alegreya Sans SC
• รูปแบบตัวอักษร: TT
• สี: ฟ้า #021859
• ขนาด:
  • เดสก์ท็อป: 1.3vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 5vw
• ความสูงของสาย: 2 em

แบบฟอร์มชื่อเรื่องข้อความ

นอกจากนี้ ให้จัดรูปแบบข้อความชื่อแบบฟอร์ม

• ระดับหัวเรื่อง: H3
• แบบอักษร: Alegreya Sans SC
• รูปแบบตัวอักษร: TT
• สี: ฟ้า #021859
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 5vw
• ความสูงของสาย: 2 em

Meta Text

ย้ายไปยังข้อความเมตาและรูปแบบดังต่อไปนี้

• แบบอักษร: Lato
• สี: #021859
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.7vw
  • โทรศัพท์: 3.5vw

ข้อความแสดงความคิดเห็น

แล้วข้อความแสดงความคิดเห็น

• แบบอักษร: Lato
• สี: #021859
• ขนาด:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 1.8vw
  • โทรศัพท์: 2.5vw

ปุ่ม

อย่าลืมจัดรูปแบบปุ่มด้วย

• ขนาดข้อความ:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3.5vw
• สีข้อความ: ขาว #ffffff
• รัศมีเส้นขอบ: 5px
• แบบอักษร: Lato

ระยะห่าง

นอกจากนี้ ระยะห่างของโมดูลความคิดเห็น

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -1vw
  • แท็บเล็ตและโทรศัพท์: -3.3vw
• แผ่นรองด้านบน:
  • เดสก์ท็อปและแท็บเล็ต: 3vw
  • โทรศัพท์: 4vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 3vw
  • โทรศัพท์และแท็บเล็ต: 0vw
• ช่องว่างภายในซ้ายและขวา:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 7vw

ชายแดน

สุดท้าย เพิ่มมุมโค้งมนให้กับโมดูลความคิดเห็น

• รูปแบบเส้นขอบ: 2px ทั้งสี่ด้าน
• สี: ฟ้า #1a1f73

เพิ่มโมดูล Optin อีเมลในคอลัมน์ 3

เนื้อหา

ย้ายไปยังคอลัมน์ 3 และโมดูล optin อีเมล ตั้งชื่อโมดูล

• ข้อความ: รับการอัปเดตเป็นประจำ
• เนื้อหา: ข้อความย่อหน้า

บัญชีอีเมล์

ตั้งค่าผู้ให้บริการอีเมลของคุณในแท็บบัญชีอีเมล เลือกรายการและเพิ่มคีย์ API ของคุณ

• ผู้ให้บริการอีเมล
  • รายการ
  • คีย์ API

ทุ่งนา

จากนั้นเลือกที่จะใช้เฉพาะช่องชื่อเดียว

• ใช้ฟิลด์ชื่อเดียว: ใช่

พื้นหลัง

เพิ่มพื้นหลังสีขาวให้กับโมดูล

• สีพื้นหลัง: ขาว

เค้าโครง

ไปที่การออกแบบ ta และเปลี่ยนการตั้งค่าเลย์เอาต์ดังนี้

• เลย์เอาต์: ร่างกายอยู่ซ้าย แบบฟอร์มอยู่ขวา
• ชื่อเต็มความกว้าง: ใช่
• ชื่อ เต็มความกว้าง: ใช่
• นามสกุล เต็มความกว้าง: ใช่
• อีเมลแบบเต็มความกว้าง: ใช่

ทุ่งนา

จากนั้นกำหนดรูปแบบการตั้งค่าฟิลด์

• สีข้อความ: ฟ้า #1a1f73
• สีพื้นหลัง : ขาว #ffff
• โฟกัสข้อความสี: ฟ้า #1a1f73
• โฟกัสพื้นหลังสี: ขาว #ffff
• แบบอักษร: Lato
• ขนาดข้อความ:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.2vw
• ระยะห่างระหว่างตัวอักษร: 1px
• มุมโค้งมน: 0.2vw ทุกมุม
• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
  • ความกว้าง: 2px
  • สี: ฟ้า #1a1f73

ข้อความชื่อเรื่อง

ตามด้วยข้อความชื่อเรื่อง

• ระดับหัวเรื่อง: H4
• แบบอักษร: Alegreya Sans SC
• น้ำหนัก: ปานกลาง
• รูปแบบตัวอักษร: TT
• สี: ฟ้า #1a1f73
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 5vw
• ระยะห่างระหว่างตัวอักษร: 1px

เนื้อความ

อีกทั้งเนื้อความ

• แบบอักษร: Lato
• สี: ฟ้า #1a1f73
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2.3vw
  • โทรศัพท์: 3vw

ข้อความผลลัพธ์

อย่าลืมข้อความผลลัพธ์

• แบบอักษร: Lato
• สี: ฟ้า #1a1f73
• ขนาด:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2.3vw
  • โทรศัพท์: 3vw

ปุ่ม

กำหนดสไตล์ของปุ่มด้วย

• ขนาดข้อความ:
  • เดสก์ท็อป: 0.7vw
  • แท็บเล็ต: 2.3vw
  • โทรศัพท์: 3vw
• สีข้อความ: ขาว #ffffff
• สีพื้นหลัง: ฟ้า #51a2ff
• แบบอักษร: Lato

ระยะห่าง

ปรับระยะห่าง.

• ช่องว่างบนและล่าง: 4vw

ชายแดน

จากนั้นเพิ่มมุมโค้งมน

• มุมโค้งมน: o.5vw ทั้งสี่มุม

กล่องเงา

สุดท้ายเพิ่มเงาของกล่อง

• เงา: ตัวเลือกที่สาม
• ความเบลอ: 80px
• สี: rgba(0,0,0,0.13)

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของบทช่วยสอนนี้ในขั้นสุดท้าย

เดสก์ทอป

ยาเม็ด

โทรศัพท์

เดสก์ทอป

ยาเม็ด

มือถือ

เป็นบทสรุปโมดูลความคิดเห็น!

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