วิธีเน้นหมวดหมู่ผลิตภัณฑ์ในส่วนฮีโร่เว็บไซต์ Divi อันน่าทึ่ง

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

ไปกันเถอะ

ดูตัวอย่าง

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

มาเริ่มสร้างกันเลย!

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #ffffff
• สี 2: #757f1e
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ระยะห่าง

จากนั้นไปที่แท็บการออกแบบและเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองในส่วน

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

เพิ่มแถว #1

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

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: rgba(0,0,0,0.19)

คอลัมน์ 1 ภาพพื้นหลัง

เพิ่มภาพพื้นหลังให้กับคอลัมน์แรกด้วยพร้อมกับโหมดผสมผสาน

• คอลัมน์ 1 ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านล่าง
• คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ
• คอลัมน์ 1 ภาพพื้นหลังแบบผสมผสาน: คูณ

คอลัมน์ 2 สีพื้นหลัง

คอลัมน์ที่สองจะต้องใช้สีพื้นหลังสีขาวเท่านั้น

• คอลัมน์ 2 สีพื้นหลัง: #ffffff

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 2000px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

ลบช่องว่างภายในแบบกำหนดเองเริ่มต้นทั้งหมดของแถวด้วย

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

กล่องเงา

และเพิ่มเงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px

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

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

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

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

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

• น้ำหนักแบบอักษรของหัวเรื่อง: Ultra Bold
• ขนาดข้อความหัวเรื่อง: 60px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ระยะห่างของตัวอักษรหัวเรื่อง: -4px
• ความสูงของบรรทัดหัวเรื่อง: 0.8em

ระยะห่าง

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

• ขอบบน: 17vw
• Padding ซ้าย: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

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

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

สี

เปลี่ยนสีของตัวแบ่งถัดไป

• สี: #757f1e

สไตล์

แก้ไขสไตล์ตัวแบ่งในการตั้งค่าสไตล์ด้วย

• รูปแบบตัวแบ่ง: Double

ขนาด

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

• น้ำหนักตัวแบ่ง: 6px

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ขอบล่าง: 15vw

เพิ่มแถว #2

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

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: #212121

ขนาด

ถัดไป ไปที่แท็บการออกแบบและลองปรับขนาดของแถว

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 2000px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

ลบช่องว่างภายในที่กำหนดเองทั้งหมดของแถวด้วยการเพิ่ม '0px' ลงในช่องว่างด้านบนและด้านล่าง

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

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้เงาของกล่องที่บอบบางแก่แถว

• ความแรงของกล่องเงาเบลอ: 80px

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

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

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

การตั้งค่าข้อความ

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

• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 12px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย
• สีข้อความ: เบา

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

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

• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 25px (เดสก์ท็อป), 20px (แท็บเล็ต), 18px (โทรศัพท์)
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -1px

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 30px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

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

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

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

สีพื้นหลังเริ่มต้น

จากนั้นไปที่การตั้งค่าพื้นหลังและเพิ่มสีพื้นหลัง

• สีพื้นหลัง: #eaeaea

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์

• สีพื้นหลัง: #ffbb00

การตั้งค่าข้อความเริ่มต้น

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

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #333333
• ขนาดตัวอักษร: 16px
• ระยะห่างของตัวอักษรข้อความ: -1px
• การวางแนวข้อความ: ศูนย์

เลื่อนการตั้งค่าข้อความ

และแก้ไขการตั้งค่าเหล่านี้เมื่อวางเมาส์เหนือ

• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 20px

ระยะห่างเริ่มต้น

เรายังใช้ค่าระยะห่างเริ่มต้นบางค่า

• ช่องว่างภายในด้านบน: 45px
• ช่องว่างภายในด้านล่าง: 45px
• ช่องว่างภายในด้านซ้าย: 5px
• ช่องว่างภายในด้านขวา: 5px

โฮเวอร์ระยะห่าง

ซึ่งเราจะเปลี่ยนเมื่อโฮเวอร์

• อัตรากำไรขั้นต้น: -50px
• ระยะขอบซ้าย: -20px
• ช่องว่างภายในด้านบน: 70px
• ช่องว่างภายในด้านล่าง: 70px
• ช่องว่างภายในด้านซ้าย: 5px
• ช่องว่างภายในด้านขวา: 5px

ค่าเริ่มต้นกล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(255,255,255,0)

เงากล่องเลื่อน

เปลี่ยนสีเงาของกล่องที่โปร่งใสทั้งหมดเมื่อวางเมาส์ไว้เพื่อให้ปรากฏขึ้น

• เงาสี: rgba(0,0,0,0.34)

Clone Text Module #2 สองครั้ง & วางในคอลัมน์ที่เหลือ

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

เปลี่ยนรายการซ้ำก่อน

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

เปิดสำเนาแรกในคอลัมน์ที่สามแล้วเปลี่ยนเนื้อหาและลิงก์ของหมวดหมู่สินค้า

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

เปลี่ยนสีพื้นหลังของโมดูลนี้ด้วย

• สีพื้นหลัง: #dddddd

เปลี่ยนรายการซ้ำที่สอง

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

เปลี่ยนเนื้อหาของรายการที่ซ้ำกันที่สองในคอลัมน์ 4 ด้วย

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

พร้อมกับสีพื้นหลัง

• สีพื้นหลัง: #c6c6c6

เพิ่มโมดูลรูปภาพสำหรับขนาดหน้าจอที่เล็กลงในคอลัมน์ 2 ของแถว #1

อัพโหลดภาพ

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

ทัศนวิสัย

ตรวจสอบให้แน่ใจว่าโมดูลนี้ปรากฏบนขนาดหน้าจอที่เล็กกว่าเท่านั้นโดยซ่อนไว้บนเดสก์ท็อปในแท็บขั้นสูงของโมดูล

ดูตัวอย่าง

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

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

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