วิธีสร้างเทมเพลตหน้าผลิตภัณฑ์ที่สนุกสำหรับผลิตภัณฑ์สำหรับเด็กด้วย Divi

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

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

ดูตัวอย่าง

ก่อนที่เราจะเริ่มสร้างการออกแบบใหม่ มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กันก่อน

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตผลิตภัณฑ์ Fun Kids ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

1. เทมเพลตการออกแบบผลิตภัณฑ์สำหรับเด็ก

ลบพื้นหลังออกจากรูปภาพสินค้า

สิ่งแรกที่เราจะทำก่อนเริ่มออกแบบผลิตภัณฑ์สำหรับเด็กคือการเตรียมภาพ ลบพื้นหลังออกจากรูปภาพผลิตภัณฑ์ คุณสามารถทำได้ด้วย Adobe Photoshop, Adobe Illustrator หรือ remove.bg เว้นที่ว่างรอบๆ ผลิตภัณฑ์เพื่อให้เข้ากับดีไซน์ได้ดี ขนาดที่ดีที่สุดสำหรับภาพสุดท้ายคือ 600X400 พิกเซล

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

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

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

2. สร้าง/เพิ่มผลิตภัณฑ์ Woocommerce ใหม่

ข้อมูลผลิตภัณฑ์

เมื่อเรามีภาพผลิตภัณฑ์และการออกแบบพื้นหลังแล้ว ก็ถึงเวลาสร้างผลิตภัณฑ์สำหรับเด็ก หากต้องการสร้างการออกแบบที่เหมือนกับของเรา ให้แทรกข้อมูลต่อไปนี้

• ชื่อเรื่อง: Wood Letter Blocks
• คำอธิบายแบบยาว: บล็อกไม้ธรรมชาติเหล่านี้เหมาะสำหรับเด็กๆ ในการเรียนรู้ตัวอักษรและตัวเลขด้วยวิธีที่สนุกและสร้างสรรค์ ขอบโค้งมนสำหรับนิ้วก้อยและสีไม่เป็นพิษ
• ราคาขายเก่า: 12,99
• ใหม่ ราคาขาย: 7,99
• ภาพเด่น: ตัดภาพบล็อกไม้ ขนาดที่ต้องการ: 600 x 400 px
• คุณสมบัติ: ดูด้านล่าง

ในแท็บแอตทริบิวต์ ป้อนค่าสำหรับโมดูลข้อมูลเพิ่มเติม

• วัสดุ: ไม้สนธรรมชาติ
• สี: สีขาวปลอดสารพิษ
• สีเพ้นท์: ขาว, น้ำเงิน, เขียว, ฟูเชีย

3. สร้างเทมเพลตใหม่ใน Theme Builder

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

ตอนนี้ได้เวลาไปที่เครื่องมือสร้างธีม Divi แล้ว เราจะสร้างการออกแบบที่นั่น เพิ่มเทมเพลตใหม่

เริ่มสร้างตัวถังแบบกำหนดเองสำหรับผลิตภัณฑ์ทั้งหมด

ใช้เทมเพลตนี้กับผลิตภัณฑ์ทั้งหมดและเริ่มสร้างร่างกาย

เคล็ดลับสำหรับตัวสร้างธีม:

เมื่อสร้างการออกแบบผลิตภัณฑ์ภายในตัวสร้างธีม ให้เปิดหน้าผลิตภัณฑ์ในหน้าต่างอื่นเสมอเพื่อตรวจสอบการเปลี่ยนแปลง

4. สร้างสรรค์การออกแบบผลิตภัณฑ์สำหรับเด็ก

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

พื้นหลัง

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

• สีพื้นหลัง : Palest Pink #f9f2f2

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

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

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

ขนาด

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

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

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

พื้นหลัง

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

• ภาพพื้นหลัง

ระยะห่าง

จากนั้นปรับระยะห่างให้เหมาะสม

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

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

ระยะห่าง

ย้ายไปที่คอลัมน์ 2 และปรับค่าระยะห่างดังนี้

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

เพิ่ม Woo Image Module ไปที่คอลัมน์ 1

เนื้อหา

ตอนนี้ได้เวลาเพิ่มโมดูลแล้ว ขั้นแรก ในคอลัมน์ 1 เพิ่มโมดูลภาพ woo และเลือกผลิตภัณฑ์นี้ภายใต้เนื้อหา

• สินค้า: สินค้านี้

องค์ประกอบ

จากนั้นเลือกองค์ประกอบที่จะแสดงในการออกแบบ

• ภาพเด่น: ใช่
• แกลลอรี่: ไม่
• ป้ายขาย: ใช่

ข้อความป้ายขาย

ในแท็บออกแบบ ปรับค่าสำหรับป้ายลดราคาดังนี้

• ป้ายสี: โปร่งใส
• แบบอักษร: Nunito
• น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความ: ชมพู #f24881
• ขนาดข้อความ:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต: 12vw
  • โทรศัพท์: 10vw

ขนาด

จากนั้นปรับระยะห่างเพื่อให้พอดีกันมากขึ้น

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

เพิ่ม Woo Title Module ลงในคอลัมน์ 2

เนื้อหา

ในคอลัมน์ที่สอง เพิ่มโมดูลชื่อ woo และเลือกผลิตภัณฑ์นี้ในแท็บเนื้อหา

• สินค้า: สินค้านี้

พื้นหลัง

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

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

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

จากนั้น จัดรูปแบบข้อความชื่อที่ระดับ H1

• ระดับหัวเรื่อง: H1
• แบบอักษร: Nunito
• น้ำหนักแบบอักษร: Ultra Bold
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: Greenish Dark Grey #314942
• ขนาดข้อความ:
  • เดสก์ท็อป: 2.6vw
  • แท็บเล็ตและโทรศัพท์: 6.4vw

ระยะห่าง

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

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

ชายแดน

สุดท้าย ปรับเส้นขอบสำหรับทั้งขนาดเดสก์ท็อปและขนาดตอบสนอง

• มุมโค้งมน:
  • เดสก์ท็อป: 1vw ทั้งสี่มุม
  • แท็บเล็ตและโทรศัพท์: 3vw ทั้งสี่มุม

เพิ่ม Woo Description Module ลงในคอลัมน์ 2

เนื้อหา

ใต้ชื่อผลิตภัณฑ์ ให้เพิ่มโมดูลคำอธิบาย woo เลือกประเภทคำอธิบายและผลิตภัณฑ์นี้ในแท็บเนื้อหา

• สินค้า: สินค้านี้
• ประเภทคำอธิบาย: คำอธิบาย

พื้นหลัง

จากนั้นกำหนดสีพื้นหลังให้กับโมดูล

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

ข้อความ

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

• แบบอักษร: Nunito
• สี: Greenish Dark Grey #314942
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3vw

ระยะห่าง

จากนั้นปรับระยะห่างสำหรับโมดูล

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

ชายแดน

สุดท้ายเพิ่มมุมโค้งมน

• มุมโค้งมน:
  • เดสก์ท็อป: 1vw ทั้งสี่มุม
  • แท็บเล็ตและโทรศัพท์: 3vw ทั้งสี่มุม

เพิ่มโมดูลข้อมูลเพิ่มเติม Woo ให้กับคอลัมน์ 2

เนื้อหา

ด้านล่างโมดูลคำอธิบาย ให้เพิ่มโมดูลข้อมูลเพิ่มเติม woo เลือกผลิตภัณฑ์นี้ในแท็บเนื้อหา

• สินค้า: สินค้านี้

พื้นหลัง

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

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

ข้อความ

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

• แบบอักษร: Nunito
• สไตล์: ตัวเอียง
• สี: Greenish Dark Grey #314942
• ขนาด:
  • เดสก์ท็อป: 0.8vw
  • แท็บเล็ต: 1.5vw
  • โทรศัพท์: 2vw

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

ประการที่สอง จัดรูปแบบข้อความชื่อ

• แบบอักษร: Nunito
• น้ำหนัก: หนาเป็นพิเศษ
• สี: ชมพู #f24881
• ขนาด:
  • เดสก์ท็อป: 1.7vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 3.5vw
• ความสูงของสาย: 1em

ข้อความแอตทริบิวต์

ประการที่สาม จัดรูปแบบข้อความแอตทริบิวต์

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

ระยะห่าง

จากนั้นปรับระยะห่างดังนี้

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

ชายแดน

สุดท้ายเพิ่มมุมโค้งมน

• มุมโค้งมน:
  • เดสก์ท็อป: 1vw ทั้งสี่มุม
  • แท็บเล็ตและโทรศัพท์: 3vw ทั้งสี่มุม

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

เนื้อหา

เพิ่มโมดูลราคา woo และเลือกผลิตภัณฑ์นี้ในแท็บเนื้อหา

• สินค้า: สินค้านี้

พื้นหลัง

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

• สีพื้นหลัง: ชมพู #f24881

ขายข้อความราคาเก่า

ไปที่แท็บการออกแบบและกำหนดรูปแบบการขายราคาเดิม

* เมื่อคุณเพิ่มราคาลดทั้งเก่าและใหม่ให้กับผลิตภัณฑ์ โมดูลราคา woo จะไม่แสดงราคาขายทั้งสองแบบในตัวสร้างธีม ตรวจสอบหน้าผลิตภัณฑ์จริงเพื่อดูว่าการออกแบบขั้นสุดท้ายมีลักษณะอย่างไร

• แบบอักษร: Nunito
• สี: ขาว #ffffff
• ขนาด:
  • เดสก์ท็อป: 1.5vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3vvw

ข้อความลดราคาใหม่

ต่อด้วยการแต่งราคาใหม่

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

ระยะห่าง

จากนั้น ปรับระยะห่างของโมดูล

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

ชายแดน

สุดท้ายเพิ่มมุมโค้งมน

• มุมโค้งมน:
  • เดสก์ท็อป: 1vw ทั้งสี่มุม
  • แท็บเล็ตและโทรศัพท์: 3vw ทั้งสี่มุม

การออกแบบขั้นสุดท้าย

นี่คือลักษณะการออกแบบของผลิตภัณฑ์จริงเทียบกับสิ่งที่ดูเหมือนในตัวสร้างธีม

เพิ่ม Woo Add to Cart โมดูลไปที่คอลัมน์ 2

เนื้อหา

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

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

• สินค้า: สินค้านี้

องค์ประกอบ

ต่อไป เลือกองค์ประกอบที่จะแสดงในโมดูล

• ช่องปริมาณ: ปิด
• หุ้น: ปิด

พื้นหลัง

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

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

ปุ่ม

ตอนนี้ก็ถึงเวลาที่จะสไตล์ปุ่ม เพิ่มค่าดังนี้

• ขนาดข้อความ:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 5vw
• สีอักษร: ชมพู #f24881
• สีพื้นหลัง: ขาว #ffffff
• ระยะห่างระหว่างตัวอักษร: 1px
• แบบอักษร: Nunito
• น้ำหนัก: หนัก
• ระยะขอบบนและล่าง: -0.3vw

ระยะห่าง

จากนั้น ปรับระยะห่างของโมดูล

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อปและแท็บเล็ต: -0.5vw
  • แท็บเล็ต: -3vw
• ช่องว่างด้านบนและด้านล่าง: 0vw
• ระยะขอบซ้ายและขวา: 0vw

ชายแดน

สุดท้ายเพิ่มขอบโค้งมน

• มุมโค้งมน:
  • เดสก์ท็อป: 1vw ทั้งสี่มุม
  • แท็บเล็ตและโทรศัพท์: 3vw ทั้งสี่มุม

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

เป็นบทสรุปในหน้าผลิตภัณฑ์สำหรับเด็ก!

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