วิธีสร้างเทมเพลตหน้าผู้แต่งด้วยตัวสร้างธีมของ Divi

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

เมื่อคุณสร้างเลย์เอาต์นี้ขึ้นใหม่ภายใน Divi Theme Builder คุณจะใช้เนื้อหาแบบไดนามิก ดังนั้นหน้าผู้เขียนทั้งหมดจะได้รับผลกระทบในครั้งเดียว ในขณะที่ยังคงรักษาเนื้อหาเฉพาะสำหรับผู้เขียนไว้ สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าผู้เขียนทุกคนได้อัปเดตข้อมูลแล้ว หากภาพเหล่านั้นไม่มีภาพ Gravatar ที่ดี เราขอแนะนำให้คุณดาวน์โหลดปลั๊กอิน WP User Avatar เพื่อให้สามารถควบคุมได้มากขึ้น คุณจะสามารถดาวน์โหลดไฟล์ JSON ของเทมเพลตได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดหน้าผู้เขียนต้อนรับฟรี

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

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

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

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

ดาวน์โหลด

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

1. อัปเดตผู้ใช้

เพิ่มประสิทธิภาพรูปภาพของผู้แต่ง

เพิ่มปลั๊กอินอวาตาร์ผู้ใช้ WP

เมื่อมีการเพิ่มผู้เขียนลงใน WordPress ระบบจะดึงภาพ Gravatar โดยอัตโนมัติ ผู้เขียนบางคนไม่มีบัญชี Gravatar หรือรูปภาพไม่ตรงกับไซต์ของคุณ การใช้ปลั๊กอิน WP User Avatar จะช่วยให้คุณควบคุมได้มากขึ้น

กรอกข้อมูลผู้แต่ง

ตรวจสอบให้แน่ใจว่าได้รวมข้อมูลผู้เขียนต่อไปนี้ทั้งหมด:

• ชื่อและนามสกุล
• ชื่อที่แสดง
• ผู้เขียน Bio
• ผู้เขียน Image

2. สร้างเค้าโครงใหม่ใน Theme Builder

เปิดตัวสร้างธีม

ขั้นตอนแรกในการสร้างเทมเพลตหน้าผู้เขียนใหม่คือการเปิด Theme Builder และเพิ่มเทมเพลตใหม่ เลือก "หน้าผู้แต่งทั้งหมด" ใต้ส่วนหน้าเก็บถาวร และคลิกที่ปุ่ม "สร้างเทมเพลต" สีฟ้า

สร้างเนื้อหาที่กำหนดเอง

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

ส่วนที่ 1 การตั้งค่า

ระยะห่าง

ถึงเวลาสร้างเค้าโครง! ภายในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนและเปลี่ยนค่าระยะห่างดังนี้:

• แผ่นรองด้านบน
  • เดสก์ท็อป: 300px
  • แท็บเล็ตและโทรศัพท์: 50px
• แผ่นรองด้านล่าง
  • เดสก์ท็อป: 0px

ชายแดน

เพิ่มเส้นขอบด้านล่างให้กับส่วนด้วย

• รูปแบบเส้นขอบ: ขอบด้านล่าง
• ความกว้าง: 2px
• สี: Black #000000

เพิ่มแถว 1

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

ตอนนี้ เพิ่มแถวที่มีโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนขนาดดังนี้:

• ความกว้าง
  • เดสก์ท็อป: 1580px
  • แท็บเล็ตและโทรศัพท์: auto
• ความกว้างสูงสุด
  • เดสก์ท็อป: 90%
  • แท็บเล็ตและโทรศัพท์: 80%

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

• ระยะขอบซ้าย: อัตโนมัติ
• ระยะขอบขวา: 79px
• ช่องว่างภายในด้านขวา: 0px

CSS ที่กำหนดเอง

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

• องค์ประกอบหลัก
  • เดสก์ท็อป: จอแสดงผล: ดิ้น; จัดรายการ: ศูนย์;

display: flex;
align-items: center;

• • แท็บเล็ตและโทรศัพท์: จอแสดงผล: บล็อก;

display: block;

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

ข้อความเนื้อหา

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

• เนื้อหา: เนื้อหาแบบไดนามิก – ผู้โพสต์
• ก่อน: <h1>
• หลัง: <h1>
• รูปแบบชื่อ: ชื่อและนามสกุล

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

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

• ระดับหัวเรื่อง: H1
• แบบอักษร: Krona One
• น้ำหนัก: หนา
• สไตล์: TT
• สี: Black #000000
• ขนาด
  • เดสก์ท็อป: 90px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 50px

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่ตอบสนองด้วย

• ขอบล่าง
  • เดสก์ท็อป: -43px
  • แท็บเล็ต: -33px
  • โทรศัพท์: -27px
• ช่องว่างภายในด้านบน: 19px
• ช่องว่างภายในด้านล่าง: 0px

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

ข้อความเนื้อหา

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความอื่น เพิ่มผู้เขียนไบโอไดนามิกเนื้อหา

• เนื้อหา: เนื้อหาแบบไดนามิก – ผู้เขียน Bio

ข้อความ

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

• แบบอักษร: เปิด Sans
• น้ำหนัก: เบา
• สี: Black#000000
• ขนาด
  • เดสก์ท็อป: 16px
  • แท็บเล็ต: 15px
  • โทรศัพท์: 14px
• ระยะห่างระหว่างตัวอักษร: 1px

ระยะห่าง

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มระยะขอบด้านบน

• ขอบบน: 100px

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

เนื้อหารูปภาพ

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

• รูปภาพ: เนื้อหาแบบไดนามิก – รูปภาพโปรไฟล์ผู้แต่ง

ขนาด

จากนั้น ปรับการตั้งค่าขนาดของรูปภาพ

• ความกว้าง
  • เดสก์ท็อป: 100%
  • แท็บเล็ตและโทรศัพท์: 50%

ระยะห่าง

เพิ่มระยะขอบด้านล่างที่ตอบสนองด้วย

• ขอบล่าง
  • เดสก์ท็อปและแท็บเล็ต: -20%
  • โทรศัพท์: -30%

ชายแดน

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

• มุมโค้งมน: 50vw ทั้งสี่มุม
• รูปแบบ: ทั้งสี่ด้าน
• ความกว้าง: 2px
• สี: Black #000000

เพิ่มส่วนที่2

ระยะห่าง

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

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

เพิ่มแถว2

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

เพิ่มแถวที่มีหนึ่งคอลัมน์ถัดไป

ขนาด

เปิดการตั้งค่าแถว ไปที่แท็บออกแบบ และทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาด

• ความกว้าง: 1580px
• ความกว้างสูงสุด
  • เดสก์ท็อปและแท็บเล็ต: 90%
  • โทรศัพท์: 95%
• การจัดแนวแถว: กึ่งกลาง

เพิ่มโมดูลบล็อก

เนื้อหา

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

• โพสต์สำหรับหน้าปัจจุบัน: ใช่

องค์ประกอบ

ในส่วนองค์ประกอบ เรากำลังเปิดใช้งานองค์ประกอบต่อไปนี้เพื่อแสดงในการออกแบบของเรา:

• ภาพที่โดดเด่น
• ผู้เขียน
• หมวดหมู่
• ข้อความที่ตัดตอนมา
• การแบ่งหน้า

เค้าโครง

ไปที่แท็บออกแบบถัดไปแล้วเปลี่ยนเค้าโครง

• เค้าโครง: Grid

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

จากนั้นจัดรูปแบบข้อความชื่อตาม:

• ระดับหัวเรื่อง: H2
• แบบอักษร: Krona One
• สไตล์: TT
• สี: Black #000000
• ขนาด
  • เดสก์ท็อป: 26px
  • แท็บเล็ต: 16px
  • โทรศัพท์: 18px
• ระยะห่างระหว่างตัวอักษร: 3px
• ความสูงของสาย: 1.3m

เนื้อความ

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

• แบบอักษร: เปิด Sans
• น้ำหนัก: เบา
• สี: Black #000000
• ขนาด
  • เดสก์ท็อป: 16px
  • แท็บเล็ต: 15px
  • โทรศัพท์: 14px
• ระยะห่างระหว่างตัวอักษร: 1px

Meta Text

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

• แบบอักษร: เปิด Sans
• สไตล์: TT
• สี: Black #000000
• ระยะห่างระหว่างตัวอักษร: 2px

ขนาด

ดำเนินการต่อโดยแก้ไขการตั้งค่าขนาดของโมดูลตามขนาดหน้าจอต่างๆ

• ความกว้าง
  • เดสก์ท็อป: อัตโนมัติ
  • แท็บเล็ต: 90%
  • โทรศัพท์: 80%

ระยะห่าง

จากนั้นจึงเพิ่มแผ่นรองด้านบน

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

ชายแดน

เรากำลังเปลี่ยนการตั้งค่าเส้นขอบของโมดูลด้วย

• รูปแบบเส้นขอบของเค้าโครงตาราง: ด้านซ้าย
• ความกว้าง: 1px
• สี : ดำ #oooooo

CSS ที่กำหนดเอง

และเราจะเสร็จสิ้นการออกแบบด้วยโค้ด CSS สองบรรทัดสำหรับชื่อและเนื้อหาของโมดูล!

• ชื่อเรื่อง: padding-bottom: 50px;

padding-bottom: 50px;

• เนื้อหา: ช่องว่างภายใน-ด้านล่าง: 50px;

padding-bottom: 50px;

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

นั่นมันแรป!

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