การใช้พื้นหลังของโมดูลเพื่อแสดงภาพพารัลแลกซ์แบบอินไลน์ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครง Inline Parallax ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

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

ระยะห่าง

เพิ่มค่าการเติมบนสุดให้กับคอลัมน์แรก

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต + โทรศัพท์: 6vw

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

ระยะห่าง

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

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 4vw
  • แท็บเล็ต + โทรศัพท์: 6vw

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

ระยะห่าง

ข้ามคอลัมน์ 3 และเพิ่มค่าระยะห่างบางส่วนให้กับคอลัมน์ 4

• แผ่นรองด้านบน
  • เดสก์ท็อป: 19vw
  • แท็บเล็ต: 0vw
  • โทรศัพท์: 1vw
• ช่องว่างภายในซ้ายและขวา
  • เดสก์ท็อปและแท็บเล็ต: 1vw
  • โทรศัพท์: 0vw

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

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

ตอนนี้ เพิ่มโมดูลข้อความแรกในคอลัมน์ 1 แทรกเนื้อหา H2 ที่คุณเลือก

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

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

• ระดับข้อความหัวเรื่อง: H2
• แบบอักษร H2: EB Garamond
• รูปแบบตัวอักษร H2: TT
• สีข้อความ H2: ดำ #oooooo
• ขนาดข้อความ H2:
  • เดสก์ท็อป: 3.1vw
  • แท็บเล็ต: 5.4vw
  • โทรศัพท์: 10vw
• ความสูงของสาย H2:
  • เดสก์ท็อป + แท็บเล็ต: 1.1em
  • โทรศัพท์: 1.3em

ระยะห่าง

จากนั้น เพิ่มระยะห่างบางส่วนให้กับโมดูล

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 4vw
  • แท็บเล็ต + โทรศัพท์: 0vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อปและแท็บเล็ต: 1vw
  • โทรศัพท์: 2vw
• ช่องว่างภายในด้านขวา
  • เดสก์ท็อปและแท็บเล็ต: 1vw
  • โทรศัพท์: 0vw

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

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

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

ข้อความ

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

• แบบอักษรของข้อความ: EB Garamond
• สีข้อความ: เทาเข้ม #3d3d3d
• ขนาดข้อความ:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.8vw
• ความสูงของบรรทัดข้อความ: 1.8em

ระยะห่าง

ปรับการตั้งค่าระยะห่างของโมดูลถัดไป

• แผ่นรองด้านล่าง:
  • โทรศัพท์: 4vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป + แท็บเล็ต: 1.4vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป: 1.3vw
  • แท็บเล็ต + โทรศัพท์: 1.7vw

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

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

เพื่อให้คอลัมน์แรกสมบูรณ์ ให้เพิ่มโมดูลปุ่ม แทรกสำเนาบางส่วน

เพิ่มลิงค์

เพิ่มลิงค์ไปยังปุ่มเช่นกัน

ปุ่ม

ไปที่แท็บออกแบบและจัดรูปแบบการตั้งค่าปุ่มตามลำดับ:

• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 4vw
• สีข้อความของปุ่ม: เทาเข้ม #3d3d3d
• ความกว้างของขอบปุ่ม: 1px
• แบบอักษรของปุ่ม: EB Garamond

ระยะห่าง

จากนั้น ปรับการตั้งค่าระยะห่างของปุ่ม

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป + แท็บเล็ต: 1vw
• ขอบล่าง:
  • โทรศัพท์: 5vw

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

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

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

พื้นหลัง

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

• พื้นหลังของเดสก์ท็อป: รูปภาพ
  • พารัลแลกซ์: CSS
• พื้นหลังแท็บเล็ต + โทรศัพท์: รูปภาพ

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

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

• โฮเวอร์พื้นหลัง: การไล่ระดับสี
• การไล่ระดับสี 1: สีเหลืองทองอ่อน #edba63
• การไล่ระดับสี 2: สีเหลืองทอง #ed9d12
• ทิศทางการไล่ระดับสี: 23 องศา
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

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

• ระดับหัวเรื่องข้อความ: H4
• แบบอักษร H4: EB Garamond
• สีข้อความ H4: ขาว #ffffff
• ขนาดข้อความ H4:
  • เดสก์ท็อป: 2.3vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 8.5vw

ระยะห่าง

จากนั้นปรับระยะห่าง

• มาร์จิ้นสูงสุด:
  • โทรศัพท์: -6vw
• แผ่นรองด้านบน:
  • เดสก์ท็อป: 15vw
  • แท็บเล็ต: 22vw
  • โทรศัพท์: 43vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป + แท็บเล็ต: 1vw
• ช่องว่างภายในซ้ายและขวา:
  • เดสก์ท็อปและแท็บเล็ต: 1.5vw
  • โทรศัพท์: 5vw

ชายแดน

ต่อด้วยการจัดแต่งเส้นขอบ

• มุมโค้งมน: 1vw ทุกมุม
• รูปแบบเส้นขอบ: ทุกด้าน
• ความกว้างของเส้นขอบ: 0.3vw
• ขอบสี: ขาว #ffffff

เปลี่ยนขนาดโฮเวอร์

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มเอฟเฟกต์การซูมเมื่อวางเมาส์เหนือ

• เปลี่ยนมาตราส่วนเมื่อวางเมาส์เหนือ: 102%

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

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

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

พื้นหลัง

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

• พื้นหลังของเดสก์ท็อป: รูปภาพ
  • พารัลแลกซ์: CSS
• พื้นหลังแท็บเล็ต + โทรศัพท์: รูปภาพ

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

เพิ่มพื้นหลังไล่ระดับโฮเวอร์ด้วย

• โฮเวอร์พื้นหลัง: การไล่ระดับสี
• การไล่ระดับสี 1: สีม่วงแดงอ่อน #91463f
• การไล่ระดับสี 2: สีม่วงแดง #910400
• ทิศทางการไล่ระดับสี: 23 องศา
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

จัดรูปแบบการตั้งค่าข้อความ H4 ต่อไป

• ระดับหัวเรื่องข้อความ: H4
• แบบอักษร H4: EB Garamond
• สีข้อความ H4: ขาว #ffffff
• ขนาดข้อความ H4:
  • เดสก์ท็อป: 2.3vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 8.5vw

ระยะห่าง

และแก้ไขการตั้งค่าระยะห่าง

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 15vw
  • แท็บเล็ต: 21.1vw
  • โทรศัพท์: 43vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป + แท็บเล็ต: 1vw
• ช่องว่างภายในซ้ายและขวา:
  • เดสก์ท็อปและแท็บเล็ต: 1.5vw
  • โทรศัพท์: 5vw

ชายแดน

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

• มุมโค้งมน: 1vw ทุกมุม
• รูปแบบเส้นขอบ: ทุกด้าน
• ความกว้างของเส้นขอบ: 0.3vw
• ขอบสี: ขาว #ffffff

เปลี่ยนขนาดโฮเวอร์

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเอฟเฟกต์การซูมเข้าในโมดูลข้อความ

• เปลี่ยนมาตราส่วนเมื่อวางเมาส์เหนือ: 102%

โมดูลข้อความที่ซ้ำกันจากคอลัมน์ 2 ถึงคอลัมน์ 3

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

โคลนทั้งโมดูลข้อความและวางไว้ในคอลัมน์ที่สามของแถว

ปรับโมดูลข้อความที่ 1 ในคอลัมน์ 3

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

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

เปลี่ยนพื้นหลังสำหรับแท็บเล็ตและโทรศัพท์

เปลี่ยนภาพพื้นหลังในขนาดหน้าจอที่เล็กลงต่อไป

เปลี่ยนการไล่ระดับสีบนโฮเวอร์

ดำเนินการต่อโดยเปลี่ยนสีในโฮเวอร์การไล่ระดับสี

• การไล่ระดับสี 1: สีชมพูกุหลาบ #cc9293
• การไล่ระดับสี 2: สีชมพู #cc9293

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • แท็บเล็ต: -6.4vw
  • โทรศัพท์: 0vw

ปรับโมดูลข้อความที่ 2 ในคอลัมน์ 3

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

ขั้นแรกให้เปลี่ยนเนื้อหา

เปลี่ยนพื้นหลังสำหรับแท็บเล็ตและโทรศัพท์

จากนั้นให้เปลี่ยนภาพพื้นหลังในขนาดหน้าจอที่เล็กลง

เปลี่ยนการไล่ระดับสีบนโฮเวอร์

เปลี่ยนพื้นหลังไล่ระดับด้วย

• การไล่ระดับสี 1: ไม้สนอ่อน #5c755c
• การไล่ระดับสี 2: ไพน์กรีน #4D754D

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

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

ไปที่คอลัมน์ 4 เพิ่มโมดูลข้อความ แทรกเนื้อหา H3 ที่คุณเลือก

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

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

• ระดับข้อความหัวเรื่อง: H3
• แบบอักษรข้อความ H3: EB Garamond
• รูปแบบตัวอักษร H3: TT
• สีข้อความ H3: สีดำ #oooooo
• ขนาดข้อความ H3:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 5vw
  • โทรศัพท์: 12vw
• ความสูงของเส้น H3
  • เดสก์ท็อป + แท็บเล็ต: 1em
  • โทรศัพท์: 1.1em

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างก่อน แทรกเนื้อหาบางย่อหน้า

ข้อความ

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

• แบบอักษรของข้อความ: EB Garamond
• สีข้อความ: เทาเข้ม #3d3d3d
• ขนาดข้อความ:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2.2vw
  • โทรศัพท์: 3.8vw
• ความสูงของบรรทัดข้อความ: 1.8em

ระยะห่าง

จากนั้นปรับระยะห่าง

• แผ่นรองด้านล่าง:
  • โทรศัพท์: 4vw
• ช่องว่างภายในด้านซ้าย: 0.9vw
• ช่องว่างภายในด้านขวา: 2.2vw

โมดูลปุ่มซ้ำกันจากคอลัมน์ 1 ถึงคอลัมน์ 4

ทำซ้ำและลากโมดูลปุ่ม

• ทำซ้ำโมดูลปุ่มในคอลัมน์ 1
• ลากไปที่คอลัมน์ 3 ด้านล่างโมดูลข้อความ

ระยะห่าง

ปรับค่าระยะห่างบางส่วนในโมดูลปุ่มที่ซ้ำกัน เท่านี้ก็เรียบร้อย!

• ระยะขอบล่าง: 0vw
• ระยะขอบซ้าย:
  • เดสก์ท็อป + แท็บเล็ต: 0.7vw
  • โทรศัพท์: 0.9vw

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

บทสรุป

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