วิธีสร้างเทมเพลตการ์ดสูตรอาหารด้วยตัวสร้างธีม Divi

บล็อกเกอร์อาหารและผู้สร้างสูตรอาหารรู้ดีว่าการดูสูตรอาหารที่พวกเขาเผยแพร่อย่างสม่ำเสมอมีความสำคัญเพียงใด วิธีแก้ปัญหาทั่วไปคือการใช้ปลั๊กอินการ์ดสูตรอาหาร แต่มาพร้อมกับข้อจำกัดด้านการออกแบบ ตอนนี้ ด้วย Divi Theme Builder คุณสามารถสร้างเทมเพลตการ์ดสูตรอาหารของคุณเองเพื่อใช้ทั่วทั้งไซต์และบล็อกของคุณ ด้วยความช่วยเหลือของปลั๊กอิน Advanced Custom Fields (ACF) การออกแบบการ์ดสูตรอาหารที่ไม่ซ้ำใครและนำกลับมาใช้ใหม่ได้ง่ายกว่าที่เคย

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

มาดูกันว่าการออกแบบจะเป็นอย่างไรในหน้าจอขนาดต่างๆ

ตัวอย่างเทมเพลตการ์ดสูตรอาหาร

มาดูกันว่าการออกแบบจะเป็นอย่างไรในหน้าจอขนาดต่างๆ

เดสก์ทอป

ยาเม็ด

มือถือ

1. ดาวน์โหลดและติดตั้งปลั๊กอินฟิลด์กำหนดเองขั้นสูง

ค้นหาและติดตั้ง

ค้นหาปลั๊กอิน ACF โดยค้นหา 'Advanced Custom Fields' ในแถบค้นหาของปลั๊กอิน ติดตั้งและเปิดใช้งาน

เพิ่มกลุ่มฟิลด์ใหม่

คลิกที่แท็บ ACF และเลือก 'เพิ่มใหม่' ตั้งชื่อกลุ่ม 'บัตรสูตรอาหาร' เพิ่มฟิลด์ที่กำหนดเองทีละรายการผ่านปุ่ม 'เพิ่มฟิลด์'

เพิ่มฟิลด์ที่กำหนดเอง

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

ชื่อสูตร

เริ่มต้นด้วยชื่อสูตร

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

ผู้เขียนสูตร

จากนั้นสร้างฟิลด์สำหรับผู้เขียน

• ป้ายกำกับ: ผู้เขียนสูตร
• ประเภทฟิลด์: Text
• จำเป็นหรือไม่: ใช่
• ข้อความตัวยึดตำแหน่ง: Author

เวลาเตรียมสูตร

ตามด้วยเวลาเตรียมการ

• ป้ายกำกับภาคสนาม: เวลาเตรียมสูตร
• ประเภทฟิลด์: Number
• จำเป็นหรือไม่: ใช่
• ข้อความตัวยึดตำแหน่ง: ##
• เติม: เวลาเตรียม:
• ต่อท้าย: นาที.

เสิร์ฟสูตร

จากนั้นให้เสิร์ฟ

• ฉลากภาคสนาม: สูตรอาหารที่ให้บริการ
• ประเภทฟิลด์: Number
• จำเป็นหรือไม่: ใช่
• ข้อความตัวยึดตำแหน่ง: ##
• นำหน้า: เสิร์ฟ:

เคล็ดลับรสชาติสูตร

เพิ่มฟิลด์เคล็ดลับรสชาติ

• ฉลากภาคสนาม: เคล็ดลับรสชาติสูตร
• ประเภทฟิลด์: Text
• จำเป็นหรือไม่: ใช่
• เติม: เคล็ดลับรสชาติ:
• จำนวนอักขระสูงสุด: 40

ภาพสูตร

ตอนนี้ เพิ่มฟิลด์รูปภาพ

• ป้ายกำกับ: อิมเมจสูตร
• ประเภทฟิลด์: Image
• จำเป็นหรือไม่: ใช่

ชื่อส่วนผสมสูตร

จากนั้นชื่อส่วนผสม

• ฉลากภาคสนาม: ชื่อส่วนผสมของสูตร
• ประเภทฟิลด์: Text
• คำแนะนำ: เพียงเขียนเหมือนกับข้อความตัวยึดตำแหน่ง
• จำเป็นหรือไม่: ใช่
• ข้อความตัวยึดตำแหน่ง: ส่วนผสม

รายการส่วนผสมสูตร

ตามด้วยรายการส่วนผสม

• ฉลากภาคสนาม: รายการส่วนผสมของสูตร
• ประเภทฟิลด์: Text Area
• คำแนะนำ: เพิ่มช่องว่างหลังทุกรายการ
• จำเป็นหรือไม่: ใช่
• แถว: 8
• ขึ้นบรรทัดใหม่: เพิ่มอัตโนมัติ <br>

ชื่อการเตรียมสูตร

ถัดจากท้ายสุดคือหัวข้อการจัดเตรียม

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

รายการเตรียมสูตรอาหาร

ในที่สุดรายการเตรียมการ

• ป้ายกำกับ: รายการเตรียมสูตรอาหาร
• ประเภทฟิลด์: Text Area
• คำแนะนำ: เพิ่มช่องว่างหลังทุกรายการ
• จำเป็นหรือไม่: ใช่
• แถว: 10
• ขึ้นบรรทัดใหม่: เพิ่มอัตโนมัติ <br>

เผยแพร่กลุ่มฟิลด์

เผยแพร่กลุ่มฟิลด์ หน้าต่างกลุ่มฟิลด์ของคุณควรมีลักษณะเหมือนภาพหน้าจอด้านล่าง

วิธีเข้าถึงเนื้อหาปลั๊กอิน ACF สำหรับเทมเพลตการ์ดสูตรใน Divi Builder

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

2. สร้างเทมเพลตการ์ดสูตรใหม่ด้วย Divi Builder

ขั้นตอนการสร้างธีม Divi

1. สร้างหมวดหมู่สูตรอาหาร

คุณต้องมีหมวดหมู่ที่ชื่อ 'สูตรอาหาร' เพื่อให้สามารถกำหนดเทมเพลตได้ เพิ่มลงในแท็บหมวดหมู่ผ่านแดชบอร์ด

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

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

3. เพิ่ม Global Body

คลิกที่ 'เพิ่มเนื้อหาส่วนกลาง' และกำหนดเทมเพลตให้กับโพสต์ในหมวดหมู่เฉพาะ > สูตรอาหาร จากนั้นคลิกที่ปุ่ม 'สร้างเทมเพลต'

4. สร้างร่างกายที่กำหนดเอง

คลิกที่ 'เพิ่มเนื้อหาส่วนกลาง' และเลือก 'เพิ่มเนื้อหาที่กำหนดเอง'

3. สร้างการออกแบบการ์ดสูตรอาหารใหม่โดยใช้เนื้อหาแบบไดนามิก

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

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

พื้นหลัง

ในการตั้งค่าส่วน ให้เพิ่มสีพื้นหลัง

• สีพื้นหลัง: สีเทาอ่อน #ededed

ขนาด

นอกจากนี้ ปรับขนาดในแท็บการออกแบบ

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มแถวที่ 1

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

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

ขนาด

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

• ความกว้างสูงสุด: 90%

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

พื้นหลัง

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

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

ชายแดน

จากนั้นปรับเปลี่ยนสไตล์เส้นขอบ

• มุมโค้งมน: 1vw ทั้งสี่มุม
• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้าง: 5px
• สี: Very Dark Grey #333333

เพิ่มโมดูลข้อความที่มีเนื้อหาแบบไดนามิก

เนื้อหา

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

• เนื้อหา: ชื่อสูตร
• การตั้งค่าร่างกาย:
  • ก่อน: <H1>
  • หลัง:</H1>

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

จากนั้นกำหนดรูปแบบการตั้งค่าข้อความ H1 ตามลำดับ:

• ระดับหัวเรื่อง: H1
• แบบอักษร: Orienta
• น้ำหนัก: หนา
• การจัดตำแหน่ง: ศูนย์
• สี: Very Dark Grey #3d3d3d
• ขนาด:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 5vw
• ระยะห่างระหว่างตัวอักษร: 3px
• ความสูงของสาย: 1.5em

ระยะห่าง

แก้ไขค่าระยะห่างด้วย

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

เพิ่มโมดูลข้อความที่ 2 พร้อมเนื้อหาแบบไดนามิก

เนื้อหา

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

• ร่างกาย: ผู้แต่งสูตร

ข้อความ

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

• แบบอักษร: เข้ารหัส Sans
• สี: Very Dark Grey #3d3d3d
• ขนาด:
  • เดสก์ท็อป: 1.4vw
  • แท็บเล็ต: 2.4vw
  • โทรศัพท์: 3vw
• การจัดตำแหน่ง: ศูนย์

ระยะห่าง

หลังจากนั้นให้ปรับระยะห่าง

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

เพิ่มแถวที่ 2

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

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

ขนาด

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

• ความกว้างของรางน้ำ: 2
• ความกว้าง: 90%
• ความกว้างสูงสุด: 100%
• การจัดแนวแถว: ซ้าย

ระยะห่าง

จากนั้นให้เว้นวรรค

• แพ็ดดิ้งบน + ล่าง: 0.5vw
• ช่องว่างภายในด้านซ้าย: 10vw

ทัศนวิสัย

สุดท้าย ในแท็บขั้นสูง ให้ปรับการมองเห็น

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

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

ชายแดน

จัดรูปแบบทั้งสามคอลัมน์ในลักษณะเดียวกัน ขั้นแรก ไปที่การตั้งค่าเส้นขอบและทำการเปลี่ยนแปลงบางอย่าง ทำซ้ำทั้งสามคอลัมน์

• มุมโค้งมน: 1vw ทั้งสี่มุม
• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้าง: 5px
• สี: Very Dark Grey #333333

แปลง

เพื่อให้การออกแบบมีผลโฮเวอร์ ให้ปรับการตั้งค่าการแปลงดังนี้ ทำซ้ำทั้งสามคอลัมน์

• เปลี่ยนขนาดเมื่อโฮเวอร์: 105% x 105%

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

เนื้อหา

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

พื้นหลัง

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

• สีพื้นหลัง: สีเขียวมะนาว #b1e88d

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

จัดรูปแบบการตั้งค่าข้อความ H5 ต่อไป

• ระดับหัวเรื่อง: H5
• แบบอักษร H5: Orienta
• H5 สี: เทาเข้มมาก #3d3d3d
• ขนาด H5:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.3vw
  • โทรศัพท์: 3.3vw
• การจัดตำแหน่ง: ศูนย์

ระยะห่าง

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

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

โมดูลข้อความซ้ำจากคอลัมน์ 1 สองครั้งแล้วย้ายไปยังคอลัมน์ 2 และ 3

ในมุมมองโครงร่าง ให้ทำซ้ำโมดูลข้อความในคอลัมน์แรก จากนั้น ย้ายรายการที่ซ้ำกันไปที่คอลัมน์ 2 และ 3

เพิ่มเนื้อหาแบบไดนามิกไปยังโมดูลข้อความในคอลัมน์ 1

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

• ร่างกาย: เวลาเตรียมสูตรอาหาร
• การตั้งค่าร่างกาย:
  • ก่อน: <H5>เวลาเตรียม:
  • หลัง: ขั้นต่ำ</H5>

เพิ่มเนื้อหาแบบไดนามิกไปยังโมดูลข้อความในคอลัมน์2

เพิ่มเนื้อหาแบบไดนามิกสำหรับการเสิร์ฟสูตรอาหารและปรับการตั้งค่า

• ร่างกาย: เสิร์ฟสูตรอาหาร
• การตั้งค่าร่างกาย:
  • ก่อน: <H5>จำนวนเสิร์ฟ:
  • หลัง: </H5>

เพิ่มเนื้อหาแบบไดนามิกไปยังโมดูลข้อความในคอลัมน์ 3

เพิ่มเนื้อหาแบบไดนามิกสำหรับเคล็ดลับรสชาติและปรับการตั้งค่า

• ร่างกาย: เคล็ดลับรสชาติสูตร
• การตั้งค่าร่างกาย:
  • ก่อน: <H5>Flavor Tip:
  • หลัง: </H5>

เพิ่มแถวที่ 3

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

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

ขนาด

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

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

ระยะห่าง

นอกจากนี้ ให้ลบระยะขอบบนเริ่มต้นออกด้วย

• มาร์จิ้นสูงสุด: 0vw

ทัศนวิสัย

สุดท้าย ปรับการมองเห็นในแท็บขั้นสูง

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

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

ชายแดน

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

• มุมโค้งมน: 1vw ทั้งสี่มุม
• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้าง: 5px
• สี: Very Dark Grey #333333

แปลง

ดำเนินการต่อโดยเพิ่มการแปลงแบบโฮเวอร์ในแท็บการออกแบบ ทำซ้ำสำหรับคอลัมน์ 2 และ 3

• เปลี่ยนขนาดเมื่อโฮเวอร์: 105% x 105%

เพิ่มโมดูลรูปภาพที่มีเนื้อหาไดนามิกในคอลัมน์ 1

เนื้อหา

เพิ่มโมดูลรูปภาพที่มีเนื้อหาแบบไดนามิกสำหรับรูปภาพสูตร

• ภาพ: ภาพสูตร

เพิ่มโมดูลข้อความที่มีเนื้อหาไดนามิกในคอลัมน์ 2

เนื้อหา

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

• เนื้อหาข้อความ: ชื่อส่วนผสมของสูตร
• การตั้งค่าร่างกาย:
  • ก่อน: <H3>
  • หลัง: </H3>

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

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

• ระดับหัวเรื่อง: H3
• H3Font: Orienta
• H3 สี: เทาเข้มมาก #3d3d3d
• ขนาด H3:
  • เดสก์ท็อป: 1.6vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 5.5vw
• การจัดตำแหน่ง: ศูนย์

ระยะห่าง

ทำโมดูลให้สมบูรณ์โดยการปรับระยะห่าง

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

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2

เส้น

เพิ่มโมดูลตัวแบ่งและจัดรูปแบบดังนี้

• สี: Lime Green #b1e88d

ขนาด

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

• น้ำหนัก: 5px
• ความกว้าง: 40%
• การจัดตำแหน่ง: ซ้าย

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 0vw

เพิ่มโมดูลข้อความที่มีเนื้อหาไดนามิกในคอลัมน์ 2

เนื้อหา

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

• เนื้อหาข้อความ: รายการส่วนผสมของสูตร
• การตั้งค่าร่างกาย: เปิดใช้งาน Raw HTML

ข้อความ

จากนั้นจัดรูปแบบข้อความดังนี้

• แบบอักษร: เข้ารหัส Sans
• สี: Very Dark Grey #333333
• ขนาด:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ระยะห่าง

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

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

ทำซ้ำโมดูลทั้งหมดในคอลัมน์ 2 และย้ายไปที่คอลัมน์ 3

ในมุมมองโครงร่าง ทำซ้ำโมดูลทั้งหมดในคอลัมน์ที่สอง ย้ายโมดูลที่ซ้ำกันไปยังคอลัมน์ที่สามในลำดับเดียวกัน

เพิ่มเนื้อหาแบบไดนามิกในโมดูลข้อความที่ 1 ในคอลัมน์ 3

เพิ่มเนื้อหาแบบไดนามิกสำหรับชื่อการจัดเตรียม

• เนื้อหา: ชื่อการเตรียมสูตร

เพิ่มเนื้อหาแบบไดนามิกในโมดูลข้อความที่ 2 ในคอลัมน์ 3

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

• ร่างกาย: รายการเตรียมสูตรอาหาร

เพิ่มแถวที่ 4

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

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

ขนาด

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

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

ระยะห่าง

• ช่องว่างภายในซ้าย + ขวา: 0vw

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

พื้นหลัง

จัดรูปแบบคอลัมน์ให้ตรงกับการ์ดสูตรอาหารด้านบน ขั้นแรก เพิ่มพื้นหลัง

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

ระยะห่าง

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

• ช่องว่างภายในด้านซ้าย: 0vw

ชายแดน

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

• มุมโค้งมน: 1vw ทั้งสี่มุม
• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้าง: 5px
• สี: Very Dark Grey #333333

เว้นคอลัมน์ 2 ว่างไว้

เพิ่มโมดูลเนื้อหาโพสต์ในคอลัมน์ 1

ข้อความ

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

• แบบอักษร: เข้ารหัส Sans
• สี: Very Dark Grey #333333
• ขนาด:
  • เดสก์ท็อป: 0.9vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ความสูงของสาย: 2em

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

• แบบอักษร: Orienta
• สี: Very Dark Grey #333333
• ขนาด:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 5vw
  • โทรศัพท์: 6vw

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

• แบบอักษร: Orienta
• สี: Very Dark Grey #333333
• ขนาด:
  • เดสก์ท็อป: 1.8vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 5.5vw

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

• แบบอักษร: Orienta
• สี: Very Dark Grey #333333
• ขนาด:
  • เดสก์ท็อป: 1.6vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 5vw

ระยะห่าง

เพื่อให้เข้ากับสไตล์ของการ์ดสูตรอาหาร ให้ปรับค่าการเว้นวรรค

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

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

4. แก้ไข / สร้างโพสต์โดยใช้การตั้งค่าปลั๊กอิน ACF และเทมเพลตการ์ดสูตร

ป้อนข้อมูลฟิลด์กำหนดเอง

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

ชื่อสูตร:

• ซุปเปอร์กรีนวีแกนอะโวคาโดโทสต์

ผู้เขียนสูตร:

• Magdalena Swifter – www.veganchef.com

เวลาเตรียมสูตร:

• 15

เสิร์ฟสูตร:

• 3

เคล็ดลับรสชาติสูตร:

• ใช้เกล็ดเกลือทะเลและน้ำมันบริสุทธิ์พิเศษ

ภาพสูตร:

• อะโวคาโดโทสต์อิมเมจ

ชื่อส่วนผสมสูตร:

• วัตถุดิบ

รายการส่วนผสมสูตร:

• ขนมปังโฮลวีต 3 แผ่น
• อะโวคาโดสุก 1 ลูก
• 100 กรัม. ถั่วปากอ้าปรุงสุก
• 10g. ถั่วงอกเขียว
• ต้นหอมสับ 1 ต้น
• 30ก. เฟต้าชีสขูดฝอย
• 1 มะนาวผ่าครึ่ง
• น้ำมันมะกอก
• โรยเกลือทะเล

การเตรียมตำรับอาหาร ชื่อ:

• การตระเตรียม

รายการเตรียมสูตรอาหาร:

• 1.ปิ้งขนมปังแผ่นตามชอบ
• 2. เปิดอะโวคาโด เอาเนื้อออก บดด้วยส้อม
• 3. บีบน้ำมะนาวใส่อะโวคาโด ปรุงรสด้วยเกลือ
• 4. ทาอะโวคาโดบดให้ทั่วขนมปัง
• 5. โรยถั่วฝักยาว ถั่วงอก และต้นหอมสับ
• 6. ปรุงรสด้วยเกลือ
• 7. ใส่เฟต้าชีสขูดฝอย
• 8. ปิดท้ายด้วยน้ำมันมะกอก

ตั้งชื่อกระทู้

ชื่อ

อย่าลืมเพิ่มชื่อในโพสต์ของคุณ

• สูตรขนมปังอะโวคาโด

เพิ่มเนื้อหา เลือกหมวดหมู่ และเพิ่มรูปภาพเด่น

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

ตัวอย่างเทมเพลตการ์ดสูตรอาหาร

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

เดสก์ทอป

ยาเม็ด

มือถือ

มันเป็นแรป!

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

1. ติดตั้งปลั๊กอิน ACF
2. ตั้งค่ากลุ่มฟิลด์การ์ดสูตร
3. เพิ่มฟิลด์ที่กำหนดเอง
4. สร้างเทมเพลตใหม่และกำหนดให้กับโพสต์ในบล็อกภายใต้หมวดหมู่ "สูตรอาหาร"
5. ใช้เนื้อหาแบบไดนามิกจากฟิลด์ ACF ในโมดูล
6. สร้างหรือแก้ไขโพสต์บล็อกโดยกรอกข้อมูลในฟิลด์
7. เพิ่มเนื้อหาโพสต์บล็อก

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