วิธีสร้างส่วนข้อมูลผลิตภัณฑ์แยกภาพที่สง่างามด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงภาพแยกฟรีฟรี

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

สร้างเอฟเฟกต์ภาพแยกด้วย Photoshop และ Illustrator

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

ขั้นตอนที่ 1: เลือกรูปภาพ

เลือกภาพ HD สองภาพของผลิตภัณฑ์ของคุณ

ขั้นตอนที่ 2: ลบพื้นหลัง

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

ขั้นตอนที่ 3: เปิดโครงการใหม่บน Illustrator

เปิดโปรเจ็กต์ใหม่ใน Illustrator กว้าง 1920px สูง 1200px

ขั้นตอนที่ 4: เพิ่มเส้นบอกแนวแนวตั้ง

เพิ่มเส้นบอกแนวแนวตั้งตรงกลางผืนผ้าใบที่ว่างเปล่า ตรวจสอบให้แน่ใจว่าอยู่ตรงกลาง

ขั้นตอนที่ 5: นำเข้าหรือวางรูปภาพที่ตัดออก

วางรูปภาพที่ตัดออกทั้งสองบนผืนผ้าใบ

ขั้นตอนที่ 6: เริ่มการแสดงภาพ Split

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

ขั้นตอนที่ 7: จบเอฟเฟกต์

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

ขั้นตอนที่ 8: ครอบตัดครึ่งหนึ่งและบันทึก

เมื่อออกแบบเสร็จแล้ว ให้กำจัดส่วนที่เกินออกไป ตรวจสอบอีกครั้งว่าขอบตรงของแต่ละภาพสัมผัสกับเส้นบอกแนวตรงกลาง สร้างอาร์ตบอร์ดใหม่ 2 แผ่นแล้วปรับขนาดให้พอดีกับแต่ละด้าน โดยแยกจากกันที่ไกด์ตรงกลาง ส่งออกสำหรับเว็บ ครั้งละหนึ่งอาร์ตบอร์ดและบันทึกเป็น .png ตอนนี้ คุณมีรูปภาพสองรูปที่ต่างกัน ทั้งกว้าง 960px และสูง 1200px

ขั้นตอนที่ 9: ปรับขนาดสำหรับแท็บเล็ตและมือถือ

ปรับขนาดรูปภาพทั้งสองให้กว้าง 960px สูง 1200px ตรวจสอบให้แน่ใจว่าคุณครอบตัดพื้นหลังโปร่งใสเท่านั้น อย่าแตะต้องรูปภาพ ฉันทำใน Photoshop โดยเปลี่ยนขนาดผ้าใบด้วยจุดยึดที่ด้านข้างของรูปภาพ

มาเริ่มสร้างใหม่กันเถอะ!

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

พื้นหลัง

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

• พื้นหลัง: ไล่โทนสี
• สีที่หนึ่ง: สีขาวนวล #f7f7f7
• สีที่สอง: สีเขียวสด #b7e778
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้นและสิ้นสุด: 50%

ระยะห่าง

เปลี่ยนการตั้งค่าการเว้นวรรคของส่วนถัดไป

• ช่องว่างภายในด้านบน: 5vw
• แผ่นรองด้านล่าง: 12vw

ทัศนวิสัย

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

• ล้นแนวตั้งและแนวนอน: ซ่อน

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

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

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

ขนาด

ปรับการตั้งค่าขนาดของแถว

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

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

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

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

แปลง

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

• แปลงแปล: -2vw แกน y

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

แปลง

ทำเช่นเดียวกันสำหรับคอลัมน์ 2

• แปลงแปล: 2vw แกน x

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

เพิ่มเนื้อหา

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

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

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

• ระดับข้อความหัวเรื่อง: H2
• แบบอักษร H2: Corben
• การจัดตำแหน่ง H2:
  • เดสก์ท็อป: ซ้าย
  • แท็บเล็ต + โทรศัพท์: ศูนย์
• สีข้อความ H2: สีเทาเข้มมาก #3a3a3a
• ขนาดข้อความ H2:
  • เดสก์ท็อป: 7vw
  • แท็บเล็ต + โทรศัพท์:16vw

ระยะห่าง

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

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

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

เพิ่มเนื้อหา

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

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

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

• ระดับข้อความหัวเรื่อง: H2
• แบบอักษร H2: Corben
• การจัดตำแหน่ง H2:
  • เดสก์ท็อป: ซ้าย
  • แท็บเล็ต + โทรศัพท์: ใช่
• สีข้อความ H2: สีเทาเข้มมาก #3a3a3a
• ขนาดข้อความ H2:
  • เดสก์ท็อป: 7vw
  • แท็บเล็ต + โทรศัพท์: 14vw

ระยะห่าง

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

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

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

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

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

ขนาด

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

• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -15vw
  • แท็บเล็ต: -36vw
  • โทรศัพท์: -40vw
• บุนวมด้านบนและด้านล่าง:
  • เดสก์ท็อป: 0vw
  • แท็บเล็ต: 9vw
  • โทรศัพท์: 12vw

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

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

• องค์ประกอบหลัก: จอแสดงผล: ดิ้น;

display: flex;

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

ใส่รูปภาพ

เพิ่มรูปภาพครึ่งซ้ายลงในคอลัมน์ 1

• ภาพ:
  • เดสก์ท็อป: ภาพกว้าง 960px
  • แท็บเล็ต + โทรศัพท์: ภาพกว้าง 600px

ขนาด

ทำให้โมดูลรูปภาพเต็มความกว้าง

• บังคับเต็มความกว้าง: ใช่

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

ใส่รูปภาพ

เพิ่มรูปภาพครึ่งขวาในคอลัมน์ 2

• ภาพ:
  • เดสก์ท็อป: ภาพกว้าง 960px
  • แท็บเล็ต + โทรศัพท์: ภาพกว้าง 600px

ขนาด

ทำให้โมดูลรูปภาพนี้เป็นแบบเต็มความกว้างด้วย

• บังคับเต็มความกว้าง: ใช่

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

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

ต่อแถวหน้า! เลือกโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

ปรับขนาดของแถวดังนี้:

• ความกว้างของรางน้ำ: 4
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -38vw
  • แท็บเล็ต + โทรศัพท์: -14vw

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

ระยะห่าง

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

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

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

ระยะห่าง

จากนั้นปรับการตั้งค่าระยะห่างคอลัมน์ 2

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

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

เพิ่มเนื้อหา

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

พื้นหลัง

เปลี่ยนสีพื้นหลัง

• สีพื้นหลัง
• สี: Very Dark Grey #333333

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

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

• ระดับข้อความหัวเรื่อง: H3
• แบบอักษร H3: Corben
• การจัดตำแหน่ง H3: ศูนย์
• สีแบบอักษร H3: สีขาวนวล #f7f7f7
• ขนาดตัวอักษร H3:
  • เดสก์ท็อป: 2.2vw
  • แท็บเล็ต: 6.4vw
  • โทรศัพท์: 7vw
• ระยะห่างระหว่างตัวอักษร H3: 3 px

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• แผ่นรองด้านบน:
  • เดสก์ท็อป + แท็บเล็ต: 0.2vw
  • โทรศัพท์: 1vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 0.5vw
  • แท็บเล็ต: 1.2vw
  • โทรศัพท์: 1vw

ชายแดน

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มมุมโค้งมน

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

โมดูลข้อความซ้ำแล้วลากไปที่คอลัมน์ 2

ตอนนี้ ทำซ้ำโมดูลข้อความแล้วลากไปที่คอลัมน์ 2

เปลี่ยนเนื้อหา

แน่นอน คุณจะต้องเปลี่ยนเนื้อหาในโมดูลข้อความที่ซ้ำกัน

เพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1

เพิ่มเนื้อหา

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

• ชื่อ
• ปุ่ม
• ร่างกาย

เพิ่มลิงค์

ดำเนินการต่อโดยเพิ่มลิงก์ไปยังปุ่มของ CTA

พื้นหลัง

และเพิ่มสีพื้นหลังให้กับแท็บเล็ตและมือถือ

• สีพื้นหลัง:
  • แท็บเล็ต + โทรศัพท์: สีขาวนวล #f7f7f7

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

ในแท็บออกแบบ กำหนดสไตล์การตั้งค่าข้อความ H4

• ระดับข้อความหัวเรื่อง: H4
• แบบอักษร H4: เปิด Sans
• H4 สี: เทาเข้มมาก #333333
• ขนาดข้อความ H4:
  • เดสก์ท็อป: 1.4vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 7vw
• ระยะห่างระหว่างตัวอักษร H3: 2px
• ความสูงของสาย H3: 1.5em

เนื้อความ

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

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

ปุ่ม

สไตล์ปุ่มเกินไป

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.8vw
• ปุ่ม Font Color: Very Dark Grey #333333
• สีพื้นหลังของปุ่ม:
  • แท็บเล็ต + มือถือ: สีเขียวสด #b7e778
• ความกว้างของขอบปุ่ม:
  • เดสก์ท็อป: 1px
• สีเส้นขอบของปุ่ม:
  • เดสก์ท็อป: Very Dark Grey #333333
• รัศมีเส้นขอบของปุ่ม: 1vw

ระยะห่าง

และเพิ่มค่าการเว้นวรรคแบบกำหนดเอง

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

ชายแดน

สุดท้ายแต่ไม่ท้ายสุด กำหนดรูปแบบเส้นขอบตามขนาดหน้าจอต่างๆ

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

โมดูลคำกระตุ้นการตัดสินใจที่ซ้ำกันและลากไปที่คอลัมน์ 2

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

เปลี่ยนเนื้อหา

เพื่อให้การออกแบบสมบูรณ์ ให้เปลี่ยนเนื้อหาในโมดูลการเรียกร้องให้ดำเนินการที่ซ้ำกัน เท่านี้ก็เสร็จเรียบร้อย!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

บทสรุป

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