วิธีการซ้อนรายการพอร์ตโฟลิโออย่างสวยงามด้วยตัวเลือกการแปลงของ Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

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

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

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

• สี 1: #f4f4f4
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 30%
• ตำแหน่งสุดท้าย: 30%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px (เดสก์ท็อป), 18vw (แท็บเล็ต), 40vw (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 0px (เดสก์ท็อป), 18vw (แท็บเล็ต), 40vw (โทรศัพท์)

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

แสดง

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

display: flex;

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

อัพโหลดภาพ

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

อัปโหลดหน้าจอการพิมพ์ไปยัง Image Module ในคอลัมน์แรก

ขนาด

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

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

ระยะห่าง

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

• อัตรากำไรขั้นต้น: -10vw
• ช่องว่างภายในด้านซ้าย: 11vw
• ช่องว่างภายในด้านขวา: 11vw

ชายแดน

เพิ่ม '2vw' ในแต่ละมุมในการตั้งค่าเส้นขอบถัดไป

กล่องเงา

พร้อมกับกล่องเงา

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

แปลงแปล

ตอนนี้เราสามารถเริ่มเปลี่ยนภาพได้แล้ว! เพิ่มค่าต่อไปนี้ในแท็บการแปลการแปลงของตัวเลือกการแปลง:

• ด้านล่าง: -26vw
• ขวา: -2vw

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

แปลงร่างหมุน

ไปที่แท็บ หมุนการแปลง แล้วหมุนรูปภาพตามลำดับ:

• ซ้าย: 24deg
• ศูนย์: 46deg
• ขวา: -7deg

แปล Skew

สุดท้ายแต่ไม่ท้ายสุด เปิดใช้งานการแปลความเอียงด้วยค่าต่อไปนี้:

• ด้านล่าง: -4deg
• ขวา: 24deg

เพิ่มโมดูลรูปภาพ #2 ไปยังคอลัมน์ 1

อัพโหลดภาพ

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

ดำเนินการต่อโดยอัปโหลดหน้าจอการพิมพ์ไปยัง Image Module ที่สองในคอลัมน์ 1

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและเปิดใช้งานตัวเลือก 'บังคับเต็มความกว้าง'

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

ระยะห่าง

เรากำลังย่อขนาดของรูปภาพและทำให้ซ้อนทับกับรูปภาพก่อนหน้าโดยใช้ค่าระยะขอบแบบกำหนดเองบางค่าในการตั้งค่าระยะห่าง

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

ชายแดน

เราจะเพิ่ม '2vw' ให้กับแต่ละมุมในการตั้งค่าเส้นขอบถัดไป

กล่องเงา

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

• ความชัดเจนของเงากล่อง: 150px
• เงาสี: rgba(0,0,0,0.6)

แปลงแปล

จากนั้นไปที่การตั้งค่าการแปลงและแก้ไขค่าการแปลการแปลง:

• ด้านล่าง: -8vw
• ขวา: 0px

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

แปลงร่างหมุน

ไปที่แท็บหมุนการแปลงและเล่นกับทั้งสามค่า

• ซ้าย: 24deg
• ศูนย์: 46deg
• ขวา: -7deg

แปล Skew

สุดท้ายแต่ไม่ท้ายสุด แก้ไขค่าความเบ้ของการแปล:

• ด้านล่าง: -4deg
• ขวา: 24deg

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

อัพโหลดภาพ

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

เพิ่มหน้าจอการพิมพ์ที่คุณบันทึกไว้ใน Image Module ใหม่

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและเปิดใช้งานตัวเลือก 'บังคับเต็มความกว้าง'

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

ระยะห่าง

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

• ขอบบน: -107vw
• ระยะขอบซ้าย: 19vw
• ระยะขอบขวา: 19vw

ชายแดน

ดำเนินการต่อโดยเพิ่ม '2vw' ที่มุมแต่ละมุมของโมดูลรูปภาพ

กล่องเงา

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

• ความชัดเจนของเงากล่อง: 200px
• เงาสี: rgba(0,0,0,0.82)

แปลงแปล

จากนั้นไปที่การตั้งค่าการแปลงและแก้ไขค่าการแปลการแปลง:

• ด้านล่าง: -42vw
• ขวา: 11vw

แปลงร่างหมุน

ไปที่แท็บหมุนการแปลงและทำการเปลี่ยนแปลงที่นั่นด้วย

• ซ้าย: 24deg
• ศูนย์: 46deg
• ขวา: -7deg

แปล Skew

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

• ด้านล่าง: -4deg
• ขวา: 24deg

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

เพิ่ม H2 Copy

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

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

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

• หัวข้อ 2 แบบอักษร: Roboto
• หัวข้อ 2 น้ำหนักแบบอักษร: บาง
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดตัวอักษร: 5vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 7vw (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -1px

ระยะห่าง

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

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

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

ทัศนวิสัย

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

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

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่ง

• สี: #8193fa

ขนาด

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

• น้ำหนักตัวแบ่ง: 8px
• ความกว้าง: 28%

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 1vw
• ระยะขอบซ้าย: -4vw
• ระยะขอบขวา: 4vw

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

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

โมดูลถัดไปที่เราต้องการในคอลัมน์ 2 คือโมดูลข้อความอื่น เพิ่มเนื้อหาย่อหน้าที่คุณเลือก

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.6vw (เดสก์ท็อป), 1.2vw (แท็บเล็ต), 1.8vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 3.1em (เดสก์ท็อป), 2.7em (แท็บเล็ต), 2.6em (โทรศัพท์)
• การวางแนวข้อความ: ซ้าย

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองบางส่วนต่อไป

• มาร์จิ้นสูงสุด: 1vw
• ระยะขอบซ้าย: -4vw
• ระยะขอบขวา: 4vw

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

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

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

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สี 1: #5627ba
• สี 2: #8fb5fc
• ทิศทางการไล่ระดับสี: 122deg
• ความกว้างของขอบปุ่ม: 0px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

เปลี่ยนค่าระยะขอบและช่องว่างภายในแบบกำหนดเองด้วย

• ขอบบน: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ขอบล่าง: 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ระยะขอบซ้าย: -4vw
• ระยะขอบขวา: 4vw
• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• Padding ขวา: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเงาของกล่องที่ละเอียดอ่อนแล้วเสร็จ!

• ความชัดเจนของเงากล่อง: 40px
• เงาสี: rgba(0,0,0,0.3)

ดูตัวอย่าง

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

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

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