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

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

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

ไปกันเถอะ

ดูตัวอย่าง

เดสก์ทอป

มือถือ

ดาวน์โหลดการออกแบบส่วนโพลารอยด์ฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่

ตัวแบ่งด้านล่าง

เพิ่มตัวแบ่งด้านล่างสีเขียวมิ้นต์

• ตำแหน่งตัวแบ่ง: ด้านล่าง
• รูปแบบตัวแบ่ง: #12
• ตัวแบ่งสี: Mint Green #d2f2d0
• ความสูงของตัวแบ่ง: 23vw

ระยะห่าง

ปรับระยะห่างของส่วน

• อัตรากำไรขั้นต้น: 7vw
• ขอบล่าง: 0px
• ช่องว่างด้านบนและด้านล่าง: 0px

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90vw
• ความกว้างสูงสุด: 100%

ระยะห่าง

ถัดไป ปรับช่องว่างด้านบนและด้านล่างในการตั้งค่าระยะห่าง

• ช่องว่างด้านบนและด้านล่าง: 0px

แสดง

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

• Custom CSS – องค์ประกอบหลัก: display: flex;

display: flex;

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

อัปโหลดรูปภาพสแควร์

เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และอัปโหลดรูปภาพสี่เหลี่ยมจัตุรัส

การจัดตำแหน่ง

ตอนนี้ ปรับการจัดตำแหน่งโมดูล

• การจัดตำแหน่งโมดูล: ศูนย์

ขนาด

จากนั้นทำให้โมดูลเต็มความกว้าง

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

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

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

เพิ่มโมดูลข้อความและแทรกเนื้อหาบางส่วน เราจะใช้คำว่าโพลารอยด์

ข้อความ

จัดรูปแบบแบบอักษรข้อความ

• แบบอักษรข้อความ: Advent Pro
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: Very Dark Grey #474747
• ขนาดข้อความ:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต + โทรศัพท์: 2vw
• ระยะห่างของตัวอักษรข้อความ: 0.1vw
• ความสูงของบรรทัดข้อความ: 1.8em

ขนาด

ใช้ '100%' สำหรับความกว้างในการตั้งค่าการปรับขนาด

• ความกว้าง: 100%

ระยะห่าง

ตอนนี้ปรับระยะห่าง

• มาร์จิ้นสูงสุด: 1vw

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

เปลี่ยนรูปภาพ & สำเนาของรายการซ้ำ

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

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

พื้นหลัง

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ 1 ของแถว ตั้งค่าพื้นหลังเป็นสีขาวเพื่อสร้างเอฟเฟกต์โพลารอยด์

• สีพื้นหลัง: ขาว #ffffff

ระยะห่าง

เพิ่ม padding ด้านล่างเพื่อสร้างขอบด้านล่างโพลารอยด์ที่กว้างขึ้น

• แผ่นรองด้านล่าง: 2vw

ชายแดน

เพิ่มเส้นขอบเพื่อทำให้ภาพโพลารอยด์เสร็จสิ้น

• ความกว้างขอบ 4 ด้าน: 1vw
• ความกว้างขอบบน: 2vw
• ความกว้างของขอบขวา: 2vw
• ความกว้างขอบล่าง: 1vw
• ความกว้างของเส้นขอบด้านซ้าย: 2vw
• ขอบสี: ขาว #ffffff

กล่องเงา

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

• กล่องเงา: #1

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

ใช้ตัวเลือกขยายรูปแบบเพื่อขยายการตั้งค่าคอลัมน์

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

คอลัมน์ 1 เปลี่ยนรูปแบบ

ตอนนี้ ปรับการตั้งค่าการแปลงในคอลัมน์แรก

• แปลงแปล: แกน x -11vw, แกน y -6vw
• แปลงร่าง หมุน: 341 องศา ตัวเลือกที่ 1

คอลัมน์ 2 เปลี่ยนรูปแบบ

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

• Transform Translate: แกน x -22w, แกน y 0vw
• Transform Rotate: 10 องศา ตัวเลือกที่ 1

คอลัมน์ 3 เปลี่ยนรูปแบบ

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

• สเกลการแปลง: 68% ทั้งสองแกน
• แปลงแปล: แกน x -46w, แกน y 12vw
• Transform Rotate: 31 องศา ตัวเลือกที่ 1

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

พื้นหลัง

เพิ่มส่วนใหม่และใช้พื้นหลังสีเขียวมิ้นต์กับส่วน

• สีพื้นหลัง: สีเขียวมิ้นต์ #d2f2d0

ตัวแบ่งด้านล่าง

ให้ส่วนแบ่งด้านล่าง

• ตำแหน่งตัวแบ่ง: ด้านล่าง
• รูปแบบตัวแบ่ง: #12
• ตัวแบ่งสี: ขาว #ffffff
• ความสูงของตัวแบ่ง: 23vw

ระยะห่าง

ลบช่องว่างด้านบนเริ่มต้น

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

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

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

ดำเนินการต่อโดยเพิ่มแถวใหม่ที่มี 3 คอลัมน์

คัดลอกและวางลักษณะแถว

ใช้มุมมองโครงร่าง คัดลอกและวางลักษณะแถวจากส่วนแรก

• ขั้นแรก ให้คลิกที่จุดสามจุดทางด้านขวาของเมนูแถวภายในส่วนแรก เลือก 'คัดลอกลักษณะแถว'
• จากนั้น คลิกที่จุดสามจุดทางด้านขวาของเมนูแถวในส่วนที่สอง เลือก 'วางรูปแบบแถว'

คัดลอกและวางการตั้งค่าคอลัมน์

ตอนนี้ คัดลอกการตั้งค่าคอลัมน์ในแถวแรกแล้ววางลงในคอลัมน์ 1 และ 2 ในแถวใหม่

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

คอลัมน์ 1 เปลี่ยนรูปแบบ

ตอนนี้ ปรับสไตล์การแปลงในคอลัมน์ 1

• มาตราส่วนการแปลง: 75% ทั้งสองแกน
• แปลงแปล: แกน x -8w, แกน y -14vw
• Transform Rotate: ตัวเลือกที่ 1 35 องศา

คอลัมน์ 2 เปลี่ยนรูปแบบ

จากนั้น แก้ไขสไตล์การแปลงในคอลัมน์ 2

• แปลงแปล: แกน x -17w, แกน y 2vw
• Transform Rotate: 346 องศา ตัวเลือกที่ 1

เพิ่มโมดูลรูปภาพ

ทำซ้ำและลากโมดูลรูปภาพ

ตอนนี้ กลับไปที่มุมมองโครงลวดเพื่อทำซ้ำและลากโมดูลรูปภาพสองโมดูล

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

เพิ่มโมดูลข้อความ

โมดูลข้อความซ้ำและลาก

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

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

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

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

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

ข้อความ

จัดรูปแบบข้อความดังนี้

• แบบอักษรข้อความ: Advent Pro
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: เทาเข้ม #848484
• ขนาดข้อความ:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต + โทรศัพท์: 1.9vw
• ระยะห่างของตัวอักษรข้อความ: 0.1vw
• ความสูงของบรรทัดข้อความ:
  • เดสก์ท็อป: 1.2em
  • แท็บเล็ต + โทรศัพท์: 1.3em

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

ตอนนี้ จัดรูปแบบข้อความ H2

• หัวข้อ: H2
• แบบอักษร H2: Adamina
• น้ำหนักแบบอักษร H2: ตัวหนา
• H2 Font Color: เทาเข้มมาก #444444
• ขนาดตัวอักษร H2:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต + โทรศัพท์: 3vw
• ระยะห่างระหว่างตัวอักษร H2: 4px
• ความสูงของสาย H2:
  • เดสก์ท็อป: 1.7vw
  • แท็บเล็ต + โทรศัพท์: 1.5vw

ขนาด

จากนั้นปรับขนาด

• ความกว้าง:
  • เดสก์ท็อป: 60%
  • แท็บเล็ต: 91%
  • โทรศัพท์: 100%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ขอบบน: -12vw

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

เพิ่มสำเนา

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

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่ง: ศูนย์

สไตล์ปุ่มกำหนดเอง

จัดรูปแบบปุ่มให้เหมาะสม

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.4vw
  • โทรศัพท์: 2.3vw
• ความกว้างของขอบปุ่ม: 0px
• สีข้อความของปุ่ม: สีดำ #000000
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษรของปุ่ม: Advent Pro
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

ใช้ค่ามาร์จิ้นด้านบน

• อัตรากำไรขั้นต้น: 2vw

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

ทัศนวิสัย

ใต้ปุ่ม ให้เพิ่มตัวแบ่งและจัดรูปแบบดังนี้

• ทัศนวิสัย: ใช่

เส้น

ให้ตัวแบ่งมีสีเขียวสดใส

• สีเส้น: #55f252

ขนาด

เปลี่ยนการตั้งค่าขนาดของตัวแบ่งแล้วเสร็จ!

• ตัวแบ่งน้ำหนัก
  • เดสก์ท็อป: 7px
  • แท็บเล็ต + โทรศัพท์: 4px
• ความกว้าง:
  • เดสก์ท็อป: 10%
  • แท็บเล็ต + โทรศัพท์: 30%
• การจัดตำแหน่งโมดูล: ศูนย์

ดูตัวอย่าง

มาดูการออกแบบที่เสร็จแล้วของส่วนโพลารอยด์ฮีโร่ในหน้าจอขนาดต่างๆ กันอีกครั้ง

เดสก์ทอป

มือถือ

มันเป็นแรป!

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