วิธีสร้างแคตตาล็อกแฟชั่นแบบเลื่อนด้วย Divi

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

ผลลัพธ์

ผลลัพธ์ที่เราจะแสดงให้คุณเห็นถึงวิธีการสร้าง ทีละขั้นตอน มีลักษณะดังนี้บนเดสก์ท็อป:

และเช่นนี้บนโทรศัพท์และแท็บเล็ต:

วิธีสร้างแคตตาล็อกแฟชั่นแบบเลื่อนด้วย Divi

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

เพิ่มรูปร่างโปร่งใสให้กับรูปภาพด้วย Photoshop

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

เปิด Photoshop

เริ่มต้นด้วยการเปิด Photoshop บนคอมพิวเตอร์ของคุณ

เปิดภาพ

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

ดับเบิลคลิกที่รูปภาพและสร้างเลเยอร์

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

เพิ่มเลเยอร์อื่น

ดำเนินการต่อโดยเพิ่มเลเยอร์ว่างอีกชั้นหนึ่งไว้ด้านบน

เลือก Layer 1 & Polygonal Lasso Tool

เลือก Layer 1 และเริ่มใช้เครื่องมือ Polygonal Lasso Tool

สร้างรูปร่าง

ขณะที่เปิดใช้งาน Polygonal Lasso Tool ให้สร้างรูปร่างโปร่งใสภายในรูปภาพของคุณ

ทำให้เลเยอร์ 1 มองไม่เห็น & กด Delete ขณะที่เลือกเลเยอร์ 0

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

เลือก Rectangular Marquee Tool & Click Somewhere on Image

เมื่อคุณทำเสร็จแล้ว ให้เลือก Rectangular Marquee Tool แล้วคลิกที่ใดที่หนึ่งบนรูปภาพของคุณ

บันทึกรูปภาพเป็น PNG

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

การตั้งค่าแถบเมนูหลัก

การตั้งค่าแถบเมนูหลักที่เราต้องการสำหรับเลย์เอาต์ที่เรากำลังสร้างมีดังต่อไปนี้:

• ซ่อนภาพโลโก้: เปิดใช้งาน
• ความสูงของเมนู: 30
• ขนาดตัวอักษร: 15
• ระยะห่างระหว่างตัวอักษร: -1
• แบบอักษร: Lato
• รูปแบบตัวอักษร: ตัวหนา & ตัวพิมพ์ใหญ่
• สีข้อความ: #FFFFFF
• สีของลิงค์ที่ใช้งาน: #FFFFFF
• สีพื้นหลัง: rgba(255,255,255,0)
• สีพื้นหลังของเมนูแบบเลื่อนลง: rgba(255,255,255,0)

บทนำฉบับ

เมื่อคุณแก้ไขแถบเมนูหลักแล้ว คุณสามารถเพิ่มหน้าใหม่ ใช้ Divi Builder และสลับไปยัง Visual Builder

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

ภายในหน้านั้น ให้เริ่มต้นด้วยการเพิ่มส่วนมาตรฐาน

ส่วนสีพื้นหลัง

พื้นหลังของสีนั้นจะต้องเป็น '#d6d6d6'

แพ็ดดิ้งแบบกำหนดเอง

ไปที่แท็บออกแบบของส่วนนั้น ภายในหมวดหมู่ย่อย Spacing ให้เพิ่ม '24px' ลงในช่องว่างด้านบนและ 0px ที่ด้านล่าง

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

เมื่อเสร็จแล้ว คุณสามารถเพิ่มแถวหนึ่งคอลัมน์ในส่วนนั้นได้

ขนาด

ไปที่แท็บออกแบบและแก้ไขหมวดหมู่ย่อยการปรับขนาด:

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: 1

แพ็ดดิ้งแบบกำหนดเอง

เลื่อนลงและเพิ่ม '0px' ลงในช่องว่างบนสุดของแถว

โมดูลข้อความแรก

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

• แบบอักษรข้อความ: มาตรฐานเก่า TT
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• ขนาดตัวอักษรข้อความ: 72 (เดสก์ท็อป), 41 (แท็บเล็ต), 29 (โทรศัพท์)
• สีข้อความ: #000000
• ระยะห่างของตัวอักษรข้อความ: 11px
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

เปิดหมวดหมู่ย่อย Spacing และเพิ่ม '30px' ลงในช่องว่างด้านบนและด้านล่าง

โมดูลแบ่ง

ด้านล่างโมดูลข้อความ เพิ่มโมดูลตัวแบ่ง และเปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

ไปที่แท็บ Design แล้วเลือก '#FFFFFF' เป็นสีของตัวแบ่ง

ถัดไป เลือก 'ทึบ' เป็นสไตล์ตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่งภายในหมวดหมู่ย่อยของสไตล์

จากนั้น เปิดหมวดหมู่ย่อย Sizing และทำการตั้งค่าต่อไปนี้:

• น้ำหนักตัวแบ่ง: 10px
• ส่วนสูง: 23px
• ความกว้าง: 100%
  

โมดูลข้อความที่สอง

ด้านล่างโมดูลตัวแบ่ง เพิ่มโมดูลข้อความอื่น เลือกไอคอนใดก็ได้ที่คุณต้องการภายในผังอักขระ (Windows) หรือจานสีอักขระ (Mac) แล้ววางไว้ในแท็บเนื้อหา สำหรับตัวอย่างนี้ เราใช้สัญลักษณ์ต่อไปนี้: '↓' จากนั้นไปที่แท็บ ออกแบบ และทำการตั้งค่าต่อไปนี้:

• ขนาดตัวอักษรของข้อความ: 42px
• สีข้อความ: #000000
• การวางแนวข้อความ: ศูนย์

แคตตาล็อกแฟชั่นเดสก์ท็อป (ส่วนใหม่)

ตอนนี้ เพิ่มส่วนมาตรฐานอื่น ส่วนนี้จะประกอบด้วยสองแถวที่จะแสดงส่วนต่างๆ ของแค็ตตาล็อกบนเดสก์ท็อป

การตั้งค่ามาตรา

สีพื้นหลัง

ใช้ '#FFFFFF' เป็นสีพื้นหลังของส่วนนี้

แพ็ดดิ้งแบบกำหนดเอง

จากนั้นไปที่แท็บออกแบบและเพิ่ม '15px' ลงในช่องว่างด้านบน

แถวแรก

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

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

สีพื้นหลัง

เปิดการตั้งค่าแถวและเพิ่ม 'rgba(255,255,255,0.14)' เป็นสีพื้นหลัง

ภาพพื้นหลัง

เพิ่มรูปภาพที่คุณสร้างขึ้นในส่วน Photoshop ของโพสต์นี้และใช้ 'Hue' เป็นภาพพื้นหลังแบบผสมผสาน

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

โมดูลข้อความแรก

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

• แบบอักษรของข้อความ: Bitter
• ขนาดตัวอักษรของข้อความ: 63px
• สีข้อความ: #000000
• การวางแนวข้อความ: ศูนย์

โมดูลแบ่ง

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

ไปที่แท็บ Design และใช้ '#000000' เป็นสีตัวแบ่ง

ภายในหมวดหมู่ย่อยของสไตล์ ให้ใช้ 'ทึบ' เป็นสไตล์ตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่ง

เลื่อนลงมาที่แท็บเดียวกันและทำให้การตั้งค่าต่อไปนี้ใช้กับหมวดหมู่ย่อยการปรับขนาด:

• น้ำหนักตัวแบ่ง: 3px
• ส่วนสูง: 23px
• ความกว้าง: 57%
• การจัดตำแหน่งโมดูล: ซ้าย

สุดท้าย เพิ่มระยะขอบบนเป็น '30px' และระยะขอบล่างเป็น '50px'

โมดูลข้อความที่สอง

เมื่อเข้าที่แล้ว ให้เพิ่มโมดูลข้อความที่สองที่มีชื่อเรื่อง ก่อนอื่น ใช้ '#000000' เป็นสีพื้นหลังในแท็บเนื้อหา

จากนั้นไปที่แท็บ ออกแบบ และทำให้การตั้งค่าต่อไปนี้นำไปใช้กับหมวดหมู่ย่อยข้อความ:

• แบบอักษรของข้อความ: Bitter
• ขนาดตัวอักษรของข้อความ: 92px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย

เปิดหมวดหมู่ย่อย Border และใช้เส้นขอบต่อไปนี้:

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #000000
• ความกว้างของเส้นขอบ: 3px
• สไตล์เส้นขอบ: ของแข็ง

นอกจากนี้ ใช้ความกว้าง '77%' และการจัดตำแหน่งโมดูลด้านซ้าย

สุดท้าย เพิ่ม '15px' ที่ช่องว่างด้านบน ขวา ล่าง และซ้ายของโมดูลข้อความ

โมดูลข้อความที่สาม

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษรของข้อความ: 16px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย

เปิดหมวดหมู่ย่อยการปรับขนาด ใช้ '70%' สำหรับความกว้าง และเลือกการจัดตำแหน่งโมดูลด้านซ้าย

สุดท้าย เพิ่มระยะขอบบนเป็น '20px'

โมดูลข้อความที่ห้า

โมดูลข้อความที่ห้าทำหน้าที่เป็นปุ่มที่เรียบง่าย ภายในแท็บเนื้อหา ให้ใช้สัญลักษณ์ '→' + ข้อความและใส่ลิงก์ไว้ด้านหลัง

จากนั้นไปที่แท็บออกแบบ ใช้การตั้งค่าต่อไปนี้สำหรับหมวดหมู่ย่อยข้อความ:

• แบบอักษรของข้อความ: Bitter
• ขนาดตัวอักษรของข้อความ: 23px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย

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

สุดท้าย เพิ่มระยะขอบด้านบนของ '80px'

โมดูลข้อความที่หก

โมดูลที่หกและโมดูลสุดท้ายที่เราต้องการเกือบจะเหมือนกับโมดูลก่อนหน้า ใช้ข้อความ '→' + และใส่ลิงก์ด้านหลัง

การตั้งค่าสำหรับหมวดข้อความย่อยมีดังต่อไปนี้:

• แบบอักษรของข้อความ: Bitter
• ขนาดตัวอักษรของข้อความ: 23px
• สีข้อความ: #e02b20
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย

เปลี่ยนความกว้างเป็น '39%' และใช้การจัดตำแหน่งโมดูลที่เหมาะสมเช่นกัน

แถวที่สอง

สีพื้นหลัง

เปิดการตั้งค่าแถวและเพิ่ม 'rgba(255,255,255,0.14)' เป็นสีพื้นหลัง

ภาพพื้นหลัง

เพิ่มรูปภาพที่คุณสร้างขึ้นในส่วน Photoshop ของโพสต์นี้และใช้ 'Hue' เป็นภาพพื้นหลังแบบผสมผสาน

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

แถวที่สองที่คุณต้องเพิ่มในส่วนมาตรฐานนั้นตรงกันข้ามกับแถวก่อนหน้า

โมดูลโคลน

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

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

เปิดโมดูลข้อความแรกและเพิ่มระยะขอบบนเป็น '20px'

การปรับเปลี่ยนโมดูลแบ่ง

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

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

ตั้งค่าการวางแนวข้อความของโมดูลข้อความที่สองไปทางขวา

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

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

โมดูลข้อความที่สามจะต้องมีการวางแนวข้อความที่ถูกต้องด้วย

และการจัดตำแหน่งโมดูลที่เหมาะสมเช่นกัน

การปรับเปลี่ยนโมดูลข้อความที่ห้า

สิ่งเดียวที่คุณต้องทำสำหรับโมดูลข้อความที่ห้าคือเปลี่ยนความกว้างเป็น '82%'

การปรับเปลี่ยนโมดูลข้อความที่หก

มีค่าเท่ากันสำหรับโมดูลข้อความที่หก แต่ใช้ '87%' แทน

ซ่อนส่วนสำหรับแท็บเล็ตและโทรศัพท์

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

แคตตาล็อกแท็บเล็ตและโทรศัพท์ (ส่วนใหม่)

เพื่อให้ทุกอย่างดูดีบนแท็บเล็ตและโทรศัพท์ด้วย เราจะสร้างส่วนมาตรฐานใหม่

การตั้งค่ามาตรา

สีพื้นหลัง

เพิ่ม '#FFFFFF' เป็นสีพื้นหลังของส่วนนั้น

แพ็ดดิ้งแบบกำหนดเอง

ไปที่แท็บออกแบบและเพิ่มช่องว่างภายในด้านบนเป็น '15px'

แถวแรก

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

จากนั้น เพิ่มแถวสองคอลัมน์ในส่วน

ขนาด

ไปที่หมวดย่อย Sizing ของแถวนั้นและทำการเปลี่ยนแปลงต่อไปนี้:

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

โมดูลรูปภาพ

แทนที่จะใช้ภาพพื้นหลัง เราจะใช้ Image Module แทน ด้วยวิธีนี้ เราจะมั่นใจได้ว่าข้อความและรูปภาพจะไม่ทับซ้อนกัน ไปข้างหน้าและเพิ่มโมดูลรูปภาพในคอลัมน์แรกของแถวและอัปโหลดรูปภาพ

โคลนโมดูลของแถวแรกในเวอร์ชันเดสก์ท็อป

จากนั้นโคลนโมดูลทั้งหมดที่คุณใช้ในแถวแรกของเวอร์ชันเดสก์ท็อปและวางไว้ในคอลัมน์ที่สอง

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

มีเพียงสิ่งเดียวที่ต้องเปลี่ยน ขนาดแบบอักษรของโมดูลข้อความที่สอง เปลี่ยนเป็น 65px

แถวที่สอง

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

จากนั้นไปข้างหน้าและเพิ่มแถวสองคอลัมน์ในส่วน

ขนาด

แถวนี้จะต้องมีหมวดหมู่ย่อย Sizing ที่แก้ไขแล้วเช่นกัน:

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

โมดูลรูปภาพ

เพิ่ม Image Module ในคอลัมน์แรกด้วย และอัปโหลดรูปภาพ

โคลนโมดูลของแถวที่สองในเวอร์ชันเดสก์ท็อป

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

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

ขนาดข้อความของโมดูลข้อความที่สองจำเป็นต้องเปลี่ยนเช่นกัน ไปข้างหน้าและกำหนดขนาดตัวอักษรเป็น '65px'

ซ่อนส่วนสำหรับเดสก์ท็อป

เมื่อคุณทำทั้งสองแถวเสร็จแล้ว คุณสามารถปิดใช้งานส่วนทั้งหมดบนเดสก์ท็อปได้

ผลลัพธ์

และ voila หลังจากทำตามขั้นตอนทั้งหมดในโพสต์นี้ คุณควรบรรลุผลลัพธ์ต่อไปนี้บนเดสก์ท็อป:

และรายการต่อไปนี้บนโทรศัพท์และแท็บเล็ต:

ความคิดสุดท้าย

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย Rvector / shutterstock.com