วิธีสลับระหว่างรูปภาพในการออกแบบส่วน Divi Split ที่สวยงาม

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

ไปกันเถอะ!

ดูตัวอย่าง

มาดูการออกแบบหน้าจอขนาดต่างๆกัน

เดสก์ทอป

มือถือ

ดาวน์โหลด The Toggle Image Design ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

ระยะห่าง

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

• ช่องว่างบน + ล่าง: 0vw

ทัศนวิสัย

จากนั้นตั้งค่าโอเวอร์โฟลว์ของส่วนเป็นซ่อน

• แนวนอน + แนวตั้งล้น: ซ่อน

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

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

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

ขนาด

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวด้วย

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

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

พื้นหลัง

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

• สี: Pale Rose #E7BAC6

ชายแดน

จากนั้น ปรับการตั้งค่าเส้นขอบของคอลัมน์ตามขนาดหน้าจอต่างๆ

• มุมโค้งมน: บนขวา + ล่างขวา
  • เดสก์ท็อป: 10vw
  • แท็บเล็ตและโทรศัพท์: 0vw

ทัศนวิสัย

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

• แนวนอน + แนวตั้งล้น
  • เดสก์ท็อป: Default
  • วางเมาส์เหนือ: มองเห็นได้
• ดัชนี Z:
  • เดสก์ท็อป: 10
  • โฮเวอร์: 11

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

พื้นหลัง

ตอนนี้ เพิ่มพื้นหลังสีให้กับคอลัมน์ 2

• สี: Pale Green #bfd5a5

ชายแดน

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

• มุมโค้งมน: บนซ้าย + ล่างซ้าย
  • เดสก์ท็อป: 10vw
  • แท็บเล็ตและโทรศัพท์: 0vw

ทัศนวิสัย

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

• แนวนอน + แนวตั้งล้น
  • เดสก์ท็อป: Default
  • วางเมาส์เหนือ: มองเห็นได้
• ดัชนี Z:
  • เดสก์ท็อป: 9
  • โฮเวอร์: 11

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

ใส่รูปภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และอัปโหลดรูปภาพกึ่งโปร่งใสที่คุณเลือก

พื้นหลัง

ใช้สีพื้นหลังของคอลัมน์เป็นสีพื้นหลังของรูปภาพ

• สี: Pale Rose #E7BAC6

ขนาด

จากนั้นในแท็บการออกแบบ ให้ปรับการตั้งค่าการปรับขนาด

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

ระยะห่าง

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

• ช่องว่างภายในด้านขวา:
  • แท็บเล็ต: 18vw
  • โทรศัพท์: 20vw

แปลง

สุดท้ายแต่ไม่ท้ายสุด ให้ปรับการตั้งค่าการแปลการแปลงของโมดูล

• แปลงแปล: แกน x 19vw

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความ เพิ่มเนื้อหา H2 และย่อหน้าที่คุณเลือก

ข้อความ

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

• แบบอักษร: Verdana
• สี: ขาว #ffffff
• ขนาด:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 3.5vw
• ระยะห่างระหว่างตัวอักษร: 1px
• การจัดตำแหน่ง: กึ่งกลาง

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

จัดรูปแบบข้อความหัวเรื่องถัดไป

• ระดับหัวเรื่อง: H2
• แบบอักษร: Verdana
• น้ำหนัก: หนา
• การจัดตำแหน่ง: ศูนย์
• สี: Magenta #9d3056
• ขนาด:
  • เดสก์ท็อป: 6vw
  • แท็บเล็ต + โทรศัพท์: 8vw

ขนาด

จากนั้นปรับขนาดของโมดูล

• ความกว้าง:
  • เดสก์ท็อป: 56%
  • แท็บเล็ต + โทรศัพท์: 43%

ระยะห่าง

ตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขการตั้งค่าระยะห่างในหน้าจอขนาดต่างๆ

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -55vw
  • แท็บเล็ต: -70vw
  • โทรศัพท์: -90vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป + แท็บเล็ต: 0vw
• ช่องว่างภายในด้านซ้าย: 2vw

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

การตั้งค่าเคาน์เตอร์บาร์ 1-4

ชื่อเรื่อง

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

1. สตรอเบอร์รี่
2. บลูเบอร์รี่
3. แบล็กเบอร์รี่
4. ราสเบอรี่

เปอร์เซ็นต์

พร้อมทั้งเปอร์เซ็นต์

1. 20
2. 40
3. 10
4. 20

ขนาด

คลิกที่แถบแรกและตั้งค่าความสูง ทำซ้ำขั้นตอนนี้สำหรับทั้งสี่แท่ง

• ส่วนสูง: 1.5vw

การตั้งค่าเคาน์เตอร์บาร์ทั่วไป

องค์ประกอบ

ในการตั้งค่าเคาน์เตอร์บาร์ทั่วไป ให้เปิดการตั้งค่าองค์ประกอบ สลับเปอร์เซ็นต์เป็น "ไม่"

• แสดงเปอร์เซ็นต์: ไม่

พื้นหลัง

ตอนนี้ เพิ่มพื้นหลังกึ่งโปร่งใส

• สี: Pale Rose with Transparency rgba(157,48,86,0.18)

บาร์

ในแท็บการออกแบบ ให้แถบสีแถบสีม่วงแดง

• สีพื้นหลัง: สีม่วงแดง #9d3056

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

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

• แบบอักษร: Verdana
• สี: ขาว #ffffff
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ขนาด

ดำเนินการต่อโดยปรับการตั้งค่าขนาดของโมดูล

• ความกว้าง:
  • เดสก์ท็อป: 49%
  • แท็บเล็ต + โทรศัพท์: 33%

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • แท็บเล็ต + โทรศัพท์: -3vw
• ขอบล่าง:
  • เดสก์ท็อป: 21vw
  • แท็บเล็ต + โทรศัพท์: 28vw
• ระยะขอบซ้าย:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต + โทรศัพท์: 6vw
• ด้านล่าง + ช่องว่างภายในด้านซ้าย: 0vw

ชายแดน

แก้ไขการตั้งค่าเส้นขอบถัดไป

• มุมโค้งมน: 1vw ทั้งสี่มุม

ทัศนวิสัย

สุดท้าย ปรับดัชนี z และโอเวอร์โฟลว์ในแท็บการมองเห็น

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: ซ่อน
• ดัชนี Z: 11

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

ใส่รูปภาพ

ต่อคอลัมน์ที่สอง! เพิ่มโมดูลรูปภาพใหม่และอัปโหลดรูปภาพกึ่งโปร่งใสที่คุณเลือก

พื้นหลัง

ใช้สีพื้นหลังของคอลัมน์ 2 เป็นสีพื้นหลังของรูปภาพถัดไป

• สี: Pale Green #bfd5a5

ขนาด

ในแท็บการออกแบบ ให้ปรับขนาดของโมดูล

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

ระยะห่าง

เพิ่มช่องว่างภายในที่กำหนดเองในขนาดหน้าจอที่เล็กกว่าด้วย

• ช่องว่างภายในด้านซ้าย:
  • แท็บเล็ต: 16vw
  • โทรศัพท์: 18vw

แปลง

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

• แปลงแปล: แกน x -19.6vw

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

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

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

ข้อความ

จากนั้นในแท็บออกแบบ ให้จัดรูปแบบข้อความ

• แบบอักษร: Verdana
• สี: ขาว #ffffff
• ขนาด:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 3.5vw
• ระยะห่างระหว่างตัวอักษร: 1px
• การจัดตำแหน่ง: ศูนย์

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

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

• ระดับหัวเรื่อง: H2
• แบบอักษร: Verdana
• น้ำหนัก: หนา
• การจัดตำแหน่ง: ศูนย์
• สี: เขียว #2c5b00
• ขนาด:
  • เดสก์ท็อป: 6vw
  • แท็บเล็ต + โทรศัพท์: 8vw

ขนาด

และปรับการตั้งค่าขนาดของโมดูล

• ความกว้าง: 60%
• การจัดตำแหน่ง: ขวา

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด ใช้ค่าการเว้นวรรคแบบกำหนดเองในขนาดหน้าจอต่างๆ

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -55vw
  • แท็บเล็ต: -63vw
  • โทรศัพท์: -90vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป + แท็บเล็ต: 37vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป: 0vw
  • แท็บเล็ต + โทรศัพท์: 16vw
• ช่องว่างภายในด้านขวา:
  • แท็บเล็ต + โทรศัพท์: 2vw

เพิ่มโมดูลเคาน์เตอร์บาร์ในคอลัมน์ 2

การตั้งค่าเคาน์เตอร์บาร์ 1-4

ชื่อเรื่อง

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

1. บร็อคโคลี
2. ผักชีฝรั่ง
3. แตงกวา
4. ผักคะน้า

เปอร์เซ็นต์

กำหนดเปอร์เซ็นต์ให้กับแต่ละเคาน์เตอร์บาร์

1. 20
2. 40
3. 20
4. 30

ขนาด

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

• ส่วนสูง: 1.5vw

การตั้งค่าเคาน์เตอร์บาร์ทั่วไป

องค์ประกอบ

ในการตั้งค่าเคาน์เตอร์บาร์ทั่วไป ให้เปลี่ยนการสลับเปอร์เซ็นต์เป็น "ไม่"

• แสดงเปอร์เซ็นต์: ไม่

พื้นหลัง

ถัดไป เพิ่มสีพื้นหลังกึ่งโปร่งใส

• สี: สีเขียวซีดพร้อม rgba โปร่งใส (17,119,3,0.18)

บาร์

จากนั้น ในแท็บการออกแบบ ให้เพิ่มสีให้กับแถบตัวนับ

• แถบสี: เขียว #9d3056

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

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

• แบบอักษร: Verdana
• สี: ขาว #ffffff
• ขนาด:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ขนาด

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

• ความกว้าง:
  • เดสก์ท็อป: 49%
  • แท็บเล็ต + โทรศัพท์: 33%

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -37vw
  • แท็บเล็ต + โทรศัพท์: -40vw
• ขอบล่าง:
  • เดสก์ท็อป: 21vw
  • แท็บเล็ต + โทรศัพท์: 28vw
• ระยะขอบซ้าย:
  • เดสก์ท็อป: 23vw
  • แท็บเล็ต + โทรศัพท์: 60vw
• ด้านล่าง + ช่องว่างภายในด้านซ้าย: 0vw

ชายแดน

เรากำลังเพิ่มมุมโค้งมนด้วย

• มุมโค้งมน: 1vw ทั้งสี่มุม

ทัศนวิสัย

ตั้งค่าโมดูลให้สมบูรณ์โดยปรับโอเวอร์โฟลว์และดัชนี z ในแท็บการมองเห็น

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: ซ่อน
• ดัชนี Z: 11

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

มันเป็นแรป!

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