หนึ่งในหน้า Landing Page สุดพิเศษที่เรามอบให้คุณในฐานะสมาชิกตลอดชีพและลูกค้าใหม่ของ Black Friday ในปีนี้คือหน้า Landing Page ของ UI Kit ที่น่าทึ่ง เลย์เอาต์นี้มีการผสมผสานการออกแบบในตัวที่ดีที่สุดของ Divi และแบบจำลองคุณภาพสูงที่จะนำเว็บไซต์ของคุณไปสู่อีกระดับ ในโพสต์นี้เราจะแสดงวิธีการรับมือและใช้งานอย่างมีประสิทธิภาพ

หากคุณเป็นลูกค้าตลอดชีพในปัจจุบัน หรือหากคุณซื้อบัญชีใหม่หรืออัปเกรดในช่วงลดราคา Black Friday คุณสามารถดาวน์โหลดเค้าโครงนี้ได้ทันที

รับหน้า Landing Page UI Kit Black Friday สุดพิเศษ

ก่อนที่จะเข้าสู่กรณีการใช้งานนี้ คุณจะต้องใช้หน้า Landing Page ของ Black Friday UI Kit สุดพิเศษที่คุณจะได้รับจากการเป็นสมาชิก Elegant Themes ใหม่ อัปเกรดบัญชีที่มีอยู่ของคุณ หรือโดยเป็นสมาชิกตลอดชีพกับเราอยู่แล้ว หากคุณเป็นสมาชิกตลอดชีพอยู่แล้ว คุณสามารถเข้าสู่ระบบในส่วนสมาชิกของเราและดาวน์โหลดหน้า Landing Page พิเศษทั้งหมดของเราได้ที่นี่ คนอื่นๆ จะต้องใช้ปุ่มด้านล่างเพื่อซื้อหรืออัปเกรดก่อนจึงจะสามารถทำตามบทแนะนำที่เหลือได้

เรียกร้องข้อตกลงก่อนที่มันจะหายไป!

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

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

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

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

ดูตัวอย่าง

มาดูผลลัพธ์ของหน้าจอขนาดต่างๆกัน

โฮเวอร์และแอนิเมชั่น

นอกจากนี้ เราจะเพิ่มการตั้งค่าโฮเวอร์และแอนิเมชั่นที่ละเอียดอ่อนให้กับองค์ประกอบการออกแบบต่างๆ สิ่งนี้จะให้การโต้ตอบต่อไปนี้:

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

เพิ่มหน้าใหม่โดยใช้ UI Kit Landing Page

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่โดยใช้ UI Kit Landing Page ที่คุณดาวน์โหลดและอัปโหลด หากคุณไม่แน่ใจว่าต้องทำอย่างไร ให้ตรวจสอบวิดีโอในส่วนก่อนหน้าของโพสต์นี้ซึ่งจะแนะนำคุณทีละขั้นตอน

ค้นหาส่วนคุณสมบัติในหน้า

เมื่อคุณอัปโหลดเลย์เอาต์แล้ว ให้เลื่อนลงมาจนเจอส่วนฟีเจอร์บนหน้า

ลบแถวที่มีอยู่

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

เพิ่มแถวใหม่ด้านล่างแถวที่มีแถว

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: ใช่
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

เพื่อให้แน่ใจว่าการออกแบบนี้จะดูดีในทุกขนาดหน้าจอ เราจะใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเองที่แตกต่างกัน:

• ขอบบน: 100px
• ขอบล่าง: 100px
• ช่องว่างภายในด้านบน: 87px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 2: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 3 ช่องว่างภายในด้านบน: 100px (เดสก์ท็อป) 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 3 ช่องว่างภายใน: 50px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 4 ช่องว่างภายในด้านซ้าย: 10px (โทรศัพท์เท่านั้น)
• คอลัมน์ 4 ช่องว่างภายในด้านขวา: 10px
• คอลัมน์ที่ 5 ช่องว่างภายในด้านซ้าย: 5px (เดสก์ท็อปและแท็บเล็ต), 10px (โทรศัพท์)
• คอลัมน์ที่ 5 ช่องว่างภายในด้านขวา: 5px (เดสก์ท็อปและแท็บเล็ต), 10px (โทรศัพท์)
• คอลัมน์ 6 ช่องว่างภายในด้านซ้าย: 10px
• คอลัมน์ 6 ช่องว่างภายในด้านซ้าย: 10px (โทรศัพท์เท่านั้น)

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลข้อความลงในคอลัมน์แรกด้วยตัวเลข

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

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

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

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

และเปลี่ยนสีพื้นหลังเมื่อวางเมาส์ไว้

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

ภาพพื้นหลัง

คุณยังสามารถเพิ่มหนึ่งในภาพไอคอน ซึ่งคุณสามารถหาได้ใน Media Library ของคุณไปที่พื้นหลัง:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

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

ดำเนินการต่อโดยแก้ไขการตั้งค่าข้อความ

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

• สีเงาข้อความ: ##ffffff
• การวางแนวข้อความ: ซ้าย

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

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

• ช่องว่างภายในด้านบน: 200px
• ช่องว่างภายในด้านซ้าย: 50px (โทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านขวา: 50px (โทรศัพท์เท่านั้น)

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

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

• ช่องว่างภายในด้านซ้าย: 100px

ชายแดน

เพื่อให้เข้ากับหน้า Landing Page ของ UI Kit เรายังได้เพิ่มมุมโค้งมนที่ละเอียดอ่อนอีกด้วย เพิ่ม '20px' ในแต่ละมุม

กล่องเงา

ใช้เงาของกล่องต่อไปนี้เพื่อเพิ่มสีให้กับโมดูลด้วย:

• ตำแหน่งแนวนอนของกล่องเงา: 20px
• ตำแหน่งแนวตั้งเงาของกล่อง: -50px
• ความแรงของการกระจายเงาของกล่อง: 17px
• สีเงา: #593aff

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด เพิ่มแอนิเมชั่นสไลด์ที่ละเอียดมากให้กับโมดูลข้อความ

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ความเข้มของแอนิเมชั่น: 3%

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

ทัศนวิสัย

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

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

สี

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

• สี: #ffffff

ระยะห่าง

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

• ขอบบน: 30px
• ระยะขอบซ้าย: -200px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• ระยะขอบขวา: 200px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)

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

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

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

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

จากนั้นไปที่การตั้งค่าข้อความส่วนหัวและทำการเปลี่ยนแปลงบางอย่างเพื่อให้ตรงกับ UI Kit Layout Pack

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

ระยะห่าง

ในการผลักโมดูลนี้ไปทางซ้าย เราจะใช้ค่าการเว้นวรรคแบบกำหนดเองบางค่า

• ขอบบน: 20px
• ขอบล่าง: 20px
• ระยะขอบซ้าย: -180px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• Padding ด้านซ้าย: 20px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 20px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)

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

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

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

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

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

• สีข้อความ: rgba(255,255,255,0.5)
• ความสูงของบรรทัดข้อความ: 2.2em

ระยะห่าง

ผลักโมดูลนี้ไปทางซ้ายด้วยโดยใช้ค่าระยะห่างที่กำหนดเอง

• ระยะขอบซ้าย: -180px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• Padding ด้านซ้าย: 20px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 20px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)

โมดูลปุ่มโคลนและวางในคอลัมน์ 3

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

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

เปลี่ยนเนื้อหาของโมดูลปุ่ม

เปลี่ยนระยะห่าง

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

• ขอบบน: 50px
• ระยะขอบซ้าย: -160px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ระยะขอบขวา: 50px (โทรศัพท์เท่านั้น)

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

อัพโหลดภาพ

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

กล่องเงา

เพิ่มเงาของกล่องที่ละเอียดอ่อนให้กับโมดูลนี้

• สีเงา: #ffffff

แอนิเมชั่น

และเพิ่มแอนิเมชั่นสไลด์ให้กับรูปภาพด้วย

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 100ms
• ความเข้มของแอนิเมชั่น: 3%

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

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

ด้านล่างโมดูลรูปภาพ ให้เพิ่มชื่อโมดูลข้อความพร้อมเนื้อหาที่เลือก

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

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

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

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

และใช้สีพื้นหลังอื่นบนโฮเวอร์

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

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

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าข้อความส่วนหัวให้ตรงกับหน้า Landing Page ของ UI Kit

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

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

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

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

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

และเปลี่ยนค่าเหล่านี้เมื่อวางเมาส์เหนือเพื่อสร้างการเปลี่ยนแปลงที่ดี

• มารีนด้านล่าง: 50px
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

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

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

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

สีพื้นหลัง

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

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

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

และแก้ไขการตั้งค่าข้อความ

• สีข้อความ: rgba(255,255,255,0.5)
• ความสูงของบรรทัดข้อความ: 2.2em

ระยะห่าง

หากต้องการสร้างรูปลักษณ์ที่สะอาดตา ให้เพิ่มช่องว่างภายในที่กำหนดเองลงในโมดูลนี้

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

ชายแดน

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่ม '20px' ที่มุมล่างสองมุมของโมดูล

โคลนโมดูลทั้งหมดในคอลัมน์ 4 สองครั้ง & วางในคอลัมน์ที่เหลือ

เปลี่ยนรูปภาพและเนื้อหา

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

โคลนแถวได้มากเท่าที่ต้องการ (ตามจำนวนรายการ)

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

เปลี่ยนเนื้อหาของโคลน

สำหรับรายการที่ซ้ำกันแต่ละรายการ คุณจะต้องเปลี่ยนเนื้อหา

ค้นหาและเปลี่ยนสี

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

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

ตรวจสอบให้แน่ใจว่าเมื่อคุณเปลี่ยนจานสี คุณจะเปลี่ยนสีพื้นหลังโฮเวอร์ของโมดูลข้อความตัวเลขด้วย

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

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

สุดท้ายแต่ไม่ท้ายสุด คุณยังสามารถเลือกไอคอนอื่นในรายการได้โดยขึ้นอยู่กับคุณลักษณะและ/หรือผลิตภัณฑ์ที่คุณอนุญาตให้แสดง

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

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

• ลด 25% ทุกอย่าง
• ฟรีแลนดิ้งเพจทั้ง 6 หน้า
• เข้าถึงธีมและปลั๊กอินที่ยอดเยี่ยมของเรา
• รางวัลโบนัส

คว้าโอกาสและเป็นสมาชิกวันนี้!